From a6ed3621068ee90041d62ade0d6c364e93ee08e1 Mon Sep 17 00:00:00 2001
From: youji-nack <you@small-net.net>
Date: Fri, 10 Apr 2026 19:32:54 +0900
Subject: [PATCH] =?UTF-8?q?=E3=83=80=E3=83=83=E3=82=B7=E3=83=A5=E3=83=9C?=
 =?UTF-8?q?=E3=83=BC=E3=83=89:=20=E6=9C=88=E5=88=A5=E5=8F=8E=E6=94=AF?=
 =?UTF-8?q?=E3=82=B0=E3=83=A9=E3=83=95=E3=82=92=E3=82=AF=E3=83=AA=E3=83=83?=
 =?UTF-8?q?=E3=82=AF=E3=81=A7=E6=9C=88=E5=88=87=E3=82=8A=E6=9B=BF=E3=81=88?=
 =?UTF-8?q?=E5=AF=BE=E5=BF=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/components/Dashboard.tsx | 25 ++++++++++++++++++++++---
 1 file changed, 22 insertions(+), 3 deletions(-)

diff --git a/src/components/Dashboard.tsx b/src/components/Dashboard.tsx
index 5fd1794..303d58a 100644
--- a/src/components/Dashboard.tsx
+++ b/src/components/Dashboard.tsx
@@ -55,6 +55,7 @@ export default function Dashboard() {
       const { incomeTotal, expenseTotal } = calcMonthlyPL(accounts, transactions, y, mo);
       return {
         month: showYear ? `'${String(y).slice(2)}/${mo}月` : `${mo}月`,
+        monthKey: m,
         収入: incomeTotal,
         支出: expenseTotal,
       };
@@ -143,15 +144,33 @@ export default function Dashboard() {
         <div className="card">
           <h3 className="text-sm font-semibold text-slate-400 mb-3">月別収支</h3>
           <ResponsiveContainer width="100%" height={200}>
-            <BarChart data={monthlyData} margin={{ top: 0, right: 10, left: 10, bottom: 0 }}>
+            <BarChart
+              data={monthlyData}
+              margin={{ top: 0, right: 10, left: 10, bottom: 0 }}
+              style={{ cursor: 'pointer' }}
+              onClick={(data) => {
+                if (data?.activePayload?.[0]?.payload?.monthKey) {
+                  setSelectedMonth(data.activePayload[0].payload.monthKey);
+                  setDrillAccountId(null);
+                }
+              }}
+            >
               <XAxis dataKey="month" tick={{ fontSize: 12, fill: '#94a3b8' }} />
               <YAxis tickFormatter={v => `${(v / 10000).toFixed(0)}万`} tick={{ fontSize: 11, fill: '#94a3b8' }} />
               <Tooltip
                 formatter={(v: number) => formatAmount(v)}
                 contentStyle={CHART_TOOLTIP_STYLE}
               />
-              <Bar dataKey="収入" fill="#22c55e" radius={[3,3,0,0]} />
-              <Bar dataKey="支出" fill="#f43f5e" radius={[3,3,0,0]} />
+              <Bar dataKey="収入" fill="#22c55e" radius={[3,3,0,0]}>
+                {monthlyData.map((entry, i) => (
+                  <Cell key={i} fill="#22c55e" opacity={entry.monthKey === effectiveMonth ? 1 : 0.45} />
+                ))}
+              </Bar>
+              <Bar dataKey="支出" fill="#f43f5e" radius={[3,3,0,0]}>
+                {monthlyData.map((entry, i) => (
+                  <Cell key={i} fill="#f43f5e" opacity={entry.monthKey === effectiveMonth ? 1 : 0.45} />
+                ))}
+              </Bar>
             </BarChart>
           </ResponsiveContainer>
         </div>