2102f4a398
- 자료실 하위 3개 메뉴: 자료보관함, 매뉴얼, 공지사항 - 자료보관함: 폴더 트리 + 파일 업로드/다운로드/삭제 - 매뉴얼/공지사항: 게시판형 CRUD + 첨부파일 - 안전관리: 안전보건교육, TBM현황, 위험성평가, 재해예방조치 - 품질관리: 시정조치 UI 페이지 - 대시보드: 슈퍼관리자 전용 레거시 사이트 참고 카드 - 작업일보/출면일보 오류 수정 및 기능 개선 - 설비 사진 업로드, 근로계약서 종료일 수정
616 lines
33 KiB
PHP
616 lines
33 KiB
PHP
@extends('layouts.app')
|
|
|
|
@section('title', '공사량관리 - 건설PMIS')
|
|
|
|
@section('content')
|
|
<div id="root"></div>
|
|
@endsection
|
|
|
|
@push('scripts')
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<link href="https://cdn.jsdelivr.net/npm/remixicon@4.2.0/fonts/remixicon.css" rel="stylesheet" />
|
|
@include('partials.react-cdn')
|
|
<script type="text/babel">
|
|
@verbatim
|
|
const { useState, useEffect, useRef, useCallback, useMemo } = React;
|
|
|
|
const API_BASE = '/juil/construction-pmis/api';
|
|
const CSRF = document.querySelector('meta[name="csrf-token"]')?.content || '';
|
|
|
|
async function api(path, opts = {}) {
|
|
const res = await fetch(`${API_BASE}${path}`, {
|
|
headers: {
|
|
'Accept': 'application/json',
|
|
'Content-Type': 'application/json',
|
|
'X-CSRF-TOKEN': CSRF,
|
|
...opts.headers,
|
|
},
|
|
...opts,
|
|
});
|
|
if (!res.ok) {
|
|
const err = await res.json().catch(() => ({}));
|
|
throw new Error(err.message || `HTTP ${res.status}`);
|
|
}
|
|
return res.json();
|
|
}
|
|
|
|
/* ════════════════════════════════════════════════
|
|
PMIS 사이드바
|
|
════════════════════════════════════════════════ */
|
|
const PMIS_MENUS = [
|
|
{ icon: 'ri-building-2-line', label: 'BIM 관리', id: 'bim', children: [
|
|
{ label: 'BIM 뷰어', id: 'bim-viewer', url: '/juil/construction-pmis/bim-viewer' },
|
|
]},
|
|
{ icon: 'ri-line-chart-line', label: '시공관리', id: 'construction', children: [
|
|
{ label: '인원관리', id: 'workforce', url: '/juil/construction-pmis/workforce' },
|
|
{ label: '장비관리', id: 'equipment', url: '/juil/construction-pmis/equipment' },
|
|
{ label: '자재관리', id: 'materials', url: '/juil/construction-pmis/materials' },
|
|
{ label: '공사량관리', id: 'work-volume', url: '/juil/construction-pmis/work-volume' },
|
|
{ label: '출면일보', id: 'daily-attendance', url: '/juil/construction-pmis/daily-attendance' },
|
|
{ label: '작업일보', id: 'daily-report', url: '/juil/construction-pmis/daily-report' },
|
|
]},
|
|
{ icon: 'ri-file-list-3-line', label: '품질관리', id: 'quality', children: [
|
|
{ label: '시정조치', id: 'corrective-action', url: '/juil/construction-pmis/corrective-action' },
|
|
]},
|
|
{ icon: 'ri-shield-check-line', label: '안전관리', id: 'safety', children: [
|
|
{ label: '안전보건교육', id: 'safety-education', url: '/juil/construction-pmis/safety-education' },
|
|
{ label: 'TBM현장', id: 'tbm', url: '/juil/construction-pmis/tbm' },
|
|
{ label: '위험성 평가', id: 'risk-assessment', url: '/juil/construction-pmis/risk-assessment' },
|
|
{ label: '재해예방조치', id: 'disaster-prevention', url: '/juil/construction-pmis/disaster-prevention' },
|
|
]},
|
|
{ icon: 'ri-folder-line', label: '자료실', id: 'archive', children: [
|
|
{ label: '자료보관함', id: 'archive-files', url: '/juil/construction-pmis/archive-files' },
|
|
{ label: '매뉴얼', id: 'archive-manual', url: '/juil/construction-pmis/archive-manual' },
|
|
{ label: '공지사항', id: 'archive-notice', url: '/juil/construction-pmis/archive-notice' },
|
|
]},
|
|
];
|
|
|
|
function PmisSidebar({ activePage }) {
|
|
const [profile, setProfile] = useState(null);
|
|
const [expanded, setExpanded] = useState(() => {
|
|
for (const m of PMIS_MENUS) {
|
|
if (m.children?.some(c => c.id === activePage)) return m.id;
|
|
}
|
|
return null;
|
|
});
|
|
|
|
useEffect(() => {
|
|
fetch('/juil/construction-pmis/profile', { headers: { Accept: 'application/json' } })
|
|
.then(r => r.json()).then(d => setProfile(d.worker)).catch(() => {});
|
|
}, []);
|
|
|
|
return (
|
|
<div className="bg-white border-r border-gray-200 shadow-sm flex flex-col shrink-0" style={{ width: 200 }}>
|
|
<a href="/juil/construction-pmis" className="flex items-center gap-2 px-4 py-3 text-sm text-blue-600 hover:bg-blue-50 border-b border-gray-100 transition">
|
|
<i className="ri-arrow-left-s-line text-lg"></i> PMIS 대시보드
|
|
</a>
|
|
<div className="p-3 border-b border-gray-100 text-center">
|
|
<div className="w-12 h-12 mx-auto mb-1 rounded-full bg-gray-100 border-2 border-gray-200 flex items-center justify-center">
|
|
{profile?.profile_photo_path
|
|
? <img src={profile.profile_photo_path} className="w-full h-full rounded-full object-cover" />
|
|
: <i className="ri-user-3-line text-xl text-gray-300"></i>}
|
|
</div>
|
|
<div className="text-sm font-bold text-gray-800">{profile?.name || '...'}</div>
|
|
<div className="text-xs text-gray-500 mt-0.5">{profile?.department || ''}</div>
|
|
</div>
|
|
<div className="flex-1 overflow-auto py-1">
|
|
{PMIS_MENUS.map(m => (
|
|
<div key={m.id}>
|
|
<div
|
|
onClick={() => setExpanded(expanded === m.id ? null : m.id)}
|
|
className={`flex items-center gap-2 px-4 py-2.5 text-sm cursor-pointer transition ${expanded === m.id ? 'bg-blue-50 text-blue-700 font-semibold' : 'text-gray-600 hover:bg-gray-50'}`}>
|
|
<i className={`${m.icon} text-base`}></i> {m.label}
|
|
<i className={`ml-auto ${expanded === m.id ? 'ri-arrow-down-s-line' : 'ri-arrow-right-s-line'} text-gray-400 text-xs`}></i>
|
|
</div>
|
|
{expanded === m.id && m.children?.map(c => (
|
|
<a key={c.id} href={c.url}
|
|
className={`block pl-10 pr-4 py-2 text-sm transition ${c.id === activePage ? 'bg-blue-100 text-blue-800 font-semibold border-l-2 border-blue-600' : 'text-gray-500 hover:text-blue-600 hover:bg-gray-50'}`}>
|
|
{c.label}
|
|
</a>
|
|
))}
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
/* ════════════════════════════════════════════════
|
|
공사량정보 모달 (추가/수정)
|
|
════════════════════════════════════════════════ */
|
|
function WorkVolumeModal({ open, onClose, onSaved, workVolume }) {
|
|
const isEdit = !!workVolume?.id;
|
|
const [form, setForm] = useState({
|
|
work_type: '', sub_work_type: '', unit: '', design_quantity: '',
|
|
});
|
|
const [saving, setSaving] = useState(false);
|
|
const [error, setError] = useState('');
|
|
|
|
useEffect(() => {
|
|
if (open) {
|
|
if (workVolume) {
|
|
setForm({
|
|
work_type: workVolume.work_type || '',
|
|
sub_work_type: workVolume.sub_work_type || '',
|
|
unit: workVolume.unit || '',
|
|
design_quantity: workVolume.design_quantity ?? '',
|
|
});
|
|
} else {
|
|
setForm({ work_type: '', sub_work_type: '', unit: '', design_quantity: '' });
|
|
}
|
|
setError('');
|
|
}
|
|
}, [open, workVolume]);
|
|
|
|
const set = (k, v) => setForm(f => ({ ...f, [k]: v }));
|
|
|
|
async function handleSubmit(e) {
|
|
e.preventDefault();
|
|
setSaving(true);
|
|
setError('');
|
|
try {
|
|
const body = { ...form };
|
|
body.design_quantity = body.design_quantity ? parseFloat(body.design_quantity) : 0;
|
|
|
|
if (isEdit) {
|
|
await api(`/work-volumes/${workVolume.id}`, { method: 'PUT', body: JSON.stringify(body) });
|
|
} else {
|
|
await api('/work-volumes', { method: 'POST', body: JSON.stringify(body) });
|
|
}
|
|
onSaved();
|
|
onClose();
|
|
} catch (err) {
|
|
setError(err.message);
|
|
} finally {
|
|
setSaving(false);
|
|
}
|
|
}
|
|
|
|
async function handleDelete() {
|
|
if (!isEdit) return;
|
|
if (!confirm('정말 삭제하시겠습니까?')) return;
|
|
try {
|
|
await api(`/work-volumes/${workVolume.id}`, { method: 'DELETE' });
|
|
onSaved();
|
|
onClose();
|
|
} catch (err) {
|
|
setError(err.message);
|
|
}
|
|
}
|
|
|
|
if (!open) return null;
|
|
|
|
return (
|
|
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40" onClick={onClose}>
|
|
<div className="bg-white rounded-xl shadow-2xl w-full max-w-md mx-4" onClick={e => e.stopPropagation()}>
|
|
<div className="flex items-center justify-between px-6 py-4 border-b border-gray-200">
|
|
<h2 className="text-lg font-bold text-gray-800">공사량정보</h2>
|
|
<button onClick={onClose} className="text-gray-400 hover:text-gray-600">
|
|
<i className="ri-close-line text-xl"></i>
|
|
</button>
|
|
</div>
|
|
<form onSubmit={handleSubmit} className="p-6 space-y-4">
|
|
{error && (
|
|
<div className="bg-red-50 border border-red-200 text-red-700 px-4 py-2 rounded text-sm">{error}</div>
|
|
)}
|
|
|
|
{/* 공종 */}
|
|
<div className="flex items-center gap-4">
|
|
<label className="shrink-0 text-sm font-medium text-gray-700" style={{width: 80}}>공종 <span className="text-red-500">*</span></label>
|
|
<input type="text" value={form.work_type} onChange={e => set('work_type', e.target.value)}
|
|
required className="flex-1 border border-gray-300 rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500" />
|
|
</div>
|
|
|
|
{/* 세부공종 */}
|
|
<div className="flex items-center gap-4">
|
|
<label className="shrink-0 text-sm font-medium text-gray-700" style={{width: 80}}>세부공종 <span className="text-red-500">*</span></label>
|
|
<input type="text" value={form.sub_work_type} onChange={e => set('sub_work_type', e.target.value)}
|
|
required className="flex-1 border border-gray-300 rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500" />
|
|
</div>
|
|
|
|
{/* 단위 */}
|
|
<div className="flex items-center gap-4">
|
|
<label className="shrink-0 text-sm font-medium text-gray-700" style={{width: 80}}>단위 <span className="text-red-500">*</span></label>
|
|
<input type="text" value={form.unit} onChange={e => set('unit', e.target.value)}
|
|
required className="border border-gray-300 rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500" style={{width: 120}} />
|
|
</div>
|
|
|
|
{/* 설계량 */}
|
|
<div className="flex items-center gap-4">
|
|
<label className="shrink-0 text-sm font-medium text-gray-700" style={{width: 80}}>설계량</label>
|
|
<input type="number" step="0.01" min="0" value={form.design_quantity} onChange={e => set('design_quantity', e.target.value)}
|
|
className="border border-gray-300 rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500" style={{width: 160}} />
|
|
</div>
|
|
|
|
{/* 버튼 */}
|
|
<div className="flex justify-end gap-2 pt-3">
|
|
{isEdit && (
|
|
<button type="button" onClick={handleDelete}
|
|
className="px-4 py-2 text-sm text-red-600 bg-white border border-gray-300 hover:bg-red-50 rounded-lg">삭제</button>
|
|
)}
|
|
<button type="button" onClick={onClose}
|
|
className="px-4 py-2 text-sm text-gray-700 bg-white border border-gray-300 hover:bg-gray-50 rounded-lg">닫기</button>
|
|
<button type="submit" disabled={saving}
|
|
className="px-6 py-2 text-sm font-semibold text-white bg-blue-600 hover:bg-blue-700 rounded-lg disabled:opacity-50">
|
|
{saving ? '저장 중...' : '저장'}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
/* ════════════════════════════════════════════════
|
|
탭 1: 공사량
|
|
════════════════════════════════════════════════ */
|
|
function TabWorkVolume() {
|
|
const [items, setItems] = useState([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [pagination, setPagination] = useState({ current_page: 1, last_page: 1, total: 0, per_page: 15 });
|
|
|
|
const [search, setSearch] = useState('');
|
|
const [filterCompany, setFilterCompany] = useState('');
|
|
const [perPage, setPerPage] = useState(15);
|
|
const [page, setPage] = useState(1);
|
|
|
|
const [modalOpen, setModalOpen] = useState(false);
|
|
const [editItem, setEditItem] = useState(null);
|
|
const [selected, setSelected] = useState(new Set());
|
|
|
|
const fetchItems = useCallback(async () => {
|
|
setLoading(true);
|
|
try {
|
|
const params = new URLSearchParams();
|
|
params.set('page', page);
|
|
params.set('per_page', perPage);
|
|
if (search) params.set('search', search);
|
|
const data = await api(`/work-volumes?${params}`);
|
|
setItems(data.data);
|
|
setPagination({
|
|
current_page: data.current_page,
|
|
last_page: data.last_page,
|
|
total: data.total,
|
|
per_page: data.per_page,
|
|
});
|
|
} catch {}
|
|
setLoading(false);
|
|
}, [page, perPage, search]);
|
|
|
|
useEffect(() => { fetchItems(); }, [fetchItems]);
|
|
|
|
function handleSearch() { setPage(1); fetchItems(); }
|
|
function handleAdd() { setEditItem(null); setModalOpen(true); }
|
|
function handleEdit(item) { setEditItem(item); setModalOpen(true); }
|
|
|
|
/* 번개 랜덤 데이터 */
|
|
const WORK_TYPES = [
|
|
{ work_type: '토공사', sub_work_type: '터파기', unit: 'm3' },
|
|
{ work_type: '토공사', sub_work_type: '되메우기', unit: 'm3' },
|
|
{ work_type: '토공사', sub_work_type: '잔토처리', unit: 'm3' },
|
|
{ work_type: '철근콘크리트공사', sub_work_type: '거푸집', unit: 'm2' },
|
|
{ work_type: '철근콘크리트공사', sub_work_type: '철근가공조립', unit: 'ton' },
|
|
{ work_type: '철근콘크리트공사', sub_work_type: '콘크리트타설', unit: 'm3' },
|
|
{ work_type: '철골공사', sub_work_type: '철골제작', unit: 'ton' },
|
|
{ work_type: '철골공사', sub_work_type: '철골설치', unit: 'ton' },
|
|
{ work_type: '방수공사', sub_work_type: '도막방수', unit: 'm2' },
|
|
{ work_type: '방수공사', sub_work_type: '시트방수', unit: 'm2' },
|
|
{ work_type: '미장공사', sub_work_type: '시멘트모르타르', unit: 'm2' },
|
|
{ work_type: '미장공사', sub_work_type: '자기질타일', unit: 'm2' },
|
|
{ work_type: '도장공사', sub_work_type: '수성페인트', unit: 'm2' },
|
|
{ work_type: '도장공사', sub_work_type: '유성페인트', unit: 'm2' },
|
|
{ work_type: '조적공사', sub_work_type: '시멘트벽돌쌓기', unit: 'm2' },
|
|
{ work_type: '조적공사', sub_work_type: '블록쌓기', unit: 'm2' },
|
|
{ work_type: '단열공사', sub_work_type: '압출법보온판', unit: 'm2' },
|
|
{ work_type: '단열공사', sub_work_type: '비드법보온판', unit: 'm2' },
|
|
{ work_type: '창호공사', sub_work_type: '알루미늄창호', unit: '조' },
|
|
{ work_type: '창호공사', sub_work_type: 'PVC창호', unit: '조' },
|
|
{ work_type: '지붕공사', sub_work_type: '금속기와', unit: 'm2' },
|
|
{ work_type: '지붕공사', sub_work_type: '아스팔트슁글', unit: 'm2' },
|
|
{ work_type: '설비공사', sub_work_type: '급수배관', unit: 'm' },
|
|
{ work_type: '설비공사', sub_work_type: '배수배관', unit: 'm' },
|
|
{ work_type: '전기공사', sub_work_type: '전선관배선', unit: 'm' },
|
|
{ work_type: '전기공사', sub_work_type: '조명설치', unit: '개' },
|
|
];
|
|
|
|
function randomWorkVolumeData() {
|
|
const pick = arr => arr[Math.floor(Math.random() * arr.length)];
|
|
const base = pick(WORK_TYPES);
|
|
return {
|
|
work_type: base.work_type,
|
|
sub_work_type: base.sub_work_type,
|
|
unit: base.unit,
|
|
design_quantity: String(Math.floor(Math.random() * 5000) + 50),
|
|
};
|
|
}
|
|
|
|
function handleQuickAdd() {
|
|
setEditItem(randomWorkVolumeData());
|
|
setModalOpen(true);
|
|
}
|
|
|
|
async function handleBulkDelete() {
|
|
if (selected.size === 0) return;
|
|
if (!confirm(`선택한 ${selected.size}건을 삭제하시겠습니까?`)) return;
|
|
for (const id of selected) {
|
|
try { await api(`/work-volumes/${id}`, { method: 'DELETE' }); } catch {}
|
|
}
|
|
setSelected(new Set());
|
|
fetchItems();
|
|
}
|
|
|
|
/* 일보적용 토글 저장 */
|
|
async function handleToggleDailyReport(item) {
|
|
try {
|
|
await api(`/work-volumes/${item.id}`, {
|
|
method: 'PUT',
|
|
body: JSON.stringify({ daily_report_applied: !item.daily_report_applied }),
|
|
});
|
|
fetchItems();
|
|
} catch {}
|
|
}
|
|
|
|
/* 일괄 저장 (일보적용 변경분) */
|
|
async function handleSaveAll() {
|
|
alert('일보적용 상태가 저장되었습니다.');
|
|
}
|
|
|
|
function toggleSelect(id) {
|
|
setSelected(prev => { const s = new Set(prev); s.has(id) ? s.delete(id) : s.add(id); return s; });
|
|
}
|
|
function toggleAll() {
|
|
setSelected(items.length > 0 && selected.size === items.length ? new Set() : new Set(items.map(m => m.id)));
|
|
}
|
|
|
|
const pageNumbers = useMemo(() => {
|
|
const pages = [];
|
|
const start = Math.max(1, pagination.current_page - 2);
|
|
const end = Math.min(pagination.last_page, pagination.current_page + 2);
|
|
for (let i = start; i <= end; i++) pages.push(i);
|
|
return pages;
|
|
}, [pagination]);
|
|
|
|
return (
|
|
<div>
|
|
<WorkVolumeModal
|
|
open={modalOpen}
|
|
onClose={() => setModalOpen(false)}
|
|
onSaved={fetchItems}
|
|
workVolume={editItem}
|
|
/>
|
|
|
|
{/* 필터 바 */}
|
|
<div className="flex flex-wrap items-center gap-2 mb-4">
|
|
<select value={filterCompany} onChange={e => setFilterCompany(e.target.value)}
|
|
className="border border-gray-300 rounded px-3 py-1.5 text-sm bg-white">
|
|
<option value="">업체 전체</option>
|
|
</select>
|
|
<input type="text" placeholder="상세검색" value={search}
|
|
onChange={e => setSearch(e.target.value)}
|
|
onKeyDown={e => e.key === 'Enter' && handleSearch()}
|
|
className="border border-gray-300 rounded px-3 py-1.5 text-sm" style={{width: 160}} />
|
|
<button onClick={handleSearch} className="bg-blue-600 text-white px-4 py-1.5 rounded text-sm font-semibold hover:bg-blue-700">검색</button>
|
|
<div className="ml-auto flex items-center gap-2">
|
|
<button onClick={handleAdd} className="bg-blue-600 text-white px-4 py-1.5 rounded text-sm font-semibold hover:bg-blue-700">
|
|
추가
|
|
</button>
|
|
<button onClick={handleQuickAdd} className="bg-amber-500 text-white px-3 py-1.5 rounded text-sm font-semibold hover:bg-amber-600" title="랜덤 데이터로 추가">
|
|
<i className="ri-flashlight-line"></i>
|
|
</button>
|
|
<button onClick={handleSaveAll} className="bg-blue-600 text-white px-4 py-1.5 rounded text-sm font-semibold hover:bg-blue-700">
|
|
저장
|
|
</button>
|
|
{selected.size > 0 && (
|
|
<button onClick={handleBulkDelete} className="bg-red-500 text-white px-3 py-1.5 rounded text-sm hover:bg-red-600">
|
|
삭제 ({selected.size})
|
|
</button>
|
|
)}
|
|
<button className="flex items-center gap-1 border border-gray-300 rounded px-3 py-1.5 text-sm text-gray-700 hover:bg-gray-50">
|
|
<i className="ri-file-excel-2-line text-green-600"></i> Excel 업로드
|
|
</button>
|
|
<button className="flex items-center gap-1 border border-gray-300 rounded px-3 py-1.5 text-sm text-gray-700 hover:bg-gray-50">
|
|
<i className="ri-file-excel-2-line text-green-600"></i> Excel 다운로드
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 테이블 */}
|
|
<div className="overflow-x-auto border border-gray-200 rounded-lg">
|
|
<table className="w-full text-sm">
|
|
<thead className="bg-gray-50 border-b border-gray-200">
|
|
<tr>
|
|
<th className="px-3 py-2.5 text-left font-semibold text-gray-600 whitespace-nowrap">
|
|
<input type="checkbox" checked={items.length > 0 && selected.size === items.length} onChange={toggleAll} />
|
|
</th>
|
|
<th className="px-3 py-2.5 text-left font-semibold text-gray-600 whitespace-nowrap">순번</th>
|
|
<th className="px-3 py-2.5 text-left font-semibold text-gray-600 whitespace-nowrap">공종</th>
|
|
<th className="px-3 py-2.5 text-left font-semibold text-gray-600 whitespace-nowrap">세부공종</th>
|
|
<th className="px-3 py-2.5 text-left font-semibold text-gray-600 whitespace-nowrap">단위</th>
|
|
<th className="px-3 py-2.5 text-right font-semibold text-gray-600 whitespace-nowrap">설계량</th>
|
|
<th className="px-3 py-2.5 text-center font-semibold text-gray-600 whitespace-nowrap">일보적용</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{loading ? (
|
|
<tr><td colSpan={7} className="text-center py-8 text-gray-400">불러오는 중...</td></tr>
|
|
) : items.length === 0 ? (
|
|
<tr><td colSpan={7} className="text-center py-8 text-gray-400">등록된 공사량이 없습니다.</td></tr>
|
|
) : items.map((item, idx) => (
|
|
<tr key={item.id} className="border-b border-gray-100 hover:bg-blue-50/30 transition cursor-pointer"
|
|
onClick={() => handleEdit(item)}>
|
|
<td className="px-3 py-2" onClick={e => e.stopPropagation()}>
|
|
<input type="checkbox" checked={selected.has(item.id)} onChange={() => toggleSelect(item.id)} />
|
|
</td>
|
|
<td className="px-3 py-2 text-gray-500">
|
|
{(pagination.current_page - 1) * pagination.per_page + idx + 1}
|
|
</td>
|
|
<td className="px-3 py-2 font-medium text-gray-800">{item.work_type}</td>
|
|
<td className="px-3 py-2 text-gray-700">{item.sub_work_type}</td>
|
|
<td className="px-3 py-2 text-gray-600">{item.unit}</td>
|
|
<td className="px-3 py-2 text-right text-gray-700">{Number(item.design_quantity || 0).toLocaleString()}</td>
|
|
<td className="px-3 py-2 text-center" onClick={e => e.stopPropagation()}>
|
|
<input type="checkbox" checked={!!item.daily_report_applied}
|
|
onChange={() => handleToggleDailyReport(item)} />
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
{/* 페이지네이션 */}
|
|
<div className="flex items-center justify-between mt-3 text-sm text-gray-500">
|
|
<div>총 {pagination.total}건</div>
|
|
<div className="flex items-center gap-1">
|
|
<button onClick={() => setPage(Math.max(1, page-1))} disabled={page <= 1}
|
|
className="px-2 py-1 rounded hover:bg-gray-100 disabled:opacity-30"><</button>
|
|
{pageNumbers.map(p => (
|
|
<button key={p} onClick={() => setPage(p)}
|
|
className={`px-2 py-1 rounded text-xs ${p === pagination.current_page ? 'bg-blue-600 text-white' : 'hover:bg-gray-100'}`}>{p}</button>
|
|
))}
|
|
<button onClick={() => setPage(Math.min(pagination.last_page, page+1))} disabled={page >= pagination.last_page}
|
|
className="px-2 py-1 rounded hover:bg-gray-100 disabled:opacity-30">></button>
|
|
<select value={perPage} onChange={e => { setPerPage(+e.target.value); setPage(1); }}
|
|
className="border border-gray-300 rounded px-2 py-1 text-xs ml-2">
|
|
<option value={15}>15</option>
|
|
<option value={30}>30</option>
|
|
<option value={50}>50</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
/* ════════════════════════════════════════════════
|
|
탭 2: 실적현황
|
|
════════════════════════════════════════════════ */
|
|
function TabPerformance() {
|
|
const today = new Date().toISOString().slice(0, 10);
|
|
const [date, setDate] = useState(today);
|
|
const [items, setItems] = useState([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [filterCompany, setFilterCompany] = useState('');
|
|
|
|
useEffect(() => {
|
|
(async () => {
|
|
setLoading(true);
|
|
try {
|
|
const data = await api('/work-volumes?per_page=100');
|
|
setItems(data.data);
|
|
} catch {}
|
|
setLoading(false);
|
|
})();
|
|
}, []);
|
|
|
|
return (
|
|
<div>
|
|
<div className="flex flex-wrap items-center gap-2 mb-4">
|
|
<select value={filterCompany} onChange={e => setFilterCompany(e.target.value)}
|
|
className="border border-gray-300 rounded px-3 py-1.5 text-sm bg-white">
|
|
<option value="">업체 전체</option>
|
|
</select>
|
|
<input type="date" value={date} onChange={e => setDate(e.target.value)}
|
|
className="border border-gray-300 rounded px-3 py-1.5 text-sm" />
|
|
<input type="text" placeholder="상세검색" className="border border-gray-300 rounded px-3 py-1.5 text-sm" style={{width: 160}} />
|
|
<button className="bg-blue-600 text-white px-4 py-1.5 rounded text-sm font-semibold hover:bg-blue-700">검색</button>
|
|
<div className="ml-auto flex items-center gap-2">
|
|
<button className="bg-blue-600 text-white px-4 py-1.5 rounded text-sm font-semibold hover:bg-blue-700">저장</button>
|
|
<button className="flex items-center gap-1 border border-gray-300 rounded px-3 py-1.5 text-sm text-gray-700 hover:bg-gray-50">
|
|
<i className="ri-file-excel-2-line text-green-600"></i> Excel 다운로드
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="overflow-x-auto border border-gray-200 rounded-lg">
|
|
<table className="w-full text-sm">
|
|
<thead className="bg-gray-50 border-b border-gray-200">
|
|
<tr>
|
|
<th className="px-3 py-2.5 text-left font-semibold text-gray-600">순번</th>
|
|
<th className="px-3 py-2.5 text-left font-semibold text-gray-600">업체명</th>
|
|
<th className="px-3 py-2.5 text-left font-semibold text-gray-600">공종</th>
|
|
<th className="px-3 py-2.5 text-left font-semibold text-gray-600">세부공종</th>
|
|
<th className="px-3 py-2.5 text-left font-semibold text-gray-600">단위</th>
|
|
<th className="px-3 py-2.5 text-right font-semibold text-gray-600">설계량</th>
|
|
<th className="px-3 py-2.5 text-right font-semibold text-gray-600">전일누계</th>
|
|
<th className="px-3 py-2.5 text-right font-semibold text-gray-600" style={{backgroundColor: '#FFFDE7'}}>금일</th>
|
|
<th className="px-3 py-2.5 text-right font-semibold text-gray-600">총계</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{loading ? (
|
|
<tr><td colSpan={9} className="text-center py-8 text-gray-400">불러오는 중...</td></tr>
|
|
) : items.length === 0 ? (
|
|
<tr><td colSpan={9} className="text-center py-8 text-gray-400">등록된 공사량이 없습니다.</td></tr>
|
|
) : items.map((item, idx) => (
|
|
<tr key={item.id} className="border-b border-gray-100 hover:bg-blue-50/30 transition">
|
|
<td className="px-3 py-2 text-gray-500">{idx + 1}</td>
|
|
<td className="px-3 py-2 text-gray-700">-</td>
|
|
<td className="px-3 py-2 font-medium text-gray-800">{item.work_type}</td>
|
|
<td className="px-3 py-2 text-gray-700">{item.sub_work_type}</td>
|
|
<td className="px-3 py-2 text-gray-600">{item.unit}</td>
|
|
<td className="px-3 py-2 text-right text-gray-700">{Number(item.design_quantity || 0).toLocaleString()}</td>
|
|
<td className="px-3 py-2 text-right text-gray-600">-</td>
|
|
<td className="px-3 py-2 text-right" style={{backgroundColor: '#FFFDE7'}}>-</td>
|
|
<td className="px-3 py-2 text-right text-gray-600">-</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
/* ════════════════════════════════════════════════
|
|
메인 컴포넌트
|
|
════════════════════════════════════════════════ */
|
|
const TABS = [
|
|
{ id: 'work-volume', label: '공사량' },
|
|
{ id: 'performance', label: '실적현황' },
|
|
];
|
|
|
|
function App() {
|
|
const [activeTab, setActiveTab] = useState('work-volume');
|
|
|
|
return (
|
|
<div className="flex bg-gray-100" style={{ height: 'calc(100vh - 56px)' }}>
|
|
<PmisSidebar activePage="work-volume" />
|
|
<div className="flex-1 flex flex-col overflow-hidden">
|
|
{/* 헤더 */}
|
|
<div className="bg-white border-b border-gray-200 px-6 pt-4 pb-0">
|
|
<div className="flex items-center gap-2 text-xs text-gray-400 mb-2">
|
|
<i className="ri-home-4-line"></i>
|
|
<span>Home</span> > <span>시공관리</span> > <span className="text-gray-600">공사량관리</span>
|
|
</div>
|
|
<h1 className="text-lg font-bold text-gray-800 mb-3">공사량관리</h1>
|
|
{/* 탭 */}
|
|
<div className="flex gap-0 border-b-0">
|
|
{TABS.map(tab => (
|
|
<button key={tab.id}
|
|
onClick={() => setActiveTab(tab.id)}
|
|
className={`px-5 py-2.5 text-sm font-medium border-b-2 transition whitespace-nowrap ${
|
|
activeTab === tab.id
|
|
? 'border-blue-600 text-blue-700 bg-blue-50/50'
|
|
: 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
|
|
}`}>
|
|
{tab.label}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
{/* 탭 컨텐츠 */}
|
|
<div className="flex-1 overflow-auto p-6">
|
|
{activeTab === 'work-volume' && <TabWorkVolume />}
|
|
{activeTab === 'performance' && <TabPerformance />}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
ReactDOM.render(<App />, document.getElementById('root'));
|
|
@endverbatim
|
|
</script>
|
|
@endpush
|