@hed-hog/lms 0.0.279 → 0.0.285

package/README.md

@@ -1,3 +1,4 @@
+```markdown
 # @hed-hog/lms
 
 ## 1. Visão geral do módulo
@@ -676,3 +677,4 @@ const certificado = await prisma.certificate.create({
 ---
 
 Para mais detalhes sobre integração e uso, consulte a documentação geral do HedHog e os serviços que consomem o módulo `@hed-hog/lms`.
+```

package/hedhog/frontend/app/classes/[id]/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 { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
@@ -851,16 +851,32 @@ export default function TurmaDetalhePage() {
                     ))}
                   </div>
                 ) : filteredAlunos.length === 0 ? (
-                  <Card>
-                    <CardContent className="flex flex-col items-center justify-center py-12 text-center">
-                      <Users className="mb-4 size-12 text-muted-foreground/50" />
-                      <p className="text-muted-foreground">
-                        {alunoSearch
-                          ? t('students.empty.notFound')
-                          : t('students.empty.notEnrolled')}
-                      </p>
-                    </CardContent>
-                  </Card>
+                  <EmptyState
+                    icon={<Users className="h-12 w-12" />}
+                    title={
+                      alunoSearch
+                        ? t('students.empty.notFound')
+                        : t('students.empty.notEnrolled')
+                    }
+                    description={
+                      alunoSearch
+                        ? t('students.empty.notFoundDescription')
+                        : t('students.empty.notEnrolledDescription')
+                    }
+                    actionLabel={
+                      alunoSearch
+                        ? t('students.empty.clearSearch')
+                        : t('students.actions.addStudent')
+                    }
+                    onAction={() => {
+                      if (alunoSearch) {
+                        setAlunoSearch('');
+                        return;
+                      }
+
+                      setAddAlunoDialogOpen(true);
+                    }}
+                  />
                 ) : (
                   <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
                     {filteredAlunos.map((aluno) => {
@@ -876,7 +892,7 @@ export default function TurmaDetalhePage() {
                               <div className="relative">
                                 <Avatar className="size-12">
                                   <AvatarImage src={aluno.avatar} />
-                                  <AvatarFallback className="bg-gradient-to-br from-blue-100 to-blue-200 text-blue-700 font-medium">
+                                  <AvatarFallback className="bg-linear-to-br from-blue-100 to-blue-200 text-blue-700 font-medium">
                                     {aluno.nome
                                       .split(' ')
                                       .map((n) => n[0])

package/hedhog/frontend/app/classes/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';
@@ -43,10 +48,6 @@ import {
   AlertTriangle,
   BarChart3,
   Calendar,
-  ChevronLeft,
-  ChevronRight,
-  ChevronsLeft,
-  ChevronsRight,
   Clock,
   Eye,
   Laptop,
@@ -661,7 +662,7 @@ export default function TurmasPage() {
       </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" />
@@ -711,7 +712,7 @@ export default function TurmasPage() {
               value={filtroCursoInput}
               onValueChange={setFiltroCursoInput}
             >
-              <SelectTrigger className="h-9 w-[160px] text-sm">
+              <SelectTrigger className="h-9 w-40 text-sm">
                 <SelectValue placeholder={t('filters.course')} />
               </SelectTrigger>
               <SelectContent>
@@ -759,17 +760,14 @@ export default function TurmasPage() {
           ))}
         </div>
       ) : filteredTurmas.length === 0 ? (
-        <div className="flex flex-col items-center justify-center py-20 text-center">
-          <Users 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={<Users 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"
@@ -946,87 +944,18 @@ export default function TurmasPage() {
 
       {/* Pagination footer */}
       {!loading && filteredTurmas.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">
-            {filteredTurmas.length}{' '}
-            {filteredTurmas.length === 1
-              ? t('pagination.class')
-              : t('pagination.classes')}{' '}
-            {filteredTurmas.length === 1
-              ? t('pagination.found')
-              : 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={filteredTurmas.length}
+            onPageChange={setCurrentPage}
+            onPageSizeChange={(nextSize) => {
+              setPageSize(nextSize);
+              setCurrentPage(1);
+            }}
+            pageSizeOptions={PAGE_SIZES}
+          />
         </div>
       )}
 

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

@@ -78,6 +78,120 @@ import {
 import { toast } from 'sonner';
 import { z } from 'zod';
 
+type MediaUploadFieldProps = {
+  label: string;
+  description: string;
+  uploadLabel: string;
+  changeLabel: string;
+  removeLabel: string;
+  emptyTitle: string;
+  preview: string | null;
+  previewAlt: string;
+  inputRef: React.RefObject<HTMLInputElement | null>;
+  onInputChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  onClear: () => void;
+  icon: React.ComponentType<{ className?: string }>;
+  aspectClassName: string;
+  compactPreview?: boolean;
+};
+
+function MediaUploadField({
+  label,
+  description,
+  uploadLabel,
+  changeLabel,
+  removeLabel,
+  emptyTitle,
+  preview,
+  previewAlt,
+  inputRef,
+  onInputChange,
+  onClear,
+  icon: Icon,
+  aspectClassName,
+  compactPreview = false,
+}: MediaUploadFieldProps) {
+  return (
+    <Field>
+      <FieldLabel>{label}</FieldLabel>
+      <FieldDescription>{description}</FieldDescription>
+      <input
+        ref={inputRef}
+        type="file"
+        accept="image/*"
+        className="hidden"
+        onChange={onInputChange}
+      />
+      <div className="rounded-xl border border-border/70 bg-muted/20 p-4">
+        <div
+          className={
+            compactPreview
+              ? 'flex flex-col gap-4 sm:flex-row'
+              : 'flex flex-col gap-4'
+          }
+        >
+          <div
+            className={[
+              'overflow-hidden rounded-xl border border-dashed border-border/80 bg-background',
+              compactPreview ? 'w-full shrink-0 sm:w-28' : 'w-full',
+            ].join(' ')}
+          >
+            {preview ? (
+              <img
+                src={preview}
+                alt={previewAlt}
+                className={`${aspectClassName} w-full object-cover`}
+              />
+            ) : (
+              <div
+                className={`${aspectClassName} flex w-full flex-col items-center justify-center gap-2 px-4 text-center`}
+              >
+                <div className="flex size-10 items-center justify-center rounded-full bg-muted text-muted-foreground">
+                  <Icon className="size-5" />
+                </div>
+                <div className="space-y-1">
+                  <p className="text-sm font-medium">{emptyTitle}</p>
+                  <p className="text-xs text-muted-foreground">{uploadLabel}</p>
+                </div>
+              </div>
+            )}
+          </div>
+
+          <div className="flex min-w-0 flex-1 flex-col justify-between gap-3">
+            <div className="space-y-1">
+              <p className="text-sm font-medium text-foreground">{label}</p>
+              <p className="text-sm text-muted-foreground">{description}</p>
+            </div>
+
+            <div className="flex flex-col gap-2 sm:flex-row">
+              <Button
+                type="button"
+                variant={preview ? 'outline' : 'default'}
+                className="w-full gap-2 sm:w-auto"
+                onClick={() => inputRef.current?.click()}
+              >
+                <Upload className="size-4" />
+                {preview ? changeLabel : uploadLabel}
+              </Button>
+              {preview && (
+                <Button
+                  type="button"
+                  variant="outline"
+                  className="w-full gap-2 text-destructive hover:text-destructive sm:w-auto"
+                  onClick={onClear}
+                >
+                  <XCircle className="size-4" />
+                  {removeLabel}
+                </Button>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+    </Field>
+  );
+}
+
 // ── Navigation ──────────────────────────────────────────────────────────────────
 
 const NAV_ITEMS = [
@@ -773,7 +887,7 @@ export default function CursoEditPage({
                               return (
                                 <label
                                   key={cat}
-                                  className="flex cursor-pointer items-center gap-2.5 rounded-md border px-3 py-2.5 text-sm transition-colors hover:bg-muted/50 has-[:checked]:border-foreground has-[:checked]:bg-muted/50"
+                                  className="flex cursor-pointer items-center gap-2.5 rounded-md border px-3 py-2.5 text-sm transition-colors hover:bg-muted/50 has-checked:border-foreground has-checked:bg-muted/50"
                                 >
                                   <Checkbox
                                     checked={checked}
@@ -824,7 +938,7 @@ export default function CursoEditPage({
                                 return (
                                   <label
                                     key={inst.id}
-                                    className="flex cursor-pointer items-center gap-2.5 rounded-md border px-3 py-2.5 text-sm transition-colors hover:bg-muted/50 has-[:checked]:border-foreground has-[:checked]:bg-muted/50"
+                                    className="flex cursor-pointer items-center gap-2.5 rounded-md border px-3 py-2.5 text-sm transition-colors hover:bg-muted/50 has-checked:border-foreground has-checked:bg-muted/50"
                                   >
                                     <Checkbox
                                       checked={checked}
@@ -882,114 +996,43 @@ export default function CursoEditPage({
                     <Separator />
 
                     {/* ── Upload Logo + Banner ─────────────────────────────── */}
-                    <div className="grid gap-4 sm:grid-cols-2">
-                      {/* Logo Upload */}
-                      <Field>
-                        <FieldLabel>{t('form.fields.logo.label')}</FieldLabel>
-                        <FieldDescription>
-                          {t('form.fields.logo.description')}
-                        </FieldDescription>
-                        <input
-                          ref={logoInputRef}
-                          type="file"
-                          accept="image/*"
-                          className="hidden"
-                          onChange={(e) => handleFileSelect(e, setLogoPreview)}
-                        />
-                        {logoPreview ? (
-                          <div className="group relative overflow-hidden rounded-lg border">
-                            <img
-                              src={logoPreview}
-                              alt="Logo preview"
-                              className="aspect-square w-full object-cover"
-                            />
-                            <div className="absolute inset-0 flex items-center justify-center gap-2 bg-background/80 opacity-0 transition-opacity group-hover:opacity-100">
-                              <Button
-                                type="button"
-                                variant="outline"
-                                size="sm"
-                                onClick={() => logoInputRef.current?.click()}
-                              >
-                                {t('form.fields.logo.change')}
-                              </Button>
-                              <Button
-                                type="button"
-                                variant="outline"
-                                size="sm"
-                                onClick={() => setLogoPreview(null)}
-                              >
-                                <XCircle className="size-4" />
-                              </Button>
-                            </div>
-                          </div>
-                        ) : (
-                          <button
-                            type="button"
-                            onClick={() => logoInputRef.current?.click()}
-                            className="flex aspect-square w-full cursor-pointer flex-col items-center justify-center gap-2 rounded-lg border-2 border-dashed transition-colors hover:border-foreground/30 hover:bg-muted/50"
-                          >
-                            <Upload className="size-8 text-muted-foreground/50" />
-                            <span className="text-xs text-muted-foreground">
-                              {t('form.fields.logo.clickToUpload')}
-                            </span>
-                          </button>
-                        )}
-                      </Field>
+                    <div className="grid gap-4 xl:grid-cols-[minmax(0,0.95fr)_minmax(0,1.25fr)]">
+                      <MediaUploadField
+                        label={t('form.fields.logo.label')}
+                        description={t('form.fields.logo.description')}
+                        uploadLabel={t('form.fields.logo.clickToUpload')}
+                        changeLabel={t('form.fields.logo.change')}
+                        removeLabel={t('form.fields.logo.remove')}
+                        emptyTitle={t('form.fields.logo.emptyTitle')}
+                        preview={logoPreview}
+                        previewAlt={t('form.fields.logo.previewAlt')}
+                        inputRef={logoInputRef}
+                        onInputChange={(e) =>
+                          handleFileSelect(e, setLogoPreview)
+                        }
+                        onClear={() => setLogoPreview(null)}
+                        icon={ImageIcon}
+                        aspectClassName="aspect-square"
+                        compactPreview
+                      />
 
-                      {/* Banner Upload */}
-                      <Field>
-                        <FieldLabel>{t('form.fields.banner.label')}</FieldLabel>
-                        <FieldDescription>
-                          {t('form.fields.banner.description')}
-                        </FieldDescription>
-                        <input
-                          ref={bannerInputRef}
-                          type="file"
-                          accept="image/*"
-                          className="hidden"
-                          onChange={(e) =>
-                            handleFileSelect(e, setBannerPreview)
-                          }
-                        />
-                        {bannerPreview ? (
-                          <div className="group relative overflow-hidden rounded-lg border">
-                            <img
-                              src={bannerPreview}
-                              alt="Banner preview"
-                              className="aspect-video w-full object-cover"
-                            />
-                            <div className="absolute inset-0 flex items-center justify-center gap-2 bg-background/80 opacity-0 transition-opacity group-hover:opacity-100">
-                              <Button
-                                type="button"
-                                variant="outline"
-                                size="sm"
-                                onClick={() => bannerInputRef.current?.click()}
-                              >
-                                {t('form.fields.banner.change')}
-                              </Button>
-                              <Button
-                                type="button"
-                                variant="outline"
-                                size="sm"
-                                onClick={() => setBannerPreview(null)}
-                              >
-                                <XCircle className="size-4" />
-                              </Button>
-                            </div>
-                          </div>
-                        ) : (
-                          <button
-                            type="button"
-                            onClick={() => bannerInputRef.current?.click()}
-                            className="flex aspect-video w-full cursor-pointer flex-col items-center justify-center gap-2 rounded-lg border-2 border-dashed transition-colors hover:border-foreground/30 hover:bg-muted/50"
-                          >
-                            <ImageIcon className="size-8 text-muted-foreground/50" />
-                            <span className="text-xs text-muted-foreground">
-                              {t('form.fields.banner.clickToUpload')}
-                            </span>
-                          </button>
-                        )}
-                      </Field>
+                      <MediaUploadField
+                        label={t('form.fields.banner.label')}
+                        description={t('form.fields.banner.description')}
+                        uploadLabel={t('form.fields.banner.clickToUpload')}
+                        changeLabel={t('form.fields.banner.change')}
+                        removeLabel={t('form.fields.banner.remove')}
+                        emptyTitle={t('form.fields.banner.emptyTitle')}
+                        preview={bannerPreview}
+                        previewAlt={t('form.fields.banner.previewAlt')}
+                        inputRef={bannerInputRef}
+                        onInputChange={(e) =>
+                          handleFileSelect(e, setBannerPreview)
+                        }
+                        onClear={() => setBannerPreview(null)}
+                        icon={ImageIcon}
+                        aspectClassName="aspect-[16/9]"
+                      />
                     </div>
 
                     <Separator />

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';
@@ -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