added comp_systems and modular instances frontend

src/Components/ListCard/TeamListCard/TeamInMachineCard/TeamInMachine.tsx

@@ -0,0 +1,116 @@
+import { Card, Text, UnstyledButton } from "@mantine/core";
+import { IconCancel, IconCheck, IconTrash } from "@tabler/icons-react";
+import type { MouseEvent } from "react";
+import { notifications } from "@mantine/notifications";
+import type { SystemTeamData, SystemWithTeams } from "Types/Machine/Machine";
+import { removeSystemFromTeam } from "Api/QuantumBackend/MachineManagment";
+import { useDeviceStore } from "Stores/DeviceStore";
+
+function TeamInMachineListCard(props: {
+  team: SystemTeamData;
+  system: SystemWithTeams;
+}) {
+  const { updateDevice } = useDeviceStore();
+
+  const handleRemovePerm = () => {
+    // TODO: fix delete
+    removeSystemFromTeam({
+      team_id: props.team.team.team_id,
+      system_id: props.system.system.id,
+    })
+      .then(() => {
+        updateDevice(props.system.system.id, {
+          teams: props.system.teams.filter(
+            (team) => team.team.team_id != props.team.team.team_id,
+          ),
+        });
+        notifications.show({
+          radius: "md",
+          title: "Команда удалена успешно",
+          message: "",
+          icon: <IconCheck />,
+          style: { paddingLeft: "5px" },
+        });
+      })
+      .catch(() => {
+        notifications.show({
+          radius: "md",
+          color: "red",
+          title: "Не удалось удалить команду",
+          message: "",
+          icon: <IconCancel />,
+          style: { paddingLeft: "5px" },
+        });
+      });
+  };
+
+  return (
+    <Card orientation="horizontal">
+      <Card.Section
+        withBorder
+        inheritPadding
+        px="xs"
+        style={{
+          width: "430px",
+          display: "flex",
+          flexDirection: "row",
+          gap: "15px",
+        }}
+      >
+        <Text size="md" style={{ textDecorationLine: "underline" }}>
+          Команда: {props.team.team.team_name}
+        </Text>
+
+        <Text c="dimmed" size="md">
+          #{props.team.team.team_id}
+        </Text>
+      </Card.Section>
+      <Card.Section
+        inheritPadding
+        px="xs"
+        withBorder
+        style={{
+          flexGrow: "1",
+          gap: "15px",
+          display: "flex",
+          flexDirection: "row",
+        }}
+      >
+        <Text>Количество кубит: {props.team.num_qubits}</Text>
+      </Card.Section>
+      <Card.Section
+        inheritPadding
+        px="md"
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          justifyContent: "space-between",
+        }}
+      >
+        <div className="TopRightContainer">
+          <div className="dateContainer">
+            <Text size="sm">
+              {new Date(props.team.created_at + "Z").toLocaleDateString(
+                "ru",
+              )}{" "}
+            </Text>
+            <Text size="sm">
+              {new Date(props.team.created_at + "Z").toLocaleTimeString("ru")}
+            </Text>
+          </div>
+          <UnstyledButton
+            onClick={(e: MouseEvent) => {
+              e.stopPropagation();
+              handleRemovePerm();
+            }}
+            style={{ cursor: "pointer" }}
+          >
+            <IconTrash size={20} />
+          </UnstyledButton>
+        </div>
+      </Card.Section>
+    </Card>
+  );
+}
+
+export default TeamInMachineListCard;