refactor(FE-435,436): Allow optional kandang and location expenses

src/components/pages/expense/form/ExpenseRequestKandangDetailExpense.tsx

@@ -22,6 +22,10 @@ interface ExpenseRequestKandangDetailExpenseProps {
   type?: 'add' | 'edit' | 'detail';
   formik: FormikContextType<ExpenseRequestFormValues>;
   supplierId?: number;
+  location?: {
+    value: number;
+    label: string;
+  };
   className?: {
     wrapper?: string;
   };
@@ -29,7 +33,7 @@ interface ExpenseRequestKandangDetailExpenseProps {
 
 const ExpenseRequestKandangDetailExpense: React.FC<
   ExpenseRequestKandangDetailExpenseProps
-> = ({ type, formik, supplierId, className }) => {
+> = ({ type, formik, supplierId, location, className }) => {
   const {
     setInputValue: setNonstockInputValue,
     options: nonstockOptions,
@@ -120,32 +124,42 @@ const ExpenseRequestKandangDetailExpense: React.FC<
       </div>
 
       <div className='w-full flex flex-col gap-6'>
-        {(formik.values.expense_nonstocks.length === 0 ||
-          !formik.values.supplier?.value) && (
+        {!formik.values.supplier?.value && (
           <div>
             <p className='text-sm text-gray-400 text-center'>
-              Pilih kandang terlebih dahulu!
+              Pilih supplier terlebih dahulu!
             </p>
           </div>
         )}
 
+        {formik.values.expense_nonstocks.length === 0 &&
+          formik.values.supplier?.value && (
+            <div>
+              <p className='text-sm text-gray-400 text-center'>
+                Belum ada item biaya. Silakan pilih lokasi terlebih dahulu.
+              </p>
+            </div>
+          )}
+
         {formik.values.expense_nonstocks.length > 0 &&
           formik.values.supplier?.value &&
           formik.values.expense_nonstocks.map(
             (kandangExpense, kandangExpenseIdx) => {
-              const kandangName = formik.values.kandangs?.find(
-                (kandang) => kandang.id === kandangExpense.kandang_id
-              );
+              const kandangName = kandangExpense.kandang_id
+                ? formik.values.kandangs?.find(
+                    (kandang) => kandang.id === kandangExpense.kandang_id
+                  )
+                : null;
 
               return (
-                kandangName?.name && (
+                (kandangName?.name || !kandangExpense.kandang_id) && (
                   <div
                     key={`kandangExpense-${kandangExpenseIdx}`}
                     className='w-full flex flex-col gap-4'
                   >
                     <div>
                       <h5 className='mb-2 text-lg font-bold text-center'>
-                        Biaya {kandangName?.name}
+                        Biaya {kandangName?.name || location?.label || 'Umum'}
                       </h5>
 
                       <div className='overflow-x-auto'>