Update dashboard and project info workflows

templates/dashboard.html

@@ -4,23 +4,24 @@
 
 {% block head_extra %}
 <style>
-    .hero {
+    .dashboard-topbar {
         display: flex;
         justify-content: space-between;
-        align-items: flex-start;
-        gap: 18px;
+        align-items: center;
+        gap: 14px;
+        flex-wrap: wrap;
+        margin-bottom: 16px;
+    }
+
+    .dashboard-topbar-actions {
+        display: inline-flex;
+        align-items: center;
+        gap: 10px;
         flex-wrap: wrap;
     }
 
-    .hero-copy {
-        display: grid;
-        gap: 8px;
-    }
-
-    .hero-copy p {
-        color: var(--muted);
-        max-width: 920px;
-        line-height: 1.7;
+    .dashboard-year-select {
+        width: 180px;
     }
 
     .upload-actions {
@@ -69,22 +70,62 @@
         display: none;
     }
 
-    .metric-grid {
+    .dashboard-layout {
+        display: grid;
+        grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
+        gap: 16px;
+        align-items: stretch;
+    }
+
+    .dashboard-status-panel {
         display: grid;
-        grid-template-columns: repeat(4, minmax(150px, 1fr));
         gap: 12px;
     }
 
+    .dashboard-status-grid {
+        display: grid;
+        grid-template-columns: 1fr;
+        gap: 12px;
+    }
+
+    .dashboard-status-grid .stat-card {
+        min-height: 84px;
+    }
+
+    .dashboard-status-grid .stat-card .value {
+        font-size: clamp(18px, 1.5vw, 28px);
+        line-height: 1.12;
+    }
+
+    .dashboard-chart-stack {
+        display: grid;
+        grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
+        gap: 16px;
+    }
+
     .chart-panel {
         display: grid;
-        gap: 16px;
+        gap: 12px;
+    }
+
+    .chart-panel-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        gap: 12px;
+        flex-wrap: wrap;
+    }
+
+    .chart-panel-header h3 {
+        font-size: 18px;
+        letter-spacing: -0.03em;
     }
 
     .filter-row {
         display: grid;
-        grid-template-columns: repeat(3, minmax(0, 220px)) auto;
-        gap: 12px;
-        align-items: end;
+        grid-template-columns: repeat(3, minmax(0, 180px));
+        gap: 10px;
+        align-items: center;
     }
 
     .chart-shell {
@@ -93,23 +134,10 @@
             radial-gradient(circle at top left, rgba(24, 24, 27, 0.045), transparent 38%);
         border: 1px solid var(--line);
         border-radius: 16px;
-        padding: 16px;
+        padding: 14px 16px 16px;
         box-shadow: inset 0 1px 0 rgba(255,255,255,0.92);
-    }
-
-    .chart-head {
-        display: flex;
-        justify-content: space-between;
-        align-items: flex-start;
-        gap: 14px;
-        margin-bottom: 10px;
-        flex-wrap: wrap;
-    }
-
-    .chart-head p {
-        color: var(--muted);
-        font-size: 14px;
-        line-height: 1.7;
+        display: grid;
+        gap: 12px;
     }
 
     .legend-box {
@@ -118,6 +146,10 @@
         gap: 10px 12px;
     }
 
+    .legend-box.center {
+        justify-content: center;
+    }
+
     .legend-item {
         display: inline-flex;
         align-items: center;
@@ -131,14 +163,6 @@
         font-weight: 700;
     }
 
-    .metric-grid .stat-card {
-        min-height: 118px;
-    }
-
-    .metric-grid .stat-card .value {
-        margin-top: 2px;
-    }
-
     .legend-swatch {
         width: 10px;
         height: 10px;
@@ -150,19 +174,21 @@
         width: 100%;
         height: auto;
         aspect-ratio: 1120 / 390;
-        min-height: 320px;
+        min-height: 300px;
         display: block;
     }
 
     @media (max-width: 1200px) {
-        .metric-grid,
-        .filter-row {
-            grid-template-columns: 1fr 1fr;
+        .dashboard-layout {
+            grid-template-columns: 1fr;
+        }
+
+        .dashboard-chart-stack {
+            grid-template-rows: auto;
         }
     }
 
-    @media (max-width: 780px) {
-        .metric-grid,
+    @media (max-width: 860px) {
         .filter-row {
             grid-template-columns: 1fr;
         }
@@ -172,141 +198,161 @@
 
 {% block content %}
 <section class="panel">
-    <div class="hero">
-        <div class="hero-copy">
-            <div class="section-title" style="margin-bottom: 0;">
-                <h2>대시보드</h2>
+    <div class="dashboard-topbar">
+        <div class="section-title" style="margin-bottom: 0;">
+            <h2>사업현황</h2>
+        </div>
+        <div class="dashboard-topbar-actions">
+            <form method="get" action="/" id="dashboardYearForm">
+                <select id="dashboardYearSelect" class="dashboard-year-select" name="overview_year" aria-label="사업현황 연도 선택">
+                    <option value="" {% if not overview_selected_year %}selected{% endif %}>최근 10개년</option>
+                    {% for year in available_years %}
+                        <option value="{{ year }}" {% if overview_selected_year == year %}selected{% endif %}>{{ year }}</option>
+                    {% endfor %}
+                </select>
+            </form>
+            <div class="upload-actions">
+                <form action="/upload" method="post" enctype="multipart/form-data" id="uploadForm">
+                    <input id="excel_file" class="hidden-file-input" type="file" name="excel_file" accept=".xlsx,.xlsm,.xltx,.xltm" required>
+                    <button type="button" id="uploadButton" class="button-icon" title="업로드 저장" aria-label="업로드 저장">
+                        <svg viewBox="0 0 24 24" aria-hidden="true">
+                            <path d="M6 4h9l3 3v13H6z"></path>
+                            <path d="M9 4v6h6V4"></path>
+                            <path d="M9 17h6"></path>
+                        </svg>
+                        <span class="sr-only">업로드 저장</span>
+                    </button>
+                </form>
+                <div class="upload-tooltip">엑셀 파일을 선택하면 회계 데이터를 DB에 바로 저장합니다. 프로젝트 폴더에 둔 파일 외에 추가 파일을 수동 반영할 때 사용하세요.</div>
             </div>
         </div>
-        <div class="upload-actions">
-            <form action="/upload" method="post" enctype="multipart/form-data" id="uploadForm">
-                <input id="excel_file" class="hidden-file-input" type="file" name="excel_file" accept=".xlsx,.xlsm,.xltx,.xltm" required>
-                <button type="button" id="uploadButton" class="button-icon" title="업로드 저장" aria-label="업로드 저장">
-                    <svg viewBox="0 0 24 24" aria-hidden="true">
-                        <path d="M6 4h9l3 3v13H6z"></path>
-                        <path d="M9 4v6h6V4"></path>
-                        <path d="M9 17h6"></path>
-                    </svg>
-                    <span class="sr-only">업로드 저장</span>
-                </button>
-            </form>
-            <div class="upload-tooltip">엑셀 파일을 선택하면 회계 데이터를 DB에 바로 저장합니다. 프로젝트 폴더에 둔 파일 외에 추가 파일을 수동 반영할 때 사용하세요.</div>
-        </div>
     </div>
-</section>
 
-<section class="panel">
-    <div class="section-title">
-        <h2>현황 요약</h2>
-    </div>
-    <form method="get" action="/" class="filter-row" style="margin-bottom: 16px;">
-        <div class="field">
-            <select id="overviewYear" name="overview_year" aria-label="연도 선택">
-                <option value="" {% if not overview_selected_year %}selected{% endif %}>최근 10개년</option>
-                {% for year in available_years %}
-                    <option value="{{ year }}" {% if overview_selected_year == year %}selected{% endif %}>{{ year }}</option>
-                {% endfor %}
-            </select>
-        </div>
-    </form>
-    <div class="metric-grid">
-        <div class="stat-card">
-            <div class="label">집계 대상 사업 수</div>
-            <div class="value">{{ overview.business_count or 0 }}</div>
-        </div>
-        <div class="stat-card">
-            <div class="label">수입금액</div>
-            <div class="value">{{ "{:,.0f}".format(overview.total_revenue or 0) }}</div>
-        </div>
-        <div class="stat-card">
-            <div class="label">원가 총액</div>
-            <div class="value">{{ "{:,.0f}".format(overview.total_cost or 0) }}</div>
-        </div>
-        <div class="stat-card">
-            <div class="label">판관비 총액</div>
-            <div class="value">{{ "{:,.0f}".format(overview.total_sga or 0) }}</div>
-        </div>
-    </div>
-</section>
+    <div class="dashboard-layout">
+        <section class="dashboard-status-panel">
+            <div class="dashboard-status-grid">
+                <div class="stat-card">
+                    <div class="label">수행 프로젝트</div>
+                    <div class="value">{{ ((project_dashboard.related_projects or 0) - (project_dashboard.completed_projects or 0)) if ((project_dashboard.related_projects or 0) - (project_dashboard.completed_projects or 0)) > 0 else 0 }}</div>
+                </div>
+                <div class="stat-card">
+                    <div class="label">종료 프로젝트</div>
+                    <div class="value">{{ project_dashboard.completed_projects or 0 }}</div>
+                </div>
+                <div class="stat-card">
+                    <div class="label">수금액</div>
+                    <div class="value">{{ "{:,.0f}".format(project_dashboard.collection_amount or 0) }}</div>
+                </div>
+                <div class="stat-card">
+                    <div class="label">비용</div>
+                    <div class="value">{{ "{:,.0f}".format((overview.total_cost or 0) + (overview.total_sga or 0)) }}</div>
+                </div>
+                <div class="stat-card">
+                    <div class="label">원가</div>
+                    <div class="value">{{ "{:,.0f}".format(overview.total_cost or 0) }}</div>
+                </div>
+                <div class="stat-card">
+                    <div class="label">판관비</div>
+                    <div class="value">{{ "{:,.0f}".format(overview.total_sga or 0) }}</div>
+                </div>
+            </div>
+        </section>
 
-<section class="panel chart-panel">
-    <div class="section-title">
-        <h2>통합 비용 집계</h2>
-    </div>
-    <div class="filter-row">
-        <div class="field">
-            <select id="summaryGranularity" aria-label="집계 단위">
-                <option value="yearly">연도별</option>
-                <option value="monthly">월별</option>
-            </select>
-        </div>
-        <div class="field">
-            <select id="summaryYear" aria-label="연도 선택">
-                <option value="all">전체연도</option>
-                {% for year in available_years %}
-                    <option value="{{ year }}">{{ year }}</option>
-                {% endfor %}
-            </select>
-        </div>
-        <div class="field">
-            <select id="summaryMetric" aria-label="강조 항목">
-                <option value="all">전체 항목</option>
-                <option value="cost_sum">원가</option>
-                <option value="sga_sum">판관비</option>
-                <option value="labor_sum">원가인건비</option>
-                <option value="outsourcing_sum">원가외주비</option>
-            </select>
-        </div>
-        <div class="legend-box" id="summaryLegend"></div>
-    </div>
-    <div class="chart-shell">
-        <svg id="summaryChart" class="chart-svg" viewBox="0 0 1120 390" preserveAspectRatio="xMidYMid meet"></svg>
-    </div>
-</section>
+        <div class="dashboard-chart-stack">
+            <section class="chart-panel">
+                <div class="chart-panel-header">
+                    <h3>수금 구성</h3>
+                    <div class="filter-row">
+                        <select id="revenueGranularity" aria-label="수금 구성 집계 단위">
+                            <option value="yearly" {% if not overview_selected_year %}selected{% endif %}>연도별</option>
+                            <option value="monthly" {% if overview_selected_year %}selected{% endif %}>월별</option>
+                        </select>
+                        <select id="revenueYear" aria-label="수금 구성 연도 선택">
+                            <option value="all">전체연도</option>
+                            {% for year in available_years %}
+                                <option value="{{ year }}" {% if overview_selected_year == year %}selected{% endif %}>{{ year }}</option>
+                            {% endfor %}
+                        </select>
+                        <select id="revenueMetric" aria-label="수금 구성 항목 선택">
+                            <option value="all">전체 항목</option>
+                            <option value="design_revenue">설계</option>
+                            <option value="design_other_revenue">설계 외</option>
+                            <option value="supervision_revenue">감리</option>
+                            <option value="inspection_revenue">점검</option>
+                        </select>
+                    </div>
+                </div>
+                <div class="chart-shell">
+                    <div class="legend-box center" id="revenueLegend"></div>
+                    <svg id="revenueChart" class="chart-svg" viewBox="0 0 1120 390" preserveAspectRatio="xMidYMid meet"></svg>
+                </div>
+            </section>
 
-<section class="panel chart-panel">
-    <div class="section-title">
-        <h2>원가·판관비 추세</h2>
-    </div>
-    <div class="filter-row">
-        <div class="field">
-            <select id="trendYear" aria-label="연도 선택">
-                <option value="recent10">최근 10개년</option>
-                {% for year in available_years %}
-                    <option value="{{ year }}">{{ year }}</option>
-                {% endfor %}
-            </select>
+            <section class="chart-panel">
+                <div class="chart-panel-header">
+                    <h3>지출 구성</h3>
+                    <div class="filter-row">
+                        <select id="expenseGranularity" aria-label="지출 구성 집계 단위">
+                            <option value="yearly" {% if not overview_selected_year %}selected{% endif %}>연도별</option>
+                            <option value="monthly" {% if overview_selected_year %}selected{% endif %}>월별</option>
+                        </select>
+                        <select id="expenseYear" aria-label="지출 구성 연도 선택">
+                            <option value="all">전체연도</option>
+                            {% for year in available_years %}
+                                <option value="{{ year }}" {% if overview_selected_year == year %}selected{% endif %}>{{ year }}</option>
+                            {% endfor %}
+                        </select>
+                        <select id="expenseMetric" aria-label="지출 구성 항목 선택">
+                            <option value="all">전체 항목</option>
+                            <option value="cost_sum">원가</option>
+                            <option value="sga_sum">판관비</option>
+                            <option value="labor_sum">원가인건비</option>
+                            <option value="outsourcing_sum">원가외주비</option>
+                        </select>
+                    </div>
+                </div>
+                <div class="chart-shell">
+                    <div class="legend-box center" id="expenseLegend"></div>
+                    <svg id="expenseChart" class="chart-svg" viewBox="0 0 1120 390" preserveAspectRatio="xMidYMid meet"></svg>
+                </div>
+            </section>
         </div>
-        <div class="field">
-            <select id="trendMetric" aria-label="표시 방식">
-                <option value="cost_sga">원가 + 판관비</option>
-                <option value="all">전체 항목</option>
-                <option value="labor_outsourcing">인건비 + 외주비</option>
-            </select>
-        </div>
-        <div></div>
-        <div class="legend-box" id="trendLegend"></div>
-    </div>
-    <div class="chart-shell">
-        <svg id="trendChart" class="chart-svg" viewBox="0 0 1120 390" preserveAspectRatio="xMidYMid meet"></svg>
     </div>
 </section>
 {% endblock %}
 
 {% block script %}
 <script>
+    const availableYears = {{ available_years | tojson }};
     const yearlySummary = {{ yearly_summary | tojson }};
     const monthlySummary = {{ monthly_summary | tojson }};
-    const availableYears = {{ available_years | tojson }};
+    const revenueYearly = {{ project_revenue_mix_yearly | tojson }};
+    const revenueMonthly = {{ project_revenue_mix_monthly | tojson }};
+    const pageSelectedYear = {{ overview_selected_year | tojson }};
 
-    const palette = {
+    const revenuePalette = {
+        design_revenue: { label: "설계", color: "#4f7cff" },
+        design_other_revenue: { label: "설계 외", color: "#67c7c9" },
+        supervision_revenue: { label: "감리", color: "#233a5a" },
+        inspection_revenue: { label: "점검", color: "#ffb54a" },
+    };
+
+    const expensePalette = {
         cost_sum: { label: "원가", color: "#4f7cff" },
         sga_sum: { label: "판관비", color: "#67c7c9" },
         labor_sum: { label: "원가인건비", color: "#233a5a" },
         outsourcing_sum: { label: "원가외주비", color: "#ffb54a" },
     };
 
-    const summaryMetricsMap = {
+    const revenueMetricMap = {
+        all: ["design_revenue", "design_other_revenue", "supervision_revenue", "inspection_revenue"],
+        design_revenue: ["design_revenue"],
+        design_other_revenue: ["design_other_revenue"],
+        supervision_revenue: ["supervision_revenue"],
+        inspection_revenue: ["inspection_revenue"],
+    };
+
+    const expenseMetricMap = {
         all: ["cost_sum", "sga_sum", "labor_sum", "outsourcing_sum"],
         cost_sum: ["cost_sum"],
         sga_sum: ["sga_sum"],
@@ -314,12 +360,6 @@
         outsourcing_sum: ["outsourcing_sum"],
     };
 
-    const trendMetricsMap = {
-        cost_sga: ["cost_sum", "sga_sum"],
-        all: ["cost_sum", "sga_sum", "labor_sum", "outsourcing_sum"],
-        labor_outsourcing: ["labor_sum", "outsourcing_sum"],
-    };
-
     function formatNumber(value) {
         return new Intl.NumberFormat("ko-KR", { maximumFractionDigits: 0 }).format(value || 0);
     }
@@ -363,13 +403,13 @@
         return { tickStep, tickMax };
     }
 
-    function setLegend(containerId, metricKeys) {
+    function setLegend(containerId, metricKeys, paletteMap) {
         const target = document.getElementById(containerId);
         if (!target) return;
         target.innerHTML = metricKeys.map((key) => `
             <span class="legend-item">
-                <span class="legend-swatch" style="background:${palette[key].color}"></span>
-                ${palette[key].label}
+                <span class="legend-swatch" style="background:${paletteMap[key].color}"></span>
+                ${paletteMap[key].label}
             </span>
         `).join("");
     }
@@ -383,7 +423,7 @@
         `;
     }
 
-    function renderGroupedBarChart(svgId, rows, metricKeys, options = {}) {
+    function renderGroupedBarChart(svgId, rows, metricKeys, paletteMap, options = {}) {
         const svg = document.getElementById(svgId);
         if (!svg) return;
         if (!rows.length || !metricKeys.length) {
@@ -394,13 +434,10 @@
         const granularity = options.granularity || "yearly";
         const width = 1120;
         const height = 390;
-        const margin = { top: 42, right: 36, bottom: 78, left: 94 };
+        const margin = { top: 34, right: 26, bottom: 74, left: 94 };
         const plotWidth = width - margin.left - margin.right;
         const plotHeight = height - margin.top - margin.bottom;
-        const maxValue = Math.max(
-            1,
-            ...rows.flatMap((row) => metricKeys.map((key) => Number(row[key] || 0))),
-        );
+        const maxValue = Math.max(1, ...rows.flatMap((row) => metricKeys.map((key) => Number(row[key] || 0))));
         const { tickStep, tickMax } = buildPositiveAxis(maxValue, 4);
         const groupWidth = plotWidth / Math.max(rows.length, 1);
         const axisBaseY = height - margin.bottom;
@@ -425,7 +462,6 @@
             </defs>
             <rect x="0" y="0" width="${width}" height="${height}" rx="8" fill="url(#${svgId}Bg)"></rect>
             <rect x="${margin.left}" y="${margin.top}" width="${plotWidth}" height="${plotHeight}" rx="4" fill="rgba(255,255,255,0.72)" stroke="#dde7ec"></rect>
-            <text x="${margin.left}" y="24" fill="#334654" font-size="14" font-weight="700">${granularity === "monthly" ? "월간 비교" : "연간 비교"}</text>
         `;
 
         for (let value = 0; value <= tickMax; value += tickStep) {
@@ -446,7 +482,7 @@
                 const y = margin.top + plotHeight - barHeight;
                 const labelY = Math.max(y - 12, margin.top - 8);
                 const showValueLabel = barHeight > 24 && (granularity === "yearly" || metricKeys.length <= 2 || drawWidth >= 16);
-                markup += `<rect x="${x}" y="${y}" width="${drawWidth}" height="${barHeight}" rx="3" fill="${palette[key].color}" filter="url(#${svgId}Shadow)"></rect>`;
+                markup += `<rect x="${x}" y="${y}" width="${drawWidth}" height="${barHeight}" rx="3" fill="${paletteMap[key].color}" filter="url(#${svgId}Shadow)"></rect>`;
                 if (showValueLabel) {
                     markup += `<text x="${x + drawWidth / 2}" y="${labelY}" text-anchor="middle" fill="#35505f" font-size="10" font-weight="700">${formatValueLabel(value)}</text>`;
                 }
@@ -459,68 +495,44 @@
         svg.innerHTML = markup;
     }
 
-    function renderLineChart(svgId, rows, metricKeys) {
-        const svg = document.getElementById(svgId);
-        if (!svg) return;
-        const width = 1120;
-        const height = 390;
-        const margin = { top: 24, right: 24, bottom: 64, left: 86 };
-        const plotWidth = width - margin.left - margin.right;
-        const plotHeight = height - margin.top - margin.bottom;
-        const maxValue = Math.max(
-            1,
-            ...rows.flatMap((row) => metricKeys.map((key) => Number(row[key] || 0))),
-        );
-        const { tickStep, tickMax } = buildPositiveAxis(maxValue, 4);
-        const xStep = rows.length > 1 ? plotWidth / (rows.length - 1) : 0;
-        const axisBaseY = height - margin.bottom;
-
-        let markup = `
-            <defs>
-                <linearGradient id="${svgId}Bg" x1="0" x2="0" y1="0" y2="1">
-                    <stop offset="0%" stop-color="#ffffff" stop-opacity="0.9" />
-                    <stop offset="100%" stop-color="#f3f8fa" stop-opacity="0.98" />
-                </linearGradient>
-                <filter id="${svgId}Shadow" x="-20%" y="-20%" width="140%" height="160%">
-                    <feDropShadow dx="0" dy="8" stdDeviation="8" flood-color="rgba(44, 68, 89, 0.16)" />
-                </filter>
-            </defs>
-            <rect x="0" y="0" width="${width}" height="${height}" rx="24" fill="url(#${svgId}Bg)"></rect>
-            <rect x="${margin.left}" y="${margin.top}" width="${plotWidth}" height="${plotHeight}" rx="18" fill="rgba(255,255,255,0.68)"></rect>
-        `;
-
-        for (let value = 0; value <= tickMax; value += tickStep) {
-            const y = margin.top + plotHeight - (value / tickMax) * plotHeight;
-            markup += `<line x1="${margin.left}" y1="${y}" x2="${width - margin.right}" y2="${y}" stroke="#d6e2e8" stroke-dasharray="4 7"></line>`;
-            markup += `<text x="${margin.left - 14}" y="${y + 5}" text-anchor="end" fill="#62717f" font-size="12">${formatAxisLabel(value)}</text>`;
-        }
-        markup += `<line x1="${margin.left}" y1="${axisBaseY}" x2="${width - margin.right}" y2="${axisBaseY}" stroke="#7f95a5" stroke-width="1.2"></line>`;
-
-        metricKeys.forEach((key) => {
-            const points = rows.map((row, index) => {
-                const x = margin.left + index * xStep;
-                const y = margin.top + plotHeight - ((Number(row[key] || 0) / tickMax) * plotHeight);
-                return { x, y, value: Number(row[key] || 0), label: row.label };
-            });
-            markup += `<path d="M ${points.map((p) => `${p.x} ${p.y}`).join(" L ")}" fill="none" stroke="${palette[key].color}" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" filter="url(#${svgId}Shadow)"></path>`;
-            points.forEach((point) => {
-                markup += `<circle cx="${point.x}" cy="${point.y}" r="5.5" fill="${palette[key].color}" stroke="#ffffff" stroke-width="2"></circle>`;
-            });
-        });
-
-        rows.forEach((row, index) => {
-            const x = margin.left + index * xStep;
-            if (rows.length <= 18 || index % Math.ceil(rows.length / 12) === 0) {
-                markup += `<text x="${x}" y="${height - 26}" text-anchor="middle" fill="#425464" font-size="13" font-weight="700">${row.label}</text>`;
-            }
-        });
-
-        svg.innerHTML = markup;
+    function getLatestAvailableYear() {
+        return String(availableYears[availableYears.length - 1] || "all");
     }
 
-    function getSummaryRows() {
-        const granularity = document.getElementById("summaryGranularity").value;
-        const yearFilter = document.getElementById("summaryYear").value;
+    function syncYearSelection(selectId, granularity) {
+        const select = document.getElementById(selectId);
+        if (!select) return;
+        if (granularity === "yearly") {
+            select.value = "all";
+            select.disabled = true;
+            return;
+        }
+        const hasSelectedYear = availableYears.some((year) => String(year) === String(select.value));
+        if (select.value === "all" || !hasSelectedYear) {
+            select.value = pageSelectedYear ? String(pageSelectedYear) : getLatestAvailableYear();
+        }
+        select.disabled = false;
+    }
+
+    function getRevenueRows() {
+        const granularity = document.getElementById("revenueGranularity").value;
+        const yearFilter = document.getElementById("revenueYear").value;
+        const source = granularity === "yearly" ? revenueYearly : revenueMonthly;
+        return source
+            .filter((row) => {
+                if (granularity === "yearly") return true;
+                return yearFilter === "all" ? true : String(row.year) === yearFilter;
+            })
+            .map((row) => ({
+                ...row,
+                label: granularity === "yearly" ? String(row.year) : `${row.month}월`,
+            }))
+            .slice(granularity === "yearly" ? -10 : 0);
+    }
+
+    function getExpenseRows() {
+        const granularity = document.getElementById("expenseGranularity").value;
+        const yearFilter = document.getElementById("expenseYear").value;
         const source = granularity === "yearly" ? yearlySummary : monthlySummary;
         return source
             .filter((row) => {
@@ -534,79 +546,36 @@
             .slice(granularity === "yearly" ? -10 : 0);
     }
 
-    function getLatestAvailableYear() {
-        return String(availableYears[availableYears.length - 1] || "all");
+    function updateRevenueChart() {
+        const granularity = document.getElementById("revenueGranularity").value;
+        syncYearSelection("revenueYear", granularity);
+        const metricKeys = revenueMetricMap[document.getElementById("revenueMetric").value];
+        setLegend("revenueLegend", metricKeys, revenuePalette);
+        renderGroupedBarChart("revenueChart", getRevenueRows(), metricKeys, revenuePalette, { granularity });
     }
 
-    function syncSummaryYearSelection(granularity) {
-        const summaryYearSelect = document.getElementById("summaryYear");
-        if (!summaryYearSelect) return;
-
-        if (granularity === "yearly") {
-            summaryYearSelect.value = "all";
-            summaryYearSelect.disabled = true;
-            return;
-        }
-
-        const hasSelectedYear = availableYears.some((year) => String(year) === String(summaryYearSelect.value));
-        if (summaryYearSelect.value === "all" || !hasSelectedYear) {
-            summaryYearSelect.value = getLatestAvailableYear();
-        }
-        summaryYearSelect.disabled = false;
+    function updateExpenseChart() {
+        const granularity = document.getElementById("expenseGranularity").value;
+        syncYearSelection("expenseYear", granularity);
+        const metricKeys = expenseMetricMap[document.getElementById("expenseMetric").value];
+        setLegend("expenseLegend", metricKeys, expensePalette);
+        renderGroupedBarChart("expenseChart", getExpenseRows(), metricKeys, expensePalette, { granularity });
     }
 
-    function updateSummaryChart() {
-        const granularity = document.getElementById("summaryGranularity").value;
-        const metricMode = document.getElementById("summaryMetric").value;
-        const metricKeys = summaryMetricsMap[metricMode];
-        syncSummaryYearSelection(granularity);
-        const rows = getSummaryRows();
-        setLegend("summaryLegend", metricKeys);
-        renderGroupedBarChart("summaryChart", rows, metricKeys, { granularity });
-    }
+    document.getElementById("revenueGranularity")?.addEventListener("change", updateRevenueChart);
+    document.getElementById("revenueYear")?.addEventListener("change", updateRevenueChart);
+    document.getElementById("revenueMetric")?.addEventListener("change", updateRevenueChart);
+    document.getElementById("expenseGranularity")?.addEventListener("change", updateExpenseChart);
+    document.getElementById("expenseYear")?.addEventListener("change", updateExpenseChart);
+    document.getElementById("expenseMetric")?.addEventListener("change", updateExpenseChart);
 
-    function updateTrendChart() {
-        const selectedYear = document.getElementById("trendYear").value;
-        const metricMode = document.getElementById("trendMetric").value;
-        const metricKeys = trendMetricsMap[metricMode];
-        const rows = selectedYear === "recent10"
-            ? yearlySummary
-                .slice(-10)
-                .map((row) => ({
-                    ...row,
-                    label: String(row.year),
-                }))
-            : monthlySummary
-                .filter((row) => String(row.year) === String(selectedYear))
-                .map((row) => ({ ...row, label: `${row.month}월` }));
-        setLegend("trendLegend", metricKeys);
-        renderLineChart("trendChart", rows, metricKeys);
-    }
-
-    document.getElementById("summaryGranularity")?.addEventListener("change", updateSummaryChart);
-    document.getElementById("summaryYear")?.addEventListener("change", updateSummaryChart);
-    document.getElementById("summaryMetric")?.addEventListener("change", updateSummaryChart);
-    document.getElementById("trendYear")?.addEventListener("change", updateTrendChart);
-    document.getElementById("trendMetric")?.addEventListener("change", updateTrendChart);
-
-    const defaultYear = getLatestAvailableYear();
-    const trendYear = document.getElementById("trendYear");
-    if (trendYear) {
-        trendYear.value = "recent10";
-    }
-    const summaryYear = document.getElementById("summaryYear");
-    if (summaryYear) {
-        syncSummaryYearSelection(document.getElementById("summaryGranularity")?.value || "yearly");
-    }
+    document.getElementById("dashboardYearSelect")?.addEventListener("change", (event) => {
+        event.target.form?.submit();
+    });
 
     const uploadButton = document.getElementById("uploadButton");
     const excelInput = document.getElementById("excel_file");
     const uploadForm = document.getElementById("uploadForm");
-    const overviewYear = document.getElementById("overviewYear");
-
-    overviewYear?.addEventListener("change", (event) => {
-        event.target.form?.submit();
-    });
 
     uploadButton?.addEventListener("click", () => {
         excelInput?.click();
@@ -618,7 +587,9 @@
         }
     });
 
-    updateSummaryChart();
-    updateTrendChart();
+    syncYearSelection("revenueYear", document.getElementById("revenueGranularity")?.value || "yearly");
+    syncYearSelection("expenseYear", document.getElementById("expenseGranularity")?.value || "yearly");
+    updateRevenueChart();
+    updateExpenseChart();
 </script>
 {% endblock %}