diff --git a/admin/app/webhook-tester/README.md b/admin/app/webhook-tester/README.md
index 3f93b443..f811be73 100644
--- a/admin/app/webhook-tester/README.md
+++ b/admin/app/webhook-tester/README.md
@@ -1,245 +1,224 @@
-# Webhook Tester - Enhanced Testing Interface
+# Webhook Payload Builder
 
-A comprehensive webhook testing tool for SoroScan with request/response inspection, retry functionality, and timing analysis.
+A comprehensive UI for building, validating, and testing webhook payloads with real-time schema validation and interactive templates.
 
 ## Features
 
-### Core Features
-- 🎯 **Webhook Selection**: Browse and select from available webhooks
-- ✏️ **Payload Editing**: Edit JSON payloads with syntax highlighting
-- 📤 **Test Sending**: Send test requests to webhook endpoints
-- 📊 **Response Inspection**: View response body, headers, and request details
-- 🔄 **Retry Functionality**: Retry requests with the same payload
-- 📜 **History Tracking**: View and replay past requests
-
-### Advanced Features
-- ⏱️ **Timing Breakdown**: See request timing information
-- 🔍 **Request Inspection**: View all request headers sent
-- 🎨 **Syntax Highlighting**: Color-coded JSON editing
-- ⚠️ **Error Handling**: Clear error messages with retry options
-- 💾 **History Management**: Keep last 50 requests
+### 1. **JSON Editor with Syntax Highlighting**
+- Real-time syntax highlighting for JSON
+- Line numbers and character count
+- Format and reset functionality
+- Synchronized scrolling between editor and highlight overlay
+
+### 2. **Schema Validation**
+- Real-time validation against predefined schemas
+- Detailed error messages for validation failures
+- Visual indicators for valid/invalid payloads
+- Type checking for all fields
+- Required field validation
+
+### 3. **Template System**
+- Quick templates for common event types:
+  - Test Event
+  - Transfer Event
+  - Mint Event
+  - Burn Event
+  - Custom Event
+- Searchable template selector
+- One-click template application
+- Auto-detection of event type from payload
+
+### 4. **Schema Viewer**
+- Interactive schema documentation
+- Expandable/collapsible property tree
+- Field descriptions and examples
+- Type information and constraints
+- Required field indicators
+
+### 5. **Visual Payload Builder**
+- Form-based payload construction
+- Type-appropriate input fields:
+  - Text inputs for strings
+  - Number inputs for numbers
+  - Checkboxes for booleans
+  - Date-time pickers for timestamps
+  - Dropdowns for enums
+  - Textareas for objects
+- Nested object support
+- Auto-population with example values
+- "Use Current Time" quick action
+
+### 6. **Send Test Payload**
+- Send test webhooks to configured endpoints
+- HMAC signature generation
+- Request/response inspection
+- Retry functionality
+- Request history tracking
 
 ## Usage
 
-### Basic Workflow
+### Selecting a Template
 
-1. **Select Webhook**
-   - Click on a webhook in the left sidebar
-   - Payload auto-fills with webhook's contract_id and event_type
+1. Click the **Templates** button in the toolbar
+2. Search or browse available templates
+3. Click on a template to apply it to the editor
+4. The payload will be populated with example data
 
-2. **Edit Payload**
-   - Modify JSON in the editor
-   - Use "Format" button to auto-format
-   - Use "Reset" button to restore default
+### Viewing Schema Documentation
 
-3. **Send Test**
-   - Click "Send Test" button
-   - Wait for response
-   - View results in bottom panel
+1. Select a template or ensure your payload has an `event_type` field
+2. Click the **Schema** button in the toolbar
+3. Browse the schema properties, types, and descriptions
+4. Click on nested objects to expand/collapse them
 
-4. **Inspect Response**
-   - Click "Response Body" tab to see response
-   - Click "Response Headers" tab to see headers
-   - Click "Request" tab to see request details
+### Using the Visual Builder
 
-5. **Retry Request**
-   - Click "↻ Retry" button to resend
-   - Or click "Retry Request" on error
-   - Same payload and webhook used
+1. Click the **Builder** button in the toolbar
+2. Fill in the form fields with your desired values
+3. Use the "Use Current Time" button to set the timestamp to now
+4. Click **Apply** to update the JSON editor with your changes
 
-### Advanced Usage
+### Validating Your Payload
 
-#### View Request Details
-1. Send a test request
-2. Click "Request" tab in response viewer
-3. See request headers and timing
+1. Toggle validation on/off with the **Validate** button
+2. Validation runs automatically as you type
+3. View validation errors in the status bar and validation panel
+4. Fix errors based on the detailed error messages
 
-#### Replay from History
-1. Expand "History" panel at bottom
-2. Click on a previous request
-3. Payload and response loaded
-4. Click "↻ Retry" to resend
+### Sending a Test Webhook
 
-#### Handle Errors
-1. If request fails, error message shown
-2. Click "Retry Request" button
-3. Request resent automatically
-4. View new response
+1. Select a webhook from the sidebar
+2. Build or edit your payload
+3. Ensure validation passes (green checkmark)
+4. Click **Send Test** to dispatch the webhook
+5. View the response in the bottom panel
 
-## Architecture
+## Schema Structure
 
-### Components
+Each schema defines:
 
-```
-WebhookTesterPage
-├── WebhookSelector
-│   └── Lists available webhooks
-├── PayloadEditor
-│   ├── JSON editor with syntax highlighting
-│   ├── Format/Reset buttons
-│   └── Send/Retry buttons
-├── ResponseViewer
-│   ├── Response Body tab
-│   ├── Response Headers tab
-│   ├── Request tab (new)
-│   └── Retry button
-└── HistoryPanel
-    └── List of past requests
+```typescript
+interface PayloadSchema {
+  name: string;              // Display name
+  description: string;       // Schema description
+  eventType: string;         // Event type identifier
+  schema: {
+    type: 'object';
+    properties: {            // Field definitions
+      [key: string]: {
+        type: string;        // Field type
+        description?: string;
+        example?: any;
+        required?: boolean;
+        enum?: string[];
+        format?: string;
+      };
+    };
+    required: string[];      // Required field names
+  };
+  example: object;           // Example payload
+}
 ```
 
-### State Management
+## Adding Custom Schemas
 
-**Context**: `WebhookTesterContext`
-- Webhooks list
-- Selected webhook
-- Payload and validation
-- Response and errors
-- Request headers
-- History entries
-- Retry functionality
+To add a new schema, edit `schemas.ts` and add to the `WEBHOOK_SCHEMAS` array:
 
-**Key Functions**:
-- `sendTest()` - Send test request
-- `retryLastRequest()` - Retry last request
-- `selectHistoryEntry()` - Load history entry
+```typescript
+{
+  name: 'My Custom Event',
+  description: 'Description of the event',
+  eventType: 'my_custom_event',
+  schema: {
+    type: 'object',
+    properties: {
+      event_type: {
+        type: 'string',
+        example: 'my_custom_event',
+      },
+      // Add more properties...
+    },
+    required: ['event_type'],
+  },
+  example: {
+    event_type: 'my_custom_event',
+    // Add example data...
+  },
+}
+```
 
-## API Integration
+## Components
 
-### Endpoints Used
+### `PayloadEditor.tsx`
+Main editor component with syntax highlighting and toolbar.
 
-**GET** `/api/ingest/webhooks/?page_size=100`
-- Fetch available webhooks
+### `TemplateSelector.tsx`
+Dropdown for selecting and applying payload templates.
 
-**POST** `/api/ingest/webhooks/{id}/test/`
-- Send test request to webhook
-- Body: JSON payload
-- Response: HTTP status, headers, body
+### `SchemaValidator.tsx`
+Real-time validation panel showing errors and success states.
 
-## Customization
+### `SchemaViewer.tsx`
+Interactive schema documentation viewer.
 
-### Styling
+### `PayloadBuilder.tsx`
+Visual form-based payload builder.
 
-All components use Tailwind CSS with a dark theme (zinc-950 background).
+### `schemas.ts`
+Schema definitions and validation logic.
 
-**Color Scheme**:
-- Success (2xx): `text-green-400`
-- Redirect (3xx): `text-amber-400`
-- Client Error (4xx): `text-orange-400`
-- Server Error (5xx): `text-red-400`
+## Keyboard Shortcuts
 
-### Configuration
+- **Ctrl/Cmd + F**: Format JSON
+- **Ctrl/Cmd + R**: Reset to default
+- **Ctrl/Cmd + Enter**: Send test (when valid)
 
-**Base URL**: `http://localhost:8000` (in `context.tsx`)
+## API Integration
 
