refactoring some files.

src/components/wrappers/common/button/ButtonWithConfirm/ButtonWithConfirm.tsx

@@ -0,0 +1,45 @@
+"use client"
+import {Button} from "@/components/ui/button";
+import {useState} from "react";
+import {Loader2} from "lucide-react";
+
+export type VariantButton = {
+    secondary: string
+    default: string
+    outline: string
+    ghost: string
+    link: string
+    destructive: string
+}
+
+export type ButtonWithConfirmProps = {
+    icon?: any,
+    text: string,
+    variant?:  keyof VariantButton ,
+    className?: string,
+    onClick?: () => void,
+    isPending? : boolean
+};
+
+export const ButtonWithConfirm = (props: ButtonWithConfirmProps) => {
+    const [isConfirming, setIsConfirming] = useState(false)
+    return(
+        <Button
+            onClick={() => {
+                if (isConfirming) {
+                    props.onClick()
+                } else {
+                    setIsConfirming(true);
+                }
+            }}
+            variant={props.variant ? props.variant : "default"}
+            className={props.className}
+        >
+            {props.isPending && <Loader2 className="animate-spin mr-4" size={16}/>}
+            {isConfirming ? "Are you sure ?" : `${props.text}`}
+            <>
+                {props.icon ? props.icon : null}
+            </>
+        </Button>
+    )
+}

src/components/wrappers/common/button/ButtonWithLoading/ButtonWithLoading.tsx

@@ -0,0 +1,59 @@
+"use client"
+import {Button} from "@/components/ui/button";
+import {ButtonHTMLAttributes, useState} from "react";
+import {Loader2} from "lucide-react";
+
+export type VariantButton = {
+    secondary: string
+    default: string
+    outline: string
+    ghost: string
+    link: string
+    destructive: string
+}
+export type sizeButton = {
+    default :string,
+    icon: string
+    sm: string
+    lg: string
+}
+
+export type ButtonWithConfirmProps = {
+    icon?: any,
+    text: string,
+    variant?: keyof VariantButton,
+    className?: string,
+    onClick: () => void,
+    isPending?: boolean
+    size: keyof sizeButton
+};
+
+export const ButtonWithLoading = ({
+                                      icon,
+                                      text,
+                                      variant,
+                                      className,
+                                      onClick,
+                                      isPending,
+                                      size,
+                                      ...props // catch all remaining props
+                                  }: ButtonWithConfirmProps & ButtonHTMLAttributes<HTMLButtonElement>) => {
+    return (
+        <Button
+            onClick={() => {
+                onClick()
+            }}
+            variant={variant ? variant : "default"}
+            className={className}
+            {...props} // forward the remaining props to the Button component
+            size={size || "default"}
+
+        >
+            {isPending && <Loader2 className="animate-spin mr-4" size={16}/>}
+            {text}
+            <>
+                {icon ? icon : null}
+            </>
+        </Button>
+    )
+}

src/components/wrappers/common/button/copy-button.tsx

@@ -0,0 +1,45 @@
+"use client"
+
+import {useEffect, useState} from "react";
+import {CheckIcon, ClipboardIcon, Copy} from "lucide-react";
+import {Button, buttonVariants} from "@/components/ui/button";
+import {cn} from "@/lib/utils";
+import {useTranslations} from "use-intl";
+
+
+export async function copyToClipboardWithMeta(value: string) {
+    navigator.clipboard.writeText(value)
+}
+
+
+export type CopyButtonProps = {
+    value: string
+}
+
+
+export const CopyButton = (props: CopyButtonProps) => {
+
+    const {value} = props
+
+    const [hasCopied, setHasCopied] = useState(false)
+
+    useEffect(() => {
+        setTimeout(() => {
+            setHasCopied(false)
+        }, 2000)
+    }, [hasCopied])
+
+    return (
+        <Button
+            // className={cn(buttonVariants({size: "sm"}))}
+            onClick={() => {
+                copyToClipboardWithMeta(value)
+                setHasCopied(true)
+            }}
+            {...props}
+        >
+            <span className="mr-2">Copy</span>
+            {hasCopied ? <CheckIcon/> : <Copy size="18"/>}
+        </Button>
+    )
+}

src/components/wrappers/common/combobox.tsx

