@hed-hog/lms 0.0.358 → 0.0.364

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

@@ -20,15 +20,8 @@ import {
 } from '@/components/ui/alert-dialog';
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
 import { Badge } from '@/components/ui/badge';
-import { Button } from '@/components/ui/button';
 import { Card, CardContent } from '@/components/ui/card';
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu';
+import { IconActionGroup } from '@/components/ui/icon-action-group';
 import { KpiCardsGrid } from '@/components/ui/kpi-cards-grid';
 import { Skeleton } from '@/components/ui/skeleton';
 import {
@@ -40,13 +33,13 @@ import {
   TableRow,
 } from '@/components/ui/table';
 import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group';
+import { usePersistedPageSize } from '@/hooks/use-persisted-page-size';
 import { cn } from '@/lib/utils';
 import { useApp, useQuery } from '@hed-hog/next-app-provider';
 import {
   LayoutGrid,
   List,
   Mail,
-  MoreHorizontal,
   Pencil,
   Phone,
   Plus,
@@ -56,7 +49,6 @@ 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 {
@@ -569,36 +561,27 @@ export default function InstructorsPage() {
                         </Badge>
                       </TableCell>
                       <TableCell>
-                        <DropdownMenu>
-                          <DropdownMenuTrigger asChild>
-                            <Button
-                              variant="ghost"
-                              size="icon"
-                              className="h-8 w-8"
-                            >
-                              <MoreHorizontal className="h-4 w-4" />
-                            </Button>
-                          </DropdownMenuTrigger>
-                          <DropdownMenuContent align="end">
-                            <DropdownMenuItem
-                              onClick={() => openEditSheet(instructor)}
-                            >
-                              <Pencil className="mr-2 h-4 w-4" />
-                              {t('actions.edit')}
-                            </DropdownMenuItem>
-                            <DropdownMenuSeparator />
-                            <DropdownMenuItem
-                              className="text-red-600"
-                              onClick={() => {
+                        <IconActionGroup
+                          className="ml-auto"
+                          actions={[
+                            {
+                              key: 'edit',
+                              label: t('actions.edit'),
+                              icon: <Pencil className="size-4" />,
+                              onClick: () => openEditSheet(instructor),
+                            },
+                            {
+                              key: 'delete',
+                              label: t('actions.delete'),
+                              icon: <Trash2 className="size-4" />,
+                              onClick: () => {
                                 setInstructorToDelete(instructor);
                                 setDeleteDialogOpen(true);
-                              }}
-                            >
-                              <Trash2 className="mr-2 h-4 w-4" />
-                              {t('actions.delete')}
-                            </DropdownMenuItem>
-                          </DropdownMenuContent>
-                        </DropdownMenu>
+                              },
+                              destructive: true,
+                            },
+                          ]}
+                        />
                       </TableCell>
                     </TableRow>
                   ))}
@@ -648,36 +631,27 @@ export default function InstructorsPage() {
                         </div>
                       </div>
 
-                      <DropdownMenu>
-                        <DropdownMenuTrigger asChild>
-                          <Button
-                            variant="ghost"
-                            size="icon"
-                            className="h-8 w-8 shrink-0 opacity-0 transition-opacity group-hover:opacity-100"
-                          >
-                            <MoreHorizontal className="h-4 w-4" />
-                          </Button>
-                        </DropdownMenuTrigger>
-                        <DropdownMenuContent align="end">
-                          <DropdownMenuItem
-                            onClick={() => openEditSheet(instructor)}
-                          >
-                            <Pencil className="mr-2 h-4 w-4" />
-                            {t('actions.edit')}
-                          </DropdownMenuItem>
-                          <DropdownMenuSeparator />
-                          <DropdownMenuItem
-                            className="text-red-600"
-                            onClick={() => {
+                      <IconActionGroup
+                        className="opacity-0 transition-opacity group-hover:opacity-100"
+                        actions={[
+                          {
+                            key: 'edit',
+                            label: t('actions.edit'),
+                            icon: <Pencil className="size-4" />,
+                            onClick: () => openEditSheet(instructor),
+                          },
+                          {
+                            key: 'delete',
+                            label: t('actions.delete'),
+                            icon: <Trash2 className="size-4" />,
+                            onClick: () => {
                               setInstructorToDelete(instructor);
                               setDeleteDialogOpen(true);
-                            }}
-                          >
-                            <Trash2 className="mr-2 h-4 w-4" />
-                            {t('actions.delete')}
-                          </DropdownMenuItem>
-                        </DropdownMenuContent>
-                      </DropdownMenu>
+                            },
+                            destructive: true,
+                          },
+                        ]}
+                      />
                     </div>
 
                     <div className="flex flex-wrap gap-1.5">
@@ -694,30 +668,47 @@ export default function InstructorsPage() {
                           ? t('form.fields.active')
                           : t('form.fields.inactive')}
                       </Badge>
-                      {instructor.qualificationSlugs.map((slug) => (
+
+                      {instructor.hasTrainingAccess ? (
                         <Badge
-                          key={slug}
                           variant="outline"
-                          className="border-blue-500/20 bg-blue-500/10 px-2 py-0.5 text-[11px] font-medium text-blue-600"
+                          className="border-amber-500/20 bg-amber-500/10 px-2 py-0.5 text-[11px] font-medium text-amber-600"
                         >
-                          {getQualificationLabel(slug, t)}
+                          {t('training.active')}
                         </Badge>
-                      ))}
-                      {(instructor.skills ?? []).map((skill) => (
+                      ) : instructor.userId ? (
                         <Badge
-                          key={skill.slug}
                           variant="outline"
-                          className="border-purple-500/20 bg-purple-500/10 px-2 py-0.5 text-[11px] font-medium text-purple-600"
+                          className="border-gray-500/20 bg-gray-500/10 px-2 py-0.5 text-[11px] font-medium text-gray-500"
                         >
-                          {skill.name}
+                          {t('training.disabled')}
                         </Badge>
-                      ))}
+                      ) : null}
+                    </div>
+
+                    <div className="flex flex-wrap gap-1">
+                      {(instructor.skills ?? []).length > 0 ? (
+                        (instructor.skills ?? []).map((skill) => (
+                          <Badge
+                            key={skill.slug}
+                            variant="outline"
+                            className="border-purple-500/20 bg-purple-500/10 px-2 py-0.5 text-[11px] font-medium text-purple-600"
+                          >
+                            {skill.name}
+                          </Badge>
+                        ))
+                      ) : (
+                        <span className="text-xs text-muted-foreground">—</span>
+                      )}
+                    </div>
+
+                    <div className="text-xs text-muted-foreground">
+                      {instructor.hourlyRate != null
+                        ? `R$ ${instructor.hourlyRate.toLocaleString('pt-BR', {
+                            minimumFractionDigits: 2,
+                          })}`
+                        : '—'}
                     </div>
-                    {instructor.hourlyRate != null && (
-                      <p className="text-xs text-muted-foreground">
-                        {`R$ ${instructor.hourlyRate.toLocaleString('pt-BR', { minimumFractionDigits: 2 })}`}
-                      </p>
-                    )}
                   </CardContent>
                 </Card>
               ))}

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

