@movalib/movalib-commons 1.59.35 → 1.59.37

package/src/components/vehicle/VehicleFullCard.tsx

@@ -1,508 +1,748 @@
+import { AttachFile } from "@mui/icons-material";
 import {
-    Alert, Box, Button, Card, CardActions, CardContent, FormControl, FormHelperText, Grid, IconButton, InputLabel,
-    Link, MenuItem, Select, SelectChangeEvent, TextField, Tooltip, Typography, darken, useTheme
-} from '@mui/material';
-import { useState, type FC, useEffect, useRef } from 'react';
-import CarFigure from "../../assets/images/car_figure.png";
-import { MovaFormField, MovaVehicleForm } from '../../helpers/Types';
-import Vehicle from '../../models/Vehicle';
-import Document from '../../models/Document';
-import VehicleTire from '../../models/VehicleTire';
-import MovaVehicleTireField from '../../MovaVehicleTireField';
-import ConfirmationDialog from '../../ConfirmationDialog';
-import { DocumentType, DateFormatTypes, MovaAppType } from '../../helpers/Enums';
-import { validateField, formatVehicleTire, formatFrenchVehiclePlate } from '../../helpers/Tools';
-import MovaDigitalPassport from '../../MovaDigitalPassport';
-import Loader from '../../Loader';
-import { formatDateByTimezone } from '../../helpers/DateUtils';
-import CancelIcon from '@mui/icons-material/CloseRounded';
-import EditIcon from '@mui/icons-material/EditRounded';
-import CloseIcon from '@mui/icons-material/CloseRounded';
-import Logger from '../../helpers/Logger';
-import { AttachFile } from '@mui/icons-material';
-import { LinkedDocumentDialog } from '../LinkedDocumentDialog';
-import User from '../../models/User';
-import CatPlateBg from '../../assets/images/car_plate_bg.png';
-import { DatePicker } from '@mui/x-date-pickers';
+  default as CancelIcon,
+  default as CloseIcon,
+} from "@mui/icons-material/CloseRounded";
+import EditIcon from "@mui/icons-material/EditRounded";
+import {
+  Alert,
+  Box,
+  Button,
+  Card,
+  CardActions,
+  CardContent,
+  FormControl,
+  FormHelperText,
+  Grid,
+  IconButton,
+  InputLabel,
+  Link,
+  MenuItem,
+  Select,
+  SelectChangeEvent,
+  TextField,
+  Tooltip,
+  Typography,
+  darken,
+  useTheme,
+} from "@mui/material";
+import { DatePicker } from "@mui/x-date-pickers";
+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 {
+  DateFormatTypes,
+  DocumentType,
+  MovaAppType,
+} from "../../helpers/Enums";
+import Logger from "../../helpers/Logger";
+import {
+  formatFrenchVehiclePlate,
+  formatVehicleTire,
+} from "../../helpers/Tools";
+import { MovaFormField, MovaVehicleForm } from "../../helpers/Types";
+import User from "../../models/User";
+import Vehicle from "../../models/Vehicle";
+import VehicleTire from "../../models/VehicleTire";
+import MovaVehicleTireField from "../../MovaVehicleTireField";
+import { LinkedDocumentDialog } from "../LinkedDocumentDialog";
 
 interface VehicleFullCardProps {
-    currentUser: User,
-    vehicle: Vehicle,
-    onError: (message: string) => void,
-    onUploadDocument: (data: FormData) => void,
-    onDeleteDocument: (documentId: string) => void,
-    editMode: boolean,
-    appType: MovaAppType;
-    fullwidth?: boolean,
-    focused?: boolean,
-    onUpdate?: (form: MovaVehicleForm) => void,
-    onDelete?: () => void;
-    currentUpload: boolean;
+  currentUser: User;
+  vehicle: Vehicle;
+  onError: (message: string) => void;
+  onUploadDocument: (data: FormData) => void;
+  onDeleteDocument: (documentId: string) => void;
+  editMode: boolean;
+  appType: MovaAppType;
+  fullwidth?: boolean;
+  focused?: boolean;
+  onUpdate?: (form: MovaVehicleForm) => void;
+  onDelete?: () => void;
+  currentUpload: boolean;
 }
 
 const initialUserFormState = {
-    currentMileage: { value: null, isValid: true },
-    averageMileagePerYear: { value: null, isValid: true },
-    tireSize: { value: null, isValid: true },
-    tireWidth: { value: '', isValid: true },
-    tireHeight: { value: '', isValid: true },
-    tireDiameter: { value: '', isValid: true },
-    tireSpeedIndex: { value: '', isValid: true },
-    lastInspectionDate: { value: null, isValid: true },
-    lastMaintenanceDate: { value: null, isValid: true }
-}
-
-const VehicleFullCard: FC<VehicleFullCardProps> = ({ vehicle, fullwidth, onError, onUploadDocument, onDeleteDocument, appType, editMode = false, focused = false, onUpdate, onDelete, currentUpload, currentUser }) => {
-
-    const theme = useTheme();
-    const [localEditMode, setLocalEditMode] = useState(editMode);
-    const [openConfirmDocumentDelete, setOpenConfirmDocumentDelete] = useState(false);
-    const [openConfirmVehicleDelete, setOpenConfirmVehicleDelete] = 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);
-    const docTypeCurrent = useRef<DocumentType>();
-
-    const messageRGPD = appType === MovaAppType.INDIVIDUAL ? <Box></Box> : <Box sx={{ mt: 2 }}><Alert severity='warning'>
-        Vous êtes responsable des documents que vous importez, en ajoutant un document vous reconnaissez
-        disposer du consentement explicite du client pour le stockage de ses données conformément à la
-        réglementation RGPD.
-    </Alert></Box>;
-
-    useEffect(() => {
-        setLocalEditMode(editMode);
-    }, [editMode]);
-
-    useEffect(() => {
-        initForm();
-    }, [vehicle]);
-
-    const initForm = () => {
-        if (vehicle)
-        {
-
-            setForm(prevForm => (
-                { ...prevForm, ['currentMileage']: { ...prevForm['currentMileage'], value: vehicle.currentMileage } }));
-            setForm(prevForm => (
-                { ...prevForm, ['averageMileagePerYear']: { ...prevForm['averageMileagePerYear'], value: vehicle.averageMileagePerYear } }));
-            setForm(prevForm => (
-                { ...prevForm, ['tireWidth']: { ...prevForm['tireWidth'], value: vehicle.tireWidth } }));
-            setForm(prevForm => (
-                { ...prevForm, ['tireHeight']: { ...prevForm['tireHeight'], value: vehicle.tireHeight } }));
-            setForm(prevForm => (
-                { ...prevForm, ['tireDiameter']: { ...prevForm['tireDiameter'], value: vehicle.tireDiameter } }));
-            setForm(prevForm => (
-                { ...prevForm, ['tireSpeedIndex']: { ...prevForm['tireSpeedIndex'], value: vehicle.tireSpeedIndex } }));
-            setForm(prevForm => (
-                { ...prevForm, ['lastInspectionDate']: { ...prevForm['lastInspectionDate'], value: vehicle.lastInspectionDate ? new Date(vehicle.lastInspectionDate) : null } }));
-            setForm(prevForm => (
-                { ...prevForm, ['lastMaintenanceDate']: { ...prevForm['lastMaintenanceDate'], value: vehicle.lastMaintenanceDate ? new Date(vehicle.lastMaintenanceDate) : null } }));
-
-            if (isVehicleTireSizeDefined(vehicle))
-            {
-                setForm(prevForm => (
-                    { ...prevForm, ['tireSize']: { ...prevForm['tireSize'], value: vehicle.tireSize } }));
-            }
-
-            Logger.info(form);
-        }
-    }
-
-    const toggleShowLinkedDocument = (docType: DocumentType | null) => {
-        setShowLinkedDocument(!isShowLinkedDocument);
-        if (docType && invoiceInputRef.current)
-        {
-            docTypeCurrent.current = docType;
-            invoiceInputRef.current.click();
-        } else
-        {
-            docTypeCurrent.current = undefined;
-        }
-    }
-
-    const isVehicleTireSizeDefined = (vehicle: Vehicle) => {
-        return vehicle.tireSize && vehicle.tireSize.diameter && vehicle.tireSize.height && vehicle.tireSize.speedIndex && vehicle.tireSize.width;
-    }
-
-    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 && newForm.tireSize.isValid;
-    }
+  currentMileage: { value: null, isValid: true },
+  averageMileagePerYear: { value: null, isValid: true },
+  tireSize: { value: null, isValid: true },
+  tireWidth: { value: "", isValid: true },
+  tireHeight: { value: "", isValid: true },
+  tireDiameter: { value: "", isValid: true },
+  tireSpeedIndex: { value: "", isValid: true },
+  lastInspectionDate: { value: null, isValid: true },
+  lastMaintenanceDate: { value: null, isValid: true },
+};
+
+const VehicleFullCard: FC<VehicleFullCardProps> = ({
+  vehicle,
+  fullwidth,
+  onError,
+  onUploadDocument,
+  onDeleteDocument,
+  appType,
+  editMode = false,
+  focused = false,
+  onUpdate,
+  onDelete,
+  currentUpload,
+  currentUser,
+}) => {
+  const theme = useTheme();
+  const [localEditMode, setLocalEditMode] = useState(editMode);
+  const [openConfirmDocumentDelete, setOpenConfirmDocumentDelete] =
+    useState(false);
+  const [openConfirmVehicleDelete, setOpenConfirmVehicleDelete] =
+    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);
+  const docTypeCurrent = useRef<DocumentType>();
+
+  const messageRGPD =
+    appType === MovaAppType.INDIVIDUAL ? (
+      <Box></Box>
+    ) : (
+      <Box sx={{ mt: 2 }}>
+        <Alert severity="warning">
+          Vous êtes responsable des documents que vous importez, en ajoutant un
+          document vous reconnaissez disposer du consentement explicite du
+          client pour le stockage de ses données conformément à la
+          réglementation RGPD.
+        </Alert>
+      </Box>
+    );
 
