@extends('layouts.app')

@section('title', '견적/입찰/공사관리')

@section('content')
<div id="root"></div>
@endsection

@push('scripts')
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<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">&times;</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">&times;</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