Merge branch 'feat/FE/US-33/TASK-40-slicing-ui-for-master-data-forms' of gitlab.com:mbugroup/lti-web-client into feat/FE/US-35/stock-transfer

.gitignore

@@ -40,5 +40,8 @@ yarn-error.log*
 *.tsbuildinfo
 next-env.d.ts
 
+# prettier
+.prettierrc
+
 # idea
 .idea

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

@@ -0,0 +1,11 @@
+import CustomerForm from "@/components/pages/master-data/customer/form/CustomerForm";
+
+const AddCustomer = () => {
+  return (
+    <section className="w-full p-4 flex flex-row justify-center">
+      <CustomerForm/>
+    </section>
+  );
+}
+
+export default AddCustomer;

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

@@ -0,0 +1,47 @@
+'use client';
+
+import { useRouter, useSearchParams } from 'next/navigation';
+import useSWR from 'swr';
+import { CustomerApi } from '@/services/api/master-data';
+import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
+import CustomerForm from '@/components/pages/master-data/customer/form/CustomerForm';
+
+const CustomerEdit = () => {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+
+  const costumerId = searchParams.get('customerId');
+
+  const { data: costumer, isLoading: isLoadingCostumer } = useSWR(
+    costumerId,
+    (id: number) => CustomerApi.getSingle(id)
+  );
+
+  if (!costumerId) {
+    router.back();
+
+    return (
+      <div className='w-full flex flex-row justify-center items-center p-4'>
+        <span className='loading loading-spinner loading-xl' />
+      </div>
+    );
+  }
+
+  if (!isLoadingCostumer && (!costumer || isResponseError(costumer))) {
+    router.replace('/404');
+    return;
+  }
+
+  return (
+    <div className='w-full p-4 flex flex-row justify-center'>
+      {isLoadingCostumer && (
+        <span className='loading loading-spinner loading-xl' />
+      )}
+      {!isLoadingCostumer && isResponseSuccess(costumer) && (
+        <CustomerForm formType='edit' initialValues={costumer.data} />
+      )}
+    </div>
+  );
+};
+
+export default CustomerEdit;

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

@@ -0,0 +1,45 @@
+'use client'
+
+import { useRouter, useSearchParams } from "next/navigation";
+import useSWR from "swr";
+import { CustomerApi } from '@/services/api/master-data';
+import { isResponseError, isResponseSuccess } from "@/lib/api-helper";
+import CustomerForm from "@/components/pages/master-data/customer/form/CustomerForm";
+
+const CustomerDetail = () => {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+
+  const costumerId = searchParams.get("customerId");
+
+  const { data: costumer, isLoading: isLoadingCostumer } = useSWR(
+    costumerId,
+    (id: number) => CustomerApi.getSingle(id)
+  );
+
+  if(!costumerId){
+    router.back();
+
+    return (
+      <div className="w-full flex flex-row justify-center items-center p-4">
+        <span className="loading loading-spinner loading-xl" />
+      </div>
+    );
+  }
+
+  if(!isLoadingCostumer && (!costumer || isResponseError(costumer))){
+    router.replace("/404");
+    return;
+  }
+
+  return (
+    <div className="w-full p-4 flex flex-row justify-center">
+      {isLoadingCostumer && <span className="loading loading-spinner loading-xl" />}
+      {!isLoadingCostumer && isResponseSuccess(costumer) && (
+        <CustomerForm formType="detail" initialValues={costumer.data} />
+      )}
+    </div>
+  )
+};
+
+export default CustomerDetail;

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

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

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

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

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

@@ -0,0 +1,49 @@
+'use client';
+
+import SupplierForm from '@/components/pages/master-data/supplier/form/SupplierForm';
+import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
+import { SupplierApi } from '@/services/api/master-data';
+import { useSearchParams, useRouter } from 'next/navigation';
+import useSWR from 'swr';
+
+const SupplierEdit = () => {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+
+  // Get Query Params
+  const supplierId = searchParams.get('supplierId');
+
+  // Fetch Data
+  const { data: supplier, isLoading: isLoadingSupplier } = useSWR(
+    supplierId,
+    (id: number) => SupplierApi.getSingle(id)
+  );
+
+  if (!supplierId) {
+    router.back();
+
+    return (
+      <div className='w-full flex flex-row justify-center items-center p-4'>
+        <span className='loading loading-spinner loading-xl' />
+      </div>
+    );
+  }
+
+  if (!isLoadingSupplier && (!supplier || isResponseError(supplier))) {
+    router.replace('/404');
+    return;
+  }
+
+  return (
+    <div className='w-full p-4 flex flex-row justify-center'>
+      {isLoadingSupplier && (
+        <span className='loading loading-spinner loading-xl' />
+      )}
+      {!isLoadingSupplier && isResponseSuccess(supplier) && (
+        <SupplierForm formType='edit' initialValues={supplier.data} />
+      )}
+    </div>
+  );
+};
+
+export default SupplierEdit;

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

@@ -0,0 +1,49 @@
+'use client';
+
+import SupplierForm from '@/components/pages/master-data/supplier/form/SupplierForm';
+import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
+import { SupplierApi } from '@/services/api/master-data';
+import { useSearchParams, useRouter } from 'next/navigation';
+import useSWR from 'swr';
+
+const SupplierDetail = () => {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+
+  // Get Query Params
+  const supplierId = searchParams.get('supplierId');
+
+  // Fetch Data
+  const { data: supplier, isLoading: isLoadingSupplier } = useSWR(
+    supplierId,
+    (id: number) => SupplierApi.getSingle(id)
+  );
+
+  if (!supplierId) {
+    router.back();
+
+    return (
+      <div className='w-full flex flex-row justify-center items-center p-4'>
+        <span className='loading loading-spinner loading-xl' />
+      </div>
+    );
+  }
+
+  if (!isLoadingSupplier && (!supplier || isResponseError(supplier))) {
+    router.replace('/404');
+    return;
+  }
+
+  return (
+    <div className='w-full p-4 flex flex-row justify-center'>
+      {isLoadingSupplier && (
+        <span className='loading loading-spinner loading-xl' />
+      )}
+      {!isLoadingSupplier && isResponseSuccess(supplier) && (
+        <SupplierForm formType='detail' initialValues={supplier.data} />
+      )}
+    </div>
+  );
+};
+
+export default SupplierDetail;

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

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

src/components/MainDrawer.tsx

