design: Improve Admin UI layout and Dashboard - Tabler-based responsive layout

src/dotnet/QuantEngine.Web/Pages/Admin/Dashboard/Index.cshtml

@@ -4,61 +4,137 @@
     ViewData["Title"] = "대시보드";
 }
 
-<div class="page-header d-print-none">
+<!-- Page Header -->
-    <div class="row align-items-center">
+<div class="page-header">
-        <div class="col">
+    <h1 class="page-title">대시보드</h1>
-            <h2 class="page-title">대시보드</h2>
+    <p class="page-subtitle">QuantEngine 시스템 개요 및 상태</p>
+</div>
+
+<!-- Stats Row -->
+<div class="row mb-4">
+    <div class="col-md-3">
+        <div class="stat-card">
+            <div class="stat-card-label">활성 사용자</div>
+            <div class="stat-card-number">@(Model.ActiveUsersCount ?? 0)</div>
+            <small class="text-muted">등록된 관리자</small>
+        </div>
+    </div>
+    <div class="col-md-3">
+        <div class="stat-card">
+            <div class="stat-card-label">최근 수집</div>
+            <div class="stat-card-number">@(Model.RecentRunsCount ?? 0)</div>
+            <small class="text-muted">데이터 수집 실행</small>
+        </div>
+    </div>
+    <div class="col-md-3">
+        <div class="stat-card">
+            <div class="stat-card-label">시스템 상태</div>
+            <div class="stat-card-number">
+                <span class="status-dot active"></span>정상
+            </div>
+            <small class="text-muted">모든 서비스 운영 중</small>
+        </div>
+    </div>
+    <div class="col-md-3">
+        <div class="stat-card">
+            <div class="stat-card-label">데이터베이스</div>
+            <div class="stat-card-number">
+                <span class="status-dot active"></span>연결됨
+            </div>
+            <small class="text-muted">PostgreSQL 정상</small>
         </div>
     </div>
 </div>
 
-<div class="page-body">
+<!-- Main Content Row -->
-    <div class="row row-deck row-cards">
+<div class="row">
-        <div class="col-md-6">
+    <!-- System Events Card -->
-            <div class="card">
+    <div class="col-lg-8">
-                <div class="card-body">
+        <div class="card">
-                    <div class="text-truncate">
+            <div class="card-header">
-                        <h3 class="card-title">활성 사용자</h3>
+                <h3 class="card-title">최근 시스템 이벤트</h3>
-                        <div class="h2 mt-3">@(Model.ActiveUsersCount ?? 0)</div>
-                    </div>
-                </div>
             </div>
-        </div>
+            <div class="table-responsive">
-        <div class="col-md-6">
+                <table class="table card-table table-vcenter">
-            <div class="card">
+                    <thead>
-                <div class="card-body">
+                        <tr>
-                    <div class="text-truncate">
+                            <th>시간</th>
-                        <h3 class="card-title">최근 수집 실행</h3>
+                            <th>이벤트</th>
-                        <div class="h2 mt-3">@(Model.RecentRunsCount ?? 0)</div>
+                            <th>유형</th>
-                    </div>
+                            <th>상태</th>
-                </div>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>@DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss")</td>
+                            <td>시스템 초기화</td>
+                            <td><span class="badge badge-info">INFO</span></td>
+                            <td><span class="badge badge-success">완료</span></td>
+                        </tr>
+                        <tr>
+                            <td>@DateTime.Now.AddHours(-1).ToString("yyyy-MM-dd HH:mm:ss")</td>
+                            <td>데이터 수집 완료</td>
+                            <td><span class="badge badge-info">INFO</span></td>
+                            <td><span class="badge badge-success">완료</span></td>
+                        </tr>
+                        <tr>
+                            <td>@DateTime.Now.AddHours(-2).ToString("yyyy-MM-dd HH:mm:ss")</td>
+                            <td>데이터베이스 백업</td>
+                            <td><span class="badge badge-secondary">SYSTEM</span></td>
+                            <td><span class="badge badge-success">완료</span></td>
+                        </tr>
+                    </tbody>
+                </table>
             </div>
         </div>
     </div>
 
