@hed-hog/contact 0.0.274 → 0.0.276

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

@@ -0,0 +1,573 @@
+'use client';
+
+import { CrmNav } from '../_components/crm-nav';
+import {
+  crmMockLeads,
+  crmOwners,
+  crmSourceOrder,
+  crmStageOrder,
+} from '../_lib/crm-mocks';
+import { crmImplementedSections } from '../_lib/crm-sections';
+import { Page, PageHeader } from '@/components/entity-list';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+import { ScrollArea } from '@/components/ui/scroll-area';
+import { useApp } from '@hed-hog/next-app-provider';
+import {
+  AlertTriangle,
+  ArrowUpRight,
+  BriefcaseBusiness,
+  CalendarClock,
+  ChartNoAxesCombined,
+  CircleDollarSign,
+  RefreshCcw,
+  Sparkles,
+  Target,
+  TrendingUp,
+  UserRoundX,
+} from 'lucide-react';
+import Link from 'next/link';
+import { useTranslations } from 'next-intl';
+import {
+  Bar,
+  BarChart,
+  CartesianGrid,
+  Cell,
+  Pie,
+  PieChart,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+  YAxis,
+} from 'recharts';
+
+const chartPalette = [
+  '#f97316',
+  '#14b8a6',
+  '#0ea5e9',
+  '#84cc16',
+  '#f59e0b',
+  '#ef4444',
+  '#8b5cf6',
+];
+
+const chartTooltipStyle = {
+  backgroundColor: 'hsl(var(--card))',
+  border: '1px solid hsl(var(--border))',
+  borderRadius: '12px',
+  fontSize: '12px',
+};
+
+const fallbackKpiAccentClass =
+  'from-orange-500/20 via-amber-500/10 to-transparent';
+
+export default function CrmDashboardPage() {
+  const t = useTranslations('contact.CrmDashboard');
+  const menuT = useTranslations('contact.CrmMenu');
+  const { currentLocaleCode } = useApp();
+
+  const qualifiedCount = crmMockLeads.filter((lead) =>
+    ['qualified', 'proposal', 'negotiation', 'customer'].includes(
+      lead.lifecycle_stage ?? ''
+    )
+  ).length;
+  const proposalCount = crmMockLeads.filter(
+    (lead) => lead.lifecycle_stage === 'proposal'
+  ).length;
+  const customerCount = crmMockLeads.filter(
+    (lead) => lead.lifecycle_stage === 'customer'
+  ).length;
+  const lostCount = crmMockLeads.filter(
+    (lead) => lead.lifecycle_stage === 'lost'
+  ).length;
+  const unassignedCount = crmMockLeads.filter(
+    (lead) => !lead.owner_user_id
+  ).length;
+  const overdueFollowups = crmMockLeads.filter(
+    (lead) =>
+      lead.next_action_at &&
+      new Date(lead.next_action_at) < new Date('2026-03-16T00:00:00.000Z')
+  ).length;
+
+  const totalDealValue = crmMockLeads.reduce(
+    (sum, lead) => sum + lead.dealValue,
+    0
+  );
+  const conversionRate = Math.round(
+    (customerCount / Math.max(crmMockLeads.length, 1)) * 100
+  );
+
+  const stageChartData = crmStageOrder.map((stage, index) => ({
+    name: t(`stageLabels.${stage}`),
+    total: crmMockLeads.filter((lead) => lead.lifecycle_stage === stage).length,
+    fill: chartPalette[index % chartPalette.length],
+  }));
+
+  const sourceChartData = crmSourceOrder.map((source, index) => ({
+    name: t(`sourceLabels.${source}`),
+    total: crmMockLeads.filter((lead) => lead.source === source).length,
+    fill: chartPalette[index % chartPalette.length],
+  }));
+
+  const ownerPerformanceData = crmOwners.map((owner) => {
+    const leads = crmMockLeads.filter(
+      (lead) => lead.owner_user_id === owner.id
+    );
+
+    return {
+      name: owner.name,
+      leads: leads.length,
+      customers: leads.filter((lead) => lead.lifecycle_stage === 'customer')
+        .length,
+      pipeline: leads
+        .filter((lead) => lead.lifecycle_stage !== 'lost')
+        .reduce((sum, lead) => sum + lead.dealValue, 0),
+    };
+  });
+
+  const nextActions = [...crmMockLeads]
+    .filter((lead) => lead.next_action_at)
+    .sort(
+      (left, right) =>
+        new Date(left.next_action_at ?? 0).getTime() -
+        new Date(right.next_action_at ?? 0).getTime()
+    )
+    .slice(0, 5);
+
+  const unattendedLeads = crmMockLeads
+    .filter((lead) => !lead.owner_user_id || lead.lifecycle_stage === 'new')
+    .slice(0, 5);
+
+  const topOwners = [...ownerPerformanceData]
+    .sort((left, right) => right.pipeline - left.pipeline)
+    .slice(0, 4);
+
+  const currencyFormatter = new Intl.NumberFormat(
+    currentLocaleCode === 'pt' ? 'pt-BR' : 'en-US',
+    {
+      style: 'currency',
+      currency: 'BRL',
+      maximumFractionDigits: 0,
+    }
+  );
+
+  return (
+    <Page>
+      <PageHeader
+        title={t('title')}
+        description={t('subtitle')}
+        breadcrumbs={[
+          { label: t('breadcrumbs.home'), href: '/' },
+          { label: t('breadcrumbs.crm') },
+        ]}
+        actions={[
+          {
+            label: t('refresh'),
+            onClick: () => window.location.reload(),
+            variant: 'outline',
+            icon: <RefreshCcw className="size-4" />,
+          },
+        ]}
+      />
+
+      <div className="min-w-0 space-y-6 overflow-x-hidden">
+        <Card className="overflow-hidden border-orange-200/70 bg-gradient-to-br from-orange-50 via-background to-amber-50 py-0">
+          <CardContent className="grid min-w-0 gap-6 px-6 py-6 lg:grid-cols-[minmax(0,1.3fr)_minmax(280px,0.9fr)]">
+            <div className="min-w-0 space-y-4">
+              <Badge className="w-fit rounded-full bg-orange-500/10 px-3 py-1 text-orange-700 hover:bg-orange-500/10">
+                <Sparkles className="mr-2 size-3.5" />
+                {t('heroBadge')}
+              </Badge>
+              <div className="space-y-2">
+                <h2 className="text-3xl font-semibold tracking-tight text-balance">
+                  {t('heroTitle')}
+                </h2>
+                <p className="max-w-2xl text-sm leading-6 text-muted-foreground">
+                  {t('heroDescription')}
+                </p>
+              </div>
+              <div className="flex flex-wrap gap-3">
+                <Button asChild>
+                  <Link href="/contact/pipeline">{t('primaryAction')}</Link>
+                </Button>
+                <Button asChild variant="outline">
+                  <Link href="/contact/person">{t('secondaryAction')}</Link>
+                </Button>
+              </div>
+            </div>
+
+            <div className="grid gap-3 sm:grid-cols-3 lg:grid-cols-1">
+              {[
+                {
+                  icon: CircleDollarSign,
+                  label: t('summary.pipelineValue'),
+                  value: currencyFormatter.format(totalDealValue),
+                },
+                {
+                  icon: Target,
+                  label: t('summary.conversionRate'),
+                  value: `${conversionRate}%`,
+                },
+                {
+                  icon: BriefcaseBusiness,
+                  label: t('summary.activeOwners'),
+                  value: crmOwners.length,
+                },
+              ].map((item) => (
+                <div
+                  key={item.label}
+                  className="rounded-2xl border border-white/70 bg-white/80 p-4 shadow-sm backdrop-blur"
+                >
+                  <div className="mb-3 flex items-center gap-2 text-muted-foreground">
+                    <item.icon className="size-4" />
+                    <span className="text-xs uppercase tracking-[0.2em]">
+                      {item.label}
+                    </span>
+                  </div>
+                  <div className="text-2xl font-semibold tracking-tight">
+                    {item.value}
+                  </div>
+                </div>
+              ))}
+            </div>
+          </CardContent>
+        </Card>
+
+        <CrmNav currentHref="/contact/dashboard" />
+
+        <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
+          {[
+            { key: 'totalLeads', value: crmMockLeads.length, icon: TrendingUp },
+            { key: 'qualified', value: qualifiedCount, icon: Target },
+            { key: 'proposal', value: proposalCount, icon: BriefcaseBusiness },
+            { key: 'customers', value: customerCount, icon: CircleDollarSign },
+            { key: 'lost', value: lostCount, icon: AlertTriangle },
+            { key: 'unassigned', value: unassignedCount, icon: UserRoundX },
+            { key: 'overdue', value: overdueFollowups, icon: CalendarClock },
+            {
+              key: 'nextActions',
+              value: nextActions.length,
+              icon: ChartNoAxesCombined,
+            },
+          ].map((item, index) => {
+            const sectionStyle =
+              crmImplementedSections[index % crmImplementedSections.length] ??
+              crmImplementedSections[0];
+
+            return (
+              <Card
+                key={item.key}
+                className="min-w-0 overflow-hidden border-border/70 py-0"
+              >
+                <div
+                  className={`h-1 w-full bg-gradient-to-r ${sectionStyle?.colorClass ?? fallbackKpiAccentClass}`}
+                />
+                <CardContent className="flex items-start justify-between gap-3 px-6 py-5">
+                  <div className="min-w-0">
+                    <p className="text-xs uppercase tracking-[0.2em] text-muted-foreground">
+                      {t(`kpis.${item.key}.title`)}
+                    </p>
+                    <p className="mt-2 text-3xl font-semibold tracking-tight">
+                      {item.value}
+                    </p>
+                    <p className="mt-1 text-sm text-muted-foreground">
+                      {t(`kpis.${item.key}.description`)}
+                    </p>
+                  </div>
+                  <div className="rounded-2xl bg-muted p-3 text-muted-foreground">
+                    <item.icon className="size-5" />
+                  </div>
+                </CardContent>
+              </Card>
+            );
+          })}
+        </div>
+
+        <div className="grid min-w-0 gap-6 xl:grid-cols-[minmax(0,1.2fr)_minmax(320px,0.8fr)]">
+          <Card className="min-w-0">
+            <CardHeader>
+              <CardTitle>{t('charts.stage.title')}</CardTitle>
+              <CardDescription>{t('charts.stage.description')}</CardDescription>
+            </CardHeader>
+            <CardContent className="h-[320px]">
+              <ResponsiveContainer width="100%" height="100%">
+                <BarChart data={stageChartData}>
+                  <CartesianGrid
+                    strokeDasharray="3 3"
+                    stroke="hsl(var(--border))"
+                    vertical={false}
+                  />
+                  <XAxis
+                    dataKey="name"
+                    tickLine={false}
+                    axisLine={false}
+                    fontSize={12}
+                  />
+                  <YAxis
+                    tickLine={false}
+                    axisLine={false}
+                    fontSize={12}
+                    allowDecimals={false}
+                  />
+                  <Tooltip contentStyle={chartTooltipStyle} />
+                  <Bar dataKey="total" radius={[8, 8, 0, 0]}>
+                    {stageChartData.map((entry) => (
+                      <Cell key={entry.name} fill={entry.fill} />
+                    ))}
+                  </Bar>
+                </BarChart>
+              </ResponsiveContainer>
+            </CardContent>
+          </Card>
+
+          <Card className="min-w-0 overflow-hidden">
+            <CardHeader>
+              <CardTitle>{t('charts.source.title')}</CardTitle>
+              <CardDescription>
+                {t('charts.source.description')}
+              </CardDescription>
+            </CardHeader>
+            <CardContent className="grid min-w-0 gap-4 overflow-hidden lg:h-[320px] lg:grid-cols-[minmax(220px,0.9fr)_minmax(0,1fr)]">
+              <div className="h-[220px] min-w-0 lg:h-full">
+                <ResponsiveContainer width="100%" height="100%">
+                  <PieChart>
+                    <Pie
+                      data={sourceChartData}
+                      dataKey="total"
+                      nameKey="name"
+                      innerRadius={58}
+                      outerRadius={94}
+                      paddingAngle={2}
+                    >
+                      {sourceChartData.map((entry) => (
+                        <Cell key={entry.name} fill={entry.fill} />
+                      ))}
+                    </Pie>
+                    <Tooltip contentStyle={chartTooltipStyle} />
+                  </PieChart>
+                </ResponsiveContainer>
+              </div>
+              <ScrollArea className="min-w-0 lg:h-full">
+                <div className="space-y-3 lg:pr-3">
+                  {sourceChartData.map((item) => (
+                    <div
+                      key={item.name}
+                      className="flex min-w-0 items-center justify-between gap-3 rounded-2xl border border-border/70 px-4 py-3"
+                    >
+                      <div className="flex min-w-0 items-center gap-3">
+                        <span
+                          className="inline-block size-3 rounded-full"
+                          style={{ backgroundColor: item.fill }}
+                        />
+                        <span className="truncate font-medium">
+                          {item.name}
+                        </span>
+                      </div>
+                      <span className="shrink-0 text-sm text-muted-foreground">
+                        {item.total}
+                      </span>
+                    </div>
+                  ))}
+                </div>
+              </ScrollArea>
+            </CardContent>
+          </Card>
+        </div>
+
+        <div className="grid min-w-0 gap-6 xl:grid-cols-[minmax(0,1.1fr)_minmax(320px,0.9fr)]">
+          <Card className="min-w-0">
+            <CardHeader>
+              <CardTitle>{t('charts.owner.title')}</CardTitle>
+              <CardDescription>{t('charts.owner.description')}</CardDescription>
+            </CardHeader>
+            <CardContent className="h-[320px]">
+              <ResponsiveContainer width="100%" height="100%">
+                <BarChart data={ownerPerformanceData}>
+                  <CartesianGrid
+                    strokeDasharray="3 3"
+                    stroke="hsl(var(--border))"
+                    vertical={false}
+                  />
+                  <XAxis
+                    dataKey="name"
+                    tickLine={false}
+                    axisLine={false}
+                    fontSize={12}
+                  />
+                  <YAxis
+                    tickLine={false}
+                    axisLine={false}
+                    fontSize={12}
+                    allowDecimals={false}
+                  />
+                  <Tooltip contentStyle={chartTooltipStyle} />
+                  <Bar dataKey="leads" fill="#f97316" radius={[8, 8, 0, 0]} />
+                  <Bar
+                    dataKey="customers"
+                    fill="#0ea5e9"
+                    radius={[8, 8, 0, 0]}
+                  />
+                </BarChart>
+              </ResponsiveContainer>
+            </CardContent>
+          </Card>
+
+          <Card className="min-w-0 overflow-hidden">
+            <CardHeader>
+              <CardTitle>{t('bestOwners.title')}</CardTitle>
+              <CardDescription>{t('bestOwners.description')}</CardDescription>
+            </CardHeader>
+            <CardContent>
+              <div className="space-y-3">
+                {topOwners.map((owner, index) => (
+                  <div
+                    key={owner.name}
+                    className="flex min-w-0 items-center justify-between gap-3 rounded-2xl border border-border/70 px-4 py-3"
+                  >
+                    <div className="min-w-0">
+                      <p className="truncate font-medium">
+                        {index + 1}. {owner.name}
+                      </p>
+                      <p className="truncate text-xs text-muted-foreground">
+                        {t('bestOwners.meta', {
+                          leads: owner.leads,
+                          customers: owner.customers,
+                        })}
+                      </p>
+                    </div>
+                    <span className="shrink-0 text-sm font-medium text-foreground">
+                      {currencyFormatter.format(owner.pipeline)}
+                    </span>
+                  </div>
+                ))}
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+
+        <div className="grid gap-6 xl:grid-cols-3">
+          <Card className="min-w-0 overflow-hidden xl:col-span-1">
+            <CardHeader>
+              <CardTitle>{t('blocks.nextActions.title')}</CardTitle>
+              <CardDescription>
+                {t('blocks.nextActions.description')}
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              <ScrollArea className="h-[320px] pr-3">
+                <div className="space-y-3">
+                  {nextActions.map((lead) => (
+                    <div
+                      key={lead.id}
+                      className="rounded-2xl border border-border/70 px-4 py-3"
+                    >
+                      <p className="font-medium">{lead.name}</p>
+                      <p className="text-xs text-muted-foreground">
+                        {lead.owner_user?.name || t('common.unassigned')}
+                      </p>
+                      <div className="mt-2 flex flex-wrap gap-2">
+                        <Badge variant="outline">
+                          {t(`stageLabels.${lead.lifecycle_stage ?? 'new'}`)}
+                        </Badge>
+                        <Badge variant="secondary">
+                          {t(`sourceLabels.${lead.source ?? 'other'}`)}
+                        </Badge>
+                      </div>
+                      <p className="mt-2 text-sm text-muted-foreground">
+                        {t('blocks.nextActions.when', {
+                          date: new Date(
+                            lead.next_action_at ?? ''
+                          ).toLocaleString(),
+                        })}
+                      </p>
+                    </div>
+                  ))}
+                </div>
+              </ScrollArea>
+            </CardContent>
+          </Card>
+
+          <Card className="min-w-0 overflow-hidden xl:col-span-1">
+            <CardHeader>
+              <CardTitle>{t('blocks.unattended.title')}</CardTitle>
+              <CardDescription>
+                {t('blocks.unattended.description')}
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              <ScrollArea className="h-[320px] pr-3">
+                <div className="space-y-3">
+                  {unattendedLeads.map((lead) => (
+                    <div
+                      key={lead.id}
+                      className="rounded-2xl border border-border/70 px-4 py-3"
+                    >
+                      <p className="font-medium">{lead.name}</p>
+                      <p className="text-xs text-muted-foreground">
+                        {lead.owner_user?.name || t('common.unassigned')}
+                      </p>
+                      <p className="mt-2 text-sm text-muted-foreground">
+                        {t('blocks.unattended.meta', {
+                          stage: t(
+                            `stageLabels.${lead.lifecycle_stage ?? 'new'}`
+                          ),
+                          source: t(`sourceLabels.${lead.source ?? 'other'}`),
+                        })}
+                      </p>
+                    </div>
+                  ))}
+                </div>
+              </ScrollArea>
+            </CardContent>
+          </Card>
+
+          <Card className="min-w-0 overflow-hidden xl:col-span-1">
+            <CardHeader>
+              <CardTitle>{t('blocks.quickAccess.title')}</CardTitle>
+              <CardDescription>
+                {t('blocks.quickAccess.description')}
+              </CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-3">
+              {crmImplementedSections.map((section) => {
+                const Icon = section.icon;
+
+                return (
+                  <Link
+                    key={section.href}
+                    href={section.href}
+                    className="flex min-w-0 items-center justify-between gap-3 rounded-2xl border border-border/70 px-4 py-3 transition-colors hover:bg-muted/40"
+                  >
+                    <div className="flex min-w-0 items-center gap-3">
+                      <div className={`rounded-2xl p-3 ${section.glowClass}`}>
+                        <Icon className="size-4" />
+                      </div>
+                      <div className="min-w-0">
+                        <p className="truncate font-medium">
+                          {menuT(`sections.${section.translationKey}.title`)}
+                        </p>
+                        <p className="truncate text-xs text-muted-foreground">
+                          {menuT(
+                            `sections.${section.translationKey}.description`
+                          )}
+                        </p>
+                      </div>
+                    </div>
+                    <ArrowUpRight className="size-4 shrink-0 text-muted-foreground" />
+                  </Link>
+                );
+              })}
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+    </Page>
+  );
+}

package/hedhog/frontend/app/document-type/page.tsx.ejs

@@ -246,7 +246,7 @@ export default function DocumentTypePage() {
     <div className="flex flex-col h-screen px-4">
       <PageHeader
         breadcrumbs={[
-          { label: t('breadcrumbContact'), href: '/contact' },
+          { label: t('breadcrumbContact'), href: '/contact/dashboard' },
           { label: t('breadcrumbTitle') },
         ]}
         title={t('pageTitle')}

package/hedhog/frontend/app/follow-ups/page.tsx.ejs

@@ -0,0 +1,15 @@
+'use client';
+
+import { CrmComingSoon } from '../_components/crm-coming-soon';
+import { CalendarClock } from 'lucide-react';
+
+export default function CrmFollowupsPage() {
+  return (
+    <CrmComingSoon
+      currentHref="/contact/follow-ups"
+      titleKey="followups"
+      descriptionKey="followups"
+      icon={CalendarClock}
+    />
+  );
+}

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

@@ -0,0 +1,5 @@
+import { redirect } from 'next/navigation';
+
+export default function ContactPage() {
+  redirect('/contact/dashboard');
+}