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

feat(task-breakdown-api): implement task financial breakdown API and related enhancements

Browse Source 
- Added a new API endpoint `GET /api/project-finance/task/:id/breakdown` to retrieve detailed financial breakdown for individual tasks, including labor hours and costs grouped by job roles.
- Introduced a new SQL migration to add a `fixed_cost` column to the tasks table for improved financial calculations.
- Updated the project finance controller to handle task breakdown logic, including calculations for estimated and actual costs.
- Enhanced frontend components to integrate the new task breakdown API, providing real-time financial data in the finance drawer.
- Updated localization files to reflect changes in financial terminology across English, Spanish, and Portuguese.
- Implemented Redux state management for selected tasks in the finance drawer.
This commit is contained in:
chamikaJ
2025-05-26 16:36:25 +05:30
parent 399d8b420a
commit b0ed3f67e8
26 changed files with 1330 additions and 455 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -11,7 +11,7 @@
"taskColumn": "Task",
"membersColumn": "Members",
"hoursColumn": "Hours",
"hoursColumn": "Estimated Hours",
"totalTimeLoggedColumn": "Total Time Logged",
"costColumn": "Cost",
"estimatedCostColumn": "Estimated Cost",

2
worklenz-frontend/public/locales/es/project-view-finance.json
View File

@@ -11,7 +11,7 @@
"taskColumn": "Tarea",
"membersColumn": "Miembros",
"hoursColumn": "Horas",
"hoursColumn": "Horas Estimadas",
"totalTimeLoggedColumn": "Tiempo Total Registrado",
"costColumn": "Costo",
"estimatedCostColumn": "Costo Estimado",

2
worklenz-frontend/public/locales/pt/project-view-finance.json
View File

@@ -11,7 +11,7 @@
"taskColumn": "Tarefa",
"membersColumn": "Membros",
"hoursColumn": "Horas",
"hoursColumn": "Horas Estimadas",
"totalTimeLoggedColumn": "Tempo Total Registrado",
"costColumn": "Custo",
"estimatedCostColumn": "Custo Estimado",

15
worklenz-frontend/src/api/project-finance-ratecard/project-finance.api.service.ts
View File

