Merge pull request #142 from devdianax/main

Author: therealjhay

app/(admin)/layout.tsx

@@ -1,9 +1,11 @@
 "use client";
 
 import { useState } from 'react';
-import { AdminSidebar } from '@/components/layout/AdminSidebar';
+import { AdminSidebar, adminNavItems } from '@/components/layout/AdminSidebar';
+import { MobileNavDrawer } from '@/components/layout/MobileNavDrawer';
 import { Topbar } from '@/components/layout/Topbar';
 import Footer from '@/components/layout/Footer';
+import { ShieldCheck } from 'lucide-react';
 
 export default function AdminLayout({
   children,
@@ -15,7 +17,18 @@ export default function AdminLayout({
   return (
     <div className="flex h-screen overflow-hidden bg-background">
       <AdminSidebar />
-      {/* Mobile nav drawer would go here */}
+      <MobileNavDrawer
+        isOpen={mobileMenuOpen}
+        onClose={() => setMobileMenuOpen(false)}
+        navItems={adminNavItems}
+        brandLabel="BettaPay ADMIN"
+        logo={
+          <span className="font-bold text-xl tracking-tight text-sidebar-foreground flex items-center gap-2">
+            <ShieldCheck className="w-5 h-5 text-primary" />
+            BettaPay <span className="text-primary text-sm font-normal ml-0.5">ADMIN</span>
+          </span>
+        }
+      />
 
       <div className="flex-1 flex flex-col min-w-0 overflow-hidden">
         <Topbar onMenuClick={() => setMobileMenuOpen(!mobileMenuOpen)} isMenuOpen={mobileMenuOpen} title="Platform Operations" />

app/(merchant)/dashboard/page.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Button } from '@/components/ui/button';
 import { CurrencyDisplay } from '@/components/shared/CurrencyDisplay';
@@ -93,6 +93,15 @@ export default function DashboardPage() {
   const { user } = useAuthStore();
   const [activePeriod, setActivePeriod] = useState<Period>('7D');
   const [selectedTx, setSelectedTx] = useState<Transaction | null>(null);
+  const [isMobile, setIsMobile] = useState(false);
+
+  useEffect(() => {
+    const mq = window.matchMedia('(max-width: 639px)');
+    setIsMobile(mq.matches);
+    const handler = (e: MediaQueryListEvent) => setIsMobile(e.matches);
+    mq.addEventListener('change', handler);
+    return () => mq.removeEventListener('change', handler);
+  }, []);
 
   // Error simulation states
   const [simulationEnabled, setSimulationEnabled] = useState(false);
@@ -268,7 +277,7 @@ export default function DashboardPage() {
                     key={p}
                     onClick={() => setActivePeriod(p)}
                     className={cn(
-                      'px-3 py-1 rounded-md text-xs font-semibold transition-all',
+                      'min-h-[44px] min-w-[44px] px-3 py-1 rounded-md text-xs font-semibold transition-all',
                       activePeriod === p
                         ? 'bg-white text-slate-900 shadow-sm'
                         : 'text-slate-400 hover:text-slate-600'
@@ -291,7 +300,7 @@ export default function DashboardPage() {
             ) : (
               <div className="h-[260px] w-full">
                 <ResponsiveContainer width="100%" height="100%">
-                  <AreaChart data={mockChartData} margin={{ top: 4, right: 4, bottom: 0, left: -16 }}>
+                  <AreaChart data={mockChartData} margin={{ top: 4, right: 4, bottom: 0, left: isMobile ? 0 : -16 }}>
                     <defs>
                       <linearGradient id="colorRevenue" x1="0" y1="0" x2="0" y2="1">
                         <stop offset="5%" stopColor="#F0A500" stopOpacity={0.25} />
@@ -354,7 +363,7 @@ export default function DashboardPage() {
             <div className="flex items-center justify-between">
               <CardTitle className="text-base font-semibold text-slate-900">Recent Activity</CardTitle>
               <Link href="/transactions">
-                <Button variant="ghost" className="text-xs text-amber-600 hover:text-amber-700 hover:bg-amber-50 h-7 px-2 rounded-lg font-semibold">
+                <Button variant="ghost" className="text-xs text-amber-600 hover:text-amber-700 hover:bg-amber-50 min-h-[44px] px-2 rounded-lg font-semibold">
                   View all <ChevronRight className="w-3 h-3 ml-0.5" />
                 </Button>
               </Link>
@@ -443,7 +452,7 @@ export default function DashboardPage() {
             <div className="flex items-center justify-between">
               <CardTitle className="text-base font-semibold text-slate-900">Payment Link Performance</CardTitle>
               <Link href="/payments">
-                <Button variant="ghost" className="text-xs text-amber-600 hover:text-amber-700 hover:bg-amber-50 h-7 px-2 rounded-lg font-semibold">
+                <Button variant="ghost" className="text-xs text-amber-600 hover:text-amber-700 hover:bg-amber-50 min-h-[44px] px-2 rounded-lg font-semibold">
                   Manage <ArrowRight className="w-3 h-3 ml-0.5" />
                 </Button>
               </Link>
@@ -485,11 +494,11 @@ export default function DashboardPage() {
                         <span className="text-xs text-slate-400">{link.clicks} clicks</span>
                       </div>
                       <div className="flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
-                        <Button variant="ghost" size="icon" aria-label="Copy payment link" className="h-7 w-7 rounded-lg" onClick={() => handleCopy(`https://${link.url}`)}>
+                        <Button variant="ghost" size="icon" aria-label="Copy payment link" className="min-h-[44px] min-w-[44px] rounded-lg" onClick={() => handleCopy(`https://${link.url}`)}>
                           <Copy className="w-3 h-3 text-slate-400" />
                         </Button>
                         <Link href={`https://${link.url}`} target="_blank">
-                          <Button variant="ghost" size="icon" aria-label="Open payment link" className="h-7 w-7 rounded-lg">
+                          <Button variant="ghost" size="icon" aria-label="Open payment link" className="min-h-[44px] min-w-[44px] rounded-lg">
                             <ExternalLink className="w-3 h-3 text-slate-400" />
                           </Button>
                         </Link>

app/(merchant)/fx/page.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Button } from '@/components/ui/button';
 import { RefreshCcw, TrendingUp, TrendingDown, Info, Bell, BellRing, Trash2, Plus, ArrowRight, X } from 'lucide-react';
@@ -15,7 +15,6 @@ import {
   SelectValue,
 } from "@/components/ui/select";
 import { Input } from '@/components/ui/input';
-import { useEffect } from 'react';
 
 const fxHistory = [
   { date: 'Jan 7', rate: 1480 },
@@ -57,7 +56,16 @@ interface RateAlert {
 export default function FxRatesPage() {
   const [lastRefresh] = useState('Just now');
   const [alerts, setAlerts] = useState<RateAlert[]>([]);
+  const [isMobile, setIsMobile] = useState(false);
   const notify = useNotify();
+
+  useEffect(() => {
+    const mq = window.matchMedia('(max-width: 639px)');
+    setIsMobile(mq.matches);
+    const handler = (e: MediaQueryListEvent) => setIsMobile(e.matches);
+    mq.addEventListener('change', handler);
+    return () => mq.removeEventListener('change', handler);
+  }, []);
   const [newPair, setNewPair] = useState('USDC/NGN');
   const [newCondition, setNewCondition] = useState<'above' | 'below'>('above');
   const [newTarget, setNewTarget] = useState('');
@@ -178,7 +186,7 @@ export default function FxRatesPage() {
           <CardContent>
             <div className="h-[240px]">
               <ResponsiveContainer width="100%" height="100%">
-                <LineChart data={fxHistory} margin={{ top: 4, right: 4, bottom: 0, left: -10 }}>
+                <LineChart data={fxHistory} margin={{ top: 4, right: 4, bottom: 0, left: isMobile ? 0 : -10 }}>
                   <CartesianGrid strokeDasharray="3 3" stroke="#F1F5F9" vertical={false} />
                   <XAxis dataKey="date" fontSize={11} tickLine={false} axisLine={false} tick={{ fill: '#94A3B8' }} />
                   <YAxis fontSize={11} tickLine={false} axisLine={false} tickFormatter={(v) => `₦${v}`} tick={{ fill: '#94A3B8' }} domain={['auto', 'auto']} />
@@ -320,7 +328,7 @@ export default function FxRatesPage() {
                         size="icon" 
                         aria-label={alert.enabled ? "Disable alert" : "Enable alert"}
                         className={cn(
-                          "h-8 w-8 rounded-lg",
+                          "min-h-[44px] min-w-[44px] rounded-lg",
                           alert.enabled ? "text-emerald-500 hover:text-emerald-600 hover:bg-emerald-50" : "text-slate-400 hover:text-slate-600 hover:bg-slate-200"
                         )}
                         onClick={() => toggleAlert(alert.id)}
@@ -331,7 +339,7 @@ export default function FxRatesPage() {
                         variant="ghost" 
                         size="icon" 
                         aria-label="Delete alert"
-                        className="h-8 w-8 rounded-lg text-slate-400 hover:text-red-500 hover:bg-red-50"
+                        className="min-h-[44px] min-w-[44px] rounded-lg text-slate-400 hover:text-red-500 hover:bg-red-50"
                         onClick={() => deleteAlert(alert.id)}
                       >
                         <Trash2 className="w-3.5 h-3.5" />

app/(merchant)/transactions/page.tsx

@@ -79,7 +79,7 @@ export default function TransactionsPage() {
 
       <Card className="bg-brand-surface border-border/50 shadow-sm">
         <CardContent className="pt-4">
-          <div className="rounded-md border border-border/50 overflow-hidden">
+          <div className="rounded-md border border-border/50 overflow-x-auto hidden md:block">
             <Table>
               <TableHeader className="bg-muted/50">
                 <TableRow className="border-border/50 hover:bg-transparent">
@@ -146,6 +146,60 @@ export default function TransactionsPage() {
               </TableBody>
             </Table>
           </div>
+
+          <div className="md:hidden space-y-3">
+            {filteredTransactions.length === 0 ? (
+              <EmptyState
+                icon={SearchX}
+                title={searchTerm ? 'No transactions match your search' : 'No transactions found'}
+                description={
+                  searchTerm
+                    ? 'Try adjusting your search terms or clearing filters.'
+                    : 'Transactions will appear here once payments are received.'
+                }
+                action={
+                  searchTerm
+                    ? { label: 'Clear search', onClick: () => setSearchTerm('') }
+                    : undefined
+                }
+              />
+            ) : (
+              filteredTransactions.map((tx) => (
+                <div
+                  key={tx.id}
+                  className="border border-border/50 rounded-lg p-4 space-y-3 cursor-pointer hover:bg-muted/30 transition-colors"
+                  onClick={() => setSelectedTx(tx)}
+                >
+                  <div className="flex items-center justify-between">
+                    <span className="text-sm text-muted-foreground">{formatDate(tx.timestamp)}</span>
+                    <StatusBadge status={tx.status} />
+                  </div>
+                  <div className="space-y-2">
+                    <div className="flex items-center justify-between">
+                      <span className="text-xs text-muted-foreground">Payer</span>
+                      <CopyAddress address={tx.payerAddress} />
+                    </div>
+                    <div className="flex items-center justify-between">
+                      <span className="text-xs text-muted-foreground">Tx Hash</span>
+                      <CopyAddress address={tx.txHash} />
+                    </div>
+                    <div className="flex items-center justify-between">
+                      <span className="text-xs text-muted-foreground">Source</span>
+                      <span className="text-sm text-muted-foreground">{tx.source}</span>
+                    </div>
+                    <div className="flex items-center justify-between">
+                      <span className="text-xs text-muted-foreground">Amount (USDC)</span>
+                      <CurrencyDisplay amount={tx.amountUsdc} currency="USDC" />
+                    </div>
+                    <div className="flex items-center justify-between">
+                      <span className="text-xs text-muted-foreground">Amount (NGN)</span>
+                      <CurrencyDisplay amount={tx.amountNgn} currency="NGN" showDecimals={false} />
+                    </div>
+                  </div>
+                </div>
+              ))
+            )}
+          </div>
         </CardContent>
       </Card>
 

components/layout/AdminSidebar.tsx

@@ -14,7 +14,7 @@ import {
   ShieldCheck
 } from 'lucide-react';
 
-const navItems = [
+export const adminNavItems = [
   { href: '/overview', label: 'Platform Overview', icon: BarChart3 },
   { href: '/merchants', label: 'Merchants', icon: Users },
   { href: '/admin/transactions', label: 'Transactions', icon: ListOrdered },
@@ -39,7 +39,7 @@ export const AdminSidebar = () => {
       </div>
 
       <nav className="flex-1 px-4 py-4 space-y-1">
-        {navItems.map((item) => {
+        {adminNavItems.map((item) => {
           const isActive = pathname.startsWith(item.href);
           const Icon = item.icon;
 

components/layout/MobileNavDrawer.tsx

@@ -0,0 +1,108 @@
+"use client";
+
+import { useEffect } from 'react';
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import { cn } from '@/lib/utils';
+import { X } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+
+interface NavItem {
+  href: string;
+  label: string;
+  icon: React.ComponentType<{ className?: string }>;
+}
+
+interface MobileNavDrawerProps {
+  isOpen: boolean;
+  onClose: () => void;
+  navItems: NavItem[];
+  brandLabel?: string;
+  logo?: React.ReactNode;
+}
+
+export const MobileNavDrawer = ({
+  isOpen,
+  onClose,
+  navItems,
+  brandLabel = 'BettaPay',
+  logo,
+}: MobileNavDrawerProps) => {
+  const pathname = usePathname();
+
+  useEffect(() => {
+    if (isOpen) {
+      document.body.style.overflow = 'hidden';
+    } else {
+      document.body.style.overflow = '';
+    }
+    return () => {
+      document.body.style.overflow = '';
+    };
+  }, [isOpen]);
+
+  return (
+    <>
+      <div
+        className={cn(
+          'fixed inset-0 z-40 bg-black/50 transition-opacity duration-300 md:hidden',
+          isOpen ? 'opacity-100' : 'opacity-0 pointer-events-none'
+        )}
+        onClick={onClose}
+        aria-hidden="true"
+      />
+      <div
+        className={cn(
+          'fixed inset-y-0 left-0 z-50 w-64 bg-sidebar border-r border-sidebar-border shadow-xl transform transition-transform duration-300 ease-in-out md:hidden',
+          isOpen ? 'translate-x-0' : '-translate-x-full'
+        )}
+        role="dialog"
+        aria-modal="true"
+        aria-label="Mobile navigation"
+      >
+        <div className="flex items-center justify-between p-6">
+          {logo ? (
+            logo
+          ) : (
+            <span className="font-bold text-xl tracking-tight text-sidebar-foreground">
+              {brandLabel}
+            </span>
+          )}
+          <Button
+            variant="ghost"
+            size="icon"
+            onClick={onClose}
+            className="text-sidebar-foreground/60 hover:text-sidebar-foreground min-h-[44px] min-w-[44px]"
+            aria-label="Close navigation menu"
+          >
+            <X className="h-5 w-5" />
+          </Button>
+        </div>
+
+        <nav className="flex-1 px-4 py-4 space-y-1">
+          {navItems.map((item) => {
+            const isActive = pathname.startsWith(item.href);
+            const Icon = item.icon;
+
+            return (
+              <Link
+                key={item.href}
+                href={item.href}
+                onClick={onClose}
+                className={cn(
+                  "flex items-center gap-3 px-3 py-2.5 rounded-md text-sm font-medium transition-colors border-l-2 min-h-[44px]",
+                  isActive
+                    ? "border-primary bg-sidebar-accent/30 text-sidebar-foreground"
+                    : "border-transparent text-muted-foreground hover:bg-sidebar-accent/20 hover:text-sidebar-foreground"
+                )}
+              >
+                <Icon className="w-5 h-5" />
+                {item.label}
+              </Link>
+            );
+          })}
+        </nav>
+      </div>
+    </>
+  );
+};

components/layout/Topbar.tsx

@@ -49,7 +49,7 @@ export const Topbar = ({ onMenuClick, isMenuOpen, title }: TopbarProps) => {
         <Button 
           variant="ghost" 
           size="icon" 
-          className="md:hidden text-slate-400 hover:text-slate-700"
+          className="md:hidden text-slate-400 hover:text-slate-700 min-h-[44px] min-w-[44px]"
           onClick={onMenuClick}
           aria-expanded={isMenuOpen}
           aria-label="Toggle mobile menu"
@@ -72,7 +72,7 @@ export const Topbar = ({ onMenuClick, isMenuOpen, title }: TopbarProps) => {
         </div>
 
         {/* Notifications */}
-        <Button variant="ghost" size="icon" aria-label="View notifications" className="relative text-slate-400 hover:text-slate-700 hover:bg-slate-100 rounded-xl h-9 w-9">
+        <Button variant="ghost" size="icon" aria-label="View notifications" className="relative text-slate-400 hover:text-slate-700 hover:bg-slate-100 rounded-xl min-h-[44px] min-w-[44px]">
           <Bell className="h-4.5 w-4.5" />
           <span className="absolute top-1.5 right-1.5 h-2 w-2 rounded-full bg-red-500 border-2 border-white"></span>
         </Button>
@@ -82,7 +82,7 @@ export const Topbar = ({ onMenuClick, isMenuOpen, title }: TopbarProps) => {
           <DropdownMenuTrigger render={
             <Button 
               variant="ghost" 
-              className="relative h-9 w-9 rounded-xl p-0 hover:bg-slate-100"
+              className="relative min-h-[44px] min-w-[44px] rounded-xl p-0 hover:bg-slate-100"
               aria-expanded={isDropdownOpen}
               aria-label="User menu"
             >

components/shared/CopyAddress.tsx

@@ -44,7 +44,7 @@ export const CopyAddress = ({
       <Button 
         variant="ghost" 
         size="icon" 
-        className={cn('h-8 w-8 text-muted-foreground hover:text-foreground', className)}
+        className={cn('min-h-[44px] min-w-[44px] text-muted-foreground hover:text-foreground', className)}
         onClick={handleCopy}
         title="Copy address"
         aria-label={`Copy address ${displayAddress}`}