@liorian/sdk 0.28.0-alpha.56010ca

package/src/presentation/themes/katon/header-tasks-connected-user.tsx

@@ -0,0 +1,150 @@
+"use client"
+
+import {useAuth} from "../../../infrastructure/hooks/use-auth";
+import {
+    DropdownMenu,
+    DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem,
+    DropdownMenuLabel, DropdownMenuSeparator,
+    DropdownMenuTrigger
+} from "../../ui/dropdown-menu";
+import {Avatar, AvatarFallback} from "../../ui/avatar";
+import {StorageMedia} from "../../uploading/storage-media";
+import {
+    BellIcon,
+    CircleUserRoundIcon,
+    CogIcon,
+    CreditCardIcon,
+    EllipsisVerticalIcon,
+    LogOutIcon, MoonIcon, ShieldCogIcon,
+    SunIcon
+} from "lucide-react";
+import React from "react";
+import {Button} from "../../ui/button";
+import {useThemePreferColorSchemeStore} from "../../theme/theme.store";
+import {PreferColorSchemeEnum} from "../../theme/theme.enum";
+import Link from "next/link";
+import {LocalTime} from "../../components/local-time";
+import {isAdminOrAbove} from "../../../infrastructure/utilities/permission.util";
+
+export function HeaderTasksConnectedUser() {
+    const {colorScheme, toggleColorScheme} = useThemePreferColorSchemeStore()
+    const {user: authUser, currentOrganization} = useAuth();
+    const isAdmin = isAdminOrAbove(authUser, currentOrganization?.id);
+    const user = React.useMemo(() => {
+        const name = authUser?.username || authUser?.userData?.firstname || "Utilisateur";
+        const email = authUser?.email || "No email";
+        const avatarId = authUser?.avatar?.id;
+        let initials = "U";
+        if (authUser?.userData?.firstname && authUser?.userData?.lastname) {
+            initials = `${authUser.userData.firstname[0]}${authUser.userData.lastname[0]}`.toUpperCase();
+        } else if (authUser?.username) {
+            initials = authUser.username.substring(0, 2).toUpperCase();
+        } else if (authUser?.email) {
+            initials = authUser.email.substring(0, 2).toUpperCase();
+        }
+
+        return {
+            name,
+            email,
+            avatarId,
+            initials,
+        };
+    }, [authUser]);
+    const {logout} = useAuth()
+
+
+    return (
+        <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+                <div
+                    className="flex flex-row items-center p-2 rounded-md data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+                >
+                    <Avatar className="h-8 w-8 rounded-lg overflow-hidden">
+                        {user.avatarId ? (
+                            <StorageMedia id={user.avatarId} className="size-full object-cover"/>
+                        ) : (
+                            <AvatarFallback className="rounded-lg">{user.initials}</AvatarFallback>
+                        )}
+                    </Avatar>
+                    {/*<div className="grid flex-1 text-left text-sm leading-tight">*/}
+                    {/*    <span className="truncate font-medium">{user.name}</span>*/}
+                    {/*    <span className="truncate text-xs text-muted-foreground">{user.email}</span>*/}
+                    {/*</div>*/}
+                    <EllipsisVerticalIcon className="ml-auto size-4"/>
+                </div>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent
+                className="w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg"
+                side={"bottom"}
+                align="end"
+                sideOffset={4}
+            >
+                <DropdownMenuLabel className="p-0 font-normal">
+                    <div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
+                        <Avatar className="h-8 w-8 rounded-full overflow-hidden">
+                            {user.avatarId ? (
+                                <StorageMedia id={user.avatarId} className="size-full object-cover"/>
+                            ) : (
+                                <AvatarFallback className="rounded-lg">{user.initials}</AvatarFallback>
+                            )}
+                        </Avatar>
+                        <div className="grid flex-1 text-left text-sm leading-tight">
+                            <span className="truncate font-medium">{user.name}</span>
+                            <span className="truncate text-xs text-muted-foreground">
+                    {user.email}
+                  </span>
+                        </div>
+                    </div>
+                </DropdownMenuLabel>
+                <DropdownMenuSeparator/>
+                <DropdownMenuGroup>
+                    <DropdownMenuItem asChild>
+                        <Link href="/account" className="flex w-full items-center">
+                            <CircleUserRoundIcon className="mr-2 h-4 w-4"/>
+                            <span>Mon compte</span>
+                        </Link>
+                    </DropdownMenuItem>
+                    <DropdownMenuItem asChild>
+                        <Link href="/account/security" className="flex w-full items-center">
+                            <ShieldCogIcon/>
+                            Mot de passe
+                        </Link>
+                    </DropdownMenuItem>
+                    <DropdownMenuItem asChild>
+                        <Link href="/account/notifications" className="flex w-full items-center">
+                            <BellIcon/>
+                            Notifications
+                        </Link>
+                    </DropdownMenuItem>
+                </DropdownMenuGroup>
+                {isAdmin && (
+                    <>
+                        <DropdownMenuSeparator/>
+                        <DropdownMenuGroup>
+                            <DropdownMenuItem asChild>
+                                <Link href="/organizations/settings" className="flex w-full items-center">
+                                    <CogIcon/>
+                                    Paramètres de l'organisation
+                                </Link>
+                            </DropdownMenuItem>
+                        </DropdownMenuGroup>
+                    </>
+                )}
+                <DropdownMenuSeparator/>
+                <DropdownMenuItem
+                    onClick={() => toggleColorScheme(true)}>
+                    {
+                        (colorScheme !== PreferColorSchemeEnum.Light)
+                            ? <><SunIcon/> <span>Thème clair</span></>
+                            : <><MoonIcon/> <span>Thème sombre</span></>
+                    }
+                </DropdownMenuItem>
+                <DropdownMenuSeparator/>
+                <DropdownMenuItem onClick={logout} className="cursor-pointer">
+                    <LogOutIcon/>
+                    Se déconnecter
+                </DropdownMenuItem>
+            </DropdownMenuContent>
+        </DropdownMenu>
+    )
+}

