fix: analytic view
This commit is contained in:
ferdiansyah783
parent
0c95dd5f42
commit
b648349ebd
@ -5,45 +5,16 @@ import Grid from '@mui/material/Grid2'
|
|||||||
|
|
||||||
// Component Imports
|
// Component Imports
|
||||||
import DistributedBarChartOrder from '@views/dashboards/crm/DistributedBarChartOrder'
|
import DistributedBarChartOrder from '@views/dashboards/crm/DistributedBarChartOrder'
|
||||||
import EarningReportsWithTabs from '@views/dashboards/crm/EarningReportsWithTabs'
|
|
||||||
|
|
||||||
// Server Action Imports
|
// Server Action Imports
|
||||||
import Loading from '../../../../../../components/layout/shared/Loading'
|
import Loading from '../../../../../../components/layout/shared/Loading'
|
||||||
import { useSalesAnalytics } from '../../../../../../services/queries/analytics'
|
import { useSalesAnalytics } from '../../../../../../services/queries/analytics'
|
||||||
|
import { RecentSale } from '../../../../../../types/services/analytic'
|
||||||
|
import OrdersReport from '../../../../../../views/dashboards/orders/OrdersReport'
|
||||||
|
|
||||||
const DashboardOrder = () => {
|
const DashboardOrder = () => {
|
||||||
const { data, isLoading } = useSalesAnalytics()
|
const { data, isLoading } = useSalesAnalytics()
|
||||||
|
|
||||||
const formatDate = (dateString: any) => {
|
|
||||||
return new Date(dateString).toLocaleDateString('id-ID', {
|
|
||||||
month: 'short',
|
|
||||||
day: 'numeric'
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
const transformSalesData = (data: any) => {
|
|
||||||
return [
|
|
||||||
{
|
|
||||||
type: 'items',
|
|
||||||
avatarIcon: 'tabler-shopping-cart',
|
|
||||||
date: data.map((d: any) => formatDate(d.date)),
|
|
||||||
series: [{ data: data.map((d: any) => d.items) }]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
type: 'orders',
|
|
||||||
avatarIcon: 'tabler-chart-bar',
|
|
||||||
date: data.map((d: any) => formatDate(d.date)),
|
|
||||||
series: [{ data: data.map((d: any) => d.orders) }]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
type: 'sales',
|
|
||||||
avatarIcon: 'tabler-currency-dollar',
|
|
||||||
date: data.map((d: any) => formatDate(d.date)),
|
|
||||||
series: [{ data: data.map((d: any) => d.sales) }]
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
|
|
||||||
if (isLoading) return <Loading />
|
if (isLoading) return <Loading />
|
||||||
|
|
||||||
return (
|
return (
|
||||||
@ -89,26 +60,8 @@ const DashboardOrder = () => {
|
|||||||
/>
|
/>
|
||||||
</Grid>
|
</Grid>
|
||||||
<Grid size={{ xs: 12, lg: 12 }}>
|
<Grid size={{ xs: 12, lg: 12 }}>
|
||||||
<EarningReportsWithTabs data={transformSalesData(data?.data)} />
|
<OrdersReport title='Sales Report' orderData={data?.data as RecentSale[]} />
|
||||||
</Grid>
|
</Grid>
|
||||||
{/* <Grid size={{ xs: 12, md: 6, lg: 4 }}>
|
|
||||||
<RadarSalesChart />
|
|
||||||
</Grid>
|
|
||||||
<Grid size={{ xs: 12, md: 6, lg: 4 }}>
|
|
||||||
<SalesByCountries />
|
|
||||||
</Grid>
|
|
||||||
<Grid size={{ xs: 12, md: 6, lg: 4 }}>
|
|
||||||
<ProjectStatus />
|
|
||||||
</Grid>
|
|
||||||
<Grid size={{ xs: 12, md: 6, lg: 4 }}>
|
|
||||||
<ActiveProjects />
|
|
||||||
</Grid>
|
|
||||||
<Grid size={{ xs: 12, md: 6 }}>
|
|
||||||
<LastTransaction />
|
|
||||||
</Grid>
|
|
||||||
<Grid size={{ xs: 12, md: 6 }}>
|
|
||||||
<ActivityTimeline />
|
|
||||||
</Grid> */}
|
|
||||||
</Grid>
|
</Grid>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
@ -3,31 +3,19 @@
|
|||||||
import React from 'react'
|
import React from 'react'
|
||||||
import { useDashboardAnalytics } from '../../../../../../services/queries/analytics'
|
import { useDashboardAnalytics } from '../../../../../../services/queries/analytics'
|
||||||
import Loading from '../../../../../../components/layout/shared/Loading'
|
import Loading from '../../../../../../components/layout/shared/Loading'
|
||||||
|
import { formatCurrency, formatDate } from '../../../../../../utils/transform'
|
||||||
|
import ProductSales from '../../../../../../views/dashboards/products/ProductSales'
|
||||||
|
import PaymentMethodReport from '../../../../../../views/dashboards/payment-methods/PaymentMethodReport'
|
||||||
|
import OrdersReport from '../../../../../../views/dashboards/orders/OrdersReport'
|
||||||
|
|
||||||
const DashboardOverview = () => {
|
const DashboardOverview = () => {
|
||||||
// Sample data - replace with your actual data
|
// Sample data - replace with your actual data
|
||||||
const { data: salesData, isLoading } = useDashboardAnalytics()
|
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',
|
|
||||||
year: 'numeric'
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
if (isLoading) return <Loading />
|
if (isLoading) return <Loading />
|
||||||
|
|
||||||
const MetricCard = ({ iconClass, title, value, subtitle, bgColor = 'bg-blue-500' }: any) => (
|
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='bg-white rounded-lg shadow-md hover:shadow-xl transition-shadow duration-300 p-6'>
|
||||||
<div className='flex items-center justify-between'>
|
<div className='flex items-center justify-between'>
|
||||||
<div className='flex-1'>
|
<div className='flex-1'>
|
||||||
<h3 className='text-sm font-medium text-gray-600 mb-2'>{title}</h3>
|
<h3 className='text-sm font-medium text-gray-600 mb-2'>{title}</h3>
|
||||||
@ -93,14 +81,14 @@ const DashboardOverview = () => {
|
|||||||
|
|
||||||
{/* Additional Metrics */}
|
{/* Additional Metrics */}
|
||||||
<div className='grid grid-cols-1 md:grid-cols-2 gap-6 mb-8'>
|
<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='bg-white rounded-lg shadow-md p-6'>
|
||||||
<div className='flex items-center mb-4'>
|
<div className='flex items-center mb-4'>
|
||||||
<i className='tabler-x text-[24px] text-red-500 mr-2'></i>
|
<i className='tabler-x text-[24px] text-red-500 mr-2'></i>
|
||||||
<h3 className='text-lg font-semibold text-gray-900'>Voided Orders</h3>
|
<h3 className='text-lg font-semibold text-gray-900'>Voided Orders</h3>
|
||||||
</div>
|
</div>
|
||||||
<p className='text-3xl font-bold text-red-600'>{salesData.overview.voided_orders}</p>
|
<p className='text-3xl font-bold text-red-600'>{salesData.overview.voided_orders}</p>
|
||||||
</div>
|
</div>
|
||||||
<div className='bg-white rounded-lg shadow-lg p-6'>
|
<div className='bg-white rounded-lg shadow-md p-6'>
|
||||||
<div className='flex items-center mb-4'>
|
<div className='flex items-center mb-4'>
|
||||||
<i className='tabler-refresh text-[24px] text-yellow-500 mr-2'></i>
|
<i className='tabler-refresh text-[24px] text-yellow-500 mr-2'></i>
|
||||||
<h3 className='text-lg font-semibold text-gray-900'>Refunded Orders</h3>
|
<h3 className='text-lg font-semibold text-gray-900'>Refunded Orders</h3>
|
||||||
@ -111,170 +99,14 @@ const DashboardOverview = () => {
|
|||||||
|
|
||||||
<div className='grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8'>
|
<div className='grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8'>
|
||||||
{/* Top Products */}
|
{/* Top Products */}
|
||||||
<div className='lg:col-span-2 bg-white rounded-lg shadow-lg'>
|
<ProductSales title='Top Products' productData={salesData.top_products} />
|
||||||
<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 */}
|
{/* Payment Methods */}
|
||||||
<div className='bg-white rounded-lg shadow-lg'>
|
<PaymentMethodReport payments={salesData.payment_methods} />
|
||||||
<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>
|
</div>
|
||||||
|
|
||||||
{/* Recent Sales */}
|
{/* Recent Sales */}
|
||||||
<div className='bg-white rounded-lg shadow-lg'>
|
<OrdersReport title='Recent Sales' orderData={salesData.recent_sales} />
|
||||||
<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>
|
</div>
|
||||||
)}
|
)}
|
||||||
</>
|
</>
|
||||||
|
|||||||
@ -5,27 +5,16 @@ import Grid from '@mui/material/Grid2'
|
|||||||
|
|
||||||
// Component Imports
|
// Component Imports
|
||||||
import DistributedBarChartOrder from '@views/dashboards/crm/DistributedBarChartOrder'
|
import DistributedBarChartOrder from '@views/dashboards/crm/DistributedBarChartOrder'
|
||||||
import EarningReportsWithTabs from '@views/dashboards/crm/EarningReportsWithTabs'
|
|
||||||
|
|
||||||
// Server Action Imports
|
// Server Action Imports
|
||||||
import Loading from '../../../../../../components/layout/shared/Loading'
|
import Loading from '../../../../../../components/layout/shared/Loading'
|
||||||
import { usePaymentAnalytics } from '../../../../../../services/queries/analytics'
|
import { usePaymentAnalytics } from '../../../../../../services/queries/analytics'
|
||||||
import { PaymentDataItem } from '../../../../../../types/services/analytic'
|
import { PaymentDataItem } from '../../../../../../types/services/analytic'
|
||||||
|
import PaymentMethodReport from '../../../../../../views/dashboards/payment-methods/PaymentMethodReport'
|
||||||
|
|
||||||
const DashboardPayment = () => {
|
const DashboardPayment = () => {
|
||||||
const { data, isLoading } = usePaymentAnalytics()
|
const { data, isLoading } = usePaymentAnalytics()
|
||||||
|
|
||||||
const transformSalesData = (data: PaymentDataItem[]) => {
|
|
||||||
return [
|
|
||||||
{
|
|
||||||
type: 'payment',
|
|
||||||
avatarIcon: 'tabler-package',
|
|
||||||
date: data.map((d: PaymentDataItem) => d.payment_method_name),
|
|
||||||
series: [{ data: data.map((d: PaymentDataItem) => d.total_amount) }]
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
|
|
||||||
if (isLoading) return <Loading />
|
if (isLoading) return <Loading />
|
||||||
|
|
||||||
return (
|
return (
|
||||||
@ -71,26 +60,8 @@ const DashboardPayment = () => {
|
|||||||
/>
|
/>
|
||||||
</Grid>
|
</Grid>
|
||||||
<Grid size={{ xs: 12, lg: 12 }}>
|
<Grid size={{ xs: 12, lg: 12 }}>
|
||||||
<EarningReportsWithTabs data={transformSalesData(data!.data)} />
|
<PaymentMethodReport payments={data?.data as PaymentDataItem[]} />
|
||||||
</Grid>
|
</Grid>
|
||||||
{/* <Grid size={{ xs: 12, md: 6, lg: 4 }}>
|
|
||||||
<RadarSalesChart />
|
|
||||||
</Grid>
|
|
||||||
<Grid size={{ xs: 12, md: 6, lg: 4 }}>
|
|
||||||
<SalesByCountries />
|
|
||||||
</Grid>
|
|
||||||
<Grid size={{ xs: 12, md: 6, lg: 4 }}>
|
|
||||||
<ProjectStatus />
|
|
||||||
</Grid>
|
|
||||||
<Grid size={{ xs: 12, md: 6, lg: 4 }}>
|
|
||||||
<ActiveProjects />
|
|
||||||
</Grid>
|
|
||||||
<Grid size={{ xs: 12, md: 6 }}>
|
|
||||||
<LastTransaction />
|
|
||||||
</Grid>
|
|
||||||
<Grid size={{ xs: 12, md: 6 }}>
|
|
||||||
<ActivityTimeline />
|
|
||||||
</Grid> */}
|
|
||||||
</Grid>
|
</Grid>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
@ -10,6 +10,7 @@ import EarningReportsWithTabs from '@views/dashboards/crm/EarningReportsWithTabs
|
|||||||
// Server Action Imports
|
// Server Action Imports
|
||||||
import Loading from '../../../../../../components/layout/shared/Loading'
|
import Loading from '../../../../../../components/layout/shared/Loading'
|
||||||
import { useProductSalesAnalytics } from '../../../../../../services/queries/analytics'
|
import { useProductSalesAnalytics } from '../../../../../../services/queries/analytics'
|
||||||
|
import ProductSales from '../../../../../../views/dashboards/products/ProductSales'
|
||||||
|
|
||||||
const DashboardProduct = () => {
|
const DashboardProduct = () => {
|
||||||
const { data, isLoading } = useProductSalesAnalytics()
|
const { data, isLoading } = useProductSalesAnalytics()
|
||||||
@ -47,67 +48,7 @@ const DashboardProduct = () => {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<Grid container spacing={6}>
|
<Grid container spacing={6}>
|
||||||
<Grid size={{ xs: 12, sm: 6, md: 4, lg: 3 }}>
|
<Grid size={{ xs: 12, lg: 12 }}>{data?.data && <ProductSales title='Product Sales' productData={data.data} />}</Grid>
|
||||||
<DistributedBarChartOrder
|
|
||||||
isLoading={isLoading}
|
|
||||||
title='Total Orders'
|
|
||||||
value={summary.totalOrders as number}
|
|
||||||
avatarIcon={'tabler-shopping-cart'}
|
|
||||||
avatarColor='primary'
|
|
||||||
avatarSkin='light'
|
|
||||||
/>
|
|
||||||
</Grid>
|
|
||||||
<Grid size={{ xs: 12, sm: 6, md: 4, lg: 3 }}>
|
|
||||||
<DistributedBarChartOrder
|
|
||||||
isLoading={isLoading}
|
|
||||||
title='Product Sold'
|
|
||||||
value={summary.totalQuantitySold 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={summary.averageOrderValue 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={summary.totalRevenue as number}
|
|
||||||
avatarIcon={'tabler-currency-dollar'}
|
|
||||||
avatarColor='success'
|
|
||||||
avatarSkin='light'
|
|
||||||
/>
|
|
||||||
</Grid>
|
|
||||||
<Grid size={{ xs: 12, lg: 12 }}>
|
|
||||||
<EarningReportsWithTabs data={transformSalesData(data?.data)} />
|
|
||||||
</Grid>
|
|
||||||
{/* <Grid size={{ xs: 12, md: 6, lg: 4 }}>
|
|
||||||
<RadarSalesChart />
|
|
||||||
</Grid>
|
|
||||||
<Grid size={{ xs: 12, md: 6, lg: 4 }}>
|
|
||||||
<SalesByCountries />
|
|
||||||
</Grid>
|
|
||||||
<Grid size={{ xs: 12, md: 6, lg: 4 }}>
|
|
||||||
<ProjectStatus />
|
|
||||||
</Grid>
|
|
||||||
<Grid size={{ xs: 12, md: 6, lg: 4 }}>
|
|
||||||
<ActiveProjects />
|
|
||||||
</Grid>
|
|
||||||
<Grid size={{ xs: 12, md: 6 }}>
|
|
||||||
<LastTransaction />
|
|
||||||
</Grid>
|
|
||||||
<Grid size={{ xs: 12, md: 6 }}>
|
|
||||||
<ActivityTimeline />
|
|
||||||
</Grid> */}
|
|
||||||
</Grid>
|
</Grid>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
@ -15,13 +15,11 @@ export const formatShortCurrency = (num: number): string => {
|
|||||||
return num.toString()
|
return num.toString()
|
||||||
}
|
}
|
||||||
|
|
||||||
export const formatDate = (dateString: string) => {
|
export const formatDate = (dateString: any) => {
|
||||||
return new Date(dateString).toLocaleDateString('en-US', {
|
return new Date(dateString).toLocaleDateString('id-ID', {
|
||||||
year: 'numeric',
|
|
||||||
month: 'long',
|
|
||||||
day: 'numeric',
|
day: 'numeric',
|
||||||
hour: '2-digit',
|
month: 'short',
|
||||||
minute: '2-digit'
|
year: 'numeric'
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
65
src/views/dashboards/orders/OrdersReport.tsx
Normal file
65
src/views/dashboards/orders/OrdersReport.tsx
Normal file
@ -0,0 +1,65 @@
|
|||||||
|
import { RecentSale } from '../../../types/services/analytic'
|
||||||
|
import { formatCurrency, formatDate } from '../../../utils/transform'
|
||||||
|
|
||||||
|
const OrdersReport = ({ orderData, title }: { orderData: RecentSale[]; title: string }) => {
|
||||||
|
return (
|
||||||
|
<div className='bg-white rounded-lg shadow-md'>
|
||||||
|
<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'>{title}</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'>
|
||||||
|
{orderData.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>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default OrdersReport
|
||||||
44
src/views/dashboards/payment-methods/PaymentMethodReport.tsx
Normal file
44
src/views/dashboards/payment-methods/PaymentMethodReport.tsx
Normal file
@ -0,0 +1,44 @@
|
|||||||
|
import { PaymentDataItem } from '../../../types/services/analytic'
|
||||||
|
import { formatCurrency } from '../../../utils/transform'
|
||||||
|
|
||||||
|
const PaymentMethodReport = ({ payments }: { payments: PaymentDataItem[] }) => {
|
||||||
|
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 (
|
||||||
|
<div className='bg-white rounded-lg shadow-md'>
|
||||||
|
<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'>
|
||||||
|
{payments.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>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default PaymentMethodReport
|
||||||
82
src/views/dashboards/products/ProductSales.tsx
Normal file
82
src/views/dashboards/products/ProductSales.tsx
Normal file
@ -0,0 +1,82 @@
|
|||||||
|
import { ProductData } from '../../../types/services/analytic'
|
||||||
|
import { formatCurrency } from '../../../utils/transform'
|
||||||
|
|
||||||
|
const ProductSales = ({ productData, title }: { productData: ProductData[], title: string }) => {
|
||||||
|
return (
|
||||||
|
<div className='lg:col-span-2 bg-white rounded-lg shadow-md'>
|
||||||
|
<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'>{title}</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'>
|
||||||
|
{productData.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>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default ProductSales
|
||||||
Loading…
x
Reference in New Issue
Block a user