-    <div class="row row-deck row-cards mt-4">
+    <!-- Quick Actions Card -->
-        <div class="col-12">
+    <div class="col-lg-4">
-            <div class="card">
+        <div class="card">
-                <div class="card-header">
+            <div class="card-header">
-                    <h3 class="card-title">최근 시스템 이벤트</h3>
+                <h3 class="card-title">빠른 작업</h3>
+            </div>
+            <div class="card-body">
+                <div class="mb-3">
+                    <a href="/Admin/Collection" class="btn btn-sm btn-primary w-100">
+                        <i class="ti ti-database me-1"></i> 데이터 수집 시작
+                    </a>
                 </div>
-                <div class="table-responsive">
+                <div class="mb-3">
-                    <table class="table card-table table-vcenter">
+                    <a href="/Admin/Users" class="btn btn-sm btn-outline-primary w-100">
-                        <thead>
+                        <i class="ti ti-users me-1"></i> 사용자 관리
-                            <tr>
+                    </a>
-                                <th>시간</th>
+                </div>
-                                <th>이벤트</th>
+                <div class="mb-3">
-                                <th>상태</th>
+                    <a href="/Admin/Monitoring" class="btn btn-sm btn-outline-primary w-100">
-                            </tr>
+                        <i class="ti ti-eye me-1"></i> 모니터링 보기
-                        </thead>
+                    </a>
-                        <tbody>
+                </div>
-                            <tr>
+                <hr>
-                                <td>@DateTime.UtcNow.ToString("yyyy-MM-dd HH:mm")</td>
+                <div class="text-center">
-                                <td>시스템 초기화</td>
+                    <small class="text-muted">마지막 갱신: @DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss")</small>
-                                <td><span class="badge bg-success">완료</span></td>
+                </div>
-                            </tr>
+            </div>
-                        </tbody>
+        </div>
-                    </table>
+
+        <!-- System Info Card -->
+        <div class="card mt-3">
+            <div class="card-header">
+                <h3 class="card-title">시스템 정보</h3>
+            </div>
+            <div class="card-body">
+                <div class="mb-2">
+                    <span class="text-muted">버전:</span>
+                    <strong>v0.1.0</strong>
+                </div>
+                <div class="mb-2">
+                    <span class="text-muted">환경:</span>
+                    <strong>Production</strong>
+                </div>
+                <div>
+                    <span class="text-muted">업타임:</span>
+                    <strong>정상</strong>
                 </div>
             </div>
         </div>

src/dotnet/QuantEngine.Web/Pages/Admin/_AdminLayout.cshtml

@@ -7,77 +7,242 @@
 <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>@ViewData["Title"] - QuantEngine 관리자</title>
+    <title>@ViewData["Title"] - QuantEngine</title>
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />
+
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" />
+    <!-- Tabler CSS -->
+    <link href="https://cdn.jsdelivr.net/npm/@tabler/core@1.0.0/dist/css/tabler.min.css" rel="stylesheet" />
+    <link href="https://cdn.jsdelivr.net/npm/@tabler/core@1.0.0/dist/css/tabler-vendors.min.css" rel="stylesheet" />
+    <link href="https://cdn.jsdelivr.net/npm/@tabler/icons@latest/tabler-icons.css" rel="stylesheet" />
+
+    <!-- Custom Admin CSS -->
     <link rel="stylesheet" href="~/css/admin.css" asp-append-version="true" />
