기능 추가 및 버그 수정 — 처리시간 지표, 대시보드 차트, UI 개선

## 처리시간 지표 - 업무시간 기준(09-18 평일) / 공휴일 제외 24h / 달력 기준 3가지 모드 선택 - 공휴일 DB 관리 (holidays 테이블, 수동 등록·삭제·일괄 추가) - 2026년 공휴일 등록 지원 - 설정 페이지에서 라디오 버튼으로 모드 선택 ## 대시보드 차트 - 월별 평균 처리시간 막대 차트 추가 - 월별 신고 접수 건수 누적 막대 차트 추가 - 월별 → 일별 드릴다운 (막대 클릭 시 해당 월의 일별 차트로 전환) - 일별 막대 클릭 시 처리 완료/신고 접수 상세 내역 모달 - 충전기별 누적 고장 건수 Top 10 수평 막대 차트 추가 ## 신고 목록 - # 컬럼을 DB PK 대신 현재 목록 순서(1, 2, 3…)로 표시 - 엑셀 export 접수번호도 순차번호로 변경 ## 모바일 네비게이션 버그 수정 - 모바일에서 가로 오버플로우 시 nav가 body 넓이로 늘어나 햄버거 버튼이 화면 밖으로 밀리는 문제 수정 - nav를 position:fixed + body padding-top:54px 로 변경 (전체 페이지 적용) - 충전기 관리·신고 목록 페이지 지도 컨테이너에 isolation:isolate 적용 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-05-31 06:52:56 +09:00
parent 05b478372a
commit 2e8751ea6c
35 changed files with 5541 additions and 353 deletions
--- a/frontend/static/pages/admin/accounts.html
+++ b/frontend/static/pages/admin/accounts.html
@@ -1,4 +1,10 @@
-<!DOCTYPE html><html lang="ko"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>계정 관리</title><link rel="stylesheet" href="/css/style.css"></head>
+<!DOCTYPE html><html lang="ko"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>계정 관리</title><link rel="stylesheet" href="/css/style.css">
+<style>
+  .cb-cell { width:36px; text-align:center; padding:8px 4px; }
+  input[type=checkbox] { width:16px; height:16px; cursor:pointer; }
+  tr.selected td { background:var(--gray2) !important; }
+  #btnDelete { display:none; }
+</style></head>
 <body>
 <nav class="nav"><span class="nav-brand">⚡ EV AS 관리 — 관리자</span><div id="navUser"></div></nav>
 <div class="layout">
@@ -11,15 +17,40 @@
    <a href="/pages/admin/improvements.html">🔧 개선항목</a>
    <a href="/pages/admin/chargers.html">⚡ 충전기 관리</a>
    <a href="/pages/admin/charger-types.html">🏷 충전기 종류</a>
+    <a href="/pages/admin/issue-types.html">📝 유형관리</a>
    <a href="/pages/admin/qr.html">📷 QR 생성</a>
    <a href="/pages/admin/accounts.html" class="active">👥 계정 관리</a>
    <a href="/pages/admin/settings.html">⚙️ 설정</a>
  </div>
  <div class="main">
-    <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;">
+    <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;flex-wrap:wrap;gap:10px;">
      <h2 style="font-size:18px;font-weight:700;color:var(--navy)">계정 관리</h2>
-      <button class="btn btn-primary" onclick="openModal()">+ 계정 생성</button>
+      <div style="display:flex;gap:8px;align-items:center;flex-wrap:wrap;">
+        <button id="btnDelete" class="btn btn-sm" style="background:#e53e3e;color:#fff;border:none;" onclick="bulkDelete()">🗑 선택 비활성화 (<span id="selCount">0</span>개)</button>
+        <button class="btn btn-primary" onclick="openModal()">+ 계정 생성</button>
+      </div>
    </div>
