@hed-hog/lms 0.0.303 → 0.0.305

package/hedhog/frontend/app/enterprise/_components/enterprise-students-tab.tsx.ejs

@@ -0,0 +1,267 @@
+'use client';
+
+import { Avatar, AvatarFallback } from '@/components/ui/avatar';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import type { EntityPickerValue } from '@/components/ui/entity-picker';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import { formatDate } from '@/lib/format-date';
+import { useApp, useQuery } from '@hed-hog/next-app-provider';
+import { Trash2 } from 'lucide-react';
+import { useCallback, useState } from 'react';
+import { toast } from 'sonner';
+import {
+  USER_STATUS_LABEL,
+  USER_STATUS_VARIANT,
+} from './enterprise-detail-constants';
+import { getAvatarColor, getInitials } from './enterprise-detail-utils';
+import {
+  loadPersonOptions,
+  type PersonPickerOption,
+} from './enterprise-person-picker';
+import { RelatedTabLayout } from './enterprise-related-tab';
+import { EnterpriseStudentCreateSheet } from './enterprise-student-create-sheet';
+import type { EnterpriseStudent } from './enterprise-types';
+
+const STUDENTS_PAGE_SIZE_DEFAULT = 10;
+
+export function StudentsTab({
+  enterpriseId,
+  onMutate,
+}: {
+  enterpriseId: number;
+  onMutate?: () => void;
+}) {
+  const { request, getSettingValue, currentLocaleCode } = useApp();
+  const [search, setSearch] = useState('');
+  const [page, setPage] = useState(1);
+  const [pageSize, setPageSize] = useState(STUDENTS_PAGE_SIZE_DEFAULT);
+  const [pickerValue, setPickerValue] = useState<EntityPickerValue>(null);
+  const [selectedPerson, setSelectedPerson] =
+    useState<PersonPickerOption | null>(null);
+  const [removingPersonId, setRemovingPersonId] = useState<number | null>(null);
+  const [createSheetOpen, setCreateSheetOpen] = useState(false);
+
+  const loadPickerOptions = useCallback(
+    (args: { page: number; pageSize: number; search: string }) =>
+      loadPersonOptions(request, args),
+    [request]
+  );
+
+  const { data, refetch } = useQuery({
+    queryKey: ['enterprise-students', enterpriseId, page, pageSize, search],
+    queryFn: async () => {
+      const params = new URLSearchParams({
+        page: String(page),
+        pageSize: String(pageSize),
+        search,
+      });
+      const res = await request<{
+        data: EnterpriseStudent[];
+        total: number;
+        page: number;
+        pageSize: number;
+        lastPage: number;
+      }>({
+        url: `/lms/enterprise/${enterpriseId}/students?${params}`,
+        method: 'GET',
+      });
+      return res.data ?? res;
+    },
+  });
+
+  const students: EnterpriseStudent[] = data?.data ?? [];
+  const total: number = data?.total ?? 0;
+
+  async function handleAdd() {
+    if (!selectedPerson) return;
+    try {
+      await request({
+        url: `/lms/enterprise/${enterpriseId}/students`,
+        method: 'POST',
+        data: { person_id: selectedPerson.id },
+      });
+      setPickerValue(null);
+      setSelectedPerson(null);
+      refetch();
+      onMutate?.();
+    } catch {
+      toast.error('Failed to add student.');
+    }
+  }
+
+  async function handleRemove(personId: number) {
+    setRemovingPersonId(personId);
+    const promise = request({
+      url: `/lms/enterprise/${enterpriseId}/students/${personId}`,
+      method: 'DELETE',
+    }).then(() => {
+      refetch();
+      onMutate?.();
+    });
+    toast.promise(promise, {
+      loading: 'Removing student…',
+      success: 'Student removed.',
+      error: 'Failed to remove student.',
+    });
+    try {
+      await promise;
+    } catch {
+      // error handled by toast.promise
+    } finally {
+      setRemovingPersonId(null);
+    }
+  }
+
+  return (
+    <>
+      <RelatedTabLayout<PersonPickerOption>
+        search={search}
+        onSearchChange={(v) => {
+          setSearch(v);
+          setPage(1);
+        }}
+        searchPlaceholder="Search students…"
+        pickerPlaceholder="Select a person…"
+        pickerEntityLabel="Person"
+        pickerValue={pickerValue}
+        onPickerChange={(v, opt) => {
+          setPickerValue(v);
+          setSelectedPerson(opt as PersonPickerOption | null);
+        }}
+        loadPickerOptions={loadPickerOptions}
+        getPickerOptionValue={(p) => p.id}
+        getPickerOptionLabel={(p) => p.name}
+        getPickerOptionDescription={(p) => p.email ?? undefined}
+        renderPickerOption={({ option: p }) => (
+          <div className="flex items-center gap-2 min-w-0">
+            <Avatar
+              className={`size-7 shrink-0 rounded-full ${getAvatarColor(p.name).bg}`}
+            >
+              <AvatarFallback
+                className={`text-xs font-semibold ${getAvatarColor(p.name).bg} ${getAvatarColor(p.name).text}`}
+              >
+                {getInitials(p.name)}
+              </AvatarFallback>
+            </Avatar>
+            <div className="min-w-0">
+              <div className="truncate">
+                <span className="text-muted-foreground/60 text-xs mr-1">
+                  #{p.id}
+                </span>
+                {p.name}
+              </div>
+              {p.email && (
+                <div className="truncate text-xs text-muted-foreground">
+                  {p.email}
+                </div>
+              )}
+            </div>
+          </div>
+        )}
+        onCreateNew={() => setCreateSheetOpen(true)}
+        onAdd={handleAdd}
+        addDisabled={!selectedPerson}
+        currentPage={page}
+        pageSize={pageSize}
+        totalItems={total}
+        onPageChange={setPage}
+        onPageSizeChange={(s) => {
+          setPageSize(s);
+          setPage(1);
+        }}
+      >
+        {students.length === 0 ? (
+          <p className="py-8 text-center text-sm text-muted-foreground">
+            No students yet.
+          </p>
+        ) : (
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead>Name</TableHead>
+                <TableHead>Email</TableHead>
+                <TableHead>Status</TableHead>
+                <TableHead>Added</TableHead>
+                <TableHead />
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {students.map((s) => (
+                <TableRow key={s.id}>
+                  <TableCell>
+                    <div className="flex items-center gap-2">
+                      <Avatar
+                        className={`size-7 shrink-0 rounded-full ${getAvatarColor(s.name ?? '').bg}`}
+                      >
+                        <AvatarFallback
+                          className={`text-xs font-semibold ${getAvatarColor(s.name ?? '').bg} ${getAvatarColor(s.name ?? '').text}`}
+                        >
+                          {getInitials(s.name ?? '')}
+                        </AvatarFallback>
+                      </Avatar>
+                      <span className="font-medium">{s.name ?? '—'}</span>
+                    </div>
+                  </TableCell>
+                  <TableCell className="text-muted-foreground">
+                    {s.email ?? '—'}
+                  </TableCell>
+                  <TableCell>
+                    <Badge variant={USER_STATUS_VARIANT[s.status]}>
+                      {USER_STATUS_LABEL[s.status]}
+                    </Badge>
+                  </TableCell>
+                  <TableCell className="text-sm text-muted-foreground">
+                    {s.createdAt
+                      ? formatDate(
+                          s.createdAt,
+                          getSettingValue,
+                          currentLocaleCode
+                        )
+                      : '—'}
+                  </TableCell>
+                  <TableCell className="text-right">
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      className="h-7 w-7 text-destructive hover:text-destructive"
+                      disabled={removingPersonId === s.personId}
+                      onClick={() => handleRemove(s.personId)}
+                    >
+                      <Trash2 className="size-4" />
+                    </Button>
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        )}
+      </RelatedTabLayout>
+      <EnterpriseStudentCreateSheet
+        open={createSheetOpen}
+        onOpenChange={setCreateSheetOpen}
+        onCreated={async (personId) => {
+          try {
+            await request({
+              url: `/lms/enterprise/${enterpriseId}/students`,
+              method: 'POST',
+              data: { person_id: personId, status: 'active' },
+            });
+          } catch {
+            toast.error('Person created but failed to link to enterprise.');
+          }
+          setCreateSheetOpen(false);
+          refetch();
+          onMutate?.();
+        }}
+      />
+    </>
+  );
+}

package/hedhog/frontend/app/enterprise/_components/enterprise-system-user-picker.ts.ejs

@@ -0,0 +1,42 @@
+import { useApp } from '@hed-hog/next-app-provider';
+
+export type SystemUserPickerOption = {
+  id: number;
+  name: string;
+  email: string;
+};
+
+export type SystemUserListResponse = {
+  total: number;
+  page: number;
+  pageSize: number;
+  lastPage: number;
+  data: SystemUserPickerOption[];
+};
+
+export async function loadSystemUserOptions(
+  request: ReturnType<typeof useApp>['request'],
+  args: { page: number; pageSize: number; search: string }
+) {
+  const params = new URLSearchParams({
+    page: String(args.page),
+    pageSize: String(args.pageSize),
+    search: args.search,
+  });
+  const res = await request<any>({
+    url: `/user?${params}`,
+    method: 'GET',
+  });
+  const body: any = (res as any).data ?? res;
+  // /user returns { paginate: { data, page, lastPage, ... }, stats }
+  // while other endpoints return { data, page, lastPage, ... } at the root
+  const paginate: SystemUserListResponse = body.paginate ?? body;
+  const items = (paginate.data ?? []).map((u: any) => ({
+    ...u,
+    description: u.email ?? undefined,
+  }));
+  return {
+    items,
+    hasMore: paginate.page < paginate.lastPage,
+  };
+}

package/hedhog/frontend/app/enterprise/_components/enterprise-types.ts.ejs

@@ -0,0 +1,96 @@
+// ── Primitive union types ──────────────────────────────────────────────────────
+
+export type EnterpriseStatus = 'active' | 'inactive' | 'suspended' | 'trial';
+
+export type EnterpriseUserRole =
+  | 'hr_manager'
+  | 'enterprise_admin'
+  | 'viewer'
+  | 'student';
+
+export type EnterpriseUserStatus = 'active' | 'inactive' | 'pending';
+
+// ── View models ────────────────────────────────────────────────────────────────
+
+export interface EnterpriseCrmAccount {
+  id: number;
+  name: string;
+  tradeName: string | null;
+  industry: string | null;
+  website: string | null;
+  lifecycleStage: string | null;
+}
+
+export interface EnterpriseAccount {
+  id: number;
+  name: string;
+  slug: string;
+  status: EnterpriseStatus;
+  crmAccountId: number | null;
+  crmAccountName: string | null;
+  crmAccount?: EnterpriseCrmAccount | null;
+  portalEnabled: boolean;
+  usersCount: number;
+  studentsCount: number;
+  managersCount: number;
+  adminsCount: number;
+  coursesCount: number;
+  classesCount: number;
+  licenseLimit: number | null;
+  notes: string | null;
+  createdAt: string;
+  updatedAt: string;
+}
+
+export interface EnterpriseUser {
+  id: number;
+  userId: number;
+  name: string;
+  email: string;
+  role: EnterpriseUserRole;
+  status: EnterpriseUserStatus;
+  lastAccessAt: string | null;
+}
+
+export interface EnterpriseStudent {
+  id: number;
+  personId: number;
+  name: string | null;
+  email: string | null;
+  status: EnterpriseUserStatus;
+  createdAt: string | null;
+}
+
+export type EnterpriseCourseStatus = 'published' | 'draft' | 'archived';
+export type EnterpriseClassStatus =
+  | 'open'
+  | 'ongoing'
+  | 'completed'
+  | 'cancelled';
+
+export interface EnterpriseCourse {
+  id: number;
+  courseId?: number;
+  title: string;
+  slug: string | null;
+  status: EnterpriseCourseStatus;
+  level?: string | null;
+  modality?: string;
+  contractedAt?: string | null;
+  enrolledCount: number;
+  completionRate: number;
+}
+
+export interface EnterpriseClass {
+  id: number;
+  courseClassGroupId?: number;
+  code: string | null;
+  title?: string | null;
+  courseTitle: string | null;
+  startDate: string | null;
+  endDate: string | null;
+  capacity: number | null;
+  enrolledCount: number;
+  status: EnterpriseClassStatus;
+  deliveryMode?: string | null;
+}

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

@@ -0,0 +1,207 @@
+'use client';
+
+import { Button } from '@/components/ui/button';
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/form';
+import { Input } from '@/components/ui/input';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import {
+  Sheet,
+  SheetContent,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+} from '@/components/ui/sheet';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { Loader2 } from 'lucide-react';
+import { useEffect } from 'react';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+import type { EnterpriseUser, EnterpriseUserRole } from './enterprise-types';
+
+// ── Schema ─────────────────────────────────────────────────────────────────────
+
+const userCreateSchema = z.object({
+  name: z.string().trim().min(1, 'Name is required.'),
+  email: z
+    .string()
+    .trim()
+    .min(1, 'Email is required.')
+    .email('Enter a valid email address.'),
+  role: z.enum(['student', 'hr_manager', 'enterprise_admin', 'viewer']),
+});
+
+type UserCreateValues = z.infer<typeof userCreateSchema>;
+
+const DEFAULT_VALUES: UserCreateValues = {
+  name: '',
+  email: '',
+  role: 'student',
+};
+
+// ── Props ─────────────────────────────────────────────────────────────────────
+
+export interface EnterpriseUserCreateSheetProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onCreated?: (user: EnterpriseUser) => void;
+}
+
+// ── Component ─────────────────────────────────────────────────────────────────
+
+export function EnterpriseUserCreateSheet({
+  open,
+  onOpenChange,
+  onCreated,
+}: EnterpriseUserCreateSheetProps) {
+  const form = useForm<UserCreateValues>({
+    resolver: zodResolver(userCreateSchema),
+    defaultValues: DEFAULT_VALUES,
+  });
+
+  // Reset form whenever the sheet closes
+  useEffect(() => {
+    if (!open) {
+      form.reset(DEFAULT_VALUES);
+    }
+  }, [open, form]);
+
+  function handleOpenChange(nextOpen: boolean) {
+    if (!nextOpen) form.reset(DEFAULT_VALUES);
+    onOpenChange(nextOpen);
+  }
+
+  async function onSubmit(values: UserCreateValues) {
+    // Optimistic mock creation — replace with real API call when available
+    const newUser: EnterpriseUser = {
+      id: Date.now(),
+      userId: Date.now() + 1,
+      name: values.name,
+      email: values.email,
+      role: values.role as EnterpriseUserRole,
+      status: 'pending',
+      lastAccessAt: null,
+    };
+    onCreated?.(newUser);
+    handleOpenChange(false);
+  }
+
+  const saving = form.formState.isSubmitting;
+
+  return (
+    <Sheet open={open} onOpenChange={handleOpenChange}>
+      <SheetContent side="right" className="flex flex-col gap-0 sm:max-w-md">
+        <SheetHeader className="border-b px-6 py-4">
+          <SheetTitle>New user</SheetTitle>
+        </SheetHeader>
+
+        <Form {...form}>
+          <form
+            onSubmit={form.handleSubmit(onSubmit)}
+            className="flex flex-1 flex-col overflow-hidden"
+          >
+            <div className="flex-1 space-y-5 overflow-y-auto px-6 py-5">
+              {/* Name */}
+              <FormField
+                control={form.control}
+                name="name"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Full name</FormLabel>
+                    <FormControl>
+                      <Input placeholder="e.g. Ana Beatriz Souza" {...field} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              {/* Email */}
+              <FormField
+                control={form.control}
+                name="email"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Email</FormLabel>
+                    <FormControl>
+                      <Input
+                        type="email"
+                        placeholder="user@company.com"
+                        {...field}
+                      />
+                    </FormControl>
+                    <FormDescription>
+                      An invite will be sent to this address.
+                    </FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              {/* Role */}
+              <FormField
+                control={form.control}
+                name="role"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Role</FormLabel>
+                    <Select value={field.value} onValueChange={field.onChange}>
+                      <FormControl>
+                        <SelectTrigger className="w-full">
+                          <SelectValue placeholder="Select a role" />
+                        </SelectTrigger>
+                      </FormControl>
+                      <SelectContent>
+                        <SelectItem value="enterprise_admin">
+                          Admin — full account management
+                        </SelectItem>
+                        <SelectItem value="hr_manager">
+                          HR / Manager — manages learners and reports
+                        </SelectItem>
+                        <SelectItem value="student">
+                          Student — access to assigned courses
+                        </SelectItem>
+                        <SelectItem value="viewer">
+                          Viewer — read-only access
+                        </SelectItem>
+                      </SelectContent>
+                    </Select>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </div>
+
+            <SheetFooter className="border-t px-6 py-4">
+              <Button
+                type="button"
+                variant="outline"
+                onClick={() => handleOpenChange(false)}
+                disabled={saving}
+              >
+                Cancel
+              </Button>
+              <Button type="submit" disabled={saving}>
+                {saving && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+                Create user
+              </Button>
+            </SheetFooter>
+          </form>
+        </Form>
+      </SheetContent>
+    </Sheet>
+  );
+}