90 lines
4.0 KiB
JavaScript
90 lines
4.0 KiB
JavaScript
import React, { useEffect, useState } from 'react';
|
|
import { useDrivers } from '../hooks/useDrivers';
|
|
import ExcelTable from '../components/ExcelTable';
|
|
import { Plus, Search } from 'lucide-react';
|
|
import {
|
|
Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogDescription
|
|
} from "@/components/ui/dialog";
|
|
|
|
// Reusing styled components locally
|
|
const DarkInput = ({ label, ...props }) => (
|
|
<div className="space-y-1.5">
|
|
{label && <label className="text-[10px] uppercase font-bold text-slate-500 dark:text-slate-400 tracking-wider ml-1">{label}</label>}
|
|
<input
|
|
className="w-full bg-slate-50 dark:bg-[#141414] border border-slate-200 dark:border-[#333] rounded-xl px-3 py-2 text-sm text-slate-700 dark:text-slate-200 focus:outline-none focus:border-emerald-500 focus:ring-1 focus:ring-emerald-500 transition-all placeholder:text-slate-400 dark:placeholder:text-slate-700"
|
|
{...props}
|
|
/>
|
|
</div>
|
|
);
|
|
|
|
const DarkButton = ({ children, variant = 'primary', className = '', ...props }) => {
|
|
const baseClass = "px-4 py-2 rounded-xl font-bold text-sm transition-all shadow-lg active:scale-95 flex items-center justify-center gap-2";
|
|
const variants = {
|
|
primary: "bg-emerald-600 hover:bg-emerald-500 text-white shadow-emerald-500/10",
|
|
secondary: "bg-slate-100 dark:bg-[#2a2a2a] hover:bg-slate-200 dark:hover:bg-[#333] text-slate-700 dark:text-slate-200 border border-slate-200 dark:border-[#333]",
|
|
ghost: "bg-transparent hover:bg-slate-100 dark:hover:bg-[#2a2a2a] text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-white"
|
|
};
|
|
|
|
return (
|
|
<button className={`${baseClass} ${variants[variant]} ${className}`} {...props}>
|
|
{children}
|
|
</button>
|
|
);
|
|
};
|
|
|
|
export default function DriversView() {
|
|
const { drivers, fetchDrivers } = useDrivers();
|
|
const [searchTerm, setSearchTerm] = useState('');
|
|
|
|
// Note: Drivers View is Read-Only for now as per instructions (just listing)
|
|
// If editing is needed, we can implement it later.
|
|
|
|
useEffect(() => {
|
|
fetchDrivers();
|
|
}, []);
|
|
|
|
const filteredData = Array.isArray(drivers) ? drivers.filter(item =>
|
|
item.NOME_FAVORECIDO?.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
|
item.CPF_CNPJ_FAVORECIDO?.includes(searchTerm)
|
|
) : [];
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
<div className="flex flex-col md:flex-row justify-between items-end md:items-center gap-4">
|
|
<div>
|
|
<h1 className="text-2xl font-black text-slate-800 dark:text-white tracking-tight">Motoristas</h1>
|
|
</div>
|
|
<div className="flex items-center gap-3 w-full md:w-auto">
|
|
<div className="relative flex-1 md:flex-none">
|
|
<Search className="absolute left-3 top-1/2 -translate-y-1/2 text-slate-500" size={16} />
|
|
<input
|
|
className="bg-white dark:bg-[#1c1c1c] border border-slate-200 dark:border-[#2a2a2a] text-slate-700 dark:text-slate-200 pl-10 pr-4 py-2 rounded-xl text-sm focus:outline-none focus:border-emerald-500 w-full md:w-64"
|
|
placeholder="Buscar motorista..."
|
|
value={searchTerm}
|
|
onChange={e => setSearchTerm(e.target.value)}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="h-[600px] w-full max-w-full overflow-hidden min-w-0">
|
|
<ExcelTable
|
|
data={filteredData}
|
|
columns={[
|
|
{ header: 'NOME', field: 'NOME_FAVORECIDO', width: '300px', className: 'font-mono font-bold text-emerald-600 dark:text-emerald-500' },
|
|
{ header: 'CPF/CNPJ', field: 'CPF_CNPJ_FAVORECIDO', width: '180px' },
|
|
{ header: 'TELEFONE', field: 'TELEFONE', width: '150px' },
|
|
{ header: 'ENDEREÇO', field: 'ENDERECO', width: '250px' },
|
|
{ header: 'BASE', field: 'BASE', width: '150px' },
|
|
]}
|
|
filterDefs={[
|
|
{ field: 'NOME_FAVORECIDO', label: 'Nome', type: 'text' },
|
|
{ field: 'BASE', label: 'Base', type: 'select' },
|
|
]}
|
|
// Edit disabled for now
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|