'use client'; import React, { useState } from 'react'; import { useRouter } from 'next/navigation'; import { Wallet, Plus, LogOut, User, Shield, Sparkles, Check, X, RefreshCw, } from 'lucide-react'; interface HeaderProps { user: any; walletBalance: number; onRefreshWallet?: () => void; } export default function Header({ user, walletBalance, onRefreshWallet }: HeaderProps) { const router = useRouter(); const [topUpModalOpen, setTopUpModalOpen] = useState(false); const [topUpAmount, setTopUpAmount] = useState('10000'); const [funding, setFunding] = useState(false); const [fundSuccess, setFundSuccess] = useState(false); const handleLogout = async () => { await fetch('/api/v1/auth/logout', { method: 'POST' }); router.push('/login'); }; const handleTopUp = async () => { setFunding(true); try { const res = await fetch('/api/v1/wallet', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ amount: parseFloat(topUpAmount) }), }); const data = await res.json(); if (data.success) { setFundSuccess(true); if (onRefreshWallet) onRefreshWallet(); setTimeout(() => { setFundSuccess(false); setTopUpModalOpen(false); }, 1200); } } catch { // Error handling } finally { setFunding(false); } }; return (
{/* Left: Environment details */}
Gateway: api.smartauth.ng
{/* Right: Wallet Balance & User Profile */}
{/* Wallet Balance Chip */}
Units {(walletBalance || 0).toLocaleString()} Units
{/* User Role & Name */}
{user?.name ? user.name.slice(0, 2) : 'SA'}
{user?.name || 'User'} {user?.role || 'STANDARD_USER'}
{/* Top Up Modal */} {topUpModalOpen && (

Instant Sandbox Top Up

In Sandbox mode, you can generate instant mock test credit without making any real financial payment.

{['5000', '10000', '50000'].map((amt) => ( ))}
setTopUpAmount(e.target.value)} className="w-full bg-slate-900 border border-slate-700 rounded-xl px-3.5 py-2 text-xs font-mono text-white focus:outline-none focus:border-emerald-500" />
)}
); }