-To change:
-```typescript
-const BASE_URL = 'http://your-api-url';
-```
+The webhook tester integrates with the Django backend:
 
-**History Limit**: 50 entries (in `context.tsx`)
+- **GET** `/api/ingest/webhooks/` - List webhooks
+- **POST** `/api/ingest/webhooks/{id}/test/` - Send test payload
 
-To change:
-```typescript
-setHistory(prev => [entry, ...prev].slice(0, 100)); // Change 50 to 100
-```
+Test payloads are sent with proper HMAC signatures for authentication.
 
-## Development
+## Validation Rules
 
-### File Structure
+1. **JSON Syntax**: Must be valid JSON
+2. **Required Fields**: All required fields must be present
+3. **Type Checking**: Fields must match their defined types
+4. **Enum Values**: Enum fields must use allowed values
+5. **Format Validation**: Date-time fields must be ISO 8601 format
 
-```
-webhook-tester/
-├── page.tsx                    # Main page component
-├── context.tsx                 # State management
-├── types.ts                    # TypeScript interfaces
-├── components/
-│   ├── WebhookSelector.tsx    # Webhook list
-│   ├── PayloadEditor.tsx      # JSON editor
-│   ├── ResponseViewer.tsx     # Response display
-│   └── HistoryPanel.tsx       # History list
-├── README.md                   # This file
-├── CHANGES.md                  # Change log
-├── FEATURE_SUMMARY.md         # Feature overview
-├── UI_GUIDE.md                # Visual guide
-└── IMPLEMENTATION.md          # Technical details
-```
+## Best Practices
 
-### Adding Features
-
-1. **New Tab in Response Viewer**
-   ```typescript
-   type Tab = 'body' | 'headers' | 'request' | 'new-tab';
-   
-   // Add button
-   {t === 'new-tab' && 'New Tab'}
-   
-   // Add content
-   {tab === 'new-tab' && (
-     <div>New tab content</div>
-   )}
-   ```
-
-2. **New Button in Payload Editor**
-   ```typescript
-   <button onClick={handleNewAction}>
-     New Button
-   </button>
-   ```
-
-3. **New State in Context**
-   ```typescript
-   const [newState, setNewState] = useState(initialValue);
-   
-   // Add to context interface
-   newState: Type;
-   setNewState: (value: Type) => void;
-   
-   // Add to provider value
-   <WebhookTesterContext.Provider value={{
-     // ... existing ...
-     newState, setNewState,
-   }}>
-   ```
+1. **Start with a Template**: Use templates as a starting point
+2. **Validate Early**: Enable validation to catch errors as you type
+3. **Use the Builder**: For complex payloads, use the visual builder
+4. **Check the Schema**: Review schema documentation when unsure
+5. **Test Incrementally**: Test simple payloads before complex ones
 
 ## Troubleshooting
 
-### Webhooks Not Loading
-- Check API endpoint is accessible
-- Verify `BASE_URL` is correct
-- Check browser console for errors
-
-### Requests Failing
-- Verify webhook URL is correct
-- Check webhook is active
-- Verify payload is valid JSON
-- Check network connectivity
-
-### Retry Not Working
-- Ensure previous request completed
-- Check webhook is still selected
-- Verify payload hasn't changed
-
-## Performance
-
-- **Initial Load**: ~500ms (fetch webhooks)
-- **Send Request**: Depends on webhook endpoint
-- **History**: Limited to 50 entries for performance
-- **Memory**: ~2-5MB typical usage
-
-## Browser Support
+### Validation Errors
 
-- Chrome/Edge 90+
-- Firefox 88+
-- Safari 14+
-- Mobile browsers (responsive design)
+- **"Invalid JSON syntax"**: Check for missing commas, brackets, or quotes
+- **"Missing required field"**: Add the required field to your payload
+- **"Field must be a string/number/etc"**: Check the field type matches the schema
 
-## Related Documentation
+### Send Failures
 
-- [Feature Summary](./FEATURE_SUMMARY.md) - Overview of all features
-- [UI Guide](./UI_GUIDE.md) - Visual guide and workflows
-- [Implementation Details](./IMPLEMENTATION.md) - Technical implementation
-- [Change Log](./CHANGES.md) - Complete change history
+- **"No webhook selected"**: Select a webhook from the sidebar
+- **"Invalid payload"**: Fix validation errors before sending
+- **"Network error"**: Check backend is running and accessible
 
-## Support
+## Future Enhancements
 
