-
-
-
-
onChange({ search: event.target.value })}
- placeholder="Search the plate database"
- className="pl-9"
+
+
+
+
-
-
-
onChange({ matchMode })}
- settings={matchingSettings}
- className="w-full"
- />
-
- Controls how closely plate characters must match this search.
-
-
-
-
-
-
- onChange({ tags })}
- className="w-full"
- />
-
+
-
-
-
onChange({ cameraNames })}
- className="w-full"
- />
+
+
+
+ per page
+
-
-
- onChange({ dateRange: { ...filters.dateRange, from: event.target.value } })}
- />
-
-
-
- onChange({ dateRange: { ...filters.dateRange, to: event.target.value } })}
- />
-
+ {isOpen && (
+
+
+
+
+
+ onChange({ search: event.target.value })}
+ placeholder="Search plates, names, or notes..."
+ className="h-9 pl-9 dark:bg-[#161618]"
+ />
+
+
+
+
onChange({ matchMode })}
+ settings={matchingSettings}
+ className="h-9 w-full"
+ />
+
+
+
+ onChange({ tags })}
+ className="h-9 w-full dark:bg-[#161618]"
+ />
+
+
+
+ onChange({ cameraNames })}
+ className="h-9 w-full dark:bg-[#161618]"
+ />
+
+
+
onChange({ hourRange })}
+ timeFormat={timeFormat}
+ />
+
+
+ )}
+
-
-
-
-
-
-
-
-
-
- )}
+
+ {hasActiveFilters && (
+ <>
+
Active filters:
+ {filters.search.trim() &&
Search: {filters.search.trim()}}
+ {filters.tags.length > 0 &&
Tags: {filters.tags.join(", ")}}
+ {filters.cameraNames.length > 0 &&
Cameras: {filters.cameraNames.join(", ")}}
+ {(filters.dateRange.from || filters.dateRange.to) && (
+
Date: {filters.dateRange.from || "Any"} - {filters.dateRange.to || "Any"}
+ )}
+ {filters.hourRange && (
+
Hours: {filters.hourRange.from} - {filters.hourRange.to}
+ )}
+
+
+ )}
-
-
{can("export.create") && (
-
);
diff --git a/components/PlateExportForm.jsx b/components/PlateExportForm.jsx
index 5f9c383d..2e835a79 100644
--- a/components/PlateExportForm.jsx
+++ b/components/PlateExportForm.jsx
@@ -2,38 +2,44 @@
import { useMemo, useState } from "react";
import { useSearchParams } from "next/navigation";
-import { Download, FileJson, FileSpreadsheet, Search } from "lucide-react";
+import { format } from "date-fns";
+import {
+ ChevronDown,
+ Download,
+ FileJson,
+ FileSpreadsheet,
+ Search,
+ X,
+} from "lucide-react";
+import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import PlateMatchModeSelect from "@/components/PlateMatchModeSelect";
import MultiSelectFilter from "@/components/MultiSelectFilter";
+import LiveFeedDateRangeFilter from "@/components/LiveFeedDateRangeFilter";
+import FilterHourRange from "@/components/FilterHourRange";
import {
readPlateMatchPreference,
writePlateMatchPreference,
} from "@/lib/plate-match-preference.mjs";
-import {
- Select,
- SelectContent,
- SelectItem,
- SelectTrigger,
- SelectValue,
-} from "@/components/ui/select";
-
-const HOURS = Array.from({ length: 24 }, (_, hour) => hour);
-function hourLabel(hour) {
- const suffix = hour >= 12 ? "PM" : "AM";
- return `${hour % 12 || 12}:00 ${suffix}`;
+function localDate(value) {
+ if (!value) return null;
+ const [year, month, day] = value.split("-").map(Number);
+ const date = new Date(year, month - 1, day);
+ return Number.isNaN(date.getTime()) ? null : date;
}
export default function PlateExportForm({
tags = [],
cameras = [],
matchingSettings,
+ timeFormat = 12,
}) {
const searchParams = useSearchParams();
+ const [isOpen, setIsOpen] = useState(false);
const [search, setSearch] = useState(() => searchParams.get("search") || "");
const [matchMode, setMatchMode] = useState(
() =>
@@ -82,15 +88,38 @@ export default function PlateExportForm({
selectedTags,
]);
- const startDownload = (format) => {
+ const dateRange = { from: localDate(dateFrom), to: localDate(dateTo) };
+ const hourRange =
+ hourFrom !== "all" && hourTo !== "all"
+ ? { from: Number(hourFrom), to: Number(hourTo) }
+ : null;
+ const hasActiveFilters = Boolean(
+ search.trim() ||
+ selectedTags.length ||
+ selectedCameras.length ||
+ dateFrom ||
+ dateTo ||
+ hourRange
+ );
+
+ const startDownload = (downloadFormat) => {
const params = new URLSearchParams(query);
- params.set("format", format);
+ params.set("format", downloadFormat);
window.location.assign(`/api/exports/plates?${params.toString()}`);
};
const handleMatchModeChange = (mode) => {
- const persistedMode = writePlateMatchPreference("downloads", mode);
- setMatchMode(persistedMode);
+ setMatchMode(writePlateMatchPreference("downloads", mode));
+ };
+
+ const handleDateRangeChange = (range) => {
+ setDateFrom(range ? format(range.from, "yyyy-MM-dd") : "");
+ setDateTo(range ? format(range.to, "yyyy-MM-dd") : "");
+ };
+
+ const handleHourRangeChange = (range) => {
+ setHourFrom(range ? String(range.from) : "all");
+ setHourTo(range ? String(range.to) : "all");
};
const clearFilters = () => {
@@ -104,125 +133,145 @@ export default function PlateExportForm({
};
return (
-
+
Export Plate Database
- Download up to 50,000 matching plate records. Filters use the same
- plate, tag, camera, date, and time rules as Plate Database.
+ Download matching database text and timestamps as CSV or JSON.
-
-
-
-
-
-
- setSearch(event.target.value)}
- placeholder="Search matching records"
- className="pl-9"
- />
-
-
-
-
+
+
+
+
+ Up to
+ 50,000
+ rows
-
-
- ({
- value: item.name,
- label: item.name,
- color: item.color,
- })),
- ]}
- exclusiveValues={["untagged"]}
- onChange={setSelectedTags}
- className="w-full"
- />
-
-
-
-
- ({ value: item, label: item }))}
- onChange={setSelectedCameras}
- className="w-full"
- />
-
-
-
-
- setDateFrom(event.target.value)} />
-
-
-
- setDateTo(event.target.value)} />
-
+ {isOpen && (
+
+
+
+
+
+ setSearch(event.target.value)}
+ placeholder="Search plates, names, or notes..."
+ className="h-9 pl-9 dark:bg-[#161618]"
+ />
+
+
+
+
+ ({
+ value: item.name,
+ label: item.name,
+ color: item.color,
+ })),
+ ]}
+ exclusiveValues={["untagged"]}
+ onChange={setSelectedTags}
+ className="h-9 w-full dark:bg-[#161618]"
+ />
+
+
+
+ ({ value: item, label: item }))}
+ onChange={setSelectedCameras}
+ className="h-9 w-full dark:bg-[#161618]"
+ />
+
+
+
+
+
+ )}
+
-
-
-
-
-
-
+ {hasActiveFilters && (
+
+ Active filters:
+ {search.trim() && Search: {search.trim()}}
+ {selectedTags.length > 0 && Tags: {selectedTags.join(", ")}}
+ {selectedCameras.length > 0 && Cameras: {selectedCameras.join(", ")}}
+ {(dateFrom || dateTo) && Date: {dateFrom || "Any"} - {dateTo || "Any"}}
+ {hourRange && Hours: {hourRange.from} - {hourRange.to}}
+
-
+
-
+
+ Exports contain database text and timestamps only.
+
-
- Exports contain database text and timestamps only. Image ZIP export
- remains deferred until user roles and export auditing are available.
-