@hed-hog/contact 0.0.279 → 0.0.286

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

@@ -1,573 +1,491 @@
-'use client';
-
-import { CrmNav } from '../_components/crm-nav';
-import {
-  crmMockLeads,
-  crmOwners,
-  crmSourceOrder,
-  crmStageOrder,
-} from '../_lib/crm-mocks';
-import { crmImplementedSections } from '../_lib/crm-sections';
-import { Page, PageHeader } from '@/components/entity-list';
-import { Badge } from '@/components/ui/badge';
-import { Button } from '@/components/ui/button';
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from '@/components/ui/card';
-import { ScrollArea } from '@/components/ui/scroll-area';
-import { useApp } from '@hed-hog/next-app-provider';
-import {
-  AlertTriangle,
-  ArrowUpRight,
-  BriefcaseBusiness,
-  CalendarClock,
-  ChartNoAxesCombined,
-  CircleDollarSign,
-  RefreshCcw,
-  Sparkles,
-  Target,
-  TrendingUp,
-  UserRoundX,
-} from 'lucide-react';
-import Link from 'next/link';
-import { useTranslations } from 'next-intl';
-import {
-  Bar,
-  BarChart,
-  CartesianGrid,
-  Cell,
-  Pie,
-  PieChart,
-  ResponsiveContainer,
-  Tooltip,
-  XAxis,
-  YAxis,
-} from 'recharts';
-
-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 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">
-        <Card className="overflow-hidden border-orange-200/70 bg-gradient-to-br from-orange-50 via-background to-amber-50 py-0">
-          <CardContent className="grid min-w-0 gap-6 px-6 py-6 lg:grid-cols-[minmax(0,1.3fr)_minmax(280px,0.9fr)]">
-            <div className="min-w-0 space-y-4">
-              <Badge className="w-fit rounded-full bg-orange-500/10 px-3 py-1 text-orange-700 hover:bg-orange-500/10">
-                <Sparkles className="mr-2 size-3.5" />
-                {t('heroBadge')}
-              </Badge>
-              <div className="space-y-2">
-                <h2 className="text-3xl font-semibold tracking-tight text-balance">
-                  {t('heroTitle')}
-                </h2>
-                <p className="max-w-2xl text-sm leading-6 text-muted-foreground">
-                  {t('heroDescription')}
-                </p>
-              </div>
-              <div className="flex flex-wrap gap-3">
-                <Button asChild>
-                  <Link href="/contact/pipeline">{t('primaryAction')}</Link>
-                </Button>
-                <Button asChild variant="outline">
-                  <Link href="/contact/person">{t('secondaryAction')}</Link>
-                </Button>
-              </div>
-            </div>
-
-            <div className="grid gap-3 sm:grid-cols-3 lg:grid-cols-1">
-              {[
-                {
-                  icon: CircleDollarSign,
-                  label: t('summary.pipelineValue'),
-                  value: currencyFormatter.format(totalDealValue),
-                },
-                {
-                  icon: Target,
-                  label: t('summary.conversionRate'),
-                  value: `${conversionRate}%`,
-                },
-                {
-                  icon: BriefcaseBusiness,
-                  label: t('summary.activeOwners'),
-                  value: crmOwners.length,
-                },
-              ].map((item) => (
-                <div
-                  key={item.label}
-                  className="rounded-2xl border border-white/70 bg-white/80 p-4 shadow-sm backdrop-blur"
-                >
-                  <div className="mb-3 flex items-center gap-2 text-muted-foreground">
-                    <item.icon className="size-4" />
-                    <span className="text-xs uppercase tracking-[0.2em]">
-                      {item.label}
-                    </span>
-                  </div>
-                  <div className="text-2xl font-semibold tracking-tight">
-                    {item.value}
-                  </div>
-                </div>
-              ))}
-            </div>
-          </CardContent>
-        </Card>
-
-        <CrmNav currentHref="/contact/dashboard" />
-
-        <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
-          {[
-            { 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 (
-              <Card
-                key={item.key}
-                className="min-w-0 overflow-hidden border-border/70 py-0"
-              >
-                <div
-                  className={`h-1 w-full bg-gradient-to-r ${sectionStyle?.colorClass ?? fallbackKpiAccentClass}`}
-                />
-                <CardContent className="flex items-start justify-between gap-3 px-6 py-5">
-                  <div className="min-w-0">
-                    <p className="text-xs uppercase tracking-[0.2em] text-muted-foreground">
-                      {t(`kpis.${item.key}.title`)}
-                    </p>
-                    <p className="mt-2 text-3xl font-semibold tracking-tight">
-                      {item.value}
-                    </p>
-                    <p className="mt-1 text-sm text-muted-foreground">
-                      {t(`kpis.${item.key}.description`)}
-                    </p>
-                  </div>
-                  <div className="rounded-2xl bg-muted p-3 text-muted-foreground">
-                    <item.icon className="size-5" />
-                  </div>
-                </CardContent>
-              </Card>
-            );
-          })}
-        </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={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 { 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>
+  );
+}