56d060a37d
- 새 파일: resources/views/partials/react-cdn.blade.php
- 모든 React 페이지에서 중복된 CDN 스크립트를 @include('partials.react-cdn')로 대체
- 30개 파일 업데이트 (finance, juil, system, sales)
- 유지보수성 향상: CDN 버전 변경 시 한 곳만 수정
639 lines
38 KiB
PHP
639 lines
38 KiB
PHP
@extends('layouts.app')
|
|
|
|
@section('title', '견적/입찰/공사관리')
|
|
|
|
@section('content')
|
|
<div id="root"></div>
|
|
@endsection
|
|
|
|
@push('scripts')
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
@include('partials.react-cdn')
|
|
<script type="text/babel">
|
|
@verbatim
|
|
const { useState, useMemo } = React;
|
|
|
|
// --- 데이터 ---
|
|
const initialEstimates = [
|
|
{
|
|
id: 'EST-2024-001',
|
|
siteName: '힐스테이트 선화더와이즈',
|
|
client: '현대건설',
|
|
status: '인수완료',
|
|
estimateAmount: 104940000,
|
|
contractAmount: 93500000,
|
|
deadline: '2024-11-25',
|
|
manager: '김영민',
|
|
estimator: '박견적',
|
|
items: [
|
|
{ name: '블라인드 25mm', qty: 320, unit: 'EA', unitPrice: 45000 },
|
|
{ name: '롤스크린 원단', qty: 180, unit: 'EA', unitPrice: 62000 },
|
|
{ name: '시공비', qty: 1, unit: '식', unitPrice: 8500000 },
|
|
],
|
|
logs: [
|
|
{ date: '2024-10-01', content: '견적서 작성 완료', author: '박견적' },
|
|
{ date: '2024-10-15', content: '입찰 제출', author: '박견적' },
|
|
{ date: '2024-11-01', content: '낙찰 확정', author: '김대표' },
|
|
{ date: '2024-11-25', content: '계약 완료, 공사 인수', author: '김영민' },
|
|
],
|
|
},
|
|
{
|
|
id: 'EST-2024-002',
|
|
siteName: '충주 현대모비스 공장동',
|
|
client: '현대모비스',
|
|
status: '입찰진행',
|
|
estimateAmount: 63593000,
|
|
contractAmount: null,
|
|
deadline: '2024-10-15',
|
|
manager: null,
|
|
estimator: '박견적',
|
|
items: [
|
|
{ name: '산업용 롤스크린', qty: 95, unit: 'EA', unitPrice: 120000 },
|
|
{ name: '차광 블라인드', qty: 210, unit: 'EA', unitPrice: 55000 },
|
|
{ name: '시공비', qty: 1, unit: '식', unitPrice: 6500000 },
|
|
],
|
|
logs: [
|
|
{ date: '2024-09-20', content: '견적 요청 접수', author: '박견적' },
|
|
{ date: '2024-10-01', content: '현장 실측 완료', author: '박견적' },
|
|
{ date: '2024-10-10', content: '견적서 제출', author: '박견적' },
|
|
],
|
|
},
|
|
{
|
|
id: 'EST-2024-003',
|
|
siteName: '안성 SK하이닉스 신축',
|
|
client: 'SK하이닉스',
|
|
status: '결재대기',
|
|
estimateAmount: 170709000,
|
|
contractAmount: null,
|
|
deadline: '2024-12-05',
|
|
manager: null,
|
|
estimator: '박견적',
|
|
items: [
|
|
{ name: '클린룸 전동블라인드', qty: 450, unit: 'EA', unitPrice: 185000 },
|
|
{ name: '방화 롤스크린', qty: 120, unit: 'EA', unitPrice: 220000 },
|
|
{ name: '설치 및 시공비', qty: 1, unit: '식', unitPrice: 18000000 },
|
|
],
|
|
logs: [
|
|
{ date: '2024-11-15', content: '견적 요청 접수', author: '박견적' },
|
|
{ date: '2024-11-28', content: '견적서 작성 완료, 결재 요청', author: '박견적' },
|
|
],
|
|
},
|
|
{
|
|
id: 'EST-2024-004',
|
|
siteName: '강남 오피스빌딩 리모델링',
|
|
client: '삼성물산',
|
|
status: '현장설명회',
|
|
estimateAmount: null,
|
|
contractAmount: null,
|
|
deadline: '2024-12-10',
|
|
manager: null,
|
|
estimator: null,
|
|
items: [],
|
|
logs: [
|
|
{ date: '2024-12-01', content: '현장설명회 참석 예정', author: '박견적' },
|
|
],
|
|
},
|
|
];
|
|
|
|
const constructionData = [
|
|
{
|
|
id: 'CON-2024-001',
|
|
estimateId: 'EST-2024-001',
|
|
siteName: '힐스테이트 선화더와이즈',
|
|
client: '현대건설',
|
|
contractAmount: 93500000,
|
|
progress: 65,
|
|
startDate: '2024-11-25',
|
|
endDate: '2025-03-15',
|
|
manager: '김영민',
|
|
status: '시공중',
|
|
expenditure: 42350000,
|
|
tasks: [
|
|
{ name: '블라인드 제작', progress: 100, status: '완료' },
|
|
{ name: '롤스크린 제작', progress: 80, status: '진행중' },
|
|
{ name: '1차 시공 (1~5층)', progress: 100, status: '완료' },
|
|
{ name: '2차 시공 (6~10층)', progress: 30, status: '진행중' },
|
|
{ name: '마감 점검', progress: 0, status: '대기' },
|
|
],
|
|
},
|
|
];
|
|
|
|
const roles = [
|
|
{ value: 'ceo', label: '김대표 (CEO)' },
|
|
{ value: 'estimator', label: '박견적 (견적담당)' },
|
|
{ value: 'manager', label: '김영민 (공사관리)' },
|
|
{ value: 'admin', label: '이경리 (경리)' },
|
|
];
|
|
|
|
const statusConfig = {
|
|
'현장설명회': { bg: 'bg-purple-100', text: 'text-purple-700', border: 'border-purple-200' },
|
|
'결재대기': { bg: 'bg-blue-100', text: 'text-blue-700', border: 'border-blue-200' },
|
|
'입찰진행': { bg: 'bg-amber-100', text: 'text-amber-700', border: 'border-amber-200' },
|
|
'낙찰': { bg: 'bg-green-100', text: 'text-green-700', border: 'border-green-200' },
|
|
'인수완료': { bg: 'bg-teal-100', text: 'text-teal-700', border: 'border-teal-200' },
|
|
'유찰': { bg: 'bg-red-100', text: 'text-red-700', border: 'border-red-200' },
|
|
'계약완료': { bg: 'bg-emerald-100',text: 'text-emerald-700',border: 'border-emerald-200' },
|
|
'시공중': { bg: 'bg-cyan-100', text: 'text-cyan-700', border: 'border-cyan-200' },
|
|
};
|
|
|
|
function fmt(n) {
|
|
if (n == null) return '-';
|
|
return n.toLocaleString('ko-KR');
|
|
}
|
|
|
|
// --- 상태 배지 ---
|
|
function StatusBadge({ status }) {
|
|
const c = statusConfig[status] || { bg: 'bg-gray-100', text: 'text-gray-700', border: 'border-gray-200' };
|
|
return <span className={`px-3 py-1 rounded border text-xs font-medium ${c.bg} ${c.text} ${c.border}`}>{status}</span>;
|
|
}
|
|
|
|
// --- Toast ---
|
|
function InlineToast({ message, onClose }) {
|
|
React.useEffect(() => { const t = setTimeout(onClose, 2500); return () => clearTimeout(t); }, []);
|
|
return (
|
|
<div className="fixed top-6 right-6 z-50 bg-gray-800 text-white px-5 py-3 rounded-lg shadow-lg text-sm animate-pulse">
|
|
{message}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// --- 견적 상세 모달 ---
|
|
function EstimateDetailModal({ est, onClose }) {
|
|
if (!est) return null;
|
|
return (
|
|
<div className="fixed inset-0 bg-black/40 flex items-center justify-center z-50" onClick={onClose}>
|
|
<div className="bg-white rounded-xl shadow-xl w-full max-w-3xl max-h-[85vh] overflow-y-auto m-4" onClick={e => e.stopPropagation()}>
|
|
<div className="px-6 py-4 border-b flex justify-between items-center">
|
|
<h3 className="text-lg font-bold text-gray-800">{est.id} - {est.siteName}</h3>
|
|
<button onClick={onClose} className="text-gray-400 hover:text-gray-600 text-xl">×</button>
|
|
</div>
|
|
<div className="px-6 py-4 space-y-4">
|
|
<div className="grid grid-cols-2 gap-4 text-sm">
|
|
<div><span className="text-gray-500">발주처:</span> <span className="font-medium">{est.client}</span></div>
|
|
<div><span className="text-gray-500">상태:</span> <StatusBadge status={est.status} /></div>
|
|
<div><span className="text-gray-500">견적금액:</span> <span className="font-medium">{fmt(est.estimateAmount)}원</span></div>
|
|
<div><span className="text-gray-500">계약금액:</span> <span className="font-semibold text-emerald-600">{fmt(est.contractAmount)}원</span></div>
|
|
<div><span className="text-gray-500">마감일:</span> <span className="font-medium">{est.deadline}</span></div>
|
|
<div><span className="text-gray-500">담당자:</span> <span className="font-medium">{est.estimator || '-'}</span></div>
|
|
</div>
|
|
|
|
{est.items.length > 0 && (
|
|
<div>
|
|
<h4 className="font-semibold text-gray-700 mb-2">견적 항목</h4>
|
|
<table className="w-full text-sm">
|
|
<thead className="bg-gray-50">
|
|
<tr>
|
|
<th className="px-3 py-2 text-left">품목</th>
|
|
<th className="px-3 py-2 text-right">수량</th>
|
|
<th className="px-3 py-2 text-center">단위</th>
|
|
<th className="px-3 py-2 text-right">단가</th>
|
|
<th className="px-3 py-2 text-right">금액</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y">
|
|
{est.items.map((item, i) => (
|
|
<tr key={i}>
|
|
<td className="px-3 py-2">{item.name}</td>
|
|
<td className="px-3 py-2 text-right">{fmt(item.qty)}</td>
|
|
<td className="px-3 py-2 text-center">{item.unit}</td>
|
|
<td className="px-3 py-2 text-right">{fmt(item.unitPrice)}</td>
|
|
<td className="px-3 py-2 text-right font-medium">{fmt(item.qty * item.unitPrice)}</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
)}
|
|
|
|
{est.logs.length > 0 && (
|
|
<div>
|
|
<h4 className="font-semibold text-gray-700 mb-2">진행 이력</h4>
|
|
<div className="space-y-2">
|
|
{est.logs.map((log, i) => (
|
|
<div key={i} className="flex gap-3 text-sm">
|
|
<span className="text-gray-400 shrink-0">{log.date}</span>
|
|
<span className="text-gray-700">{log.content}</span>
|
|
<span className="text-gray-400 ml-auto shrink-0">- {log.author}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
<div className="px-6 py-3 border-t flex justify-end">
|
|
<button onClick={onClose} className="px-4 py-2 bg-gray-100 text-gray-700 rounded text-sm hover:bg-gray-200">닫기</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// --- 새 견적 작성 모달 ---
|
|
function NewEstimateModal({ onClose, onSave, nextId }) {
|
|
const [form, setForm] = useState({ siteName: '', client: '', deadline: '', estimator: '박견적' });
|
|
const handleSave = () => {
|
|
if (!form.siteName || !form.client) return alert('현장명과 발주처를 입력해주세요.');
|
|
onSave(form);
|
|
};
|
|
return (
|
|
<div className="fixed inset-0 bg-black/40 flex items-center justify-center z-50" onClick={onClose}>
|
|
<div className="bg-white rounded-xl shadow-xl w-full max-w-lg m-4" onClick={e => e.stopPropagation()}>
|
|
<div className="px-6 py-4 border-b">
|
|
<h3 className="text-lg font-bold text-gray-800">새 견적 작성</h3>
|
|
<p className="text-xs text-gray-400 mt-1">견적번호: {nextId}</p>
|
|
</div>
|
|
<div className="px-6 py-4 space-y-3">
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">현장명 *</label>
|
|
<input value={form.siteName} onChange={e => setForm({...form, siteName: e.target.value})}
|
|
className="w-full border rounded px-3 py-2 text-sm" placeholder="예: 세종시 신축 아파트" />
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">발주처 *</label>
|
|
<input value={form.client} onChange={e => setForm({...form, client: e.target.value})}
|
|
className="w-full border rounded px-3 py-2 text-sm" placeholder="예: 현대건설" />
|
|
</div>
|
|
<div className="grid grid-cols-2 gap-3">
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">마감일</label>
|
|
<input type="date" value={form.deadline} onChange={e => setForm({...form, deadline: e.target.value})}
|
|
className="w-full border rounded px-3 py-2 text-sm" />
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">견적 담당자</label>
|
|
<select value={form.estimator} onChange={e => setForm({...form, estimator: e.target.value})}
|
|
className="w-full border rounded px-3 py-2 text-sm">
|
|
<option value="박견적">박견적</option>
|
|
<option value="김영민">김영민</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="px-6 py-3 border-t flex justify-end gap-2">
|
|
<button onClick={onClose} className="px-4 py-2 bg-gray-100 text-gray-700 rounded text-sm hover:bg-gray-200">취소</button>
|
|
<button onClick={handleSave} className="px-4 py-2 bg-blue-600 text-white rounded text-sm hover:bg-blue-700">저장</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// --- 공사 상세 모달 ---
|
|
function ConstructionDetailModal({ con, onClose }) {
|
|
if (!con) return null;
|
|
return (
|
|
<div className="fixed inset-0 bg-black/40 flex items-center justify-center z-50" onClick={onClose}>
|
|
<div className="bg-white rounded-xl shadow-xl w-full max-w-3xl max-h-[85vh] overflow-y-auto m-4" onClick={e => e.stopPropagation()}>
|
|
<div className="px-6 py-4 border-b flex justify-between items-center">
|
|
<h3 className="text-lg font-bold text-gray-800">{con.siteName} - 공사관리</h3>
|
|
<button onClick={onClose} className="text-gray-400 hover:text-gray-600 text-xl">×</button>
|
|
</div>
|
|
<div className="px-6 py-4 space-y-4">
|
|
<div className="grid grid-cols-3 gap-4 text-sm">
|
|
<div><span className="text-gray-500">발주처:</span> <span className="font-medium">{con.client}</span></div>
|
|
<div><span className="text-gray-500">담당자:</span> <span className="font-medium">{con.manager}</span></div>
|
|
<div><span className="text-gray-500">상태:</span> <StatusBadge status={con.status} /></div>
|
|
<div><span className="text-gray-500">계약금액:</span> <span className="font-semibold text-emerald-600">{fmt(con.contractAmount)}원</span></div>
|
|
<div><span className="text-gray-500">집행액:</span> <span className="font-medium">{fmt(con.expenditure)}원</span></div>
|
|
<div><span className="text-gray-500">공기:</span> <span className="font-medium">{con.startDate} ~ {con.endDate}</span></div>
|
|
</div>
|
|
|
|
<div>
|
|
<h4 className="font-semibold text-gray-700 mb-2">전체 진행률</h4>
|
|
<div className="w-full bg-gray-200 rounded-full h-4">
|
|
<div className="bg-blue-500 h-4 rounded-full transition-all" style={{width: `${con.progress}%`}}></div>
|
|
</div>
|
|
<p className="text-right text-sm text-gray-500 mt-1">{con.progress}%</p>
|
|
</div>
|
|
|
|
<div>
|
|
<h4 className="font-semibold text-gray-700 mb-2">공정 현황</h4>
|
|
<table className="w-full text-sm">
|
|
<thead className="bg-gray-50">
|
|
<tr>
|
|
<th className="px-3 py-2 text-left">공정</th>
|
|
<th className="px-3 py-2 text-center">상태</th>
|
|
<th className="px-3 py-2 text-right">진행률</th>
|
|
<th className="px-3 py-2">진행바</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y">
|
|
{con.tasks.map((t, i) => (
|
|
<tr key={i}>
|
|
<td className="px-3 py-2">{t.name}</td>
|
|
<td className="px-3 py-2 text-center"><StatusBadge status={t.status === '완료' ? '인수완료' : t.status === '진행중' ? '시공중' : '결재대기'} /></td>
|
|
<td className="px-3 py-2 text-right">{t.progress}%</td>
|
|
<td className="px-3 py-2">
|
|
<div className="w-full bg-gray-200 rounded-full h-2">
|
|
<div className={`h-2 rounded-full ${t.progress === 100 ? 'bg-green-500' : t.progress > 0 ? 'bg-blue-500' : 'bg-gray-300'}`}
|
|
style={{width: `${t.progress}%`}}></div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<div className="px-6 py-3 border-t flex justify-end">
|
|
<button onClick={onClose} className="px-4 py-2 bg-gray-100 text-gray-700 rounded text-sm hover:bg-gray-200">닫기</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// --- 메인 앱 ---
|
|
function App() {
|
|
const [activeTab, setActiveTab] = useState('estimate');
|
|
const [role, setRole] = useState('ceo');
|
|
const [estimates, setEstimates] = useState(initialEstimates);
|
|
const [constructions] = useState(constructionData);
|
|
const [toast, setToast] = useState(null);
|
|
const [detailEst, setDetailEst] = useState(null);
|
|
const [detailCon, setDetailCon] = useState(null);
|
|
const [showNewForm, setShowNewForm] = useState(false);
|
|
|
|
const showToast = (msg) => { setToast(msg); };
|
|
|
|
const summary = useMemo(() => {
|
|
const total = estimates.length;
|
|
const waiting = estimates.filter(e => e.status === '결재대기').length;
|
|
const bidding = estimates.filter(e => e.status === '입찰진행').length;
|
|
const won = estimates.filter(e => ['낙찰', '인수완료', '계약완료'].includes(e.status)).length;
|
|
const totalContract = estimates.reduce((s, e) => s + (e.contractAmount || 0), 0);
|
|
return { total, waiting, bidding, won, totalContract };
|
|
}, [estimates]);
|
|
|
|
const canApprove = role === 'ceo';
|
|
const canEstimate = role === 'estimator' || role === 'ceo';
|
|
const canManage = role === 'manager' || role === 'ceo';
|
|
|
|
const changeStatus = (id, newStatus) => {
|
|
setEstimates(prev => prev.map(e => {
|
|
if (e.id !== id) return e;
|
|
const log = { date: new Date().toISOString().slice(0, 10), content: `상태 변경: ${e.status} → ${newStatus}`, author: roles.find(r => r.value === role).label.split(' (')[0] };
|
|
return { ...e, status: newStatus, logs: [...e.logs, log] };
|
|
}));
|
|
showToast(`${id} → ${newStatus}`);
|
|
};
|
|
|
|
const handleNewEstimate = (form) => {
|
|
const num = estimates.length + 1;
|
|
const newEst = {
|
|
id: `EST-2024-${String(num).padStart(3, '0')}`,
|
|
siteName: form.siteName,
|
|
client: form.client,
|
|
status: '현장설명회',
|
|
estimateAmount: null,
|
|
contractAmount: null,
|
|
deadline: form.deadline || '-',
|
|
manager: null,
|
|
estimator: form.estimator,
|
|
items: [],
|
|
logs: [{ date: new Date().toISOString().slice(0, 10), content: '견적 등록', author: form.estimator }],
|
|
};
|
|
setEstimates(prev => [...prev, newEst]);
|
|
setShowNewForm(false);
|
|
showToast(`${newEst.id} 견적이 등록되었습니다.`);
|
|
};
|
|
|
|
const renderActions = (est) => {
|
|
switch (est.status) {
|
|
case '현장설명회':
|
|
return canEstimate
|
|
? <button onClick={() => changeStatus(est.id, '결재대기')} className="px-3 py-1 bg-yellow-500 text-white rounded text-xs hover:bg-yellow-600">견적작성</button>
|
|
: <span className="text-xs text-gray-400">권한 없음</span>;
|
|
case '결재대기':
|
|
return canApprove
|
|
? <button onClick={() => changeStatus(est.id, '입찰진행')} className="px-3 py-1 bg-blue-500 text-white rounded text-xs hover:bg-blue-600">결재</button>
|
|
: <span className="text-xs text-gray-400">결재 대기중</span>;
|
|
case '입찰진행':
|
|
return canApprove ? (
|
|
<div className="flex gap-1 justify-center">
|
|
<button onClick={() => changeStatus(est.id, '인수완료')} className="px-2 py-1 bg-green-500 text-white rounded text-xs hover:bg-green-600">낙찰</button>
|
|
<button onClick={() => changeStatus(est.id, '유찰')} className="px-2 py-1 bg-red-400 text-white rounded text-xs hover:bg-red-500">유찰</button>
|
|
</div>
|
|
) : <span className="text-xs text-gray-400">입찰 진행중</span>;
|
|
case '인수완료':
|
|
case '계약완료':
|
|
return canManage
|
|
? <button onClick={() => { setActiveTab('construction'); showToast('공사관리 탭으로 이동합니다.'); }} className="px-3 py-1 bg-emerald-500 text-white rounded text-xs hover:bg-emerald-600">공사관리</button>
|
|
: <span className="text-xs text-gray-400">공사 진행중</span>;
|
|
case '유찰':
|
|
return <span className="text-xs text-gray-400">종료</span>;
|
|
default:
|
|
return null;
|
|
}
|
|
};
|
|
|
|
const conSummary = useMemo(() => {
|
|
const total = constructions.length;
|
|
const inProgress = constructions.filter(c => c.status === '시공중').length;
|
|
const totalContract = constructions.reduce((s, c) => s + c.contractAmount, 0);
|
|
const totalSpent = constructions.reduce((s, c) => s + c.expenditure, 0);
|
|
const avgProgress = constructions.length > 0 ? Math.round(constructions.reduce((s, c) => s + c.progress, 0) / constructions.length) : 0;
|
|
return { total, inProgress, totalContract, totalSpent, avgProgress };
|
|
}, [constructions]);
|
|
|
|
return (
|
|
<div className="min-h-full w-full">
|
|
<div className="min-h-screen bg-gray-100">
|
|
{/* 헤더 */}
|
|
<header className="bg-white border-b shadow-sm">
|
|
<div className="max-w-7xl mx-auto px-6 py-3 flex justify-between items-center">
|
|
<h1 className="text-lg font-bold text-gray-800">주일기업 MES</h1>
|
|
<select value={role} onChange={e => { setRole(e.target.value); showToast(`${roles.find(r => r.value === e.target.value).label}(으)로 전환`); }}
|
|
className="border rounded px-3 py-1.5 text-sm bg-white">
|
|
{roles.map(r => <option key={r.value} value={r.value}>{r.label}</option>)}
|
|
</select>
|
|
</div>
|
|
</header>
|
|
|
|
{/* 네비게이션 */}
|
|
<nav className="bg-white border-b">
|
|
<div className="max-w-7xl mx-auto px-6 flex">
|
|
<button onClick={() => setActiveTab('estimate')}
|
|
className={`px-4 py-3 text-sm font-medium border-b-2 ${activeTab === 'estimate' ? 'border-blue-500 text-blue-600' : 'border-transparent text-gray-500 hover:text-gray-700'}`}>
|
|
견적/입찰 현황
|
|
</button>
|
|
<button onClick={() => setActiveTab('construction')}
|
|
className={`px-4 py-3 text-sm font-medium border-b-2 ${activeTab === 'construction' ? 'border-blue-500 text-blue-600' : 'border-transparent text-gray-500 hover:text-gray-700'}`}>
|
|
공사 관리
|
|
</button>
|
|
</div>
|
|
</nav>
|
|
|
|
<main className="max-w-7xl mx-auto px-6 py-6">
|
|
{/* 견적/입찰 현황 탭 */}
|
|
{activeTab === 'estimate' && (
|
|
<div className="space-y-4">
|
|
<div className="grid grid-cols-5 gap-4">
|
|
<div className="bg-white rounded-lg border p-4">
|
|
<p className="text-sm text-gray-500 mb-1">전체 견적</p>
|
|
<p className="text-2xl font-bold text-gray-800">{summary.total}건</p>
|
|
</div>
|
|
<div className="bg-white rounded-lg border p-4">
|
|
<p className="text-sm text-gray-500 mb-1">결재 대기</p>
|
|
<p className="text-2xl font-bold text-yellow-500">{summary.waiting}건</p>
|
|
</div>
|
|
<div className="bg-white rounded-lg border p-4">
|
|
<p className="text-sm text-gray-500 mb-1">입찰 진행</p>
|
|
<p className="text-2xl font-bold text-green-500">{summary.bidding}건</p>
|
|
</div>
|
|
<div className="bg-white rounded-lg border p-4">
|
|
<p className="text-sm text-gray-500 mb-1">낙찰/계약</p>
|
|
<p className="text-2xl font-bold text-purple-500">{summary.won}건</p>
|
|
</div>
|
|
<div className="bg-white rounded-lg border p-4">
|
|
<p className="text-sm text-gray-500 mb-1">수주 금액</p>
|
|
<p className="text-2xl font-bold text-blue-500">
|
|
{summary.totalContract >= 100000000
|
|
? (summary.totalContract / 100000000).toFixed(1) + '억'
|
|
: (summary.totalContract / 10000000).toFixed(1) + '천만'}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="bg-white rounded-lg shadow-sm border">
|
|
<div className="px-6 py-4 border-b flex justify-between items-center">
|
|
<div className="flex items-center gap-2">
|
|
<h2 className="text-base font-semibold text-gray-800">견적/입찰 현황</h2>
|
|
</div>
|
|
{canEstimate && (
|
|
<button onClick={() => setShowNewForm(true)}
|
|
className="px-4 py-2 bg-blue-600 text-white rounded text-sm font-medium hover:bg-blue-700">
|
|
+ 새 견적 작성
|
|
</button>
|
|
)}
|
|
</div>
|
|
<div className="overflow-x-auto">
|
|
<table className="w-full">
|
|
<thead className="bg-gray-50">
|
|
<tr>
|
|
<th className="px-4 py-3 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">견적번호</th>
|
|
<th className="px-4 py-3 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">현장명</th>
|
|
<th className="px-4 py-3 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">발주처</th>
|
|
<th className="px-4 py-3 text-center text-xs font-semibold text-gray-600 uppercase tracking-wider">상태</th>
|
|
<th className="px-4 py-3 text-right text-xs font-semibold text-gray-600 uppercase tracking-wider">견적금액</th>
|
|
<th className="px-4 py-3 text-right text-xs font-semibold text-gray-600 uppercase tracking-wider">계약금액</th>
|
|
<th className="px-4 py-3 text-center text-xs font-semibold text-gray-600 uppercase tracking-wider">마감일</th>
|
|
<th className="px-4 py-3 text-center text-xs font-semibold text-gray-600 uppercase tracking-wider">액션</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y divide-gray-100">
|
|
{estimates.map(est => (
|
|
<tr key={est.id} className="hover:bg-gray-50">
|
|
<td className="px-4 py-4 text-sm font-medium text-gray-700">{est.id}</td>
|
|
<td className="px-4 py-4">
|
|
<button onClick={() => setDetailEst(est)}
|
|
className="text-sm font-medium text-blue-600 hover:text-blue-800 hover:underline text-left">
|
|
{est.siteName}
|
|
</button>
|
|
</td>
|
|
<td className="px-4 py-4 text-sm text-gray-600">{est.client}</td>
|
|
<td className="px-4 py-4 text-center"><StatusBadge status={est.status} /></td>
|
|
<td className="px-4 py-4 text-sm text-right font-medium text-gray-800">{fmt(est.estimateAmount)}</td>
|
|
<td className="px-4 py-4 text-sm text-right font-semibold text-emerald-600">{fmt(est.contractAmount)}</td>
|
|
<td className="px-4 py-4 text-sm text-center text-gray-500">{est.deadline}</td>
|
|
<td className="px-4 py-4 text-center">{renderActions(est)}</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* 공사 관리 탭 */}
|
|
{activeTab === 'construction' && (
|
|
<div className="space-y-4">
|
|
<div className="grid grid-cols-5 gap-4">
|
|
<div className="bg-white rounded-lg border p-4">
|
|
<p className="text-sm text-gray-500 mb-1">전체 공사</p>
|
|
<p className="text-2xl font-bold text-gray-800">{conSummary.total}건</p>
|
|
</div>
|
|
<div className="bg-white rounded-lg border p-4">
|
|
<p className="text-sm text-gray-500 mb-1">시공중</p>
|
|
<p className="text-2xl font-bold text-cyan-500">{conSummary.inProgress}건</p>
|
|
</div>
|
|
<div className="bg-white rounded-lg border p-4">
|
|
<p className="text-sm text-gray-500 mb-1">평균 진행률</p>
|
|
<p className="text-2xl font-bold text-blue-500">{conSummary.avgProgress}%</p>
|
|
</div>
|
|
<div className="bg-white rounded-lg border p-4">
|
|
<p className="text-sm text-gray-500 mb-1">계약 합계</p>
|
|
<p className="text-2xl font-bold text-emerald-500">{(conSummary.totalContract / 10000000).toFixed(1)}천만</p>
|
|
</div>
|
|
<div className="bg-white rounded-lg border p-4">
|
|
<p className="text-sm text-gray-500 mb-1">집행액 합계</p>
|
|
<p className="text-2xl font-bold text-orange-500">{(conSummary.totalSpent / 10000000).toFixed(1)}천만</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="bg-white rounded-lg shadow-sm border">
|
|
<div className="px-6 py-4 border-b flex items-center gap-2">
|
|
<h2 className="text-base font-semibold text-gray-800">공사 현황</h2>
|
|
</div>
|
|
<div className="overflow-x-auto">
|
|
<table className="w-full">
|
|
<thead className="bg-gray-50">
|
|
<tr>
|
|
<th className="px-4 py-3 text-left text-xs font-semibold text-gray-600 uppercase">공사번호</th>
|
|
<th className="px-4 py-3 text-left text-xs font-semibold text-gray-600 uppercase">현장명</th>
|
|
<th className="px-4 py-3 text-left text-xs font-semibold text-gray-600 uppercase">발주처</th>
|
|
<th className="px-4 py-3 text-center text-xs font-semibold text-gray-600 uppercase">상태</th>
|
|
<th className="px-4 py-3 text-center text-xs font-semibold text-gray-600 uppercase">진행률</th>
|
|
<th className="px-4 py-3 text-right text-xs font-semibold text-gray-600 uppercase">계약금액</th>
|
|
<th className="px-4 py-3 text-right text-xs font-semibold text-gray-600 uppercase">집행액</th>
|
|
<th className="px-4 py-3 text-center text-xs font-semibold text-gray-600 uppercase">공기</th>
|
|
<th className="px-4 py-3 text-center text-xs font-semibold text-gray-600 uppercase">담당자</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y divide-gray-100">
|
|
{constructions.map(con => (
|
|
<tr key={con.id} className="hover:bg-gray-50 cursor-pointer" onClick={() => setDetailCon(con)}>
|
|
<td className="px-4 py-4 text-sm font-medium text-gray-700">{con.id}</td>
|
|
<td className="px-4 py-4">
|
|
<span className="text-sm font-medium text-blue-600 hover:underline">{con.siteName}</span>
|
|
</td>
|
|
<td className="px-4 py-4 text-sm text-gray-600">{con.client}</td>
|
|
<td className="px-4 py-4 text-center"><StatusBadge status={con.status} /></td>
|
|
<td className="px-4 py-4">
|
|
<div className="flex items-center gap-2">
|
|
<div className="flex-1 bg-gray-200 rounded-full h-2">
|
|
<div className="bg-blue-500 h-2 rounded-full" style={{width: `${con.progress}%`}}></div>
|
|
</div>
|
|
<span className="text-xs text-gray-500 w-8">{con.progress}%</span>
|
|
</div>
|
|
</td>
|
|
<td className="px-4 py-4 text-sm text-right font-medium text-gray-800">{fmt(con.contractAmount)}</td>
|
|
<td className="px-4 py-4 text-sm text-right text-orange-600 font-medium">{fmt(con.expenditure)}</td>
|
|
<td className="px-4 py-4 text-xs text-center text-gray-500">{con.startDate}<br/>~ {con.endDate}</td>
|
|
<td className="px-4 py-4 text-sm text-center text-gray-600">{con.manager}</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</main>
|
|
</div>
|
|
|
|
{/* 모달 */}
|
|
{detailEst && <EstimateDetailModal est={detailEst} onClose={() => setDetailEst(null)} />}
|
|
{detailCon && <ConstructionDetailModal con={detailCon} onClose={() => setDetailCon(null)} />}
|
|
{showNewForm && <NewEstimateModal onClose={() => setShowNewForm(false)} onSave={handleNewEstimate} nextId={`EST-2024-${String(estimates.length + 1).padStart(3, '0')}`} />}
|
|
{toast && <InlineToast message={toast} onClose={() => setToast(null)} />}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
ReactDOM.createRoot(document.getElementById('root')).render(<App />);
|
|
@endverbatim
|
|
</script>
|
|
@endpush
|