From a8dce9da46509e2e24aa74b8aaecddffa3c69082 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Sat, 7 Feb 2026 10:04:15 +0700
Subject: [PATCH] refactor(FE): Refactor table actions to be part of the
 "Value" column

---
 .../table-view/DeliveryOrderProductTable.tsx  | 70 +++++++++++--------
 .../table-view/SalesOrderProductTable.tsx     | 66 +++++++++--------
 2 files changed, 76 insertions(+), 60 deletions(-)

diff --git a/src/components/pages/marketing/form/table-view/DeliveryOrderProductTable.tsx b/src/components/pages/marketing/form/table-view/DeliveryOrderProductTable.tsx
index 80cd42fe..af53685c 100644
--- a/src/components/pages/marketing/form/table-view/DeliveryOrderProductTable.tsx
+++ b/src/components/pages/marketing/form/table-view/DeliveryOrderProductTable.tsx
@@ -64,36 +64,6 @@ const DeliveryOrderProductTable = ({
                 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={{
@@ -107,7 +77,45 @@ const DeliveryOrderProductTable = ({
                       Label
                     </th>
                     <th className='text-start font-medium text-base-content/50 text-sm px-4 py-3'>
-                      Value
+                      <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>
+                            <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>
                     </th>
                   </tr>
                   <>
diff --git a/src/components/pages/marketing/form/table-view/SalesOrderProductTable.tsx b/src/components/pages/marketing/form/table-view/SalesOrderProductTable.tsx
index 502e6c37..a13a1117 100644
--- a/src/components/pages/marketing/form/table-view/SalesOrderProductTable.tsx
+++ b/src/components/pages/marketing/form/table-view/SalesOrderProductTable.tsx
@@ -159,34 +159,6 @@ const SalesOrderProductTable = ({
               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={{
@@ -200,7 +172,43 @@ const SalesOrderProductTable = ({
                     Label
                   </th>
                   <th className='text-start font-medium text-base-content/50 text-sm px-4 py-3'>
-                    Value
+                    <div className='flex w-full flex-row gap-1 items-center justify-between h-full'>
+                      <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>
                   </th>
                 </tr>
                 <>