feat(ratecard): implement insertOne functionality for single role creation and update API integration

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

@@ -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[]>> {

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

@@ -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 }) => {

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

@@ -253,6 +253,7 @@ const RatecardDrawer = ({
       render: (text: number, record: any, index: number) => (
         <Input
           type="number"
+          autoFocus={index === addingRowIndex}
           value={roles[index]?.rate ?? 0}
           style={{
             background: 'transparent',

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

@@ -9,6 +9,7 @@ import { JobRoleType, IJobType, RatecardType } from '@/types/project/ratecard.ty
 import {
   deleteProjectRateCardRoleById,
   fetchProjectRateCardRoles,
+  insertProjectRateCardRole,
   updateProjectRateCardRolesByProjectId,
 } from '@/features/finance/project-finance-slice';
 import { useParams } from 'react-router-dom';
@@ -40,9 +41,8 @@ const RatecardTable: React.FC = () => {
 
   // Sync local roles with redux roles
   useEffect(() => {
-    console.log('Roles Redux:', rolesRedux);
     setRoles(rolesRedux);
-  }, [rolesRedux]);
+  }, [rolesRedux, dispatch]);
 
   // Fetch roles on mount
   useEffect(() => {
@@ -72,20 +72,29 @@ 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;
+    if (!jobTitle || !projectId) 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: [],
-      },
-    ]);
+    // Dispatch and wait for result
+    const resultAction = await dispatch(
+      insertProjectRateCardRole({ project_id: projectId, job_title_id: jobTitleId, rate: 0 })
+    );
+
+    // If fulfilled, update local state with returned id
+    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,
+        },
+      ]);
+    }
     setAddingRow(false);
   };
 
@@ -221,14 +230,14 @@ 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}