jongryangje/app/Views/bag/lg_dashboard_simple.php

<?php
/**
 * 로그인 후 메인 — 단순형 요약 대시보드
 * 복잡한 표/그래프 대신, 핵심 지표 몇 개와 주요 화면으로 가는 버튼만 노출.
 *
 * @var string $lgLabel
 */
$lgLabel = $lgLabel ?? '북구';
$mbName  = session()->get('mb_name') ?? '담당자';
$weeklyRequests = [7, 12, 9, 14, 8, 11, 10];
$stockMix = [
    ['name' => '일반용', 'value' => 52, 'color' => '#3b82f6'],
    ['name' => '음식물', 'value' => 28, 'color' => '#10b981'],
    ['name' => '특수', 'value' => 20, 'color' => '#f59e0b'],
];
$lowStock = [
    ['name' => '일반 20L', 'percent' => 34],
    ['name' => '특수규격 A', 'percent' => 22],
    ['name' => '재사용봉투', 'percent' => 58],
];
?>

<div class="h-full flex flex-col gap-4">
  <!-- 상단 요약 헤더 -->
  <section class="bg-white border border-gray-200 rounded-lg shadow-sm px-4 py-3 flex flex-wrap items-center justify-between gap-3">
    <div>
      <h1 class="text-base font-semibold text-gray-900">
        <span class="inline-flex items-center gap-2">
          <span class="inline-flex h-6 w-6 items-center justify-center rounded-full bg-blue-50 text-blue-700 text-sm font-bold">i</span>
          <span>업무 현황 요약</span>
        </span>
      </h1>
      <p class="mt-1 text-xs text-gray-500">
        <?= esc($lgLabel) ?> · <strong class="text-gray-700"><?= esc($mbName) ?></strong>님 기준으로 자주 보는 정보만 간단히 모아서 보여줍니다.
      </p>
    </div>
    <div class="flex flex-col sm:flex-row gap-2 text-xs text-gray-600 items-start sm:items-end">
      <div>
        <span class="inline-block text-[11px] text-gray-500 mb-1">기준일</span>
        <div class="px-2 py-1 rounded border border-gray-200 bg-gray-50 text-[11px]">
          <i class="fa-regular fa-calendar mr-1 text-gray-500"></i><?= date('Y.m.d (D)') ?>
        </div>
      </div>
      <button type="button" class="inline-flex items-center justify-center px-3 py-1.5 rounded bg-blue-600 hover:bg-blue-700 text-white text-xs font-medium shadow">
        <i class="fa-solid fa-rotate mr-1"></i> 새로고침
      </button>
    </div>
  </section>

  <!-- 핵심 숫자 3개만 -->
  <section class="grid grid-cols-1 sm:grid-cols-3 gap-3">
    <div class="bg-white border border-gray-200 rounded-lg shadow-sm px-4 py-3 flex flex-col justify-between">
      <p class="text-xs text-gray-500 mb-1"><i class="fa-solid fa-boxes-stacked text-emerald-600 mr-1"></i>봉투 재고 상태</p>
      <p class="text-2xl font-bold text-gray-900">양호</p>
      <p class="mt-1 text-[11px] text-gray-500">대부분 품목이 안전재고 이상입니다.</p>
    </div>
    <div class="bg-white border border-gray-200 rounded-lg shadow-sm px-4 py-3 flex flex-col justify-between">
      <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="mt-1 text-[11px] text-gray-500">오늘 들어온 신청까지 포함한 개수입니다.</p>
    </div>
    <div class="bg-white border border-gray-200 rounded-lg shadow-sm px-4 py-3 flex flex-col justify-between">
      <p class="text-xs text-gray-500 mb-1"><i class="fa-solid fa-user-check text-violet-600 mr-1"></i>승인 대기</p>
      <p class="text-2xl font-bold text-violet-700">4명</p>
      <p class="mt-1 text-[11px] text-gray-500">회원·판매소 가입 승인 요청입니다.</p>
    </div>
  </section>

  <!-- 작은 그래프 영역 -->
  <section class="grid grid-cols-1 lg:grid-cols-3 gap-3">
    <div class="bg-white border border-gray-200 rounded-lg shadow-sm p-4">
      <h2 class="text-sm font-semibold text-gray-900 mb-2">최근 7일 신청 추이</h2>
      <div class="h-24 flex items-end gap-1.5">
        <?php $maxReq = max($weeklyRequests); ?>
        <?php foreach ($weeklyRequests as $idx => $v): ?>
          <?php $h = (int) round(($v / $maxReq) * 100); ?>
          <div class="flex-1 flex flex-col items-center justify-end gap-1">
            <span class="text-[10px] text-gray-500"><?= esc((string) $v) ?></span>
            <div class="w-full rounded-t bg-gradient-to-t from-blue-700 to-blue-400" style="height: <?= $h ?>%"></div>
            <span class="text-[10px] text-gray-400">D<?= 6 - $idx ?></span>
          </div>
        <?php endforeach; ?>
      </div>
    </div>

    <div class="bg-white border border-gray-200 rounded-lg shadow-sm p-4">
      <h2 class="text-sm font-semibold text-gray-900 mb-2">재고 구성 비율</h2>
      <div class="flex items-center gap-4">
        <div class="w-20 h-20 rounded-full" style="background: conic-gradient(#3b82f6 0% 52%, #10b981 52% 80%, #f59e0b 80% 100%);">
          <div class="w-12 h-12 bg-white rounded-full m-auto mt-4"></div>
        </div>
        <ul class="text-[11px] text-gray-600 space-y-1">
          <?php foreach ($stockMix as $item): ?>
            <li class="flex items-center gap-2">
              <span class="inline-block w-2.5 h-2.5 rounded-full" style="background-color: <?= esc($item['color'], 'attr') ?>"></span>
              <span><?= esc($item['name']) ?> <?= esc((string) $item['value']) ?>%</span>
            </li>
          <?php endforeach; ?>
        </ul>
      </div>
    </div>

    <div class="bg-white border border-gray-200 rounded-lg shadow-sm p-4">
      <h2 class="text-sm font-semibold text-gray-900 mb-2">부족 재고 품목</h2>
      <div class="space-y-2">
        <?php foreach ($lowStock as $item): ?>
          <div>
            <div class="flex justify-between text-[11px] text-gray-600 mb-1">
              <span><?= esc($item['name']) ?></span>
              <span><?= esc((string) $item['percent']) ?>%</span>
            </div>
            <div class="h-2 rounded bg-gray-100 overflow-hidden">
              <div class="h-full rounded bg-amber-500" style="width: <?= (int) $item['percent'] ?>%"></div>
            </div>
          </div>
        <?php endforeach; ?>
      </div>
    </div>
  </section>

  <!-- 자주 가는 화면 바로가기 -->
  <section class="bg-white border border-gray-200 rounded-lg shadow-sm p-4">
    <h2 class="text-sm font-semibold text-gray-900 mb-2 flex items-center gap-2">
      <i class="fa-solid fa-location-arrow text-blue-600"></i>
      자주 가는 화면
    </h2>
    <p class="text-[11px] text-gray-500 mb-3">
      왼쪽 메뉴를 모두 펼치지 않고도, 자주 사용하는 업무 화면으로 바로 이동할 수 있습니다.
    </p>
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-2">
      <a href="<?= base_url('bag/inventory') ?>" class="group flex items-center gap-3 px-3 py-2 rounded border border-gray-200 hover:border-blue-500 hover:bg-blue-50/40 transition">
        <div class="h-8 w-8 rounded-full bg-emerald-50 text-emerald-700 flex items-center justify-center">
          <i class="fa-solid fa-boxes-stacked"></i>
        </div>
        <div class="min-w-0">
          <p class="text-xs font-semibold text-gray-900 group-hover:text-blue-800">창고 재고 조회</p>
          <p class="text-[11px] text-gray-500 truncate">품목별 현재 재고를 간단히 확인</p>
        </div>
      </a>
      <a href="<?= base_url('bag/order/create') ?>" class="group flex items-center gap-3 px-3 py-2 rounded border border-gray-200 hover:border-blue-500 hover:bg-blue-50/40 transition">
        <div class="h-8 w-8 rounded-full bg-sky-50 text-sky-700 flex items-center justify-center">
          <i class="fa-solid fa-cart-shopping"></i>
        </div>
        <div class="min-w-0">
          <p class="text-xs font-semibold text-gray-900 group-hover:text-blue-800">발주(구매신청) 등록</p>
          <p class="text-[11px] text-gray-500 truncate">지정판매소 발주·구매신청 입력</p>
        </div>
      </a>
      <a href="<?= base_url('bag/flow') ?>" class="group flex items-center gap-3 px-3 py-2 rounded border border-gray-200 hover:border-blue-500 hover:bg-blue-50/40 transition">
        <div class="h-8 w-8 rounded-full bg-orange-50 text-orange-600 flex items-center justify-center">
          <i class="fa-solid fa-arrow-right-arrow-left"></i>
        </div>
        <div class="min-w-0">
          <p class="text-xs font-semibold text-gray-900 group-hover:text-blue-800">수불 흐름 보기</p>
          <p class="text-[11px] text-gray-500 truncate">입고·출고 내역을 한눈에</p>
        </div>
      </a>
      <a href="<?= base_url('bag/sales') ?>" class="group flex items-center gap-3 px-3 py-2 rounded border border-gray-200 hover:border-blue-500 hover:bg-blue-50/40 transition">
        <div class="h-8 w-8 rounded-full bg-indigo-50 text-indigo-600 flex items-center justify-center">
          <i class="fa-solid fa-receipt"></i>
        </div>
        <div class="min-w-0">
          <p class="text-xs font-semibold text-gray-900 group-hover:text-blue-800">판매 내역 조회</p>
          <p class="text-[11px] text-gray-500 truncate">기간별 봉투 판매 현황</p>
        </div>
      </a>
      <a href="<?= base_url('bag/help') ?>" class="group flex items-center gap-3 px-3 py-2 rounded border border-gray-200 hover:border-blue-500 hover:bg-blue-50/40 transition">
        <div class="h-8 w-8 rounded-full bg-gray-50 text-gray-600 flex items-center justify-center">
          <i class="fa-solid fa-circle-question"></i>
        </div>
        <div class="min-w-0">
          <p class="text-xs font-semibold text-gray-900 group-hover:text-blue-800">도움말 / 매뉴얼</p>
          <p class="text-[11px] text-gray-500 truncate">업무별 사용 방법 안내</p>
        </div>
      </a>
      <a href="<?= base_url('dashboard/gov-portal') ?>" class="group flex items-center gap-3 px-3 py-2 rounded border border-gray-200 hover:border-blue-500 hover:bg-blue-50/40 transition">
        <div class="h-8 w-8 rounded-full bg-slate-800 text-white flex items-center justify-center">
          <i class="fa-solid fa-building-columns"></i>
        </div>
        <div class="min-w-0">
          <p class="text-xs font-semibold text-gray-900 group-hover:text-blue-800">종량제 시스템 · 포털</p>
          <p class="text-[11px] text-gray-500 truncate">기본 · 변형(strip) 시안</p>
        </div>
      </a>
      <a href="<?= base_url('dashboard') ?>" class="group flex items-center gap-3 px-3 py-2 rounded border border-dashed border-gray-300 hover:border-blue-500 hover:bg-blue-50/40 transition">
        <div class="h-8 w-8 rounded-full bg-white text-gray-500 flex items-center justify-center">
          <i class="fa-solid fa-table-columns"></i>
        </div>
        <div class="min-w-0">
          <p class="text-xs font-semibold text-gray-900 group-hover:text-blue-800">자세히 보기 (/dashboard)</p>
          <p class="text-[11px] text-gray-500 truncate">그래프·표가 많은 기존 화면으로 이동</p>
        </div>
      </a>
    </div>
  </section>

  <!-- 알림/메모 영역 (간단 텍스트만) -->
  <section class="bg-white border border-gray-200 rounded-lg shadow-sm p-4">
    <h2 class="text-sm font-semibold text-gray-900 mb-2 flex items-center gap-2">
      <i class="fa-solid fa-clipboard-list text-gray-600"></i>
      오늘 확인하면 좋은 것들
    </h2>
    <ul class="list-disc list-inside text-[11px] text-gray-600 space-y-1.5">
      <li>재고 부족 품목이 있는지 간단히 확인하고, 필요 시 발주를 등록합니다.</li>
      <li>미처리 구매신청과 승인 대기 건을 하루 한 번 이상 처리합니다.</li>
      <li>더 자세한 분석·그래프는 <span class="text-blue-700 font-semibold">/dashboard</span> 화면에서 확인할 수 있습니다.</li>
    </ul>
  </section>
</div>