From 68ee22c1245dcfda4e608ebedd5b4a8cac2e0336 Mon Sep 17 00:00:00 2001
From: Koncept Kit <63216427+konceptkit@users.noreply.github.com>
Date: Sun, 1 Feb 2026 19:53:45 +0700
Subject: [PATCH] Changes

---
 src/App.js                                    |    2 +
 src/components/SettingsSidebar.js             |    3 +-
 .../registration/DynamicFormField.js          |  411 ++++++
 .../registration/DynamicRegistrationForm.js   |  482 +++++++
 src/pages/Register.js                         |  383 +++---
 src/pages/admin/AdminRegistrationBuilder.js   | 1156 +++++++++++++++++
 6 files changed, 2260 insertions(+), 177 deletions(-)
 create mode 100644 src/components/registration/DynamicFormField.js
 create mode 100644 src/components/registration/DynamicRegistrationForm.js
 create mode 100644 src/pages/admin/AdminRegistrationBuilder.js

diff --git a/src/App.js b/src/App.js
index f7219db..e8ffa65 100644
--- a/src/App.js
+++ b/src/App.js
@@ -47,6 +47,7 @@ import AdminGallery from './pages/admin/AdminGallery';
 import AdminNewsletters from './pages/admin/AdminNewsletters';
 import AdminFinancials from './pages/admin/AdminFinancials';
 import AdminBylaws from './pages/admin/AdminBylaws';
+import AdminRegistrationBuilder from './pages/admin/AdminRegistrationBuilder';
 import History from './pages/History';
 import MissionValues from './pages/MissionValues';
 import BoardOfDirectors from './pages/BoardOfDirectors';
