@movalib/movalib-commons 1.68.8 → 1.68.10

package/src/components/vehicle/VehicleFullCard.tsx

@@ -11,6 +11,7 @@ import {
   Card,
   CardActions,
   CardContent,
+  Chip,
   FormControl,
   FormHelperText,
   Grid,
@@ -29,7 +30,6 @@ import {
 import { DatePicker } from "@mui/x-date-pickers";
 import moment, { Moment } from 'moment';
 import { useEffect, useRef, useState, type FC } from "react";
-import CatPlateBg from "../../assets/images/car_plate_bg.png";
 import ConfirmationDialog from "../../ConfirmationDialog";
 import { formatDateByTimezone } from "../../helpers/DateUtils";
 import {
@@ -70,7 +70,6 @@ const initialUserFormState = {
   tireHeight: { value: "", isValid: true },
   tireDiameter: { value: "", isValid: true },
   tireSpeedIndex: { value: "", isValid: true },
-
   lastInspectionDate: { value: null, isValid: true },
   lastMaintenanceDate: { value: null, isValid: true },
   tireBrand: { value: "", isValid: true },
@@ -82,6 +81,19 @@ const initialUserFormState = {
   secondaryTireSize: { value: null, isValid: true },
 };
 
+// Styles partagés pour les lignes label/valeur
+const rowSx = {
+  display: "flex",
+  justifyContent: "space-between",
+  alignItems: "center",
+  py: 0.75,
+  borderBottom: "0.5px solid",
+  borderColor: "divider",
+  "&:last-child": { borderBottom: "none" },
+};
+
+
+
 const VehicleFullCard: FC<VehicleFullCardProps> = ({
   vehicle,
   fullwidth,
@@ -97,6 +109,12 @@ const VehicleFullCard: FC<VehicleFullCardProps> = ({
   currentUser,
 }) => {
   const theme = useTheme();
+  const sectionTitleSx = {
+  fontWeight: "bold",
+  textTransform: "uppercase" as const,
+  mb: 1,
+  color: theme.palette.primary.main
+};
   const [localEditMode, setLocalEditMode] = useState(editMode);
   const [openConfirmDocumentDelete, setOpenConfirmDocumentDelete] =
     useState(false);
@@ -104,9 +122,7 @@ const VehicleFullCard: FC<VehicleFullCardProps> = ({
     useState(false);
   const [documentToDelete, setDocumentToDelete] = useState("");
   const [sizeLimit, setSizeLimit] = useState(false);
-  // Formulaire utilisé pour les modifications d'informations sur le véhicule
   const [form, setForm] = useState<MovaVehicleForm>(initialUserFormState);
-  // Références aux éventuels documents uploadés depuis la fiche
   const invoiceInputRef = useRef<HTMLInputElement>(null);
   const tirePictureInputRef = useRef(null);
   const [isShowLinkedDocument, setShowLinkedDocument] = useState(false);
@@ -139,75 +155,38 @@ const VehicleFullCard: FC<VehicleFullCardProps> = ({
     setForm((prevForm) => {
       const updatedForm = {
         ...prevForm,
-        currentMileage: {
-          ...prevForm.currentMileage,
-          value: vehicle.currentMileage,
-        },
-        averageMileagePerYear: {
-          ...prevForm.averageMileagePerYear,
-          value: vehicle.averageMileagePerYear,
-        },
+        currentMileage: { ...prevForm.currentMileage, value: vehicle.currentMileage },
+        averageMileagePerYear: { ...prevForm.averageMileagePerYear, value: vehicle.averageMileagePerYear },
         tireWidth: { ...prevForm.tireWidth, value: vehicle.tireWidth },
         tireHeight: { ...prevForm.tireHeight, value: vehicle.tireHeight },
         tireDiameter: { ...prevForm.tireDiameter, value: vehicle.tireDiameter },
-        tireSpeedIndex: {
-          ...prevForm.tireSpeedIndex,
-          value: vehicle.tireSpeedIndex,
-        },
-        secondaryTireWidth: {
-          ...prevForm.secondaryTireWidth,
-          value: vehicle.secondaryTireWidth,
-        },
-        secondaryTireHeight: {
-          ...prevForm.secondaryTireHeight,
-          value: vehicle.secondaryTireHeight,
-        },
-        secondaryTireDiameter: {
-          ...prevForm.secondaryTireDiameter,
-          value: vehicle.secondaryTireDiameter,
-        },
-        secondaryTireSpeedIndex: {
-          ...prevForm.secondaryTireSpeedIndex,
-          value: vehicle.secondaryTireSpeedIndex,
-        },
+        tireSpeedIndex: { ...prevForm.tireSpeedIndex, value: vehicle.tireSpeedIndex },
+        secondaryTireWidth: { ...prevForm.secondaryTireWidth, value: vehicle.secondaryTireWidth },
+        secondaryTireHeight: { ...prevForm.secondaryTireHeight, value: vehicle.secondaryTireHeight },
+        secondaryTireDiameter: { ...prevForm.secondaryTireDiameter, value: vehicle.secondaryTireDiameter },
+        secondaryTireSpeedIndex: { ...prevForm.secondaryTireSpeedIndex, value: vehicle.secondaryTireSpeedIndex },
         lastInspectionDate: {
           ...prevForm.lastInspectionDate,
-          value: vehicle.lastInspectionDate
-            ? new Date(vehicle.lastInspectionDate)
-            : null,
+          value: vehicle.lastInspectionDate ? new Date(vehicle.lastInspectionDate) : null,
         },
         lastMaintenanceDate: {
           ...prevForm.lastMaintenanceDate,
-          value: vehicle.lastMaintenanceDate
-            ? new Date(vehicle.lastMaintenanceDate)
-            : null,
+          value: vehicle.lastMaintenanceDate ? new Date(vehicle.lastMaintenanceDate) : null,
         },
         tireBrand: { ...prevForm.tireBrand, value: vehicle.tireBrand },
         tireProfile: { ...prevForm.tireProfile, value: vehicle.tireProfile },
       };
       if (vehicle.foreignPlate) {
-        updatedForm.vehicleModel = {
-          ...prevForm.vehicleModel,
-          value: vehicle.model,
-        };
+        updatedForm.vehicleModel = { ...prevForm.vehicleModel, value: vehicle.model };
       }
-
       if (isVehicleTireSizeDefined(vehicle)) {
-        updatedForm.tireSize = {
-          ...prevForm.tireSize,
-          value: vehicle.tireSize,
-        };
+        updatedForm.tireSize = { ...prevForm.tireSize, value: vehicle.tireSize };
       }
       if (isVehicleSecondaryTireSizeDefined(vehicle)) {
-        updatedForm.secondaryTireSize = {
-          ...prevForm.secondaryTireSize,
-          value: vehicle.secondaryTireSize,
-        };
+        updatedForm.secondaryTireSize = { ...prevForm.secondaryTireSize, value: vehicle.secondaryTireSize };
       }
-
       return updatedForm;
     });
-
     Logger.info(form);
   };
 
@@ -221,30 +200,17 @@ const VehicleFullCard: FC<VehicleFullCardProps> = ({
     }
   };
 
-  const isVehicleTireSizeDefined = (vehicle: Vehicle) => {
-    return (
-      vehicle.tireSize && vehicle.tireSize.diameter && vehicle.tireSize.height
-    );
-  };
-  const isVehicleSecondaryTireSizeDefined = (vehicle: Vehicle) => {
-    return (
-      vehicle.secondaryTireSize &&
-      vehicle.secondaryTireSize.diameter &&
-      vehicle.secondaryTireSize.height
-    );
-  };
+  const isVehicleTireSizeDefined = (vehicle: Vehicle) =>
+    vehicle.tireSize && vehicle.tireSize.diameter && vehicle.tireSize.height;
+
+  const isVehicleSecondaryTireSizeDefined = (vehicle: Vehicle) =>
+    vehicle.secondaryTireSize &&
+    vehicle.secondaryTireSize.diameter &&
+    vehicle.secondaryTireSize.height;
 
   const validateForm = () => {
     let newForm: MovaVehicleForm = { ...form };
-
-    // Validator pour les champs obligatoires
-    // newForm.currentMileage = validateField(form.currentMileage, value => !!value, 'Champ obligatoire');
-    // newForm.averageMileagePerYear = validateField(form.averageMileagePerYear, value => !!value, 'Champ obligatoire');
-
-    // La validation de la saisie des pneumatiques se fait dans le composant "MovaVehicleTireField", traitée dans le callback "handleOnChangeVehicleTire"
-
     setForm(newForm);
-
     return (
       newForm.currentMileage.isValid &&
       newForm.averageMileagePerYear.isValid &&
@@ -252,9 +218,7 @@ const VehicleFullCard: FC<VehicleFullCardProps> = ({
     );
   };
 
-  const handleInputChange = (
-    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
-  ): void => {
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>): void => {
     handleChange(e.target.name, e.target.value);
   };
 
@@ -263,99 +227,52 @@ const VehicleFullCard: FC<VehicleFullCardProps> = ({
   };
 
   const handleChange = (fieldName: string, fieldValue: string): void => {
-    const newField: MovaFormField = {
-      [fieldName]: { value: fieldValue, isValid: true },
-    };
-
+    const newField: MovaFormField = { [fieldName]: { value: fieldValue, isValid: true } };
     setForm({ ...form, ...newField });
   };
 
-  const uploadVehicleDocument = (
-    document: File,
-    documentType: DocumentType
-  ) => {
+  const uploadVehicleDocument = (document: File, documentType: DocumentType) => {
     if (document.size > 10000000) {
       setSizeLimit(true);
       return;
     }
-
     if (vehicle && document && documentType) {
-      // Utilisation d'un formData pour permettre le trasnfert de fichier vers l'API
       let formData = new FormData();
       formData.append("documentType", documentType);
-      // Ajouter la facture à FormData
       formData.append("file", document);
-
-      // Appel du callback correspondant
       if (onUploadDocument) onUploadDocument(formData);
     }
   };
 
-  /**
-   *
-   * @param event L'upload des documents se fait directement lors du téléchargement
-   * @param docType
-   */
-  const handleFileChange = (
-    event: React.ChangeEvent<HTMLInputElement>,
-    docType: DocumentType
-  ) => {
+  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>, docType: DocumentType) => {
     event.preventDefault();
-
-    if (
-      event &&
-      event.target.files &&
-      event.target.files.length > 0 &&
-      docType
-    ) {
-      uploadVehicleDocument(event.target.files[0], docType);
+    if ((event?.target.files?.length ?? 0) > 0 && docType) {
+      uploadVehicleDocument((event.target.files!)[0], docType);
     }
   };
 
-  const handleOnClickEdit = () => {
-    // On passe la fiche véhicule en mode édition
-    setLocalEditMode(true);
-  };
+  const handleOnClickEdit = () => setLocalEditMode(true);
 
-  const handleOnChangeVehicleTire = (
-    vehicleTire: VehicleTire,
-    isValid: boolean
-  ) => {
+  const handleOnChangeVehicleTire = (vehicleTire: VehicleTire, isValid: boolean) => {
     setForm((prevForm) => ({
       ...prevForm,
-      tireSize: {
-        ...prevForm["tireSize"],
-        value: vehicleTire,
-        isValid: isValid,
-      },
+      tireSize: { ...prevForm["tireSize"], value: vehicleTire, isValid },
     }));
   };
 
-  const handleOnChangeVehicleSecondaryTire = (
-    vehicleTire: VehicleTire,
-    isValid: boolean
-  ) => {
+  const handleOnChangeVehicleSecondaryTire = (vehicleTire: VehicleTire, isValid: boolean) => {
     setForm((prevForm) => ({
       ...prevForm,
-      secondaryTireSize: {
-        ...prevForm["secondaryTireSize"],
-        value: vehicleTire,
-        isValid: isValid,
-      },
+      secondaryTireSize: { ...prevForm["secondaryTireSize"], value: vehicleTire, isValid },
     }));
   };
 
-  const handleOnClickDeleteVehicle = (
-    e: React.MouseEvent<HTMLButtonElement, MouseEvent>
-  ) => {
+  const handleOnClickDeleteVehicle = (e: React.MouseEvent<HTMLButtonElement>) => {
     e.preventDefault();
     setOpenConfirmVehicleDelete(true);
   };
 
-  const handleDeleteDocument = (
-    e: React.MouseEvent<HTMLButtonElement, MouseEvent>,
-    documentId: string
-  ) => {
+  const handleDeleteDocument = (e: React.MouseEvent<HTMLButtonElement>, documentId: string) => {
     e.preventDefault();
     setDocumentToDelete(documentId);
     setOpenConfirmDocumentDelete(true);
@@ -364,51 +281,6 @@ const VehicleFullCard: FC<VehicleFullCardProps> = ({
   const handleOnClickValidate = () => {
     if (validateForm()) {
       Logger.info(form.tireSize.value);
-
-      let query = {
-        currentMileage: form.currentMileage.value,
-        averageMileagePerYear: form.averageMileagePerYear.value,
-        tireWidth:
-          form.tireSize.isValid && form.tireSize.value
-            ? (form.tireSize.value as VehicleTire).width
-            : undefined,
-        tireHeight:
-          form.tireSize.isValid && form.tireSize.value
-            ? (form.tireSize.value as VehicleTire).height
-            : undefined,
-        tireDiameter:
-          form.tireSize.isValid && form.tireSize.value
-            ? (form.tireSize.value as VehicleTire).diameter
-            : undefined,
-        tireSpeedIndex:
-          form.tireSize.isValid && form.tireSize.value
-            ? (form.tireSize.value as VehicleTire).speedIndex
-            : undefined,
-        secondaryTireWidth:
-          form.secondaryTireSize && form.secondaryTireSize.value
-            ? (form.secondaryTireSize.value as VehicleTire).width
-            : undefined,
-        secondaryTireHeight:
-          form.secondaryTireSize && form.secondaryTireSize.value
-            ? (form.secondaryTireSize.value as VehicleTire).height
-            : undefined,
-        secondaryTireDiameter:
-          form.secondaryTireSize && form.secondaryTireSize.value
-            ? (form.secondaryTireSize.value as VehicleTire).diameter
-            : undefined,
-        secondaryTireSpeedIndex:
-          form.secondaryTireSize && form.secondaryTireSize.value
-            ? (form.secondaryTireSize.value as VehicleTire).speedIndex
-            : undefined,
-
-        lastInspectionDate: form.lastInspectionDate.value,
-        lastMaintenanceDate: form.lastMaintenanceDate.value,
-        tireBrand: form.tireBrand.value,
-        tireProfile: form.tireProfile.value,
-      };
-      Logger.info(query);
-
-      // Appel du callback correspondant
       if (onUpdate) onUpdate(form);
     }
   };
@@ -423,29 +295,21 @@ const VehicleFullCard: FC<VehicleFullCardProps> = ({
     setDocumentToDelete("");
   };
 
-  const handleCloseConfirmVehicleDelete = () => {
-    setOpenConfirmVehicleDelete(false);
-  };
+  const handleCloseConfirmVehicleDelete = () => setOpenConfirmVehicleDelete(false);
 
-  /**
-   *
-   */
   const handleConfirmDocumentDelete = () => {
     setOpenConfirmDocumentDelete(false);
-
-    if (vehicle && documentToDelete) {
-      // Appel du callback correspondant
-      if (onDeleteDocument) onDeleteDocument(documentToDelete);
-    }
+    if (vehicle && documentToDelete && onDeleteDocument) onDeleteDocument(documentToDelete);
   };
 
   const handleConfirmVehicleDelete = () => {
     setOpenConfirmVehicleDelete(false);
+    if (vehicle && onDelete) onDelete();
+  };
 
-    if (vehicle && onDelete) {
-      // Appel du callback correspondant
-      onDelete();
-    }
+  const formatDate = (date: any) => {
+    const formatted = formatDateByTimezone(date, "Europe/Paris", DateFormatTypes.SHORT_FORMAT_DATE);
+    return formatted !== "" ? formatted : "-";
   };
 
   return (
@@ -454,399 +318,399 @@ const VehicleFullCard: FC<VehicleFullCardProps> = ({
         <Card
           variant="outlined"
           sx={{
-            maxWidth: fullwidth ? "80%" : 500,
+            width: "100%",
             backgroundColor: focused ? theme.palette.primary.light : "white",
             overflow: "visible",
             mt: 4,
-            pb: 1,
+            borderRadius: 2,
+            border: "0.5px solid",
+            borderColor: "divider",
           }}
         >
           <CardContent sx={{ pt: 0, pb: 0 }}>
-            <Typography
-              variant="h6"
-              component="div"
-              align="center"
-              sx={{ mb: 1 }}
-              color={darken(theme.palette.primary.main, 0.2)}
+
+            {/* ── HEADER ── */}
+            <Box
+              sx={{
+                display: "flex",
+                justifyContent: "space-between",
+                alignItems: "flex-start",
+                px: 2,
+                pt: 2,
+                pb: 2,
+                borderBottom: "0.5px solid",
+                borderColor: "divider",
+              }}
             >
-              {vehicle.brand && `${vehicle.brand} `}
-              {vehicle.model && `${vehicle.model} `}
-              {vehicle.version && `${vehicle.version}`}
-            </Typography>
-            <Grid container justifyContent="space-between">
-              <Grid
-                container
-                sx={{ mb: 1, alignItems: "center", justifyContent: "center" }}
-              >
-                <Grid
-                  item
-                  xs={6}
-                  sx={{ position: "relative", minWidth: "234px" }}
+              <Box>
+                <Typography
+                  variant="h6"
+                  sx={{ fontWeight: 500, lineHeight: 1.2, color: "text.primary" }}
+                >
+                  {vehicle.brand && `${vehicle.brand} `}
+                  {vehicle.model && `${vehicle.model} `}
+                </Typography>
+                {vehicle.version && (
+                  <Typography variant="body2" color="text.secondary" sx={{ mt: 0.25 }}>
+                    {vehicle.version}
+                  </Typography>
+                )}
+
+                {/* Plaque */}
+                <Box
+                  sx={{
+                    display: "inline-flex",
+                    alignItems: "center",
+                    gap: 0.75,
+                    mt: 1.25,
+                    px: 1.25,
+                    py: 0.5,
+                    bgcolor: "#F5F4F0",
+                    border: "0.5px solid #D3D1C7",
+                    borderRadius: "6px",
+                  }}
                 >
-                  <img
-                    src={CatPlateBg}
-                    alt="Plaque d'immatriculation"
-                    style={{ height: "50px", position: "relative" }}
-                  />
                   <Typography
-                    variant="h6"
-                    color={theme.palette.text.primary}
+                    variant="body1"
                     sx={{
-                      position: "absolute",
-                      top: "8px",
-                      left: "76px",
-                      display: "flex",
+                      fontWeight: 600,
+                      letterSpacing: "0.1em",
+                      color: "text.primary",
+                      fontSize: "14px",
                     }}
                   >
-                    <b>
-                      {formatVehiclePlate(vehicle.plate, vehicle.foreignPlate)}
-                    </b>
-                    <IconButton
-                      sx={{ ml: 1 }}
-                      onClick={async () =>
-                        await navigator.clipboard.writeText(
-                          formatVehiclePlate(
-                            vehicle.plate,
-                            vehicle.foreignPlate
-                          )
-                        )
-                      }
-                      size="small"
-                      aria-label="Copier le VIN"
-                    >
-                      <ContentCopy fontSize="small" />
-                    </IconButton>
+                    {formatVehiclePlate(vehicle.plate, vehicle.foreignPlate)}
                   </Typography>
-                </Grid>
+                  <IconButton
+                    size="small"
+                    sx={{ p: 0.25 }}
+                    onClick={async () =>
+                      await navigator.clipboard.writeText(
+                        formatVehiclePlate(vehicle.plate, vehicle.foreignPlate)
+                      )
+                    }
+                    aria-label="Copier la plaque"
+                  >
+                    <ContentCopy sx={{ fontSize: 14, color: "text.disabled" }} />
+                  </IconButton>
+                </Box>
+              </Box>
+
+              {/* Bouton modifier / supprimer */}
+              <Box sx={{ display: "flex", flexDirection: "row", alignItems: "flex-end", gap: 1 }}>
+
                 {onDelete && (
-                  <Grid
-                    item
-                    xs={6}
-                    style={{
-                      display: "flex",
-                      alignItems: "center",
-                      justifyContent: "center",
+                  <Button
+                    variant="outlined"
+                    color={"error"}
+                    size="small"
+                    onClick={(e) => handleOnClickDeleteVehicle(e)}
+                  >
+                    Supprimer
+                  </Button>
+                )}
+                        {!localEditMode && (
+                  <Button
+                    onClick={handleOnClickEdit}
+                    size="small"
+                    variant="outlined"
+                    startIcon={<EditIcon sx={{ fontSize: "14px !important" }} />}
+                    sx={{
+                      fontSize: 12,
+                      borderColor: "divider",
                     }}
                   >
-                    <Button
-                      variant="contained"
-                      color="error"
-                      onClick={(e) => handleOnClickDeleteVehicle(e)}
-                    >
-                      Supprimer
-                    </Button>
-                  </Grid>
+                    Modifier
+                  </Button>
                 )}
-              </Grid>
-
-              {!localEditMode && (
-                <Grid container textAlign="justify" sx={{ pt: 2 }}>
-                  <Grid item xs={8}>
-                    <Typography variant="body1" color="text.secondary">
-                      Km actuel :
+              </Box>
+            </Box>
+
+            {/* ── KILOMÉTRAGE ── */}
+            <Box sx={{ px: 2, py: 1.5, borderBottom: "0.5px solid", borderColor: "divider" }}>
+              <Typography variant={"body2"} sx={sectionTitleSx}>Kilométrage</Typography>
+              <Box sx={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 1 }}>
+                <Box sx={{ bgcolor: "grey.50", borderRadius: 1, p: 1.25 }}>
+                  <Typography variant="caption" color="text.secondary" display="block">
+                    Actuel
+                  </Typography>
+                  {!localEditMode ? (
+                    <Typography variant="body1" fontWeight={500}>
+                      {vehicle.currentMileage ?? "-"}{" "}
+                      <Typography component="span" variant="caption" color="text.secondary">
+                        km
+                      </Typography>
+                    </Typography>
+                  ) : (
+                    <TextField
+                      name="currentMileage"
+                      variant="standard"
+                      type="number"
+                      required
+                      value={form.currentMileage.value ?? ""}
+                      onChange={handleInputChange}
+                      error={Boolean(form.currentMileage.error)}
+                      helperText={
+                        Boolean(form.currentMileage.error && form.currentMileage.value > 0)
+                          ? form.currentMileage.error
+                          : "Sur votre tableau de bord 😉"
+                      }
+                      InputProps={{ disableUnderline: false }}
+                      sx={{ mt: 0.5, width: "100%" }}
+                    />
+                  )}
+                </Box>
+                <Box sx={{ bgcolor: "grey.50", borderRadius: 1, p: 1.25 }}>
+                  <Typography variant="caption" color="text.secondary" display="block">
+                    Moyen annuel
+                  </Typography>
+                  {!localEditMode ? (
+                    <Typography variant="body1" fontWeight={500}>
+                      {vehicle.averageMileagePerYear ?? "-"}{" "}
+                      <Typography component="span" variant="caption" color="text.secondary">
+                        km
+                      </Typography>
                     </Typography>
-                  </Grid>
-                  <Grid item xs={4} sx={{ textAlign: "right" }}>
-                    <Typography variant="body1" color="text.secondary">
-                      <b>{vehicle.currentMileage} km</b>
+                  ) : (
+                    <FormControl fullWidth variant="standard" error={Boolean(form.averageMileagePerYear.error)}>
+                      <Select
+                        name="averageMileagePerYear"
+                        value={form.averageMileagePerYear.value ? String(form.averageMileagePerYear.value) : ""}
+                        onChange={handleSelectChange}
+                        disableUnderline={false}
+                        sx={{ mt: 0.5, fontSize: 14 }}
+                      >
+                        {[5000, 10000, 15000, 20000, 25000, 30000, 50000, 75000, 100000].map((v) => (
+                          <MenuItem key={v} value={v}>{v.toLocaleString("fr-FR")}</MenuItem>
+                        ))}
+                        <MenuItem value={999999}>+100 000</MenuItem>
+                      </Select>
+                      <FormHelperText>{form.averageMileagePerYear.error}</FormHelperText>
+                    </FormControl>
+                  )}
+                </Box>
+              </Box>
+            </Box>
+
+            {/* ── IDENTITÉ TECHNIQUE ── */}
+            <Box sx={{ px: 2, py: 1.5, borderBottom: "0.5px solid", borderColor: "divider" }}>
+              <Typography variant={"body2"} sx={sectionTitleSx}>Identité technique</Typography>
+
+              {localEditMode && form.vehicleModel && vehicle.foreignPlate && (
+                <TextField
+                  label="Modèle de la voiture"
+                  name="vehicleModel"
+                  variant="outlined"
+                  type="text"
+                  required
+                  fullWidth
+                  value={form.vehicleModel.value}
+                  onChange={handleInputChange}
+                  error={Boolean(form.vehicleModel.error)}
+                  sx={{ mb: 1.5, "& input": { textTransform: "uppercase" } }}
+                />
+              )}
+                   {vehicle.firstRegistrationDate && (
+                <Box sx={rowSx}>
+                  <Typography variant="body2" color="text.secondary">Mise en circulation</Typography>
+                      <Typography variant="body2" fontWeight={500}>
+                      {formatDate(vehicle.firstRegistrationDate)}
                     </Typography>
-                  </Grid>
-                </Grid>
+                </Box>
               )}
 
-              {!localEditMode && vehicle.vin && (
-                <Grid container textAlign="justify" sx={{ pt: 2 }}>
-                  <Grid item xs={6}>
-                    <Typography variant="body1" color="text.secondary">
-                      Vin :
+              {vehicle.vin && (
+                <Box sx={rowSx}>
+                  <Typography variant="body2" color="text.secondary">VIN</Typography>
+                  <Box sx={{ display: "flex", alignItems: "center", gap: 0.5 }}>
+                    <Typography variant="body2" fontWeight={500}>
+                      {vehicle.vin}
                     </Typography>
-                  </Grid>
-                  <Grid item xs={6} sx={{ textAlign: "right" }}>
-                    <Typography
-                      variant="body1"
-                      color="text.secondary"
-                      sx={{
-                        display: "flex",
-                        flexDirection: "row",
-                        alignItems: "center",
-                        justifyContent: "flex-end",
-                      }}
+                    <IconButton
+                      size="small"
+                      sx={{ p: 0.25 }}
+                      onClick={async () => await navigator.clipboard.writeText(vehicle.vin)}
+                      aria-label="Copier le VIN"
                     >
-                      <b>{vehicle.vin}</b>
-                      <IconButton
-                        sx={{ ml: 1, height: "24px" }}
-                        onClick={async () =>
-                          await navigator.clipboard.writeText(vehicle.vin)
-                        }
-                        size="small"
-                        aria-label="Copier le VIN"
-                      >
-                        <ContentCopy fontSize="small" />
-                      </IconButton>
-                    </Typography>
-                  </Grid>
-                </Grid>
+                      <ContentCopy sx={{ fontSize: 13, color: "text.disabled" }} />
+                    </IconButton>
+                  </Box>
+                </Box>
               )}
-              {localEditMode && form.vehicleModel && vehicle.foreignPlate && (
-                <Grid item xs={12}>
-                  <TextField
-                    label="Modèle de la voiture "
-                    name="vehicleModel"
-                    variant="outlined"
-                    type="text"
-                    required
-                    value={form.vehicleModel.value}
-                    onChange={(e) => handleInputChange(e)}
-                    error={Boolean(form.vehicleModel.error)}
-                    sx={{
-                      width: "100%",
-                      mt: 2,
-                      "& input": { textTransform: "uppercase" }, // CSS pour forcer les majuscules dans l'input
-                    }}
-                  />
-                </Grid>
+              {vehicle.energy && (
+                <Box sx={rowSx}>
+                  <Typography variant="body2" color="text.secondary">Énergie</Typography>
+                  <Typography variant="body2" fontWeight={500}>{vehicle.energy}</Typography>
+                </Box>
               )}
-
-              {localEditMode && (
-                <Grid item xs={12}>
-                  <TextField
-                    label="Kilométrage actuel"
-                    name="currentMileage"
-                    variant="outlined"
-                    type="number"
-                    required
-                    value={form.currentMileage.value}
-                    onChange={(e) => handleInputChange(e)}
-                    error={Boolean(form.currentMileage.error)}
-                    sx={{
-                      width: "100%",
-                      mt: 2,
-                      "& input": { textTransform: "uppercase" }, // CSS pour forcer les majuscules dans l'input
-                    }}
-                    helperText={
-                      Boolean(
-                        form.currentMileage.error &&
-                          form.currentMileage.value > 0
-                      )
-                        ? form.currentMileage.error
-                        : "Sur votre tableau de bord 😉"
-                    }
-                  />
-                </Grid>
+              {vehicle.gearboxType && (
+                <Box sx={rowSx}>
+                  <Typography variant="body2" color="text.secondary">Type boîte</Typography>
+                  <Typography variant="body2" fontWeight={500}>{vehicle.gearboxType}</Typography>
+                </Box>
               )}
-
-              {!localEditMode && (
-                <Grid container textAlign="justify" sx={{ pt: 2 }}>
-                  <Grid item xs={8}>
-                    <Typography variant="body1" color="text.secondary">
-                      Km moyen annuel :
-                    </Typography>
-                  </Grid>
-                  <Grid item xs={4} sx={{ textAlign: "right" }}>
-                    <Typography variant="body1" color="text.secondary">
-                      <b>{vehicle.averageMileagePerYear} km</b>
-                    </Typography>
-                  </Grid>
-                </Grid>
+              {vehicle.gearboxCode && (
+                <Box sx={rowSx}>
+                  <Typography variant="body2" color="text.secondary">Code boîte</Typography>
+                  <Typography variant="body2" fontWeight={500}>
+                    {vehicle.gearboxCode}
+                  </Typography>
+                </Box>
               )}
-
-              {localEditMode && (
-                <Grid item xs={12}>
-                  <FormControl
-                    fullWidth
-                    margin="normal"
-                    error={Boolean(form.averageMileagePerYear.error)}
-                  >
-                    <InputLabel id="averageMileagePerYear-label">
-                      Kilométrage moyen annuel
-                    </InputLabel>
-                    <Select
-                      labelId="averageMileagePerYear-label"
-                      id="averageMileagePerYear"
-                      name="averageMileagePerYear"
-                      value={
-                        form.averageMileagePerYear.value
-                          ? String(form.averageMileagePerYear.value)
-                          : ""
-                      }
-                      onChange={(e) => handleSelectChange(e)}
-                      label="Kilométrage moyen annuel"
-                    >
-                      <MenuItem value={5000}>5 000</MenuItem>
-                      <MenuItem value={10000}>10 000</MenuItem>
-                      <MenuItem value={15000}>15 000</MenuItem>
-                      <MenuItem value={20000}>20 000</MenuItem>
-                      <MenuItem value={25000}>25 000</MenuItem>
-                      <MenuItem value={30000}>30 000</MenuItem>
-                      <MenuItem value={50000}>50 000</MenuItem>
-                      <MenuItem value={75000}>75 000</MenuItem>
-                      <MenuItem value={100000}>100 000</MenuItem>
-                      <MenuItem value={999999}>+100 000</MenuItem>
-                    </Select>
-                    <FormHelperText>
-                      {form.averageMileagePerYear.error}
-                    </FormHelperText>
-                  </FormControl>
-                </Grid>
+              {vehicle.engineCode && (
+                <Box sx={rowSx}>
+                  <Typography variant="body2" color="text.secondary">Code moteur</Typography>
+                  <Typography variant="body2" fontWeight={500}>
+                    {vehicle.engineCode}
+                  </Typography>
+                </Box>
               )}
+            </Box>
 
-              {!localEditMode && (
-                <>
-                  <Grid container textAlign="justify" sx={{ pt: 2 }}>
-                    <Grid item xs={6}>
-                      <Typography variant="body1" color="text.secondary">
-                        Pneumatiques{" "}
-                        {isVehicleSecondaryTireSizeDefined(vehicle) ? "AV" : ""}{" "}
-                        :
-                      </Typography>
-                    </Grid>
-                    <Grid item xs={6} sx={{ textAlign: "right" }}>
-                      <Typography variant="body1" color="text.secondary">
-                        {isVehicleTireSizeDefined(vehicle) ? (
-                          <b>{formatVehicleTire(vehicle.tireSize)}</b>
-                        ) : (
-                          "-"
-                        )}
-                      </Typography>
-                    </Grid>
-                  </Grid>
+            {/* ── PNEUMATIQUES ── */}
+            <Box sx={{ px: 2, py: 1.5, borderBottom: "0.5px solid", borderColor: "divider" }}>
+              <Typography variant={"body2"} sx={sectionTitleSx}>Pneumatiques</Typography>
 
-                  {isVehicleSecondaryTireSizeDefined(vehicle) && (
-                    <Grid container textAlign="justify" sx={{ pt: 2 }}>
-                      <Grid item xs={6}>
-                        <Typography variant="body1" color="text.secondary">
-                          Pneumatiques AR:
-                        </Typography>
-                      </Grid>
-                      <Grid item xs={6} sx={{ textAlign: "right" }}>
-                        <Typography variant="body1" color="text.secondary">
-                          {isVehicleSecondaryTireSizeDefined(vehicle) ? (
-                            <b>
-                              {formatVehicleTire(vehicle.secondaryTireSize)}
-                            </b>
-                          ) : (
-                            "-"
-                          )}
-                        </Typography>
-                      </Grid>
-                    </Grid>
-                  )}
-                </>
-              )}
-              {!localEditMode && (
-                <Grid container textAlign="justify" sx={{ pt: 2 }}>
-                  <Grid item xs={6}>
-                    <Typography variant="body1" color="text.secondary">
-                      Marque pneumatiques :
-                    </Typography>
-                  </Grid>
-                  <Grid item xs={6} sx={{ textAlign: "right" }}>
-                    <Typography variant="body1" color="text.secondary">
-                      {vehicle.tireBrand ? <b>{vehicle.tireBrand}</b> : "-"}
+              {!localEditMode ? (
+                <>
+                  <Box sx={rowSx}>
+                    <Typography variant="body2" color="text.secondary">
+                      {isVehicleSecondaryTireSizeDefined(vehicle) ? "Avant" : "Taille"}
                     </Typography>
-                  </Grid>
-                </Grid>
-              )}
+                    {isVehicleTireSizeDefined(vehicle) ? (
+                      <Chip
+                        label={formatVehicleTire(vehicle.tireSize)}
+                        size="small"
+                        color="primary"
+                        sx={{
+                          fontWeight: 500,
+                          fontSize: 12,
+                          height: 24,
+                          "& .MuiChip-label": { px: 1 },
+                        }}
+                      />
+                    ) : (
+                      <Typography variant="body2" color="text.disabled">—</Typography>
+                    )}
+                  </Box>
+                  {isVehicleSecondaryTireSizeDefined(vehicle) && (
+                    <Box sx={rowSx}>
+                      <Typography variant="body2" color="text.secondary">Arrière</Typography>
+                      <Chip
+                        label={formatVehicleTire(vehicle.secondaryTireSize)}
+                        size="small"
+                        color="primary"
+                        sx={{
 
-              {!localEditMode && (
-                <Grid container textAlign="justify" sx={{ pt: 2 }}>
-                  <Grid item xs={6}>
-                    <Typography variant="body1" color="text.secondary">
-                      Modèle pneumatiques :
+                          fontWeight: 500,
+                          fontSize: 12,
+                          height: 24,
+                          "& .MuiChip-label": { px: 1 },
+                        }}
+                      />
+                    </Box>
+                  )}
+                  <Box sx={rowSx}>
+                    <Typography variant="body2" color="text.secondary">Marque</Typography>
+                    <Typography variant="body2" fontWeight={500}>
+                      {vehicle.tireBrand || "—"}
                     </Typography>
-                  </Grid>
-                  <Grid item xs={6} sx={{ textAlign: "right" }}>
-                    <Typography variant="body1" color="text.secondary">
-                      {vehicle.tireProfile ? <b>{vehicle.tireProfile}</b> : "-"}
+                  </Box>
+                  <Box sx={rowSx}>
+                    <Typography variant="body2" color="text.secondary">Modèle</Typography>
+                    <Typography variant="body2" fontWeight={500}>
+                      {vehicle.tireProfile || "—"}
                     </Typography>
-                  </Grid>
-                </Grid>
-              )}
-
-              {localEditMode && (
+                  </Box>
+                </>
+              ) : (
                 <>
-                  <Grid item xs={12} sx={{ mt: 1 }}>
+                  <Box sx={{ mt: 1 }}>
                     <MovaVehicleTireField
                       label="AV"
                       vehicleTire={form.tireSize.value}
                       onChangeVehicleTire={handleOnChangeVehicleTire}
                     />
-                  </Grid>
-                  <Grid item xs={12} sx={{ mt: 1 }}>
+                  </Box>
+                  <Box sx={{ mt: 1 }}>
                     <MovaVehicleTireField
                       label="AR"
                       vehicleTire={form.secondaryTireSize.value}
                       onChangeVehicleTire={handleOnChangeVehicleSecondaryTire}
                     />
-                  </Grid>
-                </>
-              )}
-              {localEditMode && (
-                <Grid item xs={12}>
+                  </Box>
+                  <TextField
+                    label="Marque pneumatique"
+                    name="tireBrand"
+                    variant="outlined"
+                    fullWidth
+                    value={form.tireBrand.value}
+                    onChange={handleInputChange}
+                    error={Boolean(form.tireBrand.error)}
+                    sx={{ mt: 2, "& input": { textTransform: "uppercase" } }}
+                  />
                   <TextField
                     label="Modèle pneumatique"
                     name="tireProfile"
                     variant="outlined"
+                    fullWidth
                     value={form.tireProfile.value}
-                    onChange={(e) => handleInputChange(e)}
+                    onChange={handleInputChange}
                     error={Boolean(form.tireProfile.error)}
-                    sx={{
-                      width: "100%",
-                      mt: 2,
-                      "& input": { textTransform: "uppercase" }, // CSS pour forcer les majuscules dans l'input
-                    }}
+                    sx={{ mt: 1, "& input": { textTransform: "uppercase" } }}
                   />
-                </Grid>
+                </>
               )}
+            </Box>
 
-              {localEditMode && (
-                <Grid item xs={12}>
-                  <TextField
-                    label="Marque pneumatique"
-                    name="tireBrand"
-                    variant="outlined"
-                    value={form.tireBrand.value}
-                    onChange={(e) => handleInputChange(e)}
-                    error={Boolean(form.tireBrand.error)}
-                    sx={{
-                      width: "100%",
-                      mt: 2,
-                      "& input": { textTransform: "uppercase" }, // CSS pour forcer les majuscules dans l'input
-                    }}
-                  />
-                </Grid>
-              )}
+            {/* ── ENTRETIEN ── */}
+            <Box sx={{ px: 2, py: 1.5, borderBottom: "0.5px solid", borderColor: "divider" }}>
+              <Typography  variant={"body2"} sx={sectionTitleSx}>Entretien</Typography>
 
-              {!localEditMode && (
-                <Grid container textAlign="justify" sx={{ pt: 2 }}>
-                  <Grid item xs={8}>
-                    <Typography variant="body1" color="text.secondary">
-                      Dernier contrôle technique :
+              {!localEditMode ? (
+                <>
+                  <Box sx={rowSx}>
+                    <Box sx={{ display: "flex", alignItems: "center", gap: 0.75 }}>
+                      <Box
+                        sx={{
+                          width: 6,
+                          height: 6,
+                          borderRadius: "50%",
+                          bgcolor: vehicle.lastInspectionDate ? "success.main" : "warning.main",
+                          flexShrink: 0,
+                        }}
+                      />
+                      <Typography variant="body2" color="text.secondary">
+                        Contrôle technique
+                      </Typography>
+                    </Box>
+                    <Typography variant="body2" fontWeight={500}>
+                      {formatDate(vehicle.lastInspectionDate)}
                     </Typography>
-                  </Grid>
-                  <Grid item xs={4} sx={{ textAlign: "right" }}>
-                    <Typography variant="body1" color="text.secondary">
-                      <b>
-                        {formatDateByTimezone(
-                          vehicle.lastInspectionDate,
-                          "Europe/Paris",
-                          DateFormatTypes.SHORT_FORMAT_DATE
-                        ) !== ""
-                          ? formatDateByTimezone(
-                              vehicle.lastInspectionDate,
-                              "Europe/Paris",
-                              DateFormatTypes.SHORT_FORMAT_DATE
-                            )
-                          : "-"}
-                      </b>
+                  </Box>
+                  <Box sx={rowSx}>
+                    <Box sx={{ display: "flex", alignItems: "center", gap: 0.75 }}>
+                      <Box
+                        sx={{
+                          width: 6,
+                          height: 6,
+                          borderRadius: "50%",
+                          bgcolor: vehicle.lastMaintenanceDate ? "success.main" : "warning.main",
+                          flexShrink: 0,
+                        }}
+                      />
+                      <Typography variant="body2" color="text.secondary">
+                        Dernier entretien
+                      </Typography>
+                    </Box>
+                    <Typography variant="body2" fontWeight={500}>
+                      {formatDate(vehicle.lastMaintenanceDate)}
                     </Typography>
-                  </Grid>
-                </Grid>
-              )}
-
-              {localEditMode && (
-                <Grid item xs={12}>
-                  <FormControl fullWidth sx={{ marginTop: 2 }}>
+                  </Box>
+                </>
+              ) : (
+                <>
+                  <FormControl fullWidth sx={{ mt: 1.5 }}>
                     <DatePicker
                       label={"Dernier contrôle technique"}
                       name={"lastInspectionDate"}
@@ -865,42 +729,10 @@ const VehicleFullCard: FC<VehicleFullCardProps> = ({
 
                     />
                   </FormControl>
-                </Grid>
-              )}
-
-              {!localEditMode && (
-                <Grid container textAlign="justify" sx={{ pt: 2 }}>
-                  <Grid item xs={8}>
-                    <Typography variant="body1" color="text.secondary">
-                      Dernier entretien :
-                    </Typography>
-                  </Grid>
-                  <Grid item xs={4} sx={{ textAlign: "right" }}>
-                    <Typography variant="body1" color="text.secondary">
-                      <b>
-                        {formatDateByTimezone(
-                          vehicle.lastMaintenanceDate,
-                          "Europe/Paris",
-                          DateFormatTypes.SHORT_FORMAT_DATE
-                        ) !== ""
-                          ? formatDateByTimezone(
-                              vehicle.lastMaintenanceDate,
-                              "Europe/Paris",
-                              DateFormatTypes.SHORT_FORMAT_DATE
-                            )
-                          : "-"}
-                      </b>
-                    </Typography>
-                  </Grid>
-                </Grid>
-              )}
-
-              {localEditMode && (
-                <Grid item xs={12}>
-                  <FormControl fullWidth sx={{ marginTop: 2 }}>
+                  <FormControl fullWidth sx={{ mt: 2 }}>
                     <DatePicker
-                      label={"Dernier entretien"}
-                      name={"lastMaintenanceDate"}
+                      label="Dernier entretien"
+                      name="lastMaintenanceDate"
                       value={
                         (form.lastMaintenanceDate.value
                           ? moment(form.lastMaintenanceDate.value)
@@ -918,218 +750,126 @@ const VehicleFullCard: FC<VehicleFullCardProps> = ({
                       }
                     />
                   </FormControl>
-                </Grid>
+                </>
               )}
-            </Grid>
+            </Box>
 
+            {/* ── CARNET DU VÉHICULE ── */}
             {!localEditMode && (
-              <>
-                <Grid item xs={12}>
-                  <Typography
-                    variant="h6"
-                    component="div"
-                    align="center"
-                    sx={{ mt: 3, mb: 1 }}
-                    color={darken(theme.palette.primary.main, 0.2)}
-                  >
-                    CARNET DU VÉHICULE
-                  </Typography>
-                </Grid>
-
-                {vehicle.documents &&
-                  vehicle.documents
-                    ?.filter((doc) => doc.fileSignedUrl)
-                    .map((invoice, index) => (
-                      <Grid
-                        container
-                        sx={{
-                          justifyContent: "space-between",
-                          alignItems: "center",
-                        }}
-                        key={index + 1}
-                      >
-                        <Grid
-                          item
-                          xs={11}
-                          key={(index + 1) * 50}
-                          sx={{ textAlign: "left" }}
-                        >
-                          <Tooltip title={invoice.originalFileName}>
-                            <Link
-                              color={darken("#F29ABA", 0.2)}
-                              href={invoice.fileSignedUrl}
-                              target="_blank"
-                              rel="noopener"
-                            >
-                              <Typography variant="body1">
-                                {invoice.fileName}
-                              </Typography>
-                            </Link>
-                          </Tooltip>
-                        </Grid>
-                        <Grid
-                          item
-                          xs={1}
-                          key={(index + 1) * 100}
-                          sx={{ textAlign: "right" }}
+              <Box sx={{ px: 2, py: 1.5 }}>
+                <Typography  variant={"body2"} sx={sectionTitleSx}>Carnet du véhicule</Typography>
+
+                {vehicle.documents
+                  ?.filter((doc) => doc.fileSignedUrl)
+                  .map((invoice, index) => (
+                    <Box
+                      key={index + 1}
+                      sx={{
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "space-between",
+                        bgcolor: "grey.50",
+                        borderRadius: 1,
+                        px: 1.5,
+                        py: 0.75,
+                        mb: 0.75,
+                      }}
+                    >
+                      <Tooltip title={invoice.originalFileName}>
+                        <Link
+                          href={invoice.fileSignedUrl}
+                          target="_blank"
+                          rel="noopener"
+                          underline="hover"
+                          sx={{ fontSize: 13, color: "#185FA5", flex: 1, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", fontFamily: "Outfit" }}
                         >
-                          <IconButton
-                            disabled={
-                              !(invoice.ownerId.toString() == currentUser.id)
-                            }
-                            onClick={(e) =>
-                              handleDeleteDocument(e, invoice?.id)
-                            }
-                          >
-                            <CloseIcon />
-                          </IconButton>
-                        </Grid>
-                      </Grid>
-                    ))}
-
-                {/* * Les FACTURES du véhicule
-                                {vehicle.documents && vehicle.documents?.filter(doc => doc.type === DocumentType.VEHICLE_MAINTENANCE_INVOICE)
-                                .map((invoice, index) => (
-                                    <Grid container sx={{ justifyContent: 'space-between', alignItems: 'center' }} key={index+1}>
-                                        <Grid item xs={11}  key={(index+1)*50} sx={{ textAlign: 'left' }} >
-                                            <Link color={darken('#F29ABA', 0.2)} href={invoice.fileSignedUrl} target="_blank" rel="noopener">
-                                                <Typography variant="body1">
-                                                    Facture du {formatDateByTimezone(invoice.creationDate, 'fr', DateFormatTypes.SHORT_FORMAT_DATE)}
-                                                </Typography>
-                                            </Link>
-                                        </Grid>
-                                        <Grid item xs={1}  key={(index+1)*100} sx={{ textAlign: 'right' }}>
-                                            <IconButton onClick={(e) => handleDeleteDocument(e, invoice.id)}>
-                                                <CloseIcon />
-                                            </IconButton>
-                                        </Grid>
-                                    </Grid>
-                                ))}
-    
-                                {vehicle.documents && vehicle.documents?.filter(doc => doc.type === DocumentType.VEHICLE_TIRE_PHOTO)
-                                .map((tirePhoto, index) => (
-                                    <Grid container sx={{ justifyContent: 'space-between', alignItems: 'center' }} key={index+1}>
-                                        <Grid item xs={11} key={(index+1)*50} sx={{ textAlign: 'left' }} >
-                                            <Link color={darken('#F29ABA', 0.2)} href={tirePhoto.fileSignedUrl} target="_blank" rel="noopener">
-                                                <Typography variant="body1">
-                                                    Photo pneu du {formatDateByTimezone(tirePhoto.creationDate, 'fr', DateFormatTypes.SHORT_FORMAT_DATE)}
-                                                </Typography>
-                                            </Link>
-                                        </Grid>
-                                        <Grid item xs={1}  key={(index+1)*100} sx={{ textAlign: 'right' }}>
-                                            <IconButton onClick={(e) => handleDeleteDocument(e, tirePhoto.id)}>
-                                                <CloseIcon />
-                                            </IconButton>
-                                        </Grid>
-                                    </Grid>
-                                ))} */}
-
-                <Grid container>
-                  <Grid item xs={12} sx={{ mt: 2, textAlign: "center" }}>
-                    <div>
-                      <input
-                        accept="image/*, application/pdf"
-                        type="file"
-                        style={{ display: "none" }}
-                        ref={invoiceInputRef}
-                        id="raised-button-invoice"
-                        onChange={(e) =>
-                          handleFileChange(e, docTypeCurrent.current!)
-                        }
-                      />
-                      <Button
-                        size="large"
-                        disabled={currentUpload}
-                        onClick={() => setShowLinkedDocument(true)}
-                        component="span"
-                        variant="outlined"
-                        startIcon={<AttachFile />}
-                        sx={{
-                          alignItems: "center",
-                          width: "90%",
-                          mt: 2,
-                          mb: 1,
-                          height: "50px",
-                          p: 1,
-                          color: darken(theme.palette.primary.main, 0.2),
-                        }}
+                          {invoice.fileName}
+                        </Link>
+                      </Tooltip>
+                      <IconButton
+                        size="small"
+                        disabled={!(invoice.ownerId.toString() === currentUser.id)}
+                        onClick={(e) => handleDeleteDocument(e, invoice?.id)}
+                        sx={{ ml: 1, flexShrink: 0 }}
                       >
-                        Ajouter un document
-                      </Button>
-                      {currentUpload && (
-                        <Typography
-                          variant="body2"
-                          sx={{ animation: "blink 1.5s infinite" }}
-                        >
-                          Document en cours d'importation...
-                        </Typography>
-                      )}
-                      {sizeLimit && (
-                        <Typography
-                          variant="body1"
-                          sx={{ animation: "blink 1.5s infinite" }}
-                          color={theme.palette.warning.dark}
-                        >
-                          Echec de l'importation car la taille du fichier
-                          dépasse 10Mo
-                        </Typography>
-                      )}
-                      {!sizeLimit && (
-                        <Typography variant="body2">
-                          Taille maximale du fichier : 10Mo
-                        </Typography>
-                      )}
-                    </div>
-                  </Grid>
-                </Grid>
-              </>
+                        <CloseIcon sx={{ fontSize: 16 }} />
+                      </IconButton>
+                    </Box>
+                  ))}
+
+                <Box sx={{ mt: 1.5 }}>
+                  <input
+                    accept="image/*, application/pdf"
+                    type="file"
+                    style={{ display: "none" }}
+                    ref={invoiceInputRef}
+                    id="raised-button-invoice"
+                    onChange={(e) => handleFileChange(e, docTypeCurrent.current!)}
+                  />
+                  <Button
+                    fullWidth
+                    size="medium"
+                    disabled={currentUpload}
+                    onClick={() => setShowLinkedDocument(true)}
+                    component="span"
+                    variant="outlined"
+                    startIcon={<AttachFile />}
+                    sx={{
+                      border: "1.5px dashed",
+                      borderColor: "divider",
+                      color: "text.secondary",
+                      "&:hover": { borderColor: "text.secondary", bgcolor: "grey.50" },
+                    }}
+                  >
+                    Ajouter un document
+                  </Button>
+                  {currentUpload && (
+                    <Typography variant="caption" color="text.secondary" display="block" textAlign="center" sx={{ mt: 0.75 }}>
+                      Document en cours d'importation...
+                    </Typography>
+                  )}
+                  {sizeLimit ? (
+                    <Typography variant="caption" color="warning.dark" display="block" textAlign="center" sx={{ mt: 0.5 }}>
+                      Échec : fichier supérieur à 10 Mo
+                    </Typography>
+                  ) : (
+                    <Typography variant="caption" color="text.disabled" display="block" textAlign="center" sx={{ mt: 0.5 }}>
+                      Taille maximale : 10 Mo
+                    </Typography>
+                  )}
+                </Box>
+              </Box>
             )}
           </CardContent>
 
-          <CardActions
-            sx={{ mt: 3, justifyContent: localEditMode ? "center" : "end" }}
-          >
-            {!localEditMode && (
-              <>
-                <Button
-                  onClick={handleOnClickEdit}
-                  color="inherit"
-                  sx={{ width: "45%" }}
-                  variant="text"
-                >
-                  <EditIcon sx={{ mr: 1 }} />
-                  MODIFIER
-                </Button>
-              </>
-            )}
-
-            {localEditMode && (
-              <>
-                <Button
-                  onClick={handleOnClickCancel}
-                  sx={{ width: "45%", color: theme.palette.text.secondary }}
-                  variant="text"
-                >
-                  <CancelIcon sx={{ mr: 1 }} />
-                  ANNULER
-                </Button>
-
-                <Button
-                  onClick={handleOnClickValidate}
-                  sx={{
-                    width: "45%",
-                    color: darken(theme.palette.primary.main, 0.2),
-                  }}
-                  variant="text"
-                >
-                  <EditIcon sx={{ mr: 1 }} />
-                  VALIDER
-                </Button>
-              </>
-            )}
-          </CardActions>
+          {/* ── ACTIONS ── */}
+          {localEditMode && (
+            <CardActions sx={{ justifyContent: "center", px: 2, pb: 2, gap: 1 }}>
+              <Button
+                onClick={handleOnClickCancel}
+                variant="outlined"
+                startIcon={<CancelIcon />}
+                sx={{ width: "45%", color: "text.secondary", borderColor: "divider" }}
+              >
+                Annuler
+              </Button>
+              <Button
+                onClick={handleOnClickValidate}
+                variant="contained"
+                startIcon={<EditIcon />}
+                sx={{
+                  width: "45%",
+                  bgcolor: darken(theme.palette.primary.main, 0.1),
+                  "&:hover": { bgcolor: darken(theme.palette.primary.main, 0.25) },
+                }}
+              >
+                Valider
+              </Button>
+            </CardActions>
+          )}
         </Card>
       )}
+
       {isShowLinkedDocument && (
         <LinkedDocumentDialog
           isVehicle={true}
@@ -1157,4 +897,4 @@ const VehicleFullCard: FC<VehicleFullCardProps> = ({
   );
 };
 
-export default VehicleFullCard;
+export default VehicleFullCard;