initial checkin

src/components/AdminLayout.tsx

@@ -0,0 +1,84 @@
+import { NavLink, Outlet } from "react-router-dom";
+import { useAuth } from "../auth/AuthContext";
+
+const navItems = [
+  { to: "/dashboard", label: "Dashboard", end: true },
+  { to: "/dashboard/bookings", label: "Bookings" },
+  { to: "/dashboard/listings", label: "Listings" },
+  { to: "/dashboard/analytics", label: "Analytics" },
+  { to: "/dashboard/settings", label: "Settings" },
+];
+
+export function AdminLayout() {
+  const { user, signOut } = useAuth();
+  const business = user?.vendor_profile?.business_name ?? "Vendor";
+  const initial = (user?.first_name?.[0] || user?.email?.[0] || "V").toUpperCase();
+
+  return (
+    <div className="admin-shell">
+      <aside className="admin-sidebar" aria-label="Vendor navigation">
+        <div className="admin-sidebar-brand">
+          <span className="admin-sidebar-logo" aria-hidden />
+          <div>
+            <div className="admin-sidebar-title">WaterTrekk Admin</div>
+            <div className="admin-sidebar-sub">Vendor console</div>
+          </div>
+        </div>
+        <nav className="admin-sidebar-nav">
+          {navItems.map(({ to, label, end }) => (
+            <NavLink
+              key={to}
+              to={to}
+              end={end}
+              className={({ isActive }) =>
+                `admin-nav-item${isActive ? " admin-nav-item--active" : ""}`
+              }
+            >
+              {label}
+            </NavLink>
+          ))}
+        </nav>
+        <div className="admin-sidebar-footer">
+          <NavLink to="/" className="admin-back-link">
+            ← Back to site
+          </NavLink>
+        </div>
+      </aside>
+      <div className="admin-main-wrap">
+        <header className="admin-topbar">
+          <div className="admin-topbar-search-wrap">
+            <label className="visually-hidden" htmlFor="admin-search">
+              Search
+            </label>
+            <input
+              id="admin-search"
+              type="search"
+              className="admin-topbar-search"
+              placeholder="Search bookings, guests…"
+            />
+          </div>
+          <div className="admin-topbar-actions">
+            <button type="button" className="admin-icon-btn" aria-label="Notifications">
+              <span className="admin-bell" aria-hidden />
+            </button>
+            <div className="admin-user-chip">
+              <span className="admin-user-avatar" aria-hidden>
+                {initial}
+              </span>
+              <div className="admin-user-meta">
+                <span className="admin-user-name">{business}</span>
+                <span className="admin-user-role">{user?.email}</span>
+              </div>
+            </div>
+            <button type="button" className="admin-btn admin-btn--ghost admin-sign-out" onClick={() => signOut()}>
+              Sign out
+            </button>
+          </div>
+        </header>
+        <main className="admin-content">
+          <Outlet />
+        </main>
+      </div>
+    </div>
+  );
+}