upload-apollo-client/app/components/TabelaDocumentos.mjs

// @ts-check

import { useState, useEffect } from "react";
import { createElement as h } from "react";

export default function TabelaDocumentos() {
  const [documentos, setDocumentos] = useState([]);

  function loadDocuments() {
    const docs = JSON.parse(localStorage.getItem('documentos') || '[]');
    // Ordena por timestamp mais recente primeiro
    const sortedDocs = docs.sort((a, b) => new Date(b.timestamp) - new Date(a.timestamp));
    setDocumentos(sortedDocs);
  }

  function clearAllDocuments() {
    localStorage.removeItem('documentos');
    setDocumentos([]);
  }

  function removeDocument(index) {
    const updatedDocs = documentos.filter((_, i) => i !== index);
    localStorage.setItem('documentos', JSON.stringify(updatedDocs));
    setDocumentos(updatedDocs);
  }

  useEffect(() => {
    // Carrega documentos ao montar o componente
    loadDocuments();

    // Escuta evento customizado para recarregar quando novo documento é criado
    function handleDocumentCreated() {
      loadDocuments();
    }

    window.addEventListener('documentoCreated', handleDocumentCreated);

    return () => {
      window.removeEventListener('documentoCreated', handleDocumentCreated);
    };
  }, []);

  if (documentos.length === 0) {
    return h('div', { style: { padding: '20px', textAlign: 'center', color: '#666' } },
      'Nenhum documento encontrado'
    );
  }

  return h('div', { style: { padding: '20px' } }, [
    // Cabeçalho com botão limpar
    h('div', {
      key: 'header',
      style: {
        display: 'flex',
        justifyContent: 'space-between',
        alignItems: 'center',
        marginBottom: '20px'
      }
    }, [
      h('span', { key: 'count' }, `Total: ${documentos.length} documento(s)`),
      h('button', {
        key: 'clear-btn',
        onClick: clearAllDocuments,
        style: {
          background: '#dc3545',
          color: 'white',
          border: 'none',
          borderRadius: '3px',
          padding: '5px 10px',
          cursor: 'pointer'
        }
      }, 'Limpar Todos')
    ]),

    // Tabela
    h('div', { key: 'table-container', style: { overflowX: 'auto' } },
      h('table', {
        style: {
          width: '100%',
          borderCollapse: 'collapse',
          border: '1px solid #ddd'
        }
      }, [
        // Cabeçalho da tabela
        h('thead', { key: 'thead' },
          h('tr', { style: { backgroundColor: '#f8f9fa' } }, [
            h('th', {
              key: 'th-id',
              style: {
                border: '1px solid #ddd',
                padding: '12px',
                textAlign: 'left'
              }
            }, 'ID'),
            h('th', {
              key: 'th-situacao',
              style: {
                border: '1px solid #ddd',
                padding: '12px',
                textAlign: 'left'
              }
            }, 'Situação'),
            h('th', {
              key: 'th-arquivo',
              style: {
                border: '1px solid #ddd',
                padding: '12px',
                textAlign: 'left'
              }
            }, 'Arquivo Atual'),
            h('th', {
              key: 'th-chave',
              style: {
                border: '1px solid #ddd',
                padding: '12px',
                textAlign: 'left'
              }
            }, 'Chave'),
            h('th', {
              key: 'th-data',
              style: {
                border: '1px solid #ddd',
                padding: '12px',
                textAlign: 'left'
              }
            }, 'Data/Hora'),
            h('th', {
              key: 'th-acoes',
              style: {
                border: '1px solid #ddd',
                padding: '12px',
                textAlign: 'center'
              }
            }, 'Ações')
          ])
        ),

        // Corpo da tabela
        h('tbody', { key: 'tbody' },
          documentos.map((doc, index) =>
            h('tr', {
              key: index,
              style: { backgroundColor: index % 2 === 0 ? 'white' : '#f8f9fa' }
            }, [
              h('td', {
                key: 'td-id',
                style: {
                  border: '1px solid #ddd',
                  padding: '12px'
                }
              }, doc.id || 'N/A'),
              h('td', {
                key: 'td-situacao',
                style: {
                  border: '1px solid #ddd',
                  padding: '12px'
                }
              }, doc.situacao || 'N/A'),
              h('td', {
                key: 'td-arquivo',
                style: {
                  border: '1px solid #ddd',
                  padding: '12px'
                }
              }, doc.arquivoAtual || 'N/A'),
              h('td', {
                key: 'td-chave',
                style: {
                  border: '1px solid #ddd',
                  padding: '12px'
                }
              }, doc.chave || 'N/A'),
              h('td', {
                key: 'td-data',
                style: {
                  border: '1px solid #ddd',
                  padding: '12px'
                }
              }, new Date(doc.timestamp).toLocaleString('pt-BR')),
              h('td', {
                key: 'td-acoes',
                style: {
                  border: '1px solid #ddd',
                  padding: '12px',
                  textAlign: 'center'
                }
              },
                h('button', {
                  onClick: () => removeDocument(index),
                  style: {
                    background: '#dc3545',
                    color: 'white',
                    border: 'none',
                    borderRadius: '3px',
                    padding: '4px 8px',
                    cursor: 'pointer',
                    fontSize: '12px'
                  }
                }, 'Remover')
              )
            ])
          )
        )
      ])
    )
  ]);
}