+
+    <style>
+        html, body {
+            height: 100%;
+            margin: 0;
+            padding: 0;
+        }
+
+        .wrapper {
+            display: flex;
+            flex-direction: column;
+            height: 100vh;
+        }
+
+        .page {
+            display: flex;
+            flex: 1;
+            overflow: hidden;
+        }
+
+        .sidebar {
+            width: 260px;
+            background-color: #2c3e50;
+            color: white;
+            overflow-y: auto;
+            flex-shrink: 0;
+        }
+
+        .sidebar-brand {
+            padding: 1.5rem;
+            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+        }
+
+        .sidebar-brand a {
+            color: white;
+            text-decoration: none;
+            font-weight: 600;
+            font-size: 1.25rem;
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+        }
+
+        .sidebar-nav {
+            padding: 1rem 0;
+        }
+
+        .sidebar-nav .nav-link {
+            padding: 0.75rem 1.5rem;
+            color: rgba(255, 255, 255, 0.8);
+            text-decoration: none;
+            display: flex;
+            align-items: center;
+            gap: 0.75rem;
+            transition: all 0.2s;
+        }
+
+        .sidebar-nav .nav-link:hover,
+        .sidebar-nav .nav-link.active {
+            color: white;
+            background-color: rgba(255, 255, 255, 0.1);
+        }
+
+        .sidebar-nav .nav-link i {
+            width: 1.25rem;
+            text-align: center;
+        }
+
+        .main-content {
+            display: flex;
+            flex-direction: column;
+            flex: 1;
+            overflow: hidden;
+        }
+
+        .topbar {
+            background-color: white;
+            border-bottom: 1px solid #e0e0e0;
+            padding: 1rem 1.5rem;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            flex-shrink: 0;
+            height: 64px;
+        }
+
+        .topbar-left {
+            font-weight: 600;
+            color: #2c3e50;
+        }
+
+        .topbar-right {
+            display: flex;
+            gap: 1rem;
+            align-items: center;
+        }
+
+        .topbar-right .btn {
+            padding: 0.375rem 0.75rem;
+            font-size: 0.875rem;
+        }
+
+        .page-content {
+            flex: 1;
+            overflow-y: auto;
+            padding: 2rem;
+            background-color: #f5f7fa;
+        }
+
+        .container-xl {
+            max-width: 1400px;
+            margin: 0 auto;
+            width: 100%;
+        }
+
+        .page-header {
+            margin-bottom: 2rem;
+        }
+
+        .page-header .page-title {
+            font-size: 1.75rem;
+            font-weight: 600;
+            color: #2c3e50;
+            margin: 0;
+        }
+
+        .page-header .page-subtitle {
+            color: #7a8a99;
+            font-size: 0.875rem;
+        }
+
+        @media (max-width: 768px) {
+            .sidebar {
+                position: fixed;
+                left: -260px;
+                height: 100vh;
+                z-index: 999;
+                transition: left 0.3s;
+            }
+
+            .sidebar.show {
+                left: 0;
+            }
+
+            .main-content {
+                width: 100%;
+            }
+        }
+    </style>
 </head>
 <body>
-    <div class="page">
+    <div class="wrapper">
         <!-- Topbar -->
-        <header class="navbar navbar-expand-md navbar-light d-print-none sticky-top">
+        <div class="topbar">
-            <div class="container-xl">
+            <div class="topbar-left">
-                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-menu">
+                <span id="page-title">QuantEngine Admin</span>
-                    <span class="navbar-toggler-icon"></span>
+            </div>
-                </button>
+            <div class="topbar-right">
-                <h1 class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pe-0 pe-md-3">
+                <a href="/Account/Logout" class="btn btn-sm btn-outline-danger">
+                    <i class="ti ti-logout me-1"></i> 로그아웃
+                </a>
+            </div>
+        </div>
+
+        <!-- Main -->
+        <div class="page">
+            <!-- Sidebar -->
+            <nav class="sidebar">
+                <div class="sidebar-brand">
                     <a href="/Admin/Dashboard">
-                        <span style="font-size: 24px; font-weight: bold; color: #3f51b5;">Q</span>
+                        <i class="ti ti-chart-line" style="font-size: 1.5rem;"></i>
+                        <span>QuantEngine</span>
                     </a>
-                </h1>
+                </div>
-                <div class="navbar-nav flex-row order-md-last">
+
-                    <div class="nav-item d-none d-md-flex me-3">
+                <div class="sidebar-nav">
-                        <a href="/Account/Logout" class="btn btn-outline-danger">로그아웃</a>
+                    <a href="/Admin/Dashboard" class="nav-link">
+                        <i class="ti ti-dashboard"></i>
+                        <span>대시보드</span>
+                    </a>
+                    <a href="/Admin/Collection" class="nav-link">
+                        <i class="ti ti-database"></i>
+                        <span>데이터 수집</span>
+                    </a>
+                    <a href="/Admin/Monitoring" class="nav-link">
+                        <i class="ti ti-eye"></i>
+                        <span>모니터링</span>
+                    </a>
+                    <a href="/Admin/Users" class="nav-link">
+                        <i class="ti ti-users"></i>
+                        <span>사용자 관리</span>
+                    </a>
+                    <a href="/Admin/Operations" class="nav-link">
+                        <i class="ti ti-settings"></i>
+                        <span>운영 관리</span>
+                    </a>
+                </div>
+            </nav>
+
+            <!-- Page Content -->
+            <div class="main-content">
+                <div class="page-content">
+                    <div class="container-xl">
+                        @RenderBody()
                     </div>
                 </div>
             </div>
