@burdenoff/microfe-movethewheels 2026.1026.1 → 2026.1026.3

package/src/movethewheels/pages/ReportsPage.tsx

@@ -1,379 +0,0 @@
-/**
- * Reports Page
- *
- * Lists reports from the backend (movethewheelsReports) and lets operators
- * create, schedule and generate them via the real mutations. Pre-launch
- * workspaces start empty — no fabricated report history is shown.
- */
-
-import { useState } from 'react';
-import {
-  FileBarChart,
-  Download,
-  Calendar,
-  Filter,
-  Clock,
-  Plus,
-  ChevronLeft,
-  ChevronRight,
-} from 'lucide-react';
-import { PageLayout } from '../components/PageLayout';
-import {
-  Card,
-  CardContent,
-  CardHeader,
-  CardTitle,
-  Button,
-  Badge,
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-  Skeleton,
-} from '../components/ui';
-import { EmphasisPanel, IllustratedEmptyState, PagePurpose } from '@burdenoff/fe-libs/ui';
-import { VolumeBar } from '../components/charts';
-import { useReports, type CreateReportInput } from '../hooks/useReports';
-import { useAnalytics } from '../hooks/useAnalytics';
-import { useDemandForecast } from '../hooks/useDemandForecast';
-import { UpcomingDemandPanel } from '../components/UpcomingDemandPanel';
-import { formatDate } from '../utils/formatters';
-import { downloadFile, downloadJson, recordToCsv, slugifyForFilename } from '../utils/download';
-
-const REPORT_TYPES: { value: string; label: string }[] = [
-  { value: 'operations', label: 'Operations Summary' },
-  { value: 'finance', label: 'Financial Report' },
-  { value: 'fleet', label: 'Fleet Utilization' },
-  { value: 'customers', label: 'Customer Analytics' },
-  { value: 'inventory', label: 'Inventory Status' },
-];
-
-interface Feedback {
-  tone: 'success' | 'error';
-  text: string;
-}
-
-const REPORTS_PAGE_SIZE = 10;
-
-export default function ReportsPage() {
-  const [page, setPage] = useState(0);
-  const { reports, hasMore, isLoading, error, refetch, createReport, generateReport } = useReports({
-    limit: REPORTS_PAGE_SIZE,
-    offset: page * REPORTS_PAGE_SIZE,
-  });
-  const { analytics } = useAnalytics();
-  const previewData = analytics.trends.dailyOrders.slice(-7);
-  const {
-    laneForecast,
-    customerForecast,
-    laneVariance,
-    customerVariance,
-    isLoading: forecastLoading,
-    error: forecastError,
-    refetch: refetchForecast,
-  } = useDemandForecast(4, 8);
-  const [reportType, setReportType] = useState('operations');
-  const [busyId, setBusyId] = useState<string | null>(null);
-  const [creating, setCreating] = useState(false);
-  const [feedback, setFeedback] = useState<Feedback | null>(null);
-
-  const typeLabel = (value: string) =>
-    REPORT_TYPES.find((item) => item.value === value)?.label ?? value;
-
-  const handleCreate = async (schedule?: string) => {
-    setCreating(true);
-    setFeedback(null);
-    const input: CreateReportInput = {
-      name: `${typeLabel(reportType)}${schedule ? ' (Scheduled)' : ''}`,
-      type: reportType,
-      description: `${typeLabel(reportType)} generated from live operational data`,
-      ...(schedule ? { schedule } : {}),
-    };
-    try {
-      await createReport(input);
-      setFeedback({
-        tone: 'success',
-        text: schedule ? 'Scheduled report created.' : 'Report created.',
-      });
-    } catch (createError) {
-      setFeedback({
-        tone: 'error',
-        text: createError instanceof Error ? createError.message : 'Could not create report.',
-      });
-    } finally {
-      setCreating(false);
-    }
-  };
-
-  const handleGenerate = async (id: string) => {
-    setBusyId(id);
-    setFeedback(null);
-    try {
-      const generated = await generateReport(id);
-      // Turn the freshly generated report into a downloadable file. Prefer a
-      // flat CSV of the result payload; fall back to the full JSON document so a
-      // file always lands even when the result is nested/empty.
-      const baseName = `${slugifyForFilename(generated.report.name)}-${generated.generatedAt.slice(
-        0,
-        10
-      )}`;
-      const csv = recordToCsv(generated.result ?? null);
-      if (csv) {
-        downloadFile(`${baseName}.csv`, csv, 'text/csv');
-      } else {
-        downloadJson(`${baseName}.json`, generated);
-      }
-      setFeedback({ tone: 'success', text: 'Report generated and downloaded.' });
-    } catch (genError) {
-      setFeedback({
-        tone: 'error',
-        text: genError instanceof Error ? genError.message : 'Could not generate report.',
-      });
-    } finally {
-      setBusyId(null);
-    }
-  };
-
-  const scheduledReports = reports.filter((report) => report.schedule);
-
-  return (
-    <PageLayout
-      title="Reports"
-      subtitle="Generate and schedule reports"
-      icon={<FileBarChart size={24} />}
-      headerActions={
-        <div className="flex gap-2">
-          <Select value={reportType} onValueChange={setReportType}>
-            <SelectTrigger className="w-[190px]">
-              <SelectValue />
-            </SelectTrigger>
-            <SelectContent>
-              {REPORT_TYPES.map((item) => (
-                <SelectItem key={item.value} value={item.value}>
-                  {item.label}
-                </SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
-          <Button onClick={() => void handleCreate()} disabled={creating}>
-            <Plus size={16} /> Create Report
-          </Button>
-        </div>
-      }
-    >
-      <PagePurpose icon={<FileBarChart size={18} />}>
-        Turn your operational data into shareable summaries. Generate one-off reports on orders,
-        finance, fleet, customers or inventory, or schedule them to land in inboxes automatically —
-        so stakeholders always have the latest numbers without logging in.
-      </PagePurpose>
-
-      {feedback && (
-        <div
-          role="status"
-          className={`rounded-lg p-3 text-sm ${
-            feedback.tone === 'success'
-              ? 'bg-status-success-bg-subtle text-status-success-text'
-              : 'bg-status-error-bg-subtle text-status-error-text'
-          }`}
-        >
-          {feedback.text}
-        </div>
-      )}
-
-      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
-        <div className="lg:col-span-2 space-y-4">
-          <h3 className="font-semibold">Available Reports</h3>
-
-          {isLoading ? (
-            <div className="space-y-3">
-              {Array.from({ length: 3 }).map((_, i) => (
-                <Skeleton key={i} className="h-20 w-full rounded-lg" />
-              ))}
-            </div>
-          ) : error ? (
-            <Card className="border-status-error-border">
-              <CardContent className="p-6 text-center space-y-3">
-                <p className="text-status-error-text font-medium">Couldn&apos;t load reports</p>
-                <p className="text-sm text-text-secondary">{error.message}</p>
-                <Button variant="outline" onClick={refetch}>
-                  Retry
-                </Button>
-              </CardContent>
-            </Card>
-          ) : reports.length === 0 ? (
-            <Card>
-              <CardContent className="p-0">
-                <IllustratedEmptyState
-                  illustration="empty-data"
-                  title="No reports yet"
-                  description="Create your first report to turn live operational data into a shareable summary."
-                  action={
-                    <Button onClick={() => void handleCreate()} disabled={creating}>
-                      <Plus size={16} className="mr-1.5" /> Create Report
-                    </Button>
-                  }
-                />
-              </CardContent>
-            </Card>
-          ) : (
-            reports.map((report) => (
-              <Card key={report.id}>
-                <CardContent className="p-4">
-                  <div className="flex items-center justify-between">
-                    <div className="flex items-center gap-3">
-                      <div className="w-10 h-10 rounded-lg bg-action-primary-bg/10 flex items-center justify-center">
-                        <FileBarChart size={20} className="text-primary" />
-                      </div>
-                      <div>
-                        <p className="font-medium">{report.name}</p>
-                        <p className="text-sm text-text-secondary">
-                          {report.description ?? typeLabel(report.type)}
-                        </p>
-                      </div>
-                    </div>
-                    <div className="flex items-center gap-3">
-                      <div className="text-right">
-                        <Badge variant="outline">{report.schedule ?? 'On demand'}</Badge>
-                        {report.lastGenerated && (
-                          <p className="text-xs text-text-secondary mt-1">
-                            Last: {formatDate(new Date(report.lastGenerated), 'short')}
-                          </p>
-                        )}
-                      </div>
-                      <Button
-                        variant="outline"
-                        size="sm"
-                        aria-label={`Generate ${report.name}`}
-                        disabled={busyId === report.id}
-                        onClick={() => void handleGenerate(report.id)}
-                      >
-                        <Download size={14} />
-                      </Button>
-                    </div>
-                  </div>
-                </CardContent>
-              </Card>
-            ))
-          )}
-
-          {!isLoading && !error && (reports.length > 0 || page > 0) && (
-            <div className="flex flex-wrap items-center justify-between gap-3 pt-1">
-              <span className="text-sm text-text-secondary">
-                Showing {reports.length === 0 ? 0 : page * REPORTS_PAGE_SIZE + 1} to{' '}
-                {page * REPORTS_PAGE_SIZE + reports.length}
-              </span>
-              <div className="flex items-center gap-1">
-                <Button
-                  variant="outline"
-                  size="icon"
-                  className="h-8 w-8"
-                  aria-label="Previous page"
-                  onClick={() => setPage((p) => Math.max(0, p - 1))}
-                  disabled={page === 0}
-                >
-                  <ChevronLeft className="h-4 w-4" />
-                </Button>
-                <span className="px-3 text-sm">Page {page + 1}</span>
-                <Button
-                  variant="outline"
-                  size="icon"
-                  className="h-8 w-8"
-                  aria-label="Next page"
-                  onClick={() => setPage((p) => p + 1)}
-                  disabled={!hasMore}
-                >
-                  <ChevronRight className="h-4 w-4" />
-                </Button>
-              </div>
-            </div>
-          )}
-        </div>
-
-        <div className="space-y-6">
-          {/* Demand forecast (BOFF-4393) — shared with AnalyticsPage so reports
-              and analytics show the same planning signal. */}
-          <UpcomingDemandPanel
-            laneForecast={laneForecast}
-            customerForecast={customerForecast}
-            laneVariance={laneVariance}
-            customerVariance={customerVariance}
-            isLoading={forecastLoading}
-            error={forecastError}
-            onRetry={refetchForecast}
-          />
-
-          {/* Data preview — a real snapshot (recent order volume) of what a
-              generated report draws from. Honest empty state when no data. */}
-          <Card>
-            <CardHeader>
-              <CardTitle className="text-base">Data preview</CardTitle>
-            </CardHeader>
-            <CardContent>
-              <p className="mb-2 text-xs text-text-secondary">Order volume · last 7 days</p>
-              <VolumeBar
-                xKey="date"
-                height={160}
-                showLegend={false}
-                data={previewData}
-                series={[{ dataKey: 'orders', name: 'Orders' }]}
-                emptyMessage="No order data to preview yet"
-              />
-            </CardContent>
-          </Card>
-
-          {/* Scheduled Reports — the page's single emphasis zone */}
-          <EmphasisPanel className="space-y-3">
-            <h2 className="flex items-center gap-2 text-base font-semibold text-text-primary">
-              <Clock size={18} /> Scheduled Reports
-            </h2>
-            {scheduledReports.length === 0 ? (
-              <p className="text-sm text-text-secondary">
-                No scheduled reports yet. Schedule one to have it generated automatically.
-              </p>
-            ) : (
-              scheduledReports.map((report) => (
-                <div key={report.id} className="p-3 border border-border-seam rounded-lg">
-                  <p className="font-medium">{report.name}</p>
-                  <p className="text-sm text-text-secondary">Schedule: {report.schedule}</p>
-                </div>
-              ))
-            )}
-            <Button
-              variant="outline"
-              className="w-full"
-              disabled={creating}
-              onClick={() => void handleCreate('daily')}
-            >
-              Schedule New Report
-            </Button>
-          </EmphasisPanel>
-
-          <Card>
-            <CardHeader>
-              <CardTitle>Quick Actions</CardTitle>
-            </CardHeader>
-            <CardContent className="space-y-2">
-              <Button
-                variant="outline"
-                className="w-full justify-start"
-                disabled={creating}
-                onClick={() => void handleCreate('weekly')}
-              >
-                <Calendar size={16} /> Schedule Report
-              </Button>
-              <Button
-                variant="outline"
-                className="w-full justify-start"
-                disabled={creating}
-                onClick={() => void handleCreate()}
-              >
-                <Filter size={16} /> Custom Report
-              </Button>
-            </CardContent>
-          </Card>
-        </div>
-      </div>
-    </PageLayout>
-  );
-}