chore: prettier format

src/components/Tabs.tsx

@@ -0,0 +1,129 @@
+import { HTMLAttributes, ReactNode, useEffect, useState } from 'react';
+import { cn } from '@/lib/helper';
+
+export interface TabItem {
+  id: string;
+  label: ReactNode;
+  content?: ReactNode;
+  disabled?: boolean;
+}
+
+export interface TabsProps
+  extends Omit<HTMLAttributes<HTMLDivElement>, 'className'> {
+  tabs: TabItem[];
+  variant?: 'bordered' | 'lifted' | 'boxed';
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  placement?: 'top' | 'bottom';
+  /** Tab yang aktif secara default (uncontrolled mode) */
+  defaultActiveId?: string;
+  /** Tab yang aktif (controlled mode, dikontrol parent) */
+  activeTabId?: string;
+  className?:
+    | string
+    | {
+        wrapper?: string;
+        tab?: string;
+        content?: string;
+      };
+  onTabChange?: (tabId: string) => void;
+}
+
+const Tabs = ({
+  tabs,
+  variant,
+  size = 'md',
+  placement = 'top',
+  defaultActiveId,
+  activeTabId: controlledActiveId,
+  className,
+  onTabChange,
+  ...props
+}: TabsProps) => {
+  // State internal hanya dipakai kalau `activeTabId` (controlled) tidak diset
+  const [uncontrolledActiveId, setUncontrolledActiveId] = useState(
+    defaultActiveId || tabs[0]?.id || ''
+  );
+
+  const isControlled = controlledActiveId !== undefined;
+  const activeTabId = isControlled ? controlledActiveId : uncontrolledActiveId;
+
+  const handleTabChange = (tabId: string) => {
+    if (tabId === activeTabId) return;
+    if (!isControlled) setUncontrolledActiveId(tabId);
+    onTabChange?.(tabId);
+  };
+
+  const { wrapper: wrapperClassName, tab: tabClassName } =
+    typeof className === 'object'
+      ? className
+      : { wrapper: className, tab: undefined };
+
+  const getTabsClasses = () => {
+    const variantClasses: Record<string, string> = {
+      bordered: 'tabs-bordered',
+      lifted: 'tabs-lift',
+      boxed: 'tabs-box',
+    };
+
+    const sizeClasses: Record<string, string> = {
+      xs: 'tabs-xs',
+      sm: 'tabs-sm',
+      md: '',
+      lg: 'tabs-lg',
+      xl: 'tabs-xl',
+    };
+
+    const placementClasses: Record<string, string> = {
+      top: '',
+      bottom: 'tabs-bottom',
+    };
+
+    return cn(
+      'tabs',
+      variant && variantClasses[variant],
+      sizeClasses[size],
+      placementClasses[placement],
+      wrapperClassName
+    );
+  };
+
+  const getTabClasses = (isActive: boolean, isDisabled?: boolean) =>
+    cn(
+      'tab',
+      {
+        'tab-active': isActive,
+        'tab-disabled': isDisabled,
+      },
+      tabClassName
+    );
+
+  const activeContent = tabs.find((tab) => tab.id === activeTabId)?.content;
+
+  return (
+    <div
+      {...props}
+      className={cn(
+        'w-full',
+        typeof className === 'string' ? className : undefined
+      )}
+    >
+      <div role='tablist' className={getTabsClasses()}>
+        {tabs.map(({ id, label, disabled }) => (
+          <button
+            key={id}
+            role='tab'
+            className={getTabClasses(id === activeTabId, disabled)}
+            onClick={() => !disabled && handleTabChange(id)}
+            disabled={disabled}
+          >
+            {label}
+          </button>
+        ))}
+      </div>
+
+      {activeContent && <div className='mt-4'>{activeContent}</div>}
+    </div>
+  );
+};
+
+export default Tabs;

src/components/helper/form/FormHeader.tsx

@@ -2,15 +2,27 @@ import Button from '@/components/Button';
 import { Icon } from '@iconify/react';
 
 interface FormHeaderProps {
-  type: 'add' | 'edit' | 'detail';
+  type?: 'add' | 'edit' | 'detail';
   title: string;
-  backUrl: string;
+  backUrl?: string;
+  onBackClick?: () => void;
 }
 
