From 1148f7a72f146a449cfe756deb57a7ea6950c662 Mon Sep 17 00:00:00 2001
From: muken <jmendoza14@pm.me>
Date: Sat, 27 Jun 2026 16:44:17 -0500
Subject: [PATCH] Switch navbar to #001321, admin can update logo/favicon, logo
 links home

---
 src/app/admin/page.tsx           | 121 ++++++++++++++++++++++++++++++-
 src/app/api/site-assets/route.ts |  35 +++++++++
 src/components/Navbar.tsx        |  43 +++++++++--
 3 files changed, 192 insertions(+), 7 deletions(-)
 create mode 100644 src/app/api/site-assets/route.ts

diff --git a/src/app/admin/page.tsx b/src/app/admin/page.tsx
index e37bdb7..4f002d1 100644
--- a/src/app/admin/page.tsx
+++ b/src/app/admin/page.tsx
@@ -11,7 +11,7 @@ interface ImageRecord {
 }
 
 const gold = '#E8A849';
-const navy = '#010D1E';
+const navy = '#001321';
 const warm = '#a6683c';
 
 export default function AdminPage() {
@@ -20,6 +20,9 @@ export default function AdminPage() {
   const [count, setCount] = useState(0);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
+  const [logoUrl, setLogoUrl] = useState('');
+  const [faviconUrl, setFaviconUrl] = useState('');
+  const [message, setMessage] = useState<string | null>(null);
 
   useEffect(() => {
     fetch('/api/admin/images', { credentials: 'same-origin' })
@@ -37,8 +40,50 @@ export default function AdminPage() {
       })
       .catch((err) => setError(err.message))
       .finally(() => setLoading(false));
+
+    fetch('/api/site-assets?key=logo')
+      .then(async (res) => {
+        if (!res.ok) return;
+        const data = await res.json();
+        if (data.data) setLogoUrl(data.data);
+      })
+      .catch(() => {});
+
+    fetch('/api/site-assets?key=favicon')
+      .then(async (res) => {
+        if (!res.ok) return;
+        const data = await res.json();
+        if (data.data) setFaviconUrl(data.data);
+      })
+      .catch(() => {});
   }, [router]);
 
+  useEffect(() => {
+    if (!faviconUrl) return;
+    let link = document.querySelector("link[rel~='icon']") as HTMLLinkElement | null;
+    if (!link) {
+      link = document.createElement('link');
+      link.rel = 'icon';
+      document.head.appendChild(link);
+    }
+    link.href = faviconUrl;
+  }, [faviconUrl]);
+
+  const updateAsset = async (key: string, value: string) => {
+    const res = await fetch('/api/site-assets', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ key, value }),
+      credentials: 'same-origin',
+    });
+    if (!res.ok) {
+      setError('Failed to save ' + key);
+      return;
+    }
+    setMessage(`${key} updated. Refresh the page to see the change.`);
+    setTimeout(() => setMessage(null), 4000);
+  };
+
   const handleUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
     const files = e.target.files;
     if (!files) return;
