@hed-hog/lms 0.0.304 → 0.0.306

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

@@ -0,0 +1,397 @@
+'use client';
+
+import { EntityPicker } from '@/components/ui/entity-picker';
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/form';
+import { FormActions } from '@/components/ui/form-actions';
+import { Input } from '@/components/ui/input';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+} from '@/components/ui/sheet';
+import { Switch } from '@/components/ui/switch';
+import { Textarea } from '@/components/ui/textarea';
+import { useApp } from '@hed-hog/next-app-provider';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useEffect } from 'react';
+import { useForm } from 'react-hook-form';
+import { toast } from 'sonner';
+import { z } from 'zod';
+import type { EnterpriseAccount } from './enterprise-types';
+
+// ── Schema ─────────────────────────────────────────────────────────────────────
+
+const enterpriseSchema = z.object({
+  name: z.string().trim().min(1, 'Name is required.'),
+  slug: z
+    .string()
+    .trim()
+    .min(1, 'Slug is required.')
+    .regex(/^[a-z0-9-]+$/, 'Only lowercase letters, numbers and hyphens.'),
+  status: z.enum(['active', 'inactive', 'suspended', 'trial']),
+  crmAccountId: z.number().nullable(),
+  portalEnabled: z.boolean(),
+  licenseLimit: z.coerce.number().int().min(1).nullable(),
+  notes: z.string().optional(),
+});
+
+export type EnterpriseFormValues = z.infer<typeof enterpriseSchema>;
+
+// ── Helpers ────────────────────────────────────────────────────────────────────
+
+function slugify(value: string): string {
+  return value
+    .toLowerCase()
+    .trim()
+    .normalize('NFD')
+    .replace(/[\u0300-\u036f]/g, '')
+    .replace(/[^a-z0-9\s-]/g, '')
+    .replace(/\s+/g, '-')
+    .replace(/-+/g, '-');
+}
+
+// ── Props ──────────────────────────────────────────────────────────────────────
+
+export type EnterpriseSheetProps = {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  editingAccount?: EnterpriseAccount | null;
+  onSave?: (values: EnterpriseFormValues, isEdit: boolean) => void;
+};
+
+// ── Component ──────────────────────────────────────────────────────────────────
+
+export function EnterpriseSheet({
+  open,
+  onOpenChange,
+  editingAccount,
+  onSave,
+}: EnterpriseSheetProps) {
+  const isEditing = Boolean(editingAccount);
+  const { request } = useApp();
+
+  const form = useForm<EnterpriseFormValues>({
+    resolver: zodResolver(enterpriseSchema),
+    defaultValues: {
+      name: '',
+      slug: '',
+      status: 'active',
+      crmAccountId: null,
+      portalEnabled: false,
+      licenseLimit: null,
+      notes: '',
+    },
+  });
+
+  // Reset form when sheet opens/closes or editing target changes
+  useEffect(() => {
+    if (!open) return;
+
+    if (editingAccount) {
+      form.reset({
+        name: editingAccount.name,
+        slug: editingAccount.slug,
+        status: editingAccount.status,
+        crmAccountId: editingAccount.crmAccountId,
+        portalEnabled: editingAccount.portalEnabled,
+        licenseLimit: editingAccount.licenseLimit ?? null,
+        notes: editingAccount.notes ?? '',
+      });
+    } else {
+      form.reset({
+        name: '',
+        slug: '',
+        status: 'active',
+        crmAccountId: null,
+        portalEnabled: false,
+        licenseLimit: null,
+        notes: '',
+      });
+    }
+  }, [open, editingAccount, form]);
+
+  // Auto-derive slug from name when creating
+  const watchedName = form.watch('name');
+  useEffect(() => {
+    if (!isEditing) {
+      form.setValue('slug', slugify(watchedName), { shouldValidate: false });
+    }
+  }, [watchedName, isEditing, form]);
+
+  async function handleSubmit(values: EnterpriseFormValues) {
+    try {
+      const payload = {
+        name: values.name,
+        slug: values.slug,
+        status: values.status,
+        crm_person_id: values.crmAccountId ?? null,
+        portal_enabled: values.portalEnabled,
+        license_limit: values.licenseLimit ?? null,
+        notes: values.notes ?? null,
+      };
+
+      if (isEditing && editingAccount) {
+        await request({
+          url: `/lms/enterprise/${editingAccount.id}`,
+          method: 'PATCH',
+          data: payload,
+        });
+      } else {
+        await request({
+          url: '/lms/enterprise',
+          method: 'POST',
+          data: payload,
+        });
+      }
+
+      onSave?.(values, isEditing);
+      toast.success(
+        isEditing
+          ? 'Account updated successfully.'
+          : 'Account created successfully.'
+      );
+      onOpenChange(false);
+    } catch {
+      toast.error(
+        isEditing ? 'Failed to update account.' : 'Failed to create account.'
+      );
+    }
+  }
+
+  return (
+    <Sheet open={open} onOpenChange={onOpenChange}>
+      <SheetContent className="w-full overflow-y-auto sm:max-w-lg">
+        <SheetHeader>
+          <SheetTitle>
+            {isEditing ? 'Edit enterprise account' : 'New enterprise account'}
+          </SheetTitle>
+          <SheetDescription>
+            {isEditing
+              ? 'Update the corporate account details below.'
+              : 'Register a new corporate account in the LMS platform.'}
+          </SheetDescription>
+        </SheetHeader>
+
+        <Form {...form}>
+          <form
+            onSubmit={form.handleSubmit(handleSubmit)}
+            className="mt-6 space-y-5 px-4"
+          >
+            {/* Name */}
+            <FormField
+              control={form.control}
+              name="name"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Name</FormLabel>
+                  <FormControl>
+                    <Input placeholder="e.g. Techcorp Brasil" {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            {/* Slug */}
+            <FormField
+              control={form.control}
+              name="slug"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Slug / Internal code</FormLabel>
+                  <FormControl>
+                    <Input placeholder="techcorp-brasil" {...field} />
+                  </FormControl>
+                  <FormDescription>
+                    Unique identifier used internally and in URLs. Auto-filled
+                    from the name when creating.
+                  </FormDescription>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            {/* Status */}
+            <FormField
+              control={form.control}
+              name="status"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Status</FormLabel>
+                  <FormControl>
+                    <Select value={field.value} onValueChange={field.onChange}>
+                      <SelectTrigger className="w-full">
+                        <SelectValue />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="active">Active</SelectItem>
+                        <SelectItem value="trial">Trial</SelectItem>
+                        <SelectItem value="inactive">Inactive</SelectItem>
+                        <SelectItem value="suspended">Suspended</SelectItem>
+                      </SelectContent>
+                    </Select>
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            {/* Empresa (EntityPicker — handles form.control via Controller internally) */}
+            <EntityPicker
+              form={form}
+              name="crmAccountId"
+              onChange={(val) =>
+                form.setValue('crmAccountId', val as number | null, {
+                  shouldValidate: true,
+                })
+              }
+              label="Empresa"
+              placeholder="Selecionar empresa..."
+              searchPlaceholder="Buscar por nome..."
+              emptyLabel="Nenhuma empresa vinculada"
+              entityLabel="empresa"
+              clearable
+              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: 'Nome',
+                  placeholder: 'Ex: Techcorp Brasil Ltda',
+                  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',
+                  },
+                });
+                return res.data as unknown as { id: number; name: string };
+              }}
+            />
+
+            {/* Portal enabled */}
+            <FormField
+              control={form.control}
+              name="portalEnabled"
+              render={({ field }) => (
+                <FormItem className="flex items-center justify-between rounded-lg border px-4 py-3">
+                  <div className="space-y-0.5">
+                    <FormLabel className="text-sm font-medium">
+                      Portal enabled
+                    </FormLabel>
+                    <FormDescription className="text-xs">
+                      Allow this account to access the self-service learning
+                      portal.
+                    </FormDescription>
+                  </div>
+                  <FormControl>
+                    <Switch
+                      checked={field.value}
+                      onCheckedChange={field.onChange}
+                    />
+                  </FormControl>
+                </FormItem>
+              )}
+            />
+
+            {/* License limit */}
+            <FormField
+              control={form.control}
+              name="licenseLimit"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>License limit</FormLabel>
+                  <FormControl>
+                    <Input
+                      type="number"
+                      min={1}
+                      placeholder="e.g. 500 — leave blank for unlimited"
+                      value={field.value ?? ''}
+                      onChange={(e) =>
+                        field.onChange(
+                          e.target.value === '' ? null : Number(e.target.value)
+                        )
+                      }
+                    />
+                  </FormControl>
+                  <FormDescription>
+                    Maximum number of active users. Leave blank for unlimited.
+                  </FormDescription>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            {/* Notes */}
+            <FormField
+              control={form.control}
+              name="notes"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Notes</FormLabel>
+                  <FormControl>
+                    <Textarea
+                      placeholder="Internal notes about this account..."
+                      rows={3}
+                      {...field}
+                      value={field.value ?? ''}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormActions
+              sheet
+              cancelLabel="Cancel"
+              onCancel={() => onOpenChange(false)}
+              submitLabel={isEditing ? 'Save changes' : 'Create account'}
+              submitType="submit"
+            />
+          </form>
+        </Form>
+      </SheetContent>
+    </Sheet>
+  );
+}

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

