+ {/* Header */}
+
+
+ {/* Body */}
+
+
+ {PERIODS.map((p) => (
+
+ ))}
+
+ }
+ />
+
+ {isLoading || !data ? (
+
+
+ )
+}
diff --git a/apps/admin-panel/src/components/ProtectedRoute.tsx b/apps/admin-panel/src/components/ProtectedRoute.tsx
new file mode 100644
index 000000000..5786e9787
--- /dev/null
+++ b/apps/admin-panel/src/components/ProtectedRoute.tsx
@@ -0,0 +1,17 @@
+import { Navigate } from 'react-router-dom'
+import { useAuth } from '../lib/AuthContext'
+import { LoadingScreen } from '@venue404/ui'
+
+export function ProtectedRoute({ children }: { children: React.ReactNode }) {
+ const { user, loading } = useAuth()
+
+ if (loading) return
+
+ ) : (
+
+
+
+ {/* Table card */}
+
+
+
+
+
+
+
+
+ {/* Card header */}
+
+
+ {/* Create Modal */}
+
+
+
+ New amenity
+
+ }
+ />
+
+
+
+ {/* Content states */}
+ {isLoading && (
+
+ {/* Search */}
+
+
+
+ handleSearchChange(e.target.value)}
+ style={{ paddingLeft: '2.25rem' }}
+ />
+
+
+ {/* Show archived toggle */}
+
+
+
+ )}
+
+ {!isLoading && error && (
+
+ qc.invalidateQueries({ queryKey: ['admin', 'amenities'] })}>
+ Retry
+
+ }
+ />
+
+ )}
+
+ {!isLoading && !error && filtered.length === 0 && (
+
+
+ )}
+
+ {!isLoading && !error && filtered.length > 0 && (
+
+
+
+
+
+ )}
+ | Amenity | +Venues using it | +Status | +Created | +Actions | +
|---|---|---|---|---|
|
+
+ {amenity.icon ? (
+
+ {amenity.icon}
+
+ ) : (
+
+
+
+ )}
+ {amenity.name}
+
+ |
+ + {amenity.active_venue_count > 0 ? ( + + {amenity.active_venue_count} {amenity.active_venue_count === 1 ? 'venue' : 'venues'} + + ) : ( + None + )} + | +
+ {amenity.deleted_at ? (
+ |
+ + {new Date(amenity.created_at).toLocaleDateString('en-IN', { + year: 'numeric', month: 'short', day: 'numeric', + })} + | +
+ {amenity.deleted_at ? null : (
+
+
+
+
+ )}
+ |
+
+
+
+
+
+
+
+ New amenity
++ This amenity will immediately be available for venue owners to add to their listings. +
+ +
+
+
+ {createMutation.error && (
+
+
+ { setCreateName(e.target.value); createMutation.reset() }}
+ autoFocus
+ />
+
+
+
+ setCreateIcon(e.target.value)}
+ />
+
+ + {createMutation.error instanceof Error ? createMutation.error.message : 'Failed to create amenity'} +
+ )} + +
+
+
+
+
+
+
+
+
+
+
+ Edit amenity
++ Changes apply immediately across all venues using this amenity. +
+ +
+
+
+ {editMutation.error && (
+
+
+ { setEditName(e.target.value); editMutation.reset() }}
+ autoFocus
+ />
+
+
+
+ setEditIcon(e.target.value)}
+ />
+
+ + {editMutation.error instanceof Error ? editMutation.error.message : 'Failed to update amenity'} +
+ )} + +
+
+
+
+
+
+
+
+
+
+
+ Archive amenity
++ {deleteTarget?.name} will be hidden from venue owners and can no longer be assigned to new listings. +
+ + {/* Active venue warning */} + {deleteTarget && deleteTarget.active_venue_count > 0 && ( +
+
+
+ )}
+
+ {deleteMutation.error && (
+ + {deleteTarget.active_venue_count} {deleteTarget.active_venue_count === 1 ? 'venue is' : 'venues are'} currently using this amenity.{' '} + Their existing listings will be unaffected, but this amenity won't appear in the picker for new selections. +
+
+ {deleteMutation.error instanceof Error ? deleteMutation.error.message : 'Failed to archive amenity'}
+
+ )}
+
+
+
+
+
+
+
+ {/* Header + tabs */}
+
+
+
+
+ {/* States */}
+ {isLoading && (
+
+ {TABS.map((tab) => {
+ const isActive = activeTab === tab.value
+ return (
+
+ )
+ })}
+
+
+
+ )}
+
+ {!isLoading && error && (
+
+ qc.invalidateQueries({ queryKey: ['admin', 'audit-log'] })}>
+ Retry
+
+ }
+ />
+
+ )}
+
+ {!isLoading && !error && data?.items.length === 0 && (
+
+
+ )}
+
+ {!isLoading && !error && data && data.items.length > 0 && (
+ <>
+
+
+
+
+
+
+ {/* Pagination */}
+ {totalPages > 1 && (
+ | Action | +Target | +Admin | +Reason | +Time | +
|---|
+
+ {((page - 1) * PAGE_SIZE) + 1}–{Math.min(page * PAGE_SIZE, total)} of {total.toLocaleString()}
+
+
+ )}
+
+ )}
+
+
+ Page {page} of {totalPages}
+
+
+
+
+
+
+
+ {action.target_type}
+ {action.target_name && (
+ ({action.target_name})
+ )}
+
+
+ {action.target_id}
+
+
+ {[
+ { label: 'Total Bookings', value: stats?.total, accent: 'brand' as const, icon:
+
+ {/* Main card */}
+
+
+ ))}
+
+
+ {/* Header + tabs */}
+
+
+ {/* Detail modal */}
+ {detailBooking && (
+
+
+
+ {/* Content states */}
+ {isLoading && (
+
+ {TABS.map((tab) => {
+ const isActive = activeTab === tab.value
+ const count = tab.statsKey ? stats?.[tab.statsKey] : undefined
+ return (
+
+ )
+ })}
+
+
+ {/* Search */}
+
+
+
+
+ handleSearchChange(e.target.value)}
+ style={{ paddingLeft: '2.25rem' }}
+ />
+
+
+
+ )}
+
+ {!isLoading && error && (
+
+ Retry}
+ />
+
+ )}
+
+ {!isLoading && !error && items.length === 0 && (
+
+
+ )}
+
+ {!isLoading && !error && items.length > 0 && (
+ <>
+
+
+
+
+
+
+ {/* Pagination */}
+ {totalPages > 1 && (
+ | Venue | +Customer | +Event date | +Booking status | +Payment | +Guests | +Requested | ++ |
|---|
+
+ {((page - 1) * PAGE_SIZE) + 1}–{Math.min(page * PAGE_SIZE, total)} of {total.toLocaleString()}
+
+
+ )}
+
+ )}
+
+
+ Page {page} of {totalPages}
+
+
+
+
+
+
+ {b.customer_name ?? '—'}
+ {b.customer_email && (
+ {b.customer_email}
+ )}
+
+ {icon}
+ {value}
+
+ )
+}
+
+function PersonCard({
+ role, name, email, phone,
+}: {
+ role: string
+ name: string | null
+ email: string | null
+ phone: string | null
+}) {
+ return (
+
+
+ )
+}
+
+function BookingDetailModal({ booking: b, onClose }: { booking: AdminBookingSummary; onClose: () => void }) {
+ return createPortal(
+ {role}
+
+
+
+ {name?.[0]?.toUpperCase() ?? '?'}
+
+
+
+ {name ?? '—'}
+
+
+
+
+
+
,
+ document.body,
+ )
+}
diff --git a/apps/admin-panel/src/pages/Categories.tsx b/apps/admin-panel/src/pages/Categories.tsx
new file mode 100644
index 000000000..6103846b4
--- /dev/null
+++ b/apps/admin-panel/src/pages/Categories.tsx
@@ -0,0 +1,430 @@
+import { useState, useRef } from 'react'
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
+import {
+ LayoutGrid, Plus, Pencil, Trash2, Image, X,
+ AlertTriangle, CheckCircle2,
+} from 'lucide-react'
+import { createClient } from '@venue404/api-client'
+import { adminCategoryEndpoints } from '@venue404/api-client'
+import type { AdminCategory } from '@venue404/api-client'
+import { AdminLayout } from '../components/AdminLayout'
+import {
+ MetricCard, StatusBadge, SectionHeader,
+ EmptyState, LoadingScreen, ErrorState, Button, Modal,
+} from '@venue404/ui'
+
+const api = adminCategoryEndpoints(createClient())
+
+export default function Categories() {
+ const qc = useQueryClient()
+
+ const [showArchived, setShowArchived] = useState(false)
+
+ // Create modal
+ const [createOpen, setCreateOpen] = useState(false)
+ const [createSlug, setCreateSlug] = useState('')
+ const [createLabel, setCreateLabel] = useState('')
+ const [createIcon, setCreateIcon] = useState('')
+ const [createSortOrder, setCreateSortOrder] = useState('0')
+
+ // Edit modal
+ const [editTarget, setEditTarget] = useState
+
+ {/* Header */}
+
+
+
+
+
+
+
+ Booking details
+{b.id}
+
+
+ {/* Venue */}
+
+
+
+
+ {/* People */}
+ Venue
+
+
+
+
+
+ {/* Booking info grid */}
+
+
+
+ {/* Footer */}
+
+
+ Event date
+{fmtDate(b.event_date)}
+
+
+ Guests
+{b.guest_count}
+
+
+ Booking status
+
+
+ Payment
+
+
+ + Requested {fmtDateTime(b.created_at)} +
+ +
+
+
+ {/* Table card */}
+
+
+
+
+
+
+
+
+
+ {/* Hidden banner file input */}
+
+
+ {/* Create Modal */}
+
+
+
+
+ {isLoading &&
+
+
+
+ qc.invalidateQueries({ queryKey: ['admin', 'categories'] })}>Retry} />
+
+ )}
+
+ {!isLoading && !error && filtered.length === 0 && (
+
+
+ )}
+
+ {!isLoading && !error && filtered.length > 0 && (
+
+
+
+
+
+ )}
+ | Category | +Slug | +Banner | +Venues | +Status | +Order | +Actions | +
|---|---|---|---|---|---|---|
|
+
+ {cat.icon && (
+ {cat.icon}
+ )}
+ {cat.label}
+
+ |
+ {cat.slug} | +
+ {cat.banner_image ? (
+
+
+ ) : (
+ !cat.deleted_at ? (
+
+ ) : (
+ None
+ )
+ )}
+ |
+ + {cat.venue_count > 0 ? ( + + {cat.venue_count} {cat.venue_count === 1 ? 'venue' : 'venues'} + + ) : ( + None + )} + | +
+ {cat.deleted_at ? (
+ |
+ {cat.sort_order} | +
+ {!cat.deleted_at && (
+
+
+
+
+ )}
+ |
+
+
+
+
+
+
+ New category
+Slug is permanent and used in URLs (lowercase, underscores only).
+
+
+ {createMutation.error && (
+
+
+ { setCreateSlug(e.target.value); createMutation.reset() }} autoFocus />
+
+
+
+ { setCreateLabel(e.target.value); createMutation.reset() }} />
+
+
+
+ setCreateIcon(e.target.value)} />
+
+
+
+ setCreateSortOrder(e.target.value)} />
+
+ + {createMutation.error instanceof Error ? createMutation.error.message : 'Failed to create category'} +
+ )} +
+
+
+
+
+
+
+
+
+
+ Edit category
+Slug cannot be changed after creation.
+
+
+ {editMutation.error && (
+
+
+
+
+
+
+ { setEditLabel(e.target.value); editMutation.reset() }} autoFocus />
+
+
+
+ setEditIcon(e.target.value)} />
+
+
+
+ setEditSortOrder(e.target.value)} />
+
+
+ + {editMutation.error instanceof Error ? editMutation.error.message : 'Failed to update category'} +
+ )} +
+
+
+
+
+
+
+
+
+
+ Archive category
++ {deleteTarget?.label} will be hidden from venue owners. +
+ {deleteTarget && deleteTarget.venue_count > 0 && ( +
+
+ )}
+ {deleteMutation.error && (
+ + {deleteTarget.venue_count} {deleteTarget.venue_count === 1 ? 'venue uses' : 'venues use'} this category.{' '} + Existing venues are unaffected but this category won't appear for new venues. +
+
+ {deleteMutation.error instanceof Error ? deleteMutation.error.message : 'Failed to archive category'}
+
+ )}
+
+
+
+
+
+
+
+
+
+ {/* Metrics */}
+ + {firstName ? `Good to see you, ${firstName}` : 'Welcome back'} +
++ Here is what needs your attention today. +
+
+ {metrics.map((m, i) => (
+
+
+ {/* Content grid */}
+
+
+ ))}
+
+
+ {/* Platform growth chart */}
+
+
+ {/* Quick actions */}
+
+
+
+ {/* Recent audit actions */}
+
+
+
+ navigate('/audit-log')}
+ className="press text-xs font-medium text-brand transition-colors hover:text-brand"
+ >
+ Full log
+
+ }
+ />
+
+
+ {actionsLoading && (
+
+
+ )}
+
+ {!actionsLoading && recentActions.length === 0 && (
+
+
+ )}
+
+ {!actionsLoading && recentActions.length > 0 && (
+ -
+ {recentActions.map((a) => (
+
-
+
+
+ ))}
+
+
+
+ {[
+ { label: 'Review pending venues', href: '/venues/pending', icon:
+
+ {[
+ { label: 'Total queries', value: stats?.total_queries, icon:
+
+ {/* Chart */}
+
+
+
+ {/* Recent queries table */}
+
+
+
+ {statsQuery.isLoading || !stats ? (
+
+
+
+
+ )}
+
+ Loading…
+ ) : (
+
+
+
+ {detailId &&
+
+
+ {listQuery.isLoading && (
+
+
+ handleSearchChange(e.target.value)}
+ style={{ paddingLeft: '2.25rem' }}
+ />
+
+
+ listQuery.refetch()}>Retry}
+ />
+
+ )}
+
+ {!listQuery.isLoading && !listQuery.error && items.length === 0 && (
+
+
+ )}
+
+ {!listQuery.isLoading && !listQuery.error && items.length > 0 && (
+ <>
+
+
+
+
+
+
+ {totalPages > 1 && (
+ | Query | +City | +Results | +Match score | +When | ++ |
|---|
+ {((page - 1) * PAGE_SIZE) + 1}–{Math.min(page * PAGE_SIZE, total)} of {total.toLocaleString()}
+
+ )}
+
+ )}
+
+
+ Page {page} of {totalPages}
+
+
+
+
+
+ )
+}
+
+function QueryDetailModal({ queryId, onClose }: { queryId: string; onClose: () => void }) {
+ const detailQuery = useQuery({
+ queryKey: ['admin', 'deep-research', 'query', queryId],
+ queryFn: () => api.getQuery(queryId),
+ })
+
+ const detail: DeepResearchQueryDetail | undefined = detailQuery.data
+ const breakdown = (detail?.understanding_json ?? null) as QueryBreakdown | null
+
+ return createPortal(
+
+
+ {label}
+{value ?? '—'}
+
+
+
+
,
+ document.body,
+ )
+}
diff --git a/apps/admin-panel/src/pages/ExternalReservations.tsx b/apps/admin-panel/src/pages/ExternalReservations.tsx
new file mode 100644
index 000000000..f1c98e19a
--- /dev/null
+++ b/apps/admin-panel/src/pages/ExternalReservations.tsx
@@ -0,0 +1,563 @@
+import { useState } from 'react'
+import { createPortal } from 'react-dom'
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
+import {
+ PhoneCall, UserCheck, Send, CalendarPlus, MapPin, Users as UsersIcon, Tag,
+ X, Mail, Phone, Globe, Star, ExternalLink, StickyNote, Calendar,
+} from 'lucide-react'
+import { createClient, adminExternalReservationEndpoints } from '@venue404/api-client'
+import type {
+ ExternalReservationSummary, ExternalReservationStatus,
+} from '@venue404/api-client'
+import { AdminLayout } from '../components/AdminLayout'
+import {
+ SectionHeader, StatusBadge, EmptyState, LoadingScreen, ErrorState, Button, Modal,
+} from '@venue404/ui'
+
+const api = adminExternalReservationEndpoints(createClient())
+
+const TABS: { label: string; value: ExternalReservationStatus | '' }[] = [
+ { label: 'All', value: '' },
+ { label: 'New', value: 'new' },
+ { label: 'Contacted', value: 'contacted' },
+ { label: 'Owner Interested', value: 'owner_interested' },
+ { label: 'Owner Invited', value: 'owner_invited' },
+ { label: 'Venue Pending', value: 'venue_pending_approval' },
+ { label: 'Venue Approved', value: 'venue_approved' },
+ { label: 'Booking Created', value: 'booking_created' },
+]
+
+function statusVariant(s: ExternalReservationStatus): 'success' | 'danger' | 'pending' | 'warning' | 'neutral' {
+ if (s === 'booking_created' || s === 'closed' || s === 'venue_approved') return 'success'
+ if (s === 'cancelled' || s === 'rejected') return 'danger'
+ if (s === 'new') return 'neutral'
+ return 'pending'
+}
+
+function statusLabel(s: ExternalReservationStatus): string {
+ return s.split('_').map((w) => w.charAt(0).toUpperCase() + w.slice(1)).join(' ')
+}
+
+const PAGE_SIZE = 12
+
+export default function ExternalReservations() {
+ const qc = useQueryClient()
+ const [activeTab, setActiveTab] = useState
+
+
+
+
+
+
+
+ Query details
+ {detail &&{fmtDateTime(detail.created_at)}
} +
+ {detailQuery.isLoading &&
+ Loading…
} + + {detail && ( + <> +
+
+
+ {breakdown && (
+ Raw query
+{detail.query_text}
+
+
+ )}
+
+ Model breakdown
+
+
+
+
+
+
+ Required amenities
+ {(breakdown.required_amenities?.length ?? 0) > 0 ? ( +
+ {breakdown.required_amenities!.map((tag) => (
+
+ {tag.replace(/_/g, ' ')}
+
+ ))}
+
+ ) : (
+ None detected
+ )} +
+
+ Special requirements
+ {(breakdown.special_requirements?.length ?? 0) > 0 ? ( +-
+ {breakdown.special_requirements!.map((req) => (
+
- + + {req} + + ))} +
None detected
+ )} +
+
+
+ {detail.top_results_json && detail.top_results_json.length > 0 && (
+
+
+ Results found
+{detail.result_count}
+
+
+ Avg match score
+{pct(detail.avg_match_score)}
+
+
+ )}
+
+ )}
+ Top results
+
+ {detail.top_results_json.map((r) => (
+
+
+ {r.name}
+
+ ))}
+
+ {r.match_source && (
+
+ {r.match_source}
+
+ )}
+ {pct(r.match_score)}
+
+
+
+
+ {/* Contact modal */}
+
+
+
+ {isLoading &&
+ {TABS.map((tab) => (
+
+ ))}
+
+
+ Retry}
+ />
+
+ )}
+
+ {!isLoading && !error && items.length === 0 && (
+
+
+ )}
+
+ {!isLoading && !error && items.length > 0 && (
+
+ {items.map((r) => (
+ setContactTarget(r)}
+ onMarkInterested={() => markInterestedMutation.mutate(r.id)}
+ onInvite={() => { setInviteTarget(r); setVenueName(r.lead_name) }}
+ onCreateBooking={() => createBookingMutation.mutate(r.id)}
+ onViewDetails={() => setDetailTarget(r)}
+ markInterestedPending={markInterestedMutation.isPending}
+ createBookingPending={createBookingMutation.isPending}
+ />
+ ))}
+
+ )}
+
+ {!isLoading && totalPages > 1 && (
+
+ {((page - 1) * PAGE_SIZE) + 1}–{Math.min(page * PAGE_SIZE, total)} of {total}
+
+ )}
+
+
+ Page {page} of {totalPages}
+
+
+
+
+
Log contact
++ Record how you reached out to {contactTarget?.lead_name}. +
+
+
+
+ setContactMethod(e.target.value)} autoFocus />
+
+
+
+