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.

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.",

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.",

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.",

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<FinanceTableWrapperProps> = ({ 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<FinanceTableWrapperProps> = ({ activeTablesL
               ))}
             </tr>
 
-            <tr
-              style={{
-                height: 56,
-                fontWeight: 500,
-                backgroundColor: themeWiseColor('#fbfbfb', '#141414', themeMode),
-              }}
-            >
-              {financeTableColumns.map((col, index) => (
-                <td
-                  key={col.key}
-                  style={{
-                    minWidth: col.width,
-                    paddingInline: 16,
-                    textAlign: col.key === FinanceTableColumnKeys.TASK ? 'left' : 'right',
-                    backgroundColor: themeWiseColor('#fbfbfb', '#141414', themeMode),
-                  }}
-                  className={customColumnStyles(col.key)}
-                >
-                  {col.key === FinanceTableColumnKeys.TASK ? (
-                    <Typography.Text style={{ fontSize: 18 }}>{t('totalText')}</Typography.Text>
-                  ) : col.key === FinanceTableColumnKeys.MEMBERS ? null : (
-                    (col.type === 'hours' || col.type === 'currency') && renderFinancialTableHeaderContent(col.key)
-                  )}
-                </td>
-              ))}
-            </tr>
+            {hasAnyTasks && (
+              <tr
+                style={{
+                  height: 56,
+                  fontWeight: 500,
+                  backgroundColor: themeWiseColor('#fbfbfb', '#141414', themeMode),
+                }}
+              >
+                {financeTableColumns.map((col, index) => (
+                  <td
+                    key={col.key}
+                    style={{
+                      minWidth: col.width,
+                      paddingInline: 16,
+                      textAlign: col.key === FinanceTableColumnKeys.TASK ? 'left' : 'right',
+                      backgroundColor: themeWiseColor('#fbfbfb', '#141414', themeMode),
+                    }}
+                    className={customColumnStyles(col.key)}
+                  >
+                    {col.key === FinanceTableColumnKeys.TASK ? (
+                      <Typography.Text style={{ fontSize: 18 }}>{t('totalText')}</Typography.Text>
+                    ) : col.key === FinanceTableColumnKeys.MEMBERS ? null : (
+                      (col.type === 'hours' || col.type === 'currency') && renderFinancialTableHeaderContent(col.key)
+                    )}
+                  </td>
+                ))}
+              </tr>
+            )}
 
-            {activeTablesList.map((table) => (
-              <FinanceTable
-                key={table.group_id}
-                table={table}
-                isScrolling={isScrolling}
-                onTaskClick={onTaskClick}
-                loading={loading}
-              />
-            ))}
+            {hasAnyTasks ? (
+              activeTablesList.map((table) => (
+                <FinanceTable
+                  key={table.group_id}
+                  table={table}
+                  isScrolling={isScrolling}
+                  onTaskClick={onTaskClick}
+                  loading={loading}
+                />
+              ))
+            ) : (
+              <tr>
+                <td colSpan={financeTableColumns.length} style={{ padding: '40px 0', textAlign: 'center' }}>
+                  <Empty
+                    description={
+                      <Typography.Text type="secondary">
+                        {t('noTasksFound')}
+                      </Typography.Text>
+                    }
+                    image={Empty.PRESENTED_IMAGE_SIMPLE}
+                  />
+                </td>
+              </tr>
+            )}
           </tbody>
         </table>
       </Flex>

worklenz-frontend/src/pages/projects/projectView/finance/finance-tab/finance-table/finance-table.css

@@ -0,0 +1 @@
+/* Finance Table Styles */ 

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%'
             }}
           >
             <Avatars 
@@ -239,7 +231,7 @@ const FinanceTable = ({
             ),
             fontWeight: 600,
           }}
-          className="group"
+          className={`group ${themeMode === 'dark' ? 'dark' : ''}`}
         >
           {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)}
           >