@hed-hog/contact 0.0.294 → 0.0.296

package/hedhog/frontend/app/reports/page.tsx.ejs

@@ -1,15 +1,1196 @@
-'use client';
-
-import { CrmComingSoon } from '../_components/crm-coming-soon';
-import { BarChart3 } from 'lucide-react';
-
-export default function CrmReportsPage() {
-  return (
-    <CrmComingSoon
-      currentHref="/contact/reports"
-      titleKey="reports"
-      descriptionKey="reports"
-      icon={BarChart3}
-    />
-  );
-}
+'use client';
+
+import { Page, PageHeader } from '@/components/entity-list';
+import { Button } from '@/components/ui/button';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Input } from '@/components/ui/input';
+import { KpiCardsGrid } from '@/components/ui/kpi-cards-grid';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { Skeleton } from '@/components/ui/skeleton';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import { cn } from '@/lib/utils';
+import { useApp, useQuery } from '@hed-hog/next-app-provider';
+import {
+  Activity,
+  AlertTriangle,
+  ChartNoAxesCombined,
+  CircleDollarSign,
+  Loader2,
+  Printer,
+  RefreshCcw,
+  Target,
+  TrendingUp,
+} from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import { useState } from 'react';
+import { flushSync } from 'react-dom';
+import {
+  Bar,
+  BarChart,
+  CartesianGrid,
+  Cell,
+  Legend,
+  Line,
+  LineChart,
+  Pie,
+  PieChart,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+  YAxis,
+} from 'recharts';
+import { crmImplementedSections } from '../_lib/crm-sections';
+import {
+  REPORT_ACTIVITY_ORDER,
+  REPORT_SOURCE_ORDER,
+  REPORT_STAGE_ORDER,
+  type ReportGroupBy,
+  type ReportResponse,
+} from './_components/report-types';
+
+const chartPalette = [
+  '#f97316',
+  '#0ea5e9',
+  '#14b8a6',
+  '#84cc16',
+  '#f59e0b',
+  '#ef4444',
+  '#8b5cf6',
+];
+
+const chartTooltipStyle = {
+  backgroundColor: 'hsl(var(--card))',
+  border: '1px solid hsl(var(--border))',
+  borderRadius: '12px',
+  fontSize: '12px',
+};
+
+function formatDateInputValue(date: Date) {
+  const year = date.getFullYear();
+  const month = String(date.getMonth() + 1).padStart(2, '0');
+  const day = String(date.getDate()).padStart(2, '0');
+  return `${year}-${month}-${day}`;
+}
+
+function addDays(date: Date, amount: number) {
+  const next = new Date(date);
+  next.setDate(next.getDate() + amount);
+  return next;
+}
+
+function getDefaultDateRange() {
+  const now = new Date();
+  return {
+    dateFrom: formatDateInputValue(addDays(now, -29)),
+    dateTo: formatDateInputValue(now),
+  };
+}
+
+function getIntlLocale(localeCode?: string) {
+  return localeCode?.startsWith('pt') ? 'pt-BR' : 'en-US';
+}
+
+function formatDisplayDate(value: string, locale: string) {
+  const [year, month, day] = value.split('-').map(Number);
+
+  if (!year || !month || !day) {
+    return value;
+  }
+
+  return new Intl.DateTimeFormat(locale, {
+    dateStyle: 'medium',
+  }).format(new Date(year, month - 1, day));
+}
+
+const emptyReports: ReportResponse = {
+  summary: {
+    new_leads: 0,
+    qualified_moves: 0,
+    customer_moves: 0,
+    lost_moves: 0,
+    interactions: 0,
+    followups_completed: 0,
+    conversion_rate: 0,
+  },
+  timeline: [],
+  breakdowns: {
+    source: REPORT_SOURCE_ORDER.map((key) => ({ key, total: 0 })),
+    current_stage: REPORT_STAGE_ORDER.map((key) => ({ key, total: 0 })),
+    activity_type: REPORT_ACTIVITY_ORDER.map((key) => ({ key, total: 0 })),
+  },
+  owners: [],
+  table: [],
+};
+
+type PrintLayoutMode = 'portrait' | 'landscape';
+
+export default function CrmReportsPage() {
+  const t = useTranslations('contact.CrmReports');
+  const dashboardT = useTranslations('contact.CrmDashboard');
+  const activitiesT = useTranslations('contact.CrmActivities');
+  const { request, currentLocaleCode } = useApp();
+  const defaultRange = getDefaultDateRange();
+  const locale = getIntlLocale(currentLocaleCode);
+
+  const [dateFrom, setDateFrom] = useState(defaultRange.dateFrom);
+  const [dateTo, setDateTo] = useState(defaultRange.dateTo);
+  const [groupBy, setGroupBy] = useState<ReportGroupBy>('day');
+  const [isPrintDialogOpen, setIsPrintDialogOpen] = useState(false);
+  const [printLayoutMode, setPrintLayoutMode] =
+    useState<PrintLayoutMode>('portrait');
+  const [printedAt, setPrintedAt] = useState<Date | null>(null);
+
+  const hasInvalidRange = Boolean(dateFrom && dateTo && dateFrom > dateTo);
+  const canPrint = !hasInvalidRange;
+
+  const {
+    data: reports = emptyReports,
+    isLoading,
+    isFetching,
+    refetch,
+  } = useQuery<ReportResponse>({
+    queryKey: ['contact-reports', dateFrom, dateTo, groupBy, currentLocaleCode],
+    enabled: !hasInvalidRange,
+    queryFn: async () => {
+      const params = new URLSearchParams({
+        date_from: dateFrom,
+        date_to: dateTo,
+        group_by: groupBy,
+      });
+
+      const response = await request<ReportResponse>({
+        url: `/person/reports?${params.toString()}`,
+        method: 'GET',
+      });
+
+      return response.data;
+    },
+    placeholderData: (previous) => previous ?? emptyReports,
+  });
+
+  const percentFormatter = new Intl.NumberFormat(locale, {
+    style: 'percent',
+    maximumFractionDigits: 1,
+  });
+  const dateTimeFormatter = new Intl.DateTimeFormat(locale, {
+    dateStyle: 'medium',
+    timeStyle: 'short',
+  });
+
+  const timelineData = reports.timeline.map((item) => ({
+    ...item,
+    conversion_rate_percent: Number((item.conversion_rate * 100).toFixed(1)),
+  }));
+
+  const sourceChartData = reports.breakdowns.source.map((item, index) => ({
+    name: dashboardT(`sourceLabels.${item.key}`),
+    total: item.total,
+    fill: chartPalette[index % chartPalette.length],
+  }));
+
+  const stageChartData = reports.breakdowns.current_stage.map((item, index) => ({
+    name: dashboardT(`stageLabels.${item.key}`),
+    total: item.total,
+    fill: chartPalette[index % chartPalette.length],
+  }));
+
+  const activityTypeChartData = reports.breakdowns.activity_type.map(
+    (item, index) => ({
+      name: activitiesT(`type.${item.key}`),
+      total: item.total,
+      fill: chartPalette[index % chartPalette.length],
+    })
+  );
+
+  const ownersChartData = reports.owners.slice(0, 8);
+  const hasTimelineData = timelineData.some(
+    (item) =>
+      item.new_leads > 0 ||
+      item.qualified_moves > 0 ||
+      item.customer_moves > 0 ||
+      item.lost_moves > 0 ||
+      item.interactions > 0 ||
+      item.followups_completed > 0
+  );
+  const hasSourceData = sourceChartData.some((item) => item.total > 0);
+  const hasStageData = stageChartData.some((item) => item.total > 0);
+  const hasOwnersData = ownersChartData.some(
+    (item) =>
+      item.interactions > 0 ||
+      item.followups_completed > 0 ||
+      item.customer_moves > 0
+  );
+  const hasActivityTypeData = activityTypeChartData.some(
+    (item) => item.total > 0
+  );
+  const printedAtLabel = dateTimeFormatter.format(printedAt ?? new Date());
+  const printFilterItems = [
+    {
+      label: t('printedFilters.dateFrom'),
+      value: formatDisplayDate(dateFrom, locale),
+    },
+    {
+      label: t('printedFilters.dateTo'),
+      value: formatDisplayDate(dateTo, locale),
+    },
+    {
+      label: t('printedFilters.groupBy'),
+      value: t(`groupBy.${groupBy}`),
+    },
+    {
+      label: t('printedAt'),
+      value: printedAtLabel,
+    },
+  ];
+  const emptyChartState = (
+    <div className="crm-report-empty-chart flex h-full min-h-[180px] items-center justify-center rounded-2xl border border-dashed border-border/60 text-sm text-muted-foreground">
+      {t('common.noData')}
+    </div>
+  );
+
+  const kpiCards = [
+    {
+      key: 'newLeads',
+      title: t('kpis.newLeads.title'),
+      value: reports.summary.new_leads,
+      description: t('kpis.newLeads.description'),
+      icon: TrendingUp,
+      accentClassName: crmImplementedSections[0]?.colorClass,
+      iconContainerClassName: crmImplementedSections[0]?.glowClass,
+      className: 'crm-report-kpi-card',
+      contentClassName: 'crm-report-kpi-card__content',
+      valueClassName: 'crm-report-kpi-card__value',
+      descriptionClassName: 'crm-report-kpi-card__description',
+    },
+    {
+      key: 'qualifiedMoves',
+      title: t('kpis.qualifiedMoves.title'),
+      value: reports.summary.qualified_moves,
+      description: t('kpis.qualifiedMoves.description'),
+      icon: Target,
+      accentClassName: crmImplementedSections[1]?.colorClass,
+      iconContainerClassName: crmImplementedSections[1]?.glowClass,
+      className: 'crm-report-kpi-card',
+      contentClassName: 'crm-report-kpi-card__content',
+      valueClassName: 'crm-report-kpi-card__value',
+      descriptionClassName: 'crm-report-kpi-card__description',
+    },
+    {
+      key: 'customerMoves',
+      title: t('kpis.customerMoves.title'),
+      value: reports.summary.customer_moves,
+      description: t('kpis.customerMoves.description'),
+      icon: CircleDollarSign,
+      accentClassName: crmImplementedSections[2]?.colorClass,
+      iconContainerClassName: crmImplementedSections[2]?.glowClass,
+      className: 'crm-report-kpi-card',
+      contentClassName: 'crm-report-kpi-card__content',
+      valueClassName: 'crm-report-kpi-card__value',
+      descriptionClassName: 'crm-report-kpi-card__description',
+    },
+    {
+      key: 'lostMoves',
+      title: t('kpis.lostMoves.title'),
+      value: reports.summary.lost_moves,
+      description: t('kpis.lostMoves.description'),
+      icon: AlertTriangle,
+      accentClassName: crmImplementedSections[3]?.colorClass,
+      iconContainerClassName: crmImplementedSections[3]?.glowClass,
+      className: 'crm-report-kpi-card',
+      contentClassName: 'crm-report-kpi-card__content',
+      valueClassName: 'crm-report-kpi-card__value',
+      descriptionClassName: 'crm-report-kpi-card__description',
+    },
+    {
+      key: 'interactions',
+      title: t('kpis.interactions.title'),
+      value: reports.summary.interactions,
+      description: t('kpis.interactions.description'),
+      icon: Activity,
+      accentClassName: crmImplementedSections[4]?.colorClass,
+      iconContainerClassName: crmImplementedSections[4]?.glowClass,
+      className: 'crm-report-kpi-card',
+      contentClassName: 'crm-report-kpi-card__content',
+      valueClassName: 'crm-report-kpi-card__value',
+      descriptionClassName: 'crm-report-kpi-card__description',
+    },
+    {
+      key: 'followupsCompleted',
+      title: t('kpis.followupsCompleted.title'),
+      value: reports.summary.followups_completed,
+      description: t('kpis.followupsCompleted.description'),
+      icon: ChartNoAxesCombined,
+      accentClassName: crmImplementedSections[5]?.colorClass,
+      iconContainerClassName: crmImplementedSections[5]?.glowClass,
+      className: 'crm-report-kpi-card',
+      contentClassName: 'crm-report-kpi-card__content',
+      valueClassName: 'crm-report-kpi-card__value',
+      descriptionClassName: 'crm-report-kpi-card__description',
+    },
+    {
+      key: 'conversionRate',
+      title: t('kpis.conversionRate.title'),
+      value: percentFormatter.format(reports.summary.conversion_rate),
+      description: t('kpis.conversionRate.description'),
+      icon: TrendingUp,
+      accentClassName: 'from-slate-500/20 via-zinc-500/10 to-transparent',
+      iconContainerClassName: 'bg-slate-500/10 text-slate-700',
+      className: 'crm-report-kpi-card',
+      contentClassName: 'crm-report-kpi-card__content',
+      valueClassName: 'crm-report-kpi-card__value',
+      descriptionClassName: 'crm-report-kpi-card__description',
+    },
+  ];
+
+  const filters = (
+    <div className="flex flex-wrap items-center justify-end gap-2">
+      <Input
+        type="date"
+        value={dateFrom}
+        onChange={(event) => setDateFrom(event.target.value)}
+        className="w-full sm:w-[170px]"
+        aria-label={t('filters.dateFrom')}
+        max={dateTo}
+      />
+      <Input
+        type="date"
+        value={dateTo}
+        onChange={(event) => setDateTo(event.target.value)}
+        className="w-full sm:w-[170px]"
+        aria-label={t('filters.dateTo')}
+        min={dateFrom}
+      />
+      <Select
+        value={groupBy}
+        onValueChange={(value) => setGroupBy(value as ReportGroupBy)}
+      >
+        <SelectTrigger className="w-full sm:w-[170px]">
+          <SelectValue placeholder={t('filters.groupByPlaceholder')} />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value="day">{t('groupBy.day')}</SelectItem>
+          <SelectItem value="week">{t('groupBy.week')}</SelectItem>
+          <SelectItem value="month">{t('groupBy.month')}</SelectItem>
+          <SelectItem value="year">{t('groupBy.year')}</SelectItem>
+        </SelectContent>
+      </Select>
+    </div>
+  );
+
+  const handlePrintSelection = (layout: PrintLayoutMode) => {
+    if (!canPrint || isLoading || typeof window === 'undefined') {
+      return;
+    }
+
+    flushSync(() => {
+      setIsPrintDialogOpen(false);
+      setPrintLayoutMode(layout);
+      setPrintedAt(new Date());
+    });
+
+    window.requestAnimationFrame(() => {
+      window.requestAnimationFrame(() => {
+        window.print();
+      });
+    });
+  };
+
+  const actions = (
+    <div className="crm-report-screen-only flex gap-2">
+      <Button
+        variant="outline"
+        size="sm"
+        onClick={() => setIsPrintDialogOpen(true)}
+        disabled={!canPrint || isLoading}
+      >
+        <Printer className="size-4" />
+        {t('print')}
+      </Button>
+      <Button
+        variant="outline"
+        size="sm"
+        onClick={() => {
+          if (hasInvalidRange) {
+            return;
+          }
+
+          void refetch();
+        }}
+        disabled={hasInvalidRange}
+      >
+        {isFetching ? (
+          <Loader2 className="size-4 animate-spin" />
+        ) : (
+          <RefreshCcw className="size-4" />
+        )}
+        {t('refresh')}
+      </Button>
+    </div>
+  );
+
+  return (
+    <Page>
+      <style jsx global>{`
+        .crm-report-print-only {
+          display: none;
+        }
+
+        @media print {
+          @page {
+            size: A4 ${printLayoutMode};
+            margin: 9mm;
+          }
+
+          html,
+          body {
+            background: white !important;
+          }
+
+          body {
+            -webkit-print-color-adjust: exact;
+            print-color-adjust: exact;
+          }
+
+          .crm-report-screen-only {
+            display: none !important;
+          }
+
+          .crm-report-print-only {
+            display: block !important;
+          }
+
+          .crm-report-page {
+            color: #0f172a;
+          }
+
+          .crm-report-content {
+            gap: 0.75rem !important;
+          }
+
+          .crm-report-print-shell {
+            border: none !important;
+            border-radius: 0 !important;
+            padding: 0 0 0.5rem !important;
+            background: transparent !important;
+          }
+
+          .crm-report-print-header {
+            display: flex !important;
+            align-items: baseline;
+            justify-content: space-between;
+            gap: 1rem;
+          }
+
+          .crm-report-print-header h1 {
+            font-size: 1.55rem !important;
+            line-height: 1.1 !important;
+          }
+
+          .crm-report-print-header p {
+            max-width: 36rem;
+            font-size: 0.78rem !important;
+          }
+
+          .crm-report-print-meta {
+            margin-top: 0.75rem !important;
+            gap: 0.45rem !important;
+          }
+
+          .crm-report-page--portrait .crm-report-print-meta {
+            grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
+          }
+
+          .crm-report-page--landscape .crm-report-print-meta {
+            grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
+          }
+
+          .crm-report-print-meta-item {
+            border-radius: 0.65rem !important;
+            padding: 0.45rem 0.65rem !important;
+            break-inside: avoid;
+            page-break-inside: avoid;
+          }
+
+          .crm-report-kpi-grid {
+            gap: 0.45rem !important;
+          }
+
+          .crm-report-page--portrait .crm-report-kpi-grid {
+            grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
+          }
+
+          .crm-report-page--landscape .crm-report-kpi-grid {
+            grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
+          }
+
+          .crm-report-kpi-card {
+            break-inside: avoid;
+            page-break-inside: avoid;
+            border: 1px solid #e2e8f0 !important;
+            border-radius: 0.75rem !important;
+            background: white !important;
+            box-shadow: none !important;
+          }
+
+          .crm-report-kpi-card__content {
+            padding: 0.55rem 0.75rem !important;
+            gap: 0.5rem !important;
+          }
+
+          .crm-report-kpi-card__value {
+            margin-top: 0.25rem !important;
+            font-size: 1.6rem !important;
+            line-height: 1 !important;
+          }
+
+          .crm-report-kpi-card__description {
+            display: none !important;
+          }
+
+          .crm-report-section {
+            gap: 0 !important;
+            border: none !important;
+            border-radius: 0 !important;
+            background: transparent !important;
+            box-shadow: none !important;
+            padding: 0.45rem 0 0 !important;
+            break-inside: avoid;
+            page-break-inside: avoid;
+            border-top: 1px solid #dbe2ea !important;
+          }
+
+          .crm-report-section[data-kind='table'] {
+            break-inside: auto;
+            page-break-inside: auto;
+          }
+
+          .crm-report-section [data-slot='card-header'] {
+            padding: 0 0 0.35rem !important;
+            gap: 0.15rem !important;
+          }
+
+          .crm-report-section [data-slot='card-title'] {
+            font-size: 0.92rem !important;
+            line-height: 1.2 !important;
+          }
+
+          .crm-report-section [data-slot='card-description'] {
+            font-size: 0.73rem !important;
+            line-height: 1.25 !important;
+            color: #475569 !important;
+          }
+
+          .crm-report-section [data-slot='card-content'] {
+            padding: 0 !important;
+          }
+
+          .crm-report-chart-grid {
+            gap: 0.7rem !important;
+          }
+
+          .crm-report-page--portrait .crm-report-chart-grid {
+            grid-template-columns: 1fr !important;
+          }
+
+          .crm-report-page--landscape .crm-report-chart-grid {
+            grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
+          }
+
+          .crm-report-chart-content {
+            height: 205px !important;
+          }
+
+          .crm-report-page--landscape .crm-report-chart-content {
+            height: 185px !important;
+          }
+
+          .crm-report-section--timeline .crm-report-chart-content {
+            height: 220px !important;
+          }
+
+          .crm-report-page--landscape .crm-report-section--timeline .crm-report-chart-content {
+            height: 190px !important;
+          }
+
+          .crm-report-split-chart-content {
+            gap: 0.55rem !important;
+            align-items: start !important;
+          }
+
+          .crm-report-page--portrait .crm-report-split-chart-content {
+            grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr) !important;
+          }
+
+          .crm-report-page--landscape .crm-report-split-chart-content {
+            grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr) !important;
+          }
+
+          .crm-report-pie-chart {
+            height: 190px !important;
+          }
+
+          .crm-report-chart-content .recharts-responsive-container,
+          .crm-report-pie-chart .recharts-responsive-container {
+            min-height: 170px !important;
+          }
+
+          .crm-report-section .recharts-default-legend {
+            font-size: 10px !important;
+            line-height: 1.2 !important;
+          }
+
+          .crm-report-section .recharts-cartesian-axis-tick-value,
+          .crm-report-section .recharts-legend-item-text {
+            font-size: 10px !important;
+          }
+
+          .crm-report-source-list {
+            gap: 0.35rem !important;
+            break-inside: avoid;
+            page-break-inside: avoid;
+          }
+
+          .crm-report-source-list-item {
+            border-radius: 0.65rem !important;
+            padding: 0.45rem 0.65rem !important;
+          }
+
+          .crm-report-empty-chart {
+            min-height: 150px !important;
+            border-radius: 0.75rem !important;
+          }
+
+          .crm-report-table-card {
+            margin-top: 0.25rem !important;
+          }
+
+          .crm-report-table-card table {
+            font-size: 10.5px;
+          }
+
+          .crm-report-table-card th,
+          .crm-report-table-card td {
+            padding-top: 0.38rem !important;
+            padding-bottom: 0.38rem !important;
+            padding-left: 0.4rem !important;
+            padding-right: 0.4rem !important;
+          }
+
+          .crm-report-table-card thead {
+            display: table-header-group;
+          }
+
+          .crm-report-table-card tr {
+            break-inside: avoid;
+            page-break-inside: avoid;
+          }
+        }
+      `}</style>
+
+      <div
+        className={cn(
+          'crm-report-page',
+          printLayoutMode === 'landscape'
+            ? 'crm-report-page--landscape'
+            : 'crm-report-page--portrait'
+        )}
+      >
+        <div className="crm-report-screen-only">
+          <PageHeader
+            title={t('title')}
+            description={t('subtitle')}
+            breadcrumbs={[
+              { label: t('breadcrumbs.home'), href: '/' },
+              { label: t('breadcrumbs.crm'), href: '/contact/dashboard' },
+              { label: t('breadcrumbs.reports') },
+            ]}
+            extraContent={filters}
+            actions={actions}
+          />
+        </div>
+
+        <Dialog open={isPrintDialogOpen} onOpenChange={setIsPrintDialogOpen}>
+          <DialogContent className="crm-report-screen-only sm:max-w-2xl">
+            <DialogHeader>
+              <DialogTitle>{t('printDialog.title')}</DialogTitle>
+              <DialogDescription>{t('printDialog.description')}</DialogDescription>
+            </DialogHeader>
+            <div className="grid gap-4 md:grid-cols-2">
+              {(['portrait', 'landscape'] as const).map((layout) => (
+                <button
+                  key={layout}
+                  type="button"
+                  onClick={() => handlePrintSelection(layout)}
+                  className={cn(
+                    'rounded-3xl border border-border/70 bg-card p-5 text-left transition-colors hover:border-foreground/20 hover:bg-muted/40',
+                    printLayoutMode === layout && 'border-foreground/30 bg-muted/50'
+                  )}
+                >
+                  <div className="text-[11px] font-medium uppercase tracking-[0.2em] text-muted-foreground">
+                    {t(`printDialog.options.${layout}.eyebrow`)}
+                  </div>
+                  <div className="mt-3 text-lg font-semibold">
+                    {t(`printDialog.options.${layout}.title`)}
+                  </div>
+                  <div className="mt-2 text-sm leading-6 text-muted-foreground">
+                    {t(`printDialog.options.${layout}.description`)}
+                  </div>
+                  <div className="mt-5 inline-flex rounded-full bg-foreground px-3 py-1 text-xs font-medium text-background">
+                    {t(`printDialog.options.${layout}.action`)}
+                  </div>
+                </button>
+              ))}
+            </div>
+            <DialogFooter>
+              <Button
+                variant="outline"
+                onClick={() => setIsPrintDialogOpen(false)}
+              >
+                {t('printDialog.cancel')}
+              </Button>
+            </DialogFooter>
+          </DialogContent>
+        </Dialog>
+
+        <div className="crm-report-print-only crm-report-print-shell rounded-3xl border border-border/70 bg-background px-6 py-5">
+          <div className="crm-report-print-header space-y-1">
+            <div className="space-y-1">
+              <h1 className="text-2xl font-bold">{t('title')}</h1>
+              <p className="text-sm text-muted-foreground">
+                {t('printDescription')}
+              </p>
+            </div>
+            <div className="text-right text-xs uppercase tracking-[0.18em] text-muted-foreground">
+              {t(`printDialog.options.${printLayoutMode}.title`)}
+            </div>
+          </div>
+          <div className="crm-report-print-meta mt-4 grid gap-3 sm:grid-cols-2 xl:grid-cols-4">
+            {printFilterItems.map((item) => (
+              <div
+                key={item.label}
+                className="crm-report-print-meta-item rounded-2xl border border-border/70 px-4 py-3"
+              >
+                <div className="text-xs uppercase tracking-[0.18em] text-muted-foreground">
+                  {item.label}
+                </div>
+                <div className="mt-1 text-sm font-medium">{item.value}</div>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        <div className="crm-report-content space-y-6">
+        {hasInvalidRange ? (
+          <Card className="border-destructive/40 crm-report-section">
+            <CardContent className="py-6 text-sm text-destructive">
+              {t('common.invalidRange')}
+            </CardContent>
+          </Card>
+        ) : null}
+
+        <KpiCardsGrid
+          items={kpiCards}
+          className="crm-report-kpi-grid xl:grid-cols-4"
+        />
+
+        {isLoading ? (
+          <div className="space-y-6">
+            <Skeleton className="h-[360px] w-full" />
+            <div className="grid gap-6 xl:grid-cols-2">
+              <Skeleton className="h-[320px] w-full" />
+              <Skeleton className="h-[320px] w-full" />
+            </div>
+            <div className="grid gap-6 xl:grid-cols-2">
+              <Skeleton className="h-[320px] w-full" />
+              <Skeleton className="h-[320px] w-full" />
+            </div>
+            <Skeleton className="h-[320px] w-full" />
+          </div>
+        ) : (
+          <>
+            <Card className="crm-report-section crm-report-section--timeline">
+              <CardHeader>
+                <CardTitle>{t('charts.timeline.title')}</CardTitle>
+                <CardDescription>{t('charts.timeline.description')}</CardDescription>
+              </CardHeader>
+              <CardContent className="crm-report-chart-content h-[360px]">
+                {hasTimelineData ? (
+                  <ResponsiveContainer width="100%" height="100%">
+                    <LineChart
+                      data={timelineData}
+                      margin={{ top: 8, right: 8, left: -20, bottom: 4 }}
+                    >
+                      <CartesianGrid
+                        strokeDasharray="3 3"
+                        stroke="hsl(var(--border))"
+                        vertical={false}
+                      />
+                      <XAxis
+                        dataKey="label"
+                        tickLine={false}
+                        axisLine={false}
+                        fontSize={12}
+                      />
+                      <YAxis tickLine={false} axisLine={false} fontSize={12} />
+                      <Tooltip contentStyle={chartTooltipStyle} />
+                      <Legend />
+                      <Line
+                        type="monotone"
+                        dataKey="new_leads"
+                        name={t('kpis.newLeads.title')}
+                        stroke="#f97316"
+                        strokeWidth={2.5}
+                        dot={false}
+                      />
+                      <Line
+                        type="monotone"
+                        dataKey="qualified_moves"
+                        name={t('kpis.qualifiedMoves.title')}
+                        stroke="#0ea5e9"
+                        strokeWidth={2.5}
+                        dot={false}
+                      />
+                      <Line
+                        type="monotone"
+                        dataKey="customer_moves"
+                        name={t('kpis.customerMoves.title')}
+                        stroke="#14b8a6"
+                        strokeWidth={2.5}
+                        dot={false}
+                      />
+                      <Line
+                        type="monotone"
+                        dataKey="interactions"
+                        name={t('kpis.interactions.title')}
+                        stroke="#8b5cf6"
+                        strokeWidth={2}
+                        dot={false}
+                      />
+                      <Line
+                        type="monotone"
+                        dataKey="followups_completed"
+                        name={t('kpis.followupsCompleted.title')}
+                        stroke="#84cc16"
+                        strokeWidth={2}
+                        strokeDasharray="6 4"
+                        dot={false}
+                      />
+                    </LineChart>
+                  </ResponsiveContainer>
+                ) : (
+                  emptyChartState
+                )}
+              </CardContent>
+            </Card>
+
+            <div className="crm-report-chart-grid grid gap-6 xl:grid-cols-2">
+              <Card className="crm-report-section crm-report-section--source overflow-hidden">
+                <CardHeader>
+                  <CardTitle>{t('charts.source.title')}</CardTitle>
+                  <CardDescription>{t('charts.source.description')}</CardDescription>
+                </CardHeader>
+                <CardContent className="crm-report-split-chart-content grid gap-4 lg:h-[320px] lg:grid-cols-[minmax(220px,0.9fr)_minmax(0,1fr)]">
+                  <div className="crm-report-pie-chart h-[220px] lg:h-full">
+                    {hasSourceData ? (
+                      <ResponsiveContainer width="100%" height="100%">
+                        <PieChart>
+                          <Pie
+                            data={sourceChartData}
+                            dataKey="total"
+                            nameKey="name"
+                            innerRadius={48}
+                            outerRadius={78}
+                            paddingAngle={2}
+                          >
+                            {sourceChartData.map((entry) => (
+                              <Cell key={entry.name} fill={entry.fill} />
+                            ))}
+                          </Pie>
+                          <Tooltip contentStyle={chartTooltipStyle} />
+                        </PieChart>
+                      </ResponsiveContainer>
+                    ) : (
+                      emptyChartState
+                    )}
+                  </div>
+                  <div className="crm-report-source-list space-y-3">
+                    {sourceChartData.map((item) => (
+                      <div
+                        key={item.name}
+                        className="crm-report-source-list-item flex items-center justify-between gap-3 rounded-2xl border border-border/70 px-4 py-3"
+                      >
+                        <div className="flex min-w-0 items-center gap-3">
+                          <span
+                            className="inline-block size-3 rounded-full"
+                            style={{ backgroundColor: item.fill }}
+                          />
+                          <span className="truncate font-medium">{item.name}</span>
+                        </div>
+                        <span className="shrink-0 text-sm text-muted-foreground">
+                          {item.total}
+                        </span>
+                      </div>
+                    ))}
+                  </div>
+                </CardContent>
+              </Card>
+
+              <Card className="crm-report-section crm-report-section--stage">
+                <CardHeader>
+                  <CardTitle>{t('charts.currentStage.title')}</CardTitle>
+                  <CardDescription>
+                    {t('charts.currentStage.description')}
+                  </CardDescription>
+                </CardHeader>
+                <CardContent className="crm-report-chart-content h-[320px]">
+                  {hasStageData ? (
+                    <ResponsiveContainer width="100%" height="100%">
+                      <BarChart
+                        data={stageChartData}
+                        margin={{ top: 8, right: 8, left: -20, bottom: 4 }}
+                      >
+                        <CartesianGrid
+                          strokeDasharray="3 3"
+                          stroke="hsl(var(--border))"
+                          vertical={false}
+                        />
+                        <XAxis
+                          dataKey="name"
+                          tickLine={false}
+                          axisLine={false}
+                          fontSize={12}
+                        />
+                        <YAxis
+                          tickLine={false}
+                          axisLine={false}
+                          fontSize={12}
+                          allowDecimals={false}
+                        />
+                        <Tooltip contentStyle={chartTooltipStyle} />
+                        <Bar dataKey="total" radius={[8, 8, 0, 0]}>
+                          {stageChartData.map((entry) => (
+                            <Cell key={entry.name} fill={entry.fill} />
+                          ))}
+                        </Bar>
+                      </BarChart>
+                    </ResponsiveContainer>
+                  ) : (
+                    emptyChartState
+                  )}
+                </CardContent>
+              </Card>
+            </div>
+
+            <div className="crm-report-chart-grid grid gap-6 xl:grid-cols-2">
+              <Card className="crm-report-section crm-report-section--owners">
+                <CardHeader>
+                  <CardTitle>{t('charts.owners.title')}</CardTitle>
+                  <CardDescription>{t('charts.owners.description')}</CardDescription>
+                </CardHeader>
+                <CardContent className="crm-report-chart-content h-[320px]">
+                  {hasOwnersData ? (
+                    <ResponsiveContainer width="100%" height="100%">
+                      <BarChart
+                        data={ownersChartData}
+                        margin={{ top: 8, right: 8, left: -20, bottom: 4 }}
+                      >
+                        <CartesianGrid
+                          strokeDasharray="3 3"
+                          stroke="hsl(var(--border))"
+                          vertical={false}
+                        />
+                        <XAxis
+                          dataKey="owner_name"
+                          tickLine={false}
+                          axisLine={false}
+                          fontSize={12}
+                        />
+                        <YAxis
+                          tickLine={false}
+                          axisLine={false}
+                          fontSize={12}
+                          allowDecimals={false}
+                        />
+                        <Tooltip contentStyle={chartTooltipStyle} />
+                        <Legend />
+                        <Bar
+                          dataKey="interactions"
+                          name={t('kpis.interactions.title')}
+                          fill="#8b5cf6"
+                          radius={[8, 8, 0, 0]}
+                        />
+                        <Bar
+                          dataKey="followups_completed"
+                          name={t('kpis.followupsCompleted.title')}
+                          fill="#84cc16"
+                          radius={[8, 8, 0, 0]}
+                        />
+                        <Bar
+                          dataKey="customer_moves"
+                          name={t('kpis.customerMoves.title')}
+                          fill="#14b8a6"
+                          radius={[8, 8, 0, 0]}
+                        />
+                      </BarChart>
+                    </ResponsiveContainer>
+                  ) : (
+                    emptyChartState
+                  )}
+                </CardContent>
+              </Card>
+
+              <Card className="crm-report-section crm-report-section--activity">
+                <CardHeader>
+                  <CardTitle>{t('charts.activityType.title')}</CardTitle>
+                  <CardDescription>
+                    {t('charts.activityType.description')}
+                  </CardDescription>
+                </CardHeader>
+                <CardContent className="crm-report-chart-content h-[320px]">
+                  {hasActivityTypeData ? (
+                    <ResponsiveContainer width="100%" height="100%">
+                      <BarChart
+                        data={activityTypeChartData}
+                        margin={{ top: 8, right: 8, left: -20, bottom: 4 }}
+                      >
+                        <CartesianGrid
+                          strokeDasharray="3 3"
+                          stroke="hsl(var(--border))"
+                          vertical={false}
+                        />
+                        <XAxis
+                          dataKey="name"
+                          tickLine={false}
+                          axisLine={false}
+                          fontSize={12}
+                        />
+                        <YAxis
+                          tickLine={false}
+                          axisLine={false}
+                          fontSize={12}
+                          allowDecimals={false}
+                        />
+                        <Tooltip contentStyle={chartTooltipStyle} />
+                        <Bar dataKey="total" radius={[8, 8, 0, 0]}>
+                          {activityTypeChartData.map((entry) => (
+                            <Cell key={entry.name} fill={entry.fill} />
+                          ))}
+                        </Bar>
+                      </BarChart>
+                    </ResponsiveContainer>
+                  ) : (
+                    emptyChartState
+                  )}
+                </CardContent>
+              </Card>
+            </div>
+
+            <Card className="crm-report-section crm-report-table-card" data-kind="table">
+              <CardHeader>
+                <CardTitle>{t('table.title')}</CardTitle>
+                <CardDescription>{t('table.description')}</CardDescription>
+              </CardHeader>
+              <CardContent>
+                <Table>
+                  <TableHeader>
+                    <TableRow>
+                      <TableHead>{t('table.headers.period')}</TableHead>
+                      <TableHead className="text-right">
+                        {t('table.headers.newLeads')}
+                      </TableHead>
+                      <TableHead className="text-right">
+                        {t('table.headers.qualifiedMoves')}
+                      </TableHead>
+                      <TableHead className="text-right">
+                        {t('table.headers.customerMoves')}
+                      </TableHead>
+                      <TableHead className="text-right">
+                        {t('table.headers.lostMoves')}
+                      </TableHead>
+                      <TableHead className="text-right">
+                        {t('table.headers.interactions')}
+                      </TableHead>
+                      <TableHead className="text-right">
+                        {t('table.headers.followupsCompleted')}
+                      </TableHead>
+                      <TableHead className="text-right">
+                        {t('table.headers.conversionRate')}
+                      </TableHead>
+                    </TableRow>
+                  </TableHeader>
+                  <TableBody>
+                    {reports.table.length === 0 ? (
+                      <TableRow>
+                        <TableCell
+                          colSpan={8}
+                          className="text-center text-muted-foreground"
+                        >
+                          {t('common.noData')}
+                        </TableCell>
+                      </TableRow>
+                    ) : (
+                      reports.table.map((row) => (
+                        <TableRow key={row.period}>
+                          <TableCell>{row.label}</TableCell>
+                          <TableCell className="text-right">
+                            {row.new_leads}
+                          </TableCell>
+                          <TableCell className="text-right">
+                            {row.qualified_moves}
+                          </TableCell>
+                          <TableCell className="text-right">
+                            {row.customer_moves}
+                          </TableCell>
+                          <TableCell className="text-right">
+                            {row.lost_moves}
+                          </TableCell>
+                          <TableCell className="text-right">
+                            {row.interactions}
+                          </TableCell>
+                          <TableCell className="text-right">
+                            {row.followups_completed}
+                          </TableCell>
+                          <TableCell className="text-right font-medium">
+                            {percentFormatter.format(row.conversion_rate)}
+                          </TableCell>
+                        </TableRow>
+                      ))
+                    )}
+                  </TableBody>
+                </Table>
+              </CardContent>
+            </Card>
+          </>
+        )}
+        </div>
+      </div>
+    </Page>
+  );
+}