-        </header>
-
-        <!-- Sidebar -->
-        <aside class="navbar navbar-vertical navbar-expand-lg navbar-dark bg-dark">
-            <div class="container-fluid">
-                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-menu">
-                    <span class="navbar-toggler-icon"></span>
-                </button>
-                <h2 class="navbar-brand navbar-brand-autodark">
-                    <a href="/Admin/Dashboard" class="text-white">
-                        QuantEngine
-                    </a>
-                </h2>
-                <div class="collapse navbar-collapse" id="navbar-menu">
-                    <ul class="navbar-nav pt-lg-3">
-                        <li class="nav-item">
-                            <a class="nav-link text-white" href="/Admin/Dashboard">
-                                <i class="bi bi-diagram-3 me-2"></i>
-                                <span>대시보드</span>
-                            </a>
-                        </li>
-                        <li class="nav-item">
-                            <a class="nav-link text-white" href="/Admin/Collection">
-                                <i class="bi bi-collection me-2"></i>
-                                <span>데이터 수집</span>
-                            </a>
-                        </li>
-                        <li class="nav-item">
-                            <a class="nav-link text-white" href="/Admin/Users">
-                                <i class="bi bi-people me-2"></i>
-                                <span>사용자 관리</span>
-                            </a>
-                        </li>
-                    </ul>
-                </div>
-            </div>
-        </aside>
-
-        <!-- Page Content -->
-        <div class="page-wrapper">
-            <div class="container-xl">
-                @RenderBody()
-            </div>
         </div>
     </div>
 
-    <!-- Bootstrap JS -->
+    <!-- Tabler JS -->
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@tabler/core@1.0.0/dist/js/tabler.min.js"></script>
+
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const links = document.querySelectorAll('.sidebar-nav .nav-link');
+            const currentPath = window.location.pathname.toLowerCase();
+
+            links.forEach(link => {
+                const href = link.getAttribute('href').toLowerCase();
+                if (currentPath.startsWith(href)) {
+                    link.classList.add('active');
+                } else {
+                    link.classList.remove('active');
+                }
+            });
+        });
+    </script>
 </body>
 </html>

src/dotnet/QuantEngine.Web/wwwroot/css/admin.css

@@ -1,88 +1,251 @@
-/* QuantEngine Admin UI Styles */
+/* QuantEngine Admin UI - Tabler Customization */
 
 :root {
     --primary-color: #3f51b5;
+    --success-color: #28a745;
+    --danger-color: #dc3545;
+    --warning-color: #ffc107;
+    --info-color: #17a2b8;
 }
 
-body {
+/* Cards */
-    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
-}
-
-.page {
-    display: flex;
-    min-height: 100vh;
-}
-
-.navbar-brand-image {
-    width: auto;
-    height: 36px;
-}
-
-.page-wrapper {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-}
-
-.container-xl {
-    flex: 1;
-    padding: 2rem 1rem;
-}
-
-.btn-link {
-    color: var(--primary-color);
-    text-decoration: none;
-}
-
-.btn-link:hover {
-    text-decoration: underline;
-}
-
-.empty {
-    text-align: center;
-    padding: 3rem 1rem;
-}
-
-.empty-header {
-    font-size: 3rem;
-    margin-bottom: 1rem;
-}
-
-.empty-title {
-    font-size: 1.5rem;
-    font-weight: 600;
-}
-
-.empty-subtitle {
-    color: #6c757d;
-    margin-bottom: 2rem;
-}
-
-.page-header {
-    margin-bottom: 2rem;
-}
-
-.page-header .page-title {
-    font-size: 2rem;
-    font-weight: 600;
-}
-
 .card {
     border: none;
-    border-radius: 0.375rem;
+    border-radius: 0.5rem;
     box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
+    margin-bottom: 1.5rem;
 }
 
