wca-designsystem 0.0.44 → 0.0.46

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.0.44",
+  "version": "0.0.46",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -93,7 +93,8 @@
     "@fullcalendar/interaction": "^6.1.15",
     "@fullcalendar/react": "^6.1.15",
     "@fullcalendar/timegrid": "^6.1.15",
-    "@mantine/core": "7.13.4",
+    "@mantine/charts": "^7.13.4",
+    "@mantine/core": "^7.13.4",
     "@mantine/dates": "^7.13.4",
     "@mantine/form": "^7.13.4",
     "@mantine/hooks": "7.13.4",
@@ -103,6 +104,7 @@
     "axios": "^1.7.2",
     "dayjs": "^1.11.13",
     "react-router-dom": "^6.23.1",
+    "recharts": "^2.14.1",
     "styled-components": "^6.1.11",
     "xlsx": "^0.18.5"
   }

package/src/components/molecules/Graficos/Donut/Donut.stories.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import DonutChart, { DonutProps } from './index';
+import { Meta } from '@storybook/react/*';
+
+import '@mantine/charts/styles.css';
+
+export default {
+  title: 'Components/moleculas/Graficos/Donut',
+  component: DonutChart,
+} as Meta;
+
+type DataProps = {
+  name: string;
+  value: number;
+  color: string;
+};
+
+const data: Array<DataProps> = [
+  { name: 'Excelente', value: 20, color: '#4c6ef5' },
+  { name: 'Ótimo', value: 30, color: '#fcc419' },
+  { name: 'Bom', value: 10, color: '#12b886' },
+  { name: 'Regular', value: 20, color: '#fa5252' },
+  { name: 'Ruim', value: 20, color: '#7030A0' },
+];
+
+const props: DonutProps<DataProps> = {
+  data: data,
+};
+
+const Template: any = (args: DonutProps<DataProps>) => (
+  <>
+    <DonutChart {...args} />
+  </>
+);
+
+export const DonutStory = Template.bind({
+  ...props,
+});
+
+DonutStory.args = {
+  ...props,
+};

package/src/components/molecules/Graficos/Donut/Donut.test.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import DonutWrapper from './index';
+import { render } from '../../../../test/render';
+
+describe('DonutWrapper está renderizando corretamente', () => {
+  const mockData = [
+    { name: 'Categoria 1', value: 40, color: '#FF0000' },
+    { name: 'Categoria 2', value: 30, color: '#00FF00' },
+    { name: 'Categoria 3', value: 30, color: '#0000FF' },
+  ];
+
+  test('Renderizando todos os itens do gráfico', () => {
+    const { getAllByText, getByText } = render(
+      <DonutWrapper data={mockData} />
+    );
+
+    // Verifica se os valores das categorias estão sendo exibidos
+    expect(getByText('40%')).toBeDefined();
+
+    // Usa getAllByText para valores duplicados
+    const elements = getAllByText('30%');
+    expect(elements).toHaveLength(2);
+  });
+
+  test('Renderizando o componente com dados vazios', () => {
+    const { container } = render(<DonutWrapper data={[]} />);
+
+    // Verifica se não há nenhum texto percentual na tela
+    expect(container.textContent).not.toContain('%');
+  });
+
+  test('Renderizando as caixas de cores corretamente', () => {
+    const { container } = render(<DonutWrapper data={mockData} />);
+
+    // Verifica se as caixas de cores têm os estilos corretos
+    mockData.forEach(item => {
+      const colorBox = container.querySelector(
+        `[style="background-color: ${item.color};"]`
+      );
+      expect(colorBox).toBeDefined();
+    });
+  });
+
+  test('Lida com dados inválidos ou ausentes', () => {
+    const invalidDataMock = [
+      { name: 'Categoria 1', value: null, color: '#FF0000' },
+      { name: 'Categoria 2', color: '#00FF00' },
+      { value: 30, color: '#0000FF' },
+    ];
+
+    const { getByText } = render(<DonutWrapper data={invalidDataMock} />);
+
+    // Verifica que o componente ignora ou substitui valores inválidos
+    expect(getByText('Categoria 1')).toBeDefined();
+    expect(getByText('30%')).toBeDefined();
+  });
+});

package/src/components/molecules/Graficos/Donut/index.tsx

