@hed-hog/lms 0.0.279 → 0.0.286

package/hedhog/frontend/app/courses/[id]/structure/page.tsx.ejs

@@ -1,6 +1,6 @@
 'use client';
 
-import { Page, PageHeader } from '@/components/entity-list';
+import { EmptyState, Page, PageHeader } from '@/components/entity-list';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent } from '@/components/ui/card';
@@ -61,7 +61,7 @@ import {
 } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
 import { zodResolver } from '@hookform/resolvers/zod';
-import { AnimatePresence, motion } from 'framer-motion';
+import { AnimatePresence, motion, type Variants } from 'framer-motion';
 import {
   AlertTriangle,
   Archive,
@@ -579,7 +579,7 @@ const initialAulas: Aula[] = [
 // ── Animations ──────────────────────────────────────────────────────────────
 
 const stagger = { hidden: {}, show: { transition: { staggerChildren: 0.04 } } };
-const fadeUp = {
+const fadeUp: Variants = {
   hidden: { opacity: 0, y: 12 },
   show: { opacity: 1, y: 0, transition: { duration: 0.3, ease: 'easeOut' } },
 };
@@ -1310,23 +1310,16 @@ export default function EstruturaPage({
 
             {/* Empty state */}
             {sessoes.length === 0 && (
-              <motion.div
-                variants={fadeUp}
-                className="mt-8 flex flex-col items-center gap-4 py-16 text-center"
-              >
-                <div className="flex size-16 items-center justify-center rounded-full bg-muted">
-                  <Layers className="size-8 text-muted-foreground" />
-                </div>
-                <div>
-                  <h3 className="text-lg font-semibold">{t('empty.title')}</h3>
-                  <p className="text-sm text-muted-foreground">
-                    {t('empty.description')}
-                  </p>
-                </div>
-                <Button className="gap-2" onClick={openCreateSessao}>
-                  <Plus className="size-4" />
-                  {t('empty.action')}
-                </Button>
+              <motion.div variants={fadeUp} className="mt-8">
+                <EmptyState
+                  icon={<Layers className="h-12 w-12" />}
+                  title={t('empty.title')}
+                  description={t('empty.description')}
+                  actionLabel={t('empty.action')}
+                  actionIcon={<Plus className="size-4" />}
+                  onAction={openCreateSessao}
+                  className="py-16"
+                />
               </motion.div>
             )}
           </motion.div>
@@ -2429,20 +2422,15 @@ function SortableSessao({
             >
               <div className="flex flex-col gap-0 p-2">
                 {aulas.length === 0 ? (
-                  <div className="flex flex-col items-center gap-2 py-6 text-center">
-                    <p className="text-xs text-muted-foreground">
-                      {t('session.noLessons')}
-                    </p>
-                    <Button
-                      variant="outline"
-                      size="sm"
-                      className="gap-1.5 text-xs"
-                      onClick={onCreateAula}
-                    >
-                      <Plus className="size-3" />
-                      {t('session.addLesson')}
-                    </Button>
-                  </div>
+                  <EmptyState
+                    icon={<Layers className="h-10 w-10" />}
+                    title={t('session.noLessons')}
+                    description={t('session.noLessonsDescription')}
+                    actionLabel={t('session.addLesson')}
+                    actionIcon={<Plus className="size-3.5" />}
+                    onAction={onCreateAula}
+                    className="py-8"
+                  />
                 ) : (
                   aulas.map((aula) => (
                     <SortableAula

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

@@ -1,6 +1,11 @@
 'use client';
 
-import { Page, PageHeader } from '@/components/entity-list';
+import {
+  EmptyState,
+  Page,
+  PageHeader,
+  PaginationFooter,
+} from '@/components/entity-list';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent } from '@/components/ui/card';
@@ -54,10 +59,6 @@ import {
   Award,
   BarChart3,
   BookOpen,
-  ChevronLeft,
-  ChevronRight,
-  ChevronsLeft,
-  ChevronsRight,
   Eye,
   FileCheck,
   GraduationCap,
@@ -748,7 +749,7 @@ export default function CursosPage() {
       />
 
       {/* ── KPI Cards ────────────────────────────────────────────────────── */}
-      <div className="mb-2 grid grid-cols-2 gap-4 lg:grid-cols-4">
+      <div className="mb-6 grid grid-cols-2 gap-4 lg:grid-cols-4">
         {loading
           ? Array.from({ length: 4 }).map((_, i) => (
               <Card key={i}>
@@ -790,7 +791,7 @@ export default function CursosPage() {
       </div>
 
       {/* ── Search bar ───────────────────────────────────────────────────── */}
-      <form onSubmit={handleSearch} className="mb-2 mt-0">
+      <form onSubmit={handleSearch} className="mb-6 mt-0">
         <div className="flex flex-col gap-3 sm:flex-row sm:items-center">
           {/* Search input — grows to fill space */}
           <div className="relative flex-1">
@@ -962,17 +963,14 @@ export default function CursosPage() {
           ))}
         </div>
       ) : filteredCursos.length === 0 ? (
-        <div className="flex flex-col items-center justify-center py-20 text-center">
-          <BookOpen className="mb-4 size-12 text-muted-foreground/40" />
-          <p className="text-lg font-medium">{t('table.empty.title')}</p>
-          <p className="mt-1 text-sm text-muted-foreground">
-            {t('table.empty.description')}
-          </p>
-          <Button className="mt-6 gap-2" onClick={openCreateSheet}>
-            <Plus className="size-4" />
-            {t('actions.createCourse')}
-          </Button>
-        </div>
+        <EmptyState
+          icon={<BookOpen className="h-12 w-12" />}
+          title={t('table.empty.title')}
+          description={t('table.empty.description')}
+          actionLabel={t('actions.createCourse')}
+          onAction={openCreateSheet}
+          actionIcon={<Plus className="mr-2 h-4 w-4" />}
+        />
       ) : (
         <motion.div
           className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3"
@@ -1093,7 +1091,7 @@ export default function CursosPage() {
                         )}
                       </Badge>
                       {curso.destaque && (
-                        <span className="inline-flex items-center gap-1 rounded-full bg-gradient-to-r from-amber-50 to-orange-50 px-2.5 py-0.5 text-[11px] font-medium text-amber-700 border border-amber-200/60 shadow-sm">
+                        <span className="inline-flex items-center gap-1 rounded-full border border-amber-200/60 bg-linear-to-r from-amber-50 to-orange-50 px-2.5 py-0.5 text-[11px] font-medium text-amber-700 shadow-sm">
                           <Star className="size-3 fill-amber-400 text-amber-400" />{' '}
                           {t('form.flags.featured.label')}
                         </span>
@@ -1152,92 +1150,19 @@ export default function CursosPage() {
 
       {/* ── Pagination footer ─────────────────────────────────────────────── */}
       {!loading && filteredCursos.length > 0 && (
-        <div className="mt-6 flex flex-col items-center justify-between gap-4 sm:flex-row">
-          {/* Total count */}
-          <p className="text-sm text-muted-foreground">
-            {filteredCursos.length}{' '}
-            {filteredCursos.length === 1
-              ? t('pagination.course')
-              : t('pagination.courses')}{' '}
-            {filteredCursos.length === 1
-              ? t('pagination.found')
-              : t('pagination.foundPlural')}
-          </p>
-
-          {/* Center: page nav */}
-          <div className="flex items-center gap-1">
-            <Button
-              variant="outline"
-              size="icon"
-              className="size-8"
-              onClick={() => setCurrentPage(1)}
-              disabled={safePage === 1}
-              aria-label={t('pagination.firstPage')}
-            >
-              <ChevronsLeft className="size-4" />
-            </Button>
-            <Button
-              variant="outline"
-              size="icon"
-              className="size-8"
-              onClick={() => setCurrentPage((p) => p - 1)}
-              disabled={safePage === 1}
-              aria-label={t('pagination.previousPage')}
-            >
-              <ChevronLeft className="size-4" />
-            </Button>
-            <span className="px-3 text-sm">
-              {t('pagination.page')}{' '}
-              <span className="font-semibold">{safePage}</span>{' '}
-              {t('pagination.of')}{' '}
-              <span className="font-semibold">{totalPages}</span>
-            </span>
-            <Button
-              variant="outline"
-              size="icon"
-              className="size-8"
-              onClick={() => setCurrentPage((p) => p + 1)}
-              disabled={safePage === totalPages}
-              aria-label={t('pagination.nextPage')}
-            >
-              <ChevronRight className="size-4" />
-            </Button>
-            <Button
-              variant="outline"
-              size="icon"
-              className="size-8"
-              onClick={() => setCurrentPage(totalPages)}
-              disabled={safePage === totalPages}
-              aria-label={t('pagination.lastPage')}
-            >
-              <ChevronsRight className="size-4" />
-            </Button>
-          </div>
-
-          {/* Items per page */}
-          <div className="flex items-center gap-2 text-sm">
-            <span className="text-muted-foreground">
-              {t('pagination.itemsPerPage')}
-            </span>
-            <Select
-              value={String(pageSize)}
-              onValueChange={(v) => {
-                setPageSize(Number(v));
-                setCurrentPage(1);
-              }}
-            >
-              <SelectTrigger className="h-8 w-16 text-sm">
-                <SelectValue />
-              </SelectTrigger>
-              <SelectContent>
-                {PAGE_SIZES.map((s) => (
-                  <SelectItem key={s} value={String(s)}>
-                    {s}
-                  </SelectItem>
-                ))}
-              </SelectContent>
-            </Select>
-          </div>
+        <div className="mt-6">
+          <PaginationFooter
+            currentPage={safePage}
+            pageSize={pageSize}
+            totalItems={filteredCursos.length}
+            onPageChange={setCurrentPage}
+            onPageSizeChange={(nextSize) => {
+              setPageSize(nextSize);
+              setCurrentPage(1);
+            }}
+            pageSizeOptions={PAGE_SIZES}
+            selectedCount={selectedIds.size}
+          />
         </div>
       )}
 
@@ -1409,7 +1334,7 @@ export default function CursosPage() {
                     {CATEGORIAS.map((cat) => (
                       <label
                         key={cat}
-                        className="flex cursor-pointer items-center gap-2 rounded-md border p-2.5 text-sm hover:bg-muted has-[:checked]:border-foreground has-[:checked]:bg-muted"
+                        className="flex cursor-pointer items-center gap-2 rounded-md border p-2.5 text-sm hover:bg-muted has-checked:border-foreground has-checked:bg-muted"
                       >
                         <Checkbox
                           checked={field.value.includes(cat)}

package/hedhog/frontend/app/exams/[id]/attempt/page.tsx.ejs

@@ -1,6 +1,6 @@
 'use client';
 
-import { Page, PageHeader } from '@/components/entity-list';
+import { EmptyState, Page, PageHeader } from '@/components/entity-list';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
@@ -265,6 +265,29 @@ export default function TentativaPage() {
   const answeredCount = Object.keys(answers).length;
   const progressPercent = (answeredCount / examQuestions.length) * 100;
 
+  if (!currentQuestion) {
+    return (
+      <Page>
+        <PageHeader
+          title={EXAM_TITLE}
+          breadcrumbs={[
+            { label: t('breadcrumbs.home'), href: '/' },
+            { label: t('breadcrumbs.exams'), href: '/lms/exams' },
+            { label: t('breadcrumbs.current') },
+          ]}
+        />
+        <Card>
+          <CardContent className="p-6 text-center">
+            <p className="text-base font-semibold">{t('empty.title')}</p>
+            <p className="mt-2 text-sm text-muted-foreground">
+              {t('empty.description')}
+            </p>
+          </CardContent>
+        </Card>
+      </Page>
+    );
+  }
+
   function formatTime(seconds: number) {
     const h = Math.floor(seconds / 3600);
     const m = Math.floor((seconds % 3600) / 60);
@@ -738,8 +761,7 @@ export default function TentativaPage() {
                     </Button>
                     <Button
                       variant="ghost"
-                      className={`shrink-0 ${flagged.has(currentQuestion.id) ? 'text-primary' : 'text-muted-foreground'}`}
-                      className="lg:hidden"
+                      className={`shrink-0 lg:hidden ${flagged.has(currentQuestion.id) ? 'text-primary' : 'text-muted-foreground'}`}
                       onClick={() => setShowNav(!showNav)}
                     >
                       {currentIndex + 1}/{examQuestions.length}

package/hedhog/frontend/app/exams/[id]/questions/page.tsx.ejs

@@ -1,6 +1,11 @@
 'use client';
 
-import { Page, PageHeader } from '@/components/entity-list';
+import {
+  EmptyState,
+  Page,
+  PageHeader,
+  PaginationFooter,
+} from '@/components/entity-list';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent } from '@/components/ui/card';
@@ -167,6 +172,8 @@ const initialQuestoes: Questao[] = [
   },
 ];
 
+const PAGE_SIZE_OPTIONS = [6, 12, 24];
+
 function SortableAlternativa({
   alt,
   index,
@@ -435,6 +442,8 @@ export default function QuestoesPage() {
   const [loading, setLoading] = useState(true);
   const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
   const [questoes, setQuestoes] = useState<Questao[]>(initialQuestoes);
+  const [currentPage, setCurrentPage] = useState(1);
+  const [pageSize, setPageSize] = useState(6);
   const [expandedIds, setExpandedIds] = useState<Set<string>>(new Set());
   const [sheetOpen, setSheetOpen] = useState(false);
   const [editingQuestao, setEditingQuestao] = useState<Questao | null>(null);
@@ -463,6 +472,13 @@ export default function QuestoesPage() {
     return () => clearTimeout(timer);
   }, []);
 
+  const totalPages = Math.max(1, Math.ceil(questoes.length / pageSize));
+  const safePage = Math.min(Math.max(currentPage, 1), totalPages);
+  const paginatedQuestoes = questoes.slice(
+    (safePage - 1) * pageSize,
+    safePage * pageSize
+  );
+
   function toggleExpand(qId: string) {
     setExpandedIds((prev) => {
       const next = new Set(prev);
@@ -730,20 +746,14 @@ export default function QuestoesPage() {
               ))}
             </div>
           ) : questoes.length === 0 ? (
-            <Card>
-              <CardContent className="flex flex-col items-center gap-3 py-16">
-                <div className="flex size-12 items-center justify-center rounded-full bg-muted">
-                  <FileCheck className="size-6 text-muted-foreground" />
-                </div>
-                <p className="font-medium">{t('empty.title')}</p>
-                <p className="text-sm text-muted-foreground">
-                  {t('empty.description')}
-                </p>
-                <Button onClick={openCreateSheet} className="mt-2 gap-2">
-                  <Plus className="size-4" /> {t('empty.action')}
-                </Button>
-              </CardContent>
-            </Card>
+            <EmptyState
+              icon={<FileCheck className="h-12 w-12" />}
+              title={t('empty.title')}
+              description={t('empty.description')}
+              actionLabel={t('empty.action')}
+              onAction={openCreateSheet}
+              actionIcon={<Plus className="mr-2 h-4 w-4" />}
+            />
           ) : (
             <DndContext
               sensors={sensors}
@@ -756,13 +766,13 @@ export default function QuestoesPage() {
               >
                 <div className="flex flex-col gap-3">
                   <AnimatePresence>
-                    {questoes.map((questao, qIndex) => {
+                    {paginatedQuestoes.map((questao, qIndex) => {
                       const isExpanded = expandedIds.has(questao.id);
                       return (
                         <SortableQuestao
                           key={questao.id}
                           questao={questao}
-                          qIndex={qIndex}
+                          qIndex={(safePage - 1) * pageSize + qIndex}
                           isExpanded={isExpanded}
                           onToggleExpand={() => toggleExpand(questao.id)}
                           onEdit={() => openEditSheet(questao)}
@@ -779,6 +789,22 @@ export default function QuestoesPage() {
               </SortableContext>
             </DndContext>
           )}
+
+          {!loading && questoes.length > 0 && (
+            <div className="mt-6">
+              <PaginationFooter
+                currentPage={safePage}
+                pageSize={pageSize}
+                totalItems={questoes.length}
+                onPageChange={setCurrentPage}
+                onPageSizeChange={(nextSize) => {
+                  setPageSize(nextSize);
+                  setCurrentPage(1);
+                }}
+                pageSizeOptions={PAGE_SIZE_OPTIONS}
+              />
+            </div>
+          )}
         </motion.div>
       </div>
 

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

@@ -1,6 +1,11 @@
 'use client';
 
-import { Page, PageHeader } from '@/components/entity-list';
+import {
+  EmptyState,
+  Page,
+  PageHeader,
+  PaginationFooter,
+} from '@/components/entity-list';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent } from '@/components/ui/card';
@@ -50,10 +55,6 @@ import {
   BarChart3,
   BookOpen,
   CheckCircle2,
-  ChevronLeft,
-  ChevronRight,
-  ChevronsLeft,
-  ChevronsRight,
   FileCheck,
   FileQuestion,
   GraduationCap,
@@ -585,7 +586,7 @@ export default function ExamesPage() {
       </div>
 
       {/* Search bar */}
-      <form onSubmit={handleSearch} className="-mt-4 mb-2">
+      <form onSubmit={handleSearch} className="mb-6 mt-0">
         <div className="flex flex-col gap-3 sm:flex-row sm:items-center">
           <div className="relative flex-1">
             <Search className="absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
@@ -651,17 +652,14 @@ export default function ExamesPage() {
           ))}
         </div>
       ) : filteredExames.length === 0 ? (
-        <div className="flex flex-col items-center justify-center py-20 text-center">
-          <FileCheck className="mb-4 size-12 text-muted-foreground/40" />
-          <p className="text-lg font-medium">{t('empty.title')}</p>
-          <p className="mt-1 text-sm text-muted-foreground">
-            {t('empty.description')}
-          </p>
-          <Button className="mt-6 gap-2" onClick={openCreateSheet}>
-            <Plus className="size-4" />
-            {t('empty.action')}
-          </Button>
-        </div>
+        <EmptyState
+          icon={<FileCheck className="h-12 w-12" />}
+          title={t('empty.title')}
+          description={t('empty.description')}
+          actionLabel={t('empty.action')}
+          onAction={openCreateSheet}
+          actionIcon={<Plus className="mr-2 h-4 w-4" />}
+        />
       ) : (
         <motion.div
           className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3"
@@ -853,87 +851,18 @@ export default function ExamesPage() {
 
       {/* Pagination footer */}
       {!loading && filteredExames.length > 0 && (
-        <div className="mt-6 flex flex-col items-center justify-between gap-4 sm:flex-row">
-          <p className="text-sm text-muted-foreground">
-            {filteredExames.length}{' '}
-            {filteredExames.length !== 1
-              ? t('pagination.examsPlural')
-              : t('pagination.exams')}{' '}
-            {filteredExames.length !== 1
-              ? t('pagination.foundPlural')
-              : t('pagination.found')}
-          </p>
-          <div className="flex items-center gap-1">
-            <Button
-              variant="outline"
-              size="icon"
-              className="size-8"
-              onClick={() => setCurrentPage(1)}
-              disabled={safePage === 1}
-              aria-label={t('pagination.firstPage')}
-            >
-              <ChevronsLeft className="size-4" />
-            </Button>
-            <Button
-              variant="outline"
-              size="icon"
-              className="size-8"
-              onClick={() => setCurrentPage((p) => p - 1)}
-              disabled={safePage === 1}
-              aria-label={t('pagination.previousPage')}
-            >
-              <ChevronLeft className="size-4" />
-            </Button>
-            <span className="px-3 text-sm">
-              {t('pagination.page')}{' '}
-              <span className="font-semibold">{safePage}</span>{' '}
-              {t('pagination.of')}{' '}
-              <span className="font-semibold">{totalPages}</span>
-            </span>
-            <Button
-              variant="outline"
-              size="icon"
-              className="size-8"
-              onClick={() => setCurrentPage((p) => p + 1)}
-              disabled={safePage === totalPages}
-              aria-label={t('pagination.nextPage')}
-            >
-              <ChevronRight className="size-4" />
-            </Button>
-            <Button
-              variant="outline"
-              size="icon"
-              className="size-8"
-              onClick={() => setCurrentPage(totalPages)}
-              disabled={safePage === totalPages}
-              aria-label={t('pagination.lastPage')}
-            >
-              <ChevronsRight className="size-4" />
-            </Button>
-          </div>
-          <div className="flex items-center gap-2 text-sm">
-            <span className="text-muted-foreground">
-              {t('pagination.itemsPerPage')}
-            </span>
-            <Select
-              value={String(pageSize)}
-              onValueChange={(v) => {
-                setPageSize(Number(v));
-                setCurrentPage(1);
-              }}
-            >
-              <SelectTrigger className="h-8 w-16 text-sm">
-                <SelectValue />
-              </SelectTrigger>
-              <SelectContent>
-                {PAGE_SIZES.map((s) => (
-                  <SelectItem key={s} value={String(s)}>
-                    {s}
-                  </SelectItem>
-                ))}
-              </SelectContent>
-            </Select>
-          </div>
+        <div className="mt-6">
+          <PaginationFooter
+            currentPage={safePage}
+            pageSize={pageSize}
+            totalItems={filteredExames.length}
+            onPageChange={setCurrentPage}
+            onPageSizeChange={(nextSize) => {
+              setPageSize(nextSize);
+              setCurrentPage(1);
+            }}
+            pageSizeOptions={PAGE_SIZES}
+          />
         </div>
       )}
 

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

@@ -31,7 +31,7 @@ import {
   startOfWeek,
 } from 'date-fns';
 import { ptBR } from 'date-fns/locale/pt-BR';
-import { motion } from 'framer-motion';
+import { motion, type Variants } from 'framer-motion';
 import {
   Award,
   BarChart3,
@@ -163,7 +163,7 @@ function genCalendarEvents() {
     if (dayOfWeek === 0 || dayOfWeek === 6) continue;
     const numAulas = dayOfWeek % 2 === 0 ? 3 : 2;
     for (let a = 0; a < numAulas; a++) {
-      const turma = turmas[(d + 14 + a) % turmas.length];
+      const turma = turmas[(d + 14 + a) % turmas.length]!;
       const horaInicio = 8 + a * 3;
       events.push({
         title: turma.nome,
@@ -394,7 +394,7 @@ const stagger = {
   show: { transition: { staggerChildren: 0.08 } },
 };
 
-const fadeUp = {
+const fadeUp: Variants = {
   hidden: { opacity: 0, y: 16 },
   show: { opacity: 1, y: 0, transition: { duration: 0.35, ease: 'easeOut' } },
 };