@hed-hog/lms 0.0.365 → 0.0.370

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>
+  );
+}

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

@@ -7,8 +7,17 @@ import {
   PageHeader,
   PaginationFooter,
   SearchBar,
-  ViewModeToggle,
 } from '@/components/entity-list';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '@/components/ui/tooltip';
+import {
+  ToggleGroup,
+  ToggleGroupItem,
+} from '@/components/ui/toggle-group';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent } from '@/components/ui/card';
@@ -39,10 +48,13 @@ import { motion } from 'framer-motion';
 import {
   AlertTriangle,
   BarChart3,
+  CalendarDays,
   CalendarIcon,
   Clock,
   Eye,
+  LayoutGrid,
   Laptop,
+  List,
   Loader2,
   MapPin,
   Monitor,
@@ -59,6 +71,7 @@ import { useRouter } from 'next/navigation';
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { toast } from 'sonner';
 import { ClassFormSheet } from '../_components/class-form-sheet';
+import { ClassesCalendarView } from './_components/classes-calendar-view';
 
 // ── Types ─────────────────────────────────────────────────────────────────────
 
@@ -229,7 +242,7 @@ function mapApiClass(item: ApiClass): Turma {
   };
 }
 
-type ViewMode = 'cards' | 'list';
+type ViewMode = 'cards' | 'list' | 'calendar';
 
 // ── Constants ─────────────────────────────────────────────────────────────────
 
@@ -269,7 +282,7 @@ const TIPO_ICON: Record<string, LucideIcon> = {
   hibrida: Laptop,
 };
 
-const PAGE_SIZES = [6, 12, 24];
+const DEFAULT_PAGE_SIZES = [6, 12, 24, 48, 96] as const;
 
 // ── Animations ────────────────────────────────────────────────────────────────
 
@@ -306,15 +319,49 @@ export default function TurmasPage() {
   const [viewMode, setViewMode] = usePersistedViewMode<ViewMode>({
     storageKey: 'lms:classes:view-mode',
     defaultValue: 'cards',
-    allowedValues: ['cards', 'list'],
+    allowedValues: ['cards', 'list', 'calendar'],
   });
 
   // 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 { data: coursesResponse } = useQuery<ApiCourseList>({
@@ -333,6 +380,9 @@ export default function TurmasPage() {
     },
   });
 
