Skip to main content

​
Family Hub Insights — 500 Fix & Design Overhaul

​
Context

The /insights page at casa.devarno.cloud was returning a 500 Internal Server Error, completely blocking access to the cross-organisation intelligence dashboard. Simultaneously, the entire insights section suffered from a severe brand disconnect — using generic gray/white styling that bore no resemblance to the Devarno Cloud landing page aesthetic or the SO1 Mars/visor design system.

​
Root Cause: 500 Error

​
Diagnosis

The insights pages are Next.js server components that call database service functions via Promise.all() without error handling. The page component at src/app/insights/page.tsx executed: 
const [overview, languageBreakdown, ciStatusBreakdown] = await Promise.all([
  getInsightsOverview(),
  getLanguageBreakdown(),
  getCiStatusBreakdown(),
]);
Any failure in the data pipeline — database connection timeout, schema drift, service dependency (getDomainDashboard(), getSyncStatus()) — would throw an unhandled exception, causing Next.js to return a 500 with the generic error boundary.

​
Why the stats page worked

The /stats page wraps its data fetching in try/catch and gracefully degrades: 
try {
  const rawStats = await getUserStats(user.id);
  stats = { ... };
} catch (err) {
  error = err instanceof Error ? err.message : 'Failed to load stats';
}
This pattern was missing from all 9 insights pages.

​
The fix

  1. Added try/catch to every insights page — each page now gracefully handles data fetch failures, rendering an error alert instead of crashing.
  2. Created error.tsx for the insights route segment — a dedicated error boundary that catches any uncaught errors within the insights layout and provides retry/home navigation.
  3. Shared error UI components — InsightsErrorAlert provides consistent error presentation across all pages.

​
Design Overhaul

​
What was wrong

The insights section used a completely generic design:
  • bg-gray-50 dark:bg-gray-900 backgrounds (light-mode-first)
  • Plain white Card components with no visual hierarchy
  • No gradient accents, no glassmorphism, no brand colors
  • Generic sidebar with plain text links (no icons, no hover states)
  • Top nav used basic white background with default border styling
This was dramatically at odds with:
  • Landing page: Space/satellite theme with animated starfield canvas, gradient text (from-sky-400 to-cyan-400), glassmorphic cards (backdrop-blur-md), cyan/blue accent colors
  • SO1 Console: Mars “Hab Visor” aesthetic with deep navy backgrounds (#0A0E27), electric blue accents (#3B82F6), glassmorphism panels, CRT/terminal typography
  • Atlas docs: Mars red (#CD5C5C) primary, forced dark mode, gradient code block headers

​
The redesign

Layout (layout.tsx):
  • Deep space background (#080c1a) with ambient gradient orbs (blue/cyan/indigo)
  • Top nav: Semi-transparent with backdrop-blur-xl, gradient “Insights” badge
  • Sidebar: Icons from Lucide for each nav item, hover states with bg-white/[0.04] and cyan icon color transitions
  • Monospace email display for system-like feel
Stat cards (InsightStat):
  • Glassmorphic gradient backgrounds (from-slate-900/80 via-slate-800/60 to-slate-900/80)
  • Color-coded accent borders (cyan, emerald, amber, red, blue, purple)
  • Hover elevation (-translate-y-0.5) with colored shadows
  • Uppercase tracking-wider labels matching SO1 console typography
Charts (Recharts):
  • Dark tooltip styling (#1e293b background, white/10 border)
  • Grid lines at rgba(255,255,255,0.04) for minimal interference
  • Donut chart variant for CI status (inner radius for modern feel)
  • Axis ticks in #64748b / #94a3b8 for readability on dark
Glass panels:
  • Shared GlassPanel wrapper for all table/chart containers
  • Consistent border-white/[0.06] with gradient background and backdrop-blur-md
Error handling:
  • Insights-specific error.tsx with styled retry/home buttons
  • Cyan-accent retry button, slate-accent home button
  • Error ID and digest display in slate-800 code block

​
Shared UI Component Library

Created src/modules/insights/components/insights-ui.tsx with:
ComponentPurpose
InsightsPageHeaderGradient title, description, optional export button
InsightStatGlassmorphic stat card with accent color system
GlassPanelContainer wrapper for tables/charts/dashboards
InsightsErrorAlertConsistent error alert with icon
AlertBannerSeverity-aware alert banner (critical/warn/info)
InsightBadgeInline status badge with color variants
SectionHeadingSub-section title with optional description
DeptTagDepartment tag chip for workforce page

​
Files Changed

​
family-hub

  • src/app/insights/layout.tsx — Complete redesign with space aesthetic
  • src/app/insights/page.tsx — Error handling + shared UI components
  • src/app/insights/error.tsx — New error boundary
  • src/app/insights/domains/page.tsx — Error handling + redesign
  • src/app/insights/github/page.tsx — Error handling + redesign
  • src/app/insights/contributors/page.tsx — Error handling + redesign
  • src/app/insights/analytics/page.tsx — Error handling + redesign
  • src/app/insights/security/page.tsx — Error handling + redesign
  • src/app/insights/activity/page.tsx — Error handling + redesign
  • src/app/insights/governance/page.tsx — Error handling + redesign
  • src/app/insights/workforce/page.tsx — Error handling + redesign
  • src/modules/insights/components/insights-ui.tsx — New shared UI library
  • src/modules/insights/components/overview-charts.tsx — Dark theme charts
  • src/modules/insights/components/export-button.tsx — Dark theme button

​
Impact

  • Availability: The 500 error is resolved — insights now degrades gracefully.
  • Brand consistency: Insights now matches the Devarno/SO1 design language.
  • Maintainability: Shared UI component library reduces duplication across 9 pages.
  • User experience: Premium feel with glassmorphism, color-coded accents, and smooth hover interactions.

​
Campaign Trails

  • Design system unification: The insights-ui.tsx pattern could be promoted to a shared design library for all family-hub authenticated pages (stats, admin, settings).
  • Global error handling: Consider adding try/catch + graceful degradation to all server component pages in family-hub, not just insights.
  • Dark mode first: Family-hub should default to dark mode to match the landing page and SO1 console — currently uses system preference.