Merge branch 'development' of gitlab.com:mbugroup/lti-web-client into feat/FE/US-339/TASK-361-362-363-slicing-purchase-and-integrate-purchase-report-page

src/components/pages/closing/ClosingDetail.tsx

@@ -0,0 +1,95 @@
+'use client';
+
+import { useMemo, useState } from 'react';
+
+import { Icon } from '@iconify/react';
+import Button from '@/components/Button';
+import Tabs from '@/components/Tabs';
+import ClosingGeneralInformationTable from '@/components/pages/closing/ClosingGeneralInformationTable';
+
+import { ClosingGeneralInformation } from '@/types/api/closing';
+import ClosingSapronakTabContent from './ClosingSapronakTabContent';
+
+interface ClosingDetailProps {
+  id: number;
+  initialValue?: ClosingGeneralInformation;
+}
+
+const ClosingDetail: React.FC<ClosingDetailProps> = ({ id, initialValue }) => {
+  const [activeTab, setActiveTab] = useState<string>('sapronak');
+
+  const closingDetailTabs = useMemo(() => {
+    const validTabs = [
+      {
+        id: 'sapronak',
+        label: 'Sapronak',
+        content: <ClosingSapronakTabContent projectFlockId={id} />,
+      },
+      {
+        id: 'perhitunganSapronak',
+        label: 'Perhitungan Sapronak',
+        content: 'Perhitungan Sapronak',
+      },
+      {
+        id: 'penjualan',
+        label: 'Penjualan',
+        content: 'Penjualan',
+      },
+      {
+        id: 'overhead',
+        label: 'Overhead',
+        content: 'Overhead',
+      },
+      {
+        id: 'hppEkspedisi',
+        label: 'HPP Ekspedisi',
+        content: 'HPP Ekspedisi',
+      },
+      {
+        id: 'dataProduksi',
+        label: 'Data Produksi',
+        content: 'Data Produksi',
+      },
+      {
+        id: 'keuangan',
+        label: 'Keuangan',
+        content: 'Keuangan',
+      },
+    ];
+
+    return validTabs;
+  }, [initialValue]);
+
+  return (
+    <>
+      <section className='w-full max-w-7xl pb-16'>
+        <header className='flex flex-col gap-4'>
+          <Button
+            href='/closing'
+            variant='link'
+            className='w-fit p-0 text-primary'
+          >
+            <Icon icon='uil:arrow-left' width={24} height={24} />
+            Kembali
+          </Button>
+
+          <h1 className='text-2xl font-bold text-center'>Detail Closing</h1>
+        </header>
+
+        <ClosingGeneralInformationTable initialValue={initialValue} />
+
+        <Tabs
+          activeTabId={activeTab}
+          onTabChange={setActiveTab}
+          tabs={closingDetailTabs}
+          variant='lifted'
+          className={{
+            wrapper: 'w-full mt-4',
+          }}
+        />
+      </section>
+    </>
+  );
+};
+
+export default ClosingDetail;

src/components/pages/closing/ClosingGeneralInformationTable.tsx

