DemoBuy

Management Screens

Last updated on 2026-05-31

The management section provides operational tools for running your SaaS business. These 8 screens handle subscription lifecycle, customer relationships, billing, alert monitoring, report generation, and third-party integrations. All screens live under the /manage/ route prefix within the (dashboard) route group.

Subscriptions

Route: /manage/subscriptions

Manage active, trialing, and past-due subscriptions with filtering, status summary, and plan distribution analysis.

  • Status summary cards -- four StatCard components showing counts for Active, Trialing, Past Due, and Canceled subscriptions with trend percentages vs last month
  • Plan distribution donut chart -- PieChart showing subscriber distribution across pricing tiers (Starter, Growth, Enterprise, Custom) with plan-specific colors
  • Subscription table -- filterable data table showing customer name, company, plan, MRR, status badge, start date, and period end date; columns are progressively hidden on smaller screens
  • Filter controls -- two Select dropdowns for filtering by plan tier and subscription status
  • Row click interaction -- clicking a subscription row triggers a toast notification (placeholder for detail view)

Key Components

import { StatCard } from "@/components/shared/stat-card"
import { StatusBadge } from "@/components/shared/status-badge"

StatCard, PieChart (donut), Table, Select, StatusBadge. Uses subscriptions, pricingPlans from seed data.

Layout

┌──────────┬──────────┬──────────┬──────────┐
│ Active   │ Trialing │ Past Due │ Canceled │
├──────────┴──────────┼──────────┴──────────┤
│ Plan Distribution   │ Subscription Table  │
│ (donut chart)       │ (filterable)        │
│ 1/3 width           │ 2/3 width           │
└─────────────────────┴─────────────────────┘

Pricing Plans

Route: /manage/plans

Manage subscription tiers with plan cards, subscriber analytics, revenue breakdown, and a feature comparison matrix.

  • Pricing tier cards -- four plan cards (Starter, Growth, Enterprise, Custom) each showing name, price with billing period, description, subscriber count, feature list (up to 5 shown with "+N more" overflow), colored top border, "Popular" badge on featured plan, and an "Edit Plan" button
  • Create Plan button -- action button in the page header for creating new plans
  • Subscribers per plan bar chart -- bar chart with plan-specific colors showing subscriber count per tier
  • Revenue per plan donut chart -- donut pie chart showing MRR contribution by pricing tier
  • Feature comparison matrix table -- full-width table comparing features across all plan tiers with checkmarks, X marks, or text values per plan column

Key Components

Card (with colored border-top), Badge, Button, BarChart, PieChart (donut), Table with Check/X icons. Uses pricingPlans, featureComparison from seed data.

Customer Management

Route: /manage/customers

Searchable, filterable customer list with health score indicators, pagination, and export capabilities.

  • Search input -- full-text search across customer name, email, and company with a search icon
  • Filter controls -- Select dropdowns for plan tier and customer status (active, trial, past_due, churned, paused)
  • Export and Add buttons -- page header actions for exporting customer data (CSV) and adding new customers
  • Customer table -- paginated data table showing avatar with name/email, company, plan, MRR, status badge, health score progress bar, and join date; columns progressively hidden on smaller screens
  • Health score progress bars -- inline progress bars with color-coded values (green >= 80, amber >= 60, red < 60)
  • Pagination controls -- "Previous" and "Next" buttons with "Showing X-Y of Z customers" counter; 10 items per page

Key Components

Input (with search icon), Select, Avatar, StatusBadge, Progress, Table, Button (pagination). Uses customers from seed data.

Customer Detail

Route: /manage/customers/[id]

Single-customer deep dive with profile header, MRR contribution trend, health score, activity log, and action buttons.

  • Profile header card -- avatar, name, email, company, plan badge, status badge, and monthly spend displayed in a horizontal layout
  • MRR contribution line chart -- 6-month line chart showing the customer's MRR trend over time with dot markers
  • Health score card -- large numeric health score display with label (Excellent/Good/Fair/At Risk), progress bar, and subscription timeline (join date, current plan, monthly spend, tenure in months)
  • Activity log -- chronological list of recent customer actions (logins, dashboard views, report exports, plan upgrades, support contacts, payments) with type-specific icons and relative timestamps
  • Action buttons -- three action buttons: Upgrade Plan (primary), Pause Subscription (outline), Cancel Subscription (destructive)
  • Back button -- page header action to navigate back to the customer list
  • Dynamic routing -- uses Next.js dynamic [id] parameter to look up the customer from seed data

