admin debug

app/admin/page.tsx

@@ -4,17 +4,19 @@ import { useState, useEffect } from 'react';
 import { Card, Portal } from '@/types';
 
 export default function AdminDashboard() {
+  console.log('[ADMIN] Component rendering');
+
   const [activeTab, setActiveTab] = useState<'cards' | 'settings'>('cards');
-  
+
   // Card State
   const [cards, setCards] = useState<Card[]>([]);
   const [isEditing, setIsEditing] = useState<Partial<Card> | null>(null);
-  
+
   // Portal State
   const [portal, setPortal] = useState<Partial<Portal>>({});
   const [savingPortal, setSavingPortal] = useState(false);
   const [uploading, setUploading] = useState<{ [key: string]: boolean }>({});
-  
+
   // NEW UI STATES: Toast and Confirm Dialog
   const [toast, setToast] = useState<string | null>(null);
   const [confirmDialog, setConfirmDialog] = useState<{ message: string, onConfirm: () => void } | null>(null);
@@ -24,10 +26,17 @@ export default function AdminDashboard() {
     setToast(message);
     setTimeout(() => setToast(null), 3000);
   };
-  
+
   useEffect(() => {
-    fetch('/api/cards').then(res => res.json()).then(setCards);
-    fetch('/api/portals').then(res => res.json()).then(data => data && setPortal(data));
+    console.log('[ADMIN] useEffect fired - fetching data');
+    fetch('/api/cards')
+      .then(res => { console.log('[ADMIN] /api/cards status:', res.status); return res.json(); })
+      .then(data => { console.log('[ADMIN] cards received:', data); setCards(data); })
+      .catch(err => console.error('[ADMIN] cards fetch error:', err));
+    fetch('/api/portals')
+      .then(res => { console.log('[ADMIN] /api/portals status:', res.status); return res.json(); })
+      .then(data => { console.log('[ADMIN] portal received:', data); if (data) setPortal(data); })
+      .catch(err => console.error('[ADMIN] portal fetch error:', err));
   }, []);
 
   const handleUpload = async (e: React.ChangeEvent<HTMLInputElement>, field: string, isPortal = false) => {
@@ -163,10 +172,10 @@ export default function AdminDashboard() {
       <div className="max-w-5xl mx-auto mt-8 px-4">
         {/* Tab Navigation */}
         <div className="flex space-x-2 mb-6">
-          <button onClick={() => setActiveTab('cards')} className={`px-6 py-3 rounded-t-lg font-bold transition-colors ${activeTab === 'cards' ? 'bg-white text-blue-700 border-t-4 border-blue-600 shadow-sm' : 'bg-gray-200 text-gray-600 hover:bg-gray-300'}`}>
+          <button onClick={() => { console.log('[ADMIN] click: cards tab'); setActiveTab('cards'); }} className={`px-6 py-3 rounded-t-lg font-bold transition-colors ${activeTab === 'cards' ? 'bg-white text-blue-700 border-t-4 border-blue-600 shadow-sm' : 'bg-gray-200 text-gray-600 hover:bg-gray-300'}`}>
             Manage Cards
           </button>
-          <button onClick={() => setActiveTab('settings')} className={`px-6 py-3 rounded-t-lg font-bold transition-colors ${activeTab === 'settings' ? 'bg-white text-blue-700 border-t-4 border-blue-600 shadow-sm' : 'bg-gray-200 text-gray-600 hover:bg-gray-300'}`}>
+          <button onClick={() => { console.log('[ADMIN] click: settings tab'); setActiveTab('settings'); }} className={`px-6 py-3 rounded-t-lg font-bold transition-colors ${activeTab === 'settings' ? 'bg-white text-blue-700 border-t-4 border-blue-600 shadow-sm' : 'bg-gray-200 text-gray-600 hover:bg-gray-300'}`}>
             Portal Settings
           </button>
         </div>