@hed-hog/tag 0.0.186 → 0.0.191

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

@@ -0,0 +1,445 @@
+'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 { Edit, Save, Tag as TagIcon, 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 Tag = {
+  id: number;
+  slug: string;
+  color: string;
+  status: 'active' | 'inactive';
+};
+
+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 [searchTerm, setSearchTerm] = useState('');
+  const debouncedSearch = useDebounce(searchTerm);
+  const [page, setPage] = useState(1);
+  const [pageSize, setPageSize] = useState(10);
+  const { request } = useApp();
+
+  const {
+    data: { data, total },
+    refetch: refetchTag,
+  } = useQuery<PaginationResult<Tag>>({
+    queryKey: ['tag', debouncedSearch, page, pageSize],
+    queryFn: async () => {
+      const response = await request({
+        url: '/tag',
+        params: {
+          search: debouncedSearch,
+          page,
+          pageSize,
+        },
+      });
+      return response.data as PaginationResult<Tag>;
+    },
+    initialData: {
+      data: [],
+      total: 0,
+      page: 1,
+      pageSize: 10,
+    },
+  });
+
+  const { data: statsData, refetch: refetchStats } = useQuery<any>({
+    queryKey: ['tag-stats'],
+    queryFn: async () => {
+      const response = await request({
+        url: '/tag/stats',
+      });
+      return response.data;
+    },
+  });
+
+  useEffect(() => {
+    if (data) {
+      setTags(data);
+    }
+  }, [data]);
+
+  const handleNewTag = (): void => {
+    setSelectedTag({
+      slug: '',
+      color: '#000000',
+      status: 'active',
+    });
+    setIsNewTag(true);
+    setIsEditDialogOpen(true);
+  };
+
+  const handleEditTag = async (tag: Tag): Promise<void> => {
+    try {
+      const response = await request({
+        url: `/tag/${tag.id}`,
+        method: 'GET',
+      });
+
+      setSelectedTag(response.data);
+      setIsNewTag(false);
+      setIsEditDialogOpen(true);
+    } catch (error) {
+      console.error(error);
+      toast.error(t('errorLoading'));
+    }
+  };
+
+  const handleSaveTag = async () => {
+    if (!selectedTag) return;
+
+    const payload = {
+      slug: selectedTag.slug,
+      color: selectedTag.color,
+      status: selectedTag.status,
+    };
+
+    try {
+      if (selectedTag.id) {
+        await request({
+          url: `/tag/${selectedTag.id}`,
+          method: 'PATCH',
+          data: payload,
+        });
+        toast.success(t('successUpdate'));
+      } else {
+        await request({
+          url: `/tag`,
+          method: 'POST',
+          data: payload,
+        });
+        toast.success(t('successCreate'));
+      }
+
+      setIsEditDialogOpen(false);
+      await refetchTag();
+      await refetchStats();
+    } catch (error) {
+      console.error(error);
+      toast.error(t('errorSave'));
+    }
+  };
+
+  const handleDeleteTag = async (tagId: number): Promise<void> => {
+    try {
+      await request({
+        url: `/tag/${tagId}`,
+        method: 'DELETE',
+      });
+      toast.success(t('successDelete'));
+      await refetchTag();
+      await refetchStats();
+    } catch (error) {
+      console.error(error);
+      toast.error(t('errorDelete'));
+    }
+  };
+
+  const handleSearchChange = (value: string): void => {
+    setSearchTerm(value);
+  };
+
+  useEffect(() => {
+    refetchTag();
+    refetchStats();
+  }, [isEditDialogOpen, debouncedSearch, page, pageSize]);
+
+  return (
+    <div className="flex flex-col h-screen px-4">
+      <PageHeader
+        breadcrumbs={[
+          { label: 'Home', href: '/' },
+          { label: t('description') },
+        ]}
+        actions={[
+          {
+            label: t('newTag'),
+            onClick: () => handleNewTag(),
+            variant: 'default',
+          },
+        ]}
+        title={t('title')}
+        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>
+
+      <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>
+
+      <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>
+        ) : (
+          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>
+                  </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>
+          ))
+        )}
+      </div>
+
+      <PaginationFooter
+        currentPage={page}
+        pageSize={pageSize}
+        totalItems={total}
+        onPageChange={setPage}
+        onPageSizeChange={setPageSize}
+        pageSizeOptions={[10, 20, 30, 40, 50]}
+      />
+
+      <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>
+              {isNewTag ? t('createDescription') : t('editDescription')}
+            </DialogDescription>
+          </DialogHeader>
+
+          <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')}
+              />
+            </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>
+
+            <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>
+
+          <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>
+  );
+}