@@ -94,6 +139,80 @@ export default function AdminPage() {
         Total uploaded images: <strong style={{ color: warm }}>{count}</strong>
       </p>
       {error && <p style={{ color: '#c23b22', marginBottom: '1rem' }}>{error}</p>}
+      {message && <p style={{ color: '#3b7a22', marginBottom: '1rem' }}>{message}</p>}
+
+      <section
+        style={{
+          marginBottom: '2rem',
+          padding: '1.5rem',
+          background: '#f5f0e8',
+          borderRadius: '16px',
+          display: 'flex',
+          flexDirection: 'column',
+          gap: '1rem',
+        }}
+      >
+        <h2 style={{ fontSize: '18px', color: navy, margin: 0 }}>Brand Assets</h2>
+        <div style={{ display: 'grid', gap: '1rem', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))' }}>
+          <label style={{ display: 'flex', flexDirection: 'column', gap: '0.4rem', fontSize: '13px', color: '#555' }}>
+            Navbar logo
+            <input
+              type="text"
+              value={logoUrl}
+              onChange={(e) => setLogoUrl(e.target.value)}
+              placeholder="Paste image data URL or upload a small image below"
+              style={{ padding: '0.6rem 0.8rem', borderRadius: '10px', border: '1px solid rgba(1,13,30,0.18)' }}
+            />
+          </label>
+          <button
+            onClick={() => updateAsset('logo', logoUrl)}
+            disabled={!logoUrl}
+            style={{
+              padding: '0.7rem 1.2rem',
+              background: gold,
+              color: navy,
+              border: 'none',
+              borderRadius: '999px',
+              cursor: logoUrl ? 'pointer' : 'not-allowed',
+              fontWeight: 600,
+              alignSelf: 'end',
+            }}
+          >
+            Save logo
+          </button>
+
+          <label style={{ display: 'flex', flexDirection: 'column', gap: '0.4rem', fontSize: '13px', color: '#555' }}>
+            Favicon
+            <input
+              type="text"
+              value={faviconUrl}
+              onChange={(e) => setFaviconUrl(e.target.value)}
+              placeholder="Paste image data URL or upload a small image below"
+              style={{ padding: '0.6rem 0.8rem', borderRadius: '10px', border: '1px solid rgba(1,13,30,0.18)' }}
+            />
+          </label>
+          <button
+            onClick={() => updateAsset('favicon', faviconUrl)}
+            disabled={!faviconUrl}
+            style={{
+              padding: '0.7rem 1.2rem',
+              background: gold,
+              color: navy,
+              border: 'none',
+              borderRadius: '999px',
+              cursor: faviconUrl ? 'pointer' : 'not-allowed',
+              fontWeight: 600,
+              alignSelf: 'end',
+            }}
+          >
+            Save favicon
+          </button>
+        </div>
+        <p style={{ margin: 0, fontSize: '13px', color: '#777' }}>
+          Tip: click an uploaded gallery image to preview, copy its data URL, and paste it above.
+        </p>
+      </section>
+
       <label
         style={{
           display: 'inline-flex',
diff --git a/src/app/api/site-assets/route.ts b/src/app/api/site-assets/route.ts
new file mode 100644
index 0000000..220961a
--- /dev/null
+++ b/src/app/api/site-assets/route.ts
@@ -0,0 +1,35 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { requireRole } from '@/lib/auth';
+import { db } from '@/lib/db';
+
+export async function GET(request: NextRequest) {
+  const key = request.nextUrl.searchParams.get('key');
+  if (!key) {
+    return NextResponse.json({ error: 'Missing key' }, { status: 400 });
+  }
+
+  const { rows } = await db.query('SELECT value FROM config WHERE key = $1', [key]);
+  return NextResponse.json({ data: rows[0]?.value || null });
+}
+
+export async function POST(request: NextRequest) {
+  try {
+    await requireRole('admin');
+    const body = await request.json();
+    const { key, value } = body;
+
+    if (!key || typeof value !== 'string') {
+      return NextResponse.json({ error: 'Missing key or value' }, { status: 400 });
+    }
+
+    await db.query(
+      `INSERT INTO config (key, value) VALUES ($1, $2)
+       ON CONFLICT (key) DO UPDATE SET value = EXCLUDED.value`,
+      [key, value]
+    );
+
+    return NextResponse.json({ ok: true });
+  } catch (err: any) {
+    return NextResponse.json({ error: err.message || 'Failed to save asset' }, { status: 401 });
+  }
+}
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index dc75641..c29b5ff 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -15,6 +15,7 @@ const links = [
 
 export default function Navbar() {
   const [auth, setAuth] = useState<{ authenticated: boolean; role?: string } | null>(null);
+  const [logo, setLogo] = useState<string | null>(null);
   const router = useRouter();
   const pathname = usePathname();
 
@@ -23,6 +24,30 @@ export default function Navbar() {
       .then((res) => (res.ok ? res.json() : { authenticated: false }))
       .then((data) => setAuth(data))
       .catch(() => setAuth({ authenticated: false }));
+
+    fetch('/api/site-assets?key=logo')
+      .then(async (res) => {
+        if (!res.ok) return null;
+        const data = await res.json();
+        return data.data || null;
+      })
+      .then((url) => setLogo(url))
+      .catch(() => setLogo(null));
+
+    fetch('/api/site-assets?key=favicon')
+      .then(async (res) => {
+        if (!res.ok) return;
+        const data = await res.json();
+        if (!data.data) return;
+        let link = document.querySelector("link[rel~='icon']") as HTMLLinkElement | null;
+        if (!link) {
+          link = document.createElement('link');
+          link.rel = 'icon';
+          document.head.appendChild(link);
+        }
+        link.href = data.data;
+      })
+      .catch(() => {});
   }, []);
 
   const handleLogout = async () => {
@@ -37,10 +62,10 @@ export default function Navbar() {
     display: 'flex',
     gap: '1.5rem',
     alignItems: 'center',
-    padding: '0.75rem 1.5rem',
-    background: '#010D1E',
+    padding: '0.6rem 1.5rem',
+    background: '#001321',
     color: '#f5f0e8',
-    boxShadow: '0 2px 8px rgba(1,13,30,0.25)',
+    boxShadow: '0 2px 8px rgba(0,19,33,0.35)',
     zIndex: 50,
   };
 
@@ -60,8 +85,14 @@ export default function Navbar() {
 
   return (
     <nav style={navStyle}>
-      <Link href="/" style={{ fontWeight: 700, color: '#E8A849', textDecoration: 'none', fontSize: '20px', fontStyle: 'italic' }}>
-        La Huasca
+      <Link href="/" style={{ display: 'flex', alignItems: 'center', gap: '12px', textDecoration: 'none' }}>
+        {logo ? (
+          <img src={logo} alt="La Huasca" style={{ height: '36px', width: 'auto', maxWidth: '160px', objectFit: 'contain' }} />
+        ) : (
+          <span style={{ fontWeight: 700, color: '#E8A849', fontSize: '20px', fontStyle: 'italic' }}>
+            La Huasca
+          </span>
+        )}
       </Link>
       {links.map((link) => (
         <Link
@@ -97,7 +128,7 @@ export default function Navbar() {
           href="/login"
           style={{
             marginLeft: 'auto',
-            color: '#010D1E',
+            color: '#001321',
             textDecoration: 'none',
             background: '#E8A849',
             padding: '0.45rem 0.9rem',