@hed-hog/lms 0.0.304 → 0.0.306

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

@@ -0,0 +1,390 @@
+'use client';
+
+import { Avatar, AvatarFallback } from '@/components/ui/avatar';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+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 { CalendarDays, SquareArrowOutUpRight, Trash2 } from 'lucide-react';
+import { useRouter } from 'next/navigation';
+import { useCallback, useState } from 'react';
+import { toast } from 'sonner';
+import { EnterpriseClassCreateSheet } from './enterprise-class-create-sheet';
+import {
+  CLASS_STATUS_LABEL,
+  CLASS_STATUS_VARIANT,
+} from './enterprise-detail-constants';
+import { getAvatarColor, getInitials } from './enterprise-detail-utils';
+import { RelatedTabLayout } from './enterprise-related-tab';
+import type {
+  EnterpriseClass,
+  EnterpriseClassStatus,
+} from './enterprise-types';
+
+const CLASSES_PAGE_SIZE_DEFAULT = 6;
+
+async function loadClassGroupOptions(
+  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<{
+    data: Array<{
+      id: number;
+      code: string | null;
+      title: string | null;
+      courseTitle: string | null;
+      startDate: string | null;
+      endDate: string | null;
+      capacity: number | null;
+      status: string;
+      deliveryMode: string | null;
+    }>;
+    page: number;
+    lastPage: number;
+  }>({
+    url: `/lms/classes?${params}`,
+    method: 'GET',
+  });
+  const data = res.data ?? res;
+  return {
+    items: (data.data ?? []).map((c) => ({
+      id: c.id,
+      courseClassGroupId: c.id,
+      code: c.code ?? null,
+      title: c.title ?? null,
+      courseTitle: c.courseTitle ?? null,
+      startDate: c.startDate ?? null,
+      endDate: c.endDate ?? null,
+      capacity: c.capacity ?? null,
+      enrolledCount: 0,
+      status: c.status ?? 'open',
+      deliveryMode: c.deliveryMode ?? null,
+    })) as EnterpriseClass[],
+    hasMore: data.page < data.lastPage,
+  };
+}
+
+export function ClassesTab({
+  enterpriseId,
+  onMutate,
+}: {
+  enterpriseId: number;
+  onMutate?: () => void;
+}) {
+  const router = useRouter();
+  const { request, currentLocaleCode, getSettingValue } = useApp();
+
+  const [search, setSearch] = useState('');
+  const [statusFilter, setStatusFilter] = useState<
+    'all' | EnterpriseClassStatus
+  >('all');
+  const [page, setPage] = useState(1);
+  const [pageSize, setPageSize] = useState(CLASSES_PAGE_SIZE_DEFAULT);
+  const [pickerValue, setPickerValue] = useState<string | number | null>(null);
+  const [pickerClass, setPickerClass] = useState<EnterpriseClass | null>(null);
+  const [createSheetOpen, setCreateSheetOpen] = useState(false);
+
+  const loadPickerOptions = useCallback(
+    (args: { page: number; pageSize: number; search: string }) =>
+      loadClassGroupOptions(request, args),
+    [request]
+  );
+
+  const queryParams = new URLSearchParams({
+    page: String(page),
+    pageSize: String(pageSize),
+    search,
+    ...(statusFilter !== 'all' ? { status: statusFilter } : {}),
+  });
+
+  const { data, refetch } = useQuery({
+    queryKey: [
+      'enterprise-classes',
+      enterpriseId,
+      page,
+      pageSize,
+      search,
+      statusFilter,
+    ],
+    queryFn: async () => {
+      const res = await request<any>({
+        url: `/lms/enterprise/${enterpriseId}/classes?${queryParams}`,
+        method: 'GET',
+      });
+      return (res as any).data ?? res;
+    },
+  });
+
+  const classes: EnterpriseClass[] = data?.data ?? [];
+  const total: number = data?.total ?? 0;
+
+  async function handleRemove(classGroupId: number) {
+    try {
+      await request({
+        url: `/lms/enterprise/${enterpriseId}/classes/${classGroupId}`,
+        method: 'DELETE',
+      });
+      toast.success('Class removed from enterprise.');
+      refetch();
+      onMutate?.();
+    } catch {
+      toast.error('Failed to remove class.');
+    }
+  }
+
+  async function handleAdd() {
+    if (!pickerClass) return;
+    try {
+      await request({
+        url: `/lms/enterprise/${enterpriseId}/classes`,
+        method: 'POST',
+        data: {
+          course_class_group_id:
+            pickerClass.courseClassGroupId ?? pickerClass.id,
+        },
+      });
+      setPickerValue(null);
+      setPickerClass(null);
+      refetch();
+      onMutate?.();
+    } catch {
+      toast.error('Failed to add class.');
+    }
+  }
+
+  return (
+    <>
+      <RelatedTabLayout<EnterpriseClass>
+        search={search}
+        onSearchChange={(v) => {
+          setSearch(v);
+          setPage(1);
+        }}
+        searchPlaceholder="Search by code or course..."
+        filters={
+          <Select
+            value={statusFilter}
+            onValueChange={(v) => {
+              setStatusFilter(v as 'all' | EnterpriseClassStatus);
+              setPage(1);
+            }}
+          >
+            <SelectTrigger className="w-44">
+              <SelectValue placeholder="All statuses" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="all">All statuses</SelectItem>
+              <SelectItem value="open">Open</SelectItem>
+              <SelectItem value="ongoing">Ongoing</SelectItem>
+              <SelectItem value="completed">Completed</SelectItem>
+              <SelectItem value="cancelled">Cancelled</SelectItem>
+            </SelectContent>
+          </Select>
+        }
+        pickerPlaceholder="Select a class..."
+        pickerEntityLabel="class"
+        pickerValue={pickerValue}
+        onPickerChange={(value, option) => {
+          setPickerValue(value);
+          setPickerClass(option);
+        }}
+        loadPickerOptions={loadPickerOptions}
+        getPickerOptionValue={(c) => c.courseClassGroupId ?? c.id}
+        getPickerOptionLabel={(c) => c.code ?? c.title ?? String(c.id)}
+        getPickerOptionDescription={(c) => c.courseTitle ?? undefined}
+        renderPickerOption={({ option: c }) => (
+          <div className="flex items-center gap-2 min-w-0">
+            <Avatar
+              className={`size-7 shrink-0 rounded-lg ${getAvatarColor(c.courseTitle ?? '').bg}`}
+            >
+              <AvatarFallback
+                className={`rounded-lg text-xs font-semibold ${getAvatarColor(c.courseTitle ?? '').bg} ${getAvatarColor(c.courseTitle ?? '').text}`}
+              >
+                {getInitials(c.courseTitle ?? c.code ?? '')}
+              </AvatarFallback>
+            </Avatar>
+            <div className="min-w-0">
+              <div className="truncate font-mono text-sm">
+                {c.code ?? c.title ?? '—'}
+              </div>
+              {c.courseTitle && (
+                <div className="truncate text-xs text-muted-foreground">
+                  {c.courseTitle}
+                </div>
+              )}
+            </div>
+          </div>
+        )}
+        onCreateNew={() => setCreateSheetOpen(true)}
+        createLabel="Create new class"
+        onAdd={handleAdd}
+        addLabel="Add"
+        addDisabled={!pickerClass}
+        currentPage={page}
+        pageSize={pageSize}
+        totalItems={total}
+        onPageChange={setPage}
+        onPageSizeChange={(s) => {
+          setPageSize(s);
+          setPage(1);
+        }}
+      >
+        {classes.length === 0 ? (
+          <div className="flex flex-col items-center justify-center py-16 text-center">
+            <CalendarDays className="mb-4 h-10 w-10 text-muted-foreground/30" />
+            <p className="text-sm font-medium text-muted-foreground">
+              No classes found.
+            </p>
+            <p className="mt-1 text-xs text-muted-foreground/60">
+              Adjust the search or status filter to see results.
+            </p>
+          </div>
+        ) : (
+          <div className="rounded-lg border border-border/60">
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead>Class</TableHead>
+                  <TableHead>Status</TableHead>
+                  <TableHead>Period</TableHead>
+                  <TableHead className="text-center">Capacity</TableHead>
+                  <TableHead className="w-10" />
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {classes.map((cls) => (
+                  <TableRow
+                    key={cls.id}
+                    className="cursor-pointer"
+                    onClick={() =>
+                      router.push(
+                        `/lms/classes/${cls.courseClassGroupId ?? cls.id}`
+                      )
+                    }
+                  >
+                    <TableCell>
+                      <div className="flex items-center gap-3">
+                        <Avatar
+                          className={`size-8 rounded-lg ${getAvatarColor(cls.courseTitle ?? '').bg}`}
+                        >
+                          <AvatarFallback
+                            className={`rounded-lg text-xs font-semibold ${getAvatarColor(cls.courseTitle ?? '').bg} ${getAvatarColor(cls.courseTitle ?? '').text}`}
+                          >
+                            {getInitials(cls.courseTitle ?? cls.code ?? '')}
+                          </AvatarFallback>
+                        </Avatar>
+                        <div className="min-w-0">
+                          <p className="font-mono text-sm">
+                            {cls.code ?? cls.title ?? '—'}
+                          </p>
+                          <p className="truncate text-xs text-muted-foreground">
+                            {cls.courseTitle ?? '—'}
+                          </p>
+                        </div>
+                      </div>
+                    </TableCell>
+                    <TableCell>
+                      <Badge
+                        variant={
+                          CLASS_STATUS_VARIANT[
+                            cls.status as EnterpriseClassStatus
+                          ]
+                        }
+                      >
+                        {CLASS_STATUS_LABEL[
+                          cls.status as EnterpriseClassStatus
+                        ] ?? cls.status}
+                      </Badge>
+                    </TableCell>
+                    <TableCell className="text-sm text-muted-foreground">
+                      {cls.startDate
+                        ? formatDate(
+                            cls.startDate,
+                            getSettingValue,
+                            currentLocaleCode
+                          )
+                        : '—'}
+                      {' — '}
+                      {cls.endDate
+                        ? formatDate(
+                            cls.endDate,
+                            getSettingValue,
+                            currentLocaleCode
+                          )
+                        : '—'}
+                    </TableCell>
+                    <TableCell className="text-center text-sm">
+                      {cls.capacity ?? (
+                        <span className="text-muted-foreground">—</span>
+                      )}
+                    </TableCell>
+                    <TableCell
+                      className="flex items-center gap-1"
+                      onClick={(e) => e.stopPropagation()}
+                    >
+                      <Button
+                        variant="ghost"
+                        size="icon"
+                        className="h-8 w-8"
+                        onClick={() =>
+                          router.push(
+                            `/lms/classes/${cls.courseClassGroupId ?? cls.id}`
+                          )
+                        }
+                      >
+                        <SquareArrowOutUpRight className="h-4 w-4" />
+                      </Button>
+                      <Button
+                        variant="ghost"
+                        size="icon"
+                        className="h-8 w-8 text-destructive hover:text-destructive"
+                        onClick={() =>
+                          handleRemove(
+                            cls.courseClassGroupId ?? (cls.id as number)
+                          )
+                        }
+                      >
+                        <Trash2 className="h-4 w-4" />
+                      </Button>
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </div>
+        )}
+      </RelatedTabLayout>
+
+      <EnterpriseClassCreateSheet
+        open={createSheetOpen}
+        onOpenChange={setCreateSheetOpen}
+        enterpriseId={enterpriseId}
+        onCreated={() => {
+          setCreateSheetOpen(false);
+          refetch();
+          onMutate?.();
+        }}
+      />
+    </>
+  );
+}

package/hedhog/frontend/app/enterprise/_components/enterprise-company-identity-card.tsx.ejs

@@ -0,0 +1,112 @@
+'use client';
+
+import { Avatar, AvatarFallback } from '@/components/ui/avatar';
+import { Badge } from '@/components/ui/badge';
+import { Card, CardContent } from '@/components/ui/card';
+import { formatDate } from '@/lib/format-date';
+import { useApp } from '@hed-hog/next-app-provider';
+import { CalendarDays, CheckCircle2, Globe, Link2, Pencil } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import { STATUS_LABEL, STATUS_VARIANT } from './enterprise-detail-constants';
+import { getAvatarColor, getInitials } from './enterprise-detail-utils';
+import type { EnterpriseAccount } from './enterprise-types';
+
+export function CompanyIdentityCard({
+  account,
+  onEditClick,
+}: {
+  account: EnterpriseAccount;
+  onEditClick: () => void;
+}) {
+  const { bg, text } = getAvatarColor(account.name);
+  const { currentLocaleCode, getSettingValue } = useApp();
+  const t = useTranslations('lms.EnterpriseDetailPage');
+
+  return (
+    <Card
+      className="cursor-pointer border-border/60 transition-all hover:border-primary/40 hover:shadow-md"
+      onClick={onEditClick}
+      title={t('identityCard.editTooltip')}
+    >
+      <CardContent className="p-5">
+        <div className="flex flex-col gap-4 sm:flex-row sm:items-start">
+          {/* Avatar */}
+          <Avatar className={`size-16 shrink-0 rounded-2xl ${bg}`}>
+            <AvatarFallback
+              className={`rounded-2xl text-xl font-bold ${bg} ${text}`}
+            >
+              {getInitials(account.name)}
+            </AvatarFallback>
+          </Avatar>
+
+          {/* Identity body */}
+          <div className="min-w-0 flex-1 space-y-2">
+            <div className="flex flex-wrap items-center gap-2">
+              <h2 className="text-lg font-semibold leading-tight">
+                {account.name}
+              </h2>
+              <Badge variant={STATUS_VARIANT[account.status]}>
+                {STATUS_LABEL[account.status]}
+              </Badge>
+              {account.portalEnabled && (
+                <Badge
+                  variant="outline"
+                  className="border-blue-500/20 bg-blue-500/10 text-blue-600"
+                >
+                  <Globe className="mr-1 h-3 w-3" />
+                  Portal
+                </Badge>
+              )}
+            </div>
+
+            <p className="font-mono text-xs text-muted-foreground">
+              {account.slug}
+            </p>
+
+            <div className="flex flex-wrap items-center gap-x-5 gap-y-1 pt-1 text-xs text-muted-foreground">
+              {account.crmAccountId && account.crmAccountName && (
+                <span className="flex items-center gap-1">
+                  <Link2 className="h-3.5 w-3.5 shrink-0" />
+                  <span>
+                    {t('identityCard.empresaLabel')}:{' '}
+                    <span className="font-medium text-foreground">
+                      {account.crmAccountName}
+                    </span>
+                  </span>
+                </span>
+              )}
+              <span className="flex items-center gap-1">
+                <CalendarDays className="h-3.5 w-3.5 shrink-0" />
+                <span>
+                  {t('identityCard.createdLabel')}:{' '}
+                  {formatDate(
+                    account.createdAt,
+                    getSettingValue,
+                    currentLocaleCode
+                  )}
+                </span>
+              </span>
+              <span className="flex items-center gap-1">
+                <CheckCircle2 className="h-3.5 w-3.5 shrink-0" />
+                <span>
+                  {t('identityCard.updatedLabel')}:{' '}
+                  {formatDate(
+                    account.updatedAt,
+                    getSettingValue,
+                    currentLocaleCode
+                  )}
+                </span>
+              </span>
+            </div>
+          </div>
+
+          {/* Edit hint */}
+          <div className="flex shrink-0 items-center gap-1 self-start text-xs text-muted-foreground/40">
+            <Pencil className="h-3.5 w-3.5" />
+            <span>{t('identityCard.editHint')}</span>
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

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

@@ -0,0 +1,183 @@
+'use client';
+
+import { useApp, useQuery } from '@hed-hog/next-app-provider';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useTranslations } from 'next-intl';
+import { useEffect, useMemo, useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { toast } from 'sonner';
+import {
+  CourseFormSheet,
+  DEFAULT_COURSE_FORM_VALUES,
+  getCourseSheetSchema,
+  type CourseCategoryOption,
+  type CourseSheetFormValues,
+} from '../../_components/course-form-sheet';
+
+// ── Helpers ───────────────────────────────────────────────────────────────────
+
+function toApiLevel(level: CourseSheetFormValues['nivel']) {
+  if (level === 'iniciante') return 'beginner';
+  if (level === 'intermediario') return 'intermediate';
+  return 'advanced';
+}
+
+function toApiStatus(status: CourseSheetFormValues['status']) {
+  if (status === 'ativo') return 'published';
+  if (status === 'rascunho') return 'draft';
+  return 'archived';
+}
+
+function getContrastColor(hex: string) {
+  const cleaned = hex.replace('#', '');
+  if (cleaned.length !== 6) return '#FFFFFF';
+  const r = parseInt(cleaned.slice(0, 2), 16);
+  const g = parseInt(cleaned.slice(2, 4), 16);
+  const b = parseInt(cleaned.slice(4, 6), 16);
+  const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
+  return luminance > 0.6 ? '#111827' : '#FFFFFF';
+}
+
+type ApiCategory = {
+  id: number;
+  slug: string;
+  name: string;
+  status?: 'active' | 'inactive';
+};
+
+type ApiCategoryList = {
+  data: ApiCategory[];
+  total: number;
+  page: number;
+  pageSize: number;
+};
+
+type ApiCreatedCourse = {
+  id: number;
+  title: string;
+  slug: string;
+  status: string;
+  level: string | null;
+};
+
+// ── Props ─────────────────────────────────────────────────────────────────────
+
+export interface EnterpriseCourseCreateSheetProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  enterpriseId: number;
+  onCreated?: () => void;
+}
+
+// ── Component ─────────────────────────────────────────────────────────────────
+
+export function EnterpriseCourseCreateSheet({
+  open,
+  onOpenChange,
+  enterpriseId,
+  onCreated,
+}: EnterpriseCourseCreateSheetProps) {
+  const t = useTranslations('lms.CoursesPage');
+  const { request } = useApp();
+  const [saving, setSaving] = useState(false);
+
+  const form = useForm<CourseSheetFormValues>({
+    resolver: zodResolver(getCourseSheetSchema(t)),
+    defaultValues: DEFAULT_COURSE_FORM_VALUES,
+  });
+
+  // Reset form when opening fresh
+  useEffect(() => {
+    if (open) form.reset(DEFAULT_COURSE_FORM_VALUES);
+  }, [open, form]);
+
+  const { data: categoryListData, refetch: refetchCategories } =
+    useQuery<ApiCategoryList>({
+      queryKey: ['enterprise-course-create-categories'],
+      queryFn: async () => {
+        const res = await request<ApiCategoryList>({
+          url: '/category',
+          method: 'GET',
+          params: { page: 1, pageSize: 500, status: 'all' },
+        });
+        const payload = res.data as ApiCategoryList | ApiCategory[];
+        if (Array.isArray(payload)) {
+          return {
+            data: payload,
+            total: payload.length,
+            page: 1,
+            pageSize: payload.length,
+          };
+        }
+        return payload;
+      },
+      initialData: { data: [], total: 0, page: 1, pageSize: 500 },
+    });
+
+  // Load categories when sheet opens
+  useEffect(() => {
+    if (open) void refetchCategories();
+  }, [open, refetchCategories]);
+
+  const categoryOptions = useMemo<CourseCategoryOption[]>(
+    () =>
+      (categoryListData?.data ?? [])
+        .filter((c) => !!c.slug)
+        .map((c) => ({ value: c.slug, label: c.name || c.slug }))
+        .sort((a, b) => a.label.localeCompare(b.label)),
+    [categoryListData]
+  );
+
+  async function onSubmit(data: CourseSheetFormValues) {
+    setSaving(true);
+    try {
+      const payload = {
+        slug: data.nomeInterno.trim(),
+        title: data.tituloComercial,
+        description: data.descricao,
+        level: toApiLevel(data.nivel),
+        status: toApiStatus(data.status),
+        categorySlugs: data.categorias,
+        primaryColor: data.primaryColor,
+        primaryContrastColor: getContrastColor(data.primaryColor),
+        secondaryColor: data.secondaryColor,
+        secondaryContrastColor: getContrastColor(data.secondaryColor),
+      };
+
+      const response = await request<ApiCreatedCourse>({
+        url: '/lms/courses',
+        method: 'POST',
+        data: payload,
+      });
+
+      const created = response.data;
+
+      await request({
+        url: `/lms/enterprise/${enterpriseId}/courses`,
+        method: 'POST',
+        data: { course_id: created.id },
+      });
+
+      toast.success(t('toasts.courseCreated'));
+      onCreated?.();
+      onOpenChange(false);
+    } catch {
+      toast.error('Não foi possível criar o curso.');
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  return (
+    <CourseFormSheet
+      open={open}
+      onOpenChange={onOpenChange}
+      editing={false}
+      saving={saving}
+      form={form}
+      onSubmit={onSubmit}
+      categories={categoryOptions}
+      t={t}
+    />
+  );
+}