251127:1700 Frontend Start Build

frontend/app/(auth)/layout.tsx

@@ -0,0 +1,13 @@
+// File: app/(auth)/layout.tsx
+export default function AuthLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <div className="flex min-h-screen w-full items-center justify-center bg-muted/40 p-4">
+      {/* Container หลักจัดกึ่งกลาง */}
+      {children}
+    </div>
+  );
+}

frontend/app/(auth)/login/page.tsx

@@ -0,0 +1,165 @@
+// File: app/(auth)/login/page.tsx
+"use client";
+
+import { useState } from "react";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import * as z from "zod";
+import { signIn } from "next-auth/react";
+import { useRouter } from "next/navigation";
+import { Eye, EyeOff, Loader2 } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+
+// กำหนด Schema สำหรับตรวจสอบข้อมูลฟอร์ม
+const loginSchema = z.object({
+  username: z.string().min(1, "กรุณาระบุชื่อผู้ใช้งาน"),
+  password: z.string().min(1, "กรุณาระบุรหัสผ่าน"),
+});
+
+type LoginValues = z.infer<typeof loginSchema>;
+
+export default function LoginPage() {
+  const router = useRouter();
+  const [isLoading, setIsLoading] = useState(false);
+  const [showPassword, setShowPassword] = useState(false);
+
+  // ตั้งค่า React Hook Form
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm<LoginValues>({
+    resolver: zodResolver(loginSchema),
+    defaultValues: {
+      username: "",
+      password: "",
+    },
+  });
+
+  // ฟังก์ชันเมื่อกด Submit
+  async function onSubmit(data: LoginValues) {
+    setIsLoading(true);
+
+    try {
+      // เรียกใช้ NextAuth signIn (Credential Provider)
+      // หมายเหตุ: เรายังไม่ได้ตั้งค่า AuthOption ใน route.ts แต่นี่คือโค้ดฝั่ง Client ที่ถูกต้อง
+      const result = await signIn("credentials", {
+        username: data.username,
+        password: data.password,
+        redirect: false, // เราจะจัดการ Redirect เอง
+      });
+
+      if (result?.error) {
+        // กรณี Login ไม่สำเร็จ
+        console.error("Login failed:", result.error);
+        // TODO: เปลี่ยนเป็น Toast Notification ในอนาคต
+        alert("เข้าสู่ระบบไม่สำเร็จ: ชื่อผู้ใช้งานหรือรหัสผ่านไม่ถูกต้อง");
+        return;
+      }
+
+      // Login สำเร็จ -> ไปหน้า Dashboard
+      router.push("/dashboard");
+      router.refresh(); // Refresh เพื่อให้ Server Component รับรู้ Session ใหม่
+    } catch (error) {
+      console.error("Login error:", error);
+      alert("เกิดข้อผิดพลาดที่ไม่คาดคิด");
+    } finally {
+      setIsLoading(false);
+    }
+  }
+
+  return (
+    <Card className="w-full max-w-sm shadow-lg">
+      <CardHeader className="space-y-1 text-center">
+        <CardTitle className="text-2xl font-bold text-primary">
+          LCBP3 DMS
+        </CardTitle>
+        <CardDescription>
+          กรอกชื่อผู้ใช้งานและรหัสผ่านเพื่อเข้าสู่ระบบ
+        </CardDescription>
+      </CardHeader>
+      
+      <form onSubmit={handleSubmit(onSubmit)}>
+        <CardContent className="grid gap-4">
+          {/* Username Field */}
+          <div className="grid gap-2">
+            <Label htmlFor="username">ชื่อผู้ใช้งาน</Label>
+            <Input
+              id="username"
+              placeholder="username"
+              type="text"
+              autoCapitalize="none"
+              autoComplete="username"
+              autoCorrect="off"
+              disabled={isLoading}
+              className={errors.username ? "border-destructive" : ""}
+              {...register("username")}
+            />
+            {errors.username && (
+              <p className="text-xs text-destructive">
+                {errors.username.message}
+              </p>
+            )}
+          </div>
+
+          {/* Password Field */}
+          <div className="grid gap-2">
+            <Label htmlFor="password">รหัสผ่าน</Label>
+            <div className="relative">
+              <Input
+                id="password"
+                placeholder="••••••••"
+                type={showPassword ? "text" : "password"}
+                autoComplete="current-password"
+                disabled={isLoading}
+                className={errors.password ? "border-destructive pr-10" : "pr-10"}
+                {...register("password")}
+              />
+              {/* ปุ่ม Show/Hide Password */}
+              <Button
+                type="button"
+                variant="ghost"
+                size="sm"
+                className="absolute right-0 top-0 h-full px-3 py-2 hover:bg-transparent"
+                onClick={() => setShowPassword(!showPassword)}
+                disabled={isLoading}
+              >
+                {showPassword ? (
+                  <EyeOff className="h-4 w-4 text-muted-foreground" />
+                ) : (
+                  <Eye className="h-4 w-4 text-muted-foreground" />
+                )}
+                <span className="sr-only">
+                  {showPassword ? "Hide password" : "Show password"}
+                </span>
+              </Button>
+            </div>
+            {errors.password && (
+              <p className="text-xs text-destructive">
+                {errors.password.message}
+              </p>
+            )}
+          </div>
+        </CardContent>
+
+        <CardFooter>
+          <Button className="w-full" type="submit" disabled={isLoading}>
+            {isLoading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+            เข้าสู่ระบบ
+          </Button>
+        </CardFooter>
+      </form>
+    </Card>
+  );
+}

frontend/app/(dashboard)/admin/users/page.tsx

@@ -0,0 +1,269 @@
+// File: app/(dashboard)/admin/users/page.tsx
+"use client";
+
+import { useState } from "react";
+import { 
+  Plus, 
+  Search, 
+  MoreHorizontal, 
+  Shield, 
+  Building2, 
+  Mail 
+} from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Badge } from "@/components/ui/badge";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+
+// Type สำหรับข้อมูล User (Mockup)
+type User = {
+  id: string;
+  username: string;
+  firstName: string;
+  lastName: string;
+  email: string;
+  role: string;
+  organization: string;
+  status: "Active" | "Inactive" | "Locked";
+  lastLogin: string;
+};
+
+// Mock Data (อ้างอิงจาก Data Dictionary: users table)
+const mockUsers: User[] = [
+  {
+    id: "1",
+    username: "superadmin",
+    firstName: "Super",
+    lastName: "Admin",
+    email: "superadmin@example.com",
+    role: "Superadmin",
+    organization: "System",
+    status: "Active",
+    lastLogin: "2025-11-26 10:00",
+  },
+  {
+    id: "2",
+    username: "admin_pat",
+    firstName: "Admin",
+    lastName: "PAT",
+    email: "admin@pat.or.th",
+    role: "Org Admin",
+    organization: "กทท.",
+    status: "Active",
+    lastLogin: "2025-11-26 09:30",
+  },
+  {
+    id: "3",
+    username: "dc_team",
+    firstName: "DC",
+    lastName: "Team",
+    email: "dc@team.co.th",
+    role: "Document Control",
+    organization: "TEAM",
+    status: "Active",
+    lastLogin: "2025-11-25 16:45",
+  },
+  {
+    id: "4",
+    username: "viewer_en",
+    firstName: "Viewer",
+    lastName: "EN",
+    email: "view@en-consult.com",
+    role: "Viewer",
+    organization: "EN",
+    status: "Inactive",
+    lastLogin: "2025-11-20 11:00",
+  },
+];
+
+export default function UsersPage() {
+  const [searchTerm, setSearchTerm] = useState("");
+
+  // Filter logic (Client-side mockup)
+  const filteredUsers = mockUsers.filter((user) =>
+    user.username.toLowerCase().includes(searchTerm.toLowerCase()) ||
+    user.email.toLowerCase().includes(searchTerm.toLowerCase()) ||
+    user.firstName.toLowerCase().includes(searchTerm.toLowerCase())
+  );
+
+  const getStatusBadgeVariant = (status: string) => {
+    switch (status) {
+      case "Active": return "success";
+      case "Inactive": return "secondary";
+      case "Locked": return "destructive";
+      default: return "default";
+    }
+  };
+
+  const getInitials = (firstName: string, lastName: string) => {
+    return `${firstName[0]}${lastName[0]}`.toUpperCase();
+  };
+
+  return (
+    <div className="space-y-6">
+      {/* Header */}
+      <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
+        <div>
+          <h2 className="text-2xl font-bold tracking-tight">Users Management</h2>
+          <p className="text-muted-foreground">
+            จัดการผู้ใช้งาน กำหนดสิทธิ์ และดูสถานะการเข้าใช้งาน
+          </p>
+        </div>
+        <Button className="w-full md:w-auto">
+          <Plus className="mr-2 h-4 w-4" /> Add New User
+        </Button>
+      </div>
+
+      {/* Filters */}
+      <div className="flex items-center space-x-2">
+        <div className="relative flex-1 md:max-w-sm">
+          <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
+          <Input
+            placeholder="Search users..."
+            className="pl-8"
+            value={searchTerm}
+            onChange={(e) => setSearchTerm(e.target.value)}
+          />
+        </div>
+        {/* Add more filters (Role, Org) here if needed */}
+      </div>
+
+      {/* Desktop View: Table */}
+      <div className="hidden rounded-md border bg-card md:block">
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead>User</TableHead>
+              <TableHead>Role</TableHead>
+              <TableHead>Organization</TableHead>
+              <TableHead>Status</TableHead>
+              <TableHead>Last Login</TableHead>
+              <TableHead className="text-right">Actions</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {filteredUsers.map((user) => (
+              <TableRow key={user.id}>
+                <TableCell>
+                  <div className="flex items-center gap-3">
+                    <Avatar className="h-9 w-9">
+                      <AvatarFallback>{getInitials(user.firstName, user.lastName)}</AvatarFallback>
+                    </Avatar>
+                    <div className="flex flex-col">
+                      <span className="font-medium">{user.username}</span>
+                      <span className="text-xs text-muted-foreground">{user.email}</span>
+                    </div>
+                  </div>
+                </TableCell>
+                <TableCell>
+                  <div className="flex items-center gap-2">
+                    <Shield className="h-4 w-4 text-muted-foreground" />
+                    <span>{user.role}</span>
+                  </div>
+                </TableCell>
+                <TableCell>
+                  <div className="flex items-center gap-2">
+                    <Building2 className="h-4 w-4 text-muted-foreground" />
+                    <span>{user.organization}</span>
+                  </div>
+                </TableCell>
+                <TableCell>
+                  <Badge variant={getStatusBadgeVariant(user.status)}>
+                    {user.status}
+                  </Badge>
+                </TableCell>
+                <TableCell className="text-muted-foreground">
+                  {user.lastLogin}
+                </TableCell>
+                <TableCell className="text-right">
+                  <DropdownMenu>
+                    <DropdownMenuTrigger asChild>
+                      <Button variant="ghost" className="h-8 w-8 p-0">
+                        <span className="sr-only">Open menu</span>
+                        <MoreHorizontal className="h-4 w-4" />
+                      </Button>
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent align="end">
+                      <DropdownMenuLabel>Actions</DropdownMenuLabel>
+                      <DropdownMenuItem onClick={() => alert(`Edit user ${user.id}`)}>
+                        Edit Details
+                      </DropdownMenuItem>
+                      <DropdownMenuItem onClick={() => alert(`Reset password for ${user.id}`)}>
+                        Reset Password
+                      </DropdownMenuItem>
+                      <DropdownMenuSeparator />
+                      <DropdownMenuItem className="text-destructive" onClick={() => alert(`Delete user ${user.id}`)}>
+                        Deactivate User
+                      </DropdownMenuItem>
+                    </DropdownMenuContent>
+                  </DropdownMenu>
+                </TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </div>
+
+      {/* Mobile View: Cards */}
+      <div className="grid gap-4 md:hidden">
+        {filteredUsers.map((user) => (
+          <Card key={user.id}>
+            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+              <CardTitle className="text-base font-medium">
+                {user.username}
+              </CardTitle>
+              <Badge variant={getStatusBadgeVariant(user.status)}>
+                {user.status}
+              </Badge>
+            </CardHeader>
+            <CardContent className="space-y-3 pt-2">
+              <div className="flex items-center gap-3 text-sm text-muted-foreground">
+                <Mail className="h-4 w-4" />
+                {user.email}
+              </div>
+              <div className="flex items-center justify-between text-sm">
+                <div className="flex items-center gap-2">
+                  <Shield className="h-4 w-4 text-muted-foreground" />
+                  <span>{user.role}</span>
+                </div>
+                <div className="flex items-center gap-2">
+                  <Building2 className="h-4 w-4 text-muted-foreground" />
+                  <span>{user.organization}</span>
+                </div>
+              </div>
+              <div className="flex items-center justify-between pt-2">
+                <span className="text-xs text-muted-foreground">
+                  Last login: {user.lastLogin}
+                </span>
+                <Button variant="outline" size="sm">Edit</Button>
+              </div>
+            </CardContent>
+          </Card>
+        ))}
+      </div>
+    </div>
+  );
+}

frontend/app/(dashboard)/correspondences/new/page.tsx

@@ -0,0 +1,355 @@
+// File: app/(dashboard)/correspondences/new/page.tsx
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import * as z from "zod";
+import { format } from "date-fns";
+import { CalendarIcon, ChevronLeft, Save, Loader2, Send } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { Calendar } from "@/components/ui/calendar";
+import { FileUpload } from "@/components/forms/file-upload";
+import { cn } from "@/lib/utils";
+
+// --- Schema Definition ---
+const correspondenceSchema = z.object({
+  projectId: z.string().min(1, "กรุณาเลือกโครงการ"),
+  originatorId: z.string().min(1, "กรุณาเลือกองค์กรผู้ส่ง"),
+  type: z.string().min(1, "กรุณาเลือกประเภทเอกสาร"),
+  discipline: z.string().optional(), // สำหรับ RFA/Letter ที่มีสาขา
+  subType: z.string().optional(), // สำหรับแบ่งประเภทย่อย
+  recipientId: z.string().min(1, "กรุณาเลือกผู้รับ (To)"),
+  subject: z.string().min(5, "หัวข้อต้องยาวอย่างน้อย 5 ตัวอักษร"),
+  message: z.string().optional(),
+  replyRequiredBy: z.date().optional(),
+});
+
+type FormValues = z.infer<typeof correspondenceSchema>;
+
+// --- Mock Data for Dropdowns ---
+const projects = [
+  { id: "1", code: "LCBP3-C1", name: "งานก่อสร้างงานทางทะเล (ส่วนที่ 1)" },
+  { id: "2", code: "LCBP3-C2", name: "งานก่อสร้างอาคาร (ส่วนที่ 2)" },
+];
+
+const organizations = [
+  { id: "1", code: "PAT", name: "การท่าเรือฯ (Owner)" },
+  { id: "2", code: "CSC", name: "ที่ปรึกษาคุมงาน (Consult)" },
+  { id: "3", code: "CNNC", name: "ผู้รับเหมา C1" },
+];
+
+const docTypes = [
+  { id: "LET", name: "Letter (จดหมาย)" },
+  { id: "MEM", name: "Memo (บันทึกข้อความ)" },
+  { id: "RFA", name: "RFA (ขออนุมัติ)" },
+  { id: "RFI", name: "RFI (ขอข้อมูล)" },
+];
+
+const disciplines = [
+  { id: "GEN", name: "General (ทั่วไป)" },
+  { id: "STR", name: "Structural (โครงสร้าง)" },
+  { id: "ARC", name: "Architectural (สถาปัตยกรรม)" },
+  { id: "MEP", name: "MEP (งานระบบ)" },
+];
+
+export default function CreateCorrespondencePage() {
+  const router = useRouter();
+  const [isLoading, setIsLoading] = useState(false);
+  const [files, setFiles] = useState<File[]>([]);
+
+  // React Hook Form
+  const {
+    register,
+    handleSubmit,
+    setValue,
+    watch,
+    formState: { errors },
+  } = useForm<FormValues>({
+    resolver: zodResolver(correspondenceSchema),
+    defaultValues: {
+      originatorId: "3", // Default เป็น Org ของ User (Mock: CNNC)
+    },
+  });
+
+  // Watch values to update dynamic parts
+  const selectedProject = watch("projectId");
+  const selectedType = watch("type");
+  const selectedDiscipline = watch("discipline");
+  
+  // Logic จำลองการ Preview เลขที่เอกสาร (Document Numbering)
+  const getPreviewNumber = () => {
+    if (!selectedProject || !selectedType) return "---";
+    const proj = projects.find(p => p.id === selectedProject)?.code || "PROJ";
+    const type = selectedType;
+    const disc = selectedDiscipline ? `-${selectedDiscipline}` : "";
+    return `${proj}-${type}${disc}-0001 (Draft)`;
+  };
+
+  const onSubmit = async (data: FormValues) => {
+    setIsLoading(true);
+    try {
+      console.log("Form Data:", data);
+      console.log("Files:", files);
+      
+      // Simulate API call
+      await new Promise((resolve) => setTimeout(resolve, 1500));
+      
+      alert("บันทึกเอกสารเรียบร้อยแล้ว");
+      router.push("/correspondences");
+    } catch (error) {
+      console.error(error);
+      alert("เกิดข้อผิดพลาดในการบันทึก");
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <div className="max-w-4xl mx-auto space-y-6 pb-10">
+      {/* Header */}
+      <div className="flex items-center gap-4">
+        <Button variant="outline" size="icon" onClick={() => router.back()}>
+          <ChevronLeft className="h-5 w-5" />
+        </Button>
+        <div>
+          <h2 className="text-2xl font-bold tracking-tight">Create Correspondence</h2>
+          <p className="text-muted-foreground">
+            สร้างเอกสารใหม่เพื่อส่งออกไปยังหน่วยงานอื่น
+          </p>
+        </div>
+      </div>
+
+      <form onSubmit={handleSubmit(onSubmit)} className="space-y-8">
+        
+        {/* Section 1: Basic Info */}
+        <Card>
+          <CardHeader>
+            <CardTitle>ข้อมูลเบื้องต้น (Basic Information)</CardTitle>
+            <CardDescription>
+              ระบุโครงการและประเภทของเอกสาร เลขที่เอกสารจะถูกสร้างอัตโนมัติ
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="grid gap-6 md:grid-cols-2">
+            {/* Project Select */}
+            <div className="space-y-2">
+              <Label className="after:content-['*'] after:text-red-500">โครงการ (Project)</Label>
+              <Select onValueChange={(val) => setValue("projectId", val)}>
+                <SelectTrigger className={errors.projectId ? "border-destructive" : ""}>
+                  <SelectValue placeholder="เลือกโครงการ..." />
+                </SelectTrigger>
+                <SelectContent>
+                  {projects.map((p) => (
+                    <SelectItem key={p.id} value={p.id}>{p.name}</SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+              {errors.projectId && <p className="text-xs text-destructive">{errors.projectId.message}</p>}
+            </div>
+
+            {/* Document Type Select */}
+            <div className="space-y-2">
+              <Label className="after:content-['*'] after:text-red-500">ประเภทเอกสาร (Type)</Label>
+              <Select onValueChange={(val) => setValue("type", val)}>
+                <SelectTrigger className={errors.type ? "border-destructive" : ""}>
+                  <SelectValue placeholder="เลือกประเภท..." />
+                </SelectTrigger>
+                <SelectContent>
+                  {docTypes.map((t) => (
+                    <SelectItem key={t.id} value={t.id}>{t.name}</SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+              {errors.type && <p className="text-xs text-destructive">{errors.type.message}</p>}
+            </div>
+
+            {/* Discipline (Conditional) */}
+            <div className="space-y-2">
+              <Label>สาขางาน (Discipline)</Label>
+              <Select onValueChange={(val) => setValue("discipline", val)}>
+                <SelectTrigger>
+                  <SelectValue placeholder="ระบุสาขา (ถ้ามี)..." />
+                </SelectTrigger>
+                <SelectContent>
+                  {disciplines.map((d) => (
+                    <SelectItem key={d.id} value={d.id}>{d.name}</SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+              <p className="text-[10px] text-muted-foreground">จำเป็นสำหรับ RFA/RFI เพื่อการรันเลขที่ถูกต้อง</p>
+            </div>
+
+            {/* Originator (Sender) */}
+            <div className="space-y-2">
+              <Label className="after:content-['*'] after:text-red-500">ผู้ส่ง (From)</Label>
+              <Select defaultValue="3" onValueChange={(val) => setValue("originatorId", val)} disabled>
+                <SelectTrigger>
+                  <SelectValue placeholder="Select Originator" />
+                </SelectTrigger>
+                <SelectContent>
+                  {organizations.map((o) => (
+                    <SelectItem key={o.id} value={o.id}>{o.name}</SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+
+            {/* Document Number Preview */}
+            <div className="md:col-span-2 p-4 bg-muted/30 rounded-lg border border-dashed flex items-center justify-between">
+              <span className="text-sm font-medium text-muted-foreground">Preview Document No:</span>
+              <span className="font-mono text-lg font-bold text-primary">{getPreviewNumber()}</span>
+            </div>
+          </CardContent>
+        </Card>
+
+        {/* Section 2: Details & Recipients */}
+        <Card>
+          <CardHeader>
+            <CardTitle>รายละเอียดและผู้รับ (Details & Recipients)</CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-6">
+            
+            {/* Recipient */}
+            <div className="space-y-2">
+              <Label className="after:content-['*'] after:text-red-500">ผู้รับ (To)</Label>
+              <Select onValueChange={(val) => setValue("recipientId", val)}>
+                <SelectTrigger className={errors.recipientId ? "border-destructive" : ""}>
+                  <SelectValue placeholder="เลือกหน่วยงานผู้รับ..." />
+                </SelectTrigger>
+                <SelectContent>
+                  {organizations.filter(o => o.id !== "3").map((o) => (
+                    <SelectItem key={o.id} value={o.id}>{o.name}</SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+              {errors.recipientId && <p className="text-xs text-destructive">{errors.recipientId.message}</p>}
+            </div>
+
+            {/* Subject */}
+            <div className="space-y-2">
+              <Label className="after:content-['*'] after:text-red-500">หัวข้อเรื่อง (Subject)</Label>
+              <Input 
+                placeholder="ระบุหัวข้อเอกสาร..." 
+                className={errors.subject ? "border-destructive" : ""}
+                {...register("subject")} 
+              />
+              {errors.subject && <p className="text-xs text-destructive">{errors.subject.message}</p>}
+            </div>
+
+            {/* Message/Body */}
+            <div className="space-y-2">
+              <Label>รายละเอียด (Message)</Label>
+              <Textarea 
+                placeholder="พิมพ์รายละเอียดเพิ่มเติม..." 
+                className="min-h-[120px]"
+                {...register("message")}
+              />
+            </div>
+
+            {/* Reply Required Date */}
+            <div className="flex flex-col space-y-2">
+              <Label>วันที่ต้องการคำตอบ (Reply Required By)</Label>
+              <Popover>
+                <PopoverTrigger asChild>
+                  <Button
+                    variant={"outline"}
+                    className={cn(
+                      "w-[240px] pl-3 text-left font-normal",
+                      !watch("replyRequiredBy") && "text-muted-foreground"
+                    )}
+                  >
+                    {watch("replyRequiredBy") ? (
+                      format(watch("replyRequiredBy")!, "PPP")
+                    ) : (
+                      <span>Pick a date</span>
+                    )}
+                    <CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
+                  </Button>
+                </PopoverTrigger>
+                <PopoverContent className="w-auto p-0" align="start">
+                  <Calendar
+                    mode="single"
+                    selected={watch("replyRequiredBy")}
+                    onSelect={(date) => setValue("replyRequiredBy", date)}
+                    disabled={(date) => date < new Date()}
+                    initialFocus
+                  />
+                </PopoverContent>
+              </Popover>
+            </div>
+
+          </CardContent>
+        </Card>
+
+        {/* Section 3: Attachments */}
+        <Card>
+          <CardHeader>
+            <CardTitle>เอกสารแนบ (Attachments)</CardTitle>
+            <CardDescription>
+              รองรับไฟล์ PDF, DWG, Office (สูงสุด 50MB ต่อไฟล์)
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <FileUpload 
+              onFilesChange={setFiles} 
+              maxFiles={10}
+              accept=".pdf,.doc,.docx,.xls,.xlsx,.dwg,.zip,.jpg,.png"
+            />
+          </CardContent>
+        </Card>
+
+        {/* Actions */}
+        <div className="flex justify-end gap-4">
+          <Button variant="outline" type="button" onClick={() => router.back()} disabled={isLoading}>
+            ยกเลิก
+          </Button>
+          <Button type="submit" disabled={isLoading} className="min-w-[120px]">
+            {isLoading ? (
+              <>
+                <Loader2 className="mr-2 h-4 w-4 animate-spin" /> Saving...
+              </>
+            ) : (
+              <>
+                <Save className="mr-2 h-4 w-4" /> Save as Draft
+              </>
+            )}
+          </Button>
+          <Button type="submit" disabled={isLoading} className="min-w-[120px] bg-green-600 hover:bg-green-700">
+            {isLoading ? (
+              <Loader2 className="mr-2 h-4 w-4 animate-spin" /> 
+            ) : (
+              <Send className="mr-2 h-4 w-4" />
+            )}
+            Submit
+          </Button>
+        </div>
+
+      </form>
+    </div>
+  );
+}

frontend/app/(dashboard)/correspondences/page.tsx

@@ -0,0 +1,290 @@
+// File: app/(dashboard)/correspondences/page.tsx
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { 
+  Plus, 
+  Search, 
+  Filter, 
+  MoreHorizontal, 
+  FileText, 
+  Calendar,
+  Eye
+} from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Badge } from "@/components/ui/badge";
+import { Checkbox } from "@/components/ui/checkbox";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
+
+// --- Type Definitions ---
+type Correspondence = {
+  id: string;
+  documentNumber: string;
+  subject: string;
+  type: "Letter" | "Memo" | "RFI" | "Transmittal";
+  status: "Draft" | "Submitted" | "Approved" | "Rejected";
+  project: string;
+  date: string;
+  from: string;
+  to: string;
+};
+
+// --- Mock Data ---
+const mockData: Correspondence[] = [
+  {
+    id: "1",
+    documentNumber: "LCBP3-LET-GEN-001",
+    subject: "Submission of Monthly Progress Report - January 2025",
+    type: "Letter",
+    status: "Submitted",
+    project: "LCBP3-C1",
+    date: "2025-01-05",
+    from: "CNNC",
+    to: "PAT",
+  },
+  {
+    id: "2",
+    documentNumber: "LCBP3-RFI-STR-024",
+    subject: "Clarification on Beam Reinforcement Detail at Zone A",
+    type: "RFI",
+    status: "Approved",
+    project: "LCBP3-C2",
+    date: "2025-01-10",
+    from: "ITD-NWR",
+    to: "TEAM",
+  },
+  {
+    id: "3",
+    documentNumber: "LCBP3-MEMO-HR-005",
+    subject: "Site Access Protocol Update",
+    type: "Memo",
+    status: "Draft",
+    project: "LCBP3",
+    date: "2025-01-12",
+    from: "PAT",
+    to: "All Contractors",
+  },
+  {
+    id: "4",
+    documentNumber: "LCBP3-TRN-STR-011",
+    subject: "Transmittal of Shop Drawings for Piling Works",
+    type: "Transmittal",
+    status: "Submitted",
+    project: "LCBP3-C1",
+    date: "2025-01-15",
+    from: "CNNC",
+    to: "CSC",
+  },
+];
+
+export default function CorrespondencesPage() {
+  const router = useRouter();
+  const [searchTerm, setSearchTerm] = useState("");
+  const [typeFilter, setTypeFilter] = useState("ALL");
+
+  // Filter Logic
+  const filteredData = mockData.filter((item) => {
+    const matchesSearch = 
+      item.subject.toLowerCase().includes(searchTerm.toLowerCase()) ||
+      item.documentNumber.toLowerCase().includes(searchTerm.toLowerCase());
+    
+    const matchesType = typeFilter === "ALL" || item.type === typeFilter;
+
+    return matchesSearch && matchesType;
+  });
+
+  const getStatusVariant = (status: string) => {
+    switch (status) {
+      case "Approved": return "success";
+      case "Rejected": return "destructive";
+      case "Draft": return "secondary";
+      default: return "default"; // Submitted
+    }
+  };
+
+  const handleCreate = () => {
+    router.push("/correspondences/new");
+  };
+
+  return (
+    <div className="space-y-6">
+      {/* Header */}
+      <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
+        <div>
+          <h2 className="text-2xl font-bold tracking-tight">Correspondences</h2>
+          <p className="text-muted-foreground">
+            จัดการเอกสารเข้า-ออกทั้งหมดในโครงการ
+          </p>
+        </div>
+        <Button onClick={handleCreate} className="w-full md:w-auto">
+          <Plus className="mr-2 h-4 w-4" /> สร้างเอกสารใหม่
+        </Button>
+      </div>
+
+      {/* Toolbar (Search & Filter) */}
+      <div className="flex flex-col gap-4 md:flex-row md:items-center">
+        <div className="relative flex-1">
+          <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
+          <Input
+            placeholder="ค้นหาจากเลขที่เอกสาร หรือ หัวข้อ..."
+            className="pl-8"
+            value={searchTerm}
+            onChange={(e) => setSearchTerm(e.target.value)}
+          />
+        </div>
+        <div className="flex gap-2">
+          <Select defaultValue="ALL" onValueChange={setTypeFilter}>
+            <SelectTrigger className="w-[150px]">
+              <SelectValue placeholder="ประเภทเอกสาร" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="ALL">ทั้งหมด</SelectItem>
+              <SelectItem value="Letter">Letter</SelectItem>
+              <SelectItem value="Memo">Memo</SelectItem>
+              <SelectItem value="RFI">RFI</SelectItem>
+              <SelectItem value="Transmittal">Transmittal</SelectItem>
+            </SelectContent>
+          </Select>
+          <Button variant="outline" size="icon">
+            <Filter className="h-4 w-4" />
+          </Button>
+        </div>
+      </div>
+
+      {/* Desktop View: Table */}
+      <div className="hidden rounded-md border bg-card md:block">
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead className="w-[40px]">
+                <Checkbox />
+              </TableHead>
+              <TableHead>Document No.</TableHead>
+              <TableHead className="w-[400px]">Subject</TableHead>
+              <TableHead>Type</TableHead>
+              <TableHead>From/To</TableHead>
+              <TableHead>Date</TableHead>
+              <TableHead>Status</TableHead>
+              <TableHead className="text-right">Actions</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {filteredData.map((item) => (
+              <TableRow key={item.id} className="cursor-pointer hover:bg-muted/50" onClick={() => router.push(`/correspondences/${item.id}`)}>
+                <TableCell onClick={(e) => e.stopPropagation()}>
+                  <Checkbox />
+                </TableCell>
+                <TableCell className="font-medium text-primary">
+                  {item.documentNumber}
+                  <div className="text-xs text-muted-foreground mt-0.5">{item.project}</div>
+                </TableCell>
+                <TableCell>
+                  <span className="line-clamp-2">{item.subject}</span>
+                </TableCell>
+                <TableCell>{item.type}</TableCell>
+                <TableCell>
+                  <div className="text-xs">
+                    <div className="text-muted-foreground">From: <span className="text-foreground font-medium">{item.from}</span></div>
+                    <div className="text-muted-foreground">To: <span className="text-foreground font-medium">{item.to}</span></div>
+                  </div>
+                </TableCell>
+                <TableCell>{item.date}</TableCell>
+                <TableCell>
+                  <Badge variant={getStatusVariant(item.status)}>{item.status}</Badge>
+                </TableCell>
+                <TableCell className="text-right">
+                  <DropdownMenu>
+                    <DropdownMenuTrigger asChild>
+                      <Button variant="ghost" className="h-8 w-8 p-0">
+                        <span className="sr-only">Open menu</span>
+                        <MoreHorizontal className="h-4 w-4" />
+                      </Button>
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent align="end">
+                      <DropdownMenuLabel>Actions</DropdownMenuLabel>
+                      <DropdownMenuItem onClick={(e) => { e.stopPropagation(); router.push(`/correspondences/${item.id}`); }}>
+                        View Details
+                      </DropdownMenuItem>
+                      <DropdownMenuItem>Download PDF</DropdownMenuItem>
+                      <DropdownMenuSeparator />
+                      <DropdownMenuItem>Create Transmittal</DropdownMenuItem>
+                    </DropdownMenuContent>
+                  </DropdownMenu>
+                </TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </div>
+
+      {/* Mobile View: Cards */}
+      <div className="grid gap-4 md:hidden">
+        {filteredData.map((item) => (
+          <Card key={item.id} onClick={() => router.push(`/correspondences/${item.id}`)}>
+            <CardHeader className="pb-2">
+              <div className="flex justify-between items-start">
+                <div className="flex flex-col">
+                  <Badge variant="outline" className="w-fit mb-2">{item.type}</Badge>
+                  <CardTitle className="text-base font-bold">{item.documentNumber}</CardTitle>
+                </div>
+                <Badge variant={getStatusVariant(item.status)}>{item.status}</Badge>
+              </div>
+            </CardHeader>
+            <CardContent className="pb-2 text-sm">
+              <p className="line-clamp-2 mb-3">{item.subject}</p>
+              <div className="grid grid-cols-2 gap-2 text-muted-foreground">
+                <div className="flex items-center gap-1">
+                  <FileText className="h-3 w-3" /> {item.project}
+                </div>
+                <div className="flex items-center gap-1">
+                  <Calendar className="h-3 w-3" /> {item.date}
+                </div>
+              </div>
+              <div className="mt-3 pt-3 border-t grid grid-cols-2 gap-2 text-xs">
+                <div>
+                  <span className="text-muted-foreground block">From</span>
+                  <span className="font-medium">{item.from}</span>
+                </div>
+                <div>
+                  <span className="text-muted-foreground block">To</span>
+                  <span className="font-medium">{item.to}</span>
+                </div>
+              </div>
+            </CardContent>
+            <CardFooter className="pt-2">
+              <Button variant="ghost" size="sm" className="w-full text-primary">
+                <Eye className="mr-2 h-4 w-4" /> View Details
+              </Button>
+            </CardFooter>
+          </Card>
+        ))}
+      </div>
+    </div>
+  );
+}

frontend/app/(dashboard)/dashboard/page.tsx

@@ -0,0 +1,67 @@
+// File: app/(dashboard)/dashboard/page.tsx
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { RecentActivity } from "@/components/dashboard/recent-activity";
+
+export default function DashboardPage() {
+  return (
+    <div className="flex flex-col gap-4">
+      {/* Header Section */}
+      <div className="flex items-center">
+        <h1 className="text-lg font-semibold md:text-2xl">Dashboard</h1>
+      </div>
+      
+      {/* KPI Cards Section */}
+      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
+        <Card>
+          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle className="text-sm font-medium">
+              เอกสารรออนุมัติ
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">12</div>
+            <p className="text-xs text-muted-foreground">
+              +2 จากเมื่อวาน
+            </p>
+          </CardContent>
+        </Card>
+        
+        <Card>
+          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle className="text-sm font-medium">
+              RFAs ที่กำลังดำเนินการ
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">24</div>
+            <p className="text-xs text-muted-foreground">
+              อยู่ในขั้นตอนตรวจสอบ
+            </p>
+          </CardContent>
+        </Card>
+        
+        {/* Add more KPI cards as needed */}
+      </div>
+
+      {/* Main Content Section (My Tasks + Recent Activity) */}
+      <div className="grid gap-4 md:gap-8 lg:grid-cols-3">
+        
+        {/* Content Area หลัก (My Tasks) กินพื้นที่ 2 ส่วน */}
+        <Card className="lg:col-span-2">
+          <CardHeader>
+            <CardTitle>งานของฉัน (My Tasks)</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="h-[300px] w-full rounded bg-muted/20 flex items-center justify-center text-muted-foreground">
+              Table Placeholder (My Tasks)
+            </div>
+          </CardContent>
+        </Card>
+
+        {/* Recent Activity กินพื้นที่ 1 ส่วนด้านขวา */}
+        <RecentActivity />
+        
+      </div>
+    </div>
+  );
+}

frontend/app/(dashboard)/layout.tsx

@@ -0,0 +1,25 @@
+// File: app/(dashboard)/layout.tsx
+import { Sidebar } from "@/components/layout/sidebar";
+import { Navbar } from "@/components/layout/navbar";
+import { DashboardShell } from "@/components/layout/dashboard-shell"; // Import Wrapper
+
+export default function DashboardLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <div className="relative min-h-screen bg-muted/10">
+      {/* Sidebar (Fixed Position) */}
+      <Sidebar />
+
+      {/* Main Content (Dynamic Margin) */}
+      <DashboardShell>
+        <Navbar />
+        <main className="flex-1 p-4 lg:p-6 overflow-x-hidden">
+          {children}
+        </main>
+      </DashboardShell>
+    </div>
+  );
+}

frontend/app/(dashboard)/profile/page.tsx

@@ -0,0 +1,285 @@
+// File: app/(dashboard)/profile/page.tsx
+"use client";
+
+import { useState } from "react";
+import { useSession } from "next-auth/react";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import * as z from "zod";
+import { Loader2, User, Shield, Bell } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Switch } from "@/components/ui/switch";
+import apiClient from "@/lib/api/client";
+
+// -----------------------------------------------------------------------------
+// Schemas
+// -----------------------------------------------------------------------------
+
+const passwordSchema = z
+  .object({
+    currentPassword: z.string().min(1, "กรุณาระบุรหัสผ่านปัจจุบัน"),
+    newPassword: z.string().min(8, "รหัสผ่านใหม่ต้องมีอย่างน้อย 8 ตัวอักษร"),
+    confirmPassword: z.string().min(1, "กรุณายืนยันรหัสผ่านใหม่"),
+  })
+  .refine((data) => data.newPassword === data.confirmPassword, {
+    message: "รหัสผ่านใหม่ไม่ตรงกัน",
+    path: ["confirmPassword"],
+  });
+
+type PasswordValues = z.infer<typeof passwordSchema>;
+
+export default function ProfilePage() {
+  const { data: session } = useSession();
+  const [isLoading, setIsLoading] = useState(false);
+
+  // --- Password Form Handling ---
+  const {
+    register,
+    handleSubmit,
+    reset,
+    formState: { errors },
+  } = useForm<PasswordValues>({
+    resolver: zodResolver(passwordSchema),
+  });
+
+  const onPasswordSubmit = async (data: PasswordValues) => {
+    setIsLoading(true);
+    try {
+      // เรียก API เปลี่ยนรหัสผ่าน
+      await apiClient.put("/users/change-password", {
+        currentPassword: data.currentPassword,
+        newPassword: data.newPassword,
+      });
+      
+      alert("เปลี่ยนรหัสผ่านสำเร็จ"); // ในอนาคตใช้ Toast
+      reset();
+    } catch (error) {
+      console.error(error);
+      alert("ไม่สามารถเปลี่ยนรหัสผ่านได้: รหัสผ่านปัจจุบันไม่ถูกต้อง");
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  // --- Notification State (Mockup) ---
+  // ในการใช้งานจริง ควรดึงค่าจาก API /users/preferences หรือ UserPreferenceService
+  const [notifyEmail, setNotifyEmail] = useState(true);
+  const [notifyLine, setNotifyLine] = useState(true);
+  const [digestMode, setDigestMode] = useState(false);
+
+  // Helper to get initials
+  const userName = session?.user?.name || "User";
+  const userInitials = userName
+    .split(" ")
+    .map((n) => n[0])
+    .join("")
+    .toUpperCase()
+    .substring(0, 2);
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <h3 className="text-lg font-medium">Profile & Settings</h3>
+        <p className="text-sm text-muted-foreground">
+          จัดการข้อมูลส่วนตัวและการตั้งค่าระบบของคุณ
+        </p>
+      </div>
+
+      <Tabs defaultValue="general" className="space-y-4">
+        <TabsList>
+          <TabsTrigger value="general" className="flex items-center gap-2">
+            <User className="h-4 w-4" />
+            General
+          </TabsTrigger>
+          <TabsTrigger value="security" className="flex items-center gap-2">
+            <Shield className="h-4 w-4" />
+            Security
+          </TabsTrigger>
+          <TabsTrigger value="notifications" className="flex items-center gap-2">
+            <Bell className="h-4 w-4" />
+            Notifications
+          </TabsTrigger>
+        </TabsList>
+
+        {/* 1. General Tab */}
+        <TabsContent value="general">
+          <Card>
+            <CardHeader>
+              <CardTitle>ข้อมูลทั่วไป</CardTitle>
+              <CardDescription>
+                ข้อมูลพื้นฐานของคุณที่แสดงในระบบ
+              </CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-6">
+              <div className="flex items-center gap-4">
+                <Avatar className="h-20 w-20">
+                  <AvatarImage src={session?.user?.image || ""} />
+                  <AvatarFallback className="text-lg">{userInitials}</AvatarFallback>
+                </Avatar>
+                <div>
+                  <h4 className="text-lg font-semibold">{userName}</h4>
+                  <p className="text-sm text-muted-foreground">{session?.user?.email}</p>
+                  <div className="mt-2 inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-primary text-primary-foreground hover:bg-primary/80">
+                    {session?.user?.role || "Member"}
+                  </div>
+                </div>
+              </div>
+
+              <div className="grid gap-4 md:grid-cols-2">
+                <div className="space-y-2">
+                  <Label>ชื่อจริง</Label>
+                  <Input defaultValue={userName.split(" ")[0]} disabled />
+                </div>
+                <div className="space-y-2">
+                  <Label>นามสกุล</Label>
+                  <Input defaultValue={userName.split(" ")[1] || ""} disabled />
+                </div>
+                <div className="space-y-2">
+                  <Label>อีเมล</Label>
+                  <Input defaultValue={session?.user?.email || ""} disabled />
+                </div>
+                <div className="space-y-2">
+                  <Label>หน่วยงาน / องค์กร</Label>
+                  {/* ในอนาคตดึงจาก Organization ID */}
+                  <Input defaultValue={`Organization ID: ${session?.user?.organizationId || "-"}`} disabled />
+                </div>
+              </div>
+            </CardContent>
+            {/* <CardFooter>
+              <Button>บันทึกการเปลี่ยนแปลง</Button> 
+            </CardFooter> 
+            */}
+          </Card>
+        </TabsContent>
+
+        {/* 2. Security Tab */}
+        <TabsContent value="security">
+          <Card>
+            <CardHeader>
+              <CardTitle>รหัสผ่าน</CardTitle>
+              <CardDescription>
+                เปลี่ยนรหัสผ่านเพื่อความปลอดภัยของบัญชี (ต้องมีอย่างน้อย 8 ตัวอักษร)
+              </CardDescription>
+            </CardHeader>
+            <form onSubmit={handleSubmit(onPasswordSubmit)}>
+              <CardContent className="space-y-4">
+                <div className="space-y-2">
+                  <Label htmlFor="currentPassword">รหัสผ่านปัจจุบัน</Label>
+                  <Input
+                    id="currentPassword"
+                    type="password"
+                    {...register("currentPassword")}
+                  />
+                  {errors.currentPassword && (
+                    <p className="text-xs text-destructive">{errors.currentPassword.message}</p>
+                  )}
+                </div>
+                <div className="space-y-2">
+                  <Label htmlFor="newPassword">รหัสผ่านใหม่</Label>
+                  <Input
+                    id="newPassword"
+                    type="password"
+                    {...register("newPassword")}
+                  />
+                  {errors.newPassword && (
+                    <p className="text-xs text-destructive">{errors.newPassword.message}</p>
+                  )}
+                </div>
+                <div className="space-y-2">
+                  <Label htmlFor="confirmPassword">ยืนยันรหัสผ่านใหม่</Label>
+                  <Input
+                    id="confirmPassword"
+                    type="password"
+                    {...register("confirmPassword")}
+                  />
+                  {errors.confirmPassword && (
+                    <p className="text-xs text-destructive">{errors.confirmPassword.message}</p>
+                  )}
+                </div>
+              </CardContent>
+              <CardFooter>
+                <Button type="submit" disabled={isLoading}>
+                  {isLoading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+                  เปลี่ยนรหัสผ่าน
+                </Button>
+              </CardFooter>
+            </form>
+          </Card>
+        </TabsContent>
+
+        {/* 3. Notifications Tab */}
+        <TabsContent value="notifications">
+          <Card>
+            <CardHeader>
+              <CardTitle>การแจ้งเตือน</CardTitle>
+              <CardDescription>
+                กำหนดช่องทางที่คุณต้องการรับข้อมูลข่าวสารจากระบบ
+              </CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-6">
+              <div className="flex items-center justify-between space-x-2">
+                <Label htmlFor="notify-email" className="flex flex-col space-y-1">
+                  <span>Email Notifications</span>
+                  <span className="font-normal text-xs text-muted-foreground">
+                    รับแจ้งเตือนงานใหม่และการอนุมัติผ่านทางอีเมล
+                  </span>
+                </Label>
+                <Switch
+                  id="notify-email"
+                  checked={notifyEmail}
+                  onCheckedChange={setNotifyEmail}
+                />
+              </div>
+              
+              <div className="flex items-center justify-between space-x-2">
+                <Label htmlFor="notify-line" className="flex flex-col space-y-1">
+                  <span>LINE Notifications</span>
+                  <span className="font-normal text-xs text-muted-foreground">
+                    รับแจ้งเตือนด่วนผ่าน LINE Official Account
+                  </span>
+                </Label>
+                <Switch
+                  id="notify-line"
+                  checked={notifyLine}
+                  onCheckedChange={setNotifyLine}
+                />
+              </div>
+
+              <div className="flex items-center justify-between space-x-2">
+                <Label htmlFor="digest-mode" className="flex flex-col space-y-1">
+                  <span>Digest Mode (รวมแจ้งเตือน)</span>
+                  <span className="font-normal text-xs text-muted-foreground">
+                    รับสรุปแจ้งเตือนวันละครั้ง แทนการแจ้งเตือนทันที (ลด Spam)
+                  </span>
+                </Label>
+                <Switch
+                  id="digest-mode"
+                  checked={digestMode}
+                  onCheckedChange={setDigestMode}
+                />
+              </div>
+            </CardContent>
+            <CardFooter>
+              <Button variant="outline" onClick={() => alert("บันทึกการตั้งค่าแจ้งเตือนแล้ว")}>
+                บันทึกการตั้งค่า
+              </Button>
+            </CardFooter>
+          </Card>
+        </TabsContent>
+      </Tabs>
+    </div>
+  );
+}

frontend/app/(dashboard)/projects/new/page.tsx

@@ -0,0 +1,240 @@
+// File: app/(dashboard)/projects/new/page.tsx
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import * as z from "zod";
+import { Loader2, ChevronLeft, Save } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import apiClient from "@/lib/api/client";
+
+// 1. กำหนด Schema สำหรับตรวจสอบข้อมูล (Validation)
+// อ้างอิงจาก Data Dictionary ตาราง projects
+const projectSchema = z.object({
+  project_code: z
+    .string()
+    .min(1, "กรุณาระบุรหัสโครงการ")
+    .max(50, "รหัสโครงการต้องไม่เกิน 50 ตัวอักษร")
+    .regex(/^[A-Z0-9-]+$/, "รหัสโครงการควรประกอบด้วยตัวอักษรภาษาอังกฤษตัวใหญ่ ตัวเลข หรือขีด (-) เท่านั้น"),
+  project_name: z
+    .string()
+    .min(1, "กรุณาระบุชื่อโครงการ")
+    .max(255, "ชื่อโครงการต้องไม่เกิน 255 ตัวอักษร"),
+  description: z.string().optional(), // ฟิลด์เสริม (อาจจะยังไม่มีใน DB แต่เผื่อไว้สำหรับ UI)
+  status: z.enum(["Active", "Inactive", "On Hold"]).default("Active"),
+  start_date: z.string().optional(),
+  end_date: z.string().optional(),
+});
+
+type ProjectValues = z.infer<typeof projectSchema>;
+
+export default function CreateProjectPage() {
+  const router = useRouter();
+  const [isLoading, setIsLoading] = useState(false);
+
+  // 2. ตั้งค่า React Hook Form
+  const {
+    register,
+    handleSubmit,
+    setValue, // ใช้สำหรับ manual set value (เช่น Select)
+    watch,    // ใช้ดูค่า (สำหรับ Debug หรือ Conditional Logic)
+    formState: { errors },
+  } = useForm<ProjectValues>({
+    resolver: zodResolver(projectSchema),
+    defaultValues: {
+      project_code: "",
+      project_name: "",
+      status: "Active",
+    },
+  });
+
+  // 3. ฟังก์ชัน Submit
+  async function onSubmit(data: ProjectValues) {
+    setIsLoading(true);
+    try {
+      // เรียก API สร้างโครงการ (Mockup URL)
+      // ใน Phase หลัง Backend จะเตรียม Endpoint POST /projects ไว้ให้
+      console.log("Submitting project data:", data);
+      
+      // จำลองการส่งข้อมูล (Artificial Delay)
+      await new Promise((resolve) => setTimeout(resolve, 1000));
+      
+      // await apiClient.post("/projects", data);
+
+      alert("สร้างโครงการสำเร็จ"); // TODO: เปลี่ยนเป็น Toast
+      router.push("/projects");
+      router.refresh();
+    } catch (error) {
+      console.error("Failed to create project:", error);
+      alert("เกิดข้อผิดพลาดในการสร้างโครงการ");
+    } finally {
+      setIsLoading(false);
+    }
+  }
+
+  return (
+    <div className="max-w-2xl mx-auto space-y-6">
+      {/* Header with Back Button */}
+      <div className="flex items-center gap-4">
+        <Button
+          variant="outline"
+          size="icon"
+          onClick={() => router.back()}
+          className="h-9 w-9"
+        >
+          <ChevronLeft className="h-5 w-5" />
+          <span className="sr-only">Back</span>
+        </Button>
+        <div>
+          <h2 className="text-2xl font-bold tracking-tight">Create New Project</h2>
+          <p className="text-muted-foreground">
+            สร้างโครงการใหม่เพื่อเริ่มบริหารจัดการสัญญาและเอกสาร
+          </p>
+        </div>
+      </div>
+
+      <form onSubmit={handleSubmit(onSubmit)}>
+        <Card>
+          <CardHeader>
+            <CardTitle>ข้อมูลโครงการ</CardTitle>
+            <CardDescription>
+              กรอกรายละเอียดสำคัญของโครงการ รหัสโครงการควรไม่ซ้ำกับที่มีอยู่
+            </CardDescription>
+          </CardHeader>
+          
+          <CardContent className="space-y-4">
+            {/* Project Code */}
+            <div className="space-y-2">
+              <Label htmlFor="project_code" className="after:content-['*'] after:ml-0.5 after:text-red-500">
+                รหัสโครงการ (Project Code)
+              </Label>
+              <Input
+                id="project_code"
+                placeholder="e.g. LCBP3-C1"
+                className={errors.project_code ? "border-destructive" : ""}
+                {...register("project_code")}
+                // แปลงเป็นตัวพิมพ์ใหญ่ให้อัตโนมัติเพื่อความเป็นระเบียบ
+                onChange={(e) => {
+                  e.target.value = e.target.value.toUpperCase();
+                  register("project_code").onChange(e);
+                }}
+              />
+              {errors.project_code ? (
+                <p className="text-xs text-destructive">{errors.project_code.message}</p>
+              ) : (
+                <p className="text-xs text-muted-foreground">
+                  ใช้ภาษาอังกฤษตัวพิมพ์ใหญ่ ตัวเลข และขีด (-) เท่านั้น
+                </p>
+              )}
+            </div>
+
+            {/* Project Name */}
+            <div className="space-y-2">
+              <Label htmlFor="project_name" className="after:content-['*'] after:ml-0.5 after:text-red-500">
+                ชื่อโครงการ (Project Name)
+              </Label>
+              <Input
+                id="project_name"
+                placeholder="ระบุชื่อโครงการฉบับเต็ม..."
+                className={errors.project_name ? "border-destructive" : ""}
+                {...register("project_name")}
+              />
+              {errors.project_name && (
+                <p className="text-xs text-destructive">{errors.project_name.message}</p>
+              )}
+            </div>
+
+            {/* Description */}
+            <div className="space-y-2">
+              <Label htmlFor="description">รายละเอียดเพิ่มเติม</Label>
+              <Textarea
+                id="description"
+                placeholder="คำอธิบายเกี่ยวกับขอบเขตงานของโครงการ..."
+                className="min-h-[100px]"
+                {...register("description")}
+              />
+            </div>
+
+            {/* Dates Row */}
+            <div className="grid gap-4 md:grid-cols-2">
+              <div className="space-y-2">
+                <Label htmlFor="start_date">วันที่เริ่มต้นสัญญา</Label>
+                <Input
+                  id="start_date"
+                  type="date"
+                  {...register("start_date")}
+                />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="end_date">วันที่สิ้นสุดสัญญา</Label>
+                <Input
+                  id="end_date"
+                  type="date"
+                  {...register("end_date")}
+                />
+              </div>
+            </div>
+
+            {/* Status Select */}
+            <div className="space-y-2">
+              <Label htmlFor="status">สถานะโครงการ</Label>
+              {/* เนื่องจาก Select ของ Shadcn เป็น Custom UI 
+                เราต้องใช้ onValueChange เพื่อเชื่อมกับ React Hook Form 
+              */}
+              <Select
+                onValueChange={(value: any) => setValue("status", value)}
+                defaultValue="Active"
+              >
+                <SelectTrigger>
+                  <SelectValue placeholder="เลือกสถานะ" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="Active">Active (กำลังดำเนินงาน)</SelectItem>
+                  <SelectItem value="On Hold">On Hold (ระงับชั่วคราว)</SelectItem>
+                  <SelectItem value="Inactive">Inactive (ปิดโครงการ)</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+          </CardContent>
+
+          <CardFooter className="flex justify-end gap-2 border-t p-4 bg-muted/50">
+            <Button 
+              type="button" 
+              variant="ghost" 
+              onClick={() => router.back()}
+              disabled={isLoading}
+            >
+              ยกเลิก
+            </Button>
+            <Button type="submit" disabled={isLoading}>
+              {isLoading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+              <Save className="mr-2 h-4 w-4" />
+              บันทึกข้อมูล
+            </Button>
+          </CardFooter>
+        </Card>
+      </form>
+    </div>
+  );
+}

frontend/app/(dashboard)/projects/page.tsx

@@ -0,0 +1,251 @@
+// File: app/(dashboard)/projects/page.tsx
+"use client";
+
+import { useState } from "react";
+import { Plus, Search, MoreHorizontal, Folder, Calendar, BarChart3 } from "lucide-react";
+import { useRouter } from "next/navigation";
+
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Badge } from "@/components/ui/badge";
+import { Progress } from "@/components/ui/progress";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardFooter,
+} from "@/components/ui/card";
+
+// Type สำหรับข้อมูล Project (Mockup ตาม Data Dictionary)
+type Project = {
+  id: number;
+  project_code: string;
+  project_name: string;
+  status: "Active" | "Completed" | "On Hold";
+  progress: number;
+  start_date: string;
+  end_date: string;
+  contractor_name: string;
+};
+
+// Mock Data
+const mockProjects: Project[] = [
+  {
+    id: 1,
+    project_code: "LCBP3",
+    project_name: "โครงการพัฒนาท่าเรือแหลมฉบัง ระยะที่ 3 (ส่วนที่ 1-4)",
+    status: "Active",
+    progress: 45,
+    start_date: "2021-01-01",
+    end_date: "2025-12-31",
+    contractor_name: "Multiple Contractors",
+  },
+  {
+    id: 2,
+    project_code: "LCBP3-C1",
+    project_name: "งานก่อสร้างงานทางทะเล (ส่วนที่ 1)",
+    status: "Active",
+    progress: 70,
+    start_date: "2021-06-01",
+    end_date: "2024-06-01",
+    contractor_name: "CNNC",
+  },
+  {
+    id: 3,
+    project_code: "LCBP3-C2",
+    project_name: "งานก่อสร้างอาคาร ท่าเทียบเรือ (ส่วนที่ 2)",
+    status: "Active",
+    progress: 15,
+    start_date: "2023-01-01",
+    end_date: "2026-01-01",
+    contractor_name: "ITD-NWR Joint Venture",
+  },
+];
+
+export default function ProjectsPage() {
+  const router = useRouter();
+  const [searchTerm, setSearchTerm] = useState("");
+
+  const filteredProjects = mockProjects.filter((project) =>
+    project.project_name.toLowerCase().includes(searchTerm.toLowerCase()) ||
+    project.project_code.toLowerCase().includes(searchTerm.toLowerCase())
+  );
+
+  const getStatusVariant = (status: string) => {
+    switch (status) {
+      case "Active": return "success"; // ใช้ variant ที่เรา custom ไว้ใน badge.tsx
+      case "Completed": return "default";
+      case "On Hold": return "warning";
+      default: return "secondary";
+    }
+  };
+
+  const handleCreateProject = () => {
+    router.push("/projects/new"); // อัปเดตเป็นลิงก์จริง
+  };
+
+  const handleViewDetails = (id: number) => {
+    router.push(`/projects/${id}`);
+  };
+
+  return (
+    <div className="space-y-6">
+      {/* Header */}
+      <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
+        <div>
+          <h2 className="text-2xl font-bold tracking-tight">Projects</h2>
+          <p className="text-muted-foreground">
+            จัดการโครงการ สัญญา และความคืบหน้า
+          </p>
+        </div>
+        <Button onClick={handleCreateProject} className="w-full md:w-auto">
+          <Plus className="mr-2 h-4 w-4" /> New Project
+        </Button>
+      </div>
+
+      {/* Filters */}
+      <div className="flex items-center space-x-2">
+        <div className="relative flex-1 md:max-w-sm">
+          <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
+          <Input
+            placeholder="Search projects..."
+            className="pl-8"
+            value={searchTerm}
+            onChange={(e) => setSearchTerm(e.target.value)}
+          />
+        </div>
+      </div>
+
+      {/* Desktop View: Table */}
+      <div className="hidden rounded-md border bg-card md:block">
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead className="w-[100px]">Code</TableHead>
+              <TableHead>Project Name</TableHead>
+              <TableHead>Contractor</TableHead>
+              <TableHead>Status</TableHead>
+              <TableHead className="w-[200px]">Progress</TableHead>
+              <TableHead className="text-right">Actions</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {filteredProjects.map((project) => (
+              <TableRow key={project.id} className="cursor-pointer hover:bg-muted/50" onClick={() => handleViewDetails(project.id)}>
+                <TableCell className="font-medium">{project.project_code}</TableCell>
+                <TableCell>
+                  <div className="flex flex-col">
+                    <span>{project.project_name}</span>
+                    <span className="text-xs text-muted-foreground">
+                      {project.start_date} - {project.end_date}
+                    </span>
+                  </div>
+                </TableCell>
+                <TableCell>{project.contractor_name}</TableCell>
+                <TableCell>
+                  <Badge variant={getStatusVariant(project.status)}>
+                    {project.status}
+                  </Badge>
+                </TableCell>
+                <TableCell>
+                  <div className="flex items-center gap-2">
+                    <Progress value={project.progress} className="h-2" />
+                    <span className="text-xs text-muted-foreground w-[30px] text-right">
+                      {project.progress}%
+                    </span>
+                  </div>
+                </TableCell>
+                <TableCell className="text-right">
+                  <DropdownMenu>
+                    <DropdownMenuTrigger asChild>
+                      <Button variant="ghost" className="h-8 w-8 p-0">
+                        <span className="sr-only">Open menu</span>
+                        <MoreHorizontal className="h-4 w-4" />
+                      </Button>
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent align="end">
+                      <DropdownMenuLabel>Actions</DropdownMenuLabel>
+                      <DropdownMenuItem onClick={(e) => { e.stopPropagation(); handleViewDetails(project.id); }}>
+                        View Details
+                      </DropdownMenuItem>
+                      <DropdownMenuItem onClick={(e) => { e.stopPropagation(); alert(`Manage Contracts for ${project.project_code}`); }}>
+                        Manage Contracts
+                      </DropdownMenuItem>
+                      <DropdownMenuSeparator />
+                      <DropdownMenuItem onClick={(e) => { e.stopPropagation(); alert(`Edit ${project.project_code}`); }}>
+                        Edit Project
+                      </DropdownMenuItem>
+                    </DropdownMenuContent>
+                  </DropdownMenu>
+                </TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </div>
+
+      {/* Mobile View: Cards */}
+      <div className="grid gap-4 md:hidden">
+        {filteredProjects.map((project) => (
+          <Card key={project.id} onClick={() => handleViewDetails(project.id)} className="cursor-pointer active:bg-muted/50">
+            <CardHeader className="pb-2">
+              <div className="flex justify-between items-start">
+                <div>
+                  <CardTitle className="text-base font-bold">{project.project_code}</CardTitle>
+                  <CardDescription className="mt-1 line-clamp-2">
+                    {project.project_name}
+                  </CardDescription>
+                </div>
+                <Badge variant={getStatusVariant(project.status)} className="shrink-0">
+                  {project.status}
+                </Badge>
+              </div>
+            </CardHeader>
+            <CardContent className="pb-2 space-y-4">
+              <div className="flex items-center gap-2 text-sm text-muted-foreground">
+                <Folder className="h-4 w-4" />
+                <span>{project.contractor_name}</span>
+              </div>
+              <div className="flex items-center gap-2 text-sm text-muted-foreground">
+                <Calendar className="h-4 w-4" />
+                <span>{project.start_date} - {project.end_date}</span>
+              </div>
+              <div className="space-y-1">
+                <div className="flex justify-between text-xs">
+                  <span className="text-muted-foreground flex items-center gap-1">
+                    <BarChart3 className="h-3 w-3" /> Progress
+                  </span>
+                  <span className="font-medium">{project.progress}%</span>
+                </div>
+                <Progress value={project.progress} className="h-2" />
+              </div>
+            </CardContent>
+            <CardFooter className="pt-2">
+              <Button variant="ghost" size="sm" className="w-full ml-auto">
+                View Details
+              </Button>
+            </CardFooter>
+          </Card>
+        ))}
+      </div>
+    </div>
+  );
+}

frontend/app/api/auth/[...nextauth]/route.ts

@@ -0,0 +1,4 @@
+// File: app/api/auth/[...nextauth]/route.ts
+import { GET, POST } from "@/lib/auth";
+
+export { GET, POST };

frontend/app/demo/page.tsx

@@ -0,0 +1,85 @@
+// File: app/demo/page.tsx
+
+"use client";
+
+import { ResponsiveDataTable, ColumnDef } from "@/components/custom/responsive-data-table";
+import { FileUploadZone, FileWithMeta } from "@/components/custom/file-upload-zone";
+import { WorkflowVisualizer, WorkflowStep } from "@/components/custom/workflow-visualizer";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+
+// --- Mock Data ---
+interface DocItem {
+  id: string;
+  title: string;
+  status: string;
+  date: string;
+}
+
+const mockData: DocItem[] = [
+  { id: "RFA-001", title: "แบบก่อสร้างฐานราก", status: "Approved", date: "2023-11-01" },
+  { id: "RFA-002", title: "วัสดุงานผนัง", status: "Pending", date: "2023-11-05" },
+];
+
+const columns: ColumnDef<DocItem>[] = [
+  { key: "id", header: "Document No." },
+  { key: "title", header: "Subject" },
+  { 
+    key: "status", 
+    header: "Status",
+    cell: (item) => (
+      <Badge variant={item.status === 'Approved' ? 'default' : 'secondary'}>
+        {item.status}
+      </Badge>
+    ) 
+  },
+  { key: "date", header: "Date" },
+];
+
+const mockSteps: WorkflowStep[] = [
+    { id: 1, label: "ผู้รับเหมา", subLabel: "Submit", status: "completed", date: "10/11/2023" },
+    { id: 2, label: "CSC", subLabel: "Review", status: "current" },
+    { id: 3, label: "Designer", subLabel: "Approve", status: "pending" },
+    { id: 4, label: "Owner", subLabel: "Acknowledge", status: "pending" },
+];
+
+export default function DemoPage() {
+  return (
+    <div className="container mx-auto py-10 space-y-10">
+      <section className="space-y-4">
+        <h2 className="text-2xl font-bold">1. Responsive Data Table</h2>
+        <ResponsiveDataTable 
+            data={mockData} 
+            columns={columns} 
+            keyExtractor={(i) => i.id}
+            renderMobileCard={(item) => (
+                <div className="border p-4 rounded-lg shadow-sm bg-card">
+                    <div className="flex justify-between items-center mb-2">
+                        <span className="font-bold">{item.id}</span>
+                        <Badge>{item.status}</Badge>
+                    </div>
+                    <p className="text-sm mb-2">{item.title}</p>
+                    <div className="text-xs text-muted-foreground text-right">{item.date}</div>
+                    <Button size="sm" className="w-full mt-2" variant="outline">View Detail</Button>
+                </div>
+            )}
+        />
+      </section>
+
+      <section className="space-y-4">
+        <h2 className="text-2xl font-bold">2. File Upload Zone</h2>
+        <FileUploadZone 
+            onFilesChanged={(files) => console.log("Files:", files)}
+            accept={[".pdf", ".jpg", ".png"]}
+        />
+      </section>
+
+      <section className="space-y-4">
+        <h2 className="text-2xl font-bold">3. Workflow Visualizer</h2>
+        <div className="border p-6 rounded-lg">
+             <WorkflowVisualizer steps={mockSteps} />
+        </div>
+      </section>
+    </div>
+  );
+}

frontend/app/globals copy.css

@@ -0,0 +1,85 @@
+/* File: app/globals.css */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    /* Base Color: Slate (Professional/Enterprise look) */
+    --background: 0 0% 100%;
+    --foreground: 222.2 84% 4.9%;
+
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 84% 4.9%;
+
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 84% 4.9%;
+
+    /* Primary: Brand Blue for Actions */
+    --primary: 221.2 83.2% 53.3%;
+    --primary-foreground: 210 40% 98%;
+
+    /* Secondary: Muted/Gray for secondary actions */
+    --secondary: 210 40% 96.1%;
+    --secondary-foreground: 222.2 47.4% 11.2%;
+
+    /* Muted: For disabled or subtle text */
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+
+    /* Accent: For hover states or highlights */
+    --accent: 210 40% 96.1%;
+    --accent-foreground: 222.2 47.4% 11.2%;
+
+    /* Destructive: For delete/danger actions */
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 210 40% 98%;
+
+    /* Borders & Inputs */
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+    --ring: 221.2 83.2% 53.3%;
+
+    --radius: 0.5rem;
+  }
+
+  .dark {
+    /* Dark Mode (Prepared for future use) */
+    --background: 222.2 84% 4.9%;
+    --foreground: 210 40% 98%;
+
+    --card: 222.2 84% 4.9%;
+    --card-foreground: 210 40% 98%;
+
+    --popover: 222.2 84% 4.9%;
+    --popover-foreground: 210 40% 98%;
+
+    --primary: 217.2 91.2% 59.8%;
+    --primary-foreground: 222.2 47.4% 11.2%;
+
+    --secondary: 217.2 32.6% 17.5%;
+    --secondary-foreground: 210 40% 98%;
+
+    --muted: 217.2 32.6% 17.5%;
+    --muted-foreground: 215 20.2% 65.1%;
+
+    --accent: 217.2 32.6% 17.5%;
+    --accent-foreground: 210 40% 98%;
+
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 210 40% 98%;
+
+    --border: 217.2 32.6% 17.5%;
+    --input: 217.2 32.6% 17.5%;
+    --ring: 212.7 26.8% 83.9%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

frontend/app/globals.css

@@ -0,0 +1,78 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer utilities {
+  .text-balance {
+    text-wrap: balance;
+  }
+}
+
+
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 222.2 84% 4.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 84% 4.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 84% 4.9%;
+    --primary: 222.2 47.4% 11.2%;
+    --primary-foreground: 210 40% 98%;
+    --secondary: 210 40% 96.1%;
+    --secondary-foreground: 222.2 47.4% 11.2%;
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+    --accent: 210 40% 96.1%;
+    --accent-foreground: 222.2 47.4% 11.2%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 210 40% 98%;
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+    --ring: 222.2 84% 4.9%;
+    --chart-1: 12 76% 61%;
+    --chart-2: 173 58% 39%;
+    --chart-3: 197 37% 24%;
+    --chart-4: 43 74% 66%;
+    --chart-5: 27 87% 67%;
+    --radius: 0.5rem;
+  }
+  .dark {
+    --background: 222.2 84% 4.9%;
+    --foreground: 210 40% 98%;
+    --card: 222.2 84% 4.9%;
+    --card-foreground: 210 40% 98%;
+    --popover: 222.2 84% 4.9%;
+    --popover-foreground: 210 40% 98%;
+    --primary: 210 40% 98%;
+    --primary-foreground: 222.2 47.4% 11.2%;
+    --secondary: 217.2 32.6% 17.5%;
+    --secondary-foreground: 210 40% 98%;
+    --muted: 217.2 32.6% 17.5%;
+    --muted-foreground: 215 20.2% 65.1%;
+    --accent: 217.2 32.6% 17.5%;
+    --accent-foreground: 210 40% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 210 40% 98%;
+    --border: 217.2 32.6% 17.5%;
+    --input: 217.2 32.6% 17.5%;
+    --ring: 212.7 26.8% 83.9%;
+    --chart-1: 220 70% 50%;
+    --chart-2: 160 60% 45%;
+    --chart-3: 30 80% 55%;
+    --chart-4: 280 65% 60%;
+    --chart-5: 340 75% 55%;
+  }
+}
+
+
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

frontend/app/layout copy.tsx

@@ -0,0 +1,32 @@
+// File: app/layout.tsx
+import type { Metadata } from "next";
+import { Inter } from "next/font/google";
+import "./globals.css"; // Import CSS Variables
+import { cn } from "@/lib/utils";
+
+const inter = Inter({ subsets: ["latin"] });
+
+export const metadata: Metadata = {
+  title: "LCBP3-DMS",
+  description: "Document Management System for Laem Chabang Port Phase 3",
+};
+
+interface RootLayoutProps {
+  children: React.ReactNode;
+}
+
+export default function RootLayout({ children }: RootLayoutProps) {
+  return (
+    <html lang="en" suppressHydrationWarning>
+      <head />
+      <body
+        className={cn(
+          "min-h-screen bg-background font-sans antialiased",
+          inter.className
+        )}
+      >
+        {children}
+      </body>
+    </html>
+  );
+}

frontend/app/layout.tsx

@@ -0,0 +1,38 @@
+// File: app/layout.tsx
+import type { Metadata } from "next";
+import { Inter } from "next/font/google";
+import "./globals.css";
+import { cn } from "@/lib/utils";
+import QueryProvider from "@/providers/query-provider";
+import SessionProvider from "@/providers/session-provider"; // ✅ Import เข้ามา
+
+const inter = Inter({ subsets: ["latin"] });
+
+export const metadata: Metadata = {
+  title: "LCBP3-DMS",
+  description: "Document Management System for Laem Chabang Port Phase 3",
+};
+
+interface RootLayoutProps {
+  children: React.ReactNode;
+}
+
+export default function RootLayout({ children }: RootLayoutProps) {
+  return (
+    <html lang="en" suppressHydrationWarning>
+      <head />
+      <body
+        className={cn(
+          "min-h-screen bg-background font-sans antialiased",
+          inter.className
+        )}
+      >
+        <SessionProvider> {/* ✅ หุ้มด้วย SessionProvider เป็นชั้นนอกสุด หรือใน body */}
+          <QueryProvider>
+            {children}
+          </QueryProvider>
+        </SessionProvider>
+      </body>
+    </html>
+  );
+}

frontend/app/page.tsx

@@ -0,0 +1,8 @@
+// File: app/page.tsx
+import { redirect } from "next/navigation";
+
+export default function RootPage() {
+  // เมื่อเข้าหน้าแรก ให้ Redirect ไปที่ /dashboard ทันที
+  // ซึ่งถ้ายังไม่ Login -> Middleware จะดีดไปหน้า /login ให้เอง
+  redirect("/dashboard");
+}