fix(FE): resolve git pull merge development

package-lock.json

@@ -1871,6 +1871,7 @@
       "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.2.tgz",
       "integrity": "sha512-6mDvHUFSjyT2B2yeNx2nUgMxh9LtOWvkhIU3uePn2I2oyNymUAX1NIsdgviM4CH+JSrp2D2hsMvJOkxY+0wNRA==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "csstype": "^3.0.2"
       }
@@ -1947,6 +1948,7 @@
       "integrity": "sha512-BnOroVl1SgrPLywqxyqdJ4l3S2MsKVLDVxZvjI1Eoe8ev2r3kGDo+PcMihNmDE+6/KjkTubSJnmqGZZjQSBq/g==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@typescript-eslint/scope-manager": "8.46.2",
         "@typescript-eslint/types": "8.46.2",
@@ -2470,6 +2472,7 @@
       "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -3135,7 +3138,8 @@
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
       "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/daisyui": {
       "version": "5.5.8",
@@ -3601,6 +3605,7 @@
       "integrity": "sha512-t5aPOpmtJcZcz5UJyY2GbvpDlsK5E8JqRqoKtfiKE3cNh437KIqfJr3A3AKf5k64NPx6d0G3dno6XDY05PqPtw==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.8.0",
         "@eslint-community/regexpp": "^4.12.1",
@@ -3774,6 +3779,7 @@
       "integrity": "sha512-whOE1HFo/qJDyX4SnXzP4N6zOWn79WhnCUY/iDR0mPfQZO8wcYE4JClzI2oZrhBnnMUCBCHZhO6VQyoBU95mZA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@rtsao/scc": "^1.1.0",
         "array-includes": "^3.1.9",
@@ -5238,6 +5244,7 @@
       "resolved": "https://registry.npmjs.org/jspdf/-/jspdf-3.0.4.tgz",
       "integrity": "sha512-dc6oQ8y37rRcHn316s4ngz/nOjayLF/FFxBF4V9zamQKRqXxyiH1zagkCdktdWhtoQId5K20xt1lB90XzkB+hQ==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@babel/runtime": "^7.28.4",
         "fast-png": "^6.2.0",
@@ -6338,6 +6345,7 @@
       "resolved": "https://registry.npmjs.org/react/-/react-19.1.0.tgz",
       "integrity": "sha512-FS+XFBNvn3GTAWq26joslQgWNoFu08F4kl0J4CgdNKADkdSGXQyTCnKteIAJy96Br6YbpEU1LSzV5dYtjMkMDg==",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -6368,6 +6376,7 @@
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.1.0.tgz",
       "integrity": "sha512-Xs1hdnE+DyKgeHJeJznQmYMIBG3TKIHJJT95Q58nHLSrElKlGQqDTR2HQ9fx5CN/Gk6Vh/kupBTDLU11/nDk/g==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "scheduler": "^0.26.0"
       },
@@ -7301,6 +7310,7 @@
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -7468,6 +7478,7 @@
       "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
       "dev": true,
       "license": "Apache-2.0",
+      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"

src/app/closing/detail/page.tsx

@@ -24,6 +24,11 @@ const ClosingDetailPage = () => {
     () => ClosingApi.getPenjualan(Number(closingId))
   );
 
