feat: add categories at daily report

Reviewed-on: https://gits.altru.id/ferdiansyah/pos-dashboard-v2/pulls/1

src/app/[lang]/(blank-layout-pages)/(guest-only)/layout.tsx

@@ -1,16 +1,13 @@
 // Type Imports
 import type { ChildrenType } from '@core/types'
-import type { Locale } from '@configs/i18n'
 
 // HOC Imports
 import GuestOnlyRoute from '@/hocs/GuestOnlyRoute'
 
-const Layout = async (props: ChildrenType & { params: Promise<{ lang: Locale }> }) => {
-  const params = await props.params
-
+const Layout = async (props: ChildrenType) => {
   const { children } = props
 
-  return <GuestOnlyRoute lang={params.lang}>{children}</GuestOnlyRoute>
+  return <GuestOnlyRoute>{children}</GuestOnlyRoute>
 }
 
 export default Layout

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/app/[lang]/(dashboard)/(private)/dashboards/products/page.tsx

@@ -4,8 +4,6 @@
 import Grid from '@mui/material/Grid2'
 
 // Component Imports
-import DistributedBarChartOrder from '@views/dashboards/crm/DistributedBarChartOrder'
-import EarningReportsWithTabs from '@views/dashboards/crm/EarningReportsWithTabs'
 
 // Server Action Imports
 import Loading from '../../../../../../components/layout/shared/Loading'

src/components/layout/vertical/VerticalMenu.tsx

@@ -91,7 +91,7 @@ const VerticalMenu = ({ dictionary, scrollMenu }: Props) => {
           <MenuItem href={`/${locale}/dashboards/daily-report`}>{dictionary['navigation'].dailyReport}</MenuItem>
         </SubMenu>
         <MenuSection label={dictionary['navigation'].appsPages}>
-          <SubMenu label={dictionary['navigation'].eCommerce} icon={<i className='tabler-salad' />}>
+          <SubMenu label={dictionary['navigation'].inventory} icon={<i className='tabler-salad' />}>
             {/* <MenuItem href={`/${locale}/apps/ecommerce/dashboard`}>{dictionary['navigation'].dashboard}</MenuItem> */}
             <SubMenu label={dictionary['navigation'].products}>
               <MenuItem href={`/${locale}/apps/ecommerce/products/list`}>{dictionary['navigation'].list}</MenuItem>

src/data/dictionaries/ar.json

@@ -2,7 +2,7 @@
   "navigation": {
     "dashboards": "لوحات القيادة",
     "analytics": "تحليلات",
-    "eCommerce": "تجزئة الكترونية",
+    "inventory": "تجزئة الكترونية",
     "stock": "المخزون",
     "academy": "أكاديمية",
     "logistics": "اللوجستية",

src/data/dictionaries/en.json

@@ -2,7 +2,7 @@
   "navigation": {
     "dashboards": "Dashboards",
     "analytics": "Analytics",
-    "eCommerce": "Inventory",
+    "inventory": "Inventory",
     "stock": "Stock",
     "academy": "Academy",
     "logistics": "Logistics",

src/data/dictionaries/fr.json

@@ -2,7 +2,7 @@
   "navigation": {
     "dashboards": "Tableaux de bord",
     "analytics": "Analytique",
-    "eCommerce": "Inventaire",
+    "inventory": "Inventaire",
     "stock": "Stock",
     "academy": "Académie",
     "logistics": "Logistique",

src/hocs/GuestOnlyRoute.tsx

@@ -1,23 +1,34 @@
+'use client'
+
 // Next Imports
 
 // Type Imports
-import type { Locale } from '@configs/i18n'
 import type { ChildrenType } from '@core/types'
+import { useRouter } from 'next/navigation'
+import { useEffect } from 'react'
+import { useAuth } from '../contexts/authContext'
+import Loading from '../components/layout/shared/Loading'
 
 // Config Imports
 
 // Util Imports
 
-const GuestOnlyRoute = async ({ children, lang }: ChildrenType & { lang: Locale }) => {
-  // const session = await getServerSession()
+const GuestOnlyRoute = ({ children }: ChildrenType) => {
+  const router = useRouter()
 
-  // if (session) {
-  //   redirect(getLocalizedUrl(themeConfig.homePageUrl, lang))
-  // }
+  const { isAuthenticated, currentUser } = useAuth()
 
-  console.log(lang)
+  useEffect(() => {
+    if (!isAuthenticated) return
 
-  return <>{children}</>
+    if (currentUser?.role === 'admin') {
+      router.push('/dashboards/overview')
+    } else {
+      router.push('/sa/organizations/list')
+    }
+  }, [isAuthenticated])
+
+  return <>{isAuthenticated ? <Loading /> : children}</>
 }
 
 export default GuestOnlyRoute

src/services/api.ts

@@ -29,9 +29,9 @@ api.interceptors.response.use(
   response => response,
   error => {
     const status = error.response?.status
+    const currentPath = window.location.pathname
 
-    if (status === 401) {
-      console.warn('Unauthorized. Redirecting to login...')
+    if (status === 401 && !currentPath.endsWith('/login')) {
       window.location.href = '/login'
     }
 
@@ -46,3 +46,4 @@ api.interceptors.response.use(
     return Promise.reject(error)
   }
 )
+

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

src/views/Login.tsx

@@ -46,6 +46,7 @@ import { useSettings } from '@core/hooks/useSettings'
 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 }) => ({
@@ -117,8 +118,8 @@ const Login = ({ mode }: { mode: SystemMode }) => {
   } = useForm<FormData>({
     resolver: valibotResolver(schema),
     defaultValues: {
-      email: 'guapatlu@jambi.com',
-      password: '12345678'
+      email: '',
+      password: ''
     }
   })
 
@@ -146,7 +147,7 @@ const Login = ({ mode }: { mode: SystemMode }) => {
         }
       },
       onError: (error: any) => {
-        setErrorState(error.response.data)
+        toast.error(error.response.data.message)
       }
     })
   }
@@ -262,16 +263,6 @@ const Login = ({ mode }: { mode: SystemMode }) => {
                 Create an account
               </Typography>
             </div>
-            <Divider className='gap-2'>or</Divider>
-            <Button
-              color='secondary'
-              className='self-center text-textPrimary'
-              startIcon={<img src='/images/logos/google.png' alt='Google' width={22} />}
-              sx={{ '& .MuiButton-startIcon': { marginInlineEnd: 3 } }}
-              onClick={() => console.log('google')}
-            >
-              Sign in with Google
-            </Button>
           </form>
         </div>
       </div>