Merge remote-tracking branch 'origin/main' into efril
This commit is contained in:
efrilm
commit
2c370b4c15
@ -7,18 +7,87 @@ import Grid from '@mui/material/Grid2'
|
||||
import DistributedBarChartOrder from '@views/dashboards/crm/DistributedBarChartOrder'
|
||||
|
||||
// Server Action Imports
|
||||
import { TextField, Typography, useTheme } from '@mui/material'
|
||||
import { useState } from 'react'
|
||||
import Loading from '../../../../../../components/layout/shared/Loading'
|
||||
import { useSalesAnalytics } from '../../../../../../services/queries/analytics'
|
||||
import { RecentSale } from '../../../../../../types/services/analytic'
|
||||
import { formatDateDDMMYYYY, formatForInputDate } from '../../../../../../utils/transform'
|
||||
import OrdersReport from '../../../../../../views/dashboards/orders/OrdersReport'
|
||||
|
||||
const DashboardOrder = () => {
|
||||
const { data, isLoading } = useSalesAnalytics()
|
||||
const theme = useTheme()
|
||||
|
||||
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)
|
||||
})
|
||||
|
||||
const { data, isLoading } = useSalesAnalytics({
|
||||
date_from: filter.date_from,
|
||||
date_to: filter.date_to
|
||||
})
|
||||
|
||||
if (isLoading) return <Loading />
|
||||
|
||||
return (
|
||||
<Grid container spacing={6}>
|
||||
<Grid size={{ xs: 12 }}>
|
||||
<div className='flex gap-4 items-center justify-between'>
|
||||
<Typography variant='h1' className='text-3xl font-bold text-gray-900 mb-2'>
|
||||
Orders Analysis Dashboard
|
||||
</Typography>
|
||||
<div className='flex items-center gap-4'>
|
||||
<TextField
|
||||
type='date'
|
||||
value={formatForInputDate(data?.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
|
||||
}
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<Typography>-</Typography>
|
||||
<TextField
|
||||
type='date'
|
||||
value={
|
||||
data?.date_to
|
||||
? new Date(data?.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>
|
||||
</Grid>
|
||||
|
||||
<Grid size={{ xs: 12, sm: 6, md: 4, lg: 3 }}>
|
||||
<DistributedBarChartOrder
|
||||
isLoading={isLoading}
|
||||
|
||||
@ -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>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
@ -11,14 +11,82 @@ import Loading from '../../../../../../components/layout/shared/Loading'
|
||||
import { usePaymentAnalytics } from '../../../../../../services/queries/analytics'
|
||||
import { PaymentDataItem } from '../../../../../../types/services/analytic'
|
||||
import PaymentMethodReport from '../../../../../../views/dashboards/payment-methods/PaymentMethodReport'
|
||||
import { Typography, TextField, useTheme } from '@mui/material'
|
||||
import { useState } from 'react'
|
||||
import { formatDateDDMMYYYY, formatForInputDate } from '../../../../../../utils/transform'
|
||||
|
||||
const DashboardPayment = () => {
|
||||
const { data, isLoading } = usePaymentAnalytics()
|
||||
const theme = useTheme()
|
||||
|
||||
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)
|
||||
})
|
||||
|
||||
const { data, isLoading } = usePaymentAnalytics({
|
||||
date_from: filter.date_from,
|
||||
date_to: filter.date_to
|
||||
})
|
||||
|
||||
if (isLoading) return <Loading />
|
||||
|
||||
return (
|
||||
<Grid container spacing={6}>
|
||||
<Grid size={{ xs: 12 }}>
|
||||
<div className='flex gap-4 items-center justify-between'>
|
||||
<Typography variant='h1' className='text-3xl font-bold text-gray-900 mb-2'>
|
||||
Payments Analysis Dashboard
|
||||
</Typography>
|
||||
<div className='flex items-center gap-4'>
|
||||
<TextField
|
||||
type='date'
|
||||
value={formatForInputDate(data?.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
|
||||
}
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<Typography>-</Typography>
|
||||
<TextField
|
||||
type='date'
|
||||
value={
|
||||
data?.date_to
|
||||
? new Date(data?.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>
|
||||
</Grid>
|
||||
<Grid size={{ xs: 12, sm: 6, md: 4, lg: 3 }}>
|
||||
<DistributedBarChartOrder
|
||||
isLoading={isLoading}
|
||||
|
||||
@ -6,47 +6,88 @@ import Grid from '@mui/material/Grid2'
|
||||
// Component Imports
|
||||
|
||||
// Server Action Imports
|
||||
import { TextField, Typography, useTheme } from '@mui/material'
|
||||
import { useState } from 'react'
|
||||
import Loading from '../../../../../../components/layout/shared/Loading'
|
||||
import { useProductSalesAnalytics } from '../../../../../../services/queries/analytics'
|
||||
import { formatDateDDMMYYYY, formatForInputDate } from '../../../../../../utils/transform'
|
||||
import ProductSales from '../../../../../../views/dashboards/products/ProductSales'
|
||||
|
||||
const DashboardProduct = () => {
|
||||
const { data, isLoading } = useProductSalesAnalytics()
|
||||
const theme = useTheme()
|
||||
|
||||
const summary = {
|
||||
totalProducts: data?.data.length,
|
||||
totalQuantitySold: data?.data.reduce((sum, item) => sum + item.quantity_sold, 0),
|
||||
totalRevenue: data?.data.reduce((sum, item) => sum + item.revenue, 0),
|
||||
totalOrders: data?.data.reduce((sum, item) => sum + item.order_count, 0),
|
||||
averageOrderValue: data?.data
|
||||
? data!.data.reduce((sum, item) => sum + item.revenue, 0) /
|
||||
data!.data.reduce((sum, item) => sum + item.order_count, 0)
|
||||
: 0
|
||||
}
|
||||
const today = new Date()
|
||||
const monthAgo = new Date()
|
||||
monthAgo.setDate(today.getDate() - 30)
|
||||
|
||||
const formatDate = (dateString: any) => {
|
||||
return new Date(dateString).toLocaleDateString('id-ID', {
|
||||
month: 'short',
|
||||
day: 'numeric'
|
||||
})
|
||||
}
|
||||
const [filter, setFilter] = useState({
|
||||
date_from: formatDateDDMMYYYY(monthAgo),
|
||||
date_to: formatDateDDMMYYYY(today)
|
||||
})
|
||||
|
||||
const transformSalesData = (data: any) => {
|
||||
return [
|
||||
{
|
||||
type: 'products',
|
||||
avatarIcon: 'tabler-package',
|
||||
date: data.map((d: any) => d.product_name),
|
||||
series: [{ data: data.map((d: any) => d.revenue) }]
|
||||
}
|
||||
]
|
||||
}
|
||||
const { data, isLoading } = useProductSalesAnalytics({
|
||||
date_from: filter.date_from,
|
||||
date_to: filter.date_to
|
||||
})
|
||||
|
||||
if (isLoading) return <Loading />
|
||||
|
||||
return (
|
||||
<Grid container spacing={6}>
|
||||
<Grid size={{ xs: 12, lg: 12 }}>{data?.data && <ProductSales title='Product Sales' productData={data.data} />}</Grid>
|
||||
<Grid size={{ xs: 12, lg: 12 }}>
|
||||
<div className='flex gap-4 items-center justify-between'>
|
||||
<Typography variant='h1' className='text-3xl font-bold text-gray-900 mb-2'>
|
||||
Products Analysis Dashboard
|
||||
</Typography>
|
||||
<div className='flex items-center gap-4'>
|
||||
<TextField
|
||||
type='date'
|
||||
value={formatForInputDate(data?.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
|
||||
}
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<Typography>-</Typography>
|
||||
<TextField
|
||||
type='date'
|
||||
value={
|
||||
data?.date_to
|
||||
? new Date(data?.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>
|
||||
</Grid>
|
||||
<Grid size={{ xs: 12, lg: 12 }}>
|
||||
{data?.data ? <ProductSales title='Product Sales' productData={data.data} /> : <Loading />}
|
||||
</Grid>
|
||||
</Grid>
|
||||
)
|
||||
}
|
||||
|
||||
@ -2,23 +2,28 @@
|
||||
|
||||
import React, { useState } from 'react'
|
||||
import { useProfitLossAnalytics } from '../../../../../../services/queries/analytics'
|
||||
import { formatDateDDMMYYYY, formatShortCurrency } from '../../../../../../utils/transform'
|
||||
import { formatDateDDMMYYYY, formatForInputDate, formatShortCurrency } from '../../../../../../utils/transform'
|
||||
import MultipleSeries from '../../../../../../views/dashboards/profit-loss/EarningReportWithTabs'
|
||||
import { DailyData, ProfitLossReport } from '../../../../../../types/services/analytic'
|
||||
import { TextField, Typography, useTheme } from '@mui/material'
|
||||
import Loading from '../../../../../../components/layout/shared/Loading'
|
||||
|
||||
const DashboardProfitloss = () => {
|
||||
const theme = useTheme()
|
||||
|
||||
const today = new Date()
|
||||
const monthAgo = new Date()
|
||||
monthAgo.setDate(today.getDate() - 30)
|
||||
|
||||
const [filter, setFilter] = useState({
|
||||
date_from: new Date().setDate(new Date().getDate() - 30).toString(),
|
||||
date_to: new Date().toString()
|
||||
date_from: formatDateDDMMYYYY(monthAgo),
|
||||
date_to: formatDateDDMMYYYY(today)
|
||||
})
|
||||
|
||||
// Sample data - replace with your actual data
|
||||
const { data: profitData, isLoading } = useProfitLossAnalytics({
|
||||
date_from: formatDateDDMMYYYY(filter.date_from),
|
||||
date_to: formatDateDDMMYYYY(filter.date_to)
|
||||
date_from: filter.date_from,
|
||||
date_to: filter.date_to
|
||||
})
|
||||
|
||||
const formatCurrency = (amount: any) => {
|
||||
@ -99,303 +104,319 @@ const DashboardProfitloss = () => {
|
||||
|
||||
return (
|
||||
<>
|
||||
{profitData && (
|
||||
<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'>
|
||||
Profit Analysis Dashboard
|
||||
</Typography>
|
||||
<div className='flex items-center gap-4'>
|
||||
<TextField
|
||||
type='date'
|
||||
value={new Date(profitData.date_from).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>
|
||||
{/* 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'>
|
||||
Profit Analysis Dashboard
|
||||
</Typography>
|
||||
<div className='flex items-center gap-4'>
|
||||
<TextField
|
||||
type='date'
|
||||
value={formatForInputDate(profitData?.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
|
||||
}
|
||||
}}
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<Typography>-</Typography>
|
||||
<TextField
|
||||
type='date'
|
||||
value={
|
||||
profitData?.date_to
|
||||
? new Date(profitData?.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>
|
||||
|
||||
{profitData ? (
|
||||
<>
|
||||
<div className='grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8'>
|
||||
<MetricCard
|
||||
iconClass='tabler-currency-dollar'
|
||||
title='Total Revenue'
|
||||
value={formatShortCurrency(profitData.summary.total_revenue)}
|
||||
bgColor='bg-green-500'
|
||||
isCurrency={true}
|
||||
/>
|
||||
<Typography>-</Typography>
|
||||
<TextField
|
||||
type='date'
|
||||
value={new Date(profitData.date_to).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
|
||||
}
|
||||
}
|
||||
}}
|
||||
<MetricCard
|
||||
iconClass='tabler-receipt'
|
||||
title='Total Cost'
|
||||
value={formatShortCurrency(profitData.summary.total_cost)}
|
||||
bgColor='bg-red-500'
|
||||
isCurrency={true}
|
||||
/>
|
||||
<MetricCard
|
||||
iconClass='tabler-trending-up'
|
||||
title='Gross Profit'
|
||||
value={formatShortCurrency(profitData.summary.gross_profit)}
|
||||
subtitle={`Margin: ${formatPercentage(profitData.summary.gross_profit_margin)}`}
|
||||
bgColor='bg-blue-500'
|
||||
isNegative={profitData.summary.gross_profit < 0}
|
||||
isCurrency={true}
|
||||
/>
|
||||
<MetricCard
|
||||
iconClass='tabler-percentage'
|
||||
title='Profitability Ratio'
|
||||
value={formatPercentage(profitData.summary.profitability_ratio)}
|
||||
subtitle={`Avg Profit: ${formatShortCurrency(profitData.summary.average_profit)}`}
|
||||
bgColor='bg-purple-500'
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Summary Metrics */}
|
||||
<div className='grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8'>
|
||||
<MetricCard
|
||||
iconClass='tabler-currency-dollar'
|
||||
title='Total Revenue'
|
||||
value={formatShortCurrency(profitData.summary.total_revenue)}
|
||||
bgColor='bg-green-500'
|
||||
isCurrency={true}
|
||||
/>
|
||||
<MetricCard
|
||||
iconClass='tabler-receipt'
|
||||
title='Total Cost'
|
||||
value={formatShortCurrency(profitData.summary.total_cost)}
|
||||
bgColor='bg-red-500'
|
||||
isCurrency={true}
|
||||
/>
|
||||
<MetricCard
|
||||
iconClass='tabler-trending-up'
|
||||
title='Gross Profit'
|
||||
value={formatShortCurrency(profitData.summary.gross_profit)}
|
||||
subtitle={`Margin: ${formatPercentage(profitData.summary.gross_profit_margin)}`}
|
||||
bgColor='bg-blue-500'
|
||||
isNegative={profitData.summary.gross_profit < 0}
|
||||
isCurrency={true}
|
||||
/>
|
||||
<MetricCard
|
||||
iconClass='tabler-percentage'
|
||||
title='Profitability Ratio'
|
||||
value={formatPercentage(profitData.summary.profitability_ratio)}
|
||||
subtitle={`Avg Profit: ${formatShortCurrency(profitData.summary.average_profit)}`}
|
||||
bgColor='bg-purple-500'
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Additional Summary Metrics */}
|
||||
<div className='grid grid-cols-1 md:grid-cols-3 gap-6 mb-8'>
|
||||
<div className='bg-white rounded-lg shadow-md p-6'>
|
||||
<div className='flex items-center mb-4'>
|
||||
<i className='tabler-wallet text-[24px] text-green-600 mr-2'></i>
|
||||
<h3 className='text-lg font-semibold text-gray-900'>Net Profit</h3>
|
||||
{/* Additional Summary Metrics */}
|
||||
<div className='grid grid-cols-1 md:grid-cols-3 gap-6 mb-8'>
|
||||
<div className='bg-white rounded-lg shadow-md p-6'>
|
||||
<div className='flex items-center mb-4'>
|
||||
<i className='tabler-wallet text-[24px] text-green-600 mr-2'></i>
|
||||
<h3 className='text-lg font-semibold text-gray-900'>Net Profit</h3>
|
||||
</div>
|
||||
<p className='text-3xl font-bold text-green-600 mb-2'>
|
||||
Rp {formatShortCurrency(profitData.summary.net_profit)}
|
||||
</p>
|
||||
<p className='text-sm text-gray-600'>
|
||||
Margin: {formatPercentage(profitData.summary.net_profit_margin)}
|
||||
</p>
|
||||
</div>
|
||||
<p className='text-3xl font-bold text-green-600 mb-2'>
|
||||
Rp {formatShortCurrency(profitData.summary.net_profit)}
|
||||
</p>
|
||||
<p className='text-sm text-gray-600'>Margin: {formatPercentage(profitData.summary.net_profit_margin)}</p>
|
||||
</div>
|
||||
<div className='bg-white rounded-lg shadow-md p-6'>
|
||||
<div className='flex items-center mb-4'>
|
||||
<i className='tabler-shopping-cart text-[24px] text-blue-600 mr-2'></i>
|
||||
<h3 className='text-lg font-semibold text-gray-900'>Total Orders</h3>
|
||||
<div className='bg-white rounded-lg shadow-md p-6'>
|
||||
<div className='flex items-center mb-4'>
|
||||
<i className='tabler-shopping-cart text-[24px] text-blue-600 mr-2'></i>
|
||||
<h3 className='text-lg font-semibold text-gray-900'>Total Orders</h3>
|
||||
</div>
|
||||
<p className='text-3xl font-bold text-blue-600'>{profitData.summary.total_orders}</p>
|
||||
</div>
|
||||
<p className='text-3xl font-bold text-blue-600'>{profitData.summary.total_orders}</p>
|
||||
</div>
|
||||
<div className='bg-white rounded-lg shadow-md p-6'>
|
||||
<div className='flex items-center mb-4'>
|
||||
<i className='tabler-discount text-[24px] text-orange-600 mr-2'></i>
|
||||
<h3 className='text-lg font-semibold text-gray-900'>Tax & Discount</h3>
|
||||
<div className='bg-white rounded-lg shadow-md p-6'>
|
||||
<div className='flex items-center mb-4'>
|
||||
<i className='tabler-discount text-[24px] text-orange-600 mr-2'></i>
|
||||
<h3 className='text-lg font-semibold text-gray-900'>Tax & Discount</h3>
|
||||
</div>
|
||||
<p className='text-xl font-bold text-orange-600 mb-1'>
|
||||
Rp {formatShortCurrency(profitData.summary.total_tax + profitData.summary.total_discount)}
|
||||
</p>
|
||||
<p className='text-sm text-gray-600'>
|
||||
Tax: {formatShortCurrency(profitData.summary.total_tax)} | Discount:{' '}
|
||||
{formatShortCurrency(profitData.summary.total_discount)}
|
||||
</p>
|
||||
</div>
|
||||
<p className='text-xl font-bold text-orange-600 mb-1'>
|
||||
Rp {formatShortCurrency(profitData.summary.total_tax + profitData.summary.total_discount)}
|
||||
</p>
|
||||
<p className='text-sm text-gray-600'>
|
||||
Tax: {formatShortCurrency(profitData.summary.total_tax)} | Discount:{' '}
|
||||
{formatShortCurrency(profitData.summary.total_discount)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Profit Chart */}
|
||||
<div className='mb-8'>
|
||||
<MultipleSeries data={transformMultipleData(profitData)} />
|
||||
</div>
|
||||
{/* Profit Chart */}
|
||||
<div className='mb-8'>
|
||||
<MultipleSeries data={transformMultipleData(profitData)} />
|
||||
</div>
|
||||
|
||||
<div className='grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8'>
|
||||
{/* Daily Breakdown */}
|
||||
<div className='grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8'>
|
||||
{/* Daily Breakdown */}
|
||||
<div className='bg-white rounded-lg shadow-md'>
|
||||
<div className='p-6'>
|
||||
<div className='flex items-center mb-6'>
|
||||
<i className='tabler-calendar text-[24px] text-purple-500 mr-2'></i>
|
||||
<h2 className='text-xl font-semibold text-gray-900'>Daily Breakdown</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'>Date</th>
|
||||
<th className='px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase'>Revenue</th>
|
||||
<th className='px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase'>Cost</th>
|
||||
<th className='px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase'>Profit</th>
|
||||
<th className='px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase'>Margin</th>
|
||||
<th className='px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase'>Orders</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className='bg-white divide-y divide-gray-200'>
|
||||
{profitData.data.map((day, 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(day.date)}
|
||||
</td>
|
||||
<td className='px-4 py-4 whitespace-nowrap text-right text-sm text-gray-900'>
|
||||
{formatCurrency(day.revenue)}
|
||||
</td>
|
||||
<td className='px-4 py-4 whitespace-nowrap text-right text-sm text-red-600'>
|
||||
{formatCurrency(day.cost)}
|
||||
</td>
|
||||
<td
|
||||
className={`px-4 py-4 whitespace-nowrap text-right text-sm font-medium ${
|
||||
day.gross_profit >= 0 ? 'text-green-600' : 'text-red-600'
|
||||
}`}
|
||||
>
|
||||
{formatCurrency(day.gross_profit)}
|
||||
</td>
|
||||
<td className='px-4 py-4 whitespace-nowrap text-right'>
|
||||
<span
|
||||
className={`inline-flex px-2 py-1 text-xs font-semibold rounded-full ${getProfitabilityColor(
|
||||
day.gross_profit_margin
|
||||
)}`}
|
||||
>
|
||||
{formatPercentage(day.gross_profit_margin)}
|
||||
</span>
|
||||
</td>
|
||||
<td className='px-4 py-4 whitespace-nowrap text-right text-sm text-gray-900'>
|
||||
{day.orders}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Top Performing Products */}
|
||||
<div className='bg-white rounded-lg shadow-md'>
|
||||
<div className='p-6'>
|
||||
<div className='flex items-center mb-6'>
|
||||
<i className='tabler-trophy text-[24px] text-gold-500 mr-2'></i>
|
||||
<h2 className='text-xl font-semibold text-gray-900'>Top Performers</h2>
|
||||
</div>
|
||||
<div className='space-y-4'>
|
||||
{profitData.product_data
|
||||
.sort((a, b) => b.gross_profit - a.gross_profit)
|
||||
.slice(0, 5)
|
||||
.map((product, index) => (
|
||||
<div
|
||||
key={product.product_id}
|
||||
className='flex items-center justify-between p-4 bg-gray-50 rounded-lg'
|
||||
>
|
||||
<div className='flex items-center'>
|
||||
<span
|
||||
className={`w-8 h-8 rounded-full flex items-center justify-center text-white text-sm font-bold mr-3 ${
|
||||
index === 0
|
||||
? 'bg-yellow-500'
|
||||
: index === 1
|
||||
? 'bg-gray-400'
|
||||
: index === 2
|
||||
? 'bg-orange-500'
|
||||
: 'bg-blue-500'
|
||||
}`}
|
||||
>
|
||||
{index + 1}
|
||||
</span>
|
||||
<div>
|
||||
<h3 className='font-medium text-gray-900'>{product.product_name}</h3>
|
||||
<p className='text-sm text-gray-600'>{product.category_name}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className='text-right'>
|
||||
<p className={`font-bold ${product.gross_profit >= 0 ? 'text-green-600' : 'text-red-600'}`}>
|
||||
{formatCurrency(product.gross_profit)}
|
||||
</p>
|
||||
<p className='text-xs text-gray-500'>{formatPercentage(product.gross_profit_margin)}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Product Analysis Table */}
|
||||
<div className='bg-white rounded-lg shadow-md'>
|
||||
<div className='p-6'>
|
||||
<div className='flex items-center mb-6'>
|
||||
<i className='tabler-calendar text-[24px] text-purple-500 mr-2'></i>
|
||||
<h2 className='text-xl font-semibold text-gray-900'>Daily Breakdown</h2>
|
||||
<i className='tabler-package text-[24px] text-green-500 mr-2'></i>
|
||||
<h2 className='text-xl font-semibold text-gray-900'>Product Analysis</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'>Date</th>
|
||||
<th className='px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase'>Product</th>
|
||||
<th className='px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase'>Category</th>
|
||||
<th className='px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase'>Qty</th>
|
||||
<th className='px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase'>Revenue</th>
|
||||
<th className='px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase'>Cost</th>
|
||||
<th className='px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase'>Profit</th>
|
||||
<th className='px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase'>Margin</th>
|
||||
<th className='px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase'>Orders</th>
|
||||
<th className='px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase'>Per Unit</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className='bg-white divide-y divide-gray-200'>
|
||||
{profitData.data.map((day, 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(day.date)}
|
||||
</td>
|
||||
<td className='px-4 py-4 whitespace-nowrap text-right text-sm text-gray-900'>
|
||||
{formatCurrency(day.revenue)}
|
||||
</td>
|
||||
<td className='px-4 py-4 whitespace-nowrap text-right text-sm text-red-600'>
|
||||
{formatCurrency(day.cost)}
|
||||
</td>
|
||||
<td
|
||||
className={`px-4 py-4 whitespace-nowrap text-right text-sm font-medium ${
|
||||
day.gross_profit >= 0 ? 'text-green-600' : 'text-red-600'
|
||||
}`}
|
||||
>
|
||||
{formatCurrency(day.gross_profit)}
|
||||
</td>
|
||||
<td className='px-4 py-4 whitespace-nowrap text-right'>
|
||||
<span
|
||||
className={`inline-flex px-2 py-1 text-xs font-semibold rounded-full ${getProfitabilityColor(
|
||||
day.gross_profit_margin
|
||||
)}`}
|
||||
{profitData.product_data
|
||||
.sort((a, b) => b.gross_profit - a.gross_profit)
|
||||
.map(product => (
|
||||
<tr key={product.product_id} className='hover:bg-gray-50'>
|
||||
<td className='px-4 py-4 whitespace-nowrap'>
|
||||
<div className='text-sm font-medium text-gray-900'>{product.product_name}</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 text-gray-900'>
|
||||
{product.quantity_sold}
|
||||
</td>
|
||||
<td className='px-4 py-4 whitespace-nowrap text-right text-sm text-gray-900'>
|
||||
{formatCurrency(product.revenue)}
|
||||
</td>
|
||||
<td className='px-4 py-4 whitespace-nowrap text-right text-sm text-red-600'>
|
||||
{formatCurrency(product.cost)}
|
||||
</td>
|
||||
<td
|
||||
className={`px-4 py-4 whitespace-nowrap text-right text-sm font-medium ${
|
||||
product.gross_profit >= 0 ? 'text-green-600' : 'text-red-600'
|
||||
}`}
|
||||
>
|
||||
{formatPercentage(day.gross_profit_margin)}
|
||||
</span>
|
||||
</td>
|
||||
<td className='px-4 py-4 whitespace-nowrap text-right text-sm text-gray-900'>{day.orders}</td>
|
||||
</tr>
|
||||
))}
|
||||
{formatCurrency(product.gross_profit)}
|
||||
</td>
|
||||
<td className='px-4 py-4 whitespace-nowrap text-right'>
|
||||
<span
|
||||
className={`inline-flex px-2 py-1 text-xs font-semibold rounded-full ${getProfitabilityColor(
|
||||
product.gross_profit_margin
|
||||
)}`}
|
||||
>
|
||||
{formatPercentage(product.gross_profit_margin)}
|
||||
</span>
|
||||
</td>
|
||||
<td
|
||||
className={`px-4 py-4 whitespace-nowrap text-right text-sm ${
|
||||
product.profit_per_unit >= 0 ? 'text-green-600' : 'text-red-600'
|
||||
}`}
|
||||
>
|
||||
{formatCurrency(product.profit_per_unit)}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Top Performing Products */}
|
||||
<div className='bg-white rounded-lg shadow-md'>
|
||||
<div className='p-6'>
|
||||
<div className='flex items-center mb-6'>
|
||||
<i className='tabler-trophy text-[24px] text-gold-500 mr-2'></i>
|
||||
<h2 className='text-xl font-semibold text-gray-900'>Top Performers</h2>
|
||||
</div>
|
||||
<div className='space-y-4'>
|
||||
{profitData.product_data
|
||||
.sort((a, b) => b.gross_profit - a.gross_profit)
|
||||
.slice(0, 5)
|
||||
.map((product, index) => (
|
||||
<div
|
||||
key={product.product_id}
|
||||
className='flex items-center justify-between p-4 bg-gray-50 rounded-lg'
|
||||
>
|
||||
<div className='flex items-center'>
|
||||
<span
|
||||
className={`w-8 h-8 rounded-full flex items-center justify-center text-white text-sm font-bold mr-3 ${
|
||||
index === 0
|
||||
? 'bg-yellow-500'
|
||||
: index === 1
|
||||
? 'bg-gray-400'
|
||||
: index === 2
|
||||
? 'bg-orange-500'
|
||||
: 'bg-blue-500'
|
||||
}`}
|
||||
>
|
||||
{index + 1}
|
||||
</span>
|
||||
<div>
|
||||
<h3 className='font-medium text-gray-900'>{product.product_name}</h3>
|
||||
<p className='text-sm text-gray-600'>{product.category_name}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className='text-right'>
|
||||
<p className={`font-bold ${product.gross_profit >= 0 ? 'text-green-600' : 'text-red-600'}`}>
|
||||
{formatCurrency(product.gross_profit)}
|
||||
</p>
|
||||
<p className='text-xs text-gray-500'>{formatPercentage(product.gross_profit_margin)}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Product Analysis Table */}
|
||||
<div className='bg-white rounded-lg shadow-md'>
|
||||
<div className='p-6'>
|
||||
<div className='flex items-center mb-6'>
|
||||
<i className='tabler-package text-[24px] text-green-500 mr-2'></i>
|
||||
<h2 className='text-xl font-semibold text-gray-900'>Product Analysis</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'>Product</th>
|
||||
<th className='px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase'>Category</th>
|
||||
<th className='px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase'>Qty</th>
|
||||
<th className='px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase'>Revenue</th>
|
||||
<th className='px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase'>Cost</th>
|
||||
<th className='px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase'>Profit</th>
|
||||
<th className='px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase'>Margin</th>
|
||||
<th className='px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase'>Per Unit</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className='bg-white divide-y divide-gray-200'>
|
||||
{profitData.product_data
|
||||
.sort((a, b) => b.gross_profit - a.gross_profit)
|
||||
.map(product => (
|
||||
<tr key={product.product_id} className='hover:bg-gray-50'>
|
||||
<td className='px-4 py-4 whitespace-nowrap'>
|
||||
<div className='text-sm font-medium text-gray-900'>{product.product_name}</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 text-gray-900'>
|
||||
{product.quantity_sold}
|
||||
</td>
|
||||
<td className='px-4 py-4 whitespace-nowrap text-right text-sm text-gray-900'>
|
||||
{formatCurrency(product.revenue)}
|
||||
</td>
|
||||
<td className='px-4 py-4 whitespace-nowrap text-right text-sm text-red-600'>
|
||||
{formatCurrency(product.cost)}
|
||||
</td>
|
||||
<td
|
||||
className={`px-4 py-4 whitespace-nowrap text-right text-sm font-medium ${
|
||||
product.gross_profit >= 0 ? 'text-green-600' : 'text-red-600'
|
||||
}`}
|
||||
>
|
||||
{formatCurrency(product.gross_profit)}
|
||||
</td>
|
||||
<td className='px-4 py-4 whitespace-nowrap text-right'>
|
||||
<span
|
||||
className={`inline-flex px-2 py-1 text-xs font-semibold rounded-full ${getProfitabilityColor(
|
||||
product.gross_profit_margin
|
||||
)}`}
|
||||
>
|
||||
{formatPercentage(product.gross_profit_margin)}
|
||||
</span>
|
||||
</td>
|
||||
<td
|
||||
className={`px-4 py-4 whitespace-nowrap text-right text-sm ${
|
||||
product.profit_per_unit >= 0 ? 'text-green-600' : 'text-red-600'
|
||||
}`}
|
||||
>
|
||||
{formatCurrency(product.profit_per_unit)}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
<Loading />
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
@ -2,7 +2,7 @@ import { CircularProgress } from '@mui/material'
|
||||
|
||||
export default function Loading({ size = 60 }: { size?: number }) {
|
||||
return (
|
||||
<div className='fixed inset-0 z-50 flex items-center justify-center bg-white/70'>
|
||||
<div className='absolute inset-0 z-50 flex items-center justify-center bg-white/70'>
|
||||
<CircularProgress size={size} />
|
||||
</div>
|
||||
)
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
import axios from 'axios'
|
||||
import { toast } from 'react-toastify'
|
||||
|
||||
const getToken = () => {
|
||||
return localStorage.getItem('authToken')
|
||||
@ -40,7 +41,7 @@ api.interceptors.response.use(
|
||||
}
|
||||
|
||||
if (status >= 500) {
|
||||
console.error('Server error:', error.response?.data?.message || 'Terjadi kesalahan server.')
|
||||
toast.error(error.response?.data?.errors[0].cause || 'Terjadi kesalahan server.')
|
||||
}
|
||||
|
||||
return Promise.reject(error)
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import { useMutation, useQueryClient } from '@tanstack/react-query'
|
||||
import { api } from '../api'
|
||||
import { toast } from 'react-toastify'
|
||||
import { InventoryAdjustRequest, InventoryRequest } from '../../types/services/inventory'
|
||||
import { InventoryAdjustRequest, InventoryRequest, InventoryRestockRequest } from '../../types/services/inventory'
|
||||
|
||||
export const useInventoriesMutation = () => {
|
||||
const queryClient = useQueryClient()
|
||||
@ -34,6 +34,24 @@ export const useInventoriesMutation = () => {
|
||||
}
|
||||
})
|
||||
|
||||
const restockInventory = useMutation({
|
||||
mutationFn: async (newInventory: InventoryRestockRequest) => {
|
||||
newInventory.items.map(item => {
|
||||
item.quantity = Number(item.quantity)
|
||||
})
|
||||
|
||||
const response = await api.post('/inventory/restock', newInventory)
|
||||
return response.data
|
||||
},
|
||||
onSuccess: () => {
|
||||
toast.success('Inventory restock successfully!')
|
||||
queryClient.invalidateQueries({ queryKey: ['inventories'] })
|
||||
},
|
||||
onError: (error: any) => {
|
||||
toast.error(error.response?.data?.errors?.[0]?.cause || 'Create failed')
|
||||
}
|
||||
})
|
||||
|
||||
const deleteInventory = useMutation({
|
||||
mutationFn: async (id: string) => {
|
||||
const response = await api.delete(`/inventory/${id}`)
|
||||
@ -48,5 +66,5 @@ export const useInventoriesMutation = () => {
|
||||
}
|
||||
})
|
||||
|
||||
return { createInventory, adjustInventory, deleteInventory }
|
||||
return { createInventory, adjustInventory, deleteInventory, restockInventory }
|
||||
}
|
||||
|
||||
@ -29,3 +29,15 @@ export interface InventoryAdjustRequest {
|
||||
delta: number
|
||||
reason: string
|
||||
}
|
||||
|
||||
export interface Item {
|
||||
item_id: string
|
||||
item_type: string
|
||||
quantity: number | string
|
||||
}
|
||||
|
||||
export interface InventoryRestockRequest {
|
||||
outlet_id: string
|
||||
items: Item[]
|
||||
reason: string
|
||||
}
|
||||
|
||||
@ -36,12 +36,22 @@ export const formatDate = (dateString: any) => {
|
||||
|
||||
export const formatDateDDMMYYYY = (dateString: Date | string) => {
|
||||
const date = new Date(dateString)
|
||||
date.setHours(0, 0, 0, 0)
|
||||
const day = String(date.getDate()).padStart(2, '0')
|
||||
const month = String(date.getMonth() + 1).padStart(2, '0')
|
||||
const year = date.getFullYear()
|
||||
return `${day}-${month}-${year}`
|
||||
}
|
||||
|
||||
export const formatForInputDate = (dateString: Date | string) => {
|
||||
const date = new Date(dateString)
|
||||
const day = String(date.getDate()).padStart(2, '0')
|
||||
const month = String(date.getMonth() + 1).padStart(2, '0')
|
||||
const year = date.getFullYear()
|
||||
return `${year}-${month}-${day}`
|
||||
}
|
||||
|
||||
|
||||
export const formatDatetime = (dateString: string | number | Date) => {
|
||||
const date = new Date(dateString)
|
||||
|
||||
|
||||
@ -220,13 +220,13 @@ const ProductListTable = () => {
|
||||
<div className='flex items-center'>
|
||||
<IconButton
|
||||
LinkComponent={Link}
|
||||
href={getLocalizedUrl(`/apps/ecommerce/products/${row.original.id}/detail`, locale as Locale)}
|
||||
href={getLocalizedUrl(`/apps/inventory/products/${row.original.id}/detail`, locale as Locale)}
|
||||
>
|
||||
<i className='tabler-eye text-textSecondary' />
|
||||
</IconButton>
|
||||
<IconButton
|
||||
LinkComponent={Link}
|
||||
href={getLocalizedUrl(`/apps/ecommerce/products/${row.original.id}/edit`, locale as Locale)}
|
||||
href={getLocalizedUrl(`/apps/inventory/products/${row.original.id}/edit`, locale as Locale)}
|
||||
>
|
||||
<i className='tabler-edit text-textSecondary' />
|
||||
</IconButton>
|
||||
|
||||
@ -14,12 +14,12 @@ import Typography from '@mui/material/Typography'
|
||||
|
||||
// Components Imports
|
||||
import CustomTextField from '@core/components/mui/TextField'
|
||||
import { Autocomplete, CircularProgress } from '@mui/material'
|
||||
import { Autocomplete, CircularProgress, MenuItem } from '@mui/material'
|
||||
import { useDebounce } from 'use-debounce'
|
||||
import { useInventoriesMutation } from '../../../../../services/mutations/inventories'
|
||||
import { useOutlets } from '../../../../../services/queries/outlets'
|
||||
import { useProducts } from '../../../../../services/queries/products'
|
||||
import { InventoryAdjustRequest } from '../../../../../types/services/inventory'
|
||||
import { InventoryRestockRequest, Item } from '../../../../../types/services/inventory'
|
||||
|
||||
type Props = {
|
||||
open: boolean
|
||||
@ -30,17 +30,22 @@ const AdjustmentStockDrawer = (props: Props) => {
|
||||
// Props
|
||||
const { open, handleClose } = props
|
||||
|
||||
const { mutate: adjustInventory, isPending: isCreating } = useInventoriesMutation().adjustInventory
|
||||
const { restockInventory } = useInventoriesMutation()
|
||||
|
||||
// States
|
||||
const [productInput, setProductInput] = useState('')
|
||||
const [productDebouncedInput] = useDebounce(productInput, 500) // debounce for better UX
|
||||
const [outletInput, setOutletInput] = useState('')
|
||||
const [outletDebouncedInput] = useDebounce(outletInput, 500) // debounce for better UX
|
||||
const [formData, setFormData] = useState<InventoryAdjustRequest>({
|
||||
product_id: '',
|
||||
const [formData, setFormData] = useState<InventoryRestockRequest>({
|
||||
outlet_id: '',
|
||||
delta: 0,
|
||||
items: [
|
||||
{
|
||||
item_id: '',
|
||||
item_type: '',
|
||||
quantity: 0
|
||||
}
|
||||
],
|
||||
reason: ''
|
||||
})
|
||||
|
||||
@ -58,14 +63,11 @@ const AdjustmentStockDrawer = (props: Props) => {
|
||||
const handleFormSubmit = (e: any) => {
|
||||
e.preventDefault()
|
||||
|
||||
adjustInventory(
|
||||
{ ...formData, delta: Number(formData.delta) },
|
||||
{
|
||||
onSuccess: () => {
|
||||
handleReset()
|
||||
}
|
||||
restockInventory.mutate(formData, {
|
||||
onSuccess: () => {
|
||||
handleReset()
|
||||
}
|
||||
)
|
||||
})
|
||||
}
|
||||
|
||||
const handleInputChange = (e: any) => {
|
||||
@ -79,9 +81,14 @@ const AdjustmentStockDrawer = (props: Props) => {
|
||||
const handleReset = () => {
|
||||
handleClose()
|
||||
setFormData({
|
||||
product_id: '',
|
||||
outlet_id: '',
|
||||
delta: 0,
|
||||
items: [
|
||||
{
|
||||
item_id: '',
|
||||
item_type: '',
|
||||
quantity: 0
|
||||
}
|
||||
],
|
||||
reason: ''
|
||||
})
|
||||
}
|
||||
@ -136,18 +143,33 @@ const AdjustmentStockDrawer = (props: Props) => {
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<CustomTextField
|
||||
select
|
||||
fullWidth
|
||||
label='Item Type'
|
||||
value={formData.items[0]?.item_type || ''}
|
||||
onChange={e => setFormData({ ...formData, items: [{ ...formData.items[0], item_type: e.target.value }] })}
|
||||
>
|
||||
<MenuItem value='PRODUCT'>Product</MenuItem>
|
||||
<MenuItem value='IGREDIENT'>Ingredient</MenuItem>
|
||||
</CustomTextField>
|
||||
<Autocomplete
|
||||
options={options}
|
||||
loading={isLoading}
|
||||
getOptionLabel={option => option.name}
|
||||
value={options.find(p => p.id === formData.product_id) || null}
|
||||
value={options.find(p => p.id === formData.items[0].item_id) || null}
|
||||
onInputChange={(event, newProductInput) => {
|
||||
setProductInput(newProductInput)
|
||||
}}
|
||||
onChange={(event, newValue) => {
|
||||
setFormData({
|
||||
...formData,
|
||||
product_id: newValue?.id || ''
|
||||
items: [
|
||||
{
|
||||
...formData.items[0],
|
||||
item_id: newValue?.id || ''
|
||||
}
|
||||
]
|
||||
})
|
||||
}}
|
||||
renderInput={params => (
|
||||
@ -170,10 +192,20 @@ const AdjustmentStockDrawer = (props: Props) => {
|
||||
/>
|
||||
<CustomTextField
|
||||
fullWidth
|
||||
label='Delta'
|
||||
name='delta'
|
||||
value={formData.delta}
|
||||
onChange={handleInputChange}
|
||||
label='Quantity'
|
||||
name='quantity'
|
||||
value={formData.items[0].quantity}
|
||||
onChange={e =>
|
||||
setFormData({
|
||||
...formData,
|
||||
items: [
|
||||
{
|
||||
...formData.items[0],
|
||||
quantity: e.target.value
|
||||
}
|
||||
]
|
||||
})
|
||||
}
|
||||
placeholder='0'
|
||||
/>
|
||||
<CustomTextField
|
||||
@ -187,8 +219,8 @@ const AdjustmentStockDrawer = (props: Props) => {
|
||||
placeholder='Write a Comment...'
|
||||
/>
|
||||
<div className='flex items-center gap-4'>
|
||||
<Button variant='contained' type='submit' disabled={isCreating}>
|
||||
{isCreating ? 'Adjusting...' : 'Adjust'}
|
||||
<Button variant='contained' type='submit' disabled={restockInventory.isPending}>
|
||||
{restockInventory.isPending ? 'Saving...' : 'Save'}
|
||||
</Button>
|
||||
<Button variant='tonal' color='error' type='reset' onClick={handleReset}>
|
||||
Discard
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user