Initial project import for team collaboration.
Exclude local docs, MCP, and secrets via gitignore. Made-with: Cursor
This commit is contained in:
taekyoungc
215
app/Views/bag/lg_dashboard_modern.php
Normal file
215
app/Views/bag/lg_dashboard_modern.php
Normal 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>
|
||||
Reference in New Issue
Block a user