package/src/presentation/themes/katon/index.tsx

@@ -0,0 +1,16 @@
+export * from "./view"
+export * from "./view-wrapper"
+export * from "./view-helmet"
+export * from "./view-frame"
+export * from "./view-status"
+export * from "./main-wrapper"
+export * from "./edge-section"
+export * from "./header-menubar"
+export * from "./header-modules-available"
+export * from "./header-modules-recents"
+export * from "./header-options"
+export * from "./header-organization-select"
+export * from "./header-routines"
+export * from "./header-tasks-connected-user"
+export * from "./module-item-link"
+export * from "./dashboard-layout"

package/src/presentation/themes/katon/main-wrapper.tsx

@@ -0,0 +1,34 @@
+import {cn} from "../../../infrastructure/utilities/utils";
+
+
+export interface MainWrapperProps extends React.HTMLAttributes<HTMLDivElement> {
+    children?: React.ReactNode;
+    size?: 'sm' | 'md' | 'lg';
+    className?: string;
+}
+
+export function getMainWrapperSize(size?: MainWrapperProps['size']) {
+    switch (size) {
+        case 'sm':
+            return 'max-w-screen-sm';
+        case 'md':
+            return 'max-w-screen-md';
+        case 'lg':
+            return 'max-w-screen-lg';
+    }
+    return 'max-w-5xl'
+}
+
+export function MainWrapper({children, className, size, ...props}: MainWrapperProps) {
+    let _size = getMainWrapperSize(size);
+
+    return (
+        <div {...props} className={cn(
+            "w-full max-w-5xl mx-auto flex flex-col gap-6",
+            _size,
+            className,
+        )}>
+            {children}
+        </div>
+    )
+}

package/src/presentation/themes/katon/module-item-link.tsx

@@ -0,0 +1,32 @@
+import {ModuleDeclarationInterface} from "../../../domain/entities/module.interface";
+import Link from "next/link";
+import {LucideIcon} from "../../icons/lucide";
+
+export interface ModuleListItemProps {
+    module: ModuleDeclarationInterface
+}
+
+export function ModuleItemLink({module}: ModuleListItemProps) {
+    return (
+        <Link
+            className={"col-span-1 flex flex-row gap-4 p-2 rounded-[inherit] cursor-pointer hover:bg-primary/20 hover:text-primary"}
+            href={module.uri}
+        >
+            <div className="flex pl-2 justify-center items-center">
+                <LucideIcon
+                    name={module.icon || 'AppWindowMac'}
+                    size={5}
+                    className={"text-primary"}
+                />
+            </div>
+            <div className="flex flex-col gap-0 flex-auto w-full pr-6">
+                <div className="text-sm truncate">
+                    {module.name}
+                </div>
+                <div className="text-xs truncate pr-6 text-ellipsis text-muted-foreground">
+                    {module.description}
+                </div>
+            </div>
+        </Link>
+    )
+}

