ptechcore_ui 0.0.0

package/src/components/common/FDrawer.tsx

@@ -0,0 +1,2448 @@
+import axios from 'axios';
+import React, { useEffect, useMemo, useRef, useState, ReactNode } from 'react';
+import {
+    FDrawerProps,
+    FooterSummaryProps,
+    DropdownActionsMenuProps,
+    TableCollapseSimpleProps,
+    FTableProps,
+    DynamicTableProps,
+    ReponseDetail,
+    FDrawerHeader,
+    Filter,
+    ActionItem
+} from './FDrawer.types';
+// import ALL_FORMS from '../../modules/admin/crm/views/forms/allform';
+import { addressIpApi, authenticated_header } from '../../globals/api';
+
+
+import {
+    bouttonDrawerAdd,
+    activeBouttonDrawerAdd,
+    activeBouttonDrawerFilter,
+    activeBouttonDrawerSearch,
+    bouttonDrawerFilter,
+    bouttonDrawerSearch,
+    bouttonDrawerValidateSearch,
+    activebouttonDrawerIssuePayment,
+    bouttonDrawerIssuePayment,
+    bouttonDrawerCreateTemplate,
+    activebouttonDrawerCreateTemplate,
+    activebouttonDrawerNewEntry,
+    bouttonDrawerNewEntry,
+    activebouttonDrawerReceivePayment,
+    bouttonDrawerReceivePayment,
+    activebouttonDrawerInputTemplate,
+    bouttonDrawerInputTemplate,
+    activeBouttonDrawerImportation_cancel,
+    activeBouttonDrawerImportation,
+    bouttonDrawerImportation_cancel,
+    bouttonDrawerImportation,
+    activebouttonDrawerExcelExport,
+    bouttonDrawerexcelExport,
+    bouttonDrawerCancel,
+    activebouttonDrawerCancel,
+
+    bouttonDrawerPrevisualisation,
+    activebouttonDrawerPrevisualisation,
+    bouttonDrawerPrinter,
+    activebouttonDrawerPrinter,
+    bouttonDrawerSubmit,
+    activebouttonDrawerSubmit,
+    bouttonDrawerAttachement,
+    activebouttonDrawerAttachement,
+    bouttonDrawerMessagerie,
+    activebouttonDrawerMessagerie,
+    bouttonDrawerEnregistrer,
+    activebouttonDrawerEnregistrer,
+    activebouttonDrawerExcelImport,
+    bouttonDrawerexcelImport,
+    table_com_icon,
+    table_com_icon2,
+    activebouttonDrawerConsult,
+    bouttonDrawerConsult,
+    bouttonDrawerattachHaving,
+    activebouttonDrawerAttachHaving,
+    bouttonDrawerAttachLight,
+    activebouttonDrawerAttachLight
+} from "../../assets/images/ExportImage";
+import { useLoading } from '../../globals/globals_loading';
+import { Link, useLocation, useNavigate, useSearchParams } from 'react-router-dom';
+import { useCenter } from '../footer/Footer';
+import { DICTIONNARY, useLanguage } from '../../globals/dictionnary';
+import { FilterPagination } from '../pagination';
+import { DATETIME } from '../../utils/dates';
+import { CustomSelector } from '../CustomSelector';
+import { nodata_illus } from '../../assets/images/ExportImage';
+import { NewButton } from '../buttons/buttons';
+import { useDownloadExcel } from 'react-export-table-to-excel';
+import { FModal, ModelTemplapleSimpleV1 } from '../modal/ModalGlobalTemplate';
+import { CommunicationHistoryComponent } from '../CommunicationHistory';
+import { Attachments } from '../attachment/Attachment';
+import { DynamicTable, TableBasic, TableCollapseSimple, TableWithCheckbox } from './fTables';
+import { CheckboxInput } from '../form-inputs/FormInputs';
+import { LuSearch, LuSearchX, LuPlusCircle } from 'react-icons/lu';
+import { sep_mil } from '../../modules/admin/recovery/views/constants/choices_handle';
+import { FDropdown } from './fUI';
+import { IoCloseCircleSharp } from 'react-icons/io5';
+import { PiColumnsFill } from 'react-icons/pi';
+import { CustomFieldset } from '../custom-card/CustomCard';
+import { CiBank } from 'react-icons/ci';
+import { ExcelImportModal } from './ExcelImportModal';
+
+
+export const FDrawer: React.FC<FDrawerProps> = (props) => {
+
+
+
+
+    // ---------------------------------------------------------------------------
+    // ---------------------------------CUSTOM HOOKS------------------------------
+    // ---------------------------------------------------------------------------
+
+    const navigate = useNavigate();
+    const [searchParams] = useSearchParams();
+    const location = useLocation();
+
+    const allParams = Object.fromEntries([...searchParams]);
+    const { center, dateRange, changeRange, financialYear, dateSystem } = useCenter();
+    const { language } = useLanguage();
+    const { setIsLoadingCancelable } = useLoading()
+
+    // ---------------------------------------------------------------------------
+    // ---------------------------------------------------------------------------
+
+    // ---------------------------------------------------------------------------
+    // ---------------------------------REFS--------------------------------------
+    // ---------------------------------------------------------------------------
+
+    const champsRef = useRef([]);
+    const champsRef2 = useRef([]);
+    const searchSelect = useRef();
+    const btnsContainer = useRef();
+    const sweetAlertRef = useRef();
+    const tableRefExportExcel = useRef(null);
+
+    // ---------------------------------------------------------------------------
+    // ---------------------------------------------------------------------------
+
+
+
+
+
+    // ---------------------------------------------------------------------------
+    // ---------------------------------DEFAULT PROPS-----------------------------
+    // ---------------------------------------------------------------------------
+
+    const selected = props.selected ?? []
+
+    const maxText = props.maxText ?? 75
+
+    const type = props.type ?? "table"
+
+    const noFilter = props.noFilter ?? false
+
+    const noSearch = props.noSearch ?? false
+    const canExport = props.canExport ?? false
+
+    const table_type = props.table_type ?? "basic"
+
+    const rerender = props.toggle ?? "";
+
+    const headers = props.headers ?? [];
+
+    const totalHeaders = props.totalHeaders ?? [];
+
+    const totalMainHeaders = props.totalMainHeaders ?? [];
+
+    const btnsList = props.btnsList ?? [];
+
+    const infinite_scroll = props.infinite_scroll ?? false;
+
+    const title_ = (props.title && typeof (props.title) === "string") ? props.title as string : props.title_;
+
+    // ---------------------------------------------------------------------------
+    // ---------------------------------------------------------------------------
+
+
+
+
+    const [showPeriodModal, setShowPeriodModal] = useState(false);
+
+
+    // ---------------------------------------------------------------------------
+    // ---------------------------------STATES-----------------------------------
+    // ---------------------------------------------------------------------------
+
+    const [lineSelected, setLineSelected] = useState<string>('')
+    const [showContent, setShowContent] = useState<Record<string, boolean>>({});
+    const [showModalComment, setShowModalComment] = useState<boolean>(false);
+    const [secondInfoComment, setSecondInfoComment] = useState<string>("");
+    const [comment, setComment] = useState<any>(false);
+    const [showLeadForm, setShowLeadForm] = useState<boolean>(false);
+    const [isSorting, setIsSorting] = useState<string | undefined>(props.orderByDefault);
+    const [data, setData] = useState<any[]>([]);
+    const [dataFilters, setDataFilters] = useState<any[]>([]);
+    const [noFiltres, setNoFiltres] = useState<boolean>(false);
+    const [showFiltres, setShowFiltres] = useState<boolean>(false);
+    const [showRecherche, setShowRecherche] = useState<boolean>(false);
+    const [showFR, setShowFR] = useState<string>("");
+    const [filtres, setFiltres] = useState<Filter[]>([]);
+    const [csv, setCsv] = useState<string>("");
+    const [legends, setLegends] = useState<any[]>([]);
+    const [listFiltres, setListFiltres] = useState<any[]>([]);
+    const [loading, setLoading] = useState<boolean>(true);
+    const [loadingIS, setLoadingIS] = useState<boolean>(true);
+    const [loading2, setLoading2] = useState<boolean>(true);
+    const [queryURL, setQueryURL] = useState<string>('');
+    const [frontqueryURL, setFrontQueryURL] = useState<string>('');
+    const [showCommunication, setShowCommunication] = useState<boolean>(false);
+    const [showAttachments, setShowAttachments] = useState<boolean>(false);
+    const [showImportExcel, setShowImportExcel] = useState<boolean>(false);
+    const [attachments, setAttachments] = useState<any[]>([])
+    const [search, setSearch] = useState<string>('');
+    const [selectedItems, setSelectedItems] = useState<string[]>([]);
+    const [btnAdd, setBtnAdd] = useState<boolean>(true);
+    const [reponseDetail, setReponseDetail] = useState<ReponseDetail>({
+        total_pages: null,
+        previous: null,
+        next: null,
+        current_page: null,
+
+    });
+
+    const makeFilters = (): Record<string, string> => {
+        const newFilters = headers.reduce<Record<string, string>>((acc, item) => {
+            if (item.formule) {
+                acc[`${item.search_name}__icontains`] = ""
+                return acc
+            } else {
+                acc[`${item.key}__icontains`] = ""
+                return acc
+            }
+        }, {})
+        return newFilters
+    }
+    const preFilters = (headers.length) > 0 ? makeFilters() : {}
+
+    // Définir les filtres initiaux en fonction de la présence de paramètres dans l'URL
+    const [filters, setFilters] = useState<Record<string, any>>(() => {
+        if (Object.keys(allParams).length > 0) {
+            return allParams; // Si des paramètres existent, on les utilise comme filtres
+        } else {
+            return {
+                ...preFilters,
+                center_id: center?.id ?? null,
+                order_by: props.orderByDefault ?? "id",
+                page: 1
+            }
+        }
+    });
+
+    const [filtersMemo, setFiltersMemo] = useState<Record<string, any>>({
+        ...preFilters,
+        center_id: center?.id ?? null,
+        order_by: props.orderByDefault ?? "id",
+        page: 1
+    })
+
+    // ---------------------------------------------------------------------------
+    // ---------------------------------------------------------------------------
+
+
+
+
+    // ---------------------------------------------------------------------------
+    // ---------------------------------CONSTANTES--------------------------------
+    // ---------------------------------------------------------------------------
+
+    const drawerActions = {
+        "add": {
+            icon: [bouttonDrawerAdd, activeBouttonDrawerAdd],
+            label: DICTIONNARY.Add[language]
+        },
+        "create-template": {
+            icon: [bouttonDrawerCreateTemplate, activebouttonDrawerCreateTemplate],
+            label: DICTIONNARY.CréerUnModèleDeSaisie[language]
+        },
+        "issue-payment": {
+            icon: [bouttonDrawerIssuePayment, activebouttonDrawerIssuePayment],
+            label: DICTIONNARY.EmettreUnRéglement[language]
+        },
+        "receive-payment": {
+            icon: [bouttonDrawerReceivePayment, activebouttonDrawerReceivePayment],
+            label: DICTIONNARY.RecevoirUnRéglement[language]
+        },
+        "input-template": {
+            icon: [bouttonDrawerInputTemplate, activebouttonDrawerInputTemplate],
+            label: DICTIONNARY.SélectionnerUnModèleDeSaisie[language]
+        },
+        "import-new-report": {
+            icon: [bouttonDrawerImportation, activeBouttonDrawerImportation],
+            label: DICTIONNARY.ImportReport[language]
+        },
+        "import-cancel-new-report": {
+            icon: [bouttonDrawerImportation_cancel, activeBouttonDrawerImportation_cancel],
+            label: DICTIONNARY.CancelImportReport[language]
+        },
+        "cancel": {
+            icon: [bouttonDrawerCancel, activebouttonDrawerCancel],
+            label: DICTIONNARY.Cancel[language]
+        },
+        // "edit": {
+        //     icon: [bouttonDrawerEdit, activebouttonDrawerEdit],
+        //     label: DICTIONNARY.Edit[language]
+        //     },
+        "previsualisation": {
+            icon: [bouttonDrawerPrevisualisation, activebouttonDrawerPrevisualisation],
+            label: DICTIONNARY.Previews[language]
+        },
+        "submit": {
+            icon: [bouttonDrawerSubmit, activebouttonDrawerSubmit],
+            label: DICTIONNARY.Soumettre[language]
+        },
+        "send": {
+            icon: [<RiMailSendFill />],
+            label: DICTIONNARY.Send[language]
+        },
+        "new-entry": {
+            icon: [bouttonDrawerNewEntry, activebouttonDrawerNewEntry],
+            label: DICTIONNARY.NouvelleSaisie[language]
+        },
+        "print": {
+            icon: [bouttonDrawerPrinter, activebouttonDrawerPrinter],
+            label: DICTIONNARY.Print[language]
+        },
+        "mark-as-signed": {
+            icon: [<FaFileSignature />],
+            label: DICTIONNARY.MarkAsSigned[language]
+        },
+        "closed": {
+            icon: [<FaStamp />],
+            label: DICTIONNARY.Closing[language]
+        },
+        "export-excel": {
+            icon: [<FaFileExport />],
+            label: DICTIONNARY.ExportExcel[language]
+        },
+        "save": {
+            icon: [bouttonDrawerEnregistrer, activebouttonDrawerEnregistrer],
+            label: DICTIONNARY.Save[language]
+        },
+        "attach-having": {
+            icon: [bouttonDrawerattachHaving, activebouttonDrawerAttachHaving],
+            label: DICTIONNARY.LinkCreditMemoInvoices[language]
+        },
+        "attach-having-transfer": {
+            icon: [bouttonDrawerAttachLight, activebouttonDrawerAttachLight],
+            label: DICTIONNARY.LinkingInvoicesToTheAccounts[language]
+        },
+    }
+
+    // ---------------------------------------------------------------------------
+    // ---------------------------------------------------------------------------
+
+
+
+
+    // ---------------------------------------------------------------------------
+    // ---------------------------------FONCTIONS---------------------------------
+    // ---------------------------------------------------------------------------
+
+    const toggleContent = (propertyCode) => {
+        setShowContent((prevShowContent) => {
+            const newShowContent = {
+                ...prevShowContent,
+                [propertyCode]: !prevShowContent[propertyCode],
+            };
+            return newShowContent;
+        });
+    };
+
+    const handleFilterChange = (event) => {
+        const { name, value } = event.target;
+        setFilters({ ...filters, [name]: value });
+    }
+    const handleFilterFilterChange = (event) => {
+        const { name, value } = event.target;
+        setFilters({ ...filters, search_type: 'filter', [name]: value });
+
+    }
+
+    const handleRemoveItem = (itemToRemove) => {
+        setSelectedItems(prevItems => prevItems.filter(item => item !== itemToRemove));
+    };
+
+    const handleSelectedItem = (event) => {
+        const selectedItem = event.target.value;
+        setSelectedItems(prevItems => {
+            if (!prevItems.includes(selectedItem)) {
+                return [...prevItems, selectedItem];
+            }
+            return prevItems;
+        });
+    };
+
+    const handleClick = (value) => {
+        if (showFR === value) {
+            setShowFR('')
+        } else {
+            setShowFR(value);
+        }
+    };
+
+    const getDataFilter = async () => {
+        if (props.api) {
+            setLoading(true)
+            try {
+                const response = await fetch(queryURL, {
+                    method: 'GET',
+                    headers: authenticated_header()
+                });
+
+                if (!response.ok) {
+                    throw new Error(`HTTP ERROR! STATUS: ${response.status}`);
+                }
+
+                const data = await response.json();
+                setReponseDetail(data)
+                setDataFilters(data.results)
+                setLoading(false)
+            } catch (error) {
+                console.error('ERROR FETCHING DATA', error);
+            }
+        }
+    };
+
+    const getData = async () => {
+        if (props.api) {
+            setLoading2(true)
+            try {
+                const response = await fetch(`${addressIpApi}${props.api}?all=true&center_id=${center?.id ?? null}&date_system=${dateSystem ? DATETIME.formatYYYYMMDD(dateSystem) : `${Date().getFullYear()}-12-31`}&year=${financialYear ?? new Date().getFullYear()}${props.additional_params ?? ''}`, {
+                    method: 'GET',
+                    headers: authenticated_header()
+                });
+
+                if (!response.ok) {
+                    throw new Error('Error fetching data');
+                }
+
+                const data = await response.json();
+                setData(data.data)
+                const listFilter = []
+                for (let idx = 0; idx < headers.length; idx++) {
+                    if (headers[idx].filterable) {
+                        listFilter.push(data.data.map(item => ({ id: item.id, name: headers[idx].formule ? headers[idx].formule(item) : item[`${headers[idx].key}`] })))
+                    }
+                }
+                setListFiltres(listFilter)
+                setLoading2(false)
+
+            } catch (error) {
+                console.error('Error fetching data:', error);
+            }
+        }
+    }
+
+    const deleteData = async (id) => {
+
+        const answer = await sweetAlertRef.current.afficherConfirmation(
+            'Voulez-vous supprimer ce prospect?',
+            'Oui',
+            'Annuler'
+        );
+
+        if (answer) {
+            try {
+                await axios.delete(`${addressIpApi}/crm/lead-genuis/prospects/${id}`, {
+                    headers: authenticated_header()
+                });
+
+                sweetAlertRef.current.afficherAlerte('success', 'prospect supprimé.');
+                getData();
+
+            } catch (error) {
+                sweetAlertRef.current.afficherAlerte('error', 'Une erreur est survenue lors de la suppression');
+                console.error("Error saving fund call:", error);
+            }
+        }
+    }
+
+    const markascomplete = async (item) => {
+        const answer = await sweetAlertRef.current.afficherConfirmation(
+            'Voulez-vous achevez la procedure de ce prospect?',
+            'Oui',
+            'Annuler'
+        );
+
+        if (answer) {
+            if (item.qualified && !item.completed) {
+                fetch(
+                    `${addressIpApi}/crm/lead-genuis/prospects/${item.id}/markascomplete/`,
+                    {
+                        method: "PUT",
+                        headers: authenticated_header(),
+                        body: JSON.stringify({
+                            lead_id: item.id,
+                        }),
+                    }
+                )
+                    .then((response) => response.json())
+                    .then((rep_data) => {
+                        if (rep_data.success) {
+                            sweetAlertRef.current.afficherAlerte('success', 'procedure achevée.');
+                            const dup_data = [...data]
+                            const itemIndex = dup_data.findIndex((o) => o.id === item.id)
+                            if (itemIndex >= 0) {
+                                dup_data[itemIndex].completed = true
+                            }
+                            setData(dup_data)
+                        } else {
+                            sweetAlertRef.current.afficherAlerte('error', `une erreur est survenue. Veuillez reessayer`);
+                        }
+
+
+                    })
+                    .catch((error) => {
+                        console.error("Error:", error);
+                    });
+
+            } else {
+                sweetAlertRef.current.afficherAlerte('error', `veuillez achevez la qualification`);
+            }
+        }
+    };
+
+
+  
+    const exportDateToExcelFile = async () => {
+        console.log('billing data.xlsx');
+        
+        try {
+
+            const params = new URLSearchParams({...filters,export:'true'}).toString();
+            const QueryURL= `${addressIpApi}${props.api}?${params}&date_system=${dateSystem ? DATETIME.formatYYYYMMDD(dateSystem) : `${Date().getFullYear()}-12-31`}&year=${financialYear ?? new Date().getFullYear()}${props.additional_params ?? ''}`;
+            setIsLoadingCancelable(true);
+
+            // ${params}
+            const response = await axios.get(QueryURL,
+                {
+                    headers: authenticated_header(),
+                   
+                    responseType: 'blob',
+                }
+            );
+            setIsLoadingCancelable(false);
+
+            const url = window.URL.createObjectURL(new Blob([response.data]));
+            const link = document.createElement("a");
+            link.href = url;
+            link.download = "data.xlsx";
+            document.body.appendChild(link);
+
+            link.click();
+
+            document.body.removeChild(link);
+            window.URL.revokeObjectURL(url);
+        } catch (error) {
+            console.error('Error downloading the file:', error);
+        }
+    };
+
+    const getUniqueValue = (dataz) => {
+        const seen = new Set();
+        return dataz.filter(data => {
+            const duplicate = seen.has(data.name);
+            seen.add(data.name);
+            return !duplicate;
+        });
+    };
+
+    const { onDownload } = useDownloadExcel({
+        currentTableRef: tableRefExportExcel.current,
+        filename: props.title,
+        sheet: "pradium-tech"
+    });
+
+    const getAttachments = async () => {
+        try {
+            const response = await axios.get(`${addressIpApi}/attachment/attachments/?center_id=${center.id}&global_code=${props.globalCode}`);
+            setAttachments(response.data);
+        } catch (error) {
+            console.error("Error fetching data d:", error.message);
+        }
+    };
+
+    const getNextPage = async () => {
+        if (props.api) {
+            setLoadingIS(true)
+            try {
+                const response = await fetch(reponseDetail.paginate.next, {
+                    method: 'GET',
+                    headers: authenticated_header()
+                });
+
+                if (!response.ok) {
+                    throw new Error(`HTTP ERROR! STATUS: ${response.status}`);
+                }
+
+                const data = await response.json();
+                setReponseDetail(data)
+                const newData = dataFilters.concat(data.results)
+                setDataFilters(newData)
+                setLoadingIS(false)
+            } catch (error) {
+                console.error('ERROR FETCHING DATA', error);
+            }
+        }
+    };
+
+    const handleScroll = () => {
+        const { scrollTop, clientHeight, scrollHeight } =
+            document.documentElement;
+
+        if (scrollTop + clientHeight >= scrollHeight) {
+            getNextPage()
+        }
+    };
+
+    // ---------------------------------------------------------------------------
+    // ---------------------------------------------------------------------------
+
+
+
+
+    // ---------------------------------------------------------------------------
+    // ---------------------------------EFFECTS-----------------------------------
+    // ---------------------------------------------------------------------------
+
+    useEffect(() => {
+        const handleClickOutside = (event) => {
+            if (!event.target.classList.contains("selected")) {
+                setLineSelected('');
+            }
+        };
+
+        document.addEventListener('mousedown', handleClickOutside);
+
+        return () => {
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, []);
+
+    useEffect(() => {
+        const params = new URLSearchParams(filters).toString();
+        setQueryURL(`${addressIpApi}${props.api}?${params}&date_system=${dateSystem ? DATETIME.formatYYYYMMDD(dateSystem) : `${Date().getFullYear()}-12-31`}&year=${financialYear ?? new Date().getFullYear()}${props.additional_params ?? ''}`);
+        setFrontQueryURL(`${params}&date_system=${dateSystem ? DATETIME.formatYYYYMMDD(dateSystem) : `${Date().getFullYear()}-12-31`}&year=${financialYear ?? new Date().getFullYear()}${props.additional_params ?? ''}`);
+        const urlWithoutParams = location.pathname;
+        navigate(`${urlWithoutParams}?${params}`)
+    }, [filters]);
+
+    useEffect(() => {
+        getData();
+    }, [center, rerender]);
+
+    useEffect(() => {
+        getDataFilter();
+    }, [center, queryURL, rerender]);
+
+    useEffect(() => {
+        const columns = []
+        headers.forEach(item1 => item1.filterable && columns.push({ label: item1.name, type: item1.type, key: item1.search_name ? item1.search_name : item1.key }))
+        setFiltres(columns)
+        props.btn_add !== undefined && setBtnAdd(props.btn_add)
+    }, [])
+
+    useEffect(() => {
+        props.hasAttach && getAttachments();
+    }, []);
+
+    useEffect(() => {
+        if (infinite_scroll) {
+            window.addEventListener("scroll", handleScroll);
+
+            return () => window.removeEventListener("scroll", handleScroll);
+        }
+    }, []);
+
+    const memoizedAttachments = useMemo(() => {
+        if (attachments.length > 0) {
+            return <Attachments reload={props.reloadAttachment ?? null} data={attachments} global_code={props.globalCode} />;
+        }
+        return null;
+    }, [attachments, props.globalCode, props.reloadAttachment]);
+
+
+    
+
+    // ---------------------------------------------------------------------------
+    // ---------------------------------------------------------------------------
+
+
+    return (
+        <>
+            <section
+                id={props.id}
+                className={`fdrawer-container flex-col ${props.inWorkspace && "in-workspace"} ${props.wTotalCard && "w-total-card"}  ${props.wMenu && "w-menu"}`}
+                style={{
+                    height: props.height && ""
+                }}
+            >
+                <div className="wise-main-content main fcustom-main d-flex flex-row col">
+                    <div className='wise-body card-global-green h-100 col flex-col'>
+                        <div className={`card-header change-background-color-header-gray ${props.noTitle ? "d-none" : "flex-between"}`}>
+                            <h4 className='title general-title mb-0'>
+                                {props.title}
+                            </h4>
+
+                            <div className="flex-row gap-4 align-center">
+                                {props.sideTitle}
+
+                                {props.wReturn && <IoCloseCircleSharp className='icon rem-15' role='button' onClick={() => navigate(props.wReturn)} />}
+                            </div>
+                        </div>
+                        <div className={`wise-card card-body gap-2 flex-col`}>
+
+
+                            <div className='h-100 d-flex flex-column overflow-hidden'>
+                                <div className='row flex-grow-1 flex-shrink-1 flex-basis-0 d-flex drawer-main-content'>
+                                    {
+                                        type !== "any" ? (
+                                            <>
+                                                <div className={`col`}>
+
+                                                    <div className='table-custom custom-list-journal-body-table'>
+                                                        <div className={`table-responsive type-table ${props.inWorkspace && "in-workspace"} ${props.wTotalCard && "w-total-card"}  ${props.wMenu && "w-menu"}`}>
+                                                            {
+                                                                table_type === "collapse-simple" && (
+                                                                    <TableCollapseSimple
+                                                                        arch={props.arch}
+                                                                        secondElements={props.secondElements}
+                                                                        triggerActions={props.triggerActions}
+                                                                        actions={props.actions}
+                                                                        dataFilters={dataFilters}
+                                                                        loading={loading}
+                                                                        loading2={loading2}
+                                                                        maxText={maxText}
+                                                                        data={data}
+                                                                        headers={headers}
+                                                                        totalHeaders={totalHeaders}
+                                                                        totalMainHeaders={totalMainHeaders}
+                                                                        filters={filters}
+                                                                        setFilters={setFilters}
+                                                                        setComment={setComment}
+                                                                        setSecondInfoComment={setSecondInfoComment}
+                                                                        setShowModalComment={setShowModalComment}
+                                                                        showContent={showContent}
+                                                                        setShowContent={setShowContent}
+                                                                        lineSelected={lineSelected}
+                                                                        setLineSelected={setLineSelected}
+                                                                        isSorting={isSorting}
+                                                                        setIsSorting={setIsSorting}
+                                                                    />
+                                                                )
+                                                            }
+                                                            {
+                                                                table_type === "with-checkbox" && (
+                                                                    <TableWithCheckbox
+                                                                        selected={selected}
+                                                                        actions={props.actions}
+                                                                        dataFilters={dataFilters}
+                                                                        loading={loading}
+                                                                        maxText={maxText}
+                                                                        data={data}
+                                                                        headers={headers}
+                                                                        totalHeaders={totalHeaders}
+                                                                        filters={filters}
+                                                                        setFilters={setFilters}
+                                                                        setComment={setComment}
+                                                                        setSecondInfoComment={setSecondInfoComment}
+                                                                        setShowModalComment={setShowModalComment}
+                                                                        lineSelected={lineSelected}
+                                                                        setLineSelected={setLineSelected}
+                                                                        isSorting={isSorting}
+                                                                        setIsSorting={setIsSorting}
+                                                                    />
+                                                                )
+                                                            }
+                                                            {
+                                                                table_type === "basic" && (
+                                                                    <TableBasic
+                                                                        dataFilters={dataFilters}
+                                                                        actions={props.actions}
+                                                                        loading={loading}
+                                                                        maxText={maxText}
+                                                                        data={data}
+                                                                        headers={headers}
+                                                                        totalHeaders={totalHeaders}
+                                                                        filters={filters}
+                                                                        setFilters={setFilters}
+                                                                        setComment={setComment}
+                                                                        setSecondInfoComment={setSecondInfoComment}
+                                                                        setShowModalComment={setShowModalComment}
+                                                                        lineSelected={lineSelected}
+                                                                        setLineSelected={setLineSelected}
+                                                                        isSorting={isSorting}
+                                                                        setIsSorting={setIsSorting}
+                                                                    />
+                                                                )
+                                                            }
+                                                        </div>
+                                                    </div>
+
+                                                </div>
+
+                                                <div className={`w-100 ${props.noPagination ? "d-none" : "flex-between align-end"}`}>
+                                                    {
+                                                        dataFilters.length > 0 ? <FilterPagination filters={[filters, setFilters]} reponseDetail={reponseDetail} setQueryURL={setQueryURL} frontqueryURL={frontqueryURL} /> : <div className=""></div>
+                                                    }
+
+                                                    {
+                                                        props.summary ? <FooterSummary colonnes={props.summary.colonnes} rows={props.summary.rows} param={data} /> : <div className=""></div>
+                                                    }
+                                                </div>
+                                            </>
+                                        ) : (
+                                            <>
+                                                <div className={` ${!showAttachments ? " d-flex flex-col w-100 flex-fill" : "d-none"}`}>
+                                                    {props.children}
+                                                </div>
+                                                <div className={`${showAttachments ? " d-flex flex-col w-100  flex-fill" : "d-none"}`}>
+                                                    {memoizedAttachments}
+                                                </div>
+
+
+
+
+                                            </>
+
+                                        )
+                                    }
+
+
+                                </div>
+
+
+                            </div>
+
+
+
+                        </div>
+                    </div>
+
+                    {showFR === "f" && (
+                        <>
+                            <div className={`param-bar flex-col gap-2 ${showFR === "f" ? "showFiltres" : "hideFiltres"}`}>
+                                <div className='card-global-green col flex-col'>
+                                    <div className={`card-header change-background-color-header-gray`}>
+                                        <h4 className='title general-title mb-0'>
+                                            <img className='icon spe-img2' src={activeBouttonDrawerFilter} alt="icon" />
+                                            {DICTIONNARY.Filtres[language]}
+                                        </h4>
+                                    </div>
+                                    {
+                                        loading2 ? (
+                                            <div className='bg-white radius-1 flex-center col'>
+                                                <div className="text-center">...chargement</div>
+                                            </div>
+                                        ) : data.length > 0 && filtres.length > 0 ? (
+                                            <div className='card-body col p-2'>
+                                                <div className="w-100 justify-end">
+                                                    <NewButton
+                                                        type="custom"
+                                                        icon={<IoMdRefresh className='icon rem-15' />}
+                                                        title={DICTIONNARY.ViderTousLesChamps[language]}
+                                                        onclick={() => {
+                                                            champsRef.current.forEach(item => {
+                                                                if (item) {
+                                                                    item.triggerClick()
+                                                                }
+                                                            })
+                                                            champsRef2.current.forEach(item => {
+                                                                if (item) {
+                                                                    item.value = ""
+                                                                }
+                                                            })
+                                                            setFilters(filtersMemo)
+                                                        }}
+                                                    />
+                                                </div>
+                                                <div className={`w-100`}>
+                                                    {
+                                                        filtres.map((item, idx) => (
+                                                            <div className="fcontent" key={item.key}>
+                                                                {
+                                                                    item.type === "list" ? (
+                                                                        <div className="ligne-input mb-1" key={item.key}>
+                                                                            <label htmlFor="">
+                                                                                {item.label}
+                                                                            </label>
+                                                                            <CustomSelector
+                                                                                ref={(el) => (champsRef.current[idx] = el)}
+                                                                                optionsInitial={
+                                                                                    item.filter_options
+                                                                                        ? item.filter_options.map(item2 => ({
+                                                                                            id: item2.value,
+                                                                                            value: item2.value,
+                                                                                            label: item2.label
+                                                                                        }))
+                                                                                        : getUniqueValue(listFiltres[idx]).map(item2 => ({
+                                                                                            id: item2.name,
+                                                                                            value: item2.name,
+                                                                                            label: item2.name
+                                                                                        }))
+                                                                                    }
+                                                                                onSelect={(selectedValue) => {
+                                                                                    const newCle = `${item.key}__exact`
+                                                                                    const copy = {
+                                                                                        ...filters,
+                                                                                        search_type: 'filter',
+                                                                                    }
+                                                                                    copy[`${newCle}`] = selectedValue
+                                                                                    setFilters(copy)
+                                                                                }}
+                                                                                placeholder={DICTIONNARY.Select[language]}
+                                                                                loading={null}
+                                                                            />
+                                                                            {/* <select name="" id="">
+                                                                                    {props.lists && props.lists[item.label].map((option, opt_index)=> (
+                                                                                        <option key={`2543Trr${option}ezr${item.label}`} value={opt_index}>{option}</option>
+                                                                                    ))}
+                                                                                </select> */}
+                                                                        </div>
+                                                                    ) : item.type === "amount" ? (
+                                                                        <div className="ligne-input mb-1" key={item.key}>
+                                                                            <label htmlFor="">{item.label}</label>
+                                                                            <div className="col d-flex flex-row">
+                                                                                <input type="number" className='col percent-input' placeholder='min'
+                                                                                    ref={(el) => (champsRef2.current[idx] = el)}
+                                                                                    onChange={(e) => {
+                                                                                        const newCle = `${item.key}__gte`
+                                                                                        const copy = {
+                                                                                            ...filters,
+                                                                                            search_type: 'filter',
+                                                                                        }
+                                                                                        copy[`${newCle}`] = e.target.value
+                                                                                        setFilters(copy)
+                                                                                    }} />
+                                                                                <div className="mx-1">-</div>
+                                                                                <input type="number" className='col percent-input' placeholder='max'
+                                                                                    ref={(el) => (champsRef2.current[idx] = el)}
+                                                                                    onChange={(e) => {
+                                                                                        const newCle = `${item.key}__lte`
+                                                                                        const copy = {
+                                                                                            ...filters,
+                                                                                            search_type: 'filter',
+                                                                                        }
+                                                                                        copy[`${newCle}`] = e.target.value
+                                                                                        setFilters(copy)
+                                                                                    }} />
+                                                                            </div>
+                                                                        </div>
+                                                                    ) : item.type === "percent" ? (
+                                                                        <div className="ligne-input mb-1" key={item.key}>
+                                                                            <label htmlFor="">{item.label}</label>
+                                                                            <div className="col d-flex flex-row">
+                                                                                <input type="number" className='col percent-input' placeholder='min' />
+                                                                                <div className="mx-1">-</div>
+                                                                                <input type="number" className='col percent-input' placeholder='max' />
+                                                                            </div>
+                                                                        </div>
+                                                                    ) : item.type === "date" ? (
+                                                                        <div className="ligne-input mb-1" key={item.key}>
+                                                                            <label htmlFor="">{item.label}</label>
+                                                                            <div className="col d-flex flex-row">
+                                                                                <input type="date" className='col'
+                                                                                    ref={(el) => (champsRef2.current[idx] = el)}
+                                                                                    onChange={(e) => {
+                                                                                        const newCle = `${item.key}__gte`
+                                                                                        const copy = {
+                                                                                            ...filters,
+                                                                                            search_type: 'filter',
+                                                                                        }
+                                                                                        copy[`${newCle}`] = e.target.value
+                                                                                        setFilters(copy)
+                                                                                    }}
+                                                                                />
+                                                                                <div className="mx-1">-</div>
+                                                                                <input type="date" className='col'
+                                                                                    ref={(el) => (champsRef2.current[idx] = el)}
+                                                                                    onChange={(e) => {
+                                                                                        const newCle = `${item.key}__lte`
+                                                                                        const copy = {
+                                                                                            ...filters,
+                                                                                            search_type: 'filter',
+                                                                                        }
+                                                                                        copy[`${newCle}`] = e.target.value
+                                                                                        setFilters(copy)
+                                                                                    }} />
+                                                                            </div>
+                                                                        </div>
+                                                                    ) : item.type === "number" ? (
+                                                                        <div className="ligne-input mb-1" key={item.key}>
+                                                                            <label htmlFor="">{item.label}</label>
+                                                                            <div className="col d-flex flex-row">
+                                                                                <input type="number" className='col percent-input' placeholder='min'
+                                                                                    ref={(el) => (champsRef2.current[idx] = el)}
+                                                                                    onChange={(e) => {
+                                                                                        const newCle = `${item.key}__gte`
+                                                                                        const copy = {
+                                                                                            ...filters,
+                                                                                            search_type: 'filter',
+                                                                                        }
+                                                                                        copy[`${newCle}`] = e.target.value
+                                                                                        setFilters(copy)
+                                                                                    }} />
+                                                                                <div className="mx-1">-</div>
+                                                                                <input type="number" className='col percent-input' placeholder='max'
+                                                                                    ref={(el) => (champsRef2.current[idx] = el)}
+                                                                                    onChange={(e) => {
+                                                                                        const newCle = `${item.key}__lte`
+                                                                                        const copy = {
+                                                                                            ...filters,
+                                                                                            search_type: 'filter',
+                                                                                        }
+                                                                                        copy[`${newCle}`] = e.target.value
+                                                                                        setFilters(copy)
+                                                                                    }} />
+                                                                            </div>
+                                                                        </div>
+                                                                    ) : item.type === "checkbox" ? (
+                                                                        <div className="ligne-input mb-1" key={item.key}>
+                                                                            <input type="checkbox" className='col' />
+                                                                            <label htmlFor="">{item.label}</label>
+                                                                        </div>
+                                                                    ) : (
+                                                                        <div className="ligne-input mb-1" key={item.key}>
+                                                                            <label htmlFor="">{item.label}</label>
+                                                                            <CustomSelector
+                                                                                ref={(el) => (champsRef.current[idx] = el)}
+                                                                                defaultSelectedValue={csv}
+                                                                                optionsInitial={getUniqueValue(listFiltres[idx]).map(item2 => ({
+                                                                                    id: item2.key,
+                                                                                    value: item2.name,
+                                                                                    label: item2.name
+                                                                                }))}
+                                                                                onSelect={(selectedValue) => {
+                                                                                    const newCle = `${item.key}__exact`
+                                                                                    const copy = {
+                                                                                        ...filters,
+                                                                                        search_type: 'filter',
+                                                                                    }
+                                                                                    copy[`${newCle}`] = selectedValue
+                                                                                    setFilters(copy)
+                                                                                }}
+                                                                                placeholder={DICTIONNARY.Select[language]}
+                                                                                loading={null}
+                                                                            />
+                                                                        </div>
+                                                                    )
+                                                                }
+                                                            </div>
+                                                        ))
+                                                    }
+                                                </div>
+                                            </div>
+                                        ) : (
+                                            <div className='bg-white radius-1 flex-center col flex-col gap-3'>
+                                                <div className="icon-div"><FaFilterCircleXmark className='icon rem-5' /></div>
+                                                <div className="text-center fw-bold">{DICTIONNARY.NoDataToFilter[language]}</div>
+                                            </div>
+                                        )
+                                    }
+                                </div>
+                            </div>
+                        </>
+                    )}
+                    {showFR === "fm" && (
+                        <>
+                            <div className={`param-bar flex-col gap-2 ${showFR === "f" ? "showFiltres" : "hideFiltres"}`}>
+                                <div className='card-global-green col flex-col'>
+                                    <div className={`card-header change-background-color-header-gray`}>
+                                        <h4 className='title general-title mb-0'>
+                                            <img className='icon spe-img2' src={activeBouttonDrawerFilter} alt="icon" />
+                                            {DICTIONNARY.Filtres[language]}
+                                        </h4>
+                                    </div>
+                                    {
+                                        loading2 ? (
+                                            <div className='bg-white radius-1 flex-center col'>
+                                                <div className="text-center">...chargement</div>
+                                            </div>
+                                        ) : data.length > 0 && filtres.length > 0 ? (
+                                            <div className='card-body col p-2'>
+                                                <div className="w-100 justify-end">
+                                                    <NewButton
+                                                        type="custom"
+                                                        icon={<IoMdRefresh className='icon rem-15' />}
+                                                        title={DICTIONNARY.ViderTousLesChamps[language]}
+                                                        onclick={() => {
+                                                            champsRef.current.forEach(item => {
+                                                                if (item) {
+                                                                    item.triggerClick()
+                                                                }
+                                                            })
+                                                            champsRef2.current.forEach(item => {
+                                                                if (item) {
+                                                                    item.value = ""
+                                                                }
+                                                            })
+                                                            setFilters(filtersMemo)
+                                                        }}
+                                                    />
+                                                </div>
+                                                <div className='w-100'>
+
+                                                </div>
+
+                                            </div>
+                                        ) : (
+                                            <div className='bg-white radius-1 flex-center col flex-col gap-3'>
+                                                <div className="icon-div"><FaFilterCircleXmark className='icon rem-5' /></div>
+                                                <div className="text-center fw-bold">{DICTIONNARY.NoDataToFilter[language]}</div>
+                                            </div>
+                                        )
+                                    }
+                                </div>
+                            </div>
+                        </>
+                    )}
+
+                    {showFR === "r" && (
+                        <>
+                            <div className={`param-bar flex-col gap-2 ${showFR === "r" ? "showRecherche" : "hideRecherche"}`}>
+                                <div className='card-global-green col flex-col'>
+                                    <div className={`card-header change-background-color-header-gray`}>
+                                        <h4 className='title general-title mb-0'>
+                                            <img className='icon spe-img2' src={activeBouttonDrawerSearch} alt="icon" />
+                                            {DICTIONNARY.Search[language]}
+                                        </h4>
+                                    </div>
+
+                                    <div className='card-body col p-2'>
+                                        <div className="w-100 justify-end">
+                                            <NewButton
+                                                type="custom"
+                                                icon={<IoMdRefresh className='icon rem-15' />}
+                                                onclick={() => {
+                                                    setSelectedItems([])
+                                                    setSearch("")
+                                                    const updatedFilters = { center_id: filters.center_id, search_type: 'search' };
+                                                    if (search !== "") {
+                                                        selectedItems.forEach((item) => {
+
+                                                            updatedFilters[`${item}__icontains`] = "";
+                                                        })
+                                                        // for (const key in filters) {
+                                                        //     if (filters.hasOwnProperty(key) && key !== 'center_id' && key !== 'page') {
+                                                        //         updatedFilters[key] = e.target.value;
+                                                        //     }
+                                                        // }
+
+                                                        setFilters(updatedFilters);
+                                                    }
+                                                    searchSelect.current.value = ""
+                                                }}
+                                                title={DICTIONNARY.ViderTousLesChamps[language]}
+                                            />
+                                        </div>
+                                        <div className={`w-100 fdrawer-search`}>
+                                            <div className='grid-custom-one-column'>
+                                                <label htmlFor="" className="form-label">{DICTIONNARY.SelectColumns[language]}</label>
+                                                <select className="form-select" onChange={handleSelectedItem} name='itemSelect' ref={searchSelect}>
+                                                    <option selected="">{DICTIONNARY.Select[language]}</option>
+                                                    {
+                                                        headers.map((item, index) => (
+                                                            <option key={index} value={item.search_name}>{item.name}</option>
+                                                        ))
+                                                    }
+                                                </select>
+                                            </div>
+                                            <div className='item-selected-searched'>
+                                                {
+                                                    selectedItems.length === 0 ? (
+                                                        <></>
+                                                    ) : (
+                                                        <>
+                                                            <div className='item-selected'>
+                                                                {
+                                                                    selectedItems.map((item, index) => (
+                                                                        <>
+                                                                            <span title='Cliquer pour supprimer' onClick={() => handleRemoveItem(item)} >{headers.find(hi => hi.key === item)?.name ?? ''}</span>
+                                                                        </>
+                                                                    ))
+                                                                }
+                                                            </div>
+                                                            <div className=''>
+                                                                <label htmlFor="" className="form-label" >Recherche</label>
+                                                                <input className="form-control" type="search" value={search}
+                                                                    onChange={(e) => {
+                                                                        setSearch(e.target.value)
+                                                                        const updatedFilters = { center_id: filters.center_id, search_type: 'search' };
+                                                                        selectedItems.forEach((item) => {
+
+                                                                            updatedFilters[`${item}__icontains`] = e.target.value;
+                                                                        })
+                                                                        // for (const key in filters) {
+                                                                        //     if (filters.hasOwnProperty(key) && key !== 'center_id' && key !== 'page') {
+                                                                        //         updatedFilters[key] = e.target.value;
+                                                                        //     }
+                                                                        // }
+
+                                                                        setFilters(updatedFilters);
+
+                                                                    }} />
+                                                            </div>
+                                                            {/* <div className='btn-search'>
+                                                                <img src={bouttonDrawerValidateSearch} className='btn-icon' />
+                                                            </div> */}
+                                                        </>
+                                                    )
+                                                }
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </>
+                    )}
+
+                    {/* {showFR && !["r", "f"].includes(showFR) && (
+                        <>
+                            <div className={`param-bar flex-col gap-2 ${showFR === "r" ? "showRecherche" : "hideRecherche"}`}>
+                                <div className='card-global-green col flex-col'>
+                                    <div className={`card-header change-background-color-header-gray`}>
+                                        <h4 className='title general-title mb-0'>
+                                            <img className='icon spe-img2' src={activeBouttonDrawerSearch} alt="icon" />
+                                            {DICTIONNARY.Search[language]}
+                                        </h4>
+                                    </div>
+                                    
+                                    <div className='card-body col p-2'>
+                                    </div>
+                                </div>
+                            </div>
+                        </>
+                    )} */}
+
+                    {/* ---------------------------------DRAWER BUTTONS----------------------------------- */}
+                    <div className={`fdrawer-btns-container ${props.noTitle && "mt-0"}`}>
+                        <div className="btnz-container" ref={btnsContainer}>
+                            <div className="fdrawer-btn">
+                                {showFR ? <RiMenuUnfoldLine /> : <RiMenuFoldLine />}
+                            </div>
+                            {
+                                !noFilter && (
+                                    <div className={`fdrawer-btn ${showFR === "f" && "active"}`} onClick={() => {
+
+                                        if (type === 'any') {
+                                            setShowPeriodModal(true)
+                                        } else {
+                                            handleClick("f")
+                                        }
+
+                                    }}>
+                                        <img className='no-hover' src={bouttonDrawerConsult} alt="icon" />
+                                        <img className='for-hover' src={activebouttonDrawerConsult} alt="icon" />
+                                        <div className="label-container">
+                                            {DICTIONNARY.Filtres[language]}
+                                        </div>
+                                    </div>
+                                )
+                            }
+                            {
+                                !noSearch && (
+                                    <div className={`fdrawer-btn ${showFR === "r" && "active"} ${type === "any" && "d-none"}`} onClick={() => handleClick("r")}>
+                                        <img className='no-hover' src={bouttonDrawerSearch} alt="icon" />
+                                        <img className='for-hover' src={activeBouttonDrawerSearch} alt="icon" />
+                                        <div className="label-container">
+                                            {DICTIONNARY.Search[language]}
+                                        </div>
+                                    </div>
+                                )
+                            }
+                            {
+                                canExport && (
+                                    <div className={`fdrawer-btn ${showFR === "r" && "active"} ${type === "any" && "d-none"}`} onClick={() => exportDateToExcelFile()}>
+
+                                        <img className='no-hover' src={bouttonDrawerexcelExport} alt="icon" />
+                                        <img className='for-hover' src={activebouttonDrawerExcelExport} alt="icon" />
+                                        <div className="label-container">
+                                            {DICTIONNARY.ExportExcel[language]}
+                                        </div>
+                                    </div>
+                                )
+                            }
+                            {
+                                btnsList.length > 0 && btnsList.map(item => (
+                                    <>
+                                        <div className={`fdrawer-btn ${item.dropdown && "dropstart"}`} role='button' onClick={item.onclick ?? (() => '')}>
+                                            {
+                                                item.type !== "custom" ?
+                                                    (drawerActions[item.type].icon.length > 1 ? (
+                                                        item.dropdown ? (
+                                                            <Link
+                                                                target={item.target ?? "_self"}
+                                                                to={item.to ?? "#"}
+                                                                data-bs-toggle="dropdown"
+                                                                aria-expanded="false"
+                                                            >
+                                                                <img className='no-hover' src={drawerActions[item.type].icon[0]} alt="icon" />
+                                                                <img className='for-hover' src={drawerActions[item.type].icon[1]} alt="icon" />
+                                                            </Link>
+                                                        ) : (
+                                                            <Link
+                                                                target={item.target ?? "_self"}
+                                                                to={item.to ?? "#"}
+                                                            >
+                                                                <img className='no-hover' src={drawerActions[item.type].icon[0]} alt="icon" />
+                                                                <img className='for-hover' src={drawerActions[item.type].icon[1]} alt="icon" />
+                                                            </Link>
+                                                        )
+                                                    ) : (
+                                                        item.dropdown ? (
+                                                            <Link
+                                                                target={item.target ?? "_self"}
+                                                                to={item.to ?? "#"}
+                                                                data-bs-toggle="dropdown"
+                                                                aria-expanded="false"
+                                                            >
+                                                                {drawerActions[item.type].icon[0]}
+                                                            </Link>
+                                                        ) : (
+                                                            <Link
+                                                                target={item.target ?? "_self"}
+                                                                to={item.to ?? "#"}
+                                                            >
+                                                                {drawerActions[item.type].icon[0]}
+                                                            </Link>
+                                                        )
+                                                    )
+                                                    ) : (item.icon.length > 1 ? (
+                                                        item.dropdown ? (
+                                                            <Link
+                                                                target={item.target ?? "_self"}
+                                                                to={item.to ?? "#"}
+                                                                data-bs-toggle="dropdown"
+                                                                aria-expanded="false"
+                                                            >
+                                                                {
+                                                                    item.icon_type === "img" ? (
+                                                                        <>
+                                                                            <img className='no-hover' src={item.icon[0]} alt="icon" />
+                                                                            <img className='for-hover' src={item.icon[1]} alt="icon" />
+                                                                        </>
+                                                                    ) : (
+                                                                        <>
+                                                                            {item.icon[0]}
+                                                                            {item.icon[1]}
+                                                                        </>
+                                                                    )
+                                                                }
+                                                            </Link>
+                                                        ) : (
+                                                            <Link
+                                                                target={item.target ?? "_self"}
+                                                                to={item.to ?? "#"}
+                                                            >
+                                                                {
+                                                                    item.icon_type === "img" ? (
+                                                                        <>
+                                                                            <img className='no-hover' src={item.icon[0]} alt="icon" />
+                                                                            <img className='for-hover' src={item.icon[1]} alt="icon" />
+                                                                        </>
+                                                                    ) : (
+                                                                        <>
+                                                                            {item.icon[0]}
+                                                                            {item.icon[1]}
+                                                                        </>
+                                                                    )
+                                                                }
+                                                            </Link>
+                                                        )
+                                                    ) : (
+                                                        item.dropdown ? (
+                                                            <Link
+                                                                target={item.target ?? "_self"}
+                                                                to={item.to ?? "#"}
+                                                                data-bs-toggle="dropdown"
+                                                                aria-expanded="false"
+                                                            >
+                                                                {item.icon[0]}
+                                                            </Link>
+                                                        ) : (
+                                                            <Link
+                                                                target={item.target ?? "_self"}
+                                                                to={item.to ?? "#"}
+                                                            >
+                                                                {item.icon[0]}
+                                                            </Link>
+                                                        )
+                                                    )
+                                                    )
+                                            }
+                                            <div className="label-container">
+                                                {item.label ?? drawerActions[item.type].label}
+                                            </div>
+                                            {
+                                                item.dropdown && (
+                                                    <ul className="dropdown-menu fdrawer-dropdown-menu">
+                                                        {
+                                                            item.dropdown.map(dItem => (
+                                                                <li className="dropdown-item" onClick={dItem.onclick ?? (() => "")}>
+                                                                    <Link to={`${dItem.url ?? "#"}`}>
+                                                                        {dItem.label}
+                                                                    </Link>
+                                                                </li>
+                                                            ))
+                                                        }
+                                                    </ul>
+                                                )
+                                            }
+                                        </div>
+                                    </>
+                                ))
+                            }
+                            {
+                                props.hasImportExcel &&
+                                <>
+                                    <div className="fdrawer-btn" role='button' onClick={() => setShowImportExcel(true)}>
+                                        <img className='no-hover' src={bouttonDrawerexcelImport} alt="icon" />
+                                        <img className='for-hover' src={activebouttonDrawerExcelImport} alt="icon" />
+                                        <div className="label-container">
+                                            {DICTIONNARY.ImportExcel[language]}
+                                        </div>
+                                    </div>
+                                </>
+                            }
+                            {
+                                props.hasExportExcel &&
+                                <>
+                                    <div className="fdrawer-btn" role='button' onClick={() => exportDateToExcelFile()}>
+                                        <img className='no-hover' src={bouttonDrawerexcelExport} alt="icon" />
+                                        <img className='for-hover' src={activebouttonDrawerExcelExport} alt="icon" />
+                                        <div className="label-container">
+                                            {DICTIONNARY.ExportExcel[language]}
+                                        </div>
+                                    </div>
+                                </>
+                            }
+                            {
+                                props.hasComHis &&
+                                <>
+                                    <div className="fdrawer-btn" role='button' onClick={() => setShowCommunication(true)}>
+                                        <img className='no-hover' src={bouttonDrawerMessagerie} alt="icon" />
+                                        <img className='for-hover' src={activebouttonDrawerMessagerie} alt="icon" />
+                                        <div className="label-container">
+                                            {DICTIONNARY.CommunicationHistory[language]}
+                                        </div>
+                                    </div>
+                                </>
+                            }
+                            {
+                                props.hasAttach &&
+                                <>
+                                    <div className="fdrawer-btn" role='button' onClick={() => setShowAttachments(!showAttachments)}>
+                                        <img className='no-hover' src={bouttonDrawerAttachement} alt="icon" />
+                                        <img className='for-hover' src={activebouttonDrawerAttachement} alt="icon" />
+                                        <div className="label-container">
+                                            {DICTIONNARY.Attachments[language]}
+                                        </div>
+                                    </div>
+                                </>
+                            }
+                            {
+                                props.hasExport &&
+                                <>
+                                    <div className="fdrawer-btn" role='button' onClick={() => setShowAttachments(!showAttachments)}>
+                                        <img className='no-hover' src={bouttonDrawerAttachement} alt="icon" />
+                                        <img className='for-hover' src={activebouttonDrawerAttachement} alt="icon" />
+                                        <div className="label-container">
+                                            {DICTIONNARY.Attachments[language]}
+                                        </div>
+                                    </div>
+                                </>
+                            }
+                            {
+                                props.save &&
+                                <>
+                                    <div
+                                        className="fdrawer-btn" role='button'
+                                        onClick={props.save}
+                                    >
+                                        <img className='no-hover' src={bouttonDrawerEnregistrer} alt="icon" />
+                                        <img className='for-hover' src={activebouttonDrawerEnregistrer} alt="icon" />
+                                        <div className="label-container">
+                                            {DICTIONNARY.Save[language]}
+                                        </div>
+                                    </div>
+                                </>
+                            }
+                            {
+                                props.view &&
+                                <>
+                                    <div
+                                        className="fdrawer-btn"
+                                        role='button'
+                                        data-bs-toggle="dropdown"
+                                        aria-expanded="false"
+                                    >
+                                        <FaEye className='no-hover icon white' alt="icon" />
+                                        <FaEye className='for-hover icon gray' alt="icon" />
+                                        <div className="label-container">
+                                            {DICTIONNARY.ChangerLaVue[language]}
+                                        </div>
+                                    </div>
+                                    <ul className="dropdown-menu fdrawer-dropdown-menu">
+                                        {
+                                            props.view_actions && props.view_actions.map(item => (
+                                                <li className="dropdown-item" onClick={item.onclick ?? (() => "")}>
+                                                    {item.label}
+                                                </li>
+                                            ))
+                                        }
+                                    </ul>
+                                </>
+                            }
+                        </div>
+                        <div className="no-floating-btn for-style"></div>
+                        <div className="no-floating-btn for-style2"></div>
+                    </div>
+                    {/* ------------------------------------------------------------------------------------- */}
+                </div>
+            </section>
+            {/* ---------------------------------MODAL COM HIS----------------------------------- */}
+            <FModal
+                type="basic"
+                wHeader={false}
+                show={showCommunication}
+                wBtns={false}
+                modalClassName={"modal-format-attach"}
+                hide={() => setShowCommunication(false)}
+                title={DICTIONNARY.CommunicationHistory[language]}
+                children={
+                    <>
+                        <CommunicationHistoryComponent lead={props.lead} update_func={props.update_func} />
+                    </>
+                }
+            />
+            {/* ------------------------------------------------------------------------------------- */}
+            {/* ---------------------------------MODAL ATTACHMENT------------------------------------ */}
+            {/* <FModal
+                type="basic"
+                key="FM-att-modal"
+                wBtns={false}
+                show={showAttachments}
+                modalClassName={"modal-format-attach"}
+                hide={() => setShowAttachments(false)}
+                title={DICTIONNARY.Attachments[language]}
+                children={memoizedAttachments}
+            /> */}
+            {/* ------------------------------------------------------------------------------------- */}
+            {/* ---------------------------------MODAL IMPORT EXCEL---------------------------------- */}
+            <ExcelImportModal
+                show={showImportExcel}
+                hide={() => setShowImportExcel(false)}
+                api={props.api_import}
+                onSuccess={() => {
+                    setShowImportExcel(false);
+                    getDataFilter(); // Recharger les données après import
+                }}
+            />
+            {/* ------------------------------------------------------------------------------------- */}
+            {/* ---------------------------------MODAL COMMENTAIRE----------------------------------- */}
+            <FModal
+                type="basic"
+                show={showModalComment}
+                hide={() => setShowModalComment(false)}
+                title={DICTIONNARY.Commentaire[language]}
+                modalClassName={"modal-format-com"}
+                secondInfo={secondInfoComment}
+                wBtns={false}
+                children={
+                    <>
+                        <div className="col radius-1 p-2 bordered">
+                            {comment}
+                        </div>
+                    </>
+                }
+            />
+            {/* ------------------------------------------------------------------------------------- */}
+
+
+            <ModelTemplapleSimpleV1
+                className={`content`}
+                modalClassName={`crm-modal-custom-drawer`}
+                show={showPeriodModal} hide={() => setShowPeriodModal(false)}
+                children={
+                    <>
+                        <div className='card-global-green card'>
+                            <div className={`card-header change-background-color-header-gray`}>
+                                <h4 className='title general-title mb-0'>selectectionner la periode </h4>
+                            </div>
+                            <div className='content-card'>
+                                <CustomFieldset title={`Filtre`} className={`fieldset-drawer-content`} children={
+                                    <>
+                                        <div className='grid-custom-one-column content-drawer'>
+                                            <div className="mb-2">
+                                                <label htmlFor="" className="form-label">Period</label>
+                                                <div className="grid-custom-two-column grid-gap-custom">
+                                                    <div className="grid-custom-one-column">
+                                                        <input type="date" value={dateRange.startDate} onChange={changeRange} name="startDate" />
+                                                    </div>
+                                                    <div className="grid-custom-one-column">
+                                                        <input type="date" value={dateRange.endDate} onChange={changeRange} name="endDate" />
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+
+
+                                    </>
+                                } />
+                            </div>
+                        </div>
+                    </>
+                }
+            />
+
+        </>
+    );
+};
+
+
+export const FooterSummary: React.FC<FooterSummaryProps> = (props) => {
+    return (
+        <>
+            <div className='card-total two'>
+                <div className="">
+                    <table className="fsummary-table">
+                        <thead>
+                            <tr>
+                                <th></th>
+                                {
+                                    props.colonnes.map((item, index) => (
+                                        <th key={`${index}57435674GFHJKB659764`} className='text-center px-1'>{item}</th>
+                                    ))
+                                }
+                            </tr>
+                        </thead>
+
+                        <tbody>
+                            {
+                                props.rows.map((item, index) => (
+                                    <tr key={`${index}34843Y6F45FUYG756FJ7UHY65HYGER`} className=''>
+                                        <td className='pe-1'>{item.label}</td>
+                                        {
+                                            item.contents.map((content, index) => (
+                                                <td key={`${index}34FG2A3QSR4R`} className='text-center'>{content(props.param)}</td>
+                                            ))
+                                        }
+                                    </tr>
+                                ))
+                            }
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+        </>
+    );
+}
+
+
+
+export const DropdownActionsMenu: React.FC<DropdownActionsMenuProps> = ({ actions, row, setLineSelected, center }) => {
+    return (
+        <ul className="dropdown-menu dropdown-menu-right">
+            {actions?.map((act) => {
+                const link = act.to ? act.to(row) : "";
+                const hasPermission = !act.permission || center?.user_permissions?.includes(act.permission);
+                const handleClick = () => {
+                    if (!hasPermission) return;
+                    setLineSelected("");
+                    act.onclick?.(row);
+                };
+
+                if (act.condition && !act.condition(row)) return null;
+
+                return (
+                    <li key={act.label}>
+                        {act.onclick ? (
+                            <span
+                                className={`dropdown-item ${!hasPermission ? 'wise-disabled text-muted' : ''}`}
+                                onClick={handleClick}
+                                title={!hasPermission ? "Vous n'avez pas l'autorisation requise pour cette action." : ""}
+                                style={{ cursor: hasPermission ? "pointer" : "not-allowed" }}
+                            >
+                                {act.label}
+                            </span>
+                        ) : (
+                            <Link
+                                className={`dropdown-item ${!hasPermission ? 'wise-disabled  text-muted' : ''}`}
+                                to={hasPermission ? link : "#"}
+                                title={!hasPermission ? "Vous n'avez pas l'autorisation requise pour cette action." : ""}
+                                onClick={(e) => {
+                                    if (!hasPermission) e.preventDefault();
+                                    else setLineSelected("");
+                                }}
+                                style={{ cursor: hasPermission ? "pointer" : "not-allowed" }}
+                            >
+                                {act.label}
+                            </Link>
+                        )}
+                    </li>
+                );
+            })}
+        </ul>
+    );
+};
+
+
+
+export const DynamicTable: React.FC<DynamicTableProps> = (props) => {
+    const [active, setActive] = useState("1");
+    const [rows, setRows] = useState(props.row ?? []);
+    const [rawValues, setRawValues] = useState([])
+    const [newRowValues, setNewRowValues] = useState(props.new_row ?? {})
+
+
+    const handleAddRow = () => {
+        // Générez une nouvelle ligne avec un identifiant unique
+        const newId = Math.random();
+        const newRow = {
+            id: newId,
+            description: '',
+            status: '',
+        };
+
+        setRows([...rows, newRow]);
+    };
+
+    const handleDeleteRow = (inputId) => {
+        // Filtrer les lignes en fonction de l'identifiant unique
+        const updatedRows = rows.filter(row => row.id !== inputId);
+        setRows(updatedRows);
+    };
+
+    const handleDeleteRowValues = (inputId) => {
+        // Filtrer les lignes en fonction de l'identifiant unique
+        const newArr = rawValues.filter(row => row.id !== inputId);
+        setRawValues(newArr);
+    };
+
+    const handleChangeNewRow = (e) => {
+        const copy = newRowValues
+        copy[`${e.currentTarget.name}`] = e.target.value
+        setNewRowValues(copy)
+    }
+
+    const handleResetNewRow = (e) => {
+        const clearRow = {
+            id: Math.random(),
+            description: '',
+            status: '',
+        }
+        setNewRowValues(clearRow)
+    }
+
+    const [selectedItems, setSelectedItems] = useState([]);
+
+    const handleSelectedItem = (event) => {
+        setSelectedItems(prevItems => {
+            if (!prevItems.includes(event)) {
+                return [...prevItems, event];
+            }
+            return prevItems;
+        });
+    };
+
+    return (
+        <>
+            <div className='table-custom custom-list-journal-body-table'>
+                <div className="table-responsive">
+                    <table className="table">
+                        <thead className='thead_'>
+                            <tr>
+                                <th className={`text-center ${props.side_of_icon === "gauche" ? "d-block" : "d-none"}`}></th>
+                                {props.arr && props.arr.map((item, index) => (
+                                    <th className='text-center' key={`trg${index}rhyt${item.label}`}>{item.label}</th>
+                                ))}
+                                <th className={`text-center ${props.side_of_icon === "droite" ? "d-block" : "d-none"}`}></th>
+                            </tr>
+                        </thead>
+                        <tbody className='tbody_'>
+                            {rows.map((data, index, array) => {
+                                const isLastRow = index === array.length - 1;
+                                const icon = isLastRow ? (
+                                    <LuPlusCircle role='button' title="Double click for delete" className="icon green" size={20} onClick={() => {
+                                        setRawValues(prev => [...prev, newRowValues])
+                                        handleResetNewRow()
+                                        handleAddRow()
+                                    }} />
+                                ) : (
+                                    <FaTrashAlt className='icon red delete-icon' onDoubleClick={() => {
+                                        handleDeleteRowValues(data.id)
+                                        handleDeleteRow(data.id)
+                                    }} />
+                                );
+                                return (
+                                    <tr key={`${index}Fsrsdcr`}>
+                                        <td className={`text-center ${props.side_of_icon === "gauche" ? "d-block" : "d-none"} p-2`}  >
+                                            {icon}
+                                        </td>
+                                        {props.arr && props.arr.map((item, index) => (
+                                            <td className='text-center p-1'>
+                                                {
+                                                    item.type === "list" ? (
+                                                        <CustomSelector
+                                                            optionsInitial={item.list.map(item2 => ({
+                                                                id: item2.id,
+                                                                value: item2.value,
+                                                                label: item2.label
+                                                            }))}
+                                                            onSelect={(selectedValue) => handleSelectedItem(selectedValue)}
+                                                            placeholder={'Select'}
+                                                            loading={null}
+                                                        />
+                                                    ) : (
+                                                        <input className={`w-100 ${item.type === "checkbox" ? "mx-auto" : ""}`} name={item.name} type={item.type} onChange={(e) => handleChangeNewRow(e)} />
+                                                    )
+                                                }
+                                            </td>
+                                        ))}
+                                        <td className={`text-center ${props.side_of_icon === "droite" ? "d-block" : "d-none"} p-2`}>
+                                            {icon}
+                                        </td>
+                                    </tr>
+                                )
+                            })}
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+        </>
+    );
+};
+
+export const FTable: React.FC<FTableProps> = (props) => {
+
+
+
+
+    // ---------------------------------------------------------------------------
+    // ---------------------------------CUSTOM HOOKS------------------------------
+    // ---------------------------------------------------------------------------
+
+    const navigate = useNavigate();
+    const { center } = useCenter();
+    const { language } = useLanguage();
+    const { setIsLoadingCancelable } = useLoading()
+
+    // ---------------------------------------------------------------------------
+    // ---------------------------------------------------------------------------
+
+    // ---------------------------------------------------------------------------
+    // ---------------------------------REFS--------------------------------------
+    // ---------------------------------------------------------------------------
+
+    const champsRef = useRef([]);
+    const champsRef2 = useRef([]);
+    const searchSelect = useRef();
+    const btnsContainer = useRef();
+    const sweetAlertRef = useRef();
+    const tableRefExportExcel = useRef(null);
+
+    // ---------------------------------------------------------------------------
+    // ---------------------------------------------------------------------------
+
+
+
+
+
+    // ---------------------------------------------------------------------------
+    // ---------------------------------DEFAULT PROPS-----------------------------
+    // ---------------------------------------------------------------------------
+
+    const selected = props.selected ?? []
+
+    const setSelected = props.setSelected ?? ((param) => "")
+
+    const maxText = props.maxText ?? 75
+
+    const type = props.type ?? "table"
+
+    const noFilter = props.noFilter ?? false
+
+    const noSearch = props.noSearch ?? false
+
+    const table_type = props.table_type ?? "basic"
+
+    const rerender = props.toggle ?? "";
+
+    const headers = props.headers ?? [];
+
+    const totalHeaders = props.totalHeaders ?? [];
+
+    const btnsList = props.btnsList ?? [];
+
+    // ---------------------------------------------------------------------------
+    // ---------------------------------------------------------------------------
+
+
+
+
+
+
+
+    // ---------------------------------------------------------------------------
+    // ---------------------------------STATES-----------------------------------
+    // ---------------------------------------------------------------------------
+
+    const [lineSelected, setLineSelected] = useState('')
+    const [showContent, setShowContent] = useState({});
+    const [showModalComment, setShowModalComment] = useState(false);
+    const [secondInfoComment, setSecondInfoComment] = useState("");
+    const [comment, setComment] = useState(false);
+    const [showLeadForm, setShowLeadForm] = useState(false);
+    const [isSorting, setIsSorting] = useState(props.orderByDefault);
+    const [data, setData] = useState([]);
+    const [dataFilters, setDataFilters] = useState([]);
+    const [noFiltres, setNoFiltres] = useState(false);
+    const [showFiltres, setShowFiltres] = useState(false);
+    const [showRecherche, setShowRecherche] = useState(false);
+    const [showFR, setShowFR] = useState("");
+    const [filtres, setFiltres] = useState([]);
+    const [csv, setCsv] = useState("");
+    const [legends, setLegends] = useState([]);
+    const [listFiltres, setListFiltres] = useState([]);
+    const [loading, setLoading] = useState(true);
+    const [loading2, setLoading2] = useState(true);
+    const [queryURL, setQueryURL] = useState('');
+    const [showCommunication, setShowCommunication] = useState(false);
+    const [showAttachments, setShowAttachments] = useState(false);
+    const [showImportExcel, setShowImportExcel] = useState(false);
+    const [attachments, setAttachments] = useState([])
+    const [search, setSearch] = useState('');
+    const [selectedItems, setSelectedItems] = useState([]);
+    const [btnAdd, setBtnAdd] = useState(true);
+    const [reponseDetail, setReponseDetail] = useState({
+        total_pages: null,
+        previous: null,
+        next: null,
+        current_page: null,
+
+    });
+
+    const makeFilters = () => {
+        const newFilters = headers.reduce((acc, item) => {
+            if (item.formule) {
+                acc[`${item.search_name}__icontains`] = ""
+                return acc
+            } else {
+                acc[`${item.key}__icontains`] = ""
+                return acc
+            }
+        })
+        return newFilters
+    }
+    const preFilters = (headers.length) > 0 ? makeFilters() : []
+
+    const [filters, setFilters] = useState({
+        ...preFilters,
+        center_id: center?.id ?? null,
+        order_by: props.orderByDefault ?? "id",
+        page: 1
+    })
+
+    const [filtersMemo, setFiltersMemo] = useState({
+        ...preFilters,
+        center_id: center?.id ?? null,
+        order_by: props.orderByDefault ?? "id",
+        page: 1
+    })
+
+    // ---------------------------------------------------------------------------
+    // ---------------------------------------------------------------------------
+
+
+
+
+
+
+    const handleClick = (value) => {
+        if (showFR === value) {
+            setShowFR('')
+        } else {
+            setShowFR(value);
+        }
+    };
+
+    const getDataFilter = async () => {
+        if (props.api) {
+            setLoading(true)
+            try {
+                const response = await fetch(queryURL, {
+                    method: 'GET',
+                    headers: authenticated_header()
+                });
+
+                if (!response.ok) {
+                    throw new Error(`HTTP ERROR! STATUS: ${response.status}`);
+                }
+
+                const data = await response.json();
+                setReponseDetail(data)
+                setDataFilters(data.results)
+                setLoading(false)
+            } catch (error) {
+                console.error('ERROR FETCHING DATA', error);
+            }
+        }
+    };
+
+    const getData = async () => {
+        if (props.api) {
+            setLoading2(true)
+            try {
+                const response = await fetch(`${addressIpApi}${props.api}?all=true&center_id=${center?.id ?? null}${props.additional_params ?? ''}`, {
+                    method: 'GET',
+                    headers: authenticated_header()
+                });
+
+                if (!response.ok) {
+                    throw new Error('Error fetching data');
+                }
+
+                const data = await response.json();
+                setData(data.data)
+                const listFilter = []
+                for (let idx = 0; idx < headers.length; idx++) {
+                    if (headers[idx].filterable) {
+                        listFilter.push(data.data.map(item => ({ id: item.id, name: headers[idx].formule ? headers[idx].formule(item) : item[`${headers[idx].key}`] })))
+                    }
+                }
+                setListFiltres(listFilter)
+                setLoading2(false)
+
+            } catch (error) {
+                console.error('Error fetching data:', error);
+            }
+        }
+    }
+
+
+
+
+
+    useEffect(() => {
+        const handleClickOutside = (event) => {
+            if (!event.target.classList.contains("selected")) {
+                setLineSelected('');
+            }
+        };
+
+        document.addEventListener('mousedown', handleClickOutside);
+
+        return () => {
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, []);
+
+    useEffect(() => {
+        const params = new URLSearchParams(filters).toString();
+        setQueryURL(`${addressIpApi}${props.api}?${params}${props.additional_params ?? ''}`);
+    }, [filters]);
+
+    useEffect(() => {
+        getData();
+    }, [center, rerender]);
+
+    useEffect(() => {
+        getDataFilter();
+    }, [center, queryURL, rerender]);
+
+    useEffect(() => {
+        const columns = []
+        headers.forEach(item1 => item1.filterable && columns.push({ label: item1.name, type: item1.type, key: item1.search_name ? item1.search_name : item1.key }))
+        setFiltres(columns)
+        props.btn_add !== undefined && setBtnAdd(props.btn_add)
+    }, [])
+
+    // ---------------------------------------------------------------------------
+    // ---------------------------------------------------------------------------
+
+    return (
+        <>
+            <section
+                id={props.id}
+                className={`ftable-container flex-col`}
+            >
+                <div className={`gap-2 flex-col p-1`}>
+                    <div className={`col`}>
+
+                        <div className='table-custom custom-list-journal-body-table'>
+                            <div className={`table-responsive type-table ${props.inWorkspace && "in-workspace"} ${props.wTotalCard && "w-total-card"}  ${props.wMenu && "w-menu"}`}>
+                                
+                                {
+                                    table_type === "basic" && (
+                                        <TableBasic
+                                            actions={props.actions}
+                                            dataFilters={dataFilters}
+                                            loading={loading}
+                                            maxText={maxText}
+                                            data={data}
+                                            headers={headers}
+                                            totalHeaders={totalHeaders}
+                                            filters={filters}
+                                            setFilters={setFilters}
+                                            setComment={setComment}
+                                            setSecondInfoComment={setSecondInfoComment}
+                                            setShowModalComment={setShowModalComment}
+                                            lineSelected={lineSelected}
+                                            setLineSelected={setLineSelected}
+                                            isSorting={isSorting}
+                                            setIsSorting={setIsSorting}
+                                        />
+                                    )
+                                }
+                            </div>
+                        </div>
+
+                    </div>
+
+                    <div className="w-100 flex-between align-end">
+                        {
+                            !props.noPagination && dataFilters.length > 0 ? <FilterPagination filters={[filters, setFilters]} reponseDetail={reponseDetail} setQueryURL={setQueryURL} /> : <div className=""></div>
+                        }
+
+                        {
+                            props.summary && <FooterSummary colonnes={props.summary.colonnes} rows={props.summary.rows} param={data} />
+                        }
+                    </div>
+                </div>
+            </section>
+            {/* ------------------------------------------------------------------------------------- */}
+            {/* ---------------------------------MODAL COMMENTAIRE----------------------------------- */}
+            <FModal
+                type="basic"
+                show={showModalComment}
+                hide={() => setShowModalComment(false)}
+                title={DICTIONNARY.Commentaire[language]}
+                modalClassName={"modal-format-com"}
+                secondInfo={secondInfoComment}
+                wBtns={false}
+                children={
+                    <>
+                        <div className="col radius-1 p-2 bordered">
+                            {comment}
+                        </div>
+                    </>
+                }
+            />
+            {/* ------------------------------------------------------------------------------------- */}
+        </>
+    );
+}
+
+
+
+export const TableBasic: React.FC<any> = (props) => {
+
+    const dataFilters = props.dataFilters ?? []
+
+    const loading = props.loading ?? true
+
+    const maxText = props.maxText ?? 75
+
+    const data = props.data ?? [];
+
+    const headers = props.headers ?? [];
+
+    const totalHeaders = props.totalHeaders ?? [];
+
+    const filters = props.filters ?? {};
+
+    const setFilters = props.setFilters ?? ((param) => "");
+
+    const setComment = props.setComment ?? ((param) => "");
+
+    const setSecondInfoComment = props.setSecondInfoComment ?? ((param) => "");
+
+    const setShowModalComment = props.setShowModalComment ?? ((param) => "");
+
+    const lineSelected = props.lineSelected ?? "";
+    const setLineSelected = props.setLineSelected ?? ((param) => "");
+
+    const isSorting = props.isSorting;
+    const setIsSorting = props.setIsSorting ?? ((param) => "");
+
+    const { language } = useLanguage()
+    const {center} = useCenter()
+
+    return (
+        <>
+            <table className="table">
+                <thead className="table-dark thead_">
+                    <tr>
+                        {
+                            headers.map((item, index, array) => (
+                                <th
+                                    className={`${(isSorting === item.key || isSorting === `-${item.key}`) && "bg-cararra"} ${!item.sortable && "no-sortable"}`}
+                                >
+                                    {
+                                        item.sortable ? (
+                                            <>
+                                                <div
+                                                    className="align-center gap-1"
+                                                    data-bs-toggle="dropdown"
+                                                    aria-expanded="false"
+                                                    title={item.abbr ?? ""}
+                                                >
+                                                    {item.name}
+                                                    <FaSort className='icon rem-075 gray' />
+                                                </div>
+                                                <ul className="dropdown-menu sort-menu">
+                                                    <li>
+                                                        <span
+                                                            className={`${isSorting === item.key && "sorted"} dropdown-item`}
+                                                            onClick={() => {
+                                                                if (isSorting === item.key) {
+                                                                    return ""
+                                                                } else if (isSorting !== item.key) {
+                                                                    const copy = {
+                                                                        ...filters,
+                                                                        order_by: item.key,
+                                                                    }
+                                                                    setIsSorting(item.key)
+                                                                    setFilters(copy)
+                                                                }
+                                                            }}
+                                                        >
+                                                            <FaSortAmountDownAlt />
+                                                            Ascending
+                                                        </span>
+                                                    </li>
+                                                    <li>
+                                                        <span
+                                                            className={`${isSorting === `-${item.key}` && "sorted"} dropdown-item`}
+                                                            onClick={() => {
+                                                                if (isSorting !== `-${item.key}`) {
+                                                                    const copy = {
+                                                                        ...filters,
+                                                                        order_by: `-${item.key}`,
+                                                                    }
+                                                                    setIsSorting(`-${item.key}`)
+                                                                    setFilters(copy)
+                                                                } else if (isSorting === `-${item.key}`) {
+                                                                    return ""
+                                                                }
+                                                            }}
+                                                        >
+                                                            <FaSortAmountDown />
+                                                            Descending
+                                                        </span>
+                                                    </li>
+                                                </ul>
+                                            </>
+                                        ) : (
+                                            item.name
+                                        )
+                                    }
+                                    <div className="resizer"></div>
+                                </th>
+                            ))
+                        }
+                        {
+                            props.actions && props.actions && <th></th>
+                        }
+                    </tr>
+                </thead>
+                <tbody className='tbody_'>
+                    {loading ? (
+                        <tr className='no-b no-hover'>
+                            <td colSpan={props.actions ? headers.length + 1 : headers.length} className="text-center no-b p-2">...chargement</td>
+                        </tr>
+                    ) : dataFilters.length > 0 ? (
+                        dataFilters.map((row) => (
+                            <tr key={row.id} className={`${lineSelected === row.id && "selected"}`}>
+                                {
+                                    headers.map((item, index, array) =>
+                                        item.type === "date" ? (
+                                            <td key={item.key} className=''>
+                                                {
+                                                    item.formule ? item.formule(row) !== "-" ? DATETIME.formatDDMMYYYY(item.formule(row)) : "-" : row[`${item.key}`] !== "-" ? DATETIME.formatDDMMYYYY(row[`${item.key}`]) : "-"
+                                                }
+                                            </td>
+                                        ) : (
+                                            item.type === "comment" ? (
+                                                <td className='' key={item.key}>
+                                                    {
+                                                        item.formule ? (
+                                                            <>
+                                                                {item.formule(row) ? (
+                                                                    <img src={table_com_icon2} alt='icon' title='click ' role='button' className='mx-auto icon spe-img' onClick={() => { setComment(item.formule(row)); setSecondInfoComment(item.formuleForComment ? item.formuleForComment(row) : ""); setShowModalComment(true) }} />
+                                                                ) : (
+                                                                    <img src={table_com_icon} alt='icon' className='mx-auto icon spe-img' />
+                                                                )}
+                                                            </>
+                                                        ) :
+                                                            <>
+                                                                {row[`${item.key}`] ? (
+                                                                    <img src={table_com_icon2} alt='icon' role='button' className='mx-auto icon spe-img' onClick={() => { setComment(row[`${item.key}`]); setSecondInfoComment(item.formuleForComment ? item.formuleForComment(row) : ""); setShowModalComment(true) }} />
+                                                                ) : (
+                                                                    <img src={table_com_icon} alt='icon' className='mx-auto icon spe-img' />
+                                                                )}
+                                                            </>}
+                                                </td>
+                                            ) : (
+                                                item.type === "choice" ? (
+                                                    <td key={item.key} className='ps-1'>
+                                                        {
+                                                            item.formule ? (
+                                                                <div className="mx-auto" title={item.formule(row)[language]}>
+                                                                    {
+                                                                        item.formule(row).icon
+                                                                    }
+                                                                </div>
+                                                            ) : "-"
+                                                        }
+                                                    </td>
+                                                ) : (
+                                                    item.type === "amount" ? (
+                                                        <td key={item.key} className='ps-1'>
+                                                            {
+                                                                item.formule ? item.formule(row) : sep_mil(row[`${item.key}`])
+                                                            }
+                                                        </td>
+                                                    ) : (
+                                                        item.type === "description" ? (
+                                                            <td key={item.key} className='ps-1'>
+                                                                {
+                                                                    item.formule ? (
+                                                                        item.formule(row).length < maxText ? (
+                                                                            item.formule(row)
+                                                                        ) : (
+                                                                            <FDropdown
+                                                                                trigger={STRING.truncateText(item.formule(row), maxText ?? 75)}
+                                                                                content={item.formule(row)}
+                                                                            />
+                                                                        )
+                                                                    ) : (
+                                                                        row[`${item.key}`].length < 75 ? (
+                                                                            row[`${item.key}`]
+                                                                        ) : (
+                                                                            <FDropdown
+                                                                                trigger={STRING.truncateText(row[`${item.key}`], maxText ?? 75)}
+                                                                                content={row[`${item.key}`]}
+                                                                            />
+                                                                        )
+                                                                    )
+                                                                }
+                                                            </td>
+                                                        ) : (
+                                                            <td key={item.key} className=''>
+                                                                {
+                                                                    item.formule ? item.formule(row) : row[`${item.key}`]
+                                                                }
+                                                            </td>
+                                                        )
+                                                    ))))
+                                    )
+                                }
+                                {
+                                    props.actions && props.actions && (
+                                        <td className='text-center'>
+                                            <div className="" onClick={() => setLineSelected(row.id)}>
+                                                <span className="doropdown-vertical-icon"
+                                                    data-bs-toggle="dropdown"
+                                                    aria-expanded="false">
+                                                    <BsThreeDotsVertical />
+                                                </span>
+                                                <ul className="dropdown-menu dropdown-menu-right">
+                                                    {props.actions?.map((act) => {
+                                                        const link = act.to ? act.to(row) : "";
+                                                        const hasPermission = !act.permission || center?.user_permissions?.includes(act.permission);
+                                                        const handleClick = () => {
+                                                            if (!hasPermission) return; // Empêche l'action si pas autorisé
+                                                            setLineSelected("");
+                                                            act.onclick?.(row);
+                                                        };
+
+                                                        if (act.condition && !act.condition(row)) return null;
+
+                                                        return (
+                                                            <li key={act.label}>
+                                                                {act.onclick ? (
+                                                                    <span
+                                                                        className={`dropdown-item ${!hasPermission ? 'wise-disabled text-muted' : ''}`}
+                                                                        onClick={handleClick}
+                                                                        title={!hasPermission ? "Vous n'avez pas l'autorisation requise pour cette action." : ""}
+                                                                        style={{ cursor: hasPermission ? "pointer" : "not-allowed" }}
+                                                                    >
+                                                                        {act.label}
+                                                                    </span>
+                                                                ) : (
+                                                                    <Link
+                                                                        className={`dropdown-item ${!hasPermission ? 'wise-disabled  text-muted' : ''}`}
+                                                                        to={hasPermission ? link : "#"}
+                                                                        title={!hasPermission ? "Vous n'avez pas l'autorisation requise pour cette action." : ""}
+                                                                        onClick={(e) => {
+                                                                            if (!hasPermission) e.preventDefault();
+                                                                            else setLineSelected("");
+                                                                        }}
+                                                                        style={{ cursor: hasPermission ? "pointer" : "not-allowed" }}
+                                                                    >
+                                                                        {act.label}
+                                                                    </Link>
+                                                                )}
+                                                            </li>
+                                                        );
+                                                    })}
+                                                </ul>
+                                            </div>
+                                        </td>
+                                    )
+                                }
+                            </tr>
+                        ))
+                    ) : (
+                        <tr className='no-b no-hover'>
+                            <td
+                                colSpan={headers.length}
+                                className="no-b no-hover"
+                            >
+                                <div className="col w-100 d-flex justify-content-center align-items-center">
+                                    <img className="spe-illus-nodata" src={nodata_illus} alt="illus" />
+                                </div>
+                            </td>
+                        </tr>
+                    )}
+                </tbody>
+                {
+                    !loading && dataFilters.length > 0 && totalHeaders.length > 0 && (
+                        <tfoot className="f-tfoot_">
+                            <tr>
+                                {
+                                    totalHeaders.map((item, index) => (
+                                        <td
+                                            key={`dsqf${index}mflkdgop`}
+                                            colSpan={item.colSpan ?? 1}
+                                        >
+                                            {item.formule(data) ?? ""}
+                                        </td>
+                                    ))
+                                }
+                                {
+                                    props.actions && (
+                                        <td className=''>
+                                        </td>
+                                    )
+                                }
+                            </tr>
+                        </tfoot>
+                    )
+                }
+            </table>
+        </>
+    );
+}