Performance Report

"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 {
  type ComparisonMetric,
  type ComparisonRecord,
  shiftComparisonDate,
} from "@/components/premium/dashboard/period-comparison-model";
import { PeriodComparisonReport } from "@/components/premium/dashboard/period-comparison-report";

const metrics: ComparisonMetric[] = [
  { id: "revenue", label: "Collected revenue", format: { style: "currency" } },
  { id: "work", label: "Delivered work" },
  {
    id: "reply",
    label: "First reply time",
    aggregation: "average",
    increaseIsPositive: false,
    format: { decimals: 1, suffix: " min" },
  },
];
const records: ComparisonRecord[] = Array.from({ length: 730 }, (_, index) => {
  const date = shiftComparisonDate("2024-10-01", index);
  const weekday = new Date(`${date}T00:00:00Z`).getUTCDay();
  const weekend = weekday === 0 || weekday === 6;
  return {
    date,
    values: {
      revenue: Math.round(
        (weekend ? 680 : 1650) +
          index * 1.4 +
          Math.sin(index * 0.62) * 260 +
          Math.cos(index * 0.13) * 110,
      ),
      work: Math.round(
        (weekend ? 18 : 48) + index * 0.025 + Math.sin(index * 0.7) * 8,
      ),
      reply:
        Math.round(
          (31 -
            index * 0.011 +
            Math.sin(index * 0.41) * 3 +
            (weekend ? 4 : 0)) *
            10,
        ) / 10,
    },
  };
});
export function PeriodComparisonReportPreview() {
  return (
    <div className="w-full max-w-7xl p-4 sm:p-6">
      <PeriodComparisonReport
        metrics={metrics}
        records={records}
        asOf="2026-09-30"
      />
      <p className="mt-4 text-xs text-muted-foreground">
        Sample workspace · Daily observations through Sep 30, 2026
      </p>
    </div>
  );
}

"use client";

import { shiftComparisonDate } from "@/components/premium/dashboard/period-comparison-model";
import { TeamPerformance } from "@/components/premium/dashboard/team-performance";
import type {
  PerformanceMember,
  TeamPerformanceRecord,
} from "@/components/premium/dashboard/team-performance-model";

const members: PerformanceMember[] = [
  {
    id: "june",
    name: "June Park",
    role: "Service specialist",
    team: "Customer care",
  },
  {
    id: "elliot",
    name: "Elliot Reed",
    role: "Team lead",
    team: "Customer care",
  },
  {
    id: "tess",
    name: "Tess Navarro",
    role: "Service specialist",
    team: "Customer care",
  },
  {
    id: "nico",
    name: "Nico Bell",
    role: "Operations specialist",
    team: "Operations",
  },
  {
    id: "robin",
    name: "Robin Shah",
    role: "Account specialist",
    team: "Operations",
  },
  {
    id: "marin",
    name: "Marin Cole",
    role: "Operations lead",
    team: "Operations",
  },
];
const records: TeamPerformanceRecord[] = members.flatMap(
  (member, memberIndex) =>
    Array.from({ length: 56 }, (_, index) => {
      const date = shiftComparisonDate("2026-08-06", index);
      const day = new Date(`${date}T00:00:00Z`).getUTCDay();
      const weekend = day === 0 || day === 6;
      const delivered = weekend
        ? 0
        : Math.max(
            0,
            Math.round(
              9 +
                memberIndex * 1.2 +
                Math.sin(index * 0.7 + memberIndex) * 3 +
                index * 0.025,
            ),
          );
      const firstReplies = weekend
        ? 0
        : Math.round(delivered * (0.8 + memberIndex * 0.04));
      const replyMinutes =
        Math.round(
          firstReplies *
            (17 +
              memberIndex * 2.2 +
              Math.sin(index * 0.5 + memberIndex) * 3 -
              index * 0.04) *
            10,
        ) / 10;
      const onTimeReplies = Math.max(
        0,
        firstReplies -
          (index % 11 === memberIndex ? 2 : 0) -
          (memberIndex === 4 && index % 3 === 0 ? 1 : 0),
      );
      const reviewed = weekend ? 0 : Math.max(0, delivered - 2);
      const passedReviews = Math.max(
        0,
        reviewed - (index % 13 === memberIndex ? 1 : 0),
      );
      return {
        date,
        memberId: member.id,
        delivered,
        firstReplies,
        replyMinutes,
        onTimeReplies,
        reviewed,
        passedReviews,
      };
    }),
);
export function TeamPerformancePreview() {
  return (
    <div className="w-full max-w-7xl p-4 sm:p-6">
      <TeamPerformance members={members} records={records} asOf="2026-09-30" />
      <p className="mt-4 text-xs text-muted-foreground">
        Sample workspace · Observations through Sep 30, 2026
      </p>
    </div>
  );
}