diff --git a/TaxBaik.Web/Components/Admin/App.razor b/TaxBaik.Web/Components/Admin/App.razor
index 059bcf3..96c6ff9 100644
--- a/TaxBaik.Web/Components/Admin/App.razor
+++ b/TaxBaik.Web/Components/Admin/App.razor
@@ -14,7 +14,7 @@
'admin-login-route',
window.location.pathname.toLowerCase().endsWith('/admin/login'));
-
+
@@ -26,7 +26,7 @@
-
+
diff --git a/TaxBaik.Web/wwwroot/css/admin.css b/TaxBaik.Web/wwwroot/css/admin.css
index e7aa498..cd67598 100644
--- a/TaxBaik.Web/wwwroot/css/admin.css
+++ b/TaxBaik.Web/wwwroot/css/admin.css
@@ -202,7 +202,316 @@ html, body {
color: #64748b;
}
+/* Admin Shell & Layout */
+.admin-shell {
+ display: flex;
+ flex-direction: column;
+ height: 100vh;
+ background-color: #f5f5f5;
+}
+
+.admin-topbar {
+ display: flex;
+ align-items: center;
+ gap: 16px;
+ padding: 12px 24px;
+ background-color: #fff;
+ border-bottom: 1px solid #e0e0e0;
+ z-index: 100;
+}
+
+.admin-menu-button {
+ margin-right: 8px;
+}
+
+.admin-topbar-title {
+ display: flex;
+ flex-direction: column;
+ gap: 4px;
+}
+
+.admin-topbar-action {
+ white-space: nowrap;
+}
+
+.admin-drawer {
+ width: 280px;
+ background-color: #fff;
+ border-right: 1px solid #e0e0e0;
+}
+
+.admin-drawer-brand {
+ display: flex;
+ align-items: center;
+ gap: 12px;
+ padding: 20px 16px;
+ border-bottom: 1px solid #f0f0f0;
+}
+
+.admin-brand-mark {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 40px;
+ height: 40px;
+ border-radius: 8px;
+ background: linear-gradient(135deg, #1976d2 0%, #1565c0 100%);
+ color: white;
+ font-weight: bold;
+ font-size: 18px;
+}
+
+.admin-nav {
+ padding: 16px 0;
+}
+
+.admin-nav :deep(.mud-nav-link),
+.admin-nav :deep(.mud-nav-group-header) {
+ margin: 4px 8px;
+ border-radius: 8px;
+}
+
+.admin-nav :deep(.mud-nav-link.active) {
+ background-color: #e3f2fd;
+}
+
+.admin-drawer-footer {
+ padding: 16px;
+ border-top: 1px solid #f0f0f0;
+ font-size: 0.875rem;
+}
+
+.admin-main {
+ flex: 1;
+ overflow-y: auto;
+ background-color: #f5f5f5;
+}
+
+.admin-content {
+ padding: 32px;
+ max-width: 1400px;
+ margin: 0 auto;
+ width: 100%;
+}
+
+/* Page Header */
+.admin-page-hero {
+ display: flex;
+ justify-content: space-between;
+ align-items: flex-end;
+ gap: 24px;
+ margin-bottom: 32px;
+ padding-bottom: 24px;
+ border-bottom: 1px solid #e0e0e0;
+}
+
+.admin-eyebrow {
+ display: block;
+ color: #1976d2;
+ font-weight: 600;
+ text-transform: uppercase;
+ font-size: 0.75rem;
+ letter-spacing: 0.5px;
+ margin-bottom: 4px;
+}
+
+.admin-page-title {
+ display: block;
+ color: #1a1a1a;
+ font-weight: 600;
+ margin-bottom: 8px;
+}
+
+.admin-page-subtitle {
+ display: block;
+ color: #666;
+ font-size: 0.95rem;
+}
+
+/* Metrics Grid */
+.admin-metric-grid {
+ margin-bottom: 32px;
+}
+
+.admin-metric-card {
+ padding: 20px;
+ border-radius: 8px;
+ background-color: #fff;
+ border: 1px solid #e0e0e0;
+ transition: all 0.2s ease;
+ cursor: pointer;
+}
+
+.admin-metric-card:hover {
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+ border-color: #d0d0d0;
+ transform: translateY(-2px);
+}
+
+.admin-metric-card .mud-typography-caption {
+ display: block;
+ color: #999;
+ font-size: 0.75rem;
+ text-transform: uppercase;
+ letter-spacing: 0.5px;
+ margin-bottom: 12px;
+}
+
+.admin-metric-card .mud-typography-h3 {
+ font-weight: 700;
+ color: #1a1a1a;
+ margin-bottom: 8px;
+}
+
+.admin-metric-card .mud-typography-body2 {
+ color: #666;
+ font-size: 0.85rem;
+}
+
+.accent-blue {
+ background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
+ border-color: #90caf9;
+}
+
+.accent-blue .mud-typography-h3 {
+ color: #1565c0;
+}
+
+.accent-amber {
+ background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%);
+ border-color: #ffcc80;
+}
+
+.accent-amber .mud-typography-h3 {
+ color: #e65100;
+}
+
+.accent-slate {
+ background: linear-gradient(135deg, #eceff1 0%, #cfd8dc 100%);
+ border-color: #b0bec5;
+}
+
+.accent-slate .mud-typography-h3 {
+ color: #455a64;
+}
+
+.accent-green {
+ background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
+ border-color: #81c784;
+}
+
+.accent-green .mud-typography-h3 {
+ color: #2e7d32;
+}
+
+/* Surfaces */
+.admin-surface {
+ padding: 24px;
+ border-radius: 8px;
+ background-color: #fff;
+ border: 1px solid #e0e0e0;
+ margin-bottom: 24px;
+}
+
+.admin-section-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: flex-start;
+ gap: 16px;
+ margin-bottom: 20px;
+ padding-bottom: 16px;
+ border-bottom: 1px solid #f0f0f0;
+}
+
+.admin-section-header > div {
+ flex: 1;
+}
+
+.admin-section-header .mud-typography-h6 {
+ color: #1a1a1a;
+ font-weight: 600;
+ margin-bottom: 4px;
+}
+
+.admin-section-header .mud-typography-body2 {
+ color: #666;
+ font-size: 0.9rem;
+}
+
+/* Tables */
+.admin-table {
+ width: 100%;
+ border-collapse: collapse;
+}
+
+.admin-table thead {
+ background-color: #f5f5f5;
+ border-bottom: 2px solid #e0e0e0;
+}
+
+.admin-table thead th {
+ padding: 12px 16px;
+ text-align: left;
+ font-weight: 600;
+ color: #666;
+ font-size: 0.85rem;
+ text-transform: uppercase;
+ letter-spacing: 0.5px;
+}
+
+.admin-table tbody tr {
+ border-bottom: 1px solid #f0f0f0;
+}
+
+.admin-table tbody tr:hover {
+ background-color: #fafafa;
+}
+
+.admin-table tbody td {
+ padding: 12px 16px;
+ color: #333;
+}
+
+.admin-table tbody a {
+ color: #1976d2;
+ text-decoration: none;
+ font-weight: 600;
+}
+
+.admin-table tbody a:hover {
+ text-decoration: underline;
+}
+
+.admin-table :deep(.mud-chip-small) {
+ height: 24px;
+ font-size: 0.75rem;
+}
+
+/* Cursor utilities */
+.cursor-pointer {
+ cursor: pointer;
+}
+
/* Responsive */
+@media (max-width: 960px) {
+ .admin-drawer {
+ width: 64px;
+ }
+
+ .admin-content {
+ padding: 24px;
+ }
+
+ .admin-page-hero {
+ flex-direction: column;
+ align-items: stretch;
+ }
+
+ .admin-section-header {
+ flex-direction: column;
+ }
+}
+
@media (max-width: 600px) {
.admin-login-page.mud-container-maxwidth-small {
max-width: 100% !important;
@@ -212,4 +521,20 @@ html, body {
.admin-login-page .mud-typography--h4 {
font-size: 1.5rem;
}
+
+ .admin-content {
+ padding: 16px;
+ }
+
+ .admin-metric-card {
+ padding: 16px;
+ }
+
+ .admin-surface {
+ padding: 16px;
+ }
+
+ .admin-section-header > div {
+ width: 100%;
+ }
}