@actuate-media/cms-admin 0.16.1 → 0.17.0

package/src/lib/useApiData.ts

@@ -6,6 +6,34 @@ export interface UseApiDataOptions {
   maxRetries?: number
   /** Base delay in ms for exponential backoff (default 1000). Actual delay = base * 2^attempt. */
   retryBaseMs?: number
+  /**
+   * When set, successful responses are cached in-memory keyed by endpoint
+   * for this many ms and reused on the next mount, skipping the network
+   * (cache-first). Opt-in — omit to keep the default always-fetch
+   * behaviour. `refetch()` always bypasses the cache. Useful for views
+   * that remount frequently (e.g. dashboard navigation) so they don't
+   * re-issue the same requests on every visit.
+   */
+  cacheMs?: number
+}
+
+/**
+ * Process-wide response cache for `cacheMs` consumers. Keyed by endpoint
+ * (note: the locale query param is appended downstream by `cmsApi`, so a
+ * locale switch is not reflected here — only enable `cacheMs` for
+ * locale-invariant endpoints like `/stats`).
+ */
+const responseCache = new Map<string, { data: unknown; at: number }>()
+
+function readCache<T>(endpoint: string, cacheMs: number): { value: T | null } | null {
+  const hit = responseCache.get(endpoint)
+  if (hit && Date.now() - hit.at < cacheMs) return { value: hit.data as T | null }
+  return null
+}
+
+/** Test-only: drop all cached responses so cases don't bleed into each other. */
+export function __clearApiDataCache(): void {
+  responseCache.clear()
 }
 
 export interface UseApiDataResult<T> {
@@ -22,9 +50,12 @@ export function useApiData<T>(
   defaultValue: T | null = null,
   options: UseApiDataOptions = {},
 ): UseApiDataResult<T> {
-  const { maxRetries = 3, retryBaseMs = 1000 } = options
-  const [data, setData] = useState<T | null>(defaultValue)
-  const [loading, setLoading] = useState(endpoint !== null)
+  const { maxRetries = 3, retryBaseMs = 1000, cacheMs } = options
+  // Read the cache synchronously for the initial state so a warm cache
+  // hit paints immediately instead of flashing a loading spinner.
+  const cachedInitial = endpoint && cacheMs ? readCache<T>(endpoint, cacheMs) : null
+  const [data, setData] = useState<T | null>(cachedInitial ? cachedInitial.value : defaultValue)
+  const [loading, setLoading] = useState(endpoint !== null && !cachedInitial)
   const [error, setError] = useState<string | null>(null)
   const [exhausted, setExhausted] = useState(false)
   const abortRef = useRef<AbortController | null>(null)
@@ -32,12 +63,24 @@ export function useApiData<T>(
   const retryTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
 
   const fetchData = useCallback(
-    async (isRetry = false) => {
+    async (isRetry = false, forceRefresh = false) => {
       if (!endpoint) {
         setLoading(false)
         return
       }
 
+      // Cache-first: a fresh cached response short-circuits the network.
+      // `refetch()` passes `forceRefresh` to bypass this.
+      if (!isRetry && !forceRefresh && cacheMs) {
+        const hit = readCache<T>(endpoint, cacheMs)
+        if (hit) {
+          setData(hit.value)
+          setError(null)
+          setLoading(false)
+          return
+        }
+      }
+
       abortRef.current?.abort()
       const controller = new AbortController()
       abortRef.current = controller
@@ -65,12 +108,14 @@ export function useApiData<T>(
         setExhausted(true)
         setLoading(false)
       } else {
-        setData(res.data ?? null)
+        const value = res.data ?? null
+        setData(value)
         setLoading(false)
         retryCountRef.current = 0
+        if (cacheMs) responseCache.set(endpoint, { data: value, at: Date.now() })
       }
     },
-    [endpoint, maxRetries, retryBaseMs],
+    [endpoint, maxRetries, retryBaseMs, cacheMs],
   )
 
   const manualRefetch = useCallback(() => {
@@ -80,7 +125,7 @@ export function useApiData<T>(
     }
     retryCountRef.current = 0
     setExhausted(false)
-    fetchData(false)
+    fetchData(false, true)
   }, [fetchData])
 
   useEffect(() => {

package/src/styles/theme.css

@@ -18,6 +18,27 @@
   --accent-foreground: #030213;
   --destructive: #d4183d;
   --destructive-foreground: #ffffff;
+  /*
+   * Semantic status + brand tokens.
+   * ----------------------------------------------------------------
+   * `destructive` already covers the "error/danger" state; these add
+   * the remaining semantic states the admin needs (success / warning /
+   * info) plus the violet brand accent used for links and primary
+   * affordances. Values are tuned to read as TEXT on both the card
+   * surface and their own `/10` tint (badge backgrounds), and as a
+   * solid fill (dots, progress bars). The `*-foreground` variants are
+   * for text placed on a SOLID fill. Light values match the previous
+   * emerald/amber/blue/violet-600 palette so tokenizing is a no-op
+   * visually; dark values track the *-300/*-400 tints used before.
+   */
+  --success: oklch(0.5 0.13 155);
+  --success-foreground: #ffffff;
+  --warning: oklch(0.52 0.13 73);
+  --warning-foreground: oklch(0.205 0 0);
+  --info: oklch(0.5 0.17 254);
+  --info-foreground: #ffffff;
+  --brand: oklch(0.54 0.23 293);
+  --brand-foreground: #ffffff;
   --border: rgba(0, 0, 0, 0.1);
   --input: transparent;
   --input-background: #f3f3f5;
@@ -59,6 +80,14 @@
   --accent-foreground: oklch(0.985 0 0);
   --destructive: oklch(0.396 0.141 25.723);
   --destructive-foreground: oklch(0.637 0.237 25.331);
+  --success: oklch(0.72 0.15 155);
+  --success-foreground: oklch(0.205 0 0);
+  --warning: oklch(0.8 0.13 80);
+  --warning-foreground: oklch(0.205 0 0);
+  --info: oklch(0.72 0.14 252);
+  --info-foreground: oklch(0.205 0 0);
+  --brand: oklch(0.72 0.18 293);
+  --brand-foreground: oklch(0.205 0 0);
   --border: oklch(0.269 0 0);
   --input: oklch(0.269 0 0);
   --input-background: oklch(0.205 0 0);
@@ -98,6 +127,14 @@
   --color-accent-foreground: var(--accent-foreground);
   --color-destructive: var(--destructive);
   --color-destructive-foreground: var(--destructive-foreground);
+  --color-success: var(--success);
+  --color-success-foreground: var(--success-foreground);
+  --color-warning: var(--warning);
+  --color-warning-foreground: var(--warning-foreground);
+  --color-info: var(--info);
+  --color-info-foreground: var(--info-foreground);
+  --color-brand: var(--brand);
+  --color-brand-foreground: var(--brand-foreground);
   --color-border: var(--border);
   --color-input: var(--input);
   --color-input-background: var(--input-background);

package/src/views/Dashboard.tsx

@@ -217,33 +217,32 @@ function authorAvatar(name: string | null | undefined): { color: string; initial
   return { color, initials }
 }
 
+/**
+ * Semantic state styling uses theme tokens (`success` / `warning` / `info`
+ * / `brand`) so the dashboard tracks the design system in both light and
+ * dark mode. Two deliberate exceptions remain as raw values:
+ *   - Error states keep `text-red-*` / `bg-red-*`. The `--destructive`
+ *     token's dark value is intentionally dark (low contrast as TEXT on a
+ *     dark card), so tokenizing error text here would regress contrast.
+ *     Promoting error to a token is a separate, admin-wide change.
+ *   - `AVATAR_COLORS` are dynamic per-author hashes (allowed: truly
+ *     dynamic values, applied via inline style).
+ */
 function statusBadge(status: string): {
   label: string
   cls: string
 } {
   switch (status) {
     case 'PUBLISHED':
-      return {
-        label: 'Published',
-        cls: 'bg-emerald-100 text-emerald-800 dark:bg-emerald-950/60 dark:text-emerald-300',
-      }
+      return { label: 'Published', cls: 'bg-success/10 text-success' }
     case 'DRAFT':
-      return {
-        label: 'Draft',
-        cls: 'bg-gray-100 text-gray-700 dark:bg-gray-800 dark:text-gray-300',
-      }
+      return { label: 'Draft', cls: 'bg-muted text-muted-foreground' }
     case 'SCHEDULED':
-      return {
-        label: 'Scheduled',
-        cls: 'bg-amber-100 text-amber-800 dark:bg-amber-950/60 dark:text-amber-300',
-      }
+      return { label: 'Scheduled', cls: 'bg-warning/10 text-warning' }
     case 'IN_REVIEW':
-      return {
-        label: 'In Review',
-        cls: 'bg-blue-100 text-blue-800 dark:bg-blue-950/60 dark:text-blue-300',
-      }
+      return { label: 'In Review', cls: 'bg-info/10 text-info' }
     default:
-      return { label: status, cls: 'bg-gray-100 text-gray-700 dark:bg-gray-800 dark:text-gray-300' }
+      return { label: status, cls: 'bg-muted text-muted-foreground' }
   }
 }
 
@@ -263,12 +262,31 @@ interface StatCardData {
 
 export function Dashboard({ config, session, onNavigate }: DashboardProps) {
   const nav = (path: string) => onNavigate?.(path)
-  const { data: stats, loading, error, exhausted, refetch } = useApiData<DashboardStats>('/stats')
-  const { data: health } = useApiData<HealthData>('/health')
-  const { data: delivery, loading: deliveryLoading } =
-    useApiData<DeliveryStats>('/stats/api-delivery')
-  const { data: contentHealthData, loading: contentHealthLoading } =
-    useApiData<ContentHealthData>('/stats/content-health')
+  // Cache responses for 30s so navigating away and back doesn't re-fire
+  // all four dashboard requests on every visit. First load is unaffected
+  // (cold cache) and each request still streams independently; `refetch`
+  // (the Retry button) bypasses the cache.
+  const DASH_CACHE_MS = 30_000
+  const {
+    data: stats,
+    loading,
+    error,
+    exhausted,
+    refetch,
+  } = useApiData<DashboardStats>('/stats', null, {
+    cacheMs: DASH_CACHE_MS,
+  })
+  const { data: health } = useApiData<HealthData>('/health', null, { cacheMs: DASH_CACHE_MS })
+  const { data: delivery, loading: deliveryLoading } = useApiData<DeliveryStats>(
+    '/stats/api-delivery',
+    null,
+    { cacheMs: DASH_CACHE_MS },
+  )
+  const { data: contentHealthData, loading: contentHealthLoading } = useApiData<ContentHealthData>(
+    '/stats/content-health',
+    null,
+    { cacheMs: DASH_CACHE_MS },
+  )
 
   // A slow ticker (60s) so the greeting, calendar date, and "x minutes
   // ago" relative times stay correct on a dashboard left open for hours
@@ -311,8 +329,8 @@ export function Dashboard({ config, session, onNavigate }: DashboardProps) {
         label: collectionLabel(primary[0]),
         value: String(counts[primary[0].slug] ?? 0),
         icon: primary[0].type === 'page' ? FileIcon : FileText,
-        iconBg: 'bg-violet-100 dark:bg-violet-950/60',
-        iconColor: 'text-violet-600 dark:text-violet-300',
+        iconBg: 'bg-chart-1/15',
+        iconColor: 'text-chart-1',
         href: `/${primary[0].slug}`,
       })
     } else {
@@ -320,8 +338,8 @@ export function Dashboard({ config, session, onNavigate }: DashboardProps) {
         label: 'Documents',
         value: String(stats?.totalDocuments ?? 0),
         icon: FileText,
-        iconBg: 'bg-violet-100 dark:bg-violet-950/60',
-        iconColor: 'text-violet-600 dark:text-violet-300',
+        iconBg: 'bg-chart-1/15',
+        iconColor: 'text-chart-1',
       })
     }
 
@@ -330,8 +348,8 @@ export function Dashboard({ config, session, onNavigate }: DashboardProps) {
         label: collectionLabel(primary[1]),
         value: String(counts[primary[1].slug] ?? 0),
         icon: primary[1].type === 'page' ? FileIcon : FileText,
-        iconBg: 'bg-cyan-100 dark:bg-cyan-950/60',
-        iconColor: 'text-cyan-600 dark:text-cyan-300',
+        iconBg: 'bg-chart-2/15',
+        iconColor: 'text-chart-2',
         href: `/${primary[1].slug}`,
       })
     }
@@ -344,8 +362,8 @@ export function Dashboard({ config, session, onNavigate }: DashboardProps) {
           ? `${stats.totalMedia} file${stats.totalMedia === 1 ? '' : 's'}`
           : undefined,
       icon: ImageIcon,
-      iconBg: 'bg-emerald-100 dark:bg-emerald-950/60',
-      iconColor: 'text-emerald-600 dark:text-emerald-300',
+      iconBg: 'bg-chart-3/15',
+      iconColor: 'text-chart-3',
       href: '/media',
     })
 
@@ -358,8 +376,8 @@ export function Dashboard({ config, session, onNavigate }: DashboardProps) {
       value: String(formsCount),
       hint: submissions > 0 ? `${submissions} response${submissions === 1 ? '' : 's'}` : undefined,
       icon: ClipboardList,
-      iconBg: 'bg-amber-100 dark:bg-amber-950/60',
-      iconColor: 'text-amber-600 dark:text-amber-300',
+      iconBg: 'bg-chart-4/15',
+      iconColor: 'text-chart-4',
       href: '/forms',
     })
 
@@ -371,8 +389,8 @@ export function Dashboard({ config, session, onNavigate }: DashboardProps) {
       hint: seo > 0 ? (seo >= 70 ? 'Good' : seo >= 40 ? 'Fair' : 'Needs work') : 'No content yet',
       hintUp: seo >= 70,
       icon: Search,
-      iconBg: 'bg-indigo-100 dark:bg-indigo-950/60',
-      iconColor: 'text-indigo-600 dark:text-indigo-300',
+      iconBg: 'bg-chart-5/15',
+      iconColor: 'text-chart-5',
       href: '/seo',
     })
 