@@ -1,7 +1,7 @@
import { API_BASE_URL } from "@/shared/constants";
import { IServerResponse } from "@/types/common.types";
import apiClient from "../api-client";
import { IProjectFinanceGroup } from "@/types/project/project-finance.types";
import { IProjectFinanceResponse, ITaskBreakdownResponse } from "@/types/project/project-finance.types";
const rootUrl = `${API_BASE_URL}/project-finance`;
@@ -9,8 +9,8 @@ export const projectFinanceApiService = {
getProjectTasks: async (
projectId: string,
groupBy: 'status' | 'priority' | 'phases' = 'status'
): Promise<IServerResponse<IProjectFinanceGroup[]>> => {
const response = await apiClient.get<IServerResponse<IProjectFinanceGroup[]>>(
): Promise<IServerResponse<IProjectFinanceResponse>> => {
const response = await apiClient.get<IServerResponse<IProjectFinanceResponse>>(
`${rootUrl}/project/${projectId}/tasks`,
{
params: { group_by: groupBy }
@@ -20,6 +20,15 @@ export const projectFinanceApiService = {
return response.data;
},
getTaskBreakdown: async (
taskId: string
): Promise<IServerResponse<ITaskBreakdownResponse>> => {
const response = await apiClient.get<IServerResponse<ITaskBreakdownResponse>>(
`${rootUrl}/task/${taskId}/breakdown`
);
return response.data;
},
updateTaskFixedCost: async (
taskId: string,
fixedCost: number

13
worklenz-frontend/src/components/avatars/avatars.tsx
View File

@@ -4,19 +4,20 @@ import { InlineMember } from '@/types/teamMembers/inlineMember.types';
interface AvatarsProps {
members: InlineMember[];
maxCount?: number;
allowClickThrough?: boolean;
}
const renderAvatar = (member: InlineMember, index: number) => (
const renderAvatar = (member: InlineMember, index: number, allowClickThrough: boolean = false) => (
<Tooltip
key={member.team_member_id || index}
title={member.end && member.names ? member.names.join(', ') : member.name}
>
{member.avatar_url ? (
<span onClick={(e: React.MouseEvent) => e.stopPropagation()}>
<span onClick={allowClickThrough ? undefined : (e: React.MouseEvent) => e.stopPropagation()}>
<Avatar src={member.avatar_url} size={28} key={member.team_member_id || index} />
</span>
) : (
<span onClick={(e: React.MouseEvent) => e.stopPropagation()}>
<span onClick={allowClickThrough ? undefined : (e: React.MouseEvent) => e.stopPropagation()}>
<Avatar
size={28}
key={member.team_member_id || index}
@@ -32,12 +33,12 @@ const renderAvatar = (member: InlineMember, index: number) => (
</Tooltip>
);
const Avatars: React.FC<AvatarsProps> = ({ members, maxCount }) => {
const Avatars: React.FC<AvatarsProps> = ({ members, maxCount, allowClickThrough = false }) => {
const visibleMembers = maxCount ? members.slice(0, maxCount) : members;
return (
<div onClick={(e: React.MouseEvent) => e.stopPropagation()}>
<div onClick={allowClickThrough ? undefined : (e: React.MouseEvent) => e.stopPropagation()}>
<Avatar.Group>
{visibleMembers.map((member, index) => renderAvatar(member, index))}
{visibleMembers.map((member, index) => renderAvatar(member, index, allowClickThrough))}
</Avatar.Group>
</div>
);

61
worklenz-frontend/src/components/conditional-alert.tsx Normal file
View File

@@ -0,0 +1,61 @@
import { Alert } from 'antd';
import { useState, useEffect } from 'react';
interface ConditionalAlertProps {
message?: string;
type?: 'success' | 'info' | 'warning' | 'error';
showInitially?: boolean;
onClose?: () => void;
condition?: boolean;
className?: string;
}
const ConditionalAlert = ({
message = '',
type = 'info',
showInitially = false,
onClose,
condition,
className = ''
}: ConditionalAlertProps) => {
const [visible, setVisible] = useState(showInitially);
useEffect(() => {
if (condition !== undefined) {
setVisible(condition);
}
}, [condition]);
const handleClose = () => {
setVisible(false);
onClose?.();
};
const alertStyles = {
position: 'fixed',
top: 0,
left: 0,
right: 0,
zIndex: 1000,
margin: 0,
borderRadius: 0,
} as const;
if (!visible || !message) {
return null;
}
return (
<Alert
message={message}
type={type}
closable
onClose={handleClose}
style={alertStyles}
showIcon
className={className}
/>
);
};
export default ConditionalAlert;

184
worklenz-frontend/src/components/license-alert.tsx Normal file
View File

@@ -0,0 +1,184 @@
import { Alert, Button, Space } from 'antd';
import { useState, useEffect } from 'react';
import { CrownOutlined, ClockCircleOutlined } from '@ant-design/icons';
import { ILocalSession } from '@/types/auth/local-session.types';
import { LICENSE_ALERT_KEY } from '@/shared/constants';
import { format, isSameDay, differenceInDays, addDays, isAfter } from 'date-fns';
import { useNavigate } from 'react-router-dom';
interface LicenseAlertProps {
currentSession: ILocalSession;
onVisibilityChange?: (visible: boolean) => void;
}
interface AlertConfig {
type: 'success' | 'info' | 'warning' | 'error';
message: React.ReactNode;
description: string;
icon: React.ReactNode;
licenseType: 'trial' | 'expired' | 'expiring';
daysRemaining: number;
}
const LicenseAlert = ({ currentSession, onVisibilityChange }: LicenseAlertProps) => {
const navigate = useNavigate();
const [visible, setVisible] = useState(false);
const [alertConfig, setAlertConfig] = useState<AlertConfig | null>(null);
const handleClose = () => {
setVisible(false);
setLastAlertDate(new Date());
};
const getLastAlertDate = () => {
const lastAlertDate = localStorage.getItem(LICENSE_ALERT_KEY);
return lastAlertDate ? new Date(lastAlertDate) : null;
};
const setLastAlertDate = (date: Date) => {
localStorage.setItem(LICENSE_ALERT_KEY, format(date, 'yyyy-MM-dd'));
};
const handleUpgrade = () => {
navigate('/worklenz/admin-center/billing');
};
const handleExtend = () => {
navigate('/worklenz/admin-center/billing');
};
const getVisibleAndConfig = (): { visible: boolean; config: AlertConfig | null } => {
const lastAlertDate = getLastAlertDate();
// Check if alert was already shown today
if (lastAlertDate && isSameDay(lastAlertDate, new Date())) {
return { visible: false, config: null };
}
if (!currentSession.valid_till_date) {
return { visible: false, config: null };
}
let validTillDate = new Date(currentSession.valid_till_date);
const today = new Date();
// If validTillDate is after today, add 1 day (matching Angular logic)
if (isAfter(validTillDate, today)) {
validTillDate = addDays(validTillDate, 1);
}
// Calculate the difference in days between the two dates
const daysDifference = differenceInDays(validTillDate, today);
// Don't show if no valid_till_date or difference is >= 7 days
if (daysDifference >= 7) {
return { visible: false, config: null };
}
const absDaysDifference = Math.abs(daysDifference);
const dayText = `${absDaysDifference} day${absDaysDifference === 1 ? '' : 's'}`;
let string1 = '';
let string2 = dayText;
let licenseType: 'trial' | 'expired' | 'expiring' = 'expiring';
let alertType: 'success' | 'info' | 'warning' | 'error' = 'warning';
if (currentSession.subscription_status === 'trialing') {
licenseType = 'trial';
if (daysDifference < 0) {
string1 = 'Your Worklenz trial expired';
string2 = string2 + ' ago';
alertType = 'error';
licenseType = 'expired';
} else if (daysDifference !== 0 && daysDifference < 7) {
string1 = 'Your Worklenz trial expires in';
} else if (daysDifference === 0 && daysDifference < 7) {
string1 = 'Your Worklenz trial expires';
string2 = 'today';
}
} else if (currentSession.subscription_status === 'active') {
if (daysDifference < 0) {
string1 = 'Your Worklenz subscription expired';
string2 = string2 + ' ago';
alertType = 'error';
licenseType = 'expired';
} else if (daysDifference !== 0 && daysDifference < 7) {
string1 = 'Your Worklenz subscription expires in';
} else if (daysDifference === 0 && daysDifference < 7) {
string1 = 'Your Worklenz subscription expires';
string2 = 'today';
}
} else {
return { visible: false, config: null };
}
const config: AlertConfig = {
type: alertType,
message: (
<>
Action required! {string1} <strong>{string2}</strong>
</>
),
description: '',
icon: licenseType === 'expired' || licenseType === 'trial' ? <CrownOutlined /> : <ClockCircleOutlined />,
licenseType,
daysRemaining: absDaysDifference
};
return { visible: true, config };
};
useEffect(() => {
const { visible: shouldShow, config } = getVisibleAndConfig();
setVisible(shouldShow);
setAlertConfig(config);
// Notify parent about visibility change
if (onVisibilityChange) {
onVisibilityChange(shouldShow);
}
}, [currentSession, onVisibilityChange]);
const alertStyles = {
margin: 0,
borderRadius: 0,
} as const;
const actionButtons = alertConfig && (
<Space>
{/* Show button only if user is owner or admin */}
{(currentSession.owner || currentSession.is_admin) && (
<Button
type="primary"
size="small"
onClick={currentSession.subscription_status === 'trialing' ? handleUpgrade : handleExtend}
>
{currentSession.subscription_status === 'trialing' ? 'Upgrade now' : 'Go to Billing'}
</Button>
)}
</Space>
);
if (!visible || !alertConfig) {
return null;
}
return (
<div data-license-alert>
<Alert
message={alertConfig.message}
type={alertConfig.type}
closable
onClose={handleClose}
style={{
...alertStyles,
fontWeight: 500,
}}
showIcon
action={actionButtons}
/>
</div>
);
};
export default LicenseAlert;

260
worklenz-frontend/src/features/finance/finance-drawer/finance-drawer.tsx
View File

@@ -1,17 +1,40 @@
import React, { useEffect, useState } from 'react';
import { Drawer, Typography } from 'antd';
import { Drawer, Typography, Spin } from 'antd';
import { useTranslation } from 'react-i18next';
import { useAppSelector } from '../../../hooks/useAppSelector';
import { useAppDispatch } from '../../../hooks/useAppDispatch';
import { themeWiseColor } from '../../../utils/themeWiseColor';
import { toggleFinanceDrawer } from '../finance-slice';
import { closeFinanceDrawer } from '../finance-slice';
import { projectFinanceApiService } from '../../../api/project-finance-ratecard/project-finance.api.service';
import { ITaskBreakdownResponse } from '../../../types/project/project-finance.types';
const FinanceDrawer = ({ task }: { task: any }) => {
const [selectedTask, setSelectedTask] = useState(task);
const FinanceDrawer = () => {
const [taskBreakdown, setTaskBreakdown] = useState<ITaskBreakdownResponse | null>(null);
const [loading, setLoading] = useState(false);
// Get task and drawer state from Redux store
const selectedTask = useAppSelector((state) => state.financeReducer.selectedTask);
const isDrawerOpen = useAppSelector((state) => state.financeReducer.isFinanceDrawerOpen);
useEffect(() => {
setSelectedTask(task);
}, [task]);
if (selectedTask?.id && isDrawerOpen) {
fetchTaskBreakdown(selectedTask.id);
} else {
setTaskBreakdown(null);
}
}, [selectedTask, isDrawerOpen]);
const fetchTaskBreakdown = async (taskId: string) => {
try {
setLoading(true);
const response = await projectFinanceApiService.getTaskBreakdown(taskId);
setTaskBreakdown(response.body);
} catch (error) {
console.error('Error fetching task breakdown:', error);
} finally {
setLoading(false);
}
};
// localization
const { t } = useTranslation('project-view-finance');
@@ -19,9 +42,6 @@ const FinanceDrawer = ({ task }: { task: any }) => {
// get theme data from theme reducer
const themeMode = useAppSelector((state) => state.themeReducer.mode);
const isDrawerOpen = useAppSelector(
(state) => state.financeReducer.isFinanceDrawerOpen
);
const dispatch = useAppDispatch();
const currency = useAppSelector(
(state) => state.financeReducer.currency
@@ -29,41 +49,15 @@ const FinanceDrawer = ({ task }: { task: any }) => {
// function handle drawer close
const handleClose = () => {
setSelectedTask(null);
dispatch(toggleFinanceDrawer());
setTaskBreakdown(null);
dispatch(closeFinanceDrawer());
};
// group members by job roles and calculate labor hours and costs
const groupedMembers =
selectedTask?.members?.reduce((acc: any, member: any) => {
const memberHours = selectedTask.hours / selectedTask.members.length;
const memberCost = memberHours * member.hourlyRate;
if (!acc[member.jobRole]) {
acc[member.jobRole] = {
jobRole: member.jobRole,
laborHours: 0,
cost: 0,
members: [],
};
}
acc[member.jobRole].laborHours += memberHours;
acc[member.jobRole].cost += memberCost;
acc[member.jobRole].members.push({
name: member.name,
laborHours: memberHours,
cost: memberCost,
});
return acc;
}, {}) || {};
return (
<Drawer
title={
<Typography.Text style={{ fontWeight: 500, fontSize: 16 }}>
{selectedTask?.task || t('noTaskSelected')}
{taskBreakdown?.task?.name || selectedTask?.name || t('noTaskSelected')}
</Typography.Text>
}
open={isDrawerOpen}
@@ -72,98 +66,77 @@ const FinanceDrawer = ({ task }: { task: any }) => {
width={480}
>
<div>
<table
style={{
width: '100%',
borderCollapse: 'collapse',
marginBottom: '16px',
}}
>
<thead>
<tr
style={{
height: 48,
backgroundColor: themeWiseColor(
'#F5F5F5',
'#1d1d1d',
themeMode
),
}}
>
<th
{loading ? (
<div style={{ textAlign: 'center', padding: '20px' }}>
<Spin size="large" />
</div>
) : (
<table
style={{
width: '100%',
borderCollapse: 'collapse',
marginBottom: '16px',
}}
>
<thead>
<tr
style={{
textAlign: 'left',
padding: 8,
}}
></th>
<th
style={{
textAlign: 'right',
padding: 8,
height: 48,
backgroundColor: themeWiseColor(
'#F5F5F5',
'#1d1d1d',
themeMode
),
}}
>
{t('labourHoursColumn')}
</th>
<th
style={{
textAlign: 'right',
padding: 8,
}}
>
{t('costColumn')} ({currency})
</th>
</tr>
</thead>
<div className="mb-4"></div>
<tbody>
{Object.values(groupedMembers).map((group: any) => (
<React.Fragment key={group.jobRole}>
{/* Group Header */}
<tr
<th
style={{
backgroundColor: themeWiseColor(
'#D9D9D9',
'#000',
themeMode
),
height: 56,
textAlign: 'left',
padding: 8,
}}
></th>
<th
style={{
textAlign: 'right',
padding: 8,
}}
className="border-b-[1px] font-semibold"
>
<td style={{ padding: 8 }}>{group.jobRole}</td>
<td
style={{
textAlign: 'right',
padding: 8,
}}
>
{group.laborHours}
</td>
<td
style={{
textAlign: 'right',
padding: 8,
}}
>
{group.cost}
</td>
</tr>
{/* Member Rows */}
{group.members.map((member: any, index: number) => (
{t('labourHoursColumn')}
</th>
<th
style={{
textAlign: 'right',
padding: 8,
}}
>
{t('costColumn')} ({currency})
</th>
</tr>
</thead>
<tbody>
{taskBreakdown?.grouped_members?.map((group: any) => (
<React.Fragment key={group.jobRole}>
{/* Group Header */}
<tr
key={`${group.jobRole}-${index}`}
className="border-b-[1px]"
style={{ height: 56 }}
style={{
backgroundColor: themeWiseColor(
'#D9D9D9',
'#000',
themeMode
),
height: 56,
}}
className="border-b-[1px] font-semibold"
>
<td style={{ padding: 8 }}>{group.jobRole}</td>
<td
style={{
textAlign: 'right',
padding: 8,
paddingLeft: 32,
}}
>
{member.name}
{group.estimated_hours?.toFixed(2) || '0.00'}
</td>
<td
style={{
@@ -171,22 +144,47 @@ const FinanceDrawer = ({ task }: { task: any }) => {
padding: 8,
}}
>
{member.laborHours}
</td>
<td
style={{
textAlign: 'right',
padding: 8,
}}
>
{member.cost}
{group.estimated_cost?.toFixed(2) || '0.00'}
</td>
</tr>
))}
</React.Fragment>
))}
</tbody>
</table>
{/* Member Rows */}
{group.members?.map((member: any, index: number) => (
<tr
key={`${group.jobRole}-${index}`}
className="border-b-[1px]"
style={{ height: 56 }}
>
<td
style={{
padding: 8,
paddingLeft: 32,
}}
>
{member.name}
</td>
<td
style={{
textAlign: 'right',
padding: 8,
}}
>
{member.estimated_hours?.toFixed(2) || '0.00'}
</td>
<td
style={{
textAlign: 'right',
padding: 8,
}}
>
{member.estimated_cost?.toFixed(2) || '0.00'}
</td>
</tr>
))}
</React.Fragment>
))}
</tbody>
</table>
)}
</div>
</Drawer>
);

16
worklenz-frontend/src/features/finance/finance-slice.ts
View File

@@ -12,6 +12,7 @@ type financeState = {
isFinanceDrawerloading?: boolean;
drawerRatecard?: RatecardType | null;
ratecardsList?: RatecardType[] | null;
selectedTask?: any | null;
};
const initialState: financeState = {
@@ -23,6 +24,7 @@ const initialState: financeState = {
isFinanceDrawerloading: false,
drawerRatecard: null,
ratecardsList: null,
selectedTask: null,
};
interface FetchRateCardsParams {
index: number;
@@ -128,6 +130,17 @@ const financeSlice = createSlice({
toggleFinanceDrawer: (state) => {
state.isFinanceDrawerOpen = !state.isFinanceDrawerOpen;
},
openFinanceDrawer: (state, action: PayloadAction<any>) => {
state.isFinanceDrawerOpen = true;
state.selectedTask = action.payload;
},
closeFinanceDrawer: (state) => {
state.isFinanceDrawerOpen = false;
state.selectedTask = null;
},
setSelectedTask: (state, action: PayloadAction<any>) => {
state.selectedTask = action.payload;
},
toggleImportRatecardsDrawer: (state) => {
state.isImportRatecardsDrawerOpen = !state.isImportRatecardsDrawerOpen;
},
@@ -176,6 +189,9 @@ const financeSlice = createSlice({
export const {
toggleRatecardDrawer,
toggleFinanceDrawer,
openFinanceDrawer,
closeFinanceDrawer,
setSelectedTask,
toggleImportRatecardsDrawer,
changeCurrency,
ratecardDrawerLoading,

5
worklenz-frontend/src/features/navbar/navbar.tsx
View File

@@ -90,6 +90,7 @@ const Navbar = () => {
}, [location]);
return (
<Col
style={{
width: '100%',
@@ -101,14 +102,14 @@ const Navbar = () => {
justifyContent: 'space-between',
}}
>
{daysUntilExpiry !== null && ((daysUntilExpiry <= 3 && daysUntilExpiry > 0) || (daysUntilExpiry >= -7 && daysUntilExpiry < 0)) && (
{/* {daysUntilExpiry !== null && ((daysUntilExpiry <= 3 && daysUntilExpiry > 0) || (daysUntilExpiry >= -7 && daysUntilExpiry < 0)) && (
<Alert
message={daysUntilExpiry > 0 ? `Your license will expire in ${daysUntilExpiry} days` : `Your license has expired ${Math.abs(daysUntilExpiry)} days ago`}
type="warning"
showIcon
style={{ width: '100%', marginTop: 12 }}
/>
)}
)} */}
<Flex
style={{
width: '100%',

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

@@ -1,6 +1,6 @@
import { projectFinanceApiService } from '@/api/project-finance-ratecard/project-finance.api.service';
import { createAsyncThunk, createSlice, PayloadAction } from '@reduxjs/toolkit';
import { IProjectFinanceGroup, IProjectFinanceTask } from '@/types/project/project-finance.types';
import { IProjectFinanceGroup, IProjectFinanceTask, IProjectRateCard } from '@/types/project/project-finance.types';
type FinanceTabType = 'finance' | 'ratecard';
type GroupTypes = 'status' | 'priority' | 'phases';
@@ -10,6 +10,7 @@ interface ProjectFinanceState {
activeGroup: GroupTypes;
loading: boolean;
taskGroups: IProjectFinanceGroup[];
projectRateCards: IProjectRateCard[];
}
// Utility functions for frontend calculations
@@ -67,6 +68,7 @@ const initialState: ProjectFinanceState = {
activeGroup: 'status',
loading: false,
taskGroups: [],
projectRateCards: [],
};
export const fetchProjectFinances = createAsyncThunk(
@@ -77,6 +79,14 @@ export const fetchProjectFinances = createAsyncThunk(
}
);
export const updateTaskFixedCostAsync = createAsyncThunk(
'projectFinances/updateTaskFixedCostAsync',
async ({ taskId, groupId, fixedCost }: { taskId: string; groupId: string; fixedCost: number }) => {
await projectFinanceApiService.updateTaskFixedCost(taskId, fixedCost);
return { taskId, groupId, fixedCost };
}
);
export const projectFinancesSlice = createSlice({
name: 'projectFinances',
initialState,
@@ -140,10 +150,26 @@ export const projectFinancesSlice = createSlice({
})
.addCase(fetchProjectFinances.fulfilled, (state, action) => {
state.loading = false;
state.taskGroups = action.payload;
state.taskGroups = action.payload.groups;
state.projectRateCards = action.payload.project_rate_cards;
})
.addCase(fetchProjectFinances.rejected, (state) => {
state.loading = false;
})
.addCase(updateTaskFixedCostAsync.fulfilled, (state, action) => {
const { taskId, groupId, fixedCost } = action.payload;
const group = state.taskGroups.find(g => g.group_id === groupId);
if (group) {
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;
}
}
});
},
});

25
worklenz-frontend/src/layouts/MainLayout.tsx
View File

@@ -5,15 +5,22 @@ import { useAppSelector } from '../hooks/useAppSelector';
import { useMediaQuery } from 'react-responsive';
import { colors } from '../styles/colors';
import { verifyAuthentication } from '@/features/auth/authSlice';
import { useEffect } from 'react';
import { useEffect, useState } from 'react';
import { useAppDispatch } from '@/hooks/useAppDispatch';
import HubSpot from '@/components/HubSpot';
import LicenseAlert from '@/components/license-alert';
import { useAuthService } from '@/hooks/useAuth';
import { ILocalSession } from '@/types/auth/local-session.types';
const MainLayout = () => {
const themeMode = useAppSelector(state => state.themeReducer.mode);
const isDesktop = useMediaQuery({ query: '(min-width: 1024px)' });
const dispatch = useAppDispatch();
const navigate = useNavigate();
const currentSession = useAuthService().getCurrentSession();
// State for alert visibility
const [showAlert, setShowAlert] = useState(false);
const verifyAuthStatus = async () => {
const session = await dispatch(verifyAuthentication()).unwrap();
@@ -26,6 +33,20 @@ const MainLayout = () => {
void verifyAuthStatus();
}, [dispatch, navigate]);
const handleUpgrade = () => {
// Handle upgrade logic here
console.log('Upgrade clicked');
// You can navigate to upgrade page or open a modal
};
const handleExtend = () => {
// Handle license extension logic here
console.log('Extend license clicked');
// You can navigate to renewal page or open a modal
};
const alertHeight = showAlert ? 64 : 0; // Fixed height for license alert
const headerStyles = {
zIndex: 999,
position: 'fixed',
@@ -34,11 +55,13 @@ const MainLayout = () => {
alignItems: 'center',
padding: 0,
borderBottom: themeMode === 'dark' ? '1px solid #303030' : 'none',
top: alertHeight, // Push navbar down when alert is shown
} as const;
const contentStyles = {
paddingInline: isDesktop ? 64 : 24,
overflowX: 'hidden',
marginTop: alertHeight + 64, // Adjust top margin based on alert height + navbar height
} as const;
return (

37
worklenz-frontend/src/lib/project/project-view-finance-table-columns.ts
View File

@@ -1,5 +1,18 @@
export enum FinanceTableColumnKeys {
TASK = 'task',
MEMBERS = 'members',
HOURS = 'hours',
TOTAL_TIME_LOGGED = 'total_time_logged',
ESTIMATED_COST = 'estimated_cost',
COST = 'cost',
FIXED_COST = 'fixedCost',
TOTAL_BUDGET = 'totalBudget',
TOTAL_ACTUAL = 'totalActual',
VARIANCE = 'variance',
}
type FinanceTableColumnsType = {
key: string;
key: FinanceTableColumnKeys;
name: string;
width: number;
type: 'string' | 'hours' | 'currency';
@@ -9,61 +22,61 @@ type FinanceTableColumnsType = {
// finance table columns
export const financeTableColumns: FinanceTableColumnsType[] = [
{
key: 'task',
key: FinanceTableColumnKeys.TASK,
name: 'taskColumn',
width: 240,
type: 'string',
},
{
key: 'members',
key: FinanceTableColumnKeys.MEMBERS,
name: 'membersColumn',
width: 160,
type: 'string',
},
{
key: 'hours',
key: FinanceTableColumnKeys.HOURS,
name: 'hoursColumn',
width: 80,
width: 100,
type: 'hours',
},
{
key: 'total_time_logged',
key: FinanceTableColumnKeys.TOTAL_TIME_LOGGED,
name: 'totalTimeLoggedColumn',
width: 120,
type: 'hours',
},
{
key: 'estimated_cost',
key: FinanceTableColumnKeys.ESTIMATED_COST,
name: 'estimatedCostColumn',
width: 120,
type: 'currency',
},
{
key: 'cost',
key: FinanceTableColumnKeys.COST,
name: 'costColumn',
width: 120,
type: 'currency',
},
{
key: 'fixedCost',
key: FinanceTableColumnKeys.FIXED_COST,
name: 'fixedCostColumn',
width: 120,
type: 'currency',
},
{
key: 'totalBudget',
key: FinanceTableColumnKeys.TOTAL_BUDGET,
name: 'totalBudgetedCostColumn',
width: 120,
type: 'currency',
},
{
key: 'totalActual',
key: FinanceTableColumnKeys.TOTAL_ACTUAL,
name: 'totalActualCostColumn',
width: 120,
type: 'currency',
},
{
key: 'variance',
key: FinanceTableColumnKeys.VARIANCE,
name: 'varianceColumn',
width: 120,
type: 'currency',

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

@@ -1,4 +1,3 @@
import React from 'react';
import FinanceTableWrapper from './finance-table/finance-table-wrapper';
import { IProjectFinanceGroup } from '@/types/project/project-finance.types';
@@ -23,11 +22,11 @@ const FinanceTab = ({
id: task.id,
name: task.name,
hours: task.estimated_hours || 0,
cost: 0, // TODO: Calculate based on rate and hours
fixedCost: 0, // TODO: Add fixed cost field
totalBudget: 0, // TODO: Calculate total budget
cost: task.estimated_cost || 0,
fixedCost: task.fixed_cost || 0,
totalBudget: task.total_budget || 0,
totalActual: task.total_actual || 0,
variance: 0, // TODO: Calculate variance
variance: task.variance || 0,
members: task.members || [],
isbBillable: task.billable,
total_time_logged: task.total_time_logged || 0,

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

@@ -1,52 +1,34 @@
import React, { useEffect, useState } from 'react';
import { Checkbox, Flex, Tooltip, Typography } from 'antd';
import { themeWiseColor } from '../../../../../../utils/themeWiseColor';
import { useAppSelector } from '../../../../../../hooks/useAppSelector';
import React, { useEffect, useState, useMemo } from 'react';
import { Flex, InputNumber, Tooltip, Typography } from 'antd';
import { themeWiseColor } from '@/utils/themeWiseColor';
import { useAppSelector } from '@/hooks/useAppSelector';
import { useTranslation } from 'react-i18next';
import { useAppDispatch } from '../../../../../../hooks/useAppDispatch';
import { toggleFinanceDrawer } from '@/features/finance/finance-slice';
import { financeTableColumns } from '@/lib/project/project-view-finance-table-columns';
import { useAppDispatch } from '@/hooks/useAppDispatch';
import { openFinanceDrawer } from '@/features/finance/finance-slice';
import { financeTableColumns, FinanceTableColumnKeys } from '@/lib/project/project-view-finance-table-columns';
import FinanceTable from './finance-table';
import FinanceDrawer from '@/features/finance/finance-drawer/finance-drawer';
import { convertToHoursMinutes, formatHoursToReadable } from '@/utils/format-hours-to-readable';
import { IProjectFinanceGroup } from '@/types/project/project-finance.types';
import { updateTaskFixedCostAsync } from '@/features/projects/finance/project-finance.slice';
interface FinanceTableWrapperProps {
activeTablesList: {
id: string;
name: string;
color_code: string;
color_code_dark: string;
tasks: {
taskId: string;
task: string;
hours: number;
cost: number;
fixedCost: number;
totalBudget: number;
totalActual: number;
variance: number;
members: any[];
isbBillable: boolean;
total_time_logged: number;
estimated_cost: number;
}[];
}[];
activeTablesList: IProjectFinanceGroup[];
loading: boolean;
}
const FinanceTableWrapper: React.FC<FinanceTableWrapperProps> = ({
activeTablesList,
loading
}) => {
const FinanceTableWrapper: React.FC<FinanceTableWrapperProps> = ({ activeTablesList, loading }) => {
const [isScrolling, setIsScrolling] = useState(false);
const [selectedTask, setSelectedTask] = useState(null);
const [editingFixedCost, setEditingFixedCost] = useState<{ taskId: string; groupId: string } | null>(null);
const { t } = useTranslation('project-view-finance');
const dispatch = useAppDispatch();
// Get selected task from Redux store
const selectedTask = useAppSelector(state => state.financeReducer.selectedTask);
const onTaskClick = (task: any) => {
setSelectedTask(task);
dispatch(toggleFinanceDrawer());
dispatch(openFinanceDrawer(task));
};
useEffect(() => {
@@ -63,84 +45,89 @@ const FinanceTableWrapper: React.FC<FinanceTableWrapperProps> = ({
};
}, []);
const themeMode = useAppSelector((state) => state.themeReducer.mode);
const { currency } = useAppSelector((state) => state.financeReducer);
// Handle click outside to close editing
useEffect(() => {
const handleClickOutside = (event: MouseEvent) => {
if (editingFixedCost && !(event.target as Element)?.closest('.fixed-cost-input')) {
setEditingFixedCost(null);
}
};
const totals = activeTablesList.reduce(
(
acc: {
hours: number;
cost: number;
fixedCost: number;
totalBudget: number;
totalActual: number;
variance: number;
total_time_logged: number;
estimated_cost: number;
document.addEventListener('mousedown', handleClickOutside);
return () => {
document.removeEventListener('mousedown', handleClickOutside);
};
}, [editingFixedCost]);
const themeMode = useAppSelector(state => state.themeReducer.mode);
const { currency } = useAppSelector(state => state.financeReducer);
const taskGroups = useAppSelector(state => state.projectFinances.taskGroups);
// Use Redux store data for totals calculation to ensure reactivity
const totals = useMemo(() => {
return taskGroups.reduce(
(
acc: {
hours: number;
cost: number;
fixedCost: number;
totalBudget: number;
totalActual: number;
variance: number;
total_time_logged: number;
estimated_cost: number;
},
table: IProjectFinanceGroup
) => {
table.tasks.forEach((task) => {
acc.hours += (task.estimated_hours / 60) || 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.estimated_cost += task.estimated_cost || 0;
});
return acc;
},
table: { tasks: any[] }
) => {
table.tasks.forEach((task: any) => {
acc.hours += task.hours || 0;
acc.cost += task.cost || 0;
acc.fixedCost += task.fixedCost || 0;
acc.totalBudget += task.totalBudget || 0;
acc.totalActual += task.totalActual || 0;
acc.variance += task.variance || 0;
acc.total_time_logged += task.total_time_logged || 0;
acc.estimated_cost += task.estimated_cost || 0;
});
return acc;
},
{
hours: 0,
cost: 0,
fixedCost: 0,
totalBudget: 0,
totalActual: 0,
variance: 0,
total_time_logged: 0,
estimated_cost: 0,
}
);
{
hours: 0,
cost: 0,
fixedCost: 0,
totalBudget: 0,
totalActual: 0,
variance: 0,
total_time_logged: 0,
estimated_cost: 0,
}
);
}, [taskGroups]);
console.log("totals", totals);
const handleFixedCostChange = (value: number | null, taskId: string, groupId: string) => {
dispatch(updateTaskFixedCostAsync({ taskId, groupId, fixedCost: value || 0 }));
setEditingFixedCost(null);
};
const renderFinancialTableHeaderContent = (columnKey: any) => {
const renderFinancialTableHeaderContent = (columnKey: FinanceTableColumnKeys) => {
switch (columnKey) {
case 'hours':
case FinanceTableColumnKeys.HOURS:
return (
<Typography.Text style={{ fontSize: 18 }}>
<Tooltip title={convertToHoursMinutes(totals.hours)}>
{formatHoursToReadable(totals.hours)}
{formatHoursToReadable(totals.hours).toFixed(2)}
</Tooltip>
</Typography.Text>
);
case 'cost':
return (
<Typography.Text style={{ fontSize: 18 }}>
{totals.cost}
</Typography.Text>
);
case 'fixedCost':
return (
<Typography.Text style={{ fontSize: 18 }}>
{totals.fixedCost}
</Typography.Text>
);
case 'totalBudget':
return (
<Typography.Text style={{ fontSize: 18 }}>
{totals.totalBudget}
</Typography.Text>
);
case 'totalActual':
return (
<Typography.Text style={{ fontSize: 18 }}>
{totals.totalActual}
</Typography.Text>
);
case 'variance':
case FinanceTableColumnKeys.COST:
return <Typography.Text style={{ fontSize: 18 }}>{`${totals.cost?.toFixed(2)}`}</Typography.Text>;
case FinanceTableColumnKeys.FIXED_COST:
return <Typography.Text style={{ fontSize: 18 }}>{totals.fixedCost?.toFixed(2)}</Typography.Text>;
case FinanceTableColumnKeys.TOTAL_BUDGET:
return <Typography.Text style={{ fontSize: 18 }}>{totals.totalBudget?.toFixed(2)}</Typography.Text>;
case FinanceTableColumnKeys.TOTAL_ACTUAL:
return <Typography.Text style={{ fontSize: 18 }}>{totals.totalActual?.toFixed(2)}</Typography.Text>;
case FinanceTableColumnKeys.VARIANCE:
return (
<Typography.Text
style={{
@@ -148,19 +135,19 @@ const FinanceTableWrapper: React.FC<FinanceTableWrapperProps> = ({
fontSize: 18,
}}
>
{totals.variance}
{`${totals.variance?.toFixed(2)}`}
</Typography.Text>
);
case 'total_time_logged':
case FinanceTableColumnKeys.TOTAL_TIME_LOGGED:
return (
<Typography.Text style={{ fontSize: 18 }}>
{totals.total_time_logged?.toFixed(2)}
</Typography.Text>
);
case 'estimated_cost':
case FinanceTableColumnKeys.ESTIMATED_COST:
return (
<Typography.Text style={{ fontSize: 18 }}>
{`${currency.toUpperCase()} ${totals.estimated_cost?.toFixed(2)}`}
{`${totals.estimated_cost?.toFixed(2)}`}
</Typography.Text>
);
default:
@@ -168,54 +155,37 @@ const FinanceTableWrapper: React.FC<FinanceTableWrapperProps> = ({
}
};
const customColumnHeaderStyles = (key: string) =>
`px-2 text-left ${key === 'selector' && 'sticky left-0 z-10'} ${key === 'task' && 'sticky left-[48px] z-10'} ${key === 'members' && `sticky left-[288px] 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 customColumnHeaderStyles = (key: FinanceTableColumnKeys) =>
`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: string) =>
`px-2 text-left ${key === 'totalRow' && `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' : ''}`}`;
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]'}`;
return (
<>
<Flex
vertical
className="tasklist-container min-h-0 max-w-full overflow-x-auto"
>
<Flex vertical className="tasklist-container min-h-0 max-w-full overflow-x-auto">
<table>
<tbody>
<tr
style={{
height: 56,
fontWeight: 600,
backgroundColor: themeWiseColor(
'#fafafa',
'#1d1d1d',
themeMode
),
backgroundColor: themeWiseColor('#fafafa', '#1d1d1d', themeMode),
borderBlockEnd: `2px solid rgb(0 0 0 / 0.05)`,
}}
>
<td
style={{ width: 32, paddingInline: 16 }}
className={customColumnHeaderStyles('selector')}
>
<Checkbox />
</td>
{financeTableColumns.map((col) => (
{financeTableColumns.map(col => (
<td
key={col.key}
style={{
minWidth: col.width,
paddingInline: 16,
textAlign:
col.type === 'hours' || col.type === 'currency'
? 'center'
: 'start',
textAlign: col.type === 'hours' || col.type === 'currency' ? 'center' : 'start',
}}
className={`${customColumnHeaderStyles(col.key)} before:constent relative before:absolute before:left-0 before:top-1/2 before:h-[36px] before:w-0.5 before:-translate-y-1/2 ${themeMode === 'dark' ? 'before:bg-white/10' : 'before:bg-black/5'}`}
>
<Typography.Text>
{t(`${col.name}`)}{' '}
{col.type === 'currency' && `(${currency.toUpperCase()})`}
{t(`${col.name}`)} {col.type === 'currency' && `(${currency.toUpperCase()})`}
</Typography.Text>
</td>
))}
@@ -225,59 +195,43 @@ const FinanceTableWrapper: React.FC<FinanceTableWrapperProps> = ({
style={{
height: 56,
fontWeight: 500,
backgroundColor: themeWiseColor(
'#fbfbfb',
'#141414',
themeMode
),
backgroundColor: themeWiseColor('#fbfbfb', '#141414', themeMode),
}}
>
<td
colSpan={3}
style={{
paddingInline: 16,
backgroundColor: themeWiseColor(
'#fbfbfb',
'#141414',
themeMode
),
}}
className={customColumnStyles('totalRow')}
>
<Typography.Text style={{ fontSize: 18 }}>
{t('totalText')}
</Typography.Text>
</td>
{financeTableColumns.map(
(col) =>
(col.type === 'hours' || col.type === 'currency') && (
<td
key={col.key}
style={{
minWidth: col.width,
paddingInline: 16,
textAlign: 'end',
}}
>
{renderFinancialTableHeaderContent(col.key)}
</td>
)
)}
{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, index) => (
{activeTablesList.map((table) => (
<FinanceTable
key={index}
key={table.group_id}
table={table}
isScrolling={isScrolling}
onTaskClick={onTaskClick}
loading={loading}
/>
))}
</tbody>
</table>
</Flex>
{selectedTask && <FinanceDrawer task={selectedTask} />}
<FinanceDrawer />
</>
);
};

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

@@ -8,20 +8,24 @@ import {
} from '@ant-design/icons';
import { themeWiseColor } from '@/utils/themeWiseColor';
import { colors } from '@/styles/colors';
import { financeTableColumns } from '@/lib/project/project-view-finance-table-columns';
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 { updateTaskFixedCost } from '@/features/projects/finance/project-finance.slice';
import { updateTaskFixedCostAsync, updateTaskFixedCost } from '@/features/projects/finance/project-finance.slice';
import { useAppDispatch } from '@/hooks/useAppDispatch';
type FinanceTableProps = {
table: IProjectFinanceGroup;
loading: boolean;
isScrolling: boolean;
onTaskClick: (task: any) => void;
};
const FinanceTable = ({
table,
loading,
isScrolling,
onTaskClick,
}: FinanceTableProps) => {
const [isCollapse, setIsCollapse] = useState<boolean>(false);
const [selectedTask, setSelectedTask] = useState<IProjectFinanceTask | null>(null);
@@ -41,6 +45,20 @@ const FinanceTable = ({
}
}, [table.tasks, taskGroups, table.group_id]);
// Handle click outside to close editing
useEffect(() => {
const handleClickOutside = (event: MouseEvent) => {
if (selectedTask && !(event.target as Element)?.closest('.fixed-cost-input')) {
setSelectedTask(null);
}
};
document.addEventListener('mousedown', handleClickOutside);
return () => {
document.removeEventListener('mousedown', handleClickOutside);
};
}, [selectedTask]);
// get theme data from theme reducer
const themeMode = useAppSelector((state) => state.themeReducer.mode);
@@ -49,19 +67,28 @@ const FinanceTable = ({
return value.toFixed(2);
};
const renderFinancialTableHeaderContent = (columnKey: string) => {
// Custom column styles for sticky positioning
const customColumnStyles = (key: FinanceTableColumnKeys) =>
`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-[40px] 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-white'}`;
const customHeaderColumnStyles = (key: FinanceTableColumnKeys) =>
`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-[40px] after:w-1.5 after:bg-transparent after:bg-gradient-to-r after:from-[rgba(0,0,0,0.12)] after:to-transparent' : ''}`}`;
const renderFinancialTableHeaderContent = (columnKey: FinanceTableColumnKeys) => {
switch (columnKey) {
case 'hours':
case FinanceTableColumnKeys.HOURS:
return <Typography.Text>{formatNumber(totals.hours)}</Typography.Text>;
case 'total_time_logged':
case FinanceTableColumnKeys.TOTAL_TIME_LOGGED:
return <Typography.Text>{formatNumber(totals.total_time_logged)}</Typography.Text>;
case 'estimated_cost':
case FinanceTableColumnKeys.ESTIMATED_COST:
return <Typography.Text>{formatNumber(totals.estimated_cost)}</Typography.Text>;
case 'totalBudget':
case FinanceTableColumnKeys.FIXED_COST:
return <Typography.Text>{formatNumber(totals.fixed_cost)}</Typography.Text>;
case FinanceTableColumnKeys.TOTAL_BUDGET:
return <Typography.Text>{formatNumber(totals.total_budget)}</Typography.Text>;
case 'totalActual':
case FinanceTableColumnKeys.TOTAL_ACTUAL:
return <Typography.Text>{formatNumber(totals.total_actual)}</Typography.Text>;
case 'variance':
case FinanceTableColumnKeys.VARIANCE:
return <Typography.Text>{formatNumber(totals.variance)}</Typography.Text>;
default:
return null;
@@ -69,12 +96,18 @@ const FinanceTable = ({
};
const handleFixedCostChange = (value: number | null, taskId: string) => {
dispatch(updateTaskFixedCost({ taskId, groupId: table.group_id, fixedCost: value || 0 }));
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 }));
};
const renderFinancialTableColumnContent = (columnKey: string, task: IProjectFinanceTask) => {
const renderFinancialTableColumnContent = (columnKey: FinanceTableColumnKeys, task: IProjectFinanceTask) => {
switch (columnKey) {
case 'task':
case FinanceTableColumnKeys.TASK:
return (
<Tooltip title={task.name}>
<Flex gap={8} align="center">
@@ -88,22 +121,43 @@ const FinanceTable = ({
</Flex>
</Tooltip>
);
case 'members':
case FinanceTableColumnKeys.MEMBERS:
return task.members && (
<Avatars
members={task.members.map(member => ({
...member,
avatar_url: member.avatar_url || undefined
}))}
/>
<div
onClick={(e) => {
e.stopPropagation();
onTaskClick(task);
}}
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';
}}
>
<Avatars
members={task.members.map(member => ({
...member,
avatar_url: member.avatar_url || undefined
}))}
allowClickThrough={true}
/>
</div>
);
case 'hours':
case FinanceTableColumnKeys.HOURS:
return <Typography.Text>{formatNumber(task.estimated_hours / 60)}</Typography.Text>;
case 'total_time_logged':
case FinanceTableColumnKeys.TOTAL_TIME_LOGGED:
return <Typography.Text>{formatNumber(task.total_time_logged / 60)}</Typography.Text>;
case 'estimated_cost':
case FinanceTableColumnKeys.ESTIMATED_COST:
return <Typography.Text>{formatNumber(task.estimated_cost)}</Typography.Text>;
case 'fixedCost':
case FinanceTableColumnKeys.FIXED_COST:
return selectedTask?.id === task.id ? (
<InputNumber
value={task.fixed_cost}
@@ -111,24 +165,37 @@ const FinanceTable = ({
handleFixedCostChange(Number(e.target.value), task.id);
setSelectedTask(null);
}}
onPressEnter={(e) => {
handleFixedCostChange(Number((e.target as HTMLInputElement).value), task.id);
setSelectedTask(null);
}}
autoFocus
style={{ width: '100%', textAlign: 'right' }}
formatter={(value) => `${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')}
parser={(value) => Number(value!.replace(/\$\s?|(,*)/g, ''))}
min={0}
precision={2}
className="fixed-cost-input"
/>
) : (
<Typography.Text>{formatNumber(task.fixed_cost)}</Typography.Text>
<Typography.Text
style={{ cursor: 'pointer', width: '100%', display: 'block' }}
onClick={(e) => {
e.stopPropagation();
setSelectedTask(task);
}}
>
{formatNumber(task.fixed_cost)}
</Typography.Text>
);
case 'variance':
case FinanceTableColumnKeys.VARIANCE:
return <Typography.Text>{formatNumber(task.variance)}</Typography.Text>;
case 'totalBudget':
case FinanceTableColumnKeys.TOTAL_BUDGET:
return <Typography.Text>{formatNumber(task.total_budget)}</Typography.Text>;
case 'totalActual':
case FinanceTableColumnKeys.TOTAL_ACTUAL:
return <Typography.Text>{formatNumber(task.total_actual)}</Typography.Text>;
case 'cost':
return <Typography.Text>{formatNumber(task.cost || 0)}</Typography.Text>;
case FinanceTableColumnKeys.COST:
return <Typography.Text>{formatNumber(task.estimated_cost || 0)}</Typography.Text>;
default:
return null;
}
@@ -141,6 +208,7 @@ const FinanceTable = ({
hours: acc.hours + (task.estimated_hours / 60),
total_time_logged: acc.total_time_logged + (task.total_time_logged / 60),
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),
total_actual: acc.total_actual + (task.total_actual || 0),
variance: acc.variance + (task.variance || 0)
@@ -149,6 +217,7 @@ const FinanceTable = ({
hours: 0,
total_time_logged: 0,
estimated_cost: 0,
fixed_cost: 0,
total_budget: 0,
total_actual: 0,
variance: 0
@@ -172,43 +241,33 @@ const FinanceTable = ({
}}
className="group"
>
<td
colSpan={3}
style={{
width: 48,
textTransform: 'capitalize',
textAlign: 'left',
paddingInline: 16,
backgroundColor: themeWiseColor(
table.color_code,
table.color_code_dark,
themeMode
),
cursor: 'pointer',
}}
onClick={() => setIsCollapse((prev) => !prev)}
>
<Flex gap={8} align="center" style={{ color: colors.darkGray }}>
{isCollapse ? <RightOutlined /> : <DownOutlined />}
{table.group_name} ({tasks.length})
</Flex>
</td>
{financeTableColumns.map(
(col) =>
col.key !== 'task' &&
col.key !== 'members' && (
<td
key={`header-${col.key}`}
style={{
width: col.width,
paddingInline: 16,
textAlign: 'end',
}}
>
{renderFinancialTableHeaderContent(col.key)}
</td>
)
(col, index) => (
<td
key={`header-${col.key}`}
style={{
width: col.width,
paddingInline: 16,
textAlign: col.key === FinanceTableColumnKeys.TASK || col.key === FinanceTableColumnKeys.MEMBERS ? 'left' : 'right',
backgroundColor: themeWiseColor(
table.color_code,
table.color_code_dark,
themeMode
),
cursor: col.key === FinanceTableColumnKeys.TASK ? 'pointer' : 'default',
textTransform: col.key === FinanceTableColumnKeys.TASK ? 'capitalize' : 'none',
}}
className={customHeaderColumnStyles(col.key)}
onClick={col.key === FinanceTableColumnKeys.TASK ? () => setIsCollapse((prev) => !prev) : undefined}
>
{col.key === FinanceTableColumnKeys.TASK ? (
<Flex gap={8} align="center" style={{ color: colors.darkGray }}>
{isCollapse ? <RightOutlined /> : <DownOutlined />}
{table.group_name} ({tasks.length})
</Flex>
) : col.key === FinanceTableColumnKeys.MEMBERS ? null : renderFinancialTableHeaderContent(col.key)}
</td>
)
)}
</tr>
@@ -218,17 +277,12 @@ const FinanceTable = ({
key={task.id}
style={{
height: 40,
background: idx % 2 === 0 ? '#232323' : '#181818',
background: idx % 2 === 0 ? themeWiseColor('#fafafa', '#232323', themeMode) : themeWiseColor('#ffffff', '#181818', themeMode),
transition: 'background 0.2s',
cursor: 'pointer'
}}
onMouseEnter={e => e.currentTarget.style.background = '#333'}
onMouseLeave={e => e.currentTarget.style.background = idx % 2 === 0 ? '#232323' : '#181818'}
onClick={() => setSelectedTask(task)}
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)}
>
<td style={{ width: 48, paddingInline: 16 }}>
<Checkbox />
</td>
{financeTableColumns.map((col) => (
<td
key={`${task.id}-${col.key}`}
@@ -236,7 +290,17 @@ const FinanceTable = ({
width: col.width,
paddingInline: 16,
textAlign: col.type === 'string' ? 'left' : 'right',
backgroundColor: (col.key === FinanceTableColumnKeys.TASK || col.key === FinanceTableColumnKeys.MEMBERS) ?
(idx % 2 === 0 ? themeWiseColor('#fafafa', '#232323', themeMode) : themeWiseColor('#ffffff', '#181818', themeMode)) :
'transparent',
cursor: 'default'
}}
className={customColumnStyles(col.key)}
onClick={
col.key === FinanceTableColumnKeys.FIXED_COST
? (e) => e.stopPropagation()
: undefined
}
>
{renderFinancialTableColumnContent(col.key, task)}
</td>

3
worklenz-frontend/src/pages/projects/projectView/finance/project-view-finance.tsx
View File

@@ -14,12 +14,13 @@ const ProjectViewFinance = () => {
const dispatch = useAppDispatch();
const { activeTab, activeGroup, loading, taskGroups } = useAppSelector((state: RootState) => state.projectFinances);
const { refreshTimestamp } = useAppSelector((state: RootState) => state.projectReducer);
useEffect(() => {
if (projectId) {
dispatch(fetchProjectFinances({ projectId, groupBy: activeGroup }));
}
}, [projectId, activeGroup, dispatch]);
}, [projectId, activeGroup, dispatch, refreshTimestamp]);
return (
<Flex vertical gap={16} style={{ overflowX: 'hidden' }}>

29
worklenz-frontend/src/pages/projects/projectView/project-view-header.tsx
View File

@@ -22,8 +22,18 @@ import { useAppSelector } from '@/hooks/useAppSelector';
import { SocketEvents } from '@/shared/socket-events';
import { useAuthService } from '@/hooks/useAuth';
import { useSocket } from '@/socket/socketContext';
import { setProject, setImportTaskTemplateDrawerOpen, setRefreshTimestamp, getProject } from '@features/project/project.slice';
import { addTask, fetchTaskGroups, fetchTaskListColumns, IGroupBy } from '@features/tasks/tasks.slice';
import {
setProject,
setImportTaskTemplateDrawerOpen,
setRefreshTimestamp,
getProject,
} from '@features/project/project.slice';
import {
addTask,
fetchTaskGroups,
fetchTaskListColumns,
IGroupBy,
} from '@features/tasks/tasks.slice';
import ProjectStatusIcon from '@/components/common/project-status-icon/project-status-icon';
import { formatDate } from '@/utils/timeUtils';
import { toggleSaveAsTemplateDrawer } from '@/features/projects/projectsSlice';
@@ -60,10 +70,7 @@ const ProjectViewHeader = () => {
const { socket } = useSocket();
const {
project: selectedProject,
projectId,
} = useAppSelector(state => state.projectReducer);
const { project: selectedProject, projectId } = useAppSelector(state => state.projectReducer);
const { loadingGroups, groupBy } = useAppSelector(state => state.taskReducer);
const [creatingTask, setCreatingTask] = useState(false);
@@ -74,7 +81,7 @@ const ProjectViewHeader = () => {
switch (tab) {
case 'tasks-list':
dispatch(fetchTaskListColumns(projectId));
dispatch(fetchPhasesByProjectId(projectId))
dispatch(fetchPhasesByProjectId(projectId));
dispatch(fetchTaskGroups(projectId));
break;
case 'board':
@@ -92,6 +99,9 @@ const ProjectViewHeader = () => {
case 'updates':
dispatch(setRefreshTimestamp());
break;
case 'finance':
dispatch(setRefreshTimestamp());
break;
default:
break;
}
@@ -222,7 +232,7 @@ const ProjectViewHeader = () => {
/>
</Tooltip>
{(isOwnerOrAdmin) && (
{isOwnerOrAdmin && (
<Tooltip title="Save as template">
<Button
shape="circle"
@@ -299,10 +309,9 @@ const ProjectViewHeader = () => {
style={{ paddingInline: 0, marginBlockEnd: 12 }}
extra={renderHeaderActions()}
/>
{createPortal(<ProjectDrawer onClose={() => { }} />, document.body, 'project-drawer')}
{createPortal(<ProjectDrawer onClose={() => {}} />, document.body, 'project-drawer')}
{createPortal(<ImportTaskTemplate />, document.body, 'import-task-template')}
{createPortal(<SaveProjectAsTemplate />, document.body, 'save-project-as-template')}
</>
);
};

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

@@ -48,7 +48,16 @@ const MembersTimeSheet = forwardRef<MembersTimeSheetRef>((_, ref) => {
const loggedTimeInHours = parseFloat(item.logged_time || '0') / 3600;
return loggedTimeInHours.toFixed(2);
}) : [];
const colors = Array.isArray(jsonData) ? jsonData.map(item => item.color_code) : [];
const colors = Array.isArray(jsonData) ? jsonData.map(item => {
const overUnder = parseFloat(item.over_under_utilized_hours || '0');
if (overUnder > 0) {
return '#ef4444'; // Red for over-utilized
} else if (overUnder < 0) {
return '#22c55e'; // Green for under-utilized
} else {
return '#6b7280'; // Gray for exactly on target
}
}) : [];
const themeMode = useAppSelector(state => state.themeReducer.mode);

1
worklenz-frontend/src/shared/constants.ts
View File

@@ -185,6 +185,7 @@ export const WORKLENZ_REDIRECT_PROJ_KEY = 'worklenz.redirect_proj';
export const PROJECT_SORT_FIELD = 'worklenz.projects.sort_field';
export const PROJECT_SORT_ORDER = 'worklenz.projects.sort_order';
export const PROJECT_LIST_COLUMNS = 'worklenz.reporting.projects.column_list';
export const LICENSE_ALERT_KEY = 'worklenz.licensing_close';
export const PROJECT_STATUS_ICON_MAP = {
'check-circle': CheckCircleOutlined,

1
worklenz-frontend/src/types/auth/local-session.types.ts
View File

@@ -28,4 +28,5 @@ export interface ILocalSession extends IUserType {
subscription_status?: string;
subscription_type?: string;
trial_expire_date?: string;
valid_till_date?: string;
}

69
worklenz-frontend/src/types/project/project-finance.types.ts
View File

@@ -17,8 +17,13 @@ export interface IProjectFinanceMember {
avatar_url: string | null;
user_id: string;
email: string;
socket_id: string;
socket_id: string | null;
team_id: string;
color_code: string;
project_rate_card_role_id: string | null;
rate: number;
job_title_id: string | null;
job_title_name: string | null;
}
export interface IProjectFinanceTask {
@@ -29,11 +34,10 @@ export interface IProjectFinanceTask {
estimated_cost: number;
members: IProjectFinanceMember[];
billable: boolean;
fixed_cost?: number;
variance?: number;
total_budget?: number;
total_actual?: number;
cost?: number;
fixed_cost: number;
variance: number;
total_budget: number;
total_actual: number;
}
export interface IProjectFinanceGroup {
@@ -44,4 +48,57 @@ export interface IProjectFinanceGroup {
tasks: IProjectFinanceTask[];
}
export interface IProjectRateCard {
id: string;
project_id: string;
job_title_id: string;
rate: string;
job_title_name: string;
}
export interface IProjectFinanceResponse {
groups: IProjectFinanceGroup[];
project_rate_cards: IProjectRateCard[];
}
export interface ITaskBreakdownMember {
team_member_id: string;
name: string;
avatar_url: string;
hourly_rate: number;
estimated_hours: number;
logged_hours: number;
estimated_cost: number;
actual_cost: number;
}
export interface ITaskBreakdownJobRole {
jobRole: string;
estimated_hours: number;
logged_hours: number;
estimated_cost: number;
actual_cost: number;
members: ITaskBreakdownMember[];
}
export interface ITaskBreakdownTask {
id: string;
name: string;
project_id: string;
billable: boolean;
estimated_hours: number;
logged_hours: number;
estimated_labor_cost: number;
actual_labor_cost: number;
fixed_cost: number;
total_estimated_cost: number;
total_actual_cost: number;
}
export interface ITaskBreakdownResponse {
task: ITaskBreakdownTask;
grouped_members: ITaskBreakdownJobRole[];
members: Array<ITaskBreakdownMember & { job_title_name: string }>;
}
export type ProjectFinanceGroupType = 'status' | 'priority' | 'phases';