add docker compose

frontend/src/components/Users/Modal/index.tsx

@@ -3,7 +3,6 @@ import {
     Group,
     Modal,
     MultiSelect,
-    Select,
     TextInput,
     Title,
     type ModalBaseProps,

frontend/src/components/Users/Row/index.tsx

@@ -1,4 +1,4 @@
-import { ActionIcon, Table, Tooltip } from "@mantine/core";
+import { ActionIcon, Badge, Box, Table, Tooltip } from "@mantine/core";
 import { t } from "@/config/i18n";
 import { IconEdit, IconX } from "@tabler/icons-react";
 import { type User } from "@/services/resources/users";
@@ -18,6 +18,31 @@ export default function UserRow({ user }: UserRowProps) {
         <Table.Tr key={user.id}>
             <Table.Td>{user.name}</Table.Td>
             <Table.Td>{user.email}</Table.Td>
+            <Table.Td style={{maxWidth: 200}}>
+                <Box
+                    style={{
+                        display: 'flex',
+                        gap: 4
+                    }}
+                >
+                {user.roles.slice(0, 3).map((value) => (
+                    <Badge key={value.id} size="xs">
+                        {t(value.name, { capfirst: true })}
+                    </Badge>
+                ))}
+                {
+                    user.roles.length > 3 && (
+                        <Tooltip
+                            label={user.roles.slice(3).map(role=>`${role.name} `)}
+                        >
+                            <Badge size="xs" variant="light">
+                                +{user.roles.length - 3}
+                            </Badge>
+                        </Tooltip>
+                    )
+                }
+                </Box>
+            </Table.Td>
             <Table.Td>
                 <Tooltip label={t("edit user", { capfirst: true })}>
                     <ActionIcon