chore: rename ExpenseForm to ExpenseRequestForm

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

@@ -10,12 +10,15 @@ import Button from '@/components/Button';
 import TextInput from '@/components/input/TextInput';
 import { useModal } from '@/components/Modal';
 import ConfirmationModal from '@/components/modal/ConfirmationModal';
+import SelectInput from '@/components/input/SelectInput';
+import DateInput from '@/components/input/DateInput';
+import ExpenseKandangsTable from '@/components/pages/expense/form/ExpenseKandangsTable';
 
 import {
-  ExpenseFormSchema,
-  ExpenseFormValues,
-  UpdateExpenseFormSchema,
-} from '@/components/pages/expense/form/ExpenseForm.schema';
+  ExpenseRequestFormSchema,
+  ExpenseRequestFormValues,
+  UpdateExpenseRequestFormSchema,
+} from '@/components/pages/expense/form/ExpenseRequestForm.schema';
 import { isResponseError } from '@/lib/api-helper';
 import {
   Expense,
@@ -31,7 +34,10 @@ interface ExpenseFormProps {
 }
 
 // TODO: integrate this with real API
-const ExpenseForm = ({ type = 'add', initialValues }: ExpenseFormProps) => {
+const ExpenseRequestForm = ({
+  type = 'add',
+  initialValues,
+}: ExpenseFormProps) => {
   const router = useRouter();
 
   // Modal hooks
@@ -72,16 +78,18 @@ const ExpenseForm = ({ type = 'add', initialValues }: ExpenseFormProps) => {
     [router]
   );
 
-  const formikInitialValues = useMemo<ExpenseFormValues>(() => {
+  const formikInitialValues = useMemo<ExpenseRequestFormValues>(() => {
     return {
       name: initialValues?.name ?? '',
     };
   }, [initialValues]);
 
-  const formik = useFormik<ExpenseFormValues>({
+  const formik = useFormik<ExpenseRequestFormValues>({
     initialValues: formikInitialValues,
     validationSchema:
-      type === 'edit' ? UpdateExpenseFormSchema : ExpenseFormSchema,
+      type === 'edit'
+        ? UpdateExpenseRequestFormSchema
+        : ExpenseRequestFormSchema,
     onSubmit: async (values) => {
       setExpenseFormErrorMessage('');
 
@@ -161,8 +169,15 @@ const ExpenseForm = ({ type = 'add', initialValues }: ExpenseFormProps) => {
           onReset={formik.handleReset}
           className='w-full mt-8 flex flex-col gap-6'
         >
-          <div className='flex flex-col gap-4'>
-            <TextInput
+          <div className='grid grid-cols-12 gap-4'>
+            <SelectInput
+              label='Lokasi'
+              placeholder='Pilih Lokasi'
+              options={[]}
+              className={{ wrapper: 'col-span-12 sm:col-span-6' }}
+            />
+
+            {/* <TextInput
               required
               label='Nama'
               name='name'
@@ -173,6 +188,25 @@ const ExpenseForm = ({ type = 'add', initialValues }: ExpenseFormProps) => {
               isError={formik.touched.name && Boolean(formik.errors.name)}
               errorMessage={formik.errors.name}
               readOnly={type === 'detail'}
+              className={{
+                wrapper: 'col-span-12 sm:col-span-6',
+              }}
+            /> */}
+
+            <DateInput
+              name='transaction_date'
+              label='Tanggal Transaksi'
+              className={{
+                wrapper: 'col-span-12 sm:col-span-6',
+              }}
+            />
+
+            <ExpenseKandangsTable
+              type={type}
+              locationId={2}
+              className={{
+                wrapper: 'w-full col-span-12',
+              }}
             />
           </div>
 
@@ -300,4 +334,4 @@ const ExpenseForm = ({ type = 'add', initialValues }: ExpenseFormProps) => {
   );
 };
 
-export default ExpenseForm;
+export default ExpenseRequestForm;