package/src/presentation/themes/katon/view-frame.tsx

@@ -0,0 +1,25 @@
+"use client"
+
+import { cn } from "../../../infrastructure/utilities/utils"
+import { Motion } from "../../../infrastructure/library/motion"
+import { elasticEnter } from "../../../infrastructure/library/motion-utils"
+
+export interface ViewFrameProps {
+  className?: string
+  children?: React.ReactNode
+}
+
+export function ViewFrame({ className, children }: ViewFrameProps) {
+  return (
+    <Motion
+      as="main"
+      animation={elasticEnter()}
+      className={cn(
+        "flex-auto min-h-[100dvh-64px] w-full",
+        className
+      )}
+    >
+      {children}
+    </Motion>
+  )
+}

package/src/presentation/themes/katon/view-helmet.tsx

@@ -0,0 +1,53 @@
+import {cn} from "../../../infrastructure/utilities/utils"
+import React from "react"
+import {HeaderRoutines} from "./header-routines"
+import {HeaderOptions} from "./header-options"
+import {HeaderOrganizationSelect} from "./header-organization-select"
+import Link from "next/link"
+import {ThemeLogo} from "../../system/logo.theme"
+import {HeaderModulesAvailable} from "./header-modules-available"
+import {HeaderModulesRecents} from "./header-modules-recents"
+import {HeaderModulesStore} from "./header-modules-store"
+import {Tooltip, TooltipContent, TooltipTrigger} from "../../ui/tooltip"
+import {NavigationMenu} from "./header-menubar"
+
+export interface ViewHelmetProps {
+    className?: string
+    fixed?: boolean
+}
+
+export function ViewHelmet({className, fixed = true}: ViewHelmetProps) {
+    return (
+        <header className={cn(
+            "w-full h-16 flex items-start pt-0 gap-2 px-4",
+            fixed ? "relative md:fixed top-0 left-0 z-3 [&+*]:mt-0 sm:[&+*]:mt-16 sm:backdrop-blur-xl sm:mask-[linear-gradient(to_bottom,background_40%,transparent_100%)]" : "",
+            className
+        )}>
+            <div className="flex flex-row gap-4 item-center w-full h-12">
+                <div className="w-8 h-auto flex items-center justify-center">
+                    <Tooltip>
+                        <TooltipTrigger className={"text-primary"}>
+                            <Link href={"/"} className="w-full h-full flex items-center justify-center">
+                                <ThemeLogo color={"black"} onDark={"white"} variant={"square"}/>
+                            </Link>
+                        </TooltipTrigger>
+                        <TooltipContent side={'bottom'} align={'start'}>
+                            Tableau de bord
+                        </TooltipContent>
+                    </Tooltip>
+                </div>
+                <HeaderModulesAvailable/>
+                <HeaderModulesRecents/>
+                <HeaderModulesStore/>
+                <div className="flex flex-row items-center flex-auto">
+                    <NavigationMenu size={'md'} />
+                </div>
+                <div className="flex flex-row items-center">
+                    <HeaderOrganizationSelect/>
+                    <HeaderRoutines/>
+                    <HeaderOptions/>
+                </div>
+            </div>
+        </header>
+    )
+}

package/src/presentation/themes/katon/view-status.tsx

@@ -0,0 +1,32 @@
+import {cn} from "../../../infrastructure/utilities/utils"
+import {AppConfig} from "../../../domain/config/app.config"
+import {EdgeSection} from "./edge-section"
+
+export interface ViewStatusProps {
+    className?: string
+    children?: React.ReactNode
+    fixed?: boolean
+    breadcrumb?: React.ReactNode
+}
+
+export function ViewStatus({className, children, fixed = true, breadcrumb}: ViewStatusProps) {
+    return (
+        <footer className={cn(
+            "",
+            className,
+            fixed
+                ? "fixed bottom-0 left-0 w-screen flex flex-row items-center gap-4 px-4 pb-4 pt-6 z-3 backdrop-blur-xl mask-[linear-gradient(to_top,background_40%,transparent_100%)]"
+                : "flex flex-row items-center gap-4 p-4"
+        )}>
+            <EdgeSection className={"py-1 p-3"}>
+                {breadcrumb}
+            </EdgeSection>
+            <div className="flex-auto flex flex-row justify-end items-center">
+                {children}
+            </div>
+            <EdgeSection className="justify-end text-muted-foreground text-xs py-1 p-3">
+                © {AppConfig.COPYRIGHT_YEAR} {AppConfig.APP_NAME}
+            </EdgeSection>
+        </footer>
+    )
+}