package/hedhog/frontend/messages/en.json

@@ -0,0 +1,36 @@
+{
+  "Tag": {
+    "title": "Tags",
+    "description": "Manage all system tags",
+    "newTag": "New Tag",
+    "totalTags": "Total Tags",
+    "activeTags": "Active Tags",
+    "inactiveTags": "Inactive Tags",
+    "searchPlaceholder": "Search tags...",
+    "noTagsFound": "No tags found",
+    "adjustSearch": "Try adjusting your search",
+    "createNewTag": "Start by creating a new tag",
+    "active": "Active",
+    "inactive": "Inactive",
+    "confirmDelete": "Confirm deletion",
+    "deleteDescription": "Are you sure you want to delete this tag? This action cannot be undone.",
+    "cancel": "Cancel",
+    "delete": "Delete",
+    "editTag": "Edit Tag",
+    "createTag": "Create Tag",
+    "editDescription": "Edit the fields below to update the tag.",
+    "createDescription": "Fill in the fields below to create a new tag.",
+    "slug": "Slug",
+    "slugPlaceholder": "tag-slug",
+    "color": "Color",
+    "colorPlaceholder": "#000000",
+    "status": "Status",
+    "save": "Save",
+    "errorLoading": "Error loading tag data.",
+    "successUpdate": "Tag updated successfully!",
+    "successCreate": "Tag created successfully!",
+    "errorSave": "Error saving tag.",
+    "successDelete": "Tag deleted successfully!",
+    "errorDelete": "Error deleting tag."
+  }
+}

package/hedhog/frontend/messages/pt.json

@@ -0,0 +1,36 @@
+{
+  "Tag": {
+    "title": "Tags",
+    "description": "Gerencie todas as tags do sistema",
+    "newTag": "Nova Tag",
+    "totalTags": "Total de Tags",
+    "activeTags": "Tags Ativas",
+    "inactiveTags": "Tags Inativas",
+    "searchPlaceholder": "Buscar tags...",
+    "noTagsFound": "Nenhuma tag encontrada",
+    "adjustSearch": "Tente ajustar sua busca",
+    "createNewTag": "Comece criando uma nova tag",
+    "active": "Ativa",
+    "inactive": "Inativa",
+    "confirmDelete": "Confirmar exclusão",
+    "deleteDescription": "Tem certeza que deseja excluir esta tag? Esta ação não pode ser desfeita.",
+    "cancel": "Cancelar",
+    "delete": "Excluir",
+    "editTag": "Editar Tag",
+    "createTag": "Nova Tag",
+    "editDescription": "Edite os campos abaixo para atualizar a tag.",
+    "createDescription": "Preencha os campos abaixo para criar uma nova tag.",
+    "slug": "Slug",
+    "slugPlaceholder": "slug-da-tag",
+    "color": "Cor",
+    "colorPlaceholder": "#000000",
+    "status": "Status",
+    "save": "Salvar",
+    "errorLoading": "Erro ao carregar os dados da tag.",
+    "successUpdate": "Tag atualizada com sucesso!",
+    "successCreate": "Tag criada com sucesso!",
+    "errorSave": "Erro ao salvar a tag.",
+    "successDelete": "Tag excluída com sucesso!",
+    "errorDelete": "Erro ao excluir a tag."
+  }
+}

package/package.json

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