diff --git a/App/app/(portal)/history/history-filters.tsx b/App/app/(portal)/history/history-filters.tsx index 16b4132..3a63901 100644 --- a/App/app/(portal)/history/history-filters.tsx +++ b/App/app/(portal)/history/history-filters.tsx @@ -1,10 +1,9 @@ "use client"; import { useRouter, useSearchParams } from "next/navigation"; -import { useState } from "react"; +import { useEffect, useRef, useState } from "react"; const STATUSES = [ - { value: "", label: "All statuses" }, { value: "DRAFT", label: "Draft" }, { value: "SUBMITTED", label: "Submitted" }, { value: "MGR_REVIEW", label: "Pending Approval" }, @@ -28,23 +27,48 @@ export function HistoryFilters({ vessels }: Props) { const [dateFrom, setDateFrom] = useState(sp.get("dateFrom") ?? ""); const [dateTo, setDateTo] = useState(sp.get("dateTo") ?? ""); const [vesselId, setVesselId] = useState(sp.get("vesselId") ?? ""); - const [status, setStatus] = useState(sp.get("status") ?? ""); + const [statuses, setStatuses] = useState(sp.getAll("status")); + const [statusOpen, setStatusOpen] = useState(false); + const statusRef = useRef(null); + + useEffect(() => { + function onClick(e: MouseEvent) { + if (statusRef.current && !statusRef.current.contains(e.target as Node)) { + setStatusOpen(false); + } + } + document.addEventListener("mousedown", onClick); + return () => document.removeEventListener("mousedown", onClick); + }, []); + + function toggleStatus(value: string) { + setStatuses((prev) => + prev.includes(value) ? prev.filter((s) => s !== value) : [...prev, value] + ); + } function apply() { const params = new URLSearchParams(); if (dateFrom) params.set("dateFrom", dateFrom); if (dateTo) params.set("dateTo", dateTo); if (vesselId) params.set("vesselId", vesselId); - if (status) params.set("status", status); + for (const s of statuses) params.append("status", s); router.push(`/history?${params.toString()}`); } function clear() { - setDateFrom(""); setDateTo(""); setVesselId(""); setStatus(""); + setDateFrom(""); setDateTo(""); setVesselId(""); setStatuses([]); router.push("/history"); } - const hasFilters = dateFrom || dateTo || vesselId || status; + const hasFilters = dateFrom || dateTo || vesselId || statuses.length > 0; + + const statusLabel = + statuses.length === 0 + ? "All statuses" + : statuses.length === 1 + ? (STATUSES.find((s) => s.value === statuses[0])?.label ?? statuses[0]) + : `${statuses.length} statuses`; return (
@@ -67,12 +91,26 @@ export function HistoryFilters({ vessels }: Props) { {vessels.map((v) => )}
-
+
- + + {statusOpen && ( +
+ {STATUSES.map((s) => ( + + ))} +
+ )}
diff --git a/App/app/(portal)/history/page.tsx b/App/app/(portal)/history/page.tsx index 3f47f90..bbbd230 100644 --- a/App/app/(portal)/history/page.tsx +++ b/App/app/(portal)/history/page.tsx @@ -17,7 +17,7 @@ interface Props { dateFrom?: string; dateTo?: string; vesselId?: string; - status?: string; + status?: string | string[]; }>; } @@ -41,7 +41,8 @@ export default async function HistoryPage({ searchParams }: Props) { where.createdAt = createdAt; } if (vesselId) where.vesselId = vesselId; - if (status) where.status = status as POStatus; + const statuses = (Array.isArray(status) ? status : status ? [status] : []).filter(Boolean); + if (statuses.length > 0) where.status = { in: statuses as POStatus[] }; const [orders, vessels] = await Promise.all([ db.purchaseOrder.findMany({ @@ -57,7 +58,7 @@ export default async function HistoryPage({ searchParams }: Props) { if (dateFrom) exportParams.set("dateFrom", dateFrom); if (dateTo) exportParams.set("dateTo", dateTo); if (vesselId) exportParams.set("vesselId", vesselId); - if (status) exportParams.set("status", status); + for (const s of statuses) exportParams.append("status", s); return (
diff --git a/App/app/api/reports/export/route.ts b/App/app/api/reports/export/route.ts index a5aa672..9c3865b 100644 --- a/App/app/api/reports/export/route.ts +++ b/App/app/api/reports/export/route.ts @@ -25,7 +25,7 @@ export async function GET(request: NextRequest) { const dateFrom = sp.get("dateFrom"); const dateTo = sp.get("dateTo"); const vesselId = sp.get("vesselId"); - const status = sp.get("status"); + const statuses = sp.getAll("status").filter(Boolean); const where: NonNullable[0]>["where"] = {}; if (dateFrom || dateTo) { @@ -39,7 +39,7 @@ export async function GET(request: NextRequest) { where.createdAt = createdAt; } if (vesselId) where.vesselId = vesselId; - if (status) where.status = status as POStatus; + if (statuses.length > 0) where.status = { in: statuses as POStatus[] }; const orders = await db.purchaseOrder.findMany({ where,