package/src/presentation/themes/katon/view-wrapper.tsx

@@ -0,0 +1,15 @@
+"use client"
+
+import React from "react"
+
+export interface ViewWrapperProps {
+    children: React.ReactNode
+}
+
+export function ViewWrapper({children}: ViewWrapperProps) {
+    return (
+        <div className="relative max-w-screen w-full min-h-[100dvh-64px] flex flex-col md:flex-row gap-0 pb-24">
+            {children}
+        </div>
+    )
+}

package/src/presentation/themes/katon/view.tsx

@@ -0,0 +1,42 @@
+"use client"
+
+import type React from "react"
+import {ViewWrapper} from "./view-wrapper"
+import {ViewHelmet} from "./view-helmet"
+import {ViewFrame} from "./view-frame"
+import {ViewStatus} from "./view-status"
+
+export interface ScreenViewProps {
+    children: React.ReactNode
+}
+
+export const View: React.FC<ScreenViewProps> & {
+    Wrapper: typeof ViewWrapper
+    Helmet: typeof ViewHelmet
+    Frame: typeof ViewFrame
+    Status: typeof ViewStatus
+} = Object.assign(
+    function View({children}: ScreenViewProps) {
+        return (
+            <div className="relative max-w-screen w-full min-h-screen h-full">
+                {/* back */}
+                <div className="fixed inset-0 z-0 overflow-hidden pointer-events-none">
+                    <div className="view-component-effects effect-1" />
+                    <div className="view-component-effects effect-2" />
+                    <div className="view-component-effects effect-3" />
+                </div>
+
+                {/* fore */}
+                <div className="static max-w-screen w-full min-h-screen h-full flex flex-col gap-0 z-1">
+                    {children}
+                </div>
+            </div>
+        )
+    },
+    {
+        Wrapper: ViewWrapper,
+        Helmet: ViewHelmet,
+        Frame: ViewFrame,
+        Status: ViewStatus,
+    }
+)

package/src/presentation/ui/accordion-multiselect.tsx

