96 lines
4.1 KiB
JavaScript
96 lines
4.1 KiB
JavaScript
import React, { useState, lazy, Suspense } from 'react';
|
|
import { UserPlus, Loader2, Download } from 'lucide-react';
|
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
|
import { downloadAprovados } from '../services/driverService';
|
|
|
|
|
|
// Lazy loading the simplified features to improve initial performance
|
|
const VehiclesView = lazy(() => import('../components/GrVehiclesSimplified'));
|
|
const RegistrationsView = lazy(() => import('../components/GrRegistrationsSimplified'));
|
|
|
|
const GrOpsCadastrosView = () => {
|
|
const [activeTab, setActiveTab] = useState('veiculos');
|
|
const [isDownloading, setIsDownloading] = useState(false);
|
|
|
|
const handleExport = async () => {
|
|
setIsDownloading(true);
|
|
try {
|
|
await downloadAprovados();
|
|
} catch (err) {
|
|
console.error('[GrOpsCadastrosView] Erro ao exportar motoristas aprovados:', err);
|
|
} finally {
|
|
setIsDownloading(false);
|
|
}
|
|
};
|
|
|
|
|
|
return (
|
|
<div className="flex flex-col gap-8 p-6 md:p-10 animate-in fade-in slide-in-from-bottom-4 duration-700">
|
|
<header className="flex flex-col md:flex-row md:items-end justify-between gap-6">
|
|
<div className="space-y-2">
|
|
<h1 className="text-4xl md:text-6xl font-bold text-slate-800 dark:text-white tracking-tighter leading-none">
|
|
Base de <span className="text-[var(--gr-primary)]">Registros</span>
|
|
</h1>
|
|
<p className="text-slate-400 dark:text-slate-500 text-base md:text-lg font-medium italic opacity-80">
|
|
Gestão unificada de frotas e parceiros logísticos
|
|
</p>
|
|
</div>
|
|
|
|
{/* Botão de Exportação de Motoristas Aprovados */}
|
|
<button
|
|
onClick={handleExport}
|
|
disabled={isDownloading}
|
|
className="
|
|
inline-flex items-center gap-2 px-5 py-2.5
|
|
bg-emerald-500 hover:bg-emerald-600 active:bg-emerald-700
|
|
disabled:opacity-60 disabled:cursor-not-allowed
|
|
text-white text-xs font-bold uppercase tracking-widest
|
|
rounded-2xl shadow-md transition-all duration-200
|
|
"
|
|
>
|
|
{isDownloading
|
|
? <Loader2 size={16} className="animate-spin" />
|
|
: <Download size={16} />}
|
|
{isDownloading ? 'Exportando...' : 'Exportar Aprovados'}
|
|
</button>
|
|
</header>
|
|
|
|
<Tabs defaultValue="veiculos" value={activeTab} onValueChange={setActiveTab} className="w-full space-y-8">
|
|
<div className="flex flex-col lg:flex-row gap-6 items-center justify-between bg-white dark:bg-[#1b1b1b] p-4 rounded-[32px] border border-slate-200 dark:border-white/5 shadow-sm">
|
|
<TabsList className="bg-slate-100 dark:bg-[#141414] border-none p-1.5 h-auto rounded-2xl gap-2">
|
|
<TabsTrigger
|
|
value="veiculos"
|
|
className="px-8 py-2.5 rounded-xl text-[10px] font-bold uppercase tracking-widest data-[state=active]:bg-white dark:data-[state=active]:bg-[#1b1b1b] data-[state=active]:text-[var(--gr-primary)] data-[state=active]:shadow-sm text-slate-400"
|
|
>
|
|
Veículos
|
|
</TabsTrigger>
|
|
<TabsTrigger
|
|
value="motoristas"
|
|
className="px-8 py-2.5 rounded-xl text-[10px] font-bold uppercase tracking-widest data-[state=active]:bg-white dark:data-[state=active]:bg-[#1b1b1b] data-[state=active]:text-[var(--gr-primary)] data-[state=active]:shadow-sm text-slate-400"
|
|
>
|
|
Motoristas e Parceiros
|
|
</TabsTrigger>
|
|
</TabsList>
|
|
</div>
|
|
|
|
<div className="min-h-[600px] relative">
|
|
<Suspense fallback={
|
|
<div className="absolute inset-0 flex items-center justify-center">
|
|
<Loader2 className="animate-spin text-[var(--gr-primary)]" size={48} />
|
|
</div>
|
|
}>
|
|
<TabsContent value="veiculos" className="m-0 focus-visible:outline-none">
|
|
<VehiclesView />
|
|
</TabsContent>
|
|
<TabsContent value="motoristas" className="m-0 focus-visible:outline-none">
|
|
<RegistrationsView />
|
|
</TabsContent>
|
|
</Suspense>
|
|
</div>
|
|
</Tabs>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default GrOpsCadastrosView;
|