@hed-hog/lms 0.0.305 → 0.0.306

package/hedhog/frontend/app/enterprise/[id]/page.tsx.ejs

@@ -1,317 +1,317 @@
-'use client';
-
-import { Page, PageHeader } from '@/components/entity-list';
-import { Badge } from '@/components/ui/badge';
-import { Button } from '@/components/ui/button';
-import { Card, CardContent } from '@/components/ui/card';
-import { KpiCardsGrid, type KpiCardItem } from '@/components/ui/kpi-cards-grid';
-import { Separator } from '@/components/ui/separator';
-import { Skeleton } from '@/components/ui/skeleton';
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
-import { formatDate } from '@/lib/format-date';
-import { useApp, useQuery } from '@hed-hog/next-app-provider';
-import {
-  BookOpen,
-  Building2,
-  CalendarDays,
-  ExternalLink,
-  Link2,
-  Pencil,
-  UserCheck,
-  Users,
-} from 'lucide-react';
-import { notFound, useParams, useRouter } from 'next/navigation';
-import { useState } from 'react';
-import { AdministratorsTab } from '../_components/enterprise-administrators-tab';
-import { ClassesTab } from '../_components/enterprise-classes-tab';
-import { CoursesTab } from '../_components/enterprise-courses-tab';
-import { EnterpriseSheet } from '../_components/enterprise-sheet';
-import { StudentsTab } from '../_components/enterprise-students-tab';
-import type {
-  EnterpriseAccount,
-  EnterpriseStatus,
-} from '../_components/enterprise-types';
-
-// ── Constants ─────────────────────────────────────────────────────────────────
-
-const STATUS_VARIANT: Record<
-  EnterpriseStatus,
-  'default' | 'secondary' | 'outline' | 'destructive'
-> = {
-  active: 'default',
-  trial: 'secondary',
-  inactive: 'outline',
-  suspended: 'destructive',
-};
-
-const STATUS_LABEL: Record<EnterpriseStatus, string> = {
-  active: 'Active',
-  trial: 'Trial',
-  inactive: 'Inactive',
-  suspended: 'Suspended',
-};
-
-// ── CRM Tab ───────────────────────────────────────────────────────────────────
-
-function CrmTab({
-  crmAccountId,
-  crmAccountName,
-  onLinkCrm,
-}: {
-  crmAccountId: number | null;
-  crmAccountName: string | null;
-  onLinkCrm?: () => void;
-}) {
-  const router = useRouter();
-  if (!crmAccountId || !crmAccountName) {
-    return (
-      <div className="flex flex-col items-center justify-center py-20 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">
-          No CRM account linked
-        </p>
-        <p className="mt-1 max-w-xs text-xs text-muted-foreground/60">
-          This enterprise account is not yet associated with a CRM commercial
-          account. Link one to keep both records in sync.
-        </p>
-        <Button
-          variant="outline"
-          size="sm"
-          className="mt-6"
-          onClick={onLinkCrm}
-        >
-          <Link2 className="mr-2 h-4 w-4" />
-          Link CRM account
-        </Button>
-      </div>
-    );
-  }
-
-  return (
-    <Card className="border-border/60">
-      <CardContent className="p-6">
-        <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">{crmAccountName}</p>
-              <p className="text-xs text-muted-foreground">
-                CRM Account #{crmAccountId}
-              </p>
-            </div>
-          </div>
-          <Button
-            variant="outline"
-            size="sm"
-            onClick={() => router.push('/contact/accounts')}
-            className="shrink-0"
-          >
-            <ExternalLink className="mr-2 h-4 w-4" />
-            Open in CRM
-          </Button>
-        </div>
-
-        <Separator className="my-5" />
-
-        <dl className="grid grid-cols-1 gap-4 sm:grid-cols-2">
-          <div>
-            <dt className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
-              Account name
-            </dt>
-            <dd className="mt-1 text-sm">{crmAccountName}</dd>
-          </div>
-          <div>
-            <dt className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
-              CRM ID
-            </dt>
-            <dd className="mt-1 font-mono text-sm">#{crmAccountId}</dd>
-          </div>
-        </dl>
-
-        <p className="mt-5 text-xs text-muted-foreground/60">
-          Data is read from the CRM. Use{' '}
-          <span className="font-medium">Open in CRM</span> to manage the
-          commercial account directly.
-        </p>
-      </CardContent>
-    </Card>
-  );
-}
-
-// ── Overview Tab ──────────────────────────────────────────────────────────────
-
-function OverviewTab({ account }: { account: EnterpriseAccount }) {
-  const { currentLocaleCode, getSettingValue } = useApp();
-
-  const kpiItems: KpiCardItem[] = [
-    {
-      key: 'users',
-      title: 'Users',
-      value: account.usersCount,
-      description: 'Total linked users',
-      icon: Users,
-    },
-    {
-      key: 'students',
-      title: 'Students',
-      value: account.studentsCount,
-      description: 'Active learners',
-      icon: UserCheck,
-    },
-    {
-      key: 'classes',
-      title: 'Classes',
-      value: account.classesCount,
-      description: 'Contracted classes',
-      icon: CalendarDays,
-    },
-    {
-      key: 'courses',
-      title: 'Courses',
-      value: account.coursesCount,
-      description: 'Available courses',
-      icon: BookOpen,
-    },
-  ];
-
-  return (
-    <div className="space-y-4">
-      <KpiCardsGrid items={kpiItems} />
-      <div className="flex flex-wrap items-center gap-x-6 gap-y-1 border-t pt-3 text-xs text-muted-foreground">
-        <span>
-          Slug:{' '}
-          <span className="font-mono text-foreground/70">{account.slug}</span>
-        </span>
-        <span>
-          Created:{' '}
-          {formatDate(account.createdAt, getSettingValue, currentLocaleCode)}
-        </span>
-        <span>
-          Updated:{' '}
-          {formatDate(account.updatedAt, getSettingValue, currentLocaleCode)}
-        </span>
-        {account.portalEnabled && (
-          <span className="text-primary/70">Portal enabled</span>
-        )}
-      </div>
-    </div>
-  );
-}
-
-// ── Page ──────────────────────────────────────────────────────────────────────
-
-export default function EnterpriseDetailPage() {
-  const { id } = useParams<{ id: string }>();
-  const { request } = useApp();
-  const [isSheetOpen, setIsSheetOpen] = useState(false);
-
-  const {
-    data: account,
-    isLoading,
-    isError,
-    refetch,
-  } = useQuery<EnterpriseAccount>({
-    queryKey: ['lms-enterprise-detail', id],
-    queryFn: async () => {
-      const res = await request<EnterpriseAccount>({
-        url: `/lms/enterprise/${id}`,
-        method: 'GET',
-      });
-      return (res as any).data ?? res;
-    },
-  });
-
-  if (!isLoading && (isError || !account)) {
-    notFound();
-  }
-
-  return (
-    <Page>
-      <PageHeader
-        breadcrumbs={[
-          { label: 'Home', href: '/' },
-          { label: 'LMS', href: '/lms' },
-          { label: 'Enterprise', href: '/lms/enterprise' },
-          {
-            label: isLoading ? '…' : (account?.name ?? ''),
-          },
-        ]}
-        extraContent={
-          account ? (
-            <Badge variant={STATUS_VARIANT[account.status]}>
-              {STATUS_LABEL[account.status]}
-            </Badge>
-          ) : (
-            <Skeleton className="h-5 w-16 rounded-full" />
-          )
-        }
-        actions={[
-          {
-            label: 'Edit',
-            onClick: () => setIsSheetOpen(true),
-            icon: <Pencil className="h-4 w-4" />,
-            variant: 'outline',
-            disabled: isLoading || !account,
-          },
-        ]}
-      />
-
-      {isLoading || !account ? (
-        <div className="space-y-3 pt-4">
-          <Skeleton className="h-8 w-64" />
-          <Skeleton className="h-32 w-full" />
-        </div>
-      ) : (
-        <Tabs defaultValue="overview">
-          <TabsList>
-            <TabsTrigger value="overview">Overview</TabsTrigger>
-            <TabsTrigger value="crm">CRM</TabsTrigger>
-            <TabsTrigger value="classes">Classes</TabsTrigger>
-            <TabsTrigger value="courses">Courses</TabsTrigger>
-            <TabsTrigger value="students">Students</TabsTrigger>
-            <TabsTrigger value="administrators">Administrators</TabsTrigger>
-          </TabsList>
-
-          <TabsContent value="overview" className="mt-6">
-            <OverviewTab account={account} />
-          </TabsContent>
-
-          <TabsContent value="crm" className="mt-4">
-            <CrmTab
-              crmAccountId={account.crmAccountId}
-              crmAccountName={account.crmAccountName}
-              onLinkCrm={() => setIsSheetOpen(true)}
-            />
-          </TabsContent>
-
-          <TabsContent value="classes" className="mt-4">
-            <ClassesTab enterpriseId={account.id} />
-          </TabsContent>
-
-          <TabsContent value="courses" className="mt-4">
-            <CoursesTab enterpriseId={account.id} />
-          </TabsContent>
-
-          <TabsContent value="students" className="mt-4">
-            <StudentsTab enterpriseId={account.id} />
-          </TabsContent>
-
-          <TabsContent value="administrators" className="mt-4">
-            <AdministratorsTab enterpriseId={account.id} />
-          </TabsContent>
-        </Tabs>
-      )}
-
-      <EnterpriseSheet
-        open={isSheetOpen}
-        onOpenChange={setIsSheetOpen}
-        editingAccount={account ?? null}
-        onSave={() => void refetch()}
-      />
-    </Page>
-  );
-}
+'use client';
+
+import { Page, PageHeader } from '@/components/entity-list';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent } from '@/components/ui/card';
+import { KpiCardsGrid, type KpiCardItem } from '@/components/ui/kpi-cards-grid';
+import { Separator } from '@/components/ui/separator';
+import { Skeleton } from '@/components/ui/skeleton';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { formatDate } from '@/lib/format-date';
+import { useApp, useQuery } from '@hed-hog/next-app-provider';
+import {
+  BookOpen,
+  Building2,
+  CalendarDays,
+  ExternalLink,
+  Link2,
+  Pencil,
+  UserCheck,
+  Users,
+} from 'lucide-react';
+import { notFound, useParams, useRouter } from 'next/navigation';
+import { useState } from 'react';
+import { AdministratorsTab } from '../_components/enterprise-administrators-tab';
+import { ClassesTab } from '../_components/enterprise-classes-tab';
+import { CoursesTab } from '../_components/enterprise-courses-tab';
+import { EnterpriseSheet } from '../_components/enterprise-sheet';
+import { StudentsTab } from '../_components/enterprise-students-tab';
+import type {
+  EnterpriseAccount,
+  EnterpriseStatus,
+} from '../_components/enterprise-types';
+
+// ── Constants ─────────────────────────────────────────────────────────────────
+
+const STATUS_VARIANT: Record<
+  EnterpriseStatus,
+  'default' | 'secondary' | 'outline' | 'destructive'
+> = {
+  active: 'default',
+  trial: 'secondary',
+  inactive: 'outline',
+  suspended: 'destructive',
+};
+
+const STATUS_LABEL: Record<EnterpriseStatus, string> = {
+  active: 'Active',
+  trial: 'Trial',
+  inactive: 'Inactive',
+  suspended: 'Suspended',
+};
+
+// ── CRM Tab ───────────────────────────────────────────────────────────────────
+
+function CrmTab({
+  crmAccountId,
+  crmAccountName,
+  onLinkCrm,
+}: {
+  crmAccountId: number | null;
+  crmAccountName: string | null;
+  onLinkCrm?: () => void;
+}) {
+  const router = useRouter();
+  if (!crmAccountId || !crmAccountName) {
+    return (
+      <div className="flex flex-col items-center justify-center py-20 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">
+          No CRM account linked
+        </p>
+        <p className="mt-1 max-w-xs text-xs text-muted-foreground/60">
+          This enterprise account is not yet associated with a CRM commercial
+          account. Link one to keep both records in sync.
+        </p>
+        <Button
+          variant="outline"
+          size="sm"
+          className="mt-6"
+          onClick={onLinkCrm}
+        >
+          <Link2 className="mr-2 h-4 w-4" />
+          Link CRM account
+        </Button>
+      </div>
+    );
+  }
+
+  return (
+    <Card className="border-border/60">
+      <CardContent className="p-6">
+        <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">{crmAccountName}</p>
+              <p className="text-xs text-muted-foreground">
+                CRM Account #{crmAccountId}
+              </p>
+            </div>
+          </div>
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => router.push('/contact/accounts')}
+            className="shrink-0"
+          >
+            <ExternalLink className="mr-2 h-4 w-4" />
+            Open in CRM
+          </Button>
+        </div>
+
+        <Separator className="my-5" />
+
+        <dl className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+          <div>
+            <dt className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
+              Account name
+            </dt>
+            <dd className="mt-1 text-sm">{crmAccountName}</dd>
+          </div>
+          <div>
+            <dt className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
+              CRM ID
+            </dt>
+            <dd className="mt-1 font-mono text-sm">#{crmAccountId}</dd>
+          </div>
+        </dl>
+
+        <p className="mt-5 text-xs text-muted-foreground/60">
+          Data is read from the CRM. Use{' '}
+          <span className="font-medium">Open in CRM</span> to manage the
+          commercial account directly.
+        </p>
+      </CardContent>
+    </Card>
+  );
+}
+
+// ── Overview Tab ──────────────────────────────────────────────────────────────
+
+function OverviewTab({ account }: { account: EnterpriseAccount }) {
+  const { currentLocaleCode, getSettingValue } = useApp();
+
+  const kpiItems: KpiCardItem[] = [
+    {
+      key: 'users',
+      title: 'Users',
+      value: account.usersCount,
+      description: 'Total linked users',
+      icon: Users,
+    },
+    {
+      key: 'students',
+      title: 'Students',
+      value: account.studentsCount,
+      description: 'Active learners',
+      icon: UserCheck,
+    },
+    {
+      key: 'classes',
+      title: 'Classes',
+      value: account.classesCount,
+      description: 'Contracted classes',
+      icon: CalendarDays,
+    },
+    {
+      key: 'courses',
+      title: 'Courses',
+      value: account.coursesCount,
+      description: 'Available courses',
+      icon: BookOpen,
+    },
+  ];
+
+  return (
+    <div className="space-y-4">
+      <KpiCardsGrid items={kpiItems} />
+      <div className="flex flex-wrap items-center gap-x-6 gap-y-1 border-t pt-3 text-xs text-muted-foreground">
+        <span>
+          Slug:{' '}
+          <span className="font-mono text-foreground/70">{account.slug}</span>
+        </span>
+        <span>
+          Created:{' '}
+          {formatDate(account.createdAt, getSettingValue, currentLocaleCode)}
+        </span>
+        <span>
+          Updated:{' '}
+          {formatDate(account.updatedAt, getSettingValue, currentLocaleCode)}
+        </span>
+        {account.portalEnabled && (
+          <span className="text-primary/70">Portal enabled</span>
+        )}
+      </div>
+    </div>
+  );
+}
+
+// ── Page ──────────────────────────────────────────────────────────────────────
+
+export default function EnterpriseDetailPage() {
+  const { id } = useParams<{ id: string }>();
+  const { request } = useApp();
+  const [isSheetOpen, setIsSheetOpen] = useState(false);
+
+  const {
+    data: account,
+    isLoading,
+    isError,
+    refetch,
+  } = useQuery<EnterpriseAccount>({
+    queryKey: ['lms-enterprise-detail', id],
+    queryFn: async () => {
+      const res = await request<EnterpriseAccount>({
+        url: `/lms/enterprise/${id}`,
+        method: 'GET',
+      });
+      return (res as any).data ?? res;
+    },
+  });
+
+  if (!isLoading && (isError || !account)) {
+    notFound();
+  }
+
+  return (
+    <Page>
+      <PageHeader
+        breadcrumbs={[
+          { label: 'Home', href: '/' },
+          { label: 'LMS', href: '/lms' },
+          { label: 'Enterprise', href: '/lms/enterprise' },
+          {
+            label: isLoading ? '…' : (account?.name ?? ''),
+          },
+        ]}
+        extraContent={
+          account ? (
+            <Badge variant={STATUS_VARIANT[account.status]}>
+              {STATUS_LABEL[account.status]}
+            </Badge>
+          ) : (
+            <Skeleton className="h-5 w-16 rounded-full" />
+          )
+        }
+        actions={[
+          {
+            label: 'Edit',
+            onClick: () => setIsSheetOpen(true),
+            icon: <Pencil className="h-4 w-4" />,
+            variant: 'outline',
+            disabled: isLoading || !account,
+          },
+        ]}
+      />
+
+      {isLoading || !account ? (
+        <div className="space-y-3 pt-4">
+          <Skeleton className="h-8 w-64" />
+          <Skeleton className="h-32 w-full" />
+        </div>
+      ) : (
+        <Tabs defaultValue="overview">
+          <TabsList>
+            <TabsTrigger value="overview">Overview</TabsTrigger>
+            <TabsTrigger value="crm">CRM</TabsTrigger>
+            <TabsTrigger value="classes">Classes</TabsTrigger>
+            <TabsTrigger value="courses">Courses</TabsTrigger>
+            <TabsTrigger value="students">Students</TabsTrigger>
+            <TabsTrigger value="administrators">Administrators</TabsTrigger>
+          </TabsList>
+
+          <TabsContent value="overview" className="mt-6">
+            <OverviewTab account={account} />
+          </TabsContent>
+
+          <TabsContent value="crm" className="mt-4">
+            <CrmTab
+              crmAccountId={account.crmAccountId}
+              crmAccountName={account.crmAccountName}
+              onLinkCrm={() => setIsSheetOpen(true)}
+            />
+          </TabsContent>
+
+          <TabsContent value="classes" className="mt-4">
+            <ClassesTab enterpriseId={account.id} />
+          </TabsContent>
+
+          <TabsContent value="courses" className="mt-4">
+            <CoursesTab enterpriseId={account.id} />
+          </TabsContent>
+
+          <TabsContent value="students" className="mt-4">
+            <StudentsTab enterpriseId={account.id} />
+          </TabsContent>
+
+          <TabsContent value="administrators" className="mt-4">
+            <AdministratorsTab enterpriseId={account.id} />
+          </TabsContent>
+        </Tabs>
+      )}
+
+      <EnterpriseSheet
+        open={isSheetOpen}
+        onOpenChange={setIsSheetOpen}
+        editingAccount={account ?? null}
+        onSave={() => void refetch()}
+      />
+    </Page>
+  );
+}

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

@@ -41,6 +41,7 @@ export function EnterpriseClassCreateSheet({
       startDate: cls.startDate,
       endDate: cls.endDate ?? null,
       capacity: cls.capacity,
+      enrolledCount: 0,
       status: cls.status,
       deliveryMode: cls.deliveryMode,
     });