fix: update the ui for the dashboard

This commit is contained in:
2026-07-21 09:48:33 +07:00
parent 580bf9d9ae
commit f5666a29da
2 changed files with 10 additions and 2 deletions
@@ -128,6 +128,10 @@
gap: 0.75rem; gap: 0.75rem;
} }
.quickStatsUser {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.statCard, .statCard,
.statSkeleton { .statSkeleton {
display: grid; display: grid;
@@ -55,7 +55,7 @@ export function QuickStatsBarSkeleton({ isAdmin = false }) {
const visibleStatDefinitions = getVisibleStatDefinitions(isAdmin); const visibleStatDefinitions = getVisibleStatDefinitions(isAdmin);
return ( 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> <span className="sr-only">Loading today&apos;s gateway statistics.</span>
{visibleStatDefinitions.map((stat) => ( {visibleStatDefinitions.map((stat) => (
<div key={stat.key} className={styles.statSkeleton} aria-hidden="true"> <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); const visibleStatDefinitions = getVisibleStatDefinitions(isAdmin);
return ( 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> <h3 id="today-overview-title" className="sr-only">Today&apos;s gateway overview</h3>
{visibleStatDefinitions.map((stat) => ( {visibleStatDefinitions.map((stat) => (
<article key={stat.key} className={styles.statCard}> <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 = { QuickStatsBar.propTypes = {
isAdmin: PropTypes.bool, isAdmin: PropTypes.bool,
stats: PropTypes.shape({ stats: PropTypes.shape({