@hed-hog/category 0.0.361 → 0.0.364

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

@@ -6,7 +6,6 @@ import {
   PageHeader,
   PaginationFooter,
   SearchBar,
-  StatsCards,
 } from '@/components/entity-list';
 import {
   AlertDialog,
@@ -31,6 +30,8 @@ import {
   FormMessage,
 } from '@/components/ui/form';
 import { Input } from '@/components/ui/input';
+import { KpiCardsGrid } from '@/components/ui/kpi-cards-grid';
+import { ResizableSheetContent } from '@/components/ui/resizable-sheet-content';
 import {
   Select,
   SelectContent,
@@ -38,7 +39,6 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@/components/ui/select';
-import { ResizableSheetContent } from '@/components/ui/resizable-sheet-content';
 import {
   Sheet,
   SheetDescription,
@@ -46,6 +46,15 @@ import {
   SheetHeader,
   SheetTitle,
 } from '@/components/ui/sheet';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group';
 import { useDebounce } from '@/hooks/use-debounce';
 import { usePersistedPageSize } from '@/hooks/use-persisted-page-size';
 import { useApp, useQuery } from '@hed-hog/next-app-provider';
@@ -56,6 +65,8 @@ import {
   FolderTree,
   Globe,
   Layers,
+  LayoutGrid,
+  List,
   Plus,
   Save,
   Tag,
@@ -105,6 +116,9 @@ type CategoryFormValues = {
   status: 'active' | 'inactive';
 };
 
+const CATEGORY_VIEW_STORAGE_KEY = 'category-view-mode';
+type CategoryViewMode = 'table' | 'cards';
+
 export default function CategoryPage() {
   const t = useTranslations('category.Category');
   const [editingCategoryId, setEditingCategoryId] = useState<number | null>(
@@ -123,6 +137,7 @@ export default function CategoryPage() {
     defaultValue: 10,
     allowedValues: [10, 20, 30, 40, 50],
   });
+  const [viewMode, setViewMode] = useState<CategoryViewMode>('table');
   const [statusFilter, setStatusFilter] = useState<string>('all');
   const [parentFilter, setParentFilter] = useState<string>('all');
   const [selectedLocale, setSelectedLocale] = useState<string>('');
@@ -175,6 +190,17 @@ export default function CategoryPage() {
     }
   }, [currentLocaleCode]);
 
+  useEffect(() => {
+    try {
+      const saved = window.localStorage.getItem(CATEGORY_VIEW_STORAGE_KEY);
+      if (saved === 'table' || saved === 'cards') {
+        setViewMode(saved);
+      }
+    } catch {
+      // Ignore storage read failures.
+    }
+  }, []);
+
   const { data: categoriesResult, refetch: refetchCategories } = useQuery<
     PaginationResult<Category>
   >({
@@ -275,7 +301,7 @@ export default function CategoryPage() {
   const handleEditCategory = async (category: Category): Promise<void> => {
     try {
       const response = await request({
-        url: `/category/${category.category_id}`,
+        url: `/category/${category.id}`,
         method: 'GET',
       });
 
@@ -402,6 +428,19 @@ export default function CategoryPage() {
     setPage(1);
   };
 
+  const handleViewModeChange = (value: string): void => {
+    if (value !== 'table' && value !== 'cards') {
+      return;
+    }
+
+    setViewMode(value);
+    try {
+      window.localStorage.setItem(CATEGORY_VIEW_STORAGE_KEY, value);
+    } catch {
+      // Ignore storage write failures.
+    }
+  };
+
   useEffect(() => {
     if (!isEditDialogOpen || !selectedLocale) {
       return;
@@ -422,35 +461,83 @@ export default function CategoryPage() {
 
   const statsCards = [
     {
+      key: 'total',
       title: t('totalCategories'),
       value: statsData?.total || 0,
-      icon: <Layers className="h-5 w-5" />,
-      iconBgColor: 'bg-blue-100',
-      iconColor: 'text-blue-600',
+      icon: Layers,
+      accentClassName: 'from-sky-500/20 via-blue-400/10 to-transparent',
+      iconContainerClassName: 'bg-sky-50 text-sky-600',
     },
     {
+      key: 'active',
       title: t('actives'),
       value: statsData?.totalActive || 0,
-      icon: <Tag className="h-5 w-5" />,
-      iconBgColor: 'bg-green-100',
-      iconColor: 'text-green-600',
+      icon: Tag,
+      accentClassName: 'from-emerald-500/20 via-green-400/10 to-transparent',
+      iconContainerClassName: 'bg-emerald-50 text-emerald-600',
     },
     {
+      key: 'inactive',
       title: t('inactives'),
       value: statsData?.totalInactive || 0,
-      icon: <Tag className="h-5 w-5" />,
-      iconBgColor: 'bg-orange-100',
-      iconColor: 'text-orange-600',
+      icon: Tag,
+      accentClassName: 'from-amber-500/20 via-orange-400/10 to-transparent',
+      iconContainerClassName: 'bg-amber-50 text-amber-600',
     },
     {
+      key: 'root',
       title: t('root'),
       value: statsData?.totalRoot || 0,
-      icon: <FolderTree className="h-5 w-5" />,
-      iconBgColor: 'bg-purple-100',
-      iconColor: 'text-purple-600',
+      icon: FolderTree,
+      accentClassName: 'from-violet-500/20 via-purple-400/10 to-transparent',
+      iconContainerClassName: 'bg-violet-50 text-violet-600',
     },
   ];
 
+  const renderCategoryActions = (category: Category) => (
+    <div className="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(category.id)}
+              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+            >
+              {t('delete')}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </div>
+  );
+
   return (
     <Page>
       <PageHeader
@@ -466,154 +553,229 @@ export default function CategoryPage() {
         description={t('description')}
       />
 
-      <StatsCards stats={statsCards} />
+      <KpiCardsGrid items={statsCards} />
 
-      <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="flex flex-col gap-4 xl:flex-row xl:items-center">
+        <div className="flex-1">
+          <SearchBar
+            searchQuery={searchTerm}
+            onSearchChange={handleSearchChange}
+            onSearch={() => setPage(1)}
+            placeholder={t('searchPlaceholder')}
+            controls={[
+              {
+                id: 'status-filter',
+                type: 'select',
+                value: statusFilter,
+                onChange: (value) => {
+                  setStatusFilter(value);
+                  setPage(1);
+                },
+                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: (value) => {
+                  setParentFilter(value);
+                  setPage(1);
+                },
+                placeholder: t('hierarchy'),
+                options: [
+                  { value: 'all', label: t('allHierarchy') },
+                  { value: 'root', label: t('rootHierarchy') },
+                ],
+              },
+            ]}
+          />
+        </div>
+
+        <div className="flex items-center gap-3 xl:justify-end">
+          <span className="text-xs font-medium text-muted-foreground">
+            {t('viewMode')}
+          </span>
+          <ToggleGroup
+            type="single"
+            value={viewMode}
+            onValueChange={handleViewModeChange}
+            variant="outline"
+            size="sm"
+            aria-label={t('viewMode')}
+          >
+            <ToggleGroupItem
+              value="table"
+              className="gap-1.5 px-2.5"
+              aria-label={t('viewModeTable')}
+            >
+              <List className="h-4 w-4" />
+              <span className="hidden sm:inline">{t('viewModeTable')}</span>
+            </ToggleGroupItem>
+            <ToggleGroupItem
+              value="cards"
+              className="gap-1.5 px-2.5"
+              aria-label={t('viewModeCards')}
+            >
+              <LayoutGrid className="h-4 w-4" />
+              <span className="hidden sm:inline">{t('viewModeCards')}</span>
+            </ToggleGroupItem>
+          </ToggleGroup>
+        </div>
+      </div>
 
       <div className="space-y-4">
         {categories.length > 0 ? (
-          <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-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)}
+          viewMode === 'table' ? (
+            <div className="overflow-x-auto">
+              <Table>
+                <TableHeader>
+                  <TableRow>
+                    <TableHead>{t('name')}</TableHead>
+                    <TableHead>{t('slug')}</TableHead>
+                    <TableHead>{t('color')}</TableHead>
+                    <TableHead>{t('icon')}</TableHead>
+                    <TableHead>{t('status')}</TableHead>
+                    <TableHead className="text-right">{t('edit')}</TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {categories.map((category) => (
+                    <TableRow
+                      key={category.id}
+                      onDoubleClick={() => handleEditCategory(category)}
+                      className="cursor-pointer"
+                    >
+                      <TableCell>
+                        <div className="flex min-w-0 items-center gap-3">
+                          <div
+                            className="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="min-w-0">
+                            <div className="truncate font-medium">
+                              {category.name}
+                            </div>
+                            <div className="text-xs text-muted-foreground">
+                              {category.category_id
+                                ? t('hierarchy')
+                                : t('root')}
+                            </div>
+                          </div>
                         </div>
-                      </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)}
+                      </TableCell>
+                      <TableCell className="font-mono text-sm">
+                        {category.slug}
+                      </TableCell>
+                      <TableCell>
+                        {category.color ? (
+                          <div className="flex items-center gap-2">
+                            <span
+                              className="inline-block h-3.5 w-3.5 rounded border"
+                              style={{ backgroundColor: category.color }}
+                            />
+                            <span>{category.color}</span>
+                          </div>
+                        ) : (
+                          '—'
+                        )}
+                      </TableCell>
+                      <TableCell>{category.icon || '—'}</TableCell>
+                      <TableCell>{getStatusBadge(category.status)}</TableCell>
+                      <TableCell className="text-right">
+                        {renderCategoryActions(category)}
+                      </TableCell>
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+            </div>
+          ) : (
+            <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-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>
-                        <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>
-                              <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 && (
+                        <div className="min-w-0 space-y-2">
+                          <div className="flex flex-wrap items-center gap-2">
+                            <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('icon')}:
+                                {t('slug')}:
                               </span>{' '}
-                              {category.icon}
+                              {category.slug}
                             </p>
-                          )}
+                            {category.color && (
+                              <p className="flex items-center gap-2">
+                                <span className="font-medium text-foreground">
+                                  {t('color')}:
+                                </span>
+                                <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>
-
-                  <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"
-                          >
-                            {t('delete')}
-                          </AlertDialogAction>
-                        </AlertDialogFooter>
-                      </AlertDialogContent>
-                    </AlertDialog>
-                  </div>
-                </CardContent>
-              </Card>
-            ))}
-          </div>
+
+                    <div className="mt-4">
+                      {renderCategoryActions(category)}
+                    </div>
+                  </CardContent>
+                </Card>
+              ))}
+            </div>
+          )
         ) : (
           <EmptyState
             icon={<Layers className="h-12 w-12" />}
@@ -818,10 +980,7 @@ export default function CategoryPage() {
                         <SelectItem value="none">{t('noneRoot')}</SelectItem>
                         {Array.isArray(rootCategories) &&
                           rootCategories.map((cat: Category) => (
-                            <SelectItem
-                              key={cat.id}
-                              value={String(cat.category_id)}
-                            >
+                            <SelectItem key={cat.id} value={String(cat.id)}>
                               {cat.name}
                             </SelectItem>
                           ))}

package/hedhog/frontend/messages/en.json

@@ -10,6 +10,9 @@
     "root": "Root",
     "searchPlaceholder": "Search by name or slug...",
     "status": "Status",
+    "viewMode": "View",
+    "viewModeTable": "Table",
+    "viewModeCards": "Grid",
     "all": "All",
     "actives": "Active",
     "inactives": "Inactive",

package/hedhog/frontend/messages/pt.json

@@ -10,6 +10,9 @@
     "root": "Raiz",
     "searchPlaceholder": "Buscar por nome ou slug...",
     "status": "Status",
+    "viewMode": "Visualização",
+    "viewModeTable": "Tabela",
+    "viewModeCards": "Grade",
     "all": "Todos",
     "actives": "Ativos",
     "inactives": "Inativos",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hed-hog/category",
-  "version": "0.0.361",
+  "version": "0.0.364",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "dependencies": {
@@ -9,11 +9,11 @@
     "@nestjs/core": "^11",
     "@nestjs/jwt": "^11",
     "@nestjs/mapped-types": "*",
-    "@hed-hog/core": "0.0.361",
     "@hed-hog/api-locale": "0.0.14",
-    "@hed-hog/api-prisma": "0.0.6",
     "@hed-hog/api": "0.0.8",
-    "@hed-hog/api-pagination": "0.0.7"
+    "@hed-hog/api-prisma": "0.0.6",
+    "@hed-hog/api-pagination": "0.0.7",
+    "@hed-hog/core": "0.0.364"
   },
   "exports": {
     ".": {