@hed-hog/lms 0.0.314 → 0.0.316

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

@@ -0,0 +1,696 @@
+'use client';
+
+import {
+  EmptyState,
+  Page,
+  PageHeader,
+  PaginationFooter,
+  SearchBar,
+  type SearchBarControl,
+} from '@/components/entity-list';
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} 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 { KpiCardsGrid } from '@/components/ui/kpi-cards-grid';
+import { Skeleton } from '@/components/ui/skeleton';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group';
+import { cn } from '@/lib/utils';
+import { useApp, useQuery } from '@hed-hog/next-app-provider';
+import {
+  LayoutGrid,
+  List,
+  Mail,
+  MoreHorizontal,
+  Pencil,
+  Phone,
+  Plus,
+  Trash2,
+  UserRoundPen,
+  Users,
+} from 'lucide-react';
+import { useEffect, useState } from 'react';
+import { toast } from 'sonner';
+import { InstructorFormSheet } from './_components/instructor-form-sheet';
+import type {
+  InstructorPaginatedResult,
+  InstructorRow,
+  InstructorStats,
+} from './_components/instructor-types';
+
+const VIEW_STORAGE_KEY = 'lms:instructors:view-mode';
+
+type ViewMode = 'table' | 'cards';
+
+const QUALIFICATION_LABELS: Record<string, string> = {
+  'course-lessons': 'Aulas de curso',
+  'class-sessions': 'Sessões de turma',
+};
+
+function getInstructorInitials(name: string) {
+  return name
+    .split(' ')
+    .filter(Boolean)
+    .slice(0, 2)
+    .map((part) => part[0]?.toUpperCase() || '')
+    .join('');
+}
+
+function getAvatarUrl(avatarId?: number | null) {
+  return typeof avatarId === 'number' && avatarId > 0
+    ? `${process.env.NEXT_PUBLIC_API_BASE_URL}/person/avatar/${avatarId}`
+    : undefined;
+}
+
+export default function InstructorsPage() {
+  const { request } = useApp();
+
+  const [page, setPage] = useState(1);
+  const [pageSize, setPageSize] = useState(12);
+  const [searchInput, setSearchInput] = useState('');
+  const [debouncedSearch, setDebouncedSearch] = useState('');
+  const [statusFilter, setStatusFilter] = useState('all');
+  const [qualificationFilter, setQualificationFilter] = useState('all');
+  const [viewMode, setViewMode] = useState<ViewMode>('table');
+  const [sheetOpen, setSheetOpen] = useState(false);
+  const [instructorToEdit, setInstructorToEdit] =
+    useState<InstructorRow | null>(null);
+  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
+  const [instructorToDelete, setInstructorToDelete] =
+    useState<InstructorRow | null>(null);
+  const [isDeleting, setIsDeleting] = useState(false);
+
+  // Debounce search
+  useEffect(() => {
+    const timeout = setTimeout(() => {
+      setDebouncedSearch(searchInput.trim());
+      setPage(1);
+    }, 300);
+    return () => clearTimeout(timeout);
+  }, [searchInput]);
+
+  // Restore view mode from localStorage
+  useEffect(() => {
+    try {
+      const saved = window.localStorage.getItem(VIEW_STORAGE_KEY);
+      if (saved === 'table' || saved === 'cards') {
+        setViewMode(saved);
+      }
+    } catch {
+      // Ignore
+    }
+  }, []);
+
+  const handleViewModeChange = (value: string) => {
+    if (value !== 'table' && value !== 'cards') return;
+    setViewMode(value);
+    try {
+      window.localStorage.setItem(VIEW_STORAGE_KEY, value);
+    } catch {
+      // Ignore
+    }
+  };
+
+  // Stats
+  const {
+    data: stats = { total: 0, active: 0, inactive: 0 },
+    refetch: refetchStats,
+  } = useQuery<InstructorStats>({
+    queryKey: ['lms-instructor-stats'],
+    queryFn: async () => {
+      const response = await request<InstructorStats>({
+        url: '/lms/instructors/stats',
+        method: 'GET',
+      });
+      return response.data;
+    },
+    placeholderData: (prev) => prev ?? { total: 0, active: 0, inactive: 0 },
+  });
+
+  // List
+  const {
+    data: paginate = {
+      data: [],
+      total: 0,
+      page: 1,
+      pageSize,
+      lastPage: 1,
+    },
+    isLoading,
+    refetch: refetchList,
+  } = useQuery<InstructorPaginatedResult>({
+    queryKey: [
+      'lms-instructors',
+      page,
+      pageSize,
+      debouncedSearch,
+      statusFilter,
+      qualificationFilter,
+    ],
+    queryFn: async () => {
+      const params = new URLSearchParams({
+        page: String(page),
+        pageSize: String(pageSize),
+      });
+      if (debouncedSearch) params.set('search', debouncedSearch);
+      if (statusFilter !== 'all') params.set('status', statusFilter);
+      if (qualificationFilter !== 'all')
+        params.set('qualificationSlugs', qualificationFilter);
+
+      const response = await request<InstructorPaginatedResult>({
+        url: `/lms/instructors?${params.toString()}`,
+        method: 'GET',
+      });
+      return response.data;
+    },
+    placeholderData: (prev) =>
+      prev ?? { data: [], total: 0, page: 1, pageSize, lastPage: 1 },
+  });
+
+  const totalPages = Math.max(
+    1,
+    (paginate.lastPage ?? Math.ceil((paginate.total || 0) / pageSize)) || 1
+  );
+
+  useEffect(() => {
+    if (page > totalPages) setPage(totalPages);
+  }, [page, totalPages]);
+
+  const openCreateSheet = () => {
+    setInstructorToEdit(null);
+    setSheetOpen(true);
+  };
+
+  const openEditSheet = (instructor: InstructorRow) => {
+    setInstructorToEdit(instructor);
+    setSheetOpen(true);
+  };
+
+  const handleSaved = async () => {
+    await Promise.all([refetchList(), refetchStats()]);
+  };
+
+  const handleDeleteConfirm = async () => {
+    if (!instructorToDelete) return;
+    try {
+      setIsDeleting(true);
+      await request({
+        url: `/lms/instructors/${instructorToDelete.id}`,
+        method: 'DELETE',
+      });
+      toast.success('Instrutor removido com sucesso.');
+      setDeleteDialogOpen(false);
+      setInstructorToDelete(null);
+      await Promise.all([refetchList(), refetchStats()]);
+    } catch {
+      toast.error('Erro ao remover instrutor. Tente novamente.');
+    } finally {
+      setIsDeleting(false);
+    }
+  };
+
+  const statsCards = [
+    {
+      key: 'total',
+      title: 'Total de instrutores',
+      value: stats.total,
+      icon: Users,
+      accentClassName: 'from-slate-500/20 via-slate-400/10 to-transparent',
+      iconContainerClassName: 'bg-slate-100 text-slate-700',
+    },
+    {
+      key: 'active',
+      title: 'Ativos',
+      value: stats.active,
+      icon: UserRoundPen,
+      accentClassName: 'from-green-500/20 via-emerald-500/10 to-transparent',
+      iconContainerClassName: 'bg-green-50 text-green-600',
+    },
+    {
+      key: 'inactive',
+      title: 'Inativos',
+      value: stats.inactive,
+      icon: UserRoundPen,
+      accentClassName: 'from-gray-500/20 via-gray-400/10 to-transparent',
+      iconContainerClassName: 'bg-gray-100 text-gray-600',
+    },
+  ];
+
+  const searchControls: SearchBarControl[] = [
+    {
+      id: 'status-filter',
+      type: 'select',
+      value: statusFilter,
+      onChange: (value: string) => {
+        setStatusFilter(value);
+        setPage(1);
+      },
+      placeholder: 'Filtrar por status',
+      options: [
+        { value: 'all', label: 'Todos os status' },
+        { value: 'active', label: 'Ativo' },
+        { value: 'inactive', label: 'Inativo' },
+      ],
+    },
+    {
+      id: 'qualification-filter',
+      type: 'select',
+      value: qualificationFilter,
+      onChange: (value: string) => {
+        setQualificationFilter(value);
+        setPage(1);
+      },
+      placeholder: 'Filtrar por qualificação',
+      options: [
+        { value: 'all', label: 'Todas as qualificações' },
+        { value: 'course-lessons', label: 'Aulas de curso' },
+        { value: 'class-sessions', label: 'Sessões de turma' },
+      ],
+    },
+  ];
+
+  return (
+    <Page>
+      <PageHeader
+        breadcrumbs={[
+          { label: 'Home', href: '/' },
+          { label: 'LMS', href: '/lms' },
+          { label: 'Instrutores' },
+        ]}
+        title="Instrutores"
+        description="Gerencie os perfis de instrutores da plataforma."
+        actions={[
+          {
+            label: 'Novo Instrutor',
+            onClick: openCreateSheet,
+            icon: <Plus className="h-4 w-4" />,
+          },
+        ]}
+      />
+
+      <KpiCardsGrid items={statsCards} />
+
+      <div className="flex flex-col gap-4 xl:flex-row xl:items-center">
+        <div className="flex-1">
+          <SearchBar
+            searchQuery={searchInput}
+            onSearchChange={(value) => {
+              setSearchInput(value);
+            }}
+            onSearch={() => setPage(1)}
+            placeholder="Buscar por nome ou e-mail..."
+            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
+          </span>
+          <ToggleGroup
+            type="single"
+            value={viewMode}
+            onValueChange={handleViewModeChange}
+            variant="outline"
+            size="sm"
+            aria-label="Modo de visualização"
+          >
+            <ToggleGroupItem
+              value="table"
+              className="gap-1.5 px-2.5"
+              aria-label="Tabela"
+            >
+              <List className="h-4 w-4" />
+              <span className="hidden sm:inline">Tabela</span>
+            </ToggleGroupItem>
+            <ToggleGroupItem
+              value="cards"
+              className="gap-1.5 px-2.5"
+              aria-label="Cards"
+            >
+              <LayoutGrid className="h-4 w-4" />
+              <span className="hidden sm:inline">Cards</span>
+            </ToggleGroupItem>
+          </ToggleGroup>
+        </div>
+      </div>
+
+      {isLoading ? (
+        viewMode === 'cards' ? (
+          <div className="grid gap-3 md:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4">
+            {Array.from({ length: 6 }).map((_, i) => (
+              <Card key={i} className="overflow-hidden py-0">
+                <CardContent className="space-y-3 p-4">
+                  <div className="flex items-center gap-2.5">
+                    <Skeleton className="h-10 w-10 rounded-full" />
+                    <div className="flex-1 space-y-2">
+                      <Skeleton className="h-4 w-2/3" />
+                      <Skeleton className="h-3 w-1/2" />
+                    </div>
+                  </div>
+                  <div className="flex gap-2">
+                    <Skeleton className="h-5 w-24 rounded-full" />
+                    <Skeleton className="h-5 w-16 rounded-full" />
+                  </div>
+                </CardContent>
+              </Card>
+            ))}
+          </div>
+        ) : (
+          <div className="space-y-3 p-4">
+            {Array.from({ length: 5 }).map((_, i) => (
+              <Skeleton key={i} className="h-14 w-full" />
+            ))}
+          </div>
+        )
+      ) : 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"
+          actionIcon={<Plus className="mr-2 h-4 w-4" />}
+          onAction={openCreateSheet}
+        />
+      ) : (
+        <>
+          {viewMode === 'table' ? (
+            <div className="overflow-x-auto">
+              <Table>
+                <TableHeader>
+                  <TableRow>
+                    <TableHead>Instrutor</TableHead>
+                    <TableHead>E-mail</TableHead>
+                    <TableHead>Telefone</TableHead>
+                    <TableHead>Qualificações</TableHead>
+                    <TableHead>Training</TableHead>
+                    <TableHead>Status</TableHead>
+                    <TableHead className="w-10" />
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {paginate.data.map((instructor) => (
+                    <TableRow
+                      key={instructor.id}
+                      className="cursor-pointer"
+                      onDoubleClick={() => openEditSheet(instructor)}
+                    >
+                      <TableCell>
+                        <div className="flex items-center gap-3">
+                          <Avatar className="h-9 w-9 rounded-full">
+                            {instructor.avatarId ? (
+                              <AvatarImage
+                                src={getAvatarUrl(instructor.avatarId)}
+                                alt={instructor.name}
+                                className="object-cover"
+                              />
+                            ) : null}
+                            <AvatarFallback className="bg-slate-100 text-xs font-semibold uppercase text-slate-700">
+                              {getInstructorInitials(instructor.name)}
+                            </AvatarFallback>
+                          </Avatar>
+                          <span className="font-medium">{instructor.name}</span>
+                        </div>
+                      </TableCell>
+                      <TableCell>
+                        <span className="text-sm text-muted-foreground">
+                          {instructor.email ? (
+                            <span className="flex items-center gap-1">
+                              <Mail className="h-3 w-3" />
+                              {instructor.email}
+                            </span>
+                          ) : (
+                            '-'
+                          )}
+                        </span>
+                      </TableCell>
+                      <TableCell>
+                        <span className="text-sm text-muted-foreground">
+                          {instructor.phone ? (
+                            <span className="flex items-center gap-1">
+                              <Phone className="h-3 w-3" />
+                              {instructor.phone}
+                            </span>
+                          ) : (
+                            '-'
+                          )}
+                        </span>
+                      </TableCell>
+                      <TableCell>
+                        <div className="flex flex-wrap gap-1">
+                          {instructor.qualificationSlugs.map((slug) => (
+                            <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"
+                            >
+                              {QUALIFICATION_LABELS[slug] ?? slug}
+                            </Badge>
+                          ))}
+                        </div>
+                      </TableCell>
+                      <TableCell>
+                        {instructor.hasTrainingAccess ? (
+                          <Badge
+                            variant="outline"
+                            className="border-amber-500/20 bg-amber-500/10 px-2.5 py-1 text-xs font-medium text-amber-600"
+                          >
+                            Ativo
+                          </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
+                          </Badge>
+                        ) : (
+                          <span className="text-xs text-muted-foreground">
+                            —
+                          </span>
+                        )}
+                      </TableCell>
+                      <TableCell>
+                        <Badge
+                          variant="outline"
+                          className={cn(
+                            'border px-2.5 py-1 text-xs font-medium',
+                            instructor.status === 'active'
+                              ? 'border-green-500/20 bg-green-500/10 text-green-600'
+                              : 'border-gray-500/20 bg-gray-500/10 text-gray-600'
+                          )}
+                        >
+                          {instructor.status === 'active' ? 'Ativo' : 'Inativo'}
+                        </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" />
+                              Editar
+                            </DropdownMenuItem>
+                            <DropdownMenuSeparator />
+                            <DropdownMenuItem
+                              className="text-red-600"
+                              onClick={() => {
+                                setInstructorToDelete(instructor);
+                                setDeleteDialogOpen(true);
+                              }}
+                            >
+                              <Trash2 className="mr-2 h-4 w-4" />
+                              Excluir
+                            </DropdownMenuItem>
+                          </DropdownMenuContent>
+                        </DropdownMenu>
+                      </TableCell>
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+            </div>
+          ) : (
+            <div className="grid gap-3 md:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4">
+              {paginate.data.map((instructor) => (
+                <Card
+                  key={instructor.id}
+                  className="group cursor-pointer overflow-hidden border-border/70 py-0 transition-colors hover:border-border hover:shadow-md"
+                  onDoubleClick={() => openEditSheet(instructor)}
+                >
+                  <CardContent className="flex flex-col gap-3 p-4">
+                    <div className="flex items-start justify-between gap-3">
+                      <div className="flex min-w-0 items-center gap-3">
+                        <Avatar className="h-10 w-10 shrink-0 rounded-full border border-slate-500/20">
+                          {instructor.avatarId ? (
+                            <AvatarImage
+                              src={getAvatarUrl(instructor.avatarId)}
+                              alt={instructor.name}
+                              className="object-cover"
+                            />
+                          ) : null}
+                          <AvatarFallback className="bg-slate-500/8 text-sm font-semibold uppercase text-slate-700 dark:text-slate-200">
+                            {getInstructorInitials(instructor.name)}
+                          </AvatarFallback>
+                        </Avatar>
+
+                        <div className="min-w-0">
+                          <p className="truncate font-medium">
+                            {instructor.name}
+                          </p>
+                          {instructor.email && (
+                            <p className="flex items-center gap-1 truncate text-xs text-muted-foreground">
+                              <Mail className="h-3 w-3 shrink-0" />
+                              {instructor.email}
+                            </p>
+                          )}
+                          {instructor.phone && (
+                            <p className="flex items-center gap-1 truncate text-xs text-muted-foreground">
+                              <Phone className="h-3 w-3 shrink-0" />
+                              {instructor.phone}
+                            </p>
+                          )}
+                        </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" />
+                            Editar
+                          </DropdownMenuItem>
+                          <DropdownMenuSeparator />
+                          <DropdownMenuItem
+                            className="text-red-600"
+                            onClick={() => {
+                              setInstructorToDelete(instructor);
+                              setDeleteDialogOpen(true);
+                            }}
+                          >
+                            <Trash2 className="mr-2 h-4 w-4" />
+                            Excluir
+                          </DropdownMenuItem>
+                        </DropdownMenuContent>
+                      </DropdownMenu>
+                    </div>
+
+                    <div className="flex flex-wrap gap-1.5">
+                      <Badge
+                        variant="outline"
+                        className={cn(
+                          'border px-2 py-0.5 text-[11px] font-medium',
+                          instructor.status === 'active'
+                            ? 'border-green-500/20 bg-green-500/10 text-green-600'
+                            : 'border-gray-500/20 bg-gray-500/10 text-gray-600'
+                        )}
+                      >
+                        {instructor.status === 'active' ? 'Ativo' : 'Inativo'}
+                      </Badge>
+                      {instructor.qualificationSlugs.map((slug) => (
+                        <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"
+                        >
+                          {QUALIFICATION_LABELS[slug] ?? slug}
+                        </Badge>
+                      ))}
+                    </div>
+                  </CardContent>
+                </Card>
+              ))}
+            </div>
+          )}
+        </>
+      )}
+
+      <PaginationFooter
+        currentPage={page}
+        pageSize={pageSize}
+        totalItems={paginate.total}
+        onPageChange={setPage}
+        onPageSizeChange={(nextPageSize) => {
+          setPageSize(nextPageSize);
+          setPage(1);
+        }}
+      />
+
+      <InstructorFormSheet
+        open={sheetOpen}
+        onOpenChange={setSheetOpen}
+        instructorId={instructorToEdit?.id ?? null}
+        onSaved={handleSaved}
+      />
+
+      <AlertDialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Excluir instrutor</AlertDialogTitle>
+            <AlertDialogDescription>
+              Tem certeza que deseja excluir o instrutor{' '}
+              <strong>{instructorToDelete?.name}</strong>? Esta ação não pode
+              ser desfeita.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <div className="flex justify-end gap-2">
+            <AlertDialogCancel disabled={isDeleting}>
+              Cancelar
+            </AlertDialogCancel>
+            <AlertDialogAction
+              onClick={handleDeleteConfirm}
+              disabled={isDeleting}
+              className="bg-red-600 hover:bg-red-700"
+            >
+              {isDeleting ? 'Excluindo...' : 'Excluir'}
+            </AlertDialogAction>
+          </div>
+        </AlertDialogContent>
+      </AlertDialog>
+    </Page>
+  );
+}