Merge branch 'development' of gitlab.com:mbugroup/lti-web-client into feat/FE/US-352/daily-kandang-hpp-report

package-lock.json

@@ -15,7 +15,7 @@
         "clsx": "^2.1.1",
         "formik": "^2.4.6",
         "moment": "^2.30.1",
-        "next": "15.5.9",
+        "next": "^15.5.9",
         "react": "19.1.0",
         "react-day-picker": "^9.11.1",
         "react-dom": "19.1.0",
@@ -26,7 +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",
+        "xlsx": "^0.18.5",
         "yup": "^1.7.0",
         "zustand": "^5.0.8"
       },
@@ -1856,7 +1856,6 @@
       "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.2.tgz",
       "integrity": "sha512-6mDvHUFSjyT2B2yeNx2nUgMxh9LtOWvkhIU3uePn2I2oyNymUAX1NIsdgviM4CH+JSrp2D2hsMvJOkxY+0wNRA==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "csstype": "^3.0.2"
       }
@@ -1926,7 +1925,6 @@
       "integrity": "sha512-BnOroVl1SgrPLywqxyqdJ4l3S2MsKVLDVxZvjI1Eoe8ev2r3kGDo+PcMihNmDE+6/KjkTubSJnmqGZZjQSBq/g==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@typescript-eslint/scope-manager": "8.46.2",
         "@typescript-eslint/types": "8.46.2",
@@ -2450,7 +2448,6 @@
       "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -2468,6 +2465,15 @@
         "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
       }
     },
+    "node_modules/adler-32": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/adler-32/-/adler-32-1.3.1.tgz",
+      "integrity": "sha512-ynZ4w/nUUv5rrsR8UUGoe1VC9hZj6V5hU9Qw1HlMDJGEJw5S7TfTErWTjMys6M7vr0YWcPqs3qAr4ss0nDfP+A==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/ajv": {
       "version": "6.12.6",
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
@@ -2928,6 +2934,19 @@
       ],
       "license": "CC-BY-4.0"
     },
+    "node_modules/cfb": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/cfb/-/cfb-1.2.2.tgz",
+      "integrity": "sha512-KfdUZsSOw19/ObEWasvBP/Ac4reZvAGauZhs6S/gqNhXhI7cKwvlH7ulj+dOEYnca4bm4SGo8C1bTAQvnTjgQA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "adler-32": "~1.3.0",
+        "crc-32": "~1.2.0"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/chalk": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
@@ -2969,6 +2988,15 @@
         "node": ">=6"
       }
     },
+    "node_modules/codepage": {
+      "version": "1.15.0",
+      "resolved": "https://registry.npmjs.org/codepage/-/codepage-1.15.0.tgz",
+      "integrity": "sha512-3g6NUTPd/YtuuGrhMnOMRjFc+LJw/bnMp3+0r/Wcz3IXUuCosKRJvMphm5+Q+bvTVGcJJuRvVLuYba+WojaFaA==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/color-convert": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@@ -3039,6 +3067,18 @@
         "node": ">=10"
       }
     },
+    "node_modules/crc-32": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/crc-32/-/crc-32-1.2.2.tgz",
+      "integrity": "sha512-ROmzCKrTnOwybPcJApAA6WBWij23HVfGVNKqqrZpuyZOHqK2CwHSvpGuyt/UNNvaIjEd8X5IFGp4Mh+Ie1IHJQ==",
+      "license": "Apache-2.0",
+      "bin": {
+        "crc32": "bin/crc32.njs"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/cross-spawn": {
       "version": "7.0.6",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
@@ -3064,8 +3104,7 @@
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
       "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
-      "license": "MIT",
+      "license": "MIT"
-      "peer": true
     },
     "node_modules/daisyui": {
       "version": "5.5.8",
@@ -3521,7 +3560,6 @@
       "integrity": "sha512-t5aPOpmtJcZcz5UJyY2GbvpDlsK5E8JqRqoKtfiKE3cNh437KIqfJr3A3AKf5k64NPx6d0G3dno6XDY05PqPtw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.8.0",
         "@eslint-community/regexpp": "^4.12.1",
@@ -3695,7 +3733,6 @@
       "integrity": "sha512-whOE1HFo/qJDyX4SnXzP4N6zOWn79WhnCUY/iDR0mPfQZO8wcYE4JClzI2oZrhBnnMUCBCHZhO6VQyoBU95mZA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@rtsao/scc": "^1.1.0",
         "array-includes": "^3.1.9",
@@ -4187,6 +4224,15 @@
         "react": ">=16.8.0"
       }
     },
+    "node_modules/frac": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/frac/-/frac-1.1.2.tgz",
+      "integrity": "sha512-w/XBfkibaTl3YDqASwfDUqkna4Z2p9cFSr1aHDt0WoMTECnRfBOv2WArlZILlqgWlmdIlALXGpM2AOhEk5W3IA==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/function-bind": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
@@ -6174,7 +6220,6 @@
       "resolved": "https://registry.npmjs.org/react/-/react-19.1.0.tgz",
       "integrity": "sha512-FS+XFBNvn3GTAWq26joslQgWNoFu08F4kl0J4CgdNKADkdSGXQyTCnKteIAJy96Br6YbpEU1LSzV5dYtjMkMDg==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -6205,7 +6250,6 @@
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.1.0.tgz",
       "integrity": "sha512-Xs1hdnE+DyKgeHJeJznQmYMIBG3TKIHJJT95Q58nHLSrElKlGQqDTR2HQ9fx5CN/Gk6Vh/kupBTDLU11/nDk/g==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "scheduler": "^0.26.0"
       },
@@ -6763,6 +6807,18 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/ssf": {
+      "version": "0.11.2",
+      "resolved": "https://registry.npmjs.org/ssf/-/ssf-0.11.2.tgz",
+      "integrity": "sha512-+idbmIXoYET47hH+d7dfm2epdOMUDjqcB4648sTZ+t2JwoyBFL/insLfB/racrDmsKB3diwsDA696pZMieAC5g==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "frac": "~1.1.2"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/stable-hash": {
       "version": "0.0.5",
       "resolved": "https://registry.npmjs.org/stable-hash/-/stable-hash-0.0.5.tgz",
@@ -7092,7 +7148,6 @@
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -7260,7 +7315,6 @@
       "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
       "dev": true,
       "license": "Apache-2.0",
-      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -7526,6 +7580,24 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/wmf": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/wmf/-/wmf-1.0.2.tgz",
+      "integrity": "sha512-/p9K7bEh0Dj6WbXg4JG0xvLQmIadrner1bi45VMJTfnbVHsc7yIajZyoSoK60/dtVBs12Fm6WkUI5/3WAVsNMw==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
+    "node_modules/word": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/word/-/word-0.3.0.tgz",
+      "integrity": "sha512-OELeY0Q61OXpdUfTp+oweA/vtLVg5VDOXh+3he3PNzLGG/y0oylSOC1xRVj0+l4vQ3tj/bB1HVHv1ocXkQceFA==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/word-wrap": {
       "version": "1.2.5",
       "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.5.tgz",
@@ -7537,10 +7609,19 @@
       }
     },
     "node_modules/xlsx": {
-      "version": "0.20.3",
+      "version": "0.18.5",
-      "resolved": "https://cdn.sheetjs.com/xlsx-0.20.3/xlsx-0.20.3.tgz",
+      "resolved": "https://registry.npmjs.org/xlsx/-/xlsx-0.18.5.tgz",
-      "integrity": "sha512-oLDq3jw7AcLqKWH2AhCpVTZl8mf6X2YReP+Neh0SJUzV/BdZYjth94tG5toiMB1PPrYtxOCfaoUCkvtuH+3AJA==",
+      "integrity": "sha512-dmg3LCjBPHZnQp5/F/+nnTa+miPJxUXB6vtk42YjBBKayDNagxGEeIdWApkYPOf3Z3pm3k62Knjzp7lMeTEtFQ==",
       "license": "Apache-2.0",
+      "dependencies": {
+        "adler-32": "~1.3.0",
+        "cfb": "~1.2.1",
+        "codepage": "~1.15.0",
+        "crc-32": "~1.2.1",
+        "ssf": "~0.11.2",
+        "wmf": "~1.0.1",
+        "word": "~0.3.0"
+      },
       "bin": {
         "xlsx": "bin/xlsx.njs"
       },
@@ -7618,4 +7699,4 @@
       }
     }
   }
-}
+}

package.json

@@ -18,7 +18,7 @@
     "clsx": "^2.1.1",
     "formik": "^2.4.6",
     "moment": "^2.30.1",
-    "next": "15.5.9",
+    "next": "^15.5.9",
     "react": "19.1.0",
     "react-day-picker": "^9.11.1",
     "react-dom": "19.1.0",
@@ -29,7 +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",
+    "xlsx": "^0.18.5",
     "yup": "^1.7.0",
     "zustand": "^5.0.8"
   },
@@ -48,4 +48,4 @@
     "tailwindcss": "^4",
     "typescript": "^5"
   }
-}
+}

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/app/report/marketing/page.tsx

@@ -1,7 +1,11 @@
-import SaleReportTabs from '@/components/pages/report/sale/SaleReportTabs';
+import MarketingReportContent from '@/components/pages/report/MarketingReportContent';
 
