@hed-hog/category 0.0.186 → 0.0.187

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

@@ -0,0 +1,827 @@
+'use client';
+
+import {
+  PageHeader,
+  PaginationFooter,
+  SearchBar,
+} from '@/components/entity-list';
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from '@/components/ui/alert-dialog';
+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';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { useDebounce } from '@/hooks/use-debounce';
+import { useApp, useQuery } from '@hed-hog/next-app-provider';
+import * as TablerIcons from '@tabler/icons-react';
+import {
+  Edit,
+  FolderTree,
+  Globe,
+  Layers,
+  Plus,
+  Save,
+  Tag,
+  Trash2,
+  X,
+} from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import { useEffect, useState } from 'react';
+import { toast } from 'sonner';
+
+type PaginationResult<T> = {
+  data: T[];
+  total: number;
+  page: number;
+  pageSize: number;
+};
+
+type CategoryLocale = {
+  name: string;
+  locale_id?: number;
+};
+
+type Category = {
+  id: number;
+  slug: string;
+  name: string;
+  category_id?: number | null;
+  color?: string;
+  icon?: string;
+  status: 'active' | 'inactive';
+  category_locale?: CategoryLocale[];
+};
+
+type Locale = {
+  id?: number;
+  code: string;
+  name: string;
+};
+
+export default function CategoryPage() {
+  const t = useTranslations('category.Category');
+  const [categories, setCategories] = useState<Category[]>([]);
+  const [selectedCategory, setSelectedCategory] = useState<any | null>(null);
+  const [isEditDialogOpen, setIsEditDialogOpen] = useState(false);
+  const [isNewCategory, setIsNewCategory] = useState(false);
+  const [searchTerm, setSearchTerm] = useState('');
+  const debouncedSearch = useDebounce(searchTerm);
+  const [page, setPage] = useState(1);
+  const [pageSize, setPageSize] = useState(10);
+  const [statusFilter, setStatusFilter] = useState<string>('all');
+  const [parentFilter, setParentFilter] = useState<string>('all');
+  const [selectedLocale, setSelectedLocale] = useState<string>('');
+  const [fullLocales, setFullLocales] = useState<any[]>([]);
+  const { request, locales, currentLocaleCode } = useApp();
+
+  // Buscar locales completos com id
+  useEffect(() => {
+    const fetchLocales = async () => {
+      try {
+        const response: any = await request({
+          url: '/locale',
+          params: { pageSize: 100 },
+        });
+        if (response.data?.data) {
+          setFullLocales(response.data.data);
+        }
+      } catch (error) {
+        console.error('Erro ao buscar locales:', error);
+      }
+    };
+    fetchLocales();
+  }, []);
+
+  useEffect(() => {
+    if (currentLocaleCode && !selectedLocale) {
+      setSelectedLocale(currentLocaleCode);
+    }
+  }, [currentLocaleCode]);
+
+  const {
+    data: { data, total },
+    refetch: refetchCategories,
+  } = useQuery<PaginationResult<Category>>({
+    queryKey: [
+      'categories',
+      debouncedSearch,
+      page,
+      pageSize,
+      statusFilter,
+      parentFilter,
+    ],
+    queryFn: async () => {
+      const response = await request({
+        url: '/category',
+        params: {
+          search: debouncedSearch,
+          page,
+          pageSize,
+          status: statusFilter,
+          parent: parentFilter,
+        },
+      });
+      return response.data as PaginationResult<Category>;
+    },
+    initialData: {
+      data: [],
+      total: 0,
+      page: 1,
+      pageSize: 10,
+    },
+  });
+
+  const { data: rootCategories = [] } = useQuery<Category[]>({
+    queryKey: ['root-categories'],
+    queryFn: async () => {
+      const response = await request({
+        url: '/category/root',
+      });
+      return (response.data || []) as Category[];
+    },
+    initialData: [],
+    enabled: true,
+    staleTime: 0,
+    refetchOnMount: true,
+  });
+
+  const { data: statsData, refetch: refetchStats } = useQuery<any>({
+    queryKey: ['category-stats'],
+    queryFn: async () => {
+      const response = await request({
+        url: '/category/stats',
+      });
+      return response.data;
+    },
+  });
+
+  useEffect(() => {
+    if (data) {
+      setCategories(data);
+    }
+  }, [data]);
+
+  const renderIcon = (iconName?: string) => {
+    const toPascalCase = (str: string) =>
+      str.replace(/(^\w|-\w)/g, (match) =>
+        match.replace('-', '').toUpperCase()
+      );
+
+    const pascalName = toPascalCase(String(iconName));
+
+    let IconComponent = (TablerIcons as any)[`Icon${pascalName}`];
+    if (!IconComponent) {
+      IconComponent = (TablerIcons as any)[`Icon${pascalName}Filled`];
+    }
+    if (!IconComponent) {
+      IconComponent = (TablerIcons as any)[`Icon${pascalName}Circle`];
+    }
+    if (IconComponent) {
+      return <IconComponent className="h-4 w-4" />;
+    }
+    // fallback para Briefcase se não encontrar
+    return <TablerIcons.IconBriefcase className="h-4 w-4" />;
+  };
+
+  const handleNewCategory = (): void => {
+    const newCategory: any = {
+      slug: '',
+      category_id: null,
+      color: '#000000',
+      icon: '',
+      status: 'active',
+      locale: {},
+    };
+
+    locales.forEach((locale: Locale) => {
+      newCategory.locale[locale.code] = {
+        name: '',
+      };
+    });
+
+    setSelectedCategory(newCategory);
+    setIsNewCategory(true);
+    setIsEditDialogOpen(true);
+  };
+
+  const handleEditCategory = async (category: Category): Promise<void> => {
+    try {
+      const response = await request({
+        url: `/category/${category.category_id}`,
+        method: 'GET',
+      });
+
+      const categoryData = response.data as any;
+      const localeData: Record<string, { name: string }> = {};
+
+      if (
+        categoryData.category_locale &&
+        Array.isArray(categoryData.category_locale)
+      ) {
+        categoryData.category_locale.forEach((cl: any) => {
+          const locale = locales.find((l: Locale) => {
+            const fullLocale = fullLocales.find(
+              (fl: any) => fl.id === cl.locale_id
+            );
+            return fullLocale?.code === l.code;
+          });
+
+          if (locale) {
+            localeData[locale.code] = {
+              name: cl.name || '',
+            };
+          }
+        });
+      }
+
+      // Garantir que todos os locales estejam presentes
+      locales.forEach((locale: Locale) => {
+        if (!localeData[locale.code]) {
+          localeData[locale.code] = {
+            name: '',
+          };
+        }
+      });
+
+      setSelectedCategory({
+        ...categoryData,
+        locale: localeData,
+      });
+      setIsNewCategory(false);
+      setIsEditDialogOpen(true);
+    } catch (error) {
+      console.error(error);
+      toast.error(t('errorLoading'));
+    }
+  };
+
+  const handleSaveCategory = async () => {
+    if (!selectedCategory) return;
+
+    const payload = {
+      locale: selectedCategory.locale,
+      slug: selectedCategory.slug,
+      category_id: selectedCategory.category_id || null,
+      color: selectedCategory.color,
+      icon: selectedCategory.icon,
+      status: selectedCategory.status,
+    };
+
+    try {
+      if (selectedCategory.id) {
+        await request({
+          url: `/category/${selectedCategory.id}`,
+          method: 'PATCH',
+          data: payload,
+        });
+        toast.success(t('successUpdate'));
+      } else {
+        await request({
+          url: `/category`,
+          method: 'POST',
+          data: payload,
+        });
+        toast.success(t('successCreate'));
+      }
+
+      setIsEditDialogOpen(false);
+      await refetchCategories();
+      await refetchStats();
+    } catch (error) {
+      console.error(error);
+      toast.error(t('errorSave'));
+    }
+  };
+
+  const handleDeleteCategory = async (categoryId: number): Promise<void> => {
+    try {
+      await request({
+        url: `/category/${categoryId}`,
+        method: 'DELETE',
+      });
+      toast.success(t('successDelete'));
+      await refetchCategories();
+      await refetchStats();
+    } catch (error) {
+      console.error(error);
+      toast.error(t('errorDelete'));
+    }
+  };
+
+  const handleSearchChange = (value: string): void => {
+    setSearchTerm(value);
+  };
+
+  useEffect(() => {
+    refetchCategories();
+    refetchStats();
+  }, [
+    isEditDialogOpen,
+    debouncedSearch,
+    page,
+    pageSize,
+    statusFilter,
+    parentFilter,
+  ]);
+
+  const getStatusBadge = (status: string) => {
+    return status === 'active' ? (
+      <Badge variant="default" className="bg-green-500">
+        {t('active')}
+      </Badge>
+    ) : (
+      <Badge variant="secondary">{t('inactive')}</Badge>
+    );
+  };
+
+  return (
+    <div className="flex flex-col h-screen px-4">
+      <PageHeader
+        breadcrumbs={[
+          { label: 'Home', href: '/' },
+          { label: t('description') },
+        ]}
+        actions={[
+          {
+            label: t('newCategory'),
+            onClick: () => handleNewCategory(),
+            variant: 'default',
+          },
+        ]}
+        title={t('title')}
+        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')}
+        />
+
+        <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>
+
+      <div className="space-y-4">
+        {categories.length > 0 ? (
+          <div className="space-y-4">
+            {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>
+                        </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}
+                              </span>
+                            )}
+                          </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"
+                          >
+                            <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>
+                  </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>
+        )}
+
+        <PaginationFooter
+          currentPage={page}
+          pageSize={pageSize}
+          totalItems={total}
+          onPageChange={setPage}
+          onPageSizeChange={setPageSize}
+          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">
+              <Edit className="h-5 w-5" />
+              <span>
+                {isNewCategory ? t('newCategoryTitle') : t('editCategory')}
+              </span>
+            </DialogTitle>
+            <DialogDescription>
+              {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"
+                >
+                  <Globe className="h-4 w-4" />
+                  {t('language')}
+                </Label>
+                <Select
+                  value={selectedLocale}
+                  onValueChange={setSelectedLocale}
+                >
+                  <SelectTrigger id="locale-select">
+                    <SelectValue placeholder={t('selectLanguage')} />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {locales.map((locale: Locale) => (
+                      <SelectItem key={locale.code} value={locale.code}>
+                        {locale.name}
+                      </SelectItem>
+                    ))}
+                  </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}
+                        </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,
+                    })
+                  }
+                >
+                  <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>
+  );
+}

