From 88fe135cb40a7d0db9a4d5b35319d5bf9fc17309 Mon Sep 17 00:00:00 2001
From: Adnan Zahir <adnanzaidanz@gmail.com>
Date: Fri, 3 Oct 2025 21:58:55 +0700
Subject: [PATCH 01/10] chore(CI): added gitlab ci yaml file for notify MR and
 MR-merged events

---
 .gitlab-ci.yml | 76 ++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 76 insertions(+)
 create mode 100644 .gitlab-ci.yml

diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml
new file mode 100644
index 00000000..efda72f0
--- /dev/null
+++ b/.gitlab-ci.yml
@@ -0,0 +1,76 @@
+stages: [notify]
+
+# --- Notify when MR is opened/updated ---
+notify_discord_mr:
+  stage: notify
+  image: alpine:3.20
+  rules:
+    - if: '$CI_PIPELINE_SOURCE == "merge_request_event"'
+  variables:
+    WEBHOOK_URL: $DISCORD_WEBHOOK_URL
+  before_script:
+    - apk add --no-cache curl jq
+  script: |
+    MR_URL="${CI_PROJECT_URL}/-/merge_requests/${CI_MERGE_REQUEST_IID}"
+
+    jq -n \
+      --arg repo "$CI_PROJECT_PATH" \
+      --arg mr "#${CI_MERGE_REQUEST_IID}" \
+      --arg url "$MR_URL" \
+      --arg requestor "${GITLAB_USER_LOGIN:-$GITLAB_USER_NAME}" \
+      --arg source "$CI_MERGE_REQUEST_SOURCE_BRANCH_NAME" \
+      --arg target "$CI_MERGE_REQUEST_TARGET_BRANCH_NAME" \
+      --arg title "$CI_MERGE_REQUEST_TITLE" \
+      '{
+        username: "CI Bot - FE",
+        embeds: [{
+          title: "📣 [LTI WEB CLIENT] Merge Request Opened/Updated",
+          description: ($mr + " in " + $repo),
+          url: $url,
+          color: 3447003,
+          fields: [
+            {name: "Author", value: $requestor, inline: true},
+            {name: "Source → Target", value: ($source + " → " + $target), inline: true},
+            {name: "Title", value: $title}
+          ]
+        }]
+      }' \
+      | curl -sS -H "Content-Type: application/json" -d @- "$WEBHOOK_URL"
+
+# --- Notify when MR is merged ---
+notify_discord_merge:
+  stage: notify
+  image: alpine:3.20
+  rules:
+    # Only run for merge request pipelines that are in merged state
+    - if: '$CI_PIPELINE_SOURCE == "merge_request_event" && $CI_MERGE_REQUEST_STATE == "merged"'
+  variables:
+    WEBHOOK_URL: $DISCORD_WEBHOOK_URL
+  before_script:
+    - apk add --no-cache curl jq
+  script: |
+    MR_URL="${CI_PROJECT_URL}/-/merge_requests/${CI_MERGE_REQUEST_IID}"
+
+    jq -n \
+      --arg repo "$CI_PROJECT_PATH" \
+      --arg mr "#${CI_MERGE_REQUEST_IID}" \
+      --arg url "$MR_URL" \
+      --arg requestor "${CI_MERGE_REQUEST_AUTHOR}" \
+      --arg source "$CI_MERGE_REQUEST_SOURCE_BRANCH_NAME" \
+      --arg target "$CI_MERGE_REQUEST_TARGET_BRANCH_NAME" \
+      --arg title "$CI_MERGE_REQUEST_TITLE" \
+      '{
+        username: "CI Bot - FE",
+        embeds: [{
+          title: "✅ [LTI WEB CLIENT] Merge Request Merged",
+          description: ($mr + " has been merged into " + $repo),
+          url: $url,
+          color: 3066993,
+          fields: [
+            {name: "Author", value: $requestor, inline: true},
+            {name: "Source → Target", value: ($source + " → " + $target), inline: true},
+            {name: "Title", value: $title}
+          ]
+        }]
+      }' \
+      | curl -sS -H "Content-Type: application/json" -d @- "$WEBHOOK_URL"

From 21b93963230ae90e5a8b489e465951152aead512 Mon Sep 17 00:00:00 2001
From: sweetpotet <sweetpotet@11970a58990e>
Date: Wed, 8 Oct 2025 16:40:30 +0700
Subject: [PATCH 02/10] feat(FE-33): create customers forms

---
 src/app/master-data/customer/add/page.tsx     |  11 +
 .../master-data/customer/detail/edit/page.tsx |   0
 src/app/master-data/customer/detail/page.tsx  |   0
 src/app/master-data/customer/page.tsx         |  11 +
 src/components/helper/RequireAuth.tsx         | 160 +++++++-
 src/components/input/TextArea.tsx             | 124 ++++++
 .../master-data/customer/CustomersTable.tsx   | 245 ++++++++++++
 .../customer/form/CustomerForm.schema.ts      |  40 ++
 .../customer/form/CustomerForm.tsx            | 377 ++++++++++++++++++
 src/config/constant.ts                        |  11 +
 src/services/api/master-data.ts               |  11 +
 src/types/api/master-data/customer.d.ts       |  27 ++
 12 files changed, 1008 insertions(+), 9 deletions(-)
 create mode 100644 src/app/master-data/customer/add/page.tsx
 create mode 100644 src/app/master-data/customer/detail/edit/page.tsx
 create mode 100644 src/app/master-data/customer/detail/page.tsx
 create mode 100644 src/app/master-data/customer/page.tsx
 create mode 100644 src/components/input/TextArea.tsx
 create mode 100644 src/components/pages/master-data/customer/CustomersTable.tsx
 create mode 100644 src/components/pages/master-data/customer/form/CustomerForm.schema.ts
 create mode 100644 src/components/pages/master-data/customer/form/CustomerForm.tsx
 create mode 100644 src/types/api/master-data/customer.d.ts

diff --git a/src/app/master-data/customer/add/page.tsx b/src/app/master-data/customer/add/page.tsx
new file mode 100644
index 00000000..274b7d90
--- /dev/null
+++ b/src/app/master-data/customer/add/page.tsx
@@ -0,0 +1,11 @@
+import CustomerForm from "@/components/pages/master-data/customer/form/CustomerForm";
+
+const AddNonstock = () => {
+  return (
+    <section>
+      <CustomerForm/>
+    </section>
+  );
+}
+
+export default AddNonstock;
\ No newline at end of file
diff --git a/src/app/master-data/customer/detail/edit/page.tsx b/src/app/master-data/customer/detail/edit/page.tsx
new file mode 100644
index 00000000..e69de29b
diff --git a/src/app/master-data/customer/detail/page.tsx b/src/app/master-data/customer/detail/page.tsx
new file mode 100644
index 00000000..e69de29b
diff --git a/src/app/master-data/customer/page.tsx b/src/app/master-data/customer/page.tsx
new file mode 100644
index 00000000..56281702
--- /dev/null
+++ b/src/app/master-data/customer/page.tsx
@@ -0,0 +1,11 @@
+import CustomersTable from "@/components/pages/master-data/customer/CustomersTable";
+
+const Nonstock = () => {
+  return (
+    <section>
+      <CustomersTable />
+    </section>
+  )
+};
+
+export default Nonstock;
\ No newline at end of file
diff --git a/src/components/helper/RequireAuth.tsx b/src/components/helper/RequireAuth.tsx
index 9bc199f9..1d9d86b4 100644
--- a/src/components/helper/RequireAuth.tsx
+++ b/src/components/helper/RequireAuth.tsx
@@ -9,6 +9,145 @@ import { httpClientFetcher, SWRHttpKey } from '@/services/http/client';
 import { isResponseSuccess } from '@/lib/api-helper';
 import { GetMeResponse } from '@/types/api/api-general';
 
+// TODO: delete this later, DONT HARDCODE USER DATA
+const DUMMY_USER = {
+  id: 1,
+  email: 'admin@mbugroup.id',
+  npk: '0001',
+  name: 'Super Admin',
+  image: null,
+  created_at: '2025-09-30T03:24:20.899229Z',
+  updated_at: '2025-09-30T03:24:20.899229Z',
+  roles: [
+    {
+      id: 1,
+      key: 'mbu.super_admin',
+      name: 'MBU Administrator',
+      client: {
+        id: 1,
+        name: 'PT Mitra Berlian Unggas',
+        alias: 'MBU',
+      },
+      permissions: [
+        {
+          id: 1,
+          name: 'mbu:purchase:read',
+          action: 'read',
+          client: {
+            id: 1,
+            name: 'PT Mitra Berlian Unggas',
+            alias: 'MBU',
+          },
+        },
+        {
+          id: 2,
+          name: 'mbu:purchase:create',
+          action: 'create',
+          client: {
+            id: 1,
+            name: 'PT Mitra Berlian Unggas',
+            alias: 'MBU',
+          },
+        },
+        {
+          id: 3,
+          name: 'mbu:purchase:approve',
+          action: 'approve',
+          client: {
+            id: 1,
+            name: 'PT Mitra Berlian Unggas',
+            alias: 'MBU',
+          },
+        },
+      ],
+    },
+    {
+      id: 2,
+      key: 'lti.super_admin',
+      name: 'LTI Administrator',
+      client: {
+        id: 2,
+        name: 'PT Lumbung Telur Indonesia',
+        alias: 'LTI',
+      },
+      permissions: [
+        {
+          id: 4,
+          name: 'lti:purchase:read',
+          action: 'read',
+          client: {
+            id: 2,
+            name: 'PT Lumbung Telur Indonesia',
+            alias: 'LTI',
+          },
+        },
+        {
+          id: 5,
+          name: 'lti:purchase:create',
+          action: 'create',
+          client: {
+            id: 2,
+            name: 'PT Lumbung Telur Indonesia',
+            alias: 'LTI',
+          },
+        },
+        {
+          id: 6,
+          name: 'lti:purchase:approve',
+          action: 'approve',
+          client: {
+            id: 2,
+            name: 'PT Lumbung Telur Indonesia',
+            alias: 'LTI',
+          },
+        },
+      ],
+    },
+    {
+      id: 3,
+      key: 'manbu.super_admin',
+      name: 'MANBU Administrator',
+      client: {
+        id: 3,
+        name: 'PT Mandiri Berlian Unggas',
+        alias: 'MANBU',
+      },
+      permissions: [
+        {
+          id: 7,
+          name: 'manbu:purchase:read',
+          action: 'read',
+          client: {
+            id: 3,
+            name: 'PT Mandiri Berlian Unggas',
+            alias: 'MANBU',
+          },
+        },
+        {
+          id: 8,
+          name: 'manbu:purchase:create',
+          action: 'create',
+          client: {
+            id: 3,
+            name: 'PT Mandiri Berlian Unggas',
+            alias: 'MANBU',
+          },
+        },
+        {
+          id: 9,
+          name: 'manbu:purchase:approve',
+          action: 'approve',
+          client: {
+            id: 3,
+            name: 'PT Mandiri Berlian Unggas',
+            alias: 'MANBU',
+          },
+        },
+      ],
+    },
+  ],
+};
+
 interface RequireAuthProps {
   children?: ReactNode;
 }
@@ -37,19 +176,22 @@ const RequireAuth = ({ children }: RequireAuthProps) => {
     if (isResponseSuccess(userResponse)) {
       setUser(userResponse.data);
     } else {
-      router.replace(process.env.NEXT_PUBLIC_SSO_LOGIN_URL as string);
+      // router.replace(process.env.NEXT_PUBLIC_SSO_LOGIN_URL as string);
+      // TODO: remove this later, DONT HARDCODE USER DATA
+      setUser(DUMMY_USER);
     }
   }, [userResponse, setIsLoadingUser, setUser]);
 
-  if (isLoadingUserResponse && !userResponse) {
-    return (
-      <div className='w-full flex flex-row justify-center items-center p-4'>
-        <span className='loading loading-spinner loading-xl' />
-      </div>
-    );
-  }
+  // TODO: uncomment this later
+  // if (isLoadingUserResponse && !userResponse) {
+  //   return (
+  //     <div className='w-full flex flex-row justify-center items-center p-4'>
+  //       <span className='loading loading-spinner loading-xl' />
+  //     </div>
+  //   );
+  // }
 
   return <>{children}</>;
 };
 
