wixon/jongryangje
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial project import for team collaboration.

Browse Source 
Exclude local docs, MCP, and secrets via gitignore.

Made-with: Cursor
This commit is contained in:
taekyoungc
2026-03-25 12:05:33 +09:00
commit 4e557d4be1
153 changed files with 16198 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

637
app/Views/bag/daily_inventory.php Normal file
View File

@@ -0,0 +1,637 @@
<?php
helper('admin');
$siteNavTree = get_site_nav_tree();
?>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>쓰레기봉투 물류시스템</title>
<!-- Tailwind CSS v3 with Plugins -->
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<!-- Font: Noto Sans KR -->
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700&amp;display=swap" rel="stylesheet"/>
<!-- Tailwind Configuration for Custom Colors and Fonts -->
<script>
tailwind.config = {
theme: {
extend: {
fontFamily: {
sans: ['"Malgun Gothic"', '"Noto Sans KR"', 'sans-serif'],
},
colors: {
'system-header': '#ffffff',
'title-bar': '#2c3e50',
'control-panel': '#f8f9fa',
'btn-search': '#1c4e80',
'btn-excel-border': '#28a745',
'btn-excel-text': '#28a745',
'btn-print-border': '#ced4da',
'btn-print-text': '#000000',
'btn-exit': '#d9534f',
},
fontSize: {
'xxs': '0.65rem',
}
}
}
}
</script>
<!-- Custom CSS for Table Specifics and Scrollbars -->
<style data-purpose="table-layout">
/* High density table styles */
.data-table {
width: 100%;
border-collapse: collapse;
font-family: 'Malgun Gothic', 'Noto Sans KR', sans-serif;
}
.data-table th, .data-table td {
border: 1px solid #ccc;
padding: 4px 8px;
white-space: nowrap;
font-size: 13px;
}
.data-table th {
background-color: #e9ecef;
text-align: center;
vertical-align: middle;
font-weight: bold;
color: #333;
}
/* Zebra striping */
.data-table tbody tr:nth-child(even) td:not([rowspan]) {
background-color: #f9f9f9;
}
.data-table tbody tr:nth-child(even) {
background-color: #f9f9f9;
}
.data-table tbody tr:hover td {
background-color: #e6f7ff !important;
}
/* Column specific alignments handled by classes in HTML, but defaults: */
.text-left { text-align: left !important; }
.text-right { text-align: right !important; }
.text-center { text-align: center !important; }
/* Layout utilities */
body {
overflow: hidden;
}
.main-content-area {
height: calc(100vh - 170px);
overflow: auto;
}
</style>
</head>
<body class="bg-gray-100 text-gray-800 flex flex-col h-screen select-none">
<!-- BEGIN: Top Navigation -->
<header class="bg-white border-b border-gray-300 h-12 flex items-center justify-between px-4 shrink-0 z-20">
<div class="flex items-center gap-4">
<!-- Logo: 파란색 사각형에 흰색 사각형 두 개 겹친 형태 (데스크톱 앱 아이콘 스타일) -->
<div class="flex items-center gap-2">
<div class="w-6 h-6 flex items-center justify-center shrink-0">
<svg class="h-5 w-5" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
<rect width="16" height="16" fill="#2563eb"/>
<rect x="2" y="2" width="7" height="7" fill="white"/>
<rect x="5" y="5" width="9" height="9" fill="white"/>
</svg>
</div>
<a href="<?= base_url() ?>" class="text-base font-semibold text-gray-800 tracking-tight hover:text-blue-600">쓰레기봉투 물류시스템</a>
</div>
</div>
<!-- Nav Links -->
<nav class="hidden md:flex gap-5 text-sm font-medium text-gray-600">
<?php if (! empty($siteNavTree)): ?>
<?php
$uriObj = service('request')->getUri();
$currentPath = trim((string) $uriObj->getPath(), '/');
if (str_starts_with($currentPath, 'index.php/')) {
$currentPath = substr($currentPath, strlen('index.php/'));
}
?>
<?php foreach ($siteNavTree as $navItem): ?>
<?php $isActive = ($currentPath === trim((string) $navItem->mm_link, '/')); ?>
<div class="relative group">
<a class="<?= $isActive ? 'text-blue-700 font-bold border-b-2 border-blue-700 pb-3 -mb-3' : 'hover:text-blue-600' ?>"
href="<?= base_url($navItem->mm_link) ?>">
<?= esc($navItem->mm_name) ?>
</a>
<?php if (! empty($navItem->children)): ?>
<div class="absolute left-0 top-full hidden group-hover:block bg-white border border-gray-200 rounded shadow-lg min-w-[10rem] z-30">
<?php foreach ($navItem->children as $child): ?>
<a href="<?= base_url($child->mm_link) ?>"
class="block px-3 py-1.5 text-sm text-gray-700 hover:bg-blue-50 whitespace-nowrap">
<?= esc($child->mm_name) ?>
</a>
<?php endforeach; ?>
</div>
<?php endif; ?>
</div>
<?php endforeach; ?>
<?php else: ?>
<!-- DB 메뉴 미구현 시 기존 더미 메뉴 사용 -->
<a class="hover:text-blue-600" href="#">기본정보관리</a>
<a class="hover:text-blue-600" href="#">발주 입고 관리</a>
<a class="hover:text-blue-600" href="#">불출 관리</a>
<a class="text-blue-700 font-bold border-b-2 border-blue-700 pb-3 -mb-3" href="#">재고 관리</a>
<a class="hover:text-blue-600" href="#">판매 관리</a>
<a class="hover:text-blue-600" href="#">판매 현황</a>
<a class="hover:text-blue-600" href="#">봉투 수불 관리</a>
<a class="hover:text-blue-600" href="#">통계 분석 관리</a>
<a class="hover:text-blue-600" href="#">창</a>
<a class="hover:text-blue-600" href="#">도움말</a>
<?php endif; ?>
</nav>
<?php
$mbLevel = (int) session()->get('mb_level');
$isAdmin = ($mbLevel === \Config\Roles::LEVEL_SUPER_ADMIN || $mbLevel === \Config\Roles::LEVEL_LOCAL_ADMIN);
?>
<!-- 관리자 이동 버튼(관리자만) · 종료 -->
<div class="flex items-center gap-2">
<?php if ($isAdmin): ?>
<a href="<?= base_url('admin') ?>" class="bg-btn-search text-white px-3 py-1.5 rounded-sm flex items-center gap-1 text-sm shadow hover:opacity-90 transition border border-transparent" title="관리자">관리자</a>
<?php endif; ?>
<a href="<?= base_url('logout') ?>" class="text-gray-500 hover:text-red-600 transition-colors inline-block p-1 rounded hover:bg-red-50" title="로그아웃">
<svg class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M6 18L18 6M6 6l12 12" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</a>
</div>
</header>
<!-- END: Top Navigation -->
<?php if (session()->getFlashdata('success')): ?>
<div class="mx-4 mt-2 p-3 rounded-lg bg-green-50 text-green-700 text-sm" role="alert">
<?= esc(session()->getFlashdata('success')) ?>
</div>
<?php endif; ?>
<!-- BEGIN: Title Bar -->
<div class="bg-title-bar text-white px-4 py-2 text-sm font-medium flex items-center shrink-0 w-full">
<span class="opacity-80 mr-2">[w_gm804r]</span>
<span>일일 봉투 수불 현황</span>
</div>
<!-- END: Title Bar -->
<!-- BEGIN: Control Panel -->
<section class="border-b border-gray-300 p-2 shrink-0 bg-control-panel">
<div class="flex flex-wrap items-center justify-between gap-y-2">
<!-- Filter Inputs -->
<div class="flex items-center gap-4 text-sm whitespace-nowrap overflow-x-auto pb-1 md:pb-0">
<div class="flex items-center gap-2">
<label class="font-bold text-gray-700">조회기간:</label>
<div class="flex items-center bg-white border border-gray-300 rounded px-2 py-1">
<input class="w-24 text-center border-none p-0 focus:ring-0 text-sm" type="text" value="2024.01.01"/>
<span class="mx-1">~</span>
<input class="w-24 text-center border-none p-0 focus:ring-0 text-sm" type="text" value="2025.12.12"/>
<svg class="w-4 h-4 text-gray-400 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path></svg>
</div>
</div>
<div class="flex items-center gap-2">
<label class="font-bold text-gray-700">봉투구분:</label>
<select class="border border-gray-300 rounded py-1 pl-2 pr-8 text-sm focus:ring-blue-500 focus:border-blue-500">
<option>전체</option>
</select>
</div>
<div class="flex items-center gap-2">
<label class="font-bold text-gray-700">봉투형식:</label>
<select class="border border-gray-300 rounded py-1 pl-2 pr-8 text-sm focus:ring-blue-500 focus:border-blue-500">
<option>전체 봉투</option>
</select>
</div>
<div class="flex items-center gap-2">
<label class="font-bold text-gray-700">대행소:</label>
<select class="border border-gray-300 rounded py-1 pl-2 pr-8 text-sm focus:ring-blue-500 focus:border-blue-500">
<option>북구</option>
</select>
</div>
</div>
<!-- Action Buttons -->
<div class="flex items-center gap-1.5 ml-auto">
<button class="bg-btn-search text-white px-4 py-1.5 rounded-sm flex items-center gap-1 text-sm shadow hover:opacity-90 transition border border-transparent">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path></svg>
조회
</button>
<button class="bg-white text-btn-excel-text border border-btn-excel-border px-3 py-1.5 rounded-sm flex items-center gap-1 text-sm shadow hover:bg-green-50 transition">
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8l-6-6zm-1 2l5 5h-5V4zM6 20V4h5v7h7v9H6z"></path></svg>
엑셀저장
</button>
<button class="bg-white text-black border border-btn-print-border px-3 py-1.5 rounded-sm flex items-center gap-1 text-sm shadow hover:bg-gray-50 transition">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path d="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path></svg>
인쇄
</button>
<a href="<?= base_url('logout') ?>" class="bg-btn-exit text-white px-3 py-1.5 rounded-sm flex items-center gap-1 text-sm shadow hover:bg-red-700 transition border border-transparent">
<svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M6 18L18 6M6 6l12 12" stroke-linecap="round" stroke-linejoin="round"></path></svg>
종료
</a>
</div>
</div>
</section>
<!-- END: Control Panel -->
<!-- BEGIN: Main Content Area (Table) -->
<main class="main-content-area flex-grow bg-white p-2">
<div class="border border-gray-300 h-full overflow-auto">
<table class="w-full data-table border-collapse">
<!-- BEGIN: Table Head -->
<thead><tr>
<th class="w-[100px] bg-gray-100 border border-gray-300" rowspan="2">일자</th>
<th class="min-w-[200px] bg-gray-100 border border-gray-300" rowspan="2">품 목</th>
<th class="w-[80px] bg-gray-100 border border-gray-300" rowspan="2">전일재고</th>
<th class="bg-gray-100 border border-gray-300" colspan="3">입고</th>
<th class="bg-gray-100 border border-gray-300" colspan="5">출고</th>
<th class="w-[80px] bg-gray-100 border border-gray-300" rowspan="2">잔량</th>
</tr>
<tr>
<!-- Under 입고 -->
<th class="w-[80px] bg-gray-100 border border-gray-300">입고</th>
<th class="w-[80px] bg-gray-100 border border-gray-300">반품</th>
<th class="w-[80px] bg-gray-100 border border-gray-300">입고계</th>
<!-- Under 출고 -->
<th class="w-[80px] bg-gray-100 border border-gray-300">판매</th>
<th class="w-[120px] bg-gray-100 border border-gray-300">일반불출/무료불출</th>
<th class="w-[80px] bg-gray-100 border border-gray-300">반품</th>
<th class="w-[80px] bg-gray-100 border border-gray-300">기타</th>
<th class="w-[80px] bg-gray-100 border border-gray-300">출고계</th>
</tr></thead>
<!-- END: Table Head -->
<!-- BEGIN: Table Body -->
<tbody class="text-right"><!-- Row 1 -->
<tr>
<td class="align-top text-center bg-white" rowspan="22">2024.01.01</td>
<td class="text-left pl-2">일반용 5L</td>
<td class="text-right pr-2">187,240</td>
<td class="text-right pr-2"></td>
<td class="text-right pr-2"></td>
<td class="text-right pr-2 bg-gray-50">0</td>
<td class="text-right pr-2">0</td>
<td class="text-right pr-2"></td>
<td class="text-right pr-2"></td>
<td class="text-right pr-2">0</td>
<td class="text-right pr-2 bg-gray-50">0</td>
<td class="text-right pr-2">187,240</td>
</tr>
<!-- Row 2 -->
<tr>
<td class="text-left pl-2">일반용 5L</td>
<td class="text-right pr-2">0</td>
<td class="text-right pr-2"></td>
<td class="text-right pr-2"></td>
<td class="text-right pr-2 bg-gray-50">0</td>
<td class="text-right pr-2">0</td>
<td class="text-right pr-2"></td>
<td class="text-right pr-2"></td>
<td class="text-right pr-2">0</td>
<td class="text-right pr-2 bg-gray-50">0</td>
<td class="text-right pr-2">0</td>
</tr>
<!-- Row 3 -->
<tr>
<td class="text-left pl-2">일반용 10L</td>
<td class="text-right pr-2">159,428</td>
<td class="text-right pr-2">252,000</td>
<td class="text-right pr-2"></td>
<td class="text-right pr-2 bg-gray-50">252,800</td>
<td class="text-right pr-2">8,580</td>
<td class="text-right pr-2"></td>
<td class="text-right pr-2"></td>
<td class="text-right pr-2">8,580</td>
<td class="text-right pr-2 bg-gray-50">8,990</td>
<td class="text-right pr-2">402,848</td>
</tr>
<!-- Row 4 -->
<tr>
<td class="text-left pl-2">일반용 20L</td>
<td class="text-right pr-2">212,082</td>
<td class="text-right pr-2">201,000</td>
<td class="text-right pr-2"></td>
<td class="text-right pr-2 bg-gray-50">201,600</td>
<td class="text-right pr-2">11,320</td>
<td class="text-right pr-2"></td>
<td class="text-right pr-2"></td>
<td class="text-right pr-2">11,320</td>
<td class="text-right pr-2 bg-gray-50">11,320</td>
<td class="text-right pr-2">402,365</td>
</tr>
<!-- Row 5 -->
<tr>
<td class="text-left pl-2">일반용 50L</td>
<td class="text-right pr-2">7,605</td>
<td class="text-right pr-2">13,000</td>
<td class="text-right pr-2"></td>
<td class="text-right pr-2 bg-gray-50">13,000</td>
<td class="text-right pr-2">540</td>
<td class="text-right pr-2"></td>
<td class="text-right pr-2"></td>
<td class="text-right pr-2">540</td>
<td class="text-right pr-2 bg-gray-50">540</td>
<td class="text-right pr-2">20,065</td>
</tr>
<!-- Row 6 -->
<tr>
<td class="text-left pl-2">일반용 75L</td>
<td class="text-right pr-2">31,459</td>
<td class="text-right pr-2">22,600</td>
<td class="text-right pr-2"></td>
<td class="text-right pr-2 bg-gray-50">22,600</td>
<td class="text-right pr-2">2,990</td>
<td class="text-right pr-2"></td>
<td class="text-right pr-2"></td>
<td class="text-right pr-2">2,090</td>
<td class="text-right pr-2 bg-gray-50">3,640</td>
<td class="text-right pr-2">86,240</td>
</tr>
<!-- Row 7 -->
<tr>
<td class="text-left pl-2">일반용 100L</td>
<td class="text-right pr-2">11</td>
<td class="text-right pr-2"></td>
<td class="text-right pr-2"></td>
<td class="text-right pr-2 bg-gray-50">0</td>
<td class="text-right pr-2"></td>
<td class="text-right pr-2"></td>
<td class="text-right pr-2"></td>
<td class="text-right pr-2">0</td>
<td class="text-right pr-2 bg-gray-50">0</td>
<td class="text-right pr-2">11</td>
</tr>
<!-- Row 8 -->
<tr>
<td class="text-left pl-2">일반용 70L</td>
<td class="text-right pr-2">77,400</td>
<td class="text-right pr-2"></td>
<td class="text-right pr-2"></td>
<td class="text-right pr-2 bg-gray-50">0</td>
<td class="text-right pr-2"></td>
<td class="text-right pr-2">1,000</td>
<td class="text-right pr-2"></td>
<td class="text-right pr-2">1,000</td>
<td class="text-right pr-2 bg-gray-50">1,000</td>
<td class="text-right pr-2">76,400</td>
</tr>
<!-- Row 9 -->
<tr>
<td class="text-left pl-2">공동주택용 20L</td>
<td class="text-right pr-2">0</td>
<td class="text-right pr-2"></td>
<td class="text-right pr-2"></td>
<td class="text-right pr-2 bg-gray-50">0</td>
<td class="text-right pr-2"></td>
<td class="text-right pr-2"></td>
<td class="text-right pr-2"></td>
<td class="text-right pr-2">0</td>
<td class="text-right pr-2 bg-gray-50">0</td>
<td class="text-right pr-2"></td>
</tr>
<!-- Row 10 -->
<tr>
<td class="text-left pl-2">공동주택용 50L</td>
<td class="text-right pr-2">0</td>
<td class="text-right pr-2"></td>
<td class="text-right pr-2"></td>
<td class="text-right pr-2 bg-gray-50">0</td>
<td class="text-right pr-2"></td>
<td class="text-right pr-2"></td>
<td class="text-right pr-2"></td>
<td class="text-right pr-2">0</td>
<td class="text-right pr-2 bg-gray-50">0</td>
<td class="text-right pr-2"></td>
</tr>
<!-- Row 11 -->
<tr>
<td class="text-left pl-2">공동주택용 120L</td>
<td class="text-right pr-2">11</td>
<td class="text-right pr-2"></td>
<td class="text-right pr-2"></td>
<td class="text-right pr-2 bg-gray-50">0</td>
<td class="text-right pr-2"></td>
<td class="text-right pr-2"></td>
<td class="text-right pr-2"></td>
<td class="text-right pr-2">0</td>
<td class="text-right pr-2 bg-gray-50">0</td>
<td class="text-right pr-2"></td>
</tr>
<!-- Row 12 -->
<tr>
<td class="text-left pl-2">재사용 봉투</td>
<td class="text-right pr-2">58,540</td>
<td class="text-right pr-2">27,000</td>
<td class="text-right pr-2"></td>
<td class="text-right pr-2 bg-gray-50">27,000</td>
<td class="text-right pr-2">560</td>
<td class="text-right pr-2"></td>
<td class="text-right pr-2"></td>
<td class="text-right pr-2">560</td>
<td class="text-right pr-2 bg-gray-50">560</td>
<td class="text-right pr-2">84,990</td>
</tr>
<!-- Row 13 -->
<tr>
<td class="text-left pl-2">음식물 2L</td>
<td class="text-right pr-2">0</td>
<td class="text-right pr-2"></td>
<td class="text-right pr-2"></td>
<td class="text-right pr-2 bg-gray-50">0</td>
<td class="text-right pr-2"></td>
<td class="text-right pr-2"></td>
<td class="text-right pr-2"></td>
<td class="text-right pr-2">0</td>
<td class="text-right pr-2 bg-gray-50">0</td>
<td class="text-right pr-2"></td>
</tr>
<!-- Row 14 -->
<tr>
<td class="text-left pl-2">음식물 스티커 1L</td>
<td class="text-right pr-2">376,758</td>
<td class="text-right pr-2"></td>
<td class="text-right pr-2"></td>
<td class="text-right pr-2 bg-gray-50">0</td>
<td class="text-right pr-2">100</td>
<td class="text-right pr-2"></td>
<td class="text-right pr-2"></td>
<td class="text-right pr-2">100</td>
<td class="text-right pr-2 bg-gray-50">180</td>
<td class="text-right pr-2">376,658</td>
</tr>
<!-- Row 15 -->
<tr>
<td class="text-left pl-2">음식물 스티커 2L</td>
<td class="text-right pr-2">231,542</td>
<td class="text-right pr-2"></td>
<td class="text-right pr-2"></td>
<td class="text-right pr-2 bg-gray-50">0</td>
<td class="text-right pr-2">100</td>
<td class="text-right pr-2"></td>
<td class="text-right pr-2"></td>
<td class="text-right pr-2">100</td>
<td class="text-right pr-2 bg-gray-50">100</td>
<td class="text-right pr-2">231,422</td>
</tr>
<!-- Row 16 -->
<tr>
<td class="text-left pl-2">음식물 스티커 3L</td>
<td class="text-right pr-2">529,938</td>
<td class="text-right pr-2"></td>
<td class="text-right pr-2"></td>
<td class="text-right pr-2 bg-gray-50">0</td>
<td class="text-right pr-2">1,200</td>
<td class="text-right pr-2"></td>
<td class="text-right pr-2"></td>
<td class="text-right pr-2">1,200</td>
<td class="text-right pr-2 bg-gray-50">1,200</td>
<td class="text-right pr-2">529,738</td>
</tr>
<!-- Row 17 -->
<tr>
<td class="text-left pl-2">음식물 스티커 70L</td>
<td class="text-right pr-2">751,036</td>
<td class="text-right pr-2"></td>
<td class="text-right pr-2"></td>
<td class="text-right pr-2 bg-gray-50">0</td>
<td class="text-right pr-2">1,400</td>
<td class="text-right pr-2"></td>
<td class="text-right pr-2"></td>
<td class="text-right pr-2">1,400</td>
<td class="text-right pr-2 bg-gray-50">1,400</td>
<td class="text-right pr-2">750,030</td>
</tr>
<!-- Row 18 -->
<tr>
<td class="text-left pl-2">음식물 스티커 60L</td>
<td class="text-right pr-2">0</td>
<td class="text-right pr-2"></td>
<td class="text-right pr-2"></td>
<td class="text-right pr-2 bg-gray-50">0</td>
<td class="text-right pr-2"></td>
<td class="text-right pr-2"></td>
<td class="text-right pr-2"></td>
<td class="text-right pr-2">0</td>
<td class="text-right pr-2 bg-gray-50">0</td>
<td class="text-right pr-2">6</td>
</tr>
<!-- Row 19 -->
<tr>
<td class="text-left pl-2">음식물 스티커 120L</td>
<td class="text-right pr-2">209,743</td>
<td class="text-right pr-2"></td>
<td class="text-right pr-2"></td>
<td class="text-right pr-2 bg-gray-50">0</td>
<td class="text-right pr-2">80</td>
<td class="text-right pr-2"></td>
<td class="text-right pr-2"></td>
<td class="text-right pr-2">80</td>
<td class="text-right pr-2 bg-gray-50">80</td>
<td class="text-right pr-2">209,663</td>
</tr>
<!-- Row 20 -->
<tr>
<td class="text-left pl-2">폐기물 스티커 1,000원</td>
<td class="text-right pr-2">161,676</td>
<td class="text-right pr-2"></td>
<td class="text-right pr-2"></td>
<td class="text-right pr-2 bg-gray-50">0</td>
<td class="text-right pr-2">300</td>
<td class="text-right pr-2"></td>
<td class="text-right pr-2"></td>
<td class="text-right pr-2">300</td>
<td class="text-right pr-2 bg-gray-50">300</td>
<td class="text-right pr-2">161,376</td>
</tr>
<!-- Row 21 -->
<tr>
<td class="text-left pl-2">폐기물 스티커 3,000원</td>
<td class="text-right pr-2">98,018</td>
<td class="text-right pr-2"></td>
<td class="text-right pr-2"></td>
<td class="text-right pr-2 bg-gray-50">0</td>
<td class="text-right pr-2">120</td>
<td class="text-right pr-2"></td>
<td class="text-right pr-2"></td>
<td class="text-right pr-2">120</td>
<td class="text-right pr-2 bg-gray-50">120</td>
<td class="text-right pr-2">97,999</td>
</tr>
<!-- Row 22 -->
<tr>
<td class="text-left pl-2">폐기물 스티커 5,000원</td>
<td class="text-right pr-2">61,631</td>
<td class="text-right pr-2"></td>
<td class="text-right pr-2"></td>
<td class="text-right pr-2 bg-gray-50">0</td>
<td class="text-right pr-2">40</td>
<td class="text-right pr-2"></td>
<td class="text-right pr-2"></td>
<td class="text-right pr-2">40</td>
<td class="text-right pr-2 bg-gray-50">40</td>
<td class="text-right pr-2">61,591</td>
</tr>
<!-- Next Date Group Placeholder for later expansion or testing -->
<tr>
<td class="align-top text-center bg-white border-t-2 border-gray-400" rowspan="4">2024.01.03</td>
<td class="text-left pl-2 border-t-2 border-gray-400">폐기물 스티커 10,000원</td>
<td class="text-right pr-2 border-t-2 border-gray-400">44,860</td>
<td class="text-right pr-2 border-t-2 border-gray-400"></td>
<td class="text-right pr-2 border-t-2 border-gray-400"></td>
<td class="text-right pr-2 bg-gray-50 border-t-2 border-gray-400">0</td>
<td class="text-right pr-2 border-t-2 border-gray-400"></td>
<td class="text-right pr-2 border-t-2 border-gray-400"></td>
<td class="text-right pr-2 border-t-2 border-gray-400"></td>
<td class="text-right pr-2 border-t-2 border-gray-400">0</td>
<td class="text-right pr-2 bg-gray-50 border-t-2 border-gray-400">0</td>
<td class="text-right pr-2 border-t-2 border-gray-400">44,860</td>
</tr>
<tr>
<td class="text-left pl-2">일반용 5L</td>
<td class="text-right pr-2">187,240</td>
<td class="text-right pr-2"></td>
<td class="text-right pr-2"></td>
<td class="text-right pr-2 bg-gray-50">0</td>
<td class="text-right pr-2"></td>
<td class="text-right pr-2"></td>
<td class="text-right pr-2"></td>
<td class="text-right pr-2">0</td>
<td class="text-right pr-2 bg-gray-50">0</td>
<td class="text-right pr-2">187,240</td>
</tr>
<tr>
<td class="text-left pl-2">일반용 10L</td>
<td class="text-right pr-2">402,848</td>
<td class="text-right pr-2"></td>
<td class="text-right pr-2"></td>
<td class="text-right pr-2 bg-gray-50">0</td>
<td class="text-right pr-2"></td>
<td class="text-right pr-2"></td>
<td class="text-right pr-2"></td>
<td class="text-right pr-2">0</td>
<td class="text-right pr-2 bg-gray-50">0</td>
<td class="text-right pr-2">402,848</td>
</tr>
<tr>
<td class="text-left pl-2">일반용 10L</td>
<td class="text-right pr-2">402,365</td>
<td class="text-right pr-2"></td>
<td class="text-right pr-2"></td>
<td class="text-right pr-2 bg-gray-50">0</td>
<td class="text-right pr-2"></td>
<td class="text-right pr-2"></td>
<td class="text-right pr-2"></td>
<td class="text-right pr-2">0</td>
<td class="text-right pr-2 bg-gray-50">0</td>
<td class="text-right pr-2">402,365</td>
</tr></tbody>
<!-- END: Table Body -->
</table>
</div>
</main>
<!-- END: Main Content Area -->
<!-- BEGIN: Footer -->
<footer class="bg-gray-200 border-t border-gray-300 px-4 py-1 text-xs text-gray-600 flex items-center justify-between shrink-0">
<div>Ready.....</div>
<div class="flex gap-4">
<span>북구</span>
<span>Ver..</span>
<span>2025.12.12 (금) 3:00:32PM</span>
</div>
</footer>
<!-- END: Footer -->
</body>
</html>