@@ -304,6 +305,7 @@ function App() {
             <Route path="permissions" element={<AdminRoles />} />
             <Route path="member-tiers" element={<AdminMemberTiers />} />
             <Route path="theme" element={<AdminTheme />} />
+            <Route path="registration" element={<AdminRegistrationBuilder />} />
           </Route>
 
           {/* 404 - Catch all undefined routes */}
diff --git a/src/components/SettingsSidebar.js b/src/components/SettingsSidebar.js
index d08c781..39d1fff 100644
--- a/src/components/SettingsSidebar.js
+++ b/src/components/SettingsSidebar.js
@@ -1,12 +1,13 @@
 import React from 'react';
 import { NavLink, useLocation } from 'react-router-dom';
-import { CreditCard, Shield, Star, Palette } from 'lucide-react';
+import { CreditCard, Shield, Star, Palette, FileEdit } from 'lucide-react';
 
 const settingsItems = [
   { label: 'Stripe', path: '/admin/settings/stripe', icon: CreditCard },
   { label: 'Permissions', path: '/admin/settings/permissions', icon: Shield },
   { label: 'Member Tiers', path: '/admin/settings/member-tiers', icon: Star },
   { label: 'Theme', path: '/admin/settings/theme', icon: Palette },
+  { label: 'Registration Form', path: '/admin/settings/registration', icon: FileEdit },
 ];
 
 const SettingsTabs = () => {
diff --git a/src/components/registration/DynamicFormField.js b/src/components/registration/DynamicFormField.js
new file mode 100644
index 0000000..1f416d7
--- /dev/null
+++ b/src/components/registration/DynamicFormField.js
@@ -0,0 +1,411 @@
+import React from 'react';
+import { Label } from '../ui/label';
+import { Input } from '../ui/input';
+import { Textarea } from '../ui/textarea';
+import { Checkbox } from '../ui/checkbox';
+import { RadioGroup, RadioGroupItem } from '../ui/radio-group';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '../ui/select';
+
+/**
+ * DynamicFormField - Renders form fields based on schema configuration
+ *
+ * Supports field types:
+ * - text, email, phone, password: Input fields
+ * - date: Date picker input
+ * - textarea: Multi-line text input
+ * - checkbox: Single checkbox
+ * - radio: Radio button group
+ * - dropdown: Select dropdown
+ * - multiselect: Checkbox group for multiple selections
+ * - address_group: Group of address-related fields
+ * - file_upload: File upload input
+ */
+const DynamicFormField = ({
+  field,
+  value,
+  onChange,
+  errors = [],
+  formData = {},
+}) => {
+  const {
+    id,
+    type,
+    label,
+    required,
+    placeholder,
+    options = [],
+    rows = 4,
+    validation = {},
+  } = field;
+
+  const hasError = errors.length > 0;
+  const errorMessage = errors[0];
+
+  // Common input className
+  const inputClassName = `h-14 rounded-xl border-2 ${
+    hasError
+      ? 'border-red-500 focus:border-red-500'
+      : 'border-[var(--neutral-800)] focus:border-brand-purple'
+  }`;
+
+  // Handle change for different field types
+  const handleInputChange = (e) => {
+    const { value: newValue, type: inputType, checked } = e.target;
+    if (inputType === 'checkbox') {
+      onChange(id, checked);
+    } else {
+      onChange(id, newValue);
+    }
+  };
+
+  const handleSelectChange = (newValue) => {
+    onChange(id, newValue);
+  };
+
+  const handleCheckboxChange = (checked) => {
+    onChange(id, checked);
+  };
+
+  const handleMultiselectChange = (optionValue) => {
+    const currentValues = Array.isArray(value) ? value : [];
+    const newValues = currentValues.includes(optionValue)
+      ? currentValues.filter((v) => v !== optionValue)
+      : [...currentValues, optionValue];
+    onChange(id, newValues);
+  };
+
+  // Render error message
+  const renderError = () => {
+    if (!hasError) return null;
+    return (
+      <p className="text-sm text-red-500 mt-1">{errorMessage}</p>
+    );
+  };
+
+  // Render label
+  const renderLabel = () => (
+    <Label htmlFor={id} className={hasError ? 'text-red-500' : ''}>
+      {label} {required && '*'}
+    </Label>
+  );
+
+  // Render based on field type
+  switch (type) {
+    case 'text':
+    case 'email':
+    case 'phone':
+      return (
+        <div className="space-y-2">
+          {renderLabel()}
+          <Input
+            id={id}
+            name={id}
+            type={type === 'phone' ? 'tel' : type}
+            required={required}
+            value={value || ''}
+            onChange={handleInputChange}
+            placeholder={placeholder}
+            className={inputClassName}
+            data-testid={`field-${id}`}
+          />
+          {renderError()}
+        </div>
+      );
+
+    case 'password':
+      return (
+        <div className="space-y-2">
+          {renderLabel()}
+          <Input
+            id={id}
+            name={id}
+            type="password"
+            required={required}
+            value={value || ''}
+            onChange={handleInputChange}
+            placeholder={placeholder}
+            minLength={validation.minLength}
+            className={inputClassName}
+            data-testid={`field-${id}`}
+          />
+          {renderError()}
+        </div>
+      );
+
+    case 'date':
+      return (
+        <div className="space-y-2">
+          {renderLabel()}
+          <Input
+            id={id}
+            name={id}
+            type="date"
+            required={required}
+            value={value || ''}
+            onChange={handleInputChange}
+            className={inputClassName}
+            data-testid={`field-${id}`}
+          />
+          {renderError()}
+        </div>
+      );
+
+    case 'textarea':
+      return (
+        <div className="space-y-2">
+          {renderLabel()}
+          <Textarea
+            id={id}
+            name={id}
+            required={required}
+            value={value || ''}
+            onChange={handleInputChange}
+            placeholder={placeholder}
+            rows={rows}
+            className={`rounded-xl border-2 ${
+              hasError
+                ? 'border-red-500 focus:border-red-500'
+                : 'border-[var(--neutral-800)] focus:border-brand-purple'
+            }`}
+            data-testid={`field-${id}`}
+          />
+          {renderError()}
+        </div>
+      );
+
+    case 'checkbox':
+      return (
+        <div className="flex items-center space-x-2">
+          <Checkbox
+            id={id}
+            name={id}
+            checked={value || false}
+            onCheckedChange={handleCheckboxChange}
+            data-testid={`field-${id}`}
+          />
+          <Label
+            htmlFor={id}
+            className={`text-base cursor-pointer ${hasError ? 'text-red-500' : ''}`}
+          >
+            {label} {required && '*'}
+          </Label>
+          {renderError()}
+        </div>
+      );
+
+    case 'radio':
+      return (
+        <div className="space-y-2">
+          {renderLabel()}
+          <RadioGroup
+            value={value || ''}
+            onValueChange={handleSelectChange}
+            className="space-y-2"
+          >
+            {options.map((option) => (
+              <div key={option.value} className="flex items-center space-x-2">
+                <RadioGroupItem
+                  value={option.value}
+                  id={`${id}-${option.value}`}
+                  data-testid={`field-${id}-${option.value}`}
+                />
+                <Label
+                  htmlFor={`${id}-${option.value}`}
+                  className="text-base cursor-pointer"
+                >
+                  {option.label}
+                </Label>
+              </div>
+            ))}
+          </RadioGroup>
+          {renderError()}
+        </div>
+      );
+
+    case 'dropdown':
+      return (
+        <div className="space-y-2">
+          {renderLabel()}
+          <Select value={value || ''} onValueChange={handleSelectChange}>
+            <SelectTrigger
+              className={`h-14 rounded-xl border-2 ${
+                hasError
+                  ? 'border-red-500'
+                  : 'border-[var(--neutral-800)] focus:border-brand-purple'
+              }`}
+              data-testid={`field-${id}`}
+            >
+              <SelectValue placeholder={placeholder || 'Select an option'} />
+            </SelectTrigger>
+            <SelectContent>
+              {options.map((option) => (
+                <SelectItem key={option.value} value={option.value}>
+                  {option.label}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+          {renderError()}
+        </div>
+      );
+
+    case 'multiselect':
+      const selectedValues = Array.isArray(value) ? value : [];
+      return (
+        <div className="space-y-2">
+          {renderLabel()}
+          <div className="space-y-3">
+            {options.map((option) => (
+              <div key={option.value} className="flex items-center space-x-2">
+                <Checkbox
+                  id={`${id}-${option.value}`}
+                  checked={selectedValues.includes(option.value)}
+                  onCheckedChange={() => handleMultiselectChange(option.value)}
+                  data-testid={`field-${id}-${option.value}`}
+                />
+                <Label
+                  htmlFor={`${id}-${option.value}`}
+                  className="text-base cursor-pointer"
+                >
+                  {option.label}
+                </Label>
+              </div>
+            ))}
+          </div>
+          {renderError()}
+        </div>
+      );
+
+    case 'address_group':
+      // Address group renders multiple related fields
+      return (
+        <div className="space-y-4">
+          {renderLabel()}
+          <div className="space-y-4">
+            <Input
+              id={`${id}_address`}
+              name={`${id}_address`}
+              placeholder="Street Address"
+              value={formData[`${id}_address`] || ''}
+              onChange={(e) => onChange(`${id}_address`, e.target.value)}
+              className={inputClassName}
+              required={required}
+            />
+            <div className="grid md:grid-cols-3 gap-4">
+              <Input
+                id={`${id}_city`}
+                name={`${id}_city`}
+                placeholder="City"
+                value={formData[`${id}_city`] || ''}
+                onChange={(e) => onChange(`${id}_city`, e.target.value)}
+                className={inputClassName}
+                required={required}
+              />
+              <Input
+                id={`${id}_state`}
+                name={`${id}_state`}
+                placeholder="State"
+                value={formData[`${id}_state`] || ''}
+                onChange={(e) => onChange(`${id}_state`, e.target.value)}
+                className={inputClassName}
+                required={required}
+              />
+              <Input
+                id={`${id}_zipcode`}
+                name={`${id}_zipcode`}
+                placeholder="Zipcode"
+                value={formData[`${id}_zipcode`] || ''}
+                onChange={(e) => onChange(`${id}_zipcode`, e.target.value)}
+                className={inputClassName}
+                required={required}
+              />
+            </div>
+          </div>
+          {renderError()}
+        </div>
+      );
+
+    case 'file_upload':
+      return (
+        <div className="space-y-2">
+          {renderLabel()}
+          <Input
+            id={id}
+            name={id}
+            type="file"
+            accept={field.allowed_types?.join(',')}
+            onChange={(e) => {
+              const file = e.target.files?.[0];
+              onChange(id, file);
+            }}
+            className={`h-14 rounded-xl border-2 pt-3 ${
+              hasError
+                ? 'border-red-500'
+                : 'border-[var(--neutral-800)] focus:border-brand-purple'
+            }`}
+            data-testid={`field-${id}`}
+          />
+          {field.max_size_mb && (
+            <p className="text-sm text-muted-foreground">
+              Max file size: {field.max_size_mb}MB
+            </p>
+          )}
+          {renderError()}
+        </div>
+      );
+
+    default:
+      console.warn(`Unknown field type: ${type}`);
+      return (
+        <div className="space-y-2">
+          {renderLabel()}
+          <Input
+            id={id}
+            name={id}
+            value={value || ''}
+            onChange={handleInputChange}
+            placeholder={placeholder}
+            className={inputClassName}
+            data-testid={`field-${id}`}
+          />
+          {renderError()}
+        </div>
+      );
+  }
+};
+
+/**
+ * Get width class based on field width configuration
+ */
+export const getWidthClass = (width) => {
+  switch (width) {
+    case 'half':
+      return 'md:col-span-1';
+    case 'third':
+      return 'md:col-span-1';
+    case 'two-thirds':
+      return 'md:col-span-2';
+    case 'full':
+    default:
+      return 'md:col-span-2';
+  }
+};
+
+/**
+ * Get grid columns class based on field widths in a row
+ */
+export const getGridClass = (fields) => {
+  const hasThird = fields.some((f) => f.width === 'third');
+  if (hasThird) {
+    return 'grid md:grid-cols-3 gap-4';
+  }
+  return 'grid md:grid-cols-2 gap-4';
+};
+
+export default DynamicFormField;
diff --git a/src/components/registration/DynamicRegistrationForm.js b/src/components/registration/DynamicRegistrationForm.js
new file mode 100644
index 0000000..0e6b3c1
--- /dev/null
+++ b/src/components/registration/DynamicRegistrationForm.js
@@ -0,0 +1,482 @@
+import React, { useMemo, useCallback } from 'react';
+import DynamicFormField, { getWidthClass } from './DynamicFormField';
+
+/**
+ * DynamicRegistrationForm - Renders the entire registration form from schema
+ *
+ * Features:
+ * - Renders steps and sections based on schema
+ * - Handles conditional field visibility
+ * - Supports step navigation
+ * - Validates fields per step
+ */
+const DynamicRegistrationForm = ({
+  schema,
+  formData,
+  onFormDataChange,
+  currentStep,
+  errors = {},
+}) => {
+  // Get current step data
+  const stepData = useMemo(() => {
+    const steps = schema?.steps || [];
+    const sortedSteps = [...steps].sort((a, b) => a.order - b.order);
+    return sortedSteps[currentStep - 1] || null;
+  }, [schema, currentStep]);
+
+  // Evaluate conditional rules to determine which fields are visible
+  const hiddenFields = useMemo(() => {
+    const rules = schema?.conditional_rules || [];
+    const hidden = new Set();
+
+    // First pass: collect fields that have "show" rules (hidden by default)
+    for (const rule of rules) {
+      if (rule.action === 'show') {
+        rule.target_fields?.forEach((fieldId) => hidden.add(fieldId));
+      }
+    }
+
+    // Second pass: evaluate rules and show/hide fields
+    for (const rule of rules) {
+      const {
+        trigger_field,
+        trigger_operator = 'equals',
+        trigger_value,
+        action,
+        target_fields = [],
+      } = rule;
+
+      const fieldValue = formData[trigger_field];
+      let conditionMet = false;
+
+      switch (trigger_operator) {
+        case 'equals':
+          conditionMet = fieldValue === trigger_value;
+          break;
+        case 'not_equals':
+          conditionMet = fieldValue !== trigger_value;
+          break;
+        case 'contains':
+          conditionMet = Array.isArray(fieldValue)
+            ? fieldValue.includes(trigger_value)
+            : String(fieldValue || '').includes(trigger_value);
+          break;
+        case 'not_empty':
+          conditionMet = Boolean(fieldValue);
+          break;
+        case 'empty':
+          conditionMet = !Boolean(fieldValue);
+          break;
+        default:
+          conditionMet = false;
+      }
+
+      if (conditionMet) {
+        if (action === 'show') {
+          target_fields.forEach((fieldId) => hidden.delete(fieldId));
+        } else if (action === 'hide') {
+          target_fields.forEach((fieldId) => hidden.add(fieldId));
+        }
+      }
+    }
+
+    return hidden;
+  }, [schema, formData]);
+
+  // Handle field change
+  const handleFieldChange = useCallback(
+    (fieldId, value) => {
+      onFormDataChange((prev) => ({
+        ...prev,
+        [fieldId]: value,
+      }));
+    },
+    [onFormDataChange]
+  );
+
+  // Check if a field is visible
+  const isFieldVisible = useCallback(
+    (fieldId) => {
+      return !hiddenFields.has(fieldId);
+    },
+    [hiddenFields]
+  );
+
+  // Get errors for a specific field
+  const getFieldErrors = useCallback(
+    (fieldId) => {
+      return errors[fieldId] || [];
+    },
+    [errors]
+  );
+
+  // Group fields by their width for rendering
+  const groupFieldsByRow = (fields) => {
+    const rows = [];
+    let currentRow = [];
+    let currentRowWidth = 0;
+
+    const visibleFields = fields.filter((f) => isFieldVisible(f.id));
+
+    for (const field of visibleFields) {
+      const width = field.width || 'full';
+      let widthValue = 1;
+
+      if (width === 'half') widthValue = 0.5;
+      else if (width === 'third') widthValue = 0.33;
+      else if (width === 'two-thirds') widthValue = 0.67;
+
+      if (currentRowWidth + widthValue > 1) {
+        if (currentRow.length > 0) {
+          rows.push(currentRow);
+        }
+        currentRow = [field];
+        currentRowWidth = widthValue;
+      } else {
+        currentRow.push(field);
+        currentRowWidth += widthValue;
+      }
+    }
+
+    if (currentRow.length > 0) {
+      rows.push(currentRow);
+    }
+
+    return rows;
+  };
+
+  if (!stepData) {
+    return (
+      <div className="text-center py-8 text-muted-foreground">
+        No step data available
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-8">
+      {/* Step Header */}
+      {stepData.description && (
+        <p
+          className="text-brand-purple"
+          style={{ fontFamily: "'Nunito Sans', sans-serif" }}
+        >
+          {stepData.description}
+        </p>
+      )}
+
+      {/* Sections */}
+      {stepData.sections
+        ?.sort((a, b) => a.order - b.order)
+        .map((section) => {
+          const visibleFields = section.fields?.filter((f) =>
+            isFieldVisible(f.id)
+          );
+
+          // Skip empty sections
+          if (!visibleFields || visibleFields.length === 0) {
+            return null;
+          }
+
+          const fieldRows = groupFieldsByRow(
+            section.fields?.sort((a, b) => a.order - b.order) || []
+          );
+
+          return (
+            <div key={section.id} className="space-y-4">
+              {/* Section Title */}
+              {section.title && (
+                <h2
+                  className="text-2xl font-semibold text-[var(--purple-ink)]"
+                  style={{ fontFamily: "'Inter', sans-serif" }}
+                >
+                  {section.title}
+                </h2>
+              )}
+
+              {/* Section Description */}
+              {section.description && (
+                <p className="text-muted-foreground">{section.description}</p>
+              )}
+
+              {/* Fields */}
+              <div className="space-y-4">
+                {fieldRows.map((row, rowIndex) => {
+                  // Determine grid class based on field widths
+                  const hasThird = row.some((f) => f.width === 'third');
+                  const hasHalf = row.some((f) => f.width === 'half');
+                  const gridCols = hasThird
+                    ? 'grid md:grid-cols-3 gap-4'
+                    : hasHalf
+                    ? 'grid md:grid-cols-2 gap-4'
+                    : '';
+
+                  if (row.length === 1 && !hasHalf && !hasThird) {
+                    // Single full-width field
+                    const field = row[0];
+                    return (
+                      <DynamicFormField
+                        key={field.id}
+                        field={field}
+                        value={formData[field.id]}
+                        onChange={handleFieldChange}
+                        errors={getFieldErrors(field.id)}
+                        formData={formData}
+                      />
+                    );
+                  }
+
+                  return (
+                    <div key={`row-${rowIndex}`} className={gridCols}>
+                      {row.map((field) => (
+                        <div
+                          key={field.id}
+                          className={getWidthClass(field.width)}
+                        >
+                          <DynamicFormField
+                            field={field}
+                            value={formData[field.id]}
+                            onChange={handleFieldChange}
+                            errors={getFieldErrors(field.id)}
+                            formData={formData}
+                          />
+                        </div>
+                      ))}
+                    </div>
+                  );
+                })}
+              </div>
+            </div>
+          );
+        })}
+    </div>
+  );
+};
+
+/**
+ * DynamicStepIndicator - Renders step progress indicator
+ */
+export const DynamicStepIndicator = ({ steps, currentStep }) => {
+  const sortedSteps = [...steps].sort((a, b) => a.order - b.order);
+
+  return (
+    <div className="mb-8">
+      <div className="flex items-center justify-between">
+        {sortedSteps.map((step, index) => {
+          const stepNumber = index + 1;
+          const isActive = stepNumber === currentStep;
+          const isCompleted = stepNumber < currentStep;
+
+          return (
+            <div key={step.id} className="flex items-center flex-1">
+              {/* Step Circle */}
+              <div className="flex flex-col items-center">
+                <div
+                  className={`w-10 h-10 rounded-full flex items-center justify-center text-lg font-medium transition-colors ${
+                    isActive
+                      ? 'bg-brand-purple text-white'
+                      : isCompleted
+                      ? 'bg-green-500 text-white'
+                      : 'bg-[var(--neutral-800)] text-[var(--purple-ink)]'
+                  }`}
+                >
+                  {isCompleted ? '✓' : stepNumber}
+                </div>
+                <span
+                  className={`mt-2 text-sm text-center hidden md:block ${
+                    isActive ? 'text-brand-purple font-medium' : 'text-muted-foreground'
+                  }`}
+                >
+                  {step.title}
+                </span>
+              </div>
+
+              {/* Connector Line */}
+              {index < sortedSteps.length - 1 && (
+                <div
+                  className={`flex-1 h-1 mx-4 rounded ${
+                    isCompleted
+                      ? 'bg-green-500'
+                      : 'bg-[var(--neutral-800)]'
+                  }`}
+                />
+              )}
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+};
+
+/**
+ * Validate a single step based on schema
+ */
+export const validateStep = (stepData, formData, hiddenFields) => {
+  const errors = {};
+
+  if (!stepData?.sections) return { isValid: true, errors };
+
+  for (const section of stepData.sections) {
+    // Check section-level validation (e.g., atLeastOne)
+    const sectionValidation = section.validation || {};
+    if (sectionValidation.atLeastOne) {
+      const fieldIds = (section.fields || []).map((f) => f.id);
+      const hasValue = fieldIds.some((id) => {
+        if (hiddenFields.has(id)) return true; // Skip hidden fields
+        const value = formData[id];
+        return Boolean(value);
+      });
+      if (!hasValue) {
+        // Add error to first field in section
+        const firstFieldId = fieldIds[0];
+        if (firstFieldId) {
+          errors[firstFieldId] = [
+            sectionValidation.message ||
+              `At least one field in ${section.title || 'this section'} is required`,
+          ];
+        }
+      }
+    }
+
+    // Check field-level validation
+    for (const field of section.fields || []) {
+      const { id, required, validation = {}, type, label } = field;
+
+      // Skip hidden fields
+      if (hiddenFields.has(id)) continue;
+
+      // Skip client-only fields for server validation
+      if (field.client_only && field.id !== 'confirmPassword') continue;
+
+      const value = formData[id];
+
+      // Required check
+      if (required) {
+        const isEmpty =
+          value === undefined ||
+          value === null ||
+          value === '' ||
+          (Array.isArray(value) && value.length === 0);
+
+        if (isEmpty) {
+          errors[id] = [`${label || id} is required`];
+          continue;
+        }
+      }
+
+      // Skip further validation if value is empty
+      if (!value && value !== false) continue;
+
+      // Type-specific validation
+      const fieldErrors = [];
+
+      if (type === 'email') {
+        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+        if (!emailRegex.test(value)) {
+          fieldErrors.push('Please enter a valid email address');
+        }
+      }
+
+      if (type === 'password') {
+        if (validation.minLength && value.length < validation.minLength) {
+          fieldErrors.push(
+            `Password must be at least ${validation.minLength} characters`
+          );
+        }
+      }
+
+      if (type === 'text' || type === 'textarea') {
+        if (validation.minLength && value.length < validation.minLength) {
+          fieldErrors.push(
+            `${label || id} must be at least ${validation.minLength} characters`
+          );
+        }
+        if (validation.maxLength && value.length > validation.maxLength) {
+          fieldErrors.push(
+            `${label || id} must be at most ${validation.maxLength} characters`
+          );
+        }
+      }
+
+      // Match field validation (for confirmPassword)
+      if (validation.matchField) {
+        if (value !== formData[validation.matchField]) {
+          fieldErrors.push('Passwords do not match');
+        }
+      }
+
+      if (fieldErrors.length > 0) {
+        errors[id] = fieldErrors;
+      }
+    }
+  }
+
+  return {
+    isValid: Object.keys(errors).length === 0,
+    errors,
+  };
+};
+
+/**
+ * Evaluate conditional rules to get hidden fields set
+ */
+export const evaluateConditionalRules = (schema, formData) => {
+  const rules = schema?.conditional_rules || [];
+  const hidden = new Set();
+
+  // First pass: collect fields that have "show" rules (hidden by default)
+  for (const rule of rules) {
+    if (rule.action === 'show') {
+      rule.target_fields?.forEach((fieldId) => hidden.add(fieldId));
+    }
+  }
+
+  // Second pass: evaluate rules and show/hide fields
+  for (const rule of rules) {
+    const {
+      trigger_field,
+      trigger_operator = 'equals',
+      trigger_value,
+      action,
+      target_fields = [],
+    } = rule;
+
+    const fieldValue = formData[trigger_field];
+    let conditionMet = false;
+
+    switch (trigger_operator) {
+      case 'equals':
+        conditionMet = fieldValue === trigger_value;
+        break;
+      case 'not_equals':
+        conditionMet = fieldValue !== trigger_value;
+        break;
+      case 'contains':
+        conditionMet = Array.isArray(fieldValue)
+          ? fieldValue.includes(trigger_value)
+          : String(fieldValue || '').includes(trigger_value);
+        break;
+      case 'not_empty':
+        conditionMet = Boolean(fieldValue);
+        break;
+      case 'empty':
+        conditionMet = !Boolean(fieldValue);
+        break;
+      default:
+        conditionMet = false;
+    }
+
+    if (conditionMet) {
+      if (action === 'show') {
+        target_fields.forEach((fieldId) => hidden.delete(fieldId));
+      } else if (action === 'hide') {
+        target_fields.forEach((fieldId) => hidden.add(fieldId));
+      }
+    }
+  }
+
+  return hidden;
+};
+
+export default DynamicRegistrationForm;
diff --git a/src/pages/Register.js b/src/pages/Register.js
index 7bd7fc5..4c3d847 100644
--- a/src/pages/Register.js
+++ b/src/pages/Register.js
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect, useMemo, useCallback } from 'react';
 import { useNavigate, Link } from 'react-router-dom';
 import { useAuth } from '../context/AuthContext';
 import { Button } from '../components/ui/button';
@@ -6,189 +6,221 @@ import { Card } from '../components/ui/card';
 import { toast } from 'sonner';
 import PublicNavbar from '../components/PublicNavbar';
 import PublicFooter from '../components/PublicFooter';
-import { ArrowRight, ArrowLeft } from 'lucide-react';
-import RegistrationStepIndicator from '../components/registration/RegistrationStepIndicator';
-import RegistrationStep1 from '../components/registration/RegistrationStep1';
-import RegistrationStep2 from '../components/registration/RegistrationStep2';
-import RegistrationStep3 from '../components/registration/RegistrationStep3';
-import RegistrationStep4 from '../components/registration/RegistrationStep4';
+import { ArrowRight, ArrowLeft, Loader2 } from 'lucide-react';
+import DynamicRegistrationForm, {
+  DynamicStepIndicator,
+  validateStep,
+  evaluateConditionalRules,
+} from '../components/registration/DynamicRegistrationForm';
+import api from '../utils/api';
+
+// Fallback schema for when API is unavailable
+const FALLBACK_SCHEMA = {
+  version: '1.0',
+  steps: [
+    {
+      id: 'step_account',
+      title: 'Account Setup',
+      description: 'Create your account credentials.',
+      order: 1,
+      sections: [
+        {
+          id: 'section_credentials',
+          title: 'Account Credentials',
+          order: 1,
+          fields: [
+            { id: 'first_name', type: 'text', label: 'First Name', required: true, is_fixed: true, mapping: 'first_name', width: 'half', order: 1 },
+            { id: 'last_name', type: 'text', label: 'Last Name', required: true, is_fixed: true, mapping: 'last_name', width: 'half', order: 2 },
+            { id: 'email', type: 'email', label: 'Email Address', required: true, is_fixed: true, mapping: 'email', width: 'full', order: 3 },
+            { id: 'password', type: 'password', label: 'Password', required: true, is_fixed: true, mapping: 'password', validation: { minLength: 6 }, width: 'half', order: 4 },
+            { id: 'confirmPassword', type: 'password', label: 'Confirm Password', required: true, is_fixed: true, client_only: true, width: 'half', order: 5, validation: { matchField: 'password' } },
+            { id: 'accepts_tos', type: 'checkbox', label: 'I accept the Terms of Service and Privacy Policy', required: true, is_fixed: true, mapping: 'accepts_tos', width: 'full', order: 6 },
+          ],
+        },
+      ],
+    },
+  ],
+  conditional_rules: [],
+  fixed_fields: ['email', 'password', 'first_name', 'last_name', 'accepts_tos'],
+};
 
 const Register = () => {
   const navigate = useNavigate();
   const { register } = useAuth();
   const [loading, setLoading] = useState(false);
+  const [schemaLoading, setSchemaLoading] = useState(true);
+  const [schema, setSchema] = useState(null);
   const [currentStep, setCurrentStep] = useState(1);
-  const [formData, setFormData] = useState({
-    // Step 1: Personal & Partner Information
-    first_name: '',
-    last_name: '',
-    phone: '',
-    date_of_birth: '',
-    address: '',
-    city: '',
-    state: '',
-    zipcode: '',
-    lead_sources: [],
-    partner_first_name: '',
-    partner_last_name: '',
-    partner_is_member: false,
-    partner_plan_to_become_member: false,
+  const [formData, setFormData] = useState({});
+  const [errors, setErrors] = useState({});
 
-    // Step 2: Newsletter, Volunteer & Scholarship
-    referred_by_member_name: '',
-    newsletter_publish_name: false,
-    newsletter_publish_photo: false,
-    newsletter_publish_birthday: false,
-    newsletter_publish_none: false,
-    volunteer_interests: [],
-    scholarship_requested: false,
-    scholarship_reason: '',
-
-    // Step 3: Directory Settings
-    show_in_directory: false,
-    directory_email: '',
-    directory_bio: '',
-    directory_address: '',
-    directory_phone: '',
-    directory_dob: '',
-    directory_partner_name: '',
-
-    // Step 4: Account Credentials
-    email: '',
-    password: '',
-    confirmPassword: ''
-  });
-
-  const handleInputChange = (e) => {
-    const { name, value, type, checked } = e.target;
-    setFormData(prev => ({
-      ...prev,
-      [name]: type === 'checkbox' ? checked : value
-    }));
-  };
-
-  const validateStep1 = () => {
-    const required = ['first_name', 'last_name', 'phone', 'date_of_birth',
-      'address', 'city', 'state', 'zipcode'];
-    for (const field of required) {
-      if (!formData[field]?.trim()) {
-        toast.error('Please fill in all required fields');
-        return false;
+  // Fetch registration schema on mount
+  useEffect(() => {
+    const fetchSchema = async () => {
+      try {
+        const response = await api.get('/registration/schema');
+        setSchema(response.data);
+      } catch (error) {
+        console.error('Failed to load registration schema:', error);
+        toast.error('Failed to load registration form. Using default form.');
+        setSchema(FALLBACK_SCHEMA);
+      } finally {
+        setSchemaLoading(false);
       }
-    }
-    if (formData.lead_sources.length === 0) {
-      toast.error('Please select at least one option for how you heard about us');
-      return false;
-    }
-    return true;
-  };
+    };
 
-  const validateStep2 = () => {
-    const { newsletter_publish_name, newsletter_publish_photo,
-      newsletter_publish_birthday, newsletter_publish_none } = formData;
+    fetchSchema();
+  }, []);
 
-    if (!newsletter_publish_name && !newsletter_publish_photo &&
-      !newsletter_publish_birthday && !newsletter_publish_none) {
-      toast.error('Please select at least one newsletter publication preference');
-      return false;
-    }
+  // Get sorted steps
+  const sortedSteps = useMemo(() => {
+    if (!schema?.steps) return [];
+    return [...schema.steps].sort((a, b) => a.order - b.order);
+  }, [schema]);
 
-    if (formData.scholarship_requested && !formData.scholarship_reason?.trim()) {
-      toast.error('Please explain your scholarship request');
-      return false;
-    }
+  // Get current step data
+  const currentStepData = useMemo(() => {
+    return sortedSteps[currentStep - 1] || null;
+  }, [sortedSteps, currentStep]);
 
-    return true;
-  };
+  // Get hidden fields based on conditional rules
+  const hiddenFields = useMemo(() => {
+    return evaluateConditionalRules(schema, formData);
+  }, [schema, formData]);
 
-  const validateStep3 = () => {
-    return true; // No required fields
-  };
-
-  const validateStep4 = () => {
-    if (!formData.email || !formData.password || !formData.confirmPassword) {
-      toast.error('Please fill in all account fields');
-      return false;
-    }
-
-    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
-    if (!emailRegex.test(formData.email)) {
-      toast.error('Please enter a valid email address');
-      return false;
-    }
-
-    if (formData.password.length < 6) {
-      toast.error('Password must be at least 6 characters');
-      return false;
-    }
-
-    if (formData.password !== formData.confirmPassword) {
-      toast.error('Passwords do not match');
-      return false;
-    }
-
-    return true;
-  };
+  // Validate current step
+  const validateCurrentStep = useCallback(() => {
+    if (!currentStepData) return { isValid: true, errors: {} };
+    return validateStep(currentStepData, formData, hiddenFields);
+  }, [currentStepData, formData, hiddenFields]);
 
+  // Handle next step
   const handleNext = () => {
-    let isValid = false;
+    const { isValid, errors: stepErrors } = validateCurrentStep();
 
-    switch (currentStep) {
-      case 1: isValid = validateStep1(); break;
-      case 2: isValid = validateStep2(); break;
-      case 3: isValid = validateStep3(); break;
-      default: isValid = false;
+    if (!isValid) {
+      setErrors(stepErrors);
+      const firstErrorField = Object.keys(stepErrors)[0];
+      if (firstErrorField) {
+        toast.error(stepErrors[firstErrorField][0]);
+      }
+      return;
     }
 
-    if (isValid) {
-      setCurrentStep(prev => Math.min(prev + 1, 4));
-      window.scrollTo({ top: 0, behavior: 'smooth' });
-    }
-  };
-
-  const handleBack = () => {
-    setCurrentStep(prev => Math.max(prev - 1, 1));
+    setErrors({});
+    setCurrentStep((prev) => Math.min(prev + 1, sortedSteps.length));
     window.scrollTo({ top: 0, behavior: 'smooth' });
   };
 
+  // Handle previous step
+  const handleBack = () => {
+    setErrors({});
+    setCurrentStep((prev) => Math.max(prev - 1, 1));
+    window.scrollTo({ top: 0, behavior: 'smooth' });
+  };
+
+  // Handle form submission
   const handleSubmit = async (e) => {
     e.preventDefault();
 
-    // Final validation
-    if (!validateStep4()) return;
+    // Validate final step
+    const { isValid, errors: stepErrors } = validateCurrentStep();
+    if (!isValid) {
+      setErrors(stepErrors);
+      const firstErrorField = Object.keys(stepErrors)[0];
+      if (firstErrorField) {
+        toast.error(stepErrors[firstErrorField][0]);
+      }
+      return;
+    }
 
     setLoading(true);
 
     try {
-      // Remove confirmPassword (client-side only)
-      const { confirmPassword, ...dataToSubmit } = formData;
+      // Prepare submission data
+      const submitData = { ...formData };
+
+      // Remove client-only fields
+      delete submitData.confirmPassword;
 
       // Convert date fields to ISO format
-      const submitData = {
-        ...dataToSubmit,
-        date_of_birth: new Date(dataToSubmit.date_of_birth).toISOString(),
-        directory_dob: dataToSubmit.directory_dob
-          ? new Date(dataToSubmit.directory_dob).toISOString()
-          : null
-      };
+      if (submitData.date_of_birth) {
+        submitData.date_of_birth = new Date(submitData.date_of_birth).toISOString();
+      }
+      if (submitData.directory_dob) {
+        submitData.directory_dob = new Date(submitData.directory_dob).toISOString();
+      }
+
+      // Ensure boolean fields are actually booleans
+      const booleanFields = [
+        'partner_is_member',
+        'partner_plan_to_become_member',
+        'newsletter_publish_name',
+        'newsletter_publish_photo',
+        'newsletter_publish_birthday',
+        'newsletter_publish_none',
+        'scholarship_requested',
+        'show_in_directory',
+        'accepts_tos',
+      ];
+
+      for (const field of booleanFields) {
+        if (field in submitData) {
+          submitData[field] = Boolean(submitData[field]);
+        }
+      }
+
+      // Ensure array fields are arrays
+      const arrayFields = ['lead_sources', 'volunteer_interests'];
+      for (const field of arrayFields) {
+        if (field in submitData && !Array.isArray(submitData[field])) {
+          submitData[field] = submitData[field] ? [submitData[field]] : [];
+        }
+      }
 
       await register(submitData);
       toast.success('Please check your email for a confirmation email.');
       navigate('/login');
     } catch (error) {
-      toast.error(error.response?.data?.detail || 'Registration failed. Please try again.');
+      const errorMessage = error.response?.data?.detail;
+      if (typeof errorMessage === 'object' && errorMessage.errors) {
+        // Handle structured validation errors
+        const errorList = errorMessage.errors;
+        toast.error(errorList[0] || 'Registration failed');
+      } else {
+        toast.error(errorMessage || 'Registration failed. Please try again.');
+      }
     } finally {
       setLoading(false);
     }
   };
 
+  // Show loading state while fetching schema
+  if (schemaLoading) {
+    return (
+      <div className="min-h-screen bg-background">
+        <PublicNavbar />
+        <div className="max-w-4xl mx-auto px-6 py-12 flex items-center justify-center min-h-[60vh]">
+          <div className="text-center">
+            <Loader2 className="h-8 w-8 animate-spin mx-auto mb-4 text-brand-purple" />
+            <p className="text-muted-foreground">Loading registration form...</p>
+          </div>
+        </div>
+        <PublicFooter />
+      </div>
+    );
+  }
+
   return (
     <div className="min-h-screen bg-background">
       <PublicNavbar />
 
       <div className="max-w-4xl mx-auto px-6 py-12">
         <div className="mb-8">
-          <Link to="/" className="inline-flex items-center text-brand-purple  hover:text-[var(--orange-light)] transition-colors">
+          <Link
+            to="/"
+            className="inline-flex items-center text-brand-purple hover:text-[var(--orange-light)] transition-colors"
+          >
             <ArrowLeft className="h-4 w-4 mr-2" />
             Back to Home
           </Link>
@@ -196,47 +228,34 @@ const Register = () => {
 
         <Card className="p-8 md:p-12 bg-background rounded-2xl border border-[var(--neutral-800)] shadow-lg">
           <div className="mb-8">
-            <h1 className="text-4xl md:text-5xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
+            <h1
+              className="text-4xl md:text-5xl font-semibold text-[var(--purple-ink)] mb-4"
+              style={{ fontFamily: "'Inter', sans-serif" }}
+            >
               Join Our Community
             </h1>
-            <p className="text-lg text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+            <p
+              className="text-lg text-brand-purple"
+              style={{ fontFamily: "'Nunito Sans', sans-serif" }}
+            >
               Fill out the form below to start your membership journey.
             </p>
           </div>
 
           <form onSubmit={handleSubmit} className="space-y-8" data-testid="register-form">
-            <RegistrationStepIndicator currentStep={currentStep} />
-
-            {currentStep === 1 && (
-              <RegistrationStep1
-                formData={formData}
-                setFormData={setFormData}
-                handleInputChange={handleInputChange}
-              />
+            {/* Step Indicator */}
+            {sortedSteps.length > 1 && (
+              <DynamicStepIndicator steps={sortedSteps} currentStep={currentStep} />
             )}
 
-            {currentStep === 2 && (
-              <RegistrationStep2
-                formData={formData}
-                setFormData={setFormData}
-                handleInputChange={handleInputChange}
-              />
-            )}
-
-            {currentStep === 3 && (
-              <RegistrationStep3
-                formData={formData}
-                setFormData={setFormData}
-                handleInputChange={handleInputChange}
-              />
-            )}
-
-            {currentStep === 4 && (
-              <RegistrationStep4
-                formData={formData}
-                handleInputChange={handleInputChange}
-              />
-            )}
+            {/* Dynamic Form Content */}
+            <DynamicRegistrationForm
+              schema={schema}
+              formData={formData}
+              onFormDataChange={setFormData}
+              currentStep={currentStep}
+              errors={errors}
+            />
 
             {/* Navigation Buttons */}
             <div className="flex justify-between items-center pt-6">
@@ -245,7 +264,7 @@ const Register = () => {
                   type="button"
                   onClick={handleBack}
                   variant="outline"
-                  className="rounded-full px-6 py-6 text-lg border-2 border-[var(--neutral-800)] hover:border-brand-purple  text-[var(--purple-ink)]"
+                  className="rounded-full px-6 py-6 text-lg border-2 border-[var(--neutral-800)] hover:border-brand-purple text-[var(--purple-ink)]"
                 >
                   <ArrowLeft className="mr-2 h-5 w-5" />
                   Back
@@ -254,7 +273,7 @@ const Register = () => {
                 <div></div>
               )}
 
-              {currentStep < 4 ? (
+              {currentStep < sortedSteps.length ? (
                 <Button
                   type="button"
                   onClick={handleNext}
@@ -267,16 +286,28 @@ const Register = () => {
                 <Button
                   type="submit"
                   disabled={loading}
-                  className="bg-[var(--neutral-800)] text-[var(--purple-ink)] hover:bg-brand-purple hover:text-backgroundrounded-full px-6 py-6 text-lg font-medium shadow-lg hover:scale-105 transition-transform disabled:opacity-50 disabled:cursor-not-allowed"
+                  className="bg-[var(--neutral-800)] text-[var(--purple-ink)] hover:bg-brand-purple hover:text-background rounded-full px-6 py-6 text-lg font-medium shadow-lg hover:scale-105 transition-transform disabled:opacity-50 disabled:cursor-not-allowed"
                   data-testid="submit-register-button"
                 >
-                  {loading ? 'Creating Account...' : 'Create Account'}
-                  <ArrowRight className="ml-2 h-5 w-5" />
+                  {loading ? (
+                    <>
+                      <Loader2 className="mr-2 h-5 w-5 animate-spin" />
+                      Creating Account...
+                    </>
+                  ) : (
+                    <>
+                      Create Account
+                      <ArrowRight className="ml-2 h-5 w-5" />
+                    </>
+                  )}
                 </Button>
               )}
             </div>
 
-            <p className="text-center text-brand-purple  mt-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+            <p
+              className="text-center text-brand-purple mt-4"
+              style={{ fontFamily: "'Nunito Sans', sans-serif" }}
+            >
               Already have an account?{' '}
               <Link to="/login" className="text-[var(--orange-light)] hover:underline font-medium">
                 Login here
diff --git a/src/pages/admin/AdminRegistrationBuilder.js b/src/pages/admin/AdminRegistrationBuilder.js
new file mode 100644
index 0000000..18ee294
--- /dev/null
+++ b/src/pages/admin/AdminRegistrationBuilder.js
@@ -0,0 +1,1156 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import { Card } from '../../components/ui/card';
+import { Button } from '../../components/ui/button';
+import { Input } from '../../components/ui/input';
+import { Label } from '../../components/ui/label';
+import { Textarea } from '../../components/ui/textarea';
+import { Checkbox } from '../../components/ui/checkbox';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '../../components/ui/select';
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+} from '../../components/ui/dialog';
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from '../../components/ui/accordion';
+import { toast } from 'sonner';
+import api from '../../utils/api';
+import {
+  Loader2,
+  Save,
+  RotateCcw,
+  Eye,
+  Plus,
+  Trash2,
+  GripVertical,
+  Type,
+  Mail,
+  Phone,
+  Calendar,
+  List,
+  CheckSquare,
+  Circle,
+  AlignLeft,
+  Upload,
+  Lock,
+  ChevronUp,
+  ChevronDown,
+  Settings,
+  Zap,
+  Copy,
+  X,
+} from 'lucide-react';
+
+// Field type icons
+const FIELD_TYPE_ICONS = {
+  text: Type,
+  email: Mail,
+  phone: Phone,
+  date: Calendar,
+  dropdown: List,
+  checkbox: CheckSquare,
+  radio: Circle,
+  multiselect: CheckSquare,
+  textarea: AlignLeft,
+  file_upload: Upload,
+  password: Lock,
+  address_group: Type,
+};
+
+// Field type labels
+const FIELD_TYPE_LABELS = {
+  text: 'Text Input',
+  email: 'Email',
+  phone: 'Phone',
+  date: 'Date',
+  dropdown: 'Dropdown',
+  checkbox: 'Checkbox',
+  radio: 'Radio Group',
+  multiselect: 'Multi-Select',
+  textarea: 'Text Area',
+  file_upload: 'File Upload',
+  password: 'Password',
+  address_group: 'Address Group',
+};
+
+const AdminRegistrationBuilder = () => {
+  const [schema, setSchema] = useState(null);
+  const [originalSchema, setOriginalSchema] = useState(null);
+  const [fieldTypes, setFieldTypes] = useState({});
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+  const [hasChanges, setHasChanges] = useState(false);
+
+  // UI State
+  const [selectedStep, setSelectedStep] = useState(null);
+  const [selectedSection, setSelectedSection] = useState(null);
+  const [selectedField, setSelectedField] = useState(null);
+  const [previewOpen, setPreviewOpen] = useState(false);
+  const [addStepDialogOpen, setAddStepDialogOpen] = useState(false);
+  const [addSectionDialogOpen, setAddSectionDialogOpen] = useState(false);
+  const [addFieldDialogOpen, setAddFieldDialogOpen] = useState(false);
+  const [conditionalDialogOpen, setConditionalDialogOpen] = useState(false);
+
+  // Form state for dialogs
+  const [newStepData, setNewStepData] = useState({ title: '', description: '' });
+  const [newSectionData, setNewSectionData] = useState({ title: '', description: '' });
+  const [newFieldType, setNewFieldType] = useState('text');
+
+  // Fetch schema and field types on mount
+  useEffect(() => {
+    fetchSchema();
+    fetchFieldTypes();
+  }, []);
+
+  const fetchSchema = async () => {
+    try {
+      const response = await api.get('/admin/registration/schema');
+      setSchema(response.data.schema);
+      setOriginalSchema(JSON.parse(JSON.stringify(response.data.schema)));
+      if (response.data.schema?.steps?.length > 0) {
+        setSelectedStep(response.data.schema.steps[0].id);
+      }
+    } catch (error) {
+      toast.error('Failed to load registration schema');
+      console.error(error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const fetchFieldTypes = async () => {
+    try {
+      const response = await api.get('/admin/registration/field-types');
+      setFieldTypes(response.data);
+    } catch (error) {
+      console.error('Failed to load field types:', error);
+    }
+  };
+
+  // Check for changes
+  useEffect(() => {
+    if (schema && originalSchema) {
+      setHasChanges(JSON.stringify(schema) !== JSON.stringify(originalSchema));
+    }
+  }, [schema, originalSchema]);
+
+  // Save schema
+  const handleSave = async () => {
+    setSaving(true);
+    try {
+      // Validate first
+      const validateResponse = await api.post('/admin/registration/schema/validate', {
+        schema_data: schema,
+      });
+
+      if (!validateResponse.data.valid) {
+        toast.error(validateResponse.data.errors.join(', '));
+        return;
+      }
+
+      // Save
+      await api.put('/admin/registration/schema', { schema_data: schema });
+      setOriginalSchema(JSON.parse(JSON.stringify(schema)));
+      toast.success('Registration form saved successfully');
+    } catch (error) {
+      toast.error(error.response?.data?.detail?.message || 'Failed to save schema');
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  // Reset to default
+  const handleReset = async () => {
+    if (!window.confirm('Are you sure you want to reset to the default registration form? This cannot be undone.')) {
+      return;
+    }
+
+    try {
+      await api.post('/admin/registration/schema/reset');
+      await fetchSchema();
+      toast.success('Registration form reset to default');
+    } catch (error) {
+      toast.error('Failed to reset schema');
+    }
+  };
+
+  // Get sorted steps
+  const sortedSteps = schema?.steps?.sort((a, b) => a.order - b.order) || [];
+
+  // Get current step
+  const currentStep = sortedSteps.find((s) => s.id === selectedStep);
+
+  // Get sections for current step
+  const sortedSections = currentStep?.sections?.sort((a, b) => a.order - b.order) || [];
+
+  // Update schema
+  const updateSchema = useCallback((updater) => {
+    setSchema((prev) => {
+      const updated = typeof updater === 'function' ? updater(prev) : updater;
+      return { ...updated };
+    });
+  }, []);
+
+  // Add step
+  const handleAddStep = () => {
+    if (!newStepData.title.trim()) {
+      toast.error('Step title is required');
+      return;
+    }
+
+    const newStep = {
+      id: `step_${Date.now()}`,
+      title: newStepData.title,
+      description: newStepData.description,
+      order: sortedSteps.length + 1,
+      sections: [],
+    };
+
+    updateSchema((prev) => ({
+      ...prev,
+      steps: [...prev.steps, newStep],
+    }));
+
+    setSelectedStep(newStep.id);
+    setAddStepDialogOpen(false);
+    setNewStepData({ title: '', description: '' });
+  };
+
+  // Delete step
+  const handleDeleteStep = (stepId) => {
+    const step = schema.steps.find((s) => s.id === stepId);
+    if (step?.sections?.some((sec) => sec.fields?.some((f) => f.is_fixed))) {
+      toast.error('Cannot delete step containing fixed fields');
+      return;
+    }
+
+    if (!window.confirm('Are you sure you want to delete this step?')) {
+      return;
+    }
+
+    updateSchema((prev) => ({
+      ...prev,
+      steps: prev.steps
+        .filter((s) => s.id !== stepId)
+        .map((s, idx) => ({ ...s, order: idx + 1 })),
+    }));
+
+    if (selectedStep === stepId) {
+      setSelectedStep(sortedSteps[0]?.id);
+    }
+  };
+
+  // Move step
+  const handleMoveStep = (stepId, direction) => {
+    const stepIndex = sortedSteps.findIndex((s) => s.id === stepId);
+    const newIndex = direction === 'up' ? stepIndex - 1 : stepIndex + 1;
+
+    if (newIndex < 0 || newIndex >= sortedSteps.length) return;
+
+    updateSchema((prev) => {
+      const steps = [...prev.steps];
+      const step = steps.find((s) => s.id === stepId);
+      const otherStep = sortedSteps[newIndex];
+      const otherStepInArray = steps.find((s) => s.id === otherStep.id);
+
+      const tempOrder = step.order;
+      step.order = otherStepInArray.order;
+      otherStepInArray.order = tempOrder;
+
+      return { ...prev, steps };
+    });
+  };
+
+  // Add section
+  const handleAddSection = () => {
+    if (!newSectionData.title.trim()) {
+      toast.error('Section title is required');
+      return;
+    }
+
+    const newSection = {
+      id: `section_${Date.now()}`,
+      title: newSectionData.title,
+      description: newSectionData.description,
+      order: sortedSections.length + 1,
+      fields: [],
+    };
+
+    updateSchema((prev) => ({
+      ...prev,
+      steps: prev.steps.map((s) =>
+        s.id === selectedStep
+          ? { ...s, sections: [...(s.sections || []), newSection] }
+          : s
+      ),
+    }));
+
+    setSelectedSection(newSection.id);
+    setAddSectionDialogOpen(false);
+    setNewSectionData({ title: '', description: '' });
+  };
+
+  // Delete section
+  const handleDeleteSection = (sectionId) => {
+    const section = currentStep?.sections?.find((s) => s.id === sectionId);
+    if (section?.fields?.some((f) => f.is_fixed)) {
+      toast.error('Cannot delete section containing fixed fields');
+      return;
+    }
+
+    if (!window.confirm('Are you sure you want to delete this section?')) {
+      return;
+    }
+
+    updateSchema((prev) => ({
+      ...prev,
+      steps: prev.steps.map((s) =>
+        s.id === selectedStep
+          ? {
+              ...s,
+              sections: s.sections
+                .filter((sec) => sec.id !== sectionId)
+                .map((sec, idx) => ({ ...sec, order: idx + 1 })),
+            }
+          : s
+      ),
+    }));
+
+    if (selectedSection === sectionId) {
+      setSelectedSection(null);
+    }
+  };
+
+  // Add field
+  const handleAddField = () => {
+    if (!selectedSection) {
+      toast.error('Please select a section first');
+      return;
+    }
+
+    const section = currentStep?.sections?.find((s) => s.id === selectedSection);
+    const fieldCount = section?.fields?.length || 0;
+
+    const newField = {
+      id: `field_${Date.now()}`,
+      type: newFieldType,
+      label: `New ${FIELD_TYPE_LABELS[newFieldType] || 'Field'}`,
+      required: false,
+      is_fixed: false,
+      width: 'full',
+      order: fieldCount + 1,
+      options: ['dropdown', 'radio', 'multiselect'].includes(newFieldType)
+        ? [{ value: 'option1', label: 'Option 1' }]
+        : undefined,
+    };
+
+    updateSchema((prev) => ({
+      ...prev,
+      steps: prev.steps.map((s) =>
+        s.id === selectedStep
+          ? {
+              ...s,
+              sections: s.sections.map((sec) =>
+                sec.id === selectedSection
+                  ? { ...sec, fields: [...(sec.fields || []), newField] }
+                  : sec
+              ),
+            }
+          : s
+      ),
+    }));
+
+    setSelectedField(newField.id);
+    setAddFieldDialogOpen(false);
+  };
+
+  // Delete field
+  const handleDeleteField = (fieldId) => {
+    const section = currentStep?.sections?.find((s) => s.id === selectedSection);
+    const field = section?.fields?.find((f) => f.id === fieldId);
+
+    if (field?.is_fixed) {
+      toast.error('Cannot delete fixed fields');
+      return;
+    }
+
+    if (!window.confirm('Are you sure you want to delete this field?')) {
+      return;
+    }
+
+    updateSchema((prev) => ({
+      ...prev,
+      steps: prev.steps.map((s) =>
+        s.id === selectedStep
+          ? {
+              ...s,
+              sections: s.sections.map((sec) =>
+                sec.id === selectedSection
+                  ? {
+                      ...sec,
+                      fields: sec.fields
+                        .filter((f) => f.id !== fieldId)
+                        .map((f, idx) => ({ ...f, order: idx + 1 })),
+                    }
+                  : sec
+              ),
+            }
+          : s
+      ),
+    }));
+
+    if (selectedField === fieldId) {
+      setSelectedField(null);
+    }
+  };
+
+  // Update field
+  const handleUpdateField = (fieldId, updates) => {
+    updateSchema((prev) => ({
+      ...prev,
+      steps: prev.steps.map((s) =>
+        s.id === selectedStep
+          ? {
+              ...s,
+              sections: s.sections.map((sec) =>
+                sec.id === selectedSection
+                  ? {
+                      ...sec,
+                      fields: sec.fields.map((f) =>
+                        f.id === fieldId ? { ...f, ...updates } : f
+                      ),
+                    }
+                  : sec
+              ),
+            }
+          : s
+      ),
+    }));
+  };
+
+  // Get selected field data
+  const selectedFieldData = currentStep?.sections
+    ?.find((s) => s.id === selectedSection)
+    ?.fields?.find((f) => f.id === selectedField);
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center min-h-[60vh]">
+        <Loader2 className="h-8 w-8 animate-spin text-brand-purple" />
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-6">
+      {/* Header */}
+      <div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
+        <div>
+          <h1 className="text-4xl md:text-5xl font-semibold text-[var(--purple-ink)] mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
+            Registration Form Builder
+          </h1>
+          <p className="text-lg text-brand-purple" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+            Customize the registration form steps, sections, and fields.
+          </p>
+        </div>
+        <div className="flex gap-2">
+          <Button variant="outline" onClick={() => setPreviewOpen(true)}>
+            <Eye className="h-4 w-4 mr-2" />
+            Preview
+          </Button>
+          <Button variant="outline" onClick={handleReset}>
+            <RotateCcw className="h-4 w-4 mr-2" />
+            Reset
+          </Button>
+          <Button onClick={handleSave} disabled={saving || !hasChanges}>
+            {saving ? (
+              <Loader2 className="h-4 w-4 mr-2 animate-spin" />
+            ) : (
+              <Save className="h-4 w-4 mr-2" />
+            )}
+            Save Changes
+          </Button>
+        </div>
+      </div>
+
+      {hasChanges && (
+        <div className="bg-yellow-50 border border-yellow-200 rounded-lg p-3 text-yellow-800 text-sm">
+          You have unsaved changes. Click "Save Changes" to apply them.
+        </div>
+      )}
+
+      {/* Main Builder Layout */}
+      <div className="grid grid-cols-1 lg:grid-cols-12 gap-6">
+        {/* Left Sidebar - Steps & Sections */}
+        <div className="lg:col-span-3">
+          <Card className="p-4">
+            <div className="flex justify-between items-center mb-4">
+              <h2 className="text-lg font-semibold">Steps</h2>
+              <Button size="sm" variant="ghost" onClick={() => setAddStepDialogOpen(true)}>
+                <Plus className="h-4 w-4" />
+              </Button>
+            </div>
+
+            <div className="space-y-2">
+              {sortedSteps.map((step, index) => (
+                <div
+                  key={step.id}
+                  className={`p-3 rounded-lg border cursor-pointer transition-colors ${
+                    selectedStep === step.id
+                      ? 'border-brand-purple bg-brand-lavender/10'
+                      : 'border-gray-200 hover:border-gray-300'
+                  }`}
+                  onClick={() => {
+                    setSelectedStep(step.id);
+                    setSelectedSection(null);
+                    setSelectedField(null);
+                  }}
+                >
+                  <div className="flex items-center justify-between">
+                    <div className="flex items-center gap-2">
+                      <GripVertical className="h-4 w-4 text-gray-400" />
+                      <span className="font-medium text-sm">{step.title}</span>
+                    </div>
+                    <div className="flex items-center gap-1">
+                      <Button
+                        size="icon"
+                        variant="ghost"
+                        className="h-6 w-6"
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          handleMoveStep(step.id, 'up');
+                        }}
+                        disabled={index === 0}
+                      >
+                        <ChevronUp className="h-3 w-3" />
+                      </Button>
+                      <Button
+                        size="icon"
+                        variant="ghost"
+                        className="h-6 w-6"
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          handleMoveStep(step.id, 'down');
+                        }}
+                        disabled={index === sortedSteps.length - 1}
+                      >
+                        <ChevronDown className="h-3 w-3" />
+                      </Button>
+                      <Button
+                        size="icon"
+                        variant="ghost"
+                        className="h-6 w-6 text-red-500 hover:text-red-700"
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          handleDeleteStep(step.id);
+                        }}
+                      >
+                        <Trash2 className="h-3 w-3" />
+                      </Button>
+                    </div>
+                  </div>
+                </div>
+              ))}
+            </div>
+
+            {/* Sections for selected step */}
+            {currentStep && (
+              <>
+                <div className="flex justify-between items-center mt-6 mb-4">
+                  <h2 className="text-lg font-semibold">Sections</h2>
+                  <Button size="sm" variant="ghost" onClick={() => setAddSectionDialogOpen(true)}>
+                    <Plus className="h-4 w-4" />
+                  </Button>
+                </div>
+
+                <div className="space-y-2">
+                  {sortedSections.map((section) => (
+                    <div
+                      key={section.id}
+                      className={`p-3 rounded-lg border cursor-pointer transition-colors ${
+                        selectedSection === section.id
+                          ? 'border-brand-purple bg-brand-lavender/10'
+                          : 'border-gray-200 hover:border-gray-300'
+                      }`}
+                      onClick={() => {
+                        setSelectedSection(section.id);
+                        setSelectedField(null);
+                      }}
+                    >
+                      <div className="flex items-center justify-between">
+                        <span className="text-sm">{section.title}</span>
+                        <Button
+                          size="icon"
+                          variant="ghost"
+                          className="h-6 w-6 text-red-500 hover:text-red-700"
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            handleDeleteSection(section.id);
+                          }}
+                        >
+                          <Trash2 className="h-3 w-3" />
+                        </Button>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              </>
+            )}
+          </Card>
+        </div>
+
+        {/* Center - Form Canvas */}
+        <div className="lg:col-span-6">
+          <Card className="p-6">
+            <div className="flex justify-between items-center mb-6">
+              <h2 className="text-xl font-semibold">
+                {currentStep?.title || 'Select a step'}
+              </h2>
+              {selectedSection && (
+                <Button size="sm" onClick={() => setAddFieldDialogOpen(true)}>
+                  <Plus className="h-4 w-4 mr-2" />
+                  Add Field
+                </Button>
+              )}
+            </div>
+
+            {currentStep?.description && (
+              <p className="text-muted-foreground mb-6">{currentStep.description}</p>
+            )}
+
+            {/* Sections and Fields */}
+            {sortedSections.map((section) => {
+              const sortedFields = section.fields?.sort((a, b) => a.order - b.order) || [];
+
+              return (
+                <div
+                  key={section.id}
+                  className={`mb-6 p-4 rounded-lg border-2 ${
+                    selectedSection === section.id
+                      ? 'border-brand-purple'
+                      : 'border-dashed border-gray-200'
+                  }`}
+                  onClick={() => setSelectedSection(section.id)}
+                >
+                  <h3 className="text-lg font-medium mb-4">{section.title}</h3>
+                  {section.description && (
+                    <p className="text-sm text-muted-foreground mb-4">{section.description}</p>
+                  )}
+
+                  {/* Fields */}
+                  <div className="space-y-3">
+                    {sortedFields.map((field) => {
+                      const IconComponent = FIELD_TYPE_ICONS[field.type] || Type;
+                      return (
+                        <div
+                          key={field.id}
+                          className={`p-3 rounded-lg border cursor-pointer transition-all ${
+                            selectedField === field.id
+                              ? 'border-brand-purple bg-brand-lavender/5 ring-2 ring-brand-purple/20'
+                              : 'border-gray-200 hover:border-gray-300'
+                          } ${field.is_fixed ? 'bg-gray-50' : ''}`}
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            setSelectedSection(section.id);
+                            setSelectedField(field.id);
+                          }}
+                        >
+                          <div className="flex items-center justify-between">
+                            <div className="flex items-center gap-3">
+                              <GripVertical className="h-4 w-4 text-gray-400" />
+                              <IconComponent className="h-4 w-4 text-gray-500" />
+                              <div>
+                                <span className="font-medium text-sm">
+                                  {field.label}
+                                  {field.required && <span className="text-red-500 ml-1">*</span>}
+                                </span>
+                                <span className="text-xs text-muted-foreground ml-2">
+                                  ({FIELD_TYPE_LABELS[field.type] || field.type})
+                                </span>
+                              </div>
+                              {field.is_fixed && (
+                                <Lock className="h-3 w-3 text-gray-400" title="Fixed field - cannot be removed" />
+                              )}
+                            </div>
+                            {!field.is_fixed && (
+                              <Button
+                                size="icon"
+                                variant="ghost"
+                                className="h-6 w-6 text-red-500 hover:text-red-700"
+                                onClick={(e) => {
+                                  e.stopPropagation();
+                                  handleDeleteField(field.id);
+                                }}
+                              >
+                                <Trash2 className="h-3 w-3" />
+                              </Button>
+                            )}
+                          </div>
+                        </div>
+                      );
+                    })}
+
+                    {sortedFields.length === 0 && (
+                      <div className="text-center py-8 text-muted-foreground">
+                        No fields in this section. Click "Add Field" to add one.
+                      </div>
+                    )}
+                  </div>
+                </div>
+              );
+            })}
+
+            {sortedSections.length === 0 && (
+              <div className="text-center py-12 text-muted-foreground">
+                No sections in this step. Add a section from the left sidebar.
+              </div>
+            )}
+          </Card>
+
+          {/* Conditional Rules */}
+          <Card className="p-6 mt-6">
+            <div className="flex justify-between items-center mb-4">
+              <div className="flex items-center gap-2">
+                <Zap className="h-5 w-5 text-yellow-500" />
+                <h2 className="text-lg font-semibold">Conditional Rules</h2>
+              </div>
+              <Button size="sm" variant="outline" onClick={() => setConditionalDialogOpen(true)}>
+                <Settings className="h-4 w-4 mr-2" />
+                Manage Rules
+              </Button>
+            </div>
+
+            <div className="text-sm text-muted-foreground">
+              {schema?.conditional_rules?.length || 0} conditional rule(s) configured
+            </div>
+          </Card>
+        </div>
+
+        {/* Right Sidebar - Field Properties */}
+        <div className="lg:col-span-3">
+          <Card className="p-4">
+            <h2 className="text-lg font-semibold mb-4">Field Properties</h2>
+
+            {selectedFieldData ? (
+              <div className="space-y-4">
+                {/* Field ID */}
+                <div>
+                  <Label className="text-xs text-muted-foreground">Field ID</Label>
+                  <div className="text-sm font-mono bg-gray-100 px-2 py-1 rounded">
+                    {selectedFieldData.id}
+                  </div>
+                </div>
+
+                {/* Label */}
+                <div>
+                  <Label htmlFor="field-label">Label</Label>
+                  <Input
+                    id="field-label"
+                    value={selectedFieldData.label}
+                    onChange={(e) => handleUpdateField(selectedField, { label: e.target.value })}
+                    disabled={selectedFieldData.is_fixed}
+                  />
+                </div>
+
+                {/* Type */}
+                <div>
+                  <Label>Type</Label>
+                  <Select
+                    value={selectedFieldData.type}
+                    onValueChange={(value) => handleUpdateField(selectedField, { type: value })}
+                    disabled={selectedFieldData.is_fixed}
+                  >
+                    <SelectTrigger>
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {Object.entries(FIELD_TYPE_LABELS).map(([type, label]) => (
+                        <SelectItem key={type} value={type}>
+                          {label}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </div>
+
+                {/* Required */}
+                <div className="flex items-center gap-2">
+                  <Checkbox
+                    id="field-required"
+                    checked={selectedFieldData.required}
+                    onCheckedChange={(checked) =>
+                      handleUpdateField(selectedField, { required: checked })
+                    }
+                    disabled={selectedFieldData.is_fixed}
+                  />
+                  <Label htmlFor="field-required">Required</Label>
+                </div>
+
+                {/* Width */}
+                <div>
+                  <Label>Width</Label>
+                  <Select
+                    value={selectedFieldData.width || 'full'}
+                    onValueChange={(value) => handleUpdateField(selectedField, { width: value })}
+                  >
+                    <SelectTrigger>
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="full">Full Width</SelectItem>
+                      <SelectItem value="half">Half Width</SelectItem>
+                      <SelectItem value="third">Third Width</SelectItem>
+                    </SelectContent>
+                  </Select>
+                </div>
+
+                {/* Placeholder */}
+                {['text', 'email', 'phone', 'textarea'].includes(selectedFieldData.type) && (
+                  <div>
+                    <Label htmlFor="field-placeholder">Placeholder</Label>
+                    <Input
+                      id="field-placeholder"
+                      value={selectedFieldData.placeholder || ''}
+                      onChange={(e) =>
+                        handleUpdateField(selectedField, { placeholder: e.target.value })
+                      }
+                    />
+                  </div>
+                )}
+
+                {/* Options for dropdown/radio/multiselect */}
+                {['dropdown', 'radio', 'multiselect'].includes(selectedFieldData.type) && (
+                  <div>
+                    <Label>Options</Label>
+                    <div className="space-y-2 mt-2">
+                      {(selectedFieldData.options || []).map((option, idx) => (
+                        <div key={idx} className="flex items-center gap-2">
+                          <Input
+                            value={option.label}
+                            onChange={(e) => {
+                              const newOptions = [...selectedFieldData.options];
+                              newOptions[idx] = {
+                                ...newOptions[idx],
+                                label: e.target.value,
+                                value: e.target.value.toLowerCase().replace(/\s+/g, '_'),
+                              };
+                              handleUpdateField(selectedField, { options: newOptions });
+                            }}
+                            placeholder="Option label"
+                          />
+                          <Button
+                            size="icon"
+                            variant="ghost"
+                            className="h-8 w-8"
+                            onClick={() => {
+                              const newOptions = selectedFieldData.options.filter(
+                                (_, i) => i !== idx
+                              );
+                              handleUpdateField(selectedField, { options: newOptions });
+                            }}
+                          >
+                            <X className="h-4 w-4" />
+                          </Button>
+                        </div>
+                      ))}
+                      <Button
+                        size="sm"
+                        variant="outline"
+                        onClick={() => {
+                          const newOptions = [
+                            ...(selectedFieldData.options || []),
+                            { value: `option_${Date.now()}`, label: 'New Option' },
+                          ];
+                          handleUpdateField(selectedField, { options: newOptions });
+                        }}
+                      >
+                        <Plus className="h-4 w-4 mr-2" />
+                        Add Option
+                      </Button>
+                    </div>
+                  </div>
+                )}
+
+                {/* Mapping */}
+                <div>
+                  <Label htmlFor="field-mapping">Database Mapping</Label>
+                  <Input
+                    id="field-mapping"
+                    value={selectedFieldData.mapping || ''}
+                    onChange={(e) =>
+                      handleUpdateField(selectedField, { mapping: e.target.value })
+                    }
+                    placeholder="Leave empty for custom data"
+                    disabled={selectedFieldData.is_fixed}
+                  />
+                  <p className="text-xs text-muted-foreground mt-1">
+                    Maps to User model field. Empty = stored in custom_registration_data
+                  </p>
+                </div>
+
+                {selectedFieldData.is_fixed && (
+                  <div className="bg-yellow-50 border border-yellow-200 rounded-lg p-3 text-yellow-800 text-sm">
+                    This is a fixed field and cannot be removed or have its core properties changed.
+                  </div>
+                )}
+              </div>
+            ) : (
+              <div className="text-center py-8 text-muted-foreground">
+                Select a field to edit its properties
+              </div>
+            )}
+          </Card>
+        </div>
+      </div>
+
+      {/* Add Step Dialog */}
+      <Dialog open={addStepDialogOpen} onOpenChange={setAddStepDialogOpen}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Add New Step</DialogTitle>
+          </DialogHeader>
+          <div className="space-y-4 py-4">
+            <div>
+              <Label htmlFor="step-title">Step Title</Label>
+              <Input
+                id="step-title"
+                value={newStepData.title}
+                onChange={(e) => setNewStepData({ ...newStepData, title: e.target.value })}
+                placeholder="e.g., Additional Information"
+              />
+            </div>
+            <div>
+              <Label htmlFor="step-description">Description (optional)</Label>
+              <Textarea
+                id="step-description"
+                value={newStepData.description}
+                onChange={(e) => setNewStepData({ ...newStepData, description: e.target.value })}
+                placeholder="Explain what this step is about"
+              />
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setAddStepDialogOpen(false)}>
+              Cancel
+            </Button>
+            <Button onClick={handleAddStep}>Add Step</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* Add Section Dialog */}
+      <Dialog open={addSectionDialogOpen} onOpenChange={setAddSectionDialogOpen}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Add New Section</DialogTitle>
+          </DialogHeader>
+          <div className="space-y-4 py-4">
+            <div>
+              <Label htmlFor="section-title">Section Title</Label>
+              <Input
+                id="section-title"
+                value={newSectionData.title}
+                onChange={(e) => setNewSectionData({ ...newSectionData, title: e.target.value })}
+                placeholder="e.g., Contact Information"
+              />
+            </div>
+            <div>
+              <Label htmlFor="section-description">Description (optional)</Label>
+              <Textarea
+                id="section-description"
+                value={newSectionData.description}
+                onChange={(e) =>
+                  setNewSectionData({ ...newSectionData, description: e.target.value })
+                }
+                placeholder="Explain what this section is for"
+              />
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setAddSectionDialogOpen(false)}>
+              Cancel
+            </Button>
+            <Button onClick={handleAddSection}>Add Section</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* Add Field Dialog */}
+      <Dialog open={addFieldDialogOpen} onOpenChange={setAddFieldDialogOpen}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Add New Field</DialogTitle>
+          </DialogHeader>
+          <div className="space-y-4 py-4">
+            <div>
+              <Label>Field Type</Label>
+              <Select value={newFieldType} onValueChange={setNewFieldType}>
+                <SelectTrigger>
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  {Object.entries(FIELD_TYPE_LABELS).map(([type, label]) => (
+                    <SelectItem key={type} value={type}>
+                      {label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setAddFieldDialogOpen(false)}>
+              Cancel
+            </Button>
+            <Button onClick={handleAddField}>Add Field</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* Conditional Rules Dialog */}
+      <Dialog open={conditionalDialogOpen} onOpenChange={setConditionalDialogOpen}>
+        <DialogContent className="max-w-2xl">
+          <DialogHeader>
+            <DialogTitle>Conditional Rules</DialogTitle>
+          </DialogHeader>
+          <div className="space-y-4 py-4 max-h-96 overflow-y-auto">
+            {(schema?.conditional_rules || []).map((rule, index) => (
+              <div key={rule.id} className="p-4 border rounded-lg space-y-3">
+                <div className="flex justify-between items-center">
+                  <span className="font-medium">Rule {index + 1}</span>
+                  <Button
+                    size="icon"
+                    variant="ghost"
+                    className="h-6 w-6 text-red-500"
+                    onClick={() => {
+                      updateSchema((prev) => ({
+                        ...prev,
+                        conditional_rules: prev.conditional_rules.filter((r) => r.id !== rule.id),
+                      }));
+                    }}
+                  >
+                    <Trash2 className="h-4 w-4" />
+                  </Button>
+                </div>
+                <div className="text-sm text-muted-foreground">
+                  When <span className="font-mono bg-gray-100 px-1">{rule.trigger_field}</span>{' '}
+                  {rule.trigger_operator}{' '}
+                  <span className="font-mono bg-gray-100 px-1">{String(rule.trigger_value)}</span>,{' '}
+                  {rule.action} fields:{' '}
+                  <span className="font-mono bg-gray-100 px-1">
+                    {rule.target_fields?.join(', ')}
+                  </span>
+                </div>
+              </div>
+            ))}
+
+            {(schema?.conditional_rules || []).length === 0 && (
+              <div className="text-center py-8 text-muted-foreground">
+                No conditional rules configured. Rules allow you to show or hide fields based on
+                other field values.
+              </div>
+            )}
+
+            <Button
+              variant="outline"
+              className="w-full"
+              onClick={() => {
+                const newRule = {
+                  id: `rule_${Date.now()}`,
+                  trigger_field: '',
+                  trigger_operator: 'equals',
+                  trigger_value: true,
+                  action: 'show',
+                  target_fields: [],
+                };
+                updateSchema((prev) => ({
+                  ...prev,
+                  conditional_rules: [...(prev.conditional_rules || []), newRule],
+                }));
+              }}
+            >
+              <Plus className="h-4 w-4 mr-2" />
+              Add Rule
+            </Button>
+          </div>
+          <DialogFooter>
+            <Button onClick={() => setConditionalDialogOpen(false)}>Done</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* Preview Dialog */}
+      <Dialog open={previewOpen} onOpenChange={setPreviewOpen}>
+        <DialogContent className="max-w-4xl max-h-[90vh] overflow-y-auto">
+          <DialogHeader>
+            <DialogTitle>Form Preview</DialogTitle>
+          </DialogHeader>
+          <div className="py-4">
+            <p className="text-muted-foreground mb-4">
+              This is a preview of how the registration form will appear to users.
+            </p>
+            {/* Simplified preview */}
+            <div className="space-y-6">
+              {sortedSteps.map((step) => (
+                <div key={step.id} className="border rounded-lg p-4">
+                  <h3 className="text-lg font-semibold mb-2">{step.title}</h3>
+                  {step.description && (
+                    <p className="text-sm text-muted-foreground mb-4">{step.description}</p>
+                  )}
+                  {step.sections
+                    ?.sort((a, b) => a.order - b.order)
+                    .map((section) => (
+                      <div key={section.id} className="mb-4">
+                        <h4 className="font-medium mb-2">{section.title}</h4>
+                        <div className="grid grid-cols-2 gap-3">
+                          {section.fields
+                            ?.sort((a, b) => a.order - b.order)
+                            .map((field) => (
+                              <div
+                                key={field.id}
+                                className={`${
+                                  field.width === 'full'
+                                    ? 'col-span-2'
+                                    : field.width === 'third'
+                                    ? 'col-span-1'
+                                    : 'col-span-1'
+                                }`}
+                              >
+                                <Label>
+                                  {field.label}
+                                  {field.required && (
+                                    <span className="text-red-500 ml-1">*</span>
+                                  )}
+                                </Label>
+                                <Input disabled placeholder={field.placeholder || field.label} />
+                              </div>
+                            ))}
+                        </div>
+                      </div>
+                    ))}
+                </div>
+              ))}
+            </div>
+          </div>
+          <DialogFooter>
+            <Button onClick={() => setPreviewOpen(false)}>Close</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+};
+
+export default AdminRegistrationBuilder;