Merge pull request #139 from shancds/feature/project-finance

Feature/project finance

worklenz-frontend/public/locales/en/project-view-finance.json

@@ -32,7 +32,10 @@
     "labourHoursColumn": "Labour Hours",
     "actions": "Actions",
     "selectJobTitle": "Select Job Title",
-    "ratecardsPluralText": "Rate Card Templates"
+    "ratecardsPluralText": "Rate Card Templates",
+    "deleteConfirm": "Are you sure ?",
+    "yes": "Yes",
+    "no": "No"
 
   }
   

worklenz-frontend/src/components/task-drawer/shared/info-tab/subtask-table.tsx

@@ -166,9 +166,11 @@ const SubTaskTable = ({ subTasks, loadingSubTasks, refreshSubTasks, t }: SubTask
     {
       key: 'name',
       dataIndex: 'name',
+      title: 'Name',
     },
     {
       key: 'priority',
+      title: 'Priority',
       render: (record: IProjectTask) => (
         <Tag
           color={themeMode === 'dark' ? record.priority_color_dark : record.priority_color}
@@ -180,6 +182,7 @@ const SubTaskTable = ({ subTasks, loadingSubTasks, refreshSubTasks, t }: SubTask
     },
     {
       key: 'status',
+      title: 'Status',
       render: (record: IProjectTask) => (
         <Tag
           color={themeMode === 'dark' ? record.status_color_dark : record.status_color}
@@ -191,10 +194,12 @@ const SubTaskTable = ({ subTasks, loadingSubTasks, refreshSubTasks, t }: SubTask
     },
     {
       key: 'assignee',
+      title: 'Assignees',
       render: (record: ISubTask) => <Avatars members={record.names || []} />,
     },
     {
       key: 'actionBtns',
+      title: 'Actions',
       width: 80,
       render: (record: IProjectTask) => (
         <Flex gap={8} align="center" className="action-buttons">
@@ -230,7 +235,6 @@ const SubTaskTable = ({ subTasks, loadingSubTasks, refreshSubTasks, t }: SubTask
         {subTasks.length > 0 && (
           <Table
             className="custom-two-colors-row-table subtask-table"
-            showHeader={false}
             dataSource={subTasks}
             columns={columns}
             rowKey={record => record?.id || nanoid()}

worklenz-frontend/src/features/finance/ratecard-drawer/ratecard-drawer.tsx

@@ -1,4 +1,4 @@
-import { Drawer, Select, Typography, Flex, Button, Input, Table } from 'antd';
+import { Drawer, Select, Typography, Flex, Button, Input, Table, Popconfirm, Tooltip } from 'antd';
 import React, { useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useAppSelector } from '../../../hooks/useAppSelector';
@@ -7,7 +7,8 @@ import { deleteRateCard, fetchRateCardById, fetchRateCards, toggleRatecardDrawer
 import { RatecardType, IJobType } from '@/types/project/ratecard.types';
 import { IJobTitlesViewModel } from '@/types/job.types';
 import { jobTitlesApiService } from '@/api/settings/job-titles/job-titles.api.service';
-import { DeleteOutlined } from '@ant-design/icons';
+import { DeleteOutlined, ExclamationCircleFilled } from '@ant-design/icons';
+import { colors } from '@/styles/colors';
 
 interface PaginationType {
   current: number;
@@ -220,7 +221,7 @@ const RatecardDrawer = ({
                 setAddingRowIndex(null);
               }}
               onBlur={() => {
-                if (roles[index].job_title_id === ""){
+                if (roles[index].job_title_id === "") {
                   handleDeleteRole(index);
                 }
                 setEditingRowIndex(null);
@@ -244,7 +245,7 @@ const RatecardDrawer = ({
         return (
           <span
             style={{ cursor: 'pointer' }}
-            // onClick={() => setEditingRowIndex(index)}
+          // onClick={() => setEditingRowIndex(index)}
           >
             {record.jobtitle}
           </span>
@@ -259,6 +260,7 @@ const RatecardDrawer = ({
         <Input
           type="number"
           value={roles[index]?.rate ?? 0}
+          min={0}
           style={{
             background: 'transparent',
             border: 'none',
@@ -279,11 +281,25 @@ const RatecardDrawer = ({
       title: t('actionsColumn') || 'Actions',
       dataIndex: 'actions',
       render: (_: any, __: any, index: number) => (
-        <Button
+        <Popconfirm
-          size="small"
+          title={t('deleteConfirmationTitle')}
-          icon={<DeleteOutlined />}
+          icon={<ExclamationCircleFilled style={{ color: colors.vibrantOrange }} />}
-          onClick={() => handleDeleteRole(index)}
+          okText={t('deleteConfirmationOk')}
-        />
+          cancelText={t('deleteConfirmationCancel')}
+          onConfirm={async () => {
+            if (index) {
+              handleDeleteRole(index);
+            }
+          }}
+        >
+          <Tooltip title="Delete">
+            <Button
+              size="small"
+              icon={<DeleteOutlined />}
+            />
+          </Tooltip>
+        </Popconfirm>
+
       ),
     },
   ];
@@ -291,7 +307,7 @@ const RatecardDrawer = ({
     if (
       drawerRatecard &&
       (drawerRatecard.jobRolesList?.length === 0 || !drawerRatecard.jobRolesList) &&
-      name === 'Untitled Rate Card'
+      (name === 'Untitled Rate Card' || name === '' || name === undefined)
     ) {
       await dispatch(deleteRateCard(drawerRatecard.id as string));
     }
@@ -343,7 +359,7 @@ const RatecardDrawer = ({
       width={700}
       footer={
         <Flex justify="end" gap={16} style={{ marginTop: 16 }}>
-          <Button style={{ marginBottom: 24 }} onClick={handleSave} type="primary">{t('saveButton')}</Button>
+          <Button style={{ marginBottom: 24 }} onClick={handleSave} type="primary" disabled={name === '' || name === 'Untitled Rate Card' && roles.length === 0}>{t('saveButton')}</Button>
         </Flex>
       }
     >
@@ -355,13 +371,13 @@ const RatecardDrawer = ({
         pagination={false}
         footer={() => (
           <Button
-              type="dashed"
+            type="dashed"
-              onClick={handleAddRole}
+            onClick={handleAddRole}
-              block
+            block
-              style={{ margin: 0, padding: 0 }}
+            style={{ margin: 0, padding: 0 }}
-            >
+          >
-              {t('addRoleButton')}
+            {t('addRoleButton')}
-            </Button>
+          </Button>
         )}
       />
     </Drawer>

worklenz-frontend/src/pages/projects/projectView/finance/ratecard-tab/reatecard-table/ratecard-table.tsx

@@ -216,6 +216,7 @@ const RatecardTable: React.FC = () => {
         <Input
           type="number"
           value={roles[index]?.rate ?? 0}
+          min={0}
           style={{
             background: 'transparent',
             border: 'none',

worklenz-frontend/src/pages/reporting/time-reports/members-time-sheet/members-time-sheet.tsx

@@ -92,17 +92,38 @@ const MembersTimeSheet = forwardRef<MembersTimeSheetRef>((_, ref) => {
       },
       tooltip: {
         callbacks: {
-          label: function(context: any) {
+          label: function (context: any) {
             const idx = context.dataIndex;
             const member = jsonData[idx];
             const hours = member?.utilized_hours || '0.00';
-            const percent = member?.utilization_percent || '0.00';
+            const percent = parseFloat(member?.utilization_percent || '0.00');
             const overUnder = member?.over_under_utilized_hours || '0.00';
+            let status = '';
+            let color = '';
+            if (percent < 90) {
+              status = 'Under';
+            } else if (percent <= 110) {
+              status = 'Optimal';
+            } else {
+              status = 'Over';
+            }
             return [
               `${context.dataset.label}: ${hours} h`,
               `Utilization: ${percent}%`,
-              `Over/Under Utilized: ${overUnder} h`
+              `${status} Utilized: ${overUnder} h`
             ];
+          },
+          labelTextColor: function (context: any) {
+            const idx = context.dataIndex;
+            const member = jsonData[idx];
+            const utilization = parseFloat(member?.utilization_percent || '0');
+            if (utilization < 90) {
+              return '#FFB546';
+            } else if (utilization >= 90 && utilization <= 110) {
+              return '#B2EF9A';
+            } else {
+              return '#FE7173';
+            }
           }
         }
       }
@@ -145,7 +166,7 @@ const MembersTimeSheet = forwardRef<MembersTimeSheetRef>((_, ref) => {
   const fetchChartData = async () => {
     try {
       setLoading(true);
-      
+
       const selectedTeams = teams.filter(team => team.selected);
       const selectedProjects = filterProjects.filter(project => project.selected);
       const selectedCategories = categories.filter(category => category.selected);
@@ -178,7 +199,7 @@ const MembersTimeSheet = forwardRef<MembersTimeSheetRef>((_, ref) => {
     if (chartRef.current) {
       // Get the canvas element
       const canvas = chartRef.current.canvas;
-      
+
       // Create a temporary canvas to draw with background
       const tempCanvas = document.createElement('canvas');
       const tempCtx = tempCanvas.getContext('2d');
@@ -225,4 +246,4 @@ const MembersTimeSheet = forwardRef<MembersTimeSheetRef>((_, ref) => {
 
 MembersTimeSheet.displayName = 'MembersTimeSheet';
 
-export default MembersTimeSheet;
+export default MembersTimeSheet;

worklenz-frontend/src/pages/settings/ratecard/ratecard-settings.tsx

@@ -87,7 +87,7 @@ const RatecardSettings: React.FC = () => {
 
   useEffect(() => {
     fetchRateCards();
-  }, [toggleRatecardDrawer]);
+  }, [toggleRatecardDrawer, dispatch]);