updates

Frontend/src/pages/admin/DashboardPage.tsx

@@ -7,7 +7,8 @@ import {
   TrendingUp,
   RefreshCw,
   TrendingDown,
-  CreditCard
+  CreditCard,
+  LogOut
 } from 'lucide-react';
 import { reportService, ReportData, paymentService, Payment } from '../../services/api';
 import { toast } from 'react-toastify';
@@ -17,16 +18,27 @@ import { formatDate } from '../../utils/format';
 import { useFormatCurrency } from '../../hooks/useFormatCurrency';
 import { useAsync } from '../../hooks/useAsync';
 import { useNavigate } from 'react-router-dom';
+import useAuthStore from '../../store/useAuthStore';
 
 const DashboardPage: React.FC = () => {
   const { formatCurrency } = useFormatCurrency();
   const navigate = useNavigate();
+  const { logout } = useAuthStore();
   const [dateRange, setDateRange] = useState({
     from: new Date(Date.now() - 30 * 24 * 60 * 60 * 1000).toISOString().split('T')[0],
     to: new Date().toISOString().split('T')[0],
   });
   const [recentPayments, setRecentPayments] = useState<Payment[]>([]);
   const [loadingPayments, setLoadingPayments] = useState(false);
+  
+  const handleLogout = async () => {
+    try {
+      await logout();
+      navigate('/login');
+    } catch (error) {
+      console.error('Logout error:', error);
+    }
+  };
 
   const fetchDashboardData = async () => {
     const response = await reportService.getReports({
@@ -91,6 +103,8 @@ const DashboardPage: React.FC = () => {
       case 'stripe':
       case 'credit_card':
         return 'Card';
+      case 'paypal':
+        return 'PayPal';
       case 'bank_transfer':
         return 'Bank Transfer';
       case 'cash':
@@ -133,7 +147,7 @@ const DashboardPage: React.FC = () => {
           <p className="text-slate-600 mt-3 text-lg font-light">Hotel operations overview and analytics</p>
         </div>
         
-        {/* Date Range Filter */}
+        {/* Date Range Filter & Actions */}
         <div className="flex flex-col sm:flex-row gap-3 items-start sm:items-center">
           <div className="flex gap-3 items-center">
             <input
@@ -150,14 +164,24 @@ const DashboardPage: React.FC = () => {
               className="px-4 py-2.5 bg-white border-2 border-slate-200 rounded-xl focus:border-amber-400 focus:ring-4 focus:ring-amber-100 transition-all duration-200 text-slate-700 font-medium shadow-sm hover:shadow-md"
             />
           </div>
-          <button
-            onClick={handleRefresh}
-            disabled={loading}
-            className="px-6 py-2.5 bg-gradient-to-r from-amber-500 to-amber-600 text-white rounded-xl font-semibold hover:from-amber-600 hover:to-amber-700 transition-all duration-200 shadow-lg hover:shadow-xl disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2 text-sm"
-          >
-            <RefreshCw className={`w-4 h-4 ${loading ? 'animate-spin' : ''}`} />
-            Refresh
-          </button>
+          <div className="flex gap-3 items-center">
+            <button
+              onClick={handleRefresh}
+              disabled={loading}
+              className="px-6 py-2.5 bg-gradient-to-r from-amber-500 to-amber-600 text-white rounded-xl font-semibold hover:from-amber-600 hover:to-amber-700 transition-all duration-200 shadow-lg hover:shadow-xl disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2 text-sm"
+            >
+              <RefreshCw className={`w-4 h-4 ${loading ? 'animate-spin' : ''}`} />
+              Refresh
+            </button>
+            <button
+              onClick={handleLogout}
+              className="px-6 py-2.5 bg-gradient-to-r from-rose-500 to-rose-600 text-white rounded-xl font-semibold hover:from-rose-600 hover:to-rose-700 transition-all duration-200 shadow-lg hover:shadow-xl flex items-center gap-2 text-sm"
+              title="Logout"
+            >
+              <LogOut className="w-4 h-4" />
+              <span className="hidden sm:inline">Logout</span>
+            </button>
+          </div>
         </div>
       </div>