@liorian/sdk 0.28.0-alpha.56010ca

package/src/presentation/themes/katon/edge-section.tsx

@@ -0,0 +1,19 @@
+import {cn} from "../../../infrastructure/utilities/utils";
+import {CommonClassName} from "../../../infrastructure/utilities/classname.util";
+
+export interface HeaderSectionProps extends React.HTMLAttributes<HTMLDivElement> {
+    children?: React.ReactNode;
+}
+
+export function EdgeSection({children, ...props}: HeaderSectionProps) {
+    return (
+        <div {...props} className={cn(
+            "flex flex-row items-center",
+            CommonClassName.layer,
+            CommonClassName.glossyBorder,
+            props.className,
+        )}>
+            {children}
+        </div>
+    )
+}

package/src/presentation/themes/katon/header-menubar.tsx

@@ -0,0 +1,270 @@
+"use client"
+
+import {useModuleStore} from "../../../infrastructure/stores/module.store"
+import {MenuIcon} from "lucide-react"
+import {useRouter, usePathname} from "next/navigation"
+import {cn} from "../../../infrastructure/utilities/utils"
+import {useState} from "react"
+import {
+    NavigationMenu as NavigationMenuRoot,
+    NavigationMenuContent,
+    NavigationMenuItem,
+    NavigationMenuList,
+    NavigationMenuTrigger,
+    NavigationMenuViewport,
+} from "../../ui/navigation-menu";
+import {LucideIcon} from "../../icons/lucide";
+import {Accordion, AccordionContent, AccordionItem, AccordionTrigger} from "../../ui/accordion";
+import {Button} from "../../ui/button";
+import {Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger} from "../../ui/sheet";
+
+
+export type NavigationMenuSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl'
+
+const sizeClasses: Record<NavigationMenuSize, { name: string; wrapper: string }> = {
+    xs: {name: "text-sm", wrapper: "pt-0"},
+    sm: {name: "text-sm", wrapper: "pt-0"},
+    md: {name: "text-sm", wrapper: "pt-0"},
+    lg: {name: "text-lg", wrapper: "pt-0"},
+    xl: {name: "text-xl", wrapper: "pt-0"},
+    xxl: {name: "text-2xl", wrapper: "pt-0"},
+}
+
+export interface NavigationMenuProps {
+    size?: NavigationMenuSize
+}
+
+export function NavigationMenu({size = 'md'}: NavigationMenuProps) {
+    const {selectedModule} = useModuleStore()
+    const router = useRouter()
+    const pathname = usePathname()
+    const classes = sizeClasses[size]
+    const [open, setOpen] = useState(false)
+
+    const sizeMap: Record<NavigationMenuSize, { trigger: string; item: string; icon: number; mobileItem: string }> = {
+        xs: {trigger: "text-xs h-7 px-1.5 py-0", item: "text-xs px-2 py-1", icon: 3, mobileItem: "text-xs h-8"},
+        sm: {trigger: "text-xs h-8 px-2 py-0", item: "text-xs px-2.5 py-1.5", icon: 3, mobileItem: "text-sm h-9"},
+        md: {trigger: "text-sm h-9 px-2.5 py-0", item: "text-sm px-3 py-1.5", icon: 4, mobileItem: "text-sm h-10"},
+        lg: {trigger: "text-sm h-10 px-3.5 py-0", item: "text-sm px-3.5 py-2", icon: 4, mobileItem: "text-base h-11"},
+        xl: {trigger: "text-base h-11 px-4.5 py-0", item: "text-base px-4 py-2", icon: 5, mobileItem: "text-base h-12"},
+        xxl: {trigger: "text-lg h-12 px-5 py-2.5", item: "text-lg px-5 py-2.5", icon: 5, mobileItem: "text-lg h-14"},
+    }
+    const s = sizeMap[size]
+
+    const activeClasses = {
+        desktop: "cursor-pointer",
+        mobileAccordion: "text-primary",
+        mobileButton: "secondary" as const,
+    }
+
+    const isItemActive = (item: any): boolean => {
+        if (item.url && pathname === item.url) {
+            return true
+        }
+        if (item.items) {
+            return item.items.some((subItem: any) => {
+                if ('separator' in subItem) return false
+                return isItemActive(subItem as any)
+            })
+        }
+        return false
+    }
+
+    const handleItemAction = (item: any) => {
+        if (item.action) {
+            item.action(router)
+        }
+        if (item.url) {
+            router.push(item.url)
+        }
+    }
+
+    const renderDesktopItems = (items: any[]) => {
+        return items.map((item, index) => {
+            if ('separator' in item) {
+                return <li key={`sep-${index}`} className="my-1 h-px bg-border"/>
+            }
+
+            const itemWithItems = item as any
+            const active = isItemActive(itemWithItems)
+            const hasChildren = itemWithItems.items && itemWithItems.items.length > 0
+
+            return (
+                <NavigationMenuItem key={itemWithItems.label || index}>
+                    <NavigationMenuTrigger
+                        hideChevron={!hasChildren}
+                        className={cn(
+                            "gap-2 rounded-sm",
+                            s.trigger,
+                            active && activeClasses.desktop,
+                            active && 'hover:bg-transparent hover:text-foreground'
+                        )}
+                        onClick={() => !hasChildren && handleItemAction(itemWithItems)}
+                    >
+                        {itemWithItems.icon && <LucideIcon name={itemWithItems.icon} size={s.icon}/>}
+                        <span>{itemWithItems.label}</span>
+                    </NavigationMenuTrigger>
+                    {hasChildren && (
+                        <NavigationMenuContent>
+                            <ul className="grid gap-1 p-2 w-48">
+                                {itemWithItems.items.map((subItem: any, subIndex: number) => {
+                                    if ('separator' in subItem) {
+                                        return <li key={`sep-${subIndex}`} className="my-1 h-px bg-border"/>
+                                    }
+                                    const subActive = isItemActive(subItem)
+                                    return (
+                                        <li key={subItem.label || subIndex}>
+                                            <button
+                                                onClick={() => handleItemAction(subItem)}
+                                                className={cn(
+                                                    "flex items-center gap-2 w-full rounded-md px-2 py-1.5 text-sm text-left hover:bg-accent hover:text-accent-foreground",
+                                                    subActive && "bg-accent text-accent-foreground"
+                                                )}
+                                            >
+                                                {subItem.icon && <LucideIcon name={subItem.icon} size={s.icon}/>}
+                                                <span>{subItem.label}</span>
+                                            </button>
+                                        </li>
+                                    )
+                                })}
+                            </ul>
+                        </NavigationMenuContent>
+                    )}
+                </NavigationMenuItem>
+            )
+        })
+    }
+
+    const renderMobileItems = (items: any[]) => {
+        return items.map((item, index) => {
+            if ('separator' in item) {
+                return <div key={`sep-${index}`} className="my-2 border-b border-border/50"/>
+            }
+
+            const itemWithItems = item as any
+            const active = isItemActive(itemWithItems)
+
+            if (itemWithItems.items && itemWithItems.items.length > 0) {
+                return (
+                    <AccordionItem key={itemWithItems.label} value={itemWithItems.label} className="border-none">
+                        <AccordionTrigger className={cn(
+                            "py-2 rounded-sm hover:no-underline",
+                            s.mobileItem,
+                            active && activeClasses.mobileAccordion
+                        )}>
+                            <div className="flex items-center gap-2">
+                                {itemWithItems.icon && <LucideIcon name={itemWithItems.icon} size={s.icon}/>}
+                                <span>{itemWithItems.label}</span>
+                            </div>
+                        </AccordionTrigger>
+                        <AccordionContent>
+                            <div className="pl-4 flex flex-col gap-1 border-l ml-2">
+                                {renderMobileItems(itemWithItems.items)}
+                            </div>
+                        </AccordionContent>
+                    </AccordionItem>
+                )
+            }
+
+            return (
+                <Button
+                    key={itemWithItems.label}
+                    variant={active ? activeClasses.mobileButton : "ghost"}
+                    className={cn("w-full justify-start gap-2 px-2 font-semibold border-b", s.mobileItem)}
+                    onClick={() => {
+                        handleItemAction(itemWithItems)
+                        setOpen(false)
+                    }}
+                >
+                    {itemWithItems.icon && <LucideIcon name={itemWithItems.icon} size={s.icon}/>}
+                    <span>{itemWithItems.label}</span>
+                </Button>
+            )
+        })
+    }
+
+    const allItems = selectedModule?.menu?.items || []
+
+    return (
+        <>
+            {/* Desktop navigation */}
+            <div className="flex-auto items-center hidden md:flex px-1.5 gap-3 animate-slide-in-down duration-150">
+
+                {selectedModule && (
+                    <div className="font-bold text-base">
+                        {selectedModule.name}
+                    </div>
+                )}
+
+                <NavigationMenuRoot>
+                    <NavigationMenuList>
+                        {renderDesktopItems(allItems)}
+                    </NavigationMenuList>
+                    <NavigationMenuViewport/>
+                </NavigationMenuRoot>
+            </div>
+
+            {/* Mobile sheet */}
+            <Sheet open={open} onOpenChange={setOpen}>
+                <SheetTrigger asChild>
+                    <Button variant="ghost" size="icon-sm" className="md:hidden">
+                        <MenuIcon/>
+                    </Button>
+                </SheetTrigger>
+                <SheetContent side="left"
+                              className="w-[300px]! rounded-sm m-3 h-[92dvh]! px-6 bg-background/70 backdrop-blur-lg">
+                    <SheetHeader className="pb-4">
+                        <SheetTitle className="flex items-center gap-2">
+                            {selectedModule?.icon && <LucideIcon name={selectedModule?.icon} size={5}/>}
+                            {selectedModule?.name}
+                        </SheetTitle>
+                    </SheetHeader>
+                    <div className="py-4 overflow-y-auto max-h-[calc(100vh-80px)]">
+                        <Accordion type="multiple" className="w-full">
+                            {selectedModule?.menu?.items.map((menu, index) => {
+                                const active = isItemActive(menu)
+                                if (menu.items && menu.items.length > 0) {
+                                    return (
+                                        <AccordionItem key={menu.label || index} value={menu.label || `item-${index}`}
+                                                       className="border-b">
+                                            <AccordionTrigger className={cn(
+                                                "font-semibold hover:no-underline",
+                                                s.mobileItem,
+                                                active && activeClasses.mobileAccordion
+                                            )}>
+                                                <div className="flex items-center gap-2">
+                                                    {menu.icon && <LucideIcon name={menu.icon} size={s.icon}/>}
+                                                    <span>{menu.label}</span>
+                                                </div>
+                                            </AccordionTrigger>
+                                            <AccordionContent>
+                                                <div className="flex flex-col gap-1 py-1">
+                                                    {renderMobileItems(menu.items)}
+                                                </div>
+                                            </AccordionContent>
+                                        </AccordionItem>
+                                    );
+                                }
+
+                                return (
+                                    <Button
+                                        key={menu.label || index}
+                                        variant={active ? activeClasses.mobileButton : "ghost"}
+                                        className={cn("w-full justify-start gap-2 px-0 font-semibold border-b rounded-sm", s.mobileItem)}
+                                        onClick={() => {
+                                            handleItemAction(menu)
+                                            setOpen(false)
+                                        }}
+                                    >
+                                        {menu.icon && <LucideIcon name={menu.icon} size={s.icon}/>}
+                                        <span>{menu.label}</span>
+                                    </Button>
+                                );
+                            })}
+                        </Accordion>
+                    </div>
+                </SheetContent>
+            </Sheet>
+        </>
+    )
+}