-export default RequireAuth;
+export default RequireAuth;
\ No newline at end of file
diff --git a/src/components/input/TextArea.tsx b/src/components/input/TextArea.tsx
new file mode 100644
index 00000000..b4a6c9f5
--- /dev/null
+++ b/src/components/input/TextArea.tsx
@@ -0,0 +1,124 @@
+'use client';
+
+import {
+  ChangeEventHandler,
+  FocusEventHandler,
+  ReactNode,
+} from 'react';
+
+import { cn } from '@/lib/helper';
+
+export interface TextAreaProps {
+  label?: string;
+  bottomLabel?: string;
+  name: string;
+  value?: string | number;
+  placeholder?: string;
+  className?: {
+    wrapper?: string;
+    label?: string;
+    inputWrapper?: string;
+    input?: string;
+  };
+  isError?: boolean;
+  isValid?: boolean;
+  disabled?: boolean;
+  readOnly?: boolean;
+  required?: boolean;
+  isLoading?: boolean;
+  errorMessage?: string;
+  startAdornment?: ReactNode;
+  endAdornment?: ReactNode;
+  onChange?: ChangeEventHandler<HTMLTextAreaElement>;
+  onBlur?: FocusEventHandler<HTMLTextAreaElement>;
+  cols?: number;
+}
+
+const TextArea = ({
+  label,
+  bottomLabel,
+  name,
+  value,
+  placeholder,
+  className,
+  isError,
+  isValid,
+  errorMessage,
+  startAdornment,
+  endAdornment,
+  disabled = false,
+  required = false,
+  onChange,
+  onBlur,
+  readOnly = false,
+  isLoading = false,
+  cols = 3
+}: TextAreaProps) => {
+  return (
+    <div
+      className={cn(
+        'w-full flex flex-col gap-2 text-start',
+        className?.wrapper
+      )}
+    >
+      {label && (
+        <label
+          htmlFor={name}
+          className={cn(
+            'w-full text-sm font-normal leading-5',
+            {
+              'text-error': isError,
+            },
+            className?.label
+          )}
+        >
+          {label}
+          {required && (
+            <>
+              {' '}
+              <span className='tooltip tooltip-error' data-tip='required'>
+                <span className='text-error'> *</span>
+              </span>
+            </>
+          )}
+        </label>
+      )}
+        {startAdornment && startAdornment}
+
+        <textarea
+          className={cn(
+            'input h-12 px-4 py-2 text-base font-normal leading-6 w-full rounded-lg! outline-none! transition-all',
+            {
+              'border-error': isError,
+              'border-success!': isValid,
+            },
+            className?.inputWrapper
+          )}
+          id={name}
+          name={name}
+          placeholder={placeholder}
+          value={value}
+          cols={cols}
+          onChange={onChange}
+          onBlur={onBlur}
+          disabled={disabled}
+          readOnly={readOnly}
+        />
+
+        {(isLoading || endAdornment) && (
+          <div className='flex flex-row gap-2'>
+            {isLoading && <span className='loading loading-spinner' />}
+
+            {endAdornment && endAdornment}
+          </div>
+        )}
+
+      {!isError && bottomLabel && (
+        <p className='w-full text-sm opacity-60'>{bottomLabel}</p>
+      )}
+      {isError && <p className='w-full text-sm text-error'>{errorMessage}</p>}
+    </div>
+  );
+};
+
+export default TextArea;
diff --git a/src/components/pages/master-data/customer/CustomersTable.tsx b/src/components/pages/master-data/customer/CustomersTable.tsx
new file mode 100644
index 00000000..b2b210df
--- /dev/null
+++ b/src/components/pages/master-data/customer/CustomersTable.tsx
@@ -0,0 +1,245 @@
+'use client'
+
+import Button from "@/components/Button";
+import DebouncedTextInput from "@/components/input/DebouncedTextInput";
+import { useModal } from "@/components/Modal";
+import ConfirmationModal from "@/components/modal/ConfirmationModal";
+import Table from "@/components/Table";
+import RowCollapseOptions from "@/components/table/RowCollapseOptions";
+import RowDropdownOptions from "@/components/table/RowDropdownOptions";
+import { isResponseSuccess } from "@/lib/api-helper";
+import { cn } from "@/lib/helper";
+import { CustomerApi } from "@/services/api/master-data";
+import { useTableFilter } from "@/services/hooks/useTableFilter";
+import { Customer } from "@/types/api/master-data/customer";
+import { Icon } from "@iconify/react";
+import { 
+  CellContext, 
+  ColumnDef, 
+  ColumnSort,
+  SortingState,
+ } from "@tanstack/react-table";
+import { useState } from "react";
+import useSWR from "swr";
+
+const RowOptionsMenu = ({
+  type = 'dropdown',
+  props,
+  deleteClickHandler,
+} : {
+  type: 'dropdown' | 'collapse',
+  props: CellContext<Customer, unknown>;
+  deleteClickHandler: () => void;
+}) => {
+  return (
+    <div
+      tabIndex={type == 'dropdown' ? 0 : undefined}
+      className={cn(
+        {
+          'dropdown-content': type === 'dropdown',
+          'mt-2': type === 'collapse'
+        },
+        'p-2.5 mr-2 flex flex-col gap-1 bg-base-100 rounded-box z-10 border border-black/10 shadow'
+        )
+      }
+      >
+      <Button
+        className='justify-start text-sm'
+      >
+        <Icon icon='mdi:eye-outline' width={16} height={16}/> 
+        Detail
+      </Button>
+      <Button
+        className='justify-start text-sm'
+      >
+        <Icon icon='material-symbols:edit-outline' width={16} height={16} />
+        Edit
+      </Button>
+      <Button
+        className='text-error hover:text-inherit'
+      >
+        <Icon
+          icon='material-symbols:delete-outline-rounded'
+          width={16}
+          height={16}
+          className='justify-start text-sm'
+        />
+      </Button>
+    </div>
+  );
+}
+
+const CustomersTable = () => {
+  const {
+    state: tableFilterState,
+    updateFilter,
+    setPage,
+    setPageSize,
+    toQueryString: getTableFilterQueryString,
+  } = useTableFilter ({
+    initial: { search: '', nameSort: '', picSort: ''},
+    paramMap: {
+      page: 'page',
+      pageSize: 'limit',
+      nameSort: 'sort_name',
+      picSort: 'sort_pic',
+    }
+  });
+
+  const {
+    data: customers,
+    isLoading,
+    mutate: refreshCustomers 
+  } = useSWR(
+    `${CustomerApi.basePath}${getTableFilterQueryString()}`,
+    CustomerApi.getAllFetcher
+  );
+
+  const deleteModal = useModal();
+
+  const [selectedCustomer, setSelectedCustomer] = useState<Customer | undefined>(undefined);
+
+  const [isDeleteLoading, setIsDeleteLoading] = useState(false);
+
+  const customersColumns: ColumnDef<Customer>[] = [
+    {
+      header: '#',
+      cell: (props) =>
+        tableFilterState.pageSize * (tableFilterState.page - 1) +
+        props.row.index +
+        1,
+    },
+    {
+      accessorKey: 'name',
+      header: 'Nama',
+    },
+    {
+      accessorKey: 'pic',
+      header: 'PIC',
+      cell: (props) => props.row.original.pic.name,
+    },
+    {
+      accessorKey: 'type',
+      header: 'Type',
+      cell: (props) => props.row.original.type,
+    },
+    {
+      accessorKey: 'phone',
+      header: 'Phone',
+    },
+    {
+      accessorKey: 'email',
+      header: 'Email',
+    },
+    {
+      header: 'Aksi',
+      cell: (props) => {
+        const currentPageSize = props.table.getPaginationRowModel().rows.length;
+        const currentPageRows = props.table.getPaginationRowModel().flatRows;
+        const currentRowRelativeIndex =
+          currentPageRows.findIndex((r) => r.id === props.row.id) + 1;
+
+        const isLast2Rows = currentRowRelativeIndex > currentPageSize - 2;
+
+        const deleteClickHandler = () => {
+          setSelectedCustomer(props.row.original);
+          deleteModal.openModal();
+        };
+
+        return (
+          <>
+            {currentPageSize > 2 && (
+              <RowDropdownOptions isLast2Rows={isLast2Rows}>
+                <RowOptionsMenu
+                  type='dropdown'
+                  props={props}
+                  deleteClickHandler={deleteClickHandler}
+                />
+              </RowDropdownOptions>
+            )}
+
+            {currentPageSize <= 2 && (
+              <RowCollapseOptions>
+                <RowOptionsMenu
+                  type='dropdown'
+                  props={props}
+                  deleteClickHandler={deleteClickHandler}
+                />
+              </RowCollapseOptions>
+            )}
+          </>
+        );
+      },
+    },
+  ];
+
+
+  return (
+    <>
+      <div className='w-full p-0 sm:p-4'>
+        <div className='flex flex-col gap-2 mb-4'>
+          <div className='w-full flex flex-col sm:flex-row justify-between items-end sm:items-center gap-2'>
+            <div className='flex flex-row'>
+              <Button href='/master-data/customer/add' color='primary'>
+                <Icon icon='ic:round-plus' width={24} height={24} />
+                Tambah Customer
+              </Button>
+            </div>
+
+            <DebouncedTextInput
+              name='search'
+              placeholder='Cari Kandang'
+              value={tableFilterState.search}
+              className={{ wrapper: 'sm:max-w-3xs' }}
+            />
+          </div>
+
+          <div className='flex flex-row justify-end'>
+          </div>
+        </div>
+
+        <Table<Customer>
+          data={isResponseSuccess(customers) ? customers?.data : []}
+          columns={customersColumns}
+          pageSize={tableFilterState.pageSize}
+          page={isResponseSuccess(customers) ? customers?.meta?.page : 0}
+          totalItems={
+            isResponseSuccess(customers) ? customers?.meta?.total_results : 0
+          }
+          onPageChange={setPage}
+          isLoading={isLoading}
+          className={{
+            containerClassName: cn({
+              'mb-20':
+                isResponseSuccess(customers) && customers?.data?.length === 0,
+            }),
+            tableWrapperClassName: 'overflow-x-auto min-h-full!',
+            tableClassName: 'font-inter w-full table-auto min-h-full!',
+            headerRowClassName: 'border-b border-b-gray-200',
+            headerColumnClassName:
+              'px-6 py-3 text-xs font-semibold text-gray-500 last:flex last:flex-row last:justify-end',
+            bodyRowClassName: 'border-b border-b-gray-200',
+            bodyColumnClassName:
+              'px-6 py-3 last:flex last:flex-row last:justify-end',
+          }}
+        />
+      </div>
+
+      <ConfirmationModal
+        ref={deleteModal.ref}
+        type='error'
+        text={`Apakah anda yakin ingin menghapus data Kandang ini (${selectedCustomer?.name})?`}
+        secondaryButton={{
+          text: 'Tidak',
+        }}
+        primaryButton={{
+          text: 'Ya',
+          color: 'error',
+          isLoading: isDeleteLoading,
+        }}
+      />
+    </>
+  );
+}
+
+export default CustomersTable;
\ No newline at end of file
diff --git a/src/components/pages/master-data/customer/form/CustomerForm.schema.ts b/src/components/pages/master-data/customer/form/CustomerForm.schema.ts
new file mode 100644
index 00000000..7aedd73b
--- /dev/null
+++ b/src/components/pages/master-data/customer/form/CustomerForm.schema.ts
@@ -0,0 +1,40 @@
+import * as Yup from 'yup';
+
+export const CustomerFormSchema = Yup.object({
+  name: Yup.string()
+    .required('Nama wajib diisi!'),
+
+  picId: Yup.number()
+    .min(1, 'PIC wajib diisi!')
+    .required('PIC wajib diisi!'),
+
+  pic: Yup.object({
+    value: Yup.number().min(1).required(),
+    label: Yup.string().required(),
+  }).nullable(),
+
+  type: Yup.string()
+    .oneOf(['INDIVIDUAL', 'BISNIS'], 'Tipe harus INDIVIDUAL atau BISNIS')
+    .required('Tipe wajib diisi!'),
+
+  address: Yup.string()
+    .required('Alamat wajib diisi!'),
+
+  phone: Yup.string()
+    .matches(/^[0-9]+$/, 'Nomor telepon hanya boleh berisi angka!')
+    .min(10, 'Nomor telepon minimal 10 digit!')
+    .max(12, 'Nomor telepon maksimal 12 digit!')
+    .required('Nomor telepon wajib diisi!'),
+
+  email: Yup.string()
+    .email('Format email tidak valid!')
+    .required('Email wajib diisi!'),
+
+  account_number: Yup.string()
+    .matches(/^[0-9]+$/, 'Nomor rekening hanya boleh berisi angka!')
+    .required('Nomor rekening wajib diisi!'),
+});
+
+export const UpdateCustomerFormSchema = CustomerFormSchema;
+
+export type CustomerFormValues = Yup.InferType<typeof CustomerFormSchema>;
diff --git a/src/components/pages/master-data/customer/form/CustomerForm.tsx b/src/components/pages/master-data/customer/form/CustomerForm.tsx
new file mode 100644
index 00000000..7b744946
--- /dev/null
+++ b/src/components/pages/master-data/customer/form/CustomerForm.tsx
@@ -0,0 +1,377 @@
+'use client'
+
+import { useModal } from "@/components/Modal";
+import { isResponseError, isResponseSuccess } from "@/lib/api-helper";
+import { CustomerApi } from "@/services/api/master-data";
+import { CreateCustomerPayload, Customer, UpdateCustomerPayload } from "@/types/api/master-data/customer";
+import { useRouter } from "next/navigation";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import toast from "react-hot-toast";
+import { CustomerFormValues } from "./CustomerForm.schema";
+import { useFormik } from "formik";
+import Button from "@/components/Button";
+import { Icon } from "@iconify/react";
+import TextInput from "@/components/input/TextInput";
+import { cn } from "@/lib/helper";
+import ConfirmationModal from "@/components/modal/ConfirmationModal";
+import TextArea from "@/components/input/TextArea";
+import SelectInput, { OptionType } from "@/components/input/SelectInput";
+import useSWR from "swr";
+import { UserApi } from "@/services/api/user";
+import { CUSTOMER_TYPE_OPTIONS } from "@/config/constant";
+
+interface CustomerFormProps {
+  formType?: 'add' | 'edit' | 'detail';
+  initialValues?: Customer;
+}
+
+const CustomerForm = ({formType = 'add', initialValues} : CustomerFormProps) => {
+    // Setup Kebutuhan Form
+    const router = useRouter();
+    const deleteModal = useModal();
+
+    // Setup State
+    const [customerFormErrorMessage, setCustomerFormErrorMessage] = useState('');
+    const [isDeleteLoading, setIsDeleteLoading] = useState(false);
+    const [picSelectInputValue, setPicSelectInputValue] = useState('');
+    const [typeSelectInputValue, setTypeSelectInputValue] = useState('');
+
+    // Fetch Data
+    const picUrl = `${UserApi.basePath}?${new URLSearchParams({
+      search: picSelectInputValue ?? '',
+    })}`;
+
+    const { data: pic, isLoading: isLoadingPic } = useSWR(
+      picUrl,
+      UserApi.getAllFetcher
+    );
+
+    // -- Options data mapping
+    const picOptions = isResponseSuccess(pic)
+      ? pic?.data.map((area) => ({
+          value: area.id,
+          label: area.name,
+        }))
+      : [];
+    const typeOptions = CUSTOMER_TYPE_OPTIONS;  
+    
+
+    // Handler Event
+    const createCustomerHandler = useCallback(
+        async (payload : CreateCustomerPayload) => {
+            const createCustomerRes = await CustomerApi.create(payload);
+
+            if(isResponseError(createCustomerRes)){
+                setCustomerFormErrorMessage(createCustomerRes.message);
+                return;
+            }
+
+            toast.success(createCustomerRes?.message as string);
+            router.push('/master-data/customer');
+        },
+        [router]
+    );
+    const updateCustomerHandler = useCallback(
+        async (customerId : number, payload : UpdateCustomerPayload) => {
+            const updateCustomerRes = await CustomerApi.update(customerId, payload);
+
+            if(isResponseError(updateCustomerRes)){
+                setCustomerFormErrorMessage(updateCustomerRes.message);
+                return;
+            }
+
+            toast.success(updateCustomerRes?.message as string);
+            router.push('/master-data/customer');
+        },
+        [router]
+    );
+
+    const deleteCustomerHandler = () => {
+      deleteModal.openModal();
+    }
+
+    const confirmationModalDeleteclickHandler = async () => {
+      setIsDeleteLoading(true);
+
+      await CustomerApi.delete(initialValues?.id as number);
+
+      deleteModal.closeModal();
+      setIsDeleteLoading(false);
+      router.push('/master-data/customer');
+    };
+
+    // -- Option Handler
+    const picChangeHandler = (val: OptionType | OptionType[] | null) => {
+      formik.setFieldTouched('pic', true);
+      formik.setFieldValue('pic', val);
+
+      formik.setFieldTouched('picId', true);
+      formik.setFieldValue('picId', (val as OptionType)?.value);
+    }
+    const typeChangeHandler = (val: OptionType | OptionType[] | null) => {
+      formik.setFieldTouched('type', true);
+      formik.setFieldValue('type', val);
+    }
+
+    // Memo untuk simpan input sebelumnya
+    const formikInitialValues = useMemo<CustomerFormValues>(() => {
+        return {
+            name: initialValues?.name as string ?? '',
+            email: initialValues?.email ?? '',
+            phone: initialValues?.phone ?? '',
+            picId: initialValues?.pic?.id ?? 0,
+            pic: initialValues?.pic ? {
+                value: initialValues.pic.id,
+                label: initialValues.pic.name,
+            } : null,
+            type: initialValues?.type ?? 'INDIVIDUAL',
+            address: initialValues?.address ?? '',
+            account_number: initialValues?.account_number ?? '',
+        };
+    }, [initialValues]);
+
+    // Formik
+    const formik = useFormik<CustomerFormValues>({
+        initialValues: formikInitialValues,
+        enableReinitialize: true,
+        onSubmit: async (values) => {
+            // reset error message
+            setCustomerFormErrorMessage('');
+
+            // create payload
+            const payload: CreateCustomerPayload = {
+                name: values.name,
+                email: values.email,
+                phone: values.phone,
+                pic_id: values.picId,
+                type: values.type,
+                address: values.address,
+                account_number: values.account_number,
+            };
+
+            // cek type form yang disubmit
+            switch (formType) {
+              case 'add':
+                await createCustomerHandler(payload);
+                break;
+              case 'edit':
+                await updateCustomerHandler(initialValues?.id as number, payload);
+                break;
+            }
+        }
+        
+    });
+
+    const {setValues: formikSetValues} = formik;
+
+    // Initialize Formik
+    useEffect(() => {
+      formikSetValues(formikInitialValues);
+    }, [formikSetValues, formikInitialValues]);
+
+    
+    // Render
+    return (
+      <>
+      <section className="mx-auto my-8 max-w-xl">
+        <header className="flex flex-col gap-4">
+          <Button
+            href="/master-data/customer"
+            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">
+            {formType === 'add' && 'Tambah Customer'}
+            {formType === 'edit' && 'Ubah Customer'}
+            {formType === 'detail' && 'Detail Customer'}
+          </h1>
+        </header>
+
+        <form
+          onSubmit={formik.handleSubmit}
+          onReset={formik.handleReset}
+          className="w-full mt-8 flex flex-col gap-6"
+          >
+
+          {/* Fields Form */}
+          <div className="flex flex-col gap-4">
+            <TextInput 
+              required
+              label="Nama"
+              name="name"
+              placeholder="Masukkan nama customer"
+              value={formik.values.name}
+              onChange={formik.handleChange}
+              onBlur={formik.handleBlur}
+              isError={formik.touched.name && Boolean(formik.errors.name)}
+              errorMessage={formik.errors.name}
+              readOnly={formType === 'detail'}
+            />
+            <SelectInput
+              required
+              placeholder="Pilih PIC"
+              label='PIC'
+              value={formik.values.pic ?? undefined}
+              onChange={picChangeHandler}
+              options={picOptions}
+              onInputChange={setPicSelectInputValue}
+              isLoading={isLoadingPic}
+              isError={formik.touched.picId && Boolean(formik.errors.picId)}
+              errorMessage={formik.errors.picId as string}
+              isDisabled={formType === 'detail'}
+              isClearable
+              isSearchable={true}
+            />
+            <SelectInput
+              required
+              placeholder="Pilih Tipe"
+              label='Tipe'
+              value={typeOptions.find((item) => item.value === formik.values.type) ?? undefined}
+              onChange={typeChangeHandler}
+              options={typeOptions}
+              onInputChange={setTypeSelectInputValue}
+              isError={formik.touched.type && Boolean(formik.errors.type)}
+              errorMessage={formik.errors.type as string}
+              isDisabled={formType === 'detail'}
+              isClearable
+              isSearchable={true}
+            />
+            <TextInput 
+              required
+              label="Email"
+              name="email"
+              placeholder="Masukkan email customer"
+              value={formik.values.email}
+              onChange={formik.handleChange}
+              onBlur={formik.handleBlur}
+              isError={formik.touched.email && Boolean(formik.errors.email)}
+              errorMessage={formik.errors.email}
+              readOnly={formType === 'detail'}
+            />
+            <TextInput 
+              required
+              label="Nomor Telepon"
+              name="phone"
+              placeholder="Masukkan nomor telepon customer"
+              value={formik.values.phone}
+              onChange={formik.handleChange}
+              onBlur={formik.handleBlur}
+              isError={formik.touched.phone && Boolean(formik.errors.phone)}
+              errorMessage={formik.errors.phone}
+              readOnly={formType === 'detail'}
+              />
+            <TextInput 
+              required
+              label="Nomor Rekening"
+              name="account_number"
+              placeholder="Masukkan nomor rekening customer"
+              value={formik.values.account_number}
+              onChange={formik.handleChange}
+              onBlur={formik.handleBlur}
+              isError={formik.touched.account_number && Boolean(formik.errors.account_number)}
+              errorMessage={formik.errors.account_number}
+              readOnly={formType === 'detail'}
+            />
+            <TextArea 
+              required
+              label="Alamat"
+              name="address"
+              placeholder="Masukkan alamat customer"
+              value={formik.values.address}
+              onChange={formik.handleChange}
+              onBlur={formik.handleBlur}
+              isError={formik.touched.address && Boolean(formik.errors.address)}
+              errorMessage={formik.errors.address}
+              readOnly={formType === 'detail'}
+              cols={8}
+            />
+          </div>
+
+          {/* Action Button */}
+          <div className='flex flex-row justify-between gap-2 flex-wrap'>
+            {formType !== 'add' && (
+              <div className='flex flex-row justify-start gap-2'>
+                <Button
+                  type='button'
+                  color='error'
+                  onClick={deleteCustomerHandler}
+                  className='px-4'
+                >
+                  <Icon
+                    icon='material-symbols:delete-outline-rounded'
+                    width={24}
+                    height={24}
+                    className='justify-start text-sm'
+                  />
+                  Delete
+                </Button>
+
+                {formType !== 'edit' && (
+                  <Button
+                    type='button'
+                    color='warning'
+                    href={`/master-data/area/detail/edit/?areaId=${initialValues?.id}`}
+                    className='px-4'
+                  >
+                    <Icon
+                      icon='material-symbols:edit-outline'
+                      width={24}
+                      height={24}
+                      className='justify-start text-sm'
+                    />
+                    Edit
+                  </Button>
+                )}
+              </div>
+            )}
+
+            {formType !== 'detail' && (
+              <div
+                className={cn('flex flex-row justify-end gap-2', {
+                  'w-full': formType === 'add',
+                })}
+              >
+                <Button type='reset' color='warning' className='px-4'>
+                  Reset
+                </Button>
+
+                <Button
+                  type='submit'
+                  color='primary'
+                  isLoading={formik.isSubmitting}
+                  disabled={!formik.isValid || formik.isSubmitting}
+                  className='px-4'
+                >
+                  Submit
+                </Button>
+              </div>
+            )}
+          </div>
+        </form>
+      </section>
+
+      {formType !== 'add' && (
+        <ConfirmationModal 
+          ref={deleteModal.ref}
+          type='error'
+          text={`Apakah anda yakin ingin menghapus data Customer ini (${initialValues?.name})?`}
+          secondaryButton={{
+            text: 'Tidak',
+          }}
+          primaryButton={{
+            text: 'Ya',
+            color: 'error',
+            onClick: confirmationModalDeleteclickHandler,
+            isLoading: isDeleteLoading,
+          }}
+        />
+      )}
+      </>
+    );
+}
+
+export default CustomerForm;
\ No newline at end of file
diff --git a/src/config/constant.ts b/src/config/constant.ts
index 55eed0b3..4ca83946 100644
--- a/src/config/constant.ts
+++ b/src/config/constant.ts
@@ -107,3 +107,14 @@ export const WAREHOUSE_TYPE_OPTIONS = [
     value: 'KANDANG',
   },
 ];
+
+export const CUSTOMER_TYPE_OPTIONS = [
+  {
+    label: 'INDIVIDUAL',
+    value: 'INDIVIDUAL',
+  },
+  {
+    label: 'BISNIS',
+    value: 'BISNIS',
+  },
+];
diff --git a/src/services/api/master-data.ts b/src/services/api/master-data.ts
index 785a1ca1..6cda3814 100644
--- a/src/services/api/master-data.ts
+++ b/src/services/api/master-data.ts
@@ -24,6 +24,11 @@ import {
   UpdateWarehousePayload,
   Warehouse,
 } from '@/types/api/master-data/warehouse';
+import {
+  CreateCustomerPayload,
+  Customer,
+  UpdateCustomerPayload,
+} from '@/types/api/master-data/customer';
 
 export const UomApi = new BaseApiService<
   Uom,
@@ -54,3 +59,9 @@ export const WarehouseApi = new BaseApiService<
   CreateWarehousePayload,
   UpdateWarehousePayload
 >('/master-data/warehouses');
+
+export const CustomerApi = new BaseApiService<
+  Customer,
+  CreateCustomerPayload,
+  UpdateCustomerPayload
+>('/master-data/customers');
\ No newline at end of file
diff --git a/src/types/api/master-data/customer.d.ts b/src/types/api/master-data/customer.d.ts
new file mode 100644
index 00000000..7f8026dc
--- /dev/null
+++ b/src/types/api/master-data/customer.d.ts
@@ -0,0 +1,27 @@
+import { BaseMetadata, CreatedUser } from "@/types/api/api-general";
+
+export type BaseCustomer = {
+    id: number;
+    name: string;
+    pic_id: number;
+    pic: CreatedUser;
+    type: 'INDIVIDUAL' | 'BISNIS';
+    address: string;
+    phone: string;
+    email: string;
+    account_number: string;
+}
+
+export type Customer = BaseMetadata & BaseCustomer;
+
+export type CreateCustomerPayload = {
+    name: string;
+    pic_id: number;
+    type: 'INDIVIDUAL' | 'BISNIS';
+    address: string;
+    phone: string;
+    email: string;
+    account_number: string;
+}
+
+export type UpdateCustomerPayload = CreateCustomerPayload;
\ No newline at end of file

From 21cc01fe681bb218654ea02322e1f7cf8cee1127 Mon Sep 17 00:00:00 2001
From: randy-ar <randyabdulrahman87@gmail.com>
Date: Thu, 9 Oct 2025 04:34:56 +0700
Subject: [PATCH 03/10] feat(FE-33): create customers table and details

---
 src/app/master-data/customer/add/page.tsx     |   2 +-
 .../master-data/customer/detail/edit/page.tsx |  47 ++
 src/app/master-data/customer/detail/page.tsx  |  45 ++
 .../master-data/customer/CustomersTable.tsx   | 117 +++--
 .../customer/form/CustomerForm.schema.ts      |  25 +-
 .../customer/form/CustomerForm.tsx            | 421 ++++++++++--------
 src/types/api/master-data/customer.d.ts       |   4 +-
 7 files changed, 418 insertions(+), 243 deletions(-)

