@hed-hog/lms 0.0.304 → 0.0.306

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

@@ -0,0 +1,277 @@
+import type {
+  EnterpriseAccount,
+  EnterpriseClass,
+  EnterpriseCourse,
+  EnterpriseUser,
+} from './enterprise-types';
+
+// ── CRM Accounts (picker options) ─────────────────────────────────────────────
+
+export const MOCK_CRM_ACCOUNTS = [
+  { id: 101, name: 'Techcorp Brasil Ltda' },
+  { id: 102, name: 'Grupo Atlas S.A.' },
+  { id: 103, name: 'Horizonte Engenharia Ltda' },
+  { id: 104, name: 'MedPlus Saúde S.A.' },
+  { id: 105, name: 'Agro Prime Comércio Ltda' },
+  { id: 106, name: 'LogTech Transportes Ltda' },
+  { id: 107, name: 'Inova Tech S.A.' },
+  { id: 108, name: 'Dinâmica Consultoria Ltda' },
+];
+
+// ── Accounts ───────────────────────────────────────────────────────────────────
+
+export const MOCK_ENTERPRISE_ACCOUNTS: EnterpriseAccount[] = [
+  {
+    id: 1,
+    name: 'Techcorp Brasil',
+    slug: 'techcorp-brasil',
+    status: 'active',
+    crmAccountId: 101,
+    crmAccountName: 'Techcorp Brasil Ltda',
+    portalEnabled: true,
+    usersCount: 120,
+    studentsCount: 104,
+    managersCount: 14,
+    adminsCount: 2,
+    coursesCount: 8,
+    classesCount: 3,
+    licenseLimit: 150,
+    notes: null,
+    createdAt: '2026-01-01T10:00:00Z',
+    updatedAt: '2026-04-10T08:30:00Z',
+  },
+  {
+    id: 2,
+    name: 'Grupo Financeiro Atlas',
+    slug: 'grupo-financeiro-atlas',
+    status: 'active',
+    crmAccountId: 102,
+    crmAccountName: 'Grupo Atlas S.A.',
+    portalEnabled: true,
+    usersCount: 250,
+    studentsCount: 220,
+    managersCount: 28,
+    adminsCount: 2,
+    coursesCount: 14,
+    classesCount: 5,
+    licenseLimit: 300,
+    notes: null,
+    createdAt: '2026-02-01T09:00:00Z',
+    updatedAt: '2026-04-15T11:00:00Z',
+  },
+  {
+    id: 3,
+    name: 'Construtora Horizonte',
+    slug: 'construtora-horizonte',
+    status: 'active',
+    crmAccountId: null,
+    crmAccountName: null,
+    portalEnabled: false,
+    usersCount: 60,
+    studentsCount: 52,
+    managersCount: 6,
+    adminsCount: 1,
+    coursesCount: 4,
+    classesCount: 2,
+    licenseLimit: 80,
+    notes: null,
+    createdAt: '2026-03-01T08:00:00Z',
+    updatedAt: '2026-04-01T09:00:00Z',
+  },
+  {
+    id: 4,
+    name: 'MedPlus Saúde',
+    slug: 'medplus-saude',
+    status: 'trial',
+    crmAccountId: 104,
+    crmAccountName: 'MedPlus Saúde S.A.',
+    portalEnabled: true,
+    usersCount: 30,
+    studentsCount: 28,
+    managersCount: 2,
+    adminsCount: 1,
+    coursesCount: 3,
+    classesCount: 1,
+    licenseLimit: 50,
+    notes: null,
+    createdAt: '2026-04-01T11:00:00Z',
+    updatedAt: '2026-04-18T14:00:00Z',
+  },
+  {
+    id: 5,
+    name: 'Agro Prime',
+    slug: 'agro-prime',
+    status: 'inactive',
+    crmAccountId: null,
+    crmAccountName: null,
+    portalEnabled: false,
+    usersCount: 0,
+    studentsCount: 0,
+    managersCount: 0,
+    adminsCount: 0,
+    coursesCount: 0,
+    classesCount: 0,
+    licenseLimit: null,
+    notes: null,
+    createdAt: '2025-09-01T14:00:00Z',
+    updatedAt: '2026-02-28T18:00:00Z',
+  },
+  {
+    id: 6,
+    name: 'LogTech Transportes',
+    slug: 'logtech-transportes',
+    status: 'active',
+    crmAccountId: 106,
+    crmAccountName: 'LogTech Transportes Ltda',
+    portalEnabled: true,
+    usersCount: 100,
+    studentsCount: 88,
+    managersCount: 10,
+    adminsCount: 2,
+    coursesCount: 6,
+    classesCount: 2,
+    licenseLimit: 120,
+    notes: null,
+    createdAt: '2026-01-15T09:30:00Z',
+    updatedAt: '2026-04-12T10:00:00Z',
+  },
+];
+
+// ── Users (linked to account id=1) ─────────────────────────────────────────────
+
+export const MOCK_ENTERPRISE_USERS: EnterpriseUser[] = [
+  {
+    id: 1,
+    userId: 201,
+    name: 'Ana Beatriz Souza',
+    email: 'ana.souza@techcorp.com.br',
+    role: 'enterprise_admin',
+    status: 'active',
+    lastAccessAt: '2026-04-20T14:32:00Z',
+  },
+  {
+    id: 2,
+    userId: 202,
+    name: 'Carlos Eduardo Lima',
+    email: 'carlos.lima@techcorp.com.br',
+    role: 'hr_manager',
+    status: 'active',
+    lastAccessAt: '2026-04-19T09:15:00Z',
+  },
+  {
+    id: 3,
+    userId: 203,
+    name: 'Fernanda Oliveira',
+    email: 'fernanda.oliveira@techcorp.com.br',
+    role: 'student',
+    status: 'active',
+    lastAccessAt: '2026-04-18T16:00:00Z',
+  },
+  {
+    id: 4,
+    userId: 204,
+    name: 'Ricardo Mendes',
+    email: 'ricardo.mendes@techcorp.com.br',
+    role: 'student',
+    status: 'active',
+    lastAccessAt: '2026-04-17T11:45:00Z',
+  },
+  {
+    id: 5,
+    userId: 205,
+    name: 'Juliana Castro',
+    email: 'juliana.castro@techcorp.com.br',
+    role: 'viewer',
+    status: 'inactive',
+    lastAccessAt: null,
+  },
+  {
+    id: 6,
+    userId: 206,
+    name: 'Marcos Vinicius Santos',
+    email: 'marcos.santos@techcorp.com.br',
+    role: 'student',
+    status: 'pending',
+    lastAccessAt: null,
+  },
+];
+
+// ── Courses (linked to account id=1) ──────────────────────────────────────────
+
+export const MOCK_ENTERPRISE_COURSES: EnterpriseCourse[] = [
+  {
+    id: 10,
+    title: 'Liderança e Gestão de Equipes',
+    slug: 'lideranca-gestao-equipes',
+    status: 'published',
+    modality: 'Online',
+    enrolledCount: 45,
+    completionRate: 72,
+    contractedAt: '2026-01-05T00:00:00Z',
+  },
+  {
+    id: 11,
+    title: 'Compliance e Ética Corporativa',
+    slug: 'compliance-etica-corporativa',
+    status: 'published',
+    modality: 'Híbrido',
+    enrolledCount: 104,
+    completionRate: 88,
+    contractedAt: '2026-01-05T00:00:00Z',
+  },
+  {
+    id: 12,
+    title: 'Segurança da Informação',
+    slug: 'seguranca-informacao',
+    status: 'published',
+    modality: 'Online',
+    enrolledCount: 98,
+    completionRate: 61,
+    contractedAt: '2026-02-01T00:00:00Z',
+  },
+  {
+    id: 13,
+    title: 'Agile & Scrum na Prática',
+    slug: 'agile-scrum-pratica',
+    status: 'draft',
+    modality: 'Presencial',
+    enrolledCount: 0,
+    completionRate: 0,
+    contractedAt: '2026-03-10T00:00:00Z',
+  },
+];
+
+// ── Classes / Turmas (linked to account id=1) ──────────────────────────────────
+
+export const MOCK_ENTERPRISE_CLASSES: EnterpriseClass[] = [
+  {
+    id: 20,
+    code: 'T2026-LG-01',
+    courseTitle: 'Liderança e Gestão de Equipes',
+    startDate: '2026-03-01',
+    endDate: '2026-06-30',
+    enrolledCount: 45,
+    capacity: 50,
+    status: 'ongoing',
+  },
+  {
+    id: 21,
+    code: 'T2026-CE-01',
+    courseTitle: 'Compliance e Ética Corporativa',
+    startDate: '2026-01-10',
+    endDate: '2026-04-10',
+    enrolledCount: 104,
+    capacity: 120,
+    status: 'completed',
+  },
+  {
+    id: 22,
+    code: 'T2026-SI-01',
+    courseTitle: 'Segurança da Informação',
+    startDate: '2026-04-15',
+    endDate: null,
+    enrolledCount: 98,
+    capacity: 100,
+    status: 'open',
+  },
+];

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

