Initial push to new VMS-frontend repository

.env.docker

@@ -1,4 +1,4 @@
-FRIGATE_PROXY=http://localhost:4000
+FRIGATE_PROXY=http://frigate-proxy:4000
-OPENID_SERVER=https://your.server.com:443/realms/your-realm
+OPENID_SERVER=https://keycloak:8443
-REALM=frigate-realm
 CLIENT_ID=frontend-client
+REALM=frigate-realm

src/AppBody.tsx

@@ -16,7 +16,7 @@ const AppBody = () => {
         { link: routesPath.SETTINGS_PATH, label: t('header.settings'), admin: true },
         { link: routesPath.RECORDINGS_PATH, label: t('header.recordings') },
         { link: routesPath.EVENTS_PATH, label: t('header.events') },
-        { link: routesPath.HOSTS_PATH, label: t('header.hostsConfig'), admin: true },
+        { link: routesPath.HOSTS_PATH, label: t('header.sitesConfig'), admin: true },
         { link: routesPath.ACCESS_PATH, label: t('header.acessSettings'), admin: true },
     ]
 
@@ -53,7 +53,7 @@ const AppBody = () => {
 
             aside={
                 !pathsWithRightSidebar.includes(location.pathname) ? <></> :
-                    <RightSideBar onChangeHidden={handleRightSidebarChange}/>
+                    <RightSideBar onChangeHidden={handleRightSidebarChange} />
             }
         >
             <AppRouter />

src/locales/en.ts

@@ -18,6 +18,12 @@ const en = {
         selectStartTime: 'Select start time:',
         selectEndTime: 'Select end time:',
         startTimeBiggerThanEnd: 'Start time bigger than end time',
+        confidenceThreshold: 'Confidence Threshold',
+        objectTypeFilter: 'Object Type',
+        selectObjectType: 'Select object types...',
+        eventTypeFilter: 'Event Type',
+        allEvents: 'All Events',
+        aiDetectionOnly: 'AI Detection',
     },
     frigateConfigPage: {
         copyConfig: 'Copy Config',
@@ -70,10 +76,10 @@ const en = {
         memory: 'Memory %'
     },
     hostMenu: {
-        editConfig: 'Редакт. конфиг.',
+        editConfig: 'Edit config',
-        restart: 'Перезагрузка',
+        restart: 'Restart',
-        system: 'Система',
+        system: 'System',
-        storage: 'Хранилище',
+        storage: 'Storage',
     },
 
     header: {
@@ -81,18 +87,25 @@ const en = {
         settings: 'Settings',
         recordings: 'Recordings',
         events: 'Events',
-        hostsConfig: 'Frigate servers',
+        sitesConfig: 'Sites',
         acessSettings: 'Access settings',
     },
-    frigateHostTableTitles: {
+    siteTableTitles: {
-        host: 'Хост',
+        siteName: 'Site Name',
-        name: 'Имя хоста',
+        location: 'Physical Location',
-        url: 'Адрес',
+        url: 'Frigate URL',
-        enabled: 'Включен',
+        enabled: 'Enabled',
     },
-    frigateHostTablePlaceholders: {
+    siteTablePlaceholders: {
-        host: 'http://host.docker.internal:5000 or http://192.168.1.1:5000',
+        url: 'http://host.docker.internal:5000 or http://192.168.1.1:5000',
-        name: 'YourFrigateHostName',
+        name: 'Warehouse North',
+        location: 'Building A, Floor 2',
+    },
+    siteStatus: {
+        online: 'Online',
+        degraded: 'Degraded',
+        offline: 'Offline',
+        camerasOnline: '{{online}}/{{total}} cameras online',
     },
     player: {
         startVideo: 'Enable Video',
@@ -114,7 +127,7 @@ const en = {
     version: 'Version',
     uptime: 'Uptime',
     pleaseSelectRole: 'Please select Role',
-    pleaseSelectHost: 'Please select Host',
+    pleaseSelectSite: 'Please select Site',
     pleaseSelectCamera: 'Please select Camera',
     pleaseSelectDate: 'Please select Date',
     nothingHere: 'Nothing here',
@@ -131,7 +144,7 @@ const en = {
     events: 'Events',
     notHaveEvents: 'No events',
     notHaveEventsAtThatPeriod: 'Not have events at that period',
-    selectHost: 'Select host',
+    selectSite: 'Select site',
     selectCamera: 'Select Camera',
     selectRange: 'Select period',
     changeTheme: "Change theme",

src/locales/ru.ts

@@ -16,6 +16,12 @@ const ru = {
         selectStartTime: 'Выбери время начала:',
         selectEndTime: 'Выбери время окончания:',
         startTimeBiggerThanEnd: 'Время начала больше времени окончания',
+        confidenceThreshold: 'Порог уверенности',
+        objectTypeFilter: 'Тип объекта',
+        selectObjectType: 'Выберите типы объектов...',
+        eventTypeFilter: 'Тип события',
+        allEvents: 'Все события',
+        aiDetectionOnly: 'AI обнаружение',
     },
     frigateConfigPage: {
         copyConfig: 'Копировать Конфиг.',
@@ -78,18 +84,25 @@ const ru = {
         settings: 'Настройки',
         recordings: 'Записи',
         events: 'События',
-        hostsConfig: 'Серверы Frigate',
+        sitesConfig: 'Объекты',
         acessSettings: 'Настройка доступа',
     },
-    frigateHostTableTitles: {
+    siteTableTitles: {
-        host: 'Хост',
+        siteName: 'Название объекта',
-        name: 'Имя хоста',
+        location: 'Физ. расположение',
-        url: 'Адрес',
+        url: 'Frigate URL',
         enabled: 'Включен',
     },
-    frigateHostTablePlaceholders: {
+    siteTablePlaceholders: {
-        host: 'http://host.docker.internal:5000 or http://192.168.1.1:5000',
+        url: 'http://host.docker.internal:5000 or http://192.168.1.1:5000',
-        name: 'YourFrigateHostName',
+        name: 'Склад Северный',
+        location: 'Здание А, Этаж 2',
+    },
+    siteStatus: {
+        online: 'В сети',
+        degraded: 'Частично',
+        offline: 'Не в сети',
+        camerasOnline: '{{online}}/{{total}} камер в сети',
     },
     player: {
         startVideo: 'Вкл. Видео',
@@ -111,7 +124,7 @@ const ru = {
     version: 'Версия',
     uptime: 'Время работы',
     pleaseSelectRole: 'Пожалуйста выберите роль',
-    pleaseSelectHost: 'Пожалуйста выберите хост',
+    pleaseSelectSite: 'Пожалуйста выберите объект',
     pleaseSelectCamera: 'Пожалуйста выберите камеру',
     pleaseSelectDate: 'Пожалуйста выберите дату',
     nothingHere: 'Ничего нет',
@@ -128,7 +141,7 @@ const ru = {
     events: 'События',
     notHaveEvents: 'Событий нет',
     notHaveEventsAtThatPeriod: 'Нет событий за этот период',
-    selectHost: 'Выбери хост',
+    selectSite: 'Выбери объект',
     selectCamera: 'Выбери камеру',
     selectRange: 'Выбери период',
     changeTheme: "Изменить тему",

src/pages/EditCameraPage.tsx

@@ -1,15 +1,16 @@
-import { Button, Center, Flex, Text } from '@mantine/core';
+import { Button, Center, Flex, Text, Divider, Paper, Title } from '@mantine/core';
 import { notifications } from '@mantine/notifications';
 import { IconAlertCircle, IconCircleCheck } from '@tabler/icons-react';
 import { useMutation, useQuery } from '@tanstack/react-query';
 import { observer } from 'mobx-react-lite';
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useParams } from 'react-router-dom';
 import { useAdminRole } from '../hooks/useAdminRole';
 import { frigateApi, frigateQueryKeys, mapHostToHostname, proxyApi } from '../services/frigate.proxy/frigate.api';
 import MaskSelect, { MaskItem, MaskType } from '../shared/components/filters/MaskSelect';
 import OverlayCogwheelLoader from '../shared/components/loaders/OverlayCogwheelLoader';
+import RetentionSettings from '../shared/components/RetentionSettings';
 import { Point, extractMaskNumber } from '../shared/utils/maskPoint';
 import CameraMaskDrawer from '../widgets/CameraMaskDrawer';
 import CameraPageHeader from '../widgets/header/CameraPageHeader';
@@ -22,6 +23,7 @@ const EditCameraPage = () => {
     if (!cameraId) throw Error(t('editCameraPage.cameraIdNotExist'))
     const [selectedMask, setSelectedMask] = useState<MaskItem>()
     const [points, setPoints] = useState<Point[]>()
+    const [retentionDays, setRetentionDays] = useState<number>(0)
 
     const { data: camera, isPending, isError, refetch } = useQuery({
         queryKey: [frigateQueryKeys.getCameraWHost, cameraId],
@@ -143,9 +145,45 @@ const EditCameraPage = () => {
         setPoints([])
     }
 
+    // Initialize retention days from camera config
+    useEffect(() => {
+        if (camera?.config?.record?.retain?.days !== undefined) {
+            setRetentionDays(camera.config.record.retain.days)
+        }
+    }, [camera])
+
+    const handleRetentionChange = (days: number) => {
+        setRetentionDays(days)
+        // Note: Actual config update requires modifying the Frigate YAML config
+        // This could be integrated with a save button that calls proxyApi.postHostConfig
+        notifications.show({
+            id: 'retention-changed',
+            withCloseButton: true,
+            autoClose: 3000,
+            title: t('settings.retentionUpdated'),
+            message: t('settings.retentionUpdatedMessage', { days }),
+            color: 'blue',
+        })
+    }
+
     return (
         <Flex w='100%' h='100%' direction='column'>
-            <CameraPageHeader camera={camera} configButton/>
+            <CameraPageHeader camera={camera} configButton />
+
+            {/* Retention Settings Section */}
+            <Paper shadow="xs" p="md" mb="lg" mx="md" withBorder>
+                <Title order={4} mb="sm">{t('settings.recordingRetention')}</Title>
+                <RetentionSettings
+                    currentDays={retentionDays}
+                    onChange={handleRetentionChange}
+                />
+                <Text size="xs" color="dimmed" mt="xs">
+                    {t('settings.retentionNote')}
+                </Text>
+            </Paper>
+
+            <Divider my="md" label={t('editCameraPage.maskSettings')} labelPosition="center" />
+
             {!camera.config ? null :
                 <Flex w='100%' justify='center' mb='1rem'>
                     <MaskSelect

src/pages/EventsPage.tsx

@@ -18,6 +18,9 @@ export const eventsQueryParams = {
     endDate: 'endDate',
     startTime: 'startTime',
     endTime: 'endTime',
+    minScore: 'minScore',
+    labels: 'labels',
+    eventType: 'eventType',
 }
 
 const EventsPage = () => {
@@ -34,14 +37,17 @@ const EventsPage = () => {
         const paramEndDate = searchParams.get(eventsQueryParams.endDate) || undefined
         const paramStartTime = searchParams.get(eventsQueryParams.startTime) || undefined
         const paramEndTime = searchParams.get(eventsQueryParams.endTime) || undefined
-        eventsStore.loadFiltersFromPage(paramHostId, paramCameraId, paramStartDate, paramEndDate, paramStartTime, paramEndTime)
+        const paramMinScore = searchParams.get(eventsQueryParams.minScore) || undefined
+        const paramLabels = searchParams.get(eventsQueryParams.labels) || undefined
+        const paramEventType = searchParams.get(eventsQueryParams.eventType) || undefined
+        eventsStore.loadFiltersFromPage(paramHostId, paramCameraId, paramStartDate, paramEndDate, paramStartTime, paramEndTime, paramMinScore, paramLabels, paramEventType)
         return () => setRightChildren(null)
     }, [])
 
     const { eventsStore } = useContext(Context)
 
 
-    const { hostId, cameraId, period, startTime, endTime } = eventsStore.filters
+    const { hostId, cameraId, period, startTime, endTime, minScore, labels, eventType } = eventsStore.filters
 
     useEffect(() => {
 
@@ -73,6 +79,9 @@ const EventsPage = () => {
                 period={[period[0], period[1]]}
                 startTime={startTime}
                 endTime={endTime}
+                minScore={minScore}
+                labels={labels}
+                eventType={eventType}
             />
         )
     }

src/pages/MainPage.tsx

@@ -1,6 +1,6 @@
-import { Flex, Grid } from '@mantine/core';
+import { Flex, Accordion } from '@mantine/core';
 import { IconSearch } from '@tabler/icons-react';
-import { useInfiniteQuery } from '@tanstack/react-query';
+import { useInfiniteQuery, useQuery } from '@tanstack/react-query';
 import { observer } from 'mobx-react-lite';
 import { ChangeEvent, useContext, useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -10,15 +10,15 @@ import { Context } from '..';
 import { useDebounce } from '../hooks/useDebounce';
 import { useRealmUser } from '../hooks/useRealmUser';
 import { frigateApi, frigateQueryKeys } from '../services/frigate.proxy/frigate.api';
-import { GetCameraWHostWConfig } from '../services/frigate.proxy/frigate.schema';
+import { GetCameraWHostWConfig, GetFrigateHost } from '../services/frigate.proxy/frigate.schema';
 import ClearableTextInput from '../shared/components/inputs/ClearableTextInput';
 import CenteredCogwheelLoader from '../shared/components/loaders/CenteredCogwheelLoader';
 import CogwheelLoader from '../shared/components/loaders/CogwheelLoader';
 import { isProduction } from '../shared/env.const';
-import CameraCard from '../widgets/card/CameraCard';
 import MainFiltersRightSide from '../widgets/sidebars/MainFiltersRightSide';
 import { SideBarContext } from '../widgets/sidebars/SideBarContext';
 import RetryErrorPage from './RetryErrorPage';
+import SiteGroup from '../shared/components/SiteGroup';
 
 export const mainPageParams = {
     hostId: 'hostId',
@@ -43,6 +43,11 @@ const MainPage = () => {
 
     const pageSize = 20;
 
+    const { data: sitesData } = useQuery({
+        queryKey: [frigateQueryKeys.getFrigateHosts],
+        queryFn: frigateApi.getHosts
+    })
+
     const {
         data,
         isLoading,
@@ -55,7 +60,6 @@ const MainPage = () => {
     } = useInfiniteQuery<GetCameraWHostWConfig[]>({
         queryKey: [frigateQueryKeys.getCamerasWHost, selectedHostId, searchQuery, selectedTags],
         queryFn: ({ pageParam = 0 }) =>
-            // Pass pagination parameters to the backend
             frigateApi.getCamerasWHost({
                 name: searchQuery,
                 frigateHostId: selectedHostId,
@@ -64,16 +68,13 @@ const MainPage = () => {
                 limit: pageSize,
             }),
         getNextPageParam: (lastPage, pages) => {
-            // If last page size is less than pageSize, no more pages
             if (lastPage.length < pageSize) return undefined;
-            // Next page offset is pages.length * pageSize
             return pages.length * pageSize;
         },
         initialPageParam: 0,
     });
 
     const cameras: GetCameraWHostWConfig[] = data?.pages.flat() || [];
-    // const cameras: GetCameraWHostWConfig[] = [];
 
     const [visibleCount, setVisibleCount] = useState(pageSize)
 
@@ -84,11 +85,10 @@ const MainPage = () => {
             } else if (hasNextPage && !isFetchingNextPage) {
                 loadTriggered.current = true;
                 fetchNextPage().then(() => {
-                    // Add a small delay before resetting the flag
                     setTimeout(() => {
-                      loadTriggered.current = false;
+                        loadTriggered.current = false;
-                    }, 300); // delay in milliseconds; adjust as needed
+                    }, 300);
-                  });
+                });
             }
         }
     }, [inView, cameras, visibleCount, hasNextPage, isFetchingNextPage, isFetching, fetchNextPage])
@@ -114,7 +114,6 @@ const MainPage = () => {
         return () => setRightChildren(null);
     }, []);
 
-
     const debouncedHandleSearchQuery = useDebounce((value: string) => {
         mainStore.setSearchQuery(value, navigate);
     }, 600);
@@ -125,14 +124,29 @@ const MainPage = () => {
 
     if (isLoading) return <CenteredCogwheelLoader />;
     if (isError) return <RetryErrorPage onRetry={refetch} />
-    if (!isProduction) console.log('MainPage rendered')
 
+    const enabledSites = sitesData?.filter(s => s.enabled) || []
+
+    // Group cameras by site
+    const visibleCameras = cameras.slice(0, visibleCount)
+    const groupedCameras: Record<string, GetCameraWHostWConfig[]> = {}
+
+    visibleCameras.forEach(camera => {
+        const siteId = camera.frigateHost?.id
+        if (siteId) {
+            if (!groupedCameras[siteId]) groupedCameras[siteId] = []
+            groupedCameras[siteId].push(camera)
+        }
+    })
+
+    // Determine initial expanded items (all sites with cameras)
+    const initialExpanded = enabledSites
+        .filter(site => groupedCameras[site.id]?.length > 0)
+        .map(site => site.id)
 
     return (
         <Flex direction='column' h='100%' w='100%' >
-            <Flex w='100%'
+            <Flex w='100%' justify='center'>
-                justify='center'
-            >
                 <ClearableTextInput
                     clearable
                     maw={400}
@@ -143,14 +157,31 @@ const MainPage = () => {
                     onChange={onInputChange}
                 />
             </Flex>
-            <Flex justify='center' h='100%' direction='column' w='100%' >
+            <Flex justify='center' h='100%' direction='column' w='100%' mt="md">
-                <Grid mt='sm' justify="center" mb='sm' align='stretch'>
+                <Accordion multiple defaultValue={initialExpanded} variant="separated">
-                    {cameras.slice(0, visibleCount).map(camera => (
+                    {enabledSites.map(site => {
-                        <CameraCard key={camera.id} camera={camera} />
+                        const siteCameras = groupedCameras[site.id] || []
-                    ))}
+                        const onlineCount = siteCameras.filter(c => c.state !== false).length
-                </Grid>
+
-                { isFetching && !isFetchingNextPage ? <CogwheelLoader /> : null}
+                        // If we are filtering by host, only show that host
-                {/* trigger point. Rerender twice when enabled */}
+                        if (selectedHostId && site.id !== selectedHostId) return null
+
+                        // If we are searching and this site has no matching cameras, skip it?
+                        // User requirement says "Map through the list of Sites", so maybe show even if empty?
+                        // Usually, it's better to show if it has cameras or if no search is active.
+                        if (searchQuery && siteCameras.length === 0) return null
+
+                        return (
+                            <SiteGroup
+                                key={site.id}
+                                site={site}
+                                cameras={siteCameras}
+                                onlineCount={onlineCount}
+                            />
+                        )
+                    })}
+                </Accordion>
+                {isFetching && !isFetchingNextPage ? <CogwheelLoader /> : null}
                 <div ref={ref} style={{ height: '50px' }} />
             </Flex>
         </Flex>

src/pages/PlayRecordPage.tsx

@@ -6,6 +6,7 @@ import NotFound from './404';
 
 export const playRecordPageQuery = {
     link: 'link',
+    startTime: 'startTime',
 }
 
 const PlayRecordPage = () => {
@@ -13,11 +14,15 @@ const PlayRecordPage = () => {
     const location = useLocation()
     const queryParams = new URLSearchParams(location.search)
     const paramLink = queryParams.get(playRecordPageQuery.link)
+    const paramStartTime = queryParams.get(playRecordPageQuery.startTime)
+
+    // Parse startTime as Unix timestamp (seconds) and convert to video-relative offset if needed
+    const initialSeekTime = paramStartTime ? parseFloat(paramStartTime) : undefined
 
     if (!paramLink) return (<NotFound />)
     return (
         <Flex w='100%' h='100%' justify='center' align='center' direction='column'>
-            <VideoPlayer videoUrl={paramLink} />
+            <VideoPlayer videoUrl={paramLink} initialSeekTime={initialSeekTime} />
         </Flex>
     );
 };

src/services/frigate.proxy/frigate.schema.ts

@@ -28,6 +28,7 @@ export const getFrigateHostSchema = z.object({
     updateAt: z.string(),
     name: z.string(),
     host: z.string(),
+    location: z.string().optional(),
     enabled: z.boolean(),
     state: z.boolean().nullable().optional()
 });

src/shared/components/RetentionSettings.tsx

@@ -0,0 +1,79 @@
+import { NumberInput, Text, Alert, Stack, Flex } from '@mantine/core';
+import { IconAlertTriangle } from '@tabler/icons-react';
+import { useTranslation } from 'react-i18next';
+
+interface RetentionSettingsProps {
+    /** Current retention days from camera config */
+    currentDays: number;
+    /** Callback when retention days change */
+    onChange: (days: number) => void;
+    /** Whether the input is disabled */
+    disabled?: boolean;
+}
+
+/**
+ * Component for configuring camera recording retention period.
+ * Displays a numeric input for days with optional storage warning.
+ */
+const RetentionSettings = ({
+    currentDays,
+    onChange,
+    disabled = false,
+}: RetentionSettingsProps) => {
+    const { t } = useTranslation();
+
+    const handleChange = (value: number | string) => {
+        const numValue = typeof value === 'string' ? parseInt(value, 10) : value;
+        if (!isNaN(numValue) && numValue >= 0) {
+            onChange(numValue);
+        }
+    };
+
+    return (
+        <Stack spacing="xs">
+            <NumberInput
+                label={t('settings.retentionPeriod')}
+                description={t('settings.retentionDescription')}
+                value={currentDays}
+                onChange={handleChange}
+                min={0}
+                max={365}
+                step={1}
+                disabled={disabled}
+                styles={{
+                    input: {
+                        fontWeight: 500,
+                    },
+                }}
+                rightSection={
+                    <Text size="sm" color="dimmed" mr="md">
+                        {t('settings.days')}
+                    </Text>
+                }
+                rightSectionWidth={60}
+            />
+            {currentDays > 30 && (
+                <Alert
+                    icon={<IconAlertTriangle size={16} />}
+                    color="yellow"
+                    variant="light"
+                    title={t('settings.storageWarningTitle')}
+                >
+                    {t('settings.storageWarning')}
+                </Alert>
+            )}
+            {currentDays === 0 && (
+                <Alert
+                    icon={<IconAlertTriangle size={16} />}
+                    color="red"
+                    variant="light"
+                    title={t('settings.noRetentionTitle')}
+                >
+                    {t('settings.noRetentionWarning')}
+                </Alert>
+            )}
+        </Stack>
+    );
+};
+
+export default RetentionSettings;

src/shared/components/SiteGroup.tsx

@@ -0,0 +1,54 @@
+import { Accordion, Flex, Grid, Text, Group } from '@mantine/core';
+import { useTranslation } from 'react-i18next';
+import { GetCameraWHostWConfig, GetFrigateHost } from '../../services/frigate.proxy/frigate.schema';
+import CameraCard from '../../widgets/card/CameraCard';
+import SiteStatusBadge from './SiteStatusBadge';
+
+interface SiteGroupProps {
+    site: GetFrigateHost;
+    cameras: GetCameraWHostWConfig[];
+    onlineCount: number;
+}
+
+const SiteGroup = ({ site, cameras, onlineCount }: SiteGroupProps) => {
+    const { t } = useTranslation();
+
+    return (
+        <Accordion.Item value={site.id} sx={{ border: 'none' }}>
+            <Accordion.Control>
+                <Group position="apart">
+                    <Flex direction="column">
+                        <Text weight={700} size="lg">
+                            {site.name}
+                        </Text>
+                        {site.location && (
+                            <Text size="xs" color="dimmed">
+                                {site.location}
+                            </Text>
+                        )}
+                    </Flex>
+                    <SiteStatusBadge
+                        onlineCameras={onlineCount}
+                        totalCameras={cameras.length}
+                        isReachable={site.state !== false} // Assume true if null/undefined unless explicitly false
+                    />
+                </Group>
+            </Accordion.Control>
+            <Accordion.Panel>
+                {cameras.length === 0 ? (
+                    <Text color="dimmed" align="center" py="md">
+                        {t('camersDoesNotExist')}
+                    </Text>
+                ) : (
+                    <Grid gutter="md">
+                        {cameras.map((camera) => (
+                            <CameraCard key={camera.id} camera={camera} />
+                        ))}
+                    </Grid>
+                )}
+            </Accordion.Panel>
+        </Accordion.Item>
+    );
+};
+
+export default SiteGroup;

src/shared/components/SiteStatusBadge.tsx

@@ -0,0 +1,40 @@
+import { Badge, Tooltip } from '@mantine/core';
+import { useTranslation } from 'react-i18next';
+
+interface SiteStatusBadgeProps {
+    onlineCameras: number;
+    totalCameras: number;
+    isReachable: boolean;
+}
+
+const SiteStatusBadge = ({ onlineCameras, totalCameras, isReachable }: SiteStatusBadgeProps) => {
+    const { t } = useTranslation();
+
+    if (!isReachable) {
+        return (
+            <Badge color="red" variant="filled">
+                {t('siteStatus.offline')}
+            </Badge>
+        );
+    }
+
+    if (onlineCameras < totalCameras) {
+        return (
+            <Tooltip label={t('siteStatus.camerasOnline', { online: onlineCameras, total: totalCameras })}>
+                <Badge color="yellow" variant="filled">
+                    {t('siteStatus.degraded')} ({onlineCameras}/{totalCameras})
+                </Badge>
+            </Tooltip>
+        );
+    }
+
+    return (
+        <Tooltip label={t('siteStatus.camerasOnline', { online: onlineCameras, total: totalCameras })}>
+            <Badge color="green" variant="filled">
+                {t('siteStatus.online')} ({onlineCameras}/{totalCameras})
+            </Badge>
+        </Tooltip>
+    );
+};
+
+export default SiteStatusBadge;

src/shared/components/accordion/EventsAccordion.tsx

@@ -24,6 +24,9 @@ interface EventsAccordionProps {
     hour?: string,
     camera: GetCameraWHostWConfig
     host: GetFrigateHost
+    minScore?: number
+    labels?: string[]
+    eventType?: 'all' | 'motion' | 'ai_detection'
 }
 
 /**
@@ -39,6 +42,9 @@ const EventsAccordion = ({
     hour,
     camera,
     host,
+    minScore,
+    labels,
+    eventType,
 }: EventsAccordionProps) => {
     const { recordingsStore: recStore } = useContext(Context)
     const [openedItem, setOpenedItem] = useState<string>()
@@ -52,8 +58,8 @@ const EventsAccordion = ({
     const isRequiredParams = (host && camera) || !(day && hour) || !(startTime && endTime)
 
     const { data, isPending, isError, refetch } = useQuery({
-        queryKey: [frigateQueryKeys.getEvents, host, camera, day, hour, startTime, endTime],
+        queryKey: [frigateQueryKeys.getEvents, host, camera, day, hour, startTime, endTime, minScore, labels, eventType],
-        queryFn: ({signal}) => {
+        queryFn: ({ signal }) => {
             if (!isRequiredParams) return null
             let queryStartTime: number
             let queryEndTime: number
@@ -71,6 +77,8 @@ const EventsAccordion = ({
                 before: queryEndTime,
                 hasClip: true,
                 includeThumnails: false,
+                minScore: minScore,
+                labels: labels,
             })
             if (parsed.success) {
                 return proxyApi.getEvents(
@@ -114,6 +122,11 @@ const EventsAccordion = ({
         </Flex>
     )
 
+    // Client-side filtering for event type (Frigate API doesn't support this filter)
+    const filteredData = eventType === 'ai_detection'
+        ? data.filter(event => event.data?.type === 'object')
+        : data;
+
     const handleOpenPlayer = (value: string | undefined) => {
         if (value !== recStore.playedItem) {
             setOpenedItem(value)
@@ -141,7 +154,7 @@ const EventsAccordion = ({
             value={openedItem}
             onChange={handleOpenItem}
         >
-            {data.map(event => (
+            {filteredData.map(event => (
                 <EventsAccordionItem
                     key={event.id}
                     event={event}

src/shared/components/accordion/EventsAccordionItem.tsx

@@ -13,6 +13,7 @@ import { proxyApi } from '../../../services/frigate.proxy/frigate.api';
 import { useTranslation } from 'react-i18next';
 import BlobImage from '../images/BlobImage';
 import OnScreenImage from '../images/OnScreenImage';
+import BoundingBoxOverlay from '../images/BoundingBoxOverlay';
 
 
 interface EventsAccordionItemProps {
@@ -81,12 +82,18 @@ const EventsAccordionItem = ({
             <Accordion.Control key={event.id + 'Control'}>
                 <Flex justify='space-between'>
                     {!hostName ? <></> :
-                        <OnScreenImage
+                        <BoundingBoxOverlay
-                            maw={200}
+                            box={event.data?.box}
-                            mr='1rem'
+                            label={event.label}
-                            fit="contain"
+                            score={event.data?.score}
-                            withPlaceholder
+                        >
-                            src={proxyApi.eventThumbnailUrl(hostName, event.id)} />
+                            <OnScreenImage
+                                maw={200}
+                                mr='1rem'
+                                fit="contain"
+                                withPlaceholder
+                                src={proxyApi.eventThumbnailUrl(hostName, event.id)} />
+                        </BoundingBoxOverlay>
                     }
                     {eventLabel(event)}
                     <Group>

src/shared/components/filters/EventTypeFilter.tsx

@@ -0,0 +1,32 @@
+import { SegmentedControl, Stack, Text } from '@mantine/core';
+import { useTranslation } from 'react-i18next';
+
+type EventType = 'all' | 'motion' | 'ai_detection';
+
+interface EventTypeFilterProps {
+    value?: EventType;
+    onChange: (eventType: EventType) => void;
+}
+
+const EventTypeFilter = ({ value = 'all', onChange }: EventTypeFilterProps) => {
+    const { t } = useTranslation();
+
+    const options = [
+        { value: 'all', label: t('eventsPage.allEvents') },
+        { value: 'ai_detection', label: t('eventsPage.aiDetectionOnly') },
+    ];
+
+    return (
+        <Stack mt="md" gap="xs">
+            <Text size="sm" fw={500}>{t('eventsPage.eventTypeFilter')}</Text>
+            <SegmentedControl
+                value={value}
+                onChange={(val) => onChange(val as EventType)}
+                data={options}
+                fullWidth
+            />
+        </Stack>
+    );
+};
+
+export default EventTypeFilter;

src/shared/components/filters/ObjectTypeFilter.tsx

@@ -0,0 +1,48 @@
+import { MultiSelect, Stack, Text } from '@mantine/core';
+import { useTranslation } from 'react-i18next';
+
+// Common Frigate AI labels
+const OBJECT_TYPE_OPTIONS = [
+    { value: 'person', label: 'Person' },
+    { value: 'car', label: 'Car' },
+    { value: 'motorcycle', label: 'Motorcycle' },
+    { value: 'bicycle', label: 'Bicycle' },
+    { value: 'bus', label: 'Bus' },
+    { value: 'truck', label: 'Truck' },
+    { value: 'dog', label: 'Dog' },
+    { value: 'cat', label: 'Cat' },
+    { value: 'bird', label: 'Bird' },
+    { value: 'horse', label: 'Horse' },
+    { value: 'face', label: 'Face' },
+    { value: 'license_plate', label: 'License Plate' },
+    { value: 'package', label: 'Package' },
+];
+
+interface ObjectTypeFilterProps {
+    value?: string[];
+    onChange: (labels: string[] | undefined) => void;
+}
+
+const ObjectTypeFilter = ({ value, onChange }: ObjectTypeFilterProps) => {
+    const { t } = useTranslation();
+
+    const handleChange = (selected: string[]) => {
+        onChange(selected.length > 0 ? selected : undefined);
+    };
+
+    return (
+        <Stack mt="md" gap="xs">
+            <Text size="sm" fw={500}>{t('eventsPage.objectTypeFilter')}</Text>
+            <MultiSelect
+                data={OBJECT_TYPE_OPTIONS}
+                value={value || []}
+                onChange={handleChange}
+                placeholder={t('eventsPage.selectObjectType')}
+                searchable
+                clearable
+            />
+        </Stack>
+    );
+};
+
+export default ObjectTypeFilter;

src/shared/components/filters/SiteSelect.tsx

@@ -5,7 +5,7 @@ import { frigateApi, frigateQueryKeys } from '../../../services/frigate.proxy/fr
 import RetryError from '../RetryError';
 import OneSelectFilter, { OneSelectItem } from './OneSelectFilter';
 
-interface HostSelectProps extends MantineStyleSystemProps {
+interface SiteSelectProps extends MantineStyleSystemProps {
     label?: string
     valueId?: string
     defaultId?: string
@@ -15,7 +15,7 @@ interface HostSelectProps extends MantineStyleSystemProps {
     onSuccess?: () => void
 }
 
-const HostSelect = ({
+const SiteSelect = ({
     label,
     valueId,
     defaultId,
@@ -24,8 +24,8 @@ const HostSelect = ({
     onChange,
     onSuccess,
     ...styleProps
-}: HostSelectProps) => {
+}: SiteSelectProps) => {
-    const { data: hosts, isError, isPending, isSuccess, refetch } = useQuery({
+    const { data: sites, isError, isPending, isSuccess, refetch } = useQuery({
         queryKey: [frigateQueryKeys.getFrigateHosts],
         queryFn: frigateApi.getHosts
     })
@@ -37,11 +37,11 @@ const HostSelect = ({
     if (isPending) return <Center><Loader /></Center>
     if (isError) return <RetryError onRetry={refetch} />
 
-    if (!hosts || hosts.length < 1) return null
+    if (!sites || sites.length < 1) return null
 
-    const hostItems: OneSelectItem[] = hosts
+    const siteItems: OneSelectItem[] = sites
-        .filter(host => host.enabled)
+        .filter(site => site.enabled)
-        .map(host => ({ value: host.id, label: host.name }))
+        .map(site => ({ value: site.id, label: site.name }))
 
     const handleSelect = (value: string) => {
         if (onChange) onChange(value)
@@ -49,17 +49,17 @@ const HostSelect = ({
 
     return (
         <OneSelectFilter
-            id='frigate-hosts'
+            id='frigate-sites'
             label={label}
             placeholder={placeholder}
             spaceBetween={spaceBetween ? spaceBetween : '1rem'}
             value={valueId || ''}
             defaultValue={defaultId || ''}
-            data={hostItems}
+            data={siteItems}
             onChange={handleSelect}
             {...styleProps}
         />
     );
 };
 
-export default HostSelect;
+export default SiteSelect;

src/shared/components/images/BoundingBoxOverlay.tsx

@@ -0,0 +1,122 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { Box } from '@mantine/core';
+
+interface BoundingBoxOverlayProps {
+    /** Bounding box coordinates [y_min, x_min, y_max, x_max] normalized 0-1 from Frigate */
+    box?: number[];
+    /** The label to display on the bounding box */
+    label?: string;
+    /** Confidence score (0-1) to display */
+    score?: number;
+    /** Color for the bounding box */
+    color?: string;
+    /** Children elements (e.g., the image) */
+    children: React.ReactNode;
+}
+
+/**
+ * Overlay component that renders a bounding box on top of its children.
+ * Frigate provides normalized coordinates [y_min, x_min, y_max, x_max] in range 0-1.
+ */
+const BoundingBoxOverlay = ({
+    box,
+    label,
+    score,
+    color = '#00ff00',
+    children,
+}: BoundingBoxOverlayProps) => {
+    const containerRef = useRef<HTMLDivElement>(null);
+    const [dimensions, setDimensions] = useState({ width: 0, height: 0 });
+
+    useEffect(() => {
+        const updateDimensions = () => {
+            if (containerRef.current) {
+                const rect = containerRef.current.getBoundingClientRect();
+                setDimensions({ width: rect.width, height: rect.height });
+            }
+        };
+
+        updateDimensions();
+        window.addEventListener('resize', updateDimensions);
+
+        // Also observe for image loading
+        const observer = new ResizeObserver(updateDimensions);
+        if (containerRef.current) {
+            observer.observe(containerRef.current);
+        }
+
+        return () => {
+            window.removeEventListener('resize', updateDimensions);
+            observer.disconnect();
+        };
+    }, []);
+
+    // Convert Frigate box format [y_min, x_min, y_max, x_max] to pixel coordinates
+    const getBoxStyle = () => {
+        if (!box || box.length < 4 || dimensions.width === 0) {
+            return null;
+        }
+
+        const [yMin, xMin, yMax, xMax] = box;
+
+        const left = xMin * dimensions.width;
+        const top = yMin * dimensions.height;
+        const width = (xMax - xMin) * dimensions.width;
+        const height = (yMax - yMin) * dimensions.height;
+
+        return {
+            left: `${left}px`,
+            top: `${top}px`,
+            width: `${width}px`,
+            height: `${height}px`,
+        };
+    };
+
+    const boxStyle = getBoxStyle();
+    const displayLabel = label ? `${label}${score ? ` ${(score * 100).toFixed(0)}%` : ''}` : '';
+
+    return (
+        <Box
+            ref={containerRef}
+            style={{ position: 'relative', display: 'inline-block' }}
+        >
+            {children}
+            {boxStyle && (
+                <>
+                    <div
+                        style={{
+                            position: 'absolute',
+                            ...boxStyle,
+                            border: `2px solid ${color}`,
+                            borderRadius: '2px',
+                            pointerEvents: 'none',
+                            boxSizing: 'border-box',
+                        }}
+                    />
+                    {displayLabel && (
+                        <div
+                            style={{
+                                position: 'absolute',
+                                left: boxStyle.left,
+                                top: boxStyle.top,
+                                transform: 'translateY(-100%)',
+                                backgroundColor: color,
+                                color: '#000',
+                                padding: '2px 6px',
+                                fontSize: '11px',
+                                fontWeight: 600,
+                                borderRadius: '2px 2px 0 0',
+                                whiteSpace: 'nowrap',
+                                pointerEvents: 'none',
+                            }}
+                        >
+                            {displayLabel}
+                        </div>
+                    )}
+                </>
+            )}
+        </Box>
+    );
+};
+
+export default BoundingBoxOverlay;

src/shared/components/players/PlaybackSpeedControls.tsx

@@ -0,0 +1,60 @@
+import { Button, Group, Text } from '@mantine/core';
+import { IconPlayerPlay } from '@tabler/icons-react';
+import { useTranslation } from 'react-i18next';
+import videojs from 'video.js';
+
+interface PlaybackSpeedControlsProps {
+    playerRef: React.MutableRefObject<ReturnType<typeof videojs> | null>;
+    currentSpeed: number;
+    onSpeedChange: (speed: number) => void;
+}
+
+const PLAYBACK_SPEEDS = [0.5, 1, 2, 4, 8, 16];
+
+const PlaybackSpeedControls = ({
+    playerRef,
+    currentSpeed,
+    onSpeedChange,
+}: PlaybackSpeedControlsProps) => {
+    const { t } = useTranslation();
+    const isFirefox = typeof navigator !== 'undefined' && navigator.userAgent.toLowerCase().includes('firefox');
+
+    const availableSpeeds = isFirefox
+        ? PLAYBACK_SPEEDS.filter(speed => speed <= 8)
+        : PLAYBACK_SPEEDS;
+
+    const handleSpeedClick = (speed: number) => {
+        if (playerRef.current) {
+            playerRef.current.playbackRate(speed);
+            onSpeedChange(speed);
+        }
+    };
+
+    return (
+        <Group spacing="xs" mt="sm" mb="sm">
+            <Text size="sm" fw={500} mr="xs">
+                <IconPlayerPlay size={14} style={{ verticalAlign: 'middle', marginRight: 4 }} />
+                {t('player.speed')}:
+            </Text>
+            {availableSpeeds.map((speed) => (
+                <Button
+                    key={speed}
+                    size="xs"
+                    variant={currentSpeed === speed ? 'filled' : 'outline'}
+                    onClick={() => handleSpeedClick(speed)}
+                    styles={{
+                        root: {
+                            minWidth: '48px',
+                            fontWeight: currentSpeed === speed ? 700 : 400,
+                            transition: 'all 0.2s ease',
+                        },
+                    }}
+                >
+                    {speed}x
+                </Button>
+            ))}
+        </Group>
+    );
+};
+
+export default PlaybackSpeedControls;

src/shared/components/players/VideoPlayer.tsx

@@ -1,19 +1,23 @@
-import React, { useRef, useEffect } from 'react';
+import React, { useRef, useEffect, useState } from 'react';
 import videojs from 'video.js';
 import Player from 'video.js/dist/types/player';
 import 'video.js/dist/video-js.css'
 import { isProduction } from '../../env.const';
 import { useKeycloak } from '@react-keycloak/web';
+import PlaybackSpeedControls from './PlaybackSpeedControls';
 
 interface VideoPlayerProps {
-  videoUrl: string
+  videoUrl: string;
+  showSpeedControls?: boolean;
+  initialSeekTime?: number; // Unix timestamp or seconds offset to seek to on load
 }
 
-const VideoPlayer = ({ videoUrl }: VideoPlayerProps) => {
+const VideoPlayer = ({ videoUrl, showSpeedControls = true, initialSeekTime }: VideoPlayerProps) => {
   const { keycloak } = useKeycloak()
   const executed = useRef(false)
   const videoRef = useRef<HTMLVideoElement>(null);
   const playerRef = useRef<Player | null>(null);
+  const [currentSpeed, setCurrentSpeed] = useState(1);
 
   useEffect(() => {
     if (!executed.current) {
@@ -56,6 +60,11 @@ const VideoPlayer = ({ videoUrl }: VideoPlayerProps) => {
         if (!isProduction) console.log('mount new player')
         playerRef.current = videojs(videoRef.current, { ...defaultOptions }, () => {
           if (!isProduction) console.log('player is ready')
+          // Seek to initial time if specified (relative to video start)
+          if (initialSeekTime !== undefined && playerRef.current) {
+            playerRef.current.currentTime(initialSeekTime);
+            if (!isProduction) console.log('Seeking to initial time:', initialSeekTime)
+          }
         });
       }
       if (!isProduction) console.log('VideoPlayer rendered')
@@ -78,10 +87,24 @@ const VideoPlayer = ({ videoUrl }: VideoPlayerProps) => {
     }
   }, [videoUrl]);
 
+  const handleSpeedChange = (speed: number) => {
+    setCurrentSpeed(speed);
+    if (!isProduction) console.log('Playback speed changed to:', speed);
+  };
+
   return (
-    <div data-vjs-player>
+    <div>
-      {/* Setting an empty data-setup is required to override the default values and allow video to be fit the size of its parent */}
+      <div data-vjs-player>
-      <video ref={videoRef} className="small-player video-js vjs-default-skin" data-setup="{}" controls playsInline />
+        {/* Setting an empty data-setup is required to override the default values and allow video to be fit the size of its parent */}
+        <video ref={videoRef} className="small-player video-js vjs-default-skin" data-setup="{}" controls playsInline />
+      </div>
+      {showSpeedControls && (
+        <PlaybackSpeedControls
+          playerRef={playerRef as React.MutableRefObject<ReturnType<typeof videojs> | null>}
+          currentSpeed={currentSpeed}
+          onSpeedChange={handleSpeedChange}
+        />
+      )}
     </div>
   );
 };

src/shared/stores/events.store.ts

@@ -8,6 +8,9 @@ interface Filters {
     period?: [Date | null, Date | null]
     startTime?: string
     endTime?: string
+    minScore?: number
+    labels?: string[]
+    eventType?: 'all' | 'motion' | 'ai_detection'
 }
 
 export class EventsStore {
@@ -23,7 +26,10 @@ export class EventsStore {
         paramStartDate: string | undefined,
         paramEndDate: string | undefined,
         paramStartTime: string | undefined,
-        paramEndTime: string | undefined) {
+        paramEndTime: string | undefined,
+        paramMinScore: string | undefined,
+        paramLabels: string | undefined,
+        paramEventType: string | undefined) {
         this.filters.hostId = paramHostId
         this.filters.cameraId = paramCameraId
         if (paramStartDate && paramEndDate) {
@@ -31,6 +37,20 @@ export class EventsStore {
         }
         this.filters.startTime = paramStartTime
         this.filters.endTime = paramEndTime
+        if (paramMinScore) {
+            const score = parseFloat(paramMinScore)
+            if (!isNaN(score) && score >= 0 && score <= 1) {
+                this.filters.minScore = score
+            }
+        }
+        if (paramLabels) {
+            this.filters.labels = paramLabels.split(',')
+        }
+        if (paramEventType === 'motion' || paramEventType === 'ai_detection') {
+            this.filters.eventType = paramEventType
+        } else {
+            this.filters.eventType = 'all'
+        }
     }
 
     setHostId(hostId: string, navigate: (path: string, options?: NavigateOptions) => void) {
@@ -58,6 +78,21 @@ export class EventsStore {
         this.updateURL(navigate)
     }
 
+    setMinScore(minScore: number | undefined, navigate: (path: string, options?: NavigateOptions) => void) {
+        this.filters.minScore = minScore
+        this.updateURL(navigate)
+    }
+
+    setLabels(labels: string[] | undefined, navigate: (path: string, options?: NavigateOptions) => void) {
+        this.filters.labels = labels
+        this.updateURL(navigate)
+    }
+
+    setEventType(eventType: 'all' | 'motion' | 'ai_detection', navigate: (path: string, options?: NavigateOptions) => void) {
+        this.filters.eventType = eventType
+        this.updateURL(navigate)
+    }
+
     updateURL(navigate: (path: string, options?: NavigateOptions) => void) {
         const params = new URLSearchParams();
         if (this.filters.hostId) params.set(eventsQueryParams.hostId, this.filters.hostId);
@@ -74,6 +109,15 @@ export class EventsStore {
 
         if (this.filters.startTime) params.set(eventsQueryParams.startTime, this.filters.startTime)
         if (this.filters.endTime) params.set(eventsQueryParams.endTime, this.filters.endTime)
+        if (this.filters.minScore !== undefined && this.filters.minScore > 0) {
+            params.set(eventsQueryParams.minScore, this.filters.minScore.toString())
+        }
+        if (this.filters.labels && this.filters.labels.length > 0) {
+            params.set(eventsQueryParams.labels, this.filters.labels.join(','))
+        }
+        if (this.filters.eventType && this.filters.eventType !== 'all') {
+            params.set(eventsQueryParams.eventType, this.filters.eventType)
+        }
 
         navigate(`?${params.toString()}`, { replace: true });
     }

src/widgets/EventsBody.tsx

@@ -13,6 +13,9 @@ interface EventsBodyProps {
     period: [Date, Date],
     startTime?: string,
     endTime?: string,
+    minScore?: number,
+    labels?: string[],
+    eventType?: 'all' | 'motion' | 'ai_detection',
 }
 
 
@@ -22,6 +25,9 @@ const EventsBody: FC<EventsBodyProps> = ({
     period,
     startTime,
     endTime,
+    minScore,
+    labels,
+    eventType,
 }) => {
 
     const startTimeUnix = dayTimeToUnixTime(period[0], startTime ? startTime : '00:00')
@@ -46,6 +52,9 @@ const EventsBody: FC<EventsBodyProps> = ({
             host={data.host}
             startTime={startTimeUnix}
             endTime={endTimeUnix}
+            minScore={minScore}
+            labels={labels}
+            eventType={eventType}
         />
     )
 };

src/widgets/hosts.table/FrigateHostsTable.tsx

@@ -48,9 +48,10 @@ const FrigateHostsTable = ({ data, showAddButton = false, saveCallback, changedC
     }
 
     const headTitle = [
-        { propertyName: 'name', title: t('frigateHostTableTitles.host') },
+        { propertyName: 'name', title: t('siteTableTitles.siteName') },
-        { propertyName: 'host', title: t('frigateHostTableTitles.url') },
+        { propertyName: 'location', title: t('siteTableTitles.location') },
-        { propertyName: 'enabled', title: t('frigateHostTableTitles.enabled') },
+        { propertyName: 'host', title: t('siteTableTitles.url') },
+        { propertyName: 'enabled', title: t('siteTableTitles.enabled') },
         { title: '', sorting: false },
     ]
 
@@ -100,6 +101,7 @@ const FrigateHostsTable = ({ data, showAddButton = false, saveCallback, changedC
             updateAt: '',
             host: '',
             name: '',
+            location: '',
             enabled: true
         }
         setTableData([...tableData, newHost])
@@ -110,20 +112,28 @@ const FrigateHostsTable = ({ data, showAddButton = false, saveCallback, changedC
             <tr key={item.id}>
                 <TextInputCell
                     text={item.name}
-                    width='40%'
+                    width='25%'
                     id={item.id}
                     propertyName='name'
                     onChange={handleTextChange}
-                    placeholder={t('frigateHostTablePlaceholders.name')}
+                    placeholder={t('siteTablePlaceholders.name')}
+                />
+                <TextInputCell
+                    text={item.location || ''}
+                    width='25%'
+                    id={item.id}
+                    propertyName='location'
+                    onChange={handleTextChange}
+                    placeholder={t('siteTablePlaceholders.location')}
                 />
                 <TextInputCell
                     text={item.host}
-                    width='40%'
+                    width='30%'
                     id={item.id}
                     propertyName='host'
                     onChange={handleTextChange}
-                    placeholder={t('frigateHostTablePlaceholders.host')}
+                    placeholder={t('siteTablePlaceholders.url')}
-                    />
+                />
                 <SwitchCell value={item.enabled} width='5%' id={item.id} propertyName='enabled' toggle={handleSwitchChange} />
                 <StateCell id={item.id} width='5%' />
                 <td align='right' style={{ width: '10%', padding: '0', }}>

src/widgets/sidebars/EventsRightFilters.tsx

@@ -1,12 +1,15 @@
+import { Slider, Text, Stack } from '@mantine/core';
 import { observer } from 'mobx-react-lite';
-import { useContext, useState } from 'react';
+import { useContext } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
 import { Context } from '../..';
 import CameraSelect from '../../shared/components/filters/CameraSelect';
 import DateRangeSelect from '../../shared/components/filters/DateRangeSelect';
-import HostSelect from '../../shared/components/filters/HostSelect';
+import SiteSelect from '../../shared/components/filters/SiteSelect';
 import TimePicker from '../../shared/components/filters/TimePicker';
+import ObjectTypeFilter from '../../shared/components/filters/ObjectTypeFilter';
+import EventTypeFilter from '../../shared/components/filters/EventTypeFilter';
 import { isProduction } from '../../shared/env.const';
 
 
@@ -42,6 +45,21 @@ const EventsRightFilters = () => {
         if (!isProduction) console.log('Selected end time: ', value)
     }
 
+    const handleMinScoreChange = (value: number) => {
+        eventsStore.setMinScore(value > 0 ? value : undefined, navigate)
+        if (!isProduction) console.log('Selected min score: ', value)
+    }
+
+    const handleLabelsChange = (labels: string[] | undefined) => {
+        eventsStore.setLabels(labels, navigate)
+        if (!isProduction) console.log('Selected labels: ', labels)
+    }
+
+    const handleEventTypeChange = (eventType: 'all' | 'motion' | 'ai_detection') => {
+        eventsStore.setEventType(eventType, navigate)
+        if (!isProduction) console.log('Selected event type: ', eventType)
+    }
+
     const validatedStartTime = () => {
         if (eventsStore.filters.startTime && eventsStore.filters.endTime) {
             if (eventsStore.filters.startTime > eventsStore.filters.endTime) {
@@ -53,8 +71,8 @@ const EventsRightFilters = () => {
 
     return (
         <>
-            <HostSelect
+            <SiteSelect
-                label={t('selectHost')}
+                label={t('selectSite')}
                 valueId={eventsStore.filters.hostId}
                 onChange={handleHostSelect}
             />
@@ -86,6 +104,33 @@ const EventsRightFilters = () => {
                         label={t('eventsPage.selectEndTime')}
                         onChange={handleSelectEndTime}
                     />
+                    <Stack mt="md" gap="xs">
+                        <Text size="sm" fw={500}>{t('eventsPage.confidenceThreshold')}</Text>
+                        <Slider
+                            min={0}
+                            max={1}
+                            step={0.05}
+                            value={eventsStore.filters.minScore ?? 0}
+                            onChange={handleMinScoreChange}
+                            marks={[
+                                { value: 0, label: '0%' },
+                                { value: 0.5, label: '50%' },
+                                { value: 1, label: '100%' }
+                            ]}
+                            label={(value) => `${(value * 100).toFixed(0)}%`}
+                            styles={{
+                                markLabel: { fontSize: '0.75rem' },
+                            }}
+                        />
+                    </Stack>
+                    <ObjectTypeFilter
+                        value={eventsStore.filters.labels}
+                        onChange={handleLabelsChange}
+                    />
+                    <EventTypeFilter
+                        value={eventsStore.filters.eventType}
+                        onChange={handleEventTypeChange}
+                    />
                 </>
             }
         </>

src/widgets/sidebars/MainFiltersRightSide.tsx

@@ -2,7 +2,7 @@ import { observer } from 'mobx-react-lite';
 import { useContext } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Context } from '../..';
-import HostSelect from '../../shared/components/filters/HostSelect';
+import SiteSelect from '../../shared/components/filters/SiteSelect';
 import UserTagsFilter from '../../shared/components/filters/UserTagsFilter';
 import { isProduction } from '../../shared/env.const';
 import { useNavigate } from 'react-router-dom';
@@ -27,8 +27,8 @@ const MainFiltersRightSide = () => {
 
     return (
         <>
-            <HostSelect
+            <SiteSelect
-                label={t('selectHost')}
+                label={t('selectSite')}
                 valueId={hostId || undefined}
                 defaultId={hostId || undefined}
                 onChange={handleSelectHost}