@hed-hog/core 0.0.237 → 0.0.238

package/hedhog/frontend/app/dashboard/management/tabs/dashboards-tab.tsx.ejs

@@ -10,7 +10,9 @@ import {
   AlertDialogHeader,
   AlertDialogTitle,
 } from '@/components/ui/alert-dialog';
+import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
+import { Checkbox } from '@/components/ui/checkbox';
 import {
   Dialog,
   DialogContent,
@@ -29,6 +31,14 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@/components/ui/select';
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+} from '@/components/ui/sheet';
 import {
   Table,
   TableBody,
@@ -37,6 +47,11 @@ import {
   TableHeader,
   TableRow,
 } from '@/components/ui/table';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from '@/components/ui/tooltip';
 import { useDebounce } from '@/hooks/use-debounce';
 import { useApp, useQuery } from '@hed-hog/next-app-provider';
 import {
@@ -48,6 +63,7 @@ import {
   IconGlobe,
   IconPlus,
   IconTrash,
+  IconX,
 } from '@tabler/icons-react';
 import { useTranslations } from 'next-intl';
 import { useState } from 'react';
@@ -60,6 +76,25 @@ interface Dashboard {
     locale: { code: string };
     name: string;
   }>;
+  dashboard_role?: Array<{
+    role_id?: number;
+    role: {
+      id?: number;
+      role_id?: number;
+      slug: string;
+      role_locale?: Array<{
+        locale: { code: string };
+        name: string;
+      }>;
+    };
+  }>;
+}
+
+interface RoleOption {
+  id?: number;
+  role_id?: number;
+  slug: string;
+  name?: string;
 }
 
 export function DashboardsTab() {
@@ -73,9 +108,20 @@ export function DashboardsTab() {
   const [dashboardToDelete, setDashboardToDelete] = useState<number | null>(
     null
   );
+  const [removeRoleDialogOpen, setRemoveRoleDialogOpen] = useState(false);
+  const [roleToRemove, setRoleToRemove] = useState<{
+    dashboardId: number;
+    roleId: number;
+    roleName: string;
+  } | null>(null);
+  const [roleSheetOpen, setRoleSheetOpen] = useState(false);
+  const [dashboardForRoleSheet, setDashboardForRoleSheet] =
+    useState<Dashboard | null>(null);
+  const [selectedRoleIds, setSelectedRoleIds] = useState<number[]>([]);
   const [page, setPage] = useState(1);
   const [pageSize, setPageSize] = useState(10);
   const [searchQuery, setSearchQuery] = useState('');
+  const [roleSearchQuery, setRoleSearchQuery] = useState('');
   const debouncedSearch = useDebounce(searchQuery, 500);
 
   const {
@@ -105,6 +151,33 @@ export function DashboardsTab() {
   });
 
   const dashboards = paginatedData?.data ?? [];
+
+  const { data: rolesData, isLoading: isLoadingRoles } = useQuery<{
+    data: RoleOption[];
+    total: number;
+  }>({
+    queryKey: ['roles-for-dashboard-sheet', currentLocaleCode],
+    queryFn: async () => {
+      const response = await request<{ data: RoleOption[]; total: number }>({
+        url: '/role?page=1&pageSize=1000',
+        method: 'GET',
+      });
+
+      return response.data;
+    },
+  });
+
+  const availableRoles = rolesData?.data ?? [];
+  const filteredAvailableRoles = availableRoles.filter((role) => {
+    const roleName = role.name || role.slug;
+    if (!roleSearchQuery.trim()) return true;
+
+    const query = roleSearchQuery.toLowerCase();
+    return (
+      roleName.toLowerCase().includes(query) ||
+      role.slug.toLowerCase().includes(query)
+    );
+  });
   const total = paginatedData?.total ?? 0;
   const totalPages = Math.ceil(total / pageSize);
 
@@ -220,6 +293,83 @@ export function DashboardsTab() {
     }
   };
 
+  const handleOpenRoleSheet = (dashboard: Dashboard) => {
+    setDashboardForRoleSheet(dashboard);
+    setSelectedRoleIds([]);
+    setRoleSearchQuery('');
+    setRoleSheetOpen(true);
+  };
+
+  const handleRoleSelection = (roleId: number, checked: boolean) => {
+    setSelectedRoleIds((prev) => {
+      if (checked) {
+        if (prev.includes(roleId)) return prev;
+        return [...prev, roleId];
+      }
+
+      return prev.filter((id) => id !== roleId);
+    });
+  };
+
+  const handleAddRolesToDashboard = async () => {
+    if (!dashboardForRoleSheet) return;
+
+    if (selectedRoleIds.length === 0) {
+      toast.error(t('selectRoleRequired'));
+      return;
+    }
+
+    try {
+      await request({
+        url: '/dashboard-role/batch',
+        method: 'POST',
+        data: {
+          dashboard_id: dashboardForRoleSheet.id,
+          role_ids: selectedRoleIds,
+        },
+      });
+
+      toast.success(t('roleAdded'));
+      setRoleSheetOpen(false);
+      setDashboardForRoleSheet(null);
+      setSelectedRoleIds([]);
+      setRoleSearchQuery('');
+      refetch();
+    } catch (error: any) {
+      console.error('Erro ao adicionar permissões ao dashboard:', error);
+      toast.error(t('errorAddingRole'));
+    }
+  };
+
+  const handleRoleRemoveClick = (
+    dashboardId: number,
+    roleId: number,
+    roleName: string
+  ) => {
+    setRoleToRemove({ dashboardId, roleId, roleName });
+    setRemoveRoleDialogOpen(true);
+  };
+
+  const handleRoleRemoveConfirm = async () => {
+    if (!roleToRemove) return;
+
+    try {
+      await request({
+        url: `/dashboard-role/dashboard/${roleToRemove.dashboardId}/role/${roleToRemove.roleId}`,
+        method: 'DELETE',
+      });
+
+      toast.success(t('roleDeleted'));
+      refetch();
+    } catch (error) {
+      console.error('Erro ao remover permissão do dashboard:', error);
+      toast.error(t('errorDeletingRole'));
+    } finally {
+      setRemoveRoleDialogOpen(false);
+      setRoleToRemove(null);
+    }
+  };
+
   return (
     <div className="space-y-4">
       <div className="flex justify-between items-center">
@@ -329,13 +479,14 @@ export function DashboardsTab() {
               <TableHead>ID</TableHead>
               <TableHead>{t('slug')}</TableHead>
               <TableHead>{t('name')}</TableHead>
+              <TableHead>{t('role')}</TableHead>
               <TableHead className="w-[100px]">{t('actions')}</TableHead>
             </TableRow>
           </TableHeader>
           <TableBody>
             {isLoading ? (
               <TableRow>
-                <TableCell colSpan={4} className="text-center">
+                <TableCell colSpan={5} className="text-center">
                   {t('loading')}
                 </TableCell>
               </TableRow>
@@ -345,6 +496,37 @@ export function DashboardsTab() {
                   dashboard.dashboard_locale.find(
                     (l) => l.locale.code === currentLocaleCode
                   )?.name || dashboard.slug;
+
+                const roleEntries = (
+                  dashboard.dashboard_role?.map((dashboardRole) => {
+                    const roleId =
+                      dashboardRole.role_id ??
+                      dashboardRole.role.role_id ??
+                      dashboardRole.role.id;
+
+                    if (!roleId) return null;
+
+                    const localeRoleName = dashboardRole.role.role_locale?.find(
+                      (roleLocale) =>
+                        roleLocale.locale.code === currentLocaleCode
+                    )?.name;
+
+                    return {
+                      id: roleId,
+                      name: localeRoleName || dashboardRole.role.slug,
+                    };
+                  }) || []
+                ).filter(
+                  (
+                    roleEntry,
+                    index,
+                    array
+                  ): roleEntry is { id: number; name: string } =>
+                    !!roleEntry &&
+                    array.findIndex((item) => item?.id === roleEntry.id) ===
+                      index
+                );
+
                 return (
                   <TableRow key={dashboard.id}>
                     <TableCell>{dashboard.id}</TableCell>
@@ -352,6 +534,60 @@ export function DashboardsTab() {
                       {dashboard.slug}
                     </TableCell>
                     <TableCell>{name}</TableCell>
+                    <TableCell>
+                      <div className="flex flex-wrap items-center gap-1">
+                        {roleEntries.length > 0 ? (
+                          roleEntries.map((roleEntry) => (
+                            <Badge
+                              key={`${dashboard.id}-${roleEntry.id}`}
+                              variant="outline"
+                              className="gap-1 pr-1"
+                            >
+                              <span>{roleEntry.name}</span>
+                              <Tooltip>
+                                <TooltipTrigger asChild>
+                                  <button
+                                    type="button"
+                                    className="rounded-sm p-0.5 hover:bg-muted"
+                                    onClick={() =>
+                                      handleRoleRemoveClick(
+                                        dashboard.id,
+                                        roleEntry.id,
+                                        roleEntry.name
+                                      )
+                                    }
+                                    aria-label={`${t('delete')} ${roleEntry.name}`}
+                                  >
+                                    <IconX className="size-3" />
+                                  </button>
+                                </TooltipTrigger>
+                                <TooltipContent>
+                                  {`${t('delete')} ${roleEntry.name}`}
+                                </TooltipContent>
+                              </Tooltip>
+                            </Badge>
+                          ))
+                        ) : (
+                          <span className="text-muted-foreground text-xs mr-1">
+                            {t('noRoles')}
+                          </span>
+                        )}
+                        <Tooltip>
+                          <TooltipTrigger asChild>
+                            <Button
+                              type="button"
+                              size="icon"
+                              variant="outline"
+                              className="size-6"
+                              onClick={() => handleOpenRoleSheet(dashboard)}
+                            >
+                              <IconPlus className="size-3" />
+                            </Button>
+                          </TooltipTrigger>
+                          <TooltipContent>{t('addRole')}</TooltipContent>
+                        </Tooltip>
+                      </div>
+                    </TableCell>
                     <TableCell>
                       <div className="flex gap-2">
                         <Button
@@ -377,7 +613,7 @@ export function DashboardsTab() {
               })
             ) : (
               <TableRow>
-                <TableCell colSpan={4} className="text-center">
+                <TableCell colSpan={5} className="text-center">
                   {t('noDashboards')}
                 </TableCell>
               </TableRow>
@@ -484,6 +720,126 @@ export function DashboardsTab() {
           </AlertDialogFooter>
         </AlertDialogContent>
       </AlertDialog>
+
+      <Dialog
+        open={removeRoleDialogOpen}
+        onOpenChange={setRemoveRoleDialogOpen}
+      >
+        <DialogContent className="max-w-md">
+          <DialogHeader>
+            <DialogTitle>{t('confirmDelete')}</DialogTitle>
+            <DialogDescription>
+              {roleToRemove
+                ? `${t('deleteDescription')} (${roleToRemove.roleName})`
+                : t('deleteDescription')}
+            </DialogDescription>
+          </DialogHeader>
+          <DialogFooter>
+            <Button
+              variant="outline"
+              onClick={() => setRemoveRoleDialogOpen(false)}
+            >
+              {t('cancel')}
+            </Button>
+            <Button variant="destructive" onClick={handleRoleRemoveConfirm}>
+              {t('delete')}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      <Sheet
+        open={roleSheetOpen}
+        onOpenChange={(openValue) => {
+          setRoleSheetOpen(openValue);
+          if (!openValue) {
+            setDashboardForRoleSheet(null);
+            setSelectedRoleIds([]);
+            setRoleSearchQuery('');
+          }
+        }}
+      >
+        <SheetContent side="right" className="sm:max-w-lg overflow-y-auto">
+          <SheetHeader>
+            <SheetTitle>{t('addRole')}</SheetTitle>
+            <SheetDescription>
+              {dashboardForRoleSheet
+                ? `${t('dashboard')}: ${dashboardForRoleSheet.slug}`
+                : t('manageComponentRoles')}
+            </SheetDescription>
+          </SheetHeader>
+
+          <div className="px-6 py-4">
+            <Input
+              placeholder={t('searchPlaceholder')}
+              value={roleSearchQuery}
+              onChange={(event) => setRoleSearchQuery(event.target.value)}
+            />
+          </div>
+
+          <div className="space-y-3 px-6 pb-4">
+            {isLoadingRoles ? (
+              <p className="text-sm text-muted-foreground">{t('loading')}</p>
+            ) : filteredAvailableRoles.length > 0 ? (
+              filteredAvailableRoles.map((role) => {
+                const roleId = role.role_id ?? role.id;
+                if (!roleId) return null;
+
+                const roleName = role.name || role.slug;
+                const alreadyLinked =
+                  dashboardForRoleSheet?.dashboard_role?.some(
+                    (dashboardRole) =>
+                      (dashboardRole.role_id ??
+                        dashboardRole.role.role_id ??
+                        dashboardRole.role.id) === roleId
+                  ) ?? false;
+
+                const isSelected = selectedRoleIds.includes(roleId);
+
+                return (
+                  <div
+                    key={`available-dashboard-role-${roleId}`}
+                    className={`flex items-center gap-3 rounded-md border p-3 transition-colors ${
+                      alreadyLinked
+                        ? 'cursor-not-allowed opacity-70'
+                        : 'cursor-pointer hover:bg-muted/40'
+                    } ${isSelected ? 'border-primary bg-primary/5' : ''}`}
+                    onClick={() => {
+                      if (alreadyLinked) return;
+                      handleRoleSelection(roleId, !isSelected);
+                    }}
+                  >
+                    <div onClick={(event) => event.stopPropagation()}>
+                      <Checkbox
+                        checked={alreadyLinked || isSelected}
+                        onCheckedChange={(checked) =>
+                          handleRoleSelection(roleId, checked === true)
+                        }
+                        disabled={alreadyLinked}
+                      />
+                    </div>
+                    <div className="min-w-0">
+                      <p className="text-sm font-medium truncate">{roleName}</p>
+                      <p className="text-xs text-muted-foreground truncate">
+                        {role.slug}
+                      </p>
+                    </div>
+                  </div>
+                );
+              })
+            ) : (
+              <p className="text-sm text-muted-foreground">{t('noRoles')}</p>
+            )}
+          </div>
+
+          <SheetFooter>
+            <Button variant="outline" onClick={() => setRoleSheetOpen(false)}>
+              {t('cancel')}
+            </Button>
+            <Button onClick={handleAddRolesToDashboard}>{t('save')}</Button>
+          </SheetFooter>
+        </SheetContent>
+      </Sheet>
     </div>
   );
 }

package/hedhog/frontend/messages/en.json

@@ -1,4 +1,23 @@
 {
+  "TagSelectorSheet": {
+    "addTag": "Add tag",
+    "sheetTitle": "Manage tags",
+    "sheetDescription": "Select existing tags or create a new one.",
+    "createLabel": "New tag",
+    "createPlaceholder": "Type the tag name",
+    "createAction": "Create tag",
+    "popularTitle": "Most used tags",
+    "selectedTitle": "Selected tags",
+    "noTags": "No tags",
+    "cancel": "Cancel",
+    "apply": "Apply",
+    "removeTagAria": "Remove tag {tag}",
+    "messages": {
+      "createSuccess": "Tag created successfully",
+      "createError": "Could not create the tag",
+      "updateError": "Could not update tags"
+    }
+  },
   "SearchBar": {
     "searchPlaceholder": "Search...",
     "btnBuscar": "Search"

package/hedhog/frontend/messages/pt.json

@@ -1,4 +1,23 @@
 {
+  "TagSelectorSheet": {
+    "addTag": "Adicionar tag",
+    "sheetTitle": "Gerenciar tags",
+    "sheetDescription": "Selecione tags existentes ou crie uma nova.",
+    "createLabel": "Nova tag",
+    "createPlaceholder": "Digite o nome da tag",
+    "createAction": "Criar tag",
+    "popularTitle": "Tags mais usadas",
+    "selectedTitle": "Tags selecionadas",
+    "noTags": "Sem tags",
+    "cancel": "Cancelar",
+    "apply": "Aplicar",
+    "removeTagAria": "Remover tag {tag}",
+    "messages": {
+      "createSuccess": "Tag criada com sucesso",
+      "createError": "Não foi possível criar a tag",
+      "updateError": "Não foi possível atualizar as tags"
+    }
+  },
   "SearchBar": {
     "searchPlaceholder": "Pesquisar...",
     "btnBuscar": "Buscar"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hed-hog/core",
-  "version": "0.0.237",
+  "version": "0.0.238",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "dependencies": {
@@ -31,11 +31,11 @@
     "speakeasy": "^2.0.0",
     "uuid": "^11.1.0",
     "@hed-hog/api-prisma": "0.0.4",
-    "@hed-hog/api": "0.0.3",
     "@hed-hog/api-types": "0.0.1",
+    "@hed-hog/api": "0.0.3",
     "@hed-hog/api-pagination": "0.0.5",
-    "@hed-hog/api-locale": "0.0.11",
-    "@hed-hog/api-mail": "0.0.7"
+    "@hed-hog/api-mail": "0.0.7",
+    "@hed-hog/api-locale": "0.0.11"
   },
   "exports": {
     ".": {

package/src/dashboard/dashboard/dashboard.service.ts

@@ -42,6 +42,19 @@ export class DashboardService {
               locale: true,
             },
           },
+          dashboard_role: {
+            include: {
+              role: {
+                include: {
+                  role_locale: {
+                    include: {
+                      locale: true,
+                    },
+                  },
+                },
+              },
+            },
+          },
         },
         where: {
           OR
@@ -63,6 +76,19 @@ export class DashboardService {
             locale: true,
           },
         },
+        dashboard_role: {
+          include: {
+            role: {
+              include: {
+                role_locale: {
+                  include: {
+                    locale: true,
+                  },
+                },
+              },
+            },
+          },
+        },
         dashboard_item: {
           include: {
             dashboard_component: {

package/src/dashboard/dashboard-component/dashboard-component.service.ts

@@ -50,6 +50,19 @@ export class DashboardComponentService {
               locale: true,
             },
           },
+          dashboard_component_role: {
+            include: {
+              role: {
+                include: {
+                  role_locale: {
+                    include: {
+                      locale: true,
+                    },
+                  },
+                },
+              },
+            },
+          },
         },
         where: {
           OR,
@@ -99,6 +112,19 @@ export class DashboardComponentService {
               locale: true,
             },
           },
+          dashboard_component_role: {
+            include: {
+              role: {
+                include: {
+                  role_locale: {
+                    include: {
+                      locale: true,
+                    },
+                  },
+                },
+              },
+            },
+          },
         },
         where: {
           AND: [
@@ -169,6 +195,19 @@ export class DashboardComponentService {
             locale: true,
           },
         },
+        dashboard_component_role: {
+          include: {
+            role: {
+              include: {
+                role_locale: {
+                  include: {
+                    locale: true,
+                  },
+                },
+              },
+            },
+          },
+        },
       },
     });
 

package/src/dashboard/dashboard-component-role/dashboard-component-role.controller.ts

@@ -14,7 +14,10 @@ import {
     forwardRef,
 } from '@nestjs/common';
 import { DashboardComponentRoleService } from './dashboard-component-role.service';
-import { CreateDashboardComponentRoleDTO } from './dto';
+import {
+    CreateDashboardComponentRoleBatchDTO,
+    CreateDashboardComponentRoleDTO,
+} from './dto';
 
 @Role()
 @Controller('dashboard-component-role')
@@ -41,6 +44,14 @@ export class DashboardComponentRoleController {
     return this.service.create(data, locale);
   }
 
+  @Post('batch')
+  createBatch(
+    @Body() data: CreateDashboardComponentRoleBatchDTO,
+    @Locale() locale: string,
+  ) {
+    return this.service.createBatch(data, locale);
+  }
+
   @Delete(':id')
   delete(@Param('id', ParseIntPipe) id: number, @Locale() locale: string) {
     return this.service.delete(id, locale);