From 862cf38f92e9919e00d8ab79d840d37d92928f6e Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Mon, 9 Feb 2026 11:41:08 +0700
Subject: [PATCH] refactor(FE): Refactor DeliveryOrderProductTable to improve
 readability

---
 .../table-view/DeliveryOrderProductTable.tsx  | 358 +++++++++---------
 1 file changed, 183 insertions(+), 175 deletions(-)

diff --git a/src/components/pages/marketing/form/table-view/DeliveryOrderProductTable.tsx b/src/components/pages/marketing/form/table-view/DeliveryOrderProductTable.tsx
index bade27d0..7d64da83 100644
--- a/src/components/pages/marketing/form/table-view/DeliveryOrderProductTable.tsx
+++ b/src/components/pages/marketing/form/table-view/DeliveryOrderProductTable.tsx
@@ -19,6 +19,7 @@ type DeliveryOrderProductTableProps = {
     | 'detail'
     | 'rejected'
     | 'pending'
+    | 'success'
     | string
     | null;
   marketing?: Marketing;
@@ -41,186 +42,193 @@ const DeliveryOrderProductTable = ({
 
   const approvalStepNumber = marketing?.latest_approval?.step_number;
 
+  const renderTableContent = (item: DeliveryOrderProductFormValues) => {
+    const doItem = marketing?.delivery_order?.find(
+      (doItem) => doItem.do_number === item.do_number
+    );
+
+    return (
+      <>
+        <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>
+          <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'>
+              <div>Value</div>
+              {formType !== 'success' &&
+                (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>
+                  </div>
+                )}
+            </div>
+          </th>
+        </tr>
+        <>
+          <tr>
+            <td className='text-sm px-4 py-3'>Gudang</td>
+            <td className='text-sm px-4 py-3'>
+              {doItem?.warehouse?.name ||
+                item.marketing_product?.product_warehouse_data?.warehouse?.name}
+            </td>
+          </tr>
+          <tr>
+            <td className='text-sm px-4 py-3'>Produk</td>
+            <td className='text-sm px-4 py-3'>
+              {item.marketing_product?.product_warehouse?.label}
+            </td>
+          </tr>
+          <tr>
+            <td className='text-sm px-4 py-3'>Qty</td>
+            <td className='text-sm px-4 py-3'>
+              {item.qty
+                ? `${formatNumber(parseFloat(item.qty as string))} ${item.marketing_product?.uom ?? ''}`
+                : '-'}
+            </td>
+          </tr>
+          {Number(item.avg_weight ?? 0) > 0 && (
+            <tr>
+              <td className='text-sm px-4 py-3'>Avg Bobot</td>
+              <td className='text-sm px-4 py-3'>
+                {formatNumber(Number(item.avg_weight))} Kg
+              </td>
+            </tr>
+          )}
+          {Number(item.total_weight ?? 0) > 0 && (
+            <tr>
+              <td className='text-sm px-4 py-3'>Total Bobot</td>
+              <td className='text-sm px-4 py-3'>
+                {formatNumber(Number(item.total_weight))}
+              </td>
+            </tr>
+          )}
+          <tr>
+            <td className='text-sm px-4 py-3'>Total Harga Satuan</td>
+            <td className='text-sm px-4 py-3'>
+              {formatCurrency(parseFloat(item.unit_price as string))}
+            </td>
+          </tr>
+          <tr>
+            <td className='text-sm px-4 py-3'>Total Penjualan</td>
+            <td className='text-sm px-4 py-3'>
+              {formatCurrency(parseFloat(item.total_price as string))}
+            </td>
+          </tr>
+        </>
+        <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>
+          <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'>
+              <div>Value</div>
+            </div>
+          </th>
+        </tr>
+        <>
+          {approvalStepNumber !== 1 && (
+            <tr>
+              <td className='text-sm px-4 py-3'>Tanggal Pengiriman</td>
+              <td className='text-sm px-4 py-3'>
+                {item.delivery_date ? (
+                  formatDate(item.delivery_date, 'DD MMM YYYY')
+                ) : formType === 'add_delivery' ||
+                  formType === 'edit_delivery' ||
+                  formType === 'detail' ? (
+                  <span
+                    className='text-error hover:text-error/70 cursor-pointer hover:underline underline-offset-4'
+                    onClick={() => {
+                      onEditRef.current(item.id as number, item);
+                    }}
+                  >
+                    Belum diisi
+                  </span>
+                ) : (
+                  <span className='text-error'>Belum diisi</span>
+                )}
+              </td>
+            </tr>
+          )}
+          {item.do_number && (
+            <tr>
+              <td className='text-sm px-4 py-3'>No. Pengiriman</td>
+              <td className='text-sm px-4 py-3'>{item.do_number}</td>
+            </tr>
+          )}
+          <tr>
+            <td className='text-sm px-4 py-3'>No. Polisi</td>
+            <td className='text-sm px-4 py-3'>{item.vehicle_number}</td>
+          </tr>
+          {doItem && (
+            <tr>
+              <td className='text-sm px-4 py-3'>Dokumen Pengiriman</td>
+              <td className='text-sm px-4 py-3'>
+                <DeliveryOrderExport data={marketing} deliveryOrder={doItem} />
+              </td>
+            </tr>
+          )}
+        </>
+      </>
+    );
+  };
+
   return (
     <>
       <div className='size-full flex flex-col relative overflow-x-hidden gap-3'>
-        {data.map((item) => {
-          const doItem = marketing?.delivery_order?.find(
-            (doItem) => doItem.do_number === item.do_number
-          );
-          return (
-            <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',
-              }}
-            >
-              <table
-                style={{
-                  borderRadius: '0.5rem',
+        {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
+                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',
                 }}
-                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>
-                    <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'>
-                        <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>
-                          </div>
-                        )}
-                      </div>
-                    </th>
-                  </tr>
-                  <>
-                    <tr>
-                      <td className='text-sm px-4 py-3'>Gudang</td>
-                      <td className='text-sm px-4 py-3'>
-                        {doItem?.warehouse?.name ||
-                          item.marketing_product?.product_warehouse_data
-                            ?.warehouse?.name}
-                      </td>
-                    </tr>
-                    <tr>
-                      <td className='text-sm px-4 py-3'>Produk</td>
-                      <td className='text-sm px-4 py-3'>
-                        {item.marketing_product?.product_warehouse?.label}
-                      </td>
-                    </tr>
-                    <tr>
-                      <td className='text-sm px-4 py-3'>Qty</td>
-                      <td className='text-sm px-4 py-3'>
-                        {item.qty
-                          ? `${formatNumber(parseFloat(item.qty as string))} ${item.marketing_product?.uom ?? ''}`
-                          : '-'}
-                      </td>
-                    </tr>
-                    {Number(item.avg_weight ?? 0) > 0 && (
-                      <tr>
-                        <td className='text-sm px-4 py-3'>Avg Bobot</td>
-                        <td className='text-sm px-4 py-3'>
-                          {formatNumber(Number(item.avg_weight))} Kg
-                        </td>
-                      </tr>
-                    )}
-                    {Number(item.total_weight ?? 0) > 0 && (
-                      <tr>
-                        <td className='text-sm px-4 py-3'>Total Bobot</td>
-                        <td className='text-sm px-4 py-3'>
-                          {formatNumber(Number(item.total_weight))}
-                        </td>
-                      </tr>
-                    )}
-                    <tr>
-                      <td className='text-sm px-4 py-3'>Total Harga Satuan</td>
-                      <td className='text-sm px-4 py-3'>
-                        {formatCurrency(parseFloat(item.unit_price as string))}
-                      </td>
-                    </tr>
-                    <tr>
-                      <td className='text-sm px-4 py-3'>Total Penjualan</td>
-                      <td className='text-sm px-4 py-3'>
-                        {formatCurrency(parseFloat(item.total_price as string))}
-                      </td>
-                    </tr>
-                  </>
-                  <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>
-                    <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'>
-                        <div>Value</div>
-                      </div>
-                    </th>
-                  </tr>
-                  <>
-                    {approvalStepNumber !== 1 && (
-                      <tr>
-                        <td className='text-sm px-4 py-3'>
-                          Tanggal Pengiriman
-                        </td>
-                        <td className='text-sm px-4 py-3'>
-                          {item.delivery_date ? (
-                            formatDate(item.delivery_date, 'DD MMM YYYY')
-                          ) : formType === 'add_delivery' ||
-                            formType === 'edit_delivery' ||
-                            formType === 'detail' ? (
-                            <span
-                              className='text-error hover:text-error/70 cursor-pointer hover:underline underline-offset-4'
-                              onClick={() => {
-                                onEditRef.current(item.id as number, item);
-                              }}
-                            >
-                              Belum diisi
-                            </span>
-                          ) : (
-                            <span className='text-error'>Belum diisi</span>
-                          )}
-                        </td>
-                      </tr>
-                    )}
-                    {item.do_number && (
-                      <tr>
-                        <td className='text-sm px-4 py-3'>No. Pengiriman</td>
-                        <td className='text-sm px-4 py-3'>{item.do_number}</td>
-                      </tr>
-                    )}
-                    <tr>
-                      <td className='text-sm px-4 py-3'>No. Polisi</td>
-                      <td className='text-sm px-4 py-3'>
-                        {item.vehicle_number}
-                      </td>
-                    </tr>
-                    {doItem && (
-                      <tr>
-                        <td className='text-sm px-4 py-3'>
-                          Dokumen Pengiriman
-                        </td>
-                        <td className='text-sm px-4 py-3'>
-                          <DeliveryOrderExport
-                            data={marketing}
-                            deliveryOrder={doItem}
-                          />
-                        </td>
-                      </tr>
-                    )}
-                  </>
-                </tbody>
-              </table>
-            </Card>
-          );
-        })}
+                <table
+                  style={{
+                    borderRadius: '0.5rem',
+                  }}
+                  className='border-none w-full'
+                >
+                  <tbody className='w-full'>{renderTableContent(item)}</tbody>
+                </table>
+              </Card>
+            )}
+          </div>
+        ))}
       </div>
     </>
   );