diff --git a/src/app/[lang]/(dashboard)/(private)/apps/sales/overview/page.tsx b/src/app/[lang]/(dashboard)/(private)/apps/sales/overview/page.tsx new file mode 100644 index 0000000..dcdbea9 --- /dev/null +++ b/src/app/[lang]/(dashboard)/(private)/apps/sales/overview/page.tsx @@ -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 ( + <> + + +
+ + Orders Analysis Dashboard + +
+ { + 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 + } + } + }} + /> + - + {}} + 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 + } + } + }} + /> +
+
+ + + + + + + + + + + + ) +} + +export default SalesOverviewPage diff --git a/src/components/layout/vertical/VerticalMenu.tsx b/src/components/layout/vertical/VerticalMenu.tsx index 648248d..59a197e 100644 --- a/src/components/layout/vertical/VerticalMenu.tsx +++ b/src/components/layout/vertical/VerticalMenu.tsx @@ -91,6 +91,10 @@ const VerticalMenu = ({ dictionary, scrollMenu }: Props) => { {dictionary['navigation'].dailyReport} + }> + {dictionary['navigation'].overview} + {/* {dictionary['navigation'].view} */} + }> {dictionary['navigation'].list} diff --git a/src/data/dictionaries/en.json b/src/data/dictionaries/en.json index 9904156..30b4549 100644 --- a/src/data/dictionaries/en.json +++ b/src/data/dictionaries/en.json @@ -112,6 +112,7 @@ "menuLevel3": "Menu Level 3", "disabledMenu": "Disabled Menu", "dailyReport": "Daily Report", - "vendor": "Vendor" + "vendor": "Vendor", + "sales": "Sales" } } diff --git a/src/data/dictionaries/id.json b/src/data/dictionaries/id.json index af683c1..6dd0497 100644 --- a/src/data/dictionaries/id.json +++ b/src/data/dictionaries/id.json @@ -112,6 +112,7 @@ "menuLevel3": "Level Menu 3", "disabledMenu": "Menu Nonaktif", "dailyReport": "Laporan Harian", - "vendor": "Vendor" + "vendor": "Vendor", + "sales": "Penjualan" } } diff --git a/src/views/apps/sales/overview/overview-left/SalesCustomerSalesChart.tsx b/src/views/apps/sales/overview/overview-left/SalesCustomerSalesChart.tsx new file mode 100644 index 0000000..0b51a29 --- /dev/null +++ b/src/views/apps/sales/overview/overview-left/SalesCustomerSalesChart.tsx @@ -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 ( + + +
+ + + } + /> + + {/* Content based on active view */} + {activeView === 'chart' ? ( + // Donut Chart View (Slide 1) +
+ +
+ ) : ( + // Table View (Slide 2) + + + + + Pelanggan + + Nilai + + + + + {customerData.map((row, index) => ( + + +
+ + {row.pelanggan} + + {row.perusahaan && ( + + {row.perusahaan} + + )} +
+ + {formatCurrency(row.nilai)} + + ))} + + + + Total + + {formatCurrency(totalNilai)} + + + +
+ + )} + + {/* Two dot indicators at bottom */} +
+
setActiveView('chart')} + >
+
setActiveView('table')} + >
+
+ + + ) +} + +export default SalesCustomerSalesChart diff --git a/src/views/apps/sales/overview/overview-left/SalesPaymentRatioGaugeChart.tsx b/src/views/apps/sales/overview/overview-left/SalesPaymentRatioGaugeChart.tsx new file mode 100644 index 0000000..23a5540 --- /dev/null +++ b/src/views/apps/sales/overview/overview-left/SalesPaymentRatioGaugeChart.tsx @@ -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 ( + + } /> + + +
Tagihan lunas vs total Tagihan tahun ini
+ + + ) +} + +export default SalesPaymentRatioGaugeChart diff --git a/src/views/apps/sales/overview/overview-left/SalesProductChart.tsx b/src/views/apps/sales/overview/overview-left/SalesProductChart.tsx new file mode 100644 index 0000000..237be40 --- /dev/null +++ b/src/views/apps/sales/overview/overview-left/SalesProductChart.tsx @@ -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 ( + + +
+ + + } + /> + + {/* Toggle Buttons */} +
+ + + + +
+ + {/* Content based on active view */} + {activeView === 'chart' ? ( + // Donut Chart View (Slide 1) +
+ +
+ ) : ( + // Table View (Slide 2) + + + + + Kategori + + Jml + + + Nilai + + + + + {productData.map((row, index) => ( + + {row.kategori} + {row.jumlah} + {formatCurrency(row.nilai)} + + ))} + + + + Total + + {totalJumlah} + + + {formatCurrency(totalNilai)} + + + +
+ + )} + + {/* Two dot indicators at bottom */} +
+
setActiveView('chart')} + >
+
setActiveView('table')} + >
+
+ + + ) +} + +export default SalesProductSalesChart diff --git a/src/views/apps/sales/overview/overview-left/index.tsx b/src/views/apps/sales/overview/overview-left/index.tsx new file mode 100644 index 0000000..f87a461 --- /dev/null +++ b/src/views/apps/sales/overview/overview-left/index.tsx @@ -0,0 +1,15 @@ +import SalesCustomerSalesChart from './SalesCustomerSalesChart' +import SalesPaymentRatioGaugeChart from './SalesPaymentRatioGaugeChart' +import SalesProductSalesChart from './SalesProductChart' + +const SalesOverviewLeft = () => { + return ( + <> + + + + + ) +} + +export default SalesOverviewLeft diff --git a/src/views/apps/sales/overview/overview-right/SalesBillPaymentChart.tsx b/src/views/apps/sales/overview/overview-right/SalesBillPaymentChart.tsx new file mode 100644 index 0000000..ccd9389 --- /dev/null +++ b/src/views/apps/sales/overview/overview-right/SalesBillPaymentChart.tsx @@ -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 ( + + } /> + + + + + ) +} + +export default SalesBillPaymentChart diff --git a/src/views/apps/sales/overview/overview-right/SalesOverviewCards.tsx b/src/views/apps/sales/overview/overview-right/SalesOverviewCards.tsx new file mode 100644 index 0000000..0107660 --- /dev/null +++ b/src/views/apps/sales/overview/overview-right/SalesOverviewCards.tsx @@ -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 ( + + {data.map((item, i) => ( + + + + ))} + + ) +} + +export default SalesOverviewCards diff --git a/src/views/apps/sales/overview/overview-right/SalesPaymentReceivedChart.tsx b/src/views/apps/sales/overview/overview-right/SalesPaymentReceivedChart.tsx new file mode 100644 index 0000000..81977b5 --- /dev/null +++ b/src/views/apps/sales/overview/overview-right/SalesPaymentReceivedChart.tsx @@ -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 ( + + +
+ + + } + /> + + + + + ) +} + +export default SalesPaymentReceivedChart diff --git a/src/views/apps/sales/overview/overview-right/SalesPerPersonChart.tsx b/src/views/apps/sales/overview/overview-right/SalesPerPersonChart.tsx new file mode 100644 index 0000000..7f55c1d --- /dev/null +++ b/src/views/apps/sales/overview/overview-right/SalesPerPersonChart.tsx @@ -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 ( + + } /> + + + + + ) +} + +export default SalesPerPersonChart diff --git a/src/views/apps/sales/overview/overview-right/index.tsx b/src/views/apps/sales/overview/overview-right/index.tsx new file mode 100644 index 0000000..0418ba1 --- /dev/null +++ b/src/views/apps/sales/overview/overview-right/index.tsx @@ -0,0 +1,17 @@ +import SalesBillPaymentChart from './SalesBillPaymentChart' +import SalesOverviewCards from './SalesOverviewCards' +import SalesPaymentReceivedChart from './SalesPaymentReceivedChart' +import SalesPerPersonChart from './SalesPerPersonChart' + +const SalesOverviewRight = () => { + return ( + <> + + + + + + ) +} + +export default SalesOverviewRight diff --git a/src/views/apps/sales/overview/overview-right/styles.css b/src/views/apps/sales/overview/overview-right/styles.css new file mode 100644 index 0000000..ec19295 --- /dev/null +++ b/src/views/apps/sales/overview/overview-right/styles.css @@ -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; +}