From c8fd3e2739149c6f7d73adca9fbfabe1c1630da7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EB=B3=B4=EA=B3=A4?=
 <lightone2017@codebridge-x.com>
Date: Thu, 12 Mar 2026 13:52:20 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20[pmis]=20=EC=8B=9C=EA=B3=B5=EA=B4=80?=
 =?UTF-8?q?=EB=A6=AC=20=ED=95=98=EC=9C=84=EB=A9=94=EB=89=B4=206=EA=B0=9C?=
 =?UTF-8?q?=20=EC=B6=94=EA=B0=80=20=EB=B0=8F=20=EC=9D=B8=EC=9B=90=EA=B4=80?=
 =?UTF-8?q?=EB=A6=AC=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 시공관리 하위메뉴: 인원관리, 장비관리, 자재관리, 공사량관리, 출면일보, 작업일보
- 인원관리 4개 탭 구현: 인원등록, 출역현황, 투입현황(업체별), 투입현황(근로자별)
- PMIS 사이드바에 시공관리 children 메뉴 추가 (대시보드, BIM 뷰어 포함)
- 나머지 5개 메뉴 placeholder 페이지 생성
---
 .../Controllers/Juil/PlanningController.php   |  56 ++
 resources/views/juil/bim-viewer.blade.php     |   9 +-
 .../views/juil/construction-pmis.blade.php    |   9 +-
 .../juil/pmis-daily-attendance.blade.php      | 117 ++++
 .../views/juil/pmis-daily-report.blade.php    | 117 ++++
 resources/views/juil/pmis-equipment.blade.php | 117 ++++
 resources/views/juil/pmis-materials.blade.php | 117 ++++
 .../views/juil/pmis-work-volume.blade.php     | 117 ++++
 resources/views/juil/pmis-workforce.blade.php | 577 ++++++++++++++++++
 routes/web.php                                |   8 +
 10 files changed, 1242 insertions(+), 2 deletions(-)
 create mode 100644 resources/views/juil/pmis-daily-attendance.blade.php
 create mode 100644 resources/views/juil/pmis-daily-report.blade.php
 create mode 100644 resources/views/juil/pmis-equipment.blade.php
 create mode 100644 resources/views/juil/pmis-materials.blade.php
 create mode 100644 resources/views/juil/pmis-work-volume.blade.php
 create mode 100644 resources/views/juil/pmis-workforce.blade.php

diff --git a/app/Http/Controllers/Juil/PlanningController.php b/app/Http/Controllers/Juil/PlanningController.php
index 7de5f8db..bad52423 100644
--- a/app/Http/Controllers/Juil/PlanningController.php
+++ b/app/Http/Controllers/Juil/PlanningController.php
@@ -57,6 +57,62 @@ public function bimViewer(Request $request): View|Response
         return view('juil.bim-viewer');
     }
 