@@ -189,6 +189,8 @@ const MainDrawer = ({
     );
 
     const traverseMenuTitle = (menu: typeof activeMenu) => {
+      if (!menu) return;
+
       const hasSubmenu = menu?.submenu && menu?.submenu.length > 0;
 
       if (!title) {
@@ -197,7 +199,7 @@ const MainDrawer = ({
         title += ' - ' + menu?.title;
       }
 
-      if (!hasSubmenu) return;
+      if (!hasSubmenu || !menu.submenu) return;
 
       const activeSubmenu = menu.submenu?.find((item) =>
         isPathActive(pathname, item.link)

src/components/helper/RequireAuth.tsx

@@ -9,6 +9,145 @@ import { httpClientFetcher, SWRHttpKey } from '@/services/http/client';
 import { isResponseSuccess } from '@/lib/api-helper';
 import { GetMeResponse } from '@/types/api/api-general';
 
+// TODO: delete this later, DONT HARDCODE USER DATA
+const DUMMY_USER = {
+  id: 1,
+  email: 'admin@mbugroup.id',
+  npk: '0001',
+  name: 'Super Admin',
+  image: null,
+  created_at: '2025-09-30T03:24:20.899229Z',
+  updated_at: '2025-09-30T03:24:20.899229Z',
+  roles: [
+    {
+      id: 1,
+      key: 'mbu.super_admin',
+      name: 'MBU Administrator',
+      client: {
+        id: 1,
+        name: 'PT Mitra Berlian Unggas',
+        alias: 'MBU',
+      },
+      permissions: [
+        {
+          id: 1,
+          name: 'mbu:purchase:read',
+          action: 'read',
+          client: {
+            id: 1,
+            name: 'PT Mitra Berlian Unggas',
+            alias: 'MBU',
+          },
+        },
+        {
+          id: 2,
+          name: 'mbu:purchase:create',
+          action: 'create',
+          client: {
+            id: 1,
+            name: 'PT Mitra Berlian Unggas',
+            alias: 'MBU',
+          },
+        },
+        {
+          id: 3,
+          name: 'mbu:purchase:approve',
+          action: 'approve',
+          client: {
+            id: 1,
+            name: 'PT Mitra Berlian Unggas',
+            alias: 'MBU',
+          },
+        },
+      ],
+    },
+    {
+      id: 2,
+      key: 'lti.super_admin',
+      name: 'LTI Administrator',
+      client: {
+        id: 2,
+        name: 'PT Lumbung Telur Indonesia',
+        alias: 'LTI',
+      },
+      permissions: [
+        {
+          id: 4,
+          name: 'lti:purchase:read',
+          action: 'read',
+          client: {
+            id: 2,
+            name: 'PT Lumbung Telur Indonesia',
+            alias: 'LTI',
+          },
+        },
+        {
+          id: 5,
+          name: 'lti:purchase:create',
+          action: 'create',
+          client: {
+            id: 2,
+            name: 'PT Lumbung Telur Indonesia',
+            alias: 'LTI',
+          },
+        },
+        {
+          id: 6,
+          name: 'lti:purchase:approve',
+          action: 'approve',
+          client: {
+            id: 2,
+            name: 'PT Lumbung Telur Indonesia',
+            alias: 'LTI',
+          },
+        },
+      ],
+    },
+    {
+      id: 3,
+      key: 'manbu.super_admin',
+      name: 'MANBU Administrator',
+      client: {
+        id: 3,
+        name: 'PT Mandiri Berlian Unggas',
+        alias: 'MANBU',
+      },
+      permissions: [
+        {
+          id: 7,
+          name: 'manbu:purchase:read',
+          action: 'read',
+          client: {
+            id: 3,
+            name: 'PT Mandiri Berlian Unggas',
+            alias: 'MANBU',
+          },
+        },
+        {
+          id: 8,
+          name: 'manbu:purchase:create',
+          action: 'create',
+          client: {
+            id: 3,
+            name: 'PT Mandiri Berlian Unggas',
+            alias: 'MANBU',
+          },
+        },
+        {
+          id: 9,
+          name: 'manbu:purchase:approve',
+          action: 'approve',
+          client: {
+            id: 3,
+            name: 'PT Mandiri Berlian Unggas',
+            alias: 'MANBU',
+          },
+        },
+      ],
+    },
+  ],
+};
+
 interface RequireAuthProps {
   children?: ReactNode;
 }
@@ -37,17 +176,20 @@ const RequireAuth = ({ children }: RequireAuthProps) => {
     if (isResponseSuccess(userResponse)) {
       setUser(userResponse.data);
     } else {
-      router.replace(process.env.NEXT_PUBLIC_SSO_LOGIN_URL as string);
+      // router.replace(process.env.NEXT_PUBLIC_SSO_LOGIN_URL as string);
+      // TODO: remove this later, DONT HARDCODE USER DATA
+      setUser(DUMMY_USER);
     }
   }, [userResponse, setIsLoadingUser, setUser]);
 
-  if (isLoadingUserResponse && !userResponse) {
-    return (
-      <div className='w-full flex flex-row justify-center items-center p-4'>
-        <span className='loading loading-spinner loading-xl' />
-      </div>
-    );
-  }
+  // TODO: uncomment this later
+  // if (isLoadingUserResponse && !userResponse) {
+  //   return (
+  //     <div className='w-full flex flex-row justify-center items-center p-4'>
+  //       <span className='loading loading-spinner loading-xl' />
+  //     </div>
+  //   );
+  // }
 
   return <>{children}</>;
 };

src/components/input/TagInput.tsx

@@ -0,0 +1,169 @@
+'use client';
+
+import React, { useState, KeyboardEvent, ChangeEvent, useEffect } from 'react';
+import { cn } from '@/lib/helper';
+
+export interface TagInputProps {
+  label?: string;
+  bottomLabel?: string;
+  name: string;
+  value?: string;
+  placeholder?: string;
+  className?: {
+    wrapper?: string;
+    label?: string;
+    inputWrapper?: string;
+    input?: string;
+  };
+  isError?: boolean;
+  isValid?: boolean;
+  disabled?: boolean;
+  readOnly?: boolean;
+  required?: boolean;
+  isLoading?: boolean;
+  errorMessage?: string;
+  onChange?: (value: string) => void;
+}
+
+const TagInput: React.FC<TagInputProps> = ({
+  label,
+  bottomLabel,
+  name,
+  value = '',
+  placeholder,
+  className,
+  isError,
+  isValid,
+  errorMessage,
+  disabled = false,
+  readOnly = false,
+  required = false,
+  onChange,
+}) => {
+  const [tags, setTags] = useState<string[]>(value ? value.split(',') : []);
+  const [inputValue, setInputValue] = useState('');
+
+  useEffect(() => {
+    if (value !== undefined && value !== tags.join(',')) {
+      setTags(value ? value.split(',') : []);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [value]);
+
+  const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'Enter' || e.key === ',') {
+      e.preventDefault();
+      const newTag = inputValue.trim();
+      if (newTag && !tags.includes(newTag)) {
+        const updatedTags = [...tags, newTag];
+        setTags(updatedTags);
+        onChange?.(updatedTags.join(','));
+      }
+      setInputValue('');
+    }
+  };
+
+  const handleRemoveTag = (tagToRemove: string) => {
+    const updatedTags = tags.filter((t) => t !== tagToRemove);
+    setTags(updatedTags);
+    onChange?.(updatedTags.join(','));
+  };
+
+  const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {
+    setInputValue(e.target.value);
+  };
+
+  return (
+    <div
+      className={cn(
+        'w-full flex flex-col gap-2 text-start',
+        className?.wrapper
+      )}
+    >
+      {/* Label */}
+      {label && (
+        <label
+          htmlFor={name}
+          className={cn(
+            'w-full text-sm font-normal leading-5',
+            { 'text-error': isError },
+            className?.label
+          )}
+        >
+          {label}
+          {required && (
+            <>
+              {' '}
+              <span className='tooltip tooltip-error' data-tip='required'>
+                <span className='text-error'> *</span>
+              </span>
+            </>
+          )}
+        </label>
+      )}
+
+      {/* Input wrapper */}
+      <div
+        className={cn(
+          'flex flex-wrap items-start gap-2 border border-gray-400 rounded-md p-2 focus-within:ring-2 focus-within:ring-blue-500 min-h-[42px] transition-all',
+          {
+            'border-error': isError,
+            'border-success!': isValid,
+            'opacity-70 cursor-not-allowed': disabled,
+          },
+          className?.inputWrapper
+        )}
+        onClick={() => {
+          // Fokuskan input saat area diklik
+          const inputEl = document.getElementById(name);
+          inputEl?.focus();
+        }}
+      >
+        {tags.map((tag) => (
+          <div
+            key={tag}
+            className={cn(
+              'badge badge-primary gap-1 px-3 py-3 text-white flex items-center'
+            )}
+          >
+            <span>{tag}</span>
+            {!readOnly && (
+              <button
+                type='button'
+                onClick={() => handleRemoveTag(tag)}
+                className='ml-1 text-white hover:text-red-200 focus:outline-none'
+              >
+                ✕
+              </button>
+            )}
+          </div>
+        ))}
+
+        {!readOnly && (
+          <input
+            type='text'
+            id={name}
+            name={name}
+            value={inputValue}
+            onChange={handleInputChange}
+            onKeyDown={handleKeyDown}
+            placeholder={placeholder}
+            disabled={disabled}
+            className={cn(
+              'flex-1 min-w-[120px] border-none outline-none p-1 size-min',
+              className?.input
+            )}
+          />
+        )}
+      </div>
+
+      {/* Bottom label or error message */}
+      {!isError && bottomLabel && (
+        <p className='w-full text-sm opacity-60'>{bottomLabel}</p>
+      )}
+      {isError && <p className='w-full text-sm text-error'>{errorMessage}</p>}
+    </div>
+  );
+};
+
+export default TagInput;

src/components/input/TextArea.tsx

@@ -0,0 +1,124 @@
+'use client';
+
+import {
+  ChangeEventHandler,
+  FocusEventHandler,
+  ReactNode,
+} from 'react';
+
+import { cn } from '@/lib/helper';
+
+export interface TextAreaProps {
+  label?: string;
+  bottomLabel?: string;
+  name: string;
+  value?: string | number;
+  placeholder?: string;
+  className?: {
+    wrapper?: string;
+    label?: string;
+    inputWrapper?: string;
+    input?: string;
+  };
+  isError?: boolean;
+  isValid?: boolean;
+  disabled?: boolean;
+  readOnly?: boolean;
+  required?: boolean;
+  isLoading?: boolean;
+  errorMessage?: string;
+  startAdornment?: ReactNode;
+  endAdornment?: ReactNode;
+  onChange?: ChangeEventHandler<HTMLTextAreaElement>;
+  onBlur?: FocusEventHandler<HTMLTextAreaElement>;
+  cols?: number;
+}
+
+const TextArea = ({
+  label,
+  bottomLabel,
+  name,
+  value,
+  placeholder,
+  className,
+  isError,
+  isValid,
+  errorMessage,
+  startAdornment,
+  endAdornment,
+  disabled = false,
+  required = false,
+  onChange,
+  onBlur,
+  readOnly = false,
+  isLoading = false,
+  cols = 3
+}: TextAreaProps) => {
+  return (
+    <div
+      className={cn(
+        'w-full flex flex-col gap-2 text-start',
+        className?.wrapper
+      )}
+    >
+      {label && (
+        <label
+          htmlFor={name}
+          className={cn(
+            'w-full text-sm font-normal leading-5',
+            {
+              'text-error': isError,
+            },
+            className?.label
+          )}
+        >
+          {label}
+          {required && (
+            <>
+              {' '}
+              <span className='tooltip tooltip-error' data-tip='required'>
+                <span className='text-error'> *</span>
+              </span>
+            </>
+          )}
+        </label>
+      )}
+        {startAdornment && startAdornment}
+
+        <textarea
+          className={cn(
+            'input h-12 px-4 py-2 text-base font-normal leading-6 w-full rounded-lg! outline-none! transition-all',
+            {
+              'border-error': isError,
+              'border-success!': isValid,
+            },
+            className?.inputWrapper
+          )}
+          id={name}
+          name={name}
+          placeholder={placeholder}
+          value={value}
+          cols={cols}
+          onChange={onChange}
+          onBlur={onBlur}
+          disabled={disabled}
+          readOnly={readOnly}
+        />
+
+        {(isLoading || endAdornment) && (
+          <div className='flex flex-row gap-2'>
+            {isLoading && <span className='loading loading-spinner' />}
+
+            {endAdornment && endAdornment}
+          </div>
+        )}
+
+      {!isError && bottomLabel && (
+        <p className='w-full text-sm opacity-60'>{bottomLabel}</p>
+      )}
+      {isError && <p className='w-full text-sm text-error'>{errorMessage}</p>}
+    </div>
+  );
+};
+
+export default TextArea;

src/components/pages/master-data/area/AreasTable.tsx

@@ -192,7 +192,7 @@ const AreasTable = () => {
     } else {
       updateFilter('nameSort', isNameSorted.desc ? 'desc' : 'asc');
     }
-  }, [sorting]);
+  }, [sorting, updateFilter]);
 
   return (
     <>

src/components/pages/master-data/customer/CustomersTable.tsx

@@ -0,0 +1,288 @@
+'use client';
+
+import Button from '@/components/Button';
+import DebouncedTextInput from '@/components/input/DebouncedTextInput';
+import SelectInput, { OptionType } from '@/components/input/SelectInput';
+import { useModal } from '@/components/Modal';
+import ConfirmationModal from '@/components/modal/ConfirmationModal';
+import Table from '@/components/Table';
+import RowCollapseOptions from '@/components/table/RowCollapseOptions';
+import RowDropdownOptions from '@/components/table/RowDropdownOptions';
+import { ROWS_OPTIONS } from '@/config/constant';
+import { isResponseSuccess } from '@/lib/api-helper';
+import { cn } from '@/lib/helper';
+import { CustomerApi } from '@/services/api/master-data';
+import { useTableFilter } from '@/services/hooks/useTableFilter';
+import { Customer } from '@/types/api/master-data/customer';
+import { Icon } from '@iconify/react';
+import {
+  CellContext,
+  ColumnDef,
+} from '@tanstack/react-table';
+import { useState } from 'react';
+import toast from 'react-hot-toast';
+import useSWR from 'swr';
+
+const RowOptionsMenu = ({
+  type = 'dropdown',
+  props,
+  deleteClickHandler,
+}: {
+  type: 'dropdown' | 'collapse';
+  props: CellContext<Customer, unknown>;
+  deleteClickHandler: () => void;
+}) => {
+  return (
+    <div
+      tabIndex={type == 'dropdown' ? 0 : undefined}
+      className={cn(
+        {
+          'dropdown-content': type === 'dropdown',
+          'mt-2': type === 'collapse',
+        },
+        'p-2.5 mr-2 flex flex-col gap-1 bg-base-100 rounded-box z-10 border border-black/10 shadow'
+      )}
+    >
+      <Button
+        href={`/master-data/customer/detail/?customerId=${props.row.original.id}`}
+        variant='ghost'
+        color='primary'
+        className='justify-start text-sm'
+      >
+        <Icon icon='mdi:eye-outline' width={16} height={16} />
+        Detail
+      </Button>
+      <Button
+        className='justify-start text-sm'
+        href={`/master-data/customer/detail/edit/?customerId=${props.row.original.id}`}
+        variant='ghost'
+        color='warning'
+      >
+        <Icon icon='material-symbols:edit-outline' width={16} height={16} />
+        Edit
+      </Button>
+      <Button
+        onClick={deleteClickHandler}
+        variant='ghost'
+        color='error'
+        className='text-error hover:text-inherit'
+      >
+        <Icon
+          icon='material-symbols:delete-outline-rounded'
+          width={16}
+          height={16}
+          className='justify-start text-sm'
+        />
+        Delete
+      </Button>
+    </div>
+  );
+};
+
+const CustomersTable = () => {
+  const {
+    state: tableFilterState,
+    updateFilter,
+    setPage,
+    setPageSize,
+    toQueryString: getTableFilterQueryString,
+  } = useTableFilter({
+    initial: { search: '', nameSort: '', picSort: '' },
+    paramMap: {
+      page: 'page',
+      pageSize: 'limit',
+      nameSort: 'sort_name',
+      picSort: 'sort_pic',
+    },
+  });
+
+  // Fetch Data
+  const {
+    data: customers,
+    isLoading,
+    mutate: refreshCustomers,
+  } = useSWR(
+    `${CustomerApi.basePath}${getTableFilterQueryString()}`,
+    CustomerApi.getAllFetcher
+  );
+
+  // State
+  const deleteModal = useModal();
+  const [selectedCustomer, setSelectedCustomer] = useState<
+    Customer | undefined
+  >(undefined);
+  const [isDeleteLoading, setIsDeleteLoading] = useState(false);
+
+  // Columns Definition
+  const customersColumns: ColumnDef<Customer>[] = [
+    {
+      header: '#',
+      cell: (props) =>
+        tableFilterState.pageSize * (tableFilterState.page - 1) +
+        props.row.index +
+        1,
+    },
+    {
+      accessorKey: 'name',
+      header: 'Nama',
+    },
+    {
+      accessorKey: 'pic',
+      header: 'PIC',
+      cell: (props) => props.row.original.pic.name,
+    },
+    {
+      accessorKey: 'type',
+      header: 'Type',
+      cell: (props) => props.row.original.type,
+    },
+    {
+      accessorKey: 'phone',
+      header: 'Phone',
+    },
+    {
+      accessorKey: 'email',
+      header: 'Email',
+    },
+    {
+      header: 'Aksi',
+      cell: (props) => {
+        const currentPageSize = props.table.getPaginationRowModel().rows.length;
+        const currentPageRows = props.table.getPaginationRowModel().flatRows;
+        const currentRowRelativeIndex =
+          currentPageRows.findIndex((r) => r.id === props.row.id) + 1;
+
+        const isLast2Rows = currentRowRelativeIndex > currentPageSize - 2;
+
+        const deleteClickHandler = () => {
+          setSelectedCustomer(props.row.original);
+          deleteModal.openModal();
+        };
+
+        return (
+          <>
+            {currentPageSize > 2 && (
+              <RowDropdownOptions isLast2Rows={isLast2Rows}>
+                <RowOptionsMenu
+                  type='dropdown'
+                  props={props}
+                  deleteClickHandler={deleteClickHandler}
+                />
+              </RowDropdownOptions>
+            )}
+
+            {currentPageSize <= 2 && (
+              <RowCollapseOptions>
+                <RowOptionsMenu
+                  type='dropdown'
+                  props={props}
+                  deleteClickHandler={deleteClickHandler}
+                />
+              </RowCollapseOptions>
+            )}
+          </>
+        );
+      },
+    },
+  ];
+
+  // Handler
+  const confirmationModalDeleteClickHandler = async () => {
+    setIsDeleteLoading(true);
+
+    await CustomerApi.delete(selectedCustomer?.id as number);
+    refreshCustomers();
+
+    deleteModal.closeModal();
+    toast.success('Successfully delete Customer!');
+    setIsDeleteLoading(false);
+  };
+  const searchChangeHandler = (e: React.ChangeEvent<HTMLInputElement>) => {
+    updateFilter('search', e.target.value);
+  };
+  const pageSizeChangeHandler = (val: OptionType | OptionType[] | null) => {
+    const newVal = val as OptionType;
+    setPageSize(newVal.value as number);
+  };
+
+  return (
+    <>
+      <div className='w-full p-0 sm:p-4'>
+        <div className='flex flex-col gap-2 mb-4'>
+          <div className='w-full flex flex-col sm:flex-row justify-between items-end sm:items-center gap-2'>
+            <div className='flex flex-row'>
+              <Button href='/master-data/customer/add' color='primary'>
+                <Icon icon='ic:round-plus' width={24} height={24} />
+                Tambah Customer
+              </Button>
+            </div>
+
+            <DebouncedTextInput
+              name='search'
+              placeholder='Cari Kandang'
+              value={tableFilterState.search}
+              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<Customer>
+          data={isResponseSuccess(customers) ? customers?.data : []}
+          columns={customersColumns}
+          pageSize={tableFilterState.pageSize}
+          page={isResponseSuccess(customers) ? customers?.meta?.page : 0}
+          totalItems={
+            isResponseSuccess(customers) ? customers?.meta?.total_results : 0
+          }
+          onPageChange={setPage}
+          isLoading={isLoading}
+          className={{
+            containerClassName: cn({
+              'mb-20':
+                isResponseSuccess(customers) && customers?.data?.length === 0,
+            }),
+            tableWrapperClassName: 'overflow-x-auto min-h-full!',
+            tableClassName: 'font-inter w-full table-auto min-h-full!',
+            headerRowClassName: 'border-b border-b-gray-200',
+            headerColumnClassName:
+              'px-6 py-3 text-xs font-semibold text-gray-500 last:flex last:flex-row last:justify-end',
+            bodyRowClassName: 'border-b border-b-gray-200',
+            bodyColumnClassName:
+              'px-6 py-3 last:flex last:flex-row last:justify-end',
+          }}
+        />
+      </div>
+
+      <ConfirmationModal
+        ref={deleteModal.ref}
+        type='error'
+        text={`Apakah anda yakin ingin menghapus data Customer ini (${selectedCustomer?.name})?`}
+        secondaryButton={{
+          text: 'Tidak',
+        }}
+        primaryButton={{
+          text: 'Ya',
+          color: 'error',
+          isLoading: isDeleteLoading,
+          onClick: confirmationModalDeleteClickHandler,
+        }}
+      />
+    </>
+  );
+};
+
+export default CustomersTable;

src/components/pages/master-data/customer/form/CustomerForm.schema.ts

@@ -0,0 +1,37 @@
+import * as Yup from 'yup';
+
+export const CustomerFormSchema = Yup.object({
+  name: Yup.string().required('Nama wajib diisi!'),
+
+  picId: Yup.number().min(1, 'PIC wajib diisi!').required('PIC wajib diisi!'),
+
+  pic: Yup.object({
+    value: Yup.number().min(1).required(),
+    label: Yup.string().required(),
+  }).required('PIC wajib diisi!'),
+
+  type: Yup.object({
+    value: Yup.string().required(),
+    label: Yup.string().required(),
+  }).required('Tipe wajib diisi!'),
+
+  address: Yup.string().required('Alamat wajib diisi!'),
+
+  phone: Yup.string()
+    .matches(/^[0-9]+$/, 'Nomor telepon hanya boleh berisi angka!')
+    .min(10, 'Nomor telepon minimal 10 digit!')
+    .max(12, 'Nomor telepon maksimal 12 digit!')
+    .required('Nomor telepon wajib diisi!'),
+
+  email: Yup.string()
+    .email('Format email tidak valid!')
+    .required('Email wajib diisi!'),
+
+  account_number: Yup.string()
+    .matches(/^[0-9]+$/, 'Nomor rekening hanya boleh berisi angka!')
+    .required('Nomor rekening wajib diisi!'),
+});
+
+export const UpdateCustomerFormSchema = CustomerFormSchema;
+
+export type CustomerFormValues = Yup.InferType<typeof CustomerFormSchema>;

src/components/pages/master-data/customer/form/CustomerForm.tsx

@@ -0,0 +1,410 @@
+'use client';
+
+import { useModal } from '@/components/Modal';
+import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
+import { CustomerApi } from '@/services/api/master-data';
+import {
+  CreateCustomerPayload,
+  Customer,
+  UpdateCustomerPayload,
+} from '@/types/api/master-data/customer';
+import { useRouter } from 'next/navigation';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import toast from 'react-hot-toast';
+import { CustomerFormSchema, CustomerFormValues, UpdateCustomerFormSchema } from './CustomerForm.schema';
+import { useFormik } from 'formik';
+import Button from '@/components/Button';
+import { Icon } from '@iconify/react';
+import TextInput from '@/components/input/TextInput';
+import { cn } from '@/lib/helper';
+import ConfirmationModal from '@/components/modal/ConfirmationModal';
+import TextArea from '@/components/input/TextArea';
+import SelectInput, { OptionType } from '@/components/input/SelectInput';
+import useSWR from 'swr';
+import { UserApi } from '@/services/api/user';
+import { TYPE_OPTIONS } from '@/config/constant';
+
+interface CustomerFormProps {
+  formType?: 'add' | 'edit' | 'detail';
+  initialValues?: Customer;
+}
+
+const CustomerForm = ({
+  formType = 'add',
+  initialValues,
+}: CustomerFormProps) => {
+  // Setup Kebutuhan Form
+  const router = useRouter();
+  const deleteModal = useModal();
+
+  // Setup State
+  const [customerFormErrorMessage, setCustomerFormErrorMessage] = useState('');
+  const [isDeleteLoading, setIsDeleteLoading] = useState(false);
+  const [picSelectInputValue, setPicSelectInputValue] = useState('');
+  const [typeSelectInputValue, setTypeSelectInputValue] = useState('');
+
+  // Fetch Data
+  const picUrl = `${UserApi.basePath}?${new URLSearchParams({
+    search: picSelectInputValue ?? '',
+  })}`;
+
+  const { data: pic, isLoading: isLoadingPic } = useSWR(
+    picUrl,
+    UserApi.getAllFetcher
+  );
+
+  // -- Options data mapping
+  const picOptions = isResponseSuccess(pic)
+    ? pic?.data.map((area) => ({
+        value: area.id,
+        label: area.name,
+      }))
+    : [];
+  const typeOptions = TYPE_OPTIONS;
+
+  // Handler Event
+  const createCustomerHandler = useCallback(
+    async (payload: CreateCustomerPayload) => {
+      const createCustomerRes = await CustomerApi.create(payload);
+
+      if (isResponseError(createCustomerRes)) {
+        setCustomerFormErrorMessage(createCustomerRes.message);
+        return;
+      }
+
+      toast.success(createCustomerRes?.message as string);
+      router.push('/master-data/customer');
+    },
+    [router]
+  );
+  const updateCustomerHandler = useCallback(
+    async (customerId: number, payload: UpdateCustomerPayload) => {
+      const updateCustomerRes = await CustomerApi.update(customerId, payload);
+
+      if (isResponseError(updateCustomerRes)) {
+        setCustomerFormErrorMessage(updateCustomerRes.message);
+        return;
+      }
+
+      toast.success(updateCustomerRes?.message as string);
+      router.push('/master-data/customer');
+    },
+    [router]
+  );
+
+  const deleteCustomerHandler = () => {
+    deleteModal.openModal();
+  };
+
+  const confirmationModalDeleteclickHandler = async () => {
+    setIsDeleteLoading(true);
+
+    await CustomerApi.delete(initialValues?.id as number);
+
+    deleteModal.closeModal();
+    setIsDeleteLoading(false);
+    router.push('/master-data/customer');
+  };
+
+  // -- Option Handler
+  const picChangeHandler = (val: OptionType | OptionType[] | null) => {
+    formik.setFieldTouched('pic', true);
+    formik.setFieldValue('pic', val);
+
+    formik.setFieldTouched('picId', true);
+    formik.setFieldValue('picId', (val as OptionType)?.value);
+  };
+  const typeChangeHandler = (val: OptionType | OptionType[] | null) => {
+    formik.setFieldTouched('type', true);
+    formik.setFieldValue('type', val);
+  };
+
+  // Utils Functions
+  const normalizeType = (type?: string | { value: string; label: string }) => {
+    if (!type) return TYPE_OPTIONS[0];
+    return typeof type === 'string' ? { value: type, label: type } : type;
+  };
+
+  // Memo untuk simpan input sebelumnya
+  const formikInitialValues = useMemo<CustomerFormValues>(() => {
+    return {
+      name: initialValues?.name ?? '',
+      email: initialValues?.email ?? '',
+      phone: initialValues?.phone ?? '',
+      picId: initialValues?.pic?.id ?? 0,
+      pic: initialValues?.pic
+        ? {
+            value: initialValues.pic.id,
+            label: initialValues.pic.name,
+          }
+        : {
+            value: 0,
+            label: '',
+          },
+      type: normalizeType(initialValues?.type),
+      address: initialValues?.address ?? '',
+      account_number: initialValues?.account_number ?? '',
+    };
+  }, [initialValues]);
+
+  // Formik
+  const formik = useFormik<CustomerFormValues>({
+    initialValues: formikInitialValues,
+    enableReinitialize: true,
+    validationSchema: formType === 'edit' ? UpdateCustomerFormSchema : CustomerFormSchema,
+    onSubmit: async (values) => {
+      // reset error message
+      setCustomerFormErrorMessage('');
+
+      // create payload
+      const payload: CreateCustomerPayload = {
+        name: values.name,
+        email: values.email,
+        phone: values.phone,
+        pic_id: values.picId,
+        type: (values.type as OptionType).value as string,
+        address: values.address,
+        account_number: values.account_number,
+      };
+
+      // cek type form yang disubmit
+      switch (formType) {
+        case 'add':
+          await createCustomerHandler(payload);
+          break;
+        case 'edit':
+          await updateCustomerHandler(initialValues?.id as number, payload);
+          break;
+      }
+    },
+  });
+
+  const { setValues: formikSetValues } = formik;
+
+  // Initialize Formik
+  useEffect(() => {
+    formikSetValues(formikInitialValues);
+  }, [formikSetValues, formikInitialValues]);
+
+  // Render
+  return (
+    <>
+      <section className='w-full max-w-xl'>
+        <header className='flex flex-col gap-4'>
+          <Button
+            href='/master-data/customer'
+            variant='link'
+            className='w-fit p-0 text-primary'
+          >
+            <Icon icon='uil:arrow-left' width={24} height={24} />
+            Kembali
+          </Button>
+
+          <h1 className='text-2xl font-bold text-center'>
+            {formType === 'add' && 'Tambah Customer'}
+            {formType === 'edit' && 'Ubah Customer'}
+            {formType === 'detail' && 'Detail Customer'}
+          </h1>
+        </header>
+
+        <form
+          onSubmit={formik.handleSubmit}
+          onReset={formik.handleReset}
+          className='w-full mt-8 flex flex-col gap-6'
+        >
+          {/* Fields Form */}
+          <div className='flex flex-col gap-4'>
+            <TextInput
+              required
+              label='Nama'
+              name='name'
+              placeholder='Masukkan nama customer'
+              value={formik.values.name}
+              onChange={formik.handleChange}
+              onBlur={formik.handleBlur}
+              isError={formik.touched.name && Boolean(formik.errors.name)}
+              errorMessage={formik.errors.name}
+              readOnly={formType === 'detail'}
+            />
+            <SelectInput
+              required
+              placeholder='Pilih PIC'
+              label='PIC'
+              value={formik.values.pic ?? undefined}
+              onChange={picChangeHandler}
+              options={picOptions}
+              onInputChange={setPicSelectInputValue}
+              isLoading={isLoadingPic}
+              isError={formik.touched.picId && Boolean(formik.errors.picId)}
+              errorMessage={formik.errors.picId as string}
+              isDisabled={formType === 'detail'}
+              isClearable
+              isSearchable={true}
+            />
+            <SelectInput
+              required
+              placeholder='Pilih Tipe'
+              label='Tipe'
+              value={
+                typeOptions.find(
+                  (item) => item.value === formik.values.type?.value
+                ) ?? undefined
+              }
+              onChange={typeChangeHandler}
+              options={typeOptions}
+              onInputChange={setTypeSelectInputValue}
+              isError={formik.touched.type && Boolean(formik.errors.type)}
+              errorMessage={formik.errors.type as string}
+              isDisabled={formType === 'detail'}
+              isClearable
+              isSearchable={true}
+            />
+            <TextInput
+              required
+              label='Email'
+              name='email'
+              placeholder='Masukkan email customer'
+              value={formik.values.email}
+              onChange={formik.handleChange}
+              onBlur={formik.handleBlur}
+              isError={formik.touched.email && Boolean(formik.errors.email)}
+              errorMessage={formik.errors.email}
+              readOnly={formType === 'detail'}
+            />
+            <TextInput
+              required
+              label='Nomor Telepon'
+              name='phone'
+              placeholder='Masukkan nomor telepon customer'
+              value={formik.values.phone}
+              onChange={formik.handleChange}
+              onBlur={formik.handleBlur}
+              isError={formik.touched.phone && Boolean(formik.errors.phone)}
+              errorMessage={formik.errors.phone}
+              readOnly={formType === 'detail'}
+            />
+            <TextInput
+              required
+              label='Nomor Rekening'
+              name='account_number'
+              placeholder='Masukkan nomor rekening customer'
+              value={formik.values.account_number}
+              onChange={formik.handleChange}
+              onBlur={formik.handleBlur}
+              isError={
+                formik.touched.account_number &&
+                Boolean(formik.errors.account_number)
+              }
+              errorMessage={formik.errors.account_number}
+              readOnly={formType === 'detail'}
+            />
+            <TextArea
+              required
+              label='Alamat'
+              name='address'
+              placeholder='Masukkan alamat customer'
+              value={formik.values.address}
+              onChange={formik.handleChange}
+              onBlur={formik.handleBlur}
+              isError={formik.touched.address && Boolean(formik.errors.address)}
+              errorMessage={formik.errors.address}
+              readOnly={formType === 'detail'}
+              cols={8}
+            />
+          </div>
+
+          {/* Action Button */}
+          <div className='flex flex-row justify-between gap-2 flex-wrap'>
+            {formType !== 'add' && (
+              <div className='flex flex-row justify-start gap-2'>
+                <Button
+                  type='button'
+                  color='error'
+                  onClick={deleteCustomerHandler}
+                  className='px-4'
+                >
+                  <Icon
+                    icon='material-symbols:delete-outline-rounded'
+                    width={24}
+                    height={24}
+                    className='justify-start text-sm'
+                  />
+                  Delete
+                </Button>
+
+                {formType !== 'edit' && (
+                  <Button
+                    type='button'
+                    color='warning'
+                    href={`/master-data/customer/detail/edit/?customerId=${initialValues?.id}`}
+                    className='px-4'
+                  >
+                    <Icon
+                      icon='material-symbols:edit-outline'
+                      width={24}
+                      height={24}
+                      className='justify-start text-sm'
+                    />
+                    Edit
+                  </Button>
+                )}
+              </div>
+            )}
+
+            {formType !== 'detail' && (
+              <div
+                className={cn('flex flex-row justify-end gap-2', {
+                  'w-full': formType === 'add',
+                })}
+              >
+                <Button type='reset' color='warning' className='px-4'>
+                  Reset
+                </Button>
+
+                <Button
+                  type='submit'
+                  color='primary'
+                  isLoading={formik.isSubmitting}
+                  disabled={!formik.isValid || formik.isSubmitting}
+                  className='px-4'
+                >
+                  Submit
+                </Button>
+              </div>
+            )}
+          </div>
+
+          {customerFormErrorMessage && (
+            <div role='alert' className='alert alert-error'>
+              <Icon
+                icon='material-symbols:error-outline'
+                width={24}
+                height={24}
+              />
+              <span>{customerFormErrorMessage}</span>
+            </div>
+          )}
+        </form>
+      </section>
+
+      {formType !== 'add' && (
+        <ConfirmationModal
+          ref={deleteModal.ref}
+          type='error'
+          text={`Apakah anda yakin ingin menghapus data Customer ini (${initialValues?.name})?`}
+          secondaryButton={{
+            text: 'Tidak',
+          }}
+          primaryButton={{
+            text: 'Ya',
+            color: 'error',
+            onClick: confirmationModalDeleteclickHandler,
+            isLoading: isDeleteLoading,
+          }}
+        />
+      )}
+    </>
+  );
+};
+
+export default CustomerForm;

src/components/pages/master-data/kandang/KandangsTable.tsx

@@ -231,7 +231,7 @@ const KandangsTable = () => {
     updateSortingFilter('nameSort', nameSortFilter);
     updateSortingFilter('locationSort', locationSortFilter);
     updateSortingFilter('picSort', picSortFilter);
-  }, [sorting]);
+  }, [sorting, updateSortingFilter]);
 
   return (
     <>

src/components/pages/master-data/location/LocationsTable.tsx

@@ -230,7 +230,7 @@ const LocationsTable = () => {
     updateSortingFilter('nameSort', nameSortFilter);
     updateSortingFilter('addressSort', addressSortFilter);
     updateSortingFilter('areaSort', areaSortFilter);
-  }, [sorting]);
+  }, [sorting, updateSortingFilter]);
 
   return (
     <>

src/components/pages/master-data/product-category/ProductCategoryTable.tsx

@@ -66,7 +66,12 @@ const RowOptionsMenu = ({
         color='error'
         className='text-error hover:text-inherit'
       >
-        <Icon icon='mdi:delete-outline' width={16} height={16} className='justify-start text-sm' />
+        <Icon
+          icon='mdi:delete-outline'
+          width={16}
+          height={16}
+          className='justify-start text-sm'
+        />
         Delete
       </Button>
     </div>
@@ -96,7 +101,9 @@ const ProductCategoryTable = () => {
 
   const deleteModal = useModal();
 
-  const [selectedProductCategory, setSelectedProductCategory] = useState<ProductCategory | undefined>(undefined);
+  const [selectedProductCategory, setSelectedProductCategory] = useState<
+    ProductCategory | undefined
+  >(undefined);
   const [isDeleteLoading, setIsDeleteLoading] = useState(false);
 
   const [sorting, setSorting] = useState<SortingState>([]);
@@ -186,7 +193,7 @@ const ProductCategoryTable = () => {
     } else {
       updateFilter('nameSort', isNameSorted.desc ? 'desc' : 'asc');
     }
-  }, [sorting]);
+  }, [sorting, updateFilter]);
 
   return (
     <>
@@ -221,18 +228,30 @@ const ProductCategoryTable = () => {
           </div>
         </div>
         <Table<ProductCategory>
-          data={isResponseSuccess(productCategories) ? productCategories?.data : []}
+          data={
+            isResponseSuccess(productCategories) ? productCategories?.data : []
+          }
           columns={productCategoryColumns}
           pageSize={tableFilterState.pageSize}
-          page={isResponseSuccess(productCategories) ? productCategories?.meta?.page : 0}
-          totalItems={isResponseSuccess(productCategories) ? productCategories?.meta?.total_results : 0}
+          page={
+            isResponseSuccess(productCategories)
+              ? productCategories?.meta?.page
+              : 0
+          }
+          totalItems={
+            isResponseSuccess(productCategories)
+              ? productCategories?.meta?.total_results
+              : 0
+          }
           onPageChange={setPage}
           isLoading={isLoading}
           sorting={sorting}
           setSorting={setSorting}
           className={{
             containerClassName: cn({
-              'mb-20': isResponseSuccess(productCategories) && productCategories?.data?.length === 0,
+              'mb-20':
+                isResponseSuccess(productCategories) &&
+                productCategories?.data?.length === 0,
             }),
             tableWrapperClassName: 'overflow-x-auto min-h-full!',
             tableClassName: 'font-inter w-full table-auto min-h-full!',

src/components/pages/master-data/product/ProductTable.tsx

@@ -116,7 +116,9 @@ const ProductsTable = () => {
   );
 
   const deleteModal = useModal();
-  const [selectedProduct, setSelectedProduct] = useState<Product | undefined>(undefined);
+  const [selectedProduct, setSelectedProduct] = useState<Product | undefined>(
+    undefined
+  );
   const [isDeleteLoading, setIsDeleteLoading] = useState(false);
   const [sorting, setSorting] = useState<SortingState>([]);
 
@@ -153,12 +155,14 @@ const ProductsTable = () => {
     {
       accessorKey: 'product_price',
       header: 'Harga Produk',
-      cell: (props) => props.row.original.product_price?.toLocaleString() ?? '-',
+      cell: (props) =>
+        props.row.original.product_price?.toLocaleString() ?? '-',
     },
     {
       accessorKey: 'selling_price',
       header: 'Harga Jual',
-      cell: (props) => props.row.original.selling_price?.toLocaleString() ?? '-',
+      cell: (props) =>
+        props.row.original.selling_price?.toLocaleString() ?? '-',
     },
     {
       accessorKey: 'tax',
@@ -261,13 +265,15 @@ const ProductsTable = () => {
     const nameSortFilter = sorting.find((sortItem) => sortItem.id === 'name');
     const skuSortFilter = sorting.find((sortItem) => sortItem.id === 'sku');
     const brandSortFilter = sorting.find((sortItem) => sortItem.id === 'brand');
-    const categorySortFilter = sorting.find((sortItem) => sortItem.id === 'product_category');
+    const categorySortFilter = sorting.find(
+      (sortItem) => sortItem.id === 'product_category'
+    );
 
     updateSortingFilter('nameSort', nameSortFilter);
     updateSortingFilter('skuSort', skuSortFilter);
     updateSortingFilter('brandSort', brandSortFilter);
     updateSortingFilter('categorySort', categorySortFilter);
-  }, [sorting]);
+  }, [sorting, updateSortingFilter]);
 
   return (
     <>

src/components/pages/master-data/supplier/SupplierTable.tsx

@@ -0,0 +1,303 @@
+'use client';
+
+import Button from '@/components/Button';
+import DebouncedTextInput from '@/components/input/DebouncedTextInput';
+import SelectInput, { OptionType } from '@/components/input/SelectInput';
+import { useModal } from '@/components/Modal';
+import ConfirmationModal from '@/components/modal/ConfirmationModal';
+import Table from '@/components/Table';
+import RowCollapseOptions from '@/components/table/RowCollapseOptions';
+import RowDropdownOptions from '@/components/table/RowDropdownOptions';
+import { ROWS_OPTIONS } from '@/config/constant';
+import { isResponseSuccess } from '@/lib/api-helper';
+import { cn } from '@/lib/helper';
+import { SupplierApi } from '@/services/api/master-data';
+import { useTableFilter } from '@/services/hooks/useTableFilter';
+import { Supplier } from '@/types/api/master-data/supplier';
+import { Icon } from '@iconify/react';
+import { CellContext, ColumnDef } from '@tanstack/react-table';
+import { useState } from 'react';
+import toast from 'react-hot-toast';
+import useSWR from 'swr';
+
+const RowOptions = ({
+  type = 'dropdown',
+  props,
+  deleteClickHandler,
+}: {
+  type: 'dropdown' | 'collapse';
+  props: CellContext<Supplier, unknown>;
+  deleteClickHandler: () => void;
+}) => {
+  return (
+    <div
+      tabIndex={type == 'dropdown' ? 0 : undefined}
+      className={cn(
+        {
+          'dropdown-content': type === 'dropdown',
+          'mt-2': type === 'collapse',
+        },
+        'p-2.5 mr-2 flex flex-col gap-1 bg-base-100 rounded-box z-10 border border-black/10 shadow'
+      )}
+    >
+      <Button
+        href={`/master-data/supplier/detail/?supplierId=${props.row.original.id}`}
+        variant='ghost'
+        color='primary'
+        className='justify-start text-sm'
+      >
+        <Icon
+          icon='mdi:eye-outline'
+          width={16}
+          height={16}
+          className='justify-start text-sm'
+        />
+        Detail
+      </Button>
+      <Button
+        href={`/master-data/supplier/detail/edit/?supplierId=${props.row.original.id}`}
+        variant='ghost'
+        color='warning'
+        className='justify-start text-sm'
+      >
+        <Icon
+          icon='material-symbols:edit-outline'
+          width={16}
+          height={16}
+          className='justify-start text-sm'
+        />
+        Edit
+      </Button>
+      <Button
+        onClick={deleteClickHandler}
+        variant='ghost'
+        color='error'
+        className='text-error hover:text-inherit'
+      >
+        <Icon
+          icon='material-symbols:delete-outline-rounded'
+          width={16}
+          height={16}
+          className='justify-start text-sm'
+        />
+        Delete
+      </Button>
+    </div>
+  );
+};
+
+const SuppliersTable = () => {
+  const {
+    state: tableFilterState,
+    updateFilter,
+    setPage,
+    setPageSize,
+    toQueryString: getTableFilterQueryString,
+  } = useTableFilter({
+    initial: { search: '', nameSort: '' },
+    paramMap: {
+      page: 'page',
+      pageSize: 'limit',
+      nameSort: 'sort_name',
+    },
+  });
+
+  // Fetch Data
+  const {
+    data: suppliers,
+    isLoading,
+    mutate: refreshSuppliers,
+  } = useSWR(
+    `${SupplierApi.basePath}${getTableFilterQueryString()}`,
+    SupplierApi.getAllFetcher
+  );
+
+  // State
+  const deleteModal = useModal();
+  const [selectedSupplier, setSelectedSupplier] = useState<
+    Supplier | undefined
+  >(undefined);
+  const [isDeleteLoading, setIsDeleteLoading] = useState(false);
+
+  // Columns Definition
+  const suppliersColumns: ColumnDef<Supplier>[] = [
+    {
+      header: '#',
+      cell: (props) =>
+        tableFilterState.pageSize * (tableFilterState.page - 1) +
+        props.row.index +
+        1,
+    },
+    {
+      accessorKey: 'name',
+      header: 'Nama',
+    },
+    {
+      accessorKey: 'alias',
+      header: 'Alias',
+    },
+    {
+      accessorKey: 'pic',
+      header: 'Nama PIC',
+    },
+    {
+      accessorKey: 'category',
+      header: 'Kategori',
+    },
+    {
+      accessorKey: 'type',
+      header: 'Tipe',
+    },
+    {
+      accessorKey: 'phone',
+      header: 'No. Telp',
+    },
+    {
+      accessorKey: 'email',
+      header: 'Email',
+    },
+    {
+      accessorKey: 'address',
+      header: 'Alamat',
+    },
+    {
+      header: 'Aksi',
+      cell: (props) => {
+        const currentPageSize = props.table.getPaginationRowModel().rows.length;
+        const currentPageRows = props.table.getPaginationRowModel().flatRows;
+        const currentRowRelativeIndex =
+          currentPageRows.findIndex((r) => r.id === props.row.id) + 1;
+
+        const isLast2Rows = currentRowRelativeIndex > currentPageSize - 2;
+
+        const deleteClickHandler = () => {
+          setSelectedSupplier(props.row.original);
+          deleteModal.openModal();
+        };
+
+        return (
+          <>
+            {currentPageSize > 2 && (
+              <RowDropdownOptions isLast2Rows={isLast2Rows}>
+                <RowOptions
+                  type='dropdown'
+                  props={props}
+                  deleteClickHandler={deleteClickHandler}
+                />
+              </RowDropdownOptions>
+            )}
+
+            {currentPageSize <= 2 && (
+              <RowCollapseOptions>
+                <RowOptions
+                  type='collapse'
+                  props={props}
+                  deleteClickHandler={deleteClickHandler}
+                />
+              </RowCollapseOptions>
+            )}
+          </>
+        );
+      },
+    },
+  ];
+
+  // Handler
+  const confirmationModalDeleteClickHandler = async () => {
+    setIsDeleteLoading(true);
+
+    await SupplierApi.delete(selectedSupplier?.id as number);
+    refreshSuppliers();
+
+    deleteModal.closeModal();
+    toast.success('Successfully delete Supplier!');
+    setIsDeleteLoading(false);
+  };
+  const searchChangeHandler = (e: React.ChangeEvent<HTMLInputElement>) => {
+    updateFilter('search', e.target.value);
+  };
+  const pageSizeChangeHandler = (val: OptionType | OptionType[] | null) => {
+    const newVal = val as OptionType;
+    setPageSize(newVal.value as number);
+  };
+
+  return (
+    <>
+      <div className='w-full p-0 sm:p-4'>
+        <div className='flex flex-col gap-2 mb-4'>
+          <div className='w-full flex flex-col sm:flex-row justify-between items-end sm:items-center gap-2'>
+            <div className='flex flex-row'>
+              <Button href='/master-data/supplier/add' color='primary'>
+                <Icon icon='ic:round-plus' width={24} height={24} />
+                Tambah Supplier
+              </Button>
+            </div>
+
+            <DebouncedTextInput
+              name='search'
+              placeholder='Cari Supplier'
+              value={tableFilterState.search}
+              onChange={searchChangeHandler}
+              className={{ wrapper: 'sm:max-w-3xs' }}
+            />
+          </div>
+
+          <div className='flex flex-row justify-end'>
+            <SelectInput
+              label='Baris'
+              options={ROWS_OPTIONS}
+              value={{
+                label: String(tableFilterState.pageSize),
+                value: tableFilterState.pageSize,
+              }}
+              onChange={pageSizeChangeHandler}
+              className={{ wrapper: 'max-w-28' }}
+            />
+          </div>
+        </div>
+
+        <Table<Supplier>
+          data={isResponseSuccess(suppliers) ? suppliers?.data : []}
+          columns={suppliersColumns}
+          pageSize={tableFilterState.pageSize}
+          page={isResponseSuccess(suppliers) ? suppliers?.meta?.page : 0}
+          totalItems={
+            isResponseSuccess(suppliers) ? suppliers?.meta?.total_results : 0
+          }
+          onPageChange={setPage}
+          isLoading={isLoading}
+          className={{
+            containerClassName: cn({
+              'mb-20':
+                isResponseSuccess(suppliers) && suppliers?.data?.length === 0,
+            }),
+            tableWrapperClassName: 'overflow-x-auto min-h-full!',
+            tableClassName: 'font-inter w-full table-auto min-h-full!',
+            headerRowClassName: 'border-b border-b-gray-200',
+            headerColumnClassName:
+              'px-6 py-3 text-xs font-semibold text-gray-500 last:flex last:flex-row last:justify-end',
+            bodyRowClassName: 'border-b border-b-gray-200',
+            bodyColumnClassName:
+              'px-6 py-3 last:flex last:flex-row last:justify-end',
+          }}
+        />
+      </div>
+      <ConfirmationModal
+        ref={deleteModal.ref}
+        type='error'
+        text={`Apakah anda yakin ingin menghapus data Supplier ini (${selectedSupplier?.name})?`}
+        secondaryButton={{
+          text: 'Tidak',
+        }}
+        primaryButton={{
+          text: 'Ya',
+          color: 'error',
+          isLoading: isDeleteLoading,
+          onClick: confirmationModalDeleteClickHandler,
+        }}
+      />
+    </>
+  );
+};
+
+export default SuppliersTable;

src/components/pages/master-data/supplier/form/SupplierForm.schema.ts

@@ -0,0 +1,38 @@
+import * as Yup from 'yup';
+
+export const SupplierFormSchema = Yup.object({
+    name: Yup.string().required('Nama wajib diisi!'),
+    alias: Yup.string().required('Alias wajib diisi!'),
+    pic: Yup.string().required('PIC wajib diisi!'),
+    type: Yup.object({
+        value: Yup.string().required(),
+        label: Yup.string().required(),
+      })
+        .required('Tipe wajib diisi!'),
+    category: Yup.object({
+        value: Yup.string().required(),
+        label: Yup.string().required(),
+      })
+        .required('Tipe wajib diisi!'),
+    hatchery: Yup.string().required('Hatchery wajib diisi!'),
+    phone: Yup.string()
+        .matches(/^[0-9]+$/, 'Nomor telepon hanya boleh berisi angka!')
+        .min(10, 'Nomor telepon minimal 10 digit!')
+        .max(12, 'Nomor telepon maksimal 12 digit!')
+        .required('Nomor telepon wajib diisi!'),
+    email: Yup.string()
+        .email('Format email tidak valid!')
+        .required('Email wajib diisi!'),
+    address: Yup.string().required('Alamat wajib diisi!'),
+    npwp: Yup.string()
+        .matches(/^[0-9]+$/, 'Nomor NPWP hanya boleh berisi angka!')
+        .required('Nomor NPWP wajib diisi!'),
+    account_number: Yup.string()
+        .matches(/^[0-9]+$/, 'Nomor rekening hanya boleh berisi angka!')
+        .required('Nomor rekening wajib diisi!'),
+    due_date: Yup.number().min(1, 'Tanggal jatuh tempo wajib diisi!').required('Tanggal jatuh tempo wajib diisi!'),
+});
+
+export const UpdateSupplierFormSchema = SupplierFormSchema;
+
+export type SupplierFormValues = Yup.InferType<typeof SupplierFormSchema>;

src/components/pages/master-data/supplier/form/SupplierForm.tsx

@@ -0,0 +1,480 @@
+'use client';
+
+import { useModal } from '@/components/Modal';
+import { CATEGORY_OPTIONS, TYPE_OPTIONS } from '@/config/constant';
+import { isResponseError } from '@/lib/api-helper';
+import { SupplierApi } from '@/services/api/master-data';
+import {
+  CreateSupplierPayload,
+  Supplier,
+} from '@/types/api/master-data/supplier';
+import { useRouter } from 'next/navigation';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import toast from 'react-hot-toast';
+import {
+  SupplierFormSchema,
+  SupplierFormValues,
+  UpdateSupplierFormSchema,
+} from './SupplierForm.schema';
+import { useFormik } from 'formik';
+import SelectInput, { OptionType } from '@/components/input/SelectInput';
+import { Icon } from '@iconify/react';
+import Button from '@/components/Button';
+import TextInput from '@/components/input/TextInput';
+import TagInput from '@/components/input/TagInput';
+import TextArea from '@/components/input/TextArea';
+import { cn } from '@/lib/helper';
+import ConfirmationModal from '@/components/modal/ConfirmationModal';
+
+interface SupplierCustomProps {
+  formType?: 'add' | 'edit' | 'detail';
+  initialValues?: Supplier;
+}
+
+const SupplierForm = ({
+  formType = 'add',
+  initialValues,
+}: SupplierCustomProps) => {
+  // Setup Kebutuhan Form
+  const router = useRouter();
+  const deleteModal = useModal();
+
+  // Setup State
+  const [supplierFormErrorMessage, setSupplierFormErrorMessage] = useState('');
+  const [isDeleteLoading, setIsDeleteLoading] = useState(false);
+  const [typeSelectInputValue, setTypeSelectInputValue] = useState('');
+  const [categorySelectInputValue, setCategorySelectInputValue] = useState('');
+  const [hatcheryTagInputValue, setHatcheryTagInputValue] = useState('');
+
+  // -- Options data mapping
+  const typeOptions = TYPE_OPTIONS;
+  const categoryOptions = CATEGORY_OPTIONS;
+
+  // Handler Event
+  const createSupplierHandler = useCallback(
+    async (payload: CreateSupplierPayload) => {
+      const createSupplierRes = await SupplierApi.create(payload);
+
+      if (isResponseError(createSupplierRes)) {
+        setSupplierFormErrorMessage(createSupplierRes.message);
+        return;
+      }
+
+      toast.success(createSupplierRes?.message as string);
+      router.push('/master-data/supplier');
+    },
+    [router]
+  );
+
+  const updateSupplierHandler = useCallback(
+    async (supplierId: number, payload: CreateSupplierPayload) => {
+      const updateSupplierRes = await SupplierApi.update(supplierId, payload);
+
+      if (isResponseError(updateSupplierRes)) {
+        setSupplierFormErrorMessage(updateSupplierRes.message);
+        return;
+      }
+
+      toast.success(updateSupplierRes?.message as string);
+      router.push('/master-data/supplier');
+    },
+    [router]
+  );
+
+  const deleteSupplierHandler = () => {
+    deleteModal.openModal();
+  };
+
+  const confirmationModalDeleteclickHandler = async () => {
+    setIsDeleteLoading(true);
+
+    await SupplierApi.delete(initialValues?.id as number);
+
+    deleteModal.closeModal();
+    setIsDeleteLoading(false);
+    router.push('/master-data/supplier');
+  };
+
+  // Utils Functions
+  const normalizeOptionValue = (
+    type?: string | { value: string; label: string },
+    options?: OptionType[]
+  ): { value: string; label: string } => {
+    if (!type && !options) return { value: '', label: '' };
+    if (!type && options && options.length > 0)
+      return options[0] as { value: string; label: string };
+    if (typeof type === 'string') return { value: type, label: type };
+    return type ?? { value: '', label: '' };
+  };
+
+  // Memo
+  console.log('Memo');
+  console.log(initialValues);
+  const formikInitialValues = useMemo<SupplierFormValues>(() => {
+    return {
+      name: initialValues?.name ?? '',
+      alias: initialValues?.alias ?? '',
+      pic: initialValues?.pic ?? '',
+      type: normalizeOptionValue(initialValues?.type, typeOptions),
+      category: normalizeOptionValue(initialValues?.category, categoryOptions),
+      hatchery: initialValues?.hatchery ?? '',
+      phone: initialValues?.phone ?? '',
+      email: initialValues?.email ?? '',
+      address: initialValues?.address ?? '',
+      npwp: initialValues?.npwp ?? '',
+      account_number: initialValues?.account_number ?? '',
+      due_date: initialValues?.due_date ?? 1,
+    };
+  }, [initialValues]);
+
+  // Formik
+  const formik = useFormik<SupplierFormValues>({
+    initialValues: formikInitialValues,
+    enableReinitialize: true,
+    validationSchema:
+      formType === 'edit' ? UpdateSupplierFormSchema : SupplierFormSchema,
+    onSubmit: async (values) => {
+      // reset error message
+      setSupplierFormErrorMessage('');
+
+      // create payload
+      const payload: CreateSupplierPayload = {
+        name: values.name,
+        alias: values.alias,
+        pic: values.pic,
+        type: values.type.value,
+        category: values.category.value,
+        hatchery: values.hatchery,
+        phone: values.phone,
+        email: values.email,
+        address: values.address,
+        npwp: values.npwp,
+        account_number: values.account_number,
+        due_date: parseInt(values.due_date.toString()),
+      };
+
+      // cek type form yang disubmit
+      switch (formType) {
+        case 'add':
+          await createSupplierHandler(payload);
+          break;
+        case 'edit':
+          await updateSupplierHandler(initialValues?.id as number, payload);
+          break;
+        default:
+          break;
+      }
+    },
+  });
+
+  const { setValues: formikSetValues } = formik;
+
+  // Initialize Formik
+  useEffect(() => {
+    formikSetValues(formikInitialValues);
+    setHatcheryTagInputValue(formikInitialValues.hatchery);
+  }, [formikSetValues, formikInitialValues, hatcheryTagInputValue]);
+
+  // Option Handler
+  const typeChangeHandler = (val: OptionType | OptionType[] | null) => {
+    formik.setFieldTouched('type', true);
+    formik.setFieldValue('type', val);
+  };
+  const categoryChangeHandler = (val: OptionType | OptionType[] | null) => {
+    formik.setFieldTouched('category', true);
+    formik.setFieldValue('category', val);
+  };
+
+  // Render
+  return (
+    <>
+      <section className='w-full max-w-xl'>
+        <header className='flex flex-col gap-4'>
+          <Button
+            href='/master-data/supplier'
+            variant='link'
+            className='w-fit p-0 text-primary'
+          >
+            <Icon icon='uil:arrow-left' width={24} height={24} />
+            Kembali
+          </Button>
+
+          <h1 className='text-2xl font-bold text-center'>
+            {formType === 'add' && 'Tambah Supplier'}
+            {formType === 'edit' && 'Ubah Supplier'}
+            {formType === 'detail' && 'Detail Supplier'}
+          </h1>
+        </header>
+
+        <form
+          onSubmit={formik.handleSubmit}
+          onReset={formik.handleReset}
+          className='w-full mt-8 flex flex-col gap-6'
+        >
+          {/* Fields Form */}
+          <div className='flex flex-col gap-4'>
+            <TextInput
+              required
+              label='Nama Supplier'
+              name='name'
+              placeholder='Masukkan nama supplier'
+              value={formik.values.name}
+              onChange={formik.handleChange}
+              onBlur={formik.handleBlur}
+              isError={formik.touched.name && Boolean(formik.errors.name)}
+              errorMessage={formik.errors.name}
+              readOnly={formType === 'detail'}
+            />
+            <TextInput
+              required
+              label='Nama Alias'
+              name='alias'
+              placeholder='Masukkan alias supplier'
+              value={formik.values.alias}
+              onChange={formik.handleChange}
+              onBlur={formik.handleBlur}
+              isError={formik.touched.alias && Boolean(formik.errors.alias)}
+              errorMessage={formik.errors.alias}
+              readOnly={formType === 'detail'}
+            />
+            <TextInput
+              required
+              label='Nama PIC'
+              name='pic'
+              placeholder='Masukkan PIC supplier'
+              value={formik.values.pic}
+              onChange={formik.handleChange}
+              onBlur={formik.handleBlur}
+              isError={formik.touched.pic && Boolean(formik.errors.pic)}
+              errorMessage={formik.errors.pic}
+              readOnly={formType === 'detail'}
+            />
+            <SelectInput
+              required
+              placeholder='Pilih Tipe'
+              label='Tipe'
+              value={
+                typeOptions.find(
+                  (item) => item.value === formik.values.type?.value
+                ) ?? undefined
+              }
+              onChange={typeChangeHandler}
+              options={typeOptions}
+              onInputChange={setTypeSelectInputValue}
+              isError={formik.touched.type && Boolean(formik.errors.type)}
+              errorMessage={formik.errors.type as string}
+              isDisabled={formType === 'detail'}
+              isClearable
+              isSearchable={true}
+            />
+            <SelectInput
+              required
+              placeholder='Pilih Kategori'
+              label='Kategori'
+              value={
+                categoryOptions.find(
+                  (item) => item.value === formik.values.category?.value
+                ) ?? undefined
+              }
+              onChange={categoryChangeHandler}
+              options={categoryOptions}
+              onInputChange={setCategorySelectInputValue}
+              isError={
+                formik.touched.category && Boolean(formik.errors.category)
+              }
+              errorMessage={formik.errors.category as string}
+              isDisabled={formType === 'detail'}
+              isClearable
+              isSearchable={true}
+            />
+            <TagInput
+              name='hatchery'
+              label='Hatchery'
+              value={hatcheryTagInputValue}
+              onChange={(value) => formik.setFieldValue('hatchery', value)}
+              isError={
+                formik.touched.hatchery && Boolean(formik.errors.hatchery)
+              }
+              errorMessage={formik.errors.hatchery}
+              readOnly={formType === 'detail'}
+            />
+            <TextInput
+              required
+              label='Nomor Telepon'
+              name='phone'
+              placeholder='Masukkan nomor telepon supplier'
+              value={formik.values.phone}
+              onChange={formik.handleChange}
+              onBlur={formik.handleBlur}
+              isError={formik.touched.phone && Boolean(formik.errors.phone)}
+              errorMessage={formik.errors.phone}
+              readOnly={formType === 'detail'}
+            />
+            <TextInput
+              required
+              label='Email'
+              name='email'
+              placeholder='Masukkan email supplier'
+              value={formik.values.email}
+              onChange={formik.handleChange}
+              onBlur={formik.handleBlur}
+              isError={formik.touched.email && Boolean(formik.errors.email)}
+              errorMessage={formik.errors.email}
+              readOnly={formType === 'detail'}
+            />
+            <TextArea
+              required
+              label='Alamat'
+              name='address'
+              placeholder='Masukkan alamat supplier'
+              value={formik.values.address}
+              onChange={formik.handleChange}
+              onBlur={formik.handleBlur}
+              isError={formik.touched.address && Boolean(formik.errors.address)}
+              errorMessage={formik.errors.address}
+              readOnly={formType === 'detail'}
+              cols={8}
+            />
+            <TextInput
+              required
+              label='NPWP'
+              name='npwp'
+              placeholder='Masukkan NPWP supplier'
+              value={formik.values.npwp}
+              onChange={formik.handleChange}
+              onBlur={formik.handleBlur}
+              isError={formik.touched.npwp && Boolean(formik.errors.npwp)}
+              errorMessage={formik.errors.npwp}
+              readOnly={formType === 'detail'}
+            />
+            <TextInput
+              required
+              label='Nomor Rekening'
+              name='account_number'
+              placeholder='Masukkan nomor rekening supplier'
+              value={formik.values.account_number}
+              onChange={formik.handleChange}
+              onBlur={formik.handleBlur}
+              isError={
+                formik.touched.account_number &&
+                Boolean(formik.errors.account_number)
+              }
+              errorMessage={formik.errors.account_number}
+              readOnly={formType === 'detail'}
+            />
+            <TextInput
+              required
+              type='number'
+              className={{
+                wrapper: 'w-fit',
+              }}
+              label='Jatuh Tempo'
+              name='due_date'
+              placeholder='Masukkan tanggal pembayaran supplier'
+              value={formik.values.due_date}
+              onChange={formik.handleChange}
+              onBlur={formik.handleBlur}
+              isError={
+                formik.touched.due_date && Boolean(formik.errors.due_date)
+              }
+              errorMessage={formik.errors.due_date}
+              readOnly={formType === 'detail'}
+              endAdornment={<div>Hari</div>}
+            />
+          </div>
+
+          {/* Action Button  */}
+          <div className='flex flex-row justify-between gap-2 flex-wrap'>
+            {formType !== 'add' && (
+              <div className='flex flex-row justify-start gap-2'>
+                <Button
+                  type='button'
+                  color='error'
+                  onClick={deleteSupplierHandler}
+                  className='px-4'
+                >
+                  <Icon
+                    icon='material-symbols:delete-outline-rounded'
+                    width={24}
+                    height={24}
+                    className='justify-start text-sm'
+                  />
+                  Delete
+                </Button>
+
+                {formType !== 'edit' && (
+                  <Button
+                    type='button'
+                    color='warning'
+                    href={`/master-data/supplier/detail/edit/?supplierId=${initialValues?.id}`}
+                    className='px-4'
+                  >
+                    <Icon
+                      icon='material-symbols:edit-outline'
+                      width={24}
+                      height={24}
+                      className='justify-start text-sm'
+                    />
+                    Edit
+                  </Button>
+                )}
+              </div>
+            )}
+
+            {formType !== 'detail' && (
+              <div
+                className={cn('flex flex-row justify-end gap-2', {
+                  'w-full': formType === 'add',
+                })}
+              >
+                <Button type='reset' color='warning' className='px-4'>
+                  Reset
+                </Button>
+
+                <Button
+                  type='submit'
+                  color='primary'
+                  isLoading={formik.isSubmitting}
+                  disabled={!formik.isValid || formik.isSubmitting}
+                  className='px-4'
+                >
+                  Submit
+                </Button>
+              </div>
+            )}
+          </div>
+
+          {supplierFormErrorMessage && (
+            <div role='alert' className='alert alert-error'>
+              <Icon
+                icon='material-symbols:error-outline'
+                width={24}
+                height={24}
+              />
+              <span>{supplierFormErrorMessage}</span>
+            </div>
+          )}
+        </form>
+      </section>
+
+      {formType !== 'add' && (
+        <ConfirmationModal
+          ref={deleteModal.ref}
+          type='error'
+          text={`Apakah anda yakin ingin menghapus data Supplier ini (${initialValues?.name})?`}
+          secondaryButton={{
+            text: 'Tidak',
+          }}
+          primaryButton={{
+            text: 'Ya',
+            color: 'error',
+            onClick: confirmationModalDeleteclickHandler,
+            isLoading: isDeleteLoading,
+          }}
+        />
+      )}
+    </>
+  );
+};
+
+export default SupplierForm;

src/components/pages/master-data/uom/UomsTable.tsx

@@ -192,7 +192,7 @@ const UomsTable = () => {
     } else {
       updateFilter('nameSort', isNameSorted.desc ? 'desc' : 'asc');
     }
-  }, [sorting]);
+  }, [sorting, updateFilter]);
 
   return (
     <>

src/components/pages/master-data/warehouse/WarehousesTable.tsx

@@ -270,7 +270,7 @@ const WarehousesTable = () => {
     updateSortingFilter('areaSort', areaSortFilter);
     updateSortingFilter('locationSort', locationSortFilter);
     updateSortingFilter('kandangSort', kandangSortFilter);
-  }, [sorting]);
+  }, [sorting, updateSortingFilter]);
 
   return (
     <>

src/config/constant.ts

@@ -138,6 +138,28 @@ export const WAREHOUSE_TYPE_OPTIONS = [
   },
 ];
 
