1001 lines
60 KiB
HTML
1001 lines
60 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ko">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>(주)장헌 통합 원가 정산 시스템 v5.5</title>
|
|
|
|
<!-- React / ReactDOM -->
|
|
<script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
|
|
<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
|
|
|
|
<!-- Babel -->
|
|
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
|
|
|
|
<!-- Tailwind CSS -->
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
|
|
<!-- SheetJS -->
|
|
<script src="https://cdn.sheetjs.com/xlsx-0.20.1/package/dist/xlsx.full.min.js"></script>
|
|
|
|
<!-- Lucide Icons -->
|
|
<script src="https://unpkg.com/lucide@latest"></script>
|
|
|
|
<style>
|
|
@import url('https://fonts.googleapis.com/css2?family=Pretendard:wght@400;600;700;800&display=swap');
|
|
|
|
html, body {
|
|
height: 100%;
|
|
font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, Roboto, sans-serif;
|
|
background-color: #f1f5f9;
|
|
color: #334155;
|
|
}
|
|
|
|
.animate-fade-in { animation: fadeIn 0.2s ease-out; }
|
|
@keyframes fadeIn { from { opacity: 0; transform: translateY(2px); } to { opacity: 1; transform: translateY(0); } }
|
|
|
|
.custom-scrollbar::-webkit-scrollbar { width: 5px; height: 5px; }
|
|
.custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
|
|
.custom-scrollbar::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }
|
|
|
|
.glass-nav {
|
|
background: rgba(255, 255, 255, 0.95);
|
|
backdrop-filter: blur(8px);
|
|
border-bottom: 1px solid #e2e8f0;
|
|
}
|
|
|
|
/* 대시보드 테이블 가독성 스타일 */
|
|
.dashboard-table th {
|
|
background-color: #f8fafc;
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
color: #64748b;
|
|
text-transform: uppercase;
|
|
padding: 12px 16px;
|
|
border-bottom: 1px solid #e2e8f0;
|
|
}
|
|
|
|
/* 보고서 표 공통 규격(화면) */
|
|
.report-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
table-layout: fixed;
|
|
border: 1px solid #e2e8f0;
|
|
background-color: #fff;
|
|
}
|
|
.report-table th,
|
|
.report-table td {
|
|
border: 1px solid #e2e8f0;
|
|
padding: 10px 12px;
|
|
font-size: 13px;
|
|
line-height: 1.35;
|
|
vertical-align: middle;
|
|
}
|
|
.report-table th {
|
|
background-color: #f8fafc;
|
|
color: #475569;
|
|
font-weight: 800;
|
|
text-align: center;
|
|
}
|
|
|
|
/* 전문 보고서 인쇄 스타일 (A4 가로 너비 100% 최적화) */
|
|
@media print {
|
|
@page { size: A4; margin: 10mm; }
|
|
.no-print { display: none !important; }
|
|
body { background-color: white !important; padding: 0 !important; color: black !important; }
|
|
.print-container { padding: 0 !important; margin: 0 !important; width: 100% !important; max-width: none !important; }
|
|
.report-page { border: none !important; box-shadow: none !important; padding: 0 !important; width: 100% !important; }
|
|
|
|
.report-table {
|
|
width: 100% !important;
|
|
border-collapse: collapse !important;
|
|
table-layout: fixed !important;
|
|
border: 1px solid #000 !important;
|
|
margin-bottom: 1.5rem !important;
|
|
}
|
|
.report-table th, .report-table td {
|
|
border: 0.5px solid #000 !important;
|
|
padding: 8px 10px !important;
|
|
font-size: 9pt !important;
|
|
line-height: 1.2 !important;
|
|
word-break: break-all !important;
|
|
}
|
|
.report-table th { background-color: #f1f5f9 !important; font-weight: bold !important; text-align: center !important; }
|
|
.page-break { page-break-before: always; }
|
|
|
|
.summary-box {
|
|
display: table !important;
|
|
width: 100% !important;
|
|
border: 1px solid #000 !important;
|
|
border-collapse: collapse;
|
|
}
|
|
.summary-row { display: table-row !important; }
|
|
.summary-cell {
|
|
display: table-cell !important;
|
|
border: 1px solid #000 !important;
|
|
padding: 12px !important;
|
|
width: 50% !important;
|
|
}
|
|
.text-blue-600 { color: #1e40af !important; }
|
|
.text-emerald-700 { color: #065f46 !important; }
|
|
}
|
|
|
|
input[type="number"]::-webkit-inner-spin-button,
|
|
input[type="number"]::-webkit-outer-spin-button {
|
|
-webkit-appearance: none;
|
|
margin: 0;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="root"></div>
|
|
|
|
<script type="text/babel" data-type="module">
|
|
import { initializeApp } from "https://www.gstatic.com/firebasejs/11.6.1/firebase-app.js";
|
|
import { getAuth, onAuthStateChanged, signInAnonymously, signInWithCustomToken } from "https://www.gstatic.com/firebasejs/11.6.1/firebase-auth.js";
|
|
import { getFirestore, doc, setDoc, getDoc, collection, onSnapshot } from "https://www.gstatic.com/firebasejs/11.6.1/firebase-firestore.js";
|
|
|
|
const { useState, useMemo, useEffect, useRef } = React;
|
|
|
|
// --- Firebase 및 설정 ---
|
|
let db, auth, appId;
|
|
try {
|
|
const firebaseConfig = typeof __firebase_config !== 'undefined' ? JSON.parse(__firebase_config) : null;
|
|
appId = typeof __app_id !== 'undefined' ? __app_id : 'jangheon-v55';
|
|
if (firebaseConfig) {
|
|
const app = initializeApp(firebaseConfig);
|
|
auth = getAuth(app);
|
|
db = getFirestore(app);
|
|
}
|
|
} catch(e) { console.warn("Firebase not available."); }
|
|
|
|
const POOL_A_PROJECTS = ['총무 [26-관리-03]', '부서 공통 [26-관리-06]', '공통'];
|
|
const POOL_B_PROJECTS = ['관리', '생산'];
|
|
const TEAM_RATIOS = { '일반경비': { '철근팀': 0.45, '제작팀': 0.30, '공무팀': 0.25 } };
|
|
const FACTORY_WORKER_FALLBACK = [
|
|
{ name: '강병흔', rate: 3065880, regularType: '정규직' }, { name: '곽병목', rate: 2313800, regularType: '정규직' },
|
|
{ name: '김경수', rate: 2674500, regularType: '계약직' }, { name: '김용정', rate: 2889740, regularType: '계약직' },
|
|
{ name: '김인식', rate: 3007160, regularType: '정규직' }, { name: '김종옥', rate: 2400520, regularType: '계약직' },
|
|
{ name: '민인기', rate: 2400520, regularType: '계약직' }, { name: '박혁수', rate: 2400520, regularType: '정규직' },
|
|
{ name: '석길원', rate: 2889750, regularType: '계약직' }, { name: '손순기', rate: 2674480, regularType: '계약직' },
|
|
{ name: '양시용', rate: 2868000, regularType: '계약직' }, { name: '원종명', rate: 2557100, regularType: '계약직' },
|
|
{ name: '윤승근', rate: 2615760, regularType: '계약직' }, { name: '이상진', rate: 2459220, regularType: '정규직' },
|
|
{ name: '이신영', rate: 2557060, regularType: '정규직' }, { name: '이은재', rate: 2615770, regularType: '계약직' },
|
|
{ name: '이호성', rate: 3281180, regularType: '정규직' }, { name: '임성학', rate: 2791910, regularType: '계약직' },
|
|
{ name: '장기홍', rate: 2557060, regularType: '정규직' }, { name: '장래철', rate: 2948460, regularType: '계약직' },
|
|
{ name: '장만순', rate: 2948460, regularType: '계약직' }, { name: '정승정', rate: 2948440, regularType: '정규직' },
|
|
{ name: '조성근', rate: 2889750, regularType: '계약직' }, { name: '조성태', rate: 2615770, regularType: '계약직' },
|
|
{ name: '최정희', rate: 2283100, regularType: '계약직' }, { name: '최천환', rate: 3007160, regularType: '계약직' },
|
|
{ name: '한덕현', rate: 3007170, regularType: '정규직' }
|
|
];
|
|
|
|
const Icon = ({ name, size = 16, className = "" }) => {
|
|
useEffect(() => { if (window.lucide) window.lucide.createIcons(); }, [name]);
|
|
return <i data-lucide={name} className={className} style={{width: size, height: size}}></i>;
|
|
};
|
|
|
|
const App = () => {
|
|
const [user, setUser] = useState(null);
|
|
const [activeTab, setActiveTab] = useState('analysis');
|
|
const [viewMode, setViewMode] = useState('project');
|
|
const [isLoading, setIsLoading] = useState(true);
|
|
const [showReport, setShowReport] = useState(false);
|
|
const [selectedDetail, setSelectedDetail] = useState(null);
|
|
const [detailTab, setDetailTab] = useState('account');
|
|
|
|
const [expenses, setExpenses] = useState([]);
|
|
const [laborRows, setLaborRows] = useState([]);
|
|
const [wageSettings, setWageSettings] = useState({});
|
|
const [factoryWorkers, setFactoryWorkers] = useState([]);
|
|
const [workerTeamFilter, setWorkerTeamFilter] = useState('ALL');
|
|
const [formVolumes, setFormVolumes] = useState({});
|
|
const [mgmtPoolAAccounts, setMgmtPoolAAccounts] = useState(['(복리)식대비', '(복리)회식비', '(복리)간식비']);
|
|
|
|
const [allocPoolA, setAllocPoolA] = useState(true);
|
|
const [allocPoolB, setAllocPoolB] = useState(true);
|
|
const [startDate, setStartDate] = useState('');
|
|
const [endDate, setEndDate] = useState('');
|
|
|
|
useEffect(() => {
|
|
if (!auth) { setIsLoading(false); return; }
|
|
const initAuth = async () => {
|
|
if (typeof __initial_auth_token !== 'undefined' && __initial_auth_token) {
|
|
await signInWithCustomToken(auth, __initial_auth_token);
|
|
} else { await signInAnonymously(auth); }
|
|
};
|
|
initAuth();
|
|
return onAuthStateChanged(auth, setUser);
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
if (!user || !db) { setIsLoading(false); return; }
|
|
const docRef = doc(db, 'artifacts', appId, 'users', user.uid, 'settings', 'masterData');
|
|
return onSnapshot(docRef, (snap) => {
|
|
if (snap.exists()) {
|
|
const data = snap.data();
|
|
setExpenses(data.expenses || []);
|
|
setLaborRows(data.laborRows || []);
|
|
setWageSettings(data.wageSettings || {});
|
|
setFormVolumes(data.formVolumes || {});
|
|
setMgmtPoolAAccounts(data.mgmtPoolAAccounts || ['(복리)식대비', '(복리)회식비', '(복리)간식비']);
|
|
if (data.allocPoolA !== undefined) setAllocPoolA(data.allocPoolA);
|
|
if (data.allocPoolB !== undefined) setAllocPoolB(data.allocPoolB);
|
|
}
|
|
setIsLoading(false);
|
|
}, () => setIsLoading(false));
|
|
}, [user]);
|
|
|
|
const saveData = async (updates) => {
|
|
if (!user || !db) return;
|
|
const docRef = doc(db, 'artifacts', appId, 'users', user.uid, 'settings', 'masterData');
|
|
await setDoc(docRef, { ...updates, updatedAt: new Date().toISOString() }, { merge: true });
|
|
};
|
|
|
|
const parseFactoryWorkerHtml = (htmlText) => {
|
|
const doc = new DOMParser().parseFromString(String(htmlText || ''), 'text/html');
|
|
const rows = [...doc.querySelectorAll('tr')];
|
|
const teamMfg = new Set(['이호성', '이신영', '곽병목', '최정희', '장래철']);
|
|
const teamAdmin = new Set(['양시용', '원종명', '김용정', '조성태', '강병흔', '장기홍', '정승정']);
|
|
const resolveTeam = (name = '', regularType = '') => {
|
|
const n = String(name || '').trim();
|
|
const r = String(regularType || '').trim();
|
|
if (r.includes('일용')) return '일용직';
|
|
if (teamMfg.has(n)) return '제작팀';
|
|
if (teamAdmin.has(n)) return '공무팀';
|
|
return '철근팀';
|
|
};
|
|
const toNum = (v) => {
|
|
const n = parseFloat(String(v || '').replace(/[^0-9.-]/g, ''));
|
|
return Number.isFinite(n) ? n : 0;
|
|
};
|
|
|
|
const workers = [];
|
|
rows.forEach(tr => {
|
|
const nameCell = tr.querySelector('td#Worker_name');
|
|
const payCell = tr.querySelector('td#BasicPay');
|
|
const bonusCell = tr.querySelector('td#Bonus');
|
|
const regularCell = tr.querySelector('td#regularname');
|
|
if (!nameCell || !payCell) return;
|
|
const name = String(nameCell.textContent || '').trim();
|
|
if (!name) return;
|
|
const basicPay = toNum(payCell.textContent);
|
|
const bonusPay = toNum(bonusCell ? bonusCell.textContent : 0);
|
|
const regularType = String(regularCell ? regularCell.textContent : '').trim();
|
|
const team = resolveTeam(name, regularType);
|
|
workers.push({ name, team, rate: basicPay + bonusPay });
|
|
});
|
|
|
|
const uniq = {};
|
|
workers.forEach(w => { if (!uniq[w.name]) uniq[w.name] = w; });
|
|
return Object.values(uniq);
|
|
};
|
|
|
|
const applyFactoryDefaults = (workers) => {
|
|
if (!workers || workers.length === 0) return;
|
|
setWageSettings(prev => {
|
|
const next = { ...prev };
|
|
workers.forEach(w => {
|
|
const prevType = (next[w.name] && next[w.name].type) ? next[w.name].type : 'monthly';
|
|
next[w.name] = { rate: w.rate || 0, type: prevType };
|
|
});
|
|
saveData({ wageSettings: next });
|
|
return next;
|
|
});
|
|
};
|
|
|
|
const loadFactoryDefaultsFromText = (text) => {
|
|
const parsed = parseFactoryWorkerHtml(text);
|
|
setFactoryWorkers(parsed);
|
|
applyFactoryDefaults(parsed);
|
|
};
|
|
|
|
useEffect(() => {
|
|
// 프로젝트 루트의 FactoryWorker.xls(HTML 형식)에서 기본 인원/단가를 로드
|
|
fetch('./FactoryWorker.xls')
|
|
.then(r => r.text())
|
|
.then(loadFactoryDefaultsFromText)
|
|
.catch(() => {
|
|
const teamMfg = new Set(['이호성', '이신영', '곽병목', '최정희', '장래철']);
|
|
const teamAdmin = new Set(['양시용', '원종명', '김용정', '조성태', '강병흔', '장기홍', '정승정']);
|
|
const fallbackWorkers = FACTORY_WORKER_FALLBACK.map(w => ({
|
|
name: w.name,
|
|
rate: w.rate,
|
|
team: String(w.regularType || '').includes('일용')
|
|
? '일용직'
|
|
: teamMfg.has(w.name) ? '제작팀'
|
|
: teamAdmin.has(w.name) ? '공무팀'
|
|
: '철근팀'
|
|
}));
|
|
setFactoryWorkers(fallbackWorkers);
|
|
applyFactoryDefaults(fallbackWorkers);
|
|
});
|
|
}, []);
|
|
|
|
const utils = {
|
|
formatWon: (v) => `₩${Math.round(v || 0).toLocaleString()}`,
|
|
formatHr: (v) => `${Number(v || 0).toLocaleString(undefined, { minimumFractionDigits: 1, maximumFractionDigits: 1 })}`,
|
|
parseNum: (v) => { const n = parseFloat(String(v).replace(/,/g, '')); return isNaN(n) ? 0 : n; },
|
|
parseDate: (val) => {
|
|
if (!val) return '';
|
|
if (val instanceof Date) return val.toISOString().split('T')[0];
|
|
if (typeof val === 'number') {
|
|
const d = new Date(Math.round((val - 25569) * 86400 * 1000));
|
|
return d.toISOString().split('T')[0];
|
|
}
|
|
return String(val).trim().substring(0, 10);
|
|
}
|
|
};
|
|
|
|
const onUpload = (e, type) => {
|
|
const file = e.target.files[0];
|
|
if (!file) return;
|
|
if (type === 'hr') {
|
|
const reader = new FileReader();
|
|
reader.onload = (evt) => {
|
|
loadFactoryDefaultsFromText(evt.target.result);
|
|
};
|
|
reader.readAsText(file);
|
|
return;
|
|
}
|
|
const reader = new FileReader();
|
|
reader.onload = (evt) => {
|
|
const wb = XLSX.read(evt.target.result, { type: 'binary', cellDates: true });
|
|
const data = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]);
|
|
if (type === 'expense') {
|
|
const mapped = data.flatMap((r, i) => {
|
|
const account = String(r['계정'] || r['소계정명'] || '미분류').trim();
|
|
const team = String(r['팀'] || r['팀명'] || '기타').trim();
|
|
const projectName = String(r['교량명'] || r['사업명'] || r['사업코드'] || '미지정').trim();
|
|
const amount = utils.parseNum(r['공급가액'] || r['공급가'] || r['합계']);
|
|
const date = utils.parseDate(r['거래일'] || r['날짜']);
|
|
const desc = r['적요'] || '';
|
|
const form = String(r['형식'] || '미분류').trim();
|
|
return { id: `e-${Date.now()}-${i}`, date, account, team, projectName, amount, description: desc, form };
|
|
});
|
|
setExpenses(mapped); saveData({ expenses: mapped });
|
|
} else {
|
|
const lData = data.flatMap((r, i) => {
|
|
const date = utils.parseDate(r['근무일'] || r['날짜']);
|
|
const worker = r['근무자명'] || r['성명'] || '';
|
|
const team = String(r['근무팀'] || r['소속팀'] || '기타').trim();
|
|
const projectName = String(r['교량명'] || r['사업명'] || '미지정').trim();
|
|
const hours = utils.parseNum(r['근무시간'] || r['시간']);
|
|
const form = String(r['형식'] || '미분류').trim();
|
|
return { id: `l-${Date.now()}-${i}`, date, worker, team, projectName, hours, form };
|
|
});
|
|
setLaborRows(lData);
|
|
const newWages = { ...wageSettings };
|
|
[...new Set(lData.map(l => l.worker))].filter(Boolean).forEach(n => { if (!newWages[n]) newWages[n] = { rate: 0, type: 'monthly' }; });
|
|
setWageSettings(newWages); saveData({ laborRows: lData, wageSettings: newWages });
|
|
}
|
|
};
|
|
reader.readAsBinaryString(file);
|
|
};
|
|
|
|
const calculateSettlement = (mode) => {
|
|
const isB = (v) => POOL_B_PROJECTS.includes(v);
|
|
const isA = (v) => POOL_A_PROJECTS.includes(v);
|
|
const fEx = expenses.filter(i => (!startDate || i.date >= startDate) && (!endDate || i.date <= endDate));
|
|
const fLb = laborRows.filter(i => (!startDate || i.date >= startDate) && (!endDate || i.date <= endDate));
|
|
const workerTotalHours = {};
|
|
fLb.forEach(r => { workerTotalHours[r.worker] = (workerTotalHours[r.worker] || 0) + r.hours; });
|
|
const laborWithCost = fLb.map(r => {
|
|
const cfg = wageSettings[r.worker] || { rate: 0, type: 'monthly' };
|
|
let cost = cfg.type === 'hourly' ? r.hours * cfg.rate : (workerTotalHours[r.worker] > 0 ? (r.hours / workerTotalHours[r.worker]) * cfg.rate : 0);
|
|
return { ...r, cost };
|
|
});
|
|
|
|
let poolAVal = 0; let poolBVal = 0; let revenueHrs = 0;
|
|
const projectMap = {};
|
|
|
|
fEx.forEach(e => {
|
|
if (isB(e.projectName)) poolBVal += e.amount;
|
|
else if (isA(e.projectName)) poolAVal += e.amount;
|
|
else if (e.team === '관리팀' && !mgmtPoolAAccounts.some(acc => e.account.includes(acc))) poolBVal += e.amount;
|
|
else if (e.team === '관리팀') poolAVal += e.amount;
|
|
else {
|
|
if (!projectMap[e.projectName]) projectMap[e.projectName] = { name: e.projectName, direct: 0, hours: 0, byAccount: {}, byTeam: {}, byForm: {} };
|
|
projectMap[e.projectName].direct += e.amount;
|
|
projectMap[e.projectName].byAccount[e.account] = (projectMap[e.projectName].byAccount[e.account] || 0) + e.amount;
|
|
projectMap[e.projectName].byTeam[e.team] = (projectMap[e.projectName].byTeam[e.team] || 0) + e.amount;
|
|
const f = e.form || '미분류';
|
|
projectMap[e.projectName].byForm[f] = (projectMap[e.projectName].byForm[f] || 0) + e.amount;
|
|
}
|
|
});
|
|
|
|
laborWithCost.forEach(l => {
|
|
if (isB(l.projectName)) poolBVal += l.cost;
|
|
else if (isA(l.projectName)) poolAVal += l.cost;
|
|
else {
|
|
if (!projectMap[l.projectName]) projectMap[l.projectName] = { name: l.projectName, direct: 0, hours: 0, byAccount: {}, byTeam: {}, byForm: {} };
|
|
projectMap[l.projectName].direct += l.cost;
|
|
projectMap[l.projectName].hours += l.hours;
|
|
projectMap[l.projectName].byAccount['인건비(직접)'] = (projectMap[l.projectName].byAccount['인건비(직접)'] || 0) + l.cost;
|
|
projectMap[l.projectName].byTeam[l.team] = (projectMap[l.projectName].byTeam[l.team] || 0) + l.cost;
|
|
const f = l.form || '미분류';
|
|
projectMap[l.projectName].byForm[f] = (projectMap[l.projectName].byForm[f] || 0) + l.cost;
|
|
revenueHrs += l.hours;
|
|
}
|
|
});
|
|
|
|
const settledProjects = Object.values(projectMap).map(p => {
|
|
const allocA = (allocPoolA && revenueHrs > 0) ? (p.hours / revenueHrs) * poolAVal : 0;
|
|
const allocB = (allocPoolB && revenueHrs > 0) ? (p.hours / revenueHrs) * poolBVal : 0;
|
|
return { ...p, allocA, allocB, final: p.direct + allocA + allocB };
|
|
});
|
|
|
|
const customSort = (a, b) => {
|
|
const invalidNames = ['미분류', '미지정'];
|
|
if (invalidNames.includes(a.name) && !invalidNames.includes(b.name)) return 1;
|
|
if (!invalidNames.includes(a.name) && invalidNames.includes(b.name)) return -1;
|
|
return b.final - a.final;
|
|
};
|
|
|
|
if (mode === 'project') return settledProjects.sort(customSort);
|
|
if (mode === 'type') {
|
|
const formMap = {};
|
|
settledProjects.forEach(p => {
|
|
Object.entries(p.byForm).forEach(([fName, val]) => {
|
|
if (!formMap[fName]) formMap[fName] = { name: fName, direct: 0, allocA: 0, allocB: 0, final: 0, hours: 0, breakdown: {} };
|
|
formMap[fName].direct += val;
|
|
const ratio = p.direct > 0 ? val / p.direct : 0;
|
|
formMap[fName].allocA += p.allocA * ratio;
|
|
formMap[fName].allocB += p.allocB * ratio;
|
|
formMap[fName].hours += p.hours * ratio;
|
|
formMap[fName].breakdown[p.name] = (formMap[fName].breakdown[p.name] || 0) + val;
|
|
});
|
|
});
|
|
return Object.values(formMap).map(t => {
|
|
const finalVal = t.direct + t.allocA + t.allocB;
|
|
const volInfo = formVolumes[t.name] || { value: 0, unit: 'ton' };
|
|
return { ...t, final: finalVal, volInfo, unitCost: volInfo.value > 0 ? finalVal / volInfo.value : 0 };
|
|
}).sort(customSort);
|
|
}
|
|
if (mode === 'team') {
|
|
const tmMap = {};
|
|
settledProjects.forEach(p => {
|
|
Object.entries(p.byTeam).forEach(([tm, val]) => {
|
|
if (!tmMap[tm]) tmMap[tm] = { name: tm, direct: 0, allocA: 0, allocB: 0, final: 0, hours: 0, breakdown: {} };
|
|
tmMap[tm].direct += val;
|
|
const ratio = p.direct > 0 ? val / p.direct : 0;
|
|
tmMap[tm].allocA += p.allocA * ratio;
|
|
tmMap[tm].allocB += p.allocB * ratio;
|
|
tmMap[tm].hours += p.hours * ratio;
|
|
tmMap[tm].breakdown[p.name] = (tmMap[tm].breakdown[p.name] || 0) + val;
|
|
});
|
|
});
|
|
return Object.values(tmMap).map(t => ({ ...t, final: t.direct + t.allocA + t.allocB })).sort(customSort);
|
|
}
|
|
return { poolAVal, poolBVal, grandTotalHrs: fLb.reduce((s,x)=>s+x.hours, 0), revenueHrs };
|
|
};
|
|
|
|
const results = useMemo(() => {
|
|
const meta = calculateSettlement('meta');
|
|
const project = calculateSettlement('project');
|
|
const type = calculateSettlement('type');
|
|
const team = calculateSettlement('team');
|
|
const displayData = { project, type, team }[viewMode] || project;
|
|
const totalDirect = project.reduce((s, x) => s + x.direct, 0);
|
|
const total = totalDirect + (allocPoolA ? meta.poolAVal : 0) + (allocPoolB ? meta.poolBVal : 0);
|
|
return { displayData, poolA: meta.poolAVal, poolB: meta.poolBVal, total, grandTotalHrs: meta.grandTotalHrs, revenueHrs: meta.revenueHrs, all: { project, type, team } };
|
|
}, [expenses, laborRows, wageSettings, startDate, endDate, viewMode, allocPoolA, allocPoolB, formVolumes]);
|
|
|
|
const workerTeamMap = useMemo(() => {
|
|
const teamMfg = new Set(['이호성', '이신영', '곽병목', '최정희', '장래철']);
|
|
const teamAdmin = new Set(['양시용', '원종명', '김용정', '조성태', '강병흔', '장기홍', '정승정']);
|
|
const dailyWorkers = new Set(
|
|
(laborRows || [])
|
|
.filter(r => String(r.team || '').includes('일용'))
|
|
.map(r => String(r.worker || '').trim())
|
|
.filter(Boolean)
|
|
);
|
|
const map = {};
|
|
factoryWorkers.forEach(w => { map[w.name] = w.team; });
|
|
Object.keys(wageSettings || {}).forEach(name => {
|
|
if (map[name]) return;
|
|
if (dailyWorkers.has(name) || String(name).includes('일용')) {
|
|
map[name] = '일용직';
|
|
} else {
|
|
map[name] = teamMfg.has(name) ? '제작팀' : teamAdmin.has(name) ? '공무팀' : '철근팀';
|
|
}
|
|
});
|
|
return map;
|
|
}, [factoryWorkers, wageSettings, laborRows]);
|
|
|
|
const factoryTeamCounts = useMemo(() => {
|
|
const base = { '철근팀': 0, '제작팀': 0, '공무팀': 0, '일용직': 0 };
|
|
Object.values(workerTeamMap || {}).forEach(team => {
|
|
if (base[team] !== undefined) base[team] += 1;
|
|
});
|
|
return base;
|
|
}, [workerTeamMap]);
|
|
|
|
const visibleWorkerNames = useMemo(() => {
|
|
const names = Object.keys(wageSettings).sort();
|
|
if (workerTeamFilter === 'ALL') return names;
|
|
return names.filter(n => workerTeamMap[n] === workerTeamFilter);
|
|
}, [wageSettings, workerTeamFilter, workerTeamMap]);
|
|
|
|
useEffect(() => {
|
|
if (!selectedDetail) return;
|
|
if (selectedDetail.byAccount) setDetailTab('account');
|
|
else setDetailTab('breakdown');
|
|
}, [selectedDetail]);
|
|
|
|
if (isLoading) return <div className="h-screen flex items-center justify-center bg-slate-50 font-bold text-slate-400 uppercase tracking-widest animate-pulse">Syncing v5.5 Engine...</div>;
|
|
|
|
if (showReport) {
|
|
return (
|
|
<div className="min-h-screen bg-slate-200 p-10 print-container animate-fade-in text-slate-900">
|
|
<div className="max-w-5xl mx-auto space-y-6 no-print mb-8">
|
|
<div className="flex justify-between items-center bg-white p-4 rounded-2xl shadow-sm border border-slate-300">
|
|
<button onClick={() => setShowReport(false)} className="px-5 py-2 rounded-lg font-bold bg-slate-100 hover:bg-slate-200 flex items-center gap-2 transition-all">
|
|
<Icon name="arrow-left" size={16}/> 대시보드로 돌아가기
|
|
</button>
|
|
<button onClick={() => window.print()} className="px-8 py-3 rounded-lg font-black bg-blue-600 text-white shadow-lg hover:bg-blue-700 active:scale-95 transition-all flex items-center gap-2">
|
|
<Icon name="printer" size={20}/> 보고서 인쇄 (PDF 저장 가능)
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="bg-white p-14 shadow-2xl report-page mx-auto w-full max-w-5xl border border-slate-300">
|
|
<div className="border-b-4 border-slate-900 pb-8 mb-12 flex justify-between items-end">
|
|
<div>
|
|
<h2 className="text-3xl font-black italic tracking-tighter text-slate-900 uppercase underline decoration-blue-500 decoration-4 underline-offset-[12px] mb-4">통합 원가 정산 결과 보고서</h2>
|
|
<p className="text-slate-500 font-bold uppercase text-[10px] tracking-[0.4em]">(주)장헌 프로젝트 관리 시스템</p>
|
|
</div>
|
|
<div className="text-right">
|
|
<p className="text-xs font-bold text-slate-400 mb-1 italic">발행일: {new Date().toLocaleDateString()}</p>
|
|
<p className="text-[10px] font-black text-slate-900 uppercase tracking-widest bg-slate-100 px-3 py-1 rounded">Official Report</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-16">
|
|
<section>
|
|
<div className="flex items-center gap-4 mb-6">
|
|
<div className="w-1.5 h-6 bg-slate-900 rounded-full" />
|
|
<h3 className="text-xl font-black uppercase italic tracking-tight">01. 정산 총괄 요약</h3>
|
|
</div>
|
|
<div className="summary-box">
|
|
<div className="summary-row">
|
|
<div className="summary-cell">
|
|
<span className="text-[9px] font-bold text-slate-400 uppercase tracking-widest mb-1 block">조회 기간 총 발생 원가</span>
|
|
<span className="text-xl font-black text-slate-900">{utils.formatWon(results.total)}</span>
|
|
</div>
|
|
<div className="summary-cell">
|
|
<span className="text-[9px] font-bold text-slate-400 uppercase tracking-widest mb-1 block">실 투입 누적 총 공수</span>
|
|
<span className="text-xl font-black text-slate-900">{utils.formatHr(results.grandTotalHrs)} HR</span>
|
|
</div>
|
|
</div>
|
|
{(allocPoolA || allocPoolB) && (
|
|
<div className="summary-row">
|
|
{allocPoolA && (
|
|
<div className="summary-cell">
|
|
<span className="text-[9px] font-bold text-slate-400 uppercase tracking-widest mb-1 block">운영비 배분 총액 (POOL A)</span>
|
|
<span className="text-xl font-black text-blue-700">{utils.formatWon(results.poolA)}</span>
|
|
</div>
|
|
)}
|
|
{allocPoolB && (
|
|
<div className="summary-cell">
|
|
<span className="text-[9px] font-bold text-slate-400 uppercase tracking-widest mb-1 block">일반 관리비 배분액 (POOL B)</span>
|
|
<span className="text-xl font-black text-orange-700">{utils.formatWon(results.poolB)}</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</section>
|
|
|
|
<section>
|
|
<div className="flex items-center gap-4 mb-6">
|
|
<div className="w-1.5 h-6 bg-slate-900 rounded-full" />
|
|
<h3 className="text-xl font-black uppercase italic tracking-tight">02. 교량별 정산 상세 내역</h3>
|
|
</div>
|
|
<table className="report-table">
|
|
<thead>
|
|
<tr>
|
|
<th style={{ width: '28%' }}>교량(프로젝트) 명칭</th>
|
|
<th style={{ width: '15%' }} className="text-right">직접비</th>
|
|
{allocPoolA && <th style={{ width: '15%' }} className="text-right text-blue-700">운영비 추가(A)</th>}
|
|
{allocPoolB && <th style={{ width: '15%' }} className="text-right text-orange-700">관리비 추가(B)</th>}
|
|
<th style={{ width: '17%' }} className="text-right font-black">총액</th>
|
|
<th style={{ width: '10%' }} className="text-center">공수(HR)</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{results.all.project.map(p => (
|
|
<tr key={p.name} className={['미분류', '미지정'].includes(p.name) ? 'bg-red-50 text-red-700' : ''}>
|
|
<td className="font-bold">{p.name}</td>
|
|
<td className="text-right">{Math.round(p.direct).toLocaleString()}</td>
|
|
{allocPoolA && <td className="text-right text-blue-700">{Math.round(p.allocA).toLocaleString()}</td>}
|
|
{allocPoolB && <td className="text-right text-orange-700">{Math.round(p.allocB).toLocaleString()}</td>}
|
|
<td className="text-right font-black">₩{Math.round(p.final).toLocaleString()}</td>
|
|
<td className="text-center font-bold text-slate-500">{utils.formatHr(p.hours)}</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</section>
|
|
|
|
<section className="page-break">
|
|
<div className="flex items-center gap-4 mb-6">
|
|
<div className="w-1.5 h-6 bg-slate-900 rounded-full" />
|
|
<h3 className="text-xl font-black uppercase italic tracking-tight">03. 제품 형식별 제조 원가 분석</h3>
|
|
</div>
|
|
<table className="report-table">
|
|
<thead>
|
|
<tr>
|
|
<th style={{ width: '24%' }}>제품 형식</th>
|
|
<th style={{ width: '14%' }} className="text-right">직접비</th>
|
|
{allocPoolA && <th style={{ width: '14%' }} className="text-right text-blue-700">운영비 추가(A)</th>}
|
|
{allocPoolB && <th style={{ width: '14%' }} className="text-right text-orange-700">관리비 추가(B)</th>}
|
|
<th style={{ width: '14%' }} className="text-right font-black">총액</th>
|
|
<th style={{ width: '10%' }} className="text-right">생산량/단위</th>
|
|
<th style={{ width: '10%' }} className="text-right text-emerald-700 font-black">단위당 원가(₩)</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{results.all.type.map(t => (
|
|
<tr key={t.name} className={['미분류', '미지정'].includes(t.name) ? 'bg-red-50' : ''}>
|
|
<td className="font-bold">{t.name}</td>
|
|
<td className="text-right">{Math.round(t.direct).toLocaleString()}</td>
|
|
{allocPoolA && <td className="text-right text-blue-700">{Math.round(t.allocA).toLocaleString()}</td>}
|
|
{allocPoolB && <td className="text-right text-orange-700">{Math.round(t.allocB).toLocaleString()}</td>}
|
|
<td className="text-right font-black">₩{Math.round(t.final).toLocaleString()}</td>
|
|
<td className="text-right italic text-slate-500">{t.volInfo.value.toLocaleString()} {t.volInfo.unit}</td>
|
|
<td className="text-right font-black text-emerald-700">₩{Math.round(t.unitCost).toLocaleString()}</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</section>
|
|
|
|
<section>
|
|
<div className="flex items-center gap-4 mb-6">
|
|
<div className="w-1.5 h-6 bg-slate-900 rounded-full" />
|
|
<h3 className="text-xl font-black uppercase italic tracking-tight">04. 팀별 원가 귀속 현황</h3>
|
|
</div>
|
|
<table className="report-table">
|
|
<thead>
|
|
<tr>
|
|
<th style={{ width: '30%' }}>담당 부서/팀</th>
|
|
<th style={{ width: '17%' }} className="text-right">직접 투입비</th>
|
|
{allocPoolA && <th style={{ width: '17%' }} className="text-right text-blue-700">운영비 추가(A)</th>}
|
|
{allocPoolB && <th style={{ width: '17%' }} className="text-right text-orange-700">관리비 추가(B)</th>}
|
|
<th style={{ width: '19%' }} className="text-right font-black">총액</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{results.all.team.map(tm => (
|
|
<tr key={tm.name}>
|
|
<td className="font-bold">{tm.name} ({utils.formatHr(tm.hours)} HR)</td>
|
|
<td className="text-right">{Math.round(tm.direct).toLocaleString()}</td>
|
|
{allocPoolA && <td className="text-right text-blue-700">{Math.round(tm.allocA).toLocaleString()}</td>}
|
|
{allocPoolB && <td className="text-right text-orange-700">{Math.round(tm.allocB).toLocaleString()}</td>}
|
|
<td className="text-right font-black">₩{Math.round(tm.final).toLocaleString()}</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</section>
|
|
</div>
|
|
|
|
<div className="mt-20 pt-10 border-t border-slate-100 text-center space-y-4">
|
|
<p className="text-[9px] font-bold text-slate-300 uppercase tracking-[0.6em] italic">JANGHEON COST ANALYSIS ENGINE v5.5</p>
|
|
<div className="flex justify-center gap-10 py-6 opacity-20 grayscale">
|
|
<div className="border-2 border-slate-900 p-2 px-8 rounded-full font-black text-slate-900 text-lg uppercase italic">Approved</div>
|
|
<div className="border-2 border-slate-900 p-2 px-8 rounded-full font-black text-slate-900 text-lg uppercase italic">JANGHEON</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="min-h-screen flex flex-col text-sm">
|
|
<header className="glass-nav h-14 px-6 flex items-center justify-between sticky top-0 z-50">
|
|
<div className="flex items-center gap-3">
|
|
<div className="bg-slate-900 p-1.5 rounded-lg text-white shadow-sm font-black italic"><Icon name="cpu" size={16} /></div>
|
|
<h1 className="font-bold text-lg tracking-tight text-slate-800 italic uppercase">장헌 Integrated COST v5.5</h1>
|
|
</div>
|
|
<div className="flex gap-1 bg-slate-100 p-0.5 rounded-xl shrink-0 border border-slate-200">
|
|
{[{id:'analysis', label:'정산 분석', icon:'layout'}, {id:'settings', label:'인사 관리', icon:'settings'}, {id:'data', label:'데이터&보고서', icon:'database'}].map(t => (
|
|
<button key={t.id} onClick={() => setActiveTab(t.id)} className={`flex items-center gap-2 px-4 py-1.5 rounded-lg font-bold transition-all ${activeTab === t.id ? 'bg-white text-slate-900 shadow-sm' : 'text-slate-500 hover:text-slate-800'}`}>
|
|
<Icon name={t.icon} size={13} /> {t.label}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</header>
|
|
|
|
<main className="flex-1 p-6 max-w-[1400px] mx-auto w-full animate-fade-in space-y-6 text-slate-700">
|
|
<div className="grid grid-cols-1 md:grid-cols-4 gap-4">
|
|
{[
|
|
{ label: '조회 총 발생 원가', val: results.total, color: 'text-slate-900' },
|
|
{ label: '운영비 (POOL A)', val: results.poolA, color: 'text-blue-600' },
|
|
{ label: '관리비 (POOL B)', val: results.poolB, color: 'text-orange-600' },
|
|
{ label: '실 투입 총 공수', val: results.grandTotalHrs, unit: 'HR', color: 'text-emerald-600' }
|
|
].map((c, i) => (
|
|
<div key={i} className="bg-white p-5 rounded-2xl border border-slate-200 shadow-sm transition-all hover:bg-slate-50/50">
|
|
<p className="text-xs font-bold text-slate-400 uppercase tracking-widest mb-1">{c.label}</p>
|
|
<p className={`text-xl font-extrabold ${c.color} tracking-tighter leading-none`}>
|
|
{c.unit ? (c.unit === 'HR' ? utils.formatHr(c.val) : c.val.toLocaleString()) : utils.formatWon(c.val)}
|
|
{c.unit && <span className="text-sm font-bold ml-1 opacity-50">{c.unit}</span>}
|
|
</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
{activeTab === 'analysis' && (
|
|
<div className="space-y-4">
|
|
<div className="bg-white px-6 py-2.5 rounded-2xl border border-slate-200 flex items-center justify-between gap-4 shadow-sm">
|
|
<div className="flex items-center gap-10 shrink-0">
|
|
<div className="flex items-center gap-8 font-bold text-xs text-slate-500 uppercase italic">
|
|
<label className="flex items-center gap-2 cursor-pointer group">
|
|
<input type="checkbox" className="w-4 h-4 rounded border-slate-300" checked={allocPoolA} onChange={e => setAllocPoolA(e.target.checked)} />
|
|
<span className={`${allocPoolA ? 'text-blue-600' : ''}`}>배분 (A)</span>
|
|
</label>
|
|
<label className="flex items-center gap-2 cursor-pointer group">
|
|
<input type="checkbox" className="w-4 h-4 rounded border-slate-300" checked={allocPoolB} onChange={e => setAllocPoolB(e.target.checked)} />
|
|
<span className={`${allocPoolB ? 'text-orange-600' : ''}`}>배분 (B)</span>
|
|
</label>
|
|
</div>
|
|
<div className="h-4 w-px bg-slate-200"></div>
|
|
<div className="flex items-center gap-2 shrink-0">
|
|
<input type="date" className="bg-slate-50 border rounded-lg text-xs font-bold px-3 py-1.5 focus:ring-1 focus:ring-blue-300 outline-none" value={startDate} onChange={e => setStartDate(e.target.value)} />
|
|
<span className="text-slate-300 text-xs font-bold">~</span>
|
|
<input type="date" className="bg-slate-50 border rounded-lg text-xs font-bold px-3 py-1.5 focus:ring-1 focus:ring-blue-300 outline-none" value={endDate} onChange={e => setEndDate(e.target.value)} />
|
|
</div>
|
|
</div>
|
|
<div className="flex bg-slate-100 p-0.5 rounded-lg gap-0.5 shrink-0 border">
|
|
{[{id:'project', label:'교량별'}, {id:'type', label:'형식별'}, {id:'team', label:'팀별'}].map(v => (
|
|
<button key={v.id} onClick={() => setViewMode(v.id)} className={`px-4 py-1.5 rounded-md text-xs font-bold transition-all ${viewMode === v.id ? 'bg-slate-800 text-white shadow-sm' : 'text-slate-500 hover:text-slate-800'}`}>
|
|
{v.label}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="bg-white rounded-2xl border border-slate-200 shadow-sm overflow-hidden overflow-x-auto custom-scrollbar">
|
|
<table className="w-full text-left min-w-[1000px] dashboard-table">
|
|
<thead>
|
|
<tr>
|
|
<th>정산 대상 명칭</th>
|
|
<th className="text-right">직접비</th>
|
|
<th className="text-right">배분(A)</th>
|
|
<th className="text-right">배분(B)</th>
|
|
<th className="text-right">최종 원가</th>
|
|
{viewMode === 'type' && <th className="text-center">생산량 / 단위원가</th>}
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y divide-slate-100 font-semibold text-sm">
|
|
{results.displayData.map(item => {
|
|
const isInvalid = item.name === '미분류' || item.name === '미지정';
|
|
return (
|
|
<tr key={item.name} className={`transition-all group ${isInvalid ? 'bg-red-50 hover:bg-red-100/30' : 'hover:bg-blue-50/20'}`}>
|
|
<td className="px-8 py-4 cursor-pointer" onClick={() => setSelectedDetail(item)}>
|
|
<div className="flex flex-col">
|
|
<span className={`font-bold block transition-colors text-sm leading-tight ${isInvalid ? 'text-red-700' : 'text-slate-800 group-hover:text-blue-600'}`}>{item.name}</span>
|
|
<span className="text-xs text-slate-400 font-bold mt-1 inline-flex items-center gap-1.5 bg-slate-100 px-1.5 py-0.5 rounded-md w-max">
|
|
<Icon name="clock" size={10} /> {utils.formatHr(item.hours || 0)} HR
|
|
</span>
|
|
</div>
|
|
</td>
|
|
<td className="px-5 py-4 text-right text-slate-500 italic text-sm">₩{Math.round(item.direct).toLocaleString()}</td>
|
|
<td className="px-5 py-4 text-right text-blue-500 text-sm italic">₩{Math.round(item.allocA).toLocaleString()}</td>
|
|
<td className="px-5 py-4 text-right text-orange-500 text-sm italic">₩{Math.round(item.allocB).toLocaleString()}</td>
|
|
<td className="px-8 py-4 text-right text-base font-black text-slate-900 tracking-tighter cursor-pointer" onClick={() => setSelectedDetail(item)}>₩{Math.round(item.final).toLocaleString()}</td>
|
|
{viewMode === 'type' && (
|
|
<td className="px-8 py-4 bg-slate-50/50">
|
|
<div className="flex flex-col items-center gap-2">
|
|
<div className="flex items-center gap-1.5">
|
|
<input
|
|
type="number"
|
|
className="w-20 bg-white border border-slate-300 rounded-lg px-2 py-1 text-right font-bold text-blue-700 text-xs outline-none focus:ring-2 focus:ring-blue-100"
|
|
placeholder="물량"
|
|
value={item.volInfo.value || ''}
|
|
onChange={(e) => {
|
|
const next = { ...formVolumes, [item.name]: { ...item.volInfo, value: utils.parseNum(e.target.value) } };
|
|
setFormVolumes(next); saveData({ formVolumes: next });
|
|
}}
|
|
/>
|
|
<select className="bg-white border border-slate-300 rounded-lg px-1 py-1 text-xs font-bold outline-none cursor-pointer" value={item.volInfo.unit} onChange={(e) => {
|
|
const next = { ...formVolumes, [item.name]: { ...item.volInfo, unit: e.target.value } };
|
|
setFormVolumes(next); saveData({ formVolumes: next });
|
|
}}>
|
|
<option value="ton">ton</option><option value="m">m</option><option value="EA">EA</option>
|
|
</select>
|
|
</div>
|
|
<span className="text-xs font-black text-blue-800 tracking-tight">₩{Math.round(item.unitCost).toLocaleString()} <span className="text-[9px] opacity-40">/ {item.volInfo.unit}</span></span>
|
|
</div>
|
|
</td>
|
|
)}
|
|
</tr>
|
|
);
|
|
})}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{activeTab === 'data' && (
|
|
<div className="space-y-6 animate-fade-in text-center">
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 py-4">
|
|
{[{id:'expense', title:'지출 원장 업로드', icon:'file-text', count: expenses.length, color:'text-blue-600'}, {id:'labor', title:'근무 기록 업로드', icon:'users', count: laborRows.length, color:'text-emerald-600'}, {id:'hr', title:'인사 관리 업로드', icon:'user-round', count: factoryWorkers.length, color:'text-violet-600'}].map(u => (
|
|
<div key={u.id} className="bg-white p-8 rounded-2xl border border-slate-200 shadow-sm group hover:border-slate-800 transition-all">
|
|
<div className={`mx-auto p-5 rounded-2xl bg-slate-50 ${u.color} mb-4 shadow-sm w-max`}><Icon name={u.icon} size={36} /></div>
|
|
<h3 className="text-lg font-bold text-slate-800 mb-4 uppercase">{u.title}</h3>
|
|
<label className="bg-slate-800 text-white px-8 py-2 rounded-xl text-sm font-bold cursor-pointer hover:bg-slate-700 transition-all inline-block shadow-md">
|
|
<Icon name="upload" className="inline-block mr-2" size={14} /> 엑셀 파일 로드 <input type="file" className="hidden" accept={u.id === 'hr' ? '.xls,.xlsx,.html' : '.xls,.xlsx'} onChange={e => onUpload(e, u.id)} />
|
|
</label>
|
|
<p className="mt-4 text-xs font-bold text-slate-300 uppercase tracking-widest">{u.count} RECORDS SYNCED</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
<p className="text-sm font-bold text-slate-500">기본적인 인사 정보는 시스템에 저장되어 있으며, 인사 업로드 시 최신 파일 기준으로 팀/단가 정보가 갱신됩니다.</p>
|
|
|
|
<div className="bg-slate-900 p-12 rounded-[40px] text-white shadow-2xl relative overflow-hidden text-center space-y-6 group">
|
|
<div className="absolute top-0 right-0 w-80 h-80 bg-blue-500/10 blur-[100px] rounded-full" />
|
|
<Icon name="file-text" size={60} className="mx-auto text-blue-400 mb-2 transition-all duration-500 group-hover:scale-110" />
|
|
<div>
|
|
<h3 className="text-3xl font-black tracking-tighter uppercase italic">Professional Settlement Report</h3>
|
|
<p className="text-slate-400 font-semibold max-w-xl mx-auto text-sm mt-2 opacity-80 leading-relaxed italic">
|
|
모든 정산 결과(교량, 형식, 팀)를 페이지 너비에 최적화된 통합 보고서 양식으로 생성합니다. <br/>
|
|
생성된 결과는 정식 문서 규격으로 인쇄하거나 PDF로 저장할 수 있습니다.
|
|
</p>
|
|
</div>
|
|
<button onClick={() => setShowReport(true)} className="relative z-10 bg-blue-600 hover:bg-blue-500 text-white px-12 py-4 rounded-2xl text-lg font-black transition-all hover:scale-105 active:scale-95 shadow-[0_15px_40px_rgba(37,99,235,0.3)] flex items-center gap-3 mx-auto uppercase italic">
|
|
<Icon name="printer" size={24} /> 전문 통합 보고서 생성
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{activeTab === 'settings' && (
|
|
<div className="max-w-3xl mx-auto space-y-8 py-6 animate-fade-in text-slate-900">
|
|
<div className="bg-white p-10 rounded-3xl border border-slate-200 shadow-sm text-slate-900">
|
|
<h3 className="text-xl font-black uppercase tracking-tight mb-8 border-b pb-6 italic">인사 관리</h3>
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-3 mb-6">
|
|
{['철근팀', '제작팀', '공무팀', '일용직'].map(team => (
|
|
<div key={team} className="bg-slate-50 rounded-2xl border border-slate-100 p-4">
|
|
<div className="text-xs font-black text-slate-500">{team}</div>
|
|
<div className="text-2xl font-black text-slate-800 mt-1">{factoryTeamCounts[team] || 0}<span className="text-sm ml-1 text-slate-400">명</span></div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
<div className="mb-6 flex items-center gap-2">
|
|
{[
|
|
{ id: 'ALL', label: '전체' },
|
|
{ id: '철근팀', label: '철근팀' },
|
|
{ id: '제작팀', label: '제작팀' },
|
|
{ id: '공무팀', label: '공무팀' },
|
|
{ id: '일용직', label: '일용직' }
|
|
].map(opt => (
|
|
<button
|
|
key={opt.id}
|
|
type="button"
|
|
onClick={() => setWorkerTeamFilter(opt.id)}
|
|
className={`px-3 py-1.5 rounded-lg text-xs font-bold border transition-all ${workerTeamFilter === opt.id ? 'bg-slate-800 text-white border-slate-800' : 'bg-white text-slate-500 border-slate-200 hover:text-slate-700'}`}
|
|
>
|
|
{opt.label}
|
|
</button>
|
|
))}
|
|
</div>
|
|
<div className="grid grid-cols-1 gap-4 text-slate-900">
|
|
{visibleWorkerNames.map(n => (
|
|
<div key={n} className="bg-slate-50 p-5 rounded-2xl border border-slate-100 flex justify-between items-center group hover:bg-white transition-all shadow-sm">
|
|
<div className="flex items-center gap-2">
|
|
<span className="font-bold text-base underline underline-offset-8 decoration-slate-200 tracking-tight italic">{n}</span>
|
|
<span className="px-2 py-0.5 rounded-full text-[10px] font-black bg-slate-200 text-slate-700">{workerTeamMap[n] || '철근팀'}</span>
|
|
</div>
|
|
<div className="flex items-center gap-4">
|
|
<select className="bg-white border text-sm font-bold rounded-xl px-4 py-2.5 outline-none cursor-pointer focus:ring-4 focus:ring-blue-100 transition-all border-slate-200" value={wageSettings[n].type} onChange={e => {
|
|
const next = {...wageSettings, [n]: {...wageSettings[n], type: e.target.value}};
|
|
setWageSettings(next); saveData({ wageSettings: next });
|
|
}}>
|
|
<option value="monthly">월급제</option><option value="hourly">시급제</option>
|
|
</select>
|
|
<div className="relative">
|
|
<span className="absolute left-4 top-1/2 -translate-y-1/2 text-slate-300 font-bold text-lg italic">₩</span>
|
|
<input type="number" className="w-48 bg-white border border-slate-200 rounded-2xl pl-9 pr-6 py-2.5 text-right font-black text-lg outline-none focus:ring-4 focus:ring-blue-100 transition-all shadow-sm" value={wageSettings[n].rate} onChange={e => {
|
|
const next = {...wageSettings, [n]: {...wageSettings[n], rate: utils.parseNum(e.target.value)}};
|
|
setWageSettings(next); saveData({ wageSettings: next });
|
|
}} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</main>
|
|
|
|
{selectedDetail && (
|
|
<div className="fixed inset-0 z-[100] flex items-center justify-center p-6 bg-slate-900/70 backdrop-blur-md animate-fade-in no-print text-slate-900">
|
|
<div className={`bg-white w-full max-w-2xl rounded-[40px] shadow-2xl overflow-hidden flex flex-col max-h-[85vh] border-2 ${['미분류', '미지정'].includes(selectedDetail.name) ? 'border-red-400' : 'border-white/20'}`}>
|
|
<div className={`p-8 text-white flex justify-between items-center shrink-0 ${['미분류', '미지정'].includes(selectedDetail.name) ? 'bg-red-800' : 'bg-slate-800'}`}>
|
|
<h3 className="text-xl font-black italic tracking-tighter uppercase leading-tight">{selectedDetail.name} ANALYTICS</h3>
|
|
<button onClick={() => setSelectedDetail(null)} className="p-2 hover:bg-white/10 rounded-full transition-colors"><Icon name="x" size={20} /></button>
|
|
</div>
|
|
<div className="flex-1 overflow-y-auto custom-scrollbar p-10 space-y-10 text-slate-800 text-center">
|
|
<div className="space-y-1">
|
|
<p className="text-[10px] font-bold text-slate-400 uppercase tracking-widest leading-none">Settlement Sum</p>
|
|
<p className="text-4xl font-black tracking-tight italic underline decoration-slate-100 underline-offset-8">₩{Math.round(selectedDetail.final).toLocaleString()}</p>
|
|
</div>
|
|
|
|
<div className="flex justify-center gap-12 pt-4 font-bold border-y py-6 border-slate-100">
|
|
<div className="flex flex-col gap-1 text-center"><span className="text-[9px] text-slate-400 uppercase tracking-widest">Direct Input</span><span className="text-xl tracking-tighter italic">{utils.formatWon(selectedDetail.direct)}</span></div>
|
|
<div className="flex flex-col gap-1 text-center"><span className="text-[9px] text-blue-500 uppercase tracking-widest">Alloc(A+B)</span><span className="text-xl tracking-tighter italic">{utils.formatWon(selectedDetail.allocA + selectedDetail.allocB)}</span></div>
|
|
</div>
|
|
|
|
<div className="space-y-6 text-left">
|
|
<div className="flex items-center gap-3 mb-4">
|
|
<div className={`w-1.5 h-6 rounded-full ${['미분류', '미지정'].includes(selectedDetail.name) ? 'bg-red-600' : 'bg-slate-800'}`}></div>
|
|
<h4 className="font-bold text-slate-800 text-base uppercase tracking-tighter italic">Breakdown Analysis</h4>
|
|
</div>
|
|
{selectedDetail.byAccount && (
|
|
<div className="flex items-center gap-2 mb-3">
|
|
{[
|
|
{ id: 'account', label: '계정별' },
|
|
{ id: 'form', label: '형식별' },
|
|
{ id: 'team', label: '팀별' }
|
|
].map(tab => (
|
|
<button
|
|
key={tab.id}
|
|
type="button"
|
|
onClick={() => setDetailTab(tab.id)}
|
|
className={`px-3 py-1.5 rounded-lg text-xs font-bold border transition-all ${detailTab === tab.id ? 'bg-slate-800 text-white border-slate-800' : 'bg-white text-slate-500 border-slate-200 hover:text-slate-800'}`}
|
|
>
|
|
{tab.label}
|
|
</button>
|
|
))}
|
|
</div>
|
|
)}
|
|
<div className="space-y-3">
|
|
{(() => {
|
|
const groups = selectedDetail.byAccount
|
|
? (detailTab === 'form'
|
|
? selectedDetail.byForm
|
|
: detailTab === 'team'
|
|
? selectedDetail.byTeam
|
|
: selectedDetail.byAccount)
|
|
: selectedDetail.breakdown;
|
|
if (!groups) return <p className="text-center py-10 text-slate-300 font-bold uppercase italic text-xs tracking-widest">No Breakdown Data</p>;
|
|
return Object.entries(groups).sort((a,b) => b[1]-a[1]).map(([name, val], i) => {
|
|
const p = selectedDetail.direct > 0 ? (val / selectedDetail.direct * 100).toFixed(1) : 0;
|
|
const isErrParent = ['미분류', '미지정'].includes(selectedDetail.name);
|
|
return (
|
|
<div key={i} className={`bg-slate-50 p-5 rounded-2xl border transition-all ${isErrParent ? 'hover:border-red-400' : 'hover:border-blue-200 hover:bg-white'}`}>
|
|
<div className="flex justify-between text-xs font-bold mb-3 text-slate-900">
|
|
<span className="text-slate-600 italic uppercase tracking-tighter">{name}</span>
|
|
<span className="text-slate-900">{utils.formatWon(val)} <span className={`${isErrParent ? 'text-red-600' : 'text-blue-600'} font-black ml-1.5`}>({p}%)</span></span>
|
|
</div>
|
|
<div className="w-full bg-slate-200 h-1 rounded-full overflow-hidden">
|
|
<div className={`h-full transition-all duration-[1000ms] ease-out ${isErrParent ? 'bg-red-600' : 'bg-slate-800'}`} style={{ width: `${p}%` }}></div>
|
|
</div>
|
|
</div>
|
|
);
|
|
});
|
|
})()}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="text-center pt-8">
|
|
<button onClick={() => setSelectedDetail(null)} className={`w-full max-w-xs py-4 text-white font-bold rounded-2xl text-sm uppercase shadow-lg transition-all hover:scale-105 active:scale-95 ${['미분류', '미지정'].includes(selectedDetail.name) ? 'bg-red-800 hover:bg-red-900' : 'bg-slate-800 hover:bg-slate-700'}`}>확인 완료</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const root = ReactDOM.createRoot(document.getElementById("root"));
|
|
root.render(<App />);
|
|
</script>
|
|
</body>
|
|
</html>
|