Initial push to new VMS-frontend repository

2026-01-19 15:48:09 +05:30 · 2026-01-19 15:48:09 +05:30 · ba9a32720e
commit ba9a32720e
parent 9fc7a44c69
25 changed files with 802 additions and 106 deletions
--- a/.env.docker
+++ b/.env.docker
@ -1,4 +1,4 @@
-FRIGATE_PROXY=http://localhost:4000
-OPENID_SERVER=https://your.server.com:443/realms/your-realm
-REALM=frigate-realm
+FRIGATE_PROXY=http://frigate-proxy:4000
+OPENID_SERVER=https://keycloak:8443
 CLIENT_ID=frontend-client
+REALM=frigate-realm
--- a/src/AppBody.tsx
+++ b/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 },
    ]

--- a/src/locales/en.ts
+++ b/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: 'Редакт. конфиг.',
-        restart: 'Перезагрузка',
-        system: 'Система',
-        storage: 'Хранилище',
+        editConfig: 'Edit config',
+        restart: 'Restart',
+        system: 'System',
+        storage: 'Storage',
    },

    header: {
@ -81,18 +87,25 @@ const en = {
        settings: 'Settings',
        recordings: 'Recordings',
        events: 'Events',
-        hostsConfig: 'Frigate servers',
+        sitesConfig: 'Sites',
        acessSettings: 'Access settings',
    },
-    frigateHostTableTitles: {
-        host: 'Хост',
-        name: 'Имя хоста',
-        url: 'Адрес',
-        enabled: 'Включен',
+    siteTableTitles: {
+        siteName: 'Site Name',
+        location: 'Physical Location',
+        url: 'Frigate URL',
+        enabled: 'Enabled',
    },
-    frigateHostTablePlaceholders: {
-        host: 'http://host.docker.internal:5000 or http://192.168.1.1:5000',
-        name: 'YourFrigateHostName',
+    siteTablePlaceholders: {
+        url: 'http://host.docker.internal:5000 or http://192.168.1.1:5000',
+        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",
--- a/src/locales/ru.ts
+++ b/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: {
-        host: 'Хост',
-        name: 'Имя хоста',
-        url: 'Адрес',
+    siteTableTitles: {
+        siteName: 'Название объекта',
+        location: 'Физ. расположение',
+        url: 'Frigate URL',
        enabled: 'Включен',
    },
-    frigateHostTablePlaceholders: {
-        host: 'http://host.docker.internal:5000 or http://192.168.1.1:5000',
-        name: 'YourFrigateHostName',
+    siteTablePlaceholders: {
+        url: 'http://host.docker.internal:5000 or http://192.168.1.1:5000',
+        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: "Изменить тему",
--- a/src/pages/EditCameraPage.tsx
+++ b/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 />
+
+            {/* 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
--- a/src/pages/EventsPage.tsx
+++ b/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}
            />
        )
    }
--- a/src/pages/MainPage.tsx
+++ b/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,10 +85,9 @@ const MainPage = () => {
            } else if (hasNextPage && !isFetchingNextPage) {
                loadTriggered.current = true;
                fetchNextPage().then(() => {
-                    // Add a small delay before resetting the flag
                    setTimeout(() => {
                        loadTriggered.current = false;
-                    }, 300); // delay in milliseconds; adjust as needed
+                    }, 300);
                });
            }
        }
@ -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%'
-                justify='center'
-            >
+            <Flex w='100%' justify='center'>
                <ClearableTextInput
                    clearable
                    maw={400}
@ -143,14 +157,31 @@ const MainPage = () => {
                    onChange={onInputChange}
                />
            </Flex>
-            <Flex justify='center' h='100%' direction='column' w='100%' >
-                <Grid mt='sm' justify="center" mb='sm' align='stretch'>
-                    {cameras.slice(0, visibleCount).map(camera => (
-                        <CameraCard key={camera.id} camera={camera} />
-                    ))}
-                </Grid>
+            <Flex justify='center' h='100%' direction='column' w='100%' mt="md">
+                <Accordion multiple defaultValue={initialExpanded} variant="separated">
+                    {enabledSites.map(site => {
+                        const siteCameras = groupedCameras[site.id] || []
+                        const onlineCount = siteCameras.filter(c => c.state !== false).length
+
+                        // If we are filtering by host, only show that host
+                        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}
-                {/* trigger point. Rerender twice when enabled */}
                <div ref={ref} style={{ height: '50px' }} />
            </Flex>
        </Flex>
--- a/src/pages/PlayRecordPage.tsx
+++ b/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>
    );
 };
--- a/src/services/frigate.proxy/frigate.schema.ts
+++ b/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()
 });
--- a/src/shared/components/RetentionSettings.tsx
+++ b/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;
--- a/src/shared/components/SiteGroup.tsx
+++ b/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;
--- a/src/shared/components/SiteStatusBadge.tsx
+++ b/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;
--- a/src/shared/components/accordion/EventsAccordion.tsx
+++ b/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,7 +58,7 @@ 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 }) => {
            if (!isRequiredParams) return null
            let queryStartTime: 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}
--- a/src/shared/components/accordion/EventsAccordionItem.tsx
+++ b/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 ? <></> :
+                        <BoundingBoxOverlay
+                            box={event.data?.box}
+                            label={event.label}
+                            score={event.data?.score}
+                        >
                            <OnScreenImage
                                maw={200}
                                mr='1rem'
                                fit="contain"
                                withPlaceholder
                                src={proxyApi.eventThumbnailUrl(hostName, event.id)} />
+                        </BoundingBoxOverlay>
                    }
                    {eventLabel(event)}
                    <Group>