@@ -0,0 +1,27 @@
+import { DonutChart } from '@mantine/charts';
+import { Flex } from '@mantine/core';
+import React from 'react';
+import { ChartInfos, InfoItem, ColorBox, Label, Value } from './styles';
+
+export type DonutProps<T = any> = {
+  data: Array<T>;
+};
+
+const DonutWrapper = ({ data }: DonutProps) => {
+  return (
+    <Flex gap={20} align={'center'}>
+      <DonutChart data={data} thickness={30} withTooltip={false} />
+      <ChartInfos>
+        {data.map((item, index) => (
+          <InfoItem key={index}>
+            <ColorBox color={item.color} />
+            <Label>{item.name}</Label>
+            <Value>{item.value}%</Value>
+          </InfoItem>
+        ))}
+      </ChartInfos>
+    </Flex>
+  );
+};
+
+export default DonutWrapper;

package/src/components/molecules/Graficos/Donut/styles.ts

@@ -0,0 +1,34 @@
+import styled from 'styled-components';
+
+export const ChartInfos = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  background-color: #ffffff;
+  padding: 12px;
+  border-radius: 8px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+`;
+
+export const InfoItem = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+`;
+
+export const ColorBox = styled.div`
+  width: 16px;
+  height: 16px;
+  border-radius: 4px;
+  background-color: ${({ color }) => color};
+`;
+
+export const Label = styled.span`
+  font-size: 14px;
+  color: #333;
+`;
+
+export const Value = styled.span`
+  font-size: 12px;
+  color: #666;
+`;

package/src/components/molecules/TabelaHeader/index.tsx

@@ -0,0 +1,100 @@
+import React from 'react';
+import * as S from './styles';
+import InputDeTexto from '../../atomos/InputDeTexto';
+import SelectCustomizado from '../../atomos/Select';
+import Icone from '../../atomos/Icone';
+import IconeBotao from '../../atomos/IconeBotao';
+import Botao from '../../atomos/Botao';
+import pesquisar from '../../../assets/imagens/icons/Busca.svg';
+import ordernar from '../../../assets/imagens/icons/Ordernar.svg';
+import { SelectDataProps } from '../../organismos/Tabela';
+import filtrar from '../../../assets/imagens/icons/Filtrar.svg';
+import plus from '../../../assets/imagens/icons/Mais.svg';
+
+export type TabelaHeaderProps = {
+  globalFilter: string;
+  setGlobalFilter: React.Dispatch<React.SetStateAction<string>>;
+  setToogleFiltros: React.Dispatch<React.SetStateAction<boolean>>;
+  toogleFiltros: boolean;
+  color?: string;
+  hasOrder?: boolean;
+  hasAdd?: boolean;
+  setOrdenarPor?: React.Dispatch<React.SetStateAction<SelectDataProps>>;
+  handleAdicionar?: () => void;
+  ordenarPor?: SelectDataProps;
+  hasFiltersButtons?: boolean;
+};
+const TabelaHeader = ({
+  globalFilter,
+  setGlobalFilter,
+  setToogleFiltros,
+  toogleFiltros,
+  color,
+  hasAdd,
+  hasFiltersButtons,
+  handleAdicionar,
+  ordenarPor,
+  setOrdenarPor,
+  hasOrder,
+}: TabelaHeaderProps) => {
+  return (
+    <S.HeaderTableContent>
+      <InputDeTexto
+        tipo="table"
+        onChange={e => setGlobalFilter(e.currentTarget.value)}
+        color={color}
+        value={globalFilter}
+        placeholder="Pesquisar na tabela"
+        rightSection={<Icone svg={pesquisar} fill={color} />}
+      />
+      {hasOrder && (
+        <SelectCustomizado
+          tipo="table"
+          data={[
+            { value: 'Maior', label: 'Ordenar por: Maior' },
+            { value: 'Menor', label: 'Ordenar por: Menor' },
+          ]}
+          onChange={(_value, option) => setOrdenarPor!(option)}
+          value={ordenarPor ? ordenarPor.value : null}
+          placeholder={`Ordenar por ${ordenarPor}`}
+          maw={200}
+          comboboxProps={{
+            position: 'bottom',
+            middlewares: { flip: false, shift: false },
+            offset: 0,
+          }}
+          leftSection={
+            <Icone width={15} height={15} fill={color} svg={ordernar} />
+          }
+        />
+      )}
+
+      {/* Botão de filtros */}
+      {hasFiltersButtons && (
+        <S.ToogleButton>
+          <IconeBotao
+            tipo="table"
+            color={color}
+            toolTipInfo="Filtros especificos"
+            onClick={() => setToogleFiltros(!toogleFiltros)}
+          >
+            <Icone svg={filtrar} fill={color} width={20} />
+          </IconeBotao>
+        </S.ToogleButton>
+      )}
+      {hasAdd && (
+        <Botao
+          tipo="round"
+          leftSection={<Icone svg={plus} fill={color} />}
+          color={color}
+          onClick={() => handleAdicionar!()}
+          h={32}
+        >
+          Adicionar Usuário
+        </Botao>
+      )}
+    </S.HeaderTableContent>
+  );
+};
+
+export default TabelaHeader;

