fix: navbar and analytic
This commit is contained in:
ferdiansyah783
parent
48570c018f
commit
0c95dd5f42
@ -1,98 +1,283 @@
|
||||
'use client'
|
||||
|
||||
// MUI Imports
|
||||
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 React from 'react'
|
||||
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 }}>
|
||||
<DistributedBarChartOrder
|
||||
isLoading={isLoading}
|
||||
title='Total Customers'
|
||||
value={data?.overview.total_customers as number}
|
||||
avatarIcon={'tabler-users'}
|
||||
avatarColor='primary'
|
||||
avatarSkin='light'
|
||||
/>
|
||||
</Grid>
|
||||
<Grid size={{ xs: 12, sm: 6, md: 4, lg: 3 }}>
|
||||
<DistributedBarChartOrder
|
||||
isLoading={isLoading}
|
||||
title='Total Orders'
|
||||
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}
|
||||
<>
|
||||
{salesData && (
|
||||
<div>
|
||||
{/* Header */}
|
||||
{/* <div className="mb-8">
|
||||
<h1 className="text-3xl font-bold text-gray-900 mb-2">Sales Dashboard</h1>
|
||||
<p className="text-gray-600">
|
||||
{formatDate(salesData.date_from)} - {formatDate(salesData.date_to)}
|
||||
</p>
|
||||
</div> */}
|
||||
|
||||
{/* Overview Metrics */}
|
||||
<div className='grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8'>
|
||||
<MetricCard
|
||||
iconClass='tabler-cash'
|
||||
title='Total Sales'
|
||||
value={data?.overview.total_sales as number}
|
||||
avatarIcon={'tabler-currency-dollar'}
|
||||
avatarColor='success'
|
||||
avatarSkin='light'
|
||||
value={formatCurrency(salesData.overview.total_sales)}
|
||||
bgColor='bg-green-500'
|
||||
/>
|
||||
</Grid>
|
||||
<Grid size={{ xs: 12, lg: 12 }}>
|
||||
<EarningReportsWithTabs data={transformSalesData(data!)} />
|
||||
</Grid>
|
||||
</Grid>
|
||||
<MetricCard
|
||||
iconClass='tabler-shopping-cart'
|
||||
title='Total Orders'
|
||||
value={salesData.overview.total_orders.toLocaleString()}
|
||||
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>
|
||||
)}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
@ -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>
|
||||
</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>
|
||||
{/* <MenuItem href={`/${locale}/apps/user/view`}>{dictionary['navigation'].view}</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>
|
||||
)
|
||||
}
|
||||
|
||||
@ -18,7 +18,7 @@
|
||||
"products": "منتجات",
|
||||
"list": "قائمة",
|
||||
"add": "يضيف",
|
||||
"addjustment": "تعديل",
|
||||
"adjustment": "تعديل",
|
||||
"category": "فئة",
|
||||
"overview": "نظرة عامة",
|
||||
"profitloss": "الربح والخسارة",
|
||||
@ -27,6 +27,7 @@
|
||||
"organization": "المنظمة",
|
||||
"outlet": "مخزن",
|
||||
"units": "وحدات",
|
||||
"reports": "تقارير",
|
||||
"ingredients": "مكونات",
|
||||
"orders": "أوامر",
|
||||
"details": "تفاصيل",
|
||||
|
||||
@ -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",
|
||||
|
||||
@ -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",
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user