From a891948f11fc8c455a70c3e3d4c5806f0e7e0113 Mon Sep 17 00:00:00 2001
From: "itarun.p" <itarun.p@somapait.com>
Date: Mon, 6 Apr 2026 20:23:51 +0700
Subject: [PATCH] =?UTF-8?q?feat:=20swap=20chart=20positions=20=E2=80=94=20?=
 =?UTF-8?q?bar=20chart=20wide,=20donut=20narrow?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Row 1: Token usage (wide) + Model distribution donut (narrow 320px)
Row 2: Project activity bar (wide) + Peak hours (narrow 320px)

Bar chart now has full width for readable project name labels.
Donut is compact and fits narrow column naturally.

Closes #137
---
 app/overview-client.tsx | 17 ++++++++---------
 1 file changed, 8 insertions(+), 9 deletions(-)

diff --git a/app/overview-client.tsx b/app/overview-client.tsx
index c1aab73..4c06b30 100644
--- a/app/overview-client.tsx
+++ b/app/overview-client.tsx
@@ -266,7 +266,7 @@ export function OverviewClient() {
         </div>
       </div>
 
-      {/* ── Charts row 1: Token usage + Project activity ── */}
+      {/* ── Charts row 1: Token usage + Model distribution ── */}
       <div className="grid grid-cols-[1fr_320px] gap-6">
         <ChartCard
           icon={<BarChart3 className="w-4 h-4" />}
@@ -281,21 +281,20 @@ export function OverviewClient() {
         </ChartCard>
         <ChartCard
           icon={<PieChart className="w-4 h-4" />}
-          title="Project activity distribution"
+          title="Model distribution"
         >
-          <ProjectActivityChart projects={projects} />
+          <ModelBreakdownDonut modelUsage={stats.modelUsage} />
         </ChartCard>
       </div>
 
-      {/* ── Peak hours + model breakdown ── */}
-      <div className="grid grid-cols-2 gap-6">
+      {/* ── Charts row 2: Project activity (wide) + Peak hours (narrow) ── */}
+      <div className="grid grid-cols-[1fr_320px] gap-6">
+        <ChartCard title="Project activity">
+          <ProjectActivityChart projects={projects} />
+        </ChartCard>
         <ChartCard title="Peak hours">
           <PeakHoursChart hourCounts={stats.hourCounts ?? {}} />
         </ChartCard>
-
-        <ChartCard title="Model distribution">
-          <ModelBreakdownDonut modelUsage={stats.modelUsage} />
-        </ChartCard>
       </div>
 
       {/* ── Token breakdown ── */}