@hed-hog/lms 0.0.304 → 0.0.306

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

@@ -0,0 +1,596 @@
+'use client';
+
+import {
+  EmptyState,
+  Page,
+  PageHeader,
+  PaginationFooter,
+  SearchBar,
+  type SearchBarControl,
+} from '@/components/entity-list';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent } from '@/components/ui/card';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { KpiCardsGrid, type KpiCardItem } from '@/components/ui/kpi-cards-grid';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group';
+import { useDebounce } from '@/hooks/use-debounce';
+import { formatDate } from '@/lib/format-date';
+import { useApp, useQuery } from '@hed-hog/next-app-provider';
+import {
+  BookOpen,
+  Building2,
+  CalendarDays,
+  Globe,
+  LayoutGrid,
+  List,
+  MoreHorizontal,
+  Pencil,
+  Plus,
+  SquareArrowOutUpRight,
+  Users,
+} from 'lucide-react';
+import { useMemo, useState } from 'react';
+import { EnterpriseDetailSheet } from './_components/enterprise-detail-sheet';
+import { EnterpriseSheet } from './_components/enterprise-sheet';
+import type {
+  EnterpriseAccount,
+  EnterpriseStatus,
+} from './_components/enterprise-types';
+
+type EnterpriseViewMode = 'table' | 'cards';
+const VIEW_STORAGE_KEY = 'lms-enterprise-view-mode';
+
+// ── Constants ─────────────────────────────────────────────────────────────────
+
+const PAGE_SIZE = 12;
+
+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',
+};
+
+// ── Page ──────────────────────────────────────────────────────────────────────
+
+export default function EnterprisePage() {
+  const [search, setSearch] = useState('');
+  const [statusFilter, setStatusFilter] = useState('all');
+  const [crmFilter, setCrmFilter] = useState('all');
+  const [page, setPage] = useState(1);
+  const [isSheetOpen, setIsSheetOpen] = useState(false);
+  const [editingAccount, setEditingAccount] =
+    useState<EnterpriseAccount | null>(null);
+  const [detailAccount, setDetailAccount] = useState<EnterpriseAccount | null>(
+    null
+  );
+  const [viewMode, setViewMode] = useState<EnterpriseViewMode>(() => {
+    try {
+      const stored = window.localStorage.getItem(VIEW_STORAGE_KEY);
+      if (stored === 'table' || stored === 'cards') return stored;
+    } catch {
+      // SSR or storage unavailable
+    }
+    return 'table';
+  });
+
+  const debouncedSearch = useDebounce(search);
+  const { request, currentLocaleCode, getSettingValue } = useApp();
+
+  type EnterpriseListResponse = {
+    data: EnterpriseAccount[];
+    total: number;
+    page: number;
+    pageSize: number;
+    lastPage: number;
+  };
+  type EnterpriseStatsResponse = {
+    total: number;
+    active: number;
+    trial: number;
+    portalEnabled: number;
+  };
+
+  const {
+    data: enterpriseList,
+    isLoading,
+    refetch: refetchList,
+  } = useQuery<EnterpriseListResponse>({
+    queryKey: [
+      'lms-enterprise',
+      page,
+      PAGE_SIZE,
+      debouncedSearch,
+      statusFilter,
+      crmFilter,
+    ],
+    queryFn: async () => {
+      const params = new URLSearchParams();
+      params.set('page', String(page));
+      params.set('pageSize', String(PAGE_SIZE));
+      if (debouncedSearch) params.set('search', debouncedSearch);
+      if (statusFilter !== 'all') params.set('status', statusFilter);
+      if (crmFilter !== 'all') params.set('crmPersonId', crmFilter);
+      const res = await request<EnterpriseListResponse>({
+        url: `/lms/enterprise?${params.toString()}`,
+        method: 'GET',
+      });
+      return res.data;
+    },
+    placeholderData: (prev) => prev,
+  });
+
+  const { data: stats, refetch: refetchStats } =
+    useQuery<EnterpriseStatsResponse>({
+      queryKey: ['lms-enterprise-stats'],
+      queryFn: async () => {
+        const res = await request<EnterpriseStatsResponse>({
+          url: '/lms/enterprise/stats',
+          method: 'GET',
+        });
+        return res.data;
+      },
+    });
+
+  const { data: crmOptionsData = [] } = useQuery<
+    { id: number; name: string }[]
+  >({
+    queryKey: ['lms-enterprise-crm-options'],
+    queryFn: async () => {
+      const res = await request<{ id: number; name: string }[]>({
+        url: '/lms/enterprise/crm-options',
+        method: 'GET',
+      });
+      return res.data;
+    },
+  });
+
+  function handleOpenCreate() {
+    setEditingAccount(null);
+    setIsSheetOpen(true);
+  }
+
+  function handleOpenEdit(account: EnterpriseAccount) {
+    setEditingAccount(account);
+    setIsSheetOpen(true);
+  }
+
+  function handleViewModeChange(value: string) {
+    if (value !== 'table' && value !== 'cards') return;
+    setViewMode(value);
+    try {
+      window.localStorage.setItem(VIEW_STORAGE_KEY, value);
+    } catch {
+      // ignore
+    }
+  }
+
+  const crmOptions = useMemo(
+    () => crmOptionsData.map((o) => ({ value: String(o.id), label: o.name })),
+    [crmOptionsData]
+  );
+
+  // KPI aggregates from API stats
+  const kpiItems: KpiCardItem[] = useMemo(() => {
+    const total = stats?.total ?? 0;
+    const active = stats?.active ?? 0;
+    const trial = stats?.trial ?? 0;
+    const withPortal = stats?.portalEnabled ?? 0;
+
+    return [
+      {
+        key: 'total',
+        title: 'Total Accounts',
+        value: total,
+        description: 'All enterprise accounts',
+        icon: Building2,
+        accentClassName: 'from-slate-500/20 via-slate-400/10 to-transparent',
+        iconContainerClassName: 'bg-slate-100 text-slate-700',
+      },
+      {
+        key: 'active',
+        title: 'Active',
+        value: active,
+        description: 'Currently active accounts',
+        icon: Users,
+        accentClassName: 'from-green-500/20 via-emerald-500/10 to-transparent',
+        iconContainerClassName: 'bg-green-50 text-green-600',
+      },
+      {
+        key: 'trial',
+        title: 'Trial',
+        value: trial,
+        description: 'In trial period',
+        icon: CalendarDays,
+        accentClassName: 'from-amber-500/20 via-orange-500/10 to-transparent',
+        iconContainerClassName: 'bg-amber-50 text-amber-600',
+      },
+      {
+        key: 'portal',
+        title: 'Portal Enabled',
+        value: withPortal,
+        description: 'Self-service portal access',
+        icon: Globe,
+        accentClassName: 'from-blue-500/20 via-cyan-500/10 to-transparent',
+        iconContainerClassName: 'bg-blue-50 text-blue-600',
+      },
+    ];
+  }, [stats]);
+
+  const accounts = enterpriseList?.data ?? [];
+  const totalItems = enterpriseList?.total ?? 0;
+
+  function handleSearch(v: string) {
+    setSearch(v);
+    setPage(1);
+  }
+
+  function handleStatusFilter(v: string) {
+    setStatusFilter(v);
+    setPage(1);
+  }
+
+  function handleCrmFilter(v: string) {
+    setCrmFilter(v);
+    setPage(1);
+  }
+
+  function handleViewDetails(account: EnterpriseAccount) {
+    setDetailAccount(account);
+  }
+
+  const controls: SearchBarControl[] = [
+    {
+      id: 'status',
+      type: 'select',
+      value: statusFilter,
+      onChange: handleStatusFilter,
+      options: [
+        { value: 'all', label: 'All statuses' },
+        { value: 'active', label: 'Active' },
+        { value: 'trial', label: 'Trial' },
+        { value: 'inactive', label: 'Inactive' },
+        { value: 'suspended', label: 'Suspended' },
+      ],
+    },
+    {
+      id: 'crm',
+      type: 'select',
+      value: crmFilter,
+      onChange: handleCrmFilter,
+      options: [{ value: 'all', label: 'All CRM accounts' }, ...crmOptions],
+      // options populated from API
+    },
+  ];
+
+  return (
+    <Page>
+      <PageHeader
+        breadcrumbs={[
+          { label: 'Home', href: '/' },
+          { label: 'LMS', href: '/lms' },
+          { label: 'Enterprise' },
+        ]}
+        actions={[
+          {
+            label: 'New Account',
+            onClick: handleOpenCreate,
+            icon: <Plus className="h-4 w-4" />,
+            variant: 'default',
+          },
+        ]}
+      />
+
+      <KpiCardsGrid items={kpiItems} />
+
+      <div className="flex flex-col gap-4 xl:flex-row xl:items-center">
+        <div className="flex-1">
+          <SearchBar
+            searchQuery={search}
+            onSearchChange={handleSearch}
+            onSearch={() => {}}
+            placeholder="Search by name or CRM account..."
+            controls={controls}
+          />
+        </div>
+        <div className="flex items-center gap-3">
+          <span className="text-xs font-medium text-muted-foreground">
+            View
+          </span>
+          <ToggleGroup
+            type="single"
+            value={viewMode}
+            onValueChange={handleViewModeChange}
+            variant="outline"
+            size="sm"
+            aria-label="View mode"
+          >
+            <ToggleGroupItem value="table" className="gap-1.5 px-2.5">
+              <List className="h-4 w-4" />
+              <span className="hidden sm:inline">Table</span>
+            </ToggleGroupItem>
+            <ToggleGroupItem value="cards" className="gap-1.5 px-2.5">
+              <LayoutGrid className="h-4 w-4" />
+              <span className="hidden sm:inline">Cards</span>
+            </ToggleGroupItem>
+          </ToggleGroup>
+        </div>
+      </div>
+
+      {accounts.length === 0 && !isLoading ? (
+        <EmptyState
+          icon={<Building2 className="h-10 w-10" />}
+          title="No enterprise accounts found"
+          description="Adjust your filters or create a new enterprise account."
+          actionLabel="New Account"
+          onAction={handleOpenCreate}
+          actionIcon={<Plus className="h-4 w-4" />}
+        />
+      ) : viewMode === 'table' ? (
+        <div className="rounded-lg border border-border/60">
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead>Name</TableHead>
+                <TableHead>Status</TableHead>
+                <TableHead>CRM Account</TableHead>
+                <TableHead className="text-center">Classes</TableHead>
+                <TableHead className="text-center">Courses</TableHead>
+                <TableHead className="text-center">Users</TableHead>
+                <TableHead>Updated</TableHead>
+                <TableHead className="w-10" />
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {accounts.map((account) => (
+                <TableRow
+                  key={account.id}
+                  className="cursor-pointer"
+                  onClick={() => handleViewDetails(account)}
+                >
+                  <TableCell>
+                    <p className="font-medium">{account.name}</p>
+                    <p className="mt-0.5 flex items-center gap-1.5 text-xs text-muted-foreground">
+                      <span className="font-mono">{account.slug}</span>
+                      {account.portalEnabled && (
+                        <>
+                          <span className="opacity-30">·</span>
+                          <Globe className="h-3 w-3 text-primary/60" />
+                          <span className="text-primary/70">Portal</span>
+                        </>
+                      )}
+                    </p>
+                  </TableCell>
+                  <TableCell>
+                    <Badge variant={STATUS_VARIANT[account.status]}>
+                      {STATUS_LABEL[account.status]}
+                    </Badge>
+                  </TableCell>
+                  <TableCell className="text-sm text-muted-foreground">
+                    {account.crmAccountName ?? '—'}
+                  </TableCell>
+                  <TableCell className="text-center text-sm tabular-nums">
+                    {account.classesCount}
+                  </TableCell>
+                  <TableCell className="text-center text-sm tabular-nums">
+                    {account.coursesCount}
+                  </TableCell>
+                  <TableCell className="text-center text-sm tabular-nums">
+                    {account.usersCount}
+                  </TableCell>
+                  <TableCell className="text-sm text-muted-foreground">
+                    {formatDate(
+                      account.updatedAt,
+                      getSettingValue,
+                      currentLocaleCode
+                    )}
+                  </TableCell>
+                  <TableCell onClick={(e) => e.stopPropagation()}>
+                    <DropdownMenu>
+                      <DropdownMenuTrigger asChild>
+                        <Button variant="ghost" size="icon" className="h-8 w-8">
+                          <MoreHorizontal className="h-4 w-4" />
+                        </Button>
+                      </DropdownMenuTrigger>
+                      <DropdownMenuContent align="end">
+                        <DropdownMenuItem
+                          onClick={() => handleViewDetails(account)}
+                        >
+                          <SquareArrowOutUpRight className="mr-2 h-4 w-4" />
+                          View details
+                        </DropdownMenuItem>
+                        <DropdownMenuSeparator />
+                        <DropdownMenuItem
+                          onClick={() => handleOpenEdit(account)}
+                        >
+                          <Pencil className="mr-2 h-4 w-4" />
+                          Edit
+                        </DropdownMenuItem>
+                      </DropdownMenuContent>
+                    </DropdownMenu>
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </div>
+      ) : (
+        <div className="grid gap-3 md:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4">
+          {accounts.map((account) => (
+            <Card
+              key={account.id}
+              className="group cursor-pointer overflow-hidden border-border/70 py-0 transition-colors hover:border-border hover:shadow-md"
+              onClick={() => handleViewDetails(account)}
+            >
+              <CardContent className="flex flex-col gap-3 p-4">
+                {/* Header */}
+                <div className="flex items-start justify-between gap-2">
+                  <div className="min-w-0 flex-1">
+                    <div className="mb-1 flex flex-wrap items-center gap-1.5">
+                      <Badge variant={STATUS_VARIANT[account.status]}>
+                        {STATUS_LABEL[account.status]}
+                      </Badge>
+                      {account.portalEnabled && (
+                        <Badge
+                          variant="outline"
+                          className="border-blue-500/20 bg-blue-500/10 px-1.5 text-blue-600"
+                        >
+                          <Globe className="mr-1 h-3 w-3" />
+                          Portal
+                        </Badge>
+                      )}
+                    </div>
+                    <h3 className="line-clamp-1 text-sm font-semibold text-foreground">
+                      {account.name}
+                    </h3>
+                    <p className="mt-0.5 font-mono text-xs text-muted-foreground">
+                      {account.slug}
+                    </p>
+                  </div>
+                  <div
+                    className="shrink-0"
+                    onClick={(e) => e.stopPropagation()}
+                  >
+                    <DropdownMenu>
+                      <DropdownMenuTrigger asChild>
+                        <Button
+                          variant="ghost"
+                          size="icon"
+                          className="h-7 w-7 opacity-0 transition-opacity group-hover:opacity-100"
+                        >
+                          <MoreHorizontal className="h-4 w-4" />
+                        </Button>
+                      </DropdownMenuTrigger>
+                      <DropdownMenuContent align="end">
+                        <DropdownMenuItem
+                          onClick={() => handleViewDetails(account)}
+                        >
+                          <SquareArrowOutUpRight className="mr-2 h-4 w-4" />
+                          View details
+                        </DropdownMenuItem>
+                        <DropdownMenuSeparator />
+                        <DropdownMenuItem
+                          onClick={() => handleOpenEdit(account)}
+                        >
+                          <Pencil className="mr-2 h-4 w-4" />
+                          Edit
+                        </DropdownMenuItem>
+                      </DropdownMenuContent>
+                    </DropdownMenu>
+                  </div>
+                </div>
+
+                {/* CRM */}
+                {account.crmAccountName && (
+                  <p className="truncate text-xs text-muted-foreground">
+                    <span className="font-medium">CRM:</span>{' '}
+                    {account.crmAccountName}
+                  </p>
+                )}
+
+                {/* Stats grid */}
+                <div className="grid grid-cols-3 divide-x rounded-lg border border-border/60 text-center">
+                  <div className="flex flex-col py-2">
+                    <CalendarDays className="mx-auto mb-0.5 h-3.5 w-3.5 text-muted-foreground/60" />
+                    <span className="tabular-nums text-sm font-semibold">
+                      {account.classesCount}
+                    </span>
+                    <span className="text-[10px] text-muted-foreground">
+                      Classes
+                    </span>
+                  </div>
+                  <div className="flex flex-col py-2">
+                    <BookOpen className="mx-auto mb-0.5 h-3.5 w-3.5 text-muted-foreground/60" />
+                    <span className="tabular-nums text-sm font-semibold">
+                      {account.coursesCount}
+                    </span>
+                    <span className="text-[10px] text-muted-foreground">
+                      Courses
+                    </span>
+                  </div>
+                  <div className="flex flex-col py-2">
+                    <Users className="mx-auto mb-0.5 h-3.5 w-3.5 text-muted-foreground/60" />
+                    <span className="tabular-nums text-sm font-semibold">
+                      {account.usersCount}
+                    </span>
+                    <span className="text-[10px] text-muted-foreground">
+                      Users
+                    </span>
+                  </div>
+                </div>
+
+                {/* Footer */}
+                <p className="text-right text-[10px] text-muted-foreground/60">
+                  Updated{' '}
+                  {formatDate(
+                    account.updatedAt,
+                    getSettingValue,
+                    currentLocaleCode
+                  )}
+                </p>
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+      )}
+
+      <PaginationFooter
+        currentPage={page}
+        pageSize={PAGE_SIZE}
+        totalItems={totalItems}
+        onPageChange={setPage}
+        onPageSizeChange={function (pageSize: number): void {
+          throw new Error('Function not implemented.');
+        }}
+      />
+
+      <EnterpriseSheet
+        open={isSheetOpen}
+        onOpenChange={setIsSheetOpen}
+        editingAccount={editingAccount}
+        onSave={() => {
+          void refetchList();
+          void refetchStats();
+        }}
+      />
+
+      <EnterpriseDetailSheet
+        open={detailAccount !== null}
+        onOpenChange={(v) => {
+          if (!v) setDetailAccount(null);
+        }}
+        account={detailAccount}
+        onAccountUpdate={(updated) => setDetailAccount(updated)}
+        onDataChange={() => {
+          void refetchList();
+          void refetchStats();
+        }}
+      />
+    </Page>
+  );
+}