diff --git a/src/app/master-data/customer/add/page.tsx b/src/app/master-data/customer/add/page.tsx
index 274b7d90..f303bb32 100644
--- a/src/app/master-data/customer/add/page.tsx
+++ b/src/app/master-data/customer/add/page.tsx
@@ -2,7 +2,7 @@ import CustomerForm from "@/components/pages/master-data/customer/form/CustomerF
 
 const AddNonstock = () => {
   return (
-    <section>
+    <section className="w-full p-4 flex flex-row justify-center">
       <CustomerForm/>
     </section>
   );
diff --git a/src/app/master-data/customer/detail/edit/page.tsx b/src/app/master-data/customer/detail/edit/page.tsx
index e69de29b..3fe8de52 100644
--- a/src/app/master-data/customer/detail/edit/page.tsx
+++ b/src/app/master-data/customer/detail/edit/page.tsx
@@ -0,0 +1,47 @@
+'use client';
+
+import { useRouter, useSearchParams } from 'next/navigation';
+import useSWR from 'swr';
+import { CustomerApi } from '@/services/api/master-data';
+import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
+import CustomerForm from '@/components/pages/master-data/customer/form/CustomerForm';
+
+const CustomerEdit = () => {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+
+  const costumerId = searchParams.get('customerId');
+
+  const { data: costumer, isLoading: isLoadingCostumer } = useSWR(
+    costumerId,
+    (id: number) => CustomerApi.getSingle(id)
+  );
+
+  if (!costumerId) {
+    router.back();
+
+    return (
+      <div className='w-full flex flex-row justify-center items-center p-4'>
+        <span className='loading loading-spinner loading-xl' />
+      </div>
+    );
+  }
+
+  if (!isLoadingCostumer && (!costumer || isResponseError(costumer))) {
+    router.replace('/404');
+    return;
+  }
+
+  return (
+    <div className='w-full p-4 flex flex-row justify-center'>
+      {isLoadingCostumer && (
+        <span className='loading loading-spinner loading-xl' />
+      )}
+      {!isLoadingCostumer && isResponseSuccess(costumer) && (
+        <CustomerForm formType='edit' initialValues={costumer.data} />
+      )}
+    </div>
+  );
+};
+
+export default CustomerEdit;
diff --git a/src/app/master-data/customer/detail/page.tsx b/src/app/master-data/customer/detail/page.tsx
index e69de29b..263458c2 100644
--- a/src/app/master-data/customer/detail/page.tsx
+++ b/src/app/master-data/customer/detail/page.tsx
@@ -0,0 +1,45 @@
+'use client'
+
+import { useRouter, useSearchParams } from "next/navigation";
+import useSWR from "swr";
+import { CustomerApi } from '@/services/api/master-data';
+import { isResponseError, isResponseSuccess } from "@/lib/api-helper";
+import CustomerForm from "@/components/pages/master-data/customer/form/CustomerForm";
+
+const CustomerDetail = () => {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+
+  const costumerId = searchParams.get("customerId");
+
+  const { data: costumer, isLoading: isLoadingCostumer } = useSWR(
+    costumerId,
+    (id: number) => CustomerApi.getSingle(id)
+  );
+
+  if(!costumerId){
+    router.back();
+
+    return (
+      <div className="w-full flex flex-row justify-center items-center p-4">
+        <span className="loading loading-spinner loading-xl" />
+      </div>
+    );
+  }
+
+  if(!isLoadingCostumer && (!costumer || isResponseError(costumer))){
+    router.replace("/404");
+    return;
+  }
+
+  return (
+    <div className="w-full p-4 flex flex-row justify-center">
+      {isLoadingCostumer && <span className="loading loading-spinner loading-xl" />}
+      {!isLoadingCostumer && isResponseSuccess(costumer) && (
+        <CustomerForm formType="detail" initialValues={costumer.data} />
+      )}
+    </div>
+  )
+};
+
+export default CustomerDetail;
diff --git a/src/components/pages/master-data/customer/CustomersTable.tsx b/src/components/pages/master-data/customer/CustomersTable.tsx
index b2b210df..e1811368 100644
--- a/src/components/pages/master-data/customer/CustomersTable.tsx
+++ b/src/components/pages/master-data/customer/CustomersTable.tsx
@@ -1,33 +1,36 @@
-'use client'
+'use client';
 
-import Button from "@/components/Button";
-import DebouncedTextInput from "@/components/input/DebouncedTextInput";
-import { useModal } from "@/components/Modal";
-import ConfirmationModal from "@/components/modal/ConfirmationModal";
-import Table from "@/components/Table";
-import RowCollapseOptions from "@/components/table/RowCollapseOptions";
-import RowDropdownOptions from "@/components/table/RowDropdownOptions";
-import { isResponseSuccess } from "@/lib/api-helper";
-import { cn } from "@/lib/helper";
-import { CustomerApi } from "@/services/api/master-data";
-import { useTableFilter } from "@/services/hooks/useTableFilter";
-import { Customer } from "@/types/api/master-data/customer";
-import { Icon } from "@iconify/react";
-import { 
-  CellContext, 
-  ColumnDef, 
+import Button from '@/components/Button';
+import DebouncedTextInput from '@/components/input/DebouncedTextInput';
+import SelectInput, { OptionType } from '@/components/input/SelectInput';
+import { useModal } from '@/components/Modal';
+import ConfirmationModal from '@/components/modal/ConfirmationModal';
+import Table from '@/components/Table';
+import RowCollapseOptions from '@/components/table/RowCollapseOptions';
+import RowDropdownOptions from '@/components/table/RowDropdownOptions';
+import { ROWS_OPTIONS } from '@/config/constant';
+import { isResponseSuccess } from '@/lib/api-helper';
+import { cn } from '@/lib/helper';
+import { CustomerApi } from '@/services/api/master-data';
+import { useTableFilter } from '@/services/hooks/useTableFilter';
+import { Customer } from '@/types/api/master-data/customer';
+import { Icon } from '@iconify/react';
+import {
+  CellContext,
+  ColumnDef,
   ColumnSort,
   SortingState,
- } from "@tanstack/react-table";
-import { useState } from "react";
-import useSWR from "swr";
+} from '@tanstack/react-table';
+import { useState } from 'react';
+import toast from 'react-hot-toast';
+import useSWR from 'swr';
 
 const RowOptionsMenu = ({
   type = 'dropdown',
   props,
   deleteClickHandler,
-} : {
-  type: 'dropdown' | 'collapse',
+}: {
+  type: 'dropdown' | 'collapse';
   props: CellContext<Customer, unknown>;
   deleteClickHandler: () => void;
 }) => {
@@ -37,25 +40,33 @@ const RowOptionsMenu = ({
       className={cn(
         {
           'dropdown-content': type === 'dropdown',
-          'mt-2': type === 'collapse'
+          'mt-2': type === 'collapse',
         },
         'p-2.5 mr-2 flex flex-col gap-1 bg-base-100 rounded-box z-10 border border-black/10 shadow'
-        )
-      }
-      >
+      )}
+    >
       <Button
+        href={`/master-data/customer/detail/?customerId=${props.row.original.id}`}
+        variant='ghost'
+        color='primary'
         className='justify-start text-sm'
       >
-        <Icon icon='mdi:eye-outline' width={16} height={16}/> 
+        <Icon icon='mdi:eye-outline' width={16} height={16} />
         Detail
       </Button>
       <Button
         className='justify-start text-sm'
+        href={`/master-data/customer/detail/edit/?customerId=${props.row.original.id}`}
+        variant='ghost'
+        color='warning'
       >
         <Icon icon='material-symbols:edit-outline' width={16} height={16} />
         Edit
       </Button>
       <Button
+        onClick={deleteClickHandler}
+        variant='ghost'
+        color='error'
         className='text-error hover:text-inherit'
       >
         <Icon
@@ -64,10 +75,11 @@ const RowOptionsMenu = ({
           height={16}
           className='justify-start text-sm'
         />
+        Delete
       </Button>
     </div>
   );
-}
+};
 
 const CustomersTable = () => {
   const {
@@ -76,31 +88,34 @@ const CustomersTable = () => {
     setPage,
     setPageSize,
     toQueryString: getTableFilterQueryString,
-  } = useTableFilter ({
-    initial: { search: '', nameSort: '', picSort: ''},
+  } = useTableFilter({
+    initial: { search: '', nameSort: '', picSort: '' },
     paramMap: {
       page: 'page',
       pageSize: 'limit',
       nameSort: 'sort_name',
       picSort: 'sort_pic',
-    }
+    },
   });
 
+  // Fetch Data
   const {
     data: customers,
     isLoading,
-    mutate: refreshCustomers 
+    mutate: refreshCustomers,
   } = useSWR(
     `${CustomerApi.basePath}${getTableFilterQueryString()}`,
     CustomerApi.getAllFetcher
   );
 
+  // State
   const deleteModal = useModal();
-
-  const [selectedCustomer, setSelectedCustomer] = useState<Customer | undefined>(undefined);
-
+  const [selectedCustomer, setSelectedCustomer] = useState<
+    Customer | undefined
+  >(undefined);
   const [isDeleteLoading, setIsDeleteLoading] = useState(false);
 
+  // Columns Definition
   const customersColumns: ColumnDef<Customer>[] = [
     {
       header: '#',
@@ -173,6 +188,24 @@ const CustomersTable = () => {
     },
   ];
 
+  // Handler
+  const confirmationModalDeleteClickHandler = async () => {
+    setIsDeleteLoading(true);
+
+    await CustomerApi.delete(selectedCustomer?.id as number);
+    refreshCustomers();
+
+    deleteModal.closeModal();
+    toast.success('Successfully delete Customer!');
+    setIsDeleteLoading(false);
+  };
+  const searchChangeHandler = (e: React.ChangeEvent<HTMLInputElement>) => {
+    updateFilter('search', e.target.value);
+  };
+  const pageSizeChangeHandler = (val: OptionType | OptionType[] | null) => {
+    const newVal = val as OptionType;
+    setPageSize(newVal.value as number);
+  };
 
   return (
     <>
@@ -190,11 +223,22 @@ const CustomersTable = () => {
               name='search'
               placeholder='Cari Kandang'
               value={tableFilterState.search}
+              onChange={searchChangeHandler}
               className={{ wrapper: 'sm:max-w-3xs' }}
             />
           </div>
 
           <div className='flex flex-row justify-end'>
+            <SelectInput
+              label='Baris'
+              options={ROWS_OPTIONS}
+              value={{
+                label: String(tableFilterState.pageSize),
+                value: tableFilterState.pageSize,
+              }}
+              onChange={pageSizeChangeHandler}
+              className={{ wrapper: 'max-w-28' }}
+            />
           </div>
         </div>
 
@@ -236,10 +280,11 @@ const CustomersTable = () => {
           text: 'Ya',
           color: 'error',
           isLoading: isDeleteLoading,
+          onClick: confirmationModalDeleteClickHandler,
         }}
       />
     </>
   );
-}
+};
 
 export default CustomersTable;
\ No newline at end of file
diff --git a/src/components/pages/master-data/customer/form/CustomerForm.schema.ts b/src/components/pages/master-data/customer/form/CustomerForm.schema.ts
index 7aedd73b..b69b8ce4 100644
--- a/src/components/pages/master-data/customer/form/CustomerForm.schema.ts
+++ b/src/components/pages/master-data/customer/form/CustomerForm.schema.ts
@@ -1,24 +1,29 @@
 import * as Yup from 'yup';
 
 export const CustomerFormSchema = Yup.object({
-  name: Yup.string()
-    .required('Nama wajib diisi!'),
+  name: Yup.string().required('Nama wajib diisi!'),
 
-  picId: Yup.number()
-    .min(1, 'PIC wajib diisi!')
-    .required('PIC wajib diisi!'),
+  picId: Yup.number().min(1, 'PIC wajib diisi!').required('PIC wajib diisi!'),
 
   pic: Yup.object({
     value: Yup.number().min(1).required(),
     label: Yup.string().required(),
-  }).nullable(),
+  }).required('PIC wajib diisi!'),
 
-  type: Yup.string()
-    .oneOf(['INDIVIDUAL', 'BISNIS'], 'Tipe harus INDIVIDUAL atau BISNIS')
+  type: Yup.object({
+    value: Yup.string().required(),
+    label: Yup.string().required(),
+  })
+    .oneOf(
+      [
+        { value: 'INDIVIDUAL', label: 'INDIVIDUAL' },
+        { value: 'BISNIS', label: 'BISNIS' },
+      ],
+      'Tipe harus INDIVIDUAL atau BISNIS'
+    )
     .required('Tipe wajib diisi!'),
 
-  address: Yup.string()
-    .required('Alamat wajib diisi!'),
+  address: Yup.string().required('Alamat wajib diisi!'),
 
   phone: Yup.string()
     .matches(/^[0-9]+$/, 'Nomor telepon hanya boleh berisi angka!')
diff --git a/src/components/pages/master-data/customer/form/CustomerForm.tsx b/src/components/pages/master-data/customer/form/CustomerForm.tsx
index 7b744946..e1d3503f 100644
--- a/src/components/pages/master-data/customer/form/CustomerForm.tsx
+++ b/src/components/pages/master-data/customer/form/CustomerForm.tsx
@@ -1,190 +1,205 @@
-'use client'
+'use client';
 
-import { useModal } from "@/components/Modal";
-import { isResponseError, isResponseSuccess } from "@/lib/api-helper";
-import { CustomerApi } from "@/services/api/master-data";
-import { CreateCustomerPayload, Customer, UpdateCustomerPayload } from "@/types/api/master-data/customer";
-import { useRouter } from "next/navigation";
-import { useCallback, useEffect, useMemo, useState } from "react";
-import toast from "react-hot-toast";
-import { CustomerFormValues } from "./CustomerForm.schema";
-import { useFormik } from "formik";
-import Button from "@/components/Button";
-import { Icon } from "@iconify/react";
-import TextInput from "@/components/input/TextInput";
-import { cn } from "@/lib/helper";
-import ConfirmationModal from "@/components/modal/ConfirmationModal";
-import TextArea from "@/components/input/TextArea";
-import SelectInput, { OptionType } from "@/components/input/SelectInput";
-import useSWR from "swr";
-import { UserApi } from "@/services/api/user";
-import { CUSTOMER_TYPE_OPTIONS } from "@/config/constant";
+import { useModal } from '@/components/Modal';
+import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
+import { CustomerApi } from '@/services/api/master-data';
+import {
+  CreateCustomerPayload,
+  Customer,
+  UpdateCustomerPayload,
+} from '@/types/api/master-data/customer';
+import { useRouter } from 'next/navigation';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import toast from 'react-hot-toast';
+import { CustomerFormValues } from './CustomerForm.schema';
+import { useFormik } from 'formik';
+import Button from '@/components/Button';
+import { Icon } from '@iconify/react';
+import TextInput from '@/components/input/TextInput';
+import { cn } from '@/lib/helper';
+import ConfirmationModal from '@/components/modal/ConfirmationModal';
+import TextArea from '@/components/input/TextArea';
+import SelectInput, { OptionType } from '@/components/input/SelectInput';
+import useSWR from 'swr';
+import { UserApi } from '@/services/api/user';
+import { CUSTOMER_TYPE_OPTIONS } from '@/config/constant';
 
 interface CustomerFormProps {
   formType?: 'add' | 'edit' | 'detail';
   initialValues?: Customer;
 }
 
-const CustomerForm = ({formType = 'add', initialValues} : CustomerFormProps) => {
-    // Setup Kebutuhan Form
-    const router = useRouter();
-    const deleteModal = useModal();
+const CustomerForm = ({
+  formType = 'add',
+  initialValues,
+}: CustomerFormProps) => {
+  // Setup Kebutuhan Form
+  const router = useRouter();
+  const deleteModal = useModal();
 
-    // Setup State
-    const [customerFormErrorMessage, setCustomerFormErrorMessage] = useState('');
-    const [isDeleteLoading, setIsDeleteLoading] = useState(false);
-    const [picSelectInputValue, setPicSelectInputValue] = useState('');
-    const [typeSelectInputValue, setTypeSelectInputValue] = useState('');
+  // Setup State
+  const [customerFormErrorMessage, setCustomerFormErrorMessage] = useState('');
+  const [isDeleteLoading, setIsDeleteLoading] = useState(false);
+  const [picSelectInputValue, setPicSelectInputValue] = useState('');
+  const [typeSelectInputValue, setTypeSelectInputValue] = useState('');
 
-    // Fetch Data
-    const picUrl = `${UserApi.basePath}?${new URLSearchParams({
-      search: picSelectInputValue ?? '',
-    })}`;
+  // Fetch Data
+  const picUrl = `${UserApi.basePath}?${new URLSearchParams({
+    search: picSelectInputValue ?? '',
+  })}`;
 
-    const { data: pic, isLoading: isLoadingPic } = useSWR(
-      picUrl,
-      UserApi.getAllFetcher
-    );
+  const { data: pic, isLoading: isLoadingPic } = useSWR(
+    picUrl,
+    UserApi.getAllFetcher
+  );
 
-    // -- Options data mapping
-    const picOptions = isResponseSuccess(pic)
-      ? pic?.data.map((area) => ({
-          value: area.id,
-          label: area.name,
-        }))
-      : [];
-    const typeOptions = CUSTOMER_TYPE_OPTIONS;  
-    
+  // -- Options data mapping
+  const picOptions = isResponseSuccess(pic)
+    ? pic?.data.map((area) => ({
+        value: area.id,
+        label: area.name,
+      }))
+    : [];
+  const typeOptions = CUSTOMER_TYPE_OPTIONS;
 
-    // Handler Event
-    const createCustomerHandler = useCallback(
-        async (payload : CreateCustomerPayload) => {
-            const createCustomerRes = await CustomerApi.create(payload);
+  // Handler Event
+  const createCustomerHandler = useCallback(
+    async (payload: CreateCustomerPayload) => {
+      const createCustomerRes = await CustomerApi.create(payload);
 
-            if(isResponseError(createCustomerRes)){
-                setCustomerFormErrorMessage(createCustomerRes.message);
-                return;
-            }
+      if (isResponseError(createCustomerRes)) {
+        setCustomerFormErrorMessage(createCustomerRes.message);
+        return;
+      }
 
-            toast.success(createCustomerRes?.message as string);
-            router.push('/master-data/customer');
-        },
-        [router]
-    );
-    const updateCustomerHandler = useCallback(
-        async (customerId : number, payload : UpdateCustomerPayload) => {
-            const updateCustomerRes = await CustomerApi.update(customerId, payload);
-
-            if(isResponseError(updateCustomerRes)){
-                setCustomerFormErrorMessage(updateCustomerRes.message);
-                return;
-            }
-
-            toast.success(updateCustomerRes?.message as string);
-            router.push('/master-data/customer');
-        },
-        [router]
-    );
-
-    const deleteCustomerHandler = () => {
-      deleteModal.openModal();
-    }
-
-    const confirmationModalDeleteclickHandler = async () => {
-      setIsDeleteLoading(true);
-
-      await CustomerApi.delete(initialValues?.id as number);
-
-      deleteModal.closeModal();
-      setIsDeleteLoading(false);
+      toast.success(createCustomerRes?.message as string);
       router.push('/master-data/customer');
+    },
+    [router]
+  );
+  const updateCustomerHandler = useCallback(
+    async (customerId: number, payload: UpdateCustomerPayload) => {
+      const updateCustomerRes = await CustomerApi.update(customerId, payload);
+
+      if (isResponseError(updateCustomerRes)) {
+        setCustomerFormErrorMessage(updateCustomerRes.message);
+        return;
+      }
+
+      toast.success(updateCustomerRes?.message as string);
+      router.push('/master-data/customer');
+    },
+    [router]
+  );
+
+  const deleteCustomerHandler = () => {
+    deleteModal.openModal();
+  };
+
+  const confirmationModalDeleteclickHandler = async () => {
+    setIsDeleteLoading(true);
+
+    await CustomerApi.delete(initialValues?.id as number);
+
+    deleteModal.closeModal();
+    setIsDeleteLoading(false);
+    router.push('/master-data/customer');
+  };
+
+  // -- Option Handler
+  const picChangeHandler = (val: OptionType | OptionType[] | null) => {
+    formik.setFieldTouched('pic', true);
+    formik.setFieldValue('pic', val);
+
+    formik.setFieldTouched('picId', true);
+    formik.setFieldValue('picId', (val as OptionType)?.value);
+  };
+  const typeChangeHandler = (val: OptionType | OptionType[] | null) => {
+    formik.setFieldTouched('type', true);
+    formik.setFieldValue('type', val);
+  };
+
+  // Utils Functions
+  const normalizeType = (type?: string | { value: string; label: string }) => {
+    if (!type) return CUSTOMER_TYPE_OPTIONS[0];
+    return typeof type === 'string' ? { value: type, label: type } : type;
+  };
+
+  // Memo untuk simpan input sebelumnya
+  const formikInitialValues = useMemo<CustomerFormValues>(() => {
+    return {
+      name: initialValues?.name ?? '',
+      email: initialValues?.email ?? '',
+      phone: initialValues?.phone ?? '',
+      picId: initialValues?.pic?.id ?? 0,
+      pic: initialValues?.pic
+        ? {
+            value: initialValues.pic.id,
+            label: initialValues.pic.name,
+          }
+        : {
+            value: 0,
+            label: '',
+          },
+      type: normalizeType(initialValues?.type),
+      address: initialValues?.address ?? '',
+      account_number: initialValues?.account_number ?? '',
     };
+  }, [initialValues]);
 
-    // -- Option Handler
-    const picChangeHandler = (val: OptionType | OptionType[] | null) => {
-      formik.setFieldTouched('pic', true);
-      formik.setFieldValue('pic', val);
+  // Formik
+  const formik = useFormik<CustomerFormValues>({
+    initialValues: formikInitialValues,
+    enableReinitialize: true,
+    onSubmit: async (values) => {
+      // reset error message
+      setCustomerFormErrorMessage('');
 
-      formik.setFieldTouched('picId', true);
-      formik.setFieldValue('picId', (val as OptionType)?.value);
-    }
-    const typeChangeHandler = (val: OptionType | OptionType[] | null) => {
-      formik.setFieldTouched('type', true);
-      formik.setFieldValue('type', val);
-    }
+      // create payload
+      const payload: CreateCustomerPayload = {
+        name: values.name,
+        email: values.email,
+        phone: values.phone,
+        pic_id: values.picId,
+        type: (values.type as OptionType).value as string,
+        address: values.address,
+        account_number: values.account_number,
+      };
 
-    // Memo untuk simpan input sebelumnya
-    const formikInitialValues = useMemo<CustomerFormValues>(() => {
-        return {
-            name: initialValues?.name as string ?? '',
-            email: initialValues?.email ?? '',
-            phone: initialValues?.phone ?? '',
-            picId: initialValues?.pic?.id ?? 0,
-            pic: initialValues?.pic ? {
-                value: initialValues.pic.id,
-                label: initialValues.pic.name,
-            } : null,
-            type: initialValues?.type ?? 'INDIVIDUAL',
-            address: initialValues?.address ?? '',
-            account_number: initialValues?.account_number ?? '',
-        };
-    }, [initialValues]);
+      // cek type form yang disubmit
+      switch (formType) {
+        case 'add':
+          await createCustomerHandler(payload);
+          break;
+        case 'edit':
+          await updateCustomerHandler(initialValues?.id as number, payload);
+          break;
+      }
+    },
+  });
 
-    // Formik
-    const formik = useFormik<CustomerFormValues>({
-        initialValues: formikInitialValues,
-        enableReinitialize: true,
-        onSubmit: async (values) => {
-            // reset error message
-            setCustomerFormErrorMessage('');
+  const { setValues: formikSetValues } = formik;
 
-            // create payload
-            const payload: CreateCustomerPayload = {
-                name: values.name,
-                email: values.email,
-                phone: values.phone,
-                pic_id: values.picId,
-                type: values.type,
-                address: values.address,
-                account_number: values.account_number,
-            };
+  // Initialize Formik
+  useEffect(() => {
+    formikSetValues(formikInitialValues);
+  }, [formikSetValues, formikInitialValues]);
 
-            // cek type form yang disubmit
-            switch (formType) {
-              case 'add':
-                await createCustomerHandler(payload);
-                break;
-              case 'edit':
-                await updateCustomerHandler(initialValues?.id as number, payload);
-                break;
-            }
-        }
-        
-    });
-
-    const {setValues: formikSetValues} = formik;
-
-    // Initialize Formik
-    useEffect(() => {
-      formikSetValues(formikInitialValues);
-    }, [formikSetValues, formikInitialValues]);
-
-    
-    // Render
-    return (
-      <>
-      <section className="mx-auto my-8 max-w-xl">
-        <header className="flex flex-col gap-4">
+  // Render
+  return (
+    <>
+      <section className='w-full max-w-xl'>
+        <header className='flex flex-col gap-4'>
           <Button
-            href="/master-data/customer"
-            variant="link"
-            className="w-fit p-0 text-primary"
+            href='/master-data/customer'
+            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">
+          <h1 className='text-2xl font-bold text-center'>
             {formType === 'add' && 'Tambah Customer'}
             {formType === 'edit' && 'Ubah Customer'}
             {formType === 'detail' && 'Detail Customer'}
@@ -194,16 +209,16 @@ const CustomerForm = ({formType = 'add', initialValues} : CustomerFormProps) =>
         <form
           onSubmit={formik.handleSubmit}
           onReset={formik.handleReset}
-          className="w-full mt-8 flex flex-col gap-6"
-          >
-
+          className='w-full mt-8 flex flex-col gap-6'
+        >
           {/* Fields Form */}
-          <div className="flex flex-col gap-4">
-            <TextInput 
+          <div className='flex flex-col gap-4'>
+            {formik.values.picId}
+            <TextInput
               required
-              label="Nama"
-              name="name"
-              placeholder="Masukkan nama customer"
+              label='Nama'
+              name='name'
+              placeholder='Masukkan nama customer'
               value={formik.values.name}
               onChange={formik.handleChange}
               onBlur={formik.handleBlur}
@@ -213,7 +228,7 @@ const CustomerForm = ({formType = 'add', initialValues} : CustomerFormProps) =>
             />
             <SelectInput
               required
-              placeholder="Pilih PIC"
+              placeholder='Pilih PIC'
               label='PIC'
               value={formik.values.pic ?? undefined}
               onChange={picChangeHandler}
@@ -228,9 +243,13 @@ const CustomerForm = ({formType = 'add', initialValues} : CustomerFormProps) =>
             />
             <SelectInput
               required
-              placeholder="Pilih Tipe"
+              placeholder='Pilih Tipe'
               label='Tipe'
-              value={typeOptions.find((item) => item.value === formik.values.type) ?? undefined}
+              value={
+                typeOptions.find(
+                  (item) => item.value === formik.values.type.value
+                ) ?? undefined
+              }
               onChange={typeChangeHandler}
               options={typeOptions}
               onInputChange={setTypeSelectInputValue}
@@ -240,11 +259,11 @@ const CustomerForm = ({formType = 'add', initialValues} : CustomerFormProps) =>
               isClearable
               isSearchable={true}
             />
-            <TextInput 
+            <TextInput
               required
-              label="Email"
-              name="email"
-              placeholder="Masukkan email customer"
+              label='Email'
+              name='email'
+              placeholder='Masukkan email customer'
               value={formik.values.email}
               onChange={formik.handleChange}
               onBlur={formik.handleBlur}
@@ -252,35 +271,38 @@ const CustomerForm = ({formType = 'add', initialValues} : CustomerFormProps) =>
               errorMessage={formik.errors.email}
               readOnly={formType === 'detail'}
             />
-            <TextInput 
+            <TextInput
               required
-              label="Nomor Telepon"
-              name="phone"
-              placeholder="Masukkan nomor telepon customer"
+              label='Nomor Telepon'
+              name='phone'
+              placeholder='Masukkan nomor telepon customer'
               value={formik.values.phone}
               onChange={formik.handleChange}
               onBlur={formik.handleBlur}
               isError={formik.touched.phone && Boolean(formik.errors.phone)}
               errorMessage={formik.errors.phone}
               readOnly={formType === 'detail'}
-              />
-            <TextInput 
+            />
+            <TextInput
               required
-              label="Nomor Rekening"
-              name="account_number"
-              placeholder="Masukkan nomor rekening customer"
+              label='Nomor Rekening'
+              name='account_number'
+              placeholder='Masukkan nomor rekening customer'
               value={formik.values.account_number}
               onChange={formik.handleChange}
               onBlur={formik.handleBlur}
-              isError={formik.touched.account_number && Boolean(formik.errors.account_number)}
+              isError={
+                formik.touched.account_number &&
+                Boolean(formik.errors.account_number)
+              }
               errorMessage={formik.errors.account_number}
               readOnly={formType === 'detail'}
             />
-            <TextArea 
+            <TextArea
               required
-              label="Alamat"
-              name="address"
-              placeholder="Masukkan alamat customer"
+              label='Alamat'
+              name='address'
+              placeholder='Masukkan alamat customer'
               value={formik.values.address}
               onChange={formik.handleChange}
               onBlur={formik.handleBlur}
@@ -314,7 +336,7 @@ const CustomerForm = ({formType = 'add', initialValues} : CustomerFormProps) =>
                   <Button
                     type='button'
                     color='warning'
-                    href={`/master-data/area/detail/edit/?areaId=${initialValues?.id}`}
+                    href={`/master-data/customer/detail/edit/?customerId=${initialValues?.id}`}
                     className='px-4'
                   >
                     <Icon
@@ -351,11 +373,22 @@ const CustomerForm = ({formType = 'add', initialValues} : CustomerFormProps) =>
               </div>
             )}
           </div>
+
+          {customerFormErrorMessage && (
+            <div role='alert' className='alert alert-error'>
+              <Icon
+                icon='material-symbols:error-outline'
+                width={24}
+                height={24}
+              />
+              <span>{customerFormErrorMessage}</span>
+            </div>
+          )}
         </form>
       </section>
 
       {formType !== 'add' && (
-        <ConfirmationModal 
+        <ConfirmationModal
           ref={deleteModal.ref}
           type='error'
           text={`Apakah anda yakin ingin menghapus data Customer ini (${initialValues?.name})?`}
@@ -370,8 +403,8 @@ const CustomerForm = ({formType = 'add', initialValues} : CustomerFormProps) =>
           }}
         />
       )}
-      </>
-    );
-}
+    </>
+  );
+};
 
