✨ Getting office users

src/front/Components/LayoutTemplates/DefaultCollaboratorDashboard/index.tsx

@@ -1,16 +1,16 @@
 import ChevronIcon from "@Assets/Icons/chevron.svg";
+import Users, { IGetUsersparams } from "@Front/Api/LeCoffreApi/Admin/Users/Users";
 import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
 import Header from "@Front/Components/DesignSystem/Header";
 import Version from "@Front/Components/DesignSystem/Version";
 import BackArrow from "@Front/Components/Elements/BackArrow";
 import WindowStore from "@Front/Stores/WindowStore";
 import classNames from "classnames";
+import User from "le-coffre-resources/dist/Notary";
 import Image from "next/image";
 import React, { ReactNode } from "react";
 
 import classes from "./classes.module.scss";
-import Users, { IGetUsersparams } from "@Front/Api/LeCoffreApi/Admin/Users/Users";
-import User from "le-coffre-resources/dist/Notary";
 import CollaboratorListContainer from "./CollaboratorListContainer";
 
 type IProps = {
@@ -88,7 +88,7 @@ export default class DefaultCollaboratorDashboard extends React.Component<IProps
 	public override async componentDidMount() {
 		this.onWindowResize = WindowStore.getInstance().onResize((window) => this.onResize(window));
 		const query: IGetUsersparams = {
-			where: { office_uid: "2af8694e-4dac-4e0d-854a-acb7fed8aa7d" },
+			where: { office_uid: "6981326f-8a0a-4437-b15c-4cd5c4d80f6e" },
 			include: { contact: true },
 		};
 

src/front/Components/Layouts/Login/index.tsx

@@ -1,14 +1,15 @@
-import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
-import Typography, { ITypo } from "@Front/Components/DesignSystem/Typography";
-import BasePage from "../Base";
-import classes from "./classes.module.scss";
 import CoffreIcon from "@Assets/Icons/coffre.svg";
-import LandingImage from "./landing-connect.jpeg";
-import Image from "next/image";
-import DefaultDoubleSidePage from "@Front/Components/LayoutTemplates/DefaultDoubleSidePage";
 // import { FrontendVariables } from "@Front/Config/VariablesFront";
 import idNoteLogo from "@Assets/Icons/id-note-logo.svg";
+import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
+import Typography, { ITypo } from "@Front/Components/DesignSystem/Typography";
+import DefaultDoubleSidePage from "@Front/Components/LayoutTemplates/DefaultDoubleSidePage";
 import UserStore from "@Front/Stores/UserStore";
+import Image from "next/image";
+
+import BasePage from "../Base";
+import classes from "./classes.module.scss";
+import LandingImage from "./landing-connect.jpeg";
 
 export default class LoginClass extends BasePage {
 	public override render(): JSX.Element {
@@ -35,7 +36,7 @@ export default class LoginClass extends BasePage {
 		// const variables = FrontendVariables.getInstance();
 		// const baseFronturl = variables.BACK_API_PROTOCOL + variables.FRONT_APP_HOST;
 
-		await UserStore.instance.connect("I6LJH1tItz");
+		await UserStore.instance.connect("SbRKyM8BJI");
 		// await JwtService.getInstance().checkJwt();
 		// window.location.assign("http://localhost:3000" + "/folders");
 

src/front/Components/Layouts/Offices/OfficeInformations/classes.module.scss

@@ -50,4 +50,38 @@
 			gap: 12px;
 		}
 	}
+
+	.office-users {
+		.users {
+			.title {
+				margin-top: 32px;
+			}
+
+			.users-container {
+				margin-top: 32px;
+				text-align: center;
+
+				display: flex;
+				flex-direction: column;
+				gap: 24px;
+				.first-line,
+				.user-line {
+					display: grid;
+					grid-template-columns: repeat(5, 1fr);
+					padding: 24px;
+					background-color: var(--purple-soft);
+				}
+
+				.user-line {
+					background-color: var(--grey-soft);
+				}
+
+				.user-line {
+					&:nth-child(odd) {
+						background-color: var(--grey-medium);
+					}
+				}
+			}
+		}
+	}
 }

src/front/Components/Layouts/Offices/OfficeInformations/index.tsx

@@ -1,9 +1,10 @@
 import Offices from "@Front/Api/LeCoffreApi/SuperAdmin/Offices/Offices";
 import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Typography";
 import DefaultOfficeDashboard from "@Front/Components/LayoutTemplates/DefaultOfficeDashboard";
-import { Office } from "le-coffre-resources/dist/Notary";
+import User, { Office } from "le-coffre-resources/dist/SuperAdmin";
 import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
+
 import classes from "./classes.module.scss";
 
 type IProps = {};
@@ -19,6 +20,13 @@ export default function OfficeInformations(props: IProps) {
 			const office = await Offices.getInstance().getByUid(officeUid as string, {
 				q: {
 					address: true,
+					users: {
+						include: {
+							role: true,
+							office_role: true,
+							contact: true,
+						},
+					},
 				},
 			});
 			if (!office) return;
@@ -28,6 +36,15 @@ export default function OfficeInformations(props: IProps) {
 		getOffice();
 	}, [officeUid]);
 
+	const renderUser = (user: User) => (
+		<div key={user.uid} className={classes["user-line"]}>
+			<Typography typo={ITypo.P_16}>{user.contact?.last_name}</Typography>
+			<Typography typo={ITypo.P_16}>{user.contact?.first_name}</Typography>
+			<Typography typo={ITypo.P_16}>{user.contact?.email}</Typography>
+			<Typography typo={ITypo.P_16}>{user.contact?.phone_number}</Typography>
+			<Typography typo={ITypo.P_16}>{user.office_role ? user.office_role?.name : user.role?.name}</Typography>
+		</div>
+	);
 	return (
 		<DefaultOfficeDashboard mobileBackText={"Liste des utilisateurs"}>
 			<div className={classes["root"]}>
@@ -60,6 +77,82 @@ export default function OfficeInformations(props: IProps) {
 						</Typography>
 					</div>
 				</div>
+				<div className={classes["office-users"]}>
+					<div className={classes["users"]}>
+						<div className={classes["title"]}>
+							<Typography typo={ITypo.H3}>Administrateurs</Typography>
+						</div>
+						<div className={classes["users-container"]}>
+							<div className={classes["first-line"]}>
+								<Typography typo={ITypo.NAV_HEADER_18} color={ITypoColor.BLACK}>
+									Nom
+								</Typography>
+								<Typography typo={ITypo.NAV_HEADER_18} color={ITypoColor.BLACK}>
+									Prénom
+								</Typography>
+								<Typography typo={ITypo.NAV_HEADER_18} color={ITypoColor.BLACK}>
+									E-mail pro
+								</Typography>
+								<Typography typo={ITypo.NAV_HEADER_18} color={ITypoColor.BLACK}>
+									Numéro de téléphone
+								</Typography>
+								<Typography typo={ITypo.NAV_HEADER_18} color={ITypoColor.BLACK}>
+									Rôle
+								</Typography>
+							</div>
+							{officeSelected?.users
+								?.filter((user) => {
+									if (user.office_role && user.office_role.name === "admin") {
+										return true;
+									}
+									if (!user.office_role && user.role?.name === "admin") {
+										return true;
+									}
+									return false;
+								})
+								.map((user) => {
+									return renderUser(user);
+								})}
+						</div>
+					</div>
+					<div className={classes["users"]}>
+						<div className={classes["title"]}>
+							<Typography typo={ITypo.H3}>Collaborateurs</Typography>
+						</div>
+						<div className={classes["users-container"]}>
+							<div className={classes["first-line"]}>
+								<Typography typo={ITypo.NAV_HEADER_18} color={ITypoColor.BLACK}>
+									Nom
+								</Typography>
+								<Typography typo={ITypo.NAV_HEADER_18} color={ITypoColor.BLACK}>
+									Prénom
+								</Typography>
+								<Typography typo={ITypo.NAV_HEADER_18} color={ITypoColor.BLACK}>
+									E-mail pro
+								</Typography>
+								<Typography typo={ITypo.NAV_HEADER_18} color={ITypoColor.BLACK}>
+									Numéro de téléphone
+								</Typography>
+								<Typography typo={ITypo.NAV_HEADER_18} color={ITypoColor.BLACK}>
+									Rôle
+								</Typography>
+							</div>
+							{officeSelected?.users
+								?.filter((user) => {
+									if (user.office_role && user.office_role.name !== "admin") {
+										return true;
+									}
+									if (!user.office_role && user.role?.name !== "admin") {
+										return true;
+									}
+									return false;
+								})
+								.map((user) => {
+									return renderUser(user);
+								})}
+						</div>
+					</div>
+				</div>
 			</div>
 		</DefaultOfficeDashboard>
 	);