-export const FormHeader = ({ type, title, backUrl }: FormHeaderProps) => {
+export const FormHeader = ({
+  type,
+  title,
+  backUrl,
+  onBackClick,
+}: FormHeaderProps) => {
   return (
     <header className='flex flex-col gap-4'>
-      <Button href={backUrl} variant='link' className='w-fit p-0 text-primary'>
+      <Button
+        type='button'
+        href={!onBackClick ? backUrl : undefined}
+        onClick={onBackClick}
+        variant='link'
+        className='w-fit p-0 text-primary'
+      >
         <Icon icon='uil:arrow-left' width={24} height={24} />
         Kembali
       </Button>
@@ -18,6 +30,7 @@ export const FormHeader = ({ type, title, backUrl }: FormHeaderProps) => {
         {type === 'add' && `Tambah ${title}`}
         {type === 'edit' && `Edit ${title}`}
         {type === 'detail' && `Detail ${title}`}
+        {!type && title}
       </h1>
     </header>
   );

src/components/input/PatternInput.tsx

@@ -1,58 +1,88 @@
 'use client';
 
 import { ChangeEvent } from 'react';
-import { PatternFormat, OnValueChange } from 'react-number-format';
+import {
+  PatternFormat,
+  NumberFormatBase,
+  NumberFormatBaseProps,
+  OnValueChange,
+} from 'react-number-format';
 import TextInput, { TextInputProps } from '@/components/input/TextInput';
 
 interface PatternInputProps extends Omit<TextInputProps, 'type'> {
-  type?: 'password' | 'tel' | 'text' | undefined;
-
-  /** Format pattern, e.g. "##/##/####", "(###) ###-####", "####-####-####" */
+  /**
+   * Format pattern, contoh: "##/##/####", "(###) ###-####", "####-####-####"
+   */
   format: string;
-
-  /** Mask character for empty slots, e.g. "_" */
+  /** Mask karakter kosong, misal "_" */
   mask?: string;
-
-  /** Allow showing mask even when value is empty */
+  /** Menampilkan mask walau value kosong */
   allowEmptyFormatting?: boolean;
-
+  /** Placeholder karakter format, default: "#" */
   patternChar?: string;
+  /** Jika true, izinkan huruf (A-Z) selain angka */
+  inputVehicleNumber?: boolean;
+  type?: 'text' | 'password' | 'tel';
 }
 
+/**
+ * PatternInput – tetap backward-compatible dengan Storybook
+ * tapi bisa menerima huruf jika `allowCharacters={true}`
+ */
 const PatternInput = ({
   type = 'text',
   format,
   mask = '_',
   allowEmptyFormatting = false,
   patternChar = '#',
+  inputVehicleNumber = false,
   onChange,
   ...restProps
 }: PatternInputProps) => {
-  const valueChangeHandler: OnValueChange = (
-    patternFormatValues,
-    sourceInfo
-  ) => {
-    const newChangeEvent = sourceInfo.event as
-      | ChangeEvent<HTMLInputElement>
-      | undefined;
-
-    if (newChangeEvent) {
-      newChangeEvent.target.value = patternFormatValues.value;
-
-      onChange?.(newChangeEvent);
+  const handleValueChange: OnValueChange = (values, { event }) => {
+    const newEvent = event as ChangeEvent<HTMLInputElement> | undefined;
+    if (newEvent) {
+      newEvent.target.value = values.value.toUpperCase();
+      onChange?.(newEvent);
     }
   };
 
+  if (inputVehicleNumber) {
+    return (
+      <NumberFormatBase
+        {...restProps}
+        type={type}
+        customInput={TextInput}
+        format={(value) => {
+          const clean = value.replace(/[^a-z0-9]/gi, '').toUpperCase();
+
+          const match = clean.match(/^([A-Z]{0,2})(\d{0,4})([A-Z]{0,3})$/);
+          if (!match) return clean;
+          const [, prefix, number, suffix] = match;
+          return [prefix, number, suffix].filter(Boolean).join(' ');
+        }}
+        removeFormatting={(val) => val.replace(/\s+/g, '')}
+        isValidInputCharacter={(char) => /^[a-z0-9]$/i.test(char)}
+        getCaretBoundary={(val) =>
+          Array(val.length + 1)
+            .fill(true)
+            .map(Boolean)
+        }
+        onValueChange={handleValueChange}
+      />
+    );
+  }
+
   return (
     <PatternFormat
+      {...restProps}
       type={type}
       format={format}
       mask={mask}
       allowEmptyFormatting={allowEmptyFormatting}
       patternChar={patternChar}
       customInput={TextInput}
-      onValueChange={valueChangeHandler}
-      {...restProps}
+      onValueChange={handleValueChange}
     />
   );
 };

src/components/input/SelectInput.tsx

@@ -1,8 +1,6 @@
 'use client';
 
 import { ComponentType, ReactNode, useEffect, useMemo, useState } from 'react';
-import useSWR from 'swr';
-
 import Select, {
   OptionProps,
   GroupBase,
@@ -16,9 +14,10 @@ import CreatableSelect from 'react-select/creatable';
 import makeAnimated from 'react-select/animated';
 import { useDebounce } from 'use-debounce';
 import { cn, getByPath } from '@/lib/helper';
+import useSWR from 'swr';
 import { httpClientFetcher } from '@/services/http/client';
-import { isResponseSuccess } from '@/lib/api-helper';
 import { BaseApiResponse } from '@/types/api/api-general';
+import { isResponseSuccess } from '@/lib/api-helper';
 
 export interface OptionType {
   value: string | number;
@@ -56,6 +55,7 @@ interface SelectInputBaseProps<T = OptionType> {
   delay?: number;
   onInputChange?: (search: string) => void;
   startAdornment?: ReactNode;
+  menuPortalTarget?: HTMLElement | null;
 }
 
 interface SelectInputProps<T = OptionType> extends SelectInputBaseProps<T> {
@@ -118,6 +118,7 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
     createables = false,
     onInputChange,
     startAdornment,
+    menuPortalTarget,
   } = props;
 
   const [internalInputValue, setInternalInputValue] = useState('');
@@ -187,7 +188,7 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
 
       <SelectComponent<T, boolean, GroupBase<T>>
         instanceId='select'
-        value={value ?? (isMulti ? [] : undefined)}
+        value={value ?? (isMulti ? [] : null)}
         onChange={onChange ? handleChange : undefined}
         options={options}
         menuIsOpen={openMenu}
@@ -232,7 +233,7 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
             cn('border border-gray-200 rounded! bg-base-100 shadow-lg!'),
           menuList: () => cn('p-2! max-h-60 overflow-auto'),
           option: ({ isFocused, isSelected }) =>
-            cn('mt-1 px-3 py-2 rounded cursor-pointer!', {
+            cn('mt-1 px-3 py-2 rounded-md cursor-pointer!', {
               'bg-indigo-600 text-white': isFocused,
               'bg-blue-500!': isSelected,
               'text-gray-700': !isFocused && !isSelected,
@@ -258,7 +259,9 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
           startAdornment,
         })}
         menuPortalTarget={
-          typeof document !== 'undefined' ? document.body : undefined
+          typeof document !== 'undefined'
+            ? (menuPortalTarget ?? document.body)
+            : undefined
         }
         styles={{
           menuPortal: (base) => ({ ...base, zIndex: 9999 }),
@@ -275,8 +278,8 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
 
 const useSelect = <T,>(
   basePath: string,
-  valueKey: keyof T,
-  labelKey: keyof T,
+  valueKey: keyof T | string,
+  labelKey: keyof T | string,
   searchKey: string = 'search',
   params?: { [key: string]: string }
 ) => {
@@ -287,7 +290,7 @@ const useSelect = <T,>(
       [searchKey]: inputValue ?? '',
       ...params,
     }).toString();
-  }, [inputValue, searchKey]);
+  }, [inputValue, searchKey, params]);
 
   const optionsUrl = `${basePath}?${optionsUrlParams}`;
 

src/components/pages/ApprovalSteps.tsx

@@ -4,8 +4,16 @@ import StepItem from '@/components/steps/StepItem';
 import Tooltip from '@/components/Tooltip';
 
 import { cn, formatDate } from '@/lib/helper';
-import { BaseApproval, BaseGroupedApproval } from '@/types/api/api-general';
+import {
+  BaseApiResponse,
+  BaseApproval,
+  BaseGroupedApproval,
+} from '@/types/api/api-general';
 import { ApprovalLine } from '@/types/config/constant';
+import useSWR from 'swr';
+import { httpClientFetcher } from '@/services/http/client';
+import { isResponseSuccess } from '@/lib/api-helper';
+import { useCallback, useMemo } from 'react';
 
 export type ApprovalStepStatus = 'APPROVED' | 'REJECTED' | 'WAITING' | 'IDLE';
 
@@ -120,7 +128,7 @@ export const formatGroupedApprovalsToApprovalSteps = (
 
       const currentStepNumber = approvalLineItem.step_number;
       const lastStepNumber =
-        groupedApprovals[groupedApprovals.length - 1].step_number;
+        groupedApprovals[groupedApprovals.length - 1]?.step_number;
 
       if (!approvalGroup && currentStepNumber <= lastStepNumber) {
         throw new Error(
@@ -144,22 +152,24 @@ export const formatGroupedApprovalsToApprovalSteps = (
         };
       }
 
-      let approvalStatus: ApprovalStepStatus;
+      let approvalStatus: ApprovalStepStatus = 'IDLE';
 
       if (approvalGroup.step_number <= latestApproval.step_number) {
-        switch (approvalGroup.approvals[0].action) {
-          case 'CREATED':
-          case 'APPROVED':
-            approvalStatus = 'APPROVED';
-            break;
+        if (approvalGroup.approvals) {
+          switch (approvalGroup?.approvals[0]?.action) {
+            case 'CREATED':
+            case 'APPROVED':
+              approvalStatus = 'APPROVED';
+              break;
 
-          case 'REJECTED':
-            approvalStatus = 'REJECTED';
-            break;
+            case 'REJECTED':
+              approvalStatus = 'REJECTED';
+              break;
 
-          default:
-            approvalStatus = 'IDLE';
-            break;
+            default:
+              approvalStatus = 'IDLE';
+              break;
+          }
         }
       } else if (approvalGroup.step_number === latestApproval.step_number + 1) {
         approvalStatus = 'WAITING';
@@ -167,13 +177,13 @@ export const formatGroupedApprovalsToApprovalSteps = (
         approvalStatus = 'IDLE';
       }
 
-      const approvalLogs: ApprovalStepLog[] = approvalGroup.approvals.map(
-        (approval) => ({
-          action_by: approval.action_by.name,
-          date: approval.action_at,
-          notes: approval.notes,
-        })
-      );
+      const approvalLogs: ApprovalStepLog[] = approvalGroup.approvals
+        ? approvalGroup.approvals.map((approval) => ({
+            action_by: approval.action_by.name,
+            date: approval.action_at,
+            notes: approval.notes,
+          }))
+        : [];
 
       return {
         name: approvalGroup.step_name,
@@ -186,3 +196,178 @@ export const formatGroupedApprovalsToApprovalSteps = (
 };
 
 export default ApprovalSteps;
+
+/**
+ * Mengubah array BaseApproval (datar) menjadi BaseGroupedApproval (berkelompok).
+ */
+const groupApprovalsByStep = (
+  approvals: BaseApproval[]
+): BaseGroupedApproval[] => {
+  const groups: Record<number, BaseGroupedApproval> = {};
+  for (const approval of approvals) {
+    if (!groups[approval.step_number]) {
+      groups[approval.step_number] = {
+        step_number: approval.step_number,
+        step_name: approval.step_name,
+        approvals: [],
+      };
+    }
+    groups[approval.step_number].approvals.push(approval);
+  }
+  return Object.values(groups);
+};
+
+/**
+ * Mengubah array BaseGroupedApproval (berkelompok) kembali menjadi BaseApproval[] (datar).
+ */
+const flattenGroupedApprovals = (
+  groupedApprovals: BaseGroupedApproval[]
+): BaseApproval[] => {
+  return groupedApprovals.flatMap((group) => group.approvals);
+};
+
+/**
+ * Type guard untuk memeriksa apakah data adalah BaseGroupedApproval[].
+ */
+const isGroupedApprovalData = (
+  data: BaseApproval[] | BaseGroupedApproval[]
+): data is BaseGroupedApproval[] => {
+  if (!data || data.length === 0) {
+    return true;
+  }
+  const firstElement = data[0];
+  return (
+    typeof firstElement === 'object' &&
+    firstElement !== null &&
+    'approvals' in firstElement &&
+    Array.isArray(firstElement.approvals)
+  );
+};
+
+const useApprovalSteps = ({
+  latestApproval,
+  approvalLines,
+  moduleName,
+  moduleId,
+  params,
+}: {
+  latestApproval: BaseApproval | undefined;
+  approvalLines: ApprovalLine;
+  moduleName: string;
+  moduleId: string;
+  params?: {
+    page: number;
+    limit: number;
+    search?: string;
+    group_step_number?: boolean;
+  };
+}) => {
+  // Membuat URL Parameters
+  const paramString = new URLSearchParams({
+    page: params?.page?.toString() || '',
+    limit: params?.limit?.toString() || '',
+    search: params?.search || '',
+  }).toString();
+
+  // fetching data approvals
+  const SWR_KEY_APPROVALS =
+    moduleName && moduleId
+      ? `/approvals?module_name=${moduleName}&module_id=${moduleId}${
+          params ? `&${paramString}` : ''
+        }`
+      : null;
+
+  const {
+    data: approvalData,
+    isLoading: approvalIsLoading,
+    mutate: mutateApprovals,
+  } = useSWR(SWR_KEY_APPROVALS, async (url) => {
+    return await httpClientFetcher<
+      BaseApiResponse<BaseApproval[] | BaseGroupedApproval[]>
+    >(url);
+  });
+
+  // Fungsi Refresh
+  const refresh = useCallback(async () => {
+    await mutateApprovals();
+  }, [mutateApprovals]);
+
+  const { groupedApprovals } = useMemo(() => {
+    const rawData = isResponseSuccess(approvalData)
+      ? approvalData.data
+      : undefined;
+
+    let processedGroupedApprovals: BaseGroupedApproval[] = [];
+
+    if (rawData) {
+      if (isGroupedApprovalData(rawData)) {
+        processedGroupedApprovals = rawData;
+      } else {
+        processedGroupedApprovals = groupApprovalsByStep(
+          rawData as BaseApproval[]
+        );
+      }
+    }
+
+    return {
+      groupedApprovals: processedGroupedApprovals,
+    };
+  }, [approvalData]);
+
+  const isLoading = approvalIsLoading;
+
+  // Formatting Akhir
+  const approvals = useMemo(() => {
+    if (isLoading || !approvalLines.length || !latestApproval) {
+      return [];
+    }
+    try {
+      return formatGroupedApprovalsToApprovalSteps(
+        approvalLines,
+        groupedApprovals,
+        latestApproval
+      );
+    } catch (error) {
+      console.warn('Gagal memformat approval steps:', error);
+      return [];
+    }
+  }, [isLoading, approvalLines, groupedApprovals, latestApproval]);
+
+  // Raw Data Approvals
+  const rawDataApprovals = useMemo(() => {
+    const rawData = isResponseSuccess(approvalData)
+      ? approvalData.data
+      : undefined;
+
+    if (!rawData) {
+      return undefined;
+    }
+
+    const isDataCurrentlyGrouped = isGroupedApprovalData(rawData);
+    const wantsGrouped = params?.group_step_number !== false;
+
+    if (wantsGrouped) {
+      if (isDataCurrentlyGrouped) {
+        return rawData as BaseGroupedApproval[];
+      } else {
+        return groupApprovalsByStep(rawData as BaseApproval[]);
+      }
+    } else {
+      if (isDataCurrentlyGrouped) {
+        return flattenGroupedApprovals(rawData as BaseGroupedApproval[]);
+      } else {
+        return rawData as BaseApproval[];
+      }
+    }
+  }, [approvalData, params?.group_step_number]);
+
+  // Return Hook
+  return {
+    approvals,
+    isLoading,
+    rawDataApprovals: rawDataApprovals,
+    refresh,
+  };
+};
+
+export { useApprovalSteps };

src/components/pages/marketing/sales-orders/SalesOrderTable.tsx

@@ -0,0 +1,406 @@
+'use client';
+
+import Button from '@/components/Button';
+import CheckboxInput from '@/components/input/CheckboxInput';
+import { OptionType } from '@/components/input/SelectInput';
+import Modal, { 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 { TableRowSizeSelector } from '@/components/table/TableRowSizeSelector';
+import { TableToolbar } from '@/components/table/TableToolbar';
+import { ROWS_OPTIONS } from '@/config/constant';
+import { isResponseSuccess } from '@/lib/api-helper';
+import { cn, formatCurrency, formatVechicleNumber } from '@/lib/helper';
+import { MarketingApi } from '@/services/api/marketing/marketing';
+import { useTableFilter } from '@/services/hooks/useTableFilter';
+import { Marketing, MarketingProduct } from '@/types/api/marketing/marketing';
+import { Customer } from '@/types/api/master-data/customer';
+import { Icon } from '@iconify/react';
+import { CellContext } from '@tanstack/react-table';
+import { useCallback, useState } from 'react';
+import useSWR from 'swr';
+
+const RowsOptionsMenu = ({
+  type = 'dropdown',
+  props,
+  deleteClickHandler,
+}: {
+  type: 'dropdown' | 'collapse';
+  props: CellContext<Marketing, 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 bg-base-100 rounded-box z-10 border border-black/10 shadow'
+      )}
+    >
+      <div className='flex flex-col gap-1'>
+        <Button
+          href={`/marketing/sales-orders/detail/?salesOrderId=${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={`/marketing/sales-orders/detail/edit/?salesOrderId=${props.row.original.id}`}
+          variant='ghost'
+          color='warning'
+          className='justify-start text-sm'
+        >
+          <Icon icon='mdi:pencil-outline' width={16} height={16} />
+          Edit
+        </Button>
+        <Button
+          onClick={deleteClickHandler}
+          variant='ghost'
+          color='error'
+          className='text-error hover:text-inherit justify-start text-sm'
+        >
+          <Icon icon='mdi:delete-outline' width={16} height={16} />
+          Delete
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+const SalesOrderTable = () => {
+  const [search, setSearch] = useState('');
+  const [page, setPage] = useState(1);
+  const [pageSize, setPageSize] = useState(10);
+
+  const [approveAction, setApproveAction] = useState<
+    'approve' | 'reject' | null
+  >(null);
+  const [selectedItem, setSelectedItem] = useState<Marketing | null>(null);
+  const [rowSelection, setRowSelection] = useState<Record<string, boolean>>({});
+  const selectedRowIds = Object.keys(rowSelection).filter(
+    (id) => rowSelection[id]
+  );
+
+  const {
+    data: marketing,
+    isLoading: isLoadingMarketing,
+    mutate: refreshMarketing,
+  } = useSWR(MarketingApi.basePath, MarketingApi.getAllFetcher);
+
+  const deleteModal = useModal();
+  const confirmationModal = useModal();
+  const productsModal = useModal();
+
+  const searchChangeHandler = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      setSearch(e.target.value);
+      setPage(1);
+    },
+    []
+  );
+  const pageSizeChangeHandler = useCallback(
+    (val: OptionType | OptionType[] | null) => {
+      const newVal = val as OptionType;
+      setPageSize(newVal.value as number);
+      setPage(1);
+    },
+    []
+  );
+
+  const approveClickHandler = () => {
+    setApproveAction('approve');
+    confirmationModal.openModal();
+  };
+
+  const rejectClickHandler = () => {
+    setApproveAction('reject');
+    confirmationModal.openModal();
+  };
+
+  const productsClickHandler = (item: Marketing) => {
+    setSelectedItem(item);
+    productsModal.openModal();
+  };
+
+  const {
+    state: tableFilterState,
+    updateFilter,
+    toQueryString: getTableFilterToQueryString,
+  } = useTableFilter({
+    initial: {
+      search: '',
+    },
+    paramMap: {
+      page: 'page',
+      pageSize: 'limit',
+    },
+  });
+
+  return (
+    <>
+      <div className='flex flex-col gap-4'>
+        <div className='flex flex-col gap-2 mb-4'>
+          <TableToolbar
+            addButton={{
+              href: '/marketing/sales-orders/add',
+              label: 'Tambah Sales Order',
+            }}
+            search={{
+              value: search,
+              onChange: searchChangeHandler,
+              placeholder: 'Cari Sales Order',
+            }}
+          />
+          <TableRowSizeSelector
+            value={pageSize}
+            onChange={pageSizeChangeHandler}
+            options={ROWS_OPTIONS}
+          />
+          <div className='flex flex-row gap-2'>
+            <Button
+              color='success'
+              onClick={approveClickHandler}
+              className='justify-start text-sm'
+              disabled={!selectedRowIds.length}
+            >
+              <Icon icon='material-symbols:check' width={24} height={24} />
+              Approve
+            </Button>
+
+            <Button
+              color='error'
+              onClick={rejectClickHandler}
+              className='justify-start text-sm'
+              disabled={!selectedRowIds.length}
+            >
+              <Icon icon='material-symbols:close' width={24} height={24} />
+              Reject
+            </Button>
+          </div>
+        </div>
+        <Table
+          rowSelection={rowSelection}
+          setRowSelection={setRowSelection}
+          data={isResponseSuccess(marketing) ? marketing.data : []}
+          columns={[
+            {
+              id: 'select',
+              header: ({ table }) => (
+                <div className='w-full flex flex-row justify-center'>
+                  <CheckboxInput
+                    name='allRow'
+                    checked={table.getIsAllRowsSelected()}
+                    indeterminate={table.getIsSomeRowsSelected()}
+                    onChange={table.getToggleAllRowsSelectedHandler()}
+                  />
+                </div>
+              ),
+              cell: ({ row }) => (
+                <div>
+                  <CheckboxInput
+                    name='row'
+                    checked={row.getIsSelected()}
+                    disabled={!row.getCanSelect()}
+                    indeterminate={row.getIsSomeSelected()}
+                    onChange={row.getToggleSelectedHandler()}
+                  />
+                </div>
+              ),
+            },
+            {
+              accessorKey: 'so_number',
+              header: 'No. Order',
+            },
+            {
+              accessorKey: 'so_date',
+              header: 'Tanggal',
+            },
+            {
+              accessorKey: 'approval.step_name',
+              header: 'Status',
+            },
+            {
+              accessorKey: 'customer.name',
+              header: 'Customer',
+            },
+            {
+              accessorKey: 'grand_total',
+              header: 'Grand Total',
+            },
+            {
+              accessorKey: 'marketing_products.length',
+              header: 'Product Details',
+              cell: (props) => {
+                if (props?.row?.original?.marketing_products?.length) {
+                  if (props?.row?.original?.marketing_products?.length > 1) {
+                    return (
+                      <Button
+                        variant='link'
+                        color='success'
+                        className='p-0 text-none'
+                        onClick={() => {
+                          productsClickHandler(props?.row?.original);
+                        }}
+                      >
+                        Lihat {props?.row?.original?.marketing_products?.length}{' '}
+                        Produk
+                      </Button>
+                    );
+                  } else {
+                    const product = props?.row?.original?.marketing_products[0];
+                    return <>{product?.product_warehouse?.product?.name}</>;
+                  }
+                }
+              },
+            },
+            {
+              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 = () => {};
+
+                return (
+                  <>
+                    {currentPageSize > 2 && (
+                      <RowDropdownOptions isLast2Rows={isLast2Rows}>
+                        <RowsOptionsMenu
+                          type='dropdown'
+                          props={props}
+                          deleteClickHandler={deleteClickHandler}
+                        />
+                      </RowDropdownOptions>
+                    )}
+
+                    {currentPageSize <= 2 && (
+                      <RowCollapseOptions>
+                        <RowsOptionsMenu
+                          type='collapse'
+                          props={props}
+                          deleteClickHandler={deleteClickHandler}
+                        />
+                      </RowCollapseOptions>
+                    )}
+                  </>
+                );
+              },
+            },
+          ]}
+          pageSize={pageSize}
+          page={page}
+          onPageChange={setPage}
+          className={{
+            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 Project Flock ini?`}
+        secondaryButton={{
+          text: 'Tidak',
+        }}
+        primaryButton={{
+          text: 'Ya',
+          color: 'error',
+        }}
+      />
+
+      <ConfirmationModal
+        ref={confirmationModal.ref}
+        type={approveAction === 'approve' ? 'success' : 'error'}
+        text={`Apakah anda yakin ingin ${approveAction} data penjualan (${selectedRowIds.length} data)?`}
+        secondaryButton={{
+          text: 'Tidak',
+        }}
+        primaryButton={{
+          text: 'Ya',
+          color: approveAction === 'approve' ? 'success' : 'error',
+        }}
+      />
+
+      <Modal
+        ref={productsModal.ref}
+        className={{
+          modalBox: 'max-w-2/5 z-100',
+        }}
+        closeOnBackdrop
+      >
+        <div className='flex flex-row justify-between items-center mb-3'>
+          <h4 className='text-xl font-semibold'>Daftar Produk</h4>
+          <Button
+            variant='ghost'
+            color='error'
+            onClick={productsModal.closeModal}
+            className='justify-start text-sm rounded-full'
+          >
+            <Icon icon='mdi:close' width={16} height={16} />
+          </Button>
+        </div>
+        <Table<MarketingProduct>
+          data={
+            isResponseSuccess(marketing) && selectedItem
+              ? (selectedItem?.marketing_products ?? [])
+              : []
+          }
+          columns={[
+            {
+              header: 'Kandang',
+              accessorFn(row) {
+                return row.product_warehouse.warehouse.name;
+              },
+            },
+            {
+              header: 'Produk',
+              accessorFn(row) {
+                return row.product_warehouse.product.name;
+              },
+            },
+            {
+              header: 'Harga Satuan (Rp)',
+              accessorFn(row) {
+                return formatCurrency(row.unit_price);
+              },
+            },
+          ]}
+          className={{
+            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',
+            paginationClassName: 'hidden',
+          }}
+        />
+      </Modal>
+    </>
+  );
+};
+export default SalesOrderTable;

src/components/pages/marketing/sales-orders/detail/SalesOrderDetail.tsx

@@ -0,0 +1,308 @@
+'use client';
+
+import Button from '@/components/Button';
+import Card from '@/components/Card';
+import { FormHeader } from '@/components/helper/form/FormHeader';
+import { useModal } from '@/components/Modal';
+import ConfirmationModal from '@/components/modal/ConfirmationModal';
+import Table from '@/components/Table';
+import {
+  cn,
+  formatCurrency,
+  formatNumber,
+  formatVechicleNumber,
+} from '@/lib/helper';
+import { MarketingApi } from '@/services/api/marketing/marketing';
+import { Marketing, MarketingProduct } from '@/types/api/marketing/marketing';
+import { Icon } from '@iconify/react';
+import { useState } from 'react';
+import toast from 'react-hot-toast';
+
+const SalesOrderDetail = ({
+  initialValues,
+  refreshValues,
+}: {
+  initialValues?: Marketing;
+  refreshValues?: () => void;
+}) => {
+  const [approvalAction, setApprovalAction] = useState<'approve' | 'reject'>(
+    'approve'
+  );
+  const [isLoading, setIsLoading] = useState(false);
+
+  const deleteModal = useModal();
+  const confirmationModal = useModal();
+  const deliveryModal = useModal();
+
+  const approveClickHandler = () => {
+    setApprovalAction('approve');
+    confirmationModal.openModal();
+  };
+
+  const rejectClickHandler = () => {
+    setApprovalAction('reject');
+    confirmationModal.openModal();
+  };
+
+  const deliveryClickHandler = () => {
+    deliveryModal.openModal();
+  };
+
+  const deleteClickHandler = () => {
+    deleteModal.openModal();
+  };
+
+  const confirmationModalDeleteClickHandler = async () => {
+    setIsLoading(true);
+    // await MarketingApi.delete(initialValues?.id as number);
+    setIsLoading(false);
+    deleteModal.closeModal();
+    toast.success('Successfully deleted Sales Order!');
+    refreshValues?.();
+  };
+
+  const confirmationModalApproveClickHandler = async () => {
+    setIsLoading(true);
+    // await MarketingApi.singleApproval(
+    //   initialValues?.id as number,
+    //   approvalAction
+    // );
+    setIsLoading(false);
+    confirmationModal.closeModal();
+    toast.success('Successfully approved Sales Order!');
+    refreshValues?.();
+  };
+
+  const confirmationModalDeliveryClickHandler = async () => {
+    setIsLoading(true);
+    // await MarketingApi.delivery(initialValues?.id as number);
+    setIsLoading(false);
+    deliveryModal.closeModal();
+    toast.success('Successfully delivered Sales Order!');
+    refreshValues?.();
+  };
+
+  return (
+    <>
+      <div className='flex flex-col w-full gap-4'>
+        <FormHeader
+          title='Detail Sales Order'
+          backUrl='/marketing/sales-orders'
+        />
+        <div className='flex-row flex gap-3'>
+          {initialValues?.approval?.step_number != 3 && (
+            <>
+              <Button
+                color='success'
+                onClick={approveClickHandler}
+                disabled={initialValues?.approval?.step_number != 1}
+              >
+                <Icon icon='mdi:check' width={24} height={24} />
+                Approve
+              </Button>
+              <Button
+                color='error'
+                onClick={rejectClickHandler}
+                disabled={initialValues?.approval?.step_number != 2}
+              >
+                <Icon icon='mdi:close' width={24} height={24} />
+                Reject
+              </Button>
+            </>
+          )}
+          {initialValues?.approval?.step_number == 2 && (
+            <Button color='success' onClick={deliveryClickHandler}>
+              <Icon icon='mdi:check' width={24} height={24} />
+              Delivery Order
+            </Button>
+          )}
+        </div>
+        <Card
+          title='Informasi Sales Order'
+          className={{
+            wrapper: 'w-full bg-white',
+          }}
+        >
+          <div className='overflow-x-auto rounded-box border border-base-content/5 bg-base-100 mt-3'>
+            <table className='table'>
+              <tbody>
+                <tr>
+                  <td width='45%' className='font-semibold'>
+                    No. Sales Order
+                  </td>
+                  <td>:</td>
+                  <td width='50%'>{initialValues?.so_number}</td>
+                </tr>
+                <tr>
+                  <td className='font-semibold'>Nama Pelanggan</td>
+                  <td>:</td>
+                  <td>{initialValues?.customer?.name}</td>
+                </tr>
+                <tr>
+                  <td className='font-semibold'>Status</td>
+                  <td>:</td>
+                  <td>{initialValues?.approval?.step_name}</td>
+                </tr>
+                <tr>
+                  <td className='font-semibold'>Tanggal Penjualan</td>
+                  <td>:</td>
+                  <td>{initialValues?.so_date}</td>
+                </tr>
+                <tr>
+                  <td className='font-semibold'>Total Penjualan</td>
+                  <td>:</td>
+                  <td>
+                    {formatCurrency(initialValues?.grand_total as number)}
+                  </td>
+                </tr>
+                <tr>
+                  <td className='font-semibold'>Catatan</td>
+                  <td>:</td>
+                  <td>{initialValues?.notes ?? '-'}</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </Card>
+        {initialValues?.marketing_products && (
+          <Card
+            title='Daftar Produk'
+            className={{
+              wrapper: 'w-full bg-white',
+            }}
+          >
+            <Table<MarketingProduct>
+              data={initialValues?.marketing_products}
+              columns={[
+                {
+                  header: 'No. Polisi',
+                  accessorFn(row) {
+                    return formatVechicleNumber(
+                      row.marketing_delivery_products?.vehicle_number as string
+                    );
+                  },
+                },
+                {
+                  header: 'Kandang',
+                  accessorFn(row) {
+                    return row.product_warehouse.warehouse.name;
+                  },
+                },
+                {
+                  header: 'Produk',
+                  accessorFn(row) {
+                    return row.product_warehouse.product.name;
+                  },
+                },
+                {
+                  header: 'Harga Satuan (Rp)',
+                  accessorFn(row) {
+                    return formatCurrency(row.unit_price);
+                  },
+                },
+                {
+                  header: 'Total Bobot (Kg)',
+                  accessorFn(row) {
+                    return formatNumber(row.total_weight);
+                  },
+                },
+                {
+                  header: 'Kuantitas',
+                  accessorFn(row) {
+                    return formatNumber(row.qty);
+                  },
+                },
+                {
+                  header: 'Avg. Bobot (Kg)',
+                  accessorFn(row) {
+                    return formatNumber(row.avg_weight);
+                  },
+                },
+                {
+                  header: 'Total Penjualan (Rp)',
+                  accessorFn(row) {
+                    return formatCurrency(row.total_price);
+                  },
+                },
+              ]}
+              className={{
+                containerClassName: cn({
+                  'mb-20':
+                    initialValues?.marketing_products &&
+                    initialValues?.marketing_products?.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',
+                paginationClassName: 'hidden',
+              }}
+            />
+          </Card>
+        )}
+        <div className='flex flex-row gap-3'>
+          <Button
+            color='warning'
+            type='button'
+            href={`/marketing/sales-orders/detail/edit?salesOrderId=${initialValues?.id}`}
+          >
+            <Icon icon='mdi:pencil' width={24} height={24} />
+            Edit
+          </Button>
+          <Button color='error' onClick={deleteClickHandler}>
+            <Icon icon='mdi:delete' width={24} height={24} />
+            Hapus
+          </Button>
+        </div>
+      </div>
+      <ConfirmationModal
+        ref={deleteModal.ref}
+        type='error'
+        text={`Apakah anda yakin ingin menghapus data penjualan ini?`}
+        secondaryButton={{
+          text: 'Tidak',
+        }}
+        primaryButton={{
+          text: 'Ya',
+          color: 'error',
+          isLoading: isLoading,
+          onClick: confirmationModalDeleteClickHandler,
+        }}
+      />
+      <ConfirmationModal
+        ref={confirmationModal.ref}
+        type={approvalAction === 'approve' ? 'success' : 'error'}
+        text={`Apakah anda yakin ingin ${approvalAction} data penjualan ini?`}
+        secondaryButton={{
+          text: 'Tidak',
+        }}
+        primaryButton={{
+          text: 'Ya',
+          color: approvalAction === 'approve' ? 'success' : 'error',
+          isLoading: isLoading,
+          onClick: confirmationModalApproveClickHandler,
+        }}
+      />
+      <ConfirmationModal
+        ref={deliveryModal.ref}
+        type={'success'}
+        text={`Apakah anda yakin ingin deliver penjualan ini?`}
+        secondaryButton={{
+          text: 'Tidak',
+        }}
+        primaryButton={{
+          text: 'Ya',
+          color: 'success',
+          isLoading: isLoading,
+          onClick: confirmationModalDeliveryClickHandler,
+        }}
+      />
+    </>
+  );
+};
+
+export default SalesOrderDetail;

src/components/pages/marketing/sales-orders/form/SalesForm.schema.ts

@@ -0,0 +1,38 @@
+import * as Yup from 'yup';
+import { MarketingProduct } from '@/types/api/marketing/marketing';
+import {
+  MarketingProductFormValues,
+  MarketingProductSchema,
+} from './repeater/MarketingProduct.schema';
+
+type MarketingSchema = {
+  customer_id: number | undefined;
+  customer:
+    | {
+        value: number;
+        label: string;
+      }
+    | undefined
+    | null;
+  so_date: string | undefined;
+  notes: string | undefined;
+  marketing_products: MarketingProductFormValues[];
+};
+
+export const MarketingSchema: Yup.ObjectSchema<MarketingSchema> = Yup.object({
+  customer_id: Yup.number().required('Customer wajib diisi!'),
+  customer: Yup.object({
+    value: Yup.number().required(),
+    label: Yup.string().required(),
+  }).nullable(),
+  so_date: Yup.string().required('Tanggal wajib diisi!'),
+  notes: Yup.string().required('Catatan wajib diisi!'),
+  marketing_products: Yup.array()
+    .of(MarketingProductSchema)
+    .min(1, 'Minimal harus ada 1 produk!')
+    .required('Produk wajib diisi!'),
+});
+
+export const UpdateMarketingSchema = MarketingSchema;
+
+export type MarketingFormValues = Yup.InferType<typeof MarketingSchema>;

src/components/pages/marketing/sales-orders/form/SalesForm.tsx

@@ -0,0 +1,514 @@
+'use client';
+
+import Button from '@/components/Button';
+import Card from '@/components/Card';
+import { FormHeader } from '@/components/helper/form/FormHeader';
+import DateInput from '@/components/input/DateInput';
+import SelectInput, {
+  OptionType,
+  useSelect,
+} from '@/components/input/SelectInput';
+import TextArea from '@/components/input/TextArea';
+import Modal, { useModal } from '@/components/Modal';
+import * as TanStack from '@tanstack/react-table';
+import Table from '@/components/Table'; // Keep this import
+import { cn, formatCurrency, formatNumber } from '@/lib/helper';
+import {
+  CreateMarketingPayload,
+  CreateMarketingProductPayload,
+  Marketing,
+  MarketingProduct,
+} from '@/types/api/marketing/marketing';
+import { Icon } from '@iconify/react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import MarketingProductForm from './repeater/MarketingProductForm';
+import CheckboxInput from '@/components/input/CheckboxInput';
+import { Customer } from '@/types/api/master-data/customer';
+import { CustomerApi } from '@/services/api/master-data';
+import { useFormik } from 'formik';
+import { MarketingFormValues, MarketingSchema } from './SalesForm.schema';
+import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
+import { MarketingApi } from '@/services/api/marketing/marketing';
+import { MarketingProductFormValues } from './repeater/MarketingProduct.schema';
+import ConfirmationModal from '@/components/modal/ConfirmationModal';
+import toast from 'react-hot-toast';
+import { useRouter } from 'next/navigation';
+
+const SalesForm = ({
+  formType = 'add',
+  initialValues,
+}: {
+  formType?: 'add' | 'edit';
+  initialValues?: Marketing;
+}) => {
+  const router = useRouter();
+  const addProductModal = useModal();
+  const deleteModal = useModal();
+
+  const [isLoading, setIsLoading] = useState(false);
+  const [selectedMarketingProduct, setSelectedMarketingProduct] =
+    useState<MarketingProduct | null>(null);
+  const [rawMarketingProducts, setRawMarketingProducts] = useState<
+    MarketingProduct[]
+  >(initialValues?.marketing_products || []);
+  const [selectedCustomer, setSelectedCustomer] = useState<OptionType | null>(
+    initialValues?.customer
+      ? { value: initialValues.customer.id, label: initialValues.customer.name }
+      : null
+  );
+  const [rowSelection, setRowSelection] = useState<Record<string, boolean>>({});
+  const selectedRowIds = Object.keys(rowSelection).map((item) =>
+    parseInt(item)
+  );
+  const [grandTotal, setGrandTotal] = useState<number>(
+    initialValues?.grand_total ?? 0
+  );
+  const marketingProducts = useMemo(
+    () => rawMarketingProducts,
+    [rawMarketingProducts]
+  );
+
+  const {
+    options: customerOptions,
+    rawData: customerRawData,
+    isLoadingOptions: isLoadingCustomerOptions,
+  } = useSelect<Customer>(CustomerApi.basePath, 'id', 'name');
+
+  const handleAddProduct = useCallback(() => {
+    addProductModal.openModal();
+  }, [addProductModal]);
+  const handleDeleteProduct = useCallback((id: number) => {
+    setRawMarketingProducts((prev) => prev.filter((p) => p.id !== id));
+  }, []);
+  const handleBulkDeleteProduct = () => {
+    setRawMarketingProducts((prev) =>
+      prev.filter((product) => !selectedRowIds.includes(product.id))
+    );
+  };
+  const handleDelete = () => {
+    deleteModal.openModal();
+  };
+
+  const handleAddSubmitProduct = useCallback(
+    async (
+      tableValue: CreateMarketingProductPayload,
+      fieldValues: MarketingProductFormValues
+    ) => {
+      const newMarketingProduct: MarketingProduct = {
+        id: rawMarketingProducts.length + 1,
+        product_warehouse: tableValue.product_warehouse!,
+        unit_price: tableValue.unit_price as number,
+        total_weight: tableValue.total_weight as number,
+        qty: tableValue.qty as number,
+        avg_weight: tableValue.avg_weight as number,
+        total_price: tableValue.total_price as number,
+        marketing_delivery_products: {
+          id: rawMarketingProducts.length + 1,
+          vehicle_number: tableValue.vehicle_number as string,
+          delivery_date: tableValue.delivery_date as string,
+          unit_price: tableValue.unit_price as number,
+          total_weight: tableValue.total_weight as number,
+          qty: tableValue.qty as number,
+          avg_weight: tableValue.avg_weight as number,
+          total_price: tableValue.total_price as number,
+        },
+      };
+
+      setRawMarketingProducts((prev) => [...prev, newMarketingProduct]);
+      formik.setValues({
+        ...formik.values,
+        marketing_products: [...formik.values.marketing_products, fieldValues],
+      });
+      setGrandTotal((prev) => prev + (tableValue.total_price as number));
+      addProductModal.closeModal();
+    },
+    [rawMarketingProducts.length, addProductModal]
+  );
+  const handleChangeCustomer = useCallback(
+    (val: OptionType | OptionType[] | null) => {
+      setSelectedCustomer(val as OptionType);
+      formik.setFieldValue('customer_id', (val as OptionType)?.value);
+      formik.setFieldValue('customer', val as OptionType);
+    },
+    [selectedCustomer, setSelectedCustomer]
+  );
+
+  const createMarketingHandler = async (values: CreateMarketingPayload) => {
+    console.log(values);
+    const createMarketingRes = await MarketingApi.create(values);
+    if (isResponseSuccess(createMarketingRes)) {
+      console.log(createMarketingRes);
+    }
+    if (isResponseError(createMarketingRes)) {
+      console.log(createMarketingRes);
+    }
+    toast.success('Successfully created Sales Order!');
+    router.push('/marketing/sales-orders');
+  };
+  const updateMarketingHandler = async (values: CreateMarketingPayload) => {
+    console.log(values);
+    const createMarketingRes = await MarketingApi.update(
+      initialValues?.id as number,
+      values
+    );
+    if (isResponseSuccess(createMarketingRes)) {
+      console.log(createMarketingRes);
+    }
+    if (isResponseError(createMarketingRes)) {
+      console.log(createMarketingRes);
+    }
+    toast.success('Successfully updated Sales Order!');
+    router.push('/marketing/sales-orders');
+  };
+  const deleteMarketingHandler = async () => {
+    setIsLoading(true);
+    console.log(initialValues?.id);
+    const deleteMarketingRes = await MarketingApi.delete(
+      initialValues?.id as number
+    );
+    if (isResponseSuccess(deleteMarketingRes)) {
+      console.log(deleteMarketingRes);
+    }
+    if (isResponseError(deleteMarketingRes)) {
+      console.log(deleteMarketingRes);
+    }
+    toast.success('Successfully deleted Sales Order!');
+    setIsLoading(false);
+    deleteModal.closeModal();
+    router.push('/marketing/sales-orders');
+  };
+
+  const MarketingProductToFieldValues = (
+    product: MarketingProduct
+  ): MarketingProductFormValues => {
+    return {
+      vehicle_number: product.marketing_delivery_products?.vehicle_number,
+      kandang_id: product.product_warehouse.warehouse.id,
+      kandang: {
+        value: product.product_warehouse.warehouse.id,
+        label: product.product_warehouse.warehouse.name,
+      },
+      product_warehouse: {
+        value: product.product_warehouse.product.id,
+        label: product.product_warehouse.product.name,
+      },
+      product_warehouse_id: product.product_warehouse.product.id,
+      unit_price: product.unit_price,
+      total_weight: product.total_weight,
+      qty: product.qty,
+      uom: product.product_warehouse?.product?.uom?.name,
+      avg_weight: product.avg_weight,
+      total_price: product.total_price,
+      delivery_date: product.marketing_delivery_products?.delivery_date,
+    };
+  };
+
+  const formik = useFormik<MarketingFormValues>({
+    enableReinitialize: true,
+    initialValues: {
+      so_date: initialValues?.so_date || undefined,
+      notes: initialValues?.notes || undefined,
+      customer_id: initialValues?.customer?.id || undefined,
+      customer: {
+        value: initialValues?.customer?.id as number,
+        label: initialValues?.customer?.name as string,
+      },
+      marketing_products:
+        initialValues?.marketing_products?.map((product) =>
+          MarketingProductToFieldValues(product)
+        ) ?? [],
+    },
+    validationSchema: MarketingSchema,
+    onSubmit: async (values) => {
+      const payload = {
+        customer_id: values.customer_id as number,
+        date: values.so_date as string,
+        notes: values.notes as string,
+        marketing_products: values.marketing_products,
+      } as CreateMarketingPayload;
+      switch (formType) {
+        case 'add':
+          createMarketingHandler(payload);
+          break;
+        case 'edit':
+          updateMarketingHandler(payload);
+          break;
+        default:
+          break;
+      }
+    },
+  });
+
+  const { setValues: formikSetValues } = formik;
+
+  useEffect(() => {
+    formikSetValues(formik.initialValues);
+  }, [formikSetValues, formik.initialValues]);
+
+  const columns = useMemo(
+    () => [
+      {
+        id: 'select',
+        header: ({ table }: { table: TanStack.Table<MarketingProduct> }) => (
+          <div className='w-full flex flex-row justify-center'>
+            <CheckboxInput
+              name='allRow'
+              checked={table.getIsAllRowsSelected()}
+              indeterminate={table.getIsSomeRowsSelected()}
+              onChange={table.getToggleAllRowsSelectedHandler()}
+            />
+          </div>
+        ),
+        cell: ({ row }: { row: TanStack.Row<MarketingProduct> }) => (
+          <div>
+            <CheckboxInput
+              name='row'
+              checked={row.getIsSelected()}
+              disabled={!row.getCanSelect()}
+              indeterminate={row.getIsSomeSelected()}
+              onChange={row.getToggleSelectedHandler()}
+            />
+          </div>
+        ),
+      },
+      {
+        accessorFn: (row: MarketingProduct) =>
+          row.marketing_delivery_products?.vehicle_number,
+        header: 'No. Polisi',
+      },
+      {
+        accessorFn: (row: MarketingProduct) =>
+          row.product_warehouse.warehouse.name,
+        header: 'Kandang',
+      },
+      {
+        accessorFn: (row: MarketingProduct) =>
+          row.product_warehouse.product.name,
+        header: 'Produk',
+      },
+      {
+        accessorFn: (row: MarketingProduct) => formatCurrency(row.unit_price),
+        header: 'Harga Satuan (Rp)',
+      },
+      {
+        accessorFn: (row: MarketingProduct) => formatNumber(row.total_weight),
+        header: 'Total Bobot (Kg)',
+      },
+      {
+        accessorFn: (row: MarketingProduct) => formatNumber(row.qty),
+        header: 'Kuantitas',
+      },
+      {
+        accessorFn: (row: MarketingProduct) => formatNumber(row.avg_weight),
+        header: 'Avg. Bobot (Kg)',
+      },
+      {
+        accessorFn: (row: MarketingProduct) => formatCurrency(row.total_price),
+        header: 'Total Penjualan (Rp)',
+      },
+      {
+        header: 'Aksi',
+        cell: (props: TanStack.CellContext<MarketingProduct, unknown>) => (
+          <div className='flex flex-row gap-1 items-center justify-end h-full mt-2'>
+            <Button
+              color='error'
+              className='p-1'
+              onClick={() => handleDeleteProduct(props.row.original.id)}
+            >
+              <Icon icon='mdi:trash' width={16} height={16} />
+            </Button>
+          </div>
+        ),
+      },
+    ],
+    [handleDeleteProduct] // dependensi tunggal
+  );
+
+  return (
+    <>
+      <form
+        className='flex flex-col gap-4'
+        onSubmit={formik.handleSubmit}
+        onReset={formik.handleReset}
+      >
+        <FormHeader
+          title={`${formType === 'add' ? 'Tambah' : 'Edit'} Sales Order`}
+          backUrl='/marketing/sales-orders'
+        />
+        <Card
+          title='Informasi Order'
+          className={{
+            wrapper: 'bg-white w-full',
+          }}
+        >
+          <div className='grid grid-cols-2 gap-3 mt-3'>
+            <SelectInput
+              label='Pelanggan'
+              options={customerOptions}
+              isLoading={isLoadingCustomerOptions}
+              value={selectedCustomer}
+              onChange={handleChangeCustomer}
+              isError={
+                formik.touched.customer_id && Boolean(formik.errors.customer_id)
+              }
+              errorMessage={formik.errors.customer_id}
+              isClearable
+              placeholder='Pilih Pelanggan'
+            />
+            <DateInput
+              name='so_date'
+              label='Tanggal'
+              value={formik.values.so_date}
+              onChange={formik.handleChange}
+              isError={formik.touched.so_date && Boolean(formik.errors.so_date)}
+              errorMessage={formik.errors.so_date}
+              placeholder='Pilih Tanggal'
+            />
+          </div>
+        </Card>
+        <Card
+          title='Daftar Produk'
+          className={{
+            wrapper: 'bg-white w-full',
+          }}
+        >
+          <Table<MarketingProduct>
+            rowSelection={rowSelection}
+            setRowSelection={setRowSelection}
+            data={marketingProducts}
+            columns={columns}
+            className={{
+              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-2 py-3 text-xs font-semibold text-gray-500 last:flex last:flex-row last:justify-end first:flex first:flex-row first:justify-end',
+              bodyRowClassName: 'border-b border-b-gray-200',
+              bodyColumnClassName:
+                'px-2 py-2 last:flex last:flex-row last:justify-end first:flex first:flex-row first:justify-start',
+              paginationClassName: 'hidden',
+            }}
+            emptyContent={
+              <div
+                className={cn(
+                  'w-full h-16 flex flex-col justify-center items-center gap-2'
+                )}
+              >
+                <span className='text-gray-500'>Belum ada data penjualan</span>
+              </div>
+            }
+          />
+          <div className='flex flex-row gap-3 mt-3'>
+            <Button
+              type='button'
+              variant='outline'
+              className='justify-start w-fit py-1 text-sm'
+              onClick={handleAddProduct}
+            >
+              <Icon icon='mdi:plus' width={16} height={16} />
+              Tambah Produk
+            </Button>
+            {selectedRowIds.length > 0 && (
+              <Button
+                type='button'
+                variant='outline'
+                color='error'
+                className='justify-start w-fit py-1 text-sm'
+                onClick={handleBulkDeleteProduct}
+              >
+                <Icon icon='mdi:trash' width={16} height={16} />
+                Hapus
+                {selectedRowIds.length > 0
+                  ? ` (${selectedRowIds.length})`
+                  : ''}{' '}
+                Produk
+              </Button>
+            )}
+          </div>
+        </Card>
+        <div className='grid grid-cols-2 gap-3'>
+          <TextArea
+            required
+            name='notes'
+            label='Catatan'
+            rows={3}
+            placeholder='Masukan catatan penjualan'
+            value={formik.values.notes}
+            onChange={formik.handleChange}
+            isError={formik.touched.notes && Boolean(formik.errors.notes)}
+            errorMessage={formik.errors.notes}
+          />
+          <div className='flex flex-col h-full justify-between items-end py-6'>
+            <span>Total Penjualan</span>
+            <span className='text-lg font-semibold'>
+              {formatCurrency(grandTotal)}
+            </span>
+          </div>
+        </div>
+        <div className='flex flex-row items-start justify-center gap-2 mt-4'>
+          <Button type='reset' color='warning' disabled={formik.isSubmitting}>
+            Reset
+          </Button>
+          <Button
+            type='submit'
+            disabled={!formik.isValid || formik.isSubmitting}
+          >
+            Submit
+          </Button>
+        </div>
+      </form>
+      {formType == 'edit' && (
+        <div className='flex flex-row justify-start'>
+          <Button type='button' color='error' onClick={handleDelete}>
+            <Icon icon='mdi:trash' width={24} height={24} />
+            Hapus
+          </Button>
+        </div>
+      )}
+      <Modal
+        ref={addProductModal.ref}
+        closeOnBackdrop
+        className={{
+          modalBox: 'max-w-4/5 z-100',
+        }}
+      >
+        <div className='flex flex-col gap-4'>
+          <div className='flex flex-row items-center justify-between'>
+            <h3 className='text-lg font-semibold mb-4'>Tambah Produk</h3>
+            <Button
+              variant='ghost'
+              color='error'
+              className='rounded-full'
+              onClick={addProductModal.closeModal}
+            >
+              <Icon icon='mdi:close' width={20} height={20} />
+            </Button>
+          </div>
+          <div>
+            <MarketingProductForm
+              onSubmitForm={handleAddSubmitProduct}
+              modalRef={addProductModal.ref}
+              data={rawMarketingProducts}
+              initialValues={selectedMarketingProduct ?? undefined}
+            />
+          </div>
+        </div>
+      </Modal>
+      <ConfirmationModal
+        ref={deleteModal.ref}
+        type='error'
+        text={`Apakah anda yakin ingin menghapus data penjualan ini?`}
+        secondaryButton={{
+          text: 'Tidak',
+        }}
+        primaryButton={{
+          text: 'Ya',
+          color: 'error',
+          onClick: deleteMarketingHandler,
+        }}
+      />
+    </>
+  );
+};
+
+export default SalesForm;

src/components/pages/marketing/sales-orders/form/repeater/MarketingProduct.schema.ts

@@ -0,0 +1,62 @@
+import * as Yup from 'yup';
+
+type MarketingProductSchemaType = {
+  vehicle_number: string | undefined;
+  kandang_id?: number;
+  kandang?: {
+    value: number;
+    label: string;
+  } | null;
+  product_warehouse?: {
+    value: number;
+    label: string;
+  } | null;
+  product_warehouse_id?: number;
+  unit_price: string | number | undefined;
+  total_weight: string | number | undefined;
+  qty: string | number | undefined;
+  uom: string | undefined | null;
+  avg_weight: string | number | undefined;
+  total_price: string | number | undefined;
+  delivery_date?: string | undefined | null;
+};
+
+export const MarketingProductSchema: Yup.ObjectSchema<MarketingProductSchemaType> =
+  Yup.object({
+    vehicle_number: Yup.string().required('No. Polisi wajib diisi!'),
+    kandang: Yup.object({
+      value: Yup.number().min(1).required(),
+      label: Yup.string().required(),
+    }).nullable(),
+    kandang_id: Yup.number()
+      .min(1, 'Kandang wajib diisi!')
+      .required('Kandang wajib diisi!'),
+    product_warehouse: Yup.object({
+      value: Yup.number().min(1).required(),
+      label: Yup.string().required(),
+    }).nullable(),
+    product_warehouse_id: Yup.number()
+      .min(1, 'Produk wajib diisi!')
+      .required('Produk wajib diisi!'),
+    unit_price: Yup.number()
+      .min(1, 'Harga Satuan wajib diisi!')
+      .required('Harga Satuan wajib diisi!'),
+    total_weight: Yup.number()
+      .min(1, 'Total Bobot wajib diisi!')
+      .required('Total Bobot wajib diisi!'),
+    qty: Yup.number()
+      .min(1, 'Kuantitas wajib diisi!')
+      .required('Kuantitas wajib diisi!'),
+    uom: Yup.string().nullable(),
+    avg_weight: Yup.number()
+      .min(1, 'Avg. Bobot wajib diisi!')
+      .required('Avg. Bobot wajib diisi!'),
+    total_price: Yup.number()
+      .min(1, 'Total Penjualan wajib diisi!')
+      .required('Total Penjualan wajib diisi!'),
+    delivery_date: Yup.string().required().nullable(),
+  });
+
+export type MarketingProductFormValues = Yup.InferType<
+  typeof MarketingProductSchema
+>;

src/components/pages/marketing/sales-orders/form/repeater/MarketingProductForm.tsx

@@ -0,0 +1,361 @@
+'use client';
+
+import TextInput from '@/components/input/TextInput';
+import {
+  CreateMarketingPayload,
+  CreateMarketingProductPayload,
+  MarketingProduct,
+} from '@/types/api/marketing/marketing';
+import { useFormik } from 'formik';
+import {
+  MarketingProductFormValues,
+  MarketingProductSchema,
+} from './MarketingProduct.schema';
+import { RefObject, use, useEffect, useRef, useState } from 'react';
+import SelectInput, {
+  OptionType,
+  useSelect,
+} from '@/components/input/SelectInput';
+import { Kandang } from '@/types/api/master-data/kandang';
+import { KandangApi } from '@/services/api/master-data';
+import { ProductWarehouse } from '@/types/api/inventory/product-warehouse';
+import { ProductWarehouseApi } from '@/services/api/inventory';
+import NumberInput from '@/components/input/NumberInput';
+import Button from '@/components/Button';
+import { isResponseSuccess } from '@/lib/api-helper';
+import PatternInput from '@/components/input/PatternInput';
+import { formatVechicleNumber } from '@/lib/helper';
+
+const MarketingProductForm = ({
+  initialValues,
+  data,
+  modalRef,
+  onSubmitForm,
+}: {
+  initialValues?: MarketingProduct;
+  data: MarketingProduct[];
+  modalRef?: RefObject<HTMLDialogElement | null>;
+  onSubmitForm?: (
+    tableValues: CreateMarketingProductPayload,
+    fieldValues: MarketingProductFormValues
+  ) => Promise<void>;
+}) => {
+  // State
+  const [selectedOptionsKandang, setSelectedOptionsKandang] =
+    useState<OptionType | null>(null);
+  const [selectedOptionsWarehouse, setSelectedOptionsWarehouse] = useState<
+    OptionType | null | undefined
+  >(undefined);
+  const [formErrorMessage, setFormErrorMessage] = useState('');
+
+  // Options Data
+  const {
+    options: kandangSourceOptions,
+    rawData: kandangSourceRawData,
+    isLoadingOptions: isLoadingKandangSourceOptions,
+  } = useSelect<Kandang>(KandangApi.basePath, 'id', 'name');
+  const {
+    options: warehouseSourceOptions,
+    rawData: warehouseSourceRawData,
+    isLoadingOptions: isLoadingWarehouseSourceOptions,
+  } = useSelect<ProductWarehouse>(
+    ProductWarehouseApi.basePath,
+    'id',
+    'product.name',
+    'search',
+    {
+      warehouse_id: selectedOptionsKandang?.value?.toString() ?? '',
+    }
+  );
+
+  // Handler
+  const kandangChangeHandler = (val: OptionType | OptionType[] | null) => {
+    setSelectedOptionsKandang(val as OptionType);
+    formik.setFieldValue('kandang', val as OptionType);
+    formik.setFieldValue('kandang_id', (val as OptionType)?.value);
+    formik.setFieldValue('product_warehouse_id', null);
+    formik.setFieldValue('qty', null);
+    warehouseChangeHandler(null);
+  };
+
+  const warehouseChangeHandler = (val: OptionType | OptionType[] | null) => {
+    setSelectedOptionsWarehouse(val as OptionType);
+    formik.setFieldValue('product_warehouse', val as OptionType);
+    formik.setFieldValue('product_warehouse_id', (val as OptionType)?.value);
+    if (isResponseSuccess(warehouseSourceRawData)) {
+      const productWarehouse = warehouseSourceRawData?.data.find(
+        (item: ProductWarehouse) => item.id === (val as OptionType)?.value
+      );
+      if (selectedOptionsWarehouse?.value !== null) {
+        formik.setFieldValue('qty', productWarehouse?.quantity);
+        handleBlurField('qty');
+      } else {
+        formik.setFieldValue('qty', null);
+      }
+    }
+  };
+
+  // Formik
+  const formik = useFormik<MarketingProductFormValues>({
+    enableReinitialize: true,
+    initialValues: {
+      vehicle_number:
+        initialValues?.marketing_delivery_products?.vehicle_number || undefined,
+      kandang_id: initialValues?.product_warehouse.warehouse.id || undefined,
+      kandang: {
+        value: initialValues?.product_warehouse.warehouse.id as number,
+        label: initialValues?.product_warehouse.warehouse.name as string,
+      },
+      product_warehouse: {
+        value: initialValues?.product_warehouse.product.id as number,
+        label: initialValues?.product_warehouse.product.name as string,
+      },
+      product_warehouse_id:
+        initialValues?.product_warehouse.product.id || undefined,
+      unit_price: initialValues?.unit_price || undefined,
+      total_weight: initialValues?.total_weight || undefined,
+      qty: initialValues?.qty || undefined,
+      uom: initialValues?.product_warehouse?.product?.uom?.name || undefined,
+      avg_weight: initialValues?.avg_weight || undefined,
+      total_price: initialValues?.total_price || undefined,
+      delivery_date:
+        initialValues?.marketing_delivery_products?.delivery_date ||
+        new Date().toDateString() ||
+        undefined,
+    },
+    validationSchema: MarketingProductSchema,
+    onSubmit: async (values) => {
+      setFormErrorMessage('');
+      if (
+        isResponseSuccess(kandangSourceRawData) &&
+        isResponseSuccess(warehouseSourceRawData)
+      ) {
+        const productWarehouse = warehouseSourceRawData?.data.find(
+          (item: ProductWarehouse) => item.id === values.product_warehouse_id
+        );
+        const kandang = kandangSourceRawData?.data.find(
+          (item: Kandang) => item.id === values.kandang_id
+        );
+
+        const marketingProduct: CreateMarketingProductPayload = {
+          id: initialValues?.id || undefined,
+          vehicle_number: formatVechicleNumber(values.vehicle_number as string),
+          kandang_id: values.kandang_id as number,
+          kandang: kandang,
+          product_warehouse_id: values.product_warehouse_id as number,
+          product_warehouse: productWarehouse,
+          unit_price: values.unit_price as number,
+          total_weight: values.total_weight as number,
+          qty: values.qty as number,
+          uom: values.uom as string,
+          avg_weight: values.avg_weight as number,
+          total_price: values.total_price as number,
+          delivery_date: values.delivery_date as string,
+        };
+
+        onSubmitForm?.(marketingProduct, values);
+        handleResetForm();
+      }
+    },
+  });
+  const { setValues: formikSetValues } = formik;
+
+  useEffect(() => {
+    formikSetValues(formik.initialValues);
+  }, [formikSetValues, formik.initialValues]);
+
+  const handleResetForm = () => {
+    setSelectedOptionsKandang(null);
+    setSelectedOptionsWarehouse(null);
+    setFormErrorMessage('');
+    formik.resetForm({
+      values: {
+        vehicle_number: '',
+        kandang_id: undefined,
+        kandang: null,
+        product_warehouse: null,
+        product_warehouse_id: undefined,
+        unit_price: '',
+        total_weight: '',
+        qty: '',
+        uom: '',
+        avg_weight: '',
+        total_price: '',
+        delivery_date: new Date().toDateString(),
+      },
+    });
+  };
+
+  const handleBlurField = (field: string) => {
+    const { qty, unit_price, total_price, avg_weight, total_weight } =
+      formik.values;
+
+    if (field === 'unit_price' || field === 'total_price' || field === 'qty') {
+      if (qty && unit_price && field === 'unit_price') {
+        formik.setFieldValue(
+          'total_price',
+          (qty as number) * (unit_price as number)
+        );
+      } else if (qty && total_price && field === 'total_price') {
+        formik.setFieldValue(
+          'unit_price',
+          (total_price as number) / (qty as number)
+        );
+      }
+    }
+
+    if (field === 'avg_weight' || field === 'total_weight' || field === 'qty') {
+      if (qty && avg_weight && field === 'avg_weight') {
+        formik.setFieldValue(
+          'total_weight',
+          (qty as number) * (avg_weight as number)
+        );
+      } else if (qty && total_weight && field === 'total_weight') {
+        formik.setFieldValue(
+          'avg_weight',
+          (total_weight as number) / (qty as number)
+        );
+      }
+    }
+  };
+
+  return (
+    <>
+      <form
+        className='size-full'
+        onSubmit={formik.handleSubmit}
+        onReset={handleResetForm}
+      >
+        <div className='grid grid-cols-2 gap-4 z-200'>
+          <PatternInput
+            name='vehicle_number'
+            label='No. Polisi'
+            format='AA #### AAA'
+            mask='_'
+            inputVehicleNumber
+            required
+            type='text'
+            placeholder='B 1234 CDE'
+            value={formatVechicleNumber(formik.values.vehicle_number ?? '')}
+            onChange={formik.handleChange}
+            onBlur={formik.handleBlur}
+            isError={
+              formik.touched.vehicle_number &&
+              Boolean(formik.errors.vehicle_number)
+            }
+            errorMessage={formik.errors.vehicle_number}
+          />
+          <SelectInput
+            required
+            label='Kandang'
+            options={kandangSourceOptions}
+            isLoading={isLoadingKandangSourceOptions}
+            value={selectedOptionsKandang}
+            onChange={kandangChangeHandler}
+            isClearable
+            menuPortalTarget={modalRef?.current}
+            isError={
+              formik.touched.kandang_id && Boolean(formik.errors.kandang_id)
+            }
+            errorMessage={formik.errors.kandang_id}
+            placeholder='Pilih Kandang'
+          />
+          <SelectInput
+            required
+            label='Produk'
+            options={warehouseSourceOptions}
+            isLoading={isLoadingWarehouseSourceOptions}
+            value={selectedOptionsWarehouse}
+            onChange={warehouseChangeHandler}
+            isClearable
+            menuPortalTarget={modalRef?.current}
+            placeholder='Pilih Kandang Terlebih Dahulu'
+            isDisabled={!selectedOptionsKandang?.value}
+            isError={
+              formik.touched.product_warehouse_id &&
+              Boolean(formik.errors.product_warehouse_id)
+            }
+            errorMessage={formik.errors.product_warehouse_id}
+          />
+          <NumberInput
+            required
+            label='Kuantitas'
+            name='qty'
+            value={formik.values.qty}
+            onChange={formik.handleChange}
+            onBlur={() => handleBlurField('qty')}
+            isError={formik.touched.qty && Boolean(formik.errors.qty)}
+            errorMessage={formik.errors.qty}
+            placeholder='Masukan Kuantitas'
+          />
+          <NumberInput
+            required
+            label='Avg. Bobot (Kg)'
+            name='avg_weight'
+            value={formik.values.avg_weight}
+            onChange={formik.handleChange}
+            onBlur={() => handleBlurField('avg_weight')}
+            isError={
+              formik.touched.avg_weight && Boolean(formik.errors.avg_weight)
+            }
+            errorMessage={formik.errors.avg_weight}
+            placeholder='Masukan Bobot Rata-rata'
+          />
+          <NumberInput
+            required
+            label='Harga Satuan (Rp)'
+            name='unit_price'
+            value={formik.values.unit_price}
+            onChange={formik.handleChange}
+            onBlur={() => handleBlurField('unit_price')}
+            isError={
+              formik.touched.unit_price && Boolean(formik.errors.unit_price)
+            }
+            errorMessage={formik.errors.unit_price}
+            placeholder='Masukan Harga Satuan'
+          />
+          <NumberInput
+            required
+            label='Total Bobot (Kg)'
+            name='total_weight'
+            value={formik.values.total_weight}
+            onChange={formik.handleChange}
+            onBlur={() => handleBlurField('total_weight')}
+            isError={
+              formik.touched.total_weight && Boolean(formik.errors.total_weight)
+            }
+            errorMessage={formik.errors.total_weight}
+            placeholder='Masukan Total Bobot'
+          />
+          <NumberInput
+            required
+            label='Total Penjualan (Rp)'
+            name='total_price'
+            value={formik.values.total_price}
+            onChange={formik.handleChange}
+            onBlur={() => handleBlurField('total_price')}
+            isError={
+              formik.touched.total_price && Boolean(formik.errors.total_price)
+            }
+            errorMessage={formik.errors.total_price}
+            placeholder='Masukan Total Penjualan'
+          />
+        </div>
+        <div className='flex flex-row justify-end gap-3 mt-4'>
+          <Button type='reset' color='warning' onClick={handleResetForm}>
+            Reset
+          </Button>
+          <Button
+            type='submit'
+            isLoading={formik.isSubmitting}
+            disabled={!formik.isValid || formik.isSubmitting}
+          >
+            Submit
+          </Button>
+        </div>
+      </form>
+    </>
+  );
+};
+
+export default MarketingProductForm;

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

@@ -23,7 +23,7 @@ import RowOptionsMenuWrapper from '@/components/table/RowOptionsMenuWrapper';
 
 import { Kandang } from '@/types/api/master-data/kandang';
 import { KandangApi } from '@/services/api/master-data';
-import { cn } from '@/lib/helper';
+import { cn, formatNumber } from '@/lib/helper';
 import { isResponseSuccess } from '@/lib/api-helper';
 import { useTableFilter } from '@/services/hooks/useTableFilter';
 import { ROWS_OPTIONS } from '@/config/constant';
@@ -85,12 +85,19 @@ const KandangsTable = () => {
     setPageSize,
     toQueryString: getTableFilterQueryString,
   } = useTableFilter({
-    initial: { search: '', nameSort: '', locationSort: '', picSort: '' },
+    initial: {
+      search: '',
+      nameSort: '',
+      locationSort: '',
+      capacitySort: '',
+      picSort: '',
+    },
     paramMap: {
       page: 'page',
       pageSize: 'limit',
       nameSort: 'sort_name',
       locationSort: 'sort_location',
+      capacitySort: 'sort_capacity',
       picSort: ' sort_pic',
     },
   });
@@ -130,6 +137,11 @@ const KandangsTable = () => {
       header: 'Lokasi',
       cell: (props) => props.row.original.location.name,
     },
+    {
+      accessorKey: 'capacity',
+      header: 'Kapasitas',
+      cell: (props) => formatNumber(props.row.original.capacity ?? 0),
+    },
     {
       accessorKey: 'pic',
       header: 'PIC',

src/components/pages/master-data/kandang/form/KandangForm.schema.ts

@@ -11,6 +11,10 @@ export const KandangFormSchema = Yup.object({
     label: Yup.string().required(),
   }).nullable(),
 
+  capacity: Yup.number()
+    .min(1, 'Kapasitas wajib diisi!')
+    .required('Kapasitas wajib diisi!'),
+
   picId: Yup.number().min(1, 'PIC wajib diisi!').required('PIC wajib diisi!'),
   pic: Yup.object({
     value: Yup.number().min(1).required(),

src/components/pages/master-data/kandang/form/KandangForm.tsx

@@ -27,6 +27,7 @@ import {
 import { LocationApi, KandangApi } from '@/services/api/master-data';
 import { cn } from '@/lib/helper';
 import { UserApi } from '@/services/api/user';
+import NumberInput from '@/components/input/NumberInput';
 
 interface KandangFormProps {
   type?: 'add' | 'edit' | 'detail';
@@ -81,6 +82,7 @@ const KandangForm = ({ type = 'add', initialValues }: KandangFormProps) => {
             label: initialValues.location.name,
           }
         : null,
+      capacity: initialValues?.capacity ?? 0,
       picId: initialValues?.pic?.id ?? 0,
       pic: initialValues?.pic
         ? {
@@ -101,6 +103,7 @@ const KandangForm = ({ type = 'add', initialValues }: KandangFormProps) => {
       const kandangPayload: CreateKandangPayload = {
         name: values.name,
         location_id: values.locationId,
+        capacity: values.capacity,
         pic_id: values.picId,
       };
 
@@ -249,6 +252,20 @@ const KandangForm = ({ type = 'add', initialValues }: KandangFormProps) => {
               isClearable
             />
 
+            <NumberInput
+              required
+              name='capacity'
+              label='Kapasitas'
+              value={formik.values.capacity ?? undefined}
+              onChange={formik.handleChange}
+              onBlur={formik.handleBlur}
+              isError={
+                formik.touched.capacity && Boolean(formik.errors.capacity)
+              }
+              errorMessage={formik.errors.capacity as string}
+              readOnly={type === 'detail'}
+            />
+
             <SelectInput
               required
               label='PIC'

src/components/pages/production/chickin/ChickinTable.tsx

@@ -13,7 +13,7 @@ import { TableRowSizeSelector } from '@/components/table/TableRowSizeSelector';
 import { ROWS_OPTIONS } from '@/config/constant';
 import { isResponseSuccess } from '@/lib/api-helper';
 import { cn, formatNumber } from '@/lib/helper';
-import { ChickinApi } from '@/services/api/production';
+import { ChickinApi } from '@/services/api/production/chickin';
 import { useTableFilter } from '@/services/hooks/useTableFilter';
 import { Chickin } from '@/types/api/production/chickin';
 import { Icon } from '@iconify/react';
@@ -87,7 +87,7 @@ const ChickinTable = () => {
         <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'>
             <Button
-              href='/production/chickin/add?projectFlockId=1'
+              href='/production/project-flock/chickin/add?projectFlockId=1'
               variant='outline'
               color='primary'
               className='w-full sm:w-fit'
@@ -260,14 +260,14 @@ const ChickinTable = () => {
             />
           </Button>
         </div>
-        <ChickinForm
+        {/* <ChickinForm
           initialValues={selectedChickin}
           formType='edit'
           afterSubmit={() => {
             refreshChickins();
             chickinModal.closeModal();
           }}
-        />
+        /> */}
       </Modal>
     </>
   );
@@ -287,7 +287,7 @@ const RowOptionsMenu = ({
   return (
     <RowOptionsMenuWrapper type={type}>
       <Button
-        href={`/production/chickin/detail?chickinId=${props.row.original.id}`}
+        href={`/production/project-flock/chickin/detail?chickinId=${props.row.original.id}`}
         variant='ghost'
         color='primary'
         className='justify-start text-sm'

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

@@ -1,13 +1,37 @@
 import * as Yup from 'yup';
 
-export const ChickinFormSchema = Yup.object({
-  chick_in_date: Yup.string().required('Tanggal masuk wajib diisi!'),
-  note: Yup.string().required('Catatan wajib diisi!'),
-  quantity: Yup.number()
-    .min(1, 'Jumlah wajib diisi!')
-    .required('Jumlah wajib diisi!'),
+type ChickinRequestSchemaType = {
+  chick_in_date: string;
+  note?: string | undefined | null;
+  product_warehouse_id: number;
+};
+
+type ChickinSchemaType = {
+  project_flock_kandang_id: number;
+  chickin_requests: ChickinRequestSchemaType[];
+};
+
+export const ChickinRequestSchema: Yup.ObjectSchema<ChickinRequestSchemaType> =
+  Yup.object({
+    chick_in_date: Yup.string().nullable().required('Tanggal wajib diisi!'),
+    note: Yup.string().nullable(),
+    product_warehouse_id: Yup.number()
+      .min(1, 'Produk wajib diisi!')
+      .required('Produk wajib diisi!'),
+  });
+
+export const ChickinSchema: Yup.ObjectSchema<ChickinSchemaType> = Yup.object({
+  project_flock_kandang_id: Yup.number()
+    .min(1, 'Project Flock Kandang wajib diisi!')
+    .required('Project Flock Kandang wajib diisi!'),
+  chickin_requests: Yup.array()
+    .of(ChickinRequestSchema)
+    .min(1, 'Minimal harus ada 1 produk!')
+    .required('Produk wajib diisi!'),
 });
 
-export type ChickinFormValues = Yup.InferType<typeof ChickinFormSchema>;
+export type ChickinRequestFormValues = Yup.InferType<
+  typeof ChickinRequestSchema
+>;
 
-export const UpdateChickinFormSchema = ChickinFormSchema;
+export type ChickinFormValues = Yup.InferType<typeof ChickinSchema>;

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

@@ -1,220 +1,145 @@
 'use client';
 
-import Button from '@/components/Button';
-import {
-  Chickin,
-  CreateChickinPayload,
-  UpdateChickinPayload,
-} from '@/types/api/production/chickin';
-import {
-  ChickinFormSchema,
-  ChickinFormValues,
-  UpdateChickinFormSchema,
-} from '@/components/pages/production/chickin/form/ChickinForm.schema';
-import { use, useCallback, useEffect, useMemo, useState } from 'react';
-import { useFormik } from 'formik';
-import { ChickinApi } from '@/services/api/production';
-import DateInput from '@/components/input/DateInput';
-import { isResponseError } from '@/lib/api-helper';
-import toast from 'react-hot-toast';
-import { Icon } from '@iconify/react';
-import TextArea from '@/components/input/TextArea';
-import TextInput from '@/components/input/TextInput';
-import NumberInput from '@/components/input/NumberInput';
-
-interface ChickinFormProps {
-  formType?: 'add' | 'detail' | 'edit';
-  initialValues?: Chickin;
-  afterSubmit?: () => void;
-}
-
-const ChickinForm = ({
+import Card from '@/components/Card';
+import { FormHeader } from '@/components/helper/form/FormHeader';
+import Table from '@/components/Table';
+import { formatNumber } from '@/lib/helper';
+import { Kandang } from '@/types/api/master-data/kandang';
+import { ProjectFlockKandang } from '@/types/api/production/project-flock-kandang';
+import Tabs from '@/components/Tabs';
+import ChickinFormView from './tabs/ChickinFormView';
+import ChickinLogsView from './tabs/ChickLogsView';
+import { useState } from 'react';
+import ApprovalSteps, {
+  useApprovalSteps,
+} from '@/components/pages/ApprovalSteps';
+import { PROJECT_FLOCK_KANDANG_APPROVAL_LINE } from '@/config/approval-line';
+const ChickinFormKandang = ({
   formType = 'add',
   initialValues,
   afterSubmit,
-}: ChickinFormProps) => {
-  // Helper Function
-  const formatDateForInput = (dateString?: string): string => {
-    if (!dateString) return '';
-    return new Date(dateString).toISOString().split('T')[0];
-  };
+}: {
+  formType?: 'add' | 'detail' | 'edit';
+  initialValues: ProjectFlockKandang;
+  afterSubmit?: () => void;
+}) => {
+  const [activeTabId, setActiveTabId] = useState<string>('formChickIn');
 
-  // State
-  const [chickinFormErrorMessage, setChickinFormErrorMessage] = useState('');
-
-  // Initial Value
-  const formikInitialValue = useMemo<ChickinFormValues>(() => {
-    return {
-      chick_in_date: formatDateForInput(initialValues?.chick_in_date) ?? '',
-      note: initialValues?.note ?? '',
-      quantity:
-        initialValues?.quantity ??
-        initialValues?.project_flock_kandang?.available_quantity ??
-        0,
-    };
-  }, [initialValues]);
-
-  // Handle Submit Function
-  const handleCreate = useCallback(
-    async (
-      payload: CreateChickinPayload,
-      afterSubmit: (() => void) | undefined
-    ) => {
-      const res = await ChickinApi.create(payload);
-      if (isResponseError(res)) {
-        setChickinFormErrorMessage(res.message);
-        return;
-      }
-      toast.success(res?.message as string);
-      afterSubmit?.();
-    },
-    []
-  );
-  const handleUpdate = useCallback(
-    async (
-      payload: UpdateChickinPayload,
-      afterSubmit: (() => void) | undefined
-    ) => {
-      const res = await ChickinApi.update(payload.id, payload);
-      if (isResponseError(res)) {
-        setChickinFormErrorMessage(res.message);
-        return;
-      }
-      toast.success(res?.message as string);
-      afterSubmit?.();
-    },
-    []
-  );
-
-  // Formik
-  const formik = useFormik<ChickinFormValues>({
-    initialValues: formikInitialValue,
-    enableReinitialize: true,
-    validationSchema:
-      formType === 'edit' ? UpdateChickinFormSchema : ChickinFormSchema,
-    onSubmit: async (values) => {
-      // reset error message
-      setChickinFormErrorMessage('');
-
-      if (
-        initialValues?.project_flock_kandang?.id == undefined ||
-        (formType == 'edit' && initialValues?.id == undefined)
-      ) {
-        return;
-      }
-
-      // create payload
-      const payload = {
-        chick_in_date: values.chick_in_date,
-        project_flock_kandang_id: initialValues?.project_flock_kandang?.id,
-        note: values.note,
-        quantity: values.quantity,
-        id: initialValues.id ?? 0,
-      };
-
-      // cek type form yang disubmit
-      console.log(formType);
-      switch (formType) {
-        case 'add':
-          handleCreate(payload, afterSubmit);
-          break;
-        case 'edit':
-          handleUpdate(payload, afterSubmit);
-          break;
-        default:
-          break;
-      }
-    },
+  const {
+    approvals,
+    isLoading: approvalsLoading,
+    refresh: refreshApprovals,
+  } = useApprovalSteps({
+    latestApproval: initialValues?.approval,
+    approvalLines: PROJECT_FLOCK_KANDANG_APPROVAL_LINE,
+    moduleName: 'PROJECT_FLOCK_KANDANGS',
+    moduleId: initialValues?.id.toString() ?? '',
   });
 
-  // Initialize Formik
-  const { setValues: formikSetValues } = formik;
-  useEffect(() => {
-    formikSetValues(formikInitialValue);
-  }, [formikSetValues, formikInitialValue]);
+  const afterSubmitFormChickin = () => {
+    setActiveTabId('logsChickIn');
+    afterSubmit && afterSubmit();
+    refreshApprovals();
+  };
 
   return (
-    <>
-      <form
-        className='min-h-48 flex flex-col gap-4'
-        onSubmit={formik.handleSubmit}
-        onReset={formik.handleReset}
+    <div className='flex flex-col gap-4'>
+      <FormHeader
+        title='Chick In DOC'
+        backUrl={`/production/project-flock/chickin/add?projectFlockId=${initialValues?.project_flock?.id}`}
+      />
+
+      {approvals && !approvalsLoading && (
+        <ApprovalSteps approvals={approvals} />
+      )}
+
+      <Card
+        title='Informasi Kandang'
+        className={{
+          wrapper: 'w-full bg-white mt-4',
+        }}
       >
-        <DateInput
-          value={formik.values.chick_in_date}
-          onChange={formik.handleChange}
-          onBlur={formik.handleBlur}
-          name='chick_in_date'
-          label='Tanggal Chickin'
-          required
-          isError={
-            formik.touched.chick_in_date && Boolean(formik.errors.chick_in_date)
+        <Table<Kandang>
+          emptyContent={
+            <div className='w-full p-5 text-center'>
+              <span className='text-lg opacity-50'>
+                Informasi Kandang belum tersedia...
+              </span>
+            </div>
           }
-          errorMessage={formik.errors.chick_in_date}
+          data={[initialValues?.kandang]}
+          columns={[
+            {
+              header: 'Area',
+              accessorFn: () => initialValues?.project_flock?.area.name || '-',
+            },
+            {
+              header: 'Lokasi',
+              accessorFn: () =>
+                initialValues?.project_flock?.location.name || '-',
+            },
+            {
+              header: 'Flock',
+              accessorFn: () => initialValues?.project_flock?.flock_name || '-',
+            },
+            {
+              header: 'Kandang',
+              accessorFn: (row) => row?.name || '-',
+            },
+            {
+              header: 'Kapasitas',
+              accessorFn: (row) =>
+                (row?.capacity && formatNumber(row?.capacity)) || '-',
+            },
+            {
+              header: 'Penanggung Jawab',
+              accessorFn: (row) => row?.pic?.name || '-',
+            },
+          ]}
+          className={{
+            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',
+            paginationClassName: 'hidden',
+          }}
         />
-        <NumberInput
-          value={formik.values.quantity}
-          onChange={formik.handleChange}
-          onBlur={formik.handleBlur}
-          name='quantity'
-          label='Jumlah (Ekor)'
-          required
-          isError={
-            (formik.touched.quantity && Boolean(formik.errors.quantity)) ||
-            formik.values.quantity == 0
-          }
-          errorMessage={
-            formik.values.quantity == 0
-              ? 'Masukan Persediaan Day Old Chick terlebih dahulu.'
-              : formik.errors.quantity
-          }
-          readOnly
-        />
-        <TextArea
-          required
-          label='Catatan'
-          name='note'
-          placeholder='Masukan catatan chickin'
-          value={formik.values.note}
-          onChange={formik.handleChange}
-          onBlur={formik.handleBlur}
-          isError={formik.touched.note && Boolean(formik.errors.note)}
-          errorMessage={formik.errors.note}
-        />
-        {initialValues?.project_flock_kandang?.id == undefined && (
-          <p className='text-error'>Project Flock Kandang tidak ditemukan.</p>
-        )}
-        {chickinFormErrorMessage && (
-          <div
-            role='alert'
-            className='alert alert-error'
-            onClick={() => {
-              setChickinFormErrorMessage('');
-            }}
-          >
-            <Icon icon='mdi:times' />
-            <span>{chickinFormErrorMessage}</span>
-          </div>
-        )}
-        <div className='flex justify-center mt-auto gap-2'>
-          <Button color='warning' type='reset'>
-            Reset
-          </Button>
-          <Button
-            type='submit'
-            isLoading={formik.isSubmitting}
-            disabled={
-              !formik.isValid ||
-              formik.isSubmitting ||
-              !initialValues?.project_flock_kandang?.id
-            }
-          >
-            Submit
-          </Button>
-        </div>
-      </form>
-    </>
+      </Card>
+      <Tabs
+        className='bg-white p-2'
+        onTabChange={setActiveTabId}
+        activeTabId={activeTabId}
+        tabs={[
+          {
+            id: 'formChickIn',
+            label: 'Tambah Chick In',
+            content: (
+              <ChickinFormView
+                initialValues={initialValues}
+                formType={formType}
+                afterSubmit={afterSubmitFormChickin}
+              />
+            ),
+          },
+          {
+            content: (
+              <ChickinLogsView
+                initialValues={initialValues}
+                afterSubmit={afterSubmitFormChickin}
+              />
+            ),
+            id: 'logsChickIn',
+            label: 'Riwayat Chick In',
+          },
+        ]}
+        variant='lifted'
+      />
+    </div>
   );
 };
 
-export default ChickinForm;
+export default ChickinFormKandang;

src/components/pages/production/chickin/form/tabs/ChickLogsView.tsx

@@ -0,0 +1,172 @@
+import Alert from '@/components/Alert';
+import Button from '@/components/Button';
+import Card from '@/components/Card';
+import { useModal } from '@/components/Modal';
+import ConfirmationModal from '@/components/modal/ConfirmationModal';
+import PillBadge from '@/components/PillBadge';
+import Table from '@/components/Table';
+import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
+import { cn, formatDate, formatNumber } from '@/lib/helper';
+import { ChickinApi } from '@/services/api/production/chickin';
+import {
+  Chickin,
+  ProjectFlockKandang,
+} from '@/types/api/production/project-flock-kandang';
+import { Icon } from '@iconify/react';
+import { useState } from 'react';
+import toast from 'react-hot-toast';
+
+const ChickinLogsView = ({
+  initialValues,
+  afterSubmit,
+}: {
+  initialValues: ProjectFlockKandang;
+  afterSubmit?: () => void;
+}) => {
+  const confirmModal = useModal();
+  const [isApproveLoading, setIsApproveLoading] = useState(false);
+  const [chickinErrorMessage, setChickinErrorMessage] = useState('');
+
+  const handleClickApprove = () => {
+    confirmModal.openModal();
+  };
+
+  const confirmationModalApproveClickHandler = async () => {
+    setChickinErrorMessage('');
+    setIsApproveLoading(true);
+    const approveChickinRes = await ChickinApi.singleApproval(
+      initialValues?.id as number,
+      'APPROVED'
+    );
+    if (isResponseSuccess(approveChickinRes)) {
+      toast.success(approveChickinRes?.message as string);
+    }
+    if (isResponseError(approveChickinRes)) {
+      toast.error(approveChickinRes?.message as string);
+      setChickinErrorMessage(approveChickinRes?.message as string);
+    }
+    confirmModal.closeModal();
+    setIsApproveLoading(false);
+    afterSubmit && afterSubmit();
+  };
+
+  return (
+    <>
+      <Card
+        title='Riwayat Chick In'
+        className={{
+          wrapper: 'w-full bg-white',
+        }}
+      >
+        <div className='flex flex-row justify-start gap-3 mt-3'>
+          {initialValues?.approval?.step_number == 1 && (
+            <Button
+              color='success'
+              variant='outline'
+              onClick={handleClickApprove}
+            >
+              <Icon width={24} height={24} icon='material-symbols:check' />
+              Approve
+            </Button>
+          )}
+        </div>
+        <Table<Chickin>
+          data={initialValues?.chickins || []}
+          columns={[
+            {
+              header: '#',
+              cell: (props) => props.row.index + 1,
+            },
+            {
+              accessorFn: (row) => row.chick_in_date,
+              header: 'Tanggal Chick In',
+              cell: (props) => {
+                return formatDate(props.getValue() as string, 'DD MMM YYYY');
+              },
+            },
+            {
+              accessorFn: (row) => row.product_warehouse?.warehouse?.name,
+              header: 'Kandang',
+            },
+            {
+              accessorFn: (row) => row.product_warehouse?.product?.name,
+              header: 'Produk',
+            },
+            {
+              accessorFn: (row) => row.usage_qty ?? row.pending_usage_qty,
+              header: 'Jumlah Chick In',
+              cell: (props) => {
+                if (props.row.original.usage_qty != 0) {
+                  return formatNumber(props.row.original.usage_qty);
+                } else if (props.row.original.pending_usage_qty != 0) {
+                  return formatNumber(props.row.original.pending_usage_qty);
+                } else {
+                  return '-';
+                }
+              },
+            },
+            {
+              accessorFn: (row) => row.pending_usage_qty,
+              header: 'Status',
+              cell: (props) => {
+                return (
+                  <PillBadge
+                    content={
+                      props.row.original.usage_qty !== 0
+                        ? 'Disetujui'
+                        : props.row.original.pending_usage_qty !== 0
+                          ? 'Pending'
+                          : '-'
+                    }
+                    color={
+                      props.row.original.usage_qty !== 0
+                        ? 'green'
+                        : props.row.original.pending_usage_qty !== 0
+                          ? 'yellow'
+                          : 'gray'
+                    }
+                  />
+                );
+              },
+            },
+          ]}
+          className={{
+            containerClassName: cn({
+              'mb-20': initialValues?.chickins?.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',
+            paginationClassName: 'hidden',
+          }}
+        />
+        {chickinErrorMessage && (
+          <div className='w-full' onClick={() => setChickinErrorMessage('')}>
+            <Alert color='error'>{chickinErrorMessage}</Alert>
+          </div>
+        )}
+      </Card>
+      <ConfirmationModal
+        ref={confirmModal.ref}
+        type='success'
+        text={`Apakah anda yakin ingin approve data Chickin yang Pending?`}
+        secondaryButton={{
+          text: 'Tidak',
+        }}
+        primaryButton={{
+          text: 'Ya',
+          color: 'success',
+          onClick: confirmationModalApproveClickHandler,
+          isLoading: isApproveLoading,
+        }}
+      />
+    </>
+  );
+};
+
+export default ChickinLogsView;

src/components/pages/production/chickin/form/tabs/ChickinFormView.tsx

@@ -0,0 +1,233 @@
+'use client';
+
+import Card from '@/components/Card';
+import Table from '@/components/Table';
+import {
+  ChickinFormValues,
+  ChickinRequestFormValues,
+  ChickinSchema,
+} from '../ChickinForm.schema';
+import DateInput from '@/components/input/DateInput';
+import SelectInput, { OptionType } from '@/components/input/SelectInput';
+import NumberInput from '@/components/input/NumberInput';
+import Button from '@/components/Button';
+import { useCallback, useEffect, useState } from 'react';
+import { useFormik } from 'formik';
+import { flushSync } from 'react-dom';
+import { CreateChickinPayload } from '@/types/api/production/chickin';
+import { ChickinApi } from '@/services/api/production/chickin';
+import { isResponseError } from '@/lib/api-helper';
+import toast from 'react-hot-toast';
+import { ProjectFlockKandang } from '@/types/api/production/project-flock-kandang';
+import { useRouter } from 'next/navigation';
+import Alert from '@/components/Alert';
+import { formatNumber } from '@/lib/helper';
+
+const ChickinFormView = ({
+  formType = 'add',
+  initialValues,
+  afterSubmit,
+}: {
+  formType?: 'add' | 'detail' | 'edit';
+  initialValues: ProjectFlockKandang;
+  afterSubmit?: () => void;
+}) => {
+  const router = useRouter();
+  const [chickinErrorMessage, setChickinErrorMessage] = useState('');
+
+  const createChickin = useCallback(
+    async (payload: CreateChickinPayload) => {
+      const createChickinRes = await ChickinApi.create(payload);
+      if (isResponseError(createChickinRes)) {
+        setChickinErrorMessage(createChickinRes.message);
+        return;
+      }
+
+      toast.success(createChickinRes?.message as string);
+      // router.push(
+      //   `/production/project-flock/chickin/add?projectFlockId=${initialValues?.project_flock?.id}`
+      // );
+      if (afterSubmit) {
+        afterSubmit();
+      }
+    },
+    [router]
+  );
+  const handleReset = async () => {
+    flushSync(() => {
+      formik.resetForm({
+        values: {
+          project_flock_kandang_id: initialValues?.id,
+          chickin_requests: initialValues?.available_qtys
+            ? initialValues.available_qtys.map((availableQty) => ({
+                chick_in_date: '',
+                product_warehouse_id: availableQty.product_warehouse.id,
+                available_qty: availableQty.available_qty,
+                note: `Chickin project-flock-kandang-${initialValues?.id} product-warehouse-${availableQty.product_warehouse.id}`,
+              }))
+            : [],
+        },
+      });
+    });
+
+    formik.setTouched({
+      chickin_requests: initialValues?.available_qtys?.map(() => ({
+        chick_in_date: true,
+      })),
+    });
+
+    const errors = await formik.validateForm();
+    formik.setErrors(errors);
+  };
+
+  const formik = useFormik<ChickinFormValues>({
+    enableReinitialize: true,
+    validationSchema: ChickinSchema,
+    initialValues: {
+      project_flock_kandang_id: initialValues?.id,
+      chickin_requests: initialValues?.available_qtys
+        ? initialValues.available_qtys.map((availableQty) => ({
+            chick_in_date: '',
+            product_warehouse_id: availableQty.product_warehouse.id,
+            available_qty: availableQty.available_qty,
+            note: `Chickin project-flock-kandang-${initialValues?.id} product-warehouse-${availableQty.product_warehouse.id}`,
+          }))
+        : [],
+    },
+    onSubmit: (values) => {
+      setChickinErrorMessage('');
+      createChickin(values as CreateChickinPayload);
+      if (afterSubmit) {
+        afterSubmit();
+      }
+    },
+  });
+
+  const { setValues: formikSetValues } = formik;
+
+  useEffect(() => {
+    formikSetValues({
+      project_flock_kandang_id: initialValues?.id,
+      chickin_requests: initialValues?.available_qtys
+        ? initialValues.available_qtys.map((availableQty) => ({
+            chick_in_date: '',
+            product_warehouse_id: availableQty.product_warehouse.id,
+            available_qty: availableQty.available_qty,
+            note: `Chickin project-flock-kandang-${initialValues?.id} product-warehouse-${availableQty.product_warehouse.id}`,
+          }))
+        : [],
+    });
+  }, [formikSetValues, initialValues]);
+
+  return (
+    <form
+      className='flex flex-col gap-4'
+      onReset={(e) => {
+        handleReset();
+      }}
+      onSubmit={formik.handleSubmit}
+    >
+      <Card
+        title='Informasi Chick In DOC'
+        className={{
+          wrapper: 'w-full bg-white',
+        }}
+      >
+        <Table<ChickinRequestFormValues>
+          data={formik.values.chickin_requests || []}
+          columns={[
+            {
+              accessorFn: (row) => row.chick_in_date,
+              header: 'Tanggal Chick In',
+              cell(props) {
+                return (
+                  <DateInput
+                    className={{
+                      wrapper: 'w-fit',
+                      inputWrapper: 'bg-white',
+                    }}
+                    name={`chickin_requests[${props.row.index}].chick_in_date`}
+                    value={
+                      formik.values.chickin_requests[props.row.index]
+                        ?.chick_in_date as string
+                    }
+                    onChange={formik.handleChange}
+                  />
+                );
+              },
+            },
+            {
+              accessorFn: (row) => row.product_warehouse_id,
+              header: 'Produk',
+              cell(props) {
+                const availableQty = initialValues?.available_qtys?.find(
+                  (availableQty) =>
+                    availableQty.product_warehouse.id ===
+                    props.row.original.product_warehouse_id
+                );
+                return (
+                  <div>{availableQty?.product_warehouse?.product?.name}</div>
+                );
+              },
+            },
+            {
+              accessorFn: (row) => row.product_warehouse_id,
+              header: 'Jumlah (ekor)',
+              cell(props) {
+                const availableQty = initialValues?.available_qtys?.find(
+                  (availableQty) =>
+                    availableQty.product_warehouse.id ===
+                    props.row.original.product_warehouse_id
+                );
+                return (
+                  <div>
+                    {availableQty?.available_qty
+                      ? formatNumber(availableQty?.available_qty)
+                      : '-'}
+                  </div>
+                );
+              },
+            },
+          ]}
+          className={{
+            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-2 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-2 py-2 last:flex last:flex-row last:justify-end',
+            paginationClassName: 'hidden',
+          }}
+          emptyContent={
+            <div className='w-full p-5 text-center'>
+              <span className='text-lg opacity-50'>
+                Isi persediaan DOC untuk kandang belum tersedia...
+              </span>
+            </div>
+          }
+        />
+      </Card>
+      <div className='flex flex-row justify-center gap-3'>
+        <Button type='reset' color='warning' disabled={formik.isSubmitting}>
+          Reset
+        </Button>
+        <Button
+          type='submit'
+          color='primary'
+          disabled={!formik.isValid || formik.isSubmitting}
+        >
+          Submit
+        </Button>
+      </div>
+      {chickinErrorMessage && (
+        <div className='w-full' onClick={() => setChickinErrorMessage('')}>
+          <Alert color='error'>{chickinErrorMessage}</Alert>
+        </div>
+      )}
+    </form>
+  );
+};
+
+export default ChickinFormView;

src/components/pages/production/project-flock/ProjectFlockTable.tsx

@@ -9,12 +9,11 @@ import ConfirmationModal from '@/components/modal/ConfirmationModal';
 import Table from '@/components/Table';
 import RowCollapseOptions from '@/components/table/RowCollapseOptions';
 import RowDropdownOptions from '@/components/table/RowDropdownOptions';
-import RowOptionsMenuWrapper from '@/components/table/RowOptionsMenuWrapper';
 import { ROWS_OPTIONS } from '@/config/constant';
 import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
 import { cn } from '@/lib/helper';
 import { AreaApi, KandangApi, LocationApi } from '@/services/api/master-data';
-import { ProjectFlockApi } from '@/services/api/production';
+import { ProjectFlockApi } from '@/services/api/production/project-flock';
 import { useTableFilter } from '@/services/hooks/useTableFilter';
 import { BaseApiResponse } from '@/types/api/api-general';
 import { Kandang } from '@/types/api/master-data/kandang';
@@ -38,53 +37,63 @@ const RowOptionsMenu = ({
   deleteClickHandler: () => void;
 }) => {
   return (
-    <RowOptionsMenuWrapper type={type}>
-      <Button
-        href={`/production/project-flock/detail?projectFlockId=${props.row.original.id}`}
-        variant='ghost'
-        color='primary'
-        className='justify-start text-sm'
-      >
-        <Icon icon='mdi:eye-outline' width={16} height={16} />
-        Detail
-      </Button>
-      {props.row.original.approval.step_name === 'Aktif' && (
+    <div
+      tabIndex={type == 'dropdown' ? 0 : undefined}
+      className={cn(
+        {
+          'dropdown-content': type === 'dropdown',
+          'mt-2': type === 'collapse',
+        },
+        'p-2.5 mr-2 bg-base-100 rounded-box z-10 border border-black/10 shadow'
+      )}
+    >
+      <div className='flex flex-col gap-1'>
         <Button
-          href={`/production/chickin/add?projectFlockId=${props.row.original.id}`}
+          href={`/production/project-flock/detail?projectFlockId=${props.row.original.id}`}
           variant='ghost'
-          color='success'
+          color='primary'
           className='justify-start text-sm'
         >
-          <Icon icon='mdi:home-import-outline' width={16} height={16} />
-          Chickin
+          <Icon icon='mdi:eye-outline' width={16} height={16} />
+          Detail
         </Button>
-      )}
-      {props.row.original.approval.step_name === 'Pengajuan' && (
+        {props.row.original.approval.step_name === 'Aktif' && (
+          <Button
+            href={`/production/project-flock/chickin/add?projectFlockId=${props.row.original.id}`}
+            variant='ghost'
+            color='success'
+            className='justify-start text-sm'
+          >
+            <Icon icon='mdi:home-import-outline' width={16} height={16} />
+            Chickin
+          </Button>
+        )}
+        {props.row.original.approval.step_name === 'Pengajuan' && (
+          <Button
+            href={`/production/project-flock/detail/edit?projectFlockId=${props.row.original.id}`}
+            variant='ghost'
+            color='warning'
+            className='justify-start text-sm'
+          >
+            <Icon icon='mdi:pencil-outline' width={16} height={16} />
+            Edit
+          </Button>
+        )}
         <Button
-          href={`/production/project-flock/detail/edit?projectFlockId=${props.row.original.id}`}
+          onClick={deleteClickHandler}
           variant='ghost'
-          color='warning'
-          className='justify-start text-sm'
+          color='error'
+          className='text-error hover:text-inherit justify-start text-sm'
         >
-          <Icon icon='mdi:pencil-outline' width={16} height={16} />
-          Edit
+          <Icon
+            icon='material-symbols:delete-outline-rounded'
+            width={16}
+            height={16}
+          />
+          Delete
         </Button>
-      )}
-      <Button
-        onClick={deleteClickHandler}
-        variant='ghost'
-        color='error'
-        className='justify-start text-sm text-error focus-visible:text-error-content hover:text-error-content'
-      >
-        <Icon
-          icon='material-symbols:delete-outline-rounded'
-          width={16}
-          height={16}
-          className='justify-start text-sm'
-        />
-        Delete
-      </Button>
-    </RowOptionsMenuWrapper>
+      </div>
+    </div>
   );
 };
 
@@ -417,7 +426,7 @@ const ProjectFlockTable = () => {
               },
 
               {
-                accessorKey: 'flock.name',
+                accessorKey: 'flock_name',
                 header: 'Flock',
               },
               {
@@ -564,19 +573,7 @@ const ProjectFlockTable = () => {
       <ConfirmationModal
         ref={confirmModal.ref}
         type='success'
-        text={`Apakah anda yakin ingin reject data transfer ke laying ini (${selectedRowIds.length} data)?`}
-        // text={
-        //   selectedFlocks.length > 0
-        //     ? `Apakah anda yakin ingin approve Project Flock berikut? (${selectedFlocks
-        //         .map(
-        //           (flock) =>
-        //             `${flock.flock?.name ?? '(Tanpa nama)'} - ${
-        //               flock.area?.name ?? '-'
-        //             }`
-        //         )
-        //         .join(', ')})`
-        //     : 'Tidak ada Project Flock yang dipilih.'
-        // }
+        text={`Apakah anda yakin ingin approve data Project Flock ini (${selectedRowIds.length} data)?`}
         secondaryButton={{
           text: 'Tidak',
         }}

src/components/pages/production/project-flock/chickin/ProjectFlockChickinDetail.tsx

@@ -0,0 +1,358 @@
+'use client';
+
+import Badge from '@/components/Badge';
+import Button from '@/components/Button';
+import Card from '@/components/Card';
+import SelectInput, {
+  OptionType,
+  useSelect,
+} from '@/components/input/SelectInput';
+import PillBadge from '@/components/PillBadge';
+import Table from '@/components/Table';
+import { isResponseSuccess } from '@/lib/api-helper';
+import { cn } from '@/lib/helper';
+import { ProjectFlockApi } from '@/services/api/production/project-flock';
+import { ProjectFlockKandangApi } from '@/services/api/production';
+import { useTableFilter } from '@/services/hooks/useTableFilter';
+import { Kandang } from '@/types/api/master-data/kandang';
+import { ProjectFlock } from '@/types/api/production/project-flock';
+import { ProjectFlockKandang } from '@/types/api/production/project-flock-kandang';
+import { Icon } from '@iconify/react';
+import { useRouter } from 'next/navigation';
+import { useEffect, useState } from 'react';
+import useSWR from 'swr';
+
+const ProjectFlockChickinDetail = ({
+  projectFlockId,
+}: {
+  projectFlockId: number | undefined;
+}) => {
+  const router = useRouter();
+
+  // Tables Props
+  const { state: tableFilterState } = useTableFilter({
+    initial: { search: '' },
+    paramMap: { page: 'page', pageSize: 'limit' },
+  });
+
+  // States
+  const [searchProjectFlock, setSearchProjectFlock] = useState('');
+  const [selectedProjectFlock, setSelectedProjectFlock] =
+    useState<OptionType | null>(null);
+  const [projectFlock, setProjectFlock] = useState<ProjectFlock>();
+
+  // Fetch Data
+  const {
+    data: listProjectFlockKandang,
+    isLoading: isLoadingListProjectFlockKandang,
+  } = useSWR(
+    `${ProjectFlockKandangApi.basePath}?${new URLSearchParams({
+      search: searchProjectFlock,
+      project_flock_id:
+        projectFlock?.id?.toString() ?? projectFlockId?.toString() ?? '',
+    }).toString()}`,
+    ProjectFlockKandangApi.getAllFetcher
+  );
+
+  const {
+    options: options,
+    isLoadingOptions: isLoadingListProjectFlock,
+    rawData: listProjectFlock,
+  } = useSelect<ProjectFlock>(
+    ProjectFlockApi.basePath,
+    'id',
+    'flock_name',
+    '',
+    {
+      search: searchProjectFlock,
+    }
+  );
+
+  // Handle Function
+  const handleChickinClick = async (
+    projectFlockKandang: ProjectFlockKandang
+  ) => {
+    router.push(
+      `/production/project-flock/chickin/add/kandang?projectFlockKandangId=${projectFlockKandang.id}&projectFlockId=${projectFlockId ?? selectedProjectFlock?.value}`
+    );
+  };
+
+  const handleChangeProjectFlock = (val: OptionType | null) => {
+    setSelectedProjectFlock(val);
+    if (isResponseSuccess(listProjectFlock) && val) {
+      const selected = listProjectFlock.data.find(
+        (pf) => pf.id === Number(val.value)
+      );
+      setProjectFlock(selected);
+    } else {
+      setProjectFlock(undefined);
+    }
+    if (projectFlockId) {
+      router.push('/production/project-flock/chickin/add');
+    }
+    if (!val && projectFlockId) {
+      router.push('/production/project-flock/chickin/add');
+    }
+  };
+
+  useEffect(() => {
+    if (projectFlockId && isResponseSuccess(listProjectFlock)) {
+      setProjectFlock(
+        listProjectFlock.data.find((pf) => pf.id === Number(projectFlockId))
+      );
+    }
+  }, [projectFlockId, listProjectFlock]);
+  return (
+    <>
+      <div className='flex flex-col gap-4 w-full my-4'>
+        <div className='max-w-full sm:max-w-1/2 md:max-w-3/5 lg:max-w-2/5'>
+          <SelectInput
+            required
+            label='Ganti Project Flock'
+            placeholder='Pilih Project Flock'
+            options={options}
+            onInputChange={(val) => {
+              setSearchProjectFlock(val);
+            }}
+            isLoading={isLoadingListProjectFlock}
+            value={
+              projectFlock
+                ? {
+                    label: `${projectFlock?.flock?.name}`,
+                    value: projectFlock?.id,
+                  }
+                : null
+            }
+            onChange={(val) => {
+              handleChangeProjectFlock(val as OptionType | null);
+            }}
+            isSearchable
+            isClearable
+            startAdornment={
+              projectFlock && (
+                <Badge
+                  variant='soft'
+                  color='success'
+                  size='sm'
+                  className={{
+                    badge: 'whitespace-nowrap font-semibold',
+                  }}
+                >
+                  Periode {projectFlock?.period}
+                </Badge>
+              )
+            }
+          />
+        </div>
+      </div>
+      <Card
+        title='Informasi Flock'
+        className={{
+          wrapper: 'w-full bg-white mb-3',
+        }}
+      >
+        <Table<ProjectFlock>
+          emptyContent={
+            <div className='w-full p-5 text-center'>
+              <span className='text-lg opacity-50'>
+                Pilih project flock terlebih dahulu...
+              </span>
+            </div>
+          }
+          data={projectFlock ? [projectFlock] : []}
+          columns={[
+            {
+              header: 'ID',
+              accessorKey: 'id',
+            },
+            {
+              header: 'Area',
+              accessorKey: 'area.name',
+            },
+            {
+              header: 'Lokasi',
+              accessorKey: 'location.name',
+            },
+            {
+              header: 'Nama Flock',
+              accessorKey: 'flock.name',
+            },
+            {
+              header: 'Kategori',
+              accessorKey: 'category',
+            },
+            {
+              header: 'Status',
+              accessorKey: 'status',
+              cell: (props) => {
+                return props.row.original.approval?.step_name ? (
+                  <PillBadge
+                    color={(() => {
+                      switch (
+                        props.row.original.approval?.step_name.toUpperCase()
+                      ) {
+                        case 'AKTIF':
+                          return 'red';
+                        case 'PENGAJUAN':
+                          return 'green';
+                        default:
+                          return 'gray';
+                      }
+                    })()}
+                    content={props.row.original.approval?.step_name
+                      .toLowerCase()
+                      .replace(/_/g, ' ')
+                      .replace(/\b\w/g, (char) => char.toUpperCase())}
+                  />
+                ) : (
+                  '-'
+                );
+              },
+            },
+            {
+              header: 'Periode',
+              accessorKey: 'period',
+            },
+            {
+              header: 'FCR Layer',
+              accessorKey: 'fcr.name',
+            },
+          ]}
+          page={undefined}
+          className={{
+            containerClassName: cn({
+              'mb-20': projectFlock && projectFlock.kandangs?.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',
+            paginationClassName: 'hidden',
+          }}
+        />
+      </Card>
+      <Card
+        title='Daftar Kandang'
+        className={{
+          wrapper: 'w-full bg-white',
+        }}
+      >
+        <Table<ProjectFlockKandang>
+          emptyContent={
+            <div className='w-full p-5 text-center'>
+              <span className='text-lg opacity-50'>
+                Pilih project flock terlebih dahulu...
+              </span>
+            </div>
+          }
+          data={
+            projectFlock && isResponseSuccess(listProjectFlockKandang)
+              ? listProjectFlockKandang.data
+              : []
+          }
+          columns={[
+            {
+              header: '#',
+              cell: (props) =>
+                tableFilterState.pageSize * (tableFilterState.page - 1) +
+                props.row.index +
+                1,
+            },
+            {
+              accessorFn: (row) => row?.project_flock?.area?.name,
+              header: 'Area',
+            },
+            {
+              accessorFn: (row) => row?.project_flock?.location?.name,
+              header: 'Lokasi',
+            },
+            {
+              accessorKey: 'kandang.name',
+              header: 'Kandang',
+            },
+            {
+              accessorKey: 'kandang.capacity',
+              header: 'Kapasitas',
+            },
+            {
+              accessorKey: 'approval.step_name',
+              header: 'Status',
+              cell: (props) => {
+                return props.row.original.approval?.step_name ? (
+                  <PillBadge
+                    color={(() => {
+                      switch (
+                        props.row.original.approval?.step_name.toUpperCase()
+                      ) {
+                        case 'DISETUJUI':
+                          return 'green';
+                        case 'PENGAJUAN':
+                          return 'yellow';
+                        default:
+                          return 'gray';
+                      }
+                    })()}
+                    content={props.row.original.approval?.step_name
+                      .toLowerCase()
+                      .replace(/_/g, ' ')
+                      .replace(/\b\w/g, (char) => char.toUpperCase())}
+                  />
+                ) : projectFlock?.approval?.step_number === 1 ? (
+                  <PillBadge color='red' content={'Tidak Dapat Chick In'} />
+                ) : (
+                  <PillBadge color='gray' content={'Belum Chick In'} />
+                );
+              },
+            },
+            {
+              header: 'Aksi',
+              cell: (props) => {
+                return (
+                  <>
+                    <Button
+                      color='success'
+                      variant='outline'
+                      onClick={() => {
+                        handleChickinClick(props.row.original);
+                      }}
+                      className='p-1'
+                      disabled={projectFlock?.approval?.step_number === 1}
+                    >
+                      <Icon
+                        icon='mdi:home-import-outline'
+                        width={18}
+                        height={18}
+                      />
+                      Chickin
+                    </Button>
+                  </>
+                );
+              },
+            },
+          ]}
+          page={undefined}
+          className={{
+            containerClassName: cn({
+              'mb-20': projectFlock && projectFlock.kandangs?.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',
+            paginationClassName: 'hidden',
+          }}
+        />
+      </Card>
+    </>
+  );
+};
+
+export default ProjectFlockChickinDetail;

src/components/pages/production/project-flock/form/ProjectFlockForm.schema.ts

@@ -6,9 +6,7 @@ export const ProjectFlockFormSchema = Yup.object({
     value: Yup.number().required('ID Flock wajib diisi!'),
     label: Yup.string().required('Nama Flock wajib diisi!'),
   }).nullable(),
-  flock_id: Yup.number()
-    .min(1, 'Flock wajib diisi!')
-    .required('Flock wajib diisi!'),
+  flock_name: Yup.string().required('Nama Flock wajib diisi!'),
 
   // Area
   area: Yup.object({

src/components/pages/production/project-flock/form/ProjectFlockForm.tsx

@@ -1,7 +1,10 @@
 'use client';
 
 import Button from '@/components/Button';
-import SelectInput, { OptionType } from '@/components/input/SelectInput';
+import SelectInput, {
+  OptionType,
+  useSelect,
+} from '@/components/input/SelectInput';
 import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
 import {
   AreaApi,
@@ -23,19 +26,22 @@ import {
 import {
   ProjectFlockApprovalPayload,
   CreateProjectFlockPayload,
-  PeriodFlock,
   ProjectFlock,
 } from '@/types/api/production/project-flock';
 import toast from 'react-hot-toast';
 import TextInput from '@/components/input/TextInput';
 import { Kandang } from '@/types/api/master-data/kandang';
 import Collapse from '@/components/Collapse';
-import { ProjectFlockApi } from '@/services/api/production';
+import { ProjectFlockApi } from '@/services/api/production/project-flock';
 import { BaseApiResponse } from '@/types/api/api-general';
 import { FLOCK_CATEGORY_OPTIONS } from '@/config/constant';
 import { useModal } from '@/components/Modal';
 import ConfirmationModal from '@/components/modal/ConfirmationModal';
 import ProjectFlockKandangTable from './ProjectFlockKandangTable';
+import ApprovalSteps, {
+  useApprovalSteps,
+} from '@/components/pages/ApprovalSteps';
+import { PROJECT_FLOCK_APPROVAL_LINE } from '@/config/approval-line';
 
 interface ProjectFlockFormProps {
   formType?: 'add' | 'edit' | 'detail';
@@ -52,22 +58,21 @@ const ProjectFlockForm = ({
 }: ProjectFlockFormProps) => {
   // State
   const router = useRouter();
+
   const [projectFlockFormErrorMessage, setProjectFlockFormErrorMessage] =
     useState('');
   const [selectedArea, setSelectedArea] = useState('');
-
   const [selectedLocation, setSelectedLocation] = useState('');
-  const [disabledLocation, setDisabledLocation] = useState(true);
-  const [optionsLocation, setOptionsLocation] = useState<OptionType[]>([]);
-
+  const [disabledLocation, setDisabledLocation] = useState(
+    initialValues?.location?.id ? false : true
+  );
   const [openSelectKandangs, setOpenSelectKandangs] = useState(
     initialValues?.kandangs && initialValues?.kandangs?.length > 0
   );
   const [optionsKandang, setOptionsKandang] = useState<Kandang[]>(
     initialValues?.kandangs ?? []
   );
-
-  const [selectedFlock, setSelectedFlock] = useState<number>(
+  const [selectedFlock, setSelectedFlock] = useState<number | undefined>(
     initialValues?.flock?.id ?? 0
   );
 
@@ -77,7 +82,7 @@ const ProjectFlockForm = ({
   const [isDeleteLoading, setIsDeleteLoading] = useState(false);
   const [isApproveLoading, setIsApproveLoading] = useState(false);
   const [isApprovedDisabled, setIsApprovedDisabled] = useState(
-    initialValues?.approval.step_name == 'Pengajuan' ? false : true
+    initialValues?.approval?.step_name == 'Pengajuan' ? false : true
   );
   const [isRejectedDisabled, setIsRejectedDisabled] =
     useState(!isApprovedDisabled);
@@ -105,37 +110,27 @@ const ProjectFlockForm = ({
   }, [initialValues]);
 
   // Fetch Data
-  const flockUrl = `${FlockApi.basePath}?${new URLSearchParams({
-    search: '',
-  }).toString()}`;
-  const { data: flocks, isLoading: isLoadingFlocks } = useSWR(
-    flockUrl,
-    FlockApi.getAllFetcher
+  const { isLoadingOptions: isLoadingFlocks, options: optionsFlock } =
+    useSelect(FlockApi.basePath, 'id', 'name');
+
+  const { options: optionsArea, isLoadingOptions: isLoadingAreas } = useSelect(
+    AreaApi.basePath,
+    'id',
+    'name'
   );
 
-  const areaUrl = `${AreaApi.basePath}?${new URLSearchParams({
-    search: '',
-  }).toString()}`;
-  const { data: areas, isLoading: isLoadingAreas } = useSWR(
-    areaUrl,
-    AreaApi.getAllFetcher
-  );
+  const { options: optionsLocation, isLoadingOptions: isLoadingLocations } =
+    useSelect(LocationApi.basePath, 'id', 'name', '', {
+      area_id:
+        selectedArea != ''
+          ? selectedArea
+          : ((initialValues?.area?.id ?? '') as string),
+    });
 
-  const locationUrl = `${LocationApi.basePath}?${new URLSearchParams({
-    search: '',
-    area_id: selectedArea,
-  }).toString()}`;
-  const { data: locations, isLoading: isLoadingLocations } = useSWR(
-    locationUrl,
-    LocationApi.getAllFetcher
-  );
-
-  const fcrUrl = `${FcrApi.basePath}?${new URLSearchParams({
-    search: '',
-  }).toString()}`;
-  const { data: fcrs, isLoading: isLoadingFcrs } = useSWR(
-    fcrUrl,
-    FcrApi.getAllFetcher
+  const { options: optionsFcr, isLoadingOptions: isLoadingFcrs } = useSelect(
+    FcrApi.basePath,
+    'id',
+    'name'
   );
 
   const kandangUrl = `${KandangApi.basePath}?${new URLSearchParams({
@@ -148,46 +143,22 @@ const ProjectFlockForm = ({
     mutate: refreshKandang,
   } = useSWR(kandangUrl, KandangApi.getAllFetcher);
 
-  const getPeriodFlocksUrl = `flocks/${selectedFlock}/periods`;
-
   const { data: periodFlocks, isLoading: isLoadingPeriodFlocks } = useSWR(
-    getPeriodFlocksUrl,
-    () =>
-      ProjectFlockApi.customRequest<BaseApiResponse<PeriodFlock>, 'GET'>(
-        getPeriodFlocksUrl,
-        { method: 'GET' }
-      )
+    `${selectedFlock?.toString()}/periods`,
+    (id: string) => ProjectFlockApi.getNextPeriod(id)
   );
 
-  // Map Data to Options
-  const optionsArea = isResponseSuccess(areas)
-    ? areas?.data.map((area) => ({
-        value: area.id,
-        label: area.name,
-      }))
-    : [];
-  const optionsFcr = isResponseSuccess(fcrs)
-    ? fcrs?.data.map((fcr) => ({
-        value: fcr.id,
-        label: fcr.name,
-      }))
-    : [];
-  const optionsFlock = isResponseSuccess(flocks)
-    ? flocks?.data.map((flock) => ({
-        value: flock.id,
-        label: flock.name,
-      }))
-    : [];
-
-  useEffect(() => {
-    if (isResponseSuccess(locations)) {
-      const options = locations.data.map((location) => ({
-        value: location.id,
-        label: location.name,
-      }));
-      setOptionsLocation(options);
-    }
-  }, [locations, setSelectedLocation]);
+  const {
+    approvals,
+    isLoading: approvalsLoading,
+    rawDataApprovals: rawDataApprovals,
+    refresh: refreshApprovals,
+  } = useApprovalSteps({
+    latestApproval: initialValues?.approval,
+    approvalLines: PROJECT_FLOCK_APPROVAL_LINE,
+    moduleName: 'PROJECT_FLOCKS',
+    moduleId: initialValues?.id.toString() ?? '',
+  });
 
   useEffect(() => {
     if (isResponseSuccess(kandang)) {
@@ -195,12 +166,24 @@ const ProjectFlockForm = ({
         setOptionsKandang(kandang.data);
         setOpenSelectKandangs(true);
       } else {
+        formik.setFieldValue('kandang_ids', []);
         setOptionsKandang([]);
         setOpenSelectKandangs(false);
-        formik.setFieldValue('kandang_ids', []);
+        const selectedRowIds = Object.keys(rowSelection)
+          .filter((id) => rowSelection[id])
+          .map((id) => parseInt(id));
+        if (
+          JSON.stringify(kandang.data.map((k) => k.id)) !==
+          JSON.stringify(formik.values.kandang_ids)
+        ) {
+          formik.setFieldValue('kandang_ids', []);
+          setRowSelection({});
+        } else {
+          formik.setFieldValue('kandang_ids', selectedRowIds);
+        }
       }
     }
-  }, [kandang]);
+  }, [kandang, selectedLocation]);
   useEffect(() => {
     if (initialValues?.kandangs) {
       refreshKandang();
@@ -211,7 +194,7 @@ const ProjectFlockForm = ({
       );
       setRowSelection(newRowSelection);
     }
-  }, [initialValues, refreshKandang]);
+  }, [initialValues, kandang]);
 
   // Options Handler
   const areaChangeHandler = (val: OptionType | OptionType[] | null) => {
@@ -232,9 +215,13 @@ const ProjectFlockForm = ({
   };
 
   const locationChangeHandler = (val: OptionType | OptionType[] | null) => {
+    formik.setFieldValue('kandang_ids', []);
     setSelectedLocation((val as OptionType)?.value as string);
     optionChangeHandler(val, 'location');
-    formik.setFieldValue('kandang_ids', []);
+    const selectedRowIds = Object.keys(rowSelection)
+      .filter((id) => rowSelection[id])
+      .map((id) => parseInt(id));
+    formik.setFieldValue('kandang_ids', selectedRowIds);
   };
 
   const optionChangeHandler = (
@@ -292,16 +279,17 @@ const ProjectFlockForm = ({
   // Formik InitialValue
   const formikInitialValues = useMemo<ProjectFlockFormValues>(() => {
     return {
-      name: initialValues?.name ?? '',
+      name: initialValues?.flock_name,
       flock: initialValues?.flock
         ? {
-            value: initialValues.flock.id,
-            label: initialValues.flock.name,
+            value: initialValues?.flock?.id ?? 0,
+            label:
+              initialValues?.flock?.name ?? initialValues?.flock_name ?? '',
           }
         : null,
       area: initialValues?.area
         ? {
-            value: initialValues.area.id,
+            value: initialValues.area?.id,
             label: initialValues.area.name,
           }
         : null,
@@ -313,24 +301,25 @@ const ProjectFlockForm = ({
         : null,
       fcr: initialValues?.fcr
         ? {
-            value: initialValues.fcr.id,
+            value: initialValues.fcr?.id,
             label: initialValues.fcr.name,
           }
         : null,
       location: initialValues?.location
         ? {
-            value: initialValues.location.id,
+            value: initialValues.location?.id,
             label: initialValues.location.name,
           }
         : null,
       flock_id: initialValues?.flock?.id ?? 0,
+      flock_name: initialValues?.flock_name ?? '',
       area_id: initialValues?.area?.id ?? 0,
       category: initialValues?.category as NonNullable<
         'GROWING' | 'LAYING' | undefined
       >,
       fcr_id: initialValues?.fcr?.id ?? 0,
       location_id: initialValues?.location?.id ?? 0,
-      period: initialValues?.period ?? 0,
+      period: initialValues?.period ?? 1,
       kandang_ids: initialValues?.kandangs?.map((k: Kandang) => k.id) as (
         | number
         | undefined
@@ -340,7 +329,53 @@ const ProjectFlockForm = ({
 
   // Formik
   const formik = useFormik<ProjectFlockFormValues>({
-    initialValues: formikInitialValues,
+    initialValues: {
+      name: initialValues?.flock_name,
+      flock: initialValues?.flock
+        ? {
+            value: initialValues?.flock?.id ?? 0,
+            label:
+              initialValues?.flock?.name ?? initialValues?.flock_name ?? '',
+          }
+        : null,
+      area: initialValues?.area
+        ? {
+            value: initialValues.area?.id,
+            label: initialValues.area.name,
+          }
+        : null,
+      category_option: initialValues?.category
+        ? {
+            value: initialValues.category,
+            label: initialValues.category,
+          }
+        : null,
+      fcr: initialValues?.fcr
+        ? {
+            value: initialValues.fcr?.id,
+            label: initialValues.fcr.name,
+          }
+        : null,
+      location: initialValues?.location
+        ? {
+            value: initialValues.location?.id,
+            label: initialValues.location.name,
+          }
+        : null,
+      flock_id: initialValues?.flock?.id ?? 0,
+      flock_name: initialValues?.flock_name ?? '',
+      area_id: initialValues?.area?.id ?? 0,
+      category: initialValues?.category as NonNullable<
+        'GROWING' | 'LAYING' | undefined
+      >,
+      fcr_id: initialValues?.fcr?.id ?? 0,
+      location_id: initialValues?.location?.id ?? 0,
+      period: initialValues?.period ?? 1,
+      kandang_ids: initialValues?.kandangs?.map((k: Kandang) => k.id) as (
+        | number
+        | undefined
+      )[],
+    } as ProjectFlockFormValues,
     enableReinitialize: true,
     validationSchema:
       formType == 'add' ? ProjectFlockFormSchema : UpdateProjectFlockFormSchema,
@@ -350,7 +385,7 @@ const ProjectFlockForm = ({
     onSubmit: async (values) => {
       setProjectFlockFormErrorMessage('');
       const payload: CreateProjectFlockPayload = {
-        flock_id: values.flock_id as number,
+        flock_name: values.flock?.label as string,
         area_id: values.area_id as number,
         category: values.category as string,
         fcr_id: values.fcr_id as number,
@@ -377,8 +412,8 @@ const ProjectFlockForm = ({
   useEffect(() => {
     if (formType == 'detail') {
       formik.setFieldValue('area', {
-        value: initialValues?.area.id,
-        label: initialValues?.area.name,
+        value: initialValues?.area?.id,
+        label: initialValues?.area?.name,
       });
       formik.setFieldValue('area_id', initialValues?.area_id);
       if (initialValues?.area_id) {
@@ -391,7 +426,7 @@ const ProjectFlockForm = ({
 
   useEffect(() => {
     formikSetValues(formikInitialValues);
-  }, [formikSetValues, formikInitialValues]);
+  }, [formikSetValues]);
 
   // Aktifkan lokasi jika formType = 'detail'
   useEffect(() => {
@@ -402,9 +437,11 @@ const ProjectFlockForm = ({
 
   // Set lokasi otomatis berdasarkan initialValues saat formType = 'detail'
   useEffect(() => {
-    if (formType != 'add' && initialValues?.location?.id) {
-      setSelectedLocation(initialValues.location?.id.toString());
-      setDisabledLocation(false); // biar dropdown lokasi aktif juga
+    if (formType != 'add') {
+      if (initialValues?.location?.id) {
+        setSelectedLocation(initialValues.location?.id.toString());
+        setDisabledLocation(false); // biar dropdown lokasi aktif juga
+      }
     }
   }, [formType, initialValues]);
 
@@ -416,6 +453,9 @@ const ProjectFlockForm = ({
     if (isResponseSuccess(periodFlocks)) {
       formik.setFieldValue('period', periodFlocks.data.next_period);
     }
+    if (isResponseError(periodFlocks)) {
+      console.log(periodFlocks?.message as string);
+    }
   }, [periodFlocks]);
 
   useEffect(() => {
@@ -459,7 +499,7 @@ const ProjectFlockForm = ({
       method: 'POST',
       payload: {
         action: action,
-        approvable_ids: [initialValues.id],
+        approvable_ids: [initialValues?.id],
       },
     });
 
@@ -467,19 +507,12 @@ const ProjectFlockForm = ({
       if (refreshProjectFlocks) {
         await refreshProjectFlocks();
       }
-      // if (action == 'APPROVED') {
-      //   setIsApprovedDisabled(true);
-      //   setIsRejectedDisabled(false);
-      // }
-      // if (action == 'REJECTED') {
-      //   setIsRejectedDisabled(true);
-      //   setIsApprovedDisabled(false);
-      // }
       toast.success(approveProjectFlockRes.message as string);
     }
     if (isResponseError(approveProjectFlockRes)) {
       toast.error(approveProjectFlockRes?.message as string);
     }
+    refreshApprovals();
     confirmModal.closeModal();
     setIsApproveLoading(false);
   };
@@ -522,6 +555,9 @@ const ProjectFlockForm = ({
             </div>
           </div>
         )}
+        {approvals && !approvalsLoading && (
+          <ApprovalSteps approvals={approvals} />
+        )}
         {formType == 'detail' && (
           <div className='w-full flex flex-col sm:flex-row gap-2 py-4'>
             <Button
@@ -554,6 +590,21 @@ const ProjectFlockForm = ({
               <Icon icon='mdi:times' width={24} height={24} />
               Reject
             </Button>
+            {initialValues?.approval?.step_number == 2 && (
+              <Button
+                variant='outline'
+                color='success'
+                className='w-full sm:w-fit'
+                onClick={() => {
+                  router.push(
+                    `/production/project-flock/chickin/add?projectFlockId=${initialValues?.id}`
+                  );
+                }}
+              >
+                <Icon icon='mdi:home-import-outline' width={18} height={18} />
+                Chickin
+              </Button>
+            )}
           </div>
         )}
         <form
@@ -587,13 +638,18 @@ const ProjectFlockForm = ({
                   onChange={(val) => {
                     optionChangeHandler(val, 'flock');
                     setSelectedFlock((val as OptionType)?.value as number);
+                    formik.setFieldValue(
+                      'flock_name',
+                      (val as OptionType)?.label
+                    );
                   }}
                   options={optionsFlock}
                   isLoading={isLoadingFlocks}
                   isError={
-                    formik.touched.flock_id && Boolean(formik.errors.flock_id)
+                    formik.touched.flock_name &&
+                    Boolean(formik.errors.flock_name)
                   }
-                  errorMessage={formik.errors.flock_id as string}
+                  errorMessage={formik.errors.flock_name as string}
                   isClearable
                   isDisabled={formType === 'detail'}
                 />
@@ -602,7 +658,11 @@ const ProjectFlockForm = ({
                   label='Lokasi'
                   value={formik.values.location as OptionType}
                   onChange={locationChangeHandler}
-                  options={optionsLocation}
+                  options={
+                    selectedArea != '' || initialValues?.area?.id
+                      ? optionsLocation
+                      : []
+                  }
                   isLoading={isLoadingLocations}
                   isError={
                     formik.touched.location_id &&
@@ -647,7 +707,7 @@ const ProjectFlockForm = ({
                   name='period'
                   label='Periode'
                   placeholder='Masukkan periode yang project'
-                  value={formik.values.period as number}
+                  value={formik.values.period ?? (1 as number)}
                   onChange={formik.handleChange}
                   isError={
                     formik.touched.period && Boolean(formik.errors.period)
@@ -695,6 +755,7 @@ const ProjectFlockForm = ({
                     setRowSelection={setRowSelection}
                     selectedIds={formik.values.kandang_ids}
                     formType={formType}
+                    initialValues={initialValues?.kandangs ?? []}
                   />
                 </div>
               </Collapse>
@@ -716,7 +777,10 @@ const ProjectFlockForm = ({
                   type='submit'
                   color='primary'
                   isLoading={formik.isSubmitting}
-                  disabled={!formik.isValid || formik.isSubmitting}
+                  disabled={
+                    !formik.isValid || formik.isSubmitting
+                    // TODO: Add logic && ketika nilai kandang_ids sudah beda dari initial values
+                  }
                   className='px-4'
                 >
                   Submit
@@ -726,7 +790,25 @@ const ProjectFlockForm = ({
           </div>
         </form>
         {formType != 'add' && (
-          <div className='w-full'>
+          <div className='flex flex-row gap-2 mb-6'>
+            {formType != 'edit' && (
+              <Button
+                onClick={() => {
+                  router.push(
+                    `/production/project-flock/detail/edit?projectFlockId=${initialValues?.id}`
+                  );
+                }}
+                color='warning'
+              >
+                <Icon
+                  icon='mdi:pencil-outline'
+                  width={16}
+                  height={16}
+                  className='justify-start text-sm'
+                />
+                Edit
+              </Button>
+            )}
             <Button
               onClick={() => {
                 if (initialValues?.id) {

src/components/pages/production/project-flock/form/ProjectFlockKandangTable.tsx

@@ -5,144 +5,158 @@ import PillBadge from '@/components/PillBadge';
 import Table from '@/components/Table';
 import { cn } from '@/lib/helper';
 import { Kandang } from '@/types/api/master-data/kandang';
-import { OnChangeFn } from '@tanstack/react-table';
+import { OnChangeFn, Row } from '@tanstack/react-table';
+import { useMemo } from 'react';
 
 const ProjectFlockKandangTable = ({
   listKandang,
   rowSelection,
   setRowSelection,
   selectedIds,
+  initialValues,
   formType = 'add',
 }: {
   listKandang: Kandang[];
   rowSelection: Record<string, boolean>;
   setRowSelection: OnChangeFn<Record<string, boolean>>;
   selectedIds: (number | undefined)[];
+  initialValues?: Kandang[];
   formType: 'add' | 'edit' | 'detail';
 }) => {
-  console.log('selectedIds');
-  console.log(selectedIds);
+  const initialKandangIdSet = useMemo(() => {
+    return initialValues?.map((k) => k.id) ?? [];
+  }, [initialValues]);
+  const isRowEnabled = (row: Row<Kandang>) => {
+    const isDisabled =
+      !initialKandangIdSet.includes(row.original.id) &&
+      (row.original.status == 'ACTIVE' ||
+        row.original.status == 'PENGAJUAN' ||
+        formType == 'detail');
+    return !isDisabled;
+  };
   return (
-    <Table<Kandang>
-      data={listKandang}
-      columns={[
-        {
-          id: 'select',
-          header: ({ table }) => {
-            const allRows = table.getRowModel().rows;
-            const selectableRows = allRows.filter(
-              (row) =>
-                row.original.status == 'NON_ACTIVE' ||
-                row.original.status == 'PENGAJUAN'
-            );
+    <>
+      <Table<Kandang>
+        data={listKandang}
+        columns={[
+          {
+            id: 'select',
+            header: ({ table }) => {
+              const allRows = table.getRowModel().rows;
+              // 1. Filter semua baris dengan logika yang sama persis seperti di cell
+              const selectableRows = allRows.filter(isRowEnabled);
 
-            const allSelected =
-              selectableRows.every((row) => row.getIsSelected()) &&
-              selectableRows.length != 0 &&
-              formType != 'detail';
+              // 2. Cek apakah SEMUA baris yang BISA DIPILIH sudah terpilih
+              const allSelected =
+                selectableRows.length > 0 &&
+                selectableRows.every((row) => row.getIsSelected());
 
-            const someSelected =
-              selectableRows.some((row) => row.getIsSelected()) &&
-              !allSelected &&
-              formType != 'detail';
+              // 3. Cek apakah BEBERAPA baris yang BISA DIPILIH sudah terpilih
+              const someSelected =
+                selectableRows.some((row) => row.getIsSelected()) &&
+                !allSelected;
 
-            const toggleSelectableRows = () => {
-              const shouldSelect = !allSelected;
-              selectableRows.forEach((row) => row.toggleSelected(shouldSelect));
-            };
+              // 4. Fungsi toggle HANYA akan mentoggle baris yang BISA DIPILIH
+              const toggleSelectableRows = () => {
+                const shouldSelect = !allSelected;
+                selectableRows.forEach((row) =>
+                  row.toggleSelected(shouldSelect)
+                );
+              };
 
-            return (
-              <div className='w-full flex flex-row justify-center'>
+              return (
+                <div className='w-full flex flex-row justify-center'>
+                  <CheckboxInput
+                    name='allRow'
+                    checked={allSelected}
+                    indeterminate={someSelected}
+                    onChange={toggleSelectableRows}
+                    disabled={
+                      selectableRows.length === 0 || formType == 'detail'
+                    }
+                  />
+                </div>
+              );
+            },
+            cell: ({ row }) => {
+              return (
                 <CheckboxInput
-                  name='allRow'
-                  checked={allSelected}
-                  indeterminate={someSelected}
-                  onChange={toggleSelectableRows}
+                  name='row'
+                  checked={
+                    (row.getIsSelected() &&
+                      (row.original.status == 'NON_ACTIVE' ||
+                        row.original.status == 'PENGAJUAN')) ||
+                    (selectedIds && selectedIds.includes(row.original.id))
+                  }
                   disabled={
-                    listKandang.filter(
-                      (kandang) =>
-                        kandang.status == 'NON_ACTIVE' ||
-                        kandang.status == 'PENGAJUAN'
-                    ).length == 0 || formType == 'detail'
+                    formType == 'detail' ||
+                    (!initialKandangIdSet.includes(row.original.id) &&
+                      (row.original.status == 'ACTIVE' ||
+                        row.original.status == 'PENGAJUAN'))
                   }
+                  indeterminate={row.getIsSomeSelected()}
+                  onChange={row.getToggleSelectedHandler()}
                 />
-              </div>
-            );
+              );
+            },
           },
-          cell: ({ row }) => {
-            return (
-              <CheckboxInput
-                name='row'
-                checked={
-                  (row.getIsSelected() &&
-                    (row.original.status == 'NON_ACTIVE' ||
-                      row.original.status == 'PENGAJUAN')) ||
-                  selectedIds.includes(row.original.id)
-                }
-                disabled={
-                  !row.getCanSelect() ||
-                  (row.original.status != 'NON_ACTIVE' &&
-                    row.original.status != 'PENGAJUAN') ||
-                  formType == 'detail'
-                }
-                indeterminate={row.getIsSomeSelected()}
-                onChange={row.getToggleSelectedHandler()}
-              />
-            );
+          {
+            accessorFn: (row) => row.name,
+            header: 'Kandang',
           },
-        },
-        {
-          accessorFn: (row) => row.name,
-          header: 'Kandang',
-        },
-        {
-          accessorFn: (row) => row.status,
-          header: 'Status',
-          cell: (props) => {
-            return (
-              <PillBadge
-                color={(() => {
-                  switch (props.row.original.status) {
-                    case 'ACTIVE':
-                      return 'red';
-                    case 'PENGAJUAN':
-                      return 'green';
-                    case 'NON_ACTIVE':
-                      return 'blue';
-                    default:
-                      return 'gray';
-                  }
-                })()}
-                content={props.row.original.status
-                  .toLowerCase()
-                  .replace(/_/g, ' ')
-                  .replace(/\b\w/g, (char) => char.toUpperCase())}
-              />
-            );
+          {
+            accessorFn: (row) => row.status,
+            header: 'Status',
+            cell: (props) => {
+              return (
+                <PillBadge
+                  color={(() => {
+                    switch (props.row.original.status) {
+                      case 'ACTIVE':
+                        return 'red';
+                      case 'PENGAJUAN':
+                        return 'green';
+                      case 'NON_ACTIVE':
+                        return 'blue';
+                      default:
+                        return 'gray';
+                    }
+                  })()}
+                  content={props.row.original.status
+                    .toLowerCase()
+                    .replace(/_/g, ' ')
+                    .replace(/\b\w/g, (char) => char.toUpperCase())}
+                />
+              );
+            },
           },
-        },
-        {
-          accessorFn: (row) => row.pic?.name,
-          header: 'Penanggung Jawab',
-        },
-      ]}
-      className={{
-        containerClassName: cn({
-          'mb-20': listKandang?.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',
-        paginationClassName: 'hidden',
-      }}
-      rowSelection={rowSelection}
-      setRowSelection={setRowSelection}
-    />
+          {
+            accessorFn: (row) => row.capacity,
+            header: 'Kapasitas',
+          },
+          {
+            accessorFn: (row) => row.pic?.name,
+            header: 'Penanggung Jawab',
+          },
+        ]}
+        className={{
+          containerClassName: cn({
+            'mb-20': listKandang?.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',
+          paginationClassName: 'hidden',
+        }}
+        rowSelection={rowSelection}
+        setRowSelection={setRowSelection}
+      />
+    </>
   );
 };
 

src/components/pages/production/recording/RecordingTable.tsx

@@ -53,6 +53,7 @@ const dummyRecordings: Recording[] = [
     },
     coop: {
       id: 1,
+      capacity: 1000,
       name: 'Coop 1',
       status: 'ACTIVE',
       location: {
@@ -78,7 +79,6 @@ const dummyRecordings: Recording[] = [
         email: 'admin@example.com',
         name: 'Admin',
       },
-      capacity: 100000,
     },
     feed_data: [
       {

src/components/pages/production/recording/form/RecordingForm.tsx

@@ -22,7 +22,7 @@ import {
   UpdateRecordingFormSchema,
 } from './RecordingForm.schema';
 import { useRecordingFormHandlers } from './useRecordingFormHandlers';
-import { ProjectFlockApi } from '@/services/api/production';
+import { ProjectFlockApi } from '@/services/api/production/project-flock';
 import { isResponseSuccess } from '@/lib/api-helper';
 import { RECORDING_FLAG_OPTIONS } from '@/config/constant';
 import useSWR from 'swr';
@@ -215,7 +215,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
   const flockOptions = isResponseSuccess(projectFlocks)
     ? projectFlocks.data.map((flock) => ({
         value: flock.id,
-        label: flock.flock.name,
+        label: flock.flock?.name || '',
       }))
     : [];