-For issues or feature requests, please refer to issue #544 in the SoroScan repository.
+- [ ] Import/export payload templates
+- [ ] Payload history with search
+- [ ] Bulk testing across multiple webhooks
+- [ ] Custom schema upload
+- [ ] Payload diff viewer
+- [ ] Variable substitution (e.g., `{{timestamp}}`)
+- [ ] Webhook response assertions
+- [ ] Performance metrics and timing breakdown
diff --git a/admin/app/webhook-tester/components/PayloadBuilder.tsx b/admin/app/webhook-tester/components/PayloadBuilder.tsx
new file mode 100644
index 00000000..c52da86a
--- /dev/null
+++ b/admin/app/webhook-tester/components/PayloadBuilder.tsx
@@ -0,0 +1,326 @@
+'use client';
+
+import React, { useState, useEffect } from 'react';
+import { type PayloadSchema, type SchemaProperty } from '../schemas';
+
+interface PayloadBuilderProps {
+  schema: PayloadSchema;
+  onPayloadChange: (payload: string) => void;
+  initialPayload?: string;
+}
+
+interface FieldValue {
+  [key: string]: any;
+}
+
+function FieldInput({
+  name,
+  property,
+  value,
+  onChange,
+}: {
+  name: string;
+  property: SchemaProperty;
+  value: any;
+  onChange: (value: any) => void;
+}) {
+  const isRequired = property.required;
+
+  const renderInput = () => {
+    switch (property.type) {
+      case 'string':
+        if (property.format === 'date-time') {
+          return (
+            <input
+              type="datetime-local"
+              value={value ? new Date(value).toISOString().slice(0, 16) : ''}
+              onChange={(e) => onChange(e.target.value ? new Date(e.target.value).toISOString() : '')}
+              className="w-full px-3 py-2 bg-zinc-950 border border-zinc-700 rounded text-sm text-zinc-200 focus:outline-none focus:border-blue-500 font-mono"
+            />
+          );
+        }
+        if (property.enum) {
+          return (
+            <select
+              value={value || ''}
+              onChange={(e) => onChange(e.target.value)}
+              className="w-full px-3 py-2 bg-zinc-950 border border-zinc-700 rounded text-sm text-zinc-200 focus:outline-none focus:border-blue-500"
+            >
+              <option value="">Select...</option>
+              {property.enum.map((option) => (
+                <option key={option} value={option}>
+                  {option}
+                </option>
+              ))}
+            </select>
+          );
+        }
+        return (
+          <input
+            type="text"
+            value={value || ''}
+            onChange={(e) => onChange(e.target.value)}
+            placeholder={property.example ? String(property.example) : ''}
+            className="w-full px-3 py-2 bg-zinc-950 border border-zinc-700 rounded text-sm text-zinc-200 placeholder-zinc-600 focus:outline-none focus:border-blue-500 font-mono"
+          />
+        );
+
+      case 'number':
+        return (
+          <input
+            type="number"
+            value={value ?? ''}
+            onChange={(e) => onChange(e.target.value ? Number(e.target.value) : null)}
+            placeholder={property.example ? String(property.example) : ''}
+            className="w-full px-3 py-2 bg-zinc-950 border border-zinc-700 rounded text-sm text-zinc-200 placeholder-zinc-600 focus:outline-none focus:border-blue-500 font-mono"
+          />
+        );
+
+      case 'boolean':
+        return (
+          <label className="flex items-center gap-2 cursor-pointer">
+            <input
+              type="checkbox"
+              checked={value || false}
+              onChange={(e) => onChange(e.target.checked)}
+              className="w-4 h-4 rounded border-zinc-700 bg-zinc-950 text-blue-500 focus:ring-blue-500 focus:ring-offset-0"
+            />
+            <span className="text-sm text-zinc-400">
+              {value ? 'true' : 'false'}
+            </span>
+          </label>
+        );
+
+      case 'object':
+        return (
+          <textarea
+            value={typeof value === 'object' ? JSON.stringify(value, null, 2) : value || ''}
+            onChange={(e) => {
+              try {
+                onChange(JSON.parse(e.target.value));
+              } catch {
+                onChange(e.target.value);
+              }
+            }}
+            placeholder={property.example ? JSON.stringify(property.example, null, 2) : '{}'}
+            rows={4}
+            className="w-full px-3 py-2 bg-zinc-950 border border-zinc-700 rounded text-sm text-zinc-200 placeholder-zinc-600 focus:outline-none focus:border-blue-500 font-mono"
+          />
+        );
+
+      default:
+        return (
+          <input
+            type="text"
+            value={value || ''}
+            onChange={(e) => onChange(e.target.value)}
+            className="w-full px-3 py-2 bg-zinc-950 border border-zinc-700 rounded text-sm text-zinc-200 focus:outline-none focus:border-blue-500 font-mono"
+          />
+        );
+    }
+  };
+
+  return (
+    <div className="space-y-2">
+      <div className="flex items-center gap-2">
+        <label className="text-sm font-mono text-zinc-300">
+          {name}
+        </label>
+        {isRequired && (
+          <span className="text-xs px-1.5 py-0.5 rounded bg-red-500/20 text-red-400 font-medium">
+            required
+          </span>
+        )}
+        <span className="text-xs px-1.5 py-0.5 rounded bg-zinc-800 text-zinc-500 font-mono">
+          {property.type}
+        </span>
+      </div>
+      {property.description && (
+        <p className="text-xs text-zinc-500">{property.description}</p>
+      )}
+      {renderInput()}
+    </div>
+  );
+}
+
+export function PayloadBuilder({ schema, onPayloadChange, initialPayload }: PayloadBuilderProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [fieldValues, setFieldValues] = useState<FieldValue>({});
+
+  // Initialize with example or parse initial payload
+  useEffect(() => {
+    if (initialPayload) {
+      try {
+        const parsed = JSON.parse(initialPayload);
+        setFieldValues(parsed);
+      } catch {
+        setFieldValues(schema.example);
+      }
+    } else {
+      setFieldValues(schema.example);
+    }
+  }, [schema, initialPayload]);
+
+  // Update payload when field values change
+  useEffect(() => {
+    const payload = JSON.stringify(fieldValues, null, 2);
+    onPayloadChange(payload);
+  }, [fieldValues, onPayloadChange]);
+
+  const handleFieldChange = (name: string, value: any) => {
+    setFieldValues((prev) => ({
+      ...prev,
+      [name]: value,
+    }));
+  };
+
+  const handleNestedFieldChange = (parentName: string, childName: string, value: any) => {
+    setFieldValues((prev) => ({
+      ...prev,
+      [parentName]: {
+        ...(typeof prev[parentName] === 'object' ? prev[parentName] : {}),
+        [childName]: value,
+      },
+    }));
+  };
+
+  const handleReset = () => {
+    setFieldValues(schema.example);
+  };
+
+  const handleUseCurrentTime = () => {
+    if ('timestamp' in schema.schema.properties) {
+      handleFieldChange('timestamp', new Date().toISOString());
+    }
+  };
+
+  return (
+    <div className="relative">
+      <button
+        onClick={() => setIsOpen(!isOpen)}
+        className="flex items-center gap-2 px-3 py-1.5 rounded bg-zinc-800 text-zinc-300 hover:bg-zinc-700 transition-colors text-xs font-medium"
+      >
+        <svg
+          className="w-3.5 h-3.5"
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={2}
+            d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
+          />
+        </svg>
+        Builder
+      </button>
+
+      {isOpen && (
+        <>
+          {/* Backdrop */}
+          <div
+            className="fixed inset-0 z-40"
+            onClick={() => setIsOpen(false)}
+          />
+
+          {/* Panel */}
+          <div className="absolute top-full left-0 mt-2 w-[36rem] bg-zinc-900 border border-zinc-700 rounded-lg shadow-xl z-50 overflow-hidden max-h-[40rem] flex flex-col">
+            {/* Header */}
+            <div className="p-4 border-b border-zinc-800 bg-zinc-900/80 backdrop-blur-sm sticky top-0">
+              <div className="flex items-start justify-between gap-3">
+                <div className="flex-1 min-w-0">
+                  <h3 className="text-sm font-semibold text-zinc-200">
+                    Visual Payload Builder
+                  </h3>
+                  <p className="text-xs text-zinc-400 mt-1">
+                    Build your payload using form fields
+                  </p>
+                </div>
+                <button
+                  onClick={() => setIsOpen(false)}
+                  className="text-zinc-400 hover:text-zinc-200 transition-colors"
+                >
+                  <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
+                    <path
+                      fillRule="evenodd"
+                      d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
+                      clipRule="evenodd"
+                    />
+                  </svg>
+                </button>
+              </div>
+            </div>
+
+            {/* Form */}
+            <div className="flex-1 overflow-y-auto p-4 space-y-4">
+              {Object.entries(schema.schema.properties).map(([name, property]) => {
+                // Handle nested objects specially
+                if (property.type === 'object' && property.properties) {
+                  return (
+                    <div key={name} className="space-y-3 p-3 border border-zinc-800 rounded-lg bg-zinc-950/50">
+                      <div className="flex items-center gap-2 pb-2 border-b border-zinc-800">
+                        <span className="text-sm font-mono text-blue-400">{name}</span>
+                        <span className="text-xs px-1.5 py-0.5 rounded bg-zinc-800 text-zinc-500 font-mono">
+                          object
+                        </span>
+                      </div>
+                      {Object.entries(property.properties).map(([childName, childProperty]) => (
+                        <FieldInput
+                          key={childName}
+                          name={childName}
+                          property={childProperty}
+                          value={fieldValues[name]?.[childName]}
+                          onChange={(value) => handleNestedFieldChange(name, childName, value)}
+                        />
+                      ))}
+                    </div>
+                  );
+                }
+
+                return (
+                  <FieldInput
+                    key={name}
+                    name={name}
+                    property={{
+                      ...property,
+                      required: schema.schema.required.includes(name),
+                    }}
+                    value={fieldValues[name]}
+                    onChange={(value) => handleFieldChange(name, value)}
+                  />
+                );
+              })}
+            </div>
+
+            {/* Footer */}
+            <div className="p-3 border-t border-zinc-800 bg-zinc-900/50 flex items-center justify-between gap-2">
+              <button
+                onClick={handleReset}
+                className="px-3 py-1.5 rounded bg-zinc-800 text-zinc-300 hover:bg-zinc-700 transition-colors text-xs font-medium"
+              >
+                Reset to Example
+              </button>
+              <div className="flex items-center gap-2">
+                {schema.schema.properties.timestamp && (
+                  <button
+                    onClick={handleUseCurrentTime}
+                    className="px-3 py-1.5 rounded bg-blue-600 text-white hover:bg-blue-500 transition-colors text-xs font-medium"
+                  >
+                    Use Current Time
+                  </button>
+                )}
+                <button
+                  onClick={() => setIsOpen(false)}
+                  className="px-3 py-1.5 rounded bg-green-600 text-white hover:bg-green-500 transition-colors text-xs font-medium"
+                >
+                  Apply
+                </button>
+              </div>
+            </div>
+          </div>
+        </>
+      )}
+    </div>
+  );
+}
diff --git a/admin/app/webhook-tester/components/PayloadEditor.tsx b/admin/app/webhook-tester/components/PayloadEditor.tsx
index aa0c9852..df4165aa 100644
--- a/admin/app/webhook-tester/components/PayloadEditor.tsx
+++ b/admin/app/webhook-tester/components/PayloadEditor.tsx
@@ -1,8 +1,13 @@
 'use client';
 
-import React, { useRef } from 'react';
+import React, { useRef, useState, useEffect } from 'react';
 import { useWebhookTester } from '../context';
 import { DEFAULT_PAYLOAD } from '../types';
