@hed-hog/tag 0.0.278 → 0.0.285

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,12 +38,23 @@ 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 { Edit, Save, Tag as TagIcon, Trash2, X } from 'lucide-react';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { Edit, Save, Tag as TagIcon, Trash2 } from 'lucide-react';
 import { useTranslations } from 'next-intl';
-import { useEffect, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
+import { useForm } from 'react-hook-form';
 import { toast } from 'sonner';
+import { z } from 'zod';
 
 type PaginationResult<T> = {
   data: T[];
@@ -57,22 +70,44 @@ type Tag = {
   status: 'active' | 'inactive';
 };
 
+const PAGE_SIZE_OPTIONS: number[] = [10, 20, 30, 40, 50];
+
 export default function TagPage() {
   const t = useTranslations('tag.Tag');
-  const [tags, setTags] = useState<Tag[]>([]);
-  const [selectedTag, setSelectedTag] = useState<Partial<Tag> | null>(null);
-  const [isEditDialogOpen, setIsEditDialogOpen] = useState(false);
-  const [isNewTag, setIsNewTag] = useState(false);
+  const formSchema = useMemo(
+    () =>
+      z.object({
+        slug: z.string().trim().min(2, t('validation.slugMin')),
+        color: z
+          .string()
+          .regex(/^#[0-9A-Fa-f]{6}$/, t('validation.colorInvalid')),
+        status: z.enum(['active', 'inactive']),
+      }),
+    [t]
+  );
+
+  type FormValues = z.infer<typeof formSchema>;
+
+  const [isSheetOpen, setIsSheetOpen] = useState(false);
+  const [editingTagId, setEditingTagId] = useState<number | null>(null);
   const [searchTerm, setSearchTerm] = useState('');
   const debouncedSearch = useDebounce(searchTerm);
   const [page, setPage] = useState(1);
-  const [pageSize, setPageSize] = useState(10);
+  const [pageSize, setPageSize] = useState<number>(10);
   const { request } = useApp();
 
-  const {
-    data: { data, total },
-    refetch: refetchTag,
-  } = useQuery<PaginationResult<Tag>>({
+  const form = useForm<FormValues>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      slug: '',
+      color: '#000000',
+      status: 'active',
+    },
+  });
+
+  const { data: tagResult, refetch: refetchTag } = useQuery<
+    PaginationResult<Tag>
+  >({
     queryKey: ['tag', debouncedSearch, page, pageSize],
     queryFn: async () => {
       const response = await request({
@@ -85,13 +120,8 @@ export default function TagPage() {
       });
       return response.data as PaginationResult<Tag>;
     },
-    initialData: {
-      data: [],
-      total: 0,
-      page: 1,
-      pageSize: 10,
-    },
   });
+  const { data = [], total = 0 } = tagResult ?? {};
 
   const { data: statsData, refetch: refetchStats } = useQuery<any>({
     queryKey: ['tag-stats'],
@@ -103,51 +133,47 @@ export default function TagPage() {
     },
   });
 
-  useEffect(() => {
-    if (data) {
-      setTags(data);
-    }
-  }, [data]);
-
   const handleNewTag = (): void => {
-    setSelectedTag({
+    form.reset({
       slug: '',
       color: '#000000',
       status: 'active',
     });
-    setIsNewTag(true);
-    setIsEditDialogOpen(true);
+    setEditingTagId(null);
+    setIsSheetOpen(true);
   };
 
   const handleEditTag = async (tag: Tag): Promise<void> => {
     try {
-      const response = await request({
+      const response = await request<Tag>({
         url: `/tag/${tag.id}`,
         method: 'GET',
       });
 
-      setSelectedTag(response.data);
-      setIsNewTag(false);
-      setIsEditDialogOpen(true);
+      form.reset({
+        slug: response.data.slug ?? '',
+        color: response.data.color ?? '#000000',
+        status: response.data.status ?? 'active',
+      });
+      setEditingTagId(tag.id);
+      setIsSheetOpen(true);
     } catch (error) {
       console.error(error);
       toast.error(t('errorLoading'));
     }
   };
 
-  const handleSaveTag = async () => {
-    if (!selectedTag) return;
-
+  const handleSaveTag = async (values: FormValues) => {
     const payload = {
-      slug: selectedTag.slug,
-      color: selectedTag.color,
-      status: selectedTag.status,
+      slug: values.slug,
+      color: values.color,
+      status: values.status,
     };
 
     try {
-      if (selectedTag.id) {
+      if (editingTagId) {
         await request({
-          url: `/tag/${selectedTag.id}`,
+          url: `/tag/${editingTagId}`,
           method: 'PATCH',
           data: payload,
         });
@@ -161,7 +187,7 @@ export default function TagPage() {
         toast.success(t('successCreate'));
       }
 
-      setIsEditDialogOpen(false);
+      setIsSheetOpen(false);
       await refetchTag();
       await refetchStats();
     } catch (error) {
@@ -187,20 +213,19 @@ export default function TagPage() {
 
   const handleSearchChange = (value: string): void => {
     setSearchTerm(value);
+    setPage(1);
   };
 
   useEffect(() => {
-    refetchTag();
     refetchStats();
-  }, [isEditDialogOpen, debouncedSearch, page, pageSize]);
+  }, [isSheetOpen, refetchStats]);
+
+  const isNewTag = editingTagId === null;
 
   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('newTag'),
@@ -212,142 +237,128 @@ export default function TagPage() {
         description={t('description')}
       />
 
-      <div className="grid grid-cols-1 gap-4 md:grid-cols-3">
-        <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">
-                <TagIcon className="h-6 w-6 text-blue-600 dark:text-blue-400" />
-              </div>
-              <div>
-                <p className="text-sm font-medium text-muted-foreground">
-                  {t('totalTags')}
-                </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">
-                <TagIcon className="h-6 w-6 text-green-600 dark:text-green-400" />
-              </div>
-              <div>
-                <p className="text-sm font-medium text-muted-foreground">
-                  {t('activeTags')}
-                </p>
-                <p className="text-2xl font-bold">{statsData?.active || 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-gray-100 p-2 dark:bg-gray-900">
-                <TagIcon className="h-6 w-6 text-gray-600 dark:text-gray-400" />
-              </div>
-              <div>
-                <p className="text-sm font-medium text-muted-foreground">
-                  {t('inactiveTags')}
-                </p>
-                <p className="text-2xl font-bold">{statsData?.inactive || 0}</p>
-              </div>
-            </div>
-          </CardContent>
-        </Card>
-      </div>
+      <StatsCards
+        stats={[
+          {
+            title: t('totalTags'),
+            value: statsData?.total || 0,
+            icon: <TagIcon className="h-5 w-5" />,
+            iconBgColor: 'bg-blue-100 dark:bg-blue-900',
+            iconColor: 'text-blue-600 dark:text-blue-400',
+          },
+          {
+            title: t('activeTags'),
+            value: statsData?.active || 0,
+            icon: <TagIcon className="h-5 w-5" />,
+            iconBgColor: 'bg-green-100 dark:bg-green-900',
+            iconColor: 'text-green-600 dark:text-green-400',
+          },
+          {
+            title: t('inactiveTags'),
+            value: statsData?.inactive || 0,
+            icon: <TagIcon className="h-5 w-5" />,
+            iconBgColor: 'bg-gray-100 dark:bg-gray-900',
+            iconColor: 'text-gray-600 dark:text-gray-400',
+          },
+        ]}
+        className="grid-cols-1 md:grid-cols-3"
+      />
 
-      <div className="mb-4 flex flex-col gap-4 md:flex-row mt-4">
-        <SearchBar
-          searchQuery={searchTerm}
-          onSearchChange={handleSearchChange}
-          onSearch={() => refetchTag()}
-          placeholder={t('searchPlaceholder')}
-        />
-      </div>
+      <SearchBar
+        searchQuery={searchTerm}
+        onSearchChange={handleSearchChange}
+        onSearch={() => refetchTag()}
+        placeholder={t('searchPlaceholder')}
+      />
 
-      <div className="space-y-3">
-        {tags.length === 0 ? (
-          <Card>
-            <CardContent className="flex flex-col items-center justify-center p-12">
-              <TagIcon className="mb-4 h-12 w-12 text-muted-foreground" />
-              <p className="text-lg font-medium text-muted-foreground">
-                {t('noTagsFound')}
-              </p>
-              <p className="text-sm text-muted-foreground">
-                {searchTerm ? t('adjustSearch') : t('createNewTag')}
-              </p>
-            </CardContent>
-          </Card>
+      <div>
+        {data.length === 0 ? (
+          <EmptyState
+            icon={<TagIcon className="h-6 w-6" />}
+            title={t('noTagsFound')}
+            description={searchTerm ? t('adjustSearch') : t('createNewTag')}
+            actionLabel={searchTerm ? t('clearSearch') : t('newTag')}
+            onAction={() => {
+              if (searchTerm) {
+                setSearchTerm('');
+                setPage(1);
+                return;
+              }
+              handleNewTag();
+            }}
+          />
         ) : (
-          tags.map((tag) => (
-            <Card
-              key={tag.id}
-              onDoubleClick={() => handleEditTag(tag)}
-              className="cursor-pointer transition-shadow hover:shadow-md"
-            >
-              <CardContent className="flex items-center justify-between p-6">
-                <div className="flex items-center space-x-4">
-                  <div
-                    className="h-10 w-10 rounded-md"
-                    style={{ backgroundColor: tag.color }}
-                  />
-                  <div>
-                    <div className="flex items-center gap-2">
-                      <h2 className="font-semibold text-lg">#{tag.slug}</h2>
-                      <Badge
-                        variant={
-                          tag.status === 'active' ? 'default' : 'secondary'
-                        }
-                      >
-                        {tag.status === 'active' ? t('active') : t('inactive')}
-                      </Badge>
+          <div className="grid gap-3 sm:grid-cols-2 xl:grid-cols-3">
+            {data.map((tag) => (
+              <Card
+                key={tag.id}
+                onDoubleClick={() => handleEditTag(tag)}
+                className="cursor-pointer transition-shadow hover:shadow-md"
+              >
+                <CardContent className="p-4">
+                  <div className="flex items-start justify-between gap-2">
+                    <div className="flex items-center gap-3">
+                      <div
+                        className="h-9 w-9 rounded-md border"
+                        style={{ backgroundColor: tag.color }}
+                      />
+                      <div className="min-w-0">
+                        <h2 className="truncate text-base font-semibold">
+                          #{tag.slug}
+                        </h2>
+                        <p className="text-xs text-muted-foreground">
+                          {tag.color}
+                        </p>
+                      </div>
                     </div>
+                    <Badge
+                      variant={
+                        tag.status === 'active' ? 'default' : 'secondary'
+                      }
+                    >
+                      {tag.status === 'active' ? t('active') : t('inactive')}
+                    </Badge>
+                  </div>
+
+                  <div className="mt-3 flex items-center justify-end gap-1">
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      onClick={() => handleEditTag(tag)}
+                    >
+                      <Edit className="h-4 w-4" />
+                    </Button>
+                    <AlertDialog>
+                      <AlertDialogTrigger asChild>
+                        <Button variant="ghost" size="icon">
+                          <Trash2 className="h-4 w-4 text-destructive" />
+                        </Button>
+                      </AlertDialogTrigger>
+                      <AlertDialogContent>
+                        <AlertDialogHeader>
+                          <AlertDialogTitle>
+                            {t('confirmDelete')}
+                          </AlertDialogTitle>
+                          <AlertDialogDescription>
+                            {t('deleteDescription')}
+                          </AlertDialogDescription>
+                        </AlertDialogHeader>
+                        <AlertDialogFooter>
+                          <AlertDialogCancel>{t('cancel')}</AlertDialogCancel>
+                          <AlertDialogAction
+                            onClick={() => handleDeleteTag(tag.id)}
+                            className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+                          >
+                            {t('delete')}
+                          </AlertDialogAction>
+                        </AlertDialogFooter>
+                      </AlertDialogContent>
+                    </AlertDialog>
                   </div>
-                </div>
-                <div className="flex space-x-2">
-                  <Button
-                    variant="ghost"
-                    size="icon"
-                    onClick={() => handleEditTag(tag)}
-                  >
-                    <Edit className="h-4 w-4" />
-                  </Button>
-                  <AlertDialog>
-                    <AlertDialogTrigger asChild>
-                      <Button variant="ghost" size="icon">
-                        <Trash2 className="h-4 w-4 text-destructive" />
-                      </Button>
-                    </AlertDialogTrigger>
-                    <AlertDialogContent>
-                      <AlertDialogHeader>
-                        <AlertDialogTitle>
-                          {t('confirmDelete')}
-                        </AlertDialogTitle>
-                        <AlertDialogDescription>
-                          {t('deleteDescription')}
-                        </AlertDialogDescription>
-                      </AlertDialogHeader>
-                      <AlertDialogFooter>
-                        <AlertDialogCancel>{t('cancel')}</AlertDialogCancel>
-                        <AlertDialogAction
-                          onClick={() => handleDeleteTag(tag.id)}
-                          className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
-                        >
-                          {t('delete')}
-                        </AlertDialogAction>
-                      </AlertDialogFooter>
-                    </AlertDialogContent>
-                  </AlertDialog>
-                </div>
-              </CardContent>
-            </Card>
-          ))
+                </CardContent>
+              </Card>
+            ))}
+          </div>
         )}
       </div>
 
@@ -357,89 +368,102 @@ export default function TagPage() {
         totalItems={total}
         onPageChange={setPage}
         onPageSizeChange={setPageSize}
-        pageSizeOptions={[10, 20, 30, 40, 50]}
+        pageSizeOptions={[...PAGE_SIZE_OPTIONS]}
       />
 
-      <Dialog open={isEditDialogOpen} onOpenChange={setIsEditDialogOpen}>
-        <DialogContent className="max-h-[90vh] max-w-2xl overflow-y-auto">
-          <DialogHeader>
-            <DialogTitle>
-              {isNewTag ? t('createTag') : t('editTag')}
-            </DialogTitle>
-            <DialogDescription>
+      <Sheet open={isSheetOpen} onOpenChange={setIsSheetOpen}>
+        <SheetContent className="w-full overflow-y-auto sm:max-w-lg">
+          <SheetHeader>
+            <SheetTitle>{isNewTag ? t('createTag') : t('editTag')}</SheetTitle>
+            <SheetDescription>
               {isNewTag ? t('createDescription') : t('editDescription')}
-            </DialogDescription>
-          </DialogHeader>
+            </SheetDescription>
+          </SheetHeader>
 
-          <div className="space-y-4">
-            <div className="space-y-2">
-              <Label htmlFor="slug">{t('slug')}</Label>
-              <Input
-                id="slug"
-                value={selectedTag?.slug || ''}
-                onChange={(e) =>
-                  setSelectedTag({ ...selectedTag, slug: e.target.value })
-                }
-                placeholder={t('slugPlaceholder')}
+          <Form {...form}>
+            <form
+              onSubmit={form.handleSubmit(handleSaveTag)}
+              className="mt-6 space-y-4 px-4"
+            >
+              <FormField
+                control={form.control}
+                name="slug"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('slug')}</FormLabel>
+                    <FormControl>
+                      <Input {...field} placeholder={t('slugPlaceholder')} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
               />
-            </div>
 
-            <div className="space-y-2">
-              <Label htmlFor="color">{t('color')}</Label>
-              <div className="flex gap-2">
-                <Input
-                  id="color"
-                  type="color"
-                  value={selectedTag?.color || '#000000'}
-                  onChange={(e) =>
-                    setSelectedTag({ ...selectedTag, color: e.target.value })
-                  }
-                  className="h-10 w-20"
-                />
-                <Input
-                  value={selectedTag?.color || '#000000'}
-                  onChange={(e) =>
-                    setSelectedTag({ ...selectedTag, color: e.target.value })
-                  }
-                  placeholder={t('colorPlaceholder')}
-                />
-              </div>
-            </div>
+              <FormField
+                control={form.control}
+                name="color"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('color')}</FormLabel>
+                    <FormControl>
+                      <div className="flex gap-2">
+                        <Input
+                          type="color"
+                          value={field.value}
+                          onChange={(e) => field.onChange(e.target.value)}
+                          className="h-10 w-20"
+                        />
+                        <Input
+                          value={field.value}
+                          onChange={(e) => field.onChange(e.target.value)}
+                          placeholder={t('colorPlaceholder')}
+                        />
+                      </div>
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
 
-            <div className="space-y-2">
-              <Label htmlFor="status">{t('status')}</Label>
-              <Select
-                value={selectedTag?.status || 'active'}
-                onValueChange={(value: 'active' | 'inactive') =>
-                  setSelectedTag({ ...selectedTag, status: value })
-                }
-              >
-                <SelectTrigger className="w-full" id="status">
-                  <SelectValue />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value="active">{t('active')}</SelectItem>
-                  <SelectItem value="inactive">{t('inactive')}</SelectItem>
-                </SelectContent>
-              </Select>
-            </div>
-          </div>
+              <FormField
+                control={form.control}
+                name="status"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('status')}</FormLabel>
+                    <FormControl>
+                      <Select
+                        value={field.value}
+                        onValueChange={(value: 'active' | 'inactive') =>
+                          field.onChange(value)
+                        }
+                      >
+                        <SelectTrigger className="w-full">
+                          <SelectValue />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="active">{t('active')}</SelectItem>
+                          <SelectItem value="inactive">
+                            {t('inactive')}
+                          </SelectItem>
+                        </SelectContent>
+                      </Select>
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
 
-          <DialogFooter>
-            <Button
-              variant="outline"
-              onClick={() => setIsEditDialogOpen(false)}
-            >
-              <X className="mr-2 h-4 w-4" />
-              {t('cancel')}
-            </Button>
-            <Button onClick={handleSaveTag}>
-              <Save className="mr-2 h-4 w-4" />
-              {t('save')}
-            </Button>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
-    </div>
+              <SheetFooter className="px-0">
+                <Button type="submit" className="w-full">
+                  <Save className="mr-2 h-4 w-4" />
+                  {t('save')}
+                </Button>
+              </SheetFooter>
+            </form>
+          </Form>
+        </SheetContent>
+      </Sheet>
+    </Page>
   );
 }

package/hedhog/frontend/messages/en.json

@@ -7,6 +7,7 @@
     "activeTags": "Active Tags",
     "inactiveTags": "Inactive Tags",
     "searchPlaceholder": "Search tags...",
+    "clearSearch": "Clear search",
     "noTagsFound": "No tags found",
     "adjustSearch": "Try adjusting your search",
     "createNewTag": "Start by creating a new tag",
@@ -31,6 +32,10 @@
     "successCreate": "Tag created successfully!",
     "errorSave": "Error saving tag.",
     "successDelete": "Tag deleted successfully!",
-    "errorDelete": "Error deleting tag."
+    "errorDelete": "Error deleting tag.",
+    "validation": {
+      "slugMin": "Slug must have at least 2 characters.",
+      "colorInvalid": "Enter a valid hex color (e.g. #000000)."
+    }
   }
 }

package/hedhog/frontend/messages/pt.json

@@ -7,6 +7,7 @@
     "activeTags": "Tags Ativas",
     "inactiveTags": "Tags Inativas",
     "searchPlaceholder": "Buscar tags...",
+    "clearSearch": "Limpar busca",
     "noTagsFound": "Nenhuma tag encontrada",
     "adjustSearch": "Tente ajustar sua busca",
     "createNewTag": "Comece criando uma nova tag",
@@ -31,6 +32,10 @@
     "successCreate": "Tag criada com sucesso!",
     "errorSave": "Erro ao salvar a tag.",
     "successDelete": "Tag excluída com sucesso!",
-    "errorDelete": "Erro ao excluir a tag."
+    "errorDelete": "Erro ao excluir a tag.",
+    "validation": {
+      "slugMin": "O slug deve ter pelo menos 2 caracteres.",
+      "colorInvalid": "Informe uma cor hexadecimal válida (ex: #000000)."
+    }
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hed-hog/tag",
-  "version": "0.0.278",
+  "version": "0.0.285",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "dependencies": {
@@ -11,9 +11,9 @@
     "@nestjs/mapped-types": "*",
     "@hed-hog/api-prisma": "0.0.5",
     "@hed-hog/api-pagination": "0.0.6",
-    "@hed-hog/core": "0.0.278",
     "@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"
   },
   "exports": {
     ".": {