Update Login

Report Sales Order
Report Sales Product Category
2025-09-26 13:47:50 +07:00 · 2025-09-26 13:47:04 +07:00 · 2025-09-26 13:39:18 +07:00 · 2025-09-26 13:29:17 +07:00 · 2025-09-26 13:11:26 +07:00 · 2025-09-26 13:02:36 +07:00
53 changed files with 8986 additions and 1235 deletions
@@ -39,3 +39,5 @@ next-env.d.ts
 # icon generated file
 src/assets/iconify-icons/generated-icons.js
 src/assets/iconify-icons/generated-icons.css
+
+*.backup
@@ -52,8 +52,10 @@
        "emoji-mart": "5.6.0",
        "fs-extra": "11.2.0",
        "html2canvas": "^1.4.1",
+        "html2pdf.js": "^0.12.1",
        "input-otp": "1.4.1",
-        "jspdf": "^3.0.1",
+        "jspdf": "^3.0.3",
+        "jspdf-autotable": "^5.0.2",
        "keen-slider": "6.8.6",
        "lucide-react": "^0.544.0",
        "mapbox-gl": "3.9.0",
@@ -74,7 +76,8 @@
        "react-use": "17.6.0",
        "recharts": "2.15.0",
        "use-debounce": "^10.0.5",
-        "valibot": "0.42.1"
+        "valibot": "0.42.1",
+        "xlsx": "^0.18.5"
      },
      "devDependencies": {
        "@iconify/json": "2.2.286",
@@ -82,6 +85,7 @@
        "@iconify/types": "2.0.0",
        "@iconify/utils": "2.2.1",
        "@types/fs-extra": "^11.0.4",
+        "@types/jspdf": "^1.3.3",
        "@types/mapbox-gl": "^3.4.1",
        "@types/negotiator": "^0.6.3",
        "@types/node": "^22.10.2",
@@ -3507,6 +3511,13 @@
        "@types/node": "*"
      }
    },
+    "node_modules/@types/jspdf": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/@types/jspdf/-/jspdf-1.3.3.tgz",
+      "integrity": "sha512-DqwyAKpVuv+7DniCp2Deq1xGvfdnKSNgl9Agun2w6dFvR5UKamiv4VfYUgcypd8S9ojUyARFIlZqBrYrBMQlew==",
+      "dev": true,
+      "license": "MIT"
+    },
    "node_modules/@types/linkify-it": {
      "version": "5.0.0",
      "resolved": "https://registry.npmjs.org/@types/linkify-it/-/linkify-it-5.0.0.tgz",
@@ -3572,6 +3583,12 @@
        "undici-types": "~6.21.0"
      }
    },
+    "node_modules/@types/pako": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/@types/pako/-/pako-2.0.4.tgz",
+      "integrity": "sha512-VWDCbrLeVXJM9fihYodcLiIv0ku+AlOa/TQ1SvYOaBuyrSKgEcro95LJyIsJ4vSo6BXIxOKxiJAat04CmST9Fw==",
+      "license": "MIT"
+    },
    "node_modules/@types/parse-json": {
      "version": "4.0.2",
      "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.2.tgz",
@@ -3936,6 +3953,15 @@
        "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
      }
    },
+    "node_modules/adler-32": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/adler-32/-/adler-32-1.3.1.tgz",
+      "integrity": "sha512-ynZ4w/nUUv5rrsR8UUGoe1VC9hZj6V5hU9Qw1HlMDJGEJw5S7TfTErWTjMys6M7vr0YWcPqs3qAr4ss0nDfP+A==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
    "node_modules/ajv": {
      "version": "6.12.6",
      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
@@ -4271,18 +4297,6 @@
      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
      "license": "MIT"
    },
-    "node_modules/atob": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/atob/-/atob-2.1.2.tgz",
-      "integrity": "sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==",
-      "license": "(MIT OR Apache-2.0)",
-      "bin": {
-        "atob": "bin/atob.js"
-      },
-      "engines": {
-        "node": ">= 4.5.0"
-      }
-    },
    "node_modules/attr-accept": {
      "version": "2.2.5",
      "resolved": "https://registry.npmjs.org/attr-accept/-/attr-accept-2.2.5.tgz",
@@ -4500,18 +4514,6 @@
        "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
      }
    },
-    "node_modules/btoa": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/btoa/-/btoa-1.2.1.tgz",
-      "integrity": "sha512-SB4/MIGlsiVkMcHmT+pSmIPoNDoHg+7cMzmt3Uxt628MTz2487DKSqK/fuhFBrkuqrYv5UCEnACpF4dTFNKc/g==",
-      "license": "(MIT OR Apache-2.0)",
-      "bin": {
-        "btoa": "bin/btoa.js"
-      },
-      "engines": {
-        "node": ">= 0.4.0"
-      }
-    },
    "node_modules/buffer-crc32": {
      "version": "0.2.13",
      "resolved": "https://registry.npmjs.org/buffer-crc32/-/buffer-crc32-0.2.13.tgz",
@@ -4660,6 +4662,19 @@
        "node": ">=10.0.0"
      }
    },
+    "node_modules/cfb": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/cfb/-/cfb-1.2.2.tgz",
+      "integrity": "sha512-KfdUZsSOw19/ObEWasvBP/Ac4reZvAGauZhs6S/gqNhXhI7cKwvlH7ulj+dOEYnca4bm4SGo8C1bTAQvnTjgQA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "adler-32": "~1.3.0",
+        "crc-32": "~1.2.0"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
    "node_modules/chalk": {
      "version": "4.1.2",
      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
@@ -4812,6 +4827,15 @@
        "react-dom": "^18 || ^19 || ^19.0.0-rc"
      }
    },
+    "node_modules/codepage": {
+      "version": "1.15.0",
+      "resolved": "https://registry.npmjs.org/codepage/-/codepage-1.15.0.tgz",
+      "integrity": "sha512-3g6NUTPd/YtuuGrhMnOMRjFc+LJw/bnMp3+0r/Wcz3IXUuCosKRJvMphm5+Q+bvTVGcJJuRvVLuYba+WojaFaA==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
    "node_modules/color": {
      "version": "4.2.3",
      "resolved": "https://registry.npmjs.org/color/-/color-4.2.3.tgz",
@@ -4953,6 +4977,18 @@
        "node": ">=10"
      }
    },
+    "node_modules/crc-32": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/crc-32/-/crc-32-1.2.2.tgz",
+      "integrity": "sha512-ROmzCKrTnOwybPcJApAA6WBWij23HVfGVNKqqrZpuyZOHqK2CwHSvpGuyt/UNNvaIjEd8X5IFGp4Mh+Ie1IHJQ==",
+      "license": "Apache-2.0",
+      "bin": {
+        "crc32": "bin/crc32.njs"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
    "node_modules/crelt": {
      "version": "1.0.6",
      "resolved": "https://registry.npmjs.org/crelt/-/crelt-1.0.6.tgz",
@@ -6598,6 +6634,17 @@
      "dev": true,
      "license": "MIT"
    },
+    "node_modules/fast-png": {
+      "version": "6.4.0",
+      "resolved": "https://registry.npmjs.org/fast-png/-/fast-png-6.4.0.tgz",
+      "integrity": "sha512-kAqZq1TlgBjZcLr5mcN6NP5Rv4V2f22z00c3g8vRrwkcqjerx7BEhPbOnWCPqaHUl2XWQBJQvOT/FQhdMT7X/Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/pako": "^2.0.3",
+        "iobuffer": "^5.3.2",
+        "pako": "^2.1.0"
+      }
+    },
    "node_modules/fast-shallow-equal": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/fast-shallow-equal/-/fast-shallow-equal-1.0.0.tgz",
@@ -6877,6 +6924,15 @@
        "node": ">= 6"
      }
    },
+    "node_modules/frac": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/frac/-/frac-1.1.2.tgz",
+      "integrity": "sha512-w/XBfkibaTl3YDqASwfDUqkna4Z2p9cFSr1aHDt0WoMTECnRfBOv2WArlZILlqgWlmdIlALXGpM2AOhEk5W3IA==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
    "node_modules/fraction.js": {
      "version": "4.3.7",
      "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz",
@@ -7456,6 +7512,16 @@
        "node": ">=8.0.0"
      }
    },
+    "node_modules/html2pdf.js": {
+      "version": "0.12.1",
+      "resolved": "https://registry.npmjs.org/html2pdf.js/-/html2pdf.js-0.12.1.tgz",
+      "integrity": "sha512-3rBWQ96H5oOU9jtoz3MnE/epGi27ig9h8aonBk4JTpvUERM3lMRxhIRckhJZEi4wE0YfRINoYOIDY0hLY0CHgQ==",
+      "license": "MIT",
+      "dependencies": {
+        "html2canvas": "^1.0.0",
+        "jspdf": "^3.0.0"
+      }
+    },
    "node_modules/htmlparser2": {
      "version": "9.1.0",
      "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-9.1.0.tgz",
@@ -7630,6 +7696,12 @@
        "node": ">=12"
      }
    },
+    "node_modules/iobuffer": {
+      "version": "5.4.0",
+      "resolved": "https://registry.npmjs.org/iobuffer/-/iobuffer-5.4.0.tgz",
+      "integrity": "sha512-DRebOWuqDvxunfkNJAlc3IzWIPD5xVxwUNbHr7xKB8E6aLJxIPfNX3CoMJghcFjpv6RWQsrcJbghtEwSPoJqMA==",
+      "license": "MIT"
+    },
    "node_modules/is-array-buffer": {
      "version": "3.0.5",
      "resolved": "https://registry.npmjs.org/is-array-buffer/-/is-array-buffer-3.0.5.tgz",
@@ -8251,14 +8323,13 @@
      }
    },
    "node_modules/jspdf": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/jspdf/-/jspdf-3.0.1.tgz",
-      "integrity": "sha512-qaGIxqxetdoNnFQQXxTKUD9/Z7AloLaw94fFsOiJMxbfYdBbrBuhWmbzI8TVjrw7s3jBY1PFHofBKMV/wZPapg==",
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/jspdf/-/jspdf-3.0.3.tgz",
+      "integrity": "sha512-eURjAyz5iX1H8BOYAfzvdPfIKK53V7mCpBTe7Kb16PaM8JSXEcUQNBQaiWMI8wY5RvNOPj4GccMjTlfwRBd+oQ==",
      "license": "MIT",
      "dependencies": {
-        "@babel/runtime": "^7.26.7",
-        "atob": "^2.1.2",
-        "btoa": "^1.2.1",
+        "@babel/runtime": "^7.26.9",
+        "fast-png": "^6.2.0",
        "fflate": "^0.8.1"
      },
      "optionalDependencies": {
@@ -8268,6 +8339,15 @@
        "html2canvas": "^1.0.0-rc.5"
      }
    },
+    "node_modules/jspdf-autotable": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/jspdf-autotable/-/jspdf-autotable-5.0.2.tgz",
+      "integrity": "sha512-YNKeB7qmx3pxOLcNeoqAv3qTS7KuvVwkFe5AduCawpop3NOkBUtqDToxNc225MlNecxT4kP2Zy3z/y/yvGdXUQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "jspdf": "^2 || ^3"
+      }
+    },
    "node_modules/jsx-ast-utils": {
      "version": "3.3.5",
      "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.3.5.tgz",
@@ -9143,6 +9223,12 @@
        "quansync": "^0.2.7"
      }
    },
+    "node_modules/pako": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/pako/-/pako-2.1.0.tgz",
+      "integrity": "sha512-w+eufiZ1WuJYgPXbV/PO3NCMEc3xqylkKHzp8bxp1uW4qaSNQUkwmLLEc3kKsfz8lpV1F8Ht3U1Cm+9Srog2ug==",
+      "license": "(MIT AND Zlib)"
+    },
    "node_modules/parent-module": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
@@ -11093,6 +11179,18 @@
        "node": ">=0.10.0"
      }
    },
+    "node_modules/ssf": {
+      "version": "0.11.2",
+      "resolved": "https://registry.npmjs.org/ssf/-/ssf-0.11.2.tgz",
+      "integrity": "sha512-+idbmIXoYET47hH+d7dfm2epdOMUDjqcB4648sTZ+t2JwoyBFL/insLfB/racrDmsKB3diwsDA696pZMieAC5g==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "frac": "~1.1.2"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
    "node_modules/stable-hash": {
      "version": "0.0.4",
      "resolved": "https://registry.npmjs.org/stable-hash/-/stable-hash-0.0.4.tgz",
@@ -13045,6 +13143,24 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
+    "node_modules/wmf": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/wmf/-/wmf-1.0.2.tgz",
+      "integrity": "sha512-/p9K7bEh0Dj6WbXg4JG0xvLQmIadrner1bi45VMJTfnbVHsc7yIajZyoSoK60/dtVBs12Fm6WkUI5/3WAVsNMw==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
+    "node_modules/word": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/word/-/word-0.3.0.tgz",
+      "integrity": "sha512-OELeY0Q61OXpdUfTp+oweA/vtLVg5VDOXh+3he3PNzLGG/y0oylSOC1xRVj0+l4vQ3tj/bB1HVHv1ocXkQceFA==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
    "node_modules/word-wrap": {
      "version": "1.2.5",
      "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.5.tgz",
@@ -13177,6 +13293,27 @@
        "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
      }
    },
+    "node_modules/xlsx": {
+      "version": "0.18.5",
+      "resolved": "https://registry.npmjs.org/xlsx/-/xlsx-0.18.5.tgz",
+      "integrity": "sha512-dmg3LCjBPHZnQp5/F/+nnTa+miPJxUXB6vtk42YjBBKayDNagxGEeIdWApkYPOf3Z3pm3k62Knjzp7lMeTEtFQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "adler-32": "~1.3.0",
+        "cfb": "~1.2.1",
+        "codepage": "~1.15.0",
+        "crc-32": "~1.2.1",
+        "ssf": "~0.11.2",
+        "wmf": "~1.0.1",
+        "word": "~0.3.0"
+      },
+      "bin": {
+        "xlsx": "bin/xlsx.njs"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
    "node_modules/yallist": {
      "version": "4.0.0",
      "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
@@ -58,8 +58,10 @@
    "emoji-mart": "5.6.0",
    "fs-extra": "11.2.0",
    "html2canvas": "^1.4.1",
+    "html2pdf.js": "^0.12.1",
    "input-otp": "1.4.1",
-    "jspdf": "^3.0.1",
+    "jspdf": "^3.0.3",
+    "jspdf-autotable": "^5.0.2",
    "keen-slider": "6.8.6",
    "lucide-react": "^0.544.0",
    "mapbox-gl": "3.9.0",
@@ -80,7 +82,8 @@
    "react-use": "17.6.0",
    "recharts": "2.15.0",
    "use-debounce": "^10.0.5",
-    "valibot": "0.42.1"
+    "valibot": "0.42.1",
+    "xlsx": "^0.18.5"
  },
  "devDependencies": {
    "@iconify/json": "2.2.286",
@@ -88,6 +91,7 @@
    "@iconify/types": "2.0.0",
    "@iconify/utils": "2.2.1",
    "@types/fs-extra": "^11.0.4",
+    "@types/jspdf": "^1.3.3",
    "@types/mapbox-gl": "^3.4.1",
    "@types/negotiator": "^0.6.3",
    "@types/node": "^22.10.2",
@@ -13,10 +13,11 @@ export const metadata: Metadata = {
 }

 const LoginPage = async () => {
-  // Vars
-  const mode = await getServerMode()
-
-  return <Login mode={mode} />
+  return (
+    <div className='flex flex-col justify-center items-center min-bs-[100dvh] p-6'>
+      <Login />
+    </div>
+  )
 }

 export default LoginPage
@@ -0,0 +1,7 @@
+import CampaignDetailContent from '@/views/apps/marketing/campaign/detail'
+
+const CampaignDetailPage = () => {
+  return <CampaignDetailContent />
+}
+
+export default CampaignDetailPage
@@ -0,0 +1,18 @@
+import ReportTitle from '@/components/report/ReportTitle'
+import ReportPaymentMethodContent from '@/views/apps/report/financial/payment-method-report/ReportPaymentMethodContent'
+import Grid from '@mui/material/Grid2'
+
+const SalesProductReportPage = () => {
+  return (
+    <Grid container spacing={6}>
+      <Grid size={{ xs: 12 }}>
+        <ReportTitle title='Laporan Metode Pembayaran' />
+      </Grid>
+      <Grid size={{ xs: 12 }}>
+        <ReportPaymentMethodContent />
+      </Grid>
+    </Grid>
+  )
+}
+
+export default SalesProductReportPage
@@ -1,22 +1,72 @@
+'use client'
+
 import ReportTitle from '@/components/report/ReportTitle'
 import ReportProfitLossCard from '@/views/apps/report/profit-loss/ReportProfitLossCard'
 import ReportProfitLossContent from '@/views/apps/report/profit-loss/ReportProfitLossContent'
 import Grid from '@mui/material/Grid2'
+import { CircularProgress, Box } from '@mui/material'
+import { useState } from 'react'
+import { useProfitLossAnalytics } from '@/services/queries/analytics'
+import { formatDateDDMMYYYY } from '@/utils/transform'
+import Loading from '@/components/layout/shared/Loading'
+
+const ProfitLossPage = () => {
+  const today = new Date()
+  const monthAgo = new Date()
+  monthAgo.setDate(today.getDate() - 30)
+  const [startDate, setStartDate] = useState<Date | null>(monthAgo)
+  const [endDate, setEndDate] = useState<Date | null>(today)
+
+  // Single API call at parent level
+  const {
+    data: profitData,
+    isLoading,
+    error
+  } = useProfitLossAnalytics({
+    date_from: formatDateDDMMYYYY(startDate!),
+    date_to: formatDateDDMMYYYY(endDate!)
+  })
+
+  // Handle loading state
+  if (isLoading) {
+    return <Loading />
+  }
+
+  // Handle error state
+  if (error) {
+    return (
+      <Grid container spacing={6}>
+        <Grid size={{ xs: 12 }}>
+          <ReportTitle title='Laba Rugi' />
+        </Grid>
+        <Grid size={{ xs: 12 }}>
+          <Box display='flex' justifyContent='center' alignItems='center' minHeight={400}>
+            <span>Error loading data: {error.message}</span>
+          </Box>
+        </Grid>
+      </Grid>
+    )
+  }

-const ProfiltLossPage = () => {
  return (
    <Grid container spacing={6}>
      <Grid size={{ xs: 12 }}>
        <ReportTitle title='Laba Rugi' />
      </Grid>
      <Grid size={{ xs: 12 }}>
-        <ReportProfitLossCard />
+        <ReportProfitLossCard profitData={profitData} />
      </Grid>
      <Grid size={{ xs: 12 }}>
-        <ReportProfitLossContent />
+        <ReportProfitLossContent
+          profitData={profitData}
+          startDate={startDate}
+          endDate={endDate}
+          onStartDateChange={setStartDate}
+          onEndDateChange={setEndDate}
+        />
      </Grid>
    </Grid>
  )
 }

-export default ProfiltLossPage
+export default ProfitLossPage
@@ -0,0 +1,19 @@
+import ReportTitle from '@/components/report/ReportTitle'
+import ReportSalesOrderContent from '@/views/apps/report/sales/sales-order/ReportSalesOrderContent'
+import Grid from '@mui/material/Grid2'
+
+const SalesOrderReportPage = () => {
+  return (
+    <Grid container spacing={6}>
+      <Grid size={{ xs: 12 }}>
+        <ReportTitle title='Laporan Penjualan Pesanan' />
+      </Grid>
+      <Grid size={{ xs: 12 }}>
+        <ReportSalesOrderContent />
+      </Grid>
+      z
+    </Grid>
+  )
+}
+
+export default SalesOrderReportPage
@@ -0,0 +1,18 @@
+import ReportTitle from '@/components/report/ReportTitle'
+import ReportSalesProductCategoryContent from '@/views/apps/report/sales/sales-product-category/ReportSalesProductCategoryReport'
+import Grid from '@mui/material/Grid2'
+
+const SalesProductCategoryReportPage = () => {
+  return (
+    <Grid container spacing={6}>
+      <Grid size={{ xs: 12 }}>
+        <ReportTitle title='Laporan Penjualan per Kategori Produk' />
+      </Grid>
+      <Grid size={{ xs: 12 }}>
+        <ReportSalesProductCategoryContent />
+      </Grid>
+    </Grid>
+  )
+}
+
+export default SalesProductCategoryReportPage
@@ -0,0 +1,18 @@
+import ReportTitle from '@/components/report/ReportTitle'
+import ReportSalesPerProductContent from '@/views/apps/report/sales/sales-per-product/ReportSalesPerProductContent'
+import Grid from '@mui/material/Grid2'
+
+const SalesProductReportPage = () => {
+  return (
+    <Grid container spacing={6}>
+      <Grid size={{ xs: 12 }}>
+        <ReportTitle title='Laporan Penjualan per Produk' />
+      </Grid>
+      <Grid size={{ xs: 12 }}>
+        <ReportSalesPerProductContent />
+      </Grid>
+    </Grid>
+  )
+}
+
+export default SalesProductReportPage
@@ -0,0 +1,18 @@
+import ReportTitle from '@/components/report/ReportTitle'
+import ReportSalesContent from '@/views/apps/report/sales/sales-report/ReportSalesContent'
+import Grid from '@mui/material/Grid2'
+
+const SalesReportPage = () => {
+  return (
+    <Grid container spacing={6}>
+      <Grid size={{ xs: 12 }}>
+        <ReportTitle title='Laporan Penjualan' />
+      </Grid>
+      <Grid size={{ xs: 12 }}>
+        <ReportSalesContent />
+      </Grid>
+    </Grid>
+  )
+}
+
+export default SalesReportPage
@@ -23,6 +23,7 @@ const DailyPOSReport = () => {
    endDate: new Date()
  })
  const [filterType, setFilterType] = useState<'single' | 'range'>('single') // 'single' or 'range'
+  const [isGeneratingPDF, setIsGeneratingPDF] = useState(false)

  // Use selectedDate for single date filter, or dateRange for range filter
  const getDateParams = () => {
@@ -54,14 +55,6 @@ const DailyPOSReport = () => {
    totalOrders: products?.data?.reduce((sum, item) => sum + (item?.order_count || 0), 0) || 0
  }

-  // Calculate profit loss product summary
-  const profitLossProductSummary = {
-    totalRevenue: profitLoss?.product_data?.reduce((sum, item) => sum + (item?.revenue || 0), 0) || 0,
-    totalCost: profitLoss?.product_data?.reduce((sum, item) => sum + (item?.cost || 0), 0) || 0,
-    totalGrossProfit: profitLoss?.product_data?.reduce((sum, item) => sum + (item?.gross_profit || 0), 0) || 0,
-    totalQuantity: profitLoss?.product_data?.reduce((sum, item) => sum + (item?.quantity_sold || 0), 0) || 0
-  }
-
  const categorySummary = {
    totalRevenue: category?.data?.reduce((sum, item) => sum + (item?.total_revenue || 0), 0) || 0,
    orderCount: category?.data?.reduce((sum, item) => sum + (item?.order_count || 0), 0) || 0,
@@ -101,84 +94,216 @@ const DailyPOSReport = () => {
  const handleGeneratePDF = async () => {
    const reportElement = reportRef.current

+    if (!reportElement) {
+      alert('Report element tidak ditemukan')
+      return
+    }
+
+    // Set loading state
+    setIsGeneratingPDF(true)
+
    try {
      // Import jsPDF dan html2canvas
      const jsPDF = (await import('jspdf')).default
      const html2canvas = (await import('html2canvas')).default

-      // Optimized canvas capture dengan scale lebih rendah
-      const canvas = await html2canvas(reportElement!, {
-        scale: 1.5, // Reduced from 2 to 1.5
+      // Pastikan element terlihat penuh
+      const originalOverflow = reportElement.style.overflow
+      reportElement.style.overflow = 'visible'
+
+      // Wait untuk memastikan rendering selesai
+      await new Promise(resolve => setTimeout(resolve, 300))
+
+      console.log('Starting PDF generation...')
+
+      // Update loading message
+      console.log('Capturing content...')
+
+      // Capture canvas dengan setting yang optimal
+      const canvas = await html2canvas(reportElement, {
+        scale: 1.5,
        useCORS: true,
        allowTaint: true,
        backgroundColor: '#ffffff',
-        logging: false, // Disable logging for performance
-        removeContainer: true, // Clean up after capture
-        imageTimeout: 0, // No timeout for image loading
-        height: reportElement!.scrollHeight,
-        width: reportElement!.scrollWidth
+        logging: false,
+        removeContainer: true,
+        imageTimeout: 0,
+        height: reportElement.scrollHeight,
+        width: reportElement.scrollWidth,
+        scrollX: 0,
+        scrollY: 0,
+        // Pastikan capture semua content
+        windowWidth: Math.max(reportElement.scrollWidth, window.innerWidth),
+        windowHeight: Math.max(reportElement.scrollHeight, window.innerHeight)
      })

-      // Compress canvas using JPEG with quality setting
-      const imgData = canvas.toDataURL('image/jpeg', 0.85) // JPEG with 85% quality instead of PNG
+      console.log('Canvas captured:', canvas.width, 'x', canvas.height)
+      console.log('Generating PDF pages...')

-      // Create PDF with compression
+      // Restore overflow
+      reportElement.style.overflow = originalOverflow
+
+      // Create PDF
      const pdf = new jsPDF({
        orientation: 'portrait',
        unit: 'mm',
        format: 'a4',
-        compress: true // Enable built-in compression
+        compress: true
      })

-      const imgWidth = 210
-      const pageHeight = 295
-      const imgHeight = (canvas.height * imgWidth) / canvas.width
-      let heightLeft = imgHeight
-      let position = 0
+      // A4 dimensions
+      const pdfWidth = 210
+      const pdfHeight = 297
+      const margin = 5 // Small margin to prevent cutoff

-      // Add first page with compressed image
-      pdf.addImage(imgData, 'JPEG', 0, position, imgWidth, imgHeight, '', 'FAST') // Use FAST compression
-      heightLeft -= pageHeight
+      // Calculate scaling
+      const availableWidth = pdfWidth - 2 * margin
+      const availableHeight = pdfHeight - 2 * margin

-      // Handle multiple pages if needed
-      while (heightLeft >= 0) {
-        position = heightLeft - imgHeight
-        pdf.addPage()
-        pdf.addImage(imgData, 'JPEG', 0, position, imgWidth, imgHeight, '', 'FAST')
-        heightLeft -= pageHeight
+      const imgWidth = availableWidth
+      const imgHeight = (canvas.height * availableWidth) / canvas.width
+
+      console.log('PDF dimensions - Canvas:', canvas.width, 'x', canvas.height)
+      console.log('PDF dimensions - Image:', imgWidth, 'x', imgHeight)
+      console.log('Available height per page:', availableHeight)
+
+      // Split content across pages
+      let yPosition = margin
+      let sourceY = 0
+      let pageCount = 1
+      let remainingHeight = imgHeight
+
+      while (remainingHeight > 0) {
+        console.log(`Processing page ${pageCount}, remaining height: ${remainingHeight}`)
+
+        if (pageCount > 1) {
+          pdf.addPage()
+          yPosition = margin
+        }
+
+        // Calculate how much content fits on this page
+        const heightForThisPage = Math.min(remainingHeight, availableHeight)
+
+        // Calculate source dimensions for cropping
+        const sourceHeight = (heightForThisPage * canvas.height) / imgHeight
+
+        // Create temporary canvas for this page portion
+        const tempCanvas = document.createElement('canvas')
+        const tempCtx = tempCanvas.getContext('2d')
+
+        if (!tempCtx) {
+          throw new Error('Unable to get 2D context from canvas')
+        }
+
+        tempCanvas.width = canvas.width
+        tempCanvas.height = sourceHeight
+
+        // Draw the portion we need
+        tempCtx.drawImage(
+          canvas,
+          0,
+          sourceY,
+          canvas.width,
+          sourceHeight, // Source rectangle
+          0,
+          0,
+          canvas.width,
+          sourceHeight // Destination rectangle
+        )
+
+        // Convert to image data
+        const pageImageData = tempCanvas.toDataURL('image/jpeg', 0.9)
+
+        // Add to PDF
+        pdf.addImage(pageImageData, 'JPEG', margin, yPosition, imgWidth, heightForThisPage)
+
+        // Update for next page
+        sourceY += sourceHeight
+        remainingHeight -= heightForThisPage
+        pageCount++
+
+        // Safety check to prevent infinite loop
+        if (pageCount > 20) {
+          console.warn('Too many pages, breaking loop')
+          break
+        }
      }

-      // Additional compression options
+      console.log(`Generated ${pageCount - 1} pages`)
+      console.log('Finalizing PDF...')
+
+      // Add metadata
      pdf.setProperties({
-        title: `${getReportTitle()}`,
-        subject: 'Daily Transaction Report',
+        title: getReportTitle(),
+        subject: 'Transaction Report',
        author: 'Apskel POS System',
        creator: 'Apskel'
      })

-      // Save with optimized settings
+      // Generate filename
      const fileName =
        filterType === 'single'
          ? `laporan-transaksi-${formatDateForInput(selectedDate)}.pdf`
          : `laporan-transaksi-${formatDateForInput(dateRange.startDate)}-to-${formatDateForInput(dateRange.endDate)}.pdf`

-      pdf.save(fileName, {
-        returnPromise: true
-      })
+      console.log('Saving PDF:', fileName)

-      // Clean up canvas to free memory
-      canvas.width = canvas.height = 0
+      // Save PDF
+      pdf.save(fileName)
+
+      console.log('PDF generated successfully!')
    } catch (error) {
      console.error('Error generating PDF:', error)
-      alert('Terjadi kesalahan saat membuat PDF. Pastikan jsPDF dan html2canvas sudah terinstall.')
+      alert(`Terjadi kesalahan saat membuat PDF: ${error}`)
+    } finally {
+      // Reset loading state
+      setIsGeneratingPDF(false)
    }
  }

+  const LoadingOverlay = ({ isVisible, message = 'Generating PDF...' }: { isVisible: boolean; message?: string }) => {
+    if (!isVisible) return null
+
+    return (
+      <div className='fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50 backdrop-blur-sm'>
+        <div className='bg-white rounded-lg shadow-xl p-8 max-w-sm w-full mx-4'>
+          <div className='text-center'>
+            {/* Animated Spinner */}
+            <div className='inline-block animate-spin rounded-full h-12 w-12 border-4 border-gray-200 border-t-purple-600 mb-4'></div>
+
+            {/* Loading Message */}
+            <h3 className='text-lg font-semibold text-gray-800 mb-2'>{message}</h3>
+
+            <p className='text-sm text-gray-600'>Mohon tunggu, proses ini mungkin membutuhkan beberapa detik...</p>
+
+            {/* Progress Steps */}
+            <div className='mt-6 space-y-2'>
+              <div className='flex items-center text-xs text-gray-500'>
+                <div className='w-2 h-2 bg-green-500 rounded-full mr-2 flex-shrink-0'></div>
+                <span>Capturing report content</span>
+              </div>
+              <div className='flex items-center text-xs text-gray-500'>
+                <div className='w-2 h-2 bg-blue-500 rounded-full mr-2 flex-shrink-0 animate-pulse'></div>
+                <span>Processing pages</span>
+              </div>
+              <div className='flex items-center text-xs text-gray-500'>
+                <div className='w-2 h-2 bg-gray-300 rounded-full mr-2 flex-shrink-0'></div>
+                <span>Finalizing PDF</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    )
+  }
+
  return (
    <div className='min-h-screen'>
+      <LoadingOverlay isVisible={isGeneratingPDF} message='Membuat PDF Laporan...' />
      {/* Control Panel */}
      <ReportGeneratorComponent
        // Props wajib
+        className='min-w-full'
        reportTitle='Laporan Penjualan'
        filterType={filterType}
        selectedDate={selectedDate}
@@ -208,126 +333,62 @@ const DailyPOSReport = () => {
        {/* Performance Summary */}
        <div className='p-8'>
          <h3 className='text-xl font-bold mb-6' style={{ color: '#36175e' }}>
-            1. Ringkasan
+            Ringkasan
          </h3>

-          <div className='grid grid-cols-2 gap-6'>
-            <div className='space-y-4'>
-              <div className='flex justify-between items-center py-2 border-b border-gray-200'>
-                <span className='text-gray-700'>Total Penjualan (termasuk rasik)</span>
-                <span className='font-semibold text-gray-800'>
-                  {formatCurrency(profitLoss?.summary.total_revenue ?? 0)}
-                </span>
-              </div>
-              <div className='flex justify-between items-center py-2 border-b border-gray-200'>
-                <span className='text-gray-700'>Total Terjual</span>
-                <span className='font-semibold text-gray-800'>{productSummary.totalQuantitySold}</span>
-              </div>
-              <div className='flex justify-between items-center py-2 border-b border-gray-200'>
-                <span className='text-gray-700'>HPP</span>
-                <span className='font-semibold text-gray-800'>
-                  {formatCurrency(profitLoss?.summary.total_cost ?? 0)} |{' '}
-                  {(((profitLoss?.summary.total_cost ?? 0) / (profitLoss?.summary.total_revenue || 1)) * 100).toFixed(
-                    0
-                  )}
-                  %
-                </span>
-              </div>
-              <div className='flex justify-between items-center py-2 border-b-2 border-gray-300'>
-                <span className='text-lg font-semibold text-green-800'>Laba Kotor</span>
-                <span className='text-lg font-bold text-green-800'>
-                  {formatCurrency(profitLoss?.summary.gross_profit ?? 0)} |{' '}
-                  {(profitLoss?.summary.gross_profit_margin ?? 0).toFixed(0)}%
-                </span>
-              </div>
+          <div className='space-y-4'>
+            <div className='flex justify-between items-center py-2 border-b border-gray-200'>
+              <span className='text-gray-700'>Total Penjualan</span>
+              <span className='font-semibold text-gray-800'>
+                {formatCurrency(profitLoss?.summary.total_revenue ?? 0)}
+              </span>
            </div>
-
-            <div className='space-y-4'>
-              <div className='flex justify-between items-center py-2 border-b border-gray-200'>
-                <span className='text-gray-700'>Biaya lain²</span>
-                <span className='font-semibold text-gray-800'>
-                  {formatCurrency(profitLoss?.summary.total_tax ?? 0)} |{' '}
-                  {(((profitLoss?.summary.total_tax ?? 0) / (profitLoss?.summary.total_revenue || 1)) * 100).toFixed(0)}
-                  %
-                </span>
-              </div>
-              <div className='flex justify-between items-center py-2 border-b-2 border-gray-300'>
-                <span className='text-lg font-bold text-blue-800'>Laba/Rugi</span>
-                <span className='text-lg font-bold text-blue-800'>
-                  {formatCurrency(profitLoss?.summary.net_profit ?? 0)} |{' '}
-                  {(profitLoss?.summary.net_profit_margin ?? 0).toFixed(0)}%
-                </span>
-              </div>
+            <div className='flex justify-between items-center py-2 border-b border-gray-200'>
+              <span className='text-gray-700'>Total Diskon</span>
+              <span className='font-semibold text-gray-800'>
+                {formatCurrency(profitLoss?.summary.total_discount ?? 0)}
+              </span>
+            </div>
+            <div className='flex justify-between items-center py-2 border-b border-gray-200'>
+              <span className='text-gray-700'>Total Pajak</span>
+              <span className='font-semibold text-gray-800'>{formatCurrency(profitLoss?.summary.total_tax ?? 0)}</span>
+            </div>
+            <div className='flex justify-between items-center py-2 border-b border-gray-200'>
+              <span className='text-gray-700 font-bold'>Total</span>
+              <span className='font-bold text-gray-800'>{formatCurrency(profitLoss?.summary.total_revenue ?? 0)}</span>
            </div>
          </div>
        </div>

-        {/* Profit Loss Product Table */}
        <div className='px-8 pb-8'>
-          <h3 className='text-lg font-medium mb-6' style={{ color: '#36175e' }}>
-            Laba Rugi Per Produk
+          <h3 className='text-xl font-bold mb-6' style={{ color: '#36175e' }}>
+            Invoice
          </h3>

-          <div className='bg-gray-50 rounded-lg border border-gray-200 overflow-hidden'>
-            <table className='w-full'>
-              <thead>
-                <tr style={{ backgroundColor: '#36175e' }} className='text-white'>
-                  <th className='text-left p-3 font-semibold'>Produk</th>
-                  <th className='text-center p-3 font-semibold'>Qty</th>
-                  <th className='text-right p-3 font-semibold'>Pendapatan</th>
-                  <th className='text-right p-3 font-semibold'>HPP</th>
-                  <th className='text-right p-3 font-semibold'>Laba Kotor</th>
-                  <th className='text-center p-3 font-semibold'>Margin (%)</th>
-                </tr>
-              </thead>
-              <tbody>
-                {profitLoss?.product_data?.map((item, index) => (
-                  <tr key={index} className={index % 2 === 0 ? 'bg-white' : 'bg-gray-50'}>
-                    <td className='p-3 font-medium text-gray-800'>{item.product_name}</td>
-                    <td className='p-3 text-center text-gray-700'>{item.quantity_sold}</td>
-                    <td className='p-3 text-right font-semibold text-gray-800'>{formatCurrency(item.revenue)}</td>
-                    <td className='p-3 text-right font-semibold text-red-600'>{formatCurrency(item.cost)}</td>
-                    <td className='p-3 text-right font-semibold text-green-600'>{formatCurrency(item.gross_profit)}</td>
-                    <td className='p-3 text-center font-semibold' style={{ color: '#36175e' }}>
-                      {(item.gross_profit_margin ?? 0).toFixed(1)}%
-                    </td>
-                  </tr>
-                )) || []}
-              </tbody>
-              <tfoot>
-                <tr style={{ backgroundColor: '#36175e' }} className='text-white'>
-                  <td className='p-3 font-bold'>TOTAL</td>
-                  <td className='p-3 text-center font-bold'>{profitLossProductSummary.totalQuantity}</td>
-                  <td className='p-3 text-right font-bold'>{formatCurrency(profitLossProductSummary.totalRevenue)}</td>
-                  <td className='p-3 text-right font-bold'>{formatCurrency(profitLossProductSummary.totalCost)}</td>
-                  <td className='p-3 text-right font-bold'>
-                    {formatCurrency(profitLossProductSummary.totalGrossProfit)}
-                  </td>
-                  <td className='p-3 text-center font-bold'>
-                    {profitLossProductSummary.totalRevenue > 0
-                      ? (
-                          (profitLossProductSummary.totalGrossProfit / profitLossProductSummary.totalRevenue) *
-                          100
-                        ).toFixed(1)
-                      : 0}
-                    %
-                  </td>
-                </tr>
-              </tfoot>
-            </table>
+          <div className='space-y-4'>
+            <div className='flex justify-between items-center py-2 border-b border-gray-200'>
+              <span className='text-gray-700'>Total Invoice</span>
+              <span className='font-semibold text-gray-800'>{profitLoss?.summary.total_orders ?? 0}</span>
+            </div>
+            <div className='flex justify-between items-center py-2 border-b border-gray-200'>
+              <span className='text-gray-700'>Rata-rata Tagihan Per Invoice </span>
+              <span className='font-semibold text-gray-800'>
+                {formatCurrency(profitLoss?.summary.average_profit ?? 0)}
+              </span>
+            </div>
          </div>
        </div>

        {/* Payment Method Summary */}
        <div className='px-8 pb-8'>
          <h3 className='text-xl font-bold mb-6' style={{ color: '#36175e' }}>
-            2. Ringkasan Metode Pembayaran
+            Ringkasan Metode Pembayaran
          </h3>

          <div className='bg-gray-50 rounded-lg border border-gray-200 overflow-hidden'>
            <table className='w-full'>
              <thead>
-                <tr style={{ backgroundColor: '#36175e' }} className='text-white'>
+                <tr className='text-gray-800 border-b-2 border-gray-300'>
                  <th className='text-left p-3 font-semibold'>Metode Pembayaran</th>
                  <th className='text-center p-3 font-semibold'>Tipe</th>
                  <th className='text-center p-3 font-semibold'>Jumlah Order</th>
@@ -361,7 +422,7 @@ const DailyPOSReport = () => {
                )) || []}
              </tbody>
              <tfoot>
-                <tr style={{ backgroundColor: '#36175e' }} className='text-white'>
+                <tr className='text-gray-800 border-t-2 border-gray-300'>
                  <td className='p-3 font-bold'>TOTAL</td>
                  <td className='p-3'></td>
                  <td className='p-3 text-center font-bold'>{paymentAnalytics?.summary.total_orders ?? 0}</td>
@@ -378,18 +439,17 @@ const DailyPOSReport = () => {
        {/* Category Summary */}
        <div className='px-8 pb-8'>
          <h3 className='text-xl font-bold mb-6' style={{ color: '#36175e' }}>
-            2. Ringkasan Kategori
+            Ringkasan Kategori
          </h3>

          <div className='bg-gray-50 rounded-lg border border-gray-200 overflow-hidden'>
            <table className='w-full'>
              <thead>
-                <tr style={{ backgroundColor: '#36175e' }} className='text-white'>
+                <tr className='text-gray-800 border-b-2 border-gray-300'>
                  <th className='text-left p-3 font-semibold'>Nama</th>
                  <th className='text-center p-3 font-semibold'>Total Produk</th>
                  <th className='text-center p-3 font-semibold'>Qty</th>
-                  <th className='text-right p-3 font-semibold'>Jumlah Order</th>
-                  <th className='text-center p-3 font-semibold'>Pendapatan</th>
+                  <th className='text-right p-3 font-semibold'>Pendapatan</th>
                </tr>
              </thead>
              <tbody>
@@ -398,7 +458,6 @@ const DailyPOSReport = () => {
                    <td className='p-3 font-medium text-gray-800'>{c.category_name}</td>
                    <td className='p-3 text-center text-gray-700'>{c.product_count}</td>
                    <td className='p-3 text-center text-gray-700'>{c.total_quantity}</td>
-                    <td className='p-3 text-center  text-gray-700'>{c.order_count}</td>
                    <td className='p-3 text-right font-semibold' style={{ color: '#36175e' }}>
                      {formatCurrency(c.total_revenue)}
                    </td>
@@ -406,11 +465,10 @@ const DailyPOSReport = () => {
                )) || []}
              </tbody>
              <tfoot>
-                <tr style={{ backgroundColor: '#36175e' }} className='text-white'>
+                <tr className='text-gray-800 border-t-2 border-gray-300'>
                  <td className='p-3 font-bold'>TOTAL</td>
                  <td className='p-3 text-center font-bold'>{categorySummary?.productCount ?? 0}</td>
                  <td className='p-3 text-center font-bold'>{categorySummary?.totalQuantity ?? 0}</td>
-                  <td className='p-3 text-center font-bold'>{categorySummary?.orderCount ?? 0}</td>
                  <td className='p-3 text-right font-bold'>{formatCurrency(categorySummary?.totalRevenue ?? 0)}</td>
                </tr>
              </tfoot>
@@ -421,49 +479,164 @@ const DailyPOSReport = () => {
        {/* Transaction Summary */}
        <div className='px-8 pb-8'>
          <h3 className='text-xl font-bold mb-6' style={{ color: '#36175e' }}>
-            4. Ringkasan Item
+            Ringkasan Item
          </h3>

-          <div className='bg-gray-50 rounded-lg border border-gray-200 overflow-hidden'>
-            <table className='w-full'>
-              <thead>
-                <tr style={{ backgroundColor: '#36175e' }} className='text-white'>
-                  <th className='text-left p-3 font-semibold'>Produk</th>
-                  <th className='text-left p-3 font-semibold'>Kategori</th>
-                  <th className='text-center p-3 font-semibold'>Qty</th>
-                  <th className='text-right p-3 font-semibold'>Order</th>
-                  <th className='text-right p-3 font-semibold'>Pendapatan</th>
-                  <th className='text-right p-3 font-semibold'>Rata Rata</th>
-                </tr>
-              </thead>
-              <tbody>
-                {products?.data?.map((item, index) => (
-                  <tr key={index} className={index % 2 === 0 ? 'bg-white' : 'bg-gray-50'}>
-                    <td className='p-3 font-medium text-gray-800'>{item.product_name}</td>
-                    <td className='p-3 font-medium text-gray-800'>{item.category_name}</td>
-                    <td className='p-3 text-center text-gray-700'>{item.quantity_sold}</td>
-                    <td className='p-3 text-center text-gray-700'>{item.order_count ?? 0}</td>
-                    <td className='p-3 text-right font-semibold text-gray-800'>{formatCurrency(item.revenue)}</td>
-                    <td className='p-3 text-right font-medium text-gray-800'>{formatCurrency(item.average_price)}</td>
+          <div className='bg-gray-50 rounded-lg border border-gray-200 overflow-visible'>
+            <div className='overflow-x-auto'>
+              <table className='w-full table-fixed' style={{ minWidth: '100%' }}>
+                <colgroup>
+                  <col style={{ width: '40%' }} />
+                  <col style={{ width: '15%' }} />
+                  <col style={{ width: '15%' }} />
+                  <col style={{ width: '15%' }} />
+                  <col style={{ width: '15%' }} />
+                </colgroup>
+                <thead>
+                  <tr className='text-gray-800 border-b-2 border-gray-300'>
+                    <th className='text-left p-3 font-semibold border-r border-gray-300'>Produk</th>
+                    <th className='text-center p-3 font-semibold border-r border-gray-300'>Qty</th>
+                    <th className='text-center p-3 font-semibold border-r border-gray-300'>Order</th>
+                    <th className='text-right p-3 font-semibold border-r border-gray-300'>Pendapatan</th>
+                    <th className='text-right p-3 font-semibold'>Rata Rata</th>
                  </tr>
-                )) || []}
-              </tbody>
-              <tfoot>
-                <tr style={{ backgroundColor: '#36175e' }} className='text-white'>
-                  <td className='p-3 font-bold'>TOTAL</td>
-                  <td className='p-3 text-center'></td>
-                  <td className='p-3 text-center font-bold'>{productSummary.totalQuantitySold ?? 0}</td>
-                  <td className='p-3 text-right font-bold'>{productSummary.totalOrders ?? 0}</td>
-                  <td className='p-3 text-right font-bold'>{formatCurrency(productSummary.totalRevenue ?? 0)}</td>
-                  <td className='p-3 text-right font-bold'></td>
-                </tr>
-              </tfoot>
-            </table>
+                </thead>
+                <tbody>
+                  {(() => {
+                    // Group products by category
+                    const groupedProducts =
+                      products?.data?.reduce(
+                        (acc, item) => {
+                          const categoryName = item.category_name || 'Tidak Berkategori'
+                          if (!acc[categoryName]) {
+                            acc[categoryName] = []
+                          }
+                          acc[categoryName].push(item)
+                          return acc
+                        },
+                        {} as Record<string, any[]>
+                      ) || {}
+
+                    const rows: JSX.Element[] = []
+                    let globalIndex = 0
+
+                    // Sort categories alphabetically
+                    Object.keys(groupedProducts)
+                      .sort()
+                      .forEach(categoryName => {
+                        const categoryProducts = groupedProducts[categoryName]
+
+                        // Category header row
+                        rows.push(
+                          <tr
+                            key={`category-${categoryName}`}
+                            className='bg-gray-100 border-b border-gray-300'
+                            style={{ pageBreakInside: 'avoid' }}
+                          >
+                            <td
+                              className='p-3 font-bold text-gray-900 border-r border-gray-300'
+                              style={{ color: '#36175e' }}
+                            >
+                              {categoryName.toUpperCase()}
+                            </td>
+                            <td className='p-3 border-r border-gray-300'></td>
+                            <td className='p-3 border-r border-gray-300'></td>
+                            <td className='p-3 border-r border-gray-300'></td>
+                            <td className='p-3'></td>
+                          </tr>
+                        )
+
+                        // Product rows for this category
+                        categoryProducts.forEach((item, index) => {
+                          globalIndex++
+                          rows.push(
+                            <tr
+                              key={`product-${item.product_name}-${index}`}
+                              className={`${globalIndex % 2 === 0 ? 'bg-white' : 'bg-gray-50'} border-b border-gray-200`}
+                              style={{ pageBreakInside: 'avoid' }}
+                            >
+                              <td
+                                className='p-3 pl-6 font-medium text-gray-800 border-r border-gray-200'
+                                style={{ wordWrap: 'break-word' }}
+                              >
+                                {item.product_name}
+                              </td>
+                              <td className='p-3 text-center text-gray-700 border-r border-gray-200'>
+                                {item.quantity_sold}
+                              </td>
+                              <td className='p-3 text-center text-gray-700 border-r border-gray-200'>
+                                {item.order_count ?? 0}
+                              </td>
+                              <td className='p-3 text-right font-semibold text-gray-800 border-r border-gray-200'>
+                                {formatCurrency(item.revenue)}
+                              </td>
+                              <td className='p-3 text-right font-medium text-gray-800'>
+                                {formatCurrency(item.average_price)}
+                              </td>
+                            </tr>
+                          )
+                        })
+
+                        // Category subtotal row
+                        const categoryTotalQty = categoryProducts.reduce(
+                          (sum, item) => sum + (item.quantity_sold || 0),
+                          0
+                        )
+                        const categoryTotalOrders = categoryProducts.reduce(
+                          (sum, item) => sum + (item.order_count || 0),
+                          0
+                        )
+                        const categoryTotalRevenue = categoryProducts.reduce(
+                          (sum, item) => sum + (item.revenue || 0),
+                          0
+                        )
+
+                        rows.push(
+                          <tr
+                            key={`subtotal-${categoryName}`}
+                            className='bg-gray-200 border-b-2 border-gray-400'
+                            style={{ pageBreakInside: 'avoid' }}
+                          >
+                            <td className='p-3 pl-6 font-semibold text-gray-800 border-r border-gray-400'>
+                              Subtotal {categoryName}
+                            </td>
+                            <td className='p-3 text-center font-semibold text-gray-800 border-r border-gray-400'>
+                              {categoryTotalQty}
+                            </td>
+                            <td className='p-3 text-center font-semibold text-gray-800 border-r border-gray-400'>
+                              {categoryTotalOrders}
+                            </td>
+                            <td className='p-3 text-right font-semibold text-gray-800 border-r border-gray-400'>
+                              {formatCurrency(categoryTotalRevenue)}
+                            </td>
+                            <td className='p-3'></td>
+                          </tr>
+                        )
+                      })
+
+                    return rows
+                  })()}
+                </tbody>
+                <tfoot>
+                  <tr className='text-gray-800 border-t-2 border-gray-300' style={{ pageBreakInside: 'avoid' }}>
+                    <td className='p-3 font-bold border-r border-gray-300'>TOTAL KESELURUHAN</td>
+                    <td className='p-3 text-center font-bold border-r border-gray-300'>
+                      {productSummary.totalQuantitySold ?? 0}
+                    </td>
+                    <td className='p-3 text-center font-bold border-r border-gray-300'>
+                      {productSummary.totalOrders ?? 0}
+                    </td>
+                    <td className='p-3 text-right font-bold border-r border-gray-300'>
+                      {formatCurrency(productSummary.totalRevenue ?? 0)}
+                    </td>
+                    <td className='p-3'></td>
+                  </tr>
+                </tfoot>
+              </table>
+            </div>
          </div>
        </div>

-        {/* Profit Loss Product Table */}
-
        {/* Footer */}
        <div className='px-8 py-6 border-t-2 border-gray-200 mt-8'>
          <div className='flex justify-between items-center text-sm text-gray-600'>
@@ -31,27 +31,27 @@ import { getLocalizedUrl } from '@/utils/i18n'
 const shortcuts: ShortcutsType[] = [
  {
    url: '/apps/calendar',
-    icon: 'tabler-calendar',
-    title: 'Calendar',
-    subtitle: 'Appointments'
+    icon: 'tabler-box',
+    title: 'Produk',
+    subtitle: 'Kelola Produk'
  },
  {
    url: '/apps/invoice/list',
    icon: 'tabler-file-dollar',
-    title: 'Invoice App',
-    subtitle: 'Manage Accounts'
+    title: 'Pembelian',
+    subtitle: 'Kelola Pembelian'
  },
  {
    url: '/apps/user/list',
    icon: 'tabler-user',
-    title: 'Users',
-    subtitle: 'Manage Users'
+    title: 'Pengguna',
+    subtitle: 'Kelola Pengguna'
  },
  {
-    url: '/apps/roles',
+    url: '/apps/vendor',
    icon: 'tabler-users-group',
-    title: 'Role Management',
-    subtitle: 'Permissions'
+    title: 'Vendor',
+    subtitle: 'Kelola Vendor'
  },
  {
    url: '/',
@@ -60,10 +60,10 @@ const shortcuts: ShortcutsType[] = [
    subtitle: 'User Dashboard'
  },
  {
-    url: '/pages/account-settings',
+    url: '/apps/reports',
    icon: 'tabler-settings',
-    title: 'Settings',
-    subtitle: 'Account Settings'
+    title: 'Laporan',
+    subtitle: 'Lihat Laporan'
  }
 ]

@@ -20,28 +20,28 @@ import { verticalLayoutClasses } from '@layouts/utils/layoutClasses'
 // Vars
 const shortcuts: ShortcutsType[] = [
  {
-    url: '/apps/calendar',
-    icon: 'tabler-calendar',
-    title: 'Calendar',
-    subtitle: 'Appointments'
+    url: '/apps/inventory/products/list',
+    icon: 'tabler-box',
+    title: 'Produk',
+    subtitle: 'Kelola Produk'
  },
  {
-    url: '/apps/invoice/list',
+    url: '/apps/purchase/purchase-orders',
    icon: 'tabler-file-dollar',
-    title: 'Invoice App',
-    subtitle: 'Manage Accounts'
+    title: 'Pembelian',
+    subtitle: 'Kelola Pembelian'
  },
  {
    url: '/apps/user/list',
    icon: 'tabler-user',
-    title: 'Users',
-    subtitle: 'Manage Users'
+    title: 'Pengguna',
+    subtitle: 'Kelola Pengguna'
  },
  {
-    url: '/apps/roles',
+    url: '/apps/vendor/list',
    icon: 'tabler-users-group',
-    title: 'Role Management',
-    subtitle: 'Permissions'
+    title: 'Vendor',
+    subtitle: 'Kelola Vendor'
  },
  {
    url: '/',
@@ -50,10 +50,10 @@ const shortcuts: ShortcutsType[] = [
    subtitle: 'User Dashboard'
  },
  {
-    url: '/pages/account-settings',
+    url: '/apps/report',
    icon: 'tabler-settings',
-    title: 'Settings',
-    subtitle: 'Account Settings'
+    title: 'Laporan',
+    subtitle: 'Lihat Laporan'
  }
 ]

@@ -6,7 +6,8 @@ const getToken = () => {
 }

 export const api = axios.create({
-  baseURL: 'https://enaklo-pos-be.altru.id/api/v1',
+  baseURL: 'https://api-pos.apskel.id/api/v1',
+  // baseURL: 'http://127.0.0.1:4000/api/v1',
  headers: {
    'Content-Type': 'application/json'
  },
@@ -31,7 +32,7 @@ api.interceptors.response.use(
  error => {
    const status = error.response?.status

-    if (status === 401 && !currentPath.endsWith('/login')) {
+    if (status === 401) {
      localStorage.removeItem('user')
      localStorage.removeItem('authToken')
      window.location.href = '/login'
@@ -0,0 +1,251 @@
+import type { PaymentReport } from '@/types/services/analytic'
+
+export class ExcelExportPaymentService {
+  /**
+   * Export Payment Method Report to Excel
+   */
+  static async exportPaymentMethodToExcel(paymentData: PaymentReport, filename?: string) {
+    try {
+      // Dynamic import untuk xlsx library
+      const XLSX = await import('xlsx')
+
+      // Prepare data untuk Excel
+      const worksheetData: any[][] = []
+
+      // Header dengan report info (baris 1-2)
+      worksheetData.push(['LAPORAN METODE PEMBAYARAN']) // Row 0 - Main title
+      worksheetData.push([`Periode: ${paymentData.date_from.split('T')[0]} - ${paymentData.date_to.split('T')[0]}`]) // Row 1 - Period
+      worksheetData.push([]) // Empty row
+
+      // Add Summary Section
+      worksheetData.push(['RINGKASAN PERIODE']) // Section header
+      worksheetData.push([]) // Empty row
+
+      const summaryData = [
+        ['Total Amount:', `Rp ${paymentData.summary.total_amount.toLocaleString('id-ID')}`],
+        ['Total Orders:', paymentData.summary.total_orders.toString()],
+        ['Total Payments:', paymentData.summary.total_payments.toString()],
+        ['Average Order Value:', `Rp ${paymentData.summary.average_order_value.toLocaleString('id-ID')}`]
+      ]
+
+      summaryData.forEach(row => {
+        worksheetData.push([row[0], row[1]]) // Only 2 columns needed
+      })
+
+      worksheetData.push([]) // Empty row
+      worksheetData.push([]) // Empty row
+
+      // Payment Method Details Section Header
+      worksheetData.push(['RINCIAN METODE PEMBAYARAN']) // Section header
+      worksheetData.push([]) // Empty row
+
+      // Header row untuk tabel payment method data
+      const headerRow = ['No', 'Metode Pembayaran', 'Tipe', 'Jumlah Order', 'Total Amount', 'Persentase']
+      worksheetData.push(headerRow)
+
+      // Add payment method data rows
+      paymentData.data.forEach((payment, index) => {
+        const rowData = [
+          index + 1, // No
+          payment.payment_method_name,
+          payment.payment_method_type.toUpperCase(),
+          payment.order_count,
+          payment.total_amount, // Store as number for Excel formatting
+          `${(payment.percentage ?? 0).toFixed(1)}%`
+        ]
+        worksheetData.push(rowData)
+      })
+
+      // Add total row
+      const totalRow = ['TOTAL', '', '', paymentData.summary.total_orders, paymentData.summary.total_amount, '100.0%']
+      worksheetData.push(totalRow)
+
+      // Create workbook dan worksheet
+      const workbook = XLSX.utils.book_new()
+      const worksheet = XLSX.utils.aoa_to_sheet(worksheetData)
+
+      // Apply basic formatting
+      this.applyBasicFormatting(worksheet, worksheetData.length, XLSX)
+
+      // Add worksheet ke workbook
+      XLSX.utils.book_append_sheet(workbook, worksheet, 'Metode Pembayaran')
+
+      // Generate filename
+      const exportFilename = filename || this.generateFilename('Metode_Pembayaran')
+
+      // Download file
+      XLSX.writeFile(workbook, exportFilename)
+
+      return { success: true, filename: exportFilename }
+    } catch (error) {
+      console.error('Error exporting to Excel:', error)
+      return { success: false, error: 'Failed to export Excel file' }
+    }
+  }
+
+  /**
+   * Apply basic formatting (SheetJS compatible)
+   */
+  private static applyBasicFormatting(worksheet: any, totalRows: number, XLSX: any) {
+    // Set column widths
+    const colWidths = [
+      { wch: 8 }, // No
+      { wch: 25 }, // Metode Pembayaran
+      { wch: 12 }, // Tipe
+      { wch: 15 }, // Jumlah Order
+      { wch: 20 }, // Total Amount
+      { wch: 12 } // Persentase
+    ]
+    worksheet['!cols'] = colWidths
+
+    // Set row heights for better spacing
+    worksheet['!rows'] = [
+      { hpt: 30 }, // Title row
+      { hpt: 25 }, // Period row
+      { hpt: 15 }, // Empty row
+      { hpt: 25 }, // Summary header
+      { hpt: 15 } // Empty row
+    ]
+
+    // Merge cells untuk headers
+    const merges = [
+      { s: { r: 0, c: 0 }, e: { r: 0, c: 5 } }, // Title (span across all columns)
+      { s: { r: 1, c: 0 }, e: { r: 1, c: 5 } }, // Period (span across all columns)
+      { s: { r: 3, c: 0 }, e: { r: 3, c: 5 } } // Summary header (span across all columns)
+    ]
+
+    // Find and add merge for payment method details header
+    for (let i = 0; i < totalRows; i++) {
+      const cell = worksheet[XLSX.utils.encode_cell({ r: i, c: 0 })]
+      if (cell && cell.v === 'RINCIAN METODE PEMBAYARAN') {
+        merges.push({ s: { r: i, c: 0 }, e: { r: i, c: 5 } }) // Span across all columns
+        break
+      }
+    }
+
+    worksheet['!merges'] = merges
+
+    // Apply number formatting untuk currency cells
+    this.applyNumberFormatting(worksheet, totalRows, XLSX)
+  }
+
+  /**
+   * Apply number formatting for currency and styling
+   */
+  private static applyNumberFormatting(worksheet: any, totalRows: number, XLSX: any) {
+    // Find table data start (after header row)
+    let dataStartRow = -1
+    for (let i = 0; i < totalRows; i++) {
+      const cell = worksheet[XLSX.utils.encode_cell({ r: i, c: 0 })]
+      if (cell && cell.v === 'No') {
+        dataStartRow = i + 1
+        break
+      }
+    }
+
+    if (dataStartRow === -1) return
+
+    // Count actual data rows (excluding total row)
+    const dataRowsCount = totalRows - dataStartRow - 1 // -1 for total row
+
+    // Apply currency formatting to Total Amount column (column 4 - index 4)
+    for (let row = dataStartRow; row <= dataStartRow + dataRowsCount; row++) {
+      // Include total row
+      const cellAddress = XLSX.utils.encode_cell({ r: row, c: 4 }) // Total Amount column
+      const cell = worksheet[cellAddress]
+
+      if (cell && typeof cell.v === 'number') {
+        // Apply Indonesian currency format
+        cell.z = '#,##0'
+        cell.t = 'n'
+      }
+    }
+
+    // Apply styling to header row
+    const headerRowIndex = dataStartRow - 1
+    for (let col = 0; col < 6; col++) {
+      const cellAddress = XLSX.utils.encode_cell({ r: headerRowIndex, c: col })
+      const cell = worksheet[cellAddress]
+
+      if (cell) {
+        // Apply bold formatting (basic approach for SheetJS)
+        cell.s = {
+          font: { bold: true },
+          fill: { fgColor: { rgb: 'F3F4F6' } }, // Light gray background
+          border: {
+            bottom: { style: 'medium', color: { rgb: '000000' } }
+          }
+        }
+      }
+    }
+
+    // Apply styling to total row
+    const totalRowIndex = dataStartRow + dataRowsCount
+    for (let col = 0; col < 6; col++) {
+      const cellAddress = XLSX.utils.encode_cell({ r: totalRowIndex, c: col })
+      const cell = worksheet[cellAddress]
+
+      if (cell) {
+        // Apply bold formatting for total row
+        cell.s = {
+          font: { bold: true },
+          border: {
+            top: { style: 'medium', color: { rgb: '000000' } }
+          }
+        }
+      }
+    }
+  }
+
+  /**
+   * Generate filename with timestamp
+   */
+  private static generateFilename(prefix: string): string {
+    const now = new Date()
+    const year = now.getFullYear()
+    const month = (now.getMonth() + 1).toString().padStart(2, '0')
+    const day = now.getDate().toString().padStart(2, '0')
+    const hour = now.getHours().toString().padStart(2, '0')
+    const minute = now.getMinutes().toString().padStart(2, '0')
+
+    return `${prefix}_${year}_${month}_${day}_${hour}${minute}.xlsx`
+  }
+
+  /**
+   * Export Payment Method data with custom configuration
+   */
+  static async exportCustomPaymentData(
+    data: any[][],
+    sheetName: string = 'Payment Method',
+    filename?: string,
+    options?: {
+      colWidths?: { wch: number }[]
+      merges?: { s: { r: number; c: number }; e: { r: number; c: number } }[]
+    }
+  ) {
+    try {
+      const XLSX = await import('xlsx')
+
+      const workbook = XLSX.utils.book_new()
+      const worksheet = XLSX.utils.aoa_to_sheet(data)
+
+      // Apply options
+      if (options?.colWidths) {
+        worksheet['!cols'] = options.colWidths
+      }
+      if (options?.merges) {
+        worksheet['!merges'] = options.merges
+      }
+
+      XLSX.utils.book_append_sheet(workbook, worksheet, sheetName)
+
+      const exportFilename = filename || this.generateFilename('Payment_Method_Export')
+      XLSX.writeFile(workbook, exportFilename)
+
+      return { success: true, filename: exportFilename }
+    } catch (error) {
+      console.error('Error exporting to Excel:', error)
+      return { success: false, error: 'Failed to export Excel file' }
+    }
+  }
+}
@@ -0,0 +1,278 @@
+// services/excelExportService.ts
+import type { ProfitLossReport } from '@/types/services/analytic'
+
+export class ExcelExportProfitLossService {
+  /**
+   * Export Profit Loss Report to Excel
+   */
+  static async exportProfitLossToExcel(profitData: ProfitLossReport, filename?: string) {
+    try {
+      // Dynamic import untuk xlsx library
+      const XLSX = await import('xlsx')
+
+      // Prepare data untuk Excel
+      const worksheetData: any[][] = []
+
+      // Header dengan company info (baris 1-2) - update data
+      worksheetData.push(['LABA RUGI']) // Row 0 - Main title
+      worksheetData.push([`Periode: ${profitData.date_from.split('T')[0]} - ${profitData.date_to.split('T')[0]}`]) // Row 1 - Period
+      worksheetData.push([]) // Empty row
+
+      // Add Summary Section
+      worksheetData.push(['RINGKASAN PERIODE']) // Section header
+      worksheetData.push([]) // Empty row
+
+      const summaryData = [
+        ['Total Revenue:', `Rp ${profitData.summary.total_revenue.toLocaleString('id-ID')}`],
+        ['Total Cost:', `Rp ${profitData.summary.total_cost.toLocaleString('id-ID')}`],
+        ['Gross Profit:', `Rp ${profitData.summary.gross_profit.toLocaleString('id-ID')}`],
+        ['Gross Profit Margin:', `${profitData.summary.gross_profit_margin.toFixed(1)}%`],
+        ['Total Tax:', `Rp ${profitData.summary.total_tax.toLocaleString('id-ID')}`],
+        ['Total Discount:', `Rp ${profitData.summary.total_discount.toLocaleString('id-ID')}`],
+        ['Net Profit:', `Rp ${profitData.summary.net_profit.toLocaleString('id-ID')}`],
+        ['Net Profit Margin:', `${profitData.summary.net_profit_margin.toFixed(1)}%`],
+        ['Total Orders:', profitData.summary.total_orders.toString()],
+        ['Average Profit:', `Rp ${profitData.summary.average_profit.toLocaleString('id-ID')}`],
+        ['Profitability Ratio:', `${profitData.summary.profitability_ratio.toFixed(1)}%`]
+      ]
+
+      summaryData.forEach(row => {
+        worksheetData.push([row[0], row[1]]) // Only 2 columns needed
+      })
+
+      worksheetData.push([]) // Empty row
+      worksheetData.push([]) // Empty row
+
+      // Daily Data Section Header
+      worksheetData.push(['RINCIAN HARIAN']) // Section header
+      worksheetData.push([]) // Empty row
+
+      // Prepare date columns - ambil dari daily data
+      const dateColumns = profitData.data.map(daily => {
+        const date = new Date(daily.date)
+        return date.toLocaleDateString('id-ID', {
+          day: '2-digit',
+          month: 'short'
+        })
+      })
+
+      // Header row untuk tabel daily data (hanya tanggal)
+      const headerRow = ['NO', 'KET', '', ...dateColumns]
+      worksheetData.push(headerRow)
+
+      // Prepare data rows
+      const rows = this.prepareProfitLossRows(profitData)
+
+      // Add data rows ke worksheet (hanya nilai per tanggal)
+      rows.forEach(row => {
+        const rowData = [
+          row.no,
+          row.label,
+          ':',
+          ...row.values.map(val => val.today) // Store as numbers for better Excel handling
+        ]
+        worksheetData.push(rowData)
+      })
+
+      // Create workbook dan worksheet
+      const workbook = XLSX.utils.book_new()
+      const worksheet = XLSX.utils.aoa_to_sheet(worksheetData)
+
+      // Apply basic formatting
+      this.applyBasicFormatting(worksheet, dateColumns.length, worksheetData.length, XLSX)
+
+      // Add worksheet ke workbook
+      XLSX.utils.book_append_sheet(workbook, worksheet, 'Laba Rugi')
+
+      // Generate filename
+      const exportFilename = filename || this.generateFilename('Laba_Rugi')
+
+      // Download file
+      XLSX.writeFile(workbook, exportFilename)
+
+      return { success: true, filename: exportFilename }
+    } catch (error) {
+      console.error('Error exporting to Excel:', error)
+      return { success: false, error: 'Failed to export Excel file' }
+    }
+  }
+
+  /**
+   * Prepare profit loss data rows (tanpa percentage)
+   */
+  private static prepareProfitLossRows(profitData: ProfitLossReport) {
+    return [
+      {
+        no: 1,
+        label: 'TOTAL PENJ',
+        values: profitData.data.map(daily => ({
+          today: daily.revenue,
+          mtd: daily.revenue // TODO: Replace with actual MTD data from API
+        }))
+      },
+      {
+        no: 2,
+        label: 'HPP',
+        values: profitData.data.map(daily => ({
+          today: daily.cost,
+          mtd: daily.cost
+        }))
+      },
+      {
+        no: 3,
+        label: 'Laba Kotor (1-2)',
+        values: profitData.data.map(daily => ({
+          today: daily.gross_profit,
+          mtd: daily.gross_profit
+        }))
+      },
+      {
+        no: 4,
+        label: 'Biaya lain',
+        values: profitData.data.map(daily => {
+          const totalCosts = daily.tax + daily.discount
+          return {
+            today: totalCosts,
+            mtd: totalCosts
+          }
+        })
+      },
+      {
+        no: 5,
+        label: 'Laba/Rugi (3-4)',
+        values: profitData.data.map(daily => ({
+          today: daily.net_profit,
+          mtd: daily.net_profit
+        }))
+      }
+    ]
+  }
+
+  /**
+   * Apply basic formatting (SheetJS compatible)
+   */
+  private static applyBasicFormatting(worksheet: any, dateColumnsCount: number, totalRows: number, XLSX: any) {
+    // Set column widths
+    const colWidths = [
+      { wch: 5 }, // NO
+      { wch: 25 }, // KET
+      { wch: 3 }, // :
+      ...Array(dateColumnsCount).fill({ wch: 18 })
+    ]
+    worksheet['!cols'] = colWidths
+
+    // Set row heights for better spacing
+    worksheet['!rows'] = [
+      { hpt: 30 }, // Title row
+      { hpt: 25 }, // Period row
+      { hpt: 15 }, // Empty row
+      { hpt: 25 }, // Summary header
+      { hpt: 15 } // Empty row
+    ]
+
+    // Merge cells untuk headers
+    const merges = [
+      { s: { r: 0, c: 0 }, e: { r: 0, c: dateColumnsCount + 2 } }, // Title
+      { s: { r: 1, c: 0 }, e: { r: 1, c: dateColumnsCount + 2 } }, // Period
+      { s: { r: 3, c: 0 }, e: { r: 3, c: dateColumnsCount + 2 } } // Summary header
+    ]
+
+    // Find and add merge for daily data header
+    for (let i = 0; i < totalRows; i++) {
+      const cell = worksheet[XLSX.utils.encode_cell({ r: i, c: 0 })]
+      if (cell && cell.v === 'RINCIAN HARIAN') {
+        merges.push({ s: { r: i, c: 0 }, e: { r: i, c: dateColumnsCount + 2 } })
+        break
+      }
+    }
+
+    worksheet['!merges'] = merges
+
+    // Apply number formatting untuk currency cells
+    this.applyNumberFormatting(worksheet, totalRows, dateColumnsCount + 3, XLSX)
+  }
+
+  /**
+   * Apply number formatting for currency
+   */
+  private static applyNumberFormatting(worksheet: any, totalRows: number, totalCols: number, XLSX: any) {
+    // Find table data start (after "NO" header)
+    let dataStartRow = -1
+    for (let i = 0; i < totalRows; i++) {
+      const cell = worksheet[XLSX.utils.encode_cell({ r: i, c: 0 })]
+      if (cell && cell.v === 'NO') {
+        dataStartRow = i + 1
+        break
+      }
+    }
+
+    if (dataStartRow === -1) return
+
+    // Apply currency formatting to data cells (starting from column 3 - after NO, KET, :)
+    for (let row = dataStartRow; row < dataStartRow + 5; row++) {
+      // 5 data rows
+      for (let col = 3; col < totalCols; col++) {
+        const cellAddress = XLSX.utils.encode_cell({ r: row, c: col })
+        const cell = worksheet[cellAddress]
+
+        if (cell && typeof cell.v === 'number') {
+          // Apply Indonesian currency format
+          cell.z = '#,##0'
+          cell.t = 'n'
+        }
+      }
+    }
+  }
+
+  /**
+   * Generate filename with timestamp
+   */
+  private static generateFilename(prefix: string): string {
+    const now = new Date()
+    const year = now.getFullYear()
+    const month = (now.getMonth() + 1).toString().padStart(2, '0')
+    const day = now.getDate().toString().padStart(2, '0')
+    const hour = now.getHours().toString().padStart(2, '0')
+    const minute = now.getMinutes().toString().padStart(2, '0')
+
+    return `${prefix}_${year}_${month}_${day}_${hour}${minute}.xlsx`
+  }
+
+  /**
+   * Export any data to Excel with custom configuration
+   */
+  static async exportToExcel(
+    data: any[][],
+    sheetName: string = 'Sheet1',
+    filename?: string,
+    options?: {
+      colWidths?: { wch: number }[]
+      merges?: { s: { r: number; c: number }; e: { r: number; c: number } }[]
+    }
+  ) {
+    try {
+      const XLSX = await import('xlsx')
+
+      const workbook = XLSX.utils.book_new()
+      const worksheet = XLSX.utils.aoa_to_sheet(data)
+
+      // Apply options
+      if (options?.colWidths) {
+        worksheet['!cols'] = options.colWidths
+      }
+      if (options?.merges) {
+        worksheet['!merges'] = options.merges
+      }
+
+      XLSX.utils.book_append_sheet(workbook, worksheet, sheetName)
+
+      const exportFilename = filename || this.generateFilename('Export')
+      XLSX.writeFile(workbook, exportFilename)
+
+      return { success: true, filename: exportFilename }
+    } catch (error) {
+      console.error('Error exporting to Excel:', error)
+      return { success: false, error: 'Failed to export Excel file' }
+    }
+  }
+}
@@ -0,0 +1,335 @@
+// services/excelExportSalesOrderService.ts
+import type { SalesReport } from '@/types/services/analytic'
+
+export class ExcelExportSalesOrderService {
+  /**
+   * Export Sales Order Report to Excel
+   */
+  static async exportSalesOrderToExcel(salesData: SalesReport, filename?: string) {
+    try {
+      // Dynamic import untuk xlsx library
+      const XLSX = await import('xlsx')
+
+      // Prepare data untuk Excel
+      const worksheetData: any[][] = []
+
+      // Header dengan report info (baris 1-2)
+      worksheetData.push(['LAPORAN PESANAN PENJUALAN']) // Row 0 - Main title
+      worksheetData.push([`Periode: ${salesData.date_from.split('T')[0]} - ${salesData.date_to.split('T')[0]}`]) // Row 1 - Period
+      worksheetData.push([]) // Empty row
+
+      // Add Summary Section
+      worksheetData.push(['RINGKASAN PERIODE']) // Section header
+      worksheetData.push([]) // Empty row
+
+      const summaryData = [
+        ['Total Sales:', `Rp ${salesData.summary.total_sales.toLocaleString('id-ID')}`],
+        ['Total Orders:', salesData.summary.total_orders.toString()],
+        ['Total Items:', salesData.summary.total_items.toString()],
+        ['Average Order Value:', `Rp ${salesData.summary.average_order_value.toLocaleString('id-ID')}`],
+        ['Total Tax:', `Rp ${salesData.summary.total_tax.toLocaleString('id-ID')}`],
+        ['Total Discount:', `Rp ${salesData.summary.total_discount.toLocaleString('id-ID')}`],
+        ['Net Sales:', `Rp ${salesData.summary.net_sales.toLocaleString('id-ID')}`]
+      ]
+
+      summaryData.forEach(row => {
+        worksheetData.push([row[0], row[1]]) // Only 2 columns needed
+      })
+
+      worksheetData.push([]) // Empty row
+      worksheetData.push([]) // Empty row
+
+      // Daily Sales Section Header
+      worksheetData.push(['RINCIAN HARIAN']) // Section header
+      worksheetData.push([]) // Empty row
+
+      // Header row untuk tabel daily sales data
+      const headerRow = ['No', 'Tanggal', 'Penjualan', 'Pesanan', 'Qty', 'Pajak', 'Diskon', 'Pendapatan']
+      worksheetData.push(headerRow)
+
+      // Add daily sales data rows
+      salesData.data?.forEach((dailySales, index) => {
+        const rowData = [
+          index + 1, // No
+          this.formatDate(dailySales.date),
+          dailySales.sales, // Store as number for Excel formatting
+          dailySales.orders,
+          dailySales.items,
+          dailySales.tax, // Store as number for Excel formatting
+          dailySales.discount, // Store as number for Excel formatting
+          dailySales.net_sales // Store as number for Excel formatting
+        ]
+        worksheetData.push(rowData)
+      })
+
+      // Add total row
+      const totalRow = [
+        'TOTAL',
+        '',
+        salesData.summary.total_sales,
+        salesData.summary.total_orders,
+        salesData.summary.total_items,
+        salesData.summary.total_tax,
+        salesData.summary.total_discount,
+        salesData.summary.net_sales
+      ]
+      worksheetData.push(totalRow)
+
+      // Create workbook dan worksheet
+      const workbook = XLSX.utils.book_new()
+      const worksheet = XLSX.utils.aoa_to_sheet(worksheetData)
+
+      // Apply basic formatting
+      this.applyBasicFormatting(worksheet, worksheetData.length, XLSX)
+
+      // Add worksheet ke workbook
+      XLSX.utils.book_append_sheet(workbook, worksheet, 'Pesanan Penjualan')
+
+      // Generate filename
+      const exportFilename = filename || this.generateFilename('Pesanan_Penjualan')
+
+      // Download file
+      XLSX.writeFile(workbook, exportFilename)
+
+      return { success: true, filename: exportFilename }
+    } catch (error) {
+      console.error('Error exporting to Excel:', error)
+      return { success: false, error: 'Failed to export Excel file' }
+    }
+  }
+
+  /**
+   * Apply basic formatting (SheetJS compatible)
+   */
+  private static applyBasicFormatting(worksheet: any, totalRows: number, XLSX: any) {
+    // Set column widths
+    const colWidths = [
+      { wch: 8 }, // No
+      { wch: 15 }, // Tanggal
+      { wch: 18 }, // Penjualan
+      { wch: 12 }, // Pesanan
+      { wch: 10 }, // Qty
+      { wch: 15 }, // Pajak
+      { wch: 15 }, // Diskon
+      { wch: 18 } // Pendapatan
+    ]
+    worksheet['!cols'] = colWidths
+
+    // Set row heights for better spacing
+    worksheet['!rows'] = [
+      { hpt: 30 }, // Title row
+      { hpt: 25 }, // Period row
+      { hpt: 15 }, // Empty row
+      { hpt: 25 }, // Summary header
+      { hpt: 15 } // Empty row
+    ]
+
+    // Merge cells untuk headers
+    const merges = [
+      { s: { r: 0, c: 0 }, e: { r: 0, c: 7 } }, // Title (span across all columns)
+      { s: { r: 1, c: 0 }, e: { r: 1, c: 7 } }, // Period (span across all columns)
+      { s: { r: 3, c: 0 }, e: { r: 3, c: 7 } } // Summary header (span across all columns)
+    ]
+
+    // Find and add merge for daily sales header
+    for (let i = 0; i < totalRows; i++) {
+      const cell = worksheet[XLSX.utils.encode_cell({ r: i, c: 0 })]
+      if (cell && cell.v === 'RINCIAN HARIAN') {
+        merges.push({ s: { r: i, c: 0 }, e: { r: i, c: 7 } }) // Span across all columns
+        break
+      }
+    }
+
+    worksheet['!merges'] = merges
+
+    // Apply number formatting untuk currency cells
+    this.applyNumberFormatting(worksheet, totalRows, XLSX)
+  }
+
+  /**
+   * Apply number formatting for currency and styling
+   */
+  private static applyNumberFormatting(worksheet: any, totalRows: number, XLSX: any) {
+    // Find table data start (after header row)
+    let dataStartRow = -1
+    for (let i = 0; i < totalRows; i++) {
+      const cell = worksheet[XLSX.utils.encode_cell({ r: i, c: 0 })]
+      if (cell && cell.v === 'No') {
+        dataStartRow = i + 1
+        break
+      }
+    }
+
+    if (dataStartRow === -1) return
+
+    // Count actual data rows (excluding total row)
+    const dataRowsCount = totalRows - dataStartRow - 1 // -1 for total row
+
+    // Apply currency formatting to currency columns (columns 2, 5, 6, 7 - Penjualan, Pajak, Diskon, Pendapatan)
+    const currencyColumns = [2, 5, 6, 7]
+    for (let row = dataStartRow; row <= dataStartRow + dataRowsCount; row++) {
+      // Include total row
+      currencyColumns.forEach(col => {
+        const cellAddress = XLSX.utils.encode_cell({ r: row, c: col })
+        const cell = worksheet[cellAddress]
+
+        if (cell && typeof cell.v === 'number') {
+          // Apply Indonesian currency format
+          cell.z = '#,##0'
+          cell.t = 'n'
+        }
+      })
+    }
+
+    // Apply styling to header row
+    const headerRowIndex = dataStartRow - 1
+    for (let col = 0; col < 8; col++) {
+      const cellAddress = XLSX.utils.encode_cell({ r: headerRowIndex, c: col })
+      const cell = worksheet[cellAddress]
+
+      if (cell) {
+        // Apply bold formatting (basic approach for SheetJS)
+        cell.s = {
+          font: { bold: true },
+          fill: { fgColor: { rgb: 'F3F4F6' } }, // Light gray background
+          border: {
+            bottom: { style: 'medium', color: { rgb: '000000' } }
+          }
+        }
+      }
+    }
+
+    // Apply styling to total row
+    const totalRowIndex = dataStartRow + dataRowsCount
+    for (let col = 0; col < 8; col++) {
+      const cellAddress = XLSX.utils.encode_cell({ r: totalRowIndex, c: col })
+      const cell = worksheet[cellAddress]
+
+      if (cell) {
+        // Apply bold formatting for total row
+        cell.s = {
+          font: { bold: true },
+          border: {
+            top: { style: 'medium', color: { rgb: '000000' } }
+          }
+        }
+      }
+    }
+  }
+
+  /**
+   * Format date for display
+   */
+  private static formatDate(dateString: string): string {
+    const date = new Date(dateString)
+    return date.toLocaleDateString('id-ID', {
+      day: '2-digit',
+      month: '2-digit',
+      year: 'numeric'
+    })
+  }
+
+  /**
+   * Generate filename with timestamp
+   */
+  private static generateFilename(prefix: string): string {
+    const now = new Date()
+    const year = now.getFullYear()
+    const month = (now.getMonth() + 1).toString().padStart(2, '0')
+    const day = now.getDate().toString().padStart(2, '0')
+    const hour = now.getHours().toString().padStart(2, '0')
+    const minute = now.getMinutes().toString().padStart(2, '0')
+
+    return `${prefix}_${year}_${month}_${day}_${hour}${minute}.xlsx`
+  }
+
+  /**
+   * Export Sales Order data with custom configuration
+   */
+  static async exportCustomSalesOrderData(
+    salesData: SalesReport,
+    options?: {
+      includeSummary?: boolean
+      includeItemsColumn?: boolean
+      customFilename?: string
+      sheetName?: string
+    }
+  ) {
+    try {
+      const XLSX = await import('xlsx')
+      const worksheetData: any[][] = []
+
+      // Always include title and period
+      worksheetData.push(['LAPORAN PESANAN PENJUALAN'])
+      worksheetData.push([`Periode: ${salesData.date_from.split('T')[0]} - ${salesData.date_to.split('T')[0]}`])
+      worksheetData.push([])
+
+      // Optional summary
+      if (options?.includeSummary !== false) {
+        worksheetData.push(['RINGKASAN PERIODE'])
+        worksheetData.push([])
+        const summaryData = [
+          ['Total Sales:', `Rp ${salesData.summary.total_sales.toLocaleString('id-ID')}`],
+          ['Total Orders:', salesData.summary.total_orders.toString()],
+          ['Total Items:', salesData.summary.total_items.toString()],
+          ['Net Sales:', `Rp ${salesData.summary.net_sales.toLocaleString('id-ID')}`]
+        ]
+        summaryData.forEach(row => worksheetData.push([row[0], row[1]]))
+        worksheetData.push([])
+        worksheetData.push([])
+      }
+
+      worksheetData.push(['RINCIAN HARIAN'])
+      worksheetData.push([])
+
+      // Header row based on options
+      const headerRow =
+        options?.includeItemsColumn !== false
+          ? ['No', 'Tanggal', 'Penjualan', 'Pesanan', 'Qty', 'Pajak', 'Diskon', 'Pendapatan']
+          : ['No', 'Tanggal', 'Penjualan', 'Pesanan', 'Pajak', 'Diskon', 'Pendapatan']
+      worksheetData.push(headerRow)
+
+      // Add daily data based on options
+      salesData.data?.forEach((dailySales, index) => {
+        const rowData =
+          options?.includeItemsColumn !== false
+            ? [
+                index + 1,
+                this.formatDate(dailySales.date),
+                dailySales.sales,
+                dailySales.orders,
+                dailySales.items,
+                dailySales.tax,
+                dailySales.discount,
+                dailySales.net_sales
+              ]
+            : [
+                index + 1,
+                this.formatDate(dailySales.date),
+                dailySales.sales,
+                dailySales.orders,
+                dailySales.tax,
+                dailySales.discount,
+                dailySales.net_sales
+              ]
+        worksheetData.push(rowData)
+      })
+
+      const workbook = XLSX.utils.book_new()
+      const worksheet = XLSX.utils.aoa_to_sheet(worksheetData)
+
+      this.applyBasicFormatting(worksheet, worksheetData.length, XLSX)
+
+      const sheetName = options?.sheetName || 'Pesanan Penjualan'
+      XLSX.utils.book_append_sheet(workbook, worksheet, sheetName)
+
+      const exportFilename = options?.customFilename || this.generateFilename('Custom_Sales_Order')
+      XLSX.writeFile(workbook, exportFilename)
+
+      return { success: true, filename: exportFilename }
+    } catch (error) {
+      console.error('Error exporting custom sales order data to Excel:', error)
+      return { success: false, error: 'Failed to export Excel file' }
+    }
+  }
+}
@@ -0,0 +1,325 @@
+// services/excelExportCategoryService.ts
+import type { CategoryReport } from '@/types/services/analytic'
+
+export class ExcelExportSalesProductCategoryService {
+  /**
+   * Export Category Sales Report to Excel
+   */
+  static async exportCategorySalesToExcel(categoryData: CategoryReport, filename?: string) {
+    try {
+      // Dynamic import untuk xlsx library
+      const XLSX = await import('xlsx')
+
+      // Prepare data untuk Excel
+      const worksheetData: any[][] = []
+
+      // Header dengan report info (baris 1-2)
+      worksheetData.push(['LAPORAN PENJUALAN KATEGORI']) // Row 0 - Main title
+      worksheetData.push([`Periode: ${categoryData.date_from.split('T')[0]} - ${categoryData.date_to.split('T')[0]}`]) // Row 1 - Period
+      worksheetData.push([]) // Empty row
+
+      // Calculate summary
+      const categorySummary = {
+        totalRevenue: categoryData.data?.reduce((sum, item) => sum + (item?.total_revenue || 0), 0) || 0,
+        orderCount: categoryData.data?.reduce((sum, item) => sum + (item?.order_count || 0), 0) || 0,
+        productCount: categoryData.data?.reduce((sum, item) => sum + (item?.product_count || 0), 0) || 0,
+        totalQuantity: categoryData.data?.reduce((sum, item) => sum + (item?.total_quantity || 0), 0) || 0,
+        totalCategories: categoryData.data?.length || 0
+      }
+
+      // Add Summary Section
+      worksheetData.push(['RINGKASAN PERIODE']) // Section header
+      worksheetData.push([]) // Empty row
+
+      const summaryData = [
+        ['Total Kategori:', categorySummary.totalCategories.toString()],
+        ['Total Produk:', categorySummary.productCount.toString()],
+        ['Total Quantity:', categorySummary.totalQuantity.toString()],
+        ['Total Orders:', categorySummary.orderCount.toString()],
+        ['Total Revenue:', `Rp ${categorySummary.totalRevenue.toLocaleString('id-ID')}`]
+      ]
+
+      summaryData.forEach(row => {
+        worksheetData.push([row[0], row[1]]) // Only 2 columns needed
+      })
+
+      worksheetData.push([]) // Empty row
+      worksheetData.push([]) // Empty row
+
+      // Category Details Section Header
+      worksheetData.push(['RINCIAN KATEGORI']) // Section header
+      worksheetData.push([]) // Empty row
+
+      // Header row untuk tabel category data
+      const headerRow = ['No', 'Nama', 'Total Produk', 'Qty', 'Total Orders', 'Pendapatan']
+      worksheetData.push(headerRow)
+
+      // Add category data rows
+      categoryData.data?.forEach((category, index) => {
+        const rowData = [
+          index + 1, // No
+          category.category_name,
+          category.product_count,
+          category.total_quantity,
+          category.order_count,
+          category.total_revenue // Store as number for Excel formatting
+        ]
+        worksheetData.push(rowData)
+      })
+
+      // Add total row
+      const totalRow = [
+        'TOTAL',
+        '',
+        categorySummary.productCount,
+        categorySummary.totalQuantity,
+        categorySummary.orderCount,
+        categorySummary.totalRevenue
+      ]
+      worksheetData.push(totalRow)
+
+      // Create workbook dan worksheet
+      const workbook = XLSX.utils.book_new()
+      const worksheet = XLSX.utils.aoa_to_sheet(worksheetData)
+
+      // Apply basic formatting
+      this.applyBasicFormatting(worksheet, worksheetData.length, XLSX)
+
+      // Add worksheet ke workbook
+      XLSX.utils.book_append_sheet(workbook, worksheet, 'Penjualan Kategori')
+
+      // Generate filename
+      const exportFilename = filename || this.generateFilename('Penjualan_Kategori')
+
+      // Download file
+      XLSX.writeFile(workbook, exportFilename)
+
+      return { success: true, filename: exportFilename }
+    } catch (error) {
+      console.error('Error exporting to Excel:', error)
+      return { success: false, error: 'Failed to export Excel file' }
+    }
+  }
+
+  /**
+   * Apply basic formatting (SheetJS compatible)
+   */
+  private static applyBasicFormatting(worksheet: any, totalRows: number, XLSX: any) {
+    // Set column widths
+    const colWidths = [
+      { wch: 8 }, // No
+      { wch: 30 }, // Nama
+      { wch: 15 }, // Total Produk
+      { wch: 12 }, // Qty
+      { wch: 15 }, // Total Orders
+      { wch: 20 } // Pendapatan
+    ]
+    worksheet['!cols'] = colWidths
+
+    // Set row heights for better spacing
+    worksheet['!rows'] = [
+      { hpt: 30 }, // Title row
+      { hpt: 25 }, // Period row
+      { hpt: 15 }, // Empty row
+      { hpt: 25 }, // Summary header
+      { hpt: 15 } // Empty row
+    ]
+
+    // Merge cells untuk headers
+    const merges = [
+      { s: { r: 0, c: 0 }, e: { r: 0, c: 5 } }, // Title (span across all columns)
+      { s: { r: 1, c: 0 }, e: { r: 1, c: 5 } }, // Period (span across all columns)
+      { s: { r: 3, c: 0 }, e: { r: 3, c: 5 } } // Summary header (span across all columns)
+    ]
+
+    // Find and add merge for category details header
+    for (let i = 0; i < totalRows; i++) {
+      const cell = worksheet[XLSX.utils.encode_cell({ r: i, c: 0 })]
+      if (cell && cell.v === 'RINCIAN KATEGORI') {
+        merges.push({ s: { r: i, c: 0 }, e: { r: i, c: 5 } }) // Span across all columns
+        break
+      }
+    }
+
+    worksheet['!merges'] = merges
+
+    // Apply number formatting untuk currency cells
+    this.applyNumberFormatting(worksheet, totalRows, XLSX)
+  }
+
+  /**
+   * Apply number formatting for currency and styling
+   */
+  private static applyNumberFormatting(worksheet: any, totalRows: number, XLSX: any) {
+    // Find table data start (after header row)
+    let dataStartRow = -1
+    for (let i = 0; i < totalRows; i++) {
+      const cell = worksheet[XLSX.utils.encode_cell({ r: i, c: 0 })]
+      if (cell && cell.v === 'No') {
+        dataStartRow = i + 1
+        break
+      }
+    }
+
+    if (dataStartRow === -1) return
+
+    // Count actual data rows (excluding total row)
+    const dataRowsCount = totalRows - dataStartRow - 1 // -1 for total row
+
+    // Apply currency formatting to Pendapatan column (column 5 - index 5)
+    for (let row = dataStartRow; row <= dataStartRow + dataRowsCount; row++) {
+      // Include total row
+      const cellAddress = XLSX.utils.encode_cell({ r: row, c: 5 }) // Pendapatan column
+      const cell = worksheet[cellAddress]
+
+      if (cell && typeof cell.v === 'number') {
+        // Apply Indonesian currency format
+        cell.z = '#,##0'
+        cell.t = 'n'
+      }
+    }
+
+    // Apply styling to header row
+    const headerRowIndex = dataStartRow - 1
+    for (let col = 0; col < 6; col++) {
+      const cellAddress = XLSX.utils.encode_cell({ r: headerRowIndex, c: col })
+      const cell = worksheet[cellAddress]
+
+      if (cell) {
+        // Apply bold formatting (basic approach for SheetJS)
+        cell.s = {
+          font: { bold: true },
+          fill: { fgColor: { rgb: 'F3F4F6' } }, // Light gray background
+          border: {
+            bottom: { style: 'medium', color: { rgb: '000000' } }
+          }
+        }
+      }
+    }
+
+    // Apply styling to total row
+    const totalRowIndex = dataStartRow + dataRowsCount
+    for (let col = 0; col < 6; col++) {
+      const cellAddress = XLSX.utils.encode_cell({ r: totalRowIndex, c: col })
+      const cell = worksheet[cellAddress]
+
+      if (cell) {
+        // Apply bold formatting for total row
+        cell.s = {
+          font: { bold: true },
+          border: {
+            top: { style: 'medium', color: { rgb: '000000' } }
+          }
+        }
+      }
+    }
+  }
+
+  /**
+   * Generate filename with timestamp
+   */
+  private static generateFilename(prefix: string): string {
+    const now = new Date()
+    const year = now.getFullYear()
+    const month = (now.getMonth() + 1).toString().padStart(2, '0')
+    const day = now.getDate().toString().padStart(2, '0')
+    const hour = now.getHours().toString().padStart(2, '0')
+    const minute = now.getMinutes().toString().padStart(2, '0')
+
+    return `${prefix}_${year}_${month}_${day}_${hour}${minute}.xlsx`
+  }
+
+  /**
+   * Export Category Sales data with custom configuration
+   */
+  static async exportCustomCategoryData(
+    categoryData: CategoryReport,
+    options?: {
+      includeSummary?: boolean
+      includeOrderCount?: boolean
+      customFilename?: string
+      sheetName?: string
+    }
+  ) {
+    try {
+      const XLSX = await import('xlsx')
+      const worksheetData: any[][] = []
+
+      // Always include title and period
+      worksheetData.push(['LAPORAN PENJUALAN KATEGORI'])
+      worksheetData.push([`Periode: ${categoryData.date_from.split('T')[0]} - ${categoryData.date_to.split('T')[0]}`])
+      worksheetData.push([])
+
+      // Optional summary
+      if (options?.includeSummary !== false) {
+        const categorySummary = {
+          totalRevenue: categoryData.data?.reduce((sum, item) => sum + (item?.total_revenue || 0), 0) || 0,
+          orderCount: categoryData.data?.reduce((sum, item) => sum + (item?.order_count || 0), 0) || 0,
+          productCount: categoryData.data?.reduce((sum, item) => sum + (item?.product_count || 0), 0) || 0,
+          totalQuantity: categoryData.data?.reduce((sum, item) => sum + (item?.total_quantity || 0), 0) || 0,
+          totalCategories: categoryData.data?.length || 0
+        }
+
+        worksheetData.push(['RINGKASAN PERIODE'])
+        worksheetData.push([])
+        const summaryData = [
+          ['Total Kategori:', categorySummary.totalCategories.toString()],
+          ['Total Produk:', categorySummary.productCount.toString()],
+          ['Total Quantity:', categorySummary.totalQuantity.toString()],
+          ['Total Revenue:', `Rp ${categorySummary.totalRevenue.toLocaleString('id-ID')}`]
+        ]
+        summaryData.forEach(row => worksheetData.push([row[0], row[1]]))
+        worksheetData.push([])
+        worksheetData.push([])
+      }
+
+      worksheetData.push(['RINCIAN KATEGORI'])
+      worksheetData.push([])
+
+      // Header row based on options
+      const headerRow =
+        options?.includeOrderCount !== false
+          ? ['No', 'Nama', 'Total Produk', 'Qty', 'Total Orders', 'Pendapatan']
+          : ['No', 'Nama', 'Total Produk', 'Qty', 'Pendapatan']
+      worksheetData.push(headerRow)
+
+      // Add category data based on options
+      categoryData.data?.forEach((category, index) => {
+        const rowData =
+          options?.includeOrderCount !== false
+            ? [
+                index + 1,
+                category.category_name,
+                category.product_count,
+                category.total_quantity,
+                category.order_count,
+                category.total_revenue
+              ]
+            : [
+                index + 1,
+                category.category_name,
+                category.product_count,
+                category.total_quantity,
+                category.total_revenue
+              ]
+        worksheetData.push(rowData)
+      })
+
+      const workbook = XLSX.utils.book_new()
+      const worksheet = XLSX.utils.aoa_to_sheet(worksheetData)
+
+      this.applyBasicFormatting(worksheet, worksheetData.length, XLSX)
+
+      const sheetName = options?.sheetName || 'Penjualan Kategori'
+      XLSX.utils.book_append_sheet(workbook, worksheet, sheetName)
+
+      const exportFilename = options?.customFilename || this.generateFilename('Custom_Category_Sales')
+      XLSX.writeFile(workbook, exportFilename)
+
+      return { success: true, filename: exportFilename }
+    } catch (error) {
+      console.error('Error exporting custom category data to Excel:', error)
+      return { success: false, error: 'Failed to export Excel file' }
+    }
+  }
+}
@@ -0,0 +1,414 @@
+// services/excelExportProductService.ts
+import type { ProductSalesReport } from '@/types/services/analytic'
+
+export class ExcelExportSalesProductService {
+  /**
+   * Export Product Sales Report to Excel
+   */
+  static async exportProductSalesToExcel(productData: ProductSalesReport, filename?: string) {
+    try {
+      // Dynamic import untuk xlsx library
+      const XLSX = await import('xlsx')
+
+      // Prepare data untuk Excel
+      const worksheetData: any[][] = []
+
+      // Header dengan report info (baris 1-2)
+      worksheetData.push(['LAPORAN PENJUALAN PRODUK']) // Row 0 - Main title
+      worksheetData.push([`Periode: ${productData.date_from.split('T')[0]} - ${productData.date_to.split('T')[0]}`]) // Row 1 - Period
+      worksheetData.push([]) // Empty row
+
+      // Calculate summary
+      const productSummary = {
+        totalQuantitySold: productData.data?.reduce((sum, item) => sum + (item?.quantity_sold || 0), 0) || 0,
+        totalRevenue: productData.data?.reduce((sum, item) => sum + (item?.revenue || 0), 0) || 0,
+        totalOrders: productData.data?.reduce((sum, item) => sum + (item?.order_count || 0), 0) || 0,
+        averageRevenue: 0
+      }
+      productSummary.averageRevenue =
+        productSummary.totalQuantitySold > 0 ? productSummary.totalRevenue / productSummary.totalQuantitySold : 0
+
+      // Add Summary Section
+      worksheetData.push(['RINGKASAN PERIODE']) // Section header
+      worksheetData.push([]) // Empty row
+
+      const summaryData = [
+        ['Total Quantity Sold:', productSummary.totalQuantitySold.toString()],
+        ['Total Orders:', productSummary.totalOrders.toString()],
+        ['Total Revenue:', `Rp ${productSummary.totalRevenue.toLocaleString('id-ID')}`],
+        ['Average Revenue per Item:', `Rp ${productSummary.averageRevenue.toLocaleString('id-ID')}`]
+      ]
+
+      summaryData.forEach(row => {
+        worksheetData.push([row[0], row[1]]) // Only 2 columns needed
+      })
+
+      worksheetData.push([]) // Empty row
+      worksheetData.push([]) // Empty row
+
+      // Product Details Section Header
+      worksheetData.push(['RINCIAN PRODUK']) // Section header
+      worksheetData.push([]) // Empty row
+
+      // Group products by category
+      const groupedProducts =
+        productData.data?.reduce(
+          (acc, item) => {
+            const categoryName = item.category_name || 'Tidak Berkategori'
+            if (!acc[categoryName]) {
+              acc[categoryName] = []
+            }
+            acc[categoryName].push(item)
+            return acc
+          },
+          {} as Record<string, any[]>
+        ) || {}
+
+      // Header row untuk tabel product data
+      const headerRow = ['Kategori', 'Produk', 'Qty', 'Order', 'Pendapatan', 'Rata Rata']
+      worksheetData.push(headerRow)
+
+      // Add grouped products data
+      Object.keys(groupedProducts)
+        .sort()
+        .forEach(categoryName => {
+          const categoryProducts = groupedProducts[categoryName]
+
+          // Category header row
+          worksheetData.push([categoryName.toUpperCase(), '', '', '', '', ''])
+
+          // Category products
+          categoryProducts.forEach(item => {
+            const rowData = [
+              '', // Empty for category column (indented effect)
+              item.product_name,
+              item.quantity_sold,
+              item.order_count || 0,
+              item.revenue, // Store as number for Excel formatting
+              item.average_price // Store as number for Excel formatting
+            ]
+            worksheetData.push(rowData)
+          })
+
+          // Category subtotal
+          const categoryTotalQty = categoryProducts.reduce((sum, item) => sum + (item.quantity_sold || 0), 0)
+          const categoryTotalOrders = categoryProducts.reduce((sum, item) => sum + (item.order_count || 0), 0)
+          const categoryTotalRevenue = categoryProducts.reduce((sum, item) => sum + (item.revenue || 0), 0)
+
+          const categorySubtotalRow = [
+            `Subtotal ${categoryName}`,
+            '',
+            categoryTotalQty,
+            categoryTotalOrders,
+            categoryTotalRevenue,
+            ''
+          ]
+          worksheetData.push(categorySubtotalRow)
+          worksheetData.push([]) // Empty row between categories
+        })
+
+      // Grand total
+      const grandTotalRow = [
+        'TOTAL KESELURUHAN',
+        '',
+        productSummary.totalQuantitySold,
+        productSummary.totalOrders,
+        productSummary.totalRevenue,
+        ''
+      ]
+      worksheetData.push(grandTotalRow)
+
+      // Create workbook dan worksheet
+      const workbook = XLSX.utils.book_new()
+      const worksheet = XLSX.utils.aoa_to_sheet(worksheetData)
+
+      // Apply basic formatting
+      this.applyBasicFormatting(worksheet, worksheetData.length, XLSX)
+
+      // Add worksheet ke workbook
+      XLSX.utils.book_append_sheet(workbook, worksheet, 'Penjualan Produk')
+
+      // Generate filename
+      const exportFilename = filename || this.generateFilename('Penjualan_Produk')
+
+      // Download file
+      XLSX.writeFile(workbook, exportFilename)
+
+      return { success: true, filename: exportFilename }
+    } catch (error) {
+      console.error('Error exporting to Excel:', error)
+      return { success: false, error: 'Failed to export Excel file' }
+    }
+  }
+
+  /**
+   * Apply basic formatting (SheetJS compatible)
+   */
+  private static applyBasicFormatting(worksheet: any, totalRows: number, XLSX: any) {
+    // Set column widths
+    const colWidths = [
+      { wch: 25 }, // Kategori
+      { wch: 40 }, // Produk
+      { wch: 12 }, // Qty
+      { wch: 12 }, // Order
+      { wch: 20 }, // Pendapatan
+      { wch: 18 } // Rata Rata
+    ]
+    worksheet['!cols'] = colWidths
+
+    // Set row heights for better spacing
+    worksheet['!rows'] = [
+      { hpt: 30 }, // Title row
+      { hpt: 25 }, // Period row
+      { hpt: 15 }, // Empty row
+      { hpt: 25 }, // Summary header
+      { hpt: 15 } // Empty row
+    ]
+
+    // Merge cells untuk headers
+    const merges = [
+      { s: { r: 0, c: 0 }, e: { r: 0, c: 5 } }, // Title (span across all columns)
+      { s: { r: 1, c: 0 }, e: { r: 1, c: 5 } }, // Period (span across all columns)
+      { s: { r: 3, c: 0 }, e: { r: 3, c: 5 } } // Summary header (span across all columns)
+    ]
+
+    // Find and add merge for product details header
+    for (let i = 0; i < totalRows; i++) {
+      const cell = worksheet[XLSX.utils.encode_cell({ r: i, c: 0 })]
+      if (cell && cell.v === 'RINCIAN PRODUK') {
+        merges.push({ s: { r: i, c: 0 }, e: { r: i, c: 5 } }) // Span across all columns
+        break
+      }
+    }
+
+    worksheet['!merges'] = merges
+
+    // Apply number formatting untuk currency cells
+    this.applyNumberFormatting(worksheet, totalRows, XLSX)
+  }
+
+  /**
+   * Apply number formatting for currency and styling
+   */
+  private static applyNumberFormatting(worksheet: any, totalRows: number, XLSX: any) {
+    // Find table data start (after header row)
+    let dataStartRow = -1
+    for (let i = 0; i < totalRows; i++) {
+      const cell = worksheet[XLSX.utils.encode_cell({ r: i, c: 0 })]
+      if (cell && cell.v === 'Kategori') {
+        dataStartRow = i + 1
+        break
+      }
+    }
+
+    if (dataStartRow === -1) return
+
+    // Apply currency formatting to Pendapatan and Rata Rata columns (columns 4 and 5)
+    for (let row = dataStartRow; row < totalRows; row++) {
+      // Pendapatan column (index 4)
+      const revenueCell = worksheet[XLSX.utils.encode_cell({ r: row, c: 4 })]
+      if (revenueCell && typeof revenueCell.v === 'number') {
+        revenueCell.z = '#,##0'
+        revenueCell.t = 'n'
+      }
+
+      // Rata Rata column (index 5)
+      const avgCell = worksheet[XLSX.utils.encode_cell({ r: row, c: 5 })]
+      if (avgCell && typeof avgCell.v === 'number') {
+        avgCell.z = '#,##0'
+        avgCell.t = 'n'
+      }
+    }
+
+    // Apply styling to header row
+    const headerRowIndex = dataStartRow - 1
+    for (let col = 0; col < 6; col++) {
+      const cellAddress = XLSX.utils.encode_cell({ r: headerRowIndex, c: col })
+      const cell = worksheet[cellAddress]
+
+      if (cell) {
+        // Apply bold formatting (basic approach for SheetJS)
+        cell.s = {
+          font: { bold: true },
+          fill: { fgColor: { rgb: 'F3F4F6' } }, // Light gray background
+          border: {
+            bottom: { style: 'medium', color: { rgb: '000000' } }
+          }
+        }
+      }
+    }
+
+    // Apply styling to category headers and totals
+    for (let row = dataStartRow; row < totalRows; row++) {
+      const cell = worksheet[XLSX.utils.encode_cell({ r: row, c: 0 })]
+
+      if (cell && cell.v) {
+        const cellValue = cell.v.toString()
+
+        // Style category headers (uppercase text without "Subtotal" or "TOTAL")
+        if (
+          cellValue === cellValue.toUpperCase() &&
+          !cellValue.includes('Subtotal') &&
+          !cellValue.includes('TOTAL') &&
+          cellValue.length > 0
+        ) {
+          for (let col = 0; col < 6; col++) {
+            const categoryCellAddress = XLSX.utils.encode_cell({ r: row, c: col })
+            const categoryCell = worksheet[categoryCellAddress]
+            if (categoryCell) {
+              categoryCell.s = {
+                font: { bold: true, color: { rgb: '36175E' } },
+                fill: { fgColor: { rgb: 'F8F8F8' } }
+              }
+            }
+          }
+        }
+
+        // Style subtotal and total rows
+        if (cellValue.startsWith('Subtotal') || cellValue.startsWith('TOTAL')) {
+          for (let col = 0; col < 6; col++) {
+            const totalCellAddress = XLSX.utils.encode_cell({ r: row, c: col })
+            const totalCell = worksheet[totalCellAddress]
+            if (totalCell) {
+              totalCell.s = {
+                font: { bold: true },
+                border: {
+                  top: { style: 'medium', color: { rgb: '000000' } }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  /**
+   * Generate filename with timestamp
+   */
+  private static generateFilename(prefix: string): string {
+    const now = new Date()
+    const year = now.getFullYear()
+    const month = (now.getMonth() + 1).toString().padStart(2, '0')
+    const day = now.getDate().toString().padStart(2, '0')
+    const hour = now.getHours().toString().padStart(2, '0')
+    const minute = now.getMinutes().toString().padStart(2, '0')
+
+    return `${prefix}_${year}_${month}_${day}_${hour}${minute}.xlsx`
+  }
+
+  /**
+   * Export Product Sales data with custom configuration
+   */
+  static async exportCustomProductData(
+    productData: ProductSalesReport,
+    options?: {
+      includeSummary?: boolean
+      customFilename?: string
+      sheetName?: string
+      groupByCategory?: boolean
+    }
+  ) {
+    try {
+      const XLSX = await import('xlsx')
+      const worksheetData: any[][] = []
+
+      // Always include title and period
+      worksheetData.push(['LAPORAN PENJUALAN PRODUK'])
+      worksheetData.push([`Periode: ${productData.date_from.split('T')[0]} - ${productData.date_to.split('T')[0]}`])
+      worksheetData.push([])
+
+      // Optional summary
+      if (options?.includeSummary !== false) {
+        const productSummary = {
+          totalQuantitySold: productData.data?.reduce((sum, item) => sum + (item?.quantity_sold || 0), 0) || 0,
+          totalRevenue: productData.data?.reduce((sum, item) => sum + (item?.revenue || 0), 0) || 0,
+          totalOrders: productData.data?.reduce((sum, item) => sum + (item?.order_count || 0), 0) || 0
+        }
+
+        worksheetData.push(['RINGKASAN PERIODE'])
+        worksheetData.push([])
+        const summaryData = [
+          ['Total Quantity Sold:', productSummary.totalQuantitySold.toString()],
+          ['Total Orders:', productSummary.totalOrders.toString()],
+          ['Total Revenue:', `Rp ${productSummary.totalRevenue.toLocaleString('id-ID')}`]
+        ]
+        summaryData.forEach(row => worksheetData.push([row[0], row[1]]))
+        worksheetData.push([])
+        worksheetData.push([])
+      }
+
+      worksheetData.push(['RINCIAN PRODUK'])
+      worksheetData.push([])
+
+      // Header row
+      const headerRow =
+        options?.groupByCategory !== false
+          ? ['Kategori', 'Produk', 'Qty', 'Order', 'Pendapatan', 'Rata Rata']
+          : ['Produk', 'Kategori', 'Qty', 'Order', 'Pendapatan', 'Rata Rata']
+      worksheetData.push(headerRow)
+
+      // Add product data based on grouping option
+      if (options?.groupByCategory !== false) {
+        // Group by category (default)
+        const groupedProducts =
+          productData.data?.reduce(
+            (acc, item) => {
+              const categoryName = item.category_name || 'Tidak Berkategori'
+              if (!acc[categoryName]) {
+                acc[categoryName] = []
+              }
+              acc[categoryName].push(item)
+              return acc
+            },
+            {} as Record<string, any[]>
+          ) || {}
+
+        Object.keys(groupedProducts)
+          .sort()
+          .forEach(categoryName => {
+            const categoryProducts = groupedProducts[categoryName]
+            worksheetData.push([categoryName.toUpperCase(), '', '', '', '', ''])
+            categoryProducts.forEach(item => {
+              worksheetData.push([
+                '',
+                item.product_name,
+                item.quantity_sold,
+                item.order_count || 0,
+                item.revenue,
+                item.average_price
+              ])
+            })
+          })
+      } else {
+        // Flat list without grouping
+        productData.data?.forEach(item => {
+          worksheetData.push([
+            item.product_name,
+            item.category_name,
+            item.quantity_sold,
+            item.order_count || 0,
+            item.revenue,
+            item.average_price
+          ])
+        })
+      }
+
+      const workbook = XLSX.utils.book_new()
+      const worksheet = XLSX.utils.aoa_to_sheet(worksheetData)
+
+      this.applyBasicFormatting(worksheet, worksheetData.length, XLSX)
+
+      const sheetName = options?.sheetName || 'Penjualan Produk'
+      XLSX.utils.book_append_sheet(workbook, worksheet, sheetName)
+
+      const exportFilename = options?.customFilename || this.generateFilename('Custom_Product_Sales')
+      XLSX.writeFile(workbook, exportFilename)
+
+      return { success: true, filename: exportFilename }
+    } catch (error) {
+      console.error('Error exporting custom product data to Excel:', error)
+      return { success: false, error: 'Failed to export Excel file' }
+    }
+  }
+}
@@ -0,0 +1,469 @@
+// services/excelExportSalesService.ts
+import type { CategoryReport, PaymentReport, ProductSalesReport, ProfitLossReport } from '@/types/services/analytic'
+
+export interface SalesReportData {
+  profitLoss: ProfitLossReport
+  paymentAnalytics: PaymentReport
+  categoryAnalytics: CategoryReport
+  productAnalytics: ProductSalesReport
+}
+
+export class ExcelExportSalesService {
+  /**
+   * Export Sales Report to Excel
+   */
+  static async exportSalesReportToExcel(salesData: SalesReportData, filename?: string) {
+    try {
+      // Dynamic import untuk xlsx library
+      const XLSX = await import('xlsx')
+
+      // Prepare data untuk Excel
+      const worksheetData: any[][] = []
+
+      // Header dengan report info (baris 1-2)
+      worksheetData.push(['LAPORAN TRANSAKSI']) // Row 0 - Main title
+      worksheetData.push([
+        `Periode: ${salesData.profitLoss.date_from.split('T')[0]} - ${salesData.profitLoss.date_to.split('T')[0]}`
+      ]) // Row 1 - Period
+      worksheetData.push([]) // Empty row
+
+      // Add Summary Section (Ringkasan)
+      worksheetData.push(['RINGKASAN PERIODE']) // Section header
+      worksheetData.push([]) // Empty row
+
+      const ringkasanData = [
+        ['Total Penjualan:', `Rp ${salesData.profitLoss.summary.total_revenue.toLocaleString('id-ID')}`],
+        ['Total Diskon:', `Rp ${salesData.profitLoss.summary.total_discount.toLocaleString('id-ID')}`],
+        ['Total Pajak:', `Rp ${salesData.profitLoss.summary.total_tax.toLocaleString('id-ID')}`],
+        ['Total:', `Rp ${salesData.profitLoss.summary.total_revenue.toLocaleString('id-ID')}`]
+      ]
+
+      ringkasanData.forEach(row => {
+        worksheetData.push([row[0], row[1]])
+      })
+
+      worksheetData.push([]) // Empty row
+      worksheetData.push([]) // Empty row
+
+      // Add Invoice Section
+      worksheetData.push(['INVOICE']) // Section header
+      worksheetData.push([]) // Empty row
+
+      const invoiceData = [
+        ['Total Invoice:', salesData.profitLoss.summary.total_orders.toString()],
+        ['Rata-rata Tagihan Per Invoice:', `Rp ${salesData.profitLoss.summary.average_profit.toLocaleString('id-ID')}`]
+      ]
+
+      invoiceData.forEach(row => {
+        worksheetData.push([row[0], row[1]])
+      })
+
+      worksheetData.push([]) // Empty row
+      worksheetData.push([]) // Empty row
+
+      // Add Payment Methods Section
+      worksheetData.push(['RINGKASAN METODE PEMBAYARAN']) // Section header
+      worksheetData.push([]) // Empty row
+
+      // Payment methods table header
+      const paymentHeaderRow = ['No', 'Metode Pembayaran', 'Tipe', 'Jumlah Order', 'Total Amount', 'Persentase']
+      worksheetData.push(paymentHeaderRow)
+
+      // Payment methods data
+      salesData.paymentAnalytics.data?.forEach((payment, index) => {
+        const rowData = [
+          index + 1,
+          payment.payment_method_name,
+          payment.payment_method_type.toUpperCase(),
+          payment.order_count,
+          payment.total_amount,
+          `${(payment.percentage ?? 0).toFixed(1)}%`
+        ]
+        worksheetData.push(rowData)
+      })
+
+      // Payment methods total row
+      const paymentTotalRow = [
+        'TOTAL',
+        '',
+        '',
+        salesData.paymentAnalytics.summary?.total_orders ?? 0,
+        salesData.paymentAnalytics.summary?.total_amount ?? 0,
+        '100.0%'
+      ]
+      worksheetData.push(paymentTotalRow)
+
+      worksheetData.push([]) // Empty row
+      worksheetData.push([]) // Empty row
+
+      // Add Category Section
+      worksheetData.push(['RINGKASAN KATEGORI']) // Section header
+      worksheetData.push([]) // Empty row
+
+      // Category table header
+      const categoryHeaderRow = ['No', 'Nama', 'Total Produk', 'Qty', 'Pendapatan']
+      worksheetData.push(categoryHeaderRow)
+
+      // Calculate category summaries
+      const categorySummary = {
+        totalRevenue: salesData.categoryAnalytics.data?.reduce((sum, item) => sum + (item?.total_revenue || 0), 0) || 0,
+        productCount: salesData.categoryAnalytics.data?.reduce((sum, item) => sum + (item?.product_count || 0), 0) || 0,
+        totalQuantity:
+          salesData.categoryAnalytics.data?.reduce((sum, item) => sum + (item?.total_quantity || 0), 0) || 0
+      }
+
+      // Category data
+      salesData.categoryAnalytics.data?.forEach((category, index) => {
+        const rowData = [
+          index + 1,
+          category.category_name,
+          category.product_count,
+          category.total_quantity,
+          category.total_revenue
+        ]
+        worksheetData.push(rowData)
+      })
+
+      // Category total row
+      const categoryTotalRow = [
+        'TOTAL',
+        '',
+        categorySummary.productCount,
+        categorySummary.totalQuantity,
+        categorySummary.totalRevenue
+      ]
+      worksheetData.push(categoryTotalRow)
+
+      worksheetData.push([]) // Empty row
+      worksheetData.push([]) // Empty row
+
+      // Add Product Section
+      worksheetData.push(['RINGKASAN ITEM']) // Section header
+      worksheetData.push([]) // Empty row
+
+      // Group products by category
+      const groupedProducts =
+        salesData.productAnalytics.data?.reduce(
+          (acc, item) => {
+            const categoryName = item.category_name || 'Tidak Berkategori'
+            if (!acc[categoryName]) {
+              acc[categoryName] = []
+            }
+            acc[categoryName].push(item)
+            return acc
+          },
+          {} as Record<string, any[]>
+        ) || {}
+
+      // Calculate product summary
+      const productSummary = {
+        totalQuantitySold:
+          salesData.productAnalytics.data?.reduce((sum, item) => sum + (item?.quantity_sold || 0), 0) || 0,
+        totalRevenue: salesData.productAnalytics.data?.reduce((sum, item) => sum + (item?.revenue || 0), 0) || 0,
+        totalOrders: salesData.productAnalytics.data?.reduce((sum, item) => sum + (item?.order_count || 0), 0) || 0
+      }
+
+      // Product table header
+      const productHeaderRow = ['Kategori', 'Produk', 'Qty', 'Order', 'Pendapatan', 'Rata Rata']
+      worksheetData.push(productHeaderRow)
+
+      // Add grouped products data
+      Object.keys(groupedProducts)
+        .sort()
+        .forEach(categoryName => {
+          const categoryProducts = groupedProducts[categoryName]
+
+          // Category header row
+          worksheetData.push([categoryName.toUpperCase(), '', '', '', '', ''])
+
+          // Category products
+          categoryProducts.forEach(item => {
+            const rowData = [
+              '',
+              item.product_name,
+              item.quantity_sold,
+              item.order_count || 0,
+              item.revenue,
+              item.average_price
+            ]
+            worksheetData.push(rowData)
+          })
+
+          // Category subtotal
+          const categoryTotalQty = categoryProducts.reduce((sum, item) => sum + (item.quantity_sold || 0), 0)
+          const categoryTotalOrders = categoryProducts.reduce((sum, item) => sum + (item.order_count || 0), 0)
+          const categoryTotalRevenue = categoryProducts.reduce((sum, item) => sum + (item.revenue || 0), 0)
+          const categoryAverage = categoryTotalQty > 0 ? categoryTotalRevenue / categoryTotalQty : 0
+
+          const categorySubtotalRow = [
+            `Subtotal ${categoryName}`,
+            '',
+            categoryTotalQty,
+            categoryTotalOrders,
+            categoryTotalRevenue,
+            categoryAverage
+          ]
+          worksheetData.push(categorySubtotalRow)
+          worksheetData.push([]) // Empty row between categories
+        })
+
+      // Grand total
+      const grandTotalAverage =
+        productSummary.totalQuantitySold > 0 ? productSummary.totalRevenue / productSummary.totalQuantitySold : 0
+      const grandTotalRow = [
+        'TOTAL KESELURUHAN',
+        '',
+        productSummary.totalQuantitySold,
+        productSummary.totalOrders,
+        productSummary.totalRevenue,
+        grandTotalAverage
+      ]
+      worksheetData.push(grandTotalRow)
+
+      // Create workbook dan worksheet
+      const workbook = XLSX.utils.book_new()
+      const worksheet = XLSX.utils.aoa_to_sheet(worksheetData)
+
+      // Apply basic formatting
+      this.applyBasicFormatting(worksheet, worksheetData.length, XLSX)
+
+      // Add worksheet ke workbook
+      XLSX.utils.book_append_sheet(workbook, worksheet, 'Laporan Transaksi')
+
+      // Generate filename
+      const exportFilename = filename || this.generateFilename('Laporan_Transaksi')
+
+      // Download file
+      XLSX.writeFile(workbook, exportFilename)
+
+      return { success: true, filename: exportFilename }
+    } catch (error) {
+      console.error('Error exporting sales report to Excel:', error)
+      return { success: false, error: 'Failed to export Excel file' }
+    }
+  }
+
+  /**
+   * Apply basic formatting (SheetJS compatible)
+   */
+  private static applyBasicFormatting(worksheet: any, totalRows: number, XLSX: any) {
+    // Set column widths
+    const colWidths = [
+      { wch: 25 }, // First column (category/label)
+      { wch: 30 }, // Second column (description/name)
+      { wch: 15 }, // Third column (numbers)
+      { wch: 15 }, // Fourth column (numbers)
+      { wch: 20 }, // Fifth column (amounts)
+      { wch: 15 } // Sixth column (percentages/averages)
+    ]
+    worksheet['!cols'] = colWidths
+
+    // Set row heights for better spacing
+    worksheet['!rows'] = [
+      { hpt: 30 }, // Title row
+      { hpt: 25 }, // Period row
+      { hpt: 15 }, // Empty row
+      { hpt: 25 }, // Section headers
+      { hpt: 15 } // Empty row
+    ]
+
+    // Merge cells untuk main headers
+    const merges = [
+      { s: { r: 0, c: 0 }, e: { r: 0, c: 5 } }, // Main title
+      { s: { r: 1, c: 0 }, e: { r: 1, c: 5 } } // Period
+    ]
+
+    // Find and add merges for section headers
+    const sectionHeaders = [
+      'RINGKASAN PERIODE',
+      'INVOICE',
+      'RINGKASAN METODE PEMBAYARAN',
+      'RINGKASAN KATEGORI',
+      'RINGKASAN ITEM'
+    ]
+
+    for (let i = 0; i < totalRows; i++) {
+      const cell = worksheet[XLSX.utils.encode_cell({ r: i, c: 0 })]
+      if (cell && sectionHeaders.includes(cell.v)) {
+        merges.push({ s: { r: i, c: 0 }, e: { r: i, c: 5 } })
+      }
+    }
+
+    worksheet['!merges'] = merges
+
+    // Apply number formatting untuk currency cells
+    this.applyNumberFormatting(worksheet, totalRows, XLSX)
+  }
+
+  /**
+   * Apply number formatting for currency
+   */
+  private static applyNumberFormatting(worksheet: any, totalRows: number, XLSX: any) {
+    // Apply currency formatting to amount columns
+    for (let row = 0; row < totalRows; row++) {
+      // Check columns that might contain currency values (columns 1, 4, 5)
+      ;[1, 4, 5].forEach(col => {
+        const cellAddress = XLSX.utils.encode_cell({ r: row, c: col })
+        const cell = worksheet[cellAddress]
+
+        if (cell && typeof cell.v === 'number' && cell.v > 1000) {
+          // Apply Indonesian currency format for large numbers
+          cell.z = '#,##0'
+          cell.t = 'n'
+        }
+      })
+    }
+
+    // Apply formatting to specific sections
+    this.applySectionFormatting(worksheet, totalRows, XLSX)
+  }
+
+  /**
+   * Apply specific formatting to sections
+   */
+  private static applySectionFormatting(worksheet: any, totalRows: number, XLSX: any) {
+    // Find and format table headers and total rows
+    const headerKeywords = ['No', 'Metode Pembayaran', 'Nama', 'Kategori', 'Produk']
+    const totalKeywords = ['TOTAL', 'Subtotal']
+
+    for (let row = 0; row < totalRows; row++) {
+      const cell = worksheet[XLSX.utils.encode_cell({ r: row, c: 0 })]
+
+      if (cell) {
+        // Format table headers
+        if (headerKeywords.some(keyword => cell.v === keyword)) {
+          for (let col = 0; col < 6; col++) {
+            const headerCellAddress = XLSX.utils.encode_cell({ r: row, c: col })
+            const headerCell = worksheet[headerCellAddress]
+            if (headerCell) {
+              headerCell.s = {
+                font: { bold: true },
+                fill: { fgColor: { rgb: 'F3F4F6' } },
+                border: {
+                  bottom: { style: 'medium', color: { rgb: '000000' } }
+                }
+              }
+            }
+          }
+        }
+
+        // Format total rows
+        if (totalKeywords.some(keyword => cell.v?.toString().startsWith(keyword))) {
+          for (let col = 0; col < 6; col++) {
+            const totalCellAddress = XLSX.utils.encode_cell({ r: row, c: col })
+            const totalCell = worksheet[totalCellAddress]
+            if (totalCell) {
+              totalCell.s = {
+                font: { bold: true },
+                border: {
+                  top: { style: 'medium', color: { rgb: '000000' } }
+                }
+              }
+            }
+          }
+        }
+
+        // Format section headers
+        const sectionHeaders = [
+          'RINGKASAN PERIODE',
+          'INVOICE',
+          'RINGKASAN METODE PEMBAYARAN',
+          'RINGKASAN KATEGORI',
+          'RINGKASAN ITEM'
+        ]
+        if (sectionHeaders.includes(cell.v)) {
+          cell.s = {
+            font: { bold: true, color: { rgb: '662D91' } },
+            fill: { fgColor: { rgb: 'F8F9FA' } }
+          }
+        }
+      }
+    }
+  }
+
+  /**
+   * Generate filename with timestamp
+   */
+  private static generateFilename(prefix: string): string {
+    const now = new Date()
+    const year = now.getFullYear()
+    const month = (now.getMonth() + 1).toString().padStart(2, '0')
+    const day = now.getDate().toString().padStart(2, '0')
+    const hour = now.getHours().toString().padStart(2, '0')
+    const minute = now.getMinutes().toString().padStart(2, '0')
+
+    return `${prefix}_${year}_${month}_${day}_${hour}${minute}.xlsx`
+  }
+
+  /**
+   * Export custom sales data to Excel with configuration
+   */
+  static async exportCustomSalesData(
+    salesData: SalesReportData,
+    options?: {
+      includeSections?: {
+        ringkasan?: boolean
+        invoice?: boolean
+        paymentMethods?: boolean
+        categories?: boolean
+        products?: boolean
+      }
+      customFilename?: string
+      sheetName?: string
+    }
+  ) {
+    try {
+      const XLSX = await import('xlsx')
+      const worksheetData: any[][] = []
+
+      // Always include title and period
+      worksheetData.push(['LAPORAN TRANSAKSI'])
+      worksheetData.push([
+        `Periode: ${salesData.profitLoss.date_from.split('T')[0]} - ${salesData.profitLoss.date_to.split('T')[0]}`
+      ])
+      worksheetData.push([])
+
+      const sections = options?.includeSections || {
+        ringkasan: true,
+        invoice: true,
+        paymentMethods: true,
+        categories: true,
+        products: true
+      }
+
+      // Conditionally add sections based on options
+      if (sections.ringkasan) {
+        worksheetData.push(['RINGKASAN PERIODE'])
+        worksheetData.push([])
+        // Add ringkasan data...
+        const ringkasanData = [
+          ['Total Penjualan:', `Rp ${salesData.profitLoss.summary.total_revenue.toLocaleString('id-ID')}`],
+          ['Total Diskon:', `Rp ${salesData.profitLoss.summary.total_discount.toLocaleString('id-ID')}`],
+          ['Total Pajak:', `Rp ${salesData.profitLoss.summary.total_tax.toLocaleString('id-ID')}`],
+          ['Total:', `Rp ${salesData.profitLoss.summary.total_revenue.toLocaleString('id-ID')}`]
+        ]
+        ringkasanData.forEach(row => worksheetData.push([row[0], row[1]]))
+        worksheetData.push([])
+        worksheetData.push([])
+      }
+
+      // Add other sections similarly based on options...
+
+      const workbook = XLSX.utils.book_new()
+      const worksheet = XLSX.utils.aoa_to_sheet(worksheetData)
+
+      this.applyBasicFormatting(worksheet, worksheetData.length, XLSX)
+
+      const sheetName = options?.sheetName || 'Laporan Transaksi'
+      XLSX.utils.book_append_sheet(workbook, worksheet, sheetName)
+
+      const exportFilename = options?.customFilename || this.generateFilename('Custom_Sales_Report')
+      XLSX.writeFile(workbook, exportFilename)
+
+      return { success: true, filename: exportFilename }
+    } catch (error) {
+      console.error('Error exporting custom sales report to Excel:', error)
+      return { success: false, error: 'Failed to export Excel file' }
+    }
+  }
+}
@@ -0,0 +1,364 @@
+// services/pdfExportPaymentService.ts
+import { PaymentReport } from '@/types/services/analytic'
+
+export class PDFExportPaymentService {
+  /**
+   * Export Payment Method Report to PDF
+   */
+  static async exportPaymentMethodToPDF(paymentData: PaymentReport, filename?: string) {
+    try {
+      // Dynamic import untuk jsPDF
+      const jsPDFModule = await import('jspdf')
+      const jsPDF = jsPDFModule.default
+
+      // Create new PDF document - PORTRAIT A4
+      const pdf = new jsPDF('p', 'mm', 'a4')
+
+      // Add content
+      await this.addPaymentReportContent(pdf, paymentData)
+
+      // Generate filename
+      const exportFilename = filename || this.generateFilename('Laporan_Metode_Pembayaran', 'pdf')
+
+      // Save PDF
+      pdf.save(exportFilename)
+
+      return { success: true, filename: exportFilename }
+    } catch (error) {
+      console.error('Error exporting payment report to PDF:', error)
+      return { success: false, error: `PDF export failed: ${(error as Error).message}` }
+    }
+  }
+
+  /**
+   * Add payment report content to PDF
+   */
+  private static async addPaymentReportContent(pdf: any, paymentData: PaymentReport) {
+    let yPos = 20
+    const pageWidth = pdf.internal.pageSize.getWidth()
+    const pageHeight = pdf.internal.pageSize.getHeight()
+    const marginLeft = 20
+    const marginRight = 20
+    const marginBottom = 15
+
+    // Helper function to check page break
+    const checkPageBreak = (neededSpace: number) => {
+      if (yPos + neededSpace > pageHeight - marginBottom) {
+        pdf.addPage()
+        yPos = 20
+        return true
+      }
+      return false
+    }
+
+    // Title
+    yPos = this.addReportTitle(pdf, paymentData, yPos, pageWidth, marginLeft, marginRight)
+
+    // Section 1: Ringkasan
+    checkPageBreak(50)
+    yPos = this.addRingkasanSection(pdf, paymentData, yPos, pageWidth, marginLeft, marginRight, checkPageBreak)
+
+    // Section 2: Payment Methods Detail
+    checkPageBreak(80)
+    yPos = this.addPaymentMethodsSection(pdf, paymentData, yPos, pageWidth, marginLeft, marginRight, checkPageBreak)
+  }
+
+  /**
+   * Add report title
+   */
+  private static addReportTitle(
+    pdf: any,
+    paymentData: PaymentReport,
+    startY: number,
+    pageWidth: number,
+    marginLeft: number,
+    marginRight: number
+  ): number {
+    let yPos = startY
+
+    // Title
+    pdf.setFontSize(20)
+    pdf.setFont('helvetica', 'bold')
+    pdf.setTextColor(0, 0, 0)
+    pdf.text('Laporan Metode Pembayaran', pageWidth / 2, yPos, { align: 'center' })
+    yPos += 10
+
+    // Period
+    pdf.setFontSize(12)
+    pdf.setFont('helvetica', 'normal')
+    const periodText = `${paymentData.date_from.split('T')[0]} - ${paymentData.date_to.split('T')[0]}`
+    pdf.text(periodText, pageWidth / 2, yPos, { align: 'center' })
+    yPos += 10
+
+    // Purple line separator
+    pdf.setDrawColor(102, 45, 145)
+    pdf.setLineWidth(2)
+    pdf.line(marginLeft, yPos, pageWidth - marginRight, yPos)
+    yPos += 15
+
+    return yPos
+  }
+
+  /**
+   * Add Ringkasan section - SAMA SEPERTI SALES REPORT STYLE
+   */
+  private static addRingkasanSection(
+    pdf: any,
+    paymentData: PaymentReport,
+    startY: number,
+    pageWidth: number,
+    marginLeft: number,
+    marginRight: number,
+    checkPageBreak: (space: number) => boolean
+  ): number {
+    let yPos = startY
+
+    // Section title - SAMA SEPERTI SALES REPORT
+    pdf.setFontSize(14)
+    pdf.setFont('helvetica', 'bold')
+    pdf.setTextColor(102, 45, 145)
+    pdf.text('Ringkasan', marginLeft, yPos)
+    yPos += 12
+
+    // Reset text color
+    pdf.setTextColor(0, 0, 0)
+    pdf.setFontSize(11)
+
+    const ringkasanItems = [
+      { label: 'Total Amount', value: this.formatCurrency(paymentData.summary.total_amount), bold: false },
+      { label: 'Total Orders', value: paymentData.summary.total_orders.toString(), bold: false },
+      { label: 'Total Payments', value: paymentData.summary.total_payments.toString(), bold: false },
+      { label: 'Average Order Value', value: this.formatCurrency(paymentData.summary.average_order_value), bold: true }
+    ]
+
+    ringkasanItems.forEach((item, index) => {
+      if (checkPageBreak(15)) yPos = 20
+
+      // Set font weight
+      pdf.setFont('helvetica', item.bold ? 'bold' : 'normal')
+
+      pdf.text(item.label, marginLeft, yPos)
+      pdf.text(item.value, pageWidth - marginRight, yPos, { align: 'right' })
+
+      // Light separator line (except for last row)
+      if (!item.bold) {
+        pdf.setDrawColor(230, 230, 230)
+        pdf.setLineWidth(0.5)
+        pdf.line(marginLeft, yPos + 2, pageWidth - marginRight, yPos + 2)
+      }
+
+      yPos += 8
+    })
+
+    return yPos + 20
+  }
+
+  /**
+   * Add Payment Methods section - ORIGINAL STYLE DARI SALES REPORT
+   */
+  private static addPaymentMethodsSection(
+    pdf: any,
+    paymentData: PaymentReport,
+    startY: number,
+    pageWidth: number,
+    marginLeft: number,
+    marginRight: number,
+    checkPageBreak: (space: number) => boolean
+  ): number {
+    let yPos = startY
+
+    // Section title
+    pdf.setFontSize(14)
+    pdf.setFont('helvetica', 'bold')
+    pdf.setTextColor(102, 45, 145)
+    pdf.text('Rincian Metode Pembayaran', marginLeft, yPos)
+    yPos += 12
+
+    // Reset formatting
+    pdf.setTextColor(0, 0, 0)
+
+    // Table setup
+    const tableWidth = pageWidth - marginLeft - marginRight
+    const colWidths = [50, 25, 30, 35, 25] // Method, Type, Order, Amount, %
+    let currentX = marginLeft
+
+    // Table header
+    pdf.setFillColor(240, 240, 240)
+    pdf.rect(marginLeft, yPos, tableWidth, 10, 'F')
+
+    pdf.setFont('helvetica', 'bold')
+    pdf.setFontSize(9)
+
+    const headers = ['Metode Pembayaran', 'Tipe', 'Jumlah Order', 'Total Amount', 'Persentase']
+    currentX = marginLeft
+
+    headers.forEach((header, index) => {
+      if (index === 0) {
+        pdf.text(header, currentX + 2, yPos + 6)
+      } else {
+        pdf.text(header, currentX + colWidths[index] / 2, yPos + 6, { align: 'center' })
+      }
+      currentX += colWidths[index]
+    })
+
+    yPos += 12
+
+    // Table rows
+    pdf.setFont('helvetica', 'normal')
+    pdf.setFontSize(9)
+
+    paymentData.data?.forEach((payment, index) => {
+      if (checkPageBreak(10)) yPos = 20
+
+      currentX = marginLeft
+      pdf.setFont('helvetica', 'normal')
+      pdf.setFontSize(9)
+      pdf.setTextColor(0, 0, 0)
+
+      // Method name
+      pdf.text(payment.payment_method_name, currentX + 2, yPos + 5)
+      currentX += colWidths[0]
+
+      // Type with simple color coding
+      const typeText = payment.payment_method_type.toUpperCase()
+      if (payment.payment_method_type === 'cash') {
+        pdf.setTextColor(0, 120, 0) // Green
+      } else if (payment.payment_method_type === 'card') {
+        pdf.setTextColor(0, 80, 200) // Blue
+      } else {
+        pdf.setTextColor(200, 100, 0) // Orange
+      }
+      pdf.text(typeText, currentX + colWidths[1] / 2, yPos + 5, { align: 'center' })
+      pdf.setTextColor(0, 0, 0) // Reset color
+      currentX += colWidths[1]
+
+      // Order count
+      pdf.text(payment.order_count.toString(), currentX + colWidths[2] / 2, yPos + 5, { align: 'center' })
+      currentX += colWidths[2]
+
+      // Amount
+      pdf.text(this.formatCurrency(payment.total_amount), currentX + colWidths[3] - 2, yPos + 5, { align: 'right' })
+      currentX += colWidths[3]
+
+      // Percentage
+      pdf.text(`${(payment.percentage ?? 0).toFixed(1)}%`, currentX + colWidths[4] / 2, yPos + 5, { align: 'center' })
+
+      // Draw bottom border line
+      pdf.setDrawColor(230, 230, 230)
+      pdf.setLineWidth(0.3)
+      pdf.line(marginLeft, yPos + 8, marginLeft + tableWidth, yPos + 8)
+
+      yPos += 10
+    })
+
+    // Table footer (Total) - directly after last row
+    pdf.setFillColor(245, 245, 245) // Lighter gray
+    pdf.rect(marginLeft, yPos, tableWidth, 10, 'F')
+
+    pdf.setFont('helvetica', 'bold')
+    pdf.setFontSize(9)
+
+    currentX = marginLeft
+    pdf.text('TOTAL', currentX + 2, yPos + 6)
+    currentX += colWidths[0] + colWidths[1]
+
+    pdf.text((paymentData.summary?.total_orders ?? 0).toString(), currentX + colWidths[2] / 2, yPos + 6, {
+      align: 'center'
+    })
+    currentX += colWidths[2]
+
+    pdf.text(this.formatCurrency(paymentData.summary?.total_amount ?? 0), currentX + colWidths[3] - 2, yPos + 6, {
+      align: 'right'
+    })
+
+    currentX += colWidths[3]
+    pdf.text('100.0%', currentX + colWidths[4] / 2, yPos + 6, { align: 'center' })
+
+    return yPos + 20
+  }
+
+  /**
+   * Format currency for display
+   */
+  private static formatCurrency(amount: number): string {
+    return `Rp ${amount.toLocaleString('id-ID')}`
+  }
+
+  /**
+   * Generate filename with timestamp
+   */
+  private static generateFilename(prefix: string, extension: string): string {
+    const now = new Date()
+    const year = now.getFullYear()
+    const month = (now.getMonth() + 1).toString().padStart(2, '0')
+    const day = now.getDate().toString().padStart(2, '0')
+    const hour = now.getHours().toString().padStart(2, '0')
+    const minute = now.getMinutes().toString().padStart(2, '0')
+
+    return `${prefix}_${year}_${month}_${day}_${hour}${minute}.${extension}`
+  }
+
+  /**
+   * Export Payment Method data with custom configuration
+   */
+  static async exportCustomPaymentToPDF(
+    paymentData: PaymentReport,
+    options?: {
+      title?: string
+      includeSummary?: boolean
+      customFilename?: string
+    }
+  ) {
+    try {
+      const jsPDFModule = await import('jspdf')
+      const jsPDF = jsPDFModule.default
+
+      const pdf = new jsPDF('p', 'mm', 'a4')
+
+      let yPos = 20
+      const pageWidth = pdf.internal.pageSize.getWidth()
+      const pageHeight = pdf.internal.pageSize.getHeight()
+      const marginLeft = 20
+      const marginRight = 20
+      const marginBottom = 15
+
+      const checkPageBreak = (neededSpace: number) => {
+        if (yPos + neededSpace > pageHeight - marginBottom) {
+          pdf.addPage()
+          yPos = 20
+          return true
+        }
+        return false
+      }
+
+      // Custom title if provided
+      if (options?.title) {
+        pdf.setFontSize(20)
+        pdf.setFont('helvetica', 'bold')
+        pdf.setTextColor(0, 0, 0)
+        pdf.text(options.title, pageWidth / 2, yPos, { align: 'center' })
+        yPos += 15
+      } else {
+        yPos = this.addReportTitle(pdf, paymentData, yPos, pageWidth, marginLeft, marginRight)
+      }
+
+      // Optional summary section
+      if (options?.includeSummary !== false) {
+        checkPageBreak(50)
+        yPos = this.addRingkasanSection(pdf, paymentData, yPos, pageWidth, marginLeft, marginRight, checkPageBreak)
+      }
+
+      // Payment methods detail
+      checkPageBreak(80)
+      yPos = this.addPaymentMethodsSection(pdf, paymentData, yPos, pageWidth, marginLeft, marginRight, checkPageBreak)
+
+      const exportFilename = options?.customFilename || this.generateFilename('Custom_Payment_Report', 'pdf')
+      pdf.save(exportFilename)
+
+      return { success: true, filename: exportFilename }
+    } catch (error) {
+      console.error('Error exporting custom payment report to PDF:', error)
+      return { success: false, error: `PDF export failed: ${(error as Error).message}` }
+    }
+  }
+}
@@ -0,0 +1,577 @@
+// services/pdfExportService.ts
+import type { ProfitLossReport } from '@/types/services/analytic'
+
+export class PDFExportProfitLossService {
+  /**
+   * Export Profit Loss Report to PDF (Simple approach)
+   */
+  static async exportProfitLossToPDF(profitData: ProfitLossReport, filename?: string) {
+    try {
+      // Dynamic import untuk jsPDF
+      const jsPDFModule = await import('jspdf')
+      const jsPDF = jsPDFModule.default
+
+      // Create new PDF document - PORTRAIT A4
+      const pdf = new jsPDF('p', 'mm', 'a4') // portrait
+
+      // Add content
+      this.addBasicContent(pdf, profitData)
+
+      // Generate filename
+      const exportFilename = filename || this.generateFilename('Laba_Rugi', 'pdf')
+
+      // Save PDF
+      pdf.save(exportFilename)
+
+      return { success: true, filename: exportFilename }
+    } catch (error) {
+      console.error('Error exporting to PDF:', error)
+      return { success: false, error: `PDF export failed: ${(error as Error).message}` }
+    }
+  }
+
+  /**
+   * Add basic content to PDF with proper page management
+   */
+  private static addBasicContent(pdf: any, profitData: ProfitLossReport) {
+    let yPos = 20 // Reduced from 30
+    const pageWidth = pdf.internal.pageSize.getWidth()
+    const pageHeight = pdf.internal.pageSize.getHeight()
+    const marginBottom = 15 // Reduced from 20
+
+    // Title - Center aligned
+    pdf.setFontSize(18) // Reduced from 20
+    pdf.setFont('helvetica', 'bold')
+    pdf.text('Laporan Laba Rugi', pageWidth / 2, yPos, { align: 'center' })
+    yPos += 10 // Reduced from 15
+
+    // Period - Center aligned
+    pdf.setFontSize(11) // Reduced from 12
+    pdf.setFont('helvetica', 'normal')
+    const periodText = `${profitData.date_from.split('T')[0]} - ${profitData.date_to.split('T')[0]}`
+    pdf.text(periodText, pageWidth / 2, yPos, { align: 'center' })
+    yPos += 12 // Reduced from 20
+
+    // Purple line separator
+    pdf.setDrawColor(102, 45, 145) // Purple color
+    pdf.setLineWidth(1.5) // Reduced from 2
+    pdf.line(20, yPos, pageWidth - 20, yPos)
+    yPos += 15 // Reduced from 25
+
+    // Ringkasan section
+    pdf.setFontSize(14) // Reduced from 16
+    pdf.setFont('helvetica', 'bold')
+    pdf.setTextColor(102, 45, 145) // Purple color
+    pdf.text('Ringkasan', 20, yPos)
+    yPos += 12 // Reduced from 20
+
+    // Reset text color to black
+    pdf.setTextColor(0, 0, 0)
+    pdf.setFont('helvetica', 'normal')
+    pdf.setFontSize(11) // Reduced from 12
+
+    // Summary items with consistent spacing
+    const summaryItems = [
+      { label: 'Total Penjualan', value: this.formatCurrency(profitData.summary.total_revenue) },
+      { label: 'Total Biaya', value: this.formatCurrency(profitData.summary.total_cost) },
+      { label: 'Total Diskon', value: this.formatCurrency(profitData.summary.total_discount) },
+      { label: 'Total Pajak', value: this.formatCurrency(profitData.summary.total_tax) },
+      { label: 'Laba Kotor', value: this.formatCurrency(profitData.summary.gross_profit) },
+      { label: 'Laba Bersih', value: this.formatCurrency(profitData.summary.net_profit) }
+    ]
+
+    summaryItems.forEach((item, index) => {
+      // Add some spacing between items
+      if (index > 0) yPos += 8 // Reduced from 12
+
+      // Check if we need new page for summary items
+      if (yPos > pageHeight - marginBottom - 15) {
+        pdf.addPage()
+        yPos = 20 // Reduced from 30
+      }
+
+      // Label on left
+      pdf.text(item.label, 20, yPos)
+
+      // Value on right
+      pdf.text(item.value, pageWidth - 20, yPos, { align: 'right' })
+
+      // Light gray line separator
+      pdf.setDrawColor(230, 230, 230)
+      pdf.setLineWidth(0.3)
+      pdf.line(20, yPos + 3, pageWidth - 20, yPos + 3)
+    })
+
+    yPos += 20 // Reduced from 30
+
+    // Check if we need new page before daily breakdown
+    if (yPos > pageHeight - marginBottom - 40) {
+      pdf.addPage()
+      yPos = 20 // Reduced from 30
+    }
+
+    // Daily breakdown section
+    pdf.setFontSize(14) // Reduced from 16
+    pdf.setFont('helvetica', 'bold')
+    pdf.setTextColor(102, 45, 145) // Purple color
+    pdf.text('Rincian Harian', 20, yPos)
+    yPos += 12 // Reduced from 20
+
+    // Reset text color
+    pdf.setTextColor(0, 0, 0)
+
+    // Create simple daily breakdown with page management
+    profitData.data.forEach((daily, index) => {
+      // Estimate space needed for this daily section (approx 100mm)
+      const estimatedSpace = 100
+
+      // Check if we need new page before adding daily section
+      if (yPos + estimatedSpace > pageHeight - marginBottom) {
+        pdf.addPage()
+        yPos = 20 // Reduced from 30
+      }
+
+      yPos = this.addCleanDailySection(pdf, daily, yPos, pageWidth, pageHeight, marginBottom)
+      yPos += 10 // Reduced from 15 - Space between daily sections
+    })
+  }
+
+  /**
+   * Add clean daily section with page break management
+   */
+  private static addCleanDailySection(
+    pdf: any,
+    dailyData: any,
+    startY: number,
+    pageWidth: number,
+    pageHeight: number,
+    marginBottom: number
+  ) {
+    const date = new Date(dailyData.date).toLocaleDateString('id-ID', {
+      day: '2-digit',
+      month: 'long',
+      year: 'numeric'
+    })
+
+    let yPos = startY
+
+    // Check if we have enough space for the header
+    if (yPos > pageHeight - marginBottom - 20) {
+      pdf.addPage()
+      yPos = 20 // Reduced from 30
+    }
+
+    // Date header
+    pdf.setFontSize(12) // Reduced from 14
+    pdf.setFont('helvetica', 'bold')
+    pdf.text(date, 20, yPos)
+    yPos += 10 // Reduced from 15
+
+    // Daily data items
+    pdf.setFontSize(10) // Reduced from 11
+    pdf.setFont('helvetica', 'normal')
+
+    const dailyItems = [
+      { label: 'Penjualan', value: this.formatCurrency(dailyData.revenue) },
+      { label: 'HPP (Biaya Pokok)', value: this.formatCurrency(dailyData.cost) },
+      { label: 'Laba Kotor', value: this.formatCurrency(dailyData.gross_profit) },
+      { label: 'Pajak', value: this.formatCurrency(dailyData.tax) },
+      { label: 'Diskon', value: this.formatCurrency(dailyData.discount) },
+      { label: 'Jumlah Order', value: dailyData.orders.toString() + ' transaksi' },
+      { label: 'Laba Bersih', value: this.formatCurrency(dailyData.net_profit), isTotal: true }
+    ]
+
+    dailyItems.forEach((item, index) => {
+      if (index > 0) yPos += 7 // Reduced from 10
+
+      // Check if we need new page for each item
+      if (yPos > pageHeight - marginBottom - 15) {
+        pdf.addPage()
+        yPos = 20 // Reduced from 30
+      }
+
+      // Special styling for total (Laba Bersih)
+      if (item.isTotal) {
+        pdf.setFont('helvetica', 'bold')
+
+        // Light background for total row - adjusted to center with text
+        pdf.setFillColor(248, 248, 248)
+        pdf.rect(20, yPos - 4, pageWidth - 40, 9, 'F') // Slightly bigger and better positioned
+      } else {
+        pdf.setFont('helvetica', 'normal')
+      }
+
+      // Label on left - consistent with other rows
+      pdf.text(item.label, 25, yPos)
+
+      // Value on right - consistent with other rows
+      pdf.text(item.value, pageWidth - 25, yPos, { align: 'right' })
+
+      // Subtle line separator (except for last item)
+      if (index < dailyItems.length - 1) {
+        pdf.setDrawColor(245, 245, 245)
+        pdf.setLineWidth(0.2)
+        pdf.line(25, yPos + 1.5, pageWidth - 25, yPos + 1.5) // Reduced from yPos + 2
+      }
+    })
+
+    return yPos + 6 // Reduced from 8
+  }
+
+  /**
+   * Format currency for display
+   */
+  private static formatCurrency(amount: number): string {
+    return `Rp ${amount.toLocaleString('id-ID')}`
+  }
+
+  /**
+   * Generate filename with timestamp
+   */
+  private static generateFilename(prefix: string, extension: string): string {
+    const now = new Date()
+    const year = now.getFullYear()
+    const month = (now.getMonth() + 1).toString().padStart(2, '0')
+    const day = now.getDate().toString().padStart(2, '0')
+    const hour = now.getHours().toString().padStart(2, '0')
+    const minute = now.getMinutes().toString().padStart(2, '0')
+
+    return `${prefix}_${year}_${month}_${day}_${hour}${minute}.${extension}`
+  }
+
+  /**
+   * Alternative: More precise page break management
+   */
+  static async exportWithBetterPageBreaks(profitData: ProfitLossReport, filename?: string) {
+    try {
+      const jsPDFModule = await import('jspdf')
+      const jsPDF = jsPDFModule.default
+      const pdf = new jsPDF('p', 'mm', 'a4')
+
+      // Use more precise measurements
+      const pageHeight = pdf.internal.pageSize.getHeight() // ~297mm for A4
+      const safeHeight = pageHeight - 30 // Keep 30mm margin from bottom
+
+      let currentY = 30
+
+      // Helper function to check and add new page
+      const checkPageBreak = (neededSpace: number) => {
+        if (currentY + neededSpace > safeHeight) {
+          pdf.addPage()
+          currentY = 30
+          return true
+        }
+        return false
+      }
+
+      // Add title and header
+      currentY = this.addTitleSection(pdf, profitData, currentY)
+
+      // Add summary with page break check
+      checkPageBreak(80) // Estimate 80mm needed for summary
+      currentY = this.addSummarySection(pdf, profitData, currentY, checkPageBreak)
+
+      // Add daily breakdown
+      checkPageBreak(40) // Space for section header
+      currentY = this.addDailyBreakdownSection(pdf, profitData, currentY, checkPageBreak)
+
+      const exportFilename = filename || this.generateFilename('Laba_Rugi', 'pdf')
+      pdf.save(exportFilename)
+
+      return { success: true, filename: exportFilename }
+    } catch (error) {
+      console.error('Error exporting to PDF:', error)
+      return { success: false, error: `PDF export failed: ${(error as Error).message}` }
+    }
+  }
+
+  /**
+   * Add title section
+   */
+  private static addTitleSection(pdf: any, profitData: ProfitLossReport, startY: number): number {
+    let yPos = startY
+    const pageWidth = pdf.internal.pageSize.getWidth()
+
+    // Title
+    pdf.setFontSize(20)
+    pdf.setFont('helvetica', 'bold')
+    pdf.text('Laporan Laba Rugi', pageWidth / 2, yPos, { align: 'center' })
+    yPos += 15
+
+    // Period
+    pdf.setFontSize(12)
+    pdf.setFont('helvetica', 'normal')
+    const periodText = `${profitData.date_from.split('T')[0]} - ${profitData.date_to.split('T')[0]}`
+    pdf.text(periodText, pageWidth / 2, yPos, { align: 'center' })
+    yPos += 20
+
+    // Separator line
+    pdf.setDrawColor(102, 45, 145)
+    pdf.setLineWidth(2)
+    pdf.line(20, yPos, pageWidth - 20, yPos)
+    yPos += 25
+
+    return yPos
+  }
+
+  /**
+   * Add summary section with page break callback
+   */
+  private static addSummarySection(
+    pdf: any,
+    profitData: ProfitLossReport,
+    startY: number,
+    checkPageBreak: (space: number) => boolean
+  ): number {
+    let yPos = startY
+    const pageWidth = pdf.internal.pageSize.getWidth()
+
+    // Section title
+    pdf.setFontSize(16)
+    pdf.setFont('helvetica', 'bold')
+    pdf.setTextColor(102, 45, 145)
+    pdf.text('Ringkasan', 20, yPos)
+    yPos += 20
+
+    // Reset formatting
+    pdf.setTextColor(0, 0, 0)
+    pdf.setFont('helvetica', 'normal')
+    pdf.setFontSize(12)
+
+    const summaryItems = [
+      { label: 'Total Penjualan', value: this.formatCurrency(profitData.summary.total_revenue) },
+      { label: 'Total Biaya', value: this.formatCurrency(profitData.summary.total_cost) },
+      { label: 'Total Diskon', value: this.formatCurrency(profitData.summary.total_discount) },
+      { label: 'Total Pajak', value: this.formatCurrency(profitData.summary.total_tax) },
+      { label: 'Laba Kotor', value: this.formatCurrency(profitData.summary.gross_profit) },
+      { label: 'Laba Bersih', value: this.formatCurrency(profitData.summary.net_profit) }
+    ]
+
+    summaryItems.forEach((item, index) => {
+      if (index > 0) yPos += 12
+
+      // Check page break for each item
+      if (checkPageBreak(15)) {
+        yPos = 30
+      }
+
+      pdf.text(item.label, 20, yPos)
+      pdf.text(item.value, pageWidth - 20, yPos, { align: 'right' })
+
+      // Separator line
+      pdf.setDrawColor(230, 230, 230)
+      pdf.setLineWidth(0.3)
+      pdf.line(20, yPos + 3, pageWidth - 20, yPos + 3)
+    })
+
+    return yPos + 30
+  }
+
+  /**
+   * Add daily breakdown section with page break management
+   */
+  private static addDailyBreakdownSection(
+    pdf: any,
+    profitData: ProfitLossReport,
+    startY: number,
+    checkPageBreak: (space: number) => boolean
+  ): number {
+    let yPos = startY
+
+    // Section title
+    pdf.setFontSize(16)
+    pdf.setFont('helvetica', 'bold')
+    pdf.setTextColor(102, 45, 145)
+    pdf.text('Rincian Harian', 20, yPos)
+    yPos += 20
+
+    pdf.setTextColor(0, 0, 0)
+
+    profitData.data.forEach((daily, index) => {
+      // Check if we need space for this daily section (estimate ~90mm)
+      if (checkPageBreak(90)) {
+        yPos = 30
+      }
+
+      yPos = this.addSingleDayData(pdf, daily, yPos)
+      yPos += 15
+    })
+
+    return yPos
+  }
+
+  /**
+   * Add single day data
+   */
+  private static addSingleDayData(pdf: any, dailyData: any, startY: number): number {
+    const pageWidth = pdf.internal.pageSize.getWidth()
+    let yPos = startY
+
+    const date = new Date(dailyData.date).toLocaleDateString('id-ID', {
+      day: '2-digit',
+      month: 'long',
+      year: 'numeric'
+    })
+
+    // Date header
+    pdf.setFontSize(14)
+    pdf.setFont('helvetica', 'bold')
+    pdf.text(date, 20, yPos)
+    yPos += 15
+
+    // Daily items
+    pdf.setFontSize(11)
+    pdf.setFont('helvetica', 'normal')
+
+    const items = [
+      { label: 'Penjualan', value: this.formatCurrency(dailyData.revenue) },
+      { label: 'HPP (Biaya Pokok)', value: this.formatCurrency(dailyData.cost) },
+      { label: 'Laba Kotor', value: this.formatCurrency(dailyData.gross_profit) },
+      { label: 'Pajak', value: this.formatCurrency(dailyData.tax) },
+      { label: 'Diskon', value: this.formatCurrency(dailyData.discount) },
+      { label: 'Jumlah Order', value: dailyData.orders.toString() + ' transaksi' },
+      { label: 'Laba Bersih', value: this.formatCurrency(dailyData.net_profit), isTotal: true }
+    ]
+
+    items.forEach((item, index) => {
+      if (index > 0) yPos += 10
+
+      if (item.isTotal) {
+        pdf.setFont('helvetica', 'bold')
+        pdf.setFillColor(248, 248, 248)
+        pdf.rect(20, yPos - 4, pageWidth - 40, 10, 'F')
+      } else {
+        pdf.setFont('helvetica', 'normal')
+      }
+
+      pdf.text(item.label, 25, yPos)
+      pdf.text(item.value, pageWidth - 25, yPos, { align: 'right' })
+
+      if (index < items.length - 1) {
+        pdf.setDrawColor(245, 245, 245)
+        pdf.setLineWidth(0.2)
+        pdf.line(25, yPos + 2, pageWidth - 25, yPos + 2)
+      }
+    })
+
+    return yPos + 8
+  }
+
+  /**
+   * Alternative HTML to PDF method (if needed)
+   */
+  static async exportToHTMLPDF(profitData: ProfitLossReport, filename?: string) {
+    try {
+      const htmlContent = this.generateSimpleHTML(profitData)
+
+      // Create a temporary element and trigger print
+      const printWindow = window.open('', '_blank')
+      if (printWindow) {
+        printWindow.document.write(htmlContent)
+        printWindow.document.close()
+        printWindow.focus()
+        printWindow.print()
+        printWindow.close()
+      }
+
+      return { success: true, filename: filename || 'Laba_Rugi.pdf' }
+    } catch (error) {
+      return { success: false, error: `HTML PDF export failed: ${(error as Error).message}` }
+    }
+  }
+
+  /**
+   * Generate simple HTML for printing
+   */
+  private static generateSimpleHTML(profitData: ProfitLossReport): string {
+    const dateColumns = profitData.data.map(daily => {
+      const date = new Date(daily.date)
+      return date.toLocaleDateString('id-ID', { day: '2-digit', month: 'short' })
+    })
+
+    return `
+      <!DOCTYPE html>
+      <html>
+        <head>
+          <title>Laporan Laba Rugi</title>
+          <style>
+            body { font-family: Arial, sans-serif; margin: 20px; }
+            h1 { color: #1f4e79; text-align: center; }
+            h2 { color: #333; border-bottom: 2px solid #ccc; }
+            .summary { margin-bottom: 30px; }
+            .summary-item { margin: 5px 0; padding: 5px; background: #f9f9f9; }
+            table { width: 100%; border-collapse: collapse; margin-top: 20px; }
+            th, td { border: 1px solid #ccc; padding: 8px; text-align: left; }
+            th { background-color: #d35400; color: white; text-align: center; }
+            .number { text-align: right; }
+            .center { text-align: center; }
+            @media print { 
+              body { margin: 10px; } 
+              .page-break { page-break-before: always; }
+            }
+          </style>
+        </head>
+        <body>
+          <h1>LAPORAN LABA RUGI</h1>
+          <p style="text-align: center;">
+            Periode: ${profitData.date_from.split('T')[0]} - ${profitData.date_to.split('T')[0]}
+          </p>
+          
+          <h2>RINGKASAN PERIODE</h2>
+          <div class="summary">
+            <div class="summary-item">Total Revenue: <strong>${this.formatCurrency(profitData.summary.total_revenue)}</strong></div>
+            <div class="summary-item">Total Cost: <strong>${this.formatCurrency(profitData.summary.total_cost)}</strong></div>
+            <div class="summary-item">Gross Profit: <strong>${this.formatCurrency(profitData.summary.gross_profit)}</strong></div>
+            <div class="summary-item">Net Profit: <strong>${this.formatCurrency(profitData.summary.net_profit)}</strong></div>
+            <div class="summary-item">Total Orders: <strong>${profitData.summary.total_orders}</strong></div>
+          </div>
+          
+          <div class="page-break"></div>
+          <h2>RINCIAN HARIAN</h2>
+          <table>
+            <thead>
+              <tr>
+                <th>NO</th>
+                <th>KETERANGAN</th>
+                <th></th>
+                ${dateColumns.map(date => `<th>${date}</th>`).join('')}
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td class="center">1</td>
+                <td><strong>TOTAL PENJ</strong></td>
+                <td class="center">:</td>
+                ${profitData.data.map(daily => `<td class="number">${this.formatCurrency(daily.revenue)}</td>`).join('')}
+              </tr>
+              <tr>
+                <td class="center">2</td>
+                <td><strong>HPP</strong></td>
+                <td class="center">:</td>
+                ${profitData.data.map(daily => `<td class="number">${this.formatCurrency(daily.cost)}</td>`).join('')}
+              </tr>
+              <tr>
+                <td class="center">3</td>
+                <td><strong>Laba Kotor</strong></td>
+                <td class="center">:</td>
+                ${profitData.data.map(daily => `<td class="number">${this.formatCurrency(daily.gross_profit)}</td>`).join('')}
+              </tr>
+              <tr>
+                <td class="center">4</td>
+                <td><strong>Biaya lain</strong></td>
+                <td class="center">:</td>
+                ${profitData.data.map(daily => `<td class="number">${this.formatCurrency(daily.tax + daily.discount)}</td>`).join('')}
+              </tr>
+              <tr style="background-color: #154360; color: white; font-weight: bold;">
+                <td class="center">5</td>
+                <td>Laba/Rugi</td>
+                <td class="center">:</td>
+                ${profitData.data.map(daily => `<td class="number">${this.formatCurrency(daily.net_profit)}</td>`).join('')}
+              </tr>
+            </tbody>
+          </table>
+        </body>
+      </html>
+    `
+  }
+}
@@ -0,0 +1,529 @@
+// services/pdfExportSalesOrderService.ts
+import { SalesReport } from '@/types/services/analytic'
+
+export class PDFExportSalesOrderService {
+  /**
+   * Export Sales Order Report to PDF
+   */
+  static async exportSalesOrderToPDF(salesData: SalesReport, filename?: string) {
+    try {
+      // Dynamic import untuk jsPDF
+      const jsPDFModule = await import('jspdf')
+      const jsPDF = jsPDFModule.default
+
+      // Create new PDF document - PORTRAIT A4
+      const pdf = new jsPDF('p', 'mm', 'a4')
+
+      // Add content
+      await this.addSalesOrderReportContent(pdf, salesData)
+
+      // Generate filename
+      const exportFilename = filename || this.generateFilename('Laporan_Pesanan_Penjualan', 'pdf')
+
+      // Save PDF
+      pdf.save(exportFilename)
+
+      return { success: true, filename: exportFilename }
+    } catch (error) {
+      console.error('Error exporting sales order report to PDF:', error)
+      return { success: false, error: `PDF export failed: ${(error as Error).message}` }
+    }
+  }
+
+  /**
+   * Add sales order report content to PDF
+   */
+  private static async addSalesOrderReportContent(pdf: any, salesData: SalesReport) {
+    let yPos = 20
+    const pageWidth = pdf.internal.pageSize.getWidth()
+    const pageHeight = pdf.internal.pageSize.getHeight()
+    const marginLeft = 20
+    const marginRight = 20
+    const marginBottom = 15
+
+    // Helper function to check page break
+    const checkPageBreak = (neededSpace: number) => {
+      if (yPos + neededSpace > pageHeight - marginBottom) {
+        pdf.addPage()
+        yPos = 20
+        return true
+      }
+      return false
+    }
+
+    // Title
+    yPos = this.addReportTitle(pdf, salesData, yPos, pageWidth, marginLeft, marginRight)
+
+    // Section 1: Ringkasan
+    checkPageBreak(60)
+    yPos = this.addRingkasanSection(pdf, salesData, yPos, pageWidth, marginLeft, marginRight, checkPageBreak)
+
+    // Section 2: Daily Sales Details
+    checkPageBreak(100)
+    yPos = this.addDailySalesSection(pdf, salesData, yPos, pageWidth, marginLeft, marginRight, checkPageBreak)
+  }
+
+  /**
+   * Add report title
+   */
+  private static addReportTitle(
+    pdf: any,
+    salesData: SalesReport,
+    startY: number,
+    pageWidth: number,
+    marginLeft: number,
+    marginRight: number
+  ): number {
+    let yPos = startY
+
+    // Title
+    pdf.setFontSize(20)
+    pdf.setFont('helvetica', 'bold')
+    pdf.setTextColor(0, 0, 0)
+    pdf.text('Laporan Pesanan Penjualan', pageWidth / 2, yPos, { align: 'center' })
+    yPos += 10
+
+    // Period
+    pdf.setFontSize(12)
+    pdf.setFont('helvetica', 'normal')
+    const periodText = `${salesData.date_from.split('T')[0]} - ${salesData.date_to.split('T')[0]}`
+    pdf.text(periodText, pageWidth / 2, yPos, { align: 'center' })
+    yPos += 10
+
+    // Purple line separator
+    pdf.setDrawColor(102, 45, 145)
+    pdf.setLineWidth(2)
+    pdf.line(marginLeft, yPos, pageWidth - marginRight, yPos)
+    yPos += 15
+
+    return yPos
+  }
+
+  /**
+   * Add Ringkasan section
+   */
+  private static addRingkasanSection(
+    pdf: any,
+    salesData: SalesReport,
+    startY: number,
+    pageWidth: number,
+    marginLeft: number,
+    marginRight: number,
+    checkPageBreak: (space: number) => boolean
+  ): number {
+    let yPos = startY
+
+    // Section title
+    pdf.setFontSize(14)
+    pdf.setFont('helvetica', 'bold')
+    pdf.setTextColor(102, 45, 145)
+    pdf.text('Ringkasan', marginLeft, yPos)
+    yPos += 12
+
+    // Reset text color
+    pdf.setTextColor(0, 0, 0)
+    pdf.setFontSize(11)
+
+    const ringkasanItems = [
+      { label: 'Total Sales', value: this.formatCurrency(salesData.summary.total_sales), bold: false },
+      { label: 'Total Orders', value: salesData.summary.total_orders.toString(), bold: false },
+      { label: 'Total Items', value: salesData.summary.total_items.toString(), bold: false },
+      { label: 'Average Order Value', value: this.formatCurrency(salesData.summary.average_order_value), bold: false },
+      { label: 'Total Tax', value: this.formatCurrency(salesData.summary.total_tax), bold: false },
+      { label: 'Total Discount', value: this.formatCurrency(salesData.summary.total_discount), bold: false },
+      { label: 'Net Sales', value: this.formatCurrency(salesData.summary.net_sales), bold: true }
+    ]
+
+    ringkasanItems.forEach((item, index) => {
+      if (checkPageBreak(15)) yPos = 20
+
+      // Set font weight
+      pdf.setFont('helvetica', item.bold ? 'bold' : 'normal')
+
+      pdf.text(item.label, marginLeft, yPos)
+      pdf.text(item.value, pageWidth - marginRight, yPos, { align: 'right' })
+
+      // Light separator line (except for bold row)
+      if (!item.bold) {
+        pdf.setDrawColor(230, 230, 230)
+        pdf.setLineWidth(0.5)
+        pdf.line(marginLeft, yPos + 2, pageWidth - marginRight, yPos + 2)
+      }
+
+      yPos += 8
+    })
+
+    return yPos + 20
+  }
+
+  /**
+   * Add Daily Sales section
+   */
+  private static addDailySalesSection(
+    pdf: any,
+    salesData: SalesReport,
+    startY: number,
+    pageWidth: number,
+    marginLeft: number,
+    marginRight: number,
+    checkPageBreak: (space: number) => boolean
+  ): number {
+    let yPos = startY
+
+    // Section title
+    pdf.setFontSize(14)
+    pdf.setFont('helvetica', 'bold')
+    pdf.setTextColor(102, 45, 145)
+    pdf.text('Rincian Harian', marginLeft, yPos)
+    yPos += 12
+
+    // Reset formatting
+    pdf.setTextColor(0, 0, 0)
+
+    // Table setup - adjust for 7 columns
+    const tableWidth = pageWidth - marginLeft - marginRight
+    const colWidths = [20, 20, 25, 15, 20, 20, 25] // Date, Sales, Orders, Items, Tax, Discount, Net Sales
+    let currentX = marginLeft
+
+    // Table header
+    pdf.setFillColor(240, 240, 240)
+    pdf.rect(marginLeft, yPos, tableWidth, 10, 'F')
+
+    pdf.setFont('helvetica', 'bold')
+    pdf.setFontSize(8) // Smaller font for more columns
+
+    const headers = ['Tanggal', 'Penjualan', 'Pesanan', 'Qty', 'Pajak', 'Diskon', 'Pendapatan']
+    currentX = marginLeft
+
+    headers.forEach((header, index) => {
+      if (index === 0) {
+        pdf.text(header, currentX + 2, yPos + 6)
+      } else {
+        pdf.text(header, currentX + colWidths[index] / 2, yPos + 6, { align: 'center' })
+      }
+      currentX += colWidths[index]
+    })
+
+    yPos += 12
+
+    // Table rows
+    pdf.setFont('helvetica', 'normal')
+    pdf.setFontSize(8)
+
+    salesData.data?.forEach((dailySales, index) => {
+      if (checkPageBreak(10)) yPos = 20
+
+      currentX = marginLeft
+      pdf.setFont('helvetica', 'normal')
+      pdf.setFontSize(8)
+      pdf.setTextColor(0, 0, 0)
+
+      // Date
+      pdf.text(this.formatDate(dailySales.date), currentX + 2, yPos + 5)
+      currentX += colWidths[0]
+
+      // Sales
+      pdf.text(this.formatCurrencyShort(dailySales.sales), currentX + colWidths[1] - 2, yPos + 5, { align: 'right' })
+      currentX += colWidths[1]
+
+      // Orders
+      pdf.text(dailySales.orders.toString(), currentX + colWidths[2] / 2, yPos + 5, { align: 'center' })
+      currentX += colWidths[2]
+
+      // Items
+      pdf.text(dailySales.items.toString(), currentX + colWidths[3] / 2, yPos + 5, { align: 'center' })
+      currentX += colWidths[3]
+
+      // Tax
+      pdf.text(this.formatCurrencyShort(dailySales.tax), currentX + colWidths[4] - 2, yPos + 5, { align: 'right' })
+      currentX += colWidths[4]
+
+      // Discount
+      pdf.text(this.formatCurrencyShort(dailySales.discount), currentX + colWidths[5] - 2, yPos + 5, { align: 'right' })
+      currentX += colWidths[5]
+
+      // Net Sales
+      pdf.text(this.formatCurrencyShort(dailySales.net_sales), currentX + colWidths[6] - 2, yPos + 5, {
+        align: 'right'
+      })
+
+      // Draw bottom border line
+      pdf.setDrawColor(230, 230, 230)
+      pdf.setLineWidth(0.3)
+      pdf.line(marginLeft, yPos + 8, marginLeft + tableWidth, yPos + 8)
+
+      yPos += 10
+    })
+
+    // Table footer (Total)
+    pdf.setFillColor(245, 245, 245) // Lighter gray
+    pdf.rect(marginLeft, yPos, tableWidth, 10, 'F')
+
+    pdf.setFont('helvetica', 'bold')
+    pdf.setFontSize(8)
+
+    currentX = marginLeft
+    pdf.text('TOTAL', currentX + 2, yPos + 6)
+    currentX += colWidths[0]
+
+    pdf.text(this.formatCurrencyShort(salesData.summary.total_sales), currentX + colWidths[1] - 2, yPos + 6, {
+      align: 'right'
+    })
+    currentX += colWidths[1]
+
+    pdf.text(salesData.summary.total_orders.toString(), currentX + colWidths[2] / 2, yPos + 6, { align: 'center' })
+    currentX += colWidths[2]
+
+    pdf.text(salesData.summary.total_items.toString(), currentX + colWidths[3] / 2, yPos + 6, { align: 'center' })
+    currentX += colWidths[3]
+
+    pdf.text(this.formatCurrencyShort(salesData.summary.total_tax), currentX + colWidths[4] - 2, yPos + 6, {
+      align: 'right'
+    })
+    currentX += colWidths[4]
+
+    pdf.text(this.formatCurrencyShort(salesData.summary.total_discount), currentX + colWidths[5] - 2, yPos + 6, {
+      align: 'right'
+    })
+    currentX += colWidths[5]
+
+    pdf.text(this.formatCurrencyShort(salesData.summary.net_sales), currentX + colWidths[6] - 2, yPos + 6, {
+      align: 'right'
+    })
+
+    return yPos + 20
+  }
+
+  /**
+   * Format currency for display
+   */
+  private static formatCurrency(amount: number): string {
+    return `Rp ${amount.toLocaleString('id-ID')}`
+  }
+
+  /**
+   * Format currency short for table display
+   */
+  private static formatCurrencyShort(amount: number): string {
+    if (amount >= 1000000) {
+      return `${(amount / 1000000).toFixed(1)}M`
+    } else if (amount >= 1000) {
+      return `${(amount / 1000).toFixed(0)}K`
+    } else {
+      return amount.toString()
+    }
+  }
+
+  /**
+   * Format date for display
+   */
+  private static formatDate(dateString: string): string {
+    const date = new Date(dateString)
+    return date.toLocaleDateString('id-ID', {
+      day: '2-digit',
+      month: '2-digit'
+    })
+  }
+
+  /**
+   * Generate filename with timestamp
+   */
+  private static generateFilename(prefix: string, extension: string): string {
+    const now = new Date()
+    const year = now.getFullYear()
+    const month = (now.getMonth() + 1).toString().padStart(2, '0')
+    const day = now.getDate().toString().padStart(2, '0')
+    const hour = now.getHours().toString().padStart(2, '0')
+    const minute = now.getMinutes().toString().padStart(2, '0')
+
+    return `${prefix}_${year}_${month}_${day}_${hour}${minute}.${extension}`
+  }
+
+  /**
+   * Export Sales Order data with custom configuration
+   */
+  static async exportCustomSalesOrderToPDF(
+    salesData: SalesReport,
+    options?: {
+      title?: string
+      includeSummary?: boolean
+      customFilename?: string
+      compactMode?: boolean
+    }
+  ) {
+    try {
+      const jsPDFModule = await import('jspdf')
+      const jsPDF = jsPDFModule.default
+
+      const pdf = new jsPDF('p', 'mm', 'a4')
+
+      let yPos = 20
+      const pageWidth = pdf.internal.pageSize.getWidth()
+      const pageHeight = pdf.internal.pageSize.getHeight()
+      const marginLeft = 20
+      const marginRight = 20
+      const marginBottom = 15
+
+      const checkPageBreak = (neededSpace: number) => {
+        if (yPos + neededSpace > pageHeight - marginBottom) {
+          pdf.addPage()
+          yPos = 20
+          return true
+        }
+        return false
+      }
+
+      // Custom title if provided
+      if (options?.title) {
+        pdf.setFontSize(20)
+        pdf.setFont('helvetica', 'bold')
+        pdf.setTextColor(0, 0, 0)
+        pdf.text(options.title, pageWidth / 2, yPos, { align: 'center' })
+        yPos += 15
+      } else {
+        yPos = this.addReportTitle(pdf, salesData, yPos, pageWidth, marginLeft, marginRight)
+      }
+
+      // Optional summary section
+      if (options?.includeSummary !== false) {
+        checkPageBreak(60)
+        yPos = this.addRingkasanSection(pdf, salesData, yPos, pageWidth, marginLeft, marginRight, checkPageBreak)
+      }
+
+      // Daily sales details
+      checkPageBreak(100)
+      if (options?.compactMode) {
+        yPos = this.addCompactDailySalesSection(
+          pdf,
+          salesData,
+          yPos,
+          pageWidth,
+          marginLeft,
+          marginRight,
+          checkPageBreak
+        )
+      } else {
+        yPos = this.addDailySalesSection(pdf, salesData, yPos, pageWidth, marginLeft, marginRight, checkPageBreak)
+      }
+
+      const exportFilename = options?.customFilename || this.generateFilename('Custom_Sales_Order', 'pdf')
+      pdf.save(exportFilename)
+
+      return { success: true, filename: exportFilename }
+    } catch (error) {
+      console.error('Error exporting custom sales order report to PDF:', error)
+      return { success: false, error: `PDF export failed: ${(error as Error).message}` }
+    }
+  }
+
+  /**
+   * Add Compact Daily Sales section (fewer columns)
+   */
+  private static addCompactDailySalesSection(
+    pdf: any,
+    salesData: SalesReport,
+    startY: number,
+    pageWidth: number,
+    marginLeft: number,
+    marginRight: number,
+    checkPageBreak: (space: number) => boolean
+  ): number {
+    let yPos = startY
+
+    // Section title
+    pdf.setFontSize(14)
+    pdf.setFont('helvetica', 'bold')
+    pdf.setTextColor(102, 45, 145)
+    pdf.text('Rincian Harian (Compact)', marginLeft, yPos)
+    yPos += 12
+
+    // Reset formatting
+    pdf.setTextColor(0, 0, 0)
+
+    // Table setup - compact with 4 columns
+    const tableWidth = pageWidth - marginLeft - marginRight
+    const colWidths = [30, 40, 30, 40] // Date, Sales, Orders, Net Sales
+    let currentX = marginLeft
+
+    // Table header
+    pdf.setFillColor(240, 240, 240)
+    pdf.rect(marginLeft, yPos, tableWidth, 10, 'F')
+
+    pdf.setFont('helvetica', 'bold')
+    pdf.setFontSize(9)
+
+    const headers = ['Tanggal', 'Penjualan', 'Pesanan', 'Pendapatan']
+    currentX = marginLeft
+
+    headers.forEach((header, index) => {
+      if (index === 0) {
+        pdf.text(header, currentX + 2, yPos + 6)
+      } else {
+        pdf.text(header, currentX + colWidths[index] / 2, yPos + 6, { align: 'center' })
+      }
+      currentX += colWidths[index]
+    })
+
+    yPos += 12
+
+    // Table rows
+    pdf.setFont('helvetica', 'normal')
+    pdf.setFontSize(9)
+
+    salesData.data?.forEach((dailySales, index) => {
+      if (checkPageBreak(10)) yPos = 20
+
+      currentX = marginLeft
+      pdf.setFont('helvetica', 'normal')
+      pdf.setFontSize(9)
+      pdf.setTextColor(0, 0, 0)
+
+      // Date
+      pdf.text(this.formatDate(dailySales.date), currentX + 2, yPos + 5)
+      currentX += colWidths[0]
+
+      // Sales
+      pdf.text(this.formatCurrency(dailySales.sales), currentX + colWidths[1] - 2, yPos + 5, { align: 'right' })
+      currentX += colWidths[1]
+
+      // Orders
+      pdf.text(dailySales.orders.toString(), currentX + colWidths[2] / 2, yPos + 5, { align: 'center' })
+      currentX += colWidths[2]
+
+      // Net Sales
+      pdf.text(this.formatCurrency(dailySales.net_sales), currentX + colWidths[3] - 2, yPos + 5, { align: 'right' })
+
+      // Draw bottom border line
+      pdf.setDrawColor(230, 230, 230)
+      pdf.setLineWidth(0.3)
+      pdf.line(marginLeft, yPos + 8, marginLeft + tableWidth, yPos + 8)
+
+      yPos += 10
+    })
+
+    // Table footer (Total)
+    pdf.setFillColor(245, 245, 245)
+    pdf.rect(marginLeft, yPos, tableWidth, 10, 'F')
+
+    pdf.setFont('helvetica', 'bold')
+    pdf.setFontSize(9)
+
+    currentX = marginLeft
+    pdf.text('TOTAL', currentX + 2, yPos + 6)
+    currentX += colWidths[0]
+
+    pdf.text(this.formatCurrency(salesData.summary.total_sales), currentX + colWidths[1] - 2, yPos + 6, {
+      align: 'right'
+    })
+    currentX += colWidths[1]
+
+    pdf.text(salesData.summary.total_orders.toString(), currentX + colWidths[2] / 2, yPos + 6, { align: 'center' })
+    currentX += colWidths[2]
+
+    pdf.text(this.formatCurrency(salesData.summary.net_sales), currentX + colWidths[3] - 2, yPos + 6, {
+      align: 'right'
+    })
+
+    return yPos + 20
+  }
+}
@@ -0,0 +1,556 @@
+// services/pdfExportCategoryService.ts
+import { CategoryReport } from '@/types/services/analytic'
+
+export class PDFExportSalesProductCategoryService {
+  /**
+   * Export Category Sales Report to PDF
+   */
+  static async exportCategorySalesToPDF(categoryData: CategoryReport, filename?: string) {
+    try {
+      // Dynamic import untuk jsPDF
+      const jsPDFModule = await import('jspdf')
+      const jsPDF = jsPDFModule.default
+
+      // Create new PDF document - PORTRAIT A4
+      const pdf = new jsPDF('p', 'mm', 'a4')
+
+      // Add content
+      await this.addCategoryReportContent(pdf, categoryData)
+
+      // Generate filename
+      const exportFilename = filename || this.generateFilename('Laporan_Penjualan_Kategori', 'pdf')
+
+      // Save PDF
+      pdf.save(exportFilename)
+
+      return { success: true, filename: exportFilename }
+    } catch (error) {
+      console.error('Error exporting category report to PDF:', error)
+      return { success: false, error: `PDF export failed: ${(error as Error).message}` }
+    }
+  }
+
+  /**
+   * Add category report content to PDF
+   */
+  private static async addCategoryReportContent(pdf: any, categoryData: CategoryReport) {
+    let yPos = 20
+    const pageWidth = pdf.internal.pageSize.getWidth()
+    const pageHeight = pdf.internal.pageSize.getHeight()
+    const marginLeft = 20
+    const marginRight = 20
+    const marginBottom = 15
+
+    // Helper function to check page break
+    const checkPageBreak = (neededSpace: number) => {
+      if (yPos + neededSpace > pageHeight - marginBottom) {
+        pdf.addPage()
+        yPos = 20
+        return true
+      }
+      return false
+    }
+
+    // Title
+    yPos = this.addReportTitle(pdf, categoryData, yPos, pageWidth, marginLeft, marginRight)
+
+    // Section 1: Ringkasan
+    checkPageBreak(50)
+    yPos = this.addRingkasanSection(pdf, categoryData, yPos, pageWidth, marginLeft, marginRight, checkPageBreak)
+
+    // Section 2: Category Details
+    checkPageBreak(80)
+    yPos = this.addCategoryDetailsSection(pdf, categoryData, yPos, pageWidth, marginLeft, marginRight, checkPageBreak)
+  }
+
+  /**
+   * Add report title
+   */
+  private static addReportTitle(
+    pdf: any,
+    categoryData: CategoryReport,
+    startY: number,
+    pageWidth: number,
+    marginLeft: number,
+    marginRight: number
+  ): number {
+    let yPos = startY
+
+    // Title
+    pdf.setFontSize(20)
+    pdf.setFont('helvetica', 'bold')
+    pdf.setTextColor(0, 0, 0)
+    pdf.text('Laporan Penjualan Kategori', pageWidth / 2, yPos, { align: 'center' })
+    yPos += 10
+
+    // Period
+    pdf.setFontSize(12)
+    pdf.setFont('helvetica', 'normal')
+    const periodText = `${categoryData.date_from.split('T')[0]} - ${categoryData.date_to.split('T')[0]}`
+    pdf.text(periodText, pageWidth / 2, yPos, { align: 'center' })
+    yPos += 10
+
+    // Purple line separator
+    pdf.setDrawColor(102, 45, 145)
+    pdf.setLineWidth(2)
+    pdf.line(marginLeft, yPos, pageWidth - marginRight, yPos)
+    yPos += 15
+
+    return yPos
+  }
+
+  /**
+   * Add Ringkasan section
+   */
+  private static addRingkasanSection(
+    pdf: any,
+    categoryData: CategoryReport,
+    startY: number,
+    pageWidth: number,
+    marginLeft: number,
+    marginRight: number,
+    checkPageBreak: (space: number) => boolean
+  ): number {
+    let yPos = startY
+
+    // Section title
+    pdf.setFontSize(14)
+    pdf.setFont('helvetica', 'bold')
+    pdf.setTextColor(102, 45, 145)
+    pdf.text('Ringkasan', marginLeft, yPos)
+    yPos += 12
+
+    // Reset text color
+    pdf.setTextColor(0, 0, 0)
+    pdf.setFontSize(11)
+
+    // Calculate summary
+    const categorySummary = {
+      totalRevenue: categoryData.data?.reduce((sum, item) => sum + (item?.total_revenue || 0), 0) || 0,
+      orderCount: categoryData.data?.reduce((sum, item) => sum + (item?.order_count || 0), 0) || 0,
+      productCount: categoryData.data?.reduce((sum, item) => sum + (item?.product_count || 0), 0) || 0,
+      totalQuantity: categoryData.data?.reduce((sum, item) => sum + (item?.total_quantity || 0), 0) || 0,
+      totalCategories: categoryData.data?.length || 0,
+      averageRevenuePerCategory: 0
+    }
+    categorySummary.averageRevenuePerCategory =
+      categorySummary.totalCategories > 0 ? categorySummary.totalRevenue / categorySummary.totalCategories : 0
+
+    const ringkasanItems = [
+      { label: 'Total Kategori', value: categorySummary.totalCategories.toString(), bold: false },
+      { label: 'Total Produk', value: categorySummary.productCount.toString(), bold: false },
+      { label: 'Total Quantity', value: categorySummary.totalQuantity.toString(), bold: false },
+      { label: 'Total Orders', value: categorySummary.orderCount.toString(), bold: false },
+      { label: 'Total Revenue', value: this.formatCurrency(categorySummary.totalRevenue), bold: true },
+      {
+        label: 'Rata-rata Revenue per Kategori',
+        value: this.formatCurrency(categorySummary.averageRevenuePerCategory),
+        bold: false
+      }
+    ]
+
+    ringkasanItems.forEach((item, index) => {
+      if (checkPageBreak(15)) yPos = 20
+
+      // Set font weight
+      pdf.setFont('helvetica', item.bold ? 'bold' : 'normal')
+
+      pdf.text(item.label, marginLeft, yPos)
+      pdf.text(item.value, pageWidth - marginRight, yPos, { align: 'right' })
+
+      // Light separator line (except for bold row)
+      if (!item.bold) {
+        pdf.setDrawColor(230, 230, 230)
+        pdf.setLineWidth(0.5)
+        pdf.line(marginLeft, yPos + 2, pageWidth - marginRight, yPos + 2)
+      }
+
+      yPos += 8
+    })
+
+    return yPos + 20
+  }
+
+  /**
+   * Add Category Details section
+   */
+  private static addCategoryDetailsSection(
+    pdf: any,
+    categoryData: CategoryReport,
+    startY: number,
+    pageWidth: number,
+    marginLeft: number,
+    marginRight: number,
+    checkPageBreak: (space: number) => boolean
+  ): number {
+    let yPos = startY
+
+    // Section title
+    pdf.setFontSize(14)
+    pdf.setFont('helvetica', 'bold')
+    pdf.setTextColor(102, 45, 145)
+    pdf.text('Rincian Kategori', marginLeft, yPos)
+    yPos += 12
+
+    // Reset formatting
+    pdf.setTextColor(0, 0, 0)
+
+    // Table setup
+    const tableWidth = pageWidth - marginLeft - marginRight
+    const colWidths = [50, 30, 25, 35] // Name, Products, Qty, Revenue
+    let currentX = marginLeft
+
+    // Table header
+    pdf.setFillColor(240, 240, 240)
+    pdf.rect(marginLeft, yPos, tableWidth, 10, 'F')
+
+    pdf.setFont('helvetica', 'bold')
+    pdf.setFontSize(9)
+
+    const headers = ['Nama', 'Total Produk', 'Qty', 'Pendapatan']
+    currentX = marginLeft
+
+    headers.forEach((header, index) => {
+      if (index === 0) {
+        pdf.text(header, currentX + 2, yPos + 6)
+      } else {
+        pdf.text(header, currentX + colWidths[index] / 2, yPos + 6, { align: 'center' })
+      }
+      currentX += colWidths[index]
+    })
+
+    yPos += 12
+
+    // Calculate summary for footer
+    const categorySummary = {
+      totalRevenue: categoryData.data?.reduce((sum, item) => sum + (item?.total_revenue || 0), 0) || 0,
+      productCount: categoryData.data?.reduce((sum, item) => sum + (item?.product_count || 0), 0) || 0,
+      totalQuantity: categoryData.data?.reduce((sum, item) => sum + (item?.total_quantity || 0), 0) || 0
+    }
+
+    // Table rows
+    pdf.setFont('helvetica', 'normal')
+    pdf.setFontSize(9)
+
+    categoryData.data?.forEach((category, index) => {
+      if (checkPageBreak(10)) yPos = 20
+
+      currentX = marginLeft
+      pdf.setFont('helvetica', 'normal')
+      pdf.setFontSize(9)
+      pdf.setTextColor(0, 0, 0)
+
+      // Category name
+      pdf.text(category.category_name, currentX + 2, yPos + 5)
+      currentX += colWidths[0]
+
+      // Product count
+      pdf.text(category.product_count.toString(), currentX + colWidths[1] / 2, yPos + 5, { align: 'center' })
+      currentX += colWidths[1]
+
+      // Quantity
+      pdf.text(category.total_quantity.toString(), currentX + colWidths[2] / 2, yPos + 5, { align: 'center' })
+      currentX += colWidths[2]
+
+      // Revenue
+      pdf.text(this.formatCurrency(category.total_revenue), currentX + colWidths[3] - 2, yPos + 5, { align: 'right' })
+
+      // Draw bottom border line
+      pdf.setDrawColor(230, 230, 230)
+      pdf.setLineWidth(0.3)
+      pdf.line(marginLeft, yPos + 8, marginLeft + tableWidth, yPos + 8)
+
+      yPos += 10
+    })
+
+    // Table footer (Total)
+    pdf.setFillColor(245, 245, 245) // Lighter gray
+    pdf.rect(marginLeft, yPos, tableWidth, 10, 'F')
+
+    pdf.setFont('helvetica', 'bold')
+    pdf.setFontSize(9)
+
+    currentX = marginLeft
+    pdf.text('TOTAL', currentX + 2, yPos + 6)
+    currentX += colWidths[0]
+
+    pdf.text(categorySummary.productCount.toString(), currentX + colWidths[1] / 2, yPos + 6, { align: 'center' })
+    currentX += colWidths[1]
+
+    pdf.text(categorySummary.totalQuantity.toString(), currentX + colWidths[2] / 2, yPos + 6, { align: 'center' })
+    currentX += colWidths[2]
+
+    pdf.text(this.formatCurrency(categorySummary.totalRevenue), currentX + colWidths[3] - 2, yPos + 6, {
+      align: 'right'
+    })
+
+    return yPos + 20
+  }
+
+  /**
+   * Format currency for display
+   */
+  private static formatCurrency(amount: number): string {
+    return `Rp ${amount.toLocaleString('id-ID')}`
+  }
+
+  /**
+   * Generate filename with timestamp
+   */
+  private static generateFilename(prefix: string, extension: string): string {
+    const now = new Date()
+    const year = now.getFullYear()
+    const month = (now.getMonth() + 1).toString().padStart(2, '0')
+    const day = now.getDate().toString().padStart(2, '0')
+    const hour = now.getHours().toString().padStart(2, '0')
+    const minute = now.getMinutes().toString().padStart(2, '0')
+
+    return `${prefix}_${year}_${month}_${day}_${hour}${minute}.${extension}`
+  }
+
+  /**
+   * Export Category Sales data with custom configuration
+   */
+  static async exportCustomCategoryToPDF(
+    categoryData: CategoryReport,
+    options?: {
+      title?: string
+      includeSummary?: boolean
+      customFilename?: string
+      includeOrderCount?: boolean
+    }
+  ) {
+    try {
+      const jsPDFModule = await import('jspdf')
+      const jsPDF = jsPDFModule.default
+
+      const pdf = new jsPDF('p', 'mm', 'a4')
+
+      let yPos = 20
+      const pageWidth = pdf.internal.pageSize.getWidth()
+      const pageHeight = pdf.internal.pageSize.getHeight()
+      const marginLeft = 20
+      const marginRight = 20
+      const marginBottom = 15
+
+      const checkPageBreak = (neededSpace: number) => {
+        if (yPos + neededSpace > pageHeight - marginBottom) {
+          pdf.addPage()
+          yPos = 20
+          return true
+        }
+        return false
+      }
+
+      // Custom title if provided
+      if (options?.title) {
+        pdf.setFontSize(20)
+        pdf.setFont('helvetica', 'bold')
+        pdf.setTextColor(0, 0, 0)
+        pdf.text(options.title, pageWidth / 2, yPos, { align: 'center' })
+        yPos += 15
+      } else {
+        yPos = this.addReportTitle(pdf, categoryData, yPos, pageWidth, marginLeft, marginRight)
+      }
+
+      // Optional summary section
+      if (options?.includeSummary !== false) {
+        checkPageBreak(50)
+        yPos = this.addRingkasanSection(pdf, categoryData, yPos, pageWidth, marginLeft, marginRight, checkPageBreak)
+      }
+
+      // Category details
+      checkPageBreak(80)
+      yPos = this.addCategoryDetailsSection(pdf, categoryData, yPos, pageWidth, marginLeft, marginRight, checkPageBreak)
+
+      const exportFilename = options?.customFilename || this.generateFilename('Custom_Category_Sales', 'pdf')
+      pdf.save(exportFilename)
+
+      return { success: true, filename: exportFilename }
+    } catch (error) {
+      console.error('Error exporting custom category report to PDF:', error)
+      return { success: false, error: `PDF export failed: ${(error as Error).message}` }
+    }
+  }
+
+  /**
+   * Export Category Sales with extended table including order count
+   */
+  static async exportExtendedCategoryToPDF(categoryData: CategoryReport, filename?: string) {
+    try {
+      const jsPDFModule = await import('jspdf')
+      const jsPDF = jsPDFModule.default
+
+      const pdf = new jsPDF('p', 'mm', 'a4')
+
+      let yPos = 20
+      const pageWidth = pdf.internal.pageSize.getWidth()
+      const pageHeight = pdf.internal.pageSize.getHeight()
+      const marginLeft = 20
+      const marginRight = 20
+      const marginBottom = 15
+
+      const checkPageBreak = (neededSpace: number) => {
+        if (yPos + neededSpace > pageHeight - marginBottom) {
+          pdf.addPage()
+          yPos = 20
+          return true
+        }
+        return false
+      }
+
+      // Title section
+      yPos = this.addReportTitle(pdf, categoryData, yPos, pageWidth, marginLeft, marginRight)
+
+      // Summary section
+      checkPageBreak(50)
+      yPos = this.addRingkasanSection(pdf, categoryData, yPos, pageWidth, marginLeft, marginRight, checkPageBreak)
+
+      // Extended table with order count
+      checkPageBreak(80)
+      yPos = this.addExtendedCategoryDetailsSection(
+        pdf,
+        categoryData,
+        yPos,
+        pageWidth,
+        marginLeft,
+        marginRight,
+        checkPageBreak
+      )
+
+      const exportFilename = filename || this.generateFilename('Laporan_Kategori_Extended', 'pdf')
+      pdf.save(exportFilename)
+
+      return { success: true, filename: exportFilename }
+    } catch (error) {
+      console.error('Error exporting extended category report to PDF:', error)
+      return { success: false, error: `PDF export failed: ${(error as Error).message}` }
+    }
+  }
+
+  /**
+   * Add Extended Category Details section with order count
+   */
+  private static addExtendedCategoryDetailsSection(
+    pdf: any,
+    categoryData: CategoryReport,
+    startY: number,
+    pageWidth: number,
+    marginLeft: number,
+    marginRight: number,
+    checkPageBreak: (space: number) => boolean
+  ): number {
+    let yPos = startY
+
+    // Section title
+    pdf.setFontSize(14)
+    pdf.setFont('helvetica', 'bold')
+    pdf.setTextColor(102, 45, 145)
+    pdf.text('Rincian Kategori (Extended)', marginLeft, yPos)
+    yPos += 12
+
+    // Reset formatting
+    pdf.setTextColor(0, 0, 0)
+
+    // Table setup - wider for 5 columns
+    const tableWidth = pageWidth - marginLeft - marginRight
+    const colWidths = [40, 25, 20, 20, 35] // Name, Products, Qty, Orders, Revenue
+    let currentX = marginLeft
+
+    // Table header
+    pdf.setFillColor(240, 240, 240)
+    pdf.rect(marginLeft, yPos, tableWidth, 10, 'F')
+
+    pdf.setFont('helvetica', 'bold')
+    pdf.setFontSize(9)
+
+    const headers = ['Nama', 'Total Produk', 'Qty', 'Orders', 'Pendapatan']
+    currentX = marginLeft
+
+    headers.forEach((header, index) => {
+      if (index === 0) {
+        pdf.text(header, currentX + 2, yPos + 6)
+      } else {
+        pdf.text(header, currentX + colWidths[index] / 2, yPos + 6, { align: 'center' })
+      }
+      currentX += colWidths[index]
+    })
+
+    yPos += 12
+
+    // Calculate summary for footer
+    const categorySummary = {
+      totalRevenue: categoryData.data?.reduce((sum, item) => sum + (item?.total_revenue || 0), 0) || 0,
+      productCount: categoryData.data?.reduce((sum, item) => sum + (item?.product_count || 0), 0) || 0,
+      totalQuantity: categoryData.data?.reduce((sum, item) => sum + (item?.total_quantity || 0), 0) || 0,
+      orderCount: categoryData.data?.reduce((sum, item) => sum + (item?.order_count || 0), 0) || 0
+    }
+
+    // Table rows
+    pdf.setFont('helvetica', 'normal')
+    pdf.setFontSize(9)
+
+    categoryData.data?.forEach((category, index) => {
+      if (checkPageBreak(10)) yPos = 20
+
+      currentX = marginLeft
+      pdf.setFont('helvetica', 'normal')
+      pdf.setFontSize(9)
+      pdf.setTextColor(0, 0, 0)
+
+      // Category name
+      const categoryName =
+        category.category_name.length > 30 ? category.category_name.substring(0, 27) + '...' : category.category_name
+      pdf.text(categoryName, currentX + 2, yPos + 5)
+      currentX += colWidths[0]
+
+      // Product count
+      pdf.text(category.product_count.toString(), currentX + colWidths[1] / 2, yPos + 5, { align: 'center' })
+      currentX += colWidths[1]
+
+      // Quantity
+      pdf.text(category.total_quantity.toString(), currentX + colWidths[2] / 2, yPos + 5, { align: 'center' })
+      currentX += colWidths[2]
+
+      // Order count
+      pdf.text(category.order_count.toString(), currentX + colWidths[3] / 2, yPos + 5, { align: 'center' })
+      currentX += colWidths[3]
+
+      // Revenue
+      pdf.text(this.formatCurrency(category.total_revenue), currentX + colWidths[4] - 2, yPos + 5, { align: 'right' })
+
+      // Draw bottom border line
+      pdf.setDrawColor(230, 230, 230)
+      pdf.setLineWidth(0.3)
+      pdf.line(marginLeft, yPos + 8, marginLeft + tableWidth, yPos + 8)
+
+      yPos += 10
+    })
+
+    // Table footer (Total)
+    pdf.setFillColor(245, 245, 245) // Lighter gray
+    pdf.rect(marginLeft, yPos, tableWidth, 10, 'F')
+
+    pdf.setFont('helvetica', 'bold')
+    pdf.setFontSize(9)
+
+    currentX = marginLeft
+    pdf.text('TOTAL', currentX + 2, yPos + 6)
+    currentX += colWidths[0]
+
+    pdf.text(categorySummary.productCount.toString(), currentX + colWidths[1] / 2, yPos + 6, { align: 'center' })
+    currentX += colWidths[1]
+
+    pdf.text(categorySummary.totalQuantity.toString(), currentX + colWidths[2] / 2, yPos + 6, { align: 'center' })
+    currentX += colWidths[2]
+
+    pdf.text(categorySummary.orderCount.toString(), currentX + colWidths[3] / 2, yPos + 6, { align: 'center' })
+    currentX += colWidths[3]
+
+    pdf.text(this.formatCurrency(categorySummary.totalRevenue), currentX + colWidths[4] - 2, yPos + 6, {
+      align: 'right'
+    })
+
+    return yPos + 20
+  }
+}
@@ -0,0 +1,691 @@
+import { CategoryReport, PaymentReport, ProductSalesReport, ProfitLossReport } from '@/types/services/analytic'
+
+export interface SalesReportData {
+  profitLoss: ProfitLossReport
+  paymentAnalytics: PaymentReport
+  categoryAnalytics: CategoryReport
+  productAnalytics: ProductSalesReport
+}
+
+export class PDFExportSalesService {
+  /**
+   * Export Sales Report to PDF
+   */
+  static async exportSalesReportToPDF(salesData: SalesReportData, filename?: string) {
+    try {
+      // Dynamic import untuk jsPDF
+      const jsPDFModule = await import('jspdf')
+      const jsPDF = jsPDFModule.default
+
+      // Create new PDF document - PORTRAIT A4
+      const pdf = new jsPDF('p', 'mm', 'a4')
+
+      // Add content
+      await this.addSalesReportContent(pdf, salesData)
+
+      // Generate filename
+      const exportFilename = filename || this.generateFilename('Laporan_Transaksi', 'pdf')
+
+      // Save PDF
+      pdf.save(exportFilename)
+
+      return { success: true, filename: exportFilename }
+    } catch (error) {
+      console.error('Error exporting sales report to PDF:', error)
+      return { success: false, error: `PDF export failed: ${(error as Error).message}` }
+    }
+  }
+
+  /**
+   * Add sales report content to PDF
+   */
+  private static async addSalesReportContent(pdf: any, salesData: SalesReportData) {
+    let yPos = 20
+    const pageWidth = pdf.internal.pageSize.getWidth()
+    const pageHeight = pdf.internal.pageSize.getHeight()
+    const marginLeft = 20
+    const marginRight = 20
+    const marginBottom = 15
+
+    // Helper function to check page break
+    const checkPageBreak = (neededSpace: number) => {
+      if (yPos + neededSpace > pageHeight - marginBottom) {
+        pdf.addPage()
+        yPos = 20
+        return true
+      }
+      return false
+    }
+
+    // Title
+    yPos = this.addReportTitle(pdf, salesData.profitLoss, yPos, pageWidth, marginLeft, marginRight)
+
+    // Section 1: Ringkasan
+    checkPageBreak(50)
+    yPos = this.addRingkasanSection(pdf, salesData.profitLoss, yPos, pageWidth, marginLeft, marginRight, checkPageBreak)
+
+    // Section 2: Invoice Summary
+    checkPageBreak(40)
+    yPos = this.addInvoiceSection(pdf, salesData.profitLoss, yPos, pageWidth, marginLeft, marginRight, checkPageBreak)
+
+    // Section 3: Payment Methods
+    checkPageBreak(80)
+    yPos = this.addPaymentMethodsSection(
+      pdf,
+      salesData.paymentAnalytics,
+      yPos,
+      pageWidth,
+      marginLeft,
+      marginRight,
+      checkPageBreak
+    )
+
+    // Section 4: Category Summary
+    checkPageBreak(80)
+    yPos = this.addCategorySection(
+      pdf,
+      salesData.categoryAnalytics,
+      yPos,
+      pageWidth,
+      marginLeft,
+      marginRight,
+      checkPageBreak
+    )
+
+    // Section 5: Product Summary
+    checkPageBreak(100)
+    yPos = this.addProductSection(
+      pdf,
+      salesData.productAnalytics,
+      yPos,
+      pageWidth,
+      marginLeft,
+      marginRight,
+      checkPageBreak
+    )
+  }
+
+  /**
+   * Add report title
+   */
+  private static addReportTitle(
+    pdf: any,
+    profitLoss: ProfitLossReport,
+    startY: number,
+    pageWidth: number,
+    marginLeft: number,
+    marginRight: number
+  ): number {
+    let yPos = startY
+
+    // Title
+    pdf.setFontSize(20)
+    pdf.setFont('helvetica', 'bold')
+    pdf.setTextColor(0, 0, 0)
+    pdf.text('Laporan Transaksi', pageWidth / 2, yPos, { align: 'center' })
+    yPos += 10
+
+    // Period
+    pdf.setFontSize(12)
+    pdf.setFont('helvetica', 'normal')
+    const periodText = `${profitLoss.date_from.split('T')[0]} - ${profitLoss.date_to.split('T')[0]}`
+    pdf.text(periodText, pageWidth / 2, yPos, { align: 'center' })
+    yPos += 10
+
+    // Purple line separator
+    pdf.setDrawColor(102, 45, 145)
+    pdf.setLineWidth(2)
+    pdf.line(marginLeft, yPos, pageWidth - marginRight, yPos)
+    yPos += 15
+
+    return yPos
+  }
+
+  /**
+   * Add Ringkasan section - SAMAKAN DENGAN PAYMENT METHODS STYLE
+   */
+  private static addRingkasanSection(
+    pdf: any,
+    profitLoss: ProfitLossReport,
+    startY: number,
+    pageWidth: number,
+    marginLeft: number,
+    marginRight: number,
+    checkPageBreak: (space: number) => boolean
+  ): number {
+    let yPos = startY
+
+    // Section title - SAMA SEPERTI PAYMENT METHODS
+    pdf.setFontSize(14)
+    pdf.setFont('helvetica', 'bold')
+    pdf.setTextColor(102, 45, 145)
+    pdf.text('Ringkasan', marginLeft, yPos)
+    yPos += 12
+
+    // Reset text color
+    pdf.setTextColor(0, 0, 0)
+    pdf.setFontSize(11)
+
+    const ringkasanItems = [
+      { label: 'Total Penjualan', value: this.formatCurrency(profitLoss.summary.total_revenue), bold: false },
+      { label: 'Total Diskon', value: this.formatCurrency(profitLoss.summary.total_discount), bold: false },
+      { label: 'Total Pajak', value: this.formatCurrency(profitLoss.summary.total_tax), bold: false },
+      { label: 'Total', value: this.formatCurrency(profitLoss.summary.total_revenue), bold: true }
+    ]
+
+    ringkasanItems.forEach((item, index) => {
+      if (checkPageBreak(15)) yPos = 20
+
+      // Set font weight
+      pdf.setFont('helvetica', item.bold ? 'bold' : 'normal')
+
+      pdf.text(item.label, marginLeft, yPos)
+      pdf.text(item.value, pageWidth - marginRight, yPos, { align: 'right' })
+
+      // Light separator line (except for total row)
+      if (!item.bold) {
+        pdf.setDrawColor(230, 230, 230)
+        pdf.setLineWidth(0.5)
+        pdf.line(marginLeft, yPos + 2, pageWidth - marginRight, yPos + 2)
+      }
+
+      yPos += 8
+    })
+
+    return yPos + 20
+  }
+
+  /**
+   * Add Invoice section - SAMAKAN DENGAN PAYMENT METHODS STYLE
+   */
+  private static addInvoiceSection(
+    pdf: any,
+    profitLoss: ProfitLossReport,
+    startY: number,
+    pageWidth: number,
+    marginLeft: number,
+    marginRight: number,
+    checkPageBreak: (space: number) => boolean
+  ): number {
+    let yPos = startY
+
+    // Section title - SAMA SEPERTI PAYMENT METHODS
+    pdf.setFontSize(14)
+    pdf.setFont('helvetica', 'bold')
+    pdf.setTextColor(102, 45, 145)
+    pdf.text('Invoice', marginLeft, yPos)
+    yPos += 12
+
+    // Reset formatting
+    pdf.setTextColor(0, 0, 0)
+    pdf.setFontSize(11)
+
+    const invoiceItems = [
+      { label: 'Total Invoice', value: profitLoss.summary.total_orders.toString() },
+      { label: 'Rata-rata Tagihan Per Invoice', value: this.formatCurrency(profitLoss.summary.average_profit) }
+    ]
+
+    invoiceItems.forEach((item, index) => {
+      if (checkPageBreak(15)) yPos = 20
+
+      pdf.setFont('helvetica', 'normal')
+      pdf.text(item.label, marginLeft, yPos)
+      pdf.text(item.value, pageWidth - marginRight, yPos, { align: 'right' })
+
+      // Light separator line
+      if (index < invoiceItems.length - 1) {
+        pdf.setDrawColor(230, 230, 230)
+        pdf.setLineWidth(0.5)
+        pdf.line(marginLeft, yPos + 2, pageWidth - marginRight, yPos + 2)
+      }
+
+      yPos += 8
+    })
+
+    return yPos + 20
+  }
+
+  /**
+   * Add Payment Methods section - ORIGINAL STYLE (3 jam lu bikin ini!)
+   */
+  private static addPaymentMethodsSection(
+    pdf: any,
+    paymentAnalytics: PaymentReport,
+    startY: number,
+    pageWidth: number,
+    marginLeft: number,
+    marginRight: number,
+    checkPageBreak: (space: number) => boolean
+  ): number {
+    let yPos = startY
+
+    // Section title
+    pdf.setFontSize(14)
+    pdf.setFont('helvetica', 'bold')
+    pdf.setTextColor(102, 45, 145)
+    pdf.text('Ringkasan Metode Pembayaran', marginLeft, yPos)
+    yPos += 12
+
+    // Reset formatting
+    pdf.setTextColor(0, 0, 0)
+
+    // Table setup
+    const tableWidth = pageWidth - marginLeft - marginRight
+    const colWidths = [50, 25, 30, 35, 25] // Method, Type, Order, Amount, %
+    let currentX = marginLeft
+
+    // Table header
+    pdf.setFillColor(240, 240, 240)
+    pdf.rect(marginLeft, yPos, tableWidth, 10, 'F')
+
+    pdf.setFont('helvetica', 'bold')
+    pdf.setFontSize(9)
+
+    const headers = ['Metode Pembayaran', 'Tipe', 'Jumlah Order', 'Total Amount', 'Persentase']
+    currentX = marginLeft
+
+    headers.forEach((header, index) => {
+      if (index === 0) {
+        pdf.text(header, currentX + 2, yPos + 6)
+      } else {
+        pdf.text(header, currentX + colWidths[index] / 2, yPos + 6, { align: 'center' })
+      }
+      currentX += colWidths[index]
+    })
+
+    yPos += 12
+
+    // Table rows
+    pdf.setFont('helvetica', 'normal')
+    pdf.setFontSize(9)
+
+    paymentAnalytics.data?.forEach((payment, index) => {
+      if (checkPageBreak(10)) yPos = 20
+
+      currentX = marginLeft
+      pdf.setFont('helvetica', 'normal')
+      pdf.setFontSize(9)
+      pdf.setTextColor(0, 0, 0)
+
+      // Method name
+      pdf.text(payment.payment_method_name, currentX + 2, yPos + 5)
+      currentX += colWidths[0]
+
+      // Type with simple color coding
+      const typeText = payment.payment_method_type.toUpperCase()
+      if (payment.payment_method_type === 'cash') {
+        pdf.setTextColor(0, 120, 0) // Green
+      } else if (payment.payment_method_type === 'card') {
+        pdf.setTextColor(0, 80, 200) // Blue
+      } else {
+        pdf.setTextColor(200, 100, 0) // Orange
+      }
+      pdf.text(typeText, currentX + colWidths[1] / 2, yPos + 5, { align: 'center' })
+      pdf.setTextColor(0, 0, 0) // Reset color
+      currentX += colWidths[1]
+
+      // Order count
+      pdf.text(payment.order_count.toString(), currentX + colWidths[2] / 2, yPos + 5, { align: 'center' })
+      currentX += colWidths[2]
+
+      // Amount
+      pdf.text(this.formatCurrency(payment.total_amount), currentX + colWidths[3] - 2, yPos + 5, { align: 'right' })
+      currentX += colWidths[3]
+
+      // Percentage
+      pdf.text(`${(payment.percentage ?? 0).toFixed(1)}%`, currentX + colWidths[4] / 2, yPos + 5, { align: 'center' })
+
+      // Draw bottom border line
+      pdf.setDrawColor(230, 230, 230)
+      pdf.setLineWidth(0.3)
+      pdf.line(marginLeft, yPos + 8, marginLeft + tableWidth, yPos + 8)
+
+      yPos += 10
+    })
+
+    // Table footer (Total) - directly after last row
+    pdf.setFillColor(245, 245, 245) // Lighter gray
+    pdf.rect(marginLeft, yPos, tableWidth, 10, 'F')
+
+    pdf.setFont('helvetica', 'bold')
+    pdf.setFontSize(9)
+
+    currentX = marginLeft
+    pdf.text('TOTAL', currentX + 2, yPos + 6)
+    currentX += colWidths[0] + colWidths[1]
+
+    pdf.text((paymentAnalytics.summary?.total_orders ?? 0).toString(), currentX + colWidths[2] / 2, yPos + 6, {
+      align: 'center'
+    })
+    currentX += colWidths[2]
+
+    pdf.text(this.formatCurrency(paymentAnalytics.summary?.total_amount ?? 0), currentX + colWidths[3] - 2, yPos + 6, {
+      align: 'right'
+    })
+
+    return yPos + 20
+  }
+
+  /**
+   * Add Category section - SAMAKAN DENGAN PAYMENT METHODS STYLE
+   */
+  private static addCategorySection(
+    pdf: any,
+    categoryAnalytics: CategoryReport,
+    startY: number,
+    pageWidth: number,
+    marginLeft: number,
+    marginRight: number,
+    checkPageBreak: (space: number) => boolean
+  ): number {
+    let yPos = startY
+
+    // Section title - SAMA SEPERTI PAYMENT METHODS
+    pdf.setFontSize(14)
+    pdf.setFont('helvetica', 'bold')
+    pdf.setTextColor(102, 45, 145)
+    pdf.text('Ringkasan Kategori', marginLeft, yPos)
+    yPos += 12
+
+    // Reset formatting
+    pdf.setTextColor(0, 0, 0)
+
+    // Table setup
+    const tableWidth = pageWidth - marginLeft - marginRight
+    const colWidths = [50, 30, 25, 35] // Name, Products, Qty, Revenue
+    let currentX = marginLeft
+
+    // Table header - SAMA SEPERTI PAYMENT METHODS
+    pdf.setFillColor(240, 240, 240)
+    pdf.rect(marginLeft, yPos, tableWidth, 10, 'F')
+
+    pdf.setFont('helvetica', 'bold')
+    pdf.setFontSize(9)
+
+    const headers = ['Nama', 'Total Produk', 'Qty', 'Pendapatan']
+    currentX = marginLeft
+
+    headers.forEach((header, index) => {
+      if (index === 0) {
+        pdf.text(header, currentX + 2, yPos + 6)
+      } else {
+        pdf.text(header, currentX + colWidths[index] / 2, yPos + 6, { align: 'center' })
+      }
+      currentX += colWidths[index]
+    })
+
+    yPos += 12
+
+    // Calculate summaries
+    const categorySummary = {
+      totalRevenue: categoryAnalytics.data?.reduce((sum, item) => sum + (item?.total_revenue || 0), 0) || 0,
+      productCount: categoryAnalytics.data?.reduce((sum, item) => sum + (item?.product_count || 0), 0) || 0,
+      totalQuantity: categoryAnalytics.data?.reduce((sum, item) => sum + (item?.total_quantity || 0), 0) || 0
+    }
+
+    // Table rows - SAMA SEPERTI PAYMENT METHODS
+    pdf.setFont('helvetica', 'normal')
+    pdf.setFontSize(9)
+
+    categoryAnalytics.data?.forEach((category, index) => {
+      if (checkPageBreak(10)) yPos = 20
+
+      currentX = marginLeft
+      pdf.setFont('helvetica', 'normal')
+      pdf.setFontSize(9)
+      pdf.setTextColor(0, 0, 0)
+
+      // Category name
+      pdf.text(category.category_name, currentX + 2, yPos + 5)
+      currentX += colWidths[0]
+
+      // Product count
+      pdf.text(category.product_count.toString(), currentX + colWidths[1] / 2, yPos + 5, { align: 'center' })
+      currentX += colWidths[1]
+
+      // Quantity
+      pdf.text(category.total_quantity.toString(), currentX + colWidths[2] / 2, yPos + 5, { align: 'center' })
+      currentX += colWidths[2]
+
+      // Revenue
+      pdf.text(this.formatCurrency(category.total_revenue), currentX + colWidths[3] - 2, yPos + 5, { align: 'right' })
+
+      // Draw bottom border line - SAMA SEPERTI PAYMENT METHODS
+      pdf.setDrawColor(230, 230, 230)
+      pdf.setLineWidth(0.3)
+      pdf.line(marginLeft, yPos + 8, marginLeft + tableWidth, yPos + 8)
+
+      yPos += 10
+    })
+
+    // Table footer (Total) - SAMA SEPERTI PAYMENT METHODS
+    pdf.setFillColor(245, 245, 245) // Lighter gray
+    pdf.rect(marginLeft, yPos, tableWidth, 10, 'F')
+
+    pdf.setFont('helvetica', 'bold')
+    pdf.setFontSize(9)
+
+    currentX = marginLeft
+    pdf.text('TOTAL', currentX + 2, yPos + 6)
+    currentX += colWidths[0]
+
+    pdf.text(categorySummary.productCount.toString(), currentX + colWidths[1] / 2, yPos + 6, { align: 'center' })
+    currentX += colWidths[1]
+
+    pdf.text(categorySummary.totalQuantity.toString(), currentX + colWidths[2] / 2, yPos + 6, { align: 'center' })
+    currentX += colWidths[2]
+
+    pdf.text(this.formatCurrency(categorySummary.totalRevenue), currentX + colWidths[3] - 2, yPos + 6, {
+      align: 'right'
+    })
+
+    return yPos + 20
+  }
+
+  /**
+   * Add Product section - SAMAKAN DENGAN PAYMENT METHODS STYLE
+   */
+  private static addProductSection(
+    pdf: any,
+    productAnalytics: ProductSalesReport,
+    startY: number,
+    pageWidth: number,
+    marginLeft: number,
+    marginRight: number,
+    checkPageBreak: (space: number) => boolean
+  ): number {
+    let yPos = startY // Hapus extra spacing, biar sama dengan section lain
+
+    // Section title - SAMA SEPERTI PAYMENT METHODS
+    pdf.setFontSize(14)
+    pdf.setFont('helvetica', 'bold')
+    pdf.setTextColor(102, 45, 145)
+    pdf.text('Ringkasan Item', marginLeft, yPos)
+    yPos += 12
+
+    // Reset formatting
+    pdf.setTextColor(0, 0, 0)
+
+    // Table setup
+    const tableWidth = pageWidth - marginLeft - marginRight
+    const colWidths = [60, 20, 20, 30, 30] // Product, Qty, Order, Revenue, Average
+    let currentX = marginLeft
+
+    // Table header - SAMA SEPERTI PAYMENT METHODS
+    pdf.setFillColor(240, 240, 240)
+    pdf.rect(marginLeft, yPos, tableWidth, 10, 'F')
+
+    pdf.setFont('helvetica', 'bold')
+    pdf.setFontSize(9)
+
+    const headers = ['Produk', 'Qty', 'Order', 'Pendapatan', 'Rata Rata']
+    currentX = marginLeft
+
+    headers.forEach((header, index) => {
+      if (index === 0) {
+        pdf.text(header, currentX + 2, yPos + 6)
+      } else {
+        pdf.text(header, currentX + colWidths[index] / 2, yPos + 6, { align: 'center' })
+      }
+      currentX += colWidths[index]
+    })
+
+    yPos += 12
+
+    // Group products by category
+    const groupedProducts =
+      productAnalytics.data?.reduce(
+        (acc, item) => {
+          const categoryName = item.category_name || 'Tidak Berkategori'
+          if (!acc[categoryName]) {
+            acc[categoryName] = []
+          }
+          acc[categoryName].push(item)
+          return acc
+        },
+        {} as Record<string, any[]>
+      ) || {}
+
+    // Calculate product summary
+    const productSummary = {
+      totalQuantitySold: productAnalytics.data?.reduce((sum, item) => sum + (item?.quantity_sold || 0), 0) || 0,
+      totalRevenue: productAnalytics.data?.reduce((sum, item) => sum + (item?.revenue || 0), 0) || 0,
+      totalOrders: productAnalytics.data?.reduce((sum, item) => sum + (item?.order_count || 0), 0) || 0
+    }
+
+    // Table rows - SAMA SEPERTI PAYMENT METHODS
+    pdf.setFont('helvetica', 'normal')
+    pdf.setFontSize(9)
+
+    // Render grouped products
+    Object.keys(groupedProducts)
+      .sort()
+      .forEach(categoryName => {
+        const categoryProducts = groupedProducts[categoryName]
+
+        // Check page break for category header
+        if (checkPageBreak(10)) yPos = 20
+
+        // Category header - SAMA STYLE SEPERTI PAYMENT METHODS TAPI WARNA LEBIH SOFT
+        pdf.setFillColor(248, 248, 248) // Warna lebih soft
+        pdf.rect(marginLeft, yPos, tableWidth, 10, 'F')
+        pdf.setFont('helvetica', 'bold')
+        pdf.setFontSize(9)
+        pdf.setTextColor(102, 45, 145)
+        pdf.text(categoryName.toUpperCase(), marginLeft + 2, yPos + 6)
+        pdf.setTextColor(0, 0, 0)
+        yPos += 10 // Kurangi jarak, langsung ke 10px seperti row normal
+
+        // Category products
+        categoryProducts.forEach((item, index) => {
+          if (checkPageBreak(10)) yPos = 20
+
+          currentX = marginLeft
+          pdf.setFont('helvetica', 'normal')
+          pdf.setFontSize(9)
+          pdf.setTextColor(0, 0, 0)
+
+          // Product name (indented and truncated if needed)
+          const productName =
+            item.product_name.length > 45 ? item.product_name.substring(0, 42) + '...' : item.product_name
+
+          pdf.text(`  ${productName}`, currentX + 2, yPos + 5) // Indented for products
+          currentX += colWidths[0]
+
+          // Quantity
+          pdf.text(item.quantity_sold.toString(), currentX + colWidths[1] / 2, yPos + 5, { align: 'center' })
+          currentX += colWidths[1]
+
+          // Order count
+          pdf.text((item.order_count || 0).toString(), currentX + colWidths[2] / 2, yPos + 5, { align: 'center' })
+          currentX += colWidths[2]
+
+          // Revenue
+          pdf.text(this.formatCurrency(item.revenue), currentX + colWidths[3] - 2, yPos + 5, { align: 'right' })
+          currentX += colWidths[3]
+
+          // Average price
+          pdf.text(this.formatCurrency(item.average_price), currentX + colWidths[4] - 2, yPos + 5, { align: 'right' })
+
+          // Draw bottom border line - SAMA SEPERTI PAYMENT METHODS
+          pdf.setDrawColor(230, 230, 230)
+          pdf.setLineWidth(0.3)
+          pdf.line(marginLeft, yPos + 8, marginLeft + tableWidth, yPos + 8)
+
+          yPos += 10
+        })
+
+        // Category subtotal - WARNA LEBIH SOFT
+        if (checkPageBreak(10)) yPos = 20
+
+        const categoryTotalQty = categoryProducts.reduce((sum, item) => sum + (item.quantity_sold || 0), 0)
+        const categoryTotalOrders = categoryProducts.reduce((sum, item) => sum + (item.order_count || 0), 0)
+        const categoryTotalRevenue = categoryProducts.reduce((sum, item) => sum + (item.revenue || 0), 0)
+
+        pdf.setFillColor(240, 240, 240) // Sama dengan table header, lebih soft
+        pdf.rect(marginLeft, yPos, tableWidth, 10, 'F')
+        pdf.setFont('helvetica', 'bold')
+        pdf.setFontSize(9)
+
+        currentX = marginLeft
+        pdf.text(`Subtotal ${categoryName}`, currentX + 2, yPos + 6)
+        currentX += colWidths[0]
+
+        pdf.text(categoryTotalQty.toString(), currentX + colWidths[1] / 2, yPos + 6, { align: 'center' })
+        currentX += colWidths[1]
+
+        pdf.text(categoryTotalOrders.toString(), currentX + colWidths[2] / 2, yPos + 6, { align: 'center' })
+        currentX += colWidths[2]
+
+        pdf.text(this.formatCurrency(categoryTotalRevenue), currentX + colWidths[3] - 2, yPos + 6, { align: 'right' })
+
+        yPos += 10 // Kurangi spacing dari 15 ke 10
+      })
+
+    // Grand total - SAMA SEPERTI PAYMENT METHODS FOOTER
+    if (checkPageBreak(10)) yPos = 20
+
+    pdf.setFillColor(245, 245, 245) // Lighter gray - SAMA SEPERTI PAYMENT METHODS
+    pdf.rect(marginLeft, yPos, tableWidth, 10, 'F')
+
+    pdf.setFont('helvetica', 'bold')
+    pdf.setFontSize(9)
+
+    currentX = marginLeft
+    pdf.text('TOTAL KESELURUHAN', currentX + 2, yPos + 6)
+    currentX += colWidths[0]
+
+    pdf.text(productSummary.totalQuantitySold.toString(), currentX + colWidths[1] / 2, yPos + 6, { align: 'center' })
+    currentX += colWidths[1]
+
+    pdf.text(productSummary.totalOrders.toString(), currentX + colWidths[2] / 2, yPos + 6, { align: 'center' })
+    currentX += colWidths[2]
+
+    pdf.text(this.formatCurrency(productSummary.totalRevenue), currentX + colWidths[3] - 2, yPos + 6, {
+      align: 'right'
+    })
+
+    return yPos + 25
+  }
+
+  /**
+   * Format currency for display
+   */
+  private static formatCurrency(amount: number): string {
+    return `Rp ${amount.toLocaleString('id-ID')}`
+  }
+
+  /**
+   * Generate filename with timestamp
+   */
+  private static generateFilename(prefix: string, extension: string): string {
+    const now = new Date()
+    const year = now.getFullYear()
+    const month = (now.getMonth() + 1).toString().padStart(2, '0')
+    const day = now.getDate().toString().padStart(2, '0')
+    const hour = now.getHours().toString().padStart(2, '0')
+    const minute = now.getMinutes().toString().padStart(2, '0')
+
+    return `${prefix}_${year}_${month}_${day}_${hour}${minute}.${extension}`
+  }
+}
@@ -0,0 +1,439 @@
+// services/pdfExportProductService.ts
+import { ProductSalesReport } from '@/types/services/analytic'
+
+export class PDFExportSalesProductService {
+  /**
+   * Export Product Sales Report to PDF
+   */
+  static async exportProductSalesToPDF(productData: ProductSalesReport, filename?: string) {
+    try {
+      // Dynamic import untuk jsPDF
+      const jsPDFModule = await import('jspdf')
+      const jsPDF = jsPDFModule.default
+
+      // Create new PDF document - PORTRAIT A4
+      const pdf = new jsPDF('p', 'mm', 'a4')
+
+      // Add content
+      await this.addProductReportContent(pdf, productData)
+
+      // Generate filename
+      const exportFilename = filename || this.generateFilename('Laporan_Penjualan_Produk', 'pdf')
+
+      // Save PDF
+      pdf.save(exportFilename)
+
+      return { success: true, filename: exportFilename }
+    } catch (error) {
+      console.error('Error exporting product report to PDF:', error)
+      return { success: false, error: `PDF export failed: ${(error as Error).message}` }
+    }
+  }
+
+  /**
+   * Add product report content to PDF
+   */
+  private static async addProductReportContent(pdf: any, productData: ProductSalesReport) {
+    let yPos = 20
+    const pageWidth = pdf.internal.pageSize.getWidth()
+    const pageHeight = pdf.internal.pageSize.getHeight()
+    const marginLeft = 20
+    const marginRight = 20
+    const marginBottom = 15
+
+    // Helper function to check page break
+    const checkPageBreak = (neededSpace: number) => {
+      if (yPos + neededSpace > pageHeight - marginBottom) {
+        pdf.addPage()
+        yPos = 20
+        return true
+      }
+      return false
+    }
+
+    // Title
+    yPos = this.addReportTitle(pdf, productData, yPos, pageWidth, marginLeft, marginRight)
+
+    // Section 1: Ringkasan
+    checkPageBreak(50)
+    yPos = this.addRingkasanSection(pdf, productData, yPos, pageWidth, marginLeft, marginRight, checkPageBreak)
+
+    // Section 2: Product Details
+    checkPageBreak(100)
+    yPos = this.addProductDetailsSection(pdf, productData, yPos, pageWidth, marginLeft, marginRight, checkPageBreak)
+  }
+
+  /**
+   * Add report title
+   */
+  private static addReportTitle(
+    pdf: any,
+    productData: ProductSalesReport,
+    startY: number,
+    pageWidth: number,
+    marginLeft: number,
+    marginRight: number
+  ): number {
+    let yPos = startY
+
+    // Title
+    pdf.setFontSize(20)
+    pdf.setFont('helvetica', 'bold')
+    pdf.setTextColor(0, 0, 0)
+    pdf.text('Laporan Penjualan Produk', pageWidth / 2, yPos, { align: 'center' })
+    yPos += 10
+
+    // Period
+    pdf.setFontSize(12)
+    pdf.setFont('helvetica', 'normal')
+    const periodText = `${productData.date_from.split('T')[0]} - ${productData.date_to.split('T')[0]}`
+    pdf.text(periodText, pageWidth / 2, yPos, { align: 'center' })
+    yPos += 10
+
+    // Purple line separator
+    pdf.setDrawColor(102, 45, 145)
+    pdf.setLineWidth(2)
+    pdf.line(marginLeft, yPos, pageWidth - marginRight, yPos)
+    yPos += 15
+
+    return yPos
+  }
+
+  /**
+   * Add Ringkasan section
+   */
+  private static addRingkasanSection(
+    pdf: any,
+    productData: ProductSalesReport,
+    startY: number,
+    pageWidth: number,
+    marginLeft: number,
+    marginRight: number,
+    checkPageBreak: (space: number) => boolean
+  ): number {
+    let yPos = startY
+
+    // Section title
+    pdf.setFontSize(14)
+    pdf.setFont('helvetica', 'bold')
+    pdf.setTextColor(102, 45, 145)
+    pdf.text('Ringkasan', marginLeft, yPos)
+    yPos += 12
+
+    // Reset text color
+    pdf.setTextColor(0, 0, 0)
+    pdf.setFontSize(11)
+
+    // Calculate summary
+    const productSummary = {
+      totalQuantitySold: productData.data?.reduce((sum, item) => sum + (item?.quantity_sold || 0), 0) || 0,
+      totalRevenue: productData.data?.reduce((sum, item) => sum + (item?.revenue || 0), 0) || 0,
+      totalOrders: productData.data?.reduce((sum, item) => sum + (item?.order_count || 0), 0) || 0,
+      averageRevenue: 0,
+      totalProducts: productData.data?.length || 0
+    }
+    productSummary.averageRevenue =
+      productSummary.totalQuantitySold > 0 ? productSummary.totalRevenue / productSummary.totalQuantitySold : 0
+
+    const ringkasanItems = [
+      { label: 'Total Produk', value: productSummary.totalProducts.toString(), bold: false },
+      { label: 'Total Quantity Sold', value: productSummary.totalQuantitySold.toString(), bold: false },
+      { label: 'Total Orders', value: productSummary.totalOrders.toString(), bold: false },
+      { label: 'Total Revenue', value: this.formatCurrency(productSummary.totalRevenue), bold: true },
+      { label: 'Average Revenue per Item', value: this.formatCurrency(productSummary.averageRevenue), bold: false }
+    ]
+
+    ringkasanItems.forEach((item, index) => {
+      if (checkPageBreak(15)) yPos = 20
+
+      // Set font weight
+      pdf.setFont('helvetica', item.bold ? 'bold' : 'normal')
+
+      pdf.text(item.label, marginLeft, yPos)
+      pdf.text(item.value, pageWidth - marginRight, yPos, { align: 'right' })
+
+      // Light separator line (except for bold row)
+      if (!item.bold) {
+        pdf.setDrawColor(230, 230, 230)
+        pdf.setLineWidth(0.5)
+        pdf.line(marginLeft, yPos + 2, pageWidth - marginRight, yPos + 2)
+      }
+
+      yPos += 8
+    })
+
+    return yPos + 20
+  }
+
+  /**
+   * Add Product Details section - SAMA STYLE SEPERTI SALES REPORT
+   */
+  private static addProductDetailsSection(
+    pdf: any,
+    productData: ProductSalesReport,
+    startY: number,
+    pageWidth: number,
+    marginLeft: number,
+    marginRight: number,
+    checkPageBreak: (space: number) => boolean
+  ): number {
+    let yPos = startY
+
+    // Section title
+    pdf.setFontSize(14)
+    pdf.setFont('helvetica', 'bold')
+    pdf.setTextColor(102, 45, 145)
+    pdf.text('Rincian Produk', marginLeft, yPos)
+    yPos += 12
+
+    // Reset formatting
+    pdf.setTextColor(0, 0, 0)
+
+    // Table setup
+    const tableWidth = pageWidth - marginLeft - marginRight
+    const colWidths = [60, 20, 20, 30, 30] // Product, Qty, Order, Revenue, Average
+    let currentX = marginLeft
+
+    // Table header
+    pdf.setFillColor(240, 240, 240)
+    pdf.rect(marginLeft, yPos, tableWidth, 10, 'F')
+
+    pdf.setFont('helvetica', 'bold')
+    pdf.setFontSize(9)
+
+    const headers = ['Produk', 'Qty', 'Order', 'Pendapatan', 'Rata Rata']
+    currentX = marginLeft
+
+    headers.forEach((header, index) => {
+      if (index === 0) {
+        pdf.text(header, currentX + 2, yPos + 6)
+      } else {
+        pdf.text(header, currentX + colWidths[index] / 2, yPos + 6, { align: 'center' })
+      }
+      currentX += colWidths[index]
+    })
+
+    yPos += 12
+
+    // Group products by category
+    const groupedProducts =
+      productData.data?.reduce(
+        (acc, item) => {
+          const categoryName = item.category_name || 'Tidak Berkategori'
+          if (!acc[categoryName]) {
+            acc[categoryName] = []
+          }
+          acc[categoryName].push(item)
+          return acc
+        },
+        {} as Record<string, any[]>
+      ) || {}
+
+    // Calculate product summary
+    const productSummary = {
+      totalQuantitySold: productData.data?.reduce((sum, item) => sum + (item?.quantity_sold || 0), 0) || 0,
+      totalRevenue: productData.data?.reduce((sum, item) => sum + (item?.revenue || 0), 0) || 0,
+      totalOrders: productData.data?.reduce((sum, item) => sum + (item?.order_count || 0), 0) || 0
+    }
+
+    // Table rows
+    pdf.setFont('helvetica', 'normal')
+    pdf.setFontSize(9)
+
+    // Render grouped products
+    Object.keys(groupedProducts)
+      .sort()
+      .forEach(categoryName => {
+        const categoryProducts = groupedProducts[categoryName]
+
+        // Check page break for category header
+        if (checkPageBreak(10)) yPos = 20
+
+        // Category header
+        pdf.setFillColor(248, 248, 248) // Soft background
+        pdf.rect(marginLeft, yPos, tableWidth, 10, 'F')
+        pdf.setFont('helvetica', 'bold')
+        pdf.setFontSize(9)
+        pdf.setTextColor(102, 45, 145)
+        pdf.text(categoryName.toUpperCase(), marginLeft + 2, yPos + 6)
+        pdf.setTextColor(0, 0, 0)
+        yPos += 10
+
+        // Category products
+        categoryProducts.forEach((item, index) => {
+          if (checkPageBreak(10)) yPos = 20
+
+          currentX = marginLeft
+          pdf.setFont('helvetica', 'normal')
+          pdf.setFontSize(9)
+          pdf.setTextColor(0, 0, 0)
+
+          // Product name (indented and truncated if needed)
+          const productName =
+            item.product_name.length > 45 ? item.product_name.substring(0, 42) + '...' : item.product_name
+
+          pdf.text(`  ${productName}`, currentX + 2, yPos + 5) // Indented for products
+          currentX += colWidths[0]
+
+          // Quantity
+          pdf.text(item.quantity_sold.toString(), currentX + colWidths[1] / 2, yPos + 5, { align: 'center' })
+          currentX += colWidths[1]
+
+          // Order count
+          pdf.text((item.order_count || 0).toString(), currentX + colWidths[2] / 2, yPos + 5, { align: 'center' })
+          currentX += colWidths[2]
+
+          // Revenue
+          pdf.text(this.formatCurrency(item.revenue), currentX + colWidths[3] - 2, yPos + 5, { align: 'right' })
+          currentX += colWidths[3]
+
+          // Average price
+          pdf.text(this.formatCurrency(item.average_price), currentX + colWidths[4] - 2, yPos + 5, { align: 'right' })
+
+          // Draw bottom border line
+          pdf.setDrawColor(230, 230, 230)
+          pdf.setLineWidth(0.3)
+          pdf.line(marginLeft, yPos + 8, marginLeft + tableWidth, yPos + 8)
+
+          yPos += 10
+        })
+
+        // Category subtotal
+        if (checkPageBreak(10)) yPos = 20
+
+        const categoryTotalQty = categoryProducts.reduce((sum, item) => sum + (item.quantity_sold || 0), 0)
+        const categoryTotalOrders = categoryProducts.reduce((sum, item) => sum + (item.order_count || 0), 0)
+        const categoryTotalRevenue = categoryProducts.reduce((sum, item) => sum + (item.revenue || 0), 0)
+
+        pdf.setFillColor(240, 240, 240) // Sama dengan table header
+        pdf.rect(marginLeft, yPos, tableWidth, 10, 'F')
+        pdf.setFont('helvetica', 'bold')
+        pdf.setFontSize(9)
+
+        currentX = marginLeft
+        pdf.text(`Subtotal ${categoryName}`, currentX + 2, yPos + 6)
+        currentX += colWidths[0]
+
+        pdf.text(categoryTotalQty.toString(), currentX + colWidths[1] / 2, yPos + 6, { align: 'center' })
+        currentX += colWidths[1]
+
+        pdf.text(categoryTotalOrders.toString(), currentX + colWidths[2] / 2, yPos + 6, { align: 'center' })
+        currentX += colWidths[2]
+
+        pdf.text(this.formatCurrency(categoryTotalRevenue), currentX + colWidths[3] - 2, yPos + 6, { align: 'right' })
+
+        yPos += 10
+      })
+
+    // Grand total
+    if (checkPageBreak(10)) yPos = 20
+
+    pdf.setFillColor(245, 245, 245) // Lighter gray
+    pdf.rect(marginLeft, yPos, tableWidth, 10, 'F')
+
+    pdf.setFont('helvetica', 'bold')
+    pdf.setFontSize(9)
+
+    currentX = marginLeft
+    pdf.text('TOTAL KESELURUHAN', currentX + 2, yPos + 6)
+    currentX += colWidths[0]
+
+    pdf.text(productSummary.totalQuantitySold.toString(), currentX + colWidths[1] / 2, yPos + 6, { align: 'center' })
+    currentX += colWidths[1]
+
+    pdf.text(productSummary.totalOrders.toString(), currentX + colWidths[2] / 2, yPos + 6, { align: 'center' })
+    currentX += colWidths[2]
+
+    pdf.text(this.formatCurrency(productSummary.totalRevenue), currentX + colWidths[3] - 2, yPos + 6, {
+      align: 'right'
+    })
+
+    return yPos + 25
+  }
+
+  /**
+   * Format currency for display
+   */
+  private static formatCurrency(amount: number): string {
+    return `Rp ${amount.toLocaleString('id-ID')}`
+  }
+
+  /**
+   * Generate filename with timestamp
+   */
+  private static generateFilename(prefix: string, extension: string): string {
+    const now = new Date()
+    const year = now.getFullYear()
+    const month = (now.getMonth() + 1).toString().padStart(2, '0')
+    const day = now.getDate().toString().padStart(2, '0')
+    const hour = now.getHours().toString().padStart(2, '0')
+    const minute = now.getMinutes().toString().padStart(2, '0')
+
+    return `${prefix}_${year}_${month}_${day}_${hour}${minute}.${extension}`
+  }
+
+  /**
+   * Export Product Sales data with custom configuration
+   */
+  static async exportCustomProductToPDF(
+    productData: ProductSalesReport,
+    options?: {
+      title?: string
+      includeSummary?: boolean
+      customFilename?: string
+      groupByCategory?: boolean
+    }
+  ) {
+    try {
+      const jsPDFModule = await import('jspdf')
+      const jsPDF = jsPDFModule.default
+
+      const pdf = new jsPDF('p', 'mm', 'a4')
+
+      let yPos = 20
+      const pageWidth = pdf.internal.pageSize.getWidth()
+      const pageHeight = pdf.internal.pageSize.getHeight()
+      const marginLeft = 20
+      const marginRight = 20
+      const marginBottom = 15
+
+      const checkPageBreak = (neededSpace: number) => {
+        if (yPos + neededSpace > pageHeight - marginBottom) {
+          pdf.addPage()
+          yPos = 20
+          return true
+        }
+        return false
+      }
+
+      // Custom title if provided
+      if (options?.title) {
+        pdf.setFontSize(20)
+        pdf.setFont('helvetica', 'bold')
+        pdf.setTextColor(0, 0, 0)
+        pdf.text(options.title, pageWidth / 2, yPos, { align: 'center' })
+        yPos += 15
+      } else {
+        yPos = this.addReportTitle(pdf, productData, yPos, pageWidth, marginLeft, marginRight)
+      }
+
+      // Optional summary section
+      if (options?.includeSummary !== false) {
+        checkPageBreak(50)
+        yPos = this.addRingkasanSection(pdf, productData, yPos, pageWidth, marginLeft, marginRight, checkPageBreak)
+      }
+
+      // Product details
+      checkPageBreak(100)
+      yPos = this.addProductDetailsSection(pdf, productData, yPos, pageWidth, marginLeft, marginRight, checkPageBreak)
+
+      const exportFilename = options?.customFilename || this.generateFilename('Custom_Product_Sales', 'pdf')
+      pdf.save(exportFilename)
+
+      return { success: true, filename: exportFilename }
+    } catch (error) {
+      console.error('Error exporting custom product report to PDF:', error)
+      return { success: false, error: `PDF export failed: ${(error as Error).message}` }
+    }
+  }
+}
@@ -1,4 +1,4 @@
-import { CampaignRequest } from '@/types/services/campaign'
+import { CampaignRequest, CampaignRuleRequest } from '@/types/services/campaign'
 import { useMutation, useQueryClient } from '@tanstack/react-query'
 import { toast } from 'react-toastify'
 import { api } from '../api'
@@ -50,3 +50,51 @@ export const useCampaignsMutation = () => {

  return { createCampaign, updateCampaign, deleteCampaign }
 }
+
+export const useCampaignRulesMutation = () => {
+  const queryClient = useQueryClient()
+
+  const createCampaignRule = useMutation({
+    mutationFn: async (newCampaignRule: CampaignRuleRequest) => {
+      const response = await api.post('/marketing/campaign-rules', newCampaignRule)
+      return response.data
+    },
+    onSuccess: () => {
+      toast.success('CampaignRule created successfully!')
+      queryClient.invalidateQueries({ queryKey: ['campaign-rules/campaign'] })
+    },
+    onError: (error: any) => {
+      toast.error(error.response?.data?.errors?.[0]?.cause || 'Create failed')
+    }
+  })
+
+  const updateCampaignRule = useMutation({
+    mutationFn: async ({ id, payload }: { id: string; payload: CampaignRuleRequest }) => {
+      const response = await api.put(`/marketing/campaign-rules/${id}`, payload)
+      return response.data
+    },
+    onSuccess: () => {
+      toast.success('CampaignRule updated successfully!')
+      queryClient.invalidateQueries({ queryKey: ['campaign-rules/campaign'] })
+    },
+    onError: (error: any) => {
+      toast.error(error.response?.data?.errors?.[0]?.cause || 'Update failed')
+    }
+  })
+
+  const deleteCampaignRule = useMutation({
+    mutationFn: async (id: string) => {
+      const response = await api.delete(`/marketing/campaign-rules/${id}`)
+      return response.data
+    },
+    onSuccess: () => {
+      toast.success('CampaignRule deleted successfully!')
+      queryClient.invalidateQueries({ queryKey: ['campaign-rules/campaign'] })
+    },
+    onError: (error: any) => {
+      toast.error(error.response?.data?.errors?.[0]?.cause || 'Delete failed')
+    }
+  })
+
+  return { createCampaignRule, updateCampaignRule, deleteCampaignRule }
+}
@@ -26,7 +26,7 @@ export const usePurchaseOrdersMutation = () => {
      return response.data
    },
    onSuccess: () => {
-      toast.success('Purchase Order created successfully!')
+      toast.success('Purchase Order Payment successfully!')
      queryClient.invalidateQueries({ queryKey: ['purchase-orders'] })
    },
    onError: (error: any) => {
@@ -34,5 +34,19 @@ export const usePurchaseOrdersMutation = () => {
    }
  })

-  return { createPurchaseOrder, sendPaymentPurchaseOrder }
+  const updateStatus = useMutation({
+    mutationFn: async ({ id, payload }: { id: string; payload: 'approved' | 'rejected' }) => {
+      const response = await api.put(`/purchase-orders/${id}`, { status: payload })
+      return response.data
+    },
+    onSuccess: () => {
+      toast.success('Purchase Order Status successfully!')
+      queryClient.invalidateQueries({ queryKey: ['purchase-orders'] })
+    },
+    onError: (error: any) => {
+      toast.error(error.response?.data?.errors?.[0]?.cause || 'Create failed')
+    }
+  })
+
+  return { createPurchaseOrder, sendPaymentPurchaseOrder, updateStatus }
 }
@@ -1,6 +1,6 @@
 import { useQuery } from '@tanstack/react-query'
 import { api } from '../api'
-import { Campaign, Campaigns } from '@/types/services/campaign'
+import { Campaign, CampaignRule, Campaigns } from '@/types/services/campaign'

 interface CampaignQueryParams {
  page?: number
@@ -44,3 +44,13 @@ export function useCampaignById(id: string) {
    }
  })
 }
+
+export function useCampaignRulesByCampaignId(id: string) {
+  return useQuery<CampaignRule[]>({
+    queryKey: ['campaign-rules/campaign', id],
+    queryFn: async () => {
+      const res = await api.get(`/marketing/campaign-rules/campaign/${id}`)
+      return res.data.data
+    }
+  })
+}
@@ -14,8 +14,9 @@ export interface Campaign {
  is_active: boolean
  show_on_app: boolean
  position: number
-  metadata?: Record<string, any>
-  rules?: CampaignRule[]
+  metadata?: {
+    banner_url?: string
+  }
  created_at: string // ISO string
  updated_at: string // ISO string
 }
@@ -43,16 +44,19 @@ export interface CampaignRequest {
  is_active: boolean
  show_on_app: boolean
  position: number
-  metadata?: Record<string, any>
-  rules: CampaignRuleRequest[]
+  metadata?: {
+    banner_url?: string
+  }
 }

 export interface CampaignRuleRequest {
-  rule_type: RuleType
+  campaign_id: string
+  rule_type: 'TIER' | 'SPEND' | 'PRODUCT' | 'CATEGORY' | 'DAY' | 'LOCATION'
  condition_value?: string
-  reward_type: RewardType
+  reward_type: 'POINTS' | 'TOKENS' | 'REWARD'
  reward_value?: number
  reward_subtype?: string
+  reward_ref_id?: string
 }

 export interface Campaigns {
@@ -43,6 +43,15 @@ export const formatDateDDMMYYYY = (dateString: Date | string) => {
  return `${day}-${month}-${year}`
 }

+export const formatDateYYYYMMDD = (dateString: Date | string) => {
+  const date = new Date(dateString)
+  date.setHours(0, 0, 0, 0)
+  const day = String(date.getDate()).padStart(2, '0')
+  const month = String(date.getMonth() + 1).padStart(2, '0')
+  const year = date.getFullYear()
+  return `${year}-${month}-${day}`
+}
+
 export const formatForInputDate = (dateString: Date | string) => {
  const date = new Date(dateString)
  const day = String(date.getDate()).padStart(2, '0')
@@ -51,7 +60,6 @@ export const formatForInputDate = (dateString: Date | string) => {
  return `${year}-${month}-${day}`
 }

-
 export const formatDatetime = (dateString: string | number | Date) => {
  const date = new Date(dateString)

@@ -0,0 +1,43 @@
+'use client'
+
+// MUI Imports
+import { styled } from '@mui/material/styles'
+
+// Styled Component
+const AuthIllustrationWrapper = styled('div')(({ theme }) => ({
+  width: '100%',
+  maxWidth: 450,
+  position: 'relative',
+  [theme.breakpoints.up('md')]: {
+    '&:before': {
+      zIndex: -1,
+      position: 'absolute',
+      height: '234px',
+      width: '238px',
+      content: '""',
+      top: '-80px',
+      left: '-45px',
+      backgroundImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='238' height='234' viewBox='0 0 238 234' fill='none'%3E%3Crect x='87.9395' y='0.5' width='149' height='149' rx='19.5' stroke='%23${theme.palette.primary.main.slice(
+        1
+      )}' stroke-opacity='0.16'/%3E%3Crect y='33.5608' width='200' height='200' rx='10' fill='%23${theme.palette.primary.main.slice(
+        1
+      )}' fill-opacity='0.08'/%3E%3C/svg%3E")`
+    },
+    '&:after': {
+      zIndex: -1,
+      position: 'absolute',
+      height: '180px',
+      width: '180px',
+      content: '""',
+      right: '-57px',
+      bottom: '-64px',
+      backgroundImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180' fill='none'%3E%3Crect x='1' y='1' width='178' height='178' rx='19' stroke='%23${theme.palette.primary.main.slice(
+        1
+      )}' stroke-opacity='0.16' stroke-width='2' stroke-dasharray='8 8'/%3E%3Crect x='22.5' y='22.5' width='135' height='135' rx='10' fill='%23${theme.palette.primary.main.slice(
+        1
+      )}' fill-opacity='0.08'/%3E%3C/svg%3E")`
+    }
+  }
+}))
+
+export default AuthIllustrationWrapper
@@ -8,8 +8,8 @@ import Link from 'next/link'
 import { useParams, useRouter, useSearchParams } from 'next/navigation'

 // MUI Imports
-import useMediaQuery from '@mui/material/useMediaQuery'
-import { styled, useTheme } from '@mui/material/styles'
+import Card from '@mui/material/Card'
+import CardContent from '@mui/material/CardContent'
 import Typography from '@mui/material/Typography'
 import IconButton from '@mui/material/IconButton'
 import InputAdornment from '@mui/material/InputAdornment'
@@ -17,7 +17,7 @@ import Checkbox from '@mui/material/Checkbox'
 import Button from '@mui/material/Button'
 import FormControlLabel from '@mui/material/FormControlLabel'
 import Divider from '@mui/material/Divider'
-import Alert from '@mui/material/Alert'
+import { CircularProgress } from '@mui/material'

 // Third-party Imports
 import { Controller, useForm } from 'react-hook-form'
@@ -25,11 +25,10 @@ import { valibotResolver } from '@hookform/resolvers/valibot'
 import { email, object, minLength, string, pipe, nonEmpty } from 'valibot'
 import type { SubmitHandler } from 'react-hook-form'
 import type { InferInput } from 'valibot'
-import classnames from 'classnames'
+import { toast } from 'react-toastify'

 // Type Imports
-import type { SystemMode } from '@core/types'
-import type { Locale } from '@/configs/i18n'
+import type { Locale } from '@configs/i18n'

 // Component Imports
 import Logo from '@components/layout/shared/Logo'
@@ -38,39 +37,12 @@ import CustomTextField from '@core/components/mui/TextField'
 // Config Imports
 import themeConfig from '@configs/themeConfig'

-// Hook Imports
-import { useImageVariant } from '@core/hooks/useImageVariant'
-import { useSettings } from '@core/hooks/useSettings'
-
 // Util Imports
 import { getLocalizedUrl } from '@/utils/i18n'
 import { useAuthMutation } from '../services/mutations/auth'
-import { CircularProgress } from '@mui/material'
-import { toast } from 'react-toastify'

-// Styled Custom Components
-const LoginIllustration = styled('img')(({ theme }) => ({
-  zIndex: 2,
-  blockSize: 'auto',
-  maxBlockSize: 680,
-  maxInlineSize: '100%',
-  margin: theme.spacing(12),
-  [theme.breakpoints.down(1536)]: {
-    maxBlockSize: 550
-  },
-  [theme.breakpoints.down('lg')]: {
-    maxBlockSize: 450
-  }
-}))
-
-const MaskImg = styled('img')({
-  blockSize: 'auto',
-  maxBlockSize: 355,
-  inlineSize: '100%',
-  position: 'absolute',
-  insetBlockEnd: 0,
-  zIndex: -1
-})
+// Styled Component Imports
+import AuthIllustrationWrapper from './AuthIllustrationWrapper'

 type ErrorType = {
  message: string[]
@@ -87,29 +59,17 @@ const schema = object({
  )
 })

-const Login = ({ mode }: { mode: SystemMode }) => {
+const Login = () => {
  // States
  const [isPasswordShown, setIsPasswordShown] = useState(false)
  const [errorState, setErrorState] = useState<ErrorType | null>(null)

  const { login } = useAuthMutation()

-  // Vars
-  const darkImg = '/images/pages/auth-mask-dark.png'
-  const lightImg = '/images/pages/auth-mask-light.png'
-  const darkIllustration = '/images/illustrations/auth/v2-login-dark.png'
-  const lightIllustration = '/images/illustrations/auth/v2-login-light.png'
-  const borderedDarkIllustration = '/images/illustrations/auth/v2-login-dark-border.png'
-  const borderedLightIllustration = '/images/illustrations/auth/v2-login-light-border.png'
-
  // Hooks
  const router = useRouter()
  const searchParams = useSearchParams()
  const { lang: locale } = useParams()
-  const { settings } = useSettings()
-  const theme = useTheme()
-  const hidden = useMediaQuery(theme.breakpoints.down('md'))
-  const authBackground = useImageVariant(mode, lightImg, darkImg)

  const {
    control,
@@ -123,14 +83,6 @@ const Login = ({ mode }: { mode: SystemMode }) => {
    }
  })

-  const characterIllustration = useImageVariant(
-    mode,
-    lightIllustration,
-    darkIllustration,
-    borderedLightIllustration,
-    borderedDarkIllustration
-  )
-
  const handleClickShowPassword = () => setIsPasswordShown(show => !show)

  const onSubmit: SubmitHandler<FormData> = async (data: FormData) => {
@@ -138,11 +90,9 @@ const Login = ({ mode }: { mode: SystemMode }) => {
      onSuccess: (data: any) => {
        if (data?.user?.role === 'admin') {
          const redirectURL = searchParams.get('redirectTo') ?? '/dashboards/overview'
-
          router.replace(getLocalizedUrl(redirectURL, locale as Locale))
        } else {
          const redirectURL = searchParams.get('redirectTo') ?? '/sa/organizations/list'
-
          router.replace(getLocalizedUrl(redirectURL, locale as Locale))
        }
      },
@@ -153,34 +103,17 @@ const Login = ({ mode }: { mode: SystemMode }) => {
  }

  return (
-    <div className='flex bs-full justify-center'>
-      <div
-        className={classnames(
-          'flex bs-full items-center justify-center flex-1 min-bs-[100dvh] relative p-6 max-md:hidden',
-          {
-            'border-ie': settings.skin === 'bordered'
-          }
-        )}
-      >
-        <LoginIllustration src={characterIllustration} alt='character-illustration' />
-        {!hidden && <MaskImg alt='mask' src={authBackground} />}
-      </div>
-      <div className='flex justify-center items-center bs-full bg-backgroundPaper !min-is-full p-6 md:!min-is-[unset] md:p-12 md:is-[480px]'>
-        <div className='absolute block-start-5 sm:block-start-[33px] inline-start-6 sm:inline-start-[38px]'>
-          <Logo />
-        </div>
-        <div className='flex flex-col gap-6 is-full sm:is-auto md:is-full sm:max-is-[400px] md:max-is-[unset] mbs-8 sm:mbs-11 md:mbs-0'>
-          <div className='flex flex-col gap-1'>
+    <AuthIllustrationWrapper>
+      <Card className='flex flex-col sm:is-[450px]'>
+        <CardContent className='sm:!p-12'>
+          <Link href={getLocalizedUrl('/', locale as Locale)} className='flex justify-center mbe-6'>
+            <Logo />
+          </Link>
+          <div className='flex flex-col gap-1 mbe-6'>
            <Typography variant='h4'>{`Welcome to ${themeConfig.templateName}! 👋🏻`}</Typography>
            <Typography>Please sign-in to your account and start the adventure</Typography>
          </div>
-          <form
-            noValidate
-            autoComplete='off'
-            action={() => {}}
-            onSubmit={handleSubmit(onSubmit)}
-            className='flex flex-col gap-6'
-          >
+          <form noValidate autoComplete='off' onSubmit={handleSubmit(onSubmit)} className='flex flex-col gap-6'>
            <Controller
              name='email'
              control={control}
@@ -214,7 +147,7 @@ const Login = ({ mode }: { mode: SystemMode }) => {
                  fullWidth
                  label='Password'
                  placeholder='············'
-                  id='login-password'
+                  id='outlined-adornment-password'
                  type={isPasswordShown ? 'text' : 'password'}
                  onChange={e => {
                    field.onChange(e.target.value)
@@ -253,20 +186,10 @@ const Login = ({ mode }: { mode: SystemMode }) => {
            <Button fullWidth variant='contained' type='submit' disabled={login.isPending}>
              {login.isPending ? <CircularProgress size={16} /> : 'Login'}
            </Button>
-            <div className='flex justify-center items-center flex-wrap gap-2'>
-              <Typography>New on our platform?</Typography>
-              <Typography
-                component={Link}
-                href={getLocalizedUrl('/organization', locale as Locale)}
-                color='primary.main'
-              >
-                Create an account
-              </Typography>
-            </div>
          </form>
-        </div>
-      </div>
-    </div>
+        </CardContent>
+      </Card>
+    </AuthIllustrationWrapper>
  )
 }

@@ -82,6 +82,8 @@ const ProductOrganize = () => {
            onChange={e => handleSelectChange('printer_type', e.target.value)}
          >
            <MenuItem value={`kitchen`}>Kitchen</MenuItem>
+            <MenuItem value={`bar`}>Bar</MenuItem>
+            <MenuItem value={`ticket`}>Ticket</MenuItem>
          </CustomTextField>
        </form>
      </CardContent>
@@ -7,49 +7,22 @@ import Drawer from '@mui/material/Drawer'
 import IconButton from '@mui/material/IconButton'
 import MenuItem from '@mui/material/MenuItem'
 import Typography from '@mui/material/Typography'
-import Divider from '@mui/material/Divider'
-import Grid from '@mui/material/Grid2'
 import Box from '@mui/material/Box'
 import Switch from '@mui/material/Switch'
 import FormControlLabel from '@mui/material/FormControlLabel'
-import Chip from '@mui/material/Chip'
-import InputAdornment from '@mui/material/InputAdornment'

 // Third-party Imports
-import { useForm, Controller, useFieldArray } from 'react-hook-form'
+import { useForm, Controller } from 'react-hook-form'

 // Component Imports
 import CustomTextField from '@core/components/mui/TextField'
+import ImageUpload from '@/components/ImageUpload'

 // Types
-import { Campaign } from '@/types/services/campaign'
+import { Campaign, CampaignRequest, CampaignType } from '@/types/services/campaign'
 import { useCampaignsMutation } from '@/services/mutations/campaign'
-
-// Updated Type Definitions
-export type CampaignType = 'REWARD' | 'POINTS' | 'TOKENS' | 'MIXED'
-export type RuleType = 'TIER' | 'SPEND' | 'PRODUCT' | 'CATEGORY' | 'DAY' | 'LOCATION'
-export type RewardType = 'POINTS' | 'TOKENS' | 'REWARD'
-
-export interface CampaignRequest {
-  name: string
-  description?: string
-  type: CampaignType
-  start_date: string // ISO string
-  end_date: string // ISO string
-  is_active: boolean
-  show_on_app: boolean
-  position: number
-  metadata?: Record<string, any>
-  rules: CampaignRuleRequest[]
-}
-
-export interface CampaignRuleRequest {
-  rule_type: RuleType
-  condition_value?: string
-  reward_type: RewardType
-  reward_value?: number
-  reward_subtype?: string
-}
+import { useFilesMutation } from '@/services/mutations/files'
+import { formatDateYYYYMMDD } from '@/utils/transform'

 type Props = {
  open: boolean
@@ -66,14 +39,7 @@ type FormValidateType = {
  is_active: boolean
  show_on_app: boolean
  position: number
-  // Rules array
-  rules: {
-    rule_type: RuleType
-    condition_value: string
-    reward_type: RewardType
-    reward_value: number
-    reward_subtype: string
-  }[]
+  banner_url: string
 }

 // Initial form data
@@ -86,16 +52,7 @@ const initialData: FormValidateType = {
  is_active: true,
  show_on_app: true,
  position: 1,
-  // Initial rule
-  rules: [
-    {
-      rule_type: 'SPEND',
-      condition_value: '',
-      reward_type: 'POINTS',
-      reward_value: 0,
-      reward_subtype: ''
-    }
-  ]
+  banner_url: ''
 }

 const AddEditCampaignDrawer = (props: Props) => {
@@ -105,8 +62,10 @@ const AddEditCampaignDrawer = (props: Props) => {
  // States
  const [showMore, setShowMore] = useState(false)
  const [isSubmitting, setIsSubmitting] = useState(false)
+  const [bannerUrl, setBannerUrl] = useState<string>('')

  const { createCampaign, updateCampaign } = useCampaignsMutation()
+  const { mutate: uploadFile, isPending: isUploadPending } = useFilesMutation().uploadFile

  // Determine if this is edit mode
  const isEditMode = Boolean(data?.id)
@@ -123,12 +82,6 @@ const AddEditCampaignDrawer = (props: Props) => {
    defaultValues: initialData
  })

-  // Field array for rules
-  const { fields, append, remove } = useFieldArray({
-    control,
-    name: 'rules'
-  })
-
  const watchedStartDate = watch('start_date')
  const watchedEndDate = watch('end_date')

@@ -144,29 +97,16 @@ const AddEditCampaignDrawer = (props: Props) => {
        is_active: data.is_active ?? true,
        show_on_app: data.show_on_app ?? true,
        position: data.position || 1,
-        // Map existing rules
-        rules: data.rules?.map(rule => ({
-          rule_type: rule.rule_type,
-          condition_value: rule.condition_value || '',
-          reward_type: rule.reward_type,
-          reward_value: rule.reward_value || 0,
-          reward_subtype: rule.reward_subtype || ''
-        })) || [
-          {
-            rule_type: 'SPEND',
-            condition_value: '',
-            reward_type: 'POINTS',
-            reward_value: 0,
-            reward_subtype: ''
-          }
-        ]
+        banner_url: data.metadata?.banner_url || ''
      }

      resetForm(formData)
+      setBannerUrl(data.metadata?.banner_url || '')
      setShowMore(true) // Always show more for edit mode
    } else {
      // Reset to initial data for add mode
      resetForm(initialData)
+      setBannerUrl('')
      setShowMore(false)
    }
  }, [data, isEditMode, resetForm])
@@ -175,20 +115,10 @@ const AddEditCampaignDrawer = (props: Props) => {
    try {
      setIsSubmitting(true)

-      // Create rules array
-      const rulesRequest: CampaignRuleRequest[] = formData.rules.map(rule => ({
-        rule_type: rule.rule_type,
-        condition_value: rule.condition_value || undefined,
-        reward_type: rule.reward_type,
-        reward_value: rule.reward_value || undefined,
-        reward_subtype: rule.reward_subtype || undefined
-      }))
-
-      // Create metadata from rules if needed
-      const metadata: Record<string, any> = {}
-      const spendRule = formData.rules.find(rule => rule.rule_type === 'SPEND')
-      if (spendRule?.condition_value) {
-        metadata.minPurchase = parseInt(spendRule.condition_value)
+      // Create metadata object
+      const metadata: { banner_url?: string } = {}
+      if (bannerUrl.trim()) {
+        metadata.banner_url = bannerUrl.trim()
      }

      // Create CampaignRequest object
@@ -196,13 +126,12 @@ const AddEditCampaignDrawer = (props: Props) => {
        name: formData.name,
        description: formData.description || undefined,
        type: formData.type,
-        start_date: new Date(formData.start_date).toISOString(),
-        end_date: new Date(formData.end_date).toISOString(),
+        start_date: formatDateYYYYMMDD(formData.start_date),
+        end_date: formatDateYYYYMMDD(formData.end_date),
        is_active: formData.is_active,
        show_on_app: formData.show_on_app,
        position: formData.position,
-        metadata: Object.keys(metadata).length > 0 ? metadata : undefined,
-        rules: rulesRequest
+        metadata: Object.keys(metadata).length > 0 ? metadata : undefined
      }

      if (isEditMode && data?.id) {
@@ -236,70 +165,29 @@ const AddEditCampaignDrawer = (props: Props) => {
  const handleReset = () => {
    handleClose()
    resetForm(initialData)
+    setBannerUrl('')
    setShowMore(false)
  }

-  const formatCurrency = (value: number) => {
-    return new Intl.NumberFormat('id-ID', {
-      style: 'currency',
-      currency: 'IDR',
-      minimumFractionDigits: 0
-    }).format(value)
-  }
+  // Handle file upload
+  const handleBannerUpload = async (file: File): Promise<string> => {
+    return new Promise((resolve, reject) => {
+      const formData = new FormData()
+      formData.append('file', file)
+      formData.append('file_type', 'image')
+      formData.append('description', 'campaign banner upload')

-  const getRewardTypeLabel = (type: RewardType) => {
-    switch (type) {
-      case 'POINTS':
-        return 'Poin'
-      case 'TOKENS':
-        return 'Token'
-      case 'REWARD':
-        return 'Reward'
-      default:
-        return type
-    }
-  }
-
-  const getRewardValuePlaceholder = (type: RewardType) => {
-    switch (type) {
-      case 'POINTS':
-        return 'Jumlah poin yang diberikan'
-      case 'TOKENS':
-        return 'Jumlah token yang diberikan'
-      case 'REWARD':
-        return 'Nilai reward'
-      default:
-        return 'Nilai reward'
-    }
-  }
-
-  const getConditionValuePlaceholder = (ruleType: RuleType) => {
-    switch (ruleType) {
-      case 'SPEND':
-        return 'Minimum pembelian (Rupiah)'
-      case 'TIER':
-        return 'Tier pelanggan (misal: GOLD, SILVER)'
-      case 'PRODUCT':
-        return 'ID atau nama produk'
-      case 'CATEGORY':
-        return 'Kategori produk'
-      case 'DAY':
-        return 'Hari dalam seminggu (misal: MONDAY)'
-      case 'LOCATION':
-        return 'Lokasi atau kota'
-      default:
-        return 'Nilai kondisi'
-    }
-  }
-
-  const getConditionValueInputProps = (ruleType: RuleType) => {
-    if (ruleType === 'SPEND') {
-      return {
-        startAdornment: <InputAdornment position='start'>Rp</InputAdornment>,
-        type: 'number' as const
-      }
-    }
-    return { type: 'text' as const }
+      uploadFile(formData, {
+        onSuccess: r => {
+          setBannerUrl(r.file_url)
+          setValue('banner_url', r.file_url) // Update form value
+          resolve(r.id)
+        },
+        onError: er => {
+          reject(er)
+        }
+      })
+    })
  }

  return (
@@ -402,202 +290,6 @@ const AddEditCampaignDrawer = (props: Props) => {
              />
            </div>

-            {/* Rules Section */}
-            <div>
-              <Box display='flex' alignItems='center' justifyContent='space-between' className='mb-4'>
-                <Typography variant='h6'>Aturan Kampanye</Typography>
-                <Button
-                  variant='outlined'
-                  size='small'
-                  startIcon={<i className='tabler-plus' />}
-                  onClick={() =>
-                    append({
-                      rule_type: 'SPEND',
-                      condition_value: '',
-                      reward_type: 'POINTS',
-                      reward_value: 0,
-                      reward_subtype: ''
-                    })
-                  }
-                >
-                  Tambah Aturan
-                </Button>
-              </Box>
-
-              {fields.map((field, index) => (
-                <Box key={field.id} className='mb-6 p-4 border border-gray-200 rounded-lg'>
-                  <Box display='flex' alignItems='center' justifyContent='between' className='mb-3'>
-                    <Typography variant='subtitle2' className='font-medium'>
-                      Aturan {index + 1}
-                    </Typography>
-                    {fields.length > 1 && (
-                      <IconButton size='small' color='error' onClick={() => remove(index)}>
-                        <i className='tabler-trash text-lg' />
-                      </IconButton>
-                    )}
-                  </Box>
-
-                  <div className='flex flex-col gap-4'>
-                    {/* Rule Type */}
-                    <div>
-                      <Typography variant='body2' className='mb-2'>
-                        Tipe Aturan <span className='text-red-500'>*</span>
-                      </Typography>
-                      <Controller
-                        name={`rules.${index}.rule_type`}
-                        control={control}
-                        rules={{ required: 'Tipe aturan wajib dipilih' }}
-                        render={({ field }) => (
-                          <CustomTextField
-                            {...field}
-                            select
-                            fullWidth
-                            size='small'
-                            error={!!errors.rules?.[index]?.rule_type}
-                            helperText={errors.rules?.[index]?.rule_type?.message}
-                          >
-                            <MenuItem value='SPEND'>Minimum Pembelian</MenuItem>
-                            <MenuItem value='TIER'>Tier Pelanggan</MenuItem>
-                            <MenuItem value='PRODUCT'>Produk Tertentu</MenuItem>
-                            <MenuItem value='CATEGORY'>Kategori Produk</MenuItem>
-                            <MenuItem value='DAY'>Hari Tertentu</MenuItem>
-                            <MenuItem value='LOCATION'>Lokasi Tertentu</MenuItem>
-                          </CustomTextField>
-                        )}
-                      />
-                    </div>
-
-                    {/* Condition Value */}
-                    <div>
-                      <Typography variant='body2' className='mb-2'>
-                        Nilai Kondisi <span className='text-red-500'>*</span>
-                      </Typography>
-                      <Controller
-                        name={`rules.${index}.condition_value`}
-                        control={control}
-                        rules={{ required: 'Nilai kondisi wajib diisi' }}
-                        render={({ field }) => {
-                          const ruleType = watch(`rules.${index}.rule_type`)
-                          return (
-                            <CustomTextField
-                              {...field}
-                              fullWidth
-                              size='small'
-                              placeholder={getConditionValuePlaceholder(ruleType)}
-                              error={!!errors.rules?.[index]?.condition_value}
-                              helperText={errors.rules?.[index]?.condition_value?.message}
-                              InputProps={getConditionValueInputProps(ruleType)}
-                              type={getConditionValueInputProps(ruleType).type}
-                            />
-                          )
-                        }}
-                      />
-                    </div>
-
-                    {/* Reward Type */}
-                    <div>
-                      <Typography variant='body2' className='mb-2'>
-                        Jenis Reward <span className='text-red-500'>*</span>
-                      </Typography>
-                      <Controller
-                        name={`rules.${index}.reward_type`}
-                        control={control}
-                        rules={{ required: 'Jenis reward wajib dipilih' }}
-                        render={({ field }) => (
-                          <CustomTextField
-                            {...field}
-                            select
-                            fullWidth
-                            size='small'
-                            error={!!errors.rules?.[index]?.reward_type}
-                            helperText={errors.rules?.[index]?.reward_type?.message}
-                          >
-                            <MenuItem value='POINTS'>
-                              <div className='flex items-center gap-2'>
-                                <i className='tabler-coins text-primary' />
-                                Points
-                              </div>
-                            </MenuItem>
-                            <MenuItem value='TOKENS'>
-                              <div className='flex items-center gap-2'>
-                                <i className='tabler-ticket text-success' />
-                                Tokens
-                              </div>
-                            </MenuItem>
-                            <MenuItem value='REWARD'>
-                              <div className='flex items-center gap-2'>
-                                <i className='tabler-percentage text-warning' />
-                                Reward
-                              </div>
-                            </MenuItem>
-                          </CustomTextField>
-                        )}
-                      />
-                    </div>
-
-                    {/* Reward Value */}
-                    <div>
-                      <Typography variant='body2' className='mb-2'>
-                        Nilai Reward <span className='text-red-500'>*</span>
-                      </Typography>
-                      <Controller
-                        name={`rules.${index}.reward_value`}
-                        control={control}
-                        rules={{
-                          required: 'Nilai reward wajib diisi',
-                          min: { value: 1, message: 'Nilai reward minimal 1' }
-                        }}
-                        render={({ field }) => {
-                          const rewardType = watch(`rules.${index}.reward_type`)
-                          return (
-                            <CustomTextField
-                              {...field}
-                              fullWidth
-                              size='small'
-                              type='number'
-                              placeholder={getRewardValuePlaceholder(rewardType)}
-                              error={!!errors.rules?.[index]?.reward_value}
-                              helperText={errors.rules?.[index]?.reward_value?.message}
-                              InputProps={{
-                                endAdornment:
-                                  rewardType === 'POINTS' ? (
-                                    <InputAdornment position='end'>Poin</InputAdornment>
-                                  ) : rewardType === 'TOKENS' ? (
-                                    <InputAdornment position='end'>Token</InputAdornment>
-                                  ) : undefined
-                              }}
-                              onChange={e => field.onChange(Number(e.target.value))}
-                            />
-                          )
-                        }}
-                      />
-                    </div>
-
-                    {/* Reward Subtype (jika reward type adalah REWARD) */}
-                    {watch(`rules.${index}.reward_type`) === 'REWARD' && (
-                      <div>
-                        <Typography variant='body2' className='mb-2'>
-                          Sub-tipe Reward
-                        </Typography>
-                        <Controller
-                          name={`rules.${index}.reward_subtype`}
-                          control={control}
-                          render={({ field }) => (
-                            <CustomTextField {...field} select fullWidth size='small'>
-                              <MenuItem value='DISCOUNT_PERCENT'>Diskon Persentase</MenuItem>
-                              <MenuItem value='DISCOUNT_AMOUNT'>Diskon Nominal</MenuItem>
-                              <MenuItem value='CASHBACK'>Cashback</MenuItem>
-                              <MenuItem value='FREE_SHIPPING'>Gratis Ongkir</MenuItem>
-                            </CustomTextField>
-                          )}
-                        />
-                      </div>
-                    )}
-                  </div>
-                </Box>
-              ))}
-            </div>
-
            {/* Tanggal Mulai */}
            <div>
              <Typography variant='body2' className='mb-2'>
@@ -723,6 +415,23 @@ const AddEditCampaignDrawer = (props: Props) => {
                  />
                </div>

+                {/* Banner Upload */}
+                <div>
+                  <Typography variant='body2' className='mb-2'>
+                    Banner Kampanye
+                  </Typography>
+                  <ImageUpload
+                    onUpload={handleBannerUpload}
+                    maxFileSize={1 * 1024 * 1024} // 1MB
+                    currentImageUrl={bannerUrl}
+                    dragDropText='Drop banner image here'
+                    browseButtonText='Choose Banner'
+                  />
+                  <Typography variant='caption' color='text.secondary' className='mt-1 block'>
+                    Format: JPG, PNG. Ukuran maksimal: 1MB
+                  </Typography>
+                </div>
+
                {/* Position */}
                <div>
                  <Typography variant='body2' className='mb-2'>
@@ -141,85 +141,6 @@ const getCampaignTypeColor = (type: string): ThemeColor => {
  }
 }

-const getCampaignTypeIcon = (type: string): string => {
-  switch (type) {
-    case 'POINTS':
-      return 'tabler-coins'
-    case 'TOKENS':
-      return 'tabler-ticket'
-    case 'REWARD':
-      return 'tabler-gift'
-    case 'MIXED':
-      return 'tabler-layers-intersect'
-    default:
-      return 'tabler-tag'
-  }
-}
-
-const getRewardTypeColor = (rewardType: string): ThemeColor => {
-  switch (rewardType) {
-    case 'POINTS':
-      return 'primary'
-    case 'TOKENS':
-      return 'success'
-    case 'REWARD':
-      return 'warning'
-    default:
-      return 'info'
-  }
-}
-
-const getRewardTypeIcon = (rewardType: string): string => {
-  switch (rewardType) {
-    case 'POINTS':
-      return 'tabler-coins'
-    case 'TOKENS':
-      return 'tabler-ticket'
-    case 'REWARD':
-      return 'tabler-percentage'
-    default:
-      return 'tabler-gift'
-  }
-}
-
-const formatRewardValue = (rewardType: string, rewardValue?: number, rewardSubtype?: string): string => {
-  if (!rewardValue) return '-'
-
-  switch (rewardType) {
-    case 'POINTS':
-      return `${formatPoints(rewardValue)} Poin`
-    case 'TOKENS':
-      return formatCurrency(rewardValue)
-    case 'REWARD':
-      if (rewardSubtype === 'DISCOUNT_PERCENT') {
-        return `${rewardValue}%`
-      }
-      return formatCurrency(rewardValue)
-    default:
-      return rewardValue.toString()
-  }
-}
-
-const getMinimumPurchase = (campaign: Campaign): number => {
-  // Check rules for spend condition
-  const spendRule = campaign.rules?.find(rule => rule.rule_type === 'SPEND')
-  if (spendRule?.condition_value) {
-    return parseInt(spendRule.condition_value)
-  }
-
-  // Fallback to metadata
-  return campaign.metadata?.minPurchase || 0
-}
-
-const getPrimaryReward = (campaign: Campaign): { type: string; value?: number; subtype?: string } => {
-  const primaryRule = campaign.rules?.[0]
-  return {
-    type: primaryRule?.reward_type || 'POINTS',
-    value: primaryRule?.reward_value,
-    subtype: primaryRule?.reward_subtype
-  }
-}
-
 // Column Definitions
 const columnHelper = createColumnHelper<CampaignWithAction>()

@@ -331,7 +252,7 @@ const CampaignListTable = () => {
        cell: ({ row }) => (
          <div className='flex items-center gap-4'>
            <div className='flex flex-col'>
-              <Link href={getLocalizedUrl(`/apps/campaigns/${row.original.id}/detail`, locale as Locale)}>
+              <Link href={getLocalizedUrl(`/apps/marketing/campaign/${row.original.id}/detail`, locale as Locale)}>
                <Typography className='font-medium cursor-pointer hover:underline text-primary'>
                  {row.original.name}
                </Typography>
@@ -356,38 +277,6 @@ const CampaignListTable = () => {
          />
        )
      }),
-      columnHelper.accessor('metadata', {
-        header: 'Minimum Pembelian',
-        cell: ({ row }) => {
-          const minPurchase = getMinimumPurchase(row.original)
-          return (
-            <div className='flex items-center gap-2'>
-              <Icon className='tabler-coin' sx={{ color: 'var(--mui-palette-primary-main)' }} />
-              <Typography color='text.primary'>{minPurchase > 0 ? formatCurrency(minPurchase) : '-'}</Typography>
-            </div>
-          )
-        }
-      }),
-      columnHelper.accessor('rules', {
-        header: 'Reward Utama',
-        cell: ({ row }) => {
-          const reward = getPrimaryReward(row.original)
-          return (
-            <div className='flex items-center gap-2'>
-              <Icon
-                className={getRewardTypeIcon(reward.type)}
-                sx={{ color: `var(--mui-palette-${getRewardTypeColor(reward.type)}-main)` }}
-              />
-              <Chip
-                label={formatRewardValue(reward.type, reward.value, reward.subtype)}
-                color={getRewardTypeColor(reward.type)}
-                variant='tonal'
-                size='small'
-              />
-            </div>
-          )
-        }
-      }),
      columnHelper.accessor('start_date', {
        header: 'Periode Kampanye',
        cell: ({ row }) => (
@@ -0,0 +1,417 @@
+// React Imports
+import { useState, useEffect } from 'react'
+
+// MUI Imports
+import Button from '@mui/material/Button'
+import Drawer from '@mui/material/Drawer'
+import IconButton from '@mui/material/IconButton'
+import MenuItem from '@mui/material/MenuItem'
+import Typography from '@mui/material/Typography'
+import Box from '@mui/material/Box'
+
+// Third-party Imports
+import { useForm, Controller } from 'react-hook-form'
+
+// Component Imports
+import CustomTextField from '@core/components/mui/TextField'
+
+// Types
+import { CampaignRule, RuleType, RewardType, CampaignRuleRequest } from '@/types/services/campaign'
+import { useCampaignRulesMutation } from '@/services/mutations/campaign'
+
+type Props = {
+  open: boolean
+  handleClose: () => void
+  campaignId: string // Required campaign ID
+  data?: CampaignRule | null // Data for edit mode
+}
+
+type FormValidateType = {
+  rule_type: RuleType
+  condition_value: string
+  reward_type: RewardType
+  reward_value: number
+  reward_subtype: string
+  reward_ref_id: string
+}
+
+// Initial form data
+const initialData: FormValidateType = {
+  rule_type: 'SPEND',
+  condition_value: '',
+  reward_type: 'POINTS',
+  reward_value: 0,
+  reward_subtype: '',
+  reward_ref_id: ''
+}
+
+const AddEditCampaignRuleDrawer = (props: Props) => {
+  // Props
+  const { open, handleClose, campaignId, data } = props
+
+  // States
+  const [isSubmitting, setIsSubmitting] = useState(false)
+
+  const { createCampaignRule, updateCampaignRule } = useCampaignRulesMutation()
+
+  // Determine if this is edit mode
+  const isEditMode = Boolean(data?.id)
+
+  // Hooks
+  const {
+    control,
+    reset: resetForm,
+    handleSubmit,
+    watch,
+    formState: { errors }
+  } = useForm<FormValidateType>({
+    defaultValues: initialData
+  })
+
+  const watchedRewardType = watch('reward_type')
+
+  // Effect to populate form when editing
+  useEffect(() => {
+    if (isEditMode && data) {
+      const formData: FormValidateType = {
+        rule_type: data.rule_type,
+        condition_value: data.condition_value || '',
+        reward_type: data.reward_type,
+        reward_value: data.reward_value || 0,
+        reward_subtype: data.reward_subtype || '',
+        reward_ref_id: data.reward_ref_id || ''
+      }
+
+      resetForm(formData)
+    } else {
+      // Reset to initial data for add mode
+      resetForm(initialData)
+    }
+  }, [data, isEditMode, resetForm])
+
+  const handleFormSubmit = async (formData: FormValidateType) => {
+    try {
+      setIsSubmitting(true)
+
+      // Create CampaignRuleRequest object
+      const ruleRequest: CampaignRuleRequest = {
+        campaign_id: campaignId,
+        rule_type: formData.rule_type,
+        condition_value: formData.condition_value.trim() || undefined,
+        reward_type: formData.reward_type,
+        reward_value: formData.reward_value > 0 ? formData.reward_value : undefined,
+        reward_subtype: formData.reward_subtype.trim() || undefined,
+        reward_ref_id: formData.reward_ref_id.trim() || undefined
+      }
+
+      if (isEditMode && data?.id) {
+        // Update existing campaign rule
+        updateCampaignRule.mutate(
+          { id: data.id, payload: ruleRequest },
+          {
+            onSuccess: () => {
+              handleReset()
+              handleClose()
+            },
+            onError: error => {
+              console.error('Error updating campaign rule:', error)
+            }
+          }
+        )
+      } else {
+        // Create new campaign rule
+        createCampaignRule.mutate(ruleRequest, {
+          onSuccess: () => {
+            handleReset()
+            handleClose()
+          },
+          onError: error => {
+            console.error('Error creating campaign rule:', error)
+          }
+        })
+      }
+    } catch (error) {
+      console.error('Error submitting campaign rule:', error)
+    } finally {
+      setIsSubmitting(false)
+    }
+  }
+
+  const handleReset = () => {
+    handleClose()
+    resetForm(initialData)
+  }
+
+  // Helper function to get rule type options
+  const getRuleTypeOptions = () => [
+    { value: 'TIER', label: 'Tier Based', icon: 'tabler-medal' },
+    { value: 'SPEND', label: 'Spending Amount', icon: 'tabler-wallet' },
+    { value: 'PRODUCT', label: 'Product Based', icon: 'tabler-package' },
+    { value: 'CATEGORY', label: 'Category Based', icon: 'tabler-category' },
+    { value: 'DAY', label: 'Day Based', icon: 'tabler-calendar' },
+    { value: 'LOCATION', label: 'Location Based', icon: 'tabler-map-pin' }
+  ]
+
+  // Helper function to get reward type options
+  const getRewardTypeOptions = () => [
+    { value: 'POINTS', label: 'Points', icon: 'tabler-coins' },
+    { value: 'TOKENS', label: 'Tokens', icon: 'tabler-ticket' },
+    { value: 'REWARD', label: 'Reward Item', icon: 'tabler-gift' }
+  ]
+
+  // Helper function to get condition placeholder based on rule type
+  const getConditionPlaceholder = (ruleType: RuleType) => {
+    switch (ruleType) {
+      case 'TIER':
+        return 'e.g., GOLD, SILVER, BRONZE'
+      case 'SPEND':
+        return 'e.g., 100000 (minimum spend amount)'
+      case 'PRODUCT':
+        return 'e.g., product_id_123'
+      case 'CATEGORY':
+        return 'e.g., electronics, fashion'
+      case 'DAY':
+        return 'e.g., monday, weekend'
+      case 'LOCATION':
+        return 'e.g., jakarta, bandung'
+      default:
+        return 'Enter condition value'
+    }
+  }
+
+  // Helper function to get reward subtype options based on reward type
+  const getRewardSubtypeOptions = (rewardType: RewardType) => {
+    switch (rewardType) {
+      case 'POINTS':
+        return ['bonus', 'cashback', 'referral']
+      case 'TOKENS':
+        return ['game', 'lottery', 'voucher']
+      case 'REWARD':
+        return ['product', 'discount', 'currency', 'experience']
+      default:
+        return []
+    }
+  }
+
+  return (
+    <Drawer
+      open={open}
+      anchor='right'
+      variant='temporary'
+      onClose={handleReset}
+      ModalProps={{ keepMounted: true }}
+      sx={{
+        '& .MuiDrawer-paper': {
+          width: { xs: 300, sm: 400 },
+          display: 'flex',
+          flexDirection: 'column',
+          height: '100%'
+        }
+      }}
+    >
+      {/* Sticky Header */}
+      <Box
+        sx={{
+          position: 'sticky',
+          top: 0,
+          zIndex: 10,
+          backgroundColor: 'background.paper',
+          borderBottom: 1,
+          borderColor: 'divider'
+        }}
+      >
+        <div className='flex items-center justify-between plb-5 pli-6'>
+          <Typography variant='h5'>{isEditMode ? 'Edit Campaign Rule' : 'Add New Campaign Rule'}</Typography>
+          <IconButton size='small' onClick={handleReset}>
+            <i className='tabler-x text-2xl text-textPrimary' />
+          </IconButton>
+        </div>
+      </Box>
+
+      {/* Scrollable Content */}
+      <Box sx={{ flex: 1, overflowY: 'auto' }}>
+        <form id='campaign-rule-form' onSubmit={handleSubmit(handleFormSubmit)}>
+          <div className='flex flex-col gap-6 p-6'>
+            {/* Rule Type */}
+            <div>
+              <Typography variant='body2' className='mb-2'>
+                Rule Type <span className='text-red-500'>*</span>
+              </Typography>
+              <Controller
+                name='rule_type'
+                control={control}
+                rules={{ required: 'Rule type is required' }}
+                render={({ field }) => (
+                  <CustomTextField
+                    {...field}
+                    select
+                    fullWidth
+                    error={!!errors.rule_type}
+                    helperText={errors.rule_type?.message}
+                  >
+                    {getRuleTypeOptions().map(option => (
+                      <MenuItem key={option.value} value={option.value}>
+                        <div className='flex items-center gap-2'>
+                          <i className={`${option.icon} text-primary`} />
+                          {option.label}
+                        </div>
+                      </MenuItem>
+                    ))}
+                  </CustomTextField>
+                )}
+              />
+            </div>
+
+            {/* Condition Value */}
+            <div>
+              <Typography variant='body2' className='mb-2'>
+                Condition Value
+              </Typography>
+              <Controller
+                name='condition_value'
+                control={control}
+                render={({ field }) => (
+                  <CustomTextField
+                    {...field}
+                    fullWidth
+                    placeholder={getConditionPlaceholder(watch('rule_type'))}
+                    error={!!errors.condition_value}
+                    helperText={errors.condition_value?.message}
+                  />
+                )}
+              />
+            </div>
+
+            {/* Reward Type */}
+            <div>
+              <Typography variant='body2' className='mb-2'>
+                Reward Type <span className='text-red-500'>*</span>
+              </Typography>
+              <Controller
+                name='reward_type'
+                control={control}
+                rules={{ required: 'Reward type is required' }}
+                render={({ field }) => (
+                  <CustomTextField
+                    {...field}
+                    select
+                    fullWidth
+                    error={!!errors.reward_type}
+                    helperText={errors.reward_type?.message}
+                  >
+                    {getRewardTypeOptions().map(option => (
+                      <MenuItem key={option.value} value={option.value}>
+                        <div className='flex items-center gap-2'>
+                          <i className={`${option.icon} text-primary`} />
+                          {option.label}
+                        </div>
+                      </MenuItem>
+                    ))}
+                  </CustomTextField>
+                )}
+              />
+            </div>
+
+            {/* Reward Value */}
+            <div>
+              <Typography variant='body2' className='mb-2'>
+                Reward Value
+              </Typography>
+              <Controller
+                name='reward_value'
+                control={control}
+                rules={{
+                  min: { value: 1, message: 'Reward value must be at least 1' }
+                }}
+                render={({ field }) => (
+                  <CustomTextField
+                    {...field}
+                    fullWidth
+                    type='number'
+                    placeholder={`Enter ${watchedRewardType.toLowerCase()} amount`}
+                    error={!!errors.reward_value}
+                    helperText={errors.reward_value?.message}
+                    onChange={e => field.onChange(Number(e.target.value))}
+                  />
+                )}
+              />
+            </div>
+
+            {/* Reward Subtype */}
+            <div>
+              <Typography variant='body2' className='mb-2'>
+                Reward Subtype
+              </Typography>
+              <Controller
+                name='reward_subtype'
+                control={control}
+                render={({ field }) => (
+                  <CustomTextField
+                    {...field}
+                    select
+                    fullWidth
+                    error={!!errors.reward_subtype}
+                    helperText={errors.reward_subtype?.message}
+                  >
+                    <MenuItem value=''>
+                      <em>None</em>
+                    </MenuItem>
+                    {getRewardSubtypeOptions(watchedRewardType).map(subtype => (
+                      <MenuItem key={subtype} value={subtype}>
+                        {subtype.charAt(0).toUpperCase() + subtype.slice(1)}
+                      </MenuItem>
+                    ))}
+                  </CustomTextField>
+                )}
+              />
+            </div>
+
+            {/* Reward Reference ID */}
+            <div>
+              <Typography variant='body2' className='mb-2'>
+                Reward Reference ID
+              </Typography>
+              <Controller
+                name='reward_ref_id'
+                control={control}
+                render={({ field }) => (
+                  <CustomTextField
+                    {...field}
+                    fullWidth
+                    placeholder='e.g., product_id, voucher_id (optional)'
+                    error={!!errors.reward_ref_id}
+                    helperText={errors.reward_ref_id?.message || 'Optional reference to specific reward item'}
+                  />
+                )}
+              />
+            </div>
+          </div>
+        </form>
+      </Box>
+
+      {/* Sticky Footer */}
+      <Box
+        sx={{
+          position: 'sticky',
+          bottom: 0,
+          zIndex: 10,
+          backgroundColor: 'background.paper',
+          borderTop: 1,
+          borderColor: 'divider',
+          p: 3
+        }}
+      >
+        <div className='flex items-center gap-4'>
+          <Button variant='contained' type='submit' form='campaign-rule-form' disabled={isSubmitting}>
+            {isSubmitting ? (isEditMode ? 'Updating...' : 'Creating...') : isEditMode ? 'Update Rule' : 'Create Rule'}
+          </Button>
+          <Button variant='outlined' color='error' onClick={handleReset} disabled={isSubmitting}>
+            Cancel
+          </Button>
+        </div>
+      </Box>
+    </Drawer>
+  )
+}
+
+export default AddEditCampaignRuleDrawer
@@ -0,0 +1,401 @@
+'use client'
+
+import Loading from '@/components/layout/shared/Loading'
+import { useCampaignById, useCampaignRulesByCampaignId } from '@/services/queries/campaign'
+import { CampaignRule, RewardType, RuleType } from '@/types/services/campaign'
+import { formatCurrency } from '@/utils/transform'
+import {
+  Avatar,
+  Card,
+  CardHeader,
+  CardContent,
+  Chip,
+  Typography,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+  Paper,
+  Box,
+  Divider,
+  Button,
+  IconButton,
+  Tooltip,
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  DialogActions,
+  DialogContentText
+} from '@mui/material'
+// Using Tabler icons instead of Material-UI icons
+import { useParams } from 'next/navigation'
+import { useState } from 'react'
+
+const CampaignDetailContent = () => {
+  const params = useParams()
+
+  // State for dialogs
+  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false)
+  const [selectedRuleId, setSelectedRuleId] = useState<string | null>(null)
+  const [selectedRule, setSelectedRule] = useState<CampaignRule | null>(null)
+
+  const { data: campaign, isLoading, error } = useCampaignById(params?.id as string)
+  const { data: rules, isLoading: rulesLoading, error: rulesError } = useCampaignRulesByCampaignId(params?.id as string)
+
+  if (isLoading) return <Loading />
+
+  // Action handlers
+  const handleAddRule = () => {
+    // TODO: Implement add rule functionality
+    // Could open a modal/form or navigate to add rule page
+    console.log('Add new rule for campaign:', params?.id)
+  }
+
+  const handleEditRule = (rule: CampaignRule) => {
+    // TODO: Implement edit rule functionality
+    // Could open a modal/form or navigate to edit rule page
+    console.log('Edit rule:', rule.id)
+    setSelectedRule(rule)
+    // You might want to open an edit modal here
+  }
+
+  const handleDeleteRule = (rule: CampaignRule) => {
+    setSelectedRule(rule)
+    setSelectedRuleId(rule.id)
+    setDeleteDialogOpen(true)
+  }
+
+  const confirmDeleteRule = async () => {
+    if (selectedRuleId) {
+      try {
+        // TODO: Implement actual delete API call
+        console.log('Deleting rule:', selectedRuleId)
+        // await deleteRuleMutation.mutateAsync(selectedRuleId)
+
+        // Close dialog and reset state
+        setDeleteDialogOpen(false)
+        setSelectedRuleId(null)
+        setSelectedRule(null)
+
+        // Show success message or refresh data
+      } catch (error) {
+        console.error('Failed to delete rule:', error)
+        // Handle error (show toast, etc.)
+      }
+    }
+  }
+
+  const cancelDelete = () => {
+    setDeleteDialogOpen(false)
+    setSelectedRuleId(null)
+    setSelectedRule(null)
+  }
+
+  // Helper function to format rule type display
+  const formatRuleType = (ruleType: RuleType) => {
+    const ruleTypeLabels: Record<RuleType, string> = {
+      TIER: 'Tier Based',
+      SPEND: 'Spending Amount',
+      PRODUCT: 'Product Based',
+      CATEGORY: 'Category Based',
+      DAY: 'Day Based',
+      LOCATION: 'Location Based'
+    }
+    return ruleTypeLabels[ruleType] || ruleType
+  }
+
+  // Helper function to get rule type color
+  const getRuleTypeColor = (ruleType: RuleType): 'primary' | 'secondary' | 'success' | 'warning' | 'info' => {
+    const colorMap: Record<RuleType, 'primary' | 'secondary' | 'success' | 'warning' | 'info'> = {
+      TIER: 'primary',
+      SPEND: 'success',
+      PRODUCT: 'info',
+      CATEGORY: 'warning',
+      DAY: 'secondary',
+      LOCATION: 'primary'
+    }
+    return colorMap[ruleType] || 'primary'
+  }
+
+  // Helper function to format reward type display
+  const formatRewardType = (rewardType: RewardType) => {
+    const rewardTypeLabels: Record<RewardType, string> = {
+      POINTS: 'Points',
+      TOKENS: 'Tokens',
+      REWARD: 'Reward Item'
+    }
+    return rewardTypeLabels[rewardType] || rewardType
+  }
+
+  // Helper function to get reward type color
+  const getRewardTypeColor = (rewardType: RewardType): 'primary' | 'secondary' | 'success' => {
+    const colorMap: Record<RewardType, 'primary' | 'secondary' | 'success'> = {
+      POINTS: 'success',
+      TOKENS: 'primary',
+      REWARD: 'secondary'
+    }
+    return colorMap[rewardType] || 'primary'
+  }
+
+  // Helper function to format reward value
+  const formatRewardValue = (rewardValue?: number, rewardType?: RewardType, rewardSubtype?: string) => {
+    if (!rewardValue) return '-'
+
+    // Format based on reward type
+    switch (rewardType) {
+      case 'POINTS':
+        return `${rewardValue.toLocaleString()} pts`
+      case 'TOKENS':
+        return `${rewardValue.toLocaleString()} tokens`
+      case 'REWARD':
+        // For reward items, check if it's currency-based
+        if (rewardSubtype === 'currency') {
+          return formatCurrency(rewardValue)
+        }
+        return rewardValue.toString()
+      default:
+        return rewardValue.toString()
+    }
+  }
+
+  // Helper function to format date
+  const formatDate = (dateString: string) => {
+    return new Date(dateString).toLocaleDateString('en-US', {
+      year: 'numeric',
+      month: 'short',
+      day: 'numeric',
+      hour: '2-digit',
+      minute: '2-digit'
+    })
+  }
+
+  return (
+    <>
+      <div className='space-y-6'>
+        {/* Header Card */}
+        <Card>
+          <CardHeader
+            avatar={<Avatar src={campaign?.metadata?.banner_url || ''} alt={campaign?.name} className='w-16 h-16' />}
+            title={
+              <div className='flex items-center gap-3'>
+                <Typography variant='h4' component='h1' className='font-bold'>
+                  {campaign?.name} ({campaign?.type})
+                </Typography>
+
+                <Chip
+                  label={campaign?.is_active ? 'Active' : 'Inactive'}
+                  color={campaign?.is_active ? 'success' : 'error'}
+                  size='small'
+                />
+                <Chip
+                  label={campaign?.show_on_app ? 'Show on App' : 'Hide on App'}
+                  color={campaign?.show_on_app ? 'info' : 'error'}
+                  size='small'
+                />
+              </div>
+            }
+            subheader={
+              <div className='flex flex-col gap-1 mt-2'>
+                <Typography variant='body2' color='textSecondary'>
+                  {campaign?.start_date} - {campaign?.end_date}
+                </Typography>
+                <Typography variant='body2' color='textSecondary'>
+                  {campaign?.description}
+                </Typography>
+              </div>
+            }
+          />
+        </Card>
+
+        {/* Campaign Rules Table */}
+        <Card>
+          <CardHeader
+            title={
+              <div className='flex items-center justify-between'>
+                <div>
+                  <Typography variant='h5' component='h2' className='font-semibold'>
+                    Campaign Rules
+                  </Typography>
+                  {rules && rules.length > 0 && (
+                    <Chip
+                      label={`${rules.length} rule${rules.length !== 1 ? 's' : ''}`}
+                      size='small'
+                      variant='outlined'
+                      className='mt-1'
+                    />
+                  )}
+                </div>
+                <Button
+                  variant='contained'
+                  startIcon={<i className='tabler-plus' />}
+                  onClick={handleAddRule}
+                  size='small'
+                >
+                  Add Rule
+                </Button>
+              </div>
+            }
+            subheader={
+              <Typography variant='body2' color='textSecondary'>
+                Rules and rewards configuration for this campaign
+              </Typography>
+            }
+          />
+          <Divider />
+          <CardContent className='p-0'>
+            {rulesLoading ? (
+              <Box className='p-8 text-center'>
+                <Loading />
+              </Box>
+            ) : rulesError ? (
+              <Box className='p-8 text-center'>
+                <Typography variant='body1' color='error'>
+                  Failed to load campaign rules
+                </Typography>
+                <Typography variant='body2' color='textSecondary' className='mt-1'>
+                  {rulesError.message || 'Please try refreshing the page'}
+                </Typography>
+              </Box>
+            ) : rules && rules.length > 0 ? (
+              <TableContainer component={Paper} elevation={0}>
+                <Table>
+                  <TableHead>
+                    <TableRow>
+                      <TableCell>Rule Type</TableCell>
+                      <TableCell>Condition</TableCell>
+                      <TableCell>Reward Type</TableCell>
+                      <TableCell>Reward Value</TableCell>
+                      <TableCell>Subtype</TableCell>
+                      <TableCell>Created</TableCell>
+                      <TableCell>Updated</TableCell>
+                      <TableCell align='center' width={120}>
+                        Actions
+                      </TableCell>
+                    </TableRow>
+                  </TableHead>
+                  <TableBody>
+                    {rules.map((rule: CampaignRule) => (
+                      <TableRow key={rule.id} hover>
+                        <TableCell>
+                          <Chip
+                            label={formatRuleType(rule.rule_type)}
+                            variant='outlined'
+                            size='small'
+                            color={getRuleTypeColor(rule.rule_type)}
+                          />
+                        </TableCell>
+                        <TableCell>
+                          <Typography variant='body2'>{rule.condition_value || '-'}</Typography>
+                        </TableCell>
+                        <TableCell>
+                          <Chip
+                            label={formatRewardType(rule.reward_type)}
+                            variant='outlined'
+                            size='small'
+                            color={getRewardTypeColor(rule.reward_type)}
+                          />
+                        </TableCell>
+                        <TableCell>
+                          <Typography variant='body2' className='font-medium'>
+                            {formatRewardValue(rule.reward_value, rule.reward_type, rule.reward_subtype)}
+                          </Typography>
+                        </TableCell>
+                        <TableCell>
+                          {rule.reward_subtype && (
+                            <Chip label={rule.reward_subtype} variant='outlined' size='small' color='default' />
+                          )}
+                        </TableCell>
+                        <TableCell>
+                          <Typography variant='caption' color='textSecondary'>
+                            {formatDate(rule.created_at)}
+                          </Typography>
+                        </TableCell>
+                        <TableCell>
+                          <Typography variant='caption' color='textSecondary'>
+                            {formatDate(rule.updated_at)}
+                          </Typography>
+                        </TableCell>
+                        <TableCell align='center'>
+                          <Box className='flex items-center gap-1'>
+                            <Tooltip title='Edit rule'>
+                              <IconButton size='small' onClick={() => handleEditRule(rule)} color='primary'>
+                                <i className='tabler-edit' />
+                              </IconButton>
+                            </Tooltip>
+                            <Tooltip title='Delete rule'>
+                              <IconButton size='small' onClick={() => handleDeleteRule(rule)} color='error'>
+                                <i className='tabler-trash' />
+                              </IconButton>
+                            </Tooltip>
+                          </Box>
+                        </TableCell>
+                      </TableRow>
+                    ))}
+                  </TableBody>
+                </Table>
+              </TableContainer>
+            ) : (
+              <Box className='p-8 text-center'>
+                <Typography variant='body1' color='textSecondary'>
+                  No rules configured for this campaign
+                </Typography>
+                <Typography variant='body2' color='textSecondary' className='mt-1'>
+                  Add rules to define how rewards are distributed
+                </Typography>
+                <Button
+                  variant='outlined'
+                  startIcon={<i className='tabler-plus' />}
+                  onClick={handleAddRule}
+                  className='mt-4'
+                >
+                  Add First Rule
+                </Button>
+              </Box>
+            )}
+          </CardContent>
+        </Card>
+      </div>
+
+      {/* Delete Confirmation Dialog */}
+      <Dialog
+        open={deleteDialogOpen}
+        onClose={cancelDelete}
+        aria-labelledby='delete-rule-dialog-title'
+        aria-describedby='delete-rule-dialog-description'
+      >
+        <DialogTitle id='delete-rule-dialog-title'>Confirm Delete Rule</DialogTitle>
+        <DialogContent>
+          <DialogContentText id='delete-rule-dialog-description'>
+            Are you sure you want to delete this rule? This action cannot be undone.
+            {selectedRule && (
+              <Box className='mt-3 p-3 bg-gray-50 rounded'>
+                <Typography variant='body2' className='font-medium'>
+                  Rule Details:
+                </Typography>
+                <Typography variant='caption' display='block'>
+                  Type: {formatRuleType(selectedRule.rule_type)}
+                </Typography>
+                <Typography variant='caption' display='block'>
+                  Reward:{' '}
+                  {formatRewardValue(selectedRule.reward_value, selectedRule.reward_type, selectedRule.reward_subtype)}
+                </Typography>
+              </Box>
+            )}
+          </DialogContentText>
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={cancelDelete} color='primary'>
+            Cancel
+          </Button>
+          <Button onClick={confirmDeleteRule} color='error' variant='contained'>
+            Delete
+          </Button>
+        </DialogActions>
+      </Dialog>
+    </>
+  )
+}
+
+export default CampaignDetailContent
@@ -1,6 +1,6 @@
 'use client'

-import React from 'react'
+import React, { useState } from 'react'
 import {
  Card,
  CardHeader,
@@ -14,10 +14,19 @@ import {
  TableRow,
  Box,
  Button,
-  IconButton
+  IconButton,
+  Menu,
+  MenuItem,
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  DialogContentText,
+  DialogActions,
+  CircularProgress
 } from '@mui/material'
 import Grid from '@mui/material/Grid2'
-import { PurchaseOrder } from '@/types/services/purchaseOrder'
+import { PurchaseOrder, SendPaymentPurchaseOrderRequest } from '@/types/services/purchaseOrder'
+import { usePurchaseOrdersMutation } from '@/services/mutations/purchaseOrder'

 interface Props {
  data?: PurchaseOrder
@@ -26,6 +35,88 @@ interface Props {
 const PurchaseDetailInformation = ({ data }: Props) => {
  const purchaseOrder = data

+  // State for menu and dialog
+  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null)
+  const [isSubmitting, setIsSubmitting] = useState(false)
+  const [confirmDialog, setConfirmDialog] = useState<{
+    open: boolean
+    type: 'approve' | 'reject' | null
+    title: string
+    message: string
+  }>({
+    open: false,
+    type: null,
+    title: '',
+    message: ''
+  })
+
+  const { updateStatus } = usePurchaseOrdersMutation()
+
+  const handleMenuClick = (event: React.MouseEvent<HTMLElement>) => {
+    setAnchorEl(event.currentTarget)
+  }
+
+  const handleMenuClose = () => {
+    setAnchorEl(null)
+  }
+
+  const handleApproveClick = () => {
+    setConfirmDialog({
+      open: true,
+      type: 'approve',
+      title: 'Konfirmasi Persetujuan',
+      message: 'Apakah Anda yakin ingin menyetujui purchase order ini?'
+    })
+    handleMenuClose()
+  }
+
+  const handleRejectClick = () => {
+    setConfirmDialog({
+      open: true,
+      type: 'reject',
+      title: 'Konfirmasi Penolakan',
+      message: 'Apakah Anda yakin ingin menolak purchase order ini?'
+    })
+    handleMenuClose()
+  }
+
+  const handleConfirmAction = async () => {
+    if (!purchaseOrder?.id) return
+
+    setIsSubmitting(true)
+
+    try {
+      const status = confirmDialog.type === 'approve' ? 'approved' : 'rejected'
+
+      updateStatus.mutate({
+        id: purchaseOrder.id,
+        payload: status
+      })
+
+      // Close dialog after successful submission
+      setConfirmDialog({
+        open: false,
+        type: null,
+        title: '',
+        message: ''
+      })
+    } catch (error) {
+      console.error('Error updating status:', error)
+      // Handle error (you might want to show a toast or error message)
+    } finally {
+      setIsSubmitting(false)
+    }
+  }
+
+  const handleCancelAction = () => {
+    setConfirmDialog({
+      open: false,
+      type: null,
+      title: '',
+      message: ''
+    })
+  }
+
  // Helper functions
  const formatDate = (dateString: string): string => {
    const date = new Date(dateString)
@@ -46,7 +137,8 @@ const PurchaseDetailInformation = ({ data }: Props) => {
      sent: 'Dikirim',
      approved: 'Disetujui',
      received: 'Diterima',
-      cancelled: 'Dibatalkan'
+      cancelled: 'Dibatalkan',
+      rejected: 'Ditolak'
    }
    return statusMap[status] || status
  }
@@ -57,7 +149,8 @@ const PurchaseDetailInformation = ({ data }: Props) => {
      sent: 'warning',
      approved: 'success',
      received: 'info',
-      cancelled: 'error'
+      cancelled: 'error',
+      rejected: 'error'
    }
    return colorMap[status] || 'info'
  }
@@ -66,144 +159,214 @@ const PurchaseDetailInformation = ({ data }: Props) => {
  const totalQuantity = (purchaseOrder?.items ?? []).reduce((sum, item) => sum + (item?.quantity ?? 0), 0)
  const total = (purchaseOrder?.items ?? []).reduce((sum, item) => sum + (item?.amount ?? 0) * item?.quantity, 0)

+  // Check if actions should be available (only for certain statuses)
+  const canApproveOrReject = purchaseOrder?.status === 'received'
+
  return (
-    <Card sx={{ width: '100%' }}>
-      <CardHeader
-        title={
-          <Box display='flex' justifyContent='space-between' alignItems='center'>
-            <Typography variant='h5' color={getStatusColor(purchaseOrder?.status ?? '')} sx={{ fontWeight: 'bold' }}>
-              {getStatusLabel(purchaseOrder?.status ?? '')}
-            </Typography>
-            <Box>
-              <Button startIcon={<i className='tabler-share' />} variant='outlined' size='small' sx={{ mr: 1 }}>
-                Bagikan
-              </Button>
-              <Button startIcon={<i className='tabler-printer' />} variant='outlined' size='small' sx={{ mr: 1 }}>
-                Print
-              </Button>
-              <IconButton>
-                <i className='tabler-dots-vertical' />
-              </IconButton>
-            </Box>
-          </Box>
-        }
-      />
-
-      <CardContent>
-        {/* Purchase Information */}
-        <Grid container spacing={3} sx={{ mb: 4 }}>
-          <Grid size={{ xs: 12, md: 6 }}>
-            <Box sx={{ mb: 2 }}>
-              <Typography variant='subtitle2' color='text.secondary'>
-                Vendor
-              </Typography>
-              <Typography variant='body1' color='primary' sx={{ fontWeight: 'medium', cursor: 'pointer' }}>
-                {purchaseOrder?.vendor?.name ?? ''}
+    <>
+      <Card sx={{ width: '100%' }}>
+        <CardHeader
+          title={
+            <Box display='flex' justifyContent='space-between' alignItems='center'>
+              <Typography variant='h5' color={getStatusColor(purchaseOrder?.status ?? '')} sx={{ fontWeight: 'bold' }}>
+                {getStatusLabel(purchaseOrder?.status ?? '')}
              </Typography>
+              <Box>
+                <Button startIcon={<i className='tabler-share' />} variant='outlined' size='small' sx={{ mr: 1 }}>
+                  Bagikan
+                </Button>
+                <Button startIcon={<i className='tabler-printer' />} variant='outlined' size='small' sx={{ mr: 1 }}>
+                  Print
+                </Button>
+                <IconButton onClick={handleMenuClick}>
+                  <i className='tabler-dots-vertical' />
+                </IconButton>
+              </Box>
            </Box>
+          }
+        />

-            <Box>
-              <Typography variant='subtitle2' color='text.secondary'>
-                Tgl. Transaksi
-              </Typography>
-              <Typography variant='body1'>{formatDate(purchaseOrder?.transaction_date ?? '')}</Typography>
-            </Box>
-          </Grid>
-
-          <Grid size={{ xs: 12, md: 6 }}>
-            <Box sx={{ mb: 2 }}>
-              <Typography variant='subtitle2' color='text.secondary'>
-                Nomor
-              </Typography>
-              <Typography variant='body1'>{purchaseOrder?.po_number}</Typography>
-            </Box>
-
-            <Box>
-              <Typography variant='subtitle2' color='text.secondary'>
-                Tgl. Jatuh Tempo
-              </Typography>
-              <Typography variant='body1'>{formatDate(purchaseOrder?.due_date ?? '')}</Typography>
-            </Box>
-          </Grid>
-        </Grid>
-
-        {/* Products Table */}
-        <TableContainer>
-          <Table>
-            <TableHead>
-              <TableRow>
-                <TableCell>Produk</TableCell>
-                <TableCell>Deskripsi</TableCell>
-                <TableCell align='center'>Kuantitas</TableCell>
-                <TableCell align='center'>Satuan</TableCell>
-                <TableCell align='right'>Harga</TableCell>
-                <TableCell align='right'>Jumlah</TableCell>
-              </TableRow>
-            </TableHead>
-            <TableBody>
-              {(purchaseOrder?.items ?? []).map((item, index) => {
-                return (
-                  <TableRow key={item.id}>
-                    <TableCell>
-                      <Typography variant='body2' color='primary' sx={{ cursor: 'pointer' }}>
-                        {item.ingredient.name}
-                      </Typography>
-                    </TableCell>
-                    <TableCell>{item.description}</TableCell>
-                    <TableCell align='center'>{item.quantity}</TableCell>
-                    <TableCell align='center'>{item.unit.name}</TableCell>
-                    <TableCell align='right'>{formatCurrency(item.amount)}</TableCell>
-                    <TableCell align='right'>{formatCurrency(item.amount * item.quantity)}</TableCell>
-                  </TableRow>
-                )
-              })}
-
-              {/* Total Quantity Row */}
-              <TableRow>
-                <TableCell colSpan={2} sx={{ fontWeight: 'bold', borderTop: '2px solid #e0e0e0' }}>
-                  Total Kuantitas
-                </TableCell>
-                <TableCell align='center' sx={{ fontWeight: 'bold', borderTop: '2px solid #e0e0e0' }}>
-                  {totalQuantity}
-                </TableCell>
-                <TableCell sx={{ borderTop: '2px solid #e0e0e0' }}></TableCell>
-                <TableCell sx={{ borderTop: '2px solid #e0e0e0' }}></TableCell>
-              </TableRow>
-            </TableBody>
-          </Table>
-        </TableContainer>
-
-        {/* Summary Section */}
-        <Box sx={{ mt: 3 }}>
-          <Grid container spacing={2}>
-            <Grid size={{ xs: 12, md: 6 }}>{/* Empty space for left side */}</Grid>
+        <CardContent>
+          {/* Purchase Information */}
+          <Grid container spacing={3} sx={{ mb: 4 }}>
            <Grid size={{ xs: 12, md: 6 }}>
-              <Box sx={{ display: 'flex', flexDirection: 'column' }}>
-                <Box
-                  sx={{
-                    display: 'flex',
-                    justifyContent: 'space-between',
-                    alignItems: 'center',
-                    py: 2,
-                    '&:hover': {
-                      backgroundColor: 'rgba(0, 0, 0, 0.04)',
-                      transition: 'background-color 0.15s ease'
-                    }
-                  }}
-                >
-                  <Typography variant='h6' sx={{ fontWeight: 'bold' }}>
-                    Total
-                  </Typography>
-                  <Typography variant='h6' sx={{ fontWeight: 'bold' }}>
-                    {formatCurrency(total)}
-                  </Typography>
-                </Box>
+              <Box sx={{ mb: 2 }}>
+                <Typography variant='subtitle2' color='text.secondary'>
+                  Vendor
+                </Typography>
+                <Typography variant='body1' color='primary' sx={{ fontWeight: 'medium', cursor: 'pointer' }}>
+                  {purchaseOrder?.vendor?.name ?? ''}
+                </Typography>
+              </Box>
+
+              <Box>
+                <Typography variant='subtitle2' color='text.secondary'>
+                  Tgl. Transaksi
+                </Typography>
+                <Typography variant='body1'>{formatDate(purchaseOrder?.transaction_date ?? '')}</Typography>
+              </Box>
+            </Grid>
+
+            <Grid size={{ xs: 12, md: 6 }}>
+              <Box sx={{ mb: 2 }}>
+                <Typography variant='subtitle2' color='text.secondary'>
+                  Nomor
+                </Typography>
+                <Typography variant='body1'>{purchaseOrder?.po_number}</Typography>
+              </Box>
+
+              <Box>
+                <Typography variant='subtitle2' color='text.secondary'>
+                  Tgl. Jatuh Tempo
+                </Typography>
+                <Typography variant='body1'>{formatDate(purchaseOrder?.due_date ?? '')}</Typography>
              </Box>
            </Grid>
          </Grid>
-        </Box>
-      </CardContent>
-    </Card>
+
+          {/* Products Table */}
+          <TableContainer>
+            <Table>
+              <TableHead>
+                <TableRow>
+                  <TableCell>Produk</TableCell>
+                  <TableCell>Deskripsi</TableCell>
+                  <TableCell align='center'>Kuantitas</TableCell>
+                  <TableCell align='center'>Satuan</TableCell>
+                  <TableCell align='right'>Harga</TableCell>
+                  <TableCell align='right'>Jumlah</TableCell>
+                </TableRow>
+              </TableHead>
+              <TableBody>
+                {(purchaseOrder?.items ?? []).map((item, index) => {
+                  return (
+                    <TableRow key={item.id}>
+                      <TableCell>
+                        <Typography variant='body2' color='primary' sx={{ cursor: 'pointer' }}>
+                          {item.ingredient.name}
+                        </Typography>
+                      </TableCell>
+                      <TableCell>{item.description}</TableCell>
+                      <TableCell align='center'>{item.quantity}</TableCell>
+                      <TableCell align='center'>{item.unit.name}</TableCell>
+                      <TableCell align='right'>{formatCurrency(item.amount)}</TableCell>
+                      <TableCell align='right'>{formatCurrency(item.amount * item.quantity)}</TableCell>
+                    </TableRow>
+                  )
+                })}
+
+                {/* Total Quantity Row */}
+                <TableRow>
+                  <TableCell colSpan={2} sx={{ fontWeight: 'bold', borderTop: '2px solid #e0e0e0' }}>
+                    Total Kuantitas
+                  </TableCell>
+                  <TableCell align='center' sx={{ fontWeight: 'bold', borderTop: '2px solid #e0e0e0' }}>
+                    {totalQuantity}
+                  </TableCell>
+                  <TableCell sx={{ borderTop: '2px solid #e0e0e0' }}></TableCell>
+                  <TableCell sx={{ borderTop: '2px solid #e0e0e0' }}></TableCell>
+                  <TableCell sx={{ borderTop: '2px solid #e0e0e0' }}></TableCell>
+                </TableRow>
+              </TableBody>
+            </Table>
+          </TableContainer>
+
+          {/* Summary Section */}
+          <Box sx={{ mt: 3 }}>
+            <Grid container spacing={2}>
+              <Grid size={{ xs: 12, md: 6 }}>{/* Empty space for left side */}</Grid>
+              <Grid size={{ xs: 12, md: 6 }}>
+                <Box sx={{ display: 'flex', flexDirection: 'column' }}>
+                  <Box
+                    sx={{
+                      display: 'flex',
+                      justifyContent: 'space-between',
+                      alignItems: 'center',
+                      py: 2,
+                      '&:hover': {
+                        backgroundColor: 'rgba(0, 0, 0, 0.04)',
+                        transition: 'background-color 0.15s ease'
+                      }
+                    }}
+                  >
+                    <Typography variant='h6' sx={{ fontWeight: 'bold' }}>
+                      Total
+                    </Typography>
+                    <Typography variant='h6' sx={{ fontWeight: 'bold' }}>
+                      {formatCurrency(total)}
+                    </Typography>
+                  </Box>
+                </Box>
+              </Grid>
+            </Grid>
+          </Box>
+        </CardContent>
+      </Card>
+
+      {/* Menu */}
+      <Menu
+        anchorEl={anchorEl}
+        open={Boolean(anchorEl)}
+        onClose={handleMenuClose}
+        PaperProps={{
+          sx: {
+            minWidth: 160
+          }
+        }}
+      >
+        <MenuItem
+          onClick={handleApproveClick}
+          disabled={!canApproveOrReject}
+          sx={{
+            color: 'success.main',
+            '&:hover': {
+              backgroundColor: 'success.light',
+              color: 'success.dark'
+            }
+          }}
+        >
+          <i className='tabler-check' style={{ marginRight: 8 }} />
+          Disetujui
+        </MenuItem>
+        <MenuItem
+          onClick={handleRejectClick}
+          disabled={!canApproveOrReject}
+          sx={{
+            color: 'error.main',
+            '&:hover': {
+              backgroundColor: 'error.light',
+              color: 'error.dark'
+            }
+          }}
+        >
+          <i className='tabler-x' style={{ marginRight: 8 }} />
+          Ditolak
+        </MenuItem>
+      </Menu>
+
+      {/* Confirmation Dialog */}
+      <Dialog open={confirmDialog.open} onClose={handleCancelAction} maxWidth='sm' fullWidth>
+        <DialogTitle>{confirmDialog.title}</DialogTitle>
+        <DialogContent>
+          <DialogContentText>{confirmDialog.message}</DialogContentText>
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={handleCancelAction} color='inherit' disabled={isSubmitting}>
+            Batal
+          </Button>
+          <Button
+            onClick={handleConfirmAction}
+            variant='contained'
+            color={confirmDialog.type === 'approve' ? 'success' : 'error'}
+            disabled={isSubmitting}
+            startIcon={isSubmitting ? <CircularProgress size={16} /> : null}
+            autoFocus
+          >
+            {isSubmitting ? 'Memproses...' : confirmDialog.type === 'approve' ? 'Setujui' : 'Tolak'}
+          </Button>
+        </DialogActions>
+      </Dialog>
+    </>
  )
 }

@@ -11,26 +11,31 @@ const ReportFinancialList: React.FC = () => {
  const { lang: locale } = useParams()

  const financialReports = [
-    {
-      title: 'Arus Kas',
-      iconClass: 'tabler-cash',
-      link: getLocalizedUrl(`/apps/report/cash-flow`, locale as Locale)
-    },
+    // {
+    //   title: 'Arus Kas',
+    //   iconClass: 'tabler-cash',
+    //   link: getLocalizedUrl(`/apps/report/cash-flow`, locale as Locale)
+    // },
    {
      title: 'Laba Rugi',
      iconClass: 'tabler-cash',
      link: getLocalizedUrl(`/apps/report/profit-loss`, locale as Locale)
    },
    {
-      title: 'Neraca',
+      title: 'Metode Pembayaran',
      iconClass: 'tabler-cash',
-      link: getLocalizedUrl(`/apps/report/neraca`, locale as Locale)
-    },
-    {
-      title: 'Ringkasan Eksekutif',
-      iconClass: 'tabler-cash',
-      link: getLocalizedUrl(`/apps/report/neraca`, locale as Locale)
+      link: getLocalizedUrl(`/apps/report/financial/payment-method`, locale as Locale)
    }
+    // {
+    //   title: 'Neraca',
+    //   iconClass: 'tabler-cash',
+    //   link: getLocalizedUrl(`/apps/report/neraca`, locale as Locale)
+    // },
+    // {
+    //   title: 'Ringkasan Eksekutif',
+    //   iconClass: 'tabler-cash',
+    //   link: getLocalizedUrl(`/apps/report/neraca`, locale as Locale)
+    // }
  ]

  return (
@@ -12,35 +12,45 @@ const ReportSalesList: React.FC = () => {

  const salesReports = [
    {
-      title: 'Detail Penjualan',
+      title: 'Penjualan',
      iconClass: 'tabler-receipt-2',
-      link: ''
-    },
-    {
-      title: 'Tagihan Pelanggan',
-      iconClass: 'tabler-receipt-2',
-      link: ''
+      link: getLocalizedUrl(`/apps/report/sales/sales-report`, locale as Locale)
    },
+    // {
+    //   title: 'Detail Penjualan',
+    //   iconClass: 'tabler-receipt-2',
+    //   link: ''
+    // },
+    // {
+    //   title: 'Tagihan Pelanggan',
+    //   iconClass: 'tabler-receipt-2',
+    //   link: ''
+    // },
    {
      title: 'Penjualan per Produk',
      iconClass: 'tabler-receipt-2',
-      link: ''
+      link: getLocalizedUrl(`/apps/report/sales/sales-product`, locale as Locale)
    },
    {
      title: 'Penjualan per Kategori Produk',
      iconClass: 'tabler-receipt-2',
-      link: ''
+      link: getLocalizedUrl(`/apps/report/sales/sales-product-category`, locale as Locale)
    },
    {
-      title: 'Penjualan Produk per Pelanggan',
+      title: 'Penjualan Pesanan',
      iconClass: 'tabler-receipt-2',
-      link: ''
-    },
-    {
-      title: 'Pemesanan per Produk',
-      iconClass: 'tabler-receipt-2',
-      link: ''
+      link: getLocalizedUrl(`/apps/report/sales/sales-order`, locale as Locale)
    }
+    // {
+    //   title: 'Penjualan Produk per Pelanggan',
+    //   iconClass: 'tabler-receipt-2',
+    //   link: ''
+    // },
+    // {
+    //   title: 'Pemesanan per Produk',
+    //   iconClass: 'tabler-receipt-2',
+    //   link: ''
+    // }
  ]

  return (
@@ -0,0 +1,173 @@
+'use client'
+
+import DateRangePicker from '@/components/RangeDatePicker'
+import { ReportItemHeader, ReportItemSubheader } from '@/components/report/ReportItem'
+import { ExcelExportPaymentService } from '@/services/export/excel/ExcelExportPaymentService'
+import { PDFExportPaymentService } from '@/services/export/pdf/PDFExportPaymentService'
+import { usePaymentAnalytics } from '@/services/queries/analytics'
+import { formatCurrency, formatDateDDMMYYYY } from '@/utils/transform'
+import { Button, Card, CardContent, Menu, MenuItem } from '@mui/material'
+import { useState } from 'react'
+
+const ReportPaymentMethodContent = () => {
+  const [startDate, setStartDate] = useState<Date | null>(new Date())
+  const [endDate, setEndDate] = useState<Date | null>(new Date())
+  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null)
+
+  const { data: paymentAnalytics } = usePaymentAnalytics({
+    date_from: formatDateDDMMYYYY(startDate!),
+    date_to: formatDateDDMMYYYY(endDate!)
+  })
+
+  const handleExportExcel = async () => {
+    if (!paymentAnalytics) {
+      console.warn('No data available for export')
+      return
+    }
+
+    try {
+      const result = await ExcelExportPaymentService.exportPaymentMethodToExcel(paymentAnalytics)
+
+      if (result.success) {
+        console.log(`File exported successfully: ${result.filename}`)
+        // Optional: Show success message to user
+      } else {
+        console.error('Export failed:', result.error)
+        // Optional: Show error message to user
+      }
+    } catch (error) {
+      console.error('Export error:', error)
+    }
+  }
+
+  const handleExportPDF = async () => {
+    if (!paymentAnalytics) {
+      console.warn('No data available for export')
+      return
+    }
+
+    try {
+      const result = await PDFExportPaymentService.exportPaymentMethodToPDF(
+        paymentAnalytics,
+        `Laporan_Metode_Pembayaran_${formatDateDDMMYYYY(startDate!)}_${formatDateDDMMYYYY(endDate!)}.pdf`
+      )
+
+      if (result.success) {
+        console.log(`PDF exported successfully: ${result.filename}`)
+        // Optional: Show success message to user
+      } else {
+        console.error('PDF export failed:', result.error)
+        // Optional: Show error message to user
+      }
+    } catch (error) {
+      console.error('PDF export error:', error)
+    }
+  }
+
+  const handleExportClick = (event: React.MouseEvent<HTMLElement>) => {
+    setAnchorEl(event.currentTarget)
+  }
+
+  const handleExportClose = () => {
+    setAnchorEl(null)
+  }
+
+  return (
+    <Card>
+      <div className='p-6 border-be'>
+        <div className='flex items-center justify-end gap-2'>
+          <Button
+            color='secondary'
+            variant='tonal'
+            startIcon={<i className='tabler-upload' />}
+            endIcon={<i className='tabler-chevron-down' />}
+            className='max-sm:is-full'
+            onClick={handleExportClick}
+          >
+            Ekspor
+          </Button>
+          <Menu anchorEl={anchorEl} open={Boolean(anchorEl)} onClose={handleExportClose}>
+            <MenuItem
+              onClick={() => {
+                handleExportExcel()
+                handleExportClose()
+              }}
+            >
+              Export Excel
+            </MenuItem>
+            <MenuItem
+              onClick={() => {
+                handleExportPDF()
+                handleExportClose()
+              }}
+            >
+              Export PDF
+            </MenuItem>
+          </Menu>
+          <DateRangePicker
+            startDate={startDate}
+            endDate={endDate}
+            onStartDateChange={setStartDate}
+            onEndDateChange={setEndDate}
+          />
+        </div>
+      </div>
+      <CardContent>
+        <ReportItemHeader
+          title='Ringkasan Metode Pembayaran'
+          date={`${paymentAnalytics?.date_from.split('T')[0]} - ${paymentAnalytics?.date_to.split('T')[0]}`}
+        />
+        <div className='bg-gray-50 border border-gray-200 overflow-hidden'>
+          <table className='w-full'>
+            <thead>
+              <tr className='text-gray-800 border-b-2 border-gray-300'>
+                <th className='text-left p-3 font-semibold'>Metode Pembayaran</th>
+                <th className='text-center p-3 font-semibold'>Tipe</th>
+                <th className='text-center p-3 font-semibold'>Jumlah Order</th>
+                <th className='text-right p-3 font-semibold'>Total Amount</th>
+                <th className='text-center p-3 font-semibold'>Persentase</th>
+              </tr>
+            </thead>
+            <tbody>
+              {paymentAnalytics?.data?.map((payment, index) => (
+                <tr key={index} className={index % 2 === 0 ? 'bg-white' : 'bg-gray-50'}>
+                  <td className='p-3 font-medium text-gray-800'>{payment.payment_method_name}</td>
+                  <td className='p-3 text-center'>
+                    <span
+                      className={`px-2 py-1 rounded-full text-xs font-medium ${
+                        payment.payment_method_type === 'cash'
+                          ? 'bg-green-100 text-green-800'
+                          : 'bg-blue-100 text-blue-800'
+                      }`}
+                    >
+                      {payment.payment_method_type.toUpperCase()}
+                    </span>
+                  </td>
+                  <td className='p-3 text-center text-gray-700'>{payment.order_count}</td>
+                  <td className='p-3 text-right font-semibold text-gray-800'>{formatCurrency(payment.total_amount)}</td>
+                  <td className='p-3 text-center font-medium' style={{ color: '#36175e' }}>
+                    {(payment.percentage ?? 0).toFixed(1)}%
+                  </td>
+                </tr>
+              )) || []}
+            </tbody>
+            <tfoot>
+              <tr className='text-gray-800 border-t-2 border-gray-300'>
+                <td className='p-3 font-bold'>TOTAL</td>
+                <td className='p-3'></td>
+                <td className='p-3 text-center font-bold'>{paymentAnalytics?.summary.total_orders ?? 0}</td>
+                <td className='p-3 text-right font-bold'>
+                  {formatCurrency(paymentAnalytics?.summary.total_amount ?? 0)}
+                </td>
+                <td className='p-3 text-center font-bold'></td>
+              </tr>
+            </tfoot>
+          </table>
+        </div>
+        <ReportItemSubheader title='' />
+      </CardContent>
+    </Card>
+  )
+}
+
+export default ReportPaymentMethodContent
@@ -1,89 +1,105 @@
-// MUI Imports
 import Grid from '@mui/material/Grid2'
-
-// Type Imports
 import type { UserDataType } from '@components/card-statistics/HorizontalWithSubtitle'
-
-// Component Imports
 import HorizontalWithSubtitle from '@components/card-statistics/HorizontalWithSubtitle'
+import { ProfitLossReport } from '@/types/services/analytic'

-// Vars
-const data: UserDataType[] = [
-  {
-    title: 'Pendapatan',
-    stats: '29.004.775',
-    avatarIcon: 'tabler-trending-down',
-    avatarColor: 'error',
-    trend: 'negative',
-    trendNumber: '48,8%',
-    subtitle: 'vs Bulan Lalu'
-  },
-  {
-    title: 'Margin Laba Bersih',
-    stats: '38%',
-    avatarIcon: 'tabler-gauge',
-    avatarColor: 'success',
-    trend: 'positive',
-    trendNumber: 'Bulan Ini',
-    subtitle: 'Bulan Ini'
-  },
-  {
-    title: 'Laba Kotor',
-    stats: '21.076.389',
-    avatarIcon: 'tabler-trending-down',
-    avatarColor: 'error',
-    trend: 'negative',
-    trendNumber: '43,5%',
-    subtitle: 'vs bulan lalu'
-  },
-  {
-    title: 'Laba Bersih',
-    stats: '11.111.074',
-    avatarIcon: 'tabler-trending-down',
-    avatarColor: 'error',
-    trend: 'negative',
-    trendNumber: '36,8%',
-    subtitle: 'vs bulan lalu'
-  },
-  {
-    title: 'Margin Laba Kotor',
-    stats: '73%',
-    avatarIcon: 'tabler-gauge',
-    avatarColor: 'success',
-    trend: 'positive',
-    trendNumber: 'Bulan Ini',
-    subtitle: 'Bulan Ini'
-  },
-  {
-    title: 'Biaya Operasional',
-    stats: '9.965.315',
-    avatarIcon: 'tabler-trending-down',
-    avatarColor: 'error',
-    trend: 'negative',
-    trendNumber: '49,4%',
-    subtitle: 'vs Bulan Lalu'
-  },
-  {
-    title: 'Rasio Biaya Operasional',
-    stats: '61,7%',
-    avatarIcon: 'tabler-gauge',
-    avatarColor: 'success',
-    trend: 'positive',
-    trendNumber: 'Bulan Ini',
-    subtitle: 'Bulan Ini'
-  },
-  {
-    title: 'EBITDA',
-    stats: '11.032.696',
-    avatarIcon: 'tabler-trending-down',
-    avatarColor: 'error',
-    trend: 'negative',
-    trendNumber: '37,3%',
-    subtitle: 'vs bulan lalu'
+// Utility functions
+const formatIDR = (amount: number) => {
+  return new Intl.NumberFormat('id-ID', {
+    minimumFractionDigits: 0,
+    maximumFractionDigits: 0
+  }).format(amount)
+}
+
+const formatPercentage = (value: number) => {
+  return `${value.toFixed(1)}%`
+}
+
+interface ReportProfitLossCardProps {
+  profitData: ProfitLossReport | undefined
+}
+
+const ReportProfitLossCard = ({ profitData }: ReportProfitLossCardProps) => {
+  if (!profitData) {
+    return null // Will be handled by parent loading state
  }
-]

-const ReportProfitLossCard = () => {
+  // Using actual data from API response with correct field names
+  const data: UserDataType[] = [
+    {
+      title: 'Pendapatan',
+      stats: formatIDR(profitData.summary.total_revenue),
+      avatarIcon: 'tabler-trending-up',
+      avatarColor: 'success',
+      trend: 'positive',
+      trendNumber: 'Current Period',
+      subtitle: 'Total Revenue'
+    },
+    {
+      title: 'Margin Laba Bersih',
+      stats: formatPercentage(profitData.summary.net_profit_margin),
+      avatarIcon: 'tabler-gauge',
+      avatarColor: profitData.summary.net_profit_margin >= 0 ? 'success' : 'error',
+      trend: profitData.summary.net_profit_margin >= 0 ? 'positive' : 'negative',
+      trendNumber: 'Current Period',
+      subtitle: 'Net Profit Margin'
+    },
+    {
+      title: 'Laba Kotor',
+      stats: formatIDR(profitData.summary.gross_profit),
+      avatarIcon: 'tabler-trending-up',
+      avatarColor: profitData.summary.gross_profit >= 0 ? 'success' : 'error',
+      trend: profitData.summary.gross_profit >= 0 ? 'positive' : 'negative',
+      trendNumber: 'Current Period',
+      subtitle: 'Gross Profit'
+    },
+    {
+      title: 'Laba Bersih',
+      stats: formatIDR(profitData.summary.net_profit),
+      avatarIcon: profitData.summary.net_profit >= 0 ? 'tabler-trending-up' : 'tabler-trending-down',
+      avatarColor: profitData.summary.net_profit >= 0 ? 'success' : 'error',
+      trend: profitData.summary.net_profit >= 0 ? 'positive' : 'negative',
+      trendNumber: 'Current Period',
+      subtitle: 'Net Profit'
+    },
+    {
+      title: 'Margin Laba Kotor',
+      stats: formatPercentage(profitData.summary.gross_profit_margin),
+      avatarIcon: 'tabler-gauge',
+      avatarColor: profitData.summary.gross_profit_margin >= 0 ? 'success' : 'error',
+      trend: profitData.summary.gross_profit_margin >= 0 ? 'positive' : 'negative',
+      trendNumber: 'Current Period',
+      subtitle: 'Gross Profit Margin'
+    },
+    {
+      title: 'Total Cost',
+      stats: formatIDR(profitData.summary.total_cost),
+      avatarIcon: 'tabler-trending-down',
+      avatarColor: 'error',
+      trend: 'negative',
+      trendNumber: 'Current Period',
+      subtitle: 'Total Cost'
+    },
+    {
+      title: 'Tax',
+      stats: formatIDR(profitData.summary.total_tax),
+      avatarIcon: 'tabler-receipt-tax',
+      avatarColor: 'warning',
+      trend: 'neutral',
+      trendNumber: 'Current Period',
+      subtitle: 'Total Tax'
+    },
+    {
+      title: 'Total Orders',
+      stats: profitData.summary.total_orders.toString(),
+      avatarIcon: 'tabler-shopping-cart',
+      avatarColor: 'info',
+      trend: 'positive',
+      trendNumber: 'Current Period',
+      subtitle: 'Total Orders'
+    }
+  ]
+
  return (
    <Grid container spacing={6}>
      {data.map((item, i) => (
@@ -2,12 +2,86 @@

 import DateRangePicker from '@/components/RangeDatePicker'
 import { ReportItem, ReportItemFooter, ReportItemHeader, ReportItemSubheader } from '@/components/report/ReportItem'
-import { Button, Card, CardContent, Paper } from '@mui/material'
+import { ExcelExportProfitLossService } from '@/services/export/excel/ExcelExportProfitLossService'
+import { PDFExportProfitLossService } from '@/services/export/pdf/PDFExportProfitLossService'
+import { ProfitLossReport } from '@/types/services/analytic'
+import { Button, Card, CardContent, Box, Menu, MenuItem, ListItemIcon, ListItemText } from '@mui/material'
+
 import { useState } from 'react'

-const ReportProfitLossContent = () => {
-  const [startDate, setStartDate] = useState<Date | null>(new Date())
-  const [endDate, setEndDate] = useState<Date | null>(new Date())
+interface ReportProfitLossContentProps {
+  profitData: ProfitLossReport | undefined
+  startDate: Date | null
+  endDate: Date | null
+  onStartDateChange: (date: Date | null) => void
+  onEndDateChange: (date: Date | null) => void
+}
+
+// Utility function to format date for display
+const formatDisplayDate = (dateString: string) => {
+  const date = new Date(dateString)
+  return date.toLocaleDateString('id-ID', {
+    day: '2-digit',
+    month: '2-digit',
+    year: 'numeric'
+  })
+}
+
+const ReportProfitLossContent = ({
+  profitData,
+  startDate,
+  endDate,
+  onStartDateChange,
+  onEndDateChange
+}: ReportProfitLossContentProps) => {
+  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null)
+  const open = Boolean(anchorEl)
+
+  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+    setAnchorEl(event.currentTarget)
+  }
+
+  const handleClose = () => {
+    setAnchorEl(null)
+  }
+  const handleExportExcel = async () => {
+    if (!profitData) return
+    handleClose()
+
+    try {
+      const result = await ExcelExportProfitLossService.exportProfitLossToExcel(profitData)
+
+      if (result.success) {
+        console.log('Excel export successful:', result.filename)
+      } else {
+        console.error('Excel export failed:', result.error)
+        alert('Export Excel gagal. Silakan coba lagi.')
+      }
+    } catch (error) {
+      console.error('Excel export error:', error)
+      alert('Terjadi kesalahan saat export Excel.')
+    }
+  }
+
+  const handleExportPDF = async () => {
+    if (!profitData) return
+    handleClose()
+
+    try {
+      const result = await PDFExportProfitLossService.exportProfitLossToPDF(profitData)
+
+      if (result.success) {
+        console.log('PDF export successful:', result.filename)
+        // Optional: Show success notification
+      } else {
+        console.error('PDF export failed:', result.error)
+        alert('Export PDF gagal. Silakan coba lagi.')
+      }
+    } catch (error) {
+      console.error('PDF export error:', error)
+      alert('Terjadi kesalahan saat export PDF.')
+    }
+  }

  return (
    <Card>
@@ -16,99 +90,170 @@ const ReportProfitLossContent = () => {
          <Button
            color='secondary'
            variant='tonal'
-            startIcon={<i className='tabler-upload' />}
+            startIcon={<i className='tabler-download' />}
+            endIcon={<i className='tabler-chevron-down' />}
            className='max-sm:is-full'
+            onClick={handleClick}
+            disabled={!profitData}
+            aria-controls={open ? 'export-menu' : undefined}
+            aria-haspopup='true'
+            aria-expanded={open ? 'true' : undefined}
          >
-            Ekspor
+            Export
          </Button>
+
+          <Menu
+            id='export-menu'
+            anchorEl={anchorEl}
+            open={open}
+            onClose={handleClose}
+            MenuListProps={{
+              'aria-labelledby': 'export-button'
+            }}
+            transformOrigin={{ horizontal: 'right', vertical: 'top' }}
+            anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}
+          >
+            <MenuItem onClick={handleExportExcel}>
+              <ListItemIcon>
+                <i className='tabler-file-type-xls text-green-600' />
+              </ListItemIcon>
+              <ListItemText>Export to Excel</ListItemText>
+            </MenuItem>
+
+            <MenuItem onClick={handleExportPDF}>
+              <ListItemIcon>
+                <i className='tabler-file-type-pdf text-red-600' />
+              </ListItemIcon>
+              <ListItemText>Export to PDF</ListItemText>
+            </MenuItem>
+          </Menu>
          <DateRangePicker
            startDate={startDate}
            endDate={endDate}
-            onStartDateChange={setStartDate}
-            onEndDateChange={setEndDate}
+            onStartDateChange={onStartDateChange}
+            onEndDateChange={onEndDateChange}
          />
        </div>
      </div>
      <CardContent>
-        <ReportItemHeader title='Pendapatan' date='10/09/2025' />
-        <ReportItemSubheader title='Penjualan' />
-        <ReportItem accountCode='4-40000' accountName='Pendapatan' amount={116791108} onClick={() => {}} />
-        <ReportItemSubheader title='Penghasilan lain' />
-        <ReportItem
-          accountCode='7-70001'
-          accountName='Pendapatan Bunga - Deposito'
-          amount={-86486}
-          onClick={() => {}}
-        />
-        <ReportItem accountCode='7-70099' accountName='Pendapatan Lain - lain' amount={54054} onClick={() => {}} />
-        <ReportItem
-          accountCode='7-70100'
-          accountName='Pendapatan lainnya (Service Charge)'
-          amount={-15315}
-          onClick={() => {}}
-        />
-        <ReportItemFooter title='Total Pendapatan' amount={116743360} />
-        <ReportItemSubheader title='' />
+        {profitData ? (
+          <>
+            {/* Summary Section */}
+            <ReportItemHeader
+              title='Pendapatan'
+              date={`${profitData.date_from.split('T')[0]} - ${profitData.date_to.split('T')[0]}`}
+            />
+            <ReportItemSubheader title='Penjualan' />
+            <ReportItem
+              accountCode=''
+              accountName='Revenue'
+              amount={profitData.summary.total_revenue}
+              onClick={() => {}}
+            />

-        <ReportItemHeader title='Beban Pokok Penjualan' date='10/09/2025' />
-        <ReportItem accountCode='5-50000' accountName='Beban Pokok Pendapatan' amount={35018079} onClick={() => {}} />
-        <ReportItem accountCode='5-50300' accountName='Pengiriman & Pengangkutan' amount={-15315} onClick={() => {}} />
-        <ReportItemFooter title='Total Beban Pokok Penjualan' amount={35002764} />
-        <ReportItemSubheader title='' />
+            <ReportItemFooter title='Total Pendapatan' amount={profitData.summary.total_revenue} />
+            <ReportItemSubheader title='' />

-        <ReportItemHeader title='Laba Kotor' amount={81740597} />
-        <ReportItemSubheader title='' />
+            <ReportItemHeader
+              title='Beban Pokok Penjualan'
+              date={`${profitData.date_from.split('T')[0]} - ${profitData.date_to.split('T')[0]}`}
+            />
+            <ReportItem
+              accountCode=''
+              accountName='Cost of Goods Sold'
+              amount={profitData.summary.total_cost}
+              onClick={() => {}}
+            />
+            <ReportItemFooter title='Total Beban Pokok Penjualan' amount={profitData.summary.total_cost} />
+            <ReportItemSubheader title='' />

-        <ReportItemHeader title='Biaya Operasional' date='10/09/2025' />
-        <ReportItemSubheader title='Biaya Operasional' />
-        <ReportItem accountCode='6-60218' accountName='Air' amount={15315} onClick={() => {}} />
-        <ReportItem
-          accountCode='6-60301'
-          accountName='Alat Tulis Kantor & Printing'
-          amount={-19820}
-          onClick={() => {}}
-        />
-        <ReportItem accountCode='6-60302' accountName='Bea Materai' amount={-40541} onClick={() => {}} />
-        <ReportItem
-          accountCode='6-60003'
-          accountName='Bensin, Tol dan Parkir - Penjualan'
-          amount={6264865}
-          onClick={() => {}}
-        />
-        <ReportItem accountCode='6-60401' accountName='Biaya Sewa - Kendaraan' amount={62162} onClick={() => {}} />
-        <ReportItem accountCode='6-60403' accountName='Biaya Sewa - Lain - lain' amount={63964} onClick={() => {}} />
-        <ReportItem accountCode='6-60402' accountName='Biaya Sewa - Operasional' amount={-2703} onClick={() => {}} />
-        <ReportItem accountCode='6-60101' accountName='Gaji' amount={6306} onClick={() => {}} />
-        <ReportItem accountCode='6-60001' accountName='Iklan & Promosi' amount={7851892} onClick={() => {}} />
-        <ReportItem accountCode='6-60002' accountName='Komisi & Fee' amount={6277748} onClick={() => {}} />
-        <ReportItem accountCode='6-60005' accountName='Komunikasi - Penjualan' amount={12058018} onClick={() => {}} />
-        <ReportItem accountCode='6-60206' accountName='Komunikasi - Umum' amount={85586} onClick={() => {}} />
-        <ReportItem accountCode='6-60500' accountName='Penyusutan - Bangunan' amount={73874} onClick={() => {}} />
-        <ReportItem accountCode='6-60502' accountName='Penyusutan - Kendaraan' amount={-78378} onClick={() => {}} />
-        <ReportItem
-          accountCode='6-60004'
-          accountName='Perjalanan Dinas - Penjualan'
-          amount={6745045}
-          onClick={() => {}}
-        />
-        <ReportItem accountCode='6-60204' accountName='Perjalanan Dinas - Umum' amount={-48649} onClick={() => {}} />
-        <ReportItem accountCode='6-60304' accountName='Supplies dan Material' amount={58559} onClick={() => {}} />
-        <ReportItem accountCode='6-60106' accountName='THR & Bonus' amount={-59459} onClick={() => {}} />
+            <ReportItemHeader title='Laba Kotor' amount={profitData.summary.gross_profit} />
+            <ReportItemSubheader title='' />

-        <ReportItemSubheader title='Biaya Lain-Lain' />
-        <ReportItem
-          accountCode='8-80002'
-          accountName='(Laba)/Rugi Pelepasan Aset Tetap'
-          amount={2703}
-          onClick={() => {}}
-        />
-        <ReportItem accountCode='8-80999' accountName='Beban Lain - lain' amount={81982} onClick={() => {}} />
-        <ReportItem accountCode='8-80100' accountName='Penyesuaian Persediaan' amount={-1477900} onClick={() => {}} />
-        <ReportItem accountCode='8-80001' accountName='Provisi' amount={-12613} onClick={() => {}} />
-        <ReportItemFooter title='Total Biaya Operasional' amount={37907956} />
-        <ReportItemSubheader title='' />
+            {/* Daily Data Breakdown Section */}
+            {profitData.data && profitData.data.length > 0 && (
+              <>
+                <ReportItemHeader
+                  title='Rincian Data Harian'
+                  date={`${profitData.date_from.split('T')[0]} - ${profitData.date_to.split('T')[0]}`}
+                />
+                <ReportItemSubheader title='Breakdown per Hari' />

-        <ReportItemHeader title='Laba Bersih' amount={43832641} />
+                {profitData.data.map((dailyData, index) => (
+                  <div key={index} className='mb-4'>
+                    <ReportItemSubheader title={`Data ${formatDisplayDate(dailyData.date)}`} />
+
+                    <ReportItem
+                      accountCode=''
+                      accountName='Revenue Harian'
+                      amount={dailyData.revenue}
+                      onClick={() => {}}
+                    />
+
+                    <ReportItem accountCode='' accountName='Cost Harian' amount={dailyData.cost} onClick={() => {}} />
+
+                    <ReportItem
+                      accountCode=''
+                      accountName='Gross Profit Harian'
+                      amount={dailyData.gross_profit}
+                      onClick={() => {}}
+                    />
+
+                    <ReportItem accountCode='' accountName='Tax Harian' amount={dailyData.tax} onClick={() => {}} />
+
+                    <ReportItem
+                      accountCode=''
+                      accountName='Discount Harian'
+                      amount={dailyData.discount}
+                      onClick={() => {}}
+                    />
+
+                    <ReportItem
+                      accountCode=''
+                      accountName='Orders Harian'
+                      amount={dailyData.orders}
+                      onClick={() => {}}
+                    />
+
+                    <ReportItemFooter
+                      title={`Net Profit ${formatDisplayDate(dailyData.date)}`}
+                      amount={dailyData.net_profit}
+                    />
+                  </div>
+                ))}
+
+                <ReportItemSubheader title='' />
+              </>
+            )}
+
+            {/* Operational Costs Section */}
+            <ReportItemHeader
+              title='Biaya Operasional'
+              date={`${profitData.date_from.split('T')[0]} - ${profitData.date_to.split('T')[0]}`}
+            />
+            <ReportItemSubheader title='Biaya Operasional' />
+
+            <ReportItem accountCode='' accountName='Tax' amount={profitData.summary.total_tax} onClick={() => {}} />
+            <ReportItem
+              accountCode=''
+              accountName='Discount'
+              amount={profitData.summary.total_discount}
+              onClick={() => {}}
+            />
+
+            <ReportItemFooter
+              title='Total Biaya Operasional'
+              amount={profitData.summary.total_tax + profitData.summary.total_discount}
+            />
+            <ReportItemSubheader title='' />
+
+            <ReportItemHeader title='Laba Bersih' amount={profitData.summary.net_profit} />
+          </>
+        ) : (
+          <Box display='flex' justifyContent='center' alignItems='center' minHeight={200}>
+            <span>No data available</span>
+          </Box>
+        )}
      </CardContent>
    </Card>
  )
@@ -0,0 +1,78 @@
+import Grid from '@mui/material/Grid2'
+import type { UserDataType } from '@components/card-statistics/HorizontalWithSubtitle'
+import HorizontalWithSubtitle from '@components/card-statistics/HorizontalWithSubtitle'
+import { ProfitLossReport, SalesReport } from '@/types/services/analytic'
+
+// Utility functions
+const formatIDR = (amount: number) => {
+  return new Intl.NumberFormat('id-ID', {
+    minimumFractionDigits: 0,
+    maximumFractionDigits: 0
+  }).format(amount)
+}
+
+const formatPercentage = (value: number) => {
+  return `${value.toFixed(1)}%`
+}
+
+interface ReportSalesOrderCardProps {
+  sales: SalesReport | undefined
+}
+
+const ReportSalesOrderCard = ({ sales }: ReportSalesOrderCardProps) => {
+  if (!sales) {
+    return null // Will be handled by parent loading state
+  }
+
+  // Using actual data from API response with correct field names
+  const data: UserDataType[] = [
+    {
+      title: 'Penjualan',
+      stats: formatIDR(sales.summary.total_sales),
+      avatarIcon: 'tabler-trending-up',
+      avatarColor: 'success',
+      trend: 'positive',
+      trendNumber: '',
+      subtitle: 'Total Penjualan'
+    },
+    {
+      title: 'Total Pesanan',
+      stats: sales.summary.total_orders.toString(),
+      avatarIcon: 'tabler-gauge',
+      avatarColor: 'success',
+      trend: 'positive',
+      trendNumber: '',
+      subtitle: 'Total Pesanan'
+    },
+    {
+      title: 'Rata Rata',
+      stats: formatIDR(sales.summary.average_order_value),
+      avatarIcon: 'tabler-trending-up',
+      avatarColor: sales.summary.average_order_value >= 0 ? 'success' : 'error',
+      trend: sales.summary.average_order_value >= 0 ? 'positive' : 'negative',
+      trendNumber: '',
+      subtitle: 'Rata Rata Nilai Pesanan'
+    },
+    {
+      title: 'Penjualan Bersih',
+      stats: formatIDR(sales.summary.net_sales),
+      avatarIcon: sales.summary.net_sales >= 0 ? 'tabler-trending-up' : 'tabler-trending-down',
+      avatarColor: sales.summary.net_sales >= 0 ? 'success' : 'error',
+      trend: sales.summary.net_sales >= 0 ? 'positive' : 'negative',
+      trendNumber: '',
+      subtitle: 'Net Profit'
+    }
+  ]
+
+  return (
+    <Grid container spacing={6}>
+      {data.map((item, i) => (
+        <Grid key={i} size={{ xs: 12, sm: 6, md: 3 }}>
+          <HorizontalWithSubtitle {...item} />
+        </Grid>
+      ))}
+    </Grid>
+  )
+}
+
+export default ReportSalesOrderCard
@@ -0,0 +1,160 @@
+'use client'
+
+import DateRangePicker from '@/components/RangeDatePicker'
+import { ReportItemHeader, ReportItemSubheader } from '@/components/report/ReportItem'
+import { useSalesAnalytics } from '@/services/queries/analytics'
+import { formatCurrency, formatDate, formatDateDDMMYYYY } from '@/utils/transform'
+import { Button, Card, CardContent, Menu, MenuItem } from '@mui/material'
+import { useState } from 'react'
+import ReportSalesOrderCard from './ReportSalesOrderCard'
+import { PDFExportSalesOrderService } from '@/services/export/pdf/PDFExportSalesOrderService'
+import { ExcelExportSalesOrderService } from '@/services/export/excel/ExcelExportSalesOrderService'
+
+const ReportSalesOrderContent = () => {
+  const [startDate, setStartDate] = useState<Date | null>(new Date())
+  const [endDate, setEndDate] = useState<Date | null>(new Date())
+  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null)
+
+  const { data: sales } = useSalesAnalytics({
+    date_from: formatDateDDMMYYYY(startDate!),
+    date_to: formatDateDDMMYYYY(endDate!)
+  })
+
+  const handleExportClick = (event: React.MouseEvent<HTMLElement>) => {
+    setAnchorEl(event.currentTarget)
+  }
+
+  const handleExportClose = () => {
+    setAnchorEl(null)
+  }
+
+  const handleExportExcel = async () => {
+    if (!sales) {
+      console.warn('No data available for export')
+      return
+    }
+
+    try {
+      const result = await ExcelExportSalesOrderService.exportSalesOrderToExcel(
+        sales,
+        `Pesanan_Penjualan_${formatDateDDMMYYYY(startDate!)}_${formatDateDDMMYYYY(endDate!)}.xlsx`
+      )
+
+      if (result.success) {
+        console.log(`Excel exported successfully: ${result.filename}`)
+      } else {
+        console.error('Export failed:', result.error)
+      }
+    } catch (error) {
+      console.error('Export error:', error)
+    }
+  }
+
+  const handleExportPDF = async () => {
+    if (!sales) {
+      console.warn('No data available for export')
+      return
+    }
+
+    try {
+      const result = await PDFExportSalesOrderService.exportSalesOrderToPDF(
+        sales,
+        `Laporan_Pesanan_Penjualan_${formatDateDDMMYYYY(startDate!)}_${formatDateDDMMYYYY(endDate!)}.pdf`
+      )
+
+      if (result.success) {
+        console.log(`PDF exported successfully: ${result.filename}`)
+      } else {
+        console.error('Export failed:', result.error)
+      }
+    } catch (error) {
+      console.error('Export error:', error)
+    }
+  }
+
+  return (
+    <>
+      <ReportSalesOrderCard sales={sales} />
+
+      <Card className='mt-5'>
+        <div className='p-6 border-be'>
+          <div className='flex items-center justify-end gap-2'>
+            <Button
+              color='secondary'
+              variant='tonal'
+              startIcon={<i className='tabler-upload' />}
+              endIcon={<i className='tabler-chevron-down' />}
+              className='max-sm:is-full'
+              onClick={handleExportClick}
+            >
+              Ekspor
+            </Button>
+            <Menu anchorEl={anchorEl} open={Boolean(anchorEl)} onClose={handleExportClose}>
+              <MenuItem
+                onClick={() => {
+                  handleExportExcel()
+                  handleExportClose()
+                }}
+              >
+                Export Excel
+              </MenuItem>
+              <MenuItem
+                onClick={() => {
+                  handleExportPDF()
+                  handleExportClose()
+                }}
+              >
+                Export PDF
+              </MenuItem>
+            </Menu>
+            <DateRangePicker
+              startDate={startDate}
+              endDate={endDate}
+              onStartDateChange={setStartDate}
+              onEndDateChange={setEndDate}
+            />
+          </div>
+        </div>
+        <CardContent>
+          <ReportItemHeader
+            title='Pesanan'
+            date={`${sales?.date_from.split('T')[0]} - ${sales?.date_to.split('T')[0]}`}
+          />
+          <div className='bg-gray-50 border border-gray-200 overflow-hidden'>
+            <table className='w-full'>
+              <thead>
+                <tr className='text-gray-800 border-b-2 border-gray-300'>
+                  <th className='text-left p-3 font-semibold'>Date</th>
+                  <th className='text-center p-3 font-semibold'>Penjualan</th>
+                  <th className='text-center p-3 font-semibold'>Pesanan</th>
+                  <th className='text-right p-3 font-semibold'>Qty</th>
+                  <th className='text-right p-3 font-semibold'>Pajak</th>
+                  <th className='text-right p-3 font-semibold'>Diskon</th>
+                  <th className='text-right p-3 font-semibold'>Pendapatan</th>
+                </tr>
+              </thead>
+              <tbody>
+                {sales?.data?.map((c, index) => (
+                  <tr key={index} className={index % 2 === 0 ? 'bg-white' : 'bg-gray-50'}>
+                    <td className='p-3 font-medium text-gray-800'>{formatDate(c.date)}</td>
+                    <td className='p-3 text-center text-gray-700'>{formatCurrency(c.sales)}</td>
+                    <td className='p-3 text-center text-gray-700'>{c.orders}</td>
+                    <td className='p-3 text-center text-gray-700'>{c.items}</td>
+                    <td className='p-3 text-center text-gray-700'>{formatCurrency(c.tax)}</td>
+                    <td className='p-3 text-center text-gray-700'>{formatCurrency(c.discount)}</td>
+                    <td className='p-3 text-right font-semibold' style={{ color: '#36175e' }}>
+                      {formatCurrency(c.net_sales)}
+                    </td>
+                  </tr>
+                )) || []}
+              </tbody>
+            </table>
+          </div>
+          <ReportItemSubheader title='' />
+        </CardContent>
+      </Card>
+    </>
+  )
+}
+
+export default ReportSalesOrderContent
@@ -0,0 +1,281 @@
+'use client'
+
+import DateRangePicker from '@/components/RangeDatePicker'
+import { ReportItemHeader, ReportItemSubheader } from '@/components/report/ReportItem'
+import { ExcelExportSalesProductService } from '@/services/export/excel/ExcelExportSalesProductService'
+import { PDFExportSalesProductService } from '@/services/export/pdf/PdfExportSalesProductSevice'
+import { useProductSalesAnalytics } from '@/services/queries/analytics'
+import { formatCurrency, formatDateDDMMYYYY } from '@/utils/transform'
+import { Button, Card, CardContent, Menu, MenuItem } from '@mui/material'
+import { useState } from 'react'
+
+const ReportSalesPerProductContent = () => {
+  const [startDate, setStartDate] = useState<Date | null>(new Date())
+  const [endDate, setEndDate] = useState<Date | null>(new Date())
+  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null)
+
+  const { data: products } = useProductSalesAnalytics({
+    date_from: formatDateDDMMYYYY(startDate!),
+    date_to: formatDateDDMMYYYY(endDate!)
+  })
+
+  const productSummary = {
+    totalQuantitySold: products?.data?.reduce((sum, item) => sum + (item?.quantity_sold || 0), 0) || 0,
+    totalRevenue: products?.data?.reduce((sum, item) => sum + (item?.revenue || 0), 0) || 0,
+    totalOrders: products?.data?.reduce((sum, item) => sum + (item?.order_count || 0), 0) || 0
+  }
+
+  const handleExportClick = (event: React.MouseEvent<HTMLElement>) => {
+    setAnchorEl(event.currentTarget)
+  }
+
+  const handleExportClose = () => {
+    setAnchorEl(null)
+  }
+
+  const handleExportExcel = async () => {
+    if (!products) {
+      console.warn('No data available for export')
+      return
+    }
+
+    try {
+      const result = await ExcelExportSalesProductService.exportProductSalesToExcel(
+        products,
+        `Penjualan_Produk_${formatDateDDMMYYYY(startDate!)}_${formatDateDDMMYYYY(endDate!)}.xlsx`
+      )
+
+      if (result.success) {
+        console.log(`Excel exported successfully: ${result.filename}`)
+      } else {
+        console.error('Export failed:', result.error)
+      }
+    } catch (error) {
+      console.error('Export error:', error)
+    }
+  }
+
+  const handleExportPDF = async () => {
+    if (!products) {
+      console.warn('No data available for export')
+      return
+    }
+
+    try {
+      const result = await PDFExportSalesProductService.exportProductSalesToPDF(
+        products,
+        `Laporan_Penjualan_Produk_${formatDateDDMMYYYY(startDate!)}_${formatDateDDMMYYYY(endDate!)}.pdf`
+      )
+
+      if (result.success) {
+        console.log(`PDF exported successfully: ${result.filename}`)
+      } else {
+        console.error('Export failed:', result.error)
+      }
+    } catch (error) {
+      console.error('Export error:', error)
+    }
+  }
+
+  return (
+    <Card>
+      <div className='p-6 border-be'>
+        <div className='flex items-center justify-end gap-2'>
+          <Button
+            color='secondary'
+            variant='tonal'
+            startIcon={<i className='tabler-upload' />}
+            endIcon={<i className='tabler-chevron-down' />}
+            className='max-sm:is-full'
+            onClick={handleExportClick}
+          >
+            Ekspor
+          </Button>
+          <Menu anchorEl={anchorEl} open={Boolean(anchorEl)} onClose={handleExportClose}>
+            <MenuItem
+              onClick={() => {
+                handleExportExcel()
+                handleExportClose()
+              }}
+            >
+              Export Excel
+            </MenuItem>
+            <MenuItem
+              onClick={() => {
+                handleExportPDF()
+                handleExportClose()
+              }}
+            >
+              Export PDF
+            </MenuItem>
+          </Menu>
+          <DateRangePicker
+            startDate={startDate}
+            endDate={endDate}
+            onStartDateChange={setStartDate}
+            onEndDateChange={setEndDate}
+          />
+        </div>
+      </div>
+      <CardContent>
+        <ReportItemHeader
+          title='Ringkasan Item'
+          date={`${products?.date_from.split('T')[0]} - ${products?.date_to.split('T')[0]}`}
+        />
+        <div className='bg-gray-50  border border-gray-200 overflow-visible'>
+          <div className='overflow-x-auto'>
+            <table className='w-full table-fixed' style={{ minWidth: '100%' }}>
+              <colgroup>
+                <col style={{ width: '40%' }} />
+                <col style={{ width: '15%' }} />
+                <col style={{ width: '15%' }} />
+                <col style={{ width: '15%' }} />
+                <col style={{ width: '15%' }} />
+              </colgroup>
+              <thead>
+                <tr className='text-gray-800 border-b-2 border-gray-300'>
+                  <th className='text-left p-3 font-semibold border-r border-gray-300'>Produk</th>
+                  <th className='text-center p-3 font-semibold border-r border-gray-300'>Qty</th>
+                  <th className='text-center p-3 font-semibold border-r border-gray-300'>Order</th>
+                  <th className='text-right p-3 font-semibold border-r border-gray-300'>Pendapatan</th>
+                  <th className='text-right p-3 font-semibold'>Rata Rata</th>
+                </tr>
+              </thead>
+              <tbody>
+                {(() => {
+                  // Group products by category
+                  const groupedProducts =
+                    products?.data?.reduce(
+                      (acc, item) => {
+                        const categoryName = item.category_name || 'Tidak Berkategori'
+                        if (!acc[categoryName]) {
+                          acc[categoryName] = []
+                        }
+                        acc[categoryName].push(item)
+                        return acc
+                      },
+                      {} as Record<string, any[]>
+                    ) || {}
+
+                  const rows: JSX.Element[] = []
+                  let globalIndex = 0
+
+                  // Sort categories alphabetically
+                  Object.keys(groupedProducts)
+                    .sort()
+                    .forEach(categoryName => {
+                      const categoryProducts = groupedProducts[categoryName]
+
+                      // Category header row
+                      rows.push(
+                        <tr
+                          key={`category-${categoryName}`}
+                          className='bg-gray-100 border-b border-gray-300'
+                          style={{ pageBreakInside: 'avoid' }}
+                        >
+                          <td
+                            className='p-3 font-bold text-gray-900 border-r border-gray-300'
+                            style={{ color: '#36175e' }}
+                          >
+                            {categoryName.toUpperCase()}
+                          </td>
+                          <td className='p-3 border-r border-gray-300'></td>
+                          <td className='p-3 border-r border-gray-300'></td>
+                          <td className='p-3 border-r border-gray-300'></td>
+                          <td className='p-3'></td>
+                        </tr>
+                      )
+
+                      // Product rows for this category
+                      categoryProducts.forEach((item, index) => {
+                        globalIndex++
+                        rows.push(
+                          <tr
+                            key={`product-${item.product_name}-${index}`}
+                            className={`${globalIndex % 2 === 0 ? 'bg-white' : 'bg-gray-50'} border-b border-gray-200`}
+                            style={{ pageBreakInside: 'avoid' }}
+                          >
+                            <td
+                              className='p-3 pl-6 font-medium text-gray-800 border-r border-gray-200'
+                              style={{ wordWrap: 'break-word' }}
+                            >
+                              {item.product_name}
+                            </td>
+                            <td className='p-3 text-center text-gray-700 border-r border-gray-200'>
+                              {item.quantity_sold}
+                            </td>
+                            <td className='p-3 text-center text-gray-700 border-r border-gray-200'>
+                              {item.order_count ?? 0}
+                            </td>
+                            <td className='p-3 text-right font-semibold text-gray-800 border-r border-gray-200'>
+                              {formatCurrency(item.revenue)}
+                            </td>
+                            <td className='p-3 text-right font-medium text-gray-800'>
+                              {formatCurrency(item.average_price)}
+                            </td>
+                          </tr>
+                        )
+                      })
+
+                      // Category subtotal row
+                      const categoryTotalQty = categoryProducts.reduce(
+                        (sum, item) => sum + (item.quantity_sold || 0),
+                        0
+                      )
+                      const categoryTotalOrders = categoryProducts.reduce(
+                        (sum, item) => sum + (item.order_count || 0),
+                        0
+                      )
+                      const categoryTotalRevenue = categoryProducts.reduce((sum, item) => sum + (item.revenue || 0), 0)
+
+                      rows.push(
+                        <tr
+                          key={`subtotal-${categoryName}`}
+                          className='bg-gray-200 border-b-2 border-gray-400'
+                          style={{ pageBreakInside: 'avoid' }}
+                        >
+                          <td className='p-3 pl-6 font-semibold text-gray-800 border-r border-gray-400'>
+                            Subtotal {categoryName}
+                          </td>
+                          <td className='p-3 text-center font-semibold text-gray-800 border-r border-gray-400'>
+                            {categoryTotalQty}
+                          </td>
+                          <td className='p-3 text-center font-semibold text-gray-800 border-r border-gray-400'>
+                            {categoryTotalOrders}
+                          </td>
+                          <td className='p-3 text-right font-semibold text-gray-800 border-r border-gray-400'>
+                            {formatCurrency(categoryTotalRevenue)}
+                          </td>
+                          <td className='p-3'></td>
+                        </tr>
+                      )
+                    })
+
+                  return rows
+                })()}
+              </tbody>
+              <tfoot>
+                <tr className='text-gray-800 border-t-2 border-gray-300' style={{ pageBreakInside: 'avoid' }}>
+                  <td className='p-3 font-bold border-r border-gray-300'>TOTAL KESELURUHAN</td>
+                  <td className='p-3 text-center font-bold border-r border-gray-300'>
+                    {productSummary.totalQuantitySold ?? 0}
+                  </td>
+                  <td className='p-3 text-center font-bold border-r border-gray-300'>
+                    {productSummary.totalOrders ?? 0}
+                  </td>
+                  <td className='p-3 text-right font-bold border-r border-gray-300'>
+                    {formatCurrency(productSummary.totalRevenue ?? 0)}
+                  </td>
+                  <td className='p-3'></td>
+                </tr>
+              </tfoot>
+            </table>
+          </div>
+        </div>
+        <ReportItemSubheader title='' />
+      </CardContent>
+    </Card>
+  )
+}
+
+export default ReportSalesPerProductContent
@@ -0,0 +1,164 @@
+'use client'
+
+import DateRangePicker from '@/components/RangeDatePicker'
+import { ReportItemHeader, ReportItemSubheader } from '@/components/report/ReportItem'
+import { ExcelExportSalesProductCategoryService } from '@/services/export/excel/ExcelExportSalesProductCategoryService'
+import { PDFExportSalesProductCategoryService } from '@/services/export/pdf/PDFExportSalesProductCategoryService'
+import { useCategoryAnalytics } from '@/services/queries/analytics'
+import { formatCurrency, formatDateDDMMYYYY } from '@/utils/transform'
+import { Button, Card, CardContent, Menu, MenuItem } from '@mui/material'
+import { useState } from 'react'
+
+const ReportSalesProductCategoryContent = () => {
+  const [startDate, setStartDate] = useState<Date | null>(new Date())
+  const [endDate, setEndDate] = useState<Date | null>(new Date())
+  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null)
+
+  const { data: category } = useCategoryAnalytics({
+    date_from: formatDateDDMMYYYY(startDate!),
+    date_to: formatDateDDMMYYYY(endDate!)
+  })
+
+  const categorySummary = {
+    totalRevenue: category?.data?.reduce((sum, item) => sum + (item?.total_revenue || 0), 0) || 0,
+    orderCount: category?.data?.reduce((sum, item) => sum + (item?.order_count || 0), 0) || 0,
+    productCount: category?.data?.reduce((sum, item) => sum + (item?.product_count || 0), 0) || 0,
+    totalQuantity: category?.data?.reduce((sum, item) => sum + (item?.total_quantity || 0), 0) || 0
+  }
+
+  const handleExportClick = (event: React.MouseEvent<HTMLElement>) => {
+    setAnchorEl(event.currentTarget)
+  }
+
+  const handleExportClose = () => {
+    setAnchorEl(null)
+  }
+
+  const handleExportExcel = async () => {
+    if (!category) {
+      console.warn('No data available for export')
+      return
+    }
+
+    try {
+      const result = await ExcelExportSalesProductCategoryService.exportCategorySalesToExcel(
+        category,
+        `Penjualan_Kategori_${formatDateDDMMYYYY(startDate!)}_${formatDateDDMMYYYY(endDate!)}.xlsx`
+      )
+
+      if (result.success) {
+        console.log(`Excel exported successfully: ${result.filename}`)
+      } else {
+        console.error('Export failed:', result.error)
+      }
+    } catch (error) {
+      console.error('Export error:', error)
+    }
+  }
+
+  const handleExportPDF = async () => {
+    if (!category) {
+      console.warn('No data available for export')
+      return
+    }
+
+    try {
+      const result = await PDFExportSalesProductCategoryService.exportCategorySalesToPDF(
+        category,
+        `Laporan_Penjualan_Kategori_${formatDateDDMMYYYY(startDate!)}_${formatDateDDMMYYYY(endDate!)}.pdf`
+      )
+
+      if (result.success) {
+        console.log(`PDF exported successfully: ${result.filename}`)
+      } else {
+        console.error('Export failed:', result.error)
+      }
+    } catch (error) {
+      console.error('Export error:', error)
+    }
+  }
+
+  return (
+    <Card>
+      <div className='p-6 border-be'>
+        <div className='flex items-center justify-end gap-2'>
+          <Button
+            color='secondary'
+            variant='tonal'
+            startIcon={<i className='tabler-upload' />}
+            endIcon={<i className='tabler-chevron-down' />}
+            className='max-sm:is-full'
+            onClick={handleExportClick}
+          >
+            Ekspor
+          </Button>
+          <Menu anchorEl={anchorEl} open={Boolean(anchorEl)} onClose={handleExportClose}>
+            <MenuItem
+              onClick={() => {
+                handleExportExcel()
+                handleExportClose()
+              }}
+            >
+              Export Excel
+            </MenuItem>
+            <MenuItem
+              onClick={() => {
+                handleExportPDF()
+                handleExportClose()
+              }}
+            >
+              Export PDF
+            </MenuItem>
+          </Menu>
+          <DateRangePicker
+            startDate={startDate}
+            endDate={endDate}
+            onStartDateChange={setStartDate}
+            onEndDateChange={setEndDate}
+          />
+        </div>
+      </div>
+      <CardContent>
+        <ReportItemHeader
+          title='Ringkasan Kategori'
+          date={`${category?.date_from.split('T')[0]} - ${category?.date_to.split('T')[0]}`}
+        />
+        <div className='bg-gray-50 border border-gray-200 overflow-hidden'>
+          <table className='w-full'>
+            <thead>
+              <tr className='text-gray-800 border-b-2 border-gray-300'>
+                <th className='text-left p-3 font-semibold'>Nama</th>
+                <th className='text-center p-3 font-semibold'>Total Produk</th>
+                <th className='text-center p-3 font-semibold'>Qty</th>
+                <th className='text-right p-3 font-semibold'>Pendapatan</th>
+              </tr>
+            </thead>
+            <tbody>
+              {category?.data?.map((c, index) => (
+                <tr key={index} className={index % 2 === 0 ? 'bg-white' : 'bg-gray-50'}>
+                  <td className='p-3 font-medium text-gray-800'>{c.category_name}</td>
+                  <td className='p-3 text-center text-gray-700'>{c.product_count}</td>
+                  <td className='p-3 text-center text-gray-700'>{c.total_quantity}</td>
+                  <td className='p-3 text-right font-semibold' style={{ color: '#36175e' }}>
+                    {formatCurrency(c.total_revenue)}
+                  </td>
+                </tr>
+              )) || []}
+            </tbody>
+            <tfoot>
+              <tr className='text-gray-800 border-t-2 border-gray-300'>
+                <td className='p-3 font-bold'>TOTAL</td>
+                <td className='p-3 text-center font-bold'>{categorySummary?.productCount ?? 0}</td>
+                <td className='p-3 text-center font-bold'>{categorySummary?.totalQuantity ?? 0}</td>
+                <td className='p-3 text-right font-bold'>{formatCurrency(categorySummary?.totalRevenue ?? 0)}</td>
+              </tr>
+            </tfoot>
+          </table>
+        </div>
+        <ReportItemSubheader title='' />
+      </CardContent>
+    </Card>
+  )
+}
+
+export default ReportSalesProductCategoryContent
@@ -0,0 +1,442 @@
+'use client'
+
+import DateRangePicker from '@/components/RangeDatePicker'
+import { ReportItem, ReportItemFooter, ReportItemHeader, ReportItemSubheader } from '@/components/report/ReportItem'
+import { ExcelExportSalesService } from '@/services/export/excel/ExcelExportSalesService'
+import { PDFExportSalesService } from '@/services/export/pdf/PDFExportSalesService'
+import {
+  useCategoryAnalytics,
+  usePaymentAnalytics,
+  useProductSalesAnalytics,
+  useProfitLossAnalytics
+} from '@/services/queries/analytics'
+import { formatCurrency, formatDateDDMMYYYY } from '@/utils/transform'
+import { Button, Card, CardContent, Menu, MenuItem, Paper } from '@mui/material'
+import { useState } from 'react'
+
+const ReportSalesContent = () => {
+  const [startDate, setStartDate] = useState<Date | null>(new Date())
+  const [endDate, setEndDate] = useState<Date | null>(new Date())
+  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null)
+
+  const { data: profitLoss } = useProfitLossAnalytics({
+    date_from: formatDateDDMMYYYY(startDate!),
+    date_to: formatDateDDMMYYYY(endDate!)
+  })
+
+  const { data: paymentAnalytics } = usePaymentAnalytics({
+    date_from: formatDateDDMMYYYY(startDate!),
+    date_to: formatDateDDMMYYYY(endDate!)
+  })
+
+  const { data: category } = useCategoryAnalytics({
+    date_from: formatDateDDMMYYYY(startDate!),
+    date_to: formatDateDDMMYYYY(endDate!)
+  })
+
+  const { data: products } = useProductSalesAnalytics({
+    date_from: formatDateDDMMYYYY(startDate!),
+    date_to: formatDateDDMMYYYY(endDate!)
+  })
+
+  const categorySummary = {
+    totalRevenue: category?.data?.reduce((sum, item) => sum + (item?.total_revenue || 0), 0) || 0,
+    orderCount: category?.data?.reduce((sum, item) => sum + (item?.order_count || 0), 0) || 0,
+    productCount: category?.data?.reduce((sum, item) => sum + (item?.product_count || 0), 0) || 0,
+    totalQuantity: category?.data?.reduce((sum, item) => sum + (item?.total_quantity || 0), 0) || 0
+  }
+
+  const productSummary = {
+    totalQuantitySold: products?.data?.reduce((sum, item) => sum + (item?.quantity_sold || 0), 0) || 0,
+    totalRevenue: products?.data?.reduce((sum, item) => sum + (item?.revenue || 0), 0) || 0,
+    totalOrders: products?.data?.reduce((sum, item) => sum + (item?.order_count || 0), 0) || 0
+  }
+
+  const handleExportPDF = async () => {
+    try {
+      const salesData = {
+        profitLoss: profitLoss!,
+        paymentAnalytics: paymentAnalytics!,
+        categoryAnalytics: category!,
+        productAnalytics: products!
+      }
+
+      const result = await PDFExportSalesService.exportSalesReportToPDF(salesData)
+
+      if (result.success) {
+        console.log('PDF export successful:', result.filename)
+        // Optional: Show success notification
+      } else {
+        console.error('PDF export failed:', result.error)
+        alert('Export PDF gagal. Silakan coba lagi.')
+      }
+    } catch (error) {
+      console.error('PDF export error:', error)
+      alert('Terjadi kesalahan saat export PDF.')
+    }
+  }
+
+  const handleExportExcel = async () => {
+    try {
+      const salesData = {
+        profitLoss: profitLoss!,
+        paymentAnalytics: paymentAnalytics!,
+        categoryAnalytics: category!,
+        productAnalytics: products!
+      }
+
+      const result = await ExcelExportSalesService.exportSalesReportToExcel(salesData)
+
+      if (result.success) {
+        console.log('Excel export successful:', result.filename)
+        // Optional: Show success notification
+      } else {
+        console.error('Excel export failed:', result.error)
+        alert('Export Excel gagal. Silakan coba lagi.')
+      }
+    } catch (error) {
+      console.error('Excel export error:', error)
+      alert('Terjadi kesalahan saat export Excel.')
+    }
+  }
+
+  const handleExportClick = (event: React.MouseEvent<HTMLElement>) => {
+    setAnchorEl(event.currentTarget)
+  }
+
+  const handleExportClose = () => {
+    setAnchorEl(null)
+  }
+
+  return (
+    <Card>
+      <div className='p-6 border-be'>
+        <div className='flex items-center justify-end gap-2'>
+          <Button
+            color='secondary'
+            variant='tonal'
+            startIcon={<i className='tabler-upload' />}
+            endIcon={<i className='tabler-chevron-down' />}
+            className='max-sm:is-full'
+            onClick={handleExportClick}
+          >
+            Ekspor
+          </Button>
+          <Menu anchorEl={anchorEl} open={Boolean(anchorEl)} onClose={handleExportClose}>
+            <MenuItem
+              onClick={() => {
+                handleExportExcel()
+                handleExportClose()
+              }}
+            >
+              Export Excel
+            </MenuItem>
+            <MenuItem
+              onClick={() => {
+                handleExportPDF()
+                handleExportClose()
+              }}
+            >
+              Export PDF
+            </MenuItem>
+          </Menu>
+          <DateRangePicker
+            startDate={startDate}
+            endDate={endDate}
+            onStartDateChange={setStartDate}
+            onEndDateChange={setEndDate}
+          />
+        </div>
+      </div>
+      <CardContent>
+        <ReportItemHeader
+          title='Ringkasan'
+          date={`${profitLoss?.date_from.split('T')[0]} - ${profitLoss?.date_to.split('T')[0]}`}
+        />
+        <ReportItem
+          accountCode=''
+          accountName='Total Penjualan'
+          amount={profitLoss?.summary.total_revenue ?? 0}
+          onClick={() => {}}
+        />
+        <ReportItem
+          accountCode=''
+          accountName='Total Diskon'
+          amount={profitLoss?.summary.total_discount ?? 0}
+          onClick={() => {}}
+        />
+        <ReportItem
+          accountCode=''
+          accountName='Total Pajak'
+          amount={profitLoss?.summary.total_tax ?? 0}
+          onClick={() => {}}
+        />
+        <ReportItemFooter title='Total' amount={profitLoss?.summary.total_revenue ?? 0} />
+        <ReportItemSubheader title='' />
+        <ReportItemHeader
+          title='Invoice'
+          date={`${profitLoss?.date_from.split('T')[0]} - ${profitLoss?.date_to.split('T')[0]}`}
+        />
+        <ReportItem
+          accountCode=''
+          accountName='Total Invoice'
+          amount={profitLoss?.summary.total_orders ?? 0}
+          onClick={() => {}}
+        />
+        <ReportItem
+          accountCode=''
+          accountName='Rata-rata Tagihan per Invoice'
+          amount={profitLoss?.summary.average_profit ?? 0}
+          onClick={() => {}}
+        />
+        <ReportItemSubheader title='' />
+        <ReportItemHeader
+          title='Ringkasan Metode Pembayaran'
+          date={`${profitLoss?.date_from.split('T')[0]} - ${profitLoss?.date_to.split('T')[0]}`}
+        />
+        <div className='bg-gray-50 border border-gray-200 overflow-hidden'>
+          <table className='w-full'>
+            <thead>
+              <tr className='text-gray-800 border-b-2 border-gray-300'>
+                <th className='text-left p-3 font-semibold'>Metode Pembayaran</th>
+                <th className='text-center p-3 font-semibold'>Tipe</th>
+                <th className='text-center p-3 font-semibold'>Jumlah Order</th>
+                <th className='text-right p-3 font-semibold'>Total Amount</th>
+                <th className='text-center p-3 font-semibold'>Persentase</th>
+              </tr>
+            </thead>
+            <tbody>
+              {paymentAnalytics?.data?.map((payment, index) => (
+                <tr key={index} className={index % 2 === 0 ? 'bg-white' : 'bg-gray-50'}>
+                  <td className='p-3 font-medium text-gray-800'>{payment.payment_method_name}</td>
+                  <td className='p-3 text-center'>
+                    <span
+                      className={`px-2 py-1 rounded-full text-xs font-medium ${
+                        payment.payment_method_type === 'cash'
+                          ? 'bg-green-100 text-green-800'
+                          : 'bg-blue-100 text-blue-800'
+                      }`}
+                    >
+                      {payment.payment_method_type.toUpperCase()}
+                    </span>
+                  </td>
+                  <td className='p-3 text-center text-gray-700'>{payment.order_count}</td>
+                  <td className='p-3 text-right font-semibold text-gray-800'>{formatCurrency(payment.total_amount)}</td>
+                  <td className='p-3 text-center font-medium' style={{ color: '#36175e' }}>
+                    {(payment.percentage ?? 0).toFixed(1)}%
+                  </td>
+                </tr>
+              )) || []}
+            </tbody>
+            <tfoot>
+              <tr className='text-gray-800 border-t-2 border-gray-300'>
+                <td className='p-3 font-bold'>TOTAL</td>
+                <td className='p-3'></td>
+                <td className='p-3 text-center font-bold'>{paymentAnalytics?.summary.total_orders ?? 0}</td>
+                <td className='p-3 text-right font-bold'>
+                  {formatCurrency(paymentAnalytics?.summary.total_amount ?? 0)}
+                </td>
+                <td className='p-3 text-center font-bold'></td>
+              </tr>
+            </tfoot>
+          </table>
+        </div>
+        <ReportItemSubheader title='' />
+        <ReportItemHeader
+          title='Ringkasan Kategori'
+          date={`${profitLoss?.date_from.split('T')[0]} - ${profitLoss?.date_to.split('T')[0]}`}
+        />
+        <div className='bg-gray-50 border border-gray-200 overflow-hidden'>
+          <table className='w-full'>
+            <thead>
+              <tr className='text-gray-800 border-b-2 border-gray-300'>
+                <th className='text-left p-3 font-semibold'>Nama</th>
+                <th className='text-center p-3 font-semibold'>Total Produk</th>
+                <th className='text-center p-3 font-semibold'>Qty</th>
+                <th className='text-right p-3 font-semibold'>Pendapatan</th>
+              </tr>
+            </thead>
+            <tbody>
+              {category?.data?.map((c, index) => (
+                <tr key={index} className={index % 2 === 0 ? 'bg-white' : 'bg-gray-50'}>
+                  <td className='p-3 font-medium text-gray-800'>{c.category_name}</td>
+                  <td className='p-3 text-center text-gray-700'>{c.product_count}</td>
+                  <td className='p-3 text-center text-gray-700'>{c.total_quantity}</td>
+                  <td className='p-3 text-right font-semibold' style={{ color: '#36175e' }}>
+                    {formatCurrency(c.total_revenue)}
+                  </td>
+                </tr>
+              )) || []}
+            </tbody>
+            <tfoot>
+              <tr className='text-gray-800 border-t-2 border-gray-300'>
+                <td className='p-3 font-bold'>TOTAL</td>
+                <td className='p-3 text-center font-bold'>{categorySummary?.productCount ?? 0}</td>
+                <td className='p-3 text-center font-bold'>{categorySummary?.totalQuantity ?? 0}</td>
+                <td className='p-3 text-right font-bold'>{formatCurrency(categorySummary?.totalRevenue ?? 0)}</td>
+              </tr>
+            </tfoot>
+          </table>
+        </div>
+        <ReportItemSubheader title='' />
+        <ReportItemHeader
+          title='Ringkasan Item'
+          date={`${profitLoss?.date_from.split('T')[0]} - ${profitLoss?.date_to.split('T')[0]}`}
+        />
+        <div className='bg-gray-50  border border-gray-200 overflow-visible'>
+          <div className='overflow-x-auto'>
+            <table className='w-full table-fixed' style={{ minWidth: '100%' }}>
+              <colgroup>
+                <col style={{ width: '40%' }} />
+                <col style={{ width: '15%' }} />
+                <col style={{ width: '15%' }} />
+                <col style={{ width: '15%' }} />
+                <col style={{ width: '15%' }} />
+              </colgroup>
+              <thead>
+                <tr className='text-gray-800 border-b-2 border-gray-300'>
+                  <th className='text-left p-3 font-semibold border-r border-gray-300'>Produk</th>
+                  <th className='text-center p-3 font-semibold border-r border-gray-300'>Qty</th>
+                  <th className='text-center p-3 font-semibold border-r border-gray-300'>Order</th>
+                  <th className='text-right p-3 font-semibold border-r border-gray-300'>Pendapatan</th>
+                  <th className='text-right p-3 font-semibold'>Rata Rata</th>
+                </tr>
+              </thead>
+              <tbody>
+                {(() => {
+                  // Group products by category
+                  const groupedProducts =
+                    products?.data?.reduce(
+                      (acc, item) => {
+                        const categoryName = item.category_name || 'Tidak Berkategori'
+                        if (!acc[categoryName]) {
+                          acc[categoryName] = []
+                        }
+                        acc[categoryName].push(item)
+                        return acc
+                      },
+                      {} as Record<string, any[]>
+                    ) || {}
+
+                  const rows: JSX.Element[] = []
+                  let globalIndex = 0
+
+                  // Sort categories alphabetically
+                  Object.keys(groupedProducts)
+                    .sort()
+                    .forEach(categoryName => {
+                      const categoryProducts = groupedProducts[categoryName]
+
+                      // Category header row
+                      rows.push(
+                        <tr
+                          key={`category-${categoryName}`}
+                          className='bg-gray-100 border-b border-gray-300'
+                          style={{ pageBreakInside: 'avoid' }}
+                        >
+                          <td
+                            className='p-3 font-bold text-gray-900 border-r border-gray-300'
+                            style={{ color: '#36175e' }}
+                          >
+                            {categoryName.toUpperCase()}
+                          </td>
+                          <td className='p-3 border-r border-gray-300'></td>
+                          <td className='p-3 border-r border-gray-300'></td>
+                          <td className='p-3 border-r border-gray-300'></td>
+                          <td className='p-3'></td>
+                        </tr>
+                      )
+
+                      // Product rows for this category
+                      categoryProducts.forEach((item, index) => {
+                        globalIndex++
+                        rows.push(
+                          <tr
+                            key={`product-${item.product_name}-${index}`}
+                            className={`${globalIndex % 2 === 0 ? 'bg-white' : 'bg-gray-50'} border-b border-gray-200`}
+                            style={{ pageBreakInside: 'avoid' }}
+                          >
+                            <td
+                              className='p-3 pl-6 font-medium text-gray-800 border-r border-gray-200'
+                              style={{ wordWrap: 'break-word' }}
+                            >
+                              {item.product_name}
+                            </td>
+                            <td className='p-3 text-center text-gray-700 border-r border-gray-200'>
+                              {item.quantity_sold}
+                            </td>
+                            <td className='p-3 text-center text-gray-700 border-r border-gray-200'>
+                              {item.order_count ?? 0}
+                            </td>
+                            <td className='p-3 text-right font-semibold text-gray-800 border-r border-gray-200'>
+                              {formatCurrency(item.revenue)}
+                            </td>
+                            <td className='p-3 text-right font-medium text-gray-800'>
+                              {formatCurrency(item.average_price)}
+                            </td>
+                          </tr>
+                        )
+                      })
+
+                      // Category subtotal row
+                      const categoryTotalQty = categoryProducts.reduce(
+                        (sum, item) => sum + (item.quantity_sold || 0),
+                        0
+                      )
+                      const categoryTotalOrders = categoryProducts.reduce(
+                        (sum, item) => sum + (item.order_count || 0),
+                        0
+                      )
+                      const categoryTotalRevenue = categoryProducts.reduce((sum, item) => sum + (item.revenue || 0), 0)
+
+                      rows.push(
+                        <tr
+                          key={`subtotal-${categoryName}`}
+                          className='bg-gray-200 border-b-2 border-gray-400'
+                          style={{ pageBreakInside: 'avoid' }}
+                        >
+                          <td className='p-3 pl-6 font-semibold text-gray-800 border-r border-gray-400'>
+                            Subtotal {categoryName}
+                          </td>
+                          <td className='p-3 text-center font-semibold text-gray-800 border-r border-gray-400'>
+                            {categoryTotalQty}
+                          </td>
+                          <td className='p-3 text-center font-semibold text-gray-800 border-r border-gray-400'>
+                            {categoryTotalOrders}
+                          </td>
+                          <td className='p-3 text-right font-semibold text-gray-800 border-r border-gray-400'>
+                            {formatCurrency(categoryTotalRevenue)}
+                          </td>
+                          <td className='p-3'></td>
+                        </tr>
+                      )
+                    })
+
+                  return rows
+                })()}
+              </tbody>
+              <tfoot>
+                <tr className='text-gray-800 border-t-2 border-gray-300' style={{ pageBreakInside: 'avoid' }}>
+                  <td className='p-3 font-bold border-r border-gray-300'>TOTAL KESELURUHAN</td>
+                  <td className='p-3 text-center font-bold border-r border-gray-300'>
+                    {productSummary.totalQuantitySold ?? 0}
+                  </td>
+                  <td className='p-3 text-center font-bold border-r border-gray-300'>
+                    {productSummary.totalOrders ?? 0}
+                  </td>
+                  <td className='p-3 text-right font-bold border-r border-gray-300'>
+                    {formatCurrency(productSummary.totalRevenue ?? 0)}
+                  </td>
+                  <td className='p-3'></td>
+                </tr>
+              </tfoot>
+            </table>
+          </div>
+        </div>
+        <ReportItemSubheader title='' />
+      </CardContent>
+    </Card>
+  )
+}
+
+export default ReportSalesContent
@@ -87,8 +87,7 @@ interface ReportGeneratorProps {

 // Custom styled components yang responsif terhadap theme
 const StyledCard = styled(Card)(({ theme }) => ({
-  maxWidth: '1024px',
-  margin: '0 auto 24px',
+  margin: '0 0 24px',
  boxShadow: theme.palette.mode === 'dark' ? '0 2px 10px rgba(20, 21, 33, 0.3)' : '0 2px 10px rgba(58, 53, 65, 0.1)',
  borderRadius: '8px',
  backgroundColor: theme.palette.mode === 'dark' ? theme.palette.background.paper : '#ffffff'
@@ -7,9 +7,6 @@ import type { FC } from 'react'
 import { Box, Typography, Divider } from '@mui/material'
 import { useTheme } from '@mui/material/styles'

-// Component Imports
-import Logo from '@core/svg/Logo'
-
 // Type Imports
 import type { Outlet } from '@/types/services/outlet'

@@ -39,75 +36,28 @@ const ReportHeader: FC<ReportHeaderProps> = ({
  return (
    <Box className={className}>
      <Box sx={{ p: theme.spacing(8, 8, 6) }}>
-        <Box sx={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between' }}>
-          {/* Left Section - Brand & Outlet Info */}
-          <Box sx={{ display: 'flex', alignItems: 'center', gap: 4 }}>
-            <Logo />
-            <Box>
-              <Typography
-                variant='h3'
-                component='h1'
-                sx={{
-                  fontWeight: 700,
-                  color: brandColor || theme.palette.primary.main
-                }}
-              >
-                {brandName}
-              </Typography>
-              {outlet?.name && (
-                <Typography
-                  variant='h5'
-                  component='h2'
-                  sx={{
-                    fontWeight: 600,
-                    mt: 1,
-                    color: theme.palette.text.primary
-                  }}
-                >
-                  {outlet.name}
-                </Typography>
-              )}
-              {outlet?.address && (
-                <Typography
-                  variant='body2'
-                  sx={{
-                    mt: 1,
-                    color: theme.palette.text.secondary
-                  }}
-                >
-                  {outlet.address}
-                </Typography>
-              )}
-            </Box>
-          </Box>
-
-          {/* Right Section - Report Info */}
-          <Box sx={{ textAlign: 'right' }}>
+        <Box sx={{ textAlign: 'center' }}>
+          <Typography
+            variant='h4'
+            component='h3'
+            sx={{
+              fontWeight: 700,
+              color: '#222222'
+            }}
+          >
+            {reportTitle}
+          </Typography>
+          {periode && (
            <Typography
-              variant='h4'
-              component='h3'
+              variant='body2'
              sx={{
-                fontWeight: 700,
-                color: theme.palette.text.primary
+                color: '#222222',
+                mt: 2
              }}
            >
-              {reportTitle}
+              {periode}
            </Typography>
-            {periode && (
-              <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'flex-end', gap: 2, mt: 2 }}>
-                <Typography variant='body2' sx={{ color: theme.palette.text.secondary }}>
-                  {periode}
-                </Typography>
-              </Box>
-            )}
-            {reportSubtitle && (
-              <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'flex-end', gap: 2, mt: 2 }}>
-                <Typography variant='body2' sx={{ color: theme.palette.text.secondary }}>
-                  {reportSubtitle}
-                </Typography>
-              </Box>
-            )}
-          </Box>
+          )}
        </Box>
      </Box>
      <Divider
@@ -19,22 +19,25 @@ const PaymentMethodReport = ({ payments }: { payments: PaymentDataItem[] }) => {
          <h2 className='text-xl font-semibold text-gray-900'>Payment Methods</h2>
        </div>
        <div className='space-y-6'>
-          {payments && payments.map(method => (
-            <div key={method.payment_method_id} className='border-b border-gray-200 pb-4 last:border-b-0'>
-              <div className='flex justify-between items-center mb-2'>
-                <span className='text-sm font-medium text-gray-900'>{method.payment_method_name}</span>
-                <span className='text-sm text-gray-600'>{method.percentage.toFixed(1)}%</span>
+          {payments &&
+            payments.map(method => (
+              <div key={method.payment_method_id} className='border-b border-gray-200 pb-4 last:border-b-0'>
+                <div className='flex justify-between items-center mb-2'>
+                  <span className='text-sm font-medium text-gray-900' translate='no'>
+                    {method.payment_method_name}
+                  </span>
+                  <span className='text-sm text-gray-600'>{method.percentage.toFixed(1)}%</span>
+                </div>
+                <ProgressBar
+                  percentage={method.percentage}
+                  color={method.payment_method_type === 'cash' ? 'bg-green-500' : 'bg-blue-500'}
+                />
+                <div className='flex justify-between items-center mt-2 text-xs text-gray-600'>
+                  <span>{formatCurrency(method.total_amount)}</span>
+                  <span>{method.order_count} orders</span>
+                </div>
              </div>
-              <ProgressBar
-                percentage={method.percentage}
-                color={method.payment_method_type === 'cash' ? 'bg-green-500' : 'bg-blue-500'}
-              />
-              <div className='flex justify-between items-center mt-2 text-xs text-gray-600'>
-                <span>{formatCurrency(method.total_amount)}</span>
-                <span>{method.order_count} orders</span>
-              </div>
-            </div>
-          ))}
+            ))}
        </div>
      </div>
    </div>
Author	SHA1	Message	Date
efrilm	bf0f4cfa38	Update Login	2025-09-26 13:47:50 +07:00
efrilm	82e79463b5	Report Sales Order	2025-09-26 13:47:04 +07:00
efrilm	c3ad938a79	Report Sales Product Category	2025-09-26 13:39:18 +07:00
efrilm	69c49238d4	Report Sales Per Product	2025-09-26 13:29:17 +07:00
efrilm	191937e647	Export Excel Sales	2025-09-26 13:11:26 +07:00
efrilm	ce9120e7e6	PDF Export Payment Method	2025-09-26 13:02:36 +07:00
efrilm	52879b58fe	Excel Report Payment Method	2025-09-26 12:56:15 +07:00
efrilm	a7b6e15818	login template	2025-09-26 12:47:43 +07:00
efrilm	8ac6ff6d14	Pdf Sales	2025-09-26 00:50:44 +07:00
efrilm	0dc6e967bb	Sales Order Report	2025-09-26 00:04:35 +07:00
efrilm	daa3c4e9a2	Payment Method Report	2025-09-25 23:45:49 +07:00
efrilm	27ddd137eb	report sales product category	2025-09-25 23:11:49 +07:00
efrilm	073f3dd89c	Sales Per Product Report	2025-09-25 23:05:26 +07:00
efrilm	07c0bdb3af	Sales Report PDF	2025-09-25 22:52:09 +07:00
efrilm	e6bcf287ea	profit loss pdf	2025-09-25 19:35:22 +07:00
efrilm	d317e8d06f	update purchase order	2025-09-25 16:20:13 +07:00
efrilm	dc32c8553b	Report Profit Loss	2025-09-25 15:45:49 +07:00
efrilm	79cd4f9dcb	Profit Loss Report	2025-09-25 14:59:08 +07:00
efrilm	cfa3686de3	report margin	2025-09-25 13:08:31 +07:00
efrilm	c7d29f4041	Shortcuts	2025-09-25 11:53:08 +07:00
efrilm	1b9908e882	update report	2025-09-23 22:27:58 +07:00
efrilm	d245074904	no translate for payment method	2025-09-23 20:54:43 +07:00
efrilm	256f035997	fix: report page	2025-09-23 15:30:42 +07:00
efrilm	726d1f4984	base url	2025-09-21 20:36:36 +07:00
efrilm	9b92f4742f	add printer type	2025-09-20 18:03:11 +07:00
efrilm	1bf2bad52c	campaign detail	2025-09-19 17:38:48 +07:00
efrilm	e55357e305	add campaign	2025-09-19 16:10:52 +07:00
efrilm	3bfd0b9e19	api	2025-09-18 16:31:58 +07:00
efrilm	97ed613cc6	api	2025-09-18 11:00:00 +07:00