KPI Overview

"use client";

import { ArrowDownToLine, Landmark, Wallet } from "lucide-react";
import { KpiTrendCards } from "@/components/premium/dashboard/kpi-trend-cards";

const BALANCES = [
  43180, 45140, 43220, 43480, 46240, 45910, 44620, 46410, 48260, 46940, 47210,
  50180, 49810, 48760, 50620, 52110, 51320, 51980, 54060, 54410, 53740, 55190,
  56540, 56080, 56620, 57910, 58120, 58210, 58305, 58432.76,
];

export function KpiTrendCardsPreview() {
  return (
    <div className="w-full max-w-screen-2xl p-4 sm:p-6">
      <KpiTrendCards
        featured={{
          id: "balance",
          label: "Cash balance",
          icon: <Wallet />,
          value: 58432.76,
          format: { style: "currency", decimals: 2 },
          note: "+$15,252.76 · 35.32% this month",
          points: BALANCES.map((value, index) => ({
            value,
            label: `Sep ${index + 1}`,
          })),
        }}
        metrics={[
          {
            id: "reserved",
            label: "Reserved funds",
            icon: <Landmark />,
            value: 18250.4,
            format: { style: "currency", decimals: 2 },
            note: "Assigned to 4 budgets",
          },
          {
            id: "payouts",
            label: "Pending payouts",
            icon: <ArrowDownToLine />,
            value: 842.35,
            format: { style: "currency", decimals: 2 },
            note: "Arriving in 2 business days",
          },
        ]}
      />
    </div>
  );
}

"use client";

import { useState } from "react";
import { Button } from "@/components/motion/button";
import { KpiOverview } from "@/components/premium/dashboard/kpi-overview";
import { PerformanceReport } from "@/components/premium/dashboard/performance-report";
import { ReportingToolbar } from "@/components/premium/dashboard/reporting-toolbar";
import {
  buildReportingDemo,
  exportReportingCsv,
  initialReportingFilters,
  reportingPresets,
  reportingTeams,
} from "./dashboard-reporting-data";

export function KpiOverviewPreview() {
  return (
    <div className="w-full max-w-7xl p-4 sm:p-6">
      <KpiOverview
        comparisonLabel="over last month"
        metrics={[
          {
            id: "revenue",
            label: "Recurring revenue",
            value: 42680,
            previous: 39010,
            format: { style: "currency" },
            history: [46, 58, 50, 68, 94, 61, 65],
            description:
              "Monthly revenue from active subscriptions, excluding one-time charges.",
          },
          {
            id: "orders",
            label: "Paid accounts",
            value: 1460,
            previous: 1318,
            unit: "teams",
            history: [38, 66, 47, 82, 100, 59, 63],
            description:
              "Teams with an active paid subscription at the end of the month.",
          },
          {
            id: "customers",
            label: "New trials",
            value: 324,
            previous: 287,
            unit: "this month",
            history: [50, 72, 58, 90, 86, 53, 61],
            description:
              "Teams that started their first product trial during the month.",
          },
          {
            id: "conversion",
            label: "Trial conversion",
            value: 18.6,
            previous: 17.2,
            format: { style: "percent", decimals: 1 },
            history: [58, 73, 64, 86, 98, 71, 68],
            description:
              "Completed trials that became paid subscriptions. Changes are shown in percentage points.",
          },
        ]}
      />
    </div>
  );
}

export function PerformanceReportPreview() {
  const [filters, setFilters] = useState(initialReportingFilters);
  const [exported, setExported] = useState(false);
  const { metrics } = buildReportingDemo(filters);
  return (
    <div className="w-full max-w-7xl p-4 sm:p-6">
      <PerformanceReport
        metrics={metrics}
        title="Overview"
        periodLabel="A closer look at your team's daily activity."
        compare={filters.compare}
        controls={
          <ReportingToolbar
            value={filters}
            onValueChange={(next) => {
              setFilters(next);
              setExported(false);
            }}
            teams={reportingTeams}
            presets={reportingPresets}
            minDate="2026-04-01"
            maxDate="2026-09-30"
            onExport={() => {
              exportReportingCsv(filters);
              setExported(true);
            }}
          />
        }
      />
      <p aria-live="polite" className="mt-3 text-xs text-muted-foreground">
        {exported
          ? "CSV exported for the selected team and period."
          : "Sample workspace · April–September 2026"}
      </p>
    </div>
  );
}

export function ReportingStatesPreview() {
  const [loading, setLoading] = useState(true);
  return (
    <div className="w-full max-w-4xl space-y-6 p-4 sm:p-6">
      <Button
        variant="outline"
        onClick={() => setLoading(!loading)}
        className="h-9 rounded-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
      >
        {loading ? "Show empty state" : "Show loading state"}
      </Button>
      <KpiOverview metrics={[]} loading={loading} />
      <PerformanceReport metrics={[]} loading={loading} />
    </div>
  );
}

"use client";

import { useState } from "react";
import {
  KpiGaugeCards,
  type KpiGaugeMetric,
} from "@/components/premium/dashboard/kpi-gauge-cards";

const SAMPLE_METRICS: readonly KpiGaugeMetric[] = [
  {
    id: "jobs",
    label: "Processed jobs",
    value: 864,
    unit: "per day",
    note: "Daily target: 1,200",
    gauge: { value: 72, label: "Daily processing target", tone: "success" },
  },
  {
    id: "seats",
    label: "Active seats",
    value: 38,
    unit: "of 50",
    note: "Plan capacity",
    gauge: { value: 76, label: "Seat utilization", tone: "primary" },
  },
  {
    id: "automation",
    label: "Automation rate",
    value: 84.2,
    format: { style: "percent", decimals: 1 },
    note: "Quarterly target: 90%",
    gauge: {
      value: 94,
      label: "Automation target attainment",
      tone: "accent",
    },
  },
];

