From 603590ed5d465288436e035aaeed8c753a947449 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Metehan=20Erdo=C4=9Fan?= <me0579078@gmail.com>
Date: Wed, 12 Aug 2026 19:32:33 +0300
Subject: [PATCH] feat: add nominal profit column to projection table

Introduce a new "Nominal Profit" column in ProjectionTable: header, cell rendering and styling. Cells show formatted nominalProfit (using formatLocalCurrency) with TrendingUp/TrendingDown icons and conditional blue/rose colors via isNominalProfitPos. Adjust table layout colspan from 8 to 9 to accommodate the new column. Improves visibility of nominal vs real performance in the projection rows.
---
 src/components/projection/ProjectionTable.tsx | 26 ++++++++++++++++++-
 1 file changed, 25 insertions(+), 1 deletion(-)

diff --git a/src/components/projection/ProjectionTable.tsx b/src/components/projection/ProjectionTable.tsx
index e97c1e6..7cbb238 100644
--- a/src/components/projection/ProjectionTable.tsx
+++ b/src/components/projection/ProjectionTable.tsx
@@ -155,6 +155,9 @@ export const ProjectionTable: React.FC = () => {
                 <th className="py-2.5 px-3 text-right">
                   {t("table.nominalValueCol")}
                 </th>
+                <th className="py-2.5 px-3 text-right">
+                  {t("table.nominalProfitCol")}
+                </th>
                 <th className="py-2.5 px-3 text-right">
                   {t("table.realValueCol")}
                 </th>
@@ -172,6 +175,7 @@ export const ProjectionTable: React.FC = () => {
             <tbody className="divide-y divide-border/40">
               {paginatedRows.length > 0 ? (
                 paginatedRows.map((row) => {
+                  const isNominalProfitPos = row.nominalProfit >= 0
                   const isRealProfitPos = row.realProfit >= 0
                   return (
                     <tr
@@ -205,6 +209,26 @@ export const ProjectionTable: React.FC = () => {
                           locale,
                         )}
                       </td>
+                      <td
+                        className={`py-2 px-3 text-right font-medium ${
+                          isNominalProfitPos
+                            ? "text-blue-600 dark:text-blue-400"
+                            : "text-rose-600 dark:text-rose-400"
+                        }`}
+                      >
+                        <div className="flex items-center justify-end gap-1">
+                          {isNominalProfitPos ? (
+                            <TrendingUp className="w-3 h-3 text-blue-500" />
+                          ) : (
+                            <TrendingDown className="w-3 h-3 text-rose-500" />
+                          )}
+                          {formatLocalCurrency(
+                            row.nominalProfit,
+                            currencyCode,
+                            locale,
+                          )}
+                        </div>
+                      </td>
                       <td className="py-2 px-3 text-right font-medium text-emerald-600 dark:text-emerald-400">
                         {formatLocalCurrency(
                           row.realValue,
@@ -244,7 +268,7 @@ export const ProjectionTable: React.FC = () => {
               ) : (
                 <tr>
                   <td
-                    colSpan={8}
+                    colSpan={9}
                     className="py-6 text-center text-muted-foreground font-sans"
                   >
                     No matching records found.