@hed-hog/lms 0.0.331 → 0.0.338

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

@@ -1,6 +1,5 @@
 'use client';
 
-import { EntityPicker } from '@/components/ui/entity-picker';
 import {
   Form,
   FormControl,
@@ -31,10 +30,12 @@ import { Textarea } from '@/components/ui/textarea';
 import { useApp } from '@hed-hog/next-app-provider';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useTranslations } from 'next-intl';
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import { useForm } from 'react-hook-form';
 import { toast } from 'sonner';
 import { z } from 'zod';
+import { PersonPicker } from '../../../contact/_components/person-picker';
+import { EnterprisePersonEditSheet } from './enterprise-person-edit-sheet';
 import type { EnterpriseAccount } from './enterprise-types';
 
 // ── Schema ─────────────────────────────────────────────────────────────────────
@@ -88,6 +89,9 @@ export function EnterpriseSheet({
   const isEditing = Boolean(editingAccount);
   const { request } = useApp();
   const t = useTranslations('lms.EnterprisePage.sheet');
+  const [personSheetOpen, setPersonSheetOpen] = useState(false);
+  const [personEditId, setPersonEditId] = useState<number | null>(null);
+  const [selectedCompanyLabel, setSelectedCompanyLabel] = useState('');
 
   const form = useForm<EnterpriseFormValues>({
     resolver: zodResolver(enterpriseSchema),
@@ -116,6 +120,11 @@ export function EnterpriseSheet({
         licenseLimit: editingAccount.licenseLimit ?? null,
         notes: editingAccount.notes ?? '',
       });
+      setSelectedCompanyLabel(
+        editingAccount.crmAccount?.tradeName ??
+          editingAccount.crmAccountName ??
+          ''
+      );
     } else {
       form.reset({
         name: '',
@@ -126,6 +135,7 @@ export function EnterpriseSheet({
         licenseLimit: null,
         notes: '',
       });
+      setSelectedCompanyLabel('');
     }
   }, [open, editingAccount, form]);
 
@@ -200,7 +210,10 @@ export function EnterpriseSheet({
                 <FormItem>
                   <FormLabel>{t('fields.name')}</FormLabel>
                   <FormControl>
-                    <Input placeholder={t('fields.namePlaceholder')} {...field} />
+                    <Input
+                      placeholder={t('fields.namePlaceholder')}
+                      {...field}
+                    />
                   </FormControl>
                   <FormMessage />
                 </FormItem>
@@ -215,7 +228,10 @@ export function EnterpriseSheet({
                 <FormItem>
                   <FormLabel>{t('fields.slug')}</FormLabel>
                   <FormControl>
-                    <Input placeholder={t('fields.slugPlaceholder')} {...field} />
+                    <Input
+                      placeholder={t('fields.slugPlaceholder')}
+                      {...field}
+                    />
                   </FormControl>
                   <FormDescription>
                     {t('fields.slugDescription')}
@@ -238,10 +254,18 @@ export function EnterpriseSheet({
                         <SelectValue />
                       </SelectTrigger>
                       <SelectContent>
-                        <SelectItem value="active">{t('status.active')}</SelectItem>
-                        <SelectItem value="trial">{t('status.trial')}</SelectItem>
-                        <SelectItem value="inactive">{t('status.inactive')}</SelectItem>
-                        <SelectItem value="suspended">{t('status.suspended')}</SelectItem>
+                        <SelectItem value="active">
+                          {t('status.active')}
+                        </SelectItem>
+                        <SelectItem value="trial">
+                          {t('status.trial')}
+                        </SelectItem>
+                        <SelectItem value="inactive">
+                          {t('status.inactive')}
+                        </SelectItem>
+                        <SelectItem value="suspended">
+                          {t('status.suspended')}
+                        </SelectItem>
                       </SelectContent>
                     </Select>
                   </FormControl>
@@ -250,60 +274,33 @@ export function EnterpriseSheet({
               )}
             />
 
-            {/* Empresa (EntityPicker — handles form.control via Controller internally) */}
-            <EntityPicker
-              form={form}
-              name="crmAccountId"
-              onChange={(val) =>
-                form.setValue('crmAccountId', val as number | null, {
-                  shouldValidate: true,
-                })
-              }
+            <PersonPicker
               label={t('fields.company')}
-              placeholder={t('fields.companyPlaceholder')}
-              searchPlaceholder={t('fields.companySearchPlaceholder')}
-              emptyLabel={t('fields.companyEmpty')}
               entityLabel={t('fields.companyEntity')}
-              clearable
-              valueType="number"
-              loadOptions={async ({ page, pageSize, search }) => {
-                const params = new URLSearchParams({
-                  page: String(page),
-                  pageSize: String(pageSize),
+              value={form.watch('crmAccountId')}
+              initialSelectedLabel={selectedCompanyLabel}
+              onChange={(personId, personName) => {
+                form.setValue('crmAccountId', personId, {
+                  shouldValidate: true,
+                  shouldDirty: true,
                 });
-                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),
-                };
+                setSelectedCompanyLabel(personName ?? '');
               }}
-              getOptionValue={(opt) => (opt as any).id}
-              getOptionLabel={(opt) => (opt as any).name ?? ''}
-              createFields={[
-                {
-                  name: 'name',
-                  label: t('fields.companyCreateName'),
-                  placeholder: t('fields.companyCreateNamePlaceholder'),
-                  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 };
+              onEditSelection={(personId) => {
+                setPersonEditId(personId);
+                setPersonSheetOpen(true);
               }}
+              onCreateNew={() => {
+                setPersonEditId(null);
+                setPersonSheetOpen(true);
+              }}
+              selectPlaceholder={t('fields.companyPlaceholder')}
+              personTypeFilter="company"
+              createType="company"
+              lockCreateType
+              clearable
+              showEditButton
+              editAriaLabel="Editar empresa"
             />
 
             {/* Portal enabled */}
@@ -389,6 +386,34 @@ export function EnterpriseSheet({
             />
           </form>
         </Form>
+
+        <EnterprisePersonEditSheet
+          open={personSheetOpen}
+          onOpenChange={(nextOpen) => {
+            setPersonSheetOpen(nextOpen);
+            if (!nextOpen) setPersonEditId(null);
+          }}
+          personId={personEditId}
+          title={
+            personEditId
+              ? 'Editar empresa cliente'
+              : 'Cadastrar empresa cliente'
+          }
+          description={
+            personEditId
+              ? 'Atualize os dados completos da empresa vinculada.'
+              : 'Cadastre a empresa cliente completa e vincule-a a esta conta enterprise.'
+          }
+          allowedTypes={['company']}
+          onSaved={(person) => {
+            if (!person?.id) return;
+            form.setValue('crmAccountId', person.id, {
+              shouldValidate: true,
+              shouldDirty: true,
+            });
+            setSelectedCompanyLabel(person.name ?? '');
+          }}
+        />
       </SheetContent>
     </Sheet>
   );

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

@@ -14,6 +14,7 @@ import { Input } from '@/components/ui/input';
 import {
   Sheet,
   SheetContent,
+  SheetDescription,
   SheetFooter,
   SheetHeader,
   SheetTitle,
@@ -103,6 +104,9 @@ export function EnterpriseStudentCreateSheet({
       <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>
+          <SheetDescription>
+            Create a new student person record for this enterprise.
+          </SheetDescription>
         </SheetHeader>
 
         <Form {...form}>

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

@@ -1,6 +1,6 @@
 'use client';
 
-import { Avatar, AvatarFallback } from '@/components/ui/avatar';
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import type { EntityPickerValue } from '@/components/ui/entity-picker';
@@ -12,9 +12,10 @@ import {
   TableHeader,
   TableRow,
 } from '@/components/ui/table';
+import { usePersistedPageSize } from '@/hooks/use-persisted-page-size';
 import { formatDate } from '@/lib/format-date';
 import { useApp, useQuery } from '@hed-hog/next-app-provider';
-import { Trash2 } from 'lucide-react';
+import { Pencil, Trash2 } from 'lucide-react';
 import { useTranslations } from 'next-intl';
 import { useCallback, useState } from 'react';
 import { toast } from 'sonner';
@@ -23,16 +24,14 @@ import {
   USER_STATUS_VARIANT,
 } from './enterprise-detail-constants';
 import { getAvatarColor, getInitials } from './enterprise-detail-utils';
+import { EnterprisePersonEditSheet } from './enterprise-person-edit-sheet';
 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,
@@ -44,12 +43,17 @@ export function StudentsTab({
   const { request, getSettingValue, currentLocaleCode } = useApp();
   const [search, setSearch] = useState('');
   const [page, setPage] = useState(1);
-  const [pageSize, setPageSize] = useState(STUDENTS_PAGE_SIZE_DEFAULT);
+  const [pageSize, setPageSize] = usePersistedPageSize({
+    storageKey: 'pagination:global:pageSize',
+    defaultValue: 6,
+    allowedValues: [6, 12, 24, 48],
+  });
   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 [personSheetOpen, setPersonSheetOpen] = useState(false);
+  const [editingPersonId, setEditingPersonId] = useState<number | null>(null);
 
   const loadPickerOptions = useCallback(
     (args: { page: number; pageSize: number; search: string }) =>
@@ -168,7 +172,10 @@ export function StudentsTab({
             </div>
           </div>
         )}
-        onCreateNew={() => setCreateSheetOpen(true)}
+        onCreateNew={() => {
+          setEditingPersonId(null);
+          setPersonSheetOpen(true);
+        }}
         onAdd={handleAdd}
         addDisabled={!selectedPerson}
         currentPage={page}
@@ -203,6 +210,13 @@ export function StudentsTab({
                       <Avatar
                         className={`size-7 shrink-0 rounded-full ${getAvatarColor(s.name ?? '').bg}`}
                       >
+                        <AvatarImage
+                          src={
+                            s.avatarId
+                              ? `${process.env.NEXT_PUBLIC_API_BASE_URL}/person/avatar/${s.avatarId}`
+                              : undefined
+                          }
+                        />
                         <AvatarFallback
                           className={`text-xs font-semibold ${getAvatarColor(s.name ?? '').bg} ${getAvatarColor(s.name ?? '').text}`}
                         >
@@ -230,6 +244,17 @@ export function StudentsTab({
                       : '—'}
                   </TableCell>
                   <TableCell className="text-right">
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      className="h-7 w-7"
+                      onClick={() => {
+                        setEditingPersonId(s.personId);
+                        setPersonSheetOpen(true);
+                      }}
+                    >
+                      <Pencil className="size-4" />
+                    </Button>
                     <Button
                       variant="ghost"
                       size="icon"
@@ -246,21 +271,34 @@ export function StudentsTab({
           </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(t('sheet.studentLinkError'));
+      <EnterprisePersonEditSheet
+        open={personSheetOpen}
+        onOpenChange={(nextOpen) => {
+          setPersonSheetOpen(nextOpen);
+          if (!nextOpen) setEditingPersonId(null);
+        }}
+        personId={editingPersonId}
+        title={editingPersonId ? 'Editar aluno' : 'Cadastrar novo aluno'}
+        description={
+          editingPersonId
+            ? 'Atualize os dados completos da pessoa vinculada como aluna.'
+            : 'Cadastre a pessoa completa para vinculacao como aluna nesta conta enterprise.'
+        }
+        allowedTypes={['individual']}
+        onSaved={async (person) => {
+          if (editingPersonId === null && person?.id) {
+            try {
+              await request({
+                url: `/lms/enterprise/${enterpriseId}/students`,
+                method: 'POST',
+                data: { person_id: person.id, status: 'active' },
+              });
+            } catch {
+              toast.error(t('sheet.studentLinkError'));
+            }
           }
-          setCreateSheetOpen(false);
-          refetch();
+
+          void refetch();
           onMutate?.();
         }}
       />

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

@@ -15,6 +15,7 @@ export type EnterpriseUserStatus = 'active' | 'inactive' | 'pending';
 export interface EnterpriseCrmAccount {
   id: number;
   name: string;
+  avatarId: number | null;
   tradeName: string | null;
   industry: string | null;
   website: string | null;
@@ -47,6 +48,7 @@ export interface EnterpriseUser {
   userId: number;
   name: string;
   email: string;
+  photoId?: number | null;
   role: EnterpriseUserRole;
   status: EnterpriseUserStatus;
   lastAccessAt: string | null;
@@ -57,6 +59,7 @@ export interface EnterpriseStudent {
   personId: number;
   name: string | null;
   email: string | null;
+  avatarId?: number | null;
   status: EnterpriseUserStatus;
   createdAt: string | null;
 }
@@ -73,6 +76,7 @@ export interface EnterpriseCourse {
   courseId?: number;
   title: string;
   slug: string | null;
+  logoFileId?: number | null;
   status: EnterpriseCourseStatus;
   level?: string | null;
   modality?: string;
@@ -87,6 +91,10 @@ export interface EnterpriseClass {
   code: string | null;
   title?: string | null;
   courseTitle: string | null;
+  logoFileId?: number | null;
+  instructorId?: number | null;
+  instructorName?: string | null;
+  instructorAvatarId?: number | null;
   startDate: string | null;
   endDate: string | null;
   capacity: number | null;
@@ -94,3 +102,49 @@ export interface EnterpriseClass {
   status: EnterpriseClassStatus;
   deliveryMode?: string | null;
 }
+
+export interface EnterpriseOverviewKpis {
+  students: number;
+  classes: number;
+  courses: number;
+  administrators: number;
+  portalEnabled: boolean;
+}
+
+export interface EnterpriseLicenseUsage {
+  used: number;
+  limit: number | null;
+  available: number | null;
+  percent: number;
+}
+
+export interface EnterpriseScheduledSeats {
+  used: number;
+  open: number;
+  capacity: number;
+}
+
+export interface EnterpriseLicenseTimelinePoint {
+  month: string;
+  label: string;
+  used: number;
+  assigned: number;
+  revoked: number;
+}
+
+export interface EnterpriseActivityItem {
+  id: string;
+  type: string;
+  title: string;
+  description: string;
+  createdAt: string;
+}
+
+export interface EnterpriseOverview {
+  account: EnterpriseAccount;
+  kpis: EnterpriseOverviewKpis;
+  licenseUsage: EnterpriseLicenseUsage;
+  scheduledSeats: EnterpriseScheduledSeats;
+  licenseTimeline: EnterpriseLicenseTimelinePoint[];
+  activities: EnterpriseActivityItem[];
+}

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

@@ -0,0 +1,211 @@
+'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,
+  SheetDescription,
+  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>
+          <SheetDescription>
+            Create a new enterprise user and send an invitation email.
+          </SheetDescription>
+        </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>
+  );
+}