diff --git a/src/app/[lang]/(dashboard)/(private)/apps/purchase/overview/page.tsx b/src/app/[lang]/(dashboard)/(private)/apps/purchase/overview/page.tsx new file mode 100644 index 0000000..88d3888 --- /dev/null +++ b/src/app/[lang]/(dashboard)/(private)/apps/purchase/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 PurchaseOverviewLeft from '@/views/apps/purchase/overview/overview-left' +import PurchaseOverviewRight from '@/views/apps/purchase/overview/overview-right' + +const PurchaseOverviewPage = () => { + 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 ( + <> + + +
+ + Overview Pembelian + +
+ { + 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 PurchaseOverviewPage diff --git a/src/app/[lang]/(dashboard)/(private)/apps/sales/overview/page.tsx b/src/app/[lang]/(dashboard)/(private)/apps/sales/overview/page.tsx index dcdbea9..c8aa27e 100644 --- a/src/app/[lang]/(dashboard)/(private)/apps/sales/overview/page.tsx +++ b/src/app/[lang]/(dashboard)/(private)/apps/sales/overview/page.tsx @@ -26,7 +26,7 @@ const SalesOverviewPage = () => {
- Orders Analysis Dashboard + Overview Penjualan
{ {dictionary['navigation'].overview} {/* {dictionary['navigation'].view} */} + }> + {dictionary['navigation'].overview} + }> {dictionary['navigation'].list} diff --git a/src/data/dictionaries/en.json b/src/data/dictionaries/en.json index 30b4549..c20fde3 100644 --- a/src/data/dictionaries/en.json +++ b/src/data/dictionaries/en.json @@ -113,6 +113,7 @@ "disabledMenu": "Disabled Menu", "dailyReport": "Daily Report", "vendor": "Vendor", - "sales": "Sales" + "sales": "Sales", + "purchase_text": "Purchase" } } diff --git a/src/data/dictionaries/id.json b/src/data/dictionaries/id.json index 6dd0497..7c4c7fe 100644 --- a/src/data/dictionaries/id.json +++ b/src/data/dictionaries/id.json @@ -113,6 +113,7 @@ "disabledMenu": "Menu Nonaktif", "dailyReport": "Laporan Harian", "vendor": "Vendor", - "sales": "Penjualan" + "sales": "Penjualan", + "purchase_text": "Pembelian" } } diff --git a/src/views/apps/purchase/overview/overview-left/PurchasePaymentRatioGaugeChart.tsx b/src/views/apps/purchase/overview/overview-left/PurchasePaymentRatioGaugeChart.tsx new file mode 100644 index 0000000..ce31584 --- /dev/null +++ b/src/views/apps/purchase/overview/overview-left/PurchasePaymentRatioGaugeChart.tsx @@ -0,0 +1,106 @@ +'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 PurchasePaymentRatioGaugeChart = () => { + 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 Pembelian lunas vs total Tagihan Pembelian bulan ini +
+ + + ) +} + +export default PurchasePaymentRatioGaugeChart diff --git a/src/views/apps/purchase/overview/overview-left/PurchaseProductChart.tsx b/src/views/apps/purchase/overview/overview-left/PurchaseProductChart.tsx new file mode 100644 index 0000000..589da6f --- /dev/null +++ b/src/views/apps/purchase/overview/overview-left/PurchaseProductChart.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 PurchaseProductSalesChart = () => { + 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 PurchaseProductSalesChart diff --git a/src/views/apps/purchase/overview/overview-left/PurchaseVendorSalesChart.tsx b/src/views/apps/purchase/overview/overview-left/PurchaseVendorSalesChart.tsx new file mode 100644 index 0000000..f915817 --- /dev/null +++ b/src/views/apps/purchase/overview/overview-left/PurchaseVendorSalesChart.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 PurchaseVendorSalesChart = () => { + 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) + + + + + Vendor + + 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 PurchaseVendorSalesChart diff --git a/src/views/apps/purchase/overview/overview-left/index.tsx b/src/views/apps/purchase/overview/overview-left/index.tsx new file mode 100644 index 0000000..d2bb388 --- /dev/null +++ b/src/views/apps/purchase/overview/overview-left/index.tsx @@ -0,0 +1,15 @@ +import PurchasePaymentRatioGaugeChart from './PurchasePaymentRatioGaugeChart' +import PurchaseProductSalesChart from './PurchaseProductChart' +import PurchaseVendorSalesChart from './PurchaseVendorSalesChart' + +const PurchaseOverviewLeft = () => { + return ( + <> + + + + + ) +} + +export default PurchaseOverviewLeft diff --git a/src/views/apps/purchase/overview/overview-right/PurchaseBillPaymentChart.tsx b/src/views/apps/purchase/overview/overview-right/PurchaseBillPaymentChart.tsx new file mode 100644 index 0000000..6c0b8ac --- /dev/null +++ b/src/views/apps/purchase/overview/overview-right/PurchaseBillPaymentChart.tsx @@ -0,0 +1,160 @@ +'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 = { + tagihanPembelian: '#28C76F', + pembayaranPembelian: '#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 Pembelian', + type: 'column', + data: [1250, 1180, 1350, 1450, 1200, 1520, 1380, 1150, 1650, 1400, 1290, 1700] + }, + { + name: 'Pembayaran Pembelian', + type: 'column', + data: [950, 880, 1050, 1150, 900, 1220, 1080, 850, 1350, 1100, 990, 1400] + } +] + +const PurchaseBillPaymentChart = () => { + 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.tagihanPembelian, colors.pembayaranPembelian], + fill: { + opacity: 1 + } + } + + return ( + + } + /> + + + + + ) +} + +export default PurchaseBillPaymentChart diff --git a/src/views/apps/purchase/overview/overview-right/PurchaseOverviewCards.tsx b/src/views/apps/purchase/overview/overview-right/PurchaseOverviewCards.tsx new file mode 100644 index 0000000..f671737 --- /dev/null +++ b/src/views/apps/purchase/overview/overview-right/PurchaseOverviewCards.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: 'PEMBELIAN', + stats: '12.932.460', + avatarIcon: 'tabler-trending-up', + avatarColor: 'success', + trend: 'positive', + trendNumber: '114,7%', + subtitle: '15 Tagihan Pembelian Bulan Ini' + }, + { + title: 'PEMBAYARAN PEMBELIAN DIKIRIM', + stats: '2.573.790', + avatarIcon: 'tabler-trending-down', + avatarColor: 'error', + trend: 'negative', + trendNumber: '34,0%', + subtitle: '5 Tagihan Pembelian Bulan Ini' + }, + { + title: 'MENUNGGU PEMBAYARAN PEMBELIAN', + stats: '10.358.670', + avatarIcon: 'tabler-trending-up', + avatarColor: 'success', + trend: 'positive', + trendNumber: '380,6%', + subtitle: '10 Tagihan Pembelian' + }, + { + title: 'JATUH TEMPO TAGIHAN PEMBELIAN', + stats: '6.033.000', + avatarIcon: 'tabler-clock-exclamation', + avatarColor: 'error', + trend: 'neutral', + trendNumber: '100%', + subtitle: '6 Tagihan Pembelian' + } +] + +const PurchaseOverviewCards = () => { + return ( + + {data.map((item, i) => ( + + + + ))} + + ) +} + +export default PurchaseOverviewCards diff --git a/src/views/apps/purchase/overview/overview-right/PurchasePaymentReceivedChart.tsx b/src/views/apps/purchase/overview/overview-right/PurchasePaymentReceivedChart.tsx new file mode 100644 index 0000000..493ddb7 --- /dev/null +++ b/src/views/apps/purchase/overview/overview-right/PurchasePaymentReceivedChart.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 PurchasePaymentReceivedChart = () => { + 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 PurchasePaymentReceivedChart diff --git a/src/views/apps/purchase/overview/overview-right/index.tsx b/src/views/apps/purchase/overview/overview-right/index.tsx new file mode 100644 index 0000000..64d7b49 --- /dev/null +++ b/src/views/apps/purchase/overview/overview-right/index.tsx @@ -0,0 +1,15 @@ +import PurchaseBillPaymentChart from './PurchaseBillPaymentChart' +import PurchaseOverviewCards from './PurchaseOverviewCards' +import PurchasePaymentReceivedChart from './PurchasePaymentReceivedChart' + +const PurchaseOverviewRight = () => { + return ( + <> + + + + + ) +} + +export default PurchaseOverviewRight diff --git a/src/views/apps/purchase/overview/overview-right/styles.css b/src/views/apps/purchase/overview/overview-right/styles.css new file mode 100644 index 0000000..a93db94 --- /dev/null +++ b/src/views/apps/purchase/overview/overview-right/styles.css @@ -0,0 +1,15 @@ +#tagihan-pembayaran-pembelian .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; +} + +#pembayaran-diterima .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; +}