bo/worklenz
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(project-finance): implement time formatting utilities and update task time handling

Browse Source 
- Added utility functions to format time in hours, minutes, and seconds, and to parse time strings back to seconds.
- Updated the project finance controller to use seconds for estimated time and total time logged, improving accuracy in calculations.
- Modified frontend components to reflect changes in time handling, ensuring consistent display of time in both seconds and formatted strings.
- Adjusted Redux slice and types to accommodate new time formats, enhancing data integrity across the application.
This commit is contained in:
chamiakJ
2025-05-28 12:28:03 +05:30
parent ca0c958918
commit 07bc5e6030
7 changed files with 163 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
worklenz-frontend/src/pages/projects/projectView/finance/finance-tab/finance-tab.tsx
View File

@@ -12,31 +12,10 @@ const FinanceTab = ({
taskGroups = [],
loading
}: FinanceTabProps) => {
// Transform taskGroups into the format expected by FinanceTableWrapper
const activeTablesList = (taskGroups || []).map(group => ({
group_id: group.group_id,
group_name: group.group_name,
color_code: group.color_code,
color_code_dark: group.color_code_dark,
tasks: (group.tasks || []).map(task => ({
id: task.id,
name: task.name,
hours: task.estimated_hours || 0,
cost: task.estimated_cost || 0,
fixedCost: task.fixed_cost || 0,
totalBudget: task.total_budget || 0,
totalActual: task.total_actual || 0,
variance: task.variance || 0,
members: task.members || [],
isbBillable: task.billable,
total_time_logged: task.total_time_logged || 0,
estimated_cost: task.estimated_cost || 0
}))
}));
return (
<div>
<FinanceTableWrapper activeTablesList={activeTablesList} loading={loading} />
<FinanceTableWrapper activeTablesList={taskGroups} loading={loading} />
</div>
);
};

28
worklenz-frontend/src/pages/projects/projectView/finance/finance-tab/finance-table/finance-table-wrapper.tsx
View File

