From 7d8653ae982c349eb3b9ceb39e746c20cf0e076d Mon Sep 17 00:00:00 2001 From: Max S Date: Mon, 16 Sep 2024 11:40:32 +0200 Subject: [PATCH 1/2] :hammer: design review --- .../classes.module.scss | 3 +-- .../Folder/DocumentsReminderHistory/index.tsx | 20 +++++++++++++------ .../EmailReminder/ReminderModal/index.tsx | 4 ++-- .../ClientView/classes.module.scss | 1 + .../FolderInformation/ClientView/index.tsx | 5 +---- 5 files changed, 19 insertions(+), 14 deletions(-) diff --git a/src/front/Components/Layouts/Folder/DocumentsReminderHistory/classes.module.scss b/src/front/Components/Layouts/Folder/DocumentsReminderHistory/classes.module.scss index 9b949a1f..38c6566e 100644 --- a/src/front/Components/Layouts/Folder/DocumentsReminderHistory/classes.module.scss +++ b/src/front/Components/Layouts/Folder/DocumentsReminderHistory/classes.module.scss @@ -1,8 +1,7 @@ @import "@Themes/constants.scss"; .root { - padding: var(--spacing-3) var(--spacing-15); - max-width: 1156px; + padding: var(--spacing-4) 142px; display: flex; flex-direction: column; diff --git a/src/front/Components/Layouts/Folder/DocumentsReminderHistory/index.tsx b/src/front/Components/Layouts/Folder/DocumentsReminderHistory/index.tsx index cc642b1d..47d7177d 100644 --- a/src/front/Components/Layouts/Folder/DocumentsReminderHistory/index.tsx +++ b/src/front/Components/Layouts/Folder/DocumentsReminderHistory/index.tsx @@ -4,7 +4,7 @@ import Dropdown from "@Front/Components/DesignSystem/Dropdown"; import { IOption } from "@Front/Components/DesignSystem/Dropdown/DropdownMenu/DropdownOption"; import Table from "@Front/Components/DesignSystem/Table"; import { IHead, IRowProps } from "@Front/Components/DesignSystem/Table/MuiTable"; -import Tag, { ETagColor } from "@Front/Components/DesignSystem/Tag"; +import Tag, { ETagColor, ETagVariant } from "@Front/Components/DesignSystem/Tag"; import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography"; import BackArrow from "@Front/Components/Elements/BackArrow"; import DefaultTemplate from "@Front/Components/LayoutTemplates/DefaultTemplate"; @@ -19,6 +19,13 @@ import classes from "./classes.module.scss"; type IProps = {}; +const tradDocumentStatus: Record = { + [EDocumentStatus.ASKED]: "DEMANDÉ", + [EDocumentStatus.DEPOSITED]: "À VALIDER", + [EDocumentStatus.VALIDATED]: "VALIDÉ", + [EDocumentStatus.REFUSED]: "REFUSÉ", +}; + const header: readonly IHead[] = [ { key: "remindedAt", @@ -126,6 +133,7 @@ export default function DocumentsReminderHistory(props: IProps) { options={customersOptions} onSelectionChange={onSelectionChange} selectedOption={customerOption ?? customersOptions?.[0]} + label="Client" /> @@ -147,14 +155,14 @@ function buildRows(reminders: DocumentReminder[] | null): IRowProps[] { function getTag(status: EDocumentStatus) { switch (status) { case EDocumentStatus.ASKED: - return ; + return ; case EDocumentStatus.DEPOSITED: - return ; + return ; case EDocumentStatus.VALIDATED: - return ; + return ; case EDocumentStatus.REFUSED: - return ; + return ; default: - return ; + return ; } } diff --git a/src/front/Components/Layouts/Folder/FolderInformation/ClientView/EmailReminder/ReminderModal/index.tsx b/src/front/Components/Layouts/Folder/FolderInformation/ClientView/EmailReminder/ReminderModal/index.tsx index 4da1f326..58ed5d47 100644 --- a/src/front/Components/Layouts/Folder/FolderInformation/ClientView/EmailReminder/ReminderModal/index.tsx +++ b/src/front/Components/Layouts/Folder/FolderInformation/ClientView/EmailReminder/ReminderModal/index.tsx @@ -4,7 +4,7 @@ import { IOption } from "@Front/Components/DesignSystem/Form/SelectFieldOld"; import Modal from "@Front/Components/DesignSystem/Modal"; import Separator, { ESeperatorColor } from "@Front/Components/DesignSystem/Separator"; import { ToasterService } from "@Front/Components/DesignSystem/Toaster"; -import Typography, { ETypo } from "@Front/Components/DesignSystem/Typography"; +import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography"; import Customer from "le-coffre-resources/dist/Customer"; import { EDocumentStatus } from "le-coffre-resources/dist/Customer/Document"; import React, { useCallback, useMemo, useState } from "react"; @@ -79,7 +79,7 @@ export default function ReminderModal(props: IProps) { firstButton={{ children: "Annuler", onClick: onClose }} secondButton={{ children: "Relancer", onClick: onRemind }}>
- + Sélectionnez le(s) document(s) pour lequel vous souhaitez relancer le client. )} - +
From 749b05dc84254d06826ee98392d79dbd820273f3 Mon Sep 17 00:00:00 2001 From: Max S Date: Mon, 16 Sep 2024 15:16:00 +0200 Subject: [PATCH 2/2] :sparkles: review design --- .../DesignSystem/Table/MuiTable/index.tsx | 18 +- .../DesignSystem/Tag/classes.module.scss | 2 + .../ClientView/ClientBox/classes.module.scss | 3 +- .../DocumentTables/classes.module.scss | 1 + .../ClientView/DocumentTables/index.tsx | 189 +++++++++++------- .../ClientView/classes.module.scss | 1 - 6 files changed, 140 insertions(+), 74 deletions(-) diff --git a/src/front/Components/DesignSystem/Table/MuiTable/index.tsx b/src/front/Components/DesignSystem/Table/MuiTable/index.tsx index 83e05a7f..c7fb8e0e 100644 --- a/src/front/Components/DesignSystem/Table/MuiTable/index.tsx +++ b/src/front/Components/DesignSystem/Table/MuiTable/index.tsx @@ -8,8 +8,9 @@ import TableRow from "@mui/material/TableRow"; import Typography, { ETypo, ETypoColor } from "../../Typography"; import classes from "./classes.module.scss"; +import { SxProps, Theme } from "@mui/material"; -export type IRowProps = { key: string } & Record; +export type IRowProps = { key: string } & Record; content: React.ReactNode }>; type IRow = { key?: string; @@ -29,7 +30,7 @@ export type IHead = { type CellContent = { key: string; - value: React.ReactNode; + value: React.ReactNode | { sx: SxProps; content: React.ReactNode }; }; export default function MuiTable(props: IProps) { @@ -82,12 +83,14 @@ export default function MuiTable(props: IProps) { className={classes["cell"]} key={cell.key} align="left" - sx={{ border: 0, padding: "4px 8px", height: "53px" }}> + sx={{ ...getCellValueStyle(cell.value), border: 0, padding: "4px 8px", height: "53px" }}> - {cell.value} + {cell.value && typeof cell.value === "object" && "content" in cell.value + ? cell.value.content + : cell.value} ))} @@ -99,4 +102,11 @@ export default function MuiTable(props: IProps) { ); + + function getCellValueStyle(value: React.ReactNode | { sx: SxProps; content: React.ReactNode }) { + if (typeof value === "object" && value !== null && "sx" in value) { + return value.sx; + } + return {}; + } } diff --git a/src/front/Components/DesignSystem/Tag/classes.module.scss b/src/front/Components/DesignSystem/Tag/classes.module.scss index f0dd81b3..b8096a8e 100644 --- a/src/front/Components/DesignSystem/Tag/classes.module.scss +++ b/src/front/Components/DesignSystem/Tag/classes.module.scss @@ -9,6 +9,8 @@ align-items: center; justify-content: center; + white-space: nowrap; + &.info { background-color: var(--tag-info-background); } diff --git a/src/front/Components/Layouts/Folder/FolderInformation/ClientView/ClientBox/classes.module.scss b/src/front/Components/Layouts/Folder/FolderInformation/ClientView/ClientBox/classes.module.scss index 5e75f6fa..17c7b641 100644 --- a/src/front/Components/Layouts/Folder/FolderInformation/ClientView/ClientBox/classes.module.scss +++ b/src/front/Components/Layouts/Folder/FolderInformation/ClientView/ClientBox/classes.module.scss @@ -2,12 +2,11 @@ .root { display: flex; - width: fit-content; padding: var(--spacing-md, 16px); flex-direction: column; gap: var(--spacing-md, 16px); background: var(--primary-weak-higlight, #e5eefa); - min-width: 300px; + width: 300px; .header { display: flex; diff --git a/src/front/Components/Layouts/Folder/FolderInformation/ClientView/DocumentTables/classes.module.scss b/src/front/Components/Layouts/Folder/FolderInformation/ClientView/DocumentTables/classes.module.scss index c4b3c70e..2409c790 100644 --- a/src/front/Components/Layouts/Folder/FolderInformation/ClientView/DocumentTables/classes.module.scss +++ b/src/front/Components/Layouts/Folder/FolderInformation/ClientView/DocumentTables/classes.module.scss @@ -16,5 +16,6 @@ display: flex; align-items: center; gap: var(--spacing-sm, 8px); + justify-content: center; } } diff --git a/src/front/Components/Layouts/Folder/FolderInformation/ClientView/DocumentTables/index.tsx b/src/front/Components/Layouts/Folder/FolderInformation/ClientView/DocumentTables/index.tsx index e38aacf4..e464a324 100644 --- a/src/front/Components/Layouts/Folder/FolderInformation/ClientView/DocumentTables/index.tsx +++ b/src/front/Components/Layouts/Folder/FolderInformation/ClientView/DocumentTables/index.tsx @@ -131,16 +131,29 @@ export default function DocumentTables(props: IProps) { if (document.document_status !== EDocumentStatus.ASKED) return null; return { key: document.uid, - document_type: document.document_type?.name ?? "_", - document_status: ( - - ), - date: document.created_at ? new Date(document.created_at).toLocaleDateString() : "_", - actions: openDeleteAskedDocumentModal(document.uid)} />} />, + document_type: { sx: { width: 400 }, content: document.document_type?.name ?? "_" }, + document_status: { + sx: { width: 107 }, + content: ( + + ), + }, + date: { + sx: { width: 107 }, + content: document.created_at ? new Date(document.created_at).toLocaleDateString() : "_", + }, + actions: { + sx: { width: 76 }, + content: ( +
+ openDeleteAskedDocumentModal(document.uid)} />} /> +
+ ), + }, }; }) .filter((document) => document !== null) as IRowProps[], @@ -154,24 +167,35 @@ export default function DocumentTables(props: IProps) { if (document.document_status !== EDocumentStatus.DEPOSITED) return null; return { key: document.uid, - document_type: document.document_type?.name ?? "_", - document_status: ( - - ), - date: document.updated_at ? new Date(document.updated_at).toLocaleDateString() : "_", - actions: ( - - } /> - - ), + document_type: { sx: { width: 400 }, content: document.document_type?.name ?? "_" }, + document_status: { + sx: { width: 107 }, + content: ( + + ), + }, + date: { + sx: { width: 107 }, + content: document.updated_at ? new Date(document.updated_at).toLocaleDateString() : "_", + }, + actions: { + sx: { width: 76 }, + content: ( +
+ + } /> + +
+ ), + }, }; }) .filter((document) => document !== null) as IRowProps[], @@ -185,27 +209,36 @@ export default function DocumentTables(props: IProps) { if (document.document_status !== EDocumentStatus.VALIDATED) return null; return { key: document.uid, - document_type: document.document_type?.name ?? "_", - document_status: ( - - ), - date: document.updated_at ? new Date(document.updated_at).toLocaleDateString() : "_", - actions: ( -
- - } /> - - onDownload(document)} icon={} /> -
- ), + document_type: { sx: { width: 400 }, content: document.document_type?.name ?? "_" }, + document_status: { + sx: { width: 107 }, + content: ( + + ), + }, + date: { + sx: { width: 107 }, + content: document.updated_at ? new Date(document.updated_at).toLocaleDateString() : "_", + }, + actions: { + sx: { width: 76 }, + content: ( +
+ + } /> + + onDownload(document)} icon={} /> +
+ ), + }, }; }) .filter((document) => document !== null) as IRowProps[], @@ -219,15 +252,21 @@ export default function DocumentTables(props: IProps) { if (document.document_status !== EDocumentStatus.REFUSED) return null; return { key: document.uid, - document_type: document.document_type?.name ?? "_", - document_status: ( - - ), - date: document.updated_at ? new Date(document.updated_at).toLocaleDateString() : "_", + document_type: { sx: { width: 400 }, content: document.document_type?.name ?? "_" }, + document_status: { + sx: { width: 107 }, + content: ( + + ), + }, + date: { + sx: { width: 107 }, + content: document.updated_at ? new Date(document.updated_at).toLocaleDateString() : "_", + }, actions: "", }; }) @@ -241,15 +280,27 @@ export default function DocumentTables(props: IProps) { .map((document) => { return { key: document.uid, - document_type: document.files?.[0]?.file_name?.split(".")?.[0] ?? "_", - document_status: , - date: document.updated_at ? new Date(document.updated_at).toLocaleDateString() : "_", - actions: ( -
- onDownloadFileNotary(document)} icon={} /> - openDeleteSentDocumentModal(document.uid)} />} /> -
- ), + document_type: { + sx: { width: 400 }, + content: formatName(document.files?.[0]?.file_name?.split(".")?.[0] ?? "") || "_", + }, + document_status: { + sx: { width: 107 }, + content: , + }, + date: { + sx: { width: 107 }, + content: document.updated_at ? new Date(document.updated_at).toLocaleDateString() : "_", + }, + actions: { + sx: { width: 76 }, + content: ( +
+ onDownloadFileNotary(document)} icon={} /> + openDeleteSentDocumentModal(document.uid)} />} /> +
+ ), + }, }; }) .filter((document) => document !== null) as IRowProps[], @@ -333,3 +384,7 @@ function getHeader(dateColumnTitle: string, isMobile: boolean): IHead[] { }, ]; } + +function formatName(text: string): string { + return text.replace(/[^a-zA-Z0-9 ]/g, ""); +} diff --git a/src/front/Components/Layouts/Folder/FolderInformation/ClientView/classes.module.scss b/src/front/Components/Layouts/Folder/FolderInformation/ClientView/classes.module.scss index c8c51b44..531ab7bc 100644 --- a/src/front/Components/Layouts/Folder/FolderInformation/ClientView/classes.module.scss +++ b/src/front/Components/Layouts/Folder/FolderInformation/ClientView/classes.module.scss @@ -16,7 +16,6 @@ $mobile-breakpoint: 664px; .tabs { width: calc(100% - 210px); } - border-bottom: 1px solid var(--color-neutral-500); } .content {