feat: add description in devices page

src/widgets/DevicesTable/index.tsx

@@ -11,6 +11,7 @@ import {
   Vehicle,
   carrierStore,
   selectedCityStore,
+  menuStore,
   VEHICLE_TYPES,
 } from "@shared";
 import { useEffect, useMemo, useState } from "react";
@@ -33,6 +34,7 @@ import {
   CircularProgress,
   Typography,
   Checkbox,
+  Tooltip,
 } from "@mui/material";
 import { toast } from "react-toastify";
 import { useNavigate } from "react-router-dom";
@@ -370,17 +372,20 @@ export const DevicesTable = observer(() => {
         filterable: true,
       },
       {
-        field: "can_send_update",
+        field: "snapshot_update_blocked",
-        headerName: "Обновление",
+        headerName: "Запрет",
         width: 90,
         align: "center",
         headerAlign: "center",
         sortable: false,
         disableColumnMenu: true,
+        renderHeader: (params) => (
+          <Tooltip title="При активации, на выбранные устройства не будут поступать обновления">
+            <span>{params.colDef.headerName}</span>
+          </Tooltip>
+        ),
         renderCell: (params: GridRenderCellParams) => {
           const rowData = params.row as RowData;
-          const canSend =
-            !rowData.snapshot_update_blocked && rowData.device_uuid !== null;
           return (
             <Box
               sx={{
@@ -391,12 +396,9 @@ export const DevicesTable = observer(() => {
                 height: "100%",
                 pointerEvents: "none",
               }}
-              title={
-                canSend ? "Можно отправить запрос" : "Блокировка обновления"
-              }
             >
               <Checkbox
-                checked={canSend as unknown as boolean}
+                checked={rowData.snapshot_update_blocked}
                 disabled
                 size="small"
                 sx={{ p: 0 }}
@@ -408,11 +410,17 @@ export const DevicesTable = observer(() => {
       {
         field: "online",
         headerName: "Онлайн",
-        width: 90,
+        width: menuStore.isOpen ? 90 : undefined,
+        flex: menuStore.isOpen ? undefined : 1,
         align: "center",
         headerAlign: "center",
         type: "boolean",
         filterable: true,
+        renderHeader: (params) => (
+          <Tooltip title="Устройство в сети">
+            <span>{params.colDef.headerName}</span>
+          </Tooltip>
+        ),
         renderCell: (params: GridRenderCellParams) => (
           <Box
             sx={{ display: "flex", justifyContent: "center", width: "100%" }}
@@ -433,6 +441,11 @@ export const DevicesTable = observer(() => {
         headerAlign: "center",
         type: "boolean",
         filterable: true,
+        renderHeader: (params) => (
+          <Tooltip title="Режим технического обслуживания экрана для предотвращения возможного наложения изображения">
+            <span>{params.colDef.headerName}</span>
+          </Tooltip>
+        ),
         renderCell: (params: GridRenderCellParams) => {
           const rowData = params.row as RowData;
           const isMaintenanceLoading =
@@ -467,6 +480,11 @@ export const DevicesTable = observer(() => {
         headerAlign: "center",
         type: "boolean",
         filterable: true,
+        renderHeader: (params) => (
+          <Tooltip title="Отправка фиктивных координат на устройство для демонстрации работы">
+            <span>{params.colDef.headerName}</span>
+          </Tooltip>
+        ),
         renderCell: (params: GridRenderCellParams) => {
           const rowData = params.row as RowData;
           const isDemoLoading =
@@ -492,19 +510,29 @@ export const DevicesTable = observer(() => {
       },
       {
         field: "lastUpdate",
-        headerName: "Обновлено",
+        headerName: "Дата последнего статуса",
         flex: 1,
-        minWidth: 140,
+        minWidth: 200,
         filterable: true,
+        renderHeader: (params) => (
+          <Tooltip title="Дата получения последнего статуса от устройства">
+            <span>{params.colDef.headerName}</span>
+          </Tooltip>
+        ),
         renderCell: (params: GridRenderCellParams) =>
           formatDate(params.value as string | null),
       },
       {
         field: "snapshot_name",
         headerName: "Экспорт на устройстве",
-        flex: 1,
+        flex: menuStore.isOpen ? 1 : 2,
         minWidth: 140,
         filterable: true,
+        renderHeader: (params) => (
+          <Tooltip title="Название загруженного экспорта медиа">
+            <span>{params.colDef.headerName}</span>
+          </Tooltip>
+        ),
         valueGetter: (_value, row, _apiRef) => {
           const rowData = row as RowData;
           const uuid = rowData.current_snapshot_uuid;
@@ -519,22 +547,33 @@ export const DevicesTable = observer(() => {
         flex: 1,
         minWidth: 140,
         filterable: true,
+        renderHeader: (params) => (
+          <Tooltip title="Номер и буквенный код отображаемого на экране маршрута">
+            <span>{params.colDef.headerName}</span>
+          </Tooltip>
+        ),
         valueGetter: (_value, row) => {
           const rowData = row as RowData;
           const routeId = rowData.current_route_id;
           if (!routeId) return "—";
           const route = routes.data.find((r) => r.id === routeId);
-          return route?.route_number || "—";
+          return route?.route_sys_number || "—";
         },
       },
       {
         field: "gps",
         headerName: "GPS",
-        width: 70,
+        width: menuStore.isOpen ? 70 : undefined,
+        flex: menuStore.isOpen ? undefined : 1,
         align: "center",
         headerAlign: "center",
         type: "boolean",
         filterable: true,
+        renderHeader: (params) => (
+          <Tooltip title="Получение GPS координат">
+            <span>{params.colDef.headerName}</span>
+          </Tooltip>
+        ),
         renderCell: (params: GridRenderCellParams) => (
           <Box
             sx={{ display: "flex", justifyContent: "center", width: "100%" }}
@@ -705,7 +744,7 @@ export const DevicesTable = observer(() => {
       selectedDeviceUuids.length - selectedDeviceUuidsAllowed.length;
     if (blockedCount > 0) {
       toast.info(
-        `Обновление ПО не отправлено на ${blockedCount} устройств (блокировка)`,
+        `Экспорт медиа не отправлен на ${blockedCount} устройств (блокировка)`,
       );
     }
 
@@ -715,10 +754,10 @@ export const DevicesTable = observer(() => {
           `/devices/${deviceUuid}/force-snapshot-update`,
           { snapshot_id: snapshotId },
         );
-        toast.success("Обновление ПО отправлено на устройство");
+        toast.success("Экспорт медиа отправлен на устройство");
       } catch (error) {
         console.error(`Error sending snapshot to device ${deviceUuid}:`, error);
-        toast.error("Не удалось отправить обновление ПО на устройство");
+        toast.error("Не удалось отправить экспорт медиа на устройство");
       }
     };
 
@@ -800,7 +839,7 @@ export const DevicesTable = observer(() => {
               onClick={handleOpenSendSnapshotModal}
               size="small"
             >
-              Обновление ПО ({selectedDeviceUuidsAllowed.length}
+              Экспорт медиа ({selectedDeviceUuidsAllowed.length}
               {selectedDeviceUuids.length !==
                 selectedDeviceUuidsAllowed.length &&
                 `/${selectedDeviceUuids.length}`}
@@ -914,7 +953,7 @@ export const DevicesTable = observer(() => {
           sx={{ width: "min(760px, 94vw)", p: 3 }}
         >
           <Box component="h2" sx={{ mb: 1, typography: "h6" }}>
-            Обновление ПО
+            Экспорт медиа
           </Box>
           <Box sx={{ mb: 2 }}>
             Выбрано устройств для обновления:{" "}