Ui for admin. Logout successfull. Admin not reachable from homepage. Neither is logoutpage. Update for Architecture file.

apps/public-web/app/(site)/admin/LogoutButton.tsx

@@ -0,0 +1,11 @@
+"use client";
+
+export default function LogoutButton() {
+    const backend = process.env.NEXT_PUBLIC_BACKEND_URL ?? "http://localhost:8080";
+
+    return (
+        <form action={`${backend}/logout`} method="post">
+            <button type="submit">Logout</button>
+        </form>
+    );
+}

apps/public-web/app/(site)/admin/layout.tsx

@@ -0,0 +1,31 @@
+import { redirect } from "next/navigation";
+import { headers } from "next/headers";
+
+async function cookieHeader() {
+    const h = await headers();          // ✅ await
+    return h.get("cookie") ?? "";
+}
+
+export default async function AdminLayout({
+                                              children,
+                                          }: {
+    children: React.ReactNode;
+}) {
+    const res = await fetch(`${process.env.BACKEND_URL}/api/me`, {
+        headers: { cookie: await cookieHeader() },  // ✅ await here too
+        cache: "no-store",
+    });
+
+    if (res.status === 401) redirect("/login");
+    if (!res.ok) redirect("/login");
+
+    const me = await res.json();
+
+    const isAdmin =
+        Array.isArray(me?.authorities) &&
+        me.authorities.some((a: any) => a.authority === "ROLE_ADMIN");
+
+    if (!isAdmin) redirect("/");
+
+    return <>{children}</>;
+}

apps/public-web/app/(site)/admin/page.tsx

@@ -1,38 +1,97 @@
-import { redirect } from "next/navigation";
-import { cookies } from "next/headers";
+import Link from "next/link";
 
