@liorian/sdk 0.28.0-alpha.56010ca

package/src/presentation/components/modules-guard-forbidden.tsx

@@ -0,0 +1,46 @@
+"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"
+import {TriangleAlert} from "lucide-react";
+
+interface ModulesGuardForbiddenProps {
+    module?: ModuleDeclarationInterface | null
+}
+
+export function ModulesGuardForbiddenView({module}: ModulesGuardForbiddenProps) {
+    const router = useRouter()
+
+    return (
+        <div className="flex min-h-svh items-center justify-center p-4">
+            <Empty className="max-w-md">
+                <EmptyMedia variant="icon" className="size-24 rounded-full aspect-square">
+                    <DynamicIcon strokeWidth={1} name="ShieldAlertIcon" className="size-18 text-primary"/>
+                </EmptyMedia>
+                <EmptyHeader>
+                    <EmptyTitle>Accès refusé</EmptyTitle>
+                </EmptyHeader>
+                <EmptyDescription>
+                    {module
+                        ? <>Vous n&apos;avez pas la permission d&apos;accéder au module «&nbsp;{module.name}&nbsp;».</>
+                        : <>Vous n&apos;avez pas la permission d&apos;accéder à ce module.</>}
+                </EmptyDescription>
+                <EmptyDescription className={"p-3"}>
+                    Si vous avez le droit d'accès, cela peut être du problème de votre connexion internet ou
+                    renseignez-vous auprès de votre administrateur.
+                </EmptyDescription>
+                <div className="flex gap-4">
+                    <Button variant="outline" size="lg" onClick={() => history.go(0)}>
+                        Actualiser
+                    </Button>
+                    <Button size="lg" onClick={() => router.push('/dashboard')}>
+                        Retour au tableau de bord
+                    </Button>
+                </div>
+            </Empty>
+        </div>
+    )
+}

package/src/presentation/components/notification-details.modal.tsx