Key Components

Avatar, Badge, StatusBadge, LineChart, Progress, Card, Button (primary/outline/destructive). Uses customers from seed data with inline activity log data.

Invoices

Route: /manage/invoices

Track payments, pending invoices, and failed transactions with search, date filtering, and bulk actions.

  • Failed payments alert -- prominent red-bordered card at the top when failed invoices exist, showing count, customer names, total amount, and a "Retry All" button
  • Search and date filter -- search input for invoice number/customer name/company, date range inputs (from/to), and a "Bulk Actions" dropdown menu with Mark as Paid, Send Reminder, and Export CSV options
  • Invoice table -- data table showing invoice number (monospace), customer name/company, amount, status badge, payment method, issued date, and paid date; columns progressively hidden on smaller screens
  • Row click interaction -- clicking an invoice row triggers a toast notification (placeholder for invoice detail)

Key Components

Input (search and date), DropdownMenu, StatusBadge, Table. Uses invoices from seed data.

Integrations

Route: /manage/integrations

Connect third-party tools and services with category filtering, connection status, and sync information.

  • Category tabs -- tab navigation to filter integrations by category: All, Billing, Analytics, CRM, Notifications, Automation
  • Integration cards -- responsive grid (1-4 columns) of cards, each showing an icon, integration name, status badge (connected/disconnected/error), description, last sync time (relative), sync frequency, and action buttons
  • Connect/Disconnect buttons -- conditional button text based on connection status
  • Docs link button -- ghost icon button linking to integration documentation

Key Components

Tabs (TabsList, TabsTrigger, TabsContent), Card, StatusBadge, Button. Uses integrations from seed data.

Integration Categories

Category Examples
Billing Stripe, Chargebee, Recurly
Analytics Mixpanel, Amplitude, Segment
CRM Salesforce, HubSpot
Notifications Slack, Email
Automation Zapier, Webhooks

Reports

Route: /manage/reports

Generate, schedule, and download reports with template selection, date range control, and format options.

  • Date range and format selector -- date inputs for from/to range and a button group to select output format (PDF, CSV, PNG)
  • Generate Report button -- page header action for ad-hoc report generation
  • Report templates grid -- four template cards, each showing an icon, template name, description, estimated page count, section badges (up to 3 shown with "+N" overflow), and a "Generate" button
  • Saved reports table -- data table showing report name, date range, format badge, creation date, created by, status badge, and action buttons (Download and Delete)

Key Components

Input (date), Button (toggle group for format), Card (templates), Badge, StatusBadge, Table, Button (icon actions). Uses reportTemplates, savedReports from seed data.

Alerts & Monitoring

Route: /manage/alerts

Monitor key metrics and configure alert thresholds with active alert tracking and customizable alert rules.

  • Tab navigation -- two tabs: "Active Alerts" and "Alert Rules"
  • Active alerts table -- data table showing severity badge (critical/warning/info), alert title with message preview, metric name, threshold value, current value, triggered timestamp, and status badge (active/resolved/snoozed)
  • Alert rules card grid -- responsive grid (1-3 columns) of cards, each showing rule name, condition description (e.g., "Drops below $100,000"), metric name, enabled/disabled switch toggle, notification channel badges with icons (email, Slack, SMS, webhook), and an "Edit Rule" button
  • Severity levels -- critical (error badge), warning (warning badge), info (info badge), each with distinct visual treatment
  • Channel icons -- Mail for email, MessageSquare for Slack, Webhook for webhook, Bell for SMS/default

Key Components

Tabs, Table, Card, Switch, Badge (with channel icons), StatusBadge. Uses activeAlerts, alertRules from seed data.

Next Steps

Previous

Analytics Screens

Next

Settings Screens