-    const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>): void => {
-        handleChange(e.target.name, e.target.value);
+  useEffect(() => {
+    setLocalEditMode(editMode);
+  }, [editMode]);
+
+  useEffect(() => {
+    initForm();
+  }, [vehicle]);
+
+  const initForm = () => {
+    if (vehicle) {
+      setForm((prevForm) => ({
+        ...prevForm,
+        currentMileage: {
+          ...prevForm["currentMileage"],
+          value: vehicle.currentMileage,
+        },
+      }));
+      setForm((prevForm) => ({
+        ...prevForm,
+        averageMileagePerYear: {
+          ...prevForm["averageMileagePerYear"],
+          value: vehicle.averageMileagePerYear,
+        },
+      }));
+      setForm((prevForm) => ({
+        ...prevForm,
+        tireWidth: { ...prevForm["tireWidth"], value: vehicle.tireWidth },
+      }));
+      setForm((prevForm) => ({
+        ...prevForm,
+        tireHeight: { ...prevForm["tireHeight"], value: vehicle.tireHeight },
+      }));
+      setForm((prevForm) => ({
+        ...prevForm,
+        tireDiameter: {
+          ...prevForm["tireDiameter"],
+          value: vehicle.tireDiameter,
+        },
+      }));
+      setForm((prevForm) => ({
+        ...prevForm,
+        tireSpeedIndex: {
+          ...prevForm["tireSpeedIndex"],
+          value: vehicle.tireSpeedIndex,
+        },
+      }));
+      setForm((prevForm) => ({
+        ...prevForm,
+        lastInspectionDate: {
+          ...prevForm["lastInspectionDate"],
+          value: vehicle.lastInspectionDate
+            ? new Date(vehicle.lastInspectionDate)
+            : null,
+        },
+      }));
+      setForm((prevForm) => ({
+        ...prevForm,
+        lastMaintenanceDate: {
+          ...prevForm["lastMaintenanceDate"],
+          value: vehicle.lastMaintenanceDate
+            ? new Date(vehicle.lastMaintenanceDate)
+            : null,
+        },
+      }));
+
+      if (isVehicleTireSizeDefined(vehicle)) {
+        setForm((prevForm) => ({
+          ...prevForm,
+          tireSize: { ...prevForm["tireSize"], value: vehicle.tireSize },
+        }));
+      }
+
+      Logger.info(form);
     }
-
-    const handleSelectChange = (e: SelectChangeEvent<string>): void => {
-        handleChange(e.target.name, e.target.value);
+  };
+
+  const toggleShowLinkedDocument = (docType: DocumentType | null) => {
+    setShowLinkedDocument(!isShowLinkedDocument);
+    if (docType && invoiceInputRef.current) {
+      docTypeCurrent.current = docType;
+      invoiceInputRef.current.click();
+    } else {
+      docTypeCurrent.current = undefined;
     }
+  };
 
-    const handleChange = (fieldName: string, fieldValue: string): void => {
-        console.log(fieldName, fieldValue);
-        const newField: MovaFormField = { [fieldName]: { value: fieldValue, isValid: true } };
+  const isVehicleTireSizeDefined = (vehicle: Vehicle) => {
+    return (
+      vehicle.tireSize &&
+      vehicle.tireSize.diameter &&
+      vehicle.tireSize.height &&
+      vehicle.tireSize.speedIndex &&
+      vehicle.tireSize.width
+    );
+  };
 
-        setForm({ ...form, ...newField });
-    }
+  const validateForm = () => {
+    let newForm: MovaVehicleForm = { ...form };
 
-    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);
-        }
-    }
+    // Validator pour les champs obligatoires
+    // newForm.currentMileage = validateField(form.currentMileage, value => !!value, 'Champ obligatoire');
+    // newForm.averageMileagePerYear = validateField(form.averageMileagePerYear, value => !!value, 'Champ obligatoire');
 