package/src/presentation/themes/katon/header-modules-available.tsx

@@ -0,0 +1,44 @@
+"use client"
+
+import {useModuleStore} from "../../../infrastructure/stores/module.store";
+import {Popover, PopoverContent, PopoverTrigger} from "../../ui/popover";
+import {LayoutGrid} from "lucide-react";
+import {Tooltip, TooltipContent, TooltipTrigger} from "../../ui/tooltip";
+import {ModuleDeclarationInterface} from "../../../domain/entities/module.interface";
+import {ModuleItemLink} from "./module-item-link";
+
+
+export function HeaderModulesAvailable() {
+    const {modules} = useModuleStore()
+    const available = modules
+        .filter(module => !module.isDefault)
+        .filter(module => module.isEnabled)
+        .filter(module => module.identifier !== 'mod.liorian.store')
+
+    return (
+        <div className={"flex flex-row items-center gap-2"}>
+            <Popover>
+                <Tooltip>
+                    <TooltipTrigger asChild>
+                        <PopoverTrigger className={"cursor-pointer"}>
+                            <LayoutGrid className={"size-5"}/>
+                        </PopoverTrigger>
+                    </TooltipTrigger>
+                    <TooltipContent side={'bottom'} align={'start'}>
+                        Tous les modules disponibles
+                    </TooltipContent>
+                </Tooltip>
+                <PopoverContent
+                    side={'bottom'}
+                    align={'start'}
+                    className={"mt-2 p-1! grid grid-cols-1 w-[400px] gap-0 md:w-[500px] md:grid-cols-2 lg:w-[600px]"}>
+                    {
+                        available.map((module: ModuleDeclarationInterface) =>
+                            <ModuleItemLink key={module.identifier} module={module}/>
+                        )
+                    }
+                </PopoverContent>
+            </Popover>
+        </div>
+    )
+}

