feat(project): 프로젝트 페이지에 아사나식 대시보드 탭 추가

보드/리스트/달력/타임라인 옆에 "대시보드" 탭 신설. 서버 재조회 없이 이미
로드된 tasks(visibleTasks(), 스코프 토글도 그대로 따름)로 클라이언트에서
즉시 집계:
- 통계 카드 4개(완료/미완료/마감초과/전체), 숫자가 0에서 카운트업
- 미완료 작업 합계(섹션별) — 세로 막대, 보드 컬럼과 같은 순서
- 작업 합계(완료 상태별) — SVG 도넛(완료=초록/미완료=포인트컬러), 등장 시
  획이 0에서 목표 길이까지 그려짐
- 예정된 작업 합계(담당자별) — 일정 있는 미완료 업무만, 상위 10명+기타

막대/도넛 둘 다 호버 시 값 우선 툴팁, 카드는 순차 페이드인(아사나 느낌).
차트 라이브러리 추가 없이 순수 SVG/CSS로 구현. 탭 5개로 늘면서 좁은
화면에서 텍스트가 줄바꿈되던 버그도 같이 고침(pj-view-tabs flex-shrink).
This commit is contained in:
2026-09-16 17:08:40 +09:00
parent cfa41f0f6f
commit 8634b2602b
5 changed files with 281 additions and 9 deletions
@@ -1,7 +1,7 @@
{% extends "erp_base.html" %}
{% block head_extra %}
<link rel="stylesheet" href="/static/project.css?v=20260917g" />
<link rel="stylesheet" href="/static/project.css?v=20260917h" />
<link rel="stylesheet" href="/static/vendor/material-symbols/material-symbols.css" />
{% endblock %}
@@ -45,5 +45,5 @@
{% endif %}
</div>
<script src="/static/project.js?v=20260917l" defer></script>
<script src="/static/project.js?v=20260917m" defer></script>
{% endblock %}
@@ -1,7 +1,7 @@
{% extends "erp_base.html" %}
{% block head_extra %}
<link rel="stylesheet" href="/static/project.css?v=20260917g" />
<link rel="stylesheet" href="/static/project.css?v=20260917h" />
<link rel="stylesheet" href="/static/vendor/material-symbols/material-symbols.css" />
{% endblock %}
@@ -393,5 +393,5 @@
<script>
window.PJ_COLORS = {{ ["#4573d2","#37a3a3","#62a420","#e8a33d","#e8384f","#aa62e3","#f06a6a","#5a6772"] | tojson }};
</script>
<script src="/static/project.js?v=20260917l" defer></script>
<script src="/static/project.js?v=20260917m" defer></script>
{% endblock %}
@@ -1,7 +1,7 @@
{% extends "erp_base.html" %}
{% block head_extra %}
<link rel="stylesheet" href="/static/project.css?v=20260917g" />
<link rel="stylesheet" href="/static/project.css?v=20260917h" />
<!-- 구글 머티리얼 심볼(담당자 아이콘 등) — self-host -->
<link rel="stylesheet" href="/static/vendor/material-symbols/material-symbols.css" />
<!-- 타임라인 vis-timeline — self-host -->
@@ -100,6 +100,7 @@
<button type="button" class="pj-tab" data-view="list">리스트</button>
<button type="button" class="pj-tab" data-view="calendar">달력</button>
<button type="button" class="pj-tab" data-view="timeline">타임라인</button>
<button type="button" class="pj-tab" data-view="dashboard">대시보드</button>
</div>
<h1 class="pj-project-title">{{ project.name }}</h1>
<!-- 아사나처럼 기본은 "이 프로젝트"만 보여준다. 전체 프로젝트 보기는
@@ -171,6 +172,11 @@
<tbody></tbody>
</table>
</div>
<!-- 대시보드 — 통계 카드/차트는 전부 클라이언트가 그린다(보드/리스트와
같은 방식, 서버 재조회 없이 이미 로드된 tasks 로 즉시 집계). -->
<div class="pj-view" data-view="dashboard" hidden>
<div class="pj-dash" id="pj-dash"></div>
</div>
</section>
<!-- ── 우측: 내 업무 (홈 화면과 동일) ── -->
@@ -461,5 +467,5 @@
</script>
<script src="/static/vendor/vis-timeline/vis-timeline-graph2d.min.js"></script>
<script src="/static/project.js?v=20260917l" defer></script>
<script src="/static/project.js?v=20260917m" defer></script>
{% endblock %}