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

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

Browse Source 
Feature/project finance (project-ratecard-member-add)
This commit is contained in:
Chamika J
2025-05-26 08:33:29 +05:30
committed by GitHub
parent b320a7b260 21a4131faa
commit 399d8b420a
11 changed files with 457 additions and 131 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -28,6 +28,10 @@
"jobTitleColumn": "Job Title",
"ratePerHourColumn": "Rate per hour",
"ratecardPluralText": "Rate Cards",
"labourHoursColumn": "Labour Hours"
"labourHoursColumn": "Labour Hours",
"actions": "Actions",
"selectJobTitle": "Select Job Title",
"ratecardsPluralText": "Rate Card Templates"
}

3
worklenz-frontend/public/locales/en/settings/ratecard-settings.json
View File

@@ -19,6 +19,7 @@
"currency": "Currency",
"actionsColumn": "Actions",
"addAllButton": "Add All",
"removeAllButton": "Remove All"
"removeAllButton": "Remove All",
"selectJobTitle": "Select job title"
}

23
worklenz-frontend/src/api/project-finance-ratecard/project-finance-rate-cards.api.service.ts
View File

@@ -1,7 +1,7 @@
import apiClient from '@api/api-client';
import { API_BASE_URL } from '@/shared/constants';
import { IServerResponse } from '@/types/common.types';
import { IJobType } from '@/types/project/ratecard.types';
import { IJobType, JobRoleType } from '@/types/project/ratecard.types';
const rootUrl = `${API_BASE_URL}/project-rate-cards`;
@@ -21,6 +21,14 @@ export const projectRateCardApiService = {
const response = await apiClient.post<IServerResponse<IProjectRateCardRole[]>>(rootUrl, { project_id, roles });
return response.data;
},
// Insert a single role for a project
async insertOne({ project_id, job_title_id, rate }: { project_id: string; job_title_id: string; rate: number }): Promise<IServerResponse<IProjectRateCardRole>> {
const response = await apiClient.post<IServerResponse<IProjectRateCardRole>>(
`${rootUrl}/create-project-rate-card-role`,
{ project_id, job_title_id, rate }
);
return response.data;
},
// Get all roles for a project
async getFromProjectId(project_id: string): Promise<IServerResponse<IProjectRateCardRole[]>> {
@@ -46,6 +54,19 @@ export const projectRateCardApiService = {
return response.data;
},
// Update project member rate card role
async updateMemberRateCardRole(
project_id: string,
member_id: string,
project_rate_card_role_id: string
): Promise<IServerResponse<JobRoleType>> {
const response = await apiClient.put<IServerResponse<JobRoleType>>(
`${rootUrl}/project/${project_id}/members/${member_id}/rate-card-role`,
{ project_rate_card_role_id }
);
return response.data;
},
// Delete a single role by id
async deleteFromId(id: string): Promise<IServerResponse<IProjectRateCardRole>> {
const response = await apiClient.delete<IServerResponse<IProjectRateCardRole>>(`${rootUrl}/${id}`);

102
worklenz-frontend/src/components/project-ratecard/ratecard-assignee-selector.tsx Normal file
View File

@@ -0,0 +1,102 @@
import { useEffect, useRef, useState } from 'react';
import { InputRef } from 'antd/es/input';
import Dropdown from 'antd/es/dropdown';
import Card from 'antd/es/card';
import List from 'antd/es/list';
import Input from 'antd/es/input';
import Checkbox from 'antd/es/checkbox';
import Button from 'antd/es/button';
import Empty from 'antd/es/empty';
import { PlusOutlined } from '@ant-design/icons';
import SingleAvatar from '../common/single-avatar/single-avatar';
import { IProjectMemberViewModel } from '@/types/projectMember.types';
interface RateCardAssigneeSelectorProps {
projectId: string;
onChange?: (memberId: string) => void;
selectedMemberIds?: string[];
memberlist?: IProjectMemberViewModel[];
}
const RateCardAssigneeSelector = ({
projectId,
onChange,
selectedMemberIds = [],
memberlist = [],
}: RateCardAssigneeSelectorProps) => {
const membersInputRef = useRef<InputRef>(null);
const [searchQuery, setSearchQuery] = useState('');
const [members, setMembers] = useState<IProjectMemberViewModel[]>(memberlist);
useEffect(() => {
setMembers(memberlist);
}, [memberlist]);
const filteredMembers = members.filter((member) =>
member.name?.toLowerCase().includes(searchQuery.toLowerCase())
);
const dropdownContent = (
<Card styles={{ body: { padding: 8 } }}>
<Input
ref={membersInputRef}
value={searchQuery}
onChange={(e) => setSearchQuery(e.currentTarget.value)}
placeholder="Search members"
/>
<List style={{ padding: 0, maxHeight: 200, overflow: 'auto' }}>
{filteredMembers.length ? (
filteredMembers.map((member) => (
<List.Item
key={member.id}
style={{
display: 'flex',
gap: 8,
alignItems: 'center',
padding: '4px 8px',
border: 'none',
opacity: member.pending_invitation ? 0.5 : 1,
justifyContent: 'flex-start',
textAlign: 'left',
}}
>
<Checkbox
checked={selectedMemberIds.includes(member.id || '')}
disabled={member.pending_invitation}
onChange={() => onChange?.(member.id || '')}
/>
<SingleAvatar
avatarUrl={member.avatar_url}
name={member.name}
email={member.email}
/>
<span>{member.name}</span>
</List.Item>
))
) : (
<Empty description="No members found" />
)}
</List>
</Card>
);
return (
<Dropdown
overlayClassName="custom-dropdown"
trigger={['click']}
dropdownRender={() => dropdownContent}
onOpenChange={(open) => {
if (open) setTimeout(() => membersInputRef.current?.focus(), 0);
}}
>
<Button
type="dashed"
shape="circle"
size="small"
icon={<PlusOutlined style={{ fontSize: 12 }} />}
/>
</Dropdown>
);
};
export default RateCardAssigneeSelector;

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

@@ -18,7 +18,7 @@ const initialState: financeState = {
isRatecardDrawerOpen: false,
isFinanceDrawerOpen: false,
isImportRatecardsDrawerOpen: false,
currency: 'LKR',
currency: 'USD',
isRatecardsLoading: false,
isFinanceDrawerloading: false,
drawerRatecard: null,

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

@@ -25,7 +25,6 @@ export const fetchProjectRateCardRoles = createAsyncThunk(
async (project_id: string, { rejectWithValue }) => {
try {
const response = await projectRateCardApiService.getFromProjectId(project_id);
console.log('Project RateCard Roles:', response);
return response.body;
} catch (error) {
logger.error('Fetch Project RateCard Roles', error);
@@ -63,6 +62,23 @@ export const insertProjectRateCardRoles = createAsyncThunk(
}
);
export const insertProjectRateCardRole = createAsyncThunk(
'projectFinance/insertOne',
async (
{ project_id, job_title_id, rate }: { project_id: string; job_title_id: string; rate: number },
{ rejectWithValue }
) => {
try {
const response = await projectRateCardApiService.insertOne({ project_id, job_title_id, rate });
return response.body;
} catch (error) {
logger.error('Insert Project RateCard Role', error);
if (error instanceof Error) return rejectWithValue(error.message);
return rejectWithValue('Failed to insert project rate card role');
}
}
);
export const updateProjectRateCardRoleById = createAsyncThunk(
'projectFinance/updateById',
async ({ id, body }: { id: string; body: { job_title_id: string; rate: string } }, { rejectWithValue }) => {
@@ -105,6 +121,14 @@ export const deleteProjectRateCardRoleById = createAsyncThunk(
}
);
export const assignMemberToRateCardRole = createAsyncThunk(
'projectFinance/assignMemberToRateCardRole',
async ({ project_id, member_id, project_rate_card_role_id }: { project_id: string; member_id: string; project_rate_card_role_id: string }) => {
const response = await projectRateCardApiService.updateMemberRateCardRole(project_id, member_id, project_rate_card_role_id);
return response.body;
}
);
export const deleteProjectRateCardRolesByProjectId = createAsyncThunk(
'projectFinance/deleteByProjectId',
async (project_id: string, { rejectWithValue }) => {

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

@@ -43,7 +43,7 @@ const RatecardDrawer = ({
const [isAddingRole, setIsAddingRole] = useState(false);
const [selectedJobTitleId, setSelectedJobTitleId] = useState<string | undefined>(undefined);
const [searchQuery, setSearchQuery] = useState('');
const [currency, setCurrency] = useState('LKR');
const [currency, setCurrency] = useState('USD');
const [name, setName] = useState<string>('Untitled Rate Card');
const [jobTitles, setJobTitles] = useState<IJobTitlesViewModel>({});
const [pagination, setPagination] = useState<PaginationType>({
@@ -95,7 +95,7 @@ const RatecardDrawer = ({
if (type === 'update' && drawerRatecard) {
setRoles(drawerRatecard.jobRolesList || []);
setName(drawerRatecard.name || '');
setCurrency(drawerRatecard.currency || 'LKR');
setCurrency(drawerRatecard.currency || 'USD');
}
}, [drawerRatecard, type]);
@@ -121,15 +121,17 @@ const RatecardDrawer = ({
setRoles(mergedRoles);
};
const handleAddRole = () => {
// Only allow adding if there are job titles not already in roles
const existingIds = new Set(roles.map(r => r.job_title_id));
const availableJobTitles = jobTitles.data?.filter(jt => !existingIds.has(jt.id!));
if (availableJobTitles && availableJobTitles.length > 0) {
setRoles([...roles, { job_title_id: '', rate: 0 }]);
setAddingRowIndex(roles.length); // index of the new row
setAddingRowIndex(roles.length);
setIsAddingRole(true);
}
};
const handleDeleteRole = (index: number) => {
const updatedRoles = [...roles];
updatedRoles.splice(index, 1);
@@ -185,7 +187,7 @@ const RatecardDrawer = ({
} finally {
setRoles([]);
setName('Untitled Rate Card');
setCurrency('LKR');
setCurrency('USD');
}
}
};
@@ -218,6 +220,9 @@ const RatecardDrawer = ({
setAddingRowIndex(null);
}}
onBlur={() => {
if (roles[index].job_title_id === ""){
handleDeleteRole(index);
}
setEditingRowIndex(null);
setAddingRowIndex(null);
}}
@@ -239,7 +244,7 @@ const RatecardDrawer = ({
return (
<span
style={{ cursor: 'pointer' }}
onClick={() => setEditingRowIndex(index)}
// onClick={() => setEditingRowIndex(index)}
>
{record.jobtitle}
</span>
@@ -249,6 +254,7 @@ const RatecardDrawer = ({
{
title: `${t('ratePerHourColumn')} (${currency})`,
dataIndex: 'rate',
align: 'right',
render: (text: number, record: any, index: number) => (
<Input
type="number"
@@ -257,6 +263,7 @@ const RatecardDrawer = ({
background: 'transparent',
border: 'none',
boxShadow: 'none',
textAlign: 'right',
padding: 0,
}}
onChange={(e) => {
@@ -319,8 +326,8 @@ const RatecardDrawer = ({
<Select
value={currency}
options={[
{ value: 'LKR', label: 'LKR' },
{ value: 'USD', label: 'USD' },
{ value: 'LKR', label: 'LKR' },
{ value: 'INR', label: 'INR' },
]}
onChange={(value) => setCurrency(value)}
@@ -347,27 +354,7 @@ const RatecardDrawer = ({
rowKey={(record) => record.job_title_id}
pagination={false}
footer={() => (
isAddingRole ? (
<Select
showSearch
style={{ minWidth: 200 }}
placeholder={t('selectJobTitle')}
optionFilterProp="children"
value={selectedJobTitleId}
onChange={handleSelectJobTitle}
onBlur={() => setIsAddingRole(false)}
filterOption={(input, option) =>
(option?.children as string).toLowerCase().includes(input.toLowerCase())
}
>
{jobTitles.data?.map((jt) => (
<Select.Option key={jt.id} value={jt.id}>
{jt.name}
</Select.Option>
))}
</Select>
) : (
<Button
<Button
type="dashed"
onClick={handleAddRole}
block
@@ -375,7 +362,6 @@ const RatecardDrawer = ({
>
{t('addRoleButton')}
</Button>
)
)}
/>
</Drawer>

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

@@ -7,12 +7,17 @@ import { useAppDispatch } from '../../../../../../hooks/useAppDispatch';
import { useTranslation } from 'react-i18next';
import { JobRoleType, IJobType, RatecardType } from '@/types/project/ratecard.types';
import {
assignMemberToRateCardRole,
deleteProjectRateCardRoleById,
fetchProjectRateCardRoles,
insertProjectRateCardRole,
updateProjectRateCardRolesByProjectId,
} from '@/features/finance/project-finance-slice';
import { useParams } from 'react-router-dom';
import { jobTitlesApiService } from '@/api/settings/job-titles/job-titles.api.service';
import RateCardAssigneeSelector from '@/components/project-ratecard/ratecard-assignee-selector';
import { projectsApiService } from '@/api/projects/projects.api.service';
import { IProjectMemberViewModel } from '@/types/projectMember.types';
const RatecardTable: React.FC = () => {
const dispatch = useAppDispatch();
@@ -27,8 +32,42 @@ const RatecardTable: React.FC = () => {
// Local state for editing
const [roles, setRoles] = useState<JobRoleType[]>(rolesRedux);
const [addingRow, setAddingRow] = useState<boolean>(false);
const [editingIndex, setEditingIndex] = useState<number | null>(null);
const [jobTitles, setJobTitles] = useState<RatecardType[]>([]);
const [members, setMembers] = useState<IProjectMemberViewModel[]>([]);
const [isLoadingMembers, setIsLoading] = useState(false);
const pagination = {
current: 1,
pageSize: 1000,
field: 'name',
order: 'asc',
};
const getProjectMembers = async () => {
if (!projectId) return;
setIsLoading(true);
try {
const res = await projectsApiService.getMembers(
projectId,
pagination.current,
pagination.pageSize,
pagination.field,
pagination.order,
null
);
if (res.done) {
setMembers(res.body?.data || []);
}
} catch (error) {
console.error('Error fetching members:', error);
} finally {
setIsLoading(false);
}
};
useEffect(() => {
getProjectMembers();
}, [projectId]);
// Fetch job titles for selection
useEffect(() => {
@@ -40,7 +79,6 @@ const RatecardTable: React.FC = () => {
// Sync local roles with redux roles
useEffect(() => {
console.log('Roles Redux:', rolesRedux);
setRoles(rolesRedux);
}, [rolesRedux]);
@@ -59,7 +97,6 @@ const RatecardTable: React.FC = () => {
// Save all roles (bulk update)
const handleSaveAll = () => {
if (projectId) {
// Only send roles with job_title_id and rate
const filteredRoles = roles
.filter((r) => r.job_title_id && typeof r.rate !== 'undefined')
.map((r) => ({
@@ -72,20 +109,27 @@ const RatecardTable: React.FC = () => {
};
// Handle job title select for new row
const handleSelectJobTitle = (jobTitleId: string) => {
const handleSelectJobTitle = async (jobTitleId: string) => {
const jobTitle = jobTitles.find((jt) => jt.id === jobTitleId);
if (!jobTitle) return;
// Prevent duplicates
if (!jobTitle || !projectId) return;
if (roles.some((r) => r.job_title_id === jobTitleId)) return;
setRoles([
...roles,
{
job_title_id: jobTitleId,
jobtitle: jobTitle.name || '',
rate: 0,
members: [],
},
]);
const resultAction = await dispatch(
insertProjectRateCardRole({ project_id: projectId, job_title_id: jobTitleId, rate: 0 })
);
if (insertProjectRateCardRole.fulfilled.match(resultAction)) {
const newRole = resultAction.payload;
setRoles([
...roles,
{
id: newRole.id,
job_title_id: newRole.job_title_id,
jobtitle: newRole.jobtitle,
rate: newRole.rate,
members: [], // Initialize members array
},
]);
}
setAddingRow(false);
};
@@ -102,18 +146,41 @@ const RatecardTable: React.FC = () => {
if (record.id) {
dispatch(deleteProjectRateCardRoleById(record.id));
} else {
// Remove unsaved row
setRoles(roles.filter((_, idx) => idx !== index));
}
};
// Handle member change
const handleMemberChange = async (memberId: string, rowIndex: number, record: JobRoleType) => {
if (!projectId || !record.id) return; // Ensure required IDs are present
try {
const resultAction = await dispatch(
assignMemberToRateCardRole({
project_id: projectId,
member_id: memberId,
project_rate_card_role_id: record.id,
})
);
if (assignMemberToRateCardRole.fulfilled.match(resultAction)) {
const updatedMembers = resultAction.payload; // Array of member IDs
setRoles((prev) =>
prev.map((role, idx) => {
if (idx !== rowIndex) return role;
return { ...role, members: updatedMembers?.members || [] };
})
);
}
} catch (error) {
console.error('Error assigning member:', error);
}
};
// Columns
const columns: TableProps<JobRoleType>['columns'] = [
{
title: t('jobTitleColumn'),
dataIndex: 'jobtitle',
render: (text: string, record: JobRoleType, index: number) => {
// Only show Select if addingRow and this is the last row (new row)
if (addingRow && index === roles.length) {
return (
<Select
@@ -125,12 +192,12 @@ const RatecardTable: React.FC = () => {
onChange={handleSelectJobTitle}
onBlur={() => setAddingRow(false)}
filterOption={(input, option) =>
(option?.children as string).toLowerCase().includes(input.toLowerCase())
(option?.children as string)?.toLowerCase().includes(input.toLowerCase())
}
>
{jobTitles
.filter(jt => !roles.some((role) => role.job_title_id === jt.id))
.map(jt => (
.filter((jt) => !roles.some((role) => role.job_title_id === jt.id))
.map((jt) => (
<Select.Option key={jt.id} value={jt.id!}>
{jt.name}
</Select.Option>
@@ -138,19 +205,13 @@ const RatecardTable: React.FC = () => {
</Select>
);
}
return (
<span
style={{ cursor: 'pointer' }}
onClick={() => setEditingIndex(index)}
>
{text || record.name}
</span>
);
return <span>{text || record.name}</span>;
},
},
{
title: `${t('ratePerHourColumn')} (${currency})`,
dataIndex: 'rate',
align: 'right',
render: (value: number, record: JobRoleType, index: number) => (
<Input
type="number"
@@ -161,6 +222,7 @@ const RatecardTable: React.FC = () => {
boxShadow: 'none',
padding: 0,
width: 80,
textAlign: 'right',
}}
onChange={(e) => handleRateChange(e.target.value, index)}
/>
@@ -169,34 +231,31 @@ const RatecardTable: React.FC = () => {
{
title: t('membersColumn'),
dataIndex: 'members',
render: (members: string[] | null | undefined) =>
members && members.length > 0 ? (
render: (memberscol: string[] | null | undefined, record: JobRoleType, index: number) => (
<div style={{ display: 'flex', alignItems: 'center', gap: 4, position: 'relative' }}>
<Avatar.Group>
{members.map((member, i) => (
<CustomAvatar key={i} avatarName={member} size={26} />
))}
{memberscol?.map((memberId, i) => {
const member = members.find((m) => m.id === memberId);
return member ? (
<CustomAvatar key={i} avatarName={member.name} size={26} />
) : null;
})}
</Avatar.Group>
) : (
<Button
shape="circle"
icon={
<PlusOutlined
style={{
fontSize: 12,
width: 22,
height: 22,
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
}}
/>
}
/>
),
<div>
<RateCardAssigneeSelector
projectId={projectId as string}
selectedMemberIds={memberscol || []}
onChange={(memberId) => handleMemberChange(memberId, index, record)}
memberlist={members}
/>
</div>
</div>
),
},
{
title: t('actions'),
key: 'actions',
align: 'center',
render: (_: any, record: JobRoleType, index: number) => (
<Popconfirm
title={t('deleteConfirm')}
@@ -204,11 +263,7 @@ const RatecardTable: React.FC = () => {
okText={t('yes')}
cancelText={t('no')}
>
<Button
type="text"
danger
icon={<DeleteOutlined />}
/>
<Button type="text" danger icon={<DeleteOutlined />} />
</Popconfirm>
),
},
@@ -219,37 +274,33 @@ const RatecardTable: React.FC = () => {
dataSource={
addingRow
? [
...roles,
{
job_title_id: '',
jobtitle: '',
rate: 0,
members: [],
},
]
...roles,
{
job_title_id: '',
jobtitle: '',
rate: 0,
members: [],
},
]
: roles
}
columns={columns}
rowKey={(record, idx) => record.id || record.job_title_id || idx}
rowKey={(record, idx) => record.id || record.job_title_id || String(idx)}
pagination={false}
loading={isLoading}
loading={isLoading || isLoadingMembers}
footer={() => (
<Flex gap={8}>
<Button
type="dashed"
onClick={handleAddRole}
style={{ width: 'fit-content' }}
>
<Flex gap={0}>
<Button type="dashed" onClick={handleAddRole} style={{ width: 'fit-content' }}>
{t('addRoleButton')}
</Button>
<Button
{/* <Button
type="primary"
icon={<SaveOutlined />}
onClick={handleSaveAll}
disabled={roles.length === 0}
>
{t('saveButton') || 'Save'}
</Button>
</Button> */}
</Flex>
)}
/>