Home Dashboard 01

"use client";

import { cn } from "cn";
import * as React from "react";

import { ContributionsCard } from "@/components/blocks/contributions-card-01/components/contributions-card";
import { EarningsChartCard } from "@/components/blocks/earnings-chart-card-01/components/earnings-chart-card";
import { CustomersTable } from "@/components/blocks/home-dashboard-01/components/home-dashboard-customers-table";
import {
  activityDays,
  activityStats,
  earningsPeriods,
  kpiStats,
  revenuePeriods,
} from "@/components/blocks/home-dashboard-01/components/home-dashboard-data";
import { HomeDashboardHiresCard } from "@/components/blocks/home-dashboard-01/components/home-dashboard-hires-card";
import { RevenueChartCard } from "@/components/blocks/revenue-chart-card-01/components/revenue-chart-card";
import { StatCards } from "@/components/blocks/stat-cards-01/components/stat-cards";
import { Reveal } from "@/components/ui/reveal";

// 500ms, 12px rise with a 3px blur clearing, each row 40ms after the last.
function Row({
  step,
  className,
  children,
}: {
  step: number;
  className?: string;
  children: React.ReactNode;
}) {
  return (
    <Reveal index={step} blur className="min-w-0">
      <div className={className}>{children}</div>
    </Reveal>
  );
}

/**
 * The body of a home dashboard: new hires, earnings, revenue, activity, four
 * KPI cards and a customer table. It carries no navigation or heading, so it
 * drops into an app shell or any page. Pass `popupClassName` (a theme scope)
 * so menus and tooltips rendered outside the block pick up the same tokens.
 */
export function HomeDashboard({
  className,
  popupClassName,
}: {
  className?: string;
  popupClassName?: string;
}) {
  return (
    <div className={cn("@container flex min-w-0 flex-col gap-4", className)}>
      <Row step={0} className="grid min-w-0 gap-4 @4xl:grid-cols-[453fr_673fr]">
        <HomeDashboardHiresCard popupClassName={popupClassName} />
        <EarningsChartCard title="Earned so far" periods={earningsPeriods} />
      </Row>
      <Row step={1} className="grid min-w-0 gap-4 @4xl:grid-cols-2">
        <RevenueChartCard
          title="Revenue"
          periods={revenuePeriods}
          compare={false}
          className="h-[335px]"
        />
        <ContributionsCard
          title="Contributions this year"
          weeks={37}
          data={activityDays}
          change="+12.6%"
          palette="purple"
          stats={activityStats}
        />
      </Row>
      <Row step={2}>
        <StatCards stats={kpiStats} popupClassName={popupClassName} />
      </Row>
      <Row step={3}>
        <CustomersTable popupClassName={popupClassName} />
      </Row>
    </div>
  );
}