Merge pull request #144 from Feyisara2108/feat/resolve-issues-23-24-25-26

Feat/resolve issues 23 24 25 26

Author: therealjhay

app/(admin)/layout.tsx

@@ -33,7 +33,7 @@ export default function AdminLayout({
       <div className="flex-1 flex flex-col min-w-0 overflow-hidden">
         <Topbar onMenuClick={() => setMobileMenuOpen(!mobileMenuOpen)} isMenuOpen={mobileMenuOpen} title="Platform Operations" />
         <main className="flex-1 overflow-y-auto bg-background/50">
-          <div className="mx-auto max-w-7xl px-4 sm:px-6 py-8">
+          <div className="mx-auto max-w-7xl px-3 sm:px-6 py-4 sm:py-8">
             {children}
           </div>
         </main>

app/(merchant)/layout.tsx

@@ -4,6 +4,7 @@ import { useState } from 'react';
 import { MerchantSidebar } from '@/components/layout/MerchantSidebar';
 import { Topbar } from '@/components/layout/Topbar';
 import Footer from '@/components/layout/Footer';
+import { MobileBottomNav } from '@/components/layout/MobileBottomNav';
 
 export default function MerchantLayout({
   children,
@@ -15,12 +16,13 @@ export default function MerchantLayout({
   return (
     <div className="flex h-screen overflow-hidden bg-background">
       <MerchantSidebar />
+      <MobileBottomNav />
       {/* Mobile nav drawer would go here, driven by mobileMenuOpen */}
 
       <div className="flex-1 flex flex-col min-w-0 overflow-hidden">
         <Topbar onMenuClick={() => setMobileMenuOpen(!mobileMenuOpen)} isMenuOpen={mobileMenuOpen} />
-        <main className="flex-1 overflow-y-auto bg-background/50">
-          <div className="mx-auto max-w-7xl px-4 sm:px-6 py-8">
+        <main className="flex-1 overflow-y-auto bg-background/50 pb-20 md:pb-0">
+          <div className="mx-auto max-w-7xl px-3 sm:px-6 py-4 sm:py-8">
             {children}
           </div>
         </main>

app/(merchant)/wallet/page.tsx

@@ -46,7 +46,7 @@ export default function WalletPage() {
       </div>
 
       {/* Wallet Card */}
-      <div className="relative rounded-2xl overflow-hidden bg-gradient-to-br from-slate-800 via-slate-900 to-slate-950 p-6 text-white shadow-xl">
+      <div className="relative rounded-2xl overflow-hidden bg-gradient-to-br from-slate-800 via-slate-900 to-slate-950 p-4 sm:p-6 text-white shadow-xl">
         <div className="absolute top-0 right-0 w-64 h-64 bg-amber-500/10 rounded-full -mr-20 -mt-20 blur-3xl pointer-events-none" />
         <div className="absolute bottom-0 left-0 w-48 h-48 bg-blue-500/10 rounded-full -ml-16 -mb-16 blur-3xl pointer-events-none" />
 
@@ -64,10 +64,10 @@ export default function WalletPage() {
             <p className="text-4xl font-bold"><CurrencyDisplay amount={12450.00} /> <span className="text-lg font-normal text-white/60">USDC</span></p>
           </div>
 
-          <div className="flex items-center justify-between">
+          <div className="flex flex-wrap items-center justify-between gap-4">
             <div>
               <p className="text-xs text-white/50 mb-1">Wallet Address</p>
-              <p className="font-mono text-sm text-white/80">{shortAddress}</p>
+              <p className="font-mono text-xs sm:text-sm text-white/80 break-all">{shortAddress}</p>
             </div>
             <div className="flex items-center gap-2">
               <Button onClick={handleCopy} variant="ghost" aria-label="Copy wallet address" className="h-8 w-8 p-0 rounded-lg bg-white/10 hover:bg-white/20 text-white">

app/auth/layout.tsx

@@ -13,20 +13,20 @@ export default function AuthLayout({ children }: { children: React.ReactNode })
       {/* Left Pane — Form */}
       <div className="w-full lg:w-[52%] flex flex-col bg-white">
         {/* Top bar */}
-        <div className="flex items-center gap-2.5 px-8 py-6 border-b border-slate-100">
+        <div className="flex items-center justify-center lg:justify-start gap-2.5 px-4 sm:px-8 py-6 border-b border-slate-100">
           <img src="/logo.png" alt="BettaPay Logo" className="w-8 h-8 rounded-lg object-contain" />
           <span className="font-bold text-slate-900 text-lg tracking-tight">BettaPay</span>
         </div>
 
         {/* Form content */}
-        <div className="flex-1 flex items-center justify-center px-8 py-12">
-          <div className="w-full max-w-[420px]">
+        <div className="flex-1 flex items-center justify-center px-4 sm:px-8 py-12">
+          <div className="w-full max-w-[420px] mx-auto">
             {children}
           </div>
         </div>
 
         {/* Bottom note */}
-        <div className="px-8 py-5 border-t border-slate-100">
+        <div className="px-4 sm:px-8 py-5 border-t border-slate-100 text-center lg:text-left">
           <p className="text-xs text-slate-400">
             By signing in, you agree to our{' '}
             <a href="#" className="underline hover:text-slate-600">Terms of Service</a>{' '}

app/page.tsx

@@ -30,7 +30,7 @@ export default function LandingPage() {
       <Header />
 
       {/* Hero Section */}
-      <main className="pt-24 pb-20 lg:pt-36 lg:pb-32">
+      <main className="pt-12 pb-12 lg:pt-36 lg:pb-32">
         <div className="container mx-auto px-6 text-center">
 
           {/* Badge */}

components/layout/MobileBottomNav.tsx

@@ -0,0 +1,49 @@
+"use client";
+
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import { cn } from '@/lib/utils';
+import { 
+  LayoutDashboard, 
+  Link as LinkIcon, 
+  ListOrdered, 
+  Wallet, 
+  Settings 
+} from 'lucide-react';
+
+const mobileNavItems = [
+  { href: '/dashboard', label: 'Overview', icon: LayoutDashboard },
+  { href: '/payments', label: 'Payments', icon: LinkIcon },
+  { href: '/transactions', label: 'History', icon: ListOrdered },
+  { href: '/wallet', label: 'Wallet', icon: Wallet },
+  { href: '/settings', label: 'Settings', icon: Settings },
+];
+
+export const MobileBottomNav = () => {
+  const pathname = usePathname();
+
+  return (
+    <div className="fixed bottom-0 md:hidden left-0 right-0 z-40 bg-white border-t border-slate-200 px-2 pt-2 pb-safe sm:pb-3 flex items-center justify-around shadow-[0_-4px_10px_rgba(0,0,0,0.02)]">
+      {mobileNavItems.map((item) => {
+        const isActive = pathname === item.href || pathname.startsWith(item.href + '/');
+        const Icon = item.icon;
+
+        return (
+          <Link
+            key={item.href}
+            href={item.href}
+            className={cn(
+              "flex flex-col items-center justify-center w-[68px] gap-1 py-1.5 rounded-lg transition-all",
+              isActive 
+                ? "text-amber-700 bg-amber-50" 
+                : "text-slate-500 hover:bg-slate-50 hover:text-slate-800"
+            )}
+          >
+            <Icon className={cn("w-5 h-5", isActive ? "text-amber-600" : "text-slate-400")} />
+            <span className="text-[10px] font-medium tracking-tight">{item.label}</span>
+          </Link>
+        );
+      })}
+    </div>
+  );
+};