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

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

@@ -0,0 +1,11 @@
+import MarketingReportContent from '@/components/pages/report/MarketingReportContent';
+
+const MarketingReportPage = () => {
+  return (
+    <section className='w-full p-4'>
+      <MarketingReportContent />
+    </section>
+  );
+};
+
+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/Table.tsx

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

src/components/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 } =
-    typeof className === 'object'
-      ? className
-      : { wrapper: className, tab: undefined };
+  const {
+    container: containerClassName,
+    wrapper: wrapperClassName,
+    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,16 +6,18 @@ 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,
   ClosingHppExpedition,
 } 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';
 import HppExpeditionReportTable from './hpp-ekspedisi/HppExpeditionReportTable';
 
 interface ClosingDetailProps {
@@ -63,12 +65,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,495 @@
+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)
+    ? [
+        // Pembelian group
+        ...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.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,
+        },
+        // Penjualan group
+        ...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.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: 'Jenis',
+                  enableSorting: false,
+                  accessorFn: (item) => item.type,
+                  cell: (item) => (
+                    <div className=''>
+                      {formatTitleCase(item.row.original.type || '-')}
+                    </div>
+                  ),
+                  footer: (item) => (
+                    <div className='font-bold uppercase'>
+                      {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 ps-6 uppercase'>
+                            {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'
-            collapsible
-            defaultCollapsed={false}
-            className={{
-              wrapper: 'w-full',
-              body: 'p-4 shadow',
-            }}
-          >
-            <Table<RowSapronakCalculation>
-              data={sapronakCalculation.data?.doc_broiler.rows ?? []}
-              columns={docBroilerColumns}
-              className={{
-                containerClassName: 'my-4',
-              }}
-              renderFooter
-            />
-          </Card>
+      <Card
+        title='DOC Broiler'
+        collapsible
+        defaultCollapsed={false}
+        className={{
+          wrapper: 'w-full',
+          body: 'p-4 shadow',
+        }}
+      >
+        <Table<RowSapronakCalculation>
+          data={
+            isResponseSuccess(sapronakCalculation)
+              ? (sapronakCalculation.data?.doc_broiler.rows ?? [])
+              : []
+          }
+          columns={docBroilerColumns}
+          className={{
+            containerClassName: 'my-4',
+          }}
+          renderFooter={isResponseSuccess(sapronakCalculation)}
+        />
+      </Card>
 
-          <Card
-            title='OVK'
-            variant='bordered'
-            collapsible
-            defaultCollapsed={true}
-            className={{
-              wrapper: 'w-full',
-            }}
-          >
-            <Table<RowSapronakCalculation>
-              data={sapronakCalculation.data?.ovk.rows ?? []}
-              columns={ovkColumns}
-              className={{
-                containerClassName: 'my-4',
-              }}
-              renderFooter
-            />
-          </Card>
+      <Card
+        title='OVK'
+        variant='bordered'
+        collapsible
+        defaultCollapsed={true}
+        className={{
+          wrapper: 'w-full',
+        }}
+      >
+        <Table<RowSapronakCalculation>
+          data={
+            isResponseSuccess(sapronakCalculation)
+              ? (sapronakCalculation.data?.ovk.rows ?? [])
+              : []
+          }
+          columns={ovkColumns}
+          className={{
+            containerClassName: 'my-4',
+          }}
+          renderFooter={isResponseSuccess(sapronakCalculation)}
+        />
+      </Card>
 
-          <Card
-            title='Pakan'
-            variant='bordered'
-            collapsible
-            defaultCollapsed={true}
-            className={{
-              wrapper: 'w-full',
-            }}
-          >
-            <Table<RowSapronakCalculation>
-              data={sapronakCalculation.data?.pakan.rows ?? []}
-              columns={pakanColumns}
-              className={{
-                containerClassName: 'my-4',
-              }}
-              renderFooter
-            />
-          </Card>
-        </>
-      )}
+      <Card
+        title='Pakan'
+        variant='bordered'
+        collapsible
+        defaultCollapsed={true}
+        className={{
+          wrapper: 'w-full',
+        }}
+      >
+        <Table<RowSapronakCalculation>
+          data={
+            isResponseSuccess(sapronakCalculation)
+              ? (sapronakCalculation.data?.pakan.rows ?? [])
+              : []
+          }
+          columns={pakanColumns}
+          className={{
+            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',
-      header: 'Stok Sebelum',
-      accessorFn: (row) => formatNumber(String(row.before_quantity)),
-    },
-    {
-      id: 'after_quantity',
-      header: 'Stok Sesudah',
-      accessorFn: (row) => formatNumber(String(row.after_quantity)),
-    },
+    // {
+    //   id: 'before_quantity',
+    //   header: 'Stok Sebelum',
+    //   accessorFn: (row) =>
+    //     formatNumber(String(row.product_warehouse?.quantity)),
+    // },
+    // {
+    //   id: '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.transaction_type === 'DECREASE') return 'Penurunan';
+        if (row.increase > 0) return 'Peningkatan';
+        if (row.decrease > 0) return 'Penurunan';
         return '-';
       },
       cell: (props) => {
-        const type = props.row.original.transaction_type;
-        const label =
-          type === 'INCREASE'
-            ? 'Peningkatan'
-            : type === 'DECREASE'
-              ? 'Penurunan'
-              : '-';
+        const type = props.row.original.increase;
+        const label = type > 0 ? 'Peningkatan' : type <= 0 ? 'Penurunan' : '-';
 
         return (
-          <div
-            className={`small mx-auto badge badge-soft ${
-              type === 'INCREASE' ? 'badge-success' : 'badge-error'
-            }`}
-          >
+          <Badge variant='soft' color={type > 0 ? 'success' : '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(
-        (warehouse) => warehouse.stock_logs || []
+      inventoryProduct?.product_warehouses?.flatMap((warehouse) =>
+        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/production/project-flock/detail/ProjectFlockDetail.tsx

@@ -68,7 +68,7 @@ const ProjectFlockDetail = ({
     latestApproval: projectFlock?.approval,
     approvalLines: PROJECT_FLOCK_APPROVAL_LINE,
     moduleName: 'PROJECT_FLOCKS',
-    moduleId: projectFlock?.id.toString() ?? '',
+    moduleId: projectFlock?.id?.toString() ?? '',
   });
 
   const { approvals: kandangApprovals, isLoading: kandangApprovalsLoading } =

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

@@ -47,9 +47,7 @@ import Card from '@/components/Card';
 import ProjectFlockKandangTable from '@/components/pages/production/project-flock/form/ProjectFlockKandangTable';
 import { Nonstock } from '@/types/api/master-data/nonstock';
 import { useUiStore } from '@/stores/ui/ui.store';
-import Link from 'next/link';
 import DrawerHeader from '@/components/helper/drawer/DrawerHeader';
-import { formatDate } from '@/lib/helper';
 
 interface ProjectFlockFormProps {
   formType?: 'add' | 'edit' | 'detail';
@@ -260,7 +258,9 @@ const ProjectFlockForm = ({
   const categoryChangeHandler = (val: OptionType | OptionType[] | null) => {
     formik.setFieldValue('category', (val as OptionType)?.value);
     formik.setFieldValue('category_option', val);
-    formik.setFieldTouched('category', true);
+    if (val == null) {
+      formik.setFieldTouched('category', true);
+    }
   };
 
   // Submit Handler
@@ -788,7 +788,7 @@ const ProjectFlockForm = ({
                 }
                 errorMessage={formik.errors.area_id as string}
                 isClearable
-                isDisabled={formType === 'detail'}
+                isDisabled={formType != 'add'}
               />
               <SelectInput
                 required
@@ -807,7 +807,7 @@ const ProjectFlockForm = ({
                 }
                 errorMessage={formik.errors.location_id as string}
                 isClearable
-                isDisabled={formType === 'detail' || disabledLocation}
+                isDisabled={formType != 'add' || disabledLocation}
               />
               <SelectInput
                 required
@@ -837,7 +837,7 @@ const ProjectFlockForm = ({
                 }
                 errorMessage={formik.errors.flock_name as string}
                 isClearable
-                isDisabled={formType === 'detail'}
+                isDisabled={formType != 'add'}
               />
               <SelectInput
                 required
@@ -851,7 +851,7 @@ const ProjectFlockForm = ({
                 isError={formik.touched.fcr_id && Boolean(formik.errors.fcr_id)}
                 errorMessage={formik.errors.fcr_id as string}
                 isClearable
-                isDisabled={formType === 'detail'}
+                isDisabled={formType != 'add'}
               />
               <SelectInput
                 required
@@ -864,7 +864,7 @@ const ProjectFlockForm = ({
                 }
                 errorMessage={formik.errors.category as string}
                 isClearable
-                isDisabled={formType === 'detail'}
+                isDisabled={formType != 'add'}
               />
               <NumberInput
                 name='period'

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,50 @@
+'use client';
+
+import { JSX, useState } from 'react';
+
+import Tabs from '@/components/Tabs';
+import DailyMarketingReportContent from '@/components/pages/report/DailyMarketingReportContent';
+import HppPerKandangTab from './sale/tab/HppPerKandangTab';
+
+type MarketingReportTabType =
+  | 'daily'
+  | 'transaction'
+  | 'hpp-comparison'
+  | 'daily-hpp';
+
+const marketingReportTabs: {
+  id: MarketingReportTabType;
+  label: string;
+  content: JSX.Element;
+}[] = [
+  {
+    id: 'daily',
+    label: 'Penjualan Harian',
+    content: <DailyMarketingReportContent />,
+  },
+  {
+    id: 'daily-hpp',
+    label: 'HPP Harian Kandang',
+    content: <HppPerKandangTab />,
+  },
+];
+
+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,218 @@
+import { ReportExpense } from '@/types/api/report/report-expense';
+import { formatCurrency, formatDate } from '@/lib/helper';
+import jsPDF from 'jspdf';
+import autoTable, { UserOptions } from 'jspdf-autotable';
+interface jsPDFWithAutoTable extends jsPDF {
+  lastAutoTable: {
+    finalY: number;
+  };
+}
+
+export interface PDFParams {
+  location_name?: string;
+  supplier_name?: string;
+  realization_date?: string;
+}
+
+const getStatusColor = (action?: string): [number, number, number] => {
+  switch (action) {
+    case 'APPROVED':
+    case 'Selesai': // Berdasarkan data sumber
+      return [220, 252, 231]; // Hijau muda (#dcfce7)
+    case 'REJECTED':
+      return [254, 226, 226]; // Merah muda (#fee2e2)
+    case 'Realisasi': // Berdasarkan data sumber
+      return [254, 243, 199]; // Kuning/Amber muda (#fef3c7)
+    default:
+      return [255, 255, 255]; // Putih
+  }
+};
+
+export const generateReportExpensePDF = async (
+  data: ReportExpense[],
+  params: PDFParams
+): Promise<void> => {
+  // Inisialisasi dokumen dengan tipe yang sudah diekstensi
+  const doc = new jsPDF('l', 'mm', 'a4') as jsPDFWithAutoTable;
+  const pageWidth: number = doc.internal.pageSize.getWidth();
+  const marginX: number = 14;
+
+  // --- HEADER SECTION ---
+  doc.setFont('helvetica', 'bold');
+  doc.setFontSize(18);
+  doc.setTextColor(31, 116, 191); // #1f74bf sesuai style
+  doc.text('PT LUMBUNG TELUR INDONESIA', marginX, 20);
+
+  doc.setFont('helvetica', 'normal');
+  doc.setFontSize(7);
+  doc.setTextColor(102, 102, 102);
+  doc.text(
+    'SOHO Building Lt.3 (Paris Van Java), Jalan Karang Tinggal, Kel. Cipedes, Kec. Sukajadi, Kota Bandung 40162',
+    marginX,
+    25
+  );
+
+  doc.setDrawColor(0);
+  doc.line(marginX, 28, pageWidth - marginX, 28);
+
+  // --- TITLE & INFO SECTION ---
+  doc.setFontSize(18);
+  doc.setTextColor(31, 116, 191);
+  doc.text('LAPORAN BIAYA OPERASIONAL', marginX, 38);
+
+  doc.setFontSize(7);
+  doc.setTextColor(0);
+  const infoX: number = pageWidth - marginX;
+  doc.text(
+    `Tanggal Cetak: ${formatDate(new Date(), 'DD MMM YYYY')}`,
+    infoX,
+    35,
+    { align: 'right' }
+  );
+  doc.text(`Total Data: ${data.length} transaksi`, infoX, 40, {
+    align: 'right',
+  });
+
+  // --- GROUPING LOGIC ---
+  const groupedBySupplier = data.reduce(
+    (acc, item) => {
+      const supplierName: string = item.supplier?.name || 'Unknown Supplier';
+      if (!acc[supplierName]) acc[supplierName] = [];
+      acc[supplierName].push(item);
+      return acc;
+    },
+    {} as Record<string, ReportExpense[]>
+  );
+
+  let currentY: number = 50;
+
+  // --- RENDER TABLES PER SUPPLIER ---
+  Object.entries(groupedBySupplier).forEach(([supplierName, items]) => {
+    // Cek sisa ruang halaman sebelum cetak judul supplier
+    if (currentY > 180) {
+      doc.addPage();
+      currentY = 20;
+    }
+
+    doc.setFontSize(14);
+    doc.setTextColor(31, 116, 191);
+    doc.text(supplierName, marginX, currentY);
+    currentY += 5;
+
+    const tableOptions: UserOptions = {
+      startY: currentY,
+      head: [
+        [
+          { content: 'No', rowSpan: 2 },
+          { content: 'No. PO', rowSpan: 2 },
+          { content: 'No. Referensi', rowSpan: 2 },
+          { content: 'Tgl Realisasi', rowSpan: 2 },
+          { content: 'Tgl Transaksi', rowSpan: 2 },
+          { content: 'Kategori', rowSpan: 2 },
+          { content: 'Produk', rowSpan: 2 },
+          { content: 'Lokasi', rowSpan: 2 },
+          { content: 'Kandang', rowSpan: 2 },
+          { content: 'Pengajuan', colSpan: 3, styles: { halign: 'center' } },
+          { content: 'Realisasi', colSpan: 3, styles: { halign: 'center' } },
+          { content: 'Status BOP', rowSpan: 2 },
+        ],
+        ['Qty', 'Harga', 'Total', 'Qty', 'Harga', 'Total'],
+      ],
+      body: items.map((item, index) => {
+        const pQty: number = item.pengajuan?.qty || 0;
+        const pPrice: number = item.pengajuan?.price || 0;
+        const rQty: number = item.realisasi?.qty || 0;
+        const rPrice: number = item.realisasi?.price || 0;
+
+        return [
+          index + 1,
+          item.po_number || '-',
+          item.reference_number || '-',
+          formatDate(item.realization_date, 'DD MMM YY'),
+          formatDate(item.transaction_date, 'DD MMM YY'),
+          item.category?.replace('-', ' ') || '-',
+          item.pengajuan?.nonstock?.name || '-',
+          item.kandang?.location?.name || '-',
+          item.kandang?.name || '-',
+          pQty.toLocaleString('id-ID'),
+          formatCurrency(pPrice),
+          formatCurrency(pQty * pPrice),
+          rQty.toLocaleString('id-ID'),
+          formatCurrency(rPrice),
+          formatCurrency(rQty * rPrice),
+          item.latest_approval?.step_name || '-',
+        ];
+      }),
+      theme: 'grid',
+      styles: { fontSize: 6, cellPadding: 1.5, overflow: 'linebreak' },
+      headStyles: {
+        fillColor: [245, 245, 245],
+        textColor: 0,
+        fontStyle: 'bold',
+        lineWidth: 0.1,
+      },
+      // HOOK UNTUK BADGE:
+      didParseCell: (dataCell) => {
+        // Index kolom 15 adalah Status BOP (berdasarkan array di atas)
+        if (dataCell.section === 'body' && dataCell.column.index === 15) {
+          const statusText = dataCell.cell.raw as string;
+
+          // Berikan warna latar belakang sel sesuai status
+          dataCell.cell.styles.fillColor = getStatusColor(statusText);
+          dataCell.cell.styles.textColor = [0, 0, 0]; // Teks hitam agar terbaca
+          dataCell.cell.styles.fontStyle = 'bold';
+          dataCell.cell.styles.halign = 'center';
+        }
+      },
+      margin: { left: marginX, right: marginX },
+    };
+
+    autoTable(doc, tableOptions);
+    currentY = doc.lastAutoTable.finalY + 10;
+  });
+
+  // --- GRAND TOTAL SECTION ---
+  const grandTotals = data.reduce(
+    (acc, item) => {
+      const pTotal = (item.pengajuan?.qty || 0) * (item.pengajuan?.price || 0);
+      const rTotal = (item.realisasi?.qty || 0) * (item.realisasi?.price || 0);
+      return {
+        pengajuan: acc.pengajuan + pTotal,
+        realisasi: acc.realisasi + rTotal,
+      };
+    },
+    { pengajuan: 0, realisasi: 0 }
+  );
+
+  if (currentY > 250) {
+    doc.addPage();
+    currentY = 20;
+  }
+
+  autoTable(doc, {
+    startY: currentY,
+    body: [
+      ['GRAND TOTAL PENGAJUAN', formatCurrency(grandTotals.pengajuan)],
+      ['GRAND TOTAL REALISASI', formatCurrency(grandTotals.realisasi)],
+    ],
+    styles: { fontSize: 8, fontStyle: 'bold' },
+    columnStyles: {
+      0: { cellWidth: 50, fillColor: [245, 245, 245] },
+      1: { cellWidth: 50 },
+    },
+    theme: 'grid',
+    margin: { left: marginX },
+  });
+
+  // --- FOOTER ---
+  const finalY: number = doc.lastAutoTable.finalY + 20;
+  doc.setFontSize(14);
+  doc.setTextColor(31, 116, 191);
+  doc.text('PT LUMBUNG TELUR INDONESIA', pageWidth - marginX, finalY, {
+    align: 'right',
+  });
+
+  // Download File
+  const fileName: string = `Laporan-BOP-${formatDate(new Date(), 'YYYY-MM-DD-HHmm')}.pdf`;
+  doc.save(fileName);
+};

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/components/pages/report/sale/SaleReportTabs.tsx

@@ -0,0 +1,37 @@
+'use client';
+
+import Tabs from '@/components/Tabs';
+import HppPerKandangTab from '@/components/pages/report/sale/tab/HppPerKandangTab';
+
+const SaleReportTabs = () => {
+  const tabs = [
+    // {
+    //   id: '1',
+    //   label: 'Penjualan Harian',
+    //   content: 'Penjualan Harian Tab',
+    // },
+    // {
+    //   id: '2',
+    //   label: 'Transaksi Penjualan DO',
+    //   content: 'Transaksi Penjualan DO Tab',
+    // },
+    // {
+    //   id: '3',
+    //   label: 'Perbandingan HPP Per Rentang BW',
+    //   content: 'Perbandingan HPP Per Rentang BW Tab',
+    // },
+    {
+      id: '4',
+      label: 'HPP Harian Kandang',
+      content: <HppPerKandangTab />,
+    },
+  ];
+
+  return (
+    <section className='w-full p-4'>
+      <Tabs tabs={tabs} variant='lifted' />
+    </section>
+  );
+};
+
+export default SaleReportTabs;

src/components/pages/report/sale/export/HppPerkandangExport.tsx

@@ -0,0 +1,497 @@
+'use client';
+
+import {
+  Page,
+  Text,
+  View,
+  Document,
+  StyleSheet,
+  Font,
+  pdf,
+} from '@react-pdf/renderer';
+import {
+  HppPerKandangReport,
+  HppPerKandangRow,
+  HppPerKandangPerWeightRange,
+} from '@/types/api/report/hpp-per-kandang';
+import { formatDate, formatNumber, formatCurrency } from '@/lib/helper';
+
+Font.register({
+  family: 'Helvetica',
+  src: 'helvetica',
+});
+
+const pdfStyles = StyleSheet.create({
+  page: {
+    fontSize: 10,
+    fontFamily: 'Helvetica',
+    padding: 20,
+    backgroundColor: '#FFFFFF',
+  },
+  titleSection: {
+    marginBottom: 10,
+  },
+  mainTitle: {
+    fontSize: 14,
+    fontWeight: 'bold',
+    marginBottom: 5,
+    color: '#1f74bf',
+  },
+  supplierTitle: {
+    fontSize: 12,
+    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: 4,
+    fontSize: 8,
+    textAlign: 'left',
+  },
+  tableCellHeader: {
+    flex: 1,
+    borderRightWidth: 1,
+    borderRightColor: '#000000',
+    borderRightStyle: 'solid',
+    padding: 4,
+    fontSize: 8,
+    fontWeight: 'bold',
+    backgroundColor: '#F5F5F5',
+    borderBottomWidth: 1,
+    borderBottomColor: '#000000',
+    borderBottomStyle: 'solid',
+    paddingVertical: 12,
+    textAlign: 'center',
+  },
+  tableCellHeaderRight: {
+    flex: 1,
+    borderRightWidth: 1,
+    borderRightColor: '#000000',
+    borderRightStyle: 'solid',
+    padding: 4,
+    fontSize: 8,
+    fontWeight: 'bold',
+    backgroundColor: '#F5F5F5',
+    textAlign: 'right',
+    borderBottomWidth: 1,
+    borderBottomColor: '#000000',
+    borderBottomStyle: 'solid',
+    paddingVertical: 12,
+  },
+  tableCellRight: {
+    flex: 1,
+    borderRightWidth: 1,
+    borderRightColor: '#000000',
+    borderRightStyle: 'solid',
+    padding: 4,
+    fontSize: 8,
+    textAlign: 'right',
+  },
+  tableCellCenter: {
+    flex: 1,
+    borderRightWidth: 1,
+    borderRightColor: '#000000',
+    borderRightStyle: 'solid',
+    padding: 4,
+    fontSize: 8,
+    textAlign: 'center',
+  },
+  tableBorderBottom: {
+    borderBottomWidth: 1,
+    borderBottomColor: '#000000',
+    borderBottomStyle: 'solid',
+  },
+  supplierSection: {
+    marginBottom: 10,
+  },
+  supplierSectionBreak: {
+    marginBottom: 15,
+  },
+  parameterBadge: {
+    backgroundColor: '#F5F5F5',
+    color: '#333333',
+    padding: 4,
+    borderRadius: 4,
+    fontSize: 8,
+    marginRight: 8,
+    marginBottom: 4,
+  },
+  parameterContainer: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    marginBottom: 8,
+  },
+});
+
+interface HppPerKandangExportParams {
+  data: HppPerKandangReport;
+  params: {
+    area_name?: string;
+    location_name?: string;
+    kandang_name?: string;
+    period?: string;
+    weight_min?: string;
+    weight_max?: string;
+    show_unrecorded?: string;
+    sort_by?: string;
+  };
+}
+
+const getParameterText = (params: HppPerKandangExportParams['params']) => {
+  const paramsText = [];
+
+  if (params.area_name && params.area_name !== 'Semua Area') {
+    paramsText.push(`Area: ${params.area_name}`);
+  }
+
+  if (params.location_name && params.location_name !== 'Semua Lokasi') {
+    paramsText.push(`Lokasi: ${params.location_name}`);
+  }
+
+  if (params.kandang_name && params.kandang_name !== 'Semua Kandang') {
+    paramsText.push(`Kandang: ${params.kandang_name}`);
+  }
+
+  if (params.period) {
+    const formattedDate = formatDate(params.period, 'DD MMM YYYY');
+    paramsText.push(`Tanggal: ${formattedDate}`);
+  }
+
+  if (params.weight_min || params.weight_max) {
+    const weightRange =
+      params.weight_min && params.weight_max
+        ? `${params.weight_min} - ${params.weight_max} kg`
+        : params.weight_min
+          ? `≥ ${params.weight_min} kg`
+          : `≤ ${params.weight_max} kg`;
+    paramsText.push(`Rentang Bobot: ${weightRange}`);
+  }
+
+  if (params.show_unrecorded === 'true') {
+    paramsText.push('Tampilkan: Tanpa Recording');
+  }
+
+  const currentDate = formatDate(new Date().toISOString(), 'DD MMM YYYY HH:mm');
+  paramsText.push(`Dicetak: ${currentDate}`);
+
+  return paramsText;
+};
+
+const createPDFDocument = (
+  data: HppPerKandangExportParams['data'],
+  params: HppPerKandangExportParams['params']
+) => {
+  const rekapitulasiByWeightRange = data.summary?.per_weight_range || [];
+
+  return (
+    <Document>
+      <Page size='A3' orientation='landscape' style={pdfStyles.page}>
+        {/* Title and Parameters */}
+        <View style={pdfStyles.titleSection}>
+          <Text style={pdfStyles.mainTitle}>
+            Laporan &gt; HPP Harian Kandang
+          </Text>
+          <View style={pdfStyles.parameterContainer}>
+            {getParameterText(params).map((param, index) => (
+              <View key={index} style={pdfStyles.parameterBadge}>
+                <Text>{param}</Text>
+              </View>
+            ))}
+          </View>
+        </View>
+
+        {/* Rekapitulasi Section */}
+        <View style={pdfStyles.supplierSection}>
+          <Text style={pdfStyles.supplierTitle}>Rekapitulasi</Text>
+
+          <View style={pdfStyles.table}>
+            {/* Table Header */}
+            <View style={[pdfStyles.tableRow, pdfStyles.tableHeader]}>
+              <View style={[pdfStyles.tableCellHeader, { flex: 1.2 }]}>
+                <Text>Rentang BW</Text>
+              </View>
+              <View style={[pdfStyles.tableCellHeaderRight, { flex: 1 }]}>
+                <Text>Sisa Ekor</Text>
+              </View>
+              <View style={[pdfStyles.tableCellHeaderRight, { flex: 1 }]}>
+                <Text>Sisa Kg</Text>
+              </View>
+              <View style={[pdfStyles.tableCellHeaderRight, { flex: 1.2 }]}>
+                <Text>Rata-Rata Bobot (Kg)</Text>
+              </View>
+              <View style={[pdfStyles.tableCellHeaderRight, { flex: 1 }]}>
+                <Text>Produksi Telur (Butir)</Text>
+              </View>
+              <View style={[pdfStyles.tableCellHeaderRight, { flex: 1 }]}>
+                <Text>Produksi Telur (Kg)</Text>
+              </View>
+              <View style={[pdfStyles.tableCellHeader, { flex: 1.5 }]}>
+                <Text>Feed (Supplier)</Text>
+              </View>
+              <View style={[pdfStyles.tableCellHeader, { flex: 1.2 }]}>
+                <Text>DOC (Supplier)</Text>
+              </View>
+              <View style={[pdfStyles.tableCellHeaderRight, { flex: 1.2 }]}>
+                <Text>Rata-Rata Harga DOC</Text>
+              </View>
+              <View style={[pdfStyles.tableCellHeaderRight, { flex: 1.2 }]}>
+                <Text>Nilai Nominal Telur</Text>
+              </View>
+              <View style={[pdfStyles.tableCellHeaderRight, { flex: 1 }]}>
+                <Text>HPP Ayam</Text>
+              </View>
+              <View style={[pdfStyles.tableCellHeaderRight, { flex: 1.2 }]}>
+                <Text>HPP Telur (RP/KG)</Text>
+              </View>
+              <View style={[pdfStyles.tableCellHeaderRight, { flex: 1.2 }]}>
+                <Text>Nominal Sisa</Text>
+              </View>
+            </View>
+
+            {/* Table Body - Rekapitulasi */}
+            {rekapitulasiByWeightRange.map(
+              (group: HppPerKandangPerWeightRange, index: number) => (
+                <View
+                  key={index}
+                  style={[
+                    pdfStyles.tableRow,
+                    index < rekapitulasiByWeightRange.length - 1
+                      ? pdfStyles.tableBorderBottom
+                      : {},
+                  ]}
+                >
+                  <View style={[pdfStyles.tableCellCenter, { flex: 1.2 }]}>
+                    <Text>{group.label}</Text>
+                  </View>
+                  <View style={[pdfStyles.tableCellRight, { flex: 1 }]}>
+                    <Text>{formatNumber(group.remaining_chicken_birds)}</Text>
+                  </View>
+                  <View style={[pdfStyles.tableCellRight, { flex: 1 }]}>
+                    <Text>
+                      {formatNumber(group.remaining_chicken_weight_kg)}
+                    </Text>
+                  </View>
+                  <View style={[pdfStyles.tableCellRight, { flex: 1.2 }]}>
+                    <Text>{formatNumber(group.avg_weight_kg)}</Text>
+                  </View>
+                  <View style={[pdfStyles.tableCellRight, { flex: 1 }]}>
+                    <Text>{formatNumber(group.egg_production_pieces)}</Text>
+                  </View>
+                  <View style={[pdfStyles.tableCellRight, { flex: 1 }]}>
+                    <Text>{formatNumber(group.egg_production_kg)}</Text>
+                  </View>
+                  <View style={[pdfStyles.tableCell, { flex: 1.5 }]}>
+                    <Text>
+                      {group.feed_suppliers
+                        ?.map(
+                          (s: { alias?: string; name: string }) =>
+                            s.alias || s.name
+                        )
+                        .join(' | ') || '-'}
+                    </Text>
+                  </View>
+                  <View style={[pdfStyles.tableCell, { flex: 1.2 }]}>
+                    <Text>
+                      {group.doc_suppliers
+                        ?.map(
+                          (s: { alias?: string; name: string }) =>
+                            s.alias || s.name
+                        )
+                        .join(' | ') || '-'}
+                    </Text>
+                  </View>
+                  <View style={[pdfStyles.tableCellRight, { flex: 1.2 }]}>
+                    <Text>{formatCurrency(group.average_doc_price_rp)}</Text>
+                  </View>
+                  <View style={[pdfStyles.tableCellRight, { flex: 1.2 }]}>
+                    <Text>{formatCurrency(group.egg_value_rp)}</Text>
+                  </View>
+                  <View style={[pdfStyles.tableCellRight, { flex: 1 }]}>
+                    <Text>{formatCurrency(group.hpp_rp)}</Text>
+                  </View>
+                  <View style={[pdfStyles.tableCellRight, { flex: 1.2 }]}>
+                    <Text>{formatCurrency(group.egg_hpp_rp_per_kg)}</Text>
+                  </View>
+                  <View style={[pdfStyles.tableCellRight, { flex: 1.2 }]}>
+                    <Text>{formatCurrency(group.remaining_value_rp)}</Text>
+                  </View>
+                </View>
+              )
+            )}
+          </View>
+        </View>
+
+        {/* Detail Per Kandang Section */}
+        <View style={pdfStyles.supplierSectionBreak}>
+          <Text style={pdfStyles.supplierTitle}>Detail Per Kandang</Text>
+
+          <View style={pdfStyles.table}>
+            {/* Table Header */}
+            <View style={[pdfStyles.tableRow, pdfStyles.tableHeader]}>
+              <View style={[pdfStyles.tableCellHeader, { flex: 0.5 }]}>
+                <Text>No</Text>
+              </View>
+              <View style={[pdfStyles.tableCellHeader, { flex: 1.5 }]}>
+                <Text>Kandang</Text>
+              </View>
+              <View style={[pdfStyles.tableCellHeader, { flex: 1 }]}>
+                <Text>Rentang BW</Text>
+              </View>
+              <View style={[pdfStyles.tableCellHeaderRight, { flex: 1 }]}>
+                <Text>Rata-Rata Bobot (Kg)</Text>
+              </View>
+              <View style={[pdfStyles.tableCellHeaderRight, { flex: 0.8 }]}>
+                <Text>Sisa Ekor</Text>
+              </View>
+              <View style={[pdfStyles.tableCellHeaderRight, { flex: 0.8 }]}>
+                <Text>Sisa Kg (Ayam)</Text>
+              </View>
+              <View style={[pdfStyles.tableCellHeaderRight, { flex: 0.8 }]}>
+                <Text>Produksi Telur (Butir)</Text>
+              </View>
+              <View style={[pdfStyles.tableCellHeaderRight, { flex: 0.8 }]}>
+                <Text>Produksi Telur (Kg)</Text>
+              </View>
+              <View style={[pdfStyles.tableCellHeader, { flex: 1.2 }]}>
+                <Text>Feed (Supplier)</Text>
+              </View>
+              <View style={[pdfStyles.tableCellHeader, { flex: 1 }]}>
+                <Text>DOC (Supplier)</Text>
+              </View>
+              <View style={[pdfStyles.tableCellHeaderRight, { flex: 1.2 }]}>
+                <Text>Rata-Rata Harga DOC</Text>
+              </View>
+              <View style={[pdfStyles.tableCellHeaderRight, { flex: 1.2 }]}>
+                <Text>Nilai Nominal Telur</Text>
+              </View>
+              <View style={[pdfStyles.tableCellHeaderRight, { flex: 0.8 }]}>
+                <Text>HPP Ayam</Text>
+              </View>
+              <View style={[pdfStyles.tableCellHeaderRight, { flex: 1 }]}>
+                <Text>HPP Telur (RP/KG)</Text>
+              </View>
+              <View style={[pdfStyles.tableCellHeaderRight, { flex: 1.2 }]}>
+                <Text>Nominal Sisa</Text>
+              </View>
+            </View>
+
+            {/* Table Body - Detail Per Kandang */}
+            {data.rows.map((item: HppPerKandangRow, index: number) => (
+              <View
+                key={index}
+                style={[
+                  pdfStyles.tableRow,
+                  index < data.rows.length - 1
+                    ? pdfStyles.tableBorderBottom
+                    : {},
+                ]}
+              >
+                <View style={[pdfStyles.tableCellCenter, { flex: 0.5 }]}>
+                  <Text>{index + 1}</Text>
+                </View>
+                <View style={[pdfStyles.tableCell, { flex: 1.5 }]}>
+                  <Text>{item.kandang?.name || '-'}</Text>
+                </View>
+                <View style={[pdfStyles.tableCell, { flex: 1 }]}>
+                  <Text>
+                    {item.weight_range.weight_min.toFixed(2)} -{' '}
+                    {item.weight_range.weight_max.toFixed(2)}
+                  </Text>
+                </View>
+                <View style={[pdfStyles.tableCellRight, { flex: 1 }]}>
+                  <Text>{formatNumber(item.avg_weight_kg)}</Text>
+                </View>
+                <View style={[pdfStyles.tableCellRight, { flex: 0.8 }]}>
+                  <Text>{formatNumber(item.remaining_chicken_birds)}</Text>
+                </View>
+                <View style={[pdfStyles.tableCellRight, { flex: 0.8 }]}>
+                  <Text>{formatNumber(item.remaining_chicken_weight_kg)}</Text>
+                </View>
+                <View style={[pdfStyles.tableCellRight, { flex: 0.8 }]}>
+                  <Text>{formatNumber(item.egg_production_pieces)}</Text>
+                </View>
+                <View style={[pdfStyles.tableCellRight, { flex: 0.8 }]}>
+                  <Text>{formatNumber(item.egg_production_kg)}</Text>
+                </View>
+                <View style={[pdfStyles.tableCell, { flex: 1.2 }]}>
+                  <Text>
+                    {item.feed_suppliers
+                      ?.map(
+                        (s: { alias?: string; name: string }) =>
+                          s.alias || s.name
+                      )
+                      .join(' | ')}
+                  </Text>
+                </View>
+                <View style={[pdfStyles.tableCell, { flex: 1 }]}>
+                  <Text>
+                    {item.doc_suppliers
+                      ?.map(
+                        (s: { alias?: string; name: string }) =>
+                          s.alias || s.name
+                      )
+                      .join(' | ')}
+                  </Text>
+                </View>
+                <View style={[pdfStyles.tableCellRight, { flex: 1.2 }]}>
+                  <Text>{formatCurrency(item.average_doc_price_rp)}</Text>
+                </View>
+                <View style={[pdfStyles.tableCellRight, { flex: 1.2 }]}>
+                  <Text>{formatCurrency(item.egg_value_rp)}</Text>
+                </View>
+                <View style={[pdfStyles.tableCellRight, { flex: 0.8 }]}>
+                  <Text>{formatCurrency(item.hpp_rp)}</Text>
+                </View>
+                <View style={[pdfStyles.tableCellRight, { flex: 1 }]}>
+                  <Text>{formatCurrency(item.egg_hpp_rp_per_kg)}</Text>
+                </View>
+                <View style={[pdfStyles.tableCellRight, { flex: 1.2 }]}>
+                  <Text>{formatCurrency(item.remaining_value_rp)}</Text>
+                </View>
+              </View>
+            ))}
+          </View>
+        </View>
+      </Page>
+    </Document>
+  );
+};
+
+export const generateHppPerKandangPDF = async (
+  data: HppPerKandangExportParams['data'],
+  params: HppPerKandangExportParams['params']
+): Promise<void> => {
+  const PDFDocument = createPDFDocument(data, params);
+
+  try {
+    const blob = await pdf(PDFDocument).toBlob();
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement('a');
+    link.href = url;
+
+    const period = params.period || formatDate(new Date(), 'YYYY-MM-DD');
+    link.download = `laporan-hpp-harian-kandang-periode-${period}.pdf`;
+
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+    URL.revokeObjectURL(url);
+  } catch (error) {
+    throw error;
+  }
+};

src/components/pages/report/sale/tab/HppPerKandangTab.tsx

@@ -0,0 +1,959 @@
+import { useState, useMemo, useCallback } from 'react';
+import { ChangeEventHandler } from 'react';
+import useSWR from 'swr';
+import Card from '@/components/Card';
+import SelectInput, {
+  useSelect,
+  OptionType,
+} from '@/components/input/SelectInput';
+import DateInput from '@/components/input/DateInput';
+import NumberInput from '@/components/input/NumberInput';
+import { AreaApi } from '@/services/api/master-data';
+import { LocationApi } from '@/services/api/master-data';
+import { KandangApi } from '@/services/api/master-data';
+import { SaleReportApi } from '@/services/api/report/marketing-sale';
+import Table from '@/components/Table';
+import { ColumnDef, Row, flexRender } from '@tanstack/react-table';
+import { formatCurrency, formatNumber } from '@/lib/helper';
+import {
+  HppPerKandangReport,
+  HppPerKandangRow,
+  HppPerKandangPerWeightRange,
+} from '@/types/api/report/hpp-per-kandang';
+import { isResponseSuccess } from '@/lib/api-helper';
+import { useTableFilter } from '@/services/hooks/useTableFilter';
+import Button from '@/components/Button';
+import Dropdown from '@/components/Dropdown';
+import MenuItem from '@/components/menu/MenuItem';
+import Menu from '@/components/menu/Menu';
+import { generateHppPerKandangPDF } from '../export/HppPerkandangExport';
+import toast from 'react-hot-toast';
+import * as XLSX from 'xlsx';
+import { Icon } from '@iconify/react';
+
+const HppPerKandangTab = () => {
+  // ===== STATE MANAGEMENT =====
+  const [isPdfExportLoading, setIsPdfExportLoading] = useState(false);
+  const [isExcelExportLoading, setIsExcelExportLoading] = useState(false);
+  const isAnyExportLoading = isPdfExportLoading || isExcelExportLoading;
+
+  // ===== SUBMISSION STATE =====
+  const [isSubmitted, setIsSubmitted] = useState(false);
+
+  // ===== TABLE FILTER STATE =====
+  const { state: tableFilterState, updateFilter } = useTableFilter({
+    initial: {
+      area_id: [] as string[],
+      location_id: [] as string[],
+      kandang_id: [] as string[],
+      weight_min: '',
+      weight_max: '',
+      period: '',
+      sort_by: '',
+      show_unrecorded: false,
+    },
+    paramMap: {
+      page: 'page',
+      pageSize: 'limit',
+    },
+  });
+
+  const { options: areaOptions, isLoadingOptions: isLoadingAreas } = useSelect(
+    AreaApi.basePath,
+    'id',
+    'name',
+    'search'
+  );
+
+  const { options: locationOptions, isLoadingOptions: isLoadingLocations } =
+    useSelect(LocationApi.basePath, 'id', 'name', 'search');
+
+  const { options: kandangOptions, isLoadingOptions: isLoadingKandangs } =
+    useSelect(KandangApi.basePath, 'id', 'name', 'search');
+
+  const showUnrecordedOptions: OptionType[] = [
+    { value: 'false', label: 'Sembunyikan' },
+    { value: 'true', label: 'Tampilkan' },
+  ];
+
+  const areaChangeHandler = useCallback(
+    (val: OptionType | OptionType[] | null) => {
+      const arr = Array.isArray(val) ? val : val ? [val] : [];
+      updateFilter(
+        'area_id',
+        arr.map((v) => String((v as OptionType).value))
+      );
+      setIsSubmitted(false);
+    },
+    [updateFilter]
+  );
+
+  const locationChangeHandler = useCallback(
+    (val: OptionType | OptionType[] | null) => {
+      const arr = Array.isArray(val) ? val : val ? [val] : [];
+      updateFilter(
+        'location_id',
+        arr.map((v) => String((v as OptionType).value))
+      );
+      setIsSubmitted(false);
+    },
+    [updateFilter]
+  );
+
+  const kandangChangeHandler = useCallback(
+    (val: OptionType | OptionType[] | null) => {
+      const arr = Array.isArray(val) ? val : val ? [val] : [];
+      updateFilter(
+        'kandang_id',
+        arr.map((v) => String((v as OptionType).value))
+      );
+      setIsSubmitted(false);
+    },
+    [updateFilter]
+  );
+
+  const weightMinChangeHandler = useCallback<
+    ChangeEventHandler<HTMLInputElement>
+  >(
+    (e) => {
+      const val = e.target.value;
+      updateFilter('weight_min', val ? String(parseFloat(val) || 0) : '');
+      setIsSubmitted(false);
+    },
+    [updateFilter]
+  );
+
+  const weightMaxChangeHandler = useCallback<
+    ChangeEventHandler<HTMLInputElement>
+  >(
+    (e) => {
+      const val = e.target.value;
+      updateFilter('weight_max', val ? String(parseFloat(val) || 0) : '');
+      setIsSubmitted(false);
+    },
+    [updateFilter]
+  );
+
+  const periodChangeHandler = useCallback<ChangeEventHandler<HTMLInputElement>>(
+    (e) => {
+      const val = e.target.value;
+      updateFilter('period', val || '');
+      setIsSubmitted(false);
+    },
+    [updateFilter]
+  );
+
+  const showUnrecordedChangeHandler = useCallback(
+    (val: OptionType | OptionType[] | null) => {
+      const newVal = val as OptionType;
+      updateFilter('show_unrecorded', newVal?.value === 'true');
+      setIsSubmitted(false);
+    },
+    [updateFilter]
+  );
+
+  const resetFilters = useCallback(() => {
+    updateFilter('area_id', []);
+    updateFilter('location_id', []);
+    updateFilter('kandang_id', []);
+    updateFilter('weight_min', '');
+    updateFilter('weight_max', '');
+    updateFilter('period', '');
+    updateFilter('sort_by', '');
+    updateFilter('show_unrecorded', false);
+    setIsSubmitted(false);
+  }, [updateFilter]);
+
+  const handleSubmit = useCallback(() => {
+    if (!tableFilterState.period) {
+      toast.error('Periode wajib diisi');
+      return;
+    }
+    setIsSubmitted(true);
+  }, [tableFilterState.period]);
+
+  // ===== DATA FETCHING =====
+  const { data: hppPerKandang, isLoading } = useSWR(
+    isSubmitted
+      ? () => {
+          const params = {
+            area_id:
+              tableFilterState.area_id.length > 0
+                ? tableFilterState.area_id.join(',')
+                : undefined,
+            location_id:
+              tableFilterState.location_id.length > 0
+                ? tableFilterState.location_id.join(',')
+                : undefined,
+            kandang_id:
+              tableFilterState.kandang_id.length > 0
+                ? tableFilterState.kandang_id.join(',')
+                : undefined,
+            weight_min: tableFilterState.weight_min || undefined,
+            weight_max: tableFilterState.weight_max || undefined,
+            period: tableFilterState.period || undefined,
+            sort_by: tableFilterState.sort_by || undefined,
+            show_unrecorded: tableFilterState.show_unrecorded,
+          };
+
+          return ['hpp-per-kandang-report', params];
+        }
+      : null,
+    ([, params]) =>
+      SaleReportApi.getHppPerKandangReport(
+        params.area_id,
+        params.location_id,
+        params.kandang_id,
+        params.weight_min,
+        params.weight_max,
+        params.period,
+        params.sort_by,
+        params.show_unrecorded
+      )
+  );
+
+  const data: HppPerKandangReport['rows'] = useMemo(
+    () =>
+      isResponseSuccess(hppPerKandang)
+        ? (hppPerKandang?.data?.rows as HppPerKandangReport['rows']) || []
+        : [],
+    [hppPerKandang]
+  );
+
+  const summaryTotal =
+    isResponseSuccess(hppPerKandang) && hppPerKandang?.data?.summary?.total
+      ? hppPerKandang.data.summary.total
+      : undefined;
+
+  const perWeightRangeSummary = useMemo(
+    () =>
+      isResponseSuccess(hppPerKandang) &&
+      hppPerKandang?.data?.summary?.per_weight_range
+        ? hppPerKandang.data.summary.per_weight_range
+        : [],
+    [hppPerKandang]
+  );
+
+  const period =
+    isResponseSuccess(hppPerKandang) && hppPerKandang?.data?.period
+      ? hppPerKandang.data.period
+      : undefined;
+
+  // ===== EXPORT DATA FETCHER =====
+  const hppPerKandangExport =
+    useCallback(async (): Promise<HppPerKandangReport | null> => {
+      const params = {
+        area_id:
+          tableFilterState.area_id.length > 0
+            ? tableFilterState.area_id.join(',')
+            : undefined,
+        location_id:
+          tableFilterState.location_id.length > 0
+            ? tableFilterState.location_id.join(',')
+            : undefined,
+        kandang_id:
+          tableFilterState.kandang_id.length > 0
+            ? tableFilterState.kandang_id.join(',')
+            : undefined,
+        weight_min: tableFilterState.weight_min || undefined,
+        weight_max: tableFilterState.weight_max || undefined,
+        period: tableFilterState.period || undefined,
+        sort_by: tableFilterState.sort_by || undefined,
+        show_unrecorded: tableFilterState.show_unrecorded,
+        limit: 10000,
+        page: 1,
+      };
+
+      const response = await SaleReportApi.getHppPerKandangReport(
+        params.area_id,
+        params.location_id,
+        params.kandang_id,
+        params.weight_min,
+        params.weight_max,
+        params.period,
+        params.sort_by,
+        params.show_unrecorded
+      );
+
+      return isResponseSuccess(response) ? response.data : null;
+    }, [tableFilterState]);
+
+  // ===== TABLE COLUMNS DEFINITION =====
+  const allFeedSuppliers = useMemo(() => {
+    const suppliers = new Set<string>();
+    data.forEach((item: HppPerKandangRow) => {
+      item.feed_suppliers?.forEach((s: { alias?: string; name: string }) => {
+        suppliers.add(s.alias || s.name);
+      });
+    });
+    return Array.from(suppliers).join(' | ');
+  }, [data]);
+
+  const allDocSuppliers = useMemo(() => {
+    const suppliers = new Set<string>();
+    data.forEach((item: HppPerKandangRow) => {
+      item.doc_suppliers?.forEach((s: { alias?: string; name: string }) => {
+        suppliers.add(s.alias || s.name);
+      });
+    });
+    return Array.from(suppliers).join(' | ');
+  }, [data]);
+
+  // ===== EXPORT HANDLERS =====
+  const handleExportExcel = useCallback(async () => {
+    setIsExcelExportLoading(true);
+    try {
+      const allDataForExport = await hppPerKandangExport();
+
+      if (
+        !allDataForExport ||
+        !allDataForExport?.rows ||
+        allDataForExport.rows.length === 0
+      ) {
+        toast.error('Tidak ada data untuk diekspor.');
+        return;
+      }
+
+      const allExportData =
+        allDataForExport.rows as HppPerKandangReport['rows'];
+
+      const summaryTotal = allDataForExport.summary.total;
+
+      const excelData: { [key: string]: string | number }[] = allExportData.map(
+        (item: HppPerKandangRow, index: number) => ({
+          No: index + 1,
+          Kandang: item.kandang?.name || '',
+          'Rentang Bobot': item.weight_range
+            ? `${formatNumber(item.weight_range.weight_min)} - ${formatNumber(item.weight_range.weight_max)}`
+            : '',
+          'Rata-Rata Bobot (KG)': item.avg_weight_kg || 0,
+          'Sisa Ayam (Ekor)': item.remaining_chicken_birds || 0,
+          'Sisa Ayam (KG)': item.remaining_chicken_weight_kg || 0,
+          'Produksi Telur (Butir)': item.egg_production_pieces || 0,
+          'Produksi Telur (KG)': item.egg_production_kg || 0,
+          'Feed (Supplier)':
+            item.feed_suppliers
+              ?.map((s: { alias?: string; name: string }) => s.alias || s.name)
+              .join(' | ') || '',
+          'DOC (Supplier)':
+            item.doc_suppliers
+              ?.map((s: { alias?: string; name: string }) => s.alias || s.name)
+              .join(' | ') || '',
+          'Rata-Rata Harga DOC (RP)': item.average_doc_price_rp || 0,
+          'Nilai Nominal Telur (RP)': item.egg_value_rp || 0,
+          'HPP Ayam (RP)': item.hpp_rp || 0,
+          'HPP Telur (RP/KG)': item.egg_hpp_rp_per_kg || 0,
+          'Nilai Nominal Sisa Ayam (RP)': item.remaining_value_rp || 0,
+        })
+      );
+
+      excelData.push({
+        No: 'TOTAL',
+        Kandang: 'ALL',
+        'Rentang Bobot': '-',
+        'Rata-Rata Bobot (KG)': summaryTotal?.average_weight_kg || 0,
+        'Sisa Ayam (Ekor)': summaryTotal?.total_remaining_chicken_birds || 0,
+        'Sisa Ayam (KG)': summaryTotal?.total_remaining_chicken_weight_kg || 0,
+        'Produksi Telur (Butir)':
+          summaryTotal?.total_egg_production_pieces || 0,
+        'Produksi Telur (KG)': summaryTotal?.total_egg_production_kg || 0,
+        'Feed (Supplier)': allFeedSuppliers,
+        'DOC (Supplier)': allDocSuppliers,
+        'Rata-Rata Harga DOC (RP)':
+          summaryTotal?.total_average_doc_price_rp || 0,
+        'Nilai Nominal Telur (RP)': summaryTotal?.total_egg_value_rp || 0,
+        'HPP Ayam (RP)': summaryTotal?.total_hpp_rp || 0,
+        'HPP Telur (RP/KG)': summaryTotal?.average_egg_hpp_rp_per_kg || 0,
+        'Nilai Nominal Sisa Ayam (RP)':
+          summaryTotal?.total_remaining_value_rp || 0,
+      });
+
+      const worksheet = XLSX.utils.json_to_sheet(excelData);
+
+      const colWidths = [
+        { wch: 5 }, // No
+        { wch: 30 }, // Kandang
+        { wch: 15 }, // Rentang Bobot
+        { wch: 18 }, // Rata-Rata Bobot (KG)
+        { wch: 15 }, // Sisa Ayam (Ekor)
+        { wch: 15 }, // Sisa Ayam (KG)
+        { wch: 18 }, // Produksi Telur (Butir)
+        { wch: 18 }, // Produksi Telur (KG)
+        { wch: 20 }, // Feed (Supplier)
+        { wch: 20 }, // DOC (Supplier)
+        { wch: 20 }, // Rata-Rata Harga DOC (RP)
+        { wch: 20 }, // Nilai Nominal Telur (RP)
+        { wch: 15 }, // HPP Ayam (RP)
+        { wch: 18 }, // HPP Telur (RP/KG)
+        { wch: 25 }, // Nilai Nominal Sisa Ayam (RP)
+      ];
+      worksheet['!cols'] = colWidths;
+
+      const workbook = XLSX.utils.book_new();
+      XLSX.utils.book_append_sheet(workbook, worksheet, 'HPP Per Kandang');
+
+      const filename = `laporan-hpp-harian-kandang-periode-${tableFilterState.period}.xlsx`;
+
+      XLSX.writeFile(workbook, filename);
+      toast.success('Excel berhasil dibuat dan diunduh.');
+    } catch {
+      toast.error('Gagal membuat Excel. Silakan coba lagi.');
+    } finally {
+      setIsExcelExportLoading(false);
+    }
+  }, [
+    hppPerKandangExport,
+    tableFilterState,
+    areaOptions,
+    locationOptions,
+    kandangOptions,
+  ]);
+
+  const handleExportPDF = useCallback(async () => {
+    setIsPdfExportLoading(true);
+    try {
+      const allDataForExport = await hppPerKandangExport();
+
+      if (
+        !allDataForExport ||
+        !allDataForExport?.rows ||
+        allDataForExport.rows.length === 0
+      ) {
+        toast.error('Tidak ada data untuk diekspor.');
+        return;
+      }
+
+      const areaName =
+        tableFilterState.area_id.length > 0
+          ? tableFilterState.area_id
+              .map(
+                (id) =>
+                  areaOptions.find((opt) => opt.value === Number(id))?.label
+              )
+              .filter(Boolean)
+              .join(', ') || 'Semua Area'
+          : 'Semua Area';
+
+      const locationName =
+        tableFilterState.location_id.length > 0
+          ? tableFilterState.location_id
+              .map(
+                (id) =>
+                  locationOptions.find((opt) => opt.value === Number(id))?.label
+              )
+              .filter(Boolean)
+              .join(', ') || 'Semua Lokasi'
+          : 'Semua Lokasi';
+
+      const kandangName =
+        tableFilterState.kandang_id.length > 0
+          ? tableFilterState.kandang_id
+              .map(
+                (id) =>
+                  kandangOptions.find((opt) => opt.value === Number(id))?.label
+              )
+              .filter(Boolean)
+              .join(', ') || 'Semua Kandang'
+          : 'Semua Kandang';
+
+      await generateHppPerKandangPDF(allDataForExport, {
+        area_name: areaName,
+        location_name: locationName,
+        kandang_name: kandangName,
+        period: tableFilterState.period,
+        weight_min: tableFilterState.weight_min,
+        weight_max: tableFilterState.weight_max,
+        show_unrecorded: tableFilterState.show_unrecorded.toString(),
+        sort_by: tableFilterState.sort_by,
+      });
+
+      toast.success('PDF berhasil dibuat dan diunduh.');
+    } catch {
+      toast.error('Gagal membuat PDF. Silakan coba lagi.');
+    } finally {
+      setIsPdfExportLoading(false);
+    }
+  }, [
+    hppPerKandangExport,
+    tableFilterState,
+    areaOptions,
+    locationOptions,
+    kandangOptions,
+  ]);
+
+  const getTableColumns = (): ColumnDef<HppPerKandangReport['rows'][0]>[] => {
+    const tableColumns: ColumnDef<HppPerKandangReport['rows'][0]>[] = [
+      {
+        id: 'no',
+        header: 'No',
+        cell: (props) => props.row.index + 1,
+        footer: () => <div className='font-semibold text-gray-900'>TOTAL</div>,
+      },
+      {
+        id: 'kandang_name',
+        header: 'Kandang',
+        accessorKey: 'kandang.name',
+        cell: (props) => {
+          const kandang = props.row.original.kandang;
+          return kandang?.name || '-';
+        },
+        footer: () => <div className='font-semibold text-gray-900'>ALL</div>,
+      },
+      {
+        id: 'weight_range',
+        header: 'Rentang Bobot',
+        accessorKey: 'weight_range',
+        cell: (props) => {
+          const weightRange = props.row.original.weight_range;
+          return weightRange
+            ? `${formatNumber(weightRange.weight_min)} - ${formatNumber(weightRange.weight_max)}`
+            : '-';
+        },
+        footer: () => <div className='font-semibold text-gray-900'>-</div>,
+      },
+      {
+        id: 'avg_weight_kg',
+        header: 'Rata-Rata Bobot (KG)',
+        accessorKey: 'avg_weight_kg',
+        cell: (props) => {
+          const value = props.row.original.avg_weight_kg;
+          return <div className='text-right'>{formatNumber(value)}</div>;
+        },
+        footer: () => (
+          <div className='text-right font-semibold text-gray-900'>
+            {formatNumber(summaryTotal?.average_weight_kg || 0)}
+          </div>
+        ),
+      },
+      {
+        id: 'remaining_chicken_birds',
+        header: 'Sisa Ayam (Ekor)',
+        accessorKey: 'remaining_chicken_birds',
+        cell: (props) => {
+          const value = props.row.original.remaining_chicken_birds;
+          return <div className='text-right'>{formatNumber(value)}</div>;
+        },
+        footer: () => (
+          <div className='text-right font-semibold text-gray-900'>
+            {formatNumber(summaryTotal?.total_remaining_chicken_birds || 0)}
+          </div>
+        ),
+      },
+      {
+        id: 'remaining_chicken_weight_kg',
+        header: 'Sisa Ayam (KG)',
+        accessorKey: 'remaining_chicken_weight_kg',
+        cell: (props) => {
+          const value = props.row.original.remaining_chicken_weight_kg;
+          return <div className='text-right'>{formatNumber(value)}</div>;
+        },
+        footer: () => (
+          <div className='text-right font-semibold text-gray-900'>
+            {formatNumber(summaryTotal?.total_remaining_chicken_weight_kg || 0)}
+          </div>
+        ),
+      },
+      {
+        id: 'egg_production_pieces',
+        header: 'Produksi Telur (Butir)',
+        accessorKey: 'egg_production_pieces',
+        cell: (props) => {
+          const value = props.row.original.egg_production_pieces;
+          return <div className='text-right'>{formatNumber(value)}</div>;
+        },
+        footer: () => (
+          <div className='text-right font-semibold text-gray-900'>
+            {formatNumber(summaryTotal?.total_egg_production_pieces || 0)}
+          </div>
+        ),
+      },
+      {
+        id: 'egg_production_kg',
+        header: 'Produksi Telur (KG)',
+        accessorKey: 'egg_production_kg',
+        cell: (props) => {
+          const value = props.row.original.egg_production_kg;
+          return <div className='text-right'>{formatNumber(value)}</div>;
+        },
+        footer: () => (
+          <div className='text-right font-semibold text-gray-900'>
+            {formatNumber(summaryTotal?.total_remaining_chicken_weight_kg || 0)}
+          </div>
+        ),
+      },
+      {
+        id: 'feed_suppliers',
+        header: 'Feed (Supplier)',
+        accessorKey: 'feed_suppliers',
+        cell: (props) => {
+          const suppliers = props.row.original.feed_suppliers;
+          return (
+            suppliers
+              ?.map((s: { alias?: string; name: string }) => s.alias || s.name)
+              .join(' | ') || '-'
+          );
+        },
+        footer: () => (
+          <div className='font-semibold text-gray-900'>
+            {allFeedSuppliers || '-'}
+          </div>
+        ),
+      },
+      {
+        id: 'doc_suppliers',
+        header: 'DOC (Supplier)',
+        accessorKey: 'doc_suppliers',
+        cell: (props) => {
+          const suppliers = props.row.original.doc_suppliers;
+          return (
+            suppliers
+              ?.map((s: { alias?: string; name: string }) => s.alias || s.name)
+              .join(' | ') || '-'
+          );
+        },
+        footer: () => (
+          <div className='font-semibold text-gray-900'>
+            {allDocSuppliers || '-'}
+          </div>
+        ),
+      },
+      {
+        id: 'average_doc_price_rp',
+        header: 'Rata-Rata Harga DOC (RP)',
+        accessorKey: 'average_doc_price_rp',
+        cell: (props) => {
+          const value = props.row.original.average_doc_price_rp;
+          return <div className='text-right'>{formatCurrency(value)}</div>;
+        },
+        footer: () => (
+          <div className='text-right font-semibold text-gray-900'>
+            {formatCurrency(summaryTotal?.total_average_doc_price_rp || 0)}
+          </div>
+        ),
+      },
+      {
+        id: 'egg_value_rp',
+        header: 'Nilai Nominal Telur (RP)',
+        accessorKey: 'egg_value_rp',
+        cell: (props) => {
+          const value = props.row.original.egg_value_rp;
+          return <div className='text-right'>{formatCurrency(value)}</div>;
+        },
+        footer: () => (
+          <div className='text-right font-semibold text-gray-900'>
+            {formatCurrency(summaryTotal?.total_egg_value_rp || 0)}
+          </div>
+        ),
+      },
+      {
+        id: 'hpp_rp',
+        header: 'HPP Ayam (RP)',
+        accessorKey: 'hpp_rp',
+        cell: (props) => {
+          const value = props.row.original.hpp_rp;
+          return <div className='text-right'>{formatCurrency(value)}</div>;
+        },
+        footer: () => (
+          <div className='text-right font-semibold text-gray-900'>
+            {formatCurrency(summaryTotal?.total_hpp_rp || 0)}
+          </div>
+        ),
+      },
+      {
+        id: 'egg_hpp_rp_per_kg',
+        header: 'HPP Telur (RP/KG)',
+        accessorKey: 'egg_hpp_rp_per_kg',
+        cell: (props) => {
+          const value = props.row.original.egg_hpp_rp_per_kg;
+          return <div className='text-right'>{formatCurrency(value)}</div>;
+        },
+        footer: () => (
+          <div className='text-right font-semibold text-gray-900'>
+            {formatCurrency(summaryTotal?.average_egg_hpp_rp_per_kg || 0)}
+          </div>
+        ),
+      },
+      {
+        id: 'remaining_value_rp',
+        header: 'Nilai Nominal Sisa Ayam (RP)',
+        accessorKey: 'remaining_value_rp',
+        cell: (props) => {
+          const value = props.row.original.remaining_value_rp;
+          return <div className='text-right'>{formatCurrency(value)}</div>;
+        },
+        footer: () => (
+          <div className='text-right font-semibold text-gray-900'>
+            {formatCurrency(summaryTotal?.total_remaining_value_rp || 0)}
+          </div>
+        ),
+      },
+    ];
+    return tableColumns;
+  };
+
+  // ===== CUSTOM ROW RENDERER =====
+  const renderCustomRow = useCallback(
+    (row: Row<HppPerKandangReport['rows'][0]>) => {
+      if (row.index === data.length - 1) {
+        const defaultRow = (
+          <tr
+            key={row.id}
+            className='hover:bg-gray-50 transition-colors border-b border-l border-r border-b-gray-200 border-l-gray-200 border-r-gray-200'
+          >
+            {row.getVisibleCells().map((cell) => (
+              <td
+                key={cell.id}
+                className='px-4 py-3 text-xs text-gray-900 whitespace-nowrap  border-gray-200'
+              >
+                {flexRender(cell.column.columnDef.cell, cell.getContext())}
+              </td>
+            ))}
+          </tr>
+        );
+
+        const customRows = [
+          <tr
+            className='border-b border-l border-r border-b-gray-200 border-l-gray-200 border-r-gray-200'
+            key={'rekapitulasi-row'}
+          >
+            <td
+              colSpan={15}
+              className='px-4 py-3 text-gray-900 text-center font-semibold'
+            >
+              Rekapitulasi per rentang bobot
+            </td>
+          </tr>,
+        ];
+
+        if (perWeightRangeSummary.length > 0) {
+          perWeightRangeSummary.forEach(
+            (item: HppPerKandangPerWeightRange, index = 0) => {
+              customRows.push(
+                <tr
+                  key={`summary-${item.id}`}
+                  className='hover:bg-gray-50 transition-colors border-b border-l border-r border-b-gray-200 border-l-gray-200 border-r-gray-200 [&_td]:px-4 [&_td]:py-3 [&_td]:text-xs [&_td]:text-gray-900 [&_td]:whitespace-nowrap'
+                >
+                  <td className=''>{index + 1}</td>
+                  <td className=''>ALL</td>
+                  <td className=''>{item.label}</td>
+                  <td className='text-right'>
+                    {formatNumber(item.avg_weight_kg)}
+                  </td>
+                  <td className='text-right'>
+                    {formatNumber(item.remaining_chicken_birds)}
+                  </td>
+                  <td className='text-right'>
+                    {formatNumber(item.remaining_chicken_weight_kg)}
+                  </td>
+                  <td className='text-right'>
+                    {formatNumber(item.egg_production_pieces)}
+                  </td>
+                  <td className='text-right'>
+                    {formatNumber(item.egg_production_kg)}
+                  </td>
+                  <td className=''>
+                    {item.feed_suppliers
+                      ?.map((s) => s.alias || s.name)
+                      .join(' | ') || '-'}
+                  </td>
+                  <td className=''>
+                    {item.doc_suppliers
+                      ?.map((s) => s.alias || s.name)
+                      .join(' | ') || '-'}
+                  </td>
+                  <td className='text-right'>
+                    {formatCurrency(item.average_doc_price_rp)}
+                  </td>
+                  <td className='text-right'>
+                    {formatCurrency(item.egg_value_rp)}
+                  </td>
+                  <td className='text-right'>{formatCurrency(item.hpp_rp)}</td>
+                  <td className='text-right'>
+                    {formatCurrency(item.egg_hpp_rp_per_kg)}
+                  </td>
+                  <td className='text-right'>
+                    {formatCurrency(item.remaining_value_rp)}
+                  </td>
+                </tr>
+              );
+            }
+          );
+        }
+
+        return [defaultRow, ...customRows];
+      }
+
+      return null;
+    },
+    [data, perWeightRangeSummary]
+  );
+
+  return (
+    <div className='w-full p-0 sm:p-4'>
+      <Card
+        subtitle={
+          period
+            ? `Laporan > HPP Harian Kandang (${period})`
+            : 'Laporan > HPP Harian Kandang'
+        }
+        className={{ wrapper: 'w-full', body: 'p-1!' }}
+      >
+        <div className='grid md:grid-cols-3 grid-cols-1 gap-4'>
+          <SelectInput
+            label='Area'
+            placeholder='Pilih Area'
+            isMulti
+            options={areaOptions}
+            value={areaOptions.filter((opt) =>
+              (tableFilterState.area_id || [])
+                .map(String)
+                .includes(String(opt.value))
+            )}
+            onChange={areaChangeHandler}
+            isLoading={isLoadingAreas}
+            isClearable
+          />
+          <SelectInput
+            label='Lokasi'
+            placeholder='Pilih Lokasi'
+            isMulti
+            options={locationOptions}
+            value={locationOptions.filter((opt) =>
+              (tableFilterState.location_id || [])
+                .map(String)
+                .includes(String(opt.value))
+            )}
+            onChange={locationChangeHandler}
+            isLoading={isLoadingLocations}
+            isClearable
+          />
+          <SelectInput
+            label='Kandang'
+            placeholder='Pilih Kandang'
+            isMulti
+            options={kandangOptions}
+            value={kandangOptions.filter((opt) =>
+              (tableFilterState.kandang_id || [])
+                .map(String)
+                .includes(String(opt.value))
+            )}
+            onChange={kandangChangeHandler}
+            isLoading={isLoadingKandangs}
+            isClearable
+          />
+        </div>
+
+        <div className='grid md:grid-cols-3 grid-cols-1 gap-4'>
+          <div className='flex flex-row gap-4'>
+            <NumberInput
+              label='Rentang Bobot Min (Kg)'
+              name='weight_min'
+              placeholder='Masukkan bobot minimum'
+              value={tableFilterState.weight_min}
+              onChange={weightMinChangeHandler}
+            />
+            <NumberInput
+              label='Rentang Bobot Max (Kg)'
+              name='weight_max'
+              placeholder='Masukkan bobot maximum'
+              value={tableFilterState.weight_max}
+              onChange={weightMaxChangeHandler}
+            />
+          </div>
+          <DateInput
+            label='Periode'
+            name='period'
+            placeholder='Pilih Periode'
+            value={tableFilterState.period}
+            onChange={periodChangeHandler}
+            required
+          />
+          <SelectInput
+            label='Tampilkan Kandang Tanpa Recording'
+            placeholder='Pilih Opsi'
+            options={showUnrecordedOptions}
+            value={
+              tableFilterState.show_unrecorded
+                ? showUnrecordedOptions.find((opt) => opt.value === 'true') ||
+                  null
+                : showUnrecordedOptions.find((opt) => opt.value === 'false') ||
+                  null
+            }
+            onChange={showUnrecordedChangeHandler}
+          />
+        </div>
+
+        <div className='mt-4 flex justify-end gap-2 [&_button]:px-4'>
+          <Button color='primary' onClick={handleSubmit}>
+            <Icon icon='heroicons:magnifying-glass' width={20} height={20} />
+            Cari
+          </Button>
+          <Button color='warning' onClick={resetFilters}>
+            <Icon icon='heroicons-outline:refresh' width={20} height={20} />
+            Reset
+          </Button>
+          <Dropdown
+            trigger={
+              <Button color='success' isLoading={isAnyExportLoading}>
+                Export
+                <Icon
+                  icon='heroicons-outline:download'
+                  width={20}
+                  height={20}
+                />
+              </Button>
+            }
+            align='end'
+          >
+            <Menu className='w-32'>
+              <MenuItem title='Excel' onClick={handleExportExcel} />
+              <MenuItem title='PDF' onClick={handleExportPDF} />
+            </Menu>
+          </Dropdown>
+        </div>
+
+        <div className='divider'></div>
+
+        {!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
+            data={data}
+            columns={getTableColumns()}
+            renderFooter={data.length > 0}
+            renderCustomRow={renderCustomRow}
+            className={{
+              containerClassName: 'w-full mt-6',
+              tableWrapperClassName: 'overflow-x-auto mt-4',
+              tableClassName: 'w-full table-auto text-sm',
+              headerRowClassName: 'border-b border-b-gray-200 bg-gray-50',
+              headerColumnClassName:
+                'px-4 py-3 text-xs font-semibold text-gray-700 text-left border border-gray-200',
+              bodyRowClassName:
+                'hover:bg-gray-50 transition-colors border-b border-l border-r border-b-gray-200 border-l-gray-200 border-r-gray-200',
+              bodyColumnClassName:
+                'px-4 py-3 text-xs text-gray-900 whitespace-nowrap',
+              tableFooterClassName:
+                'bg-gray-100 font-semibold border border-gray-200',
+              footerRowClassName: 'border-t-2 border-gray-300',
+              footerColumnClassName:
+                'px-4 py-3 text-xs text-gray-900 whitespace-nowrap',
+            }}
+          />
+        )}
+      </Card>
+    </div>
+  );
+};
+
+export default HppPerKandangTab;

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_name: 'Pengajuan',
-  },
+  // {
+  //   step_number: 1,
+  //   step_name: 'Pengajuan',
+  // },
   {
     step_number: 2,
     step_name: 'Disetujui',

src/config/constant.ts

@@ -45,13 +45,32 @@ export const MAIN_DRAWER_LINKS: SidebarMenuItem[] = [
     link: '/closing',
     icon: 'heroicons-outline:presentation-chart-bar',
   },
+  {
+    text: 'Laporan',
+    link: '/report',
+    icon: 'mdi:chart-box-outline',
+    submenu: [
+      {
+        text: 'Logistik & Persediaan',
+        link: '/report/logistic-stock',
+      },
+      {
+        text: 'Biaya Operasional',
+        link: '/report/expense',
+      },
+      {
+        text: 'Penjualan',
+        link: '/report/marketing',
+      },
+    ],
+  },
   {
     text: 'Persediaan',
     link: '/inventory',
     icon: 'heroicons-outline:folder',
     submenu: [
       {
-        text: 'Produk',
+        text: 'Stok Produk',
         link: '/inventory/product',
       },
       {
@@ -251,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/services/api/closing.ts

@@ -3,15 +3,20 @@ import axios from 'axios';
 import { BaseApiService } from '@/services/api/base';
 import {
   Closing,
+  ClosingFinance,
   ClosingGeneralInformation,
   ClosingIncomingSapronak,
   ClosingOutgoingSapronak,
   ClosingOverhead,
   ClosingSapronakCalculation,
+  ClosingProductionData,
   ClosingHppExpedition,
 } from '@/types/api/closing';
-import { httpClient, httpClientFetcher } from '@/services/http/client';
 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,
@@ -20,47 +25,15 @@ import {
   dummyGetGeneralInfo,
   dummyGetPerhitunganSapronak,
   dummyGetOverhead,
+  dummyClosingProductionData,
 } from '@/dummy/closing.dummy';
-import { ClosingSales } from '@/types/api/closing';
+import { sleep } from '@/lib/helper';
 
 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> {
@@ -81,10 +54,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
     );
@@ -93,31 +62,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 dummyGetAllOutgoingSapronakFetcher();
-
-    // Uncomment this when backend is ready
-    // return await httpClientFetcher<BaseApiResponse<ClosingOutgoingSapronak[]>>(
-    //   endpoint
-    // );
+    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 =
@@ -135,22 +87,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>>(
@@ -172,17 +129,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, {
@@ -196,6 +142,22 @@ export class ClosingApiService extends BaseApiService<Closing, null, null> {
     }
   }
 
+  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;
+    }
+  }
+
   async getHppEkspedisi(
     id: number
   ): Promise<BaseApiResponse<ClosingHppExpedition> | undefined> {

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,23 @@
+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[]>> {
+    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/services/api/report/marketing-sale.ts

@@ -0,0 +1,53 @@
+import { BaseApiService } from '@/services/api/base';
+import { BaseApiResponse } from '@/types/api/api-general';
+import { HppPerKandangReport } from '@/types/api/report/hpp-per-kandang';
+
+export class MarketingSaleReportService extends BaseApiService<
+  HppPerKandangReport,
+  unknown,
+  unknown
+> {
+  constructor(basePath: string) {
+    super(basePath);
+  }
+
+  async getHppPerKandangReport(
+    area_id?: string,
+    location_id?: string,
+    kandang_id?: string,
+    weight_min?: string,
+    weight_max?: string,
+    period?: string,
+    sort_by?: string,
+    show_unrecorded?: boolean,
+    page?: number,
+    limit?: number
+  ): Promise<BaseApiResponse<HppPerKandangReport> | undefined> {
+    return await this.customRequest<BaseApiResponse<HppPerKandangReport>>(
+      `hpp-per-kandang`,
+      {
+        method: 'GET',
+        params: {
+          area_id: area_id,
+          location_id: location_id,
+          kandang_id: kandang_id,
+          weight_min: weight_min,
+          weight_max: weight_max,
+          period: period,
+          sort_by: sort_by,
+          show_unrecorded: show_unrecorded,
+          page: page,
+          limit: limit,
+        },
+      }
+    );
+  }
+}
+
+export const SaleReportApi = new MarketingSaleReportService(
+  'reports/marketings'
+);
+
+// export const SaleReportApi = new MarketingSaleReportService(
+//   'http://localhost:4010/api/reports/marketings'
+// );

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;
@@ -78,7 +105,44 @@ export type ClosingIncomingSapronak = {
 };
 
 export type ClosingOutgoingSapronak = ClosingIncomingSapronak;
-export type ClosingSales = BaseMetadata & BaseClosingSales;
+
+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 ======
 
@@ -143,6 +207,83 @@ export type OverheadTotal = {
   cost_per_bird: number;
 };
 
+export type ClosingSales = BaseMetadata & BaseClosingSales;
+
+// ====== FINANCE ======
+export interface ClosingFinance {
+  project_flock_id: number;
+  period: number;
+  project_type: string;
+  volume_base: ClosingFinanceVolumeBase;
+  hpp_purchases: ClosingFinanceHppPurchases;
+  profit_loss: ClosingFinanceProfitLoss;
+}
+
+export interface ClosingFinanceProfitLoss {
+  title: string;
+  data: ProfitLossData;
+}
+
+export interface ClosingFinanceHppPurchases {
+  title: string;
+  hpp: GroupHppPurchase[];
+  summary_hpp: HppPurchasesSummary;
+}
+
+export interface ClosingFinanceVolumeBase {
+  total_birds: number;
+  total_weight_kg: number;
+}
+
+export interface ProfitLossData {
+  penjualan: ProfitLossDataAmount[];
+  pembelian: ProfitLossDataAmount[];
+  summary: ProfitLossDataSummary;
+}
+
+export interface GroupHppPurchase {
+  group_name: string;
+  data: HppPurchaseData[];
+}
+
+export interface ProfitLossDataSummary {
+  gross_profit: DataSummarySubTotal;
+  sub_total: DataSummarySubTotal;
+  net_profit: DataSummarySubTotal;
+}
+
+export interface ProfitLossDataAmount {
+  type: string;
+  rp_per_bird: number;
+  rp_per_kg: number;
+  amount: number;
+}
+
+export interface HppPurchasesSummary {
+  label: string;
+  budgeting: HppPurchaseDataAmount;
+  realization: HppPurchaseDataAmount;
+}
+
+export interface HppPurchaseData {
+  type: string;
+  budgeting: HppPurchaseDataAmount;
+  realization: HppPurchaseDataAmount;
+}
+
+export interface HppPurchaseDataAmount {
+  rp_per_bird: number;
+  rp_per_kg: number;
+  amount: number;
+}
+
+export interface DataSummarySubTotal {
+  label: string;
+  rp_per_bird: number;
+  rp_per_kg: number;
+  amount: number;
+}
+
 export type BaseExpeditionCost = {
   id: number;
   expedition_vendor_name: string;

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;
-  quantity: number;
-  before_quantity: number;
-  after_quantity: number;
+  increase: number;
+  decrease: 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/hpp-per-kandang.d.ts

@@ -0,0 +1,69 @@
+import { BaseMetadata } from '@types/api/base-metadata';
+import { Supplier } from '@/types/api/master-data/supplier';
+import { Kandang } from '@/types/api/master-data/kandang';
+
+export type HppPerKandangRow = {
+  id: number;
+  kandang: Kandang;
+  weight_range: {
+    weight_min: number;
+    weight_max: number;
+  };
+  remaining_chicken_birds: number;
+  remaining_chicken_weight_kg: number;
+  avg_weight_kg: number;
+  egg_production_pieces: number;
+  egg_production_kg: number;
+  egg_hpp_rp_per_kg: number;
+  egg_value_rp: number;
+  feed_suppliers: Supplier[];
+  doc_suppliers: Supplier[];
+  average_doc_price_rp: number;
+  hpp_rp: number;
+  remaining_value_rp: number;
+};
+
+export type HppPerKandangSummaryTotal = {
+  total_remaining_chicken_birds: number;
+  total_remaining_chicken_weight_kg: number;
+  average_weight_kg: number;
+  total_remaining_value_rp: number;
+  total_egg_production_pieces: number;
+  total_egg_production_kg: number;
+  average_egg_hpp_rp_per_kg: number;
+  total_egg_value_rp: number;
+  total_hpp_rp: number;
+  total_average_doc_price_rp: number;
+};
+
+export type HppPerKandangPerWeightRange = {
+  id: number;
+  weight_range: {
+    weight_min: number;
+    weight_max: number;
+  };
+  label: string;
+  remaining_chicken_birds: number;
+  remaining_chicken_weight_kg: number;
+  avg_weight_kg: number;
+  egg_production_pieces: number;
+  egg_production_kg: number;
+  egg_hpp_rp_per_kg: number;
+  egg_value_rp: number;
+  feed_suppliers: Supplier[];
+  doc_suppliers: Supplier[];
+  average_doc_price_rp: number;
+  hpp_rp: number;
+  remaining_value_rp: number;
+};
+
+export type HppPerKandangSummary = {
+  per_weight_range: HppPerKandangPerWeightRange[];
+  total: HppPerKandangSummaryTotal;
+};
+
+export type HppPerKandangReport = BaseMetadata & {
+  period: string;
+  rows: HppPerKandangRow[];
+  summary: HppPerKandangSummary;
+};

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