From f5666a29dad190170c18c2fbda35391f5638c8e5 Mon Sep 17 00:00:00 2001
From: Nezumi-2711 <phanhuuloi15@gmail.com>
Date: Tue, 21 Jul 2026 09:48:33 +0700
Subject: [PATCH] fix: update the ui for the dashboard

---
 src/app/(dashboard)/dashboard/DashboardPage.module.css    | 4 ++++
 .../dashboard/endpoint/components/QuickStatsBar.js        | 8 ++++++--
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/app/(dashboard)/dashboard/DashboardPage.module.css b/src/app/(dashboard)/dashboard/DashboardPage.module.css
index 1f378a87..3dd9bab9 100644
--- a/src/app/(dashboard)/dashboard/DashboardPage.module.css
+++ b/src/app/(dashboard)/dashboard/DashboardPage.module.css
@@ -128,6 +128,10 @@
   gap: 0.75rem;
 }
 
+.quickStatsUser {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
 .statCard,
 .statSkeleton {
   display: grid;
diff --git a/src/app/(dashboard)/dashboard/endpoint/components/QuickStatsBar.js b/src/app/(dashboard)/dashboard/endpoint/components/QuickStatsBar.js
index 0b622da6..9ba3b458 100644
--- a/src/app/(dashboard)/dashboard/endpoint/components/QuickStatsBar.js
+++ b/src/app/(dashboard)/dashboard/endpoint/components/QuickStatsBar.js
@@ -55,7 +55,7 @@ export function QuickStatsBarSkeleton({ isAdmin = false }) {
   const visibleStatDefinitions = getVisibleStatDefinitions(isAdmin);
 
   return (
-    <section className={`${styles.quickStats} animate-pulse`} aria-label="Loading today's gateway statistics" aria-busy="true">
+    <section className={`${styles.quickStats} ${!isAdmin ? styles.quickStatsUser : ""} animate-pulse`} aria-label="Loading today's gateway statistics" aria-busy="true">
       <span className="sr-only">Loading today&apos;s gateway statistics.</span>
       {visibleStatDefinitions.map((stat) => (
         <div key={stat.key} className={styles.statSkeleton} aria-hidden="true">
@@ -76,7 +76,7 @@ export default function QuickStatsBar({ stats, providerSummary = null, isAdmin =
   const visibleStatDefinitions = getVisibleStatDefinitions(isAdmin);
 
   return (
-    <section className={styles.quickStats} aria-labelledby="today-overview-title">
+    <section className={`${styles.quickStats} ${!isAdmin ? styles.quickStatsUser : ""}`} aria-labelledby="today-overview-title">
       <h3 id="today-overview-title" className="sr-only">Today&apos;s gateway overview</h3>
       {visibleStatDefinitions.map((stat) => (
         <article key={stat.key} className={styles.statCard}>
@@ -90,6 +90,10 @@ export default function QuickStatsBar({ stats, providerSummary = null, isAdmin =
   );
 }
 
+QuickStatsBarSkeleton.propTypes = {
+  isAdmin: PropTypes.bool,
+};
+
 QuickStatsBar.propTypes = {
   isAdmin: PropTypes.bool,
   stats: PropTypes.shape({