SaaS Dashboard: Charts & Data Visualization

[Josephat-S]

What to build

The SaaS dashboard currently uses CSS bar charts. We should add a lightweight charting approach using pure CSS/SVG or integrate a small chart library. The dashboard should feel like a real analytics tool with line charts, donut charts, and sparklines.

Files to modify/create

• templates/saas/nextjs-monolith/app/page.tsx (Modify)
• templates/saas/nextjs-monolith/app/analytics/page.tsx (Modify)
• templates/saas/nextjs-monolith/components/BarChart.tsx (Create)
• templates/saas/nextjs-monolith/components/LineChart.tsx (Create)
• templates/saas/nextjs-monolith/components/DonutChart.tsx (Create)
• templates/saas/nextjs-monolith/components/SparkLine.tsx (Create)

Specs

• Charts must be pure CSS/SVG — no external chart library dependency (keeps bundle small and avoids version conflicts).
• Line chart: SVG polyline with gradient fill.
• Bar chart: CSS flexbox bars with labels.
• Donut chart: SVG circle with stroke-dasharray.
• Sparkline: Inline SVG for metric cards.

Acceptance criteria

• Dashboard page has at least one line chart and one donut chart.
• Analytics page has traffic chart (line), source breakdown (donut), and sparklines in metric cards.
• All charts respond to theme CSS variables (colors change with theme).
• No external charting library added to package.json.
• Charts are responsive (scale with container).
• npm run build passes.

Dependencies

• ISSUE-009 — Build Remaining Templates (School, SaaS, Blog) & Vite Arch #16