From e6acfc12147f9323ecf44c03691783cc72a675dd Mon Sep 17 00:00:00 2001
From: ValdiANS <rvdans002@gmail.com>
Date: Thu, 2 Oct 2025 12:01:00 +0700
Subject: [PATCH] feat(FE-40): create NonstockForm component

---
 .../nonstock/form/NonstockForm.schema.ts      |   9 +
 .../nonstock/form/NonstockForm.tsx            | 178 ++++++++++++++++++
 2 files changed, 187 insertions(+)
 create mode 100644 src/components/pages/master-data/nonstock/form/NonstockForm.schema.ts
 create mode 100644 src/components/pages/master-data/nonstock/form/NonstockForm.tsx

diff --git a/src/components/pages/master-data/nonstock/form/NonstockForm.schema.ts b/src/components/pages/master-data/nonstock/form/NonstockForm.schema.ts
new file mode 100644
index 00000000..50f69c7d
--- /dev/null
+++ b/src/components/pages/master-data/nonstock/form/NonstockForm.schema.ts
@@ -0,0 +1,9 @@
+import * as Yup from 'yup';
+
+export const NonstockFormSchema = Yup.object({
+  name: Yup.string().required('Nama wajib diisi!'),
+});
+
+export const UpdateNonstockFormSchema = NonstockFormSchema;
+
+export type NonstockFormValues = Yup.InferType<typeof NonstockFormSchema>;
diff --git a/src/components/pages/master-data/nonstock/form/NonstockForm.tsx b/src/components/pages/master-data/nonstock/form/NonstockForm.tsx
new file mode 100644
index 00000000..bf2fce73
--- /dev/null
+++ b/src/components/pages/master-data/nonstock/form/NonstockForm.tsx
@@ -0,0 +1,178 @@
+'use client';
+
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useRouter } from 'next/navigation';
+import { useFormik } from 'formik';
+
+import { Icon } from '@iconify/react';
+import Button from '@/components/Button';
+import TextInput from '@/components/input/TextInput';
+
+import {
+  NonstockFormSchema,
+  NonstockFormValues,
+  UpdateNonstockFormSchema,
+} from '@/components/pages/master-data/nonstock/form/NonstockForm.schema';
+import { isResponseError } from '@/lib/api-helper';
+import {
+  CreateNonstockPayload,
+  Nonstock,
+  UpdateNonstockPayload,
+} from '@/types/api/master-data/nonstock';
+import {
+  createNonstock,
+  updateNonstock,
+} from '@/services/api/master-data/nonstock';
+
+interface NonstockFormProps {
+  type?: 'add' | 'edit' | 'detail';
+  initialValues?: Nonstock;
+}
+
+const NonstockForm = ({ type = 'add', initialValues }: NonstockFormProps) => {
+  const router = useRouter();
+
+  const [nonstockFormErrorMessage, setNonstockFormErrorMessage] = useState('');
+
+  const createNonstockHandler = useCallback(
+    async (payload: CreateNonstockPayload) => {
+      const createNonstockRes = await createNonstock(payload);
+
+      if (isResponseError(createNonstockRes)) {
+        setNonstockFormErrorMessage(createNonstockRes.message);
+        return;
+      }
+
+      alert(createNonstockRes?.message);
+      router.push('/master-data/nonstock');
+    },
+    [router]
+  );
+
+  const updateNonstockHandler = useCallback(
+    async (nonstockId: number, payload: UpdateNonstockPayload) => {
+      const updateNonstockRes = await updateNonstock(nonstockId, payload);
+
+      if (updateNonstockRes?.status === 'error') {
+        setNonstockFormErrorMessage(updateNonstockRes.message);
+        return;
+      }
+
+      alert(updateNonstockRes?.message);
+      router.refresh();
+      router.push('/master-data/nonstock');
+    },
+    [router]
+  );
+
+  const formikInitialValues = useMemo<NonstockFormValues>(() => {
+    return {
+      name: initialValues?.name ?? '',
+    };
+  }, [initialValues]);
+
+  const formik = useFormik<NonstockFormValues>({
+    initialValues: formikInitialValues,
+    validationSchema:
+      type === 'edit' ? UpdateNonstockFormSchema : NonstockFormSchema,
+    onSubmit: async (values) => {
+      setNonstockFormErrorMessage('');
+
+      const nonstockPayload: CreateNonstockPayload = {
+        name: values.name,
+      };
+
+      switch (type) {
+        case 'add':
+          await createNonstockHandler(nonstockPayload);
+          break;
+
+        case 'edit':
+          await updateNonstockHandler(
+            initialValues?.id as number,
+            nonstockPayload
+          );
+          break;
+      }
+    },
+  });
+
+  useEffect(() => {
+    formik.setValues(formikInitialValues);
+  }, [formikInitialValues]);
+
+  return (
+    <section className='w-full max-w-xl'>
+      <header className='flex flex-col gap-4'>
+        <Button
+          href='/master-data/nonstock'
+          variant='link'
+          className='w-fit p-0 text-primary'
+        >
+          <Icon icon='uil:arrow-left' width={24} height={24} />
+          Kembali
+        </Button>
+
+        <h1 className='text-2xl font-bold text-center'>
+          {type === 'add' && 'Tambah Non Stock'}
+          {type === 'edit' && 'Edit Non Stock'}
+          {type === 'detail' && 'Detail Non Stock'}
+        </h1>
+      </header>
+
+      <form
+        onSubmit={formik.handleSubmit}
+        onReset={formik.handleReset}
+        className='w-full mt-8 flex flex-col gap-6'
+      >
+        <div className='flex flex-col gap-4'>
+          <TextInput
+            required
+            label='Nama'
+            name='name'
+            placeholder='Masukkan nama user'
+            value={formik.values.name}
+            onChange={formik.handleChange}
+            onBlur={formik.handleBlur}
+            isError={formik.touched.name && Boolean(formik.errors.name)}
+            errorMessage={formik.errors.name}
+            readOnly={type === 'detail'}
+          />
+        </div>
+
+        {type !== 'detail' && (
+          <>
+            <div className='flex flex-row justify-end gap-2'>
+              <Button type='reset' color='error' className='px-4'>
+                Reset
+              </Button>
+
+              <Button
+                type='submit'
+                color='primary'
+                isLoading={formik.isSubmitting}
+                disabled={!formik.isValid || formik.isSubmitting}
+                className='px-4'
+              >
+                Submit
+              </Button>
+            </div>
+
+            {nonstockFormErrorMessage && (
+              <div role='alert' className='alert alert-error'>
+                <Icon
+                  icon='material-symbols:error-outline'
+                  width={24}
+                  height={24}
+                />
+                <span>{nonstockFormErrorMessage}</span>
+              </div>
+            )}
+          </>
+        )}
+      </form>
+    </section>
+  );
+};
+
+export default NonstockForm;