feat: Add back to home button to all sub pages

Added ArrowLeft navigation button to return to home page on:
- AdminPanel.tsx - Admin panel page
- ProfileSettings.tsx - Profile settings page
- PasswordReset.tsx - Password reset page
- EmailVerification.tsx - Email verification page
- WalletDashboard.tsx - Wallet dashboard page
- Dashboard.tsx - User dashboard page

Each page now includes:
- Import of ArrowLeft icon from lucide-react
- Import of useNavigate from react-router-dom (if not already present)
- Positioned button in top-left (absolute positioning)
- Consistent styling: gray-400 with hover effect
- Navigate to '/' on click

This improves UX by providing consistent navigation across all sub pages.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

src/pages/AdminPanel.tsx

@@ -1,4 +1,5 @@
 import { useState, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import { Button } from '@/components/ui/button';
@@ -7,7 +8,7 @@ import { Label } from '@/components/ui/label';
 import { Badge } from '@/components/ui/badge';
 import { useToast } from '@/hooks/use-toast';
 import { supabase } from '@/lib/supabase';
-import { Users, Settings, Activity, Shield, Bell, Trash2, Monitor, Lock, AlertTriangle } from 'lucide-react';
+import { Users, Settings, Activity, Shield, Bell, Trash2, Monitor, Lock, AlertTriangle, ArrowLeft } from 'lucide-react';
 import {
   Table,
   TableBody,
@@ -27,6 +28,7 @@ import { SessionMonitor } from '@/components/security/SessionMonitor';
 import { PermissionEditor } from '@/components/security/PermissionEditor';
 import { SecurityAudit } from '@/components/security/SecurityAudit';
 export default function AdminPanel() {
+  const navigate = useNavigate();
   const [users, setUsers] = useState<any[]>([]);
   const [adminRoles, setAdminRoles] = useState<any[]>([]);
   const [systemSettings, setSystemSettings] = useState<any[]>([]);
@@ -138,7 +140,13 @@ export default function AdminPanel() {
   }
 
   return (
-    <div className="container mx-auto py-8">
+    <div className="container mx-auto py-8 relative">
+      <button
+        onClick={() => navigate('/')}
+        className="absolute top-4 left-4 text-gray-400 hover:text-white transition-colors"
+      >
+        <ArrowLeft className="w-5 h-5" />
+      </button>
       <h1 className="text-3xl font-bold mb-8">Admin Panel</h1>
 
       <Tabs defaultValue="users" className="space-y-4">

src/pages/Dashboard.tsx

@@ -6,7 +6,7 @@ import { Badge } from '@/components/ui/badge';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import { useAuth } from '@/contexts/AuthContext';
 import { supabase } from '@/lib/supabase';
-import { User, Mail, Phone, Globe, MapPin, Calendar, Shield, AlertCircle } from 'lucide-react';
+import { User, Mail, Phone, Globe, MapPin, Calendar, Shield, AlertCircle, ArrowLeft } from 'lucide-react';
 import { useToast } from '@/hooks/use-toast';
 
 export default function Dashboard() {
@@ -65,7 +65,13 @@ export default function Dashboard() {
   }
 
   return (
-    <div className="container mx-auto p-6 max-w-6xl">
+    <div className="container mx-auto p-6 max-w-6xl relative">
+      <button
+        onClick={() => navigate('/')}
+        className="absolute top-4 left-4 text-gray-400 hover:text-white transition-colors"
+      >
+        <ArrowLeft className="w-5 h-5" />
+      </button>
       <h1 className="text-3xl font-bold mb-6">User Dashboard</h1>
       
       <div className="grid gap-6 md:grid-cols-3 mb-6">

src/pages/EmailVerification.tsx

@@ -3,7 +3,7 @@ import { useSearchParams, useNavigate } from 'react-router-dom';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
 import { Button } from '@/components/ui/button';
 import { supabase } from '@/lib/supabase';
-import { CheckCircle, XCircle, Loader2 } from 'lucide-react';
+import { CheckCircle, XCircle, Loader2, ArrowLeft } from 'lucide-react';
 
 export default function EmailVerification() {
   const [searchParams] = useSearchParams();
@@ -40,7 +40,13 @@ export default function EmailVerification() {
 
   return (
     <div className="container mx-auto flex items-center justify-center min-h-screen p-4">
-      <Card className="w-full max-w-md">
+      <Card className="w-full max-w-md relative">
+        <button
+          onClick={() => navigate('/')}
+          className="absolute top-4 left-4 text-gray-400 hover:text-white transition-colors z-10"
+        >
+          <ArrowLeft className="w-5 h-5" />
+        </button>
         <CardHeader>
           <CardTitle>Email Verification</CardTitle>
           <CardDescription>

src/pages/PasswordReset.tsx

@@ -6,7 +6,7 @@ import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { supabase } from '@/lib/supabase';
 import { useToast } from '@/hooks/use-toast';
-import { Loader2 } from 'lucide-react';
+import { Loader2, ArrowLeft } from 'lucide-react';
 
 export default function PasswordReset() {
   const [searchParams] = useSearchParams();
@@ -95,7 +95,13 @@ export default function PasswordReset() {
 
   return (
     <div className="container mx-auto flex items-center justify-center min-h-screen p-4">
-      <Card className="w-full max-w-md">
+      <Card className="w-full max-w-md relative">
+        <button
+          onClick={() => navigate('/')}
+          className="absolute top-4 left-4 text-gray-400 hover:text-white transition-colors z-10"
+        >
+          <ArrowLeft className="w-5 h-5" />
+        </button>
         <CardHeader>
           <CardTitle>{token ? 'Reset Password' : 'Forgot Password'}</CardTitle>
           <CardDescription>

src/pages/ProfileSettings.tsx

@@ -1,4 +1,5 @@
 import { useState, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
 import { useAuth } from '@/contexts/AuthContext';
 import { supabase } from '@/lib/supabase';
 import { Button } from '@/components/ui/button';
@@ -11,9 +12,10 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
 import { useToast } from '@/hooks/use-toast';
-import { Loader2, User, Mail, Shield, Bell, Palette, Globe } from 'lucide-react';
+import { Loader2, User, Mail, Shield, Bell, Palette, Globe, ArrowLeft } from 'lucide-react';
 import { TwoFactorSetup } from '@/components/auth/TwoFactorSetup';
 export default function ProfileSettings() {
+  const navigate = useNavigate();
   const { user } = useAuth();
   const { toast } = useToast();
   const [loading, setLoading] = useState(false);
@@ -182,7 +184,13 @@ export default function ProfileSettings() {
   };
 
   return (
-    <div className="container mx-auto py-8 max-w-4xl">
+    <div className="container mx-auto py-8 max-w-4xl relative">
+      <button
+        onClick={() => navigate('/')}
+        className="absolute top-4 left-4 text-gray-400 hover:text-white transition-colors"
+      >
+        <ArrowLeft className="w-5 h-5" />
+      </button>
       <h1 className="text-3xl font-bold mb-8">Profile Settings</h1>
 
       <Tabs defaultValue="profile" className="space-y-4">

src/pages/WalletDashboard.tsx

@@ -1,13 +1,15 @@
 import React, { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
 import { usePolkadot } from '@/contexts/PolkadotContext';
 import { AccountBalance } from '@/components/AccountBalance';
 import { TransferModal } from '@/components/TransferModal';
 import { ReceiveModal } from '@/components/ReceiveModal';
 import { TransactionHistory } from '@/components/TransactionHistory';
 import { Button } from '@/components/ui/button';
-import { ArrowUpRight, ArrowDownRight, History } from 'lucide-react';
+import { ArrowUpRight, ArrowDownRight, History, ArrowLeft } from 'lucide-react';
 
 const WalletDashboard: React.FC = () => {
+  const navigate = useNavigate();
   const { selectedAccount } = usePolkadot();
   const [isTransferModalOpen, setIsTransferModalOpen] = useState(false);
   const [isReceiveModalOpen, setIsReceiveModalOpen] = useState(false);
@@ -26,7 +28,13 @@ const WalletDashboard: React.FC = () => {
 
   return (
     <div className="min-h-screen bg-gray-950 pt-24 pb-12">
-      <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
+      <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 relative">
+        <button
+          onClick={() => navigate('/')}
+          className="absolute top-4 left-4 text-gray-400 hover:text-white transition-colors"
+        >
+          <ArrowLeft className="w-5 h-5" />
+        </button>
         <div className="mb-8">
           <h1 className="text-3xl font-bold text-white mb-2">Wallet Dashboard</h1>
           <p className="text-gray-400">Manage your HEZ and PEZ tokens</p>