@hed-hog/contact 0.0.297 → 0.0.298

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

@@ -1,639 +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 { 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>
-  );
-}
+'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>
+  );
+}