251210:1709 Frontend: reeactor organization and run build

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>
   );
-}
+}

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>
   );
-}
+}

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>
+  );
+}