@vertesia/ui 1.0.0-dev.20260203.130115Z → 1.0.0-dev.20260227.112605Z

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vertesia/ui",
-  "version": "1.0.0-dev.20260203.130115Z",
+  "version": "1.0.0-dev.20260227.112605Z",
   "description": "Vertesia UI components and and hooks",
   "type": "module",
   "main": "./lib/index.js",
@@ -32,6 +32,14 @@
     "@radix-ui/react-slot": "^1.2.2",
     "@radix-ui/react-tabs": "^1.1.11",
     "@radix-ui/react-tooltip": "^1.2.6",
+    "@radix-ui/react-dismissable-layer": "^1.1.11",
+    "@radix-ui/react-focus-guards": "^1.1.3",
+    "@radix-ui/react-focus-scope": "^1.1.7",
+    "@radix-ui/react-portal": "^1.1.9",
+    "aria-hidden": "^1.2.6",
+    "react-remove-scroll": "^2.7.1",
+    "react-remove-scroll-bar": "^2.3.8",
+    "react-style-singleton": "^2.2.3",
     "ajv": "^8.17.1",
     "ajv-formats": "^3.0.1",
     "class-variance-authority": "^0.7.1",
@@ -39,12 +47,12 @@
     "cmdk": "^1.1.1",
     "dayjs": "^1.11.19",
     "debounce": "^2.2.0",
-    "fast-xml-parser": "^5.2.3",
+    "dompurify": "^3.3.1",
+    "fast-xml-parser": "^5.3.6",
     "firebase": "^10.12.2",
     "framer-motion": "^12.23.12",
-    "html-to-image": "^1.11.13",
-    "json-schema": "^0.4.0",
     "jwt-decode": "^4.0.0",
+    "katex": "^0.16.28",
     "lodash-es": "^4.17.23",
     "lucide-react": "^0.562.0",
     "mermaid": "^11.4.0",
@@ -60,18 +68,23 @@
     "react-pdf": "^10.2.0",
     "react-resizable-panels": "^3.0.6",
     "react-vega": "^8.0.0",
-    "recharts": "^3.5.0",
+    "rehype-katex": "^7.0.1",
+    "remark-definition-list": "^2.0.0",
+    "remark-directive": "^4.0.0",
     "remark-gfm": "^4.0.1",
+    "remark-github-blockquote-alert": "^2.0.0",
+    "remark-math": "^6.0.0",
+    "remark-supersub": "^1.0.0",
     "tailwind-merge": "^3.4.0",
     "ts-md5": "^1.3.1",
     "unist-util-visit": "^5.0.0",
     "vega": "^6.2.0",
     "vega-embed": "^7.1.0",
     "vega-lite": "^6.4.1",
