@carlonicora/nextjs-jsonapi 1.36.1 → 1.38.0

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

@@ -86,9 +86,7 @@ export function OAuthClientDetail({
     }
   }, [onRegenerateSecret]);
 
-  const createdDate = client.createdAt
-    ? format(new Date(client.createdAt), "MMMM d, yyyy")
-    : "Unknown";
+  const createdDate = client.createdAt ? format(new Date(client.createdAt), "MMMM d, yyyy") : "Unknown";
 
   return (
     <>
@@ -97,17 +95,13 @@ export function OAuthClientDetail({
           <div className="flex items-start justify-between">
             <div>
               <CardTitle className="text-2xl">{client.name}</CardTitle>
-              {client.description && (
-                <CardDescription className="mt-1">{client.description}</CardDescription>
-              )}
+              {client.description && <CardDescription className="mt-1">{client.description}</CardDescription>}
             </div>
             <div className="flex items-center gap-2">
               <Badge variant={client.isActive ? "default" : "secondary"}>
                 {client.isActive ? "Active" : "Inactive"}
               </Badge>
-              <Badge variant="outline">
-                {client.isConfidential ? "Confidential" : "Public"}
-              </Badge>
+              <Badge variant="outline">{client.isConfidential ? "Confidential" : "Public"}</Badge>
             </div>
           </div>
         </CardHeader>
@@ -209,11 +203,7 @@ export function OAuthClientDetail({
               </Button>
             )}
             {onDelete && (
-              <Button
-                variant="destructive"
-                onClick={() => setShowDeleteConfirm(true)}
-                disabled={isLoading}
-              >
+              <Button variant="destructive" onClick={() => setShowDeleteConfirm(true)} disabled={isLoading}>
                 <Trash2 className="h-4 w-4 mr-2" />
                 Delete
               </Button>
@@ -228,8 +218,7 @@ export function OAuthClientDetail({
           <AlertDialogHeader>
             <AlertDialogTitle>Delete OAuth Application?</AlertDialogTitle>
             <AlertDialogDescription>
-              This will permanently delete "{client.name}" and revoke all access tokens.
-              This action cannot be undone.
+              This will permanently delete "{client.name}" and revoke all access tokens. This action cannot be undone.
             </AlertDialogDescription>
           </AlertDialogHeader>
           <AlertDialogFooter>
@@ -251,9 +240,8 @@ export function OAuthClientDetail({
           <AlertDialogHeader>
             <AlertDialogTitle>Regenerate Client Secret?</AlertDialogTitle>
             <AlertDialogDescription>
-              This will generate a new client secret and invalidate the old one.
-              All existing tokens will be revoked. You will need to update your application
-              with the new secret.
+              This will generate a new client secret and invalidate the old one. All existing tokens will be revoked.
+              You will need to update your application with the new secret.
             </AlertDialogDescription>
           </AlertDialogHeader>
           <AlertDialogFooter>

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

@@ -47,12 +47,7 @@ interface FormErrors {
 /**
  * Form for creating or editing an OAuth client
  */
-export function OAuthClientForm({
-  client,
-  onSubmit,
-  onCancel,
-  isLoading = false,
-}: OAuthClientFormProps) {
+export function OAuthClientForm({ client, onSubmit, onCancel, isLoading = false }: OAuthClientFormProps) {
   const isEditMode = !!client;
 
   const [formState, setFormState] = useState<FormState>({
@@ -102,7 +97,7 @@ export function OAuthClientForm({
 
       await onSubmit(data);
     },
-    [formState, validate, onSubmit]
+    [formState, validate, onSubmit],
   );
 
   return (
@@ -111,9 +106,7 @@ export function OAuthClientForm({
         <CardHeader>
           <CardTitle>{isEditMode ? "Edit Application" : "Create OAuth Application"}</CardTitle>
           <CardDescription>
-            {isEditMode
-              ? "Update your OAuth application settings."
-              : "Register a new application to access the API."}
+            {isEditMode ? "Update your OAuth application settings." : "Register a new application to access the API."}
           </CardDescription>
         </CardHeader>
         <CardContent className="space-y-6">
@@ -192,9 +185,7 @@ export function OAuthClientForm({
               </div>
             </RadioGroup>
             {isEditMode && (
-              <p className="text-sm text-muted-foreground">
-                Client type cannot be changed after creation.
-              </p>
+              <p className="text-sm text-muted-foreground">Client type cannot be changed after creation.</p>
             )}
           </div>
         </CardContent>

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

@@ -41,12 +41,7 @@ export interface OAuthClientSecretDisplayProps {
  * />
  * ```
  */
-export function OAuthClientSecretDisplay({
-  secret,
-  onDismiss,
-  open,
-  clientName,
-}: OAuthClientSecretDisplayProps) {
+export function OAuthClientSecretDisplay({ secret, onDismiss, open, clientName }: OAuthClientSecretDisplayProps) {
   const [copied, setCopied] = useState(false);
 
   const handleCopy = useCallback(async () => {
@@ -90,12 +85,7 @@ export function OAuthClientSecretDisplay({
 
         <div className="flex items-center space-x-2">
           <div className="flex-1">
-            <Input
-              value={secret}
-              readOnly
-              className="font-mono text-sm"
-              onClick={(e) => e.currentTarget.select()}
-            />
+            <Input value={secret} readOnly className="font-mono text-sm" onClick={(e) => e.currentTarget.select()} />
           </div>
           <Button
             type="button"
@@ -104,17 +94,11 @@ export function OAuthClientSecretDisplay({
             onClick={handleCopy}
             title={copied ? "Copied!" : "Copy to clipboard"}
           >
-            {copied ? (
-              <Check className="h-4 w-4 text-green-600" />
-            ) : (
-              <Copy className="h-4 w-4" />
-            )}
+            {copied ? <Check className="h-4 w-4 text-green-600" /> : <Copy className="h-4 w-4" />}
           </Button>
         </div>
 
-        {copied && (
-          <p className="text-sm text-green-600 text-center">Copied to clipboard!</p>
-        )}
+        {copied && <p className="text-sm text-green-600 text-center">Copied to clipboard!</p>}
 
         <DialogFooter className="mt-4">
           <Button onClick={handleDismiss} className="w-full">

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

@@ -79,7 +79,7 @@ export function OAuthRedirectUriInput({
       // Keep at least one empty input
       onChange(newUris.length > 0 ? newUris : [""]);
     },
-    [value, onChange]
+    [value, onChange],
   );
 
   const handleChange = useCallback(
@@ -88,15 +88,15 @@ export function OAuthRedirectUriInput({
       newUris[index] = newValue;
       onChange(newUris);
     },
-    [value, onChange]
+    [value, onChange],
   );
 
   return (
     <div className="space-y-2">
       <Label>{label} *</Label>
       <p className="text-sm text-muted-foreground">
-        Enter the URIs where users will be redirected after authorization.
-        Use https:// for production, or custom schemes for mobile apps.
+        Enter the URIs where users will be redirected after authorization. Use https:// for production, or custom
+        schemes for mobile apps.
       </p>
 
       <div className="space-y-2">
@@ -134,14 +134,7 @@ export function OAuthRedirectUriInput({
         })}
       </div>
 
-      <Button
-        type="button"
-        variant="outline"
-        size="sm"
-        onClick={handleAdd}
-        disabled={disabled}
-        className="mt-2"
-      >
+      <Button type="button" variant="outline" size="sm" onClick={handleAdd} disabled={disabled} className="mt-2">
         <Plus className="h-4 w-4 mr-2" />
         Add Redirect URI
       </Button>

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 (