feat: demo page realisation

src/pages/Station/StationListPage/index.tsx

@@ -9,7 +9,7 @@ import {
 } from "@shared";
 import { useEffect, useState, useMemo } from "react";
 import { observer } from "mobx-react-lite";
-import { Pencil, Trash2, Minus, Route } from "lucide-react";
+import { Pencil, Trash2, Minus, Route, Check, X } from "lucide-react";
 import { useNavigate } from "react-router-dom";
 import {
   CreateButton,
@@ -17,10 +17,10 @@ import {
   LanguageSwitcher,
   EditStationTransfersModal,
 } from "@widgets";
-import { Box, CircularProgress } from "@mui/material";
+import { Box, CircularProgress, Tooltip } from "@mui/material";
 
 export const StationListPage = observer(() => {
-  const { stationLists, getStationList, deleteStation } = stationsStore;
+  const { stationLists, getStationList, deleteStation, sightCounts, sightCountsLoading, loadSightCounts } = stationsStore;
   const navigate = useNavigate();
   const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
   const [isBulkDeleteModalOpen, setIsBulkDeleteModalOpen] = useState(false);
@@ -44,6 +44,9 @@ export const StationListPage = observer(() => {
       setIsLoading(true);
       await getStationList();
       setIsLoading(false);
+
+      const stationIds = stationLists[language].data.map((s: any) => s.id);
+      loadSightCounts(stationIds);
     };
     fetchStations();
   }, [language]);
@@ -81,6 +84,52 @@ export const StationListPage = observer(() => {
         );
       },
     },
+    {
+      field: "sightCount",
+      headerName: "Достопримечательности",
+      width: 180,
+      align: "center" as const,
+      headerAlign: "center" as const,
+      sortable: true,
+      renderHeader: (params) => (
+        <Tooltip title="Количество привязанных достопримечательностей">
+          <span>{params.colDef.headerName}</span>
+        </Tooltip>
+      ),
+      renderCell: (params: GridRenderCellParams) => (
+        <div className="w-full h-full flex items-center justify-center">
+          {params.value === null ? (
+            <CircularProgress size={14} />
+          ) : (
+            params.value
+          )}
+        </div>
+      ),
+    },
+    {
+      field: "hasTransfers",
+      headerName: "Пересадки",
+      width: 120,
+      align: "center" as const,
+      headerAlign: "center" as const,
+      sortable: true,
+      renderHeader: (params) => (
+        <Tooltip title="Подтверждение добавленных пересадок">
+          <span>{params.colDef.headerName}</span>
+        </Tooltip>
+      ),
+      renderCell: (params: GridRenderCellParams) => (
+        <Box
+          sx={{ display: "flex", justifyContent: "center", alignItems: "center", width: "100%", height: "100%" }}
+        >
+          {params.value ? (
+            <Check size={18} className="text-green-600" />
+          ) : (
+            <X size={18} className="text-red-600" />
+          )}
+        </Box>
+      ),
+    },
     {
       field: "actions",
       headerName: "Действия",
@@ -138,8 +187,12 @@ export const StationListPage = observer(() => {
         id: station.id,
         name: station.name,
         description: station.description,
+        sightCount: sightCounts.has(station.id) ? sightCounts.get(station.id) : null,
+        hasTransfers: station.transfers
+          ? Object.values(station.transfers).some((v: any) => v != null && v !== "")
+          : false,
       }));
-  }, [stationLists[language].data, selectedCityStore.selectedCityId, searchQuery]);
+  }, [stationLists[language].data, selectedCityStore.selectedCityId, searchQuery, sightCounts.size, sightCountsLoading]);
 
   return (
     <>