@@ -0,0 +1,145 @@
+"use client"
+
+import {useState} from "react";
+import {useQueryClient} from "@tanstack/react-query";
+import {format} from "date-fns";
+import {fr} from "date-fns/locale";
+import {AlertTriangleIcon, BellRingIcon, CheckIcon, CircleCheckIcon, InfoIcon, MailOpenIcon, ShieldAlertIcon, TimerIcon} from "lucide-react";
+import {toast} from "sonner";
+import {Badge} from "../ui/badge";
+import {Button} from "../ui/button";
+import {Separator} from "../ui/separator";
+import {NotificationsApiService} from "../../application/service/notifications-api-service";
+import {NotificationInterface, NotificationTypeEnum} from "../../domain/entities/notification.interface";
+
+export interface NotificationDetailsModalProps {
+    notification: NotificationInterface;
+    close?: () => void;
+}
+
+const notificationTypeIcon = {
+    [NotificationTypeEnum.ALERT]: AlertTriangleIcon,
+    [NotificationTypeEnum.INFORMATION]: InfoIcon,
+    [NotificationTypeEnum.CONFIRMATION]: CircleCheckIcon,
+    [NotificationTypeEnum.REMINDER]: TimerIcon,
+    [NotificationTypeEnum.SECURITY]: ShieldAlertIcon,
+};
+
+const notificationTypeLabel = {
+    [NotificationTypeEnum.ALERT]: "Alerte",
+    [NotificationTypeEnum.INFORMATION]: "Information",
+    [NotificationTypeEnum.CONFIRMATION]: "Confirmation",
+    [NotificationTypeEnum.REMINDER]: "Rappel",
+    [NotificationTypeEnum.SECURITY]: "Sécurité",
+};
+
+const notificationTypeVariant = {
+    [NotificationTypeEnum.ALERT]: "destructive" as const,
+    [NotificationTypeEnum.INFORMATION]: "secondary" as const,
+    [NotificationTypeEnum.CONFIRMATION]: "default" as const,
+    [NotificationTypeEnum.REMINDER]: "outline" as const,
+    [NotificationTypeEnum.SECURITY]: "destructive" as const,
+};
+
+function formatDateTime(date?: string | null): string {
+    if (!date) return "Non renseigné";
+    try {
+        return format(new Date(date), "d MMMM yyyy 'à' HH:mm", {locale: fr});
+    } catch {
+        return "Date invalide";
+    }
+}
+
+export function NotificationDetailsModal({notification, close}: NotificationDetailsModalProps) {
+    const queryClient = useQueryClient();
+    const [isRead, setIsRead] = useState(!!notification.readAt);
+
+    const title = notification.title ?? notification.subject ?? "Notification";
+    const body = notification.body ?? notification.message ?? notification.content ?? "Aucun contenu";
+    const TypeIcon = notificationTypeIcon[(notification.type as NotificationTypeEnum) ?? NotificationTypeEnum.INFORMATION] ?? BellRingIcon;
+
+    const markAsRead = async () => {
+        try {
+            await NotificationsApiService.markAsRead(notification.id);
+            setIsRead(true);
+            await queryClient.invalidateQueries({queryKey: ['notifications']});
+        } catch (error: any) {
+            toast.error("Impossible de marquer la notification comme lue");
+        }
+    };
+
+    return (
+        <div className="flex flex-col">
+            <div className="flex items-start gap-3 p-4 pb-3">
+                <div className="flex size-11 shrink-0 items-center justify-center rounded-lg bg-primary/10 text-primary">
+                    <TypeIcon className="size-5.5"/>
+                </div>
+
+                <div className="min-w-0 flex-1">
+                    <h3 className="text-lg font-semibold leading-snug break-words">
+                        {title}
+                    </h3>
+                    <div className="mt-1.5 flex flex-wrap items-center gap-2">
+                        {notification.type && (
+                            <Badge variant={notificationTypeVariant[(notification.type as NotificationTypeEnum) ?? NotificationTypeEnum.INFORMATION]}>
+                                {notificationTypeLabel[(notification.type as NotificationTypeEnum) ?? NotificationTypeEnum.INFORMATION]}
+                            </Badge>
+                        )}
+                        {isRead ? (
+                            <Badge variant="secondary" className="gap-1">
+                                <MailOpenIcon/>
+                                Lue
+                            </Badge>
+                        ) : (
+                            <Badge variant="outline" className="gap-1">
+                                Nouvelle
+                            </Badge>
+                        )}
+                    </div>
+                </div>
+            </div>
+
+            <Separator/>
+
+            <div className="p-4">
+                <p className="text-sm leading-relaxed whitespace-pre-wrap break-words text-foreground/90">
+                    {body}
+                </p>
+
+                <div className="mt-5 grid grid-cols-1 gap-3 sm:grid-cols-2">
+                    <DetailField label="Reçue le" value={formatDateTime(notification.createdAt)}/>
+                    <DetailField label="Lue le" value={formatDateTime(notification.readAt ?? (isRead ? notification.updatedAt : null))}/>
+                    <DetailField label="Organisation" value={notification.organizationId ?? "—"}/>
+                    <DetailField label="ID" value={notification.id}/>
+                </div>
+            </div>
+
+            <Separator/>
+
+            <div className="flex items-center justify-end gap-2 p-3">
+                {!isRead && (
+                    <Button variant="outline" className="gap-1.5" onClick={markAsRead}>
+                        <CheckIcon/>
+                        Marquer comme lue
+                    </Button>
+                )}
+                <Button variant="default" onClick={close}>
+                    Fermer
+                </Button>
+            </div>
+        </div>
+    );
+}
+
+function DetailField({label, value}: { label: string; value: string }) {
+    return (
+        <div className="flex flex-col gap-0.5 rounded-lg bg-muted/40 px-3 py-2">
+            <span className="text-[10px] font-medium text-muted-foreground uppercase tracking-tight">
+                {label}
+            </span>
+            <span className="text-sm font-medium break-words">
+                {value}
+            </span>
+        </div>
+    );
+}

package/src/presentation/components/notification-item.tsx

