260322:1648 Correct Coresspondence / Doing RFA / Correct CI

2026-03-22 16:48:12 +07:00
parent e5deedb42e
commit 11984bfa29
683 changed files with 105251 additions and 29068 deletions
@@ -1,33 +1,20 @@
 // File: app/(dashboard)/projects/new/page.tsx
-"use client";
+'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 { 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 { toast } from "sonner";
+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 { toast } from 'sonner';

 // Force dynamic rendering to prevent build-time prerendering issues
 export const dynamic = 'force-dynamic';
@@ -40,15 +27,12 @@ export const fetchCache = 'force-no-store';
 const projectSchema = z.object({
  projectCode: z
    .string()
-    .min(1, "กรุณาระบุรหัสโครงการ")
-    .max(50, "รหัสโครงการต้องไม่เกิน 50 ตัวอักษร")
-    .regex(/^[A-Z0-9-]+$/, "รหัสโครงการควรประกอบด้วยตัวอักษรภาษาอังกฤษตัวใหญ่ ตัวเลข หรือขีด (-) เท่านั้น"),
-  projectName: z
-    .string()
-    .min(1, "กรุณาระบุชื่อโครงการ")
-    .max(255, "ชื่อโครงการต้องไม่เกิน 255 ตัวอักษร"),
+    .min(1, 'กรุณาระบุรหัสโครงการ')
+    .max(50, 'รหัสโครงการต้องไม่เกิน 50 ตัวอักษร')
+    .regex(/^[A-Z0-9-]+$/, 'รหัสโครงการควรประกอบด้วยตัวอักษรภาษาอังกฤษตัวใหญ่ ตัวเลข หรือขีด (-) เท่านั้น'),
+  projectName: z.string().min(1, 'กรุณาระบุชื่อโครงการ').max(255, 'ชื่อโครงการต้องไม่เกิน 255 ตัวอักษร'),
  description: z.string().optional(),
-  status: z.enum(["Active", "Inactive", "On Hold"]),
+  status: z.enum(['Active', 'Inactive', 'On Hold']),
  startDate: z.string().optional(),
  endDate: z.string().optional(),
 });
@@ -68,14 +52,14 @@ export default function CreateProjectPage() {
  } = useForm<ProjectValues>({
    resolver: zodResolver(projectSchema),
    defaultValues: {
-      projectCode: "",
-      projectName: "",
-      status: "Active",
+      projectCode: '',
+      projectName: '',
+      status: 'Active',
    },
  });

  // 3. ฟังก์ชัน Submit
