57 lines
1.8 KiB
JavaScript
57 lines
1.8 KiB
JavaScript
|
|
import React, { useEffect, useMemo } from 'react';
|
|
import { useDispatcher } from '../hooks/useDispatcher';
|
|
import ExcelTable from '../components/ExcelTable';
|
|
|
|
const DispatcherView = () => {
|
|
const { data, loading, fetchData } = useDispatcher();
|
|
|
|
useEffect(() => {
|
|
fetchData();
|
|
}, [fetchData]);
|
|
|
|
const columns = useMemo(() => {
|
|
if (!data || data.length === 0) return [];
|
|
|
|
// Take the first item to generate columns
|
|
const firstItem = data[0];
|
|
return Object.keys(firstItem).map(key => ({
|
|
field: key,
|
|
header: key.replace(/_/g, ' '), // Simple formatter: replace underscores with spaces
|
|
width: 150, // Default width
|
|
className: 'text-xs'
|
|
}));
|
|
}, [data]);
|
|
|
|
const filterDefs = useMemo(() => {
|
|
// Create filters for all columns by default, or maybe just some specific ones?
|
|
// For "advanced filters", let's just enable all of them as 'select' type for now
|
|
return columns.map(col => ({
|
|
field: col.field,
|
|
label: col.header,
|
|
type: 'select'
|
|
}));
|
|
}, [columns]);
|
|
|
|
return (
|
|
<div className="h-full flex flex-col p-4 gap-4">
|
|
<div className="flex flex-col gap-1">
|
|
<h1 className="text-2xl font-bold tracking-tight text-slate-900 dark:text-white">Dispatcher</h1>
|
|
<p className="text-sm text-slate-500 dark:text-slate-400">Visualização de dados do Dispatcher.</p>
|
|
</div>
|
|
|
|
<div className="flex-1 min-h-0">
|
|
<ExcelTable
|
|
data={data}
|
|
columns={columns}
|
|
filterDefs={filterDefs}
|
|
loading={loading}
|
|
pageSize={50}
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default DispatcherView;
|