@@ -0,0 +1,127 @@
+"use client"
+
+import {formatDistanceToNow} from "date-fns";
+import {fr} from "date-fns/locale";
+import {AlertTriangleIcon, BellRingIcon, CheckIcon, CircleCheckIcon, InfoIcon, MailOpenIcon, ShieldAlertIcon, TimerIcon} from "lucide-react";
+import {Badge} from "../ui/badge";
+import {Button} from "../ui/button";
+import {useModal} from "../modals/hooks/useModal";
+import {cn} from "../../infrastructure/utilities/utils";
+import {NotificationDetailsModal, NotificationDetailsModalProps} from "./notification-details.modal";
+import {NotificationInterface, NotificationTypeEnum} from "../../domain/entities/notification.interface";
+
+export interface NotificationItemProps {
+    notification: NotificationInterface;
+    onRead?: (notification: NotificationInterface) => void;
+}
+
+const notificationTypeIcon = {
+    [NotificationTypeEnum.ALERT]: AlertTriangleIcon,
+    [NotificationTypeEnum.INFORMATION]: InfoIcon,
+    [NotificationTypeEnum.CONFIRMATION]: CircleCheckIcon,
+    [NotificationTypeEnum.REMINDER]: TimerIcon,
+    [NotificationTypeEnum.SECURITY]: ShieldAlertIcon,
+};
+
+const notificationTypeLabel = {
+    [NotificationTypeEnum.ALERT]: "Alerte",
+    [NotificationTypeEnum.INFORMATION]: "Information",
+    [NotificationTypeEnum.CONFIRMATION]: "Confirmation",
+    [NotificationTypeEnum.REMINDER]: "Rappel",
+    [NotificationTypeEnum.SECURITY]: "Sécurité",
+};
+
+export function NotificationItem({notification, onRead}: NotificationItemProps) {
+    const {open, close} = useModal();
+    const title = notification.title ?? notification.subject ?? "Notification";
+    const body = notification.body ?? notification.message ?? notification.content;
+    const isRead = notification.readAt ?? false;
+    const TypeIcon = notificationTypeIcon[(notification.type as NotificationTypeEnum) ?? NotificationTypeEnum.INFORMATION] ?? BellRingIcon;
+
+    const createdAt = notification.createdAt ? formatDistanceToNow(new Date(notification.createdAt), {addSuffix: true, locale: fr}) : undefined;
+
+    const openDetails = () => {
+        const modalId = open(
+            (props: NotificationDetailsModalProps) => (
+                <NotificationDetailsModal
+                    notification={props.notification}
+                    close={() => close(modalId)}
+                />
+            ),
+            {notification, close: () => close(modalId)},
+            {
+                size: "MD",
+                scrollable: true,
+                className: "rounded-lg",
+            }
+        );
+    };
+
+    return (
+        <div
+            onClick={openDetails}
+            className={cn(
+                "group/notification flex flex-row gap-3 rounded-lg border border-transparent p-2.5 transition-colors cursor-pointer",
+                "hover:bg-muted/60 hover:border-foreground/10",
+                !isRead && "bg-primary/5 border-primary/10"
+            )}
+        >
+            <div className="flex size-9 shrink-0 items-center justify-center rounded-md bg-muted text-muted-foreground">
+                <TypeIcon className="size-4.5"/>
+            </div>
+
+            <div className="min-w-0 flex-1">
+                <div className="flex items-start justify-between gap-2">
+                    <p className={cn(
+                        "truncate text-sm font-medium",
+                        !isRead && "text-foreground"
+                    )}>
+                        {title}
+                    </p>
+                    {!isRead && (
+                        <Badge className="shrink-0" variant="default">
+                            Nouveau
+                        </Badge>
+                    )}
+                </div>
+
+                {body && (
+                    <p className="mt-0.5 line-clamp-2 text-xs text-muted-foreground">
+                        {body}
+                    </p>
+                )}
+
+                <div className="mt-1.5 flex flex-row items-center gap-2">
+                    {notification.type && (
+                        <Badge variant="outline" className="h-4 text-[10px]">
+                            {notificationTypeLabel[notification.type as NotificationTypeEnum] ?? notification.type}
+                        </Badge>
+                    )}
+                    {createdAt && (
+                        <span className="text-[11px] text-muted-foreground">
+                            {createdAt}
+                        </span>
+                    )}
+                    {!isRead && onRead && (
+                        <Button
+                            size="sm"
+                            variant="ghost"
+                            className="ml-auto h-6 gap-1 px-1.5 text-[11px] text-muted-foreground"
+                            onClick={(event) => {
+                                event.stopPropagation();
+                                onRead(notification);
+                            }}
+                        >
+                            <CheckIcon/>
+                            Marquer lu
+                        </Button>
+                    )}
+                </div>
+            </div>
+
+            {isRead && (
+                <MailOpenIcon className="size-4 shrink-0 self-center text-muted-foreground/40"/>
+            )}
+        </div>
+    );
+}

package/src/presentation/components/notifications-popover.tsx

