@hed-hog/contact 0.0.298 → 0.0.300

package/hedhog/frontend/app/dashboard/_components/dashboard-widgets.tsx.ejs

@@ -0,0 +1,508 @@
+'use client';
+
+import { Badge } from '@/components/ui/badge';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+import { KpiCardsGrid, type KpiCardItem } from '@/components/ui/kpi-cards-grid';
+import { ScrollArea } from '@/components/ui/scroll-area';
+import { formatDateTime } from '@/lib/format-date';
+import { cn } from '@/lib/utils';
+import { useApp } from '@hed-hog/next-app-provider';
+import {
+  AlertTriangle,
+  ArrowUpRight,
+  BriefcaseBusiness,
+  CalendarClock,
+  ChartNoAxesCombined,
+  CircleDollarSign,
+  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 { crmImplementedSections } from '../../_lib/crm-sections';
+import type {
+  DashboardListItem,
+  DashboardOwnerPerformanceItem,
+  DashboardResponse,
+} from './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';
+
+const kpiDefinitions = [
+  { key: 'totalLeads', metricKey: 'total_leads', icon: TrendingUp },
+  { key: 'qualified', metricKey: 'qualified', icon: Target },
+  { key: 'proposal', metricKey: 'proposal', icon: BriefcaseBusiness },
+  { key: 'customers', metricKey: 'customers', icon: CircleDollarSign },
+  { key: 'lost', metricKey: 'lost', icon: AlertTriangle },
+  { key: 'unassigned', metricKey: 'unassigned', icon: UserRoundX },
+  { key: 'overdue', metricKey: 'overdue', icon: CalendarClock },
+  { key: 'nextActions', metricKey: 'next_actions', icon: ChartNoAxesCombined },
+] as const;
+
+type CrmDashboardCardProps = {
+  className?: string;
+  contentClassName?: string;
+};
+
+type CrmDashboardListCardProps = CrmDashboardCardProps & {
+  scrollAreaClassName?: string;
+};
+
+export function CrmDashboardKpiGrid({
+  dashboard,
+  className,
+  cardClassName,
+}: {
+  dashboard: DashboardResponse;
+  className?: string;
+  cardClassName?: string;
+}) {
+  const t = useTranslations('contact.CrmDashboard');
+
+  const items: KpiCardItem[] = kpiDefinitions.map((item, index) => {
+    const sectionStyle =
+      crmImplementedSections[index % crmImplementedSections.length] ??
+      crmImplementedSections[0];
+
+    return {
+      key: item.key,
+      title: t(`kpis.${item.key}.title`),
+      value: dashboard.kpis[item.metricKey],
+      description: t(`kpis.${item.key}.description`),
+      icon: item.icon,
+      accentClassName: sectionStyle?.colorClass ?? fallbackKpiAccentClass,
+      iconContainerClassName:
+        sectionStyle?.glowClass ?? 'bg-sky-500/10 text-sky-700',
+      className: cardClassName,
+    };
+  });
+
+  return <KpiCardsGrid items={items} className={className} />;
+}
+
+export function CrmStageChartCard({
+  items,
+  className,
+  contentClassName,
+}: CrmDashboardCardProps & {
+  items: DashboardResponse['charts']['stage'];
+}) {
+  const t = useTranslations('contact.CrmDashboard');
+
+  const stageChartData = items.map((item, index) => ({
+    name: t(`stageLabels.${item.key}`),
+    total: item.total,
+    fill: chartPalette[index % chartPalette.length],
+  }));
+
+  return (
+    <Card className={cn('min-w-0 overflow-hidden', className)}>
+      <CardHeader>
+        <CardTitle>{t('charts.stage.title')}</CardTitle>
+        <CardDescription>{t('charts.stage.description')}</CardDescription>
+      </CardHeader>
+      <CardContent className={cn('h-80', contentClassName)}>
+        <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>
+  );
+}
+
+export function CrmSourceBreakdownCard({
+  items,
+  className,
+  contentClassName,
+}: CrmDashboardCardProps & {
+  items: DashboardResponse['charts']['source'];
+}) {
+  const t = useTranslations('contact.CrmDashboard');
+
+  const sourceChartData = items.map((item, index) => ({
+    name: t(`sourceLabels.${item.key}`),
+    total: item.total,
+    fill: chartPalette[index % chartPalette.length],
+  }));
+
+  return (
+    <Card className={cn('min-w-0 overflow-hidden', className)}>
+      <CardHeader>
+        <CardTitle>{t('charts.source.title')}</CardTitle>
+        <CardDescription>{t('charts.source.description')}</CardDescription>
+      </CardHeader>
+      <CardContent
+        className={cn(
+          'grid min-w-0 gap-4 overflow-hidden lg:h-80 lg:grid-cols-[minmax(220px,0.9fr)_minmax(0,1fr)]',
+          contentClassName
+        )}
+      >
+        <div className="h-55 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>
+  );
+}
+
+export function CrmOwnerPerformanceCard({
+  items,
+  className,
+  contentClassName,
+}: CrmDashboardCardProps & {
+  items: DashboardOwnerPerformanceItem[];
+}) {
+  const t = useTranslations('contact.CrmDashboard');
+
+  return (
+    <Card className={cn('min-w-0 overflow-hidden', className)}>
+      <CardHeader>
+        <CardTitle>{t('charts.owner.title')}</CardTitle>
+        <CardDescription>{t('charts.owner.description')}</CardDescription>
+      </CardHeader>
+      <CardContent className={cn('h-80', contentClassName)}>
+        <ResponsiveContainer width="100%" height="100%">
+          <BarChart data={items}>
+            <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>
+  );
+}
+
+export function CrmTopOwnersCard({
+  items,
+  className,
+}: CrmDashboardCardProps & {
+  items: DashboardOwnerPerformanceItem[];
+}) {
+  const t = useTranslations('contact.CrmDashboard');
+  const { currentLocaleCode } = useApp();
+
+  const topOwners = [...items]
+    .sort((left, right) => right.pipeline_value - left.pipeline_value)
+    .slice(0, 4);
+
+  const currencyFormatter = new Intl.NumberFormat(
+    currentLocaleCode === 'pt' ? 'pt-BR' : 'en-US',
+    {
+      style: 'currency',
+      currency: 'BRL',
+      maximumFractionDigits: 0,
+    }
+  );
+
+  return (
+    <Card className={cn('min-w-0 overflow-hidden', className)}>
+      <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>
+  );
+}
+
+function CrmLeadBadges({ lead }: { lead: DashboardListItem }) {
+  const t = useTranslations('contact.CrmDashboard');
+
+  return (
+    <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>
+  );
+}
+
+export function CrmNextActionsCard({
+  items,
+  className,
+  scrollAreaClassName,
+}: CrmDashboardListCardProps & {
+  items: DashboardListItem[];
+}) {
+  const t = useTranslations('contact.CrmDashboard');
+  const { currentLocaleCode, getSettingValue } = useApp();
+
+  return (
+    <Card className={cn('min-w-0 overflow-hidden', className)}>
+      <CardHeader>
+        <CardTitle>{t('blocks.nextActions.title')}</CardTitle>
+        <CardDescription>{t('blocks.nextActions.description')}</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ScrollArea className={scrollAreaClassName ?? 'h-80 pr-3'}>
+          <div className="space-y-3">
+            {items.length === 0 ? (
+              <p className="text-sm text-muted-foreground">
+                {t('common.noData')}
+              </p>
+            ) : (
+              items.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>
+                  <CrmLeadBadges lead={lead} />
+                  <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>
+  );
+}
+
+export function CrmUnattendedCard({
+  items,
+  className,
+  scrollAreaClassName,
+}: CrmDashboardListCardProps & {
+  items: DashboardListItem[];
+}) {
+  const t = useTranslations('contact.CrmDashboard');
+
+  return (
+    <Card className={cn('min-w-0 overflow-hidden', className)}>
+      <CardHeader>
+        <CardTitle>{t('blocks.unattended.title')}</CardTitle>
+        <CardDescription>{t('blocks.unattended.description')}</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ScrollArea className={scrollAreaClassName ?? 'h-80 pr-3'}>
+          <div className="space-y-3">
+            {items.length === 0 ? (
+              <p className="text-sm text-muted-foreground">
+                {t('common.noData')}
+              </p>
+            ) : (
+              items.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>
+  );
+}
+
+export function CrmQuickAccessCard({ className }: CrmDashboardCardProps) {
+  const menuT = useTranslations('contact.CrmMenu');
+  const t = useTranslations('contact.CrmDashboard');
+
+  return (
+    <Card className={cn('min-w-0 overflow-hidden', className)}>
+      <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 cursor-pointer 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>
+  );
+}

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,
+  });
+}