@hed-hog/lms 0.0.304 → 0.0.306

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

@@ -0,0 +1,548 @@
+'use client';
+
+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 { KpiCardsGrid, type KpiCardItem } from '@/components/ui/kpi-cards-grid';
+import { Separator } from '@/components/ui/separator';
+import {
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+} from '@/components/ui/sheet';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { useApp } from '@hed-hog/next-app-provider';
+import {
+  BookOpen,
+  Building2,
+  CalendarDays,
+  ExternalLink,
+  Globe,
+  Link2,
+  Pencil,
+  RefreshCw,
+  UserCheck,
+} 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 { AdministratorsTab } from './enterprise-administrators-tab';
+import { ClassesTab } from './enterprise-classes-tab';
+import { CompanyIdentityCard } from './enterprise-company-identity-card';
+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';
+
+// ── Props ─────────────────────────────────────────────────────────────────────
+
+export interface EnterpriseDetailSheetProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  account: EnterpriseAccount | null;
+  onAccountUpdate?: (updated: EnterpriseAccount) => void;
+  onDataChange?: () => void;
+}
+
+// ── Component ─────────────────────────────────────────────────────────────────
+
+export function EnterpriseDetailSheet({
+  open,
+  onOpenChange,
+  account,
+  onAccountUpdate,
+  onDataChange,
+}: EnterpriseDetailSheetProps) {
+  // Local mirror so saves refresh the sheet without closing it
+  const [currentAccount, setCurrentAccount] =
+    useState<EnterpriseAccount | null>(account);
+  const [editSheetOpen, setEditSheetOpen] = useState(false);
+  const [companyPickerOpen, setCompanyPickerOpen] = useState(false);
+  const [companyPickerValue, setCompanyPickerValue] = useState<
+    string | number | null
+  >(null);
+  const [savingCompany, setSavingCompany] = useState(false);
+  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(() => {
+    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>({
+      url: `/lms/enterprise/${account.id}`,
+      method: 'GET',
+    })
+      .then((res) => {
+        const refreshed: EnterpriseAccount = (res as any).data ?? res;
+        setCurrentAccount(refreshed);
+      })
+      .catch(() => {
+        // keep the stale list-row data as fallback
+      });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [open, account?.id]);
+
+  async function handleInternalSave(_values: EnterpriseFormValues) {
+    if (!currentAccount) return;
+    try {
+      const res = await request<EnterpriseAccount>({
+        url: `/lms/enterprise/${currentAccount.id}`,
+        method: 'GET',
+      });
+      const refreshed: EnterpriseAccount = (res as any).data ?? res;
+      setCurrentAccount(refreshed);
+      onAccountUpdate?.(refreshed);
+    } catch {
+      // fallback: update local state optimistically without CRM name resolution
+      setCurrentAccount((prev) =>
+        prev
+          ? {
+              ...prev,
+              name: _values.name,
+              slug: _values.slug,
+              status: _values.status,
+              crmAccountId: _values.crmAccountId,
+              crmAccountName: prev.crmAccountName,
+              portalEnabled: _values.portalEnabled,
+              licenseLimit: _values.licenseLimit ?? null,
+              updatedAt: new Date().toISOString(),
+            }
+          : prev
+      );
+    }
+  }
+
+  async function handleTabMutate() {
+    onDataChange?.();
+    if (!currentAccount?.id) return;
+    try {
+      const res = await request<EnterpriseAccount>({
+        url: `/lms/enterprise/${currentAccount.id}`,
+        method: 'GET',
+      });
+      const refreshed: EnterpriseAccount = (res as any).data ?? res;
+      setCurrentAccount(refreshed);
+      onAccountUpdate?.(refreshed);
+    } catch {
+      // ignore — tab already reflects the mutation via its own refetch
+    }
+  }
+
+  async function handleCompanySave(newPersonId: number) {
+    if (!currentAccount?.id) return;
+    setSavingCompany(true);
+    try {
+      await request({
+        url: `/lms/enterprise/${currentAccount.id}`,
+        method: 'PATCH',
+        data: { crm_person_id: newPersonId },
+      });
+      setCompanyPickerOpen(false);
+      setCompanyPickerValue(null);
+      await handleTabMutate();
+    } catch {
+      // toast handled by caller
+    } finally {
+      setSavingCompany(false);
+    }
+  }
+
+  const kpiItems: KpiCardItem[] = currentAccount
+    ? [
+        {
+          key: 'students',
+          title: t('kpis.students.label'),
+          value: currentAccount.studentsCount,
+          description: t('kpis.students.description'),
+          icon: UserCheck,
+          accentClassName:
+            'from-emerald-500/20 via-emerald-400/10 to-transparent',
+          iconContainerClassName: 'bg-emerald-50 text-emerald-600',
+        },
+        {
+          key: 'classes',
+          title: t('kpis.contractedClasses.label'),
+          value: currentAccount.classesCount,
+          description: t('kpis.contractedClasses.description'),
+          icon: CalendarDays,
+          accentClassName:
+            'from-violet-500/20 via-violet-400/10 to-transparent',
+          iconContainerClassName: 'bg-violet-50 text-violet-600',
+        },
+        {
+          key: 'courses',
+          title: t('kpis.courses.label'),
+          value: 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',
+        },
+      ]
+    : [];
+
+  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"
+        >
+          {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>
+              </SheetHeader>
+
+              <div className="flex-1 px-6 py-4">
+                <Tabs defaultValue="overview">
+                  <div className="flex justify-between">
+                    <TabsList>
+                      <TabsTrigger value="overview">
+                        {t('tabs.overview')}
+                      </TabsTrigger>
+                      <TabsTrigger value="empresa">
+                        {t('tabs.empresa')}
+                      </TabsTrigger>
+                      <TabsTrigger value="classes">
+                        {t('tabs.classes')}
+                      </TabsTrigger>
+                      <TabsTrigger value="courses">
+                        {t('tabs.courses')}
+                      </TabsTrigger>
+                      <TabsTrigger value="students">
+                        {t('tabs.students')}
+                      </TabsTrigger>
+                      <TabsTrigger value="administrators">
+                        {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>
+
+                  {/* ── 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>
+                          </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>
+                        </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)
+                              }
+                            >
+                              {savingCompany
+                                ? t('actions.saving')
+                                : t('actions.save')}
+                            </Button>
+                          </div>
+                        </CardContent>
+                      </Card>
+                    )}
+                  </TabsContent>
+
+                  <TabsContent value="classes" className="mt-4">
+                    <ClassesTab
+                      enterpriseId={currentAccount.id}
+                      onMutate={handleTabMutate}
+                    />
+                  </TabsContent>
+
+                  <TabsContent value="courses" className="mt-4">
+                    <CoursesTab
+                      enterpriseId={currentAccount.id}
+                      onMutate={handleTabMutate}
+                    />
+                  </TabsContent>
+
+                  <TabsContent value="students" className="mt-4">
+                    <StudentsTab
+                      enterpriseId={currentAccount.id}
+                      onMutate={handleTabMutate}
+                    />
+                  </TabsContent>
+
+                  <TabsContent value="administrators" className="mt-4">
+                    <AdministratorsTab
+                      enterpriseId={currentAccount.id}
+                      onMutate={handleTabMutate}
+                    />
+                  </TabsContent>
+                </Tabs>
+              </div>
+            </>
+          )}
+        </SheetContent>
+      </Sheet>
+
+      {/* ── Edit Sheet (slides over the detail sheet) ── */}
+      <EnterpriseSheet
+        open={editSheetOpen}
+        onOpenChange={setEditSheetOpen}
+        editingAccount={currentAccount}
+        onSave={handleInternalSave}
+      />
+    </>
+  );
+}

package/hedhog/frontend/app/enterprise/_components/enterprise-detail-utils.ts.ejs

@@ -0,0 +1,33 @@
+export const AVATAR_COLORS: Array<{ bg: string; text: string }> = [
+  { bg: 'bg-blue-500', text: 'text-white' },
+  { bg: 'bg-emerald-500', text: 'text-white' },
+  { bg: 'bg-violet-500', text: 'text-white' },
+  { bg: 'bg-rose-500', text: 'text-white' },
+  { bg: 'bg-amber-500', text: 'text-white' },
+  { bg: 'bg-cyan-500', text: 'text-white' },
+  { bg: 'bg-indigo-500', text: 'text-white' },
+  { bg: 'bg-orange-500', text: 'text-white' },
+];
+
+export function getAvatarColor(name: string): { bg: string; text: string } {
+  let hash = 0;
+  for (let i = 0; i < name.length; i++) {
+    hash = (hash * 31 + name.charCodeAt(i)) & 0xffff;
+  }
+  return AVATAR_COLORS[hash % AVATAR_COLORS.length]!;
+}
+
+export function getInitials(name: string): string {
+  const parts = name.trim().split(/\s+/).filter(Boolean);
+  if (parts.length === 0) return '?';
+  if (parts.length === 1) return (parts[0] ?? '').slice(0, 2).toUpperCase();
+  return (
+    ((parts[0] ?? '')[0] ?? '') + ((parts[1] ?? '')[0] ?? '')
+  ).toUpperCase();
+}
+
+export function formatDateShort(iso: string | null): string {
+  if (!iso) return '—';
+  const [y, m, d] = iso.split('-');
+  return `${d}/${m}/${y}`;
+}