-    /**
-     * 
-     * @param event L'upload des documents se fait directement lors du téléchargement
-     * @param docType 
-     */
-    const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>, docType: DocumentType) => {
-        event.preventDefault();
+    // La validation de la saisie des pneumatiques se fait dans le composant "MovaVehicleTireField", traitée dans le callback "handleOnChangeVehicleTire"
 
-        if (event && event.target.files && event.target.files.length > 0 && docType)
-        {
-            uploadVehicleDocument(event.target.files[0], docType);
-        }
+    setForm(newForm);
 
+    return (
+      newForm.currentMileage.isValid &&
+      newForm.averageMileagePerYear.isValid &&
+      newForm.tireSize.isValid
+    );
+  };
+
+  const handleInputChange = (
+    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
+  ): void => {
+    handleChange(e.target.name, e.target.value);
+  };
+
+  const handleSelectChange = (e: SelectChangeEvent<string>): void => {
+    handleChange(e.target.name, e.target.value);
+  };
+
+  const handleChange = (fieldName: string, fieldValue: string): void => {
+    console.log(fieldName, fieldValue);
+    const newField: MovaFormField = {
+      [fieldName]: { value: fieldValue, isValid: true },
     };
 
-    const handleOnClickEdit = () => {
-
-        // On passe la fiche véhicule en mode édition
-        setLocalEditMode(true);
-    }
-
-    const handleOnChangeVehicleTire = (vehicleTire: VehicleTire, isValid: boolean) => {
-        setForm(prevForm => (
-            { ...prevForm, ['tireSize']: { ...prevForm['tireSize'], value: vehicleTire, isValid: isValid } }));
-    }
-
-
-    const handleOnClickDeleteVehicle = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
-        e.preventDefault();
-        setOpenConfirmVehicleDelete(true);
-    }
+    setForm({ ...form, ...newField });
+  };
 
