refactor(FE-316): Refine Filter Modal layout and styles

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='space-y-6'>
-            <div className='flex items-center justify-between'>
+            {/* Modal Header */}
-              <h3 className='text-lg font-semibold text-primary'>
+            <div className='flex items-center justify-between gap-2 py-3 border-b border-gray-300 px-4'>
-                <Icon
+              <div className='flex items-center gap-2 text-primary'>
-                  icon='heroicons:funnel'
+                <Icon icon='heroicons:funnel' width={20} height={20} />
-                  width={24}
+                <h3 className='font-semibold'>Filter Data</h3>
-                  height={24}
+              </div>
-                  className='inline-block mr-2'
+              <Button
-                />
+                variant='link'
-                Filter Data
-              </h3>
-              <button
                 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} />
+                <Icon icon='heroicons:x-mark' width={20} height={20} />
-              </button>
+              </Button>
             </div>
-
+            <div className='space-y-4 px-4'>
-            <div className='divider my-0'></div>
-
-            <div className='flex flex-col gap-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>
+            {/* Action Buttons */}
-
+            <div className='flex justify-between gap-4 py-4 mt-8 border-t border-gray-300 bg-gray-100'>
-            <div className='xl:flex xl:flex-row xl:justify-between gap-2 [&_button]:px-10 grid grid-cols-1'>
               <Button
-                variant='ghost'
+                variant='soft'
-                className='w-full xl:max-w-max'
+                className='ms-4 min-w-36 rounded-lg'
                 onClick={handleResetFilters}
               >
                 Reset Filter
               </Button>
               <Button
-                color='primary'
+                className='me-4 min-w-36 rounded-lg'
-                className='w-full xl:max-w-max'
                 onClick={handleApplyFilters}
               >
                 Apply Filter