@hed-hog/contact 0.0.294 → 0.0.295

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

@@ -9,9 +9,19 @@ import {
   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 { useApp } from '@hed-hog/next-app-provider';
+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,
@@ -19,6 +29,7 @@ import {
   CalendarClock,
   ChartNoAxesCombined,
   CircleDollarSign,
+  Loader2,
   RefreshCcw,
   Target,
   TrendingUp,
@@ -26,6 +37,7 @@ import {
 } from 'lucide-react';
 import { useTranslations } from 'next-intl';
 import Link from 'next/link';
+import { useState } from 'react';
 import {
   Bar,
   BarChart,
@@ -38,13 +50,14 @@ import {
   XAxis,
   YAxis,
 } from 'recharts';
-import {
-  crmMockLeads,
-  crmOwners,
-  crmSourceOrder,
-  crmStageOrder,
-} from '../_lib/crm-mocks';
 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',
@@ -66,98 +79,138 @@ const chartTooltipStyle = {
 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 { 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 { 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 = crmStageOrder.map((stage, index) => ({
-    name: t(`stageLabels.${stage}`),
-    total: crmMockLeads.filter((lead) => lead.lifecycle_stage === stage).length,
+  const stageChartData = dashboard.charts.stage.map((item, index) => ({
+    name: t(`stageLabels.${item.key}`),
+    total: item.total,
     fill: chartPalette[index % chartPalette.length],
   }));
 
-  const sourceChartData = crmSourceOrder.map((source, index) => ({
-    name: t(`sourceLabels.${source}`),
-    total: crmMockLeads.filter((lead) => lead.source === source).length,
+  const sourceChartData = dashboard.charts.source.map((item, index) => ({
+    name: t(`sourceLabels.${item.key}`),
+    total: item.total,
     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)
+  const topOwners = [...dashboard.charts.owner_performance]
+    .sort((left, right) => right.pipeline_value - left.pipeline_value)
     .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: '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: nextActions.length,
+      value: dashboard.kpis.next_actions,
       icon: ChartNoAxesCombined,
     },
   ].map((item, index) => {
@@ -186,6 +239,66 @@ export default function CrmDashboardPage() {
     }
   );
 
+  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
@@ -195,12 +308,19 @@ export default function CrmDashboardPage() {
           { label: t('breadcrumbs.home'), href: '/' },
           { label: t('breadcrumbs.crm') },
         ]}
+        extraContent={filters}
         actions={[
           {
             label: t('refresh'),
-            onClick: () => window.location.reload(),
+            onClick: () => {
+              void refetch();
+            },
             variant: 'outline',
-            icon: <RefreshCcw className="size-4" />,
+            icon: isFetching ? (
+              <Loader2 className="size-4 animate-spin" />
+            ) : (
+              <RefreshCcw className="size-4" />
+            ),
           },
         ]}
       />
@@ -208,283 +328,311 @@ export default function CrmDashboardPage() {
       <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} />
+        {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>
                       ))}
-                    </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,
-                        })}
+                  </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>
-                    </div>
-                    <span className="shrink-0 text-sm font-medium text-foreground">
-                      {currencyFormatter.format(owner.pipeline)}
-                    </span>
+                    ) : (
+                      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>
-                ))}
-              </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`)}
+                </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>
-                        <p className="truncate text-xs text-muted-foreground">
-                          {menuT(
-                            `sections.${section.translationKey}.description`
-                          )}
+                      ) : (
+                        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>
-                      </div>
+                      ) : (
+                        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>
-                    <ArrowUpRight className="size-4 shrink-0 text-muted-foreground" />
-                  </Link>
-                );
-              })}
-            </CardContent>
-          </Card>
-        </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>
   );