+
+    <!-- 승인 대기 섹션 -->
+    <div id="pendingSection" style="display:none;margin-bottom:20px;">
+      <div class="card" style="border:2px solid #F59E0B;background:#FFFBEB;">
+        <div style="display:flex;align-items:center;gap:10px;margin-bottom:14px;">
+          <span style="font-size:18px">⏳</span>
+          <div>
+            <div style="font-size:15px;font-weight:700;color:#92400E">가입 승인 대기</div>
+            <div style="font-size:12px;color:#B45309">승인 후 정비사 계정으로 이용 가능합니다.</div>
+          </div>
+          <span id="pendingBadge" style="margin-left:auto;background:#F59E0B;color:white;font-size:12px;font-weight:700;padding:3px 10px;border-radius:10px;"></span>
+        </div>
+        <div class="tbl-wrap">
+          <table>
+            <thead><tr><th>이름</th><th>아이디</th><th>회사명</th><th>전화번호</th><th>신청일시</th><th style="width:150px">처리</th></tr></thead>
+            <tbody id="pendingTbody"></tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+
    <div class="card">
      <div style="display:flex;gap:10px;margin-bottom:14px;">
        <select id="fRole" onchange="load()" style="width:auto">
@@ -28,7 +59,10 @@
        </select>
      </div>
      <div class="tbl-wrap"><table>
-        <thead><tr><th>ID</th><th>아이디</th><th>역할</th><th>이름</th><th>회사/제조사</th><th>전화번호</th><th>상태</th><th>수정</th></tr></thead>
+        <thead><tr>
+          <th class="cb-cell"><input type="checkbox" id="chkAll" onchange="toggleAll(this)"></th>
+          <th>ID</th><th>아이디</th><th>역할</th><th>이름</th><th>회사/제조사</th><th>전화번호</th><th>상태</th><th>수정</th>
+        </tr></thead>
        <tbody id="tbody"></tbody>
      </table></div>
    </div>
@@ -70,16 +104,86 @@
 <script src="/js/api.js"></script><script src="/js/auth.js"></script>
 <script>
 Auth.require(['admin']); Auth.renderNav(document.getElementById('navUser'));
+
+function updateDeleteBtn() {
+  const checked = document.querySelectorAll('.row-chk:checked');
+  document.getElementById('selCount').textContent = checked.length;
+  document.getElementById('btnDelete').style.display = checked.length > 0 ? 'inline-flex' : 'none';
+}
+function toggleAll(chkAll) {
+  document.querySelectorAll('.row-chk').forEach(c => {
+    c.checked = chkAll.checked;
+    c.closest('tr').classList.toggle('selected', chkAll.checked);
+  });
+  updateDeleteBtn();
+}
+async function bulkDelete() {
+  const checked = [...document.querySelectorAll('.row-chk:checked')];
+  if (!checked.length) return;
+  if (!confirm(`선택한 계정 ${checked.length}개를 비활성화합니다. 계속하시겠습니까?`)) return;
+  const ids = checked.map(c => parseInt(c.dataset.id));
+  try { await API.delete('/accounts/bulk', ids); load(); }
+  catch(e) { alert('처리 중 오류가 발생했습니다: ' + e.message); }
+}
+
 const ROLE_LABEL = {admin:'관리자',mechanic:'정비사',manufacturer:'제조사'};
