@hed-hog/lms 0.0.364 → 0.0.366

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]/page.tsx.ejs

@@ -9,14 +9,16 @@ import {
   ResizablePanel,
   ResizablePanelGroup,
 } from '@/components/ui/resizable';
-import { Sheet, SheetHeader, SheetTitle } from '@/components/ui/sheet';
 import { ResizableSheetContent } from '@/components/ui/resizable-sheet-content';
+import { Sheet, SheetHeader, SheetTitle } from '@/components/ui/sheet';
 import { useIsMobile } from '@/hooks/use-mobile';
 import { useApp, useQuery } from '@hed-hog/next-app-provider';
 import { useIsMutating, useQueryClient } from '@tanstack/react-query';
 import { AlertCircle, Menu, RefreshCw } from 'lucide-react';
 import { useTranslations } from 'next-intl';
+import { useRouter, useSearchParams } from 'next/navigation';
 
+import { useLmsRealtimeRefresh } from '../../_lib/hooks/use-lms-realtime-refresh';
 import { ConfirmDialog } from './structure/_components/confirm-dialog';
 import { CourseTreePanel } from './structure/_components/course-tree-panel';
 import { CourseTreeSkeleton } from './structure/_components/course-tree-skeleton';
@@ -37,7 +39,6 @@ import {
   usePasteSessionsMutation,
 } from './structure/_data/use-course-structure-mutations';
 import { useCourseStructureQuery } from './structure/_data/use-course-structure-query';
-import { useLmsRealtimeRefresh } from '../../_lib/hooks/use-lms-realtime-refresh';
 
 interface Props {
   params: Promise<{ id: string }>;
@@ -60,6 +61,8 @@ export default function CourseStructurePage({ params }: Props) {
   const isMobile = useIsMobile();
   const { request } = useApp();
   const queryClient = useQueryClient();
+  const router = useRouter();
+  const searchParams = useSearchParams();
 
   const { data: courseSummary } = useQuery<ApiCourseSummary>({
     queryKey: ['lms-course-detail', id],
@@ -85,6 +88,10 @@ export default function CourseStructurePage({ params }: Props) {
 
   const setStructureFromApi = useStructureStore((s) => s.setStructureFromApi);
   const setCourseId = useStructureStore((s) => s.setCourseId);
+  const selectItem = useStructureStore((s) => s.selectItem);
+
+  const restoredFromUrl = useRef(false);
+  const suppressNextSyncRef = useRef(false);
 
   useEffect(() => {
     setCourseId(id);
@@ -126,6 +133,31 @@ export default function CourseStructurePage({ params }: Props) {
         sessions: apiSessions,
         lessons: apiLessons,
       });
+
+      if (!restoredFromUrl.current) {
+        restoredFromUrl.current = true;
+        const sel = searchParams.get('sel');
+        const type = searchParams.get('type') as
+          | 'course'
+          | 'session'
+          | 'lesson'
+          | null;
+        if (
+          sel &&
+          (type === 'course' || type === 'session' || type === 'lesson')
+        ) {
+          const exists =
+            type === 'course'
+              ? mergedCourse?.id === sel
+              : type === 'session'
+                ? apiSessions.some((s) => s.id === sel)
+                : apiLessons.some((l) => l.id === sel);
+          if (exists) {
+            suppressNextSyncRef.current = true;
+            selectItem(sel, type);
+          }
+        }
+      }
     }
   }, [
     apiCourse,
@@ -159,6 +191,33 @@ export default function CourseStructurePage({ params }: Props) {
   const copiedType = useStructureStore((s) => s.copiedType);
   const copiedIds = useStructureStore((s) => s.copiedIds);
 
+  // ── URL sync: selection → URL ──────────────────────────────────────────────
+  useEffect(() => {
+    if (!restoredFromUrl.current) return;
+    if (suppressNextSyncRef.current) {
+      suppressNextSyncRef.current = false;
+      return;
+    }
+    const params = new URLSearchParams(searchParams.toString());
+    if (activeItemId && activeItemType) {
+      params.set('sel', activeItemId);
+      params.set('type', activeItemType);
+    }
+    params.delete('tab');
+    router.replace(`?${params.toString()}`, { scroll: false });
+  }, [activeItemId, activeItemType]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const handleTabChange = useCallback(
+    (tab: string) => {
+      const params = new URLSearchParams(searchParams.toString());
+      params.set('tab', tab);
+      router.replace(`?${params.toString()}`, { scroll: false });
+    },
+    [router, searchParams]
+  );
+
+  const defaultTab = searchParams.get('tab') ?? undefined;
+
   useCourseStructureShortcuts({
     searchRef,
     detailPanelRef,
@@ -277,7 +336,10 @@ export default function CourseStructurePage({ params }: Props) {
                 className="flex flex-col h-full min-h-0"
               >
                 <div className="h-full min-h-0">
-                  <DetailPanel />
+                  <DetailPanel
+                    defaultTab={defaultTab}
+                    onTabChange={handleTabChange}
+                  />
                 </div>
               </div>
             </ResizablePanel>
@@ -305,7 +367,10 @@ export default function CourseStructurePage({ params }: Props) {
             className="flex-1 min-h-0 border rounded-lg overflow-hidden"
           >
             <div className="h-full min-h-0">
-              <DetailPanel />
+              <DetailPanel
+                defaultTab={defaultTab}
+                onTabChange={handleTabChange}
+              />
             </div>
           </div>