From 499b5d65dac0364eaed11b0d0abd2aa3891e67c9 Mon Sep 17 00:00:00 2001
From: chan <b24028@hanmaceng.co.kr>
Date: Thu, 4 Jun 2026 11:26:24 +0900
Subject: [PATCH] style(admin): enhance UI/UX of tenant import result modal

- Added visual summary cards with color-coded counts (Total, Created, Updated, Failed).
- Implemented Tabs for status-based filtering (ALL, CREATED, UPDATED, FAILED, SKIPPED).
- Improved tab visibility with bold text and status-specific active colors.
- Refined table layout with consolidated status badges and small tags for modified fields.
---
 .../tenants/routes/TenantListPage.tsx         | 61 ++++++++++++++-----
 1 file changed, 45 insertions(+), 16 deletions(-)

diff --git a/adminfront/src/features/tenants/routes/TenantListPage.tsx b/adminfront/src/features/tenants/routes/TenantListPage.tsx
index ba62a6e5..06c2fa73 100644
--- a/adminfront/src/features/tenants/routes/TenantListPage.tsx
+++ b/adminfront/src/features/tenants/routes/TenantListPage.tsx
@@ -1025,28 +1025,32 @@ function TenantListPage() {
 
           {importResult && (
             <div className="grid grid-cols-4 gap-4 py-4">
-              <div className="flex flex-col items-center rounded-lg border bg-muted/30 p-3">
-                <span className="text-xs text-muted-foreground uppercase">
+              <div className="flex flex-col items-center rounded-lg border bg-muted/30 p-3 shadow-sm">
+                <span className="text-[10px] font-bold tracking-wider text-muted-foreground uppercase">
                   Total
                 </span>
                 <span className="text-2xl font-bold">
                   {importResult.details.length}
                 </span>
               </div>
-              <div className="flex flex-col items-center rounded-lg border border-success/20 bg-success/5 p-3">
-                <span className="text-xs text-success uppercase">Created</span>
-                <span className="text-2xl font-bold text-success">
+              <div className="flex flex-col items-center rounded-lg border border-emerald-500/20 bg-emerald-500/5 p-3 shadow-sm">
+                <span className="text-[10px] font-bold tracking-wider text-emerald-600 dark:text-emerald-400 uppercase">
+                  Created
+                </span>
+                <span className="text-2xl font-bold text-emerald-600 dark:text-emerald-400">
                   {importResult.created}
                 </span>
               </div>
-              <div className="flex flex-col items-center rounded-lg border border-warning/20 bg-warning/5 p-3">
-                <span className="text-xs text-warning uppercase">Updated</span>
-                <span className="text-2xl font-bold text-warning">
+              <div className="flex flex-col items-center rounded-lg border border-amber-500/20 bg-amber-500/5 p-3 shadow-sm">
+                <span className="text-[10px] font-bold tracking-wider text-amber-600 dark:text-amber-400 uppercase">
+                  Updated
+                </span>
+                <span className="text-2xl font-bold text-amber-600 dark:text-amber-400">
                   {importResult.updated}
                 </span>
               </div>
-              <div className="flex flex-col items-center rounded-lg border border-destructive/20 bg-destructive/5 p-3">
-                <span className="text-xs text-destructive uppercase">
+              <div className="flex flex-col items-center rounded-lg border border-destructive/20 bg-destructive/5 p-3 shadow-sm">
+                <span className="text-[10px] font-bold tracking-wider text-destructive uppercase">
                   Failed
                 </span>
                 <span className="text-2xl font-bold text-destructive">
@@ -1065,12 +1069,37 @@ function TenantListPage() {
             }
             className="w-full"
           >
-            <TabsList className="grid w-full grid-cols-5">
-              <TabsTrigger value="all">ALL</TabsTrigger>
-              <TabsTrigger value="created">CREATED</TabsTrigger>
-              <TabsTrigger value="updated">UPDATED</TabsTrigger>
-              <TabsTrigger value="failed">FAILED</TabsTrigger>
-              <TabsTrigger value="skipped">SKIPPED</TabsTrigger>
+            <TabsList className="grid h-11 w-full grid-cols-5 bg-muted/50 p-1">
+              <TabsTrigger
+                value="all"
+                className="text-xs font-bold data-[state=active]:bg-background data-[state=active]:text-primary data-[state=active]:shadow-sm"
+              >
+                ALL
+              </TabsTrigger>
+              <TabsTrigger
+                value="created"
+                className="text-xs font-bold data-[state=active]:bg-background data-[state=active]:text-emerald-600 data-[state=active]:shadow-sm dark:data-[state=active]:text-emerald-400"
+              >
+                CREATED
+              </TabsTrigger>
+              <TabsTrigger
+                value="updated"
+                className="text-xs font-bold data-[state=active]:bg-background data-[state=active]:text-amber-600 data-[state=active]:shadow-sm dark:data-[state=active]:text-amber-400"
+              >
+                UPDATED
+              </TabsTrigger>
+              <TabsTrigger
+                value="failed"
+                className="text-xs font-bold data-[state=active]:bg-background data-[state=active]:text-destructive data-[state=active]:shadow-sm"
+              >
+                FAILED
+              </TabsTrigger>
+              <TabsTrigger
+                value="skipped"
+                className="text-xs font-bold data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm"
+              >
+                SKIPPED
+              </TabsTrigger>
             </TabsList>
           </Tabs>