Apply .gitignore cleanup

frontend/app/(protected)/contracts-volumes/page.jsx

@@ -1,3 +1,3 @@
-export default function Page(){
-  return <div className="rounded-2xl p-5 bg-white">Contracts & Volumes — โครงข้อมูล/ผูกเอกสาร</div>;
+export default function Page(){
+  return <div className="rounded-2xl p-5 bg-white">Contracts & Volumes — โครงข้อมูล/ผูกเอกสาร</div>;
 }

frontend/app/(protected)/correspondences/new/page.jsx

@@ -1,3 +1,3 @@
-export default function Page(){
-  return <div className="rounded-2xl p-5 bg-white">ฟอร์มบันทึกหนังสือสื่อสาร</div>;
+export default function Page(){
+  return <div className="rounded-2xl p-5 bg-white">ฟอร์มบันทึกหนังสือสื่อสาร</div>;
 }

frontend/app/(protected)/correspondences/page.jsx

@@ -1,3 +1,3 @@
-export default function Page(){
-  return <div className="rounded-2xl p-5 bg-white">Correspondences — list/table</div>;
+export default function Page(){
+  return <div className="rounded-2xl p-5 bg-white">Correspondences — list/table</div>;
 }

frontend/app/(protected)/dashboard/page.jsx

@@ -1,155 +1,155 @@
-// frontend/app/(protected)/dashboard/page.jsx
-'use client';
-
-import { useState, useEffect } from 'react';
-import Link from 'next/link';
-import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
-import { Button } from '@/components/ui/button';
-import { Badge } from '@/components/ui/badge';
-import { Activity, File, FilePlus, ArrowRight, BellDot, Settings } from 'lucide-react';
-import api from '@/lib/api';
-import { useAuth } from '@/lib/auth';
-import { can } from '@/lib/rbac';
-
-export default function DashboardPage() {
-  const { user } = useAuth();
-  const [stats, setStats] = useState(null);
-  const [myTasks, setMyTasks] = useState([]);
-  const [recentActivity, setRecentActivity] = useState([]);
-  const [loading, setLoading] = useState(true);
-
-  useEffect(() => {
-    const fetchData = async () => {
-      try {
-        setLoading(true);
-        // เรียก API ที่จำเป็นสำหรับ Dashboard พร้อมกัน
-        // หมายเหตุ: Endpoint เหล่านี้อาจจะต้องสร้างเพิ่มเติมในฝั่ง Backend
-        const [statsRes, tasksRes, activityRes] = await Promise.all([
-          api.get('/dashboard/stats').catch(e => ({ data: { totalDocuments: 0, newThisWeek: 0, pendingRfas: 0 }})), // สมมติ endpoint สำหรับ KPI
-          api.get('/dashboard/my-tasks').catch(e => ({ data: [] })),      // สมมติ endpoint สำหรับ Action Items
-          api.get('/dashboard/recent-activity').catch(e => ({ data: [] })), // สมมติ endpoint สำหรับ Recent Activity
-        ]);
-
-        setStats(statsRes.data);
-        setMyTasks(tasksRes.data);
-        setRecentActivity(activityRes.data);
-
-      } catch (error) {
-        console.error("Failed to fetch dashboard data:", error);
-      } finally {
-        setLoading(false);
-      }
-    };
-
-    fetchData();
-  }, []);
-
-  if (loading) {
-    // อาจจะใช้ Skeleton UI ที่นี่เพื่อให้ UX ดีขึ้น
-    return <div className="text-center">Loading Dashboard...</div>;
-  }
-
-  return (
-    <div className="space-y-6">
-      {/* ส่วน Header และ Quick Access Buttons */}
-      <div className="flex flex-wrap items-center justify-between gap-4">
-        <div>
-          <h1 className="text-3xl font-bold">Dashboard</h1>
-          <p className="text-muted-foreground">Welcome back, {user?.username || 'User'}!</p>
-        </div>
-        <div className="flex gap-2">
-            <Button asChild>
-                <Link href="/correspondences/new">
-                    <FilePlus className="w-4 h-4 mr-2" /> New Correspondence
-                </Link>
-            </Button>
-            {/* ปุ่ม Admin Settings จะแสดงเมื่อมีสิทธิ์ 'manage_users' เท่านั้น */}
-            {user && can(user, 'manage_users') && (
-                <Button asChild variant="outline">
-                    <Link href="/admin/users">
-                        <Settings className="w-4 h-4 mr-2" /> Admin Settings
-                    </Link>
-                </Button>
-            )}
-        </div>
-      </div>
-
-      {/* ส่วน Key Metrics (KPIs) */}
-      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
-        <Card>
-          <CardHeader className="flex flex-row items-center justify-between pb-2 space-y-0">
-            <CardTitle className="text-sm font-medium">Total Documents</CardTitle>
-            <File className="w-4 h-4 text-muted-foreground" />
-          </CardHeader>
-          <CardContent>
-            <div className="text-2xl font-bold">{stats?.totalDocuments || 0}</div>
-            <p className="text-xs text-muted-foreground">+{stats?.newThisWeek || 0} this week</p>
-          </CardContent>
-        </Card>
-        <Card>
-          <CardHeader className="flex flex-row items-center justify-between pb-2 space-y-0">
-            <CardTitle className="text-sm font-medium">Pending RFAs</CardTitle>
-            <BellDot className="w-4 h-4 text-muted-foreground" />
-          </CardHeader>
-          <CardContent>
-            <div className="text-2xl font-bold">{stats?.pendingRfas || 0}</div>
-             <p className="text-xs text-muted-foreground">Require your attention</p>
-          </CardContent>
-        </Card>
-        {/* สามารถเพิ่ม Card อื่นๆ ตามต้องการ */}
-      </div>
-
-      {/* ส่วน Action Items และ Recent Activity */}
-      <div className="grid gap-6 md:grid-cols-1 lg:grid-cols-3">
-        {/* Action Items */}
-        <Card className="lg:col-span-1">
-          <CardHeader>
-            <CardTitle>My Action Items</CardTitle>
-            <CardDescription>Tasks that require your immediate attention.</CardDescription>
-          </CardHeader>
-          <CardContent className="pl-6">
-             {myTasks && myTasks.length > 0 ? (
-                <ul className="space-y-4">
-                    {myTasks.map(task => (
-                        <li key={task.id} className="flex items-start">
-                            <ArrowRight className="flex-shrink-0 w-4 h-4 mt-1 mr-3 text-primary" />
-                            <Link href={task.link || '#'} className="text-sm hover:underline">
-                                {task.title}
-                            </Link>
-                        </li>
-                    ))}
-                </ul>
-             ) : (
-                <p className="text-sm italic text-muted-foreground">No pending tasks. You're all caught up!</p>
-             )}
-          </CardContent>
-        </Card>
-        
-        {/* Recent Activity */}
-        <Card className="lg:col-span-2">
-          <CardHeader>
-            <CardTitle>Recent Project Activity</CardTitle>
-            <CardDescription>Latest updates from the team.</CardDescription>
-          </CardHeader>
-          <CardContent>
-             {recentActivity && recentActivity.length > 0 ? (
-                <ul className="space-y-4">
-                    {recentActivity.map(activity => (
-                        <li key={activity.id} className="flex items-start">
-                            <Activity className="flex-shrink-0 w-4 h-4 mt-1 mr-3 text-muted-foreground" />
-                            <div>
-                                <p className="text-sm" dangerouslySetInnerHTML={{ __html: activity.description }}></p>
-                                <p className="text-xs text-muted-foreground">{new Date(activity.timestamp).toLocaleString()}</p>
-                            </div>
-                        </li>
-                    ))}
-                </ul>
-             ) : (
-                 <p className="text-sm italic text-muted-foreground">No recent activity.</p>
-             )}
-          </CardContent>
-        </Card>
-      </div>
-    </div>
-  );
+// frontend/app/(protected)/dashboard/page.jsx
+'use client';
+
+import { useState, useEffect } from 'react';
+import Link from 'next/link';
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import { Activity, File, FilePlus, ArrowRight, BellDot, Settings } from 'lucide-react';
+import api from '@/lib/api';
+import { useAuth } from '@/lib/auth';
+import { can } from '@/lib/rbac';
+
+export default function DashboardPage() {
+  const { user } = useAuth();
+  const [stats, setStats] = useState(null);
+  const [myTasks, setMyTasks] = useState([]);
+  const [recentActivity, setRecentActivity] = useState([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        setLoading(true);
+        // เรียก API ที่จำเป็นสำหรับ Dashboard พร้อมกัน
+        // หมายเหตุ: Endpoint เหล่านี้อาจจะต้องสร้างเพิ่มเติมในฝั่ง Backend
+        const [statsRes, tasksRes, activityRes] = await Promise.all([
+          api.get('/dashboard/stats').catch(e => ({ data: { totalDocuments: 0, newThisWeek: 0, pendingRfas: 0 }})), // สมมติ endpoint สำหรับ KPI
+          api.get('/dashboard/my-tasks').catch(e => ({ data: [] })),      // สมมติ endpoint สำหรับ Action Items
+          api.get('/dashboard/recent-activity').catch(e => ({ data: [] })), // สมมติ endpoint สำหรับ Recent Activity
+        ]);
+
+        setStats(statsRes.data);
+        setMyTasks(tasksRes.data);
+        setRecentActivity(activityRes.data);
+
+      } catch (error) {
+        console.error("Failed to fetch dashboard data:", error);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchData();
+  }, []);
+
+  if (loading) {
+    // อาจจะใช้ Skeleton UI ที่นี่เพื่อให้ UX ดีขึ้น
+    return <div className="text-center">Loading Dashboard...</div>;
+  }
+
+  return (
+    <div className="space-y-6">
+      {/* ส่วน Header และ Quick Access Buttons */}
+      <div className="flex flex-wrap items-center justify-between gap-4">
+        <div>
+          <h1 className="text-3xl font-bold">Dashboard</h1>
+          <p className="text-muted-foreground">Welcome back, {user?.username || 'User'}!</p>
+        </div>
+        <div className="flex gap-2">
+            <Button asChild>
+                <Link href="/correspondences/new">
+                    <FilePlus className="w-4 h-4 mr-2" /> New Correspondence
+                </Link>
+            </Button>
+            {/* ปุ่ม Admin Settings จะแสดงเมื่อมีสิทธิ์ 'manage_users' เท่านั้น */}
+            {user && can(user, 'manage_users') && (
+                <Button asChild variant="outline">
+                    <Link href="/admin/users">
+                        <Settings className="w-4 h-4 mr-2" /> Admin Settings
+                    </Link>
+                </Button>
+            )}
+        </div>
+      </div>
+
+      {/* ส่วน Key Metrics (KPIs) */}
+      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
+        <Card>
+          <CardHeader className="flex flex-row items-center justify-between pb-2 space-y-0">
+            <CardTitle className="text-sm font-medium">Total Documents</CardTitle>
+            <File className="w-4 h-4 text-muted-foreground" />
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">{stats?.totalDocuments || 0}</div>
+            <p className="text-xs text-muted-foreground">+{stats?.newThisWeek || 0} this week</p>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader className="flex flex-row items-center justify-between pb-2 space-y-0">
+            <CardTitle className="text-sm font-medium">Pending RFAs</CardTitle>
+            <BellDot className="w-4 h-4 text-muted-foreground" />
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">{stats?.pendingRfas || 0}</div>
+             <p className="text-xs text-muted-foreground">Require your attention</p>
+          </CardContent>
+        </Card>
+        {/* สามารถเพิ่ม Card อื่นๆ ตามต้องการ */}
+      </div>
+
+      {/* ส่วน Action Items และ Recent Activity */}
+      <div className="grid gap-6 md:grid-cols-1 lg:grid-cols-3">
+        {/* Action Items */}
+        <Card className="lg:col-span-1">
+          <CardHeader>
+            <CardTitle>My Action Items</CardTitle>
+            <CardDescription>Tasks that require your immediate attention.</CardDescription>
+          </CardHeader>
+          <CardContent className="pl-6">
+             {myTasks && myTasks.length > 0 ? (
+                <ul className="space-y-4">
+                    {myTasks.map(task => (
+                        <li key={task.id} className="flex items-start">
+                            <ArrowRight className="flex-shrink-0 w-4 h-4 mt-1 mr-3 text-primary" />
+                            <Link href={task.link || '#'} className="text-sm hover:underline">
+                                {task.title}
+                            </Link>
+                        </li>
+                    ))}
+                </ul>
+             ) : (
+                <p className="text-sm italic text-muted-foreground">No pending tasks. You're all caught up!</p>
+             )}
+          </CardContent>
+        </Card>
+        
+        {/* Recent Activity */}
+        <Card className="lg:col-span-2">
+          <CardHeader>
+            <CardTitle>Recent Project Activity</CardTitle>
+            <CardDescription>Latest updates from the team.</CardDescription>
+          </CardHeader>
+          <CardContent>
+             {recentActivity && recentActivity.length > 0 ? (
+                <ul className="space-y-4">
+                    {recentActivity.map(activity => (
+                        <li key={activity.id} className="flex items-start">
+                            <Activity className="flex-shrink-0 w-4 h-4 mt-1 mr-3 text-muted-foreground" />
+                            <div>
+                                <p className="text-sm" dangerouslySetInnerHTML={{ __html: activity.description }}></p>
+                                <p className="text-xs text-muted-foreground">{new Date(activity.timestamp).toLocaleString()}</p>
+                            </div>
+                        </li>
+                    ))}
+                </ul>
+             ) : (
+                 <p className="text-sm italic text-muted-foreground">No recent activity.</p>
+             )}
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  );
 }

frontend/app/(protected)/drawings/page.jsx

@@ -1,5 +1,5 @@
-import { getSession } from "@/lib/auth";
-export default async function Page(){
-  const { user } = await getSession();
-  return <div className="rounded-2xl p-5 bg-white">Drawings — list/table (ต่อเชื่อม backend)</div>;
+import { getSession } from "@/lib/auth";
+export default async function Page(){
+  const { user } = await getSession();
+  return <div className="rounded-2xl p-5 bg-white">Drawings — list/table (ต่อเชื่อม backend)</div>;
 }

frontend/app/(protected)/drawings/upload/page.jsx

@@ -1,3 +1,3 @@
-export default function Page(){
-  return <div className="rounded-2xl p-5 bg-white">Upload Wizard 3 ขั้น (เลือกไฟล์ → ผูก Volume/Sub-cat → Review)</div>;
+export default function Page(){
+  return <div className="rounded-2xl p-5 bg-white">Upload Wizard 3 ขั้น (เลือกไฟล์ → ผูก Volume/Sub-cat → Review)</div>;
 }

frontend/app/(protected)/health/page.jsx

@@ -1,3 +1,3 @@
-export default function Page(){
-  return <div className="rounded-2xl p-5 bg-white">Health — แสดงสถานะ service (nginx, maria, n8n, postgres)</div>;
+export default function Page(){
+  return <div className="rounded-2xl p-5 bg-white">Health — แสดงสถานะ service (nginx, maria, n8n, postgres)</div>;
 }

frontend/app/(protected)/layout.jsx

@@ -1,85 +1,85 @@
-// frontend/app/(protected)/layout.jsx
-import Link from "next/link";
-import { redirect } from "next/navigation";
-import { usePathname } from 'next/navigation';
-import { cookies, headers } from "next/headers";
-import { can } from "@/lib/rbac";
-import { Home, FileText, Users, Settings } from 'lucide-react'; // เพิ่ม Users, Settings หรือไอคอนที่ต้องการ
-
-export const metadata = { title: "DMS | Protected" };
-
-const API_BASE = (process.env.NEXT_PUBLIC_API_BASE || "").replace(/\/$/, "");
-
-async function fetchSessionFromAPI() {
-  const cookieStore = await cookies();               // ✅ ต้อง await
-  const cookieHeader = cookieStore.toString();
-
-  const hdrs = await headers();                      // ✅ ต้อง await
-  const hostHdr = hdrs.get("host");
-  const protoHdr = hdrs.get("x-forwarded-proto") || "https";
-
-  const res = await fetch(`${API_BASE}/api/auth/me`, {
-    method: "GET",
-    headers: {
-      Cookie: cookieHeader,
-      "X-Forwarded-Host": hostHdr || "",
-      "X-Forwarded-Proto": protoHdr,
-      Accept: "application/json",
-    },
-    cache: "no-store",
-  });
-
-  if (!res.ok) return null;
-  try {
-    const data = await res.json();
-    return data?.ok ? data : null;
-  } catch {
-    return null;
-  }
-}
-
-export default async function ProtectedLayout({ children }) {
-  const session = await fetchSessionFromAPI();
-  if (!session) {
-    redirect("/login?next=/dashboard");
-  }
-  const { user } = session;
-
-  return (
-    <section className="grid grid-cols-12 gap-6 p-4 mx-auto max-w-7xl">
-      <aside className="col-span-12 lg:col-span-3 xl:col-span-3">
-        <div className="p-4 border rounded-3xl bg-white/70">
-          <div className="mb-3 text-sm">RBAC: <b>{user.role}</b></div>
-          <nav className="space-y-2">
-            <Link className="block px-4 py-2 rounded-xl bg-white/60 hover:bg-white" href="/dashboard">แดชบอร์ด</Link>
-            <Link className="block px-4 py-2 rounded-xl bg-white/60 hover:bg-white" href="/drawings">Drawings</Link>
-            <Link className="block px-4 py-2 rounded-xl bg-white/60 hover:bg-white" href="/rfas">RFAs</Link>
-            <Link className="block px-4 py-2 rounded-xl bg-white/60 hover:bg-white" href="/transmittals">Transmittals</Link>
-            <Link className="block px-4 py-2 rounded-xl bg-white/60 hover:bg-white" href="/correspondences">Correspondences</Link>
-            <Link className="block px-4 py-2 rounded-xl bg-white/60 hover:bg-white" href="/contracts-volumes">Contracts & Volumes</Link>
-            <Link className="block px-4 py-2 rounded-xl bg-white/60 hover:bg-white" href="/reports">Reports</Link>
-            {can(user, "workflow:view") && <Link className="block px-4 py-2 rounded-xl bg-white/60 hover:bg-white" href="/workflow">Workflow (n8n)</Link>}
-            {can(user, "health:view") && <Link className="block px-4 py-2 rounded-xl bg-white/60 hover:bg-white" href="/health">Health</Link>}
-            {can(user, "users:manage") && <Link className="block px-4 py-2 rounded-xl bg-white/60 hover:bg-white" href="/users">ผู้ใช้/บทบาท</Link>}
-          </nav>
-        </div>
-      </aside>
-
-      <main className="col-span-12 space-y-6 lg:col-span-9 xl:col-span-9">
-        <div className="flex items-center gap-2">
-          <div className="flex-1 text-lg font-semibold">Document Management System — LCBP3 Phase 3</div>
-          {can(user, "admin:view") && <a className="px-3 py-2 text-white rounded-xl" style={{ background: "#0D5C75" }} href="/admin">Admin</a>}
-          {can(user, "users:manage") && <a className="px-3 py-2 text-white rounded-xl" style={{ background: "#0D5C75" }} href="/users">ผู้ใช้/บทบาท</a>}
-          {can(user, "health:view") && <a className="px-3 py-2 text-white rounded-xl" style={{ background: "#0D5C75" }} href="/health">Health</a>}
-          {can(user, "workflow:view") && <a className="px-3 py-2 text-white rounded-xl" style={{ background: "#0D5C75" }} href="/workflow">Workflow</a>}
-          {can(user, "rfa:create") && <a className="px-3 py-2 text-white rounded-xl" style={{ background: "#0D5C75" }} href="/rfas/new">+ RFA</a>}
-          {can(user, "drawing:upload") && <a className="px-3 py-2 text-white rounded-xl" style={{ background: "#0D5C75" }} href="/drawings/upload">+ Upload Drawing</a>}
-          {can(user, "transmittal:create") && <a className="px-3 py-2 text-white rounded-xl" style={{ background: "#0D5C75" }} href="/transmittals/new">+ Transmittal</a>}
-          {can(user, "correspondence:create") && <a className="px-3 py-2 text-white rounded-xl" style={{ background: "#0D5C75" }} href="/correspondences/new">+ หนังสือสื่อสาร</a>}
-        </div>
-
-        {children}
-      </main>
-    </section>
-  );
-}
+// frontend/app/(protected)/layout.jsx
+import Link from "next/link";
+import { redirect } from "next/navigation";
+import { usePathname } from 'next/navigation';
+import { cookies, headers } from "next/headers";
+import { can } from "@/lib/rbac";
+import { Home, FileText, Users, Settings } from 'lucide-react'; // เพิ่ม Users, Settings หรือไอคอนที่ต้องการ
+
+export const metadata = { title: "DMS | Protected" };
+
+const API_BASE = (process.env.NEXT_PUBLIC_API_BASE || "").replace(/\/$/, "");
+
+async function fetchSessionFromAPI() {
+  const cookieStore = await cookies();               // ✅ ต้อง await
+  const cookieHeader = cookieStore.toString();
+
+  const hdrs = await headers();                      // ✅ ต้อง await
+  const hostHdr = hdrs.get("host");
+  const protoHdr = hdrs.get("x-forwarded-proto") || "https";
+
+  const res = await fetch(`${API_BASE}/api/auth/me`, {
+    method: "GET",
+    headers: {
+      Cookie: cookieHeader,
+      "X-Forwarded-Host": hostHdr || "",
+      "X-Forwarded-Proto": protoHdr,
+      Accept: "application/json",
+    },
+    cache: "no-store",
+  });
+
+  if (!res.ok) return null;
+  try {
+    const data = await res.json();
+    return data?.ok ? data : null;
+  } catch {
+    return null;
+  }
+}
+
+export default async function ProtectedLayout({ children }) {
+  const session = await fetchSessionFromAPI();
+  if (!session) {
+    redirect("/login?next=/dashboard");
+  }
+  const { user } = session;
+
+  return (
+    <section className="grid grid-cols-12 gap-6 p-4 mx-auto max-w-7xl">
+      <aside className="col-span-12 lg:col-span-3 xl:col-span-3">
+        <div className="p-4 border rounded-3xl bg-white/70">
+          <div className="mb-3 text-sm">RBAC: <b>{user.role}</b></div>
+          <nav className="space-y-2">
+            <Link className="block px-4 py-2 rounded-xl bg-white/60 hover:bg-white" href="/dashboard">แดชบอร์ด</Link>
+            <Link className="block px-4 py-2 rounded-xl bg-white/60 hover:bg-white" href="/drawings">Drawings</Link>
+            <Link className="block px-4 py-2 rounded-xl bg-white/60 hover:bg-white" href="/rfas">RFAs</Link>
+            <Link className="block px-4 py-2 rounded-xl bg-white/60 hover:bg-white" href="/transmittals">Transmittals</Link>
+            <Link className="block px-4 py-2 rounded-xl bg-white/60 hover:bg-white" href="/correspondences">Correspondences</Link>
+            <Link className="block px-4 py-2 rounded-xl bg-white/60 hover:bg-white" href="/contracts-volumes">Contracts & Volumes</Link>
+            <Link className="block px-4 py-2 rounded-xl bg-white/60 hover:bg-white" href="/reports">Reports</Link>
+            {can(user, "workflow:view") && <Link className="block px-4 py-2 rounded-xl bg-white/60 hover:bg-white" href="/workflow">Workflow (n8n)</Link>}
+            {can(user, "health:view") && <Link className="block px-4 py-2 rounded-xl bg-white/60 hover:bg-white" href="/health">Health</Link>}
+            {can(user, "users:manage") && <Link className="block px-4 py-2 rounded-xl bg-white/60 hover:bg-white" href="/users">ผู้ใช้/บทบาท</Link>}
+          </nav>
+        </div>
+      </aside>
+
+      <main className="col-span-12 space-y-6 lg:col-span-9 xl:col-span-9">
+        <div className="flex items-center gap-2">
+          <div className="flex-1 text-lg font-semibold">Document Management System — LCBP3 Phase 3</div>
+          {can(user, "admin:view") && <a className="px-3 py-2 text-white rounded-xl" style={{ background: "#0D5C75" }} href="/admin">Admin</a>}
+          {can(user, "users:manage") && <a className="px-3 py-2 text-white rounded-xl" style={{ background: "#0D5C75" }} href="/users">ผู้ใช้/บทบาท</a>}
+          {can(user, "health:view") && <a className="px-3 py-2 text-white rounded-xl" style={{ background: "#0D5C75" }} href="/health">Health</a>}
+          {can(user, "workflow:view") && <a className="px-3 py-2 text-white rounded-xl" style={{ background: "#0D5C75" }} href="/workflow">Workflow</a>}
+          {can(user, "rfa:create") && <a className="px-3 py-2 text-white rounded-xl" style={{ background: "#0D5C75" }} href="/rfas/new">+ RFA</a>}
+          {can(user, "drawing:upload") && <a className="px-3 py-2 text-white rounded-xl" style={{ background: "#0D5C75" }} href="/drawings/upload">+ Upload Drawing</a>}
+          {can(user, "transmittal:create") && <a className="px-3 py-2 text-white rounded-xl" style={{ background: "#0D5C75" }} href="/transmittals/new">+ Transmittal</a>}
+          {can(user, "correspondence:create") && <a className="px-3 py-2 text-white rounded-xl" style={{ background: "#0D5C75" }} href="/correspondences/new">+ หนังสือสื่อสาร</a>}
+        </div>
+
+        {children}
+      </main>
+    </section>
+  );
+}

frontend/app/(protected)/reports/page.jsx

@@ -1,3 +1,3 @@
-export default function Page(){
-  return <div className="rounded-2xl p-5 bg-white">Reports — Export CSV/PDF</div>;
+export default function Page(){
+  return <div className="rounded-2xl p-5 bg-white">Reports — Export CSV/PDF</div>;
 }

frontend/app/(protected)/rfas/new/page.jsx

@@ -1,110 +1,110 @@
- "use client";
- import React from "react";
- import { useRouter } from "next/navigation";
- import { api } from "@/lib/api";
- import { Input } from "@/components/ui/input";
- import { Button } from "@/components/ui/button";
-
- export default function RfaNew() {
-   const router = useRouter();
-   const [draftId, setDraftId] = React.useState(null);
-   const [saving, setSaving] = React.useState(false);
-   const [savedAt, setSavedAt] = React.useState(null);
-   const [error, setError] = React.useState("");
-   const [form, setForm] = React.useState({
-     title: "", code: "", discipline: "", due_date: "", description: ""
-   });
-   const [errs, setErrs] = React.useState({});
-
-   // simple validate (client)
-   const validate = (f) => {
-     const e = {};
-     if (!f.title?.trim()) e.title = "กรุณากรอกชื่อเรื่อง";
-     if (!f.due_date) e.due_date = "กรุณากำหนดวันที่ครบกำหนด";
-     return e;
-   };
-
-   // debounce autosave
-   const tRef = React.useRef(0);
-   React.useEffect(() => {
-     clearTimeout(tRef.current);
-     tRef.current = window.setTimeout(async () => {
-       const e = validate(form);
-       setErrs(e); // แสดง error ทันที (soft)
-       try {
-         setSaving(true);
-         if (!draftId) {
-           // create draft
-           const res = await api("/rfas", { method: "POST", body: { ...form, status: "draft" } });
-           setDraftId(res.id);
-         } else {
-           // update draft
-           await api(`/rfas/${draftId}`, { method: "PATCH", body: { ...form, status: "draft" } });
-         }
-         setSavedAt(new Date());
-       } catch (err) {
-         setError(err.message || "บันทึกฉบับร่างไม่สำเร็จ");
-       } finally {
-         setSaving(false);
-       }
-     }, 800);
-     return () => clearTimeout(tRef.current);
-   }, [form, draftId]);
-
-   const onSubmit = async (e) => {
-     e.preventDefault();
-     const eobj = validate(form);
-     setErrs(eobj);
-     if (Object.keys(eobj).length) return;
-     try {
-       setSaving(true);
-       const id = draftId
-         ? (await api(`/rfas/${draftId}`, { method: "PATCH", body: { ...form, status: "submitted" } })).id || draftId
-         : (await api("/rfas", { method: "POST", body: { ...form, status: "submitted" } })).id;
-       router.replace(`/rfas`); // หรือไปหน้า detail `/rfas/${id}`
-     } catch (err) {
-       setError(err.message || "ส่งคำขอไม่สำเร็จ");
-     } finally {
-       setSaving(false);
-     }
-   };
-
-   return (
-     <form onSubmit={onSubmit} className="p-5 space-y-4 bg-white rounded-2xl">
-       <div className="text-lg font-semibold">สร้าง RFA</div>
-       {error && <div className="text-sm text-red-600">{error}</div>}
-       <div className="grid gap-3 md:grid-cols-2">
-         <div>
-           <label className="text-sm">ชื่อเรื่อง *</label>
-           <Input value={form.title} onChange={(e)=>setForm(f=>({...f, title:e.target.value}))}/>
-           {errs.title && <div className="mt-1 text-xs text-red-600">{errs.title}</div>}
-         </div>
-         <div>
-           <label className="text-sm">รหัส (ถ้ามี)</label>
-           <Input value={form.code} onChange={(e)=>setForm(f=>({...f, code:e.target.value}))}/>
-         </div>
-         <div>
-           <label className="text-sm">สาขา/หมวด (Discipline)</label>
-           <Input value={form.discipline} onChange={(e)=>setForm(f=>({...f, discipline:e.target.value}))}/>
-         </div>
-         <div>
-           <label className="text-sm">กำหนดส่ง *</label>
-           <input type="date" className="w-full p-2 border rounded-xl" value={form.due_date}
-                  onChange={(e)=>setForm(f=>({...f, due_date:e.target.value}))}/>
-           {errs.due_date && <div className="mt-1 text-xs text-red-600">{errs.due_date}</div>}
-         </div>
-       </div>
-       <div>
-         <label className="text-sm">รายละเอียด</label>
-         <textarea rows={5} className="w-full p-2 border rounded-xl"
-                   value={form.description} onChange={(e)=>setForm(f=>({...f, description:e.target.value}))}/>
-       </div>
-       <div className="flex items-center gap-3">
-         <Button type="submit" disabled={saving}>ส่งเพื่อพิจารณา</Button>
-         <span className="text-sm opacity-70">
-           {saving ? "กำลังบันทึก…" : savedAt ? `บันทึกล่าสุด ${savedAt.toLocaleTimeString()}` : "ยังไม่เคยบันทึก"}
-         </span>
-       </div>
-     </form>
-   );
+ "use client";
+ import React from "react";
+ import { useRouter } from "next/navigation";
+ import { api } from "@/lib/api";
+ import { Input } from "@/components/ui/input";
+ import { Button } from "@/components/ui/button";
+
+ export default function RfaNew() {
+   const router = useRouter();
+   const [draftId, setDraftId] = React.useState(null);
+   const [saving, setSaving] = React.useState(false);
+   const [savedAt, setSavedAt] = React.useState(null);
+   const [error, setError] = React.useState("");
+   const [form, setForm] = React.useState({
+     title: "", code: "", discipline: "", due_date: "", description: ""
+   });
+   const [errs, setErrs] = React.useState({});
+
+   // simple validate (client)
+   const validate = (f) => {
+     const e = {};
+     if (!f.title?.trim()) e.title = "กรุณากรอกชื่อเรื่อง";
+     if (!f.due_date) e.due_date = "กรุณากำหนดวันที่ครบกำหนด";
+     return e;
+   };
+
+   // debounce autosave
+   const tRef = React.useRef(0);
+   React.useEffect(() => {
+     clearTimeout(tRef.current);
+     tRef.current = window.setTimeout(async () => {
+       const e = validate(form);
+       setErrs(e); // แสดง error ทันที (soft)
+       try {
+         setSaving(true);
+         if (!draftId) {
+           // create draft
+           const res = await api("/rfas", { method: "POST", body: { ...form, status: "draft" } });
+           setDraftId(res.id);
+         } else {
+           // update draft
+           await api(`/rfas/${draftId}`, { method: "PATCH", body: { ...form, status: "draft" } });
+         }
+         setSavedAt(new Date());
+       } catch (err) {
+         setError(err.message || "บันทึกฉบับร่างไม่สำเร็จ");
+       } finally {
+         setSaving(false);
+       }
+     }, 800);
+     return () => clearTimeout(tRef.current);
+   }, [form, draftId]);
+
+   const onSubmit = async (e) => {
+     e.preventDefault();
+     const eobj = validate(form);
+     setErrs(eobj);
+     if (Object.keys(eobj).length) return;
+     try {
+       setSaving(true);
+       const id = draftId
+         ? (await api(`/rfas/${draftId}`, { method: "PATCH", body: { ...form, status: "submitted" } })).id || draftId
+         : (await api("/rfas", { method: "POST", body: { ...form, status: "submitted" } })).id;
+       router.replace(`/rfas`); // หรือไปหน้า detail `/rfas/${id}`
+     } catch (err) {
+       setError(err.message || "ส่งคำขอไม่สำเร็จ");
+     } finally {
+       setSaving(false);
+     }
+   };
+
+   return (
+     <form onSubmit={onSubmit} className="p-5 space-y-4 bg-white rounded-2xl">
+       <div className="text-lg font-semibold">สร้าง RFA</div>
+       {error && <div className="text-sm text-red-600">{error}</div>}
+       <div className="grid gap-3 md:grid-cols-2">
+         <div>
+           <label className="text-sm">ชื่อเรื่อง *</label>
+           <Input value={form.title} onChange={(e)=>setForm(f=>({...f, title:e.target.value}))}/>
+           {errs.title && <div className="mt-1 text-xs text-red-600">{errs.title}</div>}
+         </div>
+         <div>
+           <label className="text-sm">รหัส (ถ้ามี)</label>
+           <Input value={form.code} onChange={(e)=>setForm(f=>({...f, code:e.target.value}))}/>
+         </div>
+         <div>
+           <label className="text-sm">สาขา/หมวด (Discipline)</label>
+           <Input value={form.discipline} onChange={(e)=>setForm(f=>({...f, discipline:e.target.value}))}/>
+         </div>
+         <div>
+           <label className="text-sm">กำหนดส่ง *</label>
+           <input type="date" className="w-full p-2 border rounded-xl" value={form.due_date}
+                  onChange={(e)=>setForm(f=>({...f, due_date:e.target.value}))}/>
+           {errs.due_date && <div className="mt-1 text-xs text-red-600">{errs.due_date}</div>}
+         </div>
+       </div>
+       <div>
+         <label className="text-sm">รายละเอียด</label>
+         <textarea rows={5} className="w-full p-2 border rounded-xl"
+                   value={form.description} onChange={(e)=>setForm(f=>({...f, description:e.target.value}))}/>
+       </div>
+       <div className="flex items-center gap-3">
+         <Button type="submit" disabled={saving}>ส่งเพื่อพิจารณา</Button>
+         <span className="text-sm opacity-70">
+           {saving ? "กำลังบันทึก…" : savedAt ? `บันทึกล่าสุด ${savedAt.toLocaleTimeString()}` : "ยังไม่เคยบันทึก"}
+         </span>
+       </div>
+     </form>
+   );
  }

frontend/app/(protected)/rfas/page.jsx

@@ -1,135 +1,135 @@
- "use client";
- import React from "react";
- import { useRouter, usePathname, useSearchParams } from "next/navigation";
- import { apiGet } from "@/lib/api";
- import { Input } from "@/components/ui/input";
- import { Button } from "@/components/ui/button";
- import { Card, CardContent } from "@/components/ui/card";
-
- export default function RFAsPage() {
-   const router = useRouter();
-   const pathname = usePathname();
-   const sp = useSearchParams();
-
-   // params from URL
-   const [q, setQ] = React.useState(sp.get("q") || "");
-   const status = sp.get("status") || "All";
-   const overdue = sp.get("overdue") === "1";
-   const page = Number(sp.get("page") || 1);
-   const pageSize = Number(sp.get("pageSize") || 20);
-   const sort = sp.get("sort") || "updated_at:desc";
-
-   const setParams = (patch) => {
-     const curr = Object.fromEntries(sp.entries());
-     const next = { ...curr, ...patch };
-     // normalize
-     if (!next.q) delete next.q;
-     if (!next.status || next.status === "All") delete next.status;
-     if (!next.overdue || next.overdue === "0") delete next.overdue;
-     if (!next.page || Number(next.page) === 1) delete next.page;
-     if (!next.pageSize || Number(next.pageSize) === 20) delete next.pageSize;
-     if (!next.sort || next.sort === "updated_at:desc") delete next.sort;
-     const usp = new URLSearchParams(next).toString();
-     router.replace(`${pathname}${usp ? `?${usp}` : ""}`);
-   };
-
-   const [rows, setRows] = React.useState([]);
-   const [total, setTotal] = React.useState(0);
-   const [loading, setLoading] = React.useState(true);
-   const [error, setError] = React.useState("");
-
-   // fetch whenever URL params change
-   React.useEffect(() => {
-     setLoading(true); setError("");
-     apiGet("/rfas", {
-       q, status: status !== "All" ? status : undefined,
-       overdue: overdue ? 1 : undefined, page, pageSize, sort
-     }).then((res) => {
-       // expected: { data: [...], page, pageSize, total }
-       setRows(res.data || []);
-       setTotal(res.total || 0);
-     }).catch((e) => {
-       setError(e.message || "โหลดข้อมูลไม่สำเร็จ");
-     }).finally(() => setLoading(false));
-   // eslint-disable-next-line react-hooks/exhaustive-deps
-   }, [sp]);
-
-   const pages = Math.max(1, Math.ceil(total / pageSize));
-
-   return (
-     <div className="space-y-4">
-       <div className="flex items-center gap-2">
-         <Input
-           placeholder="ค้นหา (รหัส/ชื่อเรื่อง/ผู้รับผิดชอบ)"
-           value={q}
-           onChange={(e) => setQ(e.target.value)}
-           onKeyDown={(e) => e.key === "Enter" && setParams({ q, page: 1 })}
-         />
-         <select
-           className="border rounded-xl p-2"
-           value={status}
-           onChange={(e) => setParams({ status: e.target.value, page: 1 })}
-         >
-           <option>All</option><option>Pending</option><option>Review</option><option>Approved</option><option>Closed</option>
-         </select>
-         <label className="text-sm flex items-center gap-2">
-           <input
-             type="checkbox"
-             checked={overdue}
-             onChange={(e) => setParams({ overdue: e.target.checked ? "1" : "0", page: 1 })}
-           />
-           Overdue
-         </label>
-         <Button onClick={() => setParams({ q, page: 1 })}>ค้นหา</Button>
-       </div>
-
-       <Card className="rounded-2xl border-0">
-         <CardContent className="p-0">
-           <div className="overflow-x-auto">
-             <table className="min-w-full text-sm">
-               <thead className="bg-white sticky top-0 border-b">
-                 <tr className="text-left">
-                   <th className="py-2 px-3">รหัส</th>
-                   <th className="py-2 px-3">ชื่อเรื่อง</th>
-                   <th className="py-2 px-3">สถานะ</th>
-                   <th className="py-2 px-3">กำหนดส่ง</th>
-                   <th className="py-2 px-3">ผู้รับผิดชอบ</th>
-                 </tr>
-               </thead>
-               <tbody>
-                 {loading && <tr><td className="py-6 px-3" colSpan={5}>กำลังโหลด…</td></tr>}
-                 {error && !loading && <tr><td className="py-6 px-3 text-red-600" colSpan={5}>{error}</td></tr>}
-                 {!loading && !error && rows.length === 0 && <tr><td className="py-6 px-3 opacity-70" colSpan={5}>ไม่พบข้อมูล</td></tr>}
-                 {!loading && !error && rows.map((r) => (
-                   <tr key={r.id} className="border-b hover:bg-gray-50">
-                     <td className="py-2 px-3 font-mono">{r.code || r.id}</td>
-                     <td className="py-2 px-3">{r.title}</td>
-                     <td className="py-2 px-3">{r.status}</td>
-                     <td className="py-2 px-3">{r.due_date || "—"}</td>
-                     <td className="py-2 px-3">{r.owner_name || "—"}</td>
-                   </tr>
-                 ))}
-               </tbody>
-             </table>
-           </div>
-           <div className="flex items-center justify-between px-3 py-2 text-sm border-t">
-             <span>ทั้งหมด {total} รายการ</span>
-             <div className="flex items-center gap-2">
-               <Button
-                 variant="outline"
-                 onClick={() => setParams({ page: Math.max(1, page - 1) })}
-                 disabled={page <= 1}
-               >ย้อนกลับ</Button>
-               <span>หน้า {page}/{pages}</span>
-               <Button
-                 variant="outline"
-                 onClick={() => setParams({ page: Math.min(pages, page + 1) })}
-                 disabled={page >= pages}
-               >ถัดไป</Button>
-             </div>
-           </div>
-         </CardContent>
-       </Card>
-     </div>
-   );
+ "use client";
+ import React from "react";
+ import { useRouter, usePathname, useSearchParams } from "next/navigation";
+ import { apiGet } from "@/lib/api";
+ import { Input } from "@/components/ui/input";
+ import { Button } from "@/components/ui/button";
+ import { Card, CardContent } from "@/components/ui/card";
+
+ export default function RFAsPage() {
+   const router = useRouter();
+   const pathname = usePathname();
+   const sp = useSearchParams();
+
+   // params from URL
+   const [q, setQ] = React.useState(sp.get("q") || "");
+   const status = sp.get("status") || "All";
+   const overdue = sp.get("overdue") === "1";
+   const page = Number(sp.get("page") || 1);
+   const pageSize = Number(sp.get("pageSize") || 20);
+   const sort = sp.get("sort") || "updated_at:desc";
+
+   const setParams = (patch) => {
+     const curr = Object.fromEntries(sp.entries());
+     const next = { ...curr, ...patch };
+     // normalize
+     if (!next.q) delete next.q;
+     if (!next.status || next.status === "All") delete next.status;
+     if (!next.overdue || next.overdue === "0") delete next.overdue;
+     if (!next.page || Number(next.page) === 1) delete next.page;
+     if (!next.pageSize || Number(next.pageSize) === 20) delete next.pageSize;
+     if (!next.sort || next.sort === "updated_at:desc") delete next.sort;
+     const usp = new URLSearchParams(next).toString();
+     router.replace(`${pathname}${usp ? `?${usp}` : ""}`);
+   };
+
+   const [rows, setRows] = React.useState([]);
+   const [total, setTotal] = React.useState(0);
+   const [loading, setLoading] = React.useState(true);
+   const [error, setError] = React.useState("");
+
+   // fetch whenever URL params change
+   React.useEffect(() => {
+     setLoading(true); setError("");
+     apiGet("/rfas", {
+       q, status: status !== "All" ? status : undefined,
+       overdue: overdue ? 1 : undefined, page, pageSize, sort
+     }).then((res) => {
+       // expected: { data: [...], page, pageSize, total }
+       setRows(res.data || []);
+       setTotal(res.total || 0);
+     }).catch((e) => {
+       setError(e.message || "โหลดข้อมูลไม่สำเร็จ");
+     }).finally(() => setLoading(false));
+   // eslint-disable-next-line react-hooks/exhaustive-deps
+   }, [sp]);
+
+   const pages = Math.max(1, Math.ceil(total / pageSize));
+
+   return (
+     <div className="space-y-4">
+       <div className="flex items-center gap-2">
+         <Input
+           placeholder="ค้นหา (รหัส/ชื่อเรื่อง/ผู้รับผิดชอบ)"
+           value={q}
+           onChange={(e) => setQ(e.target.value)}
+           onKeyDown={(e) => e.key === "Enter" && setParams({ q, page: 1 })}
+         />
+         <select
+           className="border rounded-xl p-2"
+           value={status}
+           onChange={(e) => setParams({ status: e.target.value, page: 1 })}
+         >
+           <option>All</option><option>Pending</option><option>Review</option><option>Approved</option><option>Closed</option>
+         </select>
+         <label className="text-sm flex items-center gap-2">
+           <input
+             type="checkbox"
+             checked={overdue}
+             onChange={(e) => setParams({ overdue: e.target.checked ? "1" : "0", page: 1 })}
+           />
+           Overdue
+         </label>
+         <Button onClick={() => setParams({ q, page: 1 })}>ค้นหา</Button>
+       </div>
+
+       <Card className="rounded-2xl border-0">
+         <CardContent className="p-0">
+           <div className="overflow-x-auto">
+             <table className="min-w-full text-sm">
+               <thead className="bg-white sticky top-0 border-b">
+                 <tr className="text-left">
+                   <th className="py-2 px-3">รหัส</th>
+                   <th className="py-2 px-3">ชื่อเรื่อง</th>
+                   <th className="py-2 px-3">สถานะ</th>
+                   <th className="py-2 px-3">กำหนดส่ง</th>
+                   <th className="py-2 px-3">ผู้รับผิดชอบ</th>
+                 </tr>
+               </thead>
+               <tbody>
+                 {loading && <tr><td className="py-6 px-3" colSpan={5}>กำลังโหลด…</td></tr>}
+                 {error && !loading && <tr><td className="py-6 px-3 text-red-600" colSpan={5}>{error}</td></tr>}
+                 {!loading && !error && rows.length === 0 && <tr><td className="py-6 px-3 opacity-70" colSpan={5}>ไม่พบข้อมูล</td></tr>}
+                 {!loading && !error && rows.map((r) => (
+                   <tr key={r.id} className="border-b hover:bg-gray-50">
+                     <td className="py-2 px-3 font-mono">{r.code || r.id}</td>
+                     <td className="py-2 px-3">{r.title}</td>
+                     <td className="py-2 px-3">{r.status}</td>
+                     <td className="py-2 px-3">{r.due_date || "—"}</td>
+                     <td className="py-2 px-3">{r.owner_name || "—"}</td>
+                   </tr>
+                 ))}
+               </tbody>
+             </table>
+           </div>
+           <div className="flex items-center justify-between px-3 py-2 text-sm border-t">
+             <span>ทั้งหมด {total} รายการ</span>
+             <div className="flex items-center gap-2">
+               <Button
+                 variant="outline"
+                 onClick={() => setParams({ page: Math.max(1, page - 1) })}
+                 disabled={page <= 1}
+               >ย้อนกลับ</Button>
+               <span>หน้า {page}/{pages}</span>
+               <Button
+                 variant="outline"
+                 onClick={() => setParams({ page: Math.min(pages, page + 1) })}
+                 disabled={page >= pages}
+               >ถัดไป</Button>
+             </div>
+           </div>
+         </CardContent>
+       </Card>
+     </div>
+   );
  }

frontend/app/(protected)/transmittals/new/page.jsx

@@ -1,108 +1,108 @@
- "use client";
- import React from "react";
- import { useRouter } from "next/navigation";
- import { api } from "@/lib/api";
- import { Input } from "@/components/ui/input";
- import { Button } from "@/components/ui/button";
-
- export default function TransmittalNew() {
-   const router = useRouter();
-   const [draftId, setDraftId] = React.useState(null);
-   const [saving, setSaving] = React.useState(false);
-   const [savedAt, setSavedAt] = React.useState(null);
-   const [error, setError] = React.useState("");
-   const [form, setForm] = React.useState({
-     subject: "", number: "", to_party: "", sent_date: "", description: ""
-   });
-   const [errs, setErrs] = React.useState({});
-
-   const validate = (f) => {
-     const e = {};
-     if (!f.subject?.trim()) e.subject = "กรุณากรอกเรื่อง (Subject)";
-     if (!f.to_party?.trim()) e.to_party = "กรุณาระบุผู้รับ (To)";
-     if (!f.sent_date) e.sent_date = "กรุณาระบุวันที่ส่ง";
-     return e;
-   };
-
-   const tRef = React.useRef(0);
-   React.useEffect(() => {
-     clearTimeout(tRef.current);
-     tRef.current = window.setTimeout(async () => {
-       const e = validate(form);
-       setErrs(e);
-       try {
-         setSaving(true);
-         if (!draftId) {
-           const res = await api("/transmittals", { method: "POST", body: { ...form, status: "draft" } });
-           setDraftId(res.id);
-         } else {
-           await api(`/transmittals/${draftId}`, { method: "PATCH", body: { ...form, status: "draft" } });
-         }
-         setSavedAt(new Date());
-       } catch (err) {
-         setError(err.message || "บันทึกฉบับร่างไม่สำเร็จ");
-       } finally {
-         setSaving(false);
-       }
-     }, 800);
-     return () => clearTimeout(tRef.current);
-   }, [form, draftId]);
-
-   const onSubmit = async (e) => {
-     e.preventDefault();
-     const eobj = validate(form);
-     setErrs(eobj);
-     if (Object.keys(eobj).length) return;
-     try {
-       setSaving(true);
-       const id = draftId
-         ? (await api(`/transmittals/${draftId}`, { method: "PATCH", body: { ...form, status: "submitted" } })).id || draftId
-         : (await api("/transmittals", { method: "POST", body: { ...form, status: "submitted" } })).id;
-       router.replace(`/transmittals`);
-     } catch (err) {
-       setError(err.message || "ส่ง Transmittal ไม่สำเร็จ");
-     } finally {
-       setSaving(false);
-     }
-   };
-
-   return (
-     <form onSubmit={onSubmit} className="space-y-4 rounded-2xl p-5 bg-white">
-       <div className="text-lg font-semibold">สร้าง Transmittal</div>
-       {error && <div className="text-sm text-red-600">{error}</div>}
-       <div className="grid md:grid-cols-2 gap-3">
-         <div>
-           <label className="text-sm">เรื่อง (Subject) *</label>
-           <Input value={form.subject} onChange={(e)=>setForm(f=>({...f, subject:e.target.value}))}/>
-           {errs.subject && <div className="text-xs text-red-600 mt-1">{errs.subject}</div>}
-         </div>
-         <div>
-           <label className="text-sm">เลขที่ (ถ้ามี)</label>
-           <Input value={form.number} onChange={(e)=>setForm(f=>({...f, number:e.target.value}))}/>
-         </div>
-         <div>
-           <label className="text-sm">ถึง (To) *</label>
-           <Input value={form.to_party} onChange={(e)=>setForm(f=>({...f, to_party:e.target.value}))}/>
-           {errs.to_party && <div className="text-xs text-red-600 mt-1">{errs.to_party}</div>}
-         </div>
-         <div>
-           <label className="text-sm">วันที่ส่ง *</label>
-           <input type="date" className="border rounded-xl p-2 w-full" value={form.sent_date}
-                  onChange={(e)=>setForm(f=>({...f, sent_date:e.target.value}))}/>
-           {errs.sent_date && <div className="text-xs text-red-600 mt-1">{errs.sent_date}</div>}
-         </div>
-       </div>
-       <div>
-         <label className="text-sm">รายละเอียด</label>
-         <textarea rows={5} className="border rounded-xl p-2 w-full"
-                   value={form.description} onChange={(e)=>setForm(f=>({...f, description:e.target.value}))}/>
-       </div>
-       <div className="flex items-center gap-3">
-         <Button type="submit" disabled={saving}>ส่ง Transmittal</Button>
-         <span className="text-sm opacity-70">
-           {saving ? "กำลังบันทึก…" : savedAt ? `บันทึกล่าสุด ${savedAt.toLocaleTimeString()}` : "ยังไม่เคยบันทึก"}
-         </span>
-       </div>
-     </form>
-   );
+ "use client";
+ import React from "react";
+ import { useRouter } from "next/navigation";
+ import { api } from "@/lib/api";
+ import { Input } from "@/components/ui/input";
+ import { Button } from "@/components/ui/button";
+
+ export default function TransmittalNew() {
+   const router = useRouter();
+   const [draftId, setDraftId] = React.useState(null);
+   const [saving, setSaving] = React.useState(false);
+   const [savedAt, setSavedAt] = React.useState(null);
+   const [error, setError] = React.useState("");
+   const [form, setForm] = React.useState({
+     subject: "", number: "", to_party: "", sent_date: "", description: ""
+   });
+   const [errs, setErrs] = React.useState({});
+
+   const validate = (f) => {
+     const e = {};
+     if (!f.subject?.trim()) e.subject = "กรุณากรอกเรื่อง (Subject)";
+     if (!f.to_party?.trim()) e.to_party = "กรุณาระบุผู้รับ (To)";
+     if (!f.sent_date) e.sent_date = "กรุณาระบุวันที่ส่ง";
+     return e;
+   };
+
+   const tRef = React.useRef(0);
+   React.useEffect(() => {
+     clearTimeout(tRef.current);
+     tRef.current = window.setTimeout(async () => {
+       const e = validate(form);
+       setErrs(e);
+       try {
+         setSaving(true);
+         if (!draftId) {
+           const res = await api("/transmittals", { method: "POST", body: { ...form, status: "draft" } });
+           setDraftId(res.id);
+         } else {
+           await api(`/transmittals/${draftId}`, { method: "PATCH", body: { ...form, status: "draft" } });
+         }
+         setSavedAt(new Date());
+       } catch (err) {
+         setError(err.message || "บันทึกฉบับร่างไม่สำเร็จ");
+       } finally {
+         setSaving(false);
+       }
+     }, 800);
+     return () => clearTimeout(tRef.current);
+   }, [form, draftId]);
+
+   const onSubmit = async (e) => {
+     e.preventDefault();
+     const eobj = validate(form);
+     setErrs(eobj);
+     if (Object.keys(eobj).length) return;
+     try {
+       setSaving(true);
+       const id = draftId
+         ? (await api(`/transmittals/${draftId}`, { method: "PATCH", body: { ...form, status: "submitted" } })).id || draftId
+         : (await api("/transmittals", { method: "POST", body: { ...form, status: "submitted" } })).id;
+       router.replace(`/transmittals`);
+     } catch (err) {
+       setError(err.message || "ส่ง Transmittal ไม่สำเร็จ");
+     } finally {
+       setSaving(false);
+     }
+   };
+
+   return (
+     <form onSubmit={onSubmit} className="space-y-4 rounded-2xl p-5 bg-white">
+       <div className="text-lg font-semibold">สร้าง Transmittal</div>
+       {error && <div className="text-sm text-red-600">{error}</div>}
+       <div className="grid md:grid-cols-2 gap-3">
+         <div>
+           <label className="text-sm">เรื่อง (Subject) *</label>
+           <Input value={form.subject} onChange={(e)=>setForm(f=>({...f, subject:e.target.value}))}/>
+           {errs.subject && <div className="text-xs text-red-600 mt-1">{errs.subject}</div>}
+         </div>
+         <div>
+           <label className="text-sm">เลขที่ (ถ้ามี)</label>
+           <Input value={form.number} onChange={(e)=>setForm(f=>({...f, number:e.target.value}))}/>
+         </div>
+         <div>
+           <label className="text-sm">ถึง (To) *</label>
+           <Input value={form.to_party} onChange={(e)=>setForm(f=>({...f, to_party:e.target.value}))}/>
+           {errs.to_party && <div className="text-xs text-red-600 mt-1">{errs.to_party}</div>}
+         </div>
+         <div>
+           <label className="text-sm">วันที่ส่ง *</label>
+           <input type="date" className="border rounded-xl p-2 w-full" value={form.sent_date}
+                  onChange={(e)=>setForm(f=>({...f, sent_date:e.target.value}))}/>
+           {errs.sent_date && <div className="text-xs text-red-600 mt-1">{errs.sent_date}</div>}
+         </div>
+       </div>
+       <div>
+         <label className="text-sm">รายละเอียด</label>
+         <textarea rows={5} className="border rounded-xl p-2 w-full"
+                   value={form.description} onChange={(e)=>setForm(f=>({...f, description:e.target.value}))}/>
+       </div>
+       <div className="flex items-center gap-3">
+         <Button type="submit" disabled={saving}>ส่ง Transmittal</Button>
+         <span className="text-sm opacity-70">
+           {saving ? "กำลังบันทึก…" : savedAt ? `บันทึกล่าสุด ${savedAt.toLocaleTimeString()}` : "ยังไม่เคยบันทึก"}
+         </span>
+       </div>
+     </form>
+   );
  }

frontend/app/(protected)/transmittals/page.jsx

@@ -1,96 +1,96 @@
- "use client";
- import React from "react";
- import { useRouter, usePathname, useSearchParams } from "next/navigation";
- import { apiGet } from "@/lib/api";
- import { Input } from "@/components/ui/input";
- import { Button } from "@/components/ui/button";
- import { Card, CardContent } from "@/components/ui/card";
-
- export default function TransmittalsPage() {
-   const router = useRouter();
-   const pathname = usePathname();
-   const sp = useSearchParams();
-
-   const [q, setQ] = React.useState(sp.get("q") || "");
-   const page = Number(sp.get("page") || 1);
-   const pageSize = Number(sp.get("pageSize") || 20);
-   const sort = sp.get("sort") || "sent_date:desc";
-
-   const setParams = (patch) => {
-     const curr = Object.fromEntries(sp.entries());
-     const next = { ...curr, ...patch };
-     if (!next.q) delete next.q;
-     if (!next.page || Number(next.page) === 1) delete next.page;
-     if (!next.pageSize || Number(next.pageSize) === 20) delete next.pageSize;
-     if (!next.sort || next.sort === "sent_date:desc") delete next.sort;
-     const usp = new URLSearchParams(next).toString();
-     router.replace(`${pathname}${usp ? `?${usp}` : ""}`);
-   };
-
-   const [rows, setRows] = React.useState([]);
-   const [total, setTotal] = React.useState(0);
-   const [loading, setLoading] = React.useState(true);
-   const [error, setError] = React.useState("");
-
-   React.useEffect(() => {
-     setLoading(true); setError("");
-     apiGet("/transmittals", { q, page, pageSize, sort })
-       .then((res) => { setRows(res.data || []); setTotal(res.total || 0); })
-       .catch((e) => setError(e.message || "โหลดข้อมูลไม่สำเร็จ"))
-       .finally(() => setLoading(false));
-   // eslint-disable-next-line react-hooks/exhaustive-deps
-   }, [sp]);
-
-   const pages = Math.max(1, Math.ceil(total / pageSize));
-
-   return (
-     <div className="space-y-4">
-       <div className="flex items-center gap-2">
-         <Input
-           placeholder="ค้นหา Transmittal (เลขที่/เรื่อง/ถึงใคร)"
-           value={q}
-           onChange={(e) => setQ(e.target.value)}
-           onKeyDown={(e) => e.key === "Enter" && setParams({ q, page: 1 })}
-         />
-         <Button onClick={() => setParams({ q, page: 1 })}>ค้นหา</Button>
-       </div>
-       <Card className="border-0 rounded-2xl">
-         <CardContent className="p-0">
-           <div className="overflow-x-auto">
-             <table className="min-w-full text-sm">
-               <thead className="sticky top-0 bg-white border-b">
-                 <tr className="text-left">
-                   <th className="px-3 py-2">เลขที่</th>
-                   <th className="px-3 py-2">เรื่อง</th>
-                   <th className="px-3 py-2">ถึง</th>
-                   <th className="px-3 py-2">วันที่ส่ง</th>
-                 </tr>
-               </thead>
-               <tbody>
-                 {loading && <tr><td className="px-3 py-6" colSpan={4}>กำลังโหลด…</td></tr>}
-                 {error && !loading && <tr><td className="px-3 py-6 text-red-600" colSpan={4}>{error}</td></tr>}
-                 {!loading && !error && rows.length === 0 && <tr><td className="px-3 py-6 opacity-70" colSpan={4}>ไม่พบข้อมูล</td></tr>}
-                 {!loading && !error && rows.map((r) => (
-                   <tr key={r.id} className="border-b hover:bg-gray-50">
-                     <td className="px-3 py-2 font-mono">{r.number || r.id}</td>
-                     <td className="px-3 py-2">{r.subject}</td>
-                     <td className="px-3 py-2">{r.to_party}</td>
-                     <td className="px-3 py-2">{r.sent_date || "—"}</td>
-                   </tr>
-                 ))}
-               </tbody>
-             </table>
-           </div>
-           <div className="flex items-center justify-between px-3 py-2 text-sm border-t">
-             <span>ทั้งหมด {total} รายการ</span>
-             <div className="flex items-center gap-2">
-               <Button variant="outline" onClick={() => setParams({ page: Math.max(1, page - 1) })} disabled={page <= 1}>ย้อนกลับ</Button>
-               <span>หน้า {page}/{pages}</span>
-               <Button variant="outline" onClick={() => setParams({ page: Math.min(pages, page + 1) })} disabled={page >= pages}>ถัดไป</Button>
-             </div>
-           </div>
-         </CardContent>
-       </Card>
-     </div>
-   );
+ "use client";
+ import React from "react";
+ import { useRouter, usePathname, useSearchParams } from "next/navigation";
+ import { apiGet } from "@/lib/api";
+ import { Input } from "@/components/ui/input";
+ import { Button } from "@/components/ui/button";
+ import { Card, CardContent } from "@/components/ui/card";
+
+ export default function TransmittalsPage() {
+   const router = useRouter();
+   const pathname = usePathname();
+   const sp = useSearchParams();
+
+   const [q, setQ] = React.useState(sp.get("q") || "");
+   const page = Number(sp.get("page") || 1);
+   const pageSize = Number(sp.get("pageSize") || 20);
+   const sort = sp.get("sort") || "sent_date:desc";
+
+   const setParams = (patch) => {
+     const curr = Object.fromEntries(sp.entries());
+     const next = { ...curr, ...patch };
+     if (!next.q) delete next.q;
+     if (!next.page || Number(next.page) === 1) delete next.page;
+     if (!next.pageSize || Number(next.pageSize) === 20) delete next.pageSize;
+     if (!next.sort || next.sort === "sent_date:desc") delete next.sort;
+     const usp = new URLSearchParams(next).toString();
+     router.replace(`${pathname}${usp ? `?${usp}` : ""}`);
+   };
+
+   const [rows, setRows] = React.useState([]);
+   const [total, setTotal] = React.useState(0);
+   const [loading, setLoading] = React.useState(true);
+   const [error, setError] = React.useState("");
+
+   React.useEffect(() => {
+     setLoading(true); setError("");
+     apiGet("/transmittals", { q, page, pageSize, sort })
+       .then((res) => { setRows(res.data || []); setTotal(res.total || 0); })
+       .catch((e) => setError(e.message || "โหลดข้อมูลไม่สำเร็จ"))
+       .finally(() => setLoading(false));
+   // eslint-disable-next-line react-hooks/exhaustive-deps
+   }, [sp]);
+
+   const pages = Math.max(1, Math.ceil(total / pageSize));
+
+   return (
+     <div className="space-y-4">
+       <div className="flex items-center gap-2">
+         <Input
+           placeholder="ค้นหา Transmittal (เลขที่/เรื่อง/ถึงใคร)"
+           value={q}
+           onChange={(e) => setQ(e.target.value)}
+           onKeyDown={(e) => e.key === "Enter" && setParams({ q, page: 1 })}
+         />
+         <Button onClick={() => setParams({ q, page: 1 })}>ค้นหา</Button>
+       </div>
+       <Card className="border-0 rounded-2xl">
+         <CardContent className="p-0">
+           <div className="overflow-x-auto">
+             <table className="min-w-full text-sm">
+               <thead className="sticky top-0 bg-white border-b">
+                 <tr className="text-left">
+                   <th className="px-3 py-2">เลขที่</th>
+                   <th className="px-3 py-2">เรื่อง</th>
+                   <th className="px-3 py-2">ถึง</th>
+                   <th className="px-3 py-2">วันที่ส่ง</th>
+                 </tr>
+               </thead>
+               <tbody>
+                 {loading && <tr><td className="px-3 py-6" colSpan={4}>กำลังโหลด…</td></tr>}
+                 {error && !loading && <tr><td className="px-3 py-6 text-red-600" colSpan={4}>{error}</td></tr>}
+                 {!loading && !error && rows.length === 0 && <tr><td className="px-3 py-6 opacity-70" colSpan={4}>ไม่พบข้อมูล</td></tr>}
+                 {!loading && !error && rows.map((r) => (
+                   <tr key={r.id} className="border-b hover:bg-gray-50">
+                     <td className="px-3 py-2 font-mono">{r.number || r.id}</td>
+                     <td className="px-3 py-2">{r.subject}</td>
+                     <td className="px-3 py-2">{r.to_party}</td>
+                     <td className="px-3 py-2">{r.sent_date || "—"}</td>
+                   </tr>
+                 ))}
+               </tbody>
+             </table>
+           </div>
+           <div className="flex items-center justify-between px-3 py-2 text-sm border-t">
+             <span>ทั้งหมด {total} รายการ</span>
+             <div className="flex items-center gap-2">
+               <Button variant="outline" onClick={() => setParams({ page: Math.max(1, page - 1) })} disabled={page <= 1}>ย้อนกลับ</Button>
+               <span>หน้า {page}/{pages}</span>
+               <Button variant="outline" onClick={() => setParams({ page: Math.min(pages, page + 1) })} disabled={page >= pages}>ถัดไป</Button>
+             </div>
+           </div>
+         </CardContent>
+       </Card>
+     </div>
+   );
  }

frontend/app/(protected)/users/page.jsx

@@ -1,3 +1,3 @@
-export default function Page(){
-  return <div className="rounded-2xl p-5 bg-white">ผู้ใช้/บทบาท — จัดการ RBAC</div>;
+export default function Page(){
+  return <div className="rounded-2xl p-5 bg-white">ผู้ใช้/บทบาท — จัดการ RBAC</div>;
 }

frontend/app/(protected)/workflow/page.jsx

@@ -1,3 +1,3 @@
-export default function Page(){
-  return <div className="rounded-2xl p-5 bg-white">Workflow (n8n) — ลิงก์/ฝัง UI ตาม reverse proxy</div>;
+export default function Page(){
+  return <div className="rounded-2xl p-5 bg-white">Workflow (n8n) — ลิงก์/ฝัง UI ตาม reverse proxy</div>;
 }