Merge branch 'dev/randy' into 'feat/FE/US-336/finance-report'

[FEAT/FE][US#336] Reporting Closing Finance

See merge request mbugroup/lti-web-client!100

package-lock.json

@@ -15,7 +15,7 @@
         "clsx": "^2.1.1",
         "formik": "^2.4.6",
         "moment": "^2.30.1",
-        "next": "15.5.7",
+        "next": "15.5.9",
         "react": "19.1.0",
         "react-day-picker": "^9.11.1",
         "react-dom": "19.1.0",
@@ -26,6 +26,7 @@
         "swr": "^2.3.6",
         "tailwind-merge": "^3.3.1",
         "use-debounce": "^10.0.6",
+        "xlsx": "https://cdn.sheetjs.com/xlsx-0.20.3/xlsx-0.20.3.tgz",
         "yup": "^1.7.0",
         "zustand": "^5.0.8"
       },
@@ -1082,9 +1083,9 @@
       }
     },
     "node_modules/@next/env": {
-      "version": "15.5.7",
+      "version": "15.5.9",
-      "resolved": "https://registry.npmjs.org/@next/env/-/env-15.5.7.tgz",
+      "resolved": "https://registry.npmjs.org/@next/env/-/env-15.5.9.tgz",
-      "integrity": "sha512-4h6Y2NyEkIEN7Z8YxkA27pq6zTkS09bUSYC0xjd0NpwFxjnIKeZEeH591o5WECSmjpUhLn3H2QLJcDye3Uzcvg==",
+      "integrity": "sha512-4GlTZ+EJM7WaW2HEZcyU317tIQDjkQIyENDLxYJfSWlfqguN+dHkZgyQTV/7ykvobU7yEH5gKvreNrH4B6QgIg==",
       "license": "MIT"
     },
     "node_modules/@next/eslint-plugin-next": {
@@ -5654,12 +5655,12 @@
       "license": "MIT"
     },
     "node_modules/next": {
-      "version": "15.5.7",
+      "version": "15.5.9",
-      "resolved": "https://registry.npmjs.org/next/-/next-15.5.7.tgz",
+      "resolved": "https://registry.npmjs.org/next/-/next-15.5.9.tgz",
-      "integrity": "sha512-+t2/0jIJ48kUpGKkdlhgkv+zPTEOoXyr60qXe68eB/pl3CMJaLeIGjzp5D6Oqt25hCBiBTt8wEeeAzfJvUKnPQ==",
+      "integrity": "sha512-agNLK89seZEtC5zUHwtut0+tNrc0Xw4FT/Dg+B/VLEo9pAcS9rtTKpek3V6kVcVwsB2YlqMaHdfZL4eLEVYuCg==",
       "license": "MIT",
       "dependencies": {
-        "@next/env": "15.5.7",
+        "@next/env": "15.5.9",
         "@swc/helpers": "0.5.15",
         "caniuse-lite": "^1.0.30001579",
         "postcss": "8.4.31",
@@ -7525,6 +7526,18 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/xlsx": {
+      "version": "0.20.3",
+      "resolved": "https://cdn.sheetjs.com/xlsx-0.20.3/xlsx-0.20.3.tgz",
+      "integrity": "sha512-oLDq3jw7AcLqKWH2AhCpVTZl8mf6X2YReP+Neh0SJUzV/BdZYjth94tG5toiMB1PPrYtxOCfaoUCkvtuH+3AJA==",
+      "license": "Apache-2.0",
+      "bin": {
+        "xlsx": "bin/xlsx.njs"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/yaml": {
       "version": "1.10.2",
       "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz",

package.json

@@ -18,7 +18,7 @@
     "clsx": "^2.1.1",
     "formik": "^2.4.6",
     "moment": "^2.30.1",
-    "next": "15.5.7",
+    "next": "15.5.9",
     "react": "19.1.0",
     "react-day-picker": "^9.11.1",
     "react-dom": "19.1.0",
@@ -29,6 +29,7 @@
     "swr": "^2.3.6",
     "tailwind-merge": "^3.3.1",
     "use-debounce": "^10.0.6",
+    "xlsx": "https://cdn.sheetjs.com/xlsx-0.20.3/xlsx-0.20.3.tgz",
     "yup": "^1.7.0",
     "zustand": "^5.0.8"
   },

src/app/report/expense/detail/layout.tsx

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

src/app/report/expense/detail/page.tsx

@@ -0,0 +1,5 @@
+const ReportExpenseDetail = () => {
+  return <div>ReportExpenseDetail</div>;
+};
+
+export default ReportExpenseDetail;

src/app/report/expense/page.tsx

@@ -0,0 +1,13 @@
+'use client';
+
+import ReportExpenseTable from '@/components/pages/report/expense/ReportExpenseTable';
+
+const ReportExpense = () => {
+  return (
+    <div className='w-full p-4'>
+      <ReportExpenseTable />
+    </div>
+  );
+};
+
+export default ReportExpense;

src/components/FloatingActionsButton.tsx

@@ -33,7 +33,9 @@ const FloatingActionsButton = ({
 }: FloatingActionsButtonProps) => {
   // Jika tidak ada baris yang dipilih, jangan tampilkan FAB
   const positionStyles =
-    selectedRowIds.length > 0 ? 'bottom-[10%]' : 'bottom-[-100%]';
+    selectedRowIds.length > 0
+      ? 'bottom-[10%] opacity-100'
+      : 'bottom-[-10%] opacity-0';
 
   // Helper untuk menentukan gaya warna tombol approval
   const getApprovalColor = (action: 'APPROVED' | 'REJECTED') => {

src/components/Navbar.tsx

@@ -54,7 +54,8 @@ const Navbar = ({ title, toggleSidebar }: NavbarProps) => {
 
       <div className='flex gap-2'>
         <Dropdown
-          position='bottom-end'
+          direction='bottom'
+          align='end'
           trigger={
             <div className='btn btn-ghost btn-circle avatar'>
               <div className='w-10 rounded-full border flex justify-center items-center'>
@@ -62,7 +63,9 @@ const Navbar = ({ title, toggleSidebar }: NavbarProps) => {
               </div>
             </div>
           }
-          contentClassName='w-52 mt-3'
+          className={{
+            content: 'w-52 mt-3',
+          }}
         >
           <Menu className='p-2 bg-base-100 shadow rounded-box menu-sm'>
             <MenuItem title='Logout' onClick={logoutClickHandler} />

src/components/Table.tsx

@@ -60,6 +60,12 @@ export interface TableProps<TData extends object> {
   renderFooter?: boolean;
   withCheckbox?: boolean;
   rowOptions?: number[];
+  /**
+   * Custom row renderer. Should return a complete <tr> element or null.
+   * This gives full control over the row structure including colspan.
+   * Return null to render the default row.
+   */
+  renderCustomRow?: (row: Row<TData>) => ReactNode | null;
 }
 
 const DUMMY_SKELETON_DATA = [{}, {}, {}, {}, {}];
@@ -112,6 +118,7 @@ const Table = <TData extends object>({
   renderFooter = false,
   withCheckbox = false,
   rowOptions = [10, 20, 50, 100],
+  renderCustomRow,
 }: TableProps<TData>) => {
   const isServerSideTable =
     totalItems !== undefined &&
@@ -305,24 +312,35 @@ const Table = <TData extends object>({
           </thead>
 
           <tbody className={tableClassNames.tableBodyClassName}>
-            {table.getRowModel().rows.map((row) => (
+            {table.getRowModel().rows.map((row) => {
-              <tr key={row.id} className={tableClassNames.bodyRowClassName}>
+              const customRowContent = renderCustomRow?.(row);
-                {row.getVisibleCells().map((cell) => (
-                  <td
-                    key={cell.id}
-                    className={cn(
-                      { 'first:w-9 first:pr-0': withCheckbox },
-                      tableClassNames.bodyColumnClassName
-                    )}
-                  >
-                    {!isLoading &&
-                      flexRender(cell.column.columnDef.cell, cell.getContext())}
 
-                    {isLoading && <div className='skeleton w-full h-4' />}
+              if (customRowContent) {
-                  </td>
+                return renderCustomRow?.(row);
-                ))}
+              }
-              </tr>
+
-            ))}
+              return (
+                <tr key={row.id} className={tableClassNames.bodyRowClassName}>
+                  {row.getVisibleCells().map((cell) => (
+                    <td
+                      key={cell.id}
+                      className={cn(
+                        { 'first:w-9 first:pr-0': withCheckbox },
+                        tableClassNames.bodyColumnClassName
+                      )}
+                    >
+                      {!isLoading &&
+                        flexRender(
+                          cell.column.columnDef.cell,
+                          cell.getContext()
+                        )}
+
+                      {isLoading && <div className='skeleton w-full h-4' />}
+                    </td>
+                  ))}
+                </tr>
+              );
+            })}
           </tbody>
           <tfoot className={cn(tableClassNames.tableFooterClassName)}>
             {renderFooter && (

src/components/dropdown/Dropdown.tsx

@@ -1,111 +1,109 @@
-'use client';
+import React, { ReactNode, useState, useRef } from 'react';
 
-import { ReactNode, useRef, useEffect, useState } from 'react';
 import { cn } from '@/lib/helper';
 
-interface DropdownProps {
+export interface DropdownProps {
   trigger: ReactNode;
   children: ReactNode;
-  position?:
+  className?: {
-    | 'top'
+    wrapper?: string;
-    | 'bottom'
+    trigger?: string;
-    | 'left'
+    content?: string;
-    | 'right'
+  };
-    | 'top-start'
-    | 'top-end'
-    | 'bottom-start'
-    | 'bottom-end'
-    | 'left-start'
-    | 'left-end'
-    | 'right-start'
-    | 'right-end';
   align?: 'start' | 'center' | 'end';
+  direction?: 'top' | 'bottom' | 'left' | 'right';
   hover?: boolean;
-  className?: string;
+  defaultOpen?: boolean;
-  contentClassName?: string;
+  open?: boolean;
+  close?: boolean;
+  controlled?: boolean;
 }
 
 const Dropdown = ({
   trigger,
   children,
-  position = 'bottom',
-  align = 'start',
-  hover = false,
   className,
-  contentClassName,
+  align,
+  direction,
+  hover,
+  defaultOpen = false,
+  open,
+  close,
+  controlled = false,
 }: DropdownProps) => {
-  const [isOpen, setIsOpen] = useState(false);
+  const [isOpen, setIsOpen] = useState(defaultOpen);
   const dropdownRef = useRef<HTMLDivElement>(null);
 
-  // Handle click outside to close dropdown
+  const toggleDropdown = () => {
-  useEffect(() => {
+    if (!controlled) {
-    const handleClickOutside = (event: MouseEvent) => {
+      const newState = !isOpen;
-      if (
+      setIsOpen(newState);
-        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) => {
+  const getWrapperClasses = () => {
-    e.preventDefault();
+    const openState = controlled ? open : isOpen;
-    e.stopPropagation();
+
-    // alert('clicked');
+    return cn(
-    setIsOpen(!isOpen);
+      'dropdown',
+      {
+        'dropdown-start': align === 'start',
+        'dropdown-center': align === 'center',
+        'dropdown-end': align === 'end',
+        'dropdown-top': direction === 'top',
+        'dropdown-bottom': direction === 'bottom',
+        'dropdown-left': direction === 'left',
+        'dropdown-right': direction === 'right',
+        'dropdown-hover': hover,
+        'dropdown-open': openState && !close,
+        'dropdown-close': close,
+      },
+      className?.wrapper
+    );
   };
 
+  const getTriggerClasses = () => {
+    return cn(className?.trigger);
+  };
+
+  const getContentClasses = () => {
+    return cn(
+      'dropdown-content z-[9999] shadow-sm bg-base-100 rounded-box',
+      className?.content
+    );
+  };
+
+  if (controlled) {
+    return (
+      <div className={getWrapperClasses()}>
+        {trigger}
+        {open && !close && (
+          <div tabIndex={-1} className={getContentClasses()}>
+            {children}
+          </div>
+        )}
+      </div>
+    );
+  }
+
   return (
-    <div
+    <div ref={dropdownRef} className={getWrapperClasses()}>
-      ref={dropdownRef}
+      <div
-      className={cn(
+        tabIndex={0}
-        'dropdown',
+        role='button'
-        getPositionClasses(),
+        className={getTriggerClasses()}
-        hover && 'dropdown-hover',
+        onClick={toggleDropdown}
-        isOpen && 'dropdown-open',
+        onKeyDown={(e) => {
-        className
+          if (e.key === 'Enter' || e.key === ' ') {
-      )}
+            e.preventDefault();
-    >
+            toggleDropdown();
-      {/* Trigger Button */}
+          }
-      <div onClick={handleToggle} className='cursor-pointer'>
+        }}
+      >
         {trigger}
       </div>
-
+      {!close && (
-      {/* Dropdown Content - Only render when open */}
+        <div tabIndex={-1} className={getContentClasses()}>
-      {isOpen && (
-        <div
-          tabIndex={-1}
-          className={cn('dropdown-content z-[10]', contentClassName)}
-          onClick={() => setIsOpen(false)} // Close on item click
-        >
           {children}
         </div>
       )}

src/components/input/DebouncedTextInput.tsx

@@ -24,6 +24,11 @@ const DebouncedTextInput = (props: DebouncedTextInputProps) => {
     setInternalChangeEvent(e);
   };
 
+  // Sync internal value with external value prop changes (e.g., from reset)
+  useEffect(() => {
+    setInternalValue(props.value);
+  }, [props.value]);
+
   useEffect(() => {
     if (debouncedChangeEvent) {
       onChange?.(debouncedChangeEvent);

src/components/pages/closing/ClosingDetail.tsx

@@ -15,6 +15,7 @@ import ClosingSapronakTabContent from './ClosingSapronakTabContent';
 import ClosingSapronakCalculationTabContent from '@/components/pages/closing/ClosingSapronakCalculationTabContent';
 import ClosingOverheadTabContent from '@/components/pages/closing/ClosingOverheadTabContent';
 import SalesReportTable from './sale/SalesReportTable';
+import ClosingFinanceTabContent from '@/components/pages/closing/ClosingFinanceTabContent';
 
 interface ClosingDetailProps {
   id: number;
@@ -64,7 +65,7 @@ const ClosingDetail: React.FC<ClosingDetailProps> = ({
       {
         id: 'keuangan',
         label: 'Keuangan',
-        content: 'Keuangan',
+        content: <ClosingFinanceTabContent projectFlockId={id} />,
       },
     ];
 

src/components/pages/closing/ClosingFinanceTabContent.tsx

@@ -0,0 +1,17 @@
+import ClosingFinanceTable from '@/components/pages/closing/ClosingFinanceTable';
+
+const ClosingFinanceTabContent = ({
+  projectFlockId,
+}: {
+  projectFlockId: number;
+}) => {
+  return (
+    <div className='flex flex-col gap-4'>
+      {projectFlockId && (
+        <ClosingFinanceTable projectFlockId={projectFlockId} />
+      )}
+    </div>
+  );
+};
+
+export default ClosingFinanceTabContent;

src/components/pages/closing/ClosingFinanceTable.tsx

@@ -0,0 +1,507 @@
+import Card from '@/components/Card';
+import Table, { TABLE_DEFAULT_STYLING } from '@/components/Table';
+import { isResponseSuccess } from '@/lib/api-helper';
+import { formatCurrency, formatTitleCase } from '@/lib/helper';
+import { ClosingApi } from '@/services/api/closing';
+import {
+  DataSummarySubTotal,
+  HppPurchaseData,
+  ProfitLossDataAmount,
+} from '@/types/api/closing';
+import useSWR from 'swr';
+
+type HppTableRow =
+  | (HppPurchaseData & {
+      group_name: string;
+      group_index: number;
+      isGroupHeader?: boolean;
+    })
+  | {
+      group_name: string;
+      group_index: number;
+      isGroupHeader: true;
+      type?: never;
+      budgeting?: never;
+      realization?: never;
+    };
+
+type ProfitLossTableRow =
+  | (DataSummarySubTotal & {
+      type: string;
+      group_name: string;
+      group_index: number;
+      isGroupHeader?: boolean;
+    })
+  | {
+      group_name: string;
+      group_index: number;
+      isGroupHeader: true;
+      type?: never;
+      rp_per_bird?: never;
+      rp_per_kg?: never;
+      amount?: never;
+    };
+
+const ClosingFinanceTable = ({
+  projectFlockId,
+}: {
+  projectFlockId: number;
+}) => {
+  const { data: finance, isLoading } = useSWR(
+    `/closing/finance/${projectFlockId}`,
+    () => ClosingApi.getFinance(projectFlockId)
+  );
+
+  const hppTableData: HppTableRow[] = isResponseSuccess(finance)
+    ? finance.data.hpp_purchases.hpp.flatMap((hpp, groupIndex) => [
+        // Group header row
+        {
+          group_name: hpp.group_name,
+          group_index: groupIndex,
+          isGroupHeader: true as const,
+        },
+        // Data rows
+        ...hpp.data.map((item) => ({
+          group_name: hpp.group_name,
+          group_index: groupIndex,
+          type: item.type,
+          budgeting: item.budgeting,
+          realization: item.realization,
+          isGroupHeader: false as const,
+        })),
+      ])
+    : [];
+
+  const profitLossTableData: ProfitLossTableRow[] = isResponseSuccess(finance)
+    ? [
+        // Penjualan group
+        {
+          label: 'Penjualan',
+          group_name: 'Penjualan',
+          group_index: 0,
+          isGroupHeader: true as const,
+        },
+        ...finance.data.profit_loss.data.penjualan.map((item) => ({
+          label: 'Penjualan',
+          group_name: 'Penjualan',
+          group_index: 0,
+          type: item.type,
+          rp_per_bird: item.rp_per_bird,
+          rp_per_kg: item.rp_per_kg,
+          amount: item.amount,
+          isGroupHeader: false as const,
+        })),
+        {
+          label: finance.data.profit_loss.data.summary.gross_profit.label,
+          group_name: 'Penjualan',
+          group_index: 0,
+          isGroupHeader: true as const,
+          type: finance.data.profit_loss.data.summary.gross_profit.label,
+          rp_per_bird:
+            finance.data.profit_loss.data.summary.gross_profit.rp_per_bird,
+          rp_per_kg:
+            finance.data.profit_loss.data.summary.gross_profit.rp_per_kg,
+          amount: finance.data.profit_loss.data.summary.gross_profit.amount,
+        },
+        // Pembelian group
+        {
+          label: 'Pembelian',
+          group_name: 'Pembelian',
+          group_index: 1,
+          isGroupHeader: true as const,
+        },
+        ...finance.data.profit_loss.data.pembelian.map((item) => ({
+          label: 'Pembelian',
+          group_name: 'Pembelian',
+          group_index: 1,
+          type: item.type,
+          rp_per_bird: item.rp_per_bird,
+          rp_per_kg: item.rp_per_kg,
+          amount: item.amount,
+          isGroupHeader: false as const,
+        })),
+        {
+          label: finance.data.profit_loss.data.summary.sub_total.label,
+          group_name: 'Pembelian',
+          group_index: 1,
+          isGroupHeader: true as const,
+          type: finance.data.profit_loss.data.summary.sub_total.label,
+          rp_per_bird:
+            finance.data.profit_loss.data.summary.sub_total.rp_per_bird,
+          rp_per_kg: finance.data.profit_loss.data.summary.sub_total.rp_per_kg,
+          amount: finance.data.profit_loss.data.summary.sub_total.amount,
+        },
+      ]
+    : [];
+
+  return (
+    <div className='flex flex-col gap-4'>
+      <>
+        <Card
+          variant='bordered'
+          className={{
+            wrapper: 'w-full',
+          }}
+        >
+          <div className='grid grid-cols-2 gap-6'>
+            <div className='flex flex-col gap-1'>
+              <div>
+                {isResponseSuccess(finance)
+                  ? formatTitleCase(
+                      finance.data.profit_loss.data.summary.gross_profit
+                        .label || '-'
+                    )
+                  : 'Laba Rugi Brutto'}
+              </div>
+              <div className='text-lg font-bold'>
+                {isResponseSuccess(finance)
+                  ? formatCurrency(
+                      finance.data.profit_loss.data.summary.gross_profit.amount
+                    )
+                  : '-'}
+              </div>
+            </div>
+            <div className='flex flex-col gap-1'>
+              <div>
+                {isResponseSuccess(finance)
+                  ? formatTitleCase(
+                      finance.data.profit_loss.data.summary.net_profit.label ||
+                        '-'
+                    )
+                  : 'Laba Rugi Netto'}
+              </div>
+              <div className='text-lg font-bold'>
+                {isResponseSuccess(finance)
+                  ? formatCurrency(
+                      finance.data.profit_loss.data.summary.net_profit.amount
+                    )
+                  : '-'}
+              </div>
+            </div>
+          </div>
+        </Card>
+        <Card
+          title={
+            isResponseSuccess(finance)
+              ? finance.data.hpp_purchases.title
+              : 'HPP Purchases'
+          }
+          variant='bordered'
+          collapsible
+          className={{
+            wrapper: 'w-full',
+          }}
+        >
+          <div className='mt-6 p-0 mb-0'>
+            <Table<HppTableRow>
+              data={hppTableData}
+              columns={[
+                {
+                  header: 'No.',
+                  enableSorting: false,
+                  accessorFn: (item, index) => {
+                    if (item.isGroupHeader) return '-';
+                    const dataRowsBefore = hppTableData
+                      .slice(0, index)
+                      .filter((row) => !row.isGroupHeader).length;
+                    return dataRowsBefore + 1;
+                  },
+                  footer: (props) => {
+                    return 'HPP';
+                  },
+                },
+                {
+                  header: 'Type',
+                  enableSorting: false,
+                  accessorFn: (item) => formatTitleCase(item.type || '-'),
+                },
+                {
+                  header: 'Budgeting',
+                  enableSorting: false,
+                  columns: [
+                    {
+                      header: 'Rp/Ekor',
+                      id: 'budgeting_rp_per_bird',
+                      enableSorting: false,
+                      accessorFn: (item) =>
+                        formatCurrency(item.budgeting?.rp_per_bird || 0),
+                      footer: (props) => {
+                        return props.column.id === 'budgeting_rp_per_bird' &&
+                          isResponseSuccess(finance)
+                          ? formatCurrency(
+                              finance.data.hpp_purchases.summary_hpp.budgeting
+                                .rp_per_bird || 0
+                            )
+                          : '-';
+                      },
+                    },
+                    {
+                      header: 'Rp/Kg',
+                      id: 'budgeting_rp_per_kg',
+                      enableSorting: false,
+                      accessorFn: (item) =>
+                        formatCurrency(item.budgeting?.rp_per_kg || 0),
+                      footer: (props) => {
+                        return props.column.id === 'budgeting_rp_per_kg' &&
+                          isResponseSuccess(finance)
+                          ? formatCurrency(
+                              finance.data.hpp_purchases.summary_hpp.budgeting
+                                .rp_per_kg || 0
+                            )
+                          : '-';
+                      },
+                    },
+                    {
+                      header: 'Jumlah (Rp)',
+                      id: 'budgeting_amount',
+                      enableSorting: false,
+                      accessorFn: (item) =>
+                        formatCurrency(item.budgeting?.amount || 0),
+                      footer: (props) => {
+                        return props.column.id === 'budgeting_amount' &&
+                          isResponseSuccess(finance)
+                          ? formatCurrency(
+                              finance.data.hpp_purchases.summary_hpp.budgeting
+                                .amount || 0
+                            )
+                          : '-';
+                      },
+                    },
+                  ],
+                },
+                {
+                  header: 'Realization',
+                  enableSorting: false,
+                  columns: [
+                    {
+                      header: 'Rp/Ekor',
+                      id: 'realization_rp_per_bird',
+                      enableSorting: false,
+                      accessorFn: (item) =>
+                        formatCurrency(item.realization?.rp_per_bird || 0),
+                      footer: (props) => {
+                        return props.column.id === 'realization_rp_per_bird' &&
+                          isResponseSuccess(finance)
+                          ? formatCurrency(
+                              finance.data.hpp_purchases.summary_hpp.realization
+                                .rp_per_bird || 0
+                            )
+                          : '-';
+                      },
+                    },
+                    {
+                      header: 'Rp/Kg',
+                      id: 'realization_rp_per_kg',
+                      enableSorting: false,
+                      accessorFn: (item) =>
+                        formatCurrency(item.realization?.rp_per_kg || 0),
+                      footer: (props) => {
+                        return props.column.id === 'realization_rp_per_kg' &&
+                          isResponseSuccess(finance)
+                          ? formatCurrency(
+                              finance.data.hpp_purchases.summary_hpp.realization
+                                .rp_per_kg || 0
+                            )
+                          : '-';
+                      },
+                    },
+                    {
+                      header: 'Jumlah (Rp)',
+                      id: 'realization_amount',
+                      enableSorting: false,
+                      accessorFn: (item) =>
+                        formatCurrency(item.realization?.amount || 0),
+                      footer: (props) => {
+                        return props.column.id === 'realization_amount' &&
+                          isResponseSuccess(finance)
+                          ? formatCurrency(
+                              finance.data.hpp_purchases.summary_hpp.realization
+                                .amount || 0
+                            )
+                          : '-';
+                      },
+                    },
+                  ],
+                },
+              ]}
+              renderCustomRow={(row) => {
+                const rowData = row.original;
+                if (rowData.isGroupHeader) {
+                  return (
+                    <tr
+                      key={row.id}
+                      className={TABLE_DEFAULT_STYLING.bodyRowClassName}
+                    >
+                      <td
+                        className={TABLE_DEFAULT_STYLING.bodyColumnClassName}
+                      ></td>
+                      <td
+                        colSpan={7}
+                        className={TABLE_DEFAULT_STYLING.bodyColumnClassName}
+                      >
+                        <div className='font-bold'>
+                          {formatTitleCase(rowData.group_name ?? '-')}
+                        </div>
+                      </td>
+                    </tr>
+                  );
+                }
+                return null;
+              }}
+              renderFooter={isResponseSuccess(finance)}
+            />
+          </div>
+        </Card>
+        <Card
+          title={
+            isResponseSuccess(finance)
+              ? finance.data.profit_loss.title
+              : 'Profit/Loss'
+          }
+          variant='bordered'
+          collapsible
+          className={{
+            wrapper: 'w-full',
+          }}
+        >
+          <div className='mt-6 p-0 mb-0'>
+            <Table<ProfitLossTableRow>
+              data={profitLossTableData}
+              columns={[
+                {
+                  header: 'Type',
+                  enableSorting: false,
+                  accessorFn: (item) => item.type,
+                  cell: (item) => (
+                    <div className='ps-6'>
+                      {formatTitleCase(item.row.original.type || '-')}
+                    </div>
+                  ),
+                  footer: (item) => (
+                    <div className='font-bold'>
+                      {isResponseSuccess(finance)
+                        ? formatTitleCase(
+                            finance.data.profit_loss.data.summary.net_profit
+                              .label || '-'
+                          )
+                        : '-'}
+                    </div>
+                  ),
+                },
+                {
+                  header: 'Rp/Ekor',
+                  enableSorting: false,
+                  accessorFn: (item) => formatCurrency(item.rp_per_bird || 0),
+                  footer: (item) => (
+                    <div className='font-bold'>
+                      {isResponseSuccess(finance)
+                        ? formatCurrency(
+                            finance.data.profit_loss.data.summary.net_profit
+                              .rp_per_bird || 0
+                          )
+                        : formatCurrency(0)}
+                    </div>
+                  ),
+                },
+                {
+                  header: 'Rp/Kg',
+                  enableSorting: false,
+                  accessorFn: (item) => formatCurrency(item.rp_per_kg || 0),
+                  footer: (item) => (
+                    <div className='font-bold'>
+                      {isResponseSuccess(finance)
+                        ? formatCurrency(
+                            finance.data.profit_loss.data.summary.net_profit
+                              .rp_per_kg || 0
+                          )
+                        : formatCurrency(0)}
+                    </div>
+                  ),
+                },
+                {
+                  header: 'Jumlah (Rp)',
+                  enableSorting: false,
+                  accessorFn: (item) => formatCurrency(item.amount || 0),
+                  footer: (item) => (
+                    <div className='font-bold'>
+                      {isResponseSuccess(finance)
+                        ? formatCurrency(
+                            finance.data.profit_loss.data.summary.net_profit
+                              .amount || 0
+                          )
+                        : formatCurrency(0)}
+                    </div>
+                  ),
+                },
+              ]}
+              renderCustomRow={(row) => {
+                const rowData = row.original;
+                if (rowData.isGroupHeader) {
+                  if (rowData.amount) {
+                    return (
+                      <tr
+                        key={row.id}
+                        className={TABLE_DEFAULT_STYLING.footerRowClassName}
+                      >
+                        <td
+                          className={TABLE_DEFAULT_STYLING.bodyColumnClassName}
+                        >
+                          <div className='font-bold'>
+                            {formatTitleCase(rowData.label ?? '-')}
+                          </div>
+                        </td>
+                        <td
+                          className={TABLE_DEFAULT_STYLING.bodyColumnClassName}
+                        >
+                          <div className='font-bold'>
+                            {formatCurrency(rowData.rp_per_bird ?? 0)}
+                          </div>
+                        </td>
+                        <td
+                          className={TABLE_DEFAULT_STYLING.bodyColumnClassName}
+                        >
+                          <div className='font-bold'>
+                            {formatCurrency(rowData.rp_per_kg ?? 0)}
+                          </div>
+                        </td>
+                        <td
+                          className={TABLE_DEFAULT_STYLING.bodyColumnClassName}
+                        >
+                          <div className='font-bold'>
+                            {formatCurrency(rowData.amount ?? 0)}
+                          </div>
+                        </td>
+                      </tr>
+                    );
+                  }
+                  return (
+                    <tr
+                      key={row.id}
+                      className={TABLE_DEFAULT_STYLING.bodyRowClassName}
+                    >
+                      <td
+                        colSpan={4}
+                        className={TABLE_DEFAULT_STYLING.bodyColumnClassName}
+                      >
+                        <div className='font-bold'>
+                          {formatTitleCase(rowData.group_name ?? '-')}
+                        </div>
+                      </td>
+                    </tr>
+                  );
+                }
+                return null;
+              }}
+              className={{
+                paginationClassName: 'hidden',
+              }}
+              renderFooter={isResponseSuccess(finance)}
+            />
+          </div>
+        </Card>
+      </>
+    </div>
+  );
+};
+
+export default ClosingFinanceTable;

src/components/pages/closing/ClosingSapronakCalculationTable.tsx

@@ -154,66 +154,74 @@ const ClosingSapronakCalculationTable = ({
 
   return (
     <div className='flex flex-col gap-4'>
-      {isResponseSuccess(sapronakCalculation) && (
+      <Card
-        <>
+        title='DOC Broiler'
-          <Card
+        collapsible
-            title='DOC Broiler'
+        defaultCollapsed={false}
-            collapsible
+        className={{
-            defaultCollapsed={false}
+          wrapper: 'w-full',
-            className={{
+          body: 'p-4 shadow',
-              wrapper: 'w-full',
+        }}
-              body: 'p-4 shadow',
+      >
-            }}
+        <Table<RowSapronakCalculation>
-          >
+          data={
-            <Table<RowSapronakCalculation>
+            isResponseSuccess(sapronakCalculation)
-              data={sapronakCalculation.data?.doc_broiler.rows ?? []}
+              ? (sapronakCalculation.data?.doc_broiler.rows ?? [])
-              columns={docBroilerColumns}
+              : []
-              className={{
+          }
-                containerClassName: 'my-4',
+          columns={docBroilerColumns}
-              }}
+          className={{
-              renderFooter
+            containerClassName: 'my-4',
-            />
+          }}
-          </Card>
+          renderFooter={isResponseSuccess(sapronakCalculation)}
+        />
+      </Card>
 
-          <Card
+      <Card
-            title='OVK'
+        title='OVK'
-            variant='bordered'
+        variant='bordered'
-            collapsible
+        collapsible
-            defaultCollapsed={true}
+        defaultCollapsed={true}
-            className={{
+        className={{
-              wrapper: 'w-full',
+          wrapper: 'w-full',
-            }}
+        }}
-          >
+      >
-            <Table<RowSapronakCalculation>
+        <Table<RowSapronakCalculation>
-              data={sapronakCalculation.data?.ovk.rows ?? []}
+          data={
-              columns={ovkColumns}
+            isResponseSuccess(sapronakCalculation)
-              className={{
+              ? (sapronakCalculation.data?.ovk.rows ?? [])
-                containerClassName: 'my-4',
+              : []
-              }}
+          }
-              renderFooter
+          columns={ovkColumns}
-            />
+          className={{
-          </Card>
+            containerClassName: 'my-4',
+          }}
+          renderFooter={isResponseSuccess(sapronakCalculation)}
+        />
+      </Card>
 
-          <Card
+      <Card
-            title='Pakan'
+        title='Pakan'
-            variant='bordered'
+        variant='bordered'
-            collapsible
+        collapsible
-            defaultCollapsed={true}
+        defaultCollapsed={true}
-            className={{
+        className={{
-              wrapper: 'w-full',
+          wrapper: 'w-full',
-            }}
+        }}
-          >
+      >
-            <Table<RowSapronakCalculation>
+        <Table<RowSapronakCalculation>
-              data={sapronakCalculation.data?.pakan.rows ?? []}
+          data={
-              columns={pakanColumns}
+            isResponseSuccess(sapronakCalculation)
-              className={{
+              ? (sapronakCalculation.data?.pakan.rows ?? [])
-                containerClassName: 'my-4',
+              : []
-              }}
+          }
-              renderFooter
+          columns={pakanColumns}
-            />
+          className={{
-          </Card>
+            containerClassName: 'my-4',
-        </>
+          }}
-      )}
+          renderFooter={isResponseSuccess(sapronakCalculation)}
+        />
+      </Card>
     </div>
   );
 };

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

@@ -1,5 +1,6 @@
 'use client';
 
+import Badge from '@/components/Badge';
 import Button from '@/components/Button';
 import SelectInput, { OptionType } from '@/components/input/SelectInput';
 import Table from '@/components/Table';
@@ -77,46 +78,39 @@ const InventoryAdjustmentTable = () => {
           year: 'numeric',
         }),
     },
-    {
+    // {
-      id: 'before_quantity',
+    //   id: 'before_quantity',
-      header: 'Stok Sebelum',
+    //   header: 'Stok Sebelum',
-      accessorFn: (row) => formatNumber(String(row.before_quantity)),
+    //   accessorFn: (row) =>
-    },
+    //     formatNumber(String(row.product_warehouse?.quantity)),
-    {
+    // },
-      id: 'after_quantity',
+    // {
-      header: 'Stok Sesudah',
+    //   id: 'after_quantity',
-      accessorFn: (row) => formatNumber(String(row.after_quantity)),
+    //   header: 'Stok Sesudah',
-    },
+    //   accessorFn: (row) =>
+    //     formatNumber(String(row.product_warehouse?.quantity)),
+    // },
     {
       id: 'quantity',
       header: 'Kuantitas',
-      accessorFn: (row) => formatNumber(String(row.quantity)),
+      accessorFn: (row) => formatNumber(String(row.increase + row.decrease)),
     },
     {
       id: 'transaction_type',
       header: 'Tipe Transaksi',
       accessorFn: (row) => {
-        if (row.transaction_type === 'INCREASE') return 'Peningkatan';
+        if (row.increase > 0) return 'Peningkatan';
-        if (row.transaction_type === 'DECREASE') return 'Penurunan';
+        if (row.decrease > 0) return 'Penurunan';
         return '-';
       },
       cell: (props) => {
-        const type = props.row.original.transaction_type;
+        const type = props.row.original.increase;
-        const label =
+        const label = type > 0 ? 'Peningkatan' : type <= 0 ? 'Penurunan' : '-';
-          type === 'INCREASE'
-            ? 'Peningkatan'
-            : type === 'DECREASE'
-              ? 'Penurunan'
-              : '-';
 
         return (
-          <div
+          <Badge variant='soft' color={type > 0 ? 'success' : 'error'}>
-            className={`small mx-auto badge badge-soft ${
-              type === 'INCREASE' ? 'badge-success' : 'badge-error'
-            }`}
-          >
             {label}
-          </div>
+          </Badge>
         );
       },
     },

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

@@ -76,7 +76,7 @@ const InventoryAdjustmentForm = ({
       product_category: undefined,
       product: undefined,
       warehouse: undefined,
-      quantity: initialValues?.quantity ?? 0,
+      quantity: initialValues?.increase ?? initialValues?.decrease ?? 0,
       transaction_type: undefined,
       note: initialValues?.note ?? '',
     };
@@ -214,16 +214,8 @@ const InventoryAdjustmentForm = ({
         'quantity',
         initialValues.product_warehouse.quantity
       );
-      formik.setFieldValue(
-        'transaction_type',
-        initialValues.transaction_type.toLowerCase()
-      );
       formik.setFieldValue('note', initialValues.note);
     }
-    if (initialValues?.transaction_type) {
-      const type = initialValues.transaction_type.toLowerCase();
-      setQuantityLabel(type === 'increase' ? 'Tambah Stok' : 'Kurangi Stok');
-    }
   }, [
     formik,
     initialValues,
@@ -278,26 +270,6 @@ const InventoryAdjustmentForm = ({
           className='w-full mt-8 flex flex-col gap-6'
         >
           <div className='flex flex-col gap-4'>
-            {/* Text Input Before Quantity */}
-            {type === 'detail' && initialValues && (
-              <>
-                <TextInput
-                  label='Stok Sebelum'
-                  name='before_quantity'
-                  type='text'
-                  value={formatNumber(String(initialValues.before_quantity))}
-                  readOnly={true}
-                />
-                <TextInput
-                  label='Stok Setelah'
-                  name='after_quantity'
-                  type='text'
-                  readOnly={true}
-                  value={formatNumber(String(initialValues.after_quantity))}
-                />
-              </>
-            )}
-
             {/* Select Input Product Category */}
             <SelectInput
               required

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

@@ -13,8 +13,12 @@ const InventoryProductDetail = ({
 }) => {
   const stockLogs = useMemo(() => {
     return (
-      inventoryProduct?.product_warehouses?.flatMap(
+      inventoryProduct?.product_warehouses?.flatMap((warehouse) =>
-        (warehouse) => warehouse.stock_logs || []
+        warehouse.stock_logs.map((log) => ({
+          ...log,
+          warehouse_name: warehouse.warehouse_name,
+          warehouse_id: warehouse.warehouse_id,
+        }))
       ) || []
     );
   }, [inventoryProduct]);

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

@@ -3,7 +3,11 @@ import Table from '@/components/Table';
 import { formatDate, formatNumber, formatTitleCase } from '@/lib/helper';
 import { StockLog } from '@/types/api/inventory/product';
 
-const StockLogTable = ({ stockLogs }: { stockLogs: StockLog[] }) => {
+const StockLogTable = ({
+  stockLogs,
+}: {
+  stockLogs: (StockLog & { warehouse_name: string; warehouse_id: number })[];
+}) => {
   return (
     <Card
       title='Informasi Stock Produk'
@@ -27,6 +31,10 @@ const StockLogTable = ({ stockLogs }: { stockLogs: StockLog[] }) => {
               return formatDate(props.row.original.created_at, 'DD-MMM-yyyy');
             },
           },
+          {
+            header: 'Gudang',
+            accessorKey: 'warehouse_name',
+          },
           {
             header: 'Peningkatan',
             accessorKey: 'increase',

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

@@ -21,6 +21,7 @@ import { useMemo, useState } from 'react';
 import toast from 'react-hot-toast';
 import { useRouter } from 'next/navigation';
 import { ProductWarehouse } from '@/types/api/inventory/product-warehouse';
+import { ApprovalApi } from '@/services/api/approval';
 
 const ProjectFlockClosingForm = ({
   projectFlock,
@@ -31,7 +32,7 @@ const ProjectFlockClosingForm = ({
 }) => {
   const router = useRouter();
   const closeModal = useModal();
-  const isCanClose = projectFlock.approval?.step_number <= 2;
+
   const [isClosingLoading, setIsClosingLoading] = useState(false);
 
   const { data: closingData, isLoading } = useSWR(
@@ -39,19 +40,35 @@ const ProjectFlockClosingForm = ({
     () => ProjectFlockKandangApi.checkClosing(projectFlockKandang.id)
   );
 
+  const { data: projectFlockKandangApprovals } = useSWR(
+    `${ApprovalApi.basePath}?module_name=PROJECT_FLOCK_KANDANGS&module_id=${projectFlockKandang.id}`,
+    () =>
+      ApprovalApi.getAllFetcher(
+        `${ApprovalApi.basePath}?module_name=PROJECT_FLOCK_KANDANGS&module_id=${projectFlockKandang.id}`
+      )
+  );
+
+  const isCanClose = useMemo(() => {
+    return isResponseSuccess(projectFlockKandangApprovals)
+      ? projectFlockKandangApprovals?.data?.[0]?.step_number <= 2
+      : true;
+  }, [projectFlockKandangApprovals]);
+
   const confirmationModalCloseClickHandler = async () => {
     setIsClosingLoading(true);
     const deleteProjectFlockRes = await ProjectFlockKandangApi.closing(
       projectFlockKandang?.id as number,
       {
-        closed_date: formatDate(new Date(), 'YYYY-MM-DD'),
+        closed_date: isCanClose ? formatDate(new Date(), 'YYYY-MM-DD') : '',
         action: isCanClose ? 'close' : 'unclose',
       }
     );
 
     if (isResponseSuccess(deleteProjectFlockRes)) {
       toast.success(deleteProjectFlockRes?.message as string);
-      router.push(`/production/project-flock`);
+      router.push(
+        `/production/project-flock/detail?projectFlockId=${projectFlock.id}`
+      );
     }
     if (isResponseError(deleteProjectFlockRes)) {
       toast.error(deleteProjectFlockRes?.message as string);

src/components/pages/report/expense/ReportExpenseTable.tsx

@@ -0,0 +1,867 @@
+import { useState, useMemo, useCallback } from 'react';
+import { ChangeEventHandler } from 'react';
+import useSWR from 'swr';
+import Button from '@/components/Button';
+import Card from '@/components/Card';
+import DateInput from '@/components/input/DateInput';
+import DebouncedTextInput from '@/components/input/DebouncedTextInput';
+import SelectInput, {
+  OptionType,
+  useSelect,
+} from '@/components/input/SelectInput';
+import ExpenseStatusBadge from '@/components/pages/expense/ExpenseStatusBadge';
+import RealizationStatusBadge from '@/components/pages/expense/RealizationStatusBadge';
+import Table, { TABLE_DEFAULT_STYLING } from '@/components/Table';
+import { cn, formatCurrency, formatDate } from '@/lib/helper';
+import { ReportExpense } from '@/types/api/report/report-expense';
+import { Icon } from '@iconify/react';
+import { ColumnDef } from '@tanstack/react-table';
+import { ReportExpenseApi } from '@/services/api/report';
+import { isResponseSuccess } from '@/lib/api-helper';
+import { useTableFilter } from '@/services/hooks/useTableFilter';
+import Pagination from '@/components/Pagination';
+import Dropdown from '@/components/dropdown/Dropdown';
+import Menu from '@/components/menu/Menu';
+import MenuItem from '@/components/menu/MenuItem';
+import * as XLSX from 'xlsx';
+import { generateReportExpensePDF } from './pdf/ReportExpenseExport';
+import toast from 'react-hot-toast';
+
+const ReportExpenseTable = () => {
+  // ===== STATE MANAGEMENT =====
+  const [isPdfExportLoading, setIsPdfExportLoading] = useState(false);
+  const [isExcelExportLoading, setIsExcelExportLoading] = useState(false);
+  const [dropdownOpen, setDropdownOpen] = useState(false);
+  const [pdfProgress, setPdfProgress] = useState(0);
+  const [excelProgress, setExcelProgress] = useState(0);
+  const isAnyExportLoading = isPdfExportLoading || isExcelExportLoading;
+
+  // ===== SUBMISSION STATE =====
+  const [isSubmitted, setIsSubmitted] = useState(false);
+
+  // ===== TABLE FILTER STATE =====
+  const {
+    state: filterState,
+    updateFilter,
+    setPage,
+    setPageSize,
+    reset: resetFilterState,
+    toQueryString,
+  } = useTableFilter({
+    initial: {
+      location_id: '',
+      supplier_id: '',
+      kandang_id: '',
+      nonstock_id: '',
+      realization_date: '',
+      category: '',
+      search: '',
+    },
+    paramMap: {
+      page: 'page',
+      pageSize: 'limit',
+    },
+  });
+
+  // ===== SELECT OPTIONS =====
+  const { options: optionsLocation, isLoadingOptions: isLoadingLocation } =
+    useSelect(`/master-data/locations`, 'id', 'name');
+  const { options: optionsSupplier, isLoadingOptions: isLoadingSupplier } =
+    useSelect(`/master-data/suppliers`, 'id', 'name');
+  const { options: optionsKandang, isLoadingOptions: isLoadingKandang } =
+    useSelect(`/master-data/kandangs`, 'id', 'name', '', {
+      location_id: filterState.location_id,
+    });
+  const { options: optionsNonstock, isLoadingOptions: isLoadingNonstock } =
+    useSelect(`/master-data/nonstocks`, 'id', 'name');
+
+  const categoryOptions = useMemo(
+    () => [
+      { value: 'BOP', label: 'BOP' },
+      { value: 'NON-BOP', label: 'Non BOP' },
+    ],
+    []
+  );
+
+  // Mendapatkan value option select dari filter state
+  const selectedLocation = useMemo(
+    () =>
+      optionsLocation.find(
+        (opt) => String(opt.value) === filterState.location_id
+      ) || null,
+    [optionsLocation, filterState.location_id]
+  );
+  const selectedSupplier = useMemo(
+    () =>
+      optionsSupplier.find(
+        (opt) => String(opt.value) === filterState.supplier_id
+      ) || null,
+    [optionsSupplier, filterState.supplier_id]
+  );
+  const selectedKandang = useMemo(
+    () =>
+      optionsKandang.find(
+        (opt) => String(opt.value) === filterState.kandang_id
+      ) || null,
+    [optionsKandang, filterState.kandang_id]
+  );
+  const selectedNonstock = useMemo(
+    () =>
+      optionsNonstock.find(
+        (opt) => String(opt.value) === filterState.nonstock_id
+      ) || null,
+    [optionsNonstock, filterState.nonstock_id]
+  );
+  const selectedCategory = useMemo(
+    () =>
+      categoryOptions.find((opt) => opt.value === filterState.category) || null,
+    [categoryOptions, filterState.category]
+  );
+
+  // ===== FILTER CHANGE HANDLERS =====
+  const locationChangeHandler = useCallback(
+    (val: OptionType | OptionType[] | null) => {
+      const option = val as OptionType;
+      updateFilter('location_id', option ? String(option.value) : '');
+      updateFilter('kandang_id', '');
+      setIsSubmitted(false);
+    },
+    [updateFilter]
+  );
+
+  const kandangChangeHandler = useCallback(
+    (val: OptionType | OptionType[] | null) => {
+      const option = val as OptionType;
+      updateFilter('kandang_id', option ? String(option.value) : '');
+      setIsSubmitted(false);
+    },
+    [updateFilter]
+  );
+
+  const supplierChangeHandler = useCallback(
+    (val: OptionType | OptionType[] | null) => {
+      const option = val as OptionType;
+      updateFilter('supplier_id', option ? String(option.value) : '');
+      setIsSubmitted(false);
+    },
+    [updateFilter]
+  );
+
+  const nonstockChangeHandler = useCallback(
+    (val: OptionType | OptionType[] | null) => {
+      const option = val as OptionType;
+      updateFilter('nonstock_id', option ? String(option.value) : '');
+      setIsSubmitted(false);
+    },
+    [updateFilter]
+  );
+
+  const categoryChangeHandler = useCallback(
+    (val: OptionType | OptionType[] | null) => {
+      const option = val as OptionType;
+      updateFilter('category', option ? String(option.value) : '');
+      setIsSubmitted(false);
+    },
+    [updateFilter]
+  );
+
+  const realizationDateChangeHandler = useCallback<
+    ChangeEventHandler<HTMLInputElement>
+  >(
+    (e) => {
+      updateFilter('realization_date', e.target.value || '');
+      setIsSubmitted(false);
+    },
+    [updateFilter]
+  );
+
+  const searchChangeHandler = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      updateFilter('search', e.target.value);
+      setIsSubmitted(false);
+    },
+    [updateFilter]
+  );
+
+  // ===== RESET FILTERS =====
+  const resetFilters = useCallback(() => {
+    resetFilterState();
+    setIsSubmitted(false);
+  }, [resetFilterState]);
+
+  // ===== SUBMIT HANDLER =====
+  const handleSubmit = useCallback(() => {
+    setIsSubmitted(true);
+    setPage(1);
+  }, [setPage]);
+
+  // ===== DATA FETCHING FOR TABLE =====
+  const { data: reportExpenseResponse, isLoading } = useSWR(
+    isSubmitted
+      ? () => {
+          return ['report-expense', toQueryString()];
+        }
+      : null,
+    ([, query]) => {
+      const endpoint = `${ReportExpenseApi.basePath}${query}`;
+      return ReportExpenseApi.getAllFetcher(endpoint);
+    }
+  );
+
+  const data: ReportExpense[] = useMemo(
+    () =>
+      isResponseSuccess(reportExpenseResponse)
+        ? (reportExpenseResponse?.data as ReportExpense[]) || []
+        : [],
+    [reportExpenseResponse]
+  );
+
+  const meta = useMemo(
+    () =>
+      isResponseSuccess(reportExpenseResponse) && reportExpenseResponse.meta
+        ? reportExpenseResponse.meta
+        : null,
+    [reportExpenseResponse]
+  );
+
+  // ===== EXPORT DATA FETCHER =====
+  const reportExpenseExport = useCallback(async (): Promise<
+    ReportExpense[] | null
+  > => {
+    const params = new URLSearchParams(toQueryString().replace('?', ''));
+    params.set('limit', 'limit');
+    params.set('page', '1');
+
+    const endpoint = `${ReportExpenseApi.basePath}?${params.toString()}`;
+    const response = await ReportExpenseApi.getAllFetcher(endpoint);
+
+    return isResponseSuccess(response) ? response.data : null;
+  }, [toQueryString]);
+
+  // ===== EXPORT HANDLERS =====
+  const handleExportPdf = useCallback(async () => {
+    if (isPdfExportLoading) return;
+    setIsPdfExportLoading(true);
+    setPdfProgress(0);
+
+    await new Promise((resolve) =>
+      requestAnimationFrame(() => resolve(undefined))
+    );
+
+    try {
+      // Stage 1: Fetching data (0-20%)
+      setPdfProgress(10);
+      await new Promise((resolve) => setTimeout(resolve, 50));
+
+      const allData = await reportExpenseExport();
+      if (!allData || allData.length === 0) {
+        toast.error('Tidak ada data untuk diekspor.');
+        setIsPdfExportLoading(false);
+        setPdfProgress(0);
+        return;
+      }
+
+      // Stage 2: Data fetched - langsung loncat ke progress tinggi
+      setPdfProgress(30);
+      await new Promise((resolve) => setTimeout(resolve, 50));
+      const progressInterval = setInterval(() => {
+        setPdfProgress((prev) => {
+          // Increment kecil dan random antara 0.5-2%
+          const increment = Math.random() * 1.5 + 0.5;
+          const newProgress = Math.min(prev + increment, 50);
+          return newProgress;
+        });
+      }, 300); // Update setiap 300ms
+
+      const pdfParams = {
+        location_name: selectedLocation?.label,
+        supplier_name: selectedSupplier?.label,
+        kandang_name: selectedKandang?.label,
+        nonstock_name: selectedNonstock?.label,
+        category: selectedCategory?.label,
+        realization_date: filterState.realization_date,
+        search: filterState.search,
+      };
+
+      setDropdownOpen(false);
+
+      // Stage 3: Langsung loncat ke 80-85% untuk menghindari stuck
+      const baseProgress = 80 + Math.floor(Math.random() * 16); // Random 80-85%
+      setPdfProgress(baseProgress);
+      await new Promise((resolve) => setTimeout(resolve, 100));
+
+      // Stage 4: Berikan jeda untuk UI update
+      await new Promise((resolve) =>
+        requestAnimationFrame(() => resolve(undefined))
+      );
+
+      // Proses PDF yang sebenarnya
+      await generateReportExpensePDF(allData, pdfParams);
+
+      clearInterval(progressInterval);
+
+      // Stage 5: Finalizing (98-100%)
+      setPdfProgress(99);
+      await new Promise((resolve) => setTimeout(resolve, 100));
+
+      setPdfProgress(100);
+      toast.success('PDF berhasil dibuat dan diunduh.');
+
+      // Reset progress setelah selesai
+      setTimeout(() => setPdfProgress(0), 500);
+    } catch (error) {
+      console.error('PDF Export Error:', error);
+      toast.error('Gagal membuat PDF. Silakan coba lagi.');
+      setPdfProgress(0);
+    } finally {
+      setIsPdfExportLoading(false);
+    }
+  }, [
+    reportExpenseExport,
+    selectedLocation,
+    selectedSupplier,
+    selectedKandang,
+    selectedNonstock,
+    selectedCategory,
+    filterState.realization_date,
+    filterState.search,
+  ]);
+
+  const handleExportExcel = useCallback(async () => {
+    if (isExcelExportLoading) return;
+    setIsExcelExportLoading(true);
+    setExcelProgress(0);
+    setDropdownOpen(false);
+
+    await new Promise((resolve) =>
+      requestAnimationFrame(() => resolve(undefined))
+    );
+
+    try {
+      // Stage 1: Fetching data (0-20%)
+      setExcelProgress(15);
+      await new Promise((resolve) => setTimeout(resolve, 50));
+
+      const allDataForExport = await reportExpenseExport();
+
+      if (!allDataForExport || allDataForExport.length === 0) {
+        toast.error('Tidak ada data untuk diekspor.');
+        setIsExcelExportLoading(false);
+        setExcelProgress(0);
+        return;
+      }
+
+      // Stage 2: Data fetched (20-40%)
+      setExcelProgress(30);
+      await new Promise((resolve) => setTimeout(resolve, 50));
+
+      // Stage 3: Grouping data (40-60%)
+      setExcelProgress(50);
+      const groupedBySupplier: Record<string, ReportExpense[]> = {};
+      allDataForExport.forEach((item) => {
+        const supplierName = item.supplier?.name || 'Unknown Supplier';
+        if (!groupedBySupplier[supplierName]) {
+          groupedBySupplier[supplierName] = [];
+        }
+        groupedBySupplier[supplierName].push(item);
+      });
+
+      await new Promise((resolve) => setTimeout(resolve, 50));
+
+      // Stage 4: Creating workbook (60-80%)
+      setExcelProgress(70);
+      const workbook = XLSX.utils.book_new();
+
+      const supplierEntries = Object.entries(groupedBySupplier);
+      const totalSuppliers = supplierEntries.length;
+
+      for (let i = 0; i < supplierEntries.length; i++) {
+        const [supplierName, supplierData] = supplierEntries[i];
+
+        // Update progress per supplier
+        const progressIncrement = (20 / totalSuppliers) * (i + 1);
+        setExcelProgress(70 + progressIncrement);
+
+        const totals = supplierData.reduce(
+          (acc, item) => ({
+            qty_pengajuan: acc.qty_pengajuan + (item.pengajuan?.qty || 0),
+            total_pengajuan:
+              acc.total_pengajuan +
+              (item.pengajuan?.qty || 0) * (item.pengajuan?.price || 0),
+            qty_realisasi: acc.qty_realisasi + (item.realisasi?.qty || 0),
+            total_realisasi:
+              acc.total_realisasi +
+              (item.realisasi?.qty || 0) * (item.realisasi?.price || 0),
+          }),
+          {
+            qty_pengajuan: 0,
+            total_pengajuan: 0,
+            qty_realisasi: 0,
+            total_realisasi: 0,
+          }
+        );
+
+        const excelData = supplierData.map((item, index) => ({
+          No: index + 1,
+          'No. PO': item.po_number || '',
+          'No. Referensi': item.reference_number || '',
+          'Tanggal Realisasi': item.realization_date
+            ? formatDate(item.realization_date, 'DD MMM YYYY')
+            : '',
+          'Tanggal Transaksi': item.transaction_date
+            ? formatDate(item.transaction_date, 'DD MMM YYYY')
+            : '',
+          Kategori: item.category || '',
+          Produk: item.pengajuan?.nonstock?.name || '',
+          Lokasi: item.kandang?.location?.name || '',
+          Kandang: item.kandang?.name || '',
+          'Qty Pengajuan': item.pengajuan?.qty || 0,
+          'Harga Pengajuan': item.pengajuan?.price || 0,
+          'Total Pengajuan':
+            (item.pengajuan?.qty || 0) * (item.pengajuan?.price || 0),
+          'Qty Realisasi': item.realisasi?.qty || 0,
+          'Harga Realisasi': item.realisasi?.price || 0,
+          'Total Realisasi':
+            (item.realisasi?.qty || 0) * (item.realisasi?.price || 0),
+          'Status Pencairan': item.latest_approval?.step_name || '',
+        }));
+
+        excelData.push({
+          No: 'Total' as unknown as number,
+          'No. PO': '',
+          'No. Referensi': '',
+          'Tanggal Realisasi': '',
+          'Tanggal Transaksi': '',
+          Kategori: '',
+          Produk: '',
+          Lokasi: '',
+          Kandang: '',
+          'Qty Pengajuan': totals.qty_pengajuan,
+          'Harga Pengajuan': 0,
+          'Total Pengajuan': totals.total_pengajuan,
+          'Qty Realisasi': totals.qty_realisasi,
+          'Harga Realisasi': 0,
+          'Total Realisasi': totals.total_realisasi,
+          'Status Pencairan': '',
+        });
+
+        const worksheet = XLSX.utils.json_to_sheet(excelData);
+        const colWidths = [
+          { wch: 5 }, // No
+          { wch: 20 }, // No. PO
+          { wch: 20 }, // No. Referensi
+          { wch: 15 }, // Tanggal Realisasi
+          { wch: 15 }, // Tanggal Transaksi
+          { wch: 15 }, // Kategori
+          { wch: 30 }, // Produk
+          { wch: 20 }, // Lokasi
+          { wch: 15 }, // Kandang
+          { wch: 15 }, // Qty Pengajuan
+          { wch: 15 }, // Harga Pengajuan
+          { wch: 20 }, // Total Pengajuan
+          { wch: 15 }, // Qty Realisasi
+          { wch: 15 }, // Harga Realisasi
+          { wch: 20 }, // Total Realisasi
+          { wch: 20 }, // Status Pencairan
+        ];
+        worksheet['!cols'] = colWidths;
+
+        const sheetName = supplierName.slice(0, 31);
+        XLSX.utils.book_append_sheet(workbook, worksheet, sheetName);
+
+        // Small delay to allow UI update
+        if (i < supplierEntries.length - 1) {
+          await new Promise((resolve) => setTimeout(resolve, 10));
+        }
+      }
+
+      // Stage 5: Writing file (90-100%)
+      setExcelProgress(95);
+      await new Promise((resolve) => setTimeout(resolve, 50));
+
+      const filename = `Laporan-BOP-${formatDate(new Date(), 'YYYY-MM-DD-HHmm')}.xlsx`;
+      XLSX.writeFile(workbook, filename);
+
+      setExcelProgress(100);
+      toast.success('Excel berhasil dibuat dan diunduh.');
+
+      // Reset progress
+      setTimeout(() => setExcelProgress(0), 500);
+    } catch (error) {
+      console.error('Excel Export Error:', error);
+      toast.error('Gagal membuat Excel. Silakan coba lagi.');
+      setExcelProgress(0);
+    } finally {
+      setIsExcelExportLoading(false);
+    }
+  }, [isExcelExportLoading, reportExpenseExport]);
+
+  // ===== PAGINATION HANDLERS =====
+  const handlePageChange = (page: number) => {
+    setPage(page);
+  };
+
+  const handleRowChange = (pageSize: number) => {
+    setPageSize(pageSize);
+  };
+
+  const handleNextPage = () => {
+    if (meta && filterState.page < meta.total_pages) {
+      setPage(filterState.page + 1);
+    }
+  };
+
+  const handlePrevPage = () => {
+    if (filterState.page > 1) {
+      setPage(filterState.page - 1);
+    }
+  };
+
+  // ===== TABLE COLUMNS DEFINITION =====
+  const columns = useMemo((): ColumnDef<ReportExpense>[] => {
+    return [
+      {
+        header: 'No',
+        accessorFn: (_, index) =>
+          (filterState.page - 1) * filterState.pageSize + index + 1,
+      },
+      {
+        header: 'No. PO',
+        accessorKey: 'po_number',
+      },
+      {
+        header: 'No. Referensi',
+        accessorKey: 'reference_number',
+      },
+      {
+        header: 'Tanggal Realisasi',
+        accessorKey: 'realization_date',
+        cell: ({ row }) => {
+          return formatDate(row.original?.realization_date, 'DD MMM, YYYY');
+        },
+      },
+      {
+        header: 'Tanggal Transaksi',
+        accessorKey: 'transaction_date',
+        cell: ({ row }) => {
+          return formatDate(row.original?.transaction_date, 'DD MMM, YYYY');
+        },
+      },
+      {
+        header: 'Kategori',
+        accessorKey: 'category',
+      },
+      {
+        header: 'Produk',
+        accessorFn: (row) => row.pengajuan?.nonstock?.name,
+      },
+      {
+        header: 'Supplier',
+        accessorFn: (row) => row.supplier?.name,
+      },
+      {
+        header: 'Lokasi',
+        accessorFn: (row) => row.kandang?.location?.name,
+      },
+      {
+        header: 'Kandang',
+        accessorFn: (row) => row.kandang?.name,
+      },
+      {
+        header: 'Pengajuan',
+        columns: [
+          {
+            header: 'Qty',
+            id: 'qty_pengajuan',
+            accessorFn: (row) => row.pengajuan?.qty,
+            cell: ({ row }) =>
+              row.original.pengajuan?.qty?.toLocaleString('id-ID') || '0',
+          },
+          {
+            header: 'Harga',
+            id: 'harga_pengajuan',
+            accessorFn: (row) => row.pengajuan?.price,
+            cell: ({ row }) =>
+              formatCurrency(row.original.pengajuan?.price || 0),
+          },
+          {
+            header: 'Total',
+            id: 'total_pengajuan',
+            accessorFn: (row) =>
+              (row.pengajuan?.qty || 0) * (row.pengajuan?.price || 0),
+            cell: ({ row }) => {
+              const total =
+                (row.original.pengajuan?.qty || 0) *
+                (row.original.pengajuan?.price || 0);
+              return formatCurrency(total);
+            },
+          },
+        ],
+      },
+      {
+        header: 'Realisasi',
+        columns: [
+          {
+            header: 'Qty',
+            id: 'qty_realisasi',
+            accessorFn: (row) => row.realisasi?.qty,
+            cell: ({ row }) =>
+              row.original.realisasi?.qty?.toLocaleString('id-ID') || '0',
+          },
+          {
+            header: 'Harga',
+            id: 'harga_realisasi',
+            accessorFn: (row) => row.realisasi?.price,
+            cell: ({ row }) =>
+              formatCurrency(row.original.realisasi?.price || 0),
+          },
+          {
+            header: 'Total',
+            id: 'total_realisasi',
+            accessorFn: (row) =>
+              (row.realisasi?.qty || 0) * (row.realisasi?.price || 0),
+            cell: ({ row }) => {
+              const total =
+                (row.original.realisasi?.qty || 0) *
+                (row.original.realisasi?.price || 0);
+              return formatCurrency(total);
+            },
+          },
+        ],
+      },
+      {
+        header: 'Status Pencairan',
+        cell: (props) => (
+          <RealizationStatusBadge
+            approval={props.row.original?.latest_approval}
+          />
+        ),
+      },
+      {
+        header: 'Status BOP',
+        cell: (props) => (
+          <ExpenseStatusBadge approval={props.row.original?.latest_approval} />
+        ),
+      },
+    ];
+  }, [filterState.page, filterState.pageSize]);
+
+  // ===== RENDER =====
+  return (
+    <div className='flex flex-col gap-4'>
+      {isAnyExportLoading && (
+        <div className='flex flex-col gap-2'>
+          <progress
+            className='progress progress-primary w-full'
+            value={
+              isPdfExportLoading
+                ? pdfProgress
+                : isExcelExportLoading
+                  ? excelProgress
+                  : 0
+            }
+            max='100'
+          ></progress>
+          {((isPdfExportLoading && pdfProgress > 0) ||
+            (isExcelExportLoading && excelProgress > 0)) && (
+            <div className='text-sm text-center text-gray-600'>
+              <div className='font-semibold'>
+                {(() => {
+                  const currentProgress = isPdfExportLoading
+                    ? pdfProgress
+                    : excelProgress;
+                  const exportType = isPdfExportLoading ? 'PDF' : 'Excel';
+
+                  if (currentProgress < 20)
+                    return 'Mengambil data dari server...';
+                  if (currentProgress < 30) return 'Memproses data laporan...';
+                  if (currentProgress < 40)
+                    return `Menyiapkan struktur dokumen ${exportType}...`;
+                  if (currentProgress < 50)
+                    return 'Mengelompokkan data per supplier...';
+                  if (currentProgress < 70)
+                    return 'Merender tabel dan kalkulasi...';
+                  if (currentProgress < 96)
+                    return `Memformat dokumen ${exportType}...`;
+                  if (currentProgress < 100)
+                    return 'Menyelesaikan dan mengunduh...';
+                  return 'Selesai!';
+                })()}{' '}
+                {Math.round(isPdfExportLoading ? pdfProgress : excelProgress)}%
+              </div>
+              {((isPdfExportLoading && pdfProgress >= 35 && pdfProgress < 90) ||
+                (isExcelExportLoading &&
+                  excelProgress >= 35 &&
+                  excelProgress < 90)) && (
+                <div className='text-xs text-gray-500 mt-1'>
+                  {(isPdfExportLoading ? pdfProgress : excelProgress) < 96
+                    ? 'Proses ini membutuhkan waktu lebih lama untuk data dalam jumlah besar. Mohon bersabar...'
+                    : 'Sedang memproses baris data. Hampir selesai...'}
+                </div>
+              )}
+            </div>
+          )}
+        </div>
+      )}
+      <Card
+        title='Laporan Biaya Operasional'
+        variant='bordered'
+        className={{
+          wrapper: 'w-full',
+        }}
+        footer={
+          <div className='flex flex-col gap-6'>
+            <div className='flex flex-row items-center justify-end gap-2'>
+              <div className='flex flex-row items-center gap-2'>
+                <Button className='min-w-24' onClick={handleSubmit}>
+                  Cari
+                </Button>
+                <Button
+                  className='min-w-24'
+                  color='warning'
+                  onClick={resetFilters}
+                >
+                  Reset
+                </Button>
+              </div>
+              <div>
+                <Dropdown
+                  trigger={
+                    <Button
+                      color='success'
+                      className='min-w-24'
+                      isLoading={isAnyExportLoading}
+                      onClick={() => {
+                        setDropdownOpen(!dropdownOpen);
+                      }}
+                    >
+                      Export
+                    </Button>
+                  }
+                  align='end'
+                  direction='bottom'
+                  open={dropdownOpen}
+                >
+                  <Menu className='w-32'>
+                    <MenuItem title='Excel' onClick={handleExportExcel} />
+                    <MenuItem title='PDF' onClick={handleExportPdf} />
+                  </Menu>
+                </Dropdown>
+              </div>
+            </div>
+          </div>
+        }
+      >
+        <div className='grid grid-cols-2 md:grid-cols-4 gap-4'>
+          <SelectInput
+            isClearable
+            label='Lokasi'
+            options={optionsLocation}
+            isLoading={isLoadingLocation}
+            placeholder='Lokasi'
+            value={selectedLocation}
+            onChange={locationChangeHandler}
+          />
+          <SelectInput
+            isClearable
+            label='Kandang'
+            options={optionsKandang}
+            isLoading={isLoadingKandang}
+            placeholder='Kandang'
+            value={selectedKandang}
+            onChange={kandangChangeHandler}
+          />
+          <SelectInput
+            isClearable
+            label='Supplier'
+            options={optionsSupplier}
+            isLoading={isLoadingSupplier}
+            placeholder='Supplier'
+            value={selectedSupplier}
+            onChange={supplierChangeHandler}
+          />
+          <SelectInput
+            isClearable
+            label='Produk'
+            options={optionsNonstock}
+            isLoading={isLoadingNonstock}
+            placeholder='Produk'
+            value={selectedNonstock}
+            onChange={nonstockChangeHandler}
+          />
+          <SelectInput
+            isClearable
+            label='Kategori'
+            options={categoryOptions}
+            placeholder='Kategori'
+            value={selectedCategory}
+            onChange={categoryChangeHandler}
+          />
+          <DateInput
+            label='Tanggal Realisasi'
+            value={filterState.realization_date}
+            onChange={realizationDateChangeHandler}
+            name='realization_date'
+            placeholder='Tanggal Realisasi'
+          />
+          <DebouncedTextInput
+            label='Cari'
+            name='search'
+            value={filterState.search}
+            onChange={searchChangeHandler}
+            placeholder='Cari'
+            startAdornment={<Icon icon='mdi:magnify' width={24} height={24} />}
+          />
+        </div>
+      </Card>
+
+      {/* ===== TABLE CONTENT ===== */}
+      {!isSubmitted ? (
+        <div className='mt-6 text-center text-gray-500'>
+          Silakan pilih filter dan klik tombol Cari untuk menampilkan data.
+        </div>
+      ) : isLoading ? (
+        <div className='w-full flex flex-row justify-center items-center p-4'>
+          <span className='loading loading-spinner loading-xl' />
+        </div>
+      ) : data.length === 0 ? (
+        <div className='mt-6 text-center text-gray-500'>
+          Tidak ada data yang dapat ditampilkan...
+        </div>
+      ) : (
+        <>
+          <Table<ReportExpense>
+            columns={columns}
+            data={data}
+            pageSize={10}
+            className={{
+              containerClassName: 'mb-0',
+              headerRowClassName: cn(
+                TABLE_DEFAULT_STYLING,
+                'whitespace-nowrap'
+              ),
+              bodyRowClassName: cn(TABLE_DEFAULT_STYLING, 'whitespace-nowrap'),
+              paginationClassName: 'hidden',
+            }}
+          />
+          {meta && (
+            <div className='mt-6'>
+              <Pagination
+                currentPage={meta.page}
+                totalItems={meta.total_results}
+                onPageChange={handlePageChange}
+                onRowChange={handleRowChange}
+                onNextPage={handleNextPage}
+                onPrevPage={handlePrevPage}
+                rowOptions={[10, 25, 50, 100]}
+                itemsPerPage={meta.limit}
+              />
+            </div>
+          )}
+        </>
+      )}
+    </div>
+  );
+};
+
+export default ReportExpenseTable;

src/components/pages/report/expense/pdf/ReportExpenseExport.tsx

@@ -0,0 +1,602 @@
+import { ReportExpense } from '@/types/api/report/report-expense';
+import { Document, Image, Page, pdf, Text, View } from '@react-pdf/renderer';
+import { formatCurrency, formatDate } from '@/lib/helper';
+import pdfStyles from '@/components/pages/report/expense/pdf/styles/ReportExpenseStyles';
+import toast from 'react-hot-toast';
+
+export interface PDFParams {
+  location_name?: string;
+  supplier_name?: string;
+  kandang_name?: string;
+  nonstock_name?: string;
+  category?: string;
+  realization_date?: string;
+  search?: string;
+}
+
+const getStatusStyle = (action?: string) => {
+  switch (action) {
+    case 'APPROVED':
+      return { backgroundColor: '#dcfce7' };
+    case 'REJECTED':
+      return { backgroundColor: '#fee2e2' };
+    default:
+      return { backgroundColor: '#fef3c7' };
+  }
+};
+
+const PDFDocument = ({
+  data,
+  params,
+}: {
+  data: ReportExpense[];
+  params: PDFParams;
+}) => {
+  // Group data by supplier
+  const groupedBySupplier = (() => {
+    const groups: Record<string, ReportExpense[]> = {};
+    data.forEach((item) => {
+      const supplierName = item.supplier?.name || 'Unknown Supplier';
+      if (!groups[supplierName]) {
+        groups[supplierName] = [];
+      }
+      groups[supplierName].push(item);
+    });
+    return groups;
+  })();
+
+  // Calculate grand totals
+  const grandTotals = data.reduce(
+    (acc, item) => {
+      const pengajuanTotal =
+        (item.pengajuan?.qty || 0) * (item.pengajuan?.price || 0);
+      const realisasiTotal =
+        (item.realisasi?.qty || 0) * (item.realisasi?.price || 0);
+      return {
+        pengajuan: acc.pengajuan + pengajuanTotal,
+        realisasi: acc.realisasi + realisasiTotal,
+      };
+    },
+    { pengajuan: 0, realisasi: 0 }
+  );
+
+  return (
+    <Document>
+      <Page size='A4' orientation='landscape' style={pdfStyles.page}>
+        {/* Header Section */}
+        <View style={pdfStyles.header}>
+          <Image
+            src={'https://placehold.co/120x30/png'}
+            style={pdfStyles.logo}
+            id={'mbu-logo'}
+          />
+          <Text style={pdfStyles.companyInfo}>PT LUMBUNG TELUR INDONESIA</Text>
+          <Text style={pdfStyles.address}>
+            SOHO Building Lt.3 (Paris Van Java), Jalan Karang Tinggal, Kel.
+            Cipedes, Kec. Sukajadi, Kota Bandung 40162
+          </Text>
+          <View style={pdfStyles.divider} />
+        </View>
+
+        {/* Report Title */}
+        <View style={pdfStyles.titleSection}>
+          <Text style={pdfStyles.title}>LAPORAN BIAYA OPERASIONAL</Text>
+          <View style={pdfStyles.poInfo}>
+            <Text>Tanggal Cetak: {formatDate(new Date(), 'DD MMM YYYY')}</Text>
+            <Text>Total Data: {data.length} transaksi</Text>
+          </View>
+        </View>
+
+        {/* Filters Info if any */}
+        {(params.location_name ||
+          params.supplier_name ||
+          params.realization_date) && (
+          <View style={{ marginBottom: 10, fontSize: 8 }}>
+            {params.location_name && (
+              <Text>Lokasi: {params.location_name}</Text>
+            )}
+            {params.supplier_name && (
+              <Text>Supplier: {params.supplier_name}</Text>
+            )}
+            {params.realization_date && (
+              <Text>
+                Tanggal Realisasi:{' '}
+                {formatDate(params.realization_date, 'DD MMM YYYY')}
+              </Text>
+            )}
+          </View>
+        )}
+
+        {/* Grouped Tables by Supplier */}
+        {Object.entries(groupedBySupplier).map(
+          ([supplierName, items], groupIndex) => {
+            const supplierTotals = items.reduce(
+              (acc, item) => {
+                const pengajuanTotal =
+                  (item.pengajuan?.qty || 0) * (item.pengajuan?.price || 0);
+                const realisasiTotal =
+                  (item.realisasi?.qty || 0) * (item.realisasi?.price || 0);
+                return {
+                  pengajuan: acc.pengajuan + pengajuanTotal,
+                  realisasi: acc.realisasi + realisasiTotal,
+                };
+              },
+              { pengajuan: 0, realisasi: 0 }
+            );
+
+            return (
+              <View key={groupIndex} style={pdfStyles.allocationSection}>
+                {/* Supplier Header */}
+                <Text style={pdfStyles.sectionTitle}>{supplierName}</Text>
+
+                {/* Table */}
+                <View style={pdfStyles.table}>
+                  {/* Header Row 1: Group Headers */}
+                  <View style={[pdfStyles.tableRow, pdfStyles.tableHeader]}>
+                    <View
+                      style={[
+                        pdfStyles.tableCellNarrowHeader,
+                        { borderBottomWidth: 0 },
+                      ]}
+                    >
+                      <Text>No</Text>
+                    </View>
+                    <View
+                      style={[
+                        pdfStyles.tableCellWrapHeader,
+                        { borderBottomWidth: 0 },
+                      ]}
+                    >
+                      <Text>No. PO</Text>
+                    </View>
+                    <View
+                      style={[
+                        pdfStyles.tableCellWrapHeader,
+                        { borderBottomWidth: 0 },
+                      ]}
+                    >
+                      <Text>No. Referensi</Text>
+                    </View>
+                    <View
+                      style={[
+                        pdfStyles.tableCellMediumHeader,
+                        { borderBottomWidth: 0 },
+                      ]}
+                    >
+                      <Text>Tgl Realisasi</Text>
+                    </View>
+                    <View
+                      style={[
+                        pdfStyles.tableCellMediumHeader,
+                        { borderBottomWidth: 0 },
+                      ]}
+                    >
+                      <Text>Tgl Transaksi</Text>
+                    </View>
+                    <View
+                      style={[
+                        pdfStyles.tableCellXSmallHeader,
+                        { borderBottomWidth: 0 },
+                      ]}
+                    >
+                      <Text>Kategori</Text>
+                    </View>
+                    <View
+                      style={[
+                        pdfStyles.tableCellHeader,
+                        { borderBottomWidth: 0 },
+                      ]}
+                    >
+                      <Text>Produk</Text>
+                    </View>
+                    <View
+                      style={[
+                        pdfStyles.tableCellSmallHeader,
+                        { borderBottomWidth: 0 },
+                      ]}
+                    >
+                      <Text>Lokasi</Text>
+                    </View>
+                    <View
+                      style={[
+                        pdfStyles.tableCellSmallHeader,
+                        { borderBottomWidth: 0 },
+                      ]}
+                    >
+                      <Text>Kandang</Text>
+                    </View>
+
+                    {/* Pengajuan Group */}
+                    <View
+                      style={[
+                        pdfStyles.tableCellXSmallHeader,
+                        { borderBottomWidth: 0, borderRightWidth: 0 },
+                      ]}
+                    >
+                      <Text></Text>
+                    </View>
+                    <View
+                      style={[
+                        pdfStyles.tableCellMediumHeader,
+                        {
+                          borderBottomWidth: 0,
+                          borderRightWidth: 0,
+                          textAlign: 'center',
+                        },
+                      ]}
+                    >
+                      <Text>Pengajuan</Text>
+                    </View>
+                    <View
+                      style={[
+                        pdfStyles.tableCellMediumHeader,
+                        { borderBottomWidth: 0 },
+                      ]}
+                    >
+                      <Text></Text>
+                    </View>
+
+                    {/* Realisasi Group */}
+                    <View
+                      style={[
+                        pdfStyles.tableCellXSmallHeader,
+                        { borderBottomWidth: 0, borderRightWidth: 0 },
+                      ]}
+                    >
+                      <Text></Text>
+                    </View>
+                    <View
+                      style={[
+                        pdfStyles.tableCellMediumHeader,
+                        {
+                          borderBottomWidth: 0,
+                          borderRightWidth: 0,
+                          textAlign: 'center',
+                        },
+                      ]}
+                    >
+                      <Text>Realisasi</Text>
+                    </View>
+                    <View
+                      style={[
+                        pdfStyles.tableCellMediumHeader,
+                        { borderBottomWidth: 0 },
+                      ]}
+                    >
+                      <Text></Text>
+                    </View>
+
+                    <View
+                      style={[
+                        pdfStyles.tableCellMediumHeader,
+                        { borderBottomWidth: 0 },
+                      ]}
+                    >
+                      <Text>Status BOP</Text>
+                    </View>
+                  </View>
+
+                  {/* Header Row 2: Sub Headers */}
+                  <View style={[pdfStyles.tableRow, pdfStyles.tableHeader]}>
+                    <View style={pdfStyles.tableCellNarrowHeader}>
+                      <Text></Text>
+                    </View>
+                    <View style={pdfStyles.tableCellWrapHeader}>
+                      <Text></Text>
+                    </View>
+                    <View style={pdfStyles.tableCellWrapHeader}>
+                      <Text></Text>
+                    </View>
+                    <View style={pdfStyles.tableCellMediumHeader}>
+                      <Text></Text>
+                    </View>
+                    <View style={pdfStyles.tableCellMediumHeader}>
+                      <Text></Text>
+                    </View>
+                    <View style={pdfStyles.tableCellXSmallHeader}>
+                      <Text></Text>
+                    </View>
+                    <View style={pdfStyles.tableCellHeader}>
+                      <Text></Text>
+                    </View>
+                    <View style={pdfStyles.tableCellSmallHeader}>
+                      <Text></Text>
+                    </View>
+                    <View style={pdfStyles.tableCellSmallHeader}>
+                      <Text></Text>
+                    </View>
+
+                    {/* Pengajuan sub-headers */}
+                    <View style={pdfStyles.tableCellXSmallHeader}>
+                      <Text>Qty</Text>
+                    </View>
+                    <View style={pdfStyles.tableCellMediumHeader}>
+                      <Text>Harga</Text>
+                    </View>
+                    <View style={pdfStyles.tableCellMediumHeader}>
+                      <Text>Total</Text>
+                    </View>
+
+                    {/* Realisasi sub-headers */}
+                    <View style={pdfStyles.tableCellXSmallHeader}>
+                      <Text>Qty</Text>
+                    </View>
+                    <View style={pdfStyles.tableCellMediumHeader}>
+                      <Text>Harga</Text>
+                    </View>
+                    <View style={pdfStyles.tableCellMediumHeader}>
+                      <Text>Total</Text>
+                    </View>
+
+                    <View style={pdfStyles.tableCellMediumHeader}>
+                      <Text></Text>
+                    </View>
+                  </View>
+
+                  {/* Table Body */}
+                  {items.map((item, index) => {
+                    const pengajuanTotal =
+                      (item.pengajuan?.qty || 0) * (item.pengajuan?.price || 0);
+                    const realisasiTotal =
+                      (item.realisasi?.qty || 0) * (item.realisasi?.price || 0);
+
+                    return (
+                      <View key={index} style={pdfStyles.tableRow}>
+                        <View style={pdfStyles.tableCellNarrow}>
+                          <Text>{index + 1}</Text>
+                        </View>
+                        <View style={pdfStyles.tableCellWrap}>
+                          <Text>{item.po_number || '-'}</Text>
+                        </View>
+                        <View style={pdfStyles.tableCellWrap}>
+                          <Text>{item.reference_number || '-'}</Text>
+                        </View>
+                        <View style={pdfStyles.tableCellMedium}>
+                          <Text>
+                            {formatDate(item.realization_date, 'DD MMM YY')}
+                          </Text>
+                        </View>
+                        <View style={pdfStyles.tableCellMedium}>
+                          <Text>
+                            {formatDate(item.transaction_date, 'DD MMM YY')}
+                          </Text>
+                        </View>
+                        <View style={pdfStyles.tableCellXSmall}>
+                          <Text>
+                            {item.category?.split('-').join(' ') || '-'}
+                          </Text>
+                        </View>
+                        <View style={pdfStyles.tableCell}>
+                          <Text>{item.pengajuan?.nonstock?.name || '-'}</Text>
+                        </View>
+                        <View style={pdfStyles.tableCellSmall}>
+                          <Text>{item.kandang?.location?.name || '-'}</Text>
+                        </View>
+                        <View style={pdfStyles.tableCellSmall}>
+                          <Text>{item.kandang?.name || '-'}</Text>
+                        </View>
+                        <View style={pdfStyles.tableCellRightXSmall}>
+                          <Text>
+                            {(item.pengajuan?.qty || 0).toLocaleString('id-ID')}
+                          </Text>
+                        </View>
+                        <View style={pdfStyles.tableCellRightMedium}>
+                          <Text>
+                            {formatCurrency(item.pengajuan?.price || 0)}
+                          </Text>
+                        </View>
+                        <View style={pdfStyles.tableCellRightMedium}>
+                          <Text>{formatCurrency(pengajuanTotal)}</Text>
+                        </View>
+                        <View style={pdfStyles.tableCellRightXSmall}>
+                          <Text>
+                            {(item.realisasi?.qty || 0).toLocaleString('id-ID')}
+                          </Text>
+                        </View>
+                        <View style={pdfStyles.tableCellRightMedium}>
+                          <Text>
+                            {formatCurrency(item.realisasi?.price || 0)}
+                          </Text>
+                        </View>
+                        <View style={pdfStyles.tableCellRightMedium}>
+                          <Text>{formatCurrency(realisasiTotal)}</Text>
+                        </View>
+                        <View style={pdfStyles.tableCellMedium}>
+                          <Text
+                            style={[
+                              { fontSize: 7, padding: 2, borderRadius: 2 },
+                              getStatusStyle(item.latest_approval?.action),
+                            ]}
+                          >
+                            {item.latest_approval?.step_name || '-'}
+                          </Text>
+                        </View>
+                      </View>
+                    );
+                  })}
+
+                  {/* Supplier Subtotal Row */}
+                  <View style={pdfStyles.grandTotalRow}>
+                    <View
+                      style={[
+                        pdfStyles.tableCellNarrow,
+                        { borderRightWidth: 0 },
+                      ]}
+                    >
+                      <Text></Text>
+                    </View>
+                    <View
+                      style={[pdfStyles.tableCellWrap, { borderRightWidth: 0 }]}
+                    >
+                      <Text></Text>
+                    </View>
+                    <View
+                      style={[pdfStyles.tableCellWrap, { borderRightWidth: 0 }]}
+                    >
+                      <Text></Text>
+                    </View>
+                    <View
+                      style={[
+                        pdfStyles.tableCellMedium,
+                        { borderRightWidth: 0 },
+                      ]}
+                    >
+                      <Text></Text>
+                    </View>
+                    <View
+                      style={[
+                        pdfStyles.tableCellMedium,
+                        { borderRightWidth: 0 },
+                      ]}
+                    >
+                      <Text></Text>
+                    </View>
+                    <View
+                      style={[
+                        pdfStyles.tableCellXSmall,
+                        { borderRightWidth: 0 },
+                      ]}
+                    >
+                      <Text></Text>
+                    </View>
+                    <View
+                      style={[
+                        pdfStyles.tableCellXSmall,
+                        { borderRightWidth: 0 },
+                      ]}
+                    >
+                      <Text></Text>
+                    </View>
+                    <View
+                      style={[
+                        pdfStyles.tableCellSmall,
+                        { borderRightWidth: 0 },
+                      ]}
+                    >
+                      <Text></Text>
+                    </View>
+                    <View
+                      style={[
+                        pdfStyles.tableCellSmall,
+                        { borderRightWidth: 0 },
+                      ]}
+                    >
+                      <Text></Text>
+                    </View>
+
+                    {/* Pengajuan Subtotal */}
+                    <View
+                      style={[
+                        pdfStyles.tableCellRightXSmall,
+                        { borderRightWidth: 0 },
+                      ]}
+                    >
+                      <Text></Text>
+                    </View>
+                    <View style={pdfStyles.tableCellRightMedium}>
+                      <Text style={{ fontWeight: 'bold' }}>Subtotal</Text>
+                    </View>
+                    <View style={pdfStyles.tableCellRightMedium}>
+                      <Text style={{ fontWeight: 'bold' }}>
+                        {formatCurrency(supplierTotals.pengajuan)}
+                      </Text>
+                    </View>
+
+                    {/* Realisasi Subtotal */}
+                    <View
+                      style={[
+                        pdfStyles.tableCellRightXSmall,
+                        { borderRightWidth: 0 },
+                      ]}
+                    >
+                      <Text></Text>
+                    </View>
+                    <View style={pdfStyles.tableCellRightMedium}>
+                      <Text style={{ fontWeight: 'bold' }}>Subtotal</Text>
+                    </View>
+                    <View style={pdfStyles.tableCellRightMedium}>
+                      <Text style={{ fontWeight: 'bold' }}>
+                        {formatCurrency(supplierTotals.realisasi)}
+                      </Text>
+                    </View>
+
+                    <View style={pdfStyles.tableCellMedium}>
+                      <Text></Text>
+                    </View>
+                  </View>
+                </View>
+              </View>
+            );
+          }
+        )}
+
+        {/* Grand Total Section */}
+        <View style={pdfStyles.allocationSection}>
+          <View
+            style={{
+              width: '30%',
+              borderTopWidth: 1,
+              borderTopColor: '#000000',
+              borderTopStyle: 'solid',
+              borderLeftWidth: 1,
+              borderLeftColor: '#000000',
+              borderLeftStyle: 'solid',
+            }}
+          >
+            <View style={pdfStyles.innerRow}>
+              <View style={pdfStyles.tableCell}>
+                <Text style={{ fontWeight: 'bold' }}>
+                  GRAND TOTAL PENGAJUAN
+                </Text>
+              </View>
+              <View style={pdfStyles.tableCell}>
+                <Text style={{ fontWeight: 'bold' }}>
+                  {formatCurrency(grandTotals.pengajuan)}
+                </Text>
+              </View>
+            </View>
+            <View style={pdfStyles.innerRow}>
+              <View style={pdfStyles.tableCell}>
+                <Text style={{ fontWeight: 'bold' }}>
+                  GRAND TOTAL REALISASI
+                </Text>
+              </View>
+              <View style={pdfStyles.tableCell}>
+                <Text style={{ fontWeight: 'bold' }}>
+                  {formatCurrency(grandTotals.realisasi)}
+                </Text>
+              </View>
+            </View>
+          </View>
+        </View>
+
+        {/* Footer */}
+        <View style={pdfStyles.footer}>
+          <View style={pdfStyles.footerCompany}>
+            <Text>PT LUMBUNG TELUR INDONESIA</Text>
+          </View>
+        </View>
+      </Page>
+    </Document>
+  );
+};
+
+export const generateReportExpensePDF = async (
+  data: ReportExpense[],
+  params: PDFParams
+): Promise<void> => {
+  try {
+    const doc = <PDFDocument data={data} params={params} />;
+    const blob = await pdf(doc).toBlob();
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement('a');
+    link.href = url;
+    link.download = `Laporan-BOP-${formatDate(new Date(), 'YYYY-MM-DD-HHmm')}.pdf`;
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+    URL.revokeObjectURL(url);
+  } catch (error) {
+    throw error;
+  }
+};

src/components/pages/report/expense/pdf/styles/ReportExpenseStyles.tsx

@@ -0,0 +1,365 @@
+import { StyleSheet } from '@react-pdf/renderer';
+
+const pdfStyles = StyleSheet.create({
+  page: {
+    fontSize: 18,
+    fontFamily: 'Helvetica',
+    padding: 20,
+    backgroundColor: '#FFFFFF',
+  },
+  header: {
+    marginBottom: 20,
+  },
+  logo: {
+    width: 120,
+    height: 30,
+    marginBottom: 8,
+  },
+  companyInfo: {
+    fontSize: 18,
+    fontWeight: 'bold',
+    marginBottom: 4,
+    color: '#1f74bf',
+  },
+  address: {
+    fontSize: 7,
+    color: '#666666',
+    maxWidth: 400,
+    marginBottom: 10,
+  },
+  divider: {
+    borderBottomWidth: 1,
+    borderBottomColor: '#000000',
+    borderBottomStyle: 'solid',
+    marginBottom: 15,
+  },
+  titleSection: {
+    flexDirection: 'row',
+    marginBottom: 20,
+    justifyContent: 'space-between',
+    alignItems: 'flex-start',
+  },
+  title: {
+    fontSize: 18,
+    fontWeight: 'bold',
+    flex: 3,
+    color: '#1f74bf',
+  },
+  poInfo: {
+    flex: 1,
+    fontSize: 7,
+    textAlign: 'right',
+  },
+  sectionTitle: {
+    fontSize: 14,
+    fontWeight: 'bold',
+    marginBottom: 8,
+    color: '#1f74bf',
+  },
+  table: {
+    borderWidth: 1,
+    borderColor: '#000000',
+    marginBottom: 15,
+  },
+  tableRow: {
+    flexDirection: 'row',
+  },
+  tableHeader: {
+    backgroundColor: '#F5F5F5',
+  },
+  tableCell: {
+    flex: 1,
+    borderRightWidth: 1,
+    borderRightColor: '#000000',
+    borderRightStyle: 'solid',
+    padding: 3,
+    fontSize: 7,
+  },
+  tableCellLast: {
+    flex: 1,
+    padding: 3,
+    fontSize: 7,
+  },
+  tableCellHeader: {
+    flex: 1,
+    borderRightWidth: 1,
+    borderRightColor: '#000000',
+    borderRightStyle: 'solid',
+    padding: 3,
+    fontSize: 7,
+    fontWeight: 'bold',
+    backgroundColor: '#F5F5F5',
+  },
+  tableCellHeaderLast: {
+    flex: 1,
+    padding: 3,
+    fontSize: 7,
+    fontWeight: 'bold',
+    backgroundColor: '#F5F5F5',
+  },
+  tableCellRight: {
+    flex: 1,
+    borderRightWidth: 1,
+    borderRightColor: '#000000',
+    borderRightStyle: 'solid',
+    padding: 3,
+    fontSize: 7,
+    textAlign: 'right',
+  },
+  tableCellRightLast: {
+    flex: 1,
+    padding: 3,
+    fontSize: 7,
+    textAlign: 'right',
+  },
+  tableCellNarrow: {
+    width: '1%',
+    minWidth: 20,
+    borderRightWidth: 1,
+    borderRightColor: '#000000',
+    borderRightStyle: 'solid',
+    padding: 3,
+    fontSize: 7,
+    textAlign: 'center',
+  },
+  tableCellNarrowHeader: {
+    width: '1%',
+    minWidth: 20,
+    borderRightWidth: 1,
+    borderRightColor: '#000000',
+    borderRightStyle: 'solid',
+    padding: 3,
+    fontSize: 7,
+    fontWeight: 'bold',
+    backgroundColor: '#F5F5F5',
+    textAlign: 'center',
+  },
+  tableCellWrap: {
+    flex: 1,
+    maxWidth: 80,
+    borderRightWidth: 1,
+    borderRightColor: '#000000',
+    borderRightStyle: 'solid',
+    padding: 3,
+    fontSize: 7,
+    flexWrap: 'wrap',
+  },
+  tableCellWrapHeader: {
+    flex: 1,
+    maxWidth: 80,
+    borderRightWidth: 1,
+    borderRightColor: '#000000',
+    borderRightStyle: 'solid',
+    padding: 3,
+    fontSize: 7,
+    fontWeight: 'bold',
+    backgroundColor: '#F5F5F5',
+  },
+  // Nested header styles
+  tableHeaderGroup: {
+    borderRightWidth: 1,
+    borderRightColor: '#000000',
+    borderRightStyle: 'solid',
+    borderBottomWidth: 1,
+    borderBottomColor: '#000000',
+    borderBottomStyle: 'solid',
+    backgroundColor: '#F5F5F5',
+  },
+  tableHeaderGroupLast: {
+    borderBottomWidth: 1,
+    borderBottomColor: '#000000',
+    borderBottomStyle: 'solid',
+    backgroundColor: '#F5F5F5',
+  },
+  tableHeaderGroupTitle: {
+    padding: 3,
+    fontSize: 7,
+    fontWeight: 'bold',
+    textAlign: 'center',
+    borderBottomWidth: 1,
+    borderBottomColor: '#000000',
+    borderBottomStyle: 'solid',
+  },
+  tableSubHeaderRow: {
+    flexDirection: 'row',
+  },
+  // Specific width columns
+  tableCellXSmall: {
+    width: 30,
+    borderRightWidth: 1,
+    borderRightColor: '#000000',
+    borderRightStyle: 'solid',
+    padding: 3,
+    fontSize: 7,
+  },
+  tableCellXSmallHeader: {
+    width: 30,
+    borderRightWidth: 1,
+    borderRightColor: '#000000',
+    borderRightStyle: 'solid',
+    padding: 3,
+    fontSize: 7,
+    fontWeight: 'bold',
+    backgroundColor: '#F5F5F5',
+  },
+  tableCellSmall: {
+    width: 40,
+    borderRightWidth: 1,
+    borderRightColor: '#000000',
+    borderRightStyle: 'solid',
+    padding: 3,
+    fontSize: 7,
+  },
+  tableCellSmallHeader: {
+    width: 40,
+    borderRightWidth: 1,
+    borderRightColor: '#000000',
+    borderRightStyle: 'solid',
+    padding: 3,
+    fontSize: 7,
+    fontWeight: 'bold',
+    backgroundColor: '#F5F5F5',
+  },
+  tableCellMedium: {
+    width: 60,
+    borderRightWidth: 1,
+    borderRightColor: '#000000',
+    borderRightStyle: 'solid',
+    padding: 3,
+    fontSize: 7,
+  },
+  tableCellMediumHeader: {
+    width: 60,
+    borderRightWidth: 1,
+    borderRightColor: '#000000',
+    borderRightStyle: 'solid',
+    padding: 3,
+    fontSize: 7,
+    fontWeight: 'bold',
+    backgroundColor: '#F5F5F5',
+  },
+  tableCellRightXSmall: {
+    width: 30,
+    borderRightWidth: 1,
+    borderRightColor: '#000000',
+    borderRightStyle: 'solid',
+    padding: 3,
+    fontSize: 7,
+    textAlign: 'right',
+  },
+  tableCellRightSmall: {
+    width: 40,
+    borderRightWidth: 1,
+    borderRightColor: '#000000',
+    borderRightStyle: 'solid',
+    padding: 3,
+    fontSize: 7,
+    textAlign: 'right',
+  },
+  tableCellRightMedium: {
+    width: 60,
+    borderRightWidth: 1,
+    borderRightColor: '#000000',
+    borderRightStyle: 'solid',
+    padding: 3,
+    fontSize: 7,
+    textAlign: 'right',
+  },
+  tableBorderBottom: {
+    borderBottomWidth: 1,
+    borderBottomColor: '#000000',
+    borderBottomStyle: 'solid',
+  },
+  grandTotalRow: {
+    flexDirection: 'row',
+    borderTopWidth: 1,
+    borderTopColor: '#000000',
+    borderTopStyle: 'solid',
+  },
+  grandTotalLabel: {
+    flex: 3,
+    padding: 3,
+    fontSize: 7,
+    fontWeight: 'bold',
+    textAlign: 'right',
+    borderRightWidth: 1,
+    borderRightColor: '#000000',
+    borderRightStyle: 'solid',
+  },
+  grandTotalValue: {
+    flex: 1,
+    padding: 3,
+    fontSize: 7,
+    fontWeight: 'bold',
+    textAlign: 'right',
+    borderRightWidth: 0,
+  },
+  allocationSection: {
+    marginBottom: 8,
+  },
+  allocationTable: {
+    borderWidth: 1,
+    borderColor: '#000000',
+  },
+  innerTable: {
+    marginTop: 5,
+    borderWidth: 1,
+    borderColor: '#000000',
+  },
+  innerRow: {
+    flexDirection: 'row',
+    borderBottomWidth: 1,
+    borderBottomColor: '#000000',
+    borderBottomStyle: 'solid',
+  },
+  innerCell: {
+    flex: 1,
+    borderRightWidth: 1,
+    borderRightColor: '#000000',
+    borderRightStyle: 'solid',
+    padding: 3,
+    fontSize: 7,
+  },
+  innerCellLast: {
+    flex: 1,
+    padding: 3,
+    fontSize: 7,
+  },
+  innerCellRight: {
+    flex: 1,
+    borderRightWidth: 1,
+    borderRightColor: '#000000',
+    borderRightStyle: 'solid',
+    padding: 3,
+    fontSize: 7,
+    textAlign: 'right',
+  },
+  innerCellRightLast: {
+    flex: 1,
+    padding: 3,
+    fontSize: 7,
+    textAlign: 'right',
+  },
+  footer: {
+    marginTop: 30,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'flex-start',
+  },
+  footerCompany: {
+    fontSize: 18,
+    fontWeight: 'bold',
+    textAlign: 'right',
+    flex: 1,
+    color: '#1f74bf',
+  },
+  specialInstructionTable: {
+    width: '60%',
+    maxWidth: 300,
+    borderWidth: 1,
+    borderColor: '#000000',
+    flex: 1,
+  },
+});
+
+export default pdfStyles;

src/config/approval-line.ts

@@ -16,10 +16,10 @@ export const PROJECT_FLOCK_APPROVAL_LINE: ApprovalLine = [
 ] as const;
 
 export const PROJECT_FLOCK_KANDANGS_APPROVAL_LINE: ApprovalLine = [
-  {
+  // {
-    step_number: 1,
+  //   step_number: 1,
-    step_name: 'Pengajuan',
+  //   step_name: 'Pengajuan',
-  },
+  // },
   {
     step_number: 2,
     step_name: 'Disetujui',

src/config/constant.ts

@@ -45,13 +45,29 @@ export const MAIN_DRAWER_LINKS: SidebarMenuItem[] = [
     link: '/closing',
     icon: 'heroicons-outline:presentation-chart-bar',
   },
+  {
+    text: 'Laporan',
+    link: '/report',
+    icon: 'mdi:chart-box-outline',
+    submenu: [
+      {
+        text: 'Logistik & Persediaan',
+        link: '/report/logistic-stock',
+      },
+      {
+        text: 'Biaya Operasional',
+        link: '/report/expense',
+      },
+    ],
+  },
+
   {
     text: 'Persediaan',
     link: '/inventory',
     icon: 'heroicons-outline:folder',
     submenu: [
       {
-        text: 'Produk',
+        text: 'Stok Produk',
         link: '/inventory/product',
       },
       {

src/dummy/marketing.dummy.ts

@@ -1,388 +0,0 @@
-import { format } from 'date-fns';
-import { Area } from '@/types/api/master-data/area';
-import { Location } from '@/types/api/master-data/location';
-import { Kandang } from '@/types/api/master-data/kandang';
-import { Warehouse } from '@/types/api/master-data/warehouse';
-import { ProductWarehouse } from '@/types/api/inventory/product-warehouse';
-import {
-  BaseMarketing,
-  Marketing,
-  BaseSalesOrder,
-  BaseDeliveryOrder,
-  BaseDelivery,
-} from '@/types/api/marketing/marketing';
-import {
-  CreatedUser,
-  BaseApproval,
-  BaseMetadata,
-} from '@/types/api/api-general';
-import { Product } from '@/types/api/master-data/product';
-import { Customer } from '@/types/api/master-data/customer';
-import { Uom } from '@/types/api/master-data/uom';
-import { ProductCategory } from '@/types/api/master-data/product-category';
-import { Supplier } from '@/types/api/master-data/supplier';
-
-// Waktu saat ini untuk created_at/updated_at
-const now = format(new Date(), 'yyyy-MM-dd HH:mm:ss');
-const today = format(new Date(), 'yyyy-MM-dd');
-const tomorrow = format(
-  new Date().setDate(new Date().getDate() + 1),
-  'yyyy-MM-dd'
-);
-
-// ======================
-// 👤 Created User & Helper Data
-// ======================
-export const createdUser: CreatedUser = {
-  id: 1,
-  id_user: 1,
-  email: 'admin@example.com',
-  name: 'Admin Utama',
-};
-
-const dummyProductBase: Product = {
-  id: 101,
-  name: 'Pakan Ayam Premium',
-  brand: 'Brand Hebat',
-  sku: 'PAK-001',
-  product_price: 15000,
-  selling_price: 18000,
-  tax: 0.1,
-  expiry_period: 365,
-  uom: { id: 1, name: 'Sak' } as Uom,
-  product_category: { id: 1, name: 'Pakan' } as ProductCategory,
-  suppliers: [{ id: 1, name: 'Supplier A' } as Supplier],
-  flags: ['PAKAN'],
-  created_user: createdUser,
-  created_at: now,
-  updated_at: now,
-};
-
-// ======================
-// 📍 Area Dummy
-// ======================
-export const dummyAreas: Area[] = [
-  {
-    id: 1,
-    name: 'Bandung Barat',
-    created_user: createdUser,
-    created_at: now,
-    updated_at: now,
-  },
-  {
-    id: 2,
-    name: 'Cimahi Utara',
-    created_user: createdUser,
-    created_at: now,
-    updated_at: now,
-  },
-];
-
-// ======================
-// 🏢 Location Dummy
-// ======================
-export const dummyLocations: Location[] = [
-  {
-    id: 1,
-    name: 'Gudang A',
-    address: 'Jl. Sukajadi No. 12',
-    area: dummyAreas[0],
-    created_user: createdUser,
-    created_at: now,
-    updated_at: now,
-  },
-  {
-    id: 2,
-    name: 'Gudang B',
-    address: 'Jl. Setiabudi No. 45',
-    area: dummyAreas[1],
-    created_user: createdUser,
-    created_at: now,
-    updated_at: now,
-  },
-];
-
-// ======================
-// 🐔 Kandang Dummy
-// ======================
-export const dummyKandangs: Kandang[] = [
-  {
-    id: 1,
-    name: 'Kandang Ayam Layer 1',
-    status: 'AKTIF',
-    capacity: 500,
-    location: dummyLocations[0],
-    pic: createdUser,
-    created_user: createdUser,
-    created_at: now,
-    updated_at: now,
-  },
-  {
-    id: 2,
-    name: 'Kandang Ayam Broiler 2',
-    status: 'NONAKTIF',
-    capacity: 300,
-    location: dummyLocations[1],
-    pic: createdUser,
-    created_user: createdUser,
-    created_at: now,
-    updated_at: now,
-  },
-];
-
-// ======================
-// 🏭 Warehouse Dummy
-// ======================
-export const dummyWarehouses: Warehouse[] = [
-  {
-    id: 1,
-    type: 'AREA',
-    name: 'Gudang Wilayah Bandung Barat',
-    area: dummyAreas[0],
-    created_user: createdUser,
-    created_at: now,
-    updated_at: now,
-  } as Warehouse,
-  {
-    id: 2,
-    type: 'LOKASI',
-    name: 'Gudang Produksi Sukajadi',
-    area: dummyAreas[0],
-    location: { ...dummyLocations[0], area: dummyAreas[0] },
-    created_user: createdUser,
-    created_at: now,
-    updated_at: now,
-  } as Warehouse,
-  {
-    id: 3,
-    type: 'KANDANG',
-    name: 'Gudang Kandang Layer 1',
-    area: dummyAreas[0],
-    location: { ...dummyLocations[0], area: dummyAreas[0] },
-    kandang: {
-      ...dummyKandangs[0],
-      location: dummyLocations[0],
-      pic: createdUser,
-    },
-    created_user: createdUser,
-    created_at: now,
-    updated_at: now,
-  } as Warehouse,
-];
-
-// ======================
-// 📦 Product Warehouse Dummy
-// ======================
-export const dummyProductWarehouses: ProductWarehouse[] = [
-  {
-    id: 1,
-    product_id: 101,
-    warehouse_id: 1,
-    quantity: 1000,
-    product: dummyProductBase,
-    warehouse: dummyWarehouses[0],
-    created_user: createdUser,
-    created_at: now,
-    updated_at: now,
-  },
-  {
-    id: 2,
-    product_id: 102,
-    warehouse_id: 2,
-    quantity: 500,
-    product: {
-      ...dummyProductBase,
-      id: 102,
-      name: 'Vitamin Ayam Super',
-      sku: 'VIT-002',
-      flags: ['VITAMIN'],
-      selling_price: 25000,
-    },
-    warehouse: dummyWarehouses[1],
-    created_user: createdUser,
-    created_at: now,
-    updated_at: now,
-  },
-];
-
-// ======================
-// 💼 Marketing Dummy
-// ======================
-
-// Helper untuk Sales Order (SO) Item
-const soItem1: BaseSalesOrder = {
-  vehicle_number: 'B 1234 ABC',
-  id: 101,
-  marketing_id: 1,
-  product_warehouse_id: 1,
-  qty: 100,
-  unit_price: 18000, // Harga jual
-  avg_weight: 1.0,
-  total_weight: 100 * 1.0,
-  total_price: 100 * 18000,
-  product_warehouse: dummyProductWarehouses[0] as ProductWarehouse,
-};
-const soItem2: BaseSalesOrder = {
-  vehicle_number: 'D 5678 EFG',
-  id: 102,
-  marketing_id: 2,
-  product_warehouse_id: 2,
-  qty: 50,
-  unit_price: 25000,
-  avg_weight: 0.5,
-  total_weight: 50 * 0.5,
-  total_price: 50 * 25000,
-  product_warehouse: dummyProductWarehouses[1] as ProductWarehouse,
-};
-
-// Helper untuk Delivery Item (DO) Detail
-const doDelivery1: BaseDelivery[] = [
-  {
-    product_warehouse: dummyProductWarehouses[0] as ProductWarehouse,
-    qty: soItem1.qty,
-    unit_price: soItem1.unit_price,
-    total_weight: soItem1.total_weight,
-    avg_weight: soItem1.avg_weight,
-    total_price: soItem1.total_price,
-    vehicle_number: 'B 1234 ABC',
-  },
-];
-
-const doDelivery2: BaseDelivery[] = [
-  {
-    product_warehouse: dummyProductWarehouses[1] as ProductWarehouse,
-    qty: soItem2.qty,
-    unit_price: soItem2.unit_price,
-    total_weight: soItem2.total_weight,
-    avg_weight: soItem2.avg_weight,
-    total_price: soItem2.total_price,
-    vehicle_number: 'D 5678 EFG',
-  },
-];
-
-// Helper untuk Delivery Order (DO) Header
-const deliveryOrder1: BaseDeliveryOrder[] = [
-  {
-    id: 1,
-    marketing_id: 3,
-    do_number: 'DO-003-2025',
-    delivery_date: tomorrow,
-    warehouse: dummyWarehouses[0],
-    deliveries: doDelivery1,
-  },
-];
-
-export const dummyMarketings: Marketing[] = [
-  // 1. Pengajuan Order (Langkah Pertama/Awal)
-  {
-    id: 1,
-    status: 'DRAFT',
-    // name: 'SO-001-2025', // `name` is not part of BaseMarketing
-    so_number: 'SO-001-2025',
-    so_date: today,
-    customer: {
-      id: 1,
-      name: 'PT Maju Jaya',
-      pic_id: 1,
-      pic: createdUser,
-      type: 'Distributor',
-      address: 'Jl. Merdeka No. 1',
-      phone: '081212121212',
-      email: 'contact@majujaya.com',
-      account_number: '1234567890',
-      created_user: createdUser,
-      created_at: now,
-      updated_at: now,
-    } as Customer,
-    sales_person: createdUser,
-    notes: 'Pengajuan Order Awal, menunggu persetujuan harga.',
-    latest_approval: {
-      step_number: 1,
-      step_name: 'Pengajuan Order',
-      action: 'CREATED',
-      action_by: createdUser,
-      action_at: now,
-    } as BaseApproval,
-    sales_order: [soItem1],
-    delivery_order: [],
-    created_user: createdUser,
-    created_at: now,
-    updated_at: now,
-  } as Marketing,
-
-  // 2. Sales Order (Disetujui dan Siap DO)
-  {
-    id: 2,
-    status: 'APPROVED',
-    // name: 'SO-002-2025', // `name` is not part of BaseMarketing
-    so_number: 'SO-002-2025',
-    so_date: today,
-    customer: {
-      id: 2,
-      name: 'CV Sumber Sehat',
-      pic_id: 2,
-      pic: createdUser,
-      type: 'Retail',
-      address: 'Jl. Cihampelas No. 5',
-      phone: '082222222222',
-      email: 'info@sumbersehat.com',
-      account_number: '9876543210',
-      created_user: createdUser,
-      created_at: now,
-      updated_at: now,
-    } as Customer,
-    sales_person: createdUser,
-    notes: 'Sales Order telah disetujui oleh Supervisor.',
-    latest_approval: {
-      id: 2,
-      step_number: 2,
-      step_name: 'Sales Order',
-      action: 'APPROVED',
-      action_by: createdUser,
-      action_at: now,
-    } as BaseApproval,
-    sales_order: [soItem2],
-    delivery_order: [], // Belum ada pengiriman (DO) yang dibuat
-    created_user: createdUser,
-    created_at: now,
-    updated_at: now,
-  } as Marketing,
-
-  // 3. Delivery Order (Proses Pengiriman telah dibuat)
-  {
-    id: 3,
-    status: 'DELIVERED', // Asumsi status DELIVERED berarti DO sudah selesai/terbuat
-    // name: 'SO-003-2025', // `name` is not part of BaseMarketing
-    so_number: 'SO-003-2025',
-    so_date: today,
-    customer: {
-      id: 3,
-      name: 'UD Ternak Sejahtera',
-      pic_id: 3,
-      pic: createdUser,
-      type: 'Reseller',
-      address: 'Jl. Pasteur No. 88',
-      phone: '083333333333',
-      email: 'halo@ternaksejahtera.com',
-      account_number: '1122334455',
-      created_user: createdUser,
-      created_at: now,
-      updated_at: now,
-    } as Customer,
-    sales_person: createdUser,
-    notes: 'Pengiriman barang telah berhasil dilakukan.',
-    latest_approval: {
-      id: 3,
-      step_number: 3,
-      step_name: 'Delivery Order',
-      action: 'COMPLETED',
-      action_by: createdUser,
-      action_at: now,
-    } as BaseApproval,
-    sales_order: [soItem1, soItem2],
-    delivery_order: deliveryOrder1, // DO sudah terbuat
-    created_user: createdUser,
-    created_at: now,
-    updated_at: now,
-  } as Marketing,
-];

src/dummy/reports-expense.dummy.ts

@@ -0,0 +1,29 @@
+/**
+ * Dummy data for ReportExpense[]
+ * Generated from: report-expense.json
+ *
+ * This file is auto-generated. Do not edit manually.
+ */
+
+import { BaseApiResponse } from '@/types/api/api-general';
+import dummyData from './reports-expense.dummy.json';
+import { ReportExpense } from '@/types/api/report/report-expense';
+
+/**
+ * Get dummy ReportExpense[] data
+ * @returns Promise with BaseApiResponse containing ReportExpense[]
+ */
+export async function getDummyExpense(): Promise<
+  BaseApiResponse<ReportExpense[]>
+> {
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      resolve({
+        code: 200,
+        status: 'success',
+        message: 'Data retrieved successfully',
+        data: dummyData as unknown as ReportExpense[],
+      });
+    }, 500);
+  });
+}

src/services/api/closing.ts

@@ -3,6 +3,7 @@ import axios from 'axios';
 import { BaseApiService } from '@/services/api/base';
 import {
   Closing,
+  ClosingFinance,
   ClosingGeneralInformation,
   ClosingIncomingSapronak,
   ClosingOutgoingSapronak,
@@ -10,56 +11,13 @@ import {
   ClosingSapronakCalculation,
 } from '@/types/api/closing';
 import { BaseApiResponse } from '@/types/api/api-general';
-import {
-  dummyGetAllFetcher,
-  dummyGetSingle,
-  dummyGetAllIncomingSapronakFetcher,
-  dummyGetAllOutgoingSapronakFetcher,
-  dummyGetGeneralInfo,
-  dummyGetPerhitunganSapronak,
-  dummyGetOverhead,
-} from '@/dummy/closing.dummy';
 import { httpClient, httpClientFetcher } from '@/services/http/client';
 import { ClosingSales } from '@/types/api/closing';
-
 export class ClosingApiService extends BaseApiService<Closing, null, null> {
   constructor(basePath: string) {
     super(basePath);
   }
 
-  async getAllFetcher(endpoint: string): Promise<BaseApiResponse<Closing[]>> {
-    // TODO: Remove this block when backend is ready
-    // return await dummyGetAllFetcher();
-
-    // Uncomment this when backend is ready
-    return await httpClientFetcher<BaseApiResponse<Closing[]>>(endpoint);
-  }
-
-  async getSingle(id: number): Promise<BaseApiResponse<Closing> | undefined> {
-    // TODO: Remove this block when backend is ready
-    // try {
-    //   return await dummyGetSingle(id);
-    // } catch (error) {
-    //   if (axios.isAxiosError<BaseApiResponse<Closing>>(error)) {
-    //     return error.response?.data;
-    //   }
-    //   return undefined;
-    // }
-
-    // Uncomment this when backend is ready
-    try {
-      const getSinglePath = `${this.basePath}/${id}`;
-      const getSingleRes =
-        await httpClient<BaseApiResponse<Closing>>(getSinglePath);
-      return getSingleRes;
-    } catch (error) {
-      if (axios.isAxiosError<BaseApiResponse<Closing>>(error)) {
-        return error.response?.data;
-      }
-      return undefined;
-    }
-  }
-
   async getPenjualan(
     id: number
   ): Promise<BaseApiResponse<ClosingSales> | undefined> {
@@ -80,10 +38,6 @@ export class ClosingApiService extends BaseApiService<Closing, null, null> {
   async getAllIncomingSapronakFetcher(
     endpoint: string
   ): Promise<BaseApiResponse<ClosingIncomingSapronak[]>> {
-    // TODO: Remove this block when backend is ready
-    // return await dummyGetAllIncomingSapronakFetcher();
-
-    // Uncomment this when backend is ready
     return await httpClientFetcher<BaseApiResponse<ClosingIncomingSapronak[]>>(
       endpoint
     );
@@ -92,31 +46,14 @@ export class ClosingApiService extends BaseApiService<Closing, null, null> {
   async getAllOutgoingSapronakFetcher(
     endpoint: string
   ): Promise<BaseApiResponse<ClosingOutgoingSapronak[]>> {
-    // TODO: Remove this block when backend is ready
+    return await httpClientFetcher<BaseApiResponse<ClosingOutgoingSapronak[]>>(
-    return await dummyGetAllOutgoingSapronakFetcher();
+      endpoint
-
+    );
-    // Uncomment this when backend is ready
-    // return await httpClientFetcher<BaseApiResponse<ClosingOutgoingSapronak[]>>(
-    //   endpoint
-    // );
   }
 
   async getGeneralInfo(
     id: number
   ): Promise<BaseApiResponse<ClosingGeneralInformation> | undefined> {
-    // TODO: Remove this block when backend is ready
-    // try {
-    //   return await dummyGetGeneralInfo(id);
-    // } catch (error) {
-    //   if (
-    //     axios.isAxiosError<BaseApiResponse<ClosingGeneralInformation>>(error)
-    //   ) {
-    //     return error.response?.data;
-    //   }
-    //   return undefined;
-    // }
-
-    // Uncomment this when backend is ready
     try {
       const getGeneralInfoPath = `${this.basePath}/${id}`;
       const getGeneralInfoRes =
@@ -137,19 +74,6 @@ export class ClosingApiService extends BaseApiService<Closing, null, null> {
   async getPerhitunganSapronak(
     id: number
   ): Promise<BaseApiResponse<ClosingSapronakCalculation> | undefined> {
-    // TODO: Remove this block when backend is ready
-    // try {
-    //   return await dummyGetPerhitunganSapronak(id);
-    // } catch (error) {
-    //   if (
-    //     axios.isAxiosError<BaseApiResponse<ClosingSapronakCalculation>>(error)
-    //   ) {
-    //     return error.response?.data;
-    //   }
-    //   return undefined;
-    // }
-
-    // Uncomment this when backend is ready
     try {
       const path = `${this.basePath}/${id}/perhitungan_sapronak`;
       return await httpClient<BaseApiResponse<ClosingSapronakCalculation>>(
@@ -171,17 +95,6 @@ export class ClosingApiService extends BaseApiService<Closing, null, null> {
   async getOverhead(
     id: number
   ): Promise<BaseApiResponse<ClosingOverhead> | undefined> {
-    // TODO: Remove this block when backend is ready
-    // try {
-    //   return await dummyGetOverhead(id);
-    // } catch (error) {
-    //   if (axios.isAxiosError<BaseApiResponse<ClosingOverhead>>(error)) {
-    //     return error.response?.data;
-    //   }
-    //   return undefined;
-    // }
-
-    // Uncomment this when backend is ready
     try {
       const path = `${this.basePath}/${id}/overhead`;
       return await httpClient<BaseApiResponse<ClosingOverhead>>(path, {
@@ -194,6 +107,22 @@ export class ClosingApiService extends BaseApiService<Closing, null, null> {
       return undefined;
     }
   }
+
+  async getFinance(
+    id: number
+  ): Promise<BaseApiResponse<ClosingFinance> | undefined> {
+    try {
+      const path = `${this.basePath}/${id}/keuangan`;
+      return await httpClient<BaseApiResponse<ClosingFinance>>(path, {
+        method: 'GET',
+      });
+    } catch (error) {
+      if (axios.isAxiosError<BaseApiResponse<ClosingFinance>>(error)) {
+        return error.response?.data;
+      }
+      return undefined;
+    }
+  }
 }
 
 export const ClosingApi = new ClosingApiService('/closings');

src/services/api/marketing/marketing.ts

@@ -1,5 +1,3 @@
-import { dummyMarketings } from '@/dummy/marketing.dummy';
-import { sleep } from '@/lib/helper';
 import { BaseApiService } from '@/services/api/base';
 import { httpClient } from '@/services/http/client';
 import { BaseApiResponse } from '@/types/api/api-general';
@@ -31,41 +29,6 @@ export class SalesOrderService extends BaseApiService<
     super(basePath);
   }
 
-  // /**
-  //  * Override: Mengambil semua data Marketing dari dummyMarketings
-  //  */
-  // async getAllFetcher(endpoint: string): Promise<BaseApiResponse<Marketing[]>> {
-  //   // Simulasi delay jaringan
-  //   await sleep(500);
-
-  //   // Filter data marketing yang valid (jika menggunakan BaseMarketing[])
-  //   const data = dummyMarketings as Marketing[];
-
-  //   return createDummyResponse<Marketing[]>(data);
-  // }
-
-  // /**
-  //  * Override: Mengambil satu data Marketing berdasarkan ID dari dummyMarketings
-  //  */
-  // async getSingle(id: number): Promise<BaseApiResponse<Marketing> | undefined> {
-  //   // Simulasi delay jaringan
-  //   await sleep(300);
-
-  //   const foundData = dummyMarketings.find((m) => m.id == id);
-
-  //   if (foundData) {
-  //     // Data ditemukan, kembalikan respons sukses
-  //     return createDummyResponse<Marketing>(foundData as Marketing);
-  //   } else {
-  //     // Data tidak ditemukan, simulasi respons error
-  //     return {
-  //       code: 404,
-  //       status: 'error',
-  //       message: 'Marketing data not found (MOCK)',
-  //     };
-  //   }
-  // }
-
   /**
    * Approve single marketing data
    */

src/services/api/report.ts

@@ -0,0 +1,28 @@
+import { BaseApiService } from '@/services/api/base';
+import { httpClient, httpClientFetcher } from '@/services/http/client';
+import { BaseApiResponse } from '@/types/api/api-general';
+import { ReportExpense } from '@/types/api/report/report-expense';
+import axios from 'axios';
+
+export class ReportExpenseApiService extends BaseApiService<
+  ReportExpense,
+  unknown,
+  unknown
+> {
+  constructor(basePath: string) {
+    super(basePath);
+  }
+
+  async getAllFetcher(
+    endpoint: string
+  ): Promise<BaseApiResponse<ReportExpense[]>> {
+    // TODO: Remove this block when backend is ready
+    // const { getDummyExpense } = await import('@/dummy/reports-expense.dummy');
+    // return await getDummyExpense();
+
+    // Uncomment this when backend is ready
+    return await httpClientFetcher<BaseApiResponse<ReportExpense[]>>(endpoint);
+  }
+}
+
+export const ReportExpenseApi = new ReportExpenseApiService('/reports/expense');

src/types/api/closing.d.ts

@@ -142,3 +142,78 @@ export type OverheadTotal = {
   cost_per_bird: number;
 };
 export type ClosingSales = BaseMetadata & BaseClosingSales;
+
+// ====== FINANCE ======
+export interface ClosingFinance {
+  project_flock_id: number;
+  period: number;
+  project_type: string;
+  volume_base: ClosingFinanceVolumeBase;
+  hpp_purchases: ClosingFinanceHppPurchases;
+  profit_loss: ClosingFinanceProfitLoss;
+}
+
+export interface ClosingFinanceProfitLoss {
+  title: string;
+  data: ProfitLossData;
+}
+
+export interface ClosingFinanceHppPurchases {
+  title: string;
+  hpp: GroupHppPurchase[];
+  summary_hpp: HppPurchasesSummary;
+}
+
+export interface ClosingFinanceVolumeBase {
+  total_birds: number;
+  total_weight_kg: number;
+}
+
+export interface ProfitLossData {
+  penjualan: ProfitLossDataAmount[];
+  pembelian: ProfitLossDataAmount[];
+  summary: ProfitLossDataSummary;
+}
+
+export interface GroupHppPurchase {
+  group_name: string;
+  data: HppPurchaseData[];
+}
+
+export interface ProfitLossDataSummary {
+  gross_profit: DataSummarySubTotal;
+  sub_total: DataSummarySubTotal;
+  net_profit: DataSummarySubTotal;
+}
+
+export interface ProfitLossDataAmount {
+  type: string;
+  rp_per_bird: number;
+  rp_per_kg: number;
+  amount: number;
+}
+
+export interface HppPurchasesSummary {
+  label: string;
+  budgeting: HppPurchaseDataAmount;
+  realization: HppPurchaseDataAmount;
+}
+
+export interface HppPurchaseData {
+  type: string;
+  budgeting: HppPurchaseDataAmount;
+  realization: HppPurchaseDataAmount;
+}
+
+export interface HppPurchaseDataAmount {
+  rp_per_bird: number;
+  rp_per_kg: number;
+  amount: number;
+}
+
+export interface DataSummarySubTotal {
+  label: string;
+  rp_per_bird: number;
+  rp_per_kg: number;
+  amount: number;
+}

src/types/api/inventory/adjustment.d.ts

@@ -4,10 +4,8 @@ import { BaseMetadata } from '@/types/api/api-general';
 
 export type BaseInventoryAdjustment = {
   id: number;
-  transaction_type: string;
+  increase: number;
-  quantity: number;
+  decrease: number;
-  before_quantity: number;
-  after_quantity: number;
   note: string;
   product_warehouse_id: number;
   product_warehouse: {

src/types/api/report/report-expense.d.ts

@@ -0,0 +1,55 @@
+import { BaseApproval, CreatedUser } from '@/types/api/api-general';
+import { Supplier } from '@/types/api/master-data/supplier';
+import { Location } from '@/types/api/master-data/location';
+import { Nonstock } from '@/types/api/master-data/nonstock';
+import { Kandang } from '@/types/api/master-data/kandang';
+
+export type Pengajuan = {
+  id: number;
+  expense_id: number;
+  project_flock_kandang_id: number;
+  kandang_id: number;
+  nonstock_id: number;
+  qty: number;
+  price: number;
+  notes: string;
+  nonstock: Nonstock;
+  created_at: string;
+};
+
+export type Realisasi = {
+  id: number;
+  expense_nonstock_id: number;
+  qty: number;
+  price: number;
+  notes: string;
+  nonstock: Nonstock;
+  created_at: string;
+};
+
+export type ReportExpense = {
+  id: number;
+  reference_number: string;
+  po_number: string;
+  category: string;
+  supplier: Supplier;
+  realization_date: string;
+  transaction_date: string;
+  pengajuan: Pengajuan;
+  realisasi: Realisasi;
+  kandang: Kandang;
+  created_at: string;
+  updated_at: string;
+  created_user: CreatedUser;
+  latest_approval: BaseApproval;
+};
+
+export type ReportExpenseSearchParams = {
+  locationId: string | null;
+  supplierId: string | null;
+  kandangId: string | null;
+  nonstockId: string | null;
+  realizationDate: string | null;
+  category: string | null;
+  search: string;
+};