From ee79523a4bd423c3da453f722927d8b13ab41800 Mon Sep 17 00:00:00 2001
From: Yoga Pangestu <ypangestu976@gmail.com>
Date: Thu, 23 Apr 2026 20:10:56 +0700
Subject: [PATCH] refactor: reorganize analysis charts into a responsive
 two-column grid layout

---
 resources/js/pages/analysis.tsx | 32 ++++++++++++++++++--------------
 1 file changed, 18 insertions(+), 14 deletions(-)

diff --git a/resources/js/pages/analysis.tsx b/resources/js/pages/analysis.tsx
index 7178fae..49b34f7 100644
--- a/resources/js/pages/analysis.tsx
+++ b/resources/js/pages/analysis.tsx
@@ -53,21 +53,25 @@ export default function Analisa() {
                     ))}
                 </div>
 
-                <RevenueVsPurchasesChart data={salesByMonth} />
+                {/* Main Trends Grid */}
+                <div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
+                    <RevenueVsProfitChart data={revenueVsProfit} />
+                    <RevenueVsPurchasesChart data={salesByMonth} />
+                </div>
 
-                <RevenueVsProfitChart data={revenueVsProfit} />
-
-                <TransactionVolumeChart data={transactionVolume} />
-
-                <SalesByHourChart
-                    data={salesByHour}
-                    config={{
-                        total: {
-                            label: "Total Penjualan",
-                            color: "var(--chart-1)",
-                        },
-                    }}
-                />
+                {/* Activity & Volume Grid */}
+                <div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
+                    <TransactionVolumeChart data={transactionVolume} />
+                    <SalesByHourChart
+                        data={salesByHour}
+                        config={{
+                            total: {
+                                label: "Total Penjualan",
+                                color: "var(--chart-1)",
+                            },
+                        }}
+                    />
+                </div>
 
                 <div className="grid grid-cols-1 gap-4 lg:grid-cols-3">
                     <CustomPieChart