-    const handleDeleteDocument = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>, documentId: string) => {
-        e.preventDefault();
-        setDocumentToDelete(documentId);
-        setOpenConfirmDocumentDelete(true);
+  const uploadVehicleDocument = (
+    document: File,
+    documentType: DocumentType
+  ) => {
+    if (document.size > 10000000) {
+      setSizeLimit(true);
+      return;
     }
 
-    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,
-                lastInspectionDate: form.lastInspectionDate.value,
-                lastMaintenanceDate: form.lastMaintenanceDate.value,
-            }
-            Logger.info(query)
-
-            // Appel du callback correspondant
-            if (onUpdate)
-                onUpdate(form);
-        }
-    }
+    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);
 
-    const handleOnClickCancel = () => {
-        initForm();
-        setLocalEditMode(false);
+      // Appel du callback correspondant
+      if (onUploadDocument) onUploadDocument(formData);
     }
-
-    const handleCloseConfirmDocumentDelete = () => {
-        setOpenConfirmDocumentDelete(false);
-        setDocumentToDelete('');
+  };
+
+  /**
+   *
+   * @param event L'upload des documents se fait directement lors du téléchargement
+   * @param docType
+   */
+  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);
     }
-
-    const handleCloseConfirmVehicleDelete = () => {
-        setOpenConfirmVehicleDelete(false);
+  };
+
+  const handleOnClickEdit = () => {
+    // On passe la fiche véhicule en mode édition
+    setLocalEditMode(true);
+  };
+
+  const handleOnChangeVehicleTire = (
+    vehicleTire: VehicleTire,
+    isValid: boolean
+  ) => {
+    setForm((prevForm) => ({
+      ...prevForm,
+      tireSize: {
+        ...prevForm["tireSize"],
+        value: vehicleTire,
+        isValid: isValid,
+      },
+    }));
+  };
+
+  const handleOnClickDeleteVehicle = (
+    e: React.MouseEvent<HTMLButtonElement, MouseEvent>
+  ) => {
+    e.preventDefault();
+    setOpenConfirmVehicleDelete(true);
+  };
+
+  const handleDeleteDocument = (
+    e: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+    documentId: string
+  ) => {
+    e.preventDefault();
+    setDocumentToDelete(documentId);
+    setOpenConfirmDocumentDelete(true);
+  };
+
+  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,
+        lastInspectionDate: form.lastInspectionDate.value,
+        lastMaintenanceDate: form.lastMaintenanceDate.value,
+      };
+      Logger.info(query);
+
+      // Appel du callback correspondant
+      if (onUpdate) onUpdate(form);
     }
