Sales Overview Page
This commit is contained in:
efrilm
parent
dfa6b4be75
commit
5dc62b8390
@ -0,0 +1,86 @@
|
||||
'use client'
|
||||
|
||||
import Grid from '@mui/material/Grid2'
|
||||
|
||||
import { TextField, Typography, useTheme } from '@mui/material'
|
||||
import { useState } from 'react'
|
||||
import { formatDateDDMMYYYY, formatForInputDate } from '@/utils/transform'
|
||||
import SalesOverviewRight from '@/views/apps/sales/overview/overview-right'
|
||||
import SalesOverviewLeft from '@/views/apps/sales/overview/overview-left'
|
||||
|
||||
const SalesOverviewPage = () => {
|
||||
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)
|
||||
})
|
||||
|
||||
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(today || 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={today}
|
||||
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>
|
||||
<Grid container spacing={6} className='mt-5'>
|
||||
<Grid size={{ xs: 12, lg: 8, md: 7 }}>
|
||||
<SalesOverviewRight />
|
||||
</Grid>
|
||||
<Grid size={{ xs: 12, lg: 4, md: 5 }}>
|
||||
<SalesOverviewLeft />
|
||||
</Grid>
|
||||
</Grid>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default SalesOverviewPage
|
||||
@ -91,6 +91,10 @@ const VerticalMenu = ({ dictionary, scrollMenu }: Props) => {
|
||||
<MenuItem href={`/${locale}/dashboards/daily-report`}>{dictionary['navigation'].dailyReport}</MenuItem>
|
||||
</SubMenu>
|
||||
<MenuSection label={dictionary['navigation'].appsPages}>
|
||||
<SubMenu label={dictionary['navigation'].sales} icon={<i className='tabler-user' />}>
|
||||
<MenuItem href={`/${locale}/apps/sales/overview`}>{dictionary['navigation'].overview}</MenuItem>
|
||||
{/* <MenuItem href={`/${locale}/apps/user/view`}>{dictionary['navigation'].view}</MenuItem> */}
|
||||
</SubMenu>
|
||||
<SubMenu label={dictionary['navigation'].inventory} icon={<i className='tabler-salad' />}>
|
||||
<SubMenu label={dictionary['navigation'].products}>
|
||||
<MenuItem href={`/${locale}/apps/inventory/products/list`}>{dictionary['navigation'].list}</MenuItem>
|
||||
|
||||
@ -112,6 +112,7 @@
|
||||
"menuLevel3": "Menu Level 3",
|
||||
"disabledMenu": "Disabled Menu",
|
||||
"dailyReport": "Daily Report",
|
||||
"vendor": "Vendor"
|
||||
"vendor": "Vendor",
|
||||
"sales": "Sales"
|
||||
}
|
||||
}
|
||||
|
||||
@ -112,6 +112,7 @@
|
||||
"menuLevel3": "Level Menu 3",
|
||||
"disabledMenu": "Menu Nonaktif",
|
||||
"dailyReport": "Laporan Harian",
|
||||
"vendor": "Vendor"
|
||||
"vendor": "Vendor",
|
||||
"sales": "Penjualan"
|
||||
}
|
||||
}
|
||||
|
||||
@ -0,0 +1,187 @@
|
||||
'use client'
|
||||
|
||||
// React Imports
|
||||
import { useState } from 'react'
|
||||
|
||||
// Next Imports
|
||||
import dynamic from 'next/dynamic'
|
||||
|
||||
// MUI Imports
|
||||
import Card from '@mui/material/Card'
|
||||
import CardHeader from '@mui/material/CardHeader'
|
||||
import CardContent from '@mui/material/CardContent'
|
||||
import Button from '@mui/material/Button'
|
||||
import ButtonGroup from '@mui/material/ButtonGroup'
|
||||
import Table from '@mui/material/Table'
|
||||
import TableBody from '@mui/material/TableBody'
|
||||
import TableCell from '@mui/material/TableCell'
|
||||
import TableContainer from '@mui/material/TableContainer'
|
||||
import TableHead from '@mui/material/TableHead'
|
||||
import TableRow from '@mui/material/TableRow'
|
||||
import TableFooter from '@mui/material/TableFooter'
|
||||
import Typography from '@mui/material/Typography'
|
||||
|
||||
// Third Party Imports
|
||||
import type { ApexOptions } from 'apexcharts'
|
||||
|
||||
// Components Imports
|
||||
import OptionMenu from '@core/components/option-menu'
|
||||
|
||||
// Styled Component Imports
|
||||
const AppReactApexCharts = dynamic(() => import('@/libs/styles/AppReactApexCharts'))
|
||||
|
||||
// Data
|
||||
const customerData = [
|
||||
{ pelanggan: 'Mumpuni Imam Rajata...', perusahaan: 'Fa Hassanah', nilai: 14117300 },
|
||||
{ pelanggan: 'Balangga Saefullah M...', perusahaan: 'CV Siregar Prasetya Tbk', nilai: 12520640 },
|
||||
{ pelanggan: 'Jais Mursita Adrians...', perusahaan: 'UD Sinaga Waluyo', nilai: 12174120 },
|
||||
{ pelanggan: 'Paramita Wijayanti M...', perusahaan: 'PD Waluyo Yuniar', nilai: 11001060 },
|
||||
{ pelanggan: 'Putri Puji Pertiwi S...', perusahaan: 'CV Wahyudin Tbk', nilai: 9175560 },
|
||||
{ pelanggan: 'Lainnya', perusahaan: '', nilai: 63285770 }
|
||||
]
|
||||
|
||||
const totalNilai = customerData.reduce((sum, item) => sum + item.nilai, 0)
|
||||
|
||||
// Chart series and colors
|
||||
const series = customerData.map(item => item.nilai)
|
||||
const colors = ['#FF6B9D', '#FFD93D', '#6BCF7F', '#4D96FF', '#B39DDB', '#E91E63']
|
||||
|
||||
const SalesCustomerSalesChart = () => {
|
||||
const [activeView, setActiveView] = useState<'chart' | 'table'>('chart')
|
||||
|
||||
const options: ApexOptions = {
|
||||
chart: {
|
||||
type: 'donut'
|
||||
},
|
||||
labels: customerData.map(item => item.pelanggan),
|
||||
colors: colors,
|
||||
legend: {
|
||||
position: 'bottom',
|
||||
horizontalAlign: 'center',
|
||||
fontSize: '14px',
|
||||
markers: {
|
||||
width: 12,
|
||||
height: 12,
|
||||
radius: 2
|
||||
},
|
||||
itemMargin: {
|
||||
horizontal: 15,
|
||||
vertical: 5
|
||||
}
|
||||
},
|
||||
plotOptions: {
|
||||
pie: {
|
||||
donut: {
|
||||
size: '70%'
|
||||
}
|
||||
}
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
tooltip: {
|
||||
y: {
|
||||
formatter: function (val) {
|
||||
return 'Rp ' + val.toLocaleString('id-ID')
|
||||
}
|
||||
}
|
||||
},
|
||||
stroke: {
|
||||
width: 2,
|
||||
colors: ['#fff']
|
||||
}
|
||||
}
|
||||
|
||||
const formatCurrency = (amount: number): string => {
|
||||
return amount.toLocaleString('id-ID')
|
||||
}
|
||||
|
||||
return (
|
||||
<Card className='mt-5'>
|
||||
<CardHeader
|
||||
title='Penjualan Per Pelanggan Tahun Ini'
|
||||
action={
|
||||
<div className='flex items-center gap-2'>
|
||||
<div className='w-4 h-4 bg-gray-300 rounded cursor-pointer'></div>
|
||||
<OptionMenu options={['View More', 'Delete']} />
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
<CardContent>
|
||||
{/* Content based on active view */}
|
||||
{activeView === 'chart' ? (
|
||||
// Donut Chart View (Slide 1)
|
||||
<div className='flex flex-col items-center'>
|
||||
<AppReactApexCharts
|
||||
id='customer-sales-donut'
|
||||
type='donut'
|
||||
height={350}
|
||||
width='100%'
|
||||
series={series}
|
||||
options={options}
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
// Table View (Slide 2)
|
||||
<TableContainer>
|
||||
<Table>
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
<TableCell sx={{ fontWeight: 600 }}>Pelanggan</TableCell>
|
||||
<TableCell align='right' sx={{ fontWeight: 600 }}>
|
||||
Nilai
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{customerData.map((row, index) => (
|
||||
<TableRow key={index}>
|
||||
<TableCell>
|
||||
<div>
|
||||
<Typography variant='body2' sx={{ fontWeight: 500 }}>
|
||||
{row.pelanggan}
|
||||
</Typography>
|
||||
{row.perusahaan && (
|
||||
<Typography variant='caption' color='text.secondary'>
|
||||
{row.perusahaan}
|
||||
</Typography>
|
||||
)}
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell align='right'>{formatCurrency(row.nilai)}</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
<TableFooter>
|
||||
<TableRow sx={{ backgroundColor: '#f5f5f5' }}>
|
||||
<TableCell sx={{ fontWeight: 700, fontSize: '14px' }}>Total</TableCell>
|
||||
<TableCell align='right' sx={{ fontWeight: 700, fontSize: '14px' }}>
|
||||
{formatCurrency(totalNilai)}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</TableFooter>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
)}
|
||||
|
||||
{/* Two dot indicators at bottom */}
|
||||
<div className='flex justify-center items-center gap-2 mt-6'>
|
||||
<div
|
||||
className={`w-3 h-3 rounded-full cursor-pointer transition-colors ${
|
||||
activeView === 'chart' ? 'bg-blue-500' : 'bg-gray-300'
|
||||
}`}
|
||||
onClick={() => setActiveView('chart')}
|
||||
></div>
|
||||
<div
|
||||
className={`w-3 h-3 rounded-full cursor-pointer transition-colors ${
|
||||
activeView === 'table' ? 'bg-blue-500' : 'bg-gray-300'
|
||||
}`}
|
||||
onClick={() => setActiveView('table')}
|
||||
></div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
|
||||
export default SalesCustomerSalesChart
|
||||
@ -0,0 +1,104 @@
|
||||
'use client'
|
||||
|
||||
// Next Imports
|
||||
import dynamic from 'next/dynamic'
|
||||
|
||||
// MUI Imports
|
||||
import Card from '@mui/material/Card'
|
||||
import CardHeader from '@mui/material/CardHeader'
|
||||
import CardContent from '@mui/material/CardContent'
|
||||
|
||||
// Third Party Imports
|
||||
import type { ApexOptions } from 'apexcharts'
|
||||
|
||||
// Components Imports
|
||||
import OptionMenu from '@core/components/option-menu'
|
||||
|
||||
// Styled Component Imports
|
||||
const AppReactApexCharts = dynamic(() => import('@/libs/styles/AppReactApexCharts'))
|
||||
|
||||
// Vars
|
||||
const series = [52.2]
|
||||
|
||||
const SalesPaymentRatioGaugeChart = () => {
|
||||
const options: ApexOptions = {
|
||||
chart: {
|
||||
type: 'radialBar',
|
||||
sparkline: {
|
||||
enabled: true
|
||||
}
|
||||
},
|
||||
plotOptions: {
|
||||
radialBar: {
|
||||
startAngle: -90,
|
||||
endAngle: 90,
|
||||
track: {
|
||||
background: '#e7e7e7',
|
||||
strokeWidth: '97%',
|
||||
margin: 5,
|
||||
dropShadow: {
|
||||
enabled: false
|
||||
}
|
||||
},
|
||||
hollow: {
|
||||
margin: 15,
|
||||
size: '70%'
|
||||
},
|
||||
dataLabels: {
|
||||
name: {
|
||||
show: false
|
||||
},
|
||||
value: {
|
||||
offsetY: -10,
|
||||
fontSize: '32px',
|
||||
fontWeight: 'bold',
|
||||
color: '#1f2937',
|
||||
formatter: function (val) {
|
||||
return val + '%'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
padding: {
|
||||
top: -10
|
||||
}
|
||||
},
|
||||
fill: {
|
||||
type: 'gradient',
|
||||
gradient: {
|
||||
shade: 'light',
|
||||
shadeIntensity: 0.4,
|
||||
inverseColors: false,
|
||||
opacityFrom: 1,
|
||||
opacityTo: 1,
|
||||
stops: [0, 50, 53, 91]
|
||||
}
|
||||
},
|
||||
colors: ['#3b82f6'],
|
||||
stroke: {
|
||||
dashArray: 4
|
||||
},
|
||||
labels: ['Rasio Lunas']
|
||||
}
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader title='Rasio Lunas' action={<OptionMenu options={['View More', 'Delete']} />} />
|
||||
<CardContent className='flex flex-col items-center pb-6'>
|
||||
<AppReactApexCharts
|
||||
id='rasio-lunas-gauge'
|
||||
type='radialBar'
|
||||
height={280}
|
||||
width='100%'
|
||||
series={series}
|
||||
options={options}
|
||||
/>
|
||||
<div className='text-sm text-gray-500 text-center mt-4 max-w-xs'>Tagihan lunas vs total Tagihan tahun ini</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
|
||||
export default SalesPaymentRatioGaugeChart
|
||||
@ -0,0 +1,218 @@
|
||||
'use client'
|
||||
|
||||
// React Imports
|
||||
import { useState } from 'react'
|
||||
|
||||
// Next Imports
|
||||
import dynamic from 'next/dynamic'
|
||||
|
||||
// MUI Imports
|
||||
import Card from '@mui/material/Card'
|
||||
import CardHeader from '@mui/material/CardHeader'
|
||||
import CardContent from '@mui/material/CardContent'
|
||||
import Button from '@mui/material/Button'
|
||||
import ButtonGroup from '@mui/material/ButtonGroup'
|
||||
import Table from '@mui/material/Table'
|
||||
import TableBody from '@mui/material/TableBody'
|
||||
import TableCell from '@mui/material/TableCell'
|
||||
import TableContainer from '@mui/material/TableContainer'
|
||||
import TableHead from '@mui/material/TableHead'
|
||||
import TableRow from '@mui/material/TableRow'
|
||||
import TableFooter from '@mui/material/TableFooter'
|
||||
import Typography from '@mui/material/Typography'
|
||||
|
||||
// Third Party Imports
|
||||
import type { ApexOptions } from 'apexcharts'
|
||||
|
||||
// Components Imports
|
||||
import OptionMenu from '@core/components/option-menu'
|
||||
|
||||
// Styled Component Imports
|
||||
const AppReactApexCharts = dynamic(() => import('@/libs/styles/AppReactApexCharts'))
|
||||
|
||||
// Data
|
||||
const productData = [
|
||||
{ kategori: 'Dress', jumlah: 174, nilai: 70629279 },
|
||||
{ kategori: 'Tshirt', jumlah: 163, nilai: 31667892 },
|
||||
{ kategori: 'Shoes', jumlah: 27, nilai: 13473000 },
|
||||
{ kategori: 'Misc', jumlah: 128, nilai: 123937 }
|
||||
]
|
||||
|
||||
const totalJumlah = productData.reduce((sum, item) => sum + item.jumlah, 0)
|
||||
const totalNilai = productData.reduce((sum, item) => sum + item.nilai, 0)
|
||||
|
||||
// Chart series and colors
|
||||
const series = productData.map(item => item.nilai)
|
||||
const colors = ['#FF6B9D', '#FFD93D', '#6BCF7F', '#4D96FF']
|
||||
|
||||
const SalesProductSalesChart = () => {
|
||||
const [activeView, setActiveView] = useState<'chart' | 'table'>('chart')
|
||||
|
||||
const options: ApexOptions = {
|
||||
chart: {
|
||||
type: 'donut'
|
||||
},
|
||||
labels: productData.map(item => item.kategori),
|
||||
colors: colors,
|
||||
legend: {
|
||||
position: 'bottom',
|
||||
horizontalAlign: 'center',
|
||||
fontSize: '14px',
|
||||
markers: {
|
||||
width: 12,
|
||||
height: 12,
|
||||
radius: 2
|
||||
},
|
||||
itemMargin: {
|
||||
horizontal: 15,
|
||||
vertical: 5
|
||||
}
|
||||
},
|
||||
plotOptions: {
|
||||
pie: {
|
||||
donut: {
|
||||
size: '70%'
|
||||
}
|
||||
}
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
tooltip: {
|
||||
y: {
|
||||
formatter: function (val) {
|
||||
return 'Rp ' + val.toLocaleString('id-ID')
|
||||
}
|
||||
}
|
||||
},
|
||||
stroke: {
|
||||
width: 2,
|
||||
colors: ['#fff']
|
||||
}
|
||||
}
|
||||
|
||||
const formatCurrency = (amount: number): string => {
|
||||
return amount.toLocaleString('id-ID')
|
||||
}
|
||||
|
||||
return (
|
||||
<Card className='mt-5'>
|
||||
<CardHeader
|
||||
title='Penjualan Per Produk Tahun Ini'
|
||||
action={
|
||||
<div className='flex items-center gap-2'>
|
||||
<div className='w-4 h-4 bg-gray-300 rounded cursor-pointer'></div>
|
||||
<OptionMenu options={['View More', 'Delete']} />
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
<CardContent>
|
||||
{/* Toggle Buttons */}
|
||||
<div className='flex justify-center mb-6'>
|
||||
<ButtonGroup size='small'>
|
||||
<Button
|
||||
variant={activeView === 'chart' ? 'contained' : 'outlined'}
|
||||
onClick={() => setActiveView('chart')}
|
||||
sx={{
|
||||
minWidth: '120px',
|
||||
backgroundColor: activeView === 'chart' ? '#36175e' : 'transparent',
|
||||
color: activeView === 'chart' ? 'white' : '#36175e',
|
||||
borderColor: '#36175e',
|
||||
'&:hover': {
|
||||
backgroundColor: activeView === 'chart' ? '#36175e' : 'rgba(25, 118, 210, 0.04)'
|
||||
}
|
||||
}}
|
||||
>
|
||||
Jenis Produk
|
||||
</Button>
|
||||
<Button
|
||||
variant={activeView === 'table' ? 'contained' : 'outlined'}
|
||||
onClick={() => setActiveView('table')}
|
||||
sx={{
|
||||
minWidth: '120px',
|
||||
backgroundColor: activeView === 'table' ? '#36175e' : 'transparent',
|
||||
color: activeView === 'table' ? 'white' : '#36175e',
|
||||
borderColor: '#36175e',
|
||||
'&:hover': {
|
||||
backgroundColor: activeView === 'table' ? '#36175e' : 'rgba(25, 118, 210, 0.04)'
|
||||
}
|
||||
}}
|
||||
>
|
||||
Kategori
|
||||
</Button>
|
||||
</ButtonGroup>
|
||||
</div>
|
||||
|
||||
{/* Content based on active view */}
|
||||
{activeView === 'chart' ? (
|
||||
// Donut Chart View (Slide 1)
|
||||
<div className='flex flex-col items-center'>
|
||||
<AppReactApexCharts
|
||||
id='product-sales-donut'
|
||||
type='donut'
|
||||
height={350}
|
||||
width='100%'
|
||||
series={series}
|
||||
options={options}
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
// Table View (Slide 2)
|
||||
<TableContainer>
|
||||
<Table>
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
<TableCell sx={{ fontWeight: 600 }}>Kategori</TableCell>
|
||||
<TableCell align='center' sx={{ fontWeight: 600 }}>
|
||||
Jml
|
||||
</TableCell>
|
||||
<TableCell align='right' sx={{ fontWeight: 600 }}>
|
||||
Nilai
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{productData.map((row, index) => (
|
||||
<TableRow key={index}>
|
||||
<TableCell>{row.kategori}</TableCell>
|
||||
<TableCell align='center'>{row.jumlah}</TableCell>
|
||||
<TableCell align='right'>{formatCurrency(row.nilai)}</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
<TableFooter>
|
||||
<TableRow sx={{ backgroundColor: '#f5f5f5' }}>
|
||||
<TableCell sx={{ fontWeight: 700, fontSize: '14px' }}>Total</TableCell>
|
||||
<TableCell align='center' sx={{ fontWeight: 700, fontSize: '14px' }}>
|
||||
{totalJumlah}
|
||||
</TableCell>
|
||||
<TableCell align='right' sx={{ fontWeight: 700, fontSize: '14px' }}>
|
||||
{formatCurrency(totalNilai)}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</TableFooter>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
)}
|
||||
|
||||
{/* Two dot indicators at bottom */}
|
||||
<div className='flex justify-center items-center gap-2 mt-6'>
|
||||
<div
|
||||
className={`w-3 h-3 rounded-full cursor-pointer transition-colors ${
|
||||
activeView === 'chart' ? 'bg-primary' : 'bg-gray-300'
|
||||
}`}
|
||||
onClick={() => setActiveView('chart')}
|
||||
></div>
|
||||
<div
|
||||
className={`w-3 h-3 rounded-full cursor-pointer transition-colors ${
|
||||
activeView === 'table' ? 'bg-primary' : 'bg-gray-300'
|
||||
}`}
|
||||
onClick={() => setActiveView('table')}
|
||||
></div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
|
||||
export default SalesProductSalesChart
|
||||
15
src/views/apps/sales/overview/overview-left/index.tsx
Normal file
15
src/views/apps/sales/overview/overview-left/index.tsx
Normal file
@ -0,0 +1,15 @@
|
||||
import SalesCustomerSalesChart from './SalesCustomerSalesChart'
|
||||
import SalesPaymentRatioGaugeChart from './SalesPaymentRatioGaugeChart'
|
||||
import SalesProductSalesChart from './SalesProductChart'
|
||||
|
||||
const SalesOverviewLeft = () => {
|
||||
return (
|
||||
<>
|
||||
<SalesPaymentRatioGaugeChart />
|
||||
<SalesProductSalesChart />
|
||||
<SalesCustomerSalesChart />
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default SalesOverviewLeft
|
||||
@ -0,0 +1,157 @@
|
||||
'use client'
|
||||
|
||||
// Next Imports
|
||||
import dynamic from 'next/dynamic'
|
||||
|
||||
// MUI Imports
|
||||
import Card from '@mui/material/Card'
|
||||
import CardHeader from '@mui/material/CardHeader'
|
||||
import CardContent from '@mui/material/CardContent'
|
||||
|
||||
// Third Party Imports
|
||||
import type { ApexOptions } from 'apexcharts'
|
||||
|
||||
// Components Imports
|
||||
import OptionMenu from '@core/components/option-menu'
|
||||
|
||||
// Styled Component Imports
|
||||
const AppReactApexCharts = dynamic(() => import('@/libs/styles/AppReactApexCharts'))
|
||||
|
||||
// Styles Imports
|
||||
import './styles.css'
|
||||
|
||||
// Vars
|
||||
const colors = {
|
||||
tagihan: '#28C76F',
|
||||
pembayaran: '#EA5455'
|
||||
}
|
||||
|
||||
const labelColor = 'var(--mui-palette-text-disabled)'
|
||||
const bodyColor = 'var(--mui-palette-text-secondary)'
|
||||
const borderColor = 'var(--mui-palette-divider)'
|
||||
|
||||
const series = [
|
||||
{
|
||||
name: 'Tagihan',
|
||||
type: 'column',
|
||||
data: [1250, 1180, 1350, 1450, 1200, 1520, 1380, 1150, 1650, 1400, 1290, 1700]
|
||||
},
|
||||
{
|
||||
name: 'Pembayaran',
|
||||
type: 'column',
|
||||
data: [950, 880, 1050, 1150, 900, 1220, 1080, 850, 1350, 1100, 990, 1400]
|
||||
}
|
||||
]
|
||||
|
||||
const SalesBillPaymentChart = () => {
|
||||
const options: ApexOptions = {
|
||||
chart: {
|
||||
parentHeightOffset: 0,
|
||||
stacked: false,
|
||||
toolbar: {
|
||||
show: false
|
||||
},
|
||||
zoom: {
|
||||
enabled: false
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
enabled: true,
|
||||
y: {
|
||||
formatter: function (val) {
|
||||
return 'Rp ' + val.toLocaleString('id-ID') + '.000'
|
||||
}
|
||||
}
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: false,
|
||||
columnWidth: '60%',
|
||||
borderRadius: 4
|
||||
}
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
xaxis: {
|
||||
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'Mei', 'Jun', 'Jul', 'Agu', 'Sep', 'Okt', 'Nov', 'Des'],
|
||||
labels: {
|
||||
style: {
|
||||
colors: labelColor,
|
||||
fontSize: '13px',
|
||||
fontFamily: 'Public Sans',
|
||||
fontWeight: 400
|
||||
}
|
||||
},
|
||||
axisBorder: {
|
||||
show: false
|
||||
},
|
||||
axisTicks: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
yaxis: {
|
||||
tickAmount: 5,
|
||||
max: 1800,
|
||||
min: 0,
|
||||
labels: {
|
||||
style: {
|
||||
colors: labelColor,
|
||||
fontSize: '13px',
|
||||
fontFamily: 'Public Sans',
|
||||
fontWeight: 400
|
||||
},
|
||||
formatter(val: number) {
|
||||
return 'Rp ' + val + 'rb'
|
||||
}
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
markers: {
|
||||
width: 8,
|
||||
height: 8,
|
||||
offsetX: -3,
|
||||
radius: 12
|
||||
},
|
||||
height: 33,
|
||||
offsetY: 10,
|
||||
itemMargin: {
|
||||
horizontal: 10,
|
||||
vertical: 0
|
||||
},
|
||||
fontSize: '13px',
|
||||
fontFamily: 'Public Sans',
|
||||
fontWeight: 400,
|
||||
labels: {
|
||||
colors: bodyColor,
|
||||
useSeriesColors: false
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
borderColor,
|
||||
strokeDashArray: 6
|
||||
},
|
||||
colors: [colors.tagihan, colors.pembayaran],
|
||||
fill: {
|
||||
opacity: 1
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Card className='mt-5'>
|
||||
<CardHeader title='Tagihan & Pembayaran' action={<OptionMenu options={['View More', 'Delete']} />} />
|
||||
<CardContent>
|
||||
<AppReactApexCharts
|
||||
id='tagihan-pembayaran'
|
||||
type='bar'
|
||||
height={360}
|
||||
width='100%'
|
||||
series={series}
|
||||
options={options}
|
||||
/>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
|
||||
export default SalesBillPaymentChart
|
||||
@ -0,0 +1,62 @@
|
||||
// MUI Imports
|
||||
import Grid from '@mui/material/Grid2'
|
||||
|
||||
// Type Imports
|
||||
import type { UserDataType } from '@components/card-statistics/HorizontalWithSubtitle'
|
||||
|
||||
// Component Imports
|
||||
import HorizontalWithSubtitle from '@components/card-statistics/HorizontalWithSubtitle'
|
||||
|
||||
// Vars
|
||||
const data: UserDataType[] = [
|
||||
{
|
||||
title: 'PENJUALAN',
|
||||
stats: '122.274.450',
|
||||
avatarIcon: 'tabler-trending-up',
|
||||
avatarColor: 'success',
|
||||
trend: 'positive',
|
||||
trendNumber: '162,3%',
|
||||
subtitle: '46 Tagihan Tahun Ini'
|
||||
},
|
||||
{
|
||||
title: 'PEMBAYARAN DITERIMA',
|
||||
stats: '66.742.440',
|
||||
avatarIcon: 'tabler-trending-up',
|
||||
avatarColor: 'success',
|
||||
trend: 'positive',
|
||||
trendNumber: '175,6%',
|
||||
subtitle: '27 Tagihan Tahun Ini'
|
||||
},
|
||||
{
|
||||
title: 'MENUNGGU PEMBAYARAN',
|
||||
stats: '55.532.009',
|
||||
avatarIcon: 'tabler-trending-up',
|
||||
avatarColor: 'success',
|
||||
trend: 'positive',
|
||||
trendNumber: '149,6%',
|
||||
subtitle: '22 Tagihan'
|
||||
},
|
||||
{
|
||||
title: 'JATUH TEMPO',
|
||||
stats: '48.246.990',
|
||||
avatarIcon: 'tabler-clock-exclamation',
|
||||
avatarColor: 'error',
|
||||
trend: 'negative',
|
||||
trendNumber: '89,9%',
|
||||
subtitle: '16 Tagihan'
|
||||
}
|
||||
]
|
||||
|
||||
const SalesOverviewCards = () => {
|
||||
return (
|
||||
<Grid container spacing={6}>
|
||||
{data.map((item, i) => (
|
||||
<Grid key={i} size={{ xs: 12, sm: 6 }}>
|
||||
<HorizontalWithSubtitle {...item} />
|
||||
</Grid>
|
||||
))}
|
||||
</Grid>
|
||||
)
|
||||
}
|
||||
|
||||
export default SalesOverviewCards
|
||||
@ -0,0 +1,152 @@
|
||||
'use client'
|
||||
|
||||
// Next Imports
|
||||
import dynamic from 'next/dynamic'
|
||||
|
||||
// MUI Imports
|
||||
import Card from '@mui/material/Card'
|
||||
import CardHeader from '@mui/material/CardHeader'
|
||||
import CardContent from '@mui/material/CardContent'
|
||||
|
||||
// Third Party Imports
|
||||
import type { ApexOptions } from 'apexcharts'
|
||||
|
||||
// Components Imports
|
||||
import OptionMenu from '@core/components/option-menu'
|
||||
|
||||
// Styled Component Imports
|
||||
const AppReactApexCharts = dynamic(() => import('@/libs/styles/AppReactApexCharts'))
|
||||
|
||||
// Styles Imports
|
||||
import './styles.css'
|
||||
|
||||
// Vars
|
||||
const labelColor = 'var(--mui-palette-text-disabled)'
|
||||
const bodyColor = 'var(--mui-palette-text-secondary)'
|
||||
const borderColor = 'var(--mui-palette-divider)'
|
||||
|
||||
const series = [
|
||||
{
|
||||
name: 'Pembayaran Diterima',
|
||||
data: [0, 0, 0, 0, 0, 67000000]
|
||||
}
|
||||
]
|
||||
|
||||
const SalesPaymentReceivedChart = () => {
|
||||
const options: ApexOptions = {
|
||||
chart: {
|
||||
parentHeightOffset: 0,
|
||||
toolbar: {
|
||||
show: false
|
||||
},
|
||||
zoom: {
|
||||
enabled: false
|
||||
}
|
||||
},
|
||||
stroke: {
|
||||
width: 3,
|
||||
curve: 'smooth'
|
||||
},
|
||||
markers: {
|
||||
size: 6,
|
||||
colors: ['#00CFE8'],
|
||||
strokeColors: '#fff',
|
||||
strokeWidth: 2,
|
||||
hover: {
|
||||
size: 8
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
enabled: true,
|
||||
y: {
|
||||
formatter: function (val) {
|
||||
return 'Rp ' + val.toLocaleString('id-ID')
|
||||
}
|
||||
}
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
xaxis: {
|
||||
categories: ['2020', '2021', '2022', '2023', '2024', '2025'],
|
||||
labels: {
|
||||
style: {
|
||||
colors: labelColor,
|
||||
fontSize: '13px',
|
||||
fontFamily: 'Public Sans',
|
||||
fontWeight: 400
|
||||
}
|
||||
},
|
||||
axisBorder: {
|
||||
show: false
|
||||
},
|
||||
axisTicks: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
yaxis: {
|
||||
tickAmount: 7,
|
||||
max: 70000000,
|
||||
min: 0,
|
||||
labels: {
|
||||
style: {
|
||||
colors: labelColor,
|
||||
fontSize: '13px',
|
||||
fontFamily: 'Public Sans',
|
||||
fontWeight: 400
|
||||
},
|
||||
formatter(val: number) {
|
||||
if (val === 0) return '0'
|
||||
return (val / 1000000).toFixed(0) + '.000.000'
|
||||
}
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
show: false
|
||||
},
|
||||
grid: {
|
||||
borderColor,
|
||||
strokeDashArray: 6,
|
||||
xaxis: {
|
||||
lines: {
|
||||
show: true
|
||||
}
|
||||
},
|
||||
yaxis: {
|
||||
lines: {
|
||||
show: true
|
||||
}
|
||||
}
|
||||
},
|
||||
colors: ['#00CFE8'],
|
||||
fill: {
|
||||
opacity: 1
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Card className='mt-5'>
|
||||
<CardHeader
|
||||
title='Pembayaran Diterima'
|
||||
action={
|
||||
<div className='flex items-center gap-2'>
|
||||
<div className='w-4 h-4 bg-gray-300 rounded cursor-pointer'></div>
|
||||
<OptionMenu options={['View More', 'Delete']} />
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
<CardContent>
|
||||
<AppReactApexCharts
|
||||
id='pembayaran-diterima'
|
||||
type='line'
|
||||
height={360}
|
||||
width='100%'
|
||||
series={series}
|
||||
options={options}
|
||||
/>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
|
||||
export default SalesPaymentReceivedChart
|
||||
@ -0,0 +1,174 @@
|
||||
'use client'
|
||||
|
||||
// Next Imports
|
||||
import dynamic from 'next/dynamic'
|
||||
|
||||
// MUI Imports
|
||||
import Card from '@mui/material/Card'
|
||||
import CardHeader from '@mui/material/CardHeader'
|
||||
import CardContent from '@mui/material/CardContent'
|
||||
|
||||
// Third Party Imports
|
||||
import type { ApexOptions } from 'apexcharts'
|
||||
|
||||
// Components Imports
|
||||
import OptionMenu from '@core/components/option-menu'
|
||||
|
||||
// Styled Component Imports
|
||||
const AppReactApexCharts = dynamic(() => import('@/libs/styles/AppReactApexCharts'))
|
||||
|
||||
// Styles Imports
|
||||
import './styles.css'
|
||||
|
||||
// Vars
|
||||
const colors = ['#EA5455', '#FFB830', '#28C76F', '#00CFE8', '#795548', '#E91E63']
|
||||
|
||||
const labelColor = 'var(--mui-palette-text-disabled)'
|
||||
const bodyColor = 'var(--mui-palette-text-secondary)'
|
||||
const borderColor = 'var(--mui-palette-divider)'
|
||||
|
||||
const series = [
|
||||
{
|
||||
name: '2020',
|
||||
data: [1850]
|
||||
},
|
||||
{
|
||||
name: '2021',
|
||||
data: [2150]
|
||||
},
|
||||
{
|
||||
name: '2022',
|
||||
data: [2450]
|
||||
},
|
||||
{
|
||||
name: '2023',
|
||||
data: [2750]
|
||||
},
|
||||
{
|
||||
name: '2024',
|
||||
data: [3050]
|
||||
},
|
||||
{
|
||||
name: '2025',
|
||||
data: [3350]
|
||||
}
|
||||
]
|
||||
|
||||
const SalesPerPersonChart = () => {
|
||||
const options: ApexOptions = {
|
||||
chart: {
|
||||
parentHeightOffset: 0,
|
||||
toolbar: {
|
||||
show: false
|
||||
},
|
||||
zoom: {
|
||||
enabled: false
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
enabled: true,
|
||||
y: {
|
||||
formatter: function (val) {
|
||||
return 'Rp ' + val.toLocaleString('id-ID') + '.000'
|
||||
}
|
||||
}
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: false,
|
||||
columnWidth: '60%',
|
||||
borderRadius: 6,
|
||||
dataLabels: {
|
||||
position: 'top'
|
||||
}
|
||||
}
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
xaxis: {
|
||||
categories: ['Jason Marc'],
|
||||
labels: {
|
||||
style: {
|
||||
colors: labelColor,
|
||||
fontSize: '13px',
|
||||
fontFamily: 'Public Sans',
|
||||
fontWeight: 400
|
||||
}
|
||||
},
|
||||
axisBorder: {
|
||||
show: false
|
||||
},
|
||||
axisTicks: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
yaxis: {
|
||||
labels: {
|
||||
style: {
|
||||
colors: labelColor,
|
||||
fontSize: '13px',
|
||||
fontFamily: 'Public Sans',
|
||||
fontWeight: 400
|
||||
}
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
markers: {
|
||||
width: 8,
|
||||
height: 8,
|
||||
offsetX: -3,
|
||||
radius: 12
|
||||
},
|
||||
height: 40,
|
||||
offsetY: 10,
|
||||
itemMargin: {
|
||||
horizontal: 10,
|
||||
vertical: 0
|
||||
},
|
||||
fontSize: '13px',
|
||||
fontFamily: 'Public Sans',
|
||||
fontWeight: 400,
|
||||
labels: {
|
||||
colors: bodyColor,
|
||||
useSeriesColors: false
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
borderColor,
|
||||
strokeDashArray: 6,
|
||||
xaxis: {
|
||||
lines: {
|
||||
show: true
|
||||
}
|
||||
},
|
||||
yaxis: {
|
||||
lines: {
|
||||
show: false
|
||||
}
|
||||
}
|
||||
},
|
||||
colors: colors,
|
||||
fill: {
|
||||
opacity: 1
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Card className='mt-5'>
|
||||
<CardHeader title='Penjualan per Sales Person' action={<OptionMenu options={['View More', 'Delete']} />} />
|
||||
<CardContent>
|
||||
<AppReactApexCharts
|
||||
id='penjualan-per-sales-person'
|
||||
type='bar'
|
||||
height={360}
|
||||
width='100%'
|
||||
series={series}
|
||||
options={options}
|
||||
/>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
|
||||
export default SalesPerPersonChart
|
||||
17
src/views/apps/sales/overview/overview-right/index.tsx
Normal file
17
src/views/apps/sales/overview/overview-right/index.tsx
Normal file
@ -0,0 +1,17 @@
|
||||
import SalesBillPaymentChart from './SalesBillPaymentChart'
|
||||
import SalesOverviewCards from './SalesOverviewCards'
|
||||
import SalesPaymentReceivedChart from './SalesPaymentReceivedChart'
|
||||
import SalesPerPersonChart from './SalesPerPersonChart'
|
||||
|
||||
const SalesOverviewRight = () => {
|
||||
return (
|
||||
<>
|
||||
<SalesOverviewCards />
|
||||
<SalesBillPaymentChart />
|
||||
<SalesPaymentReceivedChart />
|
||||
<SalesPerPersonChart />
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default SalesOverviewRight
|
||||
15
src/views/apps/sales/overview/overview-right/styles.css
Normal file
15
src/views/apps/sales/overview/overview-right/styles.css
Normal file
@ -0,0 +1,15 @@
|
||||
#tagihan-pembayaran .apexcharts-legend .apexcharts-legend-series {
|
||||
border: 1px solid var(--mui-palette-divider);
|
||||
border-radius: var(--mui-shape-borderRadius);
|
||||
block-size: 83%;
|
||||
padding-block: 4px;
|
||||
padding-inline: 16px;
|
||||
}
|
||||
|
||||
#penjualan-per-sales-person .apexcharts-legend .apexcharts-legend-series {
|
||||
border: 1px solid var(--mui-palette-divider);
|
||||
border-radius: var(--mui-shape-borderRadius);
|
||||
block-size: 83%;
|
||||
padding-block: 4px;
|
||||
padding-inline: 16px;
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user