@@ -0,0 +1,206 @@
+"use client"
+
+import * as React from "react"
+import * as AccordionPrimitive from "@radix-ui/react-accordion"
+import { Check, ChevronDown } from "lucide-react"
+import { cn } from "../../infrastructure/utilities/utils"
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
+
+// --- Architecture: Primitives (Unstyled but behaving) ---
+// We are using Radix UI Accordion and Checkbox primitives directly.
+// This component acts as a "Component" layer in the architecture:
+// - Wraps primitives with styling
+// - Supports controlled/uncontrolled usage
+// - Uses data-attributes for state and slots for targeting
+
+// --- Context ---
+// We use a context to share selection state between the root and items/checkboxes
+// This allows for the Compound Component pattern.
+interface AccordionMultiselectContextValue {
+  selectedValues: string[]
+  onSelectionChange: (value: string, checked: boolean) => void
+}
+
+const AccordionMultiselectContext = React.createContext<AccordionMultiselectContextValue | null>(null)
+
+function useAccordionMultiselect() {
+  const context = React.useContext(AccordionMultiselectContext)
+  if (!context) {
+    throw new Error("AccordionMultiselect subcomponents must be used within AccordionMultiselect")
+  }
+  return context
+}
+
+// --- Components ---
+
+// We can't directly extend AccordionPrimitive.Root because it has specific props that might conflict or be typed in a way TS doesn't like for intersection
+// Instead, we'll define our props and intersect with the primitive's props, excluding what we override/don't need if necessary
+type AccordionRootProps = React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Root>
+
+interface AccordionMultiselectProps
+  extends Omit<AccordionRootProps, "type" | "value" | "defaultValue" | "onValueChange"> {
+  value?: string[]
+  onValueChange?: (value: string[]) => void
+  defaultValue?: string[]
+}
+
+function AccordionMultiselect({
+  value: controlledValue,
+  onValueChange,
+  defaultValue = [],
+  className,
+  children,
+  ...props
+}: AccordionMultiselectProps) {
+  // Controlled/Uncontrolled pattern
+  const [internalValue, setInternalValue] = React.useState<string[]>(defaultValue)
+  const isControlled = controlledValue !== undefined
+  const selectedValues = isControlled ? controlledValue : internalValue
+
+  const handleSelectionChange = React.useCallback(
+    (value: string, checked: boolean) => {
+      let newValues: string[]
+      if (checked) {
+        newValues = [...selectedValues, value]
+      } else {
+        newValues = selectedValues.filter(id => id !== value)
+      }
+
+      if (!isControlled) {
+        setInternalValue(newValues)
+      }
+      onValueChange?.(newValues)
+    },
+    [selectedValues, isControlled, onValueChange],
+  )
+
+  return (
+    <AccordionMultiselectContext.Provider value={{ selectedValues, onSelectionChange: handleSelectionChange }}>
+      <AccordionPrimitive.Root
+        type="multiple"
+        data-slot="accordion-multiselect-root"
+        className={cn("w-full space-y-4", className)}
+        {...props}
+      >
+        {children}
+      </AccordionPrimitive.Root>
+    </AccordionMultiselectContext.Provider>
+  )
+}
+
+function AccordionMultiselectItem({
+  className,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>) {
+  return (
+    <AccordionPrimitive.Item
+      data-slot="accordion-multiselect-item"
+      className={cn("border-b-0", className)}
+      {...props}
+    />
+  )
+}
+
+function AccordionMultiselectTrigger({
+  className,
+  children,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>) {
+  return (
+    <AccordionPrimitive.Header className="flex">
+      <AccordionPrimitive.Trigger
+        data-slot="accordion-multiselect-trigger"
+        className={cn(
+          "flex flex-1 items-center justify-between py-2 font-semibold text-base transition-all hover:no-underline [&[data-state=open]>svg]:rotate-180 cursor-pointer",
+          className,
+        )}
+        {...props}
+      >
+        {children}
+        <ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200 text-muted-foreground" />
+      </AccordionPrimitive.Trigger>
+    </AccordionPrimitive.Header>
+  )
+}
+
+function AccordionMultiselectContent({
+  className,
+  children,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>) {
+  return (
+    <AccordionPrimitive.Content
+      data-slot="accordion-multiselect-content"
+      className="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+      {...props}
+    >
+      <div className={cn("pt-2 pb-4 flex flex-col gap-2", className)}>{children}</div>
+    </AccordionPrimitive.Content>
+  )
+}
+
+// --- Sub-components for Item Options ---
+
+interface AccordionMultiselectOptionProps extends React.HTMLAttributes<HTMLDivElement> {
+  value: string
+  showCheckbox?: boolean
+  children: React.ReactNode
+}
+
+function AccordionMultiselectOption({
+  value,
+  showCheckbox = false,
+  className,
+  onClick,
+  children,
+  ...props
+}: AccordionMultiselectOptionProps) {
+  const { selectedValues, onSelectionChange } = useAccordionMultiselect()
+  const isSelected = selectedValues.includes(value)
+
+  const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {
+    onSelectionChange(value, !isSelected)
+    onClick?.(e)
+  }
+
+  return (
+    <div
+      data-slot="accordion-multiselect-option"
+      data-state={isSelected ? "checked" : "unchecked"}
+      className={cn(
+        "flex items-start space-x-3 rounded-md group cursor-pointer transition-all border border-transparent",
+        "hover:border-foreground/10 data-[state=checked]:bg-foreground/6",
+        className,
+      )}
+      onClick={handleClick}
+      {...props}
+    >
+      {showCheckbox && (
+        <div className="flex items-center h-5 mt-1">
+          <CheckboxPrimitive.Root
+            id={value}
+            checked={isSelected}
+            onCheckedChange={checked => onSelectionChange(value, checked as boolean)}
+            onClick={e => e.stopPropagation()}
+            className={cn(
+              "peer h-4 w-4 shrink-0 rounded-[3px] border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+            )}
+          >
+            <CheckboxPrimitive.Indicator className={cn("flex items-center justify-center text-current")}>
+              <Check className="h-4 w-4" />
+            </CheckboxPrimitive.Indicator>
+          </CheckboxPrimitive.Root>
+        </div>
+      )}
+      <div className="flex-1">{children}</div>
+    </div>
+  )
+}
+
+export {
+  AccordionMultiselect,
+  AccordionMultiselectItem,
+  AccordionMultiselectTrigger,
+  AccordionMultiselectContent,
+  AccordionMultiselectOption,
+}