From 2cf8bcf746d7305ff48555cfec62fab970f85806 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Wed, 5 Nov 2025 14:00:02 +0700
Subject: [PATCH] feat(FE-170): refactor approval history button and badge
 components in RecordingTable

---
 .../production/recording/RecordingTable.tsx   | 22 +++++++++++--------
 1 file changed, 13 insertions(+), 9 deletions(-)

diff --git a/src/components/pages/production/recording/RecordingTable.tsx b/src/components/pages/production/recording/RecordingTable.tsx
index 8e0f7055..78161b96 100644
--- a/src/components/pages/production/recording/RecordingTable.tsx
+++ b/src/components/pages/production/recording/RecordingTable.tsx
@@ -186,12 +186,13 @@ const ApprovalHistoryModal = ({
         {/* Header */}
         <div className='flex items-center justify-between'>
           <h2 className='text-xl font-bold'>Riwayat Approval</h2>
-          <button
+          <Button
             onClick={closeModalHandler}
-            className='btn btn-sm btn-circle btn-ghost'
+            variant='ghost'
+            className='btn-circle btn-sm p-0'
           >
             <Icon icon='mdi:close' width={20} height={20} />
-          </button>
+          </Button>
         </div>
 
         {isLoading ? (
@@ -697,15 +698,18 @@ const RecordingTable = () => {
               };
 
               return (
-                <button
+                <Badge
+                  variant='soft'
+                  color={statusColor}
+                  className={{
+                    badge:
+                      'cursor-pointer hover:opacity-80 transition-opacity whitespace-nowrap',
+                  }}
                   onClick={openApprovalHistory}
-                  className='btn btn-ghost btn-xs p-0 h-auto min-h-0 text-left hover:bg-transparent'
                   title='Klik untuk lihat riwayat approval'
                 >
-                  <Badge variant='soft' color={statusColor} size='sm'>
-                    {approval.step_name}
-                  </Badge>
-                </button>
+                  {approval.step_name}
+                </Badge>
               );
             },
           },