@nualang/nualang-ui-components 0.1.1399 → 0.2.0

package/dist/Forms/CreateMeetingMultiStepForm/GroupAssignment.js

@@ -1,919 +0,0 @@
-/* eslint-disable react/prop-types */
-import { useEffect, useState, useMemo } from "react";
-import Typography from "@mui/material/Typography";
-import Checkbox from "@mui/material/Checkbox";
-import Avatar from "@mui/material/Avatar";
-import Button from "@mui/material/Button";
-import Grid from "@mui/material/Grid";
-import Box from "@mui/material/Box";
-import InputLabel from "@mui/material/InputLabel";
-import MenuItem from "@mui/material/MenuItem";
-import FormControl from "@mui/material/FormControl";
-import Select from "@mui/material/Select";
-import Divider from "@mui/material/Divider";
-import FormControlLabel from "@mui/material/FormControlLabel";
-import { Card, CardContent, CardActions, Paper } from "@mui/material";
-import GroupsIcon from "@mui/icons-material/Groups";
-import DragIndicatorIcon from "@mui/icons-material/DragIndicator";
-import AddIcon from "@mui/icons-material/Add";
-import { DndContext, DragOverlay, closestCenter, KeyboardSensor, PointerSensor, useSensor, useSensors, useDroppable } from "@dnd-kit/core";
-import { SortableContext, sortableKeyboardCoordinates, verticalListSortingStrategy, useSortable } from "@dnd-kit/sortable";
-import { CSS } from "@dnd-kit/utilities";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const accentColors = ["#6366f1", "#8b5cf6", "#06b6d4", "#22c55e", "#f97316", "#ec4899"];
-const MAX_GROUP_SIZE = 4;
-const groupByN = (n, arr) => {
-  arr = arr.sort(() => Math.random() - 0.5);
-  let result = [];
-  if (n === 2) {
-    let remainingElements = arr.length % 2;
-    if (remainingElements === 1) {
-      result.push(arr.slice(0, 3));
-      arr = arr.slice(3);
-    }
-  } else if (n === 3) {
-    let remainingElements = arr.length % 3;
-    if (remainingElements === 2) {
-      if (arr.length > 7) {
-        result.push(arr.slice(0, 4));
-        arr = arr.slice(4);
-        result.push(arr.slice(0, 4));
-        arr = arr.slice(4);
-      } else {
-        result.push(arr.slice(0, 3));
-        arr = arr.slice(3);
-      }
-    } else if (remainingElements === 1) {
-      if (arr.length < 6) {
-        result.push(arr.slice(0, 2));
-        arr = arr.slice(2);
-      } else {
-        result.push(arr.slice(0, 4));
-        arr = arr.slice(4);
-      }
-    }
-  } else if (n === 4) {
-    let remainingElements = arr.length % 4;
-    if (remainingElements === 1) {
-      if (arr.length > 8) {
-        result.push(arr.slice(0, 3));
-        arr = arr.slice(3);
-        result.push(arr.slice(0, 3));
-        arr = arr.slice(3);
-        result.push(arr.slice(0, 3));
-        arr = arr.slice(3);
-      } else {
-        result.push(arr.slice(0, 3));
-        arr = arr.slice(3);
-      }
-    } else if (remainingElements === 2) {
-      if (arr.length > 5) {
-        result.push(arr.slice(0, 3));
-        arr = arr.slice(3);
-        result.push(arr.slice(0, 3));
-        arr = arr.slice(3);
-      } else {
-        result.push(arr.slice(0, 3));
-        arr = arr.slice(3);
-      }
-    } else if (remainingElements === 3) {
-      result.push(arr.slice(0, 3));
-      arr = arr.slice(3);
-    }
-  }
-  for (let i = 0; i < arr.length; i += n) {
-    result.push(arr.slice(i, i + n));
-  }
-  return result;
-};
-function groupNames(groups, names) {
-  const groupedNames = groups.map(group => {
-    const ids = group.map(i => {
-      return names[i];
-    });
-    return ids;
-  });
-  return groupedNames;
-}
-function DraggableMember({
-  userIndex,
-  member
-}) {
-  const {
-    attributes,
-    listeners,
-    setNodeRef,
-    transform,
-    transition,
-    isDragging
-  } = useSortable({
-    id: `member-${userIndex}`
-  });
-  const style = {
-    transform: CSS.Transform.toString(transform),
-    transition,
-    opacity: isDragging ? 0 : 1
-  };
-  return /*#__PURE__*/_jsxs(Box, {
-    ref: setNodeRef,
-    style: style,
-    sx: {
-      display: "flex",
-      alignItems: "center",
-      gap: 1.5,
-      py: 1,
-      px: 1,
-      borderRadius: 1,
-      bgcolor: "background.paper",
-      "&:hover": {
-        bgcolor: "action.hover"
-      }
-    },
-    children: [/*#__PURE__*/_jsx(Box, {
-      ...attributes,
-      ...listeners,
-      sx: {
-        cursor: "grab",
-        display: "flex",
-        alignItems: "center",
-        color: "text.secondary",
-        "&:hover": {
-          color: "text.primary"
-        }
-      },
-      children: /*#__PURE__*/_jsx(DragIndicatorIcon, {
-        fontSize: "small"
-      })
-    }), /*#__PURE__*/_jsx(Avatar, {
-      alt: member?.username,
-      src: member?.userImage,
-      sx: {
-        width: 36,
-        height: 36
-      }
-    }), /*#__PURE__*/_jsx(Typography, {
-      variant: "body2",
-      sx: {
-        color: "text.primary",
-        flexGrow: 1
-      },
-      children: member?.username
-    })]
-  });
-}
-function DragOverlayContent({
-  member
-}) {
-  return /*#__PURE__*/_jsxs(Box, {
-    sx: {
-      display: "flex",
-      alignItems: "center",
-      gap: 1.5,
-      py: 1,
-      px: 2,
-      borderRadius: 1,
-      bgcolor: "background.paper",
-      boxShadow: "0 4px 12px rgba(0,0,0,0.15)",
-      border: "1px solid",
-      borderColor: "primary.main"
-    },
-    children: [/*#__PURE__*/_jsx(DragIndicatorIcon, {
-      fontSize: "small",
-      sx: {
-        color: "text.secondary"
-      }
-    }), /*#__PURE__*/_jsx(Avatar, {
-      alt: member?.username,
-      src: member?.userImage,
-      sx: {
-        width: 36,
-        height: 36
-      }
-    }), /*#__PURE__*/_jsx(Typography, {
-      variant: "body2",
-      sx: {
-        color: "text.primary"
-      },
-      children: member?.username
-    })]
-  });
-}
-function NewGroupDropZone({
-  isOver,
-  isDragging,
-  t
-}) {
-  const {
-    setNodeRef
-  } = useDroppable({
-    id: "new-group-drop-zone"
-  });
-  return /*#__PURE__*/_jsx(Card, {
-    ref: setNodeRef,
-    variant: "outlined",
-    sx: {
-      width: "100%",
-      height: "100%",
-      minHeight: 180,
-      display: "flex",
-      flexDirection: "column",
-      justifyContent: "center",
-      alignItems: "center",
-      borderRadius: 3,
-      border: "2px dashed",
-      borderColor: isOver ? "primary.main" : "divider",
-      bgcolor: isOver ? "action.hover" : "transparent",
-      boxShadow: isOver ? "0 0 0 2px #6366f1, 0 10px 25px rgba(0,0,0,0.15)" : "none",
-      transition: "all 0.2s ease",
-      transform: isOver ? "scale(1.02)" : "none",
-      opacity: isDragging ? 1 : 0.6,
-      "&:hover": {
-        borderColor: isDragging ? "primary.main" : "divider",
-        opacity: 1
-      }
-    },
-    children: /*#__PURE__*/_jsxs(Box, {
-      sx: {
-        display: "flex",
-        flexDirection: "column",
-        alignItems: "center",
-        gap: 1,
-        color: isOver ? "primary.main" : "text.secondary"
-      },
-      children: [/*#__PURE__*/_jsx(AddIcon, {
-        sx: {
-          fontSize: 40
-        }
-      }), /*#__PURE__*/_jsx(Typography, {
-        variant: "body1",
-        sx: {
-          fontWeight: 500
-        },
-        children: t("new_group")
-      }), /*#__PURE__*/_jsx(Typography, {
-        variant: "body2",
-        sx: {
-          color: "text.secondary"
-        },
-        children: t("drag_a_student_here")
-      })]
-    })
-  });
-}
-function GroupCard({
-  group,
-  index,
-  members,
-  onDelete,
-  t,
-  isOver,
-  isFull
-}) {
-  const accentColor = accentColors[index % accentColors.length];
-  return /*#__PURE__*/_jsxs(Card, {
-    variant: "outlined",
-    sx: {
-      width: "100%",
-      height: "100%",
-      display: "flex",
-      flexDirection: "column",
-      borderRadius: 3,
-      overflow: "hidden",
-      boxShadow: isOver ? "0 0 0 2px #6366f1, 0 10px 25px rgba(0,0,0,0.15)" : "0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06)",
-      transition: "box-shadow 0.2s, transform 0.2s",
-      transform: isOver ? "scale(1.02)" : "none",
-      "&:hover": {
-        boxShadow: "0 10px 25px rgba(0,0,0,0.1)",
-        transform: isOver ? "scale(1.02)" : "translateY(-2px)"
-      }
-    },
-    children: [/*#__PURE__*/_jsxs(Box, {
-      sx: {
-        background: `linear-gradient(135deg, ${accentColor}, ${accentColor}dd)`,
-        px: 2,
-        py: 1.5,
-        display: "flex",
-        justifyContent: "space-between",
-        alignItems: "center"
-      },
-      children: [/*#__PURE__*/_jsxs(Typography, {
-        sx: {
-          color: "white",
-          fontWeight: 700,
-          fontSize: 14
-        },
-        children: [t("group"), " ", index + 1]
-      }), /*#__PURE__*/_jsx(Box, {
-        sx: {
-          display: "flex",
-          gap: 1,
-          alignItems: "center"
-        },
-        children: /*#__PURE__*/_jsx(Box, {
-          sx: {
-            bgcolor: isFull ? "rgba(239,68,68,0.3)" : "rgba(255,255,255,0.2)",
-            color: "white",
-            px: 1,
-            py: 0.25,
-            borderRadius: 3,
-            fontSize: 12
-          },
-          children: group.length >= 2 ? /*#__PURE__*/_jsxs(Typography, {
-            component: "span",
-            sx: {
-              fontWeight: 600,
-              fontSize: 12
-            },
-            children: [group.length, " ", t("members")]
-          }) : /*#__PURE__*/_jsxs(Typography, {
-            component: "span",
-            sx: {
-              fontWeight: 600,
-              fontSize: 12
-            },
-            children: [group.length, " ", t("student")]
-          })
-        })
-      })]
-    }), /*#__PURE__*/_jsxs(CardContent, {
-      sx: {
-        flexGrow: 1,
-        p: 1,
-        "&:last-child": {
-          pb: 1
-        }
-      },
-      children: [/*#__PURE__*/_jsx(SortableContext, {
-        items: group.map(idx => `member-${idx}`),
-        strategy: verticalListSortingStrategy,
-        children: group.map(userIndex => /*#__PURE__*/_jsx(DraggableMember, {
-          userIndex: userIndex,
-          member: members[userIndex]
-        }, `member-${userIndex}`))
-      }), group.length === 0 && /*#__PURE__*/_jsx(Box, {
-        sx: {
-          p: 2,
-          textAlign: "center",
-          color: "text.secondary",
-          border: "2px dashed",
-          borderColor: "divider",
-          borderRadius: 1
-        },
-        children: /*#__PURE__*/_jsx(Typography, {
-          variant: "body2",
-          children: t("drop_members_here")
-        })
-      })]
-    }), /*#__PURE__*/_jsxs(Box, {
-      sx: {
-        mt: "auto"
-      },
-      children: [/*#__PURE__*/_jsx(Divider, {}), /*#__PURE__*/_jsx(CardActions, {
-        sx: {
-          justifyContent: "flex-start",
-          px: 2,
-          py: 1
-        },
-        children: /*#__PURE__*/_jsx(Button, {
-          color: "primary",
-          size: "small",
-          onClick: () => onDelete(group, index),
-          sx: {
-            fontWeight: 500
-          },
-          children: t("remove_group")
-        })
-      })]
-    })]
-  });
-}
-function GroupAssignment({
-  values = {},
-  stage,
-  handleChange = () => {},
-  t = text => text,
-  onGroupAssignmentChange
-}) {
-  const {
-    members = [],
-    initialGroups = []
-  } = values;
-  const memberIds = useMemo(() => {
-    return members.map(member => member?.memberId);
-  }, [members]);
-  const [checked, setChecked] = useState([]);
-  const [grouped, setGrouped] = useState([]);
-  const [groups, setGroups] = useState([]);
-  const [prefSize, setPrefSize] = useState(2);
-  const [activeId, setActiveId] = useState(null);
-  const [overGroupIndex, setOverGroupIndex] = useState(null);
-  const [overNewGroup, setOverNewGroup] = useState(false);
-  const sensors = useSensors(useSensor(PointerSensor, {
-    activationConstraint: {
-      distance: 8
-    }
-  }), useSensor(KeyboardSensor, {
-    coordinateGetter: sortableKeyboardCoordinates
-  }));
-  const handleToggle = (values, arr, setArr) => {
-    let newArr = [...arr];
-    values.forEach(ind => {
-      const currentIndex = arr.indexOf(ind);
-      if (currentIndex === -1) {
-        newArr.push(ind);
-      } else {
-        newArr.splice(currentIndex, 1);
-      }
-    });
-    setArr(newArr);
-  };
-  const selectAll = isChecked => {
-    if (isChecked) {
-      const all = memberIds.map((_, index) => index);
-      setChecked(all);
-    } else {
-      setChecked([]);
-    }
-  };
-  useEffect(() => {
-    if (initialGroups && initialGroups.length > 0) {
-      const initialGroupIndices = initialGroups.map(group => group.map(id => memberIds.indexOf(id)));
-      setGroups(initialGroupIndices);
-      setGrouped(initialGroupIndices.flat());
-      setChecked(initialGroupIndices.flat());
-      handleChange({
-        target: {
-          name: "groups",
-          value: initialGroups
-        }
-      });
-    }
-  }, [initialGroups, handleChange]);
-  const deleteGroup = (group, index) => {
-    const newGrouped = grouped.filter(ind => !group.includes(ind));
-    setGrouped(newGrouped);
-    const newGroups = [...groups];
-    newGroups.splice(index, 1);
-    const groupedNames = groupNames(newGroups, memberIds);
-    handleChange({
-      target: {
-        name: "groups",
-        value: groupedNames
-      }
-    });
-    setGroups(newGroups);
-  };
-  const handlePrefChange = e => {
-    setPrefSize(e.target.value);
-  };
-  const addGroups = () => {
-    let toAdd = checked.filter(x => !grouped.includes(x));
-    const newGroups = groupByN(prefSize, toAdd);
-    const groupedNames = groupNames([...groups, ...newGroups], memberIds);
-    handleChange({
-      target: {
-        name: "groups",
-        value: groupedNames
-      }
-    });
-    setGroups([...groups, ...newGroups]);
-    handleToggle(toAdd, grouped, setGrouped);
-  };
-  useEffect(() => {
-    const groupedNames = groupNames(groups, memberIds);
-    onGroupAssignmentChange({
-      ...values,
-      groups: groupedNames
-    });
-  }, [groups, memberIds]);
-  const handleOnChange = (value, index) => {
-    return () => {
-      if (!value?.inGroup) {
-        handleToggle([index], checked, setChecked);
-      }
-    };
-  };
-  const handleOnClick = index => {
-    return () => {
-      if (grouped.indexOf(index) === -1) {
-        handleToggle([index], checked, setChecked);
-      }
-    };
-  };
-  const findGroupIndex = memberIndex => {
-    return groups.findIndex(group => group.includes(memberIndex));
-  };
-  const handleDragStart = event => {
-    const {
-      active
-    } = event;
-    setActiveId(active.id);
-  };
-  const handleDragOver = event => {
-    const {
-      active,
-      over
-    } = event;
-    if (!over) {
-      setOverGroupIndex(null);
-      setOverNewGroup(false);
-      return;
-    }
-    if (over.id === "new-group-drop-zone") {
-      setOverNewGroup(true);
-      setOverGroupIndex(null);
-      return;
-    }
-    setOverNewGroup(false);
-    const activeMemberIndex = parseInt(active.id.replace("member-", ""));
-    const overMemberIndex = parseInt(over.id.replace("member-", ""));
-    const activeGroupIndex = findGroupIndex(activeMemberIndex);
-    const overGroupIdx = findGroupIndex(overMemberIndex);
-    if (activeGroupIndex !== overGroupIdx && overGroupIdx !== -1) {
-      setOverGroupIndex(overGroupIdx);
-    } else {
-      setOverGroupIndex(null);
-    }
-  };
-  const handleDragEnd = event => {
-    const {
-      active,
-      over
-    } = event;
-    setActiveId(null);
-    setOverGroupIndex(null);
-    setOverNewGroup(false);
-    if (!over) return;
-    const activeMemberIndex = parseInt(active.id.replace("member-", ""));
-    if (over.id === "new-group-drop-zone") {
-      const sourceGroupIndex = findGroupIndex(activeMemberIndex);
-      if (sourceGroupIndex === -1) return;
-      const newGroups = [...groups];
-      newGroups[sourceGroupIndex] = newGroups[sourceGroupIndex].filter(idx => idx !== activeMemberIndex);
-      newGroups.push([activeMemberIndex]);
-      const filteredGroups = newGroups.filter(group => group.length > 0);
-      setGroups(filteredGroups);
-      const groupedNames = groupNames(filteredGroups, memberIds);
-      handleChange({
-        target: {
-          name: "groups",
-          value: groupedNames
-        }
-      });
-      return;
-    }
-    const overMemberIndex = parseInt(over.id.replace("member-", ""));
-    const sourceGroupIndex = findGroupIndex(activeMemberIndex);
-    const destGroupIndex = findGroupIndex(overMemberIndex);
-    if (sourceGroupIndex === -1 || destGroupIndex === -1) return;
-    if (sourceGroupIndex === destGroupIndex) {
-      const group = [...groups[sourceGroupIndex]];
-      const oldIndex = group.indexOf(activeMemberIndex);
-      const newIndex = group.indexOf(overMemberIndex);
-      if (oldIndex !== newIndex) {
-        group.splice(oldIndex, 1);
-        group.splice(newIndex, 0, activeMemberIndex);
-        const newGroups = [...groups];
-        newGroups[sourceGroupIndex] = group;
-        setGroups(newGroups);
-        const groupedNames = groupNames(newGroups, memberIds);
-        handleChange({
-          target: {
-            name: "groups",
-            value: groupedNames
-          }
-        });
-      }
-      return;
-    }
-    const newGroups = [...groups];
-    if (groups[destGroupIndex].length >= MAX_GROUP_SIZE) {
-      const sourcePosition = newGroups[sourceGroupIndex].indexOf(activeMemberIndex);
-      const destPosition = newGroups[destGroupIndex].indexOf(overMemberIndex);
-      newGroups[sourceGroupIndex][sourcePosition] = overMemberIndex;
-      newGroups[destGroupIndex][destPosition] = activeMemberIndex;
-      setGroups(newGroups);
-      const groupedNames = groupNames(newGroups, memberIds);
-      handleChange({
-        target: {
-          name: "groups",
-          value: groupedNames
-        }
-      });
-      return;
-    }
-    newGroups[sourceGroupIndex] = newGroups[sourceGroupIndex].filter(idx => idx !== activeMemberIndex);
-    const destGroup = [...newGroups[destGroupIndex]];
-    const overIndex = destGroup.indexOf(overMemberIndex);
-    destGroup.splice(overIndex, 0, activeMemberIndex);
-    newGroups[destGroupIndex] = destGroup;
-    const filteredGroups = newGroups.filter(group => group.length > 0);
-    setGroups(filteredGroups);
-    const groupedNames = groupNames(filteredGroups, memberIds);
-    handleChange({
-      target: {
-        name: "groups",
-        value: groupedNames
-      }
-    });
-  };
-  const getActiveMember = () => {
-    if (!activeId) return null;
-    const memberIndex = parseInt(activeId.replace("member-", ""));
-    return members[memberIndex];
-  };
-  return /*#__PURE__*/_jsxs(DndContext, {
-    sensors: sensors,
-    collisionDetection: closestCenter,
-    onDragStart: handleDragStart,
-    onDragOver: handleDragOver,
-    onDragEnd: handleDragEnd,
-    children: [/*#__PURE__*/_jsxs(Grid, {
-      container: true,
-      sx: {
-        width: "100%",
-        position: "relative",
-        maxHeight: {
-          md: "65vh"
-        }
-      },
-      children: [/*#__PURE__*/_jsx(Grid, {
-        size: {
-          xs: 12,
-          md: 3.5
-        },
-        sx: {
-          display: "flex",
-          flexDirection: "column",
-          height: {
-            md: "75vh"
-          }
-        },
-        children: /*#__PURE__*/_jsxs(Box, {
-          sx: {
-            display: "flex",
-            flexDirection: "column",
-            height: "100%"
-          },
-          children: [/*#__PURE__*/_jsxs(Grid, {
-            container: true,
-            sx: {
-              width: "100%",
-              mb: 2,
-              alignItems: "center",
-              p: 1,
-              flexShrink: 0
-            },
-            children: [/*#__PURE__*/_jsx(Grid, {
-              size: 4,
-              children: /*#__PURE__*/_jsxs(FormControl, {
-                variant: "outlined",
-                size: "small",
-                sx: {
-                  minWidth: "100%"
-                },
-                children: [/*#__PURE__*/_jsx(InputLabel, {
-                  id: "pref-group-label",
-                  children: "Preferred Size"
-                }), /*#__PURE__*/_jsxs(Select, {
-                  labelId: "pref-group-label",
-                  id: "pref-group",
-                  value: prefSize,
-                  defaultValue: 2,
-                  onChange: handlePrefChange,
-                  label: "Preferred Group Size",
-                  children: [/*#__PURE__*/_jsx(MenuItem, {
-                    value: 2,
-                    children: "2"
-                  }), /*#__PURE__*/_jsx(MenuItem, {
-                    value: 3,
-                    children: "3"
-                  }), /*#__PURE__*/_jsx(MenuItem, {
-                    value: 4,
-                    children: "4"
-                  }), stage === "dev" && /*#__PURE__*/_jsx(MenuItem, {
-                    value: 100,
-                    children: "Any"
-                  })]
-                })]
-              })
-            }), /*#__PURE__*/_jsx(Grid, {
-              size: 8,
-              sx: {
-                display: "flex",
-                justifyContent: "flex-end",
-                pr: 2.5
-              },
-              children: /*#__PURE__*/_jsx(FormControlLabel, {
-                control: /*#__PURE__*/_jsx(Checkbox, {
-                  onChange: e => selectAll(e.target.checked),
-                  checked: checked.length === memberIds.length && memberIds.length > 0,
-                  indeterminate: checked.length > 0 && checked.length < memberIds.length,
-                  slotProps: {
-                    input: {
-                      "aria-labelledby": "select-all-box"
-                    }
-                  }
-                }),
-                label: t("select_students_to_group"),
-                labelPlacement: "start"
-              })
-            })]
-          }), /*#__PURE__*/_jsx(Box, {
-            sx: {
-              width: "100%",
-              overflowY: "auto",
-              flexGrow: 1,
-              p: 1
-            },
-            children: memberIds.map((value, index) => ({
-              value,
-              index,
-              username: members[index]?.username
-            })).sort((a, b) => (a.username || "").localeCompare(b.username || "")).map(({
-              value,
-              index
-            }) => {
-              const labelId = `checkbox-list-secondary-label-${value?.name}`;
-              return /*#__PURE__*/_jsxs(Box, {
-                onClick: handleOnClick(index),
-                sx: {
-                  display: "flex",
-                  alignItems: "center",
-                  border: "1px solid",
-                  borderColor: "divider",
-                  borderRadius: "4px",
-                  mb: 0.5,
-                  p: 1,
-                  cursor: "pointer",
-                  transition: "background-color 0.2s",
-                  "&:hover": {
-                    bgcolor: "action.hover"
-                  }
-                },
-                children: [/*#__PURE__*/_jsx(Avatar, {
-                  alt: `Avatar n°${value + 1}`,
-                  src: members[index]?.userImage || `/static/images/avatar/${memberIds[index] + 1}.jpg`,
-                  sx: {
-                    mr: 2
-                  }
-                }), /*#__PURE__*/_jsx(Typography, {
-                  sx: {
-                    flexGrow: 1
-                  },
-                  children: members[index]?.username
-                }), /*#__PURE__*/_jsx(Checkbox, {
-                  disabled: grouped.indexOf(index) !== -1,
-                  onChange: handleOnChange(value, index),
-                  checked: checked.indexOf(index) !== -1,
-                  onClick: e => e.stopPropagation(),
-                  slotProps: {
-                    input: {
-                      "aria-labelledby": labelId
-                    }
-                  }
-                })]
-              }, `memberId-${index}`);
-            })
-          }), /*#__PURE__*/_jsx(Box, {
-            sx: {
-              p: 2,
-              borderTop: "1px solid",
-              borderColor: "divider",
-              flexShrink: 0
-            },
-            children: /*#__PURE__*/_jsx(Button, {
-              "aria-label": t("create_groups"),
-              onClick: async () => await addGroups(),
-              variant: "contained",
-              fullWidth: true,
-              size: "large",
-              disabled: checked.filter(x => !grouped.includes(x)).length === 0,
-              children: t("create_groups")
-            })
-          })]
-        })
-      }), /*#__PURE__*/_jsx(Grid, {
-        size: {
-          xs: 0,
-          md: 0.5
-        },
-        sx: {
-          display: {
-            xs: "none",
-            md: "flex"
-          },
-          justifyContent: "center"
-        },
-        children: /*#__PURE__*/_jsx(Divider, {
-          orientation: "vertical",
-          sx: {
-            height: "100%"
-          }
-        })
-      }), /*#__PURE__*/_jsxs(Grid, {
-        size: {
-          xs: 12,
-          md: 8
-        },
-        sx: {
-          display: "flex",
-          flexDirection: "column",
-          marginTop: {
-            xs: 3,
-            md: 0
-          },
-          height: {
-            md: "75vh"
-          },
-          overflowY: {
-            md: "auto"
-          }
-        },
-        children: [/*#__PURE__*/_jsx(Typography, {
-          variant: "h6",
-          gutterBottom: true,
-          sx: {
-            color: "inherit",
-            textAlign: "center",
-            mb: 1,
-            px: 2
-          },
-          children: t("created_groups")
-        }), /*#__PURE__*/_jsx(Box, {
-          sx: {
-            px: 2,
-            pb: 2
-          },
-          children: groups.length === 0 ? /*#__PURE__*/_jsxs(Paper, {
-            elevation: 0,
-            sx: {
-              p: 6,
-              textAlign: "center",
-              bgcolor: "action.hover",
-              border: "2px dashed",
-              borderColor: "divider",
-              borderRadius: 2
-            },
-            children: [/*#__PURE__*/_jsx(GroupsIcon, {
-              sx: {
-                fontSize: 64,
-                color: "action.disabled",
-                mb: 2
-              }
-            }), /*#__PURE__*/_jsx(Typography, {
-              variant: "h6",
-              gutterBottom: true,
-              sx: {
-                color: "text.secondary"
-              },
-              children: t("no_groups_created_yet")
-            }), /*#__PURE__*/_jsx(Typography, {
-              variant: "body2",
-              sx: {
-                color: "text.secondary"
-              },
-              children: t("select_students_from_the_list")
-            })]
-          }) : /*#__PURE__*/_jsxs(Grid, {
-            container: true,
-            spacing: 2,
-            children: [/*#__PURE__*/_jsx(Grid, {
-              size: {
-                xs: 12,
-                sm: 4
-              },
-              children: /*#__PURE__*/_jsx(NewGroupDropZone, {
-                isOver: overNewGroup,
-                isDragging: activeId !== null,
-                t: t
-              })
-            }, "new-group-zone"), groups?.map((group, index) => /*#__PURE__*/_jsx(Grid, {
-              size: {
-                xs: 12,
-                sm: 4
-              },
-              children: /*#__PURE__*/_jsx(GroupCard, {
-                group: group,
-                index: index,
-                members: members,
-                memberIds: memberIds,
-                onDelete: deleteGroup,
-                t: t,
-                isOver: overGroupIndex === index,
-                isFull: group.length >= MAX_GROUP_SIZE
-              })
-            }, `group-${index}`))]
-          })
-        })]
-      })]
-    }), /*#__PURE__*/_jsx(DragOverlay, {
-      children: activeId ? /*#__PURE__*/_jsx(DragOverlayContent, {
-        member: getActiveMember()
-      }) : null
-    })]
-  });
-}
-GroupAssignment.propTypes = {};
-GroupAssignment.label = "Group Assignment";
-export default GroupAssignment;