-export default CustomerForm;
\ No newline at end of file
+export default CustomerForm;
diff --git a/src/types/api/master-data/customer.d.ts b/src/types/api/master-data/customer.d.ts
index 7f8026dc..fa133cab 100644
--- a/src/types/api/master-data/customer.d.ts
+++ b/src/types/api/master-data/customer.d.ts
@@ -5,7 +5,7 @@ export type BaseCustomer = {
     name: string;
     pic_id: number;
     pic: CreatedUser;
-    type: 'INDIVIDUAL' | 'BISNIS';
+    type: string;
     address: string;
     phone: string;
     email: string;
@@ -17,7 +17,7 @@ export type Customer = BaseMetadata & BaseCustomer;
 export type CreateCustomerPayload = {
     name: string;
     pic_id: number;
-    type: 'INDIVIDUAL' | 'BISNIS';
+    type: string;
     address: string;
     phone: string;
     email: string;

From 3051e931ca134b9121ac557a373b3f76db4a6a00 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Thu, 9 Oct 2025 09:12:07 +0700
Subject: [PATCH 04/10] fix: enhance MainDrawer with typed MenuItem structure
 and submenu handling

---
 src/components/MainDrawer.tsx |  4 +++-
 src/config/constant.ts        | 12 ++++++++++--
 2 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/src/components/MainDrawer.tsx b/src/components/MainDrawer.tsx
index 6a5e6f38..f41316f4 100644
--- a/src/components/MainDrawer.tsx
+++ b/src/components/MainDrawer.tsx
@@ -189,6 +189,8 @@ const MainDrawer = ({
     );
 
     const traverseMenuTitle = (menu: typeof activeMenu) => {
+      if (!menu) return;
+
       const hasSubmenu = menu?.submenu && menu?.submenu.length > 0;
 
       if (!title) {
@@ -197,7 +199,7 @@ const MainDrawer = ({
         title += ' - ' + menu?.title;
       }
 
-      if (!hasSubmenu) return;
+      if (!hasSubmenu || !menu.submenu) return;
 
       const activeSubmenu = menu.submenu.find((item) =>
         isPathActive(pathname, item.link)
diff --git a/src/config/constant.ts b/src/config/constant.ts
index 1fbef81f..8a5ca62f 100644
--- a/src/config/constant.ts
+++ b/src/config/constant.ts
@@ -1,4 +1,13 @@
-export const MAIN_DRAWER_LINKS = [
+export type MenuItem = {
+  title: string;
+  link: string;
+  icon: string;
+  submenu?: MenuItem[];
+};
+
+type MainDrawerLink = MenuItem;
+
+export const MAIN_DRAWER_LINKS: MainDrawerLink[] = [
   {
     title: 'Dashboard',
     link: '/dashboard',
@@ -119,4 +128,3 @@ export const PRODUCT_FLAG_OPTIONS = [
   { label: 'VITAMIN', value: 'VITAMIN' },
   { label: 'KIMIA', value: 'KIMIA' },
 ];
-

From 9f2add3a57345f6b3e3fddefab7c1b1c447a9320 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Thu, 9 Oct 2025 09:38:16 +0700
Subject: [PATCH 05/10] feat: add multiple layout components with suspense
 fallback for loading states

---
 src/app/master-data/area/detail/layout.tsx    | 21 +++++++++++++++++++
 src/app/master-data/kandang/detail/layout.tsx | 21 +++++++++++++++++++
 .../master-data/location/detail/layout.tsx    | 21 +++++++++++++++++++
 .../master-data/nonstock/detail/layout.tsx    | 21 +++++++++++++++++++
 .../product-category/detail/layout.tsx        | 21 +++++++++++++++++++
 src/app/master-data/product/detail/layout.tsx | 21 +++++++++++++++++++
 src/app/master-data/uom/detail/layout.tsx     | 17 +++++++++++++++
 .../master-data/warehouse/detail/layout.tsx   | 21 +++++++++++++++++++
 8 files changed, 164 insertions(+)
 create mode 100644 src/app/master-data/area/detail/layout.tsx
 create mode 100644 src/app/master-data/kandang/detail/layout.tsx
 create mode 100644 src/app/master-data/location/detail/layout.tsx
 create mode 100644 src/app/master-data/nonstock/detail/layout.tsx
 create mode 100644 src/app/master-data/product-category/detail/layout.tsx
 create mode 100644 src/app/master-data/product/detail/layout.tsx
 create mode 100644 src/app/master-data/uom/detail/layout.tsx
 create mode 100644 src/app/master-data/warehouse/detail/layout.tsx

diff --git a/src/app/master-data/area/detail/layout.tsx b/src/app/master-data/area/detail/layout.tsx
new file mode 100644
index 00000000..6a7b249d
--- /dev/null
+++ b/src/app/master-data/area/detail/layout.tsx
@@ -0,0 +1,21 @@
+'use client';
+
+import { Suspense } from 'react';
+
+export default function AreaLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <Suspense
+      fallback={
+        <div className='w-full flex flex-row justify-center items-center p-4'>
+          <span className='loading loading-spinner loading-xl' />
+        </div>
+      }
+    >
+      {children}
+    </Suspense>
+  );
+}
diff --git a/src/app/master-data/kandang/detail/layout.tsx b/src/app/master-data/kandang/detail/layout.tsx
new file mode 100644
index 00000000..f3c8c490
--- /dev/null
+++ b/src/app/master-data/kandang/detail/layout.tsx
@@ -0,0 +1,21 @@
+'use client';
+
+import { Suspense } from 'react';
+
+export default function KandangLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <Suspense
+      fallback={
+        <div className='w-full flex flex-row justify-center items-center p-4'>
+          <span className='loading loading-spinner loading-xl' />
+        </div>
+      }
+    >
+      {children}
+    </Suspense>
+  );
+}
diff --git a/src/app/master-data/location/detail/layout.tsx b/src/app/master-data/location/detail/layout.tsx
new file mode 100644
index 00000000..fbe0ff69
--- /dev/null
+++ b/src/app/master-data/location/detail/layout.tsx
@@ -0,0 +1,21 @@
+'use client';
+
+import { Suspense } from 'react';
+
+export default function LocationLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <Suspense
+      fallback={
+        <div className='w-full flex flex-row justify-center items-center p-4'>
+          <span className='loading loading-spinner loading-xl' />
+        </div>
+      }
+    >
+      {children}
+    </Suspense>
+  );
+}
diff --git a/src/app/master-data/nonstock/detail/layout.tsx b/src/app/master-data/nonstock/detail/layout.tsx
new file mode 100644
index 00000000..aa0d1116
--- /dev/null
+++ b/src/app/master-data/nonstock/detail/layout.tsx
@@ -0,0 +1,21 @@
+'use client';
+
+import { Suspense } from 'react';
+
+export default function NonstockLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <Suspense
+      fallback={
+        <div className='w-full flex flex-row justify-center items-center p-4'>
+          <span className='loading loading-spinner loading-xl' />
+        </div>
+      }
+    >
+      {children}
+    </Suspense>
+  );
+}
diff --git a/src/app/master-data/product-category/detail/layout.tsx b/src/app/master-data/product-category/detail/layout.tsx
new file mode 100644
index 00000000..76235398
--- /dev/null
+++ b/src/app/master-data/product-category/detail/layout.tsx
@@ -0,0 +1,21 @@
+'use client';
+
+import { Suspense } from 'react';
+
+export default function ProductCategoryLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <Suspense
+      fallback={
+        <div className='w-full flex flex-row justify-center items-center p-4'>
+          <span className='loading loading-spinner loading-xl' />
+        </div>
+      }
+    >
+      {children}
+    </Suspense>
+  );
+}
diff --git a/src/app/master-data/product/detail/layout.tsx b/src/app/master-data/product/detail/layout.tsx
new file mode 100644
index 00000000..5a91b249
--- /dev/null
+++ b/src/app/master-data/product/detail/layout.tsx
@@ -0,0 +1,21 @@
+'use client';
+
+import { Suspense } from 'react';
+
+export default function ProductLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <Suspense
+      fallback={
+        <div className='w-full flex flex-row justify-center items-center p-4'>
+          <span className='loading loading-spinner loading-xl' />
+        </div>
+      }
+    >
+      {children}
+    </Suspense>
+  );
+}
diff --git a/src/app/master-data/uom/detail/layout.tsx b/src/app/master-data/uom/detail/layout.tsx
new file mode 100644
index 00000000..1938ec61
--- /dev/null
+++ b/src/app/master-data/uom/detail/layout.tsx
@@ -0,0 +1,17 @@
+'use client';
+
+import { Suspense } from 'react';
+
+export default function UomLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <Suspense
+      fallback={
+        <div className='w-full flex flex-row justify-center items-center p-4'>
+          <span className='loading loading-spinner loading-xl' />
+        </div>
+      }
+    >
+      {children}
+    </Suspense>
+  );
+}
diff --git a/src/app/master-data/warehouse/detail/layout.tsx b/src/app/master-data/warehouse/detail/layout.tsx
new file mode 100644
index 00000000..6b78cf39
--- /dev/null
+++ b/src/app/master-data/warehouse/detail/layout.tsx
@@ -0,0 +1,21 @@
+'use client';
+
+import { Suspense } from 'react';
+
+export default function WarehouseLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <Suspense
+      fallback={
+        <div className='w-full flex flex-row justify-center items-center p-4'>
+          <span className='loading loading-spinner loading-xl' />
+        </div>
+      }
+    >
+      {children}
+    </Suspense>
+  );
+}

From d1f43c4e423f96cd03875170ea6d1c4b5eed46a2 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Thu, 9 Oct 2025 10:00:38 +0700
Subject: [PATCH 06/10] refactor: rename layout files for consistency and
 clarity