+    // ── 시공관리 ──
+
+    public function pmisWorkforce(Request $request): View|Response
+    {
+        if ($request->header('HX-Request')) {
+            return response('', 200)->header('HX-Redirect', route('juil.construction-pmis.workforce'));
+        }
+
+        return view('juil.pmis-workforce');
+    }
+
+    public function pmisEquipment(Request $request): View|Response
+    {
+        if ($request->header('HX-Request')) {
+            return response('', 200)->header('HX-Redirect', route('juil.construction-pmis.equipment'));
+        }
+
+        return view('juil.pmis-equipment');
+    }
+
+    public function pmisMaterials(Request $request): View|Response
+    {
+        if ($request->header('HX-Request')) {
+            return response('', 200)->header('HX-Redirect', route('juil.construction-pmis.materials'));
+        }
+
+        return view('juil.pmis-materials');
+    }
+
+    public function pmisWorkVolume(Request $request): View|Response
+    {
+        if ($request->header('HX-Request')) {
+            return response('', 200)->header('HX-Redirect', route('juil.construction-pmis.work-volume'));
+        }
+
+        return view('juil.pmis-work-volume');
+    }
+
+    public function pmisDailyAttendance(Request $request): View|Response
+    {
+        if ($request->header('HX-Request')) {
+            return response('', 200)->header('HX-Redirect', route('juil.construction-pmis.daily-attendance'));
+        }
+
+        return view('juil.pmis-daily-attendance');
+    }
+
+    public function pmisDailyReport(Request $request): View|Response
+    {
+        if ($request->header('HX-Request')) {
+            return response('', 200)->header('HX-Redirect', route('juil.construction-pmis.daily-report'));
+        }
+
+        return view('juil.pmis-daily-report');
+    }
+
     public function pmisWeather(WeatherService $weatherService): JsonResponse
     {
         $forecasts = $weatherService->getWeeklyForecast();
diff --git a/resources/views/juil/bim-viewer.blade.php b/resources/views/juil/bim-viewer.blade.php
index 7f568858..7fd9cf2d 100644
--- a/resources/views/juil/bim-viewer.blade.php
+++ b/resources/views/juil/bim-viewer.blade.php
@@ -587,7 +587,14 @@ function BimSidebar() {
     }, []);
     const menus = [
         { icon: 'ri-building-2-line', label: 'BIM 관리', active: true, children: [{ label: 'BIM 뷰어', active: true }] },
-        { icon: 'ri-line-chart-line', label: '시공관리' },
+        { icon: 'ri-line-chart-line', label: '시공관리', children: [
+            { label: '인원관리', url: '/juil/construction-pmis/workforce' },
+            { label: '장비관리', url: '/juil/construction-pmis/equipment' },
+            { label: '자재관리', url: '/juil/construction-pmis/materials' },
+            { label: '공사량관리', url: '/juil/construction-pmis/work-volume' },
+            { label: '출면일보', url: '/juil/construction-pmis/daily-attendance' },
+            { label: '작업일보', url: '/juil/construction-pmis/daily-report' },
+        ]},
         { icon: 'ri-file-list-3-line', label: '품질관리' },
         { icon: 'ri-shield-check-line', label: '안전관리' },
         { icon: 'ri-folder-line', label: '자료실' },
diff --git a/resources/views/juil/construction-pmis.blade.php b/resources/views/juil/construction-pmis.blade.php
index 91ab51e2..07976e92 100644
--- a/resources/views/juil/construction-pmis.blade.php
+++ b/resources/views/juil/construction-pmis.blade.php
@@ -23,7 +23,14 @@
     { icon: 'ri-building-2-line', label: 'BIM 관리', id: 'bim', children: [
         { label: 'BIM 뷰어', url: '/juil/construction-pmis/bim-viewer' },
     ]},
-    { icon: 'ri-line-chart-line', label: '시공관리', id: 'construction' },
+    { icon: 'ri-line-chart-line', label: '시공관리', id: 'construction', children: [
+        { label: '인원관리', url: '/juil/construction-pmis/workforce' },
+        { label: '장비관리', url: '/juil/construction-pmis/equipment' },
+        { label: '자재관리', url: '/juil/construction-pmis/materials' },
+        { label: '공사량관리', url: '/juil/construction-pmis/work-volume' },
+        { label: '출면일보', url: '/juil/construction-pmis/daily-attendance' },
+        { label: '작업일보', url: '/juil/construction-pmis/daily-report' },
+    ]},
     { icon: 'ri-file-list-3-line', label: '품질관리', id: 'quality' },
     { icon: 'ri-shield-check-line', label: '안전관리', id: 'safety' },
     { icon: 'ri-folder-line', label: '자료실', id: 'archive' },
diff --git a/resources/views/juil/pmis-daily-attendance.blade.php b/resources/views/juil/pmis-daily-attendance.blade.php
new file mode 100644
index 00000000..0d02ebbf
--- /dev/null
+++ b/resources/views/juil/pmis-daily-attendance.blade.php
@@ -0,0 +1,117 @@
+@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;
+
+/* ════════════════════════════════════════════════
+   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' },
+    { icon: 'ri-shield-check-line', label: '안전관리', id: 'safety' },
+    { icon: 'ri-folder-line', label: '자료실', id: 'archive' },
+];
+
+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 App() {
+    return (
+        <div className="flex bg-gray-100" style={{ height: 'calc(100vh - 56px)' }}>
+            <PmisSidebar activePage="daily-attendance" />
+            <div className="flex-1 flex flex-col overflow-hidden">
+                <div className="bg-white border-b border-gray-200 px-6 py-4">
+                    <div className="flex items-center gap-2 text-xs text-gray-400 mb-2">
+                        <i className="ri-home-4-line"></i>
+                        <span>Home</span> &gt; <span>시공관리</span> &gt; <span className="text-gray-600">출면일보</span>
+                    </div>
+                    <h1 className="text-lg font-bold text-gray-800">출면일보</h1>
+                </div>
+                <div className="flex-1 flex items-center justify-center">
+                    <div className="text-center text-gray-400">
+                        <i className="ri-tools-line text-5xl block mb-3"></i>
+                        <p className="text-lg font-semibold">출면일보</p>
+                        <p className="text-sm mt-1">준비 중입니다</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}
+
+ReactDOM.render(<App />, document.getElementById('root'));
+@endverbatim
+</script>
+@endpush
diff --git a/resources/views/juil/pmis-daily-report.blade.php b/resources/views/juil/pmis-daily-report.blade.php
new file mode 100644
index 00000000..8ace793e
--- /dev/null
+++ b/resources/views/juil/pmis-daily-report.blade.php
@@ -0,0 +1,117 @@
+@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;
+
+/* ════════════════════════════════════════════════
+   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' },
+    { icon: 'ri-shield-check-line', label: '안전관리', id: 'safety' },
+    { icon: 'ri-folder-line', label: '자료실', id: 'archive' },
+];
+
+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 App() {
+    return (
+        <div className="flex bg-gray-100" style={{ height: 'calc(100vh - 56px)' }}>
+            <PmisSidebar activePage="daily-report" />
+            <div className="flex-1 flex flex-col overflow-hidden">
+                <div className="bg-white border-b border-gray-200 px-6 py-4">
+                    <div className="flex items-center gap-2 text-xs text-gray-400 mb-2">
+                        <i className="ri-home-4-line"></i>
+                        <span>Home</span> &gt; <span>시공관리</span> &gt; <span className="text-gray-600">작업일보</span>
+                    </div>
+                    <h1 className="text-lg font-bold text-gray-800">작업일보</h1>
+                </div>
+                <div className="flex-1 flex items-center justify-center">
+                    <div className="text-center text-gray-400">
+                        <i className="ri-tools-line text-5xl block mb-3"></i>
+                        <p className="text-lg font-semibold">작업일보</p>
+                        <p className="text-sm mt-1">준비 중입니다</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}
+
+ReactDOM.render(<App />, document.getElementById('root'));
+@endverbatim
+</script>
+@endpush
diff --git a/resources/views/juil/pmis-equipment.blade.php b/resources/views/juil/pmis-equipment.blade.php
new file mode 100644
index 00000000..336a5e24
--- /dev/null
+++ b/resources/views/juil/pmis-equipment.blade.php
@@ -0,0 +1,117 @@
+@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;
+
+/* ════════════════════════════════════════════════
+   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' },
+    { icon: 'ri-shield-check-line', label: '안전관리', id: 'safety' },
+    { icon: 'ri-folder-line', label: '자료실', id: 'archive' },
+];
+
+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 App() {
+    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 py-4">
+                    <div className="flex items-center gap-2 text-xs text-gray-400 mb-2">
+                        <i className="ri-home-4-line"></i>
+                        <span>Home</span> &gt; <span>시공관리</span> &gt; <span className="text-gray-600">장비관리</span>
+                    </div>
+                    <h1 className="text-lg font-bold text-gray-800">장비관리</h1>
+                </div>
+                <div className="flex-1 flex items-center justify-center">
+                    <div className="text-center text-gray-400">
+                        <i className="ri-tools-line text-5xl block mb-3"></i>
+                        <p className="text-lg font-semibold">장비관리</p>
+                        <p className="text-sm mt-1">준비 중입니다</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}
+
+ReactDOM.render(<App />, document.getElementById('root'));
+@endverbatim
+</script>
+@endpush
diff --git a/resources/views/juil/pmis-materials.blade.php b/resources/views/juil/pmis-materials.blade.php
new file mode 100644
index 00000000..ef7e2185
--- /dev/null
+++ b/resources/views/juil/pmis-materials.blade.php
@@ -0,0 +1,117 @@
+@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;
+
+/* ════════════════════════════════════════════════
+   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' },
+    { icon: 'ri-shield-check-line', label: '안전관리', id: 'safety' },
+    { icon: 'ri-folder-line', label: '자료실', id: 'archive' },
+];
+
+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 App() {
+    return (
+        <div className="flex bg-gray-100" style={{ height: 'calc(100vh - 56px)' }}>
+            <PmisSidebar activePage="materials" />
+            <div className="flex-1 flex flex-col overflow-hidden">
+                <div className="bg-white border-b border-gray-200 px-6 py-4">
+                    <div className="flex items-center gap-2 text-xs text-gray-400 mb-2">
+                        <i className="ri-home-4-line"></i>
+                        <span>Home</span> &gt; <span>시공관리</span> &gt; <span className="text-gray-600">자재관리</span>
+                    </div>
+                    <h1 className="text-lg font-bold text-gray-800">자재관리</h1>
+                </div>
+                <div className="flex-1 flex items-center justify-center">
+                    <div className="text-center text-gray-400">
+                        <i className="ri-tools-line text-5xl block mb-3"></i>
+                        <p className="text-lg font-semibold">자재관리</p>
+                        <p className="text-sm mt-1">준비 중입니다</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}
+
+ReactDOM.render(<App />, document.getElementById('root'));
+@endverbatim
+</script>
+@endpush
diff --git a/resources/views/juil/pmis-work-volume.blade.php b/resources/views/juil/pmis-work-volume.blade.php
new file mode 100644
index 00000000..ad8bff16
--- /dev/null
+++ b/resources/views/juil/pmis-work-volume.blade.php
@@ -0,0 +1,117 @@
+@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;
+
+/* ════════════════════════════════════════════════
+   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' },
+    { icon: 'ri-shield-check-line', label: '안전관리', id: 'safety' },
+    { icon: 'ri-folder-line', label: '자료실', id: 'archive' },
+];
+
+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 App() {
+    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 py-4">
+                    <div className="flex items-center gap-2 text-xs text-gray-400 mb-2">
+                        <i className="ri-home-4-line"></i>
+                        <span>Home</span> &gt; <span>시공관리</span> &gt; <span className="text-gray-600">공사량관리</span>
+                    </div>
+                    <h1 className="text-lg font-bold text-gray-800">공사량관리</h1>
+                </div>
+                <div className="flex-1 flex items-center justify-center">
+                    <div className="text-center text-gray-400">
+                        <i className="ri-tools-line text-5xl block mb-3"></i>
+                        <p className="text-lg font-semibold">공사량관리</p>
+                        <p className="text-sm mt-1">준비 중입니다</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}
+
+ReactDOM.render(<App />, document.getElementById('root'));
+@endverbatim
+</script>
+@endpush
diff --git a/resources/views/juil/pmis-workforce.blade.php b/resources/views/juil/pmis-workforce.blade.php
new file mode 100644
index 00000000..e2c338f9
--- /dev/null
+++ b/resources/views/juil/pmis-workforce.blade.php
@@ -0,0 +1,577 @@
+@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;
+
+/* ════════════════════════════════════════════════
+   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' },
+    { icon: 'ri-shield-check-line', label: '안전관리', id: 'safety' },
+    { icon: 'ri-folder-line', label: '자료실', id: 'archive' },
+];
+
+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>
+    );
+}
+
+/* ════════════════════════════════════════════════
+   샘플 데이터
+   ════════════════════════════════════════════════ */
+const SAMPLE_WORKERS = [
+    { id: 18, company: '(주)주일기업', trade: '방화셔터공사', jobType: '현장소장', name: '김철수', phone: '010-5292-3623', ssn: '630205-1XXXXXX', blood: 'M', remark: 'N', wage: 200000 },
+    { id: 17, company: '(주)주일기업', trade: '방화셔터공사', jobType: '방화셔터시공', name: '김영식', phone: '010-6766-4600', ssn: '630212-1XXXXXX', blood: 'M', remark: 'N', wage: 200000 },
+    { id: 16, company: '(주)주일기업', trade: '방화셔터공사', jobType: '철거/잡사', name: '김강사', phone: '010-5557-9522', ssn: '940713-1XXXXXX', blood: 'M', remark: 'Y', wage: 180000 },
+    { id: 15, company: '(주)주일기업', trade: '방화셔터공사', jobType: '방화셔터시공', name: '홍길동', phone: '010-4209-3618', ssn: '630320-1XXXXXX', blood: 'M', remark: 'N', wage: 170000 },
+    { id: 14, company: '(주)주일기업', trade: '방화셔터공사', jobType: '방화셔터시공', name: '박민수', phone: '010-6396-8603', ssn: '860902-2XXXXXX', blood: 'M', remark: 'N', wage: 200000 },
+    { id: 13, company: '(주)주일기업', trade: '방화셔터공사', jobType: '방화셔터시공', name: '이준호', phone: '010-6364-8466', ssn: '730426-1XXXXXX', blood: 'M', remark: 'N', wage: 180000 },
+    { id: 12, company: '(주)주일기업', trade: '방화셔터공사', jobType: '방화셔터시공', name: '정대호', phone: '010-8559-0517', ssn: '720219-1XXXXXX', blood: 'M', remark: 'N', wage: 180000 },
+    { id: 11, company: '(주)주일기업', trade: '방화셔터공사', jobType: '방화셔터시공', name: '오상호', phone: '010-8971-8806', ssn: '651111-1XXXXXX', blood: 'M', remark: 'N', wage: 200000 },
+    { id: 10, company: '(주)주일기업', trade: '방화셔터공사', jobType: '방화셔터시공', name: '한재영', phone: '010-6261-9738', ssn: '630522-1XXXXXX', blood: 'M', remark: 'N', wage: 200000 },
+    { id: 9, company: '(주)주일기업', trade: '방화셔터공사', jobType: '방화셔터시공', name: '윤성민', phone: '010-6261-8745', ssn: '681216-1XXXXXX', blood: 'M', remark: 'N', wage: 200000 },
+    { id: 8, company: '(주)주일기업', trade: '방화셔터공사', jobType: '방화셔터시공', name: '최동환', phone: '010-3630-1779', ssn: '721212-1XXXXXX', blood: 'M', remark: 'N', wage: 200000 },
+    { id: 7, company: '(주)주일기업', trade: '방화셔터공사', jobType: '철거/잡사', name: '김상준', phone: '010-9272-2342', ssn: '700626-1XXXXXX', blood: 'M', remark: 'N', wage: 180000 },
+    { id: 6, company: '(주)주일기업', trade: '방화셔터공사', jobType: '취기검사시', name: '박현석', phone: '010-1321-1779', ssn: '010413-3XXXXXX', blood: 'M', remark: 'N', wage: 200000 },
+    { id: 5, company: '(주)주일기업', trade: '방화셔터공사', jobType: '방화셔터시공', name: '이종선', phone: '010-4560-5697', ssn: '681029-1XXXXXX', blood: 'M', remark: 'N', wage: 180000 },
+    { id: 4, company: '(주)주일기업', trade: '방화셔터공사', jobType: '방화셔터시공', name: '김상우', phone: '010-5330-0941', ssn: '680609-1XXXXXX', blood: 'M', remark: 'N', wage: 180000 },
+];
+
+const SAMPLE_ATTENDANCE = [
+    { id: 1, company: '(주)주일기업', trade: '방화셔터공사', jobType: '방화셔터시공', name: '김철수', status: '현장소장', task: 'A동 1층 셔터시공', hours: '', wage: 180000 },
+    { id: 2, company: '(주)주일기업', trade: '방화셔터공사', jobType: '방화셔터시공', name: '김영식', status: '현장소장', task: 'A동 3층 셔터시공', hours: '', wage: 200000 },
+    { id: 3, company: '(주)주일기업', trade: '방화셔터공사', jobType: '방화셔터시공', name: '홍길동', status: '현장소장', task: '', hours: '', wage: 170000 },
+    { id: 4, company: '(주)주일기업', trade: '방화셔터공사', jobType: '방화셔터시공', name: '박민수', status: '현장소장', task: '취기검사시', hours: '', wage: 200000 },
+    { id: 5, company: '(주)주일기업', trade: '방화셔터공사', jobType: '방화셔터시공', name: '이준호', status: '현장소장', task: '', hours: '', wage: 170000 },
+    { id: 6, company: '(주)주일기업', trade: '방화셔터공사', jobType: '방화셔터시공', name: '정대호', status: '현장소장', task: '', hours: '', wage: 200000 },
+    { id: 7, company: '(주)주일기업', trade: '방화셔터공사', jobType: '방화셔터시공', name: '오상호', status: '현장소장', task: '', hours: '', wage: 170000 },
+    { id: 8, company: '(주)주일기업', trade: '방화셔터공사', jobType: '방화셔터시공', name: '한재영', status: '현장소장', task: '취기검사시', hours: '', wage: 200000 },
+    { id: 9, company: '(주)주일기업', trade: '방화셔터공사', jobType: '방화셔터시공', name: '윤성민', status: '현장소장', task: 'A동 1층', hours: '', wage: 175000 },
+    { id: 10, company: '(주)주일기업', trade: '방화셔터공사', jobType: '방화셔터시공', name: '최동환', status: '현장소장', task: '', hours: '', wage: 180000 },
+];
+
+/* ════════════════════════════════════════════════
+   탭 1: 인원등록
+   ════════════════════════════════════════════════ */
+function TabRegister() {
+    const [search, setSearch] = useState('');
+    const [company, setCompany] = useState('');
+    const [trade, setTrade] = useState('');
+    const [jobType, setJobType] = useState('');
+
+    const filtered = useMemo(() => {
+        return SAMPLE_WORKERS.filter(w => {
+            if (search && !w.name.includes(search) && !w.jobType.includes(search)) return false;
+            if (company && w.company !== company) return false;
+            if (trade && w.trade !== trade) return false;
+            if (jobType && w.jobType !== jobType) return false;
+            return true;
+        });
+    }, [search, company, trade, jobType]);
+
+    const companies = [...new Set(SAMPLE_WORKERS.map(w => w.company))];
+    const trades = [...new Set(SAMPLE_WORKERS.map(w => w.trade))];
+    const jobTypes = [...new Set(SAMPLE_WORKERS.map(w => w.jobType))];
+
+    return (
+        <div>
+            {/* 필터 */}
+            <div className="flex flex-wrap items-center gap-2 mb-4">
+                <select value={company} onChange={e => setCompany(e.target.value)}
+                    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>
+                <select value={trade} onChange={e => setTrade(e.target.value)}
+                    className="border border-gray-300 rounded px-3 py-1.5 text-sm bg-white">
+                    <option value="">직종선택</option>
+                    {trades.map(t => <option key={t} value={t}>{t}</option>)}
+                </select>
+                <input type="text" placeholder="근로자 또는 현장소" value={search} onChange={e => setSearch(e.target.value)}
+                    className="border border-gray-300 rounded px-3 py-1.5 text-sm" style={{width: 180}} />
+                <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-green-600 text-white px-3 py-1.5 rounded text-sm hover:bg-green-700">부재자기입</button>
+                <button className="bg-gray-200 text-gray-700 px-3 py-1.5 rounded text-sm hover:bg-gray-300">출력</button>
+                <button className="bg-gray-200 text-gray-700 px-3 py-1.5 rounded text-sm hover:bg-gray-300">자재등</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="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" /></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-center 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>
+                            <th className="px-3 py-2.5 text-right font-semibold text-gray-600 whitespace-nowrap">노임단가</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        {filtered.map(w => (
+                            <tr key={w.id} className="border-b border-gray-100 hover:bg-blue-50/30 transition">
+                                <td className="px-3 py-2"><input type="checkbox" /></td>
+                                <td className="px-3 py-2 text-gray-500">{w.id}</td>
+                                <td className="px-3 py-2 text-gray-700">{w.company}</td>
+                                <td className="px-3 py-2 text-gray-700">{w.trade}</td>
+                                <td className="px-3 py-2 text-gray-700">{w.jobType}</td>
+                                <td className="px-3 py-2 font-medium text-gray-800">{w.name}</td>
+                                <td className="px-3 py-2 text-gray-600">{w.phone}</td>
+                                <td className="px-3 py-2 text-gray-600">{w.ssn}</td>
+                                <td className="px-3 py-2 text-center text-gray-600">{w.blood}</td>
+                                <td className="px-3 py-2 text-center">
+                                    <span className={`px-1.5 py-0.5 rounded text-xs font-medium ${w.remark === 'Y' ? 'bg-red-100 text-red-700' : 'text-gray-400'}`}>{w.remark}</span>
+                                </td>
+                                <td className="px-3 py-2 text-right font-mono text-gray-800">{w.wage.toLocaleString()}</td>
+                            </tr>
+                        ))}
+                    </tbody>
+                </table>
+            </div>
+            <div className="flex items-center justify-between mt-3 text-sm text-gray-500">
+                <div>총 {filtered.length}명</div>
+                <div className="flex items-center gap-1">
+                    <button className="px-2 py-1 rounded hover:bg-gray-100">&lt;</button>
+                    <button className="px-2 py-1 rounded bg-blue-600 text-white text-xs">1</button>
+                    <button className="px-2 py-1 rounded hover:bg-gray-100">2</button>
+                    <button className="px-2 py-1 rounded hover:bg-gray-100">&gt;</button>
+                    <select className="border border-gray-300 rounded px-2 py-1 text-xs ml-2">
+                        <option>15</option><option>30</option><option>50</option>
+                    </select>
+                </div>
+            </div>
+        </div>
+    );
+}
+
+/* ════════════════════════════════════════════════
+   탭 2: 출역현황
+   ════════════════════════════════════════════════ */
+function TabAttendance() {
+    const today = new Date().toISOString().slice(0, 10);
+    const [date, setDate] = useState(today);
+
+    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" />
+                <select className="border border-gray-300 rounded px-3 py-1.5 text-sm bg-white">
+                    <option>직종선택</option>
+                </select>
+                <input type="text" placeholder="Search..." 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-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-right font-semibold text-gray-600">노임단가</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        {SAMPLE_ATTENDANCE.map(a => (
+                            <tr key={a.id} className="border-b border-gray-100 hover:bg-blue-50/30 transition">
+                                <td className="px-3 py-2 text-gray-500">{a.id}</td>
+                                <td className="px-3 py-2 text-gray-700">{a.company}</td>
+                                <td className="px-3 py-2 text-gray-700">{a.trade}</td>
+                                <td className="px-3 py-2 text-gray-700">{a.jobType}</td>
+                                <td className="px-3 py-2 font-medium text-gray-800">{a.name}</td>
+                                <td className="px-3 py-2 text-gray-600">{a.status}</td>
+                                <td className="px-3 py-2 text-gray-600">{a.task || '-'}</td>
+                                <td className="px-3 py-2 text-center text-gray-600">{a.hours || '-'}</td>
+                                <td className="px-3 py-2 text-right font-mono text-gray-800">{a.wage.toLocaleString()}</td>
+                            </tr>
+                        ))}
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    );
+}
+
+/* ════════════════════════════════════════════════
+   탭 3: 투입현황(업체별)
+   ════════════════════════════════════════════════ */
+function TabDeployCompany() {
+    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 = [];
+    const s = new Date(startDate), e = new Date(endDate);
+    for (let d = new Date(s); d <= e; d.setDate(d.getDate() + 1)) {
+        dates.push(new Date(d));
+    }
+
+    const data = [
+        { trade: '방화셔터공사', company: '(주)주일기업', firstDate: '2025-12-22', lastDate: '2026-03-12', daily: [10, 7, 10, 0, 12, 10, 10, 10] },
+    ];
+
+    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)} className="text-red-500" />
+                        <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)} className="text-red-500" />
+                        <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-50 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-center font-semibold text-gray-600" rowSpan={2}>최초투입</th>
+                            <th className="px-3 py-2 text-center font-semibold text-gray-600" rowSpan={2}>최종투입</th>
+                            <th className="px-2 py-1 text-center font-semibold text-blue-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-50 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]">
+                                    {d.getDate()}
+                                </th>
+                            ))}
+                        </tr>
+                    </thead>
+                    <tbody>
+                        {data.map((row, i) => (
+                            <tr key={i} className="border-b border-gray-100 hover:bg-blue-50/30">
+                                <td className="px-3 py-2 text-gray-700">{row.trade}</td>
+                                <td className="px-3 py-2 text-gray-700">{row.company}</td>
+                                <td className="px-3 py-2 text-center text-gray-600">{row.firstDate}</td>
+                                <td className="px-3 py-2 text-center text-gray-600">{row.lastDate}</td>
+                                {row.daily.map((v, j) => (
+                                    <td key={j} className={`px-2 py-2 text-center font-mono ${v > 0 ? 'text-gray-800' : 'text-gray-300'}`}>{v || ''}</td>
+                                ))}
+                                <td className="px-3 py-2 text-center font-mono font-bold text-blue-700">{row.daily.reduce((a,b)=>a+b,0)}</td>
+                            </tr>
+                        ))}
+                        <tr className="bg-gray-50 font-bold border-t border-gray-300">
+                            <td className="px-3 py-2" colSpan={4}>합계</td>
+                            {data[0].daily.map((_, j) => {
+                                const sum = data.reduce((s, r) => s + (r.daily[j]||0), 0);
+                                return <td key={j} className={`px-2 py-2 text-center font-mono ${sum > 0 ? 'text-gray-800' : 'text-gray-300'}`}>{sum || ''}</td>;
+                            })}
+                            <td className="px-3 py-2 text-center font-mono text-blue-700">
+                                {data.reduce((s, r) => s + r.daily.reduce((a,b)=>a+b,0), 0)}
+                            </td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    );
+}
+
+/* ════════════════════════════════════════════════
+   탭 4: 투입현황(근로자별)
+   ════════════════════════════════════════════════ */
+function TabDeployWorker() {
+    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 = [];
+    const s = new Date(startDate), e = new Date(endDate);
+    for (let d = new Date(s); d <= e; d.setDate(d.getDate() + 1)) {
+        dates.push(new Date(d));
+    }
+
+    const workers = [
+        { company:'(주)주일기업', trade:'방화셔터공사', jobType:'현장소장', name:'김철수', daily:[1,1,1,0,1,1,1,1], wage:170000, remark:'' },
+        { company:'(주)주일기업', trade:'방화셔터공사', jobType:'방화셔터시공', name:'김영식', daily:[1,1,1,0,1,1,1,1], wage:200000, remark:'' },
+        { company:'(주)주일기업', trade:'방화셔터공사', jobType:'방화셔터시공', name:'홍길동', daily:[1,0,1,0,1,1,1,1], wage:170000, remark:'' },
+        { company:'(주)주일기업', trade:'방화셔터공사', jobType:'취기검사시', name:'박현석', daily:[1,1,1,0,1,1,1,1], wage:200000, remark:'' },
+        { company:'(주)주일기업', trade:'방화셔터공사', jobType:'방화셔터시공', name:'이준호', daily:[1,1,1,0,1,1,1,1], wage:200000, remark:'' },
+        { company:'(주)주일기업', trade:'방화셔터공사', jobType:'방화셔터시공', name:'정대호', daily:[1,0,0,0,1,1,1,1], wage:180000, remark:'' },
+        { company:'(주)주일기업', trade:'방화셔터공사', jobType:'철거/잡사', name:'김강사', daily:[0,1,1,0,1,1,1,1], wage:180000, remark:'' },
+        { company:'(주)주일기업', trade:'방화셔터공사', jobType:'방화셔터시공', name:'오상호', daily:[1,0,1,0,1,0,1,1], wage:180000, remark:'' },
+        { company:'(주)주일기업', trade:'방화셔터공사', jobType:'방화셔터시공', name:'한재영', daily:[1,1,0,0,1,1,0,1], wage:180000, remark:'작업정상' },
+        { company:'(주)주일기업', trade:'방화셔터공사', jobType:'방화셔터시공', name:'윤성민', daily:[1,0,1,0,1,0,1,0], wage:170000, remark:'' },
+        { company:'(주)주일기업', trade:'방화셔터공사', jobType:'방화셔터시공', name:'최동환', daily:[0,1,1,0,0,1,0,1], wage:170000, remark:'' },
+    ];
+
+    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 flex items-center gap-2">
+                    <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="vb2" 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="pd2" 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>
+                <span className="ml-2 text-gray-500">근로자별</span>
+            </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-50 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-3 py-2 text-left font-semibold text-gray-600" rowSpan={2}>이름</th>
+                            <th className="px-2 py-1 text-center font-semibold text-blue-600 border-b border-gray-200" colSpan={dates.length}>
+                                {startDate.slice(0,7)}
+                            </th>
+                            <th className="px-3 py-2 text-right font-semibold text-gray-600" rowSpan={2}>노임단가</th>
+                            <th className="px-3 py-2 text-right font-semibold text-gray-600" rowSpan={2}>합계</th>
+                            <th className="px-3 py-2 text-left font-semibold text-gray-600" rowSpan={2}>비고</th>
+                        </tr>
+                        <tr className="bg-gray-50 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]">
+                                    {d.getDate()}
+                                </th>
+                            ))}
+                        </tr>
+                    </thead>
+                    <tbody>
+                        {workers.map((w, i) => {
+                            const total = w.daily.reduce((a,b) => a+b, 0);
+                            const totalWage = total * w.wage;
+                            return (
+                                <tr key={i} className="border-b border-gray-100 hover:bg-blue-50/30">
+                                    <td className="px-3 py-2 text-gray-700">{w.company}</td>
+                                    <td className="px-3 py-2 text-gray-700">{w.trade}</td>
+                                    <td className="px-3 py-2 text-gray-700">{w.jobType}</td>
+                                    <td className="px-3 py-2 font-medium text-gray-800">{w.name}</td>
+                                    {w.daily.map((v, j) => (
+                                        <td key={j} className={`px-2 py-2 text-center font-mono ${v ? 'text-gray-800' : 'text-gray-300'}`}>{v || ''}</td>
+                                    ))}
+                                    <td className="px-3 py-2 text-right font-mono text-gray-700">{w.wage.toLocaleString()}</td>
+                                    <td className="px-3 py-2 text-right font-mono font-bold text-blue-700">{totalWage.toLocaleString()}</td>
+                                    <td className="px-3 py-2 text-gray-500 text-xs">{w.remark}</td>
+                                </tr>
+                            );
+                        })}
+                        <tr className="bg-gray-50 font-bold border-t border-gray-300">
+                            <td className="px-3 py-2" colSpan={4}>합계</td>
+                            {dates.map((_, j) => {
+                                const sum = workers.reduce((s, w) => s + (w.daily[j]||0), 0);
+                                return <td key={j} className={`px-2 py-2 text-center font-mono ${sum ? 'text-gray-800' : 'text-gray-300'}`}>{sum || ''}</td>;
+                            })}
+                            <td className="px-3 py-2"></td>
+                            <td className="px-3 py-2 text-right font-mono text-blue-700">
+                                {workers.reduce((s, w) => s + w.daily.reduce((a,b)=>a+b,0) * w.wage, 0).toLocaleString()}
+                            </td>
+                            <td></td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    );
+}
+
+/* ════════════════════════════════════════════════
+   메인 컴포넌트
+   ════════════════════════════════════════════════ */
+const TABS = [
+    { id: 'register', label: '인원등록' },
+    { id: 'attendance', label: '출역현황' },
+    { id: 'deploy-company', label: '투입현황(업체별)' },
+    { id: 'deploy-worker', label: '투입현황(근로자별)' },
+];
+
+function WorkforceApp() {
+    const [activeTab, setActiveTab] = useState('register');
+
+    return (
+        <div className="flex bg-gray-100" style={{ height: 'calc(100vh - 56px)' }}>
+            <PmisSidebar activePage="workforce" />
+            <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> &gt; <span>시공관리</span> &gt; <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 === 'deploy-company' && <TabDeployCompany />}
+                    {activeTab === 'deploy-worker' && <TabDeployWorker />}
+                </div>
+            </div>
+        </div>
+    );
+}
+
+ReactDOM.render(<WorkforceApp />, document.getElementById('root'));
+@endverbatim
+</script>
+@endpush
diff --git a/routes/web.php b/routes/web.php
index d73a1035..7b5295cf 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -1730,6 +1730,14 @@
     Route::put('/construction-pmis/profile', [PlanningController::class, 'pmisProfileUpdate'])->name('construction-pmis.profile.update');
     Route::get('/construction-pmis/bim-viewer', [PlanningController::class, 'bimViewer'])->name('construction-pmis.bim-viewer');
 
+    // 시공관리
+    Route::get('/construction-pmis/workforce', [PlanningController::class, 'pmisWorkforce'])->name('construction-pmis.workforce');
+    Route::get('/construction-pmis/equipment', [PlanningController::class, 'pmisEquipment'])->name('construction-pmis.equipment');
+    Route::get('/construction-pmis/materials', [PlanningController::class, 'pmisMaterials'])->name('construction-pmis.materials');
+    Route::get('/construction-pmis/work-volume', [PlanningController::class, 'pmisWorkVolume'])->name('construction-pmis.work-volume');
+    Route::get('/construction-pmis/daily-attendance', [PlanningController::class, 'pmisDailyAttendance'])->name('construction-pmis.daily-attendance');
+    Route::get('/construction-pmis/daily-report', [PlanningController::class, 'pmisDailyReport'])->name('construction-pmis.daily-report');
+
     // 공사현장 사진대지
     Route::prefix('construction-photos')->name('construction-photos.')->group(function () {
         Route::get('/', [ConstructionSitePhotoController::class, 'index'])->name('index');