vngrup/dress
vngrup/dress
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: make chart titles and descriptions dynamic via component props and update dashboard content labels

Browse Source
This commit is contained in:
Yoga Pangestu 2026-04-23 20:37:29 +07:00
parent d182401670
commit 50953e1c37
6 changed files with 86 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
resources/js/components/charts/aov-trend-chart.tsx
View File

@ -28,12 +28,20 @@ const chartConfig = {
},
} satisfies ChartConfig
export function AovTrendChart({ data }: { data: any[] }) {
export function AovTrendChart({
data,
title = "Tren AOV",
description = "Rata-rata nilai belanja per pesanan pelanggan setiap bulannya."
}: {
data: any[],
title?: string,
description?: string
}) {
return (
<Card>
<CardHeader>
<CardTitle>Tren AOV</CardTitle>
<CardDescription>Rata-rata nilai belanja per pesanan</CardDescription>
<CardTitle>{title}</CardTitle>
<CardDescription>{description}</CardDescription>
</CardHeader>
<CardContent>
<ChartContainer config={chartConfig} className="aspect-auto h-[300px] w-full">

14
resources/js/components/charts/revenue-vs-profit-chart.tsx
View File

@ -30,12 +30,20 @@ const chartConfig = {
},
} satisfies ChartConfig
export function RevenueVsProfitChart({ data }: { data: any[] }) {
export function RevenueVsProfitChart({
data,
title = "Pendapatan vs Laba",
description = "Analisis pendapatan kotor dibandingkan dengan laba bersih."
}: {
data: any[],
title?: string,
description?: string
}) {
return (
<Card>
<CardHeader>
<CardTitle>Pendapatan vs Laba Bersih</CardTitle>
<CardDescription>Perbandingan Pendapatan vs Laba Bersih per bulan.</CardDescription>
<CardTitle>{title}</CardTitle>
<CardDescription>{description}</CardDescription>
</CardHeader>
<CardContent>
<ChartContainer config={chartConfig} className="aspect-auto h-[300px] w-full">

14
resources/js/components/charts/revenue-vs-purchases-chart.tsx
View File

@ -32,12 +32,20 @@ const chartConfig = {
},
} satisfies ChartConfig
export function RevenueVsPurchasesChart({ data }: { data: any[] }) {
export function RevenueVsPurchasesChart({
data,
title = "Penjualan vs Belanja",
description = "Perbandingan total nilai penjualan dan belanja stok barang."
}: {
data: any[],
title?: string,
description?: string
}) {
return (
<Card>
<CardHeader>
<CardTitle>Penjualan vs Belanja</CardTitle>
<CardDescription>Perbandingan total penjualan dan belanja per bulan</CardDescription>
<CardTitle>{title}</CardTitle>
<CardDescription>{description}</CardDescription>
</CardHeader>
<CardContent>
<ChartContainer config={chartConfig} className="aspect-auto h-[300px] w-full">

14
resources/js/components/charts/transaction-volume-chart.tsx
View File

@ -28,12 +28,20 @@ const chartConfig = {
},
} satisfies ChartConfig
export function TransactionVolumeChart({ data }: { data: any[] }) {
export function TransactionVolumeChart({
data,
title = "Volume Transaksi",
description = "Total jumlah pesanan yang diproses per bulan."
}: {
data: any[],
title?: string,
description?: string
}) {
return (
<Card>
<CardHeader>
<CardTitle>Volume Transaksi</CardTitle>
<CardDescription>Total pesanan masuk per bulan</CardDescription>
<CardTitle>{title}</CardTitle>
<CardDescription>{description}</CardDescription>
</CardHeader>
<CardContent>
<ChartContainer config={chartConfig} className="aspect-auto h-[300px] w-full">

42
resources/js/pages/analysis.tsx
View File

@ -56,18 +56,36 @@ export default function Analisa() {
{/* Main Trends Grid */}
<div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
<RevenueVsProfitChart data={revenueVsProfit} />
<RevenueVsPurchasesChart data={salesByMonth} />
<RevenueVsProfitChart
data={revenueVsProfit}
title="Pendapatan vs Laba"
description="Analisis pendapatan kotor dibandingkan dengan laba bersih."
/>
<RevenueVsPurchasesChart
data={salesByMonth}
title="Penjualan vs Belanja"
description="Perbandingan total nilai penjualan dan belanja stok barang."
/>
</div>
{/* Activity & Volume Grid */}
<div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
<TransactionVolumeChart data={transactionVolume} />
<AovTrendChart data={transactionVolume} />
<TransactionVolumeChart
data={transactionVolume}
title="Volume Transaksi"
description="Total jumlah pesanan yang diproses per bulan."
/>
<AovTrendChart
data={transactionVolume}
title="Tren AOV"
description="Rata-rata nilai belanja per pesanan pelanggan setiap bulannya."
/>
</div>
<SalesByHourChart
data={salesByHour}
title="Jam Sibuk"
description="Grafik aktivitas transaksi berdasarkan waktu (jam) dalam sehari."
config={{
total: {
label: "Total Penjualan",
@ -79,25 +97,25 @@ export default function Analisa() {
<div className="grid grid-cols-1 gap-4 lg:grid-cols-2 @4xl/main:grid-cols-4">
<CustomPieChart
title="Metode Pembayaran"
description="Distribusi pesanan berdasarkan metode pembayaran."
description="Distribusi transaksi berdasarkan metode pembayaran yang digunakan."
data={paymentMethods}
colorOffset={0}
/>
<CustomPieChart
title="Status Pesanan"
description="Distribusi pesanan berdasarkan status."
description="Status terkini dari seluruh pesanan yang masuk."
data={orderStatuses}
colorOffset={120}
/>
<CustomPieChart
title="Channel Pesanan"
description="Distribusi pesanan berdasarkan channel/platform."
description="Sumber pesanan berdasarkan platform atau saluran penjualan."
data={orderChannels}
colorOffset={240}
/>
<CustomPieChart
title="Top 5 Kategori"
description="Distribusi penjualan berdasarkan kategori produk."
description="Kategori produk yang paling banyak menyumbang penjualan."
data={topCategories}
colorOffset={60}
/>
@ -105,14 +123,14 @@ export default function Analisa() {
<div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
<CustomBarChart
title="Top 5 Produk Terlaris"
description="Berdasarkan jumlah produk yang terjual."
title="Top 5 Produk"
description="Daftar produk dengan volume penjualan tertinggi."
data={topProducts}
colorOffset={45}
/>
<CustomBarChart
title="Top 5 Pelanggan Setia"
description="Berdasarkan total nominal belanja."
title="Top 5 Pelanggan"
description="Pelanggan dengan total nominal belanja tertinggi (setia)."
data={topCustomers}
colorOffset={180}
isCurrency={true}

20
resources/js/pages/dashboard.tsx
View File

@ -110,24 +110,28 @@ return {
))}
</div>
<SalesByHourChart data={salesByHour} />
<SalesByHourChart
title="Jam Sibuk"
description="Grafik aktivitas transaksi berdasarkan waktu (jam) dalam sehari."
data={salesByHour}
/>
<div className="grid grid-cols-1 gap-4 lg:grid-cols-3">
<CustomPieChart
title="Metode Pembayaran"
description="Distribusi pesanan berdasarkan metode pembayaran."
description="Distribusi transaksi berdasarkan metode pembayaran yang digunakan."
data={paymentMethods}
colorOffset={0}
/>
<CustomPieChart
title="Status Pesanan"
description="Distribusi pesanan berdasarkan status."
description="Status terkini dari seluruh pesanan yang masuk."
data={orderStatuses}
colorOffset={120}
/>
<CustomPieChart
title="Channel Pesanan"
description="Distribusi pesanan berdasarkan channel/platform."
description="Sumber pesanan berdasarkan platform atau saluran penjualan."
data={orderChannels}
colorOffset={240}
/>
@ -135,14 +139,14 @@ return {
<div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
<CustomBarChart
title="Top 5 Produk Terlaris"
description="Berdasarkan jumlah produk yang terjual."
title="Top 5 Produk"
description="Daftar produk dengan volume penjualan tertinggi."
data={topProducts}
colorOffset={45}
/>
<CustomBarChart
title="Top 5 Pelanggan Setia"
description="Berdasarkan total nominal belanja."
title="Top 5 Pelanggan"
description="Pelanggan dengan total nominal belanja tertinggi (setia)."
data={topCustomers}
colorOffset={180}
isCurrency={true}