Webhooks

Webhooks allow organizations to receive real-time HTTP callbacks when events occur in Planner. Configure a URL and select which events to subscribe to.

Model

Webhook
├── orgId (cascade delete)
├── url (target endpoint)
├── events (JSON array of event names)
├── secret (for HMAC signature verification)
├── enabled (toggle without deleting)
└── logs (WebhookLog[])

WebhookLog
├── webhookId
├── event (event name)
├── status (HTTP response code)
├── response (response body)
└── createdAt

API Endpoints

Method	Path	Description
GET	/api/orgs/:orgId/webhooks	List organization webhooks
POST	/api/webhooks	Create webhook
PATCH	/api/webhooks/:id	Update webhook
DELETE	/api/webhooks/:id	Delete webhook
GET	/api/webhooks/:id/logs	Delivery logs

Frontend

WebhookSettings Component

The WebhookSettings.vue component in organization settings provides:

• Webhook list with status toggle (enable/disable)
• Create/edit dialog with URL input and event selection
• Delivery logs viewer with status codes and response bodies

Webhook Store

const store = useWebhooksStore()

await store.fetchByOrg(orgId)
await store.create({ orgId, url, events })
await store.update(id, { url, events, enabled })
await store.remove(id)
await store.getLogs(id)

Key Implementation Details

• Each webhook has a secret used to sign payloads with HMAC-SHA256
• Delivery logs store the HTTP status code and response body for debugging
• Webhooks are scoped to organizations — all events within the org trigger the configured webhooks
• The enabled flag allows pausing delivery without deleting the webhook configuration