np-dms/lcbp3.np-dms.work
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
admin
2025-09-30 14:04:48 +07:00
parent 60ea49ac4f
commit 83fc120885
55 changed files with 13527 additions and 44526 deletions
Download Patch File Download Diff File Expand all files Collapse all files

174
frontend/app/(protected)/dashboard/page.jsx
View File

@@ -66,7 +66,7 @@ const sea = {
const can = (user, perm) => new Set(user?.permissions || []).has(perm);
const Tag = ({ children }) => (
<Badge
className="rounded-full px-3 py-1 text-xs border-0"
className="px-3 py-1 text-xs border-0 rounded-full"
style={{ background: sea.light, color: sea.dark }}
>
{children}
@@ -79,8 +79,8 @@ const SidebarItem = ({ label, icon: Icon, active = false, badge }) => (
}`}
style={{ borderColor: "#ffffff40", color: sea.textDark }}
>
<Icon className="h-5 w-5" />
<span className="grow font-medium">{label}</span>
<Icon className="w-5 h-5" />
<span className="font-medium grow">{label}</span>
{badge ? (
<span
className="text-xs rounded-full px-2 py-0.5"
@@ -89,20 +89,20 @@ const SidebarItem = ({ label, icon: Icon, active = false, badge }) => (
{badge}
</span>
) : null}
<ChevronRight className="h-4 w-4 opacity-0 group-hover:opacity-100 transition-opacity" />
<ChevronRight className="w-4 h-4 transition-opacity opacity-0 group-hover:opacity-100" />
</button>
);
const KPI = ({ label, value, icon: Icon, onClick }) => (
<Card
onClick={onClick}
className="rounded-2xl shadow-sm border-0 cursor-pointer hover:shadow transition"
className="transition border-0 shadow-sm cursor-pointer rounded-2xl hover:shadow"
style={{ background: "white" }}
>
<CardContent className="p-5">
<div className="flex items-start justify-between">
<span className="text-sm opacity-70">{label}</span>
<div className="rounded-xl p-2" style={{ background: sea.light }}>
<Icon className="h-5 w-5" style={{ color: sea.dark }} />
<div className="p-2 rounded-xl" style={{ background: sea.light }}>
<Icon className="w-5 h-5" style={{ color: sea.dark }} />
</div>
</div>
<div className="mt-3 text-3xl font-bold" style={{ color: sea.textDark }}>
@@ -124,7 +124,7 @@ function PreviewDrawer({ open, onClose, children }) {
<div className="flex items-center justify-between p-4 border-b">
<div className="font-medium">รายละเอียด</div>
<Button variant="ghost" size="icon" onClick={onClose}>
<X className="h-5 w-5" />
<X className="w-5 h-5" />
</Button>
</div>
<div className="p-4 overflow-auto h-[calc(100%-56px)]">{children}</div>
@@ -306,23 +306,23 @@ export default function DashboardPage() {
}}
>
<header
className="sticky top-0 z-40 backdrop-blur-md border-b"
className="sticky top-0 z-40 border-b backdrop-blur-md"
style={{
borderColor: "#ffffff66",
background: "rgba(230,247,251,0.7)",
}}
>
<div className="mx-auto max-w-7xl px-4 py-2 flex items-center gap-3">
<div className="flex items-center gap-3 px-4 py-2 mx-auto max-w-7xl">
<button
className="h-9 w-9 rounded-2xl flex items-center justify-center shadow-sm"
className="flex items-center justify-center shadow-sm h-9 w-9 rounded-2xl"
style={{ background: sea.dark }}
onClick={() => setSidebarOpen((v) => !v)}
aria-label={sidebarOpen ? "ซ่อนแถบด้านข้าง" : "แสดงแถบด้านข้าง"}
>
{sidebarOpen ? (
<PanelLeft className="h-5 w-5 text-white" />
<PanelLeft className="w-5 h-5 text-white" />
) : (
<PanelRight className="h-5 w-5 text-white" />
<PanelRight className="w-5 h-5 text-white" />
)}
</button>
<div>
@@ -338,35 +338,35 @@ export default function DashboardPage() {
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button className="ml-auto rounded-2xl btn-sea flex items-center gap-2">
System <ChevronDown className="h-4 w-4" />
<Button className="flex items-center gap-2 ml-auto rounded-2xl btn-sea">
System <ChevronDown className="w-4 h-4" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end" className="min-w-56">
<DropdownMenuLabel>ระบบ</DropdownMenuLabel>
{can(user, "admin:view") && (
<DropdownMenuItem>
<Settings className="h-4 w-4 mr-2" /> Admin
<Settings className="w-4 h-4 mr-2" /> Admin
</DropdownMenuItem>
)}
{can(user, "users:manage") && (
<DropdownMenuItem>
<Users className="h-4 w-4 mr-2" /> ผู้ใช้/บทบาท
<Users className="w-4 h-4 mr-2" /> ผู้ใช้/บทบาท
</DropdownMenuItem>
)}
{can(user, "health:view") && (
<DropdownMenuItem asChild>
<a href="/health" className="flex items-center w-full">
<Server className="h-4 w-4 mr-2" /> Health{" "}
<ExternalLink className="h-3 w-3 ml-auto" />
<Server className="w-4 h-4 mr-2" /> Health{" "}
<ExternalLink className="w-3 h-3 ml-auto" />
</a>
</DropdownMenuItem>
)}
{can(user, "workflow:view") && (
<DropdownMenuItem asChild>
<a href="/workflow" className="flex items-center w-full">
<Workflow className="h-4 w-4 mr-2" /> Workflow (n8n){" "}
<ExternalLink className="h-3 w-3 ml-auto" />
<Workflow className="w-4 h-4 mr-2" /> Workflow (n8n){" "}
<ExternalLink className="w-3 h-3 ml-auto" />
</a>
</DropdownMenuItem>
)}
@@ -375,8 +375,8 @@ export default function DashboardPage() {
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button className="rounded-2xl btn-sea ml-2">
<Plus className="h-4 w-4 mr-1" /> New
<Button className="ml-2 rounded-2xl btn-sea">
<Plus className="w-4 h-4 mr-1" /> New
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
@@ -384,7 +384,7 @@ export default function DashboardPage() {
can(user, perm) ? (
<DropdownMenuItem key={label} asChild>
<Link href={href} className="flex items-center">
<Icon className="h-4 w-4 mr-2" />
<Icon className="w-4 h-4 mr-2" />
{label}
</Link>
</DropdownMenuItem>
@@ -392,7 +392,7 @@ export default function DashboardPage() {
<Tooltip key={label}>
<TooltipTrigger asChild>
<div className="px-2 py-1.5 text-sm opacity-40 cursor-not-allowed flex items-center">
<Icon className="h-4 w-4 mr-2" />
<Icon className="w-4 h-4 mr-2" />
{label}
</div>
</TooltipTrigger>
@@ -404,26 +404,26 @@ export default function DashboardPage() {
)}
<DropdownMenuSeparator />
<DropdownMenuItem>
<Layers className="h-4 w-4 mr-2" /> Import / Bulk upload
<Layers className="w-4 h-4 mr-2" /> Import / Bulk upload
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</div>
</header>
<div className="mx-auto max-w-7xl px-4 py-6 grid grid-cols-12 gap-6">
<div className="grid grid-cols-12 gap-6 px-4 py-6 mx-auto max-w-7xl">
{sidebarOpen && (
<aside className="col-span-12 lg:col-span-3 xl:col-span-3">
<div
className="rounded-3xl p-4 border"
className="p-4 border rounded-3xl"
style={{
background: "rgba(255,255,255,0.7)",
borderColor: "#ffffff66",
}}
>
<div className="mb-3 flex items-center gap-2">
<div className="flex items-center gap-2 mb-3">
<ShieldCheck
className="h-5 w-5"
className="w-5 h-5"
style={{ color: sea.dark }}
/>
<div className="text-sm">
@@ -432,20 +432,20 @@ export default function DashboardPage() {
</div>
</div>
<div className="relative mb-3">
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 opacity-70" />
<Search className="absolute w-4 h-4 -translate-y-1/2 left-3 top-1/2 opacity-70" />
<Input
placeholder="ค้นหา RFA / Drawing / Transmittal / Code…"
className="pl-9 rounded-2xl border-0 bg-white"
className="bg-white border-0 pl-9 rounded-2xl"
/>
</div>
<div
className="rounded-2xl p-3 border mb-3"
className="p-3 mb-3 border rounded-2xl"
style={{ borderColor: "#eef6f8", background: "#ffffffaa" }}
>
<div className="text-xs font-medium mb-2">ตัวกรอง</div>
<div className="mb-2 text-xs font-medium">ตัวกรอง</div>
<div className="grid grid-cols-2 gap-2">
<select
className="rounded-xl border p-2 text-sm"
className="p-2 text-sm border rounded-xl"
value={filters.type}
onChange={(e) =>
setFilters((f) => ({ ...f, type: e.target.value }))
@@ -458,7 +458,7 @@ export default function DashboardPage() {
<option>Correspondence</option>
</select>
<select
className="rounded-xl border p-2 text-sm"
className="p-2 text-sm border rounded-xl"
value={filters.status}
onChange={(e) =>
setFilters((f) => ({ ...f, status: e.target.value }))
@@ -469,7 +469,7 @@ export default function DashboardPage() {
<option>Review</option>
<option>Sent</option>
</select>
<label className="col-span-2 flex items-center gap-2 text-sm">
<label className="flex items-center col-span-2 gap-2 text-sm">
<Switch
checked={filters.overdue}
onCheckedChange={(v) =>
@@ -479,14 +479,14 @@ export default function DashboardPage() {
แสดงเฉพาะ Overdue
</label>
</div>
<div className="mt-2 flex gap-2">
<div className="flex gap-2 mt-2">
<Button
size="sm"
variant="outline"
className="rounded-xl"
style={{ borderColor: sea.mid, color: sea.dark }}
>
<Filter className="h-4 w-4 mr-1" />
<Filter className="w-4 h-4 mr-1" />
Apply
</Button>
<Button
@@ -518,8 +518,8 @@ export default function DashboardPage() {
/>
))}
</div>
<div className="mt-5 text-xs opacity-70 flex items-center gap-2">
<Database className="h-4 w-4" /> dms_db • MariaDB 10.11
<div className="flex items-center gap-2 mt-5 text-xs opacity-70">
<Database className="w-4 h-4" /> dms_db • MariaDB 10.11
</div>
</div>
</aside>
@@ -535,7 +535,7 @@ export default function DashboardPage() {
animate={{ opacity: 1, y: 0 }}
transition={{ delay: 0.05, duration: 0.4 }}
>
<div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-4">
<div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
{kpis.map((k) => (
<KPI key={k.key} {...k} onClick={() => onKpiClick(k.query)} />
))}
@@ -555,7 +555,7 @@ export default function DashboardPage() {
style={{ borderColor: sea.mid, color: sea.dark }}
onClick={() => setDensityCompact((v) => !v)}
>
<SlidersHorizontal className="h-4 w-4 mr-1" /> Density:{" "}
<SlidersHorizontal className="w-4 h-4 mr-1" /> Density:{" "}
{densityCompact ? "Compact" : "Comfort"}
</Button>
<DropdownMenu>
@@ -566,7 +566,7 @@ export default function DashboardPage() {
className="rounded-xl"
style={{ borderColor: sea.mid, color: sea.dark }}
>
<Columns3 className="h-4 w-4 mr-1" /> Columns
<Columns3 className="w-4 h-4 mr-1" /> Columns
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
@@ -578,9 +578,9 @@ export default function DashboardPage() {
}
>
{showCols[key] ? (
<Eye className="h-4 w-4 mr-2" />
<Eye className="w-4 h-4 mr-2" />
) : (
<EyeOff className="h-4 w-4 mr-2" />
<EyeOff className="w-4 h-4 mr-2" />
)}
{key}
</DropdownMenuItem>
@@ -590,7 +590,7 @@ export default function DashboardPage() {
</div>
</div>
<Card className="rounded-2xl border-0">
<Card className="border-0 rounded-2xl">
<CardContent className="p-0">
<div className="overflow-x-auto">
<table
@@ -606,22 +606,22 @@ export default function DashboardPage() {
}}
>
<tr className="text-left">
{showCols.type && <th className="py-2 px-3">ประเภท</th>}
{showCols.id && <th className="py-2 px-3">รหัส</th>}
{showCols.type && <th className="px-3 py-2">ประเภท</th>}
{showCols.id && <th className="px-3 py-2">รหัส</th>}
{showCols.title && (
<th className="py-2 px-3">ชื่อเรื่อง</th>
<th className="px-3 py-2">ชื่อเรื่อง</th>
)}
{showCols.status && (
<th className="py-2 px-3">สถานะ</th>
<th className="px-3 py-2">สถานะ</th>
)}
{showCols.due && (
<th className="py-2 px-3">กำหนดส่ง</th>
<th className="px-3 py-2">กำหนดส่ง</th>
)}
{showCols.owner && (
<th className="py-2 px-3">ผู้รับผิดชอบ</th>
<th className="px-3 py-2">ผู้รับผิดชอบ</th>
)}
{showCols.actions && (
<th className="py-2 px-3">จัดการ</th>
<th className="px-3 py-2">จัดการ</th>
)}
</tr>
</thead>
@@ -629,7 +629,7 @@ export default function DashboardPage() {
{visibleItems.length === 0 && (
<tr>
<td
className="py-8 px-3 text-center opacity-70"
className="px-3 py-8 text-center opacity-70"
colSpan={7}
>
ไม่พบรายการตามตัวกรองที่เลือก
@@ -639,32 +639,32 @@ export default function DashboardPage() {
{visibleItems.map((row) => (
<tr
key={row.id}
className="border-b hover:bg-gray-50/50 cursor-pointer"
className="border-b cursor-pointer hover:bg-gray-50/50"
style={{ borderColor: "#f3f3f3" }}
onClick={() => setPreviewOpen(true)}
>
{showCols.type && (
<td className="py-2 px-3">{row.t}</td>
<td className="px-3 py-2">{row.t}</td>
)}
{showCols.id && (
<td className="py-2 px-3 font-mono">{row.id}</td>
<td className="px-3 py-2 font-mono">{row.id}</td>
)}
{showCols.title && (
<td className="py-2 px-3">{row.title}</td>
<td className="px-3 py-2">{row.title}</td>
)}
{showCols.status && (
<td className="py-2 px-3">
<td className="px-3 py-2">
<Tag>{row.status}</Tag>
</td>
)}
{showCols.due && (
<td className="py-2 px-3">{row.due}</td>
<td className="px-3 py-2">{row.due}</td>
)}
{showCols.owner && (
<td className="py-2 px-3">{row.owner}</td>
<td className="px-3 py-2">{row.owner}</td>
)}
{showCols.actions && (
<td className="py-2 px-3">
<td className="px-3 py-2">
<div className="flex gap-2">
<Button
size="sm"
@@ -692,7 +692,7 @@ export default function DashboardPage() {
</table>
</div>
<div
className="px-4 py-2 text-xs opacity-70 border-t"
className="px-4 py-2 text-xs border-t opacity-70"
style={{ borderColor: "#efefef" }}
>
เคล็ดลับ: ใช้ปุ่ม ↑/↓ เลื่อนแถว, Enter เปิด, / โฟกัสค้นหา
@@ -702,15 +702,15 @@ export default function DashboardPage() {
<Tabs defaultValue="overview" className="w-full">
<TabsList
className="rounded-2xl border bg-white/80"
className="border rounded-2xl bg-white/80"
style={{ borderColor: "#ffffff80" }}
>
<TabsTrigger value="overview">ภาพรวม</TabsTrigger>
<TabsTrigger value="reports">รายงาน</TabsTrigger>
</TabsList>
<TabsContent value="overview" className="mt-4 space-y-4">
<div className="grid lg:grid-cols-5 gap-4">
<Card className="rounded-2xl border-0 lg:col-span-3">
<div className="grid gap-4 lg:grid-cols-5">
<Card className="border-0 rounded-2xl lg:col-span-3">
<CardContent className="p-5">
<div className="flex items-center justify-between">
<div
@@ -730,7 +730,7 @@ export default function DashboardPage() {
</div>
<div className="grid grid-cols-3 gap-3">
<div
className="rounded-xl p-4 border"
className="p-4 border rounded-xl"
style={{
background: sea.light,
borderColor: sea.light,
@@ -742,7 +742,7 @@ export default function DashboardPage() {
</div>
</div>
<div
className="rounded-xl p-4 border"
className="p-4 border rounded-xl"
style={{
background: sea.light,
borderColor: sea.light,
@@ -754,7 +754,7 @@ export default function DashboardPage() {
</div>
</div>
<div
className="rounded-xl p-4 border"
className="p-4 border rounded-xl"
style={{
background: sea.light,
borderColor: sea.light,
@@ -771,7 +771,7 @@ export default function DashboardPage() {
</div>
</CardContent>
</Card>
<Card className="rounded-2xl border-0 lg:col-span-2">
<Card className="border-0 rounded-2xl lg:col-span-2">
<CardContent className="p-5 space-y-3">
<div className="flex items-center justify-between">
<div
@@ -784,7 +784,7 @@ export default function DashboardPage() {
</div>
<div className="space-y-2 text-sm">
<div className="flex items-center gap-2">
<Server className="h-4 w-4" /> Nginx Reverse Proxy{" "}
<Server className="w-4 h-4" /> Nginx Reverse Proxy{" "}
<span
className="ml-auto font-medium"
style={{ color: sea.dark }}
@@ -793,7 +793,7 @@ export default function DashboardPage() {
</span>
</div>
<div className="flex items-center gap-2">
<Database className="h-4 w-4" /> MariaDB 10.11{" "}
<Database className="w-4 h-4" /> MariaDB 10.11{" "}
<span
className="ml-auto font-medium"
style={{ color: sea.dark }}
@@ -802,7 +802,7 @@ export default function DashboardPage() {
</span>
</div>
<div className="flex items-center gap-2">
<Workflow className="h-4 w-4" /> n8n (Postgres){" "}
<Workflow className="w-4 h-4" /> n8n (Postgres){" "}
<span
className="ml-auto font-medium"
style={{ color: sea.dark }}
@@ -811,7 +811,7 @@ export default function DashboardPage() {
</span>
</div>
<div className="flex items-center gap-2">
<Shield className="h-4 w-4" /> RBAC Enforcement{" "}
<Shield className="w-4 h-4" /> RBAC Enforcement{" "}
<span
className="ml-auto font-medium"
style={{ color: sea.dark }}
@@ -835,7 +835,7 @@ export default function DashboardPage() {
</CardContent>
</Card>
</div>
<Card className="rounded-2xl border-0">
<Card className="border-0 rounded-2xl">
<CardContent className="p-5">
<div className="flex items-center justify-between mb-3">
<div
@@ -850,11 +850,11 @@ export default function DashboardPage() {
<Tag>Viewer</Tag>
</div>
</div>
<div className="grid md:grid-cols-2 xl:grid-cols-4 gap-3">
<div className="grid gap-3 md:grid-cols-2 xl:grid-cols-4">
{recent.map((r) => (
<div
key={r.code}
className="rounded-2xl p-4 border hover:shadow-sm transition"
className="p-4 transition border rounded-2xl hover:shadow-sm"
style={{
background: "white",
borderColor: "#efefef",
@@ -864,12 +864,12 @@ export default function DashboardPage() {
{r.type} • {r.code}
</div>
<div
className="font-medium mt-1"
className="mt-1 font-medium"
style={{ color: sea.textDark }}
>
{r.title}
</div>
<div className="text-xs mt-2 opacity-70">{r.who}</div>
<div className="mt-2 text-xs opacity-70">{r.who}</div>
<div className="text-xs opacity-70">{r.when}</div>
</div>
))}
@@ -878,11 +878,11 @@ export default function DashboardPage() {
</Card>
</TabsContent>
<TabsContent value="reports" className="mt-4">
<div className="grid lg:grid-cols-2 gap-4">
<Card className="rounded-2xl border-0">
<div className="grid gap-4 lg:grid-cols-2">
<Card className="border-0 rounded-2xl">
<CardContent className="p-5">
<div
className="font-semibold mb-2"
className="mb-2 font-semibold"
style={{ color: sea.textDark }}
>
Report A: RFA → Drawings → Revisions
@@ -897,10 +897,10 @@ export default function DashboardPage() {
</div>
</CardContent>
</Card>
<Card className="rounded-2xl border-0">
<Card className="border-0 rounded-2xl">
<CardContent className="p-5">
<div
className="font-semibold mb-2"
className="mb-2 font-semibold"
style={{ color: sea.textDark }}
>
Report B: ไทม์ไลน์ RFA vs Drawing Rev
@@ -919,7 +919,7 @@ export default function DashboardPage() {
</TabsContent>
</Tabs>
<div className="text-xs opacity-70 text-center py-6">
<div className="py-6 text-xs text-center opacity-70">
Sea-themed Dashboard • Sidebar ซ่อนได้ • RBAC แสดง/ซ่อน • Faceted
search • KPI click-through • Preview drawer • Column
visibility/Density
@@ -942,7 +942,7 @@ export default function DashboardPage() {
<div>
<span className="opacity-70">แนบไฟล์:</span> 2 รายการ (PDF, DWG)
</div>
<div className="pt-2 flex gap-2">
<div className="flex gap-2 pt-2">
{can(user, "rfa:create") && (
<Button className="btn-sea rounded-xl">แก้ไข</Button>
)}

220
frontend/app/(protected)/rfas/new/page.jsx
View File

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

270
frontend/app/(protected)/rfas/page.jsx
View File

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

216
frontend/app/(protected)/transmittals/new/page.jsx
View File

@@ -1,108 +1,108 @@
+ "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 TransmittalNew() {
+ 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({
+ subject: "", number: "", to_party: "", sent_date: "", description: ""
+ });
+ const [errs, setErrs] = React.useState({});
+
+ const validate = (f) => {
+ const e = {};
+ if (!f.subject?.trim()) e.subject = "กรุณากรอกเรื่อง (Subject)";
+ if (!f.to_party?.trim()) e.to_party = "กรุณาระบุผู้รับ (To)";
+ if (!f.sent_date) e.sent_date = "กรุณาระบุวันที่ส่ง";
+ return e;
+ };
+
+ const tRef = React.useRef(0);
+ React.useEffect(() => {
+ clearTimeout(tRef.current);
+ tRef.current = window.setTimeout(async () => {
+ const e = validate(form);
+ setErrs(e);
+ try {
+ setSaving(true);
+ if (!draftId) {
+ const res = await api("/transmittals", { method: "POST", body: { ...form, status: "draft" } });
+ setDraftId(res.id);
+ } else {
+ await api(`/transmittals/${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(`/transmittals/${draftId}`, { method: "PATCH", body: { ...form, status: "submitted" } })).id || draftId
+ : (await api("/transmittals", { method: "POST", body: { ...form, status: "submitted" } })).id;
+ router.replace(`/transmittals`);
+ } catch (err) {
+ setError(err.message || "ส่ง Transmittal ไม่สำเร็จ");
+ } finally {
+ setSaving(false);
+ }
+ };
+
+ return (
+ <form onSubmit={onSubmit} className="space-y-4 rounded-2xl p-5 bg-white">
+ <div className="text-lg font-semibold">สร้าง Transmittal</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">เรื่อง (Subject) *</label>
+ <Input value={form.subject} onChange={(e)=>setForm(f=>({...f, subject:e.target.value}))}/>
+ {errs.subject && <div className="text-xs text-red-600 mt-1">{errs.subject}</div>}
+ </div>
+ <div>
+ <label className="text-sm">เลขที่ (ถ้ามี)</label>
+ <Input value={form.number} onChange={(e)=>setForm(f=>({...f, number:e.target.value}))}/>
+ </div>
+ <div>
+ <label className="text-sm">ถึง (To) *</label>
+ <Input value={form.to_party} onChange={(e)=>setForm(f=>({...f, to_party:e.target.value}))}/>
+ {errs.to_party && <div className="text-xs text-red-600 mt-1">{errs.to_party}</div>}
+ </div>
+ <div>
+ <label className="text-sm">วันที่ส่ง *</label>
+ <input type="date" className="border rounded-xl p-2 w-full" value={form.sent_date}
+ onChange={(e)=>setForm(f=>({...f, sent_date:e.target.value}))}/>
+ {errs.sent_date && <div className="text-xs text-red-600 mt-1">{errs.sent_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}>ส่ง Transmittal</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 TransmittalNew() {
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({
subject: "", number: "", to_party: "", sent_date: "", description: ""
});
const [errs, setErrs] = React.useState({});
const validate = (f) => {
const e = {};
if (!f.subject?.trim()) e.subject = "กรุณากรอกเรื่อง (Subject)";
if (!f.to_party?.trim()) e.to_party = "กรุณาระบุผู้รับ (To)";
if (!f.sent_date) e.sent_date = "กรุณาระบุวันที่ส่ง";
return e;
};
const tRef = React.useRef(0);
React.useEffect(() => {
clearTimeout(tRef.current);
tRef.current = window.setTimeout(async () => {
const e = validate(form);
setErrs(e);
try {
setSaving(true);
if (!draftId) {
const res = await api("/transmittals", { method: "POST", body: { ...form, status: "draft" } });
setDraftId(res.id);
} else {
await api(`/transmittals/${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(`/transmittals/${draftId}`, { method: "PATCH", body: { ...form, status: "submitted" } })).id || draftId
: (await api("/transmittals", { method: "POST", body: { ...form, status: "submitted" } })).id;
router.replace(`/transmittals`);
} catch (err) {
setError(err.message || "ส่ง Transmittal ไม่สำเร็จ");
} finally {
setSaving(false);
}
};
return (
<form onSubmit={onSubmit} className="space-y-4 rounded-2xl p-5 bg-white">
<div className="text-lg font-semibold">สร้าง Transmittal</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">เรื่อง (Subject) *</label>
<Input value={form.subject} onChange={(e)=>setForm(f=>({...f, subject:e.target.value}))}/>
{errs.subject && <div className="text-xs text-red-600 mt-1">{errs.subject}</div>}
</div>
<div>
<label className="text-sm">เลขที่ (ถ้ามี)</label>
<Input value={form.number} onChange={(e)=>setForm(f=>({...f, number:e.target.value}))}/>
</div>
<div>
<label className="text-sm">ถึง (To) *</label>
<Input value={form.to_party} onChange={(e)=>setForm(f=>({...f, to_party:e.target.value}))}/>
{errs.to_party && <div className="text-xs text-red-600 mt-1">{errs.to_party}</div>}
</div>
<div>
<label className="text-sm">วันที่ส่ง *</label>
<input type="date" className="border rounded-xl p-2 w-full" value={form.sent_date}
onChange={(e)=>setForm(f=>({...f, sent_date:e.target.value}))}/>
{errs.sent_date && <div className="text-xs text-red-600 mt-1">{errs.sent_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}>ส่ง Transmittal</Button>
<span className="text-sm opacity-70">
{saving ? "กำลังบันทึก…" : savedAt ? `บันทึกล่าสุด ${savedAt.toLocaleTimeString()}` : "ยังไม่เคยบันทึก"}
</span>
</div>
</form>
);
}

192
frontend/app/(protected)/transmittals/page.jsx
View File

@@ -1,96 +1,96 @@
+ "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 TransmittalsPage() {
+ const router = useRouter();
+ const pathname = usePathname();
+ const sp = useSearchParams();
+
+ const [q, setQ] = React.useState(sp.get("q") || "");
+ const page = Number(sp.get("page") || 1);
+ const pageSize = Number(sp.get("pageSize") || 20);
+ const sort = sp.get("sort") || "sent_date:desc";
+
+ const setParams = (patch) => {
+ const curr = Object.fromEntries(sp.entries());
+ const next = { ...curr, ...patch };
+ if (!next.q) delete next.q;
+ 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 === "sent_date: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("");
+
+ React.useEffect(() => {
+ setLoading(true); setError("");
+ apiGet("/transmittals", { q, page, pageSize, sort })
+ .then((res) => { 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="ค้นหา Transmittal (เลขที่/เรื่อง/ถึงใคร)"
+ value={q}
+ onChange={(e) => setQ(e.target.value)}
+ onKeyDown={(e) => e.key === "Enter" && setParams({ q, page: 1 })}
+ />
+ <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>
+ </tr>
+ </thead>
+ <tbody>
+ {loading && <tr><td className="py-6 px-3" colSpan={4}>กำลังโหลด…</td></tr>}
+ {error && !loading && <tr><td className="py-6 px-3 text-red-600" colSpan={4}>{error}</td></tr>}
+ {!loading && !error && rows.length === 0 && <tr><td className="py-6 px-3 opacity-70" colSpan={4}>ไม่พบข้อมูล</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.number || r.id}</td>
+ <td className="py-2 px-3">{r.subject}</td>
+ <td className="py-2 px-3">{r.to_party}</td>
+ <td className="py-2 px-3">{r.sent_date || "—"}</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 TransmittalsPage() {
const router = useRouter();
const pathname = usePathname();
const sp = useSearchParams();
const [q, setQ] = React.useState(sp.get("q") || "");
const page = Number(sp.get("page") || 1);
const pageSize = Number(sp.get("pageSize") || 20);
const sort = sp.get("sort") || "sent_date:desc";
const setParams = (patch) => {
const curr = Object.fromEntries(sp.entries());
const next = { ...curr, ...patch };
if (!next.q) delete next.q;
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 === "sent_date: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("");
React.useEffect(() => {
setLoading(true); setError("");
apiGet("/transmittals", { q, page, pageSize, sort })
.then((res) => { 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="ค้นหา Transmittal (เลขที่/เรื่อง/ถึงใคร)"
value={q}
onChange={(e) => setQ(e.target.value)}
onKeyDown={(e) => e.key === "Enter" && setParams({ q, page: 1 })}
/>
<Button onClick={() => setParams({ q, page: 1 })}>ค้นหา</Button>
</div>
<Card className="border-0 rounded-2xl">
<CardContent className="p-0">
<div className="overflow-x-auto">
<table className="min-w-full text-sm">
<thead className="sticky top-0 bg-white border-b">
<tr className="text-left">
<th className="px-3 py-2">เลขที่</th>
<th className="px-3 py-2">เรื่อง</th>
<th className="px-3 py-2">ถึง</th>
<th className="px-3 py-2">วันที่ส่ง</th>
</tr>
</thead>
<tbody>
{loading && <tr><td className="px-3 py-6" colSpan={4}>กำลังโหลด…</td></tr>}
{error && !loading && <tr><td className="px-3 py-6 text-red-600" colSpan={4}>{error}</td></tr>}
{!loading && !error && rows.length === 0 && <tr><td className="px-3 py-6 opacity-70" colSpan={4}>ไม่พบข้อมูล</td></tr>}
{!loading && !error && rows.map((r) => (
<tr key={r.id} className="border-b hover:bg-gray-50">
<td className="px-3 py-2 font-mono">{r.number || r.id}</td>
<td className="px-3 py-2">{r.subject}</td>
<td className="px-3 py-2">{r.to_party}</td>
<td className="px-3 py-2">{r.sent_date || "—"}</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>
);
}