@@ -0,0 +1,128 @@
+"use client"
+
+import {useQueryClient} from "@tanstack/react-query";
+import {BellIcon, InboxIcon} from "lucide-react";
+import Link from "next/link";
+import {toast} from "sonner";
+import {Button} from "../ui/button";
+import {Popover, PopoverContent, PopoverHeader, PopoverTitle, PopoverTrigger} from "../ui/popover";
+import {Tabs, TabsContent, TabsList, TabsTrigger} from "../ui/tabs";
+import {Skeleton} from "../ui/skeleton";
+import {Badge} from "../ui/badge";
+import {NotificationItem} from "./notification-item";
+import {useNotifications} from "../../infrastructure/hooks/use-notifications";
+import {NotificationsApiService} from "../../application/service/notifications-api-service";
+import {NotificationInterface} from "../../domain/entities/notification.interface";
+
+function NotificationsList({category}: { category: "user" | "organization" }) {
+    const {data, isLoading, isError, refetch} = useNotifications(category, {
+        limit: 5,
+        manualPagination: false,
+        read: false
+    });
+    const queryClient = useQueryClient();
+
+    const markAsRead = async (notification: NotificationInterface) => {
+        try {
+            await NotificationsApiService.markAsRead(notification.id);
+            await queryClient.invalidateQueries({queryKey: ['notifications']});
+        } catch (error: any) {
+            toast.error("Impossible de marquer la notification comme lue");
+        }
+    };
+
+    if (isLoading) {
+        return (
+            <div className="flex flex-col gap-2">
+                <Skeleton className="h-12 w-full"/>
+                <Skeleton className="h-12 w-full"/>
+                <Skeleton className="h-12 w-full"/>
+            </div>
+        );
+    }
+
+    if (isError || data.length === 0) {
+        return (
+            <div className="flex flex-col items-center gap-2 py-6 text-center text-muted-foreground">
+                <InboxIcon className="size-8 opacity-40"/>
+                <p className="text-xs">Aucune notification</p>
+            </div>
+        );
+    }
+
+    return (
+        <div className="flex flex-col gap-1">
+            {data.slice(0, 5).map((notification) => (
+                <NotificationItem
+                    key={notification.id}
+                    notification={notification}
+                    onRead={markAsRead}
+                />
+            ))}
+        </div>
+    );
+}
+
+export function NotificationsPopover() {
+    const {data: userNotifications} = useNotifications("user", {
+        limit: 10,
+        manualPagination: false,
+        read: false
+    });
+
+    const unreadCount = userNotifications.filter((notification) => !notification.readAt).length;
+
+    return (
+        <Popover>
+            <PopoverTrigger asChild>
+                <Button variant="ghost" className="relative w-8 h-8" aria-label="Notifications">
+                    <BellIcon/>
+                    {unreadCount > 0 && (
+                        <Badge className="absolute -top-0.5 -right-0.5 h-4 min-w-4 px-1 text-[10px]">
+                            {unreadCount > 9 ? "9+" : unreadCount}
+                        </Badge>
+                    )}
+                </Button>
+            </PopoverTrigger>
+            <PopoverContent
+                className="w-96 p-0"
+                side={"bottom"} align={"end"}
+                sideOffset={8}
+            >
+                <PopoverHeader className="px-4 pt-3.5 pb-1">
+                    <PopoverTitle>Notifications</PopoverTitle>
+                </PopoverHeader>
+
+                <Tabs defaultValue="user">
+                    <div className="px-3">
+                        <TabsList className="w-full">
+                            <TabsTrigger value="user" className="flex-1">
+                                Utilisateur
+                            </TabsTrigger>
+                            <TabsTrigger value="organization" className="flex-1">
+                                Organisation
+                            </TabsTrigger>
+                        </TabsList>
+                    </div>
+
+                    <div className="max-h-80 overflow-y-auto p-2">
+                        <TabsContent value="user">
+                            <NotificationsList category="user"/>
+                        </TabsContent>
+                        <TabsContent value="organization">
+                            <NotificationsList category="organization"/>
+                        </TabsContent>
+                    </div>
+                </Tabs>
+
+                <div className="border-t p-2">
+                    <Button asChild variant="ghost" className="w-full justify-center gap-1 text-xs">
+                        <Link href="/notifications">
+                            Voir toutes les notifications
+                        </Link>
+                    </Button>
+                </div>
+            </PopoverContent>
+        </Popover>
+    );
+}

