135 lines
6.1 KiB
JavaScript
Executable File
135 lines
6.1 KiB
JavaScript
Executable File
+ "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>
|
|
+ );
|
|
+ } |