build frontend ใหม่ ผ่านทั้ง dev และ proc

2025-09-30 14:04:48 +07:00
parent 60ea49ac4f
commit 83fc120885
55 changed files with 13527 additions and 44526 deletions
--- a/frontend/app/(protected)/rfas/new/page.jsx
+++ b/frontend/app/(protected)/rfas/new/page.jsx
@@ -1,110 +1,110 @@
-+ "use client";
-+ import React from "react";
-+ import { useRouter } from "next/navigation";
-+ import { api } from "@/lib/api";
-+ import { Input } from "@/components/ui/input";
-+ import { Button } from "@/components/ui/button";
-+
-+ export default function RfaNew() {
-+   const router = useRouter();
-+   const [draftId, setDraftId] = React.useState(null);
-+   const [saving, setSaving] = React.useState(false);
-+   const [savedAt, setSavedAt] = React.useState(null);
-+   const [error, setError] = React.useState("");
-+   const [form, setForm] = React.useState({
-+     title: "", code: "", discipline: "", due_date: "", description: ""
-+   });
-+   const [errs, setErrs] = React.useState({});
-+
-+   // simple validate (client)
-+   const validate = (f) => {
-+     const e = {};
-+     if (!f.title?.trim()) e.title = "กรุณากรอกชื่อเรื่อง";
-+     if (!f.due_date) e.due_date = "กรุณากำหนดวันที่ครบกำหนด";
-+     return e;
-+   };
-+
-+   // debounce autosave
-+   const tRef = React.useRef(0);
-+   React.useEffect(() => {
-+     clearTimeout(tRef.current);
-+     tRef.current = window.setTimeout(async () => {
-+       const e = validate(form);
-+       setErrs(e); // แสดง error ทันที (soft)
-+       try {
-+         setSaving(true);
-+         if (!draftId) {
-+           // create draft
-+           const res = await api("/rfas", { method: "POST", body: { ...form, status: "draft" } });
-+           setDraftId(res.id);
-+         } else {
-+           // update draft
-+           await api(`/rfas/${draftId}`, { method: "PATCH", body: { ...form, status: "draft" } });
-+         }
-+         setSavedAt(new Date());
-+       } catch (err) {
-+         setError(err.message || "บันทึกฉบับร่างไม่สำเร็จ");
-+       } finally {
-+         setSaving(false);
-+       }
-+     }, 800);
-+     return () => clearTimeout(tRef.current);
-+   }, [form, draftId]);
-+
-+   const onSubmit = async (e) => {
-+     e.preventDefault();
-+     const eobj = validate(form);
-+     setErrs(eobj);
-+     if (Object.keys(eobj).length) return;
-+     try {
-+       setSaving(true);
-+       const id = draftId
-+         ? (await api(`/rfas/${draftId}`, { method: "PATCH", body: { ...form, status: "submitted" } })).id || draftId
-+         : (await api("/rfas", { method: "POST", body: { ...form, status: "submitted" } })).id;
-+       router.replace(`/rfas`); // หรือไปหน้า detail `/rfas/${id}`
-+     } catch (err) {
-+       setError(err.message || "ส่งคำขอไม่สำเร็จ");
-+     } finally {
-+       setSaving(false);
-+     }
-+   };
-+
-+   return (
-+     <form onSubmit={onSubmit} className="space-y-4 rounded-2xl p-5 bg-white">
-+       <div className="text-lg font-semibold">สร้าง RFA</div>
-+       {error && <div className="text-sm text-red-600">{error}</div>}
-+       <div className="grid md:grid-cols-2 gap-3">
-+         <div>
-+           <label className="text-sm">ชื่อเรื่อง *</label>
-+           <Input value={form.title} onChange={(e)=>setForm(f=>({...f, title:e.target.value}))}/>
-+           {errs.title && <div className="text-xs text-red-600 mt-1">{errs.title}</div>}
-+         </div>
-+         <div>
-+           <label className="text-sm">รหัส (ถ้ามี)</label>
-+           <Input value={form.code} onChange={(e)=>setForm(f=>({...f, code:e.target.value}))}/>
-+         </div>
-+         <div>
-+           <label className="text-sm">สาขา/หมวด (Discipline)</label>
-+           <Input value={form.discipline} onChange={(e)=>setForm(f=>({...f, discipline:e.target.value}))}/>
-+         </div>
-+         <div>
-+           <label className="text-sm">กำหนดส่ง *</label>
-+           <input type="date" className="border rounded-xl p-2 w-full" value={form.due_date}
-+                  onChange={(e)=>setForm(f=>({...f, due_date:e.target.value}))}/>
-+           {errs.due_date && <div className="text-xs text-red-600 mt-1">{errs.due_date}</div>}
-+         </div>
-+       </div>
-+       <div>
-+         <label className="text-sm">รายละเอียด</label>
-+         <textarea rows={5} className="border rounded-xl p-2 w-full"
-+                   value={form.description} onChange={(e)=>setForm(f=>({...f, description:e.target.value}))}/>
-+       </div>
-+       <div className="flex items-center gap-3">
-+         <Button type="submit" disabled={saving}>ส่งเพื่อพิจารณา</Button>
-+         <span className="text-sm opacity-70">
-+           {saving ? "กำลังบันทึก…" : savedAt ? `บันทึกล่าสุด ${savedAt.toLocaleTimeString()}` : "ยังไม่เคยบันทึก"}
-+         </span>
-+       </div>
-+     </form>
-+   );
-+ }
+ "use client";
+ import React from "react";
+ import { useRouter } from "next/navigation";
+ import { api } from "@/lib/api";
+ import { Input } from "@/components/ui/input";
+ import { Button } from "@/components/ui/button";
+
+ export default function RfaNew() {
+   const router = useRouter();
+   const [draftId, setDraftId] = React.useState(null);
+   const [saving, setSaving] = React.useState(false);
+   const [savedAt, setSavedAt] = React.useState(null);
+   const [error, setError] = React.useState("");
+   const [form, setForm] = React.useState({
+     title: "", code: "", discipline: "", due_date: "", description: ""
+   });
+   const [errs, setErrs] = React.useState({});
+
+   // simple validate (client)
+   const validate = (f) => {
+     const e = {};
+     if (!f.title?.trim()) e.title = "กรุณากรอกชื่อเรื่อง";
+     if (!f.due_date) e.due_date = "กรุณากำหนดวันที่ครบกำหนด";
+     return e;
+   };
+
+   // debounce autosave
+   const tRef = React.useRef(0);
+   React.useEffect(() => {
+     clearTimeout(tRef.current);
+     tRef.current = window.setTimeout(async () => {
+       const e = validate(form);
+       setErrs(e); // แสดง error ทันที (soft)
+       try {
+         setSaving(true);
+         if (!draftId) {
+           // create draft
+           const res = await api("/rfas", { method: "POST", body: { ...form, status: "draft" } });
+           setDraftId(res.id);
+         } else {
+           // update draft
+           await api(`/rfas/${draftId}`, { method: "PATCH", body: { ...form, status: "draft" } });
+         }
+         setSavedAt(new Date());
+       } catch (err) {
+         setError(err.message || "บันทึกฉบับร่างไม่สำเร็จ");
+       } finally {
+         setSaving(false);
+       }
+     }, 800);
+     return () => clearTimeout(tRef.current);
+   }, [form, draftId]);
+
+   const onSubmit = async (e) => {
+     e.preventDefault();
+     const eobj = validate(form);
+     setErrs(eobj);
+     if (Object.keys(eobj).length) return;
+     try {
+       setSaving(true);
+       const id = draftId
+         ? (await api(`/rfas/${draftId}`, { method: "PATCH", body: { ...form, status: "submitted" } })).id || draftId
+         : (await api("/rfas", { method: "POST", body: { ...form, status: "submitted" } })).id;
+       router.replace(`/rfas`); // หรือไปหน้า detail `/rfas/${id}`
+     } catch (err) {
+       setError(err.message || "ส่งคำขอไม่สำเร็จ");
+     } finally {
+       setSaving(false);
+     }
+   };
+
+   return (
+     <form onSubmit={onSubmit} className="p-5 space-y-4 bg-white rounded-2xl">
+       <div className="text-lg font-semibold">สร้าง RFA</div>
+       {error && <div className="text-sm text-red-600">{error}</div>}
+       <div className="grid gap-3 md:grid-cols-2">
+         <div>
+           <label className="text-sm">ชื่อเรื่อง *</label>
+           <Input value={form.title} onChange={(e)=>setForm(f=>({...f, title:e.target.value}))}/>
+           {errs.title && <div className="mt-1 text-xs text-red-600">{errs.title}</div>}
+         </div>
+         <div>
+           <label className="text-sm">รหัส (ถ้ามี)</label>
+           <Input value={form.code} onChange={(e)=>setForm(f=>({...f, code:e.target.value}))}/>
+         </div>
+         <div>
+           <label className="text-sm">สาขา/หมวด (Discipline)</label>
+           <Input value={form.discipline} onChange={(e)=>setForm(f=>({...f, discipline:e.target.value}))}/>
+         </div>
+         <div>
+           <label className="text-sm">กำหนดส่ง *</label>
+           <input type="date" className="w-full p-2 border rounded-xl" value={form.due_date}
+                  onChange={(e)=>setForm(f=>({...f, due_date:e.target.value}))}/>
+           {errs.due_date && <div className="mt-1 text-xs text-red-600">{errs.due_date}</div>}
+         </div>
+       </div>
+       <div>
+         <label className="text-sm">รายละเอียด</label>
+         <textarea rows={5} className="w-full p-2 border rounded-xl"
+                   value={form.description} onChange={(e)=>setForm(f=>({...f, description:e.target.value}))}/>
+       </div>
+       <div className="flex items-center gap-3">
+         <Button type="submit" disabled={saving}>ส่งเพื่อพิจารณา</Button>
+         <span className="text-sm opacity-70">
+           {saving ? "กำลังบันทึก…" : savedAt ? `บันทึกล่าสุด ${savedAt.toLocaleTimeString()}` : "ยังไม่เคยบันทึก"}
+         </span>
+       </div>
+     </form>
+   );
+ }
--- a/frontend/app/(protected)/rfas/page.jsx
+++ b/frontend/app/(protected)/rfas/page.jsx
@@ -1,135 +1,135 @@
-+ "use client";
-+ import React from "react";
-+ import { useRouter, usePathname, useSearchParams } from "next/navigation";
-+ import { apiGet } from "@/lib/api";
-+ import { Input } from "@/components/ui/input";
-+ import { Button } from "@/components/ui/button";
-+ import { Card, CardContent } from "@/components/ui/card";
-+
-+ export default function RFAsPage() {
-+   const router = useRouter();
-+   const pathname = usePathname();
-+   const sp = useSearchParams();
-+
-+   // params from URL
-+   const [q, setQ] = React.useState(sp.get("q") || "");
-+   const status = sp.get("status") || "All";
-+   const overdue = sp.get("overdue") === "1";
-+   const page = Number(sp.get("page") || 1);
-+   const pageSize = Number(sp.get("pageSize") || 20);
-+   const sort = sp.get("sort") || "updated_at:desc";
-+
-+   const setParams = (patch) => {
-+     const curr = Object.fromEntries(sp.entries());
-+     const next = { ...curr, ...patch };
-+     // normalize
-+     if (!next.q) delete next.q;
-+     if (!next.status || next.status === "All") delete next.status;
-+     if (!next.overdue || next.overdue === "0") delete next.overdue;
-+     if (!next.page || Number(next.page) === 1) delete next.page;
-+     if (!next.pageSize || Number(next.pageSize) === 20) delete next.pageSize;
-+     if (!next.sort || next.sort === "updated_at:desc") delete next.sort;
-+     const usp = new URLSearchParams(next).toString();
-+     router.replace(`${pathname}${usp ? `?${usp}` : ""}`);
-+   };
-+
-+   const [rows, setRows] = React.useState([]);
-+   const [total, setTotal] = React.useState(0);
-+   const [loading, setLoading] = React.useState(true);
-+   const [error, setError] = React.useState("");
-+
-+   // fetch whenever URL params change
-+   React.useEffect(() => {
-+     setLoading(true); setError("");
-+     apiGet("/rfas", {
-+       q, status: status !== "All" ? status : undefined,
-+       overdue: overdue ? 1 : undefined, page, pageSize, sort
-+     }).then((res) => {
-+       // expected: { data: [...], page, pageSize, total }
-+       setRows(res.data || []);
-+       setTotal(res.total || 0);
-+     }).catch((e) => {
-+       setError(e.message || "โหลดข้อมูลไม่สำเร็จ");
-+     }).finally(() => setLoading(false));
-+   // eslint-disable-next-line react-hooks/exhaustive-deps
-+   }, [sp]);
-+
-+   const pages = Math.max(1, Math.ceil(total / pageSize));
-+
-+   return (
-+     <div className="space-y-4">
-+       <div className="flex items-center gap-2">
-+         <Input
-+           placeholder="ค้นหา (รหัส/ชื่อเรื่อง/ผู้รับผิดชอบ)"
-+           value={q}
-+           onChange={(e) => setQ(e.target.value)}
-+           onKeyDown={(e) => e.key === "Enter" && setParams({ q, page: 1 })}
-+         />
-+         <select
-+           className="border rounded-xl p-2"
-+           value={status}
-+           onChange={(e) => setParams({ status: e.target.value, page: 1 })}
-+         >
-+           <option>All</option><option>Pending</option><option>Review</option><option>Approved</option><option>Closed</option>
-+         </select>
-+         <label className="text-sm flex items-center gap-2">
-+           <input
-+             type="checkbox"
-+             checked={overdue}
-+             onChange={(e) => setParams({ overdue: e.target.checked ? "1" : "0", page: 1 })}
-+           />
-+           Overdue
-+         </label>
-+         <Button onClick={() => setParams({ q, page: 1 })}>ค้นหา</Button>
-+       </div>
-+
-+       <Card className="rounded-2xl border-0">
-+         <CardContent className="p-0">
-+           <div className="overflow-x-auto">
-+             <table className="min-w-full text-sm">
-+               <thead className="bg-white sticky top-0 border-b">
-+                 <tr className="text-left">
-+                   <th className="py-2 px-3">รหัส</th>
-+                   <th className="py-2 px-3">ชื่อเรื่อง</th>
-+                   <th className="py-2 px-3">สถานะ</th>
-+                   <th className="py-2 px-3">กำหนดส่ง</th>
-+                   <th className="py-2 px-3">ผู้รับผิดชอบ</th>
-+                 </tr>
-+               </thead>
-+               <tbody>
-+                 {loading && <tr><td className="py-6 px-3" colSpan={5}>กำลังโหลด…</td></tr>}
-+                 {error && !loading && <tr><td className="py-6 px-3 text-red-600" colSpan={5}>{error}</td></tr>}
-+                 {!loading && !error && rows.length === 0 && <tr><td className="py-6 px-3 opacity-70" colSpan={5}>ไม่พบข้อมูล</td></tr>}
-+                 {!loading && !error && rows.map((r) => (
-+                   <tr key={r.id} className="border-b hover:bg-gray-50">
-+                     <td className="py-2 px-3 font-mono">{r.code || r.id}</td>
-+                     <td className="py-2 px-3">{r.title}</td>
-+                     <td className="py-2 px-3">{r.status}</td>
-+                     <td className="py-2 px-3">{r.due_date || "—"}</td>
-+                     <td className="py-2 px-3">{r.owner_name || "—"}</td>
-+                   </tr>
-+                 ))}
-+               </tbody>
-+             </table>
-+           </div>
-+           <div className="flex items-center justify-between px-3 py-2 text-sm border-t">
-+             <span>ทั้งหมด {total} รายการ</span>
-+             <div className="flex items-center gap-2">
-+               <Button
-+                 variant="outline"
-+                 onClick={() => setParams({ page: Math.max(1, page - 1) })}
-+                 disabled={page <= 1}
-+               >ย้อนกลับ</Button>
-+               <span>หน้า {page}/{pages}</span>
-+               <Button
-+                 variant="outline"
-+                 onClick={() => setParams({ page: Math.min(pages, page + 1) })}
-+                 disabled={page >= pages}
-+               >ถัดไป</Button>
-+             </div>
-+           </div>
-+         </CardContent>
-+       </Card>
-+     </div>
-+   );
-+ }
+ "use client";
+ import React from "react";
+ import { useRouter, usePathname, useSearchParams } from "next/navigation";
+ import { apiGet } from "@/lib/api";
+ import { Input } from "@/components/ui/input";
+ import { Button } from "@/components/ui/button";
+ import { Card, CardContent } from "@/components/ui/card";
+
+ export default function RFAsPage() {
+   const router = useRouter();
+   const pathname = usePathname();
+   const sp = useSearchParams();
+
+   // params from URL
+   const [q, setQ] = React.useState(sp.get("q") || "");
+   const status = sp.get("status") || "All";
+   const overdue = sp.get("overdue") === "1";
+   const page = Number(sp.get("page") || 1);
+   const pageSize = Number(sp.get("pageSize") || 20);
+   const sort = sp.get("sort") || "updated_at:desc";
+
+   const setParams = (patch) => {
+     const curr = Object.fromEntries(sp.entries());
+     const next = { ...curr, ...patch };
+     // normalize
+     if (!next.q) delete next.q;
+     if (!next.status || next.status === "All") delete next.status;
+     if (!next.overdue || next.overdue === "0") delete next.overdue;
+     if (!next.page || Number(next.page) === 1) delete next.page;
+     if (!next.pageSize || Number(next.pageSize) === 20) delete next.pageSize;
+     if (!next.sort || next.sort === "updated_at:desc") delete next.sort;
+     const usp = new URLSearchParams(next).toString();
+     router.replace(`${pathname}${usp ? `?${usp}` : ""}`);
+   };
+
+   const [rows, setRows] = React.useState([]);
+   const [total, setTotal] = React.useState(0);
+   const [loading, setLoading] = React.useState(true);
+   const [error, setError] = React.useState("");
+
+   // fetch whenever URL params change
+   React.useEffect(() => {
+     setLoading(true); setError("");
+     apiGet("/rfas", {
+       q, status: status !== "All" ? status : undefined,
+       overdue: overdue ? 1 : undefined, page, pageSize, sort
+     }).then((res) => {
+       // expected: { data: [...], page, pageSize, total }
+       setRows(res.data || []);
+       setTotal(res.total || 0);
+     }).catch((e) => {
+       setError(e.message || "โหลดข้อมูลไม่สำเร็จ");
+     }).finally(() => setLoading(false));
+   // eslint-disable-next-line react-hooks/exhaustive-deps
+   }, [sp]);
+
+   const pages = Math.max(1, Math.ceil(total / pageSize));
+
+   return (
+     <div className="space-y-4">
+       <div className="flex items-center gap-2">
+         <Input
+           placeholder="ค้นหา (รหัส/ชื่อเรื่อง/ผู้รับผิดชอบ)"
+           value={q}
+           onChange={(e) => setQ(e.target.value)}
+           onKeyDown={(e) => e.key === "Enter" && setParams({ q, page: 1 })}
+         />
+         <select
+           className="border rounded-xl p-2"
+           value={status}
+           onChange={(e) => setParams({ status: e.target.value, page: 1 })}
+         >
+           <option>All</option><option>Pending</option><option>Review</option><option>Approved</option><option>Closed</option>
+         </select>
+         <label className="text-sm flex items-center gap-2">
+           <input
+             type="checkbox"
+             checked={overdue}
+             onChange={(e) => setParams({ overdue: e.target.checked ? "1" : "0", page: 1 })}
+           />
+           Overdue
+         </label>
+         <Button onClick={() => setParams({ q, page: 1 })}>ค้นหา</Button>
+       </div>
+
+       <Card className="rounded-2xl border-0">
+         <CardContent className="p-0">
+           <div className="overflow-x-auto">
+             <table className="min-w-full text-sm">
+               <thead className="bg-white sticky top-0 border-b">
+                 <tr className="text-left">
+                   <th className="py-2 px-3">รหัส</th>
+                   <th className="py-2 px-3">ชื่อเรื่อง</th>
+                   <th className="py-2 px-3">สถานะ</th>
+                   <th className="py-2 px-3">กำหนดส่ง</th>
+                   <th className="py-2 px-3">ผู้รับผิดชอบ</th>
+                 </tr>
+               </thead>
+               <tbody>
+                 {loading && <tr><td className="py-6 px-3" colSpan={5}>กำลังโหลด…</td></tr>}
+                 {error && !loading && <tr><td className="py-6 px-3 text-red-600" colSpan={5}>{error}</td></tr>}
+                 {!loading && !error && rows.length === 0 && <tr><td className="py-6 px-3 opacity-70" colSpan={5}>ไม่พบข้อมูล</td></tr>}
+                 {!loading && !error && rows.map((r) => (
+                   <tr key={r.id} className="border-b hover:bg-gray-50">
+                     <td className="py-2 px-3 font-mono">{r.code || r.id}</td>
+                     <td className="py-2 px-3">{r.title}</td>
+                     <td className="py-2 px-3">{r.status}</td>
+                     <td className="py-2 px-3">{r.due_date || "—"}</td>
+                     <td className="py-2 px-3">{r.owner_name || "—"}</td>
+                   </tr>
+                 ))}
+               </tbody>
+             </table>
+           </div>
+           <div className="flex items-center justify-between px-3 py-2 text-sm border-t">
+             <span>ทั้งหมด {total} รายการ</span>
+             <div className="flex items-center gap-2">
+               <Button
+                 variant="outline"
+                 onClick={() => setParams({ page: Math.max(1, page - 1) })}
+                 disabled={page <= 1}
+               >ย้อนกลับ</Button>
+               <span>หน้า {page}/{pages}</span>
+               <Button
+                 variant="outline"
+                 onClick={() => setParams({ page: Math.min(pages, page + 1) })}
+                 disabled={page >= pages}
+               >ถัดไป</Button>
+             </div>
+           </div>
+         </CardContent>
+       </Card>
+     </div>
+   );
+ }