Components

import '@hookbase/portal/styles.css';

import { HookbasePortal } from '@hookbase/portal';
 
<HookbasePortal
  token="whpt_abc123..."
  apiUrl="https://api.hookbase.app"
  theme=
  onError={(err) => console.error(err)}
>
  {children}
</HookbasePortal>

import { EndpointList } from '@hookbase/portal';
 
<EndpointList
  showActions={true}
  onEndpointClick={(endpoint) => setSelected(endpoint)}
  onEditClick={(endpoint) => openEditModal(endpoint)}
  onDeleteClick={(endpoint) => confirmDelete(endpoint)}
  emptyState={<MyCustomEmptyState />}
/>

import { EndpointForm } from '@hookbase/portal';
 
<EndpointForm
  mode="create"
  onSuccess={(endpoint, secret) => {
    console.log('Created:', endpoint.url);
    console.log('Secret:', secret); // Only on create
  }}
  onCancel={() => setShowForm(false)}
/>

import { EndpointSecretRotation } from '@hookbase/portal';
 
<EndpointSecretRotation
  endpoint={selectedEndpoint}
  onSuccess={(newSecret) => console.log('New secret:', newSecret)}
  onCancel={() => setShowRotation(false)}
/>

import { EventTypeList } from '@hookbase/portal';
 
<EventTypeList
  showSearch={true}
  selectedIds={subscribedEventTypeIds}
  onEventTypeClick={(eventType) => toggleSubscription(eventType)}
/>

import { SubscriptionManager } from '@hookbase/portal';
 
<SubscriptionManager
  endpointId={selectedEndpoint.id}
  variant="full"
  onChange={(subscribedIds) => console.log('Subscribed:', subscribedIds)}
/>

import { MessageLog } from '@hookbase/portal';
 
<MessageLog
  endpointId={selectedEndpoint?.id}
  status="failed"
  limit={25}
  refreshInterval={30000}
  onMessageClick={(message) => showDetail(message)}
/>

import {
  Button, Badge, Card, CardHeader, CardTitle, CardDescription,
  CardContent, CardFooter, Dialog, DialogTrigger, DialogContent,
  DialogHeader, DialogFooter, DialogTitle, DialogDescription,
  Input, Textarea, Label, Skeleton, SkeletonText,
  Checkbox, Switch,
} from '@hookbase/portal';

import { useState, useEffect } from 'react';
import {
  HookbasePortal,
  EndpointList,
  EndpointForm,
  SubscriptionManager,
  MessageLog,
} from '@hookbase/portal';
import '@hookbase/portal/styles.css';
 
export function WebhookDashboard() {
  const [token, setToken] = useState<string | null>(null);
  const [selected, setSelected] = useState<Endpoint | null>(null);
  const [showCreate, setShowCreate] = useState(false);
 
  useEffect(() => {
    fetch('/api/webhook-portal-token')
      .then(res => res.json())
      .then(data => setToken(data.token));
  }, []);
 
  if (!token) return <div>Loading...</div>;
 
  return (
    <HookbasePortal token={token}>
      <div style=>
        <div>
          <h2>Endpoints</h2>
          <button onClick={() => setShowCreate(true)}>Add Endpoint</button>
 
          {showCreate && (
            <EndpointForm
              onSuccess={(ep) => { setShowCreate(false); setSelected(ep); }}
              onCancel={() => setShowCreate(false)}
            />
          )}
 
          <EndpointList
            onEndpointClick={setSelected}
          />
        </div>
 
        <div>
          {selected ? (
            <SubscriptionManager endpointId={selected.id} />
          ) : (
            <p>Select an endpoint to manage subscriptions</p>
          )}
        </div>
      </div>
 
      <MessageLog
        endpointId={selected?.id}
        limit={25}
        refreshInterval={30000}
      />
    </HookbasePortal>
  );
}

interface HookbaseTheme {
  colors?: {
    primary?: string;
    background?: string;
    foreground?: string;
    muted?: string;
    mutedForeground?: string;
    border?: string;
    destructive?: string;
    success?: string;
    warning?: string;
  };
  borderRadius?: string;
  darkMode?: 'auto' | 'light' | 'dark';
}

interface Endpoint {
  id: string;
  url: string;
  description: string | null;
  isDisabled: boolean;
  circuitState: 'closed' | 'open' | 'half_open';
  totalMessages: number;
  totalSuccesses: number;
  totalFailures: number;
  isVerified: boolean;
  verifiedAt: string | null;
  createdAt: string;
  updatedAt: string;
}

interface OutboundMessage {
  id: string;
  eventType: string;
  endpointId: string;
  endpointUrl: string;
  status: 'pending' | 'success' | 'failed' | 'exhausted';
  attempts: number;
  lastAttemptAt: string | null;
  nextAttemptAt: string | null;
  createdAt: string;
}

interface EventType {
  id: string;
  name: string;
  displayName: string | null;
  description: string | null;
  category: string | null;
  schema: string | null;
  examplePayload: string | null;
  documentationUrl: string | null;
}