From ed7ee1a268b9f55a3d9427231d8d4c1e1a3d8a34 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Tue, 30 Dec 2025 16:42:19 +0700
Subject: [PATCH] refactor(FE-316): Refine Filter Modal layout and styles

---
 .../pages/uniformity/UniformityTable.tsx      | 49 +++++++++----------
 1 file changed, 22 insertions(+), 27 deletions(-)

diff --git a/src/components/pages/uniformity/UniformityTable.tsx b/src/components/pages/uniformity/UniformityTable.tsx
index 37b04785..d7c8d83a 100644
--- a/src/components/pages/uniformity/UniformityTable.tsx
+++ b/src/components/pages/uniformity/UniformityTable.tsx
@@ -1018,30 +1018,27 @@ const UniformityTable = ({ refresh }: { refresh?: () => void }) => {
         {/* Filter Modal */}
         <Modal
           ref={filterModal.ref}
-          className={{ modalBox: 'rounded-2xl xl:max-w-4/12 max-w-sm' }}
+          className={{
+            modal: 'p-0',
+            modalBox: 'p-0 rounded-2xl xl:max-w-4/12 max-w-sm',
+          }}
         >
-          <div className='flex flex-col gap-2'>
-            <div className='flex items-center justify-between'>
-              <h3 className='text-lg font-semibold text-primary'>
-                <Icon
-                  icon='heroicons:funnel'
-                  width={24}
-                  height={24}
-                  className='inline-block mr-2'
-                />
-                Filter Data
-              </h3>
-              <button
+          <div className='space-y-6'>
+            {/* Modal Header */}
+            <div className='flex items-center justify-between gap-2 py-3 border-b border-gray-300 px-4'>
+              <div className='flex items-center gap-2 text-primary'>
+                <Icon icon='heroicons:funnel' width={20} height={20} />
+                <h3 className='font-semibold'>Filter Data</h3>
+              </div>
+              <Button
+                variant='link'
                 onClick={filterModal.closeModal}
-                className='p-1 hover:bg-gray-100 rounded-lg transition-colors cursor-pointer'
+                className='text-gray-500 hover:text-gray-700 transition-colors cursor-pointer'
               >
-                <Icon icon='mdi:close' width={20} height={20} />
-              </button>
+                <Icon icon='heroicons:x-mark' width={20} height={20} />
+              </Button>
             </div>
-
-            <div className='divider my-0'></div>
-
-            <div className='flex flex-col gap-4'>
+            <div className='space-y-4 px-4'>
               <div className='grid grid-cols-1 sm:grid-cols-2 sm:gap-4'>
                 <DateInput
                   label='Tanggal'
@@ -1097,19 +1094,17 @@ const UniformityTable = ({ refresh }: { refresh?: () => void }) => {
               />
             </div>
 
-            <div className='divider my-0'></div>
-
-            <div className='xl:flex xl:flex-row xl:justify-between gap-2 [&_button]:px-10 grid grid-cols-1'>
+            {/* Action Buttons */}
+            <div className='flex justify-between gap-4 py-4 mt-8 border-t border-gray-300 bg-gray-100'>
               <Button
-                variant='ghost'
-                className='w-full xl:max-w-max'
+                variant='soft'
+                className='ms-4 min-w-36 rounded-lg'
                 onClick={handleResetFilters}
               >
                 Reset Filter
               </Button>
               <Button
-                color='primary'
-                className='w-full xl:max-w-max'
+                className='me-4 min-w-36 rounded-lg'
                 onClick={handleApplyFilters}
               >
                 Apply Filter