fix: navbar and analytic

src/app/[lang]/(dashboard)/(private)/dashboards/overview/page.tsx

@@ -1,98 +1,283 @@
 'use client'
 
-// MUI Imports
+import React from 'react'
-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'
 import { useDashboardAnalytics } from '../../../../../../services/queries/analytics'
-import { DashboardReport, PaymentDataItem, ProductData, RecentSale } from '../../../../../../types/services/analytic'
+import Loading from '../../../../../../components/layout/shared/Loading'
 
 const DashboardOverview = () => {
-  const { data, isLoading } = useDashboardAnalytics()
+  // Sample data - replace with your actual data
+  const { data: salesData, isLoading } = useDashboardAnalytics()
+
+  const formatCurrency = (amount: any) => {
+    return new Intl.NumberFormat('id-ID', {
+      style: 'currency',
+      currency: 'IDR',
+      minimumFractionDigits: 0
+    }).format(amount)
+  }
 
   const formatDate = (dateString: any) => {
     return new Date(dateString).toLocaleDateString('id-ID', {
+      day: 'numeric',
       month: 'short',
-      day: 'numeric'
+      year: 'numeric'
     })
   }
 
-  const transformSalesData = (data: DashboardReport) => {
-    return [
-      {
-        type: 'products',
-        avatarIcon: 'tabler-package',
-        date: data.top_products.map((d: ProductData) => d.product_name),
-        series: [{ data: data.top_products.map((d: ProductData) => d.revenue) }]
-      },
-      {
-        type: 'orders',
-        avatarIcon: 'tabler-shopping-cart',
-        date: data.recent_sales.map((d: RecentSale) => formatDate(d.date)),
-        series: [{ data: data.recent_sales.map((d: RecentSale) => d.net_sales) }]
-      },
-      {
-        type: 'payments',
-        avatarIcon: 'tabler-credit-card-pay',
-        date: data.payment_methods.map((d: PaymentDataItem) => d.payment_method_name),
-        series: [{ data: data.payment_methods.map((d: PaymentDataItem) => d.total_amount) }]
-      },
-    ]
-  }
-
   if (isLoading) return <Loading />
 
+  const MetricCard = ({ iconClass, title, value, subtitle, bgColor = 'bg-blue-500' }: any) => (
+    <div className='bg-white rounded-lg shadow-lg hover:shadow-xl transition-shadow duration-300 p-6'>
+      <div className='flex items-center justify-between'>
+        <div className='flex-1'>
+          <h3 className='text-sm font-medium text-gray-600 mb-2'>{title}</h3>
+          <p className='text-2xl font-bold text-gray-900 mb-1'>{value}</p>
+          {subtitle && <p className='text-sm text-gray-500'>{subtitle}</p>}
+        </div>
+        <div className={`p-3 rounded-full ${bgColor} bg-opacity-10`}>
+          <i className={`${iconClass} text-[32px] ${bgColor.replace('bg-', 'text-')}`}></i>
+        </div>
+      </div>
+    </div>
+  )
+
+  const ProgressBar = ({ percentage, color = 'bg-blue-500' }: any) => (
+    <div className='w-full bg-gray-200 rounded-full h-2'>
+      <div
+        className={`${color} h-2 rounded-full transition-all duration-300`}
+        style={{ width: `${percentage}%` }}
+      ></div>
+    </div>
+  )
+
   return (
-    <Grid container spacing={6}>
+    <>
-      <Grid size={{ xs: 12, sm: 6, md: 4, lg: 3 }}>
+      {salesData && (
-        <DistributedBarChartOrder
+        <div>
-          isLoading={isLoading}
+          {/* Header */}
-          title='Total Customers'
+          {/* <div className="mb-8">
-          value={data?.overview.total_customers as number}
+          <h1 className="text-3xl font-bold text-gray-900 mb-2">Sales Dashboard</h1>
-          avatarIcon={'tabler-users'}
+          <p className="text-gray-600">
-          avatarColor='primary'
+            {formatDate(salesData.date_from)} - {formatDate(salesData.date_to)}
-          avatarSkin='light'
+          </p>
-        />
+        </div> */}
-      </Grid>
+
-      <Grid size={{ xs: 12, sm: 6, md: 4, lg: 3 }}>
+          {/* Overview Metrics */}
-        <DistributedBarChartOrder
+          <div className='grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8'>
-          isLoading={isLoading}
+            <MetricCard
-          title='Total Orders'
+              iconClass='tabler-cash'
-          value={data?.overview.total_orders as number}
-          avatarIcon={'tabler-package'}
-          avatarColor='info'
-          avatarSkin='light'
-        />
-      </Grid>
-      <Grid size={{ xs: 12, sm: 6, md: 4, lg: 3 }}>
-        <DistributedBarChartOrder
-          isLoading={isLoading}
-          title='Average Orders'
-          value={data?.overview.average_order_value as number}
-          avatarIcon={'tabler-trending-up'}
-          avatarColor='warning'
-          avatarSkin='light'
-        />
-      </Grid>
-      <Grid size={{ xs: 12, sm: 6, md: 4, lg: 3 }}>
-        <DistributedBarChartOrder
-          isLoading={isLoading}
               title='Total Sales'
-          value={data?.overview.total_sales as number}
+              value={formatCurrency(salesData.overview.total_sales)}
-          avatarIcon={'tabler-currency-dollar'}
+              bgColor='bg-green-500'
-          avatarColor='success'
-          avatarSkin='light'
             />
-      </Grid>
+            <MetricCard
-      <Grid size={{ xs: 12, lg: 12 }}>
+              iconClass='tabler-shopping-cart'
-        <EarningReportsWithTabs data={transformSalesData(data!)} />
+              title='Total Orders'
-      </Grid>
+              value={salesData.overview.total_orders.toLocaleString()}
-    </Grid>
+              subtitle={`${salesData.overview.voided_orders} voided, ${salesData.overview.refunded_orders} refunded`}
+              bgColor='bg-blue-500'
+            />
+            <MetricCard
+              iconClass='tabler-trending-up'
+              title='Average Order Value'
+              value={formatCurrency(salesData.overview.average_order_value)}
+              bgColor='bg-purple-500'
+            />
+            <MetricCard
+              iconClass='tabler-users'
+              title='Total Customers'
+              value={salesData.overview.total_customers || 'N/A'}
+              bgColor='bg-orange-500'
+            />
+          </div>
+
+          {/* Additional Metrics */}
+          <div className='grid grid-cols-1 md:grid-cols-2 gap-6 mb-8'>
+            <div className='bg-white rounded-lg shadow-lg p-6'>
+              <div className='flex items-center mb-4'>
+                <i className='tabler-x text-[24px] text-red-500 mr-2'></i>
+                <h3 className='text-lg font-semibold text-gray-900'>Voided Orders</h3>
+              </div>
+              <p className='text-3xl font-bold text-red-600'>{salesData.overview.voided_orders}</p>
+            </div>
+            <div className='bg-white rounded-lg shadow-lg p-6'>
+              <div className='flex items-center mb-4'>
+                <i className='tabler-refresh text-[24px] text-yellow-500 mr-2'></i>
+                <h3 className='text-lg font-semibold text-gray-900'>Refunded Orders</h3>
+              </div>
+              <p className='text-3xl font-bold text-yellow-600'>{salesData.overview.refunded_orders}</p>
+            </div>
+          </div>
+
+          <div className='grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8'>
+            {/* Top Products */}
+            <div className='lg:col-span-2 bg-white rounded-lg shadow-lg'>
+              <div className='p-6'>
+                <div className='flex items-center mb-6'>
+                  <i className='tabler-coffee text-[24px] text-amber-600 mr-2'></i>
+                  <h2 className='text-xl font-semibold text-gray-900'>Top Products</h2>
+                </div>
+                <div className='overflow-x-auto'>
+                  <table className='min-w-full'>
+                    <thead>
+                      <tr className='bg-gray-50'>
+                        <th className='px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider'>
+                          Product
+                        </th>
+                        <th className='px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider'>
+                          Category
+                        </th>
+                        <th className='px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider'>
+                          Qty Sold
+                        </th>
+                        <th className='px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider'>
+                          Revenue
+                        </th>
+                        <th className='px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider'>
+                          Avg Price
+                        </th>
+                        <th className='px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider'>
+                          Orders
+                        </th>
+                      </tr>
+                    </thead>
+                    <tbody className='bg-white divide-y divide-gray-200'>
+                      {salesData.top_products.map((product, index) => (
+                        <tr key={product.product_id} className='hover:bg-gray-50'>
+                          <td className='px-4 py-4 whitespace-nowrap'>
+                            <div className='flex items-center'>
+                              <span
+                                className={`w-2 h-2 rounded-full mr-3 ${
+                                  index === 0
+                                    ? 'bg-green-500'
+                                    : index === 1
+                                      ? 'bg-blue-500'
+                                      : index === 2
+                                        ? 'bg-purple-500'
+                                        : 'bg-gray-400'
+                                }`}
+                              ></span>
+                              <span className='text-sm font-medium text-gray-900'>{product.product_name}</span>
+                            </div>
+                          </td>
+                          <td className='px-4 py-4 whitespace-nowrap'>
+                            <span className='inline-flex px-2 py-1 text-xs font-semibold rounded-full bg-blue-100 text-blue-800'>
+                              {product.category_name}
+                            </span>
+                          </td>
+                          <td className='px-4 py-4 whitespace-nowrap text-right text-sm font-medium text-gray-900'>
+                            {product.quantity_sold}
+                          </td>
+                          <td className='px-4 py-4 whitespace-nowrap text-right text-sm font-medium text-green-600'>
+                            {formatCurrency(product.revenue)}
+                          </td>
+                          <td className='px-4 py-4 whitespace-nowrap text-right text-sm text-gray-900'>
+                            {formatCurrency(product.average_price)}
+                          </td>
+                          <td className='px-4 py-4 whitespace-nowrap text-right text-sm text-gray-900'>
+                            {product.order_count}
+                          </td>
+                        </tr>
+                      ))}
+                    </tbody>
+                  </table>
+                </div>
+              </div>
+            </div>
+
+            {/* Payment Methods */}
+            <div className='bg-white rounded-lg shadow-lg'>
+              <div className='p-6'>
+                <div className='flex items-center mb-6'>
+                  <i className='tabler-credit-card text-[24px] text-blue-500 mr-2'></i>
+                  <h2 className='text-xl font-semibold text-gray-900'>Payment Methods</h2>
+                </div>
+                <div className='space-y-6'>
+                  {salesData.payment_methods.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>
+                      </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>
+          </div>
+
+          {/* Recent Sales */}
+          <div className='bg-white rounded-lg shadow-lg'>
+            <div className='p-6'>
+              <div className='flex items-center mb-6'>
+                <i className='tabler-calendar-stats text-[24px] text-purple-500 mr-2'></i>
+                <h2 className='text-xl font-semibold text-gray-900'>Recent Sales</h2>
+              </div>
+              <div className='overflow-x-auto'>
+                <table className='min-w-full'>
+                  <thead>
+                    <tr className='bg-gray-50'>
+                      <th className='px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider'>
+                        Date
+                      </th>
+                      <th className='px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider'>
+                        Sales
+                      </th>
+                      <th className='px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider'>
+                        Orders
+                      </th>
+                      <th className='px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider'>
+                        Items
+                      </th>
+                      <th className='px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider'>
+                        Tax
+                      </th>
+                      <th className='px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider'>
+                        Discount
+                      </th>
+                      <th className='px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider'>
+                        Net Sales
+                      </th>
+                    </tr>
+                  </thead>
+                  <tbody className='bg-white divide-y divide-gray-200'>
+                    {salesData.recent_sales.map((sale, index) => (
+                      <tr key={index} className='hover:bg-gray-50'>
+                        <td className='px-4 py-4 whitespace-nowrap text-sm font-medium text-gray-900'>
+                          {formatDate(sale.date)}
+                        </td>
+                        <td className='px-4 py-4 whitespace-nowrap text-right text-sm font-medium text-gray-900'>
+                          {formatCurrency(sale.sales)}
+                        </td>
+                        <td className='px-4 py-4 whitespace-nowrap text-right text-sm text-gray-900'>{sale.orders}</td>
+                        <td className='px-4 py-4 whitespace-nowrap text-right text-sm text-gray-900'>{sale.items}</td>
+                        <td className='px-4 py-4 whitespace-nowrap text-right text-sm text-gray-900'>
+                          {formatCurrency(sale.tax)}
+                        </td>
+                        <td className='px-4 py-4 whitespace-nowrap text-right text-sm text-gray-900'>
+                          {formatCurrency(sale.discount)}
+                        </td>
+                        <td className='px-4 py-4 whitespace-nowrap text-right text-sm font-medium text-green-600'>
+                          {formatCurrency(sale.net_sales)}
+                        </td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+    </>
   )
 }
 

src/components/layout/vertical/VerticalMenu.tsx

@@ -82,6 +82,8 @@ const VerticalMenu = ({ dictionary, scrollMenu }: Props) => {
       >
         <SubMenu label={dictionary['navigation'].dashboards} icon={<i className='tabler-smart-home' />}>
           <MenuItem href={`/${locale}/dashboards/overview`}>{dictionary['navigation'].overview}</MenuItem>
+        </SubMenu>
+        <SubMenu label={dictionary['navigation'].reports} icon={<i className='tabler-report' />}>
           <MenuItem href={`/${locale}/dashboards/profit-loss`}>{dictionary['navigation'].profitloss}</MenuItem>
           <MenuItem href={`/${locale}/dashboards/products`}>{dictionary['navigation'].products}</MenuItem>
           <MenuItem href={`/${locale}/dashboards/orders`}>{dictionary['navigation'].orders}</MenuItem>
@@ -117,7 +119,7 @@ const VerticalMenu = ({ dictionary, scrollMenu }: Props) => {
             <SubMenu label={dictionary['navigation'].stock}>
               <MenuItem href={`/${locale}/apps/ecommerce/inventory/list`}>{dictionary['navigation'].list}</MenuItem>
               <MenuItem href={`/${locale}/apps/ecommerce/inventory/adjustment`}>
-                {dictionary['navigation'].addjustment}
+                {dictionary['navigation'].adjustment}
               </MenuItem>
             </SubMenu>
             <MenuItem href={`/${locale}/apps/ecommerce/settings`}>{dictionary['navigation'].settings}</MenuItem>
@@ -134,23 +136,10 @@ const VerticalMenu = ({ dictionary, scrollMenu }: Props) => {
           </SubMenu>
           <SubMenu label={dictionary['navigation'].user} icon={<i className='tabler-user' />}>
             <MenuItem href={`/${locale}/apps/user/list`}>{dictionary['navigation'].list}</MenuItem>
-            <MenuItem href={`/${locale}/apps/user/view`}>{dictionary['navigation'].view}</MenuItem>
+            {/* <MenuItem href={`/${locale}/apps/user/view`}>{dictionary['navigation'].view}</MenuItem> */}
-          </SubMenu>
-          <SubMenu label={dictionary['navigation'].rolesPermissions} icon={<i className='tabler-lock' />}>
-            <MenuItem href={`/${locale}/apps/roles`}>{dictionary['navigation'].roles}</MenuItem>
-            <MenuItem href={`/${locale}/apps/permissions`}>{dictionary['navigation'].permissions}</MenuItem>
           </SubMenu>
         </MenuSection>
       </Menu>
-      {/* <Menu
-        popoutMenuOffset={{ mainAxis: 23 }}
-        menuItemStyles={menuItemStyles(verticalNavOptions, theme)}
-        renderExpandIcon={({ open }) => <RenderExpandIcon open={open} transitionDuration={transitionDuration} />}
-        renderExpandedMenuItemIcon={{ icon: <i className='tabler-circle text-xs' /> }}
-        menuSectionStyles={menuSectionStyles(verticalNavOptions, theme)}
-      >
-        <GenerateVerticalMenu menuData={menuData(dictionary)} />
-      </Menu> */}
     </ScrollWrapper>
   )
 }

src/data/dictionaries/ar.json

@@ -18,7 +18,7 @@
     "products": "منتجات",
     "list": "قائمة",
     "add": "يضيف",
-    "addjustment": "تعديل",
+    "adjustment": "تعديل",
     "category": "فئة",
     "overview": "نظرة عامة",
     "profitloss": "الربح والخسارة",
@@ -27,6 +27,7 @@
     "organization": "المنظمة",
     "outlet": "مخزن",
     "units": "وحدات",
+    "reports": "تقارير",
     "ingredients": "مكونات",
     "orders": "أوامر",
     "details": "تفاصيل",

src/data/dictionaries/en.json

@@ -18,11 +18,12 @@
     "products": "Products",
     "list": "List",
     "add": "Add",
-    "addjustment": "Addjustment",
+    "adjustment": "Adjustment",
     "category": "Category",
     "overview": "Overview",
     "profitloss": "Profit Loss",
     "units": "Units",
+    "reports": "Reports",
     "finance": "Finance",
     "paymentMethods": "Payment Methods",
     "organization": "Organization",

src/data/dictionaries/fr.json

@@ -18,7 +18,7 @@
     "products": "Produits",
     "list": "Liste",
     "add": "Ajouter",
-    "addjustment": "Ajustement",
+    "adjustment": "Ajustement",
     "category": "Catégorie",
     "overview": "Aperçu",
     "profitloss": "Profit et perte",
@@ -27,6 +27,7 @@
     "organization": "Organisation",
     "outlet": "Point de vente",
     "units": "Unites",
+    "reports": "Rapports",
     "ingredients": "Ingrédients",
     "orders": "Ordres",
     "details": "Détails",