447 lines
19 KiB
PHP
447 lines
19 KiB
PHP
<!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>
|