@hed-hog/lms 0.0.325 → 0.0.326

package/hedhog/frontend/app/instructor-skills/page.tsx.ejs

@@ -0,0 +1,547 @@
+'use client';
+
+import {
+  EmptyState,
+  Page,
+  PageHeader,
+  PaginationFooter,
+  SearchBar,
+} from '@/components/entity-list';
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from '@/components/ui/alert-dialog';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/form';
+import { Input } from '@/components/ui/input';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import {
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+} from '@/components/ui/sheet';
+import { Skeleton } from '@/components/ui/skeleton';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import { cn } from '@/lib/utils';
+import { useApp, useQuery } from '@hed-hog/next-app-provider';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { MoreHorizontal, Pencil, Plus, Sparkles, Trash2 } from 'lucide-react';
+import { useEffect, useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { toast } from 'sonner';
+import * as z from 'zod';
+
+// ─── Types ────────────────────────────────────────────────────────────────────
+
+type InstructorSkill = {
+  id: number;
+  slug: string;
+  namePt: string;
+  nameEn?: string | null;
+  status: 'active' | 'inactive';
+};
+
+type InstructorSkillPaginatedResult = {
+  data: InstructorSkill[];
+  total: number;
+  page: number;
+  pageSize: number;
+  lastPage?: number;
+};
+
+// ─── Zod schema ───────────────────────────────────────────────────────────────
+
+const skillSchema = z.object({
+  slug: z
+    .string()
+    .min(1, 'Obrigatório')
+    .max(100, 'Máximo 100 caracteres')
+    .regex(/^[a-z0-9-]+$/, 'Use apenas letras minúsculas, números e hifens'),
+  namePt: z.string().min(1, 'Obrigatório').max(255, 'Máximo 255 caracteres'),
+  nameEn: z
+    .string()
+    .max(255, 'Máximo 255 caracteres')
+    .optional()
+    .or(z.literal('')),
+  status: z.enum(['active', 'inactive']).default('active'),
+});
+
+type SkillFormValues = z.infer<typeof skillSchema>;
+
+// ─── SkillFormSheet ────────────────────────────────────────────────────────────
+
+interface SkillFormSheetProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  skillToEdit: InstructorSkill | null;
+  onSaved: () => void;
+}
+
+function SkillFormSheet({
+  open,
+  onOpenChange,
+  skillToEdit,
+  onSaved,
+}: SkillFormSheetProps) {
+  const { request } = useApp();
+  const [isSaving, setIsSaving] = useState(false);
+
+  const form = useForm<SkillFormValues>({
+    resolver: zodResolver(skillSchema),
+    defaultValues: {
+      slug: '',
+      namePt: '',
+      nameEn: '',
+      status: 'active',
+    },
+  });
+
+  // Populate form when editing
+  useEffect(() => {
+    if (open) {
+      if (skillToEdit) {
+        form.reset({
+          slug: skillToEdit.slug,
+          namePt: skillToEdit.namePt,
+          nameEn: skillToEdit.nameEn ?? '',
+          status: skillToEdit.status,
+        });
+      } else {
+        form.reset({
+          slug: '',
+          namePt: '',
+          nameEn: '',
+          status: 'active',
+        });
+      }
+    }
+  }, [open, skillToEdit, form]);
+
+  const onSubmit = async (values: SkillFormValues) => {
+    try {
+      setIsSaving(true);
+      const payload = {
+        slug: values.slug,
+        namePt: values.namePt,
+        nameEn: values.nameEn || undefined,
+        status: values.status,
+      };
+
+      if (skillToEdit) {
+        await request({
+          url: `/lms/instructor-skills/${skillToEdit.id}`,
+          method: 'PATCH',
+          data: payload,
+        });
+        toast.success('Skill atualizada com sucesso.');
+      } else {
+        await request({
+          url: '/lms/instructor-skills',
+          method: 'POST',
+          data: payload,
+        });
+        toast.success('Skill criada com sucesso.');
+      }
+
+      onSaved();
+      onOpenChange(false);
+    } catch {
+      toast.error('Erro ao salvar skill. Tente novamente.');
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  return (
+    <Sheet open={open} onOpenChange={onOpenChange}>
+      <SheetContent className="w-full overflow-y-auto sm:max-w-md">
+        <SheetHeader>
+          <SheetTitle>{skillToEdit ? 'Editar Skill' : 'Nova Skill'}</SheetTitle>
+        </SheetHeader>
+
+        <Form {...form}>
+          <form
+            onSubmit={form.handleSubmit(onSubmit)}
+            className="flex flex-col gap-4 px-4 py-4"
+          >
+            <FormField
+              control={form.control}
+              name="slug"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Slug</FormLabel>
+                  <FormControl>
+                    <Input placeholder="ex: javascript, react-js" {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="namePt"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Nome (PT)</FormLabel>
+                  <FormControl>
+                    <Input placeholder="Nome em português" {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="nameEn"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Nome (EN)</FormLabel>
+                  <FormControl>
+                    <Input
+                      placeholder="Name in English (optional)"
+                      {...field}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="status"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Status</FormLabel>
+                  <Select onValueChange={field.onChange} value={field.value}>
+                    <FormControl>
+                      <SelectTrigger className="w-full">
+                        <SelectValue placeholder="Selecione o status" />
+                      </SelectTrigger>
+                    </FormControl>
+                    <SelectContent>
+                      <SelectItem value="active">Ativo</SelectItem>
+                      <SelectItem value="inactive">Inativo</SelectItem>
+                    </SelectContent>
+                  </Select>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <div className="flex justify-end gap-2 pt-2">
+              <Button
+                type="button"
+                variant="outline"
+                onClick={() => onOpenChange(false)}
+                disabled={isSaving}
+              >
+                Cancelar
+              </Button>
+              <Button type="submit" disabled={isSaving}>
+                {isSaving ? 'Salvando...' : 'Salvar'}
+              </Button>
+            </div>
+          </form>
+        </Form>
+      </SheetContent>
+    </Sheet>
+  );
+}
+
+// ─── Page ─────────────────────────────────────────────────────────────────────
+
+export default function InstructorSkillsPage() {
+  const { request } = useApp();
+
+  const [page, setPage] = useState(1);
+  const [pageSize, setPageSize] = useState(15);
+  const [searchInput, setSearchInput] = useState('');
+  const [debouncedSearch, setDebouncedSearch] = useState('');
+  const [sheetOpen, setSheetOpen] = useState(false);
+  const [skillToEdit, setSkillToEdit] = useState<InstructorSkill | null>(null);
+  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
+  const [skillToDelete, setSkillToDelete] = useState<InstructorSkill | null>(
+    null
+  );
+  const [isDeleting, setIsDeleting] = useState(false);
+
+  // Debounce search
+  useEffect(() => {
+    const timeout = setTimeout(() => {
+      setDebouncedSearch(searchInput.trim());
+      setPage(1);
+    }, 300);
+    return () => clearTimeout(timeout);
+  }, [searchInput]);
+
+  // List query
+  const {
+    data: paginate = {
+      data: [],
+      total: 0,
+      page: 1,
+      pageSize,
+      lastPage: 1,
+    },
+    isLoading,
+    refetch: refetchList,
+  } = useQuery<InstructorSkillPaginatedResult>({
+    queryKey: ['lms-instructor-skills', page, pageSize, debouncedSearch],
+    queryFn: async () => {
+      const params = new URLSearchParams({
+        page: String(page),
+        pageSize: String(pageSize),
+      });
+      if (debouncedSearch) params.set('search', debouncedSearch);
+
+      const response = await request<InstructorSkillPaginatedResult>({
+        url: `/lms/instructor-skills?${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 = () => {
+    setSkillToEdit(null);
+    setSheetOpen(true);
+  };
+
+  const openEditSheet = (skill: InstructorSkill) => {
+    setSkillToEdit(skill);
+    setSheetOpen(true);
+  };
+
+  const handleSaved = async () => {
+    await refetchList();
+  };
+
+  const handleDeleteConfirm = async () => {
+    if (!skillToDelete) return;
+    try {
+      setIsDeleting(true);
+      await request({
+        url: `/lms/instructor-skills/${skillToDelete.id}`,
+        method: 'DELETE',
+      });
+      toast.success('Skill removida com sucesso.');
+      setDeleteDialogOpen(false);
+      setSkillToDelete(null);
+      await refetchList();
+    } catch {
+      toast.error('Erro ao remover skill. Tente novamente.');
+    } finally {
+      setIsDeleting(false);
+    }
+  };
+
+  return (
+    <Page>
+      <PageHeader
+        breadcrumbs={[
+          { label: 'Home', href: '/' },
+          { label: 'LMS', href: '/lms' },
+          { label: 'Skills de Instrutor' },
+        ]}
+        title="Skills de Instrutor"
+        description="Gerencie o catálogo de skills disponíveis para instrutores."
+        actions={[
+          {
+            label: 'Nova Skill',
+            onClick: openCreateSheet,
+            icon: <Plus className="h-4 w-4" />,
+          },
+        ]}
+      />
+
+      <SearchBar
+        searchQuery={searchInput}
+        onSearchChange={(value) => setSearchInput(value)}
+        onSearch={() => setPage(1)}
+        placeholder="Buscar por slug ou nome..."
+      />
+
+      {isLoading ? (
+        <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={<Sparkles className="h-12 w-12" />}
+          title="Nenhuma skill encontrada"
+          description="Crie uma nova skill ou ajuste os filtros de busca."
+          actionLabel="Nova Skill"
+          actionIcon={<Plus className="mr-2 h-4 w-4" />}
+          onAction={openCreateSheet}
+        />
+      ) : (
+        <div className="overflow-x-auto">
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead>Slug</TableHead>
+                <TableHead>Nome (PT)</TableHead>
+                <TableHead>Nome (EN)</TableHead>
+                <TableHead>Status</TableHead>
+                <TableHead className="w-10" />
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {paginate.data.map((skill) => (
+                <TableRow
+                  key={skill.id}
+                  className="cursor-pointer"
+                  onDoubleClick={() => openEditSheet(skill)}
+                >
+                  <TableCell>
+                    <span className="font-mono text-sm">{skill.slug}</span>
+                  </TableCell>
+                  <TableCell>
+                    <span className="font-medium">{skill.namePt}</span>
+                  </TableCell>
+                  <TableCell>
+                    <span className="text-sm text-muted-foreground">
+                      {skill.nameEn ?? '—'}
+                    </span>
+                  </TableCell>
+                  <TableCell>
+                    <Badge
+                      variant="outline"
+                      className={cn(
+                        'border px-2.5 py-1 text-xs font-medium',
+                        skill.status === 'active'
+                          ? 'border-green-500/20 bg-green-500/10 text-green-600'
+                          : 'border-gray-500/20 bg-gray-500/10 text-gray-600'
+                      )}
+                    >
+                      {skill.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(skill)}>
+                          <Pencil className="mr-2 h-4 w-4" />
+                          Editar
+                        </DropdownMenuItem>
+                        <DropdownMenuSeparator />
+                        <DropdownMenuItem
+                          className="text-red-600"
+                          onClick={() => {
+                            setSkillToDelete(skill);
+                            setDeleteDialogOpen(true);
+                          }}
+                        >
+                          <Trash2 className="mr-2 h-4 w-4" />
+                          Excluir
+                        </DropdownMenuItem>
+                      </DropdownMenuContent>
+                    </DropdownMenu>
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </div>
+      )}
+
+      <PaginationFooter
+        currentPage={page}
+        pageSize={pageSize}
+        totalItems={paginate.total}
+        onPageChange={setPage}
+        onPageSizeChange={(nextPageSize) => {
+          setPageSize(nextPageSize);
+          setPage(1);
+        }}
+      />
+
+      <SkillFormSheet
+        open={sheetOpen}
+        onOpenChange={setSheetOpen}
+        skillToEdit={skillToEdit}
+        onSaved={handleSaved}
+      />
+
+      <AlertDialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Excluir skill</AlertDialogTitle>
+            <AlertDialogDescription>
+              Tem certeza que deseja excluir a skill{' '}
+              <strong>{skillToDelete?.slug}</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>
+  );
+}