-    "@vertesia/common": "1.0.0-dev.20260203.130115Z",
-    "@vertesia/fusion-ux": "1.0.0-dev.20260203.130115Z",
-    "@vertesia/client": "1.0.0-dev.20260203.130115Z",
-    "@vertesia/json": "1.0.0-dev.20260203.130115Z"
+    "@vertesia/client": "1.0.0-dev.20260227.112605Z",
+    "@vertesia/common": "1.0.0-dev.20260227.112605Z",
+    "@vertesia/fusion-ux": "1.0.0-dev.20260227.112605Z",
+    "@vertesia/json": "1.0.0-dev.20260227.112605Z"
   },
   "devDependencies": {
     "@eslint/js": "^9.27.0",
@@ -79,7 +92,6 @@
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^16.0.1",
     "@types/hast": "^3.0.4",
-    "@types/json-schema": "^7.0.15",
     "@types/lodash-es": "^4.17.12",
     "@types/node": "^22.19.2",
     "@types/papaparse": "^5.5.2",
@@ -91,8 +103,8 @@
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^5.2.0",
     "rimraf": "^6.1.2",
-    "rollup": "^4.53.3",
-    "rollup-plugin-terser": "^7.0.2",
+    "rollup": "^4.59.0",
+    "@rollup/plugin-terser": "^0.4.4",
     "typescript": "^5.9.3",
     "typescript-eslint": "^8.49.0",
     "vitest": "^4.0.16"

package/src/core/components/SidePanel.tsx

@@ -85,9 +85,10 @@ export function SidePanel({ isOpen, title, onClose, children, panelWidth = 768,
                                                 <Minus className="rotate-90 font-semibold" strokeWidth={4} />
                                             </div>
                                         )}
-                                        <div className={`flex-1 flex flex-col overflow-y-scroll gap-4 bg-background py-2 shadow-xl ${className}`}>
+                                        <div className={`flex-1 flex flex-col bg-background shadow-xl ${className}`}>
+                                            {/* Sticky header */}
                                             {title && (
-                                                <div className="px-2 sm:px-4">
+                                                <div className="sticky top-0 z-10 bg-background px-2 sm:px-4 py-2 border-b">
                                                     <div className="flex items-start justify-between">
                                                         <h2 className="w-full text-base font-semibold leading-6">
                                                             <div className="text-2xl">{title ?? ""}</div>
@@ -99,7 +100,8 @@ export function SidePanel({ isOpen, title, onClose, children, panelWidth = 768,
                                                 </div>
                                             )}
 
-                                            <div className="px-2 sm:px-4">
+                                            {/* Scrollable content */}
+                                            <div className="flex-1 overflow-y-auto px-2 sm:px-4 py-4">
                                                 {children}
                                             </div>
                                         </div>

package/src/core/components/Switch.tsx

@@ -17,7 +17,7 @@ interface SwitchProps {
 export function Switch({ value, onChange, size = 'md', children, className, disabled }: SwitchProps) {
     const sizeClass = sizes[size];
     return (
-        <UISwitch checked={value} onChange={() => onChange(!value)} className={`flex items-center ${className} ${disabled ? 'cursor-not-allowed opacity-50' : 'hover:cursor-pointer'}`}>
+        <UISwitch checked={value} onChange={() => onChange(!value)} disabled={disabled} className={`flex items-center ${className} ${disabled ? 'cursor-not-allowed opacity-50' : 'hover:cursor-pointer'}`}>
             <div className={`${value ? 'bg-primary' : 'bg-muted/50'} relative inline-flex ${sizeClass[0]} items-center rounded-full border-1`}>
                 <span
                     className={`${value ? sizeClass[2] : 'translate-x-1'

package/src/core/components/shadcn/Panel.tsx

@@ -1,5 +1,7 @@
+import { useState } from "react"
 import { VTooltip } from "./tooltip"
-import { Info } from "lucide-react"
+import { ChevronDown, ChevronUp, Info } from "lucide-react"
+import { Button } from "./button"
 
 interface PanelProps {
     title: string | React.ReactNode
@@ -8,9 +10,12 @@ interface PanelProps {
     children: React.ReactNode
     footer?: string | React.ReactNode
     className?: string
+    collapsible?: boolean
+    defaultCollapsed?: boolean
 }
 
-export function Panel({ children, action, title, description, footer, className }: PanelProps) {
+export function Panel({ children, action, title, description, footer, className, collapsible, defaultCollapsed = false }: PanelProps) {
+    const [isCollapsed, setIsCollapsed] = useState(defaultCollapsed);
 
     return (
         <div className={`p-4 flex flex-col gap-2 rounded-sm border bg-card ${className}`}>
@@ -21,10 +26,21 @@ export function Panel({ children, action, title, description, footer, className
                     </div>
                     {description && <VTooltip description={description}><Info className="size-4 text-muted" /></VTooltip>}
                 </div>
-                {action}
+                <div className="flex gap-2 items-center">
+                    {action}
+                    {
+                        collapsible && (
+                            <Button variant="ghost" size="icon" onClick={() => setIsCollapsed(!isCollapsed)}>
+                                {isCollapsed ?
+                                    <ChevronDown className="size-4" /> :
+                                    <ChevronUp className="size-4" />
+                                }
+                            </Button>
+                        )
+                    }
+                </div>
             </div>
-
-            {children}
+            {!isCollapsed && children}
             {footer &&
                 <div className="border-t border-muted flex flex-col-2 text-sm pt-4">
                     {footer}

package/src/core/components/shadcn/filters/filterBar.tsx

@@ -26,36 +26,38 @@ interface FilterProviderProps {
   children: React.ReactNode;
 }
 
+// Syncs filters ↔ URL. On mount, captures the initial URL param and restores matching filters
+// incrementally as filterGroups loads. URL writes are blocked until the first filterGroups load
+// so the address bar doesn't flicker. Filters not matching any filterGroup are silently dropped
+// (prevents cross-page URL contamination, e.g. a modal inheriting a parent page's filters).
+
+// Parse format with array indicators: filterName:value or filterName:[value1,value2]
 const FilterProvider = ({ filters, setFilters, filterGroups, children }: FilterProviderProps) => {
   const url = new URL(window.location.href);
   const searchParams = url.searchParams;
-  const [hasInitialized, setHasInitialized] = React.useState(false);
+  const [initialFiltersParam] = React.useState(() => new URLSearchParams(window.location.search).get('filters'));
+  const processedUrlFilters = React.useRef<Set<string>>(new Set());
+  const hasRestoredFromUrl = React.useRef(!initialFiltersParam);
 
   useEffect(() => {
+    if (!hasRestoredFromUrl.current) return;
     try {
       const params = new URLSearchParams(searchParams.toString());
       if (filters.length > 0) {
-        // Convert filters to format with array indicators: filterName:value,value;filterName2:value
-        // Arrays are prefixed with []: filterName:[value1,value2]
         const filterString = filters.map(filter => {
           let values;
           if (filter.type === 'stringList' && Array.isArray(filter.value) && typeof filter.value[0] === 'string') {
-            // Handle stringList with direct string array - always array format
             values = `[${(filter.value as string[]).map(item => encodeURIComponent(item)).join(',')}]`;
           } else if (Array.isArray(filter.value)) {
             if (filter.multiple) {
-              // Handle multiple filters - always use array format for multiple=true
               values = `[${filter.value.map((item: any) => encodeURIComponent(item.value || item || '')).join(',')}]`;
             } else if (filter.value.length > 1) {
-              // Handle multiple values for non-multiple filters
               values = `[${filter.value.map((item: any) => encodeURIComponent(item.value || item || '')).join(',')}]`;
             } else {
-              // Single value in array for non-multiple filter - don't use array format
               const firstValue = filter.value[0];
               if (typeof firstValue === 'string') {
                 values = encodeURIComponent(firstValue);
               } else if (typeof firstValue === 'object' && firstValue?.value !== undefined) {
-                // Handle FilterOption object
                 values = encodeURIComponent(String(firstValue.value));
               } else {
                 values = encodeURIComponent(String(firstValue || ''));
@@ -79,91 +81,78 @@ const FilterProvider = ({ filters, setFilters, filterGroups, children }: FilterP
   }, [filters]);
 
   useEffect(() => {
-    const filtersParam = searchParams.get('filters');
-    if (filtersParam && filterGroups.length > 0 && !hasInitialized) {
-      try {
-        // Parse format with array indicators: filterName:value or filterName:[value1,value2]
-        const filterPairs = filtersParam.split(';');
-        const parsedFilters = filterPairs.map(pair => {
-          const [encodedName, valuesString] = pair.split(':');
-          const name = decodeURIComponent(encodedName);
-
-          let values: string[];
-          // Check if it's an array format [value1,value2]
-          if (valuesString.startsWith('[') && valuesString.endsWith(']')) {
-            // Array format - remove brackets and split by comma
-            const arrayContent = valuesString.slice(1, -1); // Remove [ and ]
-            values = arrayContent ? arrayContent.split(',').map(encodedValue => decodeURIComponent(encodedValue)) : [];
-          } else {
-            // Single value format
-            values = [decodeURIComponent(valuesString)];
-          }
-
-          const group = filterGroups.find(g => g.name === name);
-          let filterValue;
+    if (!initialFiltersParam || filterGroups.length === 0) return;
+    try {
+      const filterPairs = initialFiltersParam.split(';');
+      const newFilters: Filter[] = [];
+
+      for (const pair of filterPairs) {
+        const [encodedName, valuesString] = pair.split(':');
+        const name = decodeURIComponent(encodedName);
+
+        if (processedUrlFilters.current.has(name)) continue;
+
+        const group = filterGroups.find(g => g.name === name);
+        if (!group) continue;
+
+        processedUrlFilters.current.add(name);
+
+        let values: string[];
+        if (valuesString.startsWith('[') && valuesString.endsWith(']')) {
+          const arrayContent = valuesString.slice(1, -1);
+          values = arrayContent ? arrayContent.split(',').map(encodedValue => decodeURIComponent(encodedValue)) : [];
+        } else {
+          values = [decodeURIComponent(valuesString)];
+        }
+
+        let filterValue;
+
+        if (group.type === 'stringList') {
+          filterValue = values;
+        } else if (group.type === 'text') {
+          filterValue = values.length === 1 ? [{ value: values[0], label: values[0] }] :
+            values.map(value => ({ value, label: value }));
+        } else {
+          filterValue = values.map(value => {
+            const matchingOption = group.options?.find(opt => opt.value === value);
+            let label = value;
+            if (matchingOption?.label) {
+              label = String(matchingOption.label);
+            } else if (matchingOption?.labelRenderer) {
+              label = String(matchingOption.labelRenderer(value));
+            } else if (group.labelRenderer) {
+              label = String(group.labelRenderer(value));
+            }
+            return { value, label };
+          });
+        }
 
-          if (group?.type === 'stringList') {
-            // For stringList, return direct string array
+        if (group.multiple && !valuesString.startsWith('[') && !valuesString.endsWith(']')) {
+          if (group.type === 'stringList') {
             filterValue = values;
-          } else if (group?.type === 'text') {
-            // For text, return FilterOption array (single value for text inputs)
-            filterValue = values.length === 1 ? [{ value: values[0], label: values[0] }] :
-              values.map(value => ({ value, label: value }));
-          } else {
-            // For other types, find options with labels
-            filterValue = values.map(value => {
-              const matchingOption = group?.options?.find(opt => opt.value === value);
-              let label = value;
-
-              if (matchingOption?.label) {
-                label = String(matchingOption.label);
-              } else if (matchingOption?.labelRenderer) {
-                label = String(matchingOption.labelRenderer(value));
-              } else if (group?.labelRenderer) {
-                label = String(group.labelRenderer(value));
-              }
-
-              return {
-                value,
-                label
-              };
-            });
+          } else if (!Array.isArray(filterValue)) {
+            filterValue = [filterValue];
           }
-
-          if (group?.multiple && !valuesString.startsWith('[') && !valuesString.endsWith(']')) {
-            if (group.type === 'stringList') {
-              filterValue = values;
-            } else {
-              if (!Array.isArray(filterValue)) {
-                filterValue = [filterValue];
-              }
-            }
-          }
-
-          // Fallback: if group not found but we detected array format, assume it should be multiple
-          const shouldBeMultiple = group?.multiple || (!group && valuesString.startsWith('[') && valuesString.endsWith(']'));
-
-          const filter = {
-            name,
-            type: group?.type || 'select',
-            placeholder: group?.placeholder,
-            value: filterValue,
-            multiple: shouldBeMultiple
-          };
-
-          return filter;
+        }
+
+        newFilters.push({
+          name,
+          type: group.type,
+          placeholder: group.placeholder,
+          value: filterValue,
+          multiple: group.multiple,
         });
+      }
 
-        setFilters(parsedFilters);
-        setHasInitialized(true);
-      } catch (error) {
-        setHasInitialized(true);
+      if (newFilters.length > 0) {
+        setFilters(prev => [...prev, ...newFilters]);
       }
-    } else if (filterGroups.length > 0 && !hasInitialized) {
-      // No URL params but we have groups - mark as initialized
-      setHasInitialized(true);
+
+      hasRestoredFromUrl.current = true;
+    } catch (_error) {
+      // ignore parse errors
     }
-  }, [filterGroups, hasInitialized]);
+  }, [filterGroups, initialFiltersParam]);
 
   return (
     <FilterContext.Provider value={{ filters, setFilters, filterGroups }}>
@@ -351,7 +340,7 @@ const FilterBar = ({ className }: { className?: string }) => {
   );
 };
 
-const FilterClear = ({ className }: { className?: string}) => {
+const FilterClear = ({ className }: { className?: string }) => {
   const { filters, setFilters } = React.useContext(FilterContext);
 
   const hasActiveFilters = filters.filter((filter) => filter.value?.length > 0).length > 0;

package/src/core/components/shadcn/selectBox.tsx

@@ -1,6 +1,6 @@
 import clsx from 'clsx';
 import { isEqual } from 'lodash-es';
-import { AlertTriangle, Check, ChevronsUpDown, SearchIcon, SquarePlus, X } from 'lucide-react';
+import { AlertTriangle, Check, ChevronsUpDown, LoaderCircle, SearchIcon, SquarePlus, X } from 'lucide-react';
 import { useState, useEffect, useRef, useMemo, ReactNode } from 'react';
 
 import { Popover, PopoverContent, PopoverTrigger, PopoverClose } from './popover';
@@ -28,6 +28,7 @@ export interface SelectBoxBaseProps<T> {
     inline?: boolean;
     clearIcon?: ReactNode;
     clearTitle?: string;
+    isLoading?: boolean;
     /** Show warning when value is not in options list (default: true) */
     warnOnMissingValue?: boolean;
     /** Custom warning message when value is not in options */
@@ -48,7 +49,7 @@ interface SelectBoxMultipleProps<T> extends SelectBoxBaseProps<T> {
 
 type SelectBoxProps<T> = SelectBoxSingleProps<T> | SelectBoxMultipleProps<T>;
 
-export function SelectBox<T = any>({ options, optionLabel, value, onChange, addNew, addNewLabel, disabled, filterBy, label, placeholder, className, popupClass, isClearable, border = true, multiple = false, by, inline = false, warnOnMissingValue = true, missingValueWarning = "Value not in options list, may not be valid", clearIcon, clearTitle }: Readonly<SelectBoxProps<T>>) {
+export function SelectBox<T = any>({ options, optionLabel, value, onChange, addNew, addNewLabel, disabled, filterBy, label, placeholder, className, popupClass, isClearable, border = true, multiple = false, by, inline = false, isLoading = false, warnOnMissingValue = true, missingValueWarning = "Value not in options list, may not be valid", clearIcon, clearTitle }: Readonly<SelectBoxProps<T>>) {
     const triggerRef = useRef<HTMLDivElement>(null);
     const [open, setOpen] = useState(false);
     const [width, setWidth] = useState<number>(0);
@@ -93,7 +94,7 @@ export function SelectBox<T = any>({ options, optionLabel, value, onChange, addN
     }, []);
 
     const handleTriggerClick = (e: React.MouseEvent) => {
-        if (disabled) {
+        if (disabled || isLoading) {
             e.preventDefault();
             return;
         }
@@ -205,7 +206,10 @@ export function SelectBox<T = any>({ options, optionLabel, value, onChange, addN
                 </div>
             )}
             <Command className="overflow-hidden">
-                <CommandList className={inline ? "max-h-full overflow-y-auto" : "max-h-[200px] overflow-y-auto"}>
+                <CommandList
+                    className={inline ? "max-h-full overflow-y-auto" : "max-h-[200px] overflow-y-auto"}
+                    onWheel={(e) => { e.currentTarget.scrollTop += e.deltaY; }}
+                >
                     <CommandEmpty>No result found.</CommandEmpty>
                     <CommandGroup>
                         {filteredOptions?.map((opt, index) => {
@@ -264,7 +268,10 @@ export function SelectBox<T = any>({ options, optionLabel, value, onChange, addN
                 "bg-popover p-1",
                 popupClass
             )}>
-                {renderOptionsContent()}
+                {isLoading
+                    ? <div className="flex justify-center items-center p-2 text-muted text-sm"><LoaderCircle className="size-4 animate-spin" /></div>
+                    : renderOptionsContent()
+                }
             </div>
         );
     }
@@ -277,50 +284,60 @@ export function SelectBox<T = any>({ options, optionLabel, value, onChange, addN
                     onClick={handleTriggerClick}
                     className={clsx(
                         className,
-                        border && (isMissingValue ? 'border border-destructive' : 'border border-border'),
-                        'flex flex-row gap-2 items-center justify-between p-2 rounded-md group relative [&:hover_.clear-button]:opacity-100',
-                        !disabled ? "cursor-pointer hover:bg-muted" : "cursor-not-allowed text-muted",
+                        isLoading
+                            ? 'flex justify-center items-center gap-2 border border-border rounded-md p-2 text-muted text-sm'
+                            : clsx(
+                                border && (isMissingValue ? 'border border-destructive' : 'border border-border'),
+                                'flex flex-row gap-2 items-center justify-between p-2 rounded-md group relative [&:hover_.clear-button]:opacity-100',
+                                !disabled ? "cursor-pointer hover:bg-muted" : "cursor-not-allowed text-muted",
+                            ),
                     )}
                 >
-                    <div
-                        className={clsx(
-                            "flex flex-col w-full rounded-md text-sm min-h-6 items-center justify-center truncate",
-                            !disabled && "",
-                            isClearable && value && (Array.isArray(value) ? value.length > 0 : true) && "pr-6"
-                        )}
-                    >
-                        {label && <div className='w-full text-left text-xs font-semibold'>{label}</div>}
-                        <div className={clsx('w-full text-left ', !disabled && '', isMissingValue && 'text-destructive')}>
-                            {isMissingValue && (
-                                <VTooltip description={missingValueWarning} placement="top" asChild>
-                                    <AlertTriangle className="inline-block size-4 mr-1 -mt-0.5 cursor-help" />
-                                </VTooltip>
-                            )}
-                            {multiple ? renderMultipleValue() : renderSingleValue()}
-                        </div>
-                    </div>
-                    <div className="flex items-center gap-1 group">
-                        {isClearable && value && (Array.isArray(value) ? value.length > 0 : true) && (
-                            <Button variant={"link"} size={"icon"}
-                                disabled={disabled}
-                                alt={clearTitle || "Clear selection"}
-                                onClick={(e: { stopPropagation: () => void; }) => {
-                                    e.stopPropagation();
-                                    if (multiple) {
-                                        (onChange as (options: T[]) => void)([] as T[]);
-                                    } else {
-                                        (onChange as (option: T) => void)(undefined as any);
-                                    }
-                                }}
-                                className="cursor-pointer hover:bg-muted/20 clear-button opacity-0 transition-opacity duration-200 rounded p-1"
+                    {isLoading ? (
+                        <LoaderCircle className="size-4 animate-spin" />
+                    ) : (
+                        <>
+                            <div
+                                className={clsx(
+                                    "flex flex-col w-full rounded-md text-sm min-h-6 items-center justify-center truncate",
+                                    !disabled && "",
+                                    isClearable && value && (Array.isArray(value) ? value.length > 0 : true) && "pr-6"
+                                )}
                             >
-                                {clearIcon ? clearIcon : <X className="size-4" />}
-                            </Button>
-                        )}
-                        {!disabled && (
-                            <ChevronsUpDown className="size-4 opacity-50" />
-                        )}
-                    </div>
+                                {label && <div className='w-full text-left text-xs font-semibold'>{label}</div>}
+                                <div className={clsx('w-full text-left ', !disabled && '', isMissingValue && 'text-destructive')}>
+                                    {isMissingValue && (
+                                        <VTooltip description={missingValueWarning} placement="top" asChild>
+                                            <AlertTriangle className="inline-block size-4 mr-1 -mt-0.5 cursor-help" />
+                                        </VTooltip>
+                                    )}
+                                    {multiple ? renderMultipleValue() : renderSingleValue()}
+                                </div>
+                            </div>
+                            <div className="flex items-center gap-1 group">
+                                {isClearable && value && (Array.isArray(value) ? value.length > 0 : true) && (
+                                    <Button variant={"link"} size={"icon"}
+                                        disabled={disabled}
+                                        alt={clearTitle || "Clear selection"}
+                                        onClick={(e: { stopPropagation: () => void; }) => {
+                                            e.stopPropagation();
+                                            if (multiple) {
+                                                (onChange as (options: T[]) => void)([] as T[]);
+                                            } else {
+                                                (onChange as (option: T) => void)(undefined as any);
+                                            }
+                                        }}
+                                        className="cursor-pointer hover:bg-muted/20 clear-button opacity-0 transition-opacity duration-200 rounded p-1"
+                                    >
+                                        {clearIcon ? clearIcon : <X className="size-4" />}
+                                    </Button>
+                                )}
+                                {!disabled && (
+                                    <ChevronsUpDown className="size-4 opacity-50" />
+                                )}
+                            </div>
+                        </>
+                    )}
                 </div>
             </PopoverTrigger>
 

package/src/core/components/shadcn/tabs.tsx

@@ -12,6 +12,7 @@ export interface Tab {
     label: ReactNode;
     content: ReactNode;
     disabled?: boolean;
+    is_allowed?: boolean;
 }
 
 const TabsContext = React.createContext<{
@@ -57,6 +58,12 @@ const Tabs = ({
   variant = "tabs",
   updateHash = true
 }: TabsProps) => {
+  // Filter tabs based on is_allowed (undefined or true means visible)
+  const visibleTabs = React.useMemo(() =>
+    tabs.filter(tab => tab.is_allowed === undefined || tab.is_allowed === true),
+    [tabs]
+  );
+
   // Initialize value
   const [value, setValue] = React.useState(() => {
     // First check if current is provided
@@ -68,14 +75,14 @@ const Tabs = ({
     // Then check hash
     const hash = window.location.hash;
     const currentTab = hash ? hash.substring(1) : undefined;
-    
-    // Check if the tab from hash exists in tabs
-    if (currentTab && tabs.some(tab => tab.name === currentTab)) {
+
+    // Check if the tab from hash exists in visible tabs
+    if (currentTab && visibleTabs.some(tab => tab.name === currentTab)) {
       return currentTab;
     }
-    
-    // Fall back to default or first tab
-    return defaultValue || tabs[0]?.name;
+
+    // Fall back to default or first visible tab
+    return defaultValue || visibleTabs[0]?.name;
   });
 
   // Update when current prop changes (but don't create a loop)
@@ -93,9 +100,9 @@ const Tabs = ({
     const handleHashChange = () => {
       const hash = window.location.hash;
       const currentTab = hash ? hash.substring(1) : undefined;
-      
-      // Only update if the tab exists in tabs
-      if (currentTab && tabs.some(tab => tab.name === currentTab)) {
+
+      // Only update if the tab exists in visible tabs
+      if (currentTab && visibleTabs.some(tab => tab.name === currentTab)) {
         setValue(currentTab);
       } else if (!hash && defaultValue) {
         // If no hash, fall back to default
@@ -108,7 +115,7 @@ const Tabs = ({
 
     window.addEventListener('hashchange', handleHashChange);
     return () => window.removeEventListener('hashchange', handleHashChange);
-  }, [current, tabs, defaultValue]);
+  }, [current, visibleTabs, defaultValue]);
 
   const handleValueChange = (newValue: string) => {
     setValue(newValue);
@@ -131,9 +138,9 @@ const Tabs = ({
   }, [handleValueChange]);
 
   return (
-    <TabsContext.Provider value={{ tabs, size: fullWidth ? tabs.length : 0, current: value, setTab, responsive: responsive, variant, updateHash }}>
+    <TabsContext.Provider value={{ tabs: visibleTabs, size: fullWidth ? visibleTabs.length : 0, current: value, setTab, responsive: responsive, variant, updateHash }}>
       <TabsPrimitive.Root
-        defaultValue={value || tabs[0]?.name}
+        defaultValue={value || visibleTabs[0]?.name}
         value={value}
         onValueChange={handleValueChange}
         className={className}
@@ -187,6 +194,7 @@ const TabsBar = ({ className }: { className?: string }) => {
       )}
       <TabsList size={size} variant={variant} className={cn((fullWidth ? "w-full" : ""), className, (responsive ? "hidden lg:flex" : ""))}>
         {tabs.map((tab) => (
+          
           <TabsTrigger
             key={tab.name}
             value={tab.name}