-export default async function AdminPage() {
-    const cookieHeader = (await cookies())
-        .getAll()
-        .map(({ name, value }) => `${name}=${value}`)
-        .join("; ");
-
-    const res = await fetch(`${process.env.BACKEND_URL}/api/me`, {
-        headers: { cookie: cookieHeader },
-        cache: "no-store",
-        redirect: "manual", // IMPORTANT: don’t follow to /login
-    });
-
-    // Spring might answer 302 to /login when unauthenticated
-    if (res.status === 401 || res.status === 302) redirect("/login");
-
-    if (!res.ok) {
-        const text = await res.text();
-        throw new Error(`Failed to load session: ${res.status} ${text.slice(0, 200)}`);
-    }
-
-    const contentType = res.headers.get("content-type") ?? "";
-    if (!contentType.includes("application/json")) {
-        // we got HTML (login page) or something else
-        redirect("/login");
-    }
-
-    const me = await res.json();
+export default function AdminPage() {
+    const backend = process.env.BACKEND_URL ?? "http://localhost:8080";
 
     return (
-        <main>
-            <h1>Admin</h1>
-            <pre>{JSON.stringify(me, null, 2)}</pre>
-        </main>
+        <div className="min-h-screen bg-[#F8FAFC] flex gap-10 p-8 font-sans text-slate-900">
+            {/* 1. SINGLE CLEAN SIDEBAR */}
+            <aside className="w-64 bg-white border border-slate-200 rounded-2xl flex flex-col sticky top-8 h-[calc(100vh-4rem)]">
+                <div className="p-8 mb-4">
+                    <div className="text-2xl font-black tracking-tighter text-indigo-600"></div>
+                </div>
+
+                <div className="flex-1" />
+
+                {/* SINGLE LOGOUT AT BOTTOM */}
+                <div className="p-4 border-t border-slate-100">
+                    <form action={`${backend}/logout`} method="post">
+                        <button className="w-full flex items-center justify-center gap-2 px-4 py-3 text-slate-400 hover:text-red-500 hover:bg-red-50 transition-all rounded-lg text-sm font-bold uppercase tracking-wider">
+                            ⏻ Logout
+                        </button>
+                    </form>
+                </div>
+            </aside>
+
+            {/* 2. MAIN CONTENT AREA */}
+            <main className="flex-1 flex flex-col min-w-0 pt-24">                {/* FAT VOYAGE HEADER */}
+
+                <header className="px-12 py-10 bg-white border-b border-slate-200 rounded-2xl">                    <div className="max-w-5xl">
+                        <Link href="/" className="inline-block">
+                            <h1 className="text-8xl md:text-9xl font-[1000] tracking-tighter text-slate-900 uppercase leading-none hover:opacity-90 transition">
+                                VOYAGE <span className="text-slate-200">OFFICE</span>
+                            </h1>
+                        </Link>
+                        <div className="flex items-center gap-3 mt-6">
+                            <span className="h-2 w-2 rounded-full bg-emerald-400/80"></span>
+                            <p className="text-[10px] font-mono font-semibold text-slate-300 uppercase tracking-[0.25em] truncate">
+                                System Connected: {backend}
+                            </p>
+                        </div>
+                    </div>
+                </header>
+
+                {/* 3. SYMMETRICAL DASHBOARD CONTENT */}
+                <div className="p-10 max-w-5xl w-full space-y-8">
+
+                    <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                        {/* Main Action Card */}
+                        <div className="bg-white p-8 rounded-2xl border border-slate-200 shadow-sm flex flex-col justify-between min-h-[200px]">
+                            <div>
+                                <h3 className="text-sm font-black uppercase tracking-widest text-slate-400 mb-1">Content</h3>
+                                <h2 className="text-2xl font-bold text-slate-800">Post Management</h2>
+                                <p className="text-slate-500 mt-2 text-sm leading-relaxed">
+                                    Review and edit all current voyage publications.
+                                </p>
+                            </div>
+                            <Link href="/admin/posts" className="mt-6 inline-flex items-center font-bold text-indigo-600 hover:gap-2 transition-all">
+                                Manage Posts →
+                            </Link>
+                        </div>
+
+                        {/* Database Status Card */}
+                        <div className="bg-white p-8 rounded-2xl border border-slate-200 shadow-sm flex flex-col justify-between min-h-[200px]">
+                            <div>
+                                <h3 className="text-sm font-black uppercase tracking-widest text-slate-400 mb-1">Infrastructure</h3>
+                                <h2 className="text-2xl font-bold text-slate-800">SQL Database</h2>
+                                <p className="text-slate-500 mt-2 text-sm leading-relaxed truncate">
+                                    Status: Operational at {backend}/h2-console
+                                </p>
+                            </div>
+                            <a href={`${backend}/h2-console`} target="_blank" className="mt-6 inline-flex items-center font-bold text-indigo-600 hover:gap-2 transition-all">
+                                Open Console ↗
+                            </a>
+                        </div>
+                    </div>
+
+                    {/* Large Summary Box */}
+                    <div className="bg-indigo-600 rounded-3xl p-10 text-white shadow-xl shadow-indigo-200">
+                        <h3 className="text-indigo-200 text-xs font-black uppercase tracking-widest mb-2">Office Overview</h3>
+                        <div className="flex flex-col md:flex-row justify-between items-end gap-6">
+                            <div className="max-w-md">
+                                <p className="text-2xl font-medium leading-tight italic">
+                                    "Efficiency is doing things right; effectiveness is doing the right things."
+                                </p>
+                            </div>
+                            <div className="text-right">
+                                <p className="text-4xl font-black">100%</p>
+                                <p className="text-indigo-200 text-xs font-bold uppercase">System Uptime</p>
+                            </div>
+                        </div>
+                    </div>
+
+                </div>
+            </main>
+        </div>
     );
 }

apps/public-web/app/(site)/admin/posts/page.tsx

@@ -0,0 +1,123 @@
+import fs from "node:fs";
+import path from "node:path";
+import Link from "next/link";
+
+type Post = {
+  file: string;
+  slug: string;
+};
+
+type PostsResult = {
+  postsDir: string;
+  tried: string[];
+  allFiles: string[];
+  posts: Post[];
+};
+
+function resolvePostsDir(): { postsDir: string; tried: string[] } {
+  const tried: string[] = [];
+
+  // 1) When running `npm run dev` inside apps/public-web
+  const candidate1 = path.join(process.cwd(), "content", "posts");
+  tried.push(candidate1);
+  if (fs.existsSync(candidate1)) return { postsDir: candidate1, tried };
+
+  // 2) When running Next from monorepo root (process.cwd() == repo root)
+  const candidate2 = path.join(process.cwd(), "apps", "public-web", "content", "posts");
+  tried.push(candidate2);
+  if (fs.existsSync(candidate2)) return { postsDir: candidate2, tried };
+
+  // 3) Fallback: try relative to this file (best-effort)
+  const candidate3 = path.join(process.cwd(), "..", "content", "posts");
+  tried.push(candidate3);
+  if (fs.existsSync(candidate3)) return { postsDir: candidate3, tried };
+
+  return { postsDir: candidate1, tried };
+}
+
+function getPosts(): PostsResult {
+  const { postsDir, tried } = resolvePostsDir();
+
+  if (!fs.existsSync(postsDir)) {
+    return { postsDir, tried, allFiles: [], posts: [] };
+  }
+
+  const allFiles = fs.readdirSync(postsDir);
+
+  const supported = allFiles.filter((f) =>
+    f.toLowerCase().endsWith(".txt") ||
+    f.toLowerCase().endsWith(".md") ||
+    f.toLowerCase().endsWith(".mdx")
+  );
+
+  const posts = supported.map((file) => {
+    const base = file.replace(/\.(txt|md|mdx)$/i, "");
+
+    // Strip date prefix (YY-MM-DD- or YYYY-MM-DD-)
+    const slug = base
+      .replace(/^\d{2}-\d{2}-\d{2}-/, "")
+      .replace(/^\d{4}-\d{2}-\d{2}-/, "");
+
+    return { file, slug };
+  });
+
+  return { postsDir, tried, allFiles, posts };
+}
+
+export default function AdminPostsPage() {
+  const { postsDir, tried, allFiles, posts } = getPosts();
+
+  return (
+    <main style={{ maxWidth: 900 }}>
+      <h1>Posts</h1>
+
+      <p style={{ opacity: 0.8 }}>
+        <Link href="/admin">← Back to Admin</Link>
+      </p>
+
+      <section
+        style={{
+          padding: 12,
+          border: "1px solid #ddd",
+          borderRadius: 12,
+          marginBottom: 16,
+        }}
+      >
+        <div>
+          <strong>postsDir:</strong> {postsDir}
+        </div>
+        <div>
+          <strong>files in folder:</strong> {allFiles.length}
+        </div>
+        <div>
+          <strong>posts detected:</strong> {posts.length}
+        </div>
+
+        <details style={{ marginTop: 8 }}>
+          <summary>Debug: paths tried</summary>
+          <pre style={{ margin: 0, whiteSpace: "pre-wrap" }}>{tried.join("\n")}</pre>
+        </details>
+
+        {allFiles.length > 0 && (
+          <details style={{ marginTop: 8 }}>
+            <summary>Debug: files seen</summary>
+            <pre style={{ margin: 0, whiteSpace: "pre-wrap" }}>{allFiles.join("\n")}</pre>
+          </details>
+        )}
+      </section>
+
+      {posts.length === 0 ? (
+        <p>No posts found.</p>
+      ) : (
+        <ul>
+          {posts.map((post) => (
+            <li key={post.file}>
+              <Link href={`/blog/${post.slug}`}>{post.slug}</Link>
+              <span style={{ opacity: 0.6 }}> ({post.file})</span>
+            </li>
+          ))}
+        </ul>
+      )}
+    </main>
+  );
+}