diff --git a/src/app/admin/page.tsx.bak b/src/app/admin/page.tsx.bak
new file mode 100644
index 0000000..ee6e187
--- /dev/null
+++ b/src/app/admin/page.tsx.bak
@@ -0,0 +1,1271 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { useRouter } from 'next/navigation';
+
+interface ImageRecord {
+  id: number;
+  filename: string;
+  data: string;
+  uploaded_at: string;
+}
+
+interface Room {
+  id: number;
+  name: string;
+  description: string;
+  price: string;
+  photos: string[];
+  featured_photo: string | null;
+  active: boolean;
+  sort_order: number;
+}
+
+interface RoomForm {
+  id?: number;
+  name: string;
+  description: string;
+  price: string;
+  photos: string[];
+  featured_photo: string | null;
+  active: boolean;
+  sort_order: number;
+}
+
+interface RoomComment {
+  id: number;
+  room_id: number;
+  photo_url: string | null;
+  user_id: number;
+  first_name: string;
+  last_initial: string | null;
+  text: string;
+  created_at: string;
+}
+
+interface User {
+  id: number;
+  username: string;
+  role: 'admin' | 'user';
+  first_name: string | null;
+  last_name: string | null;
+  comments_disabled: boolean;
+}
+
+interface MenuItem {
+  id: number;
+  category: string;
+  name: string;
+  description: string;
+  price: string;
+  is_daily_special: boolean;
+  active: boolean;
+  sort_order: number;
+}
+
+interface Place {
+  id: number;
+  name: string;
+  description: string;
+  photos: string[];
+  featured_photo: string | null;
+  distance_km: string | null;
+  visit_time: string | null;
+  suggestion: string | null;
+  active: boolean;
+  sort_order: number;
+}
+
+interface Review {
+  id: number;
+  author_name: string;
+  rating: number;
+  text: string;
+  approved: boolean;
+}
+
+interface Slide {
+  id: number;
+  title: string | null;
+  subtitle: string | null;
+  image_id: number | null;
+  image_url: string | null;
+  active: boolean;
+  sort_order: number;
+}
+
+interface CalendarEvent {
+  id: number;
+  date: string;
+  title: string;
+  type: 'holiday' | 'season' | 'weather' | 'event';
+  description: string | null;
+  color: string | null;
+  active: boolean;
+}
+
+interface SocialEvent {
+  id: number;
+  name: string;
+  description: string;
+  price: string | null;
+  date: string | null;
+  photos: string[];
+  featured_photo: string | null;
+  active: boolean;
+  sort_order: number;
+  reservation_count: number;
+}
+
+interface SocialEventReservation {
+  id: number;
+  social_event_id: number;
+  user_id: number;
+  username: string;
+  event_name: string;
+  guests: number;
+  notes: string;
+  status: 'pending' | 'confirmed' | 'cancelled';
+  created_at: string;
+}
+
+const gold = '#E8A849';
+const navy = '#001321';
+const warm = '#a6683c';
+
+export default function AdminPage() {
+  const router = useRouter();
+  const [images, setImages] = useState<ImageRecord[]>([]);
+  const [count, setCount] = useState(0);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [message, setMessage] = useState<string | null>(null);
+  const [logoUrl, setLogoUrl] = useState('');
+  const [faviconUrl, setFaviconUrl] = useState('');
+  const [tagline, setTagline] = useState('Hotel · Restaurant · Andean Highlands');
+
+  const [rooms, setRooms] = useState<Room[]>([]);
+  const [roomForm, setRoomForm] = useState<RoomForm>({ name: '', description: '', price: '', photos: [], featured_photo: null, active: true, sort_order: 0 });
+  const [editingRoom, setEditingRoom] = useState<number | null>(null);
+  const [roomComments, setRoomComments] = useState<RoomComment[]>([]);
+  const [roomCommentRoomId, setRoomCommentRoomId] = useState<number | null>(null);
+  const [editingUser, setEditingUser] = useState<number | null>(null);
+  const [userEditForm, setUserEditForm] = useState({ first_name: '', last_name: '', comments_disabled: false });
+
+  const [menu, setMenu] = useState<MenuItem[]>([]);
+  const [menuForm, setMenuForm] = useState<Partial<MenuItem>>({ category: '', name: '', description: '', price: '', is_daily_special: false, active: true, sort_order: 0 });
+  const [editingMenu, setEditingMenu] = useState<number | null>(null);
+
+  const [places, setPlaces] = useState<Place[]>([]);
+  const [placeForm, setPlaceForm] = useState<Partial<Place>>({ name: '', description: '', photos: [], featured_photo: null, distance_km: '', visit_time: '', suggestion: '', active: true, sort_order: 0 });
+  const [editingPlace, setEditingPlace] = useState<number | null>(null);
+
+  const [reviews, setReviews] = useState<Review[]>([]);
+
+  const [users, setUsers] = useState<User[]>([]);
+  const [userForm, setUserForm] = useState({ username: '', password: '', role: 'user' as 'admin' | 'user' });
+
+  const [slides, setSlides] = useState<Slide[]>([]);
+  const [slideForm, setSlideForm] = useState<Partial<Slide>>({ title: '', subtitle: '', image_id: null, image_url: '', active: true, sort_order: 0 });
+  const [editingSlide, setEditingSlide] = useState<number | null>(null);
+
+  const [events, setEvents] = useState<CalendarEvent[]>([]);
+  const [eventForm, setEventForm] = useState<Partial<CalendarEvent>>({ date: '', title: '', type: 'event', description: '', color: '#E8A849', active: true });
+  const [editingEvent, setEditingEvent] = useState<number | null>(null);
+
+  const [socialEvents, setSocialEvents] = useState<SocialEvent[]>([]);
+  const [socialEventForm, setSocialEventForm] = useState<Partial<SocialEvent>>({ name: '', description: '', price: '', date: '', photos: [], featured_photo: null, active: true, sort_order: 0 });
+  const [editingSocialEvent, setEditingSocialEvent] = useState<number | null>(null);
+  const [socialEventReservations, setSocialEventReservations] = useState<SocialEventReservation[]>([]);
+  const [socialEventReservationsFor, setSocialEventReservationsFor] = useState<number | null>(null);
+
+  const [footer, setFooter] = useState({
+    facebook_url: '', instagram_url: '', whatsapp_url: '', address: '', phone: '', email: '',
+  });
+
+  useEffect(() => {
+    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));
+
+    fetch('/api/rooms').then((r) => r.json()).then((j) => setRooms(j.data || [])).catch(() => {});
+    fetch('/api/menu').then((r) => r.json()).then((j) => setMenu(j.data || [])).catch(() => {});
+    fetch('/api/places').then((r) => r.json()).then((j) => setPlaces(j.data || [])).catch(() => {});
+    fetch('/api/admin/reviews', { credentials: 'same-origin' }).then((r) => r.json()).then((j) => setReviews(j.data || [])).catch(() => {});
+    fetch('/api/admin/users', { credentials: 'same-origin' }).then((r) => r.json()).then((j) => setUsers(j.data || [])).catch(() => {});
+    fetch('/api/slides').then((r) => r.json()).then((j) => setSlides(j.data || [])).catch(() => {});
+    fetch('/api/calendar_events').then((r) => r.json()).then((j) => setEvents(j.data || [])).catch(() => {});
+    fetch('/api/social_events').then((r) => r.json()).then((j) => setSocialEvents(j.data || [])).catch(() => {});
+
+    fetch('/api/site-assets').then((res) => res.json()).then((json) => {
+      const c = json.data || {};
+      setFooter({
+        facebook_url: c.facebook_url || '', instagram_url: c.instagram_url || '', whatsapp_url: c.whatsapp_url || '',
+        address: c.address || '', phone: c.phone || '', email: c.email || '',
+      });
+      if (c.logo) setLogoUrl(c.logo);
+      if (c.favicon) setFaviconUrl(c.favicon);
+      if (c.tagline) setTagline(c.tagline);
+    }).catch(() => {});
+
+    setLoading(false);
+  }, [router]);
+
+  const notify = (msg: string) => {
+    setMessage(msg);
+    setTimeout(() => setMessage(null), 4000);
+  };
+
+  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; }
+    notify(`${key} updated.`);
+  };
+
+  const saveFooter = async () => {
+    const res = await fetch('/api/site-assets', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ values: footer }),
+      credentials: 'same-origin',
+    });
+    if (!res.ok) { setError('Failed to save footer'); return; }
+    notify('Footer info updated.');
+  };
+
+  const [uploadCategory, setUploadCategory] = useState<string>('other');
+  const [uploadRoomId, setUploadRoomId] = useState<string>('');
+  const [uploadLocationTarget, setUploadLocationTarget] = useState<string>('gallery');
+
+  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 = async () => {
+        const data = reader.result as string;
+        const body: Record<string, unknown> = { filename: file.name, data, category: uploadCategory, location_target: uploadLocationTarget };
+        if (uploadCategory === 'rooms' && uploadRoomId) body.room_id = Number(uploadRoomId);
+        const res = await fetch('/api/admin/images', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify(body),
+          credentials: 'same-origin',
+        });
+        if (!res.ok) { setError('Upload failed'); return; }
+        const result = await res.json();
+        setImages((prev) => [{ ...result.image, data, category: uploadCategory }, ...prev]);
+        setCount((prev) => prev + 1);
+      };
+      reader.readAsDataURL(file);
+    });
+  };
+
+  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);
+    }
+  };
+
+  const api = async (url: string, method: string, body?: object) => {
+    const res = await fetch(url, {
+      method,
+      headers: { 'Content-Type': 'application/json' },
+      credentials: 'same-origin',
+      body: body ? JSON.stringify(body) : undefined,
+    });
+    if (!res.ok) {
+      const j = await res.json().catch(() => ({}));
+      throw new Error(j.error || 'Request failed');
+    }
+    return res.json();
+  };
+
+  const saveRoom = async (e: React.FormEvent) => {
+    e.preventDefault();
+    const payload = { ...roomForm, photos: roomForm.photos || [], featured_photo: roomForm.featured_photo || null, active: roomForm.active !== false, sort_order: roomForm.sort_order || 0 };
+    if (editingRoom) {
+      await api(`/api/rooms/${editingRoom}`, 'PUT', payload);
+      setRooms((prev) => prev.map((r) => (r.id === editingRoom ? { ...r, ...payload } as Room : r)));
+      setEditingRoom(null);
+    } else {
+      const json = await api('/api/rooms', 'POST', payload);
+      setRooms((prev) => [...prev, json.data]);
+    }
+    setRoomForm({ name: '', description: '', price: '', photos: [], featured_photo: null, active: true, sort_order: 0 });
+    notify('Room saved.');
+  };
+
+  const editRoom = (r: Room) => { setRoomForm({ ...r, photos: r.photos || [], featured_photo: r.featured_photo || null }); setEditingRoom(r.id); };
+  const deleteRoom = async (id: number) => { await api(`/api/rooms/${id}`, 'DELETE'); setRooms((prev) => prev.filter((r) => r.id !== id)); };
+
+  const saveMenu = async (e: React.FormEvent) => {
+    e.preventDefault();
+    const payload = { ...menuForm, active: menuForm.active !== false, sort_order: menuForm.sort_order || 0 };
+    if (editingMenu) {
+      await api(`/api/menu/${editingMenu}`, 'PUT', payload);
+      setMenu((prev) => prev.map((m) => (m.id === editingMenu ? { ...m, ...payload } as MenuItem : m)));
+      setEditingMenu(null);
+    } else {
+      const json = await api('/api/menu', 'POST', payload);
+      setMenu((prev) => [...prev, json.data]);
+    }
+    setMenuForm({ category: '', name: '', description: '', price: '', is_daily_special: false, active: true, sort_order: 0 });
+    notify('Menu item saved.');
+  };
+
+  const editMenu = (m: MenuItem) => { setMenuForm({ ...m }); setEditingMenu(m.id); };
+  const deleteMenu = async (id: number) => { await api(`/api/menu/${id}`, 'DELETE'); setMenu((prev) => prev.filter((m) => m.id !== id)); };
+
+  const savePlace = async (e: React.FormEvent) => {
+    e.preventDefault();
+    const payload = {
+      ...placeForm,
+      photos: Array.isArray(placeForm.photos) ? placeForm.photos : [],
+      featured_photo: placeForm.featured_photo || null,
+      active: placeForm.active === true,
+      sort_order: placeForm.sort_order || 0,
+    };
+    if (editingPlace) {
+      const r = await api(`/api/places/${editingPlace}`, 'PUT', payload);
+      setPlaces((prev) => prev.map((p) => (p.id === editingPlace ? ({ ...p, ...payload } as Place) : p)));
+      setEditingPlace(null);
+    } else {
+      const r = await api('/api/places', 'POST', payload);
+      setPlaces((prev) => [...prev, r.data]);
+    }
+    setPlaceForm({ name: '', description: '', photos: [], featured_photo: null, distance_km: '', visit_time: '', suggestion: '', active: true, sort_order: 0 });
+    notify('Place saved.');
+  };
+
+  const editPlace = (p: Place) => { setPlaceForm({ ...p, photos: p.photos || [], featured_photo: p.featured_photo || null }); setEditingPlace(p.id); };
+  const deletePlace = async (id: number) => { await api(`/api/places/${id}`, 'DELETE'); setPlaces((prev) => prev.filter((p) => p.id !== id)); };
+
+  const approveReview = async (id: number) => {
+    await api(`/api/admin/reviews/${id}`, 'PUT', { approved: true });
+    setReviews((prev) => prev.map((r) => (r.id === id ? { ...r, approved: true } : r)));
+  };
+
+  const deleteReview = async (id: number) => { await api(`/api/admin/reviews/${id}`, 'DELETE'); setReviews((prev) => prev.filter((r) => r.id !== id)); };
+
+  const loadRoomComments = async (roomId: number) => {
+    setRoomCommentRoomId(roomId);
+    const res = await fetch(`/api/rooms/${roomId}/comments`, { credentials: 'same-origin' });
+    const json = await res.json().catch(() => ({ data: [] }));
+    setRoomComments(json.data || []);
+  };
+
+  const deleteRoomComment = async (commentId: number) => {
+    await api(`/api/admin/comments/${commentId}`, 'DELETE');
+    setRoomComments((prev) => prev.filter((c) => c.id !== commentId));
+  };
+
+  const toggleUserComments = async (user: User) => {
+    const next = !user.comments_disabled;
+    await api(`/api/admin/users/${user.id}`, 'PUT', { comments_disabled: next });
+    setUsers((prev) => prev.map((u) => (u.id === user.id ? { ...u, comments_disabled: next } : u)));
+    notify(`User ${next ? 'disabled' : 'enabled'} for comments.`);
+  };
+
+  const saveUserNames = async (user: User) => {
+    await api(`/api/admin/users/${user.id}`, 'PUT', {
+      first_name: userEditForm.first_name,
+      last_name: userEditForm.last_name,
+    });
+    setUsers((prev) => prev.map((u) => (u.id === user.id ? { ...u, first_name: userEditForm.first_name, last_name: userEditForm.last_name } : u)));
+    setEditingUser(null);
+    notify('User updated.');
+  };
+
+  const saveUser = async (e: React.FormEvent) => {
+    e.preventDefault();
+    const json = await api('/api/admin/users', 'POST', userForm);
+    setUsers((prev) => [...prev, json.user]);
+    setUserForm({ username: '', password: '', role: 'user' });
+    notify('User created.');
+  };
+
+  const deleteUser = async (id: number) => { await api(`/api/admin/users/${id}`, 'DELETE'); setUsers((prev) => prev.filter((u) => u.id !== id)); };
+
+  const saveSlide = async (e: React.FormEvent) => {
+    e.preventDefault();
+    const payload = { ...slideForm, active: slideForm.active !== false, sort_order: slideForm.sort_order || 0 };
+    if (editingSlide) {
+      await api(`/api/slides/${editingSlide}`, 'PUT', payload);
+      setSlides((prev) => prev.map((s) => (s.id === editingSlide ? { ...s, ...payload } as Slide : s)));
+      setEditingSlide(null);
+    } else {
+      const json = await api('/api/slides', 'POST', payload);
+      setSlides((prev) => [...prev, json.data]);
+    }
+    setSlideForm({ title: '', subtitle: '', image_id: null, image_url: '', active: true, sort_order: 0 });
+    notify('Slide saved.');
+  };
+
+  const editSlide = (s: Slide) => { setSlideForm({ ...s }); setEditingSlide(s.id); };
+  const deleteSlide = async (id: number) => { await api(`/api/slides/${id}`, 'DELETE'); setSlides((prev) => prev.filter((s) => s.id !== id)); };
+
+  const saveEvent = async (e: React.FormEvent) => {
+    e.preventDefault();
+    const payload = { ...eventForm, active: eventForm.active !== false };
+    if (editingEvent) {
+      await api(`/api/calendar_events/${editingEvent}`, 'PUT', payload);
+      setEvents((prev) => prev.map((ev) => (ev.id === editingEvent ? { ...ev, ...payload } as CalendarEvent : ev)));
+      setEditingEvent(null);
+    } else {
+      const json = await api('/api/calendar_events', 'POST', payload);
+      setEvents((prev) => [...prev, json.data]);
+    }
+    setEventForm({ date: '', title: '', type: 'event', description: '', color: '#E8A849', active: true });
+    notify('Calendar event saved.');
+  };
+
+  const editEvent = (ev: CalendarEvent) => { setEventForm({ ...ev }); setEditingEvent(ev.id); };
+  const deleteEvent = async (id: number) => { await api(`/api/calendar_events/${id}`, 'DELETE'); setEvents((prev) => prev.filter((ev) => ev.id !== id)); };
+
+  const saveSocialEvent = async (e: React.FormEvent) => {
+    e.preventDefault();
+    const payload = {
+      name: socialEventForm.name || '',
+      description: socialEventForm.description || '',
+      price: socialEventForm.price || null,
+      date: socialEventForm.date || null,
+      photos: socialEventForm.photos || [],
+      featured_photo: socialEventForm.featured_photo || null,
+      active: socialEventForm.active !== false,
+      sort_order: socialEventForm.sort_order || 0,
+    };
+    if (editingSocialEvent) {
+      await api(`/api/social_events/${editingSocialEvent}`, 'PUT', payload);
+      setSocialEvents((prev) => prev.map((se) => (se.id === editingSocialEvent ? { ...se, ...payload } as SocialEvent : se)));
+      setEditingSocialEvent(null);
+    } else {
+      const json = await api('/api/social_events', 'POST', payload);
+      setSocialEvents((prev) => [...prev, json.data]);
+    }
+    setSocialEventForm({ name: '', description: '', price: '', date: '', photos: [], featured_photo: null, active: true, sort_order: 0 });
+    notify('Social event saved.');
+  };
+
+  const editSocialEvent = (se: SocialEvent) => { setSocialEventForm({ ...se, photos: se.photos || [], featured_photo: se.featured_photo || null }); setEditingSocialEvent(se.id); };
+  const deleteSocialEvent = async (id: number) => { await api(`/api/social_events/${id}`, 'DELETE'); setSocialEvents((prev) => prev.filter((se) => se.id !== id)); };
+
+  const loadSocialEventReservations = async (eventId: number) => {
+    setSocialEventReservationsFor(eventId);
+    const res = await fetch(`/api/social_event_reservations?social_event_id=${eventId}`, { credentials: 'same-origin' });
+    const json = await res.json().catch(() => ({ data: [] }));
+    setSocialEventReservations(json.data || []);
+  };
+
+  const updateReservationStatus = async (reservationId: number, status: SocialEventReservation['status']) => {
+    await api(`/api/admin/social_event_reservations/${reservationId}`, 'PUT', { status });
+    setSocialEventReservations((prev) => prev.map((r) => (r.id === reservationId ? { ...r, status } : r)));
+  };
+
+  const deleteReservation = async (reservationId: number) => {
+    await api(`/api/admin/social_event_reservations/${reservationId}`, 'DELETE');
+    setSocialEventReservations((prev) => prev.filter((r) => r.id !== reservationId));
+  };
+
+  if (loading) {
+    return (
+      <main style={{ padding: '2rem', color: warm, fontSize: '18px' }}>
+        <p>Loading admin...</p>
+      </main>
+    );
+  }
+
+  return (
+    <main style={{ padding: '2rem', maxWidth: '80rem', margin: '0 auto' }}>
+      <h1 style={{ fontSize: 'clamp(28px, 4vw, 42px)', fontWeight: 400, fontStyle: 'italic', color: navy, margin: '0 0 0.5rem' }}>
+        Admin Portal
+      </h1>
+      <p style={{ color: '#555', marginBottom: '1.5rem' }}>
+        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>}
+
+<AccordionSection title="Brand Assets">
+        <div style={{ display: 'grid', gap: '1rem', gridTemplateColumns: '1fr auto', alignItems: 'end' }}>
+          <Text label="Navbar logo" value={logoUrl} onChange={setLogoUrl} />
+          <Button onClick={() => updateAsset('logo', logoUrl)} disabled={!logoUrl}>Save logo</Button>
+          <Text label="Favicon" value={faviconUrl} onChange={setFaviconUrl} />
+          <Button onClick={() => updateAsset('favicon', faviconUrl)} disabled={!faviconUrl}>Save favicon</Button>
+          <Text label="Homepage tagline" value={tagline} onChange={setTagline} />
+          <Button onClick={() => updateAsset('tagline', tagline)} disabled={!tagline}>Save tagline</Button>
+        </div>
+        <p style={{ margin: '1rem 0 0', fontSize: '13px', color: '#777' }}>
+          Tip: click an uploaded gallery image to preview, copy its data URL, and paste it above.
+        </p>
+      </AccordionSection>
+
+      <AccordionSection title="Footer / Contact">
+        <div style={{ display: 'grid', gap: '1rem', gridTemplateColumns: 'repeat(auto-fit, minmax(260px, 1fr))' }}>
+          <Text label="Facebook URL" value={footer.facebook_url} onChange={(v) => setFooter({ ...footer, facebook_url: v })} />
+          <Text label="Instagram URL" value={footer.instagram_url} onChange={(v) => setFooter({ ...footer, instagram_url: v })} />
+          <Text label="WhatsApp URL" value={footer.whatsapp_url} onChange={(v) => setFooter({ ...footer, whatsapp_url: v })} />
+          <Text label="Address" value={footer.address} onChange={(v) => setFooter({ ...footer, address: v })} />
+          <Text label="Phone" value={footer.phone} onChange={(v) => setFooter({ ...footer, phone: v })} />
+          <Text label="Email" value={footer.email} onChange={(v) => setFooter({ ...footer, email: v })} />
+        </div>
+        <div style={{ marginTop: '1rem' }}>
+          <Button onClick={saveFooter}>Save footer info</Button>
+        </div>
+      </AccordionSection>
+
+      <AccordionSection title="Image Gallery">
+        <div style={{ display: 'grid', gap: '1rem', marginBottom: '1.5rem' }}>
+          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gap: '1rem' }}>
+            <label style={{ display: 'flex', flexDirection: 'column', gap: '0.4rem', fontSize: '14px', color: '#555' }}>
+              Category
+              <select 
+                value={uploadCategory} 
+                onChange={(e) => setUploadCategory(e.target.value)}
+                style={{ padding: '0.6rem 0.8rem', borderRadius: '10px', border: '1px solid rgba(1,13,30,0.18)' }}
+              >
+                <option value="rooms">Rooms</option>
+                <option value="coffee">Coffee</option>
+                <option value="landscape">Landscape</option>
+                <option value="social">Social</option>
+                <option value="other">Other</option>
+              </select>
+            </label>
+            
+            {uploadCategory === 'rooms' && (
+              <label style={{ display: 'flex', flexDirection: 'column', gap: '0.4rem', fontSize: '14px', color: '#555' }}>
+                Room
+                <select 
+                  value={uploadRoomId} 
+                  onChange={(e) => setUploadRoomId(e.target.value)}
+                  style={{ padding: '0.6rem 0.8rem', borderRadius: '10px', border: '1px solid rgba(1,13,30,0.18)' }}
+                >
+                  <option value="">Select a room</option>
+                  {rooms.map((room) => (
+                    <option key={room.id} value={room.id}>{room.name}</option>
+                  ))}
+                </select>
+              </label>
+            )}
+            
+            <label style={{ display: 'flex', flexDirection: 'column', gap: '0.4rem', fontSize: '14px', color: '#555' }}>
+              Location Target
+              <select 
+                value={uploadLocationTarget} 
+                onChange={(e) => setUploadLocationTarget(e.target.value)}
+                style={{ padding: '0.6rem 0.8rem', borderRadius: '10px', border: '1px solid rgba(1,13,30,0.18)' }}
+              >
+                <option value="gallery">Gallery</option>
+                <option value="homepage">Homepage</option>
+                <option value="rooms">Rooms</option>
+                <option value="coffee">Coffee</option>
+                <option value="social">Social</option>
+              </select>
+            </label>
+          </div>
+          
+          <label style={{ display: 'inline-flex', alignItems: 'center', gap: '0.5rem', padding: '0.75rem 1.25rem', background: gold, color: navy, borderRadius: '999px', cursor: 'pointer', fontWeight: 600 }}>
+            + Upload images
+            <input type="file" accept="image/*" multiple onChange={handleUpload} style={{ display: 'none' }} />
+          </label>
+        </div>
+        
+        {images.length === 0 ? (
+          <p style={{ color: '#777' }}>No images uploaded yet.</p>
+        ) : (
+          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(200px, 1fr))', gap: '1.25rem' }}>
+            {images.map((img) => (
+              <div
+                key={img.id}
+                style={{
+                  borderRadius: '16px',
+                  overflow: 'hidden',
+                  display: 'flex',
+                  flexDirection: 'column',
+                  background: '#f5f0e8',
+                  transition: 'transform 200ms, box-shadow 200ms',
+                  cursor: 'pointer',
+                }}
+                onMouseEnter={(e) => { e.currentTarget.style.transform = 'scale(1.03)'; e.currentTarget.style.boxShadow = '0 8px 22px rgba(0,0,0,0.12)'; }}
+                onMouseLeave={(e) => { e.currentTarget.style.transform = 'scale(1)'; e.currentTarget.style.boxShadow = 'none'; }}
+                onClick={() => { navigator.clipboard.writeText(img.data); notify('Image URL copied.'); }}
+              >
+                <img src={img.data} alt={img.filename} style={{ width: '100%', height: '180px', objectFit: 'cover' }} />
+                <button
+                  onClick={(e) => { e.stopPropagation(); handleDelete(img.id); }}
+                  style={{ padding: '0.65rem', background: '#c23b22', color: '#fff', border: 'none', cursor: 'pointer', fontSize: '14px', fontWeight: 600 }}
+                >
+                  Delete
+                </button>
+              </div>
+            ))}
+          </div>
+        )}
+      </AccordionSection>
+
+      <AccordionSection title="Homepage Slideshow">
+        <form onSubmit={saveSlide} style={{ display: 'grid', gap: '1rem', gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))', marginBottom: '1.5rem' }}>
+          <Text label="Title" value={slideForm.title || ''} onChange={(v) => setSlideForm({ ...slideForm, title: v })} />
+          <Text label="Subtitle" value={slideForm.subtitle || ''} onChange={(v) => setSlideForm({ ...slideForm, subtitle: v })} />
+          <Number label="Sort order" value={slideForm.sort_order ?? 0} onChange={(v) => setSlideForm({ ...slideForm, sort_order: parseInt(v || '0', 10) })} />
+          <ImageSelect label="Gallery image" images={images} value={slideForm.image_id ?? ''} onChange={(v) => {
+            const imageId = v ? parseInt(v, 10) : null;
+            const image = imageId ? images.find((img) => img.id === imageId) : null;
+            setSlideForm({ ...slideForm, image_id: imageId, image_url: image?.data || '' });
+          }} />
+          {slideForm.image_url && (
+            <div style={{ gridColumn: '1 / -1' }}>
+              <img src={slideForm.image_url} alt="Slide preview" style={{ width: '100%', maxHeight: '200px', objectFit: 'cover', borderRadius: '12px' }} />
+            </div>
+          )}
+          <label style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', fontSize: '14px', color: '#555' }}>
+            <input type="checkbox" checked={slideForm.active !== false} onChange={(e) => setSlideForm({ ...slideForm, active: e.target.checked })} />
+            Active
+          </label>
+          <div style={{ display: 'flex', gap: '0.5rem', alignItems: 'end' }}>
+            <Button type="submit">{editingSlide ? 'Update slide' : 'Add slide'}</Button>
+            {editingSlide && <SecondaryButton onClick={() => { setEditingSlide(null); setSlideForm({ title: '', subtitle: '', image_id: null, image_url: '', active: true, sort_order: 0 }); }}>Cancel</SecondaryButton>}
+          </div>
+        </form>
+        <ListTable rows={slides.map((s) => [s.title || '(untitled)', s.image_url ? '🖼️ image' : 'no image', s.active ? 'On' : 'Off', `#${s.sort_order}`])} onEdit={(i) => editSlide(slides[i])} onDelete={(i) => deleteSlide(slides[i].id)} />
+      </AccordionSection>
+
+      <AccordionSection title="Calendar Events">
+        <form onSubmit={saveEvent} style={{ display: 'grid', gap: '1rem', gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))', marginBottom: '1.5rem' }}>
+          <Text label="Date" type="date" value={eventForm.date || ''} onChange={(v) => setEventForm({ ...eventForm, date: v })} />
+          <Text label="Title" value={eventForm.title || ''} onChange={(v) => setEventForm({ ...eventForm, title: v })} />
+          <label style={{ display: 'flex', flexDirection: 'column', gap: '0.4rem', fontSize: '14px', color: '#555' }}>
+            Type
+            <select value={eventForm.type || 'event'} onChange={(e) => setEventForm({ ...eventForm, type: e.target.value as CalendarEvent['type'] })} style={{ padding: '0.6rem 0.8rem', borderRadius: '10px', border: '1px solid rgba(1,13,30,0.18)' }}>
+              <option value="holiday">Holiday</option>
+              <option value="season">Season</option>
+              <option value="weather">Weather</option>
+              <option value="event">Event</option>
+            </select>
+          </label>
+          <label style={{ display: 'flex', flexDirection: 'column', gap: '0.4rem', fontSize: '14px', color: '#555' }}>
+            Color
+            <div style={{ display: 'flex', alignItems: 'center', gap: '0.6rem' }}>
+              <input
+                type="color"
+                value={eventForm.color || '#E8A849'}
+                onChange={(e) => setEventForm({ ...eventForm, color: e.target.value })}
+                style={{ width: '3rem', height: '2.4rem', padding: 0, border: '1px solid rgba(1,13,30,0.18)', borderRadius: '10px', cursor: 'pointer', background: 'transparent' }}
+              />
+              <Text label="Hex" value={eventForm.color || '#E8A849'} onChange={(v) => setEventForm({ ...eventForm, color: v })} />
+            </div>
+          </label>
+          <Text label="Description" value={eventForm.description || ''} onChange={(v) => setEventForm({ ...eventForm, description: v })} />
+          <label style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', fontSize: '14px', color: '#555' }}>
+            <input type="checkbox" checked={eventForm.active !== false} onChange={(e) => setEventForm({ ...eventForm, active: e.target.checked })} />
+            Active
+          </label>
+          <div style={{ display: 'flex', gap: '0.5rem', alignItems: 'end' }}>
+            <Button type="submit">{editingEvent ? 'Update event' : 'Add event'}</Button>
+            {editingEvent && <SecondaryButton onClick={() => { setEditingEvent(null); setEventForm({ date: '', title: '', type: 'event', description: '', color: '#E8A849', active: true }); }}>Cancel</SecondaryButton>}
+          </div>
+        </form>
+        <ListTable rows={events.map((ev) => [ev.date, ev.title, ev.type, ev.active ? 'On' : 'Off'])} onEdit={(i) => editEvent(events[i])} onDelete={(i) => deleteEvent(events[i].id)} />
+      </AccordionSection>
+
+      <AccordionSection title="Social Events">
+        <form onSubmit={saveSocialEvent} style={{ display: 'grid', gap: '1rem', gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))', marginBottom: '1.5rem' }}>
+          <Text label="Name" value={socialEventForm.name || ''} onChange={(v) => setSocialEventForm({ ...socialEventForm, name: v })} />
+          <Text label="Price" value={socialEventForm.price || ''} onChange={(v) => setSocialEventForm({ ...socialEventForm, price: v })} />
+          <Text label="Date" type="date" value={socialEventForm.date || ''} onChange={(v) => setSocialEventForm({ ...socialEventForm, date: v })} />
+          <Number label="Sort order" value={socialEventForm.sort_order ?? 0} onChange={(v) => setSocialEventForm({ ...socialEventForm, sort_order: parseInt(v || '0', 10) })} />
+          <PhotoPicker
+            label="Event photos"
+            images={images}
+            photos={socialEventForm.photos || []}
+            featuredPhoto={socialEventForm.featured_photo || null}
+            onChange={(photos: string[], featured: string | null) => setSocialEventForm({ ...socialEventForm, photos, featured_photo: featured })}
+          />
+          <Text label="Description" value={socialEventForm.description || ''} onChange={(v) => setSocialEventForm({ ...socialEventForm, description: v })} />
+          <label style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', fontSize: '14px', color: '#555' }}>
+            <input type="checkbox" checked={socialEventForm.active !== false} onChange={(e) => setSocialEventForm({ ...socialEventForm, active: e.target.checked })} />
+            Active
+          </label>
+          <div style={{ display: 'flex', gap: '0.5rem', alignItems: 'end' }}>
+            <Button type="submit">{editingSocialEvent ? 'Update social event' : 'Add social event'}</Button>
+            {editingSocialEvent && <SecondaryButton onClick={() => { setEditingSocialEvent(null); setSocialEventForm({ name: '', description: '', price: '', date: '', photos: [], featured_photo: null, active: true, sort_order: 0 }); }}>Cancel</SecondaryButton>}
+          </div>
+        </form>
+        <ListTable rows={socialEvents.map((se) => [se.name, se.date || '', se.active ? 'On' : 'Off', `#${se.sort_order}`, `${se.reservation_count || 0} reservations`])}
+          onEdit={(i) => editSocialEvent(socialEvents[i])}
+          onDelete={(i) => deleteSocialEvent(socialEvents[i].id)}
+          onComments={(i) => loadSocialEventReservations(socialEvents[i].id)}
+        />
+        {socialEventReservationsFor !== null && (
+          <div style={{ marginTop: '1.5rem', padding: '1rem', background: '#fff', borderRadius: '12px' }}>
+            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '0.75rem' }}>
+              <strong style={{ color: navy }}>Reservations for event #{socialEventReservationsFor}</strong>
+              <SecondaryButton onClick={() => { setSocialEventReservationsFor(null); setSocialEventReservations([]); }}>Close</SecondaryButton>
+            </div>
+            {socialEventReservations.length === 0 ? (
+              <p style={{ color: '#777' }}>No reservations yet.</p>
+            ) : (
+              <div style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem' }}>
+                {socialEventReservations.map((r) => (
+                  <div key={r.id} style={{ padding: '0.75rem', background: '#f5f0e8', borderRadius: '10px' }}>
+                    <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '0.3rem' }}>
+                      <strong>{r.username || r.event_name}</strong>
+                      <span style={{ fontSize: '12px', color: '#777' }}>{new Date(r.created_at).toLocaleDateString()}</span>
+                    </div>
+                    <p style={{ margin: 0, color: '#555' }}>{`${r.guests} guest${r.guests === 1 ? '' : 's'}${r.notes ? ' — ' + r.notes : ''}`}</p>
+                    <div style={{ marginTop: '0.5rem', display: 'flex', gap: '0.5rem', alignItems: 'center' }}>
+                      <select
+                        value={r.status}
+                        onChange={(e) => updateReservationStatus(r.id, e.target.value as SocialEventReservation['status'])}
+                        style={{ padding: '0.4rem 0.6rem', borderRadius: '8px', border: '1px solid rgba(1,13,30,0.18)', fontSize: '14px' }}
+                      >
+                        <option value="pending">Pending</option>
+                        <option value="confirmed">Confirmed</option>
+                        <option value="cancelled">Cancelled</option>
+                      </select>
+                      <DangerButton onClick={() => deleteReservation(r.id)}>Delete</DangerButton>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            )}
+          </div>
+        )}
+      </AccordionSection>
+
+      <AccordionSection title="Rooms">
+        <form onSubmit={saveRoom} style={{ display: 'grid', gap: '1rem', gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))', marginBottom: '1.5rem' }}>
+          <Text label="Name" value={roomForm.name || ''} onChange={(v) => setRoomForm({ ...roomForm, name: v })} />
+          <Text label="Price / night" value={roomForm.price || ''} onChange={(v) => setRoomForm({ ...roomForm, price: v })} />
+          <Text label="Description" value={roomForm.description || ''} onChange={(v) => setRoomForm({ ...roomForm, description: v })} />
+          <Number label="Sort order" value={roomForm.sort_order ?? 0} onChange={(v) => setRoomForm({ ...roomForm, sort_order: parseInt(v || '0', 10) })} />
+          <PhotoPicker
+            label="Room photos"
+            images={images}
+            photos={roomForm.photos || []}
+            featuredPhoto={roomForm.featured_photo}
+            onChange={(photos: string[], featured: string | null) => setRoomForm({ ...roomForm, photos, featured_photo: featured })}
+          />
+          <label style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', fontSize: '14px', color: '#555' }}>
+            <input type="checkbox" checked={roomForm.active !== false} onChange={(e) => setRoomForm({ ...roomForm, active: e.target.checked })} />
+            Active
+          </label>
+          <div style={{ display: 'flex', gap: '0.5rem', alignItems: 'end' }}>
+            <Button type="submit">{editingRoom ? 'Update room' : 'Add room'}</Button>
+            {editingRoom && <SecondaryButton onClick={() => { setEditingRoom(null); setRoomForm({ name: '', description: '', price: '', photos: ([] as string[]), featured_photo: null, active: true, sort_order: 0 }); }}>Cancel</SecondaryButton>}
+          </div>
+        </form>
+        <ListTable rows={rooms.map((r) => [r.name, `$${r.price}`, r.description.slice(0, 60), r.active ? 'On' : 'Off', `#${r.sort_order}`])}
+          onEdit={(i) => editRoom(rooms[i])}
+          onDelete={(i) => deleteRoom(rooms[i].id)}
+          onComments={(i) => loadRoomComments(rooms[i].id)}
+        />
+        {roomCommentRoomId !== null && (
+          <div style={{ marginTop: '1.5rem', padding: '1rem', background: '#fff', borderRadius: '12px' }}>
+            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '0.75rem' }}>
+              <strong style={{ color: navy }}>Comments for room #{roomCommentRoomId}</strong>
+              <SecondaryButton onClick={() => { setRoomCommentRoomId(null); setRoomComments([]); }}>Close</SecondaryButton>
+            </div>
+            {roomComments.length === 0 ? (
+              <p style={{ color: '#777' }}>No comments yet.</p>
+            ) : (
+              <div style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem' }}>
+                {roomComments.map((c) => (
+                  <div key={c.id} style={{ padding: '0.75rem', background: '#f5f0e8', borderRadius: '10px' }}>
+                    <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '0.3rem' }}>
+                      <strong>{c.first_name}{c.last_initial ? ` ${c.last_initial}.` : ''}</strong>
+                      <span style={{ fontSize: '12px', color: '#777' }}>{new Date(c.created_at).toLocaleDateString()}</span>
+                    </div>
+                    <p style={{ margin: 0, color: '#555' }}>{c.text}</p>
+                    <div style={{ marginTop: '0.5rem' }}>
+                      <DangerButton onClick={() => deleteRoomComment(c.id)}>Remove comment</DangerButton>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            )}
+          </div>
+        )}
+      </AccordionSection>
+
+      <AccordionSection title="Menu">
+        <form onSubmit={saveMenu} style={{ display: 'grid', gap: '1rem', gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))', marginBottom: '1.5rem' }}>
+          <Text label="Category" value={menuForm.category || ''} onChange={(v) => setMenuForm({ ...menuForm, category: v })} />
+          <Text label="Name" value={menuForm.name || ''} onChange={(v) => setMenuForm({ ...menuForm, name: v })} />
+          <Text label="Price" value={menuForm.price || ''} onChange={(v) => setMenuForm({ ...menuForm, price: v })} />
+          <Number label="Sort order" value={menuForm.sort_order ?? 0} onChange={(v) => setMenuForm({ ...menuForm, sort_order: parseInt(v || '0', 10) })} />
+          <label style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', fontSize: '14px', color: '#555' }}>
+            <input type="checkbox" checked={menuForm.is_daily_special || false} onChange={(e) => setMenuForm({ ...menuForm, is_daily_special: e.target.checked })} />
+            Daily special
+          </label>
+          <label style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', fontSize: '14px', color: '#555' }}>
+            <input type="checkbox" checked={menuForm.active !== false} onChange={(e) => setMenuForm({ ...menuForm, active: e.target.checked })} />
+            Active
+          </label>
+          <Text label="Description" value={menuForm.description || ''} onChange={(v) => setMenuForm({ ...menuForm, description: v })} />
+          <div style={{ display: 'flex', gap: '0.5rem', alignItems: 'end' }}>
+            <Button type="submit">{editingMenu ? 'Update item' : 'Add item'}</Button>
+            {editingMenu && <SecondaryButton onClick={() => { setEditingMenu(null); setMenuForm({ category: '', name: '', description: '', price: '', is_daily_special: false, active: true, sort_order: 0 }); }}>Cancel</SecondaryButton>}
+          </div>
+        </form>
+        <ListTable rows={menu.map((m) => [m.category, m.name, `$${m.price}`, m.is_daily_special ? '★ Daily' : '', m.active ? 'On' : 'Off', `#${m.sort_order}`])} onEdit={(i) => editMenu(menu[i])} onDelete={(i) => deleteMenu(menu[i].id)} />
+      </AccordionSection>
+
+      <AccordionSection title="Landscape Places">
+        <form onSubmit={savePlace} style={{ display: 'grid', gap: '1rem', gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))', marginBottom: '1.5rem' }}>
+          <Text label="Name" value={placeForm.name || ''} onChange={(v) => setPlaceForm({ ...placeForm, name: v })} />
+          <Text label="Distance (km)" value={placeForm.distance_km || ''} onChange={(v) => setPlaceForm({ ...placeForm, distance_km: v })} />
+          <Text label="Visit time" value={placeForm.visit_time || ''} onChange={(v) => setPlaceForm({ ...placeForm, visit_time: v })} />
+          <Number label="Sort order" value={placeForm.sort_order ?? 0} onChange={(v) => setPlaceForm({ ...placeForm, sort_order: parseInt(v || '0', 10) })} />
+          <PhotoPicker
+            label="Photos"
+            images={images}
+            photos={placeForm.photos || []}
+            featuredPhoto={placeForm.featured_photo || null}
+            onChange={(photos: string[], featured: string | null) => setPlaceForm({ ...placeForm, photos, featured_photo: featured })}
+          />
+          <Text label="Description" value={placeForm.description || ''} onChange={(v) => setPlaceForm({ ...placeForm, description: v })} />
+          <Text label="Suggestion" value={placeForm.suggestion || ''} onChange={(v) => setPlaceForm({ ...placeForm, suggestion: v })} />
+          <label style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', fontSize: '14px', color: '#555' }}>
+            <input type="checkbox" checked={placeForm.active !== false} onChange={(e) => setPlaceForm({ ...placeForm, active: e.target.checked })} />
+            Active
+          </label>
+          <div style={{ display: 'flex', gap: '0.5rem', alignItems: 'end' }}>
+            <Button type="submit">{editingPlace ? 'Update place' : 'Add place'}</Button>
+            {editingPlace && <SecondaryButton onClick={() => { setEditingPlace(null); setPlaceForm({ name: '', description: '', photos: ([] as string[]), featured_photo: null, distance_km: '', visit_time: '', suggestion: '', active: true, sort_order: 0 }); }}>Cancel</SecondaryButton>}
+          </div>
+        </form>
+        <ListTable rows={places.map((p) => [p.name, `${p.distance_km || ''} km`, p.description.slice(0, 60), p.photos.length > 0 ? `🖼️ ${p.photos.length}` : 'no image', p.active ? 'On' : 'Off', `#${p.sort_order}`])} onEdit={(i) => editPlace(places[i])} onDelete={(i) => deletePlace(places[i].id)} />
+      </AccordionSection>
+
+      <AccordionSection title="Pending Reviews">
+        {reviews.length === 0 ? <p style={{ color: '#777' }}>No pending reviews.</p> : (
+          <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
+            {reviews.map((r) => (
+              <div key={r.id} style={{ background: '#fff', padding: '1rem 1.25rem', borderRadius: '12px', boxShadow: '0 1px 3px rgba(1,13,30,0.06)' }}>
+                <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '0.5rem' }}>
+                  <strong>{r.author_name}</strong>
+                  <span style={{ color: gold }}>{'★'.repeat(r.rating)}{'☆'.repeat(5 - r.rating)}</span>
+                </div>
+                <p style={{ margin: '0 0 0.75rem', color: '#555' }}>{r.text}</p>
+                <div style={{ display: 'flex', gap: '0.5rem' }}>
+                  {!r.approved && <Button onClick={() => approveReview(r.id)}>Approve</Button>}
+                  <DangerButton onClick={() => deleteReview(r.id)}>Delete</DangerButton>
+                </div>
+              </div>
+            ))}
+          function AccordionSection({ title, children, defaultOpen = false }: { title: string; children: React.ReactNode; defaultOpen?: boolean }) {
+            const [open, setOpen] = useState(defaultOpen);
+            return (
+              <section style={{ marginBottom: '2.5rem', background: '#fff', borderRadius: '12px', boxShadow: '0 1px 3px rgba(1,13,30,0.06)', padding: '1rem 1.25rem' }}>
+                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '0.5rem', cursor: 'pointer' }} onClick={() => setOpen((v) => !v)}>
+                  <h2 style={{ fontSize: 'clamp(20px, 3vw, 28px)', fontWeight: 400, color: navy, margin: 0 }}>{title}</h2>
+                  <span style={{ fontSize: '13px', fontWeight: 600, color: '#555' }}>{open ? 'Minimize' : 'Maximize'}</span>
+                </div>
+              </section>
+            );
+          }
+                {open && <div style={{ marginTop: '0.25rem' }}>{children}</div>}
+              </section>
+            );
+          }
+
+          function Button({ children, type = 'button', disabled, onClick }: { children: React.ReactNode; type?: 'button' | 'submit'; disabled?: boolean; onClick?: () => void }) {
+            return (
+              <button
+                type={type}
+                disabled={disabled}
+                onClick={onClick}
+                style={{
+                  padding: '0.65rem 1.25rem',
+                  background: disabled ? '#ccc' : gold,
+                  color: navy,
+                  border: 'none',
+                  borderRadius: '999px',
+                  cursor: disabled ? 'not-allowed' : 'pointer',
+                  fontWeight: 600,
+                  transition: 'filter 150ms',
+                }}
+                onMouseEnter={(e) => { if (!disabled) e.currentTarget.style.filter = 'brightness(1.08)'; }}
+                onMouseLeave={(e) => { e.currentTarget.style.filter = 'brightness(1)'; }}
+              >
+                {children}
+              </button>
+            );
+          }
+
+          function SecondaryButton({ children, onClick, type = 'button' }: { children: React.ReactNode; onClick?: () => void; type?: 'button' | 'submit' }) {
+            return (
+              <button
+                type={type}
+                onClick={onClick}
+                style={{
+                  padding: '0.65rem 1.25rem',
+                  background: 'transparent',
+                  color: navy,
+                  border: `1px solid ${navy}`,
+                  borderRadius: '999px',
+                  cursor: 'pointer',
+                  fontWeight: 600,
+                }}
+              >
+                {children}
+              </button>
+            );
+          }
+
+          function DangerButton({ children, onClick }: { children: React.ReactNode; onClick: () => void }) {
+            return (
+    <button
+      onClick={onClick}
+      style={{ padding: '0.5rem 1rem', background: '#c23b22', color: '#fff', border: 'none', borderRadius: '999px', cursor: 'pointer', fontWeight: 600, fontSize: '13px' }}
+    >
+      {children}
+    </button>
+  );
+}
+
+function Text({ label, value, type = 'text', onChange }: { label: string; value: string; type?: string; onChange: (v: string) => void }) {
+  return (
+    <label style={{ display: 'flex', flexDirection: 'column', gap: '0.4rem', fontSize: '14px', color: '#555' }}>
+      {label}
+      <input
+        type={type}
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        style={{ padding: '0.6rem 0.8rem', borderRadius: '10px', border: '1px solid rgba(1,13,30,0.18)', fontSize: '15px' }}
+      />
+    </label>
+  );
+}
+
+function Number({ label, value, onChange }: { label: string; value: number; onChange: (v: string) => void }) {
+  return (
+    <label style={{ display: 'flex', flexDirection: 'column', gap: '0.4rem', fontSize: '14px', color: '#555' }}>
+      {label}
+      <input
+        type="number"
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        style={{ padding: '0.6rem 0.8rem', borderRadius: '10px', border: '1px solid rgba(1,13,30,0.18)', fontSize: '15px' }}
+      />
+    </label>
+  );
+}
+
+function ImageSelect({ label, images, value, onChange }: { label: string; images: ImageRecord[]; value: string | number; onChange: (v: string) => void }) {
+  return (
+    <label style={{ display: 'flex', flexDirection: 'column', gap: '0.4rem', fontSize: '14px', color: '#555' }}>
+      {label}
+      <select value={value} onChange={(e) => onChange(e.target.value)} style={{ padding: '0.6rem 0.8rem', borderRadius: '10px', border: '1px solid rgba(1,13,30,0.18)' }}>
+        <option value="">-- select image --</option>
+        {images.map((img) => (
+          <option key={img.id} value={img.id}>{img.filename}</option>
+        ))}
+      </select>
+    </label>
+  );
+}
+
+function PhotoPicker({ label, images, photos, featuredPhoto, onChange }: { label: string; images: ImageRecord[]; photos: string[]; featuredPhoto: string | null; onChange: (photos: string[], featured: string | null) => void }) {
+  return (
+    <div style={{ gridColumn: '1 / -1' }}>
+      <label style={{ display: 'flex', flexDirection: 'column', gap: '0.4rem', fontSize: '14px', color: '#555', marginBottom: '0.5rem' }}>{label}</label>
+      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(130px, 1fr))', gap: '0.75rem' }}>
+        {images.map((img) => {
+          const selected = photos.includes(img.data);
+          const featured = featuredPhoto === img.data;
+          return (
+            <div
+              key={img.id}
+              onClick={() => {
+                const next = selected ? photos.filter((p) => p !== img.data) : [...photos, img.data];
+                const nextFeatured = featured ? null : img.data;
+                onChange(next, nextFeatured);
+              }}
+              style={{
+                border: selected ? `3px solid ${gold}` : '3px solid transparent',
+                borderRadius: '12px',
+                overflow: 'hidden',
+                cursor: 'pointer',
+                position: 'relative',
+                transition: 'transform 150ms',
+              }}
+              onMouseEnter={(e) => { e.currentTarget.style.transform = 'scale(1.03)'; }}
+              onMouseLeave={(e) => { e.currentTarget.style.transform = 'scale(1)'; }}
+            >
+              {featured && <span style={{ position: 'absolute', top: 4, left: 4, background: gold, color: navy, fontSize: '11px', fontWeight: 700, padding: '2px 6px', borderRadius: '6px' }}>FEATURED</span>}
+              {selected && !featured && <span style={{ position: 'absolute', top: 4, right: 4, background: navy, color: '#fff', fontSize: '11px', fontWeight: 700, padding: '2px 6px', borderRadius: '6px' }}>✓</span>}
+              <img src={img.data} alt={img.filename} style={{ width: '100%', height: '100px', objectFit: 'cover' }} />
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+
+function ListTable({ rows, onEdit, onDelete, onComments }: { rows: (string | number)[][]; onEdit?: (i: number) => void; onDelete?: (i: number) => void; onComments?: (i: number) => void }) {
+  if (rows.length === 0) return <p style={{ color: '#777' }}>No items yet.</p>;
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
+      {rows.map((row, i) => (
+        <div key={i} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '0.75rem 1rem', background: '#fff', borderRadius: '12px', boxShadow: '0 1px 3px rgba(1,13,30,0.06)' }}>
+          <div style={{ display: 'flex', gap: '1rem', flexWrap: 'wrap' }}>
+            {row.map((cell, j) => (
+              <span key={j} style={{ color: j === 0 ? navy : '#555', fontWeight: j === 0 ? 600 : 400 }}>{cell}</span>
+            ))}
+          </div>
+          <div style={{ display: 'flex', gap: '0.5rem' }}>
+            {onEdit && <SecondaryButton onClick={() => onEdit(i)}>Edit</SecondaryButton>}
+            {onComments && <SecondaryButton onClick={() => onComments(i)}>Reservations</SecondaryButton>}
+            {onDelete && <DangerButton onClick={() => onDelete(i)}>Delete</DangerButton>}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+function Textarea({ label, value, onChange, rows = 3 }: { label: string; value: string; onChange: (v: string) => void; rows?: number }) {
+  return (
+    <label style={{ display: 'flex', flexDirection: 'column', gap: '0.4rem', fontSize: '14px', color: '#555' }}>
+      {label}
+      <textarea
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        rows={rows}
+        style={{ padding: '0.6rem 0.8rem', borderRadius: '10px', border: '1px solid rgba(1,13,30,0.18)', fontSize: '15px', resize: 'vertical' }}
+      />
+    </label>
+  );
+}
+
+function Select({ label, value, options, onChange }: { label: string; value: string; options: { value: string; label: string }[]; onChange: (v: string) => void }) {
+  return (
+    <label style={{ display: 'flex', flexDirection: 'column', gap: '0.4rem', fontSize: '14px', color: '#555' }}>
+      {label}
+      <select value={value} onChange={(e) => onChange(e.target.value)} style={{ padding: '0.6rem 0.8rem', borderRadius: '10px', border: '1px solid rgba(1,13,30,0.18)' }}>
+        {options.map((opt) => (
+          <option key={opt.value} value={opt.value}>{opt.label}</option>
+        ))}
+      </select>
+    </label>
+  );
+}
+
+function Checkbox({ label, checked, onChange }: { label: string; checked: boolean; onChange: (v: boolean) => void }) {
+  return (
+    <label style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', fontSize: '14px', color: '#555' }}>
+      <input type="checkbox" checked={checked} onChange={(e) => onChange(e.target.checked)} />
+      {label}
+    </label>
+  );
+}
+
+function StarRating({ value, onChange }: { value: number; onChange: (v: number) => void }) {
+  return (
+    <div style={{ display: 'flex', gap: '0.25rem' }}>
+      {[1, 2, 3, 4, 5].map((n) => (
+        <button
+          key={n}
+          type="button"
+          onClick={() => onChange(n)}
+          style={{ background: 'transparent', border: 'none', cursor: 'pointer', fontSize: '22px', color: n <= value ? gold : '#ccc' }}
+        >
+          ★
+        </button>
+      ))}
+    </div>
+  );
+}
+
+function DatePicker({ label, value, onChange }: { label: string; value: string; onChange: (v: string) => void }) {
+  return (
+    <label style={{ display: 'flex', flexDirection: 'column', gap: '0.4rem', fontSize: '14px', color: '#555' }}>
+      {label}
+      <input
+        type="date"
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        style={{ padding: '0.6rem 0.8rem', borderRadius: '10px', border: '1px solid rgba(1,13,30,0.18)', fontSize: '15px' }}
+      />
+    </label>
+  );
+}
+
+function ColorPicker({ label, value, onChange }: { label: string; value: string; onChange: (v: string) => void }) {
+  return (
+    <label style={{ display: 'flex', flexDirection: 'column', gap: '0.4rem', fontSize: '14px', color: '#555' }}>
+      {label}
+      <div style={{ display: 'flex', alignItems: 'center', gap: '0.6rem' }}>
+        <input
+          type="color"
+          value={value}
+          onChange={(e) => onChange(e.target.value)}
+          style={{ width: '3rem', height: '2.4rem', padding: 0, border: '1px solid rgba(1,13,30,0.18)', borderRadius: '10px', cursor: 'pointer', background: 'transparent' }}
+        />
+        <Text label="Hex" value={value} onChange={onChange} />
+      </div>
+    </label>
+  );
+}
+
+function Modal({ open, onClose, title, children }: { open: boolean; onClose: () => void; title: string; children: React.ReactNode }) {
+  if (!open) return null;
+  return (
+    <div onClick={onClose} style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.45)', display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 1000 }}>
+      <div onClick={(e) => e.stopPropagation()} style={{ background: '#fffdf9', padding: '1.5rem', borderRadius: '16px', maxWidth: '560px', width: '90%', maxHeight: '80vh', overflow: 'auto' }}>
+        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '1rem' }}>
+          <h3 style={{ margin: 0, color: navy }}>{title}</h3>
+          <button onClick={onClose} style={{ background: 'transparent', border: 'none', fontSize: '20px', cursor: 'pointer' }}>✕</button>
+        </div>
+        {children}
+      </div>
+    </div>
+  );
+}
+
+function StatusBadge({ status }: { status: 'pending' | 'confirmed' | 'cancelled' }) {
+  const color = status === 'confirmed' ? '#3b7a22' : status === 'cancelled' ? '#c23b22' : '#a6683c';
+  return (
+    <span style={{ padding: '0.25rem 0.6rem', borderRadius: '999px', background: `${color}20`, color, fontSize: '12px', fontWeight: 700, textTransform: 'uppercase' }}>
+      {status}
+    </span>
+  );
+}
+
+function LoadingSpinner() {
+  return (
+    <div style={{ display: 'flex', justifyContent: 'center', padding: '2rem' }}>
+      <div style={{ width: '2rem', height: '2rem', border: `3px solid ${gold}40`, borderTop: `3px solid ${gold}`, borderRadius: '50%', animation: 'spin 1s linear infinite' }} />
+    </div>
+  );
+}
+
+function EmptyState({ text }: { text: string }) {
+  return <p style={{ color: '#777', textAlign: 'center', padding: '2rem 0' }}>{text}</p>;
+}
+
+function ErrorMessage({ message }: { message: string }) {
+  return <p style={{ color: '#c23b22', textAlign: 'center', padding: '1rem 0' }}>{message}</p>;
+}
+
+function Card({ children, onClick }: { children: React.ReactNode; onClick?: () => void }) {
+  return (
+    <div
+      onClick={onClick}
+      style={{
+        background: '#fff',
+        borderRadius: '16px',
+        boxShadow: '0 2px 8px rgba(1,13,30,0.06)',
+        padding: '1.25rem',
+        cursor: onClick ? 'pointer' : 'default',
+        transition: 'transform 200ms, box-shadow 200ms',
+      }}
+      onMouseEnter={(e) => { if (onClick) { e.currentTarget.style.transform = 'translateY(-4px)'; e.currentTarget.style.boxShadow = '0 8px 22px rgba(1,13,30,0.12)'; }}}
+      onMouseLeave={(e) => { e.currentTarget.style.transform = 'translateY(0)'; e.currentTarget.style.boxShadow = '0 2px 8px rgba(1,13,30,0.06)'; }}
+    >
+      {children}
+    </div>
+  );
+}
+
+function Input({ label, value, onChange, type = 'text' }: { label: string; value: string; onChange: (v: string) => void; type?: string }) {
+  return (
+    <label style={{ display: 'flex', flexDirection: 'column', gap: '0.4rem', fontSize: '14px', color: '#555' }}>
+      {label}
+      <input
+        type={type}
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        style={{ padding: '0.6rem 0.8rem', borderRadius: '10px', border: '1px solid rgba(1,13,30,0.18)', fontSize: '15px' }}
+      />
+    </label>
+  );
+}
+
+function Label({ children }: { children: React.ReactNode }) {
+  return <span style={{ fontSize: '14px', color: '#555' }}>{children}</span>;
+}
+
+function FormGrid({ children }: { children: React.ReactNode }) {
+  return <div style={{ display: 'grid', gap: '1rem', gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))', marginBottom: '1.5rem' }}>{children}</div>;
+}
+
+function PageHeader({ title, subtitle }: { title: string; subtitle?: string }) {
+  return (
+    <div style={{ marginBottom: '1.5rem' }}>
+      <h1 style={{ fontSize: 'clamp(28px, 4vw, 42px)', fontWeight: 400, fontStyle: 'italic', color: navy, margin: '0 0 0.5rem' }}>{title}</h1>
+      {subtitle && <p style={{ color: '#555', margin: 0 }}>{subtitle}</p>}
+    </div>
+  );
+}
+
+function Tabs({ tabs, active, onChange }: { tabs: string[]; active: string; onChange: (t: string) => void }) {
+  return (
+    <div style={{ display: 'flex', gap: '0.5rem', marginBottom: '1.5rem', borderBottom: `1px solid rgba(1,13,30,0.12)` }}>
+      {tabs.map((tab) => (
+        <button
+          key={tab}
+          onClick={() => onChange(tab)}
+          style={{
+            padding: '0.75rem 1.25rem',
+            background: 'transparent',
+            border: 'none',
+            borderBottom: active === tab ? `3px solid ${gold}` : '3px solid transparent',
+            color: active === tab ? navy : '#555',
+            fontWeight: active === tab ? 700 : 400,
+            cursor: 'pointer',
+          }}
+        >
+          {tab}
+        </button>
+      ))}
+    </div>
+  );
+}
+
+function PageWrapper({ children }: { children: React.ReactNode }) {
+  return (
+    <main style={{ padding: '2rem', maxWidth: '80rem', margin: '0 auto' }}>
+      {children}
+    </main>
+  );
+}
+
+function ActionBar({ children }: { children: React.ReactNode }) {
+  return <div style={{ display: 'flex', gap: '0.5rem', alignItems: 'end' }}>{children}</div>;
+}
+
+function StatsCards({ stats }: { stats: { label: string; value: string | number }[] }) {
+  return (
+    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(160px, 1fr))', gap: '1rem', marginBottom: '1.5rem' }}>
+      {stats.map((s) => (
+        <div key={s.label} style={{ background: '#fff', borderRadius: '12px', padding: '1rem', boxShadow: '0 1px 3px rgba(1,13,30,0.06)' }}>
+          <div style={{ fontSize: '12px', color: '#777', textTransform: 'uppercase', letterSpacing: '0.5px' }}>{s.label}</div>
+          <div style={{ fontSize: '24px', fontWeight: 700, color: navy, marginTop: '0.25rem' }}>{s.value}</div>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+export default function AdminPage() {
+}
+}
diff --git a/src/app/api/social_events/route.ts b/src/app/api/social_events/route.ts
index ed29ba4..63f31f3 100644
--- a/src/app/api/social_events/route.ts
+++ b/src/app/api/social_events/route.ts
@@ -4,17 +4,17 @@ import { db } from '@/lib/db';
 
 export async function GET() {
   try {
-    await requireRole('admin');
     const { rows } = await db.query(`
       SELECT se.*,
         (SELECT COUNT(*) FROM social_event_reservations ser WHERE ser.social_event_id = se.id) as reservation_count
       FROM social_events se
+      WHERE se.active = TRUE
       ORDER BY se.sort_order, se.date, se.id
     `);
     return NextResponse.json({ data: rows });
   } catch (error: any) {
     console.error('GET /api/social_events error:', error);
-    return NextResponse.json({ error: error.message || 'Unauthorized' }, { status: 401 });
+    return NextResponse.json({ error: error.message || 'Failed to fetch social events' }, { status: 500 });
   }
 }
 
diff --git a/src/lib/schema.ts b/src/lib/schema.ts
index ea95f8a..2189417 100644
--- a/src/lib/schema.ts
+++ b/src/lib/schema.ts
@@ -221,6 +221,18 @@ export async function initSchema() {
   await db.query(`
     ALTER TABLE users ADD COLUMN IF NOT EXISTS last_name VARCHAR(100);
   `);
+
+  await db.query(`
+    CREATE TABLE IF NOT EXISTS availability (
+      id SERIAL PRIMARY KEY,
+      room_id INTEGER REFERENCES rooms(id) ON DELETE CASCADE,
+      date DATE NOT NULL,
+      status VARCHAR(20) NOT NULL DEFAULT 'available' CHECK (status IN ('available', 'booked', 'maintenance')),
+      price NUMERIC(10,2),
+      created_at TIMESTAMP DEFAULT NOW(),
+      UNIQUE(room_id, date)
+    );
+  `);
 }
 
 export async function migrateFromLegacyPlaces() {