109 lines
5.2 KiB
JavaScript
109 lines
5.2 KiB
JavaScript
import React, { useState, useMemo } from 'react';
|
|
import { Search } from 'lucide-react';
|
|
import ExcelTable from '../components/ExcelTable';
|
|
|
|
const TableDebug = () => {
|
|
const [searchTerm, setSearchTerm] = useState('');
|
|
|
|
// Mock Data matching the screenshot structure
|
|
const vehicles = useMemo(() => {
|
|
// Top specific rows to match screenshot
|
|
const topRows = [
|
|
{ id: 1, modelo: 'TEO0G02', placa: 'TEO0G02', status: 'Em uso', motorista: 'Larissa Ribeiro de Souza', combustivel: 'Gasolina', tipo: 'Passeio', marca: 'Fiat', ano: '2020', cidade: 'São Paulo', empresa: 'Empresa A', financiamento: 'Sim', financeira: 'Banco X' },
|
|
{ id: 2, modelo: 'HFB3A70', placa: 'HFB3A70', status: 'Não informado', motorista: 'Não atribuído', combustivel: 'Etanol', tipo: 'Utilitário', marca: 'VW', ano: '2021', cidade: 'Rio', empresa: 'Empresa B', financiamento: 'Não', financeira: '-' },
|
|
{ id: 3, modelo: 'LUN1968', placa: 'LUN1968', status: 'Manutenção', motorista: 'Carlos Silva', combustivel: 'Diesel', tipo: 'Caminhão', marca: 'Volvo', ano: '2019', cidade: 'Curitiba', empresa: 'Empresa A', financiamento: 'Sim', financeira: 'Banco Y' },
|
|
// ... mix of data
|
|
];
|
|
|
|
// Fill rest with randomized variety
|
|
const fillRows = Array.from({ length: 40 }, (_, i) => ({
|
|
id: 10 + i,
|
|
modelo: `FLEX${i}`,
|
|
placa: `ABC${10 + i}99`,
|
|
status: ['Em uso', 'Manutenção', 'Vendido'][i % 3], // Varied status
|
|
motorista: i % 2 === 0 ? 'Motorista Teste' : 'Não atribuído',
|
|
combustivel: ['Flex', 'Gasolina', 'Diesel'][i % 3],
|
|
tipo: ['Passeio', 'Utilitário', 'Caminhão'][i % 3],
|
|
marca: ['Fiat', 'VW', 'Ford', 'Chevrolet'][i % 4],
|
|
ano: String(2015 + (i % 10)),
|
|
cidade: ['São Paulo', 'Rio', 'Belo Horizonte'][i % 3],
|
|
empresa: ['Empresa A', 'Empresa B', 'Empresa C'][i % 3],
|
|
financiamento: i % 2 === 0 ? 'Sim' : 'Não',
|
|
financeira: i % 2 === 0 ? `Banco ${['X', 'Y', 'Z'][i % 3]}` : '-'
|
|
}));
|
|
|
|
return [...topRows, ...fillRows];
|
|
}, []);
|
|
|
|
const columns = [
|
|
{ header: 'MODELO', field: 'modelo', width: '120px' },
|
|
{ header: 'PLACA', field: 'placa', width: '100px', className: 'text-[#eab308] font-bold' }, // Yellow text for Placa
|
|
{
|
|
header: 'STATUS',
|
|
field: 'status',
|
|
width: '140px',
|
|
render: (row) => (
|
|
row.status === 'Em uso'
|
|
? <span className="inline-flex items-center px-2 py-0.5 rounded-full text-[9px] font-bold uppercase tracking-wider bg-[#1d4ed8] text-white">Em uso</span>
|
|
: <span className="inline-flex items-center px-2 py-0.5 rounded-full text-[9px] font-bold uppercase tracking-wider bg-[#333] text-[#aaa]">Não informado</span>
|
|
)
|
|
},
|
|
{ header: 'MOTORISTA ATUAL', field: 'motorista', width: '200px' },
|
|
{ header: 'COMBUSTÍVEL', field: 'combustivel', width: '120px' },
|
|
{ header: 'TIPO', field: 'tipo', width: '100px' },
|
|
{ header: 'MARCA', field: 'marca', width: '120px' },
|
|
{ header: 'ANO', field: 'ano', width: '80px' },
|
|
{ header: 'CIDADE', field: 'cidade', width: '120px' },
|
|
];
|
|
|
|
return (
|
|
<div className="min-h-screen bg-[#111] text-white p-8 font-sans">
|
|
<div className="mb-8">
|
|
<h1 className="text-3xl font-black text-[#eab308] mb-2 flex items-center gap-3">
|
|
<span className="p-2 bg-[#eab308]/10 rounded-lg">🔧</span>
|
|
Debug - Tabela Prafrot
|
|
</h1>
|
|
<p className="text-slate-400">Teste standalone da tabela Excel-style (Pixel Perfect)</p>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-4 mb-6">
|
|
<div className="relative flex-1 max-w-md">
|
|
<Search className="absolute left-3 top-1/2 -translate-y-1/2 text-slate-500" size={18} />
|
|
<input
|
|
type="text"
|
|
placeholder="Buscar placa..."
|
|
className="w-full bg-[#1a1a1a] border border-[#333] rounded px-10 py-2 text-sm text-slate-200 focus:outline-none focus:border-[#eab308] placeholder:text-slate-600 font-medium"
|
|
value={searchTerm}
|
|
onChange={(e) => setSearchTerm(e.target.value)}
|
|
/>
|
|
</div>
|
|
<button className="px-4 py-2 bg-[#eab308] text-black font-bold rounded hover:bg-[#ca9a00] transition-colors flex items-center gap-2 text-sm">
|
|
+ Novo
|
|
</button>
|
|
</div>
|
|
|
|
{/* New ExcelTable Component */}
|
|
<div className="h-[600px]">
|
|
<ExcelTable
|
|
data={vehicles}
|
|
columns={columns}
|
|
filterDefs={[
|
|
{ field: 'empresa', label: 'Empresa', type: 'select' },
|
|
{ field: 'placa', label: 'Placa', type: 'text', placeholder: 'por placa' },
|
|
{ field: 'status', label: 'Status', type: 'select' },
|
|
{ field: 'combustivel', label: 'Combustível', type: 'select' },
|
|
{ field: 'tipo', label: 'Tipo', type: 'select' },
|
|
{ field: 'modelo', label: 'Modelo', type: 'text', placeholder: 'por modelo' },
|
|
{ field: 'financiamento', label: 'Financiamento', type: 'select' },
|
|
{ field: 'financeira', label: 'Financiador', type: 'text', placeholder: 'financiador' },
|
|
{ field: 'motorista', label: 'Proprietário', type: 'text', placeholder: 'proprietário' }
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default TableDebug;
|