@@ -88,9 +76,17 @@ export default function InformationSection(props: IProps) {
diff --git a/src/front/Components/Layouts/Folder/SendDocuments/classes.module.scss b/src/front/Components/Layouts/Folder/SendDocuments/classes.module.scss
new file mode 100644
index 00000000..613b5a8d
--- /dev/null
+++ b/src/front/Components/Layouts/Folder/SendDocuments/classes.module.scss
@@ -0,0 +1,36 @@
+@import "@Themes/constants.scss";
+
+.root {
+ display: flex;
+ flex-direction: column;
+ gap: var(--spacing-xl, 32px);
+
+ margin: 24px auto;
+ width: 566px;
+
+ @media (max-width: $screen-m) {
+ width: 474px;
+ }
+
+ @media (max-width: $screen-s) {
+ width: 100%;
+ padding: var(--spacing-md, 16px);
+ }
+
+ .radioboxes {
+ display: flex;
+ flex-direction: column;
+ gap: var(--Radius-lg, 16px);
+ }
+
+ .form {
+ display: flex;
+ flex-direction: column;
+ gap: var(--spacing-xl, 32px);
+
+ .buttons-container {
+ display: flex;
+ gap: var(--spacing-md, 16px);
+ }
+ }
+}
diff --git a/src/front/Components/Layouts/Folder/SendDocuments/index.tsx b/src/front/Components/Layouts/Folder/SendDocuments/index.tsx
new file mode 100644
index 00000000..96f094a7
--- /dev/null
+++ b/src/front/Components/Layouts/Folder/SendDocuments/index.tsx
@@ -0,0 +1,123 @@
+import backgroundImage from "@Assets/images/background_refonte.svg";
+import Folders from "@Front/Api/LeCoffreApi/Notary/Folders/Folders";
+import AutocompleteMultiSelect from "@Front/Components/DesignSystem/AutocompleteMultiSelect";
+import Button, { EButtonstyletype, EButtonVariant } from "@Front/Components/DesignSystem/Button";
+import DragAndDrop from "@Front/Components/DesignSystem/DragAndDrop";
+import Form from "@Front/Components/DesignSystem/Form";
+import RadioBox from "@Front/Components/DesignSystem/RadioBox";
+import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography";
+import BackArrow from "@Front/Components/Elements/BackArrow";
+import DefaultDoubleSidePage from "@Front/Components/LayoutTemplates/DefaultDoubleSidePage";
+import Module from "@Front/Config/Module";
+import { PaperAirplaneIcon } from "@heroicons/react/24/outline";
+import { OfficeFolder } from "le-coffre-resources/dist/Notary";
+import { useRouter } from "next/router";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
+
+import classes from "./classes.module.scss";
+
+enum EClientSelection {
+ ALL_CLIENTS = "all_clients",
+ SELECTED_CLIENTS = "selected_clients",
+}
+
+export default function SendDocuments() {
+ const router = useRouter();
+ let { folderUid } = router.query;
+ const [folder, setFolder] = useState
(null);
+ const [clientSelection, setClientSelection] = useState(null);
+
+ const onFormSubmit = useCallback(
+ async (
+ _e: React.FormEvent | null,
+ _values: {
+ [key: string]: any;
+ },
+ //TODO: when back is done
+ ) => {},
+ [],
+ );
+
+ const fetchFolder = useCallback(async () => {
+ Folders.getInstance()
+ .getByUid(folderUid as string, {
+ q: {
+ customers: {
+ include: {
+ contact: true,
+ },
+ },
+ },
+ })
+ .then((folder) => setFolder(folder))
+ .catch((e) => console.warn(e));
+ }, [folderUid]);
+
+ const onClientSelectionChange = useCallback((e: React.ChangeEvent) => {
+ setClientSelection(e.target.value as EClientSelection);
+ console.log(e.target.value);
+ }, []);
+
+ useEffect(() => {
+ fetchFolder();
+ }, [fetchFolder]);
+
+ const backUrl = useMemo(
+ () =>
+ Module.getInstance()
+ .get()
+ .modules.pages.Folder.pages.FolderInformation.props.path.replace("[folderUid]", folderUid as string),
+ [folderUid],
+ );
+
+ const clientsOptions = useMemo(() => {
+ if (!folder?.customers) return [];
+ return folder.customers.map((customer) => ({
+ id: customer.uid ?? "",
+ label: `${customer.contact?.first_name} ${customer.contact?.last_name}`,
+ }));
+ }, [folder]);
+
+ return (
+
+
+
+
+ Envoyer des documents, sélectionnez les destinataires :
+
+
+
+
+
+
+
+