chore: resolve conflict pull request

.prettierrc.json

@@ -0,0 +1,15 @@
+{
+  "singleQuote": true,
+  "jsxSingleQuote": true,
+  "endOfLine": "lf",
+  "arrowParens": "always",
+  "bracketSpacing": true,
+  "embeddedLanguageFormatting": "auto",
+  "htmlWhitespaceSensitivity": "css",
+  "printWidth": 80,
+  "proseWrap": "preserve",
+  "quoteProps": "as-needed",
+  "semi": true,
+  "tabWidth": 2,
+  "trailingComma": "es5"
+}

src/app/master-data/area/detail/layout.tsx

@@ -0,0 +1,11 @@
+import SuspenseHelper from '@/components/helper/SuspenseHelper';
+
+const Layout = ({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) => {
+  return <SuspenseHelper>{children}</SuspenseHelper>;
+};
+
+export default Layout;

src/app/master-data/bank/add/page.tsx

@@ -0,0 +1,11 @@
+import BankForm from '@/components/pages/master-data/bank/form/BankForm';
+
+const AddBank = () => {
+  return (
+    <div className='w-full p-4 flex flex-row justify-center'>
+      <BankForm />
+    </div>
+  );
+};
+
+export default AddBank;

src/app/master-data/bank/detail/edit/page.tsx

@@ -0,0 +1,47 @@
+'use client';
+
+import { useRouter, useSearchParams } from 'next/navigation';
+import useSWR from 'swr';
+
+import BankForm from '@/components/pages/master-data/bank/form/BankForm';
+
+import { BankApi } from '@/services/api/master-data';
+import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
+
+const BankEdit = () => {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+
+  const bankId = searchParams.get('bankId');
+
+  const { data: bank, isLoading: isLoadingBank } = useSWR(
+    bankId,
+    (id: number) => BankApi.getSingle(id)
+  );
+
+  if (!bankId) {
+    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 (!isLoadingBank && (!bank || isResponseError(bank))) {
+    router.replace('/404');
+    return;
+  }
+
+  return (
+    <div className='w-full p-4 flex flex-row justify-center'>
+      {isLoadingBank && <span className='loading loading-spinner loading-xl' />}
+      {!isLoadingBank && isResponseSuccess(bank) && (
+        <BankForm type='edit' initialValues={bank.data} />
+      )}
+    </div>
+  );
+};
+
+export default BankEdit;

src/app/master-data/bank/detail/layout.tsx

@@ -0,0 +1,11 @@
+import SuspenseHelper from '@/components/helper/SuspenseHelper';
+
+const Layout = ({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) => {
+  return <SuspenseHelper>{children}</SuspenseHelper>;
+};
+
+export default Layout;

src/app/master-data/bank/detail/page.tsx

@@ -0,0 +1,47 @@
+'use client';
+
+import { useRouter, useSearchParams } from 'next/navigation';
+import useSWR from 'swr';
+
+import BankForm from '@/components/pages/master-data/bank/form/BankForm';
+
+import { BankApi } from '@/services/api/master-data';
+import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
+
+const BankDetail = () => {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+
+  const bankId = searchParams.get('bankId');
+
+  const { data: bank, isLoading: isLoadingBank } = useSWR(
+    bankId,
+    (id: number) => BankApi.getSingle(id)
+  );
+
+  if (!bankId) {
+    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 (!isLoadingBank && (!bank || isResponseError(bank))) {
+    router.replace('/404');
+    return;
+  }
+
+  return (
+    <div className='w-full p-4 flex flex-row justify-center'>
+      {isLoadingBank && <span className='loading loading-spinner loading-xl' />}
+      {!isLoadingBank && isResponseSuccess(bank) && (
+        <BankForm type='detail' initialValues={bank.data} />
+      )}
+    </div>
+  );
+};
+
+export default BankDetail;

src/app/master-data/bank/page.tsx

@@ -0,0 +1,11 @@
+import BanksTable from '@/components/pages/master-data/bank/BanksTable';
+
+const Bank = () => {
+  return (
+    <section className='w-full p-4'>
+      <BanksTable />
+    </section>
+  );
+};
+
+export default Bank;

src/app/master-data/fcr/add/page.tsx

@@ -0,0 +1,11 @@
+import FcrForm from '@/components/pages/master-data/fcr/form/FcrForm';
+
+const AddFcr = () => {
+  return (
+    <div className='w-full p-4 flex flex-row justify-center'>
+      <FcrForm />
+    </div>
+  );
+};
+
+export default AddFcr;

src/app/master-data/fcr/detail/edit/page.tsx

@@ -0,0 +1,52 @@
+'use client';
+
+import { useRouter, useSearchParams } from 'next/navigation';
+import useSWR from 'swr';
+
+import FcrForm from '@/components/pages/master-data/fcr/form/FcrForm';
+
+import { FcrApi } from '@/services/api/master-data';
+import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
+import { BaseApiResponse } from '@/types/api/api-general';
+import { FcrWithStandards } from '@/types/api/master-data/fcr';
+
+const FcrEdit = () => {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+
+  const fcrId = searchParams.get('fcrId');
+
+  const { data: fcr, isLoading: isLoadingFcr } = useSWR(
+    fcrId,
+    (id: number) =>
+      FcrApi.getSingle(id) as Promise<
+        BaseApiResponse<FcrWithStandards> | undefined
+      >
+  );
+
+  if (!fcrId) {
+    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 (!isLoadingFcr && (!fcr || isResponseError(fcr))) {
+    router.replace('/404');
+    return;
+  }
+
+  return (
+    <div className='w-full p-4 flex flex-row justify-center'>
+      {isLoadingFcr && <span className='loading loading-spinner loading-xl' />}
+      {!isLoadingFcr && isResponseSuccess(fcr) && (
+        <FcrForm type='edit' initialValues={fcr.data} />
+      )}
+    </div>
+  );
+};
+
+export default FcrEdit;

src/app/master-data/fcr/detail/layout.tsx

@@ -0,0 +1,11 @@
+import SuspenseHelper from '@/components/helper/SuspenseHelper';
+
+const Layout = ({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) => {
+  return <SuspenseHelper>{children}</SuspenseHelper>;
+};
+
+export default Layout;

src/app/master-data/fcr/detail/page.tsx

@@ -0,0 +1,52 @@
+'use client';
+
+import { useRouter, useSearchParams } from 'next/navigation';
+import useSWR from 'swr';
+
+import FcrForm from '@/components/pages/master-data/fcr/form/FcrForm';
+
+import { FcrApi } from '@/services/api/master-data';
+import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
+import { FcrWithStandards } from '@/types/api/master-data/fcr';
+import { BaseApiResponse } from '@/types/api/api-general';
+
+const FcrDetail = () => {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+
+  const fcrId = searchParams.get('fcrId');
+
+  const { data: fcr, isLoading: isLoadingFcr } = useSWR(
+    fcrId,
+    (id: number) =>
+      FcrApi.getSingle(id) as Promise<
+        BaseApiResponse<FcrWithStandards> | undefined
+      >
+  );
+
+  if (!fcrId) {
+    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 (!isLoadingFcr && (!fcr || isResponseError(fcr))) {
+    router.replace('/404');
+    return;
+  }
+
+  return (
+    <div className='w-full p-4 flex flex-row justify-center'>
+      {isLoadingFcr && <span className='loading loading-spinner loading-xl' />}
+      {!isLoadingFcr && isResponseSuccess(fcr) && (
+        <FcrForm type='detail' initialValues={fcr.data} />
+      )}
+    </div>
+  );
+};
+
+export default FcrDetail;

src/app/master-data/fcr/page.tsx

@@ -0,0 +1,11 @@
+import FcrsTable from '@/components/pages/master-data/fcr/FcrsTable';
+
+const Fcr = () => {
+  return (
+    <section className='w-full p-4'>
+      <FcrsTable />
+    </section>
+  );
+};
+
+export default Fcr;

src/app/master-data/kandang/detail/layout.tsx

@@ -0,0 +1,11 @@
+import SuspenseHelper from '@/components/helper/SuspenseHelper';
+
+const Layout = ({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) => {
+  return <SuspenseHelper>{children}</SuspenseHelper>;
+};
+
+export default Layout;

src/app/master-data/location/detail/layout.tsx

@@ -0,0 +1,11 @@
+import SuspenseHelper from '@/components/helper/SuspenseHelper';
+
+const Layout = ({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) => {
+  return <SuspenseHelper>{children}</SuspenseHelper>;
+};
+
+export default Layout;

src/app/master-data/nonstock/detail/edit/page.tsx

@@ -5,8 +5,8 @@ import useSWR from 'swr';
 
 import NonstockForm from '@/components/pages/master-data/nonstock/form/NonstockForm';
 
-import { getNonstock } from '@/services/api/master-data/nonstock';
-import { isResponseSuccess } from '@/lib/api-helper';
+import { NonstockApi } from '@/services/api/master-data';
+import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
 
 const NonstockEdit = () => {
   const router = useRouter();
@@ -16,7 +16,7 @@ const NonstockEdit = () => {
 
   const { data: nonstock, isLoading: isLoadingNonstock } = useSWR(
     nonstockId,
-    getNonstock
+    (id: number) => NonstockApi.getSingle(id)
   );
 
   if (!nonstockId) {
@@ -29,7 +29,7 @@ const NonstockEdit = () => {
     );
   }
 
-  if (!isLoadingNonstock && !nonstock) {
+  if (!isLoadingNonstock && (!nonstock || isResponseError(nonstock))) {
     router.replace('/404');
     return;
   }

src/app/master-data/nonstock/detail/layout.tsx

@@ -0,0 +1,11 @@
+import SuspenseHelper from '@/components/helper/SuspenseHelper';
+
+const Layout = ({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) => {
+  return <SuspenseHelper>{children}</SuspenseHelper>;
+};
+
+export default Layout;

src/app/master-data/nonstock/detail/page.tsx

@@ -5,8 +5,8 @@ import useSWR from 'swr';
 
 import NonstockForm from '@/components/pages/master-data/nonstock/form/NonstockForm';
 
-import { getNonstock } from '@/services/api/master-data/nonstock';
-import { isResponseSuccess } from '@/lib/api-helper';
+import { NonstockApi } from '@/services/api/master-data';
+import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
 
 const NonstockDetail = () => {
   const router = useRouter();
@@ -16,7 +16,7 @@ const NonstockDetail = () => {
 
   const { data: nonstock, isLoading: isLoadingNonstock } = useSWR(
     nonstockId,
-    getNonstock
+    (id: number) => NonstockApi.getSingle(id)
   );
 
   if (!nonstockId) {
@@ -29,7 +29,7 @@ const NonstockDetail = () => {
     );
   }
 
-  if (!isLoadingNonstock && !nonstock) {
+  if (!isLoadingNonstock && (!nonstock || isResponseError(nonstock))) {
     router.replace('/404');
     return;
   }

src/app/master-data/product-category/detail/layout.tsx

@@ -0,0 +1,11 @@
+import SuspenseHelper from '@/components/helper/SuspenseHelper';
+
+const Layout = ({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) => {
+  return <SuspenseHelper>{children}</SuspenseHelper>;
+};
+
+export default Layout;

src/app/master-data/product/detail/layout.tsx

@@ -0,0 +1,11 @@
+import SuspenseHelper from '@/components/helper/SuspenseHelper';
+
+const Layout = ({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) => {
+  return <SuspenseHelper>{children}</SuspenseHelper>;
+};
+
+export default Layout;

src/app/master-data/uom/detail/layout.tsx

@@ -0,0 +1,11 @@
+import SuspenseHelper from '@/components/helper/SuspenseHelper';
+
+const Layout = ({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) => {
+  return <SuspenseHelper>{children}</SuspenseHelper>;
+};
+
+export default Layout;

src/app/master-data/warehouse/detail/layout.tsx

@@ -0,0 +1,11 @@
+import SuspenseHelper from '@/components/helper/SuspenseHelper';
+
+const Layout = ({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) => {
+  return <SuspenseHelper>{children}</SuspenseHelper>;
+};
+
+export default Layout;

src/components/MainDrawer.tsx

@@ -199,7 +199,7 @@ const MainDrawer = ({
 
       if (!hasSubmenu) return;
 
-      const activeSubmenu = menu.submenu.find((item) =>
+      const activeSubmenu = menu.submenu?.find((item) =>
         isPathActive(pathname, item.link)
       );
 

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;

src/components/input/TextInput.tsx

@@ -122,7 +122,9 @@ const TextInput = ({
       {!isError && bottomLabel && (
         <p className='w-full text-sm opacity-60'>{bottomLabel}</p>
       )}
-      {isError && <p className='w-full text-sm text-error'>{errorMessage}</p>}
+      {isError && errorMessage && (
+        <p className='w-full text-sm text-error'>{errorMessage}</p>
+      )}
     </div>
   );
 };

src/components/pages/master-data/bank/BanksTable.tsx

@@ -0,0 +1,289 @@
+'use client';
+
+import { ChangeEventHandler, useEffect, useState } from 'react';
+import useSWR from 'swr';
+import { CellContext, ColumnDef, SortingState } from '@tanstack/react-table';
+import toast from 'react-hot-toast';
+
+import { Icon } from '@iconify/react';
+import Table from '@/components/Table';
+import DebouncedTextInput from '@/components/input/DebouncedTextInput';
+import Button from '@/components/Button';
+import { useModal } from '@/components/Modal';
+import ConfirmationModal from '@/components/modal/ConfirmationModal';
+import SelectInput, { OptionType } from '@/components/input/SelectInput';
+import RowDropdownOptions from '@/components/table/RowDropdownOptions';
+import RowCollapseOptions from '@/components/table/RowCollapseOptions';
+
+import { Bank } from '@/types/api/master-data/bank';
+import { BankApi } from '@/services/api/master-data';
+import { cn } from '@/lib/helper';
+import { isResponseSuccess } from '@/lib/api-helper';
+import { useTableFilter } from '@/services/hooks/useTableFilter';
+import { ROWS_OPTIONS } from '@/config/constant';
+
+const RowOptionsMenu = ({
+  type = 'dropdown',
+  props,
+  deleteClickHandler,
+}: {
+  type: 'dropdown' | 'collapse';
+  props: CellContext<Bank, 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/bank/detail/?bankId=${props.row.original.id}`}
+        variant='ghost'
+        color='primary'
+        className='justify-start text-sm'
+      >
+        <Icon icon='mdi:eye-outline' width={16} height={16} />
+        Detail
+      </Button>
+
+      <Button
+        href={`/master-data/bank/detail/edit/?bankId=${props.row.original.id}`}
+        variant='ghost'
+        color='warning'
+        className='justify-start text-sm'
+      >
+        <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
+          icon='material-symbols:delete-outline-rounded'
+          width={16}
+          height={16}
+          className='justify-start text-sm'
+        />
+        Delete
+      </Button>
+    </div>
+  );
+};
+
+const BanksTable = () => {
+  const {
+    state: tableFilterState,
+    updateFilter,
+    setPage,
+    setPageSize,
+    toQueryString: getTableFilterQueryString,
+  } = useTableFilter({
+    initial: { search: '', nameSort: '' },
+    paramMap: { page: 'page', pageSize: 'limit', nameSort: 'sort_name' },
+  });
+
+  const {
+    data: banks,
+    isLoading,
+    mutate: refreshBanks,
+  } = useSWR(
+    `${BankApi.basePath}${getTableFilterQueryString()}`,
+    BankApi.getAllFetcher
+  );
+
+  const deleteModal = useModal();
+
+  const [selectedBank, setSelectedBank] = useState<Bank | undefined>(undefined);
+  const [isDeleteLoading, setIsDeleteLoading] = useState(false);
+
+  const [sorting, setSorting] = useState<SortingState>([]);
+
+  const banksColumns: ColumnDef<Bank>[] = [
+    {
+      header: '#',
+      cell: (props) =>
+        tableFilterState.pageSize * (tableFilterState.page - 1) +
+        props.row.index +
+        1,
+    },
+    {
+      accessorKey: 'name',
+      header: 'Nama',
+    },
+    {
+      accessorKey: 'alias',
+      header: 'Alias',
+    },
+    {
+      accessorKey: 'account_number',
+      header: 'No. Rekening',
+    },
+    {
+      accessorKey: 'owner',
+      header: 'Pemilik',
+      cell: (props) => (props.getValue() ? props.getValue() : '-'),
+    },
+    {
+      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 = () => {
+          setSelectedBank(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>
+            )}
+          </>
+        );
+      },
+    },
+  ];
+
+  const confirmationModalDeleteClickHandler = async () => {
+    setIsDeleteLoading(true);
+
+    await BankApi.delete(selectedBank?.id as number);
+    refreshBanks();
+
+    deleteModal.closeModal();
+    toast.success('Successfully delete Bank!');
+    setIsDeleteLoading(false);
+  };
+
+  const searchChangeHandler: ChangeEventHandler<HTMLInputElement> = (e) => {
+    updateFilter('search', e.target.value);
+  };
+
+  const pageSizeChangeHandler = (val: OptionType | OptionType[] | null) => {
+    const newVal = val as OptionType;
+
+    setPageSize(newVal.value as number);
+  };
+
+  // track sorting
+  useEffect(() => {
+    const isNameSorted = sorting.find((sortItem) => sortItem.id === 'name');
+
+    if (!isNameSorted) {
+      updateFilter('nameSort', '');
+    } else {
+      updateFilter('nameSort', isNameSorted.desc ? 'desc' : 'asc');
+    }
+  }, [sorting]);
+
+  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/bank/add' color='primary'>
+                <Icon icon='ic:round-plus' width={24} height={24} />
+                Tambah Bank
+              </Button>
+            </div>
+
+            <DebouncedTextInput
+              name='search'
+              placeholder='Cari Bank'
+              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<Bank>
+          data={isResponseSuccess(banks) ? banks?.data : []}
+          columns={banksColumns}
+          pageSize={tableFilterState.pageSize}
+          page={isResponseSuccess(banks) ? banks?.meta?.page : 0}
+          totalItems={isResponseSuccess(banks) ? banks?.meta?.total_results : 0}
+          onPageChange={setPage}
+          isLoading={isLoading}
+          sorting={sorting}
+          setSorting={setSorting}
+          className={{
+            containerClassName: cn({
+              'mb-20': isResponseSuccess(banks) && banks?.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 Bank ini (${selectedBank?.name})?`}
+        secondaryButton={{
+          text: 'Tidak',
+        }}
+        primaryButton={{
+          text: 'Ya',
+          color: 'error',
+          isLoading: isDeleteLoading,
+          onClick: confirmationModalDeleteClickHandler,
+        }}
+      />
+    </>
+  );
+};
+
+export default BanksTable;

src/components/pages/master-data/bank/form/BankForm.schema.ts

@@ -0,0 +1,14 @@
+import * as Yup from 'yup';
+
+export const BankFormSchema = Yup.object({
+  name: Yup.string().required('Nama wajib diisi!'),
+  alias: Yup.string()
+    .max(5, 'Maksimal 5 karakter!')
+    .required('Alias wajib diisi!'),
+  account_number: Yup.string().required('Rekening wajib diisi!'),
+  owner: Yup.string(),
+});
+
+export const UpdateBankFormSchema = BankFormSchema;
+
+export type BankFormValues = Yup.InferType<typeof BankFormSchema>;

src/components/pages/master-data/bank/form/BankForm.tsx

@@ -0,0 +1,301 @@
+'use client';
+
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useRouter } from 'next/navigation';
+import { useFormik } from 'formik';
+import { toast } from 'react-hot-toast';
+
+import { Icon } from '@iconify/react';
+import Button from '@/components/Button';
+import TextInput from '@/components/input/TextInput';
+import { useModal } from '@/components/Modal';
+import ConfirmationModal from '@/components/modal/ConfirmationModal';
+
+import {
+  BankFormSchema,
+  BankFormValues,
+  UpdateBankFormSchema,
+} from '@/components/pages/master-data/bank/form/BankForm.schema';
+import { isResponseError } from '@/lib/api-helper';
+import {
+  CreateBankPayload,
+  Bank,
+  UpdateBankPayload,
+} from '@/types/api/master-data/bank';
+import { BankApi } from '@/services/api/master-data';
+import { cn } from '@/lib/helper';
+
+interface BankFormProps {
+  type?: 'add' | 'edit' | 'detail';
+  initialValues?: Bank;
+}
+
+const BankForm = ({ type = 'add', initialValues }: BankFormProps) => {
+  const router = useRouter();
+  const deleteModal = useModal();
+
+  const [bankFormErrorMessage, setBankFormErrorMessage] = useState('');
+  const [isDeleteLoading, setIsDeleteLoading] = useState(false);
+
+  const createBankHandler = useCallback(
+    async (payload: CreateBankPayload) => {
+      const createBankRes = await BankApi.create(payload);
+
+      if (isResponseError(createBankRes)) {
+        setBankFormErrorMessage(createBankRes.message);
+        return;
+      }
+
+      toast.success(createBankRes?.message as string);
+      router.push('/master-data/bank');
+    },
+    [router]
+  );
+
+  const updateBankHandler = useCallback(
+    async (bankId: number, payload: UpdateBankPayload) => {
+      const updateBankRes = await BankApi.update(bankId, payload);
+
+      if (updateBankRes?.status === 'error') {
+        setBankFormErrorMessage(updateBankRes.message);
+        return;
+      }
+
+      toast.success(updateBankRes?.message as string);
+      router.refresh();
+      router.push('/master-data/bank');
+    },
+    [router]
+  );
+
+  const formikInitialValues = useMemo<BankFormValues>(() => {
+    return {
+      name: initialValues?.name ?? '',
+      alias: initialValues?.alias ?? '',
+      account_number: initialValues?.account_number ?? '',
+      owner: initialValues?.owner,
+    };
+  }, [initialValues]);
+
+  const formik = useFormik<BankFormValues>({
+    initialValues: formikInitialValues,
+    validationSchema: type === 'edit' ? UpdateBankFormSchema : BankFormSchema,
+    onSubmit: async (values) => {
+      setBankFormErrorMessage('');
+
+      const bankPayload: CreateBankPayload = {
+        name: values.name,
+        alias: values.alias,
+        account_number: values.account_number.toString(),
+        owner: values.owner ? values.owner : '',
+      };
+
+      switch (type) {
+        case 'add':
+          await createBankHandler(bankPayload);
+          break;
+
+        case 'edit':
+          await updateBankHandler(initialValues?.id as number, bankPayload);
+          break;
+      }
+    },
+  });
+
+  const { setValues: formikSetValues } = formik;
+
+  const deleteBankClickHandler = () => {
+    deleteModal.openModal();
+  };
+
+  const confirmationModalDeleteClickHandler = async () => {
+    setIsDeleteLoading(true);
+
+    await BankApi.delete(initialValues?.id as number);
+
+    deleteModal.closeModal();
+    toast.success('Successfully delete Bank!');
+    setIsDeleteLoading(false);
+    router.push('/master-data/bank');
+  };
+
+  useEffect(() => {
+    formikSetValues(formikInitialValues);
+  }, [formikSetValues, formikInitialValues]);
+
+  return (
+    <>
+      <section className='w-full max-w-xl'>
+        <header className='flex flex-col gap-4'>
+          <Button
+            href='/master-data/bank'
+            variant='link'
+            className='w-fit p-0 text-primary'
+          >
+            <Icon icon='uil:arrow-left' width={24} height={24} />
+            Kembali
+          </Button>
+
+          <h1 className='text-2xl font-bold text-center'>
+            {type === 'add' && 'Tambah Bank'}
+            {type === 'edit' && 'Edit Bank'}
+            {type === 'detail' && 'Detail Bank'}
+          </h1>
+        </header>
+
+        <form
+          onSubmit={formik.handleSubmit}
+          onReset={formik.handleReset}
+          className='w-full mt-8 flex flex-col gap-6'
+        >
+          <div className='flex flex-col gap-4'>
+            <TextInput
+              required
+              label='Nama'
+              name='name'
+              placeholder='Masukkan nama Bank'
+              value={formik.values.name}
+              onChange={formik.handleChange}
+              onBlur={formik.handleBlur}
+              isError={formik.touched.name && Boolean(formik.errors.name)}
+              errorMessage={formik.errors.name}
+              readOnly={type === 'detail'}
+            />
+
+            <TextInput
+              required
+              label='Alias'
+              name='alias'
+              placeholder='Masukkan alias'
+              value={formik.values.alias}
+              onChange={formik.handleChange}
+              onBlur={formik.handleBlur}
+              isError={formik.touched.alias && Boolean(formik.errors.alias)}
+              errorMessage={formik.errors.alias}
+              readOnly={type === 'detail'}
+            />
+
+            <TextInput
+              required
+              type='number'
+              label='No. Rekening'
+              name='account_number'
+              placeholder='Masukkan no. rekening'
+              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={type === 'detail'}
+            />
+
+            <TextInput
+              label='Pemilik'
+              name='owner'
+              placeholder='Masukkan nama pemilik'
+              value={formik.values.owner}
+              onChange={formik.handleChange}
+              onBlur={formik.handleBlur}
+              isError={formik.touched.owner && Boolean(formik.errors.owner)}
+              errorMessage={formik.errors.owner}
+              readOnly={type === 'detail'}
+            />
+          </div>
+
+          <div className='flex flex-row justify-between gap-2 flex-wrap'>
+            {type !== 'add' && (
+              <div className='flex flex-row justify-start gap-2'>
+                <Button
+                  type='button'
+                  color='error'
+                  onClick={deleteBankClickHandler}
+                  className='px-4'
+                >
+                  <Icon
+                    icon='material-symbols:delete-outline-rounded'
+                    width={24}
+                    height={24}
+                    className='justify-start text-sm'
+                  />
+                  Delete
+                </Button>
+
+                {type !== 'edit' && (
+                  <Button
+                    type='button'
+                    color='warning'
+                    href={`/master-data/bank/detail/edit/?bankId=${initialValues?.id}`}
+                    className='px-4'
+                  >
+                    <Icon
+                      icon='material-symbols:edit-outline'
+                      width={24}
+                      height={24}
+                      className='justify-start text-sm'
+                    />
+                    Edit
+                  </Button>
+                )}
+              </div>
+            )}
+
+            {type !== 'detail' && (
+              <div
+                className={cn('flex flex-row justify-end gap-2', {
+                  'w-full': type === '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>
+
+          {bankFormErrorMessage && (
+            <div role='alert' className='alert alert-error'>
+              <Icon
+                icon='material-symbols:error-outline'
+                width={24}
+                height={24}
+              />
+              <span>{bankFormErrorMessage}</span>
+            </div>
+          )}
+        </form>
+      </section>
+
+      {type !== 'add' && (
+        <ConfirmationModal
+          ref={deleteModal.ref}
+          type='error'
+          text={`Apakah anda yakin ingin menghapus data Bank ini (${initialValues?.name})?`}
+          secondaryButton={{
+            text: 'Tidak',
+          }}
+          primaryButton={{
+            text: 'Ya',
+            color: 'error',
+            isLoading: isDeleteLoading,
+            onClick: confirmationModalDeleteClickHandler,
+          }}
+        />
+      )}
+    </>
+  );
+};
+
+export default BankForm;

src/components/pages/master-data/fcr/FcrsTable.tsx

@@ -0,0 +1,276 @@
+'use client';
+
+import { ChangeEventHandler, useEffect, useState } from 'react';
+import useSWR from 'swr';
+import { CellContext, ColumnDef, SortingState } from '@tanstack/react-table';
+import toast from 'react-hot-toast';
+
+import { Icon } from '@iconify/react';
+import Table from '@/components/Table';
+import DebouncedTextInput from '@/components/input/DebouncedTextInput';
+import Button from '@/components/Button';
+import { useModal } from '@/components/Modal';
+import ConfirmationModal from '@/components/modal/ConfirmationModal';
+import SelectInput, { OptionType } from '@/components/input/SelectInput';
+import RowDropdownOptions from '@/components/table/RowDropdownOptions';
+import RowCollapseOptions from '@/components/table/RowCollapseOptions';
+
+import { Fcr } from '@/types/api/master-data/fcr';
+import { FcrApi } from '@/services/api/master-data';
+import { cn } from '@/lib/helper';
+import { isResponseSuccess } from '@/lib/api-helper';
+import { useTableFilter } from '@/services/hooks/useTableFilter';
+import { ROWS_OPTIONS } from '@/config/constant';
+
+const RowOptionsMenu = ({
+  type = 'dropdown',
+  props,
+  deleteClickHandler,
+}: {
+  type: 'dropdown' | 'collapse';
+  props: CellContext<Fcr, 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/fcr/detail/?fcrId=${props.row.original.id}`}
+        variant='ghost'
+        color='primary'
+        className='justify-start text-sm'
+      >
+        <Icon icon='mdi:eye-outline' width={16} height={16} />
+        Detail
+      </Button>
+
+      <Button
+        href={`/master-data/fcr/detail/edit/?fcrId=${props.row.original.id}`}
+        variant='ghost'
+        color='warning'
+        className='justify-start text-sm'
+      >
+        <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
+          icon='material-symbols:delete-outline-rounded'
+          width={16}
+          height={16}
+          className='justify-start text-sm'
+        />
+        Delete
+      </Button>
+    </div>
+  );
+};
+
+const FcrsTable = () => {
+  const {
+    state: tableFilterState,
+    updateFilter,
+    setPage,
+    setPageSize,
+    toQueryString: getTableFilterQueryString,
+  } = useTableFilter({
+    initial: { search: '', nameSort: '' },
+    paramMap: { page: 'page', pageSize: 'limit', nameSort: 'sort_name' },
+  });
+
+  const {
+    data: fcrs,
+    isLoading,
+    mutate: refreshFcrs,
+  } = useSWR(
+    `${FcrApi.basePath}${getTableFilterQueryString()}`,
+    FcrApi.getAllFetcher
+  );
+
+  const deleteModal = useModal();
+
+  const [selectedFcr, setSelectedFcr] = useState<Fcr | undefined>(undefined);
+  const [isDeleteLoading, setIsDeleteLoading] = useState(false);
+
+  const [sorting, setSorting] = useState<SortingState>([]);
+
+  const fcrsColumns: ColumnDef<Fcr>[] = [
+    {
+      header: '#',
+      cell: (props) =>
+        tableFilterState.pageSize * (tableFilterState.page - 1) +
+        props.row.index +
+        1,
+    },
+    {
+      accessorKey: 'name',
+      header: 'Nama',
+    },
+    {
+      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 = () => {
+          setSelectedFcr(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>
+            )}
+          </>
+        );
+      },
+    },
+  ];
+
+  const confirmationModalDeleteClickHandler = async () => {
+    setIsDeleteLoading(true);
+
+    await FcrApi.delete(selectedFcr?.id as number);
+    refreshFcrs();
+
+    deleteModal.closeModal();
+    toast.success('Successfully delete FCR!');
+    setIsDeleteLoading(false);
+  };
+
+  const searchChangeHandler: ChangeEventHandler<HTMLInputElement> = (e) => {
+    updateFilter('search', e.target.value);
+  };
+
+  const pageSizeChangeHandler = (val: OptionType | OptionType[] | null) => {
+    const newVal = val as OptionType;
+
+    setPageSize(newVal.value as number);
+  };
+
+  // track sorting
+  useEffect(() => {
+    const isNameSorted = sorting.find((sortItem) => sortItem.id === 'name');
+
+    if (!isNameSorted) {
+      updateFilter('nameSort', '');
+    } else {
+      updateFilter('nameSort', isNameSorted.desc ? 'desc' : 'asc');
+    }
+  }, [sorting]);
+
+  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/fcr/add' color='primary'>
+                <Icon icon='ic:round-plus' width={24} height={24} />
+                Tambah FCR
+              </Button>
+            </div>
+
+            <DebouncedTextInput
+              name='search'
+              placeholder='Cari FCR'
+              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<Fcr>
+          data={isResponseSuccess(fcrs) ? fcrs?.data : []}
+          columns={fcrsColumns}
+          pageSize={tableFilterState.pageSize}
+          page={isResponseSuccess(fcrs) ? fcrs?.meta?.page : 0}
+          totalItems={isResponseSuccess(fcrs) ? fcrs?.meta?.total_results : 0}
+          onPageChange={setPage}
+          isLoading={isLoading}
+          sorting={sorting}
+          setSorting={setSorting}
+          className={{
+            containerClassName: cn({
+              'mb-20': isResponseSuccess(fcrs) && fcrs?.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 FCR ini (${selectedFcr?.name})?`}
+        secondaryButton={{
+          text: 'Tidak',
+        }}
+        primaryButton={{
+          text: 'Ya',
+          color: 'error',
+          isLoading: isDeleteLoading,
+          onClick: confirmationModalDeleteClickHandler,
+        }}
+      />
+    </>
+  );
+};
+
+export default FcrsTable;

src/components/pages/master-data/fcr/form/FcrForm.schema.ts

@@ -0,0 +1,26 @@
+import * as Yup from 'yup';
+
+const FcrStandardSchema: Yup.ObjectSchema<{
+  weight: number | string;
+  fcr_number: number | string;
+  mortality: number | string;
+}> = Yup.object({
+  weight: Yup.number().nullable().required('Bobot wajib diisi!'),
+  fcr_number: Yup.number()
+    .nullable()
+    .typeError('FCR harus angka!')
+    .required('FCR harus diisi!'),
+  mortality: Yup.number().nullable().required('Mortalitas wajib diisi!'),
+});
+
+export const FcrFormSchema = Yup.object({
+  name: Yup.string().required('Nama wajib diisi!'),
+  fcrStandards: Yup.array()
+    .of(FcrStandardSchema)
+    .min(1, 'Minimal 1 FCR Standard diisi1')
+    .required('FCR wajib diisi!'),
+});
+
+export const UpdateFcrFormSchema = FcrFormSchema;
+
+export type FcrFormValues = Yup.InferType<typeof FcrFormSchema>;

src/components/pages/master-data/fcr/form/FcrForm.tsx

@@ -0,0 +1,389 @@
+'use client';
+
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useRouter } from 'next/navigation';
+import { useFormik } from 'formik';
+import { toast } from 'react-hot-toast';
+
+import { Icon } from '@iconify/react';
+import Button from '@/components/Button';
+import TextInput from '@/components/input/TextInput';
+import { useModal } from '@/components/Modal';
+import ConfirmationModal from '@/components/modal/ConfirmationModal';
+
+import {
+  FcrFormSchema,
+  FcrFormValues,
+  UpdateFcrFormSchema,
+} from '@/components/pages/master-data/fcr/form/FcrForm.schema';
+import { isResponseError } from '@/lib/api-helper';
+import {
+  CreateFcrPayload,
+  Fcr,
+  FcrWithStandards,
+  UpdateFcrPayload,
+} from '@/types/api/master-data/fcr';
+import { FcrApi } from '@/services/api/master-data';
+import { cn } from '@/lib/helper';
+
+interface FcrFormProps {
+  type?: 'add' | 'edit' | 'detail';
+  initialValues?: FcrWithStandards;
+}
+
+const FcrForm = ({ type = 'add', initialValues }: FcrFormProps) => {
+  const router = useRouter();
+  const deleteModal = useModal();
+
+  const [fcrFormErrorMessage, setFcrFormErrorMessage] = useState('');
+  const [isDeleteLoading, setIsDeleteLoading] = useState(false);
+
+  const createFcrHandler = useCallback(
+    async (payload: CreateFcrPayload) => {
+      const createFcrRes = await FcrApi.create(payload);
+
+      if (isResponseError(createFcrRes)) {
+        setFcrFormErrorMessage(createFcrRes.message);
+        return;
+      }
+
+      toast.success(createFcrRes?.message as string);
+      router.push('/master-data/fcr');
+    },
+    [router]
+  );
+
+  const updateFcrHandler = useCallback(
+    async (fcrId: number, payload: UpdateFcrPayload) => {
+      const updateFcrRes = await FcrApi.update(fcrId, payload);
+
+      if (updateFcrRes?.status === 'error') {
+        setFcrFormErrorMessage(updateFcrRes.message);
+        return;
+      }
+
+      toast.success(updateFcrRes?.message as string);
+      router.refresh();
+      router.push('/master-data/fcr');
+    },
+    [router]
+  );
+
+  const formikInitialValues = useMemo<FcrFormValues>(() => {
+    return {
+      name: initialValues?.name ?? '',
+      fcrStandards: initialValues?.fcr_standards
+        ? initialValues?.fcr_standards
+        : [
+            {
+              weight: '',
+              fcr_number: '',
+              mortality: '',
+            },
+          ],
+    };
+  }, [initialValues]);
+
+  const formik = useFormik<FcrFormValues>({
+    initialValues: formikInitialValues,
+    validationSchema: type === 'edit' ? UpdateFcrFormSchema : FcrFormSchema,
+    onSubmit: async (values) => {
+      setFcrFormErrorMessage('');
+
+      const fcrPayload: CreateFcrPayload = {
+        name: values.name,
+        fcr_standards: values.fcrStandards as CreateFcrPayload['fcr_standards'],
+      };
+
+      switch (type) {
+        case 'add':
+          await createFcrHandler(fcrPayload);
+          break;
+
+        case 'edit':
+          await updateFcrHandler(initialValues?.id as number, fcrPayload);
+          break;
+      }
+    },
+  });
+
+  const { setValues: formikSetValues } = formik;
+
+  const addFcrStandard = () =>
+    formik.setFieldValue('fcrStandards', [
+      ...formik.values.fcrStandards,
+      {
+        weight: '',
+        fcr_number: '',
+        mortality: '',
+      },
+    ]);
+
+  const removeFcrStandard = (i: number) =>
+    formik.setFieldValue(
+      'fcrStandards',
+      formik.values.fcrStandards.filter((_, idx) => idx !== i)
+    );
+
+  const deleteFcrClickHandler = () => {
+    deleteModal.openModal();
+  };
+
+  const confirmationModalDeleteClickHandler = async () => {
+    setIsDeleteLoading(true);
+
+    await FcrApi.delete(initialValues?.id as number);
+
+    deleteModal.closeModal();
+    toast.success('Successfully delete FCR!');
+    setIsDeleteLoading(false);
+    router.push('/master-data/fcr');
+  };
+
+  const isRepeaterInputError = (
+    column: keyof CreateFcrPayload['fcr_standards'][0],
+    idx: number
+  ) => {
+    return (
+      formik.touched.fcrStandards?.[idx]?.[column] &&
+      Boolean(
+        formik.errors.fcrStandards?.[idx] instanceof Object &&
+          formik.errors.fcrStandards?.[idx]?.[column]
+      )
+    );
+  };
+
+  useEffect(() => {
+    formikSetValues(formikInitialValues);
+  }, [formikSetValues, formikInitialValues]);
+
+  return (
+    <>
+      <section className='w-full max-w-5xl'>
+        <header className='flex flex-col gap-4'>
+          <Button
+            href='/master-data/fcr'
+            variant='link'
+            className='w-fit p-0 text-primary'
+          >
+            <Icon icon='uil:arrow-left' width={24} height={24} />
+            Kembali
+          </Button>
+
+          <h1 className='text-2xl font-bold text-center'>
+            {type === 'add' && 'Tambah FCR'}
+            {type === 'edit' && 'Edit FCR'}
+            {type === 'detail' && 'Detail FCR'}
+          </h1>
+        </header>
+
+        <form
+          onSubmit={formik.handleSubmit}
+          onReset={formik.handleReset}
+          className='w-full mt-8 flex flex-col gap-6'
+        >
+          <div className='flex flex-col gap-4'>
+            <TextInput
+              required
+              label='Nama'
+              name='name'
+              placeholder='Masukkan nama FCR'
+              value={formik.values.name}
+              onChange={formik.handleChange}
+              onBlur={formik.handleBlur}
+              isError={formik.touched.name && Boolean(formik.errors.name)}
+              errorMessage={formik.errors.name}
+              readOnly={type === 'detail'}
+            />
+
+            <div>
+              <div className='overflow-x-auto'>
+                <table className='table'>
+                  <thead>
+                    <tr>
+                      <th>Bobot</th>
+                      <th>FCR</th>
+                      <th>Mortalitas</th>
+                      {type !== 'detail' && <th>Aksi</th>}
+                    </tr>
+                  </thead>
+
+                  <tbody>
+                    {formik.values.fcrStandards.map((fcrStandard, idx) => (
+                      <tr key={idx}>
+                        <td>
+                          <TextInput
+                            required
+                            type='number'
+                            name={`fcrStandards[${idx}].weight`}
+                            placeholder='Masukkan bobot'
+                            value={fcrStandard.weight}
+                            onChange={formik.handleChange}
+                            onBlur={formik.handleBlur}
+                            isError={isRepeaterInputError('weight', idx)}
+                            readOnly={type === 'detail'}
+                            className={{
+                              wrapper: 'w-full min-w-24',
+                            }}
+                          />
+                        </td>
+                        <td>
+                          <TextInput
+                            required
+                            type='number'
+                            name={`fcrStandards[${idx}].fcr_number`}
+                            placeholder='Masukkan FCR'
+                            value={fcrStandard.fcr_number}
+                            onChange={formik.handleChange}
+                            onBlur={formik.handleBlur}
+                            isError={isRepeaterInputError('fcr_number', idx)}
+                            readOnly={type === 'detail'}
+                            className={{
+                              wrapper: 'w-full min-w-24',
+                            }}
+                          />
+                        </td>
+                        <td>
+                          <TextInput
+                            required
+                            type='number'
+                            name={`fcrStandards[${idx}].mortality`}
+                            placeholder='Masukkan mortalitas'
+                            value={fcrStandard.mortality}
+                            onChange={formik.handleChange}
+                            onBlur={formik.handleBlur}
+                            isError={isRepeaterInputError('mortality', idx)}
+                            readOnly={type === 'detail'}
+                            className={{
+                              wrapper: 'w-full min-w-24',
+                            }}
+                          />
+                        </td>
+                        {type !== 'detail' && (
+                          <td>
+                            <Button
+                              type='button'
+                              color='error'
+                              onClick={() => removeFcrStandard(idx)}
+                            >
+                              <Icon
+                                icon='material-symbols:delete-outline-rounded'
+                                width={24}
+                                height={24}
+                              />
+                            </Button>
+                          </td>
+                        )}
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+            </div>
+
+            {type !== 'detail' && (
+              <Button
+                type='button'
+                color='success'
+                onClick={addFcrStandard}
+                className='w-fit mx-auto'
+              >
+                <Icon icon='ic:round-plus' width={24} height={24} /> Tambah FCR
+              </Button>
+            )}
+          </div>
+
+          <div className='flex flex-row justify-between gap-2 flex-wrap'>
+            {type !== 'add' && (
+              <div className='flex flex-row justify-start gap-2'>
+                <Button
+                  type='button'
+                  color='error'
+                  onClick={deleteFcrClickHandler}
+                  className='px-4'
+                >
+                  <Icon
+                    icon='material-symbols:delete-outline-rounded'
+                    width={24}
+                    height={24}
+                    className='justify-start text-sm'
+                  />
+                  Delete
+                </Button>
+
+                {type !== 'edit' && (
+                  <Button
+                    type='button'
+                    color='warning'
+                    href={`/master-data/fcr/detail/edit/?fcrId=${initialValues?.id}`}
+                    className='px-4'
+                  >
+                    <Icon
+                      icon='material-symbols:edit-outline'
+                      width={24}
+                      height={24}
+                      className='justify-start text-sm'
+                    />
+                    Edit
+                  </Button>
+                )}
+              </div>
+            )}
+
+            {type !== 'detail' && (
+              <div
+                className={cn('flex flex-row justify-end gap-2', {
+                  'w-full': type === '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>
+
+          {fcrFormErrorMessage && (
+            <div role='alert' className='alert alert-error'>
+              <Icon
+                icon='material-symbols:error-outline'
+                width={24}
+                height={24}
+              />
+              <span>{fcrFormErrorMessage}</span>
+            </div>
+          )}
+        </form>
+      </section>
+
+      {type !== 'add' && (
+        <ConfirmationModal
+          ref={deleteModal.ref}
+          type='error'
+          text={`Apakah anda yakin ingin menghapus data FCR ini (${initialValues?.name})?`}
+          secondaryButton={{
+            text: 'Tidak',
+          }}
+          primaryButton={{
+            text: 'Ya',
+            color: 'error',
+            isLoading: isDeleteLoading,
+            onClick: confirmationModalDeleteClickHandler,
+          }}
+        />
+      )}
+    </>
+  );
+};
+
+export default FcrForm;

src/components/pages/master-data/nonstock/NonstocksTable.tsx

@@ -1,20 +1,31 @@
 'use client';
 
-import { ChangeEventHandler, useState } from 'react';
+import { ChangeEventHandler, useCallback, useEffect, useState } from 'react';
 import useSWR from 'swr';
-import { CellContext, ColumnDef } from '@tanstack/react-table';
+import {
+  CellContext,
+  ColumnDef,
+  ColumnSort,
+  SortingState,
+} from '@tanstack/react-table';
+import toast from 'react-hot-toast';
 
 import { Icon } from '@iconify/react';
 import Table from '@/components/Table';
-import TextInput from '@/components/input/TextInput';
+import DebouncedTextInput from '@/components/input/DebouncedTextInput';
 import Button from '@/components/Button';
-import Collapse from '@/components/Collapse';
+import { useModal } from '@/components/Modal';
+import ConfirmationModal from '@/components/modal/ConfirmationModal';
+import SelectInput, { OptionType } from '@/components/input/SelectInput';
+import RowDropdownOptions from '@/components/table/RowDropdownOptions';
+import RowCollapseOptions from '@/components/table/RowCollapseOptions';
 
-import { httpClientFetcher } from '@/services/http/client';
-import { Nonstock, NonstocksResponse } from '@/types/api/master-data/nonstock';
+import { Nonstock } from '@/types/api/master-data/nonstock';
+import { NonstockApi } from '@/services/api/master-data';
 import { cn } from '@/lib/helper';
-import { deleteNonstock } from '@/services/api/master-data/nonstock';
 import { isResponseSuccess } from '@/lib/api-helper';
+import { useTableFilter } from '@/services/hooks/useTableFilter';
+import { ROWS_OPTIONS } from '@/config/constant';
 
 const RowOptionsMenu = ({
   type = 'dropdown',
@@ -23,7 +34,7 @@ const RowOptionsMenu = ({
 }: {
   type: 'dropdown' | 'collapse';
   props: CellContext<Nonstock, unknown>;
-  deleteClickHandler: () => Promise<void>;
+  deleteClickHandler: () => void;
 }) => {
   return (
     <div
@@ -74,78 +85,74 @@ const RowOptionsMenu = ({
   );
 };
 
-const RowDropdownOptions = ({
-  props,
-  isLast2Rows,
-  deleteClickHandler,
-}: {
-  props: CellContext<Nonstock, unknown>;
-  isLast2Rows: boolean;
-  deleteClickHandler: () => Promise<void>;
-}) => {
-  return (
-    <div
-      className={cn('dropdown dropdown-left', {
-        'dropdown-start': !isLast2Rows,
-        'dropdown-end': isLast2Rows,
-      })}
-    >
-      <Button tabIndex={0}>
-        <Icon icon='material-symbols:more-vert' width={16} height={16} />
-      </Button>
-
-      <RowOptionsMenu
-        type='dropdown'
-        props={props}
-        deleteClickHandler={deleteClickHandler}
-      />
-    </div>
-  );
-};
-
-const RowCollapseOptions = ({
-  props,
-  deleteClickHandler,
-}: {
-  props: CellContext<Nonstock, unknown>;
-  deleteClickHandler: () => Promise<void>;
-}) => {
-  return (
-    <Collapse
-      title={
-        <Button>
-          <Icon icon='material-symbols:more-vert' width={16} height={16} />
-        </Button>
-      }
-      className='w-fit'
-      titleClassName='p-0! justify-self-end'
-    >
-      <RowOptionsMenu
-        type='collapse'
-        props={props}
-        deleteClickHandler={deleteClickHandler}
-      />
-    </Collapse>
-  );
-};
-
 const NonstocksTable = () => {
+  const {
+    state: tableFilterState,
+    updateFilter,
+    setPage,
+    setPageSize,
+    toQueryString: getTableFilterQueryString,
+  } = useTableFilter({
+    initial: { search: '', nameSort: '', locationSort: '', picSort: '' },
+    paramMap: {
+      page: 'page',
+      pageSize: 'limit',
+      nameSort: 'sort_name',
+      locationSort: 'sort_location',
+      picSort: ' sort_pic',
+    },
+  });
+
   const {
     data: nonstocks,
     isLoading,
     mutate: refreshNonstocks,
-  } = useSWR<NonstocksResponse>('/master-data/nonstocks', httpClientFetcher);
+  } = useSWR(
+    `${NonstockApi.basePath}${getTableFilterQueryString()}`,
+    NonstockApi.getAllFetcher
+  );
 
-  const [searchValue, setSearchValue] = useState('');
+  const deleteModal = useModal();
+
+  const [selectedNonstock, setSelectedNonstock] = useState<
+    Nonstock | undefined
+  >(undefined);
+  const [isDeleteLoading, setIsDeleteLoading] = useState(false);
+
+  const [sorting, setSorting] = useState<SortingState>([]);
 
   const nonstocksColumns: ColumnDef<Nonstock>[] = [
     {
       header: '#',
-      cell: (props) => props.row.index + 1,
+      cell: (props) =>
+        tableFilterState.pageSize * (tableFilterState.page - 1) +
+        props.row.index +
+        1,
     },
     {
-      header: 'Nama',
       accessorKey: 'name',
+      header: 'Nama',
+    },
+    {
+      accessorKey: 'uom',
+      header: 'UOM',
+      cell: (props) => props.row.original.uom.name,
+    },
+    {
+      accessorKey: 'suppliers',
+      header: 'Supplier',
+      cell: (props) => {
+        const supplierNames = props.row.original.suppliers.map(
+          (supplier) => supplier.name
+        );
+
+        return supplierNames.join(', ') || '-';
+      },
+    },
+    {
+      accessorKey: 'flags',
+      header: 'Flag',
+      cell: (props) => props.row.original.flags?.join(', ') || '-',
     },
     {
       header: 'Aksi',
@@ -157,33 +164,31 @@ const NonstocksTable = () => {
 
         const isLast2Rows = currentRowRelativeIndex > currentPageSize - 2;
 
-        const deleteClickHandler = async () => {
-          const confirmation = confirm(
-            'Apakah anda yakin untuk menghapus non stock ini?'
-          );
-
-          if (confirmation) {
-            await deleteNonstock(props.row.original.id);
-            refreshNonstocks();
-            alert('Nonstock berhasil dihapus!');
-          }
+        const deleteClickHandler = () => {
+          setSelectedNonstock(props.row.original);
+          deleteModal.openModal();
         };
 
         return (
           <>
             {currentPageSize > 2 && (
-              <RowDropdownOptions
-                props={props}
-                isLast2Rows={isLast2Rows}
-                deleteClickHandler={deleteClickHandler}
-              />
+              <RowDropdownOptions isLast2Rows={isLast2Rows}>
+                <RowOptionsMenu
+                  type='dropdown'
+                  props={props}
+                  deleteClickHandler={deleteClickHandler}
+                />
+              </RowDropdownOptions>
             )}
 
             {currentPageSize <= 2 && (
-              <RowCollapseOptions
-                props={props}
-                deleteClickHandler={deleteClickHandler}
-              />
+              <RowCollapseOptions>
+                <RowOptionsMenu
+                  type='dropdown'
+                  props={props}
+                  deleteClickHandler={deleteClickHandler}
+                />
+              </RowCollapseOptions>
             )}
           </>
         );
@@ -191,52 +196,133 @@ const NonstocksTable = () => {
     },
   ];
 
-  const searchChangeHandler: ChangeEventHandler<HTMLInputElement> = (e) => {
-    setSearchValue(e.target.value);
+  const confirmationModalDeleteClickHandler = async () => {
+    setIsDeleteLoading(true);
+
+    await NonstockApi.delete(selectedNonstock?.id as number);
+    refreshNonstocks();
+
+    deleteModal.closeModal();
+    toast.success('Successfully delete Nonstock!');
+    setIsDeleteLoading(false);
   };
 
+  const searchChangeHandler: ChangeEventHandler<HTMLInputElement> = (e) => {
+    updateFilter('search', e.target.value);
+  };
+
+  const pageSizeChangeHandler = (val: OptionType | OptionType[] | null) => {
+    const newVal = val as OptionType;
+
+    setPageSize(newVal.value as number);
+  };
+
+  const updateSortingFilter = useCallback(
+    (
+      sortName: Exclude<keyof typeof tableFilterState, 'page' | 'pageSize'>,
+      sortFilter: ColumnSort | undefined
+    ) => {
+      if (!sortFilter) {
+        updateFilter(sortName, '');
+      } else {
+        updateFilter(sortName, sortFilter.desc ? 'desc' : 'asc');
+      }
+    },
+    [updateFilter]
+  );
+
+  // track sorting
+  useEffect(() => {
+    const nameSortFilter = sorting.find((sortItem) => sortItem.id === 'name');
+    const locationSortFilter = sorting.find(
+      (sortItem) => sortItem.id === 'location'
+    );
+    const picSortFilter = sorting.find((sortItem) => sortItem.id === 'pic');
+
+    updateSortingFilter('nameSort', nameSortFilter);
+    updateSortingFilter('locationSort', locationSortFilter);
+    updateSortingFilter('picSort', picSortFilter);
+  }, [sorting]);
+
   return (
-    <div className='w-full p-4'>
-      <div className='w-full mb-4 flex flex-col sm:flex-row justify-between items-end sm:items-center gap-2'>
-        <div className='flex flex-row'>
-          <Button href='/master-data/nonstock/add' color='primary'>
-            <Icon icon='ic:round-plus' width={24} height={24} />
-            Tambah Nonstock
-          </Button>
+    <>
+      <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/nonstock/add' color='primary'>
+                <Icon icon='ic:round-plus' width={24} height={24} />
+                Tambah Nonstock
+              </Button>
+            </div>
+
+            <DebouncedTextInput
+              name='search'
+              placeholder='Cari Nonstock'
+              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>
 
-        <TextInput
-          name='search'
-          placeholder='Cari Non Stock'
-          value={searchValue}
-          onChange={searchChangeHandler}
-          className={{ wrapper: 'sm:max-w-3xs' }}
+        <Table<Nonstock>
+          data={isResponseSuccess(nonstocks) ? nonstocks?.data : []}
+          columns={nonstocksColumns}
+          pageSize={tableFilterState.pageSize}
+          page={isResponseSuccess(nonstocks) ? nonstocks?.meta?.page : 0}
+          totalItems={
+            isResponseSuccess(nonstocks) ? nonstocks?.meta?.total_results : 0
+          }
+          onPageChange={setPage}
+          isLoading={isLoading}
+          sorting={sorting}
+          setSorting={setSorting}
+          className={{
+            containerClassName: cn({
+              'mb-20':
+                isResponseSuccess(nonstocks) && nonstocks?.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>
 
-      <Table<Nonstock>
-        data={isResponseSuccess(nonstocks) ? nonstocks?.data : []}
-        columns={nonstocksColumns}
-        pageSize={10}
-        fuzzySearchValue={searchValue}
-        onFuzzySearchValueChange={setSearchValue}
-        isLoading={isLoading}
-        className={{
-          containerClassName: cn({
-            'mb-20':
-              isResponseSuccess(nonstocks) && nonstocks?.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',
+      <ConfirmationModal
+        ref={deleteModal.ref}
+        type='error'
+        text={`Apakah anda yakin ingin menghapus data Nonstock ini (${selectedNonstock?.name})?`}
+        secondaryButton={{
+          text: 'Tidak',
+        }}
+        primaryButton={{
+          text: 'Ya',
+          color: 'error',
+          isLoading: isDeleteLoading,
+          onClick: confirmationModalDeleteClickHandler,
         }}
       />
-    </div>
+    </>
   );
 };
 

src/components/pages/master-data/nonstock/form/NonstockForm.schema.ts

@@ -2,6 +2,22 @@ import * as Yup from 'yup';
 
 export const NonstockFormSchema = Yup.object({
   name: Yup.string().required('Nama wajib diisi!'),
+
+  uomId: Yup.number().min(1, 'UOM wajib diisi!').required('UOM wajib diisi!'),
+  uom: Yup.object({
+    value: Yup.number().min(1).required(),
+    label: Yup.string().required(),
+  }).nullable(),
+
+  supplierIds: Yup.array().of(Yup.number().min(0, 'Supplier wajib diisi!')),
+  suppliers: Yup.array().of(
+    Yup.object({
+      value: Yup.number().min(0).required(),
+      label: Yup.string().required(),
+    })
+  ),
+
+  flags: Yup.array().of(Yup.string()).notRequired(),
 });
 
 export const UpdateNonstockFormSchema = NonstockFormSchema;

src/components/pages/master-data/nonstock/form/NonstockForm.tsx

@@ -3,26 +3,31 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useRouter } from 'next/navigation';
 import { useFormik } from 'formik';
+import { toast } from 'react-hot-toast';
+import useSWR from 'swr';
 
 import { Icon } from '@iconify/react';
 import Button from '@/components/Button';
 import TextInput from '@/components/input/TextInput';
+import SelectInput, { OptionType } from '@/components/input/SelectInput';
+import { useModal } from '@/components/Modal';
+import ConfirmationModal from '@/components/modal/ConfirmationModal';
 
 import {
   NonstockFormSchema,
   NonstockFormValues,
   UpdateNonstockFormSchema,
 } from '@/components/pages/master-data/nonstock/form/NonstockForm.schema';
-import { isResponseError } from '@/lib/api-helper';
+import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
 import {
-  CreateNonstockPayload,
   Nonstock,
+  CreateNonstockPayload,
   UpdateNonstockPayload,
 } from '@/types/api/master-data/nonstock';
-import {
-  createNonstock,
-  updateNonstock,
-} from '@/services/api/master-data/nonstock';
+import { NonstockApi, SupplierApi, UomApi } from '@/services/api/master-data';
+import { cn } from '@/lib/helper';
+import { flags } from '@/types/api/api-general';
+import { SUPPLIER_FLAG_OPTIONS } from '@/config/constant';
 
 interface NonstockFormProps {
   type?: 'add' | 'edit' | 'detail';
@@ -31,19 +36,21 @@ interface NonstockFormProps {
 
 const NonstockForm = ({ type = 'add', initialValues }: NonstockFormProps) => {
   const router = useRouter();
+  const deleteModal = useModal();
 
   const [nonstockFormErrorMessage, setNonstockFormErrorMessage] = useState('');
+  const [isDeleteLoading, setIsDeleteLoading] = useState(false);
 
   const createNonstockHandler = useCallback(
     async (payload: CreateNonstockPayload) => {
-      const createNonstockRes = await createNonstock(payload);
+      const createNonstockRes = await NonstockApi.create(payload);
 
       if (isResponseError(createNonstockRes)) {
         setNonstockFormErrorMessage(createNonstockRes.message);
         return;
       }
 
-      alert(createNonstockRes?.message);
+      toast.success(createNonstockRes?.message as string);
       router.push('/master-data/nonstock');
     },
     [router]
@@ -51,14 +58,14 @@ const NonstockForm = ({ type = 'add', initialValues }: NonstockFormProps) => {
 
   const updateNonstockHandler = useCallback(
     async (nonstockId: number, payload: UpdateNonstockPayload) => {
-      const updateNonstockRes = await updateNonstock(nonstockId, payload);
+      const updateNonstockRes = await NonstockApi.update(nonstockId, payload);
 
       if (updateNonstockRes?.status === 'error') {
         setNonstockFormErrorMessage(updateNonstockRes.message);
         return;
       }
 
-      alert(updateNonstockRes?.message);
+      toast.success(updateNonstockRes?.message as string);
       router.refresh();
       router.push('/master-data/nonstock');
     },
@@ -68,6 +75,22 @@ const NonstockForm = ({ type = 'add', initialValues }: NonstockFormProps) => {
   const formikInitialValues = useMemo<NonstockFormValues>(() => {
     return {
       name: initialValues?.name ?? '',
+      uomId: initialValues?.uom_id ?? 0,
+      uom: initialValues?.uom
+        ? {
+            value: initialValues?.uom.id,
+            label: initialValues?.uom.name,
+          }
+        : null,
+      supplierIds:
+        initialValues?.suppliers.map((supplier) => supplier.id) ?? [],
+      suppliers:
+        initialValues?.suppliers.map((supplier) => ({
+          value: supplier.id,
+          label: supplier.name,
+        })) ?? [],
+
+      flags: initialValues?.flags ?? [],
     };
   }, [initialValues]);
 
@@ -80,6 +103,9 @@ const NonstockForm = ({ type = 'add', initialValues }: NonstockFormProps) => {
 
       const nonstockPayload: CreateNonstockPayload = {
         name: values.name,
+        uom_id: values.uomId,
+        supplier_ids: values.supplierIds as number[],
+        flags: values.flags as flags[],
       };
 
       switch (type) {
@@ -97,81 +123,268 @@ const NonstockForm = ({ type = 'add', initialValues }: NonstockFormProps) => {
     },
   });
 
+  const { setValues: formikSetValues } = formik;
+
+  // UOM
+  const [uomSelectInputValue, setUomSelectInputValue] = useState('');
+
+  const uomsUrl = `${UomApi.basePath}?${new URLSearchParams({
+    search: uomSelectInputValue ?? '',
+  }).toString()}`;
+
+  const { data: uoms, isLoading: isLoadingUoms } = useSWR(
+    uomsUrl,
+    UomApi.getAllFetcher
+  );
+
+  const uomOptions = isResponseSuccess(uoms)
+    ? uoms?.data.map((uom) => ({
+        value: uom.id,
+        label: uom.name,
+      }))
+    : [];
+
+  const uomChangeHandler = (val: OptionType | OptionType[] | null) => {
+    formik.setFieldTouched('uom', true);
+    formik.setFieldValue('uom', val);
+
+    formik.setFieldTouched('uomId', true);
+    formik.setFieldValue('uomId', (val as OptionType)?.value);
+  };
+
+  // supplier
+  const [supplierSelectInputValue, setSupplierSelectInputValue] = useState('');
+
+  const suppliersUrl = `${SupplierApi.basePath}?${new URLSearchParams({
+    search: supplierSelectInputValue ?? '',
+  }).toString()}`;
+
+  const { data: suppliers, isLoading: isLoadingSuppliers } = useSWR(
+    suppliersUrl,
+    SupplierApi.getAllFetcher
+  );
+
+  const supplierOptions = isResponseSuccess(suppliers)
+    ? suppliers?.data
+        .filter((sup) => sup.category === 'BOP')
+        .map((supplier) => ({
+          value: supplier.id,
+          label: supplier.name,
+        }))
+    : [];
+
+  const supplierChangeHandler = (val: OptionType | OptionType[] | null) => {
+    formik.setFieldTouched('suppliers', true);
+    formik.setFieldValue('suppliers', val);
+
+    const supplierIds = (val as OptionType[]).map(
+      (supplier) => supplier.value as number
+    );
+
+    formik.setFieldTouched('supplierIds', true);
+    formik.setFieldValue('supplierIds', supplierIds);
+  };
+
+  const deleteNonstockClickHandler = () => {
+    deleteModal.openModal();
+  };
+
+  const confirmationModalDeleteClickHandler = async () => {
+    setIsDeleteLoading(true);
+
+    await NonstockApi.delete(initialValues?.id as number);
+
+    deleteModal.closeModal();
+    toast.success('Successfully delete Nonstock!');
+    setIsDeleteLoading(false);
+    router.push('/master-data/nonstock');
+  };
+
+  const flagsChangeHandler = (val: OptionType | OptionType[] | null) => {
+    const formattedFlags = (val as OptionType[]).map(
+      (flag) => flag.value as string
+    );
+
+    formik.setFieldValue('flags', formattedFlags);
+  };
+
   useEffect(() => {
-    formik.setValues(formikInitialValues);
-  }, [formikInitialValues]);
+    formikSetValues(formikInitialValues);
+  }, [formikSetValues, formikInitialValues]);
 
   return (
-    <section className='w-full max-w-xl'>
-      <header className='flex flex-col gap-4'>
-        <Button
-          href='/master-data/nonstock'
-          variant='link'
-          className='w-fit p-0 text-primary'
+    <>
+      <section className='w-full max-w-xl'>
+        <header className='flex flex-col gap-4'>
+          <Button
+            href='/master-data/nonstock'
+            variant='link'
+            className='w-fit p-0 text-primary'
+          >
+            <Icon icon='uil:arrow-left' width={24} height={24} />
+            Kembali
+          </Button>
+
+          <h1 className='text-2xl font-bold text-center'>
+            {type === 'add' && 'Tambah Nonstock'}
+            {type === 'edit' && 'Edit Nonstock'}
+            {type === 'detail' && 'Detail Nonstock'}
+          </h1>
+        </header>
+
+        <form
+          onSubmit={formik.handleSubmit}
+          onReset={formik.handleReset}
+          className='w-full mt-8 flex flex-col gap-6'
         >
-          <Icon icon='uil:arrow-left' width={24} height={24} />
-          Kembali
-        </Button>
+          <div className='flex flex-col gap-4'>
+            <TextInput
+              required
+              label='Nama'
+              name='name'
+              placeholder='Masukkan nama lokasi'
+              value={formik.values.name}
+              onChange={formik.handleChange}
+              onBlur={formik.handleBlur}
+              isError={formik.touched.name && Boolean(formik.errors.name)}
+              errorMessage={formik.errors.name}
+              readOnly={type === 'detail'}
+            />
 
-        <h1 className='text-2xl font-bold text-center'>
-          {type === 'add' && 'Tambah Non Stock'}
-          {type === 'edit' && 'Edit Non Stock'}
-          {type === 'detail' && 'Detail Non Stock'}
-        </h1>
-      </header>
+            <SelectInput
+              required
+              label='UOM'
+              value={formik.values.uom ?? undefined}
+              onChange={uomChangeHandler}
+              options={uomOptions}
+              onInputChange={setUomSelectInputValue}
+              isLoading={isLoadingUoms}
+              isError={formik.touched.uomId && Boolean(formik.errors.uomId)}
+              errorMessage={formik.errors.uomId as string}
+              isDisabled={type === 'detail'}
+              isClearable
+            />
 
-      <form
-        onSubmit={formik.handleSubmit}
-        onReset={formik.handleReset}
-        className='w-full mt-8 flex flex-col gap-6'
-      >
-        <div className='flex flex-col gap-4'>
-          <TextInput
-            required
-            label='Nama'
-            name='name'
-            placeholder='Masukkan nama nonstock'
-            value={formik.values.name}
-            onChange={formik.handleChange}
-            onBlur={formik.handleBlur}
-            isError={formik.touched.name && Boolean(formik.errors.name)}
-            errorMessage={formik.errors.name}
-            readOnly={type === 'detail'}
-          />
-        </div>
+            <SelectInput
+              label='Supplier'
+              isMulti
+              value={formik.values.suppliers}
+              onChange={supplierChangeHandler}
+              options={supplierOptions ?? []}
+              onInputChange={setSupplierSelectInputValue}
+              isLoading={isLoadingSuppliers}
+              isError={
+                formik.touched.suppliers && Boolean(formik.errors.suppliers)
+              }
+              errorMessage={formik.errors.suppliers as string}
+              isDisabled={type === 'detail'}
+            />
 
-        {type !== 'detail' && (
-          <>
-            <div className='flex flex-row justify-end gap-2'>
-              <Button type='reset' color='error' className='px-4'>
-                Reset
-              </Button>
+            <SelectInput
+              label='Flags'
+              isMulti
+              value={SUPPLIER_FLAG_OPTIONS.filter((opt) =>
+                formik.values.flags?.includes(opt.value)
+              )}
+              onChange={flagsChangeHandler}
+              options={SUPPLIER_FLAG_OPTIONS}
+              isError={formik.touched.flags && Boolean(formik.errors.flags)}
+              errorMessage={formik.errors.flags as string}
+              isDisabled={type === 'detail'}
+              isClearable
+            />
+          </div>
 
-              <Button
-                type='submit'
-                color='primary'
-                isLoading={formik.isSubmitting}
-                disabled={!formik.isValid || formik.isSubmitting}
-                className='px-4'
-              >
-                Submit
-              </Button>
-            </div>
+          <div className='flex flex-row justify-between gap-2 flex-wrap'>
+            {type !== 'add' && (
+              <div className='flex flex-row justify-start gap-2'>
+                <Button
+                  type='button'
+                  color='error'
+                  onClick={deleteNonstockClickHandler}
+                  className='px-4'
+                >
+                  <Icon
+                    icon='material-symbols:delete-outline-rounded'
+                    width={24}
+                    height={24}
+                    className='justify-start text-sm'
+                  />
+                  Delete
+                </Button>
 
-            {nonstockFormErrorMessage && (
-              <div role='alert' className='alert alert-error'>
-                <Icon
-                  icon='material-symbols:error-outline'
-                  width={24}
-                  height={24}
-                />
-                <span>{nonstockFormErrorMessage}</span>
+                {type !== 'edit' && (
+                  <Button
+                    type='button'
+                    color='warning'
+                    href={`/master-data/nonstock/detail/edit/?nonstockId=${initialValues?.id}`}
+                    className='px-4'
+                  >
+                    <Icon
+                      icon='material-symbols:edit-outline'
+                      width={24}
+                      height={24}
+                      className='justify-start text-sm'
+                    />
+                    Edit
+                  </Button>
+                )}
               </div>
             )}
-          </>
-        )}
-      </form>
-    </section>
+
+            {type !== 'detail' && (
+              <div
+                className={cn('flex flex-row justify-end gap-2', {
+                  'w-full': type === '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>
+
+          {nonstockFormErrorMessage && (
+            <div role='alert' className='alert alert-error'>
+              <Icon
+                icon='material-symbols:error-outline'
+                width={24}
+                height={24}
+              />
+              <span>{nonstockFormErrorMessage}</span>
+            </div>
+          )}
+        </form>
+      </section>
+
+      {type !== 'add' && (
+        <ConfirmationModal
+          ref={deleteModal.ref}
+          type='error'
+          text={`Apakah anda yakin ingin menghapus data Nonstock ini (${initialValues?.name})?`}
+          secondaryButton={{
+            text: 'Tidak',
+          }}
+          primaryButton={{
+            text: 'Ya',
+            color: 'error',
+            isLoading: isDeleteLoading,
+            onClick: confirmationModalDeleteClickHandler,
+          }}
+        />
+      )}
+    </>
   );
 };
 

src/config/constant.ts

@@ -1,145 +1,155 @@
-export const MAIN_DRAWER_LINKS = [
-    {
-        title: 'Dashboard',
-        link: '/dashboard',
-        icon: 'gg:chart',
-    },
+type MAIN_DRAWER_MENU = {
+  title: string;
+  link: string;
+  icon: string;
+  submenu?: MAIN_DRAWER_MENU[];
+};
 
-    {
-        title: 'Persediaan',
-        link: '/inventory',
-        icon: 'mdi:warehouse',
-        submenu: [
-            {
-                title: 'Product',
-                link: '/inventory/product',
-                icon: 'mdi:package-variant-closed',
-            },
-            {
-                title: 'Penyesuaian Stok',
-                link: '/inventory/adjustment',
-                icon: 'mdi:database-edit',
-            },
-            {
-                title: 'Transfer Stok',
-                link: '/inventory/movement',
-                icon: 'mdi:swap-horizontal',
-            },
-        ],
-    },
+export const MAIN_DRAWER_LINKS: MAIN_DRAWER_MENU[] = [
+  {
+    title: 'Dashboard',
+    link: '/dashboard',
+    icon: 'gg:chart',
+  },
 
-    {
-        title: 'Master Data',
-        link: '/master-data',
-        icon: 'majesticons:data-line',
-        submenu: [
-            {
-                title: 'Product',
-                link: '/master-data/product',
-                icon: 'fluent-mdl2:product-variant',
-            },
-            {
-                title: 'Product Category',
-                link: '/master-data/product-category',
-                icon: 'carbon:categories',
-            },
-            {
-                title: 'Bank',
-                link: '/master-data/bank',
-                icon: 'mdi:bank-outline',
-            },
-            {
-                title: 'Area',
-                link: '/master-data/area',
-                icon: 'majesticons:map-marker-area-line',
-            },
-            {
-                title: 'Location',
-                link: '/master-data/location',
-                icon: 'mingcute:location-line',
-            },
-            {
-                title: 'Kandang',
-                link: '/master-data/kandang',
-                icon: 'mdi:farm-home-outline',
-            },
-            {
-                title: 'Warehouse',
-                link: '/master-data/warehouse',
-                icon: 'hugeicons:warehouse',
-            },
-            {
-                title: 'Customer',
-                link: '/master-data/customer',
-                icon: 'ix:customer',
-            },
-            {
-                title: 'UOM',
-                link: '/master-data/uom',
-                icon: 'lsicon:measure-outline',
-            },
-            {
-                title: 'Non-Stock',
-                link: '/master-data/nonstock',
-                icon: 'fluent:box-32-regular',
-            },
-            {
-                title: 'FCR',
-                link: '/master-data/FCR',
-                icon: 'fluent:food-chicken-leg-16-regular',
-            },
-            {
-                title: 'Supplier',
-                link: '/master-data/supplier',
-                icon: 'material-symbols:add-business-outline-rounded',
-            },
-        ],
-    },
+  {
+    title: 'Persediaan',
+    link: '/inventory',
+    icon: 'mdi:warehouse',
+    submenu: [
+      {
+        title: 'Product',
+        link: '/inventory/product',
+        icon: 'mdi:package-variant-closed',
+      },
+      {
+        title: 'Penyesuaian Stok',
+        link: '/inventory/adjustment',
+        icon: 'mdi:database-edit',
+      },
+      {
+        title: 'Transfer Stok',
+        link: '/inventory/movement',
+        icon: 'mdi:swap-horizontal',
+      },
+    ],
+  },
+
+  {
+    title: 'Master Data',
+    link: '/master-data',
+    icon: 'majesticons:data-line',
+    submenu: [
+      {
+        title: 'Product',
+        link: '/master-data/product',
+        icon: 'fluent-mdl2:product-variant',
+      },
+      {
+        title: 'Product Category',
+        link: '/master-data/product-category',
+        icon: 'carbon:categories',
+      },
+      {
+        title: 'Bank',
+        link: '/master-data/bank',
+        icon: 'mdi:bank-outline',
+      },
+      {
+        title: 'Area',
+        link: '/master-data/area',
+        icon: 'majesticons:map-marker-area-line',
+      },
+      {
+        title: 'Location',
+        link: '/master-data/location',
+        icon: 'mingcute:location-line',
+      },
+      {
+        title: 'Kandang',
+        link: '/master-data/kandang',
+        icon: 'mdi:farm-home-outline',
+      },
+      {
+        title: 'Warehouse',
+        link: '/master-data/warehouse',
+        icon: 'hugeicons:warehouse',
+      },
+      {
+        title: 'Customer',
+        link: '/master-data/customer',
+        icon: 'ix:customer',
+      },
+      {
+        title: 'UOM',
+        link: '/master-data/uom',
+        icon: 'lsicon:measure-outline',
+      },
+      {
+        title: 'Non-Stock',
+        link: '/master-data/nonstock',
+        icon: 'fluent:box-32-regular',
+      },
+      {
+        title: 'FCR',
+        link: '/master-data/fcr',
+        icon: 'fluent:food-chicken-leg-16-regular',
+      },
+      {
+        title: 'Supplier',
+        link: '/master-data/supplier',
+        icon: 'material-symbols:add-business-outline-rounded',
+      },
+    ],
+  },
 ] as const;
 
 export const ROWS_OPTIONS = [
-    {
-        label: '10',
-        value: 10,
-    },
-    {
-        label: '20',
-        value: 20,
-    },
-    {
-        label: '50',
-        value: 50,
-    },
-    {
-        label: '100',
-        value: 100,
-    },
+  {
+    label: '10',
+    value: 10,
+  },
+  {
+    label: '20',
+    value: 20,
+  },
+  {
+    label: '50',
+    value: 50,
+  },
+  {
+    label: '100',
+    value: 100,
+  },
 ];
 
 export const WAREHOUSE_TYPE_OPTIONS = [
-    {
-        label: 'AREA',
-        value: 'AREA',
-    },
-    {
-        label: 'LOKASI',
-        value: 'LOKASI',
-    },
-    {
-        label: 'KANDANG',
-        value: 'KANDANG',
-    },
+  {
+    label: 'AREA',
+    value: 'AREA',
+  },
+  {
+    label: 'LOKASI',
+    value: 'LOKASI',
+  },
+  {
+    label: 'KANDANG',
+    value: 'KANDANG',
+  },
 ];
 
 export const PRODUCT_FLAG_OPTIONS = [
-    {label: 'DOC', value: 'DOC'},
-    {label: 'PAKAN', value: 'PAKAN'},
-    {label: 'PRE-STARTER', value: 'PRE-STARTER'},
-    {label: 'STARTER', value: 'STARTER'},
-    {label: 'FINISHER', value: 'FINISHER'},
-    {label: 'OVK', value: 'OVK'},
-    {label: 'OBAT', value: 'OBAT'},
-    {label: 'VITAMIN', value: 'VITAMIN'},
-    {label: 'KIMIA', value: 'KIMIA'},
+  { label: 'DOC', value: 'DOC' },
+  { label: 'PAKAN', value: 'PAKAN' },
+  { label: 'PRE-STARTER', value: 'PRE-STARTER' },
+  { label: 'STARTER', value: 'STARTER' },
+  { label: 'FINISHER', value: 'FINISHER' },
+  { label: 'OVK', value: 'OVK' },
+  { label: 'OBAT', value: 'OBAT' },
+  { label: 'VITAMIN', value: 'VITAMIN' },
+  { label: 'KIMIA', value: 'KIMIA' },
 ];
 
+export const SUPPLIER_FLAG_OPTIONS = [
+  { label: 'EKSPEDISI', value: 'EKSPEDISI' },
+];

src/services/api/master-data.ts

@@ -39,6 +39,21 @@ import {
   Supplier,
   UpdateSupplierPayload,
 } from '@/types/api/master-data/supplier';
+import {
+  CreateNonstockPayload,
+  Nonstock,
+  UpdateNonstockPayload,
+} from '@/types/api/master-data/nonstock';
+import {
+  Bank,
+  CreateBankPayload,
+  UpdateBankPayload,
+} from '@/types/api/master-data/bank';
+import {
+  CreateFcrPayload,
+  Fcr,
+  UpdateFcrPayload,
+} from '@/types/api/master-data/fcr';
 
 export const UomApi = new BaseApiService<
   Uom,
@@ -86,4 +101,22 @@ export const SupplierApi = new BaseApiService<
   Supplier,
   CreateSupplierPayload,
   UpdateSupplierPayload
->('/master-data/suppliers');
+>('/master-data/suppliers');
+
+export const NonstockApi = new BaseApiService<
+  Nonstock,
+  CreateNonstockPayload,
+  UpdateNonstockPayload
+>('/master-data/nonstocks');
+
+export const BankApi = new BaseApiService<
+  Bank,
+  CreateBankPayload,
+  UpdateBankPayload
+>('/master-data/banks');
+
+export const FcrApi = new BaseApiService<
+  Fcr,
+  CreateFcrPayload,
+  UpdateFcrPayload
+>('/master-data/fcrs');

src/services/api/master-data/nonstock.ts

@@ -1,87 +0,0 @@
-import axios from 'axios';
-import { httpClient } from '@/services/http/client';
-
-import {
-  CreateNonstockPayload,
-  DeleteNonstockResponse,
-  NonstockResponse,
-  UpdateNonstockPayload,
-} from '@/types/api/master-data/nonstock';
-
-export const getNonstock = async (nonstockId: number) => {
-  try {
-    const getNonstockRes = await httpClient<NonstockResponse>(
-      `/master-data/nonstocks/${nonstockId}`
-    );
-
-    return getNonstockRes;
-  } catch (error: unknown) {
-    if (axios.isAxiosError<NonstockResponse>(error)) {
-      return error.response?.data;
-    }
-
-    return undefined;
-  }
-};
-
-export const createNonstock = async (payload: CreateNonstockPayload) => {
-  try {
-    const createNonstockRes = await httpClient<NonstockResponse>(
-      '/master-data/nonstocks',
-      {
-        method: 'POST',
-        body: payload,
-      }
-    );
-
-    return createNonstockRes;
-  } catch (error: unknown) {
-    if (axios.isAxiosError<NonstockResponse>(error)) {
-      return error.response?.data;
-    }
-
-    return undefined;
-  }
-};
-
-export const updateNonstock = async (
-  nonstockId: number,
-  payload: UpdateNonstockPayload
-) => {
-  try {
-    const updateNonstockRes = await httpClient<NonstockResponse>(
-      `/master-data/nonstocks/${nonstockId}`,
-      {
-        method: 'PATCH',
-        body: payload,
-      }
-    );
-
-    return updateNonstockRes;
-  } catch (error: unknown) {
-    if (axios.isAxiosError<NonstockResponse>(error)) {
-      return error.response?.data;
-    }
-
-    return undefined;
-  }
-};
-
-export const deleteNonstock = async (nonstockId: number) => {
-  try {
-    const deleteNonstockRes = await httpClient<DeleteNonstockResponse>(
-      `/master-data/nonstocks/${nonstockId}`,
-      {
-        method: 'DELETE',
-      }
-    );
-
-    return deleteNonstockRes;
-  } catch (error) {
-    if (axios.isAxiosError<DeleteNonstockResponse>(error)) {
-      return error.response?.data;
-    }
-
-    return undefined;
-  }
-};

src/types/api/api-general.d.ts

@@ -53,3 +53,16 @@ export type BaseMetadata = {
 
 export type Override<BaseType, Overrides> = Omit<BaseType, keyof Overrides> &
   Overrides;
+
+export type flags =
+  | 'PAKAN'
+  | 'OBAT'
+  | 'VITAMIN'
+  | 'KIMIA'
+  | 'EKSPEDISI'
+  | 'IS_ACTIVE'
+  | 'DOC'
+  | 'PRE-STARTER'
+  | 'STARTER'
+  | 'FINISHER'
+  | 'OVK';

src/types/api/master-data/bank.d.ts

@@ -0,0 +1,20 @@
+import { BaseMetadata } from '@/types/api/api-general';
+
+export type BaseBank = {
+  id: number;
+  name: string;
+  alias: string;
+  owner?: string;
+  account_number: string;
+};
+
+export type Bank = BaseMetadata & BaseBank;
+
+export type CreateBankPayload = {
+  name: string;
+  alias: string;
+  account_number: string;
+  owner?: string;
+};
+
+export type UpdateBankPayload = CreateBankPayload;

src/types/api/master-data/fcr.d.ts

@@ -0,0 +1,30 @@
+import { BaseMetadata } from '@/types/api/api-general';
+
+export type BaseFcr = {
+  id: number;
+  name: string;
+};
+
+export type FcrStandard = {
+  id: number;
+  weight: number;
+  fcr_number: number;
+  mortality: number;
+};
+
+export type Fcr = BaseMetadata & BaseFcr;
+
+export type FcrWithStandards = Fcr & {
+  fcr_standards: FcrStandard[];
+};
+
+export type CreateFcrPayload = {
+  name: string;
+  fcr_standards: {
+    weight: number;
+    fcr_number: number;
+    mortality: number;
+  }[];
+};
+
+export type UpdateFcrPayload = CreateFcrPayload;

src/types/api/master-data/nonstock.d.ts

@@ -1,18 +1,23 @@
-import { BaseApiResponse } from '@/types/api/api-general';
+import { BaseApiResponse, BaseMetadata, flags } from '@/types/api/api-general';
+import { BaseUom } from '@/types/api/master-data/uom';
+import { BaseSupplier } from '@/types/api/master-data/supplier';
 
-export type Nonstock = {
+export type BaseNonstock = {
   id: number;
   name: string;
+  uom_id: number;
+  uom: BaseUom;
+  suppliers: BaseSupplier[];
+  flags: flags[];
 };
 
+export type Nonstock = BaseMetadata & BaseNonstock;
+
 export type CreateNonstockPayload = {
   name: string;
+  uom_id: number;
+  supplier_ids: number[];
+  flags: flags[];
 };
 
 export type UpdateNonstockPayload = CreateNonstockPayload;
-
-export type NonstockResponse = BaseApiResponse<Nonstock>;
-
-export type NonstocksResponse = BaseApiResponse<Nonstock[]>;
-
-export type DeleteNonstockResponse = BaseApiResponse;