@hed-hog/lms 0.0.365 → 0.0.370

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

@@ -0,0 +1,264 @@
+'use client';
+
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { useApp, useQuery } from '@hed-hog/next-app-provider';
+import {
+  addMonths,
+  addDays,
+  eachDayOfInterval,
+  format,
+  isAfter,
+  isBefore,
+  isSameDay,
+  isSameMonth,
+  isToday,
+  parseISO,
+  startOfMonth,
+  startOfWeek,
+  subMonths,
+} from 'date-fns';
+import { ptBR } from 'date-fns/locale/pt-BR';
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+import { useLocale, useTranslations } from 'next-intl';
+import { useMemo, useState } from 'react';
+import { useRouter } from 'next/navigation';
+import type { EnterpriseClass } from './enterprise-types';
+
+const STATUS_COLORS: Record<string, string> = {
+  open: 'bg-amber-100 text-amber-800 dark:bg-amber-900/40 dark:text-amber-300',
+  ongoing:
+    'bg-emerald-100 text-emerald-800 dark:bg-emerald-900/40 dark:text-emerald-300',
+  completed:
+    'bg-blue-100 text-blue-800 dark:bg-blue-900/40 dark:text-blue-300',
+  cancelled:
+    'bg-muted text-muted-foreground line-through',
+};
+
+const DAY_HEADERS_PT = ['Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sáb', 'Dom'];
+const DAY_HEADERS_EN = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
+
+function parseDate(value: string | null | undefined): Date | null {
+  if (!value) return null;
+  try {
+    const d = parseISO(String(value).slice(0, 10));
+    return isNaN(d.getTime()) ? null : d;
+  } catch {
+    return null;
+  }
+}
+
+function isClassActiveOnDay(
+  cls: EnterpriseClass,
+  day: Date
+): boolean {
+  const start = parseDate(cls.startDate);
+  const end = parseDate(cls.endDate);
+  if (!start) return false;
+  const dayStart = new Date(day.getFullYear(), day.getMonth(), day.getDate());
+  const startDay = new Date(start.getFullYear(), start.getMonth(), start.getDate());
+  const endDay = end
+    ? new Date(end.getFullYear(), end.getMonth(), end.getDate())
+    : startDay;
+  return (
+    (isSameDay(dayStart, startDay) || isAfter(dayStart, startDay)) &&
+    (isSameDay(dayStart, endDay) || isBefore(dayStart, endDay))
+  );
+}
+
+export function ClassesCalendarTab({
+  enterpriseId,
+}: {
+  enterpriseId: number;
+}) {
+  const { request } = useApp();
+  const router = useRouter();
+  const locale = useLocale();
+  const t = useTranslations('lms.EnterpriseDetailPage');
+  const dateLocale = locale.startsWith('pt') ? ptBR : undefined;
+  const dayHeaders = locale.startsWith('pt') ? DAY_HEADERS_PT : DAY_HEADERS_EN;
+
+  const [currentDate, setCurrentDate] = useState(() => new Date());
+  const [selectedDay, setSelectedDay] = useState<Date | null>(null);
+
+  const { data, isLoading } = useQuery<{ data: EnterpriseClass[] }>({
+    queryKey: ['enterprise-classes-calendar', enterpriseId],
+    queryFn: async () =>
+      request<{ data: EnterpriseClass[] }>({
+        url: `/lms/enterprise/${enterpriseId}/classes?page=1&pageSize=500`,
+        method: 'GET',
+      }).then((r) => r.data),
+  });
+
+  const classes = useMemo(() => data?.data ?? [], [data]);
+
+  const monthStart = startOfMonth(currentDate);
+  const gridStart = startOfWeek(monthStart, { weekStartsOn: 1 });
+  const days = eachDayOfInterval({ start: gridStart, end: addDays(gridStart, 41) });
+
+  const getClassesForDay = (day: Date) =>
+    classes.filter((cls) => isClassActiveOnDay(cls, day));
+
+  const selectedDayClasses = selectedDay ? getClassesForDay(selectedDay) : [];
+
+  const monthLabel = format(
+    currentDate,
+    locale.startsWith('pt') ? "MMMM 'de' yyyy" : 'MMMM yyyy',
+    { locale: dateLocale }
+  );
+
+  return (
+    <div className="space-y-4 pb-6">
+      {/* Month navigation */}
+      <div className="flex items-center justify-between rounded-xl border bg-muted/20 px-3 py-2">
+        <button
+          type="button"
+          onClick={() => { setCurrentDate((d) => subMonths(d, 1)); setSelectedDay(null); }}
+          className="flex size-8 items-center justify-center rounded-full text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
+          aria-label="Mês anterior"
+        >
+          <ChevronLeft className="size-4" />
+        </button>
+        <span className="text-sm font-semibold capitalize">{monthLabel}</span>
+        <button
+          type="button"
+          onClick={() => { setCurrentDate((d) => addMonths(d, 1)); setSelectedDay(null); }}
+          className="flex size-8 items-center justify-center rounded-full text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
+          aria-label="Próximo mês"
+        >
+          <ChevronRight className="size-4" />
+        </button>
+      </div>
+
+      {/* Day headers */}
+      <div className="grid grid-cols-7 text-center">
+        {dayHeaders.map((h) => (
+          <div key={h} className="pb-1 text-[10px] font-semibold uppercase tracking-wide text-muted-foreground">
+            {h}
+          </div>
+        ))}
+      </div>
+
+      {/* Calendar grid */}
+      {isLoading ? (
+        <div className="grid grid-cols-7 gap-px">
+          {Array.from({ length: 42 }).map((_, i) => (
+            <div key={i} className="h-16 animate-pulse rounded bg-muted/30" />
+          ))}
+        </div>
+      ) : (
+        <div className="grid grid-cols-7 gap-px rounded-lg border bg-border/40 overflow-hidden">
+          {days.map((day) => {
+            const dayClasses = getClassesForDay(day);
+            const isCurrentMonth = isSameMonth(day, currentDate);
+            const isSelected = selectedDay ? isSameDay(day, selectedDay) : false;
+            const todayDay = isToday(day);
+
+            return (
+              <button
+                key={day.toISOString()}
+                type="button"
+                onClick={() => setSelectedDay(isSelected ? null : day)}
+                className={[
+                  'flex min-h-16 flex-col gap-0.5 bg-background p-1 text-left transition-colors hover:bg-muted/40',
+                  !isCurrentMonth && 'opacity-40',
+                  isSelected && 'ring-2 ring-inset ring-primary',
+                ].filter(Boolean).join(' ')}
+              >
+                <span
+                  className={[
+                    'flex size-5 items-center justify-center self-end rounded-full text-[11px] font-medium',
+                    todayDay
+                      ? 'bg-primary text-primary-foreground'
+                      : 'text-foreground',
+                  ].join(' ')}
+                >
+                  {format(day, 'd')}
+                </span>
+                <div className="flex min-h-0 flex-col gap-0.5 overflow-hidden">
+                  {dayClasses.slice(0, 3).map((cls) => (
+                    <span
+                      key={cls.id}
+                      className={[
+                        'truncate rounded px-1 text-[9px] font-medium leading-4',
+                        STATUS_COLORS[cls.status] ?? STATUS_COLORS.open,
+                      ].join(' ')}
+                    >
+                      {cls.courseTitle ?? cls.title ?? `#${cls.id}`}
+                    </span>
+                  ))}
+                  {dayClasses.length > 3 && (
+                    <span className="px-1 text-[9px] text-muted-foreground">
+                      +{dayClasses.length - 3}
+                    </span>
+                  )}
+                </div>
+              </button>
+            );
+          })}
+        </div>
+      )}
+
+      {/* Selected day detail */}
+      {selectedDay && (
+        <div className="space-y-2 rounded-xl border bg-muted/20 p-3">
+          <p className="text-xs font-semibold text-muted-foreground">
+            {format(selectedDay, locale.startsWith('pt') ? "d 'de' MMMM" : 'MMMM d', { locale: dateLocale })}
+          </p>
+          {selectedDayClasses.length === 0 ? (
+            <p className="text-sm text-muted-foreground">Nenhuma turma neste dia.</p>
+          ) : (
+            <div className="space-y-1.5">
+              {selectedDayClasses.map((cls) => (
+                <button
+                  key={cls.id}
+                  type="button"
+                  onClick={() => router.push(`/lms/classes/${cls.id}`)}
+                  className="flex w-full items-center gap-3 rounded-lg border bg-background px-3 py-2 text-left transition-colors hover:bg-muted/50"
+                >
+                  <div className="min-w-0 flex-1">
+                    <p className="truncate text-sm font-medium">
+                      {cls.courseTitle ?? cls.title ?? `Turma #${cls.id}`}
+                    </p>
+                    <p className="truncate text-xs text-muted-foreground">
+                      {[cls.code, cls.instructorName].filter(Boolean).join(' • ')}
+                    </p>
+                  </div>
+                  <div className="flex shrink-0 flex-col items-end gap-1">
+                    <Badge
+                      variant="outline"
+                      className={['text-[10px] px-1.5 py-0', STATUS_COLORS[cls.status]].join(' ')}
+                    >
+                      {cls.status}
+                    </Badge>
+                    {cls.capacity != null && (
+                      <span className="text-[10px] text-muted-foreground">
+                        {cls.enrolledCount}/{cls.capacity}
+                      </span>
+                    )}
+                  </div>
+                </button>
+              ))}
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* Legend */}
+      <div className="flex flex-wrap gap-3">
+        {Object.entries({
+          open: 'Aberta',
+          ongoing: 'Em andamento',
+          completed: 'Concluída',
+          cancelled: 'Cancelada',
+        }).map(([status, label]) => (
+          <div key={status} className="flex items-center gap-1.5">
+            <span className={['rounded px-1.5 py-0.5 text-[10px] font-medium', STATUS_COLORS[status]].join(' ')}>
+              {label}
+            </span>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

package/hedhog/frontend/app/enterprise/page.tsx.ejs

@@ -22,7 +22,14 @@ import {
   TableRow,
 } from '@/components/ui/table';
 import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '@/components/ui/tooltip';
 import { useDebounce } from '@/hooks/use-debounce';
+import { usePersistedPageSize } from '@/hooks/use-persisted-page-size';
 import { formatDate } from '@/lib/format-date';
 import { useApp, useQuery } from '@hed-hog/next-app-provider';
 import {
@@ -51,7 +58,7 @@ const VIEW_STORAGE_KEY = 'lms-enterprise-view-mode';
 
 // ── Constants ─────────────────────────────────────────────────────────────────
 
-const PAGE_SIZE = 12;
+const DEFAULT_PAGE_SIZES = [6, 12, 24, 48, 96] as const;
 
 const STATUS_VARIANT: Record<
   EnterpriseStatus,
@@ -90,6 +97,45 @@ export default function EnterprisePage() {
   const debouncedSearch = useDebounce(search);
   const { request, currentLocaleCode, getSettingValue } = useApp();
 
+  const { data: generalSettings } = useQuery<{
+    data: Array<{ slug: string; value: string }>;
+  }>({
+    queryKey: ['setting-group-general'],
+    queryFn: async () => {
+      const response = await request<{
+        data: Array<{ slug: string; value: string }>;
+      }>({
+        url: '/setting/group/general',
+        method: 'GET',
+      });
+      return response.data;
+    },
+    staleTime: 5 * 60 * 1000,
+  });
+
+  const pageSizeOptions = useMemo(() => {
+    const setting = generalSettings?.data?.find(
+      (s) => s.slug === 'pagination-page-sizes'
+    );
+    if (!setting?.value) return DEFAULT_PAGE_SIZES;
+    try {
+      const parsed = JSON.parse(setting.value) as string[];
+      const sizes = parsed
+        .map(Number)
+        .filter((n) => !isNaN(n) && n > 0)
+        .sort((a, b) => a - b);
+      return sizes.length > 0 ? sizes : DEFAULT_PAGE_SIZES;
+    } catch {
+      return DEFAULT_PAGE_SIZES;
+    }
+  }, [generalSettings]);
+
+  const [pageSize, setPageSize] = usePersistedPageSize({
+    storageKey: 'pagination:global:pageSize',
+    defaultValue: 12,
+    allowedValues: pageSizeOptions,
+  });
+
   type EnterpriseListResponse = {
     data: EnterpriseAccount[];
     total: number;
@@ -112,7 +158,7 @@ export default function EnterprisePage() {
     queryKey: [
       'lms-enterprise',
       page,
-      PAGE_SIZE,
+      pageSize,
       debouncedSearch,
       statusFilter,
       crmFilter,
@@ -120,7 +166,7 @@ export default function EnterprisePage() {
     queryFn: async () => {
       const params = new URLSearchParams();
       params.set('page', String(page));
-      params.set('pageSize', String(PAGE_SIZE));
+      params.set('pageSize', String(pageSize));
       if (debouncedSearch) params.set('search', debouncedSearch);
       if (statusFilter !== 'all') params.set('status', statusFilter);
       if (crmFilter !== 'all') params.set('crmPersonId', crmFilter);
@@ -335,47 +381,56 @@ export default function EnterprisePage() {
 
       <KpiCardsGrid items={kpiItems} />
 
-      <div className="flex flex-col gap-4 xl:flex-row xl:items-center">
-        <div className="flex-1">
-          <SearchBar
-            searchQuery={search}
-            onSearchChange={handleSearch}
-            onSearch={() => {}}
-            placeholder={t('filters.searchPlaceholder')}
-            controls={controls}
-          />
-        </div>
-        <div className="flex items-center gap-3">
-          <span className="text-xs font-medium text-muted-foreground">
-            {t.has('view.label') ? t('view.label') : 'View'}
-          </span>
-          <ToggleGroup
-            type="single"
-            value={viewMode}
-            onValueChange={handleViewModeChange}
-            variant="outline"
-            size="sm"
-            aria-label={
-              t.has('view.modeAriaLabel')
-                ? t('view.modeAriaLabel')
-                : 'View mode'
-            }
-          >
-            <ToggleGroupItem value="table" className="gap-1.5 px-2.5">
-              <List className="h-4 w-4" />
-              <span className="hidden sm:inline">
-                {t.has('view.table') ? t('view.table') : 'Table'}
-              </span>
-            </ToggleGroupItem>
-            <ToggleGroupItem value="cards" className="gap-1.5 px-2.5">
-              <LayoutGrid className="h-4 w-4" />
-              <span className="hidden sm:inline">
-                {t.has('view.cards') ? t('view.cards') : 'Cards'}
-              </span>
-            </ToggleGroupItem>
-          </ToggleGroup>
-        </div>
-      </div>
+      <SearchBar
+        searchQuery={search}
+        onSearchChange={handleSearch}
+        onSearch={() => {}}
+        placeholder={t('filters.searchPlaceholder')}
+        controls={controls}
+        actions={
+          <TooltipProvider>
+            <ToggleGroup
+              type="single"
+              value={viewMode}
+              onValueChange={handleViewModeChange}
+              variant="outline"
+              size="sm"
+              aria-label={
+                t.has('view.modeAriaLabel') ? t('view.modeAriaLabel') : 'View mode'
+              }
+            >
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <ToggleGroupItem
+                    value="table"
+                    className="cursor-pointer"
+                    aria-label={t.has('view.table') ? t('view.table') : 'Table'}
+                  >
+                    <List className="h-4 w-4" />
+                  </ToggleGroupItem>
+                </TooltipTrigger>
+                <TooltipContent>
+                  {t.has('view.table') ? t('view.table') : 'Table'}
+                </TooltipContent>
+              </Tooltip>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <ToggleGroupItem
+                    value="cards"
+                    className="cursor-pointer"
+                    aria-label={t.has('view.cards') ? t('view.cards') : 'Cards'}
+                  >
+                    <LayoutGrid className="h-4 w-4" />
+                  </ToggleGroupItem>
+                </TooltipTrigger>
+                <TooltipContent>
+                  {t.has('view.cards') ? t('view.cards') : 'Cards'}
+                </TooltipContent>
+              </Tooltip>
+            </ToggleGroup>
+          </TooltipProvider>
+        }
+      />
 
       {accounts.length === 0 && !isLoading ? (
         <EmptyState
@@ -633,12 +688,14 @@ export default function EnterprisePage() {
 
       <PaginationFooter
         currentPage={page}
-        pageSize={PAGE_SIZE}
+        pageSize={pageSize}
         totalItems={totalItems}
         onPageChange={setPage}
-        onPageSizeChange={function (): void {
-          throw new Error('Function not implemented.');
+        onPageSizeChange={(next) => {
+          setPageSize(next);
+          setPage(1);
         }}
+        pageSizeOptions={pageSizeOptions}
       />
 
       <EnterpriseSheet

package/hedhog/frontend/app/exams/page.tsx.ejs

@@ -213,7 +213,7 @@ function toNumberOrFallback(value: unknown, fallback: number) {
 
 // ── Constants ─────────────────────────────────────────────────────────────────
 
-const PAGE_SIZES = [6, 12, 24];
+const DEFAULT_PAGE_SIZES = [6, 12, 24, 48, 96] as const;
 
 function formatTempo(minutos: number) {
   if (minutos < 60) return `${minutos}min`;
@@ -263,10 +263,44 @@ export default function ExamesPage() {
 
   // Pagination
   const [currentPage, setCurrentPage] = useState(1);
+
+  const { data: generalSettings } = useQuery<{
+    data: Array<{ slug: string; value: string }>;
+  }>({
+    queryKey: ['setting-group-general'],
+    queryFn: async () => {
+      const response = await request<{
+        data: Array<{ slug: string; value: string }>;
+      }>({
+        url: '/setting/group/general',
+        method: 'GET',
+      });
+      return response.data;
+    },
+    staleTime: 5 * 60 * 1000,
+  });
+
+  const pageSizeOptions = useMemo(() => {
+    const setting = generalSettings?.data?.find(
+      (s) => s.slug === 'pagination-page-sizes'
+    );
+    if (!setting?.value) return DEFAULT_PAGE_SIZES;
+    try {
+      const parsed = JSON.parse(setting.value) as string[];
+      const sizes = parsed
+        .map(Number)
+        .filter((n) => !isNaN(n) && n > 0)
+        .sort((a, b) => a - b);
+      return sizes.length > 0 ? sizes : DEFAULT_PAGE_SIZES;
+    } catch {
+      return DEFAULT_PAGE_SIZES;
+    }
+  }, [generalSettings]);
+
   const [pageSize, setPageSize] = usePersistedPageSize({
     storageKey: 'pagination:global:pageSize',
     defaultValue: 12,
-    allowedValues: PAGE_SIZES,
+    allowedValues: pageSizeOptions,
   });
 
   const form = useForm<ExameForm>({
@@ -654,7 +688,7 @@ export default function ExamesPage() {
               ],
             },
           ]}
-          afterSearchButton={
+          actions={
             <ViewModeToggle
               viewMode={viewMode}
               onViewModeChange={setViewMode}
@@ -1037,7 +1071,7 @@ export default function ExamesPage() {
               setPageSize(nextPageSize);
               setCurrentPage(1);
             }}
-            pageSizeOptions={PAGE_SIZES}
+            pageSizeOptions={pageSizeOptions}
           />
         </div>
       )}