-.badge {
+.card-header {
-    padding: 0.375rem 0.75rem;
+    background-color: #f8f9fa;
-    font-weight: 500;
+    border-bottom: 1px solid #e0e0e0;
+    padding: 1.25rem;
+}
+
+.card-body {
+    padding: 1.25rem;
+}
+
+/* Tables */
+.table {
+    margin-bottom: 0;
 }
 
 .table-vcenter tbody tr td {
     vertical-align: middle;
 }
 
+.table thead th {
+    font-weight: 600;
+    background-color: #f8f9fa;
+    border-bottom: 2px solid #e0e0e0;
+    color: #2c3e50;
+    padding: 0.75rem;
+}
+
+.table tbody td {
+    padding: 0.75rem;
+    border-bottom: 1px solid #e0e0e0;
+}
+
+.table tbody tr:hover {
+    background-color: #f5f7fa;
+}
+
+/* Badges */
+.badge {
+    padding: 0.375rem 0.75rem;
+    font-weight: 500;
+    font-size: 0.75rem;
+    border-radius: 0.25rem;
+}
+
+.badge-success {
+    background-color: #d4edda;
+    color: #155724;
+}
+
+.badge-danger {
+    background-color: #f8d7da;
+    color: #721c24;
+}
+
+.badge-warning {
+    background-color: #fff3cd;
+    color: #856404;
+}
+
+.badge-info {
+    background-color: #d1ecf1;
+    color: #0c5460;
+}
+
+.badge-secondary {
+    background-color: #e2e3e5;
+    color: #383d41;
+}
+
+/* Buttons */
+.btn {
+    border-radius: 0.375rem;
+    font-weight: 500;
+    transition: all 0.2s;
+}
+
 .btn-sm {
     padding: 0.375rem 0.75rem;
     font-size: 0.875rem;
 }
+
+.btn-outline-danger:hover {
+    background-color: #dc3545;
+    color: white;
+}
+
+/* Status indicators */
+.status-dot {
+    width: 0.5rem;
+    height: 0.5rem;
+    border-radius: 50%;
+    display: inline-block;
+    margin-right: 0.5rem;
+}
+
+.status-dot.active {
+    background-color: #28a745;
+}
+
+.status-dot.inactive {
+    background-color: #dc3545;
+}
+
+.status-dot.pending {
+    background-color: #ffc107;
+}
+
+/* Stats Cards */
+.stat-card {
+    background: white;
+    padding: 1.5rem;
+    border-radius: 0.5rem;
+    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
+    margin-bottom: 1.5rem;
+}
+
+.stat-card-number {
+    font-size: 2rem;
+    font-weight: 700;
+    color: #2c3e50;
+    margin: 0.5rem 0;
+}
+
+.stat-card-label {
+    font-size: 0.875rem;
+    color: #7a8a99;
+    font-weight: 500;
+}
+
+/* Empty State */
+.empty-state {
+    text-align: center;
+    padding: 3rem 1rem;
+}
+
+.empty-state-icon {
+    font-size: 3rem;
+    color: #d0d8e0;
+    margin-bottom: 1rem;
+}
+
+.empty-state-title {
+    font-size: 1.25rem;
+    font-weight: 600;
+    color: #2c3e50;
+    margin-bottom: 0.5rem;
+}
+
+.empty-state-text {
+    color: #7a8a99;
+    margin-bottom: 1.5rem;
+}
+
+/* Forms */
+.form-control {
+    border-radius: 0.375rem;
+    border: 1px solid #d0d8e0;
+    padding: 0.5rem 0.75rem;
+    font-size: 0.875rem;
+}
+
+.form-control:focus {
+    border-color: #3f51b5;
+    box-shadow: 0 0 0 0.2rem rgba(63, 81, 181, 0.25);
+}
+
+.form-label {
+    font-weight: 500;
+    color: #2c3e50;
+    margin-bottom: 0.5rem;
+    font-size: 0.875rem;
+}
+
+/* Alert */
+.alert {
+    border: none;
+    border-radius: 0.375rem;
+    margin-bottom: 1.5rem;
+}
+
+.alert-success {
+    background-color: #d4edda;
+    color: #155724;
+}
+
+.alert-danger {
+    background-color: #f8d7da;
+    color: #721c24;
+}
+
+.alert-warning {
+    background-color: #fff3cd;
+    color: #856404;
+}
+
+.alert-info {
+    background-color: #d1ecf1;
+    color: #0c5460;
+}
+
+/* Pagination */
+.pagination {
+    margin-top: 1.5rem;
+}
+
+.page-link {
+    color: #3f51b5;
+    border: 1px solid #d0d8e0;
+    border-radius: 0.375rem;
+    padding: 0.5rem 0.75rem;
+    margin: 0 0.25rem;
+}
+
+.page-link:hover {
+    background-color: #3f51b5;
+    color: white;
+}
+
+.page-link.active {
+    background-color: #3f51b5;
+    border-color: #3f51b5;
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+    .stat-card {
+        margin-bottom: 1rem;
+    }
+
+    .card {
+        margin-bottom: 1rem;
+    }
+}