"use client"; import { useEffect, useState } from "react"; import Link from "next/link"; import { useRouter, usePathname } from "next/navigation"; import { Cpu, Globe, LogOut, Menu, X, User, ShieldCheck, HelpCircle, ChevronDown, Users, Plus, Loader, } from "lucide-react"; interface Team { id: number; name: string; role: string; createdAt: string; } interface UserData { id: number; email: string; name: string | null; activeTeamId: number | null; } export default function DashboardLayout({ children, }: { children: React.ReactNode; }) { const router = useRouter(); const pathname = usePathname(); const [user, setUser] = useState(null); const [teams, setTeams] = useState([]); const [loading, setLoading] = useState(true); const [sidebarOpen, setSidebarOpen] = useState(false); // Team states const [teamDropdownOpen, setTeamDropdownOpen] = useState(false); const [createTeamModalOpen, setCreateTeamModalOpen] = useState(false); const [newTeamName, setNewTeamName] = useState(""); const [creatingTeam, setCreatingTeam] = useState(false); const [teamError, setTeamError] = useState(null); useEffect(() => { // 1. Verify session & fetch user data fetch("/api/auth/login") .then((res) => { if (!res.ok) { throw new Error("Unauthenticated"); } return res.json(); }) .then((data) => { setUser(data.user); // 2. Fetch all teams for the user return fetch("/api/teams"); }) .then((res) => res?.json()) .then((data) => { if (data && data.teams) { setTeams(data.teams); } setLoading(false); }) .catch((err) => { console.error("Session verify failed:", err); router.push("/login"); }); }, [router]); const handleLogout = async () => { try { await fetch("/api/auth/logout", { method: "POST" }); router.push("/login"); } catch (err) { console.error("Error logging out:", err); } }; const handleSwitchTeam = async (teamId: number) => { try { setTeamDropdownOpen(false); const res = await fetch("/api/teams/switch", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ teamId }), }); if (res.ok) { // Fast refresh to reload all team-scoped websites window.location.reload(); } else { const data = await res.json(); alert(data.error || "Failed to switch team."); } } catch (err) { console.error("Error switching team:", err); } }; const handleCreateTeam = async (e: React.FormEvent) => { e.preventDefault(); setTeamError(null); setCreatingTeam(true); try { const res = await fetch("/api/teams", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ name: newTeamName }), }); const data = await res.json(); if (!res.ok) { throw new Error(data.error || "Failed to create team."); } setCreateTeamModalOpen(false); setNewTeamName(""); // Force reload to set new team active instantly window.location.reload(); } catch (err: any) { setTeamError(err.message || "Something went wrong."); } finally { setCreatingTeam(false); } }; if (loading) { return (
Loading RemotePress Portal...
); } const activeTeam = teams.find((t) => t.id === user?.activeTeamId); const inactiveTeams = teams.filter((t) => t.id !== user?.activeTeamId); const navLinks = [{ name: "Websites", href: "/websites", icon: Globe }]; return (
{/* Mobile Sidebar Overlay */} {sidebarOpen && (
setSidebarOpen(false)} /> )} {/* Left side drawer menu (locked fixed sidebar) */} {/* Main Content Area */}
{/* Dynamic page container */}
{children}
{/* GLASSMORPHIC CREATE TEAM DIALOG MODAL */} {createTeamModalOpen && (
{teamError && (
{teamError}
)}

Create New Team

Setup an organizational team workspace

setNewTeamName(e.target.value)} />
)}
); }