Merge pull request #136 from shancds/feature/project-finance
Feature/project finance rate card section
This commit is contained in:
Chamika J
123
worklenz-backend/src/controllers/project-ratecard-controller.ts
Normal file
123
worklenz-backend/src/controllers/project-ratecard-controller.ts
Normal file
@@ -0,0 +1,123 @@
|
||||
import db from "../config/db";
|
||||
import { IWorkLenzRequest } from "../interfaces/worklenz-request";
|
||||
import { IWorkLenzResponse } from "../interfaces/worklenz-response";
|
||||
import { ServerResponse } from "../models/server-response";
|
||||
import HandleExceptions from "../decorators/handle-exceptions";
|
||||
import WorklenzControllerBase from "./worklenz-controller-base";
|
||||
|
||||
export default class ProjectRateCardController extends WorklenzControllerBase {
|
||||
// Insert multiple roles for a project
|
||||
@HandleExceptions()
|
||||
public static async insertMany(req: IWorkLenzRequest, res: IWorkLenzResponse): Promise<IWorkLenzResponse> {
|
||||
const { project_id, roles } = req.body;
|
||||
if (!Array.isArray(roles) || !project_id) {
|
||||
return res.status(400).send(new ServerResponse(false, null, "Invalid input"));
|
||||
}
|
||||
const values = roles.map((role: any) => [
|
||||
project_id,
|
||||
role.job_title_id,
|
||||
role.rate
|
||||
]);
|
||||
const q = `
|
||||
INSERT INTO finance_project_rate_card_roles (project_id, job_title_id, rate)
|
||||
VALUES ${values.map((_, i) => `($${i * 3 + 1}, $${i * 3 + 2}, $${i * 3 + 3})`).join(",")}
|
||||
ON CONFLICT (project_id, job_title_id) DO UPDATE SET rate = EXCLUDED.rate
|
||||
RETURNING *,
|
||||
(SELECT name FROM job_titles jt WHERE jt.id = finance_project_rate_card_roles.job_title_id) AS Jobtitle;
|
||||
`;
|
||||
const flatValues = values.flat();
|
||||
const result = await db.query(q, flatValues);
|
||||
return res.status(200).send(new ServerResponse(true, result.rows));
|
||||
}
|
||||
|
||||
// Get all roles for a project
|
||||
@HandleExceptions()
|
||||
public static async getFromProjectId(req: IWorkLenzRequest, res: IWorkLenzResponse): Promise<IWorkLenzResponse> {
|
||||
const { project_id } = req.params;
|
||||
const q = `
|
||||
SELECT fprr.*, jt.name as jobtitle
|
||||
FROM finance_project_rate_card_roles fprr
|
||||
LEFT JOIN job_titles jt ON fprr.job_title_id = jt.id
|
||||
WHERE fprr.project_id = $1
|
||||
ORDER BY jt.name;
|
||||
`;
|
||||
const result = await db.query(q, [project_id]);
|
||||
return res.status(200).send(new ServerResponse(true, result.rows));
|
||||
}
|
||||
|
||||
// Get a single role by id
|
||||
@HandleExceptions()
|
||||
public static async getFromId(req: IWorkLenzRequest, res: IWorkLenzResponse): Promise<IWorkLenzResponse> {
|
||||
const { id } = req.params;
|
||||
const q = `
|
||||
SELECT fprr.*, jt.name as jobtitle
|
||||
FROM finance_project_rate_card_roles fprr
|
||||
LEFT JOIN job_titles jt ON fprr.job_title_id = jt.id
|
||||
WHERE fprr.id = $1;
|
||||
`;
|
||||
const result = await db.query(q, [id]);
|
||||
return res.status(200).send(new ServerResponse(true, result.rows[0]));
|
||||
}
|
||||
|
||||
// Update a single role by id
|
||||
@HandleExceptions()
|
||||
public static async updateFromId(req: IWorkLenzRequest, res: IWorkLenzResponse): Promise<IWorkLenzResponse> {
|
||||
const { id } = req.params;
|
||||
const { job_title_id, rate } = req.body;
|
||||
const q = `
|
||||
UPDATE finance_project_rate_card_roles
|
||||
SET job_title_id = $1, rate = $2, updated_at = NOW()
|
||||
WHERE id = $3
|
||||
RETURNING *;
|
||||
`;
|
||||
const result = await db.query(q, [job_title_id, rate, id]);
|
||||
return res.status(200).send(new ServerResponse(true, result.rows[0]));
|
||||
}
|
||||
|
||||
// Update all roles for a project (delete then insert)
|
||||
@HandleExceptions()
|
||||
public static async updateFromProjectId(req: IWorkLenzRequest, res: IWorkLenzResponse): Promise<IWorkLenzResponse> {
|
||||
const { project_id, roles } = req.body;
|
||||
if (!Array.isArray(roles) || !project_id) {
|
||||
return res.status(400).send(new ServerResponse(false, null, "Invalid input"));
|
||||
}
|
||||
// Delete existing
|
||||
await db.query(`DELETE FROM finance_project_rate_card_roles WHERE project_id = $1`, [project_id]);
|
||||
// Insert new
|
||||
if (roles.length === 0) {
|
||||
return res.status(200).send(new ServerResponse(true, []));
|
||||
}
|
||||
const values = roles.map((role: any) => [
|
||||
project_id,
|
||||
role.job_title_id,
|
||||
role.rate
|
||||
]);
|
||||
const q = `
|
||||
INSERT INTO finance_project_rate_card_roles (project_id, job_title_id, rate)
|
||||
VALUES ${values.map((_, i) => `($${i * 3 + 1}, $${i * 3 + 2}, $${i * 3 + 3})`).join(",")}
|
||||
RETURNING *,
|
||||
(SELECT name FROM job_titles jt WHERE jt.id = finance_project_rate_card_roles.job_title_id) AS jobtitle;
|
||||
`;
|
||||
const flatValues = values.flat();
|
||||
const result = await db.query(q, flatValues);
|
||||
return res.status(200).send(new ServerResponse(true, result.rows));
|
||||
}
|
||||
|
||||
// Delete a single role by id
|
||||
@HandleExceptions()
|
||||
public static async deleteFromId(req: IWorkLenzRequest, res: IWorkLenzResponse): Promise<IWorkLenzResponse> {
|
||||
const { id } = req.params;
|
||||
const q = `DELETE FROM finance_project_rate_card_roles WHERE id = $1 RETURNING *;`;
|
||||
const result = await db.query(q, [id]);
|
||||
return res.status(200).send(new ServerResponse(true, result.rows[0]));
|
||||
}
|
||||
|
||||
// Delete all roles for a project
|
||||
@HandleExceptions()
|
||||
public static async deleteFromProjectId(req: IWorkLenzRequest, res: IWorkLenzResponse): Promise<IWorkLenzResponse> {
|
||||
const { project_id } = req.params;
|
||||
const q = `DELETE FROM finance_project_rate_card_roles WHERE project_id = $1 RETURNING *;`;
|
||||
const result = await db.query(q, [project_id]);
|
||||
return res.status(200).send(new ServerResponse(true, result.rows));
|
||||
}
|
||||
}
|
||||
@@ -59,6 +59,7 @@ import taskRecurringApiRouter from "./task-recurring-api-router";
|
||||
|
||||
import customColumnsApiRouter from "./custom-columns-api-router";
|
||||
import ratecardApiRouter from "./ratecard-api-router";
|
||||
import projectRatecardApiRouter from "./project-ratecard-api-router";
|
||||
|
||||
const api = express.Router();
|
||||
|
||||
@@ -67,6 +68,7 @@ api.use("/team-members", teamMembersApiRouter);
|
||||
api.use("/job-titles", jobTitlesApiRouter);
|
||||
api.use("/clients", clientsApiRouter);
|
||||
api.use("/rate-cards", ratecardApiRouter);
|
||||
api.use("/project-rate-cards", projectRatecardApiRouter);
|
||||
api.use("/teams", teamsApiRouter);
|
||||
api.use("/tasks", tasksApiRouter);
|
||||
api.use("/settings", settingsApiRouter);
|
||||
|
||||
@@ -0,0 +1,55 @@
|
||||
import express from "express";
|
||||
import ProjectRateCardController from "../../controllers/project-ratecard-controller";
|
||||
import idParamValidator from "../../middlewares/validators/id-param-validator";
|
||||
import safeControllerFunction from "../../shared/safe-controller-function";
|
||||
import projectManagerValidator from "../../middlewares/validators/project-manager-validator";
|
||||
|
||||
const projectRatecardApiRouter = express.Router();
|
||||
|
||||
// Insert multiple roles for a project
|
||||
projectRatecardApiRouter.post(
|
||||
"/",
|
||||
projectManagerValidator,
|
||||
safeControllerFunction(ProjectRateCardController.insertMany)
|
||||
);
|
||||
|
||||
// Get all roles for a project
|
||||
projectRatecardApiRouter.get(
|
||||
"/project/:project_id",
|
||||
safeControllerFunction(ProjectRateCardController.getFromProjectId)
|
||||
);
|
||||
|
||||
// Get a single role by id
|
||||
projectRatecardApiRouter.get(
|
||||
"/:id",
|
||||
idParamValidator,
|
||||
safeControllerFunction(ProjectRateCardController.getFromId)
|
||||
);
|
||||
|
||||
// Update a single role by id
|
||||
projectRatecardApiRouter.put(
|
||||
"/:id",
|
||||
idParamValidator,
|
||||
safeControllerFunction(ProjectRateCardController.updateFromId)
|
||||
);
|
||||
|
||||
// Update all roles for a project (delete then insert)
|
||||
projectRatecardApiRouter.put(
|
||||
"/project/:project_id",
|
||||
safeControllerFunction(ProjectRateCardController.updateFromProjectId)
|
||||
);
|
||||
|
||||
// Delete a single role by id
|
||||
projectRatecardApiRouter.delete(
|
||||
"/:id",
|
||||
idParamValidator,
|
||||
safeControllerFunction(ProjectRateCardController.deleteFromId)
|
||||
);
|
||||
|
||||
// Delete all roles for a project
|
||||
projectRatecardApiRouter.delete(
|
||||
"/project/:project_id",
|
||||
safeControllerFunction(ProjectRateCardController.deleteFromProjectId)
|
||||
);
|
||||
|
||||
export default projectRatecardApiRouter;
|
||||
@@ -16,5 +16,9 @@
|
||||
"createRatecardErrorMessage": "Create Rate Card failed!",
|
||||
"updateRatecardSuccessMessage": "Update Rate Card success!",
|
||||
"updateRatecardErrorMessage": "Update Rate Card failed!",
|
||||
"currency": "Currency"
|
||||
"currency": "Currency",
|
||||
"actionsColumn": "Actions",
|
||||
"addAllButton": "Add All",
|
||||
"removeAllButton": "Remove All"
|
||||
|
||||
}
|
||||
|
||||
@@ -0,0 +1,60 @@
|
||||
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';
|
||||
|
||||
const rootUrl = `${API_BASE_URL}/project-rate-cards`;
|
||||
|
||||
export interface IProjectRateCardRole {
|
||||
id?: string;
|
||||
project_id: string;
|
||||
job_title_id: string;
|
||||
jobtitle?: string;
|
||||
rate: number;
|
||||
data?: object;
|
||||
roles?: IJobType[];
|
||||
}
|
||||
|
||||
export const projectRateCardApiService = {
|
||||
// Insert multiple roles for a project
|
||||
async insertMany(project_id: string, roles: Omit<IProjectRateCardRole, 'id' | 'project_id'>[]): Promise<IServerResponse<IProjectRateCardRole[]>> {
|
||||
const response = await apiClient.post<IServerResponse<IProjectRateCardRole[]>>(rootUrl, { project_id, roles });
|
||||
return response.data;
|
||||
},
|
||||
|
||||
// Get all roles for a project
|
||||
async getFromProjectId(project_id: string): Promise<IServerResponse<IProjectRateCardRole[]>> {
|
||||
const response = await apiClient.get<IServerResponse<IProjectRateCardRole[]>>(`${rootUrl}/project/${project_id}`);
|
||||
return response.data;
|
||||
},
|
||||
|
||||
// Get a single role by id
|
||||
async getFromId(id: string): Promise<IServerResponse<IProjectRateCardRole>> {
|
||||
const response = await apiClient.get<IServerResponse<IProjectRateCardRole>>(`${rootUrl}/${id}`);
|
||||
return response.data;
|
||||
},
|
||||
|
||||
// Update a single role by id
|
||||
async updateFromId(id: string, body: { job_title_id: string; rate: string }): Promise<IServerResponse<IProjectRateCardRole>> {
|
||||
const response = await apiClient.put<IServerResponse<IProjectRateCardRole>>(`${rootUrl}/${id}`, body);
|
||||
return response.data;
|
||||
},
|
||||
|
||||
// Update all roles for a project (delete then insert)
|
||||
async updateFromProjectId(project_id: string, roles: Omit<IProjectRateCardRole, 'id' | 'project_id'>[]): Promise<IServerResponse<IProjectRateCardRole[]>> {
|
||||
const response = await apiClient.put<IServerResponse<IProjectRateCardRole[]>>(`${rootUrl}/project/${project_id}`, { project_id, roles });
|
||||
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}`);
|
||||
return response.data;
|
||||
},
|
||||
|
||||
// Delete all roles for a project
|
||||
async deleteFromProjectId(project_id: string): Promise<IServerResponse<IProjectRateCardRole[]>> {
|
||||
const response = await apiClient.delete<IServerResponse<IProjectRateCardRole[]>>(`${rootUrl}/project/${project_id}`);
|
||||
return response.data;
|
||||
},
|
||||
};
|
||||
@@ -72,6 +72,7 @@ import timeReportsOverviewReducer from '@features/reporting/time-reports/time-re
|
||||
import financeReducer from '../features/finance/finance-slice';
|
||||
import roadmapReducer from '../features/roadmap/roadmap-slice';
|
||||
import teamMembersReducer from '@features/team-members/team-members.slice';
|
||||
import projectFinanceRateCardReducer from '../features/finance/project-finance-slice';
|
||||
import groupByFilterDropdownReducer from '../features/group-by-filter-dropdown/group-by-filter-dropdown-slice';
|
||||
import homePageApiService from '@/api/home-page/home-page.api.service';
|
||||
import { projectsApi } from '@/api/projects/projects.v1.api.service';
|
||||
@@ -156,6 +157,7 @@ export const store = configureStore({
|
||||
groupByFilterDropdownReducer: groupByFilterDropdownReducer,
|
||||
timeReportsOverviewReducer: timeReportsOverviewReducer,
|
||||
financeReducer: financeReducer,
|
||||
projectFinanceRateCard: projectFinanceRateCardReducer,
|
||||
},
|
||||
});
|
||||
|
||||
|
||||
@@ -8,8 +8,10 @@ type financeState = {
|
||||
isFinanceDrawerOpen: boolean;
|
||||
isImportRatecardsDrawerOpen: boolean;
|
||||
currency: string;
|
||||
isRatecardsLoading?: boolean;
|
||||
isFinanceDrawerloading?: boolean;
|
||||
drawerRatecard?: RatecardType | null;
|
||||
ratecardsList?: RatecardType[] | null;
|
||||
};
|
||||
|
||||
const initialState: financeState = {
|
||||
@@ -17,8 +19,10 @@ const initialState: financeState = {
|
||||
isFinanceDrawerOpen: false,
|
||||
isImportRatecardsDrawerOpen: false,
|
||||
currency: 'LKR',
|
||||
isRatecardsLoading: false,
|
||||
isFinanceDrawerloading: false,
|
||||
drawerRatecard: null,
|
||||
ratecardsList: null,
|
||||
};
|
||||
interface FetchRateCardsParams {
|
||||
index: number;
|
||||
@@ -139,7 +143,21 @@ const financeSlice = createSlice({
|
||||
},
|
||||
extraReducers: (builder) => {
|
||||
builder
|
||||
// ...other cases...
|
||||
.addCase(fetchRateCards.pending, (state) => {
|
||||
state.isRatecardsLoading = true;
|
||||
})
|
||||
.addCase(fetchRateCards.fulfilled, (state, action) => {
|
||||
state.isRatecardsLoading = false;
|
||||
state.ratecardsList = Array.isArray(action.payload.data)
|
||||
? action.payload.data
|
||||
: Array.isArray(action.payload)
|
||||
? action.payload
|
||||
: [];
|
||||
})
|
||||
.addCase(fetchRateCards.rejected, (state) => {
|
||||
state.isRatecardsLoading = false;
|
||||
state.ratecardsList = [];
|
||||
})
|
||||
.addCase(fetchRateCardById.pending, (state) => {
|
||||
state.isFinanceDrawerloading = true;
|
||||
state.drawerRatecard = null;
|
||||
|
||||
247
worklenz-frontend/src/features/finance/project-finance-slice.ts
Normal file
247
worklenz-frontend/src/features/finance/project-finance-slice.ts
Normal file
@@ -0,0 +1,247 @@
|
||||
import { createAsyncThunk, createSlice, PayloadAction } from '@reduxjs/toolkit';
|
||||
import { projectRateCardApiService, IProjectRateCardRole } from '@/api/project-finance-ratecard/project-finance-rate-cards.api.service';
|
||||
import logger from '@/utils/errorLogger';
|
||||
import { JobRoleType } from '@/types/project/ratecard.types';
|
||||
|
||||
type ProjectFinanceRateCardState = {
|
||||
isDrawerOpen: boolean;
|
||||
isLoading: boolean;
|
||||
rateCardRoles: JobRoleType[] | null;
|
||||
drawerRole: IProjectRateCardRole | null;
|
||||
error?: string | null;
|
||||
};
|
||||
|
||||
const initialState: ProjectFinanceRateCardState = {
|
||||
isDrawerOpen: false,
|
||||
isLoading: false,
|
||||
rateCardRoles: null,
|
||||
drawerRole: null,
|
||||
error: null,
|
||||
};
|
||||
|
||||
// Async thunks
|
||||
export const fetchProjectRateCardRoles = createAsyncThunk(
|
||||
'projectFinance/fetchAll',
|
||||
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);
|
||||
if (error instanceof Error) return rejectWithValue(error.message);
|
||||
return rejectWithValue('Failed to fetch project rate card roles');
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
export const fetchProjectRateCardRoleById = createAsyncThunk(
|
||||
'projectFinance/fetchById',
|
||||
async (id: string, { rejectWithValue }) => {
|
||||
try {
|
||||
const response = await projectRateCardApiService.getFromId(id);
|
||||
return response.body;
|
||||
} catch (error) {
|
||||
logger.error('Fetch Project RateCard Role By Id', error);
|
||||
if (error instanceof Error) return rejectWithValue(error.message);
|
||||
return rejectWithValue('Failed to fetch project rate card role');
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
export const insertProjectRateCardRoles = createAsyncThunk(
|
||||
'projectFinance/insertMany',
|
||||
async ({ project_id, roles }: { project_id: string; roles: Omit<IProjectRateCardRole, 'id' | 'project_id'>[] }, { rejectWithValue }) => {
|
||||
try {
|
||||
const response = await projectRateCardApiService.insertMany(project_id, roles);
|
||||
return response.body;
|
||||
} catch (error) {
|
||||
logger.error('Insert Project RateCard Roles', error);
|
||||
if (error instanceof Error) return rejectWithValue(error.message);
|
||||
return rejectWithValue('Failed to insert project rate card roles');
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
export const updateProjectRateCardRoleById = createAsyncThunk(
|
||||
'projectFinance/updateById',
|
||||
async ({ id, body }: { id: string; body: { job_title_id: string; rate: string } }, { rejectWithValue }) => {
|
||||
try {
|
||||
const response = await projectRateCardApiService.updateFromId(id, body);
|
||||
return response.body;
|
||||
} catch (error) {
|
||||
logger.error('Update Project RateCard Role By Id', error);
|
||||
if (error instanceof Error) return rejectWithValue(error.message);
|
||||
return rejectWithValue('Failed to update project rate card role');
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
export const updateProjectRateCardRolesByProjectId = createAsyncThunk(
|
||||
'projectFinance/updateByProjectId',
|
||||
async ({ project_id, roles }: { project_id: string; roles: Omit<IProjectRateCardRole, 'id' | 'project_id'>[] }, { rejectWithValue }) => {
|
||||
try {
|
||||
const response = await projectRateCardApiService.updateFromProjectId(project_id, roles);
|
||||
return response.body;
|
||||
} catch (error) {
|
||||
logger.error('Update Project RateCard Roles By ProjectId', error);
|
||||
if (error instanceof Error) return rejectWithValue(error.message);
|
||||
return rejectWithValue('Failed to update project rate card roles');
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
export const deleteProjectRateCardRoleById = createAsyncThunk(
|
||||
'projectFinance/deleteById',
|
||||
async (id: string, { rejectWithValue }) => {
|
||||
try {
|
||||
const response = await projectRateCardApiService.deleteFromId(id);
|
||||
return response.body;
|
||||
} catch (error) {
|
||||
logger.error('Delete Project RateCard Role By Id', error);
|
||||
if (error instanceof Error) return rejectWithValue(error.message);
|
||||
return rejectWithValue('Failed to delete project rate card role');
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
export const deleteProjectRateCardRolesByProjectId = createAsyncThunk(
|
||||
'projectFinance/deleteByProjectId',
|
||||
async (project_id: string, { rejectWithValue }) => {
|
||||
try {
|
||||
const response = await projectRateCardApiService.deleteFromProjectId(project_id);
|
||||
return response.body;
|
||||
} catch (error) {
|
||||
logger.error('Delete Project RateCard Roles By ProjectId', error);
|
||||
if (error instanceof Error) return rejectWithValue(error.message);
|
||||
return rejectWithValue('Failed to delete project rate card roles');
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
const projectFinanceSlice = createSlice({
|
||||
name: 'projectFinanceRateCard',
|
||||
initialState,
|
||||
reducers: {
|
||||
toggleDrawer: (state) => {
|
||||
state.isDrawerOpen = !state.isDrawerOpen;
|
||||
},
|
||||
clearDrawerRole: (state) => {
|
||||
state.drawerRole = null;
|
||||
},
|
||||
clearError: (state) => {
|
||||
state.error = null;
|
||||
},
|
||||
},
|
||||
extraReducers: (builder) => {
|
||||
builder
|
||||
// Fetch all
|
||||
.addCase(fetchProjectRateCardRoles.pending, (state) => {
|
||||
state.isLoading = true;
|
||||
state.error = null;
|
||||
})
|
||||
.addCase(fetchProjectRateCardRoles.fulfilled, (state, action) => {
|
||||
state.isLoading = false;
|
||||
state.rateCardRoles = action.payload || [];
|
||||
})
|
||||
.addCase(fetchProjectRateCardRoles.rejected, (state, action) => {
|
||||
state.isLoading = false;
|
||||
state.error = action.payload as string;
|
||||
state.rateCardRoles = [];
|
||||
})
|
||||
// Fetch by id
|
||||
.addCase(fetchProjectRateCardRoleById.pending, (state) => {
|
||||
state.isLoading = true;
|
||||
state.drawerRole = null;
|
||||
state.error = null;
|
||||
})
|
||||
.addCase(fetchProjectRateCardRoleById.fulfilled, (state, action) => {
|
||||
state.isLoading = false;
|
||||
state.drawerRole = action.payload || null;
|
||||
})
|
||||
.addCase(fetchProjectRateCardRoleById.rejected, (state, action) => {
|
||||
state.isLoading = false;
|
||||
state.error = action.payload as string;
|
||||
state.drawerRole = null;
|
||||
})
|
||||
// Insert many
|
||||
.addCase(insertProjectRateCardRoles.pending, (state) => {
|
||||
state.isLoading = true;
|
||||
state.error = null;
|
||||
})
|
||||
.addCase(insertProjectRateCardRoles.fulfilled, (state, action) => {
|
||||
state.isLoading = false;
|
||||
state.rateCardRoles = action.payload || [];
|
||||
})
|
||||
.addCase(insertProjectRateCardRoles.rejected, (state, action) => {
|
||||
state.isLoading = false;
|
||||
state.error = action.payload as string;
|
||||
})
|
||||
// Update by id
|
||||
.addCase(updateProjectRateCardRoleById.pending, (state) => {
|
||||
state.isLoading = true;
|
||||
state.error = null;
|
||||
})
|
||||
.addCase(updateProjectRateCardRoleById.fulfilled, (state, action) => {
|
||||
state.isLoading = false;
|
||||
if (state.rateCardRoles && action.payload) {
|
||||
state.rateCardRoles = state.rateCardRoles.map((role) =>
|
||||
role.id === action.payload.id ? action.payload : role
|
||||
);
|
||||
}
|
||||
})
|
||||
.addCase(updateProjectRateCardRoleById.rejected, (state, action) => {
|
||||
state.isLoading = false;
|
||||
state.error = action.payload as string;
|
||||
})
|
||||
// Update by project id
|
||||
.addCase(updateProjectRateCardRolesByProjectId.pending, (state) => {
|
||||
state.isLoading = true;
|
||||
state.error = null;
|
||||
})
|
||||
.addCase(updateProjectRateCardRolesByProjectId.fulfilled, (state, action) => {
|
||||
state.isLoading = false;
|
||||
state.rateCardRoles = action.payload || [];
|
||||
})
|
||||
.addCase(updateProjectRateCardRolesByProjectId.rejected, (state, action) => {
|
||||
state.isLoading = false;
|
||||
state.error = action.payload as string;
|
||||
})
|
||||
// Delete by id
|
||||
.addCase(deleteProjectRateCardRoleById.pending, (state) => {
|
||||
state.isLoading = true;
|
||||
state.error = null;
|
||||
})
|
||||
.addCase(deleteProjectRateCardRoleById.fulfilled, (state, action) => {
|
||||
state.isLoading = false;
|
||||
if (state.rateCardRoles && action.payload) {
|
||||
state.rateCardRoles = state.rateCardRoles.filter((role) => role.id !== action.payload.id);
|
||||
}
|
||||
})
|
||||
.addCase(deleteProjectRateCardRoleById.rejected, (state, action) => {
|
||||
state.isLoading = false;
|
||||
state.error = action.payload as string;
|
||||
})
|
||||
// Delete by project id
|
||||
.addCase(deleteProjectRateCardRolesByProjectId.pending, (state) => {
|
||||
state.isLoading = true;
|
||||
state.error = null;
|
||||
})
|
||||
.addCase(deleteProjectRateCardRolesByProjectId.fulfilled, (state) => {
|
||||
state.isLoading = false;
|
||||
state.rateCardRoles = [];
|
||||
})
|
||||
.addCase(deleteProjectRateCardRolesByProjectId.rejected, (state, action) => {
|
||||
state.isLoading = false;
|
||||
state.error = action.payload as string;
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
export const {
|
||||
toggleDrawer,
|
||||
clearDrawerRole,
|
||||
clearError,
|
||||
} = projectFinanceSlice.actions;
|
||||
|
||||
export default projectFinanceSlice.reducer;
|
||||
@@ -1,47 +1,68 @@
|
||||
import { Drawer, Typography, Button, Table, Menu, Flex } from 'antd';
|
||||
import { Drawer, Typography, Button, Table, Menu, Flex, Spin } from 'antd';
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { useAppSelector } from '../../../hooks/useAppSelector';
|
||||
import { useAppDispatch } from '../../../hooks/useAppDispatch';
|
||||
import { fetchData } from '../../../utils/fetchData';
|
||||
import { toggleImportRatecardsDrawer } from '../finance-slice';
|
||||
import { RatecardType } from '@/types/project/ratecard.types';
|
||||
const ImportRatecardsDrawer: React.FC = () => {
|
||||
const [ratecardsList, setRatecardsList] = useState<RatecardType[]>([]);
|
||||
const [selectedRatecardId, setSelectedRatecardId] = useState<string | null>(
|
||||
null
|
||||
);
|
||||
import { fetchRateCards, toggleImportRatecardsDrawer } from '../finance-slice';
|
||||
import { fetchRateCardById } from '../finance-slice';
|
||||
import { insertProjectRateCardRoles } from '../project-finance-slice';
|
||||
import { useParams } from 'react-router-dom';
|
||||
|
||||
// localization
|
||||
const ImportRatecardsDrawer: React.FC = () => {
|
||||
const dispatch = useAppDispatch();
|
||||
const { projectId } = useParams();
|
||||
const { t } = useTranslation('project-view-finance');
|
||||
|
||||
// get drawer state from client reducer
|
||||
const drawerRatecard = useAppSelector(
|
||||
(state) => state.financeReducer.drawerRatecard
|
||||
);
|
||||
const ratecardsList = useAppSelector(
|
||||
(state) => state.financeReducer.ratecardsList || []
|
||||
);
|
||||
const isDrawerOpen = useAppSelector(
|
||||
(state) => state.financeReducer.isImportRatecardsDrawerOpen
|
||||
);
|
||||
const dispatch = useAppDispatch();
|
||||
|
||||
// fetch rate cards data
|
||||
useEffect(() => {
|
||||
fetchData('/finance-mock-data/ratecards-data.json', setRatecardsList);
|
||||
}, []);
|
||||
|
||||
// get currently using currency from finance reducer
|
||||
const currency = useAppSelector(
|
||||
(state) => state.financeReducer.currency
|
||||
).toUpperCase();
|
||||
|
||||
// find the selected rate card's job roles
|
||||
const selectedRatecard =
|
||||
ratecardsList.find(
|
||||
(ratecard) => ratecard.ratecardId === selectedRatecardId
|
||||
) || null;
|
||||
const rolesRedux = useAppSelector((state) => state.projectFinanceRateCard.rateCardRoles) || [];
|
||||
|
||||
// Loading states
|
||||
const isRatecardsLoading = useAppSelector(
|
||||
(state) => state.financeReducer.isRatecardsLoading
|
||||
);
|
||||
|
||||
const [selectedRatecardId, setSelectedRatecardId] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (selectedRatecardId) {
|
||||
dispatch(fetchRateCardById(selectedRatecardId));
|
||||
}
|
||||
}, [selectedRatecardId, dispatch]);
|
||||
|
||||
useEffect(() => {
|
||||
if (isDrawerOpen) {
|
||||
dispatch(fetchRateCards({
|
||||
index: 1,
|
||||
size: 1000,
|
||||
field: 'name',
|
||||
order: 'asc',
|
||||
search: '',
|
||||
}));
|
||||
}
|
||||
}, [isDrawerOpen, dispatch]);
|
||||
|
||||
useEffect(() => {
|
||||
if (ratecardsList.length > 0 && !selectedRatecardId) {
|
||||
setSelectedRatecardId(ratecardsList[0].id || null);
|
||||
}
|
||||
}, [ratecardsList, selectedRatecardId]);
|
||||
|
||||
// table columns
|
||||
const columns = [
|
||||
{
|
||||
title: t('jobTitleColumn'),
|
||||
dataIndex: 'jobTitle',
|
||||
dataIndex: 'jobtitle',
|
||||
render: (text: string) => (
|
||||
<Typography.Text className="group-hover:text-[#1890ff]">
|
||||
{text}
|
||||
@@ -50,7 +71,7 @@ const ImportRatecardsDrawer: React.FC = () => {
|
||||
},
|
||||
{
|
||||
title: `${t('ratePerHourColumn')} (${currency})`,
|
||||
dataIndex: 'ratePerHour',
|
||||
dataIndex: 'rate',
|
||||
render: (text: number) => <Typography.Text>{text}</Typography.Text>,
|
||||
},
|
||||
];
|
||||
@@ -64,7 +85,32 @@ const ImportRatecardsDrawer: React.FC = () => {
|
||||
}
|
||||
footer={
|
||||
<div style={{ textAlign: 'right' }}>
|
||||
<Button type="primary">Import</Button>
|
||||
<Button
|
||||
type="primary"
|
||||
disabled={rolesRedux.length !== 0}
|
||||
onClick={() => {
|
||||
if (!projectId) {
|
||||
// Handle missing project id (show error, etc.)
|
||||
return;
|
||||
}
|
||||
if (drawerRatecard?.jobRolesList?.length) {
|
||||
dispatch(
|
||||
insertProjectRateCardRoles({
|
||||
project_id: projectId,
|
||||
roles: drawerRatecard.jobRolesList
|
||||
.filter((role) => typeof role.rate !== 'undefined')
|
||||
.map((role) => ({
|
||||
...role,
|
||||
rate: Number(role.rate),
|
||||
})),
|
||||
})
|
||||
);
|
||||
}
|
||||
dispatch(toggleImportRatecardsDrawer());
|
||||
}}
|
||||
>
|
||||
{t('import')}
|
||||
</Button>
|
||||
</div>
|
||||
}
|
||||
open={isDrawerOpen}
|
||||
@@ -72,43 +118,44 @@ const ImportRatecardsDrawer: React.FC = () => {
|
||||
width={1000}
|
||||
>
|
||||
<Flex gap={12}>
|
||||
{/* sidebar menu */}
|
||||
<Menu
|
||||
mode="vertical"
|
||||
style={{ width: '20%' }}
|
||||
selectedKeys={
|
||||
selectedRatecardId
|
||||
? [selectedRatecardId]
|
||||
: [ratecardsList[0]?.ratecardId]
|
||||
}
|
||||
onClick={({ key }) => setSelectedRatecardId(key)}
|
||||
>
|
||||
{ratecardsList.map((ratecard) => (
|
||||
<Menu.Item key={ratecard.ratecardId}>
|
||||
{ratecard.ratecardName}
|
||||
</Menu.Item>
|
||||
))}
|
||||
</Menu>
|
||||
{/* Sidebar menu with loading */}
|
||||
<Spin spinning={isRatecardsLoading} style={{ width: '20%' }}>
|
||||
<Menu
|
||||
mode="vertical"
|
||||
style={{ width: '100%' }}
|
||||
selectedKeys={
|
||||
selectedRatecardId
|
||||
? [selectedRatecardId]
|
||||
: ratecardsList[0]?.id
|
||||
? [ratecardsList[0].id]
|
||||
: []
|
||||
}
|
||||
onClick={({ key }) => setSelectedRatecardId(key)}
|
||||
>
|
||||
{ratecardsList.map((ratecard) => (
|
||||
<Menu.Item key={ratecard.id}>
|
||||
{ratecard.name}
|
||||
</Menu.Item>
|
||||
))}
|
||||
</Menu>
|
||||
</Spin>
|
||||
|
||||
{/* table for job roles */}
|
||||
{/* Table for job roles with loading */}
|
||||
<Table
|
||||
style={{ flex: 1 }}
|
||||
dataSource={selectedRatecard?.jobRolesList || []}
|
||||
dataSource={drawerRatecard?.jobRolesList || []}
|
||||
columns={columns}
|
||||
rowKey={(record) => record.jobId}
|
||||
onRow={() => {
|
||||
return {
|
||||
className: 'group',
|
||||
style: {
|
||||
cursor: 'pointer',
|
||||
},
|
||||
};
|
||||
}}
|
||||
rowKey={(record) => record.job_title_id}
|
||||
onRow={() => ({
|
||||
className: 'group',
|
||||
style: { cursor: 'pointer' },
|
||||
})}
|
||||
pagination={false}
|
||||
loading={isRatecardsLoading}
|
||||
/>
|
||||
</Flex>
|
||||
</Drawer>
|
||||
);
|
||||
};
|
||||
|
||||
export default ImportRatecardsDrawer;
|
||||
export default ImportRatecardsDrawer;
|
||||
@@ -3,10 +3,9 @@ import React, { useEffect, useMemo, useState } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { useAppSelector } from '../../../hooks/useAppSelector';
|
||||
import { useAppDispatch } from '../../../hooks/useAppDispatch';
|
||||
import { clearDrawerRatecard, fetchRateCardById, fetchRateCards, toggleRatecardDrawer, updateRateCard } from '../finance-slice';
|
||||
import { deleteRateCard, fetchRateCardById, fetchRateCards, toggleRatecardDrawer, updateRateCard } from '../finance-slice';
|
||||
import { RatecardType, IJobType } from '@/types/project/ratecard.types';
|
||||
import { IJobTitlesViewModel } from '@/types/job.types';
|
||||
import { DEFAULT_PAGE_SIZE } from '@/shared/constants';
|
||||
import { jobTitlesApiService } from '@/api/settings/job-titles/job-titles.api.service';
|
||||
import { DeleteOutlined } from '@ant-design/icons';
|
||||
|
||||
@@ -31,7 +30,7 @@ const RatecardDrawer = ({
|
||||
const [ratecardsList, setRatecardsList] = useState<RatecardType[]>([]);
|
||||
// initial Job Roles List (dummy data)
|
||||
const [roles, setRoles] = useState<IJobType[]>([]);
|
||||
|
||||
const [addingRowIndex, setAddingRowIndex] = useState<number | null>(null);
|
||||
const { t } = useTranslation('settings/ratecard-settings');
|
||||
// get drawer state from client reducer
|
||||
const drawerLoading = useAppSelector(state => state.financeReducer.isFinanceDrawerloading);
|
||||
@@ -49,13 +48,14 @@ const RatecardDrawer = ({
|
||||
const [jobTitles, setJobTitles] = useState<IJobTitlesViewModel>({});
|
||||
const [pagination, setPagination] = useState<PaginationType>({
|
||||
current: 1,
|
||||
pageSize: DEFAULT_PAGE_SIZE,
|
||||
pageSize: 10000,
|
||||
field: 'name',
|
||||
order: 'desc',
|
||||
total: 0,
|
||||
pageSizeOptions: ['5', '10', '15', '20', '50', '100'],
|
||||
size: 'small',
|
||||
});
|
||||
const [editingRowIndex, setEditingRowIndex] = useState<number | null>(null);
|
||||
|
||||
const getJobTitles = useMemo(() => {
|
||||
return async () => {
|
||||
@@ -102,23 +102,33 @@ const RatecardDrawer = ({
|
||||
// Add All handler
|
||||
const handleAddAllRoles = () => {
|
||||
if (!jobTitles.data) return;
|
||||
// Filter out job titles already in roles
|
||||
// Get current job_title_ids in roles
|
||||
const existingIds = new Set(roles.map(r => r.job_title_id));
|
||||
// Only add job titles not already present
|
||||
const newRoles = jobTitles.data
|
||||
.filter(jt => !existingIds.has(jt.id!))
|
||||
.filter(jt => jt.id && !existingIds.has(jt.id))
|
||||
.map(jt => ({
|
||||
jobtitle: jt.name,
|
||||
rate_card_id: ratecardId,
|
||||
job_title_id: jt.id!,
|
||||
rate: 0,
|
||||
}));
|
||||
setRoles([...roles, ...newRoles]);
|
||||
// Prevent any accidental duplicates by merging and filtering again
|
||||
const mergedRoles = [...roles, ...newRoles].filter(
|
||||
(role, idx, arr) =>
|
||||
arr.findIndex(r => r.job_title_id === role.job_title_id) === idx
|
||||
);
|
||||
setRoles(mergedRoles);
|
||||
};
|
||||
|
||||
// add new job role handler
|
||||
const handleAddRole = () => {
|
||||
setIsAddingRole(true);
|
||||
setSelectedJobTitleId(undefined);
|
||||
// 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
|
||||
}
|
||||
};
|
||||
const handleDeleteRole = (index: number) => {
|
||||
const updatedRoles = [...roles];
|
||||
@@ -126,6 +136,12 @@ const RatecardDrawer = ({
|
||||
setRoles(updatedRoles);
|
||||
};
|
||||
const handleSelectJobTitle = (jobTitleId: string) => {
|
||||
// Prevent duplicate job_title_id
|
||||
if (roles.some(role => role.job_title_id === jobTitleId)) {
|
||||
setIsAddingRole(false);
|
||||
setSelectedJobTitleId(undefined);
|
||||
return;
|
||||
}
|
||||
const jobTitle = jobTitles.data?.find(jt => jt.id === jobTitleId);
|
||||
if (jobTitle) {
|
||||
const newRole = {
|
||||
@@ -143,12 +159,14 @@ const RatecardDrawer = ({
|
||||
const handleSave = async () => {
|
||||
if (type === 'update' && ratecardId) {
|
||||
try {
|
||||
// Filter out roles with no jobtitle or empty jobtitle
|
||||
const filteredRoles = roles.filter(role => role.jobtitle && role.jobtitle.trim() !== '');
|
||||
await dispatch(updateRateCard({
|
||||
id: ratecardId,
|
||||
body: {
|
||||
name,
|
||||
currency,
|
||||
jobRolesList: roles,
|
||||
jobRolesList: filteredRoles,
|
||||
},
|
||||
}) as any);
|
||||
// Refresh the rate cards list in Redux
|
||||
@@ -177,24 +195,56 @@ const RatecardDrawer = ({
|
||||
{
|
||||
title: t('jobTitleColumn'),
|
||||
dataIndex: 'jobtitle',
|
||||
render: (text: string, record: any, index: number) => (
|
||||
<Input
|
||||
value={text}
|
||||
placeholder="Enter job title"
|
||||
style={{
|
||||
background: 'transparent',
|
||||
border: 'none',
|
||||
boxShadow: 'none',
|
||||
padding: 0,
|
||||
color: '#1890ff',
|
||||
}}
|
||||
onChange={(e) => {
|
||||
const updatedRoles = [...roles];
|
||||
updatedRoles[index].jobtitle = e.target.value;
|
||||
setRoles(updatedRoles);
|
||||
}}
|
||||
/>
|
||||
),
|
||||
render: (text: string, record: any, index: number) => {
|
||||
if (index === addingRowIndex || index === editingRowIndex) {
|
||||
return (
|
||||
<Select
|
||||
showSearch
|
||||
autoFocus
|
||||
placeholder={t('selectJobTitle')}
|
||||
style={{ minWidth: 150 }}
|
||||
value={record.job_title_id || undefined}
|
||||
onChange={value => {
|
||||
// Prevent duplicate job_title_id
|
||||
if (roles.some((role, idx) => role.job_title_id === value && idx !== index)) {
|
||||
return;
|
||||
}
|
||||
const updatedRoles = [...roles];
|
||||
const selectedJob = jobTitles.data?.find(jt => jt.id === value);
|
||||
updatedRoles[index].job_title_id = value;
|
||||
updatedRoles[index].jobtitle = selectedJob?.name || '';
|
||||
setRoles(updatedRoles);
|
||||
setEditingRowIndex(null);
|
||||
setAddingRowIndex(null);
|
||||
}}
|
||||
onBlur={() => {
|
||||
setEditingRowIndex(null);
|
||||
setAddingRowIndex(null);
|
||||
}}
|
||||
filterOption={(input, option) =>
|
||||
(option?.children as string).toLowerCase().includes(input.toLowerCase())
|
||||
}
|
||||
>
|
||||
{jobTitles.data
|
||||
?.filter(jt => !roles.some((role, idx) => role.job_title_id === jt.id && idx !== index))
|
||||
.map(jt => (
|
||||
<Select.Option key={jt.id} value={jt.id}>
|
||||
{jt.name}
|
||||
</Select.Option>
|
||||
))}
|
||||
</Select>
|
||||
);
|
||||
}
|
||||
// Render as clickable text for existing rows
|
||||
return (
|
||||
<span
|
||||
style={{ cursor: 'pointer' }}
|
||||
onClick={() => setEditingRowIndex(index)}
|
||||
>
|
||||
{record.jobtitle}
|
||||
</span>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
title: `${t('ratePerHourColumn')} (${currency})`,
|
||||
@@ -230,10 +280,21 @@ const RatecardDrawer = ({
|
||||
),
|
||||
},
|
||||
];
|
||||
const handleDrawerClose = async () => {
|
||||
if (
|
||||
drawerRatecard &&
|
||||
(drawerRatecard.jobRolesList?.length === 0 || !drawerRatecard.jobRolesList) &&
|
||||
name === 'Untitled Rate Card'
|
||||
) {
|
||||
await dispatch(deleteRateCard(drawerRatecard.id as string));
|
||||
}
|
||||
dispatch(toggleRatecardDrawer());
|
||||
};
|
||||
|
||||
return (
|
||||
<Drawer
|
||||
loading={drawerLoading}
|
||||
onClose={handleDrawerClose}
|
||||
title={
|
||||
<Flex align="center" justify="space-between">
|
||||
<Typography.Text style={{ fontWeight: 500, fontSize: 16 }}>
|
||||
@@ -272,7 +333,6 @@ const RatecardDrawer = ({
|
||||
</Flex>
|
||||
}
|
||||
open={isDrawerOpen}
|
||||
onClose={() => dispatch(toggleRatecardDrawer())}
|
||||
width={700}
|
||||
footer={
|
||||
<Flex justify="end" gap={16} style={{ marginTop: 16 }}>
|
||||
|
||||
@@ -18,7 +18,7 @@ const RatecardTab = () => {
|
||||
>
|
||||
{t('ratecardImportantNotice')}
|
||||
</Typography.Text>
|
||||
<Button
|
||||
{/* <Button
|
||||
type="primary"
|
||||
style={{
|
||||
marginTop: '10px',
|
||||
@@ -27,7 +27,7 @@ const RatecardTab = () => {
|
||||
}}
|
||||
>
|
||||
{t('saveButton')}
|
||||
</Button>
|
||||
</Button> */}
|
||||
|
||||
{/* import ratecards drawer */}
|
||||
<ImportRatecardsDrawer />
|
||||
|
||||
@@ -1,108 +1,176 @@
|
||||
import { Avatar, Button, Input, Table, TableProps } from 'antd';
|
||||
import React, { useState } from 'react';
|
||||
import { Avatar, Button, Input, Popconfirm, Table, TableProps, Select, Flex } from 'antd';
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import CustomAvatar from '../../../../../../components/CustomAvatar';
|
||||
import { PlusOutlined } from '@ant-design/icons';
|
||||
import { DeleteOutlined, PlusOutlined, SaveOutlined } from '@ant-design/icons';
|
||||
import { useAppSelector } from '../../../../../../hooks/useAppSelector';
|
||||
import { useAppDispatch } from '../../../../../../hooks/useAppDispatch';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { JobRoleType } from '@/types/project/ratecard.types';
|
||||
|
||||
const initialJobRolesList: JobRoleType[] = [
|
||||
{
|
||||
jobId: 'J001',
|
||||
jobTitle: 'Project Manager',
|
||||
ratePerHour: 50,
|
||||
members: ['Alice Johnson', 'Bob Smith'],
|
||||
},
|
||||
{
|
||||
jobId: 'J002',
|
||||
jobTitle: 'Senior Software Engineer',
|
||||
ratePerHour: 40,
|
||||
members: ['Charlie Brown', 'Diana Prince'],
|
||||
},
|
||||
{
|
||||
jobId: 'J003',
|
||||
jobTitle: 'Junior Software Engineer',
|
||||
ratePerHour: 25,
|
||||
members: ['Eve Davis', 'Frank Castle'],
|
||||
},
|
||||
{
|
||||
jobId: 'J004',
|
||||
jobTitle: 'UI/UX Designer',
|
||||
ratePerHour: 30,
|
||||
members: null,
|
||||
},
|
||||
];
|
||||
import { JobRoleType, IJobType, RatecardType } from '@/types/project/ratecard.types';
|
||||
import {
|
||||
deleteProjectRateCardRoleById,
|
||||
fetchProjectRateCardRoles,
|
||||
updateProjectRateCardRolesByProjectId,
|
||||
} from '@/features/finance/project-finance-slice';
|
||||
import { useParams } from 'react-router-dom';
|
||||
import { jobTitlesApiService } from '@/api/settings/job-titles/job-titles.api.service';
|
||||
|
||||
const RatecardTable: React.FC = () => {
|
||||
const [roles, setRoles] = useState<JobRoleType[]>(initialJobRolesList);
|
||||
|
||||
// localization
|
||||
const dispatch = useAppDispatch();
|
||||
const { t } = useTranslation('project-view-finance');
|
||||
const { projectId } = useParams();
|
||||
|
||||
// get currently using currency from finance reducer
|
||||
const currency = useAppSelector(
|
||||
(state) => state.financeReducer.currency
|
||||
).toUpperCase();
|
||||
// Redux state
|
||||
const rolesRedux = useAppSelector((state) => state.projectFinanceRateCard.rateCardRoles) || [];
|
||||
const isLoading = useAppSelector((state) => state.projectFinanceRateCard.isLoading);
|
||||
const currency = useAppSelector((state) => state.financeReducer.currency).toUpperCase();
|
||||
|
||||
// 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[]>([]);
|
||||
|
||||
// Fetch job titles for selection
|
||||
useEffect(() => {
|
||||
(async () => {
|
||||
const res = await jobTitlesApiService.getJobTitles(1, 1000, 'name', 'asc', '');
|
||||
setJobTitles(res.body?.data || []);
|
||||
})();
|
||||
}, []);
|
||||
|
||||
// Sync local roles with redux roles
|
||||
useEffect(() => {
|
||||
console.log('Roles Redux:', rolesRedux);
|
||||
setRoles(rolesRedux);
|
||||
}, [rolesRedux]);
|
||||
|
||||
// Fetch roles on mount
|
||||
useEffect(() => {
|
||||
if (projectId) {
|
||||
dispatch(fetchProjectRateCardRoles(projectId));
|
||||
}
|
||||
}, [dispatch, projectId]);
|
||||
|
||||
// Add new role row
|
||||
const handleAddRole = () => {
|
||||
const newRole: JobRoleType = {
|
||||
jobId: `J00${roles.length + 1}`,
|
||||
jobTitle: 'New Role',
|
||||
ratePerHour: 0,
|
||||
members: [],
|
||||
};
|
||||
setRoles([...roles, newRole]);
|
||||
setAddingRow(true);
|
||||
};
|
||||
|
||||
// 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) => ({
|
||||
job_title_id: r.job_title_id,
|
||||
jobtitle: r.jobtitle || r.name || '',
|
||||
rate: Number(r.rate),
|
||||
}));
|
||||
dispatch(updateProjectRateCardRolesByProjectId({ project_id: projectId, roles: filteredRoles }));
|
||||
}
|
||||
};
|
||||
|
||||
// Handle job title select for new row
|
||||
const handleSelectJobTitle = (jobTitleId: string) => {
|
||||
const jobTitle = jobTitles.find((jt) => jt.id === jobTitleId);
|
||||
if (!jobTitle) return;
|
||||
// Prevent duplicates
|
||||
if (roles.some((r) => r.job_title_id === jobTitleId)) return;
|
||||
setRoles([
|
||||
...roles,
|
||||
{
|
||||
job_title_id: jobTitleId,
|
||||
jobtitle: jobTitle.name || '',
|
||||
rate: 0,
|
||||
members: [],
|
||||
},
|
||||
]);
|
||||
setAddingRow(false);
|
||||
};
|
||||
|
||||
// Handle rate change
|
||||
const handleRateChange = (value: string | number, index: number) => {
|
||||
const updatedRoles = roles.map((role, idx) =>
|
||||
idx === index ? { ...role, rate: Number(value) } : role
|
||||
);
|
||||
setRoles(updatedRoles);
|
||||
};
|
||||
|
||||
// Handle delete
|
||||
const handleDelete = (record: JobRoleType, index: number) => {
|
||||
if (record.id) {
|
||||
dispatch(deleteProjectRateCardRoleById(record.id));
|
||||
} else {
|
||||
// Remove unsaved row
|
||||
setRoles(roles.filter((_, idx) => idx !== index));
|
||||
}
|
||||
};
|
||||
|
||||
// Columns
|
||||
const columns: TableProps<JobRoleType>['columns'] = [
|
||||
{
|
||||
title: t('jobTitleColumn'),
|
||||
dataIndex: 'jobTitle',
|
||||
render: (text: string, record: JobRoleType, index: number) => (
|
||||
<Input
|
||||
value={text}
|
||||
placeholder="Enter job title"
|
||||
style={{
|
||||
background: 'transparent',
|
||||
border: 'none',
|
||||
boxShadow: 'none',
|
||||
padding: 0,
|
||||
color: '#1890ff',
|
||||
}}
|
||||
onChange={(e) => {
|
||||
const updatedRoles = [...roles];
|
||||
updatedRoles[index].jobTitle = e.target.value;
|
||||
setRoles(updatedRoles);
|
||||
}}
|
||||
/>
|
||||
),
|
||||
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
|
||||
showSearch
|
||||
autoFocus
|
||||
placeholder={t('selectJobTitle')}
|
||||
style={{ minWidth: 150 }}
|
||||
value={record.job_title_id || undefined}
|
||||
onChange={handleSelectJobTitle}
|
||||
onBlur={() => setAddingRow(false)}
|
||||
filterOption={(input, option) =>
|
||||
(option?.children as string).toLowerCase().includes(input.toLowerCase())
|
||||
}
|
||||
>
|
||||
{jobTitles
|
||||
.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>
|
||||
))}
|
||||
</Select>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<span
|
||||
style={{ cursor: 'pointer' }}
|
||||
onClick={() => setEditingIndex(index)}
|
||||
>
|
||||
{text || record.name}
|
||||
</span>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
title: `${t('ratePerHourColumn')} (${currency})`,
|
||||
dataIndex: 'ratePerHour',
|
||||
render: (text: number, record: JobRoleType, index: number) => (
|
||||
dataIndex: 'rate',
|
||||
render: (value: number, record: JobRoleType, index: number) => (
|
||||
<Input
|
||||
type="number"
|
||||
value={text}
|
||||
value={roles[index]?.rate ?? 0}
|
||||
style={{
|
||||
background: 'transparent',
|
||||
border: 'none',
|
||||
boxShadow: 'none',
|
||||
padding: 0,
|
||||
width: 80,
|
||||
}}
|
||||
onChange={(e) => {
|
||||
const updatedRoles = [...roles];
|
||||
updatedRoles[index].ratePerHour = parseInt(e.target.value, 10) || 0;
|
||||
setRoles(updatedRoles);
|
||||
}}
|
||||
onChange={(e) => handleRateChange(e.target.value, index)}
|
||||
/>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: t('membersColumn'),
|
||||
dataIndex: 'members',
|
||||
render: (members: string[]) =>
|
||||
members?.length > 0 ? (
|
||||
render: (members: string[] | null | undefined) =>
|
||||
members && members.length > 0 ? (
|
||||
<Avatar.Group>
|
||||
{members.map((member, i) => (
|
||||
<CustomAvatar key={i} avatarName={member} size={26} />
|
||||
@@ -126,25 +194,66 @@ const RatecardTable: React.FC = () => {
|
||||
/>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: t('actions'),
|
||||
key: 'actions',
|
||||
render: (_: any, record: JobRoleType, index: number) => (
|
||||
<Popconfirm
|
||||
title={t('deleteConfirm')}
|
||||
onConfirm={() => handleDelete(record, index)}
|
||||
okText={t('yes')}
|
||||
cancelText={t('no')}
|
||||
>
|
||||
<Button
|
||||
type="text"
|
||||
danger
|
||||
icon={<DeleteOutlined />}
|
||||
/>
|
||||
</Popconfirm>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<Table
|
||||
dataSource={roles}
|
||||
dataSource={
|
||||
addingRow
|
||||
? [
|
||||
...roles,
|
||||
{
|
||||
job_title_id: '',
|
||||
jobtitle: '',
|
||||
rate: 0,
|
||||
members: [],
|
||||
},
|
||||
]
|
||||
: roles
|
||||
}
|
||||
columns={columns}
|
||||
rowKey={(record) => record.jobId}
|
||||
rowKey={(record, idx) => record.id || record.job_title_id || idx}
|
||||
pagination={false}
|
||||
loading={isLoading}
|
||||
footer={() => (
|
||||
<Button
|
||||
type="dashed"
|
||||
onClick={handleAddRole}
|
||||
style={{ width: 'fit-content' }}
|
||||
>
|
||||
{t('addRoleButton')}
|
||||
</Button>
|
||||
<Flex gap={8}>
|
||||
<Button
|
||||
type="dashed"
|
||||
onClick={handleAddRole}
|
||||
style={{ width: 'fit-content' }}
|
||||
>
|
||||
{t('addRoleButton')}
|
||||
</Button>
|
||||
<Button
|
||||
type="primary"
|
||||
icon={<SaveOutlined />}
|
||||
onClick={handleSaveAll}
|
||||
disabled={roles.length === 0}
|
||||
>
|
||||
{t('saveButton') || 'Save'}
|
||||
</Button>
|
||||
</Flex>
|
||||
)}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export default RatecardTable;
|
||||
export default RatecardTable;
|
||||
@@ -1,4 +1,5 @@
|
||||
export interface IServerResponse<T> {
|
||||
data: any;
|
||||
done: boolean;
|
||||
title?: string;
|
||||
message?: string;
|
||||
|
||||
@@ -1,14 +1,16 @@
|
||||
|
||||
export interface IJobType {
|
||||
jobId?: string;
|
||||
jobtitle?: string;
|
||||
ratePerHour?: number;
|
||||
rate_card_id?: string;
|
||||
job_title_id: string;
|
||||
rate?: number;
|
||||
};
|
||||
id?: string;
|
||||
jobId?: string;
|
||||
jobtitle?: string;
|
||||
ratePerHour?: number;
|
||||
rate_card_id?: string;
|
||||
job_title_id: string;
|
||||
rate?: number;
|
||||
name?: string;
|
||||
};
|
||||
export interface JobRoleType extends IJobType {
|
||||
members: string[] | null;
|
||||
members?: string[] | null;
|
||||
}
|
||||
|
||||
export interface RatecardType {
|
||||
@@ -23,3 +25,8 @@ export interface IRatecardViewModel {
|
||||
total?: number;
|
||||
data?: RatecardType[];
|
||||
}
|
||||
|
||||
export interface IProjectRateCardRole {
|
||||
project_id: string;
|
||||
roles: IJobType[];
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user