Merge branch 'development' of gitlab.com:mbugroup/lti-web-client into dev/restu

src/components/pages/finance/FinanceTable.tsx

@@ -42,7 +42,6 @@ import {
   FinanceTableFilterSchema,
   FinanceTableFilterValues,
 } from './FinanceTableFilter.schema';
-import SelectInputRadio from '@/components/input/SelectInputRadio';
 
 const RowOptionsMenu = ({
   popoverPosition = 'bottom',
@@ -234,6 +233,7 @@ const FinanceTable = () => {
   const [selectedFinance, setSelectedFinance] = useState<Finance | null>(null);
   const [isDeleteLoading, setIsDeleteLoading] = useState(false);
   const [dateErrorShown, setDateErrorShown] = useState(false);
+  const [hasDateError, setHasDateError] = useState(false);
 
   // ===== Formik for Filter =====
   const filterFormik = useFormik<FinanceTableFilterValues>({
@@ -423,10 +423,7 @@ const FinanceTable = () => {
       const endDateObj = new Date(endDate);
 
       if (endDateObj < startDate) {
-        filterFormik.setFieldError(
-          'end_date',
-          'Tanggal akhir tidak boleh masa lampau'
-        );
+        setHasDateError(true);
         if (!dateErrorShown) {
           toast.error('Tanggal akhir tidak boleh masa lampau', {
             duration: Infinity,
@@ -434,12 +431,14 @@ const FinanceTable = () => {
           setDateErrorShown(true);
         }
       } else {
-        filterFormik.setFieldError('end_date', undefined);
+        setHasDateError(false);
         if (dateErrorShown) {
           toast.dismiss();
           setDateErrorShown(false);
         }
       }
+    } else {
+      setHasDateError(false);
     }
   };
 
@@ -454,10 +453,7 @@ const FinanceTable = () => {
       const endDate = new Date(value);
 
       if (endDate < startDateObj) {
-        filterFormik.setFieldError(
-          'end_date',
-          'Tanggal akhir tidak boleh masa lampau'
-        );
+        setHasDateError(true);
         if (!dateErrorShown) {
           toast.error('Tanggal akhir tidak boleh masa lampau', {
             duration: Infinity,
@@ -468,7 +464,7 @@ const FinanceTable = () => {
       }
     }
 
-    filterFormik.setFieldError('end_date', undefined);
+    setHasDateError(false);
     if (dateErrorShown) {
       toast.dismiss();
       setDateErrorShown(false);
@@ -647,7 +643,7 @@ const FinanceTable = () => {
                 className='px-3 py-2.5 w-fit text-sm text-base-100 rounded-lg shadow-sm'
               >
                 <Icon icon='mdi:bank-transfer-in' width={20} height={20} />
-                Add Injection (Saldo Bank)
+                Injection Saldo Bank
               </Button>
             </RequirePermission>
             <RequirePermission permissions='lti.finance.initial_balances.create'>
@@ -657,7 +653,7 @@ const FinanceTable = () => {
                 className='px-3 py-2.5 w-fit text-sm text-base-100 rounded-lg shadow-sm'
               >
                 <Icon icon='mdi:cash-register' width={20} height={20} />
-                Add Initial Balance
+                Saldo Awal
               </Button>
             </RequirePermission>
             <RequirePermission permissions='lti.finance.payments.create'>
@@ -667,7 +663,7 @@ const FinanceTable = () => {
                 className='px-3 py-2.5 w-fit text-sm text-base-100 rounded-lg shadow-sm'
               >
                 <Icon icon='heroicons:plus' width={20} height={20} />
-                Add Finance
+                Tambah
               </Button>
             </RequirePermission>
           </div>
@@ -765,10 +761,7 @@ const FinanceTable = () => {
             <Icon icon='heroicons:x-mark' width={20} height={20} />
           </Button>
         </div>
-        <form
-          onSubmit={filterFormik.handleSubmit}
-          onReset={filterFormik.handleReset}
-        >
+        <form onSubmit={filterFormik.handleSubmit} onReset={filterFormik.handleReset}>
           <div className='p-4 flex flex-col gap-1.5'>
             <SelectInput
               options={FINANCE_TRANSACTION_TYPE_OPTIONS}
@@ -823,7 +816,7 @@ const FinanceTable = () => {
               isMulti
               className={{ wrapper: 'w-full' }}
             />
-            <SelectInputRadio
+            <SelectInput
               options={sortByOptions}
               label='Urutkan Berdasarkan'
               placeholder='Pilih Urutan'
@@ -836,22 +829,23 @@ const FinanceTable = () => {
               name='start_date'
               label='Periode Tanggal (Mulai)'
               value={filterFormik.values.start_date}
+              errorMessage={filterFormik.errors.start_date}
               onChange={startDateChangeHandler}
-              errorMessage={
-                filterFormik.errors.end_date
-                  ? filterFormik.errors.end_date
-                  : undefined
+              isError={
+                filterFormik.touched.start_date &&
+                Boolean(filterFormik.errors.start_date)
               }
             />
             <DateInput
               name='end_date'
               label='Periode Tanggal (Akhir)'
               value={filterFormik.values.end_date}
+              errorMessage={filterFormik.errors.end_date}
               onChange={endDateChangeHandler}
-              errorMessage={
-                filterFormik.errors.end_date
-                  ? filterFormik.errors.end_date
-                  : undefined
+              isError={
+                (filterFormik.touched.end_date &&
+                  Boolean(filterFormik.errors.end_date)) ||
+                hasDateError
               }
             />
           </div>