@hed-hog/lms 0.0.331 → 0.0.347

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

@@ -1,34 +1,55 @@
 'use client';
 
+import {
+  AlertDialog,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from '@/components/ui/alert-dialog';
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent } from '@/components/ui/card';
-import { EntityPicker } from '@/components/ui/entity-picker';
+import { Input } from '@/components/ui/input';
 import { KpiCardsGrid, type KpiCardItem } from '@/components/ui/kpi-cards-grid';
-import { Separator } from '@/components/ui/separator';
 import {
   Sheet,
   SheetContent,
+  SheetDescription,
   SheetHeader,
   SheetTitle,
 } from '@/components/ui/sheet';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import { useApp } from '@hed-hog/next-app-provider';
 import {
+  AlertTriangle,
   BookOpen,
-  Building2,
   CalendarDays,
-  ExternalLink,
-  Globe,
-  Link2,
+  LineChart as LineChartIcon,
   Pencil,
-  RefreshCw,
+  Trash2,
   UserCheck,
+  UserRound,
 } from 'lucide-react';
 import { useTranslations } from 'next-intl';
-import { useRouter } from 'next/navigation';
-import { useEffect, useState } from 'react';
-import { ActivityPanel } from './enterprise-activity-panel';
+import { useEffect, useRef, useState } from 'react';
+import {
+  Bar,
+  BarChart,
+  CartesianGrid,
+  Cell,
+  Line,
+  LineChart,
+  Pie,
+  PieChart,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+  YAxis,
+} from 'recharts';
 import { AdministratorsTab } from './enterprise-administrators-tab';
 import { ClassesTab } from './enterprise-classes-tab';
 import { CompanyIdentityCard } from './enterprise-company-identity-card';
@@ -36,8 +57,7 @@ import { CoursesTab } from './enterprise-courses-tab';
 import { STATUS_LABEL, STATUS_VARIANT } from './enterprise-detail-constants';
 import { EnterpriseSheet, type EnterpriseFormValues } from './enterprise-sheet';
 import { StudentsTab } from './enterprise-students-tab';
-import type { EnterpriseAccount } from './enterprise-types';
-import { UserDistributionChart } from './enterprise-user-distribution-chart';
+import type { EnterpriseAccount, EnterpriseOverview } from './enterprise-types';
 
 // ── Props ─────────────────────────────────────────────────────────────────────
 
