update ui changes

2026-09-28 16:35:34 +05:30
parent 88f658fba9
commit f6d81ceaa8
87 changed files with 7157 additions and 1237 deletions
--- a/src/features/settings/components/ApiWebhooksManager.tsx
+++ b/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>
--- a/src/features/settings/components/BillingOverview.tsx
+++ b/src/features/settings/components/BillingOverview.tsx
@@ -26,36 +26,13 @@ export interface InvoiceItem extends Record<string, unknown> {
  downloadUrl: string;
 }

-const INVOICES: InvoiceItem[] = [
-  {
-    id: 'INV-2026-008',
-    date: '1 Aug 2026',
-    amount: 14999,
-    status: 'paid',
-    downloadUrl: '#',
-  },
-  {
-    id: 'INV-2026-007',
-    date: '1 Jul 2026',
-    amount: 14999,
-    status: 'paid',
-    downloadUrl: '#',
-  },
-  {
-    id: 'INV-2026-006',
-    date: '1 Jun 2026',
-    amount: 14999,
-    status: 'paid',
-    downloadUrl: '#',
-  },
-];
-
 import {DownloadDropdown} from '@/shared/components/patterns/DownloadDropdown';
+import {SAMPLE_BANK_ACCOUNT, SAMPLE_INVOICES} from '@/shared/mocks/sampleData';

 export function BillingOverview() {
  const toast = useToast();
-  const [bankAccount, setBankAccount] = useState('HDFC Bank •••• 8842');
-  const [ifsc, setIfsc] = useState('HDFC0001234');
+  const [bankAccount, setBankAccount] = useState(SAMPLE_BANK_ACCOUNT.account);
+  const [ifsc, setIfsc] = useState(SAMPLE_BANK_ACCOUNT.ifsc);
  const [isUpdatingBank, setIsUpdatingBank] = useState(false);

  const handleUpdateBank = () => {
@@ -220,7 +197,7 @@ export function BillingOverview() {
      <StaticPanel title="Invoice Statements & Payment History" subtitle="Download tax invoices and monthly receipts.">
        <ResponsiveTable
            columns={columns}
-            data={INVOICES}
+            data={SAMPLE_INVOICES}
            primaryKey="id"
          />
      </StaticPanel>
--- a/src/features/settings/components/BusinessForm.tsx
+++ b/src/features/settings/components/BusinessForm.tsx
@@ -11,6 +11,7 @@ import {Text} from '@astryxdesign/core/Text';
 import {Divider} from '@astryxdesign/core/Divider';
 import {useToast} from '@astryxdesign/core/Toast';
 import {StaticPanel} from '@/shared/components/patterns/PanelCard';
+import {SAMPLE_BUSINESS} from '@/shared/mocks/sampleData';

 export interface BusinessData {
  businessName: string;
@@ -26,25 +27,11 @@ export interface BusinessData {
  lytsPerHundred: number;
 }

-const DEFAULT_BUSINESS: BusinessData = {
-  businessName: 'Loyaly Retail Pvt Ltd',
-  legalEntity: 'Private Limited Company',
-  category: 'Retail & Quick Service Restaurant',
-  gstin: '29AABCL1234M1Z7',
-  pan: 'AABCL1234M',
-  phone: '+91 98450 12345',
-  email: 'aravind@nearle.in',
-  address: '100 Feet Road, Indiranagar',
-  city: 'Bengaluru, Karnataka',
-  pincode: '560038',
-  lytsPerHundred: 5,
-};
-
 export function BusinessForm() {
  const toast = useToast();
-  const [form, setForm] = useState<BusinessData>(DEFAULT_BUSINESS);
+  const [form, setForm] = useState<BusinessData>(SAMPLE_BUSINESS);
  const [isSaving, setIsSaving] = useState(false);
-  const [savedData, setSavedData] = useState<BusinessData>(DEFAULT_BUSINESS);
+  const [savedData, setSavedData] = useState<BusinessData>(SAMPLE_BUSINESS);

  const set = <K extends keyof BusinessData>(key: K, val: BusinessData[K]) =>
    setForm((f) => ({...f, [key]: val}));
--- a/src/features/settings/components/IntegrationsGrid.tsx
+++ b/src/features/settings/components/IntegrationsGrid.tsx
@@ -10,6 +10,7 @@ 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_INTEGRATIONS} from '@/shared/mocks/sampleData';

 export interface IntegrationApp {
  id: string;
@@ -21,69 +22,9 @@ export interface IntegrationApp {
  lastSync?: string;
 }

-const INITIAL_APPS: IntegrationApp[] = [
-  {
-    id: 'shopify',
-    name: 'Shopify Storefront',
-    category: 'E-commerce POS',
-    description: 'Sync online customer orders, cart totals and auto-issue LYT points.',
-    status: 'connected',
-    apiKeyLabel: 'myshopify-store.myshopify.com',
-    lastSync: '5 mins ago',
-  },
-  {
-    id: 'woocommerce',
-    name: 'WooCommerce',
-    category: 'E-commerce POS',
-    description: 'WordPress store integration for online checkout redemption.',
-    status: 'disconnected',
-  },
-  {
-    id: 'razorpay',
-    name: 'Razorpay PG',
-    category: 'Payment Gateway',
-    description: 'Automated settlement reconciliation and online UPI payment sync.',
-    status: 'connected',
-    apiKeyLabel: 'rzp_live_••••••••8841',
-    lastSync: 'Just now',
-  },
-  {
-    id: 'stripe',
-    name: 'Stripe Billing',
-    category: 'Payment Gateway',
-    description: 'International cards and subscription recurring billing handler.',
-    status: 'disconnected',
-  },
-  {
-    id: 'whatsapp',
-    name: 'WhatsApp Business API',
-    category: 'Messaging Channel',
-    description: 'Send instant transaction receipts, reward expiry notices and OTPs.',
-    status: 'connected',
-    apiKeyLabel: '+91 98450 12345 (Verified)',
-    lastSync: '2 mins ago',
-  },
-  {
-    id: 'google',
-    name: 'Google Business Profile',
-    category: 'Local Search & Maps',
-    description: 'Sync branch operating hours, store locations and customer reviews.',
-    status: 'connected',
-    apiKeyLabel: '5 locations synced',
-    lastSync: '1 hour ago',
-  },
-  {
-    id: 'meta',
-    name: 'Meta Ads & Conversions',
-    category: 'Marketing & Ads',
-    description: 'Track ad attribution, return on ad spend (ROAS) and retargeting.',
-    status: 'disconnected',
-  },
-];
-
 export function IntegrationsGrid() {
  const toast = useToast();
-  const [apps, setApps] = useState<IntegrationApp[]>(INITIAL_APPS);
+  const [apps, setApps] = useState<IntegrationApp[]>(SAMPLE_INTEGRATIONS);
  const [selectedApp, setSelectedApp] = useState<IntegrationApp | null>(null);
  const [apiKeyInput, setApiKeyInput] = useState('');

--- a/src/features/settings/components/SecurityManager.tsx
+++ b/src/features/settings/components/SecurityManager.tsx
@@ -17,6 +17,7 @@ import {EmptyPanel} from '@/shared/components/patterns/EmptyPanel';
 import {useResource} from '@/shared/hooks/useResource';
 import {securityRepository} from '@/features/settings/repositories/securityRepository';
 import type {DeviceSession} from '@/features/settings/services/mapSession';
+import {SAMPLE_LOGIN_AUDIT} from '@/shared/mocks/sampleData';

 export interface ActiveSessionItem extends Record<string, unknown> {
  id: string;
@@ -36,33 +37,6 @@ export interface LoginAuditItem extends Record<string, unknown> {
  timestamp: string;
 }

-const AUDIT_LOGS: LoginAuditItem[] = [
-  {
-    id: 'aud-1',
-    user: 'aravind@nearle.in',
-    ip: '103.15.24.81',
-    device: 'macOS Chrome',
-    status: 'success',
-    timestamp: 'Today, 14:02',
-  },
-  {
-    id: 'aud-2',
-    user: 'vikram@nearle.in',
-    ip: '106.51.72.19',
-    device: 'Windows Chrome',
-    status: 'success',
-    timestamp: 'Today, 11:15',
-  },
-  {
-    id: 'aud-3',
-    user: 'aravind@nearle.in',
-    ip: '185.220.101.5',
-    device: 'Unknown Linux Device',
-    status: 'failed',
-    timestamp: 'Yesterday, 22:30',
-  },
-];
-
 export function SecurityManager() {
  const toast = useToast();
  const [twoFactor, setTwoFactor] = useState(true);
@@ -311,7 +285,7 @@ export function SecurityManager() {
      <StaticPanel title="Login Audit Trail" subtitle="Recent account authentication events and security attempts.">
        <ResponsiveTable
            columns={auditColumns}
-            data={AUDIT_LOGS}
+            data={SAMPLE_LOGIN_AUDIT}
            primaryKey="user"
          />
      </StaticPanel>