tr]:last:border-b-0 dark:bg-zinc-800/50",
33 | className
34 | )}
35 | {...props} />
36 | ))
37 | TableFooter.displayName = "TableFooter"
38 |
39 | const TableRow = React.forwardRef(({ className, ...props }, ref) => (
40 | [role=checkbox]]:translate-y-[2px] dark:text-zinc-400",
55 | className
56 | )}
57 | {...props} />
58 | ))
59 | TableHead.displayName = "TableHead"
60 |
61 | const TableCell = React.forwardRef(({ className, ...props }, ref) => (
62 | [role=checkbox]]:translate-y-[2px]",
66 | className
67 | )}
68 | {...props} />
69 | ))
70 | TableCell.displayName = "TableCell"
71 |
72 | const TableCaption = React.forwardRef(({ className, ...props }, ref) => (
73 |
32 |
40 |
42 | {children}
43 |
44 |
45 | ))
46 | DrawerContent.displayName = "DrawerContent"
47 |
48 | const DrawerHeader = ({
49 | className,
50 | ...props
51 | }) => (
52 |
55 | )
56 | DrawerHeader.displayName = "DrawerHeader"
57 |
58 | const DrawerFooter = ({
59 | className,
60 | ...props
61 | }) => (
62 |
63 | )
64 | DrawerFooter.displayName = "DrawerFooter"
65 |
66 | const DrawerTitle = React.forwardRef(({ className, ...props }, ref) => (
67 |
57 | Previous
59 |
60 | )
61 | PaginationPrevious.displayName = "PaginationPrevious"
62 |
63 | const PaginationNext = ({
64 | className,
65 | ...props
66 | }) => (
67 |
72 | Next
73 |
75 | )
76 | PaginationNext.displayName = "PaginationNext"
77 |
78 | const PaginationEllipsis = ({
79 | className,
80 | ...props
81 | }) => (
82 |
86 | More pages
88 |
89 | )
90 | PaginationEllipsis.displayName = "PaginationEllipsis"
91 |
92 | export {
93 | Pagination,
94 | PaginationContent,
95 | PaginationLink,
96 | PaginationItem,
97 | PaginationPrevious,
98 | PaginationNext,
99 | PaginationEllipsis,
100 | }
101 |
--------------------------------------------------------------------------------
/components/ImageViewer.jsx:
--------------------------------------------------------------------------------
1 | import { useState, useRef, useEffect } from "react";
2 | import { Slider } from "@/components/ui/slider";
3 | import { Button } from "@/components/ui/button";
4 | import { ZoomIn } from "lucide-react";
5 | import NextImage from "next/image";
6 |
7 | const ImageViewer = ({ image }) => {
8 | const [zoom, setZoom] = useState(1);
9 | const [imageSize, setImageSize] = useState(null);
10 | const containerRef = useRef(null);
11 |
12 | useEffect(() => {
13 | const img = new Image();
14 | img.onload = () => {
15 | setImageSize({ width: img.width, height: img.height });
16 | };
17 | img.src = image.url;
18 | }, [image.url]);
19 |
20 | const getImageStyle = () => {
21 | if (zoom === 1 || !image?.crop_coordinates || !imageSize) {
22 | return {
23 | transform: "none",
24 | width: "100%",
25 | height: "100%",
26 | };
27 | }
28 |
29 | const [xMin, yMin, xMax, yMax] = image.crop_coordinates;
30 |
31 | // Calculate true center point of the plate
32 | const centerX = xMin + (xMax - xMin) / 2;
33 | const centerY = yMin + (yMax - yMin) / 2;
34 |
35 | // Calculate percentage positions using actual image dimensions
36 | const originX = (centerX / imageSize.width) * 100;
37 | const originY = (centerY / imageSize.height) * 100;
38 |
39 | return {
40 | transform: `scale(${zoom})`,
41 | transformOrigin: `${originX}% ${originY}%`,
42 | width: "100%",
43 | height: "100%",
44 | transition: "transform 0.2s ease-out",
45 | };
46 | };
47 |
48 | return (
49 |
50 |
65 | {image?.crop_coordinates && (
66 |
67 |
setZoom(1)}>
68 | Reset
69 |
70 | {image?.crop_coordinates && (
71 |
setZoom(3)}>
72 |
75 | )}
76 |
77 | setZoom(newZoom)}
80 | min={1}
81 | max={5}
82 | step={0.1}
83 | className="w-full"
84 | />
85 |
86 |
87 | )}
88 |
49 |
50 | Generate Training Data
51 |
52 |
53 |
54 | Generate and upload training data from your validated plate reads.
55 | This process will:
56 |
57 |
58 | Process validated and unvalidated plate reads
59 |
60 | Generate training datasets for both OCR and license plate detection
61 |
62 | Upload the data securely to the training server
63 |
64 |
65 | {status && (
66 |
67 |
68 | {status.split("\n").map((line, i) => (
69 | {line}
70 | ))}
71 |
72 |
73 | )}
74 |
75 | {error && (
76 |
77 | {error}
78 |
79 | )}
80 |
81 |
82 |
83 | {isGenerating &&
86 |
87 |
88 | );
89 | }
90 |
--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
1 | # Changelog
2 |
3 | ## [0.1.9] - 08-15-2025
4 |
5 | - Support for MQTT as plate notification for HA
6 | - Staged code for AI vehicle descriptions and deep research agent
7 | - More UI improvements
8 | - Database setup fixes
9 | - Improved session management
10 | - Improved management of known plates and flags
11 | - Error handling for non-plate objects in AI dump
12 | - Hardened integration tests
13 |
14 | ## [0.1.8] - 03-19-2025
15 |
16 | **This is a major update. It will require some changes to your Blue Iris configuration and an update to the codeproject.ai ALPR module to take full advantage of the functionality.
17 | See release notes for more detail on how to update the other systems: https://github.com/algertc/ALPR-Database/releases**
18 |
19 | - Automatic AI model training to improve recognition accuracy
20 | - Full UI/UX redux
21 | - Mobile Application
22 | - New secondary live view page similar to Motorola law enforcement UI
23 | - Additional dashboard metrics
24 | - Several bug fixes and other improvements
25 | - Foundation for soon-to-come RF fingerprinting functionality
26 |
27 | ## [0.1.7] - 02-11-2025
28 |
29 | - Complete overhaul of image storage system
30 | - Tables UI improved with more advanced filtering and sorting
31 | - Manually add known plates without prior detection
32 | - Plate image viewer with integrated actions
33 | - System logs page
34 | - Improved timestamp display and time zone handling
35 | - Automatic install and update scripts
36 | - A variety of other bug fixes and performance improvements
37 | - **This update is a major change and will require existing users to complete the update process within the app to migrate their images**
38 |
39 | ## [0.1.6] - 01-03-2025
40 |
41 | - Live update of recognition feed
42 | - New dashboard visualizations & controls
43 | - Speed & loading improvements
44 | - Ability to edit tag name and color
45 | - More sensible default database sorting
46 | - Set ignore flag on known plates to exclude from database
47 | - Time formatting fix
48 | - **Requires new migrations.sql update from GitHub**
49 |
50 | ## [0.1.5] - 12-09-2024
51 |
52 | - Support for 24 hour time
53 | - Fixed max records pruning
54 | - Time based recognition filtering
55 | - Pagination for database page
56 | - Notification time zone fix
57 | - Live feed plate image modal
58 | - UI Improvements
59 |
60 | ## [0.1.4] - 12-01-2024
61 |
62 | - Added camera name column to live feed. Optionally send with "camera":"&CAM" or &NAME for long name.
63 | - Additional sorting options in plate database
64 | - Auth bypass for HomeAssistant dashboards
65 | - Database migration fix (**Requires new migrations.sql file from GitHub**)
66 | - Ability to correct/edit OCR recognitions in the live feed
67 |
68 | ## [0.1.3] - 11-20-2024
69 |
70 | - Database Pruning Fix
71 |
72 | ## [0.1.2] - 11-20-2024
73 |
74 | - Push Notification bug fixes and improvements
75 |
76 | ## [0.1.1] - 11-19-2024
77 |
78 | - Fixed Docker volume mappings
79 | - Fuzzy search
80 | - Optionally use &MEMO instead of &PLATE to capture multiple plates in a single image
81 |
82 | ## [0.1.0] - 11-16-2024
83 |
84 | - Initial release
85 |
--------------------------------------------------------------------------------
/app/globals.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
4 |
5 | body {
6 | font-family: Arial, Helvetica, sans-serif;
7 | --webkit-tap-highlight-color: transparent;
8 | }
9 |
10 | @media (max-width: 900px) {
11 | ::-webkit-scrollbar {
12 | display: none;
13 | }
14 |
15 | * {
16 | -ms-overflow-style: none;
17 | scrollbar-width: none;
18 | }
19 | }
20 |
21 | @layer base {
22 | :root {
23 | --radius: 0.5rem;
24 | --sidebar-background: 0 0% 98%;
25 | --sidebar-foreground: 240 5.3% 26.1%;
26 | --sidebar-primary: 240 5.9% 10%;
27 | --sidebar-primary-foreground: 0 0% 98%;
28 | --sidebar-accent: 240 4.8% 95.9%;
29 | --sidebar-accent-foreground: 240 5.9% 10%;
30 | --sidebar-border: 220 13% 91%;
31 | --sidebar-ring: 217.2 91.2% 59.8%;
32 | --background: 0 0% 100%;
33 | --foreground: 240 10% 3.9%;
34 | --card: 0 0% 100%;
35 | --card-foreground: 240 10% 3.9%;
36 | --popover: 0 0% 100%;
37 | --popover-foreground: 240 10% 3.9%;
38 | --primary: 240 5.9% 10%;
39 | --primary-foreground: 0 0% 98%;
40 | --secondary: 240 4.8% 95.9%;
41 | --secondary-foreground: 240 5.9% 10%;
42 | --muted: 240 4.8% 95.9%;
43 | --muted-foreground: 240 3.8% 46.1%;
44 | --accent: 240 4.8% 95.9%;
45 | --accent-foreground: 240 5.9% 10%;
46 | --destructive: 339, 90%, 51%;
47 | --destructive-foreground: 0 0% 98%;
48 | --border: 240 5.9% 90%;
49 | --input: 240 5.9% 90%;
50 | --ring: 240 10% 3.9%;
51 | --chart-1: 221.2 83.2% 53.3%;
52 | --chart-2: 212 95% 68%;
53 | --chart-3: 216 92% 60%;
54 | --chart-4: 210 98% 78%;
55 | --chart-5: 212 97% 87%;
56 | }
57 | .dark {
58 | --sidebar-background: 240 5.9% 10%;
59 | --sidebar-foreground: 240 4.8% 95.9%;
60 | --sidebar-primary: 224.3 76.3% 48%;
61 | --sidebar-primary-foreground: 0 0% 100%;
62 | --sidebar-accent: 240 3.7% 15.9%;
63 | --sidebar-accent-foreground: 240 4.8% 95.9%;
64 | --sidebar-border: 240 3.7% 15.9%;
65 | --sidebar-ring: 217.2 91.2% 59.8%;
66 | --background: 240 10% 3.9%;
67 | --foreground: 0 0% 98%;
68 | --card: 240 10% 3.9%;
69 | --card-foreground: 0 0% 98%;
70 | --popover: 240 10% 3.9%;
71 | --popover-foreground: 0 0% 98%;
72 | --primary: 0 0% 99%;
73 | --primary-foreground: 240 5.9% 10%;
74 | --secondary: 240 3.7% 15.9%;
75 | --secondary-foreground: 0 0% 98%;
76 | --muted: 240 3.7% 15.9%;
77 | --muted-foreground: 240 5% 64.9%;
78 | --accent: 240 3.7% 15.9%;
79 | --accent-foreground: 0 0% 98%;
80 | --destructive: 339, 90%, 51%;
81 | --destructive-foreground: 339, 90%, 51%;
82 | --border: 240 3.7% 15.9%;
83 | --input: 240 3.7% 15.9%;
84 | --ring: 240 4.9% 83.9%;
85 | --chart-1: 221.2 83.2% 53.3%;
86 | --chart-2: 212 95% 68%;
87 | --chart-3: 216 92% 60%;
88 | --chart-4: 210 98% 78%;
89 | --chart-5: 212 97% 87%;
90 | }
91 | }
92 |
93 | @layer base {
94 | * {
95 | @apply border-border;
96 | }
97 | body {
98 | @apply bg-background text-foreground;
99 | }
100 | }
101 |
--------------------------------------------------------------------------------
/app/api/sse/route.js:
--------------------------------------------------------------------------------
1 | // app/api/sse/plate-reads/route.js
2 | // This file specifically handles the Server-Sent Events (SSE) endpoint.
3 | // It needs to be a Node.js runtime environment to manage persistent connections.
4 | // For self-hosted Docker, Next.js typically runs as a long-lived Node.js process,
5 | // allowing this in-memory `sseClients` array to persist.
6 |
7 | // IMPORTANT: For production deployments on Vercel or other serverless
8 | // platforms, this in-memory solution will NOT work across instances.
9 | // You would need a distributed pub/sub system (Redis, Pusher, etc.) instead.
10 |
11 | import { addSseClient, removeSseClient } from "@/lib/sse";
12 |
13 | // GET handler for Server-Sent Events
14 | export async function GET(req) {
15 | // Directly access the native Node.js `res` object
16 | // This is typically available when Next.js is run with `next start`
17 | // or a custom server in a Node.js environment.
18 | const res = req.res;
19 |
20 | if (!res) {
21 | console.error(
22 | "Native response object (res) not available for SSE. Ensure Node.js runtime."
23 | );
24 | return new Response(
25 | JSON.stringify({
26 | error: "SSE requires Node.js runtime & direct res access",
27 | }),
28 | { status: 500 }
29 | );
30 | }
31 |
32 | // Set SSE headers
33 | res.setHeader("Content-Type", "text/event-stream");
34 | res.setHeader("Cache-Control", "no-cache");
35 | res.setHeader("Connection", "keep-alive");
36 | res.setHeader("X-Accel-Buffering", "no"); // Disable buffering for proxies like Nginx
37 |
38 | // Send HTTP 200 OK headers
39 | res.writeHead(200);
40 |
41 | const clientId = addSseClient(res);
42 |
43 | // Send an initial heartbeat to confirm connection and prevent immediate timeouts
44 | res.write(
45 | `event: heartbeat\ndata: ${JSON.stringify({
46 | message: "initial-heartbeat",
47 | })}\n\n`
48 | );
49 |
50 | // Set up a periodic heartbeat to keep the connection alive (prevents proxy/browser timeouts)
51 | const heartbeatInterval = setInterval(() => {
52 | try {
53 | res.write(
54 | `event: heartbeat\ndata: ${JSON.stringify({
55 | message: "keep-alive",
56 | })}\n\n`
57 | );
58 | } catch (e) {
59 | console.error(
60 | `[SSE] Heartbeat failed for client ${clientId}, assuming disconnected.`
61 | );
62 | clearInterval(heartbeatInterval);
63 | removeSseClient(clientId);
64 | try {
65 | res.end();
66 | } catch (endErr) {
67 | /* ignore */
68 | }
69 | }
70 | }, 25000); // Send every 25 seconds
71 |
72 | // Clean up on client disconnection (browser tab closed, refresh, etc.)
73 | req.on("close", () => {
74 | console.log(`[SSE] Client ${clientId} connection closed.`);
75 | clearInterval(heartbeatInterval); // Clear the specific heartbeat for this client
76 | removeSseClient(clientId);
77 | try {
78 | res.end(); // Ensure the response is truly ended
79 | } catch (endErr) {
80 | /* ignore */
81 | }
82 | });
83 |
84 | // Return a promise that never resolves, so the connection stays open indefinitely
85 | return new Promise(() => {});
86 | }
87 |
--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('tailwindcss').Config} */
2 | module.exports = {
3 | darkMode: ["class"],
4 | content: [
5 | "./pages/**/*.{js,ts,jsx,tsx,mdx}",
6 | "./components/**/*.{js,ts,jsx,tsx,mdx}",
7 | "./app/**/*.{js,ts,jsx,tsx,mdx}",
8 | ],
9 | theme: {
10 | extend: {
11 | screens: {
12 | "2xl": "2000px",
13 | },
14 | colors: {
15 | background: "hsl(var(--background))",
16 | foreground: "hsl(var(--foreground))",
17 | sidebar: {
18 | DEFAULT: "hsl(var(--sidebar-background))",
19 | foreground: "hsl(var(--sidebar-foreground))",
20 | primary: "hsl(var(--sidebar-primary))",
21 | "primary-foreground": "hsl(var(--sidebar-primary-foreground))",
22 | accent: "hsl(var(--sidebar-accent))",
23 | "accent-foreground": "hsl(var(--sidebar-accent-foreground))",
24 | border: "hsl(var(--sidebar-border))",
25 | ring: "hsl(var(--sidebar-ring))",
26 | },
27 | card: {
28 | DEFAULT: "hsl(var(--card))",
29 | foreground: "hsl(var(--card-foreground))",
30 | },
31 | popover: {
32 | DEFAULT: "hsl(var(--popover))",
33 | foreground: "hsl(var(--popover-foreground))",
34 | },
35 | primary: {
36 | DEFAULT: "hsl(var(--primary))",
37 | foreground: "hsl(var(--primary-foreground))",
38 | },
39 | secondary: {
40 | DEFAULT: "hsl(var(--secondary))",
41 | foreground: "hsl(var(--secondary-foreground))",
42 | },
43 | muted: {
44 | DEFAULT: "hsl(var(--muted))",
45 | foreground: "hsl(var(--muted-foreground))",
46 | },
47 | accent: {
48 | DEFAULT: "hsl(var(--accent))",
49 | foreground: "hsl(var(--accent-foreground))",
50 | },
51 | destructive: {
52 | DEFAULT: "hsl(var(--destructive))",
53 | foreground: "hsl(var(--destructive-foreground))",
54 | },
55 | border: "hsl(var(--border))",
56 | input: "hsl(var(--input))",
57 | ring: "hsl(var(--ring))",
58 | chart: {
59 | 1: "hsl(var(--chart-1))",
60 | 2: "hsl(var(--chart-2))",
61 | 3: "hsl(var(--chart-3))",
62 | 4: "hsl(var(--chart-4))",
63 | 5: "hsl(var(--chart-5))",
64 | },
65 | },
66 | borderRadius: {
67 | lg: "var(--radius)",
68 | md: "calc(var(--radius) - 2px)",
69 | sm: "calc(var(--radius) - 4px)",
70 | },
71 | keyframes: {
72 | "accordion-down": {
73 | from: {
74 | height: "0",
75 | },
76 | to: {
77 | height: "var(--radix-accordion-content-height)",
78 | },
79 | },
80 | "accordion-up": {
81 | from: {
82 | height: "var(--radix-accordion-content-height)",
83 | },
84 | to: {
85 | height: "0",
86 | },
87 | },
88 | },
89 | animation: {
90 | "accordion-down": "accordion-down 0.2s ease-out",
91 | "accordion-up": "accordion-up 0.2s ease-out",
92 | },
93 | },
94 | },
95 | plugins: [require("tailwindcss-animate")],
96 | };
97 |
--------------------------------------------------------------------------------
/app/api/verify-whitelist/route.js:
--------------------------------------------------------------------------------
1 | import { getConfig } from "@/lib/settings";
2 | import { NextResponse } from "next/server";
3 |
4 | // Validates IPv4 address format
5 | const isValidIPv4 = (ip) => {
6 | const ipv4Regex = /^(\d{1,3}\.){3}\d{1,3}$/;
7 | if (!ipv4Regex.test(ip)) return false;
8 |
9 | const parts = ip.split(".");
10 | return parts.every((part) => {
11 | const num = parseInt(part, 10);
12 | return num >= 0 && num <= 255;
13 | });
14 | };
15 |
16 | // Validates IPv6 address format
17 | const isValidIPv6 = (ip) => {
18 | // Remove any leading/trailing brackets
19 | ip = ip.replace(/^\[|\]$/g, "");
20 |
21 | // Handle compressed IPv6 format
22 | const ipv6Regex =
23 | /^([0-9a-fA-F]{1,4}:){7}[0-9a-fA-F]{1,4}$|^(([0-9a-fA-F]{1,4}:){0,6}[0-9a-fA-F]{1,4})?::([0-9a-fA-F]{1,4}:){0,6}[0-9a-fA-F]{1,4}$/;
24 | return ipv6Regex.test(ip);
25 | };
26 |
27 | // Normalizes an IP address
28 | const normalizeIP = (ip) => {
29 | ip = ip.trim();
30 |
31 | // Handle IPv4-mapped IPv6 addresses
32 | if (ip.startsWith("::ffff:")) {
33 | ip = ip.substring(7);
34 | }
35 |
36 | // Remove any square brackets from IPv6
37 | ip = ip.replace(/^\[|\]$/g, "");
38 |
39 | return ip;
40 | };
41 |
42 | // Gets client IP from X-Forwarded-For header
43 | const getClientIP = (forwardedFor) => {
44 | if (!forwardedFor) return null;
45 |
46 | // Split the header into individual IPs
47 | const ips = forwardedFor.split(",").map((ip) => normalizeIP(ip));
48 |
49 | // Get the leftmost valid IP (original client)
50 | for (const ip of ips) {
51 | if (isValidIPv4(ip) || isValidIPv6(ip)) {
52 | return ip;
53 | }
54 | }
55 |
56 | return null;
57 | };
58 |
59 | export async function POST(request) {
60 | try {
61 | const { headers } = await request.json();
62 | const forwardedFor = headers["x-forwarded-for"];
63 | if (!forwardedFor) {
64 | console.warn("No X-Forwarded-For header present");
65 | return NextResponse.json({ allowed: false });
66 | }
67 |
68 | // Get the client IP from X-Forwarded-For header
69 | const clientIP = getClientIP(forwardedFor);
70 | if (!clientIP) {
71 | console.warn("No valid IP found in X-Forwarded-For header");
72 | return NextResponse.json({ allowed: false });
73 | }
74 |
75 | console.log("Checking IP:", clientIP);
76 |
77 | // Load the configuration data
78 | const config = await getConfig();
79 | const whitelist = config.homeassistant?.whitelist || [];
80 |
81 | if (whitelist.length === 0) {
82 | console.warn("No whitelisted IPs configured");
83 | return NextResponse.json({ allowed: false });
84 | }
85 |
86 | // Normalize all whitelist IPs and compare
87 | const normalizedWhitelist = whitelist.map(normalizeIP);
88 | const isAllowedIp = normalizedWhitelist.includes(normalizeIP(clientIP));
89 |
90 | if (!isAllowedIp) {
91 | console.warn(`IP ${clientIP} is not in the whitelist`);
92 | }
93 |
94 | return NextResponse.json({ allowed: isAllowedIp });
95 | } catch (error) {
96 | console.error("Error checking whitelisted IP:", error);
97 | return NextResponse.json({ allowed: false }, { status: 500 });
98 | }
99 | }
100 |
101 |
--------------------------------------------------------------------------------
/components/ui/calendar.jsx:
--------------------------------------------------------------------------------
1 | "use client";
2 | import * as React from "react"
3 | import { ChevronLeft, ChevronRight } from "lucide-react"
4 | import { DayPicker } from "react-day-picker"
5 |
6 | import { cn } from "@/lib/utils"
7 | import { buttonVariants } from "@/components/ui/button"
8 |
9 | function Calendar({
10 | className,
11 | classNames,
12 | showOutsideDays = true,
13 | ...props
14 | }) {
15 | return (
16 | (.day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md"
40 | : "[&:has([aria-selected])]:rounded-md"
41 | ),
42 | day: cn(
43 | buttonVariants({ variant: "ghost" }),
44 | "h-8 w-8 p-0 font-normal aria-selected:opacity-100"
45 | ),
46 | day_range_start: "day-range-start",
47 | day_range_end: "day-range-end",
48 | day_selected:
49 | "bg-zinc-900 text-zinc-50 hover:bg-zinc-900 hover:text-zinc-50 focus:bg-zinc-900 focus:text-zinc-50 dark:bg-zinc-50 dark:text-zinc-900 dark:hover:bg-zinc-50 dark:hover:text-zinc-900 dark:focus:bg-zinc-50 dark:focus:text-zinc-900",
50 | day_today: "bg-zinc-100 text-zinc-900 dark:bg-zinc-800 dark:text-zinc-50",
51 | day_outside:
52 | "day-outside text-zinc-500 aria-selected:bg-zinc-100/50 aria-selected:text-zinc-500 dark:text-zinc-400 dark:aria-selected:bg-zinc-800/50 dark:aria-selected:text-zinc-400",
53 | day_disabled: "text-zinc-500 opacity-50 dark:text-zinc-400",
54 | day_range_middle:
55 | "aria-selected:bg-zinc-100 aria-selected:text-zinc-900 dark:aria-selected:bg-zinc-800 dark:aria-selected:text-zinc-50",
56 | day_hidden: "invisible",
57 | ...classNames,
58 | }}
59 | components={{
60 | IconLeft: ({ ...props }) =>
5 |
11 |
34 |
35 |
40 |
41 |
44 |
--------------------------------------------------------------------------------
/components/ui/dialog.jsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import * as React from "react"
4 | import * as DialogPrimitive from "@radix-ui/react-dialog"
5 | import { X } from "lucide-react"
6 |
7 | import { cn } from "@/lib/utils"
8 |
9 | const Dialog = DialogPrimitive.Root
10 |
11 | const DialogTrigger = DialogPrimitive.Trigger
12 |
13 | const DialogPortal = DialogPrimitive.Portal
14 |
15 | const DialogClose = DialogPrimitive.Close
16 |
17 | const DialogOverlay = React.forwardRef(({ className, ...props }, ref) => (
18 |
30 |
38 | {children}
39 |
41 | Close
43 |
44 |
45 |
46 | ))
47 | DialogContent.displayName = DialogPrimitive.Content.displayName
48 |
49 | const DialogHeader = ({
50 | className,
51 | ...props
52 | }) => (
53 |
56 | )
57 | DialogHeader.displayName = "DialogHeader"
58 |
59 | const DialogFooter = ({
60 | className,
61 | ...props
62 | }) => (
63 |
66 | )
67 | DialogFooter.displayName = "DialogFooter"
68 |
69 | const DialogTitle = React.forwardRef(({ className, ...props }, ref) => (
70 |
20 | )
22 | );
23 | }
24 |
25 | const useFormField = () => {
26 | const fieldContext = React.useContext(FormFieldContext)
27 | const itemContext = React.useContext(FormItemContext)
28 | const { getFieldState, formState } = useFormContext()
29 |
30 | const fieldState = getFieldState(fieldContext.name, formState)
31 |
32 | if (!fieldContext) {
33 | throw new Error("useFormField should be used within ")
34 | }
35 |
36 | const { id } = itemContext
37 |
38 | return {
39 | id,
40 | name: fieldContext.name,
41 | formItemId: `${id}-form-item`,
42 | formDescriptionId: `${id}-form-item-description`,
43 | formMessageId: `${id}-form-item-message`,
44 | ...fieldState,
45 | }
46 | }
47 |
48 | const FormItemContext = React.createContext({})
49 |
50 | const FormItem = React.forwardRef(({ className, ...props }, ref) => {
51 | const id = React.useId()
52 |
53 | return (
54 | (
55 |
56 | )
57 | );
58 | })
59 | FormItem.displayName = "FormItem"
60 |
61 | const FormLabel = React.forwardRef(({ className, ...props }, ref) => {
62 | const { error, formItemId } = useFormField()
63 |
64 | return (
65 | (
)
101 | );
102 | })
103 | FormDescription.displayName = "FormDescription"
104 |
105 | const FormMessage = React.forwardRef(({ className, children, ...props }, ref) => {
106 | const { error, formMessageId } = useFormField()
107 | const body = error ? String(error?.message) : children
108 |
109 | if (!body) {
110 | return null
111 | }
112 |
113 | return (
114 | (
119 | {body}
120 |
)
121 | );
122 | })
123 | FormMessage.displayName = "FormMessage"
124 |
125 | export {
126 | useFormField,
127 | Form,
128 | FormItem,
129 | FormLabel,
130 | FormControl,
131 | FormDescription,
132 | FormMessage,
133 | FormField,
134 | }
135 |
--------------------------------------------------------------------------------
/hooks/use-toast.js:
--------------------------------------------------------------------------------
1 | "use client";
2 | // Inspired by react-hot-toast library
3 | import * as React from "react"
4 |
5 | const TOAST_LIMIT = 1
6 | const TOAST_REMOVE_DELAY = 1000000
7 |
8 | const actionTypes = {
9 | ADD_TOAST: "ADD_TOAST",
10 | UPDATE_TOAST: "UPDATE_TOAST",
11 | DISMISS_TOAST: "DISMISS_TOAST",
12 | REMOVE_TOAST: "REMOVE_TOAST"
13 | }
14 |
15 | let count = 0
16 |
17 | function genId() {
18 | count = (count + 1) % Number.MAX_SAFE_INTEGER
19 | return count.toString();
20 | }
21 |
22 | const toastTimeouts = new Map()
23 |
24 | const addToRemoveQueue = (toastId) => {
25 | if (toastTimeouts.has(toastId)) {
26 | return
27 | }
28 |
29 | const timeout = setTimeout(() => {
30 | toastTimeouts.delete(toastId)
31 | dispatch({
32 | type: "REMOVE_TOAST",
33 | toastId: toastId,
34 | })
35 | }, TOAST_REMOVE_DELAY)
36 |
37 | toastTimeouts.set(toastId, timeout)
38 | }
39 |
40 | export const reducer = (state, action) => {
41 | switch (action.type) {
42 | case "ADD_TOAST":
43 | return {
44 | ...state,
45 | toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
46 | };
47 |
48 | case "UPDATE_TOAST":
49 | return {
50 | ...state,
51 | toasts: state.toasts.map((t) =>
52 | t.id === action.toast.id ? { ...t, ...action.toast } : t),
53 | };
54 |
55 | case "DISMISS_TOAST": {
56 | const { toastId } = action
57 |
58 | // ! Side effects ! - This could be extracted into a dismissToast() action,
59 | // but I'll keep it here for simplicity
60 | if (toastId) {
61 | addToRemoveQueue(toastId)
62 | } else {
63 | state.toasts.forEach((toast) => {
64 | addToRemoveQueue(toast.id)
65 | })
66 | }
67 |
68 | return {
69 | ...state,
70 | toasts: state.toasts.map((t) =>
71 | t.id === toastId || toastId === undefined
72 | ? {
73 | ...t,
74 | open: false,
75 | }
76 | : t),
77 | };
78 | }
79 | case "REMOVE_TOAST":
80 | if (action.toastId === undefined) {
81 | return {
82 | ...state,
83 | toasts: [],
84 | }
85 | }
86 | return {
87 | ...state,
88 | toasts: state.toasts.filter((t) => t.id !== action.toastId),
89 | };
90 | }
91 | }
92 |
93 | const listeners = []
94 |
95 | let memoryState = { toasts: [] }
96 |
97 | function dispatch(action) {
98 | memoryState = reducer(memoryState, action)
99 | listeners.forEach((listener) => {
100 | listener(memoryState)
101 | })
102 | }
103 |
104 | function toast({
105 | ...props
106 | }) {
107 | const id = genId()
108 |
109 | const update = (props) =>
110 | dispatch({
111 | type: "UPDATE_TOAST",
112 | toast: { ...props, id },
113 | })
114 | const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id })
115 |
116 | dispatch({
117 | type: "ADD_TOAST",
118 | toast: {
119 | ...props,
120 | id,
121 | open: true,
122 | onOpenChange: (open) => {
123 | if (!open) dismiss()
124 | },
125 | },
126 | })
127 |
128 | return {
129 | id: id,
130 | dismiss,
131 | update,
132 | }
133 | }
134 |
135 | function useToast() {
136 | const [state, setState] = React.useState(memoryState)
137 |
138 | React.useEffect(() => {
139 | listeners.push(setState)
140 | return () => {
141 | const index = listeners.indexOf(setState)
142 | if (index > -1) {
143 | listeners.splice(index, 1)
144 | }
145 | };
146 | }, [state])
147 |
148 | return {
149 | ...state,
150 | toast,
151 | dismiss: (toastId) => dispatch({ type: "DISMISS_TOAST", toastId }),
152 | };
153 | }
154 |
155 | export { useToast, toast }
156 |
--------------------------------------------------------------------------------
/app/help/page.jsx:
--------------------------------------------------------------------------------
1 | import DashboardLayout from "@/components/layout/MainLayout";
2 | import Link from "next/link";
3 |
4 | export const dynamic = "force-dynamic";
5 |
6 | export default function Page() {
7 | return (
8 |
9 |
10 |
11 |
12 |
13 | Major Changes - Jan 20
14 |
15 |
16 |
17 | Something broken? See below for development update and how to fix.{" "}
18 |
19 |
20 |
21 | Several changes have been made that will greatly improve the
22 | performance and reliability of the application. A full update
23 | release will be coming soon with a more automated upgrade process,
24 | but I am embedding this quick guide in the meantime for any early
25 | adopters.
26 |
27 |
28 | There are two major changes in the database that will require some
29 | quick manual action to transform your existing data.
30 |
31 |
32 |
33 | - Filesystem Image Storage
34 |
35 |
36 | - Explicit Occurrence Count Tracking
37 |
38 |
39 |
40 | To Migrate Your Existing Data:
41 |
42 |
43 |
44 | Ensure you have the latest docker-compose.yml and migrations.sql
45 | files.
46 |
47 |
48 | Create a new directory called "storage" in the same
49 | place as your auth and config directories. This is where JPEGs
50 | will now be stored.
51 |
52 |
53 | Backfill the new occurrence_count column.{" "}
54 |
64 |
65 | Convert and transfer all your old base64 images to the new
66 | filesystem storage. You can do that with{" "}
67 |
75 |
76 | Visit the settings page to set your retention preferences. The
77 | database is wildly faster now and can handle a very large number
78 | of records. You will likely want to increase your max records
79 | value. I am setting the default for new users at 100 thousand.
80 |
81 |
82 |
83 | Thank you to everyone reporting bugs and leaving suggestions.
84 |
85 |
86 |
87 |
89 | );
90 | }
91 |
--------------------------------------------------------------------------------
/components/debugTable.jsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import React, { useState, useEffect } from 'react';
4 | import { Search } from 'lucide-react';
5 | import { Input } from "@/components/ui/input";
6 | import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
7 | import { Button } from "@/components/ui/button";
8 | import { getLatestPlateReads } from '@/app/actions';
9 |
10 | export default function PlateTable({ initialData }) {
11 | // Initialize with the data directly since it's an array
12 | const [data, setData] = useState(initialData || []);
13 | const [loading, setLoading] = useState(false);
14 | const [search, setSearch] = useState('');
15 | const [page, setPage] = useState(1);
16 | const pageSize = 25;
17 |
18 | useEffect(() => {
19 | if (page === 1 && !search && initialData) return;
20 |
21 | const loadData = async () => {
22 | setLoading(true);
23 | try {
24 | const result = await getLatestPlateReads({
25 | page,
26 | pageSize,
27 | search
28 | });
29 | setData(result || []);
30 | } catch (error) {
31 | console.error('Failed to load data:', error);
32 | setData([]);
33 | }
34 | setLoading(false);
35 | };
36 |
37 | loadData();
38 | }, [search, page, initialData]);
39 |
40 | return (
41 |
42 |
43 |
54 |
55 |
56 |
57 |
58 |
59 | Plate Number
60 | Occurrences
61 | Name
62 | Notes
63 | Timestamp
64 |
65 |
66 |
67 | {loading ? (
68 |
69 |
70 | Loading...
71 |
72 |
73 | ) : data.length === 0 ? (
74 |
75 |
76 | No results found
77 |
78 |
79 | ) : (
80 | data.map((plate) => (
81 |
82 | {plate.plate_number}
83 | {plate.occurrence_count}
84 | {plate.known_name || '-'}
85 | {plate.notes || '-'}
86 | {new Date(plate.timestamp).toLocaleString()}
87 |
88 | ))
89 | )}
90 |
91 |
92 |
93 |
94 |
95 | setPage(p => Math.max(1, p - 1))}
98 | disabled={page === 1 || loading}
99 | >
100 | Previous
101 |
102 | setPage(p => p + 1)}
105 | disabled={data.length < pageSize || loading}
106 | >
107 | Next
108 |
109 |
110 |
28 |
37 | ))
38 | AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName
39 |
40 | const AlertDialogHeader = ({
41 | className,
42 | ...props
43 | }) => (
44 |
47 | )
48 | AlertDialogHeader.displayName = "AlertDialogHeader"
49 |
50 | const AlertDialogFooter = ({
51 | className,
52 | ...props
53 | }) => (
54 |
57 | )
58 | AlertDialogFooter.displayName = "AlertDialogFooter"
59 |
60 | const AlertDialogTitle = React.forwardRef(({ className, ...props }, ref) => (
61 |
49 |
51 |
53 | Close
55 |
56 | {children}
57 |
58 |
59 | ))
60 | SheetContent.displayName = SheetPrimitive.Content.displayName
61 |
62 | const SheetHeader = ({
63 | className,
64 | ...props
65 | }) => (
66 |
69 | )
70 | SheetHeader.displayName = "SheetHeader"
71 |
72 | const SheetFooter = ({
73 | className,
74 | ...props
75 | }) => (
76 |
79 | )
80 | SheetFooter.displayName = "SheetFooter"
81 |
82 | const SheetTitle = React.forwardRef(({ className, ...props }, ref) => (
83 |