Merge pull request #388 from infimum90/feat--fix-issues-76-215-226-216

Author: therealjhay

app/(admin)/layout.tsx

@@ -1,7 +1,8 @@
 "use client";
 
 import { useState } from 'react';
-import { AdminSidebar, adminNavItems } from '@/components/layout';
+import { AdminSidebar } from '@/components/layout';
+import { adminNavItems } from '@/lib/navigation/adminNav';
 import { PageTransition } from '@/components/shared';
 import { MobileNavDrawer } from '@/components/layout';
 import { Topbar } from '@/components/layout';

app/(merchant)/developers/page.tsx

@@ -6,7 +6,7 @@ import { Button } from '@/components/ui';
 import { Input } from '@/components/ui';
 import { Skeleton } from '@/components/ui';
 import { NetworkTooltip } from '@/components/ui';
-import { Copy, Eye, EyeOff, Plus, RefreshCcw, Key, Globe, BookOpen, Zap, CheckCircle2, AlertCircle, Code2, Terminal, Trash2 } from 'lucide-react';
+import { Copy, Eye, EyeOff, Plus, Key, Globe, BookOpen, Code2, Terminal, Trash2 } from 'lucide-react';
 import { useNotify } from '@/lib/hooks/useNotify';
 import {
   Select,
@@ -19,6 +19,7 @@ import { useOfflineStore } from '@/lib/store/offlineStore';
 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from '@/components/ui';
 import { Label } from '@/components/ui';
 import { RateLimitDisplay } from '@/components/developers/RateLimitDisplay';
+import { WebhookTester } from '@/components/developers/WebhookTester';
 
 const CodeExample = dynamic(() => import('@/components/developers/CodeExample').then(m => ({ default: m.CodeExample })), {
   loading: () => <Skeleton className="h-64 rounded-xl" />,
@@ -29,61 +30,9 @@ const initialKeys = [
   { id: 'key_02', name: 'Sandbox Key', prefix: 'bp_test_', suffix: '...c2d8', created: '2026-01-05', lastUsed: '5 days ago', type: 'test', scope: 'read_write' },
 ];
 
-const EVENT_TYPES = [
-  { value: 'payment.received', label: 'payment.received' },
-  { value: 'settlement.completed', label: 'settlement.completed' },
-  { value: 'payment.failed', label: 'payment.failed' },
-];
-
-type JsonValue = string | number | boolean | null | JsonValue[] | { [key: string]: JsonValue };
-
-const SAMPLE_PAYLOADS: Record<string, JsonValue> = {
-  'payment.received': {
-    "id": "evt_123456",
-    "type": "payment.received",
-    "data": {
-      "payment_id": "pay_987654",
-      "amount": 5000,
-      "currency": "USDC",
-      "status": "completed",
-      "customer": {
-        "email": "customer@example.com"
-      }
-    },
-    "created_at": "2026-07-23T12:00:00Z"
-  },
-  'settlement.completed': {
-    "id": "evt_234567",
-    "type": "settlement.completed",
-    "data": {
-      "settlement_id": "set_112233",
-      "amount": 4900,
-      "currency": "USDC",
-      "fee": 100,
-      "status": "processed"
-    },
-    "created_at": "2026-07-23T13:00:00Z"
-  },
-  'payment.failed': {
-    "id": "evt_345678",
-    "type": "payment.failed",
-    "data": {
-      "payment_id": "pay_failed_111",
-      "amount": 5000,
-      "currency": "USDC",
-      "status": "failed",
-      "reason": "insufficient_funds"
-    },
-    "created_at": "2026-07-23T14:00:00Z"
-  }
-};
-
 export default function DevelopersPage() {
   const [keys, setKeys] = useState(initialKeys);
   const [showKey, setShowKey] = useState<string | null>(null);
-  const [selectedEvent, setSelectedEvent] = useState<string>('payment.received');
-  const [isSimulating, setIsSimulating] = useState(false);
-  const [simulationResult, setSimulationResult] = useState<{ status: number; message: string } | null>(null);
   const isOnline = useOfflineStore((s) => s.isOnline);
   const notify = useNotify();
 
@@ -123,20 +72,6 @@ export default function DevelopersPage() {
     notify.info('API key revoked');
   };
 
-  const handleSendTest = () => {
-    setIsSimulating(true);
-    setSimulationResult(null);
-
-    setTimeout(() => {
-      setIsSimulating(false);
-      setSimulationResult({
-        status: 200,
-        message: 'Webhook delivered successfully with signature verification pass'
-      });
-      notify.success('Test webhook delivered');
-    }, 1200);
-  };
-
   return (
     <div className="space-y-8 pb-8">
       <div>
@@ -269,87 +204,7 @@ export default function DevelopersPage() {
         </CardContent>
       </Card>
 
-      {/* Test Webhook Simulator Section */}
-      <Card className="border border-border bg-card shadow-sm">
-        <CardHeader>
-          <CardTitle className="text-base font-semibold text-foreground flex items-center gap-2">
-            <Zap className="w-4 h-4 text-primary" /> Test Webhook Simulator
-          </CardTitle>
-          <CardDescription>
-            Simulate webhook events to verify signature verification and payload handlers.
-          </CardDescription>
-        </CardHeader>
-        <CardContent className="space-y-6">
-          <div className="flex flex-col sm:flex-row gap-4 items-end">
-            <div className="flex-1 space-y-2">
-              <label className="text-xs font-semibold text-foreground">Event Type</label>
-              <Select value={selectedEvent} onValueChange={(value) => value && setSelectedEvent(value)}>
-                <SelectTrigger className="w-full h-10 border-border rounded-xl bg-muted">
-                  <SelectValue placeholder="Select event type" />
-                </SelectTrigger>
-                <SelectContent>
-                  {EVENT_TYPES.map((type) => (
-                    <SelectItem key={type.value} value={type.value}>
-                      {type.label}
-                    </SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
-            </div>
-            <Button
-              onClick={handleSendTest}
-              disabled={isSimulating}
-              className="bg-foreground hover:bg-foreground/90 text-background rounded-xl h-10 px-6 text-sm font-semibold min-w-[140px]"
-            >
-              {isSimulating ? (
-                <>
-                  <RefreshCcw className="w-3.5 h-3.5 mr-2 animate-spin" />
-                  Sending...
-                </>
-              ) : (
-                'Send Test'
-              )}
-            </Button>
-          </div>
-
-          <div className="space-y-2">
-            <div className="flex items-center justify-between">
-              <label className="text-xs font-semibold text-foreground">Simulated Payload</label>
-              <Button
-                variant="ghost"
-                size="sm"
-                className="min-h-[44px] text-xs text-muted-foreground hover:text-foreground"
-                onClick={() => handleCopy(JSON.stringify(SAMPLE_PAYLOADS[selectedEvent], null, 2))}
-              >
-                <Copy className="w-3 h-3 mr-1" /> Copy JSON
-              </Button>
-            </div>
-            <div className="bg-foreground rounded-xl p-4 overflow-x-auto border border-border">
-              <pre className="text-xs text-emerald-400 font-mono leading-relaxed">
-                {JSON.stringify(SAMPLE_PAYLOADS[selectedEvent], null, 2)}
-              </pre>
-            </div>
-          </div>
-
-          {simulationResult && (
-            <div className={`p-4 rounded-xl border flex items-start gap-3 animate-in fade-in slide-in-from-top-2 duration-300 ${
-              simulationResult.status === 200
-                ? 'bg-success/10 border-success/20 text-success'
-                : 'bg-destructive/10 border-destructive/20 text-destructive'
-            }`}>
-              {simulationResult.status === 200 ? (
-                <CheckCircle2 className="w-5 h-5 text-success shrink-0 mt-0.5" />
-              ) : (
-                <AlertCircle className="w-5 h-5 text-destructive shrink-0 mt-0.5" />
-              )}
-              <div>
-                <p className="text-sm font-semibold">Response Status: {simulationResult.status} OK</p>
-                <p className="text-xs opacity-80">{simulationResult.message}</p>
-              </div>
-            </div>
-          )}
-        </CardContent>
-      </Card>
+      <WebhookTester />
 
       {/* New API Key Dialog */}
       <Dialog open={isCreateKeyOpen} onOpenChange={setIsCreateKeyOpen}>

app/(merchant)/layout.tsx

@@ -3,14 +3,18 @@
 import { useCallback, useState, useEffect } from "react";
 import { useRouter } from "next/navigation";
 import { AlertTriangle } from "lucide-react";
-import { MerchantSidebar, merchantNavItems } from "@/components/layout";
+import { MerchantSidebar } from "@/components/layout";
+import { merchantNavItems } from "@/lib/navigation/merchantNav";
 import { PageTransition } from "@/components/shared";
 import { MobileNavDrawer } from "@/components/layout";
 import { Topbar } from "@/components/layout";
 import Footer from "@/components/layout";
 import { MobileBottomNav } from "@/components/layout";
 import { OnboardingWizard } from "@/components/onboarding/OnboardingWizard";
 import { useWalletStore } from "@/lib/store/walletStore";
+import { useAuthStore } from "@/lib/store/authStore";
+import { useSessionTimeout } from "@/lib/hooks/useSessionTimeout";
+import { SessionTimeoutModal } from "@/components/SessionTimeoutModal";
 
 export default function MerchantLayout({
   children,
@@ -21,11 +25,32 @@ export default function MerchantLayout({
   const router = useRouter();
   const network = useWalletStore((s) => s.network);
   const isTestnet = network === 'testnet';
+  const isAuthenticated = useAuthStore((s) => s.isAuthenticated);
+  const logout = useAuthStore((s) => s.logout);
 
   const closeMobileMenu = useCallback(() => {
     setMobileMenuOpen(false);
   }, []);
 
+  const handleTimeoutLogout = useCallback(() => {
+    logout();
+    router.push('/auth/login');
+  }, [logout, router]);
+
+  const { showWarning, secondsRemaining, dismissWarning } = useSessionTimeout({
+    onTimeout: handleTimeoutLogout,
+  });
+
+  const handleExtend = useCallback(async () => {
+    try {
+      await fetch('/api/auth/refresh', { method: 'POST', credentials: 'include' });
+      dismissWarning();
+    } catch {
+      logout();
+      router.push('/auth/login');
+    }
+  }, [logout, router, dismissWarning]);
+
   useEffect(() => {
     router.prefetch("/transactions");
     router.prefetch("/payments");
@@ -65,6 +90,15 @@ export default function MerchantLayout({
 
         <Footer />
       </div>
+
+      {isAuthenticated && (
+        <SessionTimeoutModal
+          open={showWarning}
+          secondsRemaining={secondsRemaining}
+          onExtend={handleExtend}
+          onLogout={handleTimeoutLogout}
+        />
+      )}
     </div>
   );
 }

components/SessionTimeoutModal.tsx

@@ -9,33 +9,72 @@ import {
   DialogTitle,
 } from '@/components/ui/dialog';
 import { Button } from '@/components/ui';
+import { AlertTriangle, Clock, LogOut, RefreshCcw } from 'lucide-react';
 
 interface SessionTimeoutModalProps {
   open: boolean;
   secondsRemaining: number;
-  onDismiss: () => void;
+  onExtend: () => void;
+  onLogout: () => void;
+}
+
+function formatCountdown(seconds: number): string {
+  const m = Math.floor(seconds / 60);
+  const s = seconds % 60;
+  return `${m}:${s.toString().padStart(2, '0')}`;
 }
 
 export function SessionTimeoutModal({
   open,
   secondsRemaining,
-  onDismiss,
+  onExtend,
+  onLogout,
 }: SessionTimeoutModalProps) {
   return (
-    <Dialog open={open} onOpenChange={(isOpen) => { if (!isOpen) onDismiss(); }}>
-      <DialogContent className="sm:max-w-md">
+    <Dialog open={open} onOpenChange={() => {}}>
+      <DialogContent className="sm:max-w-md" showCloseButton={false}>
         <DialogHeader>
-          <DialogTitle>Session Expiring</DialogTitle>
-          <DialogDescription>
-            Your session will expire due to inactivity in{' '}
-            <span className="font-semibold text-foreground">
-              {secondsRemaining} second{secondsRemaining !== 1 ? 's' : ''}
-            </span>
-            .
-          </DialogDescription>
+          <div className="flex items-center gap-3 mb-2">
+            <div className="w-10 h-10 rounded-full bg-warning/20 flex items-center justify-center">
+              <AlertTriangle className="w-5 h-5 text-warning" />
+            </div>
+            <div>
+              <DialogTitle>Session Expiring</DialogTitle>
+              <DialogDescription>
+                Your session will expire due to inactivity.
+              </DialogDescription>
+            </div>
+          </div>
         </DialogHeader>
-        <DialogFooter>
-          <Button onClick={onDismiss}>Stay Logged In</Button>
+
+        <div className="flex flex-col items-center py-4">
+          <div className="relative w-24 h-24 flex items-center justify-center">
+            <Clock className="w-12 h-12 text-warning/60 absolute" />
+            <span className="text-2xl font-bold text-foreground z-10">
+              {formatCountdown(secondsRemaining)}
+            </span>
+          </div>
+          <p className="text-sm text-muted-foreground mt-2">
+            Time remaining before automatic logout
+          </p>
+        </div>
+
+        <DialogFooter className="flex-col sm:flex-row gap-2">
+          <Button
+            variant="outline"
+            onClick={onLogout}
+            className="w-full sm:w-auto rounded-xl border-destructive/30 text-destructive hover:bg-destructive/10"
+          >
+            <LogOut className="w-4 h-4 mr-2" />
+            Logout
+          </Button>
+          <Button
+            onClick={onExtend}
+            className="w-full sm:w-auto rounded-xl bg-primary hover:bg-primary/90 text-primary-foreground"
+          >
+            <RefreshCcw className="w-4 h-4 mr-2" />
+            Extend Session
+          </Button>
         </DialogFooter>
       </DialogContent>
     </Dialog>