@ssplib/react-components 0.0.295 → 0.0.296

package/components/form/table/GenericTable.js

@@ -0,0 +1,1034 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GenericTable = void 0;
+const icons_material_1 = require("@mui/icons-material");
+const Clear_1 = __importDefault(require("@mui/icons-material/Clear"));
+const FileDownload_1 = __importDefault(require("@mui/icons-material/FileDownload"));
+const NavigateNextRounded_1 = __importDefault(require("@mui/icons-material/NavigateNextRounded"));
+const Search_1 = __importDefault(require("@mui/icons-material/Search"));
+const material_1 = require("@mui/material");
+const Grid_1 = __importDefault(require("@mui/material/Grid"));
+const Pagination_1 = __importDefault(require("@mui/material/Pagination"));
+const TextField_1 = __importDefault(require("@mui/material/TextField"));
+const Typography_1 = __importDefault(require("@mui/material/Typography"));
+const x_date_pickers_1 = require("@mui/x-date-pickers");
+const AdapterDayjs_1 = require("@mui/x-date-pickers/AdapterDayjs");
+const dayjs_1 = __importDefault(require("dayjs"));
+const jszip_1 = __importDefault(require("jszip"));
+const lodash_get_1 = __importDefault(require("lodash.get"));
+const react_1 = __importStar(require("react"));
+const auth_1 = require("../../../context/auth");
+const Modal_1 = require("../../modal/Modal");
+const CustomMenu_1 = __importDefault(require("../../utils/CustomMenu"));
+function removePunctuationAndAccents(text) {
+    // Remove accents and diacritics
+    const normalizedText = text.normalize('NFD').replace(/[\u0300-\u036f]/g, '');
+    // Remove punctuation marks
+    const cleanedText = normalizedText.replace(/[!"#$%&'()*+,\-./:;<=>?@[\\\]^_`{|}~]/g, '');
+    return cleanedText;
+}
+function formatarString(str) {
+    const value = typeof str !== 'string' ? str.toString() : str;
+    return value
+        .normalize('NFD')
+        .replace(/[\u0300-\u036f]/g, '')
+        .toLowerCase()
+        .trim();
+}
+let startData = [];
+let isExpandAll = false;
+let localTableName = '';
+let orderAsc = false;
+let filtersFuncData = {};
+let localTableNameCache = '';
+/**
+ * Tabela cujo dados devem ser passados via props
+ */
+function GenericTable({ mediaQueryLG, columns, emptyMsg = {
+    user: 'Nenhum dado encontrado',
+    public: 'Nenhum dado encontrado',
+}, dataPath = '', tableName = 'Dados', csv, columnSize, action, useKC = true, statusKeyName = '', csvExcludeKeys = [], csvExcludeKeysCSV = [], csvExcludeKeysAll = [], csvCustomKeyNames = {}, csvExcludeValidate = (key, value) => false, csvButtonTitle = 'Salvar .CSV', csvNoZipText = 'Salvar .CSV', csvAllButtonTitle = 'Salvar todos em CSV', removeQuotes = false, normalize = false, csvShowAllButton = false, csvWithoutZip = false, itemCount = 10, csvUpper = false, csvZipFileNamesKey = '', generateCsvZip = false, hideTitleCSV = false, csvExcludeUpper = [], multipleDataPath = '', expandTextMaxLength = 50, collapsedSize = 53, customMargin = 4, customMarginMobile = 0, filtersFunc, filters = [], orderBy = [], customErrorMsg = undefined, customTableStyle = {}, id, initialData = null, isLoading, }) {
+    var _a;
+    const [error, setError] = (0, react_1.useState)(null);
+    const [data, setData] = (0, react_1.useState)(initialData);
+    const { user, userLoaded } = (0, react_1.useContext)(auth_1.AuthContext);
+    const [list, setList] = (0, react_1.useState)([]);
+    const [listClone, setListClone] = (0, react_1.useState)([]);
+    //numero de items pra ser mostrado
+    const [itemsCount, setItemsCount] = (0, react_1.useState)(itemCount);
+    const [currentPage, setCurrentPage] = (0, react_1.useState)(0);
+    const [paginationCount, setPagCount] = (0, react_1.useState)(1);
+    const [listPage, setListPage] = (0, react_1.useState)(1);
+    const [oldSelectState, setOldSelectState] = (0, react_1.useState)('');
+    const [expandObj, setExpandObj] = (0, react_1.useState)({});
+    const [showExpandObj, setShowExpandObj] = (0, react_1.useState)({});
+    const [showExpandObjOnExited, setShowExpandObjOnExited] = (0, react_1.useState)({});
+    const [filterKey, setFilterKey] = (0, react_1.useState)('filterKey');
+    const theme = (0, material_1.useTheme)();
+    const isSmall = (0, material_1.useMediaQuery)(theme.breakpoints.only('xs'));
+    const filterContainer = (0, react_1.useRef)(null);
+    const lg = (0, material_1.useMediaQuery)(theme.breakpoints.up(2000));
+    localTableName = `tableFilter_${id}`;
+    localTableNameCache = `tableFilterCache_${id}`;
+    filtersFuncData = filtersFunc !== null && filtersFunc !== void 0 ? filtersFunc : {};
+    if (!localStorage.getItem(localTableNameCache))
+        localStorage.setItem(localTableNameCache, JSON.stringify(filters));
+    if (localStorage.getItem(localTableNameCache) !== JSON.stringify(filters)) {
+        localStorage.setItem(localTableNameCache, JSON.stringify(filters));
+        localStorage.removeItem(localTableName);
+    }
+    const getCount = (0, react_1.useCallback)((countData) => {
+        if (countData.length <= 0)
+            return 1;
+        let count = countData.length / itemsCount;
+        count = count < 1 ? 1 : count;
+        return Math.ceil(count);
+    }, [itemsCount]);
+    const getData = (0, react_1.useCallback)((dt) => {
+        if (Array.isArray(dt))
+            return dt;
+        if (typeof dt === 'object')
+            return (0, lodash_get_1.default)(dt, dataPath);
+    }, []);
+    (0, react_1.useEffect)(() => {
+        if (error || !getData(data))
+            return;
+        const value = getData(data);
+        setList(value);
+        setListClone(value);
+        setPagCount(getCount(value));
+        if (localStorage.getItem(localTableName)) {
+            filtrar(JSON.parse(localStorage.getItem(localTableName)));
+        }
+    }, [itemsCount, data, getCount, error]);
+    (0, react_1.useEffect)(() => {
+        setCurrentPage(listPage - 1);
+    }, [listPage]);
+    const onPaginationChange = (0, react_1.useCallback)((e, page) => {
+        setListPage(page);
+    }, []);
+    function onInputChange(e) {
+        console.log(listClone);
+        const searchValue = e.target.value;
+        if (searchValue === '') {
+            setList(listClone);
+            setPagCount(getCount(getData(list)));
+            return;
+        }
+        const listData = getData(list);
+        const newList = [];
+        listData.forEach((x) => {
+            const dataStr = [];
+            Object.keys(x).map((key) => {
+                var _a;
+                let value = (_a = (0, lodash_get_1.default)(x, key, '')) !== null && _a !== void 0 ? _a : '';
+                if (typeof value === 'number')
+                    value = value.toString();
+                if (typeof value !== 'string')
+                    return;
+                dataStr.push(value);
+            });
+            if (dataStr.length <= 0)
+                return;
+            let exists = false;
+            dataStr.forEach((key) => {
+                const status = ['P', 'C', 'A', 'R', 'L', 'PA'];
+                if (status.includes(key)) {
+                    switch (key) {
+                        case 'P':
+                            if ('em analise'.includes(searchValue.toLowerCase())) {
+                                exists = true;
+                            }
+                            return;
+                        case 'C':
+                            if ('cancelado'.includes(searchValue.toLowerCase())) {
+                                exists = true;
+                            }
+                            return;
+                        case 'A':
+                            if ('cadastrado'.includes(searchValue.toLowerCase())) {
+                                exists = true;
+                            }
+                            return;
+                        case 'R':
+                            if ('reprovado'.includes(searchValue.toLowerCase())) {
+                                exists = true;
+                            }
+                            return;
+                        case 'L':
+                            if ('licenciado'.includes(searchValue.toLowerCase())) {
+                                exists = true;
+                            }
+                            return;
+                        case 'PA':
+                            if ('pré aprovado'.includes(searchValue.toLowerCase()) || 'pre aprovado'.includes(searchValue.toLowerCase())) {
+                                exists = true;
+                            }
+                            return;
+                        case 'FP':
+                            if ('fora do prazo'.includes(searchValue.toLowerCase())) {
+                                exists = true;
+                            }
+                            return;
+                    }
+                }
+                if (removePunctuationAndAccents(key.toLowerCase()).includes(removePunctuationAndAccents(searchValue.toLowerCase()))) {
+                    exists = true;
+                }
+            });
+            if (!exists)
+                return;
+            newList.push(x);
+        });
+        setList(newList);
+        setPagCount(getCount(newList));
+        setCurrentPage(0);
+        setListPage(1);
+    }
+    const getMaxItems = (0, react_1.useCallback)(() => {
+        const start = currentPage * itemsCount;
+        return list.slice(start, start + itemsCount);
+    }, [list, itemsCount, currentPage]);
+    function defineCSVCells(key, cell) {
+        if (typeof cell === 'string') {
+            let item = csvUpper && !csvExcludeUpper.includes(key) ? cell.toUpperCase() : cell;
+            item = normalize ? item.normalize('NFD').replace(/[\u0300-\u036f]/g, '') : item;
+            return removeQuotes ? `${item}` : `"${item}"`;
+        }
+        else if (typeof cell === 'object' && !Array.isArray(cell) && cell !== null) {
+            let strItemAsObject = transformArrayObjectInString(cell).slice(1, -1); // key: label (Ex.: jsNaturezaEvento)
+            let item = csvUpper && !csvExcludeUpper.includes(key) ? strItemAsObject.toUpperCase() : strItemAsObject;
+            item = normalize ? item.normalize('NFD').replace(/[\u0300-\u036f]/g, '') : item;
+            return removeQuotes ? `${item}` : `"${item}"`;
+        }
+        return cell;
+    }
+    // download file
+    const downloadCSV = (0, react_1.useCallback)((e, zip = false) => {
+        e.preventDefault();
+        if (list.length <= 0)
+            return;
+        const originalKeys = Object.keys(list[0]);
+        if (generateCsvZip && zip) {
+            const keys = originalKeys.filter((k) => !csvExcludeKeys.includes(k));
+            const header = keys.map((k) => (csvCustomKeyNames[k] ? csvCustomKeyNames[k] : k)).join(',') + '\n';
+            const zip = new jszip_1.default();
+            const obj = {};
+            list.forEach((x) => {
+                if (!obj[x[csvZipFileNamesKey]])
+                    obj[x[csvZipFileNamesKey]] = [];
+                obj[x[csvZipFileNamesKey]].push(x);
+            });
+            Object.keys(obj).forEach((objKey) => {
+                const values = [];
+                obj[objKey].forEach((x) => {
+                    let include = true;
+                    originalKeys.forEach((k) => {
+                        //verificar se pode incluir
+                        if (csvExcludeValidate(k, x[k])) {
+                            include = false;
+                        }
+                    });
+                    if (include) {
+                        const value = keys
+                            .map((k) => {
+                            if (typeof x[k] === 'string') {
+                                let item = csvUpper ? x[k].toUpperCase() : x[k];
+                                item = normalize ? item.normalize('NFD').replace(/[\u0300-\u036f]/g, '') : item;
+                                return removeQuotes ? `${item}` : `"${item}"`;
+                            }
+                            else if (typeof x[k] === 'object' && !Array.isArray(x[k]) && x[k] !== null) {
+                                let strItemAsObject = transformArrayObjectInString(x[k]).slice(1, -1); // k: label (Ex.: jsNaturezaEvento)
+                                let item = csvUpper && !csvExcludeUpper.includes(k) ? strItemAsObject.toUpperCase() : strItemAsObject;
+                                item = normalize ? item.normalize('NFD').replace(/[\u0300-\u036f]/g, '') : item;
+                                return removeQuotes ? `${item}` : `"${item}"`;
+                            }
+                            return x[k];
+                        })
+                            .join(',');
+                        values.push(value);
+                    }
+                });
+                const csvData = hideTitleCSV ? values.join('\n') : '\uFEFF' + header + values.join('\n');
+                if (values.length > 0)
+                    zip.file(`${objKey.normalize('NFD').replace(/[\u0300-\u036f]/g, '')}.csv`, csvData);
+            });
+            // // download
+            var link = window.document.createElement('a');
+            zip.generateAsync({ type: 'base64' }).then((base) => {
+                link.setAttribute('href', 'data:application/zip;base64,' + base);
+                link.setAttribute('download', `${csv === null || csv === void 0 ? void 0 : csv.fileName}.zip`);
+                link.click();
+            });
+        }
+        else {
+            let keys = originalKeys
+                .filter((k) => !csvExcludeKeysCSV.includes(k))
+                .map((k) => {
+                if (k === multipleDataPath) {
+                    return 'hrTermino';
+                }
+                return k;
+            });
+            if (multipleDataPath !== '') {
+                keys = ['dtInicio', 'hrInicio', ...keys];
+            }
+            const header = keys.map((k) => (csvCustomKeyNames[k] ? csvCustomKeyNames[k] : k)).join(',') + '\n';
+            const values = [];
+            list.forEach((x) => {
+                let include = true;
+                originalKeys.forEach((k) => {
+                    //verificar se pode incluir
+                    if (csvExcludeValidate(k, x[k])) {
+                        include = false;
+                    }
+                });
+                if (include) {
+                    const value = keys
+                        .map((k) => {
+                        if (k === 'dtInicio')
+                            return '{dtInicio}';
+                        else if (k === 'hrInicio')
+                            return '{hrInicio}';
+                        else if (k === 'hrTermino')
+                            return '{hrTermino}';
+                        else {
+                            if (typeof x[k] === 'string') {
+                                let item = csvUpper && !csvExcludeUpper.includes(k) ? x[k].toUpperCase() : x[k];
+                                item = normalize ? item.normalize('NFD').replace(/[\u0300-\u036f]/g, '') : item;
+                                return removeQuotes ? `${item}` : `"${item}"`;
+                            }
+                            else if (typeof x[k] === 'object' && !Array.isArray(x[k]) && x[k] !== null) {
+                                let strItemAsObject = transformArrayObjectInString(x[k]).slice(1, -1); // k: label (Ex.: jsNaturezaEvento)
+                                let item = csvUpper && !csvExcludeUpper.includes(k) ? strItemAsObject.toUpperCase() : strItemAsObject;
+                                item = normalize ? item.normalize('NFD').replace(/[\u0300-\u036f]/g, '') : item;
+                                return removeQuotes ? `${item}` : `"${item}"`;
+                            }
+                            return x[k];
+                        }
+                    })
+                        .join(',');
+                    if (multipleDataPath !== '') {
+                        const dates = x[multipleDataPath];
+                        if (dates) {
+                            ;
+                            dates.forEach((d) => {
+                                values.push(value.replace('{dtInicio}', d.dtInicio).replace('{hrInicio}', d.hrInicio).replace('{hrTermino}', d.hrTermino));
+                            });
+                        }
+                    }
+                    else {
+                        values.push(value);
+                    }
+                }
+            });
+            const csvData = header + values.join('\n');
+            // download
+            var link = window.document.createElement('a');
+            link.setAttribute('href', 'data:text/csv;charset=utf-8,%EF%BB%BF' + encodeURI(csvData));
+            link.setAttribute('download', `${csv === null || csv === void 0 ? void 0 : csv.fileName}.csv`);
+            link.click();
+        }
+    }, [list]);
+    function transformArrayObjectInString(o) {
+        let arrString = [];
+        if (typeof o === 'object' && !Array.isArray(o) && o !== null) {
+            for (let [key, value] of Object.entries(o)) {
+                if (typeof value === 'object' && !Array.isArray(value) && value !== null) {
+                    arrString.push(key + ': ' + transformArrayObjectInString(value));
+                }
+                else {
+                    if (value) {
+                        // Is true
+                        arrString.push(key);
+                    }
+                }
+            }
+        }
+        return '[' + arrString.join(' - ') + ']';
+    }
+    const downloadCSVAll = (0, react_1.useCallback)((e) => {
+        e.preventDefault();
+        if (list.length <= 0)
+            return;
+        const keys = Object.keys(list[0]).filter((k) => !csvExcludeKeysAll.includes(k));
+        const header = keys.join(',') + '\n';
+        const values = list
+            .map((x) => {
+            return keys
+                .map((k) => {
+                if (k === 'tbRa')
+                    return x[k]['NO_CIDADE'];
+                if (k === 'rlEventoData')
+                    return `${x[k][0]['DT_INICIO']} - ${x[k][0]['HR_INICIO']}`;
+                if (typeof x[k] === 'string') {
+                    let item = csvUpper && !csvExcludeUpper.includes(k) ? x[k].toUpperCase() : x[k];
+                    item = normalize ? item.normalize('NFD').replace(/[\u0300-\u036f]/g, '') : item;
+                    return removeQuotes ? `${item}` : `"${item}"`;
+                }
+                else if (typeof x[k] === 'object' && !Array.isArray(x[k]) && x[k] !== null) {
+                    let strItemAsObject = transformArrayObjectInString(x[k]).slice(1, -1); // k: label (Ex.: jsNaturezaEvento)
+                    let item = csvUpper && !csvExcludeUpper.includes(k) ? strItemAsObject.toUpperCase() : strItemAsObject;
+                    item = normalize ? item.normalize('NFD').replace(/[\u0300-\u036f]/g, '') : item;
+                    return removeQuotes ? `${item}` : `"${item}"`;
+                }
+                return x[k];
+            })
+                .join(',');
+        })
+            .join('\n');
+        const csvData = header + values;
+        // download
+        var link = window.document.createElement('a');
+        link.setAttribute('href', 'data:text/csv;charset=utf-8,%EF%BB%BF' + encodeURI(csvData));
+        link.setAttribute('download', `${csv === null || csv === void 0 ? void 0 : csv.fileName}.csv`);
+        link.click();
+    }, [list]);
+    function expandAll() {
+        let obj = {};
+        for (let i = 0; i < itemCount; i++) {
+            obj[i] = !isExpandAll;
+        }
+        setShowExpandObjOnExited(obj);
+        setExpandObj(obj);
+        isExpandAll = !isExpandAll;
+    }
+    function reset() {
+        setList(startData);
+        setListClone(startData);
+        setPagCount(getCount(startData));
+        setCurrentPage(0);
+        setListPage(1);
+        localStorage.removeItem(localTableName);
+        setFilterKey(new Date().getTime().toString());
+    }
+    function filtrar(filterData) {
+        if (!startData)
+            return;
+        let currentData = JSON.parse(JSON.stringify(startData));
+        filterData
+            .filter((dt) => dt.value || (dt.operator === 'entre' && (dt.value || dt.value2)))
+            .forEach((dt) => {
+            let filteredData = [];
+            switch (dt.type) {
+                case 'number':
+                    switch (dt.operator) {
+                        case 'igual':
+                            currentData.forEach((cd) => {
+                                const value = Number((0, lodash_get_1.default)(cd, dt.keyName, ''));
+                                if (value === Number(dt.value)) {
+                                    filteredData.push(cd);
+                                }
+                            });
+                            break;
+                        case 'maior que':
+                            currentData.forEach((cd) => {
+                                const value = Number((0, lodash_get_1.default)(cd, dt.keyName, ''));
+                                if (value > Number(dt.value)) {
+                                    filteredData.push(cd);
+                                }
+                            });
+                            break;
+                        case 'menor que':
+                            currentData.forEach((cd) => {
+                                const value = Number((0, lodash_get_1.default)(cd, dt.keyName, ''));
+                                if (value < Number(dt.value)) {
+                                    filteredData.push(cd);
+                                }
+                            });
+                            break;
+                    }
+                    break;
+                case 'string':
+                    console.log('ata: ', dt.operator);
+                    switch (dt.operator) {
+                        case 'igual':
+                            currentData.forEach((cd) => {
+                                const value = (0, lodash_get_1.default)(cd, dt.keyName, '');
+                                if (dt.useList) {
+                                    if (formatarString(value) === formatarString(dt.value.id)) {
+                                        filteredData.push(cd);
+                                    }
+                                }
+                                else {
+                                    if (formatarString(value) === formatarString(dt.value)) {
+                                        filteredData.push(cd);
+                                    }
+                                }
+                            });
+                            break;
+                        case 'contem':
+                            currentData.forEach((cd) => {
+                                const value = (0, lodash_get_1.default)(cd, dt.keyName, '');
+                                if (!value)
+                                    return;
+                                if (dt.useList) {
+                                    if (formatarString(value).includes(formatarString(dt.value.id))) {
+                                        filteredData.push(cd);
+                                    }
+                                }
+                                else {
+                                    if (formatarString(value).includes(formatarString(dt.value))) {
+                                        filteredData.push(cd);
+                                    }
+                                }
+                            });
+                            break;
+                        case 'tem um dos':
+                            currentData.forEach((cd) => {
+                                const value = (0, lodash_get_1.default)(cd, dt.keyName, '');
+                                if (!value)
+                                    return;
+                                if (dt.value.map((x) => formatarString(x.id)).includes(formatarString(value))) {
+                                    filteredData.push(cd);
+                                }
+                            });
+                            break;
+                    }
+                    break;
+                case 'date':
+                    switch (dt.operator) {
+                        case 'data exata':
+                            currentData.forEach((cd) => {
+                                const value = (0, dayjs_1.default)((0, lodash_get_1.default)(cd, dt.keyName, ''), 'DD/MM/YYYY');
+                                if (!value.isValid())
+                                    return;
+                                if (value.isSame((0, dayjs_1.default)(dt.value, 'DD/MM/YYYY'))) {
+                                    filteredData.push(cd);
+                                }
+                            });
+                            break;
+                        case 'entre':
+                            const dateA = dt.value ? (0, dayjs_1.default)(dt.value, 'DD/MM/YYYY') : (0, dayjs_1.default)('01/01/2000', 'DD/MM/YYYY');
+                            const dateB = dt.value2 ? (0, dayjs_1.default)(dt.value2, 'DD/MM/YYYY') : (0, dayjs_1.default)('31/12/2030', 'DD/MM/YYYY');
+                            currentData.forEach((cd) => {
+                                const value = (0, dayjs_1.default)((0, lodash_get_1.default)(cd, dt.keyName, ''), 'DD/MM/YYYY');
+                                if ((value.isAfter(dateA) || value.isSame(dateA)) && (value.isBefore(dateB) || value.isSame(dateB))) {
+                                    filteredData.push(cd);
+                                }
+                            });
+                            break;
+                    }
+                    break;
+                case 'dates':
+                    switch (dt.operator) {
+                        case 'data inicio':
+                            currentData.forEach((cd) => {
+                                var _a;
+                                const dates = (_a = filtersFuncData[dt.customFunc]((0, lodash_get_1.default)(cd, dt.keyName, ''))) !== null && _a !== void 0 ? _a : [];
+                                if (dates.length <= 0)
+                                    return;
+                                var inicioDate = dates[0];
+                                var inicioValue = (0, dayjs_1.default)(inicioDate, 'DD/MM/YYYY');
+                                if (inicioValue.isSame((0, dayjs_1.default)(dt.value, 'DD/MM/YYYY'))) {
+                                    filteredData.push(cd);
+                                }
+                            });
+                            break;
+                        case 'data fim':
+                            currentData.forEach((cd) => {
+                                var _a;
+                                const dates = (_a = filtersFuncData[dt.customFunc]((0, lodash_get_1.default)(cd, dt.keyName, ''))) !== null && _a !== void 0 ? _a : [];
+                                if (dates.length <= 0)
+                                    return;
+                                var fimDate = dates[dates.length - 1];
+                                var fimValue = (0, dayjs_1.default)(fimDate, 'DD/MM/YYYY');
+                                if (fimValue.isSame((0, dayjs_1.default)(dt.value, 'DD/MM/YYYY'))) {
+                                    filteredData.push(cd);
+                                }
+                            });
+                            break;
+                        case 'tem a data':
+                            currentData.forEach((cd) => {
+                                var _a;
+                                const dates = (_a = filtersFuncData[dt.customFunc]((0, lodash_get_1.default)(cd, dt.keyName, ''))) !== null && _a !== void 0 ? _a : [];
+                                if (dates.includes(dt.value)) {
+                                    filteredData.push(cd);
+                                }
+                            });
+                            break;
+                        case 'entre':
+                            const dateA = dt.value ? (0, dayjs_1.default)(dt.value, 'DD/MM/YYYY') : (0, dayjs_1.default)('01/01/2000', 'DD/MM/YYYY');
+                            const dateB = dt.value2 ? (0, dayjs_1.default)(dt.value2, 'DD/MM/YYYY') : (0, dayjs_1.default)('31/12/2030', 'DD/MM/YYYY');
+                            currentData.forEach((cd) => {
+                                var _a;
+                                const dates = (_a = filtersFuncData[dt.customFunc]((0, lodash_get_1.default)(cd, dt.keyName, ''))) !== null && _a !== void 0 ? _a : [];
+                                let isBetween = false;
+                                dates.forEach((dtStr) => {
+                                    if (isBetween)
+                                        return;
+                                    const dt = (0, dayjs_1.default)(dtStr, 'DD/MM/YYYY');
+                                    if (!dt.isValid())
+                                        return;
+                                    if ((dt.isAfter(dateA) || dt.isSame(dateA)) && (dt.isBefore(dateB) || dt.isSame(dateB))) {
+                                        isBetween = true;
+                                    }
+                                });
+                                if (isBetween) {
+                                    filteredData.push(cd);
+                                }
+                            });
+                            break;
+                    }
+                    break;
+            }
+            currentData = filteredData;
+        });
+        setList(currentData);
+        setPagCount(getCount(currentData));
+        setCurrentPage(0);
+        setListPage(1);
+        localStorage.setItem(localTableName, JSON.stringify(filterData));
+        setListClone(currentData);
+    }
+    function ordenar(order) {
+        let oldList = [...list];
+        oldList.sort((a, b) => {
+            const aValue = order.type === 'string' ? (0, lodash_get_1.default)(a, order.key, '') : Number((0, lodash_get_1.default)(a, order.key, 0));
+            const bValue = order.type === 'string' ? (0, lodash_get_1.default)(b, order.key, '') : Number((0, lodash_get_1.default)(b, order.key, 0));
+            if (orderAsc) {
+                if (aValue < bValue)
+                    return -1;
+                if (aValue > bValue)
+                    return 1;
+            }
+            else {
+                if (aValue > bValue)
+                    return -1;
+                if (aValue < bValue)
+                    return 1;
+            }
+            return 0;
+        });
+        orderAsc = !orderAsc;
+        setList(oldList);
+    }
+    // effect usado quando for mostrar "VER MAIS" e "VER MENOS"
+    (0, react_1.useEffect)(() => {
+        const start = currentPage * itemsCount;
+        const newList = list.slice(start, start + itemsCount);
+        let obj = {};
+        newList.forEach((x, index) => {
+            columns.forEach((c) => {
+                var _a;
+                obj[index] = obj[index] === true ? true : ((_a = (0, lodash_get_1.default)(x, c === null || c === void 0 ? void 0 : c.keyName, '')) !== null && _a !== void 0 ? _a : 'Não Informado').toString().length >= expandTextMaxLength;
+            });
+        });
+        setShowExpandObj(obj);
+    }, [list, itemsCount, currentPage]);
+    (0, react_1.useEffect)(() => {
+        console.log(filterContainer.current);
+    }, [filterContainer.current]);
+    if (error)
+        return (react_1.default.createElement(material_1.Box, { bgcolor: '#fff2c8', color: '#3e3129', padding: 2, marginX: 2, borderRadius: 4 },
+            react_1.default.createElement(Typography_1.default, { fontSize: 24, textAlign: 'center', fontFamily: 'Inter' },
+                error.status === 403 && 'Acesso negado',
+                error.status === 500 && (react_1.default.createElement(material_1.Box, { fontWeight: 500, textAlign: 'center' },
+                    react_1.default.createElement(icons_material_1.ReportProblemRounded, { sx: { transform: 'scale(2)', marginY: 1, fill: '#3e3129' } }),
+                    react_1.default.createElement(material_1.Box, null, customErrorMsg ? (customErrorMsg) : (react_1.default.createElement(react_1.default.Fragment, null,
+                        "N\u00E3o foi poss\u00EDvel se conectar ao servidor no momento. Por favor, aguarde alguns instantes e tente de novo.",
+                        react_1.default.createElement("br", null),
+                        react_1.default.createElement("br", null),
+                        "Caso precise de ajuda, entre em contato pelo email: ",
+                        react_1.default.createElement("strong", null, "cdes@ssp.df.gov.br")))))))));
+    if (isLoading)
+        return (react_1.default.createElement(material_1.Stack, { sx: { height: '100%', width: '100%' }, justifyContent: 'center', alignItems: 'center' },
+            react_1.default.createElement(material_1.Box, { width: '100%' },
+                react_1.default.createElement(material_1.Stack, { direction: 'row', justifyContent: 'center', alignItems: 'center', justifyItems: 'center', spacing: 2, marginY: 4 },
+                    react_1.default.createElement(icons_material_1.PendingRounded, { sx: { fill: '#5e5e5e' } }),
+                    react_1.default.createElement(Typography_1.default, { fontWeight: 600, fontSize: 20, textTransform: 'capitalize', textAlign: 'center', color: '#5e5e5e' },
+                        "Carregando ",
+                        tableName)),
+                react_1.default.createElement(material_1.LinearProgress, { color: 'inherit' }),
+                Array(10)
+                    .fill('')
+                    .map((x) => (react_1.default.createElement(material_1.Stack, { direction: {
+                        xs: 'column',
+                        md: 'row',
+                    }, spacing: {
+                        xs: 3,
+                        md: 1,
+                    }, justifyContent: 'space-between', paddingY: 8, borderBottom: '1px solid #cacaca' }, Array(7)
+                    .fill(0)
+                    .map((y) => (react_1.default.createElement(material_1.Box, null,
+                    react_1.default.createElement(material_1.Skeleton, { width: 60 }),
+                    react_1.default.createElement(material_1.Skeleton, { width: 120 }))))))))));
+    if (!userLoaded && useKC)
+        return react_1.default.createElement(material_1.LinearProgress, null);
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(material_1.Box, Object.assign({ marginX: isSmall ? customMarginMobile : customMargin, bgcolor: 'white', p: 2, borderRadius: 6 }, customTableStyle),
+            react_1.default.createElement(material_1.Stack, { spacing: 1.5, direction: { xs: 'column', md: 'row' } },
+                react_1.default.createElement(material_1.Stack, { spacing: 1.5, direction: { xs: 'column', md: 'row' }, height: { md: '40px', xs: 'inherit' }, width: '100%' },
+                    react_1.default.createElement(TextField_1.default, { InputProps: {
+                            startAdornment: react_1.default.createElement(Search_1.default, { sx: { marginRight: 1, fill: '#c0c0c0' } }),
+                            sx: {
+                                '.MuiOutlinedInput-notchedOutline': { border: 'none' },
+                            },
+                        }, sx: {
+                            border: 'solid 1px #CBD5E1',
+                            backgroundColor: '#F8FAFC',
+                            borderRadius: '50px',
+                            maxWidth: '600px',
+                        }, size: 'small', onChange: onInputChange, fullWidth: true, placeholder: `Pesquisar ${tableName}` }),
+                    filters.length > 0 && (react_1.default.createElement(material_1.Button, { startIcon: react_1.default.createElement(icons_material_1.FilterAlt, null), variant: 'contained', onClick: (e) => Modal_1.MODAL.open(react_1.default.createElement(CriarFiltro, { key: filterKey, reset: reset, filtrar: filtrar, baseFilters: [...filters], filters: localStorage.getItem(localTableName) ? JSON.parse(localStorage.getItem(localTableName)) : [...filters] })), sx: {
+                            borderRadius: 3,
+                            paddingX: '24px',
+                            paddingY: '8px',
+                            backgroundColor: '#208FE8',
+                            textTransform: 'capitalize',
+                        } },
+                        react_1.default.createElement(material_1.Stack, { direction: 'row', borderRadius: 5, padding: 0 },
+                            react_1.default.createElement("span", null, "Filtrar")))),
+                    react_1.default.createElement(material_1.Stack, { direction: 'row', spacing: 1 },
+                        react_1.default.createElement(CustomMenu_1.default, { data: orderBy.map((x) => ({
+                                name: x.label,
+                                onClick: () => ordenar(x),
+                            })), btProps: {
+                                startIcon: react_1.default.createElement(icons_material_1.KeyboardArrowDown, null),
+                                fullWidth: true,
+                            } }, "Ordenar"),
+                        react_1.default.createElement(material_1.Button, { variant: 'contained', fullWidth: true, startIcon: isExpandAll ? react_1.default.createElement(icons_material_1.KeyboardArrowUp, null) : react_1.default.createElement(icons_material_1.KeyboardArrowDown, null), sx: {
+                                backgroundColor: '#637082',
+                                ':hover': {
+                                    backgroundColor: '#3c4757',
+                                },
+                                textTransform: 'capitalize',
+                                borderRadius: 3,
+                                padding: {
+                                    md: '0px 8px',
+                                },
+                            }, onClick: expandAll }, isExpandAll ? 'Recolher' : 'Expandir'))),
+                react_1.default.createElement(material_1.Stack, { alignItems: 'end', width: { xs: '100%', md: '20%' }, direction: { xs: 'row', md: 'column' }, spacing: { xs: 1, md: 0 } },
+                    react_1.default.createElement(Typography_1.default, { fontWeight: 600, textAlign: 'end' },
+                        "Registro de ",
+                        tableName,
+                        "s"),
+                    react_1.default.createElement(material_1.Stack, { justifyContent: 'center' },
+                        react_1.default.createElement(Typography_1.default, null,
+                            "Exibindo ",
+                            currentPage * itemsCount + 1,
+                            "-",
+                            currentPage * itemsCount + 1 + getMaxItems().length - 1,
+                            " de ",
+                            list.length)))),
+            localStorage.getItem(localTableName) && (react_1.default.createElement(material_1.Box, { display: 'inline-flex', flexWrap: 'wrap', padding: 0.5, borderRadius: 4, marginBottom: 1 }, JSON.parse((_a = localStorage.getItem(localTableName)) !== null && _a !== void 0 ? _a : '[]')
+                .filter((x) => x.value || (x.operator === 'entre' && (x.value || x.value2)))
+                .map((x) => (react_1.default.createElement(material_1.Stack, { direction: 'row', spacing: 1, bgcolor: '#4e85c1', color: 'white', width: 'fit-content', paddingY: 0.5, borderRadius: 2, paddingX: 1, m: 0.5 },
+                react_1.default.createElement(Typography_1.default, { fontWeight: 700 }, x.label),
+                react_1.default.createElement(Typography_1.default, { fontStyle: 'italic' }, x.operator),
+                react_1.default.createElement(Typography_1.default, { bgcolor: 'white', borderRadius: 2, paddingX: 1, color: 'black' }, Array.isArray(x.value)
+                    ? x.value.map((x) => x.label).join(' - ')
+                    : typeof x.value === 'object'
+                        ? x.value.label
+                        : x.operator === 'entre'
+                            ? `${x.value ? x.value : 'Antes'} e ${x.value2 ? x.value2 : 'Depois'}`
+                            : x.value.toString()),
+                react_1.default.createElement(material_1.IconButton, { onClick: (e) => {
+                        var _a;
+                        let currentValue = JSON.parse((_a = localStorage.getItem(localTableName)) !== null && _a !== void 0 ? _a : '[]');
+                        currentValue = currentValue.map((item) => {
+                            if (item.label === x.label) {
+                                return Object.assign(Object.assign(Object.assign({}, item), { value: '' }), (item.value2 ? { value2: '' } : {}));
+                            }
+                            return item;
+                        });
+                        filtrar(currentValue);
+                    }, size: 'small', sx: {
+                        padding: 0,
+                    } },
+                    react_1.default.createElement(Clear_1.default, { sx: {
+                            fill: 'white',
+                        } }))))))),
+            react_1.default.createElement(material_1.Stack, { spacing: 0.2 }, getMaxItems().length <= 0 ? (react_1.default.createElement(material_1.Stack, { sx: { backgroundColor: '#E2E8F0', padding: 2, marginX: { xs: 2, md: 0 } }, justifyContent: 'center', alignItems: 'center' },
+                react_1.default.createElement(Typography_1.default, { fontSize: 21, fontFamily: 'Inter', fontWeight: 600, textAlign: 'center' }, user ? emptyMsg.user : emptyMsg.public))) : (getMaxItems().map((x, index) => (react_1.default.createElement(material_1.Paper, { key: index, sx: {
+                    padding: 0.5,
+                    backgroundColor: index % 2 === 0 ? '#F8FAFC' : 'white',
+                    paddingTop: 2,
+                    borderTop: 'solid 1.5px #E2E8F0',
+                    position: 'relative',
+                }, elevation: 0 },
+                react_1.default.createElement(Grid_1.default, { container: true, spacing: isSmall ? 2 : 0, paddingX: 2, rowSpacing: 2 },
+                    columns.map((c) => {
+                        var _a, _b;
+                        return (react_1.default.createElement(Grid_1.default, { key: String(c === null || c === void 0 ? void 0 : c.keyName) + index, item: true, xs: 12, md: lg ? (12 / columnSize) * (!!c.size ? c.size : 1) : mediaQueryLG ? mediaQueryLG.all : (12 / columnSize) * (!!c.size ? c.size : 1), sx: {
+                                overflow: 'hidden',
+                            } },
+                            react_1.default.createElement(material_1.Box, { sx: { width: 'max-content', paddingX: 1 } },
+                                react_1.default.createElement(Typography_1.default, { fontSize: 16, fontWeight: 700, color: '#1E293B', fontFamily: 'Inter' }, c.title)),
+                            react_1.default.createElement(material_1.Box, { paddingLeft: 1, position: 'relative' },
+                                react_1.default.createElement(material_1.Collapse, { in: expandObj[index] === true, collapsedSize: collapsedSize, onExited: (e) => setShowExpandObjOnExited((s) => (Object.assign(Object.assign({}, s), { [index]: false }))) },
+                                    react_1.default.createElement(material_1.Box, { sx: {
+                                            wordWrap: 'break-word',
+                                            color: '#1E293B',
+                                            fontSize: 16,
+                                        }, fontFamily: 'Inter' },
+                                        react_1.default.createElement(material_1.Box, null, c.customComponent ? (c.customComponent((0, lodash_get_1.default)(x, c.keyName), x)) : (react_1.default.createElement(material_1.Box, { color: 'transparent', sx: { pointerEvents: 'none', userSelect: 'none' } }, (0, lodash_get_1.default)(x, c.keyName, '')))),
+                                        react_1.default.createElement(material_1.Box, { position: 'absolute', top: 0 }, c.customComponent ? (c.customComponent((0, lodash_get_1.default)(x, c.keyName), x)) : (react_1.default.createElement(react_1.default.Fragment, null, showExpandObjOnExited[index] ? ((0, lodash_get_1.default)(x, c === null || c === void 0 ? void 0 : c.keyName, '')) : ((_a = (0, lodash_get_1.default)(x, c === null || c === void 0 ? void 0 : c.keyName, '')) !== null && _a !== void 0 ? _a : '').toString().length >= expandTextMaxLength ? (react_1.default.createElement(react_1.default.Fragment, null, ((_b = (0, lodash_get_1.default)(x, c === null || c === void 0 ? void 0 : c.keyName, '')) !== null && _b !== void 0 ? _b : '').toString().substring(0, expandTextMaxLength) + '...')) : ((0, lodash_get_1.default)(x, c === null || c === void 0 ? void 0 : c.keyName, ''))))))))));
+                    }),
+                    react_1.default.createElement(Grid_1.default, { item: true, xs: 12, md: lg ? 12 / columnSize : mediaQueryLG ? mediaQueryLG.action : 12 / columnSize },
+                        react_1.default.createElement(material_1.Stack, { direction: 'row', alignItems: 'center', justifyContent: isSmall ? 'start' : 'flex-end', sx: { height: '100%', paddingBottom: isSmall ? 2 : 0 } }, action(x))),
+                    showExpandObj[index] && (react_1.default.createElement(material_1.Stack, { direction: 'row', justifyContent: 'flex-end', bottom: 0, width: '100%' },
+                        react_1.default.createElement(material_1.Button, { onClick: (e) => {
+                                setExpandObj((s) => (Object.assign(Object.assign({}, s), { [index]: !s[index] })));
+                                setShowExpandObjOnExited((s) => (Object.assign(Object.assign({}, s), { [index]: true })));
+                            }, sx: {
+                                padding: 0,
+                                color: '#637082',
+                                textTransform: 'capitalize',
+                            }, startIcon: expandObj[index] ? react_1.default.createElement(icons_material_1.ExpandLess, null) : react_1.default.createElement(icons_material_1.ExpandMore, null) }, expandObj[index] ? 'Ver Menos' : 'Ver Mais'))))))))),
+            getMaxItems().length > 0 && (react_1.default.createElement(material_1.Stack, { padding: 1, direction: {
+                    xs: 'column',
+                    md: 'row',
+                }, spacing: {
+                    xs: 2,
+                    md: 0,
+                }, justifyContent: 'space-between', alignItems: 'center' }, csv && (react_1.default.createElement(material_1.Stack, { direction: {
+                    xs: 'column',
+                    md: 'row',
+                }, justifyContent: 'flex-end', spacing: 1 },
+                csvWithoutZip && (react_1.default.createElement(material_1.Button, { startIcon: react_1.default.createElement(FileDownload_1.default, null), variant: 'contained', size: 'small', onClick: downloadCSV, sx: { backgroundColor: '#5a88b0', marginRight: { xs: 2, md: 0 }, width: { xs: '100%', md: 'fit-content' } } }, csvNoZipText)),
+                csvShowAllButton && (react_1.default.createElement(material_1.Button, { startIcon: react_1.default.createElement(FileDownload_1.default, null), variant: 'contained', size: 'small', onClick: downloadCSVAll, sx: { backgroundColor: '#64748B', marginRight: { xs: 2, md: 0 }, width: { xs: '100%', md: 'fit-content' } } }, csvAllButtonTitle)),
+                react_1.default.createElement(material_1.Button, { startIcon: react_1.default.createElement(FileDownload_1.default, null), variant: 'contained', size: 'small', onClick: (e) => downloadCSV(e, true), sx: { backgroundColor: '#22C55E', marginRight: { xs: 2, md: 0 }, width: { xs: '100%', md: 'fit-content' } } }, csvButtonTitle)))))),
+        react_1.default.createElement(material_1.Stack, { direction: 'row', justifyContent: 'center', paddingY: 1, paddingTop: 2 },
+            react_1.default.createElement(material_1.Stack, { direction: 'row', justifyContent: 'center', alignItems: 'center', spacing: 2 },
+                react_1.default.createElement(material_1.Button, { onClick: (e) => setListPage((s) => {
+                        if (s > 1) {
+                            return s - 1;
+                        }
+                        return 1;
+                    }), sx: { bgcolor: 'white', borderRadius: '50px', height: '40px', width: '40px', minWidth: 0, border: 'solid 1px #E2E8F0' } },
+                    react_1.default.createElement(NavigateNextRounded_1.default, { sx: { transform: 'scale(1.5) scaleX(-1)' } })),
+                react_1.default.createElement(Pagination_1.default, { renderItem: (item) => {
+                        if (item.type === 'page')
+                            return (react_1.default.createElement(material_1.Button, { onClick: item.onClick, sx: Object.assign(Object.assign({ fontWeight: 600 }, (item.selected
+                                    ? {
+                                        bgcolor: '#33B55D',
+                                        color: 'white',
+                                    }
+                                    : {
+                                        color: '#1E293B',
+                                    })), { borderRadius: '100%', padding: 0, margin: 0, minWidth: 0, width: '40px', height: '40px', marginX: 0.25 }) }, item.page));
+                        if (!['next', 'previous', 'page'].includes(item.type))
+                            return react_1.default.createElement(material_1.PaginationItem, Object.assign({}, item));
+                    }, count: paginationCount, siblingCount: isSmall ? 0 : 6, size: 'large', onChange: onPaginationChange, page: listPage, shape: 'circular', variant: 'outlined', sx: {
+                        '.MuiPagination-ul': {
+                            backgroundColor: 'white',
+                            border: 'solid 1px #E2E8F0',
+                            borderRadius: '50px',
+                            paddingX: 0.25,
+                            paddingY: 0.5,
+                        },
+                    } }),
+                react_1.default.createElement(material_1.Button, { onClick: (e) => setListPage((s) => {
+                        if (s < paginationCount) {
+                            return s + 1;
+                        }
+                        return paginationCount;
+                    }), sx: { bgcolor: 'white', borderRadius: '50px', height: '40px', width: '40px', minWidth: 0, border: 'solid 1px #E2E8F0' } },
+                    react_1.default.createElement(NavigateNextRounded_1.default, { sx: { transform: 'scale(1.5)' } }))))));
+}
+exports.GenericTable = GenericTable;
+function CriarFiltro({ filters, baseFilters, filtrar, reset }) {
+    const [data, setData] = (0, react_1.useState)(filters);
+    const [resetFields, setResetFields] = (0, react_1.useState)(false);
+    function addRule(filter) {
+        setData((dt) => {
+            return [...dt, filter];
+        });
+    }
+    const [anchorEl, setAnchorEl] = react_1.default.useState(null);
+    const open = Boolean(anchorEl);
+    const handleClick = (event) => {
+        setAnchorEl(event.currentTarget);
+    };
+    const handleClose = () => {
+        setAnchorEl(null);
+    };
+    return (react_1.default.createElement(material_1.Box, { width: {
+            xs: 'inherit',
+            md: 850,
+        } },
+        react_1.default.createElement(material_1.Menu, { open: open, onClose: handleClose, anchorEl: anchorEl }, baseFilters.map((x) => (react_1.default.createElement(material_1.MenuItem, { onClick: (e) => {
+                addRule(x);
+                setAnchorEl(null);
+            } }, x.label)))),
+        react_1.default.createElement(material_1.Stack, { direction: 'row', justifyContent: 'space-between' },
+            react_1.default.createElement(Typography_1.default, { fontWeight: 700, fontSize: 18 }, "Filtrar"),
+            react_1.default.createElement(material_1.Button, { startIcon: react_1.default.createElement(icons_material_1.Refresh, null), sx: {
+                    textTransform: 'capitalize',
+                }, onClick: (e) => {
+                    reset();
+                    Modal_1.MODAL.close();
+                } }, "Limpar")),
+        react_1.default.createElement(material_1.Box, { marginBottom: 1 },
+            react_1.default.createElement(material_1.Alert, { severity: 'warning' }, "Preencha apenas os campos que deseja filtrar.")),
+        react_1.default.createElement(material_1.Stack, null, resetFields ? (data.map((d, idx) => (react_1.default.createElement(FilterRow, { filterValue: d, setReset: setResetFields, idx: idx, setDt: (valueData) => {
+                setData((dt) => {
+                    let arr = [...dt];
+                    arr[idx] = valueData;
+                    return arr;
+                });
+            }, removeDt: () => {
+                setData((dt) => {
+                    let arr = [...dt];
+                    arr.splice(idx, 1);
+                    return arr;
+                });
+            } })))) : (react_1.default.createElement(material_1.Box, null, data.map((d, idx) => (react_1.default.createElement(FilterRow, { filterValue: d, setReset: setResetFields, idx: idx, setDt: (valueData) => {
+                setData((dt) => {
+                    let arr = [...dt];
+                    arr[idx] = valueData;
+                    return arr;
+                });
+            }, removeDt: () => {
+                setData((dt) => {
+                    let arr = [...dt];
+                    arr.splice(idx, 1);
+                    return arr;
+                });
+            } })))))),
+        react_1.default.createElement(material_1.Stack, { direction: 'row', justifyContent: 'flex-end', marginTop: 1 },
+            react_1.default.createElement(material_1.Button, { variant: 'contained', color: 'success', startIcon: react_1.default.createElement(Search_1.default, null), sx: {
+                    textTransform: 'capitalize',
+                }, onClick: (e) => {
+                    filtrar(data);
+                    Modal_1.MODAL.close();
+                } }, "Filtrar"))));
+}
+function FilterRow({ filterValue, setDt, removeDt, idx, setReset, }) {
+    const [currentOperator, setCurrentOperator] = (0, react_1.useState)(filterValue.operator);
+    const [data, setData] = (0, react_1.useState)(filterValue);
+    const theme = (0, material_1.useTheme)();
+    const isSmall = (0, material_1.useMediaQuery)(theme.breakpoints.only('xs'));
+    (0, react_1.useEffect)(() => {
+        setDt(data);
+    }, [data]);
+    return (react_1.default.createElement(material_1.Stack, { direction: 'row', alignItems: 'end', spacing: 1, width: '100%', bgcolor: idx % 2 === 0 ? '#ededed' : 'inherit', padding: 0.5, borderRadius: 2 },
+        !isSmall && (react_1.default.createElement(Typography_1.default, { width: '100%', alignContent: 'center', fontWeight: 600, color: '#323232' }, filterValue.label)),
+        react_1.default.createElement(material_1.FormControl, { sx: {
+                width: '100%',
+            } },
+            isSmall && react_1.default.createElement(Typography_1.default, null, filterValue.label),
+            react_1.default.createElement(material_1.Select, { onChange: (e) => {
+                    const value = e.target.value;
+                    setData((obj) => (Object.assign(Object.assign({}, obj), { operator: value, value: '' })));
+                    setCurrentOperator(value);
+                }, defaultValue: currentOperator, size: 'small', sx: {
+                    bgcolor: 'white',
+                }, fullWidth: true }, filterValue.operators.map((x) => (react_1.default.createElement(material_1.MenuItem, { value: x }, x))))),
+        react_1.default.createElement(FilterField, { filterValue: filterValue, operator: data.operator, onChange: (value, type = 'value') => {
+                setData((obj) => (Object.assign(Object.assign({}, obj), { [type]: value })));
+            } })));
+}
+function FilterField({ filterValue, operator, onChange }) {
+    switch (filterValue.type) {
+        case 'number':
+            return (react_1.default.createElement(TextField_1.default, { type: 'number', size: 'small', placeholder: 'Valor', defaultValue: filterValue.value, onChange: (e) => {
+                    onChange(e.target.value);
+                }, sx: {
+                    bgcolor: 'white',
+                }, fullWidth: true }));
+        case 'string':
+            if (filterValue.useList) {
+                switch (operator) {
+                    case 'tem um dos':
+                        return (react_1.default.createElement(material_1.Autocomplete, { multiple: true, id: 'tags-standard', onChange: (e, value) => {
+                                if (value.length <= 0) {
+                                    onChange('');
+                                    return;
+                                }
+                                onChange(value);
+                            }, options: filterValue.useList, defaultValue: Array.isArray(filterValue.value) ? filterValue.value : [], renderInput: (params) => react_1.default.createElement(TextField_1.default, Object.assign({}, params, { variant: 'standard', placeholder: 'Escolha os valores', fullWidth: true })), fullWidth: true }));
+                    case 'contem':
+                    case 'igual':
+                        return (react_1.default.createElement(material_1.Box, { width: '100%' },
+                            react_1.default.createElement(material_1.Autocomplete, { options: filterValue.useList, onChange: (e, value) => {
+                                    onChange(value);
+                                }, defaultValue: typeof filterValue.value === 'object' ? filterValue.value : undefined, isOptionEqualToValue: (option, value) => option.label === value.label, renderInput: (params) => (react_1.default.createElement(TextField_1.default, Object.assign({}, params, { size: 'small', placeholder: 'Escolha um valor', fullWidth: true, sx: {
+                                        bgcolor: 'white',
+                                    } }))), fullWidth: true })));
+                }
+            }
+            return (react_1.default.createElement(TextField_1.default, { size: 'small', placeholder: 'Valor', defaultValue: filterValue.value, onChange: (e) => {
+                    onChange(e.target.value);
+                }, sx: {
+                    bgcolor: 'white',
+                }, fullWidth: true }));
+        case 'date':
+        case 'dates':
+            switch (operator) {
+                case 'data exata':
+                case 'data fim':
+                case 'data inicio':
+                case 'tem a data':
+                    return (react_1.default.createElement(x_date_pickers_1.LocalizationProvider, { adapterLocale: 'pt-br', dateAdapter: AdapterDayjs_1.AdapterDayjs },
+                        react_1.default.createElement(x_date_pickers_1.DatePicker, { format: 'DD/MM/YYYY', onChange: (dt) => {
+                                onChange(dt.isValid() ? dt.format('DD/MM/YYYY') : '');
+                            }, defaultValue: filterValue.value ? (0, dayjs_1.default)(filterValue.value, 'DD/MM/YYYY') : undefined, sx: {
+                                div: {
+                                    input: {
+                                        paddingX: 2,
+                                        paddingY: 1.05,
+                                    },
+                                },
+                                width: '100%',
+                                bgcolor: 'white',
+                            }, inputRef: (params) => react_1.default.createElement(TextField_1.default, Object.assign({}, params, { size: 'small', fullWidth: true })) })));
+                case 'entre':
+                    return (react_1.default.createElement(x_date_pickers_1.LocalizationProvider, { adapterLocale: 'pt-br', dateAdapter: AdapterDayjs_1.AdapterDayjs },
+                        react_1.default.createElement(x_date_pickers_1.DatePicker, { format: 'DD/MM/YYYY', onChange: (dt) => {
+                                onChange(dt.isValid() ? dt.format('DD/MM/YYYY') : '');
+                            }, defaultValue: filterValue.value ? (0, dayjs_1.default)(filterValue.value, 'DD/MM/YYYY') : undefined, sx: {
+                                div: {
+                                    input: {
+                                        paddingX: 2,
+                                        paddingY: 1.05,
+                                    },
+                                },
+                                width: '100%',
+                                bgcolor: 'white',
+                            }, inputRef: (params) => react_1.default.createElement(TextField_1.default, Object.assign({}, params, { size: 'small', fullWidth: true })) }),
+                        react_1.default.createElement(x_date_pickers_1.DatePicker, { format: 'DD/MM/YYYY', onChange: (dt) => {
+                                onChange(dt.isValid() ? dt.format('DD/MM/YYYY') : '', 'value2');
+                            }, defaultValue: filterValue.value2 ? (0, dayjs_1.default)(filterValue.value2, 'DD/MM/YYYY') : undefined, sx: {
+                                div: {
+                                    input: {
+                                        paddingX: 2,
+                                        paddingY: 1.05,
+                                    },
+                                },
+                                width: '100%',
+                                bgcolor: 'white',
+                            }, inputRef: (params) => react_1.default.createElement(TextField_1.default, Object.assign({}, params, { size: 'small', fullWidth: true })) })));
+            }
+            break;
+    }
+    return react_1.default.createElement(react_1.default.Fragment, null);
+}
+exports.default = react_1.default.memo(GenericTable);