@hed-hog/lms 0.0.304 → 0.0.306

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

@@ -0,0 +1,318 @@
+'use client';
+
+import { CopyButton } from '@/components/copy-button';
+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 { useApp } from '@hed-hog/next-app-provider';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { Eye, EyeOff, Loader2, RefreshCw } from 'lucide-react';
+import { useEffect, useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { toast } from 'sonner';
+import { z } from 'zod';
+import type { EnterpriseUser, EnterpriseUserRole } from './enterprise-types';
+
+// ── Password generator ───────────────────────────────────────────────────────
+
+function generateSecurePassword(length = 16): string {
+  const chars =
+    'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*';
+  const array = new Uint8Array(length);
+  crypto.getRandomValues(array);
+  return Array.from(array, (byte) => chars[byte % chars.length]).join('');
+}
+
+// ── Schema ────────────────────────────────────────────────────────────────────
+
+const adminCreateSchema = 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.'),
+  // password intentionally NOT in draft storage (rule: no passwords in drafts)
+  password: z
+    .string()
+    .min(8, 'Password must be at least 8 characters.')
+    .max(128, 'Password is too long.'),
+  role: z.enum(['enterprise_admin', 'hr_manager', 'viewer']),
+});
+
+type AdminCreateValues = z.infer<typeof adminCreateSchema>;
+
+const DEFAULT_VALUES: AdminCreateValues = {
+  name: '',
+  email: '',
+  password: '',
+  role: 'hr_manager',
+};
+
+function freshValues(): AdminCreateValues {
+  return { ...DEFAULT_VALUES, password: generateSecurePassword() };
+}
+
+type ApiUser = {
+  user: { id: number; name: string; email: string };
+  challenge: unknown;
+};
+
+// ── Props ─────────────────────────────────────────────────────────────────────
+
+export interface EnterpriseAdminCreateSheetProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onCreated?: (user: EnterpriseUser) => void;
+}
+
+// ── Component ─────────────────────────────────────────────────────────────────
+
+export function EnterpriseAdminCreateSheet({
+  open,
+  onOpenChange,
+  onCreated,
+}: EnterpriseAdminCreateSheetProps) {
+  const { request } = useApp();
+  const [saving, setSaving] = useState(false);
+  const [showPassword, setShowPassword] = useState(false);
+
+  const form = useForm<AdminCreateValues>({
+    resolver: zodResolver(adminCreateSchema),
+    defaultValues: freshValues(),
+  });
+
+  useEffect(() => {
+    if (open) {
+      form.reset(freshValues());
+    } else {
+      form.reset(DEFAULT_VALUES);
+      setShowPassword(true);
+    }
+  }, [open, form]);
+
+  function handleOpenChange(nextOpen: boolean) {
+    if (!nextOpen) {
+      form.reset(DEFAULT_VALUES);
+      setShowPassword(true);
+    }
+    onOpenChange(nextOpen);
+  }
+
+  function regeneratePassword() {
+    form.setValue('password', generateSecurePassword(), {
+      shouldDirty: true,
+      shouldValidate: true,
+    });
+  }
+
+  async function onSubmit(values: AdminCreateValues) {
+    setSaving(true);
+    try {
+      const res = await request<ApiUser>({
+        url: '/user',
+        method: 'POST',
+        data: {
+          name: values.name.trim(),
+          email: values.email.trim(),
+          password: values.password,
+        },
+      });
+
+      const newUser: EnterpriseUser = {
+        id: 0, // populated after enterprise link
+        userId: res.data.user.id,
+        name: res.data.user.name,
+        email: res.data.user.email,
+        role: values.role as EnterpriseUserRole,
+        status: 'pending',
+        lastAccessAt: null,
+      };
+
+      onCreated?.(newUser);
+      handleOpenChange(false);
+    } catch {
+      toast.error('Failed to create administrator account.');
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  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 administrator</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">
+              <FormField
+                control={form.control}
+                name="name"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Full name</FormLabel>
+                    <FormControl>
+                      <Input placeholder="e.g. Carlos Mendes" {...field} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name="email"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Email</FormLabel>
+                    <FormControl>
+                      <Input
+                        type="email"
+                        placeholder="admin@company.com"
+                        {...field}
+                      />
+                    </FormControl>
+                    <FormDescription>
+                      Used to sign in to the platform.
+                    </FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name="password"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Initial password</FormLabel>
+                    <div className="flex gap-2">
+                      <FormControl>
+                        <div className="relative flex-1">
+                          <Input
+                            type={showPassword ? 'text' : 'password'}
+                            placeholder="Min. 8 characters"
+                            autoComplete="new-password"
+                            className="pr-8 font-mono"
+                            {...field}
+                          />
+                          <div className="absolute inset-y-0 right-1 flex items-center">
+                            <CopyButton value={field.value} />
+                          </div>
+                        </div>
+                      </FormControl>
+                      <Button
+                        type="button"
+                        variant="outline"
+                        size="icon"
+                        onClick={() => setShowPassword((v) => !v)}
+                        aria-label={
+                          showPassword ? 'Hide password' : 'Show password'
+                        }
+                        className="shrink-0"
+                      >
+                        {showPassword ? (
+                          <EyeOff className="h-4 w-4" />
+                        ) : (
+                          <Eye className="h-4 w-4" />
+                        )}
+                      </Button>
+                      <Button
+                        type="button"
+                        variant="outline"
+                        size="icon"
+                        onClick={regeneratePassword}
+                        aria-label="Generate new password"
+                        title="Generate new password"
+                        className="shrink-0"
+                      >
+                        <RefreshCw className="h-4 w-4" />
+                      </Button>
+                    </div>
+                    <FormDescription>
+                      A secure password was pre-generated. The administrator
+                      should change it on first login.
+                    </FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <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="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 administrator
+              </Button>
+            </SheetFooter>
+          </form>
+        </Form>
+      </SheetContent>
+    </Sheet>
+  );
+}

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

@@ -0,0 +1,332 @@
+'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 {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import { useApp, useQuery } from '@hed-hog/next-app-provider';
+import { Trash2 } from 'lucide-react';
+import { useCallback, useState } from 'react';
+import { toast } from 'sonner';
+import { EnterpriseAdminCreateSheet } from './enterprise-admin-create-sheet';
+import {
+  USER_ROLE_LABEL,
+  USER_STATUS_LABEL,
+  USER_STATUS_VARIANT,
+} from './enterprise-detail-constants';
+import { getAvatarColor, getInitials } from './enterprise-detail-utils';
+import { RelatedTabLayout } from './enterprise-related-tab';
+import {
+  loadSystemUserOptions,
+  type SystemUserPickerOption,
+} from './enterprise-system-user-picker';
+import type { EnterpriseUser, EnterpriseUserRole } from './enterprise-types';
+
+const ADMIN_ROLES: EnterpriseUserRole[] = [
+  'enterprise_admin',
+  'hr_manager',
+  'viewer',
+];
+
+const ADMINS_PAGE_SIZE_DEFAULT = 10;
+
+export function AdministratorsTab({
+  enterpriseId,
+  onMutate,
+}: {
+  enterpriseId: number;
+  onMutate?: () => void;
+}) {
+  const { request } = useApp();
+  const [search, setSearch] = useState('');
+  const [page, setPage] = useState(1);
+  const [pageSize, setPageSize] = useState(ADMINS_PAGE_SIZE_DEFAULT);
+  const [pickerValue, setPickerValue] = useState<EntityPickerValue>(null);
+  const [selectedUser, setSelectedUser] =
+    useState<SystemUserPickerOption | null>(null);
+  const [roleForLink, setRoleForLink] =
+    useState<EnterpriseUserRole>('enterprise_admin');
+  const [createSheetOpen, setCreateSheetOpen] = useState(false);
+  const [savingRoleUserId, setSavingRoleUserId] = useState<number | null>(null);
+  const [removingUserId, setRemovingUserId] = useState<number | null>(null);
+
+  const loadPickerOptions = useCallback(
+    (args: { page: number; pageSize: number; search: string }) =>
+      loadSystemUserOptions(request, args),
+    [request]
+  );
+
+  const { data, refetch } = useQuery({
+    queryKey: ['enterprise-admins', enterpriseId, page, pageSize, search],
+    queryFn: async () => {
+      const params = new URLSearchParams({
+        page: String(page),
+        pageSize: String(pageSize),
+        search,
+      });
+      const res = await request<{
+        data: EnterpriseUser[];
+        total: number;
+        page: number;
+        pageSize: number;
+        lastPage: number;
+      }>({
+        url: `/lms/enterprise/${enterpriseId}/users?${params}`,
+        method: 'GET',
+      });
+      return res.data ?? res;
+    },
+  });
+
+  const users: EnterpriseUser[] = data?.data ?? [];
+  const total: number = data?.total ?? 0;
+
+  async function handleRoleChange(userId: number, role: EnterpriseUserRole) {
+    setSavingRoleUserId(userId);
+    const promise = request({
+      url: `/lms/enterprise/${enterpriseId}/users/${userId}`,
+      method: 'PATCH',
+      data: { role },
+    }).then(() => refetch());
+    toast.promise(promise, {
+      loading: 'Saving role…',
+      success: 'Role updated.',
+      error: 'Failed to update role.',
+    });
+    try {
+      await promise;
+    } catch {
+      // error handled by toast.promise
+    } finally {
+      setSavingRoleUserId(null);
+    }
+  }
+
+  async function handleRemove(userId: number) {
+    setRemovingUserId(userId);
+    const promise = request({
+      url: `/lms/enterprise/${enterpriseId}/users/${userId}`,
+      method: 'DELETE',
+    }).then(() => {
+      refetch();
+      onMutate?.();
+    });
+    toast.promise(promise, {
+      loading: 'Removing administrator…',
+      success: 'Administrator removed.',
+      error: 'Failed to remove administrator.',
+    });
+    try {
+      await promise;
+    } catch {
+      // error handled by toast.promise
+    } finally {
+      setRemovingUserId(null);
+    }
+  }
+
+  async function handleAdd() {
+    if (!selectedUser) return;
+    try {
+      await request({
+        url: `/lms/enterprise/${enterpriseId}/users`,
+        method: 'POST',
+        data: { user_id: selectedUser.id, role: roleForLink },
+      });
+      setPickerValue(null);
+      setSelectedUser(null);
+      refetch();
+      onMutate?.();
+    } catch {
+      toast.error('Failed to add administrator.');
+    }
+  }
+
+  return (
+    <>
+      <RelatedTabLayout<SystemUserPickerOption>
+        search={search}
+        onSearchChange={(v) => {
+          setSearch(v);
+          setPage(1);
+        }}
+        searchPlaceholder="Search administrators…"
+        pickerPlaceholder="Select a user…"
+        pickerEntityLabel="User"
+        pickerValue={pickerValue}
+        onPickerChange={(v, opt) => {
+          setPickerValue(v);
+          setSelectedUser(opt as SystemUserPickerOption | null);
+        }}
+        loadPickerOptions={loadPickerOptions}
+        getPickerOptionValue={(u) => u.id}
+        getPickerOptionLabel={(u) => `${u.id} ${u.name}`}
+        getPickerOptionDescription={(u) => u.email}
+        renderPickerOption={({ option: u }) => (
+          <div className="flex items-center gap-2 min-w-0">
+            <Avatar
+              className={`size-7 shrink-0 rounded-full ${getAvatarColor(u.name).bg}`}
+            >
+              <AvatarFallback
+                className={`text-xs font-semibold ${getAvatarColor(u.name).bg} ${getAvatarColor(u.name).text}`}
+              >
+                {getInitials(u.name)}
+              </AvatarFallback>
+            </Avatar>
+            <div className="min-w-0">
+              <div className="truncate">
+                <span className="text-muted-foreground/60 text-xs mr-1">
+                  #{u.id}
+                </span>
+                {u.name}
+              </div>
+              {u.email && (
+                <div className="truncate text-xs text-muted-foreground">
+                  {u.email}
+                </div>
+              )}
+            </div>
+          </div>
+        )}
+        pickerSuffix={
+          <Select
+            value={roleForLink}
+            onValueChange={(v) => setRoleForLink(v as EnterpriseUserRole)}
+          >
+            <SelectTrigger className="w-36">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              {ADMIN_ROLES.map((r) => (
+                <SelectItem key={r} value={r}>
+                  {USER_ROLE_LABEL[r]}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        }
+        onCreateNew={() => setCreateSheetOpen(true)}
+        onAdd={handleAdd}
+        addDisabled={!selectedUser}
+        currentPage={page}
+        pageSize={pageSize}
+        totalItems={total}
+        onPageChange={setPage}
+        onPageSizeChange={(s) => {
+          setPageSize(s);
+          setPage(1);
+        }}
+      >
+        {users.length === 0 ? (
+          <p className="py-8 text-center text-sm text-muted-foreground">
+            No administrators yet.
+          </p>
+        ) : (
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead>Name</TableHead>
+                <TableHead>Email</TableHead>
+                <TableHead>Role</TableHead>
+                <TableHead>Status</TableHead>
+                <TableHead />
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {users.map((u) => (
+                <TableRow key={u.id}>
+                  <TableCell>
+                    <div className="flex items-center gap-2">
+                      <Avatar
+                        className={`size-7 shrink-0 rounded-full ${getAvatarColor(u.name).bg}`}
+                      >
+                        <AvatarFallback
+                          className={`text-xs font-semibold ${getAvatarColor(u.name).bg} ${getAvatarColor(u.name).text}`}
+                        >
+                          {getInitials(u.name)}
+                        </AvatarFallback>
+                      </Avatar>
+                      <span className="font-medium">{u.name}</span>
+                    </div>
+                  </TableCell>
+                  <TableCell className="text-muted-foreground">
+                    {u.email}
+                  </TableCell>
+                  <TableCell>
+                    <Select
+                      value={u.role}
+                      disabled={savingRoleUserId === u.userId}
+                      onValueChange={(v) =>
+                        handleRoleChange(u.userId, v as EnterpriseUserRole)
+                      }
+                    >
+                      <SelectTrigger className="h-7 w-36 text-xs">
+                        <SelectValue />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {ADMIN_ROLES.map((r) => (
+                          <SelectItem key={r} value={r} className="text-xs">
+                            {USER_ROLE_LABEL[r]}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </TableCell>
+                  <TableCell>
+                    <Badge variant={USER_STATUS_VARIANT[u.status]}>
+                      {USER_STATUS_LABEL[u.status]}
+                    </Badge>
+                  </TableCell>
+                  <TableCell className="text-right">
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      className="h-7 w-7 text-destructive hover:text-destructive"
+                      disabled={removingUserId === u.userId}
+                      onClick={() => handleRemove(u.userId)}
+                    >
+                      <Trash2 className="size-4" />
+                    </Button>
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        )}
+      </RelatedTabLayout>
+      <EnterpriseAdminCreateSheet
+        open={createSheetOpen}
+        onOpenChange={setCreateSheetOpen}
+        onCreated={async (user) => {
+          try {
+            await request({
+              url: `/lms/enterprise/${enterpriseId}/users`,
+              method: 'POST',
+              data: { user_id: user.userId, role: user.role },
+            });
+          } catch {
+            toast.error('Failed to link user to enterprise.');
+          }
+          setCreateSheetOpen(false);
+          refetch();
+          onMutate?.();
+        }}
+      />
+    </>
+  );
+}

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

@@ -0,0 +1,58 @@
+'use client';
+
+import { useApp } from '@hed-hog/next-app-provider';
+import {
+  ClassFormSheet,
+  type ApiClass,
+} from '../../_components/class-form-sheet';
+import type { EnterpriseClass } from './enterprise-types';
+
+// ── Props ─────────────────────────────────────────────────────────────────────
+
+export interface EnterpriseClassCreateSheetProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  enterpriseId: number;
+  onCreated?: (cls: EnterpriseClass) => void;
+}
+
+// ── Component ─────────────────────────────────────────────────────────────────
+
+export function EnterpriseClassCreateSheet({
+  open,
+  onOpenChange,
+  enterpriseId,
+  onCreated,
+}: EnterpriseClassCreateSheetProps) {
+  const { request } = useApp();
+
+  async function handleAfterCreate(cls: ApiClass) {
+    await request({
+      url: `/lms/enterprise/${enterpriseId}/classes`,
+      method: 'POST',
+      data: { course_class_group_id: cls.id },
+    });
+    onCreated?.({
+      id: cls.id,
+      courseClassGroupId: cls.id,
+      code: cls.code,
+      title: cls.title,
+      courseTitle: cls.courseTitle,
+      startDate: cls.startDate,
+      endDate: cls.endDate ?? null,
+      capacity: cls.capacity,
+      enrolledCount: 0,
+      status: cls.status,
+      deliveryMode: cls.deliveryMode,
+    });
+  }
+
+  return (
+    <ClassFormSheet
+      open={open}
+      onOpenChange={onOpenChange}
+      sheetTitle="Create & link class"
+      onAfterCreate={handleAfterCreate}
+    />
+  );
+}