@@ -17,6 +17,22 @@ interface FinanceTableWrapperProps {
loading: boolean;
}
// Utility function to format seconds to time string
const formatSecondsToTimeString = (totalSeconds: number): string => {
if (!totalSeconds || totalSeconds === 0) return "0s";
const hours = Math.floor(totalSeconds / 3600);
const minutes = Math.floor((totalSeconds % 3600) / 60);
const seconds = totalSeconds % 60;
const parts = [];
if (hours > 0) parts.push(`${hours}h`);
if (minutes > 0) parts.push(`${minutes}m`);
if (seconds > 0 || parts.length === 0) parts.push(`${seconds}s`);
return parts.join(' ');
};
const FinanceTableWrapper: React.FC<FinanceTableWrapperProps> = ({ activeTablesList, loading }) => {
const [isScrolling, setIsScrolling] = useState(false);
const [editingFixedCost, setEditingFixedCost] = useState<{ taskId: string; groupId: string } | null>(null);
@@ -80,13 +96,13 @@ const FinanceTableWrapper: React.FC<FinanceTableWrapperProps> = ({ activeTablesL
table: IProjectFinanceGroup
) => {
table.tasks.forEach((task) => {
acc.hours += (task.estimated_hours / 60) || 0;
acc.hours += (task.estimated_seconds) || 0;
acc.cost += task.estimated_cost || 0;
acc.fixedCost += task.fixed_cost || 0;
acc.totalBudget += task.total_budget || 0;
acc.totalActual += task.total_actual || 0;
acc.variance += task.variance || 0;
acc.total_time_logged += (task.total_time_logged / 60) || 0;
acc.total_time_logged += (task.total_time_logged_seconds) || 0;
acc.estimated_cost += task.estimated_cost || 0;
});
return acc;
@@ -114,9 +130,7 @@ const FinanceTableWrapper: React.FC<FinanceTableWrapperProps> = ({ activeTablesL
case FinanceTableColumnKeys.HOURS:
return (
<Typography.Text style={{ fontSize: 18 }}>
<Tooltip title={convertToHoursMinutes(totals.hours)}>
{formatHoursToReadable(totals.hours).toFixed(2)}
</Tooltip>
{formatSecondsToTimeString(totals.hours)}
</Typography.Text>
);
case FinanceTableColumnKeys.COST:
@@ -131,7 +145,7 @@ const FinanceTableWrapper: React.FC<FinanceTableWrapperProps> = ({ activeTablesL
return (
<Typography.Text
style={{
color: totals.variance < 0 ? '#FF0000' : '#6DC376',
color: totals.variance > 0 ? '#FF0000' : '#6DC376',
fontSize: 18,
}}
>
@@ -141,7 +155,7 @@ const FinanceTableWrapper: React.FC<FinanceTableWrapperProps> = ({ activeTablesL
case FinanceTableColumnKeys.TOTAL_TIME_LOGGED:
return (
<Typography.Text style={{ fontSize: 18 }}>
{totals.total_time_logged?.toFixed(2)}
{formatSecondsToTimeString(totals.total_time_logged)}
</Typography.Text>
);
case FinanceTableColumnKeys.ESTIMATED_COST:

88
worklenz-frontend/src/pages/projects/projectView/finance/finance-tab/finance-table/finance-table.tsx
View File

@@ -13,6 +13,9 @@ 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 { setSelectedTaskId, setShowTaskDrawer, fetchTask } from '@/features/task-drawer/task-drawer.slice';
import { useParams } from 'react-router-dom';
import { parseTimeToSeconds } from '@/utils/timeUtils';
import './finance-table.css';
type FinanceTableProps = {
@@ -78,19 +81,19 @@ const FinanceTable = ({
const renderFinancialTableHeaderContent = (columnKey: FinanceTableColumnKeys) => {
switch (columnKey) {
case FinanceTableColumnKeys.HOURS:
return <Typography.Text>{formatNumber(totals.hours)}</Typography.Text>;
return <Typography.Text>{formattedTotals.hours}</Typography.Text>;
case FinanceTableColumnKeys.TOTAL_TIME_LOGGED:
return <Typography.Text>{formatNumber(totals.total_time_logged)}</Typography.Text>;
return <Typography.Text>{formattedTotals.total_time_logged}</Typography.Text>;
case FinanceTableColumnKeys.ESTIMATED_COST:
return <Typography.Text>{formatNumber(totals.estimated_cost)}</Typography.Text>;
return <Typography.Text>{formatNumber(formattedTotals.estimated_cost)}</Typography.Text>;
case FinanceTableColumnKeys.FIXED_COST:
return <Typography.Text>{formatNumber(totals.fixed_cost)}</Typography.Text>;
return <Typography.Text>{formatNumber(formattedTotals.fixed_cost)}</Typography.Text>;
case FinanceTableColumnKeys.TOTAL_BUDGET:
return <Typography.Text>{formatNumber(totals.total_budget)}</Typography.Text>;
return <Typography.Text>{formatNumber(formattedTotals.total_budget)}</Typography.Text>;
case FinanceTableColumnKeys.TOTAL_ACTUAL:
return <Typography.Text>{formatNumber(totals.total_actual)}</Typography.Text>;
return <Typography.Text>{formatNumber(formattedTotals.total_actual)}</Typography.Text>;
case FinanceTableColumnKeys.VARIANCE:
return <Typography.Text>{formatNumber(totals.variance)}</Typography.Text>;
return <Typography.Text style={{ color: formattedTotals.variance > 0 ? '#FF0000' : '#6DC376' }}>{formatNumber(formattedTotals.variance)}</Typography.Text>;
default:
return null;
}
@@ -106,6 +109,16 @@ const FinanceTable = ({
dispatch(updateTaskFixedCostAsync({ taskId, groupId: table.group_id, fixedCost }));
};
const { projectId } = useParams<{ projectId: string }>();
const handleTaskNameClick = (taskId: string) => {
if (!taskId || !projectId) return;
dispatch(setSelectedTaskId(taskId));
dispatch(setShowTaskDrawer(true));
dispatch(fetchTask({ taskId, projectId }));
};
const renderFinancialTableColumnContent = (columnKey: FinanceTableColumnKeys, task: IProjectFinanceTask) => {
switch (columnKey) {
case FinanceTableColumnKeys.TASK:
@@ -114,7 +127,21 @@ const FinanceTable = ({
<Flex gap={8} align="center">
<Typography.Text
ellipsis={{ expanded: false }}
style={{ maxWidth: 160 }}
style={{
maxWidth: 160,
cursor: 'pointer',
color: '#1890ff'
}}
onClick={(e) => {
e.stopPropagation();
handleTaskNameClick(task.id);
}}
onMouseEnter={(e) => {
e.currentTarget.style.textDecoration = 'underline';
}}
onMouseLeave={(e) => {
e.currentTarget.style.textDecoration = 'none';
}}
>
{task.name}
</Typography.Text>
@@ -144,9 +171,9 @@ const FinanceTable = ({
</div>
);
case FinanceTableColumnKeys.HOURS:
return <Typography.Text>{formatNumber(task.estimated_hours / 60)}</Typography.Text>;
return <Typography.Text>{task.estimated_hours}</Typography.Text>;
case FinanceTableColumnKeys.TOTAL_TIME_LOGGED:
return <Typography.Text>{formatNumber(task.total_time_logged / 60)}</Typography.Text>;
return <Typography.Text>{task.total_time_logged}</Typography.Text>;
case FinanceTableColumnKeys.ESTIMATED_COST:
return <Typography.Text>{formatNumber(task.estimated_cost)}</Typography.Text>;
case FinanceTableColumnKeys.FIXED_COST:
@@ -181,7 +208,15 @@ const FinanceTable = ({
</Typography.Text>
);
case FinanceTableColumnKeys.VARIANCE:
return <Typography.Text>{formatNumber(task.variance)}</Typography.Text>;
return (
<Typography.Text
style={{
color: formattedTotals.variance > 0 ? '#FF0000' : '#6DC376'
}}
>
{formatNumber(formattedTotals.variance)}
</Typography.Text>
);
case FinanceTableColumnKeys.TOTAL_BUDGET:
return <Typography.Text>{formatNumber(task.total_budget)}</Typography.Text>;
case FinanceTableColumnKeys.TOTAL_ACTUAL:
@@ -193,12 +228,28 @@ const FinanceTable = ({
}
};
// Utility function to format seconds to time string
const formatSecondsToTimeString = (totalSeconds: number): string => {
if (!totalSeconds || totalSeconds === 0) return "0s";
const hours = Math.floor(totalSeconds / 3600);
const minutes = Math.floor((totalSeconds % 3600) / 60);
const seconds = totalSeconds % 60;
const parts = [];
if (hours > 0) parts.push(`${hours}h`);
if (minutes > 0) parts.push(`${minutes}m`);
if (seconds > 0 || parts.length === 0) parts.push(`${seconds}s`);
return parts.join(' ');
};
// Calculate totals for the current table
const totals = useMemo(() => {
return tasks.reduce(
(acc, task) => ({
hours: acc.hours + (task.estimated_hours / 60),
total_time_logged: acc.total_time_logged + (task.total_time_logged / 60),
hours: acc.hours + (task.estimated_seconds || 0),
total_time_logged: acc.total_time_logged + (task.total_time_logged_seconds || 0),
estimated_cost: acc.estimated_cost + (task.estimated_cost || 0),
fixed_cost: acc.fixed_cost + (task.fixed_cost || 0),
total_budget: acc.total_budget + (task.total_budget || 0),
@@ -217,6 +268,17 @@ const FinanceTable = ({
);
}, [tasks]);
// Format the totals for display
const formattedTotals = useMemo(() => ({
hours: formatSecondsToTimeString(totals.hours),
total_time_logged: formatSecondsToTimeString(totals.total_time_logged),
estimated_cost: totals.estimated_cost,
fixed_cost: totals.fixed_cost,
total_budget: totals.total_budget,
total_actual: totals.total_actual,
variance: totals.variance
}), [totals]);
return (
<Skeleton active loading={loading}>
<>