+  const { data: hppEkspedisiData, isLoading: isLoadingHppEkspedisi } = useSWR(
+    closingId ? `hpp-ekspedisi-${closingId}` : null,
+    () => ClosingApi.getHppEkspedisi(Number(closingId))
+  );
+
   if (!closingId) {
     router.back();
 
@@ -39,7 +44,7 @@ const ClosingDetailPage = () => {
     return;
   }
 
-  const isLoading = isLoadingClosing || isLoadingSales;
+  const isLoading = isLoadingClosing || isLoadingSales || isLoadingHppEkspedisi;
 
   return (
     <div className='w-full p-4 flex flex-row justify-center'>
@@ -50,6 +55,11 @@ const ClosingDetailPage = () => {
           id={Number(closingId)}
           initialValue={closing.data}
           salesData={isResponseSuccess(salesData) ? salesData.data : undefined}
+          hppExpeditionData={
+            isResponseSuccess(hppEkspedisiData)
+              ? hppEkspedisiData.data
+              : undefined
+          }
         />
       )}
     </div>

src/app/report/logistic-stock/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/logistic-stock/page.tsx

@@ -0,0 +1,7 @@
+import LogisticStockTabs from '@/components/pages/report/logistic-stock/LogisticStockTabs';
+
+const LogisticStock = () => {
+  return <LogisticStockTabs />;
+};
+
+export default LogisticStock;

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

@@ -5,6 +5,8 @@ import Tooltip from '@/components/Tooltip';
 import { cn } from '@/lib/helper';
 import { Icon } from '@iconify/react';
 
+import { useAuth } from '@/services/hooks/useAuth';
+
 type FloatingActionsButtonProps = {
   actions: {
     action: 'DETAIL' | 'EDIT' | 'DELETE';
@@ -13,6 +15,7 @@ type FloatingActionsButtonProps = {
     onClick?: () => void;
     hidden?: boolean;
     disabled?: boolean;
+    permissions?: string | string[];
   }[];
   approvals: {
     action: 'APPROVED' | 'REJECTED';
@@ -20,6 +23,7 @@ type FloatingActionsButtonProps = {
     label?: string;
     onClick?: () => void;
     disabled?: boolean;
+    permissions?: string | string[];
   }[];
   selectedRowIds: number[];
   onClose: () => void;
@@ -31,6 +35,7 @@ const FloatingActionsButton = ({
   selectedRowIds,
   onClose,
 }: FloatingActionsButtonProps) => {
+  const { permissionCheck } = useAuth();
   // Jika tidak ada baris yang dipilih, jangan tampilkan FAB
   const positionStyles =
     selectedRowIds.length > 0
@@ -71,7 +76,18 @@ const FloatingActionsButton = ({
             <div className='flex gap-4 items-center'>
               {/* Render Aksi dari props.actions */}
               {actions
-                .filter((action) => !action.hidden)
+                .filter((action) => {
+                  if (action.hidden) return false;
+                  if (action.permissions) {
+                    if (typeof action.permissions === 'string') {
+                      return permissionCheck(action.permissions);
+                    }
+                    return action.permissions.some((permission) =>
+                      permissionCheck(permission)
+                    );
+                  }
+                  return true;
+                })
                 .map((action, index) => {
                   return (
                     <Button
@@ -111,29 +127,41 @@ const FloatingActionsButton = ({
 
         {/* === BARIS BAWAH: Approval Buttons (Approve/Reject) === */}
         <div className={`grid grid-cols-${approvals.length} gap-3`}>
-          {approvals.map((approval, index) => (
-            <Button
-              key={index}
-              onClick={approval.onClick}
-              className={cn(
-                'btn btn-lg w-full',
-                'bg-white/20 border-white/30',
-                'text-white/50 font-semibold flex items-center gap-2 rounded-lg transition-all duration-200',
-                approval.disabled
-                  ? 'cursor-not-allowed'
-                  : 'hover:text-white/100 hover:bg-white/40 hover:border-white/50'
-              )}
-              disabled={approval.disabled}
-            >
-              <Icon
-                icon={approval.icon}
-                width={20}
-                height={20}
-                className={`text-${getApprovalColor(approval.action)}`}
-              />
-              {approval.label || approval.action}
-            </Button>
-          ))}
+          {approvals
+            .filter((approval) => {
+              if (approval.permissions) {
+                if (typeof approval.permissions === 'string') {
+                  return permissionCheck(approval.permissions);
+                }
+                return approval.permissions.some((permission) =>
+                  permissionCheck(permission)
+                );
+              }
+              return true;
+            })
+            .map((approval, index) => (
+              <Button
+                key={index}
+                onClick={approval.onClick}
+                className={cn(
+                  'btn btn-lg w-full',
+                  'bg-white/20 border-white/30',
+                  'text-white/50 font-semibold flex items-center gap-2 rounded-lg transition-all duration-200',
+                  approval.disabled
+                    ? 'cursor-not-allowed'
+                    : 'hover:text-white/100 hover:bg-white/40 hover:border-white/50'
+                )}
+                disabled={approval.disabled}
+              >
+                <Icon
+                  icon={approval.icon}
+                  width={20}
+                  height={20}
+                  className={`text-${getApprovalColor(approval.action)}`}
+                />
+                {approval.label || approval.action}
+              </Button>
+            ))}
         </div>
       </div>
     </div>

src/components/MainDrawer.tsx

@@ -9,10 +9,13 @@ import Drawer from '@/components/Drawer';
 import Navbar from '@/components/Navbar';
 import Button from '@/components/Button';
 import SidebarMenu from '@/components/molecules/SidebarMenu';
+import PermissionNotFound from '@/components/helper/PermissionNotFound';
 
 import { useUiStore } from '@/stores/ui/ui.store';
 import { MAIN_DRAWER_LINKS } from '@/config/constant';
 import { isPathActive } from '@/lib/helper';
+import { ROUTE_PERMISSIONS } from '@/config/route-permission';
+import { useAuth } from '@/services/hooks/useAuth';
 
 const MainDrawerContent = () => {
   const pathname = usePathname();
@@ -62,6 +65,11 @@ const MainDrawer = ({
 }>) => {
   const { mainDrawerOpen, setMainDrawerOpen } = useUiStore();
   const pathname = usePathname();
+  const { permissionCheck } = useAuth();
+
+  const isPermitted = ROUTE_PERMISSIONS[pathname]?.some((permission) =>
+    permissionCheck(permission)
+  );
 
   const getPageTitle = useCallback(() => {
     let title = '';
@@ -101,6 +109,10 @@ const MainDrawer = ({
     setMainDrawerOpen(!mainDrawerOpen);
   };
 
+  if (!isPermitted) {
+    return <PermissionNotFound />;
+  }
+
   return (
     <Drawer
       open={mainDrawerOpen}

src/components/Navbar.tsx

@@ -7,7 +7,7 @@ import { Icon } from '@iconify/react';
 import Menu from '@/components/menu/Menu';
 import MenuItem from '@/components/menu/MenuItem';
 import Button from '@/components/Button';
-import Dropdown from '@/components/dropdown/Dropdown';
+import Dropdown from '@/components/Dropdown';
 
 import { useAuth } from '@/services/hooks/useAuth';
 import { AuthApi } from '@/services/api/auth';
@@ -54,8 +54,8 @@ const Navbar = ({ title, toggleSidebar }: NavbarProps) => {
 
       <div className='flex gap-2'>
         <Dropdown
-          direction='bottom'
           align='end'
+          direction='bottom'
           trigger={
             <div className='btn btn-ghost btn-circle avatar'>
               <div className='w-10 rounded-full border flex justify-center items-center'>
@@ -67,7 +67,7 @@ const Navbar = ({ title, toggleSidebar }: NavbarProps) => {
             content: 'w-52 mt-3',
           }}
         >
-          <Menu className='p-2 bg-base-100 shadow rounded-box menu-sm'>
+          <Menu>
             <MenuItem title='Logout' onClick={logoutClickHandler} />
           </Menu>
         </Dropdown>

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/helper/PermissionNotFound.tsx

@@ -0,0 +1,12 @@
+const PermissionNotFound = () => {
+  return (
+    <div className='w-full h-screen flex flex-col justify-center items-center gap-4'>
+      <h2 className='text-2xl font-bold text-error'>Permission Not Found</h2>
+      <p className='text-gray-600 text-center'>
+        You do not have permission to access this page.
+      </p>
+    </div>
+  );
+};
+
+export default PermissionNotFound;

src/components/helper/RequirePermission.tsx

@@ -0,0 +1,28 @@
+'use client';
+
+import { useAuth } from '@/services/hooks/useAuth';
+
+interface RequirePermissionProps {
+  children: React.ReactNode;
+  permissions: string | string[];
+}
+
+const RequirePermission = ({
+  children,
+  permissions,
+}: RequirePermissionProps) => {
+  const { permissionCheck } = useAuth();
+
+  const isPermitted =
+    typeof permissions === 'string'
+      ? permissionCheck(permissions)
+      : permissions.some((permission) => permissionCheck(permission));
+
+  if (!isPermitted) {
+    return null;
+  }
+
+  return <>{children}</>;
+};
+
+export default RequirePermission;

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/molecules/SidebarMenu.tsx

@@ -2,6 +2,7 @@ import Link from 'next/link';
 import Menu from '@/components/menu/Menu';
 import { Icon } from '@iconify/react';
 import { cn, isPathActive } from '@/lib/helper';
+import { useAuth } from '@/services/hooks/useAuth';
 
 export interface SidebarMenuItem {
   type?: 'item' | 'title';
@@ -9,6 +10,7 @@ export interface SidebarMenuItem {
   link: string;
   icon?: string;
   submenu?: SidebarMenuItem[];
+  permission?: string[];
 }
 
 interface SidebarMenuItemProps {
@@ -22,8 +24,17 @@ interface SidebarMenuProps {
 }
 
 const SidebarMenuItem = ({ item, activeLink }: SidebarMenuItemProps) => {
+  const { permissionCheck } = useAuth();
   const isItemActive = isPathActive(activeLink, item.link);
 
+  const isUserPermitted = item.permission
+    ? item.permission?.some((permissionName) => permissionCheck(permissionName))
+    : true;
+
+  if (!isUserPermitted) {
+    return null;
+  }
+
   const menuItemWithoutSubmenu = (
     <li>
       <Link
@@ -78,13 +89,15 @@ const SidebarMenuItem = ({ item, activeLink }: SidebarMenuItemProps) => {
 const SidebarMenu = ({ menu, activeLink }: SidebarMenuProps) => {
   return (
     <Menu>
-      {menu.map((menuItem, menuIdx) => (
-        <SidebarMenuItem
-          key={menuIdx}
-          item={menuItem}
-          activeLink={activeLink}
-        />
-      ))}
+      {menu.map((menuItem, menuIdx) => {
+        return (
+          <SidebarMenuItem
+            key={menuIdx}
+            item={menuItem}
+            activeLink={activeLink}
+          />
+        );
+      })}
     </Menu>
   );
 };

src/components/pages/closing/ClosingDetail.tsx

@@ -6,27 +6,32 @@ 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 {
   id: number;
   initialValue?: ClosingGeneralInformation;
   salesData?: BaseClosingSales;
+  hppExpeditionData?: ClosingHppExpedition;
 }
 
 const ClosingDetail: React.FC<ClosingDetailProps> = ({
   id,
   initialValue,
   salesData,
+  hppExpeditionData,
 }) => {
   const [activeTab, setActiveTab] = useState<string>('sapronak');
 
@@ -55,12 +60,12 @@ const ClosingDetail: React.FC<ClosingDetailProps> = ({
       {
         id: 'hppEkspedisi',
         label: 'HPP Ekspedisi',
-        content: 'HPP Ekspedisi',
+        content: <HppExpeditionReportTable initialValues={hppExpeditionData} />,
       },
       {
         id: 'dataProduksi',
         label: 'Data Produksi',
-        content: 'Data Produksi',
+        content: <ClosingProductionDataTabContent projectFlockId={id} />,
       },
       {
         id: 'keuangan',

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

@@ -15,6 +15,8 @@ import SelectInput, {
 import RowDropdownOptions from '@/components/table/RowDropdownOptions';
 import RowCollapseOptions from '@/components/table/RowCollapseOptions';
 import RowOptionsMenuWrapper from '@/components/table/RowOptionsMenuWrapper';
+import RequirePermission from '@/components/helper/RequirePermission';
+
 import { cn, formatCurrency, formatDate } from '@/lib/helper';
 import { isResponseSuccess } from '@/lib/api-helper';
 import { useTableFilter } from '@/services/hooks/useTableFilter';
@@ -43,17 +45,18 @@ const RowOptionsMenu = ({
 }) => {
   return (
     <RowOptionsMenuWrapper type={type}>
-      {/* TODO: apply RBAC */}
       <div className='w-full max-h-40 overflow-auto flex flex-col gap-1'>
-        <Button
-          href={`/closing/detail/?closingId=${props.row.original.id}`}
-          variant='ghost'
-          color='primary'
-          className='justify-start text-sm'
-        >
-          <Icon icon='mdi:eye-outline' width={16} height={16} />
-          Detail
-        </Button>
+        <RequirePermission permissions='lti.closing.detail'>
+          <Button
+            href={`/closing/detail/?closingId=${props.row.original.id}`}
+            variant='ghost'
+            color='primary'
+            className='justify-start text-sm'
+          >
+            <Icon icon='mdi:eye-outline' width={16} height={16} />
+            Detail
+          </Button>
+        </RequirePermission>
       </div>
     </RowOptionsMenuWrapper>
   );

src/components/pages/closing/hpp-ekspedisi/HppExpeditionReportTable.tsx

@@ -0,0 +1,110 @@
+'use client';
+
+import React, { useMemo } from 'react';
+import { ColumnDef } from '@tanstack/react-table';
+import Table from '@/components/Table';
+import Card from '@/components/Card';
+import { formatCurrency } from '@/lib/helper';
+import { BaseHppExpedition, BaseExpeditionCost } from '@/types/api/closing';
+
+interface HppExpeditionReportTableProps {
+  type?: 'detail';
+  initialValues?: BaseHppExpedition;
+}
+
+const HppExpeditionReportTable = ({
+  type = 'detail',
+  initialValues,
+}: HppExpeditionReportTableProps) => {
+  const costOfRevenueExpeditionData: BaseExpeditionCost[] = useMemo(() => {
+    return initialValues?.expedition_costs || [];
+  }, [initialValues]);
+
+  const totals = useMemo(() => {
+    const totalHpp = initialValues?.total_hpp_amount || 0;
+
+    return {
+      totalHpp,
+    };
+  }, [initialValues]);
+
+  const costOfRevenueExpeditionColumns: ColumnDef<BaseExpeditionCost>[] =
+    useMemo(
+      () => [
+        {
+          id: 'id',
+          accessorKey: 'id',
+          header: 'No',
+          cell: (props) => {
+            return <div>{props.row.index + 1}</div>;
+          },
+          footer: () => (
+            <div className='font-semibold text-gray-900'>
+              Total HPP Ekspedisi
+            </div>
+          ),
+        },
+        {
+          id: 'expedition_vendor_name',
+          accessorKey: 'expedition_vendor_name',
+          header: 'Nama Ekspedisi',
+          cell: (props) => props.getValue() || '-',
+        },
+        {
+          id: 'hpp_amount',
+          accessorKey: 'hpp_amount',
+          header: 'HPP Ekspedisi',
+          cell: (props) => {
+            const value = props.getValue() as number;
+            return <div className='text-right'>{formatCurrency(value)}</div>;
+          },
+          footer: () => (
+            <div className='text-right font-semibold text-gray-900'>
+              {formatCurrency(totals.totalHpp)}
+            </div>
+          ),
+        },
+      ],
+      [totals]
+    );
+
+  return (
+    <>
+      <section className='w-full'>
+        <div className='p-4'>
+          <h2 className='text-xl font-semibold mb-4'>HPP Ekspedisi</h2>
+          <Card
+            className={{
+              wrapper: 'w-full bg-base-100',
+              body: 'p-0',
+            }}
+          >
+            <Table
+              data={costOfRevenueExpeditionData}
+              columns={costOfRevenueExpeditionColumns}
+              renderFooter={costOfRevenueExpeditionData.length > 0}
+              className={{
+                tableWrapperClassName: 'overflow-x-auto',
+                tableClassName: 'w-full table-auto text-sm',
+                headerRowClassName: 'border-b border-b-gray-200',
+                headerColumnClassName:
+                  'px-4 py-3 text-xs font-semibold text-gray-500 last:flex last:flex-row last:justify-end whitespace-nowrap',
+                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>
+      </section>
+    </>
+  );
+};
+
+export default HppExpeditionReportTable;

src/components/pages/expense/ExpenseRealizationContent.tsx

@@ -4,6 +4,7 @@ import toast from 'react-hot-toast';
 import Link from 'next/link';
 import { Icon } from '@iconify/react';
 import Button from '@/components/Button';
+import RequirePermission from '@/components/helper/RequirePermission';
 import Card from '@/components/Card';
 import DropFileInput from '@/components/input/DropFileInput';
 
@@ -62,16 +63,17 @@ const ExpenseRealizationContent = ({
     <div>
       <div className='w-full max-w-5xl mx-auto flex flex-col sm:flex-row justify-end gap-2'>
         <div className='w-full sm:w-fit sm:ml-2 flex flex-row gap-2 items-center'>
-          {/* TODO: apply RBAC */}
-          <Button
-            type='button'
-            color='warning'
-            href={`/expense/realization/edit/?expenseId=${initialValues?.id}`}
-            className='px-4 grow sm:grow-0'
-          >
-            <Icon icon='mdi:pencil-outline' width={24} height={24} />
-            Edit Realisasi
-          </Button>
+          <RequirePermission permissions='lti.expense.update.realization'>
+            <Button
+              type='button'
+              color='warning'
+              href={`/expense/realization/edit/?expenseId=${initialValues?.id}`}
+              className='px-4 grow sm:grow-0'
+            >
+              <Icon icon='mdi:pencil-outline' width={24} height={24} />
+              Edit Realisasi
+            </Button>
+          </RequirePermission>
         </div>
       </div>
 
@@ -124,36 +126,38 @@ const ExpenseRealizationContent = ({
                     )}
                 </div>
 
-                <div className='flex flex-col gap-2'>
-                  <DropFileInput
-                    name='documents'
-                    values={formik.values.documents}
-                    onChange={realizationDocumentsChangeHandler}
-                    onDelete={realizationDocumentsDeleteHandler}
-                    accept={{
-                      ...ACCEPTED_FILE_TYPE.PDF,
-                      ...ACCEPTED_FILE_TYPE.IMAGE,
-                    }}
-                    maxFiles={10}
-                    className={{
-                      wrapper: 'mt-2',
-                      inputWrapper: 'flex items-center',
-                    }}
-                  />
+                <RequirePermission permissions='lti.expense.document.realization'>
+                  <div className='flex flex-col gap-2'>
+                    <DropFileInput
+                      name='documents'
+                      values={formik.values.documents}
+                      onChange={realizationDocumentsChangeHandler}
+                      onDelete={realizationDocumentsDeleteHandler}
+                      accept={{
+                        ...ACCEPTED_FILE_TYPE.PDF,
+                        ...ACCEPTED_FILE_TYPE.IMAGE,
+                      }}
+                      maxFiles={10}
+                      className={{
+                        wrapper: 'mt-2',
+                        inputWrapper: 'flex items-center',
+                      }}
+                    />
 
-                  {formik.values.documents &&
-                    formik.values.documents.length > 0 && (
-                      <Button
-                        onClick={formik.submitForm}
-                        disabled={formik.isSubmitting}
-                        isLoading={formik.isSubmitting}
-                        className='w-fit self-end'
-                      >
-                        <Icon icon='ic:round-plus' width={24} height={24} />
-                        Tambah
-                      </Button>
-                    )}
-                </div>
+                    {formik.values.documents &&
+                      formik.values.documents.length > 0 && (
+                        <Button
+                          onClick={formik.submitForm}
+                          disabled={formik.isSubmitting}
+                          isLoading={formik.isSubmitting}
+                          className='w-fit self-end'
+                        >
+                          <Icon icon='ic:round-plus' width={24} height={24} />
+                          Tambah
+                        </Button>
+                      )}
+                  </div>
+                </RequirePermission>
               </td>
             </tr>
           </tbody>

src/components/pages/expense/ExpenseRequestContent.tsx

@@ -19,6 +19,7 @@ import { useModal } from '@/components/Modal';
 import ConfirmationModal from '@/components/modal/ConfirmationModal';
 import ConfirmationModalWithNotes from '@/components/modal/ConfirmationModalWithNotes';
 import ExpensePDFPreviewButton from '@/components/pages/expense//pdf/ExpensePDFButton';
+import RequirePermission from '@/components/helper/RequirePermission';
 
 import { Expense } from '@/types/api/expense';
 import { formatCurrency, formatDate } from '@/lib/helper';
@@ -255,100 +256,119 @@ const ExpenseRequestContent = ({
 
           <div className='w-full max-w-5xl mx-auto flex flex-col sm:flex-row justify-end gap-2'>
             {isCurrentApprovalOnManager && (
-              <Button
-                variant='outline'
-                color='info'
-                onClick={approveClickHandler}
-                className='w-full sm:w-fit'
-              >
-                <Icon icon='lucide-lab:farm' width={24} height={24} />
-                Approve Manager
-              </Button>
+              <RequirePermission permissions='lti.expense.approve.manager'>
+                <Button
+                  variant='outline'
+                  color='info'
+                  onClick={approveClickHandler}
+                  className='w-full sm:w-fit'
+                >
+                  <Icon icon='lucide-lab:farm' width={24} height={24} />
+                  Approve Manager
+                </Button>
+              </RequirePermission>
             )}
 
             {isCurrentApprovalOnFinance && (
-              <Button
-                variant='outline'
-                color='success'
-                onClick={approveClickHandler}
-                className='w-full sm:w-fit'
-              >
-                <Icon icon='tdesign:money' width={24} height={24} />
-                Approve Finance
-              </Button>
+              <RequirePermission permissions='lti.expense.approve.finance'>
+                <Button
+                  variant='outline'
+                  color='success'
+                  onClick={approveClickHandler}
+                  className='w-full sm:w-fit'
+                >
+                  <Icon icon='tdesign:money' width={24} height={24} />
+                  Approve Finance
+                </Button>
+              </RequirePermission>
             )}
 
             {isCurrentApprovalOnRealization && (
-              <Button
-                variant='outline'
-                color='success'
-                onClick={completeExpenseClickHandler}
-                className='w-full sm:w-fit'
-              >
-                <Icon
-                  icon='material-symbols:done-all-rounded'
-                  width={24}
-                  height={24}
-                />
-                Selesai
-              </Button>
+              <RequirePermission permissions='lti.expense.complete.expense'>
+                <Button
+                  variant='outline'
+                  color='success'
+                  onClick={completeExpenseClickHandler}
+                  className='w-full sm:w-fit'
+                >
+                  <Icon
+                    icon='material-symbols:done-all-rounded'
+                    width={24}
+                    height={24}
+                  />
+                  Selesai
+                </Button>
+              </RequirePermission>
             )}
 
             {showRejectButton && (
-              <Button
-                variant='outline'
-                color='error'
-                onClick={rejectClickHandler}
-                className='w-full:w-fit'
+              <RequirePermission
+                permissions={[
+                  'lti.expense.approve.manager',
+                  'lti.expense.approve.finance',
+                ]}
               >
-                <Icon icon='material-symbols:close' width={24} height={24} />
-                Reject
-              </Button>
+                <Button
+                  variant='outline'
+                  color='error'
+                  onClick={rejectClickHandler}
+                  className='w-full:w-fit'
+                >
+                  <Icon icon='material-symbols:close' width={24} height={24} />
+                  Reject
+                </Button>
+              </RequirePermission>
             )}
 
             {isExpenseCanBeRealized && (
-              <Button
-                variant='outline'
-                color='info'
-                href={`/expense/realization/?expenseId=${initialValues?.id}`}
-                className='w-full sm:w-fit'
-              >
-                <Icon
-                  icon='material-symbols:money-bag-rounded'
-                  width={24}
-                  height={24}
-                />
-                Realisasi
-              </Button>
+              <RequirePermission permissions='lti.expense.create.realization'>
+                <Button
+                  variant='outline'
+                  color='info'
+                  href={`/expense/realization/?expenseId=${initialValues?.id}`}
+                  className='w-full sm:w-fit'
+                >
+                  <Icon
+                    icon='material-symbols:money-bag-rounded'
+                    width={24}
+                    height={24}
+                  />
+                  Realisasi
+                </Button>
+              </RequirePermission>
             )}
 
             <div className='w-full sm:w-fit sm:ml-2 flex flex-row gap-2 items-center'>
               {showEditButton && (
-                <Button
-                  type='button'
-                  color='warning'
-                  href={`/expense/detail/edit/?expenseId=${initialValues?.id}`}
-                  className='px-4 grow sm:grow-0'
-                >
-                  <Icon icon='mdi:pencil-outline' width={24} height={24} />
-                  Edit
-                </Button>
+                <RequirePermission permissions='lti.expense.update'>
+                  <Button
+                    type='button'
+                    color='warning'
+                    href={`/expense/detail/edit/?expenseId=${initialValues?.id}`}
+                    className='px-4 grow sm:grow-0'
+                  >
+                    <Icon icon='mdi:pencil-outline' width={24} height={24} />
+                    Edit
+                  </Button>
+                </RequirePermission>
               )}
 
-              <Button
-                type='button'
-                color='error'
-                onClick={deleteExpenseClickHandler}
-                className='px-4 grow sm:grow-0'
-              >
-                <Icon
-                  icon='material-symbols:delete-outline-rounded'
-                  width={24}
-                  height={24}
-                  className='justify-start text-sm'
-                />
-                Delete
-              </Button>
+              <RequirePermission permissions='lti.expense.delete'>
+                <Button
+                  type='button'
+                  color='error'
+                  onClick={deleteExpenseClickHandler}
+                  className='px-4 grow sm:grow-0'
+                >
+                  <Icon
+                    icon='material-symbols:delete-outline-rounded'
+                    width={24}
+                    height={24}
+                    className='justify-start text-sm'
+                  />
+                  Delete
+                </Button>
+              </RequirePermission>
             </div>
           </div>
 
@@ -485,36 +505,42 @@ const ExpenseRequestContent = ({
                         )}
                     </div>
 
-                    <div className='flex flex-col gap-2'>
-                      <DropFileInput
-                        name='documents'
-                        values={formik.values.documents}
-                        onChange={requestDocumentsChangeHandler}
-                        onDelete={requestDocumentsDeleteHandler}
-                        accept={{
-                          ...ACCEPTED_FILE_TYPE.PDF,
-                          ...ACCEPTED_FILE_TYPE.IMAGE,
-                        }}
-                        maxFiles={10}
-                        className={{
-                          wrapper: 'mt-2',
-                          inputWrapper: 'flex items-center',
-                        }}
-                      />
+                    <RequirePermission permissions='lti.expense.document'>
+                      <div className='flex flex-col gap-2'>
+                        <DropFileInput
+                          name='documents'
+                          values={formik.values.documents}
+                          onChange={requestDocumentsChangeHandler}
+                          onDelete={requestDocumentsDeleteHandler}
+                          accept={{
+                            ...ACCEPTED_FILE_TYPE.PDF,
+                            ...ACCEPTED_FILE_TYPE.IMAGE,
+                          }}
+                          maxFiles={10}
+                          className={{
+                            wrapper: 'mt-2',
+                            inputWrapper: 'flex items-center',
+                          }}
+                        />
 
-                      {formik.values.documents &&
-                        formik.values.documents.length > 0 && (
-                          <Button
-                            onClick={formik.submitForm}
-                            disabled={formik.isSubmitting}
-                            isLoading={formik.isSubmitting}
-                            className='w-fit self-end'
-                          >
-                            <Icon icon='ic:round-plus' width={24} height={24} />
-                            Tambah
-                          </Button>
-                        )}
-                    </div>
+                        {formik.values.documents &&
+                          formik.values.documents.length > 0 && (
+                            <Button
+                              onClick={formik.submitForm}
+                              disabled={formik.isSubmitting}
+                              isLoading={formik.isSubmitting}
+                              className='w-fit self-end'
+                            >
+                              <Icon
+                                icon='ic:round-plus'
+                                width={24}
+                                height={24}
+                              />
+                              Tambah
+                            </Button>
+                          )}
+                      </div>
+                    </RequirePermission>
                   </td>
                 </tr>
               </tbody>

src/components/pages/expense/ExpensesTable.tsx

@@ -28,6 +28,7 @@ import ExpenseStatusBadge from '@/components/pages/expense/ExpenseStatusBadge';
 import CheckboxInput from '@/components/input/CheckboxInput';
 import ConfirmationModalWithNotes from '@/components/modal/ConfirmationModalWithNotes';
 import DateInput from '@/components/input/DateInput';
+import RequirePermission from '@/components/helper/RequirePermission';
 
 import { Expense } from '@/types/api/expense';
 import { ExpenseApi } from '@/services/api/expense';
@@ -67,58 +68,70 @@ const RowOptionsMenu = ({
   return (
     <RowOptionsMenuWrapper type={type}>
       <div className='w-full max-h-40 overflow-auto flex flex-col gap-1'>
-        <Button
-          href={`/expense/detail/?expenseId=${props.row.original.id}`}
-          variant='ghost'
-          color='primary'
-          className='justify-start text-sm'
-        >
-          <Icon icon='mdi:eye-outline' width={16} height={16} />
-          Detail
-        </Button>
-
-        {showEditButton && (
+        <RequirePermission permissions='lti.expense.detail'>
           <Button
-            href={`/expense/detail/edit/?expenseId=${props.row.original.id}`}
+            href={`/expense/detail/?expenseId=${props.row.original.id}`}
             variant='ghost'
-            color='warning'
+            color='primary'
             className='justify-start text-sm'
           >
-            <Icon icon='material-symbols:edit-outline' width={16} height={16} />
-            Edit
+            <Icon icon='mdi:eye-outline' width={16} height={16} />
+            Detail
           </Button>
+        </RequirePermission>
+
+        {showEditButton && (
+          <RequirePermission permissions='lti.expense.update'>
+            <Button
+              href={`/expense/detail/edit/?expenseId=${props.row.original.id}`}
+              variant='ghost'
+              color='warning'
+              className='justify-start text-sm'
+            >
+              <Icon
+                icon='material-symbols:edit-outline'
+                width={16}
+                height={16}
+              />
+              Edit
+            </Button>
+          </RequirePermission>
         )}
 
         {showRealizationButton && (
-          <Button
-            href={`/expense/realization/?expenseId=${props.row.original.id}`}
-            variant='ghost'
-            color='info'
-            className='justify-start text-sm text-info focus-visible:text-info-content hover:text-info-content'
-          >
-            <Icon
-              icon='material-symbols:money-bag-rounded'
-              width={16}
-              height={16}
-            />
-            Realisasi
-          </Button>
+          <RequirePermission permissions='lti.expense.create.realization'>
+            <Button
+              href={`/expense/realization/?expenseId=${props.row.original.id}`}
+              variant='ghost'
+              color='info'
+              className='justify-start text-sm text-info focus-visible:text-info-content hover:text-info-content'
+            >
+              <Icon
+                icon='material-symbols:money-bag-rounded'
+                width={16}
+                height={16}
+              />
+              Realisasi
+            </Button>
+          </RequirePermission>
         )}
 
-        <Button
-          onClick={deleteClickHandler}
-          variant='ghost'
-          color='error'
-          className='justify-start text-sm text-error focus-visible:text-error-content hover:text-error-content'
-        >
-          <Icon
-            icon='material-symbols:delete-outline-rounded'
-            width={16}
-            height={16}
-            className='justify-start text-sm'
-          />
-          Delete
-        </Button>
+        <RequirePermission permissions='lti.expense.delete'>
+          <Button
+            onClick={deleteClickHandler}
+            variant='ghost'
+            color='error'
+            className='justify-start text-sm text-error focus-visible:text-error-content hover:text-error-content'
+          >
+            <Icon
+              icon='material-symbols:delete-outline-rounded'
+              width={16}
+              height={16}
+              className='justify-start text-sm'
+            />
+            Delete
+          </Button>
+        </RequirePermission>
       </div>
     </RowOptionsMenuWrapper>
   );
@@ -559,57 +572,70 @@ const ExpensesTable = () => {
           <div className='flex flex-col gap-2 mb-4'>
             <div className='w-full flex flex-col sm:flex-row justify-between items-end sm:items-center gap-4'>
               <div className='w-full sm:w-fit flex flex-col sm:flex-row self-start gap-2'>
-                <Button
-                  href='/expense/add'
-                  variant='outline'
-                  color='primary'
-                  className='w-full sm:w-fit'
-                >
-                  <Icon icon='ic:round-plus' width={24} height={24} />
-                  Tambah
-                </Button>
+                <RequirePermission permissions='lti.expense.create'>
+                  <Button
+                    href='/expense/add'
+                    variant='outline'
+                    color='primary'
+                    className='w-full sm:w-fit'
+                  >
+                    <Icon icon='ic:round-plus' width={24} height={24} />
+                    Tambah
+                  </Button>
+                </RequirePermission>
 
                 {selectedRowIds.length > 0 && (
                   <>
-                    <Button
-                      variant='outline'
-                      color='info'
-                      onClick={bulkApproveClickHandler}
-                      disabled={!isAllSelectedRowLatestApprovalOnManager}
-                      className='w-full sm:w-fit'
-                    >
-                      <Icon icon='lucide-lab:farm' width={24} height={24} />
-                      Approve Manager
-                    </Button>
+                    <RequirePermission permissions='lti.expense.approve.manager'>
+                      <Button
+                        variant='outline'
+                        color='info'
+                        onClick={bulkApproveClickHandler}
+                        disabled={!isAllSelectedRowLatestApprovalOnManager}
+                        className='w-full sm:w-fit'
+                      >
+                        <Icon icon='lucide-lab:farm' width={24} height={24} />
+                        Approve Manager
+                      </Button>
+                    </RequirePermission>
 
-                    <Button
-                      variant='outline'
-                      color='success'
-                      onClick={bulkApproveClickHandler}
-                      disabled={!isAllSelectedRowLatestApprovalOnFinance}
-                      className='w-full sm:w-fit'
-                    >
-                      <Icon icon='tdesign:money' width={24} height={24} />
-                      Approve Finance
-                    </Button>
+                    <RequirePermission permissions='lti.expense.approve.finance'>
+                      <Button
+                        variant='outline'
+                        color='success'
+                        onClick={bulkApproveClickHandler}
+                        disabled={!isAllSelectedRowLatestApprovalOnFinance}
+                        className='w-full sm:w-fit'
+                      >
+                        <Icon icon='tdesign:money' width={24} height={24} />
+                        Approve Finance
+                      </Button>
+                    </RequirePermission>
 
-                    <Button
-                      variant='outline'
-                      color='error'
-                      onClick={bulkRejectClickHandler}
-                      disabled={
-                        !isAllSelectedRowLatestApprovalOnManager &&
-                        !isAllSelectedRowLatestApprovalOnFinance
-                      }
-                      className='w-full sm:w-fit'
+                    <RequirePermission
+                      permissions={[
+                        'lti.expense.approve.manager',
+                        'lti.expense.approve.finance',
+                      ]}
                     >
-                      <Icon
-                        icon='material-symbols:close'
-                        width={24}
-                        height={24}
-                      />
-                      Reject
-                    </Button>
+                      <Button
+                        variant='outline'
+                        color='error'
+                        onClick={bulkRejectClickHandler}
+                        disabled={
+                          !isAllSelectedRowLatestApprovalOnManager &&
+                          !isAllSelectedRowLatestApprovalOnFinance
+                        }
+                        className='w-full sm:w-fit'
+                      >
+                        <Icon
+                          icon='material-symbols:close'
+                          width={24}
+                          height={24}
+                        />
+                        Reject
+                      </Button>
+                    </RequirePermission>
                   </>
                 )}
               </div>

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

@@ -16,6 +16,7 @@ import DateInput from '@/components/input/DateInput';
 import DropFileInput from '@/components/input/DropFileInput';
 import ExpenseKandangsTable from '@/components/pages/expense/form/ExpenseKandangsTable';
 import ExpenseRealizationKandangDetailExpense from '@/components/pages/expense/form/ExpenseRealizationKandangDetailExpense';
+import RequirePermission from '@/components/helper/RequirePermission';
 
 import {
   CreateExpenseRealizationPayload,
@@ -290,21 +291,23 @@ const ExpenseRealizationForm = ({
             className={{ wrapper: 'col-span-12' }}
           />
 
-          <DropFileInput
-            label='Dokumen Realisasi'
-            name='documents'
-            values={formik.values.documents}
-            onChange={realizationDocumentsChangeHandler}
-            onDelete={realizationDocumentsDeleteHandler}
-            accept={{
-              ...ACCEPTED_FILE_TYPE.PDF,
-              ...ACCEPTED_FILE_TYPE.IMAGE,
-            }}
-            className={{
-              wrapper: 'col-span-12',
-              inputWrapper: 'h-12 flex items-center',
-            }}
-          />
+          <RequirePermission permissions='lti.expense.document.realization'>
+            <DropFileInput
+              label='Dokumen Realisasi'
+              name='documents'
+              values={formik.values.documents}
+              onChange={realizationDocumentsChangeHandler}
+              onDelete={realizationDocumentsDeleteHandler}
+              accept={{
+                ...ACCEPTED_FILE_TYPE.PDF,
+                ...ACCEPTED_FILE_TYPE.IMAGE,
+              }}
+              className={{
+                wrapper: 'col-span-12',
+                inputWrapper: 'h-12 flex items-center',
+              }}
+            />
+          </RequirePermission>
 
           {formik.values.existing_documents &&
             formik.values.existing_documents.length > 0 && (
@@ -357,20 +360,22 @@ const ExpenseRealizationForm = ({
           {type !== 'add' && (
             <div className='flex flex-row justify-start gap-2'>
               {type !== 'edit' && (
-                <Button
-                  type='button'
-                  color='warning'
-                  href={`/expense/detail/edit/?expenseId=${initialValues?.id}`}
-                  className='px-4'
-                >
-                  <Icon
-                    icon='material-symbols:edit-outline'
-                    width={24}
-                    height={24}
-                    className='justify-start text-sm'
-                  />
-                  Edit
-                </Button>
+                <RequirePermission permissions='lti.expense.update'>
+                  <Button
+                    type='button'
+                    color='warning'
+                    href={`/expense/detail/edit/?expenseId=${initialValues?.id}`}
+                    className='px-4'
+                  >
+                    <Icon
+                      icon='material-symbols:edit-outline'
+                      width={24}
+                      height={24}
+                      className='justify-start text-sm'
+                    />
+                    Edit
+                  </Button>
+                </RequirePermission>
               )}
             </div>
           )}

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

@@ -18,6 +18,7 @@ import DateInput from '@/components/input/DateInput';
 import ExpenseKandangsTable from '@/components/pages/expense/form/ExpenseKandangsTable';
 import DropFileInput from '@/components/input/DropFileInput';
 import ExpenseRequestKandangDetailExpense from '@/components/pages/expense/form/ExpenseRequestKandangDetailExpense';
+import RequirePermission from '@/components/helper/RequirePermission';
 
 import {
   ExpenseRequestFormSchema,
@@ -385,21 +386,23 @@ const ExpenseRequestForm = ({
               className={{ wrapper: 'col-span-12' }}
             />
 
-            <DropFileInput
-              label='Dokumen Pengajuan'
-              name='documents'
-              values={formik.values.documents}
-              onChange={requestDocumentsChangeHandler}
-              onDelete={requestDocumentsDeleteHandler}
-              accept={{
-                ...ACCEPTED_FILE_TYPE.PDF,
-                ...ACCEPTED_FILE_TYPE.IMAGE,
-              }}
-              className={{
-                wrapper: 'col-span-12',
-                inputWrapper: 'h-12 flex items-center',
-              }}
-            />
+            <RequirePermission permissions='lti.expense.document'>
+              <DropFileInput
+                label='Dokumen Pengajuan'
+                name='documents'
+                values={formik.values.documents}
+                onChange={requestDocumentsChangeHandler}
+                onDelete={requestDocumentsDeleteHandler}
+                accept={{
+                  ...ACCEPTED_FILE_TYPE.PDF,
+                  ...ACCEPTED_FILE_TYPE.IMAGE,
+                }}
+                className={{
+                  wrapper: 'col-span-12',
+                  inputWrapper: 'h-12 flex items-center',
+                }}
+              />
+            </RequirePermission>
 
             {formik.values.existing_documents &&
               formik.values.existing_documents.length > 0 && (
@@ -461,36 +464,40 @@ const ExpenseRequestForm = ({
           <div className='flex flex-row justify-between gap-2 flex-wrap'>
             {type !== 'add' && (
               <div className='flex flex-row justify-start gap-2'>
-                <Button
-                  type='button'
-                  color='error'
-                  onClick={deleteExpenseClickHandler}
-                  className='px-4'
-                >
-                  <Icon
-                    icon='material-symbols:delete-outline-rounded'
-                    width={24}
-                    height={24}
-                    className='justify-start text-sm'
-                  />
-                  Delete
-                </Button>
-
-                {type !== 'edit' && (
+                <RequirePermission permissions='lti.expense.delete'>
                   <Button
                     type='button'
-                    color='warning'
-                    href={`/expense/detail/edit/?expenseId=${initialValues?.id}`}
+                    color='error'
+                    onClick={deleteExpenseClickHandler}
                     className='px-4'
                   >
                     <Icon
-                      icon='material-symbols:edit-outline'
+                      icon='material-symbols:delete-outline-rounded'
                       width={24}
                       height={24}
                       className='justify-start text-sm'
                     />
-                    Edit
+                    Delete
                   </Button>
+                </RequirePermission>
+
+                {type !== 'edit' && (
+                  <RequirePermission permissions='lti.expense.update'>
+                    <Button
+                      type='button'
+                      color='warning'
+                      href={`/expense/detail/edit/?expenseId=${initialValues?.id}`}
+                      className='px-4'
+                    >
+                      <Icon
+                        icon='material-symbols:edit-outline'
+                        width={24}
+                        height={24}
+                        className='justify-start text-sm'
+                      />
+                      Edit
+                    </Button>
+                  </RequirePermission>
                 )}
               </div>
             )}

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

@@ -4,6 +4,7 @@ import Badge from '@/components/Badge';
 import Button from '@/components/Button';
 import SelectInput, { OptionType } from '@/components/input/SelectInput';
 import Table from '@/components/Table';
+import RequirePermission from '@/components/helper/RequirePermission';
 import { ROWS_OPTIONS } from '@/config/constant';
 import { isResponseSuccess } from '@/lib/api-helper';
 import { cn } from '@/lib/helper';
@@ -175,15 +176,17 @@ const InventoryAdjustmentTable = () => {
         <div className='flex flex-col gap-2 mb-4'>
           <div className='w-full flex flex-col sm:flex-row justify-between items-end sm:items-center gap-2'>
             <div className='w-full flex flex-row'>
-              <Button
-                href='/inventory/adjustment/add'
-                variant='outline'
-                color='primary'
-                className='w-full sm:w-fit'
-              >
-                <Icon icon='ic:round-plus' width={24} height={24} />
-                Tambah
-              </Button>
+              <RequirePermission permissions='lti.inventory.create'>
+                <Button
+                  href='/inventory/adjustment/add'
+                  variant='outline'
+                  color='primary'
+                  className='w-full sm:w-fit'
+                >
+                  <Icon icon='ic:round-plus' width={24} height={24} />
+                  Tambah
+                </Button>
+              </RequirePermission>
 
               {/* <DebouncedTextInput
                 name='search'

src/components/pages/inventory/movement/MovementTable.tsx

@@ -19,6 +19,7 @@ import SelectInput from '@/components/input/SelectInput';
 import RowDropdownOptions from '@/components/table/RowDropdownOptions';
 import RowCollapseOptions from '@/components/table/RowCollapseOptions';
 import RowOptionsMenuWrapper from '@/components/table/RowOptionsMenuWrapper';
+import RequirePermission from '@/components/helper/RequirePermission';
 
 const RowOptionsMenu = ({
   type = 'dropdown',
@@ -28,15 +29,17 @@ const RowOptionsMenu = ({
   props: CellContext<Movement, unknown>;
 }) => (
   <RowOptionsMenuWrapper type={type}>
-    <Button
-      href={`/inventory/movement/detail/?movementId=${props.row.original.id}`}
-      variant='ghost'
-      color='primary'
-      className='justify-start text-sm'
-    >
-      <Icon icon='mdi:eye-outline' width={16} height={16} />
-      Detail
-    </Button>
+    <RequirePermission permissions='lti.inventory.transfer.detail'>
+      <Button
+        href={`/inventory/movement/detail/?movementId=${props.row.original.id}`}
+        variant='ghost'
+        color='primary'
+        className='justify-start text-sm'
+      >
+        <Icon icon='mdi:eye-outline' width={16} height={16} />
+        Detail
+      </Button>
+    </RequirePermission>
   </RowOptionsMenuWrapper>
 );
 
@@ -145,15 +148,17 @@ const MovementTable = () => {
         <div className='flex flex-col gap-2 mb-4'>
           <div className='w-full flex flex-col sm:flex-row justify-between items-end sm:items-center gap-2'>
             <div className='w-full flex flex-row gap-2'>
-              <Button
-                href='/inventory/movement/add'
-                variant='outline'
-                color='primary'
-                className='w-full sm:w-fit'
-              >
-                <Icon icon='ic:round-plus' width={24} height={24} />
-                Tambah
-              </Button>
+              <RequirePermission permissions='lti.inventory.transfer.create'>
+                <Button
+                  href='/inventory/movement/add'
+                  variant='outline'
+                  color='primary'
+                  className='w-full sm:w-fit'
+                >
+                  <Icon icon='ic:round-plus' width={24} height={24} />
+                  Tambah
+                </Button>
+              </RequirePermission>
             </div>
 
             <DebouncedTextInput

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

@@ -7,6 +7,7 @@ import Table from '@/components/Table';
 import RowCollapseOptions from '@/components/table/RowCollapseOptions';
 import RowDropdownOptions from '@/components/table/RowDropdownOptions';
 import RowOptionsMenuWrapper from '@/components/table/RowOptionsMenuWrapper';
+import RequirePermission from '@/components/helper/RequirePermission';
 import { ROWS_OPTIONS } from '@/config/constant';
 import { isResponseSuccess } from '@/lib/api-helper';
 import { cn, formatCurrency, formatNumber } from '@/lib/helper';
@@ -31,15 +32,17 @@ const RowOptionsMenu = ({
   props: CellContext<InventoryProduct, unknown>;
 }) => (
   <RowOptionsMenuWrapper type={type}>
-    <Button
-      href={`/inventory/product/detail?inventoryProductId=${props.row.original.id}`}
-      variant='ghost'
-      color='primary'
-      className='justify-start text-sm'
-    >
-      <Icon icon='mdi:eye-outline' width={16} height={16} />
-      Detail
-    </Button>
+    <RequirePermission permissions='lti.inventory.product_stock.detail'>
+      <Button
+        href={`/inventory/product/detail?inventoryProductId=${props.row.original.id}`}
+        variant='ghost'
+        color='primary'
+        className='justify-start text-sm'
+      >
+        <Icon icon='mdi:eye-outline' width={16} height={16} />
+        Detail
+      </Button>
+    </RequirePermission>
   </RowOptionsMenuWrapper>
 );
 

src/components/pages/marketing/MarketingTable.tsx

@@ -26,6 +26,8 @@ import { useRouter } from 'next/navigation';
 import { useCallback, useState } from 'react';
 import toast from 'react-hot-toast';
 import useSWR from 'swr';
+import RequirePermission from '@/components/helper/RequirePermission';
+import { useAuth } from '@/services/hooks/useAuth';
 
 const RowsOptionsMenu = ({
   type = 'dropdown',
@@ -50,57 +52,71 @@ const RowsOptionsMenu = ({
       )}
     >
       <div className='flex flex-col gap-1'>
-        <Button
-          href={`/marketing/detail?marketingId=${props.row.original.id}`}
-          variant='ghost'
-          color='primary'
-          className='justify-start text-sm'
-        >
-          <Icon icon='mdi:eye-outline' width={16} height={16} />
-          Detail
-        </Button>
-        {props.row.original.latest_approval.step_number != 1 && (
+        <RequirePermission permissions='lti.marketing.delivery_order.detail'>
           <Button
-            href={
-              props.row.original.latest_approval.step_number == 3
-                ? `/marketing/detail/delivery-orders/edit?marketingId=${props.row.original.id}`
-                : props.row.original.latest_approval.step_number == 2
-                  ? `/marketing/add/delivery-orders?marketingId=${props.row.original.id}`
-                  : undefined
-            }
-            onClick={() => {
-              if (props.row.original.latest_approval.step_number == 2) {
-                deliveryClickHandler?.();
-              }
-            }}
+            href={`/marketing/detail?marketingId=${props.row.original.id}`}
             variant='ghost'
-            color='success'
+            color='primary'
             className='justify-start text-sm'
           >
-            <Icon icon='mdi:truck' width={16} height={16} />
-            Deliver
+            <Icon icon='mdi:eye-outline' width={16} height={16} />
+            Detail
           </Button>
+        </RequirePermission>
+        {props.row.original.latest_approval.step_number != 1 && (
+          <RequirePermission
+            permissions={
+              props.row.original.latest_approval.step_number == 3
+                ? 'lti.marketing.delivery_order.update'
+                : 'lti.marketing.delivery_order.create'
+            }
+          >
+            <Button
+              href={
+                props.row.original.latest_approval.step_number == 3
+                  ? `/marketing/detail/delivery-orders/edit?marketingId=${props.row.original.id}`
+                  : props.row.original.latest_approval.step_number == 2
+                    ? `/marketing/add/delivery-orders?marketingId=${props.row.original.id}`
+                    : undefined
+              }
+              onClick={() => {
+                if (props.row.original.latest_approval.step_number == 2) {
+                  deliveryClickHandler?.();
+                }
+              }}
+              variant='ghost'
+              color='success'
+              className='justify-start text-sm'
+            >
+              <Icon icon='mdi:truck' width={16} height={16} />
+              Deliver
+            </Button>
+          </RequirePermission>
         )}
         {props.row.original.latest_approval.step_number != 3 && (
-          <Button
-            href={`/marketing/detail/sales-orders/edit?marketingId=${props.row.original.id}`}
-            variant='ghost'
-            color='warning'
-            className='justify-start text-sm'
-          >
-            <Icon icon='mdi:pencil-outline' width={16} height={16} />
-            Edit
-          </Button>
+          <RequirePermission permissions='lti.marketing.sales_order.update'>
+            <Button
+              href={`/marketing/detail/sales-orders/edit?marketingId=${props.row.original.id}`}
+              variant='ghost'
+              color='warning'
+              className='justify-start text-sm'
+            >
+              <Icon icon='mdi:pencil-outline' width={16} height={16} />
+              Edit
+            </Button>
+          </RequirePermission>
         )}
-        <Button
-          onClick={deleteClickHandler}
-          variant='ghost'
-          color='error'
-          className='text-error hover:text-inherit justify-start text-sm'
-        >
-          <Icon icon='mdi:delete-outline' width={16} height={16} />
-          Delete
-        </Button>
+        <RequirePermission permissions='lti.marketing.sales_order.delete'>
+          <Button
+            onClick={deleteClickHandler}
+            variant='ghost'
+            color='error'
+            className='text-error hover:text-inherit justify-start text-sm'
+          >
+            <Icon icon='mdi:delete-outline' width={16} height={16} />
+            Delete
+          </Button>
+        </RequirePermission>
       </div>
     </div>
   );
@@ -116,6 +132,7 @@ const MarketingTable = () => {
   );
   const [selectedItem, setSelectedItem] = useState<Marketing | null>(null);
   const [rowSelection, setRowSelection] = useState<Record<string, boolean>>({});
+  const { permissionCheck } = useAuth();
 
   const router = useRouter();
 
@@ -270,10 +287,14 @@ const MarketingTable = () => {
       <div className='flex flex-col gap-4'>
         <div className='flex flex-col gap-2 mb-4'>
           <TableToolbar
-            addButton={{
-              href: '/marketing/add/sales-orders',
-              label: 'Tambah Sales Order',
-            }}
+            addButton={
+              permissionCheck('lti.marketing.sales_order.create')
+                ? {
+                    href: '/marketing/add/sales-orders',
+                    label: 'Tambah Sales Order',
+                  }
+                : undefined
+            }
             search={{
               value: search,
               onChange: searchChangeHandler,
@@ -281,25 +302,29 @@ const MarketingTable = () => {
             }}
           />
           <div className='flex flex-row gap-2'>
-            <Button
-              color='success'
-              onClick={approveClickHandler}
-              className='justify-start text-sm'
-              disabled={disableApprove}
-            >
-              <Icon icon='material-symbols:check' width={24} height={24} />
-              Approve
-            </Button>
+            <RequirePermission permissions='lti.marketing.sales_order.approve'>
+              <Button
+                color='success'
+                onClick={approveClickHandler}
+                className='justify-start text-sm'
+                disabled={disableApprove}
+              >
+                <Icon icon='material-symbols:check' width={24} height={24} />
+                Approve
+              </Button>
+            </RequirePermission>
 
-            <Button
-              color='error'
-              onClick={rejectClickHandler}
-              className='justify-start text-sm'
-              disabled={disableReject}
-            >
-              <Icon icon='material-symbols:close' width={24} height={24} />
-              Reject
-            </Button>
+            <RequirePermission permissions='lti.marketing.sales_order.approve'>
+              <Button
+                color='error'
+                onClick={rejectClickHandler}
+                className='justify-start text-sm'
+                disabled={disableReject}
+              >
+                <Icon icon='material-symbols:close' width={24} height={24} />
+                Reject
+              </Button>
+            </RequirePermission>
           </div>
           <TableRowSizeSelector
             value={pageSize}

src/components/pages/marketing/detail/MarketingDetail.tsx

@@ -33,6 +33,7 @@ import { useState } from 'react';
 import toast from 'react-hot-toast';
 import SalesOrderExport from '@/components/pages/marketing/pdf/SalesOrderExport';
 import DeliveryOrderExport from '@/components/pages/marketing/pdf/DeliveryOrderExport';
+import RequirePermission from '@/components/helper/RequirePermission';
 
 const MarketingDetail = ({
   initialValues,
@@ -134,45 +135,58 @@ const MarketingDetail = ({
         <div className='flex-row flex gap-3'>
           {initialValues?.latest_approval?.step_number == 1 && (
             <>
-              <Button
-                color='success'
-                onClick={approveClickHandler}
-                disabled={
-                  initialValues?.latest_approval?.step_number == 1 &&
-                  initialValues?.latest_approval?.action == 'REJECTED'
-                }
-              >
-                <Icon icon='mdi:check' width={24} height={24} />
-                Approve
-              </Button>
-              <Button
-                color='error'
-                onClick={rejectClickHandler}
-                disabled={
-                  initialValues?.latest_approval?.step_number == 1 &&
-                  initialValues?.latest_approval?.action == 'REJECTED'
-                }
-              >
-                <Icon icon='mdi:close' width={24} height={24} />
-                Reject
-              </Button>
+              <RequirePermission permissions='lti.marketing.sales_order.approve'>
+                <Button
+                  color='success'
+                  onClick={approveClickHandler}
+                  disabled={
+                    initialValues?.latest_approval?.step_number == 1 &&
+                    initialValues?.latest_approval?.action == 'REJECTED'
+                  }
+                >
+                  <Icon icon='mdi:check' width={24} height={24} />
+                  Approve
+                </Button>
+              </RequirePermission>
+
+              <RequirePermission permissions='lti.marketing.sales_order.approve'>
+                <Button
+                  color='error'
+                  onClick={rejectClickHandler}
+                  disabled={
+                    initialValues?.latest_approval?.step_number == 1 &&
+                    initialValues?.latest_approval?.action == 'REJECTED'
+                  }
+                >
+                  <Icon icon='mdi:close' width={24} height={24} />
+                  Reject
+                </Button>
+              </RequirePermission>
             </>
           )}
           {initialValues?.latest_approval?.step_number != 1 && (
-            <Button
-              color='success'
-              href={
+            <RequirePermission
+              permissions={
                 initialValues?.latest_approval?.step_number == 3
-                  ? `/marketing/detail/delivery-orders/edit?marketingId=${initialValues?.id}`
-                  : `/marketing/add/delivery-orders?marketingId=${initialValues?.id}`
+                  ? 'lti.marketing.delivery_order.update'
+                  : 'lti.marketing.delivery_order.create'
               }
             >
-              <Icon icon='mdi:truck' width={24} height={24} />
-              {initialValues?.latest_approval?.step_number == 3
-                ? 'Edit '
-                : 'Tambah '}
-              Delivery Order
-            </Button>
+              <Button
+                color='success'
+                href={
+                  initialValues?.latest_approval?.step_number == 3
+                    ? `/marketing/detail/delivery-orders/edit?marketingId=${initialValues?.id}`
+                    : `/marketing/add/delivery-orders?marketingId=${initialValues?.id}`
+                }
+              >
+                <Icon icon='mdi:truck' width={24} height={24} />
+                {initialValues?.latest_approval?.step_number == 3
+                  ? 'Edit '
+                  : 'Tambah '}
+                Delivery Order
+              </Button>
+            </RequirePermission>
           )}
         </div>
 
@@ -413,19 +427,23 @@ const MarketingDetail = ({
         )}
         <div className='flex flex-row gap-3'>
           {initialValues?.latest_approval?.step_number != 3 && (
-            <Button
-              color='warning'
-              type='button'
-              href={`/marketing/detail/${initialValues?.latest_approval.step_number == 3 ? 'delivery-orders' : 'sales-orders'}/edit?marketingId=${initialValues?.id}`}
-            >
-              <Icon icon='mdi:pencil' width={24} height={24} />
-              Edit
-            </Button>
+            <RequirePermission permissions='lti.marketing.sales_order.update'>
+              <Button
+                color='warning'
+                type='button'
+                href={`/marketing/detail/${initialValues?.latest_approval.step_number == 3 ? 'delivery-orders' : 'sales-orders'}/edit?marketingId=${initialValues?.id}`}
+              >
+                <Icon icon='mdi:pencil' width={24} height={24} />
+                Edit
+              </Button>
+            </RequirePermission>
           )}
-          <Button color='error' onClick={deleteClickHandler}>
-            <Icon icon='mdi:delete' width={24} height={24} />
-            Hapus
-          </Button>
+          <RequirePermission permissions='lti.marketing.sales_order.delete'>
+            <Button color='error' onClick={deleteClickHandler}>
+              <Icon icon='mdi:delete' width={24} height={24} />
+              Hapus
+            </Button>
+          </RequirePermission>
         </div>
       </div>
       <ConfirmationModal

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

@@ -47,6 +47,7 @@ import DeliveryOrderProductTable from '@/components/pages/marketing/form/table-v
 import DeliveryOrderProductForm from '@/components/pages/marketing/form/repeater/delivery-order/DeliverOrderProduct';
 import { SalesOrderProductFormValues } from '@/components/pages/marketing/form/repeater/sales-order/SalesOrderProduct.schema';
 import { DeliveryOrderProductFormValues } from '@/components/pages/marketing/form/repeater/delivery-order/DeliverOrderProduct.schema';
+import RequirePermission from '@/components/helper/RequirePermission';
 
 const MemoizedSalesOrderProductTable = memo(SalesOrderProductTable);
 const MemoizedSalesOrderProductForm = memo(SalesOrderProductForm);
@@ -689,15 +690,17 @@ const MarketingForm = ({
       {/* Actions button */}
       {formType == 'edit' && (
         <div className='flex flex-row justify-start'>
-          <Button
-            type='button'
-            color='error'
-            onClick={handleDelete}
-            isLoading={isLoading}
-          >
-            <Icon icon='mdi:trash' width={24} height={24} />
-            Hapus
-          </Button>
+          <RequirePermission permissions='lti.marketing.sales_order.delete'>
+            <Button
+              type='button'
+              color='error'
+              onClick={handleDelete}
+              isLoading={isLoading}
+            >
+              <Icon icon='mdi:trash' width={24} height={24} />
+              Hapus
+            </Button>
+          </RequirePermission>
         </div>
       )}
 

src/components/pages/master-data/area/AreasTable.tsx

@@ -15,6 +15,7 @@ import SelectInput, { OptionType } from '@/components/input/SelectInput';
 import RowDropdownOptions from '@/components/table/RowDropdownOptions';
 import RowCollapseOptions from '@/components/table/RowCollapseOptions';
 import RowOptionsMenuWrapper from '@/components/table/RowOptionsMenuWrapper';
+import RequirePermission from '@/components/helper/RequirePermission';
 
 import { Area } from '@/types/api/master-data/area';
 import { AreaApi } from '@/services/api/master-data';
@@ -34,40 +35,46 @@ const RowOptionsMenu = ({
 }) => {
   return (
     <RowOptionsMenuWrapper type={type}>
-      <Button
-        href={`/master-data/area/detail/?areaId=${props.row.original.id}`}
-        variant='ghost'
-        color='primary'
-        className='justify-start text-sm'
-      >
-        <Icon icon='mdi:eye-outline' width={16} height={16} />
-        Detail
-      </Button>
-
-      <Button
-        href={`/master-data/area/detail/edit/?areaId=${props.row.original.id}`}
-        variant='ghost'
-        color='warning'
-        className='justify-start text-sm'
-      >
-        <Icon icon='material-symbols:edit-outline' width={16} height={16} />
-        Edit
-      </Button>
-
-      <Button
-        onClick={deleteClickHandler}
-        variant='ghost'
-        color='error'
-        className='text-error hover:text-inherit'
-      >
-        <Icon
-          icon='material-symbols:delete-outline-rounded'
-          width={16}
-          height={16}
+      <RequirePermission permissions='lti.master.area.detail'>
+        <Button
+          href={`/master-data/area/detail/?areaId=${props.row.original.id}`}
+          variant='ghost'
+          color='primary'
           className='justify-start text-sm'
-        />
-        Delete
-      </Button>
+        >
+          <Icon icon='mdi:eye-outline' width={16} height={16} />
+          Detail
+        </Button>
+      </RequirePermission>
+
+      <RequirePermission permissions='lti.master.area.update'>
+        <Button
+          href={`/master-data/area/detail/edit/?areaId=${props.row.original.id}`}
+          variant='ghost'
+          color='warning'
+          className='justify-start text-sm'
+        >
+          <Icon icon='material-symbols:edit-outline' width={16} height={16} />
+          Edit
+        </Button>
+      </RequirePermission>
+
+      <RequirePermission permissions='lti.master.area.delete'>
+        <Button
+          onClick={deleteClickHandler}
+          variant='ghost'
+          color='error'
+          className='text-error hover:text-inherit'
+        >
+          <Icon
+            icon='material-symbols:delete-outline-rounded'
+            width={16}
+            height={16}
+            className='justify-start text-sm'
+          />
+          Delete
+        </Button>
+      </RequirePermission>
     </RowOptionsMenuWrapper>
   );
 };
@@ -192,15 +199,19 @@ const AreasTable = () => {
         <div className='flex flex-col gap-2 mb-4'>
           <div className='w-full flex flex-col sm:flex-row justify-between items-end sm:items-center gap-2'>
             <div className='w-full flex flex-row'>
-              <Button
-                href='/master-data/area/add'
-                variant='outline'
-                color='primary'
-                className='w-full sm:w-fit'
-              >
-                <Icon icon='ic:round-plus' width={24} height={24} />
-                Tambah
-              </Button>
+              <div className='w-full flex flex-row'>
+                <RequirePermission permissions='lti.master.area.create'>
+                  <Button
+                    href='/master-data/area/add'
+                    variant='outline'
+                    color='primary'
+                    className='w-full sm:w-fit'
+                  >
+                    <Icon icon='ic:round-plus' width={24} height={24} />
+                    Tambah
+                  </Button>
+                </RequirePermission>
+              </div>
             </div>
 
             <DebouncedTextInput

src/components/pages/master-data/area/form/AreaForm.tsx

@@ -10,6 +10,7 @@ import Button from '@/components/Button';
 import TextInput from '@/components/input/TextInput';
 import { useModal } from '@/components/Modal';
 import ConfirmationModal from '@/components/modal/ConfirmationModal';
+import RequirePermission from '@/components/helper/RequirePermission';
 
 import {
   AreaFormSchema,
@@ -160,36 +161,40 @@ const AreaForm = ({ type = 'add', initialValues }: AreaFormProps) => {
           <div className='flex flex-row justify-between gap-2 flex-wrap'>
             {type !== 'add' && (
               <div className='flex flex-row justify-start gap-2'>
-                <Button
-                  type='button'
-                  color='error'
-                  onClick={deleteAreaClickHandler}
-                  className='px-4'
-                >
-                  <Icon
-                    icon='material-symbols:delete-outline-rounded'
-                    width={24}
-                    height={24}
-                    className='justify-start text-sm'
-                  />
-                  Delete
-                </Button>
-
-                {type !== 'edit' && (
+                <RequirePermission permissions='lti.master.area.delete'>
                   <Button
                     type='button'
-                    color='warning'
-                    href={`/master-data/area/detail/edit/?areaId=${initialValues?.id}`}
+                    color='error'
+                    onClick={deleteAreaClickHandler}
                     className='px-4'
                   >
                     <Icon
-                      icon='material-symbols:edit-outline'
+                      icon='material-symbols:delete-outline-rounded'
                       width={24}
                       height={24}
                       className='justify-start text-sm'
                     />
-                    Edit
+                    Delete
                   </Button>
+                </RequirePermission>
+
+                {type !== 'edit' && (
+                  <RequirePermission permissions='lti.master.area.update'>
+                    <Button
+                      type='button'
+                      color='warning'
+                      href={`/master-data/area/detail/edit/?areaId=${initialValues?.id}`}
+                      className='px-4'
+                    >
+                      <Icon
+                        icon='material-symbols:edit-outline'
+                        width={24}
+                        height={24}
+                        className='justify-start text-sm'
+                      />
+                      Edit
+                    </Button>
+                  </RequirePermission>
                 )}
               </div>
             )}

src/components/pages/master-data/bank/BanksTable.tsx

@@ -15,6 +15,7 @@ import SelectInput, { OptionType } from '@/components/input/SelectInput';
 import RowDropdownOptions from '@/components/table/RowDropdownOptions';
 import RowCollapseOptions from '@/components/table/RowCollapseOptions';
 import RowOptionsMenuWrapper from '@/components/table/RowOptionsMenuWrapper';
+import RequirePermission from '@/components/helper/RequirePermission';
 
 import { Bank } from '@/types/api/master-data/bank';
 import { BankApi } from '@/services/api/master-data';
@@ -34,40 +35,46 @@ const RowOptionsMenu = ({
 }) => {
   return (
     <RowOptionsMenuWrapper type={type}>
-      <Button
-        href={`/master-data/bank/detail/?bankId=${props.row.original.id}`}
-        variant='ghost'
-        color='primary'
-        className='justify-start text-sm'
-      >
-        <Icon icon='mdi:eye-outline' width={16} height={16} />
-        Detail
-      </Button>
-
-      <Button
-        href={`/master-data/bank/detail/edit/?bankId=${props.row.original.id}`}
-        variant='ghost'
-        color='warning'
-        className='justify-start text-sm'
-      >
-        <Icon icon='material-symbols:edit-outline' width={16} height={16} />
-        Edit
-      </Button>
-
-      <Button
-        onClick={deleteClickHandler}
-        variant='ghost'
-        color='error'
-        className='justify-start text-sm text-error focus-visible:text-error-content hover:text-error-content'
-      >
-        <Icon
-          icon='material-symbols:delete-outline-rounded'
-          width={16}
-          height={16}
+      <RequirePermission permissions='lti.master.banks.detail'>
+        <Button
+          href={`/master-data/bank/detail/?bankId=${props.row.original.id}`}
+          variant='ghost'
+          color='primary'
           className='justify-start text-sm'
-        />
-        Delete
-      </Button>
+        >
+          <Icon icon='mdi:eye-outline' width={16} height={16} />
+          Detail
+        </Button>
+      </RequirePermission>
+
+      <RequirePermission permissions='lti.master.banks.update'>
+        <Button
+          href={`/master-data/bank/detail/edit/?bankId=${props.row.original.id}`}
+          variant='ghost'
+          color='warning'
+          className='justify-start text-sm'
+        >
+          <Icon icon='material-symbols:edit-outline' width={16} height={16} />
+          Edit
+        </Button>
+      </RequirePermission>
+
+      <RequirePermission permissions='lti.master.banks.delete'>
+        <Button
+          onClick={deleteClickHandler}
+          variant='ghost'
+          color='error'
+          className='justify-start text-sm text-error focus-visible:text-error-content hover:text-error-content'
+        >
+          <Icon
+            icon='material-symbols:delete-outline-rounded'
+            width={16}
+            height={16}
+            className='justify-start text-sm'
+          />
+          Delete
+        </Button>
+      </RequirePermission>
     </RowOptionsMenuWrapper>
   );
 };
@@ -205,15 +212,17 @@ const BanksTable = () => {
         <div className='flex flex-col gap-2 mb-4'>
           <div className='w-full flex flex-col sm:flex-row justify-between items-end sm:items-center gap-2'>
             <div className='w-full flex flex-row'>
-              <Button
-                href='/master-data/bank/add'
-                variant='outline'
-                color='primary'
-                className='w-full sm:w-fit'
-              >
-                <Icon icon='ic:round-plus' width={24} height={24} />
-                Tambah
-              </Button>
+              <RequirePermission permissions='lti.master.banks.create'>
+                <Button
+                  href='/master-data/bank/add'
+                  variant='outline'
+                  color='primary'
+                  className='w-full sm:w-fit'
+                >
+                  <Icon icon='ic:round-plus' width={24} height={24} />
+                  Tambah
+                </Button>
+              </RequirePermission>
             </div>
 
             <DebouncedTextInput

src/components/pages/master-data/bank/form/BankForm.tsx

@@ -10,6 +10,7 @@ import Button from '@/components/Button';
 import TextInput from '@/components/input/TextInput';
 import { useModal } from '@/components/Modal';
 import ConfirmationModal from '@/components/modal/ConfirmationModal';
+import RequirePermission from '@/components/helper/RequirePermission';
 
 import {
   BankFormSchema,
@@ -208,36 +209,40 @@ const BankForm = ({ type = 'add', initialValues }: BankFormProps) => {
           <div className='flex flex-row justify-between gap-2 flex-wrap'>
             {type !== 'add' && (
               <div className='flex flex-row justify-start gap-2'>
-                <Button
-                  type='button'
-                  color='error'
-                  onClick={deleteBankClickHandler}
-                  className='px-4'
-                >
-                  <Icon
-                    icon='material-symbols:delete-outline-rounded'
-                    width={24}
-                    height={24}
-                    className='justify-start text-sm'
-                  />
-                  Delete
-                </Button>
-
-                {type !== 'edit' && (
+                <RequirePermission permissions='lti.master.banks.delete'>
                   <Button
                     type='button'
-                    color='warning'
-                    href={`/master-data/bank/detail/edit/?bankId=${initialValues?.id}`}
+                    color='error'
+                    onClick={deleteBankClickHandler}
                     className='px-4'
                   >
                     <Icon
-                      icon='material-symbols:edit-outline'
+                      icon='material-symbols:delete-outline-rounded'
                       width={24}
                       height={24}
                       className='justify-start text-sm'
                     />
-                    Edit
+                    Delete
                   </Button>
+                </RequirePermission>
+
+                {type !== 'edit' && (
+                  <RequirePermission permissions='lti.master.banks.update'>
+                    <Button
+                      type='button'
+                      color='warning'
+                      href={`/master-data/bank/detail/edit/?bankId=${initialValues?.id}`}
+                      className='px-4'
+                    >
+                      <Icon
+                        icon='material-symbols:edit-outline'
+                        width={24}
+                        height={24}
+                        className='justify-start text-sm'
+                      />
+                      Edit
+                    </Button>
+                  </RequirePermission>
                 )}
               </div>
             )}

src/components/pages/master-data/customer/CustomersTable.tsx

@@ -9,6 +9,7 @@ import Table from '@/components/Table';
 import RowCollapseOptions from '@/components/table/RowCollapseOptions';
 import RowDropdownOptions from '@/components/table/RowDropdownOptions';
 import RowOptionsMenuWrapper from '@/components/table/RowOptionsMenuWrapper';
+import RequirePermission from '@/components/helper/RequirePermission';
 import { ROWS_OPTIONS } from '@/config/constant';
 import { isResponseSuccess } from '@/lib/api-helper';
 import { cn } from '@/lib/helper';
@@ -32,38 +33,44 @@ const RowOptionsMenu = ({
 }) => {
   return (
     <RowOptionsMenuWrapper type={type}>
-      <Button
-        href={`/master-data/customer/detail/?customerId=${props.row.original.id}`}
-        variant='ghost'
-        color='primary'
-        className='justify-start text-sm'
-      >
-        <Icon icon='mdi:eye-outline' width={16} height={16} />
-        Detail
-      </Button>
-      <Button
-        href={`/master-data/customer/detail/edit/?customerId=${props.row.original.id}`}
-        variant='ghost'
-        color='warning'
-        className='justify-start text-sm'
-      >
-        <Icon icon='material-symbols:edit-outline' width={16} height={16} />
-        Edit
-      </Button>
-      <Button
-        onClick={deleteClickHandler}
-        variant='ghost'
-        color='error'
-        className='justify-start text-sm text-error focus-visible:text-error-content hover:text-error-content'
-      >
-        <Icon
-          icon='material-symbols:delete-outline-rounded'
-          width={16}
-          height={16}
+      <RequirePermission permissions='lti.master.customer.detail'>
+        <Button
+          href={`/master-data/customer/detail/?customerId=${props.row.original.id}`}
+          variant='ghost'
+          color='primary'
           className='justify-start text-sm'
-        />
-        Delete
-      </Button>
+        >
+          <Icon icon='mdi:eye-outline' width={16} height={16} />
+          Detail
+        </Button>
+      </RequirePermission>
+      <RequirePermission permissions='lti.master.customer.update'>
+        <Button
+          href={`/master-data/customer/detail/edit/?customerId=${props.row.original.id}`}
+          variant='ghost'
+          color='warning'
+          className='justify-start text-sm'
+        >
+          <Icon icon='material-symbols:edit-outline' width={16} height={16} />
+          Edit
+        </Button>
+      </RequirePermission>
+      <RequirePermission permissions='lti.master.customer.delete'>
+        <Button
+          onClick={deleteClickHandler}
+          variant='ghost'
+          color='error'
+          className='justify-start text-sm text-error focus-visible:text-error-content hover:text-error-content'
+        >
+          <Icon
+            icon='material-symbols:delete-outline-rounded'
+            width={16}
+            height={16}
+            className='justify-start text-sm'
+          />
+          Delete
+        </Button>
+      </RequirePermission>
     </RowOptionsMenuWrapper>
   );
 };
@@ -200,15 +207,17 @@ const CustomersTable = () => {
         <div className='flex flex-col gap-2 mb-4'>
           <div className='w-full flex flex-col sm:flex-row justify-between items-end sm:items-center gap-2'>
             <div className='w-full flex flex-row'>
-              <Button
-                href='/master-data/customer/add'
-                variant='outline'
-                color='primary'
-                className='w-full sm:w-fit'
-              >
-                <Icon icon='ic:round-plus' width={24} height={24} />
-                Tambah
-              </Button>
+              <RequirePermission permissions='lti.master.customer.create'>
+                <Button
+                  href='/master-data/customer/add'
+                  variant='outline'
+                  color='primary'
+                  className='w-full sm:w-fit'
+                >
+                  <Icon icon='ic:round-plus' width={24} height={24} />
+                  Tambah
+                </Button>
+              </RequirePermission>
             </div>
 
             <DebouncedTextInput

src/components/pages/master-data/customer/form/CustomerForm.tsx

@@ -27,6 +27,7 @@ import SelectInput, { OptionType } from '@/components/input/SelectInput';
 import useSWR from 'swr';
 import { UserApi } from '@/services/api/user';
 import { TYPE_OPTIONS } from '@/config/constant';
+import RequirePermission from '@/components/helper/RequirePermission';
 
 interface CustomerFormProps {
   formType?: 'add' | 'edit' | 'detail';
@@ -319,36 +320,40 @@ const CustomerForm = ({
           <div className='flex flex-row justify-between gap-2 flex-wrap'>
             {formType !== 'add' && (
               <div className='flex flex-row justify-start gap-2'>
-                <Button
-                  type='button'
-                  color='error'
-                  onClick={deleteCustomerHandler}
-                  className='px-4'
-                >
-                  <Icon
-                    icon='material-symbols:delete-outline-rounded'
-                    width={24}
-                    height={24}
-                    className='justify-start text-sm'
-                  />
-                  Delete
-                </Button>
-
-                {formType !== 'edit' && (
+                <RequirePermission permissions='lti.master.customer.delete'>
                   <Button
                     type='button'
-                    color='warning'
-                    href={`/master-data/customer/detail/edit/?customerId=${initialValues?.id}`}
+                    color='error'
+                    onClick={deleteCustomerHandler}
                     className='px-4'
                   >
                     <Icon
-                      icon='material-symbols:edit-outline'
+                      icon='material-symbols:delete-outline-rounded'
                       width={24}
                       height={24}
                       className='justify-start text-sm'
                     />
-                    Edit
+                    Delete
                   </Button>
+                </RequirePermission>
+
+                {formType !== 'edit' && (
+                  <RequirePermission permissions='lti.master.customer.update'>
+                    <Button
+                      type='button'
+                      color='warning'
+                      href={`/master-data/customer/detail/edit/?customerId=${initialValues?.id}`}
+                      className='px-4'
+                    >
+                      <Icon
+                        icon='material-symbols:edit-outline'
+                        width={24}
+                        height={24}
+                        className='justify-start text-sm'
+                      />
+                      Edit
+                    </Button>
+                  </RequirePermission>
                 )}
               </div>
             )}

src/components/pages/master-data/fcr/FcrsTable.tsx

@@ -15,6 +15,7 @@ import SelectInput, { OptionType } from '@/components/input/SelectInput';
 import RowDropdownOptions from '@/components/table/RowDropdownOptions';
 import RowCollapseOptions from '@/components/table/RowCollapseOptions';
 import RowOptionsMenuWrapper from '@/components/table/RowOptionsMenuWrapper';
+import RequirePermission from '@/components/helper/RequirePermission';
 
 import { Fcr } from '@/types/api/master-data/fcr';
 import { FcrApi } from '@/services/api/master-data';
@@ -34,40 +35,46 @@ const RowOptionsMenu = ({
 }) => {
   return (
     <RowOptionsMenuWrapper type={type}>
-      <Button
-        href={`/master-data/fcr/detail/?fcrId=${props.row.original.id}`}
-        variant='ghost'
-        color='primary'
-        className='justify-start text-sm'
-      >
-        <Icon icon='mdi:eye-outline' width={16} height={16} />
-        Detail
-      </Button>
-
-      <Button
-        href={`/master-data/fcr/detail/edit/?fcrId=${props.row.original.id}`}
-        variant='ghost'
-        color='warning'
-        className='justify-start text-sm'
-      >
-        <Icon icon='material-symbols:edit-outline' width={16} height={16} />
-        Edit
-      </Button>
-
-      <Button
-        onClick={deleteClickHandler}
-        variant='ghost'
-        color='error'
-        className='justify-start text-sm text-error focus-visible:text-error-content hover:text-error-content'
-      >
-        <Icon
-          icon='material-symbols:delete-outline-rounded'
-          width={16}
-          height={16}
+      <RequirePermission permissions='lti.master.fcr.detail'>
+        <Button
+          href={`/master-data/fcr/detail/?fcrId=${props.row.original.id}`}
+          variant='ghost'
+          color='primary'
           className='justify-start text-sm'
-        />
-        Delete
-      </Button>
+        >
+          <Icon icon='mdi:eye-outline' width={16} height={16} />
+          Detail
+        </Button>
+      </RequirePermission>
+
+      <RequirePermission permissions='lti.master.fcr.update'>
+        <Button
+          href={`/master-data/fcr/detail/edit/?fcrId=${props.row.original.id}`}
+          variant='ghost'
+          color='warning'
+          className='justify-start text-sm'
+        >
+          <Icon icon='material-symbols:edit-outline' width={16} height={16} />
+          Edit
+        </Button>
+      </RequirePermission>
+
+      <RequirePermission permissions='lti.master.fcr.delete'>
+        <Button
+          onClick={deleteClickHandler}
+          variant='ghost'
+          color='error'
+          className='justify-start text-sm text-error focus-visible:text-error-content hover:text-error-content'
+        >
+          <Icon
+            icon='material-symbols:delete-outline-rounded'
+            width={16}
+            height={16}
+            className='justify-start text-sm'
+          />
+          Delete
+        </Button>
+      </RequirePermission>
     </RowOptionsMenuWrapper>
   );
 };
@@ -192,15 +199,17 @@ const FcrsTable = () => {
         <div className='flex flex-col gap-2 mb-4'>
           <div className='w-full flex flex-col sm:flex-row justify-between items-end sm:items-center gap-2'>
             <div className='w-full flex flex-row'>
-              <Button
-                href='/master-data/fcr/add'
-                variant='outline'
-                color='primary'
-                className='w-full sm:w-fit'
-              >
-                <Icon icon='ic:round-plus' width={24} height={24} />
-                Tambah
-              </Button>
+              <RequirePermission permissions='lti.master.fcr.create'>
+                <Button
+                  href='/master-data/fcr/add'
+                  variant='outline'
+                  color='primary'
+                  className='w-full sm:w-fit'
+                >
+                  <Icon icon='ic:round-plus' width={24} height={24} />
+                  Tambah
+                </Button>
+              </RequirePermission>
             </div>
 
             <DebouncedTextInput

src/components/pages/master-data/fcr/form/FcrForm.tsx

@@ -10,6 +10,7 @@ import Button from '@/components/Button';
 import TextInput from '@/components/input/TextInput';
 import { useModal } from '@/components/Modal';
 import ConfirmationModal from '@/components/modal/ConfirmationModal';
+import RequirePermission from '@/components/helper/RequirePermission';
 
 import {
   FcrFormSchema,
@@ -296,36 +297,40 @@ const FcrForm = ({ type = 'add', initialValues }: FcrFormProps) => {
           <div className='flex flex-row justify-between gap-2 flex-wrap'>
             {type !== 'add' && (
               <div className='flex flex-row justify-start gap-2'>
-                <Button
-                  type='button'
-                  color='error'
-                  onClick={deleteFcrClickHandler}
-                  className='px-4'
-                >
-                  <Icon
-                    icon='material-symbols:delete-outline-rounded'
-                    width={24}
-                    height={24}
-                    className='justify-start text-sm'
-                  />
-                  Delete
-                </Button>
-
-                {type !== 'edit' && (
+                <RequirePermission permissions='lti.master.fcr.delete'>
                   <Button
                     type='button'
-                    color='warning'
-                    href={`/master-data/fcr/detail/edit/?fcrId=${initialValues?.id}`}
+                    color='error'
+                    onClick={deleteFcrClickHandler}
                     className='px-4'
                   >
                     <Icon
-                      icon='material-symbols:edit-outline'
+                      icon='material-symbols:delete-outline-rounded'
                       width={24}
                       height={24}
                       className='justify-start text-sm'
                     />
-                    Edit
+                    Delete
                   </Button>
+                </RequirePermission>
+
+                {type !== 'edit' && (
+                  <RequirePermission permissions='lti.master.fcr.update'>
+                    <Button
+                      type='button'
+                      color='warning'
+                      href={`/master-data/fcr/detail/edit/?fcrId=${initialValues?.id}`}
+                      className='px-4'
+                    >
+                      <Icon
+                        icon='material-symbols:edit-outline'
+                        width={24}
+                        height={24}
+                        className='justify-start text-sm'
+                      />
+                      Edit
+                    </Button>
+                  </RequirePermission>
                 )}
               </div>
             )}

src/components/pages/master-data/flock/FlocksTable.tsx

@@ -13,6 +13,7 @@ import { useModal } from '@/components/Modal';
 import RowDropdownOptions from '@/components/table/RowDropdownOptions';
 import RowCollapseOptions from '@/components/table/RowCollapseOptions';
 import RowOptionsMenuWrapper from '@/components/table/RowOptionsMenuWrapper';
+import RequirePermission from '@/components/helper/RequirePermission';
 import toast from 'react-hot-toast';
 import DebouncedTextInput from '@/components/input/DebouncedTextInput';
 import SelectInput, { OptionType } from '@/components/input/SelectInput';
@@ -32,48 +33,54 @@ const RowsOptions = ({
 }) => {
   return (
     <RowOptionsMenuWrapper type={type}>
-      <Button
-        href={`/master-data/flock/detail/edit/?flockId=${props.row.original.id}`}
-        variant='ghost'
-        color='warning'
-        className='justify-start text-sm'
-      >
-        <Icon
-          icon='material-symbols:edit-outline'
-          width={16}
-          height={16}
+      <RequirePermission permissions='lti.master.flocks.update'>
+        <Button
+          href={`/master-data/flock/detail/edit/?flockId=${props.row.original.id}`}
+          variant='ghost'
+          color='warning'
           className='justify-start text-sm'
-        />
-        Edit
-      </Button>
-      <Button
-        href={`/master-data/flock/detail/?flockId=${props.row.original.id}`}
-        variant='ghost'
-        color='primary'
-        className='justify-start text-sm'
-      >
-        <Icon
-          icon='mdi:eye-outline'
-          width={16}
-          height={16}
+        >
+          <Icon
+            icon='material-symbols:edit-outline'
+            width={16}
+            height={16}
+            className='justify-start text-sm'
+          />
+          Edit
+        </Button>
+      </RequirePermission>
+      <RequirePermission permissions='lti.master.flocks.detail'>
+        <Button
+          href={`/master-data/flock/detail/?flockId=${props.row.original.id}`}
+          variant='ghost'
+          color='primary'
           className='justify-start text-sm'
-        />
-        Detail
-      </Button>
-      <Button
-        onClick={deleteClickHandler}
-        variant='ghost'
-        color='error'
-        className='justify-start text-sm text-error focus-visible:text-error-content hover:text-error-content'
-      >
-        <Icon
-          icon='material-symbols:delete-outline-rounded'
-          width={16}
-          height={16}
-          className='justify-start text-sm'
-        />
-        Delete
-      </Button>
+        >
+          <Icon
+            icon='mdi:eye-outline'
+            width={16}
+            height={16}
+            className='justify-start text-sm'
+          />
+          Detail
+        </Button>
+      </RequirePermission>
+      <RequirePermission permissions='lti.master.flocks.delete'>
+        <Button
+          onClick={deleteClickHandler}
+          variant='ghost'
+          color='error'
+          className='justify-start text-sm text-error focus-visible:text-error-content hover:text-error-content'
+        >
+          <Icon
+            icon='material-symbols:delete-outline-rounded'
+            width={16}
+            height={16}
+            className='justify-start text-sm'
+          />
+          Delete
+        </Button>
+      </RequirePermission>
     </RowOptionsMenuWrapper>
   );
 };
@@ -196,15 +203,17 @@ const FlockTable = () => {
         <div className='flex flex-col gap-2 mb-4'>
           <div className='w-full flex flex-col sm:flex-row justify-between items-end sm:items-center gap-2'>
             <div className='w-full flex flex-row'>
-              <Button
-                href='/master-data/flock/add'
-                variant='outline'
-                color='primary'
-                className='w-full sm:w-fit'
-              >
-                <Icon icon='ic:round-plus' width={24} height={24} />
-                Tambah
-              </Button>
+              <RequirePermission permissions='lti.master.flocks.create'>
+                <Button
+                  href='/master-data/flock/add'
+                  variant='outline'
+                  color='primary'
+                  className='w-full sm:w-fit'
+                >
+                  <Icon icon='ic:round-plus' width={24} height={24} />
+                  Tambah
+                </Button>
+              </RequirePermission>
             </div>
 
             <DebouncedTextInput

src/components/pages/master-data/flock/form/FlockForm.tsx

@@ -16,6 +16,7 @@ import { Icon } from '@iconify/react';
 import TextInput from '@/components/input/TextInput';
 import { cn } from '@/lib/helper';
 import ConfirmationModal from '@/components/modal/ConfirmationModal';
+import RequirePermission from '@/components/helper/RequirePermission';
 
 interface FlockCustomProps {
   formType?: 'add' | 'edit' | 'detail';
@@ -130,35 +131,39 @@ const FlockForm = ({ formType = 'add', initialValues }: FlockCustomProps) => {
           <div className='flex flex-row justify-between gap-2 flex-wrap'>
             {formType !== 'add' && (
               <div className='flex flex-row justify-start gap-2'>
-                <Button
-                  type='button'
-                  color='error'
-                  onClick={() => deleteModal.openModal()}
-                  className='px-4'
-                >
-                  <Icon
-                    icon='material-symbols:delete-outline-rounded'
-                    width={24}
-                    height={24}
-                    className='justify-start text-sm'
-                  />
-                  Delete
-                </Button>
-                {formType !== 'edit' && (
+                <RequirePermission permissions='lti.master.flocks.delete'>
                   <Button
                     type='button'
-                    color='warning'
-                    href={`/master-data/flock/detail/edit/?flockId=${initialValues?.id}`}
+                    color='error'
+                    onClick={() => deleteModal.openModal()}
                     className='px-4'
                   >
                     <Icon
-                      icon='material-symbols:edit-outline'
+                      icon='material-symbols:delete-outline-rounded'
                       width={24}
                       height={24}
                       className='justify-start text-sm'
                     />
-                    Edit
+                    Delete
                   </Button>
+                </RequirePermission>
+                {formType !== 'edit' && (
+                  <RequirePermission permissions='lti.master.flocks.update'>
+                    <Button
+                      type='button'
+                      color='warning'
+                      href={`/master-data/flock/detail/edit/?flockId=${initialValues?.id}`}
+                      className='px-4'
+                    >
+                      <Icon
+                        icon='material-symbols:edit-outline'
+                        width={24}
+                        height={24}
+                        className='justify-start text-sm'
+                      />
+                      Edit
+                    </Button>
+                  </RequirePermission>
                 )}
               </div>
             )}

src/components/pages/master-data/kandang/KandangsTable.tsx

@@ -20,6 +20,7 @@ import SelectInput, { OptionType } from '@/components/input/SelectInput';
 import RowDropdownOptions from '@/components/table/RowDropdownOptions';
 import RowCollapseOptions from '@/components/table/RowCollapseOptions';
 import RowOptionsMenuWrapper from '@/components/table/RowOptionsMenuWrapper';
+import RequirePermission from '@/components/helper/RequirePermission';
 
 import { Kandang } from '@/types/api/master-data/kandang';
 import { KandangApi } from '@/services/api/master-data';
@@ -39,40 +40,46 @@ const RowOptionsMenu = ({
 }) => {
   return (
     <RowOptionsMenuWrapper type={type}>
-      <Button
-        href={`/master-data/kandang/detail/?kandangId=${props.row.original.id}`}
-        variant='ghost'
-        color='primary'
-        className='justify-start text-sm'
-      >
-        <Icon icon='mdi:eye-outline' width={16} height={16} />
-        Detail
-      </Button>
-
-      <Button
-        href={`/master-data/kandang/detail/edit/?kandangId=${props.row.original.id}`}
-        variant='ghost'
-        color='warning'
-        className='justify-start text-sm'
-      >
-        <Icon icon='material-symbols:edit-outline' width={16} height={16} />
-        Edit
-      </Button>
-
-      <Button
-        onClick={deleteClickHandler}
-        variant='ghost'
-        color='error'
-        className='justify-start text-sm text-error focus-visible:text-error-content hover:text-error-content'
-      >
-        <Icon
-          icon='material-symbols:delete-outline-rounded'
-          width={16}
-          height={16}
+      <RequirePermission permissions='lti.master.kandangs.detail'>
+        <Button
+          href={`/master-data/kandang/detail/?kandangId=${props.row.original.id}`}
+          variant='ghost'
+          color='primary'
           className='justify-start text-sm'
-        />
-        Delete
-      </Button>
+        >
+          <Icon icon='mdi:eye-outline' width={16} height={16} />
+          Detail
+        </Button>
+      </RequirePermission>
+
+      <RequirePermission permissions='lti.master.kandangs.update'>
+        <Button
+          href={`/master-data/kandang/detail/edit/?kandangId=${props.row.original.id}`}
+          variant='ghost'
+          color='warning'
+          className='justify-start text-sm'
+        >
+          <Icon icon='material-symbols:edit-outline' width={16} height={16} />
+          Edit
+        </Button>
+      </RequirePermission>
+
+      <RequirePermission permissions='lti.master.kandangs.delete'>
+        <Button
+          onClick={deleteClickHandler}
+          variant='ghost'
+          color='error'
+          className='justify-start text-sm text-error focus-visible:text-error-content hover:text-error-content'
+        >
+          <Icon
+            icon='material-symbols:delete-outline-rounded'
+            width={16}
+            height={16}
+            className='justify-start text-sm'
+          />
+          Delete
+        </Button>
+      </RequirePermission>
     </RowOptionsMenuWrapper>
   );
 };
@@ -243,15 +250,19 @@ const KandangsTable = () => {
         <div className='flex flex-col gap-2 mb-4'>
           <div className='w-full flex flex-col sm:flex-row justify-between items-end sm:items-center gap-2'>
             <div className='w-full flex flex-row'>
-              <Button
-                href='/master-data/kandang/add'
-                variant='outline'
-                color='primary'
-                className='w-full sm:w-fit'
-              >
-                <Icon icon='ic:round-plus' width={24} height={24} />
-                Tambah
-              </Button>
+              <div className='w-full flex flex-row'>
+                <RequirePermission permissions='lti.master.kandangs.create'>
+                  <Button
+                    href='/master-data/kandang/add'
+                    variant='outline'
+                    color='primary'
+                    className='w-full sm:w-fit'
+                  >
+                    <Icon icon='ic:round-plus' width={24} height={24} />
+                    Tambah
+                  </Button>
+                </RequirePermission>
+              </div>
             </div>
 
             <DebouncedTextInput

src/components/pages/master-data/kandang/form/KandangForm.tsx

@@ -12,6 +12,7 @@ import TextInput from '@/components/input/TextInput';
 import SelectInput, { OptionType } from '@/components/input/SelectInput';
 import { useModal } from '@/components/Modal';
 import ConfirmationModal from '@/components/modal/ConfirmationModal';
+import RequirePermission from '@/components/helper/RequirePermission';
 
 import {
   KandangFormSchema,
@@ -285,36 +286,40 @@ const KandangForm = ({ type = 'add', initialValues }: KandangFormProps) => {
           <div className='flex flex-row justify-between gap-2 flex-wrap'>
             {type !== 'add' && (
               <div className='flex flex-row justify-start gap-2'>
-                <Button
-                  type='button'
-                  color='error'
-                  onClick={deleteKandangClickHandler}
-                  className='px-4'
-                >
-                  <Icon
-                    icon='material-symbols:delete-outline-rounded'
-                    width={24}
-                    height={24}
-                    className='justify-start text-sm'
-                  />
-                  Delete
-                </Button>
-
-                {type !== 'edit' && (
+                <RequirePermission permissions='lti.master.kandangs.delete'>
                   <Button
                     type='button'
-                    color='warning'
-                    href={`/master-data/kandang/detail/edit/?kandangId=${initialValues?.id}`}
+                    color='error'
+                    onClick={deleteKandangClickHandler}
                     className='px-4'
                   >
                     <Icon
-                      icon='material-symbols:edit-outline'
+                      icon='material-symbols:delete-outline-rounded'
                       width={24}
                       height={24}
                       className='justify-start text-sm'
                     />
-                    Edit
+                    Delete
                   </Button>
+                </RequirePermission>
+
+                {type !== 'edit' && (
+                  <RequirePermission permissions='lti.master.kandangs.update'>
+                    <Button
+                      type='button'
+                      color='warning'
+                      href={`/master-data/kandang/detail/edit/?kandangId=${initialValues?.id}`}
+                      className='px-4'
+                    >
+                      <Icon
+                        icon='material-symbols:edit-outline'
+                        width={24}
+                        height={24}
+                        className='justify-start text-sm'
+                      />
+                      Edit
+                    </Button>
+                  </RequirePermission>
                 )}
               </div>
             )}

src/components/pages/master-data/location/LocationsTable.tsx

@@ -20,6 +20,7 @@ import SelectInput, { OptionType } from '@/components/input/SelectInput';
 import RowDropdownOptions from '@/components/table/RowDropdownOptions';
 import RowCollapseOptions from '@/components/table/RowCollapseOptions';
 import RowOptionsMenuWrapper from '@/components/table/RowOptionsMenuWrapper';
+import RequirePermission from '@/components/helper/RequirePermission';
 
 import { Location } from '@/types/api/master-data/location';
 import { LocationApi } from '@/services/api/master-data';
@@ -39,40 +40,46 @@ const RowOptionsMenu = ({
 }) => {
   return (
     <RowOptionsMenuWrapper type={type}>
-      <Button
-        href={`/master-data/location/detail/?locationId=${props.row.original.id}`}
-        variant='ghost'
-        color='primary'
-        className='justify-start text-sm'
-      >
-        <Icon icon='mdi:eye-outline' width={16} height={16} />
-        Detail
-      </Button>
-
-      <Button
-        href={`/master-data/location/detail/edit/?locationId=${props.row.original.id}`}
-        variant='ghost'
-        color='warning'
-        className='justify-start text-sm'
-      >
-        <Icon icon='material-symbols:edit-outline' width={16} height={16} />
-        Edit
-      </Button>
-
-      <Button
-        onClick={deleteClickHandler}
-        variant='ghost'
-        color='error'
-        className='justify-start text-sm text-error focus-visible:text-error-content hover:text-error-content'
-      >
-        <Icon
-          icon='material-symbols:delete-outline-rounded'
-          width={16}
-          height={16}
+      <RequirePermission permissions='lti.master.locations.detail'>
+        <Button
+          href={`/master-data/location/detail/?locationId=${props.row.original.id}`}
+          variant='ghost'
+          color='primary'
           className='justify-start text-sm'
-        />
-        Delete
-      </Button>
+        >
+          <Icon icon='mdi:eye-outline' width={16} height={16} />
+          Detail
+        </Button>
+      </RequirePermission>
+
+      <RequirePermission permissions='lti.master.locations.update'>
+        <Button
+          href={`/master-data/location/detail/edit/?locationId=${props.row.original.id}`}
+          variant='ghost'
+          color='warning'
+          className='justify-start text-sm'
+        >
+          <Icon icon='material-symbols:edit-outline' width={16} height={16} />
+          Edit
+        </Button>
+      </RequirePermission>
+
+      <RequirePermission permissions='lti.master.locations.delete'>
+        <Button
+          onClick={deleteClickHandler}
+          variant='ghost'
+          color='error'
+          className='justify-start text-sm text-error focus-visible:text-error-content hover:text-error-content'
+        >
+          <Icon
+            icon='material-symbols:delete-outline-rounded'
+            width={16}
+            height={16}
+            className='justify-start text-sm'
+          />
+          Delete
+        </Button>
+      </RequirePermission>
     </RowOptionsMenuWrapper>
   );
 };
@@ -230,15 +237,19 @@ const LocationsTable = () => {
         <div className='flex flex-col gap-2 mb-4'>
           <div className='w-full flex flex-col sm:flex-row justify-between items-end sm:items-center gap-2'>
             <div className='w-full flex flex-row'>
-              <Button
-                href='/master-data/location/add'
-                variant='outline'
-                color='primary'
-                className='w-full sm:w-fit'
-              >
-                <Icon icon='ic:round-plus' width={24} height={24} />
-                Tambah
-              </Button>
+              <div className='w-full flex flex-row'>
+                <RequirePermission permissions='lti.master.locations.create'>
+                  <Button
+                    href='/master-data/location/add'
+                    variant='outline'
+                    color='primary'
+                    className='w-full sm:w-fit'
+                  >
+                    <Icon icon='ic:round-plus' width={24} height={24} />
+                    Tambah
+                  </Button>
+                </RequirePermission>
+              </div>
             </div>
 
             <DebouncedTextInput

src/components/pages/master-data/location/form/LocationForm.tsx

@@ -12,6 +12,7 @@ import TextInput from '@/components/input/TextInput';
 import SelectInput, { OptionType } from '@/components/input/SelectInput';
 import { useModal } from '@/components/Modal';
 import ConfirmationModal from '@/components/modal/ConfirmationModal';
+import RequirePermission from '@/components/helper/RequirePermission';
 
 import {
   LocationFormSchema,
@@ -229,36 +230,40 @@ const LocationForm = ({ type = 'add', initialValues }: LocationFormProps) => {
           <div className='flex flex-row justify-between gap-2 flex-wrap'>
             {type !== 'add' && (
               <div className='flex flex-row justify-start gap-2'>
-                <Button
-                  type='button'
-                  color='error'
-                  onClick={deleteLocationClickHandler}
-                  className='px-4'
-                >
-                  <Icon
-                    icon='material-symbols:delete-outline-rounded'
-                    width={24}
-                    height={24}
-                    className='justify-start text-sm'
-                  />
-                  Delete
-                </Button>
-
-                {type !== 'edit' && (
+                <RequirePermission permissions='lti.master.locations.delete'>
                   <Button
                     type='button'
-                    color='warning'
-                    href={`/master-data/location/detail/edit/?locationId=${initialValues?.id}`}
+                    color='error'
+                    onClick={deleteLocationClickHandler}
                     className='px-4'
                   >
                     <Icon
-                      icon='material-symbols:edit-outline'
+                      icon='material-symbols:delete-outline-rounded'
                       width={24}
                       height={24}
                       className='justify-start text-sm'
                     />
-                    Edit
+                    Delete
                   </Button>
+                </RequirePermission>
+
+                {type !== 'edit' && (
+                  <RequirePermission permissions='lti.master.locations.update'>
+                    <Button
+                      type='button'
+                      color='warning'
+                      href={`/master-data/location/detail/edit/?locationId=${initialValues?.id}`}
+                      className='px-4'
+                    >
+                      <Icon
+                        icon='material-symbols:edit-outline'
+                        width={24}
+                        height={24}
+                        className='justify-start text-sm'
+                      />
+                      Edit
+                    </Button>
+                  </RequirePermission>
                 )}
               </div>
             )}

src/components/pages/master-data/nonstock/NonstocksTable.tsx

@@ -20,6 +20,7 @@ import SelectInput, { OptionType } from '@/components/input/SelectInput';
 import RowDropdownOptions from '@/components/table/RowDropdownOptions';
 import RowCollapseOptions from '@/components/table/RowCollapseOptions';
 import RowOptionsMenuWrapper from '@/components/table/RowOptionsMenuWrapper';
+import RequirePermission from '@/components/helper/RequirePermission';
 
 import { Nonstock } from '@/types/api/master-data/nonstock';
 import { NonstockApi } from '@/services/api/master-data';
@@ -39,40 +40,46 @@ const RowOptionsMenu = ({
 }) => {
   return (
     <RowOptionsMenuWrapper type={type}>
-      <Button
-        href={`/master-data/nonstock/detail/?nonstockId=${props.row.original.id}`}
-        variant='ghost'
-        color='primary'
-        className='justify-start text-sm'
-      >
-        <Icon icon='mdi:eye-outline' width={16} height={16} />
-        Detail
-      </Button>
-
-      <Button
-        href={`/master-data/nonstock/detail/edit/?nonstockId=${props.row.original.id}`}
-        variant='ghost'
-        color='warning'
-        className='justify-start text-sm'
-      >
-        <Icon icon='material-symbols:edit-outline' width={16} height={16} />
-        Edit
-      </Button>
-
-      <Button
-        onClick={deleteClickHandler}
-        variant='ghost'
-        color='error'
-        className='justify-start text-sm text-error focus-visible:text-error-content hover:text-error-content'
-      >
-        <Icon
-          icon='material-symbols:delete-outline-rounded'
-          width={16}
-          height={16}
+      <RequirePermission permissions='lti.master.nonstocks.detail'>
+        <Button
+          href={`/master-data/nonstock/detail/?nonstockId=${props.row.original.id}`}
+          variant='ghost'
+          color='primary'
           className='justify-start text-sm'
-        />
-        Delete
-      </Button>
+        >
+          <Icon icon='mdi:eye-outline' width={16} height={16} />
+          Detail
+        </Button>
+      </RequirePermission>
+
+      <RequirePermission permissions='lti.master.nonstocks.update'>
+        <Button
+          href={`/master-data/nonstock/detail/edit/?nonstockId=${props.row.original.id}`}
+          variant='ghost'
+          color='warning'
+          className='justify-start text-sm'
+        >
+          <Icon icon='material-symbols:edit-outline' width={16} height={16} />
+          Edit
+        </Button>
+      </RequirePermission>
+
+      <RequirePermission permissions='lti.master.nonstocks.delete'>
+        <Button
+          onClick={deleteClickHandler}
+          variant='ghost'
+          color='error'
+          className='justify-start text-sm text-error focus-visible:text-error-content hover:text-error-content'
+        >
+          <Icon
+            icon='material-symbols:delete-outline-rounded'
+            width={16}
+            height={16}
+            className='justify-start text-sm'
+          />
+          Delete
+        </Button>
+      </RequirePermission>
     </RowOptionsMenuWrapper>
   );
 };
@@ -242,15 +249,17 @@ const NonstocksTable = () => {
         <div className='flex flex-col gap-2 mb-4'>
           <div className='w-full flex flex-col sm:flex-row justify-between items-end sm:items-center gap-2'>
             <div className='w-full flex flex-row'>
-              <Button
-                href='/master-data/nonstock/add'
-                variant='outline'
-                color='primary'
-                className='w-full sm:w-fit'
-              >
-                <Icon icon='ic:round-plus' width={24} height={24} />
-                Tambah
-              </Button>
+              <RequirePermission permissions='lti.master.nonstocks.create'>
+                <Button
+                  href='/master-data/nonstock/add'
+                  variant='outline'
+                  color='primary'
+                  className='w-full sm:w-fit'
+                >
+                  <Icon icon='ic:round-plus' width={24} height={24} />
+                  Tambah
+                </Button>
+              </RequirePermission>
             </div>
 
             <DebouncedTextInput

src/components/pages/master-data/nonstock/form/NonstockForm.tsx

@@ -12,6 +12,7 @@ import TextInput from '@/components/input/TextInput';
 import SelectInput, { OptionType } from '@/components/input/SelectInput';
 import { useModal } from '@/components/Modal';
 import ConfirmationModal from '@/components/modal/ConfirmationModal';
+import RequirePermission from '@/components/helper/RequirePermission';
 
 import {
   NonstockFormSchema,
@@ -298,36 +299,40 @@ const NonstockForm = ({ type = 'add', initialValues }: NonstockFormProps) => {
           <div className='flex flex-row justify-between gap-2 flex-wrap'>
             {type !== 'add' && (
               <div className='flex flex-row justify-start gap-2'>
-                <Button
-                  type='button'
-                  color='error'
-                  onClick={deleteNonstockClickHandler}
-                  className='px-4'
-                >
-                  <Icon
-                    icon='material-symbols:delete-outline-rounded'
-                    width={24}
-                    height={24}
-                    className='justify-start text-sm'
-                  />
-                  Delete
-                </Button>
-
-                {type !== 'edit' && (
+                <RequirePermission permissions='lti.master.nonstocks.delete'>
                   <Button
                     type='button'
-                    color='warning'
-                    href={`/master-data/nonstock/detail/edit/?nonstockId=${initialValues?.id}`}
+                    color='error'
+                    onClick={deleteNonstockClickHandler}
                     className='px-4'
                   >
                     <Icon
-                      icon='material-symbols:edit-outline'
+                      icon='material-symbols:delete-outline-rounded'
                       width={24}
                       height={24}
                       className='justify-start text-sm'
                     />
-                    Edit
+                    Delete
                   </Button>
+                </RequirePermission>
+
+                {type !== 'edit' && (
+                  <RequirePermission permissions='lti.master.nonstocks.update'>
+                    <Button
+                      type='button'
+                      color='warning'
+                      href={`/master-data/nonstock/detail/edit/?nonstockId=${initialValues?.id}`}
+                      className='px-4'
+                    >
+                      <Icon
+                        icon='material-symbols:edit-outline'
+                        width={24}
+                        height={24}
+                        className='justify-start text-sm'
+                      />
+                      Edit
+                    </Button>
+                  </RequirePermission>
                 )}
               </div>
             )}

src/components/pages/master-data/product-category/ProductCategoryTable.tsx

@@ -15,6 +15,7 @@ import SelectInput, { OptionType } from '@/components/input/SelectInput';
 import RowDropdownOptions from '@/components/table/RowDropdownOptions';
 import RowCollapseOptions from '@/components/table/RowCollapseOptions';
 import RowOptionsMenuWrapper from '@/components/table/RowOptionsMenuWrapper';
+import RequirePermission from '@/components/helper/RequirePermission';
 
 import { ProductCategory } from '@/types/api/master-data/product-category';
 import { ProductCategoryApi } from '@/services/api/master-data';
@@ -34,38 +35,46 @@ const RowOptionsMenu = ({
 }) => {
   return (
     <RowOptionsMenuWrapper type={type}>
-      <Button
-        href={`/master-data/product-category/detail/?productCategoryId=${props.row.original.id}`}
-        variant='ghost'
-        color='primary'
-        className='justify-start text-sm'
-      >
-        <Icon icon='mdi:eye-outline' width={16} height={16} />
-        Detail
-      </Button>
-      <Button
-        href={`/master-data/product-category/detail/edit/?productCategoryId=${props.row.original.id}`}
-        variant='ghost'
-        color='warning'
-        className='justify-start text-sm'
-      >
-        <Icon icon='mdi:pencil-outline' width={16} height={16} />
-        Edit
-      </Button>
-      <Button
-        onClick={deleteClickHandler}
-        variant='ghost'
-        color='error'
-        className='justify-start text-sm text-error focus-visible:text-error-content hover:text-error-content'
-      >
-        <Icon
-          icon='mdi:delete-outline'
-          width={16}
-          height={16}
+      <RequirePermission permissions='lti.master.product_categories.detail'>
+        <Button
+          href={`/master-data/product-category/detail/?productCategoryId=${props.row.original.id}`}
+          variant='ghost'
+          color='primary'
           className='justify-start text-sm'
-        />
-        Delete
-      </Button>
+        >
+          <Icon icon='mdi:eye-outline' width={16} height={16} />
+          Detail
+        </Button>
+      </RequirePermission>
+
+      <RequirePermission permissions='lti.master.product_categories.update'>
+        <Button
+          href={`/master-data/product-category/detail/edit/?productCategoryId=${props.row.original.id}`}
+          variant='ghost'
+          color='warning'
+          className='justify-start text-sm'
+        >
+          <Icon icon='mdi:pencil-outline' width={16} height={16} />
+          Edit
+        </Button>
+      </RequirePermission>
+
+      <RequirePermission permissions='lti.master.product_categories.delete'>
+        <Button
+          onClick={deleteClickHandler}
+          variant='ghost'
+          color='error'
+          className='justify-start text-sm text-error focus-visible:text-error-content hover:text-error-content'
+        >
+          <Icon
+            icon='mdi:delete-outline'
+            width={16}
+            height={16}
+            className='justify-start text-sm'
+          />
+          Delete
+        </Button>
+      </RequirePermission>
     </RowOptionsMenuWrapper>
   );
 };
@@ -193,15 +202,17 @@ const ProductCategoryTable = () => {
         <div className='flex flex-col gap-2 mb-4'>
           <div className='w-full flex flex-col sm:flex-row justify-between items-end sm:items-center gap-2'>
             <div className='w-full flex flex-row'>
-              <Button
-                href='/master-data/product-category/add'
-                variant='outline'
-                color='primary'
-                className='w-full sm:w-fit'
-              >
-                <Icon icon='ic:round-plus' width={24} height={24} />
-                Tambah
-              </Button>
+              <RequirePermission permissions='lti.master.product_categories.create'>
+                <Button
+                  href='/master-data/product-category/add'
+                  variant='outline'
+                  color='primary'
+                  className='w-full sm:w-fit'
+                >
+                  <Icon icon='ic:round-plus' width={24} height={24} />
+                  Tambah
+                </Button>
+              </RequirePermission>
             </div>
             <DebouncedTextInput
               name='search'

src/components/pages/master-data/product-category/form/ProductCategoryForm.tsx

@@ -10,6 +10,7 @@ import Button from '@/components/Button';
 import TextInput from '@/components/input/TextInput';
 import { useModal } from '@/components/Modal';
 import ConfirmationModal from '@/components/modal/ConfirmationModal';
+import RequirePermission from '@/components/helper/RequirePermission';
 
 import {
   ProductCategoryFormSchema,
@@ -183,36 +184,40 @@ const ProductCategoryForm = ({
           <div className='flex flex-row justify-between gap-2 flex-wrap'>
             {type !== 'add' && (
               <div className='flex flex-row justify-start gap-2'>
-                <Button
-                  type='button'
-                  color='error'
-                  onClick={deleteProductCategoryClickHandler}
-                  className='px-4'
-                >
-                  <Icon
-                    icon='material-symbols:delete-outline-rounded'
-                    width={24}
-                    height={24}
-                    className='justify-start text-sm'
-                  />
-                  Delete
-                </Button>
-
-                {type !== 'edit' && (
+                <RequirePermission permissions='lti.master.product_categories.delete'>
                   <Button
                     type='button'
-                    color='warning'
-                    href={`/master-data/product-category/detail/edit/?productCategoryId=${initialValues?.id}`}
+                    color='error'
+                    onClick={deleteProductCategoryClickHandler}
                     className='px-4'
                   >
                     <Icon
-                      icon='material-symbols:edit-outline'
+                      icon='material-symbols:delete-outline-rounded'
                       width={24}
                       height={24}
                       className='justify-start text-sm'
                     />
-                    Edit
+                    Delete
                   </Button>
+                </RequirePermission>
+
+                {type !== 'edit' && (
+                  <RequirePermission permissions='lti.master.product_categories.update'>
+                    <Button
+                      type='button'
+                      color='warning'
+                      href={`/master-data/product-category/detail/edit/?productCategoryId=${initialValues?.id}`}
+                      className='px-4'
+                    >
+                      <Icon
+                        icon='material-symbols:edit-outline'
+                        width={24}
+                        height={24}
+                        className='justify-start text-sm'
+                      />
+                      Edit
+                    </Button>
+                  </RequirePermission>
                 )}
               </div>
             )}

src/components/pages/master-data/product/ProductTable.tsx

@@ -20,6 +20,7 @@ import SelectInput, { OptionType } from '@/components/input/SelectInput';
 import RowDropdownOptions from '@/components/table/RowDropdownOptions';
 import RowCollapseOptions from '@/components/table/RowCollapseOptions';
 import RowOptionsMenuWrapper from '@/components/table/RowOptionsMenuWrapper';
+import RequirePermission from '@/components/helper/RequirePermission';
 
 import { Product } from '@/types/api/master-data/product';
 import { ProductApi } from '@/services/api/master-data';
@@ -38,38 +39,44 @@ const RowOptionsMenu = ({
   deleteClickHandler: () => void;
 }) => (
   <RowOptionsMenuWrapper type={type}>
-    <Button
-      href={`/master-data/product/detail/?productId=${props.row.original.id}`}
-      variant='ghost'
-      color='primary'
-      className='justify-start text-sm'
-    >
-      <Icon icon='mdi:eye-outline' width={16} height={16} />
-      Detail
-    </Button>
-    <Button
-      href={`/master-data/product/detail/edit/?productId=${props.row.original.id}`}
-      variant='ghost'
-      color='warning'
-      className='justify-start text-sm'
-    >
-      <Icon icon='material-symbols:edit-outline' width={16} height={16} />
-      Edit
-    </Button>
-    <Button
-      onClick={deleteClickHandler}
-      variant='ghost'
-      color='error'
-      className='justify-start text-sm text-error focus-visible:text-error-content hover:text-error-content'
-    >
-      <Icon
-        icon='material-symbols:delete-outline-rounded'
-        width={16}
-        height={16}
+    <RequirePermission permissions='lti.master.products.detail'>
+      <Button
+        href={`/master-data/product/detail/?productId=${props.row.original.id}`}
+        variant='ghost'
+        color='primary'
         className='justify-start text-sm'
-      />
-      Delete
-    </Button>
+      >
+        <Icon icon='mdi:eye-outline' width={16} height={16} />
+        Detail
+      </Button>
+    </RequirePermission>
+    <RequirePermission permissions='lti.master.products.update'>
+      <Button
+        href={`/master-data/product/detail/edit/?productId=${props.row.original.id}`}
+        variant='ghost'
+        color='warning'
+        className='justify-start text-sm'
+      >
+        <Icon icon='material-symbols:edit-outline' width={16} height={16} />
+        Edit
+      </Button>
+    </RequirePermission>
+    <RequirePermission permissions='lti.master.products.delete'>
+      <Button
+        onClick={deleteClickHandler}
+        variant='ghost'
+        color='error'
+        className='justify-start text-sm text-error focus-visible:text-error-content hover:text-error-content'
+      >
+        <Icon
+          icon='material-symbols:delete-outline-rounded'
+          width={16}
+          height={16}
+          className='justify-start text-sm'
+        />
+        Delete
+      </Button>
+    </RequirePermission>
   </RowOptionsMenuWrapper>
 );
 
@@ -273,15 +280,17 @@ const ProductsTable = () => {
         <div className='flex flex-col gap-2 mb-4'>
           <div className='w-full flex flex-col sm:flex-row justify-between items-end sm:items-center gap-2'>
             <div className='w-full flex flex-row'>
-              <Button
-                href='/master-data/product/add'
-                variant='outline'
-                className='w-full sm:w-fit'
-                color='primary'
-              >
-                <Icon icon='ic:round-plus' width={24} height={24} />
-                Tambah
-              </Button>
+              <RequirePermission permissions='lti.master.products.create'>
+                <Button
+                  href='/master-data/product/add'
+                  variant='outline'
+                  className='w-full sm:w-fit'
+                  color='primary'
+                >
+                  <Icon icon='ic:round-plus' width={24} height={24} />
+                  Tambah
+                </Button>
+              </RequirePermission>
             </div>
             <DebouncedTextInput
               name='search'

src/components/pages/master-data/product/form/ProductForm.tsx

@@ -16,6 +16,7 @@ import SelectInput, {
 } from '@/components/input/SelectInput';
 import { useModal } from '@/components/Modal';
 import ConfirmationModal from '@/components/modal/ConfirmationModal';
+import RequirePermission from '@/components/helper/RequirePermission';
 
 import {
   ProductFormSchema,
@@ -413,35 +414,39 @@ const ProductForm = ({ type = 'add', initialValues }: ProductFormProps) => {
           <div className='flex flex-row justify-between gap-2 flex-wrap'>
             {type !== 'add' && (
               <div className='flex flex-row justify-start gap-2'>
-                <Button
-                  type='button'
-                  color='error'
-                  onClick={deleteProductClickHandler}
-                  className='px-4'
-                >
-                  <Icon
-                    icon='material-symbols:delete-outline-rounded'
-                    width={24}
-                    height={24}
-                    className='justify-start text-sm'
-                  />
-                  Delete
-                </Button>
-                {type !== 'edit' && (
+                <RequirePermission permissions='lti.master.products.delete'>
                   <Button
                     type='button'
-                    color='warning'
-                    href={`/master-data/product/detail/edit/?productId=${initialValues?.id}`}
+                    color='error'
+                    onClick={deleteProductClickHandler}
                     className='px-4'
                   >
                     <Icon
-                      icon='material-symbols:edit-outline'
+                      icon='material-symbols:delete-outline-rounded'
                       width={24}
                       height={24}
                       className='justify-start text-sm'
                     />
-                    Edit
+                    Delete
                   </Button>
+                </RequirePermission>
+                {type !== 'edit' && (
+                  <RequirePermission permissions='lti.master.products.update'>
+                    <Button
+                      type='button'
+                      color='warning'
+                      href={`/master-data/product/detail/edit/?productId=${initialValues?.id}`}
+                      className='px-4'
+                    >
+                      <Icon
+                        icon='material-symbols:edit-outline'
+                        width={24}
+                        height={24}
+                        className='justify-start text-sm'
+                      />
+                      Edit
+                    </Button>
+                  </RequirePermission>
                 )}
               </div>
             )}

src/components/pages/master-data/supplier/SupplierTable.tsx

@@ -9,6 +9,7 @@ import Table from '@/components/Table';
 import RowCollapseOptions from '@/components/table/RowCollapseOptions';
 import RowDropdownOptions from '@/components/table/RowDropdownOptions';
 import RowOptionsMenuWrapper from '@/components/table/RowOptionsMenuWrapper';
+import RequirePermission from '@/components/helper/RequirePermission';
 import { ROWS_OPTIONS } from '@/config/constant';
 import { isResponseSuccess } from '@/lib/api-helper';
 import { cn } from '@/lib/helper';
@@ -32,48 +33,54 @@ const RowOptions = ({
 }) => {
   return (
     <RowOptionsMenuWrapper type={type}>
-      <Button
-        href={`/master-data/supplier/detail/?supplierId=${props.row.original.id}`}
-        variant='ghost'
-        color='primary'
-        className='justify-start text-sm'
-      >
-        <Icon
-          icon='mdi:eye-outline'
-          width={16}
-          height={16}
+      <RequirePermission permissions='lti.master.suppliers.detail'>
+        <Button
+          href={`/master-data/supplier/detail/?supplierId=${props.row.original.id}`}
+          variant='ghost'
+          color='primary'
           className='justify-start text-sm'
-        />
-        Detail
-      </Button>
-      <Button
-        href={`/master-data/supplier/detail/edit/?supplierId=${props.row.original.id}`}
-        variant='ghost'
-        color='warning'
-        className='justify-start text-sm'
-      >
-        <Icon
-          icon='material-symbols:edit-outline'
-          width={16}
-          height={16}
+        >
+          <Icon
+            icon='mdi:eye-outline'
+            width={16}
+            height={16}
+            className='justify-start text-sm'
+          />
+          Detail
+        </Button>
+      </RequirePermission>
+      <RequirePermission permissions='lti.master.suppliers.update'>
+        <Button
+          href={`/master-data/supplier/detail/edit/?supplierId=${props.row.original.id}`}
+          variant='ghost'
+          color='warning'
           className='justify-start text-sm'
-        />
-        Edit
-      </Button>
-      <Button
-        onClick={deleteClickHandler}
-        variant='ghost'
-        color='error'
-        className='justify-start text-sm text-error focus-visible:text-error-content hover:text-error-content'
-      >
-        <Icon
-          icon='material-symbols:delete-outline-rounded'
-          width={16}
-          height={16}
-          className='justify-start text-sm'
-        />
-        Delete
-      </Button>
+        >
+          <Icon
+            icon='material-symbols:edit-outline'
+            width={16}
+            height={16}
+            className='justify-start text-sm'
+          />
+          Edit
+        </Button>
+      </RequirePermission>
+      <RequirePermission permissions='lti.master.suppliers.delete'>
+        <Button
+          onClick={deleteClickHandler}
+          variant='ghost'
+          color='error'
+          className='justify-start text-sm text-error focus-visible:text-error-content hover:text-error-content'
+        >
+          <Icon
+            icon='material-symbols:delete-outline-rounded'
+            width={16}
+            height={16}
+            className='justify-start text-sm'
+          />
+          Delete
+        </Button>
+      </RequirePermission>
     </RowOptionsMenuWrapper>
   );
 };
@@ -219,15 +226,17 @@ const SuppliersTable = () => {
         <div className='flex flex-col gap-2 mb-4'>
           <div className='w-full flex flex-col sm:flex-row justify-between items-end sm:items-center gap-2'>
             <div className='w-full flex flex-row'>
-              <Button
-                href='/master-data/supplier/add'
-                variant='outline'
-                color='primary'
-                className='w-full sm:w-fit'
-              >
-                <Icon icon='ic:round-plus' width={24} height={24} />
-                Tambah
-              </Button>
+              <RequirePermission permissions='lti.master.suppliers.create'>
+                <Button
+                  href='/master-data/supplier/add'
+                  variant='outline'
+                  color='primary'
+                  className='w-full sm:w-fit'
+                >
+                  <Icon icon='ic:round-plus' width={24} height={24} />
+                  Tambah
+                </Button>
+              </RequirePermission>
             </div>
 
             <DebouncedTextInput

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

@@ -24,6 +24,7 @@ import TextInput from '@/components/input/TextInput';
 import TextArea from '@/components/input/TextArea';
 import { cn } from '@/lib/helper';
 import ConfirmationModal from '@/components/modal/ConfirmationModal';
+import RequirePermission from '@/components/helper/RequirePermission';
 
 interface SupplierCustomProps {
   formType?: 'add' | 'edit' | 'detail';
@@ -406,36 +407,40 @@ const SupplierForm = ({
           <div className='flex flex-row justify-between gap-2 flex-wrap'>
             {formType !== 'add' && (
               <div className='flex flex-row justify-start gap-2'>
-                <Button
-                  type='button'
-                  color='error'
-                  onClick={deleteSupplierHandler}
-                  className='px-4'
-                >
-                  <Icon
-                    icon='material-symbols:delete-outline-rounded'
-                    width={24}
-                    height={24}
-                    className='justify-start text-sm'
-                  />
-                  Delete
-                </Button>
-
-                {formType !== 'edit' && (
+                <RequirePermission permissions='lti.master.suppliers.delete'>
                   <Button
                     type='button'
-                    color='warning'
-                    href={`/master-data/supplier/detail/edit/?supplierId=${initialValues?.id}`}
+                    color='error'
+                    onClick={deleteSupplierHandler}
                     className='px-4'
                   >
                     <Icon
-                      icon='material-symbols:edit-outline'
+                      icon='material-symbols:delete-outline-rounded'
                       width={24}
                       height={24}
                       className='justify-start text-sm'
                     />
-                    Edit
+                    Delete
                   </Button>
+                </RequirePermission>
+
+                {formType !== 'edit' && (
+                  <RequirePermission permissions='lti.master.suppliers.update'>
+                    <Button
+                      type='button'
+                      color='warning'
+                      href={`/master-data/supplier/detail/edit/?supplierId=${initialValues?.id}`}
+                      className='px-4'
+                    >
+                      <Icon
+                        icon='material-symbols:edit-outline'
+                        width={24}
+                        height={24}
+                        className='justify-start text-sm'
+                      />
+                      Edit
+                    </Button>
+                  </RequirePermission>
                 )}
               </div>
             )}

src/components/pages/master-data/uom/UomsTable.tsx

@@ -15,6 +15,7 @@ import SelectInput, { OptionType } from '@/components/input/SelectInput';
 import RowDropdownOptions from '@/components/table/RowDropdownOptions';
 import RowCollapseOptions from '@/components/table/RowCollapseOptions';
 import RowOptionsMenuWrapper from '@/components/table/RowOptionsMenuWrapper';
+import RequirePermission from '@/components/helper/RequirePermission';
 
 import { Uom } from '@/types/api/master-data/uom';
 import { UomApi } from '@/services/api/master-data';
@@ -34,40 +35,46 @@ const RowOptionsMenu = ({
 }) => {
   return (
     <RowOptionsMenuWrapper type={type}>
-      <Button
-        href={`/master-data/uom/detail/?uomId=${props.row.original.id}`}
-        variant='ghost'
-        color='primary'
-        className='justify-start text-sm'
-      >
-        <Icon icon='mdi:eye-outline' width={16} height={16} />
-        Detail
-      </Button>
-
-      <Button
-        href={`/master-data/uom/detail/edit/?uomId=${props.row.original.id}`}
-        variant='ghost'
-        color='warning'
-        className='justify-start text-sm'
-      >
-        <Icon icon='material-symbols:edit-outline' width={16} height={16} />
-        Edit
-      </Button>
-
-      <Button
-        onClick={deleteClickHandler}
-        variant='ghost'
-        color='error'
-        className='justify-start text-sm text-error focus-visible:text-error-content hover:text-error-content'
-      >
-        <Icon
-          icon='material-symbols:delete-outline-rounded'
-          width={16}
-          height={16}
+      <RequirePermission permissions='lti.master.uoms.detail'>
+        <Button
+          href={`/master-data/uom/detail/?uomId=${props.row.original.id}`}
+          variant='ghost'
+          color='primary'
           className='justify-start text-sm'
-        />
-        Delete
-      </Button>
+        >
+          <Icon icon='mdi:eye-outline' width={16} height={16} />
+          Detail
+        </Button>
+      </RequirePermission>
+
+      <RequirePermission permissions='lti.master.uoms.update'>
+        <Button
+          href={`/master-data/uom/detail/edit/?uomId=${props.row.original.id}`}
+          variant='ghost'
+          color='warning'
+          className='justify-start text-sm'
+        >
+          <Icon icon='material-symbols:edit-outline' width={16} height={16} />
+          Edit
+        </Button>
+      </RequirePermission>
+
+      <RequirePermission permissions='lti.master.uoms.delete'>
+        <Button
+          onClick={deleteClickHandler}
+          variant='ghost'
+          color='error'
+          className='justify-start text-sm text-error focus-visible:text-error-content hover:text-error-content'
+        >
+          <Icon
+            icon='material-symbols:delete-outline-rounded'
+            width={16}
+            height={16}
+            className='justify-start text-sm'
+          />
+          Delete
+        </Button>
+      </RequirePermission>
     </RowOptionsMenuWrapper>
   );
 };
@@ -192,15 +199,17 @@ const UomsTable = () => {
         <div className='flex flex-col gap-2 mb-4'>
           <div className='w-full flex flex-col sm:flex-row justify-between items-end sm:items-center gap-2'>
             <div className='w-full flex flex-row'>
-              <Button
-                href='/master-data/uom/add'
-                variant='outline'
-                color='primary'
-                className='w-full sm:w-fit'
-              >
-                <Icon icon='ic:round-plus' width={24} height={24} />
-                Tambah
-              </Button>
+              <RequirePermission permissions='lti.master.uoms.create'>
+                <Button
+                  href='/master-data/uom/add'
+                  variant='outline'
+                  color='primary'
+                  className='w-full sm:w-fit'
+                >
+                  <Icon icon='ic:round-plus' width={24} height={24} />
+                  Tambah
+                </Button>
+              </RequirePermission>
             </div>
 
             <DebouncedTextInput

src/components/pages/master-data/uom/form/UomForm.tsx

@@ -10,6 +10,7 @@ import Button from '@/components/Button';
 import TextInput from '@/components/input/TextInput';
 import { useModal } from '@/components/Modal';
 import ConfirmationModal from '@/components/modal/ConfirmationModal';
+import RequirePermission from '@/components/helper/RequirePermission';
 
 import {
   UomFormSchema,
@@ -160,36 +161,40 @@ const UomForm = ({ type = 'add', initialValues }: UomFormProps) => {
           <div className='flex flex-row justify-between gap-2 flex-wrap'>
             {type !== 'add' && (
               <div className='flex flex-row justify-start gap-2'>
-                <Button
-                  type='button'
-                  color='error'
-                  onClick={deleteUomClickHandler}
-                  className='px-4'
-                >
-                  <Icon
-                    icon='material-symbols:delete-outline-rounded'
-                    width={24}
-                    height={24}
-                    className='justify-start text-sm'
-                  />
-                  Delete
-                </Button>
-
-                {type !== 'edit' && (
+                <RequirePermission permissions='lti.master.uoms.delete'>
                   <Button
                     type='button'
-                    color='warning'
-                    href={`/master-data/uom/detail/edit/?uomId=${initialValues?.id}`}
+                    color='error'
+                    onClick={deleteUomClickHandler}
                     className='px-4'
                   >
                     <Icon
-                      icon='material-symbols:edit-outline'
+                      icon='material-symbols:delete-outline-rounded'
                       width={24}
                       height={24}
                       className='justify-start text-sm'
                     />
-                    Edit
+                    Delete
                   </Button>
+                </RequirePermission>
+
+                {type !== 'edit' && (
+                  <RequirePermission permissions='lti.master.uoms.update'>
+                    <Button
+                      type='button'
+                      color='warning'
+                      href={`/master-data/uom/detail/edit/?uomId=${initialValues?.id}`}
+                      className='px-4'
+                    >
+                      <Icon
+                        icon='material-symbols:edit-outline'
+                        width={24}
+                        height={24}
+                        className='justify-start text-sm'
+                      />
+                      Edit
+                    </Button>
+                  </RequirePermission>
                 )}
               </div>
             )}

src/components/pages/master-data/warehouse/WarehousesTable.tsx

@@ -20,6 +20,7 @@ import SelectInput, { OptionType } from '@/components/input/SelectInput';
 import RowDropdownOptions from '@/components/table/RowDropdownOptions';
 import RowCollapseOptions from '@/components/table/RowCollapseOptions';
 import RowOptionsMenuWrapper from '@/components/table/RowOptionsMenuWrapper';
+import RequirePermission from '@/components/helper/RequirePermission';
 
 import { Warehouse } from '@/types/api/master-data/warehouse';
 import { WarehouseApi } from '@/services/api/master-data';
@@ -39,40 +40,46 @@ const RowOptionsMenu = ({
 }) => {
   return (
     <RowOptionsMenuWrapper type={type}>
-      <Button
-        href={`/master-data/warehouse/detail/?warehouseId=${props.row.original.id}`}
-        variant='ghost'
-        color='primary'
-        className='justify-start text-sm'
-      >
-        <Icon icon='mdi:eye-outline' width={16} height={16} />
-        Detail
-      </Button>
-
-      <Button
-        href={`/master-data/warehouse/detail/edit/?warehouseId=${props.row.original.id}`}
-        variant='ghost'
-        color='warning'
-        className='justify-start text-sm'
-      >
-        <Icon icon='material-symbols:edit-outline' width={16} height={16} />
-        Edit
-      </Button>
-
-      <Button
-        onClick={deleteClickHandler}
-        variant='ghost'
-        color='error'
-        className='text-error hover:text-inherit'
-      >
-        <Icon
-          icon='material-symbols:delete-outline-rounded'
-          width={16}
-          height={16}
+      <RequirePermission permissions='lti.master.warehouses.detail'>
+        <Button
+          href={`/master-data/warehouse/detail/?warehouseId=${props.row.original.id}`}
+          variant='ghost'
+          color='primary'
           className='justify-start text-sm'
-        />
-        Delete
-      </Button>
+        >
+          <Icon icon='mdi:eye-outline' width={16} height={16} />
+          Detail
+        </Button>
+      </RequirePermission>
+
+      <RequirePermission permissions='lti.master.warehouses.update'>
+        <Button
+          href={`/master-data/warehouse/detail/edit/?warehouseId=${props.row.original.id}`}
+          variant='ghost'
+          color='warning'
+          className='justify-start text-sm'
+        >
+          <Icon icon='material-symbols:edit-outline' width={16} height={16} />
+          Edit
+        </Button>
+      </RequirePermission>
+
+      <RequirePermission permissions='lti.master.warehouses.delete'>
+        <Button
+          onClick={deleteClickHandler}
+          variant='ghost'
+          color='error'
+          className='text-error hover:text-inherit'
+        >
+          <Icon
+            icon='material-symbols:delete-outline-rounded'
+            width={16}
+            height={16}
+            className='justify-start text-sm'
+          />
+          Delete
+        </Button>
+      </RequirePermission>
     </RowOptionsMenuWrapper>
   );
 };
@@ -270,15 +277,17 @@ const WarehousesTable = () => {
         <div className='flex flex-col gap-2 mb-4'>
           <div className='w-full flex flex-col sm:flex-row justify-between items-end sm:items-center gap-2'>
             <div className='w-full flex flex-row'>
-              <Button
-                href='/master-data/warehouse/add'
-                variant='outline'
-                color='primary'
-                className='w-full sm:w-fit'
-              >
-                <Icon icon='ic:round-plus' width={24} height={24} />
-                Tambah
-              </Button>
+              <RequirePermission permissions='lti.master.warehouses.create'>
+                <Button
+                  href='/master-data/warehouse/add'
+                  variant='outline'
+                  color='primary'
+                  className='w-full sm:w-fit'
+                >
+                  <Icon icon='ic:round-plus' width={24} height={24} />
+                  Tambah
+                </Button>
+              </RequirePermission>
             </div>
 
             <DebouncedTextInput

src/components/pages/master-data/warehouse/form/WarehouseForm.tsx

@@ -12,6 +12,7 @@ import TextInput from '@/components/input/TextInput';
 import SelectInput, { OptionType } from '@/components/input/SelectInput';
 import { useModal } from '@/components/Modal';
 import ConfirmationModal from '@/components/modal/ConfirmationModal';
+import RequirePermission from '@/components/helper/RequirePermission';
 
 import {
   WarehouseFormSchema,
@@ -435,36 +436,40 @@ const WarehouseForm = ({ type = 'add', initialValues }: WarehouseFormProps) => {
           <div className='flex flex-row justify-between gap-2 flex-wrap'>
             {type !== 'add' && (
               <div className='flex flex-row justify-start gap-2'>
-                <Button
-                  type='button'
-                  color='error'
-                  onClick={deleteWarehouseClickHandler}
-                  className='px-4'
-                >
-                  <Icon
-                    icon='material-symbols:delete-outline-rounded'
-                    width={24}
-                    height={24}
-                    className='justify-start text-sm'
-                  />
-                  Delete
-                </Button>
-
-                {type !== 'edit' && (
+                <RequirePermission permissions='lti.master.warehouses.delete'>
                   <Button
                     type='button'
-                    color='warning'
-                    href={`/master-data/warehouse/detail/edit/?warehouseId=${initialValues?.id}`}
+                    color='error'
+                    onClick={deleteWarehouseClickHandler}
                     className='px-4'
                   >
                     <Icon
-                      icon='material-symbols:edit-outline'
+                      icon='material-symbols:delete-outline-rounded'
                       width={24}
                       height={24}
                       className='justify-start text-sm'
                     />
-                    Edit
+                    Delete
                   </Button>
+                </RequirePermission>
+
+                {type !== 'edit' && (
+                  <RequirePermission permissions='lti.master.warehouses.update'>
+                    <Button
+                      type='button'
+                      color='warning'
+                      href={`/master-data/warehouse/detail/edit/?warehouseId=${initialValues?.id}`}
+                      className='px-4'
+                    >
+                      <Icon
+                        icon='material-symbols:edit-outline'
+                        width={24}
+                        height={24}
+                        className='justify-start text-sm'
+                      />
+                      Edit
+                    </Button>
+                  </RequirePermission>
                 )}
               </div>
             )}

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

@@ -25,6 +25,8 @@ import { ChangeEventHandler, useEffect, useMemo, useState } from 'react';
 import toast from 'react-hot-toast';
 import useSWR from 'swr';
 
+import RequirePermission from '@/components/helper/RequirePermission';
+
 const RowOptionsMenu = ({
   type = 'dropdown',
   props,
@@ -46,50 +48,58 @@ const RowOptionsMenu = ({
       )}
     >
       <div className='flex flex-col gap-1'>
-        <Button
-          href={`/production/project-flock/detail?projectFlockId=${props.row.original.id}`}
-          variant='ghost'
-          color='primary'
-          className='justify-start text-sm'
-        >
-          <Icon icon='mdi:eye-outline' width={16} height={16} />
-          Detail
-        </Button>
-        {props.row.original.approval.step_name === 'Aktif' && (
+        <RequirePermission permissions='lti.production.project_flocks.detail'>
           <Button
-            href={`/production/project-flock/chickin/add?projectFlockId=${props.row.original.id}`}
+            href={`/production/project-flock/detail?projectFlockId=${props.row.original.id}`}
             variant='ghost'
-            color='success'
+            color='primary'
             className='justify-start text-sm'
           >
-            <Icon icon='mdi:home-import-outline' width={16} height={16} />
-            Chickin
+            <Icon icon='mdi:eye-outline' width={16} height={16} />
+            Detail
           </Button>
+        </RequirePermission>
+        {props.row.original.approval.step_name === 'Aktif' && (
+          <RequirePermission permissions='lti.production.chickins.create'>
+            <Button
+              href={`/production/project-flock/chickin/add?projectFlockId=${props.row.original.id}`}
+              variant='ghost'
+              color='success'
+              className='justify-start text-sm'
+            >
+              <Icon icon='mdi:home-import-outline' width={16} height={16} />
+              Chickin
+            </Button>
+          </RequirePermission>
         )}
         {props.row.original.approval.step_name === 'Pengajuan' && (
-          <Button
-            href={`/production/project-flock/detail/edit?projectFlockId=${props.row.original.id}`}
-            variant='ghost'
-            color='warning'
-            className='justify-start text-sm'
-          >
-            <Icon icon='mdi:pencil-outline' width={16} height={16} />
-            Edit
-          </Button>
+          <RequirePermission permissions='lti.production.project_flocks.update'>
+            <Button
+              href={`/production/project-flock/detail/edit?projectFlockId=${props.row.original.id}`}
+              variant='ghost'
+              color='warning'
+              className='justify-start text-sm'
+            >
+              <Icon icon='mdi:pencil-outline' width={16} height={16} />
+              Edit
+            </Button>
+          </RequirePermission>
         )}
-        <Button
-          onClick={deleteClickHandler}
-          variant='ghost'
-          color='error'
-          className='text-error hover:text-inherit justify-start text-sm'
-        >
-          <Icon
-            icon='material-symbols:delete-outline-rounded'
-            width={16}
-            height={16}
-          />
-          Delete
-        </Button>
+        <RequirePermission permissions='lti.production.project_flocks.delete'>
+          <Button
+            onClick={deleteClickHandler}
+            variant='ghost'
+            color='error'
+            className='text-error hover:text-inherit justify-start text-sm'
+          >
+            <Icon
+              icon='material-symbols:delete-outline-rounded'
+              width={16}
+              height={16}
+            />
+            Delete
+          </Button>
+        </RequirePermission>
       </div>
     </div>
   );
@@ -287,14 +297,16 @@ const ProjectFlockTable = ({ refresh }: { refresh?: () => void }) => {
         <div className='flex flex-col gap-2 mb-4'>
           <div className='w-full flex flex-col justify-between items-end gap-2'>
             <div className='flex flex-col sm:flex-row gap-3 w-full'>
-              <Button
-                color='primary'
-                className='w-full sm:w-fit'
-                href='/production/project-flock/add'
-              >
-                <Icon icon='ic:round-plus' width={24} height={24} />
-                Tambah
-              </Button>
+              <RequirePermission permissions='lti.production.project_flocks.create'>
+                <Button
+                  color='primary'
+                  className='w-full sm:w-fit'
+                  href='/production/project-flock/add'
+                >
+                  <Icon icon='ic:round-plus' width={24} height={24} />
+                  Tambah
+                </Button>
+              </RequirePermission>
               {/* <Button
                 variant='outline'
                 color='success'
@@ -630,6 +642,7 @@ const ProjectFlockTable = ({ refresh }: { refresh?: () => void }) => {
               );
               setRowSelection({});
             },
+            permissions: 'lti.production.project_flocks.detail',
           },
           {
             action: 'DELETE',
@@ -639,6 +652,7 @@ const ProjectFlockTable = ({ refresh }: { refresh?: () => void }) => {
             onClick: () => {
               deleteModal.openModal();
             },
+            permissions: 'lti.production.project_flocks.delete',
           },
         ]}
         approvals={[
@@ -651,6 +665,7 @@ const ProjectFlockTable = ({ refresh }: { refresh?: () => void }) => {
               confirmModal.openModal();
             },
             disabled: !canApprove,
+            permissions: 'lti.production.project_flocks.approve',
           },
           {
             icon: 'mdi:times',
@@ -660,6 +675,7 @@ const ProjectFlockTable = ({ refresh }: { refresh?: () => void }) => {
               setApprovalAction('REJECTED');
               confirmModal.openModal();
             },
+            permissions: 'lti.production.project_flocks.approve',
           },
         ]}
         selectedRowIds={selectedRowIds}

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

@@ -22,6 +22,7 @@ import { useEffect, useState } from 'react';
 import useSWR from 'swr';
 import { FormHeader } from '@/components/helper/form/FormHeader';
 import Link from 'next/link';
+import RequirePermission from '@/components/helper/RequirePermission';
 
 const ProjectFlockChickinDetail = ({
   projectFlockId,
@@ -484,21 +485,23 @@ const ProjectFlockChickinDetail = ({
                             {kandang.kandang.name}
                           </span>
                         </div>
-                        <Button
-                          variant='outline'
-                          className='py-1 text-sm'
-                          onClick={() => {
-                            handleChickinClick(kandang);
-                          }}
-                          disabled={projectFlock?.approval?.step_number === 1}
-                        >
-                          Chick In{' '}
-                          <Icon
-                            icon='mdi:arrow-top-right-thin'
-                            width={11}
-                            height={11}
-                          />
-                        </Button>
+                        <RequirePermission permissions='lti.production.chickins.create'>
+                          <Button
+                            variant='outline'
+                            className='py-1 text-sm'
+                            onClick={() => {
+                              handleChickinClick(kandang);
+                            }}
+                            disabled={projectFlock?.approval?.step_number === 1}
+                          >
+                            Chick In{' '}
+                            <Icon
+                              icon='mdi:arrow-top-right-thin'
+                              width={11}
+                              height={11}
+                            />
+                          </Button>
+                        </RequirePermission>
                       </div>
                     ))}
                 </div>

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

@@ -29,6 +29,7 @@ import {
 } from '@/config/approval-line';
 import useSWR from 'swr';
 import { ProjectFlockKandangApi } from '@/services/api/production';
+import RequirePermission from '@/components/helper/RequirePermission';
 
 const ProjectFlockDetail = ({
   projectFlock,
@@ -110,27 +111,31 @@ const ProjectFlockDetail = ({
           leftIconHref='/production/project-flock'
           subtitle={`Created On ${formatDate(projectFlock.created_at, 'MMM DD, YYYY')}`}
         >
-          <Link
-            href={`/production/project-flock/detail/edit?projectFlockId=${projectFlock.id}`}
-            className='p-0'
-          >
-            <Tooltip content='Edit' position='bottom'>
-              <Button variant='link' className='p-0 text-neutral'>
-                <Icon icon='mdi:square-edit-outline' width={20} height={20} />
-              </Button>
-            </Tooltip>
-          </Link>
-          <Button
-            variant='link'
-            className='p-0 text-error'
-            onClick={() => {
-              deleteModal.openModal();
-            }}
-          >
-            <Tooltip content='Hapus' position='bottom'>
-              <Icon icon='mdi:trash-can-outline' width={20} height={20} />
-            </Tooltip>
-          </Button>
+          <RequirePermission permissions='lti.production.project_flocks.update'>
+            <Link
+              href={`/production/project-flock/detail/edit?projectFlockId=${projectFlock.id}`}
+              className='p-0'
+            >
+              <Tooltip content='Edit' position='bottom'>
+                <Button variant='link' className='p-0 text-neutral'>
+                  <Icon icon='mdi:square-edit-outline' width={20} height={20} />
+                </Button>
+              </Tooltip>
+            </Link>
+          </RequirePermission>
+          <RequirePermission permissions='lti.production.project_flocks.delete'>
+            <Button
+              variant='link'
+              className='p-0 text-error'
+              onClick={() => {
+                deleteModal.openModal();
+              }}
+            >
+              <Tooltip content='Hapus' position='bottom'>
+                <Icon icon='mdi:trash-can-outline' width={20} height={20} />
+              </Tooltip>
+            </Button>
+          </RequirePermission>
         </DrawerHeader>
 
         {/* Informasi Umum */}
@@ -418,38 +423,42 @@ const ProjectFlockDetail = ({
               </RadioGroup>
             </Card>
             <div className='grid grid-cols-4 gap-3'>
-              <Link
-                href={`/production/project-flock/chickin/add/kandang?projectFlockKandangId=${selectedKandang?.project_flock_kandang_id}&projectFlockId=${projectFlock.id}`}
-                className='m-0 p-0'
-              >
-                <Button
-                  className='w-full px-2 py-1 text-sm'
-                  variant='outline'
-                  color='success'
-                  disabled={
-                    !selectedKandangId ||
-                    projectFlock?.approval?.step_number == 1
-                  }
+              <RequirePermission permissions='lti.production.chickins.create'>
+                <Link
+                  href={`/production/project-flock/chickin/add/kandang?projectFlockKandangId=${selectedKandang?.project_flock_kandang_id}&projectFlockId=${projectFlock.id}`}
+                  className='m-0 p-0'
                 >
-                  Chickin <Icon icon='mdi:checkbox-marked-outline' />
-                </Button>
-              </Link>
-              <Link
-                href={`/production/project-flock/closing?projectFlockId=${projectFlock.id}&projectFlockKandangId=${selectedKandang?.project_flock_kandang_id}`}
-                className='m-0 p-0'
-              >
-                <Button
-                  className='w-full px-2 py-1 text-sm'
-                  variant='outline'
-                  color='error'
-                  disabled={
-                    !selectedKandangId ||
-                    projectFlock?.approval?.step_number == 1
-                  }
+                  <Button
+                    className='w-full px-2 py-1 text-sm'
+                    variant='outline'
+                    color='success'
+                    disabled={
+                      !selectedKandangId ||
+                      projectFlock?.approval?.step_number == 1
+                    }
+                  >
+                    Chickin <Icon icon='mdi:checkbox-marked-outline' />
+                  </Button>
+                </Link>
+              </RequirePermission>
+              <RequirePermission permissions='lti.production.project_flock_kandangs.closing'>
+                <Link
+                  href={`/production/project-flock/closing?projectFlockId=${projectFlock.id}&projectFlockKandangId=${selectedKandang?.project_flock_kandang_id}`}
+                  className='m-0 p-0'
                 >
-                  Close <Icon icon='mdi:checkbox-marked-circle-outline' />
-                </Button>
-              </Link>
+                  <Button
+                    className='w-full px-2 py-1 text-sm'
+                    variant='outline'
+                    color='error'
+                    disabled={
+                      !selectedKandangId ||
+                      projectFlock?.approval?.step_number == 1
+                    }
+                  >
+                    Close <Icon icon='mdi:checkbox-marked-circle-outline' />
+                  </Button>
+                </Link>
+              </RequirePermission>
             </div>
           </div>
         </div>

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

@@ -47,6 +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 RequirePermission from '@/components/helper/RequirePermission';
 import DrawerHeader from '@/components/helper/drawer/DrawerHeader';
 
 interface ProjectFlockFormProps {
@@ -734,36 +735,40 @@ const ProjectFlockForm = ({
         )}
         {formType == 'detail' && (
           <div className='w-full flex flex-col sm:flex-row gap-2 py-4'>
-            <Button
-              variant='outline'
-              color='success'
-              onClick={() => {
-                if (initialValues?.id) {
-                  setApprovalAction('APPROVED');
-                  confirmModal.openModal();
-                }
-              }}
-              disabled={!initialValues?.id || isApprovedDisabled}
-              className='w-full sm:w-fit'
-            >
-              <Icon icon='material-symbols:check' width={24} height={24} />
-              Approve
-            </Button>
-            <Button
-              variant='outline'
-              color='error'
-              onClick={() => {
-                if (initialValues?.id) {
-                  setApprovalAction('REJECTED');
-                  confirmModal.openModal();
-                }
-              }}
-              disabled={!initialValues?.id || isRejectedDisabled}
-              className='w-full sm:w-fit'
-            >
-              <Icon icon='mdi:times' width={24} height={24} />
-              Reject
-            </Button>
+            <RequirePermission permissions='lti.production.project_flocks.approve'>
+              <Button
+                variant='outline'
+                color='success'
+                onClick={() => {
+                  if (initialValues?.id) {
+                    setApprovalAction('APPROVED');
+                    confirmModal.openModal();
+                  }
+                }}
+                disabled={!initialValues?.id || isApprovedDisabled}
+                className='w-full sm:w-fit'
+              >
+                <Icon icon='material-symbols:check' width={24} height={24} />
+                Approve
+              </Button>
+            </RequirePermission>
+            <RequirePermission permissions='lti.production.project_flocks.approve'>
+              <Button
+                variant='outline'
+                color='error'
+                onClick={() => {
+                  if (initialValues?.id) {
+                    setApprovalAction('REJECTED');
+                    confirmModal.openModal();
+                  }
+                }}
+                disabled={!initialValues?.id || isRejectedDisabled}
+                className='w-full sm:w-fit'
+              >
+                <Icon icon='mdi:times' width={24} height={24} />
+                Reject
+              </Button>
+            </RequirePermission>
           </div>
         )}
         <form
@@ -1127,16 +1132,24 @@ const ProjectFlockForm = ({
               </div>
             </div> */}
             {formType !== 'detail' && (
-              <Button
-                type='submit'
-                color='primary'
-                isLoading={formik.isSubmitting}
-                disabled={!formik.isValid || formik.isSubmitting}
-                className='px-4 w-full'
+              <RequirePermission
+                permissions={
+                  formType == 'add'
+                    ? 'lti.production.project_flocks.create'
+                    : 'lti.production.project_flocks.update'
+                }
               >
-                <Icon icon='mdi:plus' width={24} height={24} />
-                {formType == 'add' ? 'Add Flock' : 'Update Flock'}
-              </Button>
+                <Button
+                  type='submit'
+                  color='primary'
+                  isLoading={formik.isSubmitting}
+                  disabled={!formik.isValid || formik.isSubmitting}
+                  className='px-4 w-full'
+                >
+                  <Icon icon='mdi:plus' width={24} height={24} />
+                  {formType == 'add' ? 'Add Flock' : 'Update Flock'}
+                </Button>
+              </RequirePermission>
             )}
           </div>
         </form>

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

@@ -6,6 +6,7 @@ import useSWR from 'swr';
 import { Icon } from '@iconify/react';
 import { SortingState, CellContext } from '@tanstack/react-table';
 import { cn, formatDate } from '@/lib/helper';
+import RequirePermission from '@/components/helper/RequirePermission';
 import { useModal } from '@/components/Modal';
 import Modal from '@/components/Modal';
 import Button from '@/components/Button';
@@ -59,60 +60,70 @@ const RowOptionsMenu = ({
 
   return (
     <RowOptionsMenuWrapper type={type}>
-      <Button
-        href={`/production/recording/detail/?recordingId=${props.row.original.id}`}
-        variant='ghost'
-        color='primary'
-        className='justify-start text-sm'
-      >
-        <Icon icon='mdi:eye-outline' width={16} height={16} />
-        Detail
-      </Button>
-      <Button
-        href={`/production/recording/detail/edit/?recordingId=${props.row.original.id}`}
-        variant='ghost'
-        color='warning'
-        className='justify-start text-sm'
-      >
-        <Icon icon='mdi:pencil-outline' width={16} height={16} />
-        Edit
-      </Button>
-      {!isApproved && !isRejected && (
+      <RequirePermission permissions='lti.production.recording.detail'>
         <Button
-          onClick={approveClickHandler}
+          href={`/production/recording/detail/?recordingId=${props.row.original.id}`}
           variant='ghost'
-          color='success'
+          color='primary'
           className='justify-start text-sm'
         >
-          <Icon icon='material-symbols:check' width={16} height={16} />
-          Approve
+          <Icon icon='mdi:eye-outline' width={16} height={16} />
+          Detail
         </Button>
+      </RequirePermission>
+      <RequirePermission permissions='lti.production.recording.update'>
+        <Button
+          href={`/production/recording/detail/edit/?recordingId=${props.row.original.id}`}
+          variant='ghost'
+          color='warning'
+          className='justify-start text-sm'
+        >
+          <Icon icon='mdi:pencil-outline' width={16} height={16} />
+          Edit
+        </Button>
+      </RequirePermission>
+      {!isApproved && !isRejected && (
+        <RequirePermission permissions='lti.production.recording.approve'>
+          <Button
+            onClick={approveClickHandler}
+            variant='ghost'
+            color='success'
+            className='justify-start text-sm'
+          >
+            <Icon icon='material-symbols:check' width={16} height={16} />
+            Approve
+          </Button>
+        </RequirePermission>
       )}
       {!isApproved && !isRejected && (
+        <RequirePermission permissions='lti.production.recording.approve'>
+          <Button
+            onClick={rejectClickHandler}
+            variant='ghost'
+            color='error'
+            className='justify-start text-sm'
+          >
+            <Icon icon='material-symbols:close' width={16} height={16} />
+            Reject
+          </Button>
+        </RequirePermission>
+      )}
+      <RequirePermission permissions='lti.production.recording.delete'>
         <Button
-          onClick={rejectClickHandler}
+          onClick={deleteClickHandler}
           variant='ghost'
           color='error'
-          className='justify-start text-sm'
+          className='justify-start text-sm text-error focus-visible:text-error-content hover:text-error-content'
         >
-          <Icon icon='material-symbols:close' width={16} height={16} />
-          Reject
+          <Icon
+            icon='mdi:delete-outline'
+            width={16}
+            height={16}
+            className='justify-start text-sm'
+          />
+          Delete
         </Button>
-      )}
-      <Button
-        onClick={deleteClickHandler}
-        variant='ghost'
-        color='error'
-        className='justify-start text-sm text-error focus-visible:text-error-content hover:text-error-content'
-      >
-        <Icon
-          icon='mdi:delete-outline'
-          width={16}
-          height={16}
-          className='justify-start text-sm'
-        />
-        Delete
-      </Button>
+      </RequirePermission>
     </RowOptionsMenuWrapper>
   );
 };
@@ -514,49 +525,63 @@ const RecordingTable = () => {
       <div className='flex flex-col gap-2 mb-4'>
         <div className='w-full flex flex-col xl:flex-row justify-between items-end xl:items-center gap-2'>
           <div className='w-full sm:w-fit flex flex-col sm:flex-row self-start gap-2'>
-            <Button
-              href='/production/recording/add'
-              variant='outline'
-              color='primary'
-              className='w-full sm:w-fit'
-            >
-              <Icon icon='ic:round-plus' width={24} height={24} />
-              Tambah
-            </Button>
+            <RequirePermission permissions='lti.production.recording.create'>
+              <Button
+                href='/production/recording/add'
+                variant='outline'
+                color='primary'
+                className='w-full sm:w-fit'
+              >
+                <Icon icon='ic:round-plus' width={24} height={24} />
+                Tambah
+              </Button>
+            </RequirePermission>
 
             {selectedRowIds.length > 0 && (
               <>
-                <Button
-                  variant='outline'
-                  color='success'
-                  onClick={() => {
-                    setApprovalNotes('');
-                    approveModal.openModal();
-                  }}
-                  disabled={
-                    selectedRowIds.length === 0 || eligibleRowIds.length === 0
-                  }
-                  className='w-full sm:w-fit'
-                >
-                  <Icon icon='material-symbols:check' width={24} height={24} />
-                  Approve
-                </Button>
+                <RequirePermission permissions='lti.production.recording.approve'>
+                  <Button
+                    variant='outline'
+                    color='success'
+                    onClick={() => {
+                      setApprovalNotes('');
+                      approveModal.openModal();
+                    }}
+                    disabled={
+                      selectedRowIds.length === 0 || eligibleRowIds.length === 0
+                    }
+                    className='w-full sm:w-fit'
+                  >
+                    <Icon
+                      icon='material-symbols:check'
+                      width={24}
+                      height={24}
+                    />
+                    Approve
+                  </Button>
+                </RequirePermission>
 
-                <Button
-                  variant='outline'
-                  color='error'
-                  onClick={() => {
-                    setApprovalNotes('');
-                    rejectModal.openModal();
-                  }}
-                  disabled={
-                    selectedRowIds.length === 0 || eligibleRowIds.length === 0
-                  }
-                  className='w-full sm:w-fit'
-                >
-                  <Icon icon='material-symbols:close' width={24} height={24} />
-                  Reject
-                </Button>
+                <RequirePermission permissions='lti.production.recording.approve'>
+                  <Button
+                    variant='outline'
+                    color='error'
+                    onClick={() => {
+                      setApprovalNotes('');
+                      rejectModal.openModal();
+                    }}
+                    disabled={
+                      selectedRowIds.length === 0 || eligibleRowIds.length === 0
+                    }
+                    className='w-full sm:w-fit'
+                  >
+                    <Icon
+                      icon='material-symbols:close'
+                      width={24}
+                      height={24}
+                    />
+                    Reject
+                  </Button>
+                </RequirePermission>
               </>
             )}
           </div>

src/components/pages/production/recording/form/RecordingForm.tsx

@@ -8,6 +8,7 @@ import useSWR from 'swr';
 
 import { Icon } from '@iconify/react';
 import Button from '@/components/Button';
+import RequirePermission from '@/components/helper/RequirePermission';
 import Card from '@/components/Card';
 import Badge from '@/components/Badge';
 import NumberInput from '@/components/input/NumberInput';
@@ -1492,41 +1493,45 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
               !isRecordingApproved(initialValues) &&
               !isRecordingRejected(initialValues) && (
                 <div className='flex flex-row gap-2'>
-                  <Button
-                    variant='outline'
-                    color='success'
-                    onClick={() => {
-                      setApprovalNotes('');
-                      approveModal.openModal();
-                    }}
-                    isLoading={isApproveLoading}
-                    className='w-full sm:w-fit'
-                  >
-                    <Icon
-                      icon='material-symbols:check'
-                      width={24}
-                      height={24}
-                    />
-                    Approve
-                  </Button>
+                  <RequirePermission permissions='lti.production.recording.approve'>
+                    <Button
+                      variant='outline'
+                      color='success'
+                      onClick={() => {
+                        setApprovalNotes('');
+                        approveModal.openModal();
+                      }}
+                      isLoading={isApproveLoading}
+                      className='w-full sm:w-fit'
+                    >
+                      <Icon
+                        icon='material-symbols:check'
+                        width={24}
+                        height={24}
+                      />
+                      Approve
+                    </Button>
+                  </RequirePermission>
 
-                  <Button
-                    variant='outline'
-                    color='error'
-                    onClick={() => {
-                      setApprovalNotes('');
-                      rejectModal.openModal();
-                    }}
-                    isLoading={isRejectLoading}
-                    className='w-full sm:w-fit'
-                  >
-                    <Icon
-                      icon='material-symbols:close'
-                      width={24}
-                      height={24}
-                    />
-                    Reject
-                  </Button>
+                  <RequirePermission permissions='lti.production.recording.approve'>
+                    <Button
+                      variant='outline'
+                      color='error'
+                      onClick={() => {
+                        setApprovalNotes('');
+                        rejectModal.openModal();
+                      }}
+                      isLoading={isRejectLoading}
+                      className='w-full sm:w-fit'
+                    >
+                      <Icon
+                        icon='material-symbols:close'
+                        width={24}
+                        height={24}
+                      />
+                      Reject
+                    </Button>
+                  </RequirePermission>
                 </div>
               )}
           </div>
@@ -2696,36 +2701,40 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
             {/* Left side - Detail & Edit actions */}
             <div className='flex flex-col sm:flex-row justify-start gap-2 w-full sm:w-auto'>
               {type === 'detail' && deleteRecordingClickHandler && (
-                <Button
-                  type='button'
-                  color='error'
-                  onClick={deleteRecordingClickHandler}
-                  className='px-4'
-                >
-                  <Icon
-                    icon='material-symbols:delete-outline-rounded'
-                    width={24}
-                    height={24}
-                    className='justify-start text-sm'
-                  />
-                  Delete
-                </Button>
+                <RequirePermission permissions='lti.production.recording.delete'>
+                  <Button
+                    type='button'
+                    color='error'
+                    onClick={deleteRecordingClickHandler}
+                    className='px-4'
+                  >
+                    <Icon
+                      icon='material-symbols:delete-outline-rounded'
+                      width={24}
+                      height={24}
+                      className='justify-start text-sm'
+                    />
+                    Delete
+                  </Button>
+                </RequirePermission>
               )}
               {type === 'detail' && initialValues && (
-                <Button
-                  type='button'
-                  color='warning'
-                  href={`/production/recording/detail/edit/?recordingId=${initialValues.id}`}
-                  className='px-4'
-                >
-                  <Icon
-                    icon='material-symbols:edit-outline'
-                    width={24}
-                    height={24}
-                    className='justify-start text-sm'
-                  />
-                  Edit
-                </Button>
+                <RequirePermission permissions='lti.production.recording.update'>
+                  <Button
+                    type='button'
+                    color='warning'
+                    href={`/production/recording/detail/edit/?recordingId=${initialValues.id}`}
+                    className='px-4'
+                  >
+                    <Icon
+                      icon='material-symbols:edit-outline'
+                      width={24}
+                      height={24}
+                      className='justify-start text-sm'
+                    />
+                    Edit
+                  </Button>
+                </RequirePermission>
               )}
             </div>
             {/* Right side actions */}

src/components/pages/production/transfer-to-laying/TransferToLayingsTable.tsx

@@ -26,6 +26,7 @@ import TextInput from '@/components/input/TextInput';
 import CheckboxInput from '@/components/input/CheckboxInput';
 import RowOptionsMenuWrapper from '@/components/table/RowOptionsMenuWrapper';
 import ConfirmationModalWithNotes from '@/components/modal/ConfirmationModalWithNotes';
+import RequirePermission from '@/components/helper/RequirePermission';
 
 import { TransferToLaying } from '@/types/api/production/transfer-to-laying';
 import { TransferToLayingApi } from '@/services/api/production/transfer-to-laying';
@@ -56,72 +57,81 @@ const RowOptionsMenu = ({
 
   const showDeleteButton = showEditButton;
 
-  // TODO: apply RBAC
   const showApproveButton = showEditButton;
   const showRejectButton = showEditButton;
 
   return (
     <RowOptionsMenuWrapper type={type}>
-      <Button
-        href={`/production/transfer-to-laying/detail/?transferToLayingId=${props.row.original.id}`}
-        variant='ghost'
-        color='primary'
-        className='justify-start text-sm'
-      >
-        <Icon icon='mdi:eye-outline' width={16} height={16} />
-        Detail
-      </Button>
-
-      {showEditButton && (
+      <RequirePermission permissions='lti.production.transfer_to_laying.detail'>
         <Button
-          href={`/production/transfer-to-laying/detail/edit/?transferToLayingId=${props.row.original.id}`}
+          href={`/production/transfer-to-laying/detail/?transferToLayingId=${props.row.original.id}`}
           variant='ghost'
-          color='warning'
+          color='primary'
           className='justify-start text-sm'
         >
-          <Icon icon='material-symbols:edit-outline' width={16} height={16} />
-          Edit
+          <Icon icon='mdi:eye-outline' width={16} height={16} />
+          Detail
         </Button>
+      </RequirePermission>
+
+      {showEditButton && (
+        <RequirePermission permissions='lti.production.transfer_to_laying.update'>
+          <Button
+            href={`/production/transfer-to-laying/detail/edit/?transferToLayingId=${props.row.original.id}`}
+            variant='ghost'
+            color='warning'
+            className='justify-start text-sm'
+          >
+            <Icon icon='material-symbols:edit-outline' width={16} height={16} />
+            Edit
+          </Button>
+        </RequirePermission>
       )}
 
       {/* TODO: apply RBAC */}
       {showApproveButton && (
-        <Button
-          variant='ghost'
-          color='success'
-          onClick={approveClickHandler}
-          className='justify-start text-sm'
-        >
-          <Icon icon='material-symbols:check' width={24} height={24} />
-          Approve
-        </Button>
+        <RequirePermission permissions='lti.production.transfer_to_laying.approve'>
+          <Button
+            variant='ghost'
+            color='success'
+            onClick={approveClickHandler}
+            className='justify-start text-sm'
+          >
+            <Icon icon='material-symbols:check' width={24} height={24} />
+            Approve
+          </Button>
+        </RequirePermission>
       )}
       {showRejectButton && (
-        <Button
-          variant='ghost'
-          color='error'
-          onClick={rejectClickHandler}
-          className='justify-start text-sm'
-        >
-          <Icon icon='material-symbols:close' width={24} height={24} />
-          Reject
-        </Button>
+        <RequirePermission permissions='lti.production.transfer_to_laying.approve'>
+          <Button
+            variant='ghost'
+            color='error'
+            onClick={rejectClickHandler}
+            className='justify-start text-sm'
+          >
+            <Icon icon='material-symbols:close' width={24} height={24} />
+            Reject
+          </Button>
+        </RequirePermission>
       )}
       {showDeleteButton && (
-        <Button
-          onClick={deleteClickHandler}
-          variant='ghost'
-          color='error'
-          className='justify-start text-sm text-error focus-visible:text-error-content hover:text-error-content'
-        >
-          <Icon
-            icon='material-symbols:delete-outline-rounded'
-            width={16}
-            height={16}
-            className='justify-start text-sm'
-          />
-          Delete
-        </Button>
+        <RequirePermission permissions='lti.production.transfer_to_laying.delete'>
+          <Button
+            onClick={deleteClickHandler}
+            variant='ghost'
+            color='error'
+            className='justify-start text-sm text-error focus-visible:text-error-content hover:text-error-content'
+          >
+            <Icon
+              icon='material-symbols:delete-outline-rounded'
+              width={16}
+              height={16}
+              className='justify-start text-sm'
+            />
+            Delete
+          </Button>
+        </RequirePermission>
       )}
     </RowOptionsMenuWrapper>
   );
@@ -502,47 +512,53 @@ const TransferToLayingsTable = () => {
         <div className='flex flex-col gap-2 mb-4'>
           <div className='w-full flex flex-col xl:flex-row justify-between items-end xl:items-center gap-2'>
             <div className='w-full sm:w-fit flex flex-col sm:flex-row self-start gap-2'>
-              <Button
-                href='/production/transfer-to-laying/add'
-                variant='outline'
-                color='primary'
-                className='w-full sm:w-fit'
-              >
-                <Icon icon='ic:round-plus' width={24} height={24} />
-                Tambah
-              </Button>
+              <RequirePermission permissions='lti.production.transfer_to_laying.create'>
+                <Button
+                  href='/production/transfer-to-laying/add'
+                  variant='outline'
+                  color='primary'
+                  className='w-full sm:w-fit'
+                >
+                  <Icon icon='ic:round-plus' width={24} height={24} />
+                  Tambah
+                </Button>
+              </RequirePermission>
 
               {selectedRowIds.length > 0 && (
                 <>
-                  <Button
-                    variant='outline'
-                    color='success'
-                    onClick={bulkApproveClickHandler}
-                    disabled={selectedRowIds.length === 0}
-                    className='w-full sm:w-fit'
-                  >
-                    <Icon
-                      icon='material-symbols:check'
-                      width={24}
-                      height={24}
-                    />
-                    Approve
-                  </Button>
+                  <RequirePermission permissions='lti.production.transfer_to_laying.approve'>
+                    <Button
+                      variant='outline'
+                      color='success'
+                      onClick={bulkApproveClickHandler}
+                      disabled={selectedRowIds.length === 0}
+                      className='w-full sm:w-fit'
+                    >
+                      <Icon
+                        icon='material-symbols:check'
+                        width={24}
+                        height={24}
+                      />
+                      Approve
+                    </Button>
+                  </RequirePermission>
 
-                  <Button
-                    variant='outline'
-                    color='error'
-                    onClick={bulkRejectClickHandler}
-                    disabled={selectedRowIds.length === 0}
-                    className='w-full sm:w-fit'
-                  >
-                    <Icon
-                      icon='material-symbols:close'
-                      width={24}
-                      height={24}
-                    />
-                    Reject
-                  </Button>
+                  <RequirePermission permissions='lti.production.transfer_to_laying.approve'>
+                    <Button
+                      variant='outline'
+                      color='error'
+                      onClick={bulkRejectClickHandler}
+                      disabled={selectedRowIds.length === 0}
+                      className='w-full sm:w-fit'
+                    >
+                      <Icon
+                        icon='material-symbols:close'
+                        width={24}
+                        height={24}
+                      />
+                      Reject
+                    </Button>
+                  </RequirePermission>
                 </>
               )}
             </div>

src/components/pages/production/transfer-to-laying/form/TransferToLayingForm.tsx

@@ -8,6 +8,7 @@ import useSWR from 'swr';
 
 import { Icon } from '@iconify/react';
 import Button from '@/components/Button';
+import RequirePermission from '@/components/helper/RequirePermission';
 import SelectInput, {
   OptionType,
   useSelect,
@@ -500,34 +501,37 @@ const TransferToLayingForm = ({
             <>
               {isShowApproveRejectButton && (
                 <div className='w-full flex flex-row justify-end gap-2'>
-                  {/* TODO: apply RBAC */}
-                  <Button
-                    variant='outline'
-                    color='success'
-                    onClick={approveClickHandler}
-                    className='w-full sm:w-fit'
-                  >
-                    <Icon
-                      icon='material-symbols:check'
-                      width={24}
-                      height={24}
-                    />
-                    Approve
-                  </Button>
+                  <RequirePermission permissions='lti.production.transfer_to_laying.approve'>
+                    <Button
+                      variant='outline'
+                      color='success'
+                      onClick={approveClickHandler}
+                      className='w-full sm:w-fit'
+                    >
+                      <Icon
+                        icon='material-symbols:check'
+                        width={24}
+                        height={24}
+                      />
+                      Approve
+                    </Button>
+                  </RequirePermission>
 
-                  <Button
-                    variant='outline'
-                    color='error'
-                    onClick={rejectClickHandler}
-                    className='w-full sm:w-fit'
-                  >
-                    <Icon
-                      icon='material-symbols:close'
-                      width={24}
-                      height={24}
-                    />
-                    Reject
-                  </Button>
+                  <RequirePermission permissions='lti.production.transfer_to_laying.approve'>
+                    <Button
+                      variant='outline'
+                      color='error'
+                      onClick={rejectClickHandler}
+                      className='w-full sm:w-fit'
+                    >
+                      <Icon
+                        icon='material-symbols:close'
+                        width={24}
+                        height={24}
+                      />
+                      Reject
+                    </Button>
+                  </RequirePermission>
                 </div>
               )}
             </>
@@ -788,37 +792,41 @@ const TransferToLayingForm = ({
             {type !== 'add' && (
               <div className='flex flex-row justify-start gap-2'>
                 {isShowDeleteButton && (
-                  <Button
-                    type='button'
-                    color='error'
-                    onClick={deleteTransferToLayingClickHandler}
-                    className='px-4'
-                  >
-                    <Icon
-                      icon='material-symbols:delete-outline-rounded'
-                      width={24}
-                      height={24}
-                      className='justify-start text-sm'
-                    />
-                    Delete
-                  </Button>
+                  <RequirePermission permissions='lti.production.transfer_to_laying.delete'>
+                    <Button
+                      type='button'
+                      color='error'
+                      onClick={deleteTransferToLayingClickHandler}
+                      className='px-4'
+                    >
+                      <Icon
+                        icon='material-symbols:delete-outline-rounded'
+                        width={24}
+                        height={24}
+                        className='justify-start text-sm'
+                      />
+                      Delete
+                    </Button>
+                  </RequirePermission>
                 )}
 
                 {type !== 'edit' && isShowEditButton && (
-                  <Button
-                    type='button'
-                    color='warning'
-                    href={`/production/transfer-to-laying/detail/edit/?transferToLayingId=${initialValues?.id}`}
-                    className='px-4'
-                  >
-                    <Icon
-                      icon='material-symbols:edit-outline'
-                      width={24}
-                      height={24}
-                      className='justify-start text-sm'
-                    />
-                    Edit
-                  </Button>
+                  <RequirePermission permissions='lti.production.transfer_to_laying.update'>
+                    <Button
+                      type='button'
+                      color='warning'
+                      href={`/production/transfer-to-laying/detail/edit/?transferToLayingId=${initialValues?.id}`}
+                      className='px-4'
+                    >
+                      <Icon
+                        icon='material-symbols:edit-outline'
+                        width={24}
+                        height={24}
+                        className='justify-start text-sm'
+                      />
+                      Edit
+                    </Button>
+                  </RequirePermission>
                 )}
               </div>
             )}
@@ -833,15 +841,23 @@ const TransferToLayingForm = ({
                   Reset
                 </Button>
 
-                <Button
-                  type='submit'
-                  color='primary'
-                  isLoading={formik.isSubmitting}
-                  disabled={!formik.isValid || formik.isSubmitting}
-                  className='px-4'
+                <RequirePermission
+                  permissions={
+                    type === 'add'
+                      ? 'lti.production.transfer_to_laying.create'
+                      : 'lti.production.transfer_to_laying.update'
+                  }
                 >
-                  Submit
-                </Button>
+                  <Button
+                    type='submit'
+                    color='primary'
+                    isLoading={formik.isSubmitting}
+                    disabled={!formik.isValid || formik.isSubmitting}
+                    className='px-4'
+                  >
+                    Submit
+                  </Button>
+                </RequirePermission>
               </div>
             )}
           </div>

src/components/pages/purchase/PurchaseTable.tsx

@@ -15,6 +15,7 @@ import SelectInput, { OptionType } from '@/components/input/SelectInput';
 import RowDropdownOptions from '@/components/table/RowDropdownOptions';
 import RowCollapseOptions from '@/components/table/RowCollapseOptions';
 import RowOptionsMenuWrapper from '@/components/table/RowOptionsMenuWrapper';
+import RequirePermission from '@/components/helper/RequirePermission';
 
 import { cn, formatDate } from '@/lib/helper';
 import { isResponseSuccess } from '@/lib/api-helper';
@@ -38,15 +39,17 @@ const RowOptionsMenu = ({
 }: RowOptionsMenuProps) => {
   return (
     <RowOptionsMenuWrapper type={type}>
-      <Button
-        href={`/purchase/detail/?purchaseId=${props.row.original.id}`}
-        variant='ghost'
-        color='primary'
-        className='justify-start text-sm'
-      >
-        <Icon icon='mdi:eye-outline' width={16} height={16} />
-        Detail
-      </Button>
+      <RequirePermission permissions='lti.purchase.detail'>
+        <Button
+          href={`/purchase/detail/?purchaseId=${props.row.original.id}`}
+          variant='ghost'
+          color='primary'
+          className='justify-start text-sm'
+        >
+          <Icon icon='mdi:eye-outline' width={16} height={16} />
+          Detail
+        </Button>
+      </RequirePermission>
 
       {/*<Button*/}
       {/*  href={`/purchase/detail/edit/?purchaseId=${props.row.original.id}`}*/}
@@ -58,20 +61,22 @@ const RowOptionsMenu = ({
       {/*  Edit*/}
       {/*</Button>*/}
 
-      <Button
-        onClick={deleteClickHandler}
-        variant='ghost'
-        color='error'
-        className='justify-start text-sm text-error focus-visible:text-error-content hover:text-error-content'
-      >
-        <Icon
-          icon='material-symbols:delete-outline-rounded'
-          width={16}
-          height={16}
-          className='justify-start text-sm'
-        />
-        Delete
-      </Button>
+      <RequirePermission permissions='lti.purchase.delete'>
+        <Button
+          onClick={deleteClickHandler}
+          variant='ghost'
+          color='error'
+          className='justify-start text-sm text-error focus-visible:text-error-content hover:text-error-content'
+        >
+          <Icon
+            icon='material-symbols:delete-outline-rounded'
+            width={16}
+            height={16}
+            className='justify-start text-sm'
+          />
+          Delete
+        </Button>
+      </RequirePermission>
     </RowOptionsMenuWrapper>
   );
 };
@@ -227,15 +232,17 @@ const PurchaseTable = () => {
         <div className='flex flex-col gap-2 mb-4'>
           <div className='w-full flex flex-col xl:flex-row justify-between items-end xl:items-center gap-2'>
             <div className='w-full flex flex-row gap-2'>
-              <Button
-                href='/purchase/add'
-                variant='outline'
-                color='primary'
-                className='w-full sm:w-fit'
-              >
-                <Icon icon='ic:round-plus' width={24} height={24} />
-                Tambah
-              </Button>
+              <RequirePermission permissions='lti.purchase.create'>
+                <Button
+                  href='/purchase/add'
+                  variant='outline'
+                  color='primary'
+                  className='w-full sm:w-fit'
+                >
+                  <Icon icon='ic:round-plus' width={24} height={24} />
+                  Tambah
+                </Button>
+              </RequirePermission>
             </div>
 
             <DebouncedTextInput

src/components/pages/purchase/form/order/PurchaseOrderStaffApprovalForm.tsx

@@ -32,6 +32,7 @@ import {
 } from '@/types/api/purchase/purchase';
 import { BaseApproval, BaseGroupedApproval } from '@/types/api/api-general';
 import { useRouter } from 'next/navigation';
+import RequirePermission from '@/components/helper/RequirePermission';
 
 interface PurchaseOrderStaffApprovalFormProps {
   type?: 'add' | 'edit';
@@ -897,20 +898,25 @@ const PurchaseOrderStaffApprovalForm = ({
                                     <div className='flex justify-center'>
                                       {canUpdatePurchaseItems &&
                                         canShowDeleteAddButtons && (
-                                          <Button
-                                            type='button'
-                                            color='error'
-                                            onClick={() =>
-                                              removePurchaseItem(formItemIndex)
-                                            }
-                                            title='Hapus item'
-                                          >
-                                            <Icon
-                                              icon='mdi:trash-can'
-                                              width={16}
-                                              height={16}
-                                            />
-                                          </Button>
+                                          <RequirePermission permissions='lti.purchase.delete.item'>
+                                            <Button
+                                              type='button'
+                                              color='error'
+                                              className='text-sm w-fit'
+                                              onClick={() =>
+                                                removePurchaseItem(
+                                                  formItemIndex
+                                                )
+                                              }
+                                              title='Hapus item'
+                                            >
+                                              <Icon
+                                                icon='mdi:trash-can'
+                                                width={16}
+                                                height={16}
+                                              />
+                                            </Button>
+                                          </RequirePermission>
                                         )}
                                     </div>
                                   </td>

src/components/pages/purchase/order/PurchaseOrderDetail.tsx

@@ -39,19 +39,22 @@ import { toast } from 'react-hot-toast';
 import { useSearchParams } from 'next/navigation';
 import { formatCurrency, formatNumber, formatDate } from '@/lib/helper';
 import { PURCHASE_ORDER_APPROVAL_LINE } from '@/config/approval-line';
+import RequirePermission from '@/components/helper/RequirePermission';
 
 const ItemPembelianDropdown = ({ onEdit }: { onEdit: () => void }) => {
   return (
     <RowOptionsMenuWrapper type='dropdown'>
-      <Button
-        onClick={onEdit}
-        variant='ghost'
-        color='warning'
-        className='justify-start text-sm'
-      >
-        <Icon icon='material-symbols:edit-outline' width={16} height={16} />
-        Edit
-      </Button>
+      <RequirePermission permissions='lti.purchase.update'>
+        <Button
+          onClick={onEdit}
+          variant='ghost'
+          color='warning'
+          className='justify-start text-sm'
+        >
+          <Icon icon='material-symbols:edit-outline' width={16} height={16} />
+          Edit
+        </Button>
+      </RequirePermission>
     </RowOptionsMenuWrapper>
   );
 };
@@ -59,15 +62,17 @@ const ItemPembelianDropdown = ({ onEdit }: { onEdit: () => void }) => {
 const PenerimaanBarangDropdown = ({ onEdit }: { onEdit: () => void }) => {
   return (
     <RowOptionsMenuWrapper type='dropdown'>
-      <Button
-        onClick={onEdit}
-        variant='ghost'
-        color='warning'
-        className='justify-start text-sm'
-      >
-        <Icon icon='material-symbols:edit-outline' width={16} height={16} />
-        Edit
-      </Button>
+      <RequirePermission permissions='lti.purchase.receive'>
+        <Button
+          onClick={onEdit}
+          variant='ghost'
+          color='warning'
+          className='justify-start text-sm'
+        >
+          <Icon icon='material-symbols:edit-outline' width={16} height={16} />
+          Edit
+        </Button>
+      </RequirePermission>
     </RowOptionsMenuWrapper>
   );
 };
@@ -496,14 +501,16 @@ const PurchaseOrderDetail = ({
               };
 
               return (
-                <Button
-                  type='button'
-                  color='error'
-                  className='text-sm'
-                  onClick={deleteClickHandler}
-                >
-                  <Icon icon='mdi:trash-can' width={16} height={16} />
-                </Button>
+                <RequirePermission permissions='lti.purchase.delete.item'>
+                  <Button
+                    type='button'
+                    color='error'
+                    className='text-sm'
+                    onClick={deleteClickHandler}
+                  >
+                    <Icon icon='mdi:trash-can' width={16} height={16} />
+                  </Button>
+                </RequirePermission>
               );
             },
           },
@@ -632,25 +639,45 @@ const PurchaseOrderDetail = ({
 
         {showApprovalButton && (
           <div className='flex flex-row gap-2'>
-            <Button
-              onClick={handleApprovalClick}
-              variant='outline'
-              color='success'
-              className='w-full sm:w-fit'
+            <RequirePermission
+              permissions={
+                approvalStep === 1
+                  ? 'lti.purchase.approve.staff'
+                  : approvalStep === 2
+                    ? 'lti.purchase.approve.manager'
+                    : 'lti.purchase.receive'
+              }
             >
-              <Icon icon='material-symbols:check' width={24} height={24} />
-              Approve
-            </Button>
+              <Button
+                onClick={handleApprovalClick}
+                variant='outline'
+                color='success'
+                className='w-full sm:w-fit'
+              >
+                <Icon icon='material-symbols:check' width={24} height={24} />
+                Approve
+              </Button>
+            </RequirePermission>
 
-            <Button
-              variant='outline'
-              color='error'
-              className='w-full sm:w-fit'
-              onClick={handleRejectionClick}
+            <RequirePermission
+              permissions={
+                approvalStep === 1
+                  ? 'lti.purchase.approve.staff'
+                  : approvalStep === 2
+                    ? 'lti.purchase.approve.manager'
+                    : 'lti.purchase.receive'
+              }
             >
-              <Icon icon='material-symbols:close' width={24} height={24} />
-              Reject
-            </Button>
+              <Button
+                variant='outline'
+                color='error'
+                className='w-full sm:w-fit'
+                onClick={handleRejectionClick}
+              >
+                <Icon icon='material-symbols:close' width={24} height={24} />
+                Reject
+              </Button>
+            </RequirePermission>
           </div>
         )}
       </div>

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/logistic-stock/LogisticStockTabs.tsx

@@ -0,0 +1,32 @@
+'use client';
+
+import Tabs from '@/components/Tabs';
+import PurchasesPerSupplierTab from '@/components/pages/report/logistic-stock/tab/PurchasesPerSupplierTab';
+
+const LogisticStockTabs = () => {
+  const tabs = [
+    {
+      id: '1',
+      label: 'Rekapitulasi Pembelian Per Supplier',
+      content: <PurchasesPerSupplierTab />,
+    },
+    // {
+    //   id: '2',
+    //   label: 'Rekapitulasi Pemakaian Barang',
+    //   content: 'Rekapitulasi Pemakaian Barang Tab',
+    // },
+    // {
+    //   id: '3',
+    //   label: 'Rekapitulasi Stock Persediaan Barang',
+    //   content: 'Rekapitulasi Stock Persediaan Barang Tab',
+    // },
+  ];
+
+  return (
+    <section className='w-full p-4'>
+      <Tabs tabs={tabs} variant='lifted' />
+    </section>
+  );
+};
+
+export default LogisticStockTabs;

src/components/pages/report/logistic-stock/export/PurchasesPerSupplierExport.tsx

@@ -0,0 +1,404 @@
+'use client';
+
+import {
+  Page,
+  Text,
+  View,
+  Document,
+  StyleSheet,
+  Font,
+  pdf,
+} from '@react-pdf/renderer';
+import { LogisticPurchasePerSupplierReport } from '@/types/api/report/logistic-stock';
+import { formatCurrency, formatDate, formatNumber } 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',
+  },
+  tableCellNo: {
+    flex: 1,
+    borderRightWidth: 1,
+    borderRightColor: '#000000',
+    borderRightStyle: 'solid',
+    padding: 4,
+    fontSize: 8,
+    textAlign: 'center',
+  },
+  tableCellLast: {
+    flex: 1,
+    padding: 4,
+    fontSize: 8,
+  },
+  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,
+  },
+  tableCellHeaderLast: {
+    flex: 1,
+    padding: 4,
+    fontSize: 8,
+    fontWeight: 'bold',
+    backgroundColor: '#F5F5F5',
+    borderBottomWidth: 1,
+    borderBottomColor: '#000000',
+    borderBottomStyle: 'solid',
+    paddingVertical: 12,
+    textAlign: 'center',
+  },
+  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',
+  },
+  tableCellCenterLast: {
+    flex: 1,
+    padding: 4,
+    fontSize: 8,
+    textAlign: 'center',
+  },
+  tableBorderBottom: {
+    borderBottomWidth: 1,
+    borderBottomColor: '#000000',
+    borderBottomStyle: 'solid',
+  },
+  supplierSection: {
+    marginBottom: 10,
+  },
+  supplierSectionBreak: {
+    marginBottom: 15,
+  },
+  badge: {
+    backgroundColor: '#1f74bf',
+    color: '#FFFFFF',
+    padding: 2,
+    borderRadius: 2,
+    fontSize: 7,
+    fontWeight: 'bold',
+    alignSelf: 'center',
+    marginRight: 4,
+  },
+  parameterBadge: {
+    backgroundColor: '#F5F5F5',
+    color: '#333333',
+    padding: 4,
+    borderRadius: 4,
+    fontSize: 8,
+    marginRight: 8,
+    marginBottom: 4,
+  },
+  parameterContainer: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    marginBottom: 8,
+  },
+});
+
+interface PurchasesPerSupplierExportParams {
+  data: LogisticPurchasePerSupplierReport[];
+  params: {
+    area_name?: string;
+    supplier_name?: string;
+    product_name?: string;
+    product_category_name?: string;
+    received_date?: string;
+    po_date?: string;
+    start_date?: string;
+    end_date?: string;
+    sort_by?: string;
+    filter_by?: string;
+  };
+}
+
+const getParameterText = (
+  params: PurchasesPerSupplierExportParams['params']
+) => {
+  const paramsText = [];
+
+  if (params.supplier_name) {
+    paramsText.push(`Supplier: ${params.supplier_name}`);
+  } else {
+    paramsText.push('Semua Supplier');
+  }
+
+  if (params.start_date && params.end_date) {
+    const startDate = formatDate(params.start_date, 'DD MMM YYYY');
+    const endDate = formatDate(params.end_date, 'DD MMM YYYY');
+    paramsText.push(`Periode: ${startDate} - ${endDate}`);
+  } else if (params.start_date) {
+    const startDate = formatDate(params.start_date, 'DD MMM YYYY');
+    paramsText.push(`Tanggal: ${startDate}`);
+  }
+
+  const currentDate = formatDate(new Date(), 'DD MMM YYYY HH:mm');
+  paramsText.push(`Dicetak: ${currentDate}`);
+
+  return paramsText;
+};
+
+const createPDFDocument = (
+  supplierReports: LogisticPurchasePerSupplierReport[],
+  params: PurchasesPerSupplierExportParams['params']
+) => (
+  <Document>
+    <Page size='A3' orientation='landscape' style={pdfStyles.page}>
+      {/* Title and Parameters */}
+      <View style={pdfStyles.titleSection}>
+        <Text style={pdfStyles.mainTitle}>
+          Laporan &gt; Rekapitulasi Pembelian Per Supplier
+        </Text>
+        <View style={pdfStyles.parameterContainer}>
+          <View style={pdfStyles.parameterBadge}>
+            <Text>
+              Jenis Tanggal:{' '}
+              {params.filter_by === 'received_date'
+                ? 'Tanggal Terima'
+                : 'Tanggal PO'}
+            </Text>
+          </View>
+          {getParameterText(params).map((param, index) => (
+            <View key={index} style={pdfStyles.parameterBadge}>
+              <Text>{param}</Text>
+            </View>
+          ))}
+        </View>
+      </View>
+
+      {/* Supplier Sections */}
+      {supplierReports.map(
+        (
+          supplierReport: LogisticPurchasePerSupplierReport,
+          supplierIndex: number
+        ) => {
+          return (
+            <View
+              key={supplierReport.supplier.id}
+              style={[
+                pdfStyles.supplierSection,
+                supplierIndex < supplierReports.length - 1
+                  ? pdfStyles.supplierSectionBreak
+                  : {},
+              ]}
+            >
+              <Text style={pdfStyles.supplierTitle}>
+                {supplierReport.supplier.name}
+              </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}>
+                    <Text>Tanggal Terima</Text>
+                  </View>
+                  <View style={pdfStyles.tableCellHeader}>
+                    <Text>Tanggal PO</Text>
+                  </View>
+                  <View style={pdfStyles.tableCellHeader}>
+                    <Text>Referensi</Text>
+                  </View>
+                  <View style={pdfStyles.tableCellHeader}>
+                    <Text>Produk</Text>
+                  </View>
+                  <View style={pdfStyles.tableCellHeader}>
+                    <Text>Tujuan</Text>
+                  </View>
+                  <View style={[pdfStyles.tableCellHeaderRight, { flex: 0.8 }]}>
+                    <Text>Qty</Text>
+                  </View>
+                  <View style={[pdfStyles.tableCellHeaderRight, { flex: 1.2 }]}>
+                    <Text>Harga Beli</Text>
+                  </View>
+                  <View style={[pdfStyles.tableCellHeaderRight, { flex: 1.5 }]}>
+                    <Text>Nilai Pembelian</Text>
+                  </View>
+                  <View style={[pdfStyles.tableCellHeaderRight, { flex: 1.2 }]}>
+                    <Text>Biaya Transport</Text>
+                  </View>
+                  <View style={[pdfStyles.tableCellHeaderRight, { flex: 1.5 }]}>
+                    <Text>Total</Text>
+                  </View>
+                  <View style={[pdfStyles.tableCellHeader, { flex: 1.2 }]}>
+                    <Text>Armada</Text>
+                  </View>
+                  <View style={pdfStyles.tableCellHeaderLast}>
+                    <Text>Surat Jalan</Text>
+                  </View>
+                </View>
+
+                {/* Table Body */}
+                {supplierReport.rows.map(
+                  (
+                    item: LogisticPurchasePerSupplierReport['rows'][number],
+                    index: number
+                  ) => (
+                    <View
+                      key={index}
+                      style={[
+                        pdfStyles.tableRow,
+                        index < supplierReport.rows.length - 1
+                          ? pdfStyles.tableBorderBottom
+                          : {},
+                      ]}
+                    >
+                      <View style={[pdfStyles.tableCellNo, { flex: 0.5 }]}>
+                        <Text>{index + 1}</Text>
+                      </View>
+                      <View style={pdfStyles.tableCell}>
+                        <Text>
+                          {formatDate(item.receive_date, 'DD-MMM-YYYY')}
+                        </Text>
+                      </View>
+                      <View style={pdfStyles.tableCell}>
+                        <Text>{formatDate(item.po_date, 'DD-MMM-YYYY')}</Text>
+                      </View>
+                      <View style={pdfStyles.tableCell}>
+                        <Text>{item.po_number || '-'}</Text>
+                      </View>
+                      <View style={pdfStyles.tableCell}>
+                        <Text>{item.product?.name || '-'}</Text>
+                      </View>
+                      <View style={pdfStyles.tableCell}>
+                        <Text>{item.warehouse?.name || '-'}</Text>
+                      </View>
+                      <View style={[pdfStyles.tableCellRight, { flex: 0.8 }]}>
+                        <Text>{formatNumber(item.qty || 0)}</Text>
+                      </View>
+                      <View style={[pdfStyles.tableCellRight, { flex: 1.2 }]}>
+                        <Text>{formatCurrency(item.unit_price || 0)}</Text>
+                      </View>
+                      <View style={[pdfStyles.tableCellRight, { flex: 1.5 }]}>
+                        <Text>{formatCurrency(item.purchase_value || 0)}</Text>
+                      </View>
+                      <View style={[pdfStyles.tableCellRight, { flex: 1.2 }]}>
+                        <Text>
+                          {formatCurrency(item.transport_unit_price || 0)}
+                        </Text>
+                      </View>
+                      <View style={[pdfStyles.tableCellRight, { flex: 1.5 }]}>
+                        <Text>{formatCurrency(item.total_amount || 0)}</Text>
+                      </View>
+                      <View style={[pdfStyles.tableCell, { flex: 1.2 }]}>
+                        <View style={pdfStyles.badge}>
+                          <Text>{item.expedition || '-'}</Text>
+                        </View>
+                      </View>
+                      <View style={pdfStyles.tableCellLast}>
+                        <Text>{item.delivery_number || '-'}</Text>
+                      </View>
+                    </View>
+                  )
+                )}
+              </View>
+            </View>
+          );
+        }
+      )}
+    </Page>
+  </Document>
+);
+
+export const generatePurchasesPerSupplierPDF = async (
+  data: LogisticPurchasePerSupplierReport[],
+  params: PurchasesPerSupplierExportParams['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;
+    link.download = `laporan-pembelian-per-supplier-dicetak-pada-${formatDate(new Date(), 'YYYY-MM-DD-HHmm')}.pdf`;
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+    URL.revokeObjectURL(url);
+  } catch (error) {
+    throw error;
+  }
+};

src/components/pages/report/logistic-stock/tab/PurchasesPerSupplierTab.tsx

@@ -0,0 +1,934 @@
+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 { AreaApi } from '@/services/api/master-data';
+import { SupplierApi } from '@/services/api/master-data';
+import { ProductApi } from '@/services/api/master-data';
+import { ProductCategoryApi } from '@/services/api/master-data';
+import { LogisticApi } from '@/services/api/report/logistic-stock';
+import Table from '@/components/Table';
+import { ColumnDef } from '@tanstack/react-table';
+import { formatCurrency, formatDate, formatNumber } from '@/lib/helper';
+import {
+  LogisticPurchasePerSupplierReport,
+  LogisticPurchasePerSupplierSummary,
+} from '@/types/api/report/logistic-stock';
+import { isResponseSuccess } from '@/lib/api-helper';
+import { useTableFilter } from '@/services/hooks/useTableFilter';
+import Pagination from '@/components/Pagination';
+import Button from '@/components/Button';
+import Dropdown from '@/components/Dropdown';
+import MenuItem from '@/components/menu/MenuItem';
+import Menu from '@/components/menu/Menu';
+import { generatePurchasesPerSupplierPDF } from '@/components/pages/report/logistic-stock/export/PurchasesPerSupplierExport';
+import toast from 'react-hot-toast';
+import * as XLSX from 'xlsx';
+
+const PurchasesPerSupplierTab = () => {
+  // ===== STATE MANAGEMENT =====
+  const [isPdfExportLoading, setIsPdfExportLoading] = useState(false);
+  const [isExcelExportLoading, setIsExcelExportLoading] = useState(false);
+  const isAnyExportLoading = isPdfExportLoading || isExcelExportLoading;
+
+  // ===== PAGINATION STATE =====
+  const [currentPage, setCurrentPage] = useState(1);
+  const [pageSize, setPageSize] = useState(10);
+
+  // ===== SUBMISSION STATE =====
+  const [isSubmitted, setIsSubmitted] = useState(false);
+
+  // ===== TABLE FILTER STATE =====
+  const { state: tableFilterState, updateFilter } = useTableFilter({
+    initial: {
+      area_id: [] as string[],
+      supplier_id: [] as string[],
+      product_id: [] as string[],
+      product_category_id: [] as string[],
+      received_date: '',
+      po_date: '',
+      start_date: '',
+      end_date: '',
+      sort_by: '',
+      filter_by: 'received_date',
+    },
+    paramMap: {
+      page: 'page',
+      pageSize: 'limit',
+    },
+  });
+
+  const { options: areaOptions, isLoadingOptions: isLoadingAreas } = useSelect(
+    AreaApi.basePath,
+    'id',
+    'name',
+    'search'
+  );
+
+  const { options: supplierOptions, isLoadingOptions: isLoadingSuppliers } =
+    useSelect(SupplierApi.basePath, 'id', 'name', 'search', {
+      category: 'SAPRONAK',
+    });
+
+  const { options: productOptions, isLoadingOptions: isLoadingProducts } =
+    useSelect(ProductApi.basePath, 'id', 'name', 'search');
+
+  const {
+    options: productCategoryOptions,
+    isLoadingOptions: isLoadingProductCategories,
+  } = useSelect(ProductCategoryApi.basePath, 'id', 'name', 'search');
+
+  const dataTypeOptions = useMemo(
+    () => [
+      { value: 'received_date', label: 'Tanggal Terima' },
+      { value: 'po_date', label: 'Tanggal PO' },
+    ],
+    []
+  );
+
+  const sortByOptions = useMemo(
+    () => [
+      { value: 'ASC', label: 'Ascending' },
+      { value: 'DESC', label: 'Descending' },
+    ],
+    []
+  );
+
+  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 supplierChangeHandler = useCallback(
+    (val: OptionType | OptionType[] | null) => {
+      const arr = Array.isArray(val) ? val : val ? [val] : [];
+      updateFilter(
+        'supplier_id',
+        arr.map((v) => String((v as OptionType).value))
+      );
+      setIsSubmitted(false);
+    },
+    [updateFilter]
+  );
+
+  const productChangeHandler = useCallback(
+    (val: OptionType | OptionType[] | null) => {
+      const arr = Array.isArray(val) ? val : val ? [val] : [];
+      updateFilter(
+        'product_id',
+        arr.map((v) => String((v as OptionType).value))
+      );
+      setIsSubmitted(false);
+    },
+    [updateFilter]
+  );
+
+  const productCategoryChangeHandler = useCallback(
+    (val: OptionType | OptionType[] | null) => {
+      const arr = Array.isArray(val) ? val : val ? [val] : [];
+      updateFilter(
+        'product_category_id',
+        arr.map((v) => String((v as OptionType).value))
+      );
+      setIsSubmitted(false);
+    },
+    [updateFilter]
+  );
+
+  const dataTypeChangeHandler = useCallback(
+    (val: OptionType | OptionType[] | null) => {
+      const newVal = val as OptionType;
+      const filterValue =
+        (newVal?.value as 'received_date' | 'po_date') || 'received_date';
+      updateFilter('filter_by', filterValue);
+      updateFilter('received_date', '');
+      updateFilter('po_date', '');
+      setIsSubmitted(false);
+    },
+    [updateFilter]
+  );
+
+  const sortByHandler = useCallback(
+    (val: OptionType | OptionType[] | null) => {
+      const newVal = val as OptionType;
+      const sortValue = (newVal?.value as 'ASC' | 'DESC') || 'ASC';
+      updateFilter('sort_by', sortValue);
+      setIsSubmitted(false);
+    },
+    [updateFilter]
+  );
+
+  const startDateChangeHandler = useCallback<
+    ChangeEventHandler<HTMLInputElement>
+  >(
+    (e) => {
+      const val = e.target.value;
+      updateFilter('start_date', val || '');
+      setIsSubmitted(false);
+    },
+    [updateFilter]
+  );
+
+  const endDateChangeHandler = useCallback<
+    ChangeEventHandler<HTMLInputElement>
+  >(
+    (e) => {
+      const val = e.target.value;
+      updateFilter('end_date', val || '');
+      setIsSubmitted(false);
+    },
+    [updateFilter]
+  );
+
+  const resetFilters = useCallback(() => {
+    updateFilter('area_id', []);
+    updateFilter('supplier_id', []);
+    updateFilter('product_id', []);
+    updateFilter('product_category_id', []);
+    updateFilter('received_date', '');
+    updateFilter('po_date', '');
+    updateFilter('start_date', '');
+    updateFilter('end_date', '');
+    updateFilter('sort_by', '');
+    updateFilter('filter_by', 'received_date');
+    setIsSubmitted(false);
+  }, [updateFilter]);
+
+  const handleSubmit = useCallback(() => {
+    setIsSubmitted(true);
+    setCurrentPage(1);
+  }, []);
+
+  // ===== DATA FETCHING =====
+  const { data: purchasePerSupplier, isLoading } = useSWR(
+    isSubmitted
+      ? () => {
+          const params = {
+            area_id:
+              tableFilterState.area_id.length > 0
+                ? tableFilterState.area_id.join(',')
+                : undefined,
+            supplier_id:
+              tableFilterState.supplier_id.length > 0
+                ? tableFilterState.supplier_id.join(',')
+                : undefined,
+            product_id:
+              tableFilterState.product_id.length > 0
+                ? tableFilterState.product_id.join(',')
+                : undefined,
+            product_category_id:
+              tableFilterState.product_category_id.length > 0
+                ? tableFilterState.product_category_id.join(',')
+                : undefined,
+            received_date:
+              tableFilterState.filter_by === 'received_date'
+                ? tableFilterState.start_date || undefined
+                : undefined,
+            po_date:
+              tableFilterState.filter_by === 'po_date'
+                ? tableFilterState.start_date || undefined
+                : undefined,
+            start_date: tableFilterState.start_date || undefined,
+            end_date: tableFilterState.end_date || undefined,
+            sort_by: tableFilterState.sort_by || undefined,
+            filter_by: tableFilterState.filter_by || undefined,
+            page: currentPage,
+            limit: pageSize,
+          };
+
+          return ['logistic-purchase-report', params];
+        }
+      : null,
+    ([, params]) =>
+      LogisticApi.getLogisticPurchasePerSupplierReport(
+        params.area_id,
+        params.supplier_id,
+        params.product_id,
+        params.product_category_id,
+        params.received_date,
+        params.po_date,
+        params.start_date,
+        params.end_date,
+        params.sort_by,
+        params.filter_by,
+        params.page,
+        params.limit
+      )
+  );
+
+  const data: LogisticPurchasePerSupplierReport[] = useMemo(
+    () =>
+      isResponseSuccess(purchasePerSupplier)
+        ? (purchasePerSupplier?.data as unknown as LogisticPurchasePerSupplierReport[]) ||
+          []
+        : [],
+    [purchasePerSupplier]
+  );
+
+  const meta =
+    isResponseSuccess(purchasePerSupplier) && purchasePerSupplier?.meta
+      ? purchasePerSupplier.meta
+      : null;
+
+  // ===== EXPORT DATA FETCHER =====
+  const logisticPurchasePerSupplierExport = useCallback(async (): Promise<
+    LogisticPurchasePerSupplierReport[] | null
+  > => {
+    const params = {
+      area_id:
+        tableFilterState.area_id.length > 0
+          ? tableFilterState.area_id.join(',')
+          : undefined,
+      supplier_id:
+        tableFilterState.supplier_id.length > 0
+          ? tableFilterState.supplier_id.join(',')
+          : undefined,
+      product_id:
+        tableFilterState.product_id.length > 0
+          ? tableFilterState.product_id.join(',')
+          : undefined,
+      product_category_id:
+        tableFilterState.product_category_id.length > 0
+          ? tableFilterState.product_category_id.join(',')
+          : undefined,
+      received_date:
+        tableFilterState.filter_by === 'received_date'
+          ? tableFilterState.start_date || undefined
+          : undefined,
+      po_date:
+        tableFilterState.filter_by === 'po_date'
+          ? tableFilterState.start_date || undefined
+          : undefined,
+      start_date: tableFilterState.start_date || undefined,
+      end_date: tableFilterState.end_date || undefined,
+      sort_by: tableFilterState.sort_by || undefined,
+      filter_by: tableFilterState.filter_by || undefined,
+      limit: 100,
+      page: 1,
+    };
+
+    const response = await LogisticApi.getLogisticPurchasePerSupplierReport(
+      params.area_id,
+      params.supplier_id,
+      params.product_id,
+      params.product_category_id,
+      params.received_date,
+      params.po_date,
+      params.start_date,
+      params.end_date,
+      params.sort_by,
+      params.filter_by,
+      params.page,
+      params.limit
+    );
+
+    return isResponseSuccess(response)
+      ? (response.data as unknown as LogisticPurchasePerSupplierReport[])
+      : null;
+  }, [tableFilterState]);
+
+  // ===== EXPORT HANDLERS =====
+  const handleExportExcel = useCallback(async () => {
+    setIsExcelExportLoading(true);
+    try {
+      const allDataForExport = await logisticPurchasePerSupplierExport();
+
+      if (
+        !allDataForExport ||
+        !Array.isArray(allDataForExport) ||
+        allDataForExport.length === 0
+      ) {
+        toast.error('Tidak ada data untuk diekspor.');
+        return;
+      }
+
+      const workbook = XLSX.utils.book_new();
+
+      allDataForExport.forEach((supplierReport) => {
+        const supplierData = supplierReport.rows;
+        const supplierName =
+          supplierReport.supplier?.name || 'Unknown Supplier';
+
+        const excelData: { [key: string]: string | number }[] =
+          supplierData.map((item, index) => ({
+            No: index + 1,
+            'Tanggal Terima': item.receive_date
+              ? formatDate(item.receive_date, 'DD MMM YYYY')
+              : '',
+            'Tanggal PO': item.po_date
+              ? formatDate(item.po_date, 'DD MMM YYYY')
+              : '',
+            'No. Referensi': item.po_number || '',
+            'Nama Produk': item.product?.name || '',
+            Tujuan: item.warehouse?.name || '',
+            QTY: item.qty || 0,
+            'Harga Beli (Rp)': item.unit_price || 0,
+            'Value Harga Beli (Rp)': item.purchase_value || 0,
+            'Transport (Rp)': item.transport_unit_price || 0,
+            'Value Transport (Rp)': item.transport_value || 0,
+            'Jumlah (Rp)': item.total_amount || 0,
+            Ekspedisi: item.expedition || '',
+            'Surat Jalan': item.delivery_number || '',
+          }));
+
+        if (supplierReport.summary) {
+          excelData.push({
+            No: 'Total',
+            'Tanggal Terima': '',
+            'Tanggal PO': '',
+            'No. Referensi': '',
+            'Nama Produk': '',
+            Tujuan: '',
+            QTY: supplierReport.summary.total_qty || 0,
+            'Harga Beli (Rp)': '',
+            'Value Harga Beli (Rp)':
+              supplierReport.summary.total_purchase_value || 0,
+            'Transport (Rp)': '',
+            'Value Transport (Rp)':
+              supplierReport.summary.total_transport_value || 0,
+            'Jumlah (Rp)': supplierReport.summary.total_amount || 0,
+            Ekspedisi: '',
+            'Surat Jalan': '',
+          });
+        }
+
+        const worksheet = XLSX.utils.json_to_sheet(excelData);
+
+        const colWidths = [
+          { wch: 5 }, // No
+          { wch: 15 }, // Tanggal Terima
+          { wch: 15 }, // Tanggal PO
+          { wch: 15 }, // No. Referensi
+          { wch: 30 }, // Nama Produk
+          { wch: 20 }, // Tujuan
+          { wch: 10 }, // QTY
+          { wch: 18 }, // Harga Beli
+          { wch: 20 }, // Value Harga Beli
+          { wch: 15 }, // Transport
+          { wch: 20 }, // Value Transport
+          { wch: 18 }, // Jumlah
+          { wch: 15 }, // Ekspedisi
+          { wch: 15 }, // Surat Jalan
+        ];
+        worksheet['!cols'] = colWidths;
+
+        const sheetName =
+          supplierName.length > 31
+            ? supplierName.substring(0, 31)
+            : supplierName;
+        XLSX.utils.book_append_sheet(workbook, worksheet, sheetName);
+      });
+
+      const filename = `laporan-pembelian-per-supplier-dicetak-pada-${formatDate(new Date(), 'YYYY-MM-DD-HHmm')}.xlsx`;
+
+      XLSX.writeFile(workbook, filename);
+      toast.success('Excel berhasil dibuat dan diunduh.');
+    } catch {
+      toast.error('Gagal membuat Excel. Silakan coba lagi.');
+    } finally {
+      setIsExcelExportLoading(false);
+    }
+  }, [
+    logisticPurchasePerSupplierExport,
+    tableFilterState,
+    areaOptions,
+    supplierOptions,
+  ]);
+
+  const handleExportPdf = useCallback(async () => {
+    setIsPdfExportLoading(true);
+    try {
+      const allDataForExport = await logisticPurchasePerSupplierExport();
+
+      if (
+        !allDataForExport ||
+        !Array.isArray(allDataForExport) ||
+        allDataForExport.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 supplierName =
+        tableFilterState.supplier_id.length > 0
+          ? tableFilterState.supplier_id
+              .map(
+                (id) =>
+                  supplierOptions.find((opt) => opt.value === Number(id))?.label
+              )
+              .filter(Boolean)
+              .join(', ') || 'Semua Supplier'
+          : 'Semua Supplier';
+
+      const productName =
+        tableFilterState.product_id.length > 0
+          ? tableFilterState.product_id
+              .map(
+                (id) =>
+                  productOptions.find((opt) => opt.value === Number(id))?.label
+              )
+              .filter(Boolean)
+              .join(', ') || 'Semua Produk'
+          : 'Semua Produk';
+
+      const productCategoryName =
+        tableFilterState.product_category_id.length > 0
+          ? tableFilterState.product_category_id
+              .map(
+                (id) =>
+                  productCategoryOptions.find((opt) => opt.value === Number(id))
+                    ?.label
+              )
+              .filter(Boolean)
+              .join(', ') || 'Semua Kategori Produk'
+          : 'Semua Kategori Produk';
+
+      const exportParams = {
+        area_name: areaName,
+        supplier_name: supplierName,
+        product_name: productName,
+        product_category_name: productCategoryName,
+        filter_by: tableFilterState.filter_by || 'received_date',
+        start_date: tableFilterState.start_date || '',
+        end_date: tableFilterState.end_date || '',
+      };
+
+      await generatePurchasesPerSupplierPDF(allDataForExport, exportParams);
+      toast.success('PDF berhasil dibuat dan diunduh.');
+    } catch {
+      toast.error('Gagal membuat PDF. Silakan coba lagi.');
+    } finally {
+      setIsPdfExportLoading(false);
+    }
+  }, [
+    logisticPurchasePerSupplierExport,
+    tableFilterState,
+    areaOptions,
+    supplierOptions,
+    productOptions,
+    productCategoryOptions,
+  ]);
+
+  // ===== PAGINATION HANDLERS =====
+  const handlePageChange = (page: number) => {
+    setCurrentPage(page);
+  };
+
+  const handleRowChange = (pageSize: number) => {
+    setPageSize(pageSize);
+  };
+
+  const handleNextPage = () => {
+    if (meta && currentPage < meta.total_pages) {
+      setCurrentPage(currentPage + 1);
+    }
+  };
+
+  const handlePrevPage = () => {
+    if (currentPage > 1) {
+      setCurrentPage(currentPage - 1);
+    }
+  };
+
+  const getTableColumns = (
+    summary: LogisticPurchasePerSupplierSummary
+  ): ColumnDef<LogisticPurchasePerSupplierReport['rows'][0]>[] => {
+    const tableColumns: ColumnDef<
+      LogisticPurchasePerSupplierReport['rows'][0]
+    >[] = [
+      {
+        id: 'no',
+        header: 'No',
+        cell: (props) => props.row.index + 1,
+        footer: () => <div className='font-semibold text-gray-900'>Total</div>,
+      },
+
+      {
+        id: 'received_date',
+        header: 'Tanggal Terima',
+        accessorKey: 'receive_date',
+        cell: (props) => {
+          const value = props.row.original.receive_date;
+          return formatDate(value, 'DD MMM YYYY');
+        },
+      },
+      {
+        id: 'po_date',
+        header: 'Tanggal PO',
+        accessorKey: 'po_date',
+        cell: (props) => {
+          const value = props.row.original.po_date;
+          return formatDate(value, 'DD MMM YYYY');
+        },
+      },
+      {
+        id: 'po_number',
+        header: 'No. Referensi',
+        accessorKey: 'po_number',
+        cell: (props) => {
+          const value = props.row.original.po_number;
+          return value || '-';
+        },
+      },
+      {
+        id: 'product_name',
+        header: 'Nama Produk',
+        accessorKey: 'product.name',
+        cell: (props) => {
+          const product = props.row.original.product;
+          return product?.name || '-';
+        },
+      },
+      {
+        id: 'destination_warehouse',
+        header: 'Tujuan',
+        accessorKey: 'warehouse.name',
+        cell: (props) => {
+          const warehouse = props.row.original.warehouse;
+          return warehouse?.name || '-';
+        },
+      },
+      {
+        id: 'qty',
+        header: 'QTY',
+        accessorKey: 'qty',
+        cell: (props) => {
+          const value = props.row.original.qty;
+          return <div className='text-right'>{formatNumber(value)}</div>;
+        },
+        footer: () => (
+          <div className='text-right font-semibold text-gray-900'>
+            {formatNumber(summary.total_qty) || '-'}
+          </div>
+        ),
+      },
+      {
+        id: 'price',
+        header: 'Harga Beli (Rp)',
+        accessorKey: 'unit_price',
+        cell: (props) => {
+          const value = props.row.original.unit_price;
+          return <div className='text-right'>{formatCurrency(value)}</div>;
+        },
+        footer: () => (
+          <div className='text-right font-semibold text-gray-900'>
+            {formatCurrency(summary.total_unit_price) || '-'}
+          </div>
+        ),
+      },
+      {
+        id: 'purchase_amount',
+        header: 'Value Harga Beli (Rp)',
+        accessorKey: 'purchase_value',
+        cell: (props) => {
+          const value = props.row.original.purchase_value;
+          return <div className='text-right'>{formatCurrency(value)}</div>;
+        },
+        footer: () => (
+          <div className='text-right font-semibold text-gray-900'>
+            {formatCurrency(summary.total_purchase_value) || '-'}
+          </div>
+        ),
+      },
+      {
+        id: 'transport',
+        header: 'Transport (Rp)',
+        accessorKey: 'transport_unit_price',
+        cell: (props) => {
+          const value = props.row.original.transport_unit_price;
+          return <div className='text-right'>{formatCurrency(value)}</div>;
+        },
+        footer: () => (
+          <div className='text-right font-semibold text-gray-900'>
+            {formatCurrency(summary.total_transport_unit_price) || '-'}
+          </div>
+        ),
+      },
+      {
+        id: 'value_transport',
+        header: 'Value Transport (Rp)',
+        accessorKey: 'transport_value',
+        cell: (props) => {
+          const value = props.row.original.transport_value;
+          return <div className='text-right'>{formatCurrency(value)}</div>;
+        },
+        footer: () => (
+          <div className='text-right font-semibold text-gray-900'>
+            {formatCurrency(summary.total_transport_value) || '-'}
+          </div>
+        ),
+      },
+      {
+        id: 'total',
+        header: 'Jumlah (Rp)',
+        accessorKey: 'total_amount',
+        cell: (props) => {
+          const value = props.row.original.total_amount;
+          return <div className='text-right'>{formatCurrency(value)}</div>;
+        },
+        footer: () => (
+          <div className='text-right font-semibold text-gray-900'>
+            {formatCurrency(summary.total_amount) || '-'}
+          </div>
+        ),
+      },
+      {
+        id: 'expedition_vendor_name',
+        header: 'Ekspedisi',
+        accessorKey: 'expedition',
+        cell: (props) => {
+          const value = props.row.original.expedition;
+          return value || '-';
+        },
+      },
+      {
+        id: 'travel_number',
+        header: 'Surat Jalan',
+        accessorKey: 'delivery_number',
+        cell: (props) => {
+          const value = props.row.original.delivery_number;
+          return value || '-';
+        },
+      },
+    ];
+    return tableColumns;
+  };
+
+  return (
+    <div className='w-full p-0 sm:p-4'>
+      <Card
+        subtitle='Laporan > Rekapitulasi Pembelian Per Supplier'
+        className={{ wrapper: 'w-full', body: 'p-1!' }}
+      >
+        <div className='mb-4 flex justify-end gap-2 [&_button]:px-4'>
+          <Button color='primary' onClick={handleSubmit}>
+            Cari
+          </Button>
+          <Button color='warning' onClick={resetFilters}>
+            Reset
+          </Button>
+          <Dropdown
+            trigger={
+              <Button color='success' isLoading={isAnyExportLoading}>
+                Export
+              </Button>
+            }
+            align='end'
+          >
+            <Menu className='w-32'>
+              <MenuItem title='Excel' onClick={handleExportExcel} />
+              <MenuItem title='PDF' onClick={handleExportPdf} />
+            </Menu>
+          </Dropdown>
+        </div>
+        <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='Supplier'
+            placeholder='Pilih Supplier'
+            isMulti
+            options={supplierOptions}
+            value={supplierOptions.filter((opt) =>
+              (tableFilterState.supplier_id || [])
+                .map(String)
+                .includes(String(opt.value))
+            )}
+            onChange={supplierChangeHandler}
+            isLoading={isLoadingSuppliers}
+            isClearable
+          />
+          <SelectInput
+            label='Produk'
+            placeholder='Pilih Produk'
+            isMulti
+            options={productOptions}
+            value={productOptions.filter((opt) =>
+              (tableFilterState.product_id || [])
+                .map(String)
+                .includes(String(opt.value))
+            )}
+            onChange={productChangeHandler}
+            isLoading={isLoadingProducts}
+            isClearable
+          />
+        </div>
+        <div className='grid md:grid-cols-3 grid-cols-1 gap-4'>
+          <SelectInput
+            label='Kategori Produk'
+            placeholder='Pilih Kategori Produk'
+            isMulti
+            options={productCategoryOptions}
+            value={productCategoryOptions.filter((opt) =>
+              (tableFilterState.product_category_id || [])
+                .map(String)
+                .includes(String(opt.value))
+            )}
+            onChange={productCategoryChangeHandler}
+            isLoading={isLoadingProductCategories}
+            isClearable
+          />
+          <div className='md:flex md:flex-row grid grid-cols-1 gap-4'>
+            <SelectInput
+              label='Filter Berdasarkan'
+              placeholder='Pilih Filter Berdasarkan'
+              options={dataTypeOptions}
+              value={
+                dataTypeOptions?.find(
+                  (option) => option.value === tableFilterState.filter_by
+                ) || null
+              }
+              onChange={dataTypeChangeHandler}
+              isLoading={false}
+              isClearable={false}
+            />
+            <SelectInput
+              label='Urutkan Berdasarkan'
+              placeholder='Urutkan Berdasarkan'
+              options={sortByOptions}
+              value={
+                sortByOptions?.find(
+                  (option) => option.value === tableFilterState.sort_by
+                ) || null
+              }
+              onChange={sortByHandler}
+              isLoading={false}
+              isClearable={false}
+            />
+          </div>
+          <div className='md:flex md:flex-row grid grid-cols-1 gap-4'>
+            <DateInput
+              label='Tanggal Awal'
+              name='start_date'
+              placeholder='Pilih Tanggal Awal'
+              value={tableFilterState.start_date}
+              onChange={startDateChangeHandler}
+            />
+            <DateInput
+              label='Tanggal Akhir'
+              name='end_date'
+              placeholder='Pilih Tanggal Akhir'
+              value={tableFilterState.end_date}
+              onChange={endDateChangeHandler}
+            />
+          </div>
+        </div>
+
+        {!isSubmitted ? (
+          <div className='mt-6 text-center text-gray-500'>
+            Silakan pilih filter dan klik tombol Submit 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>
+        ) : (
+          data.map((supplierReport) => {
+            const summary = supplierReport.summary || {
+              total_qty: 0,
+              total_unit_price: 0,
+              total_purchase_value: 0,
+              total_transport_unit_price: 0,
+              total_transport_value: 0,
+              total_amount: 0,
+            };
+
+            const totalPurchase = summary.total_amount;
+            const tableColumns = getTableColumns(summary);
+
+            return (
+              <Card
+                key={supplierReport.supplier.id}
+                title={supplierReport.supplier.name}
+                subtitle={`Total Pembelian: ${formatCurrency(totalPurchase)}`}
+                className={{ wrapper: 'w-full' }}
+                variant='bordered'
+                collapsible={true}
+              >
+                <Table
+                  data={supplierReport.rows}
+                  columns={tableColumns}
+                  pageSize={10}
+                  renderFooter={supplierReport.rows.length > 0}
+                  className={{
+                    containerClassName: 'w-full',
+                    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',
+                    paginationClassName: 'hidden',
+                  }}
+                />
+              </Card>
+            );
+          })
+        )}
+      </Card>
+      {meta && data.length > 0 && (
+        <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 PurchasesPerSupplierTab;

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/constant.ts

@@ -10,14 +10,20 @@ export const MAIN_DRAWER_LINKS: SidebarMenuItem[] = [
     text: 'Produksi',
     link: '/production',
     icon: 'heroicons-outline:wrench-screwdriver',
+    permission: [
+      'lti.production.project_flocks.list',
+      'lti.production.recording.list',
+    ],
     submenu: [
       {
         text: 'Daftar Flock',
         link: '/production/project-flock',
+        permission: ['lti.production.project_flocks.list'],
       },
       {
         text: 'Recording',
         link: '/production/recording',
+        permission: ['lti.production.recording.list'],
       },
       {
         text: 'Transfer to Laying',
@@ -29,6 +35,7 @@ export const MAIN_DRAWER_LINKS: SidebarMenuItem[] = [
     text: 'Pembelian',
     link: '/purchase',
     icon: 'heroicons-outline:shopping-cart',
+    permission: ['lti.purchase.list'],
   },
   {
     text: 'Penjualan',
@@ -41,14 +48,16 @@ export const MAIN_DRAWER_LINKS: SidebarMenuItem[] = [
     icon: 'heroicons-outline:banknotes',
   },
   {
-    text: 'Biaya Operasional',
+    text: 'Biaya',
     link: '/expense',
     icon: 'heroicons:wallet',
+    permission: ['lti.expense.list'],
   },
   {
     text: 'Closing',
     link: '/closing',
     icon: 'heroicons-outline:presentation-chart-bar',
+    permission: ['lti.closing.list'],
   },
   {
     text: 'Laporan',
@@ -63,24 +72,36 @@ export const MAIN_DRAWER_LINKS: SidebarMenuItem[] = [
         text: 'Biaya Operasional',
         link: '/report/expense',
       },
+      {
+        text: 'Penjualan',
+        link: '/report/marketing',
+      },
     ],
   },
   {
     text: 'Persediaan',
     link: '/inventory',
     icon: 'heroicons-outline:folder',
+    permission: [
+      'lti.inventory.product_stock.list',
+      'lti.inventory.product_warehouses.list',
+      'lti.inventory.transfer.list',
+    ],
     submenu: [
       {
         text: 'Stok Produk',
         link: '/inventory/product',
+        permission: ['lti.inventory.product_stock.list'],
       },
       {
         text: 'Penyesuaian Stok',
         link: '/inventory/adjustment',
+        permission: ['lti.inventory.product_stock.list'],
       },
       {
         text: 'Transfer Stok',
         link: '/inventory/movement',
+        permission: ['lti.inventory.transfer.list'],
       },
     ],
   },
@@ -88,58 +109,86 @@ export const MAIN_DRAWER_LINKS: SidebarMenuItem[] = [
     text: 'Master Data',
     link: '/master-data',
     icon: 'heroicons-outline:circle-stack',
+    permission: [
+      'lti.master.area.list',
+      'lti.master.banks.list',
+      'lti.master.customer.list',
+      'lti.master.fcr.list',
+      'lti.master.flocks.list',
+      'lti.master.kandangs.list',
+      'lti.master.locations.list',
+      'lti.master.nonstocks.list',
+      'lti.master.product_categories.list',
+      'lti.master.products.list',
+      'lti.master.suppliers.list',
+      'lti.master.uoms.list',
+      'lti.master.warehouses.list',
+    ],
     submenu: [
       {
         text: 'Produk',
         link: '/master-data/product',
+        permission: ['lti.master.products.list'],
       },
       {
         text: 'Kategori Produk',
         link: '/master-data/product-category',
+        permission: ['lti.master.product_categories.list'],
       },
       {
         text: 'Bank',
         link: '/master-data/bank',
+        permission: ['lti.master.banks.list'],
       },
       {
         text: 'Area',
         link: '/master-data/area',
+        permission: ['lti.master.area.list'],
       },
       {
         text: 'Lokasi',
         link: '/master-data/location',
+        permission: ['lti.master.locations.list'],
       },
       {
         text: 'Kandang',
         link: '/master-data/kandang',
+        permission: ['lti.master.kandangs.list'],
       },
       {
         text: 'Warehouse',
         link: '/master-data/warehouse',
+        permission: ['lti.master.warehouses.list'],
       },
       {
         text: 'Customer',
         link: '/master-data/customer',
+        permission: ['lti.master.customer.list'],
       },
       {
         text: 'UOM',
         link: '/master-data/uom',
+        permission: ['lti.master.uoms.list'],
       },
       {
         text: 'Non-Stock',
         link: '/master-data/nonstock',
+        permission: ['lti.master.nonstocks.list'],
       },
       {
         text: 'FCR',
         link: '/master-data/fcr',
+        permission: ['lti.master.fcr.list'],
       },
       {
         text: 'Supplier',
         link: '/master-data/supplier',
+        permission: ['lti.master.suppliers.list'],
       },
       {
         text: 'Flock',
         link: '/master-data/flock',
+        permission: ['lti.master.flocks.list'],
       },
       {
         text: 'Standar Produksi',
@@ -288,3 +337,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/config/route-permission.ts

@@ -0,0 +1,155 @@
+export const ROUTE_PERMISSIONS: Record<string, string[]> = {
+  '/': ['lti.dashboard.list'],
+
+  // Dashboard
+  '/dashboard/': ['lti.dashboard.list'],
+
+  // Production
+  // Production - Project Flock
+  '/production/project-flock/': ['lti.production.project_flocks.list'],
+  '/production/project-flock/add/': ['lti.production.project_flocks.create'],
+  '/production/project-flock/detail/': ['lti.production.project_flocks.detail'],
+  '/production/project-flock/detail/edit/': [
+    'lti.production.project_flocks.update',
+  ],
+  '/production/project-flock/chickin/add/kandang/': [
+    'lti.production.chickins.create',
+  ],
+  '/production/project-flock/closing/': [
+    'lti.production.project_flock_kandangs.closing',
+  ],
+
+  // Production - Recording
+  '/production/recording/': ['lti.production.recording.list'],
+  '/production/recording/add/': ['lti.production.recording.create'],
+  '/production/recording/detail/': ['lti.production.recording.detail'],
+  '/production/recording/detail/edit/': ['lti.production.recording.update'],
+
+  // Production - Transfer to Laying
+  '/production/transfer-to-laying/': ['lti.production.transfer_to_laying.list'],
+  '/production/transfer-to-laying/add/': [
+    'lti.production.transfer_to_laying.create',
+  ],
+  '/production/transfer-to-laying/detail/': [
+    'lti.production.transfer_to_laying.detail',
+  ],
+  '/production/transfer-to-laying/detail/edit/': [
+    'lti.production.transfer_to_laying.update',
+  ],
+
+  // Purchase
+  '/purchase/': ['lti.purchase.list'],
+  '/purchase/add/': ['lti.purchase.create'],
+  '/purchase/detail/': ['lti.purchase.detail'],
+  '/purchase/detail/edit/': ['lti.purchase.update'],
+
+  // Marketing
+  '/marketing/': ['lti.marketing.delivery_order.list'],
+  '/marketing/add/delivery-orders/': ['lti.marketing.delivery_order.create'],
+  '/marketing/add/sales-orders/': ['lti.marketing.sales_order.create'],
+  '/marketing/detail/': ['lti.marketing.delivery_order.detail'],
+  '/marketing/detail/delivery-orders/edit/': [
+    'lti.marketing.delivery_order.update',
+  ],
+  '/marketing/detail/sales-orders/edit/': ['lti.marketing.sales_order.update'],
+
+  // Expense
+  '/expense/': ['lti.expense.list'],
+  '/expense/add/': ['lti.expense.create'],
+  '/expense/detail/': ['lti.expense.detail'],
+  '/expense/detail/edit/': ['lti.expense.update'],
+  '/expense/realization/': ['lti.expense.create.realization'],
+  '/expense/realization/edit/': ['lti.expense.update.realization'],
+
+  // Closing
+  '/closing/': ['lti.closing.list'],
+  '/closing/detail/': ['lti.closing.detail'],
+
+  // Report
+  '/report/logistic-stock/': ['lti.repport.purchasesupplier.list'],
+  '/report/expense/': ['lti.repport.expense.list'],
+  '/report/marketing/': ['lti.repport.delivery.list'],
+
+  // Inventory
+  '/inventory/adjustment/': ['lti.inventory.list'],
+  '/inventory/adjustment/add/': ['lti.inventory.create'],
+  '/inventory/adjustment/detail/': ['lti.inventory.detail'],
+  '/inventory/movement/': ['lti.inventory.transfer.list'],
+  '/inventory/movement/add/': ['lti.inventory.transfer.create'],
+  '/inventory/movement/detail/': ['lti.inventory.transfer.detail'],
+  '/inventory/movement/detail/edit/': ['lti.inventory.transfer.update'],
+  '/inventory/product/': ['lti.inventory.product_stock.list'],
+  '/inventory/product/detail/': ['lti.inventory.product_stock.detail'],
+
+  // Master Data
+  '/master-data/product/': ['lti.master.products.list'],
+  '/master-data/product/add/': ['lti.master.products.create'],
+  '/master-data/product/detail/': ['lti.master.products.detail'],
+  '/master-data/product/detail/edit/': ['lti.master.products.update'],
+
+  '/master-data/product-category/': ['lti.master.product_categories.list'],
+  '/master-data/product-category/add/': [
+    'lti.master.product_categories.create',
+  ],
+  '/master-data/product-category/detail/': [
+    'lti.master.product_categories.detail',
+  ],
+  '/master-data/product-category/detail/edit/': [
+    'lti.master.product_categories.update',
+  ],
+
+  '/master-data/bank/': ['lti.master.banks.list'],
+  '/master-data/bank/add/': ['lti.master.banks.create'],
+  '/master-data/bank/detail/': ['lti.master.banks.detail'],
+  '/master-data/bank/detail/edit/': ['lti.master.banks.update'],
+
+  '/master-data/area/': ['lti.master.area.list'],
+  '/master-data/area/add/': ['lti.master.area.create'],
+  '/master-data/area/detail/': ['lti.master.area.detail'],
+  '/master-data/area/detail/edit/': ['lti.master.area.update'],
+
+  '/master-data/location/': ['lti.master.locations.list'],
+  '/master-data/location/add/': ['lti.master.locations.create'],
+  '/master-data/location/detail/': ['lti.master.locations.detail'],
+  '/master-data/location/detail/edit/': ['lti.master.locations.update'],
+
+  '/master-data/kandang/': ['lti.master.kandangs.list'],
+  '/master-data/kandang/add/': ['lti.master.kandangs.create'],
+  '/master-data/kandang/detail/': ['lti.master.kandangs.detail'],
+  '/master-data/kandang/detail/edit/': ['lti.master.kandangs.update'],
+
+  '/master-data/warehouse/': ['lti.master.warehouses.list'],
+  '/master-data/warehouse/add/': ['lti.master.warehouses.create'],
+  '/master-data/warehouse/detail/': ['lti.master.warehouses.detail'],
+  '/master-data/warehouse/detail/edit/': ['lti.master.warehouses.update'],
+
+  '/master-data/customer/': ['lti.master.customer.list'],
+  '/master-data/customer/add/': ['lti.master.customer.create'],
+  '/master-data/customer/detail/': ['lti.master.customer.detail'],
+  '/master-data/customer/detail/edit/': ['lti.master.customer.update'],
+
+  '/master-data/uom/': ['lti.master.uoms.list'],
+  '/master-data/uom/add/': ['lti.master.uoms.create'],
+  '/master-data/uom/detail/': ['lti.master.uoms.detail'],
+  '/master-data/uom/detail/edit/': ['lti.master.uoms.update'],
+
+  '/master-data/nonstock/': ['lti.master.nonstocks.list'],
+  '/master-data/nonstock/add/': ['lti.master.nonstocks.create'],
+  '/master-data/nonstock/detail/': ['lti.master.nonstocks.detail'],
+  '/master-data/nonstock/detail/edit/': ['lti.master.nonstocks.update'],
+
+  '/master-data/fcr/': ['lti.master.fcr.list'],
+  '/master-data/fcr/add/': ['lti.master.fcr.create'],
+  '/master-data/fcr/detail/': ['lti.master.fcr.detail'],
+  '/master-data/fcr/detail/edit/': ['lti.master.fcr.update'],
+
+  '/master-data/supplier/': ['lti.master.suppliers.list'],
+  '/master-data/supplier/add/': ['lti.master.suppliers.create'],
+  '/master-data/supplier/detail/': ['lti.master.suppliers.detail'],
+  '/master-data/supplier/detail/edit/': ['lti.master.suppliers.update'],
+
+  '/master-data/flock/': ['lti.master.flocks.list'],
+  '/master-data/flock/add/': ['lti.master.flocks.create'],
+  '/master-data/flock/detail/': ['lti.master.flocks.detail'],
+  '/master-data/flock/detail/edit/': ['lti.master.flocks.update'],
+};

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

@@ -9,10 +9,26 @@ import {
   ClosingOutgoingSapronak,
   ClosingOverhead,
   ClosingSapronakCalculation,
+  ClosingProductionData,
+  ClosingHppExpedition,
 } from '@/types/api/closing';
 import { BaseApiResponse } from '@/types/api/api-general';
 import { httpClient, httpClientFetcher } from '@/services/http/client';
 import { ClosingSales } from '@/types/api/closing';
+
+// TODO: delete these dummy data later
+import {
+  dummyGetAllFetcher,
+  dummyGetSingle,
+  dummyGetAllIncomingSapronakFetcher,
+  dummyGetAllOutgoingSapronakFetcher,
+  dummyGetGeneralInfo,
+  dummyGetPerhitunganSapronak,
+  dummyGetOverhead,
+  dummyClosingProductionData,
+} from '@/dummy/closing.dummy';
+import { sleep } from '@/lib/helper';
+
 export class ClosingApiService extends BaseApiService<Closing, null, null> {
   constructor(basePath: string) {
     super(basePath);
@@ -71,6 +87,24 @@ 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> {
@@ -123,6 +157,24 @@ export class ClosingApiService extends BaseApiService<Closing, null, null> {
       return undefined;
     }
   }
+
+  async getHppEkspedisi(
+    id: number
+  ): Promise<BaseApiResponse<ClosingHppExpedition> | undefined> {
+    try {
+      const getHppEkspedisiPath = `${this.basePath}/${id}/expedition-hpp`;
+      const getHppEkspedisiRes =
+        await httpClient<BaseApiResponse<ClosingHppExpedition>>(
+          getHppEkspedisiPath
+        );
+      return getHppEkspedisiRes;
+    } catch (error) {
+      if (axios.isAxiosError<BaseApiResponse<ClosingHppExpedition>>(error)) {
+        return error.response?.data;
+      }
+      return undefined;
+    }
+  }
 }
 
 export const ClosingApi = new ClosingApiService('/closings');

src/services/api/report/logistic-stock.ts

@@ -0,0 +1,54 @@
+import { BaseApiService } from '@/services/api/base';
+import { BaseApiResponse } from '@/types/api/api-general';
+import { LogisticPurchasePerSupplierReport } from '@/types/api/report/logistic-stock';
+
+export class LogisticApiService extends BaseApiService<
+  LogisticPurchasePerSupplierReport,
+  unknown,
+  unknown
+> {
+  constructor(basePath: string) {
+    super(basePath);
+  }
+
+  async getLogisticPurchasePerSupplierReport(
+    area_id?: string,
+    supplier_id?: string,
+    product_id?: string,
+    product_category_id?: string,
+    received_date?: string,
+    po_date?: string,
+    start_date?: string,
+    end_date?: string,
+    sort_by?: string,
+    filter_by?: string,
+    page?: number,
+    limit?: number
+  ): Promise<BaseApiResponse<LogisticPurchasePerSupplierReport> | undefined> {
+    return await this.customRequest<
+      BaseApiResponse<LogisticPurchasePerSupplierReport>
+    >(`purchase-supplier`, {
+      method: 'GET',
+      params: {
+        area_id: area_id,
+        supplier_id: supplier_id,
+        product_id: product_id,
+        product_category_id: product_category_id,
+        received_date: received_date,
+        po_date: po_date,
+        start_date: start_date,
+        end_date: end_date,
+        sort_by: sort_by,
+        filter_by: filter_by,
+        page: page,
+        limit: limit,
+      },
+    });
+  }
+}
+
+export const LogisticApi = new LogisticApiService('reports');
+
+// export const LogisticApi = new LogisticApiService(
+//   'http://localhost:4010/api/reports/logistics'
+// );

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;
@@ -79,6 +106,44 @@ export type ClosingIncomingSapronak = {
 
 export type ClosingOutgoingSapronak = ClosingIncomingSapronak;
 
+export type ClosingProductionData = {
+  purchase: {
+    initial_population: number;
+    claim_culling: number;
+    final_population: number;
+    feed_in: number;
+    feed_used: number;
+    feed_used_per_head: number;
+  };
+
+  sales: {
+    chicken: {
+      sales_population: number;
+      sales_weight: number;
+      average_weight: number;
+      chicken_average_selling_price: number;
+    };
+    egg?: {
+      egg_pieces: number;
+      egg_mass_kg: number;
+      average_egg_weight_kg: number;
+      egg_average_selling_price: number;
+    };
+  };
+
+  performance: {
+    depletion: number;
+    age_day: number;
+    mortality_std: number;
+    mortality_act: number;
+    deff_mortality: number;
+    fcr_std: number;
+    fcr_act: number;
+    deff_fcr: number;
+    awg: number;
+  };
+};
+
 // ====== PERHITUNGAN SAPRONAK ======
 
 export type RowSapronakCalculation = {
@@ -141,6 +206,7 @@ export type OverheadTotal = {
   actual_total_amount: number;
   cost_per_bird: number;
 };
+
 export type ClosingSales = BaseMetadata & BaseClosingSales;
 
 // ====== FINANCE ======
@@ -217,3 +283,16 @@ export interface DataSummarySubTotal {
   rp_per_kg: number;
   amount: number;
 }
+
+export type BaseExpeditionCost = {
+  id: number;
+  expedition_vendor_name: string;
+  hpp_amount: number;
+};
+
+export type BaseHppExpedition = {
+  expedition_costs: BaseExpeditionCost[];
+  total_hpp_amount: number;
+};
+
+export type ClosingHppExpedition = BaseMetadata & BaseHppExpedition;

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/logistic-stock.d.ts

@@ -0,0 +1,35 @@
+import { BaseMetadata } from '@/types/api/api-general';
+import { Supplier } from '@/types/api/supplier/supplier';
+import { Product } from '@/types/api/product/product';
+import { Warehouse } from '@/types/api/warehouse/warehouse';
+
+export type LogisticPurchasePerSupplierReportRow = {
+  receive_date: string;
+  po_date: string;
+  po_number: string;
+  product: Product;
+  warehouse: Warehouse;
+  qty: number;
+  unit_price: number;
+  purchase_value: number;
+  transport_unit_price: number;
+  transport_value: number;
+  total_amount: number;
+  expedition: string;
+  delivery_number: string;
+};
+
+export type LogisticPurchasePerSupplierSummary = {
+  total_qty: number;
+  total_unit_price: number;
+  total_purchase_value: number;
+  total_transport_unit_price: number;
+  total_transport_value: number;
+  total_amount: number;
+};
+
+export type LogisticPurchasePerSupplierReport = BaseMetadata & {
+  supplier: Supplier;
+  rows: LogisticPurchasePerSupplierReportRow[];
+  summary: LogisticPurchasePerSupplierSummary;
+};

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