export function KpiGaugeCardsPreview() {
  const [metrics, setMetrics] = useState(SAMPLE_METRICS);

  return (
    <div className="w-full max-w-6xl p-4 sm:p-6">
      <KpiGaugeCards
        metrics={metrics.map((metric) => ({
          ...metric,
          actions: [
            {
              id: "refresh",
              label: "Update metric",
              onSelect: () =>
                setMetrics((current) =>
                  current.map((item) => {
                    if (item.id !== metric.id) return item;
                    const target =
                      item.id === "jobs" ? 1200 : item.id === "seats" ? 50 : 90;
                    const increment =
                      item.id === "jobs" ? 24 : item.id === "seats" ? 1 : 0.2;
                    const value = Math.min(target, item.value + increment);
                    return {
                      ...item,
                      value,
                      gauge: { ...item.gauge, value: (value / target) * 100 },
                    };
                  }),
                ),
            },
            {
              id: "reset",
              label: "Restore metric",
              onSelect: () =>
                setMetrics((current) =>
                  current.map((item, index) =>
                    item.id === metric.id
                      ? (SAMPLE_METRICS[index] ?? item)
                      : item,
                  ),
                ),
            },
          ],
        }))}
      />
    </div>
  );
}

"use client";

import { CheckCheck, Clock3, Inbox, ThumbsUp } from "lucide-react";
import { useState } from "react";
import {
  KpiSupportCards,
  type KpiSupportMetric,
} from "@/components/premium/dashboard/kpi-support-cards";

const SAMPLE_METRICS: readonly KpiSupportMetric[] = [
  {
    id: "tickets",
    label: "Inbox volume",
    icon: <Inbox />,
    value: 2186,
    change: 5.4,
  },
  {
    id: "resolution",
    label: "Resolved today",
    icon: <CheckCheck />,
    value: 312,
    change: 8.6,
  },
  {
    id: "sla",
    label: "On-time replies",
    icon: <Clock3 />,
    value: 94,
    format: { style: "percent" },
    change: -0.7,
  },
  {
    id: "csat",
    label: "Helpfulness",
    icon: <ThumbsUp />,
    value: 4.7,
    format: { decimals: 1 },
    unit: "/ 5",
    change: 1.2,
  },
];

export function KpiSupportCardsPreview() {
  const [metrics, setMetrics] = useState(SAMPLE_METRICS);

  return (
    <div className="w-full max-w-screen-2xl p-4 sm:p-5">
      <KpiSupportCards
        comparisonLabel="month over month"
        metrics={metrics.map((metric, index) => ({
          ...metric,
          actions: [
            {
              id: "refresh",
              label: "Update metric",
              onSelect: () =>
                setMetrics((current) =>
                  current.map((item) =>
                    item.id === metric.id
                      ? {
                          ...item,
                          value:
                            item.id === "sla"
                              ? Math.min(100, item.value + 1)
                              : item.id === "csat"
                                ? Math.min(5, item.value + 0.1)
                                : item.value + 12,
                        }
                      : item,
                  ),
                ),
            },
            {
              id: "reset",
              label: "Restore metric",
              onSelect: () =>
                setMetrics((current) =>
                  current.map((item) =>
                    item.id === metric.id
                      ? (SAMPLE_METRICS[index] ?? item)
                      : item,
                  ),
                ),
            },
          ],
        }))}
      />
    </div>
  );
}

"use client";

import { BriefcaseBusiness } from "lucide-react";
import { KpiSummaryCard } from "@/components/premium/dashboard/kpi-summary-card";

export function KpiSummaryCardPreview() {
  return (
    <div className="w-full max-w-4xl p-4 sm:p-6">
      <KpiSummaryCard
        title="Budget overview"
        icon={<BriefcaseBusiness />}
        updatedAt={{
          label: "Last reviewed Sep 30, 2026",
          dateTime: "2026-09-30",
        }}
        metrics={[
          {
            id: "available",
            label: "Available budget",
            value: 84750.25,
            limit: 120000,
            format: { style: "currency", decimals: 2 },
            description:
              "Budget remaining after approved purchases and commitments.",
          },
          {
            id: "committed",
            label: "Committed spend",
            value: 35249.75,
            format: { style: "currency", decimals: 2 },
            description:
              "Approved spending already allocated from the current budget.",
          },
          {
            id: "period",
            label: "Budget period",
            value: 12,
            unit: "months",
            description: "The duration covered by this budget allocation.",
          },
        ]}
      />
    </div>
  );
}

"use client";

import {
  CalendarCheck,
  Repeat2,
  RotateCcw,
  UserRoundCheck,
} from "lucide-react";
import { KpiHeaderCards } from "@/components/premium/dashboard/kpi-header-cards";

export function KpiHeaderCardsPreview() {
  return (
    <div className="w-full max-w-7xl p-4 sm:p-6">
      <KpiHeaderCards
        metrics={[
          {
            id: "bookings",
            label: "Bookings",
            icon: <CalendarCheck />,
            value: 38460,
            previous: 34100,
            format: { style: "currency" },
          },
          {
            id: "renewals",
            label: "Renewals",
            icon: <Repeat2 />,
            value: 128,
            previous: 116,
          },
          {
            id: "refunds",
            label: "Refunds",
            icon: <RotateCcw />,
            value: 840,
            previous: 1020,
            format: { style: "currency" },
            increaseIsPositive: false,
          },
          {
            id: "retention",
            label: "Retention",
            icon: <UserRoundCheck />,
            value: 94.2,
            previous: 92.8,
            format: { style: "percent", decimals: 1 },
          },
        ]}
      />
    </div>
  );
}