feat: pagination for tables with deleted station directions

src/widgets/DevicesTable/index.tsx

@@ -5,18 +5,18 @@ import TableContainer from "@mui/material/TableContainer";
 import TableHead from "@mui/material/TableHead";
 import TableRow from "@mui/material/TableRow";
 import Paper from "@mui/material/Paper";
-import { Check, Copy, RotateCcw, Trash2, X } from "lucide-react";
+import { Check, Copy, Pencil, RotateCcw, Trash2, X } from "lucide-react";
 import {
   authInstance,
   devicesStore,
   Modal,
   snapshotStore,
   vehicleStore,
+  Vehicle,
 } from "@shared";
 import { useEffect, useState } from "react";
 import { observer } from "mobx-react-lite";
 import { Button, Checkbox, Typography } from "@mui/material";
-import { Vehicle } from "@shared";
 import { toast } from "react-toastify";
 import { useNavigate } from "react-router-dom";
 import { DeleteModal } from "@widgets";
@@ -47,6 +47,7 @@ const formatDate = (dateString: string | null) => {
 };
 
 type TableRowData = {
+  vehicle_id: number;
   tail_number: number;
   online: boolean;
   lastUpdate: string | null;
@@ -56,6 +57,7 @@ type TableRowData = {
   device_uuid: string | null;
 };
 function createData(
+  vehicle_id: number,
   tail_number: number,
   online: boolean,
   lastUpdate: string | null,
@@ -65,6 +67,7 @@ function createData(
   device_uuid: string | null
 ): TableRowData {
   return {
+    vehicle_id,
     tail_number,
     online,
     lastUpdate,
@@ -80,6 +83,7 @@ const transformDevicesToRows = (vehicles: Vehicle[]): TableRowData[] => {
     const uuid = vehicle.vehicle.uuid;
     if (!uuid)
       return {
+        vehicle_id: vehicle.vehicle.id,
         tail_number: vehicle.vehicle.tail_number,
         online: false,
         lastUpdate: null,
@@ -89,6 +93,7 @@ const transformDevicesToRows = (vehicles: Vehicle[]): TableRowData[] => {
         device_uuid: null,
       };
     return createData(
+      vehicle.vehicle.id,
       vehicle.vehicle.tail_number,
       vehicle.device_status?.online ?? false,
       vehicle.device_status?.last_update ?? null,
@@ -404,37 +409,54 @@ export const DevicesTable = observer(() => {
                   </div>
                 </TableCell>
                 <TableCell align="center">
-                  <Button
-                    onClick={async (e) => {
-                      e.stopPropagation();
-                      try {
-                        if (
-                          row.device_uuid &&
-                          devices.find((device) => device === row.device_uuid)
-                        ) {
-                          await handleReloadStatus(row.device_uuid);
-                          toast.success("Статус устройства обновлен");
-                        } else {
-                          toast.error("Нет связи с устройством");
+                  <div className="flex items-center justify-center gap-1">
+                    <Button
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        navigate(`/vehicle/${row.vehicle_id}/edit`);
+                      }}
+                      title="Редактировать транспорт"
+                      size="small"
+                      variant="text"
+                    >
+                      <Pencil size={16} />
+                    </Button>
+                    <Button
+                      onClick={async (e) => {
+                        e.stopPropagation();
+                        try {
+                          if (
+                            row.device_uuid &&
+                            devices.find((device) => device === row.device_uuid)
+                          ) {
+                            await handleReloadStatus(row.device_uuid);
+                            toast.success("Статус устройства обновлен");
+                          } else {
+                            toast.error("Нет связи с устройством");
+                          }
+                        } catch (error) {
+                          toast.error("Ошибка сервера");
                         }
-                      } catch (error) {
-                        toast.error("Ошибка сервера");
-                      }
-                    }}
-                    title="Перезапросить статус"
-                    size="small"
-                    variant="text"
-                  >
-                    <RotateCcw size={16} />
-                  </Button>
-                  <Button
-                    onClick={() => {
-                      navigator.clipboard.writeText(row.device_uuid ?? "");
-                      toast.success("UUID скопирован");
-                    }}
-                  >
-                    <Copy size={16} />
-                  </Button>
+                      }}
+                      title="Перезапросить статус"
+                      size="small"
+                      variant="text"
+                    >
+                      <RotateCcw size={16} />
+                    </Button>
+                    <Button
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        navigator.clipboard.writeText(row.device_uuid ?? "");
+                        toast.success("UUID скопирован");
+                      }}
+                      title="Копировать UUID"
+                      size="small"
+                      variant="text"
+                    >
+                      <Copy size={16} />
+                    </Button>
+                  </div>
                 </TableCell>
               </TableRow>
             ))}