From fc4a0a58e23d903a0cca8d29d50b31b09c6bdf3d Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Sat, 7 Feb 2026 09:58:00 +0700
Subject: [PATCH] refactor(FE): Refactor tables to use Card component

---
 .../table-view/DeliveryOrderProductTable.tsx  | 88 ++++++++++---------
 .../table-view/SalesOrderProductTable.tsx     | 82 ++++++++---------
 2 files changed, 88 insertions(+), 82 deletions(-)

diff --git a/src/components/pages/marketing/form/table-view/DeliveryOrderProductTable.tsx b/src/components/pages/marketing/form/table-view/DeliveryOrderProductTable.tsx
index c77faba1..83ce01d3 100644
--- a/src/components/pages/marketing/form/table-view/DeliveryOrderProductTable.tsx
+++ b/src/components/pages/marketing/form/table-view/DeliveryOrderProductTable.tsx
@@ -1,5 +1,6 @@
 import { DeliveryOrderProductFormValues } from '@/components/pages/marketing/form/repeater/delivery-order/DeliverOrderProduct.schema';
 import Button from '@/components/Button';
+import Card from '@/components/Card';
 import { Icon } from '@iconify/react';
 import { useRef } from 'react';
 import { formatCurrency, formatDate, formatNumber } from '@/lib/helper';
@@ -49,9 +50,50 @@ const DeliveryOrderProductTable = ({
             (doItem) => doItem.do_number === item.do_number
           );
           return (
-            <div
-              className='rounded-lg border border-tools-table-outline border-base-content/5'
+            <Card
               key={`table-${item.id}`}
+              title={
+                item.marketing_product?.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',
+              }}
+              actions={
+                formType === 'add_delivery' ||
+                formType === 'edit_delivery' ||
+                formType === 'detail' ? (
+                  <div className='flex flex-row gap-1.5 items-center'>
+                    <Button
+                      type='button'
+                      variant='ghost'
+                      color='none'
+                      onClick={() => {
+                        onEditRef.current(item.id as number, item);
+                      }}
+                      className='p-0 hover:text-base-content'
+                    >
+                      <Icon icon='heroicons:pencil' width={20} height={20} />
+                    </Button>
+                    <Button
+                      type='button'
+                      variant='ghost'
+                      color='none'
+                      onClick={() => {
+                        onDeleteRef.current(item.id as number);
+                      }}
+                      className='p-0 text-error hover:text-base-content'
+                    >
+                      <Icon icon='heroicons:trash' width={20} height={20} />
+                    </Button>
+                  </div>
+                ) : undefined
+              }
             >
               <table
                 style={{
@@ -65,45 +107,7 @@ const DeliveryOrderProductTable = ({
                       Label
                     </th>
                     <th className='text-start font-medium text-base-content/50 text-sm px-4 py-3'>
-                      <div className='flex w-full flex-row gap-1 items-center justify-between h-full mt-2'>
-                        <div>Value</div>
-                        {(formType === 'add_delivery' ||
-                          formType === 'edit_delivery' ||
-                          formType === 'detail') && (
-                          <div className='flex flex-row gap-1.5 items-center'>
-                            <Button
-                              type='button'
-                              variant='ghost'
-                              color='none'
-                              onClick={() => {
-                                onEditRef.current(item.id as number, item);
-                              }}
-                              className='p-0 hover:text-base-content'
-                            >
-                              <Icon
-                                icon='heroicons:pencil'
-                                width={20}
-                                height={20}
-                              />
-                            </Button>
-                            <Button
-                              type='button'
-                              variant='ghost'
-                              color='none'
-                              onClick={() => {
-                                onDeleteRef.current(item.id as number);
-                              }}
-                              className='p-0 text-error hover:text-base-content'
-                            >
-                              <Icon
-                                icon='heroicons:trash'
-                                width={20}
-                                height={20}
-                              />
-                            </Button>
-                          </div>
-                        )}
-                      </div>
+                      Value
                     </th>
                   </tr>
                   <>
@@ -199,7 +203,7 @@ const DeliveryOrderProductTable = ({
                   </>
                 </tbody>
               </table>
-            </div>
+            </Card>
           );
         })}
       </div>
diff --git a/src/components/pages/marketing/form/table-view/SalesOrderProductTable.tsx b/src/components/pages/marketing/form/table-view/SalesOrderProductTable.tsx
index e900974b..5cf8f9de 100644
--- a/src/components/pages/marketing/form/table-view/SalesOrderProductTable.tsx
+++ b/src/components/pages/marketing/form/table-view/SalesOrderProductTable.tsx
@@ -1,6 +1,7 @@
 'use client';
 
 import Button from '@/components/Button';
+import Card from '@/components/Card';
 import { SalesOrderProductFormValues } from '@/components/pages/marketing/form/repeater/sales-order/SalesOrderProduct.schema';
 import {
   formatCurrency,
@@ -146,9 +147,46 @@ const SalesOrderProductTable = ({
     <>
       <div className='size-full flex flex-col relative overflow-x-hidden gap-3'>
         {data.map((item) => (
-          <div
-            className='rounded-lg border border-tools-table-outline border-base-content/5'
+          <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',
+            }}
+            actions={
+              formType !== 'success' ? (
+                <div className='flex flex-row gap-1.5 items-center'>
+                  <Button
+                    type='button'
+                    variant='ghost'
+                    color='none'
+                    onClick={() => {
+                      onEditRef.current(item.id as number);
+                    }}
+                    className='p-0 hover:text-base-content'
+                  >
+                    <Icon icon='heroicons:pencil' width={20} height={20} />
+                  </Button>
+                  <Button
+                    type='button'
+                    variant='ghost'
+                    color='none'
+                    onClick={() => {
+                      onDeleteRef.current(item.id as number);
+                    }}
+                    className='p-0 text-error hover:text-base-content'
+                  >
+                    <Icon icon='heroicons:trash' width={20} height={20} />
+                  </Button>
+                </div>
+              ) : undefined
+            }
           >
             <table
               style={{
@@ -162,43 +200,7 @@ const SalesOrderProductTable = ({
                     Label
                   </th>
                   <th className='text-start font-medium text-base-content/50 text-sm px-4 py-3'>
-                    <div className='flex w-full flex-row gap-1 items-center justify-between h-full mt-2'>
-                      <div>Value</div>
-                      {formType !== 'success' && (
-                        <div className='flex flex-row gap-1.5 items-center'>
-                          <Button
-                            type='button'
-                            variant='ghost'
-                            color='none'
-                            onClick={() => {
-                              onEditRef.current(item.id as number);
-                            }}
-                            className='p-0 hover:text-base-content'
-                          >
-                            <Icon
-                              icon='heroicons:pencil'
-                              width={20}
-                              height={20}
-                            />
-                          </Button>
-                          <Button
-                            type='button'
-                            variant='ghost'
-                            color='none'
-                            onClick={() => {
-                              onDeleteRef.current(item.id as number);
-                            }}
-                            className='p-0 text-error hover:text-base-content'
-                          >
-                            <Icon
-                              icon='heroicons:trash'
-                              width={20}
-                              height={20}
-                            />
-                          </Button>
-                        </div>
-                      )}
-                    </div>
+                    Value
                   </th>
                 </tr>
                 <>
@@ -294,7 +296,7 @@ const SalesOrderProductTable = ({
                 </>
               </tbody>
             </table>
-          </div>
+          </Card>
         ))}
         {formType != 'add_deliver' &&
           formType != 'edit_deliver' &&