2102f4a398
- 자료실 하위 3개 메뉴: 자료보관함, 매뉴얼, 공지사항 - 자료보관함: 폴더 트리 + 파일 업로드/다운로드/삭제 - 매뉴얼/공지사항: 게시판형 CRUD + 첨부파일 - 안전관리: 안전보건교육, TBM현황, 위험성평가, 재해예방조치 - 품질관리: 시정조치 UI 페이지 - 대시보드: 슈퍼관리자 전용 레거시 사이트 참고 카드 - 작업일보/출면일보 오류 수정 및 기능 개선 - 설비 사진 업로드, 근로계약서 종료일 수정
741 lines
43 KiB
PHP
741 lines
43 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 EquipmentModal({ open, onClose, onSaved, equipment }) {
|
|
const isEdit = !!equipment?.id;
|
|
const [form, setForm] = useState({
|
|
company_name: '', equipment_code: '', equipment_name: '',
|
|
specification: '', unit: '', equipment_number: '',
|
|
operator: '', inspection_end_date: '', inspection_not_applicable: false,
|
|
insurance_end_date: '', insurance_not_applicable: false,
|
|
});
|
|
const [saving, setSaving] = useState(false);
|
|
const [error, setError] = useState('');
|
|
|
|
useEffect(() => {
|
|
if (open) {
|
|
if (equipment) {
|
|
setForm({
|
|
company_name: equipment.company_name || '',
|
|
equipment_code: equipment.equipment_code || '',
|
|
equipment_name: equipment.equipment_name || '',
|
|
specification: equipment.specification || '',
|
|
unit: equipment.unit || '',
|
|
equipment_number: equipment.equipment_number || '',
|
|
operator: equipment.operator || '',
|
|
inspection_end_date: equipment.inspection_end_date ? equipment.inspection_end_date.slice(0, 10) : '',
|
|
inspection_not_applicable: equipment.inspection_not_applicable || false,
|
|
insurance_end_date: equipment.insurance_end_date ? equipment.insurance_end_date.slice(0, 10) : '',
|
|
insurance_not_applicable: equipment.insurance_not_applicable || false,
|
|
});
|
|
} else {
|
|
setForm({
|
|
company_name: '', equipment_code: '', equipment_name: '',
|
|
specification: '', unit: '', equipment_number: '',
|
|
operator: '', inspection_end_date: '', inspection_not_applicable: false,
|
|
insurance_end_date: '', insurance_not_applicable: false,
|
|
});
|
|
}
|
|
setError('');
|
|
}
|
|
}, [open, equipment]);
|
|
|
|
const set = (k, v) => setForm(f => ({ ...f, [k]: v }));
|
|
|
|
async function handleSubmit(e) {
|
|
e.preventDefault();
|
|
setSaving(true);
|
|
setError('');
|
|
try {
|
|
const body = { ...form };
|
|
if (body.inspection_not_applicable) body.inspection_end_date = null;
|
|
if (body.insurance_not_applicable) body.insurance_end_date = null;
|
|
if (!body.inspection_end_date) body.inspection_end_date = null;
|
|
if (!body.insurance_end_date) body.insurance_end_date = null;
|
|
|
|
if (isEdit) {
|
|
await api(`/equipments/${equipment.id}`, { method: 'PUT', body: JSON.stringify(body) });
|
|
} else {
|
|
await api('/equipments', { 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(`/equipments/${equipment.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-xl 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: 90}}>업체 명</label>
|
|
<input type="text" value={form.company_name} onChange={e => set('company_name', 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: 90}}>장비코드</label>
|
|
<input type="text" value={form.equipment_code} onChange={e => set('equipment_code', 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}} />
|
|
<label className="shrink-0 text-sm font-medium text-gray-700">장비명 <span className="text-red-500">*</span></label>
|
|
<input type="text" value={form.equipment_name} onChange={e => set('equipment_name', 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: 90}}>규격 <span className="text-red-500">*</span></label>
|
|
<input type="text" value={form.specification} onChange={e => set('specification', 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" />
|
|
<label className="shrink-0 text-sm font-medium text-gray-700">단위 <span className="text-red-500">*</span></label>
|
|
<input type="text" value={form.unit} onChange={e => set('unit', 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: 90}}>장비번호 <span className="text-red-500">*</span></label>
|
|
<input type="text" value={form.equipment_number} onChange={e => set('equipment_number', 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" />
|
|
<label className="shrink-0 text-sm font-medium text-gray-700">운전원</label>
|
|
<input type="text" value={form.operator} onChange={e => set('operator', e.target.value)}
|
|
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: 90}}>검사종료일 <span className="text-red-500">*</span></label>
|
|
<input type="date" value={form.inspection_end_date} onChange={e => set('inspection_end_date', e.target.value)}
|
|
disabled={form.inspection_not_applicable}
|
|
required={!form.inspection_not_applicable}
|
|
className="border border-gray-300 rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500 disabled:bg-gray-100 disabled:text-gray-400" style={{width: 180}} />
|
|
<label className="flex items-center gap-1.5 cursor-pointer text-sm text-gray-600">
|
|
<input type="checkbox" checked={form.inspection_not_applicable}
|
|
onChange={e => set('inspection_not_applicable', e.target.checked)}
|
|
className="rounded" />
|
|
해당없음
|
|
</label>
|
|
</div>
|
|
|
|
{/* 보험종료일 */}
|
|
<div className="flex items-center gap-4">
|
|
<label className="shrink-0 text-sm font-medium text-gray-700" style={{width: 90}}>보험종료일 <span className="text-red-500">*</span></label>
|
|
<input type="date" value={form.insurance_end_date} onChange={e => set('insurance_end_date', e.target.value)}
|
|
disabled={form.insurance_not_applicable}
|
|
required={!form.insurance_not_applicable}
|
|
className="border border-gray-300 rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500 disabled:bg-gray-100 disabled:text-gray-400" style={{width: 180}} />
|
|
<label className="flex items-center gap-1.5 cursor-pointer text-sm text-gray-600">
|
|
<input type="checkbox" checked={form.insurance_not_applicable}
|
|
onChange={e => set('insurance_not_applicable', e.target.checked)}
|
|
className="rounded" />
|
|
해당없음
|
|
</label>
|
|
</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 TabRegister() {
|
|
const [equipments, setEquipments] = 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 [editEquip, setEditEquip] = useState(null);
|
|
const [selected, setSelected] = useState(new Set());
|
|
|
|
const fetchEquipments = useCallback(async () => {
|
|
setLoading(true);
|
|
try {
|
|
const params = new URLSearchParams();
|
|
params.set('page', page);
|
|
params.set('per_page', perPage);
|
|
if (search) params.set('search', search);
|
|
if (filterCompany) params.set('company', filterCompany);
|
|
const data = await api(`/equipments?${params}`);
|
|
setEquipments(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, filterCompany]);
|
|
|
|
useEffect(() => { fetchEquipments(); }, [fetchEquipments]);
|
|
|
|
function handleSearch() { setPage(1); fetchEquipments(); }
|
|
function handleAdd() { setEditEquip(null); setModalOpen(true); }
|
|
function handleEdit(eq) { setEditEquip(eq); setModalOpen(true); }
|
|
|
|
function randomEquipData() {
|
|
const companies = ['(주)대림건설','(주)현대건설','(주)삼성물산','(주)GS건설','(주)포스코건설'];
|
|
const names = ['렌탈','굴삭기','지게차','크레인','덤프트럭','콘크리트펌프카','항타기','불도저','로더','롤러'];
|
|
const specs = ['2.5(M)*1.17(M)*2.36(M)','0.7m3','3톤','25톤','15톤','50m','12m','D6','1.5m3','10톤'];
|
|
const units = ['대','대','대','대','대','대','대','대','대','대'];
|
|
const pick = arr => arr[Math.floor(Math.random() * arr.length)];
|
|
const idx = Math.floor(Math.random() * names.length);
|
|
const now = new Date();
|
|
const insDate = new Date(now.getFullYear(), now.getMonth() + 1 + Math.floor(Math.random() * 12), Math.floor(Math.random() * 28) + 1);
|
|
const inspDate = new Date(now.getFullYear(), now.getMonth() + 1 + Math.floor(Math.random() * 12), Math.floor(Math.random() * 28) + 1);
|
|
return {
|
|
company_name: pick(companies),
|
|
equipment_code: 'Q' + String(100000 + Math.floor(Math.random() * 900000)),
|
|
equipment_name: names[idx],
|
|
specification: specs[idx],
|
|
unit: units[idx],
|
|
equipment_number: 'J' + String(1000 + Math.floor(Math.random() * 9000)),
|
|
operator: '',
|
|
inspection_end_date: inspDate.toISOString().slice(0, 10),
|
|
inspection_not_applicable: false,
|
|
insurance_end_date: insDate.toISOString().slice(0, 10),
|
|
insurance_not_applicable: false,
|
|
};
|
|
}
|
|
|
|
function handleQuickAdd() {
|
|
setEditEquip(randomEquipData());
|
|
setModalOpen(true);
|
|
}
|
|
|
|
async function handleBulkDelete() {
|
|
if (selected.size === 0) return;
|
|
if (!confirm(`선택한 ${selected.size}건을 삭제하시겠습니까?`)) return;
|
|
for (const id of selected) {
|
|
try { await api(`/equipments/${id}`, { method: 'DELETE' }); } catch {}
|
|
}
|
|
setSelected(new Set());
|
|
fetchEquipments();
|
|
}
|
|
|
|
function toggleSelect(id) {
|
|
setSelected(prev => { const s = new Set(prev); s.has(id) ? s.delete(id) : s.add(id); return s; });
|
|
}
|
|
function toggleAll() {
|
|
setSelected(equipments.length > 0 && selected.size === equipments.length ? new Set() : new Set(equipments.map(e => e.id)));
|
|
}
|
|
|
|
const companies = useMemo(() => [...new Set(equipments.map(e => e.company_name).filter(Boolean))], [equipments]);
|
|
|
|
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>
|
|
<EquipmentModal
|
|
open={modalOpen}
|
|
onClose={() => setModalOpen(false)}
|
|
onSaved={fetchEquipments}
|
|
equipment={editEquip}
|
|
/>
|
|
|
|
{/* 필터 */}
|
|
<div className="flex flex-wrap items-center gap-2 mb-4">
|
|
<select value={filterCompany} onChange={e => { setFilterCompany(e.target.value); setPage(1); }}
|
|
className="border border-gray-300 rounded px-3 py-1.5 text-sm bg-white">
|
|
<option value="">전체 업체</option>
|
|
{companies.map(c => <option key={c} value={c}>{c}</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>
|
|
{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={equipments.length > 0 && selected.size === equipments.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-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-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>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{loading ? (
|
|
<tr><td colSpan={11} className="text-center py-8 text-gray-400">불러오는 중...</td></tr>
|
|
) : equipments.length === 0 ? (
|
|
<tr><td colSpan={11} className="text-center py-8 text-gray-400">등록된 장비가 없습니다.</td></tr>
|
|
) : equipments.map((eq, idx) => (
|
|
<tr key={eq.id} className="border-b border-gray-100 hover:bg-blue-50/30 transition cursor-pointer"
|
|
onClick={() => handleEdit(eq)}>
|
|
<td className="px-3 py-2" onClick={e => e.stopPropagation()}>
|
|
<input type="checkbox" checked={selected.has(eq.id)} onChange={() => toggleSelect(eq.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 text-gray-700">{eq.company_name}</td>
|
|
<td className="px-3 py-2 text-gray-600">{eq.equipment_code || '-'}</td>
|
|
<td className="px-3 py-2 font-medium text-gray-800">{eq.equipment_name}</td>
|
|
<td className="px-3 py-2 text-gray-700">{eq.specification || '-'}</td>
|
|
<td className="px-3 py-2 text-gray-600">{eq.unit || '-'}</td>
|
|
<td className="px-3 py-2 text-gray-600">{eq.equipment_number}</td>
|
|
<td className="px-3 py-2 text-gray-600">{eq.equipment_number}</td>
|
|
<td className="px-3 py-2 text-gray-600">
|
|
{eq.inspection_not_applicable ? '해당없음' : (eq.inspection_end_date ? eq.inspection_end_date.slice(0, 10) : '-')}
|
|
</td>
|
|
<td className="px-3 py-2 text-gray-600">
|
|
{eq.insurance_not_applicable ? '해당없음' : (eq.insurance_end_date ? eq.insurance_end_date.slice(0, 10) : '-')}
|
|
</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 TabAttendance() {
|
|
const today = new Date().toISOString().slice(0, 10);
|
|
const [date, setDate] = useState(today);
|
|
const [equipments, setEquipments] = useState([]);
|
|
const [loading, setLoading] = useState(true);
|
|
|
|
useEffect(() => {
|
|
(async () => {
|
|
setLoading(true);
|
|
try {
|
|
const data = await api('/equipments?per_page=100');
|
|
setEquipments(data.data);
|
|
} catch {}
|
|
setLoading(false);
|
|
})();
|
|
}, []);
|
|
|
|
return (
|
|
<div>
|
|
<div className="flex flex-wrap items-center gap-2 mb-4">
|
|
<select className="border border-gray-300 rounded px-3 py-1.5 text-sm bg-white">
|
|
<option>전체 업체</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">
|
|
<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-left font-semibold text-gray-600">장비번호</th>
|
|
<th className="px-3 py-2.5 text-center font-semibold text-gray-600">단위누적</th>
|
|
<th className="px-3 py-2.5 text-center font-semibold text-gray-600" style={{backgroundColor: '#FFFDE7'}}>급일</th>
|
|
<th className="px-3 py-2.5 text-center font-semibold text-gray-600">출역</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{loading ? (
|
|
<tr><td colSpan={9} className="text-center py-8 text-gray-400">불러오는 중...</td></tr>
|
|
) : equipments.length === 0 ? (
|
|
<tr><td colSpan={9} className="text-center py-8 text-gray-400">등록된 장비가 없습니다.</td></tr>
|
|
) : equipments.map((eq, idx) => (
|
|
<tr key={eq.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">{eq.company_name}</td>
|
|
<td className="px-3 py-2 text-gray-600">{eq.equipment_code || '-'}</td>
|
|
<td className="px-3 py-2 font-medium text-gray-800">{eq.equipment_name}</td>
|
|
<td className="px-3 py-2 text-gray-700">{eq.specification || '-'}</td>
|
|
<td className="px-3 py-2 text-gray-600">{eq.equipment_number}</td>
|
|
<td className="px-3 py-2 text-center text-gray-600">-</td>
|
|
<td className="px-3 py-2 text-center" style={{backgroundColor: '#FFFDE7'}}>-</td>
|
|
<td className="px-3 py-2 text-center text-gray-600">-</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
/* ════════════════════════════════════════════════
|
|
탭 3: 투입현황
|
|
════════════════════════════════════════════════ */
|
|
function TabDeployment() {
|
|
const [viewBy, setViewBy] = useState('day');
|
|
const [period, setPeriod] = useState('1w');
|
|
const [startDate, setStartDate] = useState('2026-03-05');
|
|
const [endDate, setEndDate] = useState('2026-03-12');
|
|
|
|
const dates = useMemo(() => {
|
|
const arr = [];
|
|
const s = new Date(startDate), e = new Date(endDate);
|
|
for (let d = new Date(s); d <= e; d.setDate(d.getDate() + 1)) {
|
|
arr.push(new Date(d));
|
|
}
|
|
return arr;
|
|
}, [startDate, endDate]);
|
|
|
|
return (
|
|
<div>
|
|
<div className="flex flex-wrap items-center gap-2 mb-2">
|
|
<select className="border border-gray-300 rounded px-3 py-1.5 text-sm bg-white">
|
|
<option>전체 업체</option>
|
|
</select>
|
|
<div className="ml-auto">
|
|
<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="flex flex-wrap items-center gap-3 mb-4 text-sm">
|
|
<span className="text-gray-600 font-semibold">보기기준</span>
|
|
{[['day','일'],['week','주'],['month','월']].map(([v,l]) => (
|
|
<label key={v} className="flex items-center gap-1 cursor-pointer">
|
|
<input type="radio" name="viewBy" checked={viewBy===v} onChange={()=>setViewBy(v)} />
|
|
<span className={viewBy===v?'text-gray-800 font-medium':'text-gray-500'}>{l}</span>
|
|
</label>
|
|
))}
|
|
<span className="text-gray-600 font-semibold ml-4">조회기간</span>
|
|
{[['1w','1주'],['1m','1개월'],['3m','3개월']].map(([v,l]) => (
|
|
<label key={v} className="flex items-center gap-1 cursor-pointer">
|
|
<input type="radio" name="period" checked={period===v} onChange={()=>setPeriod(v)} />
|
|
<span className={period===v?'text-gray-800 font-medium':'text-gray-500'}>{l}</span>
|
|
</label>
|
|
))}
|
|
<span className="text-gray-600 font-semibold ml-4">날짜</span>
|
|
<input type="date" value={startDate} onChange={e=>setStartDate(e.target.value)} className="border border-gray-300 rounded px-2 py-1 text-sm" />
|
|
<span className="text-gray-400">~</span>
|
|
<input type="date" value={endDate} onChange={e=>setEndDate(e.target.value)} className="border border-gray-300 rounded px-2 py-1 text-sm" />
|
|
<button className="bg-blue-600 text-white px-4 py-1.5 rounded text-sm font-semibold hover:bg-blue-700">검색</button>
|
|
<button className="bg-gray-200 text-gray-700 px-3 py-1.5 rounded text-sm hover:bg-gray-300">검색초기화</button>
|
|
</div>
|
|
|
|
<div className="text-sm font-bold text-gray-800 mb-2">
|
|
{startDate.replace(/-/g, '년 ').replace(/년 (\d+)$/, '월 $1일')} ~ {endDate.replace(/-/g, '년 ').replace(/년 (\d+)$/, '월 $1일')}
|
|
</div>
|
|
|
|
<div className="overflow-x-auto border border-gray-200 rounded-lg">
|
|
<table className="w-full text-sm">
|
|
<thead>
|
|
<tr className="bg-gray-100 border-b border-gray-200">
|
|
<th className="px-3 py-2 text-left font-semibold text-gray-600" rowSpan={2}>업체명</th>
|
|
<th className="px-3 py-2 text-left font-semibold text-gray-600" rowSpan={2}>장비명</th>
|
|
<th className="px-3 py-2 text-left font-semibold text-gray-600" rowSpan={2}>규격</th>
|
|
<th className="px-2 py-1 text-center font-semibold text-gray-600 border-b border-gray-200" colSpan={dates.length}>
|
|
{startDate.slice(0, 7)}
|
|
</th>
|
|
<th className="px-3 py-2 text-center font-semibold text-gray-600" rowSpan={2}>합계</th>
|
|
</tr>
|
|
<tr className="bg-gray-100 border-b border-gray-200">
|
|
{dates.map(d => (
|
|
<th key={d.toISOString()} className="px-2 py-1.5 text-center font-medium text-gray-500 text-xs min-w-[36px] border-l border-gray-200">
|
|
{d.getDate()}
|
|
</th>
|
|
))}
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td colSpan={3 + dates.length + 1} className="text-center py-8 text-gray-400">
|
|
<i className="ri-truck-line text-3xl block mb-2"></i>
|
|
<p className="text-sm">출역 데이터 기반으로 투입 현황을 집계합니다.</p>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
/* ════════════════════════════════════════════════
|
|
메인 컴포넌트
|
|
════════════════════════════════════════════════ */
|
|
const TABS = [
|
|
{ id: 'register', label: '장비등록' },
|
|
{ id: 'attendance', label: '출역현황' },
|
|
{ id: 'deployment', label: '투입현황' },
|
|
];
|
|
|
|
function App() {
|
|
const [activeTab, setActiveTab] = useState('register');
|
|
|
|
return (
|
|
<div className="flex bg-gray-100" style={{ height: 'calc(100vh - 56px)' }}>
|
|
<PmisSidebar activePage="equipment" />
|
|
<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 === 'register' && <TabRegister />}
|
|
{activeTab === 'attendance' && <TabAttendance />}
|
|
{activeTab === 'deployment' && <TabDeployment />}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
ReactDOM.render(<App />, document.getElementById('root'));
|
|
@endverbatim
|
|
</script>
|
|
@endpush
|