156 lines
8.7 KiB
JavaScript
156 lines
8.7 KiB
JavaScript
import React from 'react';
|
|
import {
|
|
BookUser,
|
|
MapPin,
|
|
Phone,
|
|
CheckCircle2,
|
|
Search,
|
|
Plus,
|
|
ExternalLink,
|
|
ShieldCheck,
|
|
Star
|
|
} from 'lucide-react';
|
|
import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card';
|
|
import { Badge } from '@/components/ui/badge';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Input } from '@/components/ui/input';
|
|
import { motion } from 'framer-motion';
|
|
import { cn } from "@/lib/utils";
|
|
|
|
/**
|
|
* Cadastro de Prestadores (Oficinas e Parceiros).
|
|
* Listagem conforme mockup.
|
|
*/
|
|
export const PartnerListView = () => {
|
|
const oficinas = [
|
|
{ id: 1, nome: 'Oficina Central', cidade: 'São Paulo', uf: 'SP', status: 'Ativo', telefone: '(11) 9999-9999', score: 4.8 },
|
|
{ id: 2, nome: 'Pneus e Cia', cidade: 'Manaus', uf: 'AM', status: 'Ativo', telefone: '(92) 8888-8888', score: 4.5 },
|
|
{ id: 3, nome: 'Auto Elétrica Sul', cidade: 'Porto Alegre', uf: 'RS', status: 'Inativo', telefone: '(51) 7777-7777', score: 3.9 }
|
|
];
|
|
|
|
return (
|
|
<div className="space-y-6 pb-10 animate-in fade-in duration-500">
|
|
<div className="flex flex-col md:flex-row items-start md:items-center justify-between gap-4">
|
|
<div className="space-y-1">
|
|
<div className="flex items-center gap-2 text-primary">
|
|
<ShieldCheck size={16} />
|
|
<span className="text-[10px] font-black uppercase tracking-[0.2em]">Rede Credenciada</span>
|
|
</div>
|
|
<h2 className="text-3xl font-black tracking-tighter text-slate-900 dark:text-white">Oficinas e Parceiros</h2>
|
|
<p className="text-sm text-slate-500 font-medium font-inter">Gestão de prestadores de serviço e rede técnica</p>
|
|
</div>
|
|
<Button className="gap-2 font-black uppercase tracking-widest text-[10px] h-11 px-6 shadow-xl shadow-primary/20 bg-primary hover:bg-primary/90 transition-all active:scale-95 rounded-xl">
|
|
<Plus size={16} /> Novo Prestador
|
|
</Button>
|
|
</div>
|
|
|
|
<Card className="border-none shadow-2xl shadow-slate-200/50 dark:shadow-none overflow-hidden ring-1 ring-slate-200 dark:ring-white/5 bg-white dark:bg-slate-900/50 backdrop-blur-xl rounded-[2rem]">
|
|
<CardHeader className="bg-slate-50/50 dark:bg-white/[0.02] border-b border-slate-100 dark:border-white/5 px-8 py-6">
|
|
<div className="flex flex-col md:flex-row items-center justify-between gap-6">
|
|
<div className="relative max-w-md w-full">
|
|
<Search className="absolute left-4 top-1/2 -translate-y-1/2 text-slate-400" size={18} />
|
|
<Input
|
|
placeholder="Buscar oficina, cidade ou especialidade..."
|
|
className="pl-12 h-12 bg-white dark:bg-slate-900 border-slate-200 dark:border-white/10 rounded-2xl text-sm font-medium focus:ring-2 focus:ring-primary/20 transition-all shadow-sm"
|
|
/>
|
|
</div>
|
|
<div className="flex items-center gap-4">
|
|
<div className="h-10 w-px bg-slate-200 dark:bg-white/10 hidden md:block" />
|
|
<div className="flex gap-2 text-slate-500 text-xs font-bold uppercase tracking-wider">
|
|
Filtros: <span className="text-primary italic">Todos ativos</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</CardHeader>
|
|
<div className="overflow-x-auto">
|
|
<table className="w-full text-left border-collapse">
|
|
<thead>
|
|
<tr className="bg-slate-50/20 dark:bg-white/[0.01]">
|
|
<th className="px-8 py-5 text-[11px] uppercase font-black text-slate-400 tracking-[0.15em] border-b border-slate-100 dark:border-white/5">Oficina / Estabelecimento</th>
|
|
<th className="px-8 py-5 text-[11px] uppercase font-black text-slate-400 tracking-[0.15em] border-b border-slate-100 dark:border-white/5">Localização</th>
|
|
<th className="px-8 py-5 text-[11px] uppercase font-black text-slate-400 tracking-[0.15em] border-b border-slate-100 dark:border-white/5">Contato Direto</th>
|
|
<th className="px-8 py-5 text-[11px] uppercase font-black text-slate-400 tracking-[0.15em] border-b border-slate-100 dark:border-white/5 text-center">Status</th>
|
|
<th className="px-8 py-5 text-[11px] uppercase font-black text-slate-400 tracking-[0.15em] border-b border-slate-100 dark:border-white/5 text-right">Ações</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y divide-slate-100 dark:divide-white/5">
|
|
{oficinas.map((o) => (
|
|
<motion.tr
|
|
key={o.id}
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
className="hover:bg-slate-50/80 dark:hover:bg-white/[0.02] transition-colors group cursor-default"
|
|
>
|
|
<td className="px-8 py-6">
|
|
<div className="flex items-center gap-4">
|
|
<div className="w-12 h-12 rounded-2xl bg-slate-100 dark:bg-white/5 flex items-center justify-center text-slate-500 dark:text-slate-400 border border-slate-200 dark:border-white/10 group-hover:bg-primary/10 group-hover:text-primary group-hover:border-primary/20 transition-all duration-300">
|
|
<BookUser size={22} />
|
|
</div>
|
|
<div className="space-y-1">
|
|
<span className="text-base font-black text-slate-800 dark:text-white leading-none block">{o.nome}</span>
|
|
<div className="flex items-center gap-1 text-amber-500">
|
|
<Star size={10} className="fill-current" />
|
|
<span className="text-[10px] font-bold">{o.score}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td className="px-8 py-6">
|
|
<div className="space-y-1">
|
|
<div className="flex items-center gap-2 text-slate-600 dark:text-slate-300 text-sm font-bold">
|
|
<MapPin size={14} className="text-primary" />
|
|
{o.cidade}
|
|
</div>
|
|
<span className="text-[10px] font-bold text-slate-400 uppercase tracking-widest pl-5">{o.uf} • BR</span>
|
|
</div>
|
|
</td>
|
|
<td className="px-8 py-6">
|
|
<div className="flex items-center gap-3">
|
|
<div className="w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center text-primary">
|
|
<Phone size={14} />
|
|
</div>
|
|
<span className="text-sm font-mono font-black text-slate-700 dark:text-slate-300 tracking-tighter">{o.telefone}</span>
|
|
</div>
|
|
</td>
|
|
<td className="px-8 py-6 text-center">
|
|
<Badge className={cn(
|
|
"font-black text-[11px] uppercase tracking-wider px-4 py-1.5 rounded-xl border-none shadow-sm",
|
|
o.status === 'Ativo'
|
|
? "bg-emerald-500/10 text-emerald-600 dark:bg-emerald-500/20 shadow-emerald-500/10"
|
|
: "bg-slate-500/10 text-slate-400 dark:bg-white/5 shadow-none"
|
|
)}>
|
|
{o.status}
|
|
</Badge>
|
|
</td>
|
|
<td className="px-8 py-6 text-right">
|
|
<Button variant="ghost" className="h-10 w-10 p-0 rounded-2xl hover:bg-primary hover:text-white transition-all shadow-hover duration-300">
|
|
<ExternalLink size={18} />
|
|
</Button>
|
|
</td>
|
|
</motion.tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</Card>
|
|
|
|
{/* Dynamic Summary */}
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
|
<div className="p-6 bg-emerald-500/5 border border-emerald-500/10 rounded-3xl">
|
|
<h4 className="text-[10px] font-black text-emerald-600 uppercase tracking-widest mb-2">Total Ativos</h4>
|
|
<div className="text-3xl font-black text-emerald-700">124</div>
|
|
</div>
|
|
<div className="p-6 bg-primary/5 border border-primary/10 rounded-3xl">
|
|
<h4 className="text-[10px] font-black text-primary uppercase tracking-widest mb-2">Especialidades</h4>
|
|
<div className="text-3xl font-black text-blue-700 font-mono">12+</div>
|
|
</div>
|
|
<div className="p-6 bg-slate-100/50 border border-slate-200 rounded-3xl">
|
|
<h4 className="text-[10px] font-black text-slate-500 uppercase tracking-widest mb-2">SLA Médio</h4>
|
|
<div className="text-3xl font-black text-slate-700">4.8h</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|