Merge branch 'fix/finance' into 'development'

[FIX/FE] Fixing Form State in Module Finance

See merge request mbugroup/lti-web-client!218

src/components/pages/finance/FinanceDetail.tsx

@@ -64,7 +64,7 @@ const FinanceDetail = ({ finance }: { finance: Finance }) => {
     },
     {
       label: 'Nominal',
-      value: formatCurrency(finance.nominal),
+      value: formatCurrency(Math.abs(finance.nominal)),
     },
   ].filter((item) => {
     // Hide party account number row if transaction type is INJECTION

src/components/pages/finance/FinanceTable.tsx

@@ -19,6 +19,7 @@ import {
   FINANCE_INITIAL_BALANCE_STATUS,
   FINANCE_INJECTION_STATUS,
   FINANCE_TRANSACTION_STATUS,
+  FINANCE_TRANSACTION_TYPE_OPTIONS,
 } from '@/config/constant';
 import { FinanceApi } from '@/services/api/finance';
 import { isResponseSuccess } from '@/lib/api-helper';
@@ -65,24 +66,19 @@ const RowOptionsMenu = ({
 
       {FINANCE_TRANSACTION_STATUS.includes(
         props.row.original.transaction_type
-      ) &&
-        props.row.original.party?.type !== 'SUPPLIER' && (
-          <RequirePermission permissions='lti.finance.payments.update'>
-            <Button
-              href={`/finance/detail/edit?financeId=${props.row.original.id}`}
-              variant='ghost'
-              color='warning'
-              className='justify-start text-sm'
-            >
-              <Icon
-                icon='material-symbols:edit-outline'
-                width={16}
-                height={16}
-              />
-              Edit
-            </Button>
-          </RequirePermission>
-        )}
+      ) && (
+        <RequirePermission permissions='lti.finance.payments.update'>
+          <Button
+            href={`/finance/detail/edit?financeId=${props.row.original.id}`}
+            variant='ghost'
+            color='warning'
+            className='justify-start text-sm'
+          >
+            <Icon icon='material-symbols:edit-outline' width={16} height={16} />
+            Edit
+          </Button>
+        </RequirePermission>
+      )}
 
       {FINANCE_INITIAL_BALANCE_STATUS.includes(
         props.row.original.transaction_type
@@ -148,7 +144,8 @@ const FinanceTable = () => {
       search: '',
       transactionType: '',
       bankId: '',
-      partyType: '',
+      customerId: '',
+      supplierId: '',
       sortBy: '',
       startDate: '',
       endDate: '',
@@ -158,7 +155,8 @@ const FinanceTable = () => {
       pageSize: 'limit',
       transactionType: 'transaction_type',
       bankId: 'bank_id',
-      partyType: 'party_type',
+      customerId: 'customer_id',
+      supplierId: 'supplier_id',
       sortBy: 'sort_date',
       startDate: 'start_date',
       endDate: 'end_date',
@@ -172,17 +170,24 @@ const FinanceTable = () => {
     search: '',
     transactionType: '',
     bankId: '',
-    partyType: '',
+    customerId: '',
+    supplierId: '',
     sortBy: '',
     startDate: '',
     endDate: '',
   });
-  const [selectedTransactionType, setSelectedTransactionType] =
-    useState<OptionType | null>(null);
-  const [selectedBank, setSelectedBank] = useState<OptionType | null>(null);
-  const [selectedPartyType, setSelectedPartyType] = useState<OptionType | null>(
-    null
-  );
+  const [selectedTransactionType, setSelectedTransactionType] = useState<
+    OptionType | OptionType[] | null
+  >(null);
+  const [selectedBank, setSelectedBank] = useState<
+    OptionType | OptionType[] | null
+  >(null);
+  const [selectedCustomerId, setSelectedCustomerId] = useState<
+    OptionType | OptionType[] | null
+  >(null);
+  const [selectedSupplierId, setSelectedSupplierId] = useState<
+    OptionType | OptionType[] | null
+  >(null);
   const [selectedSortBy, setSelectedSortBy] = useState<OptionType | null>(null);
   const [selectedFinance, setSelectedFinance] = useState<Finance | null>(null);
   const [isDeleteLoading, setIsDeleteLoading] = useState(false);
@@ -197,27 +202,18 @@ const FinanceTable = () => {
     FinanceApi.getAllFetcher
   );
 
-  // ===== Options =====
-  const transactionTypeOptions = useMemo(() => {
-    return [
-      { label: 'Customer', value: 'CUSTOMER' },
-      { label: 'Supplier', value: 'SUPPLIER' },
-    ];
-  }, []);
   const {
-    options: partyTypeOptions,
-    isLoadingOptions: partyTypeIsLoadingOptions,
-    setInputValue: partyTypeInputValue,
-    loadMore: partyTypeLoadMore,
-  } = useSelect(
-    selectedTransactionType
-      ? selectedTransactionType.value === 'CUSTOMER'
-        ? CustomerApi.basePath
-        : SupplierApi.basePath
-      : '',
-    'id',
-    'name'
-  );
+    options: customerOptions,
+    isLoadingOptions: customerIsLoadingOptions,
+    setInputValue: customerInputValue,
+    loadMore: customerLoadMore,
+  } = useSelect(CustomerApi.basePath, 'id', 'name');
+  const {
+    options: supplierOptions,
+    isLoadingOptions: supplierIsLoadingOptions,
+    setInputValue: supplierInputValue,
+    loadMore: supplierLoadMore,
+  } = useSelect(SupplierApi.basePath, 'id', 'name');
   const sortByOptions = useMemo(() => {
     return [
       { label: 'Tanggal Pembayaran', value: 'payment_date' },
@@ -238,24 +234,47 @@ const FinanceTable = () => {
   const transactionTypeChangeHandler = (
     val: OptionType | OptionType[] | null
   ) => {
-    setSelectedTransactionType(val as OptionType);
+    setSelectedTransactionType(val);
     setPendingFilters((prev) => ({
       ...prev,
-      transactionType: val ? ((val as OptionType).value as string) : '',
+      transactionType: val
+        ? Array.isArray(val)
+          ? val.map((item) => item.value).join(',')
+          : (val.value as string)
+        : '',
     }));
   };
   const bankChangeHandler = (val: OptionType | OptionType[] | null) => {
-    setSelectedBank(val as OptionType);
+    setSelectedBank(val);
     setPendingFilters((prev) => ({
       ...prev,
-      bankId: val ? ((val as OptionType).value as string) : '',
+      bankId: val
+        ? Array.isArray(val)
+          ? val.map((item) => item.value).join(',')
+          : (val.value as string)
+        : '',
     }));
   };
-  const partyTypeChangeHandler = (val: OptionType | OptionType[] | null) => {
-    setSelectedPartyType(val as OptionType);
+  const customerIdChangeHandler = (val: OptionType | OptionType[] | null) => {
+    setSelectedCustomerId(val);
     setPendingFilters((prev) => ({
       ...prev,
-      partyType: val ? ((val as OptionType).value as string) : '',
+      customerId: val
+        ? Array.isArray(val)
+          ? val.map((item) => item.value).join(',')
+          : (val.value as string)
+        : '',
+    }));
+  };
+  const supplierIdChangeHandler = (val: OptionType | OptionType[] | null) => {
+    setSelectedSupplierId(val);
+    setPendingFilters((prev) => ({
+      ...prev,
+      supplierId: val
+        ? Array.isArray(val)
+          ? val.map((item) => item.value).join(',')
+          : (val.value as string)
+        : '',
     }));
   };
   const sortByChangeHandler = (val: OptionType | OptionType[] | null) => {
@@ -279,7 +298,8 @@ const FinanceTable = () => {
     updateFilter('search', pendingFilters.search);
     updateFilter('transactionType', pendingFilters.transactionType);
     updateFilter('bankId', pendingFilters.bankId);
-    updateFilter('partyType', pendingFilters.partyType);
+    updateFilter('customerId', pendingFilters.customerId);
+    updateFilter('supplierId', pendingFilters.supplierId);
     updateFilter('sortBy', pendingFilters.sortBy);
     updateFilter('startDate', pendingFilters.startDate);
     updateFilter('endDate', pendingFilters.endDate);
@@ -287,14 +307,16 @@ const FinanceTable = () => {
   const resetFilterHandler = () => {
     setSelectedTransactionType(null);
     setSelectedBank(null);
-    setSelectedPartyType(null);
+    setSelectedCustomerId(null);
+    setSelectedSupplierId(null);
     setSelectedSortBy(null);
 
     const emptyFilters = {
       search: '',
       transactionType: '',
       bankId: '',
-      partyType: '',
+      customerId: '',
+      supplierId: '',
       sortBy: '',
       startDate: '',
       endDate: '',
@@ -304,7 +326,8 @@ const FinanceTable = () => {
     updateFilter('search', '');
     updateFilter('transactionType', '');
     updateFilter('bankId', '');
-    updateFilter('partyType', '');
+    updateFilter('customerId', '');
+    updateFilter('supplierId', '');
     updateFilter('sortBy', '');
     updateFilter('startDate', '');
     updateFilter('endDate', '');
@@ -477,27 +500,34 @@ const FinanceTable = () => {
       >
         <div className='grid grid-cols-4 gap-6'>
           <SelectInput
-            options={transactionTypeOptions}
-            label='Tipe Transaksi'
+            options={FINANCE_TRANSACTION_TYPE_OPTIONS}
+            label='Jenis Transaksi'
             value={selectedTransactionType}
             onChange={transactionTypeChangeHandler}
             isClearable
+            isMulti
           />
           <SelectInput
-            options={partyTypeOptions}
-            label={
-              selectedTransactionType
-                ? selectedTransactionType.value === 'CUSTOMER'
-                  ? 'Pelanggan'
-                  : 'Supplier'
-                : 'Pihak'
-            }
-            value={selectedPartyType}
-            onChange={partyTypeChangeHandler}
-            onInputChange={partyTypeInputValue}
-            onMenuScrollToBottom={partyTypeLoadMore}
-            isLoading={partyTypeIsLoadingOptions}
+            options={customerOptions}
+            label={'Customer'}
+            value={selectedCustomerId}
+            onChange={customerIdChangeHandler}
+            onInputChange={customerInputValue}
+            onMenuScrollToBottom={customerLoadMore}
+            isLoading={customerIsLoadingOptions}
             isClearable
+            isMulti
+          />
+          <SelectInput
+            options={supplierOptions}
+            label={'Supplier'}
+            value={selectedSupplierId}
+            onChange={supplierIdChangeHandler}
+            onInputChange={supplierInputValue}
+            onMenuScrollToBottom={supplierLoadMore}
+            isLoading={supplierIsLoadingOptions}
+            isClearable
+            isMulti
           />
           <SelectInput
             options={
@@ -522,13 +552,7 @@ const FinanceTable = () => {
             onInputChange={bankInputValue}
             onMenuScrollToBottom={bankLoadMore}
             isClearable
-          />
-          <DebouncedTextInput
-            name='search'
-            label='Cari'
-            placeholder='Cari'
-            value={pendingFilters.search}
-            onChange={searchChangeHandler}
+            isMulti
           />
           <SelectInput
             options={sortByOptions}
@@ -549,6 +573,13 @@ const FinanceTable = () => {
             value={pendingFilters.endDate}
             onChange={endDateChangeHandler}
           />
+          <DebouncedTextInput
+            name='search'
+            label='Cari'
+            placeholder='Cari'
+            value={pendingFilters.search}
+            onChange={searchChangeHandler}
+          />
         </div>
       </Card>
       <Table<Finance>

src/components/pages/finance/add/initial-balance/FormFinanceAddInitialBalance.tsx

@@ -245,7 +245,11 @@ const FormFinanceAddInitialBalance = ({
               }
               required
               isClearable
-              isDisabled={!formik.values.party_type_option?.value}
+              isDisabled={
+                !formik.values.party_type_option?.value ||
+                (type === 'edit' &&
+                  formik.values.party_type_option?.value == 'SUPPLIER')
+              }
             />
             <SelectInput
               label='Bank'
@@ -323,6 +327,7 @@ const FormFinanceAddInitialBalance = ({
               }
               required
               isClearable
+              isDisabled={type == 'edit'}
             />
             <NumberInput
               label='Nominal'

src/config/constant.ts

@@ -389,6 +389,14 @@ export const FINANCE_INITIAL_BALANCE_TYPE_OPTIONS = [
   { label: 'Saldo Awal Negatif', value: 'NEGATIVE' },
 ];
 
+export const FINANCE_TRANSACTION_TYPE_OPTIONS = [
+  { label: 'Pembelian', value: 'PEMBELIAN' },
+  { label: 'Penjualan', value: 'PENJUALAN' },
+  { label: 'Biaya', value: 'BIAYA' },
+  { label: 'Saldo Awal', value: 'SALDO_AWAL' },
+  { label: 'Injection', value: 'INJECTION' },
+];
+
 export const FINANCE_TRANSACTION_STATUS = ['PENJUALAN', 'PEMBELIAN', 'BIAYA'];
 
 export const FINANCE_INITIAL_BALANCE_STATUS = ['SALDO_AWAL'];