package/src/presentation/themes/katon/header-modules-recents.tsx

@@ -0,0 +1,52 @@
+"use client"
+
+import {useModuleStore} from "../../../infrastructure/stores/module.store";
+import {useRecentModules} from "../../../infrastructure/hooks/use-recent-modules";
+import {Popover, PopoverContent, PopoverTrigger} from "../../ui/popover";
+import {History, TimelineIcon} from "lucide-react";
+import {Tooltip, TooltipContent, TooltipTrigger} from "../../ui/tooltip";
+import {ModuleDeclarationInterface} from "../../../domain/entities/module.interface";
+import {ModuleItemLink} from "./module-item-link";
+
+export function HeaderModulesRecents() {
+    const {modules} = useModuleStore()
+    const recentModules = useRecentModules()
+    const recent = recentModules
+        .map(rm => modules.find(m => m.identifier === rm.id))
+        .filter((m): m is ModuleDeclarationInterface => !!m)
+        // .filter(module => !module.isDefault)
+        .filter(module => module.isEnabled)
+
+    return (
+        <div className={"flex flex-row items-center gap-2"}>
+            <Popover>
+                <Tooltip>
+                    <TooltipTrigger asChild>
+                        <PopoverTrigger className={"cursor-pointer text-foreground/70"}>
+                            <TimelineIcon className={"size-5"}/>
+                        </PopoverTrigger>
+                    </TooltipTrigger>
+                    <TooltipContent side={'bottom'} align={'start'}>
+                        Modules récents
+                    </TooltipContent>
+                </Tooltip>
+                <PopoverContent
+                    side={'bottom'}
+                    align={'start'}
+                    className={"mt-2 p-1! grid grid-cols-1 w-[200px] gap-0 md:w-[250px] md:grid-cols-1 lg:w-[300px]"}>
+                    {
+                        recent.length === 0 ? (
+                            <div className="p-4 text-center text-xs text-muted-foreground col-span-full">
+                                Aucun module récent
+                            </div>
+                        ) : (
+                            recent.map((module: ModuleDeclarationInterface) =>
+                                <ModuleItemLink key={module.identifier} module={module}/>
+                            )
+                        )
+                    }
+                </PopoverContent>
+            </Popover>
+        </div>
+    )
+}

