@hed-hog/lms 0.0.278 → 0.0.285

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]/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/training/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';
@@ -46,10 +51,6 @@ import {
   AlertTriangle,
   BarChart3,
   BookOpen,
-  ChevronLeft,
-  ChevronRight,
-  ChevronsLeft,
-  ChevronsRight,
   Clock,
   Eye,
   FileCheck,
@@ -604,7 +605,7 @@ export default function TrainingPage() {
       </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" />
@@ -689,17 +690,14 @@ export default function TrainingPage() {
           ))}
         </div>
       ) : filteredFormacoes.length === 0 ? (
-        <div className="flex flex-col items-center justify-center py-20 text-center">
-          <GraduationCap 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={<GraduationCap 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"
@@ -719,7 +717,7 @@ export default function TrainingPage() {
             return (
               <motion.div key={formacao.id} variants={fadeUp}>
                 <Card
-                  className="group relative cursor-pointer overflow-hidden transition-all duration-200 hover:shadow-md hover:-translate-y-0.5 min-h-[240px] max-h-[270px] flex flex-col"
+                  className="group relative flex min-h-60 max-h-[270px] cursor-pointer flex-col overflow-hidden transition-all duration-200 hover:-translate-y-0.5 hover:shadow-md"
                   onClick={() => handleCardClick(formacao)}
                   title={t('cards.tooltip')}
                 >
@@ -840,86 +838,18 @@ export default function TrainingPage() {
 
       {/* Pagination footer */}
       {!loading && filteredFormacoes.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">
-            {filteredFormacoes.length}{' '}
-            {filteredFormacoes.length !== 1
-              ? t('pagination.formacoes')
-              : t('pagination.formacao')}{' '}
-            {t('pagination.found')}
-            {filteredFormacoes.length !== 1 ? t('pagination.foundPlural') : ''}
-          </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={filteredFormacoes.length}
+            onPageChange={setCurrentPage}
+            onPageSizeChange={(nextSize) => {
+              setPageSize(nextSize);
+              setCurrentPage(1);
+            }}
+            pageSizeOptions={PAGE_SIZES}
+          />
         </div>
       )}
 
@@ -1083,7 +1013,7 @@ export default function TrainingPage() {
                 {availableCursos.map((c) => (
                   <label
                     key={c.id}
-                    className="flex cursor-pointer items-center justify-between border-b p-2.5 last:border-0 hover:bg-muted has-[:checked]:bg-muted/50"
+                    className="flex cursor-pointer items-center justify-between border-b p-2.5 last:border-0 hover:bg-muted has-checked:bg-muted/50"
                   >
                     <div className="flex items-center gap-2">
                       <Checkbox