+  const effectivePage = viewMode === 'calendar' ? 1 : currentPage;
+  const effectivePageSize = viewMode === 'calendar' ? 500 : pageSize;
+
   const {
     data: classesResponse,
     refetch: refetchClasses,
@@ -341,8 +391,8 @@ export default function TurmasPage() {
   } = useQuery<ApiClassList>({
     queryKey: [
       'lms-classes-list',
-      currentPage,
-      pageSize,
+      effectivePage,
+      effectivePageSize,
       buscaDebounced,
       filtroStatusInput,
       filtroTipoInput,
@@ -359,8 +409,8 @@ export default function TurmasPage() {
         url: '/lms/classes',
         method: 'GET',
         params: {
-          page: currentPage,
-          pageSize,
+          page: effectivePage,
+          pageSize: effectivePageSize,
           ...(buscaDebounced ? { search: buscaDebounced } : {}),
           ...(filtroStatusInput !== 'todos'
             ? { status: toApiStatus(filtroStatusInput) }
@@ -742,13 +792,62 @@ export default function TurmasPage() {
                 className: 'sm:w-56',
               },
             ]}
-            afterSearchButton={
-              <ViewModeToggle
-                viewMode={viewMode}
-                onViewModeChange={setViewMode}
-                listLabel={t('viewMode.list')}
-                cardsLabel={t('viewMode.cards')}
-              />
+            actions={
+              <TooltipProvider>
+                <ToggleGroup
+                  type="single"
+                  value={viewMode}
+                  onValueChange={(value) => {
+                    if (
+                      value === 'cards' ||
+                      value === 'list' ||
+                      value === 'calendar'
+                    ) {
+                      setViewMode(value);
+                    }
+                  }}
+                  variant="outline"
+                  size="sm"
+                  className="shrink-0"
+                >
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <ToggleGroupItem
+                        value="cards"
+                        aria-label={t('viewMode.cards')}
+                        className="cursor-pointer"
+                      >
+                        <LayoutGrid className="h-4 w-4" />
+                      </ToggleGroupItem>
+                    </TooltipTrigger>
+                    <TooltipContent>{t('viewMode.cards')}</TooltipContent>
+                  </Tooltip>
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <ToggleGroupItem
+                        value="list"
+                        aria-label={t('viewMode.list')}
+                        className="cursor-pointer"
+                      >
+                        <List className="h-4 w-4" />
+                      </ToggleGroupItem>
+                    </TooltipTrigger>
+                    <TooltipContent>{t('viewMode.list')}</TooltipContent>
+                  </Tooltip>
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <ToggleGroupItem
+                        value="calendar"
+                        aria-label={t('viewMode.calendar')}
+                        className="cursor-pointer"
+                      >
+                        <CalendarDays className="h-4 w-4" />
+                      </ToggleGroupItem>
+                    </TooltipTrigger>
+                    <TooltipContent>{t('viewMode.calendar')}</TooltipContent>
+                  </Tooltip>
+                </ToggleGroup>
+              </TooltipProvider>
             }
           />
           <div className="flex items-center justify-between gap-3">
@@ -774,7 +873,13 @@ export default function TurmasPage() {
 
         {/* Classes list */}
         {loading ? (
-          viewMode === 'cards' ? (
+          viewMode === 'calendar' ? (
+            <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>
+          ) : viewMode === 'cards' ? (
             <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
               {Array.from({ length: 6 }).map((_, i) => (
                 <Card key={i} className="overflow-hidden border-border/70">
@@ -1018,7 +1123,7 @@ export default function TurmasPage() {
               );
             })}
           </motion.div>
-        ) : (
+        ) : viewMode === 'list' ? (
           <div className="overflow-hidden rounded-xl border border-border/70">
             <Table>
               <TableHeader>
@@ -1146,10 +1251,12 @@ export default function TurmasPage() {
               </TableBody>
             </Table>
           </div>
+        ) : (
+          <ClassesCalendarView turmas={visibleTurmas} />
         )}
 
         {/* Pagination footer */}
-        {!loading && visibleTurmas.length > 0 && (
+        {!loading && visibleTurmas.length > 0 && viewMode !== 'calendar' && (
           <div className="mt-6">
             <PaginationFooter
               currentPage={currentPage}
@@ -1160,7 +1267,7 @@ export default function TurmasPage() {
                 setPageSize(value);
                 setCurrentPage(1);
               }}
-              pageSizeOptions={PAGE_SIZES}
+              pageSizeOptions={pageSizeOptions}
             />
           </div>
         )}

package/hedhog/frontend/app/courses/[id]/_components/CourseFlagsCard.tsx.ejs

@@ -17,10 +17,13 @@ import type { UseFormReturn } from 'react-hook-form';
 import { CourseSectionCard } from './CourseSectionCard';
 import type { CourseEditFormValues, TranslationFn } from './course-edit-types';
 
+type CourseFlag = 'certificado' | 'destaque' | 'listado';
+
 type CourseFlagsCardProps = {
   form: UseFormReturn<CourseEditFormValues>;
   t: TranslationFn;
   compact?: boolean;
+  flags?: CourseFlag[];
 };
 
 function FlagRow({
@@ -53,10 +56,13 @@ function FlagRow({
   );
 }
 
+const DEFAULT_FLAGS: CourseFlag[] = ['certificado', 'destaque', 'listado'];
+
 export function CourseFlagsCard({
   form,
   t,
   compact = false,
+  flags = DEFAULT_FLAGS,
 }: CourseFlagsCardProps) {
   return (
     <CourseSectionCard
@@ -66,65 +72,71 @@ export function CourseFlagsCard({
       compact={compact}
     >
       <div className="space-y-3">
-        <FormField
-          control={form.control}
-          name="certificado"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel className="sr-only">
-                {t('form.flags.certificate.label')}
-              </FormLabel>
-              <FormControl>
-                <FlagRow
-                  title={t('form.flags.certificate.label')}
-                  description={t('form.flags.certificate.description')}
-                  checked={field.value}
-                  onCheckedChange={field.onChange}
-                />
-              </FormControl>
-            </FormItem>
-          )}
-        />
+        {flags.includes('certificado') && (
+          <FormField
+            control={form.control}
+            name="certificado"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel className="sr-only">
+                  {t('form.flags.certificate.label')}
+                </FormLabel>
+                <FormControl>
+                  <FlagRow
+                    title={t('form.flags.certificate.label')}
+                    description={t('form.flags.certificate.description')}
+                    checked={field.value}
+                    onCheckedChange={field.onChange}
+                  />
+                </FormControl>
+              </FormItem>
+            )}
+          />
+        )}
 
-        <FormField
-          control={form.control}
-          name="destaque"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel className="sr-only">
-                {t('form.flags.featured.label')}
-              </FormLabel>
-              <FormControl>
-                <FlagRow
-                  title={t('form.flags.featured.label')}
-                  description={t('form.flags.featured.description')}
-                  checked={field.value}
-                  onCheckedChange={field.onChange}
-                />
-              </FormControl>
-            </FormItem>
-          )}
-        />
+        {flags.includes('destaque') && (
+          <FormField
+            control={form.control}
+            name="destaque"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel className="sr-only">
+                  {t('form.flags.featured.label')}
+                </FormLabel>
+                <FormControl>
+                  <FlagRow
+                    title={t('form.flags.featured.label')}
+                    description={t('form.flags.featured.description')}
+                    checked={field.value}
+                    onCheckedChange={field.onChange}
+                  />
+                </FormControl>
+              </FormItem>
+            )}
+          />
+        )}
 
-        <FormField
-          control={form.control}
-          name="listado"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel className="sr-only">
-                {t('form.flags.listed.label')}
-              </FormLabel>
-              <FormControl>
-                <FlagRow
-                  title={t('form.flags.listed.label')}
-                  description={t('form.flags.listed.description')}
-                  checked={field.value}
-                  onCheckedChange={field.onChange}
-                />
-              </FormControl>
-            </FormItem>
-          )}
-        />
+        {flags.includes('listado') && (
+          <FormField
+            control={form.control}
+            name="listado"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel className="sr-only">
+                  {t('form.flags.listed.label')}
+                </FormLabel>
+                <FormControl>
+                  <FlagRow
+                    title={t('form.flags.listed.label')}
+                    description={t('form.flags.listed.description')}
+                    checked={field.value}
+                    onCheckedChange={field.onChange}
+                  />
+                </FormControl>
+              </FormItem>
+            )}
+          />
+        )}
       </div>
     </CourseSectionCard>
   );