@hed-hog/contact 0.0.294 → 0.0.296

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

@@ -1,491 +1,639 @@
-'use client';
-
-import { Page, PageHeader } from '@/components/entity-list';
-import { Badge } from '@/components/ui/badge';
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from '@/components/ui/card';
-import { KpiCardsGrid } from '@/components/ui/kpi-cards-grid';
-import { ScrollArea } from '@/components/ui/scroll-area';
-import { useApp } from '@hed-hog/next-app-provider';
-import {
-  AlertTriangle,
-  ArrowUpRight,
-  BriefcaseBusiness,
-  CalendarClock,
-  ChartNoAxesCombined,
-  CircleDollarSign,
-  RefreshCcw,
-  Target,
-  TrendingUp,
-  UserRoundX,
-} from 'lucide-react';
-import { useTranslations } from 'next-intl';
-import Link from 'next/link';
-import {
-  Bar,
-  BarChart,
-  CartesianGrid,
-  Cell,
-  Pie,
-  PieChart,
-  ResponsiveContainer,
-  Tooltip,
-  XAxis,
-  YAxis,
-} from 'recharts';
-import {
-  crmMockLeads,
-  crmOwners,
-  crmSourceOrder,
-  crmStageOrder,
-} from '../_lib/crm-mocks';
-import { crmImplementedSections } from '../_lib/crm-sections';
-
-const chartPalette = [
-  '#f97316',
-  '#14b8a6',
-  '#0ea5e9',
-  '#84cc16',
-  '#f59e0b',
-  '#ef4444',
-  '#8b5cf6',
-];
-
-const chartTooltipStyle = {
-  backgroundColor: 'hsl(var(--card))',
-  border: '1px solid hsl(var(--border))',
-  borderRadius: '12px',
-  fontSize: '12px',
-};
-
-const fallbackKpiAccentClass =
-  'from-orange-500/20 via-amber-500/10 to-transparent';
-
-export default function CrmDashboardPage() {
-  const t = useTranslations('contact.CrmDashboard');
-  const menuT = useTranslations('contact.CrmMenu');
-  const { currentLocaleCode } = useApp();
-
-  const qualifiedCount = crmMockLeads.filter((lead) =>
-    ['qualified', 'proposal', 'negotiation', 'customer'].includes(
-      lead.lifecycle_stage ?? ''
-    )
-  ).length;
-  const proposalCount = crmMockLeads.filter(
-    (lead) => lead.lifecycle_stage === 'proposal'
-  ).length;
-  const customerCount = crmMockLeads.filter(
-    (lead) => lead.lifecycle_stage === 'customer'
-  ).length;
-  const lostCount = crmMockLeads.filter(
-    (lead) => lead.lifecycle_stage === 'lost'
-  ).length;
-  const unassignedCount = crmMockLeads.filter(
-    (lead) => !lead.owner_user_id
-  ).length;
-  const overdueFollowups = crmMockLeads.filter(
-    (lead) =>
-      lead.next_action_at &&
-      new Date(lead.next_action_at) < new Date('2026-03-16T00:00:00.000Z')
-  ).length;
-
-  const totalDealValue = crmMockLeads.reduce(
-    (sum, lead) => sum + lead.dealValue,
-    0
-  );
-  const conversionRate = Math.round(
-    (customerCount / Math.max(crmMockLeads.length, 1)) * 100
-  );
-
-  const stageChartData = crmStageOrder.map((stage, index) => ({
-    name: t(`stageLabels.${stage}`),
-    total: crmMockLeads.filter((lead) => lead.lifecycle_stage === stage).length,
-    fill: chartPalette[index % chartPalette.length],
-  }));
-
-  const sourceChartData = crmSourceOrder.map((source, index) => ({
-    name: t(`sourceLabels.${source}`),
-    total: crmMockLeads.filter((lead) => lead.source === source).length,
-    fill: chartPalette[index % chartPalette.length],
-  }));
-
-  const ownerPerformanceData = crmOwners.map((owner) => {
-    const leads = crmMockLeads.filter(
-      (lead) => lead.owner_user_id === owner.id
-    );
-
-    return {
-      name: owner.name,
-      leads: leads.length,
-      customers: leads.filter((lead) => lead.lifecycle_stage === 'customer')
-        .length,
-      pipeline: leads
-        .filter((lead) => lead.lifecycle_stage !== 'lost')
-        .reduce((sum, lead) => sum + lead.dealValue, 0),
-    };
-  });
-
-  const nextActions = [...crmMockLeads]
-    .filter((lead) => lead.next_action_at)
-    .sort(
-      (left, right) =>
-        new Date(left.next_action_at ?? 0).getTime() -
-        new Date(right.next_action_at ?? 0).getTime()
-    )
-    .slice(0, 5);
-
-  const unattendedLeads = crmMockLeads
-    .filter((lead) => !lead.owner_user_id || lead.lifecycle_stage === 'new')
-    .slice(0, 5);
-
-  const topOwners = [...ownerPerformanceData]
-    .sort((left, right) => right.pipeline - left.pipeline)
-    .slice(0, 4);
-
-  const kpiCards = [
-    { key: 'totalLeads', value: crmMockLeads.length, icon: TrendingUp },
-    { key: 'qualified', value: qualifiedCount, icon: Target },
-    { key: 'proposal', value: proposalCount, icon: BriefcaseBusiness },
-    { key: 'customers', value: customerCount, icon: CircleDollarSign },
-    { key: 'lost', value: lostCount, icon: AlertTriangle },
-    { key: 'unassigned', value: unassignedCount, icon: UserRoundX },
-    { key: 'overdue', value: overdueFollowups, icon: CalendarClock },
-    {
-      key: 'nextActions',
-      value: nextActions.length,
-      icon: ChartNoAxesCombined,
-    },
-  ].map((item, index) => {
-    const sectionStyle =
-      crmImplementedSections[index % crmImplementedSections.length] ??
-      crmImplementedSections[0];
-
-    return {
-      key: item.key,
-      title: t(`kpis.${item.key}.title`),
-      value: item.value,
-      description: t(`kpis.${item.key}.description`),
-      icon: item.icon,
-      accentClassName: sectionStyle?.colorClass ?? fallbackKpiAccentClass,
-      iconContainerClassName:
-        sectionStyle?.glowClass ?? 'bg-sky-500/10 text-sky-700',
-    };
-  });
-
-  const currencyFormatter = new Intl.NumberFormat(
-    currentLocaleCode === 'pt' ? 'pt-BR' : 'en-US',
-    {
-      style: 'currency',
-      currency: 'BRL',
-      maximumFractionDigits: 0,
-    }
-  );
-
-  return (
-    <Page>
-      <PageHeader
-        title={t('title')}
-        description={t('subtitle')}
-        breadcrumbs={[
-          { label: t('breadcrumbs.home'), href: '/' },
-          { label: t('breadcrumbs.crm') },
-        ]}
-        actions={[
-          {
-            label: t('refresh'),
-            onClick: () => window.location.reload(),
-            variant: 'outline',
-            icon: <RefreshCcw className="size-4" />,
-          },
-        ]}
-      />
-
-      <div className="min-w-0 space-y-6 overflow-x-hidden">
-        <KpiCardsGrid items={kpiCards} />
-
-        <div className="grid min-w-0 gap-6 xl:grid-cols-[minmax(0,1.2fr)_minmax(320px,0.8fr)]">
-          <Card className="min-w-0">
-            <CardHeader>
-              <CardTitle>{t('charts.stage.title')}</CardTitle>
-              <CardDescription>{t('charts.stage.description')}</CardDescription>
-            </CardHeader>
-            <CardContent className="h-[320px]">
-              <ResponsiveContainer width="100%" height="100%">
-                <BarChart data={stageChartData}>
-                  <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>
-            </CardContent>
-          </Card>
-
-          <Card className="min-w-0 overflow-hidden">
-            <CardHeader>
-              <CardTitle>{t('charts.source.title')}</CardTitle>
-              <CardDescription>
-                {t('charts.source.description')}
-              </CardDescription>
-            </CardHeader>
-            <CardContent className="grid min-w-0 gap-4 overflow-hidden lg:h-[320px] lg:grid-cols-[minmax(220px,0.9fr)_minmax(0,1fr)]">
-              <div className="h-[220px] min-w-0 lg:h-full">
-                <ResponsiveContainer width="100%" height="100%">
-                  <PieChart>
-                    <Pie
-                      data={sourceChartData}
-                      dataKey="total"
-                      nameKey="name"
-                      innerRadius={58}
-                      outerRadius={94}
-                      paddingAngle={2}
-                    >
-                      {sourceChartData.map((entry) => (
-                        <Cell key={entry.name} fill={entry.fill} />
-                      ))}
-                    </Pie>
-                    <Tooltip contentStyle={chartTooltipStyle} />
-                  </PieChart>
-                </ResponsiveContainer>
-              </div>
-              <ScrollArea className="min-w-0 lg:h-full">
-                <div className="space-y-3 lg:pr-3">
-                  {sourceChartData.map((item) => (
-                    <div
-                      key={item.name}
-                      className="flex min-w-0 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>
-              </ScrollArea>
-            </CardContent>
-          </Card>
-        </div>
-
-        <div className="grid min-w-0 gap-6 xl:grid-cols-[minmax(0,1.1fr)_minmax(320px,0.9fr)]">
-          <Card className="min-w-0">
-            <CardHeader>
-              <CardTitle>{t('charts.owner.title')}</CardTitle>
-              <CardDescription>{t('charts.owner.description')}</CardDescription>
-            </CardHeader>
-            <CardContent className="h-[320px]">
-              <ResponsiveContainer width="100%" height="100%">
-                <BarChart data={ownerPerformanceData}>
-                  <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="leads" fill="#f97316" radius={[8, 8, 0, 0]} />
-                  <Bar
-                    dataKey="customers"
-                    fill="#0ea5e9"
-                    radius={[8, 8, 0, 0]}
-                  />
-                </BarChart>
-              </ResponsiveContainer>
-            </CardContent>
-          </Card>
-
-          <Card className="min-w-0 overflow-hidden">
-            <CardHeader>
-              <CardTitle>{t('bestOwners.title')}</CardTitle>
-              <CardDescription>{t('bestOwners.description')}</CardDescription>
-            </CardHeader>
-            <CardContent>
-              <div className="space-y-3">
-                {topOwners.map((owner, index) => (
-                  <div
-                    key={owner.name}
-                    className="flex min-w-0 items-center justify-between gap-3 rounded-2xl border border-border/70 px-4 py-3"
-                  >
-                    <div className="min-w-0">
-                      <p className="truncate font-medium">
-                        {index + 1}. {owner.name}
-                      </p>
-                      <p className="truncate text-xs text-muted-foreground">
-                        {t('bestOwners.meta', {
-                          leads: owner.leads,
-                          customers: owner.customers,
-                        })}
-                      </p>
-                    </div>
-                    <span className="shrink-0 text-sm font-medium text-foreground">
-                      {currencyFormatter.format(owner.pipeline)}
-                    </span>
-                  </div>
-                ))}
-              </div>
-            </CardContent>
-          </Card>
-        </div>
-
-        <div className="grid gap-6 xl:grid-cols-3">
-          <Card className="min-w-0 overflow-hidden xl:col-span-1">
-            <CardHeader>
-              <CardTitle>{t('blocks.nextActions.title')}</CardTitle>
-              <CardDescription>
-                {t('blocks.nextActions.description')}
-              </CardDescription>
-            </CardHeader>
-            <CardContent>
-              <ScrollArea className="h-[320px] pr-3">
-                <div className="space-y-3">
-                  {nextActions.map((lead) => (
-                    <div
-                      key={lead.id}
-                      className="rounded-2xl border border-border/70 px-4 py-3"
-                    >
-                      <p className="font-medium">{lead.name}</p>
-                      <p className="text-xs text-muted-foreground">
-                        {lead.owner_user?.name || t('common.unassigned')}
-                      </p>
-                      <div className="mt-2 flex flex-wrap gap-2">
-                        <Badge variant="outline">
-                          {t(`stageLabels.${lead.lifecycle_stage ?? 'new'}`)}
-                        </Badge>
-                        <Badge variant="secondary">
-                          {t(`sourceLabels.${lead.source ?? 'other'}`)}
-                        </Badge>
-                      </div>
-                      <p className="mt-2 text-sm text-muted-foreground">
-                        {t('blocks.nextActions.when', {
-                          date: new Date(
-                            lead.next_action_at ?? ''
-                          ).toLocaleString(),
-                        })}
-                      </p>
-                    </div>
-                  ))}
-                </div>
-              </ScrollArea>
-            </CardContent>
-          </Card>
-
-          <Card className="min-w-0 overflow-hidden xl:col-span-1">
-            <CardHeader>
-              <CardTitle>{t('blocks.unattended.title')}</CardTitle>
-              <CardDescription>
-                {t('blocks.unattended.description')}
-              </CardDescription>
-            </CardHeader>
-            <CardContent>
-              <ScrollArea className="h-[320px] pr-3">
-                <div className="space-y-3">
-                  {unattendedLeads.map((lead) => (
-                    <div
-                      key={lead.id}
-                      className="rounded-2xl border border-border/70 px-4 py-3"
-                    >
-                      <p className="font-medium">{lead.name}</p>
-                      <p className="text-xs text-muted-foreground">
-                        {lead.owner_user?.name || t('common.unassigned')}
-                      </p>
-                      <p className="mt-2 text-sm text-muted-foreground">
-                        {t('blocks.unattended.meta', {
-                          stage: t(
-                            `stageLabels.${lead.lifecycle_stage ?? 'new'}`
-                          ),
-                          source: t(`sourceLabels.${lead.source ?? 'other'}`),
-                        })}
-                      </p>
-                    </div>
-                  ))}
-                </div>
-              </ScrollArea>
-            </CardContent>
-          </Card>
-
-          <Card className="min-w-0 overflow-hidden xl:col-span-1">
-            <CardHeader>
-              <CardTitle>{t('blocks.quickAccess.title')}</CardTitle>
-              <CardDescription>
-                {t('blocks.quickAccess.description')}
-              </CardDescription>
-            </CardHeader>
-            <CardContent className="space-y-3">
-              {crmImplementedSections.map((section) => {
-                const Icon = section.icon;
-
-                return (
-                  <Link
-                    key={section.href}
-                    href={section.href}
-                    className="flex min-w-0 items-center justify-between gap-3 rounded-2xl border border-border/70 px-4 py-3 transition-colors hover:bg-muted/40"
-                  >
-                    <div className="flex min-w-0 items-center gap-3">
-                      <div className={`rounded-2xl p-3 ${section.glowClass}`}>
-                        <Icon className="size-4" />
-                      </div>
-                      <div className="min-w-0">
-                        <p className="truncate font-medium">
-                          {menuT(`sections.${section.translationKey}.title`)}
-                        </p>
-                        <p className="truncate text-xs text-muted-foreground">
-                          {menuT(
-                            `sections.${section.translationKey}.description`
-                          )}
-                        </p>
-                      </div>
-                    </div>
-                    <ArrowUpRight className="size-4 shrink-0 text-muted-foreground" />
-                  </Link>
-                );
-              })}
-            </CardContent>
-          </Card>
-        </div>
-      </div>
-    </Page>
-  );
-}
+'use client';
+
+import { Page, PageHeader } from '@/components/entity-list';
+import { Badge } from '@/components/ui/badge';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+import { Input } from '@/components/ui/input';
+import { KpiCardsGrid } from '@/components/ui/kpi-cards-grid';
+import { ScrollArea } from '@/components/ui/scroll-area';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { Skeleton } from '@/components/ui/skeleton';
+import { formatDateTime } from '@/lib/format-date';
+import { useApp, useQuery } from '@hed-hog/next-app-provider';
+import {
+  AlertTriangle,
+  ArrowUpRight,
+  BriefcaseBusiness,
+  CalendarClock,
+  ChartNoAxesCombined,
+  CircleDollarSign,
+  Loader2,
+  RefreshCcw,
+  Target,
+  TrendingUp,
+  UserRoundX,
+} from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import Link from 'next/link';
+import { useState } from 'react';
+import {
+  Bar,
+  BarChart,
+  CartesianGrid,
+  Cell,
+  Pie,
+  PieChart,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+  YAxis,
+} from 'recharts';
+import { crmImplementedSections } from '../_lib/crm-sections';
+import type { UserOption } from '../person/_components/person-types';
+import {
+  CRM_DASHBOARD_SOURCE_ORDER,
+  CRM_DASHBOARD_STAGE_ORDER,
+  type DashboardPeriod,
+  type DashboardResponse,
+} from './_components/dashboard-types';
+
+const chartPalette = [
+  '#f97316',
+  '#14b8a6',
+  '#0ea5e9',
+  '#84cc16',
+  '#f59e0b',
+  '#ef4444',
+  '#8b5cf6',
+];
+
+const chartTooltipStyle = {
+  backgroundColor: 'hsl(var(--card))',
+  border: '1px solid hsl(var(--border))',
+  borderRadius: '12px',
+  fontSize: '12px',
+};
+
+const fallbackKpiAccentClass =
+  'from-orange-500/20 via-amber-500/10 to-transparent';
+
+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 getDefaultCustomRange() {
+  const now = new Date();
+  return {
+    dateFrom: formatDateInputValue(addDays(now, -29)),
+    dateTo: formatDateInputValue(now),
+  };
+}
+
+const emptyDashboard: DashboardResponse = {
+  kpis: {
+    total_leads: 0,
+    qualified: 0,
+    proposal: 0,
+    customers: 0,
+    lost: 0,
+    unassigned: 0,
+    overdue: 0,
+    next_actions: 0,
+  },
+  charts: {
+    stage: CRM_DASHBOARD_STAGE_ORDER.map((key) => ({ key, total: 0 })),
+    source: CRM_DASHBOARD_SOURCE_ORDER.map((key) => ({ key, total: 0 })),
+    owner_performance: [],
+  },
+  lists: {
+    next_actions: [],
+    unattended: [],
+  },
+};
+
+export default function CrmDashboardPage() {
+  const t = useTranslations('contact.CrmDashboard');
+  const menuT = useTranslations('contact.CrmMenu');
+  const { request, currentLocaleCode, getSettingValue } = useApp();
+  const defaultCustomRange = getDefaultCustomRange();
+
+  const [ownerUserId, setOwnerUserId] = useState('all');
+  const [period, setPeriod] = useState<DashboardPeriod>('30d');
+  const [dateFrom, setDateFrom] = useState(defaultCustomRange.dateFrom);
+  const [dateTo, setDateTo] = useState(defaultCustomRange.dateTo);
+
+  const { data: owners = [] } = useQuery<UserOption[]>({
+    queryKey: ['contact-owner-options', currentLocaleCode],
+    queryFn: async () => {
+      const response = await request<UserOption[]>({
+        url: '/person/owner-options',
+        method: 'GET',
+      });
+
+      return response.data;
+    },
+    placeholderData: (previous) => previous ?? [],
+  });
+
+  const {
+    data: dashboard = emptyDashboard,
+    isLoading,
+    isFetching,
+    refetch,
+  } = useQuery<DashboardResponse>({
+    queryKey: [
+      'contact-dashboard',
+      ownerUserId,
+      period,
+      dateFrom,
+      dateTo,
+      currentLocaleCode,
+    ],
+    queryFn: async () => {
+      const params = new URLSearchParams();
+
+      if (ownerUserId !== 'all') {
+        params.set('owner_user_id', ownerUserId);
+      }
+
+      params.set('period', period);
+
+      if (period === 'custom') {
+        params.set('date_from', dateFrom);
+        params.set('date_to', dateTo);
+      }
+
+      const response = await request<DashboardResponse>({
+        url: `/person/dashboard?${params.toString()}`,
+        method: 'GET',
+      });
+
+      return response.data;
+    },
+    placeholderData: (previous) => previous ?? emptyDashboard,
+  });
+
+  const stageChartData = dashboard.charts.stage.map((item, index) => ({
+    name: t(`stageLabels.${item.key}`),
+    total: item.total,
+    fill: chartPalette[index % chartPalette.length],
+  }));
+
+  const sourceChartData = dashboard.charts.source.map((item, index) => ({
+    name: t(`sourceLabels.${item.key}`),
+    total: item.total,
+    fill: chartPalette[index % chartPalette.length],
+  }));
+
+  const topOwners = [...dashboard.charts.owner_performance]
+    .sort((left, right) => right.pipeline_value - left.pipeline_value)
+    .slice(0, 4);
+
+  const kpiCards = [
+    { key: 'totalLeads', value: dashboard.kpis.total_leads, icon: TrendingUp },
+    { key: 'qualified', value: dashboard.kpis.qualified, icon: Target },
+    { key: 'proposal', value: dashboard.kpis.proposal, icon: BriefcaseBusiness },
+    { key: 'customers', value: dashboard.kpis.customers, icon: CircleDollarSign },
+    { key: 'lost', value: dashboard.kpis.lost, icon: AlertTriangle },
+    { key: 'unassigned', value: dashboard.kpis.unassigned, icon: UserRoundX },
+    { key: 'overdue', value: dashboard.kpis.overdue, icon: CalendarClock },
+    {
+      key: 'nextActions',
+      value: dashboard.kpis.next_actions,
+      icon: ChartNoAxesCombined,
+    },
+  ].map((item, index) => {
+    const sectionStyle =
+      crmImplementedSections[index % crmImplementedSections.length] ??
+      crmImplementedSections[0];
+
+    return {
+      key: item.key,
+      title: t(`kpis.${item.key}.title`),
+      value: item.value,
+      description: t(`kpis.${item.key}.description`),
+      icon: item.icon,
+      accentClassName: sectionStyle?.colorClass ?? fallbackKpiAccentClass,
+      iconContainerClassName:
+        sectionStyle?.glowClass ?? 'bg-sky-500/10 text-sky-700',
+    };
+  });
+
+  const currencyFormatter = new Intl.NumberFormat(
+    currentLocaleCode === 'pt' ? 'pt-BR' : 'en-US',
+    {
+      style: 'currency',
+      currency: 'BRL',
+      maximumFractionDigits: 0,
+    }
+  );
+
+  const filters = (
+    <div className="flex flex-wrap items-center justify-end gap-2">
+      <Select value={ownerUserId} onValueChange={setOwnerUserId}>
+        <SelectTrigger className="w-full sm:w-[180px]">
+          <SelectValue placeholder={t('filters.ownerPlaceholder')} />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value="all">{t('filters.ownerAll')}</SelectItem>
+          {owners.map((owner) => (
+            <SelectItem key={owner.id} value={String(owner.id)}>
+              {owner.name}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+
+      <Select
+        value={period}
+        onValueChange={(value) => {
+          const nextPeriod = value as DashboardPeriod;
+          setPeriod(nextPeriod);
+          if (nextPeriod === 'custom' && (!dateFrom || !dateTo)) {
+            const nextRange = getDefaultCustomRange();
+            setDateFrom(nextRange.dateFrom);
+            setDateTo(nextRange.dateTo);
+          }
+        }}
+      >
+        <SelectTrigger className="w-full sm:w-[180px]">
+          <SelectValue placeholder={t('filters.periodPlaceholder')} />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value="7d">{t('filters.period7d')}</SelectItem>
+          <SelectItem value="30d">{t('filters.period30d')}</SelectItem>
+          <SelectItem value="90d">{t('filters.period90d')}</SelectItem>
+          <SelectItem value="custom">{t('filters.periodCustom')}</SelectItem>
+        </SelectContent>
+      </Select>
+
+      {period === 'custom' ? (
+        <>
+          <Input
+            type="date"
+            value={dateFrom}
+            onChange={(event) => setDateFrom(event.target.value)}
+            className="w-full sm:w-[170px]"
+            aria-label={t('filters.dateFrom')}
+          />
+          <Input
+            type="date"
+            value={dateTo}
+            onChange={(event) => setDateTo(event.target.value)}
+            className="w-full sm:w-[170px]"
+            aria-label={t('filters.dateTo')}
+          />
+        </>
+      ) : null}
+    </div>
+  );
+
+  return (
+    <Page>
+      <PageHeader
+        title={t('title')}
+        description={t('subtitle')}
+        breadcrumbs={[
+          { label: t('breadcrumbs.home'), href: '/' },
+          { label: t('breadcrumbs.crm') },
+        ]}
+        extraContent={filters}
+        actions={[
+          {
+            label: t('refresh'),
+            onClick: () => {
+              void refetch();
+            },
+            variant: 'outline',
+            icon: isFetching ? (
+              <Loader2 className="size-4 animate-spin" />
+            ) : (
+              <RefreshCcw className="size-4" />
+            ),
+          },
+        ]}
+      />
+
+      <div className="min-w-0 space-y-6 overflow-x-hidden">
+        <KpiCardsGrid items={kpiCards} />
+
+        {isLoading ? (
+          <div className="space-y-6">
+            <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>
+            <div className="grid gap-6 xl:grid-cols-3">
+              <Skeleton className="h-[320px] w-full" />
+              <Skeleton className="h-[320px] w-full" />
+              <Skeleton className="h-[320px] w-full" />
+            </div>
+          </div>
+        ) : (
+          <>
+            <div className="grid min-w-0 gap-6 xl:grid-cols-[minmax(0,1.2fr)_minmax(320px,0.8fr)]">
+              <Card className="min-w-0">
+                <CardHeader>
+                  <CardTitle>{t('charts.stage.title')}</CardTitle>
+                  <CardDescription>{t('charts.stage.description')}</CardDescription>
+                </CardHeader>
+                <CardContent className="h-[320px]">
+                  <ResponsiveContainer width="100%" height="100%">
+                    <BarChart data={stageChartData}>
+                      <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>
+                </CardContent>
+              </Card>
+
+              <Card className="min-w-0 overflow-hidden">
+                <CardHeader>
+                  <CardTitle>{t('charts.source.title')}</CardTitle>
+                  <CardDescription>{t('charts.source.description')}</CardDescription>
+                </CardHeader>
+                <CardContent className="grid min-w-0 gap-4 overflow-hidden lg:h-[320px] lg:grid-cols-[minmax(220px,0.9fr)_minmax(0,1fr)]">
+                  <div className="h-[220px] min-w-0 lg:h-full">
+                    <ResponsiveContainer width="100%" height="100%">
+                      <PieChart>
+                        <Pie
+                          data={sourceChartData}
+                          dataKey="total"
+                          nameKey="name"
+                          innerRadius={58}
+                          outerRadius={94}
+                          paddingAngle={2}
+                        >
+                          {sourceChartData.map((entry) => (
+                            <Cell key={entry.name} fill={entry.fill} />
+                          ))}
+                        </Pie>
+                        <Tooltip contentStyle={chartTooltipStyle} />
+                      </PieChart>
+                    </ResponsiveContainer>
+                  </div>
+                  <ScrollArea className="min-w-0 lg:h-full">
+                    <div className="space-y-3 lg:pr-3">
+                      {sourceChartData.map((item) => (
+                        <div
+                          key={item.name}
+                          className="flex min-w-0 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>
+                  </ScrollArea>
+                </CardContent>
+              </Card>
+            </div>
+
+            <div className="grid min-w-0 gap-6 xl:grid-cols-[minmax(0,1.1fr)_minmax(320px,0.9fr)]">
+              <Card className="min-w-0">
+                <CardHeader>
+                  <CardTitle>{t('charts.owner.title')}</CardTitle>
+                  <CardDescription>{t('charts.owner.description')}</CardDescription>
+                </CardHeader>
+                <CardContent className="h-[320px]">
+                  <ResponsiveContainer width="100%" height="100%">
+                    <BarChart data={dashboard.charts.owner_performance}>
+                      <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} />
+                      <Bar dataKey="leads" fill="#f97316" radius={[8, 8, 0, 0]} />
+                      <Bar
+                        dataKey="customers"
+                        fill="#0ea5e9"
+                        radius={[8, 8, 0, 0]}
+                      />
+                    </BarChart>
+                  </ResponsiveContainer>
+                </CardContent>
+              </Card>
+
+              <Card className="min-w-0 overflow-hidden">
+                <CardHeader>
+                  <CardTitle>{t('bestOwners.title')}</CardTitle>
+                  <CardDescription>{t('bestOwners.description')}</CardDescription>
+                </CardHeader>
+                <CardContent>
+                  <div className="space-y-3">
+                    {topOwners.length === 0 ? (
+                      <p className="text-sm text-muted-foreground">
+                        {t('common.noData')}
+                      </p>
+                    ) : (
+                      topOwners.map((owner, index) => (
+                        <div
+                          key={`${owner.owner_user_id}-${owner.owner_name}`}
+                          className="flex min-w-0 items-center justify-between gap-3 rounded-2xl border border-border/70 px-4 py-3"
+                        >
+                          <div className="min-w-0">
+                            <p className="truncate font-medium">
+                              {index + 1}. {owner.owner_name}
+                            </p>
+                            <p className="truncate text-xs text-muted-foreground">
+                              {t('bestOwners.meta', {
+                                leads: owner.leads,
+                                customers: owner.customers,
+                              })}
+                            </p>
+                          </div>
+                          <span className="shrink-0 text-sm font-medium text-foreground">
+                            {currencyFormatter.format(owner.pipeline_value)}
+                          </span>
+                        </div>
+                      ))
+                    )}
+                  </div>
+                </CardContent>
+              </Card>
+            </div>
+
+            <div className="grid gap-6 xl:grid-cols-3">
+              <Card className="min-w-0 overflow-hidden xl:col-span-1">
+                <CardHeader>
+                  <CardTitle>{t('blocks.nextActions.title')}</CardTitle>
+                  <CardDescription>{t('blocks.nextActions.description')}</CardDescription>
+                </CardHeader>
+                <CardContent>
+                  <ScrollArea className="h-[320px] pr-3">
+                    <div className="space-y-3">
+                      {dashboard.lists.next_actions.length === 0 ? (
+                        <p className="text-sm text-muted-foreground">
+                          {t('common.noData')}
+                        </p>
+                      ) : (
+                        dashboard.lists.next_actions.map((lead) => (
+                          <div
+                            key={lead.id}
+                            className="rounded-2xl border border-border/70 px-4 py-3"
+                          >
+                            <p className="font-medium">{lead.name}</p>
+                            <p className="text-xs text-muted-foreground">
+                              {lead.owner_user?.name || t('common.unassigned')}
+                            </p>
+                            <div className="mt-2 flex flex-wrap gap-2">
+                              <Badge variant="outline">
+                                {t(`stageLabels.${lead.lifecycle_stage}`)}
+                              </Badge>
+                              <Badge variant="secondary">
+                                {t(`sourceLabels.${lead.source}`)}
+                              </Badge>
+                            </div>
+                            <p className="mt-2 text-sm text-muted-foreground">
+                              {t('blocks.nextActions.when', {
+                                date: formatDateTime(
+                                  lead.next_action_at ?? '',
+                                  getSettingValue,
+                                  currentLocaleCode
+                                ),
+                              })}
+                            </p>
+                          </div>
+                        ))
+                      )}
+                    </div>
+                  </ScrollArea>
+                </CardContent>
+              </Card>
+
+              <Card className="min-w-0 overflow-hidden xl:col-span-1">
+                <CardHeader>
+                  <CardTitle>{t('blocks.unattended.title')}</CardTitle>
+                  <CardDescription>{t('blocks.unattended.description')}</CardDescription>
+                </CardHeader>
+                <CardContent>
+                  <ScrollArea className="h-[320px] pr-3">
+                    <div className="space-y-3">
+                      {dashboard.lists.unattended.length === 0 ? (
+                        <p className="text-sm text-muted-foreground">
+                          {t('common.noData')}
+                        </p>
+                      ) : (
+                        dashboard.lists.unattended.map((lead) => (
+                          <div
+                            key={lead.id}
+                            className="rounded-2xl border border-border/70 px-4 py-3"
+                          >
+                            <p className="font-medium">{lead.name}</p>
+                            <p className="text-xs text-muted-foreground">
+                              {lead.owner_user?.name || t('common.unassigned')}
+                            </p>
+                            <p className="mt-2 text-sm text-muted-foreground">
+                              {t('blocks.unattended.meta', {
+                                stage: t(`stageLabels.${lead.lifecycle_stage}`),
+                                source: t(`sourceLabels.${lead.source}`),
+                              })}
+                            </p>
+                          </div>
+                        ))
+                      )}
+                    </div>
+                  </ScrollArea>
+                </CardContent>
+              </Card>
+
+              <Card className="min-w-0 overflow-hidden xl:col-span-1">
+                <CardHeader>
+                  <CardTitle>{t('blocks.quickAccess.title')}</CardTitle>
+                  <CardDescription>{t('blocks.quickAccess.description')}</CardDescription>
+                </CardHeader>
+                <CardContent className="space-y-3">
+                  {crmImplementedSections.map((section) => {
+                    const Icon = section.icon;
+
+                    return (
+                      <Link
+                        key={section.href}
+                        href={section.href}
+                        className="flex min-w-0 items-center justify-between gap-3 rounded-2xl border border-border/70 px-4 py-3 transition-colors hover:bg-muted/40"
+                      >
+                        <div className="flex min-w-0 items-center gap-3">
+                          <div className={`rounded-2xl p-3 ${section.glowClass}`}>
+                            <Icon className="size-4" />
+                          </div>
+                          <div className="min-w-0">
+                            <p className="truncate font-medium">
+                              {menuT(`sections.${section.translationKey}.title`)}
+                            </p>
+                            <p className="truncate text-xs text-muted-foreground">
+                              {menuT(
+                                `sections.${section.translationKey}.description`
+                              )}
+                            </p>
+                          </div>
+                        </div>
+                        <ArrowUpRight className="size-4 shrink-0 text-muted-foreground" />
+                      </Link>
+                    );
+                  })}
+                </CardContent>
+              </Card>
+            </div>
+          </>
+        )}
+      </div>
+    </Page>
+  );
+}