+
+
-
-
+ setIsSidebarDrawerOpen(true)}
+ />
+
+
+
+
+
+
+ Навигация
+
+
+
+ setIsSidebarDrawerOpen(false)}
+ />
+
+
+
+
+
+
)
-}
\ No newline at end of file
+}
diff --git a/mdm-front/src/app/router/router.tsx b/mdm-front/src/app/router/router.tsx
index f1ba201..5d8a099 100644
--- a/mdm-front/src/app/router/router.tsx
+++ b/mdm-front/src/app/router/router.tsx
@@ -1,12 +1,42 @@
// src/app/router/router.tsx
+import { lazy, Suspense, type ReactNode } from 'react'
import { createBrowserRouter, Navigate } from 'react-router-dom'
import { AppLayout } from '../layouts/AppLayout'
-import { DevicesPage } from '../../pages/DevicesPage/DevicesPage'
-import { DevicePage } from '../../pages/DevicePage/DevicePage'
-import { MapPage } from '../../pages/MapPage/MapPage'
-import { EmployeesPage } from '../../pages/EmployeesPage/EmployeesPage'
-import { OrganisationPage } from '../../pages/OrganisationPage/OrganisationPage'
+
+const DevicesPage = lazy(() =>
+ import('../../pages/DevicesPage/DevicesPage').then((module) => ({
+ default: module.DevicesPage,
+ })),
+)
+
+const DevicePage = lazy(() =>
+ import('../../pages/DevicePage/DevicePage').then((module) => ({
+ default: module.DevicePage,
+ })),
+)
+
+const MapPage = lazy(() =>
+ import('../../pages/MapPage/MapPage').then((module) => ({
+ default: module.MapPage,
+ })),
+)
+
+const EmployeesPage = lazy(() =>
+ import('../../pages/EmployeesPage/EmployeesPage').then((module) => ({
+ default: module.EmployeesPage,
+ })),
+)
+
+const OrganisationPage = lazy(() =>
+ import('../../pages/OrganisationPage/OrganisationPage').then((module) => ({
+ default: module.OrganisationPage,
+ })),
+)
+
+function lazyRoute(element: ReactNode) {
+ return
+
+
-
+
Некорректный ID устройства
- -
-
- Загрузка устройства...
-
-
+
Устройство не найдено
- -
-
- Все устройства
-
+
+ {isAppsView ? (
+
+
+ ) : (
+
+
+
+ )}
+
+ {shouldMountHistoryModal && (
+
+
-
-
- setIsHistoryOpen(true)}
- />
-
-
+
+
-
)
-}
\ No newline at end of file
+}, areDeviceActionsCardPropsEqual)
diff --git a/mdm-front/src/pages/DevicePage/components/DeviceAppsAccordion/DeviceAppsAccordion.scss b/mdm-front/src/pages/DevicePage/components/DeviceAppsAccordion/DeviceAppsAccordion.scss
new file mode 100644
index 0000000..824c67e
--- /dev/null
+++ b/mdm-front/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/mdm-front/src/pages/DevicePage/components/DeviceAppsAccordion/DeviceAppsAccordion.tsx b/mdm-front/src/pages/DevicePage/components/DeviceAppsAccordion/DeviceAppsAccordion.tsx
new file mode 100644
index 0000000..75266db
--- /dev/null
+++ b/mdm-front/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Действия
+Управление
-
+
+ `
+ },
+ },
+
+ 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 && (
+
+
+ `
+ }),
+ ].join('')
const temperatureRow =
temperatureValue !== null
? `
+
+
+
+
+
+ ${formatTooltipDate(event.date)}
+
+
-
+
-
+
${temperatureValue}°C
-
+
-
+
${batteryValue}%
+
+ `
+ })
+ .join('')
+
+ const appsBlock = appRowsHtml
+ ? `
+
+
+ ${shortName.slice(0, 1).toUpperCase()}
+
+
+
+
+
+
+ ${escapeHtml(appState.label)} · ${formatDuration(activeDurationUntil)} / ${activePercentUntil}%
+
+
+
+ `
+ : ''
+
return `
+ Приложения к этому моменту
+
+
+ ${appRowsHtml}
+
- ) {
+ return (
+ ) {
+ return ) {
+ return
+
+ )
+}
diff --git a/mdm-front/src/pages/DevicePage/components/DevicePermissionsCard/DevicePermissionsCard.scss b/mdm-front/src/pages/DevicePage/components/DevicePermissionsCard/DevicePermissionsCard.scss
index 1066ad5..1090b45 100644
--- a/mdm-front/src/pages/DevicePage/components/DevicePermissionsCard/DevicePermissionsCard.scss
+++ b/mdm-front/src/pages/DevicePage/components/DevicePermissionsCard/DevicePermissionsCard.scss
@@ -1,21 +1,358 @@
@use '../../../../shared/styles/variables' as *;
+.device-permissions {
+ justify-content: space-between;
+}
+
+.device-permissions__header {
+ position: relative;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 12px;
+ margin-bottom: 12px;
+ padding-bottom: 4px;
+ border-bottom: 1px solid $gray20;
+
+ h3 {
+ line-height: 1;
+ margin: 0;
+ text-align: left;
+ color: $color-text-heading;
+ font-size: $font-size-18;
+ font-weight: 600;
+ }
+}
+
+.device-permissions__title {
+ position: relative;
+ display: inline-flex;
+ align-items: center;
+ gap: 7px;
+}
+
+.device-permissions__help {
+ position: relative;
+ width: 18px;
+ height: 18px;
+
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+
+ color: $color-text-muted;
+ cursor: help;
+ outline: none;
+ transition: color 0.18s ease;
+
+ svg {
+ width: 16px;
+ height: 16px;
+ stroke-width: 2.2;
+ transition: .2s ease;
+ }
+
+ &:hover,
+ &:focus-visible {
+ color: $blue;
+ }
+
+ &:hover .device-permissions__help-tooltip,
+ &:focus-visible .device-permissions__help-tooltip {
+ opacity: 1;
+ visibility: visible;
+ transform: translateY(8px);
+ }
+}
+
+.device-permissions__help-tooltip {
+ position: absolute;
+ z-index: 30;
+ top: 100%;
+ left: -34px;
+
+ width: 400px;
+ padding: 11px;
+ border-radius: 12px;
+ //background: rgba($color-surface-rgb, 0.94);
+ backdrop-filter: blur(18px);
+ box-shadow:
+ 0 14px 30px rgba($color-shadow-rgb, 0.16),
+ inset 0 0 0 1px rgba($color-primary-rgb, 0.08);
+
+ display: flex;
+ flex-direction: column;
+ gap: 12px;
+
+ opacity: 0;
+ visibility: hidden;
+ pointer-events: none;
+ transform: translateY(2px);
+ transition:
+ opacity 0.18s ease,
+ visibility 0.18s ease,
+ transform 0.18s ease;
+
+ &::before {
+ content: '';
+ position: absolute;
+ left: 38px;
+ bottom: 100%;
+ width: 9px;
+ height: 9px;
+ background: rgba($color-surface-rgb, 0.94);
+ box-shadow: -1px -1px 0 rgba($color-primary-rgb, 0.08);
+ transform: translateY(5px) rotate(45deg);
+ }
+}
+
+.device-permissions__help-row {
+ display: grid;
+ grid-template-columns: 22px 1fr;
+ gap: 9px;
+ align-items: center;
+
+ >svg {
+ margin-top: 1px;
+ width: 20px;
+ height: 20px;
+ color: $blue;
+ }
+
+ span {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ text-align: left;
+ gap: 2px;
+ }
+
+ b {
+ color: $color-text-heading;
+ font-size: $font-size-14;
+ font-weight: 700;
+ line-height: 1.2;
+ }
+
+ small {
+ color: $color-text-muted;
+ font-size: $font-size-13;
+ font-weight: 500;
+ line-height: 1.28;
+ }
+}
+
+.device-permissions__header-actions {
+ position: relative;
+ width: 82px;
+ height: 36px;
+ flex: 0 0 82px;
+}
+
+.device-permissions__icon-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+
+ width: 34px;
+ height: 34px;
+ padding: 0;
+ border: none;
+ border-radius: 12px;
+ background: $color-bg;
+
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+
+ color: $gray50;
+ cursor: pointer;
+ transition:
+ background-color 0.18s ease,
+ color 0.18s ease,
+ opacity 0.18s ease,
+ transform 0.18s ease,
+ box-shadow 0.18s ease;
+
+ &:hover:not(:disabled) {
+ background: $gray20;
+ color: $color-text;
+ //transform: scale(1.05);
+ }
+
+ &:disabled {
+ opacity: 0.45;
+ cursor: default;
+ }
+}
+
+.device-permissions__icon-btn--edit {
+ z-index: 2;
+ background: $blue20;
+ color: $blue;
+
+ &:hover:not(:disabled) {
+ background: $blue;
+ color: $color-text-inverse;
+ box-shadow: 0 8px 20px rgba($color-primary-rgb, 0.18);
+ }
+}
+
+.device-permissions__icon-btn--reset {
+ z-index: 1;
+ opacity: 0;
+ pointer-events: none;
+ transform: translateX(0) scale(0.92);
+ transition:
+ background-color 0.18s ease,
+ color 0.18s ease,
+ opacity 0.18s ease,
+ transform 0.28s cubic-bezier(0.34, 1.42, 0.64, 1);
+}
+
+.device-permissions.is-editing {
+ .device-permissions__icon-btn--reset {
+ opacity: 1;
+ pointer-events: auto;
+ transform: translateX(-46px) scale(1);
+
+ &:disabled {
+ opacity: 0.45;
+ pointer-events: none;
+ }
+ }
+}
+
+.device-permissions:not(.is-policy-editing) {
+ .device-permission {
+ opacity: 0.72;
+ }
+
+ .device-permission__switch {
+ cursor: not-allowed;
+ }
+}
+
+.device-permissions__list {
+ display: flex;
+ flex-direction: column;
+}
+
+.device-permission__controls {
+ position: relative;
+ display: inline-flex;
+ align-items: center;
+ gap: 8px;
+ flex: 0 0 auto;
+}
+
+.device-permission__policy-lock {
+ position: relative;
+ z-index: 3;
+ width: 34px;
+ height: 34px;
+ flex: 0 0 34px;
+ border-radius: 9px;
+ background: $color-surface-hover;
+
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+
+ color: $color-text-muted;
+ cursor: help;
+ outline: none;
+ transition:
+ background-color 0.18s ease,
+ color 0.18s ease,
+ transform 0.18s ease;
+
+ svg {
+ width: 18px !important;
+ height: 18px !important;
+ padding: 0 !important;
+ border-radius: 0 !important;
+ background: $transparent !important;
+ color: currentColor;
+ stroke-width: 2.35;
+ }
+
+ &:hover,
+ &:focus-visible {
+ z-index: 120;
+ color: $blue;
+ background: $blue20;
+ transform: translateY(-1px);
+ }
+
+ &:hover .device-permission__policy-lock-tooltip,
+ &:focus-visible .device-permission__policy-lock-tooltip {
+ opacity: 1;
+ visibility: visible;
+ transform: translate(-50%, -8px);
+ }
+}
+
+.device-permission__policy-lock-tooltip {
+ position: absolute;
+ z-index: 110;
+ left: 50%;
+ bottom: calc(100% + 4px);
+
+ width: 260px;
+ padding: 9px 11px;
+ border-radius: 10px;
+ //background: rgba($color-surface-rgb, 0.94);
+ backdrop-filter: blur(18px);
+ box-shadow:
+ 0 12px 28px rgba($color-shadow-rgb, 0.14),
+ inset 0 0 0 1px rgba($color-primary-rgb, 0.08);
+
+ color: $color-text-heading;
+ font-size: $font-size-13;
+ font-weight: 500;
+ line-height: 1.32;
+ text-align: left;
+
+ opacity: 0;
+ visibility: hidden;
+ pointer-events: none;
+ transform: translate(-50%, -2px);
+ transition:
+ opacity 0.18s ease,
+ visibility 0.18s ease,
+ transform 0.18s ease;
+
+ &::after {
+ content: '';
+ position: absolute;
+ top: 100%;
+ left: 50%;
+ width: 9px;
+ height: 9px;
+ background: rgba($color-surface-rgb, 0.94);
+ box-shadow: 1px 1px 0 rgba($color-primary-rgb, 0.08);
+ transform: translate(-50%, -5px) rotate(45deg);
+ }
+}
+
.device-permission__switch {
position: relative;
- width: 48px;
- height: 24px;
- flex: 0 0 48px;
- padding: 0;
+ width: 118px;
+ height: 28px;
+ flex: 0 0 118px;
+ padding: 3px;
border: none;
outline: none;
- display: inline-flex;
- align-items: center;
+ display: grid;
+ grid-template-columns: repeat(3, minmax(0, 1fr));
+ align-items: stretch;
border-radius: 999px;
- background: $gray20;
- box-shadow: inset 0 0 0 1px rgba($gray50, 0.08);
+ background: $color-bg;
+ box-shadow: inset 0 0 0 1px rgba($gray50-rgb, 0.08);
cursor: pointer;
user-select: none;
@@ -25,19 +362,29 @@
box-shadow 0.28s ease,
transform 0.18s ease;
- > span {
+ &--component {
+ width: 78px;
+ flex-basis: 78px;
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+
+ .device-permission__switch-thumb {
+ width: calc((100% - 6px) / 2) !important;
+ }
+ }
+
+ .device-permission__switch-thumb {
position: absolute;
top: 3px;
left: 3px;
- width: 26px;
- height: 18px;
+ width: calc((100% - 6px) / 3);
+ height: calc(100% - 6px);
border-radius: 100px;
- background: #ffffff;
+ background: $color-surface;
box-shadow:
- 0 2px 5px rgba(15, 23, 42, 0.18),
- 0 1px 1px rgba(15, 23, 42, 0.08);
+ 0 2px 5px rgba($color-shadow-rgb, 0.18),
+ 0 1px 1px rgba($color-shadow-rgb, 0.08);
transition:
transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1),
@@ -45,40 +392,124 @@
width 0.18s ease;
}
- &.is-enabled {
- background: $blue;
- box-shadow: inset 0 0 0 1px rgba($blue, 0.12);
+ .device-permission__switch-option {
+ position: relative;
+ z-index: 1;
- > span {
- transform: translateX(16px);
+ min-width: 0;
+ padding: 0;
+ border: none;
+ background: $transparent;
+
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+
+ color: $gray50;
+ cursor: pointer;
+ outline: none;
+ -webkit-tap-highlight-color: $transparent;
+
+ &:focus-visible {
+ border-radius: 999px;
+ //box-shadow: 0 0 0 2px rgba($color-primary-rgb, 0.22);
+ }
+ }
+
+ .device-permission__switch-option[aria-disabled='true'] {
+ cursor: not-allowed;
+ }
+
+ .device-permission__switch-label {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+
+ transition:
+ color 0.2s ease,
+ opacity 0.2s ease;
+
+ svg {
+ width: 14px;
+ height: 14px;
+ stroke-width: 2.35;
+ background-color: transparent;
+ }
+ }
+
+ &.is-unspecified {
+ box-shadow: inset 0 0 0 1px rgba($color-primary-rgb, 0.1);
+
+ .device-permission__switch-thumb {
+ transform: translateX(100%);
+ background: $blue20;
box-shadow:
- 0 3px 7px rgba(3, 29, 154, 0.24),
- 0 1px 1px rgba(15, 23, 42, 0.08);
+ 0 3px 7px -4px rgba($color-primary-rgb),
+ 0 1px 1px rgba($color-shadow-rgb, 0.08);
+ }
+
+ .device-permission__switch-option.is-active .device-permission__switch-label {
+ color: $blue;
}
}
- &:hover {
- box-shadow:
- inset 0 0 0 1px rgba($gray50, 0.12),
- 0 4px 10px rgba(15, 23, 42, 0.06);
+ &.is-enabled,
+ &.is-allowed {
+ background: rgba($color-primary-rgb, 0.1);
+ box-shadow: inset 0 0 0 1px rgba($color-primary-rgb, 0.12);
+
+ .device-permission__switch-thumb {
+ background: $blue;
+ box-shadow:
+ 0 3px 7px rgba($color-primary-rgb, 0.24),
+ 0 1px 1px rgba($color-shadow-rgb, 0.08);
+ }
+
+ .device-permission__switch-option.is-active .device-permission__switch-label {
+ color: $color-text-inverse;
+ svg{
+ color: $white;
+ }
+ }
}
- &:active {
+ &.is-enabled {
+ .device-permission__switch-thumb {
+ transform: translateX(200%);
+ }
+ }
+
+ &.is-allowed {
+ .device-permission__switch-thumb {
+ transform: translateX(100%);
+ }
+ }
+
+ &.is-disabled,
+ &.is-disallowed {
+ .device-permission__switch-option.is-active .device-permission__switch-label {
+ color: $color-text;
+ }
+ }
+
+ &:hover:not(.is-disabled) {
+ //box-shadow:
+ //inset 0 0 0 1px rgba($gray50-rgb, 0.12),
+ //0 4px 10px rgba($color-shadow-rgb, 0.06);
+ }
+
+ &:active:not(.is-disabled) {
transform: scale(0.96);
-
- > span {
- width: 23px;
- }
}
- &.is-enabled:active > span {
- transform: translateX(17px);
- }
-
- &:focus-visible {
+ &:focus-within {
box-shadow:
- 0 0 0 3px rgba($blue, 0.18),
- inset 0 0 0 1px rgba($blue, 0.18);
+ //0 0 0 3px rgba($color-primary-rgb, 0.18),
+ inset 0 0 0 1px rgba($color-primary-rgb, 0.18);
+ }
+
+ &.is-disabled {
+ cursor: not-allowed;
}
}
@@ -87,19 +518,91 @@
opacity 0.2s ease,
filter 0.2s ease;
- &.is-disabled {
- opacity: 0.45;
+ &.is-policy-locked {
cursor: not-allowed;
- svg,
- span,
- button {
- pointer-events: none;
+ >svg,
+ .device-permission__label>span:first-child,
+ .device-permission__switch {
+ opacity: 0.52;
}
.device-permission__switch {
cursor: not-allowed;
- box-shadow: inset 0 0 0 1px rgba($gray50, 0.08);
+ box-shadow: inset 0 0 0 1px rgba($gray50-rgb, 0.08);
}
}
-}
\ No newline at end of file
+}
+
+.device-permissions:not(.is-policy-editing) {
+ .device-permission.is-policy-locked {
+ opacity: 1;
+ }
+}
+
+.device-permissions__error {
+ margin-top: 10px;
+ padding: 6px 8px;
+ border-radius: 9px;
+ background: rgba($color-danger-rgb, 0.1);
+
+ color: $red;
+ font-size: $font-size-13;
+ font-weight: 600;
+ line-height: 1.25;
+ text-align: left;
+}
+
+[data-theme='dark'] {
+ .device-permission__switch:not(.is-enabled):not(.is-allowed):not(.is-unspecified) {
+ svg {
+ color: $blue !important;
+ stroke-width: 3px;
+
+ path {
+ box-shadow: 0 0 1px 0px $blue;
+ }
+ }
+
+ .device-permission__switch-thumb {
+ background: $white;
+ }
+ }
+
+ .device-permission__switch {
+
+ &.is-disabled,
+ &.is-disallowed {
+ .device-permission__switch-option.is-active .device-permission__switch-label {
+ color: $neutral-900;
+ }
+ }
+
+ &:hover:not(.is-disabled) {
+ //box-shadow:
+ //inset 0 0 0 1px rgba($gray50-rgb, 0.16),
+ //0 4px 10px rgba($color-shadow-rgb, 0.08);
+ }
+ }
+
+ .device-permissions__icon-btn--reset {
+ background: $color-surface-hover;
+ color: $color-text-muted;
+ }
+
+ .device-permissions__icon-btn:not(.device-permissions__icon-btn--edit):hover:not(:disabled) {
+ background: $color-surface-hover;
+ color: $color-text-heading;
+ }
+
+ .device-permissions__icon-btn--reset:hover:not(:disabled) {
+ background: $color-surface-active;
+ color: $color-text-heading;
+ }
+
+ .device-permissions__icon-btn--edit:hover:not(:disabled) {
+ background: $blue;
+ color: $color-text-inverse;
+ box-shadow: 0 8px 20px rgba($color-primary-rgb, 0.18);
+ }
+}
diff --git a/mdm-front/src/pages/DevicePage/components/DevicePermissionsCard/DevicePermissionsCard.tsx b/mdm-front/src/pages/DevicePage/components/DevicePermissionsCard/DevicePermissionsCard.tsx
index f48dc15..a7ffd64 100644
--- a/mdm-front/src/pages/DevicePage/components/DevicePermissionsCard/DevicePermissionsCard.tsx
+++ b/mdm-front/src/pages/DevicePage/components/DevicePermissionsCard/DevicePermissionsCard.tsx
@@ -1,5 +1,15 @@
-import { useEffect, useMemo, useState, type ReactNode } from 'react'
+import { memo, useEffect, useMemo, useState, type ReactNode } from 'react'
import { useMutation } from '@apollo/client/react'
+import {
+ Check,
+ CircleHelp,
+ Lock,
+ Pencil,
+ Power,
+ PowerOff,
+ Smartphone,
+ X,
+} from 'lucide-react'
import type { Device } from '../../types'
import {
@@ -8,186 +18,573 @@ import {
import type {
ChangePhonePolicyData,
ChangePhonePolicyVariables,
+ ComponentUseOption,
+ DevicePolicy,
+ GroupUsePolicy,
+ ServiceUseOption,
} from '../../../../entities/device/model/types'
+import {
+ normalizeComponentUseOption,
+ normalizeServiceUseOption,
+} from '../../../../entities/device/lib/phonePolicy'
-import { WifiIcon } from '../../../../assets/icons/Wifi'
import { BluetoothIcon } from '../../../../assets/icons/Bluetooth'
-import { GpsIcon } from '../../../../assets/icons/Gps'
import { CameraIcon } from '../../../../assets/icons/Camera'
+import { GpsIcon } from '../../../../assets/icons/Gps'
import { SimIcon } from '../../../../assets/icons/Sim'
-import { VolumeIcon } from '../../../../assets/icons/Volume'
+import {
+ Notification,
+ type NotificationVariant,
+} from '../../../../widgets/Notification/Notification'
import './DevicePermissionsCard.scss'
type DevicePermissionsCardProps = {
device: Device
+ onEditingChange?: (isEditing: boolean) => void
+ onRefetchPolicy?: () => Promise
}
-type DevicePolicyKey = 'wifi' | 'bluetooth' | 'gps' | 'camera' | 'sim' | 'speaker'
+type DevicePolicyKey = 'bluetooth' | 'gps' | 'camera' | 'sim'
+type ServicePolicyKey = Exclude
+type PolicyKind = 'service' | 'component'
+type PolicyValue = ServiceUseOption | ComponentUseOption
+type OrganisationPolicyEditableKey =
+ | 'bluetoothEditable'
+ | 'gpsEditable'
+ | 'cameraEditable'
+ | 'simEditable'
-type DevicePolicyState = Record
+type DevicePolicyState = {
+ bluetooth: ServiceUseOption
+ gps: ServiceUseOption
+ camera: ComponentUseOption
+ sim: ServiceUseOption
+ locked: boolean
+}
type PermissionItemConfig = {
key: DevicePolicyKey
+ editableKey: OrganisationPolicyEditableKey
+ kind: PolicyKind
icon: ReactNode
label: string
- disabled?: boolean
+}
+
+type PolicyNotification = {
+ id: number
+ variant: NotificationVariant
+ title: string
+ description?: string
+} | null
+
+const SERVICE_POLICY_OPTION_ORDER: ServiceUseOption[] = [
+ 'Disabled',
+ 'Unspecified',
+ 'Enabled',
+]
+const COMPONENT_POLICY_OPTION_ORDER: ComponentUseOption[] = [
+ 'Disallowed',
+ 'Allowed',
+]
+
+const policyOptionFullLabels: Record = {
+ Disabled: 'Выключено',
+ Unspecified: 'Свободно',
+ Enabled: 'Включено',
+ Allowed: 'Включено',
+ Disallowed: 'Выключено',
+}
+
+const policyOptionDescriptions: Record = {
+ Disabled: 'Опция отключена политикой устройства.',
+ Unspecified: 'Политика устройства не фиксирует значение. Можно менять на смартфоне.',
+ Enabled: 'Опция включена политикой устройства.',
+ Allowed: 'Компонент разрешен политикой устройства.',
+ Disallowed: 'Компонент запрещен политикой устройства.',
}
const permissionItems: PermissionItemConfig[] = [
- {
- key: 'wifi',
- icon: {
+ return {
+ bluetooth: policy.bluetooth,
+ camera: policy.camera,
+ GPS: policy.gps,
+ sim: policy.sim,
+ locked: policy.locked,
+ }
+}
+
+function isPolicyChanged(
+ current: DevicePolicyState,
+ saved: DevicePolicyState,
+) {
+ return (
+ current.bluetooth !== saved.bluetooth ||
+ current.gps !== saved.gps ||
+ current.camera !== saved.camera ||
+ current.sim !== saved.sim
+ )
+}
+
+function areDevicePermissionsCardPropsEqual(
+ prev: DevicePermissionsCardProps,
+ next: DevicePermissionsCardProps,
+) {
+ const prevPolicy = prev.device.policy
+ const nextPolicy = next.device.policy
+ const prevPermissions = prev.device.permissions
+ const nextPermissions = next.device.permissions
+ const prevOrganisationPolicy = prev.device.organisationPolicy
+ const nextOrganisationPolicy = next.device.organisationPolicy
+
+ return (
+ prev.onEditingChange === next.onEditingChange &&
+ prev.onRefetchPolicy === next.onRefetchPolicy &&
+ prev.device.id === next.device.id &&
+ prevPolicy?.bluetooth === nextPolicy?.bluetooth &&
+ prevPolicy?.camera === nextPolicy?.camera &&
+ prevPolicy?.GPS === nextPolicy?.GPS &&
+ prevPolicy?.sim === nextPolicy?.sim &&
+ prevPolicy?.locked === nextPolicy?.locked &&
+ prevPermissions?.bluetooth === nextPermissions?.bluetooth &&
+ prevPermissions?.camera === nextPermissions?.camera &&
+ prevPermissions?.gps === nextPermissions?.gps &&
+ prevPermissions?.sim === nextPermissions?.sim &&
+ prevPermissions?.locked === nextPermissions?.locked &&
+ prevOrganisationPolicy?.bluetoothEditable ===
+ nextOrganisationPolicy?.bluetoothEditable &&
+ prevOrganisationPolicy?.cameraEditable ===
+ nextOrganisationPolicy?.cameraEditable &&
+ prevOrganisationPolicy?.gpsEditable ===
+ nextOrganisationPolicy?.gpsEditable &&
+ prevOrganisationPolicy?.simEditable === nextOrganisationPolicy?.simEditable
+ )
+}
+
+export const DevicePermissionsCard = memo(function DevicePermissionsCard({
+ device,
+ onEditingChange,
+ onRefetchPolicy,
+}: DevicePermissionsCardProps) {
const initialPolicy = useMemo(() => {
return mapDevicePermissionsToState(device)
}, [device])
const [policyState, setPolicyState] = useState(initialPolicy)
- const [savingKey, setSavingKey] = useState(null)
+ const [savedPolicyState, setSavedPolicyState] =
+ useState(initialPolicy)
+ const [isSaving, setIsSaving] = useState(false)
+ const [isEditing, setIsEditing] = useState(false)
const [saveError, setSaveError] = useState(false)
+ const [notification, setNotification] =
+ useState(null)
const [changePhonePolicy] = useMutation<
ChangePhonePolicyData,
ChangePhonePolicyVariables
>(CHANGE_PHONE_POLICY_MUTATION)
+ const hasChanges = isPolicyChanged(policyState, savedPolicyState)
+ const hasHeaderActionsOpen = isEditing || hasChanges
+
useEffect(() => {
+ if (isEditing || isSaving) return
+
setPolicyState(initialPolicy)
- }, [initialPolicy])
+ setSavedPolicyState(initialPolicy)
+ setSaveError(false)
+ setIsEditing(false)
+ }, [initialPolicy, isEditing, isSaving])
- async function handleToggle(key: DevicePolicyKey, disabled?: boolean) {
- if (disabled || savingKey) return
+ useEffect(() => {
+ onEditingChange?.(isEditing)
- const previousPolicy = policyState
- const nextPolicy = {
- ...policyState,
- [key]: !policyState[key],
+ return () => {
+ if (isEditing) {
+ onEditingChange?.(false)
+ }
+ }
+ }, [isEditing, onEditingChange])
+
+ function showNotification(
+ variant: NotificationVariant,
+ title: string,
+ description?: string,
+ ) {
+ setNotification({
+ id: Date.now(),
+ variant,
+ title,
+ description,
+ })
+ }
+
+ function handlePolicyOptionChange(
+ item: PermissionItemConfig,
+ option: PolicyValue,
+ disabled?: boolean,
+ ) {
+ if (disabled || !isEditing || isSaving) return
+
+ setPolicyState((currentPolicy) => {
+ if (item.kind === 'component') {
+ if (!COMPONENT_POLICY_OPTION_ORDER.includes(option as ComponentUseOption)) {
+ return currentPolicy
+ }
+
+ return {
+ ...currentPolicy,
+ camera: option as ComponentUseOption,
+ }
+ }
+
+ const key = getServicePolicyKey(item.key)
+
+ if (
+ !key ||
+ !SERVICE_POLICY_OPTION_ORDER.includes(option as ServiceUseOption)
+ ) {
+ return currentPolicy
+ }
+
+ return {
+ ...currentPolicy,
+ [key]: option as ServiceUseOption,
+ }
+ })
+ setSaveError(false)
+ }
+
+ function handleReset() {
+ if ((!isEditing && !hasChanges) || isSaving) return
+
+ setPolicyState(savedPolicyState)
+ setSaveError(false)
+ setIsEditing(false)
+ }
+
+ function handleEditClick() {
+ setIsEditing(true)
+ }
+
+ async function handleConfirmClick() {
+ if (isSaving) return
+
+ if (!hasChanges) {
+ setIsEditing(false)
+ setSaveError(false)
+ return
}
- setPolicyState(nextPolicy)
- setSavingKey(key)
+ await handleSave()
+ }
+
+ async function handleSave() {
+ if (!hasChanges || isSaving) return
+
+ const requestedPolicy = policyState
+
+ setIsSaving(true)
setSaveError(false)
try {
- await changePhonePolicy({
+ const result = await changePhonePolicy({
variables: {
id: String(device.id),
- ...mapStateToMutationVariables(nextPolicy),
+ ...mapStateToMutationVariables(requestedPolicy),
},
})
+
+ const changedApiPolicy = result.data?.changePhonePolicy
+
+ if (!changedApiPolicy) {
+ throw new Error('Phone policy was not saved')
+ }
+
+ const refreshedApiPolicy = await onRefetchPolicy?.()
+ const refreshedPolicy = mapApiPolicyToState(
+ refreshedApiPolicy ?? changedApiPolicy,
+ requestedPolicy,
+ )
+
+ setPolicyState(refreshedPolicy)
+ setSavedPolicyState(refreshedPolicy)
+
+ if (isPolicyChanged(requestedPolicy, refreshedPolicy)) {
+ setSaveError(true)
+ showNotification(
+ 'error',
+ 'Политика не изменилась',
+ 'Сервер ответил без ошибки, но после повторной загрузки вернулась прежняя политика.',
+ )
+ return
+ }
+
+ setIsEditing(false)
+ showNotification('success', 'Политика устройства сохранена')
} catch {
- setPolicyState(previousPolicy)
setSaveError(true)
+ showNotification(
+ 'error',
+ 'Не удалось сохранить политику устройства',
+ 'Изменения остались в черновике. Попробуйте сохранить еще раз.',
+ )
} finally {
- setSavingKey(null)
+ setIsSaving(false)
}
}
return (
-
)
-}
\ No newline at end of file
+}, areStatsCardsPropsEqual)
diff --git a/mdm-front/src/pages/DevicePage/components/TimelineZoom/TimelineZoom.scss b/mdm-front/src/pages/DevicePage/components/TimelineZoom/TimelineZoom.scss
new file mode 100644
index 0000000..bbff9b0
--- /dev/null
+++ b/mdm-front/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/mdm-front/src/pages/DevicePage/components/TimelineZoom/TimelineZoom.tsx b/mdm-front/src/pages/DevicePage/components/TimelineZoom/TimelineZoom.tsx
new file mode 100644
index 0000000..59cbf87
--- /dev/null
+++ b/mdm-front/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
+
`
},
@@ -466,15 +1438,15 @@ export function DeviceHistoryChart({
axisPointer: {
link: [
{
- xAxisIndex: [0, 1, 2],
+ xAxisIndex: [0, 1, 2, 3],
},
],
},
- dataZoom: [
+ /* dataZoom: [
{
type: 'slider',
- xAxisIndex: [0, 1, 2],
+ xAxisIndex: [0, 1, 2, 3],
top: 0,
height: 28,
@@ -501,7 +1473,7 @@ export function DeviceHistoryChart({
moveHandleSize: 0,
textStyle: {
- color: '#738098',
+ color: chartColors.axisLabel,
fontSize: 12,
fontFamily: FONT_FAMILY,
},
@@ -509,14 +1481,8 @@ export function DeviceHistoryChart({
labelFormatter: (value: number) => {
return formatTooltipDate(value)
},
- },
- {
- type: 'inside',
- xAxisIndex: [0, 1, 2],
- start: 0,
- end: 100,
- },
- ],
+ }
+ ], */
grid: [
{
@@ -540,23 +1506,30 @@ export function DeviceHistoryChart({
top: 750,
height: 150,
},
+ {
+ id: 'apps',
+ left: 270,
+ right: 90,
+ top: APP_GRID_TOP,
+ height: appGridHeight,
+ },
],
xAxis: [
{
type: 'time',
gridIndex: 0,
- min: periodStart,
- max: periodEnd,
+ min: visibleStart,
+ max: visibleEnd,
axisLabel: {
- color: '#738098',
+ color: chartColors.axisLabel,
fontSize: 12,
fontFamily: FONT_FAMILY,
hideOverlap: true,
},
axisLine: {
lineStyle: {
- color: '#dbe2ee',
+ color: chartColors.axisLine,
},
},
axisTick: {
@@ -565,24 +1538,24 @@ export function DeviceHistoryChart({
splitLine: {
show: true,
lineStyle: {
- color: '#edf0f5',
+ color: chartColors.splitLine,
},
},
},
{
type: 'time',
gridIndex: 1,
- min: periodStart,
- max: periodEnd,
+ min: visibleStart,
+ max: visibleEnd,
axisLabel: {
- color: '#738098',
+ color: chartColors.axisLabel,
fontSize: 12,
fontFamily: FONT_FAMILY,
hideOverlap: true,
},
axisLine: {
lineStyle: {
- color: '#dbe2ee',
+ color: chartColors.axisLine,
},
},
axisTick: {
@@ -591,24 +1564,24 @@ export function DeviceHistoryChart({
splitLine: {
show: true,
lineStyle: {
- color: '#edf0f5',
+ color: chartColors.splitLine,
},
},
},
{
type: 'time',
gridIndex: 2,
- min: periodStart,
- max: periodEnd,
+ min: visibleStart,
+ max: visibleEnd,
axisLabel: {
- color: '#738098',
+ color: chartColors.axisLabel,
fontSize: 12,
fontFamily: FONT_FAMILY,
hideOverlap: true,
},
axisLine: {
lineStyle: {
- color: '#dbe2ee',
+ color: chartColors.axisLine,
},
},
axisTick: {
@@ -617,7 +1590,33 @@ export function DeviceHistoryChart({
splitLine: {
show: true,
lineStyle: {
- color: '#edf0f5',
+ 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,
},
},
},
@@ -641,7 +1640,7 @@ export function DeviceHistoryChart({
splitLine: {
show: true,
lineStyle: {
- color: '#edf0f5',
+ color: chartColors.splitLine,
},
},
},
@@ -654,7 +1653,7 @@ export function DeviceHistoryChart({
position: 'right',
axisLabel: {
formatter: '{value}°C',
- color: '#738098',
+ color: chartColors.axisLabel,
fontSize: 12,
fontFamily: FONT_FAMILY,
},
@@ -667,7 +1666,7 @@ export function DeviceHistoryChart({
splitLine: {
show: true,
lineStyle: {
- color: '#edf0f5',
+ color: chartColors.splitLine,
},
},
},
@@ -680,7 +1679,7 @@ export function DeviceHistoryChart({
position: 'right',
axisLabel: {
formatter: '{value}%',
- color: '#738098',
+ color: chartColors.axisLabel,
fontSize: 12,
fontFamily: FONT_FAMILY,
},
@@ -693,7 +1692,28 @@ export function DeviceHistoryChart({
splitLine: {
show: true,
lineStyle: {
- color: '#edf0f5',
+ 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,
},
},
},
@@ -711,7 +1731,19 @@ export function DeviceHistoryChart({
y: 0,
},
data: eventSeriesData,
- universalTransition: true,
+ //universalTransition: true,
+ },
+ {
+ type: 'scatter',
+ name: 'Точки событий',
+ xAxisIndex: 0,
+ yAxisIndex: 0,
+ encode: {
+ x: 0,
+ y: 1,
+ },
+ data: eventPointSeriesData,
+ z: 10,
},
{
type: 'line',
@@ -719,15 +1751,16 @@ export function DeviceHistoryChart({
xAxisIndex: 1,
yAxisIndex: 1,
data: temperature,
- symbol: 'circle',
- symbolSize: 7,
+ symbol: 'none',
+ showSymbol: false,
+ sampling: 'lttb',
smooth: true,
lineStyle: {
- width: 2,
- color: '#ff8a34',
+ width: isDarkTheme ? 1.6 : 2,
+ color: chartColors.temperature,
},
itemStyle: {
- color: '#ff8a34',
+ color: chartColors.temperature,
},
areaStyle: {
color: {
@@ -739,11 +1772,11 @@ export function DeviceHistoryChart({
colorStops: [
{
offset: 0,
- color: 'rgba(255, 138, 52, 0.24)',
+ color: chartColors.temperatureAreaStart,
},
{
offset: 1,
- color: 'rgba(255, 138, 52, 0.04)',
+ color: chartColors.temperatureAreaEnd,
},
],
},
@@ -751,7 +1784,7 @@ export function DeviceHistoryChart({
markArea: {
silent: true,
itemStyle: {
- color: 'rgba(224, 0, 0, 0.045)',
+ color: chartColors.dangerMark,
},
data: [[{ yAxis: 45 }, { yAxis: 60 }]],
},
@@ -762,15 +1795,16 @@ export function DeviceHistoryChart({
xAxisIndex: 2,
yAxisIndex: 2,
data: battery,
- symbol: 'circle',
- symbolSize: 7,
+ symbol: 'none',
+ showSymbol: false,
+ sampling: 'lttb',
smooth: true,
lineStyle: {
- width: 2,
- color: '#31b24a',
+ width: isDarkTheme ? 1.6 : 2,
+ color: chartColors.battery,
},
itemStyle: {
- color: '#31b24a',
+ color: chartColors.battery,
},
areaStyle: {
color: {
@@ -782,11 +1816,11 @@ export function DeviceHistoryChart({
colorStops: [
{
offset: 0,
- color: 'rgba(49, 178, 74, 0.28)',
+ color: chartColors.batteryAreaStart,
},
{
offset: 1,
- color: 'rgba(49, 178, 74, 0.04)',
+ color: chartColors.batteryAreaEnd,
},
],
},
@@ -803,11 +1837,11 @@ export function DeviceHistoryChart({
colorStops: [
{
offset: 0,
- color: 'rgba(224, 0, 0, 0.1)',
+ color: chartColors.dangerArea,
},
{
offset: 1,
- color: 'rgba(224, 0, 0, 0.1)',
+ color: chartColors.dangerArea,
},
],
},
@@ -815,11 +1849,44 @@ export function DeviceHistoryChart({
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}
+ = {
+ ScreenOn: 'Экран включен',
+ ScreenOff: 'Экран выключен',
+ EnterNetwork: 'В сети',
+ LeaveNetwork: 'Не в сети',
+ PowerOn: 'Включение',
+ PowerOff: 'Выключение',
+ Hit: 'Удар',
+ Overheat: 'Перегрев',
+ PowerAC: 'Зарядка AC',
+ PowerUSB: 'Зарядка USB',
+ PowerWireless: 'Беспроводная зарядка',
+ PowerDisconnected: 'Зарядка отключена',
+}
+
+const CHART_MOUNT_DELAY_MS = 160
+const EMPTY_HISTORY_ITEMS: DeviceHistoryChartItem[] = []
+const EMPTY_PACKAGE_USE_EVENTS: DevicePackageUseEventsGroup[] = []
+
+const DeviceHistoryChart = lazy(() =>
+ import('../DeviceHistoryChart/DeviceHistoryChart').then((module) => ({
+ default: module.DeviceHistoryChart,
+ })),
+)
+
+function DeviceHistoryChartPlaceholder() {
+ return (
+ (null)
+ const [zoomRange, setZoomRange] = useState<{
+ start: number
+ end: number
+ } | null>(null)
+ const [isChartReady, setIsChartReady] = useState(false)
+ const closeFrameRef = useRef(null)
+
+ useEffect(() => {
+ if (!selectedPeriod) return
+
+ setZoomRange({
+ start: selectedPeriod.periodStart.getTime(),
+ end: selectedPeriod.periodEnd.getTime(),
+ })
+ }, [selectedPeriod])
+
+ useEffect(() => {
+ if (!open) {
+ setIsChartReady(false)
+ return
+ }
+
+ setIsChartReady(false)
+
+ let firstFrameId = 0
+ let secondFrameId = 0
+ let timeoutId = 0
+
+ firstFrameId = window.requestAnimationFrame(() => {
+ secondFrameId = window.requestAnimationFrame(() => {
+ timeoutId = window.setTimeout(() => {
+ setIsChartReady(true)
+ }, CHART_MOUNT_DELAY_MS)
+ })
+ })
+
+ return () => {
+ window.cancelAnimationFrame(firstFrameId)
+ window.cancelAnimationFrame(secondFrameId)
+ window.clearTimeout(timeoutId)
+ }
+ }, [device.id, open])
+
+ useEffect(() => {
+ return () => {
+ if (closeFrameRef.current !== null) {
+ window.cancelAnimationFrame(closeFrameRef.current)
+ }
+ }
+ }, [])
+
+ const handleOpenChange = useCallback(
+ (nextOpen: boolean) => {
+ if (nextOpen) {
+ onOpenChange(true)
+ return
+ }
+
+ setIsChartReady(false)
+
+ if (closeFrameRef.current !== null) {
+ window.cancelAnimationFrame(closeFrameRef.current)
+ }
+
+ closeFrameRef.current = window.requestAnimationFrame(() => {
+ closeFrameRef.current = null
+ onOpenChange(false)
+ })
+ },
+ [onOpenChange],
+ )
+
+ const shouldRenderChart = Boolean(open && isChartReady && selectedPeriod && zoomRange)
+
+ const telemetryVariables = useMemo(
+ () => ({
+ phoneId: Number(device.id),
+ packagesPhoneId: String(device.id),
+ startDate: selectedPeriod?.periodStart.getTime() ?? 0,
+ endDate: selectedPeriod?.periodEnd.getTime(),
+ }),
+ [device.id, selectedPeriod],
+ )
+
const {
data: telemetryData,
loading: telemetryLoading,
error: telemetryError,
} = useQuery(GET_TELEMETRY_QUERY, {
- variables: {
- phoneId: Number(device.id),
- startDate: selectedPeriod?.periodStart.getTime() ?? 0,
- endDate: selectedPeriod?.periodEnd.getTime(),
- },
- skip: !open || !selectedPeriod,
+ variables: telemetryVariables,
+ skip: !shouldRenderChart,
fetchPolicy: 'network-only',
- pollInterval: 15000,
+ //pollInterval: 15000,
})
+ const telemetryWithEvents = useMemo(() => {
+ if (!telemetryData) return EMPTY_HISTORY_ITEMS
+
+ return [
+ ...telemetryData.getTelemetry,
+
+ ...telemetryData.getPhoneStateEvents.map(
+ (event): DeviceHistoryChartItem => ({
+ date: event.date,
+ type: 'event',
+ eventType: event.type,
+ label: PHONE_STATE_EVENT_LABELS[event.type] ?? event.type,
+ }),
+ ),
+ ].sort((a, b) => a.date - b.date)
+ }, [telemetryData])
+
+ const packageUseEvents =
+ telemetryData?.getPhonePackagesUseEvents ?? EMPTY_PACKAGE_USE_EVENTS
+
return (
-
-
-
+
+ ()
-function formatLocationDate(timestamp: number) {
+function getConnectionStatusClass(connection: Device['connection']) {
+ if (connection === 'online') return 'is-online'
+ if (connection === 'offlineDanger') return 'is-lost'
+
+ return 'is-offline'
+}
+
+function createDeviceMarkerIcon(connection: Device['connection']) {
+ const className = getConnectionStatusClass(connection)
+ const cachedIcon = markerIconCache.get(className)
+
+ if (cachedIcon) return cachedIcon
+
+ const icon = L.divIcon({
+ className: `device-map-marker ${className}`,
+ html: `
+ (null)
useEffect(() => {
- if (!positions.length) return
+ if (!positions.length || lastFitKeyRef.current === fitKey) return
+
+ lastFitKeyRef.current = fitKey
if (positions.length === 1) {
map.setView(positions[0], 14)
@@ -112,14 +216,23 @@ function MapFitBounds({ positions }: MapFitBoundsProps) {
maxZoom: 15,
animate: true,
})
- }, [map, positions])
+ }, [fitKey, map, positions])
return null
}
-export function DeviceMapCard({ device, variant = 'card', }: DeviceMapCardProps) {
+export function DeviceMapCard({
+ device,
+ variant = 'card',
+}: DeviceMapCardProps) {
const [selectedPeriod, setSelectedPeriod] =
useState(null)
+ const [selectedPointKey, setSelectedPointKey] = useState(null)
+ const networkStatusClass = getConnectionStatusClass(device.connection)
+ const deviceMarkerIcon = useMemo(
+ () => createDeviceMarkerIcon(device.connection),
+ [device.connection],
+ )
const { data: gpsTrackData } = useQuery<
GetPhoneGpsTrackData,
@@ -139,6 +252,19 @@ export function DeviceMapCard({ device, variant = 'card', }: DeviceMapCardProps)
return sortGpsTrack(gpsTrackData?.getPhoneGpsTrack ?? [])
}, [gpsTrackData])
+ const telemetry = useMemo(() => {
+ return sortTelemetry(device.telemetry ?? [])
+ }, [device.telemetry])
+
+ const telemetryLines = useMemo(() => {
+ return {
+ battery: createTelemetryLine(telemetry, (item) => item.batteryLevel),
+ temperature: createTelemetryLine(telemetry, (item) => item.temperature),
+ capacity: createTelemetryLine(telemetry, (item) => item.batteryCapacity),
+ cycles: createTelemetryLine(telemetry, (item) => item.batteryCycles),
+ }
+ }, [telemetry])
+
const shouldShowCurrentLocation = isDateInPeriod(
device.lastLocationDate,
selectedPeriod,
@@ -147,10 +273,10 @@ export function DeviceMapCard({ device, variant = 'card', }: DeviceMapCardProps)
const selectedCurrentLocation =
shouldShowCurrentLocation && device.location
? {
- lat: device.location.lat,
- lng: device.location.lng,
- time: device.lastLocationAt,
- }
+ lat: device.location.lat,
+ lng: device.location.lng,
+ date: device.lastLocationDate,
+ }
: null
const selectedRoutePoints = useMemo(() => {
@@ -187,7 +313,81 @@ export function DeviceMapCard({ device, variant = 'card', }: DeviceMapCardProps)
return [location.lat, location.lng]
}, [location.lat, location.lng])
- const fitPositions = routePositions.length > 0 ? routePositions : [currentPosition]
+ const fitPositions =
+ routePositions.length > 0 ? routePositions : [currentPosition]
+
+ const fitKey = useMemo(() => {
+ if (!selectedPeriod) {
+ return `${device.id}-${device.location ? 'located' : 'fallback'}`
+ }
+
+ return [
+ device.id,
+ selectedPeriod.periodStart.getTime(),
+ selectedPeriod.periodEnd.getTime(),
+ routePositions.length > 0 ? 'route' : 'point',
+ ].join('-')
+ }, [device.id, device.location, routePositions.length, selectedPeriod])
+
+ const routeMapPoints = useMemo(() => {
+ return selectedRoutePoints.map((point) => ({
+ key: createPointKey('route', point.lat, point.lng, point.date),
+ kind: 'route',
+ title: 'Точка маршрута',
+ date: point.date,
+ lat: point.lat,
+ lng: point.lng,
+ }))
+ }, [selectedRoutePoints])
+
+ const currentMapPoint = useMemo(() => {
+ if (!selectedCurrentLocation) return null
+
+ return {
+ key: createPointKey(
+ 'current',
+ selectedCurrentLocation.lat,
+ selectedCurrentLocation.lng,
+ selectedCurrentLocation.date,
+ ),
+ kind: 'current',
+ title: device.model ?? 'Устройство',
+ subtitle: device.factoryNumber,
+ date: selectedCurrentLocation.date,
+ lat: selectedCurrentLocation.lat,
+ lng: selectedCurrentLocation.lng,
+ }
+ }, [device.factoryNumber, device.model, selectedCurrentLocation])
+
+ const selectedMapPoint = useMemo(() => {
+ if (!selectedPointKey) return null
+
+ if (currentMapPoint?.key === selectedPointKey) {
+ return currentMapPoint
+ }
+
+ return (
+ routeMapPoints.find((point) => point.key === selectedPointKey) ?? null
+ )
+ }, [currentMapPoint, routeMapPoints, selectedPointKey])
+
+ useEffect(() => {
+ if (selectedPointKey && !selectedMapPoint) {
+ setSelectedPointKey(null)
+ }
+ }, [selectedMapPoint, selectedPointKey])
+
+ const selectedTelemetry = useMemo(() => {
+ return {
+ battery: getLineValueAtTime(telemetryLines.battery, selectedMapPoint?.date),
+ temperature: getLineValueAtTime(
+ telemetryLines.temperature,
+ selectedMapPoint?.date,
+ ),
+ capacity: getLineValueAtTime(telemetryLines.capacity, selectedMapPoint?.date),
+ cycles: getLineValueAtTime(telemetryLines.cycles, selectedMapPoint?.date),
+ }
+ }, [selectedMapPoint, telemetryLines])
return (
-
-
-
+ eventHandlers={{
+ click: (event) => {
+ event.originalEvent.stopPropagation()
+ setSelectedPointKey(point.key)
+ },
+ }}
+ />
))}
- {selectedCurrentLocation && (
-
-
-
-
+ {currentMapPoint && (
+ {
+ event.originalEvent.stopPropagation()
+ setSelectedPointKey(currentMapPoint.key)
+ },
+ }}
+ />
)}
)
-}
\ No newline at end of file
+}
diff --git a/mdm-front/src/pages/DevicePage/components/DevicePageSkeleton/DevicePageSkeleton.scss b/mdm-front/src/pages/DevicePage/components/DevicePageSkeleton/DevicePageSkeleton.scss
new file mode 100644
index 0000000..00b6a75
--- /dev/null
+++ b/mdm-front/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/mdm-front/src/pages/DevicePage/components/DevicePageSkeleton/DevicePageSkeleton.tsx b/mdm-front/src/pages/DevicePage/components/DevicePageSkeleton/DevicePageSkeleton.tsx
new file mode 100644
index 0000000..97f3f46
--- /dev/null
+++ b/mdm-front/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
{isLoading && (
)
-}
\ No newline at end of file
+})
diff --git a/mdm-front/src/pages/DevicePage/components/DeviceHistoryModal/DeviceHistoryModal.scss b/mdm-front/src/pages/DevicePage/components/DeviceHistoryModal/DeviceHistoryModal.scss
index c46fb18..9b7fe59 100644
--- a/mdm-front/src/pages/DevicePage/components/DeviceHistoryModal/DeviceHistoryModal.scss
+++ b/mdm-front/src/pages/DevicePage/components/DeviceHistoryModal/DeviceHistoryModal.scss
@@ -4,61 +4,121 @@
position: fixed;
inset: 0;
z-index: 500;
- background: rgba(15, 23, 42, 0.35);
- animation: historyOverlayShow 0.2s ease;
+ 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: #ffffff;
- padding: 26px 28px;
+ background: $color-surface;
+ padding: 20px;
- overflow: auto;
+ //overflow: hidden;
- box-shadow: 0 24px 80px rgba(15, 23, 42, 0.22);
- animation: historyModalShow 0.2s ease;
+ box-shadow: 0 24px 80px rgba($color-shadow-rgb, 0.22);
+}
- scrollbar-width: thin;
- scrollbar-color: $gray50 transparent;
+.device-history-modal__scroll {
+ flex: 1 1 auto;
+ height: 100%;
+ min-height: 0;
- &::-webkit-scrollbar {
- width: 6px;
+ .simplebar-content {
+ min-height: 100%;
}
- &::-webkit-scrollbar-track {
- background: transparent;
+ .simplebar-track.simplebar-vertical {
+ top: 14px;
+ right: -18px;
+ bottom: 14px;
+ width: 8px;
}
- &::-webkit-scrollbar-thumb {
+ .simplebar-scrollbar::before {
background: $gray50;
- border-radius: 999px;
+ 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: #111827;
- font-size: 20px;
+ color: $color-text-strong;
+ font-size: $font-size-20;
font-weight: 650;
text-transform: uppercase;
span {
margin-left: 6px;
color: $gray50;
- font-size: 14px;
+ font-size: $font-size-14;
font-weight: 500;
text-transform: none;
}
@@ -73,17 +133,21 @@
gap: 14px;
color: $gray50;
- font-size: 14px;
+ font-size: $font-size-14;
.is-green {
position: relative;
- padding-left: 12px;
- color: #30394b;
-
+ 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: 0;
+ left: 8px;
top: 50%;
width: 6px;
@@ -94,6 +158,53 @@
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 {
@@ -101,13 +212,13 @@
height: 36px;
border: none;
border-radius: 12px;
- background: transparent;
+ background: $transparent;
display: inline-flex;
align-items: center;
justify-content: center;
- color: #111827;
+ color: $color-text-strong;
cursor: pointer;
&:hover {
@@ -139,17 +250,17 @@
border: none;
border-radius: 999px;
- background: transparent;
+ background: $transparent;
color: $gray50;
- font-size: 14px;
+ font-size: $font-size-14;
font-weight: 500;
cursor: pointer;
&.is-active {
- background: #ffffff;
+ background: $color-surface;
color: $blue;
- box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
+ box-shadow: 0 2px 8px rgba($color-shadow-rgb, 0.08);
}
}
@@ -165,8 +276,8 @@
align-items: center;
gap: 8px;
- color: #30394b;
- font-size: 14px;
+ color: $color-text-heading;
+ font-size: $font-size-14;
cursor: pointer;
svg {
@@ -185,7 +296,7 @@
margin-bottom: 8px;
color: $blue;
- font-size: 14px;
+ font-size: $font-size-14;
}
.device-history-range__track {
@@ -210,7 +321,7 @@
margin: 0;
appearance: none;
- background: transparent;
+ background: $transparent;
pointer-events: none;
}
@@ -244,8 +355,8 @@
h3 {
margin: 0 0 8px 100px;
- color: #30394b;
- font-size: 16px;
+ color: $color-text-heading;
+ font-size: $font-size-16;
font-weight: 600;
}
}
@@ -262,7 +373,7 @@
grid-template-columns: repeat(5, 1fr);
color: $gray50;
- font-size: 13px;
+ font-size: $font-size-13;
span {
transform: translateX(-50%);
@@ -289,12 +400,12 @@
text-align: right;
color: $gray50;
- font-size: 14px;
+ font-size: $font-size-14;
}
.history-row__line {
position: relative;
- border-top: 1px solid #dbe2ee;
+ border-top: 1px solid $color-border-muted;
&::before,
&::after {
@@ -303,7 +414,7 @@
top: -1px;
bottom: 0;
width: 1px;
- background: #dbe2ee;
+ background: $color-border-muted;
}
&::before {
@@ -327,15 +438,15 @@
}
.history-segment--purple {
- background: #7a3fe8;
+ background: $accent-purple;
}
.history-segment--green {
- background: #18b89b;
+ background: $accent-teal;
}
.history-segment--light-blue {
- background: #2f80ed;
+ background: $accent-sky;
}
.history-point {
@@ -354,20 +465,20 @@
}
.history-point--orange {
- background: #ff7a1a;
+ background: $color-warning-strong;
}
.battery-chart {
position: relative;
height: 110px;
margin-left: 100px;
- border-bottom: 1px solid #dbe2ee;
+ border-bottom: 1px solid $color-border-muted;
background:
- linear-gradient(to bottom, transparent 19%, #dbe2ee 20%, transparent 21%),
- linear-gradient(to bottom, transparent 39%, #dbe2ee 40%, transparent 41%),
- linear-gradient(to bottom, transparent 59%, #dbe2ee 60%, transparent 61%),
- linear-gradient(to bottom, transparent 79%, #dbe2ee 80%, transparent 81%);
+ 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 {
@@ -376,10 +487,10 @@
background: linear-gradient(
168deg,
- rgba(49, 178, 74, 0.38) 0%,
- rgba(49, 178, 74, 0.28) 45%,
- rgba(49, 178, 74, 0.05) 46%,
- rgba(49, 178, 74, 0.05) 100%
+ 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%);
@@ -396,7 +507,7 @@
justify-content: space-between;
color: $gray50;
- font-size: 13px;
+ font-size: $font-size-13;
}
.history-summary {
@@ -412,10 +523,10 @@
background: $color-bg;
color: $gray50;
- font-size: 13px;
+ font-size: $font-size-13;
b {
- color: #111827;
+ color: $color-text-strong;
font-weight: 600;
}
}
@@ -429,17 +540,17 @@
h3 {
margin: 0 0 10px;
padding-bottom: 10px;
- border-bottom: 1px solid #dbe2ee;
+ border-bottom: 1px solid $color-border-muted;
- color: #30394b;
- font-size: 16px;
+ color: $color-text-heading;
+ font-size: $font-size-16;
font-weight: 600;
}
}
.device-apps-list {
border-radius: 14px;
- background: #ffffff;
+ background: $color-surface;
overflow: hidden;
}
@@ -449,8 +560,8 @@
padding: 0 16px;
border: none;
- border-bottom: 1px solid #e4e8f0;
- background: #ffffff;
+ border-bottom: 1px solid $color-border-muted;
+ background: $color-surface;
display: grid;
grid-template-columns: 28px 220px 1fr auto 20px;
@@ -465,7 +576,7 @@
}
&:hover {
- background: #f8fafc;
+ background: $color-surface-muted;
}
}
@@ -477,56 +588,58 @@
}
.device-app-row__name {
- color: #30394b;
- font-size: 15px;
+ color: $color-text-heading;
+ font-size: $font-size-15;
font-weight: 500;
}
.device-app-row__time {
color: $gray50;
- font-size: 13px;
+ font-size: $font-size-13;
}
.device-app-row__percent {
color: $gray50;
- font-size: 13px;
+ font-size: $font-size-13;
}
.device-app-row__arrow {
color: $gray50;
- font-size: 22px;
+ font-size: $font-size-22;
}
.device-apps-card__more {
margin-top: 12px;
border: none;
- background: transparent;
+ background: $transparent;
color: $blue;
- font-size: 14px;
+ font-size: $font-size-14;
font-weight: 500;
cursor: pointer;
}
-@keyframes historyOverlayShow {
- from {
- opacity: 0;
+[data-theme='dark'] {
+ .device-history-modal {
+ background: $color-surface;
+ box-shadow: 0 26px 80px rgba($color-shadow-rgb, 0.62);
}
- to {
- opacity: 1;
+ .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;
}
}
-
-@keyframes historyModalShow {
- from {
- opacity: 0;
- transform: translateY(10px) scale(0.99);
- }
-
- to {
- opacity: 1;
- transform: translateY(0) scale(1);
- }
-}
\ No newline at end of file
diff --git a/mdm-front/src/pages/DevicePage/components/DeviceHistoryModal/DeviceHistoryModal.tsx b/mdm-front/src/pages/DevicePage/components/DeviceHistoryModal/DeviceHistoryModal.tsx
index 29698c9..b7e9d8a 100644
--- a/mdm-front/src/pages/DevicePage/components/DeviceHistoryModal/DeviceHistoryModal.tsx
+++ b/mdm-front/src/pages/DevicePage/components/DeviceHistoryModal/DeviceHistoryModal.tsx
@@ -1,22 +1,37 @@
-import { useState } from 'react'
+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 { DeviceHistoryChart } from '../DeviceHistoryChart/DeviceHistoryChart'
+import { TimelineZoom } from '../TimelineZoom/TimelineZoom'
+import { MotionDialogContent } from '../../../../shared/ui/MotionDialog/MotionDialog'
import './DeviceHistoryModal.scss'
@@ -26,6 +41,50 @@ type DeviceHistoryModalProps = {
device: Device
}
+const PHONE_STATE_EVENT_LABELS: Record
Загрузка телеметрии...
@@ -831,7 +1898,11 @@ export function DeviceHistoryChart({
Не удалось загрузить телеметрию
)}
- События
@@ -857,7 +1928,7 @@ export function DeviceHistoryChart({ className="device-history-events-legend__checkbox" style={{ backgroundColor: checked ? category.color : 'transparent', - borderColor: checked ? category.color : '#c9d2e3', + borderColor: checked ? category.color : chartColors.axisLine, }} > {checked && ( @@ -880,6 +1951,133 @@ export function DeviceHistoryChart({Аккумулятор
Динамика уровня заряда за выбранный период
+
+
+ Приложения
+События жизненного цикла приложений за выбранный период
+
+
+
+ На экране
+
+
+
+
+ Фон
+
+
+
+ {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,
@@ -34,59 +93,183 @@ export function DeviceHistoryModal({
const [selectedPeriod, setSelectedPeriod] =
useState
+
+
+ {shouldRenderChart && selectedPeriod && zoomRange ? (
+
+
)
-}
\ No newline at end of file
+}
diff --git a/mdm-front/src/pages/DevicePage/components/DeviceHistoryPeriodControl/DeviceHistoryPeriodControl.scss b/mdm-front/src/pages/DevicePage/components/DeviceHistoryPeriodControl/DeviceHistoryPeriodControl.scss
index faf0b13..b7d2029 100644
--- a/mdm-front/src/pages/DevicePage/components/DeviceHistoryPeriodControl/DeviceHistoryPeriodControl.scss
+++ b/mdm-front/src/pages/DevicePage/components/DeviceHistoryPeriodControl/DeviceHistoryPeriodControl.scss
@@ -15,7 +15,7 @@
.history-period-tabs {
padding: 4px;
border-radius: 999px;
- background: $color-bg;
+ //background: $color-bg;
display: flex;
align-items: center;
@@ -39,11 +39,17 @@
&:hover {
color: $blue;
+ background: rgba($color-surface-rgb, .6) !important;
}
&.is-active {
background: #ffffff;
color: $blue;
+ box-shadow: 0 0 10px -6px $gray50;
+ }
+ [data-theme='dark'] &.is-active{
+ background: $color-surface;
+ box-shadow: 0 0 10px -6px rgba($gray50-rgb, .4);
}
}
@@ -57,13 +63,13 @@
border: none;
border-radius: 999px;
- background: $color-bg;
+ //background: $color-bg;
display: inline-flex;
align-items: center;
gap: 8px;
- color: #30394b;
+ //color: #30394b;
font-size: 14px;
font-weight: 500;
@@ -77,7 +83,7 @@
&:hover,
&.is-active {
color: $blue;
- box-shadow: inset 0 0 0 1px rgba(3, 29, 154, 0.16);
+ box-shadow: inset 0 0 0 1px rgba($color-primary-rgb, 0.16);
svg {
color: $blue;
@@ -91,94 +97,102 @@
top: calc(100% + 8px);
z-index: 120;
+ min-width: 100%;
+ width: max-content;
border-radius: 18px;
- background: #ffffff;
- padding: 14px;
+ background: $color-surface;
+ padding: 12px;
border: 1.5px solid $gray20;
- box-shadow: 0 18px 45px rgba(15, 23, 42, 0.16);
+ box-shadow: none;
button{
transition: .18s ease;
}
.rdp-root {
- --rdp-accent-color: $blue;
- --rdp-accent-background-color: rgba(3, 29, 154, 0.1);
- --rdp-day_button-border-radius: 10px;
+ --rdp-accent-color: #{$blue};
+ --rdp-accent-background-color: #{$color-primary-soft};
+ --rdp-day_button-border-radius: 12px;
+ --rdp-day_button-height: 34px;
+ --rdp-day_button-width: 34px;
+ --rdp-day-height: 36px;
+ --rdp-day-width: 36px;
--rdp-selected-border: 0;
margin: 0;
+ font-family: inherit;
}
.rdp-months {
+ max-width: 100%;
gap: 18px;
}
+ .rdp-month {
+ width: 100%;
+ }
+
.rdp-month_caption {
margin-bottom: 8px;
}
.rdp-caption_label {
- color: #30394b;
- font-size: 15px;
- font-weight: 600;
+ color: $color-text-strong;
+ font-size: $font-size-14;
+ font-weight: 700;
}
.rdp-nav {
- button {
- width: 30px;
- height: 30px;
- border-radius: 10px;
+ gap: 4px;
+ }
- color: $gray50;
+ .rdp-button_previous,
+ .rdp-button_next,
+ .rdp-nav button {
+ width: 28px;
+ height: 28px;
+ border-radius: 8px;
- &:hover {
- background: $color-bg;
- color: $blue;
- }
+ color: $blue;
+
+ &:hover {
+ background: $color-surface-hover;
}
}
.rdp-weekday {
- color: $gray50;
- font-size: 12px;
- font-weight: 500;
- }
-
- .rdp-day {
- width: 38px;
- height: 38px;
- padding: 0;
+ color: $color-text-muted;
+ font-size: $font-size-12;
+ font-weight: 600;
}
.rdp-day_button {
- width: 36px;
- height: 36px;
-
border: none;
- border-radius: 10px;
- color: #30394b;
- font-size: 14px;
- font-weight: 500;
+ color: $color-text-heading;
+ font-size: $font-size-12;
+ font-weight: 600;
+ width: 100%;
+ height: 100%;
&:hover {
- background: $color-bg;
+ background: $color-surface-hover;
}
}
.rdp-selected {
.rdp-day_button {
background: $blue;
- color: #ffffff;
+ color: $color-text-inverse;
}
}
.rdp-range_middle {
background-color: transparent;
+ padding: 0;
.rdp-day_button {
- background: #e8edff;
+ background: $color-primary-soft;
color: $blue;
border-radius: 0;
}
@@ -186,19 +200,23 @@
.rdp-range_start {
.rdp-day_button {
- border-radius: 10px;
+ background: $blue;
+ color: $color-text-inverse;
+ border-radius: 12px;
}
}
.rdp-range_end {
.rdp-day_button {
- border-radius: 10px;
+ background: $blue;
+ color: $color-text-inverse;
+ border-radius: 12px;
}
}
.rdp-range_start.rdp-range_end {
.rdp-day_button {
- border-radius: 10px;
+ border-radius: 12px;
}
.rdp-today {
@@ -241,7 +259,7 @@
height: 4px;
border-radius: 999px;
- background: rgba(3, 29, 154, 0.16);
+ background: rgba($color-primary-rgb, 0.16);
}
.history-range__active {
@@ -293,51 +311,3 @@
cursor: pointer;
}
-/* react-day-picker */
-
-.history-date-picker__dropdown .rdp-root {
- --rdp-accent-color: $blue;
- --rdp-accent-background-color: rgba(3, 29, 154, 0.1);
- --rdp-day_button-border-radius: 10px;
- --rdp-selected-border: 0;
-
- margin: 0;
-}
-
-.history-date-picker__dropdown .rdp-months {
- gap: 18px;
-}
-
-.history-date-picker__dropdown .rdp-caption_label {
- color: #30394b;
- font-size: 15px;
- font-weight: 600;
-}
-
-.history-date-picker__dropdown .rdp-weekday {
- color: $gray50;
- font-size: 12px;
- font-weight: 500;
-}
-
-.history-date-picker__dropdown .rdp-day_button {
- width: 36px;
- height: 36px;
-
- color: #30394b;
- font-size: 14px;
-}
-
-.history-date-picker__dropdown .rdp-selected .rdp-day_button {
- background: $blue;
- color: #ffffff;
-}
-
-.history-date-picker__dropdown .rdp-range_middle .rdp-day_button {
- background: #e8edff;
- color: $blue;
-}
-
-.history-date-picker__dropdown .rdp-today .rdp-day_button {
- font-weight: 700;
-}
\ No newline at end of file
diff --git a/mdm-front/src/pages/DevicePage/components/DeviceMainCard/DeviceMainCard.tsx b/mdm-front/src/pages/DevicePage/components/DeviceMainCard/DeviceMainCard.tsx
index 219f337..387f23c 100644
--- a/mdm-front/src/pages/DevicePage/components/DeviceMainCard/DeviceMainCard.tsx
+++ b/mdm-front/src/pages/DevicePage/components/DeviceMainCard/DeviceMainCard.tsx
@@ -1,36 +1,109 @@
-import { useState } from 'react'
-import { ShieldCheck, Signal, Smartphone, Trash2 } from 'lucide-react'
+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(employee: Device) {
- return [employee.serialNumber]
- .filter(Boolean)
- .join(' ')
+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 function DeviceMainCard({ device, onOpenHistory, }: DeviceMainCardProps) {
-
+export const DeviceMainCard = memo(function DeviceMainCard({
+ device,
+ onOpenHistory,
+}: DeviceMainCardProps) {
const [deletingDevice, setDeletingDevice] = useState(null)
+ const renderDeletingDevice = useDeferredModalPayload(deletingDevice)
+ const shouldReduceMotion = useReducedMotion()
+ const statusTransition = shouldReduceMotion
+ ? { duration: 0 }
+ : {
+ duration: 0.24,
+ ease: [0.34, 1.42, 0.64, 1] as [number, number, number, number],
+ }
+ const statusItems = [
+ {
+ key: `condition-${device.condition}`,
+ className: getStatusClass(device.condition),
+ icon:
+
+ {device.factoryNumber}
+ ID: {device.id}
+
-
-
-
+
-
-
-
-
- {device.factoryNumber}
- ID: {device.id}
-
+
-
+ {device.imei} · {device.imei2}
+
+ {conditionText[device.condition]}
+
+
+ {device.connectionText || connectionText[device.connection]}
+
+
+
- {device.imei}
- Версия приложения: 244
- Исправно
-
- {device.connectionText || 'В сети'}
-
+
+
-
@@ -39,7 +112,7 @@ export function DeviceMainCard({ device, onOpenHistory, }: DeviceMainCardProps)
{device.image ? (
) : (
- 
+
)}
@@ -49,33 +122,60 @@ export function DeviceMainCard({ device, onOpenHistory, }: DeviceMainCardProps)
+
)}
{device.factoryNumber}
{device.imei} - {device.serialNumber ? ` · ${device.serialNumber}` : ''} + {device.imei2 ? ` · ${device.imei2}` : ''}
-
+ {statusItems.map((status, index) => (
+
+ {status.icon}
+ {status.content}
+
+ ))}
+
-
-
-
-
-
- {device.workTime && (
-
-
- )}
+
+
)
-}
\ No newline at end of file
+}, areDeviceMainCardPropsEqual)
diff --git a/mdm-front/src/pages/DevicePage/components/DeviceMapCard/DeviceMapCard.scss b/mdm-front/src/pages/DevicePage/components/DeviceMapCard/DeviceMapCard.scss
index 669dade..74d5785 100644
--- a/mdm-front/src/pages/DevicePage/components/DeviceMapCard/DeviceMapCard.scss
+++ b/mdm-front/src/pages/DevicePage/components/DeviceMapCard/DeviceMapCard.scss
@@ -7,7 +7,7 @@
position: relative;
border-radius: 14px;
overflow: visible;
- background: #eef1f6;
+ background: $color-media-bg;
}
.device-map__leaflet {
@@ -27,17 +27,17 @@
padding: 0 10px;
border-radius: 999px;
- background: rgba(255, 255, 255, 0.92);
+ background: rgba($color-surface-rgb, 0.92);
display: inline-flex;
align-items: center;
gap: 6px;
- color: #30394b;
+ color: $color-text-heading;
font-size: 12px;
font-weight: 600;
- box-shadow: 0 8px 22px rgba(15, 23, 42, 0.12);
+ box-shadow: 0 8px 22px rgba($color-shadow-rgb, 0.12);
svg {
color: $blue;
@@ -53,7 +53,7 @@
width: 34px;
height: 34px;
border-radius: 50%;
- background: rgba(3, 29, 154, 0.18);
+ background: rgba($color-primary-rgb, 0.18);
display: flex;
align-items: center;
@@ -65,8 +65,41 @@
height: 16px;
border-radius: 50%;
background: $blue;
- border: 3px solid #ffffff;
- box-shadow: 0 8px 18px rgba(3, 29, 154, 0.35);
+ 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 {
@@ -75,13 +108,13 @@
gap: 3px;
b {
- color: #151a24;
+ color: $color-text-heading;
font-size: 13px;
font-weight: 700;
}
span {
- color: #738098;
+ color: $color-text-muted;
font-size: 12px;
font-weight: 500;
}
@@ -95,6 +128,179 @@
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;
diff --git a/mdm-front/src/pages/DevicePage/components/DeviceMapCard/DeviceMapCard.tsx b/mdm-front/src/pages/DevicePage/components/DeviceMapCard/DeviceMapCard.tsx
index 4afb4d1..f9d274c 100644
--- a/mdm-front/src/pages/DevicePage/components/DeviceMapCard/DeviceMapCard.tsx
+++ b/mdm-front/src/pages/DevicePage/components/DeviceMapCard/DeviceMapCard.tsx
@@ -1,23 +1,21 @@
-import { useEffect, useMemo, useState } from 'react'
+import { useEffect, useMemo, useRef, useState } from 'react'
import { useQuery } from '@apollo/client/react'
import {
CircleMarker,
MapContainer,
Marker,
Polyline,
- Popup,
TileLayer,
useMap,
} from 'react-leaflet'
import L from 'leaflet'
-import { Map } from 'lucide-react'
+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 { GET_PHONE_GPS_TRACK_QUERY } from '../../../../entities/device/api/device.graphql'
import type {
DeviceGpsTrackPoint,
+ DeviceTelemetryItem,
GetPhoneGpsTrackData,
GetPhoneGpsTrackVariables,
} from '../../../../entities/device/model/types'
@@ -34,24 +32,63 @@ type DeviceMapCardProps = {
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 deviceMarkerIcon = L.divIcon({
- className: 'device-map-marker',
- html: `
-
+
+
+ Организация
+ {device.organisationId ? (
+
+ {device.organisation ?? `Организация #${device.organisationId}`}
+
+
+ ) : (
+ {device.organisation ?? 'Не указана'}
+ )}
+
+
@@ -85,21 +185,31 @@ export function DeviceMainCard({ device, onOpenHistory, }: DeviceMainCardProps)
-
-
-
- `,
- iconSize: [34, 34],
- iconAnchor: [17, 17],
- popupAnchor: [0, -18],
-})
+const markerIconCache = new Map
+
+
+ `,
+ 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', {
@@ -63,11 +100,79 @@ function formatLocationDate(timestamp: number) {
}).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 isDateInPeriod(date: number | undefined, period: MapTrackPeriodValue | null) {
+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 (
@@ -90,15 +195,14 @@ function MapResizeWatcher() {
return null
}
-type MapFitBoundsProps = {
- positions: [number, number][]
-}
-
-function MapFitBounds({ positions }: MapFitBoundsProps) {
+function MapFitBounds({ positions, fitKey }: MapFitBoundsProps) {
const map = useMap()
+ const lastFitKeyRef = useRef
-
+
@@ -214,6 +414,63 @@ export function DeviceMapCard({ device, variant = 'card', }: DeviceMapCardProps)
Устройство на карте
+
+
+
+ )}
+
+ {selectedMapPoint.title}
+
+ {selectedMapPoint.subtitle ?? device.factoryNumber}
+
+
+
+
+
+
+
+ {device.connectionText}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
- Точка маршрута
- {formatLocationDate(point.date)}
-
-
- {device.model ?? 'Устройство'}
- {device.factoryNumber}
- {device.imei}
- {device.lastLocationAt ?? 'Время не указано'}
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {Array.from({ length: 4 }).map((_, index) => (
+
+
+
+ ))}
+
+
+
+
+
+
+
+
+
+
+ {Array.from({ length: 3 }).map((_, index) => (
+
+
+
+ ))}
+
+
+
+
+
+
+
- {permissionItems.map((item) => {
- const enabled = policyState[item.key]
- const isSaving = savingKey === item.key
- const isDisabled = item.disabled || Boolean(savingKey)
+
+ setNotification(null)}
+ />
+ )}
)
-}
+}, areDevicePermissionsCardPropsEqual)
type PermissionItemProps = {
icon: ReactNode
label: string
- enabled: boolean
+ kind: PolicyKind
+ value: PolicyValue
+ options: PolicyValue[]
disabled?: boolean
- isUnavailable?: boolean
- isSaving?: boolean
- onToggle: () => void
+ isPolicyLocked?: boolean
+ onChange: (value: PolicyValue) => void
}
function PermissionItem({
icon,
label,
- enabled,
+ kind,
+ value,
+ options,
disabled = false,
- isUnavailable = false,
- isSaving = false,
- onToggle,
+ isPolicyLocked = false,
+ onChange,
}: PermissionItemProps) {
return (
+
+
+
+ handleToggle(item.key, item.disabled)}
- />
- )
- })}
+
+
+
+ Опции
- 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 && (
+
@@ -196,17 +593,67 @@ function PermissionItem({
)
-}
\ No newline at end of file
+}
diff --git a/mdm-front/src/pages/DevicePage/components/DeviceStatsCards/DeviceStatsCards.tsx b/mdm-front/src/pages/DevicePage/components/DeviceStatsCards/DeviceStatsCards.tsx
index b0b9e1c..02532bb 100644
--- a/mdm-front/src/pages/DevicePage/components/DeviceStatsCards/DeviceStatsCards.tsx
+++ b/mdm-front/src/pages/DevicePage/components/DeviceStatsCards/DeviceStatsCards.tsx
@@ -1,4 +1,5 @@
-import { Battery, RotateCcw, ShieldCheck, Smartphone, ThermometerSun } from 'lucide-react'
+import { memo } from 'react'
+import { Battery, RotateCcw, ShieldCheck, Smartphone } from 'lucide-react'
import type { Device } from '../../types'
type DeviceStatsCardsProps = {
@@ -23,7 +24,22 @@ function formatWorkTimeHours(worktime?: number | null) {
return `${Math.round(hours)} ч`
}
-export function DeviceStatsCards({ device }: DeviceStatsCardsProps) {
+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'
@@ -31,18 +47,18 @@ export function DeviceStatsCards({ device }: DeviceStatsCardsProps) {
: null
const batterySize = 110
- const batteryStroke = 10
+ 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 '#cfd5df'
- if (value <= 20) return '#e00000'
- if (value <= 50) return '#ff8a34'
+ 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 '#031d9a'
+ return 'var(--device-battery-progress-strong)'
}
return (
@@ -124,4 +140,4 @@ export function DeviceStatsCards({ device }: DeviceStatsCardsProps) {
{label}
-
+
+ {isPolicyLocked && (
+
+
+
+
+ Опция зафиксирована политикой организации. Изменить ее на странице устройства нельзя.
+
+
+ )}
+
+
+
+
+ {options.map((option) => {
+ const isActive = value === option
+
+ return (
+
+ )
+ })}
+
+
+
+ )
+}
diff --git a/mdm-front/src/pages/DevicePage/types.ts b/mdm-front/src/pages/DevicePage/types.ts
index 9354aa8..9cd1499 100644
--- a/mdm-front/src/pages/DevicePage/types.ts
+++ b/mdm-front/src/pages/DevicePage/types.ts
@@ -1,3 +1,9 @@
+import type {
+ DevicePolicy,
+ DeviceTelemetryItem,
+ GroupUsePolicy,
+} from '../../entities/device/model/types'
+
export type DeviceCondition = 'ok' | 'inspection'
export type DeviceConnection = 'online' | 'offline' | 'offlineDanger'
@@ -9,6 +15,9 @@ export type Device = {
imei2: string
serialNumber?: string
organisation?: string
+ organisationId?: number
+ policy?: DevicePolicy | null
+ organisationPolicy?: GroupUsePolicy | null
workTime: string | null
employee: string | null
condition: DeviceCondition
@@ -19,6 +28,7 @@ export type Device = {
lastLocationDate?: number
battery?: number
batteryMaxCapacity?: number
+ telemetry?: DeviceTelemetryItem[]
chargeCycles?: string
totalWorkTime?: number | null
mediumImpacts?: string
@@ -40,6 +50,7 @@ export type Device = {
camera: boolean
sim: boolean
speaker: boolean
+ locked?: boolean
}
statusIcons: {
gps: boolean
@@ -61,7 +72,7 @@ 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 | +Информация | +Состояние | +Связь | +Статусы | ++ |
|---|
+
+
+
+
+
+
+
+
+
+
+
{
- if (!open) {
- setMapDevice(null)
- }
- }}
- />
+
+ {shouldMountMapModal && (
+
+
+ )}
)
-}
\ No newline at end of file
+}
diff --git a/mdm-front/src/pages/DevicesPage/components/AddDeviceModal/AddDeviceModal.scss b/mdm-front/src/pages/DevicesPage/components/AddDeviceModal/AddDeviceModal.scss
index 94e1ee6..5ba53e0 100644
--- a/mdm-front/src/pages/DevicesPage/components/AddDeviceModal/AddDeviceModal.scss
+++ b/mdm-front/src/pages/DevicesPage/components/AddDeviceModal/AddDeviceModal.scss
@@ -3,17 +3,16 @@
.add-device-modal__overlay {
position: fixed;
inset: 0;
- z-index: 80;
+ z-index: 110;
- background: rgba(15, 23, 42, 0.42);
+ background: $color-backdrop;
backdrop-filter: blur(2px);
- animation: addDeviceOverlayShow 0.18s ease;
}
.add-device-modal {
position: fixed;
- z-index: 90;
+ z-index: 120;
top: 50%;
left: 50%;
@@ -21,11 +20,10 @@
padding: 24px;
border-radius: 24px;
- background: #ffffff;
- box-shadow: 0 24px 70px rgba(15, 23, 42, 0.22);
+ background: $color-surface;
+ box-shadow: $shadow-modal;
transform: translate(-50%, -50%);
- animation: addDeviceModalShow 0.2s ease;
}
.add-device-modal__header {
@@ -40,8 +38,8 @@
.add-device-modal__title {
margin: 0;
- color: #111827;
- font-size: 24px;
+ color: $color-text-strong;
+ font-size: $font-size-24;
font-weight: 650;
}
@@ -49,7 +47,7 @@
margin: 6px 0 0;
color: $gray50;
- font-size: 15px;
+ font-size: $font-size-15;
font-weight: 400;
line-height: 1.4;
}
@@ -85,7 +83,7 @@
margin: 0;
color: $gray50;
- font-size: 14px;
+ font-size: $font-size-14;
line-height: 1.45;
text-align: center;
}
@@ -94,7 +92,7 @@
.add-device-qr__box {
min-height: 260px;
border-radius: 22px;
- border: 1px dashed rgba(3, 29, 154, 0.32);
+ border: 1px dashed rgba($color-primary-rgb, 0.32);
background: $color-bg;
display: flex;
@@ -106,8 +104,8 @@
color: $blue;
span {
- color: #111827;
- font-size: 18px;
+ color: $color-text-strong;
+ font-size: $font-size-18;
font-weight: 600;
}
.add-device-qr__state, .add-device-qr__content{
@@ -118,6 +116,73 @@
}
}
+.add-device-token-timer {
+ min-height: 42px;
+ padding: 0 12px;
+ border-radius: 14px;
+ background: rgba($color-primary-rgb, 0.08);
+
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 8px;
+
+ color: $blue;
+ font-size: $font-size-15;
+ font-weight: 600;
+
+ svg {
+ flex: 0 0 auto;
+ }
+
+ span {
+ min-width: 0;
+ }
+
+ button {
+ height: 30px;
+ margin-left: 4px;
+ padding: 0 10px;
+ border: none;
+ border-radius: 10px;
+ background: $color-surface;
+
+ display: inline-flex;
+ align-items: center;
+ gap: 6px;
+
+ color: $blue;
+ font-size: $font-size-13;
+ font-weight: 650;
+ cursor: pointer;
+ transition: 0.2s ease;
+
+ &:hover {
+ background: $blue;
+ color: $color-text-inverse;
+ }
+
+ &:disabled {
+ opacity: 0.55;
+ cursor: default;
+ }
+ }
+}
+
+.add-device-token-timer.is-expired {
+ background: rgba($color-danger-rgb, 0.1);
+ color: $red;
+
+ button {
+ color: $red;
+
+ &:hover {
+ background: $red;
+ color: $color-text-inverse;
+ }
+ }
+}
+
.add-device-modal__footer {
margin-top: 22px;
@@ -134,7 +199,7 @@
background: $color-bg;
color: $gray50;
- font-size: 15px;
+ font-size: $font-size-15;
font-weight: 600;
cursor: pointer;
@@ -142,28 +207,6 @@
&:hover {
background: $gray20;
- color: #111827;
+ color: $color-text-strong;
}
}
-
-@keyframes addDeviceOverlayShow {
- from {
- opacity: 0;
- }
-
- to {
- opacity: 1;
- }
-}
-
-@keyframes addDeviceModalShow {
- from {
- opacity: 0;
- transform: translate(-50%, -48%) scale(0.98);
- }
-
- to {
- opacity: 1;
- transform: translate(-50%, -50%) scale(1);
- }
-}
\ No newline at end of file
diff --git a/mdm-front/src/pages/DevicesPage/components/AddDeviceModal/AddDeviceModal.tsx b/mdm-front/src/pages/DevicesPage/components/AddDeviceModal/AddDeviceModal.tsx
index 7ee4490..f53b33e 100644
--- a/mdm-front/src/pages/DevicesPage/components/AddDeviceModal/AddDeviceModal.tsx
+++ b/mdm-front/src/pages/DevicesPage/components/AddDeviceModal/AddDeviceModal.tsx
@@ -1,7 +1,7 @@
-import { useEffect, useMemo } from 'react'
+import { useEffect, useMemo, useState } from 'react'
import * as Dialog from '@radix-ui/react-dialog'
import { QRCodeSVG } from 'qrcode.react'
-import { QrCode, RefreshCw, X } from 'lucide-react'
+import { Clock3, QrCode, RefreshCw, X } from 'lucide-react'
import { useMutation } from '@apollo/client/react'
import { CREATE_PHONE_REGISTRATION_TOKEN_MUTATION } from '../../../../entities/device/api/device.graphql'
@@ -9,6 +9,7 @@ import type {
CreatePhoneRegistrationTokenData,
CreatePhoneRegistrationTokenVariables,
} from '../../../../entities/device/model/types'
+import { MotionDialogContent } from '../../../../shared/ui/MotionDialog/MotionDialog'
import './AddDeviceModal.scss'
@@ -17,24 +18,40 @@ type AddDeviceModalProps = {
onOpenChange: (open: boolean) => void
}
-function formatExpiresIn(expiresIn: number) {
- if (!expiresIn) return '—'
+const SECOND_MS = 1000
+const DAY_SECONDS = 24 * 60 * 60
+const UNIX_SECONDS_THRESHOLD = 1_000_000_000
+const UNIX_MILLISECONDS_THRESHOLD = 1_000_000_000_000
- const now = Date.now()
- const expiresAt = expiresIn > 10_000_000_000
- ? expiresIn
- : now + expiresIn * 1000
+function getExpiresAt(expiresIn: number, receivedAt: number) {
+ if (!Number.isFinite(expiresIn) || expiresIn <= 0) return 0
- return new Intl.DateTimeFormat('ru-RU', {
- day: '2-digit',
- month: '2-digit',
- year: 'numeric',
- hour: '2-digit',
- minute: '2-digit',
- }).format(new Date(expiresAt))
+ if (expiresIn >= UNIX_MILLISECONDS_THRESHOLD) {
+ return expiresIn
+ }
+
+ if (expiresIn >= UNIX_SECONDS_THRESHOLD) {
+ return expiresIn * SECOND_MS
+ }
+
+ if (expiresIn > DAY_SECONDS) {
+ return receivedAt + expiresIn
+ }
+
+ return receivedAt + expiresIn * SECOND_MS
+}
+
+function formatTokenTimeLeft(milliseconds: number) {
+ const totalSeconds = Math.max(0, Math.ceil(milliseconds / SECOND_MS))
+ const minutes = Math.floor(totalSeconds / 60)
+ const seconds = totalSeconds % 60
+
+ return `${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`
}
export function AddDeviceModal({ open, onOpenChange }: AddDeviceModalProps) {
+ const [tokenReceivedAt, setTokenReceivedAt] = useState(0)
+ const [now, setNow] = useState(() => Date.now())
const [createToken, { data, loading, error }] = useMutation<
CreatePhoneRegistrationTokenData,
@@ -44,6 +61,11 @@ export function AddDeviceModal({ open, onOpenChange }: AddDeviceModalProps) {
})
const registrationData = data?.createPhoneRegistrationToken
+ const expiresAt = registrationData
+ ? getExpiresAt(registrationData.expiresIn, tokenReceivedAt)
+ : 0
+ const timeLeft = expiresAt ? Math.max(0, expiresAt - now) : 0
+ const isTokenExpired = Boolean(registrationData && timeLeft <= 0)
const qrValue = useMemo(() => {
if (!registrationData) return ''
@@ -58,18 +80,51 @@ export function AddDeviceModal({ open, onOpenChange }: AddDeviceModalProps) {
if (!open) return
createToken()
+ .then(() => {
+ const receivedAt = Date.now()
+
+ setTokenReceivedAt(receivedAt)
+ setNow(receivedAt)
+ })
+ .catch(() => {
+ setTokenReceivedAt(0)
+ })
}, [open, createToken])
- function handleRefreshToken() {
- createToken()
+ useEffect(() => {
+ if (!open || !registrationData || isTokenExpired) return
+
+ const intervalId = window.setInterval(() => {
+ setNow(Date.now())
+ }, SECOND_MS)
+
+ return () => {
+ window.clearInterval(intervalId)
+ }
+ }, [open, registrationData, isTokenExpired])
+
+ async function handleRefreshToken() {
+ setNow(Date.now())
+
+ try {
+ await createToken()
+ const receivedAt = Date.now()
+
+ setTokenReceivedAt(receivedAt)
+ setNow(receivedAt)
+ } catch {
+ setTokenReceivedAt(0)
+ }
}
return (
-
-
+
@@ -109,13 +164,39 @@ export function AddDeviceModal({ open, onOpenChange }: AddDeviceModalProps) {
size={220}
level="M"
bgColor='transparent'
- fgColor="#031D9A"
+ fgColor="currentColor"
includeMargin
/>
)}
+ {registrationData && !loading && !error && (
+
-
-
+
)
-}
\ No newline at end of file
+}
diff --git a/mdm-front/src/pages/DevicesPage/components/DeviceMapModal/DeviceMapModal.scss b/mdm-front/src/pages/DevicesPage/components/DeviceMapModal/DeviceMapModal.scss
index 622dd79..a94c517 100644
--- a/mdm-front/src/pages/DevicesPage/components/DeviceMapModal/DeviceMapModal.scss
+++ b/mdm-front/src/pages/DevicesPage/components/DeviceMapModal/DeviceMapModal.scss
@@ -5,7 +5,7 @@
inset: 0;
z-index: 90;
- background: rgba(15, 23, 42, 0.42);
+ background: $color-backdrop-soft;
backdrop-filter: blur(2px);
animation: deviceMapModalOverlayShow 0.18s ease;
@@ -17,14 +17,15 @@
inset: 24px;
padding: 24px;
+ border: 1px solid $color-border-muted;
border-radius: 24px;
- background: #ffffff;
+ background: $color-surface;
display: flex;
flex-direction: column;
gap: 18px;
- box-shadow: 0 24px 80px rgba(15, 23, 42, 0.24);
+ box-shadow: $shadow-modal-strong;
animation: deviceMapModalShow 0.2s ease;
}
@@ -40,7 +41,7 @@
.device-map-modal__title {
margin: 0;
- color: $color-text;
+ color: $color-text-heading;
font-size: 24px;
font-weight: 650;
}
@@ -48,7 +49,7 @@
.device-map-modal__description {
margin: 4px 0 0;
- color: $gray50;
+ color: $color-text-muted;
font-size: 15px;
font-weight: 500;
}
@@ -59,19 +60,19 @@
border: none;
border-radius: 12px;
- background: $color-bg;
+ background: $color-surface-muted;
display: inline-flex;
align-items: center;
justify-content: center;
- color: $gray50;
+ color: $color-text-muted;
cursor: pointer;
transition: 0.2s ease;
&:hover {
- color: $blue;
- background: $gray20;
+ color: $color-primary;
+ background: $color-surface-hover;
}
}
@@ -82,6 +83,7 @@
.device-map {
height: 100%;
min-height: 0;
+ background: transparent;
}
.device-map__container {
@@ -115,4 +117,4 @@
opacity: 1;
transform: translateY(0) scale(1);
}
-}
\ No newline at end of file
+}
diff --git a/mdm-front/src/pages/DevicesPage/components/DeviceMapModal/DeviceMapModal.tsx b/mdm-front/src/pages/DevicesPage/components/DeviceMapModal/DeviceMapModal.tsx
index 8a6963d..791a079 100644
--- a/mdm-front/src/pages/DevicesPage/components/DeviceMapModal/DeviceMapModal.tsx
+++ b/mdm-front/src/pages/DevicesPage/components/DeviceMapModal/DeviceMapModal.tsx
@@ -3,6 +3,7 @@ import { X } from 'lucide-react'
import type { Device } from '../../../DevicePage/types'
import { DeviceMapCard } from '../../../DevicePage/components/DeviceMapCard/DeviceMapCard'
+import { MotionDialogContent } from '../../../../shared/ui/MotionDialog/MotionDialog'
import './DeviceMapModal.scss'
@@ -19,33 +20,34 @@ export function DeviceMapModal({
}: DeviceMapModalProps) {
return (
-
-
+
- )}
+
+ )}
+
)
-}
\ No newline at end of file
+}
diff --git a/mdm-front/src/pages/DevicesPage/components/DevicesFiltersPanel/Datepicker.scss b/mdm-front/src/pages/DevicesPage/components/DevicesFiltersPanel/Datepicker.scss
index f5f1c7f..41907a0 100644
--- a/mdm-front/src/pages/DevicesPage/components/DevicesFiltersPanel/Datepicker.scss
+++ b/mdm-front/src/pages/DevicesPage/components/DevicesFiltersPanel/Datepicker.scss
@@ -1,20 +1,22 @@
+@use '../../../../shared/styles/variables' as *;
+
.react-datepicker {
border: none;
border-radius: 14px;
- box-shadow: 0 10px 30px rgba(15, 23, 42, 0.15);
+ box-shadow: $shadow-popover-soft;
font-family: inherit;
overflow: hidden;
}
.react-datepicker__header {
- background: #f3f6fa;
- border-bottom: 1px solid #e3e8f0;
+ background: $color-surface-muted;
+ border-bottom: 1px solid $color-border;
}
.react-datepicker__current-month,
.react-datepicker-time__header,
.react-datepicker-year-header {
- color: #30394b;
+ color: $color-text-heading;
font-weight: 600;
}
@@ -25,19 +27,19 @@
.react-datepicker__time-box
ul.react-datepicker__time-list
li.react-datepicker__time-list-item--selected {
- background: #031d9a;
- color: #ffffff;
+ background: $color-primary;
+ color: $color-text-inverse;
}
.react-datepicker__day--in-range,
.react-datepicker__day--in-selecting-range {
- background: #e8edff;
- color: #031d9a;
+ 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: #eef1f6;
-}
\ No newline at end of file
+ background: $color-surface-hover;
+}
diff --git a/mdm-front/src/pages/DevicesPage/components/DevicesFiltersPanel/DevicesFiltersPanel.scss b/mdm-front/src/pages/DevicesPage/components/DevicesFiltersPanel/DevicesFiltersPanel.scss
index 8ef50b3..93b466f 100644
--- a/mdm-front/src/pages/DevicesPage/components/DevicesFiltersPanel/DevicesFiltersPanel.scss
+++ b/mdm-front/src/pages/DevicesPage/components/DevicesFiltersPanel/DevicesFiltersPanel.scss
@@ -1,32 +1,43 @@
@use '../../../../shared/styles/variables' as *;
.devices-filters {
- width: 0;
- flex: 0 0 0;
+ 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;
- overflow: hidden;
+ visibility: hidden;
+ overflow: visible;
pointer-events: none;
-
- transform: translateX(16px);
+ transform: translateX(6px);
+ will-change: opacity, transform;
transition:
- width 0.25s ease,
- flex-basis 0.25s ease,
opacity 0.2s ease,
- transform 0.25s 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 {
- width: 292px;
- flex-basis: 292px;
opacity: 1;
+ visibility: visible;
pointer-events: auto;
transform: translateX(0);
- padding-left: 20px;
+ 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: 292px;
+ width: 100%;
+ min-width: 0;
display: flex;
flex-direction: column;
gap: 8px;
@@ -34,8 +45,9 @@
.devices-filter-item {
border-radius: 14px;
- background: #ffffff;
+ background: $color-surface;
overflow: hidden;
+ box-shadow: 2px 2px 30px -10px rgba($gray50-rgb, .2);
&:nth-child(1)[data-state=open]{
overflow: visible;
}
@@ -51,16 +63,16 @@
margin: 0 16px;
border: none;
- border-bottom: 1px solid transparent;
- background: transparent;
+ border-bottom: 1px solid $transparent;
+ background: $transparent;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
- color: black;
- font-size: 18px;
+ color: $color-text-strong;
+ font-size: $font-size-18;
font-weight: 500;
cursor: pointer;
@@ -116,10 +128,10 @@
border: none;
outline: none;
border-radius: 999px;
- background: #eef1f6;
+ background: $color-surface-hover;
color: $gray50;
- font-size: 16px;
+ font-size: $font-size-16;
font-weight: 400;
cursor: pointer;
}
@@ -131,10 +143,10 @@
display: block;
border: none;
- background: transparent;
+ background: $transparent;
color: $blue;
- font-size: 14px;
+ font-size: $font-size-14;
font-weight: 400;
text-decoration: underline;
cursor: pointer;
@@ -149,7 +161,7 @@
min-height: 28px;
color: $gray50;
- font-size: 13px;
+ font-size: $font-size-13;
& + & {
margin-top: 12px;
@@ -158,7 +170,7 @@
.devices-filter-row__label {
color: $gray50;
- font-size: 16px;
+ font-size: $font-size-16;
font-weight: 500;
text-align: left;
}
@@ -174,8 +186,8 @@
align-items: center;
gap: 6px;
- color: #30394b;
- font-size: 16px;
+ color: $color-text-heading;
+ font-size: $font-size-16;
font-weight: 500;
cursor: pointer;
user-select: none;
@@ -189,15 +201,15 @@
width: 18px;
height: 18px;
border-radius: 50%;
- border: 2px solid #dfe5ef;
- background: #f3f6fa;
+ 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: #031d9a;
- background: #031d9a;
+ border-color: $color-primary;
+ background: $color-primary;
}
.devices-radio input:checked + .devices-radio__control::after {
@@ -205,7 +217,7 @@
position: absolute;
inset: 5px;
border-radius: 50%;
- background: #ffffff;
+ background: $color-surface;
}
.devices-radio__label {
@@ -224,15 +236,17 @@
width: 18px;
height: 18px;
border-radius: 5px;
- border: 2px solid #dfe5ef;
- background: #f3f6fa;
+ 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: #031d9a;
- background: #031d9a;
+ 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 {
@@ -242,7 +256,7 @@
top: 2px;
width: 4px;
height: 8px;
- border: solid #ffffff;
+ border: solid white;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
@@ -265,4 +279,15 @@
to {
height: 0;
}
-}
\ No newline at end of file
+}
+
+[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/mdm-front/src/pages/DevicesPage/components/DevicesFiltersPanel/DevicesFiltersPanel.tsx b/mdm-front/src/pages/DevicesPage/components/DevicesFiltersPanel/DevicesFiltersPanel.tsx
index 17add99..9b5cff8 100644
--- a/mdm-front/src/pages/DevicesPage/components/DevicesFiltersPanel/DevicesFiltersPanel.tsx
+++ b/mdm-front/src/pages/DevicesPage/components/DevicesFiltersPanel/DevicesFiltersPanel.tsx
@@ -1,175 +1,295 @@
-import { useState } from 'react'
+import { memo, useCallback, useMemo, useState } from 'react'
import * as Accordion from '@radix-ui/react-accordion'
+import { useSearchParams } from 'react-router-dom'
import { ChevronDown } from 'lucide-react'
-import './Datepicker.scss'
-import { DevicesDateRangePicker, type DevicesDateRangePickerValue } from '../DevicesDateRangePicker/DevicesDateRangePicker'
+import type { DeviceNetworkStatus } from '../../../../entities/device/model/types'
+import {
+ DevicesDateRangePicker,
+ type DevicesDateRangePickerValue,
+} from '../DevicesDateRangePicker/DevicesDateRangePicker'
+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: 'Потерян',
+ },
+]
-type DevicesFiltersPanelProps = {
- isOpen: boolean
+const maintenanceOptions = [
+ {
+ value: false,
+ label: 'Исправно',
+ },
+ {
+ value: true,
+ label: 'Требует ТО',
+ },
+]
+
+function isDeviceNetworkStatus(value: string): value is DeviceNetworkStatus {
+ return networkStatusOptions.some((option) => option.value === value)
}
-export function DevicesFiltersPanel({ isOpen }: DevicesFiltersPanelProps) {
+type DevicesFiltersPanelProps = {
+ isOpen: boolean
+}
- const [workPeriod, setWorkPeriod] = useState
-
+
+
+
-
+
+
-
-
- )}
+ {shouldShowTable && (
+
-
+ Не удалось загрузить устройства
+
+ )}
- {!loading && !error && devices.length === 0 && (
- Устройства не найдены
- )}
+ {shouldShowEmptyState && (
+ | ID | -Информация | -Состояние | -Связь | -Статусы | -- |
|---|---|---|---|---|---|
| {device.id} | - -
-
-
-
- {device.serial || '—'}
-
-
-
- IMEI: {device.imei || '—'}
-
-
-
- IMEI 2: {device.imei2 || '—'}
-
-
-
- {device.org?.name || 'Не указана'}
-
- |
-
-
-
-
-
- {getDeviceConditionLabel(device.techState?.needMaintenance)}
-
- |
-
-
-
-
- {device.lastLocation ? 'В сети' : 'Нет данных'}
-
- |
-
-
-
-
- |
-
- - - | -
- Страница {currentPage}
-
-
+ {totalPages > 1 && (
+
-
-
-
-
-
-
-
+ {shouldRenderInlineFilters && (
+
+
+ )}
+
+ Фильтры
+
+
+
+
+
+
+
+ )}
+
После сканирования устройство появится в списке и будет доступно для назначения сотруднику. @@ -127,8 +208,7 @@ export function AddDeviceModal({ open, onOpenChange }: AddDeviceModalProps) { Закрыть
+
-
+
+ Устройство на карте
+
-
-
-
+
+
+
+
+ {device && (
+
-
-
+
+ {device?.factoryNumber || 'Выбранное устройство'}
+
- {device && (
-
-
- Устройство на карте
-
-
-
- {device?.factoryNumber || 'Выбранное устройство'}
-
-
-
-
-
- )}
-
+
+ )}
+
)
-}
\ No newline at end of file
+}
diff --git a/mdm-front/src/pages/DevicesPage/components/DevicesDateRangePicker/DevicesDateRangePicker.scss b/mdm-front/src/pages/DevicesPage/components/DevicesDateRangePicker/DevicesDateRangePicker.scss
index d5620c3..57fb2e8 100644
--- a/mdm-front/src/pages/DevicesPage/components/DevicesDateRangePicker/DevicesDateRangePicker.scss
+++ b/mdm-front/src/pages/DevicesPage/components/DevicesDateRangePicker/DevicesDateRangePicker.scss
@@ -12,14 +12,14 @@
border: none;
border-radius: 999px;
- background: #eef1f6;
+ background: $color-surface-hover;
display: flex;
align-items: center;
gap: 8px;
- color: #4f5b73;
- font-size: 14px;
+ color: $color-text-soft;
+ font-size: $font-size-14;
font-weight: 500;
text-align: left;
cursor: pointer;
@@ -33,7 +33,7 @@
}
&.is-open {
- box-shadow: 0 0 0 2px rgba(3, 29, 154, 0.15);
+ box-shadow: 0 0 0 2px rgba($color-primary-rgb, 0.15);
}
}
@@ -53,13 +53,13 @@
padding: 12px;
border-radius: 18px;
- background: #ffffff;
+ background: $color-surface;
border: 1.5px solid $gray20;
}
.devices-date-range__calendar {
- --rdp-accent-color: $blue;
- --rdp-accent-background-color: #e8edff;
+ --rdp-accent-color: #{$blue};
+ --rdp-accent-background-color: #{$color-primary-soft};
--rdp-day_button-border-radius: 12px;
--rdp-day_button-height: 34px;
--rdp-day_button-width: 34px;
@@ -78,9 +78,9 @@
}
.rdp-caption_label {
- font-size: 14px;
+ font-size: $font-size-14;
font-weight: 700;
- color: #151a24;
+ color: $color-text-strong;
}
.rdp-nav {
@@ -95,33 +95,33 @@
border-radius: 8px;
&:hover {
- background: #eef1f6;
+ background: $color-surface-hover;
}
}
.rdp-weekday {
- color: #8c96aa;
- font-size: 12px;
+ color: $color-text-muted;
+ font-size: $font-size-12;
font-weight: 600;
}
.rdp-day_button {
- color: #30394b;
- font-size: 12px;
+ color: $color-text-heading;
+ font-size: $font-size-12;
font-weight: 600;
}
.rdp-day_button:hover {
- background: #eef1f6;
+ background: $color-surface-hover;
}
.rdp-selected .rdp-day_button {
background: $blue;
- color: #ffffff;
+ color: $color-text-inverse;
}
.rdp-range_middle .rdp-day_button {
- background: #e8edff;
+ background: $color-primary-soft;
color: $blue;
border-radius: 0;
}
@@ -129,7 +129,7 @@
.rdp-range_start .rdp-day_button,
.rdp-range_end .rdp-day_button {
background: $blue;
- color: #ffffff;
+ color: $color-text-inverse;
border-radius: 12px;
}
@@ -151,8 +151,8 @@
gap: 5px;
span {
- color: #738098;
- font-size: 11px;
+ color: $color-text-muted;
+ font-size: $font-size-11;
font-weight: 600;
}
@@ -163,10 +163,10 @@
border: none;
outline: none;
border-radius: 10px;
- background: #eef1f6;
+ background: $color-surface-hover;
- color: #30394b;
- font-size: 13px;
+ color: $color-text-heading;
+ font-size: $font-size-13;
font-weight: 600;
font-family: inherit;
}
@@ -185,15 +185,15 @@
border: none;
border-radius: 999px;
- background: #eef1f6;
+ background: $color-surface-hover;
- color: #4f5b73;
- font-size: 12px;
+ color: $color-text-soft;
+ font-size: $font-size-12;
font-weight: 600;
cursor: pointer;
&:hover {
- background: #e8edff;
+ background: $color-primary-soft;
color: $blue;
}
}
@@ -202,7 +202,7 @@
.devices-date-range__footer {
margin-top: 12px;
padding-top: 10px;
- border-top: 1px solid #e3e8f0;
+ border-top: 1px solid $color-border;
display: flex;
flex-direction: column;
@@ -210,8 +210,8 @@
p {
margin: 0;
- color: #738098;
- font-size: 12px;
+ color: $color-text-muted;
+ font-size: $font-size-12;
font-weight: 500;
}
}
@@ -230,17 +230,17 @@
border: none;
border-radius: 10px;
- font-size: 12px;
+ font-size: $font-size-12;
font-weight: 700;
cursor: pointer;
}
.devices-date-range__reset {
- background: #eef1f6;
- color: #4f5b73;
+ background: $color-surface-hover;
+ color: $color-text-soft;
}
.devices-date-range__apply {
background: $blue;
- color: #ffffff;
-}
\ No newline at end of file
+ color: $color-text-inverse;
+}
diff --git a/mdm-front/src/pages/DevicesPage/components/DevicesDateRangePicker/DevicesDateRangePicker.tsx b/mdm-front/src/pages/DevicesPage/components/DevicesDateRangePicker/DevicesDateRangePicker.tsx
index ca97b44..52d138e 100644
--- a/mdm-front/src/pages/DevicesPage/components/DevicesDateRangePicker/DevicesDateRangePicker.tsx
+++ b/mdm-front/src/pages/DevicesPage/components/DevicesDateRangePicker/DevicesDateRangePicker.tsx
@@ -4,9 +4,11 @@ import type { DateRange } from 'react-day-picker'
import { ru } from 'date-fns/locale'
import { format } from 'date-fns'
import { CalendarDays, ChevronDown, X } from 'lucide-react'
+import { AnimatePresence, m } from 'framer-motion'
import 'react-day-picker/style.css'
import './DevicesDateRangePicker.scss'
+import { popoverVariants, uiFadeTransition } from '../../../../shared/lib/motion'
export type DevicesDateRangePickerValue = {
from: Date | null
@@ -138,8 +140,16 @@ export function DevicesDateRangePicker({
)}
- {isOpen && (
-
+
+ {isOpen && (
+
+
+
+ {maintenanceOptions.map((option) => (
+
+ ))}
+
+
+ {selectedOrganisations.length > 0 && (
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+})
diff --git a/mdm-front/src/pages/DevicesPage/components/DevicesTabs/DevicesTabs.scss b/mdm-front/src/pages/DevicesPage/components/DevicesTabs/DevicesTabs.scss
deleted file mode 100644
index 2552105..0000000
--- a/mdm-front/src/pages/DevicesPage/components/DevicesTabs/DevicesTabs.scss
+++ /dev/null
@@ -1,39 +0,0 @@
-@use '../../../../shared/styles/variables' as *;
-
-.devices-tabs {
- display: flex;
- align-items: center;
- gap: 8px;
-}
-
-.devices-tabs__item {
- position: relative;
- min-height: 36px;
- padding: 12px 20px;
- border: none;
- border-radius: 12px;
- background: #ffffff;
- color: #4f5b73;
- font-size: 18px;
- font-weight: 400;
- cursor: pointer;
-
- b {
- font-weight: 700;
- color: #1d2533;
- }
-}
-
-.devices-tabs__item--active {
- color: #4f5b73;
-}
-
-.devices-tabs__alert {
- position: absolute;
- top: -5px;
- right: -5px;
- width: 11px;
- height: 11px;
- border-radius: 50%;
- background: $red;
-}
\ No newline at end of file
diff --git a/mdm-front/src/pages/DevicesPage/components/DevicesTabs/DevicesTabs.tsx b/mdm-front/src/pages/DevicesPage/components/DevicesTabs/DevicesTabs.tsx
index 89ea420..d27a4ad 100644
--- a/mdm-front/src/pages/DevicesPage/components/DevicesTabs/DevicesTabs.tsx
+++ b/mdm-front/src/pages/DevicesPage/components/DevicesTabs/DevicesTabs.tsx
@@ -1,21 +1,174 @@
-import './DevicesTabs.scss'
+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 (
+
+ )
+ },
+ )}
+
-
-
-
-
-
-
+
-
@@ -68,11 +119,11 @@ export function DevicesToolbar({
align="end"
sideOffset={8}
>
- {sortOptions.map((option) => (
+ {devicesSortOptions.map((option) => (
setSelectedSort(option)}
+ onSelect={() => onSortChange(option)}
>
{option.label}
@@ -84,17 +135,22 @@ export function DevicesToolbar({
-
-
-
-
-
-
-
-
- {
- if (!open) {
- setEditingEmployee(null)
- }
- }}
- />
-
- {
- setOrganisationsCurrentPage(0)
-
- await refetchOrganisations({
- page: 0,
- query: debouncedOrganisationSearch || undefined,
- sortDirection: organisationSort.sortDirection,
- sortField: organisationSort.sortField,
- })
- }}
- />
-
- {
- if (!open) {
- setEditingOrganisation(null)
- }
- }}
- />
-
- {
- if (!open) {
- setDeletingOrganisation(null)
- }
- }}
- onConfirm={handleConfirmDeleteOrganisation}
- />
-
- {
- if (!open) {
- setDeletingEmployee(null)
- }
- }}
- onConfirm={handleConfirmDeleteEmployee}
- />
)
-}
\ No newline at end of file
+}
diff --git a/mdm-front/src/pages/EmployeesPage/components/AddEmployeeModal/AddEmployeeModal.scss b/mdm-front/src/pages/EmployeesPage/components/AddEmployeeModal/AddEmployeeModal.scss
index b6ebd98..a92fbe6 100644
--- a/mdm-front/src/pages/EmployeesPage/components/AddEmployeeModal/AddEmployeeModal.scss
+++ b/mdm-front/src/pages/EmployeesPage/components/AddEmployeeModal/AddEmployeeModal.scss
@@ -3,31 +3,31 @@
.add-employee-modal__overlay {
position: fixed;
inset: 0;
- z-index: 80;
+ z-index: 110;
- background: rgba(15, 23, 42, 0.42);
+ background: $color-backdrop;
backdrop-filter: blur(2px);
- animation: addEmployeeOverlayShow 0.18s ease;
}
.add-employee-modal {
position: fixed;
- z-index: 90;
+ z-index: 120;
top: 50%;
left: 50%;
- width: min(520px, calc(100vw - 32px));
+ width: min(860px, calc(100vw - 32px));
+ max-height: calc(100vh - 32px);
+ overflow: auto;
transform: translate(-50%, -50%);
- border-radius: 24px;
- background: #ffffff;
+ border-radius: 26px;
+ background: $color-surface;
padding: 24px;
- box-shadow: 0 24px 70px rgba(15, 23, 42, 0.22);
+ box-shadow: $shadow-modal;
- animation: addEmployeeModalShow 0.2s ease;
}
.add-employee-modal__header {
@@ -42,8 +42,8 @@
.add-employee-modal__title {
margin: 0;
- color: #111827;
- font-size: 24px;
+ color: $color-text-strong;
+ font-size: $font-size-24;
font-weight: 650;
}
@@ -51,7 +51,7 @@
margin: 6px 0 0;
color: $gray50;
- font-size: 15px;
+ font-size: $font-size-15;
font-weight: 400;
}
@@ -76,17 +76,83 @@
color: $blue;
background: $gray20;
}
+
+ &:disabled {
+ opacity: 0.6;
+ cursor: default;
+ }
}
.add-employee-form {
display: flex;
flex-direction: column;
+ gap: 16px;
+}
+
+.add-employee-layout {
+ //display: grid;
+ //grid-template-columns: 260px minmax(0, 1fr);
+ display: flex;
+ flex-wrap: wrap;
+ gap: 20px;
+ align-items: start;
+}
+
+.add-employee-fields__section {
+ border: 1px solid $color-border-accent;
+ border-radius: 22px;
+ background: $color-surface-muted;
+ flex: 1;
+}
+.avatar-fio-container{
+ display: flex;
+ flex: 1;
+ gap: 20px;
+}
+
+.add-employee-fields__title {
+ span {
+ 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;
+ }
+}
+
+.add-employee-fields {
+ display: flex;
+ flex: 1;
+ flex-direction: column;
gap: 14px;
- &__grid {
+}
+
+.add-employee-fields__section {
+ padding: 16px;
+
+ display: flex;
+ flex-direction: column;
+ gap: 12px;
+}
+
+.add-employee-form__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
+
+.add-employee-form__grid--credentials {
+ align-items: end;
+}
+
+.add-employee-field__spacer {
+ visibility: hidden;
}
.add-employee-field {
@@ -94,50 +160,286 @@
flex-direction: column;
gap: 8px;
- span {
- color: #30394b;
- font-size: 14px;
- font-weight: 500;
+ > span {
+ color: $color-text-heading;
+ font-size: $font-size-14;
+ font-weight: 600;
}
- input, select {
+ input,
+ select {
height: 44px;
- border: 1px solid #dfe5ef;
+ border: 1px solid $color-border-strong;
border-radius: 14px;
padding: 0 14px;
- background: #f8fafc;
+ background: $color-surface;
outline: none;
- color: #111827;
- font-size: 15px;
+ color: $color-text-strong;
+ font-size: $font-size-15;
font-weight: 400;
- transition: 0.2s ease;
+ transition:
+ border-color 0.2s ease,
+ background-color 0.2s ease,
+ box-shadow 0.2s ease;
&:focus {
border-color: $blue;
- background: #ffffff;
+ background: $color-surface;
+ box-shadow: 0 0 0 3px rgba($color-primary-rgb, 0.12);
+ }
+
+ &:disabled {
+ opacity: 0.65;
+ cursor: not-allowed;
}
&::placeholder {
color: $gray50;
}
}
+
+ select {
+ cursor: pointer;
+ }
+}
+
+.employee-role-select {
+ width: 100%;
+
+ .organisation-select__trigger {
+ border-radius: 14px;
+ }
+}
+
+.employee-role-select__dropdown {
+ z-index: 140;
+}
+
+.employee-role-select__list {
+ margin-top: 0;
+ max-height: none;
+}
+
+.employee-role-select__option {
+ align-items: flex-start;
+ flex-direction: column;
+ gap: 4px;
+
+ small {
+ flex: 0 1 auto;
+ white-space: normal;
+ line-height: 1.3;
+ }
+}
+
+.employee-password-picker {
+ --height: 44px;
+ --radius: 14px;
+ --motion: 320ms cubic-bezier(0.34, 1.42, 0.64, 1);
+
+ width: 100%;
+ height: var(--height);
+
+ display: flex;
+ align-items: center;
+ gap: 0;
+
+ color: $color-text-strong;
+
+ transition:
+ gap var(--motion),
+ opacity 180ms ease;
+}
+
+.employee-password-picker__button,
+.employee-password-picker__status,
+.employee-password-picker__input,
+.employee-password-picker__action {
+ height: var(--height);
+ min-width: 0;
+ border: 0;
+ outline: 0;
+ border-radius: var(--radius);
+ background: $color-surface;
+ color: inherit;
+ font: inherit;
+ height: 46px;
+
+ transition:
+ flex-basis var(--motion),
+ width var(--motion),
+ padding var(--motion),
+ opacity 180ms ease,
+ transform var(--motion),
+ background-color 220ms ease,
+ color 220ms ease,
+ box-shadow 220ms ease;
+}
+
+.employee-password-picker__button,
+.employee-password-picker__status {
+ width: 100%;
+ flex: 1 1 auto;
+ padding: 0 14px;
+
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ gap: 8px;
+
+ border: 1px solid $color-border-strong;
+ cursor: pointer;
+
+ color: $gray50;
+ font-size: $font-size-15;
+ font-weight: 600;
+ white-space: nowrap;
+
+ svg {
+ flex: 0 0 auto;
+ }
+}
+
+.employee-password-picker__button {
+ border: 1px solid $color-border-strong;
+ cursor: pointer;
+
+ &:hover:not(:disabled) {
+ border-color: rgba($color-primary-rgb, 0.24);
+ background: $blue20;
+ color: $blue;
+ }
+
+ &:disabled {
+ opacity: 0.65;
+ cursor: not-allowed;
+ }
+}
+
+.employee-password-picker__status {
+ border: 1px solid rgba($color-primary-rgb, 0.18);
+ background: $blue20;
+ color: $blue;
+}
+
+.employee-password-picker__input {
+ width: auto !important;
+ flex: 1 1 auto;
+ padding: 0 14px !important;
+ border: 1px solid $color-border-strong !important;
+
+ opacity: 1;
+ pointer-events: auto;
+ transform: scaleX(1);
+
+ background: $color-surface !important;
+ font-size: $font-size-15 !important;
+ -webkit-text-fill-color: $color-text-strong;
+
+ &:focus {
+ border-color: $blue !important;
+ box-shadow: 0 0 0 3px rgba($color-primary-rgb, 0.12);
+ }
+
+ &:disabled {
+ opacity: 0.65;
+ pointer-events: none;
+ }
+}
+
+.employee-password-picker__action {
+ width: var(--height);
+ flex: 0 0 var(--height);
+ padding: 0;
+
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+
+ opacity: 1;
+ transform: scale(1) rotate(0deg);
+
+ background: $color-surface;
+ color: $gray50;
+ cursor: pointer;
+
+ &:hover:not(:disabled) {
+ background: rgba($color-danger-rgb, 0.08);
+ color: $red;
+ }
+
+ &:disabled {
+ opacity: 0.45;
+ cursor: default;
+ transform: scale(0.92);
+ }
+}
+
+.employee-password-picker--open {
+ gap: 8px;
+}
+
+.employee-password-picker--confirmed {
+ gap: 8px;
+}
+
+.employee-password-picker__action--confirm {
+ background: $blue20;
+ color: $blue;
+
+ &:hover:not(:disabled) {
+ background: $blue;
+ color: $color-text-inverse;
+ box-shadow: 0 8px 20px rgba($color-primary-rgb, 0.18);
+ }
+}
+
+.employee-password-confirm {
+ --height: 46px;
+ --radius: 14px;
+
+ width: 100%;
+ height: var(--height);
+
+ display: flex;
+ align-items: center;
+ gap: 8px;
+}
+
+.employee-password-confirm__input {
+ --motion: 320ms cubic-bezier(0.34, 1.42, 0.64, 1);
+
+ flex: 1 1 auto;
+ min-width: 0;
+
+ transition:
+ border-color 0.2s ease,
+ box-shadow 0.2s ease,
+ transform var(--motion);
+}
+
+.add-employee-field--password-confirm-error {
+ .employee-password-confirm__input {
+ border-color: rgba($color-danger-rgb, 0.62) !important;
+ box-shadow: 0 0 0 3px rgba($color-danger-rgb, 0.1) !important;
+ }
}
.add-employee-error {
border-radius: 14px;
- background: rgba(224, 0, 0, 0.08);
+ background: $color-danger-tint;
padding: 12px 14px;
color: $red;
- font-size: 14px;
+ font-size: $font-size-14;
font-weight: 500;
}
.add-employee-modal__footer {
- margin-top: 8px;
+ padding-top: 4px;
display: flex;
justify-content: flex-end;
@@ -152,7 +454,7 @@
border: none;
border-radius: 14px;
- font-size: 15px;
+ font-size: $font-size-15;
font-weight: 600;
cursor: pointer;
@@ -165,16 +467,7 @@
&:hover {
background: $gray20;
- color: #111827;
- }
-}
-
-.add-employee-submit {
- background: $blue;
- color: #ffffff;
-
- &:hover {
- opacity: 0.9;
+ color: $color-text-strong;
}
&:disabled {
@@ -183,24 +476,37 @@
}
}
-@keyframes addEmployeeOverlayShow {
- from {
- opacity: 0;
+.add-employee-submit {
+ background: $blue;
+ color: $color-text-inverse;
+
+ &:hover {
+ box-shadow: inset 0 0 0 1px $blue, 0 8px 20px -8px rgba(var(--color-primary-rgb), 0.8);
}
- to {
- opacity: 1;
+ &:disabled {
+ opacity: 0.65;
+ cursor: default;
+ }
+ &:disabled:hover {
+ box-shadow: none;
}
}
-@keyframes addEmployeeModalShow {
- from {
- opacity: 0;
- transform: translate(-50%, -48%) scale(0.98);
+@media (max-width: 820px) {
+ .add-employee-layout {
+ grid-template-columns: 1fr;
+ }
+}
+
+@media (max-width: 560px) {
+ .add-employee-modal {
+ width: min(100vw - 20px, 520px);
+ padding: 18px;
+ border-radius: 22px;
}
- to {
- opacity: 1;
- transform: translate(-50%, -50%) scale(1);
+ .add-employee-form__grid {
+ grid-template-columns: 1fr;
}
-}
\ No newline at end of file
+}
diff --git a/mdm-front/src/pages/EmployeesPage/components/AddEmployeeModal/AddEmployeeModal.tsx b/mdm-front/src/pages/EmployeesPage/components/AddEmployeeModal/AddEmployeeModal.tsx
index f905126..e7a0922 100644
--- a/mdm-front/src/pages/EmployeesPage/components/AddEmployeeModal/AddEmployeeModal.tsx
+++ b/mdm-front/src/pages/EmployeesPage/components/AddEmployeeModal/AddEmployeeModal.tsx
@@ -1,297 +1,831 @@
-import { useEffect, useState } from 'react'
+import {
+ memo,
+ useCallback,
+ useEffect,
+ useMemo,
+ useRef,
+ useState,
+ type FormEvent,
+} from 'react'
import * as Dialog from '@radix-ui/react-dialog'
-import { X } from 'lucide-react'
-import { useMutation, useQuery } from '@apollo/client/react'
+import { Check, ChevronDown, KeyRound, X } from 'lucide-react'
+import { useMutation } from '@apollo/client/react'
+import { AnimatePresence, m } from 'framer-motion'
+import { AvatarUpload } from '../AvatarUpload/AvatarUpload'
import {
- GET_ORGANISATIONS_QUERY,
- GET_USERS_PAGE_QUERY,
- SIGN_UP_MUTATION,
+ CHANGE_USER_MUTATION,
+ CHANGE_USER_WITH_PASSWORD_MUTATION,
+ CREATE_USER_MUTATION,
+ CREATE_UPLOAD_USER_AVATAR_URL_MUTATION,
} from '../../../../entities/employee/api/employee.graphql'
import type {
- Employee,
- EmployeeRole,
- GetOrganisationsData,
- GetOrganisationsVariables,
- SignUpData,
- SignUpVariables,
+ CreateUserData,
+ CreateUserVariables,
+ Employee,
+ EmployeeRole,
+ CreateUploadUserAvatarUrlData,
+ CreateUploadUserAvatarUrlVariables,
+ ChangeUserData,
+ ChangeUserVariables,
+ ChangeUserWithPasswordVariables,
} from '../../../../entities/employee/model/types'
+import { OrganisationSelect } from '../OrganisationSelect/OrganisationSelect'
+import { uploadMultipartFile } from '../../lib/uploadMultipartFile'
+import { MotionDialogContent } from '../../../../shared/ui/MotionDialog/MotionDialog'
+import { popoverVariants, uiFadeTransition } from '../../../../shared/lib/motion'
import './AddEmployeeModal.scss'
type AddEmployeeModalProps = {
- open: boolean
- mode?: 'create' | 'edit'
- employee?: Employee | null
- onOpenChange: (open: boolean) => void
+ open: boolean
+ mode?: 'create' | 'edit'
+ employee?: Employee | null
+ initialOrganisation?: {
+ id: number | string
+ name?: string | null
+ } | null
+ onOpenChange: (open: boolean) => void
+ onSuccess?: () => void | Promise
+}
+
+function getUserInitials(lastName: string, firstName: string) {
+ const first = lastName.trim()[0] ?? ''
+ const second = firstName.trim()[0] ?? ''
+
+ return `${first}${second}`.toUpperCase() || '??'
}
export function AddEmployeeModal({
- open,
- mode = 'create',
- employee = null,
- onOpenChange,
+ open,
+ mode = 'create',
+ employee = null,
+ initialOrganisation = null,
+ onOpenChange,
+ onSuccess,
}: AddEmployeeModalProps) {
- const isEditMode = mode === 'edit'
- const [orgId, setOrgId] = useState('')
- const [lastName, setLastName] = useState('')
- const [firstName, setFirstName] = useState('')
- const [middleName, setMiddleName] = useState('')
- const [username, setUsername] = useState('')
- const [password, setPassword] = useState('')
- const [role, setRole] = useState('User')
+ const isEditMode = mode === 'edit'
+ const initialOrganisationId =
+ initialOrganisation?.id !== undefined && initialOrganisation.id !== null
+ ? String(initialOrganisation.id)
+ : ''
- useEffect(() => {
- if (!open) return
+ const [orgId, setOrgId] = useState('')
+ const [lastName, setLastName] = useState('')
+ const [firstName, setFirstName] = useState('')
+ const [middleName, setMiddleName] = useState('')
+ const [username, setUsername] = useState('')
+ const [password, setPassword] = useState('')
+ const [passwordDraft, setPasswordDraft] = useState('')
+ const [passwordConfirm, setPasswordConfirm] = useState('')
+ const [isPasswordChangeOpen, setIsPasswordChangeOpen] = useState(false)
+ const [role, setRole] = useState('User')
- if (isEditMode && employee) {
- setOrgId(String(employee.org?.id ?? employee.orgId ?? ''))
- setLastName(employee.lastName ?? '')
- setFirstName(employee.firstName ?? '')
- setMiddleName(employee.middleName ?? '')
- setUsername('')
- setPassword('')
- setRole(employee.role ?? 'User')
- return
- }
+ const [avatarFile, setAvatarFile] = useState(null)
+ const [avatarPreviewUrl, setAvatarPreviewUrl] = useState('')
+ const avatarPreviewUrlRef = useRef('')
+ const passwordInputRef = useRef(null)
+ const passwordConfirmInputRef = useRef(null)
- if (!isEditMode) {
- setLastName('')
- setFirstName('')
- setMiddleName('')
- setUsername('')
- setPassword('')
- setRole('User')
- setOrgId('')
- }
- }, [open, isEditMode, employee])
+ const [createUploadUserAvatarUrl] = useMutation<
+ CreateUploadUserAvatarUrlData,
+ CreateUploadUserAvatarUrlVariables
+ >(CREATE_UPLOAD_USER_AVATAR_URL_MUTATION)
- const {
- data: organisationsData,
- loading: organisationsLoading,
- error: organisationsError,
- } = useQuery(
- GET_ORGANISATIONS_QUERY,
- {
- variables: {},
- skip: !open,
- fetchPolicy: 'network-only',
- },
- )
+ const [createUser, { loading, error }] = useMutation<
+ CreateUserData,
+ CreateUserVariables
+ >(CREATE_USER_MUTATION)
- const organisations = organisationsData?.getOrganisations.page ?? []
+ const [changeUser, { loading: isChangingUser, error: changeUserError }] =
+ useMutation(CHANGE_USER_MUTATION)
+ const [
+ changeUserWithPassword,
+ {
+ loading: isChangingUserWithPassword,
+ error: changeUserWithPasswordError,
+ },
+ ] = useMutation(
+ CHANGE_USER_WITH_PASSWORD_MUTATION,
+ )
- useEffect(() => {
- if (!open) return
- if (orgId) return
- if (!organisations.length) return
+ const isSubmitting =
+ loading || isChangingUser || isChangingUserWithPassword
+ const editError = changeUserError || changeUserWithPasswordError
+ const canConfirmPasswordChange =
+ Boolean(passwordDraft) && passwordDraft === passwordConfirm
+ const isPasswordActionConfirm = Boolean(passwordDraft)
+ const hasPasswordConfirmMismatch =
+ isPasswordChangeOpen && Boolean(passwordConfirm) && passwordDraft !== passwordConfirm
+ const hasUnconfirmedPasswordDraft = isEditMode && isPasswordChangeOpen
- setOrgId(String(organisations[0].id))
- }, [open, organisations, orgId])
+ useEffect(() => {
+ avatarPreviewUrlRef.current = avatarPreviewUrl
+ }, [avatarPreviewUrl])
- const [signUp, { loading, error }] = useMutation(
- SIGN_UP_MUTATION,
- {
- refetchQueries: [
- {
- query: GET_USERS_PAGE_QUERY,
- variables: {},
- },
- ],
- onCompleted: () => {
- setLastName('')
- setFirstName('')
- setMiddleName('')
- setUsername('')
- setPassword('')
- setRole('User')
- setOrgId('')
+ useEffect(() => {
+ return () => {
+ if (avatarPreviewUrlRef.current) {
+ URL.revokeObjectURL(avatarPreviewUrlRef.current)
+ }
+ }
+ }, [])
- onOpenChange(false)
- },
- },
- )
+ useEffect(() => {
+ if (!open) return
- function handleSubmit(event: React.FormEvent) {
- event.preventDefault()
+ clearAvatarDraft()
- if (!orgId) return
-
- if (isEditMode) {
- console.log('Редактирование сотрудника пока без мутации', {
- id: employee?.id,
- orgId,
- lastName,
- firstName,
- middleName,
- username,
- password,
- role,
- })
-
- onOpenChange(false)
- return
- }
-
- signUp({
- variables: {
- orgId,
- lastName,
- firstName,
- middleName,
- username,
- password,
- role,
- },
- })
+ if (isEditMode && employee) {
+ setOrgId(String(employee.org?.id ?? employee.orgId ?? ''))
+ setLastName(employee.lastName ?? '')
+ setFirstName(employee.firstName ?? '')
+ setMiddleName(employee.middleName ?? '')
+ setUsername(employee.username ?? '')
+ setPassword('')
+ setPasswordDraft('')
+ setPasswordConfirm('')
+ setIsPasswordChangeOpen(false)
+ setRole(employee.role ?? 'User')
+ return
}
- return (
-
-
-
-
- {activeSection === 'users' && (
- <>
- {usersLoading && employees.length === 0 && (
-
-
-
- )}
-
- )}
-
- {activeSection === 'organisations' && (
- <>
- {isOrganisationsInitialLoading && (
-
-
-
- )}
-
- )}
-
-
- {activeSection === 'users' && (
- Загрузка сотрудников...
- )}
-
- {usersError && (
-
- Не удалось загрузить сотрудников
-
- )}
-
- {!usersLoading && !usersError && employees.length === 0 && (
- Сотрудники не найдены
- )}
-
- {!usersError && employees.length > 0 && (
- | ID | -ФИО | -Организация | -Роль | -Управление | -
|---|---|---|---|---|
| {employee.id} | - -
-
-
- {getEmployeeFullName(employee) || 'ФИО не указано'}
-
-
- |
-
- - - {employee.org?.name || 'Организация не указана'} - - | - -- - {getEmployeeRoleLabel(employee.role)} - - | - -
-
-
-
-
-
- |
-
Загрузка организаций...
- )}
-
- {organisationsError && (
-
- Не удалось загрузить организации
-
- )}
-
- {!isOrganisationsInitialLoading &&
- !organisationsError &&
- organisations.length === 0 && (
- Организации не найдены
- )}
-
- {!organisationsError && organisations.length > 0 && (
- | ID | -Название организации | -Управление | -
|---|---|---|
| {organisation.id} | - -- - {organisation.name} - - | - -
-
-
-
-
-
- |
-
- Страница {usersCurrentPage}
-
-
- )}
-
- {activeSection === 'organisations' && (
-
-
-
-
-
-
-
-
-
-
+
-
-
- {organisationsPaginationItems.map((item, index) => {
- if (item === 'prev-ellipsis' || item === 'next-ellipsis') {
- const isPrev = item === 'prev-ellipsis'
-
- return (
-
- )
- }
-
- const pageIndex = item - 1
- const isActive = pageIndex === organisationsCurrentPage
-
- return (
-
- )
- })}
-
-
-
-
+ {activeSection === 'users' ? (
+
-
-
-
-
+ return () => {
+ window.cancelAnimationFrame(frameId)
+ }
+ }, [isPasswordChangeOpen])
+
+ function clearAvatarDraft() {
+ if (avatarPreviewUrlRef.current) {
+ URL.revokeObjectURL(avatarPreviewUrlRef.current)
+ avatarPreviewUrlRef.current = ''
+ }
+
+ setAvatarFile(null)
+ setAvatarPreviewUrl('')
+ }
+
+ function handleAvatarChange(file: File, previewUrl: string) {
+ if (avatarPreviewUrlRef.current) {
+ URL.revokeObjectURL(avatarPreviewUrlRef.current)
+ avatarPreviewUrlRef.current = ''
+ }
+
+ setAvatarFile(file)
+ setAvatarPreviewUrl(previewUrl)
+ }
+
+ function handleAvatarReset() {
+ clearAvatarDraft()
+ }
+
+ function openPasswordChange() {
+ if (isSubmitting) return
+
+ setPasswordDraft('')
+ setPasswordConfirm('')
+ setIsPasswordChangeOpen(true)
+ }
+
+ function confirmPasswordChange() {
+ if (!canConfirmPasswordChange || isSubmitting) return
+
+ setPassword(passwordDraft)
+ setIsPasswordChangeOpen(false)
+ }
+
+ function cancelPasswordChange() {
+ if (isSubmitting) return
+
+ setPassword('')
+ setPasswordDraft('')
+ setPasswordConfirm('')
+ setIsPasswordChangeOpen(false)
+ }
+
+ function closePasswordChange() {
+ if (isSubmitting) return
+
+ setPasswordDraft('')
+ setPasswordConfirm('')
+ setIsPasswordChangeOpen(false)
+ }
+
+ function handlePasswordAction() {
+ if (isPasswordActionConfirm) {
+ confirmPasswordChange()
+ return
+ }
+
+ closePasswordChange()
+ }
+
+ async function uploadAvatarForUser(userId: string) {
+ if (!avatarFile) return
+
+ const uploadUrlResult = await createUploadUserAvatarUrl({
+ variables: {
+ userId,
+ },
+ })
+
+ const uploadUrl = uploadUrlResult.data?.createUploadUserAvatarUrl
+
+ if (!uploadUrl) {
+ throw new Error('Не удалось получить ссылку для загрузки аватара')
+ }
+
+ await uploadMultipartFile(uploadUrl, 'avatar', avatarFile)
+ }
+
+ async function handleSubmit(event: FormEvent) {
+ event.preventDefault()
+
+ if (!orgId || isSubmitting) return
+
+ const trimmedLastName = lastName.trim()
+ const trimmedFirstName = firstName.trim()
+ const trimmedMiddleName = middleName.trim()
+ const trimmedUsername = username.trim()
+ const hasPasswordValue = Boolean(password.trim())
+
+ if (
+ !trimmedLastName ||
+ !trimmedFirstName ||
+ !trimmedMiddleName ||
+ !trimmedUsername ||
+ (!isEditMode && !hasPasswordValue)
+ ) {
+ return
+ }
+
+ if (hasUnconfirmedPasswordDraft) return
+
+ if (isEditMode) {
+ if (!employee?.id) return
+
+ try {
+ const changeUserVariables: ChangeUserVariables = {
+ userId: String(employee.id),
+ orgId,
+ lastName: trimmedLastName,
+ firstName: trimmedFirstName,
+ middleName: trimmedMiddleName,
+ username: trimmedUsername,
+ role,
+ }
+
+ if (hasPasswordValue) {
+ await changeUserWithPassword({
+ variables: {
+ ...changeUserVariables,
+ password,
+ },
+ })
+ } else {
+ await changeUser({
+ variables: changeUserVariables,
+ })
+ }
+
+ try {
+ await uploadAvatarForUser(String(employee.id))
+ } catch (avatarError) {
+ console.error('Сотрудник изменён, но аватар не загрузился', avatarError)
+ }
+
+ try {
+ await onSuccess?.()
+ } catch (successError) {
+ console.error('Сотрудник изменён, но refetch после изменения не сработал', successError)
+ }
+
+ onOpenChange(false)
+ } catch (changeError) {
+ console.error('Не удалось изменить сотрудника', changeError)
+ }
+
+ return
+ }
+
+ try {
+ const result = await createUser({
+ variables: {
+ orgId,
+ lastName: trimmedLastName,
+ firstName: trimmedFirstName,
+ middleName: trimmedMiddleName,
+ username: trimmedUsername,
+ password,
+ role,
+ },
+ })
+
+ const createdUserId = result.data?.createUser.id
+
+ if (!createdUserId) {
+ throw new Error('Пользователь создан, но id не вернулся')
+ }
+
+ if (avatarFile) {
+ try {
+ await uploadAvatarForUser(String(createdUserId))
+ //await onSuccess?.()
+ } catch (avatarError) {
+ console.error('Сотрудник создан, но аватар не загрузился', avatarError)
+ }
+ }
+
+ try {
+ await onSuccess?.()
+ } catch (successError) {
+ console.error('Сотрудник создан, но refetch после создания не сработал', successError)
+ }
+
+ onOpenChange(false)
+ } catch (createError) {
+ console.error('Не удалось создать сотрудника', createError)
+ }
+ }
+
+ return (
+
+
+
-
- {isEditMode ? 'Редактировать' : 'Добавить сотрудника'}
-
+ useEffect(() => {
+ if (!isPasswordChangeOpen) return
-
- {isEditMode
- ? 'Изменение данных пользователя системы MDM'
- : 'Создание пользователя для доступа к системе MDM'}
-
-
+ const frameId = window.requestAnimationFrame(() => {
+ passwordInputRef.current?.focus()
+ })
-
+
+
+
+
+
+
+ {isEditMode ? 'Редактировать' : 'Добавить сотрудника'}
+
+
+
+ {isEditMode
+ ? 'Изменение данных пользователя системы MDM'
+ : 'Создание пользователя для доступа к системе MDM'}
+
+
+
+