-const SaleReport = () => {
+const MarketingReportPage = () => {
-  return <SaleReportTabs />;
+  return (
+    <section className='w-full p-4'>
+      <MarketingReportContent />
+    </section>
+  );
 };
 
-export default SaleReport;
+export default MarketingReportPage;

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/Tabs.tsx

@@ -21,6 +21,7 @@ export interface TabsProps
   className?:
     | string
     | {
+        container?: string;
         wrapper?: string;
         tab?: string;
         content?: string;
@@ -53,10 +54,14 @@ const Tabs = ({
     onTabChange?.(tabId);
   };
 
-  const { wrapper: wrapperClassName, tab: tabClassName } =
+  const {
-    typeof className === 'object'
+    container: containerClassName,
-      ? className
+    wrapper: wrapperClassName,
-      : { wrapper: className, tab: undefined };
+    tab: tabClassName,
+    content: contentClassName,
+  } = typeof className === 'object'
+    ? className
+    : { wrapper: className, tab: undefined };
 
   const getTabsClasses = () => {
     const variantClasses: Record<string, string> = {
@@ -104,7 +109,7 @@ const Tabs = ({
       {...props}
       className={cn(
         'w-full',
-        typeof className === 'string' ? className : undefined
+        typeof className === 'string' ? className : containerClassName
       )}
     >
       <div role='tablist' className={getTabsClasses()}>
@@ -121,7 +126,9 @@ const Tabs = ({
         ))}
       </div>
 
-      {activeContent && <div className='mt-4'>{activeContent}</div>}
+      {activeContent && (
+        <div className={cn('mt-4', contentClassName)}>{activeContent}</div>
+      )}
     </div>
   );
 };

src/components/dropdown/Dropdown.tsx

@@ -0,0 +1,114 @@
+import React, { ReactNode, useState, useRef } from 'react';
+
+import { cn } from '@/lib/helper';
+
+export interface DropdownProps {
+  trigger: ReactNode;
+  children: ReactNode;
+  className?: {
+    wrapper?: string;
+    trigger?: string;
+    content?: string;
+  };
+  align?: 'start' | 'center' | 'end';
+  direction?: 'top' | 'bottom' | 'left' | 'right';
+  hover?: boolean;
+  defaultOpen?: boolean;
+  open?: boolean;
+  close?: boolean;
+  controlled?: boolean;
+}
+
+const Dropdown = ({
+  trigger,
+  children,
+  className,
+  align,
+  direction,
+  hover,
+  defaultOpen = false,
+  open,
+  close,
+  controlled = false,
+}: DropdownProps) => {
+  const [isOpen, setIsOpen] = useState(defaultOpen);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  const toggleDropdown = () => {
+    if (!controlled) {
+      const newState = !isOpen;
+      setIsOpen(newState);
+    }
+  };
+
+  const getWrapperClasses = () => {
+    const openState = controlled ? open : isOpen;
+
+    return cn(
+      '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 ref={dropdownRef} className={getWrapperClasses()}>
+      <div
+        tabIndex={0}
+        role='button'
+        className={getTriggerClasses()}
+        onClick={toggleDropdown}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            toggleDropdown();
+          }
+        }}
+      >
+        {trigger}
+      </div>
+      {!close && (
+        <div tabIndex={-1} className={getContentClasses()}>
+          {children}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default Dropdown;

src/components/helper/RequireAuth.tsx

@@ -27,6 +27,9 @@ const RequireAuth = ({ children }: RequireAuthProps) => {
     SWRHttpKey
   >('/sso/userinfo', httpClientFetcher, {
     shouldRetryOnError: false,
+
+    // refresh every 13 minutes
+    refreshInterval: 13 * 60 * 1000,
   });
 
   useEffect(() => {

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/menu/MenuItem.tsx

@@ -8,6 +8,7 @@ interface MenuItemProps {
   href?: string;
   icon?: string;
   active?: boolean;
+  isLoading?: boolean;
   onClick?: () => void;
   className?: string;
 }
@@ -17,6 +18,7 @@ const MenuItem = ({
   href,
   icon,
   active = false,
+  isLoading = false,
   className,
   onClick,
 }: MenuItemProps) => {
@@ -50,17 +52,28 @@ const MenuItem = ({
 
   return (
     <li>
-      {href && (
+      {!isLoading && href && (
         <Link href={href} className={menuItemBaseClassName}>
           {menuItemContent}
         </Link>
       )}
 
-      {!href && (
+      {!isLoading && !href && (
         <button className={menuItemBaseClassName} onClick={onClick}>
           {menuItemContent}
         </button>
       )}
+
+      {isLoading && (
+        <button className={menuItemBaseClassName}>
+          <span
+            className={cn('loading loading-dots loading-md mx-auto', {
+              'text-gray-400': !active,
+              'text-black': active,
+            })}
+          />
+        </button>
+      )}
     </li>
   );
 };

src/components/pages/closing/ClosingDetail.tsx

@@ -6,15 +6,17 @@ import { Icon } from '@iconify/react';
 import Button from '@/components/Button';
 import Tabs from '@/components/Tabs';
 import ClosingGeneralInformationTable from '@/components/pages/closing/ClosingGeneralInformationTable';
+import ClosingSapronakTabContent from '@/components/pages/closing/ClosingSapronakTabContent';
+import ClosingProductionDataTabContent from '@/components/pages/closing/ClosingProductionDataTabContent';
 
 import {
   ClosingGeneralInformation,
   BaseClosingSales,
 } from '@/types/api/closing';
-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';
+import SalesReportTable from '@/components/pages/closing/sale/SalesReportTable';
 
 interface ClosingDetailProps {
   id: number;
@@ -59,12 +61,12 @@ const ClosingDetail: React.FC<ClosingDetailProps> = ({
       {
         id: 'dataProduksi',
         label: 'Data Produksi',
-        content: 'Data Produksi',
+        content: <ClosingProductionDataTabContent projectFlockId={id} />,
       },
       {
         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/ClosingProductionDataTabContent.tsx

@@ -0,0 +1,235 @@
+'use client';
+
+import useSWR from 'swr';
+import { ClosingApi } from '@/services/api/closing';
+import { isResponseSuccess } from '@/lib/api-helper';
+import { formatNumber } from '@/lib/helper';
+
+interface ClosingProductionDataTabContentProps {
+  projectFlockId: number;
+}
+
+const ClosingProductionDataTabContent = ({
+  projectFlockId,
+}: ClosingProductionDataTabContentProps) => {
+  const { data: productionData, isLoading } = useSWR(
+    `${ClosingApi.basePath}/${projectFlockId}/production-data`,
+    () => ClosingApi.getProductionData(projectFlockId)
+  );
+
+  if (isLoading) {
+    return (
+      <div className='w-full flex justify-center py-8'>
+        <span className='loading loading-spinner loading-lg' />
+      </div>
+    );
+  }
+
+  if (!productionData || !isResponseSuccess(productionData)) {
+    return (
+      <div className='w-full text-center py-8 text-gray-500'>
+        Gagal memuat data produksi.
+      </div>
+    );
+  }
+
+  const { purchase, sales, performance } = productionData.data;
+
+  // Helper for consistent row styling
+  const DataRow = ({
+    label,
+    value,
+    unit = '',
+    valueClassName = 'font-bold text-gray-800',
+    unitClassName = 'text-gray-500 w-12 text-right',
+  }: {
+    label: string;
+    value: string | number;
+    unit?: string;
+    valueClassName?: string;
+    unitClassName?: string;
+  }) => (
+    <div className='flex justify-between items-center py-1'>
+      <span className='text-gray-500 text-sm font-medium w-1/2'>{label}</span>
+      <div className='flex gap-2 w-1/2 justify-end items-center'>
+        <span className={valueClassName}>{value}</span>
+        {unit && <span className={unitClassName}>{unit}</span>}
+      </div>
+    </div>
+  );
+
+  return (
+    <div className='w-full rounded-xl p-8 shadow-sm'>
+      <h2 className='text-lg font-bold mb-8 text-gray-800'>Data Produksi</h2>
+
+      <div className='grid grid-cols-1 lg:grid-cols-2 gap-x-24 gap-y-12 relative'>
+        {/* Left Column */}
+        <div className='space-y-10'>
+          {/* Purchase Section */}
+          <section>
+            <h3 className='font-bold text-gray-700 mb-4 text-base'>
+              Pembelian
+            </h3>
+            <div className='space-y-1'>
+              <DataRow
+                label='Populasi Awal'
+                value={formatNumber(purchase.initial_population)}
+                unit='Ekor'
+              />
+              <DataRow
+                label='Claim Culling'
+                value={formatNumber(purchase.claim_culling)}
+                unit='Ekor'
+              />
+              <DataRow
+                label='Populasi Akhir'
+                value={formatNumber(purchase.final_population)}
+                unit='Ekor'
+              />
+              <DataRow
+                label='Pakan Masuk'
+                value={formatNumber(purchase.feed_in)}
+                unit='Kg'
+              />
+              <DataRow
+                label='Pakan Terpakai'
+                value={formatNumber(purchase.feed_used)}
+                unit='Kg'
+              />
+              <DataRow
+                label='Pakan Terpakai per Ekor'
+                value={formatNumber(purchase.feed_used_per_head)}
+                unit='Kg'
+              />
+            </div>
+          </section>
+
+          {/* Sales Section */}
+          <section>
+            <h3 className='font-bold text-gray-700 mb-4 text-base'>
+              Penjualan
+            </h3>
+            <div className='space-y-4'>
+              {/* Chicken Sales */}
+              <div className='space-y-1'>
+                <DataRow
+                  label='Penjualan (Ekor)'
+                  value={formatNumber(sales.chicken.sales_population)}
+                  unit='Ekor'
+                />
+                <DataRow
+                  label='Penjualan (Kg)'
+                  value={formatNumber(sales.chicken.sales_weight)}
+                  unit='Kg'
+                />
+                <DataRow
+                  label='Bobot Rata-Rata'
+                  value={formatNumber(sales.chicken.average_weight)}
+                  unit='Kg/Ekor'
+                />
+                <DataRow
+                  label='Harga Jual Rata-Rata'
+                  value={formatNumber(
+                    sales.chicken.chicken_average_selling_price
+                  )}
+                  unit='Rupiah'
+                />
+              </div>
+
+              {/* Egg Sales (if available) */}
+              {sales.egg && (
+                <>
+                  <div className='h-px bg-gray-100 my-2' />
+                  <div className='space-y-1'>
+                    <DataRow
+                      label='Telur (Butir)'
+                      value={formatNumber(sales.egg.egg_pieces)}
+                      unit='Butir'
+                    />
+                    <DataRow
+                      label='Telur (Kg)'
+                      value={formatNumber(sales.egg.egg_mass_kg)}
+                      unit='Kg'
+                    />
+                    <DataRow
+                      label='Berat Telur Rata-Rata'
+                      value={formatNumber(sales.egg.average_egg_weight_kg)}
+                      unit='Kg'
+                    />
+                    <DataRow
+                      label='Harga Jual Telur Rata-Rata'
+                      value={formatNumber(sales.egg.egg_average_selling_price)}
+                      unit='Rupiah'
+                    />
+                  </div>
+                </>
+              )}
+            </div>
+          </section>
+        </div>
+
+        {/* Divider Line (Absolute centered) */}
+        <div className='hidden lg:block absolute left-1/2 top-0 bottom-0 w-px bg-gray-200 -translate-x-1/2' />
+
+        {/* Right Column */}
+        <div className='space-y-10 flex flex-col h-full'>
+          {/* Performance Section */}
+          <section>
+            <h3 className='font-bold text-gray-700 mb-4 text-base'>
+              Performance
+            </h3>
+            <div className='space-y-1'>
+              <DataRow
+                label='Deplesi'
+                value={formatNumber(performance.depletion)}
+                unit='Ekor'
+              />
+              <DataRow
+                label='Umur'
+                value={formatNumber(performance.age_day)}
+                unit='Hari'
+              />
+              <DataRow
+                label='Mortalitas Std'
+                value={formatNumber(performance.mortality_std)}
+                unitClassName='hidden'
+              />
+              <DataRow
+                label='Mortalitas Act'
+                value={formatNumber(performance.mortality_act)}
+                unitClassName='hidden'
+              />
+              <DataRow
+                label='DEFF Mortalitas'
+                value={formatNumber(performance.deff_mortality)}
+                unitClassName='hidden'
+              />
+              <DataRow
+                label='FCR Std'
+                value={formatNumber(performance.fcr_std)}
+                unitClassName='hidden'
+              />
+              <DataRow
+                label='FCR Act'
+                value={formatNumber(performance.fcr_act)}
+                unitClassName='hidden'
+              />
+              <DataRow
+                label='DEFF FCR'
+                value={formatNumber(performance.deff_fcr)}
+                unitClassName='hidden'
+              />
+              <DataRow
+                label='AWG'
+                value={formatNumber(performance.awg)}
+                unit='Gr/Hari'
+              />
+            </div>
+          </section>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ClosingProductionDataTabContent;

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/DailyMarketingReportContent.tsx

@@ -0,0 +1,413 @@
+'use client';
+
+import { ChangeEventHandler, useState } from 'react';
+import { pdf } from '@react-pdf/renderer';
+import toast from 'react-hot-toast';
+
+import { Icon } from '@iconify/react';
+import Button from '@/components/Button';
+import Dropdown from '@/components/dropdown/Dropdown';
+import DateInput from '@/components/input/DateInput';
+import SelectInput, {
+  OptionType,
+  useSelect,
+} from '@/components/input/SelectInput';
+import Menu from '@/components/menu/Menu';
+import MenuItem from '@/components/menu/MenuItem';
+import DailyMarketingsTable from '@/components/pages/report/DailyMarketingsTable';
+import { useTableFilter } from '@/services/hooks/useTableFilter';
+import DailyMarketingReportPDF from '@/components/pages/report/DailyMarketingReportPDF';
+
+import { Area } from '@/types/api/master-data/area';
+import {
+  AreaApi,
+  CustomerApi,
+  LocationApi,
+  WarehouseApi,
+} from '@/services/api/master-data';
+import { Warehouse } from '@/types/api/master-data/warehouse';
+import { Customer } from '@/types/api/master-data/customer';
+import { MarketingReportApi } from '@/services/api/report/marketing-report';
+import { MARKETING_TYPE_OPTIONS } from '@/config/constant';
+import { httpClient } from '@/services/http/client';
+import { BaseApiResponse } from '@/types/api/api-general';
+import { DailyMarketingReport } from '@/types/api/report/marketing';
+import { isResponseError } from '@/lib/api-helper';
+
+const DailyMarketingReportContent = () => {
+  const {
+    state: tableFilterState,
+    updateFilter,
+    setPage,
+    setPageSize,
+    toQueryString: getTableFilterQueryString,
+    reset: resetFilter,
+  } = useTableFilter({
+    initial: {
+      search: '',
+      area_id: '',
+      location_id: '',
+      warehouse_id: '',
+      customer_id: '',
+      start_date: '',
+      end_date: '',
+      marketing_type: '',
+      filter_by: '',
+      sort_by: '',
+    },
+    paramMap: {
+      page: 'page',
+      pageSize: 'limit',
+      area_id: 'area_id',
+      location_id: 'location_id',
+      warehouse_id: 'warehouse_id',
+      customer_id: 'customer_id',
+      start_date: 'start_date',
+      end_date: 'end_date',
+      marketing_type: 'marketing_type',
+      filter_by: 'filter_by',
+      sort_by: 'sort_by',
+    },
+  });
+
+  const dailyMarketingsReportUrl = `${MarketingReportApi.basePath}${getTableFilterQueryString()}`;
+
+  const [isLoadingExportingToExcel, setIsLoadingExportingToExcel] =
+    useState(false);
+  const [isLoadingExportingToPdf, setIsLoadingExportingToPdf] = useState(false);
+
+  const [selectedArea, setSelectedArea] = useState<OptionType | null>(null);
+  const {
+    setInputValue: setAreaInputValue,
+    options: areaOptions,
+    isLoadingOptions: isLoadingAreaOptions,
+  } = useSelect<Area>(AreaApi.basePath, 'id', 'name');
+
+  const areaChangeHandler = (val: OptionType | OptionType[] | null) => {
+    setSelectedArea(val as OptionType);
+    updateFilter('area_id', val ? ((val as OptionType).value as string) : '');
+  };
+
+  const [selectedLocation, setSelectedLocation] = useState<OptionType | null>(
+    null
+  );
+  const {
+    setInputValue: setLocationInputValue,
+    options: locationOptions,
+    isLoadingOptions: isLoadingLocationOptions,
+  } = useSelect<Location>(LocationApi.basePath, 'id', 'name');
+
+  const locationChangeHandler = (val: OptionType | OptionType[] | null) => {
+    setSelectedLocation(val as OptionType);
+    updateFilter(
+      'location_id',
+      val ? ((val as OptionType).value as string) : ''
+    );
+  };
+
+  const [selectedWarehouse, setSelectedWarehouse] = useState<OptionType | null>(
+    null
+  );
+  const {
+    setInputValue: setWarehouseInputValue,
+    options: warehouseOptions,
+    isLoadingOptions: isLoadingWarehouseOptions,
+  } = useSelect<Warehouse>(WarehouseApi.basePath, 'id', 'name');
+
+  const warehouseChangeHandler = (val: OptionType | OptionType[] | null) => {
+    setSelectedWarehouse(val as OptionType);
+    updateFilter(
+      'warehouse_id',
+      val ? ((val as OptionType).value as string) : ''
+    );
+  };
+
+  const [selectedCustomer, setSelectedCustomer] = useState<OptionType | null>(
+    null
+  );
+  const {
+    setInputValue: setCustomerInputValue,
+    options: customerOptions,
+    isLoadingOptions: isLoadingCustomerOptions,
+  } = useSelect<Customer>(CustomerApi.basePath, 'id', 'name');
+
+  const customerChangeHandler = (val: OptionType | OptionType[] | null) => {
+    setSelectedCustomer(val as OptionType);
+    updateFilter(
+      'customer_id',
+      val ? ((val as OptionType).value as string) : ''
+    );
+  };
+
+  const startDateChangeHandler = (e: React.ChangeEvent<HTMLInputElement>) => {
+    updateFilter('start_date', e.target.value ? e.target.value : '');
+  };
+
+  const endDateChangeHandler = (e: React.ChangeEvent<HTMLInputElement>) => {
+    updateFilter('end_date', e.target.value ? e.target.value : '');
+  };
+
+  const [selectedMarketingType, setSelectedMarketingType] =
+    useState<OptionType | null>(null);
+  const marketingTypeChangeHandler = (
+    val: OptionType | OptionType[] | null
+  ) => {
+    setSelectedMarketingType(val as OptionType);
+    updateFilter(
+      'marketing_type',
+      val ? ((val as OptionType).value as string) : ''
+    );
+  };
+
+  const searchChangeHandler: ChangeEventHandler<HTMLInputElement> = (e) => {
+    updateFilter('search', e.target.value);
+  };
+
+  const filterByChangeHandler = (filterBy: string) => {
+    updateFilter('filter_by', filterBy);
+  };
+
+  const sortByChangeHandler = (sort: 'asc' | 'desc' | '') => {
+    updateFilter('sort_by', sort);
+  };
+
+  const exportToExcelHandler = async () => {
+    setIsLoadingExportingToExcel(true);
+
+    await MarketingReportApi.exportDailyMarketingToExcel(
+      getTableFilterQueryString()
+    );
+
+    setIsLoadingExportingToExcel(false);
+  };
+
+  const exportToPdfHandler = async () => {
+    setIsLoadingExportingToPdf(true);
+
+    const params = new URLSearchParams(getTableFilterQueryString());
+
+    params.set('limit', '9999999');
+
+    const queryString = `?${params.toString()}`;
+
+    try {
+      const dailyMarketingsReport = await httpClient<
+        BaseApiResponse<DailyMarketingReport>
+      >(`${MarketingReportApi.basePath}${queryString}`);
+
+      if (isResponseError(dailyMarketingsReport)) {
+        toast.error('Gagal melakukan export penjualan harian! Coba lagi.');
+        return;
+      }
+
+      const openPdf = async () => {
+        const dailyMarketingReportPdfBlob = await pdf(
+          <DailyMarketingReportPDF data={dailyMarketingsReport.data} />
+        ).toBlob();
+
+        const dailyMarketingReportPdfUrl = URL.createObjectURL(
+          dailyMarketingReportPdfBlob
+        );
+        window.open(dailyMarketingReportPdfUrl, '_blank');
+      };
+
+      const downloadPdf = async () => {
+        const blob = await pdf(
+          <DailyMarketingReportPDF data={dailyMarketingsReport.data} />
+        ).toBlob();
+        const url = URL.createObjectURL(blob);
+
+        const link = document.createElement('a');
+        link.href = url;
+        link.download = 'laporan-penjualan-harian.pdf';
+        link.click();
+
+        URL.revokeObjectURL(url);
+      };
+
+      await openPdf();
+    } catch (error) {
+      toast.error('Gagal melakukan export penjualan harian! Coba lagi.');
+    }
+
+    setIsLoadingExportingToPdf(false);
+  };
+
+  const handleReset = () => {
+    setSelectedArea(null);
+    setSelectedLocation(null);
+    setSelectedWarehouse(null);
+    setSelectedCustomer(null);
+    setSelectedMarketingType(null);
+    resetFilter();
+  };
+
+  return (
+    <div className='w-full border border-gray-200 p-4'>
+      <div>
+        <h2 className='text-xl font-bold text-center'>Penjualan Harian</h2>
+      </div>
+
+      {/* Filters */}
+      <div className='flex flex-col gap-4 mb-6'>
+        <div className='grid grid-cols-12 gap-4'>
+          <SelectInput
+            label='Area'
+            placeholder='Pilih Area'
+            options={areaOptions}
+            isLoading={isLoadingAreaOptions}
+            value={selectedArea}
+            onChange={areaChangeHandler}
+            onInputChange={setAreaInputValue}
+            isClearable
+            className={{
+              wrapper: 'col-span-12 sm:col-span-6 lg:col-span-4',
+            }}
+          />
+
+          <SelectInput
+            label='Lokasi'
+            placeholder='Pilih Lokasi'
+            options={locationOptions}
+            isLoading={isLoadingLocationOptions}
+            value={selectedLocation}
+            onChange={locationChangeHandler}
+            onInputChange={setLocationInputValue}
+            isClearable
+            className={{
+              wrapper: 'col-span-12 sm:col-span-6 lg:col-span-4',
+            }}
+          />
+
+          <SelectInput
+            label='Gudang'
+            placeholder='Pilih Gudang'
+            options={warehouseOptions}
+            isLoading={isLoadingWarehouseOptions}
+            value={selectedWarehouse}
+            onChange={warehouseChangeHandler}
+            onInputChange={setWarehouseInputValue}
+            isClearable
+            className={{
+              wrapper: 'col-span-12 sm:col-span-6 lg:col-span-4',
+            }}
+          />
+
+          <SelectInput
+            label='Customer'
+            placeholder='Pilih Customer'
+            options={customerOptions}
+            isLoading={isLoadingCustomerOptions}
+            value={selectedCustomer}
+            onChange={customerChangeHandler}
+            onInputChange={setCustomerInputValue}
+            isClearable
+            className={{
+              wrapper: 'col-span-12 sm:col-span-6 lg:col-span-4',
+            }}
+          />
+
+          <DateInput
+            name='startDate'
+            label='Tanggal Awal'
+            placeholder='Tanggal Realisasi'
+            value={tableFilterState.start_date}
+            onChange={startDateChangeHandler}
+            className={{
+              wrapper: 'col-span-12 sm:col-span-6 lg:col-span-4',
+            }}
+          />
+
+          <DateInput
+            name='endDate'
+            label='Tanggal Akhir'
+            placeholder='Tanggal Realisasi'
+            value={tableFilterState.end_date}
+            onChange={endDateChangeHandler}
+            className={{
+              wrapper: 'col-span-12 sm:col-span-6 lg:col-span-4',
+            }}
+          />
+        </div>
+
+        <div className='grid grid-cols-12 gap-4'>
+          <SelectInput
+            label='Tipe Marketing'
+            placeholder='Pilih Tipe Marketing'
+            options={MARKETING_TYPE_OPTIONS}
+            value={selectedMarketingType}
+            onChange={marketingTypeChangeHandler}
+            isClearable
+            className={{
+              wrapper: 'col-span-12 sm:col-span-6 lg:col-span-4',
+            }}
+          />
+
+          <div className='col-span-12 sm:col-span-6 lg:col-span-8 flex flex-wrap sm:justify-end items-end gap-2'>
+            <Button
+              color='primary'
+              // onClick={handleSearch}
+              className='flex-1 sm:flex-none'
+            >
+              <Icon icon='heroicons:magnifying-glass' width={20} height={20} />
+              Cari
+            </Button>
+
+            <Button
+              color='warning'
+              onClick={handleReset}
+              className='flex-1 sm:flex-none'
+            >
+              <Icon icon='heroicons-outline:refresh' width={20} height={20} />
+              Reset
+            </Button>
+
+            <Dropdown
+              align='end'
+              direction='bottom'
+              trigger={
+                <Button>
+                  Export{' '}
+                  <Icon
+                    icon='heroicons-outline:download'
+                    width={20}
+                    height={20}
+                  />
+                </Button>
+              }
+            >
+              <Menu>
+                <MenuItem
+                  title='Export to Excel'
+                  icon='icon-park-outline:excel'
+                  isLoading={isLoadingExportingToExcel}
+                  onClick={exportToExcelHandler}
+                  className='text-nowrap'
+                />
+                <MenuItem
+                  title='Export to PDF'
+                  icon='icon-park-outline:file-pdf-one'
+                  onClick={exportToPdfHandler}
+                  className='text-nowrap'
+                />
+              </Menu>
+            </Dropdown>
+          </div>
+        </div>
+      </div>
+
+      <DailyMarketingsTable
+        dailyMarketingsReportUrl={dailyMarketingsReportUrl}
+        onSetPage={setPage}
+        pageSize={tableFilterState.pageSize}
+        onSetPageSize={setPageSize}
+        searchValue={tableFilterState.search}
+        onSearchChange={searchChangeHandler}
+        onFilterByChange={filterByChangeHandler}
+        onSortByChange={sortByChangeHandler}
+      />
+    </div>
+  );
+};
+
+export default DailyMarketingReportContent;

src/components/pages/report/DailyMarketingReportPDF.tsx

@@ -0,0 +1,550 @@
+'use client';
+
+import {
+  Document,
+  Image,
+  Page,
+  StyleSheet,
+  Text,
+  View,
+} from '@react-pdf/renderer';
+
+import { DailyMarketingReport } from '@/types/api/report/marketing';
+import { formatCurrency, formatDate, formatNumber } from '@/lib/helper';
+
+interface DailyMarketingReportPDFProps {
+  data?: DailyMarketingReport;
+}
+
+const DailyMarketingReportPDFStyle = StyleSheet.create({
+  page: {
+    paddingTop: 24,
+    paddingBottom: 64,
+    paddingHorizontal: 16, // Reduce padding to fit more columns
+    orientation: 'landscape',
+  },
+
+  companyInfoHeader: {
+    width: '100%',
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'flex-start',
+    marginBottom: 8,
+  },
+  companyLogo: {
+    width: 64,
+    height: 'auto',
+  },
+  companyInfoHeaderDate: {
+    paddingTop: 8,
+    fontSize: 10,
+  },
+  companyName: {
+    fontSize: 12,
+    fontWeight: 'bold',
+    marginBottom: 4,
+  },
+  companyAddress: {
+    fontSize: 8,
+    maxWidth: 400,
+    marginBottom: 10,
+  },
+
+  title: {
+    marginTop: 16,
+    fontSize: 14,
+    lineHeight: '150%',
+    textAlign: 'center',
+    fontFamily: 'Times-Roman',
+    fontWeight: 'bold',
+  },
+
+  footer: {
+    width: '100%',
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingHorizontal: 16,
+
+    position: 'absolute',
+    fontSize: 8,
+    bottom: 30,
+    left: 0,
+    right: 0,
+    textAlign: 'center',
+    color: 'grey',
+  },
+
+  // Table Styles
+  table: {
+    width: '100%',
+    marginTop: 16,
+    borderWidth: 1,
+    borderColor: '#000000',
+    borderBottomWidth: 0,
+    fontSize: 7, // Smaller font for report
+  },
+  tableRow: {
+    flexDirection: 'row',
+    borderBottomWidth: 1,
+    borderBottomColor: '#000000',
+    alignItems: 'center',
+    minHeight: 20,
+  },
+  tableHeader: {
+    backgroundColor: '#f0f0f0',
+    fontWeight: 'bold',
+  },
+
+  // Columns definition (Total 100%)
+  colNo: {
+    width: '3%',
+    padding: 2,
+    textAlign: 'center',
+    borderRightWidth: 1,
+    borderRightColor: '#000000',
+  },
+  colSoDate: {
+    width: '6%',
+    padding: 2,
+    textAlign: 'left',
+    borderRightWidth: 1,
+    borderRightColor: '#000000',
+  },
+  colDoDate: {
+    width: '6%',
+    padding: 2,
+    textAlign: 'left',
+    borderRightWidth: 1,
+    borderRightColor: '#000000',
+  },
+  colAging: {
+    width: '3%',
+    padding: 2,
+    textAlign: 'center',
+    borderRightWidth: 1,
+    borderRightColor: '#000000',
+  },
+  colWarehouse: {
+    width: '7%',
+    padding: 2,
+    textAlign: 'left',
+    borderRightWidth: 1,
+    borderRightColor: '#000000',
+  },
+  colCustomer: {
+    width: '9%',
+    padding: 2,
+    textAlign: 'left',
+    borderRightWidth: 1,
+    borderRightColor: '#000000',
+  }, // Reduced slightly
+  colSales: {
+    width: '6%',
+    padding: 2,
+    textAlign: 'left',
+    borderRightWidth: 1,
+    borderRightColor: '#000000',
+  },
+  colProduct: {
+    width: '8%',
+    padding: 2,
+    textAlign: 'left',
+    borderRightWidth: 1,
+    borderRightColor: '#000000',
+  }, // Reduced slightly
+  colDoNumber: {
+    width: '7%',
+    padding: 2,
+    textAlign: 'left',
+    borderRightWidth: 1,
+    borderRightColor: '#000000',
+  },
+  colVehicle: {
+    width: '5%',
+    padding: 2,
+    textAlign: 'left',
+    borderRightWidth: 1,
+    borderRightColor: '#000000',
+  },
+  colMarketingType: {
+    width: '5%',
+    padding: 2,
+    textAlign: 'left',
+    borderRightWidth: 1,
+    borderRightColor: '#000000',
+  },
+  colQty: {
+    width: '4%',
+    padding: 2,
+    textAlign: 'right',
+    borderRightWidth: 1,
+    borderRightColor: '#000000',
+  },
+  colAvgWeight: {
+    width: '4%',
+    padding: 2,
+    textAlign: 'right',
+    borderRightWidth: 1,
+    borderRightColor: '#000000',
+  },
+  colTotalWeight: {
+    width: '5%',
+    padding: 2,
+    textAlign: 'right',
+    borderRightWidth: 1,
+    borderRightColor: '#000000',
+  },
+  colSalesPrice: {
+    width: '5%',
+    padding: 2,
+    textAlign: 'right',
+    borderRightWidth: 1,
+    borderRightColor: '#000000',
+  },
+  colHppPrice: {
+    width: '5%',
+    padding: 2,
+    textAlign: 'right',
+    borderRightWidth: 1,
+    borderRightColor: '#000000',
+  },
+  colSalesAmount: {
+    width: '6%',
+    padding: 2,
+    textAlign: 'right',
+    borderRightWidth: 1,
+    borderRightColor: '#000000',
+  },
+  colHppAmount: { width: '6%', padding: 2, textAlign: 'right' }, // Last column
+
+  // Text inside columns
+  cellText: {
+    fontSize: 6,
+  },
+  headerText: {
+    fontSize: 7,
+    fontWeight: 'bold',
+    textAlign: 'center',
+  },
+
+  // Utils
+  doubleDivider: {
+    width: '100%',
+    height: 6,
+    borderTop: '2px solid black',
+    borderBottom: '2px solid black',
+  },
+
+  // Summary
+  summaryContainer: {
+    marginTop: 12,
+    flexDirection: 'row',
+    justifyContent: 'flex-end',
+    width: '100%',
+  },
+  summaryTable: {
+    width: '30%',
+    borderWidth: 1,
+    borderColor: '#000000',
+    fontSize: 8,
+  },
+  summaryRow: {
+    flexDirection: 'row',
+    padding: 2,
+    borderBottomWidth: 1,
+    borderBottomColor: '#eee',
+  },
+  summaryLabel: {
+    width: '50%',
+    fontWeight: 'bold',
+  },
+  summaryValue: {
+    width: '50%',
+    textAlign: 'right',
+  },
+});
+
+const DailyMarketingReportPDF = ({ data }: DailyMarketingReportPDFProps) => {
+  const rows = data?.rows || [];
+  const summary = data?.summary;
+
+  return (
+    <Document>
+      <Page
+        style={DailyMarketingReportPDFStyle.page}
+        orientation='landscape'
+        size='A4'
+      >
+        <View>
+          <View style={DailyMarketingReportPDFStyle.companyInfoHeader}>
+            <Image
+              style={DailyMarketingReportPDFStyle.companyLogo}
+              src='/assets/img/lti-logo.png'
+            />
+
+            <Text style={DailyMarketingReportPDFStyle.companyInfoHeaderDate}>
+              {formatDate(Date.now(), 'DD MMMM YYYY')}
+            </Text>
+          </View>
+
+          <View>
+            <Text style={DailyMarketingReportPDFStyle.companyName}>
+              PT LUMBUNG TELUR INDONESIA
+            </Text>
+            <Text style={DailyMarketingReportPDFStyle.companyAddress}>
+              SOHO Building Lt.3 (Paris Van Java), Jalan Karang Tinggal, Kel.
+              Cipedes, Kec. Sukajadi, Kota Bandung 40162
+            </Text>
+
+            <View style={DailyMarketingReportPDFStyle.doubleDivider} />
+          </View>
+        </View>
+
+        <Text style={DailyMarketingReportPDFStyle.title}>
+          Laporan Penjualan Harian
+        </Text>
+
+        {/* Data Table */}
+        <View style={DailyMarketingReportPDFStyle.table}>
+          {/* Header */}
+          <View
+            style={[
+              DailyMarketingReportPDFStyle.tableRow,
+              DailyMarketingReportPDFStyle.tableHeader,
+            ]}
+          >
+            <View style={DailyMarketingReportPDFStyle.colNo}>
+              <Text style={DailyMarketingReportPDFStyle.headerText}>No</Text>
+            </View>
+            <View style={DailyMarketingReportPDFStyle.colSoDate}>
+              <Text style={DailyMarketingReportPDFStyle.headerText}>
+                Tgl SO
+              </Text>
+            </View>
+            <View style={DailyMarketingReportPDFStyle.colDoDate}>
+              <Text style={DailyMarketingReportPDFStyle.headerText}>
+                Tgl DO
+              </Text>
+            </View>
+            <View style={DailyMarketingReportPDFStyle.colAging}>
+              <Text style={DailyMarketingReportPDFStyle.headerText}>Aging</Text>
+            </View>
+            <View style={DailyMarketingReportPDFStyle.colWarehouse}>
+              <Text style={DailyMarketingReportPDFStyle.headerText}>
+                Gudang
+              </Text>
+            </View>
+            <View style={DailyMarketingReportPDFStyle.colCustomer}>
+              <Text style={DailyMarketingReportPDFStyle.headerText}>
+                Pelanggan
+              </Text>
+            </View>
+            <View style={DailyMarketingReportPDFStyle.colSales}>
+              <Text style={DailyMarketingReportPDFStyle.headerText}>Sales</Text>
+            </View>
+            <View style={DailyMarketingReportPDFStyle.colProduct}>
+              <Text style={DailyMarketingReportPDFStyle.headerText}>
+                Produk
+              </Text>
+            </View>
+            <View style={DailyMarketingReportPDFStyle.colDoNumber}>
+              <Text style={DailyMarketingReportPDFStyle.headerText}>No DO</Text>
+            </View>
+            <View style={DailyMarketingReportPDFStyle.colVehicle}>
+              <Text style={DailyMarketingReportPDFStyle.headerText}>
+                Plat No
+              </Text>
+            </View>
+            <View style={DailyMarketingReportPDFStyle.colMarketingType}>
+              <Text style={DailyMarketingReportPDFStyle.headerText}>Tipe</Text>
+            </View>
+            <View style={DailyMarketingReportPDFStyle.colQty}>
+              <Text style={DailyMarketingReportPDFStyle.headerText}>Qty</Text>
+            </View>
+            <View style={DailyMarketingReportPDFStyle.colAvgWeight}>
+              <Text style={DailyMarketingReportPDFStyle.headerText}>
+                Rerata
+              </Text>
+            </View>
+            <View style={DailyMarketingReportPDFStyle.colTotalWeight}>
+              <Text style={DailyMarketingReportPDFStyle.headerText}>Berat</Text>
+            </View>
+            <View style={DailyMarketingReportPDFStyle.colSalesPrice}>
+              <Text style={DailyMarketingReportPDFStyle.headerText}>
+                Hrg Jual
+              </Text>
+            </View>
+            <View style={DailyMarketingReportPDFStyle.colHppPrice}>
+              <Text style={DailyMarketingReportPDFStyle.headerText}>
+                HPP/kg
+              </Text>
+            </View>
+            <View style={DailyMarketingReportPDFStyle.colSalesAmount}>
+              <Text style={DailyMarketingReportPDFStyle.headerText}>
+                Total Jual
+              </Text>
+            </View>
+            <View style={DailyMarketingReportPDFStyle.colHppAmount}>
+              <Text style={DailyMarketingReportPDFStyle.headerText}>
+                Total HPP
+              </Text>
+            </View>
+          </View>
+
+          {/* Rows */}
+          {rows.map((row, index) => (
+            <View style={DailyMarketingReportPDFStyle.tableRow} key={index}>
+              <View style={DailyMarketingReportPDFStyle.colNo}>
+                <Text style={DailyMarketingReportPDFStyle.cellText}>
+                  {index + 1}
+                </Text>
+              </View>
+              <View style={DailyMarketingReportPDFStyle.colSoDate}>
+                <Text style={DailyMarketingReportPDFStyle.cellText}>
+                  {formatDate(row.so_date, 'DD/MM/YYYY')}
+                </Text>
+              </View>
+              <View style={DailyMarketingReportPDFStyle.colDoDate}>
+                <Text style={DailyMarketingReportPDFStyle.cellText}>
+                  {formatDate(row.do_date, 'DD/MM/YYYY')}
+                </Text>
+              </View>
+              <View style={DailyMarketingReportPDFStyle.colAging}>
+                <Text style={DailyMarketingReportPDFStyle.cellText}>
+                  {row.aging_days}
+                </Text>
+              </View>
+              <View style={DailyMarketingReportPDFStyle.colWarehouse}>
+                <Text style={DailyMarketingReportPDFStyle.cellText}>
+                  {row.warehouse?.name}
+                </Text>
+              </View>
+              <View style={DailyMarketingReportPDFStyle.colCustomer}>
+                <Text style={DailyMarketingReportPDFStyle.cellText}>
+                  {row.customer?.name}
+                </Text>
+              </View>
+              <View style={DailyMarketingReportPDFStyle.colSales}>
+                <Text style={DailyMarketingReportPDFStyle.cellText}>
+                  {row.sales}
+                </Text>
+              </View>
+              <View style={DailyMarketingReportPDFStyle.colProduct}>
+                <Text style={DailyMarketingReportPDFStyle.cellText}>
+                  {row.product?.name}
+                </Text>
+              </View>
+              <View style={DailyMarketingReportPDFStyle.colDoNumber}>
+                <Text style={DailyMarketingReportPDFStyle.cellText}>
+                  {row.do_number}
+                </Text>
+              </View>
+              <View style={DailyMarketingReportPDFStyle.colVehicle}>
+                <Text style={DailyMarketingReportPDFStyle.cellText}>
+                  {row.vehicle_number}
+                </Text>
+              </View>
+              <View style={DailyMarketingReportPDFStyle.colMarketingType}>
+                <Text style={DailyMarketingReportPDFStyle.cellText}>
+                  {row.marketing_type}
+                </Text>
+              </View>
+              <View style={DailyMarketingReportPDFStyle.colQty}>
+                <Text style={DailyMarketingReportPDFStyle.cellText}>
+                  {formatNumber(row.qty)}
+                </Text>
+              </View>
+              <View style={DailyMarketingReportPDFStyle.colAvgWeight}>
+                <Text style={DailyMarketingReportPDFStyle.cellText}>
+                  {formatNumber(row.average_weight_kg)}
+                </Text>
+              </View>
+              <View style={DailyMarketingReportPDFStyle.colTotalWeight}>
+                <Text style={DailyMarketingReportPDFStyle.cellText}>
+                  {formatNumber(row.total_weight_kg)}
+                </Text>
+              </View>
+              <View style={DailyMarketingReportPDFStyle.colSalesPrice}>
+                <Text style={DailyMarketingReportPDFStyle.cellText}>
+                  {formatCurrency(row.sales_price_per_kg)}
+                </Text>
+              </View>
+              <View style={DailyMarketingReportPDFStyle.colHppPrice}>
+                <Text style={DailyMarketingReportPDFStyle.cellText}>
+                  {formatCurrency(row.hpp_price_per_kg)}
+                </Text>
+              </View>
+              <View style={DailyMarketingReportPDFStyle.colSalesAmount}>
+                <Text style={DailyMarketingReportPDFStyle.cellText}>
+                  {formatCurrency(row.sales_amount)}
+                </Text>
+              </View>
+              <View style={DailyMarketingReportPDFStyle.colHppAmount}>
+                <Text style={DailyMarketingReportPDFStyle.cellText}>
+                  {formatCurrency(row.hpp_amount)}
+                </Text>
+              </View>
+            </View>
+          ))}
+        </View>
+
+        {/* Summary */}
+        <View style={DailyMarketingReportPDFStyle.summaryContainer}>
+          <View style={DailyMarketingReportPDFStyle.summaryTable}>
+            <View style={DailyMarketingReportPDFStyle.summaryRow}>
+              <Text style={DailyMarketingReportPDFStyle.summaryLabel}>
+                Total Qty:
+              </Text>
+              <Text style={DailyMarketingReportPDFStyle.summaryValue}>
+                {formatNumber(summary?.total_qty ?? 0)}
+              </Text>
+            </View>
+            <View style={DailyMarketingReportPDFStyle.summaryRow}>
+              <Text style={DailyMarketingReportPDFStyle.summaryLabel}>
+                Total Berat (kg):
+              </Text>
+              <Text style={DailyMarketingReportPDFStyle.summaryValue}>
+                {formatNumber(summary?.total_weight_kg ?? 0)}
+              </Text>
+            </View>
+            <View style={DailyMarketingReportPDFStyle.summaryRow}>
+              <Text style={DailyMarketingReportPDFStyle.summaryLabel}>
+                Total Penjualan:
+              </Text>
+              <Text style={DailyMarketingReportPDFStyle.summaryValue}>
+                {formatCurrency(summary?.total_sales_amount ?? 0)}
+              </Text>
+            </View>
+            <View
+              style={[
+                DailyMarketingReportPDFStyle.summaryRow,
+                { borderBottomWidth: 0 },
+              ]}
+            >
+              <Text style={DailyMarketingReportPDFStyle.summaryLabel}>
+                Total HPP:
+              </Text>
+              <Text style={DailyMarketingReportPDFStyle.summaryValue}>
+                {formatCurrency(summary?.total_hpp_amount ?? 0)}
+              </Text>
+            </View>
+          </View>
+        </View>
+
+        <View style={DailyMarketingReportPDFStyle.footer} fixed>
+          <Text
+            render={({ pageNumber, totalPages }) =>
+              `${pageNumber} / ${totalPages}`
+            }
+            fixed
+          />
+        </View>
+      </Page>
+    </Document>
+  );
+};
+
+export default DailyMarketingReportPDF;

src/components/pages/report/DailyMarketingsTable.tsx

@@ -0,0 +1,255 @@
+'use client';
+
+import { ChangeEventHandler, useEffect, useState } from 'react';
+import useSWR from 'swr';
+import { ColumnDef, SortingState } from '@tanstack/react-table';
+
+import { Icon } from '@iconify/react';
+import Table from '@/components/Table';
+import DebouncedTextInput from '@/components/input/DebouncedTextInput';
+import Card from '@/components/Card';
+import Collapse from '@/components/Collapse';
+
+import { cn, formatCurrency, formatDate, formatNumber } from '@/lib/helper';
+import { isResponseSuccess } from '@/lib/api-helper';
+import { DailyMarketingRow } from '@/types/api/report/marketing';
+import { MarketingReportApi } from '@/services/api/report/marketing-report';
+
+interface DailyMarketingsTableProps {
+  dailyMarketingsReportUrl: string;
+  onSetPage: (page: number) => void;
+  pageSize: number;
+  onSetPageSize: (pageSize: number) => void;
+  searchValue: string;
+  onSearchChange: ChangeEventHandler<HTMLInputElement>;
+  onFilterByChange: (filterBy: string) => void;
+  onSortByChange: (sort: 'asc' | 'desc' | '') => void;
+}
+
+const DailyMarketingsTable = ({
+  dailyMarketingsReportUrl,
+  onSetPage,
+  pageSize,
+  onSetPageSize,
+  searchValue,
+  onSearchChange,
+  onFilterByChange,
+  onSortByChange,
+}: DailyMarketingsTableProps) => {
+  const { data: dailyMarketings, isLoading: isLoadingDailyMarketings } = useSWR(
+    dailyMarketingsReportUrl,
+    MarketingReportApi.getAllDailyMarketingFetcher,
+    {
+      keepPreviousData: true,
+    }
+  );
+
+  const [open, setOpen] = useState(true);
+
+  const [sorting, setSorting] = useState<SortingState>([]);
+
+  const dailyMarketingColumns: ColumnDef<DailyMarketingRow>[] = [
+    {
+      header: 'No',
+      cell: (props) => props.row.index + 1,
+    },
+    {
+      accessorKey: 'so_date',
+      header: 'Tanggal Jual',
+      cell: (props) => formatDate(props.row.original.so_date, 'DD-MMM-YYYY'),
+      footer: 'Total',
+    },
+    {
+      accessorKey: 'do_date',
+      header: 'Tanggal DO',
+      cell: (props) => formatDate(props.row.original.do_date, 'DD-MMM-YYYY'),
+    },
+    {
+      accessorKey: 'aging_days',
+      header: 'Aging',
+      cell: (props) => `${props.row.original.aging_days} hari`,
+    },
+    {
+      accessorKey: 'warehouse.name',
+      header: 'Gudang',
+    },
+    {
+      accessorKey: 'customer.name',
+      header: 'Pelanggan',
+    },
+    {
+      accessorKey: 'do_number',
+      header: 'No. DO',
+    },
+    {
+      accessorKey: 'sales',
+      header: 'Sales/Marketing',
+    },
+    {
+      accessorKey: 'vehicle_number',
+      header: 'No. Polisi',
+      cell: (props) => (
+        <span className='text-nowrap'>{props.row.original.vehicle_number}</span>
+      ),
+    },
+    {
+      accessorKey: 'marketing_type',
+      header: 'Marketing Type',
+    },
+    {
+      accessorKey: 'product.name',
+      header: 'Produk',
+    },
+    {
+      accessorKey: 'qty',
+      header: 'Kuantitas',
+      cell: (props) => formatNumber(props.row.original.qty),
+      footer: () => {
+        const totalQty = isResponseSuccess(dailyMarketings)
+          ? dailyMarketings.data.summary.total_qty
+          : 0;
+
+        return formatNumber(totalQty);
+      },
+    },
+    {
+      accessorKey: 'average_weight_kg',
+      header: 'Bobot Rata-Rata (Kg)',
+      cell: (props) => formatNumber(props.row.original.average_weight_kg),
+    },
+    {
+      accessorKey: 'total_weight_kg',
+      header: 'Bobot Total (Kg)',
+      cell: (props) => formatNumber(props.row.original.total_weight_kg),
+      footer: () => {
+        const totalWeightKg = isResponseSuccess(dailyMarketings)
+          ? dailyMarketings.data.summary.total_weight_kg
+          : 0;
+
+        return formatNumber(totalWeightKg);
+      },
+    },
+    {
+      accessorKey: 'sales_price_per_kg',
+      header: 'Harga Jual (Rp)',
+      cell: (props) => formatCurrency(props.row.original.sales_price_per_kg),
+    },
+    {
+      accessorKey: 'hpp_price_per_kg',
+      header: 'HPP (Rp)',
+      cell: (props) => formatCurrency(props.row.original.hpp_price_per_kg),
+    },
+    {
+      accessorKey: 'sales_amount',
+      header: 'Total (Rp)',
+      cell: (props) => formatCurrency(props.row.original.sales_amount),
+      footer: () => {
+        const totalSalesAmount = isResponseSuccess(dailyMarketings)
+          ? dailyMarketings.data.summary.total_sales_amount
+          : 0;
+
+        return formatCurrency(totalSalesAmount);
+      },
+    },
+  ];
+
+  useEffect(() => {
+    if (sorting.length === 1) {
+      onFilterByChange(sorting[0].id);
+      onSortByChange(sorting[0].desc ? 'desc' : 'asc');
+    } else {
+      onFilterByChange('');
+      onSortByChange('');
+    }
+  }, [sorting]);
+
+  useEffect(() => {
+    if (!open) {
+      setOpen(
+        isResponseSuccess(dailyMarketings)
+          ? dailyMarketings.data.rows.length > 0
+          : false
+      );
+    }
+  }, [dailyMarketings, isResponseSuccess]);
+
+  return (
+    <Card
+      className={{
+        wrapper: 'w-full',
+        body: 'p-4 shadow',
+      }}
+    >
+      <Collapse
+        open={open}
+        onOpenChange={setOpen}
+        title={
+          <div className='card-actions p-4 justify-between items-center w-full'>
+            <div className='card-title'>Penjualan Harian</div>
+
+            <Icon
+              icon='material-symbols:keyboard-arrow-down'
+              width={24}
+              height={24}
+              className={cn('text-primary transition-transform', {
+                '-rotate-180': open,
+              })}
+            />
+          </div>
+        }
+        className='w-full!'
+        titleClassName='w-full p-0!'
+      >
+        <div className='w-full p-0'>
+          <div className='flex flex-col gap-2 mb-4'>
+            <div className='w-full flex flex-col sm:flex-row justify-start items-end sm:items-center gap-4'>
+              <DebouncedTextInput
+                name='search'
+                placeholder='Cari Penjualan Harian'
+                value={searchValue}
+                onChange={onSearchChange}
+                className={{ wrapper: 'sm:max-w-3xs' }}
+              />
+            </div>
+          </div>
+
+          <Table<DailyMarketingRow>
+            data={
+              isResponseSuccess(dailyMarketings)
+                ? dailyMarketings?.data.rows
+                : []
+            }
+            columns={dailyMarketingColumns}
+            pageSize={pageSize}
+            onPageSizeChange={onSetPageSize}
+            rowOptions={[10, 20, 50, 100]}
+            page={
+              isResponseSuccess(dailyMarketings)
+                ? dailyMarketings?.meta?.page
+                : 0
+            }
+            totalItems={
+              isResponseSuccess(dailyMarketings)
+                ? dailyMarketings?.meta?.total_results
+                : 0
+            }
+            onPageChange={onSetPage}
+            isLoading={isLoadingDailyMarketings}
+            sorting={sorting}
+            setSorting={setSorting}
+            renderFooter={true}
+            className={{
+              containerClassName: cn({
+                'w-full mb-20':
+                  isResponseSuccess(dailyMarketings) &&
+                  dailyMarketings?.data?.rows.length === 0,
+              }),
+            }}
+          />
+        </div>
+      </Collapse>
+    </Card>
+  );
+};
+
+export default DailyMarketingsTable;

src/components/pages/report/MarketingReportContent.tsx

@@ -0,0 +1,44 @@
+'use client';
+
+import { JSX, useState } from 'react';
+
+import Tabs from '@/components/Tabs';
+import DailyMarketingReportContent from '@/components/pages/report/DailyMarketingReportContent';
+
+type MarketingReportTabType =
+  | 'daily'
+  | 'transaction'
+  | 'hpp-comparison'
+  | 'daily-hpp';
+
+const marketingReportTabs: {
+  id: MarketingReportTabType;
+  label: string;
+  content: JSX.Element;
+}[] = [
+  {
+    id: 'daily',
+    label: 'Penjualan Harian',
+    content: <DailyMarketingReportContent />,
+  },
+];
+
+const MarketingReportContent = () => {
+  const [activeTab, setActiveTab] = useState<string>('daily');
+
+  return (
+    <section className='w-full max-w-7xl pb-16'>
+      <Tabs
+        activeTabId={activeTab}
+        onTabChange={setActiveTab}
+        tabs={marketingReportTabs}
+        variant='lifted'
+        className={{
+          content: '-m-px pl-px',
+        }}
+      />
+    </section>
+  );
+};
+
+export default MarketingReportContent;

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

@@ -50,6 +50,14 @@ export const MAIN_DRAWER_LINKS: SidebarMenuItem[] = [
     link: '/report',
     icon: 'mdi:chart-box-outline',
     submenu: [
+      {
+        text: 'Logistik & Persediaan',
+        link: '/report/logistic-stock',
+      },
+      {
+        text: 'Biaya Operasional',
+        link: '/report/expense',
+      },
       {
         text: 'Penjualan',
         link: '/report/marketing',
@@ -62,7 +70,7 @@ export const MAIN_DRAWER_LINKS: SidebarMenuItem[] = [
     icon: 'heroicons-outline:folder',
     submenu: [
       {
-        text: 'Produk',
+        text: 'Stok Produk',
         link: '/inventory/product',
       },
       {
@@ -262,3 +270,29 @@ export const ACCEPTED_FILE_TYPE = {
     'image/*': [],
   },
 };
+
+export const FILTER_TYPE_OPTIONS = [
+  {
+    label: 'Tanggal Realisasi',
+    value: 'REALIZATION_DATE',
+  },
+  {
+    label: 'Tanggal DO',
+    value: 'DO_DATE',
+  },
+];
+
+export const MARKETING_TYPE_OPTIONS = [
+  {
+    label: 'Ayam',
+    value: 'ayam',
+  },
+  {
+    label: 'Telur',
+    value: 'telur',
+  },
+  {
+    label: 'Trading',
+    value: 'trading',
+  },
+];

src/dummy/closing.dummy.ts

@@ -83,6 +83,7 @@ import {
   ClosingIncomingSapronak,
   ClosingOutgoingSapronak,
   ClosingOverhead,
+  ClosingProductionData,
   ClosingSapronakCalculation,
 } from '@/types/api/closing';
 import { CreatedUser, BaseApiResponse } from '@/types/api/api-general';
@@ -1134,3 +1135,41 @@ export const dummyGetOverhead = async (
     data: dummyOverhead,
   };
 };
+
+export const dummyClosingProductionData: ClosingProductionData = {
+  purchase: {
+    initial_population: 12000,
+    claim_culling: 150,
+    final_population: 11850,
+    feed_in: 24000,
+    feed_used: 22500,
+    feed_used_per_head: 1.9,
+  },
+
+  sales: {
+    chicken: {
+      sales_population: 10500,
+      sales_weight: 21000,
+      average_weight: 2.0,
+      chicken_average_selling_price: 28500,
+    },
+    egg: {
+      egg_pieces: 185000,
+      egg_mass_kg: 9250,
+      average_egg_weight_kg: 0.05,
+      egg_average_selling_price: 1800,
+    },
+  },
+
+  performance: {
+    depletion: 150,
+    age_day: 35,
+    mortality_std: 3.5,
+    mortality_act: 4.2,
+    deff_mortality: 0.7,
+    fcr_std: 1.6,
+    fcr_act: 1.72,
+    deff_fcr: 0.12,
+    awg: 60,
+  },
+};

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/report/marketing-report.dummy.ts

@@ -0,0 +1,139 @@
+import { BaseApiResponse } from '@/types/api/api-general';
+import { DailyMarketingReport } from '@/types/api/report/marketing';
+
+// TODO: delete this later
+export const DAILY_MARKETING_DUMMY_DATA: BaseApiResponse<DailyMarketingReport> =
+  {
+    code: 200,
+    status: 'success',
+    message: 'Get daily marketing report successfully',
+    meta: {
+      page: 1,
+      limit: 10,
+      total_pages: 1,
+      total_results: 2,
+    },
+    data: {
+      rows: [
+        {
+          // metadata
+          created_user: {
+            id: 1,
+            id_user: 101,
+            email: 'admin@example.com',
+            name: 'Admin User',
+          },
+          created_at: '2025-12-01T08:00:00Z',
+          updated_at: '2025-12-01T08:00:00Z',
+
+          // row data
+          no: 1,
+          so_date: '2025-12-01',
+          do_date: '2025-12-08',
+          aging_days: 7,
+
+          warehouse: {
+            id: 1,
+            name: 'Warehouse Kandang A',
+            type: 'KANDANG',
+            area: {
+              id: 1,
+              name: 'Area Barat',
+            },
+            location: {
+              id: 1,
+              name: 'Farm Bandung',
+              address: 'Jl. Raya Farm No. 1',
+              area: null,
+            },
+            kandang: {
+              id: 1,
+              name: 'Kandang A1',
+              status: 'ACTIVE',
+              capacity: 5000,
+              location: null,
+              pic: null,
+            },
+          },
+
+          customer: {
+            id: 1,
+            name: 'PT Maju Jaya',
+            pic_id: 10,
+            pic: {
+              id: 10,
+              id_user: 210,
+              email: 'pic@majujaya.com',
+              name: 'Budi Santoso',
+            },
+            type: 'BROILER',
+            address: 'Jl. Industri No. 10',
+            phone: '08123456789',
+            email: 'contact@majujaya.com',
+            account_number: '1234567890',
+          },
+
+          sales: 'Andi Wijaya',
+
+          product: {
+            id: 1,
+            name: 'Live Chicken',
+            brand: 'LTI Farm',
+            sku: 'LC-001',
+            product_price: 18_000,
+            selling_price: 20_000,
+            tax: 0,
+            expiry_period: 0,
+            uom: {
+              id: 1,
+              name: 'Kg',
+              created_user: {
+                id: 1,
+                id_user: 101,
+                email: 'admin@example.com',
+                name: 'Admin User',
+              },
+              created_at: '2025-01-01T00:00:00Z',
+              updated_at: '2025-01-01T00:00:00Z',
+            },
+            product_category: {
+              id: 1,
+              code: 'BROILER',
+              name: 'Broiler Chicken',
+              created_user: {
+                id: 1,
+                id_user: 101,
+                email: 'admin@example.com',
+                name: 'Admin User',
+              },
+              created_at: '2025-01-01T00:00:00Z',
+              updated_at: '2025-01-01T00:00:00Z',
+            },
+            suppliers: [],
+            flags: ['LIVE'],
+          },
+
+          do_number: 'DO-2025-0001',
+          vehicle_number: 'B 1234 CD',
+          marketing_type: 'REGULAR',
+
+          qty: 1000,
+          average_weight_kg: 1.8,
+          total_weight_kg: 1800,
+
+          sales_price_per_kg: 20_000,
+          hpp_price_per_kg: 18_000,
+
+          sales_amount: 36_000_000,
+          hpp_amount: 32_400_000,
+        },
+      ],
+
+      summary: {
+        total_qty: 1000,
+        total_weight_kg: 1800,
+        total_sales_amount: 36_000_000,
+        total_hpp_amount: 32_400_000,
+      },
+    },
+  };

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,13 +3,19 @@ import axios from 'axios';
 import { BaseApiService } from '@/services/api/base';
 import {
   Closing,
+  ClosingFinance,
   ClosingGeneralInformation,
   ClosingIncomingSapronak,
   ClosingOutgoingSapronak,
   ClosingOverhead,
   ClosingSapronakCalculation,
+  ClosingProductionData,
 } from '@/types/api/closing';
 import { BaseApiResponse } from '@/types/api/api-general';
+import { httpClient, httpClientFetcher } from '@/services/http/client';
+import { ClosingSales } from '@/types/api/closing';
+
+// TODO: delete these dummy data later
 import {
   dummyGetAllFetcher,
   dummyGetSingle,
@@ -18,48 +24,15 @@ import {
   dummyGetGeneralInfo,
   dummyGetPerhitunganSapronak,
   dummyGetOverhead,
+  dummyClosingProductionData,
 } from '@/dummy/closing.dummy';
-import { httpClient, httpClientFetcher } from '@/services/http/client';
+import { sleep } from '@/lib/helper';
-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 +53,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 +61,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 =
@@ -134,22 +86,27 @@ export class ClosingApiService extends BaseApiService<Closing, null, null> {
     }
   }
 
+  async getProductionData(
+    id: number
+  ): Promise<BaseApiResponse<ClosingProductionData> | undefined> {
+    try {
+      const getProductionDataPath = `${this.basePath}/${id}/production-data`;
+      const getProductionDataRes = await httpClient<
+        BaseApiResponse<ClosingProductionData>
+      >(getProductionDataPath);
+
+      return getProductionDataRes;
+    } catch (error) {
+      if (axios.isAxiosError<BaseApiResponse<ClosingProductionData>>(error)) {
+        return error.response?.data;
+      }
+      return undefined;
+    }
+  }
+
   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 +128,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 +140,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/services/api/report/marketing-report.ts

@@ -0,0 +1,75 @@
+import * as XLSX from 'xlsx';
+import toast from 'react-hot-toast';
+
+import { BaseApiService } from '@/services/api/base';
+import { httpClient, httpClientFetcher } from '@/services/http/client';
+import { BaseApiResponse } from '@/types/api/api-general';
+import { DailyMarketingReport } from '@/types/api/report/marketing';
+import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
+import { formatDate, sleep } from '@/lib/helper';
+
+export class MarketingReportApiService extends BaseApiService<
+  DailyMarketingReport,
+  unknown,
+  unknown
+> {
+  constructor(basePath: string = '/reports/marketings/daily-marketing') {
+    super(basePath);
+  }
+
+  async getAllDailyMarketingFetcher(
+    endpoint: string
+  ): Promise<BaseApiResponse<DailyMarketingReport>> {
+    return await httpClientFetcher<BaseApiResponse<DailyMarketingReport>>(
+      endpoint
+    );
+  }
+
+  async exportDailyMarketingToExcel(initialQueryString: string) {
+    const params = new URLSearchParams(initialQueryString);
+
+    params.set('limit', '9999999');
+
+    const queryString = `?${params.toString()}`;
+
+    try {
+      const dailyMarketingsReport = await httpClientFetcher<
+        BaseApiResponse<DailyMarketingReport>
+      >(`${this.basePath}${queryString}`);
+
+      if (isResponseError(dailyMarketingsReport)) {
+        toast.error('Gagal melakukan export penjualan harian! Coba lagi.');
+        return;
+      }
+
+      const rows = dailyMarketingsReport.data.rows;
+
+      const formattedRows = [];
+
+      for (let i = 0; i < rows.length; i++) {
+        formattedRows.push({
+          ...rows[i],
+          created_user: rows[i].created_user.name,
+          created_at: formatDate(rows[i].created_at, 'YYYY-MM-DD'),
+          updated_at: formatDate(rows[i].updated_at, 'YYYY-MM-DD'),
+          warehouse: rows[i].warehouse.name,
+          customer: rows[i].customer.name,
+          product: rows[i].product.name,
+        });
+      }
+
+      const ws = XLSX.utils.json_to_sheet(formattedRows);
+      const wb = XLSX.utils.book_new();
+      XLSX.utils.book_append_sheet(wb, ws, 'laporan-penjualan-harian');
+
+      // triggers download in browser
+      XLSX.writeFile(wb, 'laporan-penjualan-harian.xlsx');
+    } catch (error) {
+      toast.error('Gagal melakukan export penjualan harian! Coba lagi.');
+    }
+  }
+}
+
+export const MarketingReportApi = new MarketingReportApiService(
+  '/reports/marketings/daily-marketing'
+);

src/types/api/closing.d.ts

@@ -23,6 +23,33 @@ export type BaseSales = {
   payment_status: string;
 };
 
+export type BaseClosingSales = {
+  project_type: string;
+  flock_id: number;
+  period: number;
+  sales: BaseSales[];
+};
+import { Kandang } from '@/types/api/master-data/kandang';
+import { Product } from '@type/api/master-data/product';
+import { Customer } from '@type/api/master-data/customer';
+import { BaseMetadata } from '@/types/api/api-general';
+
+export type BaseSales = {
+  id: number;
+  realization_date: string;
+  age: number;
+  do_number: string;
+  product: Product;
+  customer: Customer;
+  qty: number;
+  weight: number;
+  avg_weight: number;
+  price: number;
+  total_price: number;
+  kandang: Kandang;
+  payment_status: string;
+};
+
 export type BaseClosingSales = {
   project_type: string;
   flock_id: number;
@@ -79,6 +106,44 @@ export type ClosingIncomingSapronak = {
 
 export type ClosingOutgoingSapronak = ClosingIncomingSapronak;
 
+export type ClosingProductionData = {
+  purchase: {
+    initial_population: number;
+    claim_culling: number;
+    final_population: number;
+    feed_in: number;
+    feed_used: number;
+    feed_used_per_head: number;
+  };
+
+  sales: {
+    chicken: {
+      sales_population: number;
+      sales_weight: number;
+      average_weight: number;
+      chicken_average_selling_price: number;
+    };
+    egg?: {
+      egg_pieces: number;
+      egg_mass_kg: number;
+      average_egg_weight_kg: number;
+      egg_average_selling_price: number;
+    };
+  };
+
+  performance: {
+    depletion: number;
+    age_day: number;
+    mortality_std: number;
+    mortality_act: number;
+    deff_mortality: number;
+    fcr_std: number;
+    fcr_act: number;
+    deff_fcr: number;
+    awg: number;
+  };
+};
+
 // ====== PERHITUNGAN SAPRONAK ======
 
 export type RowSapronakCalculation = {
@@ -141,4 +206,80 @@ export type OverheadTotal = {
   actual_total_amount: number;
   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/master-data/kandang.d.ts

@@ -10,7 +10,6 @@ export type BaseKandang = {
   capacity: number;
   pic: BaseUser;
   project_flock_kandang_id?: number;
-  capacity: number;
 };
 
 export type Kandang = BaseMetadata & BaseKandang;

src/types/api/report/marketing.d.ts

@@ -0,0 +1,61 @@
+import { BaseMetadata } from '@/types/api/api-general';
+import { BaseCustomer, Customer } from '@/types/api/master-data/customer';
+import {
+  BaseWarehouseArea,
+  BaseWarehouseKandang,
+  BaseWarehouseLocation,
+  Warehouse,
+} from '@/types/api/master-data/warehouse';
+import { Location } from '@/types/api/master-data/location';
+import { Area } from '@/types/api/master-data/area';
+import { BaseProduct } from '@/types/api/master-data/product';
+
+export type BaseDailyMarketingRow = {
+  no: number;
+  so_date: string; // e.g. "01-Dec-2025"
+  do_date: string; // e.g. "08-Dec-2025"
+  aging_days: number;
+
+  warehouse: BaseWarehouseArea | BaseWarehouseLocation | BaseWarehouseKandang;
+  customer: BaseCustomer;
+  sales: string;
+  product: BaseProduct;
+
+  do_number: string;
+  vehicle_number: string;
+  marketing_type: string;
+
+  qty: number;
+  average_weight_kg: number;
+  total_weight_kg: number;
+
+  sales_price_per_kg: number;
+  hpp_price_per_kg: number;
+
+  sales_amount: number;
+  hpp_amount: number;
+};
+
+export type DailyMarketingRow = BaseMetadata & BaseDailyMarketingRow;
+
+export interface SalesSummary {
+  total_qty: number;
+  total_weight_kg: number;
+  total_sales_amount: number;
+  total_hpp_amount: number;
+}
+
+export type DailyMarketingReport = {
+  rows: DailyMarketingRow[];
+  summary: SalesSummary;
+};
+
+export type MarketingReportFilters = {
+  area_id?: number;
+  location_id?: number;
+  warehouse_id?: number;
+  customer_id?: number;
+  start_date?: string;
+  end_date?: string;
+  date_type?: 'realized' | 'transaction';
+};

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;
+};