Merge branch 'development' of gitlab.com:mbugroup/lti-web-client into feat/FE/US-278/TASK-311-adjustment-purchase-and-expense

2026-05-20 13:32:00 +00:00 · 2025-12-10 13:57:07 +07:00
parent 7be32326a9 270e8ff0c6
commit 8dec4915a2
12 changed files with 593 additions and 72 deletions
@@ -44,4 +44,4 @@ next-env.d.ts
 .idea

 # claude
-.claude
+.claude
@@ -1855,6 +1855,7 @@
      "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.2.tgz",
      "integrity": "sha512-6mDvHUFSjyT2B2yeNx2nUgMxh9LtOWvkhIU3uePn2I2oyNymUAX1NIsdgviM4CH+JSrp2D2hsMvJOkxY+0wNRA==",
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "csstype": "^3.0.2"
      }
@@ -1924,6 +1925,7 @@
      "integrity": "sha512-BnOroVl1SgrPLywqxyqdJ4l3S2MsKVLDVxZvjI1Eoe8ev2r3kGDo+PcMihNmDE+6/KjkTubSJnmqGZZjQSBq/g==",
      "dev": true,
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "@typescript-eslint/scope-manager": "8.46.2",
        "@typescript-eslint/types": "8.46.2",
@@ -2447,6 +2449,7 @@
      "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
      "dev": true,
      "license": "MIT",
+      "peer": true,
      "bin": {
        "acorn": "bin/acorn"
      },
@@ -3060,7 +3063,8 @@
      "version": "3.1.3",
      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
    },
    "node_modules/daisyui": {
      "version": "5.5.8",
@@ -3516,6 +3520,7 @@
      "integrity": "sha512-t5aPOpmtJcZcz5UJyY2GbvpDlsK5E8JqRqoKtfiKE3cNh437KIqfJr3A3AKf5k64NPx6d0G3dno6XDY05PqPtw==",
      "dev": true,
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "@eslint-community/eslint-utils": "^4.8.0",
        "@eslint-community/regexpp": "^4.12.1",
@@ -3689,6 +3694,7 @@
      "integrity": "sha512-whOE1HFo/qJDyX4SnXzP4N6zOWn79WhnCUY/iDR0mPfQZO8wcYE4JClzI2oZrhBnnMUCBCHZhO6VQyoBU95mZA==",
      "dev": true,
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "@rtsao/scc": "^1.1.0",
        "array-includes": "^3.1.9",
@@ -6167,6 +6173,7 @@
      "resolved": "https://registry.npmjs.org/react/-/react-19.1.0.tgz",
      "integrity": "sha512-FS+XFBNvn3GTAWq26joslQgWNoFu08F4kl0J4CgdNKADkdSGXQyTCnKteIAJy96Br6YbpEU1LSzV5dYtjMkMDg==",
      "license": "MIT",
+      "peer": true,
      "engines": {
        "node": ">=0.10.0"
      }
@@ -6197,6 +6204,7 @@
      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.1.0.tgz",
      "integrity": "sha512-Xs1hdnE+DyKgeHJeJznQmYMIBG3TKIHJJT95Q58nHLSrElKlGQqDTR2HQ9fx5CN/Gk6Vh/kupBTDLU11/nDk/g==",
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "scheduler": "^0.26.0"
      },
@@ -7083,6 +7091,7 @@
      "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
      "dev": true,
      "license": "MIT",
+      "peer": true,
      "engines": {
        "node": ">=12"
      },
@@ -7250,6 +7259,7 @@
      "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
      "dev": true,
      "license": "Apache-2.0",
