kevin/baron-sso
1
0
Fork 0
forked from baron/baron-sso
Code Pull Requests Activity

style(admin): enhance UI/UX of tenant import result modal

Browse Source 
- 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.
This commit is contained in:
조찬영
2026-06-04 11:26:24 +09:00
parent 5ba0d0fb86
commit 499b5d65da
1 changed files with 45 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
adminfront/src/features/tenants/routes/TenantListPage.tsx
View File

@@ -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>