347
app/Views/bag/inventory_inquiry.php Normal file
View File

@@ -0,0 +1,347 @@
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>스마트 폐기물 관리 시스템 - 재고 관리</title>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet"/>
<style data-purpose="custom-styles">
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700&display=swap');
body {
font-family: 'Noto Sans KR', sans-serif;
background-color: #f1f5f9; /* Tailwind slate-100 */
}
/* Table Styles */
.custom-table th, .custom-table td {
border: 1px solid #cbd5e1; /* Tailwind slate-300 */
}
.custom-table th {
background-color: #eaeaea;
font-weight: 500;
color: #334155;
padding: 0.5rem;
text-align: center;
vertical-align: middle;
}
.custom-table td {
padding: 0.5rem;
color: #334155; /* Tailwind slate-700 */
background-color: #ffffff;
}
.custom-table tbody tr:hover td {
background-color: #f8fafc; /* Tailwind slate-50 */
}
/* Scrollbar for table container */
.table-container {
max-height: calc(100vh - 200px);
overflow-y: auto;
}
/* Sidebar active state */
.sidebar-link.active {
background-color: #e0f0ff;
color: #1e548a;
}
</style>
</head>
<body class="h-screen flex flex-col overflow-hidden text-sm">
<!-- BEGIN: Top Header -->
<header class="bg-white border-b border-slate-200 h-14 flex items-center justify-between px-4 shrink-0">
<div class="flex items-center gap-2">
<div class="w-8 h-8 bg-green-500 rounded-md flex items-center justify-center text-white">
<i class="fa-solid fa-leaf"></i>
</div>
<h1 class="text-xl font-bold text-slate-800">스마트 폐기물 관리 시스템</h1>
</div>
<div>
<button class="p-2 text-slate-500 hover:text-slate-700">
<i class="fa-solid fa-arrow-right-from-bracket text-lg"></i>
</button>
</div>
</header>
<!-- END: Top Header -->
<div class="flex flex-1 overflow-hidden relative">
<!-- BEGIN: Left Sidebar -->
<aside class="w-20 bg-white border-r border-slate-200 flex flex-col items-center py-4 gap-2 shrink-0 overflow-y-auto">
<a class="sidebar-link w-full flex flex-col items-center justify-center py-3 text-slate-600 hover:bg-slate-50 transition-colors" href="#">
<i class="fa-solid fa-border-all text-xl mb-1"></i>
<span class="text-[10px]">기본정보관리</span>
</a>
<a class="sidebar-link w-full flex flex-col items-center justify-center py-3 text-slate-600 hover:bg-slate-50 transition-colors" href="#">
<i class="fa-solid fa-boxes-stacked text-xl mb-1"></i>
<span class="text-[10px]">발주/입고 관리</span>
</a>
<a class="sidebar-link w-full flex flex-col items-center justify-center py-3 text-slate-600 hover:bg-slate-50 transition-colors" href="#">
<i class="fa-solid fa-truck-ramp-box text-xl mb-1"></i>
<span class="text-[10px]">불출 관리</span>
</a>
<a class="sidebar-link active w-full flex flex-col items-center justify-center py-3 text-sky-700 transition-colors" href="#">
<i class="fa-solid fa-warehouse text-xl mb-1"></i>
<span class="text-[10px]">재고 관리</span>
</a>
<a class="sidebar-link w-full flex flex-col items-center justify-center py-3 text-slate-600 hover:bg-slate-50 transition-colors" href="#">
<i class="fa-solid fa-cart-shopping text-xl mb-1"></i>
<span class="text-[10px]">판매 관리</span>
</a>
<a class="sidebar-link w-full flex flex-col items-center justify-center py-3 text-slate-600 hover:bg-slate-50 transition-colors" href="#">
<i class="fa-solid fa-chart-pie text-xl mb-1"></i>
<span class="text-[10px]">판매 현황</span>
</a>
<a class="sidebar-link w-full flex flex-col items-center justify-center py-3 text-slate-600 hover:bg-slate-50 transition-colors" href="#">
<i class="fa-solid fa-chart-line text-xl mb-1"></i>
<span class="text-[10px]">통계/분석 관리</span>
</a>
<a class="sidebar-link w-full flex flex-col items-center justify-center py-3 text-slate-600 hover:bg-slate-50 transition-colors" href="#">
<i class="fa-solid fa-gear text-xl mb-1"></i>
<span class="text-[10px]">설정</span>
</a>
<a class="sidebar-link w-full flex flex-col items-center justify-center py-3 text-slate-600 hover:bg-slate-50 transition-colors" href="#">
<i class="fa-regular fa-circle-question text-xl mb-1"></i>
<span class="text-[10px]">도움말</span>
</a>
<div class="mt-auto pt-4">
<button class="p-2 text-slate-400 hover:text-slate-600">
<i class="fa-solid fa-arrow-right-to-bracket text-lg"></i>
</button>
</div>
</aside>
<!-- END: Left Sidebar -->
<!-- BEGIN: Main Content Area -->
<main class="flex-1 p-4 bg-slate-100 flex flex-col overflow-hidden min-w-0">
<!-- BEGIN: Filter Bar -->
<section class="bg-white border border-slate-200 rounded shadow-sm p-3 mb-4 flex flex-wrap items-center justify-between gap-4 shrink-0">
<div class="flex flex-wrap items-center gap-4">
<div class="flex items-center gap-2">
<label class="font-medium text-slate-700 whitespace-nowrap">조회기간:</label>
<input class="border border-slate-300 rounded px-2 py-1.5 text-sm focus:ring-sky-500 focus:border-sky-500 w-52" readonly type="text" value="2024.01.01 ~ 2025.12.12"/>
</div>
<div class="flex items-center gap-2">
<label class="font-medium text-slate-700 whitespace-nowrap">봉투구분:</label>
<select class="border border-slate-300 rounded px-2 py-1.5 text-sm focus:ring-sky-500 focus:border-sky-500 w-24">
<option>전체</option>
</select>
</div>
<div class="flex items-center gap-2">
<label class="font-medium text-slate-700 whitespace-nowrap">봉투형식:</label>
<select class="border border-slate-300 rounded px-2 py-1.5 text-sm focus:ring-sky-500 focus:border-sky-500 w-28">
<option>전체 봉투</option>
</select>
</div>
<div class="flex items-center gap-2">
<label class="font-medium text-slate-700 whitespace-nowrap">대행소:</label>
<select class="border border-slate-300 rounded px-2 py-1.5 text-sm focus:ring-sky-500 focus:border-sky-500 w-24">
<option>북구</option>
</select>
</div>
</div>
<div class="flex items-center gap-2">
<button class="bg-[#1e548a] hover:bg-blue-900 text-white px-4 py-1.5 rounded text-sm font-medium flex items-center gap-1 transition-colors">
<i class="fa-solid fa-magnifying-glass"></i> 검색
</button>
<button class="bg-white border border-[#2e7d32] text-[#2e7d32] hover:bg-green-50 px-4 py-1.5 rounded text-sm font-medium flex items-center gap-1 transition-colors">
<i class="fa-regular fa-file-excel"></i> Excel 내보내기
</button>
<button class="bg-white border border-slate-300 text-black hover:bg-slate-50 px-4 py-1.5 rounded text-sm font-medium flex items-center gap-1 transition-colors">
<i class="fa-solid fa-print"></i> 인쇄
</button>
<button class="bg-[#e53935] hover:bg-red-600 text-white px-4 py-1.5 rounded text-sm font-medium flex items-center gap-1 transition-colors">
<i class="fa-solid fa-power-off"></i> 종료
</button>
</div>
</section>
<!-- END: Filter Bar -->
<!-- BEGIN: Data Table -->
<section class="bg-white border border-slate-200 rounded shadow-sm flex-1 flex flex-col overflow-hidden">
<div class="table-container flex-1 w-full overflow-auto">
<table class="custom-table w-full whitespace-nowrap table-auto border-collapse">
<thead class="sticky top-0 z-10 shadow-sm">
<tr>
<th class="w-48 sticky left-0 z-20" rowspan="2">품목</th>
<th class="w-24" rowspan="2">전일재고</th>
<th class="w-72" colspan="3">입고</th>
<th class="w-96" colspan="5">출고</th>
<th class="w-24" rowspan="2">잔량</th>
</tr>
<tr>
<th class="w-24">입고</th>
<th class="w-24">반품</th>
<th class="w-24">입고계</th>
<th class="w-24">판매</th>
<th class="w-24 text-xs leading-tight">임의불출/무상불출</th>
<th class="w-24">반품</th>
<th class="w-24">기타</th>
<th class="w-24">출고계</th>
</tr>
</thead>
<tbody>
<tr>
<td class="sticky left-0 bg-white text-left font-medium z-10 shadow-[1px_0_0_#cbd5e1]">일반용 5L</td>
<td class="text-right">187,240</td>
<td class="text-right"></td>
<td class="text-right"></td>
<td class="text-right">0</td>
<td class="text-right">0</td>
<td class="text-right"></td>
<td class="text-right"></td>
<td class="text-right">0</td>
<td class="text-right">0</td>
<td class="text-right font-medium">187,240</td>
</tr>
<tr>
<td class="sticky left-0 bg-white text-left font-medium z-10 shadow-[1px_0_0_#cbd5e1]">일반용 5L</td>
<td class="text-right">0</td>
<td class="text-right"></td>
<td class="text-right"></td>
<td class="text-right">0</td>
<td class="text-right">0</td>
<td class="text-right"></td>
<td class="text-right"></td>
<td class="text-right">0</td>
<td class="text-right">0</td>
<td class="text-right font-medium">0</td>
</tr>
<tr>
<td class="sticky left-0 bg-white text-left font-medium z-10 shadow-[1px_0_0_#cbd5e1]">일반용 10L</td>
<td class="text-right">159,428</td>
<td class="text-right">252,000</td>
<td class="text-right"></td>
<td class="text-right font-medium">252,800</td>
<td class="text-right">8,580</td>
<td class="text-right"></td>
<td class="text-right"></td>
<td class="text-right">8,580</td>
<td class="text-right font-medium">8,990</td>
<td class="text-right font-medium">402,848</td>
</tr>
<tr>
<td class="sticky left-0 bg-white text-left font-medium z-10 shadow-[1px_0_0_#cbd5e1]">일반용 20L</td>
<td class="text-right">212,082</td>
<td class="text-right">201,000</td>
<td class="text-right"></td>
<td class="text-right font-medium">201,600</td>
<td class="text-right">11,320</td>
<td class="text-right"></td>
<td class="text-right"></td>
<td class="text-right">11,320</td>
<td class="text-right font-medium">11,320</td>
<td class="text-right font-medium">402,355</td>
</tr>
<tr>
<td class="sticky left-0 bg-white text-left font-medium z-10 shadow-[1px_0_0_#cbd5e1]">일반용 50L</td>
<td class="text-right">7,605</td>
<td class="text-right">13,000</td>
<td class="text-right"></td>
<td class="text-right font-medium">13,000</td>
<td class="text-right">540</td>
<td class="text-right"></td>
<td class="text-right"></td>
<td class="text-right">540</td>
<td class="text-right font-medium">540</td>
<td class="text-right font-medium">20,065</td>
</tr>
<tr>
<td class="sticky left-0 bg-white text-left font-medium z-10 shadow-[1px_0_0_#cbd5e1]">일반용 75L</td>
<td class="text-right">31,459</td>
<td class="text-right">22,600</td>
<td class="text-right"></td>
<td class="text-right font-medium">22,600</td>
<td class="text-right">2,990</td>
<td class="text-right"></td>
<td class="text-right"></td>
<td class="text-right">2,090</td>
<td class="text-right font-medium">3,640</td>
<td class="text-right font-medium">86,240</td>
</tr>
<tr>
<td class="sticky left-0 bg-white text-left font-medium z-10 shadow-[1px_0_0_#cbd5e1]">일반용 100L</td>
<td class="text-right">11</td>
<td class="text-right"></td>
<td class="text-right"></td>
<td class="text-right font-medium">0</td>
<td class="text-right"></td>
<td class="text-right"></td>
<td class="text-right"></td>
<td class="text-right">0</td>
<td class="text-right font-medium">0</td>
<td class="text-right font-medium">11</td>
</tr>
<tr>
<td class="sticky left-0 bg-white text-left font-medium z-10 shadow-[1px_0_0_#cbd5e1]">일반용 70L</td>
<td class="text-right">77,400</td>
<td class="text-right"></td>
<td class="text-right"></td>
<td class="text-right font-medium">0</td>
<td class="text-right"></td>
<td class="text-right">1,000</td>
<td class="text-right"></td>
<td class="text-right">1,000</td>
<td class="text-right font-medium">1,000</td>
<td class="text-right font-medium">76,400</td>
</tr>
<tr>
<td class="sticky left-0 bg-white text-left font-medium z-10 shadow-[1px_0_0_#cbd5e1]">공동주택용 20L</td>
<td class="text-right">0</td>
<td class="text-right"></td>
<td class="text-right"></td>
<td class="text-right font-medium">0</td>
<td class="text-right"></td>
<td class="text-right"></td>
<td class="text-right"></td>
<td class="text-right">0</td>
<td class="text-right font-medium">0</td>
<td class="text-right font-medium">0</td>
</tr>
<tr>
<td class="sticky left-0 bg-white text-left font-medium z-10 shadow-[1px_0_0_#cbd5e1]">공동주택용 50L</td>
<td class="text-right">0</td>
<td class="text-right"></td>
<td class="text-right"></td>
<td class="text-right font-medium">0</td>
<td class="text-right"></td>
<td class="text-right"></td>
<td class="text-right"></td>
<td class="text-right">0</td>
<td class="text-right font-medium">0</td>
<td class="text-right font-medium">0</td>
</tr>
<tr>
<td class="sticky left-0 bg-white text-left font-medium z-10 shadow-[1px_0_0_#cbd5e1]">재사용 봉투</td>
<td class="text-right">58,540</td>
<td class="text-right">27,000</td>
<td class="text-right"></td>
<td class="text-right font-medium">27,000</td>
<td class="text-right">560</td>
<td class="text-right"></td>
<td class="text-right"></td>
<td class="text-right">560</td>
<td class="text-right font-medium">560</td>
<td class="text-right font-medium">84,990</td>
</tr>
</tbody>
</table>
</div>
</section>
<!-- END: Data Table -->
</main>
<!-- END: Main Content Area -->
</div>
<!-- BEGIN: Footer / Status Bar -->
<footer class="bg-[#e2e8f0] border-t border-slate-300 h-8 flex items-center justify-between px-4 shrink-0 text-xs text-slate-600">
<div>Ready.....</div>
<div class="flex gap-4">
<span>북구</span>
<span>Ver..</span>
<span>2025.12.12 (금) 3:00:32PM</span>
</div>
</footer>
<!-- END: Footer / Status Bar -->
</body>
</html>

