王明 / Food-Labeling-Management-Platform

  import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
  import type { DateRange } from "react-day-picker";

  import { Search, Download, Printer, Calendar as CalendarIcon, BarChart3, LineChart, ArrowUpRight, RefreshCw, FileText } from "lucide-react";

  import { Button } from "../ui/button";
  import { Input } from "../ui/input";

  import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../ui/table";
  import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../ui/select";
  import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover";

  import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "../ui/card";

  import { Calendar } from "../ui/calendar";
  import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, Line, LineChart as RechartsLineChart } from "recharts";
  import { toast } from "sonner";

  import { cn } from "../ui/utils";

  import { skipCountForPage } from "../../lib/paginationQuery";
  import { getLocations } from "../../services/locationService";
  import { getPartners } from "../../services/partnerService";
  import { getGroups } from "../../services/groupService";
  import {

    exportPrintLogExcel,

    getLabelReport,
    getReportsPrintLogList,

  } from "../../services/reportsService";
  import type { LocationDto } from "../../types/location";
  import type { PartnerListItem } from "../../types/partner";
  import type { GroupListItem } from "../../types/group";
  import type { LabelReportData, ReportsPrintLogListItem } from "../../types/reports";
  import { ApiError } from "../../lib/apiClient";

  import { BACKEND_EMPTY_DISPLAY } from "../../lib/emptyDisplay";

  import {
    Pagination,
    PaginationContent,
    PaginationItem,
    PaginationLink,
    PaginationNext,
    PaginationPrevious,
  } from "../ui/pagination";

  const ALL = "all" as const;
  
  function defaultDateRange(): { start: string; end: string } {
    const end = new Date();
    const start = new Date(end);
    start.setDate(start.getDate() - 29);
    return {
      start: start.toISOString().slice(0, 10),
      end: end.toISOString().slice(0, 10),
    };
  }
  
  function parseIsoDate(value: string): Date | undefined {
    const s = (value ?? "").trim();
    if (!/^\d{4}-\d{2}-\d{2}$/.test(s)) return undefined;
    const d = new Date(`${s}T00:00:00`);
    if (Number.isNaN(d.getTime())) return undefined;
    return d;
  }
  
  function formatIsoDate(value: Date): string {
    const y = value.getFullYear();
    const m = String(value.getMonth() + 1).padStart(2, "0");
    const d = String(value.getDate()).padStart(2, "0");
    return `${y}-${m}-${d}`;
  }
  
  function formatPrintedAt(raw: string): string {
    const s = (raw ?? "").trim();
    if (!s) return "None";
    const d = new Date(s);
    if (Number.isNaN(d.getTime())) return s;
    return d.toLocaleString("en-US", {
      year: "numeric",
      month: "2-digit",
      day: "2-digit",
      hour: "numeric",
      minute: "2-digit",
      second: "2-digit",
      hour12: true,
    });
  }
  
  function toDisplay(v: string | null | undefined): string {
    const s = (v ?? "").trim();

    if (!s || s === BACKEND_EMPTY_DISPLAY) return "None";

    return s;

  }
  
  function formatPct(n: number): string {
    if (!Number.isFinite(n)) return "0%";
    const sign = n > 0 ? "+" : "";
    return `${sign}${n.toFixed(1)}%`;
  }
  
  function formatTrendLabel(iso: string): string {
    const s = (iso ?? "").trim();
    if (!s) return "";
    const d = new Date(s);
    if (Number.isNaN(d.getTime())) return s.length > 10 ? s.slice(0, 10) : s;
    return d.toLocaleDateString("en-US", { month: "numeric", day: "numeric" });
  }
  

  /** Reports 筛选：单弹层 + range 日历，避免双日历布局问题 */
  function PeriodRangePicker({
    startDate,
    endDate,
    onRangeChange,
  }: {
    startDate: string;
    endDate: string;
    onRangeChange: (start: string, end: string) => void;
  }) {
    const [open, setOpen] = useState(false);
    const selectedRange: DateRange | undefined = useMemo(() => {
      const from = parseIsoDate(startDate);
      const to = parseIsoDate(endDate);
      if (from && to) return { from, to };
      if (from) return { from, to: undefined };
      return undefined;
    }, [startDate, endDate]);
  
    const label = `${startDate || "YYYY-MM-DD"}  —  ${endDate || "YYYY-MM-DD"}`;
  
    return (
      <div className="flex items-center gap-2 shrink-0" lang="en-US">

        <span className="text-sm font-medium font-sans text-gray-900">Period Search:</span>

        <Popover open={open} onOpenChange={setOpen}>
          <PopoverTrigger asChild>
            <Button
              type="button"
              variant="outline"

              className="h-10 min-w-[17rem] justify-start gap-2 rounded-md border border-gray-300 bg-white px-3 text-sm font-medium font-sans text-gray-900 hover:bg-gray-50"

            >
              <CalendarIcon className="h-4 w-4 shrink-0 text-gray-500" aria-hidden />
              {label}
            </Button>
          </PopoverTrigger>
          <PopoverContent className="w-auto p-0" align="start">
            <Calendar
              mode="range"
              numberOfMonths={1}
              defaultMonth={parseIsoDate(startDate) ?? parseIsoDate(endDate) ?? new Date()}
              selected={selectedRange}
              onSelect={(range) => {
                if (!range?.from) return;
                const s = formatIsoDate(range.from);
                const e = range.to ? formatIsoDate(range.to) : s;
                onRangeChange(s, e);
                if (range.from && range.to) setOpen(false);
              }}
              initialFocus
            />
          </PopoverContent>
        </Popover>
      </div>
    );
  }
  

  /** Print Log 列表行统一字体 */
  const PRINT_LOG_CELL = "border-r text-sm font-normal font-sans text-gray-900";
  const PRINT_LOG_HEAD = "text-sm font-semibold font-sans text-gray-900 border-r";
  

  function templateCell(template: string) {

    const t = (template ?? "").trim();
    if (!t) return "None";
    if (t.endsWith(" !!!")) {
      return (
        <>
          {t.slice(0, -4)}
          <span className="text-red-600"> !!!</span>
        </>
      );
    }
    return t;

  }
  
  const EMPTY_LABEL_REPORT: LabelReportData = {
    summary: {
      totalLabelsPrinted: 0,
      totalLabelsPrintedPrevPeriod: 0,
      totalLabelsPrintedChangeRate: 0,
      hottestCategoryName: "None",
      hottestCategoryCount: 0,
      topProductName: "None",
      topProductCount: 0,
      avgDailyPrints: 0,
      avgDailyPrintsChangeRate: 0,

    },

    labelsByCategory: [],
    printVolumeTrend: [],
    mostUsedProducts: [],
  };
  
  export type ReportsViewProps = {
    layoutReportsOpenKey?: number;
    layoutReportsTargetTab?: "print-log" | "label-report";
  };
  
  export function ReportsView({
    layoutReportsOpenKey = 0,
    layoutReportsTargetTab = "label-report",
  }: ReportsViewProps = {}) {
    const [activeTab, setActiveTab] = useState<"print-log" | "label-report">("print-log");
    const lastAppliedLayoutKeyRef = useRef(0);
  
    const [partners, setPartners] = useState<PartnerListItem[]>([]);
    const [groups, setGroups] = useState<GroupListItem[]>([]);
    const [locations, setLocations] = useState<LocationDto[]>([]);
  
    const [partnerId, setPartnerId] = useState<string>(ALL);
    const [groupId, setGroupId] = useState<string>(ALL);
    const [locationId, setLocationId] = useState<string>(ALL);
  
    const { start: defaultStart, end: defaultEnd } = defaultDateRange();
    const [startDate, setStartDate] = useState<string>(defaultStart);
    const [endDate, setEndDate] = useState<string>(defaultEnd);
    const [keyword, setKeyword] = useState("");
  
    const [debouncedKeyword, setDebouncedKeyword] = useState("");
    const keywordTimerRef = useRef<number | null>(null);
  
    const [printRows, setPrintRows] = useState<ReportsPrintLogListItem[]>([]);
    const [printTotal, setPrintTotal] = useState(0);
    const [printLoading, setPrintLoading] = useState(false);
    const [pageIndex, setPageIndex] = useState(1);
    const [pageSize] = useState(10);
  
    const [labelData, setLabelData] = useState<LabelReportData | null>(null);
    const [labelLoading, setLabelLoading] = useState(false);
    const [exporting, setExporting] = useState(false);

    const [filterMetaLoading, setFilterMetaLoading] = useState(true);
  
    const printAbortRef = useRef<AbortController | null>(null);
    const labelAbortRef = useRef<AbortController | null>(null);
  
    useEffect(() => {
      if (keywordTimerRef.current) window.clearTimeout(keywordTimerRef.current);
      keywordTimerRef.current = window.setTimeout(() => setDebouncedKeyword(keyword.trim()), 300);
      return () => {
        if (keywordTimerRef.current) window.clearTimeout(keywordTimerRef.current);
      };
    }, [keyword]);
  
    useEffect(() => {
      if (layoutReportsOpenKey > 0 && layoutReportsOpenKey > lastAppliedLayoutKeyRef.current) {
        lastAppliedLayoutKeyRef.current = layoutReportsOpenKey;
        setActiveTab(layoutReportsTargetTab);
      }
    }, [layoutReportsOpenKey, layoutReportsTargetTab]);
  
    const totalPages = Math.max(1, Math.ceil(printTotal / pageSize));
  
    const partnerNameForQuery = useCallback((): string | undefined => {
      if (partnerId === ALL) return undefined;
      const p = partners.find((x) => x.id === partnerId);
      return p?.partnerName?.trim() || undefined;
    }, [partnerId, partners]);
  
    const groupNameForQuery = useCallback((): string | undefined => {
      if (groupId === ALL) return undefined;
      const g = groups.find((x) => x.id === groupId);
      return g?.groupName?.trim() || undefined;
    }, [groupId, groups]);
  
    const buildReportFilters = useCallback(
      () => ({
        partnerId: partnerId === ALL ? undefined : partnerId,
        groupId: groupId === ALL ? undefined : groupId,
        locationId: locationId === ALL ? undefined : locationId,
        startDate: startDate.trim() || undefined,
        endDate: endDate.trim() || undefined,
        keyword: debouncedKeyword || undefined,
      }),
      [debouncedKeyword, endDate, groupId, locationId, partnerId, startDate]
    );
  
    useEffect(() => {
      setPageIndex(1);
    }, [debouncedKeyword, partnerId, groupId, locationId, startDate, endDate, activeTab, pageSize]);
  
    useEffect(() => {
      let cancel = false;
      const run = async () => {
        setFilterMetaLoading(true);
        try {
          const [pRes, gRes] = await Promise.all([
            getPartners({ skipCount: 1, maxResultCount: 500, state: true }),
            getGroups({ skipCount: 1, maxResultCount: 500, state: true }),
          ]);
          if (cancel) return;
          setPartners(pRes.items ?? []);
          setGroups(gRes.items ?? []);
        } catch (e) {
          if (!cancel) {
            setPartners([]);
            setGroups([]);
            toast.error("Failed to load companies / regions.", {
              description: e instanceof Error ? e.message : "Please try again.",
            });
          }
        } finally {
          if (!cancel) setFilterMetaLoading(false);
        }
      };
      run();
      return () => {
        cancel = true;
      };
    }, []);
  
    useEffect(() => {
      let cancel = false;
      const run = async () => {
        try {
          const res = await getLocations({
            skipCount: 1,
            maxResultCount: 2000,
            partner: partnerNameForQuery(),
            groupName: groupNameForQuery(),
            state: true,
          });
          if (cancel) return;
          setLocations(res.items ?? []);
        } catch (e) {
          if (!cancel) {
            setLocations([]);
            toast.error("Failed to load locations.", {
              description: e instanceof Error ? e.message : "Please try again.",
            });
          }
        }
      };
      run();
      return () => {
        cancel = true;
      };
    }, [groupNameForQuery, partnerNameForQuery, partnerId, groupId]);
  
    useEffect(() => {
      if (activeTab !== "print-log") return;
  
      const run = async () => {
        printAbortRef.current?.abort();
        const ac = new AbortController();
        printAbortRef.current = ac;
        setPrintLoading(true);
        const f = buildReportFilters();
        try {
          const res = await getReportsPrintLogList(
            {
              skipCount: skipCountForPage(pageIndex),
              maxResultCount: pageSize,
              sorting: "PrintedAt desc",
              ...f,
            },
            ac.signal
          );
          setPrintRows(res.items ?? []);
          setPrintTotal(res.totalCount ?? 0);
        } catch (e) {
          if (e instanceof Error && e.name === "AbortError") return;
          toast.error("Failed to load print log.", {
            description: e instanceof Error ? e.message : "Please try again.",
          });
          setPrintRows([]);
          setPrintTotal(0);
        } finally {
          if (!ac.signal.aborted) setPrintLoading(false);
        }
      };
      void run();
      return () => printAbortRef.current?.abort();
    }, [activeTab, buildReportFilters, pageIndex, pageSize]);
  
    useEffect(() => {
      if (activeTab !== "label-report") return;
      const run = async () => {
        labelAbortRef.current?.abort();
        const ac = new AbortController();
        labelAbortRef.current = ac;
        setLabelLoading(true);
        const f = buildReportFilters();
        try {
          const data = await getLabelReport(f, ac.signal);
          setLabelData(data);
        } catch (e) {
          if (e instanceof Error && e.name === "AbortError") return;
          toast.error("Failed to load label report.", {
            description: e instanceof Error ? e.message : "Please try again.",
          });
          setLabelData(EMPTY_LABEL_REPORT);
        } finally {
          if (!ac.signal.aborted) setLabelLoading(false);
        }
      };
      void run();
      return () => labelAbortRef.current?.abort();
    }, [activeTab, buildReportFilters]);
  
    const onPartnerChange = (v: string) => {
      setPartnerId(v);
      setGroupId(ALL);
      setLocationId(ALL);
    };
  
    const onGroupChange = (v: string) => {
      setGroupId(v);
      setLocationId(ALL);

    };
  

    const handleExport = async () => {
      const f = buildReportFilters();
      setExporting(true);
      try {

        await exportPrintLogExcel({
          ...f,
          skipCount: 1,
          maxResultCount: 10,
          sorting: "PrintedAt desc",
        });
        toast.success("Export ready", { description: "The Excel download should start shortly." });

      } catch (e) {
        const msg = e instanceof ApiError ? e.message : e instanceof Error ? e.message : "Please try again.";
        toast.error("Export failed", { description: msg });
      } finally {
        setExporting(false);
      }
    };
  
    const report = labelData ?? EMPTY_LABEL_REPORT;
    const trendData = (report.printVolumeTrend ?? []).map((p) => ({
      date: formatTrendLabel(p.date),
      count: p.count,
    }));
    const categoryData = (report.labelsByCategory ?? []).map((c) => ({ name: c.name, count: c.count }));
  

    return (
      <div className="h-full flex flex-col">

        <div className="pb-4">

          <div className="flex flex-wrap items-center gap-3">

            <Select value={partnerId} onValueChange={onPartnerChange} disabled={filterMetaLoading}>
              <SelectTrigger className="w-[140px] h-10 rounded-md border border-gray-300 bg-white font-medium text-gray-900 shrink-0">
                <SelectValue placeholder="Company" />

              </SelectTrigger>
              <SelectContent>

                <SelectItem value={ALL}>All companies</SelectItem>
                {partners.map((p) => (
                  <SelectItem key={p.id} value={p.id}>
                    {toDisplay(p.partnerName)}
                  </SelectItem>
                ))}

              </SelectContent>
            </Select>

            <Select value={groupId} onValueChange={onGroupChange} disabled={filterMetaLoading}>
              <SelectTrigger className="w-[140px] h-10 rounded-md border border-gray-300 bg-white font-medium text-gray-900 shrink-0">
                <SelectValue placeholder="Region" />

              </SelectTrigger>
              <SelectContent>

                <SelectItem value={ALL}>All regions</SelectItem>
                {groups
                  .filter((g) => (partnerId === ALL ? true : g.partnerId === partnerId))
                  .map((g) => (
                    <SelectItem key={g.id} value={g.id}>
                      {toDisplay(g.groupName)}
                    </SelectItem>
                  ))}

              </SelectContent>
            </Select>

            <Select value={locationId} onValueChange={setLocationId} disabled={filterMetaLoading}>
              <SelectTrigger className="w-[160px] h-10 rounded-md border border-gray-300 bg-white font-medium text-gray-900 shrink-0">

                <SelectValue placeholder="Location" />
              </SelectTrigger>
              <SelectContent>

                <SelectItem value={ALL}>All locations</SelectItem>
                {locations.map((loc) => (
                  <SelectItem key={loc.id} value={loc.id ?? ""}>
                    {toDisplay(loc.locationName) || toDisplay(loc.locationCode)}
                  </SelectItem>
                ))}

              </SelectContent>
            </Select>

            <PeriodRangePicker
              startDate={startDate}
              endDate={endDate}
              onRangeChange={(start, end) => {
                setStartDate(start);
                setEndDate(end);
              }}
            />

            <div
              className="flex items-center w-64 rounded-md border border-gray-300 bg-white overflow-hidden shrink-0"
              style={{ height: 40 }}
            >
              <Search className="h-4 w-4 text-gray-400 shrink-0 ml-3 pointer-events-none" />
              <Input
                value={keyword}
                onChange={(e) => setKeyword(e.target.value)}
                placeholder="Search Product or Category..."
                className="flex-1 min-w-0 border-0 bg-transparent focus-visible:ring-0 focus-visible:ring-offset-0 py-2 px-2 h-full placeholder:text-gray-500"
              />

            </div>
            <div className="flex-1 min-w-2" />

            {activeTab === "print-log" && (
              <Button
                type="button"
                variant="outline"
                className="h-10 border border-gray-300 rounded-md text-gray-900 bg-white hover:bg-gray-50 gap-2 shrink-0"
                disabled={exporting}
                onClick={() => void handleExport()}
              >
                <Download className="w-4 h-4" /> {exporting ? "Exporting…" : "Export Report"}
              </Button>
            )}

          </div>
  

          <div className="w-full border-b border-gray-200 mt-4">
            <div className="flex overflow-x-auto w-fit">
              <button

                type="button"
                onClick={() => setActiveTab("print-log")}
                style={
                  activeTab === "print-log" ? { borderBottomWidth: 2, borderBottomStyle: "solid", borderBottomColor: "#2563eb" } : undefined
                }

                className={cn(
                  "px-4 py-2.5 text-sm font-medium whitespace-nowrap cursor-pointer transition-colors -mb-px border-b-2",

                  activeTab === "print-log" ? "text-blue-600" : "border-b-transparent text-gray-600 hover:text-gray-800"

                )}
              >
                Print Log
              </button>
              <button

                type="button"
                onClick={() => setActiveTab("label-report")}
                style={
                  activeTab === "label-report"
                    ? { borderBottomWidth: 2, borderBottomStyle: "solid", borderBottomColor: "#2563eb" }
                    : undefined
                }

                className={cn(
                  "px-4 py-2.5 text-sm font-medium whitespace-nowrap cursor-pointer transition-colors -mb-px border-b-2",

                  activeTab === "label-report" ? "text-blue-600" : "border-b-transparent text-gray-600 hover:text-gray-800"

                )}
              >
                Label Report
              </button>
            </div>
          </div>
        </div>
  

        <div className="flex-1 overflow-auto pt-6">

          {activeTab === "print-log" && (
            <div className="space-y-4">
              <div className="bg-white border border-gray-200 shadow-sm rounded-md overflow-hidden min-h-[200px]">
                {printLoading && (
                  <div className="p-6 text-sm text-gray-500">Loading print log…</div>
                )}
                {!printLoading && (

                  <Table className="font-sans">

                    <TableHeader>

                      <TableRow className="bg-gray-100 hover:bg-gray-100">

                        <TableHead className={PRINT_LOG_HEAD}>Label ID</TableHead>
                        <TableHead className={PRINT_LOG_HEAD}>Product Name</TableHead>
                        <TableHead className={PRINT_LOG_HEAD}>Product Category</TableHead>
                        <TableHead className={PRINT_LOG_HEAD}>Label Category</TableHead>
                        <TableHead className={PRINT_LOG_HEAD}>Template</TableHead>
                        <TableHead className={PRINT_LOG_HEAD}>Printed at</TableHead>
                        <TableHead className={PRINT_LOG_HEAD}>Printed by</TableHead>
                        <TableHead className={PRINT_LOG_HEAD}>Location</TableHead>
                        <TableHead className={PRINT_LOG_HEAD}>Expiration</TableHead>
                        <TableHead className={`${PRINT_LOG_HEAD} text-center border-r-0`}>Action</TableHead>

                      </TableRow>
                    </TableHeader>
                    <TableBody>

                      {printRows.length === 0 && (
                        <TableRow>

                          <TableCell colSpan={10} className={`text-center ${PRINT_LOG_CELL} border-r-0 py-10`}>

                            No print records
                          </TableCell>
                        </TableRow>
                      )}
                      {printRows.map((log) => (
                        <TableRow key={log.taskId + log.labelCode}>

                          <TableCell className={PRINT_LOG_CELL}>{toDisplay(log.labelCode)}</TableCell>
                          <TableCell className={PRINT_LOG_CELL}>{toDisplay(log.productName)}</TableCell>
                          <TableCell className={PRINT_LOG_CELL}>{toDisplay(log.productCategoryName)}</TableCell>
                          <TableCell className={PRINT_LOG_CELL}>{toDisplay(log.labelCategoryName)}</TableCell>
                          <TableCell className={PRINT_LOG_CELL}>{templateCell(log.templateText)}</TableCell>
                          <TableCell className={PRINT_LOG_CELL}>{formatPrintedAt(log.printedAt)}</TableCell>
                          <TableCell className={PRINT_LOG_CELL}>{toDisplay(log.printedByName)}</TableCell>
                          <TableCell className={PRINT_LOG_CELL}>{toDisplay(log.locationText)}</TableCell>
                          <TableCell className={PRINT_LOG_CELL}>{toDisplay(log.expiryDateText)}</TableCell>
                          <TableCell className="text-center text-sm font-normal font-sans text-gray-900">

                            <div

                              className="inline-flex h-8 items-center justify-center gap-1 rounded-md border border-gray-300 bg-white px-4 text-sm font-normal font-sans text-gray-900 shadow-sm select-none pointer-events-none"

                              aria-label="Reprint"

                            >

                              <Printer className="w-3 h-3 shrink-0 text-gray-700" aria-hidden />
                              <span>Reprint</span>
                            </div>

                          </TableCell>
                        </TableRow>
                      ))}

                    </TableBody>
                  </Table>

                )}
              </div>
              <div className="flex flex-col sm:flex-row sm:items-center sm:justify-end gap-2 text-sm text-gray-600">
                <span>
                  {printTotal === 0
                    ? "Showing 0 of 0"
                    : `Showing ${(pageIndex - 1) * pageSize + 1}–${Math.min(pageIndex * pageSize, printTotal)} of ${printTotal}`}
                </span>
                <Pagination className="mx-0 w-auto justify-end">
                  <PaginationContent>
                    <PaginationItem>
                      <PaginationPrevious
                        className={pageIndex <= 1 ? "pointer-events-none opacity-50" : "cursor-pointer"}
                        onClick={() => pageIndex > 1 && setPageIndex((p) => Math.max(1, p - 1))}
                        aria-disabled={pageIndex <= 1}
                      />
                    </PaginationItem>
                    <PaginationItem>

                      <PaginationLink
                        className="cursor-default"
                        size="default"
                        isActive
                        onClick={(e) => e.preventDefault()}
                      >

                        Page {pageIndex} / {totalPages}
                      </PaginationLink>
                    </PaginationItem>
                    <PaginationItem>
                      <PaginationNext
                        className={pageIndex >= totalPages ? "pointer-events-none opacity-50" : "cursor-pointer"}
                        onClick={() => pageIndex < totalPages && setPageIndex((p) => Math.min(totalPages, p + 1))}
                        aria-disabled={pageIndex >= totalPages}
                      />
                    </PaginationItem>
                  </PaginationContent>
                </Pagination>
              </div>
            </div>
          )}
  
          {activeTab === "label-report" && (
            <div className="space-y-6">
              {labelLoading && <div className="text-sm text-gray-500">Loading label report…</div>}
  
              {!labelLoading && (
                <>
                  <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
                    <Card>
                      <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                        <CardTitle className="text-sm font-medium">Total Labels Printed</CardTitle>
                        <FileText className="h-4 w-4 text-muted-foreground" />
                      </CardHeader>
                      <CardContent>
                        <div className="text-2xl font-bold">{report.summary.totalLabelsPrinted.toLocaleString("en-US")}</div>
                        <p className="text-xs text-muted-foreground">
                          {formatPct(report.summary.totalLabelsPrintedChangeRate)} vs previous period
                        </p>
                      </CardContent>
                    </Card>
                    <Card>
                      <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                        <CardTitle className="text-sm font-medium">Most Printed Category</CardTitle>
                        <BarChart3 className="h-4 w-4 text-muted-foreground" />
                      </CardHeader>
                      <CardContent>
                        <div className="text-2xl font-bold">{toDisplay(report.summary.hottestCategoryName)}</div>
                        <p className="text-xs text-muted-foreground">
                          {report.summary.hottestCategoryCount.toLocaleString("en-US")} label(s) in range
                        </p>
                      </CardContent>
                    </Card>
                    <Card>
                      <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                        <CardTitle className="text-sm font-medium">Top Product</CardTitle>
                        <ArrowUpRight className="h-4 w-4 text-muted-foreground" />
                      </CardHeader>
                      <CardContent>
                        <div className="text-2xl font-bold">{toDisplay(report.summary.topProductName)}</div>
                        <p className="text-xs text-muted-foreground">
                          {report.summary.topProductCount.toLocaleString("en-US")} label(s) in range
                        </p>
                      </CardContent>
                    </Card>
                    <Card>
                      <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                        <CardTitle className="text-sm font-medium">Avg. Daily Prints</CardTitle>
                        <RefreshCw className="h-4 w-4 text-muted-foreground" />
                      </CardHeader>
                      <CardContent>
                        <div className="text-2xl font-bold">
                          {Number.isFinite(report.summary.avgDailyPrints)
                            ? report.summary.avgDailyPrints.toLocaleString("en-US", { maximumFractionDigits: 1 })
                            : "0"}
                        </div>
                        <p className="text-xs text-muted-foreground">
                          {formatPct(report.summary.avgDailyPrintsChangeRate)} vs previous period
                        </p>
                      </CardContent>
                    </Card>
                  </div>
  
                  <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
                    <Card className="col-span-1">
                      <CardHeader>
                        <CardTitle>Labels by Category</CardTitle>
                        <CardDescription>Distribution of printed labels by label category in the selected range.</CardDescription>
                      </CardHeader>
                      <CardContent className="h-[300px]">
                        {categoryData.length === 0 ? (
                          <div className="h-full flex items-center justify-center text-sm text-gray-500">No data</div>
                        ) : (
                          <ResponsiveContainer width="100%" height="100%">
                            <BarChart data={categoryData}>
                              <CartesianGrid strokeDasharray="3 3" vertical={false} />
                              <XAxis dataKey="name" fontSize={12} tickLine={false} axisLine={false} />
                              <YAxis fontSize={12} tickLine={false} axisLine={false} tickFormatter={(v) => `${v}`} />
                              <Tooltip />
                              <Bar dataKey="count" fill="#facc15" radius={[4, 4, 0, 0]} />
                            </BarChart>
                          </ResponsiveContainer>
                        )}
                      </CardContent>
                    </Card>
  
                    <Card className="col-span-1">
                      <CardHeader>
                        <CardTitle>Print Volume Trends</CardTitle>
                        <CardDescription>Daily print volume in the current filter window (up to 7 days).</CardDescription>
                      </CardHeader>
                      <CardContent className="h-[300px]">
                        {trendData.length === 0 ? (
                          <div className="h-full flex items-center justify-center text-sm text-gray-500">No data</div>
                        ) : (
                          <ResponsiveContainer width="100%" height="100%">
                            <RechartsLineChart data={trendData}>
                              <CartesianGrid strokeDasharray="3 3" vertical={false} />
                              <XAxis dataKey="date" fontSize={12} tickLine={false} axisLine={false} />
                              <YAxis fontSize={12} tickLine={false} axisLine={false} />
                              <Tooltip />
                              <Line type="monotone" dataKey="count" stroke="#dc2626" strokeWidth={2} dot={{ r: 4 }} activeDot={{ r: 6 }} />
                            </RechartsLineChart>
                          </ResponsiveContainer>
                        )}
                      </CardContent>
                    </Card>
                  </div>

                  <Card>
                    <CardHeader>
                      <CardTitle>Most Used Products</CardTitle>
                    </CardHeader>
                    <CardContent>
                      <Table>
                        <TableHeader>
                          <TableRow>
                            <TableHead>Product Name</TableHead>
                            <TableHead>Category</TableHead>
                            <TableHead className="text-right">Total Printed</TableHead>
                            <TableHead className="text-right">Usage %</TableHead>
                          </TableRow>
                        </TableHeader>
                        <TableBody>
                          {report.mostUsedProducts.length === 0 && (
                            <TableRow>
                              <TableCell colSpan={4} className="text-center text-sm text-gray-500">
                                No data
                              </TableCell>
                            </TableRow>
                          )}
                          {report.mostUsedProducts.map((row, i) => (
                            <TableRow key={`${row.productName}-${i}`}>
                              <TableCell className="font-medium">{toDisplay(row.productName)}</TableCell>
                              <TableCell>{toDisplay(row.categoryName)}</TableCell>
                              <TableCell className="text-right font-numeric">{row.totalPrinted.toLocaleString("en-US")}</TableCell>
                              <TableCell className="text-right font-numeric">
                                {Number.isFinite(row.usagePercent) ? `${row.usagePercent.toFixed(1)}%` : "—"}
                              </TableCell>
                            </TableRow>
                          ))}
                        </TableBody>
                      </Table>
                    </CardContent>
                  </Card>
                </>
              )}

            </div>
          )}
        </div>
      </div>
    );
  }