--- a/src/shared/components/filters/EventTypeFilter.tsx
+++ b/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;
--- a/src/shared/components/filters/ObjectTypeFilter.tsx
+++ b/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;
--- a/src/shared/components/filters/SiteSelect.tsx
+++ b/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) => {
-    const { data: hosts, isError, isPending, isSuccess, refetch } = useQuery({
+}: SiteSelectProps) => {
+    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
-        .filter(host => host.enabled)
-        .map(host => ({ value: host.id, label: host.name }))
+    const siteItems: OneSelectItem[] = sites
+        .filter(site => site.enabled)
+        .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;
--- a/src/shared/components/images/BoundingBoxOverlay.tsx
+++ b/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;
--- a/src/shared/components/players/PlaybackSpeedControls.tsx
+++ b/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;
--- a/src/shared/components/players/VideoPlayer.tsx
+++ b/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,11 +87,25 @@ const VideoPlayer = ({ videoUrl }: VideoPlayerProps) => {
    }
  }, [videoUrl]);

+  const handleSpeedChange = (speed: number) => {
+    setCurrentSpeed(speed);
+    if (!isProduction) console.log('Playback speed changed to:', speed);
+  };
+
  return (
+    <div>
      <div data-vjs-player>
        {/* 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>
  );
 };

--- a/src/shared/stores/events.store.ts
+++ b/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 });
    }
--- a/src/widgets/EventsBody.tsx
+++ b/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}
        />
    )
 };
--- a/src/widgets/hosts.table/FrigateHostsTable.tsx
+++ b/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: 'host', title: t('frigateHostTableTitles.url') },
-        { propertyName: 'enabled', title: t('frigateHostTableTitles.enabled') },
+        { propertyName: 'name', title: t('siteTableTitles.siteName') },
+        { propertyName: 'location', title: t('siteTableTitles.location') },
+        { 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,19 +112,27 @@ 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%' />
--- a/src/widgets/sidebars/EventsRightFilters.tsx
+++ b/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
-                label={t('selectHost')}
+            <SiteSelect
+                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}
+                    />
                </>
            }
        </>
--- a/src/widgets/sidebars/MainFiltersRightSide.tsx
+++ b/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
-                label={t('selectHost')}
+            <SiteSelect
+                label={t('selectSite')}
                valueId={hostId || undefined}
                defaultId={hostId || undefined}
                onChange={handleSelectHost}