diff --git a/src/app/[lang]/(dashboard)/(private)/apps/report/sales/sales-product-category/page.tsx b/src/app/[lang]/(dashboard)/(private)/apps/report/sales/sales-product-category/page.tsx
new file mode 100644
index 0000000..47f0e0c
--- /dev/null
+++ b/src/app/[lang]/(dashboard)/(private)/apps/report/sales/sales-product-category/page.tsx
@@ -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
diff --git a/src/views/apps/report/ReportSalesList.tsx b/src/views/apps/report/ReportSalesList.tsx
index aab3e7b..1c809f1 100644
--- a/src/views/apps/report/ReportSalesList.tsx
+++ b/src/views/apps/report/ReportSalesList.tsx
@@ -30,13 +30,13 @@ const ReportSalesList: React.FC = () => {
       title: 'Penjualan per Produk',
       iconClass: 'tabler-receipt-2',
       link: getLocalizedUrl(`/apps/report/sales/sales-product`, locale as Locale)
+    },
+    {
+      title: 'Penjualan per Kategori Produk',
+      iconClass: 'tabler-receipt-2',
+      link: getLocalizedUrl(`/apps/report/sales/sales-product-category`, locale as Locale)
     }
     // {
-    //   title: 'Penjualan per Kategori Produk',
-    //   iconClass: 'tabler-receipt-2',
-    //   link: ''
-    // },
-    // {
     //   title: 'Penjualan Produk per Pelanggan',
     //   iconClass: 'tabler-receipt-2',
     //   link: ''
diff --git a/src/views/apps/report/sales/sales-product-category/ReportSalesProductCategoryReport.tsx b/src/views/apps/report/sales/sales-product-category/ReportSalesProductCategoryReport.tsx
new file mode 100644
index 0000000..4fe9f43
--- /dev/null
+++ b/src/views/apps/report/sales/sales-product-category/ReportSalesProductCategoryReport.tsx
@@ -0,0 +1,90 @@
+'use client'
+
+import DateRangePicker from '@/components/RangeDatePicker'
+import { ReportItemHeader, ReportItemSubheader } from '@/components/report/ReportItem'
+import { useCategoryAnalytics } from '@/services/queries/analytics'
+import { formatCurrency, formatDateDDMMYYYY } from '@/utils/transform'
+import { Button, Card, CardContent } 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 { 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
+  }
+
+  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' />}
+            className='max-sm:is-full'
+            // onClick={handleExportPDF}
+          >
+            Ekspor
+          </Button>
+          <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