Add database integration, auth API, admin/user portals, and deploy-db.sh

src/app/admin/page.tsx

@@ -2,65 +2,84 @@
 
 import { useEffect, useState } from 'react';
 import { useRouter } from 'next/navigation';
-import { useAuth } from '@/hooks/useAuth';
 
-const IMAGES_KEY = 'la-huasca-admin-images';
+interface ImageRecord {
+  id: number;
+  filename: string;
+  data: string;
+  uploaded_at: string;
+}
 
 export default function AdminPage() {
-  const { isAdmin, hydrated } = useAuth();
   const router = useRouter();
-  const [images, setImages] = useState<string[]>([]);
+  const [images, setImages] = useState<ImageRecord[]>([]);
+  const [count, setCount] = useState(0);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
 
   useEffect(() => {
-    if (!hydrated) return;
-    if (!isAdmin) {
-      router.push('/login');
-      return;
-    }
-    const stored = localStorage.getItem(IMAGES_KEY);
-    if (stored) {
-      try {
-        setImages(JSON.parse(stored));
-      } catch {
-        setImages([]);
-      }
-    }
-  }, [isAdmin, hydrated, router]);
-
-  useEffect(() => {
-    localStorage.setItem(IMAGES_KEY, JSON.stringify(images));
-  }, [images]);
+    fetch('/api/admin/images', { credentials: 'same-origin' })
+      .then(async (res) => {
+        if (!res.ok) {
+          if (res.status === 401) {
+            router.push('/login');
+            return;
+          }
+          throw new Error('Failed to load images');
+        }
+        const data = await res.json();
+        setImages(data.images || []);
+        setCount(data.count || 0);
+      })
+      .catch((err) => setError(err.message))
+      .finally(() => setLoading(false));
+  }, [router]);
 
   const handleUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
     const files = e.target.files;
     if (!files) return;
+
     Array.from(files).forEach((file) => {
       const reader = new FileReader();
-      reader.onload = () => {
-        const result = reader.result as string;
-        setImages((prev) => [...prev, result]);
+      reader.onload = async () => {
+        const data = reader.result as string;
+        const res = await fetch('/api/admin/images', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ filename: file.name, data }),
+          credentials: 'same-origin',
+        });
+        if (!res.ok) {
+          setError('Upload failed');
+          return;
+        }
+        const result = await res.json();
+        setImages((prev) => [result.image, ...prev]);
+        setCount((prev) => prev + 1);
       };
       reader.readAsDataURL(file);
     });
     e.target.value = '';
   };
 
-  const handleDelete = (index: number) => {
-    setImages((prev) => prev.filter((_, i) => i !== index));
+  const handleDelete = async (id: number) => {
+    const res = await fetch(`/api/admin/images?id=${id}`, {
+      method: 'DELETE',
+      credentials: 'same-origin',
+    });
+    if (res.ok) {
+      setImages((prev) => prev.filter((img) => img.id !== id));
+      setCount((prev) => prev - 1);
+    }
   };
 
-  if (!hydrated || !isAdmin) {
-    return (
-      <main style={{ padding: '2rem' }}>
-        <p>Please log in as admin to access this page.</p>
-      </main>
-    );
-  }
+  if (loading) return <main style={{ padding: '2rem' }}><p>Loading...</p></main>;
 
   return (
     <main style={{ padding: '2rem' }}>
       <h1>Admin Portal</h1>
-      <p>Total uploaded images: <strong>{images.length}</strong></p>
+      <p>Total uploaded images: <strong>{count}</strong></p>
+      {error && <p style={{ color: 'crimson' }}>{error}</p>}
       <label
         style={{
           display: 'inline-block',
@@ -91,9 +110,9 @@ export default function AdminPage() {
             gap: '1rem',
           }}
         >
-          {images.map((src, i) => (
+          {images.map((img) => (
             <div
-              key={i}
+              key={img.id}
               style={{
                 border: '1px solid #ddd',
                 borderRadius: '8px',
@@ -103,12 +122,12 @@ export default function AdminPage() {
               }}
             >
               <img
-                src={src}
-                alt={`Uploaded preview ${i + 1}`}
+                src={img.data}
+                alt={img.filename}
                 style={{ width: '100%', height: '160px', objectFit: 'cover' }}
               />
               <button
-                onClick={() => handleDelete(i)}
+                onClick={() => handleDelete(img.id)}
                 style={{
                   padding: '0.5rem',
                   background: 'crimson',