+export const TYPE_OPTIONS = [
+  {
+    label: 'INDIVIDUAL',
+    value: 'INDIVIDUAL',
+  },
+  {
+    label: 'BISNIS',
+    value: 'BISNIS',
+  },
+];
+
+export const CATEGORY_OPTIONS = [
+  {
+    label: 'BOP',
+    value: 'BOP',
+  },
+  {
+    label: 'SAPRONAK',
+    value: 'SAPRONAK',
+  },
+];
+
 export const PRODUCT_FLAG_OPTIONS = [
   { label: 'DOC', value: 'DOC' },
   { label: 'PAKAN', value: 'PAKAN' },

src/services/api/master-data.ts

@@ -24,6 +24,11 @@ import {
   UpdateWarehousePayload,
   Warehouse,
 } from '@/types/api/master-data/warehouse';
+import {
+  CreateCustomerPayload,
+  Customer,
+  UpdateCustomerPayload,
+} from '@/types/api/master-data/customer';
 import {
   CreateProductCategoryPayload,
   ProductCategory,
@@ -85,6 +90,11 @@ export const WarehouseApi = new BaseApiService<
   UpdateWarehousePayload
 >('/master-data/warehouses');
 
+export const CustomerApi = new BaseApiService<
+  Customer,
+  CreateCustomerPayload,
+  UpdateCustomerPayload
+>('/master-data/customers');
 export const ProductCategoryApi = new BaseApiService<
   ProductCategory,
   CreateProductCategoryPayload,

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

@@ -0,0 +1,27 @@
+import { BaseMetadata, CreatedUser } from "@/types/api/api-general";
+
+export type BaseCustomer = {
+    id: number;
+    name: string;
+    pic_id: number;
+    pic: CreatedUser;
+    type: string;
+    address: string;
+    phone: string;
+    email: string;
+    account_number: string;
+}
+
+export type Customer = BaseMetadata & BaseCustomer;
+
+export type CreateCustomerPayload = {
+    name: string;
+    pic_id: number;
+    type: string;
+    address: string;
+    phone: string;
+    email: string;
+    account_number: string;
+}
+
+export type UpdateCustomerPayload = CreateCustomerPayload;

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

@@ -4,31 +4,35 @@ export type BaseSupplier = {
     id: number;
     name: string;
     alias: string;
-    category: string;
     pic: string;
     type: string;
+    category: string;
+    hatchery: string;
     phone: string;
     email: string;
     address: string;
+    npwp: string;
     account_number: string;
-    balance: number;
     due_date: number;
-};
+    balance?: number;
+}
 
 export type Supplier = BaseMetadata & BaseSupplier;
 
 export type CreateSupplierPayload = {
     name: string;
     alias: string;
-    category: string;
     pic: string;
     type: string;
+    category: string;
+    hatchery: string;
     phone: string;
     email: string;
     address: string;
+    npwp: string;
     account_number: string;
-    balance: number;
     due_date: number;
-};
+    balance?: number;
+}
 
 export type UpdateSupplierPayload = CreateSupplierPayload;