@@ -0,0 +1,31 @@
+import { useApp } from '@hed-hog/next-app-provider';
+
+export type PersonPickerOption = {
+  id: number;
+  name: string;
+  email?: string | null;
+};
+
+export async function loadPersonOptions(
+  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: `/person?${params}`,
+    method: 'GET',
+  });
+  const body: any = (res as any).data ?? res;
+  const page: number = body.page ?? 1;
+  const lastPage: number = body.lastPage ?? 1;
+  const items: PersonPickerOption[] = (body.data ?? []).map((p: any) => ({
+    id: p.id,
+    name: p.name ?? '',
+    email: p.email ?? null,
+  }));
+  return { items, hasMore: page < lastPage };
+}

package/hedhog/frontend/app/enterprise/_components/enterprise-progress-bar.tsx.ejs

@@ -0,0 +1,21 @@
+'use client';
+
+export function ProgressBar({
+  value,
+  max,
+  colorClass = 'bg-primary',
+}: {
+  value: number;
+  max: number;
+  colorClass?: string;
+}) {
+  const pct = max === 0 ? 0 : Math.min(100, (value / max) * 100);
+  return (
+    <div className="h-1.5 w-full overflow-hidden rounded-full bg-muted">
+      <div
+        className={`h-full rounded-full transition-all ${colorClass}`}
+        style={{ width: `${pct}%` }}
+      />
+    </div>
+  );
+}

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

