91 lines
3.4 KiB
TypeScript
91 lines
3.4 KiB
TypeScript
import React from 'react';
|
|
import { UsuarioMatriz, GrupoRecurso } from '@/hooks/useMatrizAcessos';
|
|
import { Badge } from '@/components/ui/badge';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
|
|
import { Eye, EyeOff, ShieldCheck, CheckCircle2, XCircle, RotateCcw } from 'lucide-react';
|
|
|
|
interface SimuladorVisaoBarProps {
|
|
usuarios: UsuarioMatriz[];
|
|
grupos: GrupoRecurso[];
|
|
usuarioSimuladoId: string | null;
|
|
onSelectUsuarioSimulado: (id: string | null) => void;
|
|
}
|
|
|
|
export const SimuladorVisaoBar: React.FC<SimuladorVisaoBarProps> = ({
|
|
usuarios,
|
|
grupos,
|
|
usuarioSimuladoId,
|
|
onSelectUsuarioSimulado,
|
|
}) => {
|
|
const usuarioSimulado = usuarios.find((u) => u.id === usuarioSimuladoId);
|
|
|
|
// Total de módulos disponíveis
|
|
const totalModulos = grupos.reduce((acc, g) => acc + g.recursos.length, 0);
|
|
const totalPermitidos = usuarioSimulado ? usuarioSimulado.recursosPermitidos.size : 0;
|
|
|
|
return (
|
|
<div className="rounded-xl border border-border/80 bg-muted/30 p-3 flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3 text-xs">
|
|
<div className="flex items-center gap-2.5">
|
|
<div className="p-2 rounded-lg bg-primary/10 text-primary">
|
|
<Eye className="h-4 w-4" />
|
|
</div>
|
|
<div>
|
|
<span className="font-bold text-foreground block">
|
|
Simulador de Visão do Usuário
|
|
</span>
|
|
<span className="text-muted-foreground text-[11px]">
|
|
Selecione um usuário para auditar instantaneamente o que ele enxerga no sistema.
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-2 w-full sm:w-auto justify-end">
|
|
<Select
|
|
value={usuarioSimuladoId || 'nenhum'}
|
|
onValueChange={(val) => onSelectUsuarioSimulado(val === 'nenhum' ? null : val)}
|
|
>
|
|
<SelectTrigger className="w-full sm:w-[220px] h-8 text-xs bg-background">
|
|
<SelectValue placeholder="Selecione um usuário..." />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="nenhum">Nenhum (Visão do Admin)</SelectItem>
|
|
{usuarios.map((u) => (
|
|
<SelectItem key={u.id} value={u.id}>
|
|
{u.fullName} ({u.functionName})
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
|
|
{usuarioSimulado && (
|
|
<>
|
|
<Badge
|
|
variant="outline"
|
|
className={`h-7 px-2 border font-semibold flex items-center gap-1 ${
|
|
usuarioSimulado.recursosPermitidos.has('modo-smart') && totalPermitidos <= 4
|
|
? 'border-emerald-500/40 bg-emerald-500/10 text-emerald-400'
|
|
: 'border-sky-500/40 bg-sky-500/10 text-sky-400'
|
|
}`}
|
|
>
|
|
<CheckCircle2 className="h-3 w-3" />
|
|
{usuarioSimulado.recursosPermitidos.has('modo-smart') && totalPermitidos <= 4
|
|
? 'Modo Smart Exclusivo'
|
|
: `${totalPermitidos}/${totalModulos} Módulos`}
|
|
</Badge>
|
|
|
|
<Button
|
|
size="sm"
|
|
variant="ghost"
|
|
onClick={() => onSelectUsuarioSimulado(null)}
|
|
className="h-8 text-xs text-muted-foreground hover:text-foreground"
|
|
>
|
|
<RotateCcw className="h-3.5 w-3.5" />
|
|
</Button>
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|