fix

src/@open-adm/components/box/index.tsx

@@ -27,6 +27,10 @@ interface propsBoxApp {
     justifyContent?: justifyContent;
     flexDirection?: flexDirection;
     padding?: string;
+    height?: string;
+    marginBottom?: string;
+    maxHeight?: string;
+    overflowy?: string;
 }
 
 export function BoxApp(props: propsBoxApp) {
@@ -41,6 +45,12 @@ export function BoxApp(props: propsBoxApp) {
             alignItems={props.alignItems}
             justifyContent={props.justifyContent}
             flexDirection={props.flexDirection}
+            height={props.height}
+            marginBottom={props.marginBottom}
+            maxHeight={props.maxHeight}
+            sx={{
+                overflowY: props.overflowy as any
+            }}
         >
             {props.children}
         </Box>

src/@open-adm/components/table-paginacao/footer.tsx

@@ -0,0 +1,108 @@
+import { Pagination, Typography } from '@mui/material';
+import { useLocalStorage } from 'src/hooks/useLocalStorage';
+import { BoxApp } from '../box';
+import { DropDown } from '../drop-down';
+
+const opcoesDeQuantidadePorPagina = [
+    {
+        id: 1,
+        label: '5',
+    },
+    {
+        id: 2,
+        label: '10',
+    },
+    {
+        id: 3,
+        label: '15',
+    },
+    {
+        id: 4,
+        label: '20',
+    },
+    {
+        id: 5,
+        label: '25',
+    },
+    {
+        id: 6,
+        label: '30',
+    },
+    {
+        id: 7,
+        label: '35',
+    },
+    {
+        id: 8,
+        label: '40',
+    },
+    {
+        id: 9,
+        label: '45',
+    },
+    {
+        id: 10,
+        label: '50',
+    },
+];
+
+interface propsFooterTable {
+    length: number;
+    totalDeRegistros: number;
+    quantidadePagina: number;
+    quantidadePorPagina: number;
+    pagina: number;
+    setPagina: (newPage: number) => void;
+    setQuantidadePorPagina: (newPage: number) => void;
+}
+
+export function FooterTable(props: propsFooterTable) {
+    const { setItem } = useLocalStorage();
+
+    return (
+        <BoxApp
+            display='flex'
+            alignItems='center'
+            width='100%'
+            justifyContent='space-between'
+            gap='10px'
+            height='20px'
+        >
+            <BoxApp display='flex' alignItems='center' gap='10px'>
+                <Typography fontSize={'12px'}>Registros por página:</Typography>
+                <DropDown
+                    width='100px'
+                    id='quantidadePorPagina'
+                    key='id'
+                    keyLabel='label'
+                    label=''
+                    values={opcoesDeQuantidadePorPagina}
+                    value={opcoesDeQuantidadePorPagina.find(
+                        (x) => x.label === props.quantidadePorPagina.toString(),
+                    )}
+                    onChange={(_, newValue) => {
+                        const id =
+                            typeof newValue === 'string' ? parseInt(newValue) : newValue;
+                        const newV = opcoesDeQuantidadePorPagina.find(
+                            (x) => x.id === id,
+                        )?.label;
+                        setItem(
+                            'quantidade-por-pagina',
+                            newV?.toString() ?? '5',
+                        );
+                        props.setQuantidadePorPagina(parseInt(newV ?? '5'));
+                    }}
+                />
+                <Typography fontSize={'12px'}>{`Exibindo ${props.length} registros de ${props.totalDeRegistros}`}</Typography>
+            </BoxApp>
+            <Pagination
+                count={props.quantidadePagina}
+                page={props.pagina}
+                variant='outlined'
+                shape='rounded'
+                color='primary'
+                onChange={(_, newPage) => props.setPagina(newPage)}
+            />
+        </BoxApp>
+    );
+}

src/@open-adm/components/table-paginacao/header.tsx

@@ -0,0 +1,70 @@
+import { useNavigateApp } from '../../hooks/use-navigate-app';
+import { useState } from 'react';
+import { Button } from '@mui/material';
+import { InputCustom } from '../input';
+import { BoxApp } from '../box';
+
+interface propsHeaderTable {
+    urlAdd?: string;
+    notBtnAdd?: boolean;
+    pesquisar: (search?: string) => void;
+}
+
+export function HeaderTable(props: propsHeaderTable) {
+    const { navigate } = useNavigateApp();
+    const [search, setSearch] = useState('');
+    function handleBtnAdicionar() {
+        if (props.notBtnAdd || !props.urlAdd) {
+            return <></>;
+        }
+
+        return (
+            <Button
+                onClick={() => navigate(props.urlAdd)}
+                variant='contained'
+                sx={{
+                    marginTop: '15px'
+                }}
+            >Adicionar</Button>
+        );
+    }
+
+    return (
+        <BoxApp
+            display='flex'
+            alignItems='center'
+            justifyContent='space-between'
+            gap='20px'
+            width='100%'
+            height='50px'
+            marginBottom='15px'
+        >
+            {handleBtnAdicionar()}
+            <form
+                style={{
+                    width: '100%',
+                }}
+                onSubmit={(e) => {
+                    e.preventDefault();
+                    if (props.pesquisar) {
+                        props.pesquisar(search?.length === 0 ? undefined : search);
+                    }
+                }}
+            >
+                <InputCustom
+                    label='Pesquisar'
+                    name='pesquisar'
+                    id='pesquisar'
+                    value={search}
+                    onChange={(_, e) => {
+                        setSearch(e);
+                        if (e?.length === 0) {
+                            props.pesquisar(undefined);
+                        }
+                    }}
+                    fullWidth
+                />
+            </form>
+        </BoxApp>
+    );
+}