@@ -517,7 +535,7 @@ export function Dashboard({ config, session, onNavigate }: DashboardProps) {
   if (loading && !stats) {
     return (
       <div className="flex h-64 items-center justify-center p-4 sm:p-6">
-        <Loader2 className="h-6 w-6 animate-spin text-violet-600" />
+        <Loader2 className="text-brand h-6 w-6 animate-spin" />
       </div>
     )
   }
@@ -526,13 +544,11 @@ export function Dashboard({ config, session, onNavigate }: DashboardProps) {
     <div className="w-full space-y-5 p-4 sm:p-6 lg:px-8">
       {/* Health banners ────────────────────────────────────────────── */}
       {health && health.status === 'degraded' && (
-        <div className="flex items-start gap-3 rounded-lg border border-blue-200 bg-blue-50 p-3 dark:border-blue-900 dark:bg-blue-950/40">
-          <Database className="mt-0.5 h-5 w-5 shrink-0 text-blue-600 dark:text-blue-400" />
+        <div className="border-info/30 bg-info/10 flex items-start gap-3 rounded-lg border p-3">
+          <Database className="text-info mt-0.5 h-5 w-5 shrink-0" />
           <div className="min-w-0 flex-1">
-            <span className="text-sm font-medium text-blue-900 dark:text-blue-200">
-              Database setup required
-            </span>
-            <p className="mt-0.5 text-xs text-blue-700 dark:text-blue-300">
+            <span className="text-info text-sm font-medium">Database setup required</span>
+            <p className="text-muted-foreground mt-0.5 text-xs">
               {!health.databaseConnected
                 ? 'Cannot connect to the database. Check your DATABASE_URL environment variable.'
                 : !health.secretConfigured
@@ -547,14 +563,14 @@ export function Dashboard({ config, session, onNavigate }: DashboardProps) {
       )}
 
       {error && exhausted && (
-        <div className="flex items-center gap-3 rounded-lg border border-amber-200 bg-amber-50 p-3 dark:border-amber-900 dark:bg-amber-950/40">
-          <AlertTriangle className="h-5 w-5 shrink-0 text-amber-600 dark:text-amber-400" />
-          <span className="flex-1 text-sm text-amber-800 dark:text-amber-200">
+        <div className="border-warning/30 bg-warning/10 flex items-center gap-3 rounded-lg border p-3">
+          <AlertTriangle className="text-warning h-5 w-5 shrink-0" />
+          <span className="text-warning flex-1 text-sm">
             Some dashboard data may be unavailable.
           </span>
           <button
             onClick={refetch}
-            className="rounded-lg border border-amber-300 px-3 py-1 text-sm text-amber-700 transition-colors hover:bg-amber-100 dark:border-amber-700 dark:text-amber-200 dark:hover:bg-amber-900/40"
+            className="border-warning/40 text-warning hover:bg-warning/10 rounded-lg border px-3 py-1 text-sm transition-colors"
           >
             Retry
           </button>
@@ -588,7 +604,7 @@ export function Dashboard({ config, session, onNavigate }: DashboardProps) {
           <button
             key={a.label}
             onClick={a.onClick}
-            className="border-border bg-card inline-flex shrink-0 items-center gap-1.5 rounded-lg border px-3.5 py-2 text-sm shadow-sm transition-colors hover:border-violet-400 hover:bg-violet-50 hover:text-violet-700 dark:hover:bg-violet-950/40 dark:hover:text-violet-300"
+            className="border-border bg-card hover:border-brand/50 hover:bg-brand/10 hover:text-brand inline-flex shrink-0 items-center gap-1.5 rounded-lg border px-3.5 py-2 text-sm shadow-sm transition-colors"
           >
             <a.icon className="h-3.5 w-3.5" />
             {a.label}
@@ -617,7 +633,7 @@ export function Dashboard({ config, session, onNavigate }: DashboardProps) {
               <p className="text-muted-foreground mt-1 text-xs">{card.label}</p>
               {card.hint && (
                 <p
-                  className={`mt-1.5 text-[11px] ${card.hintUp ? 'text-emerald-600 dark:text-emerald-400' : 'text-muted-foreground'}`}
+                  className={`mt-1.5 text-[11px] ${card.hintUp ? 'text-success' : 'text-muted-foreground'}`}
                 >
                   {card.hint}
                 </p>
@@ -653,7 +669,7 @@ export function Dashboard({ config, session, onNavigate }: DashboardProps) {
             </div>
             {(stats?.recentDocuments?.length ?? 0) > 8 && (
               <button
-                className="text-xs font-medium text-violet-600 hover:underline dark:text-violet-400"
+                className="text-brand text-xs font-medium hover:underline"
                 onClick={() => setActivityLimit((n) => (n >= 20 ? 8 : 20))}
               >
                 {activityLimit >= 20 ? 'Show less' : 'Show more'}
@@ -721,7 +737,7 @@ export function Dashboard({ config, session, onNavigate }: DashboardProps) {
                 </p>
               </div>
               <button
-                className="text-xs font-medium text-violet-600 hover:underline disabled:cursor-default disabled:no-underline disabled:opacity-50 dark:text-violet-400"
+                className="text-brand text-xs font-medium hover:underline disabled:cursor-default disabled:no-underline disabled:opacity-50"
                 disabled={publishQueue.length === 0}
                 onClick={() => {
                   // We don't have a dedicated "scheduled" admin page, so deep-
@@ -750,7 +766,7 @@ export function Dashboard({ config, session, onNavigate }: DashboardProps) {
                       onClick={() => nav(q.editPath)}
                       className="hover:bg-accent/50 focus-visible:bg-accent/50 flex w-full min-w-0 cursor-pointer items-center gap-2.5 px-4 py-2.5 text-left transition-colors"
                     >
-                      <span className="h-2 w-2 shrink-0 rounded-full bg-amber-500" aria-hidden />
+                      <span className="bg-warning h-2 w-2 shrink-0 rounded-full" aria-hidden />
                       <div className="min-w-0 flex-1">
                         <p className="text-foreground truncate text-sm font-medium">{q.title}</p>
                         <p className="text-muted-foreground truncate text-[11px]">
@@ -775,7 +791,7 @@ export function Dashboard({ config, session, onNavigate }: DashboardProps) {
                 <p className="text-muted-foreground mt-0.5 text-xs">SEO &amp; quality issues</p>
               </div>
               <button
-                className="text-xs font-medium text-violet-600 hover:underline dark:text-violet-400"
+                className="text-brand text-xs font-medium hover:underline"
                 onClick={() => nav('/seo')}
               >
                 Fix issues
@@ -792,9 +808,9 @@ export function Dashboard({ config, session, onNavigate }: DashboardProps) {
                 <span
                   className={`text-xs font-medium ${
                     contentHealth.tone === 'ok'
-                      ? 'text-emerald-600 dark:text-emerald-400'
+                      ? 'text-success'
                       : contentHealth.tone === 'warn'
-                        ? 'text-amber-600 dark:text-amber-400'
+                        ? 'text-warning'
                         : contentHealth.tone === 'err'
                           ? 'text-red-600 dark:text-red-400'
                           : 'text-muted-foreground'
@@ -807,9 +823,9 @@ export function Dashboard({ config, session, onNavigate }: DashboardProps) {
                 <div
                   className={`h-full rounded-full transition-all ${
                     contentHealth.tone === 'ok'
-                      ? 'bg-emerald-500'
+                      ? 'bg-success'
                       : contentHealth.tone === 'warn'
-                        ? 'bg-amber-500'
+                        ? 'bg-warning'
                         : contentHealth.tone === 'err'
                           ? 'bg-red-500'
                           : 'bg-muted-foreground/40'
@@ -836,7 +852,7 @@ export function Dashboard({ config, session, onNavigate }: DashboardProps) {
                           iss.tone === 'err'
                             ? 'bg-red-500'
                             : iss.tone === 'warn'
-                              ? 'bg-amber-500'
+                              ? 'bg-warning'
                               : 'bg-muted-foreground'
                         }`}
                         aria-hidden
@@ -849,7 +865,7 @@ export function Dashboard({ config, session, onNavigate }: DashboardProps) {
                           iss.tone === 'err'
                             ? 'text-red-600 dark:text-red-400'
                             : iss.tone === 'warn'
-                              ? 'text-amber-600 dark:text-amber-400'
+                              ? 'text-warning'
                               : 'text-muted-foreground'
                         }`}
                       >
@@ -882,7 +898,7 @@ export function Dashboard({ config, session, onNavigate }: DashboardProps) {
             </p>
           </div>
           <button
-            className="inline-flex items-center gap-1 text-xs font-medium text-violet-600 hover:underline dark:text-violet-400"
+            className="text-brand inline-flex items-center gap-1 text-xs font-medium hover:underline"
             onClick={() => nav('/api-keys')}
           >
             API docs <ExternalLink className="h-3 w-3" />
@@ -1037,9 +1053,9 @@ function DeliveryTile({
 }) {
   const subTone =
     tone === 'ok'
-      ? 'text-emerald-600 dark:text-emerald-400'
+      ? 'text-success'
       : tone === 'warn'
-        ? 'text-amber-600 dark:text-amber-400'
+        ? 'text-warning'
         : tone === 'err'
           ? 'text-red-600 dark:text-red-400'
           : 'text-muted-foreground'