52 lines
2.2 KiB
JavaScript
52 lines
2.2 KiB
JavaScript
import React, { useState } from 'react';
|
|
import { useAutoLab } from '../hooks/useAutoLab';
|
|
import ExcelTable from '../components/ExcelTable';
|
|
import { Plus, Users } from 'lucide-react';
|
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
|
import { Button } from "@/components/ui/button";
|
|
import { toast } from 'sonner';
|
|
|
|
export const ConfigView = () => {
|
|
const { data: usuarios, loading } = useAutoLab('usuarios');
|
|
const [activeTab, setActiveTab] = useState('usuarios');
|
|
|
|
const userColumns = [
|
|
{ header: 'Email', field: 'email', width: '250px' },
|
|
{ header: 'Grupo', field: 'grupo', width: '100px', className: 'text-center' },
|
|
{ header: 'Setor', field: 'setor', width: '100px', className: 'text-center' },
|
|
{ header: 'Nome', field: 'nome', width: '250px', className: 'font-bold' },
|
|
];
|
|
|
|
return (
|
|
<div className="flex flex-col h-full bg-white dark:bg-[#1b1b1b]">
|
|
<div className="p-4 border-b dark:border-zinc-800 bg-slate-50/50 dark:bg-zinc-900/20 flex items-center justify-between gap-4">
|
|
<div className="flex items-center gap-4 flex-1">
|
|
<Tabs value={activeTab} onValueChange={setActiveTab} className="bg-white dark:bg-zinc-900 p-1 rounded-xl border dark:border-zinc-800 shadow-sm">
|
|
<TabsList className="bg-transparent border-none gap-1 h-8">
|
|
<TabsTrigger value="usuarios" className="data-[state=active]:bg-[#1b4332] data-[state=active]:text-white rounded-lg px-4 transition-all">
|
|
<Users size={16} className="mr-2" /> Usuários
|
|
</TabsTrigger>
|
|
</TabsList>
|
|
</Tabs>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-3">
|
|
<Button className="bg-[#1b4332] hover:bg-[#2d6a4f] text-white rounded-xl px-4 py-2 font-bold shadow-lg shadow-emerald-900/10 flex items-center gap-2">
|
|
<Plus size={18} /> Novo Usuário
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex-1 overflow-hidden">
|
|
<ExcelTable
|
|
data={usuarios}
|
|
loading={loading}
|
|
columns={userColumns}
|
|
onEdit={(row) => toast.info(`Editar usuário: ${row.nome}`)}
|
|
onDelete={(row) => toast.error(`Excluir usuário: ${row.nome}`)}
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|