@@ -0,0 +1,190 @@
+"use client"
+
+import {useEffect, useState} from "react";
+
+import {Check, ChevronDown, KeyRound} from "lucide-react"
+
+import {cn} from "@/lib/utils"
+import {Button} from "@/components/ui/button"
+import {
+    Command,
+    CommandEmpty,
+    CommandGroup,
+    CommandInput,
+    CommandItem,
+    CommandList,
+} from "@/components/ui/command"
+import {
+    Popover,
+    PopoverContent,
+    PopoverTrigger,
+} from "@/components/ui/popover"
+import {FormControl} from "@/components/ui/form";
+import {SidebarMenuButton} from "@/components/ui/sidebar";
+import {Separator} from "@/components/ui/separator";
+import {AgentModalKey} from "@/components/wrappers/dashboard/agent/AgentModalKey/AgentModalKey";
+import {CreateOrganizationModal} from "@/components/wrappers/dashboard/Organization/create-organisation-modal";
+
+export type comboBoxProps = {
+    values: Array<{ value: string, label: string }>
+    defaultValue?: string
+    onValueChange?: any
+    searchField?: boolean
+    sideBar?: boolean
+}
+
+
+export function ComboBox(props: comboBoxProps) {
+
+    const {
+        values: choices,
+        defaultValue: defaultChoice = "",
+        onValueChange,
+        searchField = false,
+        sideBar = false
+    } = props;
+
+    const [value, setValue] = useState<string>()
+
+    useEffect(() => {
+        setValue(defaultChoice)
+    }, [defaultChoice])
+
+    const [open, setOpen] = useState(false)
+
+    return (
+        <Popover open={open} onOpenChange={setOpen}>
+            <PopoverTrigger asChild>
+                {sideBar ?
+                    <SidebarMenuButton>
+                        {value
+                            ? choices.find((choice) => choice.value === value)?.label
+                            : "Select choice..."}
+                        <ChevronDown className="ml-auto"/>
+                    </SidebarMenuButton>
+                    :
+                    <Button
+                        variant="outline"
+                        role="combobox"
+                        aria-expanded={open}
+                        className="w-full justify-between"
+                    >
+                        {value
+                            ? choices.find((choice) => choice.value === value)?.label
+                            : "Select choice..."}
+                        <ChevronDown className="opacity-50"/>
+                    </Button>
+                }
+
+
+            </PopoverTrigger>
+            <PopoverContent className="p-0 popover-content-width-full">
+                <Command>
+                    {searchField ? <CommandInput placeholder="Search choice..." className="h-9"/> : null}
+                    <CommandList>
+                        <CommandEmpty>No choice found.</CommandEmpty>
+                        <CommandGroup>
+                            {choices.map((choice) => (
+                                <CommandItem
+                                    key={choice.value}
+                                    value={choice.value}
+                                    onSelect={(currentValue) => {
+                                        setValue(currentValue)
+                                        onValueChange(currentValue)
+                                        setOpen(false)
+                                    }}
+                                >
+                                    {choice.label}
+                                    <Check
+                                        className={cn(
+                                            "ml-auto",
+                                            value === choice.value ? "opacity-100" : "opacity-0"
+                                        )}
+                                    />
+                                </CommandItem>
+                            ))}
+                        </CommandGroup>
+                    </CommandList>
+                </Command>
+                <Separator/>
+                {sideBar ?
+                    <CreateOrganizationModal>
+                        <SidebarMenuButton>
+                            + Create new organization
+                        </SidebarMenuButton>
+                    </CreateOrganizationModal>
+                    : null}
+            </PopoverContent>
+        </Popover>
+    )
+}
+
+
+export type comboBoxFormItemProps = comboBoxProps & {
+    value: any
+    name: any
+    onChange: any
+};
+
+/** Combobox to use when working with zodForm. */
+export function ComboBoxFormItem(props: comboBoxFormItemProps) {
+
+    const {values: choices, searchField = false, value, name, onChange} = props;
+
+    const [open, setOpen] = useState(false)
+
+    return (
+        <Popover open={open} onOpenChange={setOpen}>
+            <PopoverTrigger asChild>
+                <FormControl>
+                    <Button
+                        variant="outline"
+                        role="combobox"
+                        aria-expanded={open}
+                        className={cn(
+                            "w-full justify-between",
+                            !value && "text-muted-foreground"
+                        )}
+                    >
+                        {value
+                            ? choices.find(
+                                (choice) => choice.value === value
+                            )?.label
+                            : `Select ${name}`}
+                        <ChevronDown className="opacity-50"/>
+                    </Button>
+                </FormControl>
+            </PopoverTrigger>
+            <PopoverContent className="p-0 popover-content-width-full">
+                <Command>
+                    {searchField ? <CommandInput placeholder="Search choice..." className="h-9"/> : null}
+                    <CommandList>
+                        <CommandEmpty>No {name} found.</CommandEmpty>
+                        <CommandGroup>
+                            {choices.map((choice) => (
+                                <CommandItem
+                                    value={choice.label}
+                                    key={choice.value}
+                                    onSelect={() => {
+                                        onChange(choice.value)
+                                        setOpen(false)
+                                    }}
+                                >
+                                    {choice.label}
+                                    <Check
+                                        className={cn(
+                                            "ml-auto",
+                                            choice.value === value
+                                                ? "opacity-100"
+                                                : "opacity-0"
+                                        )}
+                                    />
+                                </CommandItem>
+                            ))}
+                        </CommandGroup>
+                    </CommandList>
+                </Command>
+            </PopoverContent>
+        </Popover>
+    )
+}