@movalib/movalib-commons 1.59.13 → 1.59.15

package/src/services/UserConnected.ts

@@ -0,0 +1,56 @@
+import User from "../models/User";
+import UserService from "./UserService";
+
+export default class UserConnected {
+    private static instance: UserConnected;
+    private _me: User | null; // Replace 'any' with the appropriate type for the user information
+
+    private constructor() {
+        const storedUser = localStorage.getItem('user');
+        this._me = storedUser ? JSON.parse(storedUser) : null;
+    }
+
+    public static getInstance(): UserConnected {
+        if (!UserConnected.instance) {
+            UserConnected.instance = new UserConnected();
+        }
+
+        return UserConnected.instance;
+    }
+
+    public get me(): any {
+        if (!this._me) {
+            const storedUser = localStorage.getItem('user');
+            if(storedUser === undefined || storedUser === null || storedUser === 'undefined') {
+                UserService.getCurrentUser()
+                .then((response) => {
+                    localStorage.setItem('user', JSON.stringify(response.data));
+                    this._me = response.data as User;
+                    return this._me;
+                })
+            } else {
+                this._me = JSON.parse(storedUser);
+                return this._me;
+            }
+        } else {
+            return this._me;
+        } 
+    }
+
+
+    public set me(user: any) {
+        this._me = user;
+        if (user) {
+            localStorage.setItem('user', JSON.stringify(user));
+        } else {
+            localStorage.removeItem('user'); // Supprime les données si user est null ou undefined
+        }
+    }
+
+    public clearUser() {
+        // Méthode pour effacer l'utilisateur
+        this._me = null;
+        localStorage.removeItem('user');
+    }
+
+}

package/src/services/UserService.ts

