251210:1709 Frontend: reeactor organization and run build

2025-12-10 17:09:11 +07:00
parent aa96cd90e3
commit c8a0f281ef
140 changed files with 3780 additions and 1473 deletions
--- a/frontend/app/(dashboard)/circulation/new/page.tsx
+++ b/frontend/app/(dashboard)/circulation/new/page.tsx
@@ -45,7 +45,7 @@ import { cn } from "@/lib/utils";

 // Form validation schema
 const formSchema = z.object({
-  correspondenceId: z.number({ required_error: "Please select a document" }),
+  correspondenceId: z.number(),
  subject: z.string().min(1, "Subject is required"),
  assigneeIds: z.array(z.number()).min(1, "At least one assignee is required"),
  remarks: z.string().optional(),
@@ -156,7 +156,7 @@ export default function CreateCirculationPage() {
                            )}
                          >
                            {selectedDoc
-                              ? selectedDoc.correspondence_number
+                              ? selectedDoc.correspondenceNumber
                              : "Select document..."}
                            <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
                          </Button>
@@ -168,10 +168,10 @@ export default function CreateCirculationPage() {
                          <CommandList>
                            <CommandEmpty>No document found.</CommandEmpty>
                            <CommandGroup>
-                              {correspondences?.data?.map((doc: { id: number; correspondence_number: string }) => (
+                              {correspondences?.data?.map((doc: { id: number; correspondenceNumber: string }) => (
                                <CommandItem
                                  key={doc.id}
-                                  value={doc.correspondence_number}
+                                  value={doc.correspondenceNumber}
                                  onSelect={() => {
                                    form.setValue("correspondenceId", doc.id);
                                    setDocOpen(false);
@@ -185,7 +185,7 @@ export default function CreateCirculationPage() {
                                        : "opacity-0"
                                    )}
                                  />
-                                  {doc.correspondence_number}
+                                  {doc.correspondenceNumber}
                                </CommandItem>
                              ))}
                            </CommandGroup>
@@ -232,7 +232,7 @@ export default function CreateCirculationPage() {
                              <div className="flex flex-wrap gap-1">
                                {selectedAssignees.map((userId) => {
                                  const user = users.find(
-                                    (u: { user_id: number }) => u.user_id === userId
+                                    (u: { userId: number }) => u.userId === userId
                                  );
                                  return user ? (
                                    <Badge
@@ -240,7 +240,7 @@ export default function CreateCirculationPage() {
                                      variant="secondary"
                                      className="mr-1"
                                    >
-                                      {user.first_name || user.username}
+                                      {user.firstName || user.username}
                                      <X
                                        className="ml-1 h-3 w-3 cursor-pointer"
                                        onClick={(e) => {
@@ -267,22 +267,22 @@ export default function CreateCirculationPage() {
                          <CommandList>
                            <CommandEmpty>No user found.</CommandEmpty>
                            <CommandGroup>
-                              {users.map((user: { user_id: number; username: string; first_name?: string; last_name?: string }) => (
+                              {users.map((user: { userId: number; username: string; firstName?: string; lastName?: string }) => (
                                <CommandItem
-                                  key={user.user_id}
+                                  key={user.userId}
                                  value={user.username}
-                                  onSelect={() => toggleAssignee(user.user_id)}
+                                  onSelect={() => toggleAssignee(user.userId)}
                                >
                                  <Check
                                    className={cn(
                                      "mr-2 h-4 w-4",
-                                      selectedAssignees.includes(user.user_id)
+                                      selectedAssignees.includes(user.userId)
                                        ? "opacity-100"
                                        : "opacity-0"
                                    )}
                                  />
-                                  {user.first_name && user.last_name
-                                    ? `${user.first_name} ${user.last_name}`
+                                  {user.firstName && user.lastName
+                                    ? `${user.firstName} ${user.lastName}`
                                    : user.username}
                                </CommandItem>
                              ))}
--- a/frontend/app/(dashboard)/correspondences/[id]/page.tsx
+++ b/frontend/app/(dashboard)/correspondences/[id]/page.tsx
@@ -2,6 +2,8 @@ import { correspondenceApi } from "@/lib/api/correspondences";
 import { CorrespondenceDetail } from "@/components/correspondences/detail";
 import { notFound } from "next/navigation";

+export const dynamic = "force-dynamic";
+
 export default async function CorrespondenceDetailPage({
  params,
 }: {
--- a/frontend/app/(dashboard)/correspondences/page.tsx
+++ b/frontend/app/(dashboard)/correspondences/page.tsx
@@ -1,25 +1,12 @@
-"use client";
-
-import { CorrespondenceList } from "@/components/correspondences/list";
+import { Suspense } from "react";
 import { Button } from "@/components/ui/button";
 import Link from "next/link";
-import { Plus, Loader2 } from "lucide-react"; // Added Loader2
-import { Pagination } from "@/components/common/pagination";
-import { useCorrespondences } from "@/hooks/use-correspondence";
-import { useSearchParams } from "next/navigation";
+import { Plus, Loader2 } from "lucide-react";
+import { CorrespondencesContent } from "@/components/correspondences/correspondences-content";
+
+export const dynamic = "force-dynamic";

 export default function CorrespondencesPage() {
-  const searchParams = useSearchParams();
-  const page = parseInt(searchParams.get("page") || "1");
-  const status = searchParams.get("status") || undefined;
-  const search = searchParams.get("search") || undefined;
-
-  const { data, isLoading, isError } = useCorrespondences({
-    page,
-    status, // This might be wrong type, let's cast or omit for now
-    search,
-  } as any);
-
  return (
    <div className="space-y-6">
      <div className="flex justify-between items-center">
@@ -37,29 +24,9 @@ export default function CorrespondencesPage() {
        </Link>
      </div>

-      {/* Filters component could go here */}
-
-      {isLoading ? (
-        <div className="flex justify-center py-8">
-          <Loader2 className="h-8 w-8 animate-spin" />
-        </div>
-      ) : isError ? (
-        <div className="text-red-500 text-center py-8">
-          Failed to load correspondences.
-        </div>
-      ) : (
-        <>
-          <CorrespondenceList data={data} />
-
-          <div className="mt-4">
-            <Pagination
-              currentPage={data?.page || 1}
-              totalPages={data?.totalPages || 1}
-              total={data?.total || 0}
-            />
-          </div>
-        </>
-      )}
+      <Suspense fallback={<div className="flex justify-center py-8"><Loader2 className="h-8 w-8 animate-spin" /></div>}>
+        <CorrespondencesContent />
+      </Suspense>
    </div>
  );
 }
--- a/frontend/app/(dashboard)/drawings/[id]/page.tsx
+++ b/frontend/app/(dashboard)/drawings/[id]/page.tsx
@@ -36,7 +36,7 @@ export default async function DrawingDetailPage({
            </Button>
          </Link>
          <div>
-            <h1 className="text-2xl font-bold">{drawing.drawing_number}</h1>
+            <h1 className="text-2xl font-bold">{drawing.drawingNumber}</h1>
            <p className="text-muted-foreground">
              {drawing.title}
            </p>
@@ -48,7 +48,7 @@ export default async function DrawingDetailPage({
            <Download className="mr-2 h-4 w-4" />
            Download Current
          </Button>
-          {drawing.revision_count > 1 && (
+          {(drawing.revisionCount ?? 0) > 1 && (
            <Button variant="outline">
              <GitCompare className="mr-2 h-4 w-4" />
              Compare Revisions
@@ -71,11 +71,15 @@ export default async function DrawingDetailPage({
              <div className="grid grid-cols-2 gap-6">
                <div>
                  <p className="text-sm font-medium text-muted-foreground">Discipline</p>
-                  <p className="font-medium mt-1">{drawing.discipline?.discipline_name} ({drawing.discipline?.discipline_code})</p>
+                  <p className="font-medium mt-1">
+                    {typeof drawing.discipline === 'object' && drawing.discipline
+                      ? `${drawing.discipline.disciplineName} (${drawing.discipline.disciplineCode})`
+                      : drawing.discipline || 'N/A'}
+                  </p>
                </div>
                <div>
                  <p className="text-sm font-medium text-muted-foreground">Sheet Number</p>
-                  <p className="font-medium mt-1">{drawing.sheet_number}</p>
+                  <p className="font-medium mt-1">{drawing.sheetNumber}</p>
                </div>
                <div>
                  <p className="text-sm font-medium text-muted-foreground">Scale</p>
@@ -83,7 +87,7 @@ export default async function DrawingDetailPage({
                </div>
                <div>
                  <p className="text-sm font-medium text-muted-foreground">Latest Issue Date</p>
-                  <p className="font-medium mt-1">{format(new Date(drawing.issue_date), "dd MMM yyyy")}</p>
+                  <p className="font-medium mt-1">{drawing.issueDate ? format(new Date(drawing.issueDate), "dd MMM yyyy") : 'N/A'}</p>
                </div>
              </div>

--- a/frontend/app/(dashboard)/projects/new/page.tsx
+++ b/frontend/app/(dashboard)/projects/new/page.tsx
@@ -32,19 +32,19 @@ import apiClient from "@/lib/api/client";
 // 1. กำหนด Schema สำหรับตรวจสอบข้อมูล (Validation)
 // อ้างอิงจาก Data Dictionary ตาราง projects
 const projectSchema = z.object({
-  project_code: z
+  projectCode: z
    .string()
    .min(1, "กรุณาระบุรหัสโครงการ")
    .max(50, "รหัสโครงการต้องไม่เกิน 50 ตัวอักษร")
    .regex(/^[A-Z0-9-]+$/, "รหัสโครงการควรประกอบด้วยตัวอักษรภาษาอังกฤษตัวใหญ่ ตัวเลข หรือขีด (-) เท่านั้น"),
-  project_name: z
+  projectName: 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(),
+  description: z.string().optional(),
+  status: z.enum(["Active", "Inactive", "On Hold"]),
+  startDate: z.string().optional(),
+  endDate: z.string().optional(),
 });

 type ProjectValues = z.infer<typeof projectSchema>;
@@ -63,8 +63,8 @@ export default function CreateProjectPage() {
  } = useForm<ProjectValues>({
    resolver: zodResolver(projectSchema),
    defaultValues: {
-      project_code: "",
-      project_name: "",
+      projectCode: "",
+      projectName: "",
      status: "Active",
    },
  });
@@ -76,10 +76,10 @@ export default function CreateProjectPage() {
      // เรียก 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
@@ -122,7 +122,7 @@ export default function CreateProjectPage() {
              กรอกรายละเอียดสำคัญของโครงการ รหัสโครงการควรไม่ซ้ำกับที่มีอยู่
            </CardDescription>
          </CardHeader>
-          
+
          <CardContent className="space-y-4">
            {/* Project Code */}
            <div className="space-y-2">
@@ -132,16 +132,15 @@ export default function CreateProjectPage() {
              <Input
                id="project_code"
                placeholder="e.g. LCBP3-C1"
-                className={errors.project_code ? "border-destructive" : ""}
-                {...register("project_code")}
-                // แปลงเป็นตัวพิมพ์ใหญ่ให้อัตโนมัติเพื่อความเป็นระเบียบ
+                className={errors.projectCode ? "border-destructive" : ""}
+                {...register("projectCode")}
                onChange={(e) => {
                  e.target.value = e.target.value.toUpperCase();
-                  register("project_code").onChange(e);
+                  register("projectCode").onChange(e);
                }}
              />
-              {errors.project_code ? (
-                <p className="text-xs text-destructive">{errors.project_code.message}</p>
+              {errors.projectCode ? (
+                <p className="text-xs text-destructive">{errors.projectCode.message}</p>
              ) : (
                <p className="text-xs text-muted-foreground">
                  ใช้ภาษาอังกฤษตัวพิมพ์ใหญ่ ตัวเลข และขีด (-) เท่านั้น
@@ -157,11 +156,11 @@ export default function CreateProjectPage() {
              <Input
                id="project_name"
                placeholder="ระบุชื่อโครงการฉบับเต็ม..."
-                className={errors.project_name ? "border-destructive" : ""}
-                {...register("project_name")}
+                className={errors.projectName ? "border-destructive" : ""}
+                {...register("projectName")}
              />
-              {errors.project_name && (
-                <p className="text-xs text-destructive">{errors.project_name.message}</p>
+              {errors.projectName && (
+                <p className="text-xs text-destructive">{errors.projectName.message}</p>
              )}
            </div>

@@ -183,7 +182,7 @@ export default function CreateProjectPage() {
                <Input
                  id="start_date"
                  type="date"
-                  {...register("start_date")}
+                  {...register("startDate")}
                />
              </div>
              <div className="space-y-2">
@@ -191,7 +190,7 @@ export default function CreateProjectPage() {
                <Input
                  id="end_date"
                  type="date"
-                  {...register("end_date")}
+                  {...register("endDate")}
                />
              </div>
            </div>
@@ -199,8 +198,8 @@ export default function CreateProjectPage() {
            {/* Status Select */}
            <div className="space-y-2">
              <Label htmlFor="status">สถานะโครงการ</Label>
-              {/* เนื่องจาก Select ของ Shadcn เป็น Custom UI 
-                เราต้องใช้ onValueChange เพื่อเชื่อมกับ React Hook Form 
+              {/* เนื่องจาก Select ของ Shadcn เป็น Custom UI
+                เราต้องใช้ onValueChange เพื่อเชื่อมกับ React Hook Form
              */}
              <Select
                onValueChange={(value: any) => setValue("status", value)}
@@ -219,9 +218,9 @@ export default function CreateProjectPage() {
          </CardContent>

          <CardFooter className="flex justify-end gap-2 border-t p-4 bg-muted/50">
-            <Button 
-              type="button" 
-              variant="ghost" 
+            <Button
+              type="button"
+              variant="ghost"
              onClick={() => router.back()}
              disabled={isLoading}
            >
@@ -237,4 +236,4 @@ export default function CreateProjectPage() {
      </form>
    </div>
  );
-}
+}
--- a/frontend/app/(dashboard)/projects/page.tsx
+++ b/frontend/app/(dashboard)/projects/page.tsx
@@ -35,48 +35,48 @@ import {
 } from "@/components/ui/card";

 // Type สำหรับข้อมูล Project (Mockup ตาม Data Dictionary)
-type Project = {
+interface Project {
  id: number;
-  project_code: string;
-  project_name: string;
+  projectCode: string;
+  projectName: string;
  status: "Active" | "Completed" | "On Hold";
  progress: number;
-  start_date: string;
-  end_date: string;
-  contractor_name: string;
-};
+  startDate: string;
+  endDate: string;
+  contractorName: string;
+}

 // Mock Data
 const mockProjects: Project[] = [
  {
    id: 1,
-    project_code: "LCBP3",
-    project_name: "โครงการพัฒนาท่าเรือแหลมฉบัง ระยะที่ 3 (ส่วนที่ 1-4)",
+    projectCode: "LCBP3",
+    projectName: "โครงการพัฒนาท่าเรือแหลมฉบัง ระยะที่ 3 (ส่วนที่ 1-4)",
    status: "Active",
    progress: 45,
-    start_date: "2021-01-01",
-    end_date: "2025-12-31",
-    contractor_name: "Multiple Contractors",
+    startDate: "2021-01-01",
+    endDate: "2025-12-31",
+    contractorName: "Multiple Contractors",
  },
  {
    id: 2,
-    project_code: "LCBP3-C1",
-    project_name: "งานก่อสร้างงานทางทะเล (ส่วนที่ 1)",
+    projectCode: "LCBP3-C1",
+    projectName: "งานก่อสร้างงานทางทะเล (ส่วนที่ 1)",
    status: "Active",
    progress: 70,
-    start_date: "2021-06-01",
-    end_date: "2024-06-01",
-    contractor_name: "CNNC",
+    startDate: "2021-06-01",
+    endDate: "2024-06-01",
+    contractorName: "CNNC",
  },
  {
    id: 3,
-    project_code: "LCBP3-C2",
-    project_name: "งานก่อสร้างอาคาร ท่าเทียบเรือ (ส่วนที่ 2)",
+    projectCode: "LCBP3-C2",
+    projectName: "งานก่อสร้างอาคาร ท่าเทียบเรือ (ส่วนที่ 2)",
    status: "Active",
    progress: 15,
-    start_date: "2023-01-01",
-    end_date: "2026-01-01",
-    contractor_name: "ITD-NWR Joint Venture",
+    startDate: "2023-01-01",
+    endDate: "2026-01-01",
+    contractorName: "ITD-NWR Joint Venture",
  },
 ];

@@ -85,8 +85,8 @@ export default function ProjectsPage() {
  const [searchTerm, setSearchTerm] = useState("");

  const filteredProjects = mockProjects.filter((project) =>
-    project.project_name.toLowerCase().includes(searchTerm.toLowerCase()) ||
-    project.project_code.toLowerCase().includes(searchTerm.toLowerCase())
+    project.projectName.toLowerCase().includes(searchTerm.toLowerCase()) ||
+    project.projectCode.toLowerCase().includes(searchTerm.toLowerCase())
  );

  const getStatusVariant = (status: string) => {
@@ -150,16 +150,16 @@ export default function ProjectsPage() {
          <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 className="font-medium">{project.projectCode}</TableCell>
                <TableCell>
                  <div className="flex flex-col">
-                    <span>{project.project_name}</span>
+                    <span>{project.projectName}</span>
                    <span className="text-xs text-muted-foreground">
-                      {project.start_date} - {project.end_date}
+                      {project.startDate} - {project.endDate}
                    </span>
                  </div>
                </TableCell>
-                <TableCell>{project.contractor_name}</TableCell>
+                <TableCell>{project.contractorName}</TableCell>
                <TableCell>
                  <Badge variant={getStatusVariant(project.status)}>
                    {project.status}
@@ -186,11 +186,11 @@ export default function ProjectsPage() {
                      <DropdownMenuItem onClick={(e) => { e.stopPropagation(); handleViewDetails(project.id); }}>
                        View Details
                      </DropdownMenuItem>
-                      <DropdownMenuItem onClick={(e) => { e.stopPropagation(); alert(`Manage Contracts for ${project.project_code}`); }}>
+                      <DropdownMenuItem onClick={(e) => { e.stopPropagation(); alert(`Manage Contracts for ${project.projectCode}`); }}>
                        Manage Contracts
                      </DropdownMenuItem>
                      <DropdownMenuSeparator />
-                      <DropdownMenuItem onClick={(e) => { e.stopPropagation(); alert(`Edit ${project.project_code}`); }}>
+                      <DropdownMenuItem onClick={(e) => { e.stopPropagation(); alert(`Edit ${project.projectCode}`); }}>
                        Edit Project
                      </DropdownMenuItem>
                    </DropdownMenuContent>
@@ -209,9 +209,9 @@ export default function ProjectsPage() {
            <CardHeader className="pb-2">
              <div className="flex justify-between items-start">
                <div>
-                  <CardTitle className="text-base font-bold">{project.project_code}</CardTitle>
+                  <CardTitle className="text-base font-bold">{project.projectCode}</CardTitle>
                  <CardDescription className="mt-1 line-clamp-2">
-                    {project.project_name}
+                    {project.projectName}
                  </CardDescription>
                </div>
                <Badge variant={getStatusVariant(project.status)} className="shrink-0">
@@ -222,11 +222,11 @@ export default function ProjectsPage() {
            <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>
+                <span>{project.contractorName}</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>
+                <span>{project.startDate} - {project.endDate}</span>
              </div>
              <div className="space-y-1">
                <div className="flex justify-between text-xs">
@@ -248,4 +248,4 @@ export default function ProjectsPage() {
      </div>
    </div>
  );
-}
+}
--- a/frontend/app/(dashboard)/projects/page_backup.tsx
+++ b/frontend/app/(dashboard)/projects/page_backup.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)
+interface Project {
+  id: number;
+  projectCode: string;
+  projectName: string;
+  status: "Active" | "Completed" | "On Hold";
+  progress: number;
+  startDate: string;
+  endDate: string;
+  contractorName: string;
+}
+
+// Mock Data
+const mockProjects: Project[] = [
+  {
+    id: 1,
+    projectCode: "LCBP3",
+    projectName: "โครงการพัฒนาท่าเรือแหลมฉบัง ระยะที่ 3 (ส่วนที่ 1-4)",
+    status: "Active",
+    progress: 45,
+    startDate: "2021-01-01",
+    endDate: "2025-12-31",
+    contractorName: "Multiple Contractors",
+  },
+  {
+    id: 2,
+    projectCode: "LCBP3-C1",
+    projectName: "งานก่อสร้างงานทางทะเล (ส่วนที่ 1)",
+    status: "Active",
+    progress: 70,
+    startDate: "2021-06-01",
+    endDate: "2024-06-01",
+    contractorName: "CNNC",
+  },
+  {
+    id: 3,
+    projectCode: "LCBP3-C2",
+    projectName: "งานก่อสร้างอาคาร ท่าเทียบเรือ (ส่วนที่ 2)",
+    status: "Active",
+    progress: 15,
+    startDate: "2023-01-01",
+    endDate: "2026-01-01",
+    contractorName: "ITD-NWR Joint Venture",
+  },
+];
+
+export default function ProjectsPage() {
+  const router = useRouter();
+  const [searchTerm, setSearchTerm] = useState("");
+
+  const filteredProjects = mockProjects.filter((project) =>
+    project.projectName.toLowerCase().includes(searchTerm.toLowerCase()) ||
+    project.projectCode.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.projectCode}</TableCell>
+                <TableCell>
+                  <div className="flex flex-col">
+                    <span>{project.projectName}</span>
+                    <span className="text-xs text-muted-foreground">
+                      {project.startDate} - {project.endDate}
+                    </span>
+                  </div>
+                </TableCell>
+                <TableCell>{project.contractorName}</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.projectCode}`); }}>
+                        Manage Contracts
+                      </DropdownMenuItem>
+                      <DropdownMenuSeparator />
+                      <DropdownMenuItem onClick={(e) => { e.stopPropagation(); alert(`Edit ${project.projectCode}`); }}>
+                        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.projectCode}</CardTitle>
+                  <CardDescription className="mt-1 line-clamp-2">
+                    {project.projectName}
+                  </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.contractorName}</span>
+              </div>
+              <div className="flex items-center gap-2 text-sm text-muted-foreground">
+                <Calendar className="h-4 w-4" />
+                <span>{project.startDate} - {project.endDate}</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>
+  );
+}
--- a/frontend/app/(dashboard)/rfas/page.tsx
+++ b/frontend/app/(dashboard)/rfas/page.tsx
@@ -7,32 +7,19 @@ import { Plus, Loader2 } from 'lucide-react';
 import { useRFAs } from '@/hooks/use-rfa';
 import { useSearchParams } from 'next/navigation';
 import { Pagination } from '@/components/common/pagination';
+import { Suspense } from 'react';

-export default function RFAsPage() {
+function RFAsContent() {
  const searchParams = useSearchParams();
  const page = parseInt(searchParams.get('page') || '1');
-  const status = searchParams.get('status') || undefined;
+  const statusId = searchParams.get('status') ? parseInt(searchParams.get('status')!) : undefined;
  const search = searchParams.get('search') || undefined;
+  const projectId = searchParams.get('projectId') ? parseInt(searchParams.get('projectId')!) : undefined;

-  const { data, isLoading, isError } = useRFAs({ page, status, search });
+  const { data, isLoading, isError } = useRFAs({ page, statusId, search, projectId });

  return (
-    <div className="space-y-6">
-      <div className="flex justify-between items-center">
-        <div>
-          <h1 className="text-3xl font-bold">RFAs (Request for Approval)</h1>
-          <p className="text-muted-foreground mt-1">
-            Manage approval requests and submissions
-          </p>
-        </div>
-        <Link href="/rfas/new">
-          <Button>
-            <Plus className="mr-2 h-4 w-4" />
-            New RFA
-          </Button>
-        </Link>
-      </div>
-
+    <>
      {/* RFAFilters component could be added here if needed */}

      {isLoading ? (
@@ -55,6 +42,35 @@ export default function RFAsPage() {
          </div>
        </>
      )}
+    </>
+  );
+}
+
+export default function RFAsPage() {
+  return (
+    <div className="space-y-6">
+      <div className="flex justify-between items-center">
+        <div>
+          <h1 className="text-3xl font-bold">RFAs (Request for Approval)</h1>
+          <p className="text-muted-foreground mt-1">
+            Manage approval requests and submissions
+          </p>
+        </div>
+        <Link href="/rfas/new">
+          <Button>
+            <Plus className="mr-2 h-4 w-4" />
+            New RFA
+          </Button>
+        </Link>
+      </div>
+
+      <Suspense fallback={
+        <div className="flex justify-center py-8">
+          <Loader2 className="h-8 w-8 animate-spin" />
+        </div>
+      }>
+        <RFAsContent />
+      </Suspense>
    </div>
  );
 }
--- a/frontend/app/(dashboard)/search/page.tsx
+++ b/frontend/app/(dashboard)/search/page.tsx
@@ -1,13 +1,14 @@
 "use client";

-import { useState } from "react";
+import { useState, Suspense } from "react";
 import { useSearchParams } from "next/navigation";
 import { SearchFilters } from "@/components/search/filters";
 import { SearchResults } from "@/components/search/results";
 import { SearchFilters as FilterType } from "@/types/search";
 import { useSearch } from "@/hooks/use-search";
+import { Loader2 } from "lucide-react";

-export default function SearchPage() {
+function SearchContent() {
  const searchParams = useSearchParams();

  // URL Params state
@@ -43,7 +44,7 @@ export default function SearchPage() {
  };

  return (
-    <div className="space-y-6">
+    <>
      <div>
        <h1 className="text-3xl font-bold">Search Results</h1>
        <p className="text-muted-foreground mt-1">
@@ -67,6 +68,20 @@ export default function SearchPage() {
          )}
        </div>
      </div>
+    </>
+  );
+}
+
+export default function SearchPage() {
+  return (
+    <div className="space-y-6">
+      <Suspense fallback={
+        <div className="flex justify-center py-8">
+          <Loader2 className="h-8 w-8 animate-spin" />
+        </div>
+      }>
+        <SearchContent />
+      </Suspense>
    </div>
  );
 }