381 lines
9.7 KiB
TypeScript
381 lines
9.7 KiB
TypeScript
'use client';
|
|
|
|
import {useState} from 'react';
|
|
import {proportional, pixel} from '@astryxdesign/core/Table';
|
|
import {ResponsiveTable} from '@/components/patterns/ResponsiveTable';
|
|
import type {TableColumn} from '@astryxdesign/core/Table';
|
|
import {VStack, HStack} from '@astryxdesign/core/Layout';
|
|
import {Text} from '@astryxdesign/core/Text';
|
|
import {Badge} from '@astryxdesign/core/Badge';
|
|
import {Button} from '@astryxdesign/core/Button';
|
|
import {TextInput} from '@astryxdesign/core/TextInput';
|
|
import {useToast} from '@astryxdesign/core/Toast';
|
|
import {StaticPanel} from '@/components/patterns/PanelCard';
|
|
|
|
export interface ApiKeyItem extends Record<string, unknown> {
|
|
id: string;
|
|
name: string;
|
|
keyPrefix: string;
|
|
created: string;
|
|
lastUsed: string;
|
|
status: 'active' | 'revoked';
|
|
}
|
|
|
|
export interface WebhookEndpointItem extends Record<string, unknown> {
|
|
id: string;
|
|
url: string;
|
|
events: string;
|
|
secret: string;
|
|
status: 'healthy' | 'failing';
|
|
}
|
|
|
|
export interface WebhookLogItem extends Record<string, unknown> {
|
|
id: string;
|
|
event: string;
|
|
url: string;
|
|
code: number;
|
|
latency: string;
|
|
timestamp: string;
|
|
}
|
|
|
|
const INITIAL_KEYS: ApiKeyItem[] = [
|
|
{
|
|
id: 'key-1',
|
|
name: 'Production POS Key',
|
|
keyPrefix: 'lmer_live_9f8a••••••••4b12',
|
|
created: '10 Jan 2026',
|
|
lastUsed: 'Just now',
|
|
status: 'active',
|
|
},
|
|
{
|
|
id: 'key-2',
|
|
name: 'Staging Integration Key',
|
|
keyPrefix: 'lmer_test_3d2c••••••••8e91',
|
|
created: '15 Jun 2026',
|
|
lastUsed: 'Yesterday',
|
|
status: 'active',
|
|
},
|
|
];
|
|
|
|
const INITIAL_WEBHOOKS: WebhookEndpointItem[] = [
|
|
{
|
|
id: 'wh-1',
|
|
url: 'https://api.nearle.in/webhooks/loyaly',
|
|
events: 'order.created, lyt.redeemed',
|
|
secret: 'whsec_8841••••••••9932',
|
|
status: 'healthy',
|
|
},
|
|
{
|
|
id: 'wh-2',
|
|
url: 'https://hooks.zapier.com/hooks/catch/19284',
|
|
events: 'staff.checkin, store.updated',
|
|
secret: 'whsec_7712••••••••1102',
|
|
status: 'healthy',
|
|
},
|
|
];
|
|
|
|
const WEBHOOK_LOGS: WebhookLogItem[] = [
|
|
{
|
|
id: 'log-101',
|
|
event: 'lyt.redeemed',
|
|
url: 'https://api.nearle.in/webhooks/loyaly',
|
|
code: 200,
|
|
latency: '142ms',
|
|
timestamp: 'Today, 15:42:01',
|
|
},
|
|
{
|
|
id: 'log-102',
|
|
event: 'order.created',
|
|
url: 'https://api.nearle.in/webhooks/loyaly',
|
|
code: 200,
|
|
latency: '185ms',
|
|
timestamp: 'Today, 15:38:12',
|
|
},
|
|
{
|
|
id: 'log-103',
|
|
event: 'staff.checkin',
|
|
url: 'https://hooks.zapier.com/hooks/catch/19284',
|
|
code: 200,
|
|
latency: '95ms',
|
|
timestamp: 'Today, 09:01:44',
|
|
},
|
|
];
|
|
|
|
export function ApiWebhooksManager() {
|
|
const toast = useToast();
|
|
const [keys, setKeys] = useState<ApiKeyItem[]>(INITIAL_KEYS);
|
|
const [webhooks, setWebhooks] = useState<WebhookEndpointItem[]>(INITIAL_WEBHOOKS);
|
|
const [newKeyName, setNewKeyName] = useState('');
|
|
const [isGenerating, setIsGenerating] = useState(false);
|
|
const [newWebhookUrl, setNewWebhookUrl] = useState('');
|
|
|
|
const handleGenerateKey = () => {
|
|
if (!newKeyName.trim()) {
|
|
toast({type: 'error', body: 'Key name is required'});
|
|
return;
|
|
}
|
|
const createdKey: ApiKeyItem = {
|
|
id: `key-${Date.now()}`,
|
|
name: newKeyName,
|
|
keyPrefix: `lmer_live_${Math.random().toString(36).substring(2, 6)}••••••••${Math.random().toString(36).substring(2, 6)}`,
|
|
created: 'Just now',
|
|
lastUsed: 'Never',
|
|
status: 'active',
|
|
};
|
|
setKeys((prev) => [createdKey, ...prev]);
|
|
setNewKeyName('');
|
|
setIsGenerating(false);
|
|
toast({body: `API Key "${newKeyName}" generated successfully`});
|
|
};
|
|
|
|
const handleRevokeKey = (id: string, name: string) => {
|
|
setKeys((prev) => prev.filter((k) => k.id !== id));
|
|
toast({body: `Revoked API Key "${name}"`});
|
|
};
|
|
|
|
const handleAddWebhook = () => {
|
|
if (!newWebhookUrl.trim()) {
|
|
toast({type: 'error', body: 'Webhook URL is required'});
|
|
return;
|
|
}
|
|
const newWh: WebhookEndpointItem = {
|
|
id: `wh-${Date.now()}`,
|
|
url: newWebhookUrl,
|
|
events: 'order.created, lyt.redeemed, staff.checkin',
|
|
secret: `whsec_${Math.random().toString(36).substring(2, 8)}••••`,
|
|
status: 'healthy',
|
|
};
|
|
setWebhooks((prev) => [newWh, ...prev]);
|
|
setNewWebhookUrl('');
|
|
toast({body: 'Webhook endpoint registered successfully'});
|
|
};
|
|
|
|
const keyColumns: TableColumn<ApiKeyItem>[] = [
|
|
{
|
|
key: 'name',
|
|
header: 'Key Name',
|
|
width: proportional(1.5),
|
|
renderCell: (row) => (
|
|
<VStack gap={0}>
|
|
<Text size="sm" weight="medium">
|
|
{row.name}
|
|
</Text>
|
|
<Text size="sm" color="secondary">
|
|
{row.keyPrefix}
|
|
</Text>
|
|
</VStack>
|
|
),
|
|
},
|
|
{
|
|
key: 'created',
|
|
header: 'Created Date',
|
|
width: proportional(1.2),
|
|
renderCell: (row) => <Text size="sm">{row.created}</Text>,
|
|
},
|
|
{
|
|
key: 'lastUsed',
|
|
header: 'Last Active',
|
|
width: proportional(1.2),
|
|
renderCell: (row) => (
|
|
<Text size="sm" color="secondary">
|
|
{row.lastUsed}
|
|
</Text>
|
|
),
|
|
},
|
|
{
|
|
key: 'status',
|
|
header: 'Status',
|
|
width: pixel(100),
|
|
renderCell: (row) => (
|
|
<Badge
|
|
variant={row.status === 'active' ? 'success' : 'error'}
|
|
label={row.status}
|
|
/>
|
|
),
|
|
},
|
|
{
|
|
key: 'actions',
|
|
header: 'Action',
|
|
width: pixel(100),
|
|
renderCell: (row) => (
|
|
<Button
|
|
size="sm"
|
|
variant="ghost"
|
|
label="Revoke"
|
|
onClick={() => handleRevokeKey(row.id, row.name)}
|
|
/>
|
|
),
|
|
},
|
|
];
|
|
|
|
const webhookColumns: TableColumn<WebhookEndpointItem>[] = [
|
|
{
|
|
key: 'url',
|
|
header: 'Endpoint URL',
|
|
width: proportional(2),
|
|
renderCell: (row) => (
|
|
<VStack gap={0}>
|
|
<Text size="sm" weight="medium">
|
|
{row.url}
|
|
</Text>
|
|
<Text size="sm" color="secondary">
|
|
Events: {row.events}
|
|
</Text>
|
|
</VStack>
|
|
),
|
|
},
|
|
{
|
|
key: 'secret',
|
|
header: 'Signing Secret',
|
|
width: proportional(1.2),
|
|
renderCell: (row) => (
|
|
<Text size="sm" color="secondary">
|
|
{row.secret}
|
|
</Text>
|
|
),
|
|
},
|
|
{
|
|
key: 'status',
|
|
header: 'Health',
|
|
width: pixel(100),
|
|
renderCell: (row) => (
|
|
<Badge
|
|
variant={row.status === 'healthy' ? 'success' : 'error'}
|
|
label={row.status}
|
|
/>
|
|
),
|
|
},
|
|
];
|
|
|
|
const logColumns: TableColumn<WebhookLogItem>[] = [
|
|
{
|
|
key: 'event',
|
|
header: 'Event',
|
|
width: proportional(1.2),
|
|
renderCell: (row) => (
|
|
<Text size="sm" weight="medium">
|
|
{row.event}
|
|
</Text>
|
|
),
|
|
},
|
|
{
|
|
key: 'url',
|
|
header: 'Target URL',
|
|
width: proportional(2),
|
|
renderCell: (row) => (
|
|
<Text size="sm" color="secondary">
|
|
{row.url}
|
|
</Text>
|
|
),
|
|
},
|
|
{
|
|
key: 'code',
|
|
header: 'HTTP Code',
|
|
width: pixel(100),
|
|
renderCell: (row) => (
|
|
<Badge
|
|
variant={row.code === 200 ? 'success' : 'error'}
|
|
label={`${row.code} OK`}
|
|
/>
|
|
),
|
|
},
|
|
{
|
|
key: 'latency',
|
|
header: 'Latency',
|
|
width: pixel(90),
|
|
renderCell: (row) => <Text size="sm">{row.latency}</Text>,
|
|
},
|
|
{
|
|
key: 'timestamp',
|
|
header: 'Timestamp',
|
|
width: proportional(1.2),
|
|
renderCell: (row) => (
|
|
<Text size="sm" color="secondary">
|
|
{row.timestamp}
|
|
</Text>
|
|
),
|
|
},
|
|
];
|
|
|
|
return (
|
|
<VStack gap={5}>
|
|
<StaticPanel
|
|
title="Developer API Keys"
|
|
subtitle="Manage authentication tokens for custom POS clients and server SDKs."
|
|
actions={
|
|
<Button
|
|
variant="primary"
|
|
size="sm"
|
|
label={isGenerating ? 'Cancel' : 'Generate Secret Key'}
|
|
onClick={() => setIsGenerating(!isGenerating)}
|
|
/>
|
|
}
|
|
>
|
|
<VStack gap={4}>
|
|
{isGenerating ? (
|
|
<HStack gap={3} vAlign="end" wrap="wrap">
|
|
<TextInput
|
|
label="API Key Description"
|
|
value={newKeyName}
|
|
onChange={setNewKeyName}
|
|
placeholder="e.g. Indiranagar Counter 2 POS"
|
|
/>
|
|
<Button
|
|
variant="primary"
|
|
size="sm"
|
|
label="Generate Token"
|
|
onClick={handleGenerateKey}
|
|
/>
|
|
</HStack>
|
|
) : null}
|
|
|
|
<ResponsiveTable
|
|
columns={keyColumns}
|
|
data={keys}
|
|
primaryKey="name"
|
|
/>
|
|
</VStack>
|
|
</StaticPanel>
|
|
|
|
<StaticPanel
|
|
title="Webhook Subscriptions & Endpoints"
|
|
subtitle="Real-time HTTP POST callbacks for order, redemption and staff events."
|
|
>
|
|
<VStack gap={4}>
|
|
<HStack gap={3} vAlign="end" wrap="wrap">
|
|
<TextInput
|
|
label="Add Webhook Endpoint URL"
|
|
value={newWebhookUrl}
|
|
onChange={setNewWebhookUrl}
|
|
placeholder="https://yourdomain.com/webhooks/loyaly"
|
|
/>
|
|
<Button
|
|
variant="primary"
|
|
size="sm"
|
|
label="Add Endpoint"
|
|
onClick={handleAddWebhook}
|
|
/>
|
|
</HStack>
|
|
|
|
<ResponsiveTable
|
|
columns={webhookColumns}
|
|
data={webhooks}
|
|
primaryKey="url"
|
|
/>
|
|
</VStack>
|
|
</StaticPanel>
|
|
|
|
<StaticPanel
|
|
title="Webhook Delivery Logs"
|
|
subtitle="Recent HTTP delivery attempts, latency and status response codes."
|
|
>
|
|
<ResponsiveTable
|
|
columns={logColumns}
|
|
data={WEBHOOK_LOGS}
|
|
primaryKey="event"
|
|
/>
|
|
</StaticPanel>
|
|
</VStack>
|
|
);
|
|
}
|