From 50953e1c37f1120d7bfeb4e0fd0859138e7720d0 Mon Sep 17 00:00:00 2001
From: Yoga Pangestu <ypangestu976@gmail.com>
Date: Thu, 23 Apr 2026 20:37:29 +0700
Subject: [PATCH] refactor: make chart titles and descriptions dynamic via
 component props and update dashboard content labels

---
 .../js/components/charts/aov-trend-chart.tsx  | 14 +++++--
 .../charts/revenue-vs-profit-chart.tsx        | 14 +++++--
 .../charts/revenue-vs-purchases-chart.tsx     | 14 +++++--
 .../charts/transaction-volume-chart.tsx       | 14 +++++--
 resources/js/pages/analysis.tsx               | 42 +++++++++++++------
 resources/js/pages/dashboard.tsx              | 20 +++++----
 6 files changed, 86 insertions(+), 32 deletions(-)

diff --git a/resources/js/components/charts/aov-trend-chart.tsx b/resources/js/components/charts/aov-trend-chart.tsx
index b29e04c..961684f 100644
--- a/resources/js/components/charts/aov-trend-chart.tsx
+++ b/resources/js/components/charts/aov-trend-chart.tsx
@@ -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">
diff --git a/resources/js/components/charts/revenue-vs-profit-chart.tsx b/resources/js/components/charts/revenue-vs-profit-chart.tsx
index 1b0a589..b2e1617 100644
--- a/resources/js/components/charts/revenue-vs-profit-chart.tsx
+++ b/resources/js/components/charts/revenue-vs-profit-chart.tsx
@@ -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">
diff --git a/resources/js/components/charts/revenue-vs-purchases-chart.tsx b/resources/js/components/charts/revenue-vs-purchases-chart.tsx
index 5d3aaca..34b7f89 100644
--- a/resources/js/components/charts/revenue-vs-purchases-chart.tsx
+++ b/resources/js/components/charts/revenue-vs-purchases-chart.tsx
@@ -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">
diff --git a/resources/js/components/charts/transaction-volume-chart.tsx b/resources/js/components/charts/transaction-volume-chart.tsx
index ee48e26..85b4f6d 100644
--- a/resources/js/components/charts/transaction-volume-chart.tsx
+++ b/resources/js/components/charts/transaction-volume-chart.tsx
@@ -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">
diff --git a/resources/js/pages/analysis.tsx b/resources/js/pages/analysis.tsx
index fe6223e..0cf9aeb 100644
--- a/resources/js/pages/analysis.tsx
+++ b/resources/js/pages/analysis.tsx
@@ -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}
diff --git a/resources/js/pages/dashboard.tsx b/resources/js/pages/dashboard.tsx
index bda44bd..2d62932 100644
--- a/resources/js/pages/dashboard.tsx
+++ b/resources/js/pages/dashboard.tsx
@@ -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}