refactor(FE-438): Refine Filter modal UI and controls

src/components/pages/uniformity/UniformityTable.tsx

@@ -884,23 +884,33 @@ const UniformityTable = ({ refresh }: { refresh?: () => void }) => {
         {/* Filter Modal */}
         <Modal
           ref={filterModal.ref}
-          className={{ modalBox: 'rounded-2xl max-w-2xl' }}
+          className={{ modalBox: 'rounded-2xl max-w-5/12' }}
         >
-          <div className='flex flex-col gap-6'>
+          <div className='flex flex-col gap-2'>
             <div className='flex items-center justify-between'>
-              <h3 className='text-lg font-semibold'>Filter Data</h3>
+              <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
                 onClick={filterModal.closeModal}
-                className='p-1 hover:bg-gray-100 rounded-lg transition-colors'
+                className='p-1 hover:bg-gray-100 rounded-lg transition-colors cursor-pointer'
               >
                 <Icon icon='mdi:close' width={20} height={20} />
               </button>
             </div>
 
+            <div className='divider my-0'></div>
+
             <div className='flex flex-col gap-4'>
-              <div className='grid grid-cols-2 gap-4'>
+              <div className='grid grid-cols-1 sm:grid-cols-2 gap-4'>
                 <DateInput
-                  label='Tanggal Mulai'
+                  label='Tanggal'
                   name='start_date'
                   value={filterStartDate}
                   onChange={(e) => setFilterStartDate(e.target.value)}
@@ -908,7 +918,7 @@ const UniformityTable = ({ refresh }: { refresh?: () => void }) => {
                 />
 
                 <DateInput
-                  label='Tanggal Akhir'
+                  label='‎ '
                   name='end_date'
                   value={filterEndDate}
                   onChange={(e) => setFilterEndDate(e.target.value)}
@@ -953,20 +963,22 @@ const UniformityTable = ({ refresh }: { refresh?: () => void }) => {
               />
             </div>
 
-            <div className='flex gap-2'>
+            <div className='divider my-0'></div>
+
+            <div className='flex justify-between gap-2 [&_button]:px-20'>
               <Button
-                variant='outline'
-                className='grow'
+                variant='ghost'
+                className='max-w-max'
                 onClick={handleResetFilters}
               >
-                Reset
+                Reset Filter
               </Button>
               <Button
                 color='primary'
-                className='grow'
+                className='max-w-max'
                 onClick={handleApplyFilters}
               >
-                Terapkan
+                Apply Filter
               </Button>
             </div>
           </div>