Building the Executive Intelligence Dashboard: A Command Center for Project Mastery

From Data Silos to a Single Pane of Glass: The Executive Intelligence Dashboard

Every complex project generates a deluge of data: workflow executions, costs, quality metrics, knowledge artifacts, open actions, team personas, and repository statistics. The challenge isn't collecting this data; it's making sense of it, transforming it into actionable intelligence. This was the driving force behind our latest major feature: the Executive Intelligence Dashboard.

Our goal was ambitious: create a full-fledged "Overview" tab on our project detail page, a true command center that aggregates all project metrics into a rich, data-dense, and highly interactive interface. After an intense development sprint, I'm thrilled to report that the core feature is fully implemented, type-check-passing, and ready for visual QA.

Let's break down how we built this beast, the technical decisions we made, and a crucial lesson learned along the way.

The Brain: Server-Side Aggregation with tRPC and Prisma

At the heart of any powerful dashboard lies robust data aggregation. For our Executive Intelligence Dashboard, we needed to pull a diverse set of metrics from various corners of our application. This is where tRPC and Prisma truly shone.

We introduced a new projects.overview tRPC query in src/server/trpc/routers/projects.ts. This query serves as the single source of truth for all dashboard data. The magic here lies in its efficiency:

// Simplified pseudo-code for src/server/trpc/routers/projects.ts
export const projectsRouter = t.router({
  overview: t.procedure
    .input(z.object({ projectId: z.string() }))
    .query(async ({ input, ctx }) => {
      const { projectId } = input;

      // Execute ~21 parallel Prisma queries for different metric types
      const [
        heroMetrics,
        activityTimeline,
        workflowBreakdown,
        qualityStats,
        // ... many more
      ] = await Promise.all([
        // ctx.prisma.workflowRun.aggregate(...),
        // ctx.prisma.costLog.findMany(...),
        // ctx.prisma.actionItem.count(...),
        // ... and so on for all 21 data points
      ]);

      return {
        heroMetrics,
        activityTimeline,
        workflowBreakdown,
        qualityStats,
        // ... aggregated results
      };
    }),
});

By leveraging Promise.all, we could fire off approximately 21 distinct Prisma queries in parallel. This approach significantly reduced the total query time, ensuring that even with such a dense data requirement, the backend aggregation remains performant. We're computing everything from hero metrics (total spend, tokens, time saved), to 30-day activity timelines, detailed breakdowns of workflows, quality, knowledge, actions, and costs, all the way to persona usage and repository statistics.

The Eyes: Crafting a Rich Frontend Experience

With the aggregated data ready, the next step was to visualize it effectively. This dashboard isn't just a collection of charts; it's a carefully designed command center, each panel serving a specific intelligence purpose.

Here's a breakdown of the key components we built within the src/components/project/overview/ directory:

1. hero-metrics.tsx: The immediate snapshot. Six MetricCard components displaying crucial figures like "Total Spend," "Tokens Consumed," "Time Saved," "Workflows Executed," "Success Rate," and "Open Actions." Designed with a responsive grid that gracefully adapts from 6 columns down to 3, then 2 on smaller screens.

2. activity-pulse.tsx: Understanding trends. A 30-day stacked Recharts AreaChart visualizing the volume of workflows, discussions, fixes, and refactors over time. Custom gradient fills and tooltips provide an intuitive visual experience.

3. quality-shield.tsx: Project health at a glance. A two-column layout featuring ProgressBars for workflow, autofix, and refactor success rates, alongside StatBlocks detailing code health with a stacked pattern type bar.

4. knowledge-inventory.tsx: Our intellectual capital. A four-column StatBlock grid summarizing insights by type, axiom documents by authority, consolidation patterns, memory entries, published/draft blogs, enriched notes, and exported discussions.

5. cost-intelligence.tsx: Financial transparency. Two horizontal BarCharts break down costs by provider (using PROVIDER_COLORS) and by feature (using SERIES_COLORS), offering clear insights into spending patterns.

6. action-command.tsx: Task management hub. A BigCounter component shows the distribution of actions (Open, In Progress, Done), complemented by priority badges, category chips, and a list of the top 5 most recent open actions.

7. recent-workflows.tsx: Operational oversight. A compact table showcasing the last 5 workflows, complete with status badges, step progress, cost, and relative time.

8. persona-panel.tsx: The human element. Individual PersonaCard components displaying avatar/initials, level badges, usage counts, and a mini-progress bar for success rates (conditionally hidden if no personas are associated).