@@ -78,7 +78,7 @@ export default class UserService {
      * @param password 
      * @returns 
      */
-    static async getCurrentUser(appType: MovaAppType): Promise<APIResponse<User>> {
+    static async getCurrentUser(appType?: MovaAppType): Promise<APIResponse<User>> {
         try {
             return await request({
                 url: `${API_BASE_URL}/user/me`,

package/src/services/VehicleService.ts

@@ -13,6 +13,31 @@ export default class VehicleService {
         });
     }
 
+    static getVehicleDocument(appType: MovaAppType, vehicleId: number): Promise<APIResponse<string>>  {
+        return request({
+            url: `${API_BASE_URL}/vehicle/${vehicleId}/document`,
+            method: APIMethod.GET,
+            appType: appType,
+        });
+    }
+
+    static deleteVehicleDocument(appType: MovaAppType,vehicleId: number, documentId: string): Promise<APIResponse<string>> {
+        return request({
+          url: `${API_BASE_URL}/vehicle/${vehicleId}/documents/${documentId}`,
+          method: APIMethod.DELETE,
+          appType: appType,
+        });
+    }
+
+    static uploadVehicleDocument(appType: MovaAppType, vehicleId: number, req: FormData): Promise<APIResponse<string>> {
+        return request({
+          url: `${API_BASE_URL}/vehicle/${vehicleId}/documents`,
+          method: APIMethod.POST,
+          appType: appType,
+          body: req
+        });
+    }
+
     static editVehicle({vehicleId, appType,...payload}: EditVehicleParams): Promise<APIResponse<string>> {
         return request({
             url: `${API_BASE_URL}/vehicle/${vehicleId}`,

package/src/style/styled.ts

@@ -0,0 +1,70 @@
+import { ToggleButtonProps, ToggleButton, styled, ToggleButtonGroup, lighten } from "@mui/material";
+
+interface StyledToggleButtonProps extends ToggleButtonProps {
+    customSelectedBackgroundColor?: string;
+    customBackgroundColor?: string;
+    customHoverColor?: string;
+  }
+  
+  export const StyledToggleButton = styled(ToggleButton)<StyledToggleButtonProps>(
+    ({ theme, customSelectedBackgroundColor, customBackgroundColor, customHoverColor }) => ({
+      padding: theme.spacing(1),
+      marginBottom: theme.spacing(2),
+      borderRadius: theme.shape.borderRadius,
+      '&:hover': {
+        backgroundColor: customHoverColor || theme.palette.warning.dark,
+      },
+      '&.Mui-selected': {
+        backgroundColor: customSelectedBackgroundColor || theme.palette.warning.main,
+      },
+      '&.Mui-selected:hover': {
+        backgroundColor: customHoverColor || theme.palette.warning.dark,
+      },
+      '&:not(:first-of-type)': {
+        borderRadius: theme.shape.borderRadius,
+        border: '1px solid rgba(0, 0, 0, 0.12)',
+      },
+      '&:first-of-type': {
+        borderRadius: theme.shape.borderRadius,
+      },
+      '&.Mui-disabled': {
+        border: 0,
+        backgroundColor: theme.palette.grey[100],
+      },
+    }),
+  );
+
+
+/**
+ * Personnalisation du style des Toogle Buttons
+ * Note : il n'est posssible de le personnaliser directement au niveau
+ * de l'objet "components" du theme.
+ */
+export const StyledToggleButtonGroup = styled(ToggleButtonGroup)(({ theme }) => ({
+    '& .MuiToggleButtonGroup-grouped': {
+      padding: theme.spacing(1),
+      marginBottom: theme.spacing(2),
+      marginLeft: theme.spacing(1),
+      marginRight: theme.spacing(1),
+      '&.Mui-disabled': {
+        border: 0,
+        backgroundColor: theme.palette.grey[100],
+      },
+      '&.Mui-selected': {
+        backgroundColor: theme.palette.primary.light,
+      },
+      '&:not(:first-of-type)': {
+        borderRadius: theme.shape.borderRadius,
+        border: '1px solid rgba(0, 0, 0, 0.12)',
+      },
+      '&:first-of-type': {
+        borderRadius: theme.shape.borderRadius,
+      },
+      '&:hover': {
+        backgroundColor: lighten(theme.palette.primary.light, 0.3), // Modifier la couleur de fond au survol
+      },
+      '&.Mui-selected:hover': {
+        backgroundColor: theme.palette.primary.light, // Modifier la couleur de fond au survol
+      },
+    },
+  }));

package/src/VehicleFullCard.tsx

@@ -1,503 +0,0 @@
-import { Button, Card, CardActions, CardContent, FormControl, FormHelperText, Grid, IconButton, InputLabel, 
-    Link, MenuItem, Select, SelectChangeEvent, TextField, 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 } from './helpers/Enums';
-import { validateField, formatVehicleTire, formatFrenchVehiclePlate} from './helpers/Tools';
-import MovaDigitalPassport from './MovaDigitalPassport';
-import Loader from './Loader';
-import { formatDateByCountryCode } 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';
-
-interface VehicleFullCardProps {
-    vehicle: Vehicle,
-    onError: (message: string) => void,
-    onUploadDocument: (data: FormData) => void,
-    onDeleteDocument: (documentId: string) => void,
-    editMode: boolean,
-    fullwidth?: boolean,
-    focused?: boolean,
-    onUpdate?: (form: MovaVehicleForm) => void,
-    onDelete?: () => void;
-}
-
-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 }
-}
-
-const VehicleFullCard: FC<VehicleFullCardProps> = ({ vehicle, fullwidth, onError, onUploadDocument, onDeleteDocument, editMode = false, focused = false, onUpdate, onDelete }) => {
-
-    const theme = useTheme();
-    const [localEditMode, setLocalEditMode] = useState(editMode);
-    const [openConfirmDocumentDelete, setOpenConfirmDocumentDelete] = useState(false);
-    const [openConfirmVehicleDelete, setOpenConfirmVehicleDelete] = useState(false);
-    const [documentToDelete, setDocumentToDelete] = useState('');
-    // 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(null);
-    const tirePictureInputRef = useRef(null);
-
-    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 }}));
-
-            if(isVehicleTireSizeDefined(vehicle)){
-                setForm(prevForm => (
-                    { ...prevForm, ['tireSize'] : { ...prevForm['tireSize'], value: vehicle.tireSize }}));    
-            }
-                
-            Logger.info(form);
-        }
-    }
-
-    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;
-    }
-
-    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 => {
-        const newField: MovaFormField = { [fieldName]: { value: fieldValue, isValid: true } };
-    
-        setForm({ ...form, ...newField});
-    }
-
-    const uploadVehicleDocument = (document: File, documentType:DocumentType) => {
-
-        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) => {
-        event.preventDefault();
-
-        if(event && event.target.files && event.target.files.length > 0 && docType){
-            uploadVehicleDocument(event.target.files[0], docType);
-        }
-
-    };
-
-    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
-            }
-            Logger.info(query)
-
-            // Appel du callback correspondant
-            if(onUpdate)
-                onUpdate(form);
-        }
-    }
-
-    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);
-
-        if(vehicle && onDelete){
-
-            // Appel du callback correspondant
-            onDelete();
-        }
-    }
-    
-    return (
-        <>
-           { vehicle && 
-                    <Card variant='outlined' sx={{ maxWidth: fullwidth ? '80%' : 345,
-                        backgroundColor: focused ? theme.palette.primary.light : 'white', 
-                        overflow: 'visible', mt: 4, pb: 1 }}
-                    >
-                        <img src={CarFigure} style={{
-                            position: 'relative',
-                            width: '40%',
-                            top: '-25px',
-                            left: '-15px',
-                            zIndex: 200}} alt='Icone Voiture'>
-                        </img>
-
-                        <MovaDigitalPassport digitalPassportIndex={vehicle.digitalPassportIndex} />
-
-                        <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 item xs={12}>
-                                    <Typography variant="body1" color="text.primary">
-                                        <b>{formatFrenchVehiclePlate(vehicle.plate)}</b>
-                                    </Typography>
-                                </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> }
-
-                            </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>  
-
-                                {/** 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 {formatDateByCountryCode(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>
-                                ))}
-    
-                                {/** Les PHOTOS du véhicule */}
-                                {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 {formatDateByCountryCode(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={6} sx={{ mt: 2, textAlign: 'center' }} >
-                                        {/* Input caché de type "file" */}
-                                        <div>
-                                            <input
-                                                accept="image/*, application/pdf"
-                                                type="file"
-                                                style={{ display: 'none' }}
-                                                ref={invoiceInputRef}
-                                                id="raised-button-invoice"
-                                                onChange={(e) => handleFileChange(e, DocumentType.VEHICLE_MAINTENANCE_INVOICE)}
-                                            />
-                                            <label htmlFor="raised-button-invoice">
-                                                <Button size='large' component="span" variant="outlined" 
-                                                    sx={{ alignItems: 'normal', width:'90%', mt: 2, mb: 1, height: '70px', p:1, 
-                                                        color:darken(theme.palette.primary.main, 0.2) }}>
-                                                    Ajouter Facture
-                                                </Button>
-                                            </label>  
-                                        </div>                              
-                                    </Grid>
-
-                                    <Grid item xs={6} sx={{ mt: 2, textAlign: 'center' }} >
-                                        {/* Input caché de type "file" */}
-                                        <div>
-                                            <input
-                                                accept="image/*"
-                                                type="file"
-                                                style={{ display: 'none' }}
-                                                ref={tirePictureInputRef}
-                                                id="raised-button-tire"
-                                                onChange={(e) => handleFileChange(e, DocumentType.VEHICLE_TIRE_PHOTO)}
-                                            />
-                                            <label htmlFor="raised-button-tire">
-                                                <Button component="span" variant="outlined" 
-                                                    sx={{ alignItems: 'normal', width:'90%', mt: 2, mb: 1, height: '70px', p:1, 
-                                                        color:darken(theme.palette.primary.main, 0.2)  }}>
-                                                    Ajouter Photo Pneu
-                                                </Button>
-                                            </label>    
-                                        </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>
-            } 
-
-            {localEditMode && onDelete && 
-                <Button onClick={(e) => handleOnClickDeleteVehicle(e)} sx={{ width: '90', mt: 4, color:theme.palette.error.light,
-                 borderColor: theme.palette.error.light }}  variant='outlined'>
-                    Supprimer le véhicule
-                </Button>
-            }
-
-            <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;