package/hedhog/frontend/messages/en.json

@@ -0,0 +1,55 @@
+{
+  "Category": {
+    "title": "Categories",
+    "description": "Manage all system categories",
+    "newCategory": "New Category",
+    "totalCategories": "Total Categories",
+    "active": "Active",
+    "inactive": "Inactive",
+    "root": "Root",
+    "searchPlaceholder": "Search by name or slug...",
+    "status": "Status",
+    "all": "All",
+    "actives": "Active",
+    "inactives": "Inactive",
+    "hierarchy": "Hierarchy",
+    "allHierarchy": "All",
+    "rootHierarchy": "Root",
+    "slug": "Slug",
+    "color": "Color",
+    "icon": "Icon",
+    "edit": "Edit",
+    "delete": "Delete",
+    "confirmDelete": "Confirm Deletion",
+    "deleteDescription": "Are you sure you want to delete this category? This action cannot be undone.",
+    "cancel": "Cancel",
+    "noCategoriesFound": "No categories found",
+    "adjustFilters": "Try adjusting the filters or create a new category.",
+    "createFirstCategory": "Create First Category",
+    "editCategory": "Edit Category",
+    "newCategoryTitle": "New Category",
+    "editDescription": "Edit the category information",
+    "createDescription": "Create a new category",
+    "language": "Language",
+    "selectLanguage": "Select a language",
+    "name": "Name",
+    "nameRequired": "Name *",
+    "namePlaceholder": "Enter the category name",
+    "slugRequired": "Slug *",
+    "slugPlaceholder": "Enter the slug (e.g., my-category)",
+    "colorPlaceholder": "#000000",
+    "iconPlaceholder": "Enter the icon name (e.g., Home, Star, Heart)",
+    "parentCategory": "Parent Category",
+    "selectParent": "Select the parent category",
+    "noneRoot": "None (Root)",
+    "selectStatus": "Select the status",
+    "createCategoryButton": "Create Category",
+    "saveChanges": "Save Changes",
+    "errorLoading": "Error loading category data.",
+    "successUpdate": "Category updated successfully!",
+    "successCreate": "Category created successfully!",
+    "errorSave": "Error saving category.",
+    "successDelete": "Category deleted successfully!",
+    "errorDelete": "Error deleting category."
+  }
+}

