fix: re stock
This commit is contained in:
ferdiansyah783
@@ -1,18 +1,31 @@
|
||||
'use client'
|
||||
|
||||
import React from 'react'
|
||||
import { useDashboardAnalytics } from '../../../../../../services/queries/analytics'
|
||||
import { TextField, Typography, useTheme } from '@mui/material'
|
||||
import { useState } from 'react'
|
||||
import Loading from '../../../../../../components/layout/shared/Loading'
|
||||
import { formatCurrency, formatDate, formatShortCurrency } from '../../../../../../utils/transform'
|
||||
import ProductSales from '../../../../../../views/dashboards/products/ProductSales'
|
||||
import PaymentMethodReport from '../../../../../../views/dashboards/payment-methods/PaymentMethodReport'
|
||||
import { useDashboardAnalytics } from '../../../../../../services/queries/analytics'
|
||||
import { formatDateDDMMYYYY, formatForInputDate, formatShortCurrency } from '../../../../../../utils/transform'
|
||||
import OrdersReport from '../../../../../../views/dashboards/orders/OrdersReport'
|
||||
import PaymentMethodReport from '../../../../../../views/dashboards/payment-methods/PaymentMethodReport'
|
||||
import ProductSales from '../../../../../../views/dashboards/products/ProductSales'
|
||||
|
||||
const DashboardOverview = () => {
|
||||
// Sample data - replace with your actual data
|
||||
const { data: salesData, isLoading } = useDashboardAnalytics()
|
||||
const theme = useTheme()
|
||||
|
||||
if (isLoading) return <Loading />
|
||||
const today = new Date()
|
||||
const monthAgo = new Date()
|
||||
monthAgo.setDate(today.getDate() - 30)
|
||||
|
||||
const [filter, setFilter] = useState({
|
||||
date_from: formatDateDDMMYYYY(monthAgo),
|
||||
date_to: formatDateDDMMYYYY(today)
|
||||
})
|
||||
|
||||
// Sample data - replace with your actual data
|
||||
const { data: salesData, isLoading } = useDashboardAnalytics({
|
||||
date_from: filter.date_from,
|
||||
date_to: filter.date_to
|
||||
})
|
||||
|
||||
const MetricCard = ({ iconClass, title, value, subtitle, bgColor = 'bg-blue-500', isCurrency = false }: any) => (
|
||||
<div className='bg-white rounded-lg shadow-md hover:shadow-xl transition-shadow duration-300 p-6'>
|
||||
@@ -29,70 +42,108 @@ const DashboardOverview = () => {
|
||||
</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 (
|
||||
<>
|
||||
{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-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'
|
||||
<div>
|
||||
{/* Header */}
|
||||
<div className='mb-8 flex gap-4 items-center justify-between'>
|
||||
<Typography variant='h1' className='text-3xl font-bold text-gray-900 mb-2'>
|
||||
Analysis Dashboard
|
||||
</Typography>
|
||||
<div className='flex items-center gap-4'>
|
||||
<TextField
|
||||
type='date'
|
||||
value={formatForInputDate(salesData?.date_from || new Date())}
|
||||
onChange={e => {
|
||||
setFilter({
|
||||
...filter,
|
||||
date_from: formatDateDDMMYYYY(new Date(e.target.value))
|
||||
})
|
||||
}}
|
||||
size='small'
|
||||
sx={{
|
||||
'& .MuiOutlinedInput-root': {
|
||||
'&.Mui-focused fieldset': {
|
||||
borderColor: 'primary.main'
|
||||
},
|
||||
'& fieldset': {
|
||||
borderColor: theme.palette.mode === 'dark' ? 'rgba(231, 227, 252, 0.22)' : theme.palette.divider
|
||||
}
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<MetricCard
|
||||
iconClass='tabler-cash'
|
||||
title='Total Sales'
|
||||
value={formatShortCurrency(salesData.overview.total_sales)}
|
||||
bgColor='bg-green-500'
|
||||
isCurrency={true}
|
||||
/>
|
||||
<MetricCard
|
||||
iconClass='tabler-trending-up'
|
||||
title='Average Order Value'
|
||||
value={formatShortCurrency(salesData.overview.average_order_value)}
|
||||
bgColor='bg-purple-500'
|
||||
isCurrency={true}
|
||||
/>
|
||||
<MetricCard
|
||||
iconClass='tabler-users'
|
||||
title='Total Customers'
|
||||
value={salesData.overview.total_customers || 'N/A'}
|
||||
bgColor='bg-orange-500'
|
||||
<Typography>-</Typography>
|
||||
<TextField
|
||||
type='date'
|
||||
value={
|
||||
salesData?.date_to
|
||||
? new Date(salesData?.date_to).toISOString().split('T')[0]
|
||||
: new Date().toISOString().split('T')[0]
|
||||
}
|
||||
onChange={e => {}}
|
||||
size='small'
|
||||
sx={{
|
||||
'& .MuiOutlinedInput-root': {
|
||||
'&.Mui-focused fieldset': {
|
||||
borderColor: 'primary.main'
|
||||
},
|
||||
'& fieldset': {
|
||||
borderColor: theme.palette.mode === 'dark' ? 'rgba(231, 227, 252, 0.22)' : theme.palette.divider
|
||||
}
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8'>
|
||||
{/* Top Products */}
|
||||
<ProductSales title='Top Products' productData={salesData.top_products} />
|
||||
|
||||
{/* Payment Methods */}
|
||||
<PaymentMethodReport payments={salesData.payment_methods} />
|
||||
</div>
|
||||
|
||||
{/* Recent Sales */}
|
||||
<OrdersReport title='Recent Sales' orderData={salesData.recent_sales} />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{salesData ? (
|
||||
<>
|
||||
{/* Overview Metrics */}
|
||||
<div className='grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8'>
|
||||
<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-cash'
|
||||
title='Total Sales'
|
||||
value={formatShortCurrency(salesData.overview.total_sales)}
|
||||
bgColor='bg-green-500'
|
||||
isCurrency={true}
|
||||
/>
|
||||
<MetricCard
|
||||
iconClass='tabler-trending-up'
|
||||
title='Average Order Value'
|
||||
value={formatShortCurrency(salesData.overview.average_order_value)}
|
||||
bgColor='bg-purple-500'
|
||||
isCurrency={true}
|
||||
/>
|
||||
<MetricCard
|
||||
iconClass='tabler-users'
|
||||
title='Total Customers'
|
||||
value={salesData.overview.total_customers || 'N/A'}
|
||||
bgColor='bg-orange-500'
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8'>
|
||||
{/* Top Products */}
|
||||
<ProductSales title='Top Products' productData={salesData.top_products} />
|
||||
|
||||
{/* Payment Methods */}
|
||||
<PaymentMethodReport payments={salesData.payment_methods} />
|
||||
</div>
|
||||
|
||||
{/* Recent Sales */}
|
||||
<OrdersReport title='Recent Sales' orderData={salesData.recent_sales} />
|
||||
</>
|
||||
) : (
|
||||
<Loading />
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user