From f6eaddefa41e996007d4e2d3a3f2807cffe0d9f1 Mon Sep 17 00:00:00 2001
From: shancds <shancds1@gmail.com>
Date: Wed, 21 May 2025 09:55:58 +0530
Subject: [PATCH] feat(ratecard): add 'Add All' button to include all job
 titles and adjust drawer width

---
 .../ratecard-drawer/ratecard-drawer.tsx       | 35 ++++++++++++++-----
 1 file changed, 27 insertions(+), 8 deletions(-)

diff --git a/worklenz-frontend/src/features/finance/ratecard-drawer/ratecard-drawer.tsx b/worklenz-frontend/src/features/finance/ratecard-drawer/ratecard-drawer.tsx
index d6cb3331..9f3cc432 100644
--- a/worklenz-frontend/src/features/finance/ratecard-drawer/ratecard-drawer.tsx
+++ b/worklenz-frontend/src/features/finance/ratecard-drawer/ratecard-drawer.tsx
@@ -99,7 +99,21 @@ const RatecardDrawer = ({
     }
   }, [drawerRatecard, type]);
 
-
+  // Add All handler
+  const handleAddAllRoles = () => {
+    if (!jobTitles.data) return;
+    // Filter out job titles already in roles
+    const existingIds = new Set(roles.map(r => r.job_title_id));
+    const newRoles = jobTitles.data
+      .filter(jt => !existingIds.has(jt.id!))
+      .map(jt => ({
+        jobtitle: jt.name,
+        rate_card_id: ratecardId,
+        job_title_id: jt.id!,
+        rate: 0,
+      }));
+    setRoles([...roles, ...newRoles]);
+  };
 
   // add new job role handler
   const handleAddRole = () => {
@@ -239,7 +253,6 @@ const RatecardDrawer = ({
               }}
             />
           </Typography.Text>
-
           <Flex gap={8} align="center">
             <Typography.Text>{t('currency')}</Typography.Text>
             <Select
@@ -251,12 +264,21 @@ const RatecardDrawer = ({
               ]}
               onChange={(value) => setCurrency(value)}
             />
+            {/* Add All Button */}
+            <Button onClick={handleAddAllRoles} type="default">
+              {t('addAllButton') || 'Add All'}
+            </Button>
           </Flex>
         </Flex>
       }
       open={isDrawerOpen}
       onClose={() => dispatch(toggleRatecardDrawer())}
-      width={800}
+      width={700}
+      footer={
+        <Flex justify="end" gap={16} style={{ marginTop: 16 }}>
+          <Button style={{ marginBottom: 24 }} onClick={handleSave} type="primary">{t('saveButton')}</Button>
+        </Flex>
+      }
     >
       {/* ratecard Table directly inside the Drawer */}
       <Table
@@ -288,17 +310,14 @@ const RatecardDrawer = ({
             <Button
               type="dashed"
               onClick={handleAddRole}
-              style={{ width: 'fit-content' }}
+              block
+              style={{ margin: 0, padding: 0 }}
             >
               {t('addRoleButton')}
             </Button>
           )
         )}
       />
-
-      <Flex justify="end" gap={16} style={{ marginTop: 16 }}>
-        <Button onClick={handleSave} type="primary">{t('saveButton')}</Button>
-      </Flex>
     </Drawer>
   );
 };