trust-module-frontend/src/Components/Layout/Dashboard.jsx

import React, { useState, useEffect, useRef, useCallback } from "react";
import SidebarMenu from "./SidebarMenu";
import TreeChart from "../TreeChart/TreeChart";
import "../../Style/Dashboard.css";
import SystemStatusChart from "../../Charts/SystemStatusChart";
import Tabs from "../UI/Tabs";
import menuData from "../TreeChart/menuData.json";
import TreeTable from "../UI/TreeTable";
import { statusManager1, statusManager2 } from "../TreeChart/dataUtils";
import generateTabContent from "../TreeChart/tabContent";

const Dashboard = () => {
  const [tabs, setTabs] = useState([]);
  const [activeTab, setActiveTab] = useState("Главная");
  const [tabContent, setTabContent] = useState({});
  const [treeData1, setTreeData1] = useState(menuData);
  const [treeData2, setTreeData2] = useState(menuData);
  const [sidebarWidth, setSidebarWidth] = useState(250);
  const [isResizing, setIsResizing] = useState(false);
  const [statusHistories, setStatusHistories] = useState({
    history1: [],
    history2: [],
  });
  const sidebarRef = useRef(null);

  useEffect(() => {
    const generatedTabContent = generateTabContent(menuData);
    setTabContent(generatedTabContent);
  }, []);

  useEffect(() => {
    const interval = setInterval(() => {
      const updatedData1 = JSON.parse(JSON.stringify(treeData1));
      const averageStatusValue1 = statusManager1.updateStatuses(updatedData1);
      const statusPercentage1 = Math.max(0, Math.min(100, averageStatusValue1 * 100));

      const updatedData2 = JSON.parse(JSON.stringify(treeData2));
      const averageStatusValue2 = statusManager2.updateStatuses(updatedData2);
      const statusPercentage2 = Math.max(0, Math.min(100, averageStatusValue2 * 100));

      setStatusHistories((prevHistories) => ({
        history1: [
          ...prevHistories.history1.slice(-49),
          { time: new Date().toLocaleTimeString(), status: statusPercentage1 },
        ],
        history2: [
          ...prevHistories.history2.slice(-49),
          { time: new Date().toLocaleTimeString(), status: statusPercentage2 },
        ],
      }));

      setTreeData1(updatedData1);
      setTreeData2(updatedData2);
    }, 30000);

    return () => clearInterval(interval);
  }, [treeData1, treeData2]);

  const startResizing = useCallback((e) => {
    e.preventDefault();
    setIsResizing(true);
  }, []);

  const resize = useCallback((e) => {
    if (isResizing) {
      const newWidth = e.clientX;
      if (newWidth > 100 && newWidth < 400) {
        setSidebarWidth(newWidth);
      }
    }
  }, [isResizing]);

  const stopResizing = useCallback(() => {
    setIsResizing(false);
  }, []);

  useEffect(() => {
    const handleMouseMove = (e) => resize(e);
    const handleMouseUp = () => stopResizing();

    if (isResizing) {
      window.addEventListener("mousemove", handleMouseMove);
      window.addEventListener("mouseup", handleMouseUp);
    }

    return () => {
      window.removeEventListener("mousemove", handleMouseMove);
      window.removeEventListener("mouseup", handleMouseUp);
    };
  }, [isResizing, resize, stopResizing]);

  const handleOpenTab = (id, title) => {
    if (!tabs.some((tab) => tab.id === id)) {
      setTabs([...tabs, { id, title }]);
    }
    setActiveTab(id);
  };

  const handleCloseTab = (id) => {
    const newTabs = tabs.filter((tab) => tab.id !== id);
    setTabs(newTabs);
    if (activeTab === id) {
      setActiveTab(newTabs.length > 0 ? newTabs[newTabs.length - 1].id : "Главная");
    }
  };

  const renderTabContent = () => {
    if (activeTab === "Главная") {
      return (
        <div>
          <h2>Общий мониторинг состояния системы</h2>
          <label>Процент доверия системы</label>
          <SystemStatusChart data={statusHistories.history1} />
          <label>Функциональность системы</label>
          <SystemStatusChart data={statusHistories.history2} />
          <label>Статус компонентов системы</label>
          <TreeTable data={treeData1} />
        </div>
      );
    } else if (activeTab === "Визуализация") {
      return <TreeChart data={treeData1} onNodeClick={(id, title) => handleOpenTab(id, title)} />;
    } else {
      const tabData = tabContent[activeTab];
      return tabData ? tabData.content : <p>Нет данных</p>;
    }
  };

  return (
    <div className="dashboard-container">
      <div
        className="sidebar"
        ref={sidebarRef}
        style={{ width: sidebarWidth }}
      >
        <SidebarMenu data={treeData1} onOpenTab={handleOpenTab} sidebarWidth={sidebarWidth} />
        <div
          className="sidebar-resizer"
          onMouseDown={startResizing}
        />
      </div>

      <div className="main-content" style={{ marginLeft: sidebarWidth }}>
        <Tabs
          tabs={tabs}
          activeTab={activeTab}
          onTabClick={(id) => setActiveTab(id)}
          onCloseTab={handleCloseTab}
        />
        <div className="content">
          {renderTabContent()}
        </div>
      </div>
    </div>
  );
};

export default Dashboard;