Add video feed feature with related components and hooks

- Implemented VideoFeed component to display sightings.
- Created useSightingList and useVideoFeed hooks for data fetching and state management.
- Added AppProviders for context management.
- Updated Dashboard to include VideoFeed.
- Introduced types for sightings in utils/types.tsx.
- Added Header and Footer components for layout.
- Configured React Query for data handling.
This commit is contained in:
2025-12-19 16:04:06 +00:00
parent c38e3439e2
commit 276dcd26ed
18 changed files with 194 additions and 5 deletions

53
src/utils/types.tsx Normal file
View File

@@ -0,0 +1,53 @@
export type SightingType = {
ref: number;
SaFID: string;
overviewUrl: string;
plateUrlInfrared: string;
plateUrlColour: string;
vrm: string;
vrmSecondary: string;
countryCode: string;
timeStamp: string;
detailsUrl: string;
overviewPlateRect?: [number, number, number, number];
plateTrack?: [number, number, number, number][];
make: string;
model: string;
color: string;
category: string;
charHeight: string;
seenCount: string;
timeStampMillis: number;
motion: string;
debug: string;
srcCam: number;
locationName: string;
laneID: string;
plateSize: string;
overviewSize: string;
radarSpeed: string;
trackSpeed: string;
metadata?: Metadata;
};
export type Metadata = {
npedJSON: NpedJSON;
"hotlist-matches": HotlistMatches;
hotlistMatches: HotlistMatches;
};
export type HotlistMatches = {
Hotlist0: boolean;
Hotlist1: boolean;
Hotlist2: boolean;
};
export type NpedJSON = {
status_code: number;
reason_phrase: string;
"NPED CATEGORY": "A" | "B" | "C" | "D";
"MOT STATUS": boolean;
"TAX STATUS": boolean;
vrm: string;
"INSURANCE STATUS": string;
};