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;

src/Components/ListCard/TeamListCard/TeamMemberCard/TeamMemberCard.css

@@ -1,6 +1,3 @@
-.TeamMembers {
-    margin-top: 10px;
-    gap: 10px;
-    display: flex;
-    flex-direction: column;
+.TeamMemberCard {
+    min-height: 100px;
 }

src/Components/ListCard/TeamListCard/TeamMemberCard/TeamMemberCard.tsx

@@ -30,7 +30,13 @@ function TeamMemberCard(props: { cur_team: Team; member: TeamMember }) {
   );
 
   return (
-    <Card padding="sm" withBorder orientation="horizontal">
+    <Card
+      padding="sm"
+      withBorder
+      orientation="horizontal"
+      className="TeamMemberCard"
+      key={props.member.user.keycloak_id}
+    >
       <Card.Section
         inheritPadding
         px="xs"
@@ -168,7 +174,6 @@ function TeamMemberCard(props: { cur_team: Team; member: TeamMember }) {
                 placeholder="Выберите разрешения"
                 searchable
                 data={props.cur_team.creator.permissions}
-                classNames={{ input: "MantineInput" }}
                 onChange={(value) => {
                   set_selected_permissions(value);
                 }}
@@ -227,10 +232,10 @@ function TeamMemberCard(props: { cur_team: Team; member: TeamMember }) {
             }}
           >
             <Text size="sm" style={{ textAlign: "right" }}>
-              {new Date(props.member.joined_at).toLocaleDateString("ru")}
+              {new Date(props.member.joined_at + "Z").toLocaleDateString("ru")}
             </Text>
             <Text size="sm" style={{ textAlign: "right" }}>
-              {new Date(props.member.joined_at).toLocaleTimeString("ru")}
+              {new Date(props.member.joined_at + "Z").toLocaleTimeString("ru")}
             </Text>
           </div>
         </Stack>

src/Components/ListCard/TeamListCard/TeamsListCard.tsx

@@ -90,17 +90,19 @@ function TeamsListCard(props: Team) {
         <Text mb="sm" size="md" style={{ textDecorationLine: "underline" }}>
           Команда: {props.name}
         </Text>
-        <Text mb="sm" size="md">
-          Владелец:
+        <div style={{ display: "flex" }}>
+          <Text mb="sm" size="md">
+            Владелец:
+          </Text>
           <Pill className="TeamPill" style={{ marginLeft: "10px" }}>
             <Text size="md">{props.creator.user.username}</Text>
           </Pill>
-        </Text>
+        </div>
         <div className="membersPills">
           <Text>Члены:</Text>
           {props.members.map((team: TeamMember) => {
             return (
-              <Pill className="TeamPill" style={{ marginLeft: "10px" }}>
+              <Pill className="TeamPill">
                 <Text
                   size="md"
                   style={{
@@ -170,10 +172,10 @@ function TeamsListCard(props: Team) {
         <div className="TopRightContainer">
           <div className="dateContainer">
             <Text size="sm">
-              {new Date(props.created_at).toLocaleDateString()}{" "}
+              {new Date(props.created_at + "Z").toLocaleDateString()}{" "}
             </Text>
             <Text size="sm">
-              {new Date(props.created_at).toLocaleTimeString()}
+              {new Date(props.created_at + "Z").toLocaleTimeString()}
             </Text>
           </div>
           {props.creator.user.keycloak_id == profile?.id && (