+
+
+
+
+ setIsSidebarDrawerOpen(true)}
+ />
+
+
+
+
+
+
+
+ Навигация
+
+
+
+ setIsSidebarDrawerOpen(false)}
+ />
+
+
+
+
+
+
+ )
+}
diff --git a/frontend/src/app/router/router.tsx b/frontend/src/app/router/router.tsx
new file mode 100644
index 0000000..99f79ce
--- /dev/null
+++ b/frontend/src/app/router/router.tsx
@@ -0,0 +1,68 @@
+// src/app/router/router.tsx
+import { lazy, Suspense, type ReactNode } from 'react'
+import { createBrowserRouter, Navigate } from 'react-router-dom'
+
+import { AppLayout } from '../layouts/AppLayout'
+
+const EmployeesPage = lazy(() =>
+ import('../../pages/EmployeesPage/EmployeesPage').then((module) => ({
+ default: module.EmployeesPage,
+ })),
+)
+
+const MachinesPage = lazy(() =>
+ import('../../pages/MachinesPage/MachinesPage').then((module) => ({
+ default: module.MachinesPage,
+ })),
+)
+
+const MachinePage = lazy(() =>
+ import('../../pages/MachinePage/MachinePage').then((module) => ({
+ default: module.MachinePage,
+ })),
+)
+
+function lazyRoute(element: ReactNode) {
+ return
+
+
+ | ${escapeHtml(row[0])} | +${escapeHtml(row[1])} | +
|---|
| АТТ | +Госномер | +Тип | +Подразделение | +Маяк | +Последний статус | +Последние данные | +В движении | +Заведена | +Стояла | +Без данных | +Смен состояний | +КПИ | +
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| ${escapeHtml(machine.name)} | +${escapeHtml(machine.licensePlate)} | +${escapeHtml(machine.type)} | +${escapeHtml(machine.department)} | +${machine.beaconBound ? 'Привязан' : 'Не привязан'} | +${escapeHtml(machine.lastKnownState)} | +${escapeHtml(machine.lastDataReceivedAt)} | +${escapeHtml(formatDuration(machine.movingSeconds))} | +${escapeHtml(formatDuration(machine.engineOnSeconds))} | +${escapeHtml(formatDuration(machine.idleSeconds))} | +${escapeHtml(formatDuration(machine.noDataSeconds))} | +${machine.stateChangesCount} | +${escapeHtml(formatPercent(machine.utilizationPercent))} | +
| АТТ | +Госномер | +Начало | +Конец | +Состояние | +Длительность | +
|---|---|---|---|---|---|
| ${escapeHtml(item.machineName)} | +${escapeHtml(item.licensePlate)} | +${escapeHtml(item.startedAt)} | +${escapeHtml(item.endedAt)} | +${escapeHtml(item.state)} | +${escapeHtml(formatDuration(item.durationSeconds))} | +
Отчет по парку АТТ
+Период: ${escapeHtml(formatDate(`${report.date}T00:00:00.000Z`))}. Сформирован: ${escapeHtml(formatDateTime(report.generatedAt))}.
+ +Сводка
+ ${renderSummaryTable(report)} + +АТТ
+ ${renderMachineTable(report)} + +История состояний
+ ${renderHistoryTable(report)} + + + ` +} + +function getExcelBlob(report: FleetDailyReport) { + const html = renderReportHtml(report, 'excel') + + return new Blob([html], { + type: 'application/vnd.ms-excel;charset=utf-8', + }) +} + +export const fleetReportService = { + async getDefaultDailyReportDate(): PromiseПроверка авторизации...
+ }
+
+ if (!currentUser) {
+ return (
+
+
+
+
+
+
+
+ {battery}%
+
+ )
+}
\ No newline at end of file
diff --git a/frontend/src/pages/DevicePage/components/DeviceActionsCard/DeviceActionsCard.scss b/frontend/src/pages/DevicePage/components/DeviceActionsCard/DeviceActionsCard.scss
new file mode 100644
index 0000000..f268ceb
--- /dev/null
+++ b/frontend/src/pages/DevicePage/components/DeviceActionsCard/DeviceActionsCard.scss
@@ -0,0 +1,235 @@
+@use '../../../../shared/styles/variables' as *;
+
+
+.device-actions {
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ height: calc(100% - 40px);
+
+ h3 {
+ line-height: 1;
+ margin: 0 0 12px;
+ padding-bottom: 12px;
+ border-bottom: 1px solid $color-border;
+ text-align: left;
+ color: $color-text-heading;
+ font-size: $font-size-18;
+ font-weight: 600;
+ }
+
+ .actions-button-container {
+ display: flex;
+ flex-direction: column;
+ }
+
+ button {
+ display: flex;
+ flex-direction: row;
+ gap: 14px;
+ align-items: center;
+ justify-content: flex-start;
+ width: 100%;
+ padding: 14px;
+ border: none;
+ border-radius: 12px;
+ background: $color-bg;
+
+ display: flex;
+ align-items: center;
+
+ color: $gray50;
+ font-size: $font-size-18;
+ font-weight: 550;
+ cursor: pointer;
+ transition: .2s ease;
+ small{
+ font-weight: 500;
+ opacity: .8;
+ }
+ .actions-button-text{
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ }
+
+ svg {
+ height: 32px;
+ width: 32px;
+ }
+
+ &:not(:disabled):hover {
+ background-color: rgba($gray20-rgb, .9);
+ //color: $blue;
+ box-shadow: inset 0 0 0 1.5px rgba($gray50-rgb, .1);
+ }
+
+ &:disabled {
+ opacity: .74;
+ cursor: not-allowed;
+
+ &:hover {
+ background: $color-bg;
+ color: $gray50;
+ }
+ }
+
+ &+button {
+ margin-top: 8px;
+ }
+ }
+
+ .device-actions__lock-button {
+ overflow: hidden;
+
+ .device-actions__lock-content {
+ position: relative;
+ display: grid;
+ width: 100%;
+ min-height: 40px;
+ min-width: 0;
+ overflow: hidden;
+ }
+
+ .device-actions__lock-state {
+ grid-area: 1 / 1;
+ display: flex;
+ align-items: center;
+ gap: 14px;
+ width: 100%;
+ min-height: 40px;
+ min-width: 0;
+ }
+
+ .device-actions__lock-icon {
+ flex: 0 0 32px;
+ transition:
+ color 0.2s ease,
+ transform 0.24s cubic-bezier(0.34, 1.42, 0.64, 1);
+ }
+
+ &.is-loading {
+ opacity: 1;
+ cursor: wait;
+
+ .device-actions__loading-icon {
+ color: $blue;
+ transform: none;
+ transform-box: fill-box;
+ transform-origin: center;
+ backface-visibility: hidden;
+ transition: color 0.2s ease;
+ will-change: transform;
+ animation: device-actions-loading-spin 0.85s linear infinite;
+ }
+
+ &:disabled:hover {
+ background: $color-bg;
+ color: $gray50;
+ }
+ }
+
+ &.is-lock:not(.is-loading) {
+ &:not(:disabled):hover {
+ .device-actions__lock-icon {
+ color: $red;
+ transform: translateY(-1px) scale(1.06);
+ }
+ }
+ }
+
+ &.is-unlock:not(.is-loading) {
+ &:not(:disabled):hover {
+ .device-actions__lock-icon {
+ color: $blue;
+ transform: rotate(-8deg) translateY(-1px) scale(1.06);
+ }
+ }
+ }
+ }
+
+ .device-actions__error {
+ margin-top: 10px;
+ padding: 7px 10px;
+ border-radius: 10px;
+ background: $color-danger-tint;
+
+ color: $red;
+ font-size: $font-size-13;
+ font-weight: 600;
+ line-height: 1.25;
+ }
+
+ .future-label{
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ font-size: $font-size-14;
+ font-weight: 550;
+ padding: 10px 14px;
+ margin-top: 20px;
+ gap: 14px;
+ color: $blue;
+ background-color: $blue20;
+ border-radius: 14px;
+ svg{
+ height: 20px;
+ width: auto;
+ }
+ }
+}
+
+.device-actions__apps-icon {
+ transition: color 0.2s ease;
+
+ rect {
+ transform-box: fill-box;
+ transform-origin: center;
+ transition: transform 0.22s ease;
+ }
+}
+
+.device-actions__apps-button:not(:disabled):hover {
+ .device-actions__apps-icon {
+ color: $blue;
+
+ rect:nth-child(2) {
+ --tile-pop-x: 1.7px;
+ --tile-pop-y: -1.7px;
+ --tile-rest-x: 0.8px;
+ --tile-rest-y: -0.8px;
+ animation: device-actions-app-tile 0.48s cubic-bezier(0.34, 1.42, 0.64, 1);
+ transform: translate(var(--tile-rest-x), var(--tile-rest-y)) scale(1);
+ }
+ }
+}
+
+@keyframes device-actions-app-tile {
+ 0% {
+ transform: translate(0, 0) scale(1);
+ }
+
+ 45% {
+ transform: translate(var(--tile-pop-x), var(--tile-pop-y)) scale(0.86);
+ }
+
+ 100% {
+ transform: translate(var(--tile-rest-x, 0), var(--tile-rest-y, 0)) scale(1);
+ }
+}
+
+@keyframes device-actions-loading-spin {
+ to {
+ transform: rotate(360deg);
+ }
+}
+
+@media (prefers-reduced-motion: reduce) {
+ .device-actions {
+ .device-actions__lock-button.is-loading {
+ .device-actions__loading-icon {
+ animation: none;
+ }
+ }
+ }
+}
diff --git a/frontend/src/pages/DevicePage/components/DeviceActionsCard/DeviceActionsCard.tsx b/frontend/src/pages/DevicePage/components/DeviceActionsCard/DeviceActionsCard.tsx
new file mode 100644
index 0000000..c24926c
--- /dev/null
+++ b/frontend/src/pages/DevicePage/components/DeviceActionsCard/DeviceActionsCard.tsx
@@ -0,0 +1,272 @@
+import { memo, useEffect, useState } from 'react'
+import { AnimatePresence, m, useReducedMotion } from 'framer-motion'
+import { useMutation } from '@apollo/client/react'
+import { CircleAlert, Unlock } from 'lucide-react'
+
+import { Apps } from '../../../../assets/icons/Apps'
+import { BlockIcon } from '../../../../assets/icons/Block'
+import { LoadingTwotoneLoopIcon } from '../../../../assets/icons/LoadingTwotoneLoop'
+import type { Device } from '../../types'
+import {
+ CHANGE_PHONE_POLICY_MUTATION,
+} from '../../../../entities/device/api/device.graphql'
+import type {
+ ChangePhonePolicyData,
+ ChangePhonePolicyVariables,
+} from '../../../../entities/device/model/types'
+import {
+ normalizeComponentUseOption,
+ normalizeServiceUseOption,
+} from '../../../../entities/device/lib/phonePolicy'
+
+import './DeviceActionsCard.scss'
+
+type DeviceActionsCardProps = {
+ device: Device
+ onOpenApps: () => void
+ onLockStateChange?: () => Promise
+
+ )
+}, areDeviceActionsCardPropsEqual)
diff --git a/frontend/src/pages/DevicePage/components/DeviceAppsAccordion/DeviceAppsAccordion.scss b/frontend/src/pages/DevicePage/components/DeviceAppsAccordion/DeviceAppsAccordion.scss
new file mode 100644
index 0000000..824c67e
--- /dev/null
+++ b/frontend/src/pages/DevicePage/components/DeviceAppsAccordion/DeviceAppsAccordion.scss
@@ -0,0 +1,269 @@
+@use '../../../../shared/styles/variables' as *;
+
+.device-apps {
+ margin-top: 34px;
+ padding: 0 90px;
+ border-radius: 22px;
+}
+
+.device-apps__header {
+ margin-bottom: 16px;
+
+ display: flex;
+ align-items: flex-start;
+ justify-content: space-between;
+ gap: 18px;
+
+ h3 {
+ margin: 0;
+ color: $color-text-heading;
+ font-size: $font-size-20;
+ font-weight: 650;
+ }
+
+ p {
+ margin: 4px 0 0;
+ color: $gray50;
+ font-size: $font-size-14;
+ font-weight: 500;
+ }
+
+ span {
+ padding: 8px 12px;
+ border-radius: 999px;
+ background: $color-surface;
+ color: $gray50;
+ font-size: $font-size-13;
+ font-weight: 600;
+
+ &.is-error {
+ background: $color-danger-tint;
+ color: $red;
+ }
+ }
+}
+
+.device-apps__empty {
+ min-height: 240px;
+ padding: 24px 18px;
+}
+
+.device-apps__list {
+ display: flex;
+ flex-direction: column;
+ gap: 10px;
+}
+
+.device-app-item {
+ border: 1px solid $gray20;
+ border-radius: 18px;
+ background: $color-surface;
+ overflow: hidden;
+}
+
+.device-app-item__header {
+ margin: 0;
+}
+
+.device-app-item__trigger {
+ width: 100%;
+ padding: 14px 16px;
+ border: none;
+ background: $transparent;
+
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 18px;
+
+ font-family: inherit;
+ cursor: pointer;
+ text-align: left;
+
+ transition: background-color 0.2s ease;
+
+ &:hover {
+ background: $color-surface-muted;
+ }
+
+ &[data-state='open'] {
+ &:hover{
+ background-color: $color-surface;
+ }
+ .device-app-item__chevron {
+ transform: rotate(180deg);
+ }
+ }
+}
+
+.device-app-item__main {
+ min-width: 0;
+
+ display: flex;
+ align-items: center;
+ gap: 12px;
+}
+
+.device-app-item__icon {
+ width: 44px;
+ height: 44px;
+ border-radius: 14px;
+
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+
+ color: $color-text-inverse;
+ background: $blue;
+ flex: 0 0 auto;
+
+ &.is-radio {
+ background: $accent-purple;
+ }
+
+ &.is-message {
+ background: $accent-sky;
+ }
+
+ &.is-system {
+ background: $color-text-heading;
+ }
+
+ &.is-security {
+ background: $accent-teal;
+ }
+
+ &.is-package {
+ background: $color-warning;
+ }
+}
+
+.device-app-item__info {
+ min-width: 0;
+
+ display: flex;
+ flex-direction: column;
+ gap: 3px;
+
+ strong {
+ color: $color-text-heading;
+ font-size: $font-size-16;
+ font-weight: 650;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+
+ small {
+ color: $gray50;
+ font-size: $font-size-13;
+ font-weight: 500;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+}
+
+.device-app-item__right {
+ display: flex;
+ align-items: center;
+ gap: 18px;
+ flex: 0 0 auto;
+}
+
+.device-app-item__usage {
+ min-width: 84px;
+
+ display: flex;
+ flex-direction: column;
+ align-items: flex-end;
+ gap: 1px;
+
+ strong {
+ color: $color-text-heading;
+ font-size: $font-size-20;
+ font-weight: 600;
+ line-height: 1;
+ }
+
+ span {
+ color: $gray50;
+ font-size: $font-size-12;
+ font-weight: 500;
+ }
+}
+
+.device-app-item__chevron {
+ color: $gray50;
+ transition: transform 0.2s ease;
+}
+
+.device-app-item__content {
+ overflow: hidden;
+
+ &[data-state='open'] {
+ animation: deviceAppAccordionDown 0.2s ease;
+ }
+
+ &[data-state='closed'] {
+ animation: deviceAppAccordionUp 0.2s ease;
+ }
+}
+
+.device-app-item__body {
+ padding: 0 16px 16px;
+}
+
+.device-app-item__meta {
+ margin-bottom: 12px;
+ padding: 12px 14px;
+ border-radius: 14px;
+ display: flex;
+ flex-wrap: wrap;
+ gap: 10px 18px;
+
+ color: $gray50;
+ font-size: $font-size-13;
+ font-weight: 500;
+
+ b {
+ color: $color-text-heading;
+ font-weight: 650;
+ }
+}
+
+.device-app-chart {
+ height: 220px;
+ border-radius: 16px;
+ background: $color-surface;
+ border: 1px solid $gray20;
+
+ .echarts-for-react {
+ width: 100%;
+ height: 220px !important;
+ }
+}
+
+@keyframes deviceAppAccordionDown {
+ from {
+ height: 0;
+ opacity: 0;
+ }
+
+ to {
+ height: var(--radix-accordion-content-height);
+ opacity: 1;
+ }
+}
+
+@keyframes deviceAppAccordionUp {
+ from {
+ height: var(--radix-accordion-content-height);
+ opacity: 1;
+ }
+
+ to {
+ height: 0;
+ opacity: 0;
+ }
+}
diff --git a/frontend/src/pages/DevicePage/components/DeviceAppsAccordion/DeviceAppsAccordion.tsx b/frontend/src/pages/DevicePage/components/DeviceAppsAccordion/DeviceAppsAccordion.tsx
new file mode 100644
index 0000000..75266db
--- /dev/null
+++ b/frontend/src/pages/DevicePage/components/DeviceAppsAccordion/DeviceAppsAccordion.tsx
@@ -0,0 +1,535 @@
+import { useMemo, useState } from 'react'
+import * as Accordion from '@radix-ui/react-accordion'
+import ReactECharts from 'echarts-for-react'
+import {
+ AppWindow,
+ Box,
+ ChevronDown,
+ MessageCircle,
+ Radio,
+ Settings,
+ ShieldCheck,
+} from 'lucide-react'
+import type { LucideIcon } from 'lucide-react'
+
+import type { DevicePackage } from '../../../../entities/device/model/types'
+import type { DeviceHistoryPeriodValue } from '../DeviceHistoryPeriodControl/DeviceHistoryPeriodControl'
+import { EmptyState } from '../../../../shared/ui/EmptyState/EmptyState'
+
+import './DeviceAppsAccordion.scss'
+
+type DeviceAppsAccordionProps = {
+ packages: DevicePackage[]
+ period: DeviceHistoryPeriodValue | null
+ isLoading?: boolean
+ isError?: boolean
+}
+
+type AppEventCategory = 'active' | 'background' | 'network'
+
+type MockAppEvent = {
+ category: AppEventCategory
+ name: string
+ start: number
+ end: number
+ color: string
+}
+
+type RectShape = {
+ x: number
+ y: number
+ width: number
+ height: number
+}
+
+type AppEventRenderParams = {
+ coordSys: RectShape
+}
+
+type AppEventRenderApi = {
+ value: (index: number) => number
+ coord: (value: [number, number]) => [number, number]
+ style: () => RecordУправление
+ +
+
+
+
+
+
+
+
+
+ {lockError && (
+
+ Не удалось изменить блокировку
+
+ )}
+
+
+ `
+ },
+ },
+
+ grid: {
+ left: 92,
+ right: 24,
+ top: 24,
+ bottom: 44,
+ height: 120,
+ },
+
+ dataZoom: [
+ {
+ type: 'slider',
+ height: 22,
+ bottom: 8,
+ borderColor: 'transparent',
+ backgroundColor: '#eff2f7',
+ fillerColor: 'rgba(3, 28, 154, 0.15)',
+ showDataShadow: false,
+ showDetail: false,
+ brushSelect: false,
+ },
+ {
+ type: 'inside',
+ },
+ ],
+
+ xAxis: {
+ type: 'time',
+ min: start,
+ max: end,
+ axisLabel: {
+ color: '#738098',
+ fontSize: 12,
+ fontFamily: FONT_FAMILY,
+ hideOverlap: true,
+ },
+ axisLine: {
+ lineStyle: {
+ color: '#dbe2ee',
+ },
+ },
+ axisTick: {
+ show: false,
+ },
+ splitLine: {
+ show: true,
+ lineStyle: {
+ color: '#edf0f5',
+ },
+ },
+ },
+
+ yAxis: {
+ type: 'category',
+ inverse: true,
+ data: EVENT_CATEGORIES.map((category) => category.label),
+ axisLabel: {
+ color: '#738098',
+ fontSize: 12,
+ fontFamily: FONT_FAMILY,
+ },
+ axisLine: {
+ show: false,
+ },
+ axisTick: {
+ show: false,
+ },
+ splitLine: {
+ show: true,
+ lineStyle: {
+ color: '#edf0f5',
+ },
+ },
+ },
+
+ series: [
+ {
+ type: 'custom',
+ name: 'События приложения',
+ renderItem: renderAppEventItem,
+ encode: {
+ x: [1, 2],
+ y: 0,
+ },
+ data: events.map((event) => {
+ const categoryIndex = EVENT_CATEGORIES.findIndex(
+ (category) => category.key === event.category,
+ )
+
+ return {
+ value: [categoryIndex, event.start, event.end],
+ itemStyle: {
+ color: event.color,
+ },
+ meta: event,
+ }
+ }),
+ },
+ ],
+ }
+}
+
+export function DeviceAppsAccordion({
+ packages,
+ period,
+ isLoading = false,
+ isError = false,
+}: DeviceAppsAccordionProps) {
+ const [openedApps, setOpenedApps] = useState
+ ${formatTooltipDate(event.start)} — ${formatTooltipDate(event.end)}
+
+
+
+
+
+
+ ${event.name}
+
+
+ ${formatDuration(event.start, event.end)}
+
+
+
+ {!isLoading && apps.length === 0 && (
+
+
+
+ {isLoading && Загрузка...}
+ {isError && Не удалось загрузить}
+ Приложения
+Использование приложений за выбранный период
+
+
+
+
+
+
+
+ {usagePercent}%
+ за период
+
+
+
+
+
+
+ Категория: {app.category || 'Не указана'}
+
+
+
+ Установлено: {formatDate(app.installDate)}
+
+
+
+ Код версии: {app.version ?? '—'}
+
+
+
+
+ {isOpen && (
+
+
+
+ )
+})
+
+const DeviceAppListItem = memo(function DeviceAppListItem({
+ app,
+ isOpen,
+}: DeviceAppListItemProps) {
+ const appName = getAppName(app)
+ const appKey = app.packageName || appName
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Статистика
+Сводных данных по использованию пока нет
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Приложения устройства
+ {/* {deviceName} */} +
+
+
+
+
+
+
+
+
+
+
+
+
+ {appsSortOptions.map((option) => (
+ setSortValue(option.value)}
+ >
+ {option.label}
+
+ {selectedSort.value === option.value && (
+
+ )}
+
+ ))}
+
+
+
+
+
+
+
+ Всего {packages.length}
+
+
+ Показано {filteredPackages.length}
+
+
+
+
+
+
+
+ Не удалось загрузить список приложений
+
+ )}
+
+ {!error && filteredPackages.length === 0 && (
+
+
+ `
+ }),
+
+ ...pointEventsAtTime.map((event) => {
+ return `
+
+
+
+
+
+
+ ${formatTooltipRange(event.start, event.end)}
+
+
+
+ `
+ }),
+ ].join('')
+
+ const temperatureRow =
+ temperatureValue !== null
+ ? `
+
+
+
+
+
+
+ ${formatTooltipDate(event.date)}
+
+
+
+ `
+ : ''
+
+ const batteryRow =
+ batteryValue !== null
+ ? `
+
+
+
+
+
+
+ ${temperatureValue}°C
+
+
+
+ `
+ : ''
+
+ const appRowsHtml = visibleAppRowsAtTime
+ .map((row) => {
+ const appState = getAppStateAtTime(row, hoverTime, chartColors)
+
+ if (!appState) {
+ return ''
+ }
+
+ const activeDurationUntil = getActiveDurationUntil(
+ row,
+ hoverTime,
+ periodStart,
+ )
+
+ const elapsedTime = Math.max(hoverTime - periodStart, 1)
+
+ const activePercentUntil = Math.min(
+ Math.round((activeDurationUntil / elapsedTime) * 100),
+ 100,
+ )
+
+ const shortName = escapeHtml(row.name)
+
+ return `
+
+
+
+
+
+
+ ${batteryValue}%
+
+
+
+ `
+ })
+ .join('')
+
+ const appsBlock = appRowsHtml
+ ? `
+
+
+ ${shortName.slice(0, 1).toUpperCase()}
+
+
+
+
+
+
+ ${escapeHtml(appState.label)} · ${formatDuration(activeDurationUntil)} / ${activePercentUntil}%
+
+
+
+ `
+ : ''
+
+ return `
+
+ Приложения к этому моменту
+
+
+ ${appRowsHtml}
+
+
+ `
+ },
+ },
+
+ axisPointer: {
+ link: [
+ {
+ xAxisIndex: [0, 1, 2, 3],
+ },
+ ],
+ },
+
+ /* dataZoom: [
+ {
+ type: 'slider',
+ xAxisIndex: [0, 1, 2, 3],
+
+ top: 0,
+ height: 28,
+ start: 0,
+ end: 100,
+
+ borderColor: 'transparent',
+ backgroundColor: '#eff2f7',
+ fillerColor: 'rgba(3, 28, 154, 0.15)',
+
+ showDataShadow: false,
+ showDetail: true,
+ brushSelect: false,
+
+ handleIcon:
+ 'path://M2,0 H4 Q6,0 6,2 V22 Q6,24 4,24 H2 Q0,24 0,22 V2 Q0,0 2,0 Z',
+ handleSize: 24,
+ handleStyle: {
+ color: '#031d9a',
+ borderColor: '#031d9a',
+ borderWidth: 0,
+ },
+
+ moveHandleSize: 0,
+
+ textStyle: {
+ color: chartColors.axisLabel,
+ fontSize: 12,
+ fontFamily: FONT_FAMILY,
+ },
+
+ labelFormatter: (value: number) => {
+ return formatTooltipDate(value)
+ },
+ }
+ ], */
+
+ grid: [
+ {
+ id: 'events',
+ left: 90,
+ right: 90,
+ top: 140,
+ height: 170,
+ },
+ {
+ id: 'temperature',
+ left: 90,
+ right: 90,
+ top: 470,
+ height: 150,
+ },
+ {
+ id: 'battery',
+ left: 90,
+ right: 90,
+ top: 750,
+ height: 150,
+ },
+ {
+ id: 'apps',
+ left: 270,
+ right: 90,
+ top: APP_GRID_TOP,
+ height: appGridHeight,
+ },
+ ],
+
+ xAxis: [
+ {
+ type: 'time',
+ gridIndex: 0,
+ min: visibleStart,
+ max: visibleEnd,
+ axisLabel: {
+ color: chartColors.axisLabel,
+ fontSize: 12,
+ fontFamily: FONT_FAMILY,
+ hideOverlap: true,
+ },
+ axisLine: {
+ lineStyle: {
+ color: chartColors.axisLine,
+ },
+ },
+ axisTick: {
+ show: false,
+ },
+ splitLine: {
+ show: true,
+ lineStyle: {
+ color: chartColors.splitLine,
+ },
+ },
+ },
+ {
+ type: 'time',
+ gridIndex: 1,
+ min: visibleStart,
+ max: visibleEnd,
+ axisLabel: {
+ color: chartColors.axisLabel,
+ fontSize: 12,
+ fontFamily: FONT_FAMILY,
+ hideOverlap: true,
+ },
+ axisLine: {
+ lineStyle: {
+ color: chartColors.axisLine,
+ },
+ },
+ axisTick: {
+ show: false,
+ },
+ splitLine: {
+ show: true,
+ lineStyle: {
+ color: chartColors.splitLine,
+ },
+ },
+ },
+ {
+ type: 'time',
+ gridIndex: 2,
+ min: visibleStart,
+ max: visibleEnd,
+ axisLabel: {
+ color: chartColors.axisLabel,
+ fontSize: 12,
+ fontFamily: FONT_FAMILY,
+ hideOverlap: true,
+ },
+ axisLine: {
+ lineStyle: {
+ color: chartColors.axisLine,
+ },
+ },
+ axisTick: {
+ show: false,
+ },
+ splitLine: {
+ show: true,
+ lineStyle: {
+ color: chartColors.splitLine,
+ },
+ },
+ },
+ {
+ type: 'time',
+ gridIndex: 3,
+ min: visibleStart,
+ max: visibleEnd,
+ axisLabel: {
+ color: chartColors.axisLabel,
+ fontSize: 12,
+ fontFamily: FONT_FAMILY,
+ hideOverlap: true,
+ },
+ axisLine: {
+ lineStyle: {
+ color: chartColors.axisLine,
+ },
+ },
+ axisTick: {
+ show: false,
+ },
+ splitLine: {
+ show: true,
+ lineStyle: {
+ color: chartColors.splitLine,
+ },
+ },
+ },
+ ],
+
+ yAxis: [
+ {
+ type: 'category',
+ gridIndex: 0,
+ data: visibleCategories.map((category) => category.label),
+ inverse: true,
+ axisLabel: {
+ show: false,
+ },
+ axisLine: {
+ show: false,
+ },
+ axisTick: {
+ show: false,
+ },
+ splitLine: {
+ show: true,
+ lineStyle: {
+ color: chartColors.splitLine,
+ },
+ },
+ },
+ {
+ type: 'value',
+ gridIndex: 1,
+ min: 0,
+ max: 60,
+ interval: 15,
+ position: 'right',
+ axisLabel: {
+ formatter: '{value}°C',
+ color: chartColors.axisLabel,
+ fontSize: 12,
+ fontFamily: FONT_FAMILY,
+ },
+ axisLine: {
+ show: false,
+ },
+ axisTick: {
+ show: false,
+ },
+ splitLine: {
+ show: true,
+ lineStyle: {
+ color: chartColors.splitLine,
+ },
+ },
+ },
+ {
+ type: 'value',
+ gridIndex: 2,
+ min: 0,
+ max: 100,
+ interval: 25,
+ position: 'right',
+ axisLabel: {
+ formatter: '{value}%',
+ color: chartColors.axisLabel,
+ fontSize: 12,
+ fontFamily: FONT_FAMILY,
+ },
+ axisLine: {
+ show: false,
+ },
+ axisTick: {
+ show: false,
+ },
+ splitLine: {
+ show: true,
+ lineStyle: {
+ color: chartColors.splitLine,
+ },
+ },
+ },
+ {
+ type: 'category',
+ gridIndex: 3,
+ data: enabledAppRows.map((row) => row.packageName),
+ inverse: true,
+ axisLabel: {
+ show: false,
+ },
+ axisLine: {
+ show: false,
+ },
+ axisTick: {
+ show: false,
+ },
+ splitLine: {
+ show: true,
+ lineStyle: {
+ color: chartColors.splitLine,
+ },
+ },
+ },
+ ],
+
+ series: [
+ {
+ type: 'custom',
+ name: 'События',
+ xAxisIndex: 0,
+ yAxisIndex: 0,
+ renderItem: renderEventItem,
+ encode: {
+ x: [1, 2],
+ y: 0,
+ },
+ data: eventSeriesData,
+ //universalTransition: true,
+ },
+ {
+ type: 'scatter',
+ name: 'Точки событий',
+ xAxisIndex: 0,
+ yAxisIndex: 0,
+ encode: {
+ x: 0,
+ y: 1,
+ },
+ data: eventPointSeriesData,
+ z: 10,
+ },
+ {
+ type: 'line',
+ name: 'Температура',
+ xAxisIndex: 1,
+ yAxisIndex: 1,
+ data: temperature,
+ symbol: 'none',
+ showSymbol: false,
+ sampling: 'lttb',
+ smooth: true,
+ lineStyle: {
+ width: isDarkTheme ? 1.6 : 2,
+ color: chartColors.temperature,
+ },
+ itemStyle: {
+ color: chartColors.temperature,
+ },
+ areaStyle: {
+ color: {
+ type: 'linear',
+ x: 0,
+ y: 0,
+ x2: 0,
+ y2: 1,
+ colorStops: [
+ {
+ offset: 0,
+ color: chartColors.temperatureAreaStart,
+ },
+ {
+ offset: 1,
+ color: chartColors.temperatureAreaEnd,
+ },
+ ],
+ },
+ },
+ markArea: {
+ silent: true,
+ itemStyle: {
+ color: chartColors.dangerMark,
+ },
+ data: [[{ yAxis: 45 }, { yAxis: 60 }]],
+ },
+ },
+ {
+ type: 'line',
+ name: 'Аккумулятор',
+ xAxisIndex: 2,
+ yAxisIndex: 2,
+ data: battery,
+ symbol: 'none',
+ showSymbol: false,
+ sampling: 'lttb',
+ smooth: true,
+ lineStyle: {
+ width: isDarkTheme ? 1.6 : 2,
+ color: chartColors.battery,
+ },
+ itemStyle: {
+ color: chartColors.battery,
+ },
+ areaStyle: {
+ color: {
+ type: 'linear',
+ x: 0,
+ y: 0,
+ x2: 0,
+ y2: 1,
+ colorStops: [
+ {
+ offset: 0,
+ color: chartColors.batteryAreaStart,
+ },
+ {
+ offset: 1,
+ color: chartColors.batteryAreaEnd,
+ },
+ ],
+ },
+ },
+ markArea: {
+ silent: true,
+ itemStyle: {
+ color: {
+ type: 'linear',
+ x: 0,
+ y: 0,
+ x2: 0,
+ y2: 1,
+ colorStops: [
+ {
+ offset: 0,
+ color: chartColors.dangerArea,
+ },
+ {
+ offset: 1,
+ color: chartColors.dangerArea,
+ },
+ ],
+ },
+ },
+ data: [[{ yAxis: 0 }, { yAxis: 20 }]],
+ },
+ },
+ {
+ type: 'custom',
+ name: 'Активность приложений',
+ xAxisIndex: 3,
+ yAxisIndex: 3,
+ renderItem: renderAppIntervalItem,
+ encode: {
+ x: [1, 2],
+ y: 0,
+ },
+ data: appIntervalSeriesData,
+ //universalTransition: true,
+ z: 4,
+ },
+ ],
+ }), [
+ appGridHeight,
+ appIntervalSeriesData,
+ battery,
+ chartColors,
+ enabledAppRows,
+ eventPointSeriesData,
+ eventSeriesData,
+ isDarkTheme,
+ periodStart,
+ temperature,
+ visibleCategories,
+ visibleEnd,
+ visibleEventPoints,
+ visibleEvents,
+ visibleStart,
+ ])
+
+ return (
+
+ ${formatTooltipDate(hoverTime)}
+
+ ${rows}
+ ${temperatureRow}
+ ${batteryRow}
+ ${appsBlock}
+
+ {isLoading && (
+
+ )
+})
diff --git a/frontend/src/pages/DevicePage/components/DeviceHistoryModal/DeviceHistoryModal.scss b/frontend/src/pages/DevicePage/components/DeviceHistoryModal/DeviceHistoryModal.scss
new file mode 100644
index 0000000..9b7fe59
--- /dev/null
+++ b/frontend/src/pages/DevicePage/components/DeviceHistoryModal/DeviceHistoryModal.scss
@@ -0,0 +1,645 @@
+@use '../../../../shared/styles/variables' as *;
+
+.device-history-modal__overlay {
+ position: fixed;
+ inset: 0;
+ z-index: 500;
+ background: $color-backdrop-soft;
+}
+
+.device-history-modal {
+ position: fixed;
+ z-index: 600;
+ inset: 24px;
+ display: flex;
+ flex-direction: column;
+ min-height: 0;
+ max-height: calc(100vh - 48px);
+
+ border-radius: 24px;
+ background: $color-surface;
+ padding: 20px;
+
+ //overflow: hidden;
+
+ box-shadow: 0 24px 80px rgba($color-shadow-rgb, 0.22);
+}
+
+.device-history-modal__scroll {
+ flex: 1 1 auto;
+ height: 100%;
+ min-height: 0;
+
+ .simplebar-content {
+ min-height: 100%;
+ }
+
+ .simplebar-track.simplebar-vertical {
+ top: 14px;
+ right: -18px;
+ bottom: 14px;
+ width: 8px;
+ }
+
+ .simplebar-scrollbar::before {
+ background: $gray50;
+ border-radius: 4px;
+ opacity: 1;
+ }
+}
+
+.device-history-modal__chart-placeholder {
+ min-height: 720px;
+ padding-top: 220px;
+
+ color: $color-text-muted;
+ font-size: $font-size-14;
+ font-weight: 600;
+ text-align: center;
+}
+
+.device-history-modal__header {
+ display: flex;
+ align-items: flex-start;
+ justify-content: space-between;
+ gap: 24px;
+ margin-bottom: 14px;
+ .device-history-modal__title{
+ padding-left: 18px;
+ padding-top: 18px;
+ }
+ .device-history-modal__meta{
+ padding-left: 18px;
+ }
+}
+
+.device-history-modal {
+ .history-period-control__top {
+ //padding-left: 18px;
+ padding-bottom: 18px;
+ }
+}
+
+.device-history-chart__zoom {
+ position: absolute;
+ top: 20px;
+ left: 20px;
+ right: 20px;
+ z-index: 50;
+
+ padding: 8px;
+ //margin: 0 64px;
+ //border-bottom-right-radius: 20px;
+ //border-bottom-left-radius: 20px;
+ border-radius: 20px;
+
+ background: rgba($white, 0.3);
+ backdrop-filter: blur(12px);
+ box-shadow: 0 0 40px -6px rgba($gray50-rgb, .3);
+ .sticky-line{
+ display: flex;
+ flex: 1;
+ height: 1px;
+ background-color: $gray20;
+ margin-top: 26px;
+ margin-right: 90px;
+
+ }
+}
+
+.device-history-modal__title {
+ margin: 0;
+
+ color: $color-text-strong;
+ font-size: $font-size-20;
+ font-weight: 650;
+ text-transform: uppercase;
+
+ span {
+ margin-left: 6px;
+ color: $gray50;
+ font-size: $font-size-14;
+ font-weight: 500;
+ text-transform: none;
+ }
+}
+
+.device-history-modal__meta {
+ margin-top: 4px;
+
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+ gap: 14px;
+
+ color: $gray50;
+ font-size: $font-size-14;
+
+ .is-green {
+ position: relative;
+ padding-left: 20px;
+ padding-right: 8px;
+ border-radius: 8px;
+ color: $green;
+ font-weight: 500;
+ font-size: $font-size-16;
+ background-color: rgba($color-success-rgb, .1);
+ &::before {
+ content: '';
+ position: absolute;
+ left: 8px;
+ top: 50%;
+
+ width: 6px;
+ height: 6px;
+ border-radius: 50%;
+
+ background: $green;
+ transform: translateY(-50%);
+ }
+ }
+ .is-red {
+ position: relative;
+ padding-left: 20px;
+ padding-right: 8px;
+ border-radius: 8px;
+ color: $red;
+ font-weight: 500;
+ font-size: $font-size-16;
+ background-color: rgba($color-danger-rgb, .1);
+ &::before {
+ content: '';
+ position: absolute;
+ left: 8px;
+ top: 50%;
+
+ width: 6px;
+ height: 6px;
+ border-radius: 50%;
+
+ background: $red;
+ transform: translateY(-50%);
+ }
+ }
+ .is-gray {
+ position: relative;
+ padding-left: 20px;
+ padding-right: 8px;
+ border-radius: 8px;
+ color: $gray50;
+ font-weight: 500;
+ font-size: $font-size-16;
+ background-color: rgba($gray50-rgb, .1);
+
+ &::before {
+ content: '';
+ position: absolute;
+ left: 8px;
+ top: 50%;
+
+ width: 6px;
+ height: 6px;
+ border-radius: 50%;
+
+ background: $gray50;
+ transform: translateY(-50%);
+ }
+ }
+}
+
+.device-history-modal__close {
+ width: 36px;
+ height: 36px;
+ border: none;
+ border-radius: 12px;
+ background: $transparent;
+
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+
+ color: $color-text-strong;
+ cursor: pointer;
+
+ &:hover {
+ background: $gray20;
+ color: $blue;
+ }
+}
+
+.device-history-controls {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ margin-bottom: 18px;
+}
+
+.device-history-tabs {
+ padding: 4px;
+ border-radius: 999px;
+ background: $color-bg;
+
+ display: flex;
+ align-items: center;
+ gap: 2px;
+}
+
+.device-history-tabs__item {
+ height: 34px;
+ padding: 0 16px;
+
+ border: none;
+ border-radius: 999px;
+ background: $transparent;
+
+ color: $gray50;
+ font-size: $font-size-14;
+ font-weight: 500;
+ cursor: pointer;
+
+ &.is-active {
+ background: $color-surface;
+ color: $blue;
+ box-shadow: 0 2px 8px rgba($color-shadow-rgb, 0.08);
+ }
+}
+
+.device-history-period {
+ height: 42px;
+ padding: 0 16px;
+
+ border: none;
+ border-radius: 999px;
+ background: $color-bg;
+
+ display: inline-flex;
+ align-items: center;
+ gap: 8px;
+
+ color: $color-text-heading;
+ font-size: $font-size-14;
+ cursor: pointer;
+
+ svg {
+ color: $blue;
+ }
+}
+
+.device-history-range {
+ max-width: 1280px;
+ margin: 0 100px 22px;
+}
+
+.device-history-range__labels {
+ display: flex;
+ justify-content: space-between;
+ margin-bottom: 8px;
+
+ color: $blue;
+ font-size: $font-size-14;
+}
+
+.device-history-range__track {
+ position: relative;
+ height: 22px;
+}
+
+.device-history-range__active {
+ position: absolute;
+ left: 0;
+ top: 9px;
+ height: 4px;
+ border-radius: 999px;
+ background: $blue;
+}
+
+.device-history-range__track input {
+ position: absolute;
+ inset: 0;
+
+ width: 100%;
+ margin: 0;
+
+ appearance: none;
+ background: $transparent;
+ pointer-events: none;
+}
+
+.device-history-range__track input::-webkit-slider-thumb {
+ appearance: none;
+ pointer-events: auto;
+
+ width: 14px;
+ height: 14px;
+ border-radius: 50%;
+ border: none;
+
+ background: $blue;
+ cursor: pointer;
+}
+
+.device-history-modal__content {
+ display: flex;
+ flex-direction: column;
+ gap: 24px;
+}
+
+.device-history-timeline {
+ max-width: 1280px;
+ margin: 0 auto;
+ width: 100%;
+}
+
+.history-section {
+ margin-bottom: 28px;
+
+ h3 {
+ margin: 0 0 8px 100px;
+ color: $color-text-heading;
+ font-size: $font-size-16;
+ font-weight: 600;
+ }
+}
+
+.history-grid {
+ position: relative;
+}
+
+.history-grid__axis {
+ margin-left: 100px;
+ height: 20px;
+
+ display: grid;
+ grid-template-columns: repeat(5, 1fr);
+
+ color: $gray50;
+ font-size: $font-size-13;
+
+ span {
+ transform: translateX(-50%);
+
+ &:first-child {
+ transform: translateX(-25%);
+ }
+
+ &:last-child {
+ text-align: right;
+ transform: translateX(0);
+ }
+ }
+}
+
+.history-row {
+ display: grid;
+ grid-template-columns: 100px 1fr;
+ min-height: 28px;
+}
+
+.history-row__label {
+ padding-right: 12px;
+ text-align: right;
+
+ color: $gray50;
+ font-size: $font-size-14;
+}
+
+.history-row__line {
+ position: relative;
+ border-top: 1px solid $color-border-muted;
+
+ &::before,
+ &::after {
+ content: '';
+ position: absolute;
+ top: -1px;
+ bottom: 0;
+ width: 1px;
+ background: $color-border-muted;
+ }
+
+ &::before {
+ left: 25%;
+ }
+
+ &::after {
+ left: 75%;
+ }
+}
+
+.history-segment {
+ position: absolute;
+ top: 9px;
+ height: 7px;
+ border-radius: 999px;
+}
+
+.history-segment--blue {
+ background: $blue;
+}
+
+.history-segment--purple {
+ background: $accent-purple;
+}
+
+.history-segment--green {
+ background: $accent-teal;
+}
+
+.history-segment--light-blue {
+ background: $accent-sky;
+}
+
+.history-point {
+ position: absolute;
+ top: -5px;
+
+ width: 8px;
+ height: 8px;
+ border-radius: 50%;
+
+ transform: translateX(-50%);
+}
+
+.history-point--red {
+ background: $red;
+}
+
+.history-point--orange {
+ background: $color-warning-strong;
+}
+
+.battery-chart {
+ position: relative;
+ height: 110px;
+ margin-left: 100px;
+ border-bottom: 1px solid $color-border-muted;
+
+ background:
+ linear-gradient(to bottom, $transparent 19%, $color-border-muted 20%, $transparent 21%),
+ linear-gradient(to bottom, $transparent 39%, $color-border-muted 40%, $transparent 41%),
+ linear-gradient(to bottom, $transparent 59%, $color-border-muted 60%, $transparent 61%),
+ linear-gradient(to bottom, $transparent 79%, $color-border-muted 80%, $transparent 81%);
+}
+
+.battery-chart__area {
+ position: absolute;
+ inset: 0;
+
+ background: linear-gradient(
+ 168deg,
+ rgba($color-success-strong-rgb, 0.38) 0%,
+ rgba($color-success-strong-rgb, 0.28) 45%,
+ rgba($color-success-strong-rgb, 0.05) 46%,
+ rgba($color-success-strong-rgb, 0.05) 100%
+ );
+
+ clip-path: polygon(0 10%, 100% 90%, 100% 100%, 0 100%);
+}
+
+.battery-chart__lines {
+ position: absolute;
+ left: -55px;
+ top: 0;
+ bottom: 0;
+
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+
+ color: $gray50;
+ font-size: $font-size-13;
+}
+
+.history-summary {
+ margin: 18px 0 0 100px;
+
+ display: flex;
+ flex-wrap: wrap;
+ gap: 10px;
+
+ span {
+ padding: 10px 16px;
+ border-radius: 999px;
+ background: $color-bg;
+
+ color: $gray50;
+ font-size: $font-size-13;
+
+ b {
+ color: $color-text-strong;
+ font-weight: 600;
+ }
+ }
+}
+
+.device-apps-card {
+ padding: 18px;
+ border-radius: 20px;
+ background: $color-bg;
+
+ h3 {
+ margin: 0 0 10px;
+ padding-bottom: 10px;
+ border-bottom: 1px solid $color-border-muted;
+
+ color: $color-text-heading;
+ font-size: $font-size-16;
+ font-weight: 600;
+ }
+}
+
+.device-apps-list {
+ border-radius: 14px;
+ background: $color-surface;
+ overflow: hidden;
+}
+
+.device-app-row {
+ width: 100%;
+ min-height: 48px;
+ padding: 0 16px;
+
+ border: none;
+ border-bottom: 1px solid $color-border-muted;
+ background: $color-surface;
+
+ display: grid;
+ grid-template-columns: 28px 220px 1fr auto 20px;
+ align-items: center;
+ gap: 12px;
+
+ text-align: left;
+ cursor: pointer;
+
+ &:last-child {
+ border-bottom: none;
+ }
+
+ &:hover {
+ background: $color-surface-muted;
+ }
+}
+
+.device-app-row__icon {
+ width: 24px;
+ height: 24px;
+ border-radius: 7px;
+ background: $blue;
+}
+
+.device-app-row__name {
+ color: $color-text-heading;
+ font-size: $font-size-15;
+ font-weight: 500;
+}
+
+.device-app-row__time {
+ color: $gray50;
+ font-size: $font-size-13;
+}
+
+.device-app-row__percent {
+ color: $gray50;
+ font-size: $font-size-13;
+}
+
+.device-app-row__arrow {
+ color: $gray50;
+ font-size: $font-size-22;
+}
+
+.device-apps-card__more {
+ margin-top: 12px;
+
+ border: none;
+ background: $transparent;
+
+ color: $blue;
+ font-size: $font-size-14;
+ font-weight: 500;
+ cursor: pointer;
+}
+
+[data-theme='dark'] {
+ .device-history-modal {
+ background: $color-surface;
+ box-shadow: 0 26px 80px rgba($color-shadow-rgb, 0.62);
+ }
+
+ .device-history-chart__zoom {
+ background: rgba($color-surface-rgb, 0.76);
+ backdrop-filter: blur(14px);
+ box-shadow:
+ 0 18px 44px rgba($color-shadow-rgb, 0.38),
+ inset 0 0 0 1px rgba($gray50-rgb, 0.08);
+
+ .sticky-line {
+ background-color: rgba($gray50-rgb, 0.16);
+ }
+ }
+
+ .device-history-modal__close:hover {
+ background: $color-surface-hover;
+ color: $color-primary-hover;
+ }
+}
diff --git a/frontend/src/pages/DevicePage/components/DeviceHistoryModal/DeviceHistoryModal.tsx b/frontend/src/pages/DevicePage/components/DeviceHistoryModal/DeviceHistoryModal.tsx
new file mode 100644
index 0000000..b7e9d8a
--- /dev/null
+++ b/frontend/src/pages/DevicePage/components/DeviceHistoryModal/DeviceHistoryModal.tsx
@@ -0,0 +1,275 @@
+import {
+ lazy,
+ Suspense,
+ useCallback,
+ useEffect,
+ useMemo,
+ useRef,
+ useState,
+} from 'react'
+import * as Dialog from '@radix-ui/react-dialog'
+import { X } from 'lucide-react'
+import { useQuery } from '@apollo/client/react'
+import SimpleBar from 'simplebar-react'
+import 'simplebar-react/dist/simplebar.min.css'
+
+import type { Device } from '../../types'
+import { conditionText, connectionText } from '../../types'
+import {
+ GET_TELEMETRY_QUERY,
+} from '../../../../entities/device/api/device.graphql'
+import type {
+ GetTelemetryData,
+ GetTelemetryVariables,
+ DeviceHistoryChartItem,
+ DevicePackageUseEventsGroup,
+ DevicePhoneStateEventType
+} from '../../../../entities/device/model/types'
+
+import {
+ DeviceHistoryPeriodControl,
+ type DeviceHistoryPeriodValue,
+} from '../DeviceHistoryPeriodControl/DeviceHistoryPeriodControl'
+import { TimelineZoom } from '../TimelineZoom/TimelineZoom'
+import { MotionDialogContent } from '../../../../shared/ui/MotionDialog/MotionDialog'
+
+import './DeviceHistoryModal.scss'
+
+type DeviceHistoryModalProps = {
+ open: boolean
+ onOpenChange: (open: boolean) => void
+ device: Device
+}
+
+const PHONE_STATE_EVENT_LABELS: Record
+ Загрузка телеметрии...
+
+ )}
+
+ {isError && (
+
+ Не удалось загрузить телеметрию
+
+ )}
+
+
+
+ События
+Хронология активности устройства за выбранный период
+
+ {EVENT_CATEGORIES.map((category) => {
+ const checked = enabledCategories.includes(category.key)
+
+ return (
+
+ )
+ })}
+
+
+
+
+
+ Температура
+Динамика температуры устройства за выбранный период
+
+
+ Аккумулятор
+Динамика уровня заряда за выбранный период
+
+
+
+ Приложения
+События жизненного цикла приложений за выбранный период
+
+
+
+ На экране
+
+
+
+
+ Фон
+
+
+
+ {enabledAppRows.map((row, index) => {
+ const checked = enabledPackagesSet.has(row.packageName)
+ const { Icon, modifier } = getAppIcon(row)
+ const top =
+ APP_GRID_TOP +
+ appRowBand * index +
+ appRowBand / 2 -
+ APP_ROW_HEIGHT / 2
+
+ return (
+
+ )
+ })}
+
+ {!enabledAppRows.length && !isLoading && (
+
+
+ {appRows.length
+ ? 'Приложения не выбраны'
+ : 'Нет событий по приложениям'}
+
+
+
+ {appRows.length
+ ? 'Выберите приложения, которые нужно показать на графике.'
+ : 'За выбранный период не найдено событий жизненного цикла приложений.'}
+
+
+ )}
+
+ {appRows.length > 0 && (
+
+
+ Выбрано {enabledAppRows.length} из {appRows.length}
+
+
+
+
+
+ )}
+
+ {appRows.map((row) => {
+ const checked = enabledPackagesSet.has(row.packageName)
+
+ return (
+
+ )
+ })}
+
+
+ Подготавливаем графики...
+
+ )
+}
+
+function getHistoryConditionClass(device: Device) {
+ return device.condition === 'inspection' ? 'is-red' : 'is-green'
+}
+
+function getHistoryConnectionClass(device: Device) {
+ if (device.connection === 'online') return 'is-green'
+ if (device.connection === 'offlineDanger') return 'is-red'
+
+ return 'is-gray'
+}
+
+export function DeviceHistoryModal({
+ open,
+ onOpenChange,
+ device,
+}: DeviceHistoryModalProps) {
+ const [selectedPeriod, setSelectedPeriod] =
+ useState
+
+
+
+
+
+
+
+
+
+ {device.factoryNumber}
+ ID: {device.id}
+
+
+
+
+
+ {device.imei} · {device.imei2}
+
+ {conditionText[device.condition]}
+
+
+ {device.connectionText || connectionText[device.connection]}
+
+
+
+
+ )
+}
diff --git a/frontend/src/pages/DevicePage/components/DeviceMainCard/DeviceMainCard.tsx b/frontend/src/pages/DevicePage/components/DeviceMainCard/DeviceMainCard.tsx
new file mode 100644
index 0000000..387f23c
--- /dev/null
+++ b/frontend/src/pages/DevicePage/components/DeviceMainCard/DeviceMainCard.tsx
@@ -0,0 +1,225 @@
+import { memo, useState } from 'react'
+import { AnimatePresence, m, useReducedMotion } from 'framer-motion'
+import { Link } from 'react-router-dom'
+import {
+ Building2,
+ Lock,
+ ShieldCheck,
+ Signal,
+ Smartphone,
+ Trash2,
+} from 'lucide-react'
+
+import type { Device } from '../../types'
+import { conditionText, connectionText, getStatusClass } from '../../types'
+import { ConfirmDangerDialog } from '../../../../widgets/ConfirmDangerDialog/ConfirmDangerDialog'
+import { useDeferredModalPayload } from '../../../../shared/lib/lazyMount'
+
+type DeviceMainCardProps = {
+ device: Device
+ onOpenHistory: () => void
+}
+
+function getDeviceFullName(device: Device) {
+ return [device.serialNumber].filter(Boolean).join(' ')
+}
+
+function areDeviceMainCardPropsEqual(
+ prev: DeviceMainCardProps,
+ next: DeviceMainCardProps,
+) {
+ return (
+ prev.onOpenHistory === next.onOpenHistory &&
+ prev.device.id === next.device.id &&
+ prev.device.image === next.device.image &&
+ prev.device.model === next.device.model &&
+ prev.device.factoryNumber === next.device.factoryNumber &&
+ prev.device.serialNumber === next.device.serialNumber &&
+ prev.device.imei === next.device.imei &&
+ prev.device.imei2 === next.device.imei2 &&
+ prev.device.condition === next.device.condition &&
+ prev.device.connection === next.device.connection &&
+ prev.device.connectionText === next.device.connectionText &&
+ prev.device.permissions?.locked === next.device.permissions?.locked &&
+ prev.device.workTime === next.device.workTime &&
+ prev.device.organisationId === next.device.organisationId &&
+ prev.device.organisation === next.device.organisation &&
+ prev.device.registeredAt === next.device.registeredAt
+ )
+}
+
+export const DeviceMainCard = memo(function DeviceMainCard({
+ device,
+ onOpenHistory,
+}: DeviceMainCardProps) {
+ const [deletingDevice, setDeletingDevice] = useState
+
+
+ {presetTabs.map((tab) => (
+
+ ))}
+
+
+
+
+
+ {isCalendarOpen && (
+
+
+
+ )}
+
+ {
+ if (!open) {
+ setDeletingDevice(null)
+ }
+ }}
+ onConfirm={handleConfirmDeleteDevice}
+ />
+
+ )
+}, areDeviceMainCardPropsEqual)
diff --git a/frontend/src/pages/DevicePage/components/DeviceMapCard/DeviceMapCard.scss b/frontend/src/pages/DevicePage/components/DeviceMapCard/DeviceMapCard.scss
new file mode 100644
index 0000000..74d5785
--- /dev/null
+++ b/frontend/src/pages/DevicePage/components/DeviceMapCard/DeviceMapCard.scss
@@ -0,0 +1,319 @@
+@use '../../../../shared/styles/variables' as *;
+
+
+.device-map__container {
+ display: flex;
+ flex: 1;
+ position: relative;
+ border-radius: 14px;
+ overflow: visible;
+ background: $color-media-bg;
+}
+
+.device-map__leaflet {
+ width: 100%;
+ height: 100%;
+ z-index: 1;
+ border-radius: 14px;
+}
+
+.device-map__coords {
+ position: absolute;
+ left: 10px;
+ bottom: 10px;
+ z-index: 2;
+
+ min-height: 28px;
+ padding: 0 10px;
+
+ border-radius: 999px;
+ background: rgba($color-surface-rgb, 0.92);
+
+ display: inline-flex;
+ align-items: center;
+ gap: 6px;
+
+ color: $color-text-heading;
+ font-size: 12px;
+ font-weight: 600;
+
+ box-shadow: 0 8px 22px rgba($color-shadow-rgb, 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($color-primary-rgb, 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 $color-surface;
+ box-shadow: 0 8px 18px rgba($color-primary-rgb, 0.35);
+}
+
+.device-map-marker.is-online {
+ .device-map-marker__pin {
+ background: rgba($color-success-rgb, 0.18);
+ }
+
+ .device-map-marker__inner {
+ background: $green;
+ box-shadow: 0 8px 18px rgba($color-success-rgb, 0.35);
+ }
+}
+
+.device-map-marker.is-offline {
+ .device-map-marker__pin {
+ background: rgba($gray50-rgb, 0.18);
+ }
+
+ .device-map-marker__inner {
+ background: $gray50;
+ box-shadow: 0 8px 18px rgba($gray50-rgb, 0.28);
+ }
+}
+
+.device-map-marker.is-lost {
+ .device-map-marker__pin {
+ background: rgba($color-danger-rgb, 0.16);
+ }
+
+ .device-map-marker__inner {
+ background: $red;
+ box-shadow: 0 8px 18px rgba($color-danger-rgb, 0.28);
+ }
+}
+
+.device-map-popup {
+ display: flex;
+ flex-direction: column;
+ gap: 3px;
+
+ b {
+ color: $color-text-heading;
+ font-size: 13px;
+ font-weight: 700;
+ }
+
+ span {
+ color: $color-text-muted;
+ font-size: 12px;
+ font-weight: 500;
+ }
+}
+
+.device-map__period-control {
+ position: absolute;
+ top: 12px;
+ left: 12px;
+ z-index: 400;
+ border-radius: 24px;
+}
+
+.device-map-info-card {
+ position: absolute;
+ left: 12px;
+ top: 70px;
+ z-index: 430;
+ //transform: translateY(-50%);
+
+ width: min(180px, calc(100% - 24px));
+ padding: 14px;
+ border: 1px solid rgba($color-border-rgb, 0.72);
+ border-radius: 16px;
+ background: rgba($color-surface-rgb, 0.94);
+ backdrop-filter: blur(14px);
+ box-shadow: $shadow-popover;
+}
+
+.device-map-info-card__close {
+ position: absolute;
+ top: 8px;
+ right: 8px;
+
+ width: 26px;
+ height: 26px;
+ border: none;
+ border-radius: 8px;
+ background: $color-surface-muted;
+
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+
+ color: $color-text-muted;
+ cursor: pointer;
+ transition:
+ background 0.18s ease,
+ color 0.18s ease;
+
+ &:hover {
+ background: $color-surface-hover;
+ color: $color-primary;
+ }
+}
+
+.device-map-info-card__header {
+ display: flex;
+ flex-direction: column;
+ gap: 4px;
+ padding-right: 28px;
+ margin-bottom: 12px;
+ line-height: 1;
+ text-align: left;
+
+ b,
+ span {
+ display: block;
+ }
+
+ b {
+ overflow: hidden;
+ color: $color-text-heading;
+ font-size: $font-size-15;
+ font-weight: 600;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ }
+
+ span {
+ margin-top: 3px;
+ overflow: hidden;
+ color: $color-text-muted;
+ font-size: $font-size-12;
+ font-weight: 600;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ }
+}
+
+.device-map-info-card__icon {
+ width: 34px;
+ height: 34px;
+ border-radius: 10px;
+ background: $color-primary-tint;
+
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+
+ color: $color-primary;
+}
+
+.device-map-info-card__rows {
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+}
+
+.device-map-info-card__row {
+ display: grid;
+ grid-template-columns: 18px minmax(0, 1fr);
+ align-items: center;
+ justify-content: flex-start;
+ gap: 8px;
+
+ color: $color-text;
+ font-size: $font-size-12;
+ font-weight: 500;
+
+ svg {
+ color: $color-primary;
+ }
+
+ span {
+ min-width: 0;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ text-align: left ;
+ }
+}
+
+.device-map-info-card__status {
+ grid-column: 1 / -1;
+ min-height: 22px;
+ width: fit-content;
+ padding: 0 8px;
+ border-radius: 999px;
+
+ display: inline-flex;
+ align-items: center;
+ gap: 6px;
+
+ color: $color-text-heading;
+ font-size: $font-size-11;
+ font-weight: 700;
+ text-transform: uppercase;
+
+ &::before {
+ content: '';
+ width: 7px;
+ height: 7px;
+ border-radius: 50%;
+ background: currentColor;
+ }
+
+ &.is-online {
+ background: rgba($color-success-rgb, 0.14);
+ color: $green;
+ }
+
+ &.is-offline {
+ background: $color-bg;
+ color: $gray50;
+ }
+
+ &.is-lost {
+ background: rgba($color-danger-rgb, 0.14);
+ color: $red;
+ }
+}
+
+.device-map-info-card__footer {
+ display: flex;
+ flex-direction: column;
+ gap: 4px;
+ margin-top: 12px;
+ padding-top: 10px;
+ border-top: 1px solid rgba($color-border-rgb, 0.72);
+
+ color: $color-text-muted;
+ font-size: $font-size-11;
+ font-weight: 600;
+}
+
+.device-map--modal {
+ padding: 0 !important;
+ box-shadow: none;
+ border-radius: 0;
+ background: transparent;
+
+ .device-card__header {
+ display: none;
+ }
+
+ .device-map__container {
+ height: 100%;
+ border-radius: 20px;
+ overflow: hidden;
+ }
+}
diff --git a/frontend/src/pages/DevicePage/components/DeviceMapCard/DeviceMapCard.tsx b/frontend/src/pages/DevicePage/components/DeviceMapCard/DeviceMapCard.tsx
new file mode 100644
index 0000000..f9d274c
--- /dev/null
+++ b/frontend/src/pages/DevicePage/components/DeviceMapCard/DeviceMapCard.tsx
@@ -0,0 +1,536 @@
+import { useEffect, useMemo, useRef, useState } from 'react'
+import { useQuery } from '@apollo/client/react'
+import {
+ CircleMarker,
+ MapContainer,
+ Marker,
+ Polyline,
+ TileLayer,
+ useMap,
+} from 'react-leaflet'
+import L from 'leaflet'
+import { Battery, Clock3, Map as MapIcon, MapPin, Thermometer, X } from 'lucide-react'
+
+import type { Device } from '../../types'
+import { GET_PHONE_GPS_TRACK_QUERY } from '../../../../entities/device/api/device.graphql'
+import type {
+ DeviceGpsTrackPoint,
+ DeviceTelemetryItem,
+ GetPhoneGpsTrackData,
+ GetPhoneGpsTrackVariables,
+} from '../../../../entities/device/model/types'
+import { FullscreenControl } from '../../../../widgets/FullscreenControlLeaflet/FullscreenControl'
+import {
+ MapTrackPeriodControl,
+ type MapTrackPeriodValue,
+} from '../../../MapPage/components/MapTrackPeriodControl/MapTrackPeriodControl'
+
+import './DeviceMapCard.scss'
+
+type DeviceMapCardProps = {
+ device: Device
+ variant?: 'card' | 'modal'
+}
+
+type TelemetryLine = Array<[number, number]>
+
+type DeviceMapPoint = {
+ key: string
+ kind: 'current' | 'route'
+ title: string
+ subtitle?: string
+ date?: number
+ lat: number
+ lng: number
+}
+
+type MapFitBoundsProps = {
+ positions: [number, number][]
+ fitKey: string
+}
+
+const routeColor = 'var(--color-primary)'
+
+const defaultLocation = {
+ lat: 54.7558,
+ lng: 87.1099,
+}
+
+const markerIconCache = new Map
+
+
+
+ {device.image ? (
+ 
+ ) : (
+ 
+ )}
+
+
+
+ )}
+
+
+ {device.model ?? '-'}
+ +{device.factoryNumber}
++ {device.imei} + {device.imei2 ? ` · ${device.imei2}` : ''} +
+ + + +
+
+ {statusItems.map((status, index) => (
+
+ {status.icon}
+ {status.content}
+
+ ))}
+
+
+
+
+
+
+
+
+
+ Организация
+ {device.organisationId ? (
+
+ {device.organisation ?? `Организация #${device.organisationId}`}
+
+
+ ) : (
+ {device.organisation ?? 'Не указана'}
+ )}
+
+
+
+
+
+ Зарегистрирован
+ {device.registeredAt ?? 'Нет данных'}
+
+
+
+
+
+
+
+
+
+ `,
+ iconSize: [34, 34],
+ iconAnchor: [17, 17],
+ popupAnchor: [0, -18],
+ })
+
+ markerIconCache.set(className, icon)
+
+ return icon
+}
+
+function formatLocationDate(timestamp?: number) {
+ if (!timestamp) return 'Нет данных'
+
+ return new Intl.DateTimeFormat('ru-RU', {
+ day: '2-digit',
+ month: '2-digit',
+ year: 'numeric',
+ hour: '2-digit',
+ minute: '2-digit',
+ }).format(new Date(timestamp))
+}
+
+function formatCoordinate(value: number) {
+ return value.toFixed(6)
+}
+
+function formatMetric(value: number | null, suffix: string) {
+ if (value === null) return '-'
+
+ return `${value}${suffix}`
+}
+
+function sortGpsTrack(track: DeviceGpsTrackPoint[]) {
+ return [...track].sort((a, b) => a.date - b.date)
+}
+
+function sortTelemetry(telemetry: DeviceTelemetryItem[]) {
+ return [...telemetry].sort((a, b) => a.date - b.date)
+}
+
+function createTelemetryLine(
+ telemetry: DeviceTelemetryItem[],
+ getValue: (item: DeviceTelemetryItem) => number | null,
+): TelemetryLine {
+ return telemetry
+ .map((item) => [item.date, getValue(item)] as const)
+ .filter((item): item is [number, number] => typeof item[1] === 'number')
+}
+
+function getLineValueAtTime(data: TelemetryLine, timestamp?: number) {
+ if (!timestamp || !data.length) return null
+
+ const firstPoint = data[0]
+ const lastPoint = data[data.length - 1]
+
+ if (timestamp <= firstPoint[0]) return firstPoint[1]
+ if (timestamp >= lastPoint[0]) return lastPoint[1]
+
+ let left = 0
+ let right = data.length - 1
+
+ while (right - left > 1) {
+ const middle = Math.floor((left + right) / 2)
+
+ if (data[middle][0] <= timestamp) {
+ left = middle
+ } else {
+ right = middle
+ }
+ }
+
+ const currentPoint = data[left]
+ const nextPoint = data[right]
+ const currentTime = currentPoint[0]
+ const currentValue = currentPoint[1]
+ const nextTime = nextPoint[0]
+ const nextValue = nextPoint[1]
+
+ if (nextTime === currentTime) return Math.round(currentValue)
+
+ const progress = (timestamp - currentTime) / (nextTime - currentTime)
+ const interpolatedValue =
+ currentValue + (nextValue - currentValue) * progress
+
+ return Math.round(interpolatedValue)
+}
+
+function createPointKey(kind: DeviceMapPoint['kind'], lat: number, lng: number, date?: number) {
+ return `${kind}-${date ?? 'no-date'}-${lat}-${lng}`
+}
+
+function isDateInPeriod(
+ date: number | undefined,
+ period: MapTrackPeriodValue | null,
+) {
+ if (!date || !period) return false
+
+ return (
+ date >= period.periodStart.getTime() &&
+ date <= period.periodEnd.getTime()
+ )
+}
+
+function MapResizeWatcher() {
+ const map = useMap()
+
+ useEffect(() => {
+ const timeoutId = window.setTimeout(() => {
+ map.invalidateSize()
+ }, 100)
+
+ return () => window.clearTimeout(timeoutId)
+ }, [map])
+
+ return null
+}
+
+function MapFitBounds({ positions, fitKey }: MapFitBoundsProps) {
+ const map = useMap()
+ const lastFitKeyRef = useRef
+
+ )
+}
diff --git a/frontend/src/pages/DevicePage/components/DevicePageSkeleton/DevicePageSkeleton.scss b/frontend/src/pages/DevicePage/components/DevicePageSkeleton/DevicePageSkeleton.scss
new file mode 100644
index 0000000..00b6a75
--- /dev/null
+++ b/frontend/src/pages/DevicePage/components/DevicePageSkeleton/DevicePageSkeleton.scss
@@ -0,0 +1,243 @@
+@use '../../../../shared/styles/variables' as *;
+
+.device-page-skeleton {
+ position: relative;
+ display: block;
+ overflow: hidden;
+ flex: 0 0 auto;
+ border-radius: 12px;
+ background: $color-skeleton;
+
+ &::after {
+ content: '';
+ position: absolute;
+ inset: 0;
+ transform: translateX(-100%);
+ background: linear-gradient(90deg,
+ $transparent,
+ $color-skeleton-highlight,
+ $transparent);
+ animation: device-page-skeleton-shimmer 1.35s ease-in-out infinite;
+ }
+}
+
+.device-page-skeleton--text {
+ height: 1em;
+ min-width: 32px;
+ border-radius: 999px;
+}
+
+.device-page-skeleton--icon {
+ width: 32px;
+ height: 32px;
+ border-radius: 9px;
+}
+
+.device-page-skeleton--button {
+ width: 100%;
+ height: 44px;
+ border-radius: 12px;
+}
+
+.device-page-skeleton--square-button {
+ width: 42px;
+ height: 42px;
+ border-radius: 12px;
+}
+
+.device-page-skeleton--mini-button {
+ width: 34px;
+ height: 34px;
+ border-radius: 10px;
+}
+
+.device-page-skeleton--switch {
+ width: 48px;
+ height: 26px;
+ border-radius: 999px;
+}
+
+.device-page-skeleton--battery-circle {
+ width: 120px;
+ height: 120px;
+ border-radius: 50%;
+}
+
+.device-page-loading__grid {
+ align-items: stretch;
+}
+
+.device-page-loading__main-card,
+.device-page-loading__map-card,
+.device-page-loading__actions-card,
+.device-page-loading__permissions-card,
+.device-page-loading__battery-card,
+.device-page-loading__impacts-card {
+ pointer-events: none;
+}
+
+.device-page-loading__device-image {
+ min-height: 220px;
+}
+
+.device-page-loading__phone {
+ width: 42%;
+ min-width: 92px;
+ max-width: 138px;
+ height: 100%;
+ min-height: 180px;
+ border-radius: 28px;
+}
+
+.device-page-loading__main-info {
+ padding-top: 2px;
+
+ .device-page-skeleton--text {
+ height: 17px;
+ }
+}
+
+.device-page-loading__title {
+ height: 30px !important;
+ margin-bottom: 2px;
+}
+
+.device-page-loading__status-row {
+ .device-page-skeleton--text {
+ height: 18px;
+ }
+}
+
+.device-page-loading__registered {
+ .device-registered-info {
+ min-height: 44px;
+ }
+}
+
+.device-page-loading__history-button {
+ max-width: 286px;
+}
+
+.device-page-loading__map-card {
+ min-height: 420px;
+}
+
+.device-page-loading__map-header {
+ align-items: flex-start;
+
+ .device-card__title {
+ flex: 0 0 auto;
+ }
+
+ >.device-page-skeleton--text {
+ height: 15px;
+ margin-top: 7px;
+ }
+}
+
+.device-page-loading__map-container {
+ position: relative;
+ display: flex;
+ flex: 1;
+ min-height: 332px;
+ border-radius: 16px;
+}
+
+.device-page-loading__period-control {
+ position: absolute;
+ z-index: 1;
+ top: 12px;
+ left: 12px;
+ right: 12px;
+
+ display: grid;
+ grid-template-columns: repeat(3, minmax(0, 1fr));
+ gap: 8px;
+
+ .device-page-skeleton--button {
+ height: 34px;
+ border-radius: 10px;
+ background: rgba($white, 0.86);
+ }
+}
+
+.device-page-loading__map {
+ width: 100%;
+ min-height: 332px;
+ border-radius: 16px;
+ background:
+ linear-gradient(135deg, rgba($color-primary-rgb, 0.05), $transparent 48%),
+ $color-skeleton;
+}
+
+.device-page-loading__actions-card {
+ min-height: 174px;
+
+ .device-page-loading__card-title {
+ height: 18px;
+ margin-bottom: 12px;
+ padding-bottom: 12px;
+ }
+
+ .actions-button-container {
+ gap: 8px;
+ }
+}
+
+.device-page-loading__permissions-card {
+ min-height: 236px;
+}
+
+.device-page-loading__permissions-header {
+ margin-bottom: 12px;
+
+ .device-permissions__header-actions {
+ display: flex;
+ gap: 8px;
+ }
+}
+
+.device-page-loading__card-title {
+ height: 18px;
+}
+
+.device-page-loading__permission {
+ .device-permission__label {
+ min-height: 43px;
+ }
+}
+
+.device-page-loading__stats-column {
+ align-self: stretch;
+}
+
+.device-page-loading__battery-card {
+ min-height: 194px;
+
+ >.device-page-loading__card-title {
+ margin-bottom: 12px;
+ padding-bottom: 12px;
+ }
+}
+
+.device-page-loading__stat {
+ .device-stats-text {
+ min-height: 30px;
+ }
+}
+
+.device-page-loading__impacts-card {
+ min-height: 34px;
+}
+
+@keyframes device-page-skeleton-shimmer {
+ to {
+ transform: translateX(100%);
+ }
+}
+
+@media (prefers-reduced-motion: reduce) {
+ .device-page-skeleton::after {
+ animation: none;
+ }
+}
diff --git a/frontend/src/pages/DevicePage/components/DevicePageSkeleton/DevicePageSkeleton.tsx b/frontend/src/pages/DevicePage/components/DevicePageSkeleton/DevicePageSkeleton.tsx
new file mode 100644
index 0000000..97f3f46
--- /dev/null
+++ b/frontend/src/pages/DevicePage/components/DevicePageSkeleton/DevicePageSkeleton.tsx
@@ -0,0 +1,184 @@
+import type { CSSProperties } from 'react'
+
+import './DevicePageSkeleton.scss'
+
+type SkeletonProps = {
+ className?: string
+ width?: CSSProperties['width']
+ height?: CSSProperties['height']
+}
+
+function Skeleton({ className = '', width, height }: SkeletonProps) {
+ return (
+
+ )
+}
+
+function SkeletonText({
+ className = '',
+ width = '100%',
+}: Omit
+
+
+
+
+
+ Устройство на карте
++ Последнее местоположение:{' '} + {device.lastLocationAt ?? 'Нет данных'} +
+
+
+ {
+ event.originalEvent.stopPropagation()
+ setSelectedPointKey(point.key)
+ },
+ }}
+ />
+ ))}
+
+ {currentMapPoint && (
+ {
+ event.originalEvent.stopPropagation()
+ setSelectedPointKey(currentMapPoint.key)
+ },
+ }}
+ />
+ )}
+
+
+
+
+
+
+ {selectedMapPoint && (
+
+
+
+
+ )}
+
+
+ {selectedMapPoint.title}
+
+ {selectedMapPoint.subtitle ?? device.factoryNumber}
+
+
+
+
+
+
+
+ {device.connectionText}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {Array.from({ length: 4 }).map((_, index) => (
+
+
+
+ ))}
+
+
+
+
+
+
+
+
+
+
+ {Array.from({ length: 3 }).map((_, index) => (
+
+
+
+ ))}
+
+
+
+
+
+
+
+ setNotification(null)}
+ />
+ )}
+
+ )
+}, areDevicePermissionsCardPropsEqual)
+
+type PermissionItemProps = {
+ icon: ReactNode
+ label: string
+ kind: PolicyKind
+ value: PolicyValue
+ options: PolicyValue[]
+ disabled?: boolean
+ isPolicyLocked?: boolean
+ onChange: (value: PolicyValue) => void
+}
+
+function PermissionItem({
+ icon,
+ label,
+ kind,
+ value,
+ options,
+ disabled = false,
+ isPolicyLocked = false,
+ onChange,
+}: PermissionItemProps) {
+ return (
+
+
+
+
+
+
+ Опции
+ + +
+
+
+
+
+
+ {permissionItems.map((item) => {
+ const value = policyState[item.key]
+ const isPolicyLocked = isOrganisationPolicyLocked(
+ device.organisationPolicy,
+ item.editableKey,
+ )
+ const isDisabled = isPolicyLocked || !isEditing || isSaving
+
+ return (
+ {
+ handlePolicyOptionChange(item, option, isPolicyLocked)
+ }}
+ />
+ )
+ })}
+
+
+ {saveError && (
+
+ Не удалось сохранить политику устройства
+
+ )}
+
+ {notification && (
+
+ {icon}
+
+
+ )
+}
diff --git a/frontend/src/pages/DevicePage/components/DeviceStatsCards/DeviceStatsCards.tsx b/frontend/src/pages/DevicePage/components/DeviceStatsCards/DeviceStatsCards.tsx
new file mode 100644
index 0000000..02532bb
--- /dev/null
+++ b/frontend/src/pages/DevicePage/components/DeviceStatsCards/DeviceStatsCards.tsx
@@ -0,0 +1,143 @@
+import { memo } from 'react'
+import { Battery, RotateCcw, ShieldCheck, Smartphone } from 'lucide-react'
+import type { Device } from '../../types'
+
+type DeviceStatsCardsProps = {
+ device: Device
+}
+
+function formatWorkTimeHours(worktime?: number | null) {
+ if (typeof worktime !== 'number') return '-'
+
+ const hours = worktime / 1000 / 60 / 60
+
+ if (hours < 1) {
+ const minutes = Math.round(worktime / 1000 / 60)
+
+ return `${minutes} мин`
+ }
+
+ if (hours < 10) {
+ return `${hours.toFixed(1)} ч`
+ }
+
+ return `${Math.round(hours)} ч`
+}
+
+function areStatsCardsPropsEqual(
+ prev: DeviceStatsCardsProps,
+ next: DeviceStatsCardsProps,
+) {
+ return (
+ prev.device.battery === next.device.battery &&
+ prev.device.batteryMaxCapacity === next.device.batteryMaxCapacity &&
+ prev.device.chargeCycles === next.device.chargeCycles &&
+ prev.device.totalWorkTime === next.device.totalWorkTime &&
+ prev.device.mediumImpacts === next.device.mediumImpacts
+ )
+}
+
+export const DeviceStatsCards = memo(function DeviceStatsCards({
+ device,
+}: DeviceStatsCardsProps) {
+
+ const batteryValue =
+ typeof device.battery === 'number'
+ ? Math.max(0, Math.min(100, device.battery))
+ : null
+
+ const batterySize = 110
+ const batteryStroke = 12
+ const batteryRadius = (batterySize - batteryStroke) / 2
+ const batteryLength = 2 * Math.PI * batteryRadius
+ const batteryProgress = batteryValue !== null ? batteryValue / 100 : 0
+ const batteryDashOffset = batteryLength * (1 - batteryProgress)
+
+ function getBatteryColor(value: number | null) {
+ if (value === null) return 'var(--device-battery-progress-empty)'
+ if (value <= 20) return 'var(--device-battery-progress-danger)'
+ if (value <= 50) return 'var(--device-battery-progress-warning)'
+
+ return 'var(--device-battery-progress-strong)'
+ }
+
+ return (
+
+ {label}
+
+
+ {isPolicyLocked && (
+
+
+
+
+ Опция зафиксирована политикой организации. Изменить ее на странице устройства нельзя.
+
+
+ )}
+
+
+
+
+
+ {options.map((option) => {
+ const isActive = value === option
+
+ return (
+
+ )
+ })}
+
+
+
+
+ )
+}, areStatsCardsPropsEqual)
diff --git a/frontend/src/pages/DevicePage/components/TimelineZoom/TimelineZoom.scss b/frontend/src/pages/DevicePage/components/TimelineZoom/TimelineZoom.scss
new file mode 100644
index 0000000..bbff9b0
--- /dev/null
+++ b/frontend/src/pages/DevicePage/components/TimelineZoom/TimelineZoom.scss
@@ -0,0 +1,107 @@
+@use '../../../../shared/styles/variables' as *;
+
+.timeline-zoom {
+ position: sticky;
+ top: 0;
+ z-index: 50;
+
+ padding: 10px 20px 20px 20px;
+
+}
+
+.timeline-zoom__track {
+ position: relative;
+
+ height: 28px;
+
+ border-radius: 8px;
+ background: $color-surface-active;
+
+ overflow: visible;
+}
+
+.timeline-zoom__selection {
+ position: absolute;
+ top: 0;
+ bottom: 0;
+
+ min-width: 24px;
+
+ border-radius: 8px;
+ background: $color-primary-focus;
+}
+
+.timeline-zoom__window {
+ position: absolute;
+ inset: 0;
+
+ border: none;
+ background: $transparent;
+
+ cursor: grab;
+}
+
+.timeline-zoom__window:active {
+ cursor: grabbing;
+}
+
+.timeline-zoom__label--left {
+ transform: translate(50%, -50%);
+ &.out-place{
+ transform: translate(-90%, -50%);
+ }
+}
+
+.timeline-zoom__label--right {
+ transform: translate(-150%, -50%);
+
+ &.out-place{
+ transform: translate(-5%, -50%);
+ }
+}
+
+.timeline-zoom__handle {
+ position: absolute;
+ top: 2px;
+ bottom: 2px;
+
+ width: 6px;
+
+ border: none;
+ border-radius: 999px;
+
+ background: $blue;
+
+ cursor: ew-resize;
+ z-index: 10;
+}
+
+.timeline-zoom__handle--left {
+ left: 2px;
+}
+
+.timeline-zoom__handle--right {
+ right: 2px;
+}
+
+.timeline-zoom__label {
+ position: absolute;
+ top: 50%;
+
+ color: $gray50;
+ font-size: $font-size-12;
+ font-weight: 550;
+ line-height: 1;
+
+ pointer-events: none;
+ white-space: nowrap;
+ transition: transform .3s ease;
+}
+
+.timeline-zoom__label--left {
+ margin-left: -12px;
+}
+
+.timeline-zoom__label--right {
+ margin-left: 12px;
+}
diff --git a/frontend/src/pages/DevicePage/components/TimelineZoom/TimelineZoom.tsx b/frontend/src/pages/DevicePage/components/TimelineZoom/TimelineZoom.tsx
new file mode 100644
index 0000000..59cbf87
--- /dev/null
+++ b/frontend/src/pages/DevicePage/components/TimelineZoom/TimelineZoom.tsx
@@ -0,0 +1,406 @@
+import { useEffect, useMemo, useRef, useState } from 'react'
+
+import './TimelineZoom.scss'
+
+type TimelineZoomProps = {
+ min: number
+ max: number
+
+ start: number
+ end: number
+
+ onChange: (range: {
+ start: number
+ end: number
+ }) => void
+
+ formatLabel?: (value: number) => string
+
+ minWindow?: number
+}
+
+type DragType =
+ | 'left'
+ | 'right'
+ | 'move'
+ | null
+
+const CHANGE_THROTTLE_MS = 90
+
+export function TimelineZoom({
+ min,
+ max,
+ start,
+ end,
+ onChange,
+ formatLabel = (value) =>
+ new Date(value).toLocaleString('ru-RU', {
+ day: '2-digit',
+ month: '2-digit',
+ hour: '2-digit',
+ minute: '2-digit',
+ }),
+ minWindow = 5 * 60 * 1000,
+}: TimelineZoomProps) {
+
+ const STEP = 5 * 60 * 1000
+
+ function snap(value: number) {
+ return Math.round(value / STEP) * STEP
+ }
+
+ const trackRef = useRef
+
+
+ Аккумулятор
+ +
+
+
+
+
+ {batteryValue !== null ? `${batteryValue}%` : '-'}
+
+
+
+
+
+
+
+
+ Остаточная емкость
+ {device.batteryMaxCapacity ?? '-'}%
+
+
+
+
+
+ Циклов перезарядки
+ {device.chargeCycles ?? '-'}
+
+
+
+
+ Общее время работы
+ {formatWorkTimeHours(device.totalWorkTime)}
+
+
+
+
+ Средних ударов
+ {device.mediumImpacts ?? '-'}
+
+
+
+ )
+}
diff --git a/frontend/src/pages/DevicePage/types.ts b/frontend/src/pages/DevicePage/types.ts
new file mode 100644
index 0000000..9cd1499
--- /dev/null
+++ b/frontend/src/pages/DevicePage/types.ts
@@ -0,0 +1,83 @@
+import type {
+ DevicePolicy,
+ DeviceTelemetryItem,
+ GroupUsePolicy,
+} from '../../entities/device/model/types'
+
+export type DeviceCondition = 'ok' | 'inspection'
+export type DeviceConnection = 'online' | 'offline' | 'offlineDanger'
+
+export type Device = {
+ id: number
+ factoryNumber: string
+ model?: string
+ imei: string
+ imei2: string
+ serialNumber?: string
+ organisation?: string
+ organisationId?: number
+ policy?: DevicePolicy | null
+ organisationPolicy?: GroupUsePolicy | null
+ workTime: string | null
+ employee: string | null
+ condition: DeviceCondition
+ connection: DeviceConnection
+ connectionText: string
+ registeredAt?: string
+ lastLocationAt?: string
+ lastLocationDate?: number
+ battery?: number
+ batteryMaxCapacity?: number
+ telemetry?: DeviceTelemetryItem[]
+ chargeCycles?: string
+ totalWorkTime?: number | null
+ mediumImpacts?: string
+ overheats?: 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
+ locked?: boolean
+ }
+ statusIcons: {
+ gps: boolean
+ wifi: boolean
+ bluetooth: boolean
+ lock: boolean
+ camera: boolean
+ sim: boolean
+ sound: boolean
+ kiosk: boolean
+ }
+}
+
+export const conditionText: Record
+
+
+
+
+ 5 ? 'out-place' : ''}`}
+ style={{
+ left: `${leftPercent}%`,
+ }}
+ >
+ {leftLabel}
+
+
+
+ {rightLabel}
+
+
+
+
+ {device.serial || '—'}
+
+
+
+ IMEI: {device.imei || '—'}
+
+
+
+ IMEI 2: {device.imei2 || '—'}
+
+
+
+ {device.org?.name || 'Не указана'}
+
+
+
+
+ {getDeviceConditionLabel(device.techState?.needMaintenance)}
+
+
+
+
+ {getDeviceNetworkLabel(device.networkStatus)}
+
+
+
+ | ID | +Информация | +Состояние | +Связь | +Статусы | ++ |
|---|
+
+
+
+
+
+
+
+
+
+
+ {totalPages > 1 && (
+
+ Не удалось загрузить устройства
+
+ )}
+
+ {shouldShowEmptyState && (
+
+ {shouldRenderInlineFilters && (
+
+
+ )}
+
+
+ Фильтры
+
+
+
+
+
+
+
+
+
+
+
+
+ Добавить устройство
+
+
+
+ Отсканируйте QR-код на устройстве для привязки к системе
+
+
+
+
+
+
+
+ {loading && (
+
+
+ {registrationData && !loading && !error && (
+
+
+ )}
+
+ {error && !loading && (
+
+
+ )}
+
+ {!loading && !error && qrValue && (
+
+
+ )}
+
+
+ )}
+
+ + После сканирования устройство появится в списке и будет доступно + для назначения сотруднику. +
+
+
+ Закрыть
+
+
+
+
+
+
+
+ {device && (
+
+
+ Устройство на карте
+
+
+
+ {device?.factoryNumber || 'Выбранное устройство'}
+
+
+
+
+
+ )}
+
+
+
+
+ {isOpen && (
+
+
+ )}
+
+
+ )
+}
diff --git a/frontend/src/pages/DevicesPage/components/DevicesFiltersPanel/Datepicker.scss b/frontend/src/pages/DevicesPage/components/DevicesFiltersPanel/Datepicker.scss
new file mode 100644
index 0000000..41907a0
--- /dev/null
+++ b/frontend/src/pages/DevicesPage/components/DevicesFiltersPanel/Datepicker.scss
@@ -0,0 +1,45 @@
+@use '../../../../shared/styles/variables' as *;
+
+.react-datepicker {
+ border: none;
+ border-radius: 14px;
+ box-shadow: $shadow-popover-soft;
+ font-family: inherit;
+ overflow: hidden;
+}
+
+.react-datepicker__header {
+ background: $color-surface-muted;
+ border-bottom: 1px solid $color-border;
+}
+
+.react-datepicker__current-month,
+.react-datepicker-time__header,
+.react-datepicker-year-header {
+ color: $color-text-heading;
+ font-weight: 600;
+}
+
+.react-datepicker__day--selected,
+.react-datepicker__day--keyboard-selected,
+.react-datepicker__time-container
+ .react-datepicker__time
+ .react-datepicker__time-box
+ ul.react-datepicker__time-list
+ li.react-datepicker__time-list-item--selected {
+ background: $color-primary;
+ color: $color-text-inverse;
+}
+
+.react-datepicker__day--in-range,
+.react-datepicker__day--in-selecting-range {
+ background: $color-primary-soft;
+ color: $color-primary;
+}
+
+.react-datepicker__day:hover,
+.react-datepicker__month-text:hover,
+.react-datepicker__quarter-text:hover,
+.react-datepicker__year-text:hover {
+ background: $color-surface-hover;
+}
diff --git a/frontend/src/pages/DevicesPage/components/DevicesFiltersPanel/DevicesFiltersPanel.scss b/frontend/src/pages/DevicesPage/components/DevicesFiltersPanel/DevicesFiltersPanel.scss
new file mode 100644
index 0000000..93b466f
--- /dev/null
+++ b/frontend/src/pages/DevicesPage/components/DevicesFiltersPanel/DevicesFiltersPanel.scss
@@ -0,0 +1,293 @@
+@use '../../../../shared/styles/variables' as *;
+
+.devices-filters {
+ width: var(--devices-filters-width, 292px);
+ min-width: var(--devices-filters-width, 292px);
+ margin-left: var(--devices-filters-gap, 20px);
+ box-sizing: border-box;
+ opacity: 0;
+ visibility: hidden;
+ overflow: visible;
+ pointer-events: none;
+ transform: translateX(6px);
+ will-change: opacity, transform;
+
+ transition:
+ opacity 0.2s ease,
+ transform var(
+ --devices-filters-duration,
+ 360ms
+ ) var(--devices-filters-easing, cubic-bezier(0.22, 1, 0.36, 1)),
+ visibility 0s linear var(--devices-filters-duration, 360ms);
+}
+
+.devices-filters--open {
+ opacity: 1;
+ visibility: visible;
+ pointer-events: auto;
+ transform: translateX(0);
+ transition:
+ opacity 0.2s ease,
+ transform var(
+ --devices-filters-duration,
+ 360ms
+ ) var(--devices-filters-easing, cubic-bezier(0.22, 1, 0.36, 1)),
+ visibility 0s;
+}
+
+.devices-filters__accordion {
+ width: 100%;
+ min-width: 0;
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+}
+
+.devices-filter-item {
+ border-radius: 14px;
+ background: $color-surface;
+ overflow: hidden;
+ box-shadow: 2px 2px 30px -10px rgba($gray50-rgb, .2);
+ &:nth-child(1)[data-state=open]{
+ overflow: visible;
+ }
+}
+
+.devices-filter-item__header {
+ margin: 0;
+}
+
+.devices-filter-item__trigger {
+ width: calc(100% - 32px);
+ min-height: 44px;
+ margin: 0 16px;
+
+ border: none;
+ border-bottom: 1px solid $transparent;
+ background: $transparent;
+
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 12px;
+
+ color: $color-text-strong;
+ font-size: $font-size-18;
+ font-weight: 500;
+ cursor: pointer;
+
+ &[data-state='open'] {
+ //color: $blue;
+ border-bottom-color: $gray20;
+ }
+}
+
+.devices-filter-item__chevron {
+ flex: 0 0 auto;
+ transition: transform 0.2s ease;
+}
+
+.devices-filter-item__trigger[data-state='open'] .devices-filter-item__chevron {
+ transform: rotate(180deg);
+}
+
+.devices-filter-item__content {
+ //overflow: hidden;
+
+ &[data-state='open'] {
+ animation: filterSlideDown 0.2s ease;
+ }
+
+ &[data-state='closed'] {
+ animation: filterSlideUp 0.2s ease;
+ }
+}
+
+.devices-filter-item__inner {
+ padding: 12px 16px 16px;
+}
+
+.devices-period {
+ display: flex;
+ align-items: center;
+ gap: 6px;
+}
+
+.devices-period__divider {
+ width: 12px;
+ height: 1px;
+ background: $gray50;
+ flex: 0 0 12px;
+}
+
+.devices-period__input {
+ width: 126px;
+ min-height: 28px;
+ padding: 0 10px;
+
+ border: none;
+ outline: none;
+ border-radius: 999px;
+ background: $color-surface-hover;
+
+ color: $gray50;
+ font-size: $font-size-16;
+ font-weight: 400;
+ cursor: pointer;
+}
+
+.devices-filter-reset {
+ margin: 12px 0 0 auto;
+ padding: 0;
+
+ display: block;
+
+ border: none;
+ background: $transparent;
+
+ color: $blue;
+ font-size: $font-size-14;
+ font-weight: 400;
+ text-decoration: underline;
+ cursor: pointer;
+}
+
+.devices-filter-row {
+ display: grid;
+ grid-template-columns: 1fr auto auto;
+ align-items: center;
+ gap: 12px;
+
+ min-height: 28px;
+
+ color: $gray50;
+ font-size: $font-size-13;
+
+ & + & {
+ margin-top: 12px;
+ }
+}
+
+.devices-filter-row__label {
+ color: $gray50;
+ font-size: $font-size-16;
+ font-weight: 500;
+ text-align: left;
+}
+
+.devices-checkbox-list{
+ display: flex;
+ flex-direction: column;
+}
+
+.devices-radio,
+.devices-checkbox {
+ display: inline-flex;
+ align-items: center;
+ gap: 6px;
+
+ color: $color-text-heading;
+ font-size: $font-size-16;
+ font-weight: 500;
+ cursor: pointer;
+ user-select: none;
+
+ input {
+ display: none;
+ }
+}
+
+.devices-radio__control {
+ width: 18px;
+ height: 18px;
+ border-radius: 50%;
+ border: 2px solid $color-border-strong;
+ background: $color-surface-muted;
+ position: relative;
+ flex: 0 0 18px;
+}
+
+.devices-radio input:checked + .devices-radio__control {
+ border-color: $color-primary;
+ background: $color-primary;
+}
+
+.devices-radio input:checked + .devices-radio__control::after {
+ content: '';
+ position: absolute;
+ inset: 5px;
+ border-radius: 50%;
+ background: $color-surface;
+}
+
+.devices-radio__label {
+ white-space: nowrap;
+}
+
+.devices-checkbox {
+ min-height: 28px;
+
+ & + & {
+ margin-top: 8px;
+ }
+}
+
+.devices-checkbox__control {
+ width: 18px;
+ height: 18px;
+ border-radius: 5px;
+ border: 2px solid $color-border-strong;
+ background: $color-surface-muted;
+ position: relative;
+ flex: 0 0 18px;
+ transition: .2s ease;
+}
+
+.devices-checkbox input:checked + .devices-checkbox__control {
+ border-color: $color-primary;
+ background: $color-primary;
+ box-shadow: 0 2px 8px -2px rgba(var(--color-primary-rgb), 0.8);
+}
+
+.devices-checkbox input:checked + .devices-checkbox__control::after {
+ content: '';
+ position: absolute;
+ left: 5px;
+ top: 2px;
+ width: 4px;
+ height: 8px;
+ border: solid white;
+ border-width: 0 2px 2px 0;
+ transform: rotate(45deg);
+}
+
+@keyframes filterSlideDown {
+ from {
+ height: 0;
+ }
+
+ to {
+ height: var(--radix-accordion-content-height);
+ }
+}
+
+@keyframes filterSlideUp {
+ from {
+ height: var(--radix-accordion-content-height);
+ }
+
+ to {
+ height: 0;
+ }
+}
+
+[data-theme='dark'] {
+ .devices-filter-item {
+ box-shadow: none;
+ outline: 1px solid rgba($gray50-rgb, 0.08);
+ }
+
+ .devices-filter-item__trigger:hover {
+ color: $color-primary-hover;
+ }
+}
diff --git a/frontend/src/pages/DevicesPage/components/DevicesFiltersPanel/DevicesFiltersPanel.tsx b/frontend/src/pages/DevicesPage/components/DevicesFiltersPanel/DevicesFiltersPanel.tsx
new file mode 100644
index 0000000..af1a713
--- /dev/null
+++ b/frontend/src/pages/DevicesPage/components/DevicesFiltersPanel/DevicesFiltersPanel.tsx
@@ -0,0 +1,284 @@
+import { memo, useCallback, useMemo } from 'react'
+import * as Accordion from '@radix-ui/react-accordion'
+import { useSearchParams } from 'react-router-dom'
+import { ChevronDown } from 'lucide-react'
+
+import type { DeviceNetworkStatus } from '../../../../entities/device/model/types'
+import { DevicesOrganisationFilter } from '../DevicesOrganisationFilter/DevicesOrganisationFilter'
+
+import './Datepicker.scss'
+import './DevicesFiltersPanel.scss'
+
+const networkStatusOptions: {
+ value: DeviceNetworkStatus
+ label: string
+}[] = [
+ {
+ value: 'Online',
+ label: 'В сети',
+ },
+ {
+ value: 'Offline',
+ label: 'Не в сети',
+ },
+ {
+ value: 'Lost',
+ label: 'Потерян',
+ },
+]
+
+const maintenanceOptions = [
+ {
+ value: false,
+ label: 'Исправно',
+ },
+ {
+ value: true,
+ label: 'Требует ТО',
+ },
+]
+
+function isDeviceNetworkStatus(value: string): value is DeviceNetworkStatus {
+ return networkStatusOptions.some((option) => option.value === value)
+}
+
+type DevicesFiltersPanelProps = {
+ isOpen: boolean
+}
+
+export const DevicesFiltersPanel = memo(function DevicesFiltersPanel({
+ isOpen,
+}: DevicesFiltersPanelProps) {
+ const [searchParams, setSearchParams] = useSearchParams()
+
+ const selectedOrganisationIds = useMemo(
+ () => searchParams.get('dOrgs')?.split(',').filter(Boolean) ?? [],
+ [searchParams],
+ )
+
+ const networkStatusParam = searchParams.get('dNetwork')
+ const selectedNetworkStatuses = useMemo
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + {value.from && value.to + ? `Выбрано: ${formatDate(value.from)} — ${formatDate(value.to)}` + : 'Период не выбран'} +
+ +
+
+
+
+
+
+ {selectedOrganisations.length > 0 && (
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+})
diff --git a/frontend/src/pages/DevicesPage/components/DevicesTabs/DevicesTabs.tsx b/frontend/src/pages/DevicesPage/components/DevicesTabs/DevicesTabs.tsx
new file mode 100644
index 0000000..d27a4ad
--- /dev/null
+++ b/frontend/src/pages/DevicesPage/components/DevicesTabs/DevicesTabs.tsx
@@ -0,0 +1,174 @@
+import { useQuery } from '@apollo/client/react'
+import { memo, useCallback, useMemo } from 'react'
+import { useSearchParams } from 'react-router-dom'
+
+import {
+ GET_PHONES_TABS_STATS_QUERY,
+} from '../../../../entities/device/api/device.graphql'
+import type {
+ GetPhonesTabsStatsData,
+ GetPhonesTabsStatsVariables,
+} from '../../../../entities/device/model/types'
+import {
+ PageTabs,
+ type PageTabItem,
+} from '../../../../shared/ui/PageTabs/PageTabs'
+
+type DevicesTab = 'working' | 'lost' | 'locked' | 'maintenance'
+type DevicesTabsValue = DevicesTab | 'none'
+
+function getActiveTab(searchParams: URLSearchParams): DevicesTabsValue {
+ const locked = searchParams.get('dLocked')
+ const needMaintenance = searchParams.get('dNeedMaintenance')
+ const networkStatus = searchParams.get('dNetwork')
+
+ if (locked === 'true') return 'locked'
+ if (needMaintenance === 'true') return 'maintenance'
+ if (networkStatus === 'Lost') return 'lost'
+ if (networkStatus === 'Online') return 'working'
+
+ return 'none'
+}
+
+function formatCount(value?: number) {
+ if (typeof value !== 'number') return '...'
+
+ return value.toLocaleString('ru-RU')
+}
+
+export const DevicesTabs = memo(function DevicesTabs() {
+ const [searchParams, setSearchParams] = useSearchParams()
+ const activeTab = useMemo(() => getActiveTab(searchParams), [searchParams])
+
+ const query = searchParams.get('dQuery')?.trim() || undefined
+ const selectedOrganisationIds = useMemo(() => {
+ return searchParams.get('dOrgs')?.split(',').filter(Boolean) ?? []
+ }, [searchParams])
+
+ const queryVariables = useMemo
+ {selectedOrganisations.map(
+ (organisation) => (
+
+ )}
+
+
+ {organisation.name}
+
+
+
+ ),
+ )}
+
+ {loading &&
+ organisations.length === 0 && (
+
+
+ Загрузка организаций...
+
+ )}
+
+ {error && (
+
+ Не удалось загрузить организации
+
+ )}
+
+ {!loading &&
+ !error &&
+ organisations.length === 0 && (
+
+ Организации не найдены
+
+ )}
+
+ {mergedOrganisations.map((organisation) => {
+ const isSelected =
+ selectedOrganisationIds.includes(
+ organisation.id,
+ )
+
+ return (
+
+ )
+ },
+ )}
+
+
+
+
+ )
+})
diff --git a/frontend/src/pages/DevicesPage/devices.mock.json b/frontend/src/pages/DevicesPage/devices.mock.json
new file mode 100644
index 0000000..c9dff32
--- /dev/null
+++ b/frontend/src/pages/DevicesPage/devices.mock.json
@@ -0,0 +1,76 @@
+[
+ {
+ "id": 1,
+ "factoryNumber": "Заводской номер",
+ "model": "АРМАФОН S3.3+",
+ "imei": "IMEI устройства",
+ "serialNumber": "AF-S33-000001",
+ "workTime": "4 ч 15 мин",
+ "employee": "Иванов Иван Иванович",
+ "condition": "ok",
+ "connection": "online",
+ "connectionText": "В сети",
+ "registeredAt": "10:00 20.04.2026",
+ "lastLocationAt": "12:56 23.04.2026",
+ "location": {
+ "lat": 55.397255,
+ "lng": 86.116905
+ },
+ "route": [
+ {
+ "lat": 55.392940,
+ "lng": 86.107870,
+ "time": "20.04.2026 07:10"
+ },
+ {
+ "lat": 55.394120,
+ "lng": 86.110420,
+ "time": "20.04.2026 07:35"
+ },
+ {
+ "lat": 55.395430,
+ "lng": 86.112980,
+ "time": "20.04.2026 08:05"
+ },
+ {
+ "lat": 55.396210,
+ "lng": 86.114640,
+ "time": "20.04.2026 08:35"
+ },
+ {
+ "lat": 55.396870,
+ "lng": 86.115760,
+ "time": "20.04.2026 09:00"
+ },
+ {
+ "lat": 55.397255,
+ "lng": 86.116905,
+ "time": "20.04.2026 09:20"
+ }
+ ],
+ "battery": 65,
+ "batteryMaxCapacity": 90,
+ "chargeCycles": "100/500",
+ "totalWorkTime": "1000 ч",
+ "mediumImpacts": "50/300",
+ "image": "/devices/армафон3.3+.webp",
+ "statusIcons": {
+ "gps": true,
+ "wifi": true,
+ "bluetooth": true,
+ "lock": false,
+ "camera": true,
+ "sim": true,
+ "sound": false,
+ "kiosk": false
+ },
+ "permissions": {
+ "wifi": true,
+ "bluetooth": true,
+ "gps": true,
+ "camera": true,
+ "sim": true,
+ "speaker": false
+ }
+ }
+]
\ No newline at end of file
diff --git a/frontend/src/pages/EmployeesPage/EmployeesPage.scss b/frontend/src/pages/EmployeesPage/EmployeesPage.scss
new file mode 100644
index 0000000..f0c6397
--- /dev/null
+++ b/frontend/src/pages/EmployeesPage/EmployeesPage.scss
@@ -0,0 +1,599 @@
+@use '../../shared/styles/variables' as *;
+
+.employees-page {
+ display: flex;
+ flex-direction: column;
+ gap: 10px;
+
+ flex: 1;
+ min-height: 0;
+ height: 100%;
+ max-height: calc(100% - 56px);
+ overflow: visible;
+ padding: 20px 20px 36px;
+}
+
+.employees-page__section {
+ display: flex;
+ flex: 1;
+ gap: 10px;
+ min-height: 0;
+ flex-direction: column;
+}
+
+.employees-page__table-motion {
+ display: flex;
+ flex: 1;
+ min-width: 0;
+ min-height: 0;
+ flex-direction: column;
+}
+
+.employees-toolbar--organisations {
+ justify-content: flex-start;
+}
+
+.employees-table-container {
+ display: flex;
+ flex: 1;
+ min-width: 0;
+ min-height: 0;
+ flex-direction: column;
+ //overflow: hidden;
+ border-radius: 20px;
+}
+
+.employees-table-card {
+ position: relative;
+ flex: 1 1 0;
+ height: 100%;
+ min-height: 0;
+ max-height: 100%;
+ //overflow: hidden;
+ //box-shadow: $shadow-card;
+
+ border-radius: 20px;
+ background: $color-surface;
+
+ .simplebar-content-wrapper {
+ border-radius: 20px;
+ }
+
+
+ .simplebar-track.simplebar-vertical {
+ top: 48px;
+ bottom: 14px;
+ width: 14px;
+ right: -7px;
+ }
+
+ .simplebar-scrollbar::before {
+ background: color-mix(in srgb, var(--gray50) 85%, transparent);
+ backdrop-filter: blur(10px);
+ box-shadow: inset 0 0 0 1px var(--gray30), -2px 4px 12px rgba(0, 0, 0, 0.1);
+ border-radius: 4px;
+
+ opacity: 1;
+ }
+
+ .simplebar-track.simplebar-horizontal {
+ left: 12px;
+ right: 12px;
+ height: 8px;
+ }
+}
+
+.employees-table {
+ width: 100%;
+ min-width: 1120px;
+ border-collapse: collapse;
+ table-layout: fixed;
+ overflow: hidden;
+ border-radius: 20px;
+
+ thead {
+ position: sticky;
+ top: 0;
+ z-index: 2;
+ background: $color-surface;
+ }
+
+ th {
+ padding: 14px 20px;
+ line-height: 1;
+ border-bottom: 1px solid $gray20;
+
+ color: $gray50;
+ font-size: $font-size-16;
+ font-weight: 450;
+ text-align: left;
+ background: $color-surface;
+ }
+
+ td {
+ height: 68px;
+ padding: 14px 20px;
+ border-bottom: 1px solid $gray20;
+ vertical-align: middle;
+ text-align: left;
+
+ color: $color-text;
+ font-size: $font-size-17;
+ font-weight: 400;
+ }
+
+ th:nth-child(1),
+ td:nth-child(1) {
+ width: 30%;
+ }
+
+ th:nth-child(2),
+ td:nth-child(2) {
+ width: 28%;
+ }
+
+ th:nth-child(3),
+ td:nth-child(3) {
+ width: 160px;
+ }
+
+ th:nth-child(4),
+ td:nth-child(4) {
+ width: 170px;
+ }
+
+ th:nth-child(5),
+ td:nth-child(5) {
+ width: 300px;
+ }
+}
+
+.organisations-table {
+ min-width: 900px;
+
+ th:nth-child(1),
+ td:nth-child(1) {
+ width: 120px;
+ }
+
+ th:nth-child(2),
+ td:nth-child(2) {
+ width: auto;
+ }
+
+ th:nth-child(3),
+ td:nth-child(3) {
+ width: 330px;
+ }
+}
+
+.employee-person {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ gap: 12px;
+ min-width: 0;
+
+ .employee-person__avatar {
+ width: 48px;
+ height: 48px;
+ flex: 0 0 48px;
+
+ border-radius: 50%;
+ overflow: hidden;
+
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ background:
+ radial-gradient(circle at 30% 20%, rgba($white, 0.1), $transparent 28%),
+ linear-gradient(135deg, $blue, $color-primary-hover);
+
+ color: $color-text-inverse;
+ font-size: $font-size-14;
+ font-weight: 750;
+ letter-spacing: 0.04em;
+
+ box-shadow: inset 0 0 0 1px rgba($color-shadow-rgb, 0.06);
+
+ &.transparent-backdrop {
+ background: transparent;
+ }
+
+ img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ }
+ }
+
+ .employee-person__info {
+ min-width: 0;
+
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ gap: 3px;
+
+ >span {
+ color: $color-text;
+ font-size: $font-size-17;
+ font-weight: 600;
+ line-height: 1.2;
+ }
+
+ small {
+ color: $gray50;
+ font-size: $font-size-14;
+ font-weight: 500;
+ line-height: 1.2;
+ }
+ }
+}
+
+.employee-organisation,
+.employee-organisation-name {
+ color: $gray50;
+ font-size: $font-size-16;
+ font-weight: 500;
+}
+
+.employee-organisation-name {
+ color: $color-text;
+ font-weight: 500;
+}
+
+.employee-role {
+ display: inline-flex;
+ align-items: center;
+
+ min-height: 32px;
+ padding: 0 12px;
+ border-radius: 999px;
+
+ background: $blue20;
+ color: $blue;
+
+ font-size: $font-size-15;
+ font-weight: 600;
+}
+
+.employee-role--admin {
+ background: $color-warning-tint !important;
+ color: $orange !important;
+}
+
+.employee-credentials {
+ display: flex;
+ min-width: 0;
+ flex-direction: column;
+ gap: 4px;
+
+ span {
+ overflow: hidden;
+ color: $color-text;
+ font-size: $font-size-16;
+ font-weight: 600;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ }
+
+ small {
+ color: $gray50;
+ font-size: $font-size-14;
+ font-weight: 500;
+ }
+}
+
+.employee-created-at,
+.employees-table-actions__muted {
+ color: $gray50;
+ font-size: $font-size-15;
+ font-weight: 500;
+}
+
+.employees-table-actions {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+}
+
+.employees-action-btn {
+ height: 34px;
+ padding: 0 12px;
+
+ border: none;
+ border-radius: 12px;
+
+ display: inline-flex;
+ align-items: center;
+ gap: 6px;
+
+ font-size: $font-size-14;
+ font-weight: 600;
+ cursor: pointer;
+
+ opacity: 0.88;
+
+ transition:
+ background-color 0.2s ease,
+ color 0.2s ease,
+ opacity 0.2s ease,
+ box-shadow 0.2s ease;
+
+ &:hover {
+ opacity: 1;
+ }
+}
+
+.employees-action-btn--edit {
+ background: $blue20;
+ color: $blue;
+
+ &:hover {
+ box-shadow: inset 0 0 0 1px $blue, var(--shadow-primary);
+ }
+}
+
+.employees-action-btn--delete {
+ background: $color-danger-tint-strong;
+ color: $red;
+
+ &:hover {
+ box-shadow: inset 0 0 0 1px $red;
+ }
+}
+
+.employees-table__row {
+ position: relative;
+ transition: 0.2s ease;
+ box-shadow: inset 0px 0 0 $transparent;
+ cursor: pointer;
+ overflow: hidden;
+
+ &:hover {
+ background-color: $color-primary-tint-soft;
+ box-shadow: inset 3px 0 0 rgba($color-primary-rgb, 0.8);
+ }
+
+ &:last-child {
+ td {
+ border-bottom: none;
+ }
+ }
+}
+
+.employee-role {
+ display: inline-flex;
+ align-items: center;
+
+ min-height: 32px;
+ padding: 0 12px;
+ border-radius: 999px;
+
+ background: $color-primary-tint;
+ color: $blue;
+
+ font-size: $font-size-16;
+ font-weight: 500;
+}
+
+.employees-table-actions {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+}
+
+.employees-action-btn {
+ height: 34px;
+ padding: 0 12px;
+
+ border: none;
+ border-radius: 12px;
+
+ display: inline-flex;
+ align-items: center;
+ gap: 6px;
+
+ font-size: $font-size-14;
+ font-weight: 600;
+ cursor: pointer;
+
+ opacity: 0.88;
+
+ box-shadow: inset 0px 0 0 $transparent;
+
+ transition:
+ background-color 0.2s ease,
+ color 0.2s ease,
+ opacity 0.2s ease,
+ box-shadow 0.2s ease;
+
+ &:hover {
+ opacity: 1;
+ }
+}
+
+.employees-action-btn--edit {
+ background-color: $blue20;
+ color: $blue;
+
+ &:hover {
+ background-color: $blue;
+ color: $white;
+ box-shadow: inset 0 0 0 1px $blue, 0 8px 20px -8px rgba(var(--color-primary-rgb), 0.8);
+ }
+}
+
+.employees-action-btn--delete {
+ background-color: $color-danger-tint-strong;
+ color: $red;
+
+ &:hover {
+ background-color: $red;
+ color: $white;
+ box-shadow: inset 0 0 0 1px $red, 0 8px 20px -8px rgba(var(--color-danger-rgb), 0.8);
+ }
+}
+
+.employees-state {
+ min-height: 220px;
+ height: 100%;
+
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ color: $color-text-muted;
+ font-size: $font-size-15;
+ font-weight: 500;
+}
+
+.employees-state--error {
+ color: $red;
+}
+
+[data-theme='dark'] {
+ .employees-table__row:hover {
+ background-color: rgba($color-primary-rgb, 0.03);
+ box-shadow: inset 3px 0 0 rgba($color-primary-rgb, 0.36);
+ }
+}
+
+@include laptop-down {
+ .employee-person .employee-person__info>span {
+ font-size: var(--font-size-15);
+ }
+
+ .employee-person .employee-person__info small {
+ font-size: var(--font-size-14);
+ }
+
+ .employee-organisation,
+ .employee-organisation-name {
+ font-size: var(--font-size-15);
+ }
+
+ .employee-role {
+ font-size: var(--font-size-14);
+ }
+
+ .employees-table {
+ min-width: 1040px;
+
+ th,
+ td {
+ padding-inline: 16px;
+ }
+
+ td {
+ font-size: var(--font-size-15);
+ }
+
+ th:nth-child(1),
+ td:nth-child(1) {
+ width: 30%;
+ }
+
+ th:nth-child(2),
+ td:nth-child(2) {
+ width: 28%;
+ }
+
+ th:nth-child(3),
+ td:nth-child(3) {
+ width: 150px;
+ }
+
+ th:nth-child(4),
+ td:nth-child(4) {
+ width: 160px;
+ }
+
+ th:nth-child(5),
+ td:nth-child(5) {
+ width: 270px;
+ }
+ }
+
+ .organisations-table {
+ min-width: 820px;
+
+ th:nth-child(1),
+ td:nth-child(1) {
+ width: 58px;
+ }
+
+ th:nth-child(2),
+ td:nth-child(2) {
+ width: 64%;
+ }
+
+ th:nth-child(3),
+ td:nth-child(3) {
+ width: 280px;
+ }
+ }
+
+ .employee-person {
+ gap: 10px;
+
+ .employee-person__avatar {
+ width: 44px;
+ height: 44px;
+ flex-basis: 44px;
+ }
+ }
+}
+
+@include tablet-down {
+ .employees-table {
+ min-width: 960px;
+
+ th,
+ td {
+ padding-inline: 14px;
+ }
+
+ th:nth-child(1),
+ td:nth-child(1) {
+ width: 30%;
+ }
+
+ th:nth-child(2),
+ td:nth-child(2) {
+ width: 28%;
+ }
+
+ th:nth-child(3),
+ td:nth-child(3) {
+ width: 140px;
+ }
+
+ th:nth-child(4),
+ td:nth-child(4) {
+ width: 150px;
+ }
+
+ th:nth-child(5),
+ td:nth-child(5) {
+ width: 240px;
+ }
+ }
+
+ .organisations-table {
+ min-width: 760px;
+
+ th:nth-child(1),
+ td:nth-child(1) {
+ width: 86px;
+ }
+
+ th:nth-child(3),
+ td:nth-child(3) {
+ width: 230px;
+ }
+ }
+
+}
diff --git a/frontend/src/pages/EmployeesPage/EmployeesPage.tsx b/frontend/src/pages/EmployeesPage/EmployeesPage.tsx
new file mode 100644
index 0000000..9422669
--- /dev/null
+++ b/frontend/src/pages/EmployeesPage/EmployeesPage.tsx
@@ -0,0 +1,13 @@
+import { UsersSection } from './components/UsersSection/UsersSection'
+
+import './EmployeesPage.scss'
+
+export function EmployeesPage() {
+ return (
+
+
+
+
+
+
+
+
+
+ {devicesSortOptions.map((option) => (
+ onSortChange(option)}
+ >
+ {option.label}
+
+ {selectedSort.value === option.value && (
+
+ )}
+
+ ))}
+
+
+
+
+
+ {showFilters && (
+
+ )}
+
+
+
+
+
+
+
+
+
+
+
+ {isEditMode ? 'Редактировать' : 'Добавить пользователя'}
+
+
+
+ {isEditMode
+ ? 'Изменение данных пользователя Fleet BLE Monitor'
+ : 'Создание пользователя для доступа к Fleet BLE Monitor'}
+
+
+
+
+
+
+
+ {isOpen && (
+
+
+ )}
+
+
+ )
+})
diff --git a/frontend/src/pages/EmployeesPage/components/AddOrganisationModal/AddOrganisationModal.scss b/frontend/src/pages/EmployeesPage/components/AddOrganisationModal/AddOrganisationModal.scss
new file mode 100644
index 0000000..1574cb6
--- /dev/null
+++ b/frontend/src/pages/EmployeesPage/components/AddOrganisationModal/AddOrganisationModal.scss
@@ -0,0 +1,237 @@
+@use '../../../../shared/styles/variables' as *;
+
+.add-organisation-modal__overlay {
+ position: fixed;
+ inset: 0;
+ z-index: 110;
+
+ background: $color-backdrop;
+ backdrop-filter: blur(2px);
+}
+
+.add-organisation-modal {
+ position: fixed;
+ z-index: 120;
+ top: 50%;
+ left: 50%;
+
+ width: min(520px, calc(100vw - 32px));
+ max-height: calc(100vh - 40px);
+ padding: 24px;
+
+ border-radius: 24px;
+ background: $color-surface;
+ box-shadow: $shadow-modal;
+
+ transform: translate(-50%, -50%);
+}
+
+.add-organisation-modal--with-policy {
+ width: min(980px, calc(100vw - 32px));
+}
+.add-organisation-modal--without-policy{
+ width: min(460px, calc(100vw - 32px));
+ .avatar-upload{
+ width: inherit;
+ }
+}
+
+.add-organisation-modal__header {
+ margin-bottom: 22px;
+
+ display: flex;
+ align-items: flex-start;
+ justify-content: space-between;
+ gap: 16px;
+}
+
+.add-organisation-modal__title {
+ margin: 0;
+
+ color: $color-text;
+ font-size: $font-size-24;
+ font-weight: 650;
+}
+
+.add-organisation-modal__description {
+ margin: 6px 0 0;
+
+ color: $gray50;
+ font-size: $font-size-15;
+ font-weight: 400;
+ line-height: 1.4;
+}
+
+.add-organisation-modal__close {
+ width: 40px;
+ height: 40px;
+
+ border: none;
+ border-radius: 12px;
+ background: $color-bg;
+
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+
+ color: $gray50;
+ cursor: pointer;
+ transition: 0.2s ease;
+
+ &:hover {
+ color: $blue;
+ background: $gray20;
+ }
+}
+
+.add-organisation-form {
+ display: flex;
+ flex-direction: column;
+ gap: 14px;
+}
+
+.add-organisation-form--with-policy {
+ display: grid;
+ grid-template-columns: minmax(260px, 0.82fr) minmax(460px, 1.18fr);
+ align-items: stretch;
+ gap: 16px;
+
+ .add-organisation-error,
+ .add-organisation-modal__footer {
+ grid-column: 1 / -1;
+ }
+ .avatar-upload{
+ flex: 1;
+ width: inherit;
+ .avatar-upload__actions{
+ //display: none;
+ }
+ &__preview{
+ width: 200px;
+ height: 200px;
+ }
+ &__camera{
+ right: 6px;
+ bottom: 6px;
+ }
+ }
+ .add-organisation-field{
+ span{
+ display: none;
+ }
+ }
+}
+
+.add-organisation-form__main {
+ display: flex;
+ flex-direction: column;
+ gap: 14px;
+}
+
+.add-organisation-field {
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+
+ span {
+ color: $color-text;
+ font-size: $font-size-14;
+ font-weight: 500;
+ }
+
+ input {
+ height: 44px;
+ border: 1px solid $color-border-strong;
+ border-radius: 14px;
+ padding: 0 14px;
+
+ background: $color-surface-muted;
+ outline: none;
+
+ color: $color-text;
+ font-size: $font-size-15;
+ font-weight: 400;
+
+ transition: 0.2s ease;
+
+ &:focus {
+ border-color: $blue;
+ background: $color-surface;
+ }
+
+ &::placeholder {
+ color: $gray50;
+ }
+ }
+}
+
+.add-organisation-error {
+ border-radius: 14px;
+ background: $color-danger-tint;
+ padding: 12px 14px;
+
+ color: $red;
+ font-size: $font-size-14;
+ font-weight: 500;
+}
+
+.add-organisation-modal__footer {
+ margin-top: 8px;
+
+ display: flex;
+ justify-content: flex-end;
+ gap: 10px;
+}
+
+.add-organisation-cancel,
+.add-organisation-submit {
+ height: 42px;
+ padding: 0 18px;
+
+ border: none;
+ border-radius: 14px;
+
+ font-size: $font-size-15;
+ font-weight: 600;
+ cursor: pointer;
+
+ transition: 0.2s ease;
+
+ &:disabled {
+ opacity: 0.6;
+ cursor: default;
+ }
+}
+
+.add-organisation-cancel {
+ background: $color-bg;
+ color: $gray50;
+
+ &:hover {
+ background: $gray20;
+ color: $color-text;
+ }
+}
+
+.add-organisation-submit {
+ background: $blue;
+ color: $color-text-inverse;
+
+ &:hover {
+ box-shadow: 0 8px 20px -8px rgba(var(--color-primary-rgb), 0.8);
+ }
+ &:disabled:hover {
+ box-shadow: none;
+ }
+}
+
+@media (max-width: 900px) {
+ .add-organisation-modal--with-policy {
+ width: min(560px, calc(100vw - 32px));
+ }
+
+ .add-organisation-form--with-policy {
+ display: flex;
+ flex-direction: column;
+ }
+}
diff --git a/frontend/src/pages/EmployeesPage/components/AddOrganisationModal/AddOrganisationModal.tsx b/frontend/src/pages/EmployeesPage/components/AddOrganisationModal/AddOrganisationModal.tsx
new file mode 100644
index 0000000..3715ae0
--- /dev/null
+++ b/frontend/src/pages/EmployeesPage/components/AddOrganisationModal/AddOrganisationModal.tsx
@@ -0,0 +1,442 @@
+import {
+ useCallback,
+ useEffect,
+ useMemo,
+ useRef,
+ useState,
+ type ChangeEvent,
+ type FormEvent,
+} from 'react'
+import * as Dialog from '@radix-ui/react-dialog'
+import { X } from 'lucide-react'
+import { useApolloClient, useMutation } from '@apollo/client/react'
+
+import {
+ CHANGE_ORGANISATION_MUTATION,
+ CREATE_ORGANISATION_MUTATION,
+ CREATE_UPLOAD_ORGANISATION_LOGO_URL_MUTATION,
+ GET_ORGANISATION_QUERY,
+} from '../../../../entities/employee/api/employee.graphql'
+import type {
+ ChangeOrganisationData,
+ ChangeOrganisationVariables,
+ CreateOrganisationData,
+ CreateOrganisationVariables,
+ CreateUploadOrganisationLogoUrlData,
+ CreateUploadOrganisationLogoUrlVariables,
+ GetOrganisationData,
+ GetOrganisationVariables,
+ Organisation,
+ OrganisationPolicy,
+} from '../../../../entities/employee/model/types'
+import { MotionDialogContent } from '../../../../shared/ui/MotionDialog/MotionDialog'
+import {
+ OrganisationPolicyCard,
+ defaultOrganisationPolicyDraft,
+ mapOrganisationPolicyDraftToVariables,
+ mapOrganisationPolicyToDraft,
+ type OrganisationPolicyDraft,
+} from '../../../OrganisationPage/components/OrganisationPolicyCard/OrganisationPolicyCard'
+
+import { AvatarUpload } from '../AvatarUpload/AvatarUpload'
+import { uploadMultipartFile } from '../../lib/uploadMultipartFile'
+
+import './AddOrganisationModal.scss'
+
+type AddOrganisationModalProps = {
+ open: boolean
+ mode?: 'create' | 'edit'
+ organisation?: Organisation | null
+ onOpenChange: (open: boolean) => void
+ onSuccess?: () => void | Promise
+ {roleOptions.map((option) => {
+ const isSelected = option.value === value
+
+ return (
+
+ )
+ })}
+
+
+
+
+
+
+
+
+
+ {isEditMode
+ ? 'Редактировать организацию'
+ : 'Добавить организацию'}
+
+
+
+ {isEditMode
+ ? 'Изменение данных организации'
+ : 'Создание организации для привязки пользователей и устройств'}
+
+
+
+
+
+
+
+
+ {error ? (
+
+
+
+ {error}
+
+ ) : (
+
+ )}
+
+
+
+
+
+
+
+
+
+ Настройка фото
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ setIsCameraOpen(false)}
+ onCapture={handleCameraCapture}
+ />
+
+ )
+}
diff --git a/frontend/src/pages/EmployeesPage/components/EmployeesPagination/EmployeesPagination.scss b/frontend/src/pages/EmployeesPage/components/EmployeesPagination/EmployeesPagination.scss
new file mode 100644
index 0000000..160aeb0
--- /dev/null
+++ b/frontend/src/pages/EmployeesPage/components/EmployeesPagination/EmployeesPagination.scss
@@ -0,0 +1,138 @@
+@use '../../../../shared/styles/variables' as *;
+
+.employees-pagination {
+ position: relative;
+ z-index: 100;
+ flex: 0 0 auto;
+ padding: 12px 0 0;
+
+ display: flex;
+ align-items: center;
+ justify-content: flex-end;
+
+ color: $color-text-muted;
+ font-size: $font-size-16;
+}
+
+.employees-pagination__controls {
+ display: flex;
+ align-items: center;
+ gap: 6px;
+
+ button {
+ min-width: 38px;
+ height: 38px;
+ border: none;
+ border-radius: 10px;
+ background: $gray20;
+
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ color: $gray50;
+ font-size: $font-size-16;
+ font-weight: 500;
+ line-height: 1;
+ cursor: pointer;
+
+ transition: 0.2s ease;
+
+ &[aria-label='Предыдущая страница'],
+ &[aria-label='Следующая страница'] {
+ svg {
+ width: 20px;
+ height: 20px;
+ fill: $transparent;
+ }
+ }
+
+ &:hover {
+ background-color: rgba($color-primary-rgb, 0.1);
+ }
+
+ &.is-active {
+ background: $blue;
+ color: $color-text-inverse;
+ box-shadow: var(--shadow-primary);
+
+ &:disabled {
+ opacity: 1;
+ cursor: default;
+ }
+ }
+
+ &:disabled {
+ opacity: 0.5;
+ cursor: default;
+ }
+ }
+}
+
+.employees-pagination__ellipsis-button {
+ position: relative;
+}
+
+.employees-pagination__ellipsis-dots,
+.employees-pagination__ellipsis-arrow {
+ line-height: 0.5;
+ transition:
+ opacity 0.18s ease,
+ transform 0.18s ease;
+}
+
+.employees-pagination__ellipsis-dots {
+ svg {
+ width: 16px;
+ height: 16px;
+ }
+}
+
+.employees-pagination__ellipsis-arrow {
+ position: absolute;
+ opacity: 0;
+ transform: translateY(2px);
+
+ svg {
+ width: 22px;
+ height: 22px;
+
+ &.prev {
+ transform: rotate(-180deg);
+ }
+ }
+}
+
+.employees-pagination__ellipsis-button:hover {
+ .employees-pagination__ellipsis-dots {
+ opacity: 0;
+ transform: translateY(-2px);
+ }
+
+ .employees-pagination__ellipsis-arrow {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
+
+[data-theme='dark'] {
+ .employees-pagination__controls button {
+ background: $color-surface-muted;
+
+ &:hover:not(:disabled):not(.is-active) {
+ background: $color-surface-hover;
+ color: $color-text-heading;
+ }
+
+ &.is-active {
+ background: $color-primary;
+ color: $color-text-inverse;
+ }
+ }
+}
+
+@include tablet-down {
+ .employees-pagination {
+ justify-content: center;
+ }
+}
diff --git a/frontend/src/pages/EmployeesPage/components/EmployeesPagination/EmployeesPagination.tsx b/frontend/src/pages/EmployeesPage/components/EmployeesPagination/EmployeesPagination.tsx
new file mode 100644
index 0000000..1613a5e
--- /dev/null
+++ b/frontend/src/pages/EmployeesPage/components/EmployeesPagination/EmployeesPagination.tsx
@@ -0,0 +1,183 @@
+import { memo } from 'react'
+
+import './EmployeesPagination.scss'
+
+export type PaginationItem = number | 'prev-ellipsis' | 'next-ellipsis'
+
+type EmployeesPaginationProps = {
+ currentPage: number
+ loading: boolean
+ items: PaginationItem[]
+ hasPrevPage: boolean
+ hasNextPage: boolean
+ onPrev: () => void
+ onNext: () => void
+ onJumpPrev: () => void
+ onJumpNext: () => void
+ onPageChange: (page: number) => void
+}
+
+function ChevronLeftIcon() {
+ return (
+
+ )
+}
+
+function ChevronRightIcon() {
+ return (
+
+ )
+}
+
+function DoubleChevronLeftIcon() {
+ return (
+
+ )
+}
+
+function DoubleChevronRightIcon() {
+ return (
+
+ )
+}
+
+export const EmployeesPagination = memo(function EmployeesPagination({
+ currentPage,
+ loading,
+ items,
+ hasPrevPage,
+ hasNextPage,
+ onPrev,
+ onNext,
+ onJumpPrev,
+ onJumpNext,
+ onPageChange,
+}: EmployeesPaginationProps) {
+ return (
+
+ {avatarUrl ? (
+ 
+ ) : (
+ {initials}
+ )}
+
+
+
+
+
+
+
+
+ {
+ event.preventDefault()
+
+ setIsMenuOpen(false)
+
+ setTimeout(() => {
+ inputRef.current?.click()
+ }, 0)
+ }}
+ >
+
+
+ {allowCamera && (
+ {
+ event.preventDefault()
+
+ setIsMenuOpen(false)
+
+ setTimeout(() => {
+ setIsCameraOpen(true)
+ }, 0)
+ }}
+ >
+
+ )}
+
+
+
+
+
+ {
+ handleFileChange(event.target.files?.[0])
+ event.target.value = ''
+ }}
+ />
+
+ {/*
+ PNG, JPG или GIF
+
*/}
+
+
+
+
+ {hasSelectedFile && (
+
+ )}
+
+
+ {/* {hasSelectedFile && (
+ + Новое фото будет загружено после сохранения. +
+ )} */} + +
+
+ )
+})
diff --git a/frontend/src/pages/EmployeesPage/components/EmployeesTabs/EmployeesTabs.tsx b/frontend/src/pages/EmployeesPage/components/EmployeesTabs/EmployeesTabs.tsx
new file mode 100644
index 0000000..4160672
--- /dev/null
+++ b/frontend/src/pages/EmployeesPage/components/EmployeesTabs/EmployeesTabs.tsx
@@ -0,0 +1,37 @@
+import { memo } from 'react'
+
+import {
+ PageTabs,
+ type PageTabItem,
+} from '../../../../shared/ui/PageTabs/PageTabs'
+
+export type EmployeesSection = 'users' | 'organisations'
+
+type EmployeesTabsProps = {
+ activeSection: EmployeesSection
+ onChange: (section: EmployeesSection) => void
+}
+
+const tabs: Array
+
+
+ {items.map((item, index) => {
+ if (item === 'prev-ellipsis' || item === 'next-ellipsis') {
+ const isPrev = item === 'prev-ellipsis'
+
+ return (
+
+ )
+ }
+
+ const pageIndex = item - 1
+ const isActive = pageIndex === currentPage
+
+ return (
+
+ )
+ })}
+
+
+
+
+
+
+
+ )
+})
diff --git a/frontend/src/pages/EmployeesPage/components/FleetReportScheduleModal/FleetReportScheduleModal.scss b/frontend/src/pages/EmployeesPage/components/FleetReportScheduleModal/FleetReportScheduleModal.scss
new file mode 100644
index 0000000..53d7a43
--- /dev/null
+++ b/frontend/src/pages/EmployeesPage/components/FleetReportScheduleModal/FleetReportScheduleModal.scss
@@ -0,0 +1,644 @@
+@use '../../../../shared/styles/variables' as *;
+
+.fleet-report-modal__overlay {
+ position: fixed;
+ inset: 0;
+ z-index: 110;
+ background: $color-backdrop;
+ backdrop-filter: blur(2px);
+}
+
+.fleet-report-modal {
+ position: fixed;
+ z-index: 120;
+ top: 50%;
+ left: 50%;
+
+ width: min(1040px, calc(100vw - 32px));
+ max-height: calc(100vh - 32px);
+ overflow: auto;
+ padding: 24px;
+ border-radius: 26px;
+ background: $color-surface;
+ box-shadow: $shadow-modal;
+ transform: translate(-50%, -50%);
+}
+
+.fleet-report-modal__header {
+ margin-bottom: 22px;
+
+ display: flex;
+ align-items: flex-start;
+ justify-content: space-between;
+ gap: 16px;
+}
+
+.fleet-report-modal__title {
+ margin: 0;
+ color: $color-text-strong;
+ font-size: $font-size-24;
+ font-weight: 650;
+}
+
+.fleet-report-modal__description {
+ max-width: 720px;
+ margin: 6px 0 0;
+ color: $gray50;
+ font-size: $font-size-15;
+ font-weight: 400;
+ line-height: 1.35;
+}
+
+.fleet-report-modal__close {
+ width: 40px;
+ height: 40px;
+ border: none;
+ border-radius: 12px;
+ background: $color-bg;
+
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+
+ color: $gray50;
+ cursor: pointer;
+ transition: 0.2s ease;
+
+ &:hover {
+ color: $blue;
+ background: $gray20;
+ }
+
+ &:disabled {
+ opacity: 0.6;
+ cursor: default;
+ }
+}
+
+.fleet-report-form {
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
+}
+
+.fleet-report-layout {
+ display: grid;
+ grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.75fr);
+ gap: 16px;
+ align-items: stretch;
+}
+
+.fleet-report-section {
+ min-width: 0;
+ padding: 16px;
+ border: 1px solid $color-border-accent;
+ border-radius: 22px;
+ background: $color-surface-muted;
+
+ display: flex;
+ flex-direction: column;
+ gap: 12px;
+}
+
+.fleet-report-section__header {
+ display: flex;
+ align-items: flex-start;
+ justify-content: space-between;
+ gap: 12px;
+
+ h3 {
+ margin: 0;
+ color: $color-text-strong;
+ font-size: $font-size-16;
+ font-weight: 650;
+ }
+
+ p {
+ margin: 5px 0 0;
+ color: $gray50;
+ font-size: $font-size-13;
+ font-weight: 500;
+ line-height: 1.35;
+ }
+
+ >span {
+ min-width: 34px;
+ height: 28px;
+ padding: 0 9px;
+ border-radius: 999px;
+ background: $blue20;
+ color: $blue;
+
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+
+ font-size: $font-size-14;
+ font-weight: 700;
+ }
+}
+
+.fleet-report-search {
+ height: 42px;
+ padding: 0 12px;
+ border-radius: 14px;
+ background: $color-surface;
+ border: 1px solid $color-border-strong;
+
+ display: flex;
+ align-items: center;
+ gap: 8px;
+
+ color: $gray50;
+ transition:
+ border-color 0.2s ease,
+ box-shadow 0.2s ease;
+
+ input {
+ width: 100%;
+ border: none;
+ outline: none;
+ background: $transparent;
+ color: $color-text-strong;
+ font-size: $font-size-15;
+
+ &::placeholder {
+ color: $gray50;
+ }
+ }
+
+ &:focus-within {
+ border-color: $blue;
+ box-shadow: 0 0 0 3px rgba($color-primary-rgb, 0.12);
+ }
+}
+
+.fleet-report-recipient-actions {
+ display: flex;
+ gap: 8px;
+ flex-wrap: wrap;
+
+ button {
+ min-height: 34px;
+ padding: 0 12px;
+ border: none;
+ border-radius: 12px;
+ background: $color-surface;
+ color: $blue;
+ font-size: $font-size-13;
+ font-weight: 650;
+ cursor: pointer;
+ transition:
+ background-color 0.18s ease,
+ color 0.18s ease;
+
+ &:hover:not(:disabled) {
+ background: $blue20;
+ }
+
+ &:disabled {
+ color: $gray50;
+ cursor: default;
+ opacity: 0.72;
+ }
+ }
+}
+
+.fleet-report-recipient-list {
+ height: 390px;
+ overflow: auto;
+ padding-right: 4px;
+
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+
+ scrollbar-width: thin;
+ scrollbar-color: $gray50 $transparent;
+}
+
+.fleet-report-recipient {
+ min-width: 0;
+ min-height: 62px;
+ padding: 10px;
+ border: 1px solid $transparent;
+ border-radius: 16px;
+ background: $color-surface;
+
+ display: grid;
+ grid-template-columns: 40px minmax(0, 1fr) auto 28px;
+ align-items: center;
+ gap: 10px;
+
+ cursor: pointer;
+ transition:
+ background-color 0.18s ease,
+ border-color 0.18s ease,
+ box-shadow 0.18s ease;
+
+ input {
+ position: absolute;
+ opacity: 0;
+ pointer-events: none;
+ }
+
+ &:hover {
+ border-color: $color-border-accent;
+ box-shadow: 0 10px 22px -18px rgba($color-shadow-rgb, 0.45);
+ }
+
+ &.is-selected {
+ border-color: rgba($color-primary-rgb, 0.24);
+ background: $blue20;
+
+ .fleet-report-recipient__check {
+ opacity: 1;
+ transform: scale(1);
+ }
+ }
+}
+
+.fleet-report-recipient__avatar {
+ width: 40px;
+ height: 40px;
+ overflow: hidden;
+ border-radius: 50%;
+ background:
+ radial-gradient(circle at 30% 20%, rgba($white, 0.1), $transparent 28%),
+ linear-gradient(135deg, $blue, $color-primary-hover);
+ color: $color-text-inverse;
+
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+
+ font-size: $font-size-13;
+ font-weight: 750;
+ letter-spacing: 0.04em;
+
+ img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ }
+}
+
+.fleet-report-recipient__info {
+ min-width: 0;
+
+ display: flex;
+ flex-direction: column;
+ gap: 3px;
+
+ strong,
+ small {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ }
+
+ strong {
+ color: $color-text;
+ font-size: $font-size-15;
+ font-weight: 650;
+ }
+
+ small {
+ color: $gray50;
+ font-size: $font-size-12;
+ font-weight: 500;
+ }
+}
+
+.fleet-report-recipient__role {
+ padding: 6px 9px;
+ border-radius: 999px;
+ background: $color-bg;
+ color: $gray50;
+ font-size: $font-size-12;
+ font-weight: 650;
+ white-space: nowrap;
+}
+
+.fleet-report-recipient__check {
+ width: 28px;
+ height: 28px;
+ border-radius: 10px;
+ background: $blue;
+ color: $color-text-inverse;
+ opacity: 0;
+ transform: scale(0.86);
+
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+
+ transition:
+ opacity 0.18s ease,
+ transform 0.18s ease;
+}
+
+.fleet-report-recipient-state {
+ padding: 24px 12px;
+ color: $gray50;
+ font-size: $font-size-14;
+ font-weight: 550;
+ text-align: center;
+
+ &.is-error {
+ color: $red;
+ }
+}
+
+.fleet-report-settings {
+ display: flex;
+ flex-direction: column;
+ gap: 12px;
+}
+
+.fleet-report-setting {
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+
+ >span {
+ color: $color-text-heading;
+ font-size: $font-size-14;
+ font-weight: 600;
+ }
+}
+
+.fleet-report-format {
+ display: grid;
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+ gap: 10px;
+
+ button {
+ min-width: 0;
+ min-height: 52px;
+ padding: 12px;
+ border: 1px solid $color-border-strong;
+ border-radius: 16px;
+ background: $color-surface;
+ color: $color-text;
+ text-align: left;
+
+ display: grid;
+ grid-template-columns: 28px minmax(0, 1fr);
+ align-items: center;
+ gap: 10px;
+
+ cursor: pointer;
+ transition:
+ border-color 0.18s ease,
+ background-color 0.18s ease,
+ box-shadow 0.18s ease;
+
+ svg {
+ color: $blue;
+ }
+
+ span {
+ min-width: 0;
+ display: flex;
+ flex-direction: column;
+ gap: 3px;
+ }
+
+ b {
+ color: $color-text-strong;
+ font-size: $font-size-15;
+ font-weight: 700;
+ }
+
+ &:hover:not(:disabled),
+ &.is-selected {
+ border-color: rgba($color-primary-rgb, 0.24);
+ background: $blue20;
+ }
+
+ &.is-selected {
+ box-shadow: 0 10px 24px -20px rgba($color-primary-rgb, 0.9);
+ }
+
+ &:disabled {
+ opacity: 0.7;
+ cursor: default;
+ }
+ }
+}
+
+.fleet-report-time {
+ height: 44px;
+ padding: 0 12px;
+ border: 1px solid $color-border-strong;
+ border-radius: 14px;
+ background: $color-surface;
+
+ display: flex;
+ align-items: center;
+ gap: 8px;
+
+ color: $gray50;
+ transition:
+ border-color 0.2s ease,
+ box-shadow 0.2s ease;
+
+ input {
+ width: 100%;
+ height: 100%;
+ border: none;
+ outline: none;
+ background: $transparent;
+ color: $color-text-strong;
+ font: inherit;
+ font-size: $font-size-15;
+ }
+
+ &:focus-within {
+ border-color: $blue;
+ box-shadow: 0 0 0 3px rgba($color-primary-rgb, 0.12);
+ }
+}
+
+.fleet-report-period {
+ min-height: 64px;
+ padding: 12px;
+ border-radius: 16px;
+ background: $color-surface;
+
+ display: grid;
+ grid-template-columns: 36px minmax(0, 1fr);
+ align-items: center;
+ gap: 10px;
+
+ >svg {
+ width: 20px;
+ height: 20px;
+ padding: 8px;
+ border-radius: 12px;
+ color: $blue;
+ background: $blue20;
+ }
+
+ div {
+ min-width: 0;
+ display: flex;
+ flex-direction: column;
+ gap: 3px;
+ }
+
+ span {
+ color: $gray50;
+ font-size: $font-size-12;
+ font-weight: 650;
+ }
+
+ b {
+ color: $color-text-strong;
+ font-size: $font-size-15;
+ font-weight: 700;
+ line-height: 1.25;
+ }
+}
+
+.fleet-report-download {
+ min-height: 44px;
+ padding: 0 14px;
+ border: none;
+ border-radius: 14px;
+ background: $blue20;
+ color: $blue;
+
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ gap: 8px;
+
+ font: inherit;
+ font-size: $font-size-15;
+ font-weight: 700;
+ cursor: pointer;
+ transition:
+ background-color 0.18s ease,
+ box-shadow 0.18s ease,
+ opacity 0.18s ease;
+
+ &:hover:not(:disabled) {
+ background: $color-primary-tint;
+ box-shadow: 0 8px 20px -12px rgba($color-primary-rgb, 0.7);
+ }
+
+ &:disabled {
+ opacity: 0.6;
+ cursor: default;
+ }
+}
+
+.fleet-report-submit-error {
+ padding: 12px 14px;
+ border-radius: 14px;
+ background: $color-danger-bg;
+ color: $red;
+ font-size: $font-size-14;
+ font-weight: 600;
+}
+
+.fleet-report-modal__footer {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 16px;
+
+ >span {
+ color: $gray50;
+ font-size: $font-size-14;
+ font-weight: 600;
+ }
+
+ >div {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ }
+}
+
+.fleet-report-modal__cancel,
+.fleet-report-modal__submit {
+ min-height: 44px;
+ padding: 0 18px;
+ border: none;
+ border-radius: 14px;
+ font-size: $font-size-15;
+ font-weight: 650;
+ cursor: pointer;
+ transition:
+ background-color 0.18s ease,
+ color 0.18s ease,
+ box-shadow 0.18s ease,
+ opacity 0.18s ease;
+}
+
+.fleet-report-modal__cancel {
+ background: $color-bg;
+ color: $gray50;
+
+ &:hover:not(:disabled) {
+ color: $color-text;
+ background: $gray20;
+ }
+}
+
+.fleet-report-modal__submit {
+ background: $blue;
+ color: $color-text-inverse;
+
+ &:hover:not(:disabled) {
+ box-shadow: 0 8px 20px -8px rgba($color-primary-rgb, 0.8);
+ }
+
+ &:disabled {
+ opacity: 0.6;
+ cursor: default;
+ }
+}
+
+@include laptop-down {
+ .fleet-report-layout {
+ grid-template-columns: minmax(0, 1fr);
+ }
+
+ .fleet-report-recipient-list {
+ height: 320px;
+ }
+}
+
+@include tablet-down {
+ .fleet-report-modal {
+ padding: 18px;
+ border-radius: 22px;
+ }
+
+ .fleet-report-format {
+ grid-template-columns: minmax(0, 1fr);
+ }
+
+ .fleet-report-recipient {
+ grid-template-columns: 40px minmax(0, 1fr) 28px;
+ }
+
+ .fleet-report-recipient__role {
+ display: none;
+ }
+
+ .fleet-report-modal__footer {
+ align-items: stretch;
+ flex-direction: column;
+
+ >div {
+ width: 100%;
+ flex-direction: column-reverse;
+ align-items: stretch;
+ }
+ }
+}
diff --git a/frontend/src/pages/EmployeesPage/components/FleetReportScheduleModal/FleetReportScheduleModal.tsx b/frontend/src/pages/EmployeesPage/components/FleetReportScheduleModal/FleetReportScheduleModal.tsx
new file mode 100644
index 0000000..6253953
--- /dev/null
+++ b/frontend/src/pages/EmployeesPage/components/FleetReportScheduleModal/FleetReportScheduleModal.tsx
@@ -0,0 +1,551 @@
+import {
+ useCallback,
+ useEffect,
+ useMemo,
+ useState,
+ type FormEvent,
+} from 'react'
+import * as Dialog from '@radix-ui/react-dialog'
+import {
+ Check,
+ Clock3,
+ Download,
+ FileSpreadsheet,
+ FileText,
+ Search,
+ UsersRound,
+ X,
+} from 'lucide-react'
+
+import { usersService } from '../../../../entities/employee/api/usersService'
+import type { Employee } from '../../../../entities/employee/model/types'
+import {
+ fleetReportSchedulesService,
+} from '../../../../entities/report/api/fleetReportSchedulesService'
+import { fleetReportService } from '../../../../entities/report/api/fleetReportService'
+import type {
+ FleetReportFormat,
+ FleetReportSchedule,
+} from '../../../../entities/report/model/types'
+import { MotionDialogContent } from '../../../../shared/ui/MotionDialog/MotionDialog'
+import {
+ getEmployeeFullName,
+ getEmployeeRoleLabel,
+} from '../../lib/employeeFormatters'
+
+import './FleetReportScheduleModal.scss'
+
+type FleetReportScheduleModalProps = {
+ open: boolean
+ onOpenChange: (open: boolean) => void
+ onSuccess?: (schedule: FleetReportSchedule) => void | Promise
+ {showUserFilters && (
+
+
+
+
+
+
+
+ {roleFilterOptions.map((option) => (
+ onRoleFilterChange?.(option.value)}
+ >
+ {option.label}
+
+ {roleFilter === option.value && (
+
+ )}
+
+ ))}
+
+
+
+ )}
+
+ {showSort && (
+
+
+
+
+
+
+
+ {sortOptions.map((option) => (
+ onSortChange?.(option)}
+ >
+ {option.label}
+
+ {selectedSort.value === option.value && (
+
+ )}
+
+ ))}
+
+
+
+ )}
+
+ {showAddButton && (
+
+ )}
+
+ {showSecondaryAction && secondaryActionText && (
+
+ )}
+
+
+
+
+
+
+
+
+
+ Рассылка дневного отчета
+
+
+
+ Отчет по парку АТТ за предыдущий день будет отправляться выбранным пользователям.
+
+
+
+
+
+
+
+ {isOpen && (
+
+
+
+
+ )}
+
+
+ )
+})
diff --git a/frontend/src/pages/EmployeesPage/components/OrganisationsSection/OrganisationsSection.tsx b/frontend/src/pages/EmployeesPage/components/OrganisationsSection/OrganisationsSection.tsx
new file mode 100644
index 0000000..420c77a
--- /dev/null
+++ b/frontend/src/pages/EmployeesPage/components/OrganisationsSection/OrganisationsSection.tsx
@@ -0,0 +1,518 @@
+import {
+ useCallback,
+ useEffect,
+ useMemo,
+ useState,
+ useRef,
+} from 'react'
+import {
+ useLocation,
+ useNavigate,
+ useSearchParams,
+} from 'react-router-dom'
+import { useMutation, useQuery } from '@apollo/client/react'
+import { m } from 'framer-motion'
+
+import { DELETE_ORGANISATION_MUTATION, GET_ORGANISATIONS_QUERY } from '../../../../entities/employee/api/employee.graphql'
+import type {
+ GetOrganisationsData,
+ GetOrganisationsVariables,
+ Organisation,
+ DeleteOrganisationData,
+ DeleteOrganisationVariables,
+} from '../../../../entities/employee/model/types'
+import {
+ EmployeesToolbar,
+ organisationsSortOptions,
+} from '../EmployeesToolbar/EmployeesToolbar'
+import { EmployeesPagination } from '../EmployeesPagination/EmployeesPagination'
+import { OrganisationsTable } from '../OrganisationsTable/OrganisationsTable'
+import { ConfirmDangerDialog } from '../../../../widgets/ConfirmDangerDialog/ConfirmDangerDialog'
+import { getPaginationItems } from '../../lib/getPaginationItems'
+import {
+ TableSkeleton,
+ type TableSkeletonColumn,
+} from '../../../../shared/ui/TableSkeleton/TableSkeleton'
+import { RevealContent } from '../../../../shared/ui/RevealContent/RevealContent'
+import { pageSwapVariants, uiFadeTransition } from '../../../../shared/lib/motion'
+import { EmptyState } from '../../../../shared/ui/EmptyState/EmptyState'
+import {
+ useDeferredModalPayload,
+} from '../../../../shared/lib/lazyMount'
+import { AddOrganisationModal } from '../AddOrganisationModal/AddOrganisationModal'
+
+import SimpleBar from "simplebar-react";
+import "simplebar-react/dist/simplebar.min.css";
+
+const ORGANISATIONS_SCROLL_KEY = 'employees.organisations.scrollTop'
+
+const organisationsTableSkeletonColumns: TableSkeletonColumn[] = [
+ { width: '50px', headerWidth: '34px' },
+ { variant: 'person', width: '72%', headerWidth: '180px' },
+ { variant: 'actions', headerWidth: '132px' },
+]
+
+export function OrganisationsSection() {
+ const navigate = useNavigate()
+
+ const location = useLocation()
+ const [searchParams, setSearchParams] = useSearchParams()
+ const tableCardRef = useRef
+ {loading && organisations.length === 0 && (
+
+
+ {totalElements > organisations.length && (
+
+ Загрузка организаций...
+
+ )}
+
+ {error && (
+
+ Не удалось загрузить организации
+
+ )}
+
+ {!loading && !error && organisations.length === 0 && (
+
+ Организации не найдены
+
+ )}
+
+ {organisations.map((organisation) => {
+ const organisationId = String(organisation.id)
+ const isSelected = organisationId === value
+
+ return (
+
+ )
+ })}
+
+ Показаны первые {organisations.length} из {totalElements}.
+ Используйте поиск, чтобы найти нужную организацию.
+
+ )}
+
+
+
+
+
+
+
+ {organisationsTotalPages > 1 && (
+
+ Не удалось загрузить организации
+
+ )}
+
+ {!organisationsError && organisations.length === 0 && (
+
+
+
+ {organisation.logoUrl ? (
+ 
+ ) : (
+ {getOrganisationInitials(organisation.name)}
+ )}
+
+
+
+ {organisation.name}
+ {formatCreationDate(organisation.creationDate)}
+
+
+
+
+
+
+ | ID | +Название организации | +Управление | +
|---|
+
+
+
+
+
+
+ {usersTotalPages > 1 && (
+
+ Не удалось загрузить пользователей
+
+ )}
+
+ {!usersError && employees.length === 0 && (
+
+
+
+ {employee.avatarUrl ? (
+ 
+ ) : (
+ {getUserInitials(employee)}
+ )}
+
+
+
+ {getEmployeeFullName(employee) || 'ФИО не указано'}
+ ID: {employee.id}
+
+
+ {employee.email || 'Email не указан'}
+ {login && @{login}}
+
+
+
+
+
+
+ ) : (
+
+ Только просмотр
+
+ )}
+ | ФИО | +Логин / email | +Роль | +Дата создания | +Действия | +
|---|