package/hedhog/frontend/messages/pt.json

@@ -0,0 +1,55 @@
+{
+  "Category": {
+    "title": "Categorias",
+    "description": "Gerencie todas as categorias do sistema",
+    "newCategory": "Nova Categoria",
+    "totalCategories": "Total de Categorias",
+    "active": "Ativo",
+    "inactive": "Inativo",
+    "root": "Raiz",
+    "searchPlaceholder": "Buscar por nome ou slug...",
+    "status": "Status",
+    "all": "Todos",
+    "actives": "Ativos",
+    "inactives": "Inativos",
+    "hierarchy": "Hierarquia",
+    "allHierarchy": "Todas",
+    "rootHierarchy": "Raiz",
+    "slug": "Slug",
+    "color": "Cor",
+    "icon": "Ícone",
+    "edit": "Editar",
+    "delete": "Excluir",
+    "confirmDelete": "Confirmar Exclusão",
+    "deleteDescription": "Tem certeza que deseja excluir esta categoria? Esta ação não pode ser desfeita.",
+    "cancel": "Cancelar",
+    "noCategoriesFound": "Nenhuma categoria encontrada",
+    "adjustFilters": "Tente ajustar os filtros ou criar uma nova categoria.",
+    "createFirstCategory": "Criar Primeira Categoria",
+    "editCategory": "Editar Categoria",
+    "newCategoryTitle": "Nova Categoria",
+    "editDescription": "Edite as informações da categoria",
+    "createDescription": "Crie uma nova categoria",
+    "language": "Idioma",
+    "selectLanguage": "Selecione um idioma",
+    "name": "Nome",
+    "nameRequired": "Nome *",
+    "namePlaceholder": "Digite o nome da categoria",
+    "slugRequired": "Slug *",
+    "slugPlaceholder": "Digite o slug (ex: minha-categoria)",
+    "colorPlaceholder": "#000000",
+    "iconPlaceholder": "Digite o nome do ícone (ex: Home, Star, Heart)",
+    "parentCategory": "Categoria Pai",
+    "selectParent": "Selecione a categoria pai",
+    "noneRoot": "Nenhuma (Raiz)",
+    "selectStatus": "Selecione o status",
+    "createCategoryButton": "Criar Categoria",
+    "saveChanges": "Salvar Alterações",
+    "errorLoading": "Erro ao carregar os dados da categoria.",
+    "successUpdate": "Categoria atualizada com sucesso!",
+    "successCreate": "Categoria criada com sucesso!",
+    "errorSave": "Erro ao salvar a categoria.",
+    "successDelete": "Categoria excluída com sucesso!",
+    "errorDelete": "Erro ao excluir a categoria."
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hed-hog/category",
-  "version": "0.0.186",
+  "version": "0.0.187",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "dependencies": {
@@ -9,8 +9,8 @@
     "@nestjs/core": "^11",
     "@nestjs/jwt": "^11",
     "@nestjs/mapped-types": "*",
-    "@hed-hog/api-locale": "0.0.11",
     "@hed-hog/api-pagination": "0.0.5",
+    "@hed-hog/api-locale": "0.0.11",
     "@hed-hog/api-prisma": "0.0.4",
     "@hed-hog/api": "0.0.3",
     "@hed-hog/core": "0.0.186"