9. repo-overview.tsx: Codebase context. RepoCard components showing owner/repo names, file counts, pattern counts, and last sync times (also conditionally hidden if no repositories are linked).

All these components are orchestrated within src/components/project/project-overview.tsx, which uses trpc.projects.overview.useQuery to fetch data, complete with a 30-second refetchInterval for near real-time updates and a skeleton loading state for a smooth user experience. Finally, src/app/(dashboard)/dashboard/projects/[id]/page.tsx was modified to make "Overview" the default and first tab, enhancing navigation.

A Detour Through the Trenches: Lessons Learned from a UI Hiccup

Development isn't always smooth sailing. One particular hiccup stood out during the UI implementation, offering a valuable lesson in component library usage.

The Badge Component Conundrum

While styling various panels, I instinctively reached for variant="outline" and variant="secondary" on our Badge components, expecting them to behave like standard shadcn/ui components.

// What I tried (and failed with):
<Badge variant="outline">Open</Badge>
<Badge variant="secondary">In Progress</Badge>

The result? A TypeScript error.

Type '{ variant: "outline"; children: string; }' is not assignable to type 'IntrinsicAttributes & BadgeProps'.
  Property 'variant' does not exist on type '{ variant: "default" | "accent" | "success" | "warning" | "danger"; ... }'.

Lesson Learned: Our project's Badge component in src/components/ui/badge.tsx uses a custom CVA (Class Variance Authority) setup, not the default shadcn/ui variants. The available variants were limited to default, accent, success, warning, and danger.

Workaround & Takeaway: I quickly adapted, changing all Badge usages to variant="default" (or omitting the variant prop, which defaults to default) and then applying custom className overrides for specific styling needs.

This experience served as a sharp reminder: always check the source or documentation of custom UI components within your project. Assuming default behavior, even for well-known patterns like shadcn/ui, can lead to wasted time and unnecessary frustration. A quick peek at src/components/ui/badge.tsx would have saved me a few minutes of head-scratching.

The Road Ahead: Continuous Improvement

With the core dashboard now ready for visual QA, our immediate next steps involve:

1. Visual QA: Thoroughly review the dashboard in the browser to ensure all panels render correctly and are aesthetically pleasing.
2. User-Requested Enhancements:
   • Adding ? icons with hover tooltips to explain temperature sliders in workflow configurations.
   • Integrating other adjustable model settings (beyond temperature) into workflow step configurations.
3. Future Investigations: Exploring the possibility of recreating memory from Git commits, a fascinating challenge related to project intelligence.
4. Empty States: Designing and implementing user-friendly empty state illustrations for panels when a project has no data yet.

Conclusion

Building the Executive Intelligence Dashboard was a significant undertaking, transforming disparate data points into a unified, actionable overview. From the performance-driven server-side aggregation with tRPC and Prisma to the meticulously crafted frontend components using Recharts and a responsive design, every piece was designed to empower users with unparalleled insight into their projects.

This dashboard is more than just a feature; it's a testament to the power of thoughtful architecture and component-driven development, even when facing the occasional custom component surprise! We're excited to see how this command center helps our users navigate and master their projects with newfound clarity.

{
  "thingsDone": [
    "Implemented full Executive Intelligence Dashboard as new Overview tab.",
    "Created `projects.overview` tRPC query with parallel Prisma queries for aggregation.",
    "Developed 10 new frontend components for various dashboard panels (Hero Metrics, Activity Pulse, Quality Shield, Knowledge Inventory, Cost Intelligence, Action Command, Recent Workflows, Persona Panel, Repo Overview).",
    "Created `ProjectOverview` container component with tRPC data fetching, refetching, and skeleton loading.",
    "Modified project detail page to set 'Overview' as default tab."
  ],
  "pains": [
    "Encountered TypeScript error when using `variant='outline'` and `variant='secondary'` on custom `Badge` component.",
    "Discovered project's `Badge` component uses custom CVA setup, not `shadcn/ui` defaults."
  ],
  "successes": [
    "Successfully implemented complex server-side data aggregation using `Promise.all` for efficiency.",
    "Created a rich, data-dense, and responsive UI with Recharts and custom components.",
    "Achieved type-check-passing implementation across all new and modified files.",
    "Quickly identified and workaround custom component variant limitations."
  ],
  "techStack": [
    "Next.js",
    "tRPC",
    "Prisma",
    "TypeScript",
    "React",
    "Recharts",
    "lucide-react",
    "Tailwind CSS",
    "CVA (Class Variance Authority)"
  ]
}