@liorian/sdk 0.28.0-alpha.56010ca

package/src/presentation/components/markdown-parser.tsx

@@ -0,0 +1,201 @@
+import {Fragment, ReactNode, createElement} from "react";
+import {cn} from "../../infrastructure/utilities/utils";
+
+export interface MarkdownParserProps {
+    text: string;
+    className?: string;
+}
+
+type MarkdownBlock =
+    | { type: "paragraph"; lines: string[] }
+    | { type: "heading"; level: number; text: string }
+    | { type: "list"; items: string[] }
+    | { type: "quote"; lines: string[] }
+    | { type: "code"; content: string };
+
+const INLINE_SOURCE = "(?<bold>\\*\\*[^*]+\\*\\*)|(?<italic>\\*[^*]+\\*)|(?<code>`[^`]+`)|(?<link>\\[(?<linkText>[^\\]]+)\\]\\((?<linkUrl>[^)]+)\\))|(?<strike>~~[^~]+~~)";
+
+function parseBlocks(text: string): MarkdownBlock[] {
+    const lines = text.split(/\r?\n/);
+    const blocks: MarkdownBlock[] = [];
+    let index = 0;
+
+    while (index < lines.length) {
+        const line = lines[index];
+        const trimmed = line.trim();
+
+        if (!trimmed) {
+            index++;
+            continue;
+        }
+
+        if (/^```/.test(trimmed)) {
+            const content: string[] = [];
+            index++;
+            while (index < lines.length && !/^```/.test(lines[index].trim())) {
+                content.push(lines[index]);
+                index++;
+            }
+            index++;
+            blocks.push({type: "code", content: content.join("\n")});
+            continue;
+        }
+
+        const heading = trimmed.match(/^(#{1,6})\s+(.*)$/);
+        if (heading) {
+            blocks.push({type: "heading", level: heading[1].length, text: heading[2]});
+            index++;
+            continue;
+        }
+
+        const list = trimmed.match(/^[-*]\s+(.*)$/);
+        if (list) {
+            const items = [list[1]];
+            index++;
+            while (index < lines.length && /^[-*]\s+/.test(lines[index].trim())) {
+                items.push(lines[index].trim().replace(/^[-*]\s+/, ""));
+                index++;
+            }
+            blocks.push({type: "list", items});
+            continue;
+        }
+
+        const quote = trimmed.match(/^>\s?(.*)$/);
+        if (quote) {
+            const quoteLines = [quote[1]];
+            index++;
+            while (index < lines.length && /^>\s?/.test(lines[index].trim())) {
+                quoteLines.push(lines[index].trim().replace(/^>\s?/, ""));
+                index++;
+            }
+            blocks.push({type: "quote", lines: quoteLines});
+            continue;
+        }
+
+        const paragraph: string[] = [line];
+        index++;
+        while (
+            index < lines.length &&
+            lines[index].trim() !== "" &&
+            !/^#{1,6}\s/.test(lines[index].trim()) &&
+            !/^[-*]\s/.test(lines[index].trim()) &&
+            !/^>\s?/.test(lines[index].trim()) &&
+            !/^```/.test(lines[index].trim())
+        ) {
+            paragraph.push(lines[index]);
+            index++;
+        }
+        blocks.push({type: "paragraph", lines: paragraph});
+    }
+
+    return blocks;
+}
+
+function renderInline(text: string): ReactNode[] {
+    const regex = new RegExp(INLINE_SOURCE, "g");
+    const nodes: ReactNode[] = [];
+    let lastIndex = 0;
+    let key = 0;
+    let match: RegExpExecArray | null;
+
+    while ((match = regex.exec(text)) !== null) {
+        if (match.index > lastIndex) {
+            nodes.push(text.slice(lastIndex, match.index));
+        }
+
+        const groups = match.groups ?? {};
+
+        if (groups.bold) {
+            nodes.push(<strong key={key++}>{renderInline(groups.bold.slice(2, -2))}</strong>);
+        } else if (groups.italic) {
+            nodes.push(<em key={key++}>{renderInline(groups.italic.slice(1, -1))}</em>);
+        } else if (groups.strike) {
+            nodes.push(<del key={key++}>{renderInline(groups.strike.slice(2, -2))}</del>);
+        } else if (groups.code) {
+            nodes.push(
+                <code key={key++} className="rounded bg-muted px-1.5 py-0.5 font-mono text-[0.9em]">
+                    {groups.code.slice(1, -1)}
+                </code>
+            );
+        } else if (groups.link) {
+            nodes.push(
+                <a
+                    key={key++}
+                    href={groups.linkUrl}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="text-primary underline underline-offset-2 hover:text-primary/80"
+                >
+                    {renderInline(groups.linkText)}
+                </a>
+            );
+        }
+
+        lastIndex = regex.lastIndex;
+    }
+
+    if (lastIndex < text.length) {
+        nodes.push(text.slice(lastIndex));
+    }
+
+    return nodes;
+}
+
+const HEADING_CLASS: Record<number, string> = {
+    1: "text-2xl font-bold",
+    2: "text-xl font-bold",
+    3: "text-lg font-semibold",
+    4: "text-base font-semibold",
+    5: "text-sm font-medium",
+    6: "text-sm font-medium text-muted-foreground",
+};
+
+function renderBlock(block: MarkdownBlock, index: number): ReactNode {
+    switch (block.type) {
+        case "paragraph":
+            return <p key={index} className="m-0">{renderInline(block.lines.join(" "))}</p>;
+        case "heading":
+            return createElement(
+                `h${block.level}`,
+                {key: index, className: cn("mt-0 mb-2", HEADING_CLASS[block.level])},
+                renderInline(block.text)
+            );
+        case "list":
+            return (
+                <ul key={index} className="m-0 list-disc space-y-1 pl-5">
+                    {block.items.map((item, itemIndex) => (
+                        <li key={itemIndex}>{renderInline(item)}</li>
+                    ))}
+                </ul>
+            );
+        case "quote":
+            return (
+                <blockquote key={index} className="m-0 border-l-2 border-primary pl-3 italic">
+                    {block.lines.map((line, lineIndex) => (
+                        <Fragment key={lineIndex}>
+                            {renderInline(line)}
+                            {lineIndex < block.lines.length - 1 && <br/>}
+                        </Fragment>
+                    ))}
+                </blockquote>
+            );
+        case "code":
+            return (
+                <pre key={index} className="m-0 overflow-x-auto rounded-md bg-muted p-3">
+                    <code className="font-mono text-sm">{block.content}</code>
+                </pre>
+            );
+        default:
+            return null;
+    }
+}
+
+export function MarkdownParser({text, className}: MarkdownParserProps) {
+    const content = parseBlocks(text).map(renderBlock);
+
+    if (className) {
+        return <div className={cn("text-sm", className)}>{content}</div>;
+    }
+
+    return <Fragment>{content}</Fragment>;
+}

package/src/presentation/components/message-scroller.tsx

@@ -0,0 +1,131 @@
+"use client"
+
+import * as React from "react"
+import {
+  MessageScroller as MessageScrollerPrimitive,
+  useMessageScroller,
+  useMessageScrollerScrollable,
+  useMessageScrollerVisibility,
+} from "@shadcn/react/message-scroller"
+
+import { cn } from "../../infrastructure/utilities/utils"
+import { Button } from "../ui/button"
+import { ArrowDownIcon } from "lucide-react"
+
+function MessageScrollerProvider(
+  props: React.ComponentProps<typeof MessageScrollerPrimitive.Provider>
+) {
+  return <MessageScrollerPrimitive.Provider {...props} />
+}
+
+function MessageScroller({
+  className,
+  ...props
+}: React.ComponentProps<typeof MessageScrollerPrimitive.Root>) {
+  return (
+    <MessageScrollerPrimitive.Root
+      data-slot="message-scroller"
+      className={cn(
+        "group/message-scroller relative flex size-full min-h-0 flex-col overflow-hidden",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function MessageScrollerViewport({
+  className,
+  ...props
+}: React.ComponentProps<typeof MessageScrollerPrimitive.Viewport>) {
+  return (
+    <MessageScrollerPrimitive.Viewport
+      data-slot="message-scroller-viewport"
+      className={cn(
+        "size-full min-h-0 min-w-0 scroll-fade-b scrollbar-thin scrollbar-gutter-stable overflow-y-auto overscroll-contain contain-content data-autoscrolling:scrollbar-thumb-transparent data-autoscrolling:scrollbar-track-transparent",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function MessageScrollerContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof MessageScrollerPrimitive.Content>) {
+  return (
+    <MessageScrollerPrimitive.Content
+      data-slot="message-scroller-content"
+      className={cn("flex h-max min-h-full flex-col gap-6", className)}
+      {...props}
+    />
+  )
+}
+
+function MessageScrollerItem({
+  className,
+  scrollAnchor = false,
+  ...props
+}: React.ComponentProps<typeof MessageScrollerPrimitive.Item>) {
+  return (
+    <MessageScrollerPrimitive.Item
+      data-slot="message-scroller-item"
+      scrollAnchor={scrollAnchor}
+      className={cn(
+        "min-w-0 shrink-0 [contain-intrinsic-size:auto_10rem] [content-visibility:auto]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function MessageScrollerButton({
+  direction = "end",
+  className,
+  children,
+  render,
+  variant = "secondary",
+  size = "icon-sm",
+  ...props
+}: React.ComponentProps<typeof MessageScrollerPrimitive.Button> &
+  Pick<React.ComponentProps<typeof Button>, "variant" | "size">) {
+  return (
+    <MessageScrollerPrimitive.Button
+      data-slot="message-scroller-button"
+      data-direction={direction}
+      data-variant={variant}
+      data-size={size}
+      direction={direction}
+      className={cn(
+        "absolute inset-s-1/2 -translate-x-1/2 border-border bg-background text-foreground transition-[translate,scale,opacity] duration-200 hover:bg-muted hover:text-foreground data-[active=false]:pointer-events-none data-[active=false]:scale-95 data-[active=false]:opacity-0 data-[active=false]:duration-400 data-[active=false]:ease-[cubic-bezier(0.7,0,0.84,0)] data-[active=true]:translate-y-0 data-[active=true]:scale-100 data-[active=true]:opacity-100 data-[active=true]:ease-[cubic-bezier(0.23,1,0.32,1)] data-[direction=end]:bottom-4 data-[direction=end]:data-[active=false]:translate-y-full data-[direction=start]:top-4 data-[direction=start]:data-[active=false]:-translate-y-full rtl:translate-x-1/2 data-[direction=start]:[&_svg]:rotate-180",
+        className
+      )}
+      render={render ?? <Button variant={variant} size={size} />}
+      {...props}
+    >
+      {children ?? (
+        <>
+          <ArrowDownIcon
+          />
+          <span className="sr-only">
+            {direction === "end" ? "Scroll to end" : "Scroll to start"}
+          </span>
+        </>
+      )}
+    </MessageScrollerPrimitive.Button>
+  )
+}
+
+export {
+  MessageScrollerProvider,
+  MessageScroller,
+  MessageScrollerViewport,
+  MessageScrollerContent,
+  MessageScrollerItem,
+  MessageScrollerButton,
+  useMessageScroller,
+  useMessageScrollerScrollable,
+  useMessageScrollerVisibility,
+}

package/src/presentation/components/module-first-access-config.view.tsx

@@ -0,0 +1,181 @@
+"use client"
+
+import * as React from "react"
+import {useMutation, useQuery, useQueryClient} from "@tanstack/react-query"
+import {toast} from "sonner"
+import {Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle} from "../ui/card"
+import {Input} from "../ui/input"
+import {Label} from "../ui/label"
+import {Button} from "../ui/button"
+import {Separator} from "../ui/separator"
+import {DynamicIcon} from "./dynamic-icon"
+import {Activity} from "./activity"
+import {ModuleDeclarationInterface} from "../../domain/entities/module.interface"
+import {
+    ModuleConfigSettingsFieldInterface,
+    ModuleConfigSettingsFieldType
+} from "../../domain/entities/module-activation.interface"
+import {ModuleActivationApiService} from "../../application/service/module-activation-api.service"
+import {OrganizationsApiService} from "../../application/service/organizations-api-service"
+import {useAuth} from "../../infrastructure/hooks/use-auth"
+
+export function getModuleConfigSettingsPreferenceLabel(moduleId: string): string {
+    return `module_config_${moduleId}`
+}
+
+export function formatModuleSerialKey(raw: string): string {
+    const cleaned = raw.toUpperCase().replace(/[^A-Z0-9]/g, "").slice(0, 32)
+    return cleaned.replace(/(.{4})/g, "$1-").replace(/-$/, "")
+}
+
+const INPUT_TYPES: Record<ModuleConfigSettingsFieldType, string> = {
+    TEXT: "text",
+    NUMBER: "number",
+    EMAIL: "email",
+    PASSWORD: "password",
+    URL: "url",
+    TEL: "tel",
+    SELECT: "text",
+    TOGGLE: "text",
+}
+
+interface ModulesFirstAccessConfigViewProps {
+    module: ModuleDeclarationInterface
+    organizationId: string
+    settingsFields?: ModuleConfigSettingsFieldInterface[]
+    onConfigured?: () => void | Promise<void>
+}
+
+export function ModulesFirstAccessConfigView({module, organizationId, settingsFields = [], onConfigured}: ModulesFirstAccessConfigViewProps) {
+    const {user} = useAuth()
+    const queryClient = useQueryClient()
+    const moduleId = module.key ?? module.identifier
+
+    const [serialKey, setSerialKey] = React.useState("")
+    const [settings, setSettings] = React.useState<Record<string, string>>({})
+
+    const isSerialKeyComplete = serialKey.replace(/-/g, "").length === 32
+    const isMissingRequiredSetting = settingsFields.some(field => field.required && !(settings[field.key] ?? "").trim())
+
+    const {data: savedSettings} = useQuery<Record<string, string>>({
+        queryKey: ["organizations", organizationId, "preferences", "module-config", moduleId],
+        queryFn: async () => {
+            const response = await OrganizationsApiService.getPreferenceByOrgId(organizationId)
+            const preferences = response.data?.data
+            if (!Array.isArray(preferences)) return {}
+            const found = preferences.find(preference => preference?.label === getModuleConfigSettingsPreferenceLabel(moduleId))
+            try {
+                const parsed = found ? JSON.parse(found.value) : {}
+                return typeof parsed === "object" && parsed !== null ? parsed : {}
+            } catch {
+                return {}
+            }
+        },
+    })
+
+    React.useEffect(() => {
+        const defaults: Record<string, string> = {}
+        settingsFields.forEach(field => {
+            if (field.defaultValue !== undefined) defaults[field.key] = field.defaultValue
+        })
+        setSettings({...defaults, ...(savedSettings ?? {})})
+    }, [savedSettings])
+
+    const configureMutation = useMutation({
+        mutationFn: async () => {
+            await ModuleActivationApiService.activateModule(organizationId, {
+                moduleIdentifier: module.identifier,
+                serialKey,
+                auditId: user?.auditId,
+            })
+            if (settingsFields.length > 0) {
+                await OrganizationsApiService.createPreference({
+                    organization_id: organizationId,
+                    label: getModuleConfigSettingsPreferenceLabel(moduleId),
+                    value: JSON.stringify(settings),
+                })
+            }
+        },
+        onSuccess: async () => {
+            await queryClient.invalidateQueries({queryKey: ["module-activation"]})
+            await queryClient.invalidateQueries({queryKey: ["organizations", organizationId, "preferences"]})
+            toast.success(`Module « ${module.name} » configuré avec succès`)
+            await onConfigured?.()
+        },
+    })
+
+    const canSubmit = isSerialKeyComplete && !isMissingRequiredSetting && !configureMutation.isPending
+
+    return (
+        <div className="flex min-h-svh items-center justify-center p-4">
+            <Card className="w-full max-w-md gap-4">
+                <CardHeader>
+                    <div className="flex items-center gap-3">
+                        <div className="flex size-10 shrink-0 items-center justify-center rounded-lg bg-primary/10 text-primary">
+                            <DynamicIcon name={module.icon} className="size-5"/>
+                        </div>
+                        <div className="min-w-0">
+                            <CardTitle>Configurer «&nbsp;{module.name}&nbsp;»</CardTitle>
+                            <CardDescription>
+                                Ce module doit être activé avant sa première utilisation.
+                            </CardDescription>
+                        </div>
+                    </div>
+                </CardHeader>
+                <CardContent className="flex flex-col gap-5">
+                    <div className="flex flex-col gap-1.5">
+                        <Label htmlFor={`${moduleId}-serial-key`}>Clé d&apos;activation</Label>
+                        <Input
+                            id={`${moduleId}-serial-key`}
+                            placeholder="XXXX-XXXX-XXXX-XXXX-XXXX-XXXX-XXXX-XXXX"
+                            value={serialKey}
+                            onChange={(event) => setSerialKey(formatModuleSerialKey(event.target.value))}
+                            onKeyDown={(event) => event.key === "Enter" && canSubmit && configureMutation.mutate()}
+                            autoComplete="off"
+                            spellCheck={false}
+                            className="font-mono tracking-wide"
+                        />
+                        <p className="text-xs text-muted-foreground">Format : 8 blocs de 4 caractères.</p>
+                    </div>
+
+                    {settingsFields.length > 0 && (
+                        <>
+                            <Separator/>
+                            <div className="flex flex-col gap-3">
+                                <p className="text-sm font-medium">Paramètres du module</p>
+                                {settingsFields.map((field) => (
+                                    <div key={field.key} className="flex flex-col gap-1.5">
+                                        <Label htmlFor={`${moduleId}-${field.key}`}>
+                                            {field.label}
+                                            {field.required && <span className="text-destructive">&nbsp;*</span>}
+                                        </Label>
+                                        <Input
+                                            id={`${moduleId}-${field.key}`}
+                                            type={INPUT_TYPES[field.type ?? "TEXT"]}
+                                            placeholder={field.placeholder}
+                                            value={settings[field.key] ?? ""}
+                                            onChange={(event) => setSettings(previous => ({...previous, [field.key]: event.target.value}))}
+                                            autoComplete="off"
+                                        />
+                                        {field.description && (
+                                            <p className="text-xs text-muted-foreground">{field.description}</p>
+                                        )}
+                                    </div>
+                                ))}
+                            </div>
+                        </>
+                    )}
+                </CardContent>
+                <CardFooter>
+                    <Button
+                        className="w-full"
+                        disabled={!canSubmit}
+                        onClick={() => configureMutation.mutate()}
+                    >
+                        {configureMutation.isPending ? <Activity.Loader size={16}/> : "Activer le module"}
+                    </Button>
+                </CardFooter>
+            </Card>
+        </div>
+    )
+}

package/src/presentation/components/module-first-access-pending.view.tsx

@@ -0,0 +1,38 @@
+"use client"
+
+import {useRouter} from "next/navigation"
+import {Button} from "../ui/button"
+import {Empty, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle} from "../ui/empty"
+import {DynamicIcon} from "./dynamic-icon"
+import {ModuleDeclarationInterface} from "../../domain/entities/module.interface"
+
+interface ModulesFirstAccessPendingViewProps {
+    module: ModuleDeclarationInterface
+}
+
+export function ModulesFirstAccessPendingView({module}: ModulesFirstAccessPendingViewProps) {
+    const router = useRouter()
+
+    return (
+        <div className="flex min-h-svh items-center justify-center p-4">
+            <Empty className="max-w-md">
+                <EmptyMedia variant="icon">
+                    <DynamicIcon name="SettingsIcon" className="size-5"/>
+                </EmptyMedia>
+                <EmptyHeader>
+                    <EmptyTitle>Configuration requise</EmptyTitle>
+                </EmptyHeader>
+                <EmptyDescription>
+                    Le module «&nbsp;{module.name}&nbsp;» n&apos;est pas encore configuré pour votre organisation.
+                    Renseignez la clé d&apos;activation et les paramètres initiaux pour y accéder.
+                </EmptyDescription>
+                <EmptyDescription className="text-xs text-muted-foreground">
+                    Cette configuration est réservée aux administrateurs de l&apos;organisation.
+                </EmptyDescription>
+                <Button size="lg" onClick={() => router.push('/dashboard')}>
+                    Retour au tableau de bord
+                </Button>
+            </Empty>
+        </div>
+    )
+}

package/src/presentation/components/module-guard.tsx

@@ -0,0 +1,34 @@
+"use client"
+
+import { usePathname, useRouter } from "next/navigation"
+import { useModuleStore } from "../../infrastructure/stores/module.store"
+import * as React from "react"
+
+export function ModuleGuard({ children }: { children: React.ReactNode }) {
+    const pathname = usePathname()
+    const { modules } = useModuleStore()
+    const router = useRouter()
+    const [mounted, setMounted] = React.useState(false)
+
+    React.useEffect(() => {
+        setMounted(true)
+    }, [])
+
+    React.useEffect(() => {
+        if (!mounted) return
+
+        // On ignore la page dashboard et la gestion des modules eux-mêmes
+        if (pathname === '/dashboard' || pathname === '/store' || pathname.startsWith('/store/') || pathname === '/') return
+
+        // Trouver si le chemin actuel appartient à un module
+        // On trie par longueur d'URL décroissante pour matcher le plus spécifique d'abord
+        const sortedModules = [...modules].sort((a, b) => b.uri.length - a.uri.length)
+        const currentModule = sortedModules.find(m => pathname.startsWith(m.uri))
+        
+        if (currentModule && !currentModule.isEnabled) {
+            router.replace('/dashboard')
+        }
+    }, [pathname, modules, router, mounted])
+
+    return <>{children}</>
+}

package/src/presentation/components/modules-first-access.guard.tsx

@@ -0,0 +1,88 @@
+"use client"
+
+import * as React from "react"
+import {usePathname} from "next/navigation"
+import {useQuery} from "@tanstack/react-query"
+import {useModuleStore} from "../../infrastructure/stores/module.store"
+import {useAuth} from "../../infrastructure/hooks/use-auth"
+import {isAdminOrAbove} from "../../infrastructure/utilities/permission.util"
+import {ModuleDeclarationInterface} from "../../domain/entities/module.interface"
+import {ModuleConfigSettingsFieldInterface} from "../../domain/entities/module-activation.interface"
+import {ModuleActivationApiService} from "../../application/service/module-activation-api.service"
+import {Activity} from "./activity"
+import {ModulesFirstAccessConfigView} from "./module-first-access-config.view"
+import {ModulesFirstAccessPendingView} from "./module-first-access-pending.view"
+
+const EXCLUDED_PATHS = ["/", "/dashboard", "/store"]
+
+interface ModulesFirstAccessGuardProps {
+    children: React.ReactNode
+    /** Identifiants (id ou clé) des modules soumis à la configuration initiale. Par défaut : tous les modules. */
+    moduleIds?: string[]
+    /** Paramètres additionnels à définir lors de la première configuration */
+    settingsFields?: ModuleConfigSettingsFieldInterface[]
+    /** Appelé lorsqu'un administrateur termine la configuration d'un module */
+    onConfigured?: (module: ModuleDeclarationInterface) => void | Promise<void>
+}
+
+export function ModulesFirstAccessGuard({children, moduleIds, settingsFields, onConfigured}: ModulesFirstAccessGuardProps) {
+    const pathname = usePathname()
+    const {modules} = useModuleStore()
+    const {user, currentOrganization} = useAuth()
+    const [mounted, setMounted] = React.useState(false)
+
+    React.useEffect(() => setMounted(true), [])
+
+    const currentModule = React.useMemo<ModuleDeclarationInterface | null>(() => {
+        if (!mounted) return null
+        if (EXCLUDED_PATHS.includes(pathname) || pathname.startsWith("/store/") || pathname.startsWith("/auth")) return null
+        return [...modules]
+            .sort((a, b) => b.uri.length - a.uri.length)
+            .find(module => pathname.startsWith(module.uri)) ?? null
+    }, [mounted, pathname, modules])
+
+    const organizationId = currentOrganization?.id
+    const moduleId = currentModule ? currentModule.key ?? currentModule.identifier : null
+    const isTargeted = !!currentModule && (
+        !moduleIds || moduleIds.length === 0 ||
+        moduleIds.includes(currentModule.identifier) || moduleIds.includes(currentModule.key ?? "")
+    )
+    const isAdmin = isAdminOrAbove(user, organizationId)
+
+    const validationQuery = useQuery<boolean>({
+        queryKey: ["module-activation", "validate", organizationId, moduleId],
+        enabled: mounted && isTargeted && !!organizationId && !!moduleId,
+        staleTime: 30_000,
+        retry: false,
+        queryFn: async () => {
+            const identifier = currentModule?.identifier ?? moduleId
+            const response = await ModuleActivationApiService.validateActivation(organizationId!, identifier!)
+            return response.data?.data?.isValid ?? false
+        },
+    })
+
+    if (!mounted) return <>{children}</>
+    if (!isTargeted || !currentModule || !organizationId || !moduleId) return <>{children}</>
+
+    if (validationQuery.isPending) {
+        return (
+            <div className="flex min-h-svh flex-col items-center justify-center gap-4 p-4">
+                <Activity.Loader size={40}/>
+                <p className="text-sm text-muted-foreground">Vérification de l&apos;activation du module…</p>
+            </div>
+        )
+    }
+
+    if (validationQuery.isError || validationQuery.data) return <>{children}</>
+
+    return isAdmin ? (
+        <ModulesFirstAccessConfigView
+            module={currentModule}
+            organizationId={organizationId}
+            settingsFields={settingsFields}
+            onConfigured={() => onConfigured?.(currentModule)}
+        />
+    ) : (
+        <ModulesFirstAccessPendingView module={currentModule}/>
+    )
+}