@hed-hog/contact 0.0.299 → 0.0.301

package/hedhog/frontend/app/dashboard/_components/use-crm-dashboard-data.ts.ejs

@@ -0,0 +1,104 @@
+'use client';
+
+import { useWidgetData } from '@/hooks/use-widget-data';
+import type { DashboardPeriod, DashboardResponse } from './dashboard-types';
+
+export const emptyDashboard: DashboardResponse = {
+  kpis: {
+    total_leads: 0,
+    qualified: 0,
+    proposal: 0,
+    customers: 0,
+    lost: 0,
+    unassigned: 0,
+    overdue: 0,
+    next_actions: 0,
+  },
+  charts: {
+    stage: [],
+    source: [],
+    owner_performance: [],
+  },
+  lists: {
+    next_actions: [],
+    unattended: [],
+  },
+};
+
+type ContactDashboardEndpointOptions = {
+  ownerUserId?: string | number;
+  period?: DashboardPeriod;
+  dateFrom?: string;
+  dateTo?: string;
+};
+
+type UseContactDashboardWidgetDataOptions<R> =
+  ContactDashboardEndpointOptions & {
+    queryKey: string;
+    enabled?: boolean;
+    select?: (data: DashboardResponse) => R;
+  };
+
+type ContactDashboardWidgetDataResult<R> = {
+  data: R | undefined;
+  isLoading: boolean;
+  isError: boolean;
+  isAccessDenied: boolean;
+  error: any;
+};
+
+export function buildContactDashboardEndpoint({
+  ownerUserId = 'all',
+  period = '30d',
+  dateFrom,
+  dateTo,
+}: ContactDashboardEndpointOptions = {}) {
+  const params = new URLSearchParams();
+
+  if (
+    ownerUserId !== 'all' &&
+    ownerUserId !== '' &&
+    ownerUserId !== null &&
+    ownerUserId !== undefined
+  ) {
+    params.set('owner_user_id', String(ownerUserId));
+  }
+
+  params.set('period', period);
+
+  if (period === 'custom') {
+    if (dateFrom) {
+      params.set('date_from', dateFrom);
+    }
+
+    if (dateTo) {
+      params.set('date_to', dateTo);
+    }
+  }
+
+  const query = params.toString();
+
+  return `/person/dashboard${query ? `?${query}` : ''}`;
+}
+
+export function useContactDashboardWidgetData<R = DashboardResponse>({
+  queryKey,
+  ownerUserId = 'all',
+  period = '30d',
+  dateFrom,
+  dateTo,
+  enabled = true,
+  select,
+}: UseContactDashboardWidgetDataOptions<R>): ContactDashboardWidgetDataResult<R> {
+  return useWidgetData<DashboardResponse, R>({
+    endpoint: buildContactDashboardEndpoint({
+      ownerUserId,
+      period,
+      dateFrom,
+      dateTo,
+    }),
+    queryKey: `contact-dashboard-widget-${queryKey}-${period}-${String(ownerUserId)}`,
+    enabled,
+    select,
+  });
+}

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

@@ -1,17 +1,7 @@
 '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,
@@ -20,64 +10,26 @@ import {
   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 { Loader2, RefreshCcw } 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,
+import type {
+  DashboardPeriod,
+  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';
+import {
+  CrmDashboardKpiGrid,
+  CrmNextActionsCard,
+  CrmOwnerPerformanceCard,
+  CrmQuickAccessCard,
+  CrmSourceBreakdownCard,
+  CrmStageChartCard,
+  CrmTopOwnersCard,
+  CrmUnattendedCard,
+} from './_components/dashboard-widgets';
+import { emptyDashboard } from './_components/use-crm-dashboard-data';
 
 function formatDateInputValue(date: Date) {
   const year = date.getFullYear();
@@ -100,32 +52,9 @@ function getDefaultCustomRange() {
   };
 }
 
-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 { request, currentLocaleCode } = useApp();
   const defaultCustomRange = getDefaultCustomRange();
 
   const [ownerUserId, setOwnerUserId] = useState('all');
@@ -184,65 +113,10 @@ export default function CrmDashboardPage() {
     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]">
+        <SelectTrigger className="w-full sm:w-45">
           <SelectValue placeholder={t('filters.ownerPlaceholder')} />
         </SelectTrigger>
         <SelectContent>
@@ -267,7 +141,7 @@ export default function CrmDashboardPage() {
           }
         }}
       >
-        <SelectTrigger className="w-full sm:w-[180px]">
+        <SelectTrigger className="w-full sm:w-45">
           <SelectValue placeholder={t('filters.periodPlaceholder')} />
         </SelectTrigger>
         <SelectContent>
@@ -284,14 +158,14 @@ export default function CrmDashboardPage() {
             type="date"
             value={dateFrom}
             onChange={(event) => setDateFrom(event.target.value)}
-            className="w-full sm:w-[170px]"
+            className="w-full sm:w-42.5"
             aria-label={t('filters.dateFrom')}
           />
           <Input
             type="date"
             value={dateTo}
             onChange={(event) => setDateTo(event.target.value)}
-            className="w-full sm:w-[170px]"
+            className="w-full sm:w-42.5"
             aria-label={t('filters.dateTo')}
           />
         </>
@@ -326,310 +200,42 @@ export default function CrmDashboardPage() {
       />
 
       <div className="min-w-0 space-y-6 overflow-x-hidden">
-        <KpiCardsGrid items={kpiCards} />
+        <CrmDashboardKpiGrid dashboard={dashboard} />
 
         {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" />
+              <Skeleton className="h-80 w-full" />
+              <Skeleton className="h-80 w-full" />
             </div>
             <div className="grid gap-6 xl:grid-cols-2">
-              <Skeleton className="h-[320px] w-full" />
-              <Skeleton className="h-[320px] w-full" />
+              <Skeleton className="h-80 w-full" />
+              <Skeleton className="h-80 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" />
+              <Skeleton className="h-80 w-full" />
+              <Skeleton className="h-80 w-full" />
+              <Skeleton className="h-80 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>
+              <CrmStageChartCard items={dashboard.charts.stage} />
+              <CrmSourceBreakdownCard items={dashboard.charts.source} />
             </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>
+              <CrmOwnerPerformanceCard
+                items={dashboard.charts.owner_performance}
+              />
+              <CrmTopOwnersCard items={dashboard.charts.owner_performance} />
             </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>
+              <CrmNextActionsCard items={dashboard.lists.next_actions} />
+              <CrmUnattendedCard items={dashboard.lists.unattended} />
+              <CrmQuickAccessCard />
             </div>
           </>
         )}