From c031a49a2993ba18c7e4a29026faa42b832dc933 Mon Sep 17 00:00:00 2001
From: chamikaJ <chamika@ceydigital.com>
Date: Fri, 6 Jun 2025 14:43:30 +0530
Subject: [PATCH] refactor(project-finance): enhance financial statistics
 display and formatting

- Updated the layout of financial statistics in the ProjectViewFinance component for improved responsiveness and visual clarity.
- Adjusted the formatting of variance and budget utilization values to ensure consistent presentation, including prefix and suffix adjustments.
- Refactored the FinanceTable component to display variance values with appropriate signs and formatting.
- Implemented the use of createPortal for rendering the FinanceDrawer, improving modal management.
---
 .../finance-table/finance-table-wrapper.tsx   |  7 +-
 .../finance-table/finance-table.tsx           | 12 +++-
 .../finance/project-view-finance.tsx          | 65 +++++++++++--------
 3 files changed, 52 insertions(+), 32 deletions(-)

diff --git a/worklenz-frontend/src/pages/projects/projectView/finance/finance-tab/finance-table/finance-table-wrapper.tsx b/worklenz-frontend/src/pages/projects/projectView/finance/finance-tab/finance-table/finance-table-wrapper.tsx
index 1c4419aa..0e5b6dd0 100644
--- a/worklenz-frontend/src/pages/projects/projectView/finance/finance-tab/finance-table/finance-table-wrapper.tsx
+++ b/worklenz-frontend/src/pages/projects/projectView/finance/finance-tab/finance-table/finance-table-wrapper.tsx
@@ -9,6 +9,7 @@ import { financeTableColumns, FinanceTableColumnKeys } from '@/lib/project/proje
 import FinanceTable from './finance-table';
 import FinanceDrawer from '@/features/finance/finance-drawer/finance-drawer';
 import { IProjectFinanceGroup } from '@/types/project/project-finance.types';
+import { createPortal } from 'react-dom';
 
 interface FinanceTableWrapperProps {
   activeTablesList: IProjectFinanceGroup[];
@@ -128,7 +129,9 @@ const FinanceTableWrapper: React.FC<FinanceTableWrapperProps> = ({ activeTablesL
               fontSize: 18,
             }}
           >
-            {`${totals.variance?.toFixed(2)}`}
+            {totals.variance < 0 ? `+${Math.abs(totals.variance).toFixed(2)}` : 
+             totals.variance > 0 ? `-${totals.variance.toFixed(2)}` : 
+             `${totals.variance?.toFixed(2)}`}
           </Typography.Text>
         );
       case FinanceTableColumnKeys.TOTAL_TIME_LOGGED:
@@ -243,7 +246,7 @@ const FinanceTableWrapper: React.FC<FinanceTableWrapperProps> = ({ activeTablesL
         </table>
       </Flex>
 
-      <FinanceDrawer />
+      {createPortal(<FinanceDrawer />, document.body)}
     </>
   );
 };
diff --git a/worklenz-frontend/src/pages/projects/projectView/finance/finance-tab/finance-table/finance-table.tsx b/worklenz-frontend/src/pages/projects/projectView/finance/finance-tab/finance-table/finance-table.tsx
index 96809d80..8c8b74b6 100644
--- a/worklenz-frontend/src/pages/projects/projectView/finance/finance-tab/finance-table/finance-table.tsx
+++ b/worklenz-frontend/src/pages/projects/projectView/finance/finance-tab/finance-table/finance-table.tsx
@@ -125,7 +125,13 @@ const FinanceTable = ({
       case FinanceTableColumnKeys.TOTAL_ACTUAL:
         return <Typography.Text>{formatNumber(formattedTotals.total_actual)}</Typography.Text>;
       case FinanceTableColumnKeys.VARIANCE:
-        return <Typography.Text style={{ color: formattedTotals.variance > 0 ? '#FF0000' : '#6DC376' }}>{formatNumber(formattedTotals.variance)}</Typography.Text>;
+        return (
+          <Typography.Text style={{ color: formattedTotals.variance > 0 ? '#FF0000' : '#6DC376' }}>
+            {formattedTotals.variance < 0 ? '+' + formatNumber(Math.abs(formattedTotals.variance)) : 
+             formattedTotals.variance > 0 ? '-' + formatNumber(formattedTotals.variance) : 
+             formatNumber(formattedTotals.variance)}
+          </Typography.Text>
+        );
       default:
         return null;
     }
@@ -325,7 +331,9 @@ const FinanceTable = ({
               color: task.variance > 0 ? '#FF0000' : '#6DC376' 
             }}
           >
-            {formatNumber(task.variance)}
+            {task.variance < 0 ? '+' + formatNumber(Math.abs(task.variance)) : 
+             task.variance > 0 ? '-' + formatNumber(task.variance) : 
+             formatNumber(task.variance)}
           </Typography.Text>
         );
       case FinanceTableColumnKeys.TOTAL_BUDGET:
diff --git a/worklenz-frontend/src/pages/projects/projectView/finance/project-view-finance.tsx b/worklenz-frontend/src/pages/projects/projectView/finance/project-view-finance.tsx
index 6d0d9355..4b75d264 100644
--- a/worklenz-frontend/src/pages/projects/projectView/finance/project-view-finance.tsx
+++ b/worklenz-frontend/src/pages/projects/projectView/finance/project-view-finance.tsx
@@ -314,90 +314,99 @@ const ProjectViewFinance = () => {
             }
             style={{ marginBottom: 16 }}
             loading={loading}
+            size="small"
           >
-            <Row gutter={[16, 16]}>
-              <Col xs={24} sm={12} md={8} lg={6}>
+            <Row gutter={[12, 8]}>
+              <Col xs={12} sm={8} md={6} lg={4} xl={3}>
                 <Statistic
                   title="Total Budget"
                   value={budgetStatistics.totalBudget}
                   precision={2}
                   prefix={projectCurrency.toUpperCase()}
-                  valueStyle={{ color: '#1890ff' }}
+                  valueStyle={{ color: '#1890ff', fontSize: '16px' }}
+                  style={{ textAlign: 'center' }}
                 />
               </Col>
-              <Col xs={24} sm={12} md={8} lg={6}>
+              <Col xs={12} sm={8} md={6} lg={4} xl={3}>
                 <Statistic
                   title="Actual Cost"
                   value={budgetStatistics.totalActualCost}
                   precision={2}
                   prefix={projectCurrency.toUpperCase()}
-                  valueStyle={{ color: '#52c41a' }}
+                  valueStyle={{ color: '#52c41a', fontSize: '16px' }}
+                  style={{ textAlign: 'center' }}
                 />
               </Col>
-              <Col xs={24} sm={12} md={8} lg={6}>
+              <Col xs={12} sm={8} md={6} lg={4} xl={3}>
                 <Statistic
                   title="Variance"
-                  value={budgetStatistics.totalVariance}
+                  value={Math.abs(budgetStatistics.totalVariance)}
                   precision={2}
-                  prefix={budgetStatistics.totalVariance >= 0 ? '+' : ''}
-                  suffix={projectCurrency.toUpperCase()}
+                  prefix={projectCurrency.toUpperCase()}
+                  suffix={budgetStatistics.totalVariance < 0 ? ' under' : budgetStatistics.totalVariance > 0 ? ' over' : ''}
                   valueStyle={{ 
-                    color: budgetStatistics.totalVariance > 0 ? '#ff4d4f' : '#52c41a' 
+                    color: budgetStatistics.totalVariance > 0 ? '#ff4d4f' : '#52c41a',
+                    fontSize: '16px'
                   }}
+                  style={{ textAlign: 'center' }}
                 />
               </Col>
-              <Col xs={24} sm={12} md={8} lg={6}>
+              <Col xs={12} sm={8} md={6} lg={4} xl={3}>
                 <Statistic
-                  title="Budget Utilization"
+                  title="Utilization"
                   value={budgetStatistics.budgetUtilization}
                   precision={1}
                   suffix="%"
                   valueStyle={{ 
                     color: budgetStatistics.budgetUtilization > 100 ? '#ff4d4f' : 
-                           budgetStatistics.budgetUtilization > 80 ? '#faad14' : '#52c41a'
+                           budgetStatistics.budgetUtilization > 80 ? '#faad14' : '#52c41a',
+                    fontSize: '16px'
                   }}
+                  style={{ textAlign: 'center' }}
                 />
               </Col>
-            </Row>
-            
-            <Row gutter={[16, 16]} style={{ marginTop: 16 }}>
-              <Col xs={24} sm={12} md={8} lg={6}>
+              <Col xs={12} sm={8} md={6} lg={4} xl={3}>
                 <Statistic
-                  title="Estimated Cost"
+                  title="Estimated"
                   value={budgetStatistics.totalEstimatedCost}
                   precision={2}
                   prefix={projectCurrency.toUpperCase()}
-                  valueStyle={{ color: '#722ed1' }}
+                  valueStyle={{ color: '#722ed1', fontSize: '16px' }}
+                  style={{ textAlign: 'center' }}
                 />
               </Col>
-              <Col xs={24} sm={12} md={8} lg={6}>
+              <Col xs={12} sm={8} md={6} lg={4} xl={3}>
                 <Statistic
                   title="Fixed Cost"
                   value={budgetStatistics.totalFixedCost}
                   precision={2}
                   prefix={projectCurrency.toUpperCase()}
-                  valueStyle={{ color: '#fa8c16' }}
+                  valueStyle={{ color: '#fa8c16', fontSize: '16px' }}
+                  style={{ textAlign: 'center' }}
                 />
               </Col>
-              <Col xs={24} sm={12} md={8} lg={6}>
+              <Col xs={12} sm={8} md={6} lg={4} xl={3}>
                 <Statistic
-                  title="Cost from Time Logs"
+                  title="Time Logs"
                   value={budgetStatistics.totalActualCost - budgetStatistics.totalFixedCost}
                   precision={2}
                   prefix={projectCurrency.toUpperCase()}
-                  valueStyle={{ color: '#13c2c2' }}
+                  valueStyle={{ color: '#13c2c2', fontSize: '16px' }}
+                  style={{ textAlign: 'center' }}
                 />
               </Col>
-              <Col xs={24} sm={12} md={8} lg={6}>
+              <Col xs={12} sm={8} md={6} lg={4} xl={3}>
                 <Statistic
-                  title="Budget Status"
+                  title="Remaining"
                   value={budgetStatistics.totalBudget - budgetStatistics.totalActualCost}
                   precision={2}
                   prefix={budgetStatistics.totalBudget - budgetStatistics.totalActualCost >= 0 ? '+' : ''}
-                  suffix={`${projectCurrency.toUpperCase()} remaining`}
+                  suffix={projectCurrency.toUpperCase()}
                   valueStyle={{ 
-                    color: budgetStatistics.totalBudget - budgetStatistics.totalActualCost >= 0 ? '#52c41a' : '#ff4d4f'
+                    color: budgetStatistics.totalBudget - budgetStatistics.totalActualCost >= 0 ? '#52c41a' : '#ff4d4f',
+                    fontSize: '16px'
                   }}
+                  style={{ textAlign: 'center' }}
                 />
               </Col>
             </Row>