+
+async function loadPending() {
+  const all = await API.get('/accounts');
+  const pending = all.filter(u => u.is_pending);
+  const sec = document.getElementById('pendingSection');
+  sec.style.display = pending.length ? 'block' : 'none';
+  if (!pending.length) return;
+  document.getElementById('pendingBadge').textContent = pending.length + '명 대기 중';
+  document.getElementById('pendingTbody').innerHTML = pending.map(u => `
+    <tr>
+      <td><strong>${u.name}</strong></td>
+      <td style="color:var(--gray4)">${u.username}</td>
+      <td>${u.company ? `<span style="background:#EFF6FF;color:#1E40AF;font-size:11px;font-weight:600;padding:2px 8px;border-radius:8px">${u.company}</span>` : '<span style="color:var(--gray4)">-</span>'}</td>
+      <td>${u.phone||'-'}</td>
+      <td style="font-size:12px">${Auth.fmtDt(u.created_at)}</td>
+      <td>
+        <div style="display:flex;gap:6px">
+          <button class="btn btn-success btn-sm" onclick="approveUser(${u.id},'${u.name}')">✅ 승인</button>
+          <button class="btn btn-sm" style="background:#fee2e2;color:#991b1b;border:none" onclick="rejectUser(${u.id},'${u.name}')">✕ 거절</button>
+        </div>
+      </td>
+    </tr>`).join('');
+}
+
+async function approveUser(id, name) {
+  if (!confirm(`"${name}" 계정을 승인하시겠습니까?\n승인 후 바로 로그인 가능합니다.`)) return;
+  try {
+    await API.patch('/accounts/'+id+'/approve');
+    loadPending(); load();
+  } catch(e) { alert('오류: '+e.message); }
+}
+
+async function rejectUser(id, name) {
+  if (!confirm(`"${name}" 가입 신청을 거절하고 계정을 삭제하시겠습니까?`)) return;
+  try {
+    await API.delete('/accounts/'+id);
+    loadPending(); load();
+  } catch(e) { alert('오류: '+e.message); }
+}
+
 async function load() {
  const role = document.getElementById('fRole').value;
  const users = await API.get('/accounts'+(role?'?role='+role:''));
-  document.getElementById('tbody').innerHTML = users.map(u=>`
-    <tr><td>${u.id}</td><td>${u.username}</td><td>${ROLE_LABEL[u.role]||u.role}</td>
-    <td>${u.name}</td><td>${u.company||'-'}</td><td>${u.phone||'-'}</td>
-    <td><span class="badge ${u.is_active?'s-done':'s-waiting'}">${u.is_active?'활성':'비활성'}</span></td>
-    <td><button class="btn btn-outline btn-sm" onclick="editUser(${u.id})">수정</button>
-    <button class="btn btn-danger btn-sm" onclick="delUser(${u.id})">삭제</button></td></tr>`).join('');
+  document.getElementById('chkAll').checked = false;
+  updateDeleteBtn();
+  document.getElementById('tbody').innerHTML = users.filter(u => !u.is_pending).map(u=>`
+    <tr>
+      <td class="cb-cell" onclick="event.stopPropagation()">
+        <input type="checkbox" class="row-chk" data-id="${u.id}"
+          onchange="this.closest('tr').classList.toggle('selected',this.checked);updateDeleteBtn()">
+      </td>
+      <td>${u.id}</td><td>${u.username}</td><td>${ROLE_LABEL[u.role]||u.role}</td>
+      <td>${u.name}</td><td>${u.company||'-'}</td><td>${u.phone||'-'}</td>
+      <td><span class="badge ${u.is_active?'s-done':'s-waiting'}">${u.is_active?'활성':'비활성'}</span></td>
+      <td><button class="btn btn-outline btn-sm" onclick="editUser(${u.id})">수정</button>
+      <button class="btn btn-danger btn-sm" onclick="delUser(${u.id})">삭제</button></td>
+    </tr>`).join('');
 }
 function openModal() { document.getElementById('modal').classList.remove('hidden'); document.getElementById('eId').value=''; document.getElementById('eUsername').disabled=false; document.getElementById('pwReq').style.display='inline'; }
 function closeModal() { document.getElementById('modal').classList.add('hidden'); document.getElementById('modalErr').style.display='none'; ['eUsername','ePassword','eName','eCompany','ePhone','eEmail'].forEach(id=>document.getElementById(id).value=''); }
@@ -118,5 +222,6 @@ async function save() {
  } catch(e) { const el=document.getElementById('modalErr'); el.textContent=e.message; el.style.display='block'; }
 }
 async function delUser(id) { if(!confirm('비활성 처리하시겠습니까?')) return; await API.delete('/accounts/'+id); load(); }
+loadPending();
 load();
 </script></body></html>