@@ -0,0 +1,224 @@
+'use client';
+
+import { PaginationFooter } from '@/components/entity-list';
+import { Button } from '@/components/ui/button';
+import {
+  EntityPicker,
+  type EntityPickerLoadResult,
+  type EntityPickerValue,
+} from '@/components/ui/entity-picker';
+import { Input } from '@/components/ui/input';
+import { Plus, Search } from 'lucide-react';
+import { type ReactNode } from 'react';
+
+// ── Types ─────────────────────────────────────────────────────────────────────
+
+export type RelatedTabToolbarProps<TOption extends object> = {
+  // Search
+  search: string;
+  onSearchChange: (value: string) => void;
+  searchPlaceholder?: string;
+
+  // Filters slot — caller renders domain-specific <Select> elements here
+  filters?: ReactNode;
+
+  // EntityPicker binding
+  pickerPlaceholder: string;
+  pickerEntityLabel?: string;
+  pickerValue: EntityPickerValue;
+  onPickerChange: (value: EntityPickerValue, option: TOption | null) => void;
+
+  // Data source — use one of: loadPickerOptions (async) or pickerOptions (static)
+  loadPickerOptions?: (args: {
+    page: number;
+    pageSize: number;
+    search: string;
+  }) => Promise<EntityPickerLoadResult<TOption> | TOption[]>;
+  pickerOptions?: TOption[];
+
+  // Option accessors
+  getPickerOptionValue: (option: TOption) => string | number | null | undefined;
+  getPickerOptionLabel: (option: TOption) => string;
+  getPickerOptionDescription?: (option: TOption) => string | undefined;
+  renderPickerOption?: (args: {
+    option: TOption;
+    isSelected: boolean;
+  }) => ReactNode;
+
+  // Quick-create: caller is responsible for rendering the Sheet;
+  // this just exposes an icon button when the callback is provided.
+  onCreateNew?: () => void;
+  createLabel?: string;
+
+  // Optional slot rendered between the picker group and the Add button
+  // (e.g. a role selector that should be chosen before linking an entity)
+  pickerSuffix?: ReactNode;
+
+  // Add action
+  onAdd: () => void;
+  addLabel?: string;
+  addDisabled?: boolean;
+};
+
+export type RelatedTabLayoutProps<TOption extends object> =
+  RelatedTabToolbarProps<TOption> & {
+    // Content slot — table/list rendered by the caller
+    children: ReactNode;
+
+    // Pagination
+    currentPage: number;
+    pageSize: number;
+    totalItems: number;
+    onPageChange: (page: number) => void;
+    onPageSizeChange: (pageSize: number) => void;
+  };
+
+// ── RelatedTabToolbar ─────────────────────────────────────────────────────────
+
+export function RelatedTabToolbar<TOption extends object>({
+  search,
+  onSearchChange,
+  searchPlaceholder = 'Search...',
+  filters,
+  pickerPlaceholder,
+  pickerEntityLabel,
+  pickerValue,
+  onPickerChange,
+  loadPickerOptions,
+  pickerOptions,
+  getPickerOptionValue,
+  getPickerOptionLabel,
+  getPickerOptionDescription,
+  renderPickerOption,
+  onCreateNew,
+  createLabel = 'Create new',
+  pickerSuffix,
+  onAdd,
+  addLabel = 'Add',
+  addDisabled = false,
+}: RelatedTabToolbarProps<TOption>) {
+  return (
+    <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+      {/* Left: search + caller-provided filters */}
+      <div className="flex flex-wrap items-center gap-2">
+        <div className="relative">
+          <Search className="pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
+          <Input
+            placeholder={searchPlaceholder}
+            value={search}
+            onChange={(e) => onSearchChange(e.target.value)}
+            className="pl-9 sm:w-52"
+          />
+        </div>
+        {filters}
+      </div>
+
+      {/* Right: EntityPicker → optional role/suffix → quick-create icon → Add */}
+      <div className="flex flex-wrap items-center gap-2">
+        <EntityPicker<TOption & Record<string, unknown>>
+          value={pickerValue}
+          onChange={
+            onPickerChange as (
+              v: EntityPickerValue,
+              o: (TOption & Record<string, unknown>) | null
+            ) => void
+          }
+          placeholder={pickerPlaceholder}
+          entityLabel={pickerEntityLabel}
+          showCreateButton={false}
+          clearable
+          loadOptions={
+            loadPickerOptions as
+              | ((args: {
+                  page: number;
+                  pageSize: number;
+                  search: string;
+                }) => Promise<
+                  | EntityPickerLoadResult<TOption & Record<string, unknown>>
+                  | (TOption & Record<string, unknown>)[]
+                >)
+              | undefined
+          }
+          options={
+            pickerOptions as (TOption & Record<string, unknown>)[] | undefined
+          }
+          getOptionValue={
+            getPickerOptionValue as (
+              o: TOption & Record<string, unknown>
+            ) => string | number | null | undefined
+          }
+          getOptionLabel={
+            getPickerOptionLabel as (
+              o: TOption & Record<string, unknown>
+            ) => string
+          }
+          getOptionDescription={
+            getPickerOptionDescription as
+              | ((o: TOption & Record<string, unknown>) => string | undefined)
+              | undefined
+          }
+          renderOption={
+            renderPickerOption as
+              | ((args: {
+                  option: TOption & Record<string, unknown>;
+                  isSelected: boolean;
+                }) => ReactNode)
+              | undefined
+          }
+          buttonClassName="min-w-52 max-w-64"
+        />
+
+        {/* Suffix slot: e.g. role selector that must be chosen before linking */}
+        {pickerSuffix}
+
+        {onCreateNew && (
+          <Button
+            variant="ghost"
+            size="icon"
+            onClick={onCreateNew}
+            aria-label={createLabel}
+            title={createLabel}
+            className="shrink-0"
+          >
+            <Plus className="h-4 w-4" />
+          </Button>
+        )}
+
+        <Button
+          onClick={onAdd}
+          disabled={addDisabled}
+          size="sm"
+          className="shrink-0"
+        >
+          {addLabel}
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+// ── RelatedTabLayout ──────────────────────────────────────────────────────────
+
+export function RelatedTabLayout<TOption extends object>({
+  children,
+  currentPage,
+  pageSize,
+  totalItems,
+  onPageChange,
+  onPageSizeChange,
+  ...toolbarProps
+}: RelatedTabLayoutProps<TOption>) {
+  return (
+    <div className="flex flex-col gap-4">
+      <RelatedTabToolbar {...toolbarProps} />
+      <div className="flex-1">{children}</div>
+      <PaginationFooter
+        currentPage={currentPage}
+        pageSize={pageSize}
+        totalItems={totalItems}
+        onPageChange={onPageChange}
+        onPageSizeChange={onPageSizeChange}
+      />
+    </div>
+  );
+}