package/src/presentation/components/push-notifications.provider.tsx

@@ -0,0 +1,65 @@
+"use client"
+
+import {useEffect} from "react";
+import {toast} from "sonner";
+import {useAuth} from "../../infrastructure/hooks/use-auth";
+import {NotificationsPushService} from "../../application/service/notifications-push.service";
+import {UserPreferencesApiService} from "../../application/service/user-preferences-api.service";
+
+export function PushNotificationsProvider() {
+    const {user, currentOrganization} = useAuth();
+
+    useEffect(() => {
+        if (!user) {
+            NotificationsPushService.stopActivityTracking();
+            NotificationsPushService.stopPolling();
+            NotificationsPushService.unsubscribe().catch(() => undefined);
+            return;
+        }
+
+        // Les notifications sont rattachées à une organisation : on attend la
+        // sélection de l'organisation avant d'initialiser le canal push, sinon
+        // les appels (préférences, liste des notifications) partent sans
+        // contexte d'organisation (x-organization-id) et sont rejetés en 400.
+        if (!currentOrganization) {
+            return;
+        }
+
+        const offInApp = NotificationsPushService.onInAppNotification((payload) => {
+            toast(payload.title || "Nouvelle notification", {
+                description: payload.body || "",
+                richColors: true,
+            });
+        });
+
+        NotificationsPushService.register()
+            .then(async () => {
+                NotificationsPushService.startActivityTracking();
+
+                const pushEnabled = (await UserPreferencesApiService
+                    .getValue(user.id!, NotificationsPushService.PUSH_PREFERENCE_LABEL)
+                    .catch(() => undefined)) !== "false";
+
+                if (!pushEnabled) return;
+
+                if (NotificationsPushService.isSupported) {
+                    if (Notification.permission !== "granted") return;
+                    const subscription = await NotificationsPushService.getSubscription();
+                    if (!subscription) await NotificationsPushService.subscribe();
+                    return;
+                }
+
+                // Web Push indisponible (ex: Tauri) : canal REST de secours
+                await NotificationsPushService.startPolling();
+            })
+            .catch((error) => console.error("Push notifications initialization failed", error));
+
+        return () => {
+            offInApp();
+            NotificationsPushService.stopActivityTracking();
+            NotificationsPushService.stopPolling();
+        };
+    }, [user, currentOrganization]);
+
+    return null;
+}

package/src/presentation/components/upload-progress-dialog.tsx

