@hed-hog/category 0.0.279 → 0.0.285

package/README.md

@@ -1,3 +1,4 @@
+```markdown
 # @hed-hog/category
 
 ## 1. Visão geral do módulo
@@ -322,3 +323,4 @@ Authorization: Bearer <token>
 ---
 
 Este módulo é essencial para a organização e categorização dos conteúdos e produtos no sistema HedHog, garantindo flexibilidade e suporte multilíngue com controle de acesso robusto.
+```

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

@@ -1,9 +1,12 @@
 'use client';
 
 import {
+  EmptyState,
+  Page,
   PageHeader,
   PaginationFooter,
   SearchBar,
+  StatsCards,
 } from '@/components/entity-list';
 import {
   AlertDialog,
@@ -20,15 +23,14 @@ import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent } from '@/components/ui/card';
 import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from '@/components/ui/dialog';
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/form';
 import { Input } from '@/components/ui/input';
-import { Label } from '@/components/ui/label';
 import {
   Select,
   SelectContent,
@@ -36,8 +38,17 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@/components/ui/select';
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+} from '@/components/ui/sheet';
 import { useDebounce } from '@/hooks/use-debounce';
 import { useApp, useQuery } from '@hed-hog/next-app-provider';
+import { zodResolver } from '@hookform/resolvers/zod';
 import * as TablerIcons from '@tabler/icons-react';
 import {
   Edit,
@@ -48,11 +59,12 @@ import {
   Save,
   Tag,
   Trash2,
-  X,
 } from 'lucide-react';
 import { useTranslations } from 'next-intl';
 import { useEffect, useState } from 'react';
+import { useForm } from 'react-hook-form';
 import { toast } from 'sonner';
+import { z } from 'zod';
 
 type PaginationResult<T> = {
   data: T[];
@@ -83,10 +95,23 @@ type Locale = {
   name: string;
 };
 
+type CategoryFormValues = {
+  name: string;
+  slug: string;
+  color: string;
+  icon: string;
+  category_id: string;
+  status: 'active' | 'inactive';
+};
+
 export default function CategoryPage() {
   const t = useTranslations('category.Category');
-  const [categories, setCategories] = useState<Category[]>([]);
-  const [selectedCategory, setSelectedCategory] = useState<any | null>(null);
+  const [editingCategoryId, setEditingCategoryId] = useState<number | null>(
+    null
+  );
+  const [localeData, setLocaleData] = useState<
+    Record<string, { name: string }>
+  >({});
   const [isEditDialogOpen, setIsEditDialogOpen] = useState(false);
   const [isNewCategory, setIsNewCategory] = useState(false);
   const [searchTerm, setSearchTerm] = useState('');
@@ -99,6 +124,28 @@ export default function CategoryPage() {
   const [fullLocales, setFullLocales] = useState<any[]>([]);
   const { request, locales, currentLocaleCode } = useApp();
 
+  const categorySchema = z.object({
+    name: z.string().trim().min(1, t('nameRequired')),
+    slug: z.string().trim().min(1, t('slugRequired')),
+    color: z.string().trim().min(1, t('color')),
+    icon: z.string().trim().optional(),
+    category_id: z.string(),
+    status: z.enum(['active', 'inactive']),
+  });
+
+  const form = useForm<CategoryFormValues>({
+    resolver: zodResolver(categorySchema),
+    mode: 'onChange',
+    defaultValues: {
+      name: '',
+      slug: '',
+      color: '#000000',
+      icon: '',
+      category_id: 'none',
+      status: 'active',
+    },
+  });
+
   // Buscar locales completos com id
   useEffect(() => {
     const fetchLocales = async () => {
@@ -123,9 +170,9 @@ export default function CategoryPage() {
     }
   }, [currentLocaleCode]);
 
-  const { data: categoriesResult, refetch: refetchCategories } = useQuery<
-    PaginationResult<Category>
-  >({
+  const { data: categoriesResult, refetch: refetchCategories } = useQuery<
+    PaginationResult<Category>
+  >({
     queryKey: [
       'categories',
       debouncedSearch,
@@ -147,10 +194,10 @@ export default function CategoryPage() {
       });
       return response.data as PaginationResult<Category>;
     },
-  });
-  const { data = [], total = 0 } = categoriesResult ?? {};
+  });
+  const { data: categories = [], total = 0 } = categoriesResult ?? {};
 
-  const { data: rootCategories = [] } = useQuery<Category[]>({
+  const { data: rootCategories = [] } = useQuery<Category[]>({
     queryKey: ['root-categories'],
     queryFn: async () => {
       const response = await request({
@@ -158,9 +205,9 @@ export default function CategoryPage() {
       });
       return (response.data || []) as Category[];
     },
-    enabled: true,
-    staleTime: 0,
-    refetchOnMount: true,
+    enabled: true,
+    staleTime: 0,
+    refetchOnMount: true,
   });
 
   const { data: statsData, refetch: refetchStats } = useQuery<any>({
@@ -173,12 +220,6 @@ export default function CategoryPage() {
     },
   });
 
-  useEffect(() => {
-    if (data) {
-      setCategories(data);
-    }
-  }, [data]);
-
   const renderIcon = (iconName?: string) => {
     const toPascalCase = (str: string) =>
       str.replace(/(^\w|-\w)/g, (match) =>
@@ -202,22 +243,26 @@ export default function CategoryPage() {
   };
 
   const handleNewCategory = (): void => {
-    const newCategory: any = {
-      slug: '',
-      category_id: null,
-      color: '#000000',
-      icon: '',
-      status: 'active',
-      locale: {},
-    };
-
+    const nextLocaleData: Record<string, { name: string }> = {};
     locales.forEach((locale: Locale) => {
-      newCategory.locale[locale.code] = {
+      nextLocaleData[locale.code] = {
         name: '',
       };
     });
 
-    setSelectedCategory(newCategory);
+    const initialLocale = currentLocaleCode || locales[0]?.code || '';
+
+    setEditingCategoryId(null);
+    setLocaleData(nextLocaleData);
+    setSelectedLocale(initialLocale);
+    form.reset({
+      name: '',
+      slug: '',
+      color: '#000000',
+      icon: '',
+      category_id: 'none',
+      status: 'active',
+    });
     setIsNewCategory(true);
     setIsEditDialogOpen(true);
   };
@@ -261,9 +306,21 @@ export default function CategoryPage() {
         }
       });
 
-      setSelectedCategory({
-        ...categoryData,
-        locale: localeData,
+      const initialLocale =
+        selectedLocale || currentLocaleCode || locales[0]?.code || '';
+
+      setEditingCategoryId(Number(categoryData.id));
+      setLocaleData(localeData);
+      setSelectedLocale(initialLocale);
+      form.reset({
+        name: localeData[initialLocale]?.name || '',
+        slug: categoryData.slug || '',
+        color: categoryData.color || '#000000',
+        icon: categoryData.icon || '',
+        category_id: categoryData.category_id
+          ? String(categoryData.category_id)
+          : 'none',
+        status: categoryData.status === 'inactive' ? 'inactive' : 'active',
       });
       setIsNewCategory(false);
       setIsEditDialogOpen(true);
@@ -273,22 +330,28 @@ export default function CategoryPage() {
     }
   };
 
-  const handleSaveCategory = async () => {
-    if (!selectedCategory) return;
+  const handleSaveCategory = form.handleSubmit(async (values) => {
+    const mergedLocaleData = {
+      ...localeData,
+      [selectedLocale]: {
+        name: values.name,
+      },
+    };
 
     const payload = {
-      locale: selectedCategory.locale,
-      slug: selectedCategory.slug,
-      category_id: selectedCategory.category_id || null,
-      color: selectedCategory.color,
-      icon: selectedCategory.icon,
-      status: selectedCategory.status,
+      locale: mergedLocaleData,
+      slug: values.slug,
+      category_id:
+        values.category_id === 'none' ? null : Number(values.category_id),
+      color: values.color,
+      icon: values.icon,
+      status: values.status,
     };
 
     try {
-      if (selectedCategory.id) {
+      if (editingCategoryId) {
         await request({
-          url: `/category/${selectedCategory.id}`,
+          url: `/category/${editingCategoryId}`,
           method: 'PATCH',
           data: payload,
         });
@@ -303,13 +366,16 @@ export default function CategoryPage() {
       }
 
       setIsEditDialogOpen(false);
+      setEditingCategoryId(null);
+      setLocaleData({});
+      form.reset();
       await refetchCategories();
       await refetchStats();
     } catch (error) {
       console.error(error);
       toast.error(t('errorSave'));
     }
-  };
+  });
 
   const handleDeleteCategory = async (categoryId: number): Promise<void> => {
     try {
@@ -328,19 +394,16 @@ export default function CategoryPage() {
 
   const handleSearchChange = (value: string): void => {
     setSearchTerm(value);
+    setPage(1);
   };
 
   useEffect(() => {
-    refetchCategories();
-    refetchStats();
-  }, [
-    isEditDialogOpen,
-    debouncedSearch,
-    page,
-    pageSize,
-    statusFilter,
-    parentFilter,
-  ]);
+    if (!isEditDialogOpen || !selectedLocale) {
+      return;
+    }
+
+    form.setValue('name', localeData[selectedLocale]?.name || '');
+  }, [form, isEditDialogOpen, localeData, selectedLocale]);
 
   const getStatusBadge = (status: string) => {
     return status === 'active' ? (
@@ -352,13 +415,41 @@ export default function CategoryPage() {
     );
   };
 
+  const statsCards = [
+    {
+      title: t('totalCategories'),
+      value: statsData?.total || 0,
+      icon: <Layers className="h-5 w-5" />,
+      iconBgColor: 'bg-blue-100',
+      iconColor: 'text-blue-600',
+    },
+    {
+      title: t('actives'),
+      value: statsData?.totalActive || 0,
+      icon: <Tag className="h-5 w-5" />,
+      iconBgColor: 'bg-green-100',
+      iconColor: 'text-green-600',
+    },
+    {
+      title: t('inactives'),
+      value: statsData?.totalInactive || 0,
+      icon: <Tag className="h-5 w-5" />,
+      iconBgColor: 'bg-orange-100',
+      iconColor: 'text-orange-600',
+    },
+    {
+      title: t('root'),
+      value: statsData?.totalRoot || 0,
+      icon: <FolderTree className="h-5 w-5" />,
+      iconBgColor: 'bg-purple-100',
+      iconColor: 'text-purple-600',
+    },
+  ];
+
   return (
-    <div className="flex flex-col h-screen px-4">
+    <Page>
       <PageHeader
-        breadcrumbs={[
-          { label: 'Home', href: '/' },
-          { label: t('description') },
-        ]}
+        breadcrumbs={[{ label: 'Home', href: '/' }, { label: t('title') }]}
         actions={[
           {
             label: t('newCategory'),
@@ -370,235 +461,163 @@ export default function CategoryPage() {
         description={t('description')}
       />
 
-      <div className="grid grid-cols-1 gap-4 md:grid-cols-4">
-        <Card className="transition-shadow hover:shadow-md p-0">
-          <CardContent className="p-4">
-            <div className="flex items-center space-x-3">
-              <div className="rounded-full bg-blue-100 p-2 dark:bg-blue-900">
-                <Layers className="h-6 w-6 text-blue-600 dark:text-blue-400" />
-              </div>
-              <div>
-                <p className="text-sm font-medium text-muted-foreground">
-                  {t('totalCategories')}
-                </p>
-                <p className="text-2xl font-bold">{statsData?.total || 0}</p>
-              </div>
-            </div>
-          </CardContent>
-        </Card>
-
-        <Card className="transition-shadow hover:shadow-md p-0">
-          <CardContent className="p-4">
-            <div className="flex items-center space-x-3">
-              <div className="rounded-full bg-green-100 p-2 dark:bg-green-900">
-                <Tag className="h-6 w-6 text-green-600 dark:text-green-400" />
-              </div>
-              <div>
-                <p className="text-sm font-medium text-muted-foreground">
-                  {t('actives')}
-                </p>
-                <p className="text-2xl font-bold">
-                  {statsData?.totalActive || 0}
-                </p>
-              </div>
-            </div>
-          </CardContent>
-        </Card>
-
-        <Card className="transition-shadow hover:shadow-md p-0">
-          <CardContent className="p-4">
-            <div className="flex items-center space-x-3">
-              <div className="rounded-full bg-orange-100 p-2 dark:bg-orange-900">
-                <Tag className="h-6 w-6 text-orange-600 dark:text-orange-400" />
-              </div>
-              <div>
-                <p className="text-sm font-medium text-muted-foreground">
-                  {t('inactives')}
-                </p>
-                <p className="text-2xl font-bold">
-                  {statsData?.totalInactive || 0}
-                </p>
-              </div>
-            </div>
-          </CardContent>
-        </Card>
-
-        <Card className="transition-shadow hover:shadow-md p-0">
-          <CardContent className="p-4">
-            <div className="flex items-center space-x-3">
-              <div className="rounded-full bg-purple-100 p-2 dark:bg-purple-900">
-                <FolderTree className="h-6 w-6 text-purple-600 dark:text-purple-400" />
-              </div>
-              <div>
-                <p className="text-sm font-medium text-muted-foreground">
-                  {t('root')}
-                </p>
-                <p className="text-2xl font-bold">
-                  {statsData?.totalRoot || 0}
-                </p>
-              </div>
-            </div>
-          </CardContent>
-        </Card>
-      </div>
-
-      <div className="flex flex-col gap-4 sm:flex-row my-4">
-        <SearchBar
-          searchQuery={searchTerm}
-          onSearchChange={handleSearchChange}
-          onSearch={() => refetchCategories()}
-          placeholder={t('searchPlaceholder')}
-        />
+      <StatsCards stats={statsCards} />
 
-        <Select value={statusFilter} onValueChange={setStatusFilter}>
-          <SelectTrigger className="w-full sm:w-[180px]">
-            <SelectValue placeholder={t('status')} />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectItem value="all">{t('all')}</SelectItem>
-            <SelectItem value="active">{t('actives')}</SelectItem>
-            <SelectItem value="inactive">{t('inactives')}</SelectItem>
-          </SelectContent>
-        </Select>
-        <Select value={parentFilter} onValueChange={setParentFilter}>
-          <SelectTrigger className="w-full sm:w-[180px]">
-            <SelectValue placeholder={t('hierarchy')} />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectItem value="all">{t('allHierarchy')}</SelectItem>
-            <SelectItem value="root">{t('rootHierarchy')}</SelectItem>
-          </SelectContent>
-        </Select>
-      </div>
+      <SearchBar
+        searchQuery={searchTerm}
+        onSearchChange={handleSearchChange}
+        onSearch={() => setPage(1)}
+        placeholder={t('searchPlaceholder')}
+        controls={[
+          {
+            id: 'status-filter',
+            type: 'select',
+            value: statusFilter,
+            onChange: setStatusFilter,
+            placeholder: t('status'),
+            options: [
+              { value: 'all', label: t('all') },
+              { value: 'active', label: t('actives') },
+              { value: 'inactive', label: t('inactives') },
+            ],
+          },
+          {
+            id: 'parent-filter',
+            type: 'select',
+            value: parentFilter,
+            onChange: setParentFilter,
+            placeholder: t('hierarchy'),
+            options: [
+              { value: 'all', label: t('allHierarchy') },
+              { value: 'root', label: t('rootHierarchy') },
+            ],
+          },
+        ]}
+      />
 
       <div className="space-y-4">
         {categories.length > 0 ? (
-          <div className="space-y-4">
+          <div className="grid gap-3 sm:grid-cols-2 xl:grid-cols-3">
             {categories.map((category) => (
               <Card
                 key={category.id}
                 onDoubleClick={() => handleEditCategory(category)}
                 className="cursor-pointer transition-all duration-200 hover:border-primary/20 hover:shadow-md"
               >
-                <CardContent className="p-6">
-                  <div className="flex items-start justify-between gap-4">
-                    <div className="flex-1 space-y-3">
-                      <div className="flex items-start space-x-3">
-                        <div
-                          className="mt-1 rounded-full p-2"
-                          style={{
-                            backgroundColor: category.color
-                              ? `${category.color}20`
-                              : '#00000020',
-                          }}
-                        >
-                          <div style={{ color: category.color || '#000000' }}>
-                            {renderIcon(category.icon)}
-                          </div>
+                <CardContent className="p-4">
+                  <div className="flex items-start justify-between gap-3">
+                    <div className="flex min-w-0 items-start gap-3">
+                      <div
+                        className="mt-0.5 rounded-full p-2"
+                        style={{
+                          backgroundColor: category.color
+                            ? `${category.color}20`
+                            : '#00000020',
+                        }}
+                      >
+                        <div style={{ color: category.color || '#000000' }}>
+                          {renderIcon(category.icon)}
                         </div>
-                        <div className="flex-1 space-y-2">
-                          <div className="flex items-center gap-2 flex-wrap">
-                            <h3 className="text-lg font-semibold leading-tight">
-                              {category.name}
-                            </h3>
-                            {getStatusBadge(category.status)}
-                          </div>
-                          <div className="flex flex-col gap-1 text-sm text-muted-foreground">
-                            <span>
-                              <strong>{t('slug')}:</strong> {category.slug}
-                            </span>
-                            {category.color && (
-                              <span className="flex items-center gap-2">
-                                <strong>{t('color')}:</strong>
-                                <span
-                                  className="inline-block h-4 w-4 rounded border"
-                                  style={{
-                                    backgroundColor: category.color,
-                                  }}
-                                />
-                                {category.color}
-                              </span>
-                            )}
-                            {category.icon && (
-                              <span>
-                                <strong>{t('icon')}:</strong> {category.icon}
+                      </div>
+                      <div className="min-w-0 space-y-2">
+                        <div className="flex items-center gap-2 flex-wrap">
+                          <h3 className="truncate text-base font-semibold leading-tight">
+                            {category.name}
+                          </h3>
+                          {getStatusBadge(category.status)}
+                        </div>
+                        <div className="space-y-1 text-xs text-muted-foreground">
+                          <p className="truncate">
+                            <span className="font-medium text-foreground">
+                              {t('slug')}:
+                            </span>{' '}
+                            {category.slug}
+                          </p>
+                          {category.color && (
+                            <p className="flex items-center gap-2">
+                              <span className="font-medium text-foreground">
+                                {t('color')}:
                               </span>
-                            )}
-                          </div>
+                              <span
+                                className="inline-block h-3.5 w-3.5 rounded border"
+                                style={{
+                                  backgroundColor: category.color,
+                                }}
+                              />
+                              <span className="truncate">{category.color}</span>
+                            </p>
+                          )}
+                          {category.icon && (
+                            <p className="truncate">
+                              <span className="font-medium text-foreground">
+                                {t('icon')}:
+                              </span>{' '}
+                              {category.icon}
+                            </p>
+                          )}
                         </div>
                       </div>
                     </div>
+                  </div>
 
-                    <div className="flex flex-col gap-2">
-                      <Button
-                        variant="outline"
-                        size="sm"
-                        onClick={() => handleEditCategory(category)}
-                        className="transition-colors hover:border-blue-200 hover:bg-blue-50 hover:text-blue-600 dark:hover:bg-blue-950"
-                      >
-                        <Edit className="mr-1 h-4 w-4" />
-                        {t('edit')}
-                      </Button>
-
-                      <AlertDialog>
-                        <AlertDialogTrigger asChild>
-                          <Button
-                            variant="outline"
-                            size="sm"
-                            className="bg-transparent transition-colors hover:border-red-200 hover:bg-red-50 hover:text-red-600 dark:hover:bg-red-950"
+                  <div className="mt-4 flex items-center justify-end gap-2">
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      onClick={() => handleEditCategory(category)}
+                      className="transition-colors hover:border-blue-200 hover:bg-blue-50 hover:text-blue-600 dark:hover:bg-blue-950"
+                    >
+                      <Edit className="mr-1 h-4 w-4" />
+                      {t('edit')}
+                    </Button>
+
+                    <AlertDialog>
+                      <AlertDialogTrigger asChild>
+                        <Button
+                          variant="outline"
+                          size="sm"
+                          className="bg-transparent transition-colors hover:border-red-200 hover:bg-red-50 hover:text-red-600 dark:hover:bg-red-950"
+                        >
+                          <Trash2 className="mr-1 h-4 w-4" />
+                          {t('delete')}
+                        </Button>
+                      </AlertDialogTrigger>
+                      <AlertDialogContent>
+                        <AlertDialogHeader>
+                          <AlertDialogTitle>
+                            {t('confirmDelete')}
+                          </AlertDialogTitle>
+                          <AlertDialogDescription>
+                            {t('deleteDescription')}
+                          </AlertDialogDescription>
+                        </AlertDialogHeader>
+                        <AlertDialogFooter>
+                          <AlertDialogCancel>{t('cancel')}</AlertDialogCancel>
+                          <AlertDialogAction
+                            onClick={() =>
+                              handleDeleteCategory(Number(category.category_id))
+                            }
+                            className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
                           >
-                            <Trash2 className="mr-1 h-4 w-4" />
                             {t('delete')}
-                          </Button>
-                        </AlertDialogTrigger>
-                        <AlertDialogContent>
-                          <AlertDialogHeader>
-                            <AlertDialogTitle>
-                              {t('confirmDelete')}
-                            </AlertDialogTitle>
-                            <AlertDialogDescription>
-                              {t('deleteDescription')}
-                            </AlertDialogDescription>
-                          </AlertDialogHeader>
-                          <AlertDialogFooter>
-                            <AlertDialogCancel>{t('cancel')}</AlertDialogCancel>
-                            <AlertDialogAction
-                              onClick={() =>
-                                handleDeleteCategory(
-                                  Number(category.category_id)
-                                )
-                              }
-                              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
-                            >
-                              {t('delete')}
-                            </AlertDialogAction>
-                          </AlertDialogFooter>
-                        </AlertDialogContent>
-                      </AlertDialog>
-                    </div>
+                          </AlertDialogAction>
+                        </AlertDialogFooter>
+                      </AlertDialogContent>
+                    </AlertDialog>
                   </div>
                 </CardContent>
               </Card>
             ))}
           </div>
         ) : (
-          <Card>
-            <CardContent className="p-12 text-center">
-              <div className="flex flex-col items-center space-y-4">
-                <Layers className="h-12 w-12 text-muted-foreground" />
-                <div>
-                  <h3 className="text-lg font-semibold">
-                    {t('noCategoriesFound')}
-                  </h3>
-                  <p className="text-muted-foreground">{t('adjustFilters')}</p>
-                </div>
-                <Button onClick={handleNewCategory}>
-                  <Plus className="mr-2 h-4 w-4" />
-                  {t('createFirstCategory')}
-                </Button>
-              </div>
-            </CardContent>
-          </Card>
+          <EmptyState
+            icon={<Layers className="h-12 w-12" />}
+            title={t('noCategoriesFound')}
+            description={t('adjustFilters')}
+            actionLabel={t('createFirstCategory')}
+            actionIcon={<Plus className="mr-2 h-4 w-4" />}
+            onAction={handleNewCategory}
+          />
         )}
 
         <PaginationFooter
@@ -606,42 +625,77 @@ export default function CategoryPage() {
           pageSize={pageSize}
           totalItems={total}
           onPageChange={setPage}
-          onPageSizeChange={setPageSize}
+          onPageSizeChange={(nextPageSize) => {
+            setPageSize(nextPageSize);
+            setPage(1);
+          }}
           pageSizeOptions={[10, 20, 30, 40, 50]}
         />
       </div>
 
-      <Dialog open={isEditDialogOpen} onOpenChange={setIsEditDialogOpen}>
-        <DialogContent className="max-h-[95vh] max-w-2xl overflow-y-auto">
-          <DialogHeader>
-            <DialogTitle className="flex items-center space-x-2">
+      <Sheet
+        open={isEditDialogOpen}
+        onOpenChange={(open) => {
+          setIsEditDialogOpen(open);
+          if (!open) {
+            setIsNewCategory(false);
+            setEditingCategoryId(null);
+            setLocaleData({});
+            form.reset();
+          }
+        }}
+      >
+        <SheetContent className="w-full overflow-y-auto sm:max-w-2xl">
+          <SheetHeader>
+            <SheetTitle className="flex items-center space-x-2">
               <Edit className="h-5 w-5" />
               <span>
                 {isNewCategory ? t('newCategoryTitle') : t('editCategory')}
               </span>
-            </DialogTitle>
-            <DialogDescription>
+            </SheetTitle>
+            <SheetDescription>
               {isNewCategory ? t('createDescription') : t('editDescription')}
-            </DialogDescription>
-          </DialogHeader>
-
-          {selectedCategory && (
-            <div className="space-y-4">
-              <div className="space-y-2">
-                <Label
-                  htmlFor="locale-select"
-                  className="flex items-center gap-2"
-                >
+            </SheetDescription>
+          </SheetHeader>
+
+          <Form {...form}>
+            <form onSubmit={handleSaveCategory} className="space-y-4 px-4">
+              <FormItem>
+                <FormLabel className="flex items-center gap-2">
                   <Globe className="h-4 w-4" />
                   {t('language')}
-                </Label>
+                </FormLabel>
                 <Select
                   value={selectedLocale}
-                  onValueChange={setSelectedLocale}
+                  onValueChange={(nextLocale) => {
+                    const currentName = form.getValues('name');
+                    const currentLocale = selectedLocale;
+                    const nextLocaleData = {
+                      ...localeData,
+                    };
+
+                    if (currentLocale) {
+                      nextLocaleData[currentLocale] = {
+                        name: currentName,
+                      };
+                    }
+
+                    if (!nextLocaleData[nextLocale]) {
+                      nextLocaleData[nextLocale] = {
+                        name: '',
+                      };
+                    }
+
+                    setLocaleData(nextLocaleData);
+                    setSelectedLocale(nextLocale);
+                    form.setValue('name', nextLocaleData[nextLocale].name);
+                  }}
                 >
-                  <SelectTrigger id="locale-select">
-                    <SelectValue placeholder={t('selectLanguage')} />
-                  </SelectTrigger>
+                  <FormControl>
+                    <SelectTrigger id="locale-select">
+                      <SelectValue placeholder={t('selectLanguage')} />
+                    </SelectTrigger>
+                  </FormControl>
                   <SelectContent>
                     {locales.map((locale: Locale) => (
                       <SelectItem key={locale.code} value={locale.code}>
@@ -650,171 +704,167 @@ export default function CategoryPage() {
                     ))}
                   </SelectContent>
                 </Select>
-              </div>
-
-              <div className="space-y-2">
-                <Label htmlFor="name">{t('nameRequired')}</Label>
-                <Input
-                  id="name"
-                  placeholder={t('namePlaceholder')}
-                  value={selectedCategory.locale?.[selectedLocale]?.name || ''}
-                  onChange={(e) =>
-                    setSelectedCategory({
-                      ...selectedCategory,
-                      locale: {
-                        ...selectedCategory.locale,
-                        [selectedLocale]: {
-                          ...selectedCategory.locale?.[selectedLocale],
-                          name: e.target.value,
-                        },
-                      },
-                    })
-                  }
-                />
-              </div>
-
-              <div className="space-y-2">
-                <Label htmlFor="slug">{t('slugRequired')}</Label>
-                <Input
-                  id="slug"
-                  placeholder={t('slugPlaceholder')}
-                  value={selectedCategory.slug || ''}
-                  onChange={(e) =>
-                    setSelectedCategory({
-                      ...selectedCategory,
-                      slug: e.target.value,
-                    })
-                  }
-                />
-              </div>
-
-              <div className="space-y-2">
-                <Label htmlFor="color">{t('color')}</Label>
-                <div className="flex gap-2">
-                  <Input
-                    id="color"
-                    type="color"
-                    className="h-10 w-20"
-                    value={selectedCategory.color || '#000000'}
-                    onChange={(e) =>
-                      setSelectedCategory({
-                        ...selectedCategory,
-                        color: e.target.value,
-                      })
-                    }
-                  />
-                  <Input
-                    placeholder={t('colorPlaceholder')}
-                    value={selectedCategory.color || '#000000'}
-                    onChange={(e) =>
-                      setSelectedCategory({
-                        ...selectedCategory,
-                        color: e.target.value,
-                      })
-                    }
-                  />
-                </div>
-              </div>
-
-              <div className="space-y-2">
-                <Label htmlFor="icon">{t('icon')}</Label>
-                <div className="flex gap-2 items-center">
-                  <div className="shrink-0">
-                    {renderIcon(selectedCategory.icon)}
-                  </div>
-                  <Input
-                    id="icon"
-                    placeholder={t('iconPlaceholder')}
-                    value={selectedCategory.icon || ''}
-                    onChange={(e) =>
-                      setSelectedCategory({
-                        ...selectedCategory,
-                        icon: e.target.value,
-                      })
-                    }
-                  />
-                </div>
-              </div>
-
-              <div className="space-y-2">
-                <Label htmlFor="parent">{t('parentCategory')}</Label>
-                <Select
-                  value={selectedCategory.category_id?.toString() || 'none'}
-                  onValueChange={(value) =>
-                    setSelectedCategory({
-                      ...selectedCategory,
-                      category_id: value === 'none' ? null : Number(value),
-                    })
-                  }
-                >
-                  <SelectTrigger className="w-full" id="parent">
-                    <SelectValue placeholder={t('selectParent')} />
-                  </SelectTrigger>
-                  <SelectContent>
-                    <SelectItem value="none">{t('noneRoot')}</SelectItem>
-                    {Array.isArray(rootCategories) &&
-                      rootCategories.map((cat: Category) => (
-                        <SelectItem
-                          key={cat.id}
-                          value={String(cat.category_id)}
-                        >
-                          {cat.name}
+              </FormItem>
+
+              <FormField
+                control={form.control}
+                name="name"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('nameRequired')}</FormLabel>
+                    <FormControl>
+                      <Input
+                        {...field}
+                        placeholder={t('namePlaceholder')}
+                        onChange={(event) => {
+                          field.onChange(event.target.value);
+                          if (selectedLocale) {
+                            setLocaleData((current) => ({
+                              ...current,
+                              [selectedLocale]: {
+                                name: event.target.value,
+                              },
+                            }));
+                          }
+                        }}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name="slug"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('slugRequired')}</FormLabel>
+                    <FormControl>
+                      <Input {...field} placeholder={t('slugPlaceholder')} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name="color"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('color')}</FormLabel>
+                    <FormControl>
+                      <div className="flex gap-2">
+                        <Input
+                          type="color"
+                          className="h-10 w-20"
+                          value={field.value || '#000000'}
+                          onChange={(event) =>
+                            field.onChange(event.target.value)
+                          }
+                        />
+                        <Input
+                          value={field.value || '#000000'}
+                          onChange={(event) =>
+                            field.onChange(event.target.value)
+                          }
+                          placeholder={t('colorPlaceholder')}
+                        />
+                      </div>
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name="icon"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('icon')}</FormLabel>
+                    <FormControl>
+                      <div className="flex items-center gap-2">
+                        <div className="shrink-0">
+                          {renderIcon(field.value)}
+                        </div>
+                        <Input {...field} placeholder={t('iconPlaceholder')} />
+                      </div>
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name="category_id"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('parentCategory')}</FormLabel>
+                    <Select value={field.value} onValueChange={field.onChange}>
+                      <FormControl>
+                        <SelectTrigger className="w-full" id="parent">
+                          <SelectValue placeholder={t('selectParent')} />
+                        </SelectTrigger>
+                      </FormControl>
+                      <SelectContent>
+                        <SelectItem value="none">{t('noneRoot')}</SelectItem>
+                        {Array.isArray(rootCategories) &&
+                          rootCategories.map((cat: Category) => (
+                            <SelectItem
+                              key={cat.id}
+                              value={String(cat.category_id)}
+                            >
+                              {cat.name}
+                            </SelectItem>
+                          ))}
+                      </SelectContent>
+                    </Select>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name="status"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('status')}</FormLabel>
+                    <Select value={field.value} onValueChange={field.onChange}>
+                      <FormControl>
+                        <SelectTrigger className="w-full" id="status">
+                          <SelectValue placeholder={t('selectStatus')} />
+                        </SelectTrigger>
+                      </FormControl>
+                      <SelectContent>
+                        <SelectItem value="active">{t('active')}</SelectItem>
+                        <SelectItem value="inactive">
+                          {t('inactive')}
                         </SelectItem>
-                      ))}
-                  </SelectContent>
-                </Select>
-              </div>
-
-              <div className="space-y-2">
-                <Label htmlFor="status">{t('status')}</Label>
-                <Select
-                  value={selectedCategory.status}
-                  onValueChange={(value) =>
-                    setSelectedCategory({
-                      ...selectedCategory,
-                      status: value,
-                    })
-                  }
+                      </SelectContent>
+                    </Select>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <SheetFooter className="px-0">
+                <Button
+                  type="submit"
+                  disabled={!form.formState.isValid}
+                  className="w-full transition-colors hover:bg-primary/90"
                 >
-                  <SelectTrigger className="w-full" id="status">
-                    <SelectValue placeholder={t('selectStatus')} />
-                  </SelectTrigger>
-                  <SelectContent>
-                    <SelectItem value="active">{t('active')}</SelectItem>
-                    <SelectItem value="inactive">{t('inactive')}</SelectItem>
-                  </SelectContent>
-                </Select>
-              </div>
-            </div>
-          )}
-
-          <DialogFooter className="mt-4">
-            <Button
-              variant="outline"
-              onClick={() => {
-                setIsEditDialogOpen(false);
-                setSelectedCategory(null);
-                setIsNewCategory(false);
-              }}
-            >
-              <X className="mr-2 h-4 w-4" />
-              {t('cancel')}
-            </Button>
-            <Button
-              onClick={handleSaveCategory}
-              disabled={
-                !selectedCategory?.slug ||
-                !selectedCategory?.locale ||
-                !Object.values(selectedCategory.locale).some((l: any) => l.name)
-              }
-              className="transition-colors hover:bg-primary/90"
-            >
-              <Save className="mr-2 h-4 w-4" />
-              {isNewCategory ? t('createCategoryButton') : t('saveChanges')}
-            </Button>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
-    </div>
+                  <Save className="mr-2 h-4 w-4" />
+                  {isNewCategory ? t('createCategoryButton') : t('saveChanges')}
+                </Button>
+              </SheetFooter>
+            </form>
+          </Form>
+        </SheetContent>
+      </Sheet>
+    </Page>
   );
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hed-hog/category",
-  "version": "0.0.279",
+  "version": "0.0.285",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "dependencies": {
@@ -10,10 +10,10 @@
     "@nestjs/jwt": "^11",
     "@nestjs/mapped-types": "*",
     "@hed-hog/api-prisma": "0.0.5",
-    "@hed-hog/core": "0.0.279",
-    "@hed-hog/api-pagination": "0.0.6",
     "@hed-hog/api": "0.0.4",
-    "@hed-hog/api-locale": "0.0.13"
+    "@hed-hog/api-locale": "0.0.13",
+    "@hed-hog/core": "0.0.285",
+    "@hed-hog/api-pagination": "0.0.6"
   },
   "exports": {
     ".": {