From cdbb7482757f14857478171bd76cb331a957b2e4 Mon Sep 17 00:00:00 2001
From: Sin-Kang <jlc488@gmail.com>
Date: Wed, 3 Jun 2026 20:57:41 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20visual=20polish=20=E2=80=94=20global=20?=
 =?UTF-8?q?interactions=20+=20dashboard=20KPI=20cards?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Global (style.css): smooth transitions on buttons/inputs/cards/tags,
  data-table row-hover, always-visible keyboard focus ring, and slimmer
  themed scrollbars — applied app-wide.
- Dashboard: KPI icons get an accent rounded chip; values truncate so a
  long tenant id / login id can't blow out the card.

Built green (vue-tsc + vite). Admin-ui only.
---
 src/style.css               | 49 +++++++++++++++++++++++++++++++++++++
 src/views/DashboardView.vue | 32 +++++++++++++++---------
 2 files changed, 69 insertions(+), 12 deletions(-)

diff --git a/src/style.css b/src/style.css
index fd2fbb1..ddbf93f 100644
--- a/src/style.css
+++ b/src/style.css
@@ -20,3 +20,52 @@ body {
 .dark body {
   background-color: var(--p-surface-950);
 }
+
+/* ---- Global UX polish (applies app-wide) ---- */
+
+/* Smooth, consistent micro-interactions. */
+.p-button,
+.p-tag,
+.p-inputtext,
+.p-card {
+  transition:
+    background-color 0.15s ease,
+    border-color 0.15s ease,
+    box-shadow 0.15s ease,
+    color 0.15s ease;
+}
+
+/* Clearer row-hover affordance on data tables. */
+.p-datatable-tbody > tr {
+  transition: background-color 0.12s ease;
+}
+
+/* Keyboard focus is always visible (a11y). */
+:focus-visible {
+  outline: 2px solid var(--p-primary-color);
+  outline-offset: 2px;
+  border-radius: 4px;
+}
+
+/* Slimmer, subtler scrollbars — the sidebar and long tables get scrolly. */
+* {
+  scrollbar-width: thin;
+  scrollbar-color: var(--p-surface-300) transparent;
+}
+*::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+*::-webkit-scrollbar-thumb {
+  background: var(--p-surface-300);
+  border-radius: 4px;
+}
+*::-webkit-scrollbar-track {
+  background: transparent;
+}
+.dark * {
+  scrollbar-color: var(--p-surface-700) transparent;
+}
+.dark *::-webkit-scrollbar-thumb {
+  background: var(--p-surface-700);
+}
diff --git a/src/views/DashboardView.vue b/src/views/DashboardView.vue
index da32671..a4998fa 100644
--- a/src/views/DashboardView.vue
+++ b/src/views/DashboardView.vue
@@ -73,11 +73,13 @@ onMounted(refresh)
       <Card data-testid="kpi-users">
         <template #content>
           <div class="flex items-center gap-3">
-            <i class="pi pi-user text-2xl text-primary"></i>
-            <div class="flex-1">
+            <div class="flex items-center justify-center w-11 h-11 rounded-xl bg-primary/10 text-primary shrink-0">
+              <i class="pi pi-user text-xl"></i>
+            </div>
+            <div class="flex-1 min-w-0">
               <div class="text-sm text-surface-500 dark:text-surface-400">{{ t('dashboard.kpiUsers') }}</div>
               <Skeleton v-if="loading && userCount === null" height="2rem" />
-              <div v-else class="text-2xl font-semibold" data-testid="kpi-users-value">
+              <div v-else class="text-2xl font-semibold truncate" data-testid="kpi-users-value">
                 {{ userCount ?? '—' }}
               </div>
             </div>
@@ -88,11 +90,13 @@ onMounted(refresh)
       <Card data-testid="kpi-tenants">
         <template #content>
           <div class="flex items-center gap-3">
-            <i class="pi pi-building text-2xl text-primary"></i>
-            <div class="flex-1">
+            <div class="flex items-center justify-center w-11 h-11 rounded-xl bg-primary/10 text-primary shrink-0">
+              <i class="pi pi-building text-xl"></i>
+            </div>
+            <div class="flex-1 min-w-0">
               <div class="text-sm text-surface-500 dark:text-surface-400">{{ t('dashboard.kpiTenants') }}</div>
               <Skeleton v-if="loading && tenantCount === null" height="2rem" />
-              <div v-else class="text-2xl font-semibold" data-testid="kpi-tenants-value">
+              <div v-else class="text-2xl font-semibold truncate" data-testid="kpi-tenants-value">
                 {{ tenantCount ?? '—' }}
               </div>
             </div>
@@ -103,10 +107,12 @@ onMounted(refresh)
       <Card data-testid="kpi-current-tenant">
         <template #content>
           <div class="flex items-center gap-3">
-            <i class="pi pi-id-card text-2xl text-primary"></i>
-            <div class="flex-1">
+            <div class="flex items-center justify-center w-11 h-11 rounded-xl bg-primary/10 text-primary shrink-0">
+              <i class="pi pi-id-card text-xl"></i>
+            </div>
+            <div class="flex-1 min-w-0">
               <div class="text-sm text-surface-500 dark:text-surface-400">{{ t('dashboard.kpiCurrentTenant') }}</div>
-              <div class="text-2xl font-semibold" data-testid="kpi-current-tenant-value">
+              <div class="text-2xl font-semibold truncate" data-testid="kpi-current-tenant-value">
                 {{ auth.user?.tenantId ?? '—' }}
               </div>
             </div>
@@ -117,10 +123,12 @@ onMounted(refresh)
       <Card data-testid="kpi-signed-in">
         <template #content>
           <div class="flex items-center gap-3">
-            <i class="pi pi-user-edit text-2xl text-primary"></i>
-            <div class="flex-1">
+            <div class="flex items-center justify-center w-11 h-11 rounded-xl bg-primary/10 text-primary shrink-0">
+              <i class="pi pi-user-edit text-xl"></i>
+            </div>
+            <div class="flex-1 min-w-0">
               <div class="text-sm text-surface-500 dark:text-surface-400">{{ t('dashboard.kpiSignedIn') }}</div>
-              <div class="text-2xl font-semibold" data-testid="kpi-signed-in-value">
+              <div class="text-2xl font-semibold truncate" data-testid="kpi-signed-in-value">
                 {{ auth.user?.loginId ?? '—' }}
               </div>
             </div>