Improving Cartouche

gui/rpk-gui/public/locales/EN/common.json

@@ -171,6 +171,10 @@
     }
   },
   "schemas": {
+    "created_by": "Created by",
+    "created_at": "Created at",
+    "updated_by": "Updated by",
+    "updated_at": "Updated at",
     "individual": {
       "type": "Individual",
       "lastname": "Lastname",

gui/rpk-gui/public/locales/FR/common.json

@@ -171,6 +171,10 @@
     }
   },
   "schemas": {
+    "created_by": "Créé par",
+    "created_at": "Créé le",
+    "updated_by": "Modifié par",
+    "updated_at": "Modifié le",
     "individual": {
       "type": "Particulier",
       "middlename": "Autres prénoms",

gui/rpk-gui/src/components/Cartouche.tsx

@@ -1,6 +1,7 @@
 import { useTranslation } from "@refinedev/core";
 import { useContext } from "react";
 import { FirmContext } from "../contexts/FirmContext";
+import Grid2 from '@mui/material/Grid2';
 
 type CartoucheProps = {
   record: any
@@ -11,16 +12,16 @@ const Cartouche = (props: CartoucheProps) => {
   const { translate: t } = useTranslation();
   return (
     <>
-      <ul>
-        <li>
-          {t("resource.created_at")}: {record.created_at} {t("resource.created_by")}:
-          <AuthorField partnerId={record.created_by} />
-        </li>
-        <li>
-          {t("resource.updated_at")}: {record.updated_at} {t("resource.updated_by")}:
-          <AuthorField partnerId={record.updated_by} />
-        </li>
-      </ul>
+      <Grid2 container spacing={0}>
+        <Grid2 size={2}>{t("schemas.created_by")}:</Grid2>
+        <Grid2 size={4}><AuthorField partnerId={record.created_by} /></Grid2>
+        <Grid2 size={2}>{t("schemas.created_at")}:</Grid2>
+        <Grid2 size={4}>{new Date(record.created_at).toLocaleString()}</Grid2>
+        <Grid2 size={2}>{t("schemas.updated_by")}:</Grid2>
+        <Grid2 size={4}><AuthorField partnerId={record.updated_by} /></Grid2>
+        <Grid2 size={2}>{t("schemas.updated_at")}:</Grid2>
+        <Grid2 size={4}>{new Date(record.updated_at).toLocaleString()}</Grid2>
+      </Grid2>
     </>
   )
 }