Components

'use client';
import { useState, useEffect } from 'react';

export default function SaaSMetricsDashboard() {
  const [metrics, setMetrics] = useState({
    mrr: 48293, mrrChange: 12.4,
    churn: 1.8, churnChange: -0.3,
    nps: 72, npsChange: 5,
    arpu: 127, arpuChange: 3.2,
  });

  const cards = [
    { key: 'mrr', label: 'MRR', format: v => '

'use client';
import { useState } from 'react';

export default function UsageQuota() {
  const quotas = [
    { name: 'API Calls', used: 87420, limit: 100000, unit: 'calls' },
    { name: 'Storage', used: 47.3, limit: 50, unit: 'GB' },
    { name: 'Team Seats', used: 8, limit: 10, unit: 'users' },
    { name: 'Webhooks', used: 12, limit: 25, unit:

'use client';
import { useState, useEffect } from 'react';

export default function ResourceUsageBar() {
  const [resources, setResources] = useState([
    { name: 'CPU', value: 42, color: '#6366f1' },
    { name: 'Memory', value: 71, color: '#C9A84C' },
    { name: 'Storage', value: 58, color: '#4ade80' },
    { name: 'Bandwidth', value: 23, color

'use client';
import { useState } from 'react';

export default function PricingToggleCard() {
  const [annual, setAnnual] = useState(false);
  const monthly = 49;
  const price = annual ? Math.round(monthly * 0.75) : monthly;

  const features = ['Unlimited projects', 'AI assistant', 'Priority support', 'Custom domain', 'Analytics dashboard', 'API