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

feat(project-finance): enhance fixed cost handling and add silent refresh functionality

Browse Source 
- Updated the fixed cost calculation logic to rely on backend values, avoiding unnecessary recalculations in the frontend.
- Introduced a new `fetchProjectFinancesSilent` thunk for refreshing project finance data without altering the loading state.
- Implemented debounced and immediate save functions for fixed cost changes in the FinanceTable component, improving user experience and data accuracy.
- Adjusted the UI to reflect changes in fixed cost handling, ensuring accurate display of task variances.
This commit is contained in:
chamiakJ
2025-05-28 22:04:51 +05:30
parent ad9e940987
commit 5454c22bd1
2 changed files with 99 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
worklenz-frontend/src/features/projects/finance/project-finance.slice.ts
View File

@@ -22,13 +22,10 @@ const calculateTaskCosts = (task: IProjectFinanceTask) => {
const timeLoggedHours = secondsToHours(task.total_time_logged_seconds || 0);
const fixedCost = task.fixed_cost || 0;
// Calculate total budget (estimated hours * rate + fixed cost)
const totalBudget = task.estimated_cost + fixedCost;
// Calculate total actual (time logged * rate + fixed cost)
// For fixed cost updates, we'll rely on the backend values
// and trigger a re-fetch to ensure accuracy
const totalBudget = (task.estimated_cost || 0) + fixedCost;
const totalActual = task.total_actual || 0;
// Calculate variance (total actual - total budget)
const variance = totalActual - totalBudget;
return {
@@ -80,6 +77,14 @@ export const fetchProjectFinances = createAsyncThunk(
}
);
export const fetchProjectFinancesSilent = createAsyncThunk(
'projectFinances/fetchProjectFinancesSilent',
async ({ projectId, groupBy }: { projectId: string; groupBy: GroupTypes }) => {
const response = await projectFinanceApiService.getProjectTasks(projectId, groupBy);
return response.body;
}
);
export const updateTaskFixedCostAsync = createAsyncThunk(
'projectFinances/updateTaskFixedCostAsync',
async ({ taskId, groupId, fixedCost }: { taskId: string; groupId: string; fixedCost: number }) => {
@@ -105,11 +110,7 @@ export const projectFinancesSlice = createSlice({
const task = group.tasks.find(t => t.id === taskId);
if (task) {
task.fixed_cost = fixedCost;
// Recalculate task costs after updating fixed cost
const { totalBudget, totalActual, variance } = calculateTaskCosts(task);
task.total_budget = totalBudget;
task.total_actual = totalActual;
task.variance = variance;
// Don't recalculate here - let the backend handle it and we'll refresh
}
}
},
@@ -158,6 +159,11 @@ export const projectFinancesSlice = createSlice({
.addCase(fetchProjectFinances.rejected, (state) => {
state.loading = false;
})
.addCase(fetchProjectFinancesSilent.fulfilled, (state, action) => {
// Update data without changing loading state for silent refresh
state.taskGroups = action.payload.groups;
state.projectRateCards = action.payload.project_rate_cards;
})
.addCase(updateTaskFixedCostAsync.fulfilled, (state, action) => {
const { taskId, groupId, fixedCost } = action.payload;
const group = state.taskGroups.find(g => g.group_id === groupId);
@@ -165,11 +171,7 @@ export const projectFinancesSlice = createSlice({
const task = group.tasks.find(t => t.id === taskId);
if (task) {
task.fixed_cost = fixedCost;
// Recalculate task costs after updating fixed cost
const { totalBudget, totalActual, variance } = calculateTaskCosts(task);
task.total_budget = totalBudget;
task.total_actual = totalActual;
task.variance = variance;
// Don't recalculate here - trigger a refresh instead for accuracy
}
}
});

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

@@ -1,5 +1,5 @@
import { Checkbox, Flex, Input, InputNumber, Skeleton, Tooltip, Typography } from 'antd';
import { useEffect, useMemo, useState } from 'react';
import { useEffect, useMemo, useState, useRef } from 'react';
import { useAppSelector } from '@/hooks/useAppSelector';
import {
DollarCircleOutlined,
@@ -11,7 +11,7 @@ import { colors } from '@/styles/colors';
import { financeTableColumns, FinanceTableColumnKeys } from '@/lib/project/project-view-finance-table-columns';
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 { updateTaskFixedCostAsync, updateTaskFixedCost, fetchProjectFinancesSilent } 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';
@@ -33,11 +33,14 @@ const FinanceTable = ({
}: FinanceTableProps) => {
const [isCollapse, setIsCollapse] = useState<boolean>(false);
const [selectedTask, setSelectedTask] = useState<IProjectFinanceTask | null>(null);
const [editingFixedCostValue, setEditingFixedCostValue] = useState<number | null>(null);
const [tasks, setTasks] = useState<IProjectFinanceTask[]>(table.tasks);
const saveTimeoutRef = useRef<NodeJS.Timeout | null>(null);
const dispatch = useAppDispatch();
// Get the latest task groups from Redux store
const taskGroups = useAppSelector((state) => state.projectFinances.taskGroups);
const activeGroup = useAppSelector((state) => state.projectFinances.activeGroup);
// Update local state when table.tasks or Redux store changes
useEffect(() => {
@@ -53,7 +56,13 @@ const FinanceTable = ({
useEffect(() => {
const handleClickOutside = (event: MouseEvent) => {
if (selectedTask && !(event.target as Element)?.closest('.fixed-cost-input')) {
setSelectedTask(null);
// Save current value before closing
if (editingFixedCostValue !== null) {
immediateSaveFixedCost(editingFixedCostValue, selectedTask.id);
} else {
setSelectedTask(null);
setEditingFixedCostValue(null);
}
}
};
@@ -61,7 +70,16 @@ const FinanceTable = ({
return () => {
document.removeEventListener('mousedown', handleClickOutside);
};
}, [selectedTask]);
}, [selectedTask, editingFixedCostValue]);
// Cleanup timeout on unmount
useEffect(() => {
return () => {
if (saveTimeoutRef.current) {
clearTimeout(saveTimeoutRef.current);
}
};
}, []);
// get theme data from theme reducer
const themeMode = useAppSelector((state) => state.themeReducer.mode);
@@ -99,14 +117,20 @@ const FinanceTable = ({
}
};
const handleFixedCostChange = (value: number | null, taskId: string) => {
const handleFixedCostChange = async (value: number | null, taskId: string) => {
const fixedCost = value || 0;
// Optimistic update for immediate UI feedback
dispatch(updateTaskFixedCost({ taskId, groupId: table.group_id, fixedCost }));
// Then make the API call to persist the change
dispatch(updateTaskFixedCostAsync({ taskId, groupId: table.group_id, fixedCost }));
try {
// Make the API call to persist the change
await dispatch(updateTaskFixedCostAsync({ taskId, groupId: table.group_id, fixedCost })).unwrap();
// Silent refresh the data to get accurate calculations from backend without loading animation
if (projectId) {
dispatch(fetchProjectFinancesSilent({ projectId, groupBy: activeGroup }));
}
} catch (error) {
console.error('Failed to update fixed cost:', error);
}
};
const { projectId } = useParams<{ projectId: string }>();
@@ -119,6 +143,38 @@ const FinanceTable = ({
dispatch(fetchTask({ taskId, projectId }));
};
// Debounced save function for fixed cost
const debouncedSaveFixedCost = (value: number | null, taskId: string) => {
// Clear existing timeout
if (saveTimeoutRef.current) {
clearTimeout(saveTimeoutRef.current);
}
// Set new timeout
saveTimeoutRef.current = setTimeout(() => {
if (value !== null) {
handleFixedCostChange(value, taskId);
setSelectedTask(null);
setEditingFixedCostValue(null);
}
}, 1000); // Save after 1 second of inactivity
};
// Immediate save function (for enter/blur)
const immediateSaveFixedCost = (value: number | null, taskId: string) => {
// Clear any pending debounced save
if (saveTimeoutRef.current) {
clearTimeout(saveTimeoutRef.current);
saveTimeoutRef.current = null;
}
if (value !== null) {
handleFixedCostChange(value, taskId);
}
setSelectedTask(null);
setEditingFixedCostValue(null);
};
const renderFinancialTableColumnContent = (columnKey: FinanceTableColumnKeys, task: IProjectFinanceTask) => {
switch (columnKey) {
case FinanceTableColumnKeys.TASK:
@@ -179,14 +235,19 @@ const FinanceTable = ({
case FinanceTableColumnKeys.FIXED_COST:
return selectedTask?.id === task.id ? (
<InputNumber
value={task.fixed_cost}
onBlur={(e) => {
handleFixedCostChange(Number(e.target.value), task.id);
setSelectedTask(null);
value={editingFixedCostValue !== null ? editingFixedCostValue : task.fixed_cost}
onChange={(value) => {
setEditingFixedCostValue(value);
// Trigger debounced save for up/down arrow clicks
debouncedSaveFixedCost(value, task.id);
}}
onPressEnter={(e) => {
handleFixedCostChange(Number((e.target as HTMLInputElement).value), task.id);
setSelectedTask(null);
onBlur={() => {
// Immediate save on blur
immediateSaveFixedCost(editingFixedCostValue, task.id);
}}
onPressEnter={() => {
// Immediate save on enter
immediateSaveFixedCost(editingFixedCostValue, task.id);
}}
autoFocus
style={{ width: '100%', textAlign: 'right' }}
@@ -202,6 +263,7 @@ const FinanceTable = ({
onClick={(e) => {
e.stopPropagation();
setSelectedTask(task);
setEditingFixedCostValue(task.fixed_cost);
}}
>
{formatNumber(task.fixed_cost)}
@@ -211,10 +273,10 @@ const FinanceTable = ({
return (
<Typography.Text
style={{
color: formattedTotals.variance > 0 ? '#FF0000' : '#6DC376'
color: task.variance > 0 ? '#FF0000' : '#6DC376'
}}
>
{formatNumber(formattedTotals.variance)}
{formatNumber(task.variance)}
</Typography.Text>
);
case FinanceTableColumnKeys.TOTAL_BUDGET: