feat(project-ratecard): implement project rate card management with CRUD operations and integrate into frontend

worklenz-backend/src/controllers/project-ratecard-controller.ts

@@ -0,0 +1,121 @@
+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 *;
+    `;
+    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 *;
+    `;
+    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));
+  }
+}

worklenz-backend/src/routes/apis/index.ts

@@ -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);

worklenz-backend/src/routes/apis/project-ratecard-api-router.ts

@@ -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;

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

@@ -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;
+  },
+};

worklenz-frontend/src/app/store.ts

@@ -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,
   },
 });
 

worklenz-frontend/src/features/finance/finance-slice.ts

@@ -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;

worklenz-frontend/src/features/finance/project-finance-slice.ts

@@ -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;

worklenz-frontend/src/features/finance/ratecard-drawer/import-ratecards-drawer.tsx

@@ -1,47 +1,66 @@
-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 { fetchRateCards, toggleImportRatecardsDrawer } from '../finance-slice';
-import { toggleImportRatecardsDrawer } from '../finance-slice';
+import { fetchRateCardById } from '../finance-slice';
-import { RatecardType } from '@/types/project/ratecard.types';
+import { insertProjectRateCardRoles } from '../project-finance-slice';
-const ImportRatecardsDrawer: React.FC = () => {
+import { useParams } from 'react-router-dom';
-  const [ratecardsList, setRatecardsList] = useState<RatecardType[]>([]);
-  const [selectedRatecardId, setSelectedRatecardId] = useState<string | null>(
-    null
-  );
 
-  // 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
+  // Loading states
-  const selectedRatecard =
+  const isRatecardsLoading = useAppSelector(
-    ratecardsList.find(
+    (state) => state.financeReducer.isRatecardsLoading
-      (ratecard) => ratecard.ratecardId === selectedRatecardId
+  );
-    ) || null;
+
+  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 +69,7 @@ const ImportRatecardsDrawer: React.FC = () => {
     },
     {
       title: `${t('ratePerHourColumn')} (${currency})`,
-      dataIndex: 'ratePerHour',
+      dataIndex: 'rate',
       render: (text: number) => <Typography.Text>{text}</Typography.Text>,
     },
   ];
