fix: update logic for showing the infomation

src/app/(dashboard)/dashboard/endpoint/EndpointPageClient.js

@@ -65,17 +65,23 @@ export default function APIPageClient({ isAdmin }) {
   const fetchQuickStats = useCallback(async () => {
     setQuickStatsLoading(true);
     try {
-      const [statsResponse, providersResponse] = await Promise.all([
+      const statsRequest = fetch("/api/usage/stats?period=today");
-        fetch("/api/usage/stats?period=today"),
+      const providersRequest = isAdmin ? fetch("/api/providers/client?pageSize=500") : null;
-        fetch("/api/providers/client?pageSize=500"),
+      const statsResponse = await statsRequest;
-      ]);
 
       if (!statsResponse.ok) throw new Error("Failed to fetch usage statistics");
 
       const statsData = await statsResponse.json();
       setQuickStats(statsData);
 
-      if (providersResponse.ok) {
+      if (!providersRequest) {
+        setProviderSummary(null);
+      } else {
+        const providersResponse = await providersRequest;
+        if (!providersResponse.ok) {
+          setProviderSummary(null);
+          return;
+        }
         const providersData = await providersResponse.json();
         const connections = providersData.connections || [];
         const activeConnections = connections.filter(
@@ -85,8 +91,6 @@ export default function APIPageClient({ isAdmin }) {
           active: activeConnections.length,
           total: providersData.pagination?.total ?? connections.length,
         });
-      } else {
-        setProviderSummary(null);
       }
     } catch {
       setQuickStats(null);
@@ -94,7 +98,7 @@ export default function APIPageClient({ isAdmin }) {
     } finally {
       setQuickStatsLoading(false);
     }
-  }, []);
+  }, [isAdmin]);
 
   useEffect(() => {
     const initialize = window.setTimeout(() => {
@@ -207,7 +211,7 @@ export default function APIPageClient({ isAdmin }) {
             <div className={`${styles.skeletonLine} h-3 w-4/5`} />
           </div>
         </div>
-        <QuickStatsBarSkeleton />
+        <QuickStatsBarSkeleton isAdmin={isAdmin} />
         <div className={`${styles.skeletonPanel} flex flex-col gap-4`}>
           <div className={`${styles.skeletonLine} h-5 w-40`} />
           <div className={`${styles.skeletonLine} h-14 w-full`} />
@@ -243,9 +247,9 @@ export default function APIPageClient({ isAdmin }) {
       <p className="sr-only" role="status" aria-live="polite">{copied ? "Value copied to clipboard." : ""}</p>
 
       {quickStatsLoading ? (
-        <QuickStatsBarSkeleton />
+        <QuickStatsBarSkeleton isAdmin={isAdmin} />
       ) : (
-        <QuickStatsBar stats={quickStats} providerSummary={providerSummary} />
+        <QuickStatsBar stats={quickStats} providerSummary={providerSummary} isAdmin={isAdmin} />
       )}
 
       {loadError && (

src/app/(dashboard)/dashboard/endpoint/components/QuickStatsBar.js

@@ -47,11 +47,17 @@ const statDefinitions = [
   },
 ];
 
-export function QuickStatsBarSkeleton() {
+function getVisibleStatDefinitions(isAdmin) {
+  return isAdmin ? statDefinitions : statDefinitions.filter((stat) => stat.key !== "providers");
+}
+
+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">
       <span className="sr-only">Loading today&apos;s gateway statistics.</span>
-      {statDefinitions.map((stat) => (
+      {visibleStatDefinitions.map((stat) => (
         <div key={stat.key} className={styles.statSkeleton} aria-hidden="true">
           <div className={`${styles.skeletonLine} size-8`} />
           <div className="min-w-0 space-y-2">
@@ -65,13 +71,14 @@ export function QuickStatsBarSkeleton() {
   );
 }
 
-export default function QuickStatsBar({ stats, providerSummary = null }) {
+export default function QuickStatsBar({ stats, providerSummary = null, isAdmin = false }) {
   if (!stats) return null;
+  const visibleStatDefinitions = getVisibleStatDefinitions(isAdmin);
 
   return (
     <section className={styles.quickStats} aria-labelledby="today-overview-title">
       <h3 id="today-overview-title" className="sr-only">Today&apos;s gateway overview</h3>
-      {statDefinitions.map((stat) => (
+      {visibleStatDefinitions.map((stat) => (
         <article key={stat.key} className={styles.statCard}>
           <span className={`${styles.statIcon} material-symbols-outlined`} aria-hidden="true">{stat.icon}</span>
           <p className={styles.statLabel}>{stat.label}</p>
@@ -84,6 +91,7 @@ export default function QuickStatsBar({ stats, providerSummary = null }) {
 }
 
 QuickStatsBar.propTypes = {
+  isAdmin: PropTypes.bool,
   stats: PropTypes.shape({
     totalRequests: PropTypes.number,
     totalPromptTokens: PropTypes.number,