refactor(FE): Refactor SalesOrderProductTable to use renderTableContent

helper

src/components/pages/marketing/form/table-view/SalesOrderProductTable.tsx

@@ -27,31 +27,9 @@ const SalesOrderProductTable = ({
   const onEditRef = useRef(onEdit);
   onEditRef.current = onEdit;
 
-  return (
+  const renderTableContent = (item: SalesOrderProductFormValues) => (
     <>
-      <div className='size-full flex flex-col relative overflow-x-hidden gap-3'>
+      <tr className='border-b border-tools-table-outline border-base-content/5'>
-        {data.map((item) => (
-          <Card
-            key={`table-${item.id}`}
-            title={item.product_warehouse?.label || 'Produk'}
-            collapsible={true}
-            defaultCollapsed={false}
-            variant='bordered'
-            className={{
-              wrapper: 'w-full rounded-lg',
-              body: 'p-0',
-              title: 'px-2 py-1.5 font-normal text-sm',
-              collapsible: 'rounded-lg',
-            }}
-          >
-            <table
-              style={{
-                borderRadius: '0.5rem',
-              }}
-              className='border-none w-full'
-            >
-              <tbody className='w-full'>
-                <tr className='border-b border-t border-tools-table-outline border-base-content/5'>
         <th className='w-1/3 text-start not-first:font-medium text-base-content/50 text-sm px-4 py-3'>
           Label
         </th>
@@ -69,11 +47,7 @@ const SalesOrderProductTable = ({
                   }}
                   className='p-0 hover:text-base-content'
                 >
-                            <Icon
+                  <Icon icon='heroicons:pencil' width={20} height={20} />
-                              icon='heroicons:pencil'
-                              width={20}
-                              height={20}
-                            />
                 </Button>
                 <Button
                   type='button'
@@ -84,11 +58,7 @@ const SalesOrderProductTable = ({
                   }}
                   className='p-0 text-error hover:text-base-content'
                 >
-                            <Icon
+                  <Icon icon='heroicons:trash' width={20} height={20} />
-                              icon='heroicons:trash'
-                              width={20}
-                              height={20}
-                            />
                 </Button>
               </div>
             )}
@@ -106,26 +76,19 @@ const SalesOrderProductTable = ({
         </tr>
         <tr>
           <td className='text-sm px-4 py-3'>Kategori</td>
-                    <td className='text-sm px-4 py-3'>
+          <td className='text-sm px-4 py-3'>{item.marketing_type?.label}</td>
-                      {item.marketing_type?.label}
-                    </td>
         </tr>
         <tr>
           <td className='text-sm px-4 py-3'>Produk</td>
-                    <td className='text-sm px-4 py-3'>
+          <td className='text-sm px-4 py-3'>{item.product_warehouse?.label}</td>
-                      {item.product_warehouse?.label}
-                    </td>
         </tr>
         {item.marketing_type?.value.toLowerCase() === 'telur' && (
           <tr>
             <td className='text-sm px-4 py-3'>Tipe Konversi</td>
-                      <td className='text-sm px-4 py-3'>
+            <td className='text-sm px-4 py-3'>{item.convertion_unit?.label}</td>
-                        {item.convertion_unit?.label}
-                      </td>
           </tr>
         )}
-                  {item.marketing_type?.value.toLowerCase() ===
+        {item.marketing_type?.value.toLowerCase() === 'ayam_pullet' && (
-                    'ayam_pullet' && (
           <tr>
             <td className='text-sm px-4 py-3'>Tipe Konversi</td>
             <td className='text-sm px-4 py-3'>Week {item.week}</td>
@@ -145,9 +108,8 @@ const SalesOrderProductTable = ({
               <td className='text-sm px-4 py-3'>Total Bobot</td>
               <td className='text-sm px-4 py-3'>
                 {item.total_weight
-                            ? formatNumber(
+                  ? formatNumber(parseFloat(item.total_weight as string)) +
-                                parseFloat(item.total_weight as string)
+                    ' Kg'
-                              ) + ' Kg'
                   : '0 Kg'}
               </td>
             </tr>
@@ -155,9 +117,7 @@ const SalesOrderProductTable = ({
               <td className='text-sm px-4 py-3'>Avg Bobot</td>
               <td className='text-sm px-4 py-3'>
                 {item.avg_weight
-                            ? formatNumber(
+                  ? formatNumber(parseFloat(item.avg_weight as string)) + ' Kg'
-                                parseFloat(item.avg_weight as string)
-                              ) + ' Kg'
                   : '0 Kg'}
               </td>
             </tr>
@@ -186,9 +146,49 @@ const SalesOrderProductTable = ({
           </td>
         </tr>
       </>
-              </tbody>
+    </>
+  );
+
+  return (
+    <>
+      <div className='size-full flex flex-col relative overflow-x-hidden gap-3'>
+        {data.map((item) => (
+          <div key={`table-${item.id}`}>
+            {formType === 'success' ? (
+              <div className='rounded-lg border border-tools-table-outline border-base-content/5'>
+                <table
+                  style={{
+                    borderRadius: '0.5rem',
+                  }}
+                  className='border-none w-full'
+                >
+                  <tbody className='w-full'>{renderTableContent(item)}</tbody>
+                </table>
+              </div>
+            ) : (
+              <Card
+                title={item.product_warehouse?.label || 'Produk'}
+                collapsible={true}
+                defaultCollapsed={false}
+                variant='bordered'
+                className={{
+                  wrapper: 'w-full rounded-lg',
+                  body: 'p-0',
+                  title: 'px-2 py-1.5 font-normal text-sm',
+                  collapsible: 'rounded-lg',
+                }}
+              >
+                <table
+                  style={{
+                    borderRadius: '0.5rem',
+                  }}
+                  className='border-none w-full'
+                >
+                  <tbody className='w-full'>{renderTableContent(item)}</tbody>
                 </table>
               </Card>
+            )}
+          </div>
         ))}
         {formType != 'add_deliver' &&
           formType != 'edit_deliver' &&