@rebasepro/admin 0.0.1-canary.4f204c2

package/src/collection_editor/ui/collection_editor/properties/conditions/ConditionsEditor.tsx

@@ -0,0 +1,915 @@
+
+import React from "react";
+import { useFormex } from "@rebasepro/formex";
+import { IconButton, Select, SelectItem, DebouncedTextField, Typography, Chip, TextField, cls, defaultBorderMixin, Button, BooleanSwitchWithLabel , iconSize } from "@rebasepro/ui";
+import { Trash2Icon } from "lucide-react";
+import { getFieldConfig, DEFAULT_FIELD_CONFIGS } from "../../../../_cms_internals";
+import { Properties, Property, EnumValueConfig } from "@rebasepro/types";
+import { isPropertyBuilder } from "@rebasepro/common";
+import { PropertyWithId } from "../../PropertyEditView";
+import { getPropertyPaths } from "./property_paths";
+
+/**
+ * Condition types that can be configured
+ */
+const CONDITION_TYPES = [
+    { id: "disabled",
+label: "Disabled",
+description: "Disable this field when condition is true" },
+    { id: "hidden",
+label: "Hidden",
+description: "Hide this field when condition is true" },
+    { id: "required",
+label: "Required",
+description: "Make this field required when condition is true" },
+    { id: "readOnly",
+label: "Read Only",
+description: "Make this field read-only when condition is true" }
+] as const;
+
+type ConditionType = typeof CONDITION_TYPES[number]["id"];
+
+/**
+ * Operators for building conditions with their applicable data types
+ */
+const OPERATORS = [
+    { id: "==",
+label: "equals",
+valueType: "any",
+applicableTo: ["string", "number", "boolean", "date"] },
+    { id: "!=",
+label: "not equals",
+valueType: "any",
+applicableTo: ["string", "number", "boolean", "date"] },
+    { id: ">",
+label: "greater than",
+valueType: "number",
+applicableTo: ["number", "date"] },
+    { id: "<",
+label: "less than",
+valueType: "number",
+applicableTo: ["number", "date"] },
+    { id: ">=",
+label: "greater or equal",
+valueType: "number",
+applicableTo: ["number", "date"] },
+    { id: "<=",
+label: "less or equal",
+valueType: "number",
+applicableTo: ["number", "date"] },
+    { id: "in",
+label: "contains",
+valueType: "any",
+applicableTo: ["array"] },
+    { id: "!in",
+label: "not contains",
+valueType: "any",
+applicableTo: ["array"] },
+    { id: "!!",
+label: "has a value",
+valueType: "none",
+applicableTo: ["string", "number", "boolean", "array", "map", "date"] },
+    { id: "!",
+label: "is empty",
+valueType: "none",
+applicableTo: ["string", "number", "boolean", "array", "map", "date"] },
+    { id: "isPast",
+label: "is in the past",
+valueType: "none",
+applicableTo: ["date"] },
+    { id: "isFuture",
+label: "is in the future",
+valueType: "none",
+applicableTo: ["date"] }
+] as const;
+
+type OperatorId = typeof OPERATORS[number]["id"];
+
+// Context fields with their types
+const CONTEXT_FIELDS = [
+    { id: "isNew",
+label: "Is New Entity",
+dataType: "boolean",
+color: "#9c27b0" },
+    { id: "entityId",
+label: "Entity ID",
+dataType: "string",
+color: "#2196f3" },
+    { id: "user.roles",
+label: "User Roles",
+dataType: "array",
+color: "#ff9800" }
+] as const;
+
+interface SimpleRule {
+    field: string;
+    operator: OperatorId;
+    value: string;
+}
+
+type LogicOperator = "and" | "or";
+
+/**
+ * A condition group can contain rules and/or nested groups
+ */
+interface ConditionGroup {
+    logic: LogicOperator;
+    rules: SimpleRule[];
+    groups?: ConditionGroup[]; // Nested groups for complex logic
+}
+
+/**
+ * Get the property at a given path.
+ * Returns undefined if the path contains a PropertyBuilder (callback).
+ */
+function getPropertyAtPath(
+    fieldPath: string,
+    collectionProperties?: Properties
+): Property | undefined {
+    if (!collectionProperties) return undefined;
+
+    const parts = fieldPath.split(".");
+    let current: Properties | undefined = collectionProperties;
+    let property: Property | undefined;
+
+    for (const part of parts) {
+        if (!current) return undefined;
+        const propertyOrBuilder = current[part] as Property | undefined;
+        if (!propertyOrBuilder) return undefined;
+
+        // Skip PropertyBuilder functions - they require runtime values
+        if (isPropertyBuilder(propertyOrBuilder)) return undefined;
+
+        property = propertyOrBuilder as Property;
+
+        if (property.type === "map" && property.properties) {
+            current = property.properties as Properties;
+        } else {
+            current = undefined;
+        }
+    }
+
+    return property;
+}
+
+/**
+ * Get the data type for a field path
+ */
+function getFieldDataType(
+    fieldPath: string,
+    collectionProperties?: Properties
+): string {
+    // Check context fields first
+    const contextField = CONTEXT_FIELDS.find(f => f.id === fieldPath);
+    if (contextField) return contextField.dataType;
+
+    const property = getPropertyAtPath(fieldPath, collectionProperties);
+    return property?.type ?? "string";
+}
+
+/**
+ * Get enum values for a property if it has them
+ */
+function getEnumValues(property: Property | undefined): EnumValueConfig[] | undefined {
+    if (!property) return undefined;
+    if (property.type === "string" && property.enum) {
+        // Normalize to array format
+        if (Array.isArray(property.enum)) {
+            return property.enum;
+        }
+        // Handle object format { key: label }
+        return Object.entries(property.enum).map(([id, label]) => ({
+            id,
+            label: typeof label === "string" ? label : (label as EnumValueConfig).label
+        }));
+    }
+    return undefined;
+}
+
+/**
+ * Get operators applicable for a given data type
+ */
+function getOperatorsForDataType(dataType: string) {
+    return OPERATORS.filter(op => {
+        const applicable = op.applicableTo as readonly string[];
+        return applicable.includes(dataType) ||
+            (applicable.includes("string") && !["number", "date", "array"].includes(dataType));
+    });
+}
+
+/**
+ * Props for a single rule row (used inside a group)
+ */
+interface RuleRowProps {
+    rule: SimpleRule;
+    onRuleChange: (rule: SimpleRule) => void;
+    onRemove: () => void;
+    disabled: boolean;
+    availableFields: string[];
+    collectionProperties?: Properties;
+    showErrors: boolean;
+    showRemoveButton: boolean;
+}
+
+/**
+ * Props for a condition group (with AND/OR logic)
+ */
+interface ConditionGroupRowProps {
+    conditionType: ConditionType;
+    group: ConditionGroup;
+    onGroupChange: (group: ConditionGroup) => void;
+    onRemove: () => void;
+    disabled: boolean;
+    availableFields: string[];
+    collectionProperties?: Properties;
+    showErrors: boolean;
+}
+
+/**
+ * Dynamic value input based on field data type and enum values
+ */
+function ConditionValueInput({
+    value,
+    onChange,
+    dataType,
+    enumValues,
+    disabled,
+    operator
+}: {
+    value: string;
+    onChange: (value: string) => void;
+    dataType: string;
+    enumValues?: EnumValueConfig[];
+    disabled: boolean;
+    operator: OperatorId;
+}) {
+    // For truthy/falsy operators, no value needed
+    if (operator === "!!" || operator === "!") {
+        return null;
+    }
+
+    // Boolean - use switch
+    if (dataType === "boolean") {
+        return (
+            <BooleanSwitchWithLabel
+                value={value === "true"}
+                size="small"
+                position="start"
+                disabled={disabled}
+                onValueChange={(newValue) => onChange(newValue ? "true" : "false")}
+            />
+        );
+    }
+
+    // Enum/string with enumValues - use select
+    if (enumValues && enumValues.length > 0) {
+        return (
+            <Select
+                value={value}
+                onValueChange={onChange}
+                disabled={disabled}
+                size="small"
+                className="min-w-[120px]"
+                placeholder="Select value">
+                {enumValues.map(ev => (
+                    <SelectItem key={ev.id} value={String(ev.id)}>
+                        {ev.label}
+                    </SelectItem>
+                ))}
+            </Select>
+        );
+    }
+
+    // Number - use number input
+    if (dataType === "number") {
+        return (
+            <TextField
+                value={value}
+                type="number"
+                size="small"
+                disabled={disabled}
+                placeholder="Value"
+                className="flex-1 min-w-[80px]"
+                onChange={(e) => onChange(e.target.value)}
+            />
+        );
+    }
+
+    // Array - comma separated values
+    if (dataType === "array") {
+        return (
+            <DebouncedTextField
+                value={value}
+                onChange={(e) => onChange(e.target.value)}
+                disabled={disabled}
+                size="small"
+                placeholder="value1, value2"
+                className="flex-1 min-w-[120px]"
+            />
+        );
+    }
+
+    // Default - text input
+    return (
+        <DebouncedTextField
+            value={value}
+            onChange={(e) => onChange(e.target.value)}
+            disabled={disabled}
+            size="small"
+            placeholder="Value"
+            className="flex-1 min-w-[100px]"
+            inputClassName="min-w-[100px]"
+        />
+    );
+}
+
+function ConditionRow({
+    rule,
+    onRuleChange,
+    onRemove,
+    disabled,
+    availableFields,
+    collectionProperties,
+    showErrors,
+    showRemoveButton = true
+}: RuleRowProps & { showRemoveButton?: boolean }) {
+    const fieldDataType = getFieldDataType(rule.field, collectionProperties);
+    const applicableOperators = getOperatorsForDataType(fieldDataType);
+    const property = getPropertyAtPath(rule.field, collectionProperties);
+    const enumValues = getEnumValues(property);
+    const operator = OPERATORS.find(op => op.id === rule.operator);
+    const showValueField = operator?.valueType !== "none";
+
+    // Validation: check for incomplete condition (only show after submission attempt)
+    const isFieldMissing = !rule.field;
+    const isValueMissing = showValueField && !rule.value && rule.value !== "0";
+    const hasError = showErrors && (isFieldMissing || isValueMissing);
+
+    // Get color for the field
+    const getFieldColor = (fieldPath: string): string => {
+        const contextField = CONTEXT_FIELDS.find(f => f.id === fieldPath);
+        if (contextField) return contextField.color;
+
+        if (!collectionProperties) return "#888";
+
+        const prop = getPropertyAtPath(fieldPath, collectionProperties);
+        if (!prop) return "#888";
+        const config = getFieldConfig(prop, DEFAULT_FIELD_CONFIGS);
+        return config?.color ?? "#888";
+    };
+
+    return (
+        <div className={cls(
+            "flex items-center gap-2 p-2 rounded-md",
+            hasError ? "bg-red-50 dark:bg-red-900/20" : "bg-surface-100 dark:bg-surface-800"
+        )}>
+            {/* Field selector with colored badge */}
+            <Select
+                value={rule.field}
+                onValueChange={(value) => {
+                    const newDataType = getFieldDataType(value, collectionProperties);
+                    const newApplicableOps = getOperatorsForDataType(newDataType);
+                    // Reset operator if current one isn't applicable
+                    const newOperator = newApplicableOps.find(op => op.id === rule.operator)
+                        ? rule.operator
+                        : newApplicableOps[0]?.id ?? "==";
+                    // Reset value when changing field
+                    onRuleChange({ ...rule,
+field: value,
+operator: newOperator as OperatorId,
+value: "" });
+                }}
+                disabled={disabled}
+                size="small"
+                inputClassName="min-w-[180px]"
+                renderValue={(value) => (
+                    <div className="flex items-center gap-2">
+                        <div
+                            className="w-2 h-2 rounded-full shrink-0"
+                            style={{ backgroundColor: getFieldColor(value) }}
+                        />
+                        <span className="truncate">{value}</span>
+                    </div>
+                )}
+                placeholder="Select field">
+                {/* Context fields */}
+                {CONTEXT_FIELDS.map(field => (
+                    <SelectItem key={field.id} value={field.id}>
+                        <div className="flex items-center gap-2">
+                            <div
+                                className="w-3 h-3 rounded-full shrink-0"
+                                style={{ backgroundColor: field.color }}
+                            />
+                            <span>{field.label}</span>
+                            <Chip size="small" colorScheme="gray" className="ml-auto">
+                                {field.dataType}
+                            </Chip>
+                        </div>
+                    </SelectItem>
+                ))}
+
+                {/* Separator */}
+                {availableFields.length > 0 && (
+                    <SelectItem value="_divider" disabled>
+                        <span className="text-xs text-surface-500">─ Entity Fields ─</span>
+                    </SelectItem>
+                )}
+
+                {/* Property fields */}
+                {availableFields.map(field => {
+                    const color = getFieldColor(field);
+                    const dataType = getFieldDataType(field, collectionProperties);
+                    const prop = getPropertyAtPath(field, collectionProperties);
+                    const hasEnum = !!getEnumValues(prop);
+                    return (
+                        <SelectItem key={field} value={field}>
+                            <div className="flex items-center gap-2">
+                                <div
+                                    className="w-3 h-3 rounded-full shrink-0"
+                                    style={{ backgroundColor: color }}
+                                />
+                                <span>{field}</span>
+                                <Chip size="small" colorScheme="gray" className="ml-auto">
+                                    {hasEnum ? "enum" : dataType}
+                                </Chip>
+                            </div>
+                        </SelectItem>
+                    );
+                })}
+            </Select>
+
+            {/* Operator - filtered by field type */}
+            <Select
+                value={rule.operator}
+                onValueChange={(value) => onRuleChange({ ...rule,
+operator: value as OperatorId })}
+                disabled={disabled}
+                size="small"
+                inputClassName="min-w-[120px]">
+                {applicableOperators.map(op => (
+                    <SelectItem key={op.id} value={op.id}>
+                        {op.label}
+                    </SelectItem>
+                ))}
+            </Select>
+
+            {/* Dynamic Value input */}
+            {showValueField && (
+                <ConditionValueInput
+                    value={rule.value}
+                    onChange={(newValue) => onRuleChange({ ...rule,
+value: newValue })}
+                    dataType={fieldDataType}
+                    enumValues={enumValues}
+                    disabled={disabled}
+                    operator={rule.operator}
+                />
+            )}
+
+            {/* Remove button */}
+            {showRemoveButton && (
+                <IconButton onClick={onRemove} disabled={disabled} size="small" variant="ghost">
+                    <Trash2Icon size={iconSize.smallest}/>
+                </IconButton>
+            )}
+        </div>
+    );
+}
+
+/**
+ * A condition group row with AND/OR logic selector and multiple rules
+ */
+function ConditionGroupRow({
+    conditionType,
+    group,
+    onGroupChange,
+    onRemove,
+    disabled,
+    availableFields,
+    collectionProperties,
+    showErrors
+}: ConditionGroupRowProps) {
+    const handleLogicChange = (logic: LogicOperator) => {
+        onGroupChange({ ...group,
+logic });
+    };
+
+    const handleRuleChange = (index: number, rule: SimpleRule) => {
+        const newRules = [...group.rules];
+        newRules[index] = rule;
+        onGroupChange({ ...group,
+rules: newRules });
+    };
+
+    const handleRemoveRule = (index: number) => {
+        const newRules = group.rules.filter((_, i) => i !== index);
+        if (newRules.length === 0) {
+            onRemove();
+        } else {
+            onGroupChange({ ...group,
+rules: newRules });
+        }
+    };
+
+    const handleAddRule = () => {
+        const defaultRule: SimpleRule = {
+            field: availableFields[0] ?? "isNew",
+            operator: "==",
+            value: ""
+        };
+        onGroupChange({ ...group,
+rules: [...group.rules, defaultRule] });
+    };
+
+    return (
+        <div className={cls("p-3 bg-surface-50 dark:bg-surface-800 rounded-lg border", defaultBorderMixin)}>
+            <div className="flex items-center justify-between mb-3">
+                <div className="flex items-center gap-2">
+                    <Typography variant="label" className="font-medium text-primary">
+                        {CONDITION_TYPES.find(ct => ct.id === conditionType)?.label} when
+                    </Typography>
+                    {group.rules.length > 1 && (
+                        <Select
+                            value={group.logic}
+                            onValueChange={(value) => handleLogicChange(value as LogicOperator)}
+                            disabled={disabled}
+                            size="small"
+                            inputClassName="min-w-[100px]">
+                            <SelectItem value="and">All of these</SelectItem>
+                            <SelectItem value="or">Any of these</SelectItem>
+                        </Select>
+                    )}
+                </div>
+                <IconButton onClick={onRemove} disabled={disabled} size="small" variant="ghost">
+                    <Trash2Icon size={iconSize.smallest}/>
+                </IconButton>
+            </div>
+
+            <div className="flex flex-col gap-2">
+                {group.rules.map((rule, index) => (
+                    <React.Fragment key={index}>
+                        {index > 0 && (
+                            <Typography variant="caption" className="text-center text-secondary font-medium uppercase">
+                                {group.logic === "and" ? "AND" : "OR"}
+                            </Typography>
+                        )}
+                        <ConditionRow
+                            rule={rule}
+                            onRuleChange={(newRule: SimpleRule) => handleRuleChange(index, newRule)}
+                            onRemove={() => handleRemoveRule(index)}
+                            disabled={disabled}
+                            availableFields={availableFields}
+                            collectionProperties={collectionProperties}
+                            showErrors={showErrors}
+                            showRemoveButton={group.rules.length > 1}
+                        />
+                    </React.Fragment>
+                ))}
+            </div>
+
+            <Button
+                variant="outlined"
+                className={cls(
+                    "mt-3 w-full border-dashed",
+                    "hover:bg-surface-100 dark:hover:bg-surface-800",
+                    "text-secondary"
+                )}
+                onClick={handleAddRule}
+                disabled={disabled}
+            >
+                + Add condition
+            </Button>
+        </div>
+    );
+}
+
+/**
+ * Convert a simple rule to JSON-Logic format
+ */
+function simpleRuleToJsonLogic(rule: SimpleRule): Record<string, any> {
+    // Guard against empty field or operator which creates invalid Firestore keys
+    if (!rule.field || !rule.operator) {
+        // Return a valid default rule instead of creating invalid data
+        return { "!!": { var: "values._placeholder" } };
+    }
+
+    const varRef = { var: `values.${rule.field}` };
+
+    // Handle special fields that don't need the "values." prefix
+    const fieldVar = rule.field.startsWith("user.") || rule.field === "isNew" || rule.field === "entityId"
+        ? { var: rule.field }
+        : varRef;
+
+    if (rule.operator === "!!") {
+        return { "!!": fieldVar };
+    }
+    if (rule.operator === "!") {
+        return { "!": fieldVar };
+    }
+    if (rule.operator === "isPast") {
+        return { "isPast": fieldVar };
+    }
+    if (rule.operator === "isFuture") {
+        return { "isFuture": fieldVar };
+    }
+
+    // Parse value - try to convert to appropriate type
+    let parsedValue: string | number | boolean | null | string[] = rule.value;
+    if (rule.value === "true") parsedValue = true;
+    else if (rule.value === "false") parsedValue = false;
+    else if (rule.value === "null") parsedValue = null;
+    else if (!isNaN(Number(rule.value)) && rule.value !== "") parsedValue = Number(rule.value);
+
+    // Handle array values for "in" and "!in" operators
+    if ((rule.operator === "in" || rule.operator === "!in") && typeof parsedValue === "string") {
+        parsedValue = parsedValue.split(",").map(s => s.trim());
+    }
+
+    // Handle "!in" (not contains) - wrap "in" with negation
+    if (rule.operator === "!in") {
+        return { "!": { "in": [fieldVar, parsedValue] } };
+    }
+
+    return { [rule.operator]: [fieldVar, parsedValue] };
+}
+
+/**
+ * Try to parse JSON-Logic back to a simple rule
+ */
+function jsonLogicToSimpleRule(jsonLogic: Record<string, any>): SimpleRule | null {
+    try {
+        const operator = Object.keys(jsonLogic)[0] as OperatorId;
+        const args = jsonLogic[operator];
+
+        // Handle "!" operator - could be negation of a value or negation of "in" (not contains)
+        if (operator === "!") {
+            // Check if it's a negated "in" operation: {"!": {"in": [...]}}
+            if (typeof args === "object" && args !== null && "in" in args) {
+                const inArgs = args.in;
+                if (Array.isArray(inArgs) && inArgs.length === 2) {
+                    const [left, right] = inArgs;
+                    if (left?.var) {
+                        const field = left.var.replace(/^values\./, "");
+                        const value = Array.isArray(right)
+                            ? right.join(", ")
+                            : String(right ?? "");
+                        return { field,
+operator: "!in",
+value };
+                    }
+                }
+            }
+            // Otherwise it's a simple negation (is falsy)
+            if (args?.var) {
+                const field = args.var.replace(/^values\./, "");
+                return { field,
+operator: "!",
+value: "" };
+            }
+        }
+
+        if (operator === "!!") {
+            const varObj = args;
+            if (varObj?.var) {
+                const field = varObj.var.replace(/^values\./, "");
+                return { field,
+operator,
+value: "" };
+            }
+        }
+
+        // Handle isPast and isFuture operators
+        if (operator === "isPast" || operator === "isFuture") {
+            const varObj = args;
+            if (varObj?.var) {
+                const field = varObj.var.replace(/^values\./, "");
+                return { field,
+operator,
+value: "" };
+            }
+        }
+
+        if (Array.isArray(args) && args.length === 2) {
+            const [left, right] = args;
+            if (left?.var) {
+                const field = left.var.replace(/^values\./, "");
+                const value = Array.isArray(right)
+                    ? right.join(", ")
+                    : String(right ?? "");
+                return { field,
+operator,
+value };
+            }
+        }
+    } catch {
+        // Fall through
+    }
+    return null;
+}
+
+/**
+ * Convert a condition group to JSON-Logic format
+ */
+function groupToJsonLogic(group: ConditionGroup): Record<string, any> {
+    const ruleLogics = group.rules
+        .filter(rule => rule.field && rule.operator) // Filter out incomplete rules
+        .map(rule => simpleRuleToJsonLogic(rule));
+
+    const groupLogics = (group.groups || [])
+        .map(g => groupToJsonLogic(g));
+
+    const allLogics = [...ruleLogics, ...groupLogics];
+
+    // If only one condition, don't wrap in and/or
+    if (allLogics.length === 1) {
+        return allLogics[0];
+    }
+
+    // If no conditions, return a default true condition
+    if (allLogics.length === 0) {
+        return { "!!": { var: "values._placeholder" } };
+    }
+
+    return { [group.logic]: allLogics };
+}
+
+/**
+ * Try to parse JSON-Logic back to a condition group
+ */
+function jsonLogicToGroup(jsonLogic: Record<string, any>): ConditionGroup | null {
+    try {
+        const operator = Object.keys(jsonLogic)[0];
+
+        // Check if it's an AND or OR group
+        if (operator === "and" || operator === "or") {
+            const args = jsonLogic[operator];
+            if (Array.isArray(args)) {
+                const rules: SimpleRule[] = [];
+                const groups: ConditionGroup[] = [];
+
+                for (const arg of args) {
+                    // Check if this is a nested group
+                    const nestedOperator = Object.keys(arg)[0];
+                    if (nestedOperator === "and" || nestedOperator === "or") {
+                        const nestedGroup = jsonLogicToGroup(arg);
+                        if (nestedGroup) {
+                            groups.push(nestedGroup);
+                        }
+                    } else {
+                        // It's a simple rule
+                        const rule = jsonLogicToSimpleRule(arg);
+                        if (rule) {
+                            rules.push(rule);
+                        }
+                    }
+                }
+
+                return {
+                    logic: operator,
+                    rules,
+                    groups: groups.length > 0 ? groups : undefined
+                };
+            }
+        }
+
+        // It's a single rule - wrap in an AND group
+        const rule = jsonLogicToSimpleRule(jsonLogic);
+        if (rule) {
+            return {
+                logic: "and",
+                rules: [rule]
+            };
+        }
+    } catch {
+        // Fall through
+    }
+    return null;
+}
+
+export interface ConditionsEditorProps {
+    disabled: boolean;
+    /**
+     * Optional collection properties for populating the field selector.
+     * If not provided, a basic set of common fields is used.
+     */
+    collectionProperties?: Properties;
+}
+
+export function ConditionsEditor({ disabled, collectionProperties }: ConditionsEditorProps) {
+    const { values, setFieldValue, submitCount } = useFormex<PropertyWithId>();
+
+    // Get property paths from collection properties (includes nested maps)
+    const availableFields: string[] = collectionProperties
+        ? getPropertyPaths(collectionProperties)
+        : [];
+
+    // Get current conditions from form values
+    const conditions: Record<string, unknown> = (values as PropertyWithId & { conditions?: Record<string, unknown> }).conditions ?? {};
+
+    // DEBUG: Log conditions to see what's being loaded
+    console.log("[ConditionsEditor] Loaded conditions:", conditions);
+
+    const activeConditions: { type: ConditionType; group: ConditionGroup }[] = [];
+
+    for (const type of CONDITION_TYPES) {
+        const jsonLogic = conditions[type.id as keyof typeof conditions];
+        if (jsonLogic) {
+            console.log(`[ConditionsEditor] Parsing ${type.id}:`, jsonLogic);
+            const group = jsonLogicToGroup(jsonLogic as Record<string, any>);
+            console.log("[ConditionsEditor] Parsed group:", group);
+            if (group) {
+                activeConditions.push({ type: type.id,
+group });
+            }
+        }
+    }
+
+    const handleAddCondition = (conditionType: ConditionType) => {
+        const defaultRule: SimpleRule = {
+            field: availableFields[0] ?? "isNew",
+            operator: "==",
+            value: ""
+        };
+
+        const defaultGroup: ConditionGroup = {
+            logic: "and",
+            rules: [defaultRule]
+        };
+
+        const jsonLogic = groupToJsonLogic(defaultGroup);
+        setFieldValue(`conditions.${conditionType}`, jsonLogic);
+    };
+
+    const handleGroupChange = (type: ConditionType, group: ConditionGroup) => {
+        const jsonLogic = groupToJsonLogic(group);
+        setFieldValue(`conditions.${type}`, jsonLogic);
+    };
+
+    const handleRemoveCondition = (type: ConditionType) => {
+        const newConditions = { ...conditions };
+        delete newConditions[type];
+        if (Object.keys(newConditions).length === 0) {
+            setFieldValue("conditions", undefined);
+        } else {
+            setFieldValue("conditions", newConditions);
+        }
+    };
+
+    // Condition types that aren't already used
+    const availableConditionTypes = CONDITION_TYPES.filter(
+        ct => !conditions[ct.id as keyof typeof conditions]
+    );
+
+    return (
+        <div className="flex flex-col gap-4">
+            <Typography variant="caption" color="secondary">
+                Add conditions to dynamically control this field based on other field values or user context.
+            </Typography>
+
+            {/* Active conditions */}
+            {activeConditions.length > 0 && (
+                <div className="flex flex-col gap-3">
+                    {activeConditions.map(({ type, group }) => (
+                        <ConditionGroupRow
+                            key={type}
+                            conditionType={type}
+                            group={group}
+                            onGroupChange={(newGroup) => handleGroupChange(type, newGroup)}
+                            onRemove={() => handleRemoveCondition(type)}
+                            disabled={disabled}
+                            availableFields={availableFields}
+                            collectionProperties={collectionProperties}
+                            showErrors={submitCount > 0}
+                        />
+                    ))}
+                </div>
+            )}
+
+            {/* Add new condition - click to add directly */}
+            {availableConditionTypes.length > 0 && (
+                <Select
+                    value=""
+                    onValueChange={(value) => handleAddCondition(value as ConditionType)}
+                    disabled={disabled}
+                    size="small"
+                    placeholder="+ Add condition..."
+                    className="w-full max-w-xs">
+                    {availableConditionTypes.map(ct => (
+                        <SelectItem key={ct.id} value={ct.id}>
+                            <div className="flex flex-col">
+                                <span className="font-medium">{ct.label}</span>
+                                <span className="text-xs text-surface-500">{ct.description}</span>
+                            </div>
+                        </SelectItem>
+                    ))}
+                </Select>
+            )}
+
+            {activeConditions.length === 0 && availableConditionTypes.length === 0 && (
+                <Typography variant="caption" color="disabled" className="text-center py-4">
+                    All condition types are configured.
+                </Typography>
+            )}
+        </div>
+    );
+}