@@ -58,26 +78,25 @@ export function EnterpriseDetailSheet({
   onAccountUpdate,
   onDataChange,
 }: EnterpriseDetailSheetProps) {
-  // Local mirror so saves refresh the sheet without closing it
   const [currentAccount, setCurrentAccount] =
     useState<EnterpriseAccount | null>(account);
+  const [overview, setOverview] = useState<EnterpriseOverview | null>(null);
   const [editSheetOpen, setEditSheetOpen] = useState(false);
-  const [companyPickerOpen, setCompanyPickerOpen] = useState(false);
-  const [companyPickerValue, setCompanyPickerValue] = useState<
-    string | number | null
-  >(null);
-  const [savingCompany, setSavingCompany] = useState(false);
+  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
+  const [deleteConfirmText, setDeleteConfirmText] = useState('');
+  const [isDeleting, setIsDeleting] = useState(false);
+  const onAccountUpdateRef = useRef(onAccountUpdate);
   const { request } = useApp();
-  const router = useRouter();
   const t = useTranslations('lms.EnterpriseDetailPage');
 
-  // Sync whenever the parent switches the account (e.g. clicking a different row)
+  useEffect(() => {
+    onAccountUpdateRef.current = onAccountUpdate;
+  }, [onAccountUpdate]);
+
   useEffect(() => {
     setCurrentAccount(account);
   }, [account]);
 
-  // Refetch full account when sheet opens so studentsCount / managersCount are populated
-  // (the list endpoint omits these counts; only getById computes them)
   useEffect(() => {
     if (!open || !account?.id) return;
     request<EnterpriseAccount>({
@@ -85,23 +104,49 @@ export function EnterpriseDetailSheet({
       method: 'GET',
     })
       .then((res) => {
-        const refreshed: EnterpriseAccount = (res as any).data ?? res;
+        const refreshed: EnterpriseAccount =
+          (res as unknown as { data?: EnterpriseAccount }).data ??
+          (res as unknown as EnterpriseAccount);
         setCurrentAccount(refreshed);
       })
       .catch(() => {
         // keep the stale list-row data as fallback
       });
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [open, account?.id]);
+  }, [open, account?.id, request]);
+
+  useEffect(() => {
+    if (!open || !account?.id) return;
+    request<EnterpriseOverview>({
+      url: `/lms/enterprise/${account.id}/overview`,
+      method: 'GET',
+    })
+      .then((res) => {
+        const data: EnterpriseOverview =
+          (res as unknown as { data?: EnterpriseOverview }).data ??
+          (res as unknown as EnterpriseOverview);
+        setOverview(data);
+        if (data?.account) {
+          setCurrentAccount(data.account);
+          onAccountUpdateRef.current?.(data.account);
+        }
+      })
+      .catch(() => {
+        setOverview(null);
+      });
+  }, [open, account?.id, request]);
 
   async function handleInternalSave(_values: EnterpriseFormValues) {
     if (!currentAccount) return;
     try {
-      const res = await request<EnterpriseAccount>({
-        url: `/lms/enterprise/${currentAccount.id}`,
+      const res = await request<EnterpriseOverview>({
+        url: `/lms/enterprise/${currentAccount.id}/overview`,
         method: 'GET',
       });
-      const refreshed: EnterpriseAccount = (res as any).data ?? res;
+      const payload: EnterpriseOverview =
+        (res as unknown as { data?: EnterpriseOverview }).data ??
+        (res as unknown as EnterpriseOverview);
+      const refreshed = payload.account;
+      setOverview(payload);
       setCurrentAccount(refreshed);
       onAccountUpdate?.(refreshed);
     } catch {
@@ -128,11 +173,15 @@ export function EnterpriseDetailSheet({
     onDataChange?.();
     if (!currentAccount?.id) return;
     try {
-      const res = await request<EnterpriseAccount>({
-        url: `/lms/enterprise/${currentAccount.id}`,
+      const res = await request<EnterpriseOverview>({
+        url: `/lms/enterprise/${currentAccount.id}/overview`,
         method: 'GET',
       });
-      const refreshed: EnterpriseAccount = (res as any).data ?? res;
+      const payload: EnterpriseOverview =
+        (res as unknown as { data?: EnterpriseOverview }).data ??
+        (res as unknown as EnterpriseOverview);
+      const refreshed = payload.account;
+      setOverview(payload);
       setCurrentAccount(refreshed);
       onAccountUpdate?.(refreshed);
     } catch {
@@ -140,31 +189,36 @@ export function EnterpriseDetailSheet({
     }
   }
 
-  async function handleCompanySave(newPersonId: number) {
+  async function handleDeleteAccount() {
     if (!currentAccount?.id) return;
-    setSavingCompany(true);
+    setIsDeleting(true);
     try {
       await request({
         url: `/lms/enterprise/${currentAccount.id}`,
-        method: 'PATCH',
-        data: { crm_person_id: newPersonId },
+        method: 'DELETE',
       });
-      setCompanyPickerOpen(false);
-      setCompanyPickerValue(null);
-      await handleTabMutate();
-    } catch {
-      // toast handled by caller
+      setDeleteDialogOpen(false);
+      onOpenChange(false);
+      onDataChange?.();
     } finally {
-      setSavingCompany(false);
+      setIsDeleting(false);
     }
   }
 
+  function getPersonAvatarUrl(avatarId?: number | null) {
+    return typeof avatarId === 'number' && avatarId > 0
+      ? `${process.env.NEXT_PUBLIC_API_BASE_URL}/person/avatar/${avatarId}`
+      : undefined;
+  }
+
+  const overviewKpis = overview?.kpis;
+
   const kpiItems: KpiCardItem[] = currentAccount
     ? [
         {
           key: 'students',
           title: t('kpis.students.label'),
-          value: currentAccount.studentsCount,
+          value: overviewKpis?.students ?? currentAccount.studentsCount,
           description: t('kpis.students.description'),
           icon: UserCheck,
           accentClassName:
@@ -174,7 +228,7 @@ export function EnterpriseDetailSheet({
         {
           key: 'classes',
           title: t('kpis.contractedClasses.label'),
-          value: currentAccount.classesCount,
+          value: overviewKpis?.classes ?? currentAccount.classesCount,
           description: t('kpis.contractedClasses.description'),
           icon: CalendarDays,
           accentClassName:
@@ -184,33 +238,94 @@ export function EnterpriseDetailSheet({
         {
           key: 'courses',
           title: t('kpis.courses.label'),
-          value: currentAccount.coursesCount,
+          value: overviewKpis?.courses ?? currentAccount.coursesCount,
           description: t('kpis.courses.description'),
           icon: BookOpen,
           accentClassName: 'from-blue-500/20 via-cyan-500/10 to-transparent',
           iconContainerClassName: 'bg-blue-50 text-blue-600',
         },
+        {
+          key: 'administrators',
+          title: t('kpis.users.label'),
+          value:
+            overviewKpis?.administrators ??
+            currentAccount.adminsCount + currentAccount.managersCount,
+          description: t('kpis.users.description'),
+          icon: UserRound,
+          accentClassName: 'from-amber-500/20 via-orange-500/10 to-transparent',
+          iconContainerClassName: 'bg-amber-50 text-amber-600',
+        },
       ]
     : [];
 
+  const licenseUsageChart = [
+    {
+      name: 'Usadas',
+      value: overview?.licenseUsage.used ?? 0,
+      color: 'hsl(221 83% 53%)',
+    },
+    {
+      name: 'Disponiveis',
+      value: overview?.licenseUsage.available ?? 0,
+      color: 'hsl(160 84% 39%)',
+    },
+  ];
+
   return (
     <>
-      {/* ── Detail Sheet ── */}
       <Sheet open={open} onOpenChange={onOpenChange}>
         <SheetContent
           side="right"
-          className="flex w-full flex-col gap-0 overflow-y-auto p-0 sm:max-w-5xl"
+          className="flex w-full flex-col gap-0 overflow-y-auto p-0 sm:max-w-[95vw] lg:max-w-6xl"
         >
           {currentAccount && (
             <>
               <SheetHeader className="flex flex-row items-center justify-between gap-4 border-b px-6 py-4">
-                <div className="flex items-center gap-3">
-                  <SheetTitle className="text-base">
-                    {currentAccount.name}
-                  </SheetTitle>
-                  <Badge variant={STATUS_VARIANT[currentAccount.status]}>
-                    {STATUS_LABEL[currentAccount.status]}
-                  </Badge>
+                <div className="flex min-w-0 items-center gap-3">
+                  <Avatar className="h-10 w-10 border">
+                    <AvatarImage
+                      src={getPersonAvatarUrl(
+                        currentAccount.crmAccount?.avatarId ?? null
+                      )}
+                    />
+                    <AvatarFallback>
+                      {currentAccount.name
+                        .split(' ')
+                        .filter(Boolean)
+                        .slice(0, 2)
+                        .map((part) => part[0]?.toUpperCase() ?? '')
+                        .join('')}
+                    </AvatarFallback>
+                  </Avatar>
+                  <div className="min-w-0">
+                    <SheetTitle className="truncate text-base font-semibold">
+                      {currentAccount.name}
+                    </SheetTitle>
+                    <div className="mt-0.5 flex items-center gap-2 text-xs text-muted-foreground">
+                      <span className="font-mono">{currentAccount.slug}</span>
+                      <Badge
+                        variant={STATUS_VARIANT[currentAccount.status]}
+                        className="text-[10px]"
+                      >
+                        {STATUS_LABEL[currentAccount.status]}
+                      </Badge>
+                    </div>
+                  </div>
+                </div>
+                <SheetDescription className="sr-only">
+                  {currentAccount.name} overview, metrics, classes, courses,
+                  administrators, and students.
+                </SheetDescription>
+                <div className="flex items-center gap-2">
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={() => setEditSheetOpen(true)}
+                    className="shrink-0"
+                  >
+                    <Pencil className="mr-2 h-4 w-4" />
+                    {t('actions.edit')}
+                  </Button>
                 </div>
               </SheetHeader>
 
@@ -221,9 +336,6 @@ export function EnterpriseDetailSheet({
                       <TabsTrigger value="overview">
                         {t('tabs.overview')}
                       </TabsTrigger>
-                      <TabsTrigger value="empresa">
-                        {t('tabs.empresa')}
-                      </TabsTrigger>
                       <TabsTrigger value="classes">
                         {t('tabs.classes')}
                       </TabsTrigger>
@@ -237,269 +349,236 @@ export function EnterpriseDetailSheet({
                         {t('tabs.administrators')}
                       </TabsTrigger>
                     </TabsList>
-                    <Button
-                      variant="outline"
-                      size="sm"
-                      onClick={() => setEditSheetOpen(true)}
-                      className="shrink-0"
-                    >
-                      <Pencil className="mr-2 h-4 w-4" />
-                      {t('actions.edit')}
-                    </Button>
                   </div>
 
-                  {/* ── Overview tab ── */}
                   <TabsContent value="overview" className="mt-5 space-y-5">
-                    {/* Company identity card — click opens edit sheet */}
                     <CompanyIdentityCard
                       account={currentAccount}
                       onEditClick={() => setEditSheetOpen(true)}
                     />
 
-                    {/* KPI row */}
                     <KpiCardsGrid items={kpiItems} />
 
-                    {/* Charts row */}
-                    <div className="grid grid-cols-1 gap-5 lg:grid-cols-2">
-                      <UserDistributionChart account={currentAccount} />
-                      <ActivityPanel enterpriseId={currentAccount.id} />
-                    </div>
-                  </TabsContent>
+                    <div className="grid grid-cols-1 gap-5 lg:grid-cols-3">
+                      <Card className="border-border/60 lg:col-span-2">
+                        <CardContent className="p-4">
+                          <div className="mb-2 flex items-center gap-2 text-sm font-medium">
+                            <LineChartIcon className="h-4 w-4 text-muted-foreground" />
+                            Uso de licencas no tempo
+                          </div>
+                          <div className="h-64 w-full">
+                            <ResponsiveContainer width="100%" height="100%">
+                              <LineChart data={overview?.licenseTimeline ?? []}>
+                                <CartesianGrid
+                                  strokeDasharray="3 3"
+                                  vertical={false}
+                                />
+                                <XAxis
+                                  dataKey="label"
+                                  tickLine={false}
+                                  axisLine={false}
+                                />
+                                <YAxis
+                                  tickLine={false}
+                                  axisLine={false}
+                                  allowDecimals={false}
+                                />
+                                <Tooltip />
+                                <Bar
+                                  dataKey="assigned"
+                                  fill="hsl(160 84% 39%)"
+                                  radius={[4, 4, 0, 0]}
+                                />
+                                <Bar
+                                  dataKey="revoked"
+                                  fill="hsl(0 84% 60%)"
+                                  radius={[4, 4, 0, 0]}
+                                />
+                                <Line
+                                  type="monotone"
+                                  dataKey="used"
+                                  stroke="hsl(221 83% 53%)"
+                                  strokeWidth={2.5}
+                                  dot={{ r: 3 }}
+                                />
+                              </LineChart>
+                            </ResponsiveContainer>
+                          </div>
+                        </CardContent>
+                      </Card>
 
-                  {/* ── Empresa tab ── */}
-                  <TabsContent value="empresa" className="mt-4 space-y-4">
-                    {/* ── Linked company card ── */}
-                    {currentAccount.crmAccountId &&
-                    currentAccount.crmAccountName ? (
                       <Card className="border-border/60">
-                        <CardContent className="p-5">
-                          <div className="flex items-start justify-between gap-4">
-                            <div className="flex items-center gap-4">
-                              <div className="flex h-12 w-12 shrink-0 items-center justify-center rounded-xl border bg-muted/40">
-                                <Building2 className="h-6 w-6 text-muted-foreground" />
-                              </div>
-                              <div>
-                                <p className="text-base font-semibold leading-tight">
-                                  {currentAccount.crmAccount?.tradeName ||
-                                    currentAccount.crmAccountName}
-                                </p>
-                                {currentAccount.crmAccount?.tradeName &&
-                                  currentAccount.crmAccount.tradeName !==
-                                    currentAccount.crmAccountName && (
-                                    <p className="text-xs text-muted-foreground">
-                                      {currentAccount.crmAccountName}
-                                    </p>
-                                  )}
-                                {currentAccount.crmAccount?.lifecycleStage && (
-                                  <Badge
-                                    variant="outline"
-                                    className="mt-1 text-[10px]"
-                                  >
-                                    {currentAccount.crmAccount.lifecycleStage}
-                                  </Badge>
-                                )}
-                              </div>
-                            </div>
-                            <Button
-                              variant="outline"
-                              size="sm"
-                              onClick={() =>
-                                router.push(
-                                  `/contact/accounts?id=${currentAccount.crmAccountId}`
-                                )
-                              }
-                              className="shrink-0"
-                            >
-                              <ExternalLink className="mr-2 h-4 w-4" />
-                              {t('empresa.openRecord')}
-                            </Button>
+                        <CardContent className="space-y-4 p-4">
+                          <div className="text-sm font-medium">
+                            Licencas atuais
                           </div>
+                          <div className="mx-auto h-40 w-40">
+                            <ResponsiveContainer width="100%" height="100%">
+                              <PieChart>
+                                <Pie
+                                  data={licenseUsageChart}
+                                  dataKey="value"
+                                  innerRadius={42}
+                                  outerRadius={64}
+                                  strokeWidth={2}
+                                >
+                                  {licenseUsageChart.map((slice) => (
+                                    <Cell key={slice.name} fill={slice.color} />
+                                  ))}
+                                </Pie>
+                                <Tooltip />
+                              </PieChart>
+                            </ResponsiveContainer>
+                          </div>
+                          <div className="text-xs text-muted-foreground">
+                            {overview?.licenseUsage.used ?? 0} usadas
+                            {typeof overview?.licenseUsage.limit === 'number'
+                              ? ` de ${overview.licenseUsage.limit} limite`
+                              : ' (ilimitado)'}
+                          </div>
+                        </CardContent>
+                      </Card>
+                    </div>
 
-                          <Separator className="my-4" />
-
-                          <dl className="grid grid-cols-1 gap-3 sm:grid-cols-2">
-                            {currentAccount.crmAccount?.industry && (
-                              <div>
-                                <dt className="text-[10px] font-medium uppercase tracking-wide text-muted-foreground">
-                                  {t('empresa.industry')}
-                                </dt>
-                                <dd className="mt-0.5 text-sm">
-                                  {currentAccount.crmAccount.industry}
-                                </dd>
-                              </div>
-                            )}
-                            {currentAccount.crmAccount?.website && (
-                              <div>
-                                <dt className="text-[10px] font-medium uppercase tracking-wide text-muted-foreground">
-                                  {t('empresa.website')}
-                                </dt>
-                                <dd className="mt-0.5 text-sm">
-                                  <a
-                                    href={currentAccount.crmAccount.website}
-                                    target="_blank"
-                                    rel="noopener noreferrer"
-                                    className="flex items-center gap-1 text-primary hover:underline"
-                                  >
-                                    <Globe className="h-3 w-3" />
-                                    {currentAccount.crmAccount.website.replace(
-                                      /^https?:\/\//,
-                                      ''
-                                    )}
-                                  </a>
-                                </dd>
-                              </div>
-                            )}
-                            <div>
-                              <dt className="text-[10px] font-medium uppercase tracking-wide text-muted-foreground">
-                                {t('empresa.recordId')}
-                              </dt>
-                              <dd className="mt-0.5 font-mono text-sm">
-                                #{currentAccount.crmAccountId}
-                              </dd>
-                            </div>
-                          </dl>
-
-                          <div className="mt-4 flex justify-end">
-                            <Button
-                              variant="ghost"
-                              size="sm"
-                              className="text-muted-foreground"
-                              onClick={() => setCompanyPickerOpen((v) => !v)}
-                            >
-                              <RefreshCw className="mr-2 h-3.5 w-3.5" />
-                              {t('empresa.changeCompany')}
-                            </Button>
+                    <div className="grid grid-cols-1 gap-5 lg:grid-cols-2">
+                      <Card className="border-border/60">
+                        <CardContent className="space-y-3 p-4">
+                          <div className="flex items-center justify-between">
+                            <p className="text-sm font-medium">
+                              Vagas em turmas agendadas
+                            </p>
+                            <Badge variant="outline">
+                              {overview?.scheduledSeats.capacity ?? 0} total
+                            </Badge>
+                          </div>
+                          <div className="h-56 w-full">
+                            <ResponsiveContainer width="100%" height="100%">
+                              <BarChart
+                                data={[
+                                  {
+                                    name: 'Vagas',
+                                    usadas: overview?.scheduledSeats.used ?? 0,
+                                    abertas: overview?.scheduledSeats.open ?? 0,
+                                  },
+                                ]}
+                              >
+                                <CartesianGrid
+                                  strokeDasharray="3 3"
+                                  vertical={false}
+                                />
+                                <XAxis
+                                  dataKey="name"
+                                  tickLine={false}
+                                  axisLine={false}
+                                />
+                                <YAxis
+                                  tickLine={false}
+                                  axisLine={false}
+                                  allowDecimals={false}
+                                />
+                                <Tooltip />
+                                <Bar
+                                  dataKey="usadas"
+                                  stackId="seats"
+                                  fill="hsl(221 83% 53%)"
+                                />
+                                <Bar
+                                  dataKey="abertas"
+                                  stackId="seats"
+                                  fill="hsl(160 84% 39%)"
+                                />
+                              </BarChart>
+                            </ResponsiveContainer>
                           </div>
                         </CardContent>
                       </Card>
-                    ) : (
-                      /* ── Empty state ── */
-                      <div className="flex flex-col items-center justify-center py-10 text-center">
-                        <div className="mb-4 text-muted-foreground/30">
-                          <Link2 className="h-12 w-12" />
-                        </div>
-                        <p className="text-sm font-medium text-muted-foreground">
-                          {t('empresa.emptyTitle')}
-                        </p>
-                        <p className="mt-1 max-w-xs text-xs text-muted-foreground/60">
-                          {t('empresa.emptyDescription')}
-                        </p>
-                        <Button
-                          variant="outline"
-                          size="sm"
-                          className="mt-6"
-                          onClick={() => setCompanyPickerOpen(true)}
-                        >
-                          <Link2 className="mr-2 h-4 w-4" />
-                          {t('empresa.linkCompany')}
-                        </Button>
-                      </div>
-                    )}
 
-                    {/* ── Inline company picker (replace / create) ── */}
-                    {companyPickerOpen && (
-                      <Card className="border-dashed border-border/80">
-                        <CardContent className="p-5">
-                          <p className="mb-3 text-sm font-medium">
-                            {currentAccount.crmAccountId
-                              ? t('empresa.replaceCompany')
-                              : t('empresa.selectCompany')}
-                          </p>
-                          <EntityPicker
-                            name="companyPicker"
-                            value={companyPickerValue}
-                            onChange={(val) => setCompanyPickerValue(val)}
-                            label=""
-                            placeholder={t('empresa.pickerPlaceholder')}
-                            searchPlaceholder={t(
-                              'empresa.pickerSearchPlaceholder'
-                            )}
-                            emptyLabel={t('empresa.pickerEmptyLabel')}
-                            entityLabel={t('empresa.pickerEntityLabel')}
-                            clearable={false}
-                            valueType="number"
-                            loadOptions={async ({ page, pageSize, search }) => {
-                              const params = new URLSearchParams({
-                                page: String(page),
-                                pageSize: String(pageSize),
-                              });
-                              if (search.trim())
-                                params.set('search', search.trim());
-                              const res = await request<{
-                                data: Array<{ id: number; name: string }>;
-                                total: number;
-                                lastPage?: number;
-                              }>({
-                                url: `/person/accounts?${params}`,
-                                method: 'GET',
-                              });
-                              return {
-                                items: res.data.data ?? [],
-                                hasMore: page < (res.data.lastPage ?? 1),
-                              };
-                            }}
-                            getOptionValue={(opt) => (opt as any).id}
-                            getOptionLabel={(opt) => (opt as any).name ?? ''}
-                            createFields={[
-                              {
-                                name: 'name',
-                                label: t('empresa.createFieldLabel'),
-                                placeholder: t(
-                                  'empresa.createFieldPlaceholder'
-                                ),
-                                required: true,
-                              },
-                            ]}
-                            mapSearchToCreateValues={(search) => ({
-                              name: search,
-                            })}
-                            onCreate={async (values) => {
-                              const res = await request<{
-                                id: number;
-                                name: string;
-                              }>({
-                                url: '/person/accounts',
-                                method: 'POST',
-                                data: {
-                                  name: (values.name ?? '').trim(),
-                                  status: 'active',
-                                },
-                              });
-                              const created = res.data as unknown as {
-                                id: number;
-                                name: string;
-                              };
-                              // immediately save the new company link
-                              await handleCompanySave(created.id);
-                              return created;
-                            }}
-                          />
-                          <div className="mt-4 flex justify-end gap-2">
-                            <Button
-                              variant="outline"
-                              size="sm"
-                              onClick={() => {
-                                setCompanyPickerOpen(false);
-                                setCompanyPickerValue(null);
-                              }}
-                            >
-                              {t('actions.cancel')}
-                            </Button>
-                            <Button
-                              size="sm"
-                              disabled={!companyPickerValue || savingCompany}
-                              onClick={() =>
-                                handleCompanySave(companyPickerValue as number)
+                      <Card className="border-border/60">
+                        <CardContent className="space-y-3 p-4">
+                          <div className="flex items-center justify-between">
+                            <p className="text-sm font-medium">
+                              Atividades recentes
+                            </p>
+                            <Badge
+                              variant={
+                                overview?.kpis.portalEnabled
+                                  ? 'default'
+                                  : 'outline'
                               }
                             >
-                              {savingCompany
-                                ? t('actions.saving')
-                                : t('actions.save')}
-                            </Button>
+                              {overview?.kpis.portalEnabled
+                                ? 'Portal Hcode Training ativo'
+                                : 'Sem acesso ao portal'}
+                            </Badge>
+                          </div>
+                          <div className="space-y-3">
+                            {(overview?.activities ?? [])
+                              .slice(0, 8)
+                              .map((activity) => (
+                                <div
+                                  key={activity.id}
+                                  className="rounded-md border border-border/70 px-3 py-2"
+                                >
+                                  <div className="flex items-center justify-between gap-2">
+                                    <p className="text-sm font-medium">
+                                      {activity.title}
+                                    </p>
+                                    <span className="text-[11px] text-muted-foreground">
+                                      {new Date(
+                                        activity.createdAt
+                                      ).toLocaleString('pt-BR')}
+                                    </span>
+                                  </div>
+                                  <p className="mt-0.5 text-xs text-muted-foreground">
+                                    {activity.description}
+                                  </p>
+                                </div>
+                              ))}
+                            {(overview?.activities ?? []).length === 0 && (
+                              <p className="text-sm text-muted-foreground">
+                                Sem registros recentes.
+                              </p>
+                            )}
                           </div>
                         </CardContent>
                       </Card>
-                    )}
+                    </div>
+
+                    {/* ── Danger Zone ──────────────────────────────────────── */}
+                    <Card className="border-destructive/40">
+                      <CardContent className="p-4">
+                        <div className="mb-3 flex items-center gap-2">
+                          <AlertTriangle className="h-4 w-4 text-destructive" />
+                          <span className="text-sm font-semibold text-destructive">
+                            Zona de perigo
+                          </span>
+                        </div>
+                        <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
+                          <div className="space-y-1">
+                            <p className="text-sm font-medium">
+                              Excluir conta enterprise
+                            </p>
+                            <p className="text-xs text-muted-foreground">
+                              Esta ação é irreversível. Todos os dados desta
+                              conta — turmas, cursos, alunos e histórico — serão
+                              permanentemente removidos.
+                            </p>
+                          </div>
+                          <Button
+                            variant="destructive"
+                            size="sm"
+                            className="shrink-0"
+                            onClick={() => {
+                              setDeleteConfirmText('');
+                              setDeleteDialogOpen(true);
+                            }}
+                          >
+                            <Trash2 className="mr-2 h-4 w-4" />
+                            Excluir conta
+                          </Button>
+                        </div>
+                      </CardContent>
+                    </Card>
                   </TabsContent>
 
                   <TabsContent value="classes" className="mt-4">
@@ -536,6 +615,61 @@ export function EnterpriseDetailSheet({
         </SheetContent>
       </Sheet>
 
+      {/* ── Delete Confirmation Dialog ── */}
+      <AlertDialog
+        open={deleteDialogOpen}
+        onOpenChange={(v) => {
+          if (!v) setDeleteConfirmText('');
+          setDeleteDialogOpen(v);
+        }}
+      >
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle className="flex items-center gap-2 text-destructive">
+              <AlertTriangle className="h-5 w-5" />
+              Excluir conta enterprise
+            </AlertDialogTitle>
+            <AlertDialogDescription asChild>
+              <div className="space-y-3 text-sm text-muted-foreground">
+                <p>
+                  Esta ação é <strong>irreversível</strong>. Todos os dados
+                  desta conta — turmas, cursos, alunos e histórico — serão
+                  permanentemente removidos.
+                </p>
+                <p>
+                  Para confirmar, digite o nome da conta:{' '}
+                  <strong className="text-foreground">
+                    {currentAccount?.name}
+                  </strong>
+                </p>
+                <Input
+                  value={deleteConfirmText}
+                  onChange={(e) => setDeleteConfirmText(e.target.value)}
+                  placeholder={currentAccount?.name ?? ''}
+                  autoComplete="off"
+                  autoCorrect="off"
+                  spellCheck={false}
+                />
+              </div>
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel disabled={isDeleting}>
+              Cancelar
+            </AlertDialogCancel>
+            <Button
+              variant="destructive"
+              disabled={
+                deleteConfirmText !== (currentAccount?.name ?? '') || isDeleting
+              }
+              onClick={() => void handleDeleteAccount()}
+            >
+              {isDeleting ? 'Excluindo…' : 'Excluir definitivamente'}
+            </Button>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+
       {/* ── Edit Sheet (slides over the detail sheet) ── */}
       <EnterpriseSheet
         open={editSheetOpen}