@@ -64,7 +83,31 @@ const ImportRatecardsDrawer: React.FC = () => {
       }
       footer={
         <div style={{ textAlign: 'right' }}>
-          <Button type="primary">Import</Button>
+          <Button
+  type="primary"
+  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,39 +115,40 @@ const ImportRatecardsDrawer: React.FC = () => {
       width={1000}
     >
       <Flex gap={12}>
-        {/* sidebar menu */}
+        {/* Sidebar menu with loading */}
-        <Menu
+        <Spin spinning={isRatecardsLoading} style={{ width: '20%' }}>
-          mode="vertical"
+          <Menu
-          style={{ width: '20%' }}
+            mode="vertical"
-          selectedKeys={
+            style={{ width: '100%' }}
-            selectedRatecardId
+            selectedKeys={
-              ? [selectedRatecardId]
+              selectedRatecardId
-              : [ratecardsList[0]?.ratecardId]
+                ? [selectedRatecardId]
-          }
+                : ratecardsList[0]?.id
-          onClick={({ key }) => setSelectedRatecardId(key)}
+                  ? [ratecardsList[0].id]
-        >
+                  : []
-          {ratecardsList.map((ratecard) => (
+            }
-            <Menu.Item key={ratecard.ratecardId}>
+            onClick={({ key }) => setSelectedRatecardId(key)}
-              {ratecard.ratecardName}
+          >
-            </Menu.Item>
+            {ratecardsList.map((ratecard) => (
-          ))}
+              <Menu.Item key={ratecard.id}>
-        </Menu>
+                {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}
+          rowKey={(record) => record.job_title_id}
-          onRow={() => {
+          onRow={() => ({
-            return {
+            className: 'group',
-              className: 'group',
+            style: { cursor: 'pointer' },
-              style: {
+          })}
-                cursor: 'pointer',
-              },
-            };
-          }}
           pagination={false}
+          loading={isRatecardsLoading}
         />
       </Flex>
     </Drawer>

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

@@ -1,102 +1,50 @@
-import { Avatar, Button, Input, Table, TableProps } from 'antd';
+import { Avatar, Button, Input, Popconfirm, Table, TableProps } from 'antd';
-import React, { useState } from 'react';
+import React, { useEffect } from 'react';
 import CustomAvatar from '../../../../../../components/CustomAvatar';
-import { PlusOutlined } from '@ant-design/icons';
+import { DeleteOutlined, PlusOutlined } 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';
-
+import { deleteProjectRateCardRoleById, fetchProjectRateCardRoles } from '@/features/finance/project-finance-slice';
-const initialJobRolesList: JobRoleType[] = [
+import { useParams } from 'react-router-dom';
-  {
-    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,
-  },
-];
 
 const RatecardTable: React.FC = () => {
-  const [roles, setRoles] = useState<JobRoleType[]>(initialJobRolesList);
+  const dispatch = useAppDispatch();
-
-  // localization
   const { t } = useTranslation('project-view-finance');
+  const { projectId } = useParams();
+
+  // Fetch roles from Redux
+  const roles = useAppSelector((state) => state.projectFinanceRateCard.rateCardRoles) || [];
+  const isLoading = useAppSelector((state) => state.projectFinanceRateCard.isLoading);
 
   // get currently using currency from finance reducer
   const currency = useAppSelector(
     (state) => state.financeReducer.currency
   ).toUpperCase();
 
+  useEffect(() => {
+    if (projectId) {
+      dispatch(fetchProjectRateCardRoles(projectId));
+    }
+  }, [dispatch, projectId]);
+
   const handleAddRole = () => {
-    const newRole: JobRoleType = {
+    // You can implement add role logic here if needed
-      jobId: `J00${roles.length + 1}`,
-      jobTitle: 'New Role',
-      ratePerHour: 0,
-      members: [],
-    };
-    setRoles([...roles, newRole]);
   };
 
   const columns: TableProps<JobRoleType>['columns'] = [
     {
       title: t('jobTitleColumn'),
-      dataIndex: 'jobTitle',
+      dataIndex: 'jobtitle',
-      render: (text: string, record: JobRoleType, index: number) => (
+      render: (text: string) => (
-        <Input
+        <span style={{ color: '#1890ff' }}>{text}</span>
-          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);
-          }}
-        />
       ),
     },
     {
       title: `${t('ratePerHourColumn')} (${currency})`,
-      dataIndex: 'ratePerHour',
+      dataIndex: 'rate',
-      render: (text: number, record: JobRoleType, index: number) => (
+      render: (text: number) => <span>{text}</span>,
-        <Input
-          type="number"
-          value={text}
-          style={{
-            background: 'transparent',
-            border: 'none',
-            boxShadow: 'none',
-            padding: 0,
-          }}
-          onChange={(e) => {
-            const updatedRoles = [...roles];
-            updatedRoles[index].ratePerHour = parseInt(e.target.value, 10) || 0;
-            setRoles(updatedRoles);
-          }}
-        />
-      ),
     },
     {
       title: t('membersColumn'),
@@ -126,14 +74,37 @@ const RatecardTable: React.FC = () => {
           />
         ),
     },
+    {
+      title: t('actions'),
+      key: 'actions',
+      render: (_: any, record: JobRoleType) => (
+        <Popconfirm
+          title={t('deleteConfirm')}
+          onConfirm={() => {
+            if (record.id) {
+              dispatch(deleteProjectRateCardRoleById(record.id));
+            }
+          }}
+          okText={t('yes')}
+          cancelText={t('no')}
+        >
+          <Button
+            type="text"
+            danger
+            icon={<DeleteOutlined />}
+          />
+        </Popconfirm>
+      ),
+    },
   ];
 
   return (
     <Table
       dataSource={roles}
       columns={columns}
-      rowKey={(record) => record.jobId}
+      rowKey={(record) => record.id || record.job_title_id}
       pagination={false}
+      loading={isLoading}
       footer={() => (
         <Button
           type="dashed"

worklenz-frontend/src/types/common.types.ts

@@ -1,4 +1,5 @@
 export interface IServerResponse<T> {
+  data: any;
   done: boolean;
   title?: string;
   message?: string;

worklenz-frontend/src/types/project/ratecard.types.ts

@@ -1,14 +1,15 @@
 
 export interface IJobType {
-    jobId?: string;
+  id?: string;
-    jobtitle?: string;
+  jobId?: string;
-    ratePerHour?: number;
+  jobtitle?: string;
-    rate_card_id?: string;
+  ratePerHour?: number;
-    job_title_id: string;
+  rate_card_id?: string;
-    rate?: number;
+  job_title_id: string;
-  };
+  rate?: number;
+};
 export interface JobRoleType extends IJobType {
-  members: string[] | null;
+  members?: string[] | null;
 }
 
 export interface RatecardType {
@@ -23,3 +24,8 @@ export interface IRatecardViewModel {
   total?: number;
   data?: RatecardType[];
 }
+
+export interface IProjectRateCardRole {
+  project_id: string;
+  roles: IJobType[];
+}