ダッシュボード: 月別収支グラフをクリックで月切り替え対応

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

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>