@hed-hog/lms 0.0.330 → 0.0.338

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

@@ -56,6 +56,7 @@ import {
 } from 'lucide-react';
 import { useTranslations } from 'next-intl';
 import { useEffect, useState } from 'react';
+import { usePersistedPageSize } from '@/hooks/use-persisted-page-size';
 import { toast } from 'sonner';
 import { InstructorFormSheet } from './_components/instructor-form-sheet';
 import type {
@@ -73,6 +74,15 @@ const QUALIFICATION_LABELS: Record<string, string> = {
   'class-sessions': 'Sessões de turma',
 };
 
+function getQualificationLabel(
+  slug: string,
+  t: (key: string) => string
+): string {
+  if (slug === 'course-lessons') return t('qualificationLabels.courseLessons');
+  if (slug === 'class-sessions') return t('qualificationLabels.classSessions');
+  return QUALIFICATION_LABELS[slug] ?? slug;
+}
+
 function getInstructorInitials(name: string) {
   return name
     .split(' ')
@@ -93,7 +103,11 @@ export default function InstructorsPage() {
   const t = useTranslations('lms.InstructorsPage');
 
   const [page, setPage] = useState(1);
-  const [pageSize, setPageSize] = useState(12);
+  const [pageSize, setPageSize] = usePersistedPageSize({
+    storageKey: 'pagination:global:pageSize',
+    defaultValue: 12,
+    allowedValues: [6, 12, 24, 48],
+  });
   const [searchInput, setSearchInput] = useState('');
   const [debouncedSearch, setDebouncedSearch] = useState('');
   const [statusFilter, setStatusFilter] = useState('all');
@@ -239,7 +253,7 @@ export default function InstructorsPage() {
   const statsCards = [
     {
       key: 'total',
-      title: 'Total de instrutores',
+      title: t('kpis.total'),
       value: stats.total,
       icon: Users,
       accentClassName: 'from-slate-500/20 via-slate-400/10 to-transparent',
@@ -247,7 +261,7 @@ export default function InstructorsPage() {
     },
     {
       key: 'active',
-      title: 'Ativos',
+      title: t('kpis.active'),
       value: stats.active,
       icon: UserRoundPen,
       accentClassName: 'from-green-500/20 via-emerald-500/10 to-transparent',
@@ -255,7 +269,7 @@ export default function InstructorsPage() {
     },
     {
       key: 'inactive',
-      title: 'Inativos',
+      title: t('kpis.inactive'),
       value: stats.inactive,
       icon: UserRoundPen,
       accentClassName: 'from-gray-500/20 via-gray-400/10 to-transparent',
@@ -272,11 +286,11 @@ export default function InstructorsPage() {
         setStatusFilter(value);
         setPage(1);
       },
-      placeholder: 'Filtrar por status',
+      placeholder: t('filters.statusPlaceholder'),
       options: [
-        { value: 'all', label: 'Todos os status' },
-        { value: 'active', label: 'Ativo' },
-        { value: 'inactive', label: 'Inativo' },
+        { value: 'all', label: t('filters.allStatuses') },
+        { value: 'active', label: t('form.fields.active') },
+        { value: 'inactive', label: t('form.fields.inactive') },
       ],
     },
     {
@@ -287,11 +301,17 @@ export default function InstructorsPage() {
         setQualificationFilter(value);
         setPage(1);
       },
-      placeholder: 'Filtrar por qualificação',
+      placeholder: t('filters.qualificationPlaceholder'),
       options: [
-        { value: 'all', label: 'Todas as qualificações' },
-        { value: 'course-lessons', label: 'Aulas de curso' },
-        { value: 'class-sessions', label: 'Sessões de turma' },
+        { value: 'all', label: t('filters.allQualifications') },
+        {
+          value: 'course-lessons',
+          label: t('qualificationLabels.courseLessons'),
+        },
+        {
+          value: 'class-sessions',
+          label: t('qualificationLabels.classSessions'),
+        },
       ],
     },
   ];
@@ -300,15 +320,15 @@ export default function InstructorsPage() {
     <Page>
       <PageHeader
         breadcrumbs={[
-          { label: 'Home', href: '/' },
-          { label: 'LMS', href: '/lms' },
-          { label: 'Instrutores' },
+          { label: t('breadcrumbs.home'), href: '/' },
+          { label: t('breadcrumbs.lms'), href: '/lms' },
+          { label: t('breadcrumbs.instructors') },
         ]}
-        title="Instrutores"
-        description="Gerencie os perfis de instrutores da plataforma."
+        title={t('header.title')}
+        description={t('header.description')}
         actions={[
           {
-            label: 'Novo Instrutor',
+            label: t('form.title'),
             onClick: openCreateSheet,
             icon: <Plus className="h-4 w-4" />,
           },
@@ -325,14 +345,14 @@ export default function InstructorsPage() {
               setSearchInput(value);
             }}
             onSearch={() => setPage(1)}
-            placeholder="Buscar por nome ou e-mail..."
+            placeholder={t('search.placeholder')}
             controls={searchControls}
-          />
+          />{' '}
         </div>
 
         <div className="flex items-center justify-between gap-3 sm:justify-start xl:justify-end">
           <span className="text-xs font-medium text-muted-foreground">
-            Visualização
+            {t('viewMode.label')}
           </span>
           <ToggleGroup
             type="single"
@@ -340,23 +360,23 @@ export default function InstructorsPage() {
             onValueChange={handleViewModeChange}
             variant="outline"
             size="sm"
-            aria-label="Modo de visualização"
+            aria-label={t('viewMode.ariaLabel')}
           >
             <ToggleGroupItem
               value="table"
               className="gap-1.5 px-2.5"
-              aria-label="Tabela"
+              aria-label={t('viewMode.tableAriaLabel')}
             >
               <List className="h-4 w-4" />
-              <span className="hidden sm:inline">Tabela</span>
+              <span className="hidden sm:inline">{t('viewMode.table')}</span>
             </ToggleGroupItem>
             <ToggleGroupItem
               value="cards"
               className="gap-1.5 px-2.5"
-              aria-label="Cards"
+              aria-label={t('viewMode.cardsAriaLabel')}
             >
               <LayoutGrid className="h-4 w-4" />
-              <span className="hidden sm:inline">Cards</span>
+              <span className="hidden sm:inline">{t('viewMode.cards')}</span>
             </ToggleGroupItem>
           </ToggleGroup>
         </div>
@@ -393,9 +413,9 @@ export default function InstructorsPage() {
       ) : paginate.data.length === 0 ? (
         <EmptyState
           icon={<UserRoundPen className="h-12 w-12" />}
-          title="Nenhum instrutor encontrado"
-          description="Crie um novo instrutor ou ajuste os filtros de busca."
-          actionLabel="Novo Instrutor"
+          title={t('emptyState.title')}
+          description={t('emptyState.description')}
+          actionLabel={t('form.title')}
           actionIcon={<Plus className="mr-2 h-4 w-4" />}
           onAction={openCreateSheet}
         />
@@ -406,14 +426,14 @@ export default function InstructorsPage() {
               <Table>
                 <TableHeader>
                   <TableRow>
-                    <TableHead>Instrutor</TableHead>
-                    <TableHead>E-mail</TableHead>
-                    <TableHead>Telefone</TableHead>
-                    <TableHead>Qualificações</TableHead>
-                    <TableHead>Skills</TableHead>
-                    <TableHead>Valor/hora</TableHead>
-                    <TableHead>Training</TableHead>
-                    <TableHead>Status</TableHead>
+                    <TableHead>{t('table.instructor')}</TableHead>
+                    <TableHead>{t('table.email')}</TableHead>
+                    <TableHead>{t('table.phone')}</TableHead>
+                    <TableHead>{t('table.qualifications')}</TableHead>
+                    <TableHead>{t('table.skills')}</TableHead>
+                    <TableHead>{t('table.hourlyRate')}</TableHead>
+                    <TableHead>{t('table.training')}</TableHead>
+                    <TableHead>{t('table.status')}</TableHead>
                     <TableHead className="w-10" />
                   </TableRow>
                 </TableHeader>
@@ -476,7 +496,7 @@ export default function InstructorsPage() {
                                 variant="outline"
                                 className="border-blue-500/20 bg-blue-500/10 px-2 py-0.5 text-[11px] font-medium text-blue-600"
                               >
-                                {QUALIFICATION_LABELS[slug] ?? slug}
+                                {getQualificationLabel(slug, t)}
                               </Badge>
                             )
                           )}
@@ -518,14 +538,14 @@ export default function InstructorsPage() {
                             variant="outline"
                             className="border-amber-500/20 bg-amber-500/10 px-2.5 py-1 text-xs font-medium text-amber-600"
                           >
-                            Ativo
+                            {t('training.active')}
                           </Badge>
                         ) : instructor.userId ? (
                           <Badge
                             variant="outline"
                             className="border-gray-500/20 bg-gray-500/10 px-2.5 py-1 text-xs font-medium text-gray-500"
                           >
-                            Desabilitado
+                            {t('training.disabled')}
                           </Badge>
                         ) : (
                           <span className="text-xs text-muted-foreground">
@@ -543,7 +563,9 @@ export default function InstructorsPage() {
                               : 'border-gray-500/20 bg-gray-500/10 text-gray-600'
                           )}
                         >
-                          {instructor.status === 'active' ? 'Ativo' : 'Inativo'}
+                          {instructor.status === 'active'
+                            ? t('form.fields.active')
+                            : t('form.fields.inactive')}
                         </Badge>
                       </TableCell>
                       <TableCell>
@@ -562,7 +584,7 @@ export default function InstructorsPage() {
                               onClick={() => openEditSheet(instructor)}
                             >
                               <Pencil className="mr-2 h-4 w-4" />
-                              Editar
+                              {t('actions.edit')}
                             </DropdownMenuItem>
                             <DropdownMenuSeparator />
                             <DropdownMenuItem
@@ -573,7 +595,7 @@ export default function InstructorsPage() {
                               }}
                             >
                               <Trash2 className="mr-2 h-4 w-4" />
-                              Excluir
+                              {t('actions.delete')}
                             </DropdownMenuItem>
                           </DropdownMenuContent>
                         </DropdownMenu>
@@ -641,7 +663,7 @@ export default function InstructorsPage() {
                             onClick={() => openEditSheet(instructor)}
                           >
                             <Pencil className="mr-2 h-4 w-4" />
-                            Editar
+                            {t('actions.edit')}
                           </DropdownMenuItem>
                           <DropdownMenuSeparator />
                           <DropdownMenuItem
@@ -652,7 +674,7 @@ export default function InstructorsPage() {
                             }}
                           >
                             <Trash2 className="mr-2 h-4 w-4" />
-                            Excluir
+                            {t('actions.delete')}
                           </DropdownMenuItem>
                         </DropdownMenuContent>
                       </DropdownMenu>
@@ -668,7 +690,9 @@ export default function InstructorsPage() {
                             : 'border-gray-500/20 bg-gray-500/10 text-gray-600'
                         )}
                       >
-                        {instructor.status === 'active' ? 'Ativo' : 'Inativo'}
+                        {instructor.status === 'active'
+                          ? t('form.fields.active')
+                          : t('form.fields.inactive')}
                       </Badge>
                       {instructor.qualificationSlugs.map((slug) => (
                         <Badge
@@ -676,7 +700,7 @@ export default function InstructorsPage() {
                           variant="outline"
                           className="border-blue-500/20 bg-blue-500/10 px-2 py-0.5 text-[11px] font-medium text-blue-600"
                         >
-                          {QUALIFICATION_LABELS[slug] ?? slug}
+                          {getQualificationLabel(slug, t)}
                         </Badge>
                       ))}
                       {(instructor.skills ?? []).map((skill) => (
@@ -723,23 +747,23 @@ export default function InstructorsPage() {
       <AlertDialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
         <AlertDialogContent>
           <AlertDialogHeader>
-            <AlertDialogTitle>Excluir instrutor</AlertDialogTitle>
+            <AlertDialogTitle>{t('deleteDialog.title')}</AlertDialogTitle>
             <AlertDialogDescription>
-              Tem certeza que deseja excluir o instrutor{' '}
-              <strong>{instructorToDelete?.name}</strong>? Esta ação não pode
-              ser desfeita.
+              {t('deleteDialog.description', {
+                name: instructorToDelete?.name ?? '',
+              })}
             </AlertDialogDescription>
           </AlertDialogHeader>
           <div className="flex justify-end gap-2">
             <AlertDialogCancel disabled={isDeleting}>
-              Cancelar
+              {t('actions.cancel')}
             </AlertDialogCancel>
             <AlertDialogAction
               onClick={handleDeleteConfirm}
               disabled={isDeleting}
               className="bg-red-600 hover:bg-red-700"
             >
-              {isDeleting ? 'Excluindo...' : 'Excluir'}
+              {isDeleting ? t('actions.deleting') : t('actions.delete')}
             </AlertDialogAction>
           </div>
         </AlertDialogContent>

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

@@ -103,6 +103,7 @@ import {
 import { useTranslations } from 'next-intl';
 import { useRouter } from 'next/navigation';
 import { useEffect, useMemo, useRef, useState } from 'react';
+import { usePersistedPageSize } from '@/hooks/use-persisted-page-size';
 import { Controller, useForm, useWatch } from 'react-hook-form';
 import { toast } from 'sonner';
 import { z } from 'zod';
@@ -565,7 +566,11 @@ export default function TrainingPage() {
 
   // Pagination
   const [currentPage, setCurrentPage] = useState(1);
-  const [pageSize, setPageSize] = useState(12);
+  const [pageSize, setPageSize] = usePersistedPageSize({
+    storageKey: 'pagination:global:pageSize',
+    defaultValue: 12,
+    allowedValues: PAGE_SIZES,
+  });
 
   // Double-click tracking
   const clickTimers = useRef<Map<number, ReturnType<typeof setTimeout>>>(
@@ -1894,13 +1899,13 @@ export default function TrainingPage() {
             </Field>
             <Field>
               <FieldLabel htmlFor="descricao">
-                {t('form.fields.descricao.label')}{' '}
+                {t('form.fields.description.label')}{' '}
                 <span className="text-destructive">*</span>
               </FieldLabel>
               <Textarea
                 id="descricao"
                 rows={3}
-                placeholder={t('form.fields.descricao.placeholder')}
+                placeholder={t('form.fields.description.placeholder')}
                 {...form.register('descricao')}
               />
               <FieldError>
@@ -1984,7 +1989,9 @@ export default function TrainingPage() {
 
             <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
               <Field>
-                <FieldLabel htmlFor="primaryColor">Cor Primária</FieldLabel>
+                <FieldLabel htmlFor="primaryColor">
+                  {t('form.fields.primaryColor.label')}
+                </FieldLabel>
                 <Controller
                   name="primaryColor"
                   control={form.control}
@@ -2011,7 +2018,9 @@ export default function TrainingPage() {
               </Field>
 
               <Field>
-                <FieldLabel htmlFor="secondaryColor">Cor Secundária</FieldLabel>
+                <FieldLabel htmlFor="secondaryColor">
+                  {t('form.fields.secondaryColor.label')}
+                </FieldLabel>
                 <Controller
                   name="secondaryColor"
                   control={form.control}

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

@@ -429,7 +429,7 @@ export default function ReportCoursesPage() {
     }
   };
 
-  const renderEmptyState = (className = 'min-h-[180px]') => (
+  const renderEmptyState = (className = 'min-h-45') => (
     <EmptyState
       icon={Inbox}
       title={t('emptyState.title')}
@@ -495,7 +495,7 @@ export default function ReportCoursesPage() {
           <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-4">
             {Array.from({ length: 4 }).map((_, i) => (
               <Card key={i} className="overflow-hidden border-border/70 py-0">
-                <div className="h-1 w-full bg-gradient-to-r from-slate-300/70 via-slate-200 to-transparent" />
+                <div className="h-1 w-full bg-linear-to-r from-slate-300/70 via-slate-200 to-transparent" />
                 <CardContent className="p-6">
                   <Skeleton className="mb-3 h-4 w-28" />
                   <Skeleton className="mb-2 h-8 w-24" />
@@ -544,7 +544,7 @@ export default function ReportCoursesPage() {
               <Card>
                 <CardContent className="p-6">
                   <Skeleton className="mb-4 h-5 w-40" />
-                  <Skeleton className="h-[240px] w-full" />
+                  <Skeleton className="h-60 w-full" />
                 </CardContent>
               </Card>
               <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-4">
@@ -664,7 +664,7 @@ export default function ReportCoursesPage() {
                     <Table>
                       <TableHeader>
                         <TableRow>
-                          <TableHead className="w-[44px]">#</TableHead>
+                          <TableHead className="w-11">#</TableHead>
                           <TableHead>{t('table.course')}</TableHead>
                           <TableHead>{t('table.students')}</TableHead>
                           <TableHead className="hidden sm:table-cell">
@@ -789,7 +789,7 @@ export default function ReportCoursesPage() {
             {loading ? (
               <div className="p-6">
                 <Skeleton className="mb-4 h-5 w-48" />
-                <Skeleton className="h-[180px] w-full" />
+                <Skeleton className="h-45 w-full" />
               </div>
             ) : filteredCategoryPerformance.length === 0 ? (
               <div className="px-6 pb-6">

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

@@ -452,7 +452,7 @@ export default function ReportsDashboardPage() {
     }
   };
 
-  const renderEmptyState = (className = 'min-h-[180px]') => (
+  const renderEmptyState = (className = 'min-h-45') => (
     <EmptyState
       icon={Inbox}
       title={t('emptyState.title')}
@@ -493,7 +493,7 @@ export default function ReportsDashboardPage() {
           <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-4">
             {Array.from({ length: 4 }).map((_, i) => (
               <Card key={i} className="overflow-hidden border-border/70 py-0">
-                <div className="h-1 w-full bg-gradient-to-r from-slate-300/70 via-slate-200 to-transparent" />
+                <div className="h-1 w-full bg-linear-to-r from-slate-300/70 via-slate-200 to-transparent" />
                 <CardContent className="p-6">
                   <Skeleton className="mb-3 h-4 w-28" />
                   <Skeleton className="mb-2 h-8 w-24" />
@@ -534,7 +534,7 @@ export default function ReportsDashboardPage() {
               <Card>
                 <CardContent className="p-6">
                   <Skeleton className="mb-4 h-5 w-44" />
-                  <Skeleton className="h-[240px] w-full" />
+                  <Skeleton className="h-60 w-full" />
                 </CardContent>
               </Card>
               <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-4">
@@ -626,13 +626,13 @@ export default function ReportsDashboardPage() {
               <Card>
                 <CardContent className="p-6">
                   <Skeleton className="mb-4 h-5 w-40" />
-                  <Skeleton className="h-[300px] w-full" />
+                  <Skeleton className="h-75 w-full" />
                 </CardContent>
               </Card>
               <Card>
                 <CardContent className="p-6">
                   <Skeleton className="mb-4 h-5 w-40" />
-                  <Skeleton className="h-[300px] w-full" />
+                  <Skeleton className="h-75 w-full" />
                 </CardContent>
               </Card>
             </>
@@ -654,7 +654,7 @@ export default function ReportsDashboardPage() {
                     <Table>
                       <TableHeader>
                         <TableRow>
-                          <TableHead className="w-[44px]">#</TableHead>
+                          <TableHead className="w-11">#</TableHead>
                           <TableHead>{t('table.course')}</TableHead>
                           <TableHead>{t('table.students')}</TableHead>
                           <TableHead>{t('table.score')}</TableHead>
@@ -736,13 +736,13 @@ export default function ReportsDashboardPage() {
               <Card>
                 <CardContent className="p-6">
                   <Skeleton className="mb-4 h-5 w-44" />
-                  <Skeleton className="h-[260px] w-full" />
+                  <Skeleton className="h-65 w-full" />
                 </CardContent>
               </Card>
               <Card>
                 <CardContent className="p-6">
                   <Skeleton className="mb-4 h-5 w-44" />
-                  <Skeleton className="h-[260px] w-full" />
+                  <Skeleton className="h-65 w-full" />
                 </CardContent>
               </Card>
             </>

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

@@ -61,6 +61,7 @@ import {
 import { useTranslations } from 'next-intl';
 import { useRouter } from 'next/navigation';
 import { useEffect, useMemo, useRef, useState, type ReactNode } from 'react';
+import { usePersistedPageSize } from '@/hooks/use-persisted-page-size';
 import type { DateRange } from 'react-day-picker';
 
 // ── Types ─────────────────────────────────────────────────────────────────────
@@ -360,7 +361,11 @@ export default function EvaluationsReportPage() {
 
   // Pagination
   const [currentPage, setCurrentPage] = useState(1);
-  const [pageSize, setPageSize] = useState(12);
+  const [pageSize, setPageSize] = usePersistedPageSize({
+    storageKey: 'pagination:global:pageSize',
+    defaultValue: 12,
+    allowedValues: PAGE_SIZES,
+  });
 
   // Reset page when filters change
   useEffect(() => {

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

@@ -412,7 +412,7 @@ export default function ReportsDashboardPage() {
     }
   };
 
-  const renderEmptyState = (className = 'min-h-[180px]') => (
+  const renderEmptyState = (className = 'min-h-45') => (
     <div
       className={`flex flex-col items-center justify-center rounded-lg border border-dashed bg-muted/20 px-6 py-10 text-center ${className}`}
     >
@@ -496,7 +496,7 @@ export default function ReportsDashboardPage() {
               <Card>
                 <CardContent className="p-6">
                   <Skeleton className="mb-4 h-5 w-44" />
-                  <Skeleton className="h-[240px] w-full" />
+                  <Skeleton className="h-60 w-full" />
                 </CardContent>
               </Card>
               <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-4">
@@ -640,13 +640,13 @@ export default function ReportsDashboardPage() {
               <Card>
                 <CardContent className="p-6">
                   <Skeleton className="mb-4 h-5 w-40" />
-                  <Skeleton className="h-[300px] w-full" />
+                  <Skeleton className="h-75 w-full" />
                 </CardContent>
               </Card>
               <Card>
                 <CardContent className="p-6">
                   <Skeleton className="mb-4 h-5 w-40" />
-                  <Skeleton className="h-[300px] w-full" />
+                  <Skeleton className="h-75 w-full" />
                 </CardContent>
               </Card>
             </>
@@ -668,7 +668,7 @@ export default function ReportsDashboardPage() {
                     <Table>
                       <TableHeader>
                         <TableRow>
-                          <TableHead className="w-[44px]">#</TableHead>
+                          <TableHead className="w-11">#</TableHead>
                           <TableHead>{t('table.course')}</TableHead>
                           <TableHead>{t('table.students')}</TableHead>
                           <TableHead>{t('table.score')}</TableHead>
@@ -750,13 +750,13 @@ export default function ReportsDashboardPage() {
               <Card>
                 <CardContent className="p-6">
                   <Skeleton className="mb-4 h-5 w-44" />
-                  <Skeleton className="h-[260px] w-full" />
+                  <Skeleton className="h-65 w-full" />
                 </CardContent>
               </Card>
               <Card>
                 <CardContent className="p-6">
                   <Skeleton className="mb-4 h-5 w-44" />
-                  <Skeleton className="h-[260px] w-full" />
+                  <Skeleton className="h-65 w-full" />
                 </CardContent>
               </Card>
             </>

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

@@ -422,7 +422,7 @@ export default function ReportStudentsPage() {
     }
   };
 
-  const renderEmptyState = (className = 'min-h-[180px]') => (
+  const renderEmptyState = (className = 'min-h-45') => (
     <EmptyState
       icon={Inbox}
       title={t('emptyState.title')}
@@ -480,7 +480,7 @@ export default function ReportStudentsPage() {
           <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-4">
             {Array.from({ length: 4 }).map((_, i) => (
               <Card key={i} className="overflow-hidden border-border/70 py-0">
-                <div className="h-1 w-full bg-gradient-to-r from-slate-300/70 via-slate-200 to-transparent" />
+                <div className="h-1 w-full bg-linear-to-r from-slate-300/70 via-slate-200 to-transparent" />
                 <CardContent className="p-6">
                   <Skeleton className="mb-3 h-4 w-28" />
                   <Skeleton className="mb-2 h-8 w-24" />
@@ -529,7 +529,7 @@ export default function ReportStudentsPage() {
               <Card>
                 <CardContent className="p-6">
                   <Skeleton className="mb-4 h-5 w-44" />
-                  <Skeleton className="h-[240px] w-full" />
+                  <Skeleton className="h-60 w-full" />
                 </CardContent>
               </Card>
               <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-4">
@@ -611,13 +611,13 @@ export default function ReportStudentsPage() {
               <Card>
                 <CardContent className="p-6">
                   <Skeleton className="mb-4 h-5 w-40" />
-                  <Skeleton className="h-[300px] w-full" />
+                  <Skeleton className="h-75 w-full" />
                 </CardContent>
               </Card>
               <Card>
                 <CardContent className="p-6">
                   <Skeleton className="mb-4 h-5 w-44" />
-                  <Skeleton className="h-[300px] w-full" />
+                  <Skeleton className="h-75 w-full" />
                 </CardContent>
               </Card>
             </>
@@ -718,7 +718,7 @@ export default function ReportStudentsPage() {
             {loading ? (
               <div className="p-6">
                 <Skeleton className="mb-4 h-5 w-48" />
-                <Skeleton className="h-[180px] w-full" />
+                <Skeleton className="h-45 w-full" />
               </div>
             ) : filteredCategoryPerformance.length === 0 ? (
               <div className="px-6 pb-6">