556 lines
17 KiB
JavaScript
556 lines
17 KiB
JavaScript
window.HANWHA_FORMS = [
|
|
{
|
|
"formId": "frmConsolidation",
|
|
"title": "집계 실행",
|
|
"route": "consolidation",
|
|
"authority": "OPERATOR",
|
|
"messages": [
|
|
{
|
|
"code": "RUN_HINT",
|
|
"level": "INFO",
|
|
"text": "업로드가 ACCEPTED 상태인 파일만 집계 대상에 포함됩니다."
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"formId": "frmLogin",
|
|
"title": "로그인",
|
|
"route": "login",
|
|
"authority": "PUBLIC",
|
|
"messages": [
|
|
{
|
|
"code": "LOGIN_HINT",
|
|
"level": "INFO",
|
|
"text": "기본 계정 admin/operator/viewer, 비밀번호 demo1234"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"formId": "frmMasterData",
|
|
"title": "기준정보 관리",
|
|
"route": "master",
|
|
"authority": "VIEWER",
|
|
"messages": [
|
|
{
|
|
"code": "MASTER_LOAD",
|
|
"level": "INFO",
|
|
"text": "기준정보, 계정, 환율, 지분율을 확인합니다."
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"formId": "frmReportsOps",
|
|
"title": "리포트/운영",
|
|
"route": "reports",
|
|
"authority": "VIEWER",
|
|
"messages": [
|
|
{
|
|
"code": "REPORT_HINT",
|
|
"level": "INFO",
|
|
"text": "batch가 생성한 Excel/PDF를 내려받고 최근 로그를 확인합니다."
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"formId": "frmUploadValidation",
|
|
"title": "업로드/검증",
|
|
"route": "uploads",
|
|
"authority": "OPERATOR",
|
|
"messages": [
|
|
{
|
|
"code": "UPLOAD_HINT",
|
|
"level": "INFO",
|
|
"text": "invalid 샘플로 오류 시나리오를 확인한 뒤 valid 샘플을 재업로드합니다."
|
|
}
|
|
]
|
|
}
|
|
];
|
|
|
|
const state = {
|
|
currentRoute: "login",
|
|
session: null,
|
|
master: null,
|
|
uploads: null,
|
|
runs: null,
|
|
reports: null,
|
|
selectedBatchId: null
|
|
};
|
|
|
|
const formMap = new Map(window.HANWHA_FORMS.map((form) => [form.route, form]));
|
|
|
|
async function api(path, options = {}) {
|
|
const response = await fetch(path, {
|
|
credentials: "same-origin",
|
|
headers: {
|
|
...(options.body instanceof FormData ? {} : { "Content-Type": "application/json" }),
|
|
...(options.headers || {})
|
|
},
|
|
...options
|
|
});
|
|
|
|
if (!response.ok) {
|
|
const payload = await response.json().catch(() => ({ message: response.statusText }));
|
|
throw new Error(payload.message || "요청 처리에 실패했습니다.");
|
|
}
|
|
|
|
const contentType = response.headers.get("content-type") || "";
|
|
if (contentType.includes("application/json")) {
|
|
return response.json();
|
|
}
|
|
return response.blob();
|
|
}
|
|
|
|
function formatValue(value) {
|
|
if (value === null || value === undefined || value === "") {
|
|
return "-";
|
|
}
|
|
return value;
|
|
}
|
|
|
|
function table(columns, rows, options = {}) {
|
|
const body = rows.length
|
|
? rows
|
|
.map(
|
|
(row) => `<tr>${columns
|
|
.map((column) => {
|
|
const value = options.render ? options.render(column, row[column.id], row) : row[column.id];
|
|
return `<td>${formatValue(value)}</td>`;
|
|
})
|
|
.join("")}</tr>`
|
|
)
|
|
.join("")
|
|
: `<tr><td colspan="${columns.length}">데이터가 없습니다.</td></tr>`;
|
|
|
|
return `<div class="table-wrap"><table><thead><tr>${columns
|
|
.map((column) => `<th>${column.text}</th>`)
|
|
.join("")}</tr></thead><tbody>${body}</tbody></table></div>`;
|
|
}
|
|
|
|
function pill(value) {
|
|
return `<span class="pill ${value}">${value}</span>`;
|
|
}
|
|
|
|
function renderNav() {
|
|
return window.HANWHA_FORMS.map((form) => {
|
|
const active = state.currentRoute === form.route ? "active" : "";
|
|
const locked = form.authority !== "PUBLIC" && !state.session;
|
|
return `<button class="nav-item ${active}" data-route="${form.route}" ${locked ? "disabled" : ""}><strong>${form.title}</strong><div class="muted">${form.authority}</div></button>`;
|
|
}).join("");
|
|
}
|
|
|
|
function heroContent() {
|
|
const form = formMap.get(state.currentRoute);
|
|
const note = form?.messages?.[0]?.text || "Spec driven preview";
|
|
return `<div class="hero-card"><h2>${form.title}</h2><p>${note}</p></div>`;
|
|
}
|
|
|
|
function renderLogin() {
|
|
return `
|
|
${heroContent()}
|
|
<div class="panel login-box">
|
|
<h3>세션 로그인</h3>
|
|
<div class="notice">기본 계정: admin/operator/viewer / demo1234</div>
|
|
<div class="row"><label>사용자 ID</label><input id="login-username" value="admin" /></div>
|
|
<div class="row"><label>비밀번호</label><input id="login-password" type="password" value="demo1234" /></div>
|
|
<div class="row actions">
|
|
<button data-action="login">로그인</button>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
function renderMaster() {
|
|
const datasets = state.master?.datasets || {};
|
|
const entities = datasets.entities || [];
|
|
const accounts = datasets.accounts || [];
|
|
const fxRates = datasets.fxRates || [];
|
|
const ownerships = datasets.ownerships || [];
|
|
|
|
return `
|
|
${heroContent()}
|
|
<div class="grid-4">
|
|
<div class="status-card"><div class="label">법인 수</div><div class="value">${entities.length}</div></div>
|
|
<div class="status-card"><div class="label">계정 수</div><div class="value">${accounts.length}</div></div>
|
|
<div class="status-card"><div class="label">환율 수</div><div class="value">${fxRates.length}</div></div>
|
|
<div class="status-card"><div class="label">지분율 수</div><div class="value">${ownerships.length}</div></div>
|
|
</div>
|
|
<div class="grid-2" style="margin-top: 18px;">
|
|
<div class="panel">
|
|
<h3>법인정보</h3>
|
|
${table([{ id: "entityCode", text: "법인코드" }, { id: "entityName", text: "법인명" }, { id: "baseCurrency", text: "통화" }], entities)}
|
|
</div>
|
|
<div class="panel">
|
|
<h3>계정코드</h3>
|
|
${table([{ id: "accountCode", text: "계정" }, { id: "accountName", text: "계정명" }, { id: "accountCategory", text: "분류" }, { id: "internalTradeYn", text: "내부거래" }], accounts)}
|
|
</div>
|
|
<div class="panel">
|
|
<h3>환율</h3>
|
|
${table([{ id: "fiscalPeriod", text: "회계기간" }, { id: "currencyCode", text: "통화" }, { id: "rateToKrw", text: "환산율" }], fxRates)}
|
|
</div>
|
|
<div class="panel">
|
|
<h3>지분율</h3>
|
|
${table([{ id: "parentEntityCode", text: "모법인" }, { id: "childEntityCode", text: "자법인" }, { id: "ownershipRatio", text: "지분율" }], ownerships)}
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
function renderUploads() {
|
|
const datasets = state.uploads?.datasets || {};
|
|
const batches = datasets.uploadBatches || [];
|
|
const issues = datasets.validationIssues || [];
|
|
|
|
return `
|
|
${heroContent()}
|
|
<div class="panel">
|
|
<h3>업로드</h3>
|
|
<div class="row"><label>템플릿</label>
|
|
<select id="upload-template">
|
|
<option value="trial-balance">trial-balance</option>
|
|
<option value="forecast">forecast</option>
|
|
</select>
|
|
</div>
|
|
<div class="row"><label>회계기간</label><input id="upload-period" value="2026-03" /></div>
|
|
<div class="row"><label>파일 선택</label><input id="upload-file" type="file" /></div>
|
|
<div class="row actions">
|
|
<button data-action="upload">파일 업로드</button>
|
|
<button class="secondary" data-action="reload-uploads">내역 새로고침</button>
|
|
<a class="ghost" href="/sample-data/trial-balance-invalid.xlsx" download>오류 샘플</a>
|
|
<a class="ghost" href="/sample-data/trial-balance-valid.xlsx" download>정상 TB</a>
|
|
<a class="ghost" href="/sample-data/forecast-valid.xlsx" download>정상 Forecast</a>
|
|
</div>
|
|
</div>
|
|
<div class="panel">
|
|
<h3>업로드 이력</h3>
|
|
${table(
|
|
[
|
|
{ id: "id", text: "배치ID" },
|
|
{ id: "templateCode", text: "템플릿" },
|
|
{ id: "fiscalPeriod", text: "회계기간" },
|
|
{ id: "statusCode", text: "상태" },
|
|
{ id: "originalFilename", text: "파일명" },
|
|
{ id: "rowCount", text: "건수" },
|
|
{ id: "errorCount", text: "오류" },
|
|
{ id: "uploadedAt", text: "업로드시각" }
|
|
],
|
|
batches,
|
|
{
|
|
render(column, value) {
|
|
if (column.id === "statusCode") {
|
|
return pill(value);
|
|
}
|
|
return value;
|
|
}
|
|
}
|
|
)}
|
|
</div>
|
|
<div class="panel">
|
|
<h3>오류내역</h3>
|
|
${table(
|
|
[
|
|
{ id: "batchId", text: "배치ID" },
|
|
{ id: "rowNumber", text: "행" },
|
|
{ id: "issueCode", text: "오류코드" },
|
|
{ id: "issueMessage", text: "오류메시지" },
|
|
{ id: "severityCode", text: "등급" }
|
|
],
|
|
issues,
|
|
{
|
|
render(column, value) {
|
|
if (column.id === "severityCode") {
|
|
return pill(value);
|
|
}
|
|
return value;
|
|
}
|
|
}
|
|
)}
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
function renderConsolidation() {
|
|
const runs = state.runs?.datasets?.runs || [];
|
|
return `
|
|
${heroContent()}
|
|
<div class="panel">
|
|
<h3>집계 실행</h3>
|
|
<div class="row"><label>회계기간</label><input id="run-period" value="2026-03" /></div>
|
|
<div class="row actions">
|
|
<button data-action="request-run">집계 실행</button>
|
|
<button class="secondary" data-action="reload-runs">상태 새로고침</button>
|
|
</div>
|
|
</div>
|
|
<div class="panel">
|
|
<h3>집계 이력</h3>
|
|
${table(
|
|
[
|
|
{ id: "id", text: "실행ID" },
|
|
{ id: "fiscalPeriod", text: "회계기간" },
|
|
{ id: "statusCode", text: "상태" },
|
|
{ id: "requestedBy", text: "요청자" },
|
|
{ id: "requestedAt", text: "요청시각" },
|
|
{ id: "finishedAt", text: "완료시각" },
|
|
{ id: "summaryMessage", text: "요약" }
|
|
],
|
|
runs,
|
|
{
|
|
render(column, value) {
|
|
if (column.id === "statusCode") {
|
|
return pill(value);
|
|
}
|
|
return value;
|
|
}
|
|
}
|
|
)}
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
function renderReports() {
|
|
const datasets = state.reports?.datasets || {};
|
|
const artifacts = datasets.artifacts || [];
|
|
const logs = datasets.jobLogs || [];
|
|
|
|
return `
|
|
${heroContent()}
|
|
<div class="grid-3">
|
|
<div class="status-card"><div class="label">산출물 수</div><div class="value">${artifacts.length}</div></div>
|
|
<div class="status-card"><div class="label">최근 로그 수</div><div class="value">${logs.length}</div></div>
|
|
<div class="status-card"><div class="label">세션 사용자</div><div class="value">${state.session?.fullName || "-"}</div></div>
|
|
</div>
|
|
<div class="panel" style="margin-top: 18px;">
|
|
<h3>리포트 산출물</h3>
|
|
${table(
|
|
[
|
|
{ id: "id", text: "산출물ID" },
|
|
{ id: "runId", text: "실행ID" },
|
|
{ id: "artifactType", text: "형식" },
|
|
{ id: "downloadName", text: "파일명" },
|
|
{ id: "createdAt", text: "생성시각" }
|
|
],
|
|
artifacts,
|
|
{
|
|
render(column, value, row) {
|
|
if (column.id === "downloadName") {
|
|
return `<a href="/api/reports/${row.id}/download">${value}</a>`;
|
|
}
|
|
return value;
|
|
}
|
|
}
|
|
)}
|
|
</div>
|
|
<div class="panel">
|
|
<h3>최근 배치 로그</h3>
|
|
${table(
|
|
[
|
|
{ id: "id", text: "로그ID" },
|
|
{ id: "jobType", text: "작업유형" },
|
|
{ id: "referenceId", text: "참조ID" },
|
|
{ id: "logLevel", text: "레벨" },
|
|
{ id: "logMessage", text: "메시지" },
|
|
{ id: "createdAt", text: "생성시각" }
|
|
],
|
|
logs,
|
|
{
|
|
render(column, value) {
|
|
if (column.id === "logLevel") {
|
|
return pill(value);
|
|
}
|
|
return value;
|
|
}
|
|
}
|
|
)}
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
function shellContent(content) {
|
|
return `
|
|
<div class="shell">
|
|
<aside class="sidebar">
|
|
<div class="brand">
|
|
<h1>Hanwha Nexacro Demo</h1>
|
|
<p>Spec driven preview generated from Nexacro DSL</p>
|
|
</div>
|
|
<div class="nav-list">${renderNav()}</div>
|
|
<div class="panel" style="margin-top: 18px;">
|
|
<h3 style="margin-top:0;">세션</h3>
|
|
<div class="muted">${state.session ? `${state.session.fullName} / ${state.session.roleCode}` : "로그인 필요"}</div>
|
|
<div class="row actions" style="margin-top: 12px;">
|
|
<button class="secondary" data-action="logout" ${state.session ? "" : "disabled"}>로그아웃</button>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
<main class="main">
|
|
<div class="topbar">
|
|
<div></div>
|
|
<div class="footer-links">
|
|
<a href="/sample-data/trial-balance-invalid.xlsx" download>오류 샘플</a>
|
|
<a href="/sample-data/trial-balance-valid.xlsx" download>정상 TB</a>
|
|
<a href="/sample-data/forecast-valid.xlsx" download>정상 Forecast</a>
|
|
</div>
|
|
</div>
|
|
${content}
|
|
</main>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
function render() {
|
|
let content = "";
|
|
switch (state.currentRoute) {
|
|
case "login":
|
|
content = renderLogin();
|
|
break;
|
|
case "master":
|
|
content = renderMaster();
|
|
break;
|
|
case "uploads":
|
|
content = renderUploads();
|
|
break;
|
|
case "consolidation":
|
|
content = renderConsolidation();
|
|
break;
|
|
case "reports":
|
|
content = renderReports();
|
|
break;
|
|
default:
|
|
content = "<div class='panel'>정의되지 않은 화면입니다.</div>";
|
|
}
|
|
|
|
document.getElementById("app").innerHTML = shellContent(content);
|
|
bindEvents();
|
|
}
|
|
|
|
async function loadSession() {
|
|
try {
|
|
state.session = await api("/api/auth/me");
|
|
} catch (error) {
|
|
state.session = null;
|
|
}
|
|
}
|
|
|
|
async function loadMaster() {
|
|
if (!state.session) return;
|
|
state.master = await api("/api/tx/master/reference");
|
|
}
|
|
|
|
async function loadUploads() {
|
|
if (!state.session) return;
|
|
state.uploads = await api("/api/tx/uploads/overview");
|
|
}
|
|
|
|
async function loadRuns() {
|
|
if (!state.session) return;
|
|
state.runs = await api("/api/tx/consolidations/overview");
|
|
}
|
|
|
|
async function loadReports() {
|
|
if (!state.session) return;
|
|
state.reports = await api("/api/tx/reports/overview");
|
|
}
|
|
|
|
async function refreshAll() {
|
|
await loadSession();
|
|
if (state.session) {
|
|
await Promise.all([loadMaster(), loadUploads(), loadRuns(), loadReports()]);
|
|
} else {
|
|
state.master = null;
|
|
state.uploads = null;
|
|
state.runs = null;
|
|
state.reports = null;
|
|
}
|
|
render();
|
|
}
|
|
|
|
function bindEvents() {
|
|
document.querySelectorAll("[data-route]").forEach((element) => {
|
|
element.addEventListener("click", async () => {
|
|
state.currentRoute = element.dataset.route;
|
|
if (state.currentRoute === "master") await loadMaster();
|
|
if (state.currentRoute === "uploads") await loadUploads();
|
|
if (state.currentRoute === "consolidation") await loadRuns();
|
|
if (state.currentRoute === "reports") await loadReports();
|
|
render();
|
|
});
|
|
});
|
|
|
|
const loginButton = document.querySelector("[data-action='login']");
|
|
if (loginButton) {
|
|
loginButton.addEventListener("click", async () => {
|
|
const username = document.getElementById("login-username").value;
|
|
const password = document.getElementById("login-password").value;
|
|
await api("/api/auth/login", {
|
|
method: "POST",
|
|
body: JSON.stringify({ username, password })
|
|
});
|
|
state.currentRoute = "master";
|
|
await refreshAll();
|
|
});
|
|
}
|
|
|
|
const logoutButton = document.querySelector("[data-action='logout']");
|
|
if (logoutButton) {
|
|
logoutButton.addEventListener("click", async () => {
|
|
await api("/api/auth/logout", { method: "POST" });
|
|
state.currentRoute = "login";
|
|
await refreshAll();
|
|
});
|
|
}
|
|
|
|
const uploadButton = document.querySelector("[data-action='upload']");
|
|
if (uploadButton) {
|
|
uploadButton.addEventListener("click", async () => {
|
|
const templateCode = document.getElementById("upload-template").value;
|
|
const fiscalPeriod = document.getElementById("upload-period").value;
|
|
const file = document.getElementById("upload-file").files[0];
|
|
if (!file) {
|
|
alert("업로드할 파일을 선택하세요.");
|
|
return;
|
|
}
|
|
const formData = new FormData();
|
|
formData.append("templateCode", templateCode);
|
|
formData.append("fiscalPeriod", fiscalPeriod);
|
|
formData.append("file", file);
|
|
await api("/api/uploads", { method: "POST", body: formData });
|
|
await loadUploads();
|
|
render();
|
|
});
|
|
}
|
|
|
|
const reloadUploadsButton = document.querySelector("[data-action='reload-uploads']");
|
|
if (reloadUploadsButton) {
|
|
reloadUploadsButton.addEventListener("click", async () => {
|
|
await loadUploads();
|
|
render();
|
|
});
|
|
}
|
|
|
|
const runButton = document.querySelector("[data-action='request-run']");
|
|
if (runButton) {
|
|
runButton.addEventListener("click", async () => {
|
|
const fiscalPeriod = document.getElementById("run-period").value;
|
|
await api("/api/consolidations/runs", {
|
|
method: "POST",
|
|
body: JSON.stringify({ fiscalPeriod, reportCurrency: "KRW" })
|
|
});
|
|
await loadRuns();
|
|
render();
|
|
});
|
|
}
|
|
|
|
const reloadRunsButton = document.querySelector("[data-action='reload-runs']");
|
|
if (reloadRunsButton) {
|
|
reloadRunsButton.addEventListener("click", async () => {
|
|
await loadRuns();
|
|
await loadReports();
|
|
render();
|
|
});
|
|
}
|
|
}
|
|
|
|
refreshAll().catch((error) => {
|
|
console.error(error);
|
|
document.getElementById("app").innerHTML = `<div class="panel"><h3>초기화 실패</h3><p>${error.message}</p></div>`;
|
|
});
|