+      "peer": true,
      "bin": {
        "tsc": "bin/tsc",
        "tsserver": "bin/tsserver"
@@ -4,6 +4,7 @@ import { useRouter, useSearchParams } from 'next/navigation';
 import useSWR from 'swr';

 import ClosingDetail from '@/components/pages/closing/ClosingDetail';
+import SalesReportTable from '@/components/pages/closing/sale/SalesReportTable';

 import { ClosingApi } from '@/services/api/closing';
 import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
@@ -19,6 +20,11 @@ const ClosingDetailPage = () => {
    (id: number) => ClosingApi.getGeneralInfo(id)
  );

+  const { data: salesReport, isLoading: isLoadingSalesReport } = useSWR(
+    closingId,
+    (id: number) => ClosingApi.getPenjualan(id)
+  );
+
  if (!closingId) {
    router.back();

@@ -43,6 +49,9 @@ const ClosingDetailPage = () => {
      {!isLoadingClosing && isResponseSuccess(closing) && (
        <ClosingDetail id={Number(closingId)} initialValue={closing.data} />
      )}
+      {!isLoadingSalesReport && isResponseSuccess(salesReport) && (
+        <SalesReportTable type='detail' initialValues={salesReport.data} />
+      )}
    </div>
  );
 };
@@ -52,6 +52,7 @@ export default function ProjectFlockLayout({
        closeOnBackdropClick={isDetail ? true : false}
        onBackdropClick={handleBackdropClick}
        variant='right'
+        zIndex='99999'
        sidebarContent={isOpen && <div className=''>{children}</div>}
      />
    </>
@@ -54,7 +54,7 @@ const FloatingActionsButton = ({
    <div
      className={cn(
        `absolute ${positionStyles} inset-x-1/2 -translate-x-1/2 z-50`,
-        'mx-auto w-full max-w-lg sm:mx-0 bg-base-300 p-4 rounded-xl shadow-md transition-all duration-300 transform',
+        'mx-auto w-full max-w-sm sm:mx-0 bg-base-300 p-4 rounded-xl shadow-md transition-all duration-300 transform',
        'bg-slate-950 backdrop-blur-md'
      )}
    >
@@ -7,6 +7,7 @@ import { Icon } from '@iconify/react';
 import Menu from '@/components/menu/Menu';
 import MenuItem from '@/components/menu/MenuItem';
 import Button from '@/components/Button';
+import Dropdown from '@/components/dropdown/Dropdown';

 import { useAuth } from '@/services/hooks/useAuth';
 import { AuthApi } from '@/services/api/auth';
@@ -52,21 +53,21 @@ const Navbar = ({ title, toggleSidebar }: NavbarProps) => {
      </div>

      <div className='flex gap-2'>
-        <div className='dropdown dropdown-end'>
-          <div
-            tabIndex={0}
-            role='button'
-            className='btn btn-ghost btn-circle avatar'
-          >
-            <div className='w-10 rounded-full border grid place-items-center'>
-              <Icon icon='uil:user' width={40} height={40} />
+        <Dropdown
+          position='bottom-end'
+          trigger={
+            <div className='btn btn-ghost btn-circle avatar'>
+              <div className='w-10 rounded-full border flex justify-center items-center'>
+                <Icon icon='uil:user' width={40} height={40} />
+              </div>
            </div>
-          </div>
-
-          <Menu className='dropdown-content w-52 mt-3 p-2 bg-base-100 shadow rounded-box menu-sm'>
+          }
+          contentClassName='w-52 mt-3'
+        >
+          <Menu className='p-2 bg-base-100 shadow rounded-box menu-sm'>
            <MenuItem title='Logout' onClick={logoutClickHandler} />
          </Menu>
-        </div>
+        </Dropdown>
      </div>
    </div>
  );
@@ -14,6 +14,7 @@ import {
  SortingState,
  OnChangeFn,
  Row,
+  HeaderContext,
 } from '@tanstack/react-table';
 import { rankItem } from '@tanstack/match-sorter-utils';
 import { Icon } from '@iconify/react';
@@ -31,6 +32,9 @@ interface TableClassNames {
  tableBodyClassName?: string;
  bodyRowClassName?: string;
  bodyColumnClassName?: string;
+  tableFooterClassName?: string;
+  footerRowClassName?: string;
+  footerColumnClassName?: string;
  paginationClassName?: string;
 }

@@ -53,6 +57,7 @@ export interface TableProps<TData extends object> {
  rowSelection?: Record<string, boolean>;
  setRowSelection?: OnChangeFn<Record<string, boolean>>;
  enableRowSelection?: boolean | ((row: Row<TData>) => boolean);
+  renderFooter?: boolean;
  withCheckbox?: boolean;
  rowOptions?: number[];
 }
@@ -67,18 +72,22 @@ const emptyContentDefaultValue = (
  </div>
 );

-const TABLE_DEFAULT_STYLING = {
+export const TABLE_DEFAULT_STYLING = {
  containerClassName: 'w-full mb-20',
  tableWrapperClassName:
    'overflow-x-auto border border-solid border-base-content/10 rounded-lg',
  tableClassName: 'font-inter w-full table-auto text-sm font-medium',
  tableHeaderClassName: '',
  headerRowClassName: '',
-  headerColumnClassName: 'px-4 py-3 text-base-content/50',
+  headerColumnClassName:
+    'px-4 py-3 border-base-content/10 text-base-content/50',
  tableBodyClassName: '',
-  bodyRowClassName: 'border-t border-t-base-content/10',
+  bodyRowClassName: 'border-t border-base-content/10',
  bodyColumnClassName: 'px-4 py-3 text-base-content',
  paginationClassName: '',
+  tableFooterClassName: 'font-semibold border-base-content/10',
+  footerRowClassName: 'bg-base-200 border-t-2 border-base-content/10',
+  footerColumnClassName: 'p-4 text-base-content whitespace-nowrap',
 };

 const Table = <TData extends object>({
@@ -100,6 +109,7 @@ const Table = <TData extends object>({
  rowSelection,
  setRowSelection,
  enableRowSelection,
+  renderFooter = false,
  withCheckbox = false,
  rowOptions = [10, 20, 50, 100],
 }: TableProps<TData>) => {
@@ -214,58 +224,82 @@ const Table = <TData extends object>({
                key={headerGroup.id}
                className={tableClassNames.headerRowClassName}
              >
-                {headerGroup.headers.map((header) => (
-                  <th
-                    key={header.id}
-                    colSpan={header.colSpan}
-                    onClick={header.column.getToggleSortingHandler()}
-                    className={cn(
-                      header.column.getCanSort()
-                        ? 'cursor-pointer select-none'
-                        : '',
-                      {
-                        'first:w-9 first:pr-0': withCheckbox,
-                      },
-                      tableClassNames.headerColumnClassName
-                    )}
-                  >
-                    <div className='flex items-center gap-1'>
-                      {flexRender(
-                        header.column.columnDef.header,
-                        header.getContext()
+                {headerGroup.headers.map((header) => {
+                  const columnRelativeDepth =
+                    header.depth - header.column.depth;
+                  if (
+                    !header.isPlaceholder &&
+                    columnRelativeDepth > 1 &&
+                    header.id === header.column.id
+                  ) {
+                    return null;
+                  }
+                  let rowSpan = 1;
+                  if (header.isPlaceholder) {
+                    const leafs = header.getLeafHeaders();
+                    rowSpan = leafs[leafs.length - 1].depth - header.depth;
+                  }
+                  return (
+                    <th
+                      key={header.id}
+                      colSpan={header.colSpan}
+                      rowSpan={rowSpan}
+                      onClick={header.column.getToggleSortingHandler()}
+                      className={cn(
+                        header.column.getCanSort()
+                          ? 'cursor-pointer select-none'
+                          : '',
+                        {
+                          'first:w-9 first:pr-0': withCheckbox,
+                        },
+                        {
+                          'border-b': header.colSpan > 1,
+                        },
+                        tableClassNames.headerColumnClassName
                      )}
+                    >
+                      <div
+                        className={cn('flex items-center gap-1 min-h-full', {
+                          'justify-center': header.colSpan > 1,
+                        })}
+                      >
+                        {flexRender(
+                          header.column.columnDef.header,
+                          header.getContext()
+                        )}

-                      {header.column.getCanSort() && (
-                        <div className='w-4 h-4 relative flex flex-col items-center'>
-                          <Icon
-                            icon='heroicons:chevron-up-16-solid'
-                            width={18}
-                            height={18}
-                            className={cn(
-                              'absolute -top-1',
-                              'transition-all ease-in-out duration-200',
-                              header.column.getIsSorted() === 'asc'
-                                ? 'text-black'
-                                : 'text-black/30'
-                            )}
-                          />
-                          <Icon
-                            icon='heroicons:chevron-down-16-solid'
-                            width={18}
-                            height={18}
-                            className={cn(
-                              'absolute -bottom-1.5',
-                              'transition-all ease-in-out duration-200',
-                              header.column.getIsSorted() === 'desc'
-                                ? 'text-black'
-                                : 'text-black/30'
-                            )}
-                          />
-                        </div>
-                      )}
-                    </div>
-                  </th>
-                ))}
+                        {header.column.getCanSort() && (
+                          <div className='w-4 h-4 relative flex flex-col items-center'>
+                            <Icon
+                              icon='heroicons:chevron-up-16-solid'
+                              width={18}
+                              height={18}
+                              className={cn(
+                                'absolute -top-1',
+                                'transition-all ease-in-out duration-200',
+                                header.column.getIsSorted() === 'asc'
+                                  ? 'text-black'
+                                  : 'text-black/30'
+                              )}
+                            />
+                            <Icon
+                              icon='heroicons:chevron-down-16-solid'
+                              width={18}
+                              height={18}
+                              className={cn(
+                                'absolute -bottom-1.5',
+                                'transition-all ease-in-out duration-200',
+                                header.column.getIsSorted() === 'desc'
+                                  ? 'text-black'
+                                  : 'text-black/30'
+                              )}
+                            />
+                          </div>
+                        )}
+                      </div>
+                    </th>
+                  );
+                })}
              </tr>
            ))}
          </thead>
@@ -290,6 +324,28 @@ const Table = <TData extends object>({
              </tr>
            ))}
          </tbody>
+          <tfoot className={cn(tableClassNames.tableFooterClassName)}>
+            {renderFooter && (
+              <tr className={cn(tableClassNames.footerRowClassName)}>
+                {table.getAllLeafColumns().map((column) => (
+                  <td
+                    key={column.id}
+                    className={cn(
+                      { 'first:w-9 first:pr-0': withCheckbox },
+                      tableClassNames.footerColumnClassName
+                    )}
+                  >
+                    {column.columnDef.footer &&
+                      flexRender(column.columnDef.footer, {
+                        column,
+                        header: column.columnDef,
+                        table,
+                      } as HeaderContext<TData, unknown>)}
+                  </td>
+                ))}
+              </tr>
+            )}
+          </tfoot>
        </table>
      </div>

@@ -0,0 +1,116 @@
+'use client';
+
+import { ReactNode, useRef, useEffect, useState } from 'react';
+import { cn } from '@/lib/helper';
+
+interface DropdownProps {
+  trigger: ReactNode;
+  children: ReactNode;
+  position?:
+    | 'top'
+    | 'bottom'
+    | 'left'
+    | 'right'
+    | 'top-start'
+    | 'top-end'
+    | 'bottom-start'
+    | 'bottom-end'
+    | 'left-start'
+    | 'left-end'
+    | 'right-start'
+    | 'right-end';
+  align?: 'start' | 'center' | 'end';
+  hover?: boolean;
+  className?: string;
+  contentClassName?: string;
+}
+
+const Dropdown = ({
+  trigger,
+  children,
+  position = 'bottom',
+  align = 'start',
+  hover = false,
+  className,
+  contentClassName,
+}: DropdownProps) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  // Handle click outside to close dropdown
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (
+        dropdownRef.current &&
+        !dropdownRef.current.contains(event.target as Node)
+      ) {
+        setIsOpen(false);
+      }
+    };
+
+    if (isOpen) {
+      document.addEventListener('mousedown', handleClickOutside);
+    }
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [isOpen]);
+
+  // Build position classes
+  const getPositionClasses = () => {
+    const classes: string[] = [];
+
+    // Handle combined positions like 'top-start'
+    if (position.includes('-')) {
+      const [pos, al] = position.split('-');
+      classes.push(`dropdown-${pos}`);
+      classes.push(`dropdown-${al}`);
+    } else {
+      classes.push(`dropdown-${position}`);
+      if (align !== 'start') {
+        classes.push(`dropdown-${align}`);
+      }
+    }
+
+    return classes.join(' ');
+  };
+
+  const handleToggle = (e: React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    // alert('clicked');
+    setIsOpen(!isOpen);
+  };
+
+  return (
+    <div
+      ref={dropdownRef}
+      className={cn(
+        'dropdown',
+        getPositionClasses(),
+        hover && 'dropdown-hover',
+        isOpen && 'dropdown-open',
+        className
+      )}
+    >
+      {/* Trigger Button */}
+      <div onClick={handleToggle} className='cursor-pointer'>
+        {trigger}
+      </div>
+
+      {/* Dropdown Content - Only render when open */}
+      {isOpen && (
+        <div
+          tabIndex={-1}
+          className={cn('dropdown-content z-[10]', contentClassName)}
+          onClick={() => setIsOpen(false)} // Close on item click
+        >
+          {children}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default Dropdown;
@@ -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;
@@ -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();
@@ -9,12 +9,29 @@ import {
 } from '@/types/api/closing';
 import { httpClient, httpClientFetcher } from '@/services/http/client';
 import { BaseApiResponse } from '@/types/api/api-general';
+import { ClosingSales } from '@/types/api/closing';

 export class ClosingApiService extends BaseApiService<Closing, null, null> {
  constructor(basePath: string) {
    super(basePath);
  }

+  async getPenjualan(
+    id: number
+  ): Promise<BaseApiResponse<ClosingSales> | undefined> {
+    try {
+      const getPenjualanPath = `${id}/penjualan`;
+      return await this.customRequest<BaseApiResponse<ClosingSales>>(
+        getPenjualanPath
+      );
+    } catch (error) {
+      if (axios.isAxiosError<BaseApiResponse<ClosingSales>>(error)) {
+        return error.response?.data;
+      }
+      return undefined;
+    }
+  }
+
  async getAllIncomingSapronakFetcher(
    endpoint: string
  ): Promise<BaseApiResponse<ClosingIncomingSapronak[]>> {
@@ -51,4 +68,4 @@ export class ClosingApiService extends BaseApiService<Closing, null, null> {
  }
 }

-export const ClosingApi = new ClosingApiService('/closing');
+export const ClosingApi = new ClosingApiService('/closings');
@@ -1,9 +1,34 @@
 import { Area } from '@/types/api/master-data/area';
 import { Fcr } from '@/types/api/master-data/fcr';
 import { Flock } from '@/types/api/master-data/flock';
-import { Kandang } from '@/types/api/master-data/kandang';
 import { Location } from '@/types/api/master-data/location';
-import { BaseApproval, BaseMetadata } from '@/types/api/api-general';
+import { Kandang } from '@/types/api/master-data/kandang';
+import { Product } from '@type/api/master-data/product';
+import { Customer } from '@type/api/master-data/customer';
+import { BaseMetadata } from '@/types/api/api-general';
+
+export type BaseSales = {
+  id: number;
+  realization_date: string;
+  age: number;
+  do_number: string;
+  product: Product;
+  customer: Customer;
+  qty: number;
+  weight: number;
+  avg_weight: number;
+  price: number;
+  total_price: number;
+  kandang: Kandang;
+  payment_status: string;
+};
+
+export type BaseClosingSales = {
+  project_type: string;
+  flock_id: number;
+  period: number;
+  sales: BaseSales[];
+};

 export type BaseClosing = {
  id: number;
@@ -53,3 +78,4 @@ export type ClosingIncomingSapronak = {
 };

 export type ClosingOutgoingSapronak = ClosingIncomingSapronak;
+export type ClosingSales = BaseMetadata & BaseClosingSales;