package/src/components/molecules/TabelaHeader/styles.ts

@@ -0,0 +1,16 @@
+import styled, { css } from 'styled-components';
+
+export const HeaderTableContent = styled.div`
+  ${({ theme }) => css`
+    display: flex;
+    justify-content: end;
+    gap: 15px;
+    padding: 15px 0;
+    background-color: ${theme.colors.gray['300']};
+    width: 100%;
+    overflow-x: auto;
+  `}
+`;
+export const ToogleButton = styled.div`
+  ${() => css``}
+`;

package/src/components/organismos/Tabela/Tabela.stories.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { Meta } from '@storybook/react';
 import Tabela from './index';
 import { theme } from '../../../styles/theme';
+import Botao from '../../atomos/Botao';
 
 export default {
   title: 'Components/organismos/Tabela',
@@ -22,6 +23,15 @@ const data: any[] = [
         price: '$10',
         exemplo: 'opa',
         exemplo2: 'opa2',
+        children: [
+          {
+            id: '1-10',
+            name: 'Task 10',
+            price: '$10',
+            exemplo: 'opa',
+            exemplo2: 'opa2',
+          },
+        ],
       },
       {
         id: '1-2',
@@ -158,7 +168,7 @@ const columns: any = [
   { key: 'name', header: 'Nome' },
   { key: 'price', header: 'Preço' },
   { key: 'exemplo', header: 'Exemplo' },
-  { key: 'exemplo2', header: 'Exemplo2' },
+  { key: 'acoes', header: 'acoes' },
 ];
 
 const Template: any = (args: any) => (
@@ -172,6 +182,11 @@ export const TabelaProps = Template.bind({});
 TabelaProps.args = {
   data: data,
   hasExpand: true,
+  acoesChildren: (row: any): JSX.Element => (
+    <>
+      <Botao onClick={() => console.log(row)} tipo={'table'} children={'▶'} />
+    </>
+  ),
   columns: columns,
   color: theme.colors.blue,
   hasFiltersButtons: true,
@@ -183,6 +198,8 @@ TabelaProps.args = {
     pageIndex: 1,
     pageSize: 10,
   },
+  rowSelection: [],
+  setRowSelection: () => console.log('selecionou'),
   setFiltrosPor: () => console.log('aqui'),
   setGlobalFilter: () => console.log('aqui'),
   setPagination: () => console.log('aqui'),

package/src/components/organismos/Tabela/body.tsx

@@ -1,8 +1,7 @@
-import React, { useRef, useState } from 'react';
+import React, { useState, useCallback } from 'react';
 import { Checkbox } from '@mantine/core';
 import { Column } from '.';
 import * as S from './styles';
-import { useCallback } from 'react';
 import { theme } from '../../../styles/theme';
 import Icone from '../../atomos/Icone';
 import SetaBaixo from '../../../assets/imagens/icons/SetaAbaixo.svg';
@@ -14,23 +13,25 @@ export interface BodyTableProps<
   columns: Column<T>[];
   fixedPosition?: string[] | undefined;
   color?: string;
-  acoesChildren?: JSX.Element;
+  acoesChildren?: (row: T) => JSX.Element;
   calcStickPosition?: (index: number) => number;
   hasSelect?: boolean;
   rowSelection?: Array<T>;
   setRowSelection?: React.Dispatch<React.SetStateAction<Array<T>>> | undefined;
 }
 
-function BodyTable<T extends { id: string | number; children: Array<T> }>({
-  data,
-  columns,
-  acoesChildren,
-  hasSelect,
-  rowSelection,
-  setRowSelection,
-  color,
-}: BodyTableProps<T>) {
-  const rowRefs = useRef(new Map()); // Ref para armazenar alturas das linhas
+function BodyTable<T extends { id: string | number; children: Array<T> }>(
+  props: BodyTableProps<T>
+) {
+  const {
+    data,
+    columns,
+    acoesChildren,
+    hasSelect,
+    rowSelection,
+    setRowSelection,
+    color,
+  } = props;
 
   const [expandedRows, setExpandedRows] = useState<Set<number | string>>(
     new Set()
@@ -61,122 +62,144 @@ function BodyTable<T extends { id: string | number; children: Array<T> }>({
     });
   }, []);
 
-  return (
-    <S.TabelaBody color={color} hasSelect={hasSelect}>
-      {data.map((item, rowIndex) => (
-        <React.Fragment key={rowIndex}>
-          <tr>
-            {/* Tabela Select */}
-            {hasSelect && (
-              <td className="select">
-                <Checkbox
-                  size="md"
-                  color={color}
-                  type="checkbox"
-                  checked={rowSelection?.some(
-                    itemSome => item.id === itemSome.id
-                  )}
-                  onChange={() =>
-                    handleRowSelect(
-                      item,
-                      rowSelection!.some(itemSome => item.id === itemSome.id)
-                    )
-                  }
+  function renderRows(
+    item: T,
+    columns: Column<T>[],
+    expandedRows: Set<string | number>,
+    toggleExpandRow: (rowId: string | number) => void,
+    acoesChildren?: (row: T) => JSX.Element,
+    rowSelection?: Array<T>,
+    setRowSelection?:
+      | React.Dispatch<React.SetStateAction<Array<T>>>
+      | undefined,
+    color?: string
+  ): JSX.Element[] {
+    const isSelected = rowSelection?.some(row => row.id === item.id);
+    const hasChildren = item.children && item.children.length > 0;
+
+    return [
+      <tr key={`row-${item.id}`}>
+        {/* Checkbox para seleção */}
+        {hasSelect && (
+          <td className="select">
+            <Checkbox
+              size="md"
+              color={color}
+              type="checkbox"
+              checked={rowSelection?.some(selected => selected.id === item.id)}
+              onChange={() => {
+                handleRowSelect(
+                  item,
+                  rowSelection!.some(selected => selected.id === item.id)
+                );
+              }}
+            />
+          </td>
+        )}
+
+        {/* Colunas dinâmicas */}
+        {columns.map((column, colIndex) => {
+          if (column.key === 'expand') {
+            return (
+              <td
+                key={`expand-${colIndex}`}
+                onClick={
+                  hasChildren ? () => toggleExpandRow(item.id) : undefined
+                }
+                className="expand"
+                style={{
+                  cursor: hasChildren ? 'pointer' : 'not-allowed',
+                  opacity: hasChildren ? 1 : 0.5,
+                }}
+              >
+                <Icone
+                  svg={SetaBaixo}
+                  fill={theme.colors.white}
+                  style={{
+                    transform: expandedRows.has(item.id)
+                      ? 'rotate(-180deg)'
+                      : hasChildren
+                      ? 'rotate(0deg)'
+                      : 'rotate(-90deg)',
+                    color: theme.colors.white,
+                    transition: 'ease-in 0.2s',
+                  }}
                 />
               </td>
-            )}
-            {columns.some(
-              columnKey => columnKey.key === 'acoes' && acoesChildren
-            )}
+            );
+          }
 
-            {columns.map((column, index) => (
-              <>
-                {/* Caso tenha  expand*/}
-                {column.key === 'expand' ? (
-                  <>
-                    <td
-                      key={index}
-                      onClick={() => toggleExpandRow(item.id)}
-                      className="expand"
-                    >
-                      {expandedRows.has(item.id) ? (
-                        <Icone
-                          svg={SetaBaixo}
-                          fill={theme.colors.white}
-                          style={{
-                            transform: 'rotate(180deg)',
-                            color: theme.colors.white,
-                            transition: 'ease-in 0.2s',
-                          }}
-                        />
-                      ) : (
-                        <Icone
-                          svg={SetaBaixo}
-                          fill={theme.colors.white}
-                          style={{
-                            transform: 'rotate(0deg)',
-                            color: theme.colors.white,
-                            transition: 'ease-in 0.2s',
-                          }}
-                        />
-                      )}
-                    </td>
-                  </>
-                ) : column.render ? (
-                  <th
-                    key={String(column.key)}
-                    style={{
-                      background: rowSelection?.some(row => row.id === item.id)
-                        ? theme.colors.gray['500']
-                        : 'transparent',
-                    }}
-                  >
-                    {column.render(item[column.key])}
-                  </th>
-                ) : (
-                  <td
-                    key={String(column.key)}
-                    style={{
-                      background: rowSelection?.some(row => row.id === item.id)
-                        ? theme.colors.gray['500']
-                        : 'transparent',
-                    }}
-                  >
-                    {String(item[column.key])}
-                  </td>
-                )}
-              </>
-            ))}
-          </tr>
-          {expandedRows.has(item.id) &&
-            item.children &&
-            item.children.map((child, childIndex) => {
-              const rowKey = `${item.id}-${childIndex}`;
-              const isExpanded = expandedRows.has(item.id);
+          if (column.key === 'acoes' && acoesChildren) {
+            return (
+              <td key={`acoes-${colIndex}`} className="acoes">
+                {acoesChildren(item)}
+              </td>
+            );
+          }
 
-              return (
-                <tr
-                  key={rowKey}
-                  ref={el => el && rowRefs.current.set(rowKey, el.scrollHeight)}
-                >
-                  {columns.map(column => (
-                    <td
-                      key={String(column.key)}
-                      style={{
-                        height: isExpanded ? '40px' : '0px',
-                        transition: 'height 0.3s ease-in-out',
-                        overflow: 'hidden',
-                        background: theme.colors.gray['500'],
-                      }}
-                    >
-                      {child[column.key] ? String(child[column.key]) : ''}
-                    </td>
-                  ))}
-                </tr>
-              );
-            })}
-        </React.Fragment>
-      ))}
+          // Verifica se existe a prop 'cell'
+          if (column.cell) {
+            return <td key={`cell-${colIndex}`}>{column.cell(item)}</td>;
+          }
+
+          // Render padrão
+          return column.render ? (
+            <td
+              key={`column-${colIndex}`}
+              style={{
+                background: isSelected
+                  ? theme.colors.gray['500']
+                  : 'transparent',
+              }}
+            >
+              {column.render(item[column.key])}
+            </td>
+          ) : (
+            <td
+              key={`cell-${colIndex}`}
+              style={{
+                background: isSelected
+                  ? theme.colors.gray['500']
+                  : 'transparent',
+              }}
+            >
+              {String(item[column.key])}
+            </td>
+          );
+        })}
+      </tr>,
+
+      // Renderiza os filhos recursivamente, caso existam
+      ...(expandedRows.has(item.id)
+        ? item.children.flatMap(child =>
+            renderRows(
+              child,
+              columns,
+              expandedRows,
+              toggleExpandRow,
+              acoesChildren,
+              rowSelection,
+              setRowSelection,
+              color
+            )
+          )
+        : []),
+    ];
+  }
+  return (
+    <S.TabelaBody color={color} hasselect={hasSelect ? 'true' : 'false'}>
+      {data.flatMap(item =>
+        renderRows(
+          item,
+          columns,
+          expandedRows,
+          toggleExpandRow,
+          acoesChildren,
+          rowSelection,
+          setRowSelection,
+          color
+        )
+      )}
     </S.TabelaBody>
   );
 }

package/src/components/organismos/Tabela/header.tsx

@@ -7,6 +7,7 @@ import { useCallback } from 'react';
 import { theme } from '../../../styles/theme';
 import InputDeTexto from '../../atomos/InputDeTexto';
 import Icone from '../../atomos/Icone';
+import { Capitalize } from '../../../utils/functions';
 
 type HeaderOptions = {
   [key: string | number | symbol]: string; // Um índice genérico para mapear headers a valores
@@ -66,15 +67,19 @@ const HeaderTabela = <T,>({
     [headerSelection]
   );
 
-  const renderHeaderOptions = useCallback((header: string | number | symbol):
-    | string
-    | undefined => {
-    const especialHeaders: HeaderOptions = {
-      ativo: 'Status',
-    };
+  const renderHeaderOptions = useCallback(
+    (
+      header: string | number | symbol,
+      key: string | number | symbol
+    ): string | undefined => {
+      const especialHeaders: HeaderOptions = {
+        ativo: 'Status',
+      };
 
-    return especialHeaders[header] ?? header;
-  }, []);
+      return especialHeaders[header] ?? Capitalize(String(header));
+    },
+    []
+  );
   return (
     <S.TabelaHeader color={color}>
       <tr>
@@ -145,7 +150,7 @@ const HeaderTabela = <T,>({
                     )}
                   </div>
                 ) : (
-                  <>{renderHeaderOptions(header.key)}</>
+                  <>{renderHeaderOptions(header.header, header.key)}</>
                 )}
               </th>
             );

package/src/components/organismos/Tabela/index.tsx

@@ -1,25 +1,19 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import BodyTable from './body';
 import HeaderTabela from './header';
 import Paginacao from './pagination';
 import SkeletonTable from './SkeletonTable';
 import * as S from './styles';
-import filtrar from '../../../assets/imagens/icons/Filtrar.svg';
 import { useState } from 'react';
-import IconeBotao from '../../atomos/IconeBotao';
-import Icone from '../../atomos/Icone';
-import InputDeTexto from '../../atomos/InputDeTexto';
-import pesquisar from '../../../assets/imagens/icons/Busca.svg';
-import SelectCustomizado from '../../atomos/Select';
-import { theme } from '../../../styles/theme';
-import ordernar from '../../../assets/imagens/icons/Ordernar.svg';
+import TabelaHeader from '../../molecules/TabelaHeader';
 
 // Tipo genérico para as colunas
 export type Column<T> = {
   key: keyof T;
   header: string;
   render?: (value: T[keyof T]) => React.ReactNode;
-  expand?: (item: T) => React.ReactNode; // Define o conteúdo expandido.
+  cell?: (row: T) => React.ReactNode;
+  expand?: (item: T) => React.ReactNode;
 };
 
 export type SelectDataProps = {
@@ -33,9 +27,10 @@ export type CustomTableProps<
   data: T[];
   columns: Column<T>[];
   fixedPosition?: Array<String>;
-  acoesChildren?: JSX.Element;
+  acoesChildren?: (row: T) => JSX.Element;
   hasSelect?: boolean;
   hasExpand?: boolean;
+  hasAdd?: boolean;
   hasOrder?: boolean;
   headerSelection?: Array<String>;
   rowSelection?: Array<T>;
@@ -44,11 +39,12 @@ export type CustomTableProps<
   color?: string;
   setSimples: React.Dispatch<React.SetStateAction<boolean>>;
   setGlobalFilter: React.Dispatch<React.SetStateAction<string>>;
+  globalFilter: string;
   setPagination: React.Dispatch<any>;
+  handleAdicionar?: () => void;
   hasFiltersButtons?: boolean;
   setOrdenarPor?: React.Dispatch<React.SetStateAction<SelectDataProps>>;
   ordenarPor?: SelectDataProps;
-
   filtrosPor: {
     value: string;
     label: string;
@@ -76,7 +72,9 @@ const Tabela = <T extends { id: string | number; children: Array<T> }>({
   setRowSelection,
   hasFiltersButtons,
   isLoading,
+  hasAdd,
   hasSelect,
+  globalFilter,
   hasExpand,
   setFiltrosPor,
   setGlobalFilter,
@@ -84,60 +82,33 @@ const Tabela = <T extends { id: string | number; children: Array<T> }>({
   headerSelection,
   setOrdenarPor,
   setSimples,
+  handleAdicionar,
   tabelaPaginacao,
   fixedPosition,
 }: CustomTableProps<T>) => {
   const [toogleFiltros, setToogleFiltros] = useState(false);
+  const [loading, setLoading] = useState(isLoading);
+
+  useEffect(() => {
+    setLoading(isLoading);
+  }, [isLoading]);
+
   return (
     <S.TableWrapper>
       <S.TableContainer>
-        <S.HeaderTableContent>
-          <InputDeTexto
-            tipo="table"
-            color={color}
-            placeholder="Pesquisar na tabela"
-            rightSection={<Icone svg={pesquisar} fill={color} />}
-          />
-          {hasOrder && (
-            <SelectCustomizado
-              tipo="table"
-              data={[
-                { value: 'Maior', label: 'Ordenar por: Maior' },
-                { value: 'Menor', label: 'Ordenar por: Menor' },
-              ]}
-              onChange={(_value, option) => setOrdenarPor!(option)}
-              value={ordenarPor ? ordenarPor.value : null}
-              placeholder={`Ordenar por ${ordenarPor}`}
-              maw={200}
-              comboboxProps={{
-                position: 'bottom',
-                middlewares: { flip: false, shift: false },
-                offset: 0,
-              }}
-              leftSection={
-                <Icone
-                  width={15}
-                  height={15}
-                  fill={theme.colors.blue}
-                  svg={ordernar}
-                />
-              }
-            />
-          )}
-          {/* Botão de filtros */}
-          {hasFiltersButtons && (
-            <S.ToogleButton>
-              <IconeBotao
-                tipo="table"
-                color={color}
-                toolTipInfo="Filtros especificos"
-                onClick={() => setToogleFiltros(!toogleFiltros)}
-              >
-                <Icone svg={filtrar} fill={color} width={20} />
-              </IconeBotao>
-            </S.ToogleButton>
-          )}
-        </S.HeaderTableContent>
+        <TabelaHeader
+          handleAdicionar={handleAdicionar}
+          globalFilter={globalFilter}
+          setGlobalFilter={setGlobalFilter}
+          setToogleFiltros={setToogleFiltros}
+          toogleFiltros={toogleFiltros}
+          color={color}
+          hasAdd={hasAdd}
+          hasFiltersButtons={hasFiltersButtons}
+          hasOrder={hasOrder}
+          ordenarPor={ordenarPor}
+          setOrdenarPor={setOrdenarPor}
+        />
         <S.StyledTable>
           <HeaderTabela
             hasExpand={hasExpand}
@@ -153,7 +124,7 @@ const Tabela = <T extends { id: string | number; children: Array<T> }>({
             fixedPosition={fixedPosition!}
             onFilterColunas={id => console.log(id)}
           />
-          {isLoading ? (
+          {loading ? (
             <SkeletonTable columns={columns} data={data} />
           ) : (
             <BodyTable

package/src/components/organismos/Tabela/styles.ts

@@ -19,19 +19,7 @@ export const TableContainer = styled.div`
   border-radius: 5px;
   font-family: 'Open Sans', sans-serif;
   max-width: 1500px;
-`;
-
-export const HeaderTableContent = styled.div`
-  ${() => css`
-    display: flex;
-    justify-content: end;
-    gap: 15px;
-    margin-bottom: 15px;
-  `}
-`;
-
-export const ToogleButton = styled.div`
-  ${() => css``}
+  width: 100%;
 `;
 
 export const StyledTable = styled.table`
@@ -68,11 +56,13 @@ export const StyledTable = styled.table`
 export const TabelaHeader = styled.thead<ColorsProp>`
   ${({ theme, color }) => css`
     th {
-      min-width: 150px;
+      min-width: 260px;
       text-align: center;
-      padding: 5px;
+      padding: 0 5px;
+      max-height: 24px;
       background-color: ${color};
       opacity: 0.8;
+      font-size: ${theme.sizes.small};
       color: ${theme.colors.white};
       font-weight: bold;
     }
@@ -102,8 +92,8 @@ export const TabelaHeader = styled.thead<ColorsProp>`
   `}
 `;
 
-export const TabelaBody = styled.tbody<{ color?: string; hasSelect?: boolean }>`
-  ${({ theme, color, hasSelect }) => css`
+export const TabelaBody = styled.tbody<{ color?: string; hasselect?: string }>`
+  ${({ theme, color, hasselect }) => css`
     /* height: 430px; */
     width: 100%;
 
@@ -114,8 +104,7 @@ export const TabelaBody = styled.tbody<{ color?: string; hasSelect?: boolean }>`
 
     .expand {
       width: 50px;
-      position: fixed;
-      left: ${hasSelect ? '52px' : '17px'};
+      left: ${hasselect === 'true' ? '52px' : '17px'};
       background-color: ${color};
       display: flex;
       align-items: center;

package/src/utils/functions.ts

@@ -0,0 +1,4 @@
+export const Capitalize = (palavra: string) => {
+  if (!palavra) return '';
+  return palavra.charAt(0).toUpperCase() + palavra.slice(1);
+};