@@ -0,0 +1,167 @@
+'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 {
+  Sheet,
+  SheetContent,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+} from '@/components/ui/sheet';
+import { useApp } from '@hed-hog/next-app-provider';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { Loader2 } from 'lucide-react';
+import { useEffect, useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { toast } from 'sonner';
+import { z } from 'zod';
+
+// ── Schema ────────────────────────────────────────────────────────────────────
+
+const studentCreateSchema = z.object({
+  name: z.string().trim().min(1, 'Name is required.'),
+  email: z
+    .string()
+    .trim()
+    .email('Enter a valid email address.')
+    .optional()
+    .or(z.literal('')),
+});
+
+type StudentCreateValues = z.infer<typeof studentCreateSchema>;
+
+const DEFAULT_VALUES: StudentCreateValues = { name: '', email: '' };
+
+// ── Props ─────────────────────────────────────────────────────────────────────
+
+export interface EnterpriseStudentCreateSheetProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onCreated?: (personId: number) => void;
+}
+
+// ── Component ─────────────────────────────────────────────────────────────────
+
+export function EnterpriseStudentCreateSheet({
+  open,
+  onOpenChange,
+  onCreated,
+}: EnterpriseStudentCreateSheetProps) {
+  const { request } = useApp();
+  const [saving, setSaving] = useState(false);
+
+  const form = useForm<StudentCreateValues>({
+    resolver: zodResolver(studentCreateSchema),
+    defaultValues: DEFAULT_VALUES,
+  });
+
+  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: StudentCreateValues) {
+    setSaving(true);
+    try {
+      const res = await request<{ id: number }>({
+        url: '/person',
+        method: 'POST',
+        data: {
+          name: values.name.trim(),
+          type: 'individual',
+          email: values.email?.trim() || undefined,
+        },
+      });
+      const personId: number = (res as any).data?.id ?? (res as any).id;
+      onCreated?.(personId);
+      handleOpenChange(false);
+    } catch {
+      toast.error('Failed to create person.');
+    } 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 student (person)</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. Ana Beatriz Souza" {...field} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name="email"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Email (optional)</FormLabel>
+                    <FormControl>
+                      <Input
+                        type="email"
+                        placeholder="student@company.com"
+                        {...field}
+                      />
+                    </FormControl>
+                    <FormDescription>
+                      Contact email for this person.
+                    </FormDescription>
+                    <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 person
+              </Button>
+            </SheetFooter>
+          </form>
+        </Form>
+      </SheetContent>
+    </Sheet>
+  );
+}