+
+ Устройство не найдено
+ + +
+
+ Все устройства
+
+
+ /
+ {device.factoryNumber}
+
+
+
+
+
+
+ )
+}
\ No newline at end of file
diff --git a/mdm-front/src/pages/DevicePage/components/DeviceMainCard/DeviceMainCard.tsx b/mdm-front/src/pages/DevicePage/components/DeviceMainCard/DeviceMainCard.tsx
new file mode 100644
index 0000000..d535722
--- /dev/null
+++ b/mdm-front/src/pages/DevicePage/components/DeviceMainCard/DeviceMainCard.tsx
@@ -0,0 +1,74 @@
+import { ShieldCheck, Signal, Smartphone, Trash2 } from 'lucide-react'
+import type { Device } from '../../types'
+import { conditionText, connectionText, getStatusClass } from '../../types'
+
+type DeviceMainCardProps = {
+ device: Device
+}
+
+export function DeviceMainCard({ device }: DeviceMainCardProps) {
+ return (
+ Действия
+ +
+
+
+
+
+
+
+
+
+
+
+ )
+}
\ No newline at end of file
diff --git a/mdm-front/src/pages/DevicePage/components/DeviceMapCard/DeviceMapCard.scss b/mdm-front/src/pages/DevicePage/components/DeviceMapCard/DeviceMapCard.scss
new file mode 100644
index 0000000..6224a48
--- /dev/null
+++ b/mdm-front/src/pages/DevicePage/components/DeviceMapCard/DeviceMapCard.scss
@@ -0,0 +1,87 @@
+@use '../../../../shared/styles/variables' as *;
+
+
+.device-map__container {
+ display: flex;
+ flex: 1;
+ position: relative;
+ border-radius: 14px;
+ overflow: hidden;
+ background: #eef1f6;
+}
+
+.device-map__leaflet {
+ width: 100%;
+ height: 100%;
+ z-index: 1;
+}
+
+.device-map__coords {
+ position: absolute;
+ left: 10px;
+ bottom: 10px;
+ z-index: 2;
+
+ min-height: 28px;
+ padding: 0 10px;
+
+ border-radius: 999px;
+ background: rgba(255, 255, 255, 0.92);
+
+ display: inline-flex;
+ align-items: center;
+ gap: 6px;
+
+ color: #30394b;
+ font-size: 12px;
+ font-weight: 600;
+
+ box-shadow: 0 8px 22px rgba(15, 23, 42, 0.12);
+
+ svg {
+ color: $blue;
+ }
+}
+
+.device-map-marker {
+ background: transparent;
+ border: none;
+}
+
+.device-map-marker__pin {
+ width: 34px;
+ height: 34px;
+ border-radius: 50%;
+ background: rgba(3, 29, 154, 0.18);
+
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.device-map-marker__inner {
+ width: 16px;
+ height: 16px;
+ border-radius: 50%;
+ background: $blue;
+ border: 3px solid #ffffff;
+ box-shadow: 0 8px 18px rgba(3, 29, 154, 0.35);
+}
+
+.device-map-popup {
+ display: flex;
+ flex-direction: column;
+ gap: 3px;
+
+ b {
+ color: #151a24;
+ font-size: 13px;
+ font-weight: 700;
+ }
+
+ span {
+ color: #738098;
+ font-size: 12px;
+ font-weight: 500;
+ }
+}
diff --git a/mdm-front/src/pages/DevicePage/components/DeviceMapCard/DeviceMapCard.tsx b/mdm-front/src/pages/DevicePage/components/DeviceMapCard/DeviceMapCard.tsx
new file mode 100644
index 0000000..44bdb20
--- /dev/null
+++ b/mdm-front/src/pages/DevicePage/components/DeviceMapCard/DeviceMapCard.tsx
@@ -0,0 +1,135 @@
+import { useEffect, useMemo } from 'react'
+import {
+ CircleMarker,
+ MapContainer,
+ Marker,
+ Polyline,
+ Popup,
+ TileLayer,
+ useMap,
+} from 'react-leaflet'
+import L from 'leaflet'
+import { Map } from 'lucide-react'
+import './DeviceMapCard.scss'
+
+import type { Device } from '../../types'
+
+type DeviceMapCardProps = {
+ device: Device
+}
+
+const defaultLocation = {
+ lat: 54.7558,
+ lng: 87.1099,
+}
+
+const deviceMarkerIcon = L.divIcon({
+ className: 'device-map-marker',
+ html: `
+
+
+
+
+ {device.image ? (
+ 
+ ) : (
+
+
+
+
+ {device.model ?? '-'}
+ +{device.factoryNumber}
++ {device.imei} + {device.serialNumber ? ` · ${device.serialNumber}` : ''} +
+ + + +
+
+
+
+
+
+
+
+ {device.workTime && (
+
+
+ )}
+
+
+
+
+
+
+ Зарегистрирован
+ {device.registeredAt ?? '10:00 20.04.2026'}
+
+
+
+
+
+
+
+
+
+ `,
+ iconSize: [34, 34],
+ iconAnchor: [17, 17],
+ popupAnchor: [0, -18],
+})
+
+function MapResizeWatcher() {
+ const map = useMap()
+
+ useEffect(() => {
+ const timeoutId = window.setTimeout(() => {
+ map.invalidateSize()
+ }, 100)
+
+ return () => window.clearTimeout(timeoutId)
+ }, [map])
+
+ return null
+}
+
+export function DeviceMapCard({ device }: DeviceMapCardProps) {
+ const location = device.location ?? defaultLocation
+
+ const currentPosition = useMemo<[number, number]>(() => {
+ return [location.lat, location.lng]
+ }, [location.lat, location.lng])
+
+ const routePositions = useMemo<[number, number][]>(() => {
+ return device.route?.map((point) => [point.lat, point.lng]) ?? []
+ }, [device.route])
+
+ return (
+
+
+ )
+}
\ No newline at end of file
diff --git a/mdm-front/src/pages/DevicePage/components/DevicePermissionsCard/DevicePermissionsCard.tsx b/mdm-front/src/pages/DevicePage/components/DevicePermissionsCard/DevicePermissionsCard.tsx
new file mode 100644
index 0000000..13c240b
--- /dev/null
+++ b/mdm-front/src/pages/DevicePage/components/DevicePermissionsCard/DevicePermissionsCard.tsx
@@ -0,0 +1,48 @@
+import type { ReactNode } from 'react'
+import type { Device } from '../../types'
+
+import { WifiIcon } from '../../../../assets/icons/Wifi'
+import { BluetoothIcon } from '../../../../assets/icons/Bluetooth'
+import { GpsIcon } from '../../../../assets/icons/Gps'
+import { CameraIcon } from '../../../../assets/icons/Camera'
+import { SimIcon } from '../../../../assets/icons/Sim'
+import { VolumeIcon } from '../../../../assets/icons/Volume'
+
+type DevicePermissionsCardProps = {
+ device: Device
+}
+
+export function DevicePermissionsCard({ device }: DevicePermissionsCardProps) {
+ return (
+
+
+
+
+
+
+
+ Устройство на карте
++ Последнее местоположение:{' '} + {device.lastLocationAt ?? '12:56 23.04.2026'} +
+
+
+
+
+
+
+ ))}
+
+
+
+
+
+
+
+
+ Точка маршрута
+ {point.time && {point.time}}
+
+
+ {device.model ?? 'Устройство'}
+ {device.factoryNumber}
+ {device.imei}
+ {device.lastLocationAt ?? 'Время не указано'}
+
+
+
+ )
+}
+
+type PermissionItemProps = {
+ icon: ReactNode
+ label: string
+ enabled: boolean
+}
+
+function PermissionItem({ icon, label, enabled }: PermissionItemProps) {
+ return (
+
+ {icon}
+
+
+ )
+}
\ No newline at end of file
diff --git a/mdm-front/src/pages/DevicePage/components/DeviceStatsCards/DeviceStatsCards.tsx b/mdm-front/src/pages/DevicePage/components/DeviceStatsCards/DeviceStatsCards.tsx
new file mode 100644
index 0000000..924b58a
--- /dev/null
+++ b/mdm-front/src/pages/DevicePage/components/DeviceStatsCards/DeviceStatsCards.tsx
@@ -0,0 +1,59 @@
+import { Battery, RotateCcw, ShieldCheck, Smartphone } from 'lucide-react'
+import type { Device } from '../../types'
+
+type DeviceStatsCardsProps = {
+ device: Device
+}
+
+export function DeviceStatsCards({ device }: DeviceStatsCardsProps) {
+ return (
+
+ {label}
+
+
+
+
+
+
+
+ )
+}
\ No newline at end of file
diff --git a/mdm-front/src/pages/DevicePage/types.ts b/mdm-front/src/pages/DevicePage/types.ts
new file mode 100644
index 0000000..eef96e8
--- /dev/null
+++ b/mdm-front/src/pages/DevicePage/types.ts
@@ -0,0 +1,68 @@
+export type DeviceCondition = 'ok' | 'inspection'
+export type DeviceConnection = 'online' | 'offline' | 'offlineDanger'
+
+export type Device = {
+ id: number
+ factoryNumber: string
+ model?: string
+ imei: string
+ serialNumber?: string
+ workTime: string | null
+ employee: string | null
+ condition: DeviceCondition
+ connection: DeviceConnection
+ connectionText: string
+ registeredAt?: string
+ lastLocationAt?: string
+ battery?: number
+ batteryMaxCapacity?: number
+ chargeCycles?: string
+ totalWorkTime?: string
+ mediumImpacts?: string
+ image?: string
+ location?: {
+ lat: number
+ lng: number
+ }
+ route?: {
+ lat: number
+ lng: number
+ time?: string
+ }[]
+ permissions?: {
+ wifi: boolean
+ bluetooth: boolean
+ gps: boolean
+ camera: boolean
+ sim: boolean
+ speaker: boolean
+ }
+ statusIcons: {
+ gps: boolean
+ wifi: boolean
+ bluetooth: boolean
+ lock: boolean
+ camera: boolean
+ sim: boolean
+ sound: boolean
+ kiosk: boolean
+ }
+}
+
+export const conditionText: Record
+
+
+ Аккумулятор
+ +
+
+
+ {device.battery ?? '-'}%
+
+
+
+
+
+
+
+
+ Максимальная емкость
+ {device.batteryMaxCapacity ?? '-'}%
+
+
+
+
+
+ Циклов перезарядки
+ {device.chargeCycles ?? '-'}
+
+
+
+
+ Общее время работы
+ {device.totalWorkTime ?? '-'}
+
+
+
+
+ Средних ударов
+ {device.mediumImpacts ?? '-'}
+
+
+
+
+ {isOpen && (
+
+ )
+}
\ No newline at end of file
diff --git a/mdm-front/src/pages/DevicesPage/components/DevicesFiltersPanel/DevicesFiltersPanel.scss b/mdm-front/src/pages/DevicesPage/components/DevicesFiltersPanel/DevicesFiltersPanel.scss
index 75b44b1..4cdbce2 100644
--- a/mdm-front/src/pages/DevicesPage/components/DevicesFiltersPanel/DevicesFiltersPanel.scss
+++ b/mdm-front/src/pages/DevicesPage/components/DevicesFiltersPanel/DevicesFiltersPanel.scss
@@ -35,7 +35,7 @@
.devices-filter-item {
border-radius: 14px;
background: #ffffff;
- overflow: hidden;
+ overflow: visible;
}
.devices-filter-item__header {
@@ -43,9 +43,9 @@
}
.devices-filter-item__trigger {
- width: 100%;
+ width: calc(100% - 32px);
min-height: 44px;
- padding: 0 14px;
+ margin: 0 16px;
border: none;
border-bottom: 1px solid transparent;
@@ -56,14 +56,14 @@
justify-content: space-between;
gap: 12px;
- color: #30394b;
- font-size: 15px;
+ color: black;
+ font-size: 18px;
font-weight: 500;
cursor: pointer;
&[data-state='open'] {
- color: #031d9a;
- border-bottom-color: #e3e8f0;
+ //color: $blue;
+ border-bottom-color: $gray20;
}
}
@@ -77,7 +77,7 @@
}
.devices-filter-item__content {
- overflow: hidden;
+ //overflow: hidden;
&[data-state='open'] {
animation: filterSlideDown 0.2s ease;
@@ -89,7 +89,7 @@
}
.devices-filter-item__inner {
- padding: 12px 14px 10px;
+ padding: 12px 16px 16px;
}
.devices-period {
@@ -101,7 +101,7 @@
.devices-period__divider {
width: 12px;
height: 1px;
- background: #8c96aa;
+ background: $gray50;
flex: 0 0 12px;
}
@@ -115,14 +115,14 @@
border-radius: 999px;
background: #eef1f6;
- color: #4f5b73;
- font-size: 12px;
+ color: $gray50;
+ font-size: 16px;
font-weight: 400;
cursor: pointer;
}
.devices-filter-reset {
- margin: 8px 0 0 auto;
+ margin: 12px 0 0 auto;
padding: 0;
display: block;
@@ -130,8 +130,8 @@
border: none;
background: transparent;
- color: #031d9a;
- font-size: 12px;
+ color: $blue;
+ font-size: 14px;
font-weight: 400;
text-decoration: underline;
cursor: pointer;
@@ -145,18 +145,24 @@
min-height: 28px;
- color: #30394b;
+ color: $gray50;
font-size: 13px;
& + & {
- margin-top: 8px;
+ margin-top: 12px;
}
}
.devices-filter-row__label {
- color: #30394b;
- font-size: 13px;
- font-weight: 400;
+ color: $gray50;
+ font-size: 16px;
+ font-weight: 500;
+ text-align: left;
+}
+
+.devices-checkbox-list{
+ display: flex;
+ flex-direction: column;
}
.devices-radio,
@@ -166,7 +172,8 @@
gap: 6px;
color: #30394b;
- font-size: 13px;
+ font-size: 16px;
+ font-weight: 500;
cursor: pointer;
user-select: none;
diff --git a/mdm-front/src/pages/DevicesPage/components/DevicesFiltersPanel/DevicesFiltersPanel.tsx b/mdm-front/src/pages/DevicesPage/components/DevicesFiltersPanel/DevicesFiltersPanel.tsx
index 2bf267e..ce76032 100644
--- a/mdm-front/src/pages/DevicesPage/components/DevicesFiltersPanel/DevicesFiltersPanel.tsx
+++ b/mdm-front/src/pages/DevicesPage/components/DevicesFiltersPanel/DevicesFiltersPanel.tsx
@@ -1,13 +1,11 @@
import { useState } from 'react'
-import DatePicker, { registerLocale } from 'react-datepicker'
-import { ru } from 'date-fns/locale/ru'
import * as Accordion from '@radix-ui/react-accordion'
import { ChevronDown } from 'lucide-react'
import './Datepicker.scss'
+import { DevicesDateRangePicker, type DevicesDateRangePickerValue } from '../DevicesDateRangePicker/DevicesDateRangePicker'
import './DevicesFiltersPanel.scss'
-registerLocale('ru', ru)
type DevicesFiltersPanelProps = {
isOpen: boolean
@@ -15,13 +13,12 @@ type DevicesFiltersPanelProps = {
export function DevicesFiltersPanel({ isOpen }: DevicesFiltersPanelProps) {
- const [startDate, setStartDate] = useState
+
+ )}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + {value.from && value.to + ? `Выбрано: ${formatDate(value.from)} — ${formatDate(value.to)}` + : 'Период не выбран'} +
+ +
+
+
+
+
+