@hed-hog/lms 0.0.365 → 0.0.366

package/hedhog/frontend/app/certificates/models/page.tsx.ejs

@@ -7,6 +7,7 @@ import {
   PageHeader,
   PaginationFooter,
   SearchBar,
+  ViewModeToggle,
 } from '@/components/entity-list';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
@@ -38,8 +39,17 @@ import {
   SheetTitle,
 } from '@/components/ui/sheet';
 import { Skeleton } from '@/components/ui/skeleton';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
 import { Textarea } from '@/components/ui/textarea';
 import { usePersistedPageSize } from '@/hooks/use-persisted-page-size';
+import { usePersistedViewMode } from '@/hooks/use-persisted-view-mode';
 import { useApp, useQuery } from '@hed-hog/next-app-provider';
 import { zodResolver } from '@hookform/resolvers/zod';
 import {
@@ -96,7 +106,8 @@ type UpdateCertificateTemplatePayload = {
   status: TemplateStatus;
 };
 
-const PAGE_SIZES = [6, 12, 24];
+const DEFAULT_PAGE_SIZES = [6, 12, 24, 48, 96] as const;
+type ViewMode = 'cards' | 'list';
 
 const createTemplateSchema = (t: (key: string) => string) =>
   z.object({
@@ -140,10 +151,49 @@ export default function ModelsPage() {
   const [searchQuery, setSearchQuery] = useState('');
   const [statusFilter, setStatusFilter] = useState<StatusFilter>('all');
   const [currentPage, setCurrentPage] = useState(1);
+  const [viewMode, setViewMode] = usePersistedViewMode<ViewMode>({
+    storageKey: 'lms:certificate-models:view-mode',
+    defaultValue: 'cards',
+    allowedValues: ['cards', 'list'],
+  });
+
+  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 [isSheetOpen, setIsSheetOpen] = useState(false);
   const [isEditSheetOpen, setIsEditSheetOpen] = useState(false);
@@ -540,6 +590,14 @@ export default function ModelsPage() {
                 ],
               },
             ]}
+            actions={
+              <ViewModeToggle
+                viewMode={viewMode}
+                onViewModeChange={setViewMode}
+                listLabel={t('viewMode.list')}
+                cardsLabel={t('viewMode.cards')}
+              />
+            }
           />
 
           <div className="flex items-center justify-between gap-3">
@@ -567,31 +625,67 @@ export default function ModelsPage() {
         </div>
 
         {loading ? (
-          <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
-            {Array.from({ length: 6 }).map((_, index) => (
-              <Card
-                key={index}
-                className="overflow-hidden border-border/70 py-0"
-              >
-                <div className="h-1 w-full bg-linear-to-r from-slate-300/70 via-slate-200 to-transparent" />
-                <CardContent className="space-y-4 p-5">
-                  <div className="flex items-center gap-2">
-                    <Skeleton className="h-6 w-24 rounded-full" />
-                    <Skeleton className="h-6 w-20 rounded-full" />
-                  </div>
-                  <div>
-                    <Skeleton className="mb-2 h-5 w-3/4" />
-                    <Skeleton className="h-4 w-1/2" />
-                  </div>
-                  <div className="grid grid-cols-2 gap-3">
-                    <Skeleton className="h-14 w-full rounded-xl" />
-                    <Skeleton className="h-14 w-full rounded-xl" />
-                  </div>
-                  <Skeleton className="h-9 w-36 rounded-md" />
-                </CardContent>
-              </Card>
-            ))}
-          </div>
+          viewMode === 'cards' ? (
+            <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+              {Array.from({ length: 6 }).map((_, index) => (
+                <Card
+                  key={index}
+                  className="overflow-hidden border-border/70 py-0"
+                >
+                  <div className="h-1 w-full bg-linear-to-r from-slate-300/70 via-slate-200 to-transparent" />
+                  <CardContent className="space-y-4 p-5">
+                    <div className="flex items-center gap-2">
+                      <Skeleton className="h-6 w-24 rounded-full" />
+                      <Skeleton className="h-6 w-20 rounded-full" />
+                    </div>
+                    <div>
+                      <Skeleton className="mb-2 h-5 w-3/4" />
+                      <Skeleton className="h-4 w-1/2" />
+                    </div>
+                    <div className="grid grid-cols-2 gap-3">
+                      <Skeleton className="h-14 w-full rounded-xl" />
+                      <Skeleton className="h-14 w-full rounded-xl" />
+                    </div>
+                    <Skeleton className="h-9 w-36 rounded-md" />
+                  </CardContent>
+                </Card>
+              ))}
+            </div>
+          ) : (
+            <div className="overflow-hidden rounded-xl border border-border/70">
+              <Table>
+                <TableHeader>
+                  <TableRow>
+                    <TableHead>{t('table.name')}</TableHead>
+                    <TableHead>{t('table.status')}</TableHead>
+                    <TableHead>{t('table.updatedAt')}</TableHead>
+                    <TableHead className="w-12" />
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {Array.from({ length: 6 }).map((_, i) => (
+                    <TableRow key={i}>
+                      <TableCell>
+                        <div className="space-y-1.5">
+                          <Skeleton className="h-4 w-48" />
+                          <Skeleton className="h-3 w-32" />
+                        </div>
+                      </TableCell>
+                      <TableCell>
+                        <Skeleton className="h-5 w-20 rounded-full" />
+                      </TableCell>
+                      <TableCell>
+                        <Skeleton className="h-4 w-24" />
+                      </TableCell>
+                      <TableCell>
+                        <Skeleton className="ml-auto size-8 rounded-md" />
+                      </TableCell>
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+            </div>
+          )
         ) : totalItems === 0 ? (
           <EmptyState
             icon={<Files className="size-12 text-muted-foreground/40" />}
@@ -602,7 +696,7 @@ export default function ModelsPage() {
             onAction={openCreateSheet}
             className="py-20"
           />
-        ) : (
+        ) : viewMode === 'cards' ? (
           <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
             {templates.map((template) => (
               <Card
@@ -684,6 +778,65 @@ export default function ModelsPage() {
               </Card>
             ))}
           </div>
+        ) : (
+          <div className="overflow-hidden rounded-xl border border-border/70">
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead>{t('table.name')}</TableHead>
+                  <TableHead>{t('table.status')}</TableHead>
+                  <TableHead>{t('table.updatedAt')}</TableHead>
+                  <TableHead className="w-12" />
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {templates.map((template) => (
+                  <TableRow
+                    key={template.id}
+                    className="cursor-pointer"
+                    onClick={() => handleCardClick(template)}
+                  >
+                    <TableCell>
+                      <p className="font-semibold text-foreground">
+                        {template.name}
+                      </p>
+                      <p className="font-mono text-xs text-muted-foreground">
+                        {template.slug}
+                      </p>
+                    </TableCell>
+                    <TableCell>{renderStatusBadge(template.status)}</TableCell>
+                    <TableCell className="text-sm text-muted-foreground">
+                      {formatDate(resolveUpdatedAt(template))}
+                    </TableCell>
+                    <TableCell onClick={(e) => e.stopPropagation()}>
+                      <IconActionGroup
+                        className="ml-auto"
+                        actions={[
+                          {
+                            key: 'editor',
+                            label: t('cards.actions.editTemplate'),
+                            icon: <FileEdit className="size-4" />,
+                            onClick: () =>
+                              router.push(
+                                `/lms/certificates/models/editor?templateId=${template.id}`
+                              ),
+                          },
+                          {
+                            key: 'delete',
+                            label: t('cards.actions.deleteTemplate'),
+                            icon: <Trash2 className="size-4" />,
+                            onClick: () => onDeleteTemplate(template),
+                            destructive: true,
+                            disabled: deletingTemplateId === template.id,
+                          },
+                        ]}
+                      />
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </div>
         )}
 
         {!loading && totalItems > 0 ? (
@@ -696,7 +849,7 @@ export default function ModelsPage() {
               setPageSize(value);
               setCurrentPage(1);
             }}
-            pageSizeOptions={PAGE_SIZES}
+            pageSizeOptions={pageSizeOptions}
           />
         ) : null}
       </div>

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

@@ -0,0 +1,277 @@
+'use client';
+
+import { Badge } from '@/components/ui/badge';
+import {
+  addDays,
+  addMonths,
+  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 } from 'next-intl';
+import { useState } from 'react';
+import { useRouter } from 'next/navigation';
+
+interface Turma {
+  id: number;
+  codigo: string;
+  curso: string;
+  dataInicio: string;
+  dataFim: string;
+  status: 'aberta' | 'em_andamento' | 'concluida' | 'cancelada';
+  professor: string;
+  vagas: number;
+  matriculados: number;
+}
+
+const STATUS_COLORS: Record<string, string> = {
+  aberta:
+    'bg-amber-100 text-amber-800 dark:bg-amber-900/40 dark:text-amber-300',
+  em_andamento:
+    'bg-emerald-100 text-emerald-800 dark:bg-emerald-900/40 dark:text-emerald-300',
+  concluida:
+    'bg-blue-100 text-blue-800 dark:bg-blue-900/40 dark:text-blue-300',
+  cancelada: 'bg-muted text-muted-foreground line-through',
+};
+
+const STATUS_LABELS: Record<string, string> = {
+  aberta: 'Aberta',
+  em_andamento: 'Em andamento',
+  concluida: 'Concluída',
+  cancelada: 'Cancelada',
+};
+
+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 isTurmaActiveOnDay(turma: Turma, day: Date): boolean {
+  const start = parseDate(turma.dataInicio);
+  const end = parseDate(turma.dataFim);
+  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 ClassesCalendarView({ turmas }: { turmas: Turma[] }) {
+  const router = useRouter();
+  const locale = useLocale();
+  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 monthStart = startOfMonth(currentDate);
+  const gridStart = startOfWeek(monthStart, { weekStartsOn: 1 });
+  const days = eachDayOfInterval({
+    start: gridStart,
+    end: addDays(gridStart, 41),
+  });
+
+  const getTurmasForDay = (day: Date) =>
+    turmas.filter((t) => isTurmaActiveOnDay(t, day));
+
+  const selectedDayTurmas = selectedDay ? getTurmasForDay(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 */}
+      <div className="grid grid-cols-7 gap-px overflow-hidden rounded-lg border bg-border/40">
+        {days.map((day) => {
+          const dayTurmas = getTurmasForDay(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">
+                {dayTurmas.slice(0, 3).map((turma) => (
+                  <span
+                    key={turma.id}
+                    className={[
+                      'truncate rounded px-1 text-[9px] font-medium leading-4',
+                      STATUS_COLORS[turma.status] ?? STATUS_COLORS.aberta,
+                    ].join(' ')}
+                  >
+                    {turma.curso}
+                  </span>
+                ))}
+                {dayTurmas.length > 3 && (
+                  <span className="px-1 text-[9px] text-muted-foreground">
+                    +{dayTurmas.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>
+          {selectedDayTurmas.length === 0 ? (
+            <p className="text-sm text-muted-foreground">
+              Nenhuma turma neste dia.
+            </p>
+          ) : (
+            <div className="space-y-1.5">
+              {selectedDayTurmas.map((turma) => (
+                <button
+                  key={turma.id}
+                  type="button"
+                  onClick={() => router.push(`/lms/classes/${turma.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">{turma.curso}</p>
+                    <p className="truncate text-xs text-muted-foreground">
+                      {[turma.codigo, turma.professor !== '-' ? turma.professor : null]
+                        .filter(Boolean)
+                        .join(' • ')}
+                    </p>
+                  </div>
+                  <div className="flex shrink-0 flex-col items-end gap-1">
+                    <Badge
+                      variant="outline"
+                      className={[
+                        'px-1.5 py-0 text-[10px]',
+                        STATUS_COLORS[turma.status],
+                      ].join(' ')}
+                    >
+                      {STATUS_LABELS[turma.status] ?? turma.status}
+                    </Badge>
+                    <span className="text-[10px] text-muted-foreground">
+                      {turma.matriculados}/{turma.vagas}
+                    </span>
+                  </div>
+                </button>
+              ))}
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* Legend */}
+      <div className="flex flex-wrap gap-3">
+        {Object.entries(STATUS_LABELS).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>
+  );
+}