package/src/presentation/themes/katon/header-modules-store.tsx

@@ -0,0 +1,25 @@
+"use client"
+
+import {Store} from "lucide-react";
+import {Tooltip, TooltipContent, TooltipTrigger} from "../../ui/tooltip";
+import Link from "next/link";
+
+export function HeaderModulesStore() {
+    return (
+        <div className={"flex flex-row items-center gap-2"}>
+            <Tooltip>
+                <TooltipTrigger asChild>
+                    <Link
+                        href={"/store/explorer"}
+                        className={"text-foreground/70 hover:text-primary transition-colors"}
+                    >
+                        <Store className={"size-5"}/>
+                    </Link>
+                </TooltipTrigger>
+                <TooltipContent side={'bottom'} align={'start'}>
+                    Store
+                </TooltipContent>
+            </Tooltip>
+        </div>
+    )
+}

package/src/presentation/themes/katon/header-options.tsx

@@ -0,0 +1,13 @@
+import {HeaderTasksConnectedUser} from "./header-tasks-connected-user";
+import {NotificationsPopover} from "../../components/notifications-popover";
+import {LocalTime} from "../../components/local-time";
+
+export function HeaderOptions() {
+    return (
+        <div className="flex flex-row items-center justify-center gap-1">
+            <NotificationsPopover/>
+            <LocalTime tauriOnly/>
+            <HeaderTasksConnectedUser/>
+        </div>
+    )
+}