+import { TemplateSelector } from './TemplateSelector';
+import { SchemaValidator } from './SchemaValidator';
+import { SchemaViewer } from './SchemaViewer';
+import { PayloadBuilder } from './PayloadBuilder';
+import { getSchemaByEventType, type PayloadSchema } from '../schemas';
 
 // Minimal syntax highlighting for JSON in a textarea overlay approach
 function highlight(json: string): string {
@@ -36,6 +41,22 @@ export function PayloadEditor() {
   } = useWebhookTester();
 
   const textareaRef = useRef<HTMLTextAreaElement>(null);
+  const [selectedSchema, setSelectedSchema] = useState<PayloadSchema | undefined>();
+  const [validationErrors, setValidationErrors] = useState<string[]>([]);
+  const [showValidation, setShowValidation] = useState(true);
+
+  // Auto-detect schema from payload
+  useEffect(() => {
+    try {
+      const parsed = JSON.parse(payload);
+      if (parsed.event_type) {
+        const schema = getSchemaByEventType(parsed.event_type);
+        setSelectedSchema(schema);
+      }
+    } catch {
+      // Invalid JSON, ignore
+    }
+  }, [payload]);
 
   const handleFormat = () => {
     try {
@@ -49,6 +70,15 @@ export function PayloadEditor() {
     setPayload(DEFAULT_PAYLOAD);
   };
 
+  const handleTemplateSelect = (template: PayloadSchema) => {
+    setPayload(JSON.stringify(template.example, null, 2));
+    setSelectedSchema(template);
+  };
+
+  const handleValidationChange = (valid: boolean, errors: string[]) => {
+    setValidationErrors(errors);
+  };
+
   // Sync scroll between textarea and highlight overlay
   const handleScroll = (e: React.UIEvent<HTMLTextAreaElement>) => {
     const pre = e.currentTarget.previousElementSibling as HTMLElement | null;
@@ -64,30 +94,100 @@ export function PayloadEditor() {
       <div className="flex items-center justify-between px-4 py-2 border-b border-zinc-800 bg-zinc-900">
         <div className="flex items-center gap-2">
           <span className="text-xs font-semibold uppercase tracking-widest text-zinc-400">
-            Payload
+            Payload Editor
           </span>
-          {payloadError && (
-            <span className="text-xs text-red-400 font-mono truncate max-w-xs">
-              ✗ {payloadError}
+          {selectedSchema && (
+            <span className="text-xs px-2 py-0.5 rounded bg-blue-500/20 text-blue-400 font-mono">
+              {selectedSchema.eventType}
             </span>
           )}
-          {!payloadError && payload.trim() && (
-            <span className="text-xs text-green-400">✓ valid JSON</span>
-          )}
         </div>
         <div className="flex items-center gap-2">
+          <TemplateSelector
+            onSelectTemplate={handleTemplateSelect}
+            currentEventType={selectedSchema?.eventType}
+          />
+          {selectedSchema && (
+            <>
+              <SchemaViewer schema={selectedSchema} />
+              <PayloadBuilder
+                schema={selectedSchema}
+                onPayloadChange={setPayload}
+                initialPayload={payload}
+              />
+            </>
+          )}
+          <div className="w-px h-4 bg-zinc-700" />
           <button
             onClick={handleFormat}
             className="text-xs px-2 py-1 rounded bg-zinc-800 text-zinc-300 hover:bg-zinc-700 transition-colors"
+            title="Format JSON"
           >
             Format
           </button>
           <button
             onClick={handleReset}
             className="text-xs px-2 py-1 rounded bg-zinc-800 text-zinc-300 hover:bg-zinc-700 transition-colors"
+            title="Reset to default"
           >
             Reset
           </button>
+          <button
+            onClick={() => setShowValidation(!showValidation)}
+            className={`text-xs px-2 py-1 rounded transition-colors ${
+              showValidation
+                ? 'bg-blue-600 text-white'
+                : 'bg-zinc-800 text-zinc-300 hover:bg-zinc-700'
+            }`}
+            title="Toggle validation"
+          >
+            {showValidation ? '✓' : '○'} Validate
+          </button>
+        </div>
+      </div>
+
+      {/* Status bar */}
+      <div className="px-4 py-1.5 border-b border-zinc-800 bg-zinc-900/50 flex items-center justify-between">
+        <div className="flex items-center gap-3">
+          {payloadError && (
+            <span className="text-xs text-red-400 font-mono flex items-center gap-1">
+              <svg className="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
+                <path
+                  fillRule="evenodd"
+                  d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
+                  clipRule="evenodd"
+                />
+              </svg>
+              {payloadError}
+            </span>
+          )}
+          {!payloadError && payload.trim() && (
+            <span className="text-xs text-green-400 flex items-center gap-1">
+              <svg className="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
+                <path
+                  fillRule="evenodd"
+                  d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
+                  clipRule="evenodd"
+                />
+              </svg>
+              Valid JSON
+            </span>
+          )}
+          {showValidation && selectedSchema && validationErrors.length === 0 && !payloadError && (
+            <span className="text-xs text-green-400 flex items-center gap-1">
+              <svg className="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
+                <path
+                  fillRule="evenodd"
+                  d="M6.267 3.455a3.066 3.066 0 001.745-.723 3.066 3.066 0 013.976 0 3.066 3.066 0 001.745.723 3.066 3.066 0 012.812 2.812c.051.643.304 1.254.723 1.745a3.066 3.066 0 010 3.976 3.066 3.066 0 00-.723 1.745 3.066 3.066 0 01-2.812 2.812 3.066 3.066 0 00-1.745.723 3.066 3.066 0 01-3.976 0 3.066 3.066 0 00-1.745-.723 3.066 3.066 0 01-2.812-2.812 3.066 3.066 0 00-.723-1.745 3.066 3.066 0 010-3.976 3.066 3.066 0 00.723-1.745 3.066 3.066 0 012.812-2.812zm7.44 5.252a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
+                  clipRule="evenodd"
+                />
+              </svg>
+              Schema Valid
+            </span>
+          )}
+        </div>
+        <div className="text-xs text-zinc-500">
+          {payload.length} characters • {payload.split('\n').length} lines
         </div>
       </div>
 
@@ -110,6 +210,15 @@ export function PayloadEditor() {
         />
       </div>
 
+      {/* Schema validation panel */}
+      {showValidation && selectedSchema && (
+        <SchemaValidator
+          payload={payload}
+          schema={selectedSchema}
+          onValidationChange={handleValidationChange}
+        />
+      )}
+
       {/* Send button */}
       <div className="px-4 py-3 border-t border-zinc-800 bg-zinc-900 flex items-center gap-3">
         {selectedWebhook && (
diff --git a/admin/app/webhook-tester/components/SchemaValidator.tsx b/admin/app/webhook-tester/components/SchemaValidator.tsx
new file mode 100644
index 00000000..24aff550
--- /dev/null
+++ b/admin/app/webhook-tester/components/SchemaValidator.tsx
@@ -0,0 +1,80 @@
+'use client';
+
+import React from 'react';
+import { validatePayload, type PayloadSchema } from '../schemas';
+
+interface SchemaValidatorProps {
+  payload: string;
+  schema?: PayloadSchema;
+  onValidationChange?: (valid: boolean, errors: string[]) => void;
+}
+
+export function SchemaValidator({ payload, schema, onValidationChange }: SchemaValidatorProps) {
+  const validation = React.useMemo(() => {
+    return validatePayload(payload, schema);
+  }, [payload, schema]);
+
+  React.useEffect(() => {
+    onValidationChange?.(validation.valid, validation.errors);
+  }, [validation, onValidationChange]);
+
+  if (!schema) {
+    return null;
+  }
+
+  return (
+    <div className="px-4 py-2 border-t border-zinc-800 bg-zinc-900/50">
+      <div className="flex items-start gap-2">
+        {validation.valid ? (
+          <>
+            <svg
+              className="w-4 h-4 text-green-400 flex-shrink-0 mt-0.5"
+              fill="currentColor"
+              viewBox="0 0 20 20"
+            >
+              <path
+                fillRule="evenodd"
+                d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
+                clipRule="evenodd"
+              />
+            </svg>
+            <div className="flex-1 min-w-0">
+              <p className="text-xs font-medium text-green-400">
+                Valid {schema.name} payload
+              </p>
+              <p className="text-xs text-zinc-500 mt-0.5">
+                All required fields present and types match
+              </p>
+            </div>
+          </>
+        ) : (
+          <>
+            <svg
+              className="w-4 h-4 text-red-400 flex-shrink-0 mt-0.5"
+              fill="currentColor"
+              viewBox="0 0 20 20"
+            >
+              <path
+                fillRule="evenodd"
+                d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
+                clipRule="evenodd"
+              />
+            </svg>
+            <div className="flex-1 min-w-0">
+              <p className="text-xs font-medium text-red-400">
+                {validation.errors.length} validation error{validation.errors.length !== 1 ? 's' : ''}
+              </p>
+              <ul className="mt-1 space-y-0.5">
+                {validation.errors.map((error, idx) => (
+                  <li key={idx} className="text-xs text-zinc-400">
+                    • {error}
+                  </li>
+                ))}
+              </ul>
+            </div>
+          </>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/admin/app/webhook-tester/components/SchemaViewer.tsx b/admin/app/webhook-tester/components/SchemaViewer.tsx
new file mode 100644
index 00000000..36bf49f1
--- /dev/null
+++ b/admin/app/webhook-tester/components/SchemaViewer.tsx
@@ -0,0 +1,186 @@
+'use client';
+
+import React, { useState } from 'react';
+import { type PayloadSchema, type SchemaProperty } from '../schemas';
+
+interface SchemaViewerProps {
+  schema: PayloadSchema;
+}
+
+function PropertyRow({ name, property, level = 0 }: { name: string; property: SchemaProperty; level?: number }) {
+  const [isExpanded, setIsExpanded] = useState(level < 2);
+  const hasChildren = property.type === 'object' && property.properties;
+
+  return (
+    <div className="border-b border-zinc-800 last:border-b-0">
+      <div
+        className={`flex items-start gap-3 p-2 hover:bg-zinc-800/50 transition-colors ${
+          hasChildren ? 'cursor-pointer' : ''
+        }`}
+        onClick={() => hasChildren && setIsExpanded(!isExpanded)}
+        style={{ paddingLeft: `${level * 1 + 0.5}rem` }}
+      >
+        {hasChildren && (
+          <svg
+            className={`w-3 h-3 text-zinc-500 flex-shrink-0 mt-1 transition-transform ${
+              isExpanded ? 'rotate-90' : ''
+            }`}
+            fill="currentColor"
+            viewBox="0 0 20 20"
+          >
+            <path
+              fillRule="evenodd"
+              d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
+              clipRule="evenodd"
+            />
+          </svg>
+        )}
+        {!hasChildren && <div className="w-3 flex-shrink-0" />}
+
+        <div className="flex-1 min-w-0">
+          <div className="flex items-center gap-2 flex-wrap">
+            <span className="text-sm font-mono text-blue-400">{name}</span>
+            <span className="text-xs px-1.5 py-0.5 rounded bg-zinc-800 text-zinc-400 font-mono">
+              {property.type}
+            </span>
+            {property.required && (
+              <span className="text-xs px-1.5 py-0.5 rounded bg-red-500/20 text-red-400 font-medium">
+                required
+              </span>
+            )}
+            {property.format && (
+              <span className="text-xs px-1.5 py-0.5 rounded bg-purple-500/20 text-purple-400 font-mono">
+                {property.format}
+              </span>
+            )}
+          </div>
+          {property.description && (
+            <p className="text-xs text-zinc-400 mt-1">{property.description}</p>
+          )}
+          {property.example !== undefined && (
+            <div className="mt-1">
+              <span className="text-xs text-zinc-500">Example: </span>
+              <code className="text-xs text-green-400 font-mono">
+                {JSON.stringify(property.example)}
+              </code>
+            </div>
+          )}
+          {property.enum && (
+            <div className="mt-1">
+              <span className="text-xs text-zinc-500">Values: </span>
+              <code className="text-xs text-amber-400 font-mono">
+                {property.enum.join(' | ')}
+              </code>
+            </div>
+          )}
+        </div>
+      </div>
+
+      {hasChildren && isExpanded && property.properties && (
+        <div className="bg-zinc-900/30">
+          {Object.entries(property.properties).map(([childName, childProp]) => (
+            <PropertyRow
+              key={childName}
+              name={childName}
+              property={childProp}
+              level={level + 1}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export function SchemaViewer({ schema }: SchemaViewerProps) {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <div className="relative">
+      <button
+        onClick={() => setIsOpen(!isOpen)}
+        className="flex items-center gap-2 px-3 py-1.5 rounded bg-zinc-800 text-zinc-300 hover:bg-zinc-700 transition-colors text-xs font-medium"
+      >
+        <svg
+          className="w-3.5 h-3.5"
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={2}
+            d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
+          />
+        </svg>
+        Schema
+      </button>
+
+      {isOpen && (
+        <>
+          {/* Backdrop */}
+          <div
+            className="fixed inset-0 z-40"
+            onClick={() => setIsOpen(false)}
+          />
+
+          {/* Panel */}
+          <div className="absolute top-full left-0 mt-2 w-[32rem] bg-zinc-900 border border-zinc-700 rounded-lg shadow-xl z-50 overflow-hidden max-h-[32rem] flex flex-col">
+            {/* Header */}
+            <div className="p-4 border-b border-zinc-800 bg-zinc-900/80 backdrop-blur-sm sticky top-0">
+              <div className="flex items-start justify-between gap-3">
+                <div className="flex-1 min-w-0">
+                  <h3 className="text-sm font-semibold text-zinc-200">
+                    {schema.name}
+                  </h3>
+                  <p className="text-xs text-zinc-400 mt-1">
+                    {schema.description}
+                  </p>
+                </div>
+                <button
+                  onClick={() => setIsOpen(false)}
+                  className="text-zinc-400 hover:text-zinc-200 transition-colors"
+                >
+                  <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
+                    <path
+                      fillRule="evenodd"
+                      d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
+                      clipRule="evenodd"
+                    />
+                  </svg>
+                </button>
+              </div>
+            </div>
+
+            {/* Properties */}
+            <div className="flex-1 overflow-y-auto">
+              {Object.entries(schema.schema.properties).map(([name, property]) => (
+                <PropertyRow
+                  key={name}
+                  name={name}
+                  property={{
+                    ...property,
+                    required: schema.schema.required.includes(name),
+                  }}
+                />
+              ))}
+            </div>
+
+            {/* Footer */}
+            <div className="p-3 border-t border-zinc-800 bg-zinc-900/50">
+              <div className="flex items-center justify-between text-xs">
+                <span className="text-zinc-500">
+                  {Object.keys(schema.schema.properties).length} properties
+                </span>
+                <span className="text-zinc-500">
+                  {schema.schema.required.length} required
+                </span>
+              </div>
+            </div>
+          </div>
+        </>
+      )}
+    </div>
+  );
+}
diff --git a/admin/app/webhook-tester/components/TemplateSelector.tsx b/admin/app/webhook-tester/components/TemplateSelector.tsx
new file mode 100644
index 00000000..6a374f00
--- /dev/null
+++ b/admin/app/webhook-tester/components/TemplateSelector.tsx
@@ -0,0 +1,131 @@
+'use client';
+
+import React, { useState } from 'react';
+import { WEBHOOK_SCHEMAS, type PayloadSchema } from '../schemas';
+
+interface TemplateSelectorProps {
+  onSelectTemplate: (template: PayloadSchema) => void;
+  currentEventType?: string;
+}
+
+export function TemplateSelector({ onSelectTemplate, currentEventType }: TemplateSelectorProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [searchQuery, setSearchQuery] = useState('');
+
+  const filteredSchemas = WEBHOOK_SCHEMAS.filter(
+    (schema) =>
+      schema.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      schema.eventType.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      schema.description.toLowerCase().includes(searchQuery.toLowerCase())
+  );
+
+  const handleSelect = (schema: PayloadSchema) => {
+    onSelectTemplate(schema);
+    setIsOpen(false);
+    setSearchQuery('');
+  };
+
+  return (
+    <div className="relative">
+      <button
+        onClick={() => setIsOpen(!isOpen)}
+        className="flex items-center gap-2 px-3 py-1.5 rounded bg-zinc-800 text-zinc-300 hover:bg-zinc-700 transition-colors text-xs font-medium"
+      >
+        <svg
+          className="w-3.5 h-3.5"
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={2}
+            d="M4 5a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM14 5a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1h-4a1 1 0 01-1-1V5zM4 15a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1H5a1 1 0 01-1-1v-4zM14 15a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1h-4a1 1 0 01-1-1v-4z"
+          />
+        </svg>
+        Templates
+      </button>
+
+      {isOpen && (
+        <>
+          {/* Backdrop */}
+          <div
+            className="fixed inset-0 z-40"
+            onClick={() => setIsOpen(false)}
+          />
+
+          {/* Dropdown */}
+          <div className="absolute top-full left-0 mt-2 w-80 bg-zinc-900 border border-zinc-700 rounded-lg shadow-xl z-50 overflow-hidden">
+            {/* Search */}
+            <div className="p-3 border-b border-zinc-800">
+              <input
+                type="text"
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                placeholder="Search templates..."
+                className="w-full px-3 py-2 bg-zinc-950 border border-zinc-700 rounded text-sm text-zinc-200 placeholder-zinc-500 focus:outline-none focus:border-blue-500"
+                autoFocus
+              />
+            </div>
+
+            {/* Template list */}
+            <div className="max-h-96 overflow-y-auto">
+              {filteredSchemas.length === 0 ? (
+                <div className="p-4 text-center text-sm text-zinc-500">
+                  No templates found
+                </div>
+              ) : (
+                filteredSchemas.map((schema) => (
+                  <button
+                    key={schema.eventType}
+                    onClick={() => handleSelect(schema)}
+                    className={`w-full text-left p-3 hover:bg-zinc-800 transition-colors border-b border-zinc-800 last:border-b-0 ${
+                      currentEventType === schema.eventType ? 'bg-zinc-800/50' : ''
+                    }`}
+                  >
+                    <div className="flex items-start justify-between gap-2">
+                      <div className="flex-1 min-w-0">
+                        <div className="flex items-center gap-2">
+                          <span className="text-sm font-medium text-zinc-200">
+                            {schema.name}
+                          </span>
+                          <span className="text-xs px-1.5 py-0.5 rounded bg-blue-500/20 text-blue-400 font-mono">
+                            {schema.eventType}
+                          </span>
+                        </div>
+                        <p className="text-xs text-zinc-400 mt-1 line-clamp-2">
+                          {schema.description}
+                        </p>
+                      </div>
+                      {currentEventType === schema.eventType && (
+                        <svg
+                          className="w-4 h-4 text-green-400 flex-shrink-0"
+                          fill="currentColor"
+                          viewBox="0 0 20 20"
+                        >
+                          <path
+                            fillRule="evenodd"
+                            d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
+                            clipRule="evenodd"
+                          />
+                        </svg>
+                      )}
+                    </div>
+                  </button>
+                ))
+              )}
+            </div>
+
+            {/* Footer */}
+            <div className="p-2 border-t border-zinc-800 bg-zinc-900/50">
+              <p className="text-xs text-zinc-500 text-center">
+                {filteredSchemas.length} template{filteredSchemas.length !== 1 ? 's' : ''} available
+              </p>
+            </div>
+          </div>
+        </>
+      )}
+    </div>
+  );
+}
diff --git a/admin/app/webhook-tester/schemas.ts b/admin/app/webhook-tester/schemas.ts
new file mode 100644
index 00000000..346c37ad
--- /dev/null
+++ b/admin/app/webhook-tester/schemas.ts
@@ -0,0 +1,379 @@
+// Webhook Payload Schemas and Validation
+
+export interface SchemaProperty {
+  type: string;
+  description?: string;
+  example?: any;
+  required?: boolean;
+  enum?: string[];
+  format?: string;
+  items?: SchemaProperty;
+  properties?: Record<string, SchemaProperty>;
+}
+
+export interface PayloadSchema {
+  name: string;
+  description: string;
+  eventType: string;
+  schema: {
+    type: 'object';
+    properties: Record<string, SchemaProperty>;
+    required: string[];
+  };
+  example: Record<string, any>;
+}
+
+// Predefined schemas for common event types
+export const WEBHOOK_SCHEMAS: PayloadSchema[] = [
+  {
+    name: 'Test Event',
+    description: 'Simple test event for webhook validation',
+    eventType: 'test',
+    schema: {
+      type: 'object',
+      properties: {
+        event_type: {
+          type: 'string',
+          description: 'Type of the event',
+          example: 'test',
+        },
+        payload: {
+          type: 'object',
+          description: 'Event payload data',
+          properties: {
+            message: {
+              type: 'string',
+              description: 'Test message',
+              example: 'This is a test webhook',
+            },
+          },
+        },
+        contract_id: {
+          type: 'string',
+          description: 'Contract identifier',
+          example: 'CAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD2KM',
+        },
+        timestamp: {
+          type: 'string',
+          format: 'date-time',
+          description: 'Event timestamp',
+          example: new Date().toISOString(),
+        },
+      },
+      required: ['event_type', 'payload', 'contract_id', 'timestamp'],
+    },
+    example: {
+      event_type: 'test',
+      payload: { message: 'This is a test webhook' },
+      contract_id: 'CAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD2KM',
+      timestamp: new Date().toISOString(),
+    },
+  },
+  {
+    name: 'Transfer Event',
+    description: 'Token transfer event',
+    eventType: 'transfer',
+    schema: {
+      type: 'object',
+      properties: {
+        event_type: {
+          type: 'string',
+          description: 'Type of the event',
+          example: 'transfer',
+        },
+        payload: {
+          type: 'object',
+          description: 'Transfer details',
+          properties: {
+            from: {
+              type: 'string',
+              description: 'Sender address',
+              example: 'GAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAWHF',
+            },
+            to: {
+              type: 'string',
+              description: 'Recipient address',
+              example: 'GBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBWHF',
+            },
+            amount: {
+              type: 'string',
+              description: 'Transfer amount',
+              example: '1000000',
+            },
+            asset: {
+              type: 'string',
+              description: 'Asset code',
+              example: 'USDC',
+            },
+          },
+        },
+        contract_id: {
+          type: 'string',
+          description: 'Contract identifier',
+          example: 'CAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD2KM',
+        },
+        timestamp: {
+          type: 'string',
+          format: 'date-time',
+          description: 'Event timestamp',
+          example: new Date().toISOString(),
+        },
+        ledger: {
+          type: 'number',
+          description: 'Ledger sequence number',
+          example: 12345678,
+        },
+        transaction_hash: {
+          type: 'string',
+          description: 'Transaction hash',
+          example: 'a1b2c3d4e5f6g7h8i9j0k1l2m3n4o5p6q7r8s9t0u1v2w3x4y5z6',
+        },
+      },
+      required: ['event_type', 'payload', 'contract_id', 'timestamp'],
+    },
+    example: {
+      event_type: 'transfer',
+      payload: {
+        from: 'GAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAWHF',
+        to: 'GBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBWHF',
+        amount: '1000000',
+        asset: 'USDC',
+      },
+      contract_id: 'CAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD2KM',
+      timestamp: new Date().toISOString(),
+      ledger: 12345678,
+      transaction_hash: 'a1b2c3d4e5f6g7h8i9j0k1l2m3n4o5p6q7r8s9t0u1v2w3x4y5z6',
+    },
+  },
+  {
+    name: 'Mint Event',
+    description: 'Token minting event',
+    eventType: 'mint',
+    schema: {
+      type: 'object',
+      properties: {
+        event_type: {
+          type: 'string',
+          description: 'Type of the event',
+          example: 'mint',
+        },
+        payload: {
+          type: 'object',
+          description: 'Mint details',
+          properties: {
+            to: {
+              type: 'string',
+              description: 'Recipient address',
+              example: 'GAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAWHF',
+            },
+            amount: {
+              type: 'string',
+              description: 'Minted amount',
+              example: '5000000',
+            },
+            asset: {
+              type: 'string',
+              description: 'Asset code',
+              example: 'TOKEN',
+            },
+          },
+        },
+        contract_id: {
+          type: 'string',
+          description: 'Contract identifier',
+          example: 'CAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD2KM',
+        },
+        timestamp: {
+          type: 'string',
+          format: 'date-time',
+          description: 'Event timestamp',
+          example: new Date().toISOString(),
+        },
+        ledger: {
+          type: 'number',
+          description: 'Ledger sequence number',
+          example: 12345678,
+        },
+      },
+      required: ['event_type', 'payload', 'contract_id', 'timestamp'],
+    },
+    example: {
+      event_type: 'mint',
+      payload: {
+        to: 'GAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAWHF',
+        amount: '5000000',
+        asset: 'TOKEN',
+      },
+      contract_id: 'CAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD2KM',
+      timestamp: new Date().toISOString(),
+      ledger: 12345678,
+    },
+  },
+  {
+    name: 'Burn Event',
+    description: 'Token burning event',
+    eventType: 'burn',
+    schema: {
+      type: 'object',
+      properties: {
+        event_type: {
+          type: 'string',
+          description: 'Type of the event',
+          example: 'burn',
+        },
+        payload: {
+          type: 'object',
+          description: 'Burn details',
+          properties: {
+            from: {
+              type: 'string',
+              description: 'Burner address',
+              example: 'GAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAWHF',
+            },
+            amount: {
+              type: 'string',
+              description: 'Burned amount',
+              example: '2000000',
+            },
+            asset: {
+              type: 'string',
+              description: 'Asset code',
+              example: 'TOKEN',
+            },
+          },
+        },
+        contract_id: {
+          type: 'string',
+          description: 'Contract identifier',
+          example: 'CAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD2KM',
+        },
+        timestamp: {
+          type: 'string',
+          format: 'date-time',
+          description: 'Event timestamp',
+          example: new Date().toISOString(),
+        },
+      },
+      required: ['event_type', 'payload', 'contract_id', 'timestamp'],
+    },
+    example: {
+      event_type: 'burn',
+      payload: {
+        from: 'GAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAWHF',
+        amount: '2000000',
+        asset: 'TOKEN',
+      },
+      contract_id: 'CAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD2KM',
+      timestamp: new Date().toISOString(),
+    },
+  },
+  {
+    name: 'Custom Event',
+    description: 'Custom event with flexible structure',
+    eventType: 'custom',
+    schema: {
+      type: 'object',
+      properties: {
+        event_type: {
+          type: 'string',
+          description: 'Type of the event',
+          example: 'custom',
+        },
+        payload: {
+          type: 'object',
+          description: 'Custom payload data',
+          properties: {},
+        },
+        contract_id: {
+          type: 'string',
+          description: 'Contract identifier',
+          example: 'CAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD2KM',
+        },
+        timestamp: {
+          type: 'string',
+          format: 'date-time',
+          description: 'Event timestamp',
+          example: new Date().toISOString(),
+        },
+      },
+      required: ['event_type', 'payload', 'contract_id', 'timestamp'],
+    },
+    example: {
+      event_type: 'custom',
+      payload: {},
+      contract_id: 'CAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD2KM',
+      timestamp: new Date().toISOString(),
+    },
+  },
+];
+
+// Validation function
+export function validatePayload(
+  payload: string,
+  schema?: PayloadSchema
+): { valid: boolean; errors: string[] } {
+  const errors: string[] = [];
+
+  // Parse JSON
+  let parsed: any;
+  try {
+    parsed = JSON.parse(payload);
+  } catch (e) {
+    return { valid: false, errors: ['Invalid JSON syntax'] };
+  }
+
+  // Basic validation
+  if (typeof parsed !== 'object' || parsed === null) {
+    errors.push('Payload must be a JSON object');
+    return { valid: false, errors };
+  }
+
+  // Schema validation if provided
+  if (schema) {
+    const { required, properties } = schema.schema;
+
+    // Check required fields
+    for (const field of required) {
+      if (!(field in parsed)) {
+        errors.push(`Missing required field: ${field}`);
+      }
+    }
+
+    // Validate field types
+    for (const [key, prop] of Object.entries(properties)) {
+      if (key in parsed) {
+        const value = parsed[key];
+        const expectedType = prop.type;
+
+        if (expectedType === 'string' && typeof value !== 'string') {
+          errors.push(`Field "${key}" must be a string`);
+        } else if (expectedType === 'number' && typeof value !== 'number') {
+          errors.push(`Field "${key}" must be a number`);
+        } else if (expectedType === 'boolean' && typeof value !== 'boolean') {
+          errors.push(`Field "${key}" must be a boolean`);
+        } else if (expectedType === 'object' && (typeof value !== 'object' || value === null)) {
+          errors.push(`Field "${key}" must be an object`);
+        } else if (expectedType === 'array' && !Array.isArray(value)) {
+          errors.push(`Field "${key}" must be an array`);
+        }
+
+        // Validate enum values
+        if (prop.enum && !prop.enum.includes(value)) {
+          errors.push(`Field "${key}" must be one of: ${prop.enum.join(', ')}`);
+        }
+      }
+    }
+  }
+
+  return { valid: errors.length === 0, errors };
+}
+
+// Get schema by event type
+export function getSchemaByEventType(eventType: string): PayloadSchema | undefined {
+  return WEBHOOK_SCHEMAS.find((s) => s.eventType === eventType);
+}
+
+// Get all available event types
+export function getAvailableEventTypes(): string[] {
+  return WEBHOOK_SCHEMAS.map((s) => s.eventType);
+}
diff --git a/admin/package-lock.json b/admin/package-lock.json
index aca3e6ea..6bb1434c 100644
--- a/admin/package-lock.json
+++ b/admin/package-lock.json
@@ -10,7 +10,8 @@
       "dependencies": {
         "next": "16.1.6",
         "react": "19.2.3",
-        "react-dom": "19.2.3"
+        "react-dom": "19.2.3",
+        "recharts": "^2.12.0"
       },
       "devDependencies": {
         "@tailwindcss/postcss": "^4",
@@ -228,6 +229,15 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/@babel/runtime": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.29.7.tgz",
+      "integrity": "sha512-Nq8OhGWiZIZGV6hLHoyAKLLcJihP/xFeBMGJoUrxTX2psI8dCifzLhZISFb+VWS3wFMRDmCGw5R+dOySCqPLhw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
     "node_modules/@babel/template": {
       "version": "7.28.6",
       "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.28.6.tgz",
@@ -1524,6 +1534,69 @@
         "tslib": "^2.4.0"
       }
     },
+    "node_modules/@types/d3-array": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-array/-/d3-array-3.2.2.tgz",
+      "integrity": "sha512-hOLWVbm7uRza0BYXpIIW5pxfrKe0W+D5lrFiAEYR+pb6w3N2SwSMaJbXdUfSEv+dT4MfHBLtn5js0LAWaO6otw==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-color": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/@types/d3-color/-/d3-color-3.1.3.tgz",
+      "integrity": "sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-ease": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-ease/-/d3-ease-3.0.2.tgz",
+      "integrity": "sha512-NcV1JjO5oDzoK26oMzbILE6HW7uVXOHLQvHshBUW4UMdZGfiY6v5BeQwh9a9tCzv+CeefZQHJt5SRgK154RtiA==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-interpolate": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@types/d3-interpolate/-/d3-interpolate-3.0.4.tgz",
+      "integrity": "sha512-mgLPETlrpVV1YRJIglr4Ez47g7Yxjl1lj7YKsiMCb27VJH9W8NVM6Bb9d8kkpG/uAQS5AmbA48q2IAolKKo1MA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-color": "*"
+      }
+    },
+    "node_modules/@types/d3-path": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/@types/d3-path/-/d3-path-3.1.1.tgz",
+      "integrity": "sha512-VMZBYyQvbGmWyWVea0EHs/BwLgxc+MKi1zLDCONksozI4YJMcTt8ZEuIR4Sb1MMTE8MMW49v0IwI5+b7RmfWlg==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-scale": {
+      "version": "4.0.9",
+      "resolved": "https://registry.npmjs.org/@types/d3-scale/-/d3-scale-4.0.9.tgz",
+      "integrity": "sha512-dLmtwB8zkAeO/juAMfnV+sItKjlsw2lKdZVVy6LRr0cBmegxSABiLEpGVmSJJ8O08i4+sGR6qQtb6WtuwJdvVw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-time": "*"
+      }
+    },
+    "node_modules/@types/d3-shape": {
+      "version": "3.1.8",
+      "resolved": "https://registry.npmjs.org/@types/d3-shape/-/d3-shape-3.1.8.tgz",
+      "integrity": "sha512-lae0iWfcDeR7qt7rA88BNiqdvPS5pFVPpo5OfjElwNaT2yyekbM0C9vK+yqBqEmHr6lDkRnYNoTBYlAgJa7a4w==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-path": "*"
+      }
+    },
+    "node_modules/@types/d3-time": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@types/d3-time/-/d3-time-3.0.4.tgz",
+      "integrity": "sha512-yuzZug1nkAAaBlBBikKZTgzCeA+k1uy4ZFwWANOfKw5z5LRhV0gNA7gNkKm7HoK+HRN0wX3EkxGk0fpbWhmB7g==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-timer": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-timer/-/d3-timer-3.0.2.tgz",
+      "integrity": "sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw==",
+      "license": "MIT"
+    },
     "node_modules/@types/estree": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz",
@@ -2605,6 +2678,15 @@
       "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==",
       "license": "MIT"
     },
+    "node_modules/clsx": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/color-convert": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@@ -2658,9 +2740,129 @@
       "version": "3.2.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
       "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
-      "dev": true,
       "license": "MIT"
     },
+    "node_modules/d3-array": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-3.2.4.tgz",
+      "integrity": "sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==",
+      "license": "ISC",
+      "dependencies": {
+        "internmap": "1 - 2"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-color": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.1.0.tgz",
+      "integrity": "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-ease": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-3.0.1.tgz",
+      "integrity": "sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-format": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-3.1.2.tgz",
+      "integrity": "sha512-AJDdYOdnyRDV5b6ArilzCPPwc1ejkHcoyFarqlPqT7zRYjhavcT3uSrqcMvsgh2CgoPbK3RCwyHaVyxYcP2Arg==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-interpolate": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
+      "integrity": "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-color": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-path": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-3.1.0.tgz",
+      "integrity": "sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-scale": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-4.0.2.tgz",
+      "integrity": "sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-array": "2.10.0 - 3",
+        "d3-format": "1 - 3",
+        "d3-interpolate": "1.2.0 - 3",
+        "d3-time": "2.1.1 - 3",
+        "d3-time-format": "2 - 4"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-shape": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-3.2.0.tgz",
+      "integrity": "sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-path": "^3.1.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-time": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-3.1.0.tgz",
+      "integrity": "sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-array": "2 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-time-format": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-4.1.0.tgz",
+      "integrity": "sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-time": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-timer": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-3.0.1.tgz",
+      "integrity": "sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/damerau-levenshtein": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz",
@@ -2740,6 +2942,12 @@
         }
       }
     },
+    "node_modules/decimal.js-light": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/decimal.js-light/-/decimal.js-light-2.5.1.tgz",
+      "integrity": "sha512-qIMFpTMZmny+MMIitAB6D7iVPEorVw6YQRWkvarTkT4tBeSLLiHzcwj6q0MmYSFCiVpiqPJTJEYIrpcPzVEIvg==",
+      "license": "MIT"
+    },
     "node_modules/deep-is": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
@@ -2806,6 +3014,16 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/dom-helpers": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
+      "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.8.7",
+        "csstype": "^3.0.2"
+      }
+    },
     "node_modules/dunder-proto": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
@@ -3480,6 +3698,12 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/eventemitter3": {
+      "version": "4.0.7",
+      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz",
+      "integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==",
+      "license": "MIT"
+    },
     "node_modules/fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
@@ -3487,6 +3711,15 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/fast-equals": {
+      "version": "5.4.0",
+      "resolved": "https://registry.npmjs.org/fast-equals/-/fast-equals-5.4.0.tgz",
+      "integrity": "sha512-jt2DW/aNFNwke7AUd+Z+e6pz39KO5rzdbbFCg2sGafS4mk13MI7Z8O5z9cADNn5lhGODIgLwug6TZO2ctf7kcw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
     "node_modules/fast-glob": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.1.tgz",
@@ -3978,6 +4211,15 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/internmap": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/internmap/-/internmap-2.0.3.tgz",
+      "integrity": "sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/is-array-buffer": {
       "version": "3.0.5",
       "resolved": "https://registry.npmjs.org/is-array-buffer/-/is-array-buffer-3.0.5.tgz",
@@ -4439,7 +4681,6 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
       "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/js-yaml": {
@@ -4839,6 +5080,12 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/lodash": {
+      "version": "4.18.1",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.18.1.tgz",
+      "integrity": "sha512-dMInicTPVE8d1e5otfwmmjlxkZoUpiVLwyeTdUsi/Caj/gfzzblBcCE5sRHV/AsjuCmxWrte2TNGSYuCeCq+0Q==",
+      "license": "MIT"
+    },
     "node_modules/lodash.merge": {
       "version": "4.6.2",
       "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
@@ -4850,7 +5097,6 @@
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
       "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "js-tokens": "^3.0.0 || ^4.0.0"
@@ -5095,7 +5341,6 @@
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
       "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
@@ -5394,7 +5639,6 @@
       "version": "15.8.1",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
       "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "loose-envify": "^1.4.0",
@@ -5458,7 +5702,76 @@
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
-      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/react-smooth": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/react-smooth/-/react-smooth-4.0.4.tgz",
+      "integrity": "sha512-gnGKTpYwqL0Iii09gHobNolvX4Kiq4PKx6eWBCYYix+8cdw+cGo3do906l1NBPKkSWx1DghC1dlWG9L2uGd61Q==",
+      "license": "MIT",
+      "dependencies": {
+        "fast-equals": "^5.0.1",
+        "prop-types": "^15.8.1",
+        "react-transition-group": "^4.4.5"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/react-transition-group": {
+      "version": "4.4.5",
+      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
+      "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "@babel/runtime": "^7.5.5",
+        "dom-helpers": "^5.0.1",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.6.2"
+      },
+      "peerDependencies": {
+        "react": ">=16.6.0",
+        "react-dom": ">=16.6.0"
+      }
+    },
+    "node_modules/recharts": {
+      "version": "2.15.4",
+      "resolved": "https://registry.npmjs.org/recharts/-/recharts-2.15.4.tgz",
+      "integrity": "sha512-UT/q6fwS3c1dHbXv2uFgYJ9BMFHu3fwnd7AYZaEQhXuYQ4hgsxLvsUXzGdKeZrW5xopzDCvuA2N41WJ88I7zIw==",
+      "deprecated": "1.x and 2.x branches are no longer active. Bump to Recharts v3 to receive latest features and bugfixes. See https://github.com/recharts/recharts/wiki/3.0-migration-guide",
+      "license": "MIT",
+      "dependencies": {
+        "clsx": "^2.0.0",
+        "eventemitter3": "^4.0.1",
+        "lodash": "^4.17.21",
+        "react-is": "^18.3.1",
+        "react-smooth": "^4.0.4",
+        "recharts-scale": "^0.4.4",
+        "tiny-invariant": "^1.3.1",
+        "victory-vendor": "^36.6.8"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "peerDependencies": {
+        "react": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/recharts-scale": {
+      "version": "0.4.5",
+      "resolved": "https://registry.npmjs.org/recharts-scale/-/recharts-scale-0.4.5.tgz",
+      "integrity": "sha512-kivNFO+0OcUNu7jQquLXAxz1FIwZj8nrj+YkOKc5694NbjCvcT6aSZiIzNzd2Kul4o4rTto8QVR9lMNtxD4G1w==",
+      "license": "MIT",
+      "dependencies": {
+        "decimal.js-light": "^2.4.1"
+      }
+    },
+    "node_modules/recharts/node_modules/react-is": {
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz",
+      "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==",
       "license": "MIT"
     },
     "node_modules/reflect.getprototypeof": {
@@ -6094,6 +6407,12 @@
         "url": "https://opencollective.com/webpack"
       }
     },
+    "node_modules/tiny-invariant": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.3.tgz",
+      "integrity": "sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==",
+      "license": "MIT"
+    },
     "node_modules/tinyglobby": {
       "version": "0.2.15",
       "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.15.tgz",
@@ -6431,6 +6750,28 @@
         "punycode": "^2.1.0"
       }
     },
+    "node_modules/victory-vendor": {
+      "version": "36.9.2",
+      "resolved": "https://registry.npmjs.org/victory-vendor/-/victory-vendor-36.9.2.tgz",
+      "integrity": "sha512-PnpQQMuxlwYdocC8fIJqVXvkeViHYzotI+NJrCuav0ZYFoq912ZHBk3mCeuj+5/VpodOjPe1z0Fk2ihgzlXqjQ==",
+      "license": "MIT AND ISC",
+      "dependencies": {
+        "@types/d3-array": "^3.0.3",
+        "@types/d3-ease": "^3.0.0",
+        "@types/d3-interpolate": "^3.0.1",
+        "@types/d3-scale": "^4.0.2",
+        "@types/d3-shape": "^3.1.0",
+        "@types/d3-time": "^3.0.0",
+        "@types/d3-timer": "^3.0.0",
+        "d3-array": "^3.1.6",
+        "d3-ease": "^3.0.1",
+        "d3-interpolate": "^3.0.1",
+        "d3-scale": "^4.0.2",
+        "d3-shape": "^3.1.0",
+        "d3-time": "^3.0.0",
+        "d3-timer": "^3.0.1"
+      }
+    },
     "node_modules/which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",