feat: add categories at daily report

src/app/[lang]/(dashboard)/(private)/dashboards/daily-report/page.tsx

@@ -4,7 +4,8 @@ import {
   useProductSalesAnalytics,
   useProfitLossAnalytics,
   useSalesAnalytics,
-  usePaymentAnalytics
+  usePaymentAnalytics,
+  useCategoryAnalytics
 } from '@/services/queries/analytics'
 import { useOutletById } from '@/services/queries/outlets'
 import { formatCurrency, formatDate, formatDateDDMMYYYY, formatDatetime } from '@/utils/transform'
@@ -45,6 +46,7 @@ const DailyPOSReport = () => {
   const { data: profitLoss } = useProfitLossAnalytics(dateParams)
   const { data: products } = useProductSalesAnalytics(dateParams)
   const { data: paymentAnalytics } = usePaymentAnalytics(dateParams)
+  const { data: category } = useCategoryAnalytics(dateParams)
 
   const productSummary = {
     totalQuantitySold: products?.data?.reduce((sum, item) => sum + (item?.quantity_sold || 0), 0) || 0,
@@ -60,6 +62,13 @@ const DailyPOSReport = () => {
     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,
+    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
+  }
+
   useEffect(() => {
     setNow(new Date())
   }, [])
@@ -199,13 +208,13 @@ const DailyPOSReport = () => {
         {/* Performance Summary */}
         <div className='p-8'>
           <h3 className='text-xl font-bold mb-6' style={{ color: '#36175e' }}>
-            1. Ringkasan Kinerja
+            1. 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='text-gray-700'>Total Penjualan (termasuk rasik)</span>
                 <span className='font-semibold text-gray-800'>
                   {formatCurrency(profitLoss?.summary.total_revenue ?? 0)}
                 </span>
@@ -359,7 +368,50 @@ const DailyPOSReport = () => {
                   <td className='p-3 text-right font-bold'>
                     {formatCurrency(paymentAnalytics?.summary.total_amount ?? 0)}
                   </td>
-                  <td className='p-3 text-center font-bold'>100.0%</td>
+                  <td className='p-3 text-center font-bold'></td>
+                </tr>
+              </tfoot>
+            </table>
+          </div>
+        </div>
+
+        {/* Category Summary */}
+        <div className='px-8 pb-8'>
+          <h3 className='text-xl font-bold mb-6' style={{ color: '#36175e' }}>
+            2. 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'>
+                  <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>
+                </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-center  text-gray-700'>{c.order_count}</td>
+                    <td className='p-3 text-right font-semibold' style={{ color: '#36175e' }}>
+                      {formatCurrency(c.total_revenue)}
+                    </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'>{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>
             </table>
@@ -369,7 +421,7 @@ const DailyPOSReport = () => {
         {/* Transaction Summary */}
         <div className='px-8 pb-8'>
           <h3 className='text-xl font-bold mb-6' style={{ color: '#36175e' }}>
-            3. Ringkasan Transaksi
+            4. Ringkasan Item
           </h3>
 
           <div className='bg-gray-50 rounded-lg border border-gray-200 overflow-hidden'>

src/services/queries/analytics.ts

@@ -1,5 +1,12 @@
 import { useQuery } from '@tanstack/react-query'
-import { DashboardReport, PaymentReport, ProductSalesReport, ProfitLossReport, SalesReport } from '../../types/services/analytic'
+import {
+  CategoryReport,
+  DashboardReport,
+  PaymentReport,
+  ProductSalesReport,
+  ProfitLossReport,
+  SalesReport
+} from '../../types/services/analytic'
 import { api } from '../api'
 import { formatDateDDMMYYYY } from '../../utils/transform'
 
@@ -157,3 +164,33 @@ export function useProfitLossAnalytics(params: AnalyticQueryParams = {}) {
     }
   })
 }
+
+export function useCategoryAnalytics(params: AnalyticQueryParams = {}) {
+  const today = new Date()
+  const monthAgo = new Date()
+  monthAgo.setDate(today.getDate() - 30)
+
+  const defaultDateTo = formatDateDDMMYYYY(today)
+  const defaultDateFrom = formatDateDDMMYYYY(monthAgo)
+
+  const { date_from = defaultDateFrom, date_to = defaultDateTo, ...filters } = params
+
+  return useQuery<CategoryReport>({
+    queryKey: ['analytics-categories', { date_from, date_to, ...filters }],
+    queryFn: async () => {
+      const queryParams = new URLSearchParams()
+
+      queryParams.append('date_from', date_from)
+      queryParams.append('date_to', date_to)
+
+      Object.entries(filters).forEach(([key, value]) => {
+        if (value !== undefined && value !== null && value !== '') {
+          queryParams.append(key, value.toString())
+        }
+      })
+
+      const res = await api.get(`/analytics/categories?${queryParams.toString()}`)
+      return res.data.data
+    }
+  })
+}

src/types/services/analytic.ts

@@ -1,31 +1,31 @@
 export interface SalesSummary {
-  total_sales: number;
+  total_sales: number
-  total_orders: number;
+  total_orders: number
-  total_items: number;
+  total_items: number
-  average_order_value: number;
+  average_order_value: number
-  total_tax: number;
+  total_tax: number
-  total_discount: number;
+  total_discount: number
-  net_sales: number;
+  net_sales: number
 }
 
 export interface SalesDataItem {
-  date: string; // ISO string, e.g., "2025-08-03T00:00:00Z"
+  date: string // ISO string, e.g., "2025-08-03T00:00:00Z"
-  sales: number;
+  sales: number
-  orders: number;
+  orders: number
-  items: number;
+  items: number
-  tax: number;
+  tax: number
-  discount: number;
+  discount: number
-  net_sales: number;
+  net_sales: number
 }
 
 export interface SalesReport {
-  organization_id: string;
+  organization_id: string
-  outlet_id: string;
+  outlet_id: string
-  date_from: string; // ISO string with timezone, e.g., "2025-08-01T00:00:00+07:00"
+  date_from: string // ISO string with timezone, e.g., "2025-08-01T00:00:00+07:00"
-  date_to: string;   // ISO string with timezone
+  date_to: string // ISO string with timezone
-  group_by: string;  // e.g., "day", "month", etc.
+  group_by: string // e.g., "day", "month", etc.
-  summary: SalesSummary;
+  summary: SalesSummary
-  data: SalesDataItem[];
+  data: SalesDataItem[]
 }
 
 export interface ProductData {
@@ -105,53 +105,70 @@ export type DashboardReport = {
 }
 
 export interface ProfitLossReport {
-  organization_id: string;
+  organization_id: string
-  date_from: string; // ISO date string with timezone
+  date_from: string // ISO date string with timezone
-  date_to: string;   // ISO date string with timezone
+  date_to: string // ISO date string with timezone
-  group_by: string;
+  group_by: string
-  summary: Summary;
+  summary: Summary
-  data: DailyData[];
+  data: DailyData[]
-  product_data: ProductDataReport[];
+  product_data: ProductDataReport[]
 }
 
 export interface Summary {
-  total_revenue: number;
+  total_revenue: number
-  total_cost: number;
+  total_cost: number
-  gross_profit: number;
+  gross_profit: number
-  gross_profit_margin: number;
+  gross_profit_margin: number
-  total_tax: number;
+  total_tax: number
-  total_discount: number;
+  total_discount: number
-  net_profit: number;
+  net_profit: number
-  net_profit_margin: number;
+  net_profit_margin: number
-  total_orders: number;
+  total_orders: number
-  average_profit: number;
+  average_profit: number
-  profitability_ratio: number;
+  profitability_ratio: number
 }
 
 export interface DailyData {
-  date: string; // ISO date string with timezone
+  date: string // ISO date string with timezone
-  revenue: number;
+  revenue: number
-  cost: number;
+  cost: number
-  gross_profit: number;
+  gross_profit: number
-  gross_profit_margin: number;
+  gross_profit_margin: number
-  tax: number;
+  tax: number
-  discount: number;
+  discount: number
-  net_profit: number;
+  net_profit: number
-  net_profit_margin: number;
+  net_profit_margin: number
-  orders: number;
+  orders: number
 }
 
 export interface ProductDataReport {
-  product_id: string;
+  product_id: string
-  product_name: string;
+  product_name: string
-  category_id: string;
+  category_id: string
-  category_name: string;
+  category_name: string
-  quantity_sold: number;
+  quantity_sold: number
-  revenue: number;
+  revenue: number
-  cost: number;
+  cost: number
-  gross_profit: number;
+  gross_profit: number
-  gross_profit_margin: number;
+  gross_profit_margin: number
-  average_price: number;
+  average_price: number
-  average_cost: number;
+  average_cost: number
-  profit_per_unit: number;
+  profit_per_unit: number
+}
+
+export interface CategoryReport {
+  organization_id: string
+  outlet_id: string
+  date_from: string
+  date_to: string
+  data: CategoryDataReport[]
+}
+
+export interface CategoryDataReport {
+  category_id: string
+  category_name: string
+  total_revenue: number
+  total_quantity: number
+  product_count: number
+  order_count: number
 }