package/src/presentation/themes/katon/header-organization-select.tsx

@@ -0,0 +1,146 @@
+"use client"
+
+import React, {useState} from "react";
+import {useRouter} from "next/navigation";
+import {AuthUserService} from "../../../application/service/auth-user.service";
+import {OrganizationsApiService} from "../../../application/service/organizations-api-service";
+import {authUserConnectedStore} from "../../../infrastructure/stores/auth-user-connected.store";
+import {OrganizationInterface} from "../../../domain/entities/organization.interface";
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuGroup,
+    DropdownMenuItem,
+    DropdownMenuLabel,
+    DropdownMenuSeparator,
+    DropdownMenuTrigger,
+} from "../../ui/dropdown-menu";
+import {Building2Icon, CheckIcon, ChevronsUpDown} from "lucide-react";
+import {toast} from "sonner";
+import {cn} from "../../../infrastructure/utilities/utils";
+import {Activity} from "../../components/activity";
+
+export function HeaderOrganizationSelect() {
+    const router = useRouter();
+    const {currentOrganization, organizations: storeOrganizations, setCurrentOrganization} = authUserConnectedStore();
+    const [switchingOrgId, setSwitchingOrgId] = useState<string | null>(null);
+
+    const organization = currentOrganization || AuthUserService.getCurrentOrganization();
+    const organizations = (storeOrganizations && storeOrganizations.length > 0)
+        ? storeOrganizations
+        : AuthUserService.getOrganizations();
+
+    const handleSelectOrganization = async (org: OrganizationInterface) => {
+        if (org.id === organization?.id || switchingOrgId) return;
+
+        setSwitchingOrgId(org.id);
+
+        try {
+            // 1. Enregistrer l'organisation courante
+            await AuthUserService.setCurrentOrganization(org);
+            setCurrentOrganization(org);
+
+            // 2. Rechercher sa clé publique d'API
+            try {
+                const response = await OrganizationsApiService.getApiAccess(org.id);
+                const apiKeys = response?.data?.data;
+                const publicKey = apiKeys?.publicKeys && apiKeys.publicKeys.length > 0 ? apiKeys.publicKeys[0] : null;
+
+                if (publicKey) {
+                    await AuthUserService.setApiKey(publicKey);
+                }
+            } catch (apiError) {
+                console.warn("Could not fetch API key for organization", apiError);
+            }
+
+            toast.success(`Organisation ${org.name} sélectionnée`);
+            router.refresh();
+        } catch (error) {
+            console.error("Organization Switch Error", error);
+            toast.error("Erreur lors du changement d'organisation");
+        } finally {
+            setSwitchingOrgId(null);
+        }
+    };
+
+    if (!organization && organizations.length === 0) {
+        return null;
+    }
+
+    return (
+        <div className="hidden sm:flex flex-row items-center justify-end">
+            <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                    <button
+                        type="button"
+                        className="flex items-center gap-2 px-3 py-2 rounded-sm hover:bg-primary/10 hover:text-primary transition-colors text-left cursor-pointer outline-hidden"
+                    >
+                        <span className="text-sm leading-3 truncate max-w-80 font-medium">
+                            {organization?.name || "Sélectionner une organisation"}
+                        </span>
+                        <Building2Icon size={16} className="shrink-0 text-muted-foreground"/>
+                        <ChevronsUpDown size={16} className="shrink-0 text-muted-foreground"/>
+                    </button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent side="bottom" align="end" className="w-64 sm:w-72 p-1">
+                    {/*<DropdownMenuLabel className="px-2 py-1.5 text-xs text-muted-foreground font-semibold ">*/}
+                    {/*    Organisations*/}
+                    {/*</DropdownMenuLabel>*/}
+                    {/*<DropdownMenuSeparator/>*/}
+                    <DropdownMenuGroup>
+                        {organizations.length > 0 ? (
+                            organizations.map((org) => {
+                                const isSelected = organization?.id === org.id;
+                                const isSwitching = switchingOrgId === org.id;
+
+                                return (
+                                    <DropdownMenuItem
+                                        key={org.id}
+                                        onClick={() => handleSelectOrganization(org)}
+                                        disabled={!!switchingOrgId}
+                                        className={cn(
+                                            "flex items-center justify-between gap-2 px-2 py-2 cursor-pointer rounded-md",
+                                            isSelected && "bg-primary/10 text-primary font-medium"
+                                        )}
+                                    >
+                                        <div className="flex items-center gap-2.5 min-w-0 flex-1">
+                                            <div
+                                                className={cn(
+                                                    "flex h-7 w-7 shrink-0 items-center justify-center rounded-md border text-xs",
+                                                    isSelected
+                                                        ? "bg-primary text-primary-foreground border-primary"
+                                                        : "bg-muted text-muted-foreground border-border"
+                                                )}
+                                            >
+                                                <Building2Icon className="size-3.5"/>
+                                            </div>
+                                            <div className="flex flex-col min-w-0 flex-1">
+                                                <span className="text-sm leading-none truncate font-medium">
+                                                    {org.name}
+                                                </span>
+                                                {org.description && (
+                                                    <span className="text-[11px] text-muted-foreground truncate mt-0.5">
+                                                        {org.description}
+                                                    </span>
+                                                )}
+                                            </div>
+                                        </div>
+                                        {isSwitching ? (
+                                            <Activity.Loader size={16}/>
+                                        ) : isSelected ? (
+                                            <CheckIcon className="size-4 shrink-0 text-primary"/>
+                                        ) : null}
+                                    </DropdownMenuItem>
+                                );
+                            })
+                        ) : (
+                            <DropdownMenuItem disabled className="text-xs text-muted-foreground">
+                                Aucune organisation disponible
+                            </DropdownMenuItem>
+                        )}
+                    </DropdownMenuGroup>
+                </DropdownMenuContent>
+            </DropdownMenu>
+        </div>
+    );
+}

