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

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>
+        <CardTitle>{title}</CardTitle>
-        <CardDescription>Rata-rata nilai belanja per pesanan</CardDescription>
+        <CardDescription>{description}</CardDescription>
       </CardHeader>
       <CardContent>
         <ChartContainer config={chartConfig} className="aspect-auto h-[300px] w-full">

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>
+        <CardTitle>{title}</CardTitle>
-        <CardDescription>Perbandingan Pendapatan vs Laba Bersih per bulan.</CardDescription>
+        <CardDescription>{description}</CardDescription>
       </CardHeader>
       <CardContent>
         <ChartContainer config={chartConfig} className="aspect-auto h-[300px] w-full">

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>
+        <CardTitle>{title}</CardTitle>
-        <CardDescription>Perbandingan total penjualan dan belanja per bulan</CardDescription>
+        <CardDescription>{description}</CardDescription>
       </CardHeader>
       <CardContent>
         <ChartContainer config={chartConfig} className="aspect-auto h-[300px] w-full">

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>
+        <CardTitle>{title}</CardTitle>
-        <CardDescription>Total pesanan masuk per bulan</CardDescription>
+        <CardDescription>{description}</CardDescription>
       </CardHeader>
       <CardContent>
         <ChartContainer config={chartConfig} className="aspect-auto h-[300px] w-full">

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} />
+                    <RevenueVsProfitChart 
-                    <RevenueVsPurchasesChart data={salesByMonth} />
+                        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} />
+                    <TransactionVolumeChart 
-                    <AovTrendChart data={transactionVolume} />
+                        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"
+                        title="Top 5 Produk"
-                        description="Berdasarkan jumlah produk yang terjual."
+                        description="Daftar produk dengan volume penjualan tertinggi."
                         data={topProducts}
                         colorOffset={45}
                     />
                     <CustomBarChart
-                        title="Top 5 Pelanggan Setia"
+                        title="Top 5 Pelanggan"
-                        description="Berdasarkan total nominal belanja."
+                        description="Pelanggan dengan total nominal belanja tertinggi (setia)."
                         data={topCustomers}
                         colorOffset={180}
                         isCurrency={true}

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"
+                        title="Top 5 Produk"
-                        description="Berdasarkan jumlah produk yang terjual."
+                        description="Daftar produk dengan volume penjualan tertinggi."
                         data={topProducts}
                         colorOffset={45}
                     />
                     <CustomBarChart
-                        title="Top 5 Pelanggan Setia"
+                        title="Top 5 Pelanggan"
-                        description="Berdasarkan total nominal belanja."
+                        description="Pelanggan dengan total nominal belanja tertinggi (setia)."
                         data={topCustomers}
                         colorOffset={180}
                         isCurrency={true}