add docker compose

frontend/Dockerfile

@@ -0,0 +1,20 @@
+FROM node:20.19-alpine AS build
+
+WORKDIR /app
+
+ARG VITE_API_URL
+ENV VITE_API_URL=$VITE_API_URL
+
+COPY frontend/package.json frontend/package-lock.json /app/
+RUN npm install
+
+COPY frontend/ .
+
+RUN npm run build
+
+FROM nginx:latest
+
+COPY --from=build /app/dist /srv/www/frontend
+
+RUN rm /etc/nginx/conf.d/default.conf
+COPY --from=build /app/nginx/default.conf /etc/nginx/conf.d/default.conf

frontend/locales/en.json

@@ -199,6 +199,7 @@
     "your session has expired please log in again": "your session has expired please log in again",
     "session expired": "session expired",
     "user not allowed": "user not allowed",
+    "roles": "roles",
     "your keycloak user has no roles, please contact your administrator": "your keycloak user has no roles, please contact your administrator",
     "choose payment method": "choose your payment method (you do not need to pay now).",
     "the product unit will be assigned to the quantity requested in the form": "the product unit defines the unit used in the contract form.",

frontend/locales/fr.json

@@ -199,6 +199,7 @@
     "your session has expired please log in again": "votre session a expiré veuillez vous reconnecter.",
     "session expired": "session expirée",
     "user not allowed": "utilisateur non authorisé",
+    "roles": "roles",
     "your keycloak user has no roles, please contact your administrator": "votre utilisateur keycloak n'a pas de roles configurés, contactez votre administrateur.",
     "choose payment method": "choisissez votre méthode de paiement (vous n'avez pas à payer tout de suite, uniquement renseigner comment vous souhaitez régler votre commande).",
     "the product unit will be assigned to the quantity requested in the form": "l'unité de vente du produit définit l'unité associée à la quantité demandée dans le formulaire des amapiens.",

frontend/nginx/default.conf

@@ -0,0 +1,26 @@
+server {
+    listen 80 default_server;
+    listen [::]:80 default_server;
+
+    server_name         localhost;
+    root                /srv/www/frontend;
+	index				index.html;
+
+    location / {
+        try_files $uri /index.html;
+    }
+
+    location /api/ {
+        proxy_set_header Host $http_host;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+        proxy_set_header X-Forwarded-Proto $scheme;
+
+        proxy_redirect off;
+        proxy_buffering off;
+        proxy_pass http://back;
+    }
+}
+
+upstream backend {
+    server back:8000;
+}

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

frontend/src/pages/Contracts/index.tsx

@@ -89,6 +89,7 @@ export default function Contracts() {
                         label={t("download recap", { capfirst: true })}
                     >
                         <ActionIcon
+                            disabled={true}
                             onClick={(e) => {
                                 e.stopPropagation();
                                 navigate(

frontend/src/pages/Users/index.tsx

@@ -127,6 +127,7 @@ export default function Users() {
                         <Table.Tr>
                             <Table.Th>{t("name", { capfirst: true })}</Table.Th>
                             <Table.Th>{t("email", { capfirst: true })}</Table.Th>
+                            <Table.Th>{t("roles", { capfirst: true })}</Table.Th>
                             <Table.Th>{t("actions", { capfirst: true })}</Table.Th>
                         </Table.Tr>
                     </Table.Thead>

frontend/src/services/resources/users.ts

@@ -15,7 +15,7 @@ export type User = {
     name: string;
     email: string;
     products: Product[];
-    roles: string[];
+    roles: Role[];
 };
 
 export type UserInputs = {