@@ -0,0 +1,100 @@
+import { ClosingGeneralInformation } from '@/types/api/closing';
+
+interface ClosingGeneralInformationProps {
+  initialValue?: ClosingGeneralInformation;
+}
+
+const ClosingGeneralInformationTable = ({
+  initialValue,
+}: ClosingGeneralInformationProps) => {
+  return (
+    <div className='w-full my-4 @container'>
+      <div className='flex flex-col @sm:flex-row gap-4'>
+        <div className='w-full'>
+          <div className='overflow-x-auto'>
+            <table className='table table-zebra table-sm'>
+              <tbody>
+                <tr>
+                  <td>Lokasi</td>
+                  <td>:</td>
+                  <td>{initialValue?.location_name}</td>
+                </tr>
+                <tr>
+                  <td>Periode</td>
+                  <td>:</td>
+                  <td>{initialValue?.period}</td>
+                </tr>
+                <tr>
+                  <td>Kategori</td>
+                  <td>:</td>
+                  <td>{initialValue?.project_category}</td>
+                </tr>
+                <tr>
+                  <td>Populasi</td>
+                  <td>:</td>
+                  <td>{initialValue?.population} Ekor</td>
+                </tr>
+                <tr>
+                  <td>Jenis Project</td>
+                  <td>:</td>
+                  <td>{initialValue?.project_type}</td>
+                </tr>
+                <tr className='table-row @sm:hidden'>
+                  <td>Kandang Aktif</td>
+                  <td>:</td>
+                  <td>{initialValue?.active_house_count} Kandang</td>
+                </tr>
+                <tr className='table-row @sm:hidden'>
+                  <td>Status Pembayaran Penjualan</td>
+                  <td>:</td>
+                  <td>{initialValue?.sales_payment_status}</td>
+                </tr>
+                <tr className='table-row @sm:hidden'>
+                  <td>Status Project</td>
+                  <td>:</td>
+                  <td>{initialValue?.project_status}</td>
+                </tr>
+                <tr className='table-row @sm:hidden'>
+                  <td>Status Closing</td>
+                  <td>:</td>
+                  <td>{initialValue?.closing_status}</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+
+        <div className='w-full hidden @sm:block'>
+          <div className='overflow-x-auto'>
+            <table className='table table-zebra table-sm'>
+              <tbody>
+                <tr>
+                  <td>Kandang Aktif</td>
+                  <td>:</td>
+                  <td>{initialValue?.active_house_count} Kandang</td>
+                </tr>
+                <tr>
+                  <td>Status Pembayaran Penjualan</td>
+                  <td>:</td>
+                  <td>{initialValue?.sales_payment_status}</td>
+                </tr>
+                <tr>
+                  <td>Status Project</td>
+                  <td>:</td>
+                  <td>{initialValue?.project_status}</td>
+                </tr>
+                <tr>
+                  <td>Status Closing</td>
+                  <td>:</td>
+                  <td>{initialValue?.closing_status}</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ClosingGeneralInformationTable;

src/components/pages/closing/ClosingIncomingSapronaksTable.tsx

@@ -0,0 +1,209 @@
+'use client';
+
+import { ChangeEventHandler, useEffect, useState } from 'react';
+import useSWR from 'swr';
+import { ColumnDef, SortingState } from '@tanstack/react-table';
+
+import { Icon } from '@iconify/react';
+import Table from '@/components/Table';
+import DebouncedTextInput from '@/components/input/DebouncedTextInput';
+import Card from '@/components/Card';
+import Collapse from '@/components/Collapse';
+
+import { cn, formatDate, formatNumber } from '@/lib/helper';
+import { isResponseSuccess } from '@/lib/api-helper';
+import { useTableFilter } from '@/services/hooks/useTableFilter';
+import { ClosingApi } from '@/services/api/closing';
+import { ClosingIncomingSapronak } from '@/types/api/closing';
+
+interface ClosingIncomingSapronaksTableProps {
+  projectFlockId: number;
+}
+
+const ClosingIncomingSapronaksTable = ({
+  projectFlockId,
+}: ClosingIncomingSapronaksTableProps) => {
+  const {
+    state: tableFilterState,
+    updateFilter,
+    setPage,
+    setPageSize,
+    toQueryString: getTableFilterQueryString,
+  } = useTableFilter({
+    initial: {
+      search: '',
+      nameSort: '',
+    },
+    paramMap: {
+      page: 'page',
+      pageSize: 'limit',
+      nameSort: 'sort_name',
+    },
+  });
+
+  const { data: incomingSapronaks, isLoading: isLoadingIncomingSapronaks } =
+    useSWR(
+      `${ClosingApi.basePath}/${projectFlockId}/sapronak${getTableFilterQueryString()}&type=incoming`,
+      ClosingApi.getAllIncomingSapronakFetcher,
+      {
+        keepPreviousData: true,
+      }
+    );
+
+  const [open, setOpen] = useState(true);
+
+  const [sorting, setSorting] = useState<SortingState>([]);
+  const [rowSelection, setRowSelection] = useState<Record<string, boolean>>({});
+
+  const incomingSapronaksColumns: ColumnDef<ClosingIncomingSapronak>[] = [
+    {
+      header: '#',
+      cell: (props) => props.row.index + 1,
+    },
+    {
+      accessorKey: 'date',
+      header: 'Tanggal',
+      cell: (props) => formatDate(props.row.original.date, 'DD MMM YYYY'),
+    },
+    {
+      accessorKey: 'reference_number',
+      header: 'No. Referensi',
+    },
+    {
+      accessorKey: 'transaction_type',
+      header: 'Jenis Transaksi',
+    },
+    {
+      accessorKey: 'product_name',
+      header: 'Produk',
+    },
+    {
+      accessorKey: 'product_category',
+      header: 'Kategori Produk',
+    },
+    {
+      accessorKey: 'source_warehouse',
+      header: 'Gudang Asal',
+    },
+    {
+      accessorKey: 'destination_warehouse',
+      header: 'Gudang Tujuan',
+    },
+    {
+      accessorKey: 'quantity',
+      header: 'Kuantitas',
+      cell: (props) =>
+        `${formatNumber(props.row.original.quantity)} ${props.row.original.unit}`,
+    },
+    {
+      accessorKey: 'notes',
+      header: 'Keterangan',
+    },
+  ];
+
+  const searchChangeHandler: ChangeEventHandler<HTMLInputElement> = (e) => {
+    updateFilter('search', e.target.value);
+  };
+
+  // track sorting
+  useEffect(() => {
+    const isNameSorted = sorting.find((sortItem) => sortItem.id === 'name');
+
+    if (!isNameSorted) {
+      updateFilter('nameSort', '');
+    } else {
+      updateFilter('nameSort', isNameSorted.desc ? 'desc' : 'asc');
+    }
+  }, [sorting, updateFilter]);
+
+  useEffect(() => {
+    if (!open) {
+      setOpen(
+        isResponseSuccess(incomingSapronaks)
+          ? incomingSapronaks.data.length > 0
+          : false
+      );
+    }
+  }, [incomingSapronaks, isResponseSuccess]);
+
+  return (
+    <Card
+      className={{
+        wrapper: 'w-full',
+        body: 'p-4 shadow',
+      }}
+    >
+      <Collapse
+        open={open}
+        onOpenChange={setOpen}
+        title={
+          <div className='card-actions p-4 justify-between items-center w-full'>
+            <div className='card-title'>Sapronak Masuk</div>
+
+            <Icon
+              icon='material-symbols:keyboard-arrow-down'
+              width={24}
+              height={24}
+              className={cn('text-primary transition-transform', {
+                '-rotate-180': open,
+              })}
+            />
+          </div>
+        }
+        className='w-full!'
+        titleClassName='w-full p-0!'
+      >
+        <div className='w-full p-0'>
+          <div className='flex flex-col gap-2 mb-4'>
+            <div className='w-full flex flex-col sm:flex-row justify-start items-end sm:items-center gap-4'>
+              <DebouncedTextInput
+                name='search'
+                placeholder='Cari Sapronak Masuk'
+                value={tableFilterState.search}
+                onChange={searchChangeHandler}
+                className={{ wrapper: 'sm:max-w-3xs' }}
+              />
+            </div>
+          </div>
+
+          <Table<ClosingIncomingSapronak>
+            data={
+              isResponseSuccess(incomingSapronaks)
+                ? incomingSapronaks?.data
+                : []
+            }
+            columns={incomingSapronaksColumns}
+            pageSize={tableFilterState.pageSize}
+            onPageSizeChange={setPageSize}
+            rowOptions={[10, 20, 50, 100]}
+            page={
+              isResponseSuccess(incomingSapronaks)
+                ? incomingSapronaks?.meta?.page
+                : 0
+            }
+            totalItems={
+              isResponseSuccess(incomingSapronaks)
+                ? incomingSapronaks?.meta?.total_results
+                : 0
+            }
+            onPageChange={setPage}
+            isLoading={isLoadingIncomingSapronaks}
+            sorting={sorting}
+            setSorting={setSorting}
+            rowSelection={rowSelection}
+            setRowSelection={setRowSelection}
+            className={{
+              containerClassName: cn({
+                'w-full mb-20':
+                  isResponseSuccess(incomingSapronaks) &&
+                  incomingSapronaks?.data?.length === 0,
+              }),
+            }}
+          />
+        </div>
+      </Collapse>
+    </Card>
+  );
+};
+
+export default ClosingIncomingSapronaksTable;

src/components/pages/closing/ClosingOutgoingSapronaksTable.tsx

@@ -0,0 +1,209 @@
+'use client';
+
+import { ChangeEventHandler, useEffect, useState } from 'react';
+import useSWR from 'swr';
+import { ColumnDef, SortingState } from '@tanstack/react-table';
+
+import { Icon } from '@iconify/react';
+import Table from '@/components/Table';
+import DebouncedTextInput from '@/components/input/DebouncedTextInput';
+import Card from '@/components/Card';
+import Collapse from '@/components/Collapse';
+
+import { cn, formatDate, formatNumber } from '@/lib/helper';
+import { isResponseSuccess } from '@/lib/api-helper';
+import { useTableFilter } from '@/services/hooks/useTableFilter';
+import { ClosingApi } from '@/services/api/closing';
+import { ClosingOutgoingSapronak } from '@/types/api/closing';
+
+interface ClosingOutgoingSapronaksTableProps {
+  projectFlockId: number;
+}
+
+const ClosingOutgoingSapronaksTable = ({
+  projectFlockId,
+}: ClosingOutgoingSapronaksTableProps) => {
+  const {
+    state: tableFilterState,
+    updateFilter,
+    setPage,
+    setPageSize,
+    toQueryString: getTableFilterQueryString,
+  } = useTableFilter({
+    initial: {
+      search: '',
+      nameSort: '',
+    },
+    paramMap: {
+      page: 'page',
+      pageSize: 'limit',
+      nameSort: 'sort_name',
+    },
+  });
+
+  const { data: outgoingSapronaks, isLoading: isLoadingOutgoingSapronaks } =
+    useSWR(
+      `${ClosingApi.basePath}/${projectFlockId}/sapronak${getTableFilterQueryString()}&type=outgoing`,
+      ClosingApi.getAllOutgoingSapronakFetcher,
+      {
+        keepPreviousData: true,
+      }
+    );
+
+  const [open, setOpen] = useState(true);
+
+  const [sorting, setSorting] = useState<SortingState>([]);
+  const [rowSelection, setRowSelection] = useState<Record<string, boolean>>({});
+
+  const outgoingSapronaksColumns: ColumnDef<ClosingOutgoingSapronak>[] = [
+    {
+      header: '#',
+      cell: (props) => props.row.index + 1,
+    },
+    {
+      accessorKey: 'date',
+      header: 'Tanggal',
+      cell: (props) => formatDate(props.row.original.date, 'DD MMM YYYY'),
+    },
+    {
+      accessorKey: 'reference_number',
+      header: 'No. Referensi',
+    },
+    {
+      accessorKey: 'transaction_type',
+      header: 'Jenis Transaksi',
+    },
+    {
+      accessorKey: 'product_name',
+      header: 'Produk',
+    },
+    {
+      accessorKey: 'product_category',
+      header: 'Kategori Produk',
+    },
+    {
+      accessorKey: 'source_warehouse',
+      header: 'Gudang Asal',
+    },
+    {
+      accessorKey: 'destination_warehouse',
+      header: 'Gudang Tujuan',
+    },
+    {
+      accessorKey: 'quantity',
+      header: 'Kuantitas',
+      cell: (props) =>
+        `${formatNumber(props.row.original.quantity)} ${props.row.original.unit}`,
+    },
+    {
+      accessorKey: 'notes',
+      header: 'Keterangan',
+    },
+  ];
+
+  const searchChangeHandler: ChangeEventHandler<HTMLInputElement> = (e) => {
+    updateFilter('search', e.target.value);
+  };
+
+  // track sorting
+  useEffect(() => {
+    const isNameSorted = sorting.find((sortItem) => sortItem.id === 'name');
+
+    if (!isNameSorted) {
+      updateFilter('nameSort', '');
+    } else {
+      updateFilter('nameSort', isNameSorted.desc ? 'desc' : 'asc');
+    }
+  }, [sorting, updateFilter]);
+
+  useEffect(() => {
+    if (!open) {
+      setOpen(
+        isResponseSuccess(outgoingSapronaks)
+          ? outgoingSapronaks.data.length > 0
+          : false
+      );
+    }
+  }, [outgoingSapronaks, isResponseSuccess]);
+
+  return (
+    <Card
+      className={{
+        wrapper: 'w-full',
+        body: 'p-4 shadow',
+      }}
+    >
+      <Collapse
+        open={open}
+        onOpenChange={setOpen}
+        title={
+          <div className='card-actions p-4 justify-between items-center w-full'>
+            <div className='card-title'>Sapronak Keluar</div>
+
+            <Icon
+              icon='material-symbols:keyboard-arrow-down'
+              width={24}
+              height={24}
+              className={cn('text-primary transition-transform', {
+                '-rotate-180': open,
+              })}
+            />
+          </div>
+        }
+        className='w-full!'
+        titleClassName='w-full p-0!'
+      >
+        <div className='w-full p-0'>
+          <div className='flex flex-col gap-2 mb-4'>
+            <div className='w-full flex flex-col sm:flex-row justify-start items-end sm:items-center gap-4'>
+              <DebouncedTextInput
+                name='search'
+                placeholder='Cari Sapronak Keluar'
+                value={tableFilterState.search}
+                onChange={searchChangeHandler}
+                className={{ wrapper: 'sm:max-w-3xs' }}
+              />
+            </div>
+          </div>
+
+          <Table<ClosingOutgoingSapronak>
+            data={
+              isResponseSuccess(outgoingSapronaks)
+                ? outgoingSapronaks?.data
+                : []
+            }
+            columns={outgoingSapronaksColumns}
+            pageSize={tableFilterState.pageSize}
+            onPageSizeChange={setPageSize}
+            rowOptions={[10, 20, 50, 100]}
+            page={
+              isResponseSuccess(outgoingSapronaks)
+                ? outgoingSapronaks?.meta?.page
+                : 0
+            }
+            totalItems={
+              isResponseSuccess(outgoingSapronaks)
+                ? outgoingSapronaks?.meta?.total_results
+                : 0
+            }
+            onPageChange={setPage}
+            isLoading={isLoadingOutgoingSapronaks}
+            sorting={sorting}
+            setSorting={setSorting}
+            rowSelection={rowSelection}
+            setRowSelection={setRowSelection}
+            className={{
+              containerClassName: cn({
+                'w-full mb-20':
+                  isResponseSuccess(outgoingSapronaks) &&
+                  outgoingSapronaks?.data?.length === 0,
+              }),
+            }}
+          />
+        </div>
+      </Collapse>
+    </Card>
+  );
+};
+
+export default ClosingOutgoingSapronaksTable;

src/components/pages/closing/ClosingSapronakTabContent.tsx

@@ -0,0 +1,26 @@
+'use client';
+
+import ClosingIncomingSapronaksTable from '@/components/pages/closing/ClosingIncomingSapronaksTable';
+import ClosingOutgoingSapronaksTable from '@/components/pages/closing/ClosingOutgoingSapronaksTable';
+
+interface ClosingSapronakTableProps {
+  projectFlockId?: number;
+}
+
+const ClosingSapronakTabContent = ({
+  projectFlockId,
+}: ClosingSapronakTableProps) => {
+  return (
+    <div className='flex flex-col gap-4'>
+      {projectFlockId && (
+        <>
+          <ClosingIncomingSapronaksTable projectFlockId={projectFlockId} />
+
+          <ClosingOutgoingSapronaksTable projectFlockId={projectFlockId} />
+        </>
+      )}
+    </div>
+  );
+};
+
+export default ClosingSapronakTabContent;

src/components/pages/closing/ClosingsTable.tsx

@@ -0,0 +1,299 @@
+'use client';
+
+import { ChangeEventHandler, useEffect, useState } from 'react';
+import useSWR from 'swr';
+import { CellContext, ColumnDef, SortingState } from '@tanstack/react-table';
+
+import { Icon } from '@iconify/react';
+import Table from '@/components/Table';
+import DebouncedTextInput from '@/components/input/DebouncedTextInput';
+import Button from '@/components/Button';
+import SelectInput, {
+  OptionType,
+  useSelect,
+} from '@/components/input/SelectInput';
+import RowDropdownOptions from '@/components/table/RowDropdownOptions';
+import RowCollapseOptions from '@/components/table/RowCollapseOptions';
+import RowOptionsMenuWrapper from '@/components/table/RowOptionsMenuWrapper';
+import { cn, formatCurrency, formatDate } from '@/lib/helper';
+import { isResponseSuccess } from '@/lib/api-helper';
+import { useTableFilter } from '@/services/hooks/useTableFilter';
+import { LocationApi } from '@/services/api/master-data';
+import { Location } from '@/types/api/master-data/location';
+import { ClosingApi } from '@/services/api/closing';
+import { Closing } from '@/types/api/closing';
+
+const PROJECT_STATUS_OPTIONS = [
+  {
+    value: 1,
+    label: 'Pengajuan',
+  },
+  {
+    value: 2,
+    label: 'Aktif',
+  },
+];
+
+const RowOptionsMenu = ({
+  type = 'dropdown',
+  props,
+}: {
+  type: 'dropdown' | 'collapse';
+  props: CellContext<Closing, unknown>;
+}) => {
+  return (
+    <RowOptionsMenuWrapper type={type}>
+      {/* TODO: apply RBAC */}
+      <div className='w-full max-h-40 overflow-auto flex flex-col gap-1'>
+        <Button
+          href={`/closing/detail/?closingId=${props.row.original.id}`}
+          variant='ghost'
+          color='primary'
+          className='justify-start text-sm'
+        >
+          <Icon icon='mdi:eye-outline' width={16} height={16} />
+          Detail
+        </Button>
+      </div>
+    </RowOptionsMenuWrapper>
+  );
+};
+
+const ClosingsTable = () => {
+  const {
+    state: tableFilterState,
+    updateFilter,
+    setPage,
+    setPageSize,
+    toQueryString: getTableFilterQueryString,
+  } = useTableFilter({
+    initial: {
+      search: '',
+      nameSort: '',
+      transactionDate: '',
+      realizationDate: '',
+      locationId: '',
+      projectStatus: '',
+      userId: '',
+    },
+    paramMap: {
+      page: 'page',
+      pageSize: 'limit',
+      nameSort: 'sort_name',
+      transactionDate: 'transaction_date',
+      realizationDate: 'realization_date',
+      locationId: 'location_id',
+      projectStatus: 'project_status',
+      userId: 'user_id',
+    },
+  });
+
+  const { data: closings, isLoading: isLoadingClosings } = useSWR(
+    `${ClosingApi.basePath}${getTableFilterQueryString()}`,
+    ClosingApi.getAllFetcher
+  );
+
+  const [sorting, setSorting] = useState<SortingState>([]);
+  const [rowSelection, setRowSelection] = useState<Record<string, boolean>>({});
+
+  const closingsColumns: ColumnDef<Closing>[] = [
+    {
+      header: '#',
+      cell: (props) => props.row.index + 1,
+    },
+    {
+      accessorKey: 'location_name',
+      header: 'Lokasi',
+    },
+    {
+      accessorKey: 'project_category',
+      header: 'Kategori',
+    },
+    {
+      accessorKey: 'period',
+      header: 'Periode',
+    },
+    {
+      accessorKey: 'closing_date',
+      header: 'Periode',
+      cell: (props) =>
+        formatDate(props.row.original.closing_date, 'DD MMM YYYY'),
+    },
+    {
+      accessorKey: 'shed_label',
+      header: 'Jumlah Kandang',
+    },
+    {
+      accessorKey: 'sales_paid_amount',
+      header: 'Jumlah Sudah Bayar',
+      cell: (props) => (
+        <span className='text-success'>
+          {formatCurrency(props.row.original.sales_paid_amount)}
+        </span>
+      ),
+    },
+    {
+      accessorKey: 'sales_remaining_amount',
+      header: 'Jumlah Sisa Bayar',
+      cell: (props) => (
+        <span className='text-error'>
+          {formatCurrency(props.row.original.sales_remaining_amount)}
+        </span>
+      ),
+    },
+    {
+      accessorKey: 'sales_payment_status',
+      header: 'Status Pembayaran',
+    },
+    {
+      accessorKey: 'project_status',
+      header: 'Status',
+    },
+    {
+      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 - 3;
+
+        return (
+          <>
+            {currentPageSize > 3 && (
+              <RowDropdownOptions isLast2Rows={isLast2Rows}>
+                <RowOptionsMenu type='dropdown' props={props} />
+              </RowDropdownOptions>
+            )}
+
+            {currentPageSize <= 3 && (
+              <RowCollapseOptions>
+                <RowOptionsMenu type='collapse' props={props} />
+              </RowCollapseOptions>
+            )}
+          </>
+        );
+      },
+    },
+  ];
+
+  const {
+    setInputValue: setLocationInputValue,
+    options: locationOptions,
+    isLoadingOptions: isLoadingLocationOptions,
+  } = useSelect<Location>(LocationApi.basePath, 'id', 'name');
+
+  const [selectedLocation, setSelectedLocation] = useState<OptionType | null>(
+    null
+  );
+
+  const locationChangeHandler = (val: OptionType | OptionType[] | null) => {
+    setSelectedLocation(val as OptionType);
+    updateFilter(
+      'locationId',
+      val ? ((val as OptionType).value as string) : ''
+    );
+  };
+
+  const [selectedProjectStatus, setSelectedProjectStatus] =
+    useState<OptionType | null>(null);
+
+  const projectStatusChangeHandler = (
+    val: OptionType | OptionType[] | null
+  ) => {
+    setSelectedProjectStatus(val as OptionType);
+    updateFilter(
+      'projectStatus',
+      val ? ((val as OptionType).value as string) : ''
+    );
+  };
+
+  const searchChangeHandler: ChangeEventHandler<HTMLInputElement> = (e) => {
+    updateFilter('search', e.target.value);
+  };
+
+  // track sorting
+  useEffect(() => {
+    const isNameSorted = sorting.find((sortItem) => sortItem.id === 'name');
+
+    if (!isNameSorted) {
+      updateFilter('nameSort', '');
+    } else {
+      updateFilter('nameSort', isNameSorted.desc ? 'desc' : 'asc');
+    }
+  }, [sorting, updateFilter]);
+
+  return (
+    <>
+      <div className='w-full p-0 sm:p-4'>
+        <div className='flex flex-col gap-2 mb-4'>
+          <div className='flex flex-col gap-2 mb-4'>
+            <div className='w-full flex flex-col sm:flex-row justify-end items-end sm:items-center gap-4'>
+              <DebouncedTextInput
+                name='search'
+                placeholder='Cari Closing'
+                value={tableFilterState.search}
+                onChange={searchChangeHandler}
+                className={{ wrapper: 'sm:max-w-3xs' }}
+              />
+            </div>
+
+            <div className='grid grid-cols-12 justify-end gap-2'>
+              <SelectInput
+                label='Lokasi'
+                options={locationOptions}
+                isLoading={isLoadingLocationOptions}
+                value={selectedLocation}
+                onChange={locationChangeHandler}
+                onInputChange={setLocationInputValue}
+                isClearable
+                className={{
+                  wrapper: 'col-span-12 sm:col-span-6',
+                }}
+              />
+
+              <SelectInput
+                label='Status Project'
+                placeholder='Pilih Status'
+                options={PROJECT_STATUS_OPTIONS}
+                value={selectedProjectStatus}
+                onChange={projectStatusChangeHandler}
+                isClearable
+                className={{
+                  wrapper: 'col-span-12 sm:col-span-6',
+                }}
+              />
+            </div>
+          </div>
+        </div>
+
+        <Table<Closing>
+          data={isResponseSuccess(closings) ? closings?.data : []}
+          columns={closingsColumns}
+          pageSize={tableFilterState.pageSize}
+          onPageSizeChange={setPageSize}
+          rowOptions={[10, 20, 50, 100]}
+          page={isResponseSuccess(closings) ? closings?.meta?.page : 0}
+          totalItems={
+            isResponseSuccess(closings) ? closings?.meta?.total_results : 0
+          }
+          onPageChange={setPage}
+          isLoading={isLoadingClosings}
+          sorting={sorting}
+          setSorting={setSorting}
+          rowSelection={rowSelection}
+          setRowSelection={setRowSelection}
+          className={{
+            containerClassName: cn({
+              'w-full mb-20':
+                isResponseSuccess(closings) && closings?.data?.length === 0,
+            }),
+          }}
+        />
+      </div>
+    </>
+  );
+};
+
+export default ClosingsTable;

src/components/pages/closing/sale/SalesReportTable.tsx

@@ -0,0 +1,285 @@
+'use client';
+
+import React, { useMemo } from 'react';
+import { ColumnDef } from '@tanstack/react-table';
+import Table from '@/components/Table';
+import Card from '@/components/Card';
+import Badge from '@/components/Badge';
+import { formatCurrency, formatNumber, formatDate } from '@/lib/helper';
+import { BaseClosingSales, BaseSales } from '@/types/api/closing';
+import { Product } from '@/types/api/master-data/product';
+import { Customer } from '@/types/api/master-data/customer';
+import { Kandang } from '@/types/api/master-data/kandang';
+
+interface SalesReportTableProps {
+  type?: 'detail';
+  initialValues?: BaseClosingSales;
+}
+
+const SalesReportTable = ({
+  type = 'detail',
+  initialValues,
+}: SalesReportTableProps) => {
+  const salesData: BaseSales[] = useMemo(() => {
+    return initialValues?.sales || [];
+  }, [initialValues]);
+
+  const totals = useMemo(() => {
+    if (salesData.length === 0) {
+      return {
+        totalQuantity: 0,
+        totalWeight: 0,
+        avgWeight: 0,
+        avgPricePartner: 0,
+        totalPartner: 0,
+      };
+    }
+
+    const totalQuantity = salesData.reduce(
+      (sum, item) => sum + (item.qty || 0),
+      0
+    );
+    const totalWeight = salesData.reduce(
+      (sum, item) => sum + (item.weight || 0),
+      0
+    );
+    const avgWeight = totalQuantity > 0 ? totalWeight / totalQuantity : 0;
+
+    const validPriceItems = salesData.filter(
+      (item) => item.price != null && item.price > 0
+    );
+    const avgPricePartner =
+      validPriceItems.length > 0
+        ? validPriceItems.reduce((sum, item) => sum + item.price, 0) /
+          validPriceItems.length
+        : 0;
+
+    const totalPartner = salesData.reduce(
+      (sum, item) => sum + (item.total_price || 0),
+      0
+    );
+
+    return {
+      totalQuantity,
+      totalWeight,
+      avgWeight,
+      avgPricePartner,
+      totalPartner,
+    };
+  }, [salesData]);
+
+  const salesColumns: ColumnDef<BaseSales>[] = useMemo(
+    () => [
+      {
+        id: 'realization_date',
+        accessorKey: 'realization_date',
+        header: 'Tanggal Realisasi',
+        cell: (props) => {
+          const date = props.row.original.realization_date;
+          return date ? formatDate(date, 'DD MMM YYYY') : '-';
+        },
+        footer: () => (
+          <div className='font-semibold text-gray-900'>Total Penjualan</div>
+        ),
+      },
+      {
+        id: 'age',
+        accessorKey: 'age',
+        header: 'Umur',
+        cell: (props) => props.getValue() || '-',
+      },
+      {
+        id: 'do_number',
+        accessorKey: 'do_number',
+        header: 'No. DO',
+        cell: (props) => props.getValue() || '-',
+      },
+      {
+        id: 'product',
+        accessorKey: 'product',
+        header: 'Produk',
+        cell: (props) => {
+          const product = props.getValue() as Product;
+          return product?.name || '-';
+        },
+      },
+      {
+        id: 'customer',
+        accessorKey: 'customer',
+        header: 'Customer',
+        cell: (props) => {
+          const customer = props.getValue() as Customer;
+          return customer?.name || '-';
+        },
+      },
+      {
+        id: 'jumlah',
+        header: 'Jumlah',
+        columns: [
+          {
+            id: 'qty',
+            accessorKey: 'qty',
+            header: 'Kuantitas',
+            cell: (props) => {
+              const value = props.getValue() as number;
+              return <div className='text-left'>{formatNumber(value)}</div>;
+            },
+            footer: () => (
+              <div className='text-left font-semibold text-gray-900'>
+                {formatNumber(totals.totalQuantity)}
+              </div>
+            ),
+          },
+          {
+            id: 'weight',
+            accessorKey: 'weight',
+            header: 'Kg',
+            cell: (props) => {
+              const value = props.getValue() as number;
+              return <div className='text-left'>{formatNumber(value)}</div>;
+            },
+            footer: () => (
+              <div className='text-left font-semibold text-gray-900'>
+                {formatNumber(totals.totalWeight)}
+              </div>
+            ),
+          },
+        ],
+      },
+      {
+        id: 'avg_weight',
+        accessorKey: 'avg_weight',
+        header: 'AVG (Kg)',
+        cell: (props) => {
+          const value = props.getValue() as number;
+          return <div className='text-left'>{formatNumber(value)}</div>;
+        },
+        footer: () => (
+          <div className='text-left font-semibold text-gray-900'>
+            {formatNumber(totals.avgWeight)}
+          </div>
+        ),
+      },
+      {
+        id: 'price_partner',
+        accessorKey: 'price',
+        header: 'Harga Mitra (Rp)',
+        cell: (props) => {
+          const value = props.getValue() as number;
+          return <div className='text-right'>{formatCurrency(value)}</div>;
+        },
+        footer: () => (
+          <div className='text-right font-semibold text-gray-900'>
+            {formatCurrency(totals.avgPricePartner)}
+          </div>
+        ),
+      },
+      {
+        id: 'total_mitra',
+        accessorKey: 'total_price',
+        header: 'Total Mitra (Rp)',
+        cell: (props) => {
+          const value = props.getValue() as number;
+          return <div className='text-right'>{formatCurrency(value)}</div>;
+        },
+        footer: () => (
+          <div className='text-right font-semibold text-gray-900'>
+            {formatCurrency(totals.totalPartner)}
+          </div>
+        ),
+      },
+      {
+        id: 'price_act',
+        accessorKey: 'price',
+        header: 'Harga Act (Rp)',
+        cell: (props) => {
+          const value = props.getValue() as number;
+          return <div className='text-right'>{formatCurrency(value)}</div>;
+        },
+      },
+      {
+        id: 'total_act',
+        accessorKey: 'total_price',
+        header: 'Total Act (Rp)',
+        cell: (props) => {
+          const value = props.getValue() as number;
+          return <div className='text-right'>{formatCurrency(value)}</div>;
+        },
+      },
+      {
+        id: 'kandang',
+        accessorKey: 'kandang',
+        header: 'Kandang',
+        cell: (props) => {
+          const kandang = props.getValue() as Kandang;
+          return kandang?.name || '-';
+        },
+      },
+      {
+        id: 'payment_status',
+        accessorKey: 'payment_status',
+        header: 'Status Pembayaran',
+        cell: (props) => {
+          const status = props.getValue() as string;
+          const getStatusColor = (status: string) => {
+            if (!status) return 'neutral';
+            switch (status.toLowerCase()) {
+              case 'paid':
+                return 'success';
+              case 'tempo':
+                return 'warning';
+              default:
+                return 'neutral';
+            }
+          };
+
+          return (
+            <Badge variant='soft' size='sm' color={getStatusColor(status)}>
+              {status || '-'}
+            </Badge>
+          );
+        },
+      },
+    ],
+    []
+  );
+
+  return (
+    <>
+      <section className='w-full'>
+        <div className='p-4'>
+          <h2 className='text-xl font-semibold mb-4'>Penjualan</h2>
+          <Card
+            className={{
+              wrapper: 'w-full bg-base-100',
+              body: 'p-0',
+            }}
+          >
+            <Table
+              data={salesData}
+              columns={salesColumns}
+              renderFooter={salesData.length > 0}
+              className={{
+                tableWrapperClassName: 'overflow-x-auto',
+                tableClassName: 'w-full table-auto text-sm',
+                headerColumnClassName:
+                  'px-4 py-3 text-xs font-semibold text-gray-500 last:flex last:flex-row last:justify-end whitespace-nowrap border-l border-l-gray-200 border-r border-r-gray-200 border-t border-t-gray-200 border-gray-200 border-b-0',
+                bodyRowClassName:
+                  'hover:bg-gray-50 transition-colors border-b border-gray-200 first:border-t first:border-t-gray-200 border-l border-l-gray-200 border-r border-r-gray-200',
+                bodyColumnClassName:
+                  'px-4 py-3 text-xs text-gray-900 whitespace-nowrap',
+                tableFooterClassName:
+                  'bg-gray-100 font-semibold border border-gray-200',
+                footerRowClassName: 'border-t-2 border-gray-300',
+                footerColumnClassName:
+                  'px-4 py-3 text-xs text-gray-900 whitespace-nowrap',
+              }}
+            />
+          </Card>
+        </div>
+      </section>
+    </>
+  );
+};
+
+export default SalesReportTable;

src/components/pages/expense/ExpenseRealizationContent.tsx

@@ -207,7 +207,7 @@ const ExpenseRealizationContent = ({
             let expenseGrandTotal = 0;
 
             kandangExpense.pengajuans?.forEach(
-              (item) => (expenseGrandTotal += item.total_price)
+              (item) => (expenseGrandTotal += item.price)
             );
 
             return (
@@ -238,7 +238,7 @@ const ExpenseRealizationContent = ({
                         <tr key={pengajuanIdx}>
                           <td>{pengajuanItem.nonstock.name}</td>
                           <td>{pengajuanItem.qty}</td>
-                          <td>{formatCurrency(pengajuanItem.total_price)}</td>
+                          <td>{formatCurrency(pengajuanItem.price)}</td>
                           <td className='w-xs'>{pengajuanItem.note ?? '-'}</td>
                         </tr>
                       )
@@ -269,7 +269,7 @@ const ExpenseRealizationContent = ({
             let expenseGrandTotal = 0;
 
             kandangExpense.realisasi?.forEach(
-              (item) => (expenseGrandTotal += item.total_price)
+              (item) => (expenseGrandTotal += item.price)
             );
 
             return (
@@ -300,7 +300,7 @@ const ExpenseRealizationContent = ({
                         <tr key={realisasiIdx}>
                           <td>{realisasiItem.nonstock.name}</td>
                           <td>{realisasiItem.qty}</td>
-                          <td>{formatCurrency(realisasiItem.total_price)}</td>
+                          <td>{formatCurrency(realisasiItem.price)}</td>
                           <td className='w-xs'>{realisasiItem.note ?? '-'}</td>
                         </tr>
                       )

src/components/pages/expense/ExpenseRequestContent.tsx

@@ -402,7 +402,10 @@ const ExpenseRequestContent = ({
                   <th>Tanggal Transaksi</th>
                   <th>:</th>
                   <td>
-                    {formatDate(initialValues?.expense_date, 'DD MMMM YYYY')}
+                    {formatDate(
+                      initialValues?.transaction_date,
+                      'DD MMMM YYYY'
+                    )}
                   </td>
                 </tr>
                 <tr>
@@ -529,7 +532,7 @@ const ExpenseRequestContent = ({
                 let expenseGrandTotal = 0;
 
                 kandangExpense.pengajuans?.forEach(
-                  (item) => (expenseGrandTotal += item.total_price)
+                  (item) => (expenseGrandTotal += item.price)
                 );
 
                 return (
@@ -550,7 +553,7 @@ const ExpenseRequestContent = ({
                         <tr>
                           <th>Nonstock</th>
                           <th>Total Kuantitas</th>
-                          <th>Total Biaya</th>
+                          <th>Harga Satuan</th>
                           <th>Catatan</th>
                         </tr>
                       </thead>
@@ -560,9 +563,7 @@ const ExpenseRequestContent = ({
                             <tr key={pengajuanIdx}>
                               <td>{pengajuanItem.nonstock.name}</td>
                               <td>{pengajuanItem.qty}</td>
-                              <td>
-                                {formatCurrency(pengajuanItem.total_price)}
-                              </td>
+                              <td>{formatCurrency(pengajuanItem.price)}</td>
                               <td className='w-xs'>
                                 {pengajuanItem.note ?? '-'}
                               </td>

src/components/pages/expense/ExpensesTable.tsx

@@ -263,11 +263,11 @@ const ExpensesTable = () => {
       },
     },
     {
-      accessorKey: 'expense_date',
+      accessorKey: 'transaction_date',
       header: 'Tanggal Pengajuan',
       cell: (props) =>
-        props.row.original.expense_date
-          ? formatDate(props.row.original.expense_date, 'DD MMM YYYY')
+        props.row.original.transaction_date
+          ? formatDate(props.row.original.transaction_date, 'DD MMM YYYY')
           : '-',
     },
     {

src/components/pages/expense/form/ExpenseRealizationForm.schema.ts

@@ -27,7 +27,7 @@ type ExpenseRealizationFormSchemaType = {
         label: string;
       };
       quantity?: number;
-      total_cost?: number;
+      price?: number;
       notes?: string;
     }[];
   }[];
@@ -82,7 +82,7 @@ export const ExpenseRealizationFormSchema: Yup.ObjectSchema<ExpenseRealizationFo
                   label: Yup.string().required(),
                 }).required('Nonstock wajib diisi!'),
                 quantity: Yup.number().required('Total kuantitas wajib diisi!'),
-                total_cost: Yup.number().required('Total biaya wajib diisi!'),
+                price: Yup.number().required('Harga satuan wajib diisi!'),
                 notes: Yup.string(),
               })
             )
@@ -155,7 +155,7 @@ export const getExpenseRealizationFormInitialValues = (
                     label: realisasiItem.nonstock.name,
                   },
                   quantity: realisasiItem.qty,
-                  total_cost: realisasiItem.total_price,
+                  price: realisasiItem.price,
                   notes: realisasiItem.note,
                 };
               })
@@ -166,7 +166,7 @@ export const getExpenseRealizationFormInitialValues = (
                     label: expenseItem.nonstock.name,
                   },
                   quantity: expenseItem.qty,
-                  total_cost: expenseItem.total_price,
+                  price: expenseItem.price,
                   notes: expenseItem.note,
                 }))
               : [];

src/components/pages/expense/form/ExpenseRealizationForm.tsx

@@ -98,15 +98,10 @@ const ExpenseRealizationForm = ({
 
       values.realizations.forEach((realization) => {
         realization.cost_items.forEach((costItem) => {
-          const unitPrice =
-            parseFloat(String(costItem.total_cost)) /
-            parseFloat(String(costItem.quantity));
-
           const realizationItem = {
             expense_nonstock_id: costItem.nonstock?.value as number,
             qty: parseFloat(String(costItem.quantity)) as number,
-            unit_price: unitPrice,
-            total_price: parseFloat(String(costItem.total_cost)) as number,
+            price: parseFloat(String(costItem.price)) as number,
             notes: costItem.notes ?? '',
           };
 
@@ -177,7 +172,7 @@ const ExpenseRealizationForm = ({
           {
             nonstock: undefined,
             quantity: undefined,
-            total_cost: undefined,
+            price: undefined,
             notes: '',
           },
         ],

src/components/pages/expense/form/ExpenseRealizationKandangDetailExpense.tsx

@@ -48,7 +48,7 @@ const ExpenseRealizationKandangDetailExpense: React.FC<
   };
 
   const isExpenseRepeaterInputError = (
-    column: 'nonstock' | 'quantity' | 'total_cost' | 'notes',
+    column: 'nonstock' | 'quantity' | 'price' | 'notes',
     kandangExpenseIdx: number,
     expenseIdx: number
   ) => {
@@ -112,7 +112,7 @@ const ExpenseRealizationKandangDetailExpense: React.FC<
                         <tr>
                           <th>Nonstock</th>
                           <th>Total Kuantitas</th>
-                          <th>Total Biaya</th>
+                          <th>Harga Satuan</th>
                           <th>Catatan</th>
                         </tr>
                       </thead>
@@ -163,17 +163,17 @@ const ExpenseRealizationKandangDetailExpense: React.FC<
 
                               <td className='p-2'>
                                 <NumberInput
-                                  name={`realizations[${kandangExpenseIdx}].cost_items[${expenseIdx}].total_cost`}
-                                  placeholder='Masukkan Total Biaya'
+                                  name={`realizations[${kandangExpenseIdx}].cost_items[${expenseIdx}].price`}
+                                  placeholder='Masukkan Harga Satuan'
                                   value={
                                     formik.values.realizations[
                                       kandangExpenseIdx
-                                    ].cost_items[expenseIdx].total_cost ?? ''
+                                    ].cost_items[expenseIdx].price ?? ''
                                   }
                                   onChange={formik.handleChange}
                                   onBlur={formik.handleBlur}
                                   isError={isExpenseRepeaterInputError(
-                                    'total_cost',
+                                    'price',
                                     kandangExpenseIdx,
                                     expenseIdx
                                   )}

src/components/pages/expense/form/ExpenseRequestForm.schema.ts

@@ -20,7 +20,7 @@ type ExpenseFormSchemaType = {
   existing_documents?: { id: number; name: string; url: string }[];
   deleted_documents?: number[];
   documents?: File[];
-  cost_per_kandangs: {
+  expense_nonstocks: {
     kandang_id: number;
     cost_items: {
       nonstock?: {
@@ -28,7 +28,7 @@ type ExpenseFormSchemaType = {
         label: string;
       };
       quantity?: number;
-      total_cost?: number;
+      price?: number;
       notes?: string;
     }[];
   }[];
@@ -74,7 +74,7 @@ export const ExpenseRequestFormSchema: Yup.ObjectSchema<ExpenseFormSchemaType> =
 
     documents: Yup.array().of(Yup.mixed<File>().required()).optional(),
 
-    cost_per_kandangs: Yup.array()
+    expense_nonstocks: Yup.array()
       .of(
         Yup.object({
           kandang_id: Yup.number().min(1, 'Wajib memilih kandang!').required(),
@@ -86,7 +86,7 @@ export const ExpenseRequestFormSchema: Yup.ObjectSchema<ExpenseFormSchemaType> =
                   label: Yup.string().required(),
                 }).required('Nonstock wajib diisi!'),
                 quantity: Yup.number().required('Total kuantitas wajib diisi!'),
-                total_cost: Yup.number().required('Total biaya wajib diisi!'),
+                price: Yup.number().required('Harga satuan wajib diisi!'),
                 notes: Yup.string(),
               })
             )
@@ -128,8 +128,8 @@ export const getExpenseFormInitialValues = (
           label: initialValues.location.name,
         }
       : undefined,
-    transaction_date: initialValues?.expense_date
-      ? formatDate(initialValues.expense_date, 'YYYY-MM-DD')
+    transaction_date: initialValues?.transaction_date
+      ? formatDate(initialValues.transaction_date, 'YYYY-MM-DD')
       : undefined,
     kandangs: initialValues?.kandangs.map((kandang) => ({
       id: kandang.kandang_id,
@@ -148,7 +148,7 @@ export const getExpenseFormInitialValues = (
     })),
     deleted_documents: [],
     documents: [],
-    cost_per_kandangs: initialValues?.kandangs
+    expense_nonstocks: initialValues?.kandangs
       ? initialValues.kandangs.map((kandangExpense) => ({
           kandang_id: kandangExpense.kandang_id,
           cost_items: kandangExpense.pengajuans
@@ -158,7 +158,7 @@ export const getExpenseFormInitialValues = (
                   label: expenseItem.nonstock.name,
                 },
                 quantity: expenseItem.qty,
-                total_cost: expenseItem.total_price,
+                price: expenseItem.price,
                 notes: expenseItem.note,
               }))
             : [],

src/components/pages/expense/form/ExpenseRequestForm.tsx

@@ -110,12 +110,12 @@ const ExpenseRequestForm = ({
         transaction_date: values?.transaction_date as string,
         supplier_id: values.supplier?.value as number,
         documents: values.documents as File[],
-        cost_per_kandangs: values.cost_per_kandangs.map((costPerKandang) => ({
-          kandang_id: costPerKandang.kandang_id,
-          cost_items: costPerKandang.cost_items.map((costItem) => ({
+        expense_nonstocks: values.expense_nonstocks.map((expenseNonstock) => ({
+          kandang_id: expenseNonstock.kandang_id,
+          cost_items: expenseNonstock.cost_items.map((costItem) => ({
             nonstock_id: costItem.nonstock?.value as number,
             quantity: parseFloat(String(costItem.quantity)) as number,
-            total_cost: parseFloat(String(costItem.total_cost)) as number,
+            price: parseFloat(String(costItem.price)) as number,
             notes: costItem.notes ?? '',
           })),
         })),
@@ -132,13 +132,13 @@ const ExpenseRequestForm = ({
             transaction_date: values?.transaction_date as string,
             supplier_id: values.supplier?.value as number,
             documents: values.documents as File[],
-            cost_per_kandang: values.cost_per_kandangs.map(
-              (costPerKandang) => ({
-                kandang_id: costPerKandang.kandang_id,
-                cost_items: costPerKandang.cost_items.map((costItem) => ({
+            expense_nonstocks: values.expense_nonstocks.map(
+              (expenseNonstock) => ({
+                kandang_id: expenseNonstock.kandang_id,
+                cost_items: expenseNonstock.cost_items.map((costItem) => ({
                   nonstock_id: costItem.nonstock?.value as number,
                   quantity: parseFloat(String(costItem.quantity)) as number,
-                  total_cost: parseFloat(String(costItem.total_cost)) as number,
+                  price: parseFloat(String(costItem.price)) as number,
                   notes: costItem.notes ?? '',
                 })),
               })
@@ -179,53 +179,54 @@ const ExpenseRequestForm = ({
     formik.setFieldValue('location', val);
 
     formik.setFieldValue('kandangs', []);
-    formik.setFieldValue('cost_per_kandangs', []);
+    formik.setFieldValue('expense_nonstocks', []);
   };
 
   const kandangsChangeHandler = (kandangs: { id: number; name: string }[]) => {
     formik.setFieldTouched('kandangs', true);
     formik.setFieldValue('kandangs', kandangs);
 
-    const newCostPerKandangs = [...(formik.values.cost_per_kandangs ?? [])];
+    const newExpenseNonstocks = [...(formik.values.expense_nonstocks ?? [])];
 
-    // add new cost_per_kandangs
+    // add new expense_nonstocks
     kandangs.forEach((kandangItem) => {
-      const isKandangExistInCostPerKandangs = newCostPerKandangs.find(
-        (costPerKandangItem) => costPerKandangItem.kandang_id === kandangItem.id
+      const isKandangExistInExpenseNonstocks = newExpenseNonstocks.find(
+        (expenseNonstockItem) =>
+          expenseNonstockItem.kandang_id === kandangItem.id
       );
 
-      if (isKandangExistInCostPerKandangs) return;
+      if (isKandangExistInExpenseNonstocks) return;
 
-      newCostPerKandangs.push({
+      newExpenseNonstocks.push({
         kandang_id: kandangItem.id,
         cost_items: [
           {
             nonstock: undefined,
             quantity: undefined,
-            total_cost: undefined,
+            price: undefined,
             notes: '',
           },
         ],
       });
     });
 
-    // prune cost_per_kandangs
+    // prune expense_nonstocks
     const kandangIds = new Set(kandangs.map((kandang) => kandang.id));
-    const deletedCostPerKandangsIdx: number[] = [];
+    const deletedExpenseNonstocksIdx: number[] = [];
 
-    newCostPerKandangs.forEach((costPerKandang, idx) => {
-      const isCostPerKandangValid = kandangIds.has(costPerKandang.kandang_id);
+    newExpenseNonstocks.forEach((expenseNonstock, idx) => {
+      const isExpenseNonstockValid = kandangIds.has(expenseNonstock.kandang_id);
 
-      if (!isCostPerKandangValid) {
-        deletedCostPerKandangsIdx.push(idx);
+      if (!isExpenseNonstockValid) {
+        deletedExpenseNonstocksIdx.push(idx);
       }
     });
 
-    deletedCostPerKandangsIdx.forEach((deletedCostPerKandangIdx) => {
-      newCostPerKandangs.splice(deletedCostPerKandangIdx, 1);
+    deletedExpenseNonstocksIdx.forEach((deletedExpenseNonstockIdx) => {
+      newExpenseNonstocks.splice(deletedExpenseNonstockIdx, 1);
     });
 
-    formik.setFieldValue('cost_per_kandangs', newCostPerKandangs);
+    formik.setFieldValue('expense_nonstocks', newExpenseNonstocks);
   };
 
   const supplierChangeHandler = (val: OptionType | OptionType[] | null) => {

src/components/pages/expense/form/ExpenseRequestKandangDetailExpense.tsx

@@ -41,28 +41,28 @@ const ExpenseRequestKandangDetailExpense: React.FC<
     val: OptionType | OptionType[] | null
   ) => {
     formik.setFieldTouched(
-      `cost_per_kandangs[${kandangExpenseIdx}].cost_items[${expenseIdx}].nonstock`,
+      `expense_nonstocks[${kandangExpenseIdx}].cost_items[${expenseIdx}].nonstock`,
       true
     );
     formik.setFieldValue(
-      `cost_per_kandangs[${kandangExpenseIdx}].cost_items[${expenseIdx}].nonstock`,
+      `expense_nonstocks[${kandangExpenseIdx}].cost_items[${expenseIdx}].nonstock`,
       val
     );
   };
 
   const addExpenseItemHandler = (kandangExpenseIdx: number) => {
     const newExpensesValue = [
-      ...formik.values.cost_per_kandangs[kandangExpenseIdx].cost_items,
+      ...formik.values.expense_nonstocks[kandangExpenseIdx].cost_items,
       {
         nonstock: undefined,
-        total_cost: undefined,
+        price: undefined,
         quantity: undefined,
         notes: '',
       },
     ];
 
     formik.setFieldValue(
-      `cost_per_kandangs[${kandangExpenseIdx}].cost_items`,
+      `expense_nonstocks[${kandangExpenseIdx}].cost_items`,
       newExpensesValue
     );
   };
@@ -71,28 +71,28 @@ const ExpenseRequestKandangDetailExpense: React.FC<
     kandangExpenseIdx: number,
     expenseIdx: number
   ) => {
-    const path = `cost_per_kandangs[${kandangExpenseIdx}].cost_items`;
+    const path = `expense_nonstocks[${kandangExpenseIdx}].cost_items`;
 
     // trims values, errors, and touched at expenseIdx
     removeArrayItemAndSync(formik, path, expenseIdx);
   };
 
   const isExpenseRepeaterInputError = (
-    column: 'nonstock' | 'quantity' | 'total_cost' | 'notes',
+    column: 'nonstock' | 'quantity' | 'price' | 'notes',
     kandangExpenseIdx: number,
     expenseIdx: number
   ) => {
     return (
-      formik.touched.cost_per_kandangs?.[kandangExpenseIdx]?.cost_items?.[
+      formik.touched.expense_nonstocks?.[kandangExpenseIdx]?.cost_items?.[
         expenseIdx
       ]?.[column] &&
       Boolean(
-        formik.errors.cost_per_kandangs?.[kandangExpenseIdx] instanceof
+        formik.errors.expense_nonstocks?.[kandangExpenseIdx] instanceof
           Object &&
-          formik.errors.cost_per_kandangs?.[kandangExpenseIdx].cost_items?.[
+          formik.errors.expense_nonstocks?.[kandangExpenseIdx].cost_items?.[
             expenseIdx
           ] instanceof Object &&
-          formik.errors.cost_per_kandangs?.[kandangExpenseIdx].cost_items?.[
+          formik.errors.expense_nonstocks?.[kandangExpenseIdx].cost_items?.[
             expenseIdx
           ]?.[column]
       )
@@ -113,7 +113,7 @@ const ExpenseRequestKandangDetailExpense: React.FC<
       </div>
 
       <div className='w-full flex flex-col gap-6'>
-        {(formik.values.cost_per_kandangs.length === 0 ||
+        {(formik.values.expense_nonstocks.length === 0 ||
           !formik.values.supplier?.value) && (
           <div>
             <p className='text-sm text-gray-400 text-center'>
@@ -122,9 +122,9 @@ const ExpenseRequestKandangDetailExpense: React.FC<
           </div>
         )}
 
-        {formik.values.cost_per_kandangs.length > 0 &&
+        {formik.values.expense_nonstocks.length > 0 &&
           formik.values.supplier?.value &&
-          formik.values.cost_per_kandangs.map(
+          formik.values.expense_nonstocks.map(
             (kandangExpense, kandangExpenseIdx) => {
               const kandangName = formik.values.kandangs?.find(
                 (kandang) => kandang.id === kandangExpense.kandang_id
@@ -147,7 +147,7 @@ const ExpenseRequestKandangDetailExpense: React.FC<
                             <tr>
                               <th>Nonstock</th>
                               <th>Total Kuantitas</th>
-                              <th>Total Biaya</th>
+                              <th>Harga Satuan</th>
                               <th>Catatan</th>
                               {type !== 'detail' && <th>Aksi</th>}
                             </tr>
@@ -178,10 +178,10 @@ const ExpenseRequestKandangDetailExpense: React.FC<
                                   <td className='p-2'>
                                     <NumberInput
                                       required
-                                      name={`cost_per_kandangs[${kandangExpenseIdx}].cost_items[${expenseIdx}].quantity`}
+                                      name={`expense_nonstocks[${kandangExpenseIdx}].cost_items[${expenseIdx}].quantity`}
                                       placeholder='Masukkan Total Kuantitas'
                                       value={
-                                        formik.values.cost_per_kandangs[
+                                        formik.values.expense_nonstocks[
                                           kandangExpenseIdx
                                         ].cost_items[expenseIdx].quantity ?? ''
                                       }
@@ -198,18 +198,17 @@ const ExpenseRequestKandangDetailExpense: React.FC<
 
                                   <td className='p-2'>
                                     <NumberInput
-                                      name={`cost_per_kandangs[${kandangExpenseIdx}].cost_items[${expenseIdx}].total_cost`}
-                                      placeholder='Masukkan Total Biaya'
+                                      name={`expense_nonstocks[${kandangExpenseIdx}].cost_items[${expenseIdx}].price`}
+                                      placeholder='Masukkan Harga Satuan'
                                       value={
-                                        formik.values.cost_per_kandangs[
+                                        formik.values.expense_nonstocks[
                                           kandangExpenseIdx
-                                        ].cost_items[expenseIdx].total_cost ??
-                                        ''
+                                        ].cost_items[expenseIdx].price ?? ''
                                       }
                                       onChange={formik.handleChange}
                                       onBlur={formik.handleBlur}
                                       isError={isExpenseRepeaterInputError(
-                                        'total_cost',
+                                        'price',
                                         kandangExpenseIdx,
                                         expenseIdx
                                       )}
@@ -224,10 +223,10 @@ const ExpenseRequestKandangDetailExpense: React.FC<
 
                                   <td className='p-2'>
                                     <TextInput
-                                      name={`cost_per_kandangs[${kandangExpenseIdx}].cost_items[${expenseIdx}].notes`}
+                                      name={`expense_nonstocks[${kandangExpenseIdx}].cost_items[${expenseIdx}].notes`}
                                       placeholder='Tuliskan catatan'
                                       value={
-                                        formik.values.cost_per_kandangs[
+                                        formik.values.expense_nonstocks[
                                           kandangExpenseIdx
                                         ].cost_items[expenseIdx].notes ?? ''
                                       }

src/components/pages/expense/pdf/ExpensePDF.tsx

@@ -224,7 +224,7 @@ const ExpensePDF = ({ expense }: ExpensePDFProps) => {
     { label: 'Vendor', value: expense?.supplier.name },
     {
       label: 'Tanggal Transaksi',
-      value: formatDate(expense?.expense_date, 'DD MMMM YYYY'),
+      value: formatDate(expense?.transaction_date, 'DD MMMM YYYY'),
     },
     {
       label: 'Tanggal Realisasi',
@@ -326,7 +326,7 @@ const ExpensePDF = ({ expense }: ExpensePDFProps) => {
             let expenseRequestTotal = 0;
 
             kandangExpense.pengajuans?.forEach(
-              (item) => (expenseRequestTotal += item.total_price)
+              (item) => (expenseRequestTotal += item.price)
             );
 
             return (
@@ -374,7 +374,7 @@ const ExpensePDF = ({ expense }: ExpensePDFProps) => {
                       <Text
                         style={ExpensePDFStyle.kandangExpenseHeaderLabelText}
                       >
-                        Total Biaya
+                        Harga Satuan
                       </Text>
                     </View>
                     <View
@@ -424,7 +424,7 @@ const ExpensePDF = ({ expense }: ExpensePDFProps) => {
                         ]}
                       >
                         <Text style={ExpensePDFStyle.kandangExpenseLabelText}>
-                          {formatCurrency(pengajuan.total_price)}
+                          {formatCurrency(pengajuan.price)}
                         </Text>
                       </View>
                       <View
@@ -484,7 +484,7 @@ const ExpensePDF = ({ expense }: ExpensePDFProps) => {
             let expenseRealizationTotal = 0;
 
             kandangExpense.realisasi?.forEach(
-              (item) => (expenseRealizationTotal += item.total_price)
+              (item) => (expenseRealizationTotal += item.price)
             );
 
             return (
@@ -532,7 +532,7 @@ const ExpensePDF = ({ expense }: ExpensePDFProps) => {
                       <Text
                         style={ExpensePDFStyle.kandangExpenseHeaderLabelText}
                       >
-                        Total Biaya
+                        Harga Satuan
                       </Text>
                     </View>
                     <View
@@ -582,7 +582,7 @@ const ExpensePDF = ({ expense }: ExpensePDFProps) => {
                         ]}
                       >
                         <Text style={ExpensePDFStyle.kandangExpenseLabelText}>
-                          {formatCurrency(realisasi.total_price)}
+                          {formatCurrency(realisasi.price)}
                         </Text>
                       </View>
                       <View

src/components/pages/inventory/adjustment/InventoryAdjustmentTable.tsx

@@ -6,7 +6,7 @@ import Table from '@/components/Table';
 import { ROWS_OPTIONS } from '@/config/constant';
 import { isResponseSuccess } from '@/lib/api-helper';
 import { cn } from '@/lib/helper';
-import { inventoryAdjustmentApi } from '@/services/api/inventory';
+import { InventoryAdjustmentApi } from '@/services/api/inventory';
 import { useTableFilter } from '@/services/hooks/useTableFilter';
 import { InventoryAdjustment } from '@/types/api/inventory/adjustment';
 import { Icon } from '@iconify/react';
@@ -41,8 +41,8 @@ const InventoryAdjustmentTable = () => {
 
   // Fetch Data
   const { data: inventoryAdjustments, isLoading } = useSWR(
-    `${inventoryAdjustmentApi.basePath}${getTableFilterQueryString()}`,
-    inventoryAdjustmentApi.getAllFetcher
+    `${InventoryAdjustmentApi.basePath}${getTableFilterQueryString()}`,
+    InventoryAdjustmentApi.getAllFetcher
   );
 
   // State

src/components/pages/inventory/adjustment/form/InventoryAdjustmentForm.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
-import { inventoryAdjustmentApi } from '@/services/api/inventory';
+import { InventoryAdjustmentApi } from '@/services/api/inventory';
 import {
   CreateInventoryAdjustmentPayload,
   InventoryAdjustment,
@@ -24,7 +24,7 @@ import Button from '@/components/Button';
 import { Icon } from '@iconify/react';
 import SelectInput, { OptionType } from '@/components/input/SelectInput';
 import TextInput from '@/components/input/TextInput';
-import RadioInput from '@/components/input/RadioInput';
+import { RadioGroup } from '@/components/input/RadioInput';
 import TextArea from '@/components/input/TextArea';
 
 interface InventoryAdjustmentFormProps {
@@ -52,7 +52,7 @@ const InventoryAdjustmentForm = ({
   const createInventoryAdjustmentHandler = useCallback(
     async (payload: CreateInventoryAdjustmentPayload) => {
       const createInventoryAdjustmentRes =
-        await inventoryAdjustmentApi.create(payload);
+        await InventoryAdjustmentApi.create(payload);
 
       if (isResponseError(createInventoryAdjustmentRes)) {
         setInventoryAdjustmentFormErrorMessage(
@@ -347,7 +347,7 @@ const InventoryAdjustmentForm = ({
             />
 
             {/* Radio Button Flag Stock */}
-            <RadioInput
+            <RadioGroup
               name='transaction_type'
               label='Tipe Transaksi'
               options={[
@@ -367,7 +367,7 @@ const InventoryAdjustmentForm = ({
                 Boolean(formik.errors.transaction_type)
               }
               errorMessage={formik.errors.transaction_type as string}
-              variant='radio-primary'
+              color='primary'
               required
               bottomLabel={
                 formik.values.transaction_type == undefined

src/components/pages/inventory/product/InventoryProductTable.tsx

@@ -0,0 +1,233 @@
+'use client';
+
+import Button from '@/components/Button';
+import DebouncedTextInput from '@/components/input/DebouncedTextInput';
+import SelectInput, { OptionType } from '@/components/input/SelectInput';
+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 { isResponseSuccess } from '@/lib/api-helper';
+import { cn, formatCurrency, formatNumber } from '@/lib/helper';
+import { InventoryProductApi } from '@/services/api/inventory';
+import { useTableFilter } from '@/services/hooks/useTableFilter';
+import { InventoryProduct } from '@/types/api/inventory/product';
+import { Icon } from '@iconify/react';
+import {
+  CellContext,
+  ColumnDef,
+  Row,
+  SortingState,
+} from '@tanstack/react-table';
+import { ChangeEventHandler, useMemo, useState } from 'react';
+import useSWR from 'swr';
+
+const RowOptionsMenu = ({
+  type = 'dropdown',
+  props,
+}: {
+  type: 'dropdown' | 'collapse';
+  props: CellContext<InventoryProduct, unknown>;
+}) => (
+  <RowOptionsMenuWrapper type={type}>
+    <Button
+      href={`/inventory/product/detail?inventoryProductId=${props.row.original.id}`}
+      variant='ghost'
+      color='primary'
+      className='justify-start text-sm'
+    >
+      <Icon icon='mdi:eye-outline' width={16} height={16} />
+      Detail
+    </Button>
+  </RowOptionsMenuWrapper>
+);
+
+const InventoryProductTable = () => {
+  const {
+    state: tableFilterState,
+    updateFilter,
+    setPage,
+    setPageSize,
+    toQueryString: getTableFilterQueryString,
+  } = useTableFilter({
+    initial: {
+      search: '',
+    },
+    paramMap: {
+      page: 'page',
+      pageSize: 'limit',
+    },
+  });
+
+  const [sorting, setSorting] = useState<SortingState>([]);
+
+  const { data: inventoryProducts, isLoading } = useSWR(
+    `${InventoryProductApi.basePath}${getTableFilterQueryString()}`,
+    InventoryProductApi.getAllFetcher
+  );
+
+  const searchChangeHandler: ChangeEventHandler<HTMLInputElement> = (e) => {
+    updateFilter('search', e.target.value);
+  };
+
+  const pageSizeChangeHandler = (val: OptionType | OptionType[] | null) => {
+    const newVal = val as OptionType;
+    setPageSize(newVal.value as number);
+    setPage(1);
+  };
+
+  const columns: ColumnDef<InventoryProduct>[] = useMemo(
+    () => [
+      {
+        header: '#',
+        cell: (props) =>
+          tableFilterState.pageSize * (tableFilterState.page - 1) +
+          props.row.index +
+          1,
+      },
+      {
+        accessorKey: 'name',
+        header: 'Nama',
+      },
+      {
+        accessorKey: 'product_price',
+        header: 'Harga Beli',
+        cell: (props) => {
+          return props.row.original.product_price
+            ? formatCurrency(props.row.original.product_price)
+            : '-';
+        },
+      },
+      {
+        accessorKey: 'selling_price',
+        header: 'Harga Jual',
+        cell: (props) => {
+          return props.row.original.selling_price
+            ? formatCurrency(props.row.original.selling_price)
+            : '-';
+        },
+      },
+      {
+        accessorFn: (row) => row.product_category.name,
+        header: 'Kategori',
+      },
+      {
+        accessorFn: (row) => row.total_stock,
+        header: 'Stok',
+        cell: (props) => {
+          return props.row.original.total_stock
+            ? formatNumber(props.row.original.total_stock)
+            : '0';
+        },
+      },
+      {
+        accessorFn: (row) => row.uom.name,
+        header: 'Satuan',
+      },
+      {
+        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;
+
+          return (
+            <>
+              {currentPageSize > 2 && (
+                <RowDropdownOptions isLast2Rows={isLast2Rows}>
+                  <RowOptionsMenu type='dropdown' props={props} />
+                </RowDropdownOptions>
+              )}
+
+              {currentPageSize <= 2 && (
+                <RowCollapseOptions>
+                  <RowOptionsMenu type='collapse' props={props} />
+                </RowCollapseOptions>
+              )}
+            </>
+          );
+        },
+      },
+    ],
+    []
+  );
+
+  return (
+    <>
+      <div className='w-full p-0 sm:p-4'>
+        <div className='flex flex-col gap-2 mb-4'>
+          <div className='w-full flex flex-col sm:flex-row justify-between items-end sm:items-center gap-2'>
+            <div className='w-full flex flex-row gap-2'></div>
+          </div>
+
+          <div className='flex justify-between items-end gap-4'>
+            <DebouncedTextInput
+              name='search'
+              placeholder='Cari Produk'
+              value={tableFilterState.search}
+              onChange={searchChangeHandler}
+              className={{ wrapper: 'sm:max-w-3xs' }}
+            />
+            <SelectInput
+              label='Baris'
+              options={ROWS_OPTIONS}
+              value={{
+                label: String(tableFilterState.pageSize),
+                value: tableFilterState.pageSize,
+              }}
+              onChange={pageSizeChangeHandler}
+              className={{
+                wrapper:
+                  'col-span-6 sm:col-span-4 max-w-28 sm:justify-self-end',
+              }}
+            />
+          </div>
+        </div>
+
+        <Table<InventoryProduct>
+          data={
+            isResponseSuccess(inventoryProducts) ? inventoryProducts?.data : []
+          }
+          columns={columns}
+          pageSize={tableFilterState.pageSize}
+          page={
+            isResponseSuccess(inventoryProducts)
+              ? inventoryProducts?.meta?.page
+              : 0
+          }
+          totalItems={
+            isResponseSuccess(inventoryProducts)
+              ? inventoryProducts?.meta?.total_results
+              : 0
+          }
+          onPageChange={setPage}
+          isLoading={isLoading}
+          sorting={sorting}
+          setSorting={setSorting}
+          className={{
+            containerClassName: cn({
+              'mb-20':
+                isResponseSuccess(inventoryProducts) &&
+                inventoryProducts?.data?.length === 0,
+            }),
+            tableWrapperClassName: 'overflow-x-auto min-h-full!',
+            tableClassName: 'font-inter w-full table-auto min-h-full!',
+            headerRowClassName: 'border-b border-b-gray-200',
+            headerColumnClassName:
+              'px-6 py-3 text-xs font-semibold text-gray-500 last:flex last:flex-row last:justify-end',
+            bodyRowClassName: 'border-b border-b-gray-200',
+            bodyColumnClassName:
+              'px-6 py-3 last:flex last:flex-row last:justify-end',
+          }}
+        />
+      </div>
+    </>
+  );
+};
+
+export default InventoryProductTable;

src/components/pages/inventory/product/detail/InventoryProductDetail.tsx

@@ -0,0 +1,118 @@
+import Card from '@/components/Card';
+import { FormHeader } from '@/components/helper/form/FormHeader';
+import StockLogTable from '@/components/pages/inventory/product/detail/StockLogTable';
+import StockProductWarehouseTable from '@/components/pages/inventory/product/detail/StockProductWarehouseTable';
+import { formatCurrency, formatNumber } from '@/lib/helper';
+import { InventoryProduct } from '@/types/api/inventory/product';
+import { useMemo } from 'react';
+
+const InventoryProductDetail = ({
+  inventoryProduct,
+}: {
+  inventoryProduct?: InventoryProduct;
+}) => {
+  const stockLogs = useMemo(() => {
+    return (
+      inventoryProduct?.product_warehouses?.flatMap(
+        (warehouse) => warehouse.stock_logs || []
+      ) || []
+    );
+  }, [inventoryProduct]);
+
+  return (
+    <div className='flex flex-col gap-4 p-4'>
+      <FormHeader
+        title='Detail Persediaan Produk'
+        backUrl='/inventory/product'
+      />
+
+      <Card
+        title='Informasi Produk'
+        variant='bordered'
+        className={{
+          wrapper: 'w-full mt-4',
+        }}
+      >
+        <div className='grid grid-cols-2 gap-4'>
+          <div className='overflow-x-auto rounded-box border border-base-content/5 bg-base-100 mt-3'>
+            <table className='table'>
+              <tbody>
+                <tr>
+                  <td className='font-semibold'>SKU</td>
+                  <td>:</td>
+                  <td>{inventoryProduct?.sku}</td>
+                </tr>
+                <tr>
+                  <td className='font-semibold'>Nama Produk</td>
+                  <td>:</td>
+                  <td>{inventoryProduct?.name}</td>
+                </tr>
+                <tr>
+                  <td className='font-semibold'>Kategory</td>
+                  <td>:</td>
+                  <td>{inventoryProduct?.product_category.name}</td>
+                </tr>
+                <tr>
+                  <td className='font-semibold'>Satuan</td>
+                  <td>:</td>
+                  <td>{inventoryProduct?.uom.name}</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+
+          <div className='overflow-x-auto rounded-box border border-base-content/5 bg-base-100 mt-3'>
+            <table className='table'>
+              <tbody>
+                <tr>
+                  <td className='font-semibold'>Harga Jual</td>
+                  <td>:</td>
+                  <td>
+                    {inventoryProduct?.selling_price
+                      ? formatCurrency(inventoryProduct.selling_price)
+                      : '-'}
+                  </td>
+                </tr>
+                <tr>
+                  <td className='font-semibold'>Harga Beli</td>
+                  <td>:</td>
+                  <td>
+                    {inventoryProduct?.product_price
+                      ? formatCurrency(inventoryProduct?.product_price)
+                      : '-'}
+                  </td>
+                </tr>
+                <tr>
+                  <td className='font-semibold'>Pajak</td>
+                  <td>:</td>
+                  <td>
+                    {inventoryProduct?.tax
+                      ? formatCurrency(inventoryProduct?.tax)
+                      : '-'}
+                  </td>
+                </tr>
+                <tr>
+                  <td className='font-semibold'>Total Stok</td>
+                  <td>:</td>
+                  <td>
+                    {inventoryProduct?.total_stock
+                      ? formatNumber(inventoryProduct?.total_stock)
+                      : '0'}
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </Card>
+
+      <StockProductWarehouseTable
+        productWarehouseStock={inventoryProduct?.product_warehouses ?? []}
+      />
+
+      <StockLogTable stockLogs={stockLogs} />
+    </div>
+  );
+};
+
+export default InventoryProductDetail;

src/components/pages/inventory/product/detail/StockLogTable.tsx

@@ -0,0 +1,81 @@
+import Card from '@/components/Card';
+import Table from '@/components/Table';
+import { formatDate, formatNumber, formatTitleCase } from '@/lib/helper';
+import { StockLog } from '@/types/api/inventory/product';
+
+const StockLogTable = ({ stockLogs }: { stockLogs: StockLog[] }) => {
+  return (
+    <Card
+      title='Informasi Stock Produk'
+      collapsible
+      variant='bordered'
+      className={{
+        wrapper: 'w-full',
+      }}
+    >
+      <Table<StockLog>
+        data={stockLogs}
+        columns={[
+          {
+            header: 'ID',
+            accessorKey: 'id',
+          },
+          {
+            header: 'Tanggal',
+            accessorKey: 'created_at',
+            cell: (props) => {
+              return formatDate(props.row.original.created_at, 'DD-MMM-yyyy');
+            },
+          },
+          {
+            header: 'Peningkatan',
+            accessorKey: 'increase',
+            cell: (props) => {
+              return formatNumber(props.row.original.increase);
+            },
+          },
+          {
+            header: 'Penurunan',
+            accessorKey: 'decrease',
+            cell: (props) => {
+              return formatNumber(props.row.original.decrease);
+            },
+          },
+          {
+            header: 'Jenis Transaksi',
+            accessorKey: 'loggable_type',
+            cell: (props) => {
+              return props.row.original.loggable_type
+                ? formatTitleCase(props.row.original.loggable_type)
+                : '-';
+            },
+          },
+          {
+            header: 'Catatan',
+            accessorKey: 'notes',
+            cell: (props) => {
+              return props.row.original.notes ? props.row.original.notes : '-';
+            },
+          },
+          {
+            header: 'Oleh',
+            accessorKey: 'created_user.name',
+          },
+        ]}
+        className={{
+          containerClassName: 'mt-6',
+          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',
+        }}
+      />
+    </Card>
+  );
+};
+
+export default StockLogTable;

src/components/pages/inventory/product/detail/StockProductWarehouseTable.tsx

@@ -0,0 +1,65 @@
+import Card from '@/components/Card';
+import Table from '@/components/Table';
+import { formatNumber } from '@/lib/helper';
+import {
+  InventoryProduct,
+  ProductWarehouseStock,
+} from '@/types/api/inventory/product';
+
+const StockProductWarehouseTable = ({
+  productWarehouseStock,
+}: {
+  productWarehouseStock?: ProductWarehouseStock[];
+}) => {
+  return (
+    <Card
+      title='Informasi Gudang'
+      collapsible
+      variant='bordered'
+      className={{
+        wrapper: 'w-full',
+      }}
+    >
+      <Table<ProductWarehouseStock>
+        data={productWarehouseStock ?? []}
+        columns={[
+          {
+            header: 'Nama Gudang',
+            accessorKey: 'warehouse_name',
+          },
+          {
+            header: 'Lokasi',
+            accessorKey: 'location',
+            cell: (props) => {
+              return props.row.original.location != null
+                ? props.row.original.location.name
+                : '-';
+            },
+          },
+          {
+            header: 'Stok',
+            accessorFn(row) {
+              return row.current_stock;
+            },
+            cell: (props) => {
+              return formatNumber(props.row.original.current_stock);
+            },
+          },
+        ]}
+        className={{
+          containerClassName: 'mt-6',
+          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',
+        }}
+      />
+    </Card>
+  );
+};
+
+export default StockProductWarehouseTable;

src/components/pages/marketing/form/MarketingForm.schema.ts

@@ -6,7 +6,7 @@ import {
 import {
   DeliveryOrderProductFormValues,
   DeliveryOrderProductSchema,
-} from './repeater/delivery-order/DeliverOrderProduct.schema';
+} from '@/components/pages/marketing/form/repeater/delivery-order/DeliverOrderProduct.schema';
 
 type MarketingSchemaType = {
   customer_id: number | undefined;

src/components/pages/marketing/form/MarketingForm.tsx

@@ -8,7 +8,6 @@ import SelectInput, {
   OptionType,
   useSelect,
 } from '@/components/input/SelectInput';
-import TextArea from '@/components/input/TextArea';
 import Modal, { useModal } from '@/components/Modal';
 import { formatCurrency, formatDate } from '@/lib/helper';
 import {
@@ -31,23 +30,23 @@ import {
   DeliveryOrderSchema,
   SalesOrderFormValues,
   SalesOrderSchema,
-} from './MarketingForm.schema';
+} from '@/components/pages/marketing/form/MarketingForm.schema';
 import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
 import {
   DeliveryOrderApi,
   MarketingApi,
   SalesOrderApi,
 } from '@/services/api/marketing/marketing';
-import { SalesOrderProductFormValues } from './repeater/sales-order/SalesOrderProduct.schema';
 import ConfirmationModal from '@/components/modal/ConfirmationModal';
 import toast from 'react-hot-toast';
 import { useRouter } from 'next/navigation';
-import SalesOrderProductTable from './table-view/SalesOrderProductTable';
-import SalesOrderProductForm from './repeater/sales-order/SalesOrderProductForm';
-import DeliveryOrderProductTable from './table-view/DeliveryOrderProductTable';
-import DeliveryOrderProductForm from './repeater/delivery-order/DeliverOrderProduct';
-import { DeliveryOrderProductFormValues } from './repeater/delivery-order/DeliverOrderProduct.schema';
 import DebouncedTextArea from '@/components/input/DebouncedTextArea';
+import SalesOrderProductTable from '@/components/pages/marketing/form/table-view/SalesOrderProductTable';
+import SalesOrderProductForm from '@/components/pages/marketing/form/repeater/sales-order/SalesOrderProductForm';
+import DeliveryOrderProductTable from '@/components/pages/marketing/form/table-view/DeliveryOrderProductTable';
+import DeliveryOrderProductForm from '@/components/pages/marketing/form/repeater/delivery-order/DeliverOrderProduct';
+import { SalesOrderProductFormValues } from '@/components/pages/marketing/form/repeater/sales-order/SalesOrderProduct.schema';
+import { DeliveryOrderProductFormValues } from '@/components/pages/marketing/form/repeater/delivery-order/DeliverOrderProduct.schema';
 
 const MemoizedSalesOrderProductTable = memo(SalesOrderProductTable);
 const MemoizedSalesOrderProductForm = memo(SalesOrderProductForm);
@@ -156,8 +155,6 @@ export const recalculate = (
   field: string,
   values: ProductCalculationFields
 ) => {
-  console.log('Values');
-  console.log(values);
   const { qty, unit_price, total_price, avg_weight, total_weight } = values;
   const result: Partial<ProductCalculationFields> = {};
   if (field == 'unit_price' || field == 'total_price' || field == 'qty') {
@@ -174,8 +171,6 @@ export const recalculate = (
       result.avg_weight = Number(total_weight) / Number(qty);
     }
   }
-  console.log('Result');
-  console.log(result);
   return result;
 };
 export const getSubmitField = (values: ProductCalculationFields) => {
@@ -327,8 +322,6 @@ const MarketingForm = ({
                 })
                 .filter((item) => Boolean(item)),
             } as UpdateDeliveryOrderPayload);
-      console.log('PAYLOAD');
-      console.log(payload);
       switch (formType) {
         case 'add':
           await createMarketingHandler(payload as CreateSalesOrderPayload);
@@ -352,7 +345,6 @@ const MarketingForm = ({
   // ================== FORM REPEATER HANDLER ==================
   const createMarketingHandler = async (values: CreateSalesOrderPayload) => {
     setIsLoading(true);
-    console.log(values);
     const createMarketingRes = await SalesOrderApi.create(values);
     if (isResponseSuccess(createMarketingRes)) {
       toast.success(createMarketingRes?.message as string);
@@ -365,7 +357,6 @@ const MarketingForm = ({
   };
   const updateMarketingHandler = async (values: UpdateSalesOrderPayload) => {
     setIsLoading(true);
-    console.log(values);
     const updateMarketingRes = await SalesOrderApi.update(
       initialValues?.id as number,
       values
@@ -381,10 +372,8 @@ const MarketingForm = ({
   };
   const createDeliveryHandler = async (values: CreateDeliveryOrderPayload) => {
     setIsLoading(true);
-    console.log(initialValues?.id);
     const createDeliveryRes = await DeliveryOrderApi.create(values);
     if (isResponseSuccess(createDeliveryRes)) {
-      console.log(createDeliveryRes);
       toast.success(createDeliveryRes?.message as string);
       setDeliveryOrderValues(
         createDeliveryRes.data?.delivery_order?.flatMap((delivery) =>
@@ -397,20 +386,17 @@ const MarketingForm = ({
       router.push(`/marketing/detail?marketingId=${initialValues?.id}`);
     }
     if (isResponseError(createDeliveryRes)) {
-      console.log(createDeliveryRes);
       toast.error(createDeliveryRes?.message as string);
     }
     setIsLoading(false);
   };
   const updateDeliveryHandler = async (values: UpdateDeliveryOrderPayload) => {
     setIsLoading(true);
-    console.log(initialValues?.id);
     const updateDeliveryRes = await DeliveryOrderApi.update(
       initialValues?.id as number,
       values
     );
     if (isResponseSuccess(updateDeliveryRes)) {
-      console.log(updateDeliveryRes);
       toast.success(updateDeliveryRes?.message as string);
       setDeliveryOrderValues(
         mergeSOwithDO(
@@ -426,7 +412,6 @@ const MarketingForm = ({
       router.push(`/marketing/detail?marketingId=${initialValues?.id}`);
     }
     if (isResponseError(updateDeliveryRes)) {
-      console.log(updateDeliveryRes);
       toast.error(updateDeliveryRes?.message as string);
     }
     setIsLoading(false);
@@ -435,16 +420,13 @@ const MarketingForm = ({
   // ================== MARKETING HANDLER ==================
   const deleteMarketingHandler = async () => {
     setIsLoading(true);
-    console.log(initialValues?.id);
     const deleteMarketingRes = await MarketingApi.delete(
       initialValues?.id as number
     );
     if (isResponseSuccess(deleteMarketingRes)) {
-      console.log(deleteMarketingRes);
       toast.success(deleteMarketingRes?.message as string);
     }
     if (isResponseError(deleteMarketingRes)) {
-      console.log(deleteMarketingRes);
       toast.error(deleteMarketingRes?.message as string);
     }
     setIsLoading(false);

src/components/pages/marketing/form/repeater/delivery-order/DeliverOrderProduct.tsx

@@ -2,7 +2,7 @@ import { useEffect, useState } from 'react';
 import {
   DeliveryOrderProductFormValues,
   DeliveryOrderProductSchema,
-} from './DeliverOrderProduct.schema';
+} from '@/components/pages/marketing/form/repeater/delivery-order/DeliverOrderProduct.schema';
 import { useFormik } from 'formik';
 import Alert from '@/components/Alert';
 import Button from '@/components/Button';

src/components/pages/marketing/pdf/DeliveryOrderExport.tsx

@@ -3,10 +3,10 @@ import { BaseDeliveryOrder, Marketing } from '@/types/api/marketing/marketing';
 import { Icon } from '@iconify/react';
 import { Document, Image, Page, pdf, Text, View } from '@react-pdf/renderer';
 import { useMemo, useState } from 'react';
-import pdfStyles from './styles/MarketingPDFStyles';
 import { formatDate, formatNumber, formatVechicleNumber } from '@/lib/helper';
 import { format } from 'path';
 import { date } from 'yup';
+import pdfStyles from '@/components/pages/marketing/pdf/styles/MarketingPDFStyles';
 
 interface DeliveryOrderExportProps {
   data?: Marketing;

src/components/pages/marketing/pdf/SalesOrderExport.tsx

@@ -3,8 +3,8 @@ import { Marketing } from '@/types/api/marketing/marketing';
 import { Icon } from '@iconify/react';
 import { Document, Image, Page, pdf, Text, View } from '@react-pdf/renderer';
 import { useMemo, useState } from 'react';
-import pdfStyles from './styles/MarketingPDFStyles';
 import { formatDate, formatNumber } from '@/lib/helper';
+import pdfStyles from '@/components/pages/marketing/pdf/styles/MarketingPDFStyles';
 
 interface SalesOrderExportProps {
   data?: Marketing;

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

@@ -306,7 +306,6 @@ const SupplierForm = ({
               label='Hatchery'
               value={hatcheryOptionsValues}
               onChange={(val) => {
-                console.log(val); // pastikan val = array of { value, label }
                 setHatcheryOptionValues(val as OptionType[]);
               }}
               isError={

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

@@ -7,13 +7,16 @@ 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';
+import ChickinFormView from '@/components/pages/production/chickin/form/tabs/ChickinFormView';
+import ChickinLogsView from '@/components/pages/production/chickin/form/tabs/ChickLogsView';
+import DrawerHeader from '@/components/helper/drawer/DrawerHeader';
+import { Icon } from '@iconify/react';
+import Badge from '@/components/Badge';
 const ChickinFormKandang = ({
   formType = 'add',
   initialValues,
@@ -23,7 +26,7 @@ const ChickinFormKandang = ({
   initialValues: ProjectFlockKandang;
   afterSubmit?: () => void;
 }) => {
-  const [activeTabId, setActiveTabId] = useState<string>('formChickIn');
+  const [openChickin, setOpenChickin] = useState<boolean>(false);
 
   const {
     approvals,
@@ -37,108 +40,148 @@ const ChickinFormKandang = ({
   });
 
   const afterSubmitFormChickin = () => {
-    setActiveTabId('logsChickIn');
+    setOpenChickin(true);
     afterSubmit && afterSubmit();
     refreshApprovals();
   };
 
   return (
-    <div className='flex flex-col gap-4'>
-      <FormHeader
-        title={`Chick In ${initialValues.kandang?.name ?? 'Kandang'}`}
-        backUrl={`/production/project-flock/chickin/add?projectFlockId=${initialValues?.project_flock?.id}`}
+    <>
+      <DrawerHeader
+        subtitle={`Chick In ${initialValues.kandang?.name ?? 'Kandang'}`}
+        leftIcon='mdi:arrow-left'
+        leftIconHref={`/production/project-flock/detail?projectFlockId=${initialValues?.project_flock?.id}`}
       />
 
-      {approvals && !approvalsLoading && (
-        <ApprovalSteps approvals={approvals} />
-      )}
+      {/* Informasi Kandang */}
+      <div className='divider'></div>
+      <div className='px-4 pb-4 flex flex-col gap-4'>
+        <h2 className='text-xl font-semibold'>Informasi Kandang</h2>
 
-      <Card
-        title='Informasi Kandang'
-        className={{
-          wrapper: 'w-full bg-white mt-4',
-        }}
-      >
-        <Table<Kandang>
-          emptyContent={
-            <div className='w-full p-5 text-center'>
-              <span className='text-lg opacity-50'>
-                Informasi Kandang belum tersedia...
-              </span>
-            </div>
-          }
-          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',
-          }}
+        {approvals && !approvalsLoading && (
+          <div className='mb-3 text-sm'>
+            <ApprovalSteps approvals={approvals} />
+          </div>
+        )}
+
+        {/* Badge Row */}
+        <div className='flex flex-row gap-2'>
+          <Badge
+            variant='soft'
+            color='success'
+            className={{
+              badge: 'rounded-lg px-2',
+            }}
+          >
+            <Icon icon='mdi:circle' width={12} height={12} color='success' />{' '}
+            Aktif
+          </Badge>
+          <div className='divider divider-horizontal p-0 m-0'></div>
+          <Badge
+            color='neutral'
+            variant='soft'
+            className={{ badge: 'rounded-lg px-2' }}
+          >
+            <Icon icon='mdi:home' width={12} height={12} />
+            {` Kapasitas ${formatNumber(initialValues.kandang.capacity)} Ekor`}
+          </Badge>
+        </div>
+
+        {/* Information Grid */}
+        <div className='grid grid-cols-3 gap-4'>
+          {/* Area */}
+          <div
+            className='col-span-1 flex flex-row items-center text-gray-400 font-semibold gap-2 
+        relative 
+        before:content-[""] before:absolute before:left-[5px] before:top-[90%] before:bottom-[-100%] before:w-[1px] before:border-1 before:border-dashed before:border-gray-400'
+          >
+            <Icon width={14} height={14} icon='mdi:circle-slice-8' /> Area
+          </div>
+          <div className='col-span-2'>
+            {initialValues.project_flock.area.name}
+          </div>
+
+          {/* Lokasi */}
+          <div
+            className='col-span-1 flex flex-row items-center text-gray-400 font-semibold gap-2 
+        relative 
+        before:content-[""] before:absolute before:left-[5px] before:top-[90%] before:bottom-[-100%] before:w-[1px] before:border-1 before:border-dashed before:border-gray-400'
+          >
+            <Icon width={14} height={14} icon='mdi:circle-slice-8' /> Lokasi
+          </div>
+          <div className='col-span-2'>
+            {initialValues.project_flock?.location.name}
+          </div>
+
+          {/* Kandang */}
+          <div
+            className='col-span-1 flex flex-row items-center text-gray-400 font-semibold gap-2 
+        relative 
+        before:content-[""] before:absolute before:left-[5px] before:top-[90%] before:bottom-[-100%] before:w-[1px] before:border-1 before:border-dashed before:border-gray-400'
+          >
+            <Icon width={14} height={14} icon='mdi:circle-slice-8' /> Kandang
+          </div>
+          <div className='col-span-2'>{initialValues.kandang.name}</div>
+
+          {/* Jumlah DOC */}
+          <div className='col-span-1 flex flex-row items-center text-gray-400 font-semibold gap-2'>
+            <Icon width={14} height={14} icon='mdi:circle-slice-8' /> Jumlah DOC
+          </div>
+          <div className='col-span-2'>
+            {formatNumber(
+              initialValues.chickins?.reduce(
+                (total, chickin) => total + chickin.usage_qty,
+                0
+              ) ?? 0
+            )}{' '}
+            Ekor
+          </div>
+        </div>
+      </div>
+
+      <div className='divider'></div>
+      <div className='px-4 pb-4 flex flex-col gap-4'>
+        <h2 className='text-xl font-semibold'>Informasi Chick In</h2>
+        {/* Badge Row  */}
+        <div className='flex flex-row gap-2'>
+          <Badge
+            variant='soft'
+            color={'success'}
+            className={{
+              badge: 'rounded-lg px-2',
+            }}
+          >
+            <Icon icon='mdi:circle' width={12} height={12} color={'success'} />{' '}
+            Perlu Chick In ({initialValues.available_qtys?.length ?? 0})
+          </Badge>
+          <div className='divider divider-horizontal p-0 m-0'></div>
+          <Badge
+            color='neutral'
+            variant='soft'
+            className={{ badge: 'rounded-lg px-2 cursor-pointer' }}
+            onClick={() => setOpenChickin(!openChickin)}
+          >
+            {`Riwayat Chick In ${formatNumber(initialValues.chickins?.length ?? 0)}`}
+            <Icon
+              icon={`mdi:${openChickin ? 'eye' : 'eye-off'}`}
+              width={12}
+              height={12}
+            />
+          </Badge>
+        </div>
+      </div>
+      {openChickin && (
+        <ChickinLogsView
+          initialValues={initialValues}
+          afterSubmit={afterSubmitFormChickin}
         />
-      </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'
+      )}
+      <ChickinFormView
+        initialValues={initialValues}
+        formType={formType}
+        afterSubmit={afterSubmitFormChickin}
       />
-    </div>
+    </>
   );
 };
 

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

@@ -2,17 +2,12 @@ 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 ConfirmationModalWithNotes from '@/components/modal/ConfirmationModalWithNotes';
 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 { formatDate, formatNumber } from '@/lib/helper';
 import { ChickinApi } from '@/services/api/production/chickin';
-import {
-  Chickin,
-  ProjectFlockKandang,
-} from '@/types/api/production/project-flock-kandang';
+import { ProjectFlockKandang } from '@/types/api/production/project-flock-kandang';
 import { Icon } from '@iconify/react';
 import { useState } from 'react';
 import toast from 'react-hot-toast';
@@ -54,105 +49,120 @@ const ChickinLogsView = ({
 
   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',
-          }}
-        />
+      <div className='px-4 pb-4 flex flex-col gap-4'>
+        {/* Card List Chickin Logs */}
+        {(initialValues?.chickins || []).length === 0 ? (
+          <div className='w-full p-8 text-center'>
+            <span className='text-lg opacity-50'>
+              Belum ada riwayat Chick In...
+            </span>
+          </div>
+        ) : (
+          (initialValues?.chickins || []).map((chickin, index) => {
+            const isApproved = chickin.usage_qty !== 0;
+            const isPending = chickin.pending_usage_qty !== 0;
+            const quantity = isApproved
+              ? chickin.usage_qty
+              : isPending
+                ? chickin.pending_usage_qty
+                : 0;
+
+            return (
+              <Card
+                key={chickin.id || index}
+                variant='bordered'
+                className={{
+                  wrapper: 'w-full',
+                  body: 'p-3',
+                }}
+              >
+                <div className='flex flex-col gap-4'>
+                  {/* Header with Status Badge */}
+                  <div className='flex flex-row justify-between items-center'>
+                    <div className='text-lg font-semibold'>
+                      Chick In #{index + 1}
+                    </div>
+                    <PillBadge
+                      content={
+                        isApproved ? 'Disetujui' : isPending ? 'Pending' : '-'
+                      }
+                      color={
+                        isApproved ? 'green' : isPending ? 'yellow' : 'gray'
+                      }
+                    />
+                  </div>
+
+                  {/* Tanggal Chick In */}
+                  <div className='flex flex-row justify-between items-center'>
+                    <div className='flex flex-row gap-2 items-center text-gray-400'>
+                      <Icon icon={'mdi:calendar'} width={14} height={14} />{' '}
+                      <span>Tanggal Chick In</span>
+                    </div>
+                    <div className='text-end text-gray-500'>
+                      {formatDate(chickin.chick_in_date, 'DD MMM YYYY')}
+                    </div>
+                  </div>
+
+                  {/* Kandang */}
+                  <div className='flex flex-row justify-between items-center'>
+                    <div className='flex flex-row gap-2 items-center text-gray-400'>
+                      <Icon icon={'mdi:home'} width={14} height={14} />{' '}
+                      <span>Kandang</span>
+                    </div>
+                    <div className='text-end text-gray-500'>
+                      {chickin.product_warehouse?.warehouse?.name || '-'}
+                    </div>
+                  </div>
+
+                  {/* Produk */}
+                  <div className='flex flex-row justify-between items-center'>
+                    <div className='flex flex-row gap-2 items-center text-gray-400'>
+                      <Icon
+                        icon={'mdi:package-variant'}
+                        width={14}
+                        height={14}
+                      />{' '}
+                      <span>Produk</span>
+                    </div>
+                    <div className='text-end text-gray-500'>
+                      {chickin.product_warehouse?.product?.name || '-'}
+                    </div>
+                  </div>
+
+                  {/* Jumlah Chick In */}
+                  <div className='flex flex-row justify-between items-center'>
+                    <div className='flex flex-row gap-2 items-center text-gray-400'>
+                      <Icon icon={'mdi:counter'} width={14} height={14} />{' '}
+                      <span>Jumlah Chick In</span>
+                    </div>
+                    <div className='text-end text-gray-500 font-semibold'>
+                      {quantity > 0 ? `${formatNumber(quantity)} Ekor` : '-'}
+                    </div>
+                  </div>
+                </div>
+              </Card>
+            );
+          })
+        )}
+
+        {initialValues?.approval?.step_number == 1 && (
+          <Button
+            color='success'
+            onClick={handleClickApprove}
+            className='w-full'
+          >
+            <Icon width={24} height={24} icon='material-symbols:check' />
+            Approve Semua Chick In
+          </Button>
+        )}
+
         {chickinErrorMessage && (
           <div className='w-full' onClick={() => setChickinErrorMessage('')}>
             <Alert color='error'>{chickinErrorMessage}</Alert>
           </div>
         )}
-      </Card>
+      </div>
+
       <ConfirmationModalWithNotes
         ref={confirmModal.ref}
         type='success'

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

@@ -20,6 +20,7 @@ import { ProjectFlockKandang } from '@/types/api/production/project-flock-kandan
 import { useRouter } from 'next/navigation';
 import Alert from '@/components/Alert';
 import { formatNumber } from '@/lib/helper';
+import { Icon } from '@iconify/react';
 
 const ChickinFormView = ({
   initialValues,
@@ -118,106 +119,142 @@ const ChickinFormView = ({
 
   return (
     <form
-      className='flex flex-col gap-4'
+      className='flex flex-col gap-4 p-4'
       onReset={() => {
         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>
+      {(formik.values.chickin_requests || []).map((chickinRequest, index) => {
+        const availableQty = initialValues?.available_qtys?.find(
+          (availableQty) =>
+            availableQty.product_warehouse.id ===
+            chickinRequest.product_warehouse_id
+        );
+        return (
+          <Card
+            key={index}
+            // title={`${formatNumber(availableQty?.available_qty ?? 0)} Ekor - ${availableQty?.product_warehouse?.product?.name}`}
+            variant='bordered'
+            size='sm'
+            className={{
+              wrapper: 'w-full',
+              body: 'p-3',
+            }}
+          >
+            <div className='flex flex-row justify-between items-center'>
+              <div className='text-lg font-semibold'>
+                {formatNumber(availableQty?.available_qty ?? 0)} Ekor -{' '}
+                {availableQty?.product_warehouse?.product?.name}
+              </div>
+              {chickinRequest.chick_in_date && (
+                <Icon
+                  icon='mdi:check-circle-outline'
+                  color='success'
+                  className='text-success'
+                  width={20}
+                  height={20}
+                />
+              )}
             </div>
-          }
-        />
-      </Card>
-      <div className='flex flex-row justify-center gap-3'>
-        <Button type='reset' color='warning' disabled={formik.isSubmitting}>
-          Reset
-        </Button>
+            <DateInput
+              className={{
+                wrapper: 'w-full',
+                inputWrapper: 'bg-white',
+              }}
+              label='Tanggal Chick In'
+              name={`chickin_requests[${index}].chick_in_date`}
+              value={chickinRequest.chick_in_date}
+              onChange={formik.handleChange}
+            />
+          </Card>
+        );
+      })}
+      {/* <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>
+        }
+      /> */}
+      {formik.values.chickin_requests?.length > 0 && (
         <Button
           type='submit'
           color='primary'
           disabled={!formik.isValid || formik.isSubmitting}
         >
-          Submit
+          <Icon icon='mdi:checkbox-marked-outline' width={24} height={24} />
+          Chick In
         </Button>
-      </div>
+      )}
       {chickinErrorMessage && (
         <div className='w-full' onClick={() => setChickinErrorMessage('')}>
           <Alert color='error'>{chickinErrorMessage}</Alert>

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

@@ -1,6 +1,8 @@
 'use client';
 
+import Badge from '@/components/Badge';
 import Button from '@/components/Button';
+import FloatingActionsButton from '@/components/FloatingActionsButton';
 import CheckboxInput from '@/components/input/CheckboxInput';
 import DebouncedTextInput from '@/components/input/DebouncedTextInput';
 import SelectInput, { OptionType } from '@/components/input/SelectInput';
@@ -8,23 +10,18 @@ import { useModal } from '@/components/Modal';
 import ConfirmationModal from '@/components/modal/ConfirmationModal';
 import ConfirmationModalWithNotes from '@/components/modal/ConfirmationModalWithNotes';
 import Table from '@/components/Table';
-import RowCollapseOptions from '@/components/table/RowCollapseOptions';
-import RowDropdownOptions from '@/components/table/RowDropdownOptions';
 import { ROWS_OPTIONS } from '@/config/constant';
 import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
-import { cn } from '@/lib/helper';
+import { cn, formatDate } from '@/lib/helper';
 import { AreaApi, KandangApi, LocationApi } from '@/services/api/master-data';
 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';
-import {
-  ProjectFlockApprovalPayload,
-  ProjectFlock,
-} from '@/types/api/production/project-flock';
+import { ProjectFlock } from '@/types/api/production/project-flock';
 import { Icon } from '@iconify/react';
 import { CellContext, SortingState } from '@tanstack/react-table';
-import { ChangeEventHandler, useState } from 'react';
+import { useRouter } from 'next/navigation';
+import { ChangeEventHandler, useEffect, useMemo, useState } from 'react';
 import toast from 'react-hot-toast';
 import useSWR from 'swr';
 
@@ -98,7 +95,7 @@ const RowOptionsMenu = ({
   );
 };
 
-const ProjectFlockTable = () => {
+const ProjectFlockTable = ({ refresh }: { refresh?: () => void }) => {
   const {
     state: tableFilterState,
     updateFilter,
@@ -123,8 +120,9 @@ const ProjectFlockTable = () => {
       periodFilter: 'period',
     },
   });
+  const router = useRouter();
 
-  // State
+  // ===== State =====
   const [rowSelection, setRowSelection] = useState<Record<string, boolean>>({});
   const selectedRowIds = Object.keys(rowSelection)
     .filter((id) => rowSelection[id])
@@ -151,14 +149,15 @@ const ProjectFlockTable = () => {
   const [isDeleteLoading, setIsDeleteLoading] = useState(false);
   const [isApproveLoading, setIsApproveLoading] = useState(false);
 
-  // Fetch Data
+  // ===== Fetch Data =====
   const {
     data: projectFlocks,
     isLoading,
     mutate: refreshProjectFlocks,
   } = useSWR(
     `${ProjectFlockApi.basePath}${getTableFilterQueryString()}`,
-    ProjectFlockApi.getAllFetcher
+    ProjectFlockApi.getAllFetcher,
+    { revalidateOnMount: true }
   );
 
   const areaUrl = `${AreaApi.basePath}?${new URLSearchParams({
@@ -191,7 +190,7 @@ const ProjectFlockTable = () => {
     KandangApi.getAllFetcher
   );
 
-  // Data to Options Mapping
+  // ===== Data to Options Mapping ======
   const optionsArea = isResponseSuccess(areas)
     ? areas?.data.map((area) => ({
         value: area.id,
@@ -211,7 +210,7 @@ const ProjectFlockTable = () => {
       }))
     : [];
 
-  // Handler
+  // ====== HANDLER ======
   const pageSizeChangeHandler = (val: OptionType | OptionType[] | null) => {
     const newVal = val as OptionType;
     setPageSize(newVal.value as number);
@@ -219,17 +218,17 @@ const ProjectFlockTable = () => {
   const confirmationModalDeleteClickHandler = async () => {
     setIsDeleteLoading(true);
 
-    await ProjectFlockApi.delete(selectedProjectFlock?.id as number);
+    await ProjectFlockApi.delete(selectedSingleRow?.id as number);
     refreshProjectFlocks();
 
     deleteModal.closeModal();
     toast.success('Successfully delete Project Flock!');
     setIsDeleteLoading(false);
+    setRowSelection({});
   };
   const searchChangeHandler: ChangeEventHandler<HTMLInputElement> = (e) => {
     updateFilter('search', e.target.value);
   };
-
   const confirmApprovalHandler = async (
     notes: string,
     approvalAction: 'APPROVED' | 'REJECTED'
@@ -259,22 +258,44 @@ const ProjectFlockTable = () => {
     setIsApproveLoading(false);
   };
 
+  // ====== EFFECT ======
+  useEffect(() => {
+    refreshProjectFlocks();
+  }, [refresh]);
+
+  // ====== MEMO ======
+  const selectedSingleRow: ProjectFlock | null | undefined = useMemo(() => {
+    return selectedRowIds.length === 1
+      ? isResponseSuccess(projectFlocks)
+        ? projectFlocks?.data.find((row) => row.id === selectedRowIds[0])
+        : null
+      : null;
+  }, [rowSelection]);
+
+  const canApprove = useMemo(() => {
+    if (!selectedSingleRow || isApproveLoading) return false;
+
+    const isPengajuan = selectedSingleRow.approval.step_number == 1;
+    const isNotRejected = selectedSingleRow.approval.action != 'REJECTED';
+
+    return isPengajuan && isNotRejected;
+  }, [selectedSingleRow, isApproveLoading]);
+
   return (
     <>
-      <div className='w-full p-0 sm:p-4'>
+      <div className='min-h-screen w-full p-0 sm:p-4'>
         <div className='flex flex-col gap-2 mb-4'>
           <div className='w-full flex flex-col justify-between items-end gap-2'>
             <div className='flex flex-col sm:flex-row gap-3 w-full'>
               <Button
-                href='/production/project-flock/add'
-                variant='outline'
                 color='primary'
                 className='w-full sm:w-fit'
+                href='/production/project-flock/add'
               >
                 <Icon icon='ic:round-plus' width={24} height={24} />
                 Tambah
               </Button>
-              <Button
+              {/* <Button
                 variant='outline'
                 color='success'
                 onClick={() => {
@@ -299,7 +320,7 @@ const ProjectFlockTable = () => {
               >
                 <Icon icon='mdi:times' width={24} height={24} />
                 Reject
-              </Button>
+              </Button> */}
               <div className='ms-auto w-full sm:w-auto'>
                 <DebouncedTextInput
                   name='search'
@@ -391,9 +412,7 @@ const ProjectFlockTable = () => {
                 id: 'select',
                 header: ({ table }) => {
                   const allRows = table.getRowModel().rows;
-                  const selectableRows = allRows.filter(
-                    (row) => row.original?.approval?.step_number == 1
-                  );
+                  const selectableRows = allRows;
 
                   const allSelected =
                     selectableRows.every((row) => row.getIsSelected()) &&
@@ -417,12 +436,6 @@ const ProjectFlockTable = () => {
                         checked={allSelected}
                         indeterminate={someSelected}
                         onChange={toggleSelectableRows}
-                        disabled={
-                          isResponseSuccess(projectFlocks) &&
-                          projectFlocks?.data?.filter(
-                            (flock) => flock.approval.step_number == 1
-                          ).length == 0
-                        }
                       />
                     </div>
                   );
@@ -431,14 +444,8 @@ const ProjectFlockTable = () => {
                   return (
                     <CheckboxInput
                       name='row'
-                      checked={
-                        row.getIsSelected() &&
-                        row.original.approval.step_number == 1
-                      }
-                      disabled={
-                        !row.getCanSelect() ||
-                        row.original.approval.step_number != 1
-                      }
+                      checked={row.getIsSelected()}
+                      disabled={!row.getCanSelect()}
                       indeterminate={row.getIsSomeSelected()}
                       onChange={row.getToggleSelectedHandler()}
                     />
@@ -469,6 +476,40 @@ const ProjectFlockTable = () => {
               {
                 accessorKey: 'approval.step_name',
                 header: 'Status',
+                cell: (props) => {
+                  const approval = props.row.original.approval;
+
+                  return (
+                    <Badge
+                      variant='soft'
+                      className={{
+                        badge:
+                          'rounded-lg px-2 w-full flex flex-row justify-start',
+                      }}
+                      color={
+                        approval.step_number == 1
+                          ? 'neutral'
+                          : approval.step_number == 2
+                            ? 'success'
+                            : 'error'
+                      }
+                    >
+                      <Icon
+                        icon='mdi:circle'
+                        width={12}
+                        height={12}
+                        color={
+                          approval.step_number == 1
+                            ? 'neutral'
+                            : approval.step_number == 2
+                              ? 'success'
+                              : 'error'
+                        }
+                      />
+                      {approval.step_name}
+                    </Badge>
+                  );
+                },
               },
               {
                 header: 'Kandang',
@@ -496,51 +537,51 @@ const ProjectFlockTable = () => {
                 accessorKey: 'created_at',
                 header: 'Dibuat pada',
                 cell: (props) =>
-                  new Date(props.row.original.created_at).toLocaleDateString(),
+                  formatDate(props.row.original.created_at, 'MMM DD, YYYY'),
               },
-              {
-                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;
+              // {
+              //   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 isLast2Rows =
+              //       currentRowRelativeIndex > currentPageSize - 2;
 
-                  const deleteClickHandler = () => {
-                    setSelectedProjectFlock(props.row.original);
-                    deleteModal.openModal();
-                  };
+              //     const deleteClickHandler = () => {
+              //       setSelectedProjectFlock(props.row.original);
+              //       deleteModal.openModal();
+              //     };
 
-                  return (
-                    <>
-                      {currentPageSize > 2 && (
-                        <RowDropdownOptions isLast2Rows={isLast2Rows}>
-                          <RowOptionsMenu
-                            type='dropdown'
-                            props={props}
-                            deleteClickHandler={deleteClickHandler}
-                          />
-                        </RowDropdownOptions>
-                      )}
+              //     return (
+              //       <>
+              //         {currentPageSize > 2 && (
+              //           <RowDropdownOptions isLast2Rows={isLast2Rows}>
+              //             <RowOptionsMenu
+              //               type='dropdown'
+              //               props={props}
+              //               deleteClickHandler={deleteClickHandler}
+              //             />
+              //           </RowDropdownOptions>
+              //         )}
 
-                      {currentPageSize <= 2 && (
-                        <RowCollapseOptions>
-                          <RowOptionsMenu
-                            type='collapse'
-                            props={props}
-                            deleteClickHandler={deleteClickHandler}
-                          />
-                        </RowCollapseOptions>
-                      )}
-                    </>
-                  );
-                },
-              },
+              //         {currentPageSize <= 2 && (
+              //           <RowCollapseOptions>
+              //             <RowOptionsMenu
+              //               type='collapse'
+              //               props={props}
+              //               deleteClickHandler={deleteClickHandler}
+              //             />
+              //           </RowCollapseOptions>
+              //         )}
+              //       </>
+              //     );
+              //   },
+              // },
             ]}
             pageSize={tableFilterState.pageSize}
             page={
@@ -576,6 +617,57 @@ const ProjectFlockTable = () => {
         </div>
       </div>
 
+      <FloatingActionsButton
+        actions={[
+          {
+            action: 'DETAIL',
+            icon: 'mdi:eye-outline',
+            label: 'Lihat Detail',
+            hidden: selectedRowIds.length !== 1,
+            onClick() {
+              router.push(
+                `/production/project-flock/detail?projectFlockId=${selectedRowIds[0]}`
+              );
+              setRowSelection({});
+            },
+          },
+          {
+            action: 'DELETE',
+            icon: 'material-symbols:delete-outline-rounded',
+            label: `Hapus data`,
+            hidden: selectedRowIds.length !== 1,
+            onClick: () => {
+              deleteModal.openModal();
+            },
+          },
+        ]}
+        approvals={[
+          {
+            icon: 'material-symbols:check',
+            label: 'Approve',
+            action: 'APPROVED',
+            onClick: () => {
+              setApprovalAction('APPROVED');
+              confirmModal.openModal();
+            },
+            disabled: !canApprove,
+          },
+          {
+            icon: 'mdi:times',
+            label: 'Reject',
+            action: 'REJECTED',
+            onClick: () => {
+              setApprovalAction('REJECTED');
+              confirmModal.openModal();
+            },
+          },
+        ]}
+        selectedRowIds={selectedRowIds}
+        onClose={() => {
+          setRowSelection({});
+        }}
+      />
+
       <ConfirmationModal
         ref={deleteModal.ref}
         type='error'

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

@@ -10,7 +10,7 @@ import SelectInput, {
 import PillBadge from '@/components/PillBadge';
 import Table from '@/components/Table';
 import { isResponseSuccess } from '@/lib/api-helper';
-import { cn } from '@/lib/helper';
+import { cn, formatDate, formatTitleCase } from '@/lib/helper';
 import { ProjectFlockApi } from '@/services/api/production/project-flock';
 import { ProjectFlockKandangApi } from '@/services/api/production';
 import { useTableFilter } from '@/services/hooks/useTableFilter';
@@ -21,6 +21,7 @@ import { useRouter } from 'next/navigation';
 import { useEffect, useState } from 'react';
 import useSWR from 'swr';
 import { FormHeader } from '@/components/helper/form/FormHeader';
+import Link from 'next/link';
 
 const ProjectFlockChickinDetail = ({
   projectFlockId,
@@ -101,11 +102,26 @@ const ProjectFlockChickinDetail = ({
   }, [projectFlockId, listProjectFlock]);
   return (
     <>
-      <FormHeader
+      {/* Header */}
+      <div className='flex flex-row justify-between items-center px-4 py-4'>
+        <div className='flex flex-row items-center h-full gap-2'>
+          <Link
+            href={`/production/project-flock/detail?projectFlockId=${projectFlock?.id}`}
+            className='hover:text-gray-400'
+          >
+            <Icon icon='mdi:arrow-left' width={24} height={24} />
+          </Link>
+          <div className='divider divider-horizontal p-0 m-0'></div>
+          <div className='text-sm text-neutral'>
+            Chick In {projectFlock?.flock_name}
+          </div>
+        </div>
+      </div>
+      {/* <FormHeader
         title={`Chick In ${projectFlock?.flock_name ?? 'Project Flock'}`}
-        backUrl='/production/project-flock'
-      />
-      <div className='flex flex-col gap-4 w-full my-4'>
+        backUrl={`/production/project-flock/detail?projectFlockId=${projectFlock?.id}`}
+      /> */}
+      {/* <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
@@ -145,8 +161,129 @@ const ProjectFlockChickinDetail = ({
             }
           />
         </div>
-      </div>
-      <Card
+      </div> */}
+      {/* Informasi Umum */}
+      {projectFlock && (
+        <div className='border-t-1 border-gray-300'>
+          <div className='p-4 flex flex-col gap-4'>
+            <h2 className='text-2xl font-semibold'>Informasi Umum</h2>
+            {/* Badge Row  */}
+            <div className='flex flex-row gap-2'>
+              <Badge
+                variant='soft'
+                color={
+                  projectFlock.approval.step_number == 1
+                    ? 'neutral'
+                    : projectFlock.approval.step_number == 2
+                      ? 'success'
+                      : projectFlock.approval.step_number >= 3
+                        ? 'error'
+                        : undefined
+                }
+                className={{
+                  badge: 'rounded-lg px-2',
+                }}
+              >
+                <Icon
+                  icon='mdi:circle'
+                  width={12}
+                  height={12}
+                  color={
+                    projectFlock.approval.step_number == 1
+                      ? 'neutral'
+                      : projectFlock.approval.step_number == 2
+                        ? 'success'
+                        : projectFlock.approval.step_number >= 3
+                          ? 'error'
+                          : undefined
+                  }
+                />{' '}
+                {projectFlock.approval.step_name}
+              </Badge>
+              <div className='divider divider-horizontal p-0 m-0'></div>
+              <Badge
+                color='neutral'
+                variant='soft'
+                className={{ badge: 'rounded-lg px-2' }}
+              >
+                <Icon icon='mdi:bookmark' width={12} height={12} />
+                {` ${formatTitleCase(projectFlock.category)}`}
+              </Badge>
+            </div>
+            {/* Information Grid */}
+            <div className='grid grid-cols-3 gap-4'>
+              <div className='col-span-1 flex flex-row items-center text-gray-400 font-semibold gap-2'>
+                <Icon width={14} height={14} icon='mdi:account' /> Submitted
+              </div>
+              <div className='col-span-2'>
+                <Badge
+                  variant='soft'
+                  color='neutral'
+                  className={{
+                    badge: 'rounded-lg px-2',
+                  }}
+                >
+                  <Icon icon='mdi:account-circle' width={14} height={14} />{' '}
+                  {projectFlock.created_user.name}
+                </Badge>
+              </div>
+
+              <div className='col-span-1 flex flex-row items-center text-gray-400 font-semibold gap-2'>
+                <Icon width={14} height={14} icon={'mdi:clock'} /> History
+              </div>
+              <div className='col-span-2'>
+                <Button variant='outline' className='py-1 text-sm'>
+                  See History{' '}
+                  <Icon
+                    icon='mdi:arrow-top-right-thin'
+                    width={11}
+                    height={11}
+                  />
+                </Button>
+              </div>
+
+              {/* BARIS 1 */}
+              <div
+                className='col-span-1 flex flex-row items-center text-gray-400 font-semibold gap-2 
+        relative 
+        before:content-[""] before:absolute before:left-[5px] before:top-[90%] before:bottom-[-100%] before:w-[1px] before:border-1 before:border-dashed before:border-gray-400'
+              >
+                <Icon width={14} height={14} icon='mdi:circle-slice-8' /> Area
+              </div>
+              <div className='col-span-2'>{projectFlock.area.name}</div>
+
+              {/* BARIS 2 */}
+              <div
+                className='col-span-1 flex flex-row items-center text-gray-400 font-semibold gap-2 
+        relative 
+        before:content-[""] before:absolute before:left-[5px] before:top-[90%] before:bottom-[-100%] before:w-[1px] before:border-1 before:border-dashed before:border-gray-400'
+              >
+                <Icon width={14} height={14} icon='mdi:circle-slice-8' /> Lokasi
+              </div>
+              <div className='col-span-2'>{projectFlock.location.name}</div>
+
+              <div
+                className='col-span-1 flex flex-row items-center text-gray-400 font-semibold gap-2 
+        relative 
+        before:content-[""] before:absolute before:left-[5px] before:top-[90%] before:bottom-[-100%] before:w-[1px] before:border-1 before:border-dashed before:border-gray-400'
+              >
+                <Icon width={14} height={14} icon='mdi:circle-slice-8' /> FCR
+              </div>
+              <div className='col-span-2'>{projectFlock.fcr.name}</div>
+
+              {/* BARIS 3 (Terakhir - TIDAK PERLU garis di bawahnya) */}
+              <div className='col-span-1 flex flex-row items-center text-gray-400 font-semibold gap-2'>
+                <Icon width={14} height={14} icon='mdi:circle-slice-8' />{' '}
+                Kategori
+              </div>
+              <div className='col-span-2'>
+                {formatTitleCase(projectFlock.category)}
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+      {/* <Card
         title='Informasi Flock'
         className={{
           wrapper: 'w-full bg-white mb-3',
@@ -231,8 +368,152 @@ const ProjectFlockChickinDetail = ({
             paginationClassName: 'hidden',
           }}
         />
-      </Card>
-      <Card
+      </Card> */}
+      {/* Card Kandangs */}
+      <div className='border-t-1 border-gray-300'>
+        <div className='p-4 flex flex-col gap-4'>
+          <h2 className='text-2xl font-semibold'>Daftar Kandang</h2>
+          {isResponseSuccess(listProjectFlock) ? (
+            <>
+              {/* Badge Row  */}
+              <div className='flex flex-row gap-2'>
+                <Badge
+                  variant='soft'
+                  color={'success'}
+                  className={{
+                    badge: 'rounded-lg px-2',
+                  }}
+                >
+                  <Icon
+                    icon='mdi:circle'
+                    width={12}
+                    height={12}
+                    color={'success'}
+                  />{' '}
+                  Disetujui (
+                  {isResponseSuccess(listProjectFlockKandang) &&
+                    listProjectFlockKandang.data.filter(
+                      (k) => k.approval?.step_number == 1
+                    ).length}
+                  )
+                </Badge>
+                <div className='divider divider-horizontal p-0 m-0'></div>
+                <Badge
+                  variant='soft'
+                  color={'neutral'}
+                  className={{
+                    badge: 'rounded-lg px-2',
+                  }}
+                >
+                  <Icon
+                    icon='mdi:circle'
+                    width={12}
+                    height={12}
+                    color={'neutral'}
+                  />{' '}
+                  Pengajuan (
+                  {isResponseSuccess(listProjectFlockKandang) &&
+                    listProjectFlockKandang.data.filter(
+                      (k) => k.approval?.step_number == 2
+                    ).length}
+                  )
+                </Badge>
+                <div className='divider divider-horizontal p-0 m-0'></div>
+                <Badge
+                  color='error'
+                  variant='soft'
+                  className={{ badge: 'rounded-lg px-2' }}
+                >
+                  <Icon
+                    icon={`mdi:circle`}
+                    width={12}
+                    height={12}
+                    color='error'
+                  />
+                  Belum Chickin (
+                  {isResponseSuccess(listProjectFlockKandang) &&
+                    listProjectFlockKandang.data.filter(
+                      (k) => k.approval == null
+                    ).length}
+                  )
+                </Badge>
+              </div>
+              {/* Card Kandang */}
+              <Card
+                variant='bordered'
+                className={{
+                  wrapper: 'w-full',
+                  body: 'p-3',
+                }}
+              >
+                <div className='flex flex-col gap-6'>
+                  {isResponseSuccess(listProjectFlockKandang) &&
+                    listProjectFlockKandang.data.map((kandang) => (
+                      <div
+                        key={kandang.id}
+                        className='flex flex-row justify-between items-center'
+                      >
+                        <div className='flex flex-row gap-2 items-center cursor-pointer text-gray-400'>
+                          <Badge
+                            variant='soft'
+                            color={
+                              kandang.approval
+                                ? kandang.approval.step_number == 1
+                                  ? 'success'
+                                  : 'neutral'
+                                : 'error'
+                            }
+                            className={{
+                              badge: 'rounded-lg px-2',
+                            }}
+                          >
+                            <Icon
+                              icon='mdi:circle'
+                              width={12}
+                              height={12}
+                              color={
+                                kandang.approval
+                                  ? kandang.approval.step_number == 1
+                                    ? 'success'
+                                    : 'neutral'
+                                  : 'gray'
+                              }
+                            />
+                          </Badge>
+                          <span className='font-semibold'>
+                            {kandang.kandang.name}
+                          </span>
+                        </div>
+                        <Button
+                          variant='outline'
+                          className='py-1 text-sm'
+                          onClick={() => {
+                            handleChickinClick(kandang);
+                          }}
+                          disabled={projectFlock?.approval?.step_number === 1}
+                        >
+                          Chick In{' '}
+                          <Icon
+                            icon='mdi:arrow-top-right-thin'
+                            width={11}
+                            height={11}
+                          />
+                        </Button>
+                      </div>
+                    ))}
+                </div>
+              </Card>
+            </>
+          ) : (
+            <div className='w-full p-5 text-center'>
+              <span className='text-lg opacity-50'>
+                Pilih project flock terlebih dahulu...
+              </span>
+            </div>
+          )}
+        </div>
+      </div>
+      {/* <Card
         title='Daftar Kandang'
         className={{
           wrapper: 'w-full bg-white',
@@ -351,7 +632,7 @@ const ProjectFlockChickinDetail = ({
             paginationClassName: 'hidden',
           }}
         />
-      </Card>
+      </Card> */}
     </>
   );
 };

src/components/pages/production/project-flock/closing/ProjectFlockClosingForm.tsx

@@ -0,0 +1,304 @@
+'use client';
+
+import Button from '@/components/Button';
+import DrawerHeader from '@/components/helper/drawer/DrawerHeader';
+import Table from '@/components/Table';
+import Badge from '@/components/Badge';
+import { cn, formatDate, formatNumber, formatTitleCase } from '@/lib/helper';
+import { ProjectFlock } from '@/types/api/production/project-flock';
+import {
+  ClosingExpense,
+  ProjectFlockKandang,
+} from '@/types/api/production/project-flock-kandang';
+import { Icon } from '@iconify/react';
+import useSWR from 'swr';
+import { ProjectFlockKandangApi } from '@/services/api/production/project-flock-kandang';
+import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
+import { useModal } from '@/components/Modal';
+import ConfirmationModal from '@/components/modal/ConfirmationModal';
+import { useMemo, useState } from 'react';
+import toast from 'react-hot-toast';
+import { useRouter } from 'next/navigation';
+import { ProductWarehouse } from '@/types/api/inventory/product-warehouse';
+
+const ProjectFlockClosingForm = ({
+  projectFlock,
+  projectFlockKandang,
+}: {
+  projectFlock: ProjectFlock;
+  projectFlockKandang: ProjectFlockKandang;
+}) => {
+  const router = useRouter();
+  const closeModal = useModal();
+  const isCanClose = projectFlock.approval?.step_number <= 2;
+  const [isClosingLoading, setIsClosingLoading] = useState(false);
+
+  const { data: closingData, isLoading } = useSWR(
+    `${ProjectFlockKandangApi.basePath}/${projectFlockKandang.id}/closing`,
+    () => ProjectFlockKandangApi.checkClosing(projectFlockKandang.id)
+  );
+
+  const confirmationModalCloseClickHandler = async () => {
+    setIsClosingLoading(true);
+    const deleteProjectFlockRes = await ProjectFlockKandangApi.closing(
+      projectFlock?.id as number,
+      {
+        closed_date: formatDate(new Date(), 'yyyy-MM-dd'),
+        action: isCanClose ? 'close' : 'unclose',
+      }
+    );
+
+    if (isResponseSuccess(deleteProjectFlockRes)) {
+      toast.success(deleteProjectFlockRes?.message as string);
+      router.push(`/production/project-flock`);
+    }
+    if (isResponseError(deleteProjectFlockRes)) {
+      toast.error(deleteProjectFlockRes?.message as string);
+    }
+    setIsClosingLoading(false);
+    closeModal.closeModal();
+  };
+
+  const errorStock = useMemo(() => {
+    return isResponseSuccess(closingData)
+      ? closingData?.data?.stock_remaining.every((stock) => stock.quantity > 0)
+      : false;
+  }, [closingData]);
+
+  const errorExpense = useMemo(() => {
+    return isResponseSuccess(closingData)
+      ? closingData?.data?.expenses.every((expense) => expense.step < 5)
+      : false;
+  }, [closingData]);
+
+  const isCanCloseValid = !errorStock && !errorExpense;
+
+  return (
+    <>
+      <DrawerHeader
+        leftIcon='mdi:arrow-left'
+        leftIconHref={`/production/project-flock/detail?projectFlockId=${projectFlock.id}`}
+        subtitle={`Close ${projectFlock.flock_name}`}
+      ></DrawerHeader>
+
+      {/* Informasi Kandang */}
+      <div className='divider'></div>
+      <div className='px-4 pb-4 flex flex-col gap-4'>
+        <h2 className='text-2xl font-semibold'>Informasi Kandang</h2>
+
+        {/* Badge Row */}
+        <div className='flex flex-row gap-2'>
+          <Badge
+            variant='soft'
+            color='success'
+            className={{
+              badge: 'rounded-lg px-2',
+            }}
+          >
+            <Icon icon='mdi:circle' width={12} height={12} color='success' />{' '}
+            Aktif
+          </Badge>
+          <div className='divider divider-horizontal p-0 m-0'></div>
+          <Badge
+            color='neutral'
+            variant='soft'
+            className={{ badge: 'rounded-lg px-2' }}
+          >
+            <Icon icon='mdi:home' width={12} height={12} />
+            {` Kapasitas ${formatNumber(projectFlockKandang.kandang?.capacity)} Ekor`}
+          </Badge>
+        </div>
+
+        {/* Information Grid */}
+        <div className='grid grid-cols-3 gap-4'>
+          {/* Area */}
+          <div
+            className='col-span-1 flex flex-row items-center text-gray-400 font-semibold gap-2 
+        relative 
+        before:content-[""] before:absolute before:left-[5px] before:top-[90%] before:bottom-[-100%] before:w-[1px] before:border-1 before:border-dashed before:border-gray-400'
+          >
+            <Icon width={14} height={14} icon='mdi:circle-slice-8' /> Area
+          </div>
+          <div className='col-span-2'>{projectFlock.area?.name}</div>
+
+          {/* Lokasi */}
+          <div
+            className='col-span-1 flex flex-row items-center text-gray-400 font-semibold gap-2 
+        relative 
+        before:content-[""] before:absolute before:left-[5px] before:top-[90%] before:bottom-[-100%] before:w-[1px] before:border-1 before:border-dashed before:border-gray-400'
+          >
+            <Icon width={14} height={14} icon='mdi:circle-slice-8' /> Lokasi
+          </div>
+          <div className='col-span-2'>{projectFlock.location?.name}</div>
+
+          {/* Kandang */}
+          <div
+            className='col-span-1 flex flex-row items-center text-gray-400 font-semibold gap-2 
+        relative 
+        before:content-[""] before:absolute before:left-[5px] before:top-[90%] before:bottom-[-100%] before:w-[1px] before:border-1 before:border-dashed before:border-gray-400'
+          >
+            <Icon width={14} height={14} icon='mdi:circle-slice-8' /> Kandang
+          </div>
+          <div className='col-span-2'>{projectFlockKandang.kandang?.name}</div>
+
+          {/* Jumlah DOC */}
+          <div className='col-span-1 flex flex-row items-center text-gray-400 font-semibold gap-2'>
+            <Icon width={14} height={14} icon='mdi:circle-slice-8' /> Jumlah DOC
+          </div>
+          <div className='col-span-2'>
+            {formatNumber(
+              projectFlockKandang.chickins?.reduce(
+                (total, chickin) => total + chickin.usage_qty,
+                0
+              ) ?? 0
+            )}{' '}
+            Ekor
+          </div>
+        </div>
+      </div>
+
+      {/* Table Biaya */}
+      <div className='divider'></div>
+      <div className='px-4 pb-4'>
+        <h2 className='text-2xl font-semibold'>Biaya</h2>
+        <Table<ClosingExpense>
+          data={
+            isResponseSuccess(closingData) ? closingData.data?.expenses : []
+          }
+          columns={[
+            {
+              header: 'PO Number',
+              accessorKey: 'po_number',
+            },
+            {
+              header: 'Total',
+              accessorKey: 'total',
+            },
+            {
+              header: 'Status',
+              accessorKey: 'status',
+              cell(props) {
+                return (
+                  <Badge
+                    className={{
+                      badge: 'rounded-lg',
+                    }}
+                    variant='soft'
+                    color={
+                      props.row.original.step < 5
+                        ? props.row.original.step == 1
+                          ? 'neutral'
+                          : 'success'
+                        : 'error'
+                    }
+                  >
+                    {formatTitleCase(props.row.original.status)}
+                  </Badge>
+                );
+              },
+            },
+          ]}
+          className={{
+            containerClassName: cn('my-4'),
+            tableWrapperClassName: 'overflow-x-auto min-h-full! max-w-120',
+            tableClassName: 'font-inter w-full table-sm min-h-full!',
+            headerRowClassName: 'border-b border-b-gray-200',
+            headerColumnClassName:
+              'px-3 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-3 py-3 last:flex last:flex-row last:justify-end',
+            paginationClassName: 'hidden',
+          }}
+        />
+        {errorExpense && (
+          <div className='text-center text-error'>
+            *Pastikan semua biaya sudah selesai sebelum melakukan closing.
+          </div>
+        )}
+      </div>
+
+      {/* Table Persediaan Gudang */}
+      <div className='divider'></div>
+      <div className='px-4 pb-4'>
+        <h2 className='text-2xl font-semibold'>Persediaan Gudang</h2>
+        <Table<ProductWarehouse>
+          data={
+            isResponseSuccess(closingData)
+              ? closingData.data?.stock_remaining
+              : []
+          }
+          columns={[
+            {
+              header: 'Product',
+              accessorKey: 'product.name',
+            },
+            {
+              header: 'Kategori',
+              accessorKey: 'product.product_category.name',
+            },
+            {
+              header: 'Quantity',
+              accessorKey: 'quantity',
+            },
+            {
+              header: 'UOM',
+              accessorKey: 'product.uom.name',
+            },
+          ]}
+          className={{
+            containerClassName: cn('my-4'),
+            tableWrapperClassName: 'overflow-x-auto min-h-full! max-w-120',
+            tableClassName: 'font-inter w-full table-sm min-h-full!',
+            headerRowClassName: 'border-b border-b-gray-200',
+            headerColumnClassName:
+              'px-3 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-3 py-3 last:flex last:flex-row last:justify-end',
+            paginationClassName: 'hidden',
+          }}
+        />
+        {errorStock && (
+          <div className='text-center text-error'>
+            *Masih ada sisa stock yang belum dihabiskan.
+          </div>
+        )}
+      </div>
+
+      <div className='p-4 mt-6'>
+        <Button
+          className='w-full'
+          color='error'
+          isLoading={isLoading}
+          disabled={!isCanCloseValid}
+          onClick={() => closeModal.openModal()}
+        >
+          <Icon icon='mdi:checkbox-marked-circle-outline' />{' '}
+          {isCanClose ? 'Close' : 'Unclose'}
+        </Button>
+      </div>
+
+      <ConfirmationModal
+        ref={closeModal.ref}
+        type='error'
+        text={
+          isCanClose
+            ? 'Apakah kamu yakin ingin mengakhiri project ini ? *Pastikan persediaan produk di gudang terkait sudah kosong, dan BOP sudah selesai'
+            : 'Apakah kamu yakin ingin membuka kembali project ini ? *Project ini akan kembali ke status aktif'
+        }
+        secondaryButton={{
+          text: 'Tidak',
+        }}
+        primaryButton={{
+          text: 'Ya',
+          color: 'error',
+          isLoading: isClosingLoading,
+          onClick: confirmationModalCloseClickHandler,
+        }}
+      />
+    </>
+  );
+};
+
+export default ProjectFlockClosingForm;

src/components/pages/production/project-flock/detail/ProjectFlockDetail.tsx

@@ -0,0 +1,439 @@
+import Badge from '@/components/Badge';
+import Button from '@/components/Button';
+import Card from '@/components/Card';
+import { RadioGroup, RadioGroupItem } from '@/components/input/RadioInput';
+import Tooltip from '@/components/Tooltip';
+import DrawerHeader from '@/components/helper/drawer/DrawerHeader';
+import {
+  formatCurrency,
+  formatDate,
+  formatNumber,
+  formatTitleCase,
+} from '@/lib/helper';
+import { ProjectFlock } from '@/types/api/production/project-flock';
+import { Icon } from '@iconify/react';
+import Link from 'next/link';
+import { useRouter } from 'next/navigation';
+import { useState } from 'react';
+import { useModal } from '@/components/Modal';
+import ConfirmationModal from '@/components/modal/ConfirmationModal';
+import { ProjectFlockApi } from '@/services/api/production/project-flock';
+import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
+import toast from 'react-hot-toast';
+import ApprovalSteps, {
+  useApprovalSteps,
+} from '@/components/pages/ApprovalSteps';
+import { PROJECT_FLOCK_APPROVAL_LINE } from '@/config/approval-line';
+
+const ProjectFlockDetail = ({
+  projectFlock,
+}: {
+  projectFlock: ProjectFlock;
+}) => {
+  const router = useRouter();
+  const deleteModal = useModal();
+  const [isDeleteLoading, setIsDeleteLoading] = useState(false);
+  const [openBudgets, setOpenBudget] = useState(false);
+  const [selectedKandangId, setSelectedKamdangId] = useState<string | null>(
+    null
+  );
+
+  const selectedKandang = projectFlock.kandangs.find(
+    (kandang) => kandang.id === Number(selectedKandangId)
+  );
+
+  const {
+    approvals,
+    isLoading: approvalsLoading,
+    refresh: refreshApprovals,
+  } = useApprovalSteps({
+    latestApproval: projectFlock?.approval,
+    approvalLines: PROJECT_FLOCK_APPROVAL_LINE,
+    moduleName: 'PROJECT_FLOCKS',
+    moduleId: projectFlock?.id.toString() ?? '',
+  });
+
+  const confirmationModalDeleteClickHandler = async () => {
+    setIsDeleteLoading(true);
+    const deleteProjectFlockRes = await ProjectFlockApi.delete(
+      projectFlock?.id as number
+    );
+
+    if (isResponseSuccess(deleteProjectFlockRes)) {
+      toast.success(deleteProjectFlockRes?.message as string);
+      router.push('/production/project-flock');
+    }
+    if (isResponseError(deleteProjectFlockRes)) {
+      toast.error(deleteProjectFlockRes?.message as string);
+    }
+    setIsDeleteLoading(false);
+  };
+
+  return (
+    <>
+      <div className='h-full w-full flex flex-col gap-4'>
+        {/* Header */}
+        <DrawerHeader
+          leftIcon='mdi:close'
+          leftIconHref='/production/project-flock'
+          subtitle={`Created On ${formatDate(projectFlock.created_at, 'MMM DD, YYYY')}`}
+        >
+          <Link
+            href={`/production/project-flock/detail/edit?projectFlockId=${projectFlock.id}`}
+            className='p-0'
+          >
+            <Tooltip content='Edit' position='bottom'>
+              <Button variant='link' className='p-0 text-neutral'>
+                <Icon icon='mdi:square-edit-outline' width={20} height={20} />
+              </Button>
+            </Tooltip>
+          </Link>
+          <Button
+            variant='link'
+            className='p-0 text-error'
+            onClick={() => {
+              deleteModal.openModal();
+            }}
+          >
+            <Tooltip content='Hapus' position='bottom'>
+              <Icon icon='mdi:trash-can-outline' width={20} height={20} />
+            </Tooltip>
+          </Button>
+        </DrawerHeader>
+
+        {/* Informasi Umum */}
+        <div className='border-t-1 border-gray-300'>
+          <div className='p-4 flex flex-col gap-4'>
+            <h2 className='text-2xl font-semibold'>Informasi Umum</h2>
+            {/* Status Approval */}
+            {approvals && !approvalsLoading && (
+              <div className='text-sm my-3'>
+                <ApprovalSteps approvals={approvals} />
+              </div>
+            )}
+            {/* Badge Row  */}
+            <div className='flex flex-row gap-2'>
+              <Badge
+                variant='soft'
+                color={
+                  projectFlock.approval?.step_number == 1
+                    ? 'neutral'
+                    : projectFlock.approval?.step_number == 2
+                      ? 'success'
+                      : projectFlock.approval?.step_number >= 3
+                        ? 'error'
+                        : undefined
+                }
+                className={{
+                  badge: 'rounded-lg px-2',
+                }}
+              >
+                <Icon
+                  icon='mdi:circle'
+                  width={12}
+                  height={12}
+                  color={
+                    projectFlock.approval?.step_number == 1
+                      ? 'neutral'
+                      : projectFlock.approval?.step_number == 2
+                        ? 'success'
+                        : projectFlock.approval?.step_number >= 3
+                          ? 'error'
+                          : undefined
+                  }
+                />{' '}
+                {projectFlock.approval?.step_name}
+              </Badge>
+              <div className='divider divider-horizontal p-0 m-0'></div>
+              <Badge
+                color='neutral'
+                variant='soft'
+                className={{ badge: 'rounded-lg px-2' }}
+              >
+                <Icon icon='mdi:bookmark' width={12} height={12} />
+                {` ${formatTitleCase(projectFlock.category)}`}
+              </Badge>
+            </div>
+            {/* Information Grid */}
+            <div className='grid grid-cols-3 gap-4'>
+              <div className='col-span-1 flex flex-row items-center text-gray-400 font-semibold gap-2'>
+                <Icon width={14} height={14} icon='mdi:account' /> Submitted
+              </div>
+              <div className='col-span-2'>
+                <Badge
+                  variant='soft'
+                  color='neutral'
+                  className={{
+                    badge: 'rounded-lg px-2',
+                  }}
+                >
+                  <Icon icon='mdi:account-circle' width={14} height={14} />{' '}
+                  {projectFlock.created_user.name}
+                </Badge>
+              </div>
+
+              {/* <div className='col-span-1 flex flex-row items-center text-gray-400 font-semibold gap-2'>
+                <Icon width={14} height={14} icon={'mdi:clock'} /> History
+              </div>
+              <div className='col-span-2'>
+                <Button variant='outline' className='py-1 text-sm'>
+                  See History{' '}
+                  <Icon
+                    icon='mdi:arrow-top-right-thin'
+                    width={11}
+                    height={11}
+                  />
+                </Button>
+              </div> */}
+
+              {/* BARIS 1 */}
+              <div
+                className='col-span-1 flex flex-row items-center text-gray-400 font-semibold gap-2 
+        relative 
+        before:content-[""] before:absolute before:left-[5px] before:top-[90%] before:bottom-[-100%] before:w-[1px] before:border-1 before:border-dashed before:border-gray-400'
+              >
+                <Icon width={14} height={14} icon='mdi:circle-slice-8' /> Area
+              </div>
+              <div className='col-span-2'>{projectFlock.area.name}</div>
+
+              {/* BARIS 2 */}
+              <div
+                className='col-span-1 flex flex-row items-center text-gray-400 font-semibold gap-2 
+        relative 
+        before:content-[""] before:absolute before:left-[5px] before:top-[90%] before:bottom-[-100%] before:w-[1px] before:border-1 before:border-dashed before:border-gray-400'
+              >
+                <Icon width={14} height={14} icon='mdi:circle-slice-8' /> Lokasi
+              </div>
+              <div className='col-span-2'>{projectFlock.location.name}</div>
+
+              <div
+                className='col-span-1 flex flex-row items-center text-gray-400 font-semibold gap-2 
+        relative 
+        before:content-[""] before:absolute before:left-[5px] before:top-[90%] before:bottom-[-100%] before:w-[1px] before:border-1 before:border-dashed before:border-gray-400'
+              >
+                <Icon width={14} height={14} icon='mdi:circle-slice-8' /> FCR
+              </div>
+              <div className='col-span-2'>{projectFlock.fcr.name}</div>
+
+              {/* BARIS 3 (Terakhir - TIDAK PERLU garis di bawahnya) */}
+              <div className='col-span-1 flex flex-row items-center text-gray-400 font-semibold gap-2'>
+                <Icon width={14} height={14} icon='mdi:circle-slice-8' />{' '}
+                Kategori
+              </div>
+              <div className='col-span-2'>
+                {formatTitleCase(projectFlock.category)}
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Kandang Aktif */}
+        <div className='border-t-1 border-gray-300'>
+          <div className='p-4 flex flex-col gap-4'>
+            <h2 className='text-2xl font-semibold'>Kandang Aktif</h2>
+            {/* Badge Row  */}
+            <div className='flex flex-row gap-2'>
+              <Badge
+                variant='soft'
+                color={'success'}
+                className={{
+                  badge: 'rounded-lg px-2',
+                }}
+              >
+                <Icon
+                  icon='mdi:circle'
+                  width={12}
+                  height={12}
+                  color={'success'}
+                />{' '}
+                Kandang Aktif ({projectFlock.kandangs.length})
+              </Badge>
+              <div className='divider divider-horizontal p-0 m-0'></div>
+              <Badge
+                color='neutral'
+                variant='soft'
+                className={{ badge: 'rounded-lg px-2 cursor-pointer' }}
+                onClick={() => {
+                  setOpenBudget(!openBudgets);
+                }}
+              >
+                {` ${formatCurrency(
+                  (projectFlock.project_budgets ?? []).reduce(
+                    (acc, curr) => acc + curr.price * curr.qty,
+                    0
+                  )
+                )}`}
+                <Icon
+                  icon={`mdi:${openBudgets ? 'eye' : 'eye-off'}`}
+                  width={12}
+                  height={12}
+                />
+              </Badge>
+            </div>
+
+            {/* Card List Project Budgets */}
+            {openBudgets &&
+              (projectFlock.project_budgets ?? []).map((budget) => (
+                <Card
+                  key={budget.id}
+                  variant='bordered'
+                  className={{
+                    wrapper: 'w-full',
+                    body: 'p-3',
+                  }}
+                >
+                  <div className='flex flex-col gap-6'>
+                    <div className='flex flex-row justify-between items-center'>
+                      <div className='flex flex-row gap-2 items-center text-gray-400'>
+                        <Icon icon={'mdi:tag'} width={14} height={14} />{' '}
+                        <span>Jenis Produk</span>
+                      </div>
+                      <div className='text-end text-gray-500'>
+                        {budget.nonstock?.name}
+                      </div>
+                    </div>
+                    <div className='flex flex-row justify-between items-center'>
+                      <div className='flex flex-row gap-2 items-center text-gray-400'>
+                        <Icon icon={'mdi:tag'} width={14} height={14} />{' '}
+                        <span>Nama Satuan</span>
+                      </div>
+                      <div className='text-end text-gray-500'>
+                        {budget.nonstock?.uom.name}
+                      </div>
+                    </div>
+                    <div className='flex flex-row justify-between items-center'>
+                      <div className='flex flex-row gap-2 items-center text-gray-400'>
+                        <Icon
+                          icon={'mdi:file-multiple'}
+                          width={14}
+                          height={14}
+                        />{' '}
+                        <span>Jumlah Pembelian</span>
+                      </div>
+                      <div className='text-end text-gray-500'>
+                        {formatNumber(budget.qty)}
+                      </div>
+                    </div>
+                    <div className='flex flex-row justify-between items-center'>
+                      <div className='flex flex-row gap-2 items-center text-gray-400'>
+                        <Icon icon={'mdi:file'} width={14} height={14} />{' '}
+                        <span>Harga Satuan</span>
+                      </div>
+                      <div className='text-end text-gray-500'>
+                        {formatCurrency(budget.price)}
+                      </div>
+                    </div>
+                    <div className='flex flex-row justify-between items-center'>
+                      <div className='flex flex-row gap-2 items-center text-gray-400'>
+                        <Icon icon={'mdi:calculator'} width={14} height={14} />{' '}
+                        <span>Total Harga</span>
+                      </div>
+                      <div className='text-end text-gray-500'>
+                        {formatCurrency(budget.price * budget.qty)}
+                      </div>
+                    </div>
+                  </div>
+                </Card>
+              ))}
+
+            {/* Card Kandangs */}
+            <Card
+              variant='bordered'
+              className={{
+                wrapper: 'w-full',
+                body: 'p-3',
+              }}
+            >
+              <RadioGroup
+                name='gender'
+                className={{
+                  radioWrapper: 'grid grid-cols-1 gap-6',
+                }}
+                onChange={(e) => setSelectedKamdangId(e.target.value)}
+                value={selectedKandangId?.toString()}
+                size='md'
+                color='neutral'
+                disabled={projectFlock.approval.step_number == 1}
+              >
+                {projectFlock.kandangs.map((kandang) => (
+                  <div
+                    key={kandang.id}
+                    className={`grid grid-cols-2 gap-6 cursor-pointer hover:text-gray-800`}
+                    onClick={() =>
+                      projectFlock.approval.step_number > 1 &&
+                      setSelectedKamdangId(kandang.id.toString())
+                    }
+                  >
+                    <RadioGroupItem
+                      value={kandang.id.toString()}
+                      label={kandang.name}
+                      disabled={projectFlock.approval.step_number == 1}
+                    />
+                    <div className='text-end'>
+                      <Badge
+                        className={{
+                          badge: 'rounded-lg',
+                        }}
+                      >
+                        Kapasitas {kandang.capacity} Ekor
+                      </Badge>
+                    </div>
+                  </div>
+                ))}
+              </RadioGroup>
+            </Card>
+            <div className='grid grid-cols-4 gap-3'>
+              <Link
+                href={`/production/project-flock/chickin/add/kandang?projectFlockKandangId=${selectedKandang?.project_flock_kandang_id}&projectFlockId=${projectFlock.id}`}
+                className='m-0 p-0'
+              >
+                <Button
+                  className='w-full px-2 py-1 text-sm'
+                  variant='outline'
+                  color='success'
+                  disabled={
+                    !selectedKandangId || projectFlock.approval.step_number == 1
+                  }
+                >
+                  Chickin <Icon icon='mdi:checkbox-marked-outline' />
+                </Button>
+              </Link>
+              <Link
+                href={`/production/project-flock/closing?projectFlockId=${projectFlock.id}&projectFlockKandangId=${selectedKandangId}`}
+                className='m-0 p-0'
+              >
+                <Button
+                  className='w-full px-2 py-1 text-sm'
+                  variant='outline'
+                  color='error'
+                  disabled={
+                    !selectedKandangId || projectFlock.approval.step_number == 1
+                  }
+                >
+                  Close <Icon icon='mdi:checkbox-marked-circle-outline' />
+                </Button>
+              </Link>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <ConfirmationModal
+        ref={deleteModal.ref}
+        type='error'
+        text={`Apakah anda yakin ingin menghapus data Project Flock ini (${projectFlock?.flock_name} - ${projectFlock?.area?.name})?`}
+        secondaryButton={{
+          text: 'Tidak',
+        }}
+        primaryButton={{
+          text: 'Ya',
+          color: 'error',
+          isLoading: isDeleteLoading,
+          onClick: confirmationModalDeleteClickHandler,
+        }}
+      />
+    </>
+  );
+};
+
+export default ProjectFlockDetail;

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

@@ -1,52 +1,124 @@
 import * as Yup from 'yup';
 
-export const ProjectFlockFormSchema = Yup.object({
-  // Flock
-  flock: Yup.object({
-    value: Yup.number().required('ID Flock wajib diisi!'),
-    label: Yup.string().required('Nama Flock wajib diisi!'),
-  }).nullable(),
-  flock_name: Yup.string().required('Nama Flock wajib diisi!'),
+type ProjectFlockFormSchemaType = {
+  flock: {
+    value: number | string;
+    label: string;
+  } | null;
+  flock_name: string;
+  area: {
+    value: number | string;
+    label: string;
+  } | null;
+  area_id: number;
+  category_option: {
+    value: string;
+    label: string;
+  } | null;
+  category: string;
+  fcr: {
+    value: number | string;
+    label: string;
+  } | null;
+  fcr_id: number;
+  location: {
+    value: number | string;
+    label: string;
+  } | null;
+  location_id: number;
+  kandang_ids: number[];
+  project_budgets: ProjectFlockBudgetsSchemaType[];
+};
 
-  // Area
-  area: Yup.object({
-    value: Yup.number().required('ID Area wajib diisi!'),
-    label: Yup.string().required('Nama Area wajib diisi!'),
-  }).nullable(),
-  area_id: Yup.number()
-    .min(1, 'Area wajib diisi!')
-    .required('Area wajib diisi!'),
+export type ProjectFlockBudgetsSchemaType = {
+  nonstock: {
+    value: number | string;
+    label: string;
+  } | null;
+  nonstock_id: number | string;
+  qty: number | string;
+  price: number | string;
+  total_price: number | string;
+};
 
-  // Kategori
-  category_option: Yup.object({
-    value: Yup.string().required('Nilai Kategori wajib diisi!'),
-    label: Yup.string().required('Label Kategori wajib diisi!'),
-  }).nullable(),
-  category: Yup.string()
-    .oneOf(['GROWING', 'LAYING'], 'Kategori wajib diisi!')
-    .required('Kategori wajib diisi!'),
+export const ProjectFlockBudgetsSchema: Yup.ObjectSchema<ProjectFlockBudgetsSchemaType> =
+  Yup.object({
+    nonstock: Yup.object({
+      value: Yup.number().required('ID Nonstock wajib diisi!'),
+      label: Yup.string().required('Nama Nonstock wajib diisi!'),
+    }).required('Nonstock wajib diisi!'),
+    nonstock_id: Yup.number()
+      .min(1, 'Nonstock wajib diisi!')
+      .required('Nonstock wajib diisi!'),
+    qty: Yup.number()
+      .typeError('Jumlah harus berupa angka!')
+      .min(1, 'Jumlah minimal 1!')
+      .required('Jumlah wajib diisi!'),
+    price: Yup.number()
+      .typeError('Harga harus berupa angka!')
+      .min(1, 'Harga minimal 1!')
+      .required('Harga wajib diisi!'),
+    total_price: Yup.number()
+      .typeError('Harga harus berupa angka!')
+      .min(1, 'Harga minimal 1!')
+      .required('Harga wajib diisi!'),
+  });
 
-  // FCR
-  fcr: Yup.object({
-    value: Yup.number().required('ID FCR wajib diisi!'),
-    label: Yup.string().required('Nama FCR wajib diisi!'),
-  }).nullable(),
-  fcr_id: Yup.number().min(1, 'FCR wajib diisi!').required('FCR wajib diisi!'),
+export const ProjectFlockFormSchema: Yup.ObjectSchema<ProjectFlockFormSchemaType> =
+  Yup.object({
+    // Flock
+    flock: Yup.object({
+      value: Yup.number().required('ID Flock wajib diisi!'),
+      label: Yup.string().required('Nama Flock wajib diisi!'),
+    }).nullable(),
+    flock_name: Yup.string().required('Nama Flock wajib diisi!'),
 
-  // Location
-  location: Yup.object({
-    value: Yup.number().required('ID Lokasi wajib diisi!'),
-    label: Yup.string().required('Nama Lokasi wajib diisi!'),
-  }).nullable(),
-  location_id: Yup.number()
-    .min(1, 'Lokasi wajib diisi!')
-    .required('Lokasi wajib diisi!'),
+    // Area
+    area: Yup.object({
+      value: Yup.number().required('ID Area wajib diisi!'),
+      label: Yup.string().required('Nama Area wajib diisi!'),
+    }).nullable(),
+    area_id: Yup.number()
+      .min(1, 'Area wajib diisi!')
+      .required('Area wajib diisi!'),
 
-  kandang_ids: Yup.array()
-    .of(Yup.number().typeError('Kandang tidak valid!'))
-    .min(1, 'Minimal harus ada 1 kandang!')
-    .required('Kandang wajib diisi!'),
-});
+    // Kategori
+    category_option: Yup.object({
+      value: Yup.string().required('Nilai Kategori wajib diisi!'),
+      label: Yup.string().required('Label Kategori wajib diisi!'),
+    }).nullable(),
+    category: Yup.string()
+      .oneOf(['GROWING', 'LAYING'], 'Kategori wajib diisi!')
+      .required('Kategori wajib diisi!'),
+
+    // FCR
+    fcr: Yup.object({
+      value: Yup.number().required('ID FCR wajib diisi!'),
+      label: Yup.string().required('Nama FCR wajib diisi!'),
+    }).nullable(),
+    fcr_id: Yup.number()
+      .min(1, 'FCR wajib diisi!')
+      .required('FCR wajib diisi!'),
+
+    // Location
+    location: Yup.object({
+      value: Yup.number().required('ID Lokasi wajib diisi!'),
+      label: Yup.string().required('Nama Lokasi wajib diisi!'),
+    }).nullable(),
+    location_id: Yup.number()
+      .min(1, 'Lokasi wajib diisi!')
+      .required('Lokasi wajib diisi!'),
+
+    kandang_ids: Yup.array()
+      .of(Yup.number().required('Kandang tidak valid!'))
+      .min(1, 'Minimal harus ada 1 kandang!')
+      .required('Kandang wajib diisi!'),
+
+    project_budgets: Yup.array()
+      .of(ProjectFlockBudgetsSchema)
+      .min(1, 'Minimal harus ada 1 data budget!')
+      .required('Data budget wajib diisi!'),
+  });
 
 export type ProjectFlockFormValues = Yup.InferType<
   typeof ProjectFlockFormSchema

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

@@ -1,5 +1,7 @@
 'use client';
 
+import Badge from '@/components/Badge';
+import Card from '@/components/Card';
 import CheckboxInput from '@/components/input/CheckboxInput';
 import PillBadge from '@/components/PillBadge';
 import Table from '@/components/Table';
@@ -9,6 +11,7 @@ import {
   ProjectFlock,
   ProjectFlockPeriods,
 } from '@/types/api/production/project-flock';
+import { Icon } from '@iconify/react';
 import { OnChangeFn, Row } from '@tanstack/react-table';
 import { useMemo } from 'react';
 
@@ -29,163 +32,119 @@ const ProjectFlockKandangTable = ({
   initialValues?: ProjectFlock;
   formType: 'add' | 'edit' | 'detail';
 }) => {
-  const initialKandangIdSet = useMemo(() => {
-    return initialValues?.kandangs.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;
+  // Fungsi untuk menangani perubahan checkbox
+  const handleCheckboxChange = (kandang: Kandang, isChecked: boolean) => {
+    // Hanya izinkan perubahan jika tidak dalam mode 'detail'
+    if (formType === 'detail') return;
+
+    // Pastikan kandang.id ada dan tidak null/undefined
+    if (kandang.id === undefined) return;
+
+    const kandangIdString = kandang.id.toString();
+
+    setRowSelection((prev) => {
+      const newSelection = { ...prev };
+      if (isChecked) {
+        newSelection[kandangIdString] = true;
+      } else {
+        delete newSelection[kandangIdString];
+      }
+      return newSelection;
+    });
   };
   return (
     <>
-      <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);
+      {listKandang.length > 0 ? (
+        <>
+          {/* ... Bagian Badge Status ... */}
+          <div className='flex flex-row mb-4'>
+            <Badge
+              variant='soft'
+              color='primary'
+              className={{
+                badge: 'rounded-lg px-2',
+              }}
+            >
+              <Icon icon='mdi:circle' width={12} height={12} />
+              Tersedia (
+              {
+                listKandang.filter((kandang) => kandang.status == 'NON_ACTIVE')
+                  .length
+              }
+              )
+            </Badge>
+            <div className='divider divider-horizontal mx-1'></div>
+            <Badge
+              variant='soft'
+              color='neutral'
+              className={{
+                badge: 'rounded-lg px-2',
+              }}
+            >
+              <Icon icon='mdi:circle' width={12} height={12} />
+              Tidak Tersedia (
+              {
+                listKandang.filter((kandang) => kandang.status != 'NON_ACTIVE')
+                  .length
+              }
+              )
+            </Badge>
+          </div>
+          {/* --- */}
+          <Card
+            variant='bordered'
+            className={{
+              wrapper: 'w-full rounded-lg',
+              body: 'p-4',
+            }}
+          >
+            <div className='flex flex-col gap-4 w-full'>
+              {listKandang.map((kandang, index) => {
+                const kandangIdString =
+                  kandang.id?.toString() ?? `temp-${index}`;
 
-              // 2. Cek apakah SEMUA baris yang BISA DIPILIH sudah terpilih
-              const allSelected =
-                selectableRows.length > 0 &&
-                selectableRows.every((row) => row.getIsSelected());
+                const isSelected =
+                  !!rowSelection[kandangIdString] ||
+                  (kandang.id !== undefined &&
+                    selectedIds.includes(kandang.id));
 
-              // 3. Cek apakah BEBERAPA baris yang BISA DIPILIH sudah terpilih
-              const someSelected =
-                selectableRows.some((row) => row.getIsSelected()) &&
-                !allSelected;
+                const isDisabled =
+                  formType == 'detail' || kandang.status != 'NON_ACTIVE';
 
-              // 4. Fungsi toggle HANYA akan mentoggle baris yang BISA DIPILIH
-              const toggleSelectableRows = () => {
-                const shouldSelect = !allSelected;
-                selectableRows.forEach((row) =>
-                  row.toggleSelected(shouldSelect)
+                return (
+                  <div key={index} className='flex flex-row justify-between'>
+                    <CheckboxInput
+                      name={`kandang-${kandang.id}`} // Nama unik untuk setiap checkbox
+                      label={kandang.name}
+                      checked={isSelected}
+                      disabled={isDisabled}
+                      onChange={(e) =>
+                        handleCheckboxChange(kandang, e.currentTarget.checked)
+                      }
+                    />
+                    <Badge
+                      variant='soft'
+                      color={
+                        kandang.status == 'NON_ACTIVE' ? 'primary' : 'neutral'
+                      }
+                      className={{
+                        badge: 'rounded-lg px-2',
+                      }}
+                    >
+                      <Icon icon='mdi:circle' width={12} height={12} />
+                      {kandang.status != 'NON_ACTIVE' && 'Tidak'} Tersedia
+                    </Badge>
+                  </div>
                 );
-              };
-
-              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='row'
-                  checked={
-                    (row.getIsSelected() &&
-                      (row.original.status == 'NON_ACTIVE' ||
-                        row.original.status == 'PENGAJUAN')) ||
-                    (selectedIds && selectedIds.includes(row.original.id))
-                  }
-                  disabled={
-                    formType == 'detail' ||
-                    (!initialKandangIdSet.includes(row.original.id) &&
-                      (row.original.status == 'ACTIVE' ||
-                        row.original.status == 'PENGAJUAN'))
-                  }
-                  indeterminate={row.getIsSomeSelected()}
-                  onChange={row.getToggleSelectedHandler()}
-                />
-              );
-            },
-          },
-          {
-            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.capacity,
-            header: 'Kapasitas',
-          },
-          {
-            accessorFn: (row) => row.location?.name,
-            header: 'Periode',
-            cell: (props) => {
-              console.log('listPeriods');
-              console.log(listPeriods);
-              const period =
-                listPeriods.length > 0
-                  ? listPeriods.find((p) => p.id == props.row.original.id)
-                  : undefined;
-              const calcPeriod = period?.period == 0 ? 1 : period?.period;
-              const selected = props.row.getIsSelected();
-              const initPeriod = initialValues?.period;
-              return formType == 'detail'
-                ? selected
-                  ? initPeriod
-                  : '-'
-                : formType == 'add'
-                  ? (calcPeriod ?? '-')
-                  : selected
-                    ? (initPeriod ?? '-')
-                    : (calcPeriod ?? '-');
-            },
-          },
-          {
-            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}
-      />
+              })}
+            </div>
+          </Card>
+        </>
+      ) : (
+        <div className='text-center py-4 text-gray-400'>
+          Pilih lokasi terlebih dahulu
+        </div>
+      )}
     </>
   );
 };

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

@@ -370,7 +370,7 @@ const RecordingTable = () => {
   const [isDeleteLoading, setIsDeleteLoading] = useState(false);
   const [isApproveLoading, setIsApproveLoading] = useState(false);
   const [isRejectLoading, setIsRejectLoading] = useState(false);
-  const [approvalNotes, setApprovalNotes] = useState('');
+  const [, setApprovalNotes] = useState('');
 
   const singleDeleteModal = useModal();
   const approveModal = useModal();