-  async function onSubmit(data: ProjectValues) {
+  async function onSubmit(_data: ProjectValues) {
    setIsLoading(true);
    try {
      // เรียก API สร้างโครงการ (Mockup URL)
@@ -89,7 +73,7 @@ export default function CreateProjectPage() {
      toast.success('สร้างโครงการสำเร็จ');
      router.push('/projects');
      router.refresh();
-    } catch (error) {
+    } catch (_error) {
      toast.error('เกิดข้อผิดพลาดในการสร้างโครงการ');
      // Project creation failed - toast shown
    } finally {
@@ -101,20 +85,13 @@ export default function CreateProjectPage() {
    <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"
-        >
+        <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>
+          <p className="text-muted-foreground">สร้างโครงการใหม่เพื่อเริ่มบริหารจัดการสัญญาและเอกสาร</p>
        </div>
      </div>

@@ -122,9 +99,7 @@ export default function CreateProjectPage() {
        <Card>
          <CardHeader>
            <CardTitle>ข้อมูลโครงการ</CardTitle>
-            <CardDescription>
-              กรอกรายละเอียดสำคัญของโครงการ รหัสโครงการควรไม่ซ้ำกับที่มีอยู่
-            </CardDescription>
+            <CardDescription>กรอกรายละเอียดสำคัญของโครงการ รหัสโครงการควรไม่ซ้ำกับที่มีอยู่</CardDescription>
          </CardHeader>

          <CardContent className="space-y-4">
@@ -136,19 +111,17 @@ export default function CreateProjectPage() {
              <Input
                id="project_code"
                placeholder="e.g. LCBP3-C1"
-                className={errors.projectCode ? "border-destructive" : ""}
-                {...register("projectCode")}
+                className={errors.projectCode ? 'border-destructive' : ''}
+                {...register('projectCode')}
                onChange={(e) => {
                  e.target.value = e.target.value.toUpperCase();
-                  register("projectCode").onChange(e);
+                  register('projectCode').onChange(e);
                }}
              />
              {errors.projectCode ? (
                <p className="text-xs text-destructive">{errors.projectCode.message}</p>
              ) : (
-                <p className="text-xs text-muted-foreground">
-                  ใช้ภาษาอังกฤษตัวพิมพ์ใหญ่ ตัวเลข และขีด (-) เท่านั้น
-                </p>
+                <p className="text-xs text-muted-foreground">ใช้ภาษาอังกฤษตัวพิมพ์ใหญ่ ตัวเลข และขีด (-) เท่านั้น</p>
              )}
            </div>

@@ -160,12 +133,10 @@ export default function CreateProjectPage() {
              <Input
                id="project_name"
                placeholder="ระบุชื่อโครงการฉบับเต็ม..."
-                className={errors.projectName ? "border-destructive" : ""}
-                {...register("projectName")}
+                className={errors.projectName ? 'border-destructive' : ''}
+                {...register('projectName')}
              />
-              {errors.projectName && (
-                <p className="text-xs text-destructive">{errors.projectName.message}</p>
-              )}
+              {errors.projectName && <p className="text-xs text-destructive">{errors.projectName.message}</p>}
            </div>

            {/* Description */}
@@ -175,7 +146,7 @@ export default function CreateProjectPage() {
                id="description"
                placeholder="คำอธิบายเกี่ยวกับขอบเขตงานของโครงการ..."
                className="min-h-[100px]"
-                {...register("description")}
+                {...register('description')}
              />
            </div>

@@ -183,19 +154,11 @@ export default function CreateProjectPage() {
            <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("startDate")}
-                />
+                <Input id="start_date" type="date" {...register('startDate')} />
              </div>
              <div className="space-y-2">
                <Label htmlFor="end_date">วันที่สิ้นสุดสัญญา</Label>
-                <Input
-                  id="end_date"
-                  type="date"
-                  {...register("endDate")}
-                />
+                <Input id="end_date" type="date" {...register('endDate')} />
              </div>
            </div>

@@ -222,12 +185,7 @@ export default function CreateProjectPage() {
          </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 type="button" variant="ghost" onClick={() => router.back()} disabled={isLoading}>
              ยกเลิก
            </Button>
            <Button type="submit" disabled={isLoading}>
@@ -1,22 +1,15 @@
 // File: app/(dashboard)/projects/page.tsx
-"use client";
+'use client';

-import { useState } from "react";
-import { Plus, Search, MoreHorizontal, Folder, Calendar, BarChart3 } from "lucide-react";
-import { useRouter } from "next/navigation";
+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 { 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,
@@ -24,22 +17,15 @@ import {
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
-import {
-  Card,
-  CardContent,
-  CardHeader,
-  CardTitle,
-  CardDescription,
-  CardFooter,
-} from "@/components/ui/card";
+} 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";
+  status: 'Active' | 'Completed' | 'On Hold';
  progress: number;
  startDate: string;
  endDate: string;
@@ -50,56 +36,61 @@ interface Project {
 const mockProjects: Project[] = [
  {
    id: 1,
-    projectCode: "LCBP3",
-    projectName: "โครงการพัฒนาท่าเรือแหลมฉบัง ระยะที่ 3 (ส่วนที่ 1-4)",
-    status: "Active",
+    projectCode: 'LCBP3',
+    projectName: 'โครงการพัฒนาท่าเรือแหลมฉบัง ระยะที่ 3 (ส่วนที่ 1-4)',
+    status: 'Active',
    progress: 45,
-    startDate: "2021-01-01",
-    endDate: "2025-12-31",
-    contractorName: "Multiple Contractors",
+    startDate: '2021-01-01',
+    endDate: '2025-12-31',
+    contractorName: 'Multiple Contractors',
  },
  {
    id: 2,
-    projectCode: "LCBP3-C1",
-    projectName: "งานก่อสร้างงานทางทะเล (ส่วนที่ 1)",
-    status: "Active",
+    projectCode: 'LCBP3-C1',
+    projectName: 'งานก่อสร้างงานทางทะเล (ส่วนที่ 1)',
+    status: 'Active',
    progress: 70,
-    startDate: "2021-06-01",
-    endDate: "2024-06-01",
-    contractorName: "CNNC",
+    startDate: '2021-06-01',
+    endDate: '2024-06-01',
+    contractorName: 'CNNC',
  },
  {
    id: 3,
-    projectCode: "LCBP3-C2",
-    projectName: "งานก่อสร้างอาคาร ท่าเทียบเรือ (ส่วนที่ 2)",
-    status: "Active",
+    projectCode: 'LCBP3-C2',
+    projectName: 'งานก่อสร้างอาคาร ท่าเทียบเรือ (ส่วนที่ 2)',
+    status: 'Active',
    progress: 15,
-    startDate: "2023-01-01",
-    endDate: "2026-01-01",
-    contractorName: "ITD-NWR Joint Venture",
+    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 [searchTerm, setSearchTerm] = useState('');

-  const filteredProjects = mockProjects.filter((project) =>
-    project.projectName.toLowerCase().includes(searchTerm.toLowerCase()) ||
-    project.projectCode.toLowerCase().includes(searchTerm.toLowerCase())
+  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";
+      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"); // อัปเดตเป็นลิงก์จริง
+    router.push('/projects/new'); // อัปเดตเป็นลิงก์จริง
  };

  const handleViewDetails = (id: number) => {
@@ -112,9 +103,7 @@ export default function ProjectsPage() {
      <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>
+          <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
@@ -149,7 +138,11 @@ export default function ProjectsPage() {
          </TableHeader>
          <TableBody>
            {filteredProjects.map((project) => (
-              <TableRow key={project.id} className="cursor-pointer hover:bg-muted/50" onClick={() => handleViewDetails(project.id)}>
+              <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">
@@ -161,16 +154,12 @@ export default function ProjectsPage() {
                </TableCell>
                <TableCell>{project.contractorName}</TableCell>
                <TableCell>
-                  <Badge variant={getStatusVariant(project.status)}>
-                    {project.status}
-                  </Badge>
+                  <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>
+                    <span className="text-xs text-muted-foreground w-[30px] text-right">{project.progress}%</span>
                  </div>
                </TableCell>
                <TableCell className="text-right">
@@ -183,14 +172,29 @@ export default function ProjectsPage() {
                    </DropdownMenuTrigger>
                    <DropdownMenuContent align="end">
                      <DropdownMenuLabel>Actions</DropdownMenuLabel>
-                      <DropdownMenuItem onClick={(e) => { e.stopPropagation(); handleViewDetails(project.id); }}>
+                      <DropdownMenuItem
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          handleViewDetails(project.id);
+                        }}
+                      >
                        View Details
                      </DropdownMenuItem>
-                      <DropdownMenuItem onClick={(e) => { e.stopPropagation(); alert(`Manage Contracts for ${project.projectCode}`); }}>
+                      <DropdownMenuItem
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          alert(`Manage Contracts for ${project.projectCode}`);
+                        }}
+                      >
                        Manage Contracts
                      </DropdownMenuItem>
                      <DropdownMenuSeparator />
-                      <DropdownMenuItem onClick={(e) => { e.stopPropagation(); alert(`Edit ${project.projectCode}`); }}>
+                      <DropdownMenuItem
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          alert(`Edit ${project.projectCode}`);
+                        }}
+                      >
                        Edit Project
                      </DropdownMenuItem>
                    </DropdownMenuContent>
@@ -205,14 +209,16 @@ export default function ProjectsPage() {
      {/* 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">
+          <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>
+                  <CardDescription className="mt-1 line-clamp-2">{project.projectName}</CardDescription>
                </div>
                <Badge variant={getStatusVariant(project.status)} className="shrink-0">
                  {project.status}
@@ -226,7 +232,9 @@ export default function ProjectsPage() {
              </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>
+                <span>
+                  {project.startDate} - {project.endDate}
+                </span>
              </div>
              <div className="space-y-1">
                <div className="flex justify-between text-xs">
@@ -1,22 +1,15 @@
 // File: app/(dashboard)/projects/page.tsx
-"use client";
+'use client';

-import { useState } from "react";
-import { Plus, Search, MoreHorizontal, Folder, Calendar, BarChart3 } from "lucide-react";
-import { useRouter } from "next/navigation";
+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 { 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,
@@ -24,22 +17,15 @@ import {
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
-import {
-  Card,
-  CardContent,
-  CardHeader,
-  CardTitle,
-  CardDescription,
-  CardFooter,
-} from "@/components/ui/card";
+} 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";
+  status: 'Active' | 'Completed' | 'On Hold';
  progress: number;
  startDate: string;
  endDate: string;
@@ -50,56 +36,61 @@ interface Project {
 const mockProjects: Project[] = [
  {
    id: 1,
-    projectCode: "LCBP3",
-    projectName: "โครงการพัฒนาท่าเรือแหลมฉบัง ระยะที่ 3 (ส่วนที่ 1-4)",
-    status: "Active",
+    projectCode: 'LCBP3',
+    projectName: 'โครงการพัฒนาท่าเรือแหลมฉบัง ระยะที่ 3 (ส่วนที่ 1-4)',
+    status: 'Active',
    progress: 45,
-    startDate: "2021-01-01",
-    endDate: "2025-12-31",
-    contractorName: "Multiple Contractors",
+    startDate: '2021-01-01',
+    endDate: '2025-12-31',
+    contractorName: 'Multiple Contractors',
  },
  {
    id: 2,
-    projectCode: "LCBP3-C1",
-    projectName: "งานก่อสร้างงานทางทะเล (ส่วนที่ 1)",
-    status: "Active",
+    projectCode: 'LCBP3-C1',
+    projectName: 'งานก่อสร้างงานทางทะเล (ส่วนที่ 1)',
+    status: 'Active',
    progress: 70,
-    startDate: "2021-06-01",
-    endDate: "2024-06-01",
-    contractorName: "CNNC",
+    startDate: '2021-06-01',
+    endDate: '2024-06-01',
+    contractorName: 'CNNC',
  },
  {
    id: 3,
-    projectCode: "LCBP3-C2",
-    projectName: "งานก่อสร้างอาคาร ท่าเทียบเรือ (ส่วนที่ 2)",
-    status: "Active",
+    projectCode: 'LCBP3-C2',
+    projectName: 'งานก่อสร้างอาคาร ท่าเทียบเรือ (ส่วนที่ 2)',
+    status: 'Active',
    progress: 15,
-    startDate: "2023-01-01",
-    endDate: "2026-01-01",
-    contractorName: "ITD-NWR Joint Venture",
+    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 [searchTerm, setSearchTerm] = useState('');

-  const filteredProjects = mockProjects.filter((project) =>
-    project.projectName.toLowerCase().includes(searchTerm.toLowerCase()) ||
-    project.projectCode.toLowerCase().includes(searchTerm.toLowerCase())
+  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";
+      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"); // อัปเดตเป็นลิงก์จริง
+    router.push('/projects/new'); // อัปเดตเป็นลิงก์จริง
  };

  const handleViewDetails = (id: number) => {
@@ -112,9 +103,7 @@ export default function ProjectsPage() {
      <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>
+          <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
@@ -149,7 +138,11 @@ export default function ProjectsPage() {
          </TableHeader>
          <TableBody>
            {filteredProjects.map((project) => (
-              <TableRow key={project.id} className="cursor-pointer hover:bg-muted/50" onClick={() => handleViewDetails(project.id)}>
+              <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">
@@ -161,16 +154,12 @@ export default function ProjectsPage() {
                </TableCell>
                <TableCell>{project.contractorName}</TableCell>
                <TableCell>
-                  <Badge variant={getStatusVariant(project.status)}>
-                    {project.status}
-                  </Badge>
+                  <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>
+                    <span className="text-xs text-muted-foreground w-[30px] text-right">{project.progress}%</span>
                  </div>
                </TableCell>
                <TableCell className="text-right">
@@ -183,14 +172,29 @@ export default function ProjectsPage() {
                    </DropdownMenuTrigger>
                    <DropdownMenuContent align="end">
                      <DropdownMenuLabel>Actions</DropdownMenuLabel>
-                      <DropdownMenuItem onClick={(e) => { e.stopPropagation(); handleViewDetails(project.id); }}>
+                      <DropdownMenuItem
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          handleViewDetails(project.id);
+                        }}
+                      >
                        View Details
                      </DropdownMenuItem>
-                      <DropdownMenuItem onClick={(e) => { e.stopPropagation(); alert(`Manage Contracts for ${project.projectCode}`); }}>
+                      <DropdownMenuItem
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          alert(`Manage Contracts for ${project.projectCode}`);
+                        }}
+                      >
                        Manage Contracts
                      </DropdownMenuItem>
                      <DropdownMenuSeparator />
-                      <DropdownMenuItem onClick={(e) => { e.stopPropagation(); alert(`Edit ${project.projectCode}`); }}>
+                      <DropdownMenuItem
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          alert(`Edit ${project.projectCode}`);
+                        }}
+                      >
                        Edit Project
                      </DropdownMenuItem>
                    </DropdownMenuContent>
@@ -205,14 +209,16 @@ export default function ProjectsPage() {
      {/* 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">
+          <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>
+                  <CardDescription className="mt-1 line-clamp-2">{project.projectName}</CardDescription>
                </div>
                <Badge variant={getStatusVariant(project.status)} className="shrink-0">
                  {project.status}
@@ -226,7 +232,9 @@ export default function ProjectsPage() {
              </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>
+                <span>
+                  {project.startDate} - {project.endDate}
+                </span>
              </div>
              <div className="space-y-1">
                <div className="flex justify-between text-xs">