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 {