hmac_BUT/src/admin/index.php

<?php
include_once 'header.php';
?>
<main class="max-w-[1600px] mx-auto p-6">
    <header class="flex flex-col md:flex-row justify-between items-end md:items-center mb-6 gap-4">
      <div>
        <h2 class="text-2xl font-bold text-gray-800 flex items-center">
          전체학습현황
          <span class="ml-4 text-xs font-normal px-2 py-1 bg-gray-200 rounded text-gray-600">전체 학습자 수: 74명</span>
        </h2>
        <p class="text-sm text-gray-400 mt-1 italic leading-relaxed">법정의무교육 기간: 2025.11.01 ~ 2025.12.15</p>
      </div>
      <div class="flex items-center space-x-2">
        <div class="flex bg-gray-200 p-1 rounded-md">
           <button class="px-3 py-1 text-sm rounded bg-white shadow-sm text-gray-700">2025년</button>
           <button class="px-3 py-1 text-sm text-gray-500 hover:text-gray-800 transition">2026년</button>
        </div>
        <button class="px-4 py-2 bg-[#2563eb] text-white rounded-md text-sm font-bold flex items-center hover:bg-blue-700 transition shadow-lg">
          <i class="fa-solid fa-file-invoice mr-2"></i>교육결과보고서
        </button>
      </div>
    </header>

    <section class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
      <div class="bg-white p-6 rounded-xl border border-gray-200 shadow-sm">
        <h3 class="font-bold text-gray-800 mb-6 flex items-center justify-between">
          법인별 학습인원 현황
          <i class="fa-solid fa-ellipsis-vertical text-gray-300"></i>
        </h3>
        <div class="h-44 flex items-end justify-between px-2 space-x-3">
          <div class="w-full bg-slate-100 rounded-t relative group">
            <div class="absolute bottom-0 w-full bg-teal-600 rounded-t transition-all duration-500 group-hover:bg-teal-500" style="height: 85%;"></div>
            <span class="absolute -bottom-6 left-1/2 -translate-x-1/2 text-[10px] text-gray-400">한맥</span>
          </div>
          <div class="w-full bg-slate-100 rounded-t relative group">
            <div class="absolute bottom-0 w-full bg-teal-600 rounded-t transition-all duration-500 group-hover:bg-teal-500" style="height: 45%;"></div>
            <span class="absolute -bottom-6 left-1/2 -translate-x-1/2 text-[10px] text-gray-400">삼안</span>
          </div>
          <div class="w-full bg-slate-100 rounded-t relative group">
            <div class="absolute bottom-0 w-full bg-teal-600 rounded-t transition-all duration-500 group-hover:bg-teal-500" style="height: 25%;"></div>
            <span class="absolute -bottom-6 left-1/2 -translate-x-1/2 text-[10px] text-gray-400">바른</span>
          </div>
        </div>
      </div>

      <div class="bg-white p-6 rounded-xl border border-gray-200 shadow-sm">
        <div class="flex justify-between items-center mb-6">
            <h3 class="font-bold text-gray-800 italic underline decoration-blue-200 decoration-4">법인별 통계</h3>
            <select class="text-xs bg-gray-50 border border-gray-100 rounded p-1">
                <option>평균학습</option>
            </select>
        </div>
        <div class="space-y-4">
          <div class="flex justify-between items-center pb-2 border-b border-gray-50">
            <span class="text-sm font-medium text-gray-600">한맥기술</span><span class="text-sm font-bold text-blue-600">15.2회</span>
          </div>
          <div class="flex justify-between items-center pb-2 border-b border-gray-50">
            <span class="text-sm font-medium text-gray-600">삼안</span><span class="text-sm font-bold text-blue-600">12.8회</span>
          </div>
          <div class="flex justify-between items-center pb-2 border-b border-gray-50">
            <span class="text-sm font-medium text-gray-600">장현산업</span><span class="text-sm font-bold text-blue-600">18.5회</span>
          </div>
          <div class="flex justify-between items-center">
            <span class="text-sm font-medium text-gray-600">GAIA</span><span class="text-sm font-bold text-blue-600">14.1회</span>
          </div>
        </div>
            </div>

      <div class="bg-white p-6 rounded-xl border border-gray-200 shadow-sm relative overflow-hidden">
        <h3 class="font-bold text-gray-800 mb-6">법인별 접속 추이</h3>
        <div class="h-40 flex items-center justify-center">
            <svg class="w-full h-full" viewBox="0 0 200 80">
                <path d="M0,60 L40,50 L80,55 L120,30 L160,40 L200,35" fill="none" stroke="#0d9488" stroke-width="2" />
                <circle cx="40" cy="50" r="3" fill="#0d9488" />
                <circle cx="120" cy="30" r="3" fill="#0d9488" />
                <circle cx="200" cy="35" r="3" fill="#0d9488" />
            </svg>
        </div>
                </div>
    </section>

    <section class="grid grid-cols-1 lg:grid-cols-2 gap-6 pb-12">
      <div class="bg-white rounded-xl border border-gray-200 shadow-sm overflow-hidden">
        <div class="p-6 border-b border-gray-50 flex justify-between items-center bg-gray-50/50">
          <h3 class="font-bold text-gray-800 flex items-center italic">
            <i class="fa-solid fa-play-circle text-blue-500 mr-2"></i>가장 많이 본 영상
          </h3>
          <select class="text-xs bg-white border border-gray-200 rounded p-1"><option>인사이트</option></select>
        </div>
        <div class="p-6 space-y-6">
          <div class="flex items-start space-x-4">
            <div class="w-24 h-14 bg-slate-200 rounded flex-shrink-0"></div>
            <div>
              <h4 class="font-bold text-sm leading-tight">실리콘밸리 PM이 말해주는 AI 시대 PM 생존법</h4>
              <p class="text-[11px] text-gray-400 mt-1">시청수: <span class="text-gray-700 font-bold">1,245회</span> | 완료율: <span class="text-blue-500 font-bold">92%</span></p>
            </div>
          </div>
          <div class="flex items-start space-x-4">
            <div class="w-24 h-14 bg-slate-200 rounded flex-shrink-0"></div>
            <div>
              <h4 class="font-bold text-sm leading-tight">AI와 함께 진화하는 법 : AI 일잘러의 비밀</h4>
              <p class="text-[11px] text-gray-400 mt-1">시청수: <span class="text-gray-700 font-bold">1,127회</span> | 완료율: <span class="text-blue-500 font-bold">88%</span></p>
            </div>
          </div>
        </div>
        <button class="w-full py-3 bg-slate-50 text-xs text-gray-400 font-medium hover:bg-slate-100 border-t border-gray-50 italic">
          <i class="fa-solid fa-comment-dots mr-2"></i>한줄 소감문 보기
        </button>
      </div>

      <div class="bg-white rounded-xl border border-gray-200 shadow-sm overflow-hidden">
        <div class="p-6 border-b border-gray-50 flex justify-between items-center bg-gray-50/50">
          <h3 class="font-bold text-gray-800 flex items-center italic">
            <i class="fa-solid fa-award text-teal-600 mr-2"></i>배움터 학습 랭킹
          </h3>
          <select class="text-xs bg-white border border-gray-200 rounded p-1"><option>전체</option></select>
        </div>
        <div class="p-4">
          <table class="w-full text-sm">
            <tbody>
              <tr class="hover:bg-gray-50 transition">
                <td class="p-3 font-bold text-blue-600">1</td>
                <td class="p-3">
                  <p class="font-bold">홍길동</p>
                  <p class="text-[10px] text-gray-400">한맥기술 본부장</p>
                </td>
                <td class="p-3 text-right">
                  <span class="font-bold mr-2">52시간</span>
                  <span class="px-2 py-0.5 bg-purple-100 text-purple-600 text-[10px] rounded font-bold">Master</span>
                </td>
              </tr>
              <tr class="hover:bg-gray-50 transition border-t border-gray-50">
                <td class="p-3 font-bold text-gray-400">2</td>
                <td class="p-3">
                  <p class="font-bold">김철수</p>
                  <p class="text-[10px] text-gray-400">삼안 전략기획팀</p>
                </td>
                <td class="p-3 text-right">
                  <span class="font-bold mr-2">48시간</span>
                  <span class="px-2 py-0.5 bg-purple-100 text-purple-600 text-[10px] rounded font-bold">Master</span>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
        <button class="w-full py-3 bg-slate-50 text-xs text-gray-400 font-medium hover:bg-slate-100 border-t border-gray-50 italic">
          <i class="fa-solid fa-thumbs-up mr-2"></i>추천 영상 보기
        </button>
      </div>
    </section>
</main>
</body>
</html>