");
+ return ctx;
+}
diff --git a/web/src/main.tsx b/web/src/main.tsx
new file mode 100644
index 000000000..3548938ae
--- /dev/null
+++ b/web/src/main.tsx
@@ -0,0 +1,13 @@
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import { App } from "./App";
+import "./styles.css";
+
+const root = document.getElementById("root");
+if (!root) throw new Error("Missing #root element");
+
+createRoot(root).render(
+
+ ,
+);
diff --git a/web/src/routes/AppLayout.tsx b/web/src/routes/AppLayout.tsx
new file mode 100644
index 000000000..8fa6eedf0
--- /dev/null
+++ b/web/src/routes/AppLayout.tsx
@@ -0,0 +1,37 @@
+import { NavLink, Outlet, useNavigate } from "react-router-dom";
+import { useAuth } from "../auth/useAuth";
+
+// Authenticated shell. Nav targets are placeholders for the Phase 1.0 slices
+// (daily entry #F1, stock #F2, customers/sales #F3, history #F4) — screens land
+// as their API slices ship.
+export function AppLayout() {
+ const { logout } = useAuth();
+ const navigate = useNavigate();
+
+ async function onLogout() {
+ await logout();
+ navigate("/login", { replace: true });
+ }
+
+ return (
+
+
+ Cluckwork
+
+
+ Dashboard
+
+ Daily entry
+ Stock
+ Sales
+
+
+ Sign out
+
+
+
+
+
+ );
+}
diff --git a/web/src/routes/Dashboard.tsx b/web/src/routes/Dashboard.tsx
new file mode 100644
index 000000000..e078f2ef2
--- /dev/null
+++ b/web/src/routes/Dashboard.tsx
@@ -0,0 +1,12 @@
+export function Dashboard() {
+ return (
+
+ Dashboard
+
+ You are signed in. This shell is the foundation for the Phase 1.0 screens:
+ daily-entry capture, stock by grade, and the sales flow. Each lands as its
+ API slice ships.
+
+
+ );
+}
diff --git a/web/src/routes/Login.tsx b/web/src/routes/Login.tsx
new file mode 100644
index 000000000..aa4c9dd76
--- /dev/null
+++ b/web/src/routes/Login.tsx
@@ -0,0 +1,71 @@
+import { useState } from "react";
+import type { FormEvent } from "react";
+import { useLocation, useNavigate } from "react-router-dom";
+import { useAuth } from "../auth/useAuth";
+import { ApiError } from "../api/client";
+
+interface LocationState {
+ from?: { pathname: string };
+}
+
+export function Login() {
+ const { login } = useAuth();
+ const navigate = useNavigate();
+ const location = useLocation();
+ const from = (location.state as LocationState | null)?.from?.pathname ?? "/";
+
+ const [email, setEmail] = useState("");
+ const [password, setPassword] = useState("");
+ const [error, setError] = useState(null);
+ const [busy, setBusy] = useState(false);
+
+ async function onSubmit(e: FormEvent) {
+ e.preventDefault();
+ setError(null);
+ setBusy(true);
+ try {
+ await login(email, password);
+ navigate(from, { replace: true });
+ } catch (err) {
+ setError(
+ err instanceof ApiError && err.status === 401
+ ? "Invalid email or password."
+ : "Could not sign in. Is the API running?",
+ );
+ } finally {
+ setBusy(false);
+ }
+ }
+
+ return (
+
+
+
+ );
+}
diff --git a/web/src/routes/Placeholder.tsx b/web/src/routes/Placeholder.tsx
new file mode 100644
index 000000000..2cefcde2d
--- /dev/null
+++ b/web/src/routes/Placeholder.tsx
@@ -0,0 +1,9 @@
+// Stand-in for screens not yet built. Replaced by the real slice (#F1/#F2/#F3).
+export function Placeholder({ title, issue }: { title: string; issue: string }) {
+ return (
+
+ {title}
+ Not built yet — {issue}.
+
+ );
+}
diff --git a/web/src/routes/ProtectedRoute.tsx b/web/src/routes/ProtectedRoute.tsx
new file mode 100644
index 000000000..05f2b3f51
--- /dev/null
+++ b/web/src/routes/ProtectedRoute.tsx
@@ -0,0 +1,12 @@
+import { Navigate, Outlet, useLocation } from "react-router-dom";
+import { useAuth } from "../auth/useAuth";
+
+export function ProtectedRoute() {
+ const { isAuthenticated } = useAuth();
+ const location = useLocation();
+
+ if (!isAuthenticated) {
+ return