@hed-hog/lms 0.0.329 → 0.0.331

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

@@ -60,6 +60,7 @@ 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 { useTranslations } from 'next-intl';
 import { useEffect, useState } from 'react';
 import { useForm } from 'react-hook-form';
 import { toast } from 'sonner';
@@ -85,22 +86,26 @@ type InstructorSkillPaginatedResult = {
 
 // ─── 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>;
+const createSkillSchema = (t: ReturnType<typeof useTranslations>) =>
+  z.object({
+    slug: z
+      .string()
+      .min(1, t('form.validation.required'))
+      .max(100, t('form.validation.max100'))
+      .regex(/^[a-z0-9-]+$/, t('form.validation.slugPattern')),
+    namePt: z
+      .string()
+      .min(1, t('form.validation.required'))
+      .max(255, t('form.validation.max255')),
+    nameEn: z
+      .string()
+      .max(255, t('form.validation.max255'))
+      .optional()
+      .or(z.literal('')),
+    status: z.enum(['active', 'inactive']).default('active'),
+  });
+
+type SkillFormValues = z.infer<ReturnType<typeof createSkillSchema>>;
 
 // ─── SkillFormSheet ────────────────────────────────────────────────────────────
 
@@ -118,10 +123,11 @@ function SkillFormSheet({
   onSaved,
 }: SkillFormSheetProps) {
   const { request } = useApp();
+  const t = useTranslations('lms.InstructorSkillsPage');
   const [isSaving, setIsSaving] = useState(false);
 
   const form = useForm<SkillFormValues>({
-    resolver: zodResolver(skillSchema),
+    resolver: zodResolver(createSkillSchema(t)),
     defaultValues: {
       slug: '',
       namePt: '',
@@ -167,20 +173,20 @@ function SkillFormSheet({
           method: 'PATCH',
           data: payload,
         });
-        toast.success('Skill atualizada com sucesso.');
+        toast.success(t('messages.updateSuccess'));
       } else {
         await request({
           url: '/lms/instructor-skills',
           method: 'POST',
           data: payload,
         });
-        toast.success('Skill criada com sucesso.');
+        toast.success(t('messages.createSuccess'));
       }
 
       onSaved();
       onOpenChange(false);
     } catch {
-      toast.error('Erro ao salvar skill. Tente novamente.');
+      toast.error(t('messages.saveError'));
     } finally {
       setIsSaving(false);
     }
@@ -188,9 +194,11 @@ function SkillFormSheet({
 
   return (
     <Sheet open={open} onOpenChange={onOpenChange}>
-      <SheetContent className="w-full overflow-y-auto sm:max-w-md">
+      <SheetContent className="w-full overflow-y-auto sm:max-w-md">
         <SheetHeader>
-          <SheetTitle>{skillToEdit ? 'Editar Skill' : 'Nova Skill'}</SheetTitle>
+          <SheetTitle>
+            {skillToEdit ? t('sheet.editTitle') : t('sheet.createTitle')}
+          </SheetTitle>
         </SheetHeader>
 
         <Form {...form}>
@@ -203,9 +211,9 @@ function SkillFormSheet({
               name="slug"
               render={({ field }) => (
                 <FormItem>
-                  <FormLabel>Slug</FormLabel>
+                  <FormLabel>{t('form.slug')}</FormLabel>
                   <FormControl>
-                    <Input placeholder="ex: javascript, react-js" {...field} />
+                    <Input placeholder={t('form.slugPlaceholder')} {...field} />
                   </FormControl>
                   <FormMessage />
                 </FormItem>
@@ -217,9 +225,12 @@ function SkillFormSheet({
               name="namePt"
               render={({ field }) => (
                 <FormItem>
-                  <FormLabel>Nome (PT)</FormLabel>
+                  <FormLabel>{t('form.namePt')}</FormLabel>
                   <FormControl>
-                    <Input placeholder="Nome em português" {...field} />
+                    <Input
+                      placeholder={t('form.namePtPlaceholder')}
+                      {...field}
+                    />
                   </FormControl>
                   <FormMessage />
                 </FormItem>
@@ -231,10 +242,10 @@ function SkillFormSheet({
               name="nameEn"
               render={({ field }) => (
                 <FormItem>
-                  <FormLabel>Nome (EN)</FormLabel>
+                  <FormLabel>{t('form.nameEn')}</FormLabel>
                   <FormControl>
                     <Input
-                      placeholder="Name in English (optional)"
+                      placeholder={t('form.nameEnPlaceholder')}
                       {...field}
                     />
                   </FormControl>
@@ -248,16 +259,22 @@ function SkillFormSheet({
               name="status"
               render={({ field }) => (
                 <FormItem>
-                  <FormLabel>Status</FormLabel>
+                  <FormLabel>{t('form.status')}</FormLabel>
                   <Select onValueChange={field.onChange} value={field.value}>
                     <FormControl>
                       <SelectTrigger className="w-full">
-                        <SelectValue placeholder="Selecione o status" />
+                        <SelectValue
+                          placeholder={t('form.statusPlaceholder')}
+                        />
                       </SelectTrigger>
                     </FormControl>
                     <SelectContent>
-                      <SelectItem value="active">Ativo</SelectItem>
-                      <SelectItem value="inactive">Inativo</SelectItem>
+                      <SelectItem value="active">
+                        {t('status.active')}
+                      </SelectItem>
+                      <SelectItem value="inactive">
+                        {t('status.inactive')}
+                      </SelectItem>
                     </SelectContent>
                   </Select>
                   <FormMessage />
@@ -272,10 +289,10 @@ function SkillFormSheet({
                 onClick={() => onOpenChange(false)}
                 disabled={isSaving}
               >
-                Cancelar
+                {t('actions.cancel')}
               </Button>
               <Button type="submit" disabled={isSaving}>
-                {isSaving ? 'Salvando...' : 'Salvar'}
+                {isSaving ? t('actions.saving') : t('actions.save')}
               </Button>
             </div>
           </form>
@@ -289,6 +306,7 @@ function SkillFormSheet({
 
 export default function InstructorSkillsPage() {
   const { request } = useApp();
+  const t = useTranslations('lms.InstructorSkillsPage');
 
   const [page, setPage] = useState(1);
   const [pageSize, setPageSize] = useState(15);
@@ -372,12 +390,12 @@ export default function InstructorSkillsPage() {
         url: `/lms/instructor-skills/${skillToDelete.id}`,
         method: 'DELETE',
       });
-      toast.success('Skill removida com sucesso.');
+      toast.success(t('messages.deleteSuccess'));
       setDeleteDialogOpen(false);
       setSkillToDelete(null);
       await refetchList();
     } catch {
-      toast.error('Erro ao remover skill. Tente novamente.');
+      toast.error(t('messages.deleteError'));
     } finally {
       setIsDeleting(false);
     }
@@ -387,15 +405,15 @@ export default function InstructorSkillsPage() {
     <Page>
       <PageHeader
         breadcrumbs={[
-          { label: 'Home', href: '/' },
-          { label: 'LMS', href: '/lms' },
-          { label: 'Skills de Instrutor' },
+          { label: t('breadcrumbs.home'), href: '/' },
+          { label: t('breadcrumbs.lms'), href: '/lms' },
+          { label: t('breadcrumbs.current') },
         ]}
-        title="Skills de Instrutor"
-        description="Gerencie o catálogo de skills disponíveis para instrutores."
+        title={t('title')}
+        description={t('description')}
         actions={[
           {
-            label: 'Nova Skill',
+            label: t('actions.create'),
             onClick: openCreateSheet,
             icon: <Plus className="h-4 w-4" />,
           },
@@ -406,7 +424,7 @@ export default function InstructorSkillsPage() {
         searchQuery={searchInput}
         onSearchChange={(value) => setSearchInput(value)}
         onSearch={() => setPage(1)}
-        placeholder="Buscar por slug ou nome..."
+        placeholder={t('filters.searchPlaceholder')}
       />
 
       {isLoading ? (
@@ -418,9 +436,9 @@ export default function InstructorSkillsPage() {
       ) : 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"
+          title={t('empty.title')}
+          description={t('empty.description')}
+          actionLabel={t('actions.create')}
           actionIcon={<Plus className="mr-2 h-4 w-4" />}
           onAction={openCreateSheet}
         />
@@ -429,10 +447,10 @@ export default function InstructorSkillsPage() {
           <Table>
             <TableHeader>
               <TableRow>
-                <TableHead>Slug</TableHead>
-                <TableHead>Nome (PT)</TableHead>
-                <TableHead>Nome (EN)</TableHead>
-                <TableHead>Status</TableHead>
+                <TableHead>{t('table.slug')}</TableHead>
+                <TableHead>{t('table.namePt')}</TableHead>
+                <TableHead>{t('table.nameEn')}</TableHead>
+                <TableHead>{t('table.status')}</TableHead>
                 <TableHead className="w-10" />
               </TableRow>
             </TableHeader>
@@ -464,7 +482,9 @@ export default function InstructorSkillsPage() {
                           : 'border-gray-500/20 bg-gray-500/10 text-gray-600'
                       )}
                     >
-                      {skill.status === 'active' ? 'Ativo' : 'Inativo'}
+                      {skill.status === 'active'
+                        ? t('status.active')
+                        : t('status.inactive')}
                     </Badge>
                   </TableCell>
                   <TableCell>
@@ -477,7 +497,7 @@ export default function InstructorSkillsPage() {
                       <DropdownMenuContent align="end">
                         <DropdownMenuItem onClick={() => openEditSheet(skill)}>
                           <Pencil className="mr-2 h-4 w-4" />
-                          Editar
+                          {t('actions.edit')}
                         </DropdownMenuItem>
                         <DropdownMenuSeparator />
                         <DropdownMenuItem
@@ -488,7 +508,7 @@ export default function InstructorSkillsPage() {
                           }}
                         >
                           <Trash2 className="mr-2 h-4 w-4" />
-                          Excluir
+                          {t('actions.delete')}
                         </DropdownMenuItem>
                       </DropdownMenuContent>
                     </DropdownMenu>
@@ -521,23 +541,23 @@ export default function InstructorSkillsPage() {
       <AlertDialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
         <AlertDialogContent>
           <AlertDialogHeader>
-            <AlertDialogTitle>Excluir skill</AlertDialogTitle>
+            <AlertDialogTitle>{t('deleteDialog.title')}</AlertDialogTitle>
             <AlertDialogDescription>
-              Tem certeza que deseja excluir a skill{' '}
-              <strong>{skillToDelete?.slug}</strong>? Esta ação não pode ser
-              desfeita.
+              {t('deleteDialog.description', {
+                slug: skillToDelete?.slug ?? '',
+              })}
             </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>