---
 .../area/detail/edit/page.tsx                 |  0
 .../{ => (suspense)}/area/detail/page.tsx     |  0
 .../kandang/detail/edit/page.tsx              |  0
 .../{ => (suspense)}/kandang/detail/page.tsx  |  0
 .../{area/detail => (suspense)}/layout.tsx    |  3 ++-
 .../location/detail/edit/page.tsx             |  0
 .../{ => (suspense)}/location/detail/page.tsx |  0
 .../nonstock/detail/edit/page.tsx             |  0
 .../{ => (suspense)}/nonstock/detail/page.tsx |  0
 .../product-category/detail/edit/page.tsx     |  0
 .../product-category/detail/page.tsx          |  0
 .../product/detail/edit/page.tsx              |  0
 .../{ => (suspense)}/product/detail/page.tsx  |  0
 .../{ => (suspense)}/uom/detail/edit/page.tsx |  0
 .../{ => (suspense)}/uom/detail/page.tsx      |  0
 .../warehouse/detail/edit/page.tsx            |  0
 .../warehouse/detail/page.tsx                 |  0
 src/app/master-data/kandang/detail/layout.tsx | 21 -------------------
 .../master-data/location/detail/layout.tsx    | 21 -------------------
 .../master-data/nonstock/detail/layout.tsx    | 21 -------------------
 .../product-category/detail/layout.tsx        | 21 -------------------
 src/app/master-data/product/detail/layout.tsx | 21 -------------------
 src/app/master-data/uom/detail/layout.tsx     | 17 ---------------
 .../master-data/warehouse/detail/layout.tsx   | 21 -------------------
 24 files changed, 2 insertions(+), 144 deletions(-)
 rename src/app/master-data/{ => (suspense)}/area/detail/edit/page.tsx (100%)
 rename src/app/master-data/{ => (suspense)}/area/detail/page.tsx (100%)
 rename src/app/master-data/{ => (suspense)}/kandang/detail/edit/page.tsx (100%)
 rename src/app/master-data/{ => (suspense)}/kandang/detail/page.tsx (100%)
 rename src/app/master-data/{area/detail => (suspense)}/layout.tsx (80%)
 rename src/app/master-data/{ => (suspense)}/location/detail/edit/page.tsx (100%)
 rename src/app/master-data/{ => (suspense)}/location/detail/page.tsx (100%)
 rename src/app/master-data/{ => (suspense)}/nonstock/detail/edit/page.tsx (100%)
 rename src/app/master-data/{ => (suspense)}/nonstock/detail/page.tsx (100%)
 rename src/app/master-data/{ => (suspense)}/product-category/detail/edit/page.tsx (100%)
 rename src/app/master-data/{ => (suspense)}/product-category/detail/page.tsx (100%)
 rename src/app/master-data/{ => (suspense)}/product/detail/edit/page.tsx (100%)
 rename src/app/master-data/{ => (suspense)}/product/detail/page.tsx (100%)
 rename src/app/master-data/{ => (suspense)}/uom/detail/edit/page.tsx (100%)
 rename src/app/master-data/{ => (suspense)}/uom/detail/page.tsx (100%)
 rename src/app/master-data/{ => (suspense)}/warehouse/detail/edit/page.tsx (100%)
 rename src/app/master-data/{ => (suspense)}/warehouse/detail/page.tsx (100%)
 delete mode 100644 src/app/master-data/kandang/detail/layout.tsx
 delete mode 100644 src/app/master-data/location/detail/layout.tsx
 delete mode 100644 src/app/master-data/nonstock/detail/layout.tsx
 delete mode 100644 src/app/master-data/product-category/detail/layout.tsx
 delete mode 100644 src/app/master-data/product/detail/layout.tsx
 delete mode 100644 src/app/master-data/uom/detail/layout.tsx
 delete mode 100644 src/app/master-data/warehouse/detail/layout.tsx

diff --git a/src/app/master-data/area/detail/edit/page.tsx b/src/app/master-data/(suspense)/area/detail/edit/page.tsx
similarity index 100%
rename from src/app/master-data/area/detail/edit/page.tsx
rename to src/app/master-data/(suspense)/area/detail/edit/page.tsx
diff --git a/src/app/master-data/area/detail/page.tsx b/src/app/master-data/(suspense)/area/detail/page.tsx
similarity index 100%
rename from src/app/master-data/area/detail/page.tsx
rename to src/app/master-data/(suspense)/area/detail/page.tsx
diff --git a/src/app/master-data/kandang/detail/edit/page.tsx b/src/app/master-data/(suspense)/kandang/detail/edit/page.tsx
similarity index 100%
rename from src/app/master-data/kandang/detail/edit/page.tsx
rename to src/app/master-data/(suspense)/kandang/detail/edit/page.tsx
diff --git a/src/app/master-data/kandang/detail/page.tsx b/src/app/master-data/(suspense)/kandang/detail/page.tsx
similarity index 100%
rename from src/app/master-data/kandang/detail/page.tsx
rename to src/app/master-data/(suspense)/kandang/detail/page.tsx
diff --git a/src/app/master-data/area/detail/layout.tsx b/src/app/master-data/(suspense)/layout.tsx
similarity index 80%
rename from src/app/master-data/area/detail/layout.tsx
rename to src/app/master-data/(suspense)/layout.tsx
index 6a7b249d..a059dcf2 100644
--- a/src/app/master-data/area/detail/layout.tsx
+++ b/src/app/master-data/(suspense)/layout.tsx
@@ -1,8 +1,9 @@
+// src/app/master-data/(suspense)/layout.tsx
 'use client';
 
 import { Suspense } from 'react';
 
