king
550867ba0c
[admin]
- POST /api/users 사용자 직접 등록 (이메일만으로). UserStore.create_user 추가
- admin.html: 등록 폼 + 삭제 버튼 + 한글 라벨 + 신규 권한 표시
- 신규 권한 키: expense_approver, vacation_approver (APPROVER_KEYS)
- is_approver(user_rec, kind) 헬퍼
[expense 워크플로]
- 상태 전이: 작성중 → 제출 → 승인/반려 → 정산완료
- API: /api/items/{id}/{submit,revert,approve,reject,settle}
- 권한: submit/revert=owner, approve/reject/settle=expense_approver 또는 admin
- expense_items 컬럼: approver_email, decided_at, reject_reason
- 작성중/반려 상태에서만 수정/삭제/첨부 가능
[expense 첨부]
- 영수증/기타 (kind: receipt|other). 최대 20MB, 확장자 화이트리스트
- 저장: DATA_DIR/uploads/expense/{item_id}/{att_id}_{filename}
- expense_attachments 테이블 (CASCADE on item delete)
- API: 업로드/목록/다운로드/삭제
[expense 집계]
- /expense/reports: 연도별 월×카테고리 피벗 표
[expense 엑셀]
- GET /expense/api/export.xlsx?from&to&scope=mine|all
- scope=all 은 승인자/관리자만
[DDL]
- expense_db_init.sql: 신규 컬럼/테이블 포함 (멱등)
- expense_db_002_workflow_attachments.sql: 운영 DB 마이그레이션용
[deps]
- openpyxl>=3.1, python-multipart>=0.0.20
[docs]
- DATABASES.md: 워크플로 다이어그램, attachments 테이블, 마이그레이션
- PROJECT_OVERVIEW.md: 권한 키 표
- DEPLOYMENT.md: DATA_DIR/uploads 안내
385 lines
15 KiB
HTML
385 lines
15 KiB
HTML
{% extends "erp_base.html" %}
|
|
|
|
{% block content %}
|
|
<section class="erp-expense">
|
|
|
|
<!-- ── 페이지 액션 ── -->
|
|
<div class="erp-page-actions">
|
|
<a class="erp-btn erp-btn-outline" href="/expense/reports">월별 집계</a>
|
|
{% if is_approver %}
|
|
<a class="erp-btn erp-btn-outline" href="/expense/pending">
|
|
승인 대기 {% if pending_count %}<strong style="margin-left:6px;">{{ pending_count }}</strong>{% endif %}
|
|
</a>
|
|
{% endif %}
|
|
<a class="erp-btn erp-btn-outline" href="/expense/api/export.xlsx?scope=mine">엑셀(내 항목)</a>
|
|
{% if is_approver %}
|
|
<a class="erp-btn erp-btn-outline" href="/expense/api/export.xlsx?scope=all">엑셀(전체)</a>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<!-- ── 요약 카드 ── -->
|
|
<div class="erp-summary-grid">
|
|
<div class="erp-summary-card">
|
|
<span class="erp-summary-label">총 건수</span>
|
|
<strong class="erp-summary-value">{{ summary.count }} 건</strong>
|
|
</div>
|
|
<div class="erp-summary-card">
|
|
<span class="erp-summary-label">총 금액</span>
|
|
<strong class="erp-summary-value" id="ex-total-amount">
|
|
{{ "{:,}".format(summary.total) }} 원
|
|
</strong>
|
|
</div>
|
|
{% for status in statuses %}
|
|
<div class="erp-summary-card erp-summary-card--mini">
|
|
<span class="erp-summary-label">{{ status }}</span>
|
|
<strong class="erp-summary-value erp-summary-value--sm">
|
|
{{ summary.by_status.get(status, 0) }}
|
|
</strong>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
|
|
<!-- ── 입력 폼 ── -->
|
|
<div class="erp-card-block">
|
|
<div class="erp-card-block-head">
|
|
<h2>경비 등록</h2>
|
|
<span class="erp-muted">필수 항목 입력 후 등록. 등록 후 항목별로 첨부/제출.</span>
|
|
</div>
|
|
<form id="ex-form" class="erp-form-grid">
|
|
<input type="hidden" name="id" />
|
|
<label class="erp-field"><span>사용일</span><input type="date" name="spent_at" required /></label>
|
|
<label class="erp-field"><span>분류</span>
|
|
<select name="category" required>
|
|
{% for c in categories %}<option value="{{ c }}">{{ c }}</option>{% endfor %}
|
|
</select>
|
|
</label>
|
|
<label class="erp-field"><span>결제수단</span>
|
|
<select name="method" required>
|
|
{% for m in methods %}<option value="{{ m }}">{{ m }}</option>{% endfor %}
|
|
</select>
|
|
</label>
|
|
<label class="erp-field"><span>금액</span>
|
|
<input type="number" name="amount" min="0" step="1" required placeholder="원" />
|
|
</label>
|
|
<label class="erp-field erp-field-wide"><span>가맹점/사용처</span>
|
|
<input type="text" name="merchant" placeholder="예) 스타벅스 강남점" />
|
|
</label>
|
|
<label class="erp-field erp-field-wide"><span>메모</span>
|
|
<input type="text" name="memo" placeholder="비고" />
|
|
</label>
|
|
<div class="erp-form-actions">
|
|
<button type="reset" class="erp-btn erp-btn-outline" id="ex-reset">초기화</button>
|
|
<button type="submit" class="erp-btn erp-btn-primary" id="ex-submit">등록</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- ── 항목 목록 ── -->
|
|
<div class="erp-card-block">
|
|
<div class="erp-card-block-head">
|
|
<h2>경비 내역</h2>
|
|
<span class="erp-muted" id="ex-count">{{ items | length }}건</span>
|
|
</div>
|
|
<div class="erp-table-wrap">
|
|
<table class="erp-table" id="ex-table">
|
|
<thead>
|
|
<tr>
|
|
<th style="width: 28px;"></th>
|
|
<th style="width: 110px;">사용일</th>
|
|
<th style="width: 90px;">분류</th>
|
|
<th style="width: 100px;">수단</th>
|
|
<th>가맹점</th>
|
|
<th style="width: 120px; text-align: right;">금액</th>
|
|
<th style="width: 100px;">상태</th>
|
|
<th style="width: 220px; text-align: right;">동작</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="ex-tbody">
|
|
{% for it in items %}
|
|
<tr data-id="{{ it.id }}" data-status="{{ it.status }}">
|
|
<td>
|
|
{% if supports_workflow %}
|
|
<button class="erp-btn erp-btn-ghost erp-btn-sm js-toggle" title="첨부/상세">▸</button>
|
|
{% endif %}
|
|
</td>
|
|
<td>{{ it.spent_at }}</td>
|
|
<td>{{ it.category }}</td>
|
|
<td>{{ it.method }}</td>
|
|
<td>
|
|
<div>{{ it.merchant }}</div>
|
|
{% if it.memo %}<div class="erp-row-sub">{{ it.memo }}</div>{% endif %}
|
|
{% if it.reject_reason %}
|
|
<div class="erp-row-sub" style="color: var(--color-callout-red);">반려: {{ it.reject_reason }}</div>
|
|
{% endif %}
|
|
</td>
|
|
<td style="text-align: right; font-variant-numeric: tabular-nums;">
|
|
{{ "{:,}".format(it.amount) }} 원
|
|
</td>
|
|
<td>
|
|
{% if it.status == '작성중' or it.status == '반려' %}
|
|
<span class="erp-badge erp-badge-outline">{{ it.status }}</span>
|
|
{% elif it.status == '제출' %}
|
|
<span class="erp-badge erp-badge-neutral">{{ it.status }}</span>
|
|
{% elif it.status == '승인' %}
|
|
<span class="erp-badge erp-badge-inverse">{{ it.status }}</span>
|
|
{% else %}
|
|
<span class="erp-badge erp-badge-neutral">{{ it.status }}</span>
|
|
{% endif %}
|
|
</td>
|
|
<td style="text-align: right;" class="js-actions">
|
|
{% if it.status in ('작성중', '반려') %}
|
|
<button class="erp-btn erp-btn-ghost erp-btn-sm js-edit">수정</button>
|
|
<button class="erp-btn erp-btn-ghost erp-btn-sm js-delete">삭제</button>
|
|
{% if supports_workflow %}
|
|
<button class="erp-btn erp-btn-primary erp-btn-sm js-submit">제출</button>
|
|
{% endif %}
|
|
{% elif it.status == '제출' and supports_workflow %}
|
|
<button class="erp-btn erp-btn-ghost erp-btn-sm js-revert">취소(작성중)</button>
|
|
{% endif %}
|
|
</td>
|
|
</tr>
|
|
{% if supports_workflow %}
|
|
<tr class="ex-detail" data-detail-for="{{ it.id }}" hidden>
|
|
<td colspan="8">
|
|
<div class="ex-detail-box">
|
|
<div class="ex-attach-head">
|
|
<strong>첨부파일</strong>
|
|
{% if it.status in ('작성중', '반려') %}
|
|
<div class="ex-upload">
|
|
<label class="erp-btn erp-btn-outline erp-btn-sm">
|
|
영수증 추가
|
|
<input type="file" class="js-upload" data-kind="receipt" hidden />
|
|
</label>
|
|
<label class="erp-btn erp-btn-outline erp-btn-sm">
|
|
기타파일 추가
|
|
<input type="file" class="js-upload" data-kind="other" hidden />
|
|
</label>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
<ul class="ex-attach-list" data-list="{{ it.id }}">
|
|
<li class="erp-muted">불러오는 중…</li>
|
|
</ul>
|
|
{% if it.approver_email %}
|
|
<div class="erp-muted" style="margin-top: 6px;">
|
|
결재: {{ it.approver_email }} · {{ (it.decided_at or '')[:16].replace('T',' ') }}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
{% endif %}
|
|
{% else %}
|
|
<tr id="ex-empty"><td colspan="8" class="erp-empty">등록된 경비가 없습니다.</td></tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
</section>
|
|
|
|
<style>
|
|
.erp-page-actions {
|
|
display: flex; gap: var(--sp-8); margin-bottom: var(--sp-16); flex-wrap: wrap;
|
|
}
|
|
.ex-detail-box {
|
|
background: var(--color-ghost-gray);
|
|
padding: var(--sp-12) var(--sp-16);
|
|
border-radius: 8px;
|
|
}
|
|
.ex-attach-head {
|
|
display: flex; align-items: center; justify-content: space-between; gap: var(--sp-8);
|
|
margin-bottom: 8px;
|
|
}
|
|
.ex-upload { display: flex; gap: 6px; }
|
|
.ex-attach-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
|
|
.ex-attach-list li {
|
|
display: flex; align-items: center; gap: 8px; padding: 6px 8px;
|
|
background: var(--color-canvas-white); border: 1px solid var(--color-subtle-ash); border-radius: 6px;
|
|
font-size: 13px;
|
|
}
|
|
.ex-attach-list li .ex-kind {
|
|
padding: 1px 6px; border-radius: 8px; font-size: 11px;
|
|
background: var(--color-ghost-gray); color: var(--color-midtone-gray);
|
|
}
|
|
.ex-attach-list li .ex-name { flex: 1; }
|
|
.ex-attach-list li .ex-size { color: var(--color-midtone-gray); font-size: 12px; }
|
|
</style>
|
|
{% endblock %}
|
|
|
|
{% block scripts %}
|
|
<script>
|
|
(function () {
|
|
const supportsWorkflow = {{ 'true' if supports_workflow else 'false' }};
|
|
const form = document.getElementById("ex-form");
|
|
const submitBtn = document.getElementById("ex-submit");
|
|
const resetBtn = document.getElementById("ex-reset");
|
|
const tbody = document.getElementById("ex-tbody");
|
|
const countEl = document.getElementById("ex-count");
|
|
const totalEl = document.getElementById("ex-total-amount");
|
|
|
|
const fmt = (n) => `${Number(n || 0).toLocaleString("ko-KR")} 원`;
|
|
const fmtSize = (b) => {
|
|
b = Number(b || 0);
|
|
if (b < 1024) return `${b} B`;
|
|
if (b < 1024*1024) return `${(b/1024).toFixed(1)} KB`;
|
|
return `${(b/1024/1024).toFixed(2)} MB`;
|
|
};
|
|
|
|
function setEditing(id, data) {
|
|
form.id.value = id || "";
|
|
if (data) {
|
|
form.spent_at.value = data.spent_at || "";
|
|
form.category.value = data.category || "";
|
|
form.method.value = data.method || "";
|
|
form.amount.value = data.amount || 0;
|
|
form.merchant.value = data.merchant || "";
|
|
form.memo.value = data.memo || "";
|
|
submitBtn.textContent = "수정 저장";
|
|
} else {
|
|
submitBtn.textContent = "등록";
|
|
}
|
|
}
|
|
resetBtn.addEventListener("click", () => setEditing("", null));
|
|
|
|
form.addEventListener("submit", async (e) => {
|
|
e.preventDefault();
|
|
const id = form.id.value.trim();
|
|
const payload = {
|
|
spent_at: form.spent_at.value,
|
|
category: form.category.value,
|
|
method: form.method.value,
|
|
amount: parseInt(form.amount.value || "0", 10),
|
|
merchant: form.merchant.value,
|
|
memo: form.memo.value,
|
|
};
|
|
const url = id ? `/expense/api/items/${id}` : "/expense/api/items";
|
|
const method = id ? "PUT" : "POST";
|
|
try {
|
|
const res = await fetch(url, {
|
|
method,
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify(payload),
|
|
});
|
|
if (!res.ok) throw new Error((await res.json()).detail || res.status);
|
|
location.reload();
|
|
} catch (err) {
|
|
alert(`저장 실패: ${err.message || err}`);
|
|
}
|
|
});
|
|
|
|
async function postAction(id, action, body) {
|
|
const res = await fetch(`/expense/api/items/${id}/${action}`, {
|
|
method: "POST",
|
|
headers: body ? { "Content-Type": "application/json" } : undefined,
|
|
body: body ? JSON.stringify(body) : undefined,
|
|
});
|
|
if (!res.ok) throw new Error((await res.json()).detail || res.status);
|
|
return res.json();
|
|
}
|
|
|
|
async function loadAttachments(itemId) {
|
|
const ul = tbody.querySelector(`.ex-attach-list[data-list="${itemId}"]`);
|
|
if (!ul) return;
|
|
ul.innerHTML = `<li class="erp-muted">불러오는 중…</li>`;
|
|
try {
|
|
const res = await fetch(`/expense/api/items/${itemId}/attachments`);
|
|
if (!res.ok) throw new Error((await res.json()).detail || res.status);
|
|
const { attachments } = await res.json();
|
|
if (!attachments.length) {
|
|
ul.innerHTML = `<li class="erp-muted">첨부 없음</li>`;
|
|
return;
|
|
}
|
|
ul.innerHTML = "";
|
|
attachments.forEach((a) => {
|
|
const li = document.createElement("li");
|
|
li.innerHTML = `
|
|
<span class="ex-kind">${a.kind === 'receipt' ? '영수증' : '기타'}</span>
|
|
<a class="ex-name" href="/expense/api/attachments/${a.id}" target="_blank">${a.filename}</a>
|
|
<span class="ex-size">${fmtSize(a.size_bytes)}</span>
|
|
<button class="erp-btn erp-btn-ghost erp-btn-sm js-del-att" data-att="${a.id}">삭제</button>
|
|
`;
|
|
ul.appendChild(li);
|
|
});
|
|
} catch (err) {
|
|
ul.innerHTML = `<li style="color: var(--color-callout-red);">로드 실패: ${err.message || err}</li>`;
|
|
}
|
|
}
|
|
|
|
tbody.addEventListener("click", async (e) => {
|
|
const btn = e.target.closest("button");
|
|
if (!btn) return;
|
|
const tr = btn.closest("tr[data-id]");
|
|
if (!tr) return;
|
|
const id = tr.dataset.id;
|
|
|
|
if (btn.classList.contains("js-toggle")) {
|
|
const detail = tbody.querySelector(`tr.ex-detail[data-detail-for="${id}"]`);
|
|
if (!detail) return;
|
|
const opening = detail.hasAttribute("hidden");
|
|
if (opening) {
|
|
detail.removeAttribute("hidden");
|
|
btn.textContent = "▾";
|
|
loadAttachments(id);
|
|
} else {
|
|
detail.setAttribute("hidden", "");
|
|
btn.textContent = "▸";
|
|
}
|
|
} else if (btn.classList.contains("js-edit")) {
|
|
const res = await fetch(`/expense/api/items`);
|
|
if (!res.ok) return;
|
|
const { items } = await res.json();
|
|
const found = items.find((x) => x.id === id);
|
|
if (found) setEditing(id, found);
|
|
window.scrollTo({ top: 0, behavior: "smooth" });
|
|
} else if (btn.classList.contains("js-delete")) {
|
|
if (!confirm("이 항목을 삭제할까요? 첨부도 함께 삭제됩니다.")) return;
|
|
const res = await fetch(`/expense/api/items/${id}`, { method: "DELETE" });
|
|
if (res.ok) location.reload(); else alert((await res.json()).detail || "삭제 실패");
|
|
} else if (btn.classList.contains("js-submit")) {
|
|
if (!confirm("결재 제출할까요? 제출 후에는 수정할 수 없습니다.")) return;
|
|
try { await postAction(id, "submit"); location.reload(); }
|
|
catch (err) { alert(`제출 실패: ${err.message || err}`); }
|
|
} else if (btn.classList.contains("js-revert")) {
|
|
if (!confirm("작성중 상태로 되돌릴까요?")) return;
|
|
try { await postAction(id, "revert"); location.reload(); }
|
|
catch (err) { alert(`취소 실패: ${err.message || err}`); }
|
|
} else if (btn.classList.contains("js-del-att")) {
|
|
if (!confirm("첨부를 삭제할까요?")) return;
|
|
const attId = btn.dataset.att;
|
|
const res = await fetch(`/expense/api/attachments/${attId}`, { method: "DELETE" });
|
|
if (res.ok) loadAttachments(id); else alert((await res.json()).detail || "삭제 실패");
|
|
}
|
|
});
|
|
|
|
// 첨부 업로드
|
|
tbody.addEventListener("change", async (e) => {
|
|
const input = e.target.closest("input.js-upload");
|
|
if (!input || !input.files.length) return;
|
|
const tr = input.closest("tr.ex-detail");
|
|
if (!tr) return;
|
|
const itemId = tr.dataset.detailFor;
|
|
const fd = new FormData();
|
|
fd.append("file", input.files[0]);
|
|
fd.append("kind", input.dataset.kind || "other");
|
|
try {
|
|
const res = await fetch(`/expense/api/items/${itemId}/attachments`, {
|
|
method: "POST", body: fd,
|
|
});
|
|
if (!res.ok) throw new Error((await res.json()).detail || res.status);
|
|
input.value = "";
|
|
loadAttachments(itemId);
|
|
} catch (err) {
|
|
alert(`업로드 실패: ${err.message || err}`);
|
|
}
|
|
});
|
|
|
|
if (!form.spent_at.value) {
|
|
const d = new Date();
|
|
form.spent_at.value = `${d.getFullYear()}-${String(d.getMonth()+1).padStart(2,"0")}-${String(d.getDate()).padStart(2,"0")}`;
|
|
}
|
|
})();
|
|
</script>
|
|
{% endblock %}
|