setOpen(false)} style={{ position: "fixed", inset: 0, background: "rgba(0,0,0,.3)", zIndex: 650 }} />}
{children}
);
}
/* ---- ADMIN SHELL --------------------------------------------------------- */
function AdminShell({ ctx, children }) {
const [open, setOpen] = useState(false);
const items = [
["dashboard", "Dashboard", "grid"], ["requests", "Requests", "bag"], ["gowns", "Gowns", "hanger"],
["users", "Customers", "users"], ["messages", "Messages", "mail"], ["sales", "Sales", "chart"]
];
const unread = ctx.messages.filter((m) => !m.isRead).length;
const active = ctx.route.name === "gownEdit" ? "gowns" : ctx.route.name;
const adminName = ctx.adminName || "Admin";
return (
setOpen(true)}>
{open &&
setOpen(false)} style={{ position: "fixed", inset: 0, background: "rgba(0,0,0,.3)", zIndex: 650 }} />}
);
}
/* ---- ROOT APP ------------------------------------------------------------ */
const CUSTOMER_MAP = { home: CHome, browse: CBrowse, detail: CDetail, cart: CCart, checkout: CCheckout, confirm: CConfirm, requests: CRequests, request: CRequestDetail, profile: CProfile, contact: CContact };
const ADMIN_MAP = { dashboard: ADashboard, requests: ARequests, gowns: AGowns, gownEdit: AGownEdit, users: AUsers, messages: AMessages, sales: ASales };
const AUTH_SCREENS = { login: CLogin, register: CRegister, adminLogin: CAdminLogin };
const AUTHED_ROUTES = ["cart", "checkout", "requests", "request", "profile", "confirm"];
/* ---- history routing (clean, shareable URLs, no #) ---------------------- */
function routeToPath(mode, route) {
const p = route.params || {};
let path = mode === "admin" ? ("/admin/" + (route.name || "dashboard")) : ("/" + (route.name === "home" ? "" : (route.name || "")));
if (p.id != null && p.id !== "") path += (path.endsWith("/") ? "" : "/") + p.id;
const q = [];
["category", "transaction", "focus"].forEach((k) => { if (p[k] != null && p[k] !== "") q.push(k + "=" + encodeURIComponent(p[k])); });
if (path === "") path = "/";
return path + (q.length ? "?" + q.join("&") : "");
}
function pathToRoute(pathname, search) {
const segs = (pathname || "/").split("/").filter(Boolean);
let mode = "customer";
if (segs[0] === "admin") { mode = "admin"; segs.shift(); }
const name = segs[0] || (mode === "admin" ? "dashboard" : "home");
const params = {};
if (segs[1] != null) params.id = /^\d+$/.test(segs[1]) ? Number(segs[1]) : segs[1];
if (search) new URLSearchParams(search).forEach((v, k) => { params[k] = v; });
return { mode, route: { name, params } };
}
function App() {
const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
const initial = pathToRoute(window.location.pathname, window.location.search);
const [mode, setMode] = useState(initial.mode);
const [route, setRoute] = useState(initial.route);
const modeRef = useRef(initial.mode);
modeRef.current = mode;
const [cart, setCart] = useState([]);
const [requests, setRequests] = useState([]);
const [gowns, setGowns] = useState([]);
const [users, setUsers] = useState([]);
const [messages, setMessages] = useState([]);
const [currentUser, setCurrentUser] = useState(null);
const [isAdmin, setIsAdmin] = useState(false);
const [adminName, setAdminName] = useState("");
const [loading, setLoading] = useState(true);
const [bootError, setBootError] = useState("");
const [signingOut, setSigningOut] = useState(false);
const [toast, setToast] = useState(null);
const toastTimer = useRef(null);
function showToast(msg, icon) {
setToast({ msg, icon });
clearTimeout(toastTimer.current);
toastTimer.current = setTimeout(() => setToast(null), 2600);
}
function applyRoute(m, name, params = {}) {
setMode(m); modeRef.current = m;
setRoute({ name, params });
const path = routeToPath(m, { name, params });
if (window.location.pathname + window.location.search !== path) window.history.pushState(null, "", path);
window.scrollTo({ top: 0, behavior: "auto" });
}
function nav(name, params = {}) { applyRoute(modeRef.current, name, params); }
function updateGowns(arr) { VS.setGowns(arr); setGowns(arr); }
function upsertRequest(req) {
if (!req) return;
setRequests((rs) => rs.some((x) => x.id === req.id) ? rs.map((x) => x.id === req.id ? req : x) : [req, ...rs]);
}
async function loadBoot() {
const b = await VS.api("bootstrap");
updateGowns(b.gowns || []);
VS.currentUser = b.currentUser || null;
setRequests(b.requests || []);
setMessages(b.messages || []);
setUsers(b.users || []);
setCurrentUser(b.currentUser || null);
setIsAdmin(!!b.isAdmin);
if (b.adminName) setAdminName(b.adminName);
return b;
}
useEffect(() => {
loadBoot().catch((e) => setBootError(e.message)).finally(() => setLoading(false));
}, []);
// Keep the URL and app state in sync (back/forward, reload, shared links).
useEffect(() => {
const onPop = () => {
const next = pathToRoute(window.location.pathname, window.location.search);
setMode(next.mode); modeRef.current = next.mode;
setRoute(next.route);
window.scrollTo({ top: 0, behavior: "auto" });
};
window.addEventListener("popstate", onPop);
return () => window.removeEventListener("popstate", onPop);
}, []);
// Auth guards: a signed-in user (customer or admin) shouldn't sit on any auth screen.
useEffect(() => {
const onAuthScreen = route.name === "login" || route.name === "register" || route.name === "adminLogin";
if (isAdmin && onAuthScreen) { applyRoute("admin", "dashboard", {}); return; }
if (currentUser && onAuthScreen) applyRoute("customer", "home", {});
}, [currentUser, isAdmin, route.name]);
const ctx = {
t, route, mode, cart, requests, gowns, users, messages, currentUser, isAdmin, adminName,
nav, showToast,
enterAdmin: () => { if (isAdmin) applyRoute("admin", "dashboard", {}); else applyRoute("customer", "adminLogin", {}); },
exitAdmin: () => { applyRoute("customer", "home", {}); },
// auth
login: async (id, pw) => { await VS.api("login", { method: "POST", body: { identifier: id, password: pw } }); await loadBoot(); applyRoute("customer", "home", {}); },
register: async (f) => { await VS.api("register", { method: "POST", body: f }); await loadBoot(); applyRoute("customer", "home", {}); },
adminLogin: async (email, pw) => { const d = await VS.api("admin/login", { method: "POST", body: { email, password: pw } }); await loadBoot(); setAdminName(d.adminName || "Admin"); applyRoute("admin", "dashboard", {}); },
logout: async () => {
setSigningOut(true);
const minShow = new Promise((r) => setTimeout(r, 900)); // let the animation play
try { await VS.api("logout", { method: "POST" }); } catch (e) {}
await loadBoot();
await minShow;
applyRoute("customer", "home", {});
setSigningOut(false);
},
// cart (client-only)
addToCart: (item) => setCart((c) => [...c, { ...item }]),
updateCart: (i, patch) => setCart((c) => c.map((x, idx) => idx === i ? { ...x, ...patch } : x)),
removeFromCart: (i) => setCart((c) => c.filter((_, idx) => idx !== i)),
// requests
submitRequest: async (form, pay) => {
try {
const items = cart.map((c) => ({ gownId: c.gownId, size: c.size, lineType: c.lineType, qty: c.qty }));
const rentalItem = cart.find((c) => c.lineType === "rental");
const d = await VS.api("requests", { method: "POST", body: {
items, payment: pay, name: form.name, email: form.email, phone: form.phone, address: form.address,
rentalStart: rentalItem ? rentalItem.rentalStart : null, rentalDays: rentalItem ? rentalItem.rentalDays : 0
} });
upsertRequest(d.request);
setCart([]);
const gd = await VS.api("gowns"); updateGowns(gd.gowns);
return d.request;
} catch (e) { showToast(e.message, "x"); return null; }
},
cancelRequest: async (id) => { try { const d = await VS.api("requests/" + id + "/cancel", { method: "POST" }); upsertRequest(d.request); showToast("Request cancelled", "x"); } catch (e) { showToast(e.message, "x"); } },
setRequestStatus: async (id, status) => { try { const d = await VS.api("requests/" + id + "/status", { method: "POST", body: { status } }); upsertRequest(d.request); showToast("Status updated to " + status); } catch (e) { showToast(e.message, "x"); } },
// messages
addMessage: async (form) => { try { const d = await VS.api("messages", { method: "POST", body: { name: form.name, email: form.email, subject: form.subject, body: form.body } }); if (isAdmin) setMessages((m) => [d.message, ...m]); } catch (e) { showToast(e.message, "x"); } },
markRead: async (id) => { try { const d = await VS.api("messages/" + id + "/read", { method: "POST", body: { isRead: true } }); setMessages((m) => m.map((x) => x.id === id ? d.message : x)); } catch (e) {} },
toggleRead: async (id) => { const cur = messages.find((x) => x.id === id); try { const d = await VS.api("messages/" + id + "/read", { method: "POST", body: { isRead: !(cur && cur.isRead) } }); setMessages((m) => m.map((x) => x.id === id ? d.message : x)); } catch (e) {} },
// gowns
setStock: async (id, n) => { try { const d = await VS.api("gowns/" + id + "/stock", { method: "POST", body: { stock: n } }); updateGowns(gowns.map((g) => g.id === id ? d.gown : g)); } catch (e) { showToast(e.message, "x"); } },
deleteGown: async (id) => { try { await VS.api("gowns/" + id, { method: "DELETE" }); updateGowns(gowns.filter((g) => g.id !== id)); showToast("Gown removed", "trash"); } catch (e) { showToast(e.message, "x"); } },
saveGown: async (g) => { try { const d = await VS.api("gowns", { method: "POST", body: g }); const gd = await VS.api("gowns"); updateGowns(gd.gowns); } catch (e) { showToast(e.message, "x"); } },
// users
deleteUser: async (id) => { try { await VS.api("users/" + id, { method: "DELETE" }); setUsers((u) => u.filter((x) => x.id !== id)); showToast("Customer removed", "trash"); } catch (e) { showToast(e.message, "x"); } }
};
let content;
if (loading) {
content =
setOpen(true)}>
{children}
Vestiré Studio
;
} else if (bootError) {
content = Couldn't reach the studio{bootError} { setLoading(true); setBootError(""); loadBoot().catch((e) => setBootError(e.message)).finally(() => setLoading(false)); }}>Retry
;
} else if (mode === "admin" && isAdmin) {
const Screen = ADMIN_MAP[route.name] || ADashboard;
content =
{content}
{signingOut && (
)}
{toast &&
setTweak("visualStyle", v)} />
setTweak("accent", v)} />
setTweak("requestsLayout", v)} />
setTweak("statusUI", v)} />
);
}
injectVSStyles();
(function () { const s = document.createElement("style"); s.id = "vs-layout-css"; s.textContent = VS_LAYOUT_CSS; document.head.appendChild(s); })();
ReactDOM.createRoot(document.getElementById("root")).render(
Signing you out…