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

Merge branch 'feature/project-finance' of https://github.com/Worklenz/worklenz into feature/project-finance

Browse Source
This commit is contained in:
shancds
2025-05-23 06:22:00 +05:30
parent 87bd1b8801 096163d9c0
commit e245530a15
56 changed files with 2989 additions and 1172 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
worklenz-frontend/src/pages/home/recent-and-favourite-project-list/recent-and-favourite-project-list.tsx
View File

@@ -132,7 +132,7 @@ const RecentAndFavouriteProjectList = () => {
<div style={{ maxHeight: 420, overflow: 'auto' }}>
{projectsData?.body?.length === 0 ? (
<Empty
image="https://app.worklenz.com/assets/images/empty-box.webp"
image="https://s3.us-west-2.amazonaws.com/worklenz.com/assets/empty-box.webp"
imageStyle={{ height: 60 }}
style={{
display: 'flex',

2
worklenz-frontend/src/pages/home/task-list/tasks-list.tsx
View File

@@ -259,7 +259,7 @@ const TasksList: React.FC = React.memo(() => {
<Skeleton active />
) : data?.body.total === 0 ? (
<EmptyListPlaceholder
imageSrc="https://app.worklenz.com/assets/images/empty-box.webp"
imageSrc="https://s3.us-west-2.amazonaws.com/worklenz.com/assets/empty-box.webp"
text=" No tasks to show."
/>
) : (

2
worklenz-frontend/src/pages/home/todo-list/todo-list.tsx
View File

@@ -147,7 +147,7 @@ const TodoList = () => {
<div style={{ maxHeight: 420, overflow: 'auto' }}>
{data?.body.length === 0 ? (
<EmptyListPlaceholder
imageSrc="https://app.worklenz.com/assets/images/empty-box.webp"
imageSrc="https://s3.us-west-2.amazonaws.com/worklenz.com/assets/empty-box.webp"
text={t('home:todoList.noTasks')}
/>
) : (

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

@@ -1,42 +1,41 @@
import React, { useEffect, useMemo, useState } from 'react';
import React from 'react';
import FinanceTableWrapper from './finance-table/finance-table-wrapper';
import { fetchData } from '../../../../../utils/fetchData';
import { IProjectFinanceGroup } from '@/types/project/project-finance.types';
interface FinanceTabProps {
groupType: 'status' | 'priority' | 'phases';
taskGroups: IProjectFinanceGroup[];
loading: boolean;
}
const FinanceTab = ({
groupType,
}: {
groupType: 'status' | 'priority' | 'phases';
}) => {
// Save each table's list according to the groups
const [statusTables, setStatusTables] = useState<any[]>([]);
const [priorityTables, setPriorityTables] = useState<any[]>([]);
const [activeTablesList, setActiveTablesList] = useState<any[]>([]);
// Fetch data for status tables
useMemo(() => {
fetchData('/finance-mock-data/finance-task-status.json', setStatusTables);
}, []);
// Fetch data for priority tables
useMemo(() => {
fetchData(
'/finance-mock-data/finance-task-priority.json',
setPriorityTables
);
}, []);
// Update activeTablesList based on groupType and fetched data
useEffect(() => {
if (groupType === 'status') {
setActiveTablesList(statusTables);
} else if (groupType === 'priority') {
setActiveTablesList(priorityTables);
}
}, [groupType, priorityTables, statusTables]);
taskGroups,
loading
}: FinanceTabProps) => {
// Transform taskGroups into the format expected by FinanceTableWrapper
const activeTablesList = taskGroups.map(group => ({
id: group.group_id,
name: group.group_name,
color_code: group.color_code,
color_code_dark: group.color_code_dark,
tasks: group.tasks.map(task => ({
taskId: task.id,
task: 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
totalActual: task.actual_hours || 0,
variance: 0, // TODO: Calculate variance
members: task.members || [],
isbBillable: task.billable
}))
}));
return (
<div>
<FinanceTableWrapper activeTablesList={activeTablesList} />
<FinanceTableWrapper activeTablesList={activeTablesList} loading={loading} />
</div>
);
};

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

@@ -0,0 +1,44 @@
import React from "react";
import { Card, Col, Row, Spin } from "antd";
import { useThemeContext } from "../../../../../context/theme-context";
import { FinanceTable } from "./finance-table";
import { IFinanceTable } from "./finance-table.interface";
import { IProjectFinanceGroup } from "../../../../../types/project/project-finance.types";
interface Props {
activeTablesList: IProjectFinanceGroup[];
loading: boolean;
}
export const FinanceTableWrapper: React.FC<Props> = ({ activeTablesList, loading }) => {
const { isDarkMode } = useThemeContext();
const getTableColor = (table: IProjectFinanceGroup) => {
return isDarkMode ? table.color_code_dark : table.color_code;
};
return (
<div className="finance-table-wrapper">
<Row gutter={[16, 16]}>
{activeTablesList.map((table) => (
<Col key={table.group_id} xs={24} sm={24} md={24} lg={24} xl={24}>
<Card
className="finance-table-card"
style={{
borderTop: `3px solid ${getTableColor(table)}`,
}}
>
<div className="finance-table-header">
<h3>{table.group_name}</h3>
</div>
<FinanceTable
table={table as unknown as IFinanceTable}
loading={loading}
/>
</Card>
</Col>
))}
</Row>
</div>
);
};

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

@@ -9,28 +9,43 @@ import { financeTableColumns } from '@/lib/project/project-view-finance-table-co
import FinanceTable from './finance-table';
import FinanceDrawer from '@/features/finance/finance-drawer/finance-drawer';
const FinanceTableWrapper = ({
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;
}[];
}[];
loading: boolean;
}
const FinanceTableWrapper: React.FC<FinanceTableWrapperProps> = ({
activeTablesList,
}: {
activeTablesList: any;
loading
}) => {
const [isScrolling, setIsScrolling] = useState(false);
//? this state for inside this state individualy in finance table only display the data of the last table's task when a task is clicked The selectedTask state does not synchronize across tables so thats why move the selectedTask state to a parent component
const [selectedTask, setSelectedTask] = useState(null);
// localization
const { t } = useTranslation('project-view-finance');
const dispatch = useAppDispatch();
// function on task click
const onTaskClick = (task: any) => {
setSelectedTask(task);
dispatch(toggleFinanceDrawer());
};
// trigger the table scrolling
useEffect(() => {
const tableContainer = document.querySelector('.tasklist-container');
const handleScroll = () => {
@@ -39,22 +54,15 @@ const FinanceTableWrapper = ({
}
};
// add the scroll event listener
tableContainer?.addEventListener('scroll', handleScroll);
// cleanup on unmount
return () => {
tableContainer?.removeEventListener('scroll', handleScroll);
};
}, []);
// get theme data from theme reducer
const themeMode = useAppSelector((state) => state.themeReducer.mode);
// get tasklist and currently using currency from finance reducer
const { currency } = useAppSelector((state) => state.financeReducer);
// totals of all the tasks
const totals = activeTablesList.reduce(
(
acc: {
@@ -135,7 +143,6 @@ const FinanceTableWrapper = ({
}
};
// layout styles for table and the columns
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]'}`;
@@ -233,7 +240,7 @@ const FinanceTableWrapper = ({
)}
</tr>
{activeTablesList.map((table: any, index: number) => (
{activeTablesList.map((table, index) => (
<FinanceTable
key={index}
table={table}

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

@@ -10,6 +10,7 @@ import {
import { themeWiseColor } from '../../../../../../utils/themeWiseColor';
import { colors } from '../../../../../../styles/colors';
import { financeTableColumns } from '@/lib/project/project-view-finance-table-columns';
import Avatars from '@/components/avatars/avatars';
type FinanceTableProps = {
table: any;
@@ -132,11 +133,7 @@ const FinanceTable = ({
);
case 'members':
return (
<Avatar.Group>
{task.members.map((member: any) => (
<CustomAvatar avatarName={member.name} size={26} />
))}
</Avatar.Group>
task?.assignees && <Avatars members={task.assignees} />
);
case 'hours':
return <Typography.Text>{task.hours}</Typography.Text>;

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

@@ -1,15 +1,53 @@
import { Flex } from 'antd';
import React, { useState } from 'react';
import React, { useState, useEffect } from 'react';
import { useParams } from 'react-router-dom';
import ProjectViewFinanceHeader from './project-view-finance-header/project-view-finance-header';
import FinanceTab from './finance-tab/finance-tab';
import RatecardTab from './ratecard-tab/ratecard-tab';
import { projectFinanceApiService } from '@/api/project-finance-ratecard/project-finance.api.service';
import { IProjectFinanceGroup } from '@/types/project/project-finance.types';
type FinanceTabType = 'finance' | 'ratecard';
type GroupTypes = 'status' | 'priority' | 'phases';
interface TaskGroup {
group_id: string;
group_name: string;
tasks: any[];
}
interface FinanceTabProps {
groupType: GroupTypes;
taskGroups: TaskGroup[];
loading: boolean;
}
const ProjectViewFinance = () => {
const { projectId } = useParams<{ projectId: string }>();
const [activeTab, setActiveTab] = useState<FinanceTabType>('finance');
const [activeGroup, setActiveGroup] = useState<GroupTypes>('status');
const [loading, setLoading] = useState(false);
const [taskGroups, setTaskGroups] = useState<IProjectFinanceGroup[]>([]);
const fetchTasks = async () => {
if (!projectId) return;
try {
setLoading(true);
const response = await projectFinanceApiService.getProjectTasks(projectId, activeGroup);
if (response.done) {
setTaskGroups(response.body);
}
} catch (error) {
console.error('Error fetching tasks:', error);
} finally {
setLoading(false);
}
};
useEffect(() => {
fetchTasks();
}, [projectId, activeGroup]);
return (
<Flex vertical gap={16} style={{ overflowX: 'hidden' }}>
@@ -21,7 +59,11 @@ const ProjectViewFinance = () => {
/>
{activeTab === 'finance' ? (
<FinanceTab groupType={activeGroup} />
<FinanceTab
groupType={activeGroup}
taskGroups={taskGroups}
loading={loading}
/>
) : (
<RatecardTab />
)}

2
worklenz-frontend/src/pages/projects/projectView/members/project-view-members.tsx
View File

@@ -263,7 +263,7 @@ const ProjectViewMembers = () => {
>
{members?.total === 0 ? (
<EmptyListPlaceholder
imageSrc="https://app.worklenz.com/assets/images/empty-box.webp"
imageSrc="https://s3.us-west-2.amazonaws.com/worklenz.com/assets/empty-box.webp"
imageHeight={120}
text={t('emptyText')}
/>

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

@@ -1,4 +1,4 @@
import React, { useEffect, useState } from 'react';
import React, { useEffect, useState, useMemo, useCallback } from 'react';
import { PushpinFilled, PushpinOutlined, QuestionCircleOutlined } from '@ant-design/icons';
import { Badge, Button, ConfigProvider, Flex, Tabs, TabsProps, Tooltip } from 'antd';
import { useLocation, useNavigate, useParams, useSearchParams } from 'react-router-dom';
@@ -43,6 +43,14 @@ const ProjectView = () => {
const [pinnedTab, setPinnedTab] = useState<string>(searchParams.get('pinned_tab') || '');
const [taskid, setTaskId] = useState<string>(searchParams.get('task') || '');
const resetProjectData = useCallback(() => {
dispatch(setProjectId(null));
dispatch(resetStatuses());
dispatch(deselectAll());
dispatch(resetTaskListData());
dispatch(resetBoardData());
}, [dispatch]);
useEffect(() => {
if (projectId) {
dispatch(setProjectId(projectId));
@@ -59,9 +67,13 @@ const ProjectView = () => {
dispatch(setSelectedTaskId(taskid || ''));
dispatch(setShowTaskDrawer(true));
}
}, [dispatch, navigate, projectId, taskid]);
const pinToDefaultTab = async (itemKey: string) => {
return () => {
resetProjectData();
};
}, [dispatch, navigate, projectId, taskid, resetProjectData]);
const pinToDefaultTab = useCallback(async (itemKey: string) => {
if (!itemKey || !projectId) return;
const defaultView = itemKey === 'tasks-list' ? 'TASK_LIST' : 'BOARD';
@@ -88,9 +100,9 @@ const ProjectView = () => {
}).toString(),
});
}
};
}, [projectId, activeTab, navigate]);
const handleTabChange = (key: string) => {
const handleTabChange = useCallback((key: string) => {
setActiveTab(key);
dispatch(setProjectView(key === 'board' ? 'kanban' : 'list'));
navigate({
@@ -100,9 +112,9 @@ const ProjectView = () => {
pinned_tab: pinnedTab,
}).toString(),
});
};
}, [dispatch, location.pathname, navigate, pinnedTab]);
const tabMenuItems = tabItems.map(item => ({
const tabMenuItems = useMemo(() => tabItems.map(item => ({
key: item.key,
label: (
<Flex align="center" style={{ color: colors.skyBlue }}>
@@ -144,21 +156,17 @@ const ProjectView = () => {
</Flex>
),
children: item.element,
}));
})), [pinnedTab, pinToDefaultTab]);
const resetProjectData = () => {
dispatch(setProjectId(null));
dispatch(resetStatuses());
dispatch(deselectAll());
dispatch(resetTaskListData());
dispatch(resetBoardData());
};
useEffect(() => {
return () => {
resetProjectData();
};
}, []);
const portalElements = useMemo(() => (
<>
{createPortal(<ProjectMemberDrawer />, document.body, 'project-member-drawer')}
{createPortal(<PhaseDrawer />, document.body, 'phase-drawer')}
{createPortal(<StatusDrawer />, document.body, 'status-drawer')}
{createPortal(<TaskDrawer />, document.body, 'task-drawer')}
{createPortal(<DeleteStatusDrawer />, document.body, 'delete-status-drawer')}
</>
), []);
return (
<div style={{ marginBlockStart: 80, marginBlockEnd: 24, minHeight: '80vh' }}>
@@ -170,33 +178,11 @@ const ProjectView = () => {
items={tabMenuItems}
tabBarStyle={{ paddingInline: 0 }}
destroyInactiveTabPane={true}
// tabBarExtraContent={
// <div>
// <span style={{ position: 'relative', top: '-10px' }}>
// <Tooltip title="Members who are active on this project will be displayed here.">
// <QuestionCircleOutlined />
// </Tooltip>
// </span>
// <span
// style={{
// position: 'relative',
// right: '20px',
// top: '10px',
// }}
// >
// <Badge status="success" dot className="profile-badge" />
// </span>
// </div>
// }
/>
{createPortal(<ProjectMemberDrawer />, document.body, 'project-member-drawer')}
{createPortal(<PhaseDrawer />, document.body, 'phase-drawer')}
{createPortal(<StatusDrawer />, document.body, 'status-drawer')}
{createPortal(<TaskDrawer />, document.body, 'task-drawer')}
{createPortal(<DeleteStatusDrawer />, document.body, 'delete-status-drawer')}
{portalElements}
</div>
);
};
export default ProjectView;
export default React.memo(ProjectView);

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

@@ -81,6 +81,22 @@ const MembersTimeSheet = forwardRef<MembersTimeSheetRef>((_, ref) => {
display: false,
position: 'top' as const,
},
tooltip: {
callbacks: {
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 overUnder = member?.over_under_utilized_hours || '0.00';
return [
`${context.dataset.label}: ${hours} h`,
`Utilization: ${percent}%`,
`Over/Under Utilized: ${overUnder} h`
];
}
}
}
},
backgroundColor: 'black',
indexAxis: 'y' as const,