@@ -27,16 +27,11 @@ import {
   DialogHeader,
   DialogTitle,
 } from '@/components/ui/dialog';
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu';
 import { Field, FieldError, FieldLabel } from '@/components/ui/field';
+import { IconActionGroup } from '@/components/ui/icon-action-group';
 import { Input } from '@/components/ui/input';
 import { KpiCardsGrid } from '@/components/ui/kpi-cards-grid';
+import { ResizableSheetContent } from '@/components/ui/resizable-sheet-content';
 import {
   Select,
   SelectContent,
@@ -52,7 +47,6 @@ import {
   SheetHeader,
   SheetTitle,
 } from '@/components/ui/sheet';
-import { ResizableSheetContent } from '@/components/ui/resizable-sheet-content';
 import { Skeleton } from '@/components/ui/skeleton';
 import { Switch } from '@/components/ui/switch';
 import {
@@ -93,7 +87,6 @@ import {
   GripVertical,
   Layers,
   Loader2,
-  MoreHorizontal,
   Pencil,
   Plus,
   Target,
@@ -950,8 +943,8 @@ export default function TrainingPage() {
     filtroStatusInput !== 'todos' ||
     filtroNivelInput !== 'todos';
 
-  function openDeleteDialog(formacao: Formacao, e: React.MouseEvent) {
-    e.stopPropagation();
+  function openDeleteDialog(formacao: Formacao, e?: React.MouseEvent) {
+    e?.stopPropagation();
     setFormacaoToDelete(formacao);
     setDeleteDialogOpen(true);
   }
@@ -1668,35 +1661,24 @@ export default function TrainingPage() {
                               {statusCfg.label}
                             </Badge>
                           </div>
-                          <DropdownMenu>
-                            <DropdownMenuTrigger asChild>
-                              <Button
-                                variant="ghost"
-                                size="icon"
-                                className="size-8 shrink-0 -mr-2 -mt-1"
-                                onClick={(e) => e.stopPropagation()}
-                                aria-label={t('cards.actions.label')}
-                              >
-                                <MoreHorizontal className="size-4" />
-                              </Button>
-                            </DropdownMenuTrigger>
-                            <DropdownMenuContent align="end" className="w-48">
-                              <DropdownMenuItem
-                                onClick={(e) => openEditSheet(formacao, e)}
-                              >
-                                <Pencil className="mr-2 size-4" />{' '}
-                                {t('cards.actions.edit')}
-                              </DropdownMenuItem>
-                              <DropdownMenuSeparator />
-                              <DropdownMenuItem
-                                className="text-destructive focus:text-destructive"
-                                onClick={(e) => openDeleteDialog(formacao, e)}
-                              >
-                                <Trash2 className="mr-2 size-4" />{' '}
-                                {t('cards.actions.delete')}
-                              </DropdownMenuItem>
-                            </DropdownMenuContent>
-                          </DropdownMenu>
+                          <IconActionGroup
+                            className="-mr-2 -mt-1"
+                            actions={[
+                              {
+                                key: 'edit',
+                                label: t('cards.actions.edit'),
+                                icon: <Pencil className="size-4" />,
+                                onClick: () => openEditSheet(formacao),
+                              },
+                              {
+                                key: 'delete',
+                                label: t('cards.actions.delete'),
+                                icon: <Trash2 className="size-4" />,
+                                onClick: () => openDeleteDialog(formacao),
+                                destructive: true,
+                              },
+                            ]}
+                          />
                         </div>
 
                         <h3 className="mb-0.5 font-semibold leading-tight">
@@ -1825,34 +1807,24 @@ export default function TrainingPage() {
                           {formacao.alunos.toLocaleString('pt-BR')}
                         </TableCell>
                         <TableCell onClick={(e) => e.stopPropagation()}>
-                          <DropdownMenu>
-                            <DropdownMenuTrigger asChild>
-                              <Button
-                                variant="ghost"
-                                size="icon"
-                                className="ml-auto size-8"
-                                aria-label={t('cards.actions.label')}
-                              >
-                                <MoreHorizontal className="size-4" />
-                              </Button>
-                            </DropdownMenuTrigger>
-                            <DropdownMenuContent align="end" className="w-48">
-                              <DropdownMenuItem
-                                onClick={() => openEditSheet(formacao)}
-                              >
-                                <Pencil className="mr-2 size-4" />{' '}
-                                {t('cards.actions.edit')}
-                              </DropdownMenuItem>
-                              <DropdownMenuSeparator />
-                              <DropdownMenuItem
-                                className="text-destructive focus:text-destructive"
-                                onClick={(e) => openDeleteDialog(formacao, e)}
-                              >
-                                <Trash2 className="mr-2 size-4" />{' '}
-                                {t('cards.actions.delete')}
-                              </DropdownMenuItem>
-                            </DropdownMenuContent>
-                          </DropdownMenu>
+                          <IconActionGroup
+                            className="ml-auto"
+                            actions={[
+                              {
+                                key: 'edit',
+                                label: t('cards.actions.edit'),
+                                icon: <Pencil className="size-4" />,
+                                onClick: () => openEditSheet(formacao),
+                              },
+                              {
+                                key: 'delete',
+                                label: t('cards.actions.delete'),
+                                icon: <Trash2 className="size-4" />,
+                                onClick: () => openDeleteDialog(formacao),
+                                destructive: true,
+                              },
+                            ]}
+                          />
                         </TableCell>
                       </TableRow>
                     );

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

@@ -26,16 +26,11 @@ import {
   DialogHeader,
   DialogTitle,
 } from '@/components/ui/dialog';
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu';
 import { Field, FieldError, FieldLabel } from '@/components/ui/field';
+import { IconActionGroup } from '@/components/ui/icon-action-group';
 import { Input } from '@/components/ui/input';
 import { KpiCardsGrid } from '@/components/ui/kpi-cards-grid';
+import { ResizableSheetContent } from '@/components/ui/resizable-sheet-content';
 import {
   Select,
   SelectContent,
@@ -51,7 +46,6 @@ import {
   SheetHeader,
   SheetTitle,
 } from '@/components/ui/sheet';
-import { ResizableSheetContent } from '@/components/ui/resizable-sheet-content';
 import { Skeleton } from '@/components/ui/skeleton';
 import { Switch } from '@/components/ui/switch';
 import {
@@ -92,7 +86,6 @@ import {
   GripVertical,
   Layers,
   Loader2,
-  MoreHorizontal,
   Pencil,
   Plus,
   Target,
@@ -936,8 +929,8 @@ export default function TrainingPage() {
     filtroStatusInput !== 'todos' ||
     filtroNivelInput !== 'todos';
 
-  function openDeleteDialog(formacao: Formacao, e: React.MouseEvent) {
-    e.stopPropagation();
+  function openDeleteDialog(formacao: Formacao, e?: React.MouseEvent) {
+    e?.stopPropagation();
     setFormacaoToDelete(formacao);
     setDeleteDialogOpen(true);
   }
@@ -1658,35 +1651,24 @@ export default function TrainingPage() {
                               {statusCfg.label}
                             </Badge>
                           </div>
-                          <DropdownMenu>
-                            <DropdownMenuTrigger asChild>
-                              <Button
-                                variant="ghost"
-                                size="icon"
-                                className="size-8 shrink-0 -mr-2 -mt-1"
-                                onClick={(e) => e.stopPropagation()}
-                                aria-label={t('cards.actions.label')}
-                              >
-                                <MoreHorizontal className="size-4" />
-                              </Button>
-                            </DropdownMenuTrigger>
-                            <DropdownMenuContent align="end" className="w-48">
-                              <DropdownMenuItem
-                                onClick={(e) => openEditSheet(formacao, e)}
-                              >
-                                <Pencil className="mr-2 size-4" />{' '}
-                                {t('cards.actions.edit')}
-                              </DropdownMenuItem>
-                              <DropdownMenuSeparator />
-                              <DropdownMenuItem
-                                className="text-destructive focus:text-destructive"
-                                onClick={(e) => openDeleteDialog(formacao, e)}
-                              >
-                                <Trash2 className="mr-2 size-4" />{' '}
-                                {t('cards.actions.delete')}
-                              </DropdownMenuItem>
-                            </DropdownMenuContent>
-                          </DropdownMenu>
+                          <IconActionGroup
+                            className="-mr-2 -mt-1"
+                            actions={[
+                              {
+                                key: 'edit',
+                                label: t('cards.actions.edit'),
+                                icon: <Pencil className="size-4" />,
+                                onClick: () => openEditSheet(formacao),
+                              },
+                              {
+                                key: 'delete',
+                                label: t('cards.actions.delete'),
+                                icon: <Trash2 className="size-4" />,
+                                onClick: () => openDeleteDialog(formacao),
+                                destructive: true,
+                              },
+                            ]}
+                          />
                         </div>
 
                         <h3 className="mb-0.5 font-semibold leading-tight">
@@ -1815,34 +1797,24 @@ export default function TrainingPage() {
                           {formacao.alunos.toLocaleString('pt-BR')}
                         </TableCell>
                         <TableCell onClick={(e) => e.stopPropagation()}>
-                          <DropdownMenu>
-                            <DropdownMenuTrigger asChild>
-                              <Button
-                                variant="ghost"
-                                size="icon"
-                                className="ml-auto size-8"
-                                aria-label={t('cards.actions.label')}
-                              >
-                                <MoreHorizontal className="size-4" />
-                              </Button>
-                            </DropdownMenuTrigger>
-                            <DropdownMenuContent align="end" className="w-48">
-                              <DropdownMenuItem
-                                onClick={() => openEditSheet(formacao)}
-                              >
-                                <Pencil className="mr-2 size-4" />{' '}
-                                {t('cards.actions.edit')}
-                              </DropdownMenuItem>
-                              <DropdownMenuSeparator />
-                              <DropdownMenuItem
-                                className="text-destructive focus:text-destructive"
-                                onClick={(e) => openDeleteDialog(formacao, e)}
-                              >
-                                <Trash2 className="mr-2 size-4" />{' '}
-                                {t('cards.actions.delete')}
-                              </DropdownMenuItem>
-                            </DropdownMenuContent>
-                          </DropdownMenu>
+                          <IconActionGroup
+                            className="ml-auto"
+                            actions={[
+                              {
+                                key: 'edit',
+                                label: t('cards.actions.edit'),
+                                icon: <Pencil className="size-4" />,
+                                onClick: () => openEditSheet(formacao),
+                              },
+                              {
+                                key: 'delete',
+                                label: t('cards.actions.delete'),
+                                icon: <Trash2 className="size-4" />,
+                                onClick: () => openDeleteDialog(formacao),
+                                destructive: true,
+                              },
+                            ]}
+                          />
                         </TableCell>
                       </TableRow>
                     );