-
-    /**
-     * 
-     */
-    const handleConfirmDocumentDelete = () => {
-        setOpenConfirmDocumentDelete(false);
-
-        if (vehicle && documentToDelete)
-        {
-
-            // Appel du callback correspondant
-            if (onDeleteDocument)
-                onDeleteDocument(documentToDelete);
-        }
+  };
+
+  const handleOnClickCancel = () => {
+    initForm();
+    setLocalEditMode(false);
+  };
+
+  const handleCloseConfirmDocumentDelete = () => {
+    setOpenConfirmDocumentDelete(false);
+    setDocumentToDelete("");
+  };
+
+  const handleCloseConfirmVehicleDelete = () => {
+    setOpenConfirmVehicleDelete(false);
+  };
+
+  /**
+   *
+   */
+  const handleConfirmDocumentDelete = () => {
+    setOpenConfirmDocumentDelete(false);
+
+    if (vehicle && documentToDelete) {
+      // Appel du callback correspondant
+      if (onDeleteDocument) onDeleteDocument(documentToDelete);
     }
+  };
 
-    const handleConfirmVehicleDelete = () => {
-        setOpenConfirmVehicleDelete(false);
+  const handleConfirmVehicleDelete = () => {
+    setOpenConfirmVehicleDelete(false);
 
-        if (vehicle && onDelete)
-        {
-
-            // Appel du callback correspondant
-            onDelete();
-        }
+    if (vehicle && onDelete) {
+      // Appel du callback correspondant
+      onDelete();
     }
-
-    return (
-        <>
-            {vehicle &&
-                <Card variant='outlined' sx={{
-                    maxWidth: fullwidth ? '80%' : 500,
-                    backgroundColor: focused ? theme.palette.primary.light : 'white',
-                    overflow: 'visible', mt: 4, pb: 1
-                }}
+  };
+
+  return (
+    <>
+      {vehicle && (
+        <Card
+          variant="outlined"
+          sx={{
+            maxWidth: fullwidth ? "80%" : 500,
+            backgroundColor: focused ? theme.palette.primary.light : "white",
+            overflow: "visible",
+            mt: 4,
+            pb: 1,
+          }}
+        >
+          <CardContent sx={{ pt: 0, pb: 0 }}>
+            <Typography
+              variant="h6"
+              component="div"
+              align="center"
+              sx={{ mb: 1 }}
+              color={darken(theme.palette.primary.main, 0.2)}
+            >
+              {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" }}
                 >
-                    <CardContent sx={{ pt: 0, pb: 0 }}>
-                        <Typography variant="h6" component="div" align="center" sx={{ mb: 1 }} color={darken(theme.palette.primary.main, 0.2)}>
-                            {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' }}>
-                                    <img
-                                        src={CatPlateBg}
-                                        alt="Plaque d'immatriculation"
-                                        style={{ height: '50px', position: 'relative', }}
-                                    />
-                                    <Typography
-                                        variant='h6'
-                                        color={theme.palette.text.primary}
-                                        sx={{ position: 'absolute', top: '8px', left: '76px' }}
-                                    >
-                                        <b>{formatFrenchVehiclePlate(vehicle.plate)}</b>
-                                    </Typography>
-                                </Grid>
-                                {onDelete && <Grid item xs={6} style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
-                                    <Button variant='contained' color='error' onClick={(e) => handleOnClickDeleteVehicle(e)}>
-                                        Supprimer
-                                    </Button>
-                                </Grid>}
-                            </Grid>
-
-                            {!localEditMode && <Grid container textAlign='justify' sx={{ pt: 2 }}>
-                                <Grid item xs={8} >
-                                    <Typography variant="body1" color="text.secondary">
-                                        Km actuel :
-                                    </Typography>
-                                </Grid>
-                                <Grid item xs={4} sx={{ textAlign: 'right' }}>
-                                    <Typography variant="body1" color="text.secondary">
-                                        <b>{vehicle.currentMileage} km</b>
-                                    </Typography>
-                                </Grid>
-                            </Grid>}
-
-                            {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>}
-
-                            {!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>}
-
-                            {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>}
-
-                            {!localEditMode && <Grid container textAlign='justify' sx={{ pt: 2 }}>
-                                <Grid item xs={6}>
-                                    <Typography variant="body1" color="text.secondary">
-                                        Pneumatiques :
-                                    </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>}
-
-                            {localEditMode && <Grid item xs={12} sx={{ mt: 1 }}>
-                                <MovaVehicleTireField
-                                    vehicleTire={form.tireSize.value}
-                                    onChangeVehicleTire={handleOnChangeVehicleTire}
-                                />
-                            </Grid>}
-
-                            {!localEditMode && <Grid container textAlign='justify' sx={{ pt: 2 }}>
-                                <Grid item xs={8} >
-                                    <Typography variant="body1" color="text.secondary">
-                                        Dernier contrôle technique :
-                                    </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>
-                                    </Typography>
-                                </Grid>
-                            </Grid>}
-
-                            {localEditMode && <Grid item xs={12}>
-                                <FormControl fullWidth sx={{marginTop: 2}}>
-                                    <DatePicker
-                                        label={"Dernier contrôle technique"}
-                                        name={'lastInspectionDate'}
-                                        value={form.lastInspectionDate.value}
-                                        format='dd/MM/yyyy'
-                                        formatDensity='dense'
-                                        views={['day']}
-                                        displayWeekNumber
-                                        onChange={(e)=>handleChange('lastInspectionDate',e)}
-                                    />
-                                </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}}>
-                                    <DatePicker
-                                        label={"Dernier entretien"}
-                                        name={'lastMaintenanceDate'}
-                                        value={form.lastMaintenanceDate.value}
-                                        format='dd/MM/yyyy'
-                                        formatDensity='dense'
-                                        views={['day']}
-                                        displayWeekNumber
-                                        onChange={(e)=>handleChange('lastMaintenanceDate',e)}
-                                    />
-                                </FormControl>
-                            </Grid>}
-
-
-
-                        </Grid>
-
-                        {!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?.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' }}>
-                                        <IconButton disabled={!(invoice.ownerId.toString() == currentUser.id)} onClick={(e) => handleDeleteDocument(e, invoice?.id)}>
-                                            <CloseIcon />
-                                        </IconButton>
-                                    </Grid>
-                                </Grid>
-                            ))}
-
-                            {/* * Les FACTURES du véhicule
+                  <img
+                    src={CatPlateBg}
+                    alt="Plaque d'immatriculation"
+                    style={{ height: "50px", position: "relative" }}
+                  />
+                  <Typography
+                    variant="h6"
+                    color={theme.palette.text.primary}
+                    sx={{ position: "absolute", top: "8px", left: "76px" }}
+                  >
+                    <b>{formatFrenchVehiclePlate(vehicle.plate)}</b>
+                  </Typography>
+                </Grid>
+                {onDelete && (
+                  <Grid
+                    item
+                    xs={6}
+                    style={{
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                    }}
+                  >
+                    <Button
+                      variant="contained"
+                      color="error"
+                      onClick={(e) => handleOnClickDeleteVehicle(e)}
+                    >
+                      Supprimer
+                    </Button>
+                  </Grid>
+                )}
+              </Grid>
+
+              {!localEditMode && (
+                <Grid container textAlign="justify" sx={{ pt: 2 }}>
+                  <Grid item xs={8}>
+                    <Typography variant="body1" color="text.secondary">
+                      Km actuel :
+                    </Typography>
+                  </Grid>
+                  <Grid item xs={4} sx={{ textAlign: "right" }}>
+                    <Typography variant="body1" color="text.secondary">
+                      <b>{vehicle.currentMileage} km</b>
+                    </Typography>
+                  </Grid>
+                </Grid>
+              )}
+
+              {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>
+              )}
+
+              {!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>
+              )}
+
+              {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>
+              )}
+
+              {!localEditMode && (
+                <Grid container textAlign="justify" sx={{ pt: 2 }}>
+                  <Grid item xs={6}>
+                    <Typography variant="body1" color="text.secondary">
+                      Pneumatiques :
+                    </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>
+              )}
+
+              {localEditMode && (
+                <Grid item xs={12} sx={{ mt: 1 }}>
+                  <MovaVehicleTireField
+                    vehicleTire={form.tireSize.value}
+                    onChangeVehicleTire={handleOnChangeVehicleTire}
+                  />
+                </Grid>
+              )}
+
+              {!localEditMode && (
+                <Grid container textAlign="justify" sx={{ pt: 2 }}>
+                  <Grid item xs={8}>
+                    <Typography variant="body1" color="text.secondary">
+                      Dernier contrôle technique :
+                    </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>
+                    </Typography>
+                  </Grid>
+                </Grid>
+              )}
+
+              {localEditMode && (
+                <Grid item xs={12}>
+                  <FormControl fullWidth sx={{ marginTop: 2 }}>
+                    <DatePicker
+                      label={"Dernier contrôle technique"}
+                      name={"lastInspectionDate"}
+                      value={form.lastInspectionDate.value}
+                      format="dd/MM/yyyy"
+                      formatDensity="dense"
+                      views={["day"]}
+                      displayWeekNumber
+                      onChange={(e) => handleChange("lastInspectionDate", e)}
+                    />
+                  </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 }}>
+                    <DatePicker
+                      label={"Dernier entretien"}
+                      name={"lastMaintenanceDate"}
+                      value={form.lastMaintenanceDate.value}
+                      format="dd/MM/yyyy"
+                      formatDensity="dense"
+                      views={["day"]}
+                      displayWeekNumber
+                      onChange={(e) => handleChange("lastMaintenanceDate", e)}
+                    />
+                  </FormControl>
+                </Grid>
+              )}
+            </Grid>
+
+            {!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?.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" }}
+                      >
+                        <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}>
@@ -539,89 +779,137 @@ const VehicleFullCard: FC<VehicleFullCardProps> = ({ vehicle, fullwidth, onError
                                     </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) }}>
-
-                                            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>
-                        </>
-                        }
-
-                    </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>
-                            </>
+                <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!)
                         }
-
-                        {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>
-
-                </Card>
-            }
-            {isShowLinkedDocument && <LinkedDocumentDialog
-                isVehicle={true}
-                isShowLinkedDocument={isShowLinkedDocument}
-                appType={appType}
-                toggleShowLinkedDocument={toggleShowLinkedDocument}
-                message={messageRGPD}
-            />}
-
-            <ConfirmationDialog
-                open={openConfirmDocumentDelete}
-                onClose={handleCloseConfirmDocumentDelete}
-                onConfirm={handleConfirmDocumentDelete}
-                message="Êtes-vous sûr de vouloir supprimer ce document ?"
-            />
-
-            <ConfirmationDialog
-                open={openConfirmVehicleDelete}
-                onClose={handleCloseConfirmVehicleDelete}
-                onConfirm={handleConfirmVehicleDelete}
-                message="Êtes-vous sûr de vouloir supprimer ce véhicule ?"
-            />
-        </>
-    );
-}
+                      />
+                      <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),
+                        }}
+                      >
+                        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>
+              </>
+            )}
+          </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>
+        </Card>
+      )}
+      {isShowLinkedDocument && (
+        <LinkedDocumentDialog
+          isVehicle={true}
+          isShowLinkedDocument={isShowLinkedDocument}
+          appType={appType}
+          toggleShowLinkedDocument={toggleShowLinkedDocument}
+          message={messageRGPD}
+        />
+      )}
+
+      <ConfirmationDialog
+        open={openConfirmDocumentDelete}
+        onClose={handleCloseConfirmDocumentDelete}
+        onConfirm={handleConfirmDocumentDelete}
+        message="Êtes-vous sûr de vouloir supprimer ce document ?"
+      />
+
+      <ConfirmationDialog
+        open={openConfirmVehicleDelete}
+        onClose={handleCloseConfirmVehicleDelete}
+        onConfirm={handleConfirmVehicleDelete}
+        message="Êtes-vous sûr de vouloir supprimer ce véhicule ?"
+      />
+    </>
+  );
+};
 
 export default VehicleFullCard;