@carlonicora/nextjs-jsonapi 1.36.1 → 1.37.0

package/src/features/oauth/components/OAuthScopeSelector.tsx

@@ -49,28 +49,29 @@ export function OAuthScopeSelector({
         onChange(value.filter((s) => s !== scope));
       }
     },
-    [value, onChange]
+    [value, onChange],
   );
 
   // Group scopes by category (before the colon)
-  const groupedScopes = availableScopes.reduce((acc, scope) => {
-    const [category] = scope.scope.split(":");
-    const groupName = category === scope.scope ? "General" : category;
+  const groupedScopes = availableScopes.reduce(
+    (acc, scope) => {
+      const [category] = scope.scope.split(":");
+      const groupName = category === scope.scope ? "General" : category;
 
-    if (!acc[groupName]) {
-      acc[groupName] = [];
-    }
-    acc[groupName].push(scope);
-    return acc;
-  }, {} as Record<string, OAuthScopeInfo[]>);
+      if (!acc[groupName]) {
+        acc[groupName] = [];
+      }
+      acc[groupName].push(scope);
+      return acc;
+    },
+    {} as Record<string, OAuthScopeInfo[]>,
+  );
 
   return (
     <div className="space-y-4">
       <div>
         <Label>{label} *</Label>
-        <p className="text-sm text-muted-foreground">
-          Select the permissions your application needs.
-        </p>
+        <p className="text-sm text-muted-foreground">Select the permissions your application needs.</p>
       </div>
 
       <div className="space-y-4">
@@ -92,20 +93,13 @@ export function OAuthScopeSelector({
                     <Checkbox
                       id={`scope-${scopeInfo.scope}`}
                       checked={isChecked}
-                      onCheckedChange={(checked) =>
-                        handleToggle(scopeInfo.scope, checked === true)
-                      }
+                      onCheckedChange={(checked) => handleToggle(scopeInfo.scope, checked === true)}
                       disabled={disabled}
                     />
                     <div className="flex-1">
-                      <Label
-                        htmlFor={`scope-${scopeInfo.scope}`}
-                        className="text-sm font-medium cursor-pointer"
-                      >
+                      <Label htmlFor={`scope-${scopeInfo.scope}`} className="text-sm font-medium cursor-pointer">
                         {scopeInfo.name}
-                        {isAdmin && (
-                          <span className="ml-2 text-xs text-destructive">(Dangerous)</span>
-                        )}
+                        {isAdmin && <span className="ml-2 text-xs text-destructive">(Dangerous)</span>}
                       </Label>
                       <p className="text-xs text-muted-foreground">{scopeInfo.description}</p>
                     </div>

package/src/features/oauth/components/consent/OAuthConsentActions.tsx

@@ -14,26 +14,13 @@ export interface OAuthConsentActionsProps {
 /**
  * Action buttons for OAuth consent screen
  */
-export function OAuthConsentActions({
-  onApprove,
-  onDeny,
-  isLoading = false,
-}: OAuthConsentActionsProps) {
+export function OAuthConsentActions({ onApprove, onDeny, isLoading = false }: OAuthConsentActionsProps) {
   return (
     <div className="flex flex-col sm:flex-row gap-3">
-      <Button
-        variant="outline"
-        onClick={onDeny}
-        disabled={isLoading}
-        className="flex-1"
-      >
+      <Button variant="outline" onClick={onDeny} disabled={isLoading} className="flex-1">
         Deny
       </Button>
-      <Button
-        onClick={onApprove}
-        disabled={isLoading}
-        className="flex-1"
-      >
+      <Button onClick={onApprove} disabled={isLoading} className="flex-1">
         {isLoading ? "Authorizing..." : "Authorize"}
       </Button>
     </div>

package/src/features/oauth/components/consent/OAuthConsentHeader.tsx

@@ -16,21 +16,13 @@ export interface OAuthConsentHeaderProps {
  * Header component for OAuth consent screen
  * Shows platform logo and requesting app information
  */
-export function OAuthConsentHeader({
-  client,
-  logoUrl,
-  appName = "Only35",
-}: OAuthConsentHeaderProps) {
+export function OAuthConsentHeader({ client, logoUrl, appName = "Only35" }: OAuthConsentHeaderProps) {
   return (
     <div className="text-center space-y-4">
       {/* Platform Logo */}
       <div className="flex justify-center">
         {logoUrl ? (
-          <img
-            src={logoUrl}
-            alt={appName}
-            className="h-12 w-auto"
-          />
+          <img src={logoUrl} alt={appName} className="h-12 w-auto" />
         ) : (
           <div className="h-12 w-12 rounded-full bg-primary flex items-center justify-center">
             <Shield className="h-6 w-6 text-primary-foreground" />
@@ -42,8 +34,7 @@ export function OAuthConsentHeader({
       <div className="space-y-2">
         <h1 className="text-2xl font-bold">Authorize {client.name}</h1>
         <p className="text-muted-foreground">
-          <span className="font-medium text-foreground">{client.name}</span>
-          {" "}wants to access your {appName} account
+          <span className="font-medium text-foreground">{client.name}</span> wants to access your {appName} account
         </p>
       </div>
     </div>

package/src/features/oauth/components/consent/OAuthConsentScreen.tsx

@@ -1,14 +1,7 @@
 "use client";
 
 import { ExternalLink, AlertTriangle, Loader2 } from "lucide-react";
-import {
-  Card,
-  CardContent,
-  CardFooter,
-  Separator,
-  Alert,
-  AlertDescription,
-} from "../../../../shadcnui";
+import { Card, CardContent, CardFooter, Separator, Alert, AlertDescription } from "../../../../shadcnui";
 import { OAuthConsentHeader } from "./OAuthConsentHeader";
 import { OAuthScopeList } from "./OAuthScopeList";
 import { OAuthConsentActions } from "./OAuthConsentActions";
@@ -92,11 +85,7 @@ export function OAuthConsentScreen({
       <Card className="w-full max-w-md">
         <CardContent className="pt-6 space-y-6">
           {/* Header */}
-          <OAuthConsentHeader
-            client={client}
-            logoUrl={logoUrl}
-            appName={appName}
-          />
+          <OAuthConsentHeader client={client} logoUrl={logoUrl} appName={appName} />
 
           <Separator />
 
@@ -115,11 +104,7 @@ export function OAuthConsentScreen({
           </div>
 
           {/* Actions */}
-          <OAuthConsentActions
-            onApprove={approve}
-            onDeny={deny}
-            isLoading={isSubmitting}
-          />
+          <OAuthConsentActions onApprove={approve} onDeny={deny} isLoading={isSubmitting} />
         </CardContent>
 
         {/* Footer */}
@@ -128,8 +113,8 @@ export function OAuthConsentScreen({
             By authorizing, you agree to the app's{" "}
             <a href={termsUrl} className="underline hover:text-foreground" target="_blank" rel="noopener">
               Terms of Service
-            </a>
-            {" "}and{" "}
+            </a>{" "}
+            and{" "}
             <a href={privacyUrl} className="underline hover:text-foreground" target="_blank" rel="noopener">
               Privacy Policy
             </a>

package/src/features/oauth/components/consent/OAuthScopeList.tsx

@@ -1,16 +1,6 @@
 "use client";
 
-import {
-  Eye,
-  Pencil,
-  Image,
-  Upload,
-  Film,
-  FolderPlus,
-  User,
-  Shield,
-  LucideIcon,
-} from "lucide-react";
+import { Eye, Pencil, Image, Upload, Film, FolderPlus, User, Shield, LucideIcon } from "lucide-react";
 import { OAuthScopeInfo } from "../../interfaces/oauth.interface";
 
 export interface OAuthScopeListProps {
@@ -48,15 +38,10 @@ export function OAuthScopeList({ scopes }: OAuthScopeListProps) {
           const IconComponent = scope.icon ? SCOPE_ICONS[scope.icon] : Eye;
 
           return (
-            <li
-              key={scope.scope}
-              className="flex items-start gap-3 p-3 rounded-lg bg-muted/50"
-            >
+            <li key={scope.scope} className="flex items-start gap-3 p-3 rounded-lg bg-muted/50">
               <div className="flex-shrink-0 mt-0.5">
                 <div className="h-8 w-8 rounded-full bg-primary/10 flex items-center justify-center">
-                  {IconComponent && (
-                    <IconComponent className="h-4 w-4 text-primary" />
-                  )}
+                  {IconComponent && <IconComponent className="h-4 w-4 text-primary" />}
                 </div>
               </div>
               <div className="flex-1">

package/src/features/onboarding/contexts/OnboardingContext.tsx

@@ -18,10 +18,10 @@ const OnboardingContext = createContext<OnboardingContextValue | null>(null);
 export function OnboardingProvider({
   children,
   tours = [],
-  tourPaths = {},
+  tourPaths: _tourPaths = {},
   labels = DEFAULT_ONBOARDING_LABELS,
   renderCard,
-  zIndex = 9999,
+  zIndex: _zIndex = 9999,
 }: OnboardingProviderProps) {
   const [isTourActive, setIsTourActive] = useState(false);
   const [activeTourId, setActiveTourId] = useState<string | null>(null);
@@ -35,7 +35,7 @@ export function OnboardingProvider({
     rootsRef.current.forEach((root) => {
       try {
         root.unmount();
-      } catch (e) {
+      } catch (_e) {
         // Root may already be unmounted
       }
     });

package/src/features/role/components/forms/FormRoles.tsx

@@ -2,13 +2,7 @@
 
 import { useTranslations } from "next-intl";
 import { FormFieldWrapper } from "../../../../components/forms";
-import {
-  Checkbox,
-  FieldLabel,
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "../../../../shadcnui";
+import { Checkbox, FieldLabel, Tooltip, TooltipContent, TooltipTrigger } from "../../../../shadcnui";
 import { UserInterface } from "../../../user";
 import { useCurrentUserContext } from "../../../user/contexts";
 import { RoleInterface } from "../../data";

package/src/features/user/components/containers/UserContainer.tsx

@@ -8,7 +8,7 @@ export function UserContainer() {
   const { user } = useUserContext();
   if (!user) return null;
 
-  const t = useTranslations();
+  const _t = useTranslations();
 
   return (
     <div className="flex w-full gap-x-4">

package/src/features/user/components/details/UserDetails.tsx

@@ -26,7 +26,7 @@ export function UserDetails({ user }: UserDetailsProps) {
     roles = (
       <div className="mb-4 w-full">
         <div className="flex flex-wrap gap-2">
-          {user.roles.map((role: RoleInterface, index: number) => (
+          {user.roles.map((role: RoleInterface, _index: number) => (
             <Link key={role.id} href={generateUrl({ page: Modules.Role, id: role.id })}>
               <Badge className="mr-2" variant={`default`}>
                 {t(`role.roles`, { role: role.id.replaceAll(`-`, ``) })}

package/src/features/user/components/forms/UserDeleter.tsx

@@ -20,7 +20,7 @@ function UserDeleterInternal({ user, onDeleted, companyId }: UserDeleterProps) {
   const { currentUser, company } = useCurrentUserContext<UserInterface>();
   const generateUrl = usePageUrlGenerator();
   const router = useI18nRouter();
-  const t = useTranslations();
+  const _t = useTranslations();
 
   let cId;
   if (currentUser?.roles.find((role) => role.id === getRoleId().Administrator) && companyId) {

package/src/features/user/components/forms/UserEditor.tsx

@@ -106,7 +106,7 @@ function UserEditorInternal({ user, propagateChanges, adminCreated, trigger, onR
           errorToast({ title: t(`user.errors.email_exists`), error: "" });
           return;
         }
-      } catch (error) {
+      } catch (_error) {
         // User does not exist, proceed
       }
     }

package/src/features/user/components/forms/UserMultiSelect.tsx

@@ -1,16 +1,12 @@
 "use client";
 
+import { useTranslations } from "next-intl";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { useWatch } from "react-hook-form";
 import { FormFieldWrapper } from "../../../../components/forms";
 import { Modules } from "../../../../core";
 import { DataListRetriever, useDataListRetriever, useDebounce } from "../../../../hooks";
-import {
-  Avatar,
-  AvatarFallback,
-  AvatarImage,
-  MultiSelect,
-} from "../../../../shadcnui";
+import { Avatar, AvatarFallback, AvatarImage, MultiSelect } from "../../../../shadcnui";
 import { useCurrentUserContext } from "../../contexts";
 import { UserInterface } from "../../data";
 import { UserService } from "../../data/user.service";
@@ -59,10 +55,11 @@ export function UserMultiSelect({
   maxCount = 3,
   isRequired = false,
 }: UserMultiSelectProps) {
+  const t = useTranslations();
   const { company } = useCurrentUserContext<UserInterface>();
 
   const searchTermRef = useRef<string>("");
-  const [searchTerm, setSearchTerm] = useState<string>("");
+  const [searchTerm, _setSearchTerm] = useState<string>("");
   const [isSearching, setIsSearching] = useState<boolean>(false);
   const [userOptions, setUserOptions] = useState<any[]>([]);
 
@@ -194,6 +191,9 @@ export function UserMultiSelect({
             placeholder={placeholder}
             maxCount={maxCount}
             animation={0}
+            loading={isSearching}
+            loadingText={t("ui.search.button")}
+            emptyText={t("ui.search.no_results", { type: t("entities.users", { count: 2 }) })}
           />
         )}
       </FormFieldWrapper>

package/src/features/user/components/lists/UserListInAdd.tsx

@@ -28,11 +28,11 @@ export function UserListInAdd({ data, existingUsers, setSelectedUser, setLevelOp
                 <CommandItem
                   className="cursor-pointer hover:bg-muted data-selected:hover:bg-muted bg-transparent data-selected:bg-transparent"
                   key={user.id}
-                  onClick={(e) => {
+                  onClick={(_e) => {
                     setSelectedUser(user);
                     setLevelOpen?.(true);
                   }}
-                  onSelect={(e) => {
+                  onSelect={(_e) => {
                     setSelectedUser(user);
                     setLevelOpen?.(true);
                   }}

package/src/features/user/components/lists/UsersList.tsx

@@ -16,7 +16,13 @@ type UsersListProps = {
   restrictToJoinRequests?: boolean;
 };
 
-export function UsersList({ data, optionComponents, removeFunction, hideOptions, showRelevance }: UsersListProps) {
+export function UsersList({
+  data,
+  optionComponents: _optionComponents,
+  removeFunction: _removeFunction,
+  hideOptions: _hideOptions,
+  showRelevance: _showRelevance,
+}: UsersListProps) {
   const t = useTranslations();
 
   return (

package/src/features/user/contexts/CurrentUserContext.tsx

@@ -51,7 +51,7 @@ export const CurrentUserProvider = ({ children }: { children: React.ReactNode })
     if (!token && dehydratedUser) setDehydratedUser(null);
   }, [dehydratedUser, setDehydratedUser]);
 
-  const matchUrlToModule = (params?: { path: string }): ModuleWithPermissions | undefined => {
+  const matchUrlToModule = (_params?: { path: string }): ModuleWithPermissions | undefined => {
     const moduleKeys = Object.getOwnPropertyNames(Modules).filter(
       (key) => key !== "prototype" && key !== "_factory" && key !== "length" && key !== "name",
     );
@@ -138,41 +138,44 @@ export const CurrentUserProvider = ({ children }: { children: React.ReactNode })
   // Function to refresh user data from the API
   // skipCookieUpdate: When true, only updates React state without calling the Server Action
   // This prevents page reloads when refresh is triggered by WebSocket events
-  const refreshUser = useCallback(async (options?: { skipCookieUpdate?: boolean }): Promise<void> => {
-    if (isRefreshing) {
-      return;
-    }
+  const refreshUser = useCallback(
+    async (options?: { skipCookieUpdate?: boolean }): Promise<void> => {
+      if (isRefreshing) {
+        return;
+      }
 
-    setIsRefreshing(true);
-    try {
-      const fullUser = await UserService.findFullUser();
-      if (fullUser) {
-        const dehydrated = fullUser.dehydrate();
-
-        setDehydratedUser(dehydrated as any);
-        setUser(fullUser);
-
-        // Update authentication cookies with fresh user data
-        // Skip when triggered by WebSocket to prevent page reload (Server Actions modify cookies)
-        if (!options?.skipCookieUpdate) {
-          await getTokenHandler()?.updateToken({
-            userId: fullUser.id,
-            companyId: fullUser.company?.id,
-            roles: fullUser.roles.map((role) => role.id),
-            features: fullUser.company?.features?.map((feature) => feature.id) ?? [],
-            modules: fullUser.modules.map((module) => ({
-              id: module.id,
-              permissions: module.permissions,
-            })),
-          });
+      setIsRefreshing(true);
+      try {
+        const fullUser = await UserService.findFullUser();
+        if (fullUser) {
+          const dehydrated = fullUser.dehydrate();
+
+          setDehydratedUser(dehydrated as any);
+          setUser(fullUser);
+
+          // Update authentication cookies with fresh user data
+          // Skip when triggered by WebSocket to prevent page reload (Server Actions modify cookies)
+          if (!options?.skipCookieUpdate) {
+            await getTokenHandler()?.updateToken({
+              userId: fullUser.id,
+              companyId: fullUser.company?.id,
+              roles: fullUser.roles.map((role) => role.id),
+              features: fullUser.company?.features?.map((feature) => feature.id) ?? [],
+              modules: fullUser.modules.map((module) => ({
+                id: module.id,
+                permissions: module.permissions,
+              })),
+            });
+          }
         }
+      } catch (error) {
+        console.error("Failed to refresh user data:", error);
+      } finally {
+        setIsRefreshing(false);
       }
-    } catch (error) {
-      console.error("Failed to refresh user data:", error);
-    } finally {
-      setIsRefreshing(false);
-    }
-  }, [isRefreshing, setDehydratedUser]);
+    },
+    [isRefreshing, setDehydratedUser],
+  );
 
   // WebSocket integration for real-time token updates
   const { socket, isConnected } = useSocketContext();

package/src/hooks/__tests__/useDataListRetriever.test.ts

@@ -22,7 +22,7 @@ describe("useDataListRetriever", () => {
         useDataListRetriever({
           retriever,
           module: mockModule,
-        })
+        }),
       );
 
       // Wait for async operations to settle
@@ -42,7 +42,7 @@ describe("useDataListRetriever", () => {
           retriever,
           module: mockModule,
           ready: false,
-        })
+        }),
       );
 
       expect(result.current.ready).toBe(false);
@@ -63,7 +63,7 @@ describe("useDataListRetriever", () => {
         useDataListRetriever({
           retriever,
           module: mockModule,
-        })
+        }),
       );
 
       await waitFor(() => {
@@ -82,7 +82,7 @@ describe("useDataListRetriever", () => {
         useDataListRetriever({
           retriever,
           module: mockModule,
-        })
+        }),
       );
 
       await waitFor(() => {
@@ -96,16 +96,14 @@ describe("useDataListRetriever", () => {
 
   describe("search", () => {
     it("should search and call retriever with search term", async () => {
-      const mockData = [
-        createMockApiData({ type: "articles", id: "1", attributes: { title: "Search Result" } }),
-      ];
+      const mockData = [createMockApiData({ type: "articles", id: "1", attributes: { title: "Search Result" } })];
       const retriever = vi.fn().mockResolvedValue(mockData);
 
       const { result } = renderHook(() =>
         useDataListRetriever({
           retriever,
           module: mockModule,
-        })
+        }),
       );
 
       await waitFor(() => {
@@ -133,7 +131,7 @@ describe("useDataListRetriever", () => {
         useDataListRetriever({
           retriever,
           module: mockModule,
-        })
+        }),
       );
 
       await waitFor(() => {
@@ -161,7 +159,7 @@ describe("useDataListRetriever", () => {
         useDataListRetriever({
           retriever,
           module: mockModule,
-        })
+        }),
       );
 
       await waitFor(() => {
@@ -189,7 +187,7 @@ describe("useDataListRetriever", () => {
           retriever,
           module: mockModule,
           ready: false,
-        })
+        }),
       );
 
       expect(result.current.ready).toBe(false);
@@ -209,16 +207,14 @@ describe("useDataListRetriever", () => {
 
   describe("element management", () => {
     it("should update element with setRefreshedElement", async () => {
-      const mockData = [
-        createMockApiData({ type: "articles", id: "1", attributes: { title: "Original" } }),
-      ];
+      const mockData = [createMockApiData({ type: "articles", id: "1", attributes: { title: "Original" } })];
       const retriever = vi.fn().mockResolvedValue(mockData);
 
       const { result } = renderHook(() =>
         useDataListRetriever({
           retriever,
           module: mockModule,
-        })
+        }),
       );
 
       await waitFor(() => {
@@ -250,7 +246,7 @@ describe("useDataListRetriever", () => {
         useDataListRetriever({
           retriever,
           module: mockModule,
-        })
+        }),
       );
 
       await waitFor(() => {
@@ -276,7 +272,7 @@ describe("useDataListRetriever", () => {
         useDataListRetriever({
           retriever,
           module: mockModule,
-        })
+        }),
       );
 
       await waitFor(() => {
@@ -288,9 +284,7 @@ describe("useDataListRetriever", () => {
       });
 
       await waitFor(() => {
-        expect(retriever).toHaveBeenCalledWith(
-          expect.objectContaining({ filter: "active" })
-        );
+        expect(retriever).toHaveBeenCalledWith(expect.objectContaining({ filter: "active" }));
       });
     });
 
@@ -301,7 +295,7 @@ describe("useDataListRetriever", () => {
         useDataListRetriever({
           retriever,
           module: mockModule,
-        })
+        }),
       );
 
       await waitFor(() => {

package/src/hooks/__tests__/useDebounce.test.ts

@@ -92,9 +92,7 @@ describe("useDebounce", () => {
 
   it("should pass multiple arguments to callback", () => {
     const callback = vi.fn();
-    const { result } = renderHook(() =>
-      useDebounce((a: string, b: number, c: boolean) => callback(a, b, c), 500)
-    );
+    const { result } = renderHook(() => useDebounce((a: string, b: number, c: boolean) => callback(a, b, c), 500));
 
     act(() => {
       result.current("hello", 42, true);
@@ -111,10 +109,7 @@ describe("useDebounce", () => {
     const callback1 = vi.fn();
     const callback2 = vi.fn();
 
-    const { result, rerender } = renderHook(
-      ({ cb }) => useDebounce(cb, 500),
-      { initialProps: { cb: callback1 } }
-    );
+    const { result, rerender } = renderHook(({ cb }) => useDebounce(cb, 500), { initialProps: { cb: callback1 } });
 
     act(() => {
       result.current("test");

package/src/hooks/useCustomD3Graph.tsx

@@ -269,7 +269,7 @@ export function useCustomD3Graph(
       }
     });
 
-    for (const [nodeId, node] of nodeHierarchy.entries()) {
+    for (const [_nodeId, node] of nodeHierarchy.entries()) {
       if (node.depth === 1 && node.angle !== undefined && node.x !== undefined && node.y !== undefined) {
         const childAngle = node.angle;
         const childX = node.x;
@@ -527,7 +527,7 @@ export function useCustomD3Graph(
         const Icon = d.icon as React.FC<{ size: number; color: string }>;
         const iconSvg = renderToStaticMarkup(<Icon size={nodeRadius / 2} color="white" />);
 
-        const iconGroup = d3
+        const _iconGroup = d3
           .select(this)
           .append("g")
           .html(iconSvg)