@ssplib/react-components 0.0.184 → 0.0.185

package/components/form/checkbox/CheckBoxWarning.js

@@ -36,8 +36,8 @@ function CheckBoxWarning({ name, title, customWarning, defaultValue = false, xs
         react_1.default.createElement(material_1.FormControlLabel, { control: react_1.default.createElement(material_1.Checkbox, Object.assign({ size: 'small' }, context.formRegister(name), { defaultChecked: defaultValue })), label: title }),
         context.formWatch(name) && (react_1.default.createElement(material_1.Card, { sx: { bgcolor: '#FFFBF5', color: '#F59E0B', padding: 1, paddingLeft: 2 } }, customWarning ? (customWarning) : (react_1.default.createElement(Typography_1.default, null,
             react_1.default.createElement("b", null, "Aten\u00E7\u00E3o"),
-            " Eventos da natureza ",
+            " ",
             react_1.default.createElement("i", null, title),
-            " possuem regras espec\u00EDficas"))))));
+            " possui regras espec\u00EDficas."))))));
 }
 exports.default = CheckBoxWarning;

package/components/form/date/DatePicker.js

@@ -67,6 +67,7 @@ function DatePicker(_a) {
             react_1.default.createElement(x_date_pickers_1.LocalizationProvider, { adapterLocale: pt_br_1.default, dateAdapter: AdapterDayjs_1.AdapterDayjs },
                 react_1.default.createElement(x_date_pickers_2.DatePicker, { minDate: (0, dayjs_1.default)(minDt, 'DD/MM/YYYY'), maxDate: (0, dayjs_1.default)(maxDt, 'DD/MM/YYYY'), format: 'DD/MM/YYYY', value: value, onChange: handleChange, disableHighlightToday: true, sx: {
                         outline: (0, lodash_get_1.default)(context.errors, name) ? '1px solid #a51c30' : '',
+                        backgroundColor: 'white',
                         width: '100%',
                         div: {
                             input: {

package/components/form/date/TimePicker.js

@@ -53,6 +53,7 @@ function TimePicker({ name, required = false, title, defaultValue = '', xs = 12,
         react_1.default.createElement(x_date_pickers_1.LocalizationProvider, { adapterLocale: pt_br_1.default, dateAdapter: AdapterDayjs_1.AdapterDayjs },
             react_1.default.createElement(x_date_pickers_1.TimePicker, { value: value, ampm: false, onChange: handleChange, sx: {
                     outline: (0, lodash_get_1.default)(context.errors, name) ? '1px solid #a51c30' : '',
+                    backgroundColor: 'white',
                     width: '100%',
                     div: {
                         input: {

package/components/form/file/DropFileUpload.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+export default function DropFileUpload({ name, tipoArquivo, title, required, multiple, apiURL, sizeLimit, xs, sm, md, tstToken, }: {
+    name: string;
+    tipoArquivo: string;
+    title: string;
+    apiURL: string;
+    tstToken?: string;
+    required?: boolean;
+    multiple?: boolean;
+    sizeLimit?: number;
+    xs?: number;
+    sm?: number;
+    md?: number;
+}): JSX.Element;

package/components/form/file/DropFileUpload.js

@@ -0,0 +1,230 @@
+"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 });
+const material_1 = require("@mui/material");
+const system_1 = require("@mui/system");
+const lodash_get_1 = __importDefault(require("lodash.get"));
+const react_1 = __importStar(require("react"));
+const auth_1 = require("../../../context/auth");
+const form_1 = require("../../../context/form");
+const react_dropzone_1 = require("react-dropzone");
+const axios_1 = __importDefault(require("axios"));
+function bytesToMegabytes(bytes) {
+    const megabytes = bytes / (1024 * 1024);
+    return megabytes;
+}
+function bytesToKBorMB(bytes) {
+    const KB = 1024;
+    const MB = 1024 * KB;
+    if (bytes < MB) {
+        const KBValue = bytes / KB;
+        return `${KBValue.toFixed(1)}KB`;
+    }
+    else {
+        const MBValue = bytes / MB;
+        return `${MBValue.toFixed(1)}MB`;
+    }
+}
+function LinearProgressWithLabel(props) {
+    return (react_1.default.createElement(material_1.Box, { sx: { display: 'flex', alignItems: 'center' } },
+        react_1.default.createElement(material_1.Box, { sx: { width: '100%', mr: 1 } },
+            react_1.default.createElement(material_1.LinearProgress, Object.assign({ variant: 'determinate' }, props))),
+        react_1.default.createElement(material_1.Box, { sx: { minWidth: 3 } },
+            react_1.default.createElement(material_1.Typography, { variant: 'body2', color: 'text.secondary' }, `${Math.round(props.value)}%`))));
+}
+function DropFileUpload({ name, tipoArquivo, title, required = false, multiple = false, apiURL, sizeLimit = 4, xs = 12, sm, md, tstToken = '', }) {
+    const { getRootProps, getInputProps } = (0, react_dropzone_1.useDropzone)({
+        multiple,
+        onDrop: (dropFiles) => {
+            const fileList = [];
+            setProgress(-1);
+            dropFiles
+                .filter((file) => {
+                if (bytesToMegabytes(file.size) > sizeLimit) {
+                    setErrorMsg(`Por favor, escolha um arquivo com tamanho inferior a ${sizeLimit} MB`);
+                    setTimeout(() => {
+                        setErrorMsg('');
+                    }, 3000);
+                    return false;
+                }
+                return true;
+            })
+                .forEach((file, index) => {
+                let id = Date.now() + index;
+                // fetch API
+                const fd = new FormData();
+                fd.append('files', file);
+                fd.append('tipoArquivo', tipoArquivo);
+                axios_1.default
+                    .post(apiURL, fd, {
+                    onUploadProgress: (progressEvent) => {
+                        const percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total);
+                        setProgress(percentCompleted);
+                        if (percentCompleted >= 100) {
+                            setFiles((f) => [...f, { id: id, name: file.name, loading: true, error: false, file: file, size: file.size }]);
+                        }
+                    },
+                    headers: { Authorization: `Bearer ${tstToken === '' ? (user ? user.token : '') : tstToken}` },
+                })
+                    .then((res) => {
+                    if (res.status > 200) {
+                        const fileIdFromApi = res.data.data[0];
+                        const fileId = fileIdFromApi['coSeqArquivo'];
+                        context.setFilesUid((fId) => [
+                            ...fId,
+                            {
+                                CO_SEQ_ARQUIVO: fileId,
+                                CO_TIPO_ARQUIVO: parseInt(tipoArquivo),
+                            },
+                        ]);
+                        setFilesLoaded((fl) => [...fl, id]);
+                        const f = {};
+                        f[id] = fileId;
+                        setFilesIds((ids) => (Object.assign(Object.assign({}, ids), f)));
+                    }
+                    else {
+                        setProgress(-1);
+                        removeFile(id);
+                    }
+                })
+                    .catch((err) => {
+                    setProgress(-1);
+                    removeFile(id);
+                });
+            });
+        },
+    });
+    const context = (0, react_1.useContext)(form_1.FormContext);
+    const { user } = (0, react_1.useContext)(auth_1.AuthContext);
+    const theme = (0, material_1.useTheme)();
+    const isSmall = (0, material_1.useMediaQuery)(theme.breakpoints.only('xs'));
+    const [progress, setProgress] = (0, react_1.useState)(-1);
+    const [files, setFiles] = (0, react_1.useState)([]);
+    const [filesLoaded, setFilesLoaded] = (0, react_1.useState)([]);
+    const [fileIds, setFilesIds] = (0, react_1.useState)({});
+    // const [filesError, setFilesError] = useState<number[]>([])
+    const [errorMsg, setErrorMsg] = (0, react_1.useState)('');
+    const removeFile = (id, hideMsg, fileId) => {
+        setFiles(files.filter((x) => x.id !== id));
+        if (fileId)
+            context.setFilesUid((fId) => fId.filter((idd) => idd.CO_SEQ_ARQUIVO !== fileId));
+        if (!hideMsg) {
+            setErrorMsg('Erro ao enviar arquivo. Verifique o formato e tente mais tarde.');
+            setTimeout(() => {
+                setErrorMsg('');
+            }, 3000);
+        }
+    };
+    const deleteFile = (e, id) => {
+        if (Object.keys(fileIds).includes(id.toString())) {
+            fetch(`${apiURL}/${fileIds[id]}`, {
+                method: 'DELETE',
+                headers: {
+                    Authorization: `Bearer ${tstToken === '' ? (user ? user.token : '') : tstToken}`,
+                },
+            })
+                .then((res) => {
+                if (!res.ok)
+                    removeFile(id, true, fileIds[id]);
+                if (res.status === 200) {
+                    removeFile(id, true, fileIds[id]);
+                }
+            })
+                .catch((err) => console.log(err));
+        }
+    };
+    (0, react_1.useEffect)(() => {
+        const dt = new DataTransfer();
+        files.forEach((x) => {
+            dt.items.add(x.file);
+        });
+        context === null || context === void 0 ? void 0 : context.formSetValue(name, dt.files);
+    }, [files, context, name]);
+    (0, react_1.useEffect)(() => {
+        return () => {
+            context.setFilesUid((files) => files.filter((x) => x.CO_TIPO_ARQUIVO !== parseInt(tipoArquivo)));
+        };
+    }, []);
+    return (react_1.default.createElement(material_1.Grid, Object.assign({ item: true }, { xs, sm, md }, { sx: { width: '100%' } }),
+        react_1.default.createElement(material_1.Box, { bgcolor: 'white', p: 2, borderRadius: '8px', color: '#1E293B' },
+            react_1.default.createElement(material_1.InputLabel, { required: required, sx: { marginBottom: 2, textTransform: 'capitalize' } }, title),
+            react_1.default.createElement(system_1.Stack, Object.assign({}, getRootProps({ className: 'dropzone' }), { bgcolor: '#EFEFEF', justifyContent: 'center', alignItems: 'center', textAlign: 'center', borderRadius: '6px', py: 8, border: 'solid 1.5px #989898', sx: {
+                    borderStyle: 'dashed',
+                    cursor: 'pointer',
+                } }),
+                react_1.default.createElement("input", Object.assign({}, getInputProps(), context.formRegister(name, {
+                    validate: (v, f) => {
+                        if ((v.length && filesLoaded.length) <= 0 && required)
+                            return 'O campo de arquivo é obrigatório';
+                    },
+                }))),
+                react_1.default.createElement(system_1.Stack, { spacing: 2, alignItems: 'center' },
+                    react_1.default.createElement(material_1.Box, null,
+                        react_1.default.createElement(material_1.Typography, { fontWeight: 600, fontSize: 18 }, "Arraste seus arquivos at\u00E9 aqui"),
+                        react_1.default.createElement(material_1.Typography, null, "ou selecione arquivos que est\u00E3o no seu computador")),
+                    react_1.default.createElement(material_1.Button, { variant: 'contained', sx: {
+                            backgroundColor: '#64748B',
+                            pointerEvents: 'none',
+                            borderRadius: '8px',
+                            width: 'fit-content',
+                        } }, "Selecionar"),
+                    react_1.default.createElement(material_1.Typography, { fontWeight: 300 },
+                        "Tamanho m\u00E1ximo por arquivo ",
+                        sizeLimit,
+                        "MB"))),
+            react_1.default.createElement(material_1.Typography, { pt: 2, fontSize: 16, fontWeight: 600 },
+                "Voc\u00EA selecionou ",
+                files.length,
+                " arquivo",
+                files.length > 1 ? 's' : '',
+                "."),
+            react_1.default.createElement(system_1.Stack, { width: '100%', marginTop: 1, spacing: 1 },
+                files.map((x) => (react_1.default.createElement(system_1.Stack, { direction: 'row', justifyContent: 'space-between', border: 'solid 1px #E2E8F0', borderRadius: 2, p: 1 },
+                    react_1.default.createElement(system_1.Stack, { direction: 'row' },
+                        react_1.default.createElement(system_1.Stack, { direction: 'row', justifyContent: 'center', alignItems: 'center', minWidth: 30, pr: 1.5 },
+                            react_1.default.createElement("img", { src: 'icons/file-pdf.svg' })),
+                        react_1.default.createElement(system_1.Stack, null,
+                            react_1.default.createElement(material_1.Typography, { fontWeight: 600 }, x.name),
+                            react_1.default.createElement(material_1.Typography, { fontSize: 14 }, bytesToKBorMB(x.size)))),
+                    react_1.default.createElement(material_1.Button, { size: 'small', startIcon: react_1.default.createElement("img", { src: 'icons/trash.svg' }), variant: 'contained', onClick: (e) => deleteFile(e, x.id), sx: {
+                            height: 40,
+                            backgroundColor: '#DE3F50',
+                            borderRadius: '8px',
+                        } }, "Remover")))),
+                progress > 0 && progress < 100 && (react_1.default.createElement(LinearProgressWithLabel, { value: progress, sx: {
+                        backgroundColor: '#103D6A',
+                        '.MuiLinearProgress-bar': {
+                            backgroundColor: '#BDDDFA',
+                        },
+                    } }))),
+            errorMsg && (react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement(material_1.Typography, { variant: 'caption', color: '#e53935', fontWeight: 600, fontSize: 14, paddingTop: 2 }, errorMsg),
+                react_1.default.createElement("br", null))),
+            (0, lodash_get_1.default)(context === null || context === void 0 ? void 0 : context.errors, name) && (react_1.default.createElement(material_1.Typography, { variant: 'caption', color: '#e53935', fontWeight: 600, fontSize: 14 }, "* O campo de arquivo \u00E9 obrigat\u00F3rio")))));
+}
+exports.default = DropFileUpload;

package/components/form/stepper/Stepper.js

@@ -53,11 +53,9 @@ const Save_1 = __importDefault(require("@mui/icons-material/Save"));
 const lab_1 = require("@mui/lab");
 const material_1 = require("@mui/material");
 const react_1 = __importStar(require("react"));
+const react_toastify_1 = require("react-toastify");
 const form_1 = require("../../../context/form");
-const StepperBlock_1 = require("./StepperBlock");
-const Input_1 = require("../input/Input");
-const FixedAutoComplete_1 = require("../input/FixedAutoComplete");
-const MultInput_1 = __importDefault(require("../input/MultInput"));
+const Table_1 = __importDefault(require("../table/Table"));
 const getKeys = (values, id) => {
     if (!values || Object.keys(values).length <= 0)
         return [];
@@ -71,24 +69,42 @@ const getKeys = (values, id) => {
 function sleep(ms) {
     return new Promise((resolve) => setTimeout(resolve, ms));
 }
-const list = [
-    {
-        id: 0,
-        label: 'Nada',
-    },
-    {
-        id: 1,
-        label: 'Nada 2',
-    },
-];
 function Teste() {
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(Stepper, null,
-            react_1.default.createElement(StepperBlock_1.StepperBlock, { title: 'Testando' },
-                react_1.default.createElement(material_1.Box, { bgcolor: 'pink' },
-                    react_1.default.createElement(Input_1.Input, { name: 'teste', type: 'input' }),
-                    react_1.default.createElement(FixedAutoComplete_1.FixedAutoComplete, { name: 'haha', title: 'Testing', list: list, required: true }),
-                    react_1.default.createElement(MultInput_1.default, { name: 'haha' }))))));
+    return (react_1.default.createElement(material_1.Box, { bgcolor: '#F9F9F9', py: 4 },
+        react_1.default.createElement(Table_1.default, { fetchFunc: () => fetch('http://localhost:7171/table'), useKC: false, tableName: 'Teste', columns: [
+                {
+                    keyName: 'protocolo',
+                    title: 'Procolo',
+                },
+                {
+                    keyName: 'titulo',
+                    title: 'Titulo',
+                },
+                {
+                    keyName: 'local',
+                    title: 'Local',
+                },
+                {
+                    keyName: 'data_abertura',
+                    title: 'Data Abertura',
+                },
+                {
+                    keyName: 'movimentacao_ultimo_estado',
+                    title: 'Movimentacao_ultimo_estado',
+                },
+                {
+                    keyName: 'estado',
+                    title: 'Estado',
+                },
+            ], action: () => react_1.default.createElement(react_1.default.Fragment, null), filters: {
+                protocolo: [
+                    {
+                        keyName: 'protocolo',
+                        name: 'Protocolo',
+                        type: 'a-z',
+                    },
+                ],
+            }, columnSize: 6 })));
 }
 exports.Teste = Teste;
 function Stepper(_a) {
@@ -99,7 +115,6 @@ function Stepper(_a) {
     const nRef = (0, react_1.useRef)(null);
     const theme = (0, material_1.useTheme)();
     const [activeStep, setActiveStep] = (0, react_1.useState)(0);
-    const [canPass, setCanPass] = (0, react_1.useState)(false);
     const blocks = Array.isArray(props.children) ? props.children : [props.children];
     const stepperBlocks = blocks.map((x, idx) => {
         return react_1.default.cloneElement(x, Object.assign(Object.assign({}, x.props), { prefix: idx }));
@@ -111,7 +126,7 @@ function Stepper(_a) {
         // console.log('valores conferidos', getKeys(context.formGetValues(), activeStep), context.formGetValues(getKeys(context.formGetValues(), activeStep)))
         const result = yield context.formTrigger(getKeys(context.formGetValues(), activeStep));
         if (!result) {
-            setCanPass(true);
+            (0, react_toastify_1.toast)('Formulário incompleto!', { type: 'warning', theme: 'light' });
             return;
         }
         setActiveStep((prevActiveStep) => prevActiveStep + 1);
@@ -120,7 +135,7 @@ function Stepper(_a) {
         const result = yield context.formTrigger(getKeys(context.formGetValues(), activeStep));
         if (!result) {
             e.preventDefault();
-            setCanPass(true);
+            (0, react_toastify_1.toast)('Formulário incompleto!', { type: 'warning', theme: 'light' });
             return;
         }
     });
@@ -152,13 +167,7 @@ function Stepper(_a) {
                 // position='bottom'
                 position: (0, material_1.useMediaQuery)(theme.breakpoints.only('xs')) ? 'bottom' : 'static', activeStep: activeStep, sx: { paddingTop: 2, paddingBottom: 4, paddingX: 0 }, backButton: react_1.default.createElement(material_1.Button, { variant: 'contained', startIcon: react_1.default.createElement(KeyboardArrowLeft_1.default, null), onClick: handleBack, disabled: activeStep === 0, sx: { textTransform: 'none' } }, "Voltar"), nextButton: activeStep < maxSteps - 1 ? (react_1.default.createElement(material_1.Button, { variant: 'contained', endIcon: react_1.default.createElement(KeyboardArrowRight_1.default, null), onClick: handleNext, sx: { textTransform: 'none' }, ref: nRef }, "Pr\u00F3ximo")) : (react_1.default.createElement(material_1.Box, null,
                     react_1.default.createElement(lab_1.LoadingButton, { variant: 'contained', type: 'submit', loading: context.submiting, loadingPosition: 'start', startIcon: react_1.default.createElement(Save_1.default, null), onClick: (e) => nextCheck(e), sx: { textTransform: 'none', backgroundColor: '#22C55E', '&:hover': { backgroundColor: '#48cf7a' } } },
-                        react_1.default.createElement("span", null, "Salvar")))) })),
-        react_1.default.createElement(material_1.Snackbar, { open: canPass, autoHideDuration: 3000, onClose: () => setCanPass(false), anchorOrigin: {
-                horizontal: 'center',
-                vertical: 'bottom',
-            }, resumeHideDuration: 0 },
-            react_1.default.createElement(material_1.Alert, { severity: 'warning', onClose: (e) => setCanPass(false) },
-                react_1.default.createElement(material_1.Typography, null, "Formul\u00E1rio incompleto!")))));
+                        react_1.default.createElement("span", null, "Salvar")))) }))));
 }
 exports.Stepper = Stepper;
 exports.default = react_1.default.memo(Stepper);

package/components/form/table/Table.js

@@ -42,6 +42,7 @@ const FormProvider_1 = __importDefault(require("../../providers/FormProvider"));
 const DatePicker_1 = __importDefault(require("../date/DatePicker"));
 const dayjs_1 = __importDefault(require("dayjs"));
 const jszip_1 = __importDefault(require("jszip"));
+const NavigateNextRounded_1 = __importDefault(require("@mui/icons-material/NavigateNextRounded"));
 let startData = [];
 function Table({ columns, fetchFunc, emptyMsg = {
     user: 'Nenhum dado encontrado',
@@ -686,47 +687,87 @@ function Table({ columns, fetchFunc, emptyMsg = {
     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, { marginX: isSmall ? 0 : 4 },
-            react_1.default.createElement(material_1.Stack, { spacing: 1, direction: { xs: 'column', md: 'row' }, marginBottom: 2 },
-                react_1.default.createElement(TextField_1.default, { InputProps: {
-                        startAdornment: react_1.default.createElement(Search_1.default, { sx: { marginRight: 1, fill: '#c0c0c0' } }),
-                    }, size: 'small', onChange: onInputChange, fullWidth: true, placeholder: `Pesquisar ${tableName}` }),
-                Object.keys(filters).length > 0 && (react_1.default.createElement(material_1.Button, { startIcon: react_1.default.createElement(icons_material_1.FilterAlt, null), variant: 'contained', onClick: (e) => setFilterOpen(true) }, "Filtrar"))),
-            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 ? '#E2E8F0' : '#F8FAFC', paddingY: 2 }, elevation: 0 },
-                    react_1.default.createElement(Grid_1.default, { container: true, spacing: isSmall ? 2 : 0, paddingX: 2 },
-                        columns.map((c) => (react_1.default.createElement(Grid_1.default, { key: c.keyName + index, item: true, xs: 12, md: (12 / columnSize) * (!!c.size ? c.size : 1) },
-                            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 },
-                                react_1.default.createElement(material_1.Box, { sx: { wordWrap: 'break-word', color: '#1E293B', fontSize: 16 }, fontFamily: 'Inter' }, c.keyName === statusKeyName ? getStatusMsg((0, lodash_get_1.default)(x, c.keyName)) : react_1.default.createElement("div", { dangerouslySetInnerHTML: { __html: (0, lodash_get_1.default)(x, c.keyName) } })))))),
-                        react_1.default.createElement(Grid_1.default, { item: true, xs: 12, md: 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)))))))),
-                react_1.default.createElement(material_1.Stack, { bgcolor: '#F8FAFC', direction: 'row', justifyContent: 'center', paddingY: 1, borderTop: 3, borderColor: '#b4bfcf' },
-                    react_1.default.createElement(material_1.Stack, { direction: 'column', justifyContent: 'center', alignItems: 'center' },
-                        react_1.default.createElement(Pagination_1.default, { count: paginationCount, siblingCount: isSmall ? 0 : 1, size: 'large', onChange: onPaginationChange, page: listPage, shape: 'rounded' })))),
-            getMaxItems().length > 0 && (react_1.default.createElement(material_1.Stack, { bgcolor: '#E2E8F0', padding: 1, direction: {
+        react_1.default.createElement(material_1.Box, { marginX: isSmall ? 0 : 4, bgcolor: 'white', p: 2, borderRadius: 6 },
+            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' }, marginBottom: 2, height: '40px', 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}` }),
+                    Object.keys(filters).length > 0 && (react_1.default.createElement(material_1.Button, { startIcon: react_1.default.createElement(icons_material_1.FilterAlt, null), variant: 'contained', onClick: (e) => setFilterOpen(true), sx: {
+                            borderRadius: '8px',
+                            paddingX: '24px',
+                            paddingY: '8px',
+                            backgroundColor: '#208FE8',
+                            textTransform: 'capitalize',
+                        } }, "Filtro"))),
+                react_1.default.createElement(material_1.Stack, { alignItems: 'end', width: '100%', pb: 2 },
+                    react_1.default.createElement(Typography_1.default, { fontWeight: 600 }, "Demandas cadastradas"),
+                    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)))),
+            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', paddingY: 2, borderTop: 'solid 1.5px #E2E8F0' }, elevation: 0 },
+                react_1.default.createElement(Grid_1.default, { container: true, spacing: isSmall ? 2 : 0, paddingX: 2 },
+                    columns.map((c) => (react_1.default.createElement(Grid_1.default, { key: c.keyName + index, item: true, xs: 12, md: (12 / columnSize) * (!!c.size ? c.size : 1) },
+                        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 },
+                            react_1.default.createElement(material_1.Box, { sx: { wordWrap: 'break-word', color: '#1E293B', fontSize: 16 }, fontFamily: 'Inter' }, c.keyName === statusKeyName ? getStatusMsg((0, lodash_get_1.default)(x, c.keyName)) : react_1.default.createElement("div", { dangerouslySetInnerHTML: { __html: (0, lodash_get_1.default)(x, c.keyName) } })))))),
+                    react_1.default.createElement(Grid_1.default, { item: true, xs: 12, md: 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))))))))),
+            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' },
-                react_1.default.createElement(material_1.Box, { height: '100%', top: 0, left: 0, marginLeft: 2 },
-                    react_1.default.createElement(material_1.Stack, { height: '100%', justifyContent: 'center' },
-                        currentPage * itemsCount + 1,
-                        "-",
-                        currentPage * itemsCount + 1 + getMaxItems().length - 1,
-                        " de ",
-                        list.length)),
-                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)))))),
+                }, 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) => s - 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) => s + 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)' } })))),
         react_1.default.createElement(material_1.SwipeableDrawer, { anchor: isSmall ? 'bottom' : 'right', open: filterOpen, onClose: (e) => setFilterOpen(false), onOpen: (e) => setFilterOpen(true) },
             react_1.default.createElement(material_1.List, { sx: { minWidth: 310 } }, Object.keys(filters).map((f, fIndex) => (react_1.default.createElement(react_1.default.Fragment, null,
                 react_1.default.createElement(material_1.ListItemButton, { onClick: (e) => setFilterCollapse((s) => s.map((x, idx) => {

package/components/modal/Modal.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export declare let sspModal: {
+    open: (customCompoment?: JSX.Element | JSX.Element[] | (() => JSX.Element)) => void;
+    close: () => void;
+};
+export declare function CustomModalProvider(): JSX.Element;

package/components/modal/Modal.js

@@ -0,0 +1,82 @@
+"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.CustomModalProvider = exports.sspModal = void 0;
+const material_1 = require("@mui/material");
+const CloseRounded_1 = __importDefault(require("@mui/icons-material/CloseRounded"));
+const react_1 = __importStar(require("react"));
+exports.sspModal = {
+    open: () => { },
+    close: () => { },
+};
+function CustomModalProvider() {
+    const [open, setOpen] = (0, react_1.useState)(false);
+    const [content, setContent] = (0, react_1.useState)(react_1.default.createElement(react_1.default.Fragment, null));
+    const handleClose = () => setOpen(false);
+    const theme = (0, material_1.useTheme)();
+    const isDesktop = (0, material_1.useMediaQuery)(theme.breakpoints.up('sm'));
+    (0, react_1.useEffect)(() => {
+        exports.sspModal.open = (customCompoment) => {
+            if (customCompoment)
+                setContent(customCompoment);
+            setOpen(true);
+        };
+        exports.sspModal.close = handleClose;
+    }, [setOpen]);
+    return (react_1.default.createElement(react_1.default.Fragment, null, !isDesktop ? (react_1.default.createElement(material_1.SwipeableDrawer, { anchor: 'bottom', open: open, onClose: handleClose, onOpen: () => { }, PaperProps: {
+            sx: {
+                bgcolor: 'transparent',
+            },
+        } },
+        react_1.default.createElement(material_1.Stack, { direction: 'row', onClick: handleClose, maxHeight: '8vh', height: '8vh', justifyContent: 'center', alignItems: 'center' },
+            react_1.default.createElement(material_1.Typography, { fontWeight: 600, color: 'white' }, "Clique fora para fechar")),
+        react_1.default.createElement(material_1.Box, { p: 2, maxHeight: '92vh', bgcolor: 'white', overflow: 'auto' }, content))) : (react_1.default.createElement(material_1.Modal, { open: open, onClose: handleClose },
+        react_1.default.createElement(material_1.Box, { sx: {
+                position: 'absolute',
+                top: '50%',
+                left: '50%',
+                transform: 'translate(-50%, -50%)',
+                width: 400,
+                borderRadius: 2,
+                bgcolor: 'white',
+                border: '1px solid #454545',
+                boxShadow: 24,
+            } },
+            react_1.default.createElement(material_1.Box, { onClick: handleClose, width: 'fit-content', height: 'fit-content', position: 'absolute', right: 0, top: 0, margin: 0.6, sx: {
+                    ':hover': {
+                        transform: 'scale(1.03)',
+                        transition: 'all 500ms',
+                        cursor: 'pointer',
+                    },
+                } },
+                react_1.default.createElement(CloseRounded_1.default, { sx: {
+                        transform: 'scale(.9)',
+                    } })),
+            react_1.default.createElement(material_1.Box, { overflow: 'auto', maxHeight: '90vh', p: 2, marginTop: 4, borderTop: 'solid 1px gray' }, content))))));
+}
+exports.CustomModalProvider = CustomModalProvider;

package/components/providers/SspComponentsProvider.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import 'react-toastify/dist/ReactToastify.css';
+export declare function SspComponentsProvider(props: {
+    children: JSX.Element | JSX.Element[];
+}): JSX.Element;

package/components/providers/SspComponentsProvider.js

@@ -0,0 +1,18 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SspComponentsProvider = void 0;
+const react_1 = __importDefault(require("react"));
+const react_toastify_1 = require("react-toastify");
+const Modal_1 = require("../modal/Modal");
+require("react-toastify/dist/ReactToastify.css");
+//components principal da aplicação
+function SspComponentsProvider(props) {
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(Modal_1.CustomModalProvider, null),
+        props.children,
+        react_1.default.createElement(react_toastify_1.ToastContainer, { position: 'bottom-right', theme: 'colored' })));
+}
+exports.SspComponentsProvider = SspComponentsProvider;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@ssplib/react-components",
-    "version": "0.0.184",
+    "version": "0.0.185",
     "description": "SSP React Components",
     "main": "index.js",
     "author": "Pedro Henrique <sr.hudrick@gmail.com>",