Dashboard & Analytics Views
Relevant source files
The following files were used as context for generating this wiki page:
The Dashboard and Analytics views in KudosWall serve as the primary management interface for SaaS users to collect, moderate, and analyze social proof. The dashboard provides a high-level overview of workspace activity, while the analytics module offers granular performance tracking, conversion data, and reporting capabilities. These views are built using Next.js 16, leveraging React Server Components for initial data fetching and client-side React Query for real-time interactivity.
Sources: README.md:16-30, apps/web/src/app/dashboard/dashboard.tsx:1-50, AGENTS.md:57-65
Dashboard Architecture
The dashboard is structured around a DashboardShell which acts as a layout provider for all sub-pages. It manages global states such as the active workspace, user session, and navigation. Data is synchronized between the server and client using a polling mechanism to ensure real-time updates for new testimonial submissions.
Core Components and Layout
- DashboardShell: The main wrapper providing navigation, top bar, and workspace context.
Sources: [apps/web/src/app/dashboard/dashboard.tsx:430-610](https://github.com/alexgutscher26/Kudoswall/blob/fa95ed7187f87fc9a0da1adf0f497e2824bacf97/apps/web/src/app/dashboard/dashboard.tsx#L430-L610) - Sidebar & Mobile Drawer: Handles navigation across modules like Testimonials, Analytics, and Settings.
Sources: [apps/web/src/app/dashboard/dashboard.tsx:220-310](https://github.com/alexgutscher26/Kudoswall/blob/fa95ed7187f87fc9a0da1adf0f497e2824bacf97/apps/web/src/app/dashboard/dashboard.tsx#L220-L310) - WorkspaceSwitcher: Allows users to toggle between different projects or organizations.
Sources: [apps/web/src/app/dashboard/dashboard.tsx:155-165](https://github.com/alexgutscher26/Kudoswall/blob/fa95ed7187f87fc9a0da1adf0f497e2824bacf97/apps/web/src/app/dashboard/dashboard.tsx#L155-L165) - Overview: The default landing view displaying core stats and an onboarding checklist for new users.
Sources: [apps/web/src/app/dashboard/Overview.tsx:21-85](https://github.com/alexgutscher26/Kudoswall/blob/fa95ed7187f87fc9a0da1adf0f497e2824bacf97/apps/web/src/app/dashboard/Overview.tsx#L21-L85)
Dashboard Data Flow
The dashboard uses a hybrid data fetching approach. Initial data is passed from the server, while the DashboardPoller component manages a tRPC refetchInterval of 5000ms to keep the UI in sync with the database.
Analytics and Performance Tracking
The analytics module provides deep insights into how testimonial widgets are performing on external sites. This feature is gated by plan tiers, requiring a "Pro" plan for full access.
Key Metrics Tracked
The system tracks several performance indicators to demonstrate the ROI of social proof:
| Metric | Description | Data Source |
|---|---|---|
| Total Views | Impressions of the testimonial widget across all embedded sites. | trpc.analytics.getOverview |
| Unique Visitors | Count of distinct users interacting with the widgets. | trpc.analytics.getOverview |
| Conversion Rate | The ratio of visitors who take action (e.g., clicking the widget) vs total views. | trpc.analytics.getOverview |
| Widget CTR | Click-Through Rate for specific active widgets. | trpc.analytics.getWidgetPerformance |
Sources: apps/web/src/app/dashboard/analytics/analytics-page.tsx:170-220, apps/web/src/app/dashboard/Overview.tsx:25-50
Performance Charting
The PerformanceChart component renders an SVG-based line chart to visualize widget views over time. It supports multiple timeframes, including 7 days, 30 days, 90 days, and "All Time".
Data Export System
Users with appropriate permissions can export their analytics data to CSV. The frontend handles this by fetching raw data via trpcClient.analytics.getExportData and generating a downloadable Blob in the browser.
- Endpoint:
trpc.analytics.getExportData - Format:
text/csv;charset=utf-8; - Permission Check:
permissions?.features?.csvExportmust be true.
Sources: apps/web/src/app/dashboard/analytics/analytics-page.tsx:142-185
Feature Gating and Plan Enforcement
The dashboard dynamically adjusts its interface based on the user's subscription plan. Certain navigation items and stat cards are visually locked or disabled for free-tier users.
Navigation and Feature Locking
In dashboard.tsx, the NAV_ITEMS array defines which routes are associated with specific features. The isFeatureLocked function checks the user's plan against the required feature (e.g., the analytics feature requires a plan other than free).
// apps/web/src/app/dashboard/dashboard.tsx:177-181
const isFeatureLocked = (feature?: string) => {
if (!feature) return false;
if (feature === "analytics" && (!plan || plan === "free")) return true;
return false;
};
Sources: apps/web/src/app/dashboard/dashboard.tsx:177-181, apps/web/src/app/dashboard/Overview.tsx:21-25
Workspace Management
A central feature of the dashboard is the ability to manage multiple workspaces, which is critical for agencies. The WorkspaceSwitcher allows users to transition between different organizational contexts, which updates the workspaceId search parameter in the URL and re-fetches all dashboard data.
Workspace Context Flow
- Selection: User selects a workspace from the
WorkspaceSwitcher. - State Update:
activeWorkspaceIdis updated in theWorkspaceProvider. - Persistence: The new ID is saved in a cookie named
workspace-id. - Navigation: The router pushes a new URL with the updated
workspaceIdquery parameter.
Sources: apps/web/src/app/dashboard/dashboard.tsx:490-520, README.md:120-130
Conclusion
The Dashboard & Analytics views provide the operational hub for KudosWall users. By combining real-time testimonial management via the Overview and Testimonials panels with data-driven insights through the Analytics page, the system allows founders and agencies to validate the impact of their social proof. The architecture emphasizes performance through edge-loaded widgets and selective data polling, ensuring a responsive management experience even as the volume of testimonials scales.
Sources: README.md:40-50, apps/web/src/app/dashboard/Overview.tsx:60-95