package/src/presentation/themes/katon/header-routines.tsx

@@ -0,0 +1,74 @@
+"use client"
+
+import {Fragment} from "react";
+import {useRoutines} from "../../../infrastructure/routines/routine.hook";
+import {Tooltip, TooltipContent, TooltipTrigger} from "../../ui/tooltip";
+import {LucideIcon} from "../../icons/lucide";
+import {Button} from "../../ui/button";
+import {Badge} from "../../ui/badge";
+import {Popover, PopoverContent, PopoverTrigger} from "../../ui/popover";
+
+export function HeaderRoutines() {
+    const {getEntries} = useRoutines()
+    const routineEntries = [...getEntries()]
+
+    return (
+        <Fragment>
+            {routineEntries.map((routine, index) => {
+                const key = `${routine.id}-${index}`;
+                const label = routine.name || routine.id;
+                const iconName = routine.icon || 'Cog';
+
+                // Fonctionnalité optionnelle : la routine fournit le CONTENU du
+                // popover ; le système fournit l'icône déclencheur + conteneur.
+                const Content = routine.popover?.();
+
+                if (!Content) {
+                    // Comportement historique : icône informative + tooltip
+                    return (
+                        <Tooltip key={key}>
+                            <TooltipTrigger>
+                                <div className={'px-2'}>
+                                    <LucideIcon name={iconName} size={4}/>
+                                </div>
+                            </TooltipTrigger>
+                            <TooltipContent>
+                                {label}
+                            </TooltipContent>
+                        </Tooltip>
+                    );
+                }
+
+                return (
+                    <Popover key={key}>
+                        <Tooltip>
+                            <TooltipTrigger asChild>
+                                <PopoverTrigger asChild>
+                                    <Button variant="ghost" className="relative size-4" aria-label={label}>
+                                        <LucideIcon name={iconName} size={4}/>
+                                        <RoutineBadge value={routine.badge?.() ?? 0}/>
+                                    </Button>
+                                </PopoverTrigger>
+                            </TooltipTrigger>
+                            <TooltipContent side="bottom">
+                                {label}
+                            </TooltipContent>
+                        </Tooltip>
+                        <PopoverContent className="w-96 p-0" side="bottom" align="end" sideOffset={8}>
+                            <Content/>
+                        </PopoverContent>
+                    </Popover>
+                );
+            })}
+        </Fragment>
+    )
+}
+
+function RoutineBadge({value}: { value: number }) {
+    if (value <= 0) return null;
+    return (
+        <Badge className="absolute -top-0.5 -right-0.5 h-4 min-w-4 px-1 text-[10px]">
+            {value > 9 ? "9+" : value}
+        </Badge>
+    );
+}