YJKIM/HM_project_Viewer_Board
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refine process cost navigation and unify section layouts

Browse Source
This commit is contained in:
b17301
2026-04-28 18:11:14 +09:00
parent 1d6470c770
commit 3bf48c42db
8 changed files with 1302 additions and 279 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/annual_summary.html
+18 -10
View File
@@ -54,13 +54,12 @@
}
.chart-box {
background:
linear-gradient(180deg, rgba(255,255,255,0.98), rgba(246,247,249,0.98)),
radial-gradient(circle at top left, rgba(17, 17, 17, 0.045), transparent 36%);
border: 1px solid var(--line);
border-radius: 16px;
padding: 18px 20px 20px;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.92);
background: transparent;
border: 0;
border-top: 1px solid var(--line);
border-radius: 0;
padding: 18px 0 0;
box-shadow: none;
content-visibility: auto;
contain-intrinsic-size: 620px;
}
@@ -96,6 +95,8 @@
min-height: 100%;
content-visibility: auto;
contain-intrinsic-size: 760px;
padding-right: 14px;
border-right: 1px solid rgba(217, 221, 227, 0.9);
}
.metric-grid {
@@ -128,8 +129,8 @@
}
.summary-overview .stat-card {
padding: 14px 14px 15px;
border-radius: 12px;
padding: 0 8px 12px 0;
border-radius: 0;
gap: 4px;
}
@@ -174,7 +175,7 @@
}
body[data-view-mode="dual"] .chart-box {
padding: 12px 12px 14px;
padding: 12px 0 0;
min-height: 100%;
}
@@ -191,6 +192,13 @@
.metric-grid {
grid-template-columns: 1fr;
}
.summary-overview {
padding-right: 0;
padding-bottom: 12px;
border-right: 0;
border-bottom: 1px solid rgba(217, 221, 227, 0.9);
}
}
</style>
{% endblock %}
templates/base.html
+20 -17
View File
@@ -23,6 +23,7 @@
--page-frame-width-dual: min(2560px, calc(100vw - (var(--page-gutter) * 2)));
--page-frame-width-single: min(1520px, calc(100vw - (var(--page-gutter) * 2)));
--status-widget-height: 34px;
--toolbar-row-height: 44px;
}
* {
@@ -116,12 +117,12 @@
}
.panel {
background: var(--panel);
border: 1px solid var(--line);
border-radius: 18px;
padding: var(--panel-pad);
box-shadow: 0 10px 24px rgba(21, 24, 29, 0.045);
backdrop-filter: blur(6px);
background: transparent;
border: 0;
border-radius: 0;
padding: 0;
box-shadow: none;
backdrop-filter: none;
}
.section-title {
@@ -165,11 +166,12 @@
}
.stat-card {
background: var(--white);
border: 1px solid var(--line);
border-radius: 14px;
padding: 14px 15px 13px;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.7);
background: transparent;
border: 0;
border-radius: 0;
padding: 0 0 14px;
box-shadow: none;
border-bottom: 1px solid rgba(217, 221, 227, 0.9);
}
.stat-card .label {
@@ -402,9 +404,10 @@
.table-wrap {
overflow: auto;
border: 1px solid var(--line);
border-radius: 14px;
background: var(--white);
border: 0;
border-top: 1px solid var(--line);
border-radius: 0;
background: transparent;
}
table {
@@ -431,7 +434,7 @@
}
tbody tr:nth-child(even) td {
background: var(--table-alt);
background: rgba(245, 246, 248, 0.65);
}
.empty {
@@ -614,9 +617,9 @@
<div class="page">
<nav class="nav">
<a href="/" class="{% if request.url.path == '/' %}active{% endif %}">대시보드</a>
<a href="/projects" class="{% if request.url.path == '/projects' %}active{% endif %}">프로젝트 정보</a>
<a href="/annual-summary" class="{% if request.url.path == '/annual-summary' %}active{% endif %}">연도별 수익/비용</a>
<a href="/process-cost" class="{% if request.url.path == '/process-cost' %}active{% endif %}">프로세스 원가</a>
<a href="/process-cost" class="{% if request.url.path == '/process-cost' %}active{% endif %}">프로젝트 원가</a>
<a href="/projects" class="{% if request.url.path == '/projects' %}active{% endif %}">프로젝트 정보</a>
<a href="/wehago-compare" class="{% if request.url.path == '/wehago-compare' %}active{% endif %}">전표비교</a>
<div class="nav-spacer"></div>
<button type="button" class="view-mode-switch" id="viewModeSwitch" data-mode="dual" aria-label="화면 구성 전환">
templates/dashboard.html
+20 -9
View File
@@ -10,7 +10,9 @@
align-items: center;
gap: 14px;
flex-wrap: wrap;
margin-bottom: 16px;
margin-bottom: 20px;
padding-bottom: 14px;
border-bottom: 1px solid var(--line);
}
.dashboard-topbar-actions {
@@ -80,6 +82,8 @@
.dashboard-status-panel {
display: grid;
gap: 12px;
padding-right: 12px;
border-right: 1px solid rgba(217, 221, 227, 0.9);
}
.dashboard-status-grid {
@@ -90,6 +94,7 @@
.dashboard-status-grid .stat-card {
min-height: 84px;
padding-right: 10px;
}
.dashboard-status-grid .stat-card .value {
@@ -131,13 +136,12 @@
}
.chart-shell {
background:
linear-gradient(180deg, rgba(255,255,255,0.98), rgba(246,247,249,0.98)),
radial-gradient(circle at top left, rgba(24, 24, 27, 0.045), transparent 38%);
border: 1px solid var(--line);
border-radius: 16px;
padding: 14px 16px 16px;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.92);
background: transparent;
border: 0;
border-top: 1px solid var(--line);
border-radius: 0;
padding: 14px 0 0;
box-shadow: none;
display: grid;
gap: 12px;
content-visibility: auto;
@@ -214,7 +218,7 @@
}
body[data-view-mode="dual"] .chart-shell {
padding: 10px 12px 12px;
padding: 10px 0 0;
min-height: 100%;
}
@@ -227,6 +231,13 @@
grid-template-columns: 1fr;
}
.dashboard-status-panel {
padding-right: 0;
padding-bottom: 12px;
border-right: 0;
border-bottom: 1px solid rgba(217, 221, 227, 0.9);
}
.dashboard-chart-stack {
grid-template-rows: auto;
}
templates/process_cost.html
+766 -107
View File
File diff suppressed because it is too large Load Diff
templates/projects.html
+106 -38
View File
@@ -71,10 +71,11 @@
}
.metric-note {
background: rgba(255, 255, 255, 0.92);
border: 1px solid var(--line);
border-radius: 16px;
padding: 14px 16px;
background: transparent;
border: 0;
border-top: 1px solid var(--line);
border-radius: 0;
padding: 14px 0 0;
color: var(--muted);
line-height: 1.7;
font-size: 14px;
@@ -85,13 +86,12 @@
}
.chart-stage {
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(246, 247, 249, 0.98)),
radial-gradient(circle at top left, rgba(17, 17, 17, 0.045), transparent 34%);
border: 1px solid var(--line);
border-radius: 16px;
padding: 16px;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
background: transparent;
border: 0;
border-top: 1px solid var(--line);
border-radius: 0;
padding: 16px 0 0;
box-shadow: none;
}
.chart-header {
@@ -189,7 +189,20 @@
justify-content: space-between;
align-items: center;
gap: 12px;
margin-bottom: 10px;
min-height: var(--toolbar-row-height);
margin-bottom: 12px;
padding: 0 0 12px;
border-bottom: 1px solid var(--line);
}
.toolbar-head h3,
.toolbar-head h4 {
margin: 0;
height: var(--toolbar-row-height);
display: inline-flex;
align-items: center;
line-height: 1.2;
padding: 0;
}
.toolbar-title-group {
@@ -210,6 +223,7 @@
display: inline-flex;
align-items: center;
gap: 8px;
min-height: var(--toolbar-row-height);
}
.project-quick-link-bar {
@@ -300,9 +314,10 @@
.project-search-controls {
display: grid;
grid-template-columns: minmax(0, 1fr) 170px 210px;
grid-template-columns: minmax(0, 1fr) 180px 236px;
gap: 12px;
align-items: end;
align-items: center;
min-height: var(--toolbar-row-height);
}
.project-search-field {
@@ -312,6 +327,16 @@
z-index: 180;
}
.project-search-field > input,
.project-search-controls .field > select,
.uncontracted-toolbar .field > select {
height: 44px;
min-height: 44px;
padding-top: 0;
padding-bottom: 0;
line-height: 44px;
}
.project-search-dropdown {
display: none;
position: absolute;
@@ -452,10 +477,11 @@
}
.analysis-stat {
border: 1px solid #dfe6ee;
border-radius: 14px;
background: rgba(255,255,255,0.94);
padding: 14px 16px;
border: 0;
border-bottom: 1px solid rgba(217, 221, 227, 0.9);
border-radius: 0;
background: transparent;
padding: 0 0 12px;
display: grid;
gap: 5px;
}
@@ -471,14 +497,21 @@
}
.analysis-panel {
background: rgba(255,255,255,0.98);
border: 1px solid var(--line);
border-radius: 18px;
padding: 18px;
background: transparent;
border: 0;
border-top: 1px solid var(--line);
border-radius: 0;
padding: 18px 0 0;
display: grid;
gap: 14px;
}
.analysis-panel:empty {
display: none;
border-top: 0;
padding-top: 0;
}
.analysis-panel h4 {
font-size: 16px;
}
@@ -1016,7 +1049,7 @@
}
#projectUncontractedDashboard {
padding: 20px;
padding: 0;
position: relative;
z-index: 1;
}
@@ -1034,13 +1067,29 @@
z-index: 1;
content-visibility: visible;
contain: none;
margin-top: 12px;
padding-top: 0;
border-top: 0;
}
.uncontracted-toolbar {
display: grid;
grid-template-columns: repeat(2, 180px) auto;
grid-template-columns: 180px 180px 44px;
gap: 12px;
align-items: end;
align-items: center;
min-height: var(--toolbar-row-height);
width: 428px;
justify-content: end;
}
.uncontracted-dashboard .toolbar-head {
margin-bottom: 10px;
padding-top: 0;
}
.uncontracted-dashboard .toolbar-head h3 {
height: var(--toolbar-row-height);
line-height: 1;
}
.uncontracted-summary-grid {
@@ -1050,10 +1099,11 @@
}
.uncontracted-stat {
border: 1px solid #dfe6ee;
border-radius: 14px;
padding: 12px;
background: #fbfcfd;
border: 0;
border-bottom: 1px solid rgba(217, 221, 227, 0.9);
border-radius: 0;
padding: 0 0 12px;
background: transparent;
display: grid;
gap: 4px;
text-align: left;
@@ -1067,14 +1117,14 @@
.uncontracted-stat.is-clickable {
cursor: pointer;
transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
transition: color 0.16s ease, border-color 0.16s ease;
}
.uncontracted-stat.is-clickable:hover,
.uncontracted-stat.is-clickable.is-active {
border-color: #c8d7e5;
box-shadow: 0 12px 22px rgba(22, 33, 50, 0.08);
transform: translateY(-1px);
border-color: #111827;
box-shadow: none;
transform: none;
}
.uncontracted-stat span {
@@ -1131,6 +1181,15 @@
.uncontracted-dashboard-grid .detail-block {
height: 100%;
background: transparent;
border: 0;
border-top: 1px solid var(--line);
border-radius: 0;
padding: 12px 0 0;
}
.uncontracted-dashboard-grid .detail-block h4 {
margin-bottom: 10px;
}
.compact-table {
@@ -1152,7 +1211,15 @@
.compact-table th {
font-size: 11px;
color: #547085;
background: #f5f8fb;
background: #f8fafc;
}
.compact-table td {
background: #ffffff;
}
.compact-table tbody tr:nth-child(even) td {
background: #fcfdff;
}
.compact-table td:last-child,
@@ -2199,7 +2266,7 @@
.metric-grid .stat-card {
min-height: 78px;
padding: 11px 12px 10px;
padding: 0 8px 10px 0;
}
.metric-grid .stat-card .value {
@@ -2412,7 +2479,7 @@
<div class="field">
<select id="projectCostYearFilter" aria-label="연도 필터">
<option value="">전체 연도</option>
{% for year in project_year_options %}
{% for year in project_year_options|sort(reverse=True) %}
<option value="{{ year }}">{{ year }}</option>
{% endfor %}
</select>
@@ -6339,8 +6406,9 @@
function renderUncontractedDashboard() {
const data = buildUncontractedDashboardData();
const allYears = getUncontractedYearRange().allYears;
const startOptions = allYears.map((year) => `<option value="${year}"${Number(year) === Number(data.startYear) ? " selected" : ""}>${year}</option>`).join("");
const endOptions = allYears.map((year) => `<option value="${year}"${Number(year) === Number(data.endYear) ? " selected" : ""}>${year}</option>`).join("");
const orderedYears = [...allYears].sort((a, b) => Number(b) - Number(a));
const startOptions = orderedYears.map((year) => `<option value="${year}"${Number(year) === Number(data.startYear) ? " selected" : ""}>${year}</option>`).join("");
const endOptions = orderedYears.map((year) => `<option value="${year}"${Number(year) === Number(data.endYear) ? " selected" : ""}>${year}</option>`).join("");
const detailExpenseTotal = (data.detailRows || []).reduce((sum, row) => sum + Number(row.expense_amount || 0), 0);
const detailRevenueTotal = (data.detailRows || []).reduce((sum, row) => sum + Number(row.revenue_amount || 0), 0);
latestExcludedDetailRows = data.excludedDetailRows || [];
templates/wehago_compare.html
+33 -21
View File
@@ -15,6 +15,8 @@
align-items: center;
gap: 12px;
flex-wrap: wrap;
padding-bottom: 14px;
border-bottom: 1px solid var(--line);
}
.voucher-title-wrap h2 {
@@ -164,15 +166,24 @@
}
.panel-shell {
border: 1px solid var(--line);
border-radius: 16px;
background: #fff;
border: 0;
border-top: 1px solid var(--line);
border-radius: 0;
background: transparent;
overflow: hidden;
box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
box-shadow: none;
}
.voucher-page > .panel-shell:first-of-type {
border-top: 0;
}
.voucher-page > .panel-shell:first-of-type > .panel-header {
padding-top: 0;
}
.panel-header {
padding: 12px 16px 8px;
padding: 14px 0 10px;
display: flex;
justify-content: space-between;
gap: 10px;
@@ -195,7 +206,7 @@
}
.panel-body {
padding: 0 16px 16px;
padding: 0 0 16px;
min-width: 0;
}
@@ -208,9 +219,9 @@
.status-card {
min-width: 130px;
width: auto;
border: 1px solid var(--line);
border-radius: 14px;
background: #fff;
border: 1px solid rgba(217, 221, 227, 0.9);
border-radius: 999px;
background: rgba(255, 255, 255, 0.76);
padding: 10px 12px;
text-align: left;
cursor: pointer;
@@ -259,9 +270,10 @@
.detail-panel {
display: none;
border: 1px solid var(--line);
border-radius: 14px;
background: #fff;
border: 0;
border-top: 1px solid var(--line);
border-radius: 0;
background: transparent;
overflow: visible;
min-width: 0;
}
@@ -271,9 +283,9 @@
}
.detail-head {
padding: 10px 12px;
border-bottom: 1px solid var(--line);
background: #f8fafc;
padding: 14px 0 10px;
border-bottom: 1px solid rgba(217, 221, 227, 0.9);
background: transparent;
display: grid;
gap: 10px;
position: relative;
@@ -288,7 +300,7 @@
justify-content: space-between;
align-items: center;
gap: 12px;
padding: 12px 16px;
padding: 14px 0;
}
.data-panel summary::-webkit-details-marker {
@@ -331,8 +343,8 @@
width: 100%;
max-width: 100%;
overflow: auto;
border-top: 1px solid var(--line);
background: #fff;
border-top: 1px solid rgba(217, 221, 227, 0.9);
background: transparent;
max-height: 460px;
box-sizing: border-box;
}
@@ -346,9 +358,9 @@
.table-footer {
display: flex;
justify-content: center;
padding: 10px 12px 14px;
border-top: 1px solid var(--line);
background: #fff;
padding: 10px 0 14px;
border-top: 1px solid rgba(217, 221, 227, 0.9);
background: transparent;
}
.load-more-button {