-export default function AreaLayout({
+export default function SuspenseLayout({
   children,
 }: {
   children: React.ReactNode;
diff --git a/src/app/master-data/location/detail/edit/page.tsx b/src/app/master-data/(suspense)/location/detail/edit/page.tsx
similarity index 100%
rename from src/app/master-data/location/detail/edit/page.tsx
rename to src/app/master-data/(suspense)/location/detail/edit/page.tsx
diff --git a/src/app/master-data/location/detail/page.tsx b/src/app/master-data/(suspense)/location/detail/page.tsx
similarity index 100%
rename from src/app/master-data/location/detail/page.tsx
rename to src/app/master-data/(suspense)/location/detail/page.tsx
diff --git a/src/app/master-data/nonstock/detail/edit/page.tsx b/src/app/master-data/(suspense)/nonstock/detail/edit/page.tsx
similarity index 100%
rename from src/app/master-data/nonstock/detail/edit/page.tsx
rename to src/app/master-data/(suspense)/nonstock/detail/edit/page.tsx
diff --git a/src/app/master-data/nonstock/detail/page.tsx b/src/app/master-data/(suspense)/nonstock/detail/page.tsx
similarity index 100%
rename from src/app/master-data/nonstock/detail/page.tsx
rename to src/app/master-data/(suspense)/nonstock/detail/page.tsx
diff --git a/src/app/master-data/product-category/detail/edit/page.tsx b/src/app/master-data/(suspense)/product-category/detail/edit/page.tsx
similarity index 100%
rename from src/app/master-data/product-category/detail/edit/page.tsx
rename to src/app/master-data/(suspense)/product-category/detail/edit/page.tsx
diff --git a/src/app/master-data/product-category/detail/page.tsx b/src/app/master-data/(suspense)/product-category/detail/page.tsx
similarity index 100%
rename from src/app/master-data/product-category/detail/page.tsx
rename to src/app/master-data/(suspense)/product-category/detail/page.tsx
diff --git a/src/app/master-data/product/detail/edit/page.tsx b/src/app/master-data/(suspense)/product/detail/edit/page.tsx
similarity index 100%
rename from src/app/master-data/product/detail/edit/page.tsx
rename to src/app/master-data/(suspense)/product/detail/edit/page.tsx
diff --git a/src/app/master-data/product/detail/page.tsx b/src/app/master-data/(suspense)/product/detail/page.tsx
similarity index 100%
rename from src/app/master-data/product/detail/page.tsx
rename to src/app/master-data/(suspense)/product/detail/page.tsx
diff --git a/src/app/master-data/uom/detail/edit/page.tsx b/src/app/master-data/(suspense)/uom/detail/edit/page.tsx
similarity index 100%
rename from src/app/master-data/uom/detail/edit/page.tsx
rename to src/app/master-data/(suspense)/uom/detail/edit/page.tsx
diff --git a/src/app/master-data/uom/detail/page.tsx b/src/app/master-data/(suspense)/uom/detail/page.tsx
similarity index 100%
rename from src/app/master-data/uom/detail/page.tsx
rename to src/app/master-data/(suspense)/uom/detail/page.tsx
diff --git a/src/app/master-data/warehouse/detail/edit/page.tsx b/src/app/master-data/(suspense)/warehouse/detail/edit/page.tsx
similarity index 100%
rename from src/app/master-data/warehouse/detail/edit/page.tsx
rename to src/app/master-data/(suspense)/warehouse/detail/edit/page.tsx
diff --git a/src/app/master-data/warehouse/detail/page.tsx b/src/app/master-data/(suspense)/warehouse/detail/page.tsx
similarity index 100%
rename from src/app/master-data/warehouse/detail/page.tsx
rename to src/app/master-data/(suspense)/warehouse/detail/page.tsx
diff --git a/src/app/master-data/kandang/detail/layout.tsx b/src/app/master-data/kandang/detail/layout.tsx
deleted file mode 100644
index f3c8c490..00000000
--- a/src/app/master-data/kandang/detail/layout.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-'use client';
-
-import { Suspense } from 'react';
-
-export default function KandangLayout({
-  children,
-}: {
-  children: React.ReactNode;
-}) {
-  return (
-    <Suspense
-      fallback={
-        <div className='w-full flex flex-row justify-center items-center p-4'>
-          <span className='loading loading-spinner loading-xl' />
-        </div>
-      }
-    >
-      {children}
-    </Suspense>
-  );
-}
diff --git a/src/app/master-data/location/detail/layout.tsx b/src/app/master-data/location/detail/layout.tsx
deleted file mode 100644
index fbe0ff69..00000000
--- a/src/app/master-data/location/detail/layout.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-'use client';
-
-import { Suspense } from 'react';
-
-export default function LocationLayout({
-  children,
-}: {
-  children: React.ReactNode;
-}) {
-  return (
-    <Suspense
-      fallback={
-        <div className='w-full flex flex-row justify-center items-center p-4'>
-          <span className='loading loading-spinner loading-xl' />
-        </div>
-      }
-    >
-      {children}
-    </Suspense>
-  );
-}
diff --git a/src/app/master-data/nonstock/detail/layout.tsx b/src/app/master-data/nonstock/detail/layout.tsx
deleted file mode 100644
index aa0d1116..00000000
--- a/src/app/master-data/nonstock/detail/layout.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-'use client';
-
-import { Suspense } from 'react';
-
-export default function NonstockLayout({
-  children,
-}: {
-  children: React.ReactNode;
-}) {
-  return (
-    <Suspense
-      fallback={
-        <div className='w-full flex flex-row justify-center items-center p-4'>
-          <span className='loading loading-spinner loading-xl' />
-        </div>
-      }
-    >
-      {children}
-    </Suspense>
-  );
-}
diff --git a/src/app/master-data/product-category/detail/layout.tsx b/src/app/master-data/product-category/detail/layout.tsx
deleted file mode 100644
index 76235398..00000000
--- a/src/app/master-data/product-category/detail/layout.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-'use client';
-
-import { Suspense } from 'react';
-
-export default function ProductCategoryLayout({
-  children,
-}: {
-  children: React.ReactNode;
-}) {
-  return (
-    <Suspense
-      fallback={
-        <div className='w-full flex flex-row justify-center items-center p-4'>
-          <span className='loading loading-spinner loading-xl' />
-        </div>
-      }
-    >
-      {children}
-    </Suspense>
-  );
-}
diff --git a/src/app/master-data/product/detail/layout.tsx b/src/app/master-data/product/detail/layout.tsx
deleted file mode 100644
index 5a91b249..00000000
--- a/src/app/master-data/product/detail/layout.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-'use client';
-
-import { Suspense } from 'react';
-
-export default function ProductLayout({
-  children,
-}: {
-  children: React.ReactNode;
-}) {
-  return (
-    <Suspense
-      fallback={
-        <div className='w-full flex flex-row justify-center items-center p-4'>
-          <span className='loading loading-spinner loading-xl' />
-        </div>
-      }
-    >
-      {children}
-    </Suspense>
-  );
-}
diff --git a/src/app/master-data/uom/detail/layout.tsx b/src/app/master-data/uom/detail/layout.tsx
deleted file mode 100644
index 1938ec61..00000000
--- a/src/app/master-data/uom/detail/layout.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-'use client';
-
-import { Suspense } from 'react';
-
-export default function UomLayout({ children }: { children: React.ReactNode }) {
-  return (
-    <Suspense
-      fallback={
-        <div className='w-full flex flex-row justify-center items-center p-4'>
-          <span className='loading loading-spinner loading-xl' />
-        </div>
-      }
-    >
-      {children}
-    </Suspense>
-  );
-}
diff --git a/src/app/master-data/warehouse/detail/layout.tsx b/src/app/master-data/warehouse/detail/layout.tsx
deleted file mode 100644
index 6b78cf39..00000000
--- a/src/app/master-data/warehouse/detail/layout.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-'use client';
-
-import { Suspense } from 'react';
-
-export default function WarehouseLayout({
-  children,
-}: {
-  children: React.ReactNode;
-}) {
-  return (
-    <Suspense
-      fallback={
-        <div className='w-full flex flex-row justify-center items-center p-4'>
-          <span className='loading loading-spinner loading-xl' />
-        </div>
-      }
-    >
-      {children}
-    </Suspense>
-  );
-}

From f0eabedcb2dadb46ca086576c9811694ee9495a9 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Thu, 9 Oct 2025 11:06:59 +0700
Subject: [PATCH 07/10] refactor: refactor layout components to use
 SuspenseHelper for loading states

---
 src/app/master-data/area/detail/layout.tsx    | 26 ++++++-------------
 src/app/master-data/kandang/detail/layout.tsx | 26 ++++++-------------
 .../master-data/location/detail/layout.tsx    | 26 ++++++-------------
 .../master-data/nonstock/detail/layout.tsx    | 26 ++++++-------------
 .../product-category/detail/layout.tsx        | 26 ++++++-------------
 src/app/master-data/product/detail/layout.tsx | 26 ++++++-------------
 src/app/master-data/uom/detail/layout.tsx     | 24 +++++++----------
 .../master-data/warehouse/detail/layout.tsx   | 26 ++++++-------------
 src/components/helper/SuspenseHelper.tsx      | 23 ++++++++++++++++
 9 files changed, 88 insertions(+), 141 deletions(-)
 create mode 100644 src/components/helper/SuspenseHelper.tsx

diff --git a/src/app/master-data/area/detail/layout.tsx b/src/app/master-data/area/detail/layout.tsx
index 6a7b249d..7220dfa1 100644
--- a/src/app/master-data/area/detail/layout.tsx
+++ b/src/app/master-data/area/detail/layout.tsx
@@ -1,21 +1,11 @@
-'use client';
+import SuspenseHelper from '@/components/helper/SuspenseHelper';
 
-import { Suspense } from 'react';
-
-export default function AreaLayout({
+const Layout = ({
   children,
-}: {
+}: Readonly<{
   children: React.ReactNode;
-}) {
-  return (
-    <Suspense
-      fallback={
-        <div className='w-full flex flex-row justify-center items-center p-4'>
-          <span className='loading loading-spinner loading-xl' />
-        </div>
-      }
-    >
-      {children}
-    </Suspense>
-  );
-}
+}>) => {
+  return <SuspenseHelper>{children}</SuspenseHelper>;
+};
+
+export default Layout;
diff --git a/src/app/master-data/kandang/detail/layout.tsx b/src/app/master-data/kandang/detail/layout.tsx
index f3c8c490..7220dfa1 100644
--- a/src/app/master-data/kandang/detail/layout.tsx
+++ b/src/app/master-data/kandang/detail/layout.tsx
@@ -1,21 +1,11 @@
-'use client';
+import SuspenseHelper from '@/components/helper/SuspenseHelper';
 
-import { Suspense } from 'react';
-
-export default function KandangLayout({
+const Layout = ({
   children,
-}: {
+}: Readonly<{
   children: React.ReactNode;
-}) {
-  return (
-    <Suspense
-      fallback={
-        <div className='w-full flex flex-row justify-center items-center p-4'>
-          <span className='loading loading-spinner loading-xl' />
-        </div>
-      }
-    >
-      {children}
-    </Suspense>
-  );
-}
+}>) => {
+  return <SuspenseHelper>{children}</SuspenseHelper>;
+};
+
+export default Layout;
diff --git a/src/app/master-data/location/detail/layout.tsx b/src/app/master-data/location/detail/layout.tsx
index fbe0ff69..7220dfa1 100644
--- a/src/app/master-data/location/detail/layout.tsx
+++ b/src/app/master-data/location/detail/layout.tsx
@@ -1,21 +1,11 @@
-'use client';
+import SuspenseHelper from '@/components/helper/SuspenseHelper';
 
-import { Suspense } from 'react';
-
-export default function LocationLayout({
+const Layout = ({
   children,
-}: {
+}: Readonly<{
   children: React.ReactNode;
-}) {
-  return (
-    <Suspense
-      fallback={
-        <div className='w-full flex flex-row justify-center items-center p-4'>
-          <span className='loading loading-spinner loading-xl' />
-        </div>
-      }
-    >
-      {children}
-    </Suspense>
-  );
-}
+}>) => {
+  return <SuspenseHelper>{children}</SuspenseHelper>;
+};
+
+export default Layout;
diff --git a/src/app/master-data/nonstock/detail/layout.tsx b/src/app/master-data/nonstock/detail/layout.tsx
index aa0d1116..7220dfa1 100644
--- a/src/app/master-data/nonstock/detail/layout.tsx
+++ b/src/app/master-data/nonstock/detail/layout.tsx
@@ -1,21 +1,11 @@
-'use client';
+import SuspenseHelper from '@/components/helper/SuspenseHelper';
 
-import { Suspense } from 'react';
-
-export default function NonstockLayout({
+const Layout = ({
   children,
-}: {
+}: Readonly<{
   children: React.ReactNode;
-}) {
-  return (
-    <Suspense
-      fallback={
-        <div className='w-full flex flex-row justify-center items-center p-4'>
-          <span className='loading loading-spinner loading-xl' />
-        </div>
-      }
-    >
-      {children}
-    </Suspense>
-  );
-}
+}>) => {
+  return <SuspenseHelper>{children}</SuspenseHelper>;
+};
+
+export default Layout;
diff --git a/src/app/master-data/product-category/detail/layout.tsx b/src/app/master-data/product-category/detail/layout.tsx
index 76235398..7220dfa1 100644
--- a/src/app/master-data/product-category/detail/layout.tsx
+++ b/src/app/master-data/product-category/detail/layout.tsx
@@ -1,21 +1,11 @@
-'use client';
+import SuspenseHelper from '@/components/helper/SuspenseHelper';
 
-import { Suspense } from 'react';
-
-export default function ProductCategoryLayout({
+const Layout = ({
   children,
-}: {
+}: Readonly<{
   children: React.ReactNode;
-}) {
-  return (
-    <Suspense
-      fallback={
-        <div className='w-full flex flex-row justify-center items-center p-4'>
-          <span className='loading loading-spinner loading-xl' />
-        </div>
-      }
-    >
-      {children}
-    </Suspense>
-  );
-}
+}>) => {
+  return <SuspenseHelper>{children}</SuspenseHelper>;
+};
+
+export default Layout;
diff --git a/src/app/master-data/product/detail/layout.tsx b/src/app/master-data/product/detail/layout.tsx
index 5a91b249..7220dfa1 100644
--- a/src/app/master-data/product/detail/layout.tsx
+++ b/src/app/master-data/product/detail/layout.tsx
@@ -1,21 +1,11 @@
-'use client';
+import SuspenseHelper from '@/components/helper/SuspenseHelper';
 
-import { Suspense } from 'react';
-
-export default function ProductLayout({
+const Layout = ({
   children,
-}: {
+}: Readonly<{
   children: React.ReactNode;
-}) {
-  return (
-    <Suspense
-      fallback={
-        <div className='w-full flex flex-row justify-center items-center p-4'>
-          <span className='loading loading-spinner loading-xl' />
-        </div>
-      }
-    >
-      {children}
-    </Suspense>
-  );
-}
+}>) => {
+  return <SuspenseHelper>{children}</SuspenseHelper>;
+};
+
+export default Layout;
diff --git a/src/app/master-data/uom/detail/layout.tsx b/src/app/master-data/uom/detail/layout.tsx
index 1938ec61..7220dfa1 100644
--- a/src/app/master-data/uom/detail/layout.tsx
+++ b/src/app/master-data/uom/detail/layout.tsx
@@ -1,17 +1,11 @@
-'use client';
+import SuspenseHelper from '@/components/helper/SuspenseHelper';
 
-import { Suspense } from 'react';
+const Layout = ({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) => {
+  return <SuspenseHelper>{children}</SuspenseHelper>;
+};
 
-export default function UomLayout({ children }: { children: React.ReactNode }) {
-  return (
-    <Suspense
-      fallback={
-        <div className='w-full flex flex-row justify-center items-center p-4'>
-          <span className='loading loading-spinner loading-xl' />
-        </div>
-      }
-    >
-      {children}
-    </Suspense>
-  );
-}
+export default Layout;
diff --git a/src/app/master-data/warehouse/detail/layout.tsx b/src/app/master-data/warehouse/detail/layout.tsx
index 6b78cf39..7220dfa1 100644
--- a/src/app/master-data/warehouse/detail/layout.tsx
+++ b/src/app/master-data/warehouse/detail/layout.tsx
@@ -1,21 +1,11 @@
-'use client';
+import SuspenseHelper from '@/components/helper/SuspenseHelper';
 
-import { Suspense } from 'react';
-
-export default function WarehouseLayout({
+const Layout = ({
   children,
-}: {
+}: Readonly<{
   children: React.ReactNode;
-}) {
-  return (
-    <Suspense
-      fallback={
-        <div className='w-full flex flex-row justify-center items-center p-4'>
-          <span className='loading loading-spinner loading-xl' />
-        </div>
-      }
-    >
-      {children}
-    </Suspense>
-  );
-}
+}>) => {
+  return <SuspenseHelper>{children}</SuspenseHelper>;
+};
+
+export default Layout;
diff --git a/src/components/helper/SuspenseHelper.tsx b/src/components/helper/SuspenseHelper.tsx
new file mode 100644
index 00000000..a151cd9d
--- /dev/null
+++ b/src/components/helper/SuspenseHelper.tsx
@@ -0,0 +1,23 @@
+'use client';
+
+import { Suspense } from 'react';
+
+const SuspenseHelper = ({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) => {
+  return (
+    <Suspense
+      fallback={
+        <div className='w-full flex flex-row justify-center items-center p-4'>
+          <span className='loading loading-spinner loading-xl' />
+        </div>
+      }
+    >
+      {children}
+    </Suspense>
+  );
+};
+
+export default SuspenseHelper;

From b561ed619361461d7b6ed9e8585d14e9974abc89 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Thu, 9 Oct 2025 11:35:22 +0700
Subject: [PATCH 08/10] fix: update dependencies in multiple tables to include
 updateSortingFilter in effect dependencies

---
 package.json                                  |  2 ++
 .../master-data/kandang/KandangsTable.tsx     |  2 +-
 .../master-data/location/LocationsTable.tsx   |  2 +-
 .../nonstock/form/NonstockForm.tsx            |  2 +-
 .../product-category/ProductCategoryTable.tsx | 35 ++++++++++++++-----
 .../master-data/product/ProductTable.tsx      | 18 ++++++----
 .../pages/master-data/uom/UomsTable.tsx       |  2 +-
 .../master-data/warehouse/WarehousesTable.tsx |  2 +-
 8 files changed, 46 insertions(+), 19 deletions(-)

diff --git a/package.json b/package.json
index 8adf6787..cf7765a2 100644
--- a/package.json
+++ b/package.json
@@ -6,6 +6,8 @@
     "dev": "eslint && next dev --turbopack",
     "build": "next build --turbopack",
     "start": "next start",
+    "start": "npx serve@latest out",
+    "start:next": "next start",
     "lint": "eslint"
   },
   "dependencies": {
diff --git a/src/components/pages/master-data/kandang/KandangsTable.tsx b/src/components/pages/master-data/kandang/KandangsTable.tsx
index c3571452..c51eeb21 100644
--- a/src/components/pages/master-data/kandang/KandangsTable.tsx
+++ b/src/components/pages/master-data/kandang/KandangsTable.tsx
@@ -231,7 +231,7 @@ const KandangsTable = () => {
     updateSortingFilter('nameSort', nameSortFilter);
     updateSortingFilter('locationSort', locationSortFilter);
     updateSortingFilter('picSort', picSortFilter);
-  }, [sorting]);
+  }, [sorting, updateSortingFilter]);
 
   return (
     <>
diff --git a/src/components/pages/master-data/location/LocationsTable.tsx b/src/components/pages/master-data/location/LocationsTable.tsx
index ebbb798f..2548fb28 100644
--- a/src/components/pages/master-data/location/LocationsTable.tsx
+++ b/src/components/pages/master-data/location/LocationsTable.tsx
@@ -230,7 +230,7 @@ const LocationsTable = () => {
     updateSortingFilter('nameSort', nameSortFilter);
     updateSortingFilter('addressSort', addressSortFilter);
     updateSortingFilter('areaSort', areaSortFilter);
-  }, [sorting]);
+  }, [sorting, updateSortingFilter]);
 
   return (
     <>
diff --git a/src/components/pages/master-data/nonstock/form/NonstockForm.tsx b/src/components/pages/master-data/nonstock/form/NonstockForm.tsx
index 33dcba54..efc1f595 100644
--- a/src/components/pages/master-data/nonstock/form/NonstockForm.tsx
+++ b/src/components/pages/master-data/nonstock/form/NonstockForm.tsx
@@ -99,7 +99,7 @@ const NonstockForm = ({ type = 'add', initialValues }: NonstockFormProps) => {
 
   useEffect(() => {
     formik.setValues(formikInitialValues);
-  }, [formikInitialValues]);
+  }, [formik, formikInitialValues]);
 
   return (
     <section className='w-full max-w-xl'>
diff --git a/src/components/pages/master-data/product-category/ProductCategoryTable.tsx b/src/components/pages/master-data/product-category/ProductCategoryTable.tsx
index f8413ab6..63b1c919 100644
--- a/src/components/pages/master-data/product-category/ProductCategoryTable.tsx
+++ b/src/components/pages/master-data/product-category/ProductCategoryTable.tsx
@@ -66,7 +66,12 @@ const RowOptionsMenu = ({
         color='error'
         className='text-error hover:text-inherit'
       >
-        <Icon icon='mdi:delete-outline' width={16} height={16} className='justify-start text-sm' />
+        <Icon
+          icon='mdi:delete-outline'
+          width={16}
+          height={16}
+          className='justify-start text-sm'
+        />
         Delete
       </Button>
     </div>
@@ -96,7 +101,9 @@ const ProductCategoryTable = () => {
 
   const deleteModal = useModal();
 
-  const [selectedProductCategory, setSelectedProductCategory] = useState<ProductCategory | undefined>(undefined);
+  const [selectedProductCategory, setSelectedProductCategory] = useState<
+    ProductCategory | undefined
+  >(undefined);
   const [isDeleteLoading, setIsDeleteLoading] = useState(false);
 
   const [sorting, setSorting] = useState<SortingState>([]);
@@ -186,7 +193,7 @@ const ProductCategoryTable = () => {
     } else {
       updateFilter('nameSort', isNameSorted.desc ? 'desc' : 'asc');
     }
-  }, [sorting]);
+  }, [sorting, updateFilter]);
 
   return (
     <>
@@ -221,18 +228,30 @@ const ProductCategoryTable = () => {
           </div>
         </div>
         <Table<ProductCategory>
-          data={isResponseSuccess(productCategories) ? productCategories?.data : []}
+          data={
+            isResponseSuccess(productCategories) ? productCategories?.data : []
+          }
           columns={productCategoryColumns}
           pageSize={tableFilterState.pageSize}
-          page={isResponseSuccess(productCategories) ? productCategories?.meta?.page : 0}
-          totalItems={isResponseSuccess(productCategories) ? productCategories?.meta?.total_results : 0}
+          page={
+            isResponseSuccess(productCategories)
+              ? productCategories?.meta?.page
+              : 0
+          }
+          totalItems={
+            isResponseSuccess(productCategories)
+              ? productCategories?.meta?.total_results
+              : 0
+          }
           onPageChange={setPage}
           isLoading={isLoading}
           sorting={sorting}
           setSorting={setSorting}
           className={{
             containerClassName: cn({
-              'mb-20': isResponseSuccess(productCategories) && productCategories?.data?.length === 0,
+              'mb-20':
+                isResponseSuccess(productCategories) &&
+                productCategories?.data?.length === 0,
             }),
             tableWrapperClassName: 'overflow-x-auto min-h-full!',
             tableClassName: 'font-inter w-full table-auto min-h-full!',
@@ -263,4 +282,4 @@ const ProductCategoryTable = () => {
   );
 };
 
-export default ProductCategoryTable;
\ No newline at end of file
+export default ProductCategoryTable;
diff --git a/src/components/pages/master-data/product/ProductTable.tsx b/src/components/pages/master-data/product/ProductTable.tsx
index ab256548..b38a749a 100644
--- a/src/components/pages/master-data/product/ProductTable.tsx
+++ b/src/components/pages/master-data/product/ProductTable.tsx
@@ -116,7 +116,9 @@ const ProductsTable = () => {
   );
 
   const deleteModal = useModal();
-  const [selectedProduct, setSelectedProduct] = useState<Product | undefined>(undefined);
+  const [selectedProduct, setSelectedProduct] = useState<Product | undefined>(
+    undefined
+  );
   const [isDeleteLoading, setIsDeleteLoading] = useState(false);
   const [sorting, setSorting] = useState<SortingState>([]);
 
@@ -153,12 +155,14 @@ const ProductsTable = () => {
     {
       accessorKey: 'product_price',
       header: 'Harga Produk',
-      cell: (props) => props.row.original.product_price?.toLocaleString() ?? '-',
+      cell: (props) =>
+        props.row.original.product_price?.toLocaleString() ?? '-',
     },
     {
       accessorKey: 'selling_price',
       header: 'Harga Jual',
-      cell: (props) => props.row.original.selling_price?.toLocaleString() ?? '-',
+      cell: (props) =>
+        props.row.original.selling_price?.toLocaleString() ?? '-',
     },
     {
       accessorKey: 'tax',
@@ -261,13 +265,15 @@ const ProductsTable = () => {
     const nameSortFilter = sorting.find((sortItem) => sortItem.id === 'name');
     const skuSortFilter = sorting.find((sortItem) => sortItem.id === 'sku');
     const brandSortFilter = sorting.find((sortItem) => sortItem.id === 'brand');
-    const categorySortFilter = sorting.find((sortItem) => sortItem.id === 'product_category');
+    const categorySortFilter = sorting.find(
+      (sortItem) => sortItem.id === 'product_category'
+    );
 
     updateSortingFilter('nameSort', nameSortFilter);
     updateSortingFilter('skuSort', skuSortFilter);
     updateSortingFilter('brandSort', brandSortFilter);
     updateSortingFilter('categorySort', categorySortFilter);
-  }, [sorting]);
+  }, [sorting, updateSortingFilter]);
 
   return (
     <>
@@ -347,4 +353,4 @@ const ProductsTable = () => {
   );
 };
 
-export default ProductsTable;
\ No newline at end of file
+export default ProductsTable;
diff --git a/src/components/pages/master-data/uom/UomsTable.tsx b/src/components/pages/master-data/uom/UomsTable.tsx
index 080dfaf8..dcec5fe5 100644
--- a/src/components/pages/master-data/uom/UomsTable.tsx
+++ b/src/components/pages/master-data/uom/UomsTable.tsx
@@ -192,7 +192,7 @@ const UomsTable = () => {
     } else {
       updateFilter('nameSort', isNameSorted.desc ? 'desc' : 'asc');
     }
-  }, [sorting]);
+  }, [sorting, updateFilter]);
 
   return (
     <>
diff --git a/src/components/pages/master-data/warehouse/WarehousesTable.tsx b/src/components/pages/master-data/warehouse/WarehousesTable.tsx
index b3eed86b..f6d2d071 100644
--- a/src/components/pages/master-data/warehouse/WarehousesTable.tsx
+++ b/src/components/pages/master-data/warehouse/WarehousesTable.tsx
@@ -270,7 +270,7 @@ const WarehousesTable = () => {
     updateSortingFilter('areaSort', areaSortFilter);
     updateSortingFilter('locationSort', locationSortFilter);
     updateSortingFilter('kandangSort', kandangSortFilter);
-  }, [sorting]);
+  }, [sorting, updateSortingFilter]);
 
   return (
     <>

From 3f712a638f194dbc2aa8f8863059e2998274372d Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Thu, 9 Oct 2025 11:45:27 +0700
Subject: [PATCH 09/10] chore: remove redundant start scripts from package.json

---
 package.json | 2 --
 1 file changed, 2 deletions(-)

diff --git a/package.json b/package.json
index cf7765a2..8adf6787 100644
--- a/package.json
+++ b/package.json
@@ -6,8 +6,6 @@
     "dev": "eslint && next dev --turbopack",
     "build": "next build --turbopack",
     "start": "next start",
-    "start": "npx serve@latest out",
-    "start:next": "next start",
     "lint": "eslint"
   },
   "dependencies": {

From a83452a0e4aa9b043023ba1cf0d52420e21b1700 Mon Sep 17 00:00:00 2001
From: randy-ar <randyabdulrahman87@gmail.com>
Date: Thu, 9 Oct 2025 12:27:59 +0700
Subject: [PATCH 10/10] feat(FE-33): create suppliers table and forms

---
 .gitignore                                    |   3 +
 src/app/master-data/customer/add/page.tsx     |   4 +-
 src/app/master-data/customer/page.tsx         |   6 +-
 src/app/master-data/supplier/add/page.tsx     |  11 +
 .../master-data/supplier/detail/edit/page.tsx |  49 ++
 src/app/master-data/supplier/detail/page.tsx  |  49 ++
 src/app/master-data/supplier/page.tsx         |  11 +
 src/components/input/TagInput.tsx             | 169 +++++++
 .../master-data/customer/CustomersTable.tsx   |   4 +-
 .../customer/form/CustomerForm.schema.ts      |  10 +-
 .../customer/form/CustomerForm.tsx            |  12 +-
 .../master-data/supplier/SupplierTable.tsx    | 303 +++++++++++
 .../supplier/form/SupplierForm.schema.ts      |  38 ++
 .../supplier/form/SupplierForm.tsx            | 471 ++++++++++++++++++
 src/config/constant.ts                        |  13 +-
 src/services/api/master-data.ts               |  13 +-
 src/types/api/master-data/supplier.d.ts       |  53 ++
 17 files changed, 1194 insertions(+), 25 deletions(-)
 create mode 100644 src/app/master-data/supplier/add/page.tsx
 create mode 100644 src/app/master-data/supplier/detail/edit/page.tsx
 create mode 100644 src/app/master-data/supplier/detail/page.tsx
 create mode 100644 src/app/master-data/supplier/page.tsx
 create mode 100644 src/components/input/TagInput.tsx
 create mode 100644 src/components/pages/master-data/supplier/SupplierTable.tsx
 create mode 100644 src/components/pages/master-data/supplier/form/SupplierForm.schema.ts
 create mode 100644 src/components/pages/master-data/supplier/form/SupplierForm.tsx
 create mode 100644 src/types/api/master-data/supplier.d.ts

diff --git a/.gitignore b/.gitignore
index 5ef6a520..beb014a7 100644
--- a/.gitignore
+++ b/.gitignore
@@ -39,3 +39,6 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+# prettier
+.prettierrc
\ No newline at end of file
diff --git a/src/app/master-data/customer/add/page.tsx b/src/app/master-data/customer/add/page.tsx
index f303bb32..a1096f02 100644
--- a/src/app/master-data/customer/add/page.tsx
+++ b/src/app/master-data/customer/add/page.tsx
@@ -1,6 +1,6 @@
 import CustomerForm from "@/components/pages/master-data/customer/form/CustomerForm";
 
-const AddNonstock = () => {
+const AddCustomer = () => {
   return (
     <section className="w-full p-4 flex flex-row justify-center">
       <CustomerForm/>
@@ -8,4 +8,4 @@ const AddNonstock = () => {
   );
 }
 
-export default AddNonstock;
\ No newline at end of file
+export default AddCustomer;
\ No newline at end of file
diff --git a/src/app/master-data/customer/page.tsx b/src/app/master-data/customer/page.tsx
index 56281702..b80401f1 100644
--- a/src/app/master-data/customer/page.tsx
+++ b/src/app/master-data/customer/page.tsx
@@ -1,11 +1,11 @@
 import CustomersTable from "@/components/pages/master-data/customer/CustomersTable";
 
-const Nonstock = () => {
+const Customer = () => {
   return (
-    <section>
+    <section className="w-full p-4">
       <CustomersTable />
     </section>
   )
 };
 
-export default Nonstock;
\ No newline at end of file
+export default Customer;
\ No newline at end of file
diff --git a/src/app/master-data/supplier/add/page.tsx b/src/app/master-data/supplier/add/page.tsx
new file mode 100644
index 00000000..8a95c3c6
--- /dev/null
+++ b/src/app/master-data/supplier/add/page.tsx
@@ -0,0 +1,11 @@
+import SupplierForm from '@/components/pages/master-data/supplier/form/SupplierForm';
+
+const AddSupplier = () => {
+  return (
+    <section className='w-full p-4 flex flex-row justify-center'>
+      <SupplierForm />
+    </section>
+  );
+};
+
+export default AddSupplier;
\ No newline at end of file
diff --git a/src/app/master-data/supplier/detail/edit/page.tsx b/src/app/master-data/supplier/detail/edit/page.tsx
new file mode 100644
index 00000000..103db73d
--- /dev/null
+++ b/src/app/master-data/supplier/detail/edit/page.tsx
@@ -0,0 +1,49 @@
+'use client';
+
+import SupplierForm from '@/components/pages/master-data/supplier/form/SupplierForm';
+import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
+import { SupplierApi } from '@/services/api/master-data';
+import { useSearchParams, useRouter } from 'next/navigation';
+import useSWR from 'swr';
+
+const SupplierEdit = () => {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+
+  // Get Query Params
+  const supplierId = searchParams.get('supplierId');
+
+  // Fetch Data
+  const { data: supplier, isLoading: isLoadingSupplier } = useSWR(
+    supplierId,
+    (id: number) => SupplierApi.getSingle(id)
+  );
+
+  if (!supplierId) {
+    router.back();
+
+    return (
+      <div className='w-full flex flex-row justify-center items-center p-4'>
+        <span className='loading loading-spinner loading-xl' />
+      </div>
+    );
+  }
+
+  if (!isLoadingSupplier && (!supplier || isResponseError(supplier))) {
+    router.replace('/404');
+    return;
+  }
+
+  return (
+    <div className='w-full p-4 flex flex-row justify-center'>
+      {isLoadingSupplier && (
+        <span className='loading loading-spinner loading-xl' />
+      )}
+      {!isLoadingSupplier && isResponseSuccess(supplier) && (
+        <SupplierForm formType='edit' initialValues={supplier.data} />
+      )}
+    </div>
+  );
+};
+
+export default SupplierEdit;
diff --git a/src/app/master-data/supplier/detail/page.tsx b/src/app/master-data/supplier/detail/page.tsx
new file mode 100644
index 00000000..433fa043
--- /dev/null
+++ b/src/app/master-data/supplier/detail/page.tsx
@@ -0,0 +1,49 @@
+'use client';
+
+import SupplierForm from '@/components/pages/master-data/supplier/form/SupplierForm';
+import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
+import { SupplierApi } from '@/services/api/master-data';
+import { useSearchParams, useRouter } from 'next/navigation';
+import useSWR from 'swr';
+
+const SupplierDetail = () => {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+
+  // Get Query Params
+  const supplierId = searchParams.get('supplierId');
+
+  // Fetch Data
+  const { data: supplier, isLoading: isLoadingSupplier } = useSWR(
+    supplierId,
+    (id: number) => SupplierApi.getSingle(id)
+  );
+
+  if (!supplierId) {
+    router.back();
+
+    return (
+      <div className='w-full flex flex-row justify-center items-center p-4'>
+        <span className='loading loading-spinner loading-xl' />
+      </div>
+    );
+  }
+
+  if (!isLoadingSupplier && (!supplier || isResponseError(supplier))) {
+    router.replace('/404');
+    return;
+  }
+
+  return (
+    <div className='w-full p-4 flex flex-row justify-center'>
+      {isLoadingSupplier && (
+        <span className='loading loading-spinner loading-xl' />
+      )}
+      {!isLoadingSupplier && isResponseSuccess(supplier) && (
+        <SupplierForm formType='detail' initialValues={supplier.data} />
+      )}
+    </div>
+  );
+};
+
+export default SupplierDetail;
\ No newline at end of file
diff --git a/src/app/master-data/supplier/page.tsx b/src/app/master-data/supplier/page.tsx
new file mode 100644
index 00000000..1f54bd0d
--- /dev/null
+++ b/src/app/master-data/supplier/page.tsx
@@ -0,0 +1,11 @@
+import SuppliersTable from "@/components/pages/master-data/supplier/SupplierTable";
+
+const Supplier = () => {
+  return (
+    <section className='w-full p-4'>
+      <SuppliersTable />
+    </section>
+  );
+};
+
+export default Supplier;
diff --git a/src/components/input/TagInput.tsx b/src/components/input/TagInput.tsx
new file mode 100644
index 00000000..a14b2f63
--- /dev/null
+++ b/src/components/input/TagInput.tsx
@@ -0,0 +1,169 @@
+'use client';
+
+import React, { useState, KeyboardEvent, ChangeEvent, useEffect } from 'react';
+import { cn } from '@/lib/helper';
+
+export interface TagInputProps {
+  label?: string;
+  bottomLabel?: string;
+  name: string;
+  value?: string;
+  placeholder?: string;
+  className?: {
+    wrapper?: string;
+    label?: string;
+    inputWrapper?: string;
+    input?: string;
+  };
+  isError?: boolean;
+  isValid?: boolean;
+  disabled?: boolean;
+  readOnly?: boolean;
+  required?: boolean;
+  isLoading?: boolean;
+  errorMessage?: string;
+  onChange?: (value: string) => void;
+}
+
+const TagInput: React.FC<TagInputProps> = ({
+  label,
+  bottomLabel,
+  name,
+  value = '',
+  placeholder,
+  className,
+  isError,
+  isValid,
+  errorMessage,
+  disabled = false,
+  readOnly = false,
+  required = false,
+  onChange,
+}) => {
+  const [tags, setTags] = useState<string[]>(value ? value.split(',') : []);
+  const [inputValue, setInputValue] = useState('');
+
+  useEffect(() => {
+    if (value !== undefined && value !== tags.join(',')) {
+      setTags(value ? value.split(',') : []);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [value]);
+
+  const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'Enter' || e.key === ',') {
+      e.preventDefault();
+      const newTag = inputValue.trim();
+      if (newTag && !tags.includes(newTag)) {
+        const updatedTags = [...tags, newTag];
+        setTags(updatedTags);
+        onChange?.(updatedTags.join(','));
+      }
+      setInputValue('');
+    }
+  };
+
+  const handleRemoveTag = (tagToRemove: string) => {
+    const updatedTags = tags.filter((t) => t !== tagToRemove);
+    setTags(updatedTags);
+    onChange?.(updatedTags.join(','));
+  };
+
+  const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {
+    setInputValue(e.target.value);
+  };
+
+  return (
+    <div
+      className={cn(
+        'w-full flex flex-col gap-2 text-start',
+        className?.wrapper
+      )}
+    >
+      {/* Label */}
+      {label && (
+        <label
+          htmlFor={name}
+          className={cn(
+            'w-full text-sm font-normal leading-5',
+            { 'text-error': isError },
+            className?.label
+          )}
+        >
+          {label}
+          {required && (
+            <>
+              {' '}
+              <span className='tooltip tooltip-error' data-tip='required'>
+                <span className='text-error'> *</span>
+              </span>
+            </>
+          )}
+        </label>
+      )}
+
+      {/* Input wrapper */}
+      <div
+        className={cn(
+          'flex flex-wrap items-start gap-2 border border-gray-400 rounded-md p-2 focus-within:ring-2 focus-within:ring-blue-500 min-h-[42px] transition-all',
+          {
+            'border-error': isError,
+            'border-success!': isValid,
+            'opacity-70 cursor-not-allowed': disabled,
+          },
+          className?.inputWrapper
+        )}
+        onClick={() => {
+          // Fokuskan input saat area diklik
+          const inputEl = document.getElementById(name);
+          inputEl?.focus();
+        }}
+      >
+        {tags.map((tag) => (
+          <div
+            key={tag}
+            className={cn(
+              'badge badge-primary gap-1 px-3 py-3 text-white flex items-center'
+            )}
+          >
+            <span>{tag}</span>
+            {!readOnly && (
+              <button
+                type='button'
+                onClick={() => handleRemoveTag(tag)}
+                className='ml-1 text-white hover:text-red-200 focus:outline-none'
+              >
+                ✕
+              </button>
+            )}
+          </div>
+        ))}
+
+        {!readOnly && (
+          <input
+            type='text'
+            id={name}
+            name={name}
+            value={inputValue}
+            onChange={handleInputChange}
+            onKeyDown={handleKeyDown}
+            placeholder={placeholder}
+            disabled={disabled}
+            className={cn(
+              'flex-1 min-w-[120px] border-none outline-none p-1 size-min',
+              className?.input
+            )}
+          />
+        )}
+      </div>
+
+      {/* Bottom label or error message */}
+      {!isError && bottomLabel && (
+        <p className='w-full text-sm opacity-60'>{bottomLabel}</p>
+      )}
+      {isError && <p className='w-full text-sm text-error'>{errorMessage}</p>}
+    </div>
+  );
+};
+
+export default TagInput;
diff --git a/src/components/pages/master-data/customer/CustomersTable.tsx b/src/components/pages/master-data/customer/CustomersTable.tsx
index e1811368..d3fde60b 100644
--- a/src/components/pages/master-data/customer/CustomersTable.tsx
+++ b/src/components/pages/master-data/customer/CustomersTable.tsx
@@ -18,8 +18,6 @@ import { Icon } from '@iconify/react';
 import {
   CellContext,
   ColumnDef,
-  ColumnSort,
-  SortingState,
 } from '@tanstack/react-table';
 import { useState } from 'react';
 import toast from 'react-hot-toast';
@@ -272,7 +270,7 @@ const CustomersTable = () => {
       <ConfirmationModal
         ref={deleteModal.ref}
         type='error'
-        text={`Apakah anda yakin ingin menghapus data Kandang ini (${selectedCustomer?.name})?`}
+        text={`Apakah anda yakin ingin menghapus data Customer ini (${selectedCustomer?.name})?`}
         secondaryButton={{
           text: 'Tidak',
         }}
diff --git a/src/components/pages/master-data/customer/form/CustomerForm.schema.ts b/src/components/pages/master-data/customer/form/CustomerForm.schema.ts
index b69b8ce4..22cd023d 100644
--- a/src/components/pages/master-data/customer/form/CustomerForm.schema.ts
+++ b/src/components/pages/master-data/customer/form/CustomerForm.schema.ts
@@ -13,15 +13,7 @@ export const CustomerFormSchema = Yup.object({
   type: Yup.object({
     value: Yup.string().required(),
     label: Yup.string().required(),
-  })
-    .oneOf(
-      [
-        { value: 'INDIVIDUAL', label: 'INDIVIDUAL' },
-        { value: 'BISNIS', label: 'BISNIS' },
-      ],
-      'Tipe harus INDIVIDUAL atau BISNIS'
-    )
-    .required('Tipe wajib diisi!'),
+  }).required('Tipe wajib diisi!'),
 
   address: Yup.string().required('Alamat wajib diisi!'),
 
diff --git a/src/components/pages/master-data/customer/form/CustomerForm.tsx b/src/components/pages/master-data/customer/form/CustomerForm.tsx
index e1d3503f..ee824866 100644
--- a/src/components/pages/master-data/customer/form/CustomerForm.tsx
+++ b/src/components/pages/master-data/customer/form/CustomerForm.tsx
@@ -11,7 +11,7 @@ import {
 import { useRouter } from 'next/navigation';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import toast from 'react-hot-toast';
-import { CustomerFormValues } from './CustomerForm.schema';
+import { CustomerFormSchema, CustomerFormValues, UpdateCustomerFormSchema } from './CustomerForm.schema';
 import { useFormik } from 'formik';
 import Button from '@/components/Button';
 import { Icon } from '@iconify/react';
@@ -22,7 +22,7 @@ import TextArea from '@/components/input/TextArea';
 import SelectInput, { OptionType } from '@/components/input/SelectInput';
 import useSWR from 'swr';
 import { UserApi } from '@/services/api/user';
-import { CUSTOMER_TYPE_OPTIONS } from '@/config/constant';
+import { TYPE_OPTIONS } from '@/config/constant';
 
 interface CustomerFormProps {
   formType?: 'add' | 'edit' | 'detail';
@@ -60,7 +60,7 @@ const CustomerForm = ({
         label: area.name,
       }))
     : [];
-  const typeOptions = CUSTOMER_TYPE_OPTIONS;
+  const typeOptions = TYPE_OPTIONS;
 
   // Handler Event
   const createCustomerHandler = useCallback(
@@ -121,7 +121,7 @@ const CustomerForm = ({
 
   // Utils Functions
   const normalizeType = (type?: string | { value: string; label: string }) => {
-    if (!type) return CUSTOMER_TYPE_OPTIONS[0];
+    if (!type) return TYPE_OPTIONS[0];
     return typeof type === 'string' ? { value: type, label: type } : type;
   };
 
@@ -151,6 +151,7 @@ const CustomerForm = ({
   const formik = useFormik<CustomerFormValues>({
     initialValues: formikInitialValues,
     enableReinitialize: true,
+    validationSchema: formType === 'edit' ? UpdateCustomerFormSchema : CustomerFormSchema,
     onSubmit: async (values) => {
       // reset error message
       setCustomerFormErrorMessage('');
@@ -213,7 +214,6 @@ const CustomerForm = ({
         >
           {/* Fields Form */}
           <div className='flex flex-col gap-4'>
-            {formik.values.picId}
             <TextInput
               required
               label='Nama'
@@ -247,7 +247,7 @@ const CustomerForm = ({
               label='Tipe'
               value={
                 typeOptions.find(
-                  (item) => item.value === formik.values.type.value
+                  (item) => item.value === formik.values.type?.value
                 ) ?? undefined
               }
               onChange={typeChangeHandler}
diff --git a/src/components/pages/master-data/supplier/SupplierTable.tsx b/src/components/pages/master-data/supplier/SupplierTable.tsx
new file mode 100644
index 00000000..672f70a6
--- /dev/null
+++ b/src/components/pages/master-data/supplier/SupplierTable.tsx
@@ -0,0 +1,303 @@
+'use client';
+
+import Button from '@/components/Button';
+import DebouncedTextInput from '@/components/input/DebouncedTextInput';
+import SelectInput, { OptionType } from '@/components/input/SelectInput';
+import { useModal } from '@/components/Modal';
+import ConfirmationModal from '@/components/modal/ConfirmationModal';
+import Table from '@/components/Table';
+import RowCollapseOptions from '@/components/table/RowCollapseOptions';
+import RowDropdownOptions from '@/components/table/RowDropdownOptions';
+import { ROWS_OPTIONS } from '@/config/constant';
+import { isResponseSuccess } from '@/lib/api-helper';
+import { cn } from '@/lib/helper';
+import { SupplierApi } from '@/services/api/master-data';
+import { useTableFilter } from '@/services/hooks/useTableFilter';
+import { Supplier } from '@/types/api/master-data/supplier';
+import { Icon } from '@iconify/react';
+import { CellContext, ColumnDef } from '@tanstack/react-table';
+import { useState } from 'react';
+import toast from 'react-hot-toast';
+import useSWR from 'swr';
+
+const RowOptions = ({
+  type = 'dropdown',
+  props,
+  deleteClickHandler,
+}: {
+  type: 'dropdown' | 'collapse';
+  props: CellContext<Supplier, unknown>;
+  deleteClickHandler: () => void;
+}) => {
+  return (
+    <div
+      tabIndex={type == 'dropdown' ? 0 : undefined}
+      className={cn(
+        {
+          'dropdown-content': type === 'dropdown',
+          'mt-2': type === 'collapse',
+        },
+        'p-2.5 mr-2 flex flex-col gap-1 bg-base-100 rounded-box z-10 border border-black/10 shadow'
+      )}
+    >
+      <Button
+        href={`/master-data/supplier/detail/?supplierId=${props.row.original.id}`}
+        variant='ghost'
+        color='primary'
+        className='justify-start text-sm'
+      >
+        <Icon
+          icon='mdi:eye-outline'
+          width={16}
+          height={16}
+          className='justify-start text-sm'
+        />
+        Detail
+      </Button>
+      <Button
+        href={`/master-data/supplier/detail/edit/?supplierId=${props.row.original.id}`}
+        variant='ghost'
+        color='warning'
+        className='justify-start text-sm'
+      >
+        <Icon
+          icon='material-symbols:edit-outline'
+          width={16}
+          height={16}
+          className='justify-start text-sm'
+        />
+        Edit
+      </Button>
+      <Button
+        onClick={deleteClickHandler}
+        variant='ghost'
+        color='error'
+        className='text-error hover:text-inherit'
+      >
+        <Icon
+          icon='material-symbols:delete-outline-rounded'
+          width={16}
+          height={16}
+          className='justify-start text-sm'
+        />
+        Delete
+      </Button>
+    </div>
+  );
+};
+
+const SuppliersTable = () => {
+  const {
+    state: tableFilterState,
+    updateFilter,
+    setPage,
+    setPageSize,
+    toQueryString: getTableFilterQueryString,
+  } = useTableFilter({
+    initial: { search: '', nameSort: '' },
+    paramMap: {
+      page: 'page',
+      pageSize: 'limit',
+      nameSort: 'sort_name',
+    },
+  });
+
+  // Fetch Data
+  const {
+    data: suppliers,
+    isLoading,
+    mutate: refreshSuppliers,
+  } = useSWR(
+    `${SupplierApi.basePath}${getTableFilterQueryString()}`,
+    SupplierApi.getAllFetcher
+  );
+
+  // State
+  const deleteModal = useModal();
+  const [selectedSupplier, setSelectedSupplier] = useState<
+    Supplier | undefined
+  >(undefined);
+  const [isDeleteLoading, setIsDeleteLoading] = useState(false);
+
+  // Columns Definition
+  const suppliersColumns: ColumnDef<Supplier>[] = [
+    {
+      header: '#',
+      cell: (props) =>
+        tableFilterState.pageSize * (tableFilterState.page - 1) +
+        props.row.index +
+        1,
+    },
+    {
+      accessorKey: 'name',
+      header: 'Nama',
+    },
+    {
+      accessorKey: 'alias',
+      header: 'Alias',
+    },
+    {
+      accessorKey: 'pic',
+      header: 'Nama PIC',
+    },
+    {
+      accessorKey: 'category',
+      header: 'Kategori',
+    },
+    {
+      accessorKey: 'type',
+      header: 'Tipe',
+    },
+    {
+      accessorKey: 'phone',
+      header: 'No. Telp',
+    },
+    {
+      accessorKey: 'email',
+      header: 'Email',
+    },
+    {
+      accessorKey: 'address',
+      header: 'Alamat',
+    },
+    {
+      header: 'Aksi',
+      cell: (props) => {
+        const currentPageSize = props.table.getPaginationRowModel().rows.length;
+        const currentPageRows = props.table.getPaginationRowModel().flatRows;
+        const currentRowRelativeIndex =
+          currentPageRows.findIndex((r) => r.id === props.row.id) + 1;
+
+        const isLast2Rows = currentRowRelativeIndex > currentPageSize - 2;
+
+        const deleteClickHandler = () => {
+          setSelectedSupplier(props.row.original);
+          deleteModal.openModal();
+        };
+
+        return (
+          <>
+            {currentPageSize > 2 && (
+              <RowDropdownOptions isLast2Rows={isLast2Rows}>
+                <RowOptions
+                  type='dropdown'
+                  props={props}
+                  deleteClickHandler={deleteClickHandler}
+                />
+              </RowDropdownOptions>
+            )}
+
+            {currentPageSize <= 2 && (
+              <RowCollapseOptions>
+                <RowOptions
+                  type='collapse'
+                  props={props}
+                  deleteClickHandler={deleteClickHandler}
+                />
+              </RowCollapseOptions>
+            )}
+          </>
+        );
+      },
+    },
+  ];
+
+  // Handler
+  const confirmationModalDeleteClickHandler = async () => {
+    setIsDeleteLoading(true);
+
+    await SupplierApi.delete(selectedSupplier?.id as number);
+    refreshSuppliers();
+
+    deleteModal.closeModal();
+    toast.success('Successfully delete Supplier!');
+    setIsDeleteLoading(false);
+  };
+  const searchChangeHandler = (e: React.ChangeEvent<HTMLInputElement>) => {
+    updateFilter('search', e.target.value);
+  };
+  const pageSizeChangeHandler = (val: OptionType | OptionType[] | null) => {
+    const newVal = val as OptionType;
+    setPageSize(newVal.value as number);
+  };
+
+  return (
+    <>
+      <div className='w-full p-0 sm:p-4'>
+        <div className='flex flex-col gap-2 mb-4'>
+          <div className='w-full flex flex-col sm:flex-row justify-between items-end sm:items-center gap-2'>
+            <div className='flex flex-row'>
+              <Button href='/master-data/supplier/add' color='primary'>
+                <Icon icon='ic:round-plus' width={24} height={24} />
+                Tambah Supplier
+              </Button>
+            </div>
+
+            <DebouncedTextInput
+              name='search'
+              placeholder='Cari Supplier'
+              value={tableFilterState.search}
+              onChange={searchChangeHandler}
+              className={{ wrapper: 'sm:max-w-3xs' }}
+            />
+          </div>
+
+          <div className='flex flex-row justify-end'>
+            <SelectInput
+              label='Baris'
+              options={ROWS_OPTIONS}
+              value={{
+                label: String(tableFilterState.pageSize),
+                value: tableFilterState.pageSize,
+              }}
+              onChange={pageSizeChangeHandler}
+              className={{ wrapper: 'max-w-28' }}
+            />
+          </div>
+        </div>
+
+        <Table<Supplier>
+          data={isResponseSuccess(suppliers) ? suppliers?.data : []}
+          columns={suppliersColumns}
+          pageSize={tableFilterState.pageSize}
+          page={isResponseSuccess(suppliers) ? suppliers?.meta?.page : 0}
+          totalItems={
+            isResponseSuccess(suppliers) ? suppliers?.meta?.total_results : 0
+          }
+          onPageChange={setPage}
+          isLoading={isLoading}
+          className={{
+            containerClassName: cn({
+              'mb-20':
+                isResponseSuccess(suppliers) && suppliers?.data?.length === 0,
+            }),
+            tableWrapperClassName: 'overflow-x-auto min-h-full!',
+            tableClassName: 'font-inter w-full table-auto min-h-full!',
+            headerRowClassName: 'border-b border-b-gray-200',
+            headerColumnClassName:
+              'px-6 py-3 text-xs font-semibold text-gray-500 last:flex last:flex-row last:justify-end',
+            bodyRowClassName: 'border-b border-b-gray-200',
+            bodyColumnClassName:
+              'px-6 py-3 last:flex last:flex-row last:justify-end',
+          }}
+        />
+      </div>
+      <ConfirmationModal
+        ref={deleteModal.ref}
+        type='error'
+        text={`Apakah anda yakin ingin menghapus data Supplier ini (${selectedSupplier?.name})?`}
+        secondaryButton={{
+          text: 'Tidak',
+        }}
+        primaryButton={{
+          text: 'Ya',
+          color: 'error',
+          isLoading: isDeleteLoading,
+          onClick: confirmationModalDeleteClickHandler,
+        }}
+      />
+    </>
+  );
+};
+
+export default SuppliersTable;
diff --git a/src/components/pages/master-data/supplier/form/SupplierForm.schema.ts b/src/components/pages/master-data/supplier/form/SupplierForm.schema.ts
new file mode 100644
index 00000000..69f127a3
--- /dev/null
+++ b/src/components/pages/master-data/supplier/form/SupplierForm.schema.ts
@@ -0,0 +1,38 @@
+import * as Yup from 'yup';
+
+export const SupplierFormSchema = Yup.object({
+    name: Yup.string().required('Nama wajib diisi!'),
+    alias: Yup.string().required('Alias wajib diisi!'),
+    pic: Yup.string().required('PIC wajib diisi!'),
+    type: Yup.object({
+        value: Yup.string().required(),
+        label: Yup.string().required(),
+      })
+        .required('Tipe wajib diisi!'),
+    category: Yup.object({
+        value: Yup.string().required(),
+        label: Yup.string().required(),
+      })
+        .required('Tipe wajib diisi!'),
+    hatchery: Yup.string().required('Hatchery wajib diisi!'),
+    phone: Yup.string()
+        .matches(/^[0-9]+$/, 'Nomor telepon hanya boleh berisi angka!')
+        .min(10, 'Nomor telepon minimal 10 digit!')
+        .max(12, 'Nomor telepon maksimal 12 digit!')
+        .required('Nomor telepon wajib diisi!'),
+    email: Yup.string()
+        .email('Format email tidak valid!')
+        .required('Email wajib diisi!'),
+    address: Yup.string().required('Alamat wajib diisi!'),
+    npwp: Yup.string()
+        .matches(/^[0-9]+$/, 'Nomor NPWP hanya boleh berisi angka!')
+        .required('Nomor NPWP wajib diisi!'),
+    account_number: Yup.string()
+        .matches(/^[0-9]+$/, 'Nomor rekening hanya boleh berisi angka!')
+        .required('Nomor rekening wajib diisi!'),
+    due_date: Yup.number().min(1, 'Tanggal jatuh tempo wajib diisi!').required('Tanggal jatuh tempo wajib diisi!'),
+});
+
+export const UpdateSupplierFormSchema = SupplierFormSchema;
+
+export type SupplierFormValues = Yup.InferType<typeof SupplierFormSchema>;
\ No newline at end of file
diff --git a/src/components/pages/master-data/supplier/form/SupplierForm.tsx b/src/components/pages/master-data/supplier/form/SupplierForm.tsx
new file mode 100644
index 00000000..9e0ac83a
--- /dev/null
+++ b/src/components/pages/master-data/supplier/form/SupplierForm.tsx
@@ -0,0 +1,471 @@
+'use client';
+
+import { useModal } from '@/components/Modal';
+import { CATEGORY_OPTIONS, TYPE_OPTIONS } from '@/config/constant';
+import { isResponseError } from '@/lib/api-helper';
+import { SupplierApi } from '@/services/api/master-data';
+import {
+  CreateSupplierPayload,
+  Supplier,
+} from '@/types/api/master-data/supplier';
+import { useRouter } from 'next/navigation';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import toast from 'react-hot-toast';
+import { SupplierFormSchema, SupplierFormValues, UpdateSupplierFormSchema } from './SupplierForm.schema';
+import { useFormik } from 'formik';
+import SelectInput, { OptionType } from '@/components/input/SelectInput';
+import { Icon } from '@iconify/react';
+import Button from '@/components/Button';
+import TextInput from '@/components/input/TextInput';
+import TagInput from '@/components/input/TagInput';
+import TextArea from '@/components/input/TextArea';
+import { cn } from '@/lib/helper';
+import ConfirmationModal from '@/components/modal/ConfirmationModal';
+
+interface SupplierCustomProps {
+  formType?: 'add' | 'edit' | 'detail';
+  initialValues?: Supplier;
+}
+
+const SupplierForm = ({
+  formType = 'add',
+  initialValues,
+}: SupplierCustomProps) => {
+  // Setup Kebutuhan Form
+  const router = useRouter();
+  const deleteModal = useModal();
+
+  // Setup State
+  const [supplierFormErrorMessage, setSupplierFormErrorMessage] = useState('');
+  const [isDeleteLoading, setIsDeleteLoading] = useState(false);
+  const [typeSelectInputValue, setTypeSelectInputValue] = useState('');
+  const [categorySelectInputValue, setCategorySelectInputValue] = useState('');
+  const [hatcheryTagInputValue, setHatcheryTagInputValue] = useState('');
+
+  // -- Options data mapping
+  const typeOptions = TYPE_OPTIONS;
+  const categoryOptions = CATEGORY_OPTIONS;
+
+  // Handler Event
+  const createSupplierHandler = useCallback(
+    async (payload: CreateSupplierPayload) => {
+      const createSupplierRes = await SupplierApi.create(payload);
+
+      if (isResponseError(createSupplierRes)) {
+        setSupplierFormErrorMessage(createSupplierRes.message);
+        return;
+      }
+
+      toast.success(createSupplierRes?.message as string);
+      router.push('/master-data/supplier');
+    },
+    [router]
+  );
+
+  const updateSupplierHandler = useCallback(
+    async (supplierId: number, payload: CreateSupplierPayload) => {
+      const updateSupplierRes = await SupplierApi.update(supplierId, payload);
+
+      if (isResponseError(updateSupplierRes)) {
+        setSupplierFormErrorMessage(updateSupplierRes.message);
+        return;
+      }
+
+      toast.success(updateSupplierRes?.message as string);
+      router.push('/master-data/supplier');
+    },
+    [router]
+  );
+
+  const deleteSupplierHandler = () => {
+    deleteModal.openModal();
+  };
+
+  const confirmationModalDeleteclickHandler = async () => {
+    setIsDeleteLoading(true);
+
+    await SupplierApi.delete(initialValues?.id as number);
+
+    deleteModal.closeModal();
+    setIsDeleteLoading(false);
+    router.push('/master-data/supplier');
+  };
+
+  // Utils Functions
+  const normalizeOptionValue = (
+    type?: string | { value: string; label: string },
+    options?: OptionType[]
+  ): { value: string; label: string } => {
+    if (!type && !options) return { value: '', label: '' };
+    if (!type && options && options.length > 0)
+      return options[0] as { value: string; label: string };
+    if (typeof type === 'string') return { value: type, label: type };
+    return type ?? { value: '', label: '' };
+  };
+
+  // Memo
+  console.log('Memo');
+  console.log(initialValues);
+  const formikInitialValues = useMemo<SupplierFormValues>(() => {
+    return {
+      name: initialValues?.name ?? '',
+      alias: initialValues?.alias ?? '',
+      pic: initialValues?.pic ?? '',
+      type: normalizeOptionValue(initialValues?.type, typeOptions),
+      category: normalizeOptionValue(initialValues?.category, categoryOptions),
+      hatchery: initialValues?.hatchery ?? '',
+      phone: initialValues?.phone ?? '',
+      email: initialValues?.email ?? '',
+      address: initialValues?.address ?? '',
+      npwp: initialValues?.npwp ?? '',
+      account_number: initialValues?.account_number ?? '',
+      due_date: initialValues?.due_date ?? 1,
+    };
+  }, [initialValues]);
+
+  // Formik
+  const formik = useFormik<SupplierFormValues>({
+    initialValues: formikInitialValues,
+    enableReinitialize: true,
+    validationSchema: formType === 'edit' ? UpdateSupplierFormSchema : SupplierFormSchema, 
+    onSubmit: async (values) => {
+      // reset error message
+      setSupplierFormErrorMessage('');
+
+      // create payload
+      const payload: CreateSupplierPayload = {
+        name: values.name,
+        alias: values.alias,
+        pic: values.pic,
+        type: values.type.value,
+        category: values.category.value,
+        hatchery: values.hatchery,
+        phone: values.phone,
+        email: values.email,
+        address: values.address,
+        npwp: values.npwp,
+        account_number: values.account_number,
+        due_date: parseInt(values.due_date.toString()),
+      };
+
+      // cek type form yang disubmit
+      switch (formType) {
+        case 'add':
+          await createSupplierHandler(payload);
+          break;
+        case 'edit':
+          await updateSupplierHandler(initialValues?.id as number, payload);
+          break;
+        default:
+          break;
+      }
+    },
+  });
+
+  const { setValues: formikSetValues } = formik;
+
+  // Initialize Formik
+  useEffect(() => {
+    formikSetValues(formikInitialValues);
+    setHatcheryTagInputValue(formikInitialValues.hatchery);
+  }, [formikSetValues, formikInitialValues, hatcheryTagInputValue]);
+
+  // Option Handler
+  const typeChangeHandler = (val: OptionType | OptionType[] | null) => {
+    formik.setFieldTouched('type', true);
+    formik.setFieldValue('type', val);
+  };
+  const categoryChangeHandler = (val: OptionType | OptionType[] | null) => {
+    formik.setFieldTouched('category', true);
+    formik.setFieldValue('category', val);
+  };
+
+  // Render
+  return (
+    <>
+      <section className='w-full max-w-xl'>
+        <header className='flex flex-col gap-4'>
+          <Button
+            href='/master-data/supplier'
+            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'>
+            {formType === 'add' && 'Tambah Supplier'}
+            {formType === 'edit' && 'Ubah Supplier'}
+            {formType === 'detail' && 'Detail Supplier'}
+          </h1>
+        </header>
+
+        <form
+          onSubmit={formik.handleSubmit}
+          onReset={formik.handleReset}
+          className='w-full mt-8 flex flex-col gap-6'
+        >
+          {/* Fields Form */}
+          <div className='flex flex-col gap-4'>
+            <TextInput
+              required
+              label='Nama Supplier'
+              name='name'
+              placeholder='Masukkan nama supplier'
+              value={formik.values.name}
+              onChange={formik.handleChange}
+              onBlur={formik.handleBlur}
+              isError={formik.touched.name && Boolean(formik.errors.name)}
+              errorMessage={formik.errors.name}
+              readOnly={formType === 'detail'}
+            />
+            <TextInput
+              required
+              label='Nama Alias'
+              name='alias'
+              placeholder='Masukkan alias supplier'
+              value={formik.values.alias}
+              onChange={formik.handleChange}
+              onBlur={formik.handleBlur}
+              isError={formik.touched.alias && Boolean(formik.errors.alias)}
+              errorMessage={formik.errors.alias}
+              readOnly={formType === 'detail'}
+            />
+            <TextInput
+              required
+              label='Nama PIC'
+              name='pic'
+              placeholder='Masukkan PIC supplier'
+              value={formik.values.pic}
+              onChange={formik.handleChange}
+              onBlur={formik.handleBlur}
+              isError={formik.touched.pic && Boolean(formik.errors.pic)}
+              errorMessage={formik.errors.pic}
+              readOnly={formType === 'detail'}
+            />
+            <SelectInput
+              required
+              placeholder='Pilih Tipe'
+              label='Tipe'
+              value={
+                typeOptions.find(
+                  (item) => item.value === formik.values.type?.value
+                ) ?? undefined
+              }
+              onChange={typeChangeHandler}
+              options={typeOptions}
+              onInputChange={setTypeSelectInputValue}
+              isError={formik.touched.type && Boolean(formik.errors.type)}
+              errorMessage={formik.errors.type as string}
+              isDisabled={formType === 'detail'}
+              isClearable
+              isSearchable={true}
+            />
+            <SelectInput
+              required
+              placeholder='Pilih Kategori'
+              label='Kategori'
+              value={
+                categoryOptions.find(
+                  (item) => item.value === formik.values.category?.value
+                ) ?? undefined
+              }
+              onChange={categoryChangeHandler}
+              options={categoryOptions}
+              onInputChange={setCategorySelectInputValue}
+              isError={formik.touched.category && Boolean(formik.errors.category)}
+              errorMessage={formik.errors.category as string}
+              isDisabled={formType === 'detail'}
+              isClearable
+              isSearchable={true}
+            />
+            <TagInput
+              name='hatchery'
+              label='Hatchery'
+              value={hatcheryTagInputValue}
+              onChange={(value) => formik.setFieldValue('hatchery', value)}
+              isError={formik.touched.hatchery && Boolean(formik.errors.hatchery)}
+              errorMessage={formik.errors.hatchery}
+              readOnly={formType === 'detail'}
+            />
+            <TextInput
+              required
+              label='Nomor Telepon'
+              name='phone'
+              placeholder='Masukkan nomor telepon supplier'
+              value={formik.values.phone}
+              onChange={formik.handleChange}
+              onBlur={formik.handleBlur}
+              isError={formik.touched.phone && Boolean(formik.errors.phone)}
+              errorMessage={formik.errors.phone}
+              readOnly={formType === 'detail'}
+            />
+            <TextInput
+              required
+              label='Email'
+              name='email'
+              placeholder='Masukkan email supplier'
+              value={formik.values.email}
+              onChange={formik.handleChange}
+              onBlur={formik.handleBlur}
+              isError={formik.touched.email && Boolean(formik.errors.email)}
+              errorMessage={formik.errors.email}
+              readOnly={formType === 'detail'}
+            />
+            <TextArea
+              required
+              label='Alamat'
+              name='address'
+              placeholder='Masukkan alamat supplier'
+              value={formik.values.address}
+              onChange={formik.handleChange}
+              onBlur={formik.handleBlur}
+              isError={formik.touched.address && Boolean(formik.errors.address)}
+              errorMessage={formik.errors.address}
+              readOnly={formType === 'detail'}
+              cols={8}
+            />
+            <TextInput
+              required
+              label='NPWP'
+              name='npwp'
+              placeholder='Masukkan NPWP supplier'
+              value={formik.values.npwp}
+              onChange={formik.handleChange}
+              onBlur={formik.handleBlur}
+              isError={formik.touched.npwp && Boolean(formik.errors.npwp)}
+              errorMessage={formik.errors.npwp}
+              readOnly={formType === 'detail'}
+            />
+            <TextInput
+              required
+              label='Nomor Rekening'
+              name='account_number'
+              placeholder='Masukkan nomor rekening supplier'
+              value={formik.values.account_number}
+              onChange={formik.handleChange}
+              onBlur={formik.handleBlur}
+              isError={
+                formik.touched.account_number &&
+                Boolean(formik.errors.account_number)
+              }
+              errorMessage={formik.errors.account_number}
+              readOnly={formType === 'detail'}
+            />
+            <TextInput
+              required
+              type='number'
+              className={{
+                wrapper: 'w-fit',
+              }}
+              label='Jatuh Tempo'
+              name='due_date'
+              placeholder='Masukkan tanggal pembayaran supplier'
+              value={formik.values.due_date}
+              onChange={formik.handleChange}
+              onBlur={formik.handleBlur}
+              isError={
+                formik.touched.due_date && Boolean(formik.errors.due_date)
+              }
+              errorMessage={formik.errors.due_date}
+              readOnly={formType === 'detail'}
+              endAdornment={<div>Hari</div>}
+            />
+          </div>
+
+          {/* Action Button  */}
+          <div className='flex flex-row justify-between gap-2 flex-wrap'>
+            {formType !== 'add' && (
+              <div className='flex flex-row justify-start gap-2'>
+                <Button
+                  type='button'
+                  color='error'
+                  onClick={deleteSupplierHandler}
+                  className='px-4'
+                >
+                  <Icon
+                    icon='material-symbols:delete-outline-rounded'
+                    width={24}
+                    height={24}
+                    className='justify-start text-sm'
+                  />
+                  Delete
+                </Button>
+
+                {formType !== 'edit' && (
+                  <Button
+                    type='button'
+                    color='warning'
+                    href={`/master-data/supplier/detail/edit/?supplierId=${initialValues?.id}`}
+                    className='px-4'
+                  >
+                    <Icon
+                      icon='material-symbols:edit-outline'
+                      width={24}
+                      height={24}
+                      className='justify-start text-sm'
+                    />
+                    Edit
+                  </Button>
+                )}
+              </div>
+            )}
+
+            {formType !== 'detail' && (
+              <div
+                className={cn('flex flex-row justify-end gap-2', {
+                  'w-full': formType === 'add',
+                })}
+              >
+                <Button type='reset' color='warning' className='px-4'>
+                  Reset
+                </Button>
+
+                <Button
+                  type='submit'
+                  color='primary'
+                  isLoading={formik.isSubmitting}
+                  disabled={!formik.isValid || formik.isSubmitting}
+                  className='px-4'
+                >
+                  Submit
+                </Button>
+              </div>
+            )}
+          </div>
+
+          {supplierFormErrorMessage && (
+            <div role='alert' className='alert alert-error'>
+              <Icon
+                icon='material-symbols:error-outline'
+                width={24}
+                height={24}
+              />
+              <span>{supplierFormErrorMessage}</span>
+            </div>
+          )}
+        </form>
+      </section>
+
+      {formType !== 'add' && (
+        <ConfirmationModal
+          ref={deleteModal.ref}
+          type='error'
+          text={`Apakah anda yakin ingin menghapus data Supplier ini (${initialValues?.name})?`}
+          secondaryButton={{
+            text: 'Tidak',
+          }}
+          primaryButton={{
+            text: 'Ya',
+            color: 'error',
+            onClick: confirmationModalDeleteclickHandler,
+            isLoading: isDeleteLoading,
+          }}
+        />
+      )}
+    </>
+  );
+};
+
+export default SupplierForm;
diff --git a/src/config/constant.ts b/src/config/constant.ts
index 4ca83946..5a9314bd 100644
--- a/src/config/constant.ts
+++ b/src/config/constant.ts
@@ -108,7 +108,7 @@ export const WAREHOUSE_TYPE_OPTIONS = [
   },
 ];
 
-export const CUSTOMER_TYPE_OPTIONS = [
+export const TYPE_OPTIONS = [
   {
     label: 'INDIVIDUAL',
     value: 'INDIVIDUAL',
@@ -118,3 +118,14 @@ export const CUSTOMER_TYPE_OPTIONS = [
     value: 'BISNIS',
   },
 ];
+
+export const CATEGORY_OPTIONS = [
+  {
+    label: 'BOP',
+    value: 'BOP',
+  },
+  {
+    label: 'SAPRONAK',
+    value: 'SAPRONAK',
+  },
+];
diff --git a/src/services/api/master-data.ts b/src/services/api/master-data.ts
index 6cda3814..58c30953 100644
--- a/src/services/api/master-data.ts
+++ b/src/services/api/master-data.ts
@@ -29,6 +29,11 @@ import {
   Customer,
   UpdateCustomerPayload,
 } from '@/types/api/master-data/customer';
+import {
+  CreateSupplierPayload,
+  Supplier,
+  UpdateSupplierPayload,
+} from '@/types/api/master-data/supplier';
 
 export const UomApi = new BaseApiService<
   Uom,
@@ -64,4 +69,10 @@ export const CustomerApi = new BaseApiService<
   Customer,
   CreateCustomerPayload,
   UpdateCustomerPayload
->('/master-data/customers');
\ No newline at end of file
+>('/master-data/customers');
+
+export const SupplierApi = new BaseApiService<
+  Supplier,
+  CreateSupplierPayload,
+  UpdateSupplierPayload
+>('/master-data/suppliers');
\ No newline at end of file
diff --git a/src/types/api/master-data/supplier.d.ts b/src/types/api/master-data/supplier.d.ts
new file mode 100644
index 00000000..eef3cba7
--- /dev/null
+++ b/src/types/api/master-data/supplier.d.ts
@@ -0,0 +1,53 @@
+// {
+//   // "name": "PT CHAROEN POKPHAND INDONESIA Tbk",
+//   "name": "BOP Vendor",
+//   // "alias": "CPI",
+//   "alias": "BOP",
+//   "pic": "Super Admin",
+//   "type": "BISNIS", // "BISNIS" | "INDIVIDUAL"
+//   // "category": "SAPRONAK", // "BOP" | "SAPRONAK"
+//   "category": "BOP", // "BOP" | "SAPRONAK"
+//   "hatchery": "Kopo,Tasik", // Comma Separated // nullable
+//   "phone": "086172527361",
+//   "email": "abdulazis@gmail.com",
+//   "address": "Banten",
+//   "npwp": "0197239080712", // nullable
+//   "account_number": "192039801283", // nullable
+//   "due_date": 1 // day
+// }
+import { BaseMetadata, CreatedUser } from "@/types/api/api-general";
+
+export type BaseSupplier = {
+    id: number;
+    name: string;
+    alias: string;
+    pic: string;
+    type: string;
+    category: string;
+    hatchery: string;
+    phone: string;
+    email: string;
+    address: string;
+    npwp: string;
+    account_number: string;
+    due_date: number;
+}
+
+export type Supplier = BaseMetadata & BaseSupplier;
+
+export type CreateSupplierPayload = {
+    name: string;
+    alias: string;
+    pic: string;
+    type: string;
+    category: string;
+    hatchery: string;
+    phone: string;
+    email: string;
+    address: string;
+    npwp: string;
+    account_number: string;
+    due_date: number;
+}
+
+export type UpdateSupplierPayload = CreateSupplierPayload;
\ No newline at end of file