@hed-hog/core 0.0.300 → 0.0.302

package/hedhog/frontend/app/dashboard/dashboard-home-tabs.tsx.ejs

@@ -13,6 +13,14 @@ import {
 } from '@/components/ui/alert-dialog';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from '@/components/ui/command';
 import {
   ContextMenu,
   ContextMenuContent,
@@ -31,10 +39,12 @@ import {
 } from '@/components/ui/sheet';
 import { Skeleton } from '@/components/ui/skeleton';
 import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { useDebounce } from '@/hooks/use-debounce';
 import { cn } from '@/lib/utils';
 import { useApp, useQuery } from '@hed-hog/next-app-provider';
 import * as LucideIcons from 'lucide-react';
 import {
+  Check,
   Home,
   LayoutDashboard,
   Loader2,
@@ -44,6 +54,7 @@ import {
   Share2,
   Trash2,
   UserPlus,
+  X,
   type LucideIcon,
 } from 'lucide-react';
 import { useTranslations } from 'next-intl';
@@ -68,6 +79,18 @@ type SharedUser = {
   email: string | null;
   isCurrentUser?: boolean;
   isHome?: boolean;
+  hasRequiredRoles?: boolean;
+  accessStatus?: 'allowed' | 'missing-roles';
+};
+
+type PaginatedResponse<T> = {
+  data: T[];
+  total: number;
+  page: number;
+  pageSize: number;
+  lastPage: number;
+  prev: number | null;
+  next: number | null;
 };
 
 type DashboardTemplate = {
@@ -82,6 +105,15 @@ const getDashboardName = (dashboard: DashboardTab) =>
   dashboard.name || dashboard.dashboard_locale?.[0]?.name || dashboard.slug;
 
 const DASHBOARD_HOME_HEADER_ACTIONS_TARGET_ID = 'dashboard-home-header-actions';
+const EMPTY_SHAREABLE_USERS_PAGE: PaginatedResponse<SharedUser> = {
+  data: [],
+  total: 0,
+  page: 1,
+  pageSize: 10,
+  lastPage: 1,
+  prev: null,
+  next: null,
+};
 
 const DASHBOARD_ICON_OPTIONS = [
   'layout-dashboard',
@@ -266,12 +298,16 @@ export function DashboardHomeTabs() {
   const [newDashboardIcon, setNewDashboardIcon] = useState('layout-dashboard');
   const [selectedTemplateSlug, setSelectedTemplateSlug] = useState('');
   const [shareSearch, setShareSearch] = useState('');
+  const [sharePage, setSharePage] = useState(1);
+  const [selectedShareUsers, setSelectedShareUsers] = useState<SharedUser[]>(
+    []
+  );
   const [renamingSlug, setRenamingSlug] = useState<string | null>(null);
   const [renameValue, setRenameValue] = useState('');
   const [isCreating, setIsCreating] = useState(false);
   const [isDeleting, setIsDeleting] = useState(false);
   const [isRenaming, setIsRenaming] = useState(false);
-  const [sharingUserId, setSharingUserId] = useState<number | null>(null);
+  const [isSharingUsers, setIsSharingUsers] = useState(false);
   const [revokingUserId, setRevokingUserId] = useState<number | null>(null);
   const [isSettingHome, setIsSettingHome] = useState(false);
   const [openAddWidgetSignal, setOpenAddWidgetSignal] = useState(0);
@@ -280,6 +316,8 @@ export function DashboardHomeTabs() {
   const [iconValue, setIconValue] = useState('layout-dashboard');
   const [isSavingIcon, setIsSavingIcon] = useState(false);
 
+  const debouncedShareSearch = useDebounce(shareSearch, 300);
+
   const {
     data: dashboards = [],
     isLoading,
@@ -323,6 +361,16 @@ export function DashboardHomeTabs() {
     [dashboardTemplates, selectedTemplateSlug]
   );
 
+  const selectedShareUserIds = useMemo(
+    () => selectedShareUsers.map((user) => user.id),
+    [selectedShareUsers]
+  );
+
+  const selectedUsersWithoutRequiredRoles = useMemo(
+    () => selectedShareUsers.filter((user) => user.hasRequiredRoles === false),
+    [selectedShareUsers]
+  );
+
   useEffect(() => {
     if (dashboards.length === 0) {
       setActiveSlug('');
@@ -365,34 +413,55 @@ export function DashboardHomeTabs() {
   });
 
   const {
-    data: shareableUsers = [],
+    data: shareableUsersPage = EMPTY_SHAREABLE_USERS_PAGE,
     isLoading: isLoadingShareableUsers,
     refetch: refetchShareableUsers,
-  } = useQuery<SharedUser[]>({
-    queryKey: ['dashboard-shareable-users', activeSlug, shareSearch, shareOpen],
+  } = useQuery<PaginatedResponse<SharedUser>>({
+    queryKey: [
+      'dashboard-shareable-users',
+      activeSlug,
+      debouncedShareSearch,
+      sharePage,
+      shareOpen,
+    ],
     queryFn: async () => {
       if (!activeSlug) {
-        return [];
+        return EMPTY_SHAREABLE_USERS_PAGE;
       }
 
       const params = new URLSearchParams();
-      if (shareSearch.trim()) {
-        params.set('search', shareSearch.trim());
+      params.set('page', String(sharePage));
+      params.set('pageSize', '10');
+
+      if (debouncedShareSearch.trim()) {
+        params.set('search', debouncedShareSearch.trim());
       }
 
-      const queryString = params.toString();
-      const response = await request<SharedUser[]>({
-        url: `/dashboard-core/shareable-users/${activeSlug}${
-          queryString ? `?${queryString}` : ''
-        }`,
+      const response = await request<
+        PaginatedResponse<SharedUser> | SharedUser[]
+      >({
+        url: `/dashboard-core/shareable-users/${activeSlug}?${params.toString()}`,
         method: 'GET',
       });
 
-      return response.data ?? [];
+      const payload = response.data;
+
+      if (Array.isArray(payload)) {
+        return {
+          ...EMPTY_SHAREABLE_USERS_PAGE,
+          data: payload,
+          total: payload.length,
+        };
+      }
+
+      return payload ?? EMPTY_SHAREABLE_USERS_PAGE;
     },
     enabled: shareOpen && Boolean(activeSlug),
+    placeholderData: (previous) => previous ?? EMPTY_SHAREABLE_USERS_PAGE,
   });
 
+  const shareableUsers = shareableUsersPage.data ?? [];
+
   const handleSelectTemplate = (template: DashboardTemplate | null) => {
     setSelectedTemplateSlug(template?.slug ?? '');
     setNewDashboardName(template?.name ?? '');
@@ -510,6 +579,9 @@ export function DashboardHomeTabs() {
   const openShareForDashboard = (dashboard: DashboardTab) => {
     cancelRenameDashboard();
     setActiveSlug(dashboard.slug);
+    setShareSearch('');
+    setSharePage(1);
+    setSelectedShareUsers([]);
     setShareOpen(true);
   };
 
@@ -593,24 +665,49 @@ export function DashboardHomeTabs() {
     }
   };
 
-  const handleShareWithUser = async (userId: number) => {
-    if (!activeDashboard) {
+  const toggleShareUserSelection = (user: SharedUser) => {
+    setSelectedShareUsers((current) => {
+      const alreadySelected = current.some((item) => item.id === user.id);
+
+      if (alreadySelected) {
+        return current.filter((item) => item.id !== user.id);
+      }
+
+      return [...current, user];
+    });
+  };
+
+  const removeSelectedShareUser = (userId: number) => {
+    setSelectedShareUsers((current) =>
+      current.filter((user) => user.id !== userId)
+    );
+  };
+
+  const handleShareSelectedUsers = async () => {
+    if (!activeDashboard || selectedShareUserIds.length === 0) {
       return;
     }
 
+    const selectionCount = selectedShareUserIds.length;
+
     try {
-      setSharingUserId(userId);
+      setIsSharingUsers(true);
       await request({
         url: `/dashboard-core/dashboard/${activeDashboard.slug}/share`,
         method: 'POST',
-        data: { userId },
+        data: {
+          userIds: selectedShareUserIds,
+        },
       });
       await Promise.all([refetchShares(), refetchShareableUsers()]);
-      toast.success(t('dashboardShared'));
+      setSelectedShareUsers([]);
+      setShareSearch('');
+      setSharePage(1);
+      toast.success(t('dashboardSharedSelected', { count: selectionCount }));
     } catch (error) {
       toast.error(getErrorMessage(error, t('shareDashboardError')));
     } finally {
-      setSharingUserId(null);
+      setIsSharingUsers(false);
     }
   };
 
@@ -640,7 +737,7 @@ export function DashboardHomeTabs() {
     isRenaming ||
     isSettingHome ||
     isSavingIcon ||
-    sharingUserId !== null ||
+    isSharingUsers ||
     revokingUserId !== null;
 
   const headerActions = (
@@ -1195,10 +1292,12 @@ export function DashboardHomeTabs() {
           setShareOpen(open);
           if (!open) {
             setShareSearch('');
+            setSharePage(1);
+            setSelectedShareUsers([]);
           }
         }}
       >
-        <SheetContent className="w-full sm:max-w-xl">
+        <SheetContent className="w-full sm:max-w-4xl">
           <SheetHeader>
             <SheetTitle>
               {t('shareDashboardTitle', {
@@ -1211,16 +1310,8 @@ export function DashboardHomeTabs() {
           </SheetHeader>
 
           <div className="flex flex-1 flex-col gap-4 overflow-hidden px-4 pb-4">
-            <div className="space-y-2">
-              <label className="text-sm font-medium" htmlFor="share-search">
-                {t('searchUser')}
-              </label>
-              <Input
-                id="share-search"
-                value={shareSearch}
-                onChange={(event) => setShareSearch(event.target.value)}
-                placeholder={t('searchUserPlaceholder')}
-              />
+            <div className="rounded-lg border border-dashed bg-muted/30 px-3 py-2 text-xs text-muted-foreground">
+              {t('shareRoleNotice')}
             </div>
 
             <div className="grid flex-1 gap-4 overflow-hidden lg:grid-cols-2">
@@ -1237,7 +1328,7 @@ export function DashboardHomeTabs() {
                   <Badge variant="outline">{sharedUsers.length}</Badge>
                 </div>
 
-                <ScrollArea className="h-72">
+                <ScrollArea className="h-80">
                   <div className="space-y-2 p-3">
                     {isLoadingShares ? (
                       <>
@@ -1254,8 +1345,8 @@ export function DashboardHomeTabs() {
                           key={user.id}
                           className="flex items-center justify-between rounded-lg border p-3"
                         >
-                          <div className="min-w-0">
-                            <div className="flex items-center gap-2">
+                          <div className="min-w-0 space-y-1">
+                            <div className="flex flex-wrap items-center gap-2">
                               <p className="truncate text-sm font-medium">
                                 {user.name}
                               </p>
@@ -1265,10 +1356,23 @@ export function DashboardHomeTabs() {
                               {user.isHome ? (
                                 <Badge variant="outline">{t('home')}</Badge>
                               ) : null}
+                              {user.hasRequiredRoles === false ? (
+                                <Badge
+                                  variant="outline"
+                                  className="border-amber-500/50 text-amber-700"
+                                >
+                                  {t('roleRequiredBadge')}
+                                </Badge>
+                              ) : null}
                             </div>
                             <p className="text-muted-foreground truncate text-xs">
                               {user.email || t('noPublicEmail')}
                             </p>
+                            {user.hasRequiredRoles === false ? (
+                              <p className="text-xs text-amber-700">
+                                {t('shareBlockedHint')}
+                              </p>
+                            ) : null}
                           </div>
 
                           {!user.isCurrentUser ? (
@@ -1301,50 +1405,176 @@ export function DashboardHomeTabs() {
                   </p>
                 </div>
 
-                <ScrollArea className="h-72">
-                  <div className="space-y-2 p-3">
-                    {isLoadingShareableUsers ? (
-                      <>
-                        <Skeleton className="h-16 rounded-lg" />
-                        <Skeleton className="h-16 rounded-lg" />
-                      </>
-                    ) : shareableUsers.length === 0 ? (
-                      <p className="text-muted-foreground text-sm">
-                        {t('noUsersToShare')}
-                      </p>
-                    ) : (
-                      shareableUsers.map((user) => (
-                        <div
-                          key={user.id}
-                          className="flex items-center justify-between rounded-lg border p-3"
-                        >
-                          <div className="min-w-0">
-                            <p className="truncate text-sm font-medium">
-                              {user.name}
-                            </p>
-                            <p className="text-muted-foreground truncate text-xs">
-                              {user.email || t('noPublicEmail')}
-                            </p>
-                          </div>
+                <div className="flex min-h-0 flex-1 flex-col gap-3 p-3">
+                  <div className="rounded-lg border">
+                    <Command shouldFilter={false}>
+                      <CommandInput
+                        value={shareSearch}
+                        onValueChange={(value) => {
+                          setShareSearch(value);
+                          setSharePage(1);
+                        }}
+                        placeholder={t('searchUserPlaceholder')}
+                      />
+                      <CommandList>
+                        <CommandEmpty>
+                          {isLoadingShareableUsers
+                            ? t('loadingUsers')
+                            : t('noUsersToShare')}
+                        </CommandEmpty>
+                        <CommandGroup>
+                          {shareableUsers.map((user) => {
+                            const isSelected = selectedShareUserIds.includes(
+                              user.id
+                            );
+
+                            return (
+                              <CommandItem
+                                key={user.id}
+                                value={`${user.name}-${user.email ?? ''}-${user.id}`}
+                                className="cursor-pointer items-start gap-3 px-3 py-3"
+                                onSelect={() => toggleShareUserSelection(user)}
+                              >
+                                <div
+                                  className={cn(
+                                    'mt-0.5 flex size-4 shrink-0 items-center justify-center rounded-sm border',
+                                    isSelected
+                                      ? 'border-primary bg-primary text-primary-foreground'
+                                      : 'border-muted-foreground/30'
+                                  )}
+                                >
+                                  <Check
+                                    className={cn(
+                                      'size-3',
+                                      isSelected ? 'opacity-100' : 'opacity-0'
+                                    )}
+                                  />
+                                </div>
+                                <div className="min-w-0 flex-1 space-y-1">
+                                  <div className="flex flex-wrap items-center gap-2">
+                                    <p className="truncate text-sm font-medium">
+                                      {user.name}
+                                    </p>
+                                    {user.hasRequiredRoles === false ? (
+                                      <Badge
+                                        variant="outline"
+                                        className="border-amber-500/50 text-amber-700"
+                                      >
+                                        {t('roleRequiredBadge')}
+                                      </Badge>
+                                    ) : null}
+                                  </div>
+                                  <p className="text-muted-foreground truncate text-xs">
+                                    {user.email || t('noPublicEmail')}
+                                  </p>
+                                </div>
+                              </CommandItem>
+                            );
+                          })}
+                        </CommandGroup>
+                      </CommandList>
+                    </Command>
+                  </div>
 
-                          <Button
-                            size="sm"
-                            className="cursor-pointer"
-                            onClick={() => void handleShareWithUser(user.id)}
-                            disabled={sharingUserId === user.id}
+                  {selectedShareUsers.length > 0 ? (
+                    <div className="space-y-2 rounded-lg border p-3">
+                      <div className="flex items-center justify-between gap-2">
+                        <p className="text-sm font-semibold">
+                          {t('selectedUsers')}
+                        </p>
+                        <Badge variant="outline">
+                          {selectedShareUsers.length}
+                        </Badge>
+                      </div>
+
+                      <div className="flex flex-wrap gap-2">
+                        {selectedShareUsers.map((user) => (
+                          <button
+                            key={`selected-${user.id}`}
+                            type="button"
+                            className="inline-flex cursor-pointer items-center gap-2 rounded-full border px-3 py-1 text-xs"
+                            onClick={() => removeSelectedShareUser(user.id)}
                           >
-                            {sharingUserId === user.id ? (
-                              <Loader2 className="size-4 animate-spin" />
-                            ) : (
-                              <UserPlus className="size-4" />
-                            )}
-                            {t('add')}
-                          </Button>
-                        </div>
-                      ))
-                    )}
+                            <span className="max-w-40 truncate">
+                              {user.name}
+                            </span>
+                            <X className="size-3" />
+                          </button>
+                        ))}
+                      </div>
+
+                      {selectedUsersWithoutRequiredRoles.length > 0 ? (
+                        <p className="text-xs text-amber-700">
+                          {t('selectedUsersWarning', {
+                            count: selectedUsersWithoutRequiredRoles.length,
+                          })}
+                        </p>
+                      ) : (
+                        <p className="text-muted-foreground text-xs">
+                          {t('selectedUsersHint')}
+                        </p>
+                      )}
+                    </div>
+                  ) : null}
+
+                  <div className="mt-auto space-y-3 border-t pt-3">
+                    <div className="flex items-center justify-between gap-2 text-xs text-muted-foreground">
+                      <span>
+                        {t('sharePageStatus', {
+                          page: shareableUsersPage.page,
+                          totalPages: shareableUsersPage.lastPage,
+                        })}
+                      </span>
+                      <div className="flex items-center gap-2">
+                        <Button
+                          type="button"
+                          variant="outline"
+                          size="sm"
+                          className="cursor-pointer"
+                          onClick={() =>
+                            setSharePage((current) => Math.max(current - 1, 1))
+                          }
+                          disabled={
+                            isLoadingShareableUsers ||
+                            shareableUsersPage.prev === null
+                          }
+                        >
+                          {t('previousPage')}
+                        </Button>
+                        <Button
+                          type="button"
+                          variant="outline"
+                          size="sm"
+                          className="cursor-pointer"
+                          onClick={() => setSharePage((current) => current + 1)}
+                          disabled={
+                            isLoadingShareableUsers ||
+                            shareableUsersPage.next === null
+                          }
+                        >
+                          {t('nextPage')}
+                        </Button>
+                      </div>
+                    </div>
+
+                    <Button
+                      className="w-full"
+                      onClick={() => void handleShareSelectedUsers()}
+                      disabled={
+                        isSharingUsers || selectedShareUserIds.length === 0
+                      }
+                    >
+                      {isSharingUsers ? (
+                        <Loader2 className="size-4 animate-spin" />
+                      ) : (
+                        <UserPlus className="size-4" />
+                      )}
+                      {t('shareSelectedUsers', {
+                        count: selectedShareUserIds.length,
+                      })}
+                    </Button>
                   </div>
-                </ScrollArea>
+                </div>
               </div>
             </div>
           </div>

package/hedhog/frontend/messages/en.json

@@ -974,17 +974,29 @@
     "suggestions": "Suggestions",
     "saveIcon": "Save icon",
     "shareDashboardTitle": "Share {name}",
-    "shareDashboardDescription": "Shared users can edit the layout and widgets of this dashboard.",
+    "shareDashboardDescription": "Sharing only adds people to this dashboard. It does not change their roles or guarantee access to protected widgets.",
+    "shareRoleNotice": "Shared users keep their current roles. They can open this dashboard and its widgets only if they already have the required permissions.",
     "searchUser": "Search user",
     "searchUserPlaceholder": "Type a name or email",
     "usersWithAccess": "With access",
-    "usersWithAccessDescription": "People who can already open and edit this dashboard.",
+    "usersWithAccessDescription": "People currently listed on this dashboard share. Removing them revokes the share immediately.",
     "noSharedUsers": "There are no shared users yet.",
     "you": "You",
     "home": "Home",
     "noPublicEmail": "No public email",
+    "roleRequiredBadge": "Needs roles",
+    "shareBlockedHint": "This user is shared on the dashboard, but will be blocked when opening it until the required roles are granted.",
     "addPeople": "Add people",
-    "addPeopleDescription": "Share with users who do not have access yet.",
+    "addPeopleDescription": "Search users, select one or more, and confirm once. Sharing does not change roles.",
+    "loadingUsers": "Loading users...",
+    "selectedUsers": "Selected users",
+    "selectedUsersHint": "Select one or more users, then confirm once to grant dashboard sharing.",
+    "selectedUsersWarning": "{count} selected user(s) still need the required roles to open this dashboard.",
+    "sharePageStatus": "Page {page} of {totalPages}",
+    "previousPage": "Previous",
+    "nextPage": "Next",
+    "shareSelectedUsers": "Grant access to {count} user(s)",
+    "dashboardSharedSelected": "Dashboard shared with {count} user(s).",
     "noUsersToShare": "No users found to share.",
     "add": "Add",
     "cancel": "Cancel",

package/hedhog/frontend/messages/pt.json

@@ -977,17 +977,29 @@
     "suggestions": "Sugestões",
     "saveIcon": "Salvar ícone",
     "shareDashboardTitle": "Compartilhar {name}",
-    "shareDashboardDescription": "Usuários compartilhados podem editar o layout e os widgets deste dashboard.",
+    "shareDashboardDescription": "O compartilhamento apenas adiciona pessoas a este dashboard. Isso não altera roles nem garante acesso a widgets protegidos.",
+    "shareRoleNotice": "Usuários compartilhados mantêm as roles atuais. Eles só conseguem abrir este dashboard e seus widgets se já tiverem as permissões necessárias.",
     "searchUser": "Buscar usuário",
     "searchUserPlaceholder": "Digite um nome ou e-mail",
     "usersWithAccess": "Com acesso",
-    "usersWithAccessDescription": "Quem já pode abrir e editar este dashboard.",
+    "usersWithAccessDescription": "Pessoas atualmente listadas neste compartilhamento. Ao remover, o compartilhamento é revogado imediatamente.",
     "noSharedUsers": "Ainda não há usuários compartilhados.",
     "you": "Você",
     "home": "Home",
     "noPublicEmail": "Sem e-mail público",
+    "roleRequiredBadge": "Precisa de roles",
+    "shareBlockedHint": "Este usuário continuará compartilhado, mas será bloqueado ao abrir o dashboard até receber as roles necessárias.",
     "addPeople": "Adicionar pessoas",
-    "addPeopleDescription": "Compartilhe com usuários que ainda não possuem acesso.",
+    "addPeopleDescription": "Busque usuários, selecione um ou mais e confirme uma única vez. Compartilhar não altera roles.",
+    "loadingUsers": "Carregando usuários...",
+    "selectedUsers": "Usuários selecionados",
+    "selectedUsersHint": "Selecione um ou mais usuários e confirme uma única vez para conceder o compartilhamento do dashboard.",
+    "selectedUsersWarning": "{count} usuário(s) selecionado(s) ainda precisam das roles necessárias para abrir este dashboard.",
+    "sharePageStatus": "Página {page} de {totalPages}",
+    "previousPage": "Anterior",
+    "nextPage": "Próxima",
+    "shareSelectedUsers": "Conceder acesso para {count} usuário(s)",
+    "dashboardSharedSelected": "Dashboard compartilhado com {count} usuário(s).",
     "noUsersToShare": "Nenhum usuário encontrado para compartilhar.",
     "add": "Adicionar",
     "cancel": "Cancelar",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hed-hog/core",
-  "version": "0.0.300",
+  "version": "0.0.302",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "dependencies": {
@@ -30,12 +30,12 @@
     "sharp": "^0.34.2",
     "speakeasy": "^2.0.0",
     "uuid": "^11.1.0",
-    "@hed-hog/api-pagination": "0.0.7",
-    "@hed-hog/api-mail": "0.0.9",
     "@hed-hog/api": "0.0.6",
-    "@hed-hog/api-locale": "0.0.14",
+    "@hed-hog/api-mail": "0.0.9",
+    "@hed-hog/api-types": "0.0.1",
     "@hed-hog/api-prisma": "0.0.6",
-    "@hed-hog/api-types": "0.0.1"
+    "@hed-hog/api-locale": "0.0.14",
+    "@hed-hog/api-pagination": "0.0.7"
   },
   "exports": {
     ".": {