@@ -0,0 +1,140 @@
+"use client"
+
+import * as React from "react"
+import { CheckCircle2, CloudUpload, XCircle } from "lucide-react"
+import {
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+} from "../ui/dialog"
+import { Button } from "../ui/button"
+import { Activity } from "./activity"
+import { Progress } from "../ui/progress"
+import { useUploadStore, type UploadItem } from "../../infrastructure/stores/upload.store"
+import { formatEta, formatFileSize } from "../../infrastructure/utilities/format.util"
+
+interface UploadProgressDialogProps {
+    open: boolean
+    onOpenChange: (open: boolean) => void
+    onAllComplete?: () => void
+}
+
+function UploadProgressRow({ upload }: { upload: UploadItem }) {
+    const isUploading = upload.status === "uploading"
+    const isDone = upload.status === "done"
+
+    return (
+        <div className="flex flex-col gap-1.5 rounded-lg border border-border/60 bg-muted/30 p-2.5">
+            <div className="flex items-center gap-2 min-w-0">
+                {isDone ? (
+                    <CheckCircle2 className="size-4 shrink-0 text-emerald-500"/>
+                ) : upload.status === "error" ? (
+                    <XCircle className="size-4 shrink-0 text-destructive"/>
+                ) : (
+                    <Activity.Loader size={16}/>
+                )}
+                <span className="min-w-0 flex-1 truncate text-sm font-medium">{upload.name}</span>
+                <span className="shrink-0 text-xs tabular-nums text-muted-foreground">
+                    {formatFileSize(upload.size)}
+                </span>
+            </div>
+            {isUploading && (
+                <div className="flex items-center gap-2">
+                    <Progress value={upload.progress} className="h-1.5 flex-1"/>
+                    <span className="w-11 text-right text-xs tabular-nums text-muted-foreground">
+                        {Math.round(upload.progress)}%
+                    </span>
+                </div>
+            )}
+            {isUploading && (
+                <span className="text-xs text-muted-foreground">
+                    {upload.eta ? formatEta(upload.eta) : "Estimation du temps restant…"}
+                </span>
+            )}
+            {upload.status === "error" && (
+                <span className="text-xs text-destructive line-clamp-1">{upload.error}</span>
+            )}
+        </div>
+    )
+}
+
+export function UploadProgressDialog({ open, onOpenChange, onAllComplete }: UploadProgressDialogProps) {
+    const uploads = useUploadStore((state) => state.uploads)
+    const hasActiveUploads = useUploadStore((state) => state.hasActiveUploads)
+    const didAutoComplete = React.useRef(false)
+
+    const activeUploads = uploads.filter((u) => u.status === "uploading" || u.status === "idle")
+    const failedCount = uploads.filter((u) => u.status === "error").length
+
+    React.useEffect(() => {
+        if (!open) {
+            didAutoComplete.current = false
+            return
+        }
+        if (open && !hasActiveUploads && failedCount === 0 && !didAutoComplete.current) {
+            didAutoComplete.current = true
+            onAllComplete?.()
+        }
+    }, [open, hasActiveUploads, failedCount, onAllComplete])
+
+    const handleComplete = () => {
+        didAutoComplete.current = true
+        onOpenChange(false)
+        onAllComplete?.()
+    }
+
+    return (
+        <Dialog open={open} onOpenChange={onOpenChange}>
+            <DialogContent className="sm:max-w-md" showCloseButton={false}>
+                <DialogHeader>
+                    <DialogTitle className="flex items-center gap-2">
+                        <CloudUpload className="size-5 text-primary"/>
+                        Téléversement en cours
+                    </DialogTitle>
+                    <DialogDescription>
+                        {hasActiveUploads
+                            ? "Certains fichiers sont encore en cours de téléversement. Veuillez patienter."
+                            : failedCount > 0
+                                ? "Certains fichiers n'ont pas pu être téléversés."
+                                : "Tous les fichiers ont été téléversés avec succès."}
+                    </DialogDescription>
+                </DialogHeader>
+
+                <div className="flex max-h-64 flex-col gap-2 overflow-y-auto">
+                    {activeUploads.length === 0 && failedCount === 0 && (
+                        <p className="text-sm text-muted-foreground">
+                            Aucun téléversement en attente.
+                        </p>
+                    )}
+                    {activeUploads.map((upload) => (
+                        <UploadProgressRow key={upload.id} upload={upload}/>
+                    ))}
+                    {uploads
+                        .filter((u) => u.status === "error")
+                        .map((upload) => (
+                            <UploadProgressRow key={upload.id} upload={upload}/>
+                        ))}
+                </div>
+
+                <DialogFooter>
+                    <Button
+                        variant="ghost"
+                        onClick={() => {
+                            didAutoComplete.current = true
+                            onOpenChange(false)
+                        }}
+                        disabled={hasActiveUploads}
+                    >
+                        Fermer
+                    </Button>
+                    <Button onClick={handleComplete} disabled={hasActiveUploads || failedCount > 0}>
+                        Terminer
+                    </Button>
+                </DialogFooter>
+            </DialogContent>
+        </Dialog>
+    )
+}

package/src/presentation/components/waiting-bar.tsx

@@ -0,0 +1,22 @@
+export function WaitingBar() {
+    return (
+        <div className="w-full h-[3px] relative rounded-xl overflow-hidden bg-black/20">
+            <div
+                className="absolute top-0 -left-[100%] w-full h-full bg-primary rounded-xl animate-progress-infinite"
+                style={{ animationDelay: "0ms" }}
+            />
+            <div
+                className="absolute top-0 -left-[100%] w-full h-full bg-(--chart-2) rounded-xl animate-progress-infinite"
+                style={{ animationDelay: "750ms" }}
+            />
+            <div
+                className="absolute top-0 -left-[100%] w-full h-full bg-(--chart-3) rounded-xl animate-progress-infinite"
+                style={{ animationDelay: "100ms" }}
+            />
+            <div
+                className="absolute top-0 -left-[100%] w-full h-full bg-(--chart-4) rounded-xl animate-progress-infinite"
+                style={{ animationDelay: "300ms" }}
+            />
+        </div>
+    )
+}