282
app/Views/bag/lg_dashboard.php Normal file
View File

@@ -0,0 +1,282 @@
<?php
/**
* 로그인 후 첫 화면 — 업무 현황 대시보드 (차장님 지시: 재고·구매신청·그래프 + 추가 시안)
* 레이아웃: 봉투 수불 엔터프라이즈 페이지와 동일한 상단 가로 메뉴·연한 파란 제목바·하단 상태줄
*
* @var string $lgLabel 로그인 지자체 표시명
*/
$lgLabel = $lgLabel ?? '북구';
$mbName = session()->get('mb_name') ?? '담당자';
?>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>종량제 시스템 — 업무 현황</title>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet"/>
<style>
body {
font-family: 'Malgun Gothic', 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
font-size: 13px;
color: #333;
}
.nav-top a.nav-active {
color: #2b4c8c;
font-weight: 600;
border-bottom: 2px solid #2b4c8c;
padding-bottom: 2px;
margin-bottom: -2px;
}
.kpi-card { transition: box-shadow .15s; }
.kpi-card:hover { box-shadow: 0 4px 14px rgba(43, 76, 140, .12); }
.bar-fill {
height: 10px;
border-radius: 4px;
background: linear-gradient(90deg, #2b4c8c, #3b82f6);
}
</style>
</head>
<body class="bg-gray-50 flex flex-col min-h-screen">
<!-- 상단: 수불 엔터프라이즈와 동일 계열 -->
<header class="border-b border-gray-300 bg-white shadow-sm shrink-0" data-purpose="top-navigation">
<div class="flex items-center justify-between px-4 py-2 gap-4 flex-wrap">
<div class="flex items-center gap-3 shrink-0">
<div class="flex items-center gap-2 text-green-700 font-bold text-lg">
<i class="fa-solid fa-recycle text-xl"></i>
<span>종량제 시스템</span>
</div>
<span class="hidden sm:inline text-xs text-gray-500 border-l border-gray-300 pl-3">
<?= esc($lgLabel) ?> · <strong class="text-gray-700"><?= esc($mbName) ?></strong>님
</span>
</div>
<nav class="nav-top hidden lg:flex flex-wrap items-center gap-4 xl:gap-5 text-sm font-medium text-gray-700">
<a class="nav-active flex items-center gap-1 whitespace-nowrap" href="<?= base_url('dashboard') ?>">
<i class="fa-solid fa-gauge-high"></i> 업무 현황
</a>
<a class="flex items-center gap-1 hover:text-blue-600 whitespace-nowrap" href="#"><i class="fa-regular fa-file-lines"></i> 문서 관리</a>
<a class="flex items-center gap-1 hover:text-blue-600 whitespace-nowrap" href="#"><i class="fa-solid fa-box-open"></i> 규격</a>
<a class="flex items-center gap-1 hover:text-blue-600 whitespace-nowrap" href="#"><i class="fa-solid fa-bag-shopping"></i> 봉투 양식</a>
<a class="flex items-center gap-1 hover:text-blue-600 whitespace-nowrap" href="#"><i class="fa-solid fa-table"></i> 데이터 양식</a>
<a class="flex items-center gap-1 hover:text-blue-600 whitespace-nowrap" href="#"><i class="fa-solid fa-clock-rotate-left"></i> 사용 내역</a>
<a class="flex items-center gap-1 hover:text-blue-600 whitespace-nowrap" href="<?= base_url('bag/inventory-inquiry') ?>"><i class="fa-solid fa-boxes-stacked"></i> 재고 현황</a>
<a class="flex items-center gap-1 hover:text-blue-600 whitespace-nowrap" href="<?= base_url('bag/waste-suibal-enterprise') ?>"><i class="fa-solid fa-table-list"></i> 수불 현황</a>
<a class="flex items-center gap-1 hover:text-blue-600 whitespace-nowrap" href="#"><i class="fa-solid fa-chart-line"></i> 통계 분석</a>
<a class="flex items-center gap-1 hover:text-blue-600 whitespace-nowrap" href="#"><i class="fa-solid fa-gear"></i> 설정</a>
</nav>
<div class="flex items-center gap-2 shrink-0">
<a href="<?= base_url('dashboard/modern') ?>" class="text-xs text-[#2b4c8c] hover:underline whitespace-nowrap hidden sm:inline" title="모던 레이아웃">모던</a>
<span class="text-gray-300 hidden sm:inline">|</span>
<a href="<?= base_url('dashboard/dense') ?>" class="text-xs text-[#2b4c8c] hover:underline whitespace-nowrap hidden sm:inline" title="정보 집약 종합">종합</a>
<span class="text-gray-300 hidden sm:inline">|</span>
<a href="<?= base_url('dashboard/charts') ?>" class="text-xs text-[#2b4c8c] hover:underline whitespace-nowrap hidden sm:inline" title="그래프 대시보드">차트</a>
<a href="<?= base_url('logout') ?>" class="text-gray-500 hover:text-gray-800 p-1" title="로그아웃">
<i class="fa-solid fa-arrow-right-from-bracket text-lg"></i>
</a>
</div>
</div>
</header>
<main class="flex-1 flex flex-col min-h-0" data-purpose="dashboard-content">
<!-- 연한 파란 제목바 (수불 페이지와 동일 톤) -->
<div class="bg-[#eff5fb] border-b border-gray-300 px-4 py-2 flex flex-wrap justify-between items-center gap-2 text-sm font-semibold text-gray-800 shrink-0" data-purpose="page-title">
<span>
<i class="fa-solid fa-chart-pie text-[#2b4c8c] mr-2"></i>업무 현황 대시보드
<span class="text-xs font-normal text-gray-500">· 봉투 재고 · 구매신청 · 발주/승인 요약</span>
</span>
<div class="flex items-center gap-2">
<span class="text-xs font-normal text-gray-500"><i class="fa-regular fa-calendar mr-1"></i><?= date('Y.m.d (D)') ?></span>
<button type="button" class="text-gray-500 hover:text-gray-800 p-1" title="조건 설정"><i class="fa-solid fa-sliders"></i></button>
</div>
</div>
<!-- 대시보드용 경량 필터 (엔터프라이즈 필터바와 동일 계열) -->
<section class="p-2 border-b border-gray-300 bg-white shrink-0" data-purpose="dashboard-context">
<div class="flex flex-wrap items-center justify-between gap-3">
<div class="flex flex-wrap items-center gap-3 text-xs">
<span class="text-gray-600 font-medium">기준일</span>
<input type="text" readonly value="<?= date('Y.m.d') ?>" class="border border-gray-300 px-2 py-1 rounded w-28 shadow-sm">
<span class="text-gray-500">|</span>
<span class="text-gray-600">지자체 <strong class="text-gray-800"><?= esc($lgLabel) ?></strong></span>
<button type="button" class="bg-[#2b4c8c] hover:bg-blue-800 text-white px-3 py-1 rounded text-xs font-medium shadow flex items-center gap-1">
<i class="fa-solid fa-rotate"></i> 새로고침
</button>
</div>
<p class="text-[11px] text-gray-400">목업 데이터 · 연동 시 실시간 반영</p>
</div>
</section>
<div class="flex-1 overflow-y-auto p-4">
<?php if (session()->getFlashdata('success')): ?>
<div class="mb-3 p-3 rounded-lg bg-emerald-50 text-emerald-800 text-sm border border-emerald-200"><?= esc(session()->getFlashdata('success')) ?></div>
<?php endif; ?>
<!-- KPI -->
<div class="grid grid-cols-2 lg:grid-cols-4 gap-3 mb-4">
<div class="kpi-card bg-white border border-gray-200 rounded-lg p-4 shadow-sm">
<p class="text-xs text-gray-500 mb-1"><i class="fa-solid fa-triangle-exclamation text-amber-500 mr-1"></i>재고 부족 품목</p>
<p class="text-2xl font-bold text-gray-800">3</p>
<p class="text-[11px] text-gray-400 mt-1">안전재고 미만 봉투 종류</p>
</div>
<div class="kpi-card bg-white border border-gray-200 rounded-lg p-4 shadow-sm">
<p class="text-xs text-gray-500 mb-1"><i class="fa-solid fa-inbox text-sky-600 mr-1"></i>미처리 구매신청</p>
<p class="text-2xl font-bold text-sky-700">12</p>
<p class="text-[11px] text-gray-400 mt-1">지정판매소 · 금일 기준</p>
</div>
<div class="kpi-card bg-white border border-gray-200 rounded-lg p-4 shadow-sm">
<p class="text-xs text-gray-500 mb-1"><i class="fa-solid fa-truck-field text-emerald-600 mr-1"></i>이번 주 발주·입고</p>
<p class="text-2xl font-bold text-emerald-700">8 <span class="text-sm font-normal text-gray-500">건</span></p>
<p class="text-[11px] text-gray-400 mt-1">발주 5 · 입고완료 3</p>
</div>
<div class="kpi-card bg-white border border-gray-200 rounded-lg p-4 shadow-sm">
<p class="text-xs text-gray-500 mb-1"><i class="fa-solid fa-user-clock text-violet-600 mr-1"></i>승인 대기 회원</p>
<p class="text-2xl font-bold text-violet-700">4</p>
<p class="text-[11px] text-gray-400 mt-1">가입·권한 승인 요청</p>
</div>
</div>
<div class="grid grid-cols-1 xl:grid-cols-2 gap-4 mb-4">
<section class="bg-white border border-gray-200 rounded-lg shadow-sm p-4">
<div class="flex items-center justify-between mb-3">
<h3 class="font-semibold text-gray-800"><i class="fa-solid fa-chart-bar text-[#2b4c8c] mr-2"></i>봉투별 재고 현황</h3>
<span class="text-[11px] text-gray-400">낱장 환산 · 목업</span>
</div>
<?php
$stockRows = [
['label' => '일반용 5L', 'pct' => 92],
['label' => '일반용 10L', 'pct' => 78],
['label' => '일반용 20L', 'pct' => 65],
['label' => '음식물 스티커', 'pct' => 41],
['label' => '재사용 봉투', 'pct' => 88],
];
foreach ($stockRows as $r):
?>
<div class="mb-3 last:mb-0">
<div class="flex justify-between text-xs mb-1">
<span><?= esc($r['label']) ?></span>
<span class="text-gray-500"><?= (int) $r['pct'] ?>%</span>
</div>
<div class="h-2 bg-gray-100 rounded-full overflow-hidden">
<div class="bar-fill h-full" style="width: <?= (int) $r['pct'] ?>%"></div>
</div>
</div>
<?php endforeach; ?>
</section>
<section class="bg-white border border-gray-200 rounded-lg shadow-sm p-4">
<div class="flex items-center justify-between mb-3">
<h3 class="font-semibold text-gray-800"><i class="fa-solid fa-chart-line text-[#2b4c8c] mr-2"></i>최근 7일 구매신청·처리 추이</h3>
<span class="text-[11px] text-gray-400">건수</span>
</div>
<div class="flex items-end justify-between gap-1 h-48 px-1 border-b border-gray-200">
<?php
$days = [8, 12, 5, 14, 9, 11, 7];
$max = max($days);
foreach ($days as $i => $v):
$h = $max > 0 ? round(($v / $max) * 100) : 0;
?>
<div class="flex-1 flex flex-col items-center justify-end h-full group">
<span class="text-[10px] text-gray-500 mb-1"><?= $v ?></span>
<div class="w-full max-w-[2.5rem] rounded-t bg-gradient-to-t from-sky-800 to-sky-400 transition group-hover:opacity-90" style="height: <?= $h ?>%"></div>
<span class="text-[10px] text-gray-400 mt-1">D-<?= 6 - $i ?></span>
</div>
<?php endforeach; ?>
</div>
<p class="text-[11px] text-gray-500 mt-2 text-center">일별 신청 건수 · 처리 연동 예정</p>
</section>
</div>
<section class="bg-white border border-gray-200 rounded-lg shadow-sm overflow-hidden mb-4">
<div class="px-4 py-3 border-b border-gray-200 flex flex-wrap items-center justify-between gap-2 bg-gray-50/80">
<h3 class="font-semibold text-gray-800"><i class="fa-solid fa-list-ul text-[#2b4c8c] mr-2"></i>지정판매소 구매신청 (최근)</h3>
<button type="button" class="text-xs text-sky-700 hover:underline font-medium">전체 보기</button>
</div>
<div class="overflow-x-auto">
<table class="w-full text-xs">
<thead class="bg-gray-100 text-gray-600 border-b border-gray-200">
<tr>
<th class="text-left font-semibold px-4 py-2">신청일시</th>
<th class="text-left font-semibold px-4 py-2">판매소</th>
<th class="text-left font-semibold px-4 py-2">품목</th>
<th class="text-right font-semibold px-4 py-2">수량</th>
<th class="text-center font-semibold px-4 py-2">상태</th>
</tr>
</thead>
<tbody class="divide-y divide-gray-100">
<?php
$orders = [
['2025-02-26 09:12', '행복마트 북구점', '일반용 5L', '2,000장', '접수'],
['2025-02-26 08:45', '○○슈퍼', '음식물 스티커', '500장', '처리중'],
['2025-02-25 16:20', '△△상회', '일반용 20L', '박스 3', '완료'],
['2025-02-25 11:03', '□□편의점', '일반용 10L', '팩 12', '접수'],
['2025-02-24 14:50', '행복마트 북구점', '재사용 봉투', '1,200장', '완료'],
];
foreach ($orders as $o):
?>
<tr class="hover:bg-gray-50">
<td class="px-4 py-2.5 whitespace-nowrap"><?= esc($o[0]) ?></td>
<td class="px-4 py-2.5"><?= esc($o[1]) ?></td>
<td class="px-4 py-2.5"><?= esc($o[2]) ?></td>
<td class="px-4 py-2.5 text-right"><?= esc($o[3]) ?></td>
<td class="px-4 py-2.5 text-center">
<?php
$st = $o[4];
$cls = $st === '완료' ? 'bg-emerald-100 text-emerald-800' : ($st === '처리중' ? 'bg-amber-100 text-amber-800' : 'bg-gray-100 text-gray-700');
?>
<span class="inline-block px-2 py-0.5 rounded text-[11px] <?= $cls ?>"><?= esc($st) ?></span>
</td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
</div>
</section>
<div class="grid grid-cols-1 md:grid-cols-3 gap-3 mb-4">
<div class="bg-white border border-gray-200 rounded-lg p-4 shadow-sm">
<h4 class="text-sm font-semibold text-gray-800 mb-2"><i class="fa-solid fa-boxes-packing text-emerald-600 mr-1"></i>이번 주 발주·입고 요약</h4>
<ul class="text-xs text-gray-600 space-y-1.5">
<li class="flex justify-between"><span>발주 접수</span><strong>5건</strong></li>
<li class="flex justify-between"><span>입고 완료</span><strong class="text-emerald-700">3건</strong></li>
<li class="flex justify-between"><span>입고 예정(LOT)</span><strong>2건</strong></li>
</ul>
</div>
<div class="bg-white border border-gray-200 rounded-lg p-4 shadow-sm">
<h4 class="text-sm font-semibold text-gray-800 mb-2"><i class="fa-solid fa-user-check text-violet-600 mr-1"></i>승인 대기 회원</h4>
<p class="text-3xl font-bold text-violet-700">4</p>
<p class="text-xs text-gray-500 mt-1">지정판매소 · 일반 가입</p>
<button type="button" class="mt-3 w-full text-xs py-1.5 rounded border border-violet-200 text-violet-700 hover:bg-violet-50">승인 화면으로</button>
</div>
<div class="bg-white border border-gray-200 rounded-lg p-4 shadow-sm">
<h4 class="text-sm font-semibold text-gray-800 mb-2"><i class="fa-solid fa-arrow-right-arrow-left text-orange-600 mr-1"></i>최근 7일 봉투 수불 추이</h4>
<p class="text-xs text-gray-600">입고 <strong class="text-gray-800">+482</strong> / 출고 <strong class="text-gray-800">−391</strong></p>
<div class="mt-2 h-16 flex items-end gap-0.5">
<?php foreach ([3, 5, 4, 6, 6, 5, 2] as $h): ?>
<div class="flex-1 bg-orange-200 rounded-t" style="height: <?= $h * 8 ?>%"></div>
<?php endforeach; ?>
</div>
</div>
</div>
<p class="text-[11px] text-gray-400 border-t border-gray-200 pt-3">
차장님 요청 반영: <strong>봉투별 재고</strong>·<strong>구매신청 리스트</strong>·그래프 /
추가 시안: <strong>발주·입고</strong>, <strong>승인 대기</strong>, <strong>수불 추이</strong>.
레이아웃은 <strong>수불 엔터프라이즈 화면</strong>과 동일한 상단 메뉴·제목바 스타일입니다.
</p>
</div>
</main>
<footer class="bg-[#e9ecef] border-t border-gray-300 px-4 py-1.5 text-xs text-gray-600 flex justify-between items-center shrink-0" data-purpose="status-bar">
<div class="flex items-center gap-2">
<span class="text-green-700"><i class="fa-solid fa-circle text-[6px] align-middle mr-1"></i>준비됨</span>
<span class="text-gray-400">|</span>
<span><?= esc($lgLabel) ?></span>
</div>
<div class="flex gap-4">
<span>Ver. 목업</span>
<span><?= date('Y.m.d (D) g:i A') ?></span>
</div>
</footer>
</body>
</html>

429
app/Views/bag/lg_dashboard_charts.php Normal file
View File

@@ -0,0 +1,429 @@
<?php
/**
* 로그인 후 메인 — 그래프 중심 대시보드 (Chart.js 목업)
* 상단 메뉴바는 lg_dashboard.php 와 동일
*
* @var string $lgLabel
*/
$lgLabel = $lgLabel ?? '북구';
$mbName = session()->get('mb_name') ?? '담당자';
$dashClassic = base_url('dashboard/classic-mock');
$dashModern = base_url('dashboard/modern');
$dashDense = base_url('dashboard/dense');
$dashCharts = base_url('dashboard/charts');
?>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>종량제 시스템 — 통계·그래프 현황</title>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
<style>
body {
font-family: 'Malgun Gothic', 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
font-size: 13px;
color: #333;
}
.nav-top a.nav-active {
color: #2b4c8c;
font-weight: 600;
border-bottom: 2px solid #2b4c8c;
padding-bottom: 2px;
margin-bottom: -2px;
}
.chart-card {
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 0.375rem;
box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
.chart-card h2 {
font-size: 12px;
font-weight: 700;
color: #1f2937;
padding: 0.5rem 0.75rem;
border-bottom: 1px solid #f3f4f6;
background: #fafafa;
}
.chart-wrap { position: relative; height: 200px; padding: 0.5rem 0.75rem 0.75rem; }
.chart-wrap.tall { height: 280px; }
.chart-wrap.wide { height: 240px; }
</style>
</head>
<body class="bg-[#eef1f6] flex flex-col min-h-screen">
<header class="border-b border-gray-300 bg-white shadow-sm shrink-0" data-purpose="top-navigation">
<div class="flex items-center justify-between px-3 py-1.5 gap-3 flex-wrap">
<div class="flex items-center gap-2 shrink-0">
<div class="flex items-center gap-2 text-green-700 font-bold text-base">
<i class="fa-solid fa-recycle text-lg"></i>
<span>종량제 시스템</span>
</div>
<span class="hidden sm:inline text-[11px] text-gray-500 border-l border-gray-300 pl-2">
<?= esc($lgLabel) ?> · <strong class="text-gray-700"><?= esc($mbName) ?></strong>님
</span>
</div>
<nav class="nav-top hidden lg:flex flex-wrap items-center gap-3 xl:gap-4 text-[13px] font-medium text-gray-700">
<a class="nav-active flex items-center gap-1 whitespace-nowrap" href="<?= esc($dashCharts) ?>">
<i class="fa-solid fa-gauge-high"></i> 업무 현황
</a>
<a class="flex items-center gap-1 hover:text-blue-600 whitespace-nowrap" href="#"><i class="fa-regular fa-file-lines"></i> 문서 관리</a>
<a class="flex items-center gap-1 hover:text-blue-600 whitespace-nowrap" href="#"><i class="fa-solid fa-box-open"></i> 규격</a>
<a class="flex items-center gap-1 hover:text-blue-600 whitespace-nowrap" href="#"><i class="fa-solid fa-bag-shopping"></i> 봉투 양식</a>
<a class="flex items-center gap-1 hover:text-blue-600 whitespace-nowrap" href="#"><i class="fa-solid fa-table"></i> 데이터 양식</a>
<a class="flex items-center gap-1 hover:text-blue-600 whitespace-nowrap" href="#"><i class="fa-solid fa-clock-rotate-left"></i> 사용 내역</a>
<a class="flex items-center gap-1 hover:text-blue-600 whitespace-nowrap" href="<?= base_url('bag/inventory-inquiry') ?>"><i class="fa-solid fa-boxes-stacked"></i> 재고 현황</a>
<a class="flex items-center gap-1 hover:text-blue-600 whitespace-nowrap" href="<?= base_url('bag/waste-suibal-enterprise') ?>"><i class="fa-solid fa-table-list"></i> 수불 현황</a>
<a class="flex items-center gap-1 hover:text-blue-600 whitespace-nowrap" href="#"><i class="fa-solid fa-chart-line"></i> 통계 분석</a>
<a class="flex items-center gap-1 hover:text-blue-600 whitespace-nowrap" href="#"><i class="fa-solid fa-gear"></i> 설정</a>
</nav>
<div class="flex items-center gap-1.5 shrink-0 text-[11px]">
<a href="<?= esc($dashClassic) ?>" class="text-[#2b4c8c] hover:underline whitespace-nowrap hidden md:inline">클래식</a>
<span class="text-gray-300 hidden md:inline">|</span>
<a href="<?= esc($dashModern) ?>" class="text-[#2b4c8c] hover:underline whitespace-nowrap hidden md:inline">모던</a>
<span class="text-gray-300 hidden md:inline">|</span>
<a href="<?= esc($dashDense) ?>" class="text-[#2b4c8c] hover:underline whitespace-nowrap hidden md:inline">종합</a>
<a href="<?= base_url('logout') ?>" class="text-gray-500 hover:text-gray-800 p-1 ml-1" title="로그아웃">
<i class="fa-solid fa-arrow-right-from-bracket"></i>
</a>
</div>
</div>
</header>
<div class="bg-[#eff5fb] border-b border-gray-300 px-3 py-1.5 flex flex-wrap items-center justify-between gap-2 text-[12px] shrink-0">
<span class="font-semibold text-gray-800">
<i class="fa-solid fa-chart-column text-[#2b4c8c] mr-1"></i>통계·그래프 대시보드
<span class="font-normal text-gray-500 ml-1">· 목업 데이터 · Chart.js</span>
</span>
<span class="text-gray-600 text-[11px]"><i class="fa-regular fa-calendar mr-0.5"></i><?= date('Y-m-d H:i') ?> · <?= esc($lgLabel) ?></span>
</div>
<main class="flex-1 overflow-y-auto p-2 sm:p-3">
<?php if (session()->getFlashdata('success')): ?>
<div class="mb-2 p-2 rounded border border-green-200 bg-green-50 text-green-800 text-[11px]"><?= esc(session()->getFlashdata('success')) ?></div>
<?php endif; ?>
<!-- 1행: 도넛 2 + 막대 + 레이더 -->
<div class="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-2 mb-2">
<section class="chart-card">
<h2><i class="fa-solid fa-chart-pie text-[#2b4c8c] mr-1"></i>봉투 규격 출고 비중</h2>
<div class="chart-wrap"><canvas id="chDoughnutSpec"></canvas></div>
</section>
<section class="chart-card">
<h2><i class="fa-solid fa-circle-notch text-[#2b4c8c] mr-1"></i>구매신청 처리 단계</h2>
<div class="chart-wrap"><canvas id="chDoughnutFlow"></canvas></div>
</section>
<section class="chart-card">
<h2><i class="fa-solid fa-calendar-week text-[#2b4c8c] mr-1"></i>금주 일별 출고(천장)</h2>
<div class="chart-wrap"><canvas id="chBarWeek"></canvas></div>
</section>
<section class="chart-card">
<h2><i class="fa-solid fa-bullseye text-[#2b4c8c] mr-1"></i>운영 지표 (목업)</h2>
<div class="chart-wrap"><canvas id="chRadar"></canvas></div>
</section>
</div>
<!-- 2행: 월별 추이 라인 -->
<section class="chart-card mb-2">
<h2><i class="fa-solid fa-chart-line text-[#2b4c8c] mr-1"></i>월별 출고 vs 구매신청 건수 (최근 12개월)</h2>
<div class="chart-wrap tall"><canvas id="chLineYear"></canvas></div>
</section>
<!-- 3행: 품목 막대 + 판매소 가로막대 -->
<div class="grid grid-cols-1 lg:grid-cols-2 gap-2 mb-2">
<section class="chart-card">
<h2><i class="fa-solid fa-boxes-stacked text-[#2b4c8c] mr-1"></i>품목별 재고 (천 장)</h2>
<div class="chart-wrap wide"><canvas id="chBarSku"></canvas></div>
</section>
<section class="chart-card">
<h2><i class="fa-solid fa-store text-[#2b4c8c] mr-1"></i>판매소별 월 출고 TOP</h2>
<div class="chart-wrap wide"><canvas id="chBarHStore"></canvas></div>
</section>
</div>
<!-- 4행: 스택 막대 -->
<section class="chart-card mb-2">
<h2><i class="fa-solid fa-layer-group text-[#2b4c8c] mr-1"></i>분기별 입고 / 출고 / 조정 (천 장)</h2>
<div class="chart-wrap wide"><canvas id="chStackedQ"></canvas></div>
</section>
<!-- 5행: 영역 + 극좌표 누적 -->
<div class="grid grid-cols-1 lg:grid-cols-2 gap-2 mb-2">
<section class="chart-card">
<h2><i class="fa-solid fa-chart-area text-[#2b4c8c] mr-1"></i>누적 출고 추이 (올해)</h2>
<div class="chart-wrap"><canvas id="chAreaCum"></canvas></div>
</section>
<section class="chart-card">
<h2><i class="fa-solid fa-compass text-[#2b4c8c] mr-1"></i>요일·시간대 신청 분포 (극좌표)</h2>
<div class="chart-wrap"><canvas id="chPolarTime"></canvas></div>
</section>
</div>
<p class="text-center text-[10px] text-gray-400 py-1">
<a href="<?= esc($dashClassic) ?>" class="text-[#2b4c8c] hover:underline">/dashboard</a>
· <a href="<?= esc($dashModern) ?>" class="text-[#2b4c8c] hover:underline">/dashboard/modern</a>
· <a href="<?= esc($dashDense) ?>" class="text-[#2b4c8c] hover:underline">/dashboard/dense</a>
· <strong class="text-gray-600">/dashboard/charts</strong>
</p>
</main>
<script>
(function () {
const C = {
primary: '#2b4c8c',
blue: '#3b82f6',
teal: '#0d9488',
emerald: '#059669',
amber: '#d97706',
rose: '#e11d48',
violet: '#7c3aed',
slate: '#64748b',
grid: 'rgba(0,0,0,.06)',
};
Chart.defaults.font.family = "'Malgun Gothic','Apple SD Gothic Neo','Noto Sans KR',sans-serif";
Chart.defaults.font.size = 11;
Chart.defaults.color = '#4b5563';
const commonOpts = {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: { position: 'bottom', labels: { boxWidth: 10, padding: 8, font: { size: 10 } } },
},
};
const axisOpts = {
scales: {
x: { grid: { color: C.grid }, ticks: { maxRotation: 45, minRotation: 0, font: { size: 10 } } },
y: { grid: { color: C.grid }, ticks: { font: { size: 10 } }, beginAtZero: true },
},
};
new Chart(document.getElementById('chDoughnutSpec'), {
type: 'doughnut',
data: {
labels: ['일반 5L', '일반 10·20L', '음식물 스티커', '재사용', '기타'],
datasets: [{
data: [38, 22, 28, 9, 3],
backgroundColor: [C.primary, C.blue, C.teal, C.emerald, C.slate],
borderWidth: 0,
}],
},
options: { ...commonOpts, cutout: '58%' },
});
new Chart(document.getElementById('chDoughnutFlow'), {
type: 'doughnut',
data: {
labels: ['접수', '검토', '발주', '납품', '완료'],
datasets: [{
data: [12, 8, 6, 5, 42],
backgroundColor: [C.amber, C.blue, C.violet, C.teal, C.emerald],
borderWidth: 0,
}],
},
options: { ...commonOpts, cutout: '55%' },
});
new Chart(document.getElementById('chBarWeek'), {
type: 'bar',
data: {
labels: ['월', '화', '수', '목', '금', '토', '일'],
datasets: [{
label: '출고',
data: [42, 55, 48, 61, 58, 22, 8],
backgroundColor: C.primary,
borderRadius: 4,
}],
},
options: { ...commonOpts, ...axisOpts, plugins: { ...commonOpts.plugins, legend: { display: false } } },
});
new Chart(document.getElementById('chRadar'), {
type: 'radar',
data: {
labels: ['재고안정', '신청처리', '납기준수', '민원응대', '데이터품질'],
datasets: [
{
label: '이번 달',
data: [82, 76, 88, 71, 85],
borderColor: C.primary,
backgroundColor: 'rgba(43, 76, 140, 0.2)',
pointBackgroundColor: C.primary,
},
{
label: '전월',
data: [78, 80, 84, 75, 80],
borderColor: C.blue,
backgroundColor: 'rgba(59, 130, 246, 0.12)',
pointBackgroundColor: C.blue,
},
],
},
options: {
...commonOpts,
scales: {
r: {
beginAtZero: true,
max: 100,
ticks: { stepSize: 20, font: { size: 9 } },
grid: { color: C.grid },
pointLabels: { font: { size: 10 } },
},
},
},
});
new Chart(document.getElementById('chLineYear'), {
type: 'line',
data: {
labels: ['3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월', '1월', '2월'],
datasets: [
{
label: '출고(천 장)',
data: [320, 340, 310, 355, 380, 360, 370, 390, 400, 385, 410, 395],
borderColor: C.primary,
backgroundColor: 'rgba(43, 76, 140, 0.08)',
fill: true,
tension: 0.35,
pointRadius: 3,
},
{
label: '구매신청(건)',
data: [118, 125, 112, 130, 142, 128, 135, 140, 155, 148, 160, 152],
borderColor: C.teal,
backgroundColor: 'transparent',
tension: 0.35,
yAxisID: 'y1',
pointRadius: 3,
},
],
},
options: {
...commonOpts,
...axisOpts,
scales: {
x: axisOpts.scales.x,
y: { type: 'linear', position: 'left', grid: { color: C.grid }, title: { display: true, text: '출고', font: { size: 10 } } },
y1: {
type: 'linear',
position: 'right',
grid: { drawOnChartArea: false },
title: { display: true, text: '건수', font: { size: 10 } },
beginAtZero: true,
},
},
},
});
new Chart(document.getElementById('chBarSku'), {
type: 'bar',
data: {
labels: ['5L', '10L', '20L', '스티커', '재사용', '특수'],
datasets: [{
label: '재고',
data: [12.4, 8.2, 2.1, 15.0, 4.3, 0.9],
backgroundColor: [C.primary, C.blue, C.amber, C.teal, C.emerald, C.rose],
borderRadius: 4,
}],
},
options: {
...commonOpts,
...axisOpts,
indexAxis: 'x',
plugins: { ...commonOpts.plugins, legend: { display: false } },
},
});
new Chart(document.getElementById('chBarHStore'), {
type: 'bar',
data: {
labels: ['행복마트 북구', '◇◇할인점', '□□마트', '○○슈퍼', '△△상회'],
datasets: [{
label: '천 장',
data: [5.2, 4.8, 3.9, 3.5, 2.1],
backgroundColor: C.primary,
borderRadius: 4,
}],
},
options: {
...commonOpts,
indexAxis: 'y',
plugins: { ...commonOpts.plugins, legend: { display: false } },
scales: {
x: { grid: { color: C.grid }, beginAtZero: true, ticks: { font: { size: 10 } } },
y: { grid: { display: false }, ticks: { font: { size: 10 } } },
},
},
});
new Chart(document.getElementById('chStackedQ'), {
type: 'bar',
data: {
labels: ['1분기', '2분기', '3분기', '4분기(예)'],
datasets: [
{ label: '입고', data: [420, 450, 480, 460], backgroundColor: C.emerald, stack: 's' },
{ label: '출고', data: [380, 410, 440, 430], backgroundColor: C.primary, stack: 's' },
{ label: '조정', data: [12, 8, 15, 10], backgroundColor: C.amber, stack: 's' },
],
},
options: {
...commonOpts,
scales: {
x: { stacked: true, grid: { display: false }, ticks: { font: { size: 10 } } },
y: { stacked: true, grid: { color: C.grid }, ticks: { font: { size: 10 } }, beginAtZero: true },
},
},
});
new Chart(document.getElementById('chAreaCum'), {
type: 'line',
data: {
labels: ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월'],
datasets: [{
label: '누적 출고(만 장)',
data: [3.2, 6.8, 10.5, 14.2, 18.0, 21.5, 25.1, 28.9, 32.4, 36.0, 39.8, 43.5],
borderColor: C.blue,
backgroundColor: 'rgba(59, 130, 246, 0.25)',
fill: true,
tension: 0.4,
pointRadius: 0,
}],
},
options: { ...commonOpts, ...axisOpts, plugins: { ...commonOpts.plugins, legend: { display: true } } },
});
new Chart(document.getElementById('chPolarTime'), {
type: 'polarArea',
data: {
labels: ['평일 오전', '평일 오후', '평일 야간', '주말'],
datasets: [{
data: [28, 45, 8, 19],
backgroundColor: [
'rgba(43, 76, 140, 0.75)',
'rgba(13, 148, 136, 0.7)',
'rgba(217, 119, 6, 0.65)',
'rgba(124, 58, 237, 0.65)',
],
borderWidth: 1,
borderColor: '#fff',
}],
},
options: {
...commonOpts,
scales: {
r: {
ticks: { backdropColor: 'transparent', font: { size: 9 } },
grid: { color: C.grid },
pointLabels: { font: { size: 10 } },
},
},
},
});
})();
</script>
</body>
</html>

391
app/Views/bag/lg_dashboard_dense.php Normal file
View File

@@ -0,0 +1,391 @@
<?php
/**
* 로그인 후 메인 — 정보 집약형 대시보드 (KPI·다중 표·알림·로그 한 화면)
* 상단 메뉴바는 lg_dashboard.php 와 동일
*
* @var string $lgLabel
*/
$lgLabel = $lgLabel ?? '북구';
$mbName = session()->get('mb_name') ?? '담당자';
$dashClassic = base_url('dashboard/classic-mock');
$dashModern = base_url('dashboard/modern');
$dashDense = base_url('dashboard/dense');
$dashCharts = base_url('dashboard/charts');
$kpiTop = [
['icon' => 'fa-triangle-exclamation', 'c' => 'text-amber-700', 'bg' => 'bg-amber-50', 'v' => '3', 'l' => '재고부족', 'sub' => '품목'],
['icon' => 'fa-cart-shopping', 'c' => 'text-sky-700', 'bg' => 'bg-sky-50', 'v' => '12', 'l' => '구매신청', 'sub' => '미처리'],
['icon' => 'fa-truck', 'c' => 'text-emerald-700', 'bg' => 'bg-emerald-50', 'v' => '8', 'l' => '발주·입고', 'sub' => '금주'],
['icon' => 'fa-user-clock', 'c' => 'text-violet-700', 'bg' => 'bg-violet-50', 'v' => '4', 'l' => '회원승인', 'sub' => '대기'],
['icon' => 'fa-store', 'c' => 'text-rose-700', 'bg' => 'bg-rose-50', 'v' => '127', 'l' => '지정판매소', 'sub' => '등록'],
['icon' => 'fa-boxes-stacked', 'c' => 'text-slate-700', 'bg' => 'bg-slate-100', 'v' => '48.2k', 'l' => '봉투재고', 'sub' => '장 합계'],
['icon' => 'fa-file-invoice', 'c' => 'text-orange-700', 'bg' => 'bg-orange-50', 'v' => '6', 'l' => '세금계산서', 'sub' => '발행대기'],
['icon' => 'fa-headset', 'c' => 'text-cyan-700', 'bg' => 'bg-cyan-50', 'v' => '2', 'l' => '민원·문의', 'sub' => '오늘'],
];
$stockRows = [
['일반 5L', '12,400', '안전', '3.2주'],
['일반 10L', '8,200', '주의', '1.8주'],
['일반 20L', '2,100', '부족', '0.6주'],
['음식물 스티커', '15,000', '안전', '5.1주'],
['재사용봉투', '4,300', '안전', '2.4주'],
['특수규격 A', '890', '부족', '0.3주'],
];
$orderRows = [
['PO-2025-0218', '○○상사', '일반 5L×2박스', '발주확인', '02-26 10:20'],
['PO-2025-0217', '△△유통', '스티커 500매', '납품중', '02-26 09:05'],
['PO-2025-0216', '□□종량제', '20L 혼합', '입고완료', '02-25 16:40'],
['REQ-8841', '행복마트 북구점', '5L 2,000장', '접수', '02-26 09:12'],
['REQ-8839', '○○슈퍼', '스티커 500', '처리중', '02-26 08:45'],
];
$logRows = [
['10:42', 'system', '일일 재고 스냅샷 생성 완료'],
['10:18', 'user', esc($mbName) . ' 로그인 (IP 마스킹)'],
['09:55', 'batch', '구매신청 자동 분배 3건'],
['09:30', 'admin', '판매소 코드 2건 갱신'],
['08:12', 'api', '세금계산서 연동 응답 정상'],
];
$storeSummary = [
['행복마트 북구점', '42', '정상', '02-26'],
['○○슈퍼', '38', '정상', '02-25'],
['△△상회', '15', '연체1건', '02-20'],
['□□마트', '29', '정상', '02-26'],
['◇◇할인점', '51', '정상', '02-26'],
];
$approvals = [
['김○○', '판매소', '02-26', '서류검토'],
['이○○', '일반', '02-25', '본인확인'],
['박○○', '판매소', '02-25', '주소불일치'],
];
$notices = [
'2월 말 정기 재고 실사 안내 — 2/28 17:00 마감',
'봉투 단가 조정 예고 — 3/1 적용 예정 (안내문 배포 완료)',
];
?>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>종량제 시스템 — 종합 현황 (정보집약)</title>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet"/>
<style>
body {
font-family: 'Malgun Gothic', 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
font-size: 12px;
color: #333;
}
.nav-top a.nav-active {
color: #2b4c8c;
font-weight: 600;
border-bottom: 2px solid #2b4c8c;
padding-bottom: 2px;
margin-bottom: -2px;
}
.dense-table th, .dense-table td { padding: 0.25rem 0.4rem; line-height: 1.25; }
.dense-table thead th { font-size: 11px; font-weight: 600; color: #555; background: #f3f4f6; border-bottom: 1px solid #d1d5db; }
.dense-table tbody td { border-bottom: 1px solid #eee; font-size: 11px; }
.spark { display: flex; align-items: flex-end; gap: 2px; height: 36px; }
.spark span { flex: 1; background: linear-gradient(180deg, #3b82f6, #93c5fd); border-radius: 1px; min-width: 4px; }
</style>
</head>
<body class="bg-[#f0f2f5] flex flex-col min-h-screen">
<header class="border-b border-gray-300 bg-white shadow-sm shrink-0" data-purpose="top-navigation">
<div class="flex items-center justify-between px-3 py-1.5 gap-3 flex-wrap">
<div class="flex items-center gap-2 shrink-0">
<div class="flex items-center gap-2 text-green-700 font-bold text-base">
<i class="fa-solid fa-recycle text-lg"></i>
<span>종량제 시스템</span>
</div>
<span class="hidden sm:inline text-[11px] text-gray-500 border-l border-gray-300 pl-2">
<?= esc($lgLabel) ?> · <strong class="text-gray-700"><?= esc($mbName) ?></strong>님
</span>
</div>
<nav class="nav-top hidden lg:flex flex-wrap items-center gap-3 xl:gap-4 text-[13px] font-medium text-gray-700">
<a class="nav-active flex items-center gap-1 whitespace-nowrap" href="<?= esc($dashDense) ?>">
<i class="fa-solid fa-gauge-high"></i> 업무 현황
</a>
<a class="flex items-center gap-1 hover:text-blue-600 whitespace-nowrap" href="#"><i class="fa-regular fa-file-lines"></i> 문서 관리</a>
<a class="flex items-center gap-1 hover:text-blue-600 whitespace-nowrap" href="#"><i class="fa-solid fa-box-open"></i> 규격</a>
<a class="flex items-center gap-1 hover:text-blue-600 whitespace-nowrap" href="#"><i class="fa-solid fa-bag-shopping"></i> 봉투 양식</a>
<a class="flex items-center gap-1 hover:text-blue-600 whitespace-nowrap" href="#"><i class="fa-solid fa-table"></i> 데이터 양식</a>
<a class="flex items-center gap-1 hover:text-blue-600 whitespace-nowrap" href="#"><i class="fa-solid fa-clock-rotate-left"></i> 사용 내역</a>
<a class="flex items-center gap-1 hover:text-blue-600 whitespace-nowrap" href="<?= base_url('bag/inventory-inquiry') ?>"><i class="fa-solid fa-boxes-stacked"></i> 재고 현황</a>
<a class="flex items-center gap-1 hover:text-blue-600 whitespace-nowrap" href="<?= base_url('bag/waste-suibal-enterprise') ?>"><i class="fa-solid fa-table-list"></i> 수불 현황</a>
<a class="flex items-center gap-1 hover:text-blue-600 whitespace-nowrap" href="#"><i class="fa-solid fa-chart-line"></i> 통계 분석</a>
<a class="flex items-center gap-1 hover:text-blue-600 whitespace-nowrap" href="#"><i class="fa-solid fa-gear"></i> 설정</a>
</nav>
<div class="flex items-center gap-1.5 shrink-0 text-[11px]">
<a href="<?= esc($dashClassic) ?>" class="text-[#2b4c8c] hover:underline whitespace-nowrap hidden md:inline">클래식</a>
<span class="text-gray-300 hidden md:inline">|</span>
<a href="<?= esc($dashModern) ?>" class="text-[#2b4c8c] hover:underline whitespace-nowrap hidden md:inline">모던</a>
<span class="text-gray-300 hidden md:inline">|</span>
<a href="<?= esc($dashCharts) ?>" class="text-[#2b4c8c] hover:underline whitespace-nowrap hidden md:inline" title="그래프 대시보드">차트</a>
<a href="<?= base_url('logout') ?>" class="text-gray-500 hover:text-gray-800 p-1 ml-1" title="로그아웃">
<i class="fa-solid fa-arrow-right-from-bracket"></i>
</a>
</div>
</div>
</header>
<!-- 컴팩트 컨텍스트 바 -->
<div class="bg-[#eff5fb] border-b border-gray-300 px-3 py-1 flex flex-wrap items-center justify-between gap-2 text-[11px] shrink-0">
<span class="font-semibold text-gray-800">
<i class="fa-solid fa-table-columns text-[#2b4c8c] mr-1"></i>종합 운영 현황
<span class="font-normal text-gray-500 ml-1">· KPI · 재고 · 발주/신청 · 로그 · 판매소</span>
</span>
<div class="flex flex-wrap items-center gap-2 text-gray-600">
<span><i class="fa-regular fa-calendar mr-0.5"></i><?= date('Y-m-d (D) H:i') ?></span>
<span class="text-gray-300">|</span>
<span>기준지자체 <strong class="text-gray-800"><?= esc($lgLabel) ?></strong></span>
<button type="button" class="bg-[#2b4c8c] text-white px-2 py-0.5 rounded text-[11px]"><i class="fa-solid fa-rotate mr-0.5"></i>새로고침</button>
</div>
</div>
<main class="flex-1 overflow-y-auto p-2 sm:p-3">
<?php if (session()->getFlashdata('success')): ?>
<div class="mb-2 p-2 rounded border border-green-200 bg-green-50 text-green-800 text-[11px]"><?= esc(session()->getFlashdata('success')) ?></div>
<?php endif; ?>
<!-- 공지 티커 -->
<div class="mb-2 flex flex-wrap gap-2">
<?php foreach ($notices as $n): ?>
<div class="flex-1 min-w-[200px] flex items-center gap-2 bg-amber-50 border border-amber-200 text-amber-900 px-2 py-1 rounded text-[11px]">
<i class="fa-solid fa-bullhorn shrink-0"></i>
<span class="truncate" title="<?= esc($n) ?>"><?= esc($n) ?></span>
</div>
<?php endforeach; ?>
</div>
<!-- KPI 8칸 -->
<div class="grid grid-cols-2 sm:grid-cols-4 lg:grid-cols-8 gap-1.5 mb-2">
<?php foreach ($kpiTop as $k): ?>
<div class="bg-white border border-gray-200 rounded px-2 py-1.5 flex items-center gap-2 shadow-sm">
<div class="w-8 h-8 rounded <?= $k['bg'] ?> <?= $k['c'] ?> flex items-center justify-center shrink-0 text-sm">
<i class="fa-solid <?= esc($k['icon'], 'attr') ?>"></i>
</div>
<div class="min-w-0">
<div class="text-base font-bold text-gray-900 leading-tight"><?= esc($k['v']) ?></div>
<div class="text-[10px] text-gray-500 leading-tight"><?= esc($k['l']) ?></div>
<div class="text-[9px] text-gray-400"><?= esc($k['sub']) ?></div>
</div>
</div>
<?php endforeach; ?>
</div>
<div class="grid grid-cols-1 xl:grid-cols-12 gap-2 mb-2">
<!-- 재고 품목 -->
<section class="xl:col-span-4 bg-white border border-gray-200 rounded shadow-sm overflow-hidden">
<div class="px-2 py-1 border-b border-gray-200 bg-gray-50 flex justify-between items-center">
<h2 class="text-[11px] font-bold text-gray-800"><i class="fa-solid fa-warehouse text-[#2b4c8c] mr-1"></i>품목별 재고·소진예상</h2>
<a href="<?= base_url('bag/inventory-inquiry') ?>" class="text-[10px] text-blue-600 hover:underline">상세</a>
</div>
<div class="overflow-x-auto max-h-[220px] overflow-y-auto">
<table class="w-full dense-table text-left">
<thead>
<tr>
<th>품목</th>
<th class="text-right">재고(장)</th>
<th>상태</th>
<th class="text-right">소진</th>
</tr>
</thead>
<tbody>
<?php foreach ($stockRows as $r): ?>
<tr>
<td class="font-medium text-gray-800"><?= esc($r[0]) ?></td>
<td class="text-right tabular-nums"><?= esc($r[1]) ?></td>
<td>
<?php
$badge = match ($r[2]) {
'안전' => 'bg-emerald-100 text-emerald-800',
'주의' => 'bg-amber-100 text-amber-800',
'부족' => 'bg-red-100 text-red-800',
default => 'bg-gray-100 text-gray-700',
};
?>
<span class="text-[10px] px-1 py-0 rounded <?= $badge ?>"><?= esc($r[2]) ?></span>
</td>
<td class="text-right text-gray-600"><?= esc($r[3]) ?></td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
</div>
</section>
<!-- 발주·구매신청 -->
<section class="xl:col-span-4 bg-white border border-gray-200 rounded shadow-sm overflow-hidden">
<div class="px-2 py-1 border-b border-gray-200 bg-gray-50 flex justify-between items-center">
<h2 class="text-[11px] font-bold text-gray-800"><i class="fa-solid fa-list-check text-[#2b4c8c] mr-1"></i>발주 / 구매신청 진행</h2>
<span class="text-[10px] text-gray-500">최근 5건</span>
</div>
<div class="overflow-x-auto max-h-[220px] overflow-y-auto">
<table class="w-full dense-table text-left">
<thead>
<tr>
<th>문서</th>
<th>상대</th>
<th>내용</th>
<th>단계</th>
<th class="text-right">시각</th>
</tr>
</thead>
<tbody>
<?php foreach ($orderRows as $r): ?>
<tr>
<td class="text-blue-700 font-mono text-[10px]"><?= esc($r[0]) ?></td>
<td class="truncate max-w-[4.5rem]" title="<?= esc($r[1]) ?>"><?= esc($r[1]) ?></td>
<td class="truncate max-w-[5rem]" title="<?= esc($r[2]) ?>"><?= esc($r[2]) ?></td>
<td><span class="text-[10px] bg-slate-100 px-1 rounded"><?= esc($r[3]) ?></span></td>
<td class="text-right text-gray-500 text-[10px] whitespace-nowrap"><?= esc($r[4]) ?></td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
</div>
</section>
<!-- 시스템 로그 + 주간 막대 -->
<section class="xl:col-span-4 bg-white border border-gray-200 rounded shadow-sm overflow-hidden flex flex-col">
<div class="px-2 py-1 border-b border-gray-200 bg-gray-50">
<h2 class="text-[11px] font-bold text-gray-800"><i class="fa-solid fa-clock-rotate-left text-[#2b4c8c] mr-1"></i>최근 이벤트 로그</h2>
</div>
<ul class="flex-1 max-h-[140px] overflow-y-auto divide-y divide-gray-100 px-2 py-0.5">
<?php foreach ($logRows as $L): ?>
<li class="py-1 flex gap-2 text-[10px]">
<span class="text-gray-400 font-mono shrink-0 w-8"><?= esc($L[0]) ?></span>
<span class="shrink-0 w-12 text-center rounded bg-gray-100 text-gray-600"><?= esc($L[1]) ?></span>
<span class="text-gray-700"><?= $L[2] ?></span>
</li>
<?php endforeach; ?>
</ul>
<div class="border-t border-gray-100 px-2 py-1.5 bg-gray-50/80">
<div class="text-[10px] font-semibold text-gray-600 mb-1">주간 봉투 출고(천 장, 목업)</div>
<div class="spark" title="주간 추이">
<?php foreach ([40, 55, 48, 62, 58, 71, 65] as $h): ?>
<span style="height: <?= (int) $h ?>%"></span>
<?php endforeach; ?>
</div>
<div class="flex justify-between text-[9px] text-gray-400 mt-0.5">
<span>월</span><span>화</span><span>수</span><span>목</span><span>금</span><span>토</span><span>일</span>
</div>
</div>
</section>
</div>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-2 mb-2">
<!-- 판매소 요약 -->
<section class="bg-white border border-gray-200 rounded shadow-sm overflow-hidden">
<div class="px-2 py-1 border-b border-gray-200 bg-gray-50 flex justify-between items-center">
<h2 class="text-[11px] font-bold text-gray-800"><i class="fa-solid fa-store text-[#2b4c8c] mr-1"></i>지정판매소 요약</h2>
<span class="text-[10px] text-gray-500">상위 5곳</span>
</div>
<table class="w-full dense-table">
<thead>
<tr>
<th>판매소명</th>
<th class="text-right">월 봉투(백장)</th>
<th>상태</th>
<th class="text-right">최종거래</th>
</tr>
</thead>
<tbody>
<?php foreach ($storeSummary as $s): ?>
<tr>
<td class="font-medium"><?= esc($s[0]) ?></td>
<td class="text-right tabular-nums"><?= esc($s[1]) ?></td>
<td>
<?php if ($s[2] === '정상'): ?>
<span class="text-[10px] text-emerald-700"><?= esc($s[2]) ?></span>
<?php else: ?>
<span class="text-[10px] text-red-600"><?= esc($s[2]) ?></span>
<?php endif; ?>
</td>
<td class="text-right text-gray-500"><?= esc($s[3]) ?></td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
</section>
<!-- 승인 대기 + 요약 숫자 -->
<section class="bg-white border border-gray-200 rounded shadow-sm overflow-hidden">
<div class="px-2 py-1 border-b border-gray-200 bg-gray-50">
<h2 class="text-[11px] font-bold text-gray-800"><i class="fa-solid fa-user-check text-[#2b4c8c] mr-1"></i>회원·판매소 승인 대기</h2>
</div>
<div class="grid grid-cols-3 gap-1 p-1.5 border-b border-gray-100 bg-gray-50/50 text-center">
<div>
<div class="text-lg font-bold text-[#2b4c8c]">4</div>
<div class="text-[9px] text-gray-500">전체 대기</div>
</div>
<div>
<div class="text-lg font-bold text-amber-600">2</div>
<div class="text-[9px] text-gray-500">오늘 접수</div>
</div>
<div>
<div class="text-lg font-bold text-gray-600">1.2일</div>
<div class="text-[9px] text-gray-500">평균 처리</div>
</div>
</div>
<table class="w-full dense-table">
<thead>
<tr>
<th>신청자</th>
<th>유형</th>
<th>접수일</th>
<th>메모</th>
</tr>
</thead>
<tbody>
<?php foreach ($approvals as $a): ?>
<tr>
<td><?= esc($a[0]) ?></td>
<td><?= esc($a[1]) ?></td>
<td class="text-gray-600"><?= esc($a[2]) ?></td>
<td class="text-gray-500 truncate max-w-[6rem]"><?= esc($a[3]) ?></td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
</section>
</div>
<!-- 하단: 비율 도넛 + 텍스트 브리핑 -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-2">
<div class="bg-white border border-gray-200 rounded shadow-sm p-2 flex items-center gap-3">
<div class="relative w-16 h-16 shrink-0 rounded-full" style="background: conic-gradient(#2b4c8c 0% 40%, #10b981 40% 70%, #f59e0b 70% 92%, #e5e7eb 92% 100%);">
<div class="absolute inset-2 rounded-full bg-white flex items-center justify-center text-[10px] font-bold text-gray-700">비중</div>
</div>
<div class="text-[10px] text-gray-600 space-y-0.5">
<div><span class="inline-block w-2 h-2 rounded-full bg-[#2b4c8c] mr-1"></span>일반 40%</div>
<div><span class="inline-block w-2 h-2 rounded-full bg-emerald-500 mr-1"></span>스티커 30%</div>
<div><span class="inline-block w-2 h-2 rounded-full bg-amber-500 mr-1"></span>대형/특수 22%</div>
</div>
</div>
<div class="md:col-span-2 bg-white border border-gray-200 rounded shadow-sm p-2">
<h3 class="text-[11px] font-bold text-gray-800 mb-1"><i class="fa-solid fa-clipboard-list text-[#2b4c8c] mr-1"></i>운영 브리핑 (목업)</h3>
<ul class="text-[11px] text-gray-600 space-y-0.5 list-disc list-inside">
<li>다음 주 예상 구매신청 <strong class="text-gray-900">약 28건</strong> (전주 대비 +12%)</li>
<li><strong class="text-red-700">일반 20L</strong>·<strong class="text-red-700">특수규격 A</strong> 발주 권고 — 안전재고 미달</li>
<li>세금계산서 <strong>6건</strong> 미발행 — 담당 회계에 알림 발송됨</li>
<li>지정판매소 <strong>△△상회</strong> 연체 1건 — 현장 점검 일정 3/3</li>
</ul>
</div>
</div>
<p class="text-center text-[10px] text-gray-400 mt-2">
레이아웃: <a href="<?= esc($dashClassic) ?>" class="text-[#2b4c8c] hover:underline">/dashboard</a>
· <a href="<?= esc($dashModern) ?>" class="text-[#2b4c8c] hover:underline">/dashboard/modern</a>
· <strong class="text-gray-600">/dashboard/dense</strong> (이 화면)
· <a href="<?= esc($dashCharts) ?>" class="text-[#2b4c8c] hover:underline">/dashboard/charts</a>
</p>
</main>
</body>
</html>

215
app/Views/bag/lg_dashboard_modern.php Normal file
View File

@@ -0,0 +1,215 @@
<?php
/**
* 로그인 후 메인 대시보드 — 모던 콘텐츠 레이아웃
* 상단 메뉴바는 /dashboard(lg_dashboard.php)와 동일
*
* @var string $lgLabel
*/
$lgLabel = $lgLabel ?? '북구';
$mbName = session()->get('mb_name') ?? '담당자';
$dashClassic = base_url('dashboard/classic-mock');
$dashModern = base_url('dashboard/modern');
$dashDense = base_url('dashboard/dense');
$dashCharts = base_url('dashboard/charts');
?>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>종량제 시스템 — 업무 현황 (모던)</title>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;600;700&display=swap" rel="stylesheet"/>
<style>
body {
font-family: 'Malgun Gothic', 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
font-size: 13px;
color: #333;
}
.nav-top a.nav-active {
color: #2b4c8c;
font-weight: 600;
border-bottom: 2px solid #2b4c8c;
padding-bottom: 2px;
margin-bottom: -2px;
}
.stat-card { transition: transform .15s, box-shadow .15s; }
.stat-card:hover { transform: translateY(-2px); box-shadow: 0 12px 24px rgba(15,23,42,.08); }
</style>
</head>
<body class="bg-gray-50 flex flex-col min-h-screen">
<!-- 상단 메뉴: lg_dashboard.php 와 동일 구조·스타일 (현재 URL만 /dashboard/modern 반영) -->
<header class="border-b border-gray-300 bg-white shadow-sm shrink-0" data-purpose="top-navigation">
<div class="flex items-center justify-between px-4 py-2 gap-4 flex-wrap">
<div class="flex items-center gap-3 shrink-0">
<div class="flex items-center gap-2 text-green-700 font-bold text-lg">
<i class="fa-solid fa-recycle text-xl"></i>
<span>종량제 시스템</span>
</div>
<span class="hidden sm:inline text-xs text-gray-500 border-l border-gray-300 pl-3">
<?= esc($lgLabel) ?> · <strong class="text-gray-700"><?= esc($mbName) ?></strong>님
</span>
</div>
<nav class="nav-top hidden lg:flex flex-wrap items-center gap-4 xl:gap-5 text-sm font-medium text-gray-700">
<a class="nav-active flex items-center gap-1 whitespace-nowrap" href="<?= esc($dashModern) ?>">
<i class="fa-solid fa-gauge-high"></i> 업무 현황
</a>
<a class="flex items-center gap-1 hover:text-blue-600 whitespace-nowrap" href="#"><i class="fa-regular fa-file-lines"></i> 문서 관리</a>
<a class="flex items-center gap-1 hover:text-blue-600 whitespace-nowrap" href="#"><i class="fa-solid fa-box-open"></i> 규격</a>
<a class="flex items-center gap-1 hover:text-blue-600 whitespace-nowrap" href="#"><i class="fa-solid fa-bag-shopping"></i> 봉투 양식</a>
<a class="flex items-center gap-1 hover:text-blue-600 whitespace-nowrap" href="#"><i class="fa-solid fa-table"></i> 데이터 양식</a>
<a class="flex items-center gap-1 hover:text-blue-600 whitespace-nowrap" href="#"><i class="fa-solid fa-clock-rotate-left"></i> 사용 내역</a>
<a class="flex items-center gap-1 hover:text-blue-600 whitespace-nowrap" href="<?= base_url('bag/inventory-inquiry') ?>"><i class="fa-solid fa-boxes-stacked"></i> 재고 현황</a>
<a class="flex items-center gap-1 hover:text-blue-600 whitespace-nowrap" href="<?= base_url('bag/waste-suibal-enterprise') ?>"><i class="fa-solid fa-table-list"></i> 수불 현황</a>
<a class="flex items-center gap-1 hover:text-blue-600 whitespace-nowrap" href="#"><i class="fa-solid fa-chart-line"></i> 통계 분석</a>
<a class="flex items-center gap-1 hover:text-blue-600 whitespace-nowrap" href="#"><i class="fa-solid fa-gear"></i> 설정</a>
</nav>
<div class="flex items-center gap-2 shrink-0">
<a href="<?= esc($dashClassic) ?>" class="text-xs text-[#2b4c8c] hover:underline whitespace-nowrap hidden sm:inline">클래식</a>
<span class="text-gray-300 hidden sm:inline">|</span>
<a href="<?= esc($dashDense) ?>" class="text-xs text-[#2b4c8c] hover:underline whitespace-nowrap hidden sm:inline" title="정보 집약 종합">종합</a>
<span class="text-gray-300 hidden sm:inline">|</span>
<a href="<?= esc($dashCharts) ?>" class="text-xs text-[#2b4c8c] hover:underline whitespace-nowrap hidden sm:inline" title="그래프 대시보드">차트</a>
<a href="<?= base_url('logout') ?>" class="text-gray-500 hover:text-gray-800 p-1" title="로그아웃">
<i class="fa-solid fa-arrow-right-from-bracket text-lg"></i>
</a>
</div>
</div>
</header>
<main class="flex-1 flex flex-col min-h-0 overflow-y-auto p-4 md:p-6">
<?php if (session()->getFlashdata('success')): ?>
<div class="mb-4 p-3 rounded-xl bg-emerald-50 text-emerald-800 text-sm border border-emerald-100"><?= esc(session()->getFlashdata('success')) ?></div>
<?php endif; ?>
<!-- 히어로 배너 -->
<section class="rounded-2xl bg-gradient-to-r from-slate-800 via-slate-800 to-emerald-900 text-white p-6 md:p-8 mb-6 shadow-lg relative overflow-hidden">
<div class="absolute top-0 right-0 w-64 h-64 bg-emerald-500/10 rounded-full blur-3xl -translate-y-1/2 translate-x-1/2 pointer-events-none"></div>
<div class="relative">
<p class="text-emerald-300/90 text-sm font-medium mb-1"><?= esc($lgLabel) ?></p>
<h1 class="text-2xl md:text-3xl font-bold tracking-tight mb-2">안녕하세요, <?= esc($mbName) ?>님</h1>
<p class="text-slate-300 text-sm max-w-xl">오늘의 재고·구매신청·발주 요약을 한눈에 확인하세요. 다른 레이아웃은 <a href="<?= esc($dashClassic) ?>" class="text-emerald-300 underline hover:text-white">가로 메뉴형 대시보드</a>에서 볼 수 있습니다.</p>
</div>
</section>
<!-- KPI 카드 -->
<div class="grid grid-cols-2 lg:grid-cols-4 gap-3 md:gap-4 mb-6">
<div class="stat-card rounded-2xl bg-white border border-slate-100 p-4 shadow-sm">
<div class="w-10 h-10 rounded-xl bg-amber-100 text-amber-600 flex items-center justify-center mb-3"><i class="fa-solid fa-triangle-exclamation"></i></div>
<p class="text-2xl font-bold text-slate-900">3</p>
<p class="text-xs text-slate-500 mt-1">재고 부족 품목</p>
</div>
<div class="stat-card rounded-2xl bg-white border border-slate-100 p-4 shadow-sm">
<div class="w-10 h-10 rounded-xl bg-sky-100 text-sky-600 flex items-center justify-center mb-3"><i class="fa-solid fa-cart-arrow-down"></i></div>
<p class="text-2xl font-bold text-slate-900">12</p>
<p class="text-xs text-slate-500 mt-1">미처리 구매신청</p>
</div>
<div class="stat-card rounded-2xl bg-white border border-slate-100 p-4 shadow-sm">
<div class="w-10 h-10 rounded-xl bg-emerald-100 text-emerald-600 flex items-center justify-center mb-3"><i class="fa-solid fa-truck-ramp-box"></i></div>
<p class="text-2xl font-bold text-slate-900">8</p>
<p class="text-xs text-slate-500 mt-1">이번 주 발주·입고</p>
</div>
<div class="stat-card rounded-2xl bg-white border border-slate-100 p-4 shadow-sm">
<div class="w-10 h-10 rounded-xl bg-violet-100 text-violet-600 flex items-center justify-center mb-3"><i class="fa-solid fa-user-clock"></i></div>
<p class="text-2xl font-bold text-slate-900">4</p>
<p class="text-xs text-slate-500 mt-1">승인 대기 회원</p>
</div>
</div>
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
<!-- 링 차트 느낌 (CSS) -->
<div class="lg:col-span-1 rounded-2xl bg-white border border-slate-100 p-5 shadow-sm">
<h3 class="font-semibold text-slate-800 mb-4 text-sm">봉투 재고 비중</h3>
<div class="flex items-center justify-center gap-6">
<div class="relative w-36 h-36 rounded-full" style="background: conic-gradient(#10b981 0% 35%, #3b82f6 35% 62%, #f59e0b 62% 88%, #e2e8f0 88% 100%);">
<div class="absolute inset-3 rounded-full bg-white flex flex-col items-center justify-center text-center">
<span class="text-lg font-bold text-slate-800">100%</span>
<span class="text-[10px] text-slate-500">목업</span>
</div>
</div>
<ul class="text-xs space-y-2 text-slate-600">
<li class="flex items-center gap-2"><span class="w-2 h-2 rounded-full bg-emerald-500"></span> 일반용</li>
<li class="flex items-center gap-2"><span class="w-2 h-2 rounded-full bg-blue-500"></span> 스티커</li>
<li class="flex items-center gap-2"><span class="w-2 h-2 rounded-full bg-amber-500"></span> 재사용</li>
<li class="flex items-center gap-2"><span class="w-2 h-2 rounded-full bg-slate-200"></span> 기타</li>
</ul>
</div>
</div>
<!-- 미니 타임라인 스타일 구매신청 -->
<div class="lg:col-span-2 rounded-2xl bg-white border border-slate-100 p-5 shadow-sm">
<div class="flex items-center justify-between mb-4">
<h3 class="font-semibold text-slate-800 text-sm">지정판매소 구매신청</h3>
<button type="button" class="text-xs font-medium text-emerald-600 hover:text-emerald-800">전체</button>
</div>
<ul class="space-y-3">
<?php
$timeline = [
['행복마트 북구점', '일반용 5L · 2,000장', '09:12', '접수'],
['○○슈퍼', '음식물 스티커 · 500장', '08:45', '처리중'],
['△△상회', '일반용 20L · 박스 3', '어제', '완료'],
];
foreach ($timeline as $t):
$dot = $t[3] === '완료' ? 'bg-emerald-500' : ($t[3] === '처리중' ? 'bg-amber-400' : 'bg-slate-400');
?>
<li class="flex gap-3 text-sm">
<span class="w-2 shrink-0 mt-1.5"><span class="block w-2 h-2 rounded-full <?= $dot ?>"></span></span>
<div class="flex-1 min-w-0 border-b border-slate-50 pb-3">
<div class="flex justify-between gap-2">
<span class="font-medium text-slate-800 truncate"><?= esc($t[0]) ?></span>
<span class="text-xs text-slate-400 shrink-0"><?= esc($t[2]) ?></span>
</div>
<p class="text-xs text-slate-500 mt-0.5"><?= esc($t[1]) ?></p>
<span class="inline-block mt-1 text-[10px] px-2 py-0.5 rounded-md bg-slate-100 text-slate-600"><?= esc($t[3]) ?></span>
</div>
</li>
<?php endforeach; ?>
</ul>
</div>
</div>
<!-- 표 형태 요약 (카드 안) -->
<div class="rounded-2xl bg-white border border-slate-100 shadow-sm overflow-hidden mb-4">
<div class="px-5 py-3 border-b border-slate-100 bg-slate-50/80">
<h3 class="font-semibold text-slate-800 text-sm">최근 신청 상세</h3>
</div>
<div class="overflow-x-auto">
<table class="w-full text-sm">
<thead>
<tr class="text-left text-xs text-slate-500 border-b border-slate-100">
<th class="px-5 py-3 font-medium">일시</th>
<th class="px-5 py-3 font-medium">판매소</th>
<th class="px-5 py-3 font-medium">품목</th>
<th class="px-5 py-3 font-medium text-right">수량</th>
<th class="px-5 py-3 font-medium text-center">상태</th>
</tr>
</thead>
<tbody class="divide-y divide-slate-50">
<tr class="hover:bg-slate-50/80">
<td class="px-5 py-3 text-slate-600">2025-02-26 09:12</td>
<td class="px-5 py-3">행복마트 북구점</td>
<td class="px-5 py-3">일반용 5L</td>
<td class="px-5 py-3 text-right tabular-nums">2,000장</td>
<td class="px-5 py-3 text-center"><span class="text-xs px-2 py-1 rounded-lg bg-slate-100">접수</span></td>
</tr>
<tr class="hover:bg-slate-50/80">
<td class="px-5 py-3 text-slate-600">2025-02-26 08:45</td>
<td class="px-5 py-3">○○슈퍼</td>
<td class="px-5 py-3">음식물 스티커</td>
<td class="px-5 py-3 text-right tabular-nums">500장</td>
<td class="px-5 py-3 text-center"><span class="text-xs px-2 py-1 rounded-lg bg-amber-50 text-amber-800">처리중</span></td>
</tr>
</tbody>
</table>
</div>
</div>
<p class="text-center text-[11px] text-slate-400">
URL 비교 — <strong class="text-slate-600">클래식 레이아웃</strong> <code class="bg-slate-100 px-1 rounded">/dashboard</code>
· <strong class="text-slate-600">모던 콘텐츠(이 화면)</strong> <code class="bg-slate-100 px-1 rounded">/dashboard/modern</code>
· <a href="<?= esc($dashCharts) ?>" class="text-[#2b4c8c] hover:underline">/dashboard/charts</a>
<span class="block sm:inline mt-1 sm:mt-0">· 상단 메뉴는 동일</span>
</p>
</main>
</body>
</html>

446
app/Views/bag/waste_suibal_enterprise.php Normal file
View File

@@ -0,0 +1,446 @@
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>종량제 시스템 — 봉투 수불 현황</title>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
<style data-purpose="base-typography">
body {
font-family: 'Malgun Gothic', 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
font-size: 13px;
color: #333;
}
</style>
<style data-purpose="table-styling">
.data-grid {
border-collapse: collapse;
width: 100%;
min-width: 1200px;
}
.data-grid th, .data-grid td {
border: 1px solid #d1d5db;
padding: 6px 8px;
}
.data-grid th {
background-color: #f3f4f6;
font-weight: 600;
text-align: center;
vertical-align: middle;
white-space: nowrap;
}
.data-grid td {
vertical-align: middle;
}
.data-grid tbody tr:hover {
background-color: #f9fafb;
}
.col-number { text-align: right; }
.col-center { text-align: center; }
.data-grid thead th.border-b-0 { border-bottom: 1px solid #f3f4f6; }
</style>
</head>
<body class="bg-white flex flex-col min-h-screen">
<header class="border-b border-gray-300 bg-white shadow-sm" data-purpose="top-navigation">
<div class="flex items-center justify-between px-4 py-2 gap-4 flex-wrap">
<div class="flex items-center gap-2 text-green-700 font-bold text-lg shrink-0">
<i class="fa-solid fa-recycle text-xl"></i>
<span>종량제 시스템</span>
</div>
<nav class="hidden lg:flex flex-wrap items-center gap-4 xl:gap-6 text-sm font-medium text-gray-700">
<a class="flex items-center gap-1 hover:text-blue-600 whitespace-nowrap" href="#"><i class="fa-regular fa-file-lines"></i> 문서 관리</a>
<a class="flex items-center gap-1 hover:text-blue-600 whitespace-nowrap" href="#"><i class="fa-solid fa-box-open"></i> 규격</a>
<a class="flex items-center gap-1 hover:text-blue-600 whitespace-nowrap" href="#"><i class="fa-solid fa-bag-shopping"></i> 봉투 양식</a>
<a class="flex items-center gap-1 hover:text-blue-600 whitespace-nowrap" href="#"><i class="fa-solid fa-table"></i> 데이터 양식</a>
<a class="flex items-center gap-1 hover:text-blue-600 whitespace-nowrap" href="#"><i class="fa-solid fa-clock-rotate-left"></i> 사용 내역</a>
<a class="flex items-center gap-1 hover:text-blue-600 whitespace-nowrap" href="<?= base_url('bag/inventory-inquiry') ?>"><i class="fa-solid fa-boxes-stacked"></i> 재고 현황</a>
<a class="flex items-center gap-1 hover:text-blue-600 whitespace-nowrap" href="#"><i class="fa-solid fa-chart-line"></i> 통계 분석</a>
<a class="flex items-center gap-1 hover:text-blue-600 whitespace-nowrap" href="#"><i class="fa-solid fa-gear"></i> 설정</a>
</nav>
<div class="flex items-center gap-2 shrink-0">
<a href="<?= base_url('dashboard') ?>" class="text-xs text-gray-500 hover:text-blue-600 hidden sm:inline">대시보드</a>
<a href="<?= base_url('logout') ?>" class="text-gray-500 hover:text-gray-800 p-1" title="로그아웃">
<i class="fa-solid fa-arrow-right-from-bracket text-lg"></i>
</a>
</div>
</div>
</header>
<main class="flex-grow flex flex-col min-h-0" data-purpose="dashboard-content">
<div class="bg-[#eff5fb] border-b border-gray-300 px-4 py-2 flex justify-between items-center text-sm font-semibold text-gray-800" data-purpose="page-title">
<span><i class="fa-solid fa-table-list text-[#2b4c8c] mr-2"></i>봉투 수불 현황 <span class="text-xs font-normal text-gray-500">(기간·품목별)</span></span>
<button type="button" class="text-gray-500 hover:text-gray-800" title="필터"><i class="fa-solid fa-filter"></i></button>
</div>
<section class="p-2 border-b border-gray-300 bg-white" data-purpose="search-filters">
<div class="flex flex-wrap items-center justify-between gap-4">
<div class="flex items-center gap-3 flex-wrap">
<div class="flex items-center gap-1">
<label class="text-gray-600 font-medium whitespace-nowrap">조회기간</label>
<input class="border border-gray-300 px-2 py-1 text-xs w-24 rounded shadow-sm focus:outline-none focus:ring-1 focus:ring-blue-500" type="text" value="2024.01.01" readonly>
<span>~</span>
<input class="border border-gray-300 px-2 py-1 text-xs w-24 rounded shadow-sm focus:outline-none focus:ring-1 focus:ring-blue-500" type="text" value="2025.12.12" readonly>
</div>
<div class="flex items-center gap-2">
<label class="text-gray-600 font-medium whitespace-nowrap">봉투구분</label>
<select class="border border-gray-300 px-2 py-1 text-xs rounded shadow-sm focus:outline-none focus:ring-1 focus:ring-blue-500 w-28">
<option>전체</option>
</select>
</div>
<div class="flex items-center gap-2">
<label class="text-gray-600 font-medium whitespace-nowrap">봉투형식</label>
<select class="border border-gray-300 px-2 py-1 text-xs rounded shadow-sm focus:outline-none focus:ring-1 focus:ring-blue-500 w-32">
<option>전체 봉투</option>
</select>
</div>
<div class="flex items-center gap-2">
<label class="text-gray-600 font-medium whitespace-nowrap">대행소</label>
<select class="border border-gray-300 px-2 py-1 text-xs rounded shadow-sm focus:outline-none focus:ring-1 focus:ring-blue-500 w-28">
<option>북구</option>
</select>
</div>
<button type="button" class="bg-[#2b4c8c] hover:bg-blue-800 text-white px-4 py-1.5 rounded text-sm font-medium shadow flex items-center gap-1">
<i class="fa-solid fa-magnifying-glass"></i> 검색
</button>
</div>
<div class="flex items-center gap-2 flex-wrap">
<button type="button" class="bg-[#3b8c45] hover:bg-green-700 text-white px-3 py-1.5 rounded text-sm font-medium shadow flex items-center gap-1">
<i class="fa-solid fa-file-excel"></i> 엑셀 저장
</button>
<button type="button" class="bg-[#5a6268] hover:bg-gray-700 text-white px-3 py-1.5 rounded text-sm font-medium shadow flex items-center gap-1">
<i class="fa-solid fa-print"></i> 인쇄
</button>
<button type="button" class="bg-[#dc3545] hover:bg-red-700 text-white px-3 py-1.5 rounded text-sm font-medium shadow flex items-center gap-1">
<i class="fa-solid fa-power-off"></i> 닫기
</button>
</div>
</div>
</section>
<section class="flex-grow overflow-auto bg-gray-50 p-2" data-purpose="data-table-container">
<table class="data-grid bg-white shadow-sm" id="inventory-table">
<thead>
<tr>
<th rowspan="2">일자</th>
<th rowspan="2">품목</th>
<th rowspan="2">전월재고</th>
<th class="border-b-0" colspan="3">입고</th>
<th rowspan="2">입고<br><span class="text-xs font-normal text-gray-500">소계</span></th>
<th rowspan="2">출고<br><span class="text-xs font-normal text-gray-500">소계</span></th>
<th class="border-b-0" colspan="3">출고</th>
<th rowspan="2">잔량</th>
</tr>
<tr>
<th>입고</th>
<th>반품</th>
<th>기타</th>
<th>판매</th>
<th>기타</th>
<th>합계</th>
</tr>
</thead>
<tbody>
<tr>
<td class="col-center align-top bg-white font-medium" rowspan="18">2024.01.01</td>
<td>일반형 5L</td>
<td class="col-number">187,240</td>
<td class="col-number"></td>
<td class="col-number">0</td>
<td class="col-number">0</td>
<td class="col-number"></td>
<td class="col-number"></td>
<td class="col-number"></td>
<td class="col-number">0</td>
<td class="col-number">0</td>
<td class="col-number font-bold">187,240</td>
</tr>
<tr>
<td>일반형 5L</td>
<td class="col-number">0</td>
<td class="col-number"></td>
<td class="col-number">0</td>
<td class="col-number">0</td>
<td class="col-number"></td>
<td class="col-number"></td>
<td class="col-number"></td>
<td class="col-number">0</td>
<td class="col-number">0</td>
<td class="col-number font-bold">0</td>
</tr>
<tr>
<td>일반형 10L</td>
<td class="col-number">159,428</td>
<td class="col-number">252,000</td>
<td class="col-number">252,000</td>
<td class="col-number">8,580</td>
<td class="col-number"></td>
<td class="col-number"></td>
<td class="col-number"></td>
<td class="col-number">8,580</td>
<td class="col-number">8,990</td>
<td class="col-number font-bold bg-[#1cae9e] text-white">402,248</td>
</tr>
<tr>
<td>일반형 20L</td>
<td class="col-number">212,082</td>
<td class="col-number">201,000</td>
<td class="col-number">201,600</td>
<td class="col-number">11,320</td>
<td class="col-number"></td>
<td class="col-number"></td>
<td class="col-number"></td>
<td class="col-number">11,320</td>
<td class="col-number">11,320</td>
<td class="col-number font-bold bg-[#1cae9e] text-white">402,365</td>
</tr>
<tr>
<td>일반형 50L</td>
<td class="col-number">7,605</td>
<td class="col-number">13,000</td>
<td class="col-number">13,000</td>
<td class="col-number">540</td>
<td class="col-number"></td>
<td class="col-number"></td>
<td class="col-number"></td>
<td class="col-number">540</td>
<td class="col-number">540</td>
<td class="col-number font-bold bg-[#e87a27] text-white">20,065</td>
</tr>
<tr>
<td>일반형 75L</td>
<td class="col-number">31,459</td>
<td class="col-number">22,600</td>
<td class="col-number">22,600</td>
<td class="col-number">2,990</td>
<td class="col-number"></td>
<td class="col-number"></td>
<td class="col-number"></td>
<td class="col-number">2,090</td>
<td class="col-number">3,640</td>
<td class="col-number font-bold bg-[#e87a27] text-white">86,240</td>
</tr>
<tr>
<td>일반형 100L</td>
<td class="col-number">11</td>
<td class="col-number"></td>
<td class="col-number">0</td>
<td class="col-number"></td>
<td class="col-number"></td>
<td class="col-number"></td>
<td class="col-number"></td>
<td class="col-number">0</td>
<td class="col-number">0</td>
<td class="col-number font-bold">11</td>
</tr>
<tr>
<td>할인용 70L</td>
<td class="col-number">77,400</td>
<td class="col-number"></td>
<td class="col-number">0</td>
<td class="col-number"></td>
<td class="col-number"></td>
<td class="col-number">1,000</td>
<td class="col-number"></td>
<td class="col-number">1,000</td>
<td class="col-number">1,000</td>
<td class="col-number font-bold">76,400</td>
</tr>
<tr>
<td>공공용(매립) 20L</td>
<td class="col-number">0</td>
<td class="col-number"></td>
<td class="col-number">0</td>
<td class="col-number"></td>
<td class="col-number"></td>
<td class="col-number"></td>
<td class="col-number"></td>
<td class="col-number">0</td>
<td class="col-number">0</td>
<td class="col-number"></td>
</tr>
<tr>
<td>공공용(매립) 50L</td>
<td class="col-number">0</td>
<td class="col-number"></td>
<td class="col-number">0</td>
<td class="col-number"></td>
<td class="col-number"></td>
<td class="col-number"></td>
<td class="col-number"></td>
<td class="col-number">0</td>
<td class="col-number">0</td>
<td class="col-number"></td>
</tr>
<tr>
<td>재사용 백</td>
<td class="col-number">58,540</td>
<td class="col-number">27,000</td>
<td class="col-number">27,000</td>
<td class="col-number">560</td>
<td class="col-number"></td>
<td class="col-number"></td>
<td class="col-number"></td>
<td class="col-number">560</td>
<td class="col-number">560</td>
<td class="col-number font-bold bg-[#1cae9e] text-white">84,990</td>
</tr>
<tr>
<td>음식물 2L</td>
<td class="col-number">0</td>
<td class="col-number"></td>
<td class="col-number">0</td>
<td class="col-number"></td>
<td class="col-number"></td>
<td class="col-number"></td>
<td class="col-number"></td>
<td class="col-number">0</td>
<td class="col-number">0</td>
<td class="col-number"></td>
</tr>
<tr>
<td>음식물 스티커 1L</td>
<td class="col-number">376,758</td>
<td class="col-number"></td>
<td class="col-number">0</td>
<td class="col-number">100</td>
<td class="col-number"></td>
<td class="col-number"></td>
<td class="col-number"></td>
<td class="col-number">100</td>
<td class="col-number">180</td>
<td class="col-number font-bold">376,658</td>
</tr>
<tr>
<td>음식물 스티커 2L</td>
<td class="col-number">231,542</td>
<td class="col-number"></td>
<td class="col-number">0</td>
<td class="col-number">100</td>
<td class="col-number"></td>
<td class="col-number"></td>
<td class="col-number"></td>
<td class="col-number">100</td>
<td class="col-number">100</td>
<td class="col-number font-bold">231,422</td>
</tr>
<tr>
<td>음식물 스티커 3L</td>
<td class="col-number">529,938</td>
<td class="col-number"></td>
<td class="col-number">0</td>
<td class="col-number">1,200</td>
<td class="col-number"></td>
<td class="col-number"></td>
<td class="col-number"></td>
<td class="col-number">1,200</td>
<td class="col-number">1,200</td>
<td class="col-number font-bold">529,738</td>
</tr>
<tr>
<td>음식물 스티커 70L</td>
<td class="col-number">751,036</td>
<td class="col-number"></td>
<td class="col-number">0</td>
<td class="col-number">1,400</td>
<td class="col-number"></td>
<td class="col-number"></td>
<td class="col-number"></td>
<td class="col-number">1,400</td>
<td class="col-number">1,400</td>
<td class="col-number font-bold">750,030</td>
</tr>
<tr>
<td>대형용 스티커 120L</td>
<td class="col-number">209,743</td>
<td class="col-number"></td>
<td class="col-number">0</td>
<td class="col-number">80</td>
<td class="col-number"></td>
<td class="col-number"></td>
<td class="col-number"></td>
<td class="col-number">80</td>
<td class="col-number">80</td>
<td class="col-number font-bold">209,663</td>
</tr>
<tr>
<td>폐기물 스티커 1,000원</td>
<td class="col-number">161,676</td>
<td class="col-number"></td>
<td class="col-number">0</td>
<td class="col-number">300</td>
<td class="col-number"></td>
<td class="col-number"></td>
<td class="col-number"></td>
<td class="col-number">300</td>
<td class="col-number">300</td>
<td class="col-number font-bold">161,376</td>
</tr>
<tr class="border-t-2 border-gray-400">
<td class="col-center align-top bg-white font-medium" rowspan="4">2024.01.03</td>
<td>폐기물 스티커 10,000원</td>
<td class="col-number">44,860</td>
<td class="col-number"></td>
<td class="col-number">0</td>
<td class="col-number"></td>
<td class="col-number"></td>
<td class="col-number"></td>
<td class="col-number"></td>
<td class="col-number">0</td>
<td class="col-number">0</td>
<td class="col-number font-bold">44,860</td>
</tr>
<tr>
<td>일반형 5L</td>
<td class="col-number">187,240</td>
<td class="col-number"></td>
<td class="col-number">0</td>
<td class="col-number"></td>
<td class="col-number"></td>
<td class="col-number"></td>
<td class="col-number"></td>
<td class="col-number">0</td>
<td class="col-number">0</td>
<td class="col-number font-bold">187,240</td>
</tr>
<tr>
<td>일반형 10L</td>
<td class="col-number">402,848</td>
<td class="col-number"></td>
<td class="col-number">0</td>
<td class="col-number"></td>
<td class="col-number"></td>
<td class="col-number"></td>
<td class="col-number"></td>
<td class="col-number">0</td>
<td class="col-number">0</td>
<td class="col-number font-bold">402,848</td>
</tr>
<tr>
<td>일반형 20L</td>
<td class="col-number">402,365</td>
<td class="col-number"></td>
<td class="col-number">0</td>
<td class="col-number"></td>
<td class="col-number"></td>
<td class="col-number"></td>
<td class="col-number"></td>
<td class="col-number">0</td>
<td class="col-number">0</td>
<td class="col-number font-bold">402,365</td>
</tr>
</tbody>
</table>
</section>
</main>
<footer class="bg-[#e9ecef] border-t border-gray-300 px-4 py-1.5 text-xs text-gray-600 flex justify-between items-center shrink-0" data-purpose="status-bar">
<div>준비됨</div>
<div class="flex gap-4">
<span>북구</span>
<span>Ver. 목업</span>
<span><?= date('Y.m.d (D) g:i A') ?></span>
</div>
</footer>
</body>
</html>