refactor(FE): Add validation and error messages to filter modal

src/components/pages/production/uniformity/UniformityTable.tsx

@@ -230,6 +230,7 @@ const UniformityTable = () => {
   const [filterStartDate, setFilterStartDate] = useState('');
   const [filterEndDate, setFilterEndDate] = useState('');
   const [projectFlockSearchValue, setProjectFlockSearchValue] = useState('');
+  const [filterErrors, setFilterErrors] = useState<Record<string, string>>({});
 
   const {
     setInputValue: setFilterLocationInputValue,
@@ -423,9 +424,38 @@ const UniformityTable = () => {
   }, []);
 
   const handleApplyFilters = useCallback(() => {
+    const errors: Record<string, string> = {};
+
+    if (!filterStartDate) {
+      errors.start_date = 'Tanggal mulai wajib diisi';
+    }
+    if (!filterEndDate) {
+      errors.end_date = 'Tanggal akhir wajib diisi';
+    }
+    if (!filterLocation) {
+      errors.location = 'Lokasi wajib dipilih';
+    }
+    if (!filterProjectFlock) {
+      errors.project_flock = 'Project Flock wajib dipilih';
+    }
+    if (!filterKandang) {
+      errors.kandang = 'Kandang wajib dipilih';
+    }
+
+    setFilterErrors(errors);
+
+    if (Object.keys(errors).length === 0) {
       setIsSubmitted(true);
       filterModal.closeModal();
-  }, [filterModal]);
+    }
+  }, [
+    filterModal,
+    filterStartDate,
+    filterEndDate,
+    filterLocation,
+    filterProjectFlock,
+    filterKandang,
+  ]);
 
   const selectedRowIds = useMemo(() => {
     return Object.keys(rowSelection)
@@ -1124,58 +1154,105 @@ const UniformityTable = () => {
             </div>
             <div className='space-y-4 px-4'>
               <div className='grid grid-cols-1 sm:grid-cols-2 sm:gap-4'>
+                <div>
                   <DateInput
                     label='Tanggal'
                     name='start_date'
                     value={filterStartDate}
-                  onChange={(e) => setFilterStartDate(e.target.value)}
+                    onChange={(e) => {
+                      setFilterStartDate(e.target.value);
+                      setFilterErrors((prev) => ({ ...prev, start_date: '' }));
+                    }}
                     className={{ wrapper: 'w-full' }}
                   />
+                  {filterErrors.start_date && (
+                    <p className='text-red-500 text-sm mt-1'>
+                      {filterErrors.start_date}
+                    </p>
+                  )}
+                </div>
 
+                <div>
                   <DateInput
                     label='‎ '
                     name='end_date'
                     value={filterEndDate}
-                  onChange={(e) => setFilterEndDate(e.target.value)}
+                    onChange={(e) => {
+                      setFilterEndDate(e.target.value);
+                      setFilterErrors((prev) => ({ ...prev, end_date: '' }));
+                    }}
                     className={{ wrapper: 'w-full' }}
                   />
+                  {filterErrors.end_date && (
+                    <p className='text-red-500 text-sm mt-1'>
+                      {filterErrors.end_date}
+                    </p>
+                  )}
+                </div>
               </div>
 
+              <div>
                 <SelectInput
                   label='Lokasi'
                   placeholder='Pilih Lokasi...'
                   value={filterLocation}
-                onChange={handleFilterLocationChange}
+                  onChange={(value) => {
+                    handleFilterLocationChange(value);
+                    setFilterErrors((prev) => ({ ...prev, location: '' }));
+                  }}
                   options={filterLocationOptions}
                   onInputChange={setFilterLocationInputValue}
                   isLoading={isLoadingFilterLocations}
-                isClearable
                   className={{ wrapper: 'w-full' }}
                 />
+                {filterErrors.location && (
+                  <p className='text-red-500 text-sm mt-1'>
+                    {filterErrors.location}
+                  </p>
+                )}
+              </div>
 
+              <div>
                 <SelectInput
                   label='Project Flock'
                   placeholder='Pilih Project Flock...'
                   value={filterProjectFlock}
-                onChange={handleFilterProjectFlockChange}
+                  onChange={(value) => {
+                    handleFilterProjectFlockChange(value);
+                    setFilterErrors((prev) => ({ ...prev, project_flock: '' }));
+                  }}
                   options={filterProjectFlockOptions}
                   onInputChange={setProjectFlockSearchValue}
                   isLoading={isLoadingFilterProjectFlocks}
                   isDisabled={!filterLocation}
-                isClearable
                   className={{ wrapper: 'w-full' }}
                 />
+                {filterErrors.project_flock && (
+                  <p className='text-red-500 text-sm mt-1'>
+                    {filterErrors.project_flock}
+                  </p>
+                )}
+              </div>
 
+              <div>
                 <SelectInput
                   label='Kandang'
                   placeholder='Pilih Kandang...'
                   value={filterKandang}
-                onChange={handleFilterKandangChange}
+                  onChange={(value) => {
+                    handleFilterKandangChange(value);
+                    setFilterErrors((prev) => ({ ...prev, kandang: '' }));
+                  }}
                   options={filterKandangOptions}
                   isDisabled={!filterProjectFlock}
-                isClearable
                   className={{ wrapper: 'w-full' }}
                 />
+                {filterErrors.kandang && (
+                  <p className='text-red-500 text-sm mt-1'>
+                    {filterErrors.kandang}
+                  </p>
+                )}
+              </div>
             </div>
 
             {/* Action Buttons */}