From 612de866b7096a548ff328ab8454334a19e039fa Mon Sep 17 00:00:00 2001 From: chamikaJ Date: Mon, 26 May 2025 17:03:50 +0530 Subject: [PATCH] feat(finance-table): enhance task display and localization support - Added a new message for "No tasks found" in English, Spanish, and Portuguese localization files. - Updated the finance table component to conditionally render a message when no tasks are available, improving user experience. - Introduced a new CSS file for finance table styles to enhance visual consistency. - Refactored the finance table rendering logic to handle task presence more effectively. --- .../locales/en/project-view-finance.json | 1 + .../locales/es/project-view-finance.json | 1 + .../locales/pt/project-view-finance.json | 1 + .../finance-table/finance-table-wrapper.tsx | 94 +++++++++++-------- .../finance-table/finance-table.css | 1 + .../finance-table/finance-table.tsx | 15 +-- 6 files changed, 65 insertions(+), 48 deletions(-) create mode 100644 worklenz-frontend/src/pages/projects/projectView/finance/finance-tab/finance-table/finance-table.css diff --git a/worklenz-frontend/public/locales/en/project-view-finance.json b/worklenz-frontend/public/locales/en/project-view-finance.json index a9990954..38121cdf 100644 --- a/worklenz-frontend/public/locales/en/project-view-finance.json +++ b/worklenz-frontend/public/locales/en/project-view-finance.json @@ -20,6 +20,7 @@ "totalActualCostColumn": "Total Actual Cost", "varianceColumn": "Variance", "totalText": "Total", + "noTasksFound": "No tasks found", "addRoleButton": "+ Add Role", "ratecardImportantNotice": "* This rate card is generated based on the company's standard job titles and rates. However, you have the flexibility to modify it according to the project. These changes will not impact the organization's standard job titles and rates.", diff --git a/worklenz-frontend/public/locales/es/project-view-finance.json b/worklenz-frontend/public/locales/es/project-view-finance.json index 93491817..bd2fa024 100644 --- a/worklenz-frontend/public/locales/es/project-view-finance.json +++ b/worklenz-frontend/public/locales/es/project-view-finance.json @@ -20,6 +20,7 @@ "totalActualCostColumn": "Costo Total Real", "varianceColumn": "Diferencia", "totalText": "Total", + "noTasksFound": "No se encontraron tareas", "addRoleButton": "+ Agregar Rol", "ratecardImportantNotice": "* Esta tarifa se genera en función de los títulos de trabajo y tarifas estándar de la empresa. Sin embargo, tienes la flexibilidad de modificarla según el proyecto. Estos cambios no afectarán los títulos de trabajo y tarifas estándar de la organización.", diff --git a/worklenz-frontend/public/locales/pt/project-view-finance.json b/worklenz-frontend/public/locales/pt/project-view-finance.json index 1520b498..be3d31f2 100644 --- a/worklenz-frontend/public/locales/pt/project-view-finance.json +++ b/worklenz-frontend/public/locales/pt/project-view-finance.json @@ -20,6 +20,7 @@ "totalActualCostColumn": "Custo Total Real", "varianceColumn": "Variação", "totalText": "Total", + "noTasksFound": "Nenhuma tarefa encontrada", "addRoleButton": "+ Adicionar Função", "ratecardImportantNotice": "* Esta tabela de taxas é gerada com base nos cargos e taxas padrão da empresa. No entanto, você tem a flexibilidade de modificá-la de acordo com o projeto. Essas alterações não impactarão os cargos e taxas padrão da organização.", 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 3c7d5c7f..dff26f54 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 @@ -1,5 +1,5 @@ import React, { useEffect, useState, useMemo } from 'react'; -import { Flex, InputNumber, Tooltip, Typography } from 'antd'; +import { Flex, InputNumber, Tooltip, Typography, Empty } from 'antd'; import { themeWiseColor } from '@/utils/themeWiseColor'; import { useAppSelector } from '@/hooks/useAppSelector'; import { useTranslation } from 'react-i18next'; @@ -159,7 +159,10 @@ const FinanceTableWrapper: React.FC = ({ activeTablesL `px-2 text-left ${key === FinanceTableColumnKeys.TASK && 'sticky left-0 z-10'} ${key === FinanceTableColumnKeys.MEMBERS && `sticky left-[240px] z-10 ${isScrolling ? 'after:content after:absolute after:top-0 after:-right-1 after:-z-10 after:h-[68px] after:w-1.5 after:bg-transparent after:bg-gradient-to-r after:from-[rgba(0,0,0,0.12)] after:to-transparent' : ''}`} ${themeMode === 'dark' ? 'bg-[#1d1d1d] border-[#303030]' : 'bg-[#fafafa]'}`; const customColumnStyles = (key: FinanceTableColumnKeys) => - `px-2 text-left ${key === FinanceTableColumnKeys.TASK && `sticky left-0 z-10 ${isScrolling ? 'after:content after:absolute after:top-0 after:-right-1 after:-z-10 after:h-[68px] after:w-1.5 after:bg-transparent after:bg-gradient-to-r after:from-[rgba(0,0,0,0.12)] after:to-transparent' : ''}`} ${themeMode === 'dark' ? 'bg-[#141414]' : 'bg-[#fbfbfb]'}`; + `px-2 text-left ${key === FinanceTableColumnKeys.TASK && `sticky left-0 z-10 ${isScrolling ? 'after:content after:absolute after:top-0 after:-right-1 after:-z-10 after:h-[56px] after:w-1.5 after:bg-transparent after:bg-gradient-to-r after:from-[rgba(0,0,0,0.12)] after:to-transparent' : ''}`} ${key === FinanceTableColumnKeys.MEMBERS && `sticky left-[240px] z-10 ${isScrolling ? 'after:content after:absolute after:top-0 after:-right-1 after:-z-10 after:h-[56px] after:w-1.5 after:bg-transparent after:bg-gradient-to-r after:from-[rgba(0,0,0,0.12)] after:to-transparent' : ''}`} ${themeMode === 'dark' ? 'bg-[#141414]' : 'bg-[#fbfbfb]'}`; + + // Check if there are any tasks across all groups + const hasAnyTasks = activeTablesList.some(table => table.tasks && table.tasks.length > 0); return ( <> @@ -191,42 +194,59 @@ const FinanceTableWrapper: React.FC = ({ activeTablesL ))} - - {financeTableColumns.map((col, index) => ( - - {col.key === FinanceTableColumnKeys.TASK ? ( - {t('totalText')} - ) : col.key === FinanceTableColumnKeys.MEMBERS ? null : ( - (col.type === 'hours' || col.type === 'currency') && renderFinancialTableHeaderContent(col.key) - )} - - ))} - + {hasAnyTasks && ( + + {financeTableColumns.map((col, index) => ( + + {col.key === FinanceTableColumnKeys.TASK ? ( + {t('totalText')} + ) : col.key === FinanceTableColumnKeys.MEMBERS ? null : ( + (col.type === 'hours' || col.type === 'currency') && renderFinancialTableHeaderContent(col.key) + )} + + ))} + + )} - {activeTablesList.map((table) => ( - - ))} + {hasAnyTasks ? ( + activeTablesList.map((table) => ( + + )) + ) : ( + + + + {t('noTasksFound')} + + } + image={Empty.PRESENTED_IMAGE_SIMPLE} + /> + + + )} diff --git a/worklenz-frontend/src/pages/projects/projectView/finance/finance-tab/finance-table/finance-table.css b/worklenz-frontend/src/pages/projects/projectView/finance/finance-tab/finance-table/finance-table.css new file mode 100644 index 00000000..09389058 --- /dev/null +++ b/worklenz-frontend/src/pages/projects/projectView/finance/finance-tab/finance-table/finance-table.css @@ -0,0 +1 @@ +/* Finance Table Styles */ \ No newline at end of file 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 97fefb13..b882c55a 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 @@ -13,6 +13,7 @@ import Avatars from '@/components/avatars/avatars'; import { IProjectFinanceGroup, IProjectFinanceTask } from '@/types/project/project-finance.types'; import { updateTaskFixedCostAsync, updateTaskFixedCost } from '@/features/projects/finance/project-finance.slice'; import { useAppDispatch } from '@/hooks/useAppDispatch'; +import './finance-table.css'; type FinanceTableProps = { table: IProjectFinanceGroup; @@ -130,16 +131,7 @@ const FinanceTable = ({ }} style={{ cursor: 'pointer', - width: '100%', - padding: '4px', - borderRadius: '4px', - transition: 'background-color 0.2s' - }} - onMouseEnter={(e) => { - e.currentTarget.style.backgroundColor = themeWiseColor('#f0f0f0', '#333', themeMode); - }} - onMouseLeave={(e) => { - e.currentTarget.style.backgroundColor = 'transparent'; + width: '100%' }} > {financeTableColumns.map( (col, index) => ( @@ -280,6 +272,7 @@ const FinanceTable = ({ background: idx % 2 === 0 ? themeWiseColor('#fafafa', '#232323', themeMode) : themeWiseColor('#ffffff', '#181818', themeMode), transition: 'background 0.2s', }} + className={themeMode === 'dark' ? 'dark' : ''} onMouseEnter={e => e.currentTarget.style.background = themeWiseColor('#f0f0f0', '#333', themeMode)} onMouseLeave={e => e.currentTarget.style.background = idx % 2 === 0 ? themeWiseColor('#fafafa', '#232323', themeMode) : themeWiseColor('#ffffff', '#181818', themeMode)} >