update ui changes

src/features/settings/components/ApiWebhooksManager.tsx

@@ -11,6 +11,13 @@ import {Button} from '@astryxdesign/core/Button';
 import {TextInput} from '@astryxdesign/core/TextInput';
 import {useToast} from '@astryxdesign/core/Toast';
 import {StaticPanel} from '@/shared/components/patterns/PanelCard';
+import {
+  SAMPLE_API_KEYS,
+  SAMPLE_WEBHOOKS,
+  SAMPLE_WEBHOOK_LOGS,
+  sampleApiKeyPrefix,
+  sampleWebhookSecret,
+} from '@/shared/mocks/sampleData';
 
 export interface ApiKeyItem extends Record<string, unknown> {
   id: string;
@@ -38,73 +45,10 @@ export interface WebhookLogItem extends Record<string, unknown> {
   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 [keys, setKeys] = useState<ApiKeyItem[]>(SAMPLE_API_KEYS);
+  const [webhooks, setWebhooks] = useState<WebhookEndpointItem[]>(SAMPLE_WEBHOOKS);
   const [newKeyName, setNewKeyName] = useState('');
   const [isGenerating, setIsGenerating] = useState(false);
   const [newWebhookUrl, setNewWebhookUrl] = useState('');
@@ -117,7 +61,7 @@ export function ApiWebhooksManager() {
     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)}`,
+      keyPrefix: sampleApiKeyPrefix(),
       created: 'Just now',
       lastUsed: 'Never',
       status: 'active',
@@ -142,7 +86,7 @@ export function ApiWebhooksManager() {
       id: `wh-${Date.now()}`,
       url: newWebhookUrl,
       events: 'order.created, lyt.redeemed, staff.checkin',
-      secret: `whsec_${Math.random().toString(36).substring(2, 8)}••••`,
+      secret: sampleWebhookSecret(),
       status: 'healthy',
     };
     setWebhooks((prev) => [newWh, ...prev]);
@@ -374,7 +318,7 @@ export function ApiWebhooksManager() {
       >
         <ResponsiveTable
             columns={logColumns}
-            data={WEBHOOK_LOGS}
+            data={SAMPLE_WEBHOOK_LOGS}
             primaryKey="event"
           />
       </StaticPanel>