feat(FE-92-93-105-106): slicing ui chickin DOC and integrate with API

src/components/pages/production/chickin/form/ChickinForm.schema.ts

@@ -0,0 +1,9 @@
+import * as Yup from 'yup';
+
+export const ChickinFormSchema = Yup.object({
+  chick_in_date: Yup.string().required('Tanggal masuk wajib diisi!'),
+})
+
+export type ChickinFormValues = Yup.InferType<typeof ChickinFormSchema>;
+
+export const UpdateChickinFormSchema = ChickinFormSchema;

src/components/pages/production/chickin/form/ChickinForm.tsx

@@ -0,0 +1,179 @@
+'use client';
+
+import Button from '@/components/Button';
+import {
+  Chickin,
+  CreateChickinPayload,
+  UpdateChickinPayload,
+} from '@/types/api/production/chickin';
+import {
+  ChickinFormSchema,
+  ChickinFormValues,
+  UpdateChickinFormSchema,
+} from '@/components/pages/production/chickin/form/ChickinForm.schema';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useFormik } from 'formik';
+import { ChickinApi } from '@/services/api/production';
+import DateInput from '@/components/input/DateInput';
+import { isResponseError } from '@/lib/api-helper';
+import toast from 'react-hot-toast';
+import { Icon } from '@iconify/react';
+
+interface ChickinFormProps {
+  formType?: 'add' | 'detail' | 'edit';
+  initialValues?: Chickin;
+  afterSubmit?: () => void;
+}
+
+const ChickinForm = ({
+  formType = 'add',
+  initialValues,
+  afterSubmit,
+}: ChickinFormProps) => {
+  // Helper Function
+  const formatDateForInput = (dateString?: string): string => {
+    if (!dateString) return '';
+    return new Date(dateString).toISOString().split('T')[0];
+  };
+
+  // State
+  const [chickinFormErrorMessage, setChickinFormErrorMessage] = useState('');
+
+  // Initial Value
+  const formikInitialValue = useMemo<ChickinFormValues>(() => {
+    return {
+      chick_in_date: formatDateForInput(initialValues?.chick_in_date) ?? '',
+    };
+  }, [initialValues]);
+
+  // Handle Submit Function
+  const handleCreate = useCallback(
+    async (
+      payload: CreateChickinPayload,
+      afterSubmit: (() => void) | undefined
+    ) => {
+      const res = await ChickinApi.create(payload);
+      if (isResponseError(res)) {
+        setChickinFormErrorMessage(res.message);
+        return;
+      }
+      toast.success(res?.message as string);
+      afterSubmit?.();
+    },
+    []
+  );
+  const handleUpdate = useCallback(
+    async (
+      payload: UpdateChickinPayload,
+      afterSubmit: (() => void) | undefined
+    ) => {
+      const res = await ChickinApi.update(
+        payload.project_flock_kandang_id as number,
+        payload
+      );
+      if (isResponseError(res)) {
+        setChickinFormErrorMessage(res.message);
+        return;
+      }
+      toast.success(res?.message as string);
+      afterSubmit?.();
+    },
+    []
+  );
+
+  // Formik
+  const formik = useFormik<ChickinFormValues>({
+    initialValues: formikInitialValue,
+    enableReinitialize: true,
+    validationSchema:
+      formType === 'edit' ? UpdateChickinFormSchema : ChickinFormSchema,
+    onSubmit: async (values) => {
+      // reset error message
+      setChickinFormErrorMessage('');
+
+      if (initialValues?.project_flock_kandang?.id == undefined) {
+        return;
+      }
+
+      // create payload
+      const payload = {
+        chick_in_date: values.chick_in_date,
+        project_flock_kandang_id: initialValues?.project_flock_kandang?.id,
+      };
+
+      // cek type form yang disubmit
+      switch (formType) {
+        case 'add':
+          handleCreate(payload, afterSubmit);
+          break;
+        case 'edit':
+          handleUpdate(payload, afterSubmit);
+          break;
+        default:
+          break;
+      }
+    },
+  });
+
+  // Initialize Formik
+  const { setValues: formikSetValues } = formik;
+  useEffect(() => {
+    formikSetValues(formikInitialValue);
+  }, [formikSetValues, formikInitialValue]);
+
+  return (
+    <>
+      <form
+        className='min-h-48 flex flex-col gap-4'
+        onSubmit={formik.handleSubmit}
+        onReset={formik.handleReset}
+      >
+        <DateInput
+          value={formik.values.chick_in_date}
+          onChange={formik.handleChange}
+          onBlur={formik.handleBlur}
+          name='chick_in_date'
+          label='Tanggal Chickin'
+          required
+          isError={
+            formik.touched.chick_in_date && Boolean(formik.errors.chick_in_date)
+          }
+          errorMessage={formik.errors.chick_in_date}
+        />
+        {initialValues?.project_flock_kandang?.id == undefined && (
+          <p className='text-error'>Project Flock Kandang tidak ditemukan.</p>
+        )}
+        {chickinFormErrorMessage && (
+          <div
+            role='alert'
+            className='alert alert-error'
+            onClick={() => {
+              setChickinFormErrorMessage('');
+            }}
+          >
+            <Icon icon='mdi:times' />
+            <span>{chickinFormErrorMessage}</span>
+          </div>
+        )}
+        <div className='flex justify-center mt-auto gap-2'>
+          <Button color='warning' type='reset'>
+            Reset
+          </Button>
+          <Button
+            type='submit'
+            isLoading={formik.isSubmitting}
+            disabled={
+              !formik.isValid ||
+              formik.isSubmitting ||
+              !initialValues?.project_flock_kandang?.id
+            }
+          >
+            Submit
+          </Button>
+        </div>
+      </form>
+    </>
+  );
+};
+
+export default ChickinForm;