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