@hed-hog/contact 0.0.279 → 0.0.285

package/hedhog/frontend/app/pipeline/_components/lead-detail-sheet.tsx.ejs

@@ -0,0 +1,599 @@
+'use client';
+
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { Separator } from '@/components/ui/separator';
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+} from '@/components/ui/sheet';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from '@/components/ui/tooltip';
+import { cn } from '@/lib/utils';
+import { useApp, useQuery } from '@hed-hog/next-app-provider';
+import {
+  Building2,
+  CalendarPlus2,
+  CalendarCheck,
+  CalendarClock,
+  CalendarX,
+  CircleDollarSign,
+  CircleUser,
+  ExternalLink,
+  Mail,
+  MessageSquare,
+  MoveRight,
+  Phone,
+  Star,
+  Tag,
+  TrendingUp,
+  User,
+  Users,
+} from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import { useEffect, useState, type ReactNode } from 'react';
+import { crmStageOrder, type CrmLead } from '../../_lib/crm-mocks';
+import { PersonInteractionDialog } from '../../person/_components/person-interaction-dialog';
+import type {
+  PersonInteraction,
+  PersonInteractionType,
+  PersonLifecycleStage,
+} from '../../person/_components/person-types';
+
+type LeadDetailSheetProps = {
+  lead: CrmLead | null;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onEditCadastro: (lead: CrmLead) => void;
+  onMoveStage: (lead: CrmLead, stage: PersonLifecycleStage) => void;
+  onLeadUpdated: (lead: CrmLead) => Promise<void> | void;
+};
+
+function formatCurrency(value: number) {
+  return new Intl.NumberFormat('pt-BR', {
+    style: 'currency',
+    currency: 'BRL',
+    maximumFractionDigits: 0,
+  }).format(value);
+}
+
+function formatDate(iso: string) {
+  return new Date(iso).toLocaleDateString('pt-BR', {
+    day: '2-digit',
+    month: 'short',
+    year: 'numeric',
+  });
+}
+
+function formatDateTime(iso: string) {
+  return new Date(iso).toLocaleString('pt-BR', {
+    day: '2-digit',
+    month: 'short',
+    hour: '2-digit',
+    minute: '2-digit',
+  });
+}
+
+function daysSince(date: string) {
+  const diff =
+    new Date('2026-03-16T00:00:00.000Z').getTime() - new Date(date).getTime();
+  return Math.max(0, Math.floor(diff / (1000 * 60 * 60 * 24)));
+}
+
+function nextActionUrgency(nextActionAt: string | null | undefined) {
+  if (!nextActionAt) return 'none';
+  const now = new Date('2026-03-16T00:00:00.000Z');
+  const date = new Date(nextActionAt);
+  const diffDays = Math.floor(
+    (date.getTime() - now.getTime()) / (1000 * 60 * 60 * 24)
+  );
+  if (diffDays < 0) return 'overdue';
+  if (diffDays <= 3) return 'soon';
+  return 'ok';
+}
+
+function ScoreRing({ score }: { score: number }) {
+  const size = 44;
+  const radius = 17;
+  const circumference = 2 * Math.PI * radius;
+  const dashOffset =
+    circumference - (Math.min(score, 100) / 100) * circumference;
+  const color =
+    score >= 80
+      ? 'text-emerald-500'
+      : score >= 50
+        ? 'text-amber-500'
+        : 'text-red-500';
+
+  return (
+    <div className="relative flex size-11 items-center justify-center">
+      <svg className="-rotate-90" width={size} height={size}>
+        <circle
+          cx={size / 2}
+          cy={size / 2}
+          r={radius}
+          strokeWidth="4"
+          className="stroke-muted"
+          fill="transparent"
+        />
+        <circle
+          cx={size / 2}
+          cy={size / 2}
+          r={radius}
+          strokeWidth="4"
+          strokeLinecap="round"
+          className={cn('fill-transparent stroke-current', color)}
+          strokeDasharray={circumference}
+          strokeDashoffset={dashOffset}
+        />
+      </svg>
+      <span className={cn('absolute text-[11px] font-semibold', color)}>
+        {score}
+      </span>
+    </div>
+  );
+}
+
+function MetricTile({
+  icon,
+  label,
+  value,
+  tooltip,
+  valueClassName,
+}: {
+  icon: ReactNode;
+  label: string;
+  value: ReactNode;
+  tooltip?: string;
+  valueClassName?: string;
+}) {
+  const tile = (
+    <div className="rounded-xl border border-border/60 bg-muted/20 p-3">
+      <div className="flex items-center gap-1.5 text-[10px] font-semibold uppercase tracking-[0.14em] text-muted-foreground">
+        {icon}
+        <span>{label}</span>
+      </div>
+      <div
+        className={cn(
+          'mt-2 text-sm font-semibold text-foreground',
+          valueClassName
+        )}
+      >
+        {value}
+      </div>
+    </div>
+  );
+
+  if (!tooltip) return tile;
+
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>{tile}</TooltipTrigger>
+      <TooltipContent side="top">{tooltip}</TooltipContent>
+    </Tooltip>
+  );
+}
+
+function StageProgress({
+  stage,
+}: {
+  stage: PersonLifecycleStage | null | undefined;
+}) {
+  const dashboardT = useTranslations('contact.CrmDashboard');
+  const currentStage = stage ?? 'new';
+  const currentIndex = crmStageOrder.indexOf(currentStage);
+
+  return (
+    <div className="space-y-2">
+      <div className="grid grid-cols-7 gap-1.5">
+        {crmStageOrder.map((item, index) => {
+          const isLostStage = item === 'lost';
+          const isActive = currentStage === item;
+          const isCompleted =
+            !isLostStage && currentStage !== 'lost' && index <= currentIndex;
+
+          return (
+            <Tooltip key={item}>
+              <TooltipTrigger asChild>
+                <div
+                  className={cn(
+                    'h-2 rounded-full transition-colors',
+                    isActive && currentStage === 'lost' && 'bg-red-500',
+                    isLostStage && currentStage !== 'lost' && 'bg-muted',
+                    !isLostStage && isCompleted && 'bg-primary',
+                    !isActive && !isCompleted && !isLostStage && 'bg-muted',
+                    isActive && currentStage !== 'lost' && 'bg-primary'
+                  )}
+                />
+              </TooltipTrigger>
+              <TooltipContent side="bottom" className="text-xs">
+                {dashboardT(`stageLabels.${item}`)}
+              </TooltipContent>
+            </Tooltip>
+          );
+        })}
+      </div>
+      <div className="flex items-center justify-between text-[11px] text-muted-foreground">
+        <span>{dashboardT('stageLabels.new')}</span>
+        <span>{dashboardT(`stageLabels.${currentStage}`)}</span>
+      </div>
+    </div>
+  );
+}
+
+export function LeadDetailSheet({
+  lead,
+  open,
+  onOpenChange,
+  onEditCadastro,
+  onMoveStage,
+  onLeadUpdated,
+}: LeadDetailSheetProps) {
+  const t = useTranslations('contact.CrmPipeline');
+  const dashboardT = useTranslations('contact.CrmDashboard');
+  const contactPageT = useTranslations('contact.ContactPage');
+  const { request, currentLocaleCode } = useApp();
+  const [interactionDialogOpen, setInteractionDialogOpen] = useState(false);
+  const [interactionMode, setInteractionMode] = useState<
+    'interaction' | 'followup'
+  >('interaction');
+  const {
+    data: interactions = [],
+    isLoading: isInteractionsLoading,
+    refetch: refetchInteractions,
+  } = useQuery<PersonInteraction[]>({
+    queryKey: ['contact-person-interactions', lead?.id, currentLocaleCode],
+    enabled: open && !!lead?.id,
+    queryFn: async () => {
+      if (!lead?.id) {
+        return [];
+      }
+
+      const response = await request<PersonInteraction[]>({
+        url: `/person/${lead.id}/interaction`,
+        method: 'GET',
+      });
+
+      return response.data;
+    },
+    placeholderData: (previous) => previous ?? [],
+  });
+
+  useEffect(() => {
+    if (!open) {
+      setInteractionDialogOpen(false);
+      setInteractionMode('interaction');
+    }
+  }, [open]);
+
+  if (!lead) {
+    return null;
+  }
+
+  const urgency = nextActionUrgency(lead.next_action_at);
+  const age = daysSince(lead.created_at);
+  const currentStageIndex = crmStageOrder.indexOf(
+    lead.lifecycle_stage ?? 'new'
+  );
+  const nextStage =
+    lead.lifecycle_stage &&
+    lead.lifecycle_stage !== 'customer' &&
+    lead.lifecycle_stage !== 'lost'
+      ? crmStageOrder[currentStageIndex + 1]
+      : null;
+
+  const interactionIconMap: Record<PersonInteractionType, ReactNode> = {
+    call: <Phone className="size-3.5" />,
+    email: <Mail className="size-3.5" />,
+    whatsapp: <MessageSquare className="size-3.5" />,
+    meeting: <Users className="size-3.5" />,
+    note: <Tag className="size-3.5" />,
+  };
+
+  return (
+    <Sheet open={open} onOpenChange={onOpenChange}>
+      <SheetContent className="flex h-full w-full flex-col overflow-hidden p-0 sm:max-w-lg">
+        <SheetHeader className="shrink-0 border-b px-5 py-4 text-left">
+          <div className="flex items-start gap-3 pr-6">
+            <div className="flex size-11 shrink-0 items-center justify-center rounded-2xl bg-muted text-muted-foreground">
+              {lead.type === 'company' ? (
+                <Building2 className="size-5" />
+              ) : (
+                <User className="size-5" />
+              )}
+            </div>
+
+            <div className="min-w-0 flex-1 space-y-2">
+              <div className="space-y-1">
+                <SheetTitle className="truncate text-base font-semibold">
+                  {lead.name}
+                </SheetTitle>
+                <SheetDescription className="truncate text-xs">
+                  {lead.trade_name ||
+                    lead.companyLabel ||
+                    dashboardT(`sourceLabels.${lead.source ?? 'other'}`)}
+                </SheetDescription>
+              </div>
+
+              <div className="flex flex-wrap items-center gap-2">
+                <Badge
+                  variant="outline"
+                  className={cn(
+                    'text-[10px]',
+                    lead.status === 'active'
+                      ? 'border-green-500/30 bg-green-500/10 text-green-600'
+                      : 'border-red-500/30 bg-red-500/10 text-red-600'
+                  )}
+                >
+                  {lead.status === 'active' ? t('active') : t('inactive')}
+                </Badge>
+                <Badge variant="secondary" className="text-[10px]">
+                  {dashboardT(`stageLabels.${lead.lifecycle_stage ?? 'new'}`)}
+                </Badge>
+                {lead.lifecycle_stage === 'lost' && (
+                  <Badge
+                    variant="outline"
+                    className="border-red-500/30 bg-red-500/10 text-[10px] text-red-600"
+                  >
+                    {t('detail.lost')}
+                  </Badge>
+                )}
+              </div>
+            </div>
+          </div>
+        </SheetHeader>
+
+        <div className="flex-1 overflow-y-auto px-5 py-4">
+          <div className="space-y-5">
+            <div className="space-y-2">
+              <p className="text-[11px] font-semibold uppercase tracking-[0.14em] text-muted-foreground">
+                {t('detail.title')}
+              </p>
+              <StageProgress stage={lead.lifecycle_stage} />
+            </div>
+
+            <div className="grid grid-cols-2 gap-2.5">
+              <MetricTile
+                icon={
+                  <CircleDollarSign className="size-3.5 text-emerald-500" />
+                }
+                label={t('card.dealValue')}
+                value={formatCurrency(lead.dealValue)}
+                tooltip={t('tooltips.dealValue')}
+              />
+              <MetricTile
+                icon={<Star className="size-3.5 text-amber-400" />}
+                label={t('card.score')}
+                value={<ScoreRing score={lead.score} />}
+                tooltip={t('tooltips.score')}
+              />
+              <MetricTile
+                icon={<TrendingUp className="size-3.5 text-violet-400" />}
+                label={t('card.age')}
+                value={t('card.days', { count: age })}
+                tooltip={t('tooltips.age')}
+              />
+              <MetricTile
+                icon={
+                  urgency === 'overdue' ? (
+                    <CalendarX className="size-3.5 text-red-500" />
+                  ) : urgency === 'soon' ? (
+                    <CalendarClock className="size-3.5 text-amber-500" />
+                  ) : (
+                    <CalendarCheck className="size-3.5 text-blue-500" />
+                  )
+                }
+                label={t('card.nextAction')}
+                value={
+                  lead.next_action_at
+                    ? new Date(lead.next_action_at).toLocaleDateString('pt-BR')
+                    : t('card.noFollowup')
+                }
+                valueClassName={cn(
+                  urgency === 'overdue' && 'text-red-500',
+                  urgency === 'soon' && 'text-amber-500',
+                  urgency === 'ok' && 'text-blue-500'
+                )}
+                tooltip={
+                  urgency === 'overdue'
+                    ? t('tooltips.nextActionOverdue')
+                    : urgency === 'soon'
+                      ? t('tooltips.nextActionSoon')
+                      : urgency === 'ok'
+                        ? t('tooltips.nextActionOk')
+                        : t('tooltips.nextActionNone')
+                }
+              />
+            </div>
+
+            <div className="flex flex-wrap items-center gap-2">
+              <div className="flex items-center gap-1.5 rounded-lg bg-muted/60 px-2.5 py-1.5 text-xs">
+                <CircleUser className="size-3.5 shrink-0 text-muted-foreground" />
+                <span className="text-muted-foreground">
+                  {t('detail.owner')}:
+                </span>
+                <span className="font-medium text-foreground">
+                  {lead.owner_user?.name || dashboardT('common.unassigned')}
+                </span>
+              </div>
+              <div className="flex items-center gap-1.5 rounded-lg bg-muted/60 px-2.5 py-1.5 text-xs">
+                <Tag className="size-3.5 shrink-0 text-sky-400" />
+                <span className="text-muted-foreground">
+                  {t('detail.source')}:
+                </span>
+                <span className="font-medium text-foreground">
+                  {dashboardT(`sourceLabels.${lead.source ?? 'other'}`)}
+                </span>
+              </div>
+            </div>
+
+            {lead.tags.length > 0 && (
+              <div className="flex flex-wrap gap-1.5">
+                {lead.tags.map((tag) => (
+                  <Badge key={tag} variant="outline" className="text-[11px]">
+                    {tag}
+                  </Badge>
+                ))}
+              </div>
+            )}
+
+            {nextStage && (
+              <>
+                <Separator />
+                <div className="space-y-2">
+                  <p className="text-[11px] font-semibold uppercase tracking-[0.14em] text-muted-foreground">
+                    {t('detail.advanceStage')}
+                  </p>
+                  <Button
+                    variant="outline"
+                    className="w-full gap-2"
+                    onClick={() => onMoveStage(lead, nextStage)}
+                  >
+                    <MoveRight className="size-4" />
+                    {t('detail.moveTo', {
+                      stage: dashboardT(`stageLabels.${nextStage}`),
+                    })}
+                  </Button>
+                </div>
+              </>
+            )}
+
+            <Separator />
+
+            <div className="space-y-2">
+              <p className="text-[11px] font-semibold uppercase tracking-[0.14em] text-muted-foreground">
+                {contactPageT('registerInteraction')}
+              </p>
+              <div className="grid grid-cols-1 gap-2 sm:grid-cols-2">
+                <Button
+                  variant="outline"
+                  className="w-full gap-2"
+                  onClick={() => {
+                    setInteractionMode('interaction');
+                    setInteractionDialogOpen(true);
+                  }}
+                >
+                  <Phone className="size-4" />
+                  {contactPageT('registerInteraction')}
+                </Button>
+                <Button
+                  variant="outline"
+                  className="w-full gap-2"
+                  onClick={() => {
+                    setInteractionMode('followup');
+                    setInteractionDialogOpen(true);
+                  }}
+                >
+                  <CalendarPlus2 className="size-4" />
+                  {contactPageT('scheduleFollowup')}
+                </Button>
+              </div>
+            </div>
+
+            <div className="space-y-3">
+              <p className="text-[11px] font-semibold uppercase tracking-[0.14em] text-muted-foreground">
+                {t('detail.timeline')}
+              </p>
+
+              {interactions.length === 0 ? (
+                <div className="rounded-xl border border-dashed p-4 text-sm text-muted-foreground">
+                  {isInteractionsLoading
+                    ? t('detail.loadingTimeline')
+                    : t('detail.noInteractions')}
+                </div>
+              ) : (
+                <div className="space-y-3">
+                  {interactions.map((interaction) => (
+                    <div
+                      key={`${lead.id}-${interaction.id}`}
+                      className="flex gap-3 rounded-xl border border-border/50 bg-muted/15 p-3"
+                    >
+                      <div
+                        className={cn(
+                          'mt-0.5 flex size-7 shrink-0 items-center justify-center rounded-full border text-xs',
+                          interaction.type === 'call' &&
+                            'border-blue-500/25 bg-blue-500/10 text-blue-600',
+                          interaction.type === 'email' &&
+                            'border-violet-500/25 bg-violet-500/10 text-violet-600',
+                          interaction.type === 'whatsapp' &&
+                            'border-emerald-500/25 bg-emerald-500/10 text-emerald-600',
+                          interaction.type === 'meeting' &&
+                            'border-amber-500/25 bg-amber-500/10 text-amber-600',
+                          interaction.type === 'note' &&
+                            'border-slate-500/25 bg-slate-500/10 text-slate-600'
+                        )}
+                      >
+                        {interactionIconMap[interaction.type]}
+                      </div>
+                      <div className="min-w-0 flex-1">
+                        <div className="flex items-start justify-between gap-3">
+                          <p className="text-xs font-semibold text-foreground">
+                            {t(`detail.interactionType.${interaction.type}`)}
+                          </p>
+                          <span className="shrink-0 text-[10px] text-muted-foreground">
+                            {formatDateTime(interaction.created_at)}
+                          </span>
+                        </div>
+                        <p className="mt-1 text-xs text-muted-foreground">
+                          {interaction.notes}
+                        </p>
+                        <p className="mt-1 text-[11px] font-medium text-foreground">
+                          {interaction.user_name}
+                        </p>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              )}
+            </div>
+
+            <div className="rounded-xl border border-border/50 bg-muted/20 p-3 text-xs">
+              <div className="flex items-center justify-between gap-2">
+                <span className="text-muted-foreground">
+                  {t('detail.createdAt')}
+                </span>
+                <span className="font-medium text-foreground">
+                  {formatDate(lead.created_at)}
+                </span>
+              </div>
+              <div className="mt-2 flex items-center justify-between gap-2">
+                <span className="text-muted-foreground">
+                  {t('detail.lastInteraction')}
+                </span>
+                <span className="font-medium text-foreground">
+                  {formatDate(lead.lastInteractionAt)}
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div className="shrink-0 border-t px-5 py-3">
+          <Button className="w-full gap-2" onClick={() => onEditCadastro(lead)}>
+            <ExternalLink className="size-4" />
+            {t('detail.editCadastro')}
+          </Button>
+        </div>
+
+        <PersonInteractionDialog
+          open={interactionDialogOpen}
+          person={lead}
+          mode={interactionMode}
+          onOpenChange={setInteractionDialogOpen}
+          onSuccess={async () => {
+            await Promise.all([
+              refetchInteractions(),
+              Promise.resolve(onLeadUpdated(lead)),
+            ]);
+          }}
+        />
+      </SheetContent>
+    </Sheet>
+  );
+}