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>
|
<MenuItem href={`/${locale}/dashboards/daily-report`}>{dictionary['navigation'].dailyReport}</MenuItem>
|
||||||
</SubMenu>
|
</SubMenu>
|
||||||
<MenuSection label={dictionary['navigation'].appsPages}>
|
<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'].inventory} icon={<i className='tabler-salad' />}>
|
||||||
<SubMenu label={dictionary['navigation'].products}>
|
<SubMenu label={dictionary['navigation'].products}>
|
||||||
<MenuItem href={`/${locale}/apps/inventory/products/list`}>{dictionary['navigation'].list}</MenuItem>
|
<MenuItem href={`/${locale}/apps/inventory/products/list`}>{dictionary['navigation'].list}</MenuItem>
|
||||||
|
|||||||
@ -112,6 +112,7 @@
|
|||||||
"menuLevel3": "Menu Level 3",
|
"menuLevel3": "Menu Level 3",
|
||||||
"disabledMenu": "Disabled Menu",
|
"disabledMenu": "Disabled Menu",
|
||||||
"dailyReport": "Daily Report",
|
"dailyReport": "Daily Report",
|
||||||
"vendor": "Vendor"
|
"vendor": "Vendor",
|
||||||
|
"sales": "Sales"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -112,6 +112,7 @@
|
|||||||
"menuLevel3": "Level Menu 3",
|
"menuLevel3": "Level Menu 3",
|
||||||
"disabledMenu": "Menu Nonaktif",
|
"disabledMenu": "Menu Nonaktif",
|
||||||
"dailyReport": "Laporan Harian",
|
"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