From 6f595d683974296512cb7fe0be23bcad553a447a Mon Sep 17 00:00:00 2001 From: admbrainsteel Date: Fri, 25 Sep 2026 12:06:27 -0300 Subject: [PATCH] feat: Alto contraste no modo claro e criacao de templates customizados no Modo Smart --- .../users/matriz/CriarSmartTemplateModal.tsx | 137 ++++++++++ .../users/matriz/MatrizSmartAvancadoModal.tsx | 249 +++++++++++------- src/hooks/useSmartPermissions.ts | 135 ++++++++-- src/types/smartPermissions.ts | 113 ++++++++ 4 files changed, 518 insertions(+), 116 deletions(-) create mode 100644 src/components/users/matriz/CriarSmartTemplateModal.tsx diff --git a/src/components/users/matriz/CriarSmartTemplateModal.tsx b/src/components/users/matriz/CriarSmartTemplateModal.tsx new file mode 100644 index 0000000..a843338 --- /dev/null +++ b/src/components/users/matriz/CriarSmartTemplateModal.tsx @@ -0,0 +1,137 @@ +import React, { useState } from 'react'; +import { + Dialog, + DialogContent, + DialogHeader, + DialogTitle, + DialogDescription, + DialogFooter, +} from '@/components/ui/dialog'; +import { Button } from '@/components/ui/button'; +import { Input } from '@/components/ui/input'; +import { Label } from '@/components/ui/label'; +import { Badge } from '@/components/ui/badge'; +import { Sparkles, Save, CheckCircle2 } from 'lucide-react'; +import { SMART_SUBMODULES } from '@/types/smartPermissions'; + +interface CriarSmartTemplateModalProps { + isOpen: boolean; + onClose: () => void; + currentPermissions: Record; + onSalvarTemplate: ( + nome: string, + descricao: string, + permissions: Record + ) => boolean; +} + +export const CriarSmartTemplateModal: React.FC = ({ + isOpen, + onClose, + currentPermissions, + onSalvarTemplate, +}) => { + const [nome, setNome] = useState(''); + const [descricao, setDescricao] = useState(''); + + const handleSalvar = (e: React.FormEvent) => { + e.preventDefault(); + const ok = onSalvarTemplate(nome, descricao, currentPermissions); + if (ok) { + setNome(''); + setDescricao(''); + onClose(); + } + }; + + // Contagem de permissões ativas + const totalVisualizar = Object.values(currentPermissions).filter((p) => p.can_view).length; + const totalEditar = Object.values(currentPermissions).filter((p) => p.can_edit).length; + const totalExcluir = Object.values(currentPermissions).filter((p) => p.can_delete).length; + + return ( + !open && onClose()}> + + +
+
+ +
+ + Criar Novo Template do Modo Smart + +
+ + Salve a configuração atual de permissões como um template reutilizável para aplicar em outros operadores com 1 clique. + + + +
+
+ + setNome(e.target.value)} + required + className="h-9 text-xs bg-background border-slate-300 dark:border-border text-foreground font-medium" + autoFocus + /> +
+ +
+ + setDescricao(e.target.value)} + className="h-9 text-xs bg-background border-slate-300 dark:border-border text-foreground font-medium" + /> +
+ + {/* RESUMO DAS PERMISSÕES CAPTURADAS */} +
+ + Permissões capturadas da tela: + +
+ + {totalVisualizar} Visualizar + + + {totalEditar} Apontar/Editar + + + {totalExcluir} Excluir + +
+
+ + + + + +
+ + + ); +}; diff --git a/src/components/users/matriz/MatrizSmartAvancadoModal.tsx b/src/components/users/matriz/MatrizSmartAvancadoModal.tsx index ef264cd..6752371 100644 --- a/src/components/users/matriz/MatrizSmartAvancadoModal.tsx +++ b/src/components/users/matriz/MatrizSmartAvancadoModal.tsx @@ -39,9 +39,13 @@ import { Info, Sparkles, Lock, + Plus, + BookmarkPlus, + X, } from 'lucide-react'; import { useSmartPermissions } from '@/hooks/useSmartPermissions'; -import { SMART_SUBMODULES } from '@/types/smartPermissions'; +import { SMART_SUBMODULES, SmartCustomTemplate } from '@/types/smartPermissions'; +import { CriarSmartTemplateModal } from './CriarSmartTemplateModal'; interface MatrizSmartAvancadoModalProps { isOpen: boolean; @@ -56,17 +60,21 @@ export const MatrizSmartAvancadoModal: React.FC = loading, saving, users, + templates, selectedUserId, setSelectedUserId, selectedUser, togglePermission, updateNotificationConfig, salvarConfiguracaoUsuario, - aplicarTemplateSmart, + aplicarTemplate, + criarNovoTemplate, + removerTemplateCustom, recarregar, } = useSmartPermissions(); const [busca, setBusca] = useState(''); + const [modalCriarTemplateOpen, setModalCriarTemplateOpen] = useState(false); const usersFiltrados = users.filter((u) => { const termo = busca.toLowerCase(); @@ -80,43 +88,49 @@ export const MatrizSmartAvancadoModal: React.FC = const getIconComponent = (icone: string) => { switch (icone) { case 'FileText': - return ; + return ; case 'Layers': - return ; + return ; case 'Flame': - return ; + return ; case 'CheckCircle2': - return ; + return ; case 'Zap': - return ; + return ; case 'Box': - return ; + return ; case 'ExternalLink': - return ; + return ; case 'Truck': - return ; + return ; case 'Wrench': - return ; + return ; case 'FileSpreadsheet': - return ; + return ; + case 'Shield': + return ; + case 'Factory': + return ; + case 'Eye': + return ; default: - return ; + return ; } }; return ( !open && onClose()}> - + {/* CABEÇALHO DO MODAL */}
-
+
- + Gestão Avançada de Privilégios & Notificações - + Modo Smart @@ -130,7 +144,7 @@ export const MatrizSmartAvancadoModal: React.FC = {/* CORPO PRINCIPAL COM SIDEBAR DE USUÁRIOS E ÁREA DE CONFIGURAÇÃO */}
{/* SIDEBAR DE USUÁRIOS */} -
+
@@ -138,7 +152,7 @@ export const MatrizSmartAvancadoModal: React.FC = placeholder="Buscar colaborador..." value={busca} onChange={(e) => setBusca(e.target.value)} - className="pl-8 text-xs h-8 bg-card" + className="pl-8 text-xs h-8 bg-card border-slate-300 dark:border-border text-foreground font-medium" />
@@ -161,8 +175,8 @@ export const MatrizSmartAvancadoModal: React.FC = onClick={() => setSelectedUserId(user.userId)} className={`w-full text-left p-2.5 rounded-xl transition-all flex items-center gap-2.5 ${ isSelected - ? 'bg-emerald-500/15 border border-emerald-500/30 text-foreground shadow-sm' - : 'hover:bg-muted/50 text-muted-foreground hover:text-foreground' + ? 'bg-emerald-500/15 border border-emerald-500/40 text-foreground shadow-sm' + : 'hover:bg-muted/60 text-muted-foreground hover:text-foreground' }`} > @@ -172,15 +186,15 @@ export const MatrizSmartAvancadoModal: React.FC =
-

+

{user.fullName}

-

+

{user.functionName}

{user.whatsappNumber && ( -
+
)} @@ -194,9 +208,9 @@ export const MatrizSmartAvancadoModal: React.FC = {/* ÁREA DE CONFIGURAÇÃO DO USUÁRIO SELECIONADO */}
{selectedUser ? ( -
- {/* CABEÇALHO DO USUÁRIO + AÇÕES RÁPIDAS */} -
+
+ {/* CABEÇALHO DO USUÁRIO + PERFIL */} +
@@ -205,82 +219,125 @@ export const MatrizSmartAvancadoModal: React.FC =
-

+

{selectedUser.fullName}

- {selectedUser.email} + {selectedUser.email} • - {selectedUser.functionName} + {selectedUser.functionName}

- {/* TEMPLATES E BOTÃO SALVAR */} -
+ {/* BOTÃO PRINCIPAL DE SALVAR ALTERAÇÕES */} + +
+ + {/* BARRA DE TEMPLATES RÁPIDOS & CRIAR NOVO TEMPLATE */} +
+
+
+ + Templates de Acesso em 1 Clique +
- -
+ + {/* CHIPS DE TEMPLATES */} +
+ {templates.map((tpl) => ( +
+ + + {/* Botão para deletar template customizado */} + {tpl.isCustom && ( + + )} +
+ ))} +
{/* SEÇÃO 1: MATRIZ DE ACESSO AOS SUBMÓDULOS */}
-

- +

+ 1. Permissões Granulares nos Submódulos (Modo Smart)

- + Controle de Visualização, Edição/Apontamento e Exclusão

-
+
- + -
Submódulo / Recurso - + Visualizar - + + Apontar / Editar - + Excluir @@ -302,14 +359,14 @@ export const MatrizSmartAvancadoModal: React.FC = >
-
+
{getIconComponent(sub.icone)}
-

+

{sub.nome}

-

+

{sub.descricao}

@@ -361,19 +418,19 @@ export const MatrizSmartAvancadoModal: React.FC = {/* SEÇÃO 2: NOTIFICAÇÕES & CANAL WHATSAPP VIA ÚNICA */}
-

- +

+ 2. Notificações do Usuário (E-mail & WhatsApp BrainSteel)

- {/* BANNER INFORMATIVO: REGRA DE VIA ÚNICA */} -
- + {/* BANNER INFORMATIVO: ALTO CONTRASTE NO MODO CLARO E ESCURO */} +
+
-

+

Comunicação Estritamente Unidirecional (Via Única) no WhatsApp

-

+

O número oficial da BrainSteel é configurado para somente enviar alertas, relatórios e métricas de produção. Mensagens de resposta enviadas pelo colaborador não serão recebidas nem respondidas pelo sistema.

@@ -382,14 +439,14 @@ export const MatrizSmartAvancadoModal: React.FC = {/* GRID DE CONFIGURAÇÕES DE CANAL */}
{/* CANAL WHATSAPP */} -
-
+
+
Canal WhatsApp do Colaborador
-
@@ -412,10 +469,10 @@ export const MatrizSmartAvancadoModal: React.FC =
-
@@ -433,10 +490,10 @@ export const MatrizSmartAvancadoModal: React.FC =
-
@@ -455,8 +512,8 @@ export const MatrizSmartAvancadoModal: React.FC =
{/* CANAL E-MAIL */} -
-
+
+
Canal de E-mail ({selectedUser.email})
@@ -464,10 +521,10 @@ export const MatrizSmartAvancadoModal: React.FC =
-
@@ -485,10 +542,10 @@ export const MatrizSmartAvancadoModal: React.FC =
-
@@ -525,12 +582,22 @@ export const MatrizSmartAvancadoModal: React.FC = variant="outline" size="sm" onClick={onClose} - className="text-xs h-8" + className="text-xs h-8 font-medium" > Fechar
+ + {/* MODAL PARA SALVAR NOVO TEMPLATE PERSONALIZADO */} + {selectedUser && ( + setModalCriarTemplateOpen(false)} + currentPermissions={selectedUser.permissions} + onSalvarTemplate={criarNovoTemplate} + /> + )} ); }; diff --git a/src/hooks/useSmartPermissions.ts b/src/hooks/useSmartPermissions.ts index 661d9bb..d0ea295 100644 --- a/src/hooks/useSmartPermissions.ts +++ b/src/hooks/useSmartPermissions.ts @@ -1,13 +1,29 @@ import { useState, useEffect, useCallback } from 'react'; import { supabase } from '@/integrations/supabase/client'; import { toast } from 'sonner'; -import { SMART_SUBMODULES, SmartUserConfig } from '@/types/smartPermissions'; +import { + SMART_SUBMODULES, + SMART_DEFAULT_TEMPLATES, + SmartCustomTemplate, + SmartUserConfig, +} from '@/types/smartPermissions'; + +const STORAGE_KEY_TEMPLATES = 'tracksteel_custom_smart_templates'; export function useSmartPermissions() { const [loading, setLoading] = useState(true); const [saving, setSaving] = useState(false); const [users, setUsers] = useState([]); const [selectedUserId, setSelectedUserId] = useState(null); + const [templates, setTemplates] = useState(() => { + try { + const saved = localStorage.getItem(STORAGE_KEY_TEMPLATES); + const customTemplates: SmartCustomTemplate[] = saved ? JSON.parse(saved) : []; + return [...SMART_DEFAULT_TEMPLATES, ...customTemplates]; + } catch { + return SMART_DEFAULT_TEMPLATES; + } + }); const carregarDados = useCallback(async () => { try { @@ -40,8 +56,11 @@ export function useSmartPermissions() { if (permError) throw permError; // Montar mapa de permissões por usuário - const permsByUser: Record> = {}; - + const permsByUser: Record< + string, + Record + > = {}; + (perms || []).forEach((p: any) => { if (!permsByUser[p.user_id]) { permsByUser[p.user_id] = {}; @@ -55,7 +74,10 @@ export function useSmartPermissions() { const formattedUsers: SmartUserConfig[] = (profiles || []).map((prof: any) => { const userPerms = permsByUser[prof.id] || {}; - const mergedPerms: Record = {}; + const mergedPerms: Record< + string, + { can_view: boolean; can_edit: boolean; can_delete: boolean } + > = {}; SMART_SUBMODULES.forEach((sub) => { if (userPerms[sub.key]) { @@ -108,7 +130,11 @@ export function useSmartPermissions() { setUsers((prev) => prev.map((u) => { if (u.userId !== userId) return u; - const current = u.permissions[resourceKey] || { can_view: false, can_edit: false, can_delete: false }; + const current = u.permissions[resourceKey] || { + can_view: false, + can_edit: false, + can_delete: false, + }; const updated = { ...current, [field]: !current[field], @@ -137,7 +163,12 @@ export function useSmartPermissions() { // Atualizar dados de notificação no estado local const updateNotificationConfig = ( userId: string, - field: 'whatsappNumber' | 'notifEmailApontamentos' | 'notifEmailMetricas' | 'notifWhatsappApontamentos' | 'notifWhatsappMetricas', + field: + | 'whatsappNumber' + | 'notifEmailApontamentos' + | 'notifEmailMetricas' + | 'notifWhatsappApontamentos' + | 'notifWhatsappMetricas', value: any ) => { setUsers((prev) => @@ -169,14 +200,16 @@ export function useSmartPermissions() { if (profError) throw profError; // 2. Fazer Upsert das permissões na tabela smart_user_permissions - const rowsToUpsert = Object.entries(userToSave.permissions).map(([resource_key, perm]) => ({ - user_id: userId, - resource_key, - can_view: perm.can_view, - can_edit: perm.can_edit, - can_delete: perm.can_delete, - updated_at: new Date().toISOString(), - })); + const rowsToUpsert = Object.entries(userToSave.permissions).map( + ([resource_key, perm]) => ({ + user_id: userId, + resource_key, + can_view: perm.can_view, + can_edit: perm.can_edit, + can_delete: perm.can_delete, + updated_at: new Date().toISOString(), + }) + ); const { error: permError } = await (supabase as any) .from('smart_user_permissions') @@ -193,20 +226,21 @@ export function useSmartPermissions() { } }; - // Aplicar Template Padrão (Chão de Fábrica ou Administrador) - const aplicarTemplateSmart = (userId: string, tipo: 'operador' | 'admin' | 'leitura') => { + // Aplicar qualquer template + const aplicarTemplate = (userId: string, template: SmartCustomTemplate) => { setUsers((prev) => prev.map((u) => { if (u.userId !== userId) return u; - const newPerms: Record = {}; + const newPerms: Record< + string, + { can_view: boolean; can_edit: boolean; can_delete: boolean } + > = {}; SMART_SUBMODULES.forEach((sub) => { - if (tipo === 'operador') { - newPerms[sub.key] = { ...sub.padraoOperador }; - } else if (tipo === 'admin') { - newPerms[sub.key] = { can_view: true, can_edit: true, can_delete: true }; - } else if (tipo === 'leitura') { - newPerms[sub.key] = { can_view: true, can_edit: false, can_delete: false }; + if (template.permissions[sub.key]) { + newPerms[sub.key] = { ...template.permissions[sub.key] }; + } else { + newPerms[sub.key] = { can_view: false, can_edit: false, can_delete: false }; } }); @@ -216,20 +250,71 @@ export function useSmartPermissions() { }; }) ); - toast.info(`Template ${tipo.toUpperCase()} aplicado na tela. Clique em "Salvar" para confirmar.`); + toast.info(`Template "${template.nome}" aplicado. Clique em "Salvar Alterações" para confirmar.`); + }; + + // Criar e salvar novo template customizado + const criarNovoTemplate = ( + nome: string, + descricao: string, + permissions: Record + ) => { + if (!nome.trim()) { + toast.error('Informe um nome para o template.'); + return false; + } + + const novoTemplate: SmartCustomTemplate = { + id: `custom_${Date.now()}`, + nome: nome.trim(), + descricao: descricao.trim() || 'Template personalizado pelo gestor.', + icone: 'Sparkles', + badge: 'Personalizado', + isCustom: true, + permissions: JSON.parse(JSON.stringify(permissions)), + }; + + const updated = [...templates, novoTemplate]; + setTemplates(updated); + + try { + const customOnly = updated.filter((t) => t.isCustom); + localStorage.setItem(STORAGE_KEY_TEMPLATES, JSON.stringify(customOnly)); + toast.success(`Novo template "${novoTemplate.nome}" criado com sucesso!`); + return true; + } catch (e) { + console.error('Erro ao salvar template customizado:', e); + return false; + } + }; + + // Remover template customizado + const removerTemplateCustom = (templateId: string) => { + const updated = templates.filter((t) => t.id !== templateId); + setTemplates(updated); + try { + const customOnly = updated.filter((t) => t.isCustom); + localStorage.setItem(STORAGE_KEY_TEMPLATES, JSON.stringify(customOnly)); + toast.success('Template removido com sucesso.'); + } catch (e) { + console.error('Erro ao remover template:', e); + } }; return { loading, saving, users, + templates, selectedUserId, setSelectedUserId, selectedUser, togglePermission, updateNotificationConfig, salvarConfiguracaoUsuario, - aplicarTemplateSmart, + aplicarTemplate, + criarNovoTemplate, + removerTemplateCustom, recarregar: carregarDados, }; } diff --git a/src/types/smartPermissions.ts b/src/types/smartPermissions.ts index 8ce6409..5bbe4d6 100644 --- a/src/types/smartPermissions.ts +++ b/src/types/smartPermissions.ts @@ -83,6 +83,119 @@ export const SMART_SUBMODULES: SmartSubmodule[] = [ }, ]; +export interface SmartCustomTemplate { + id: string; + nome: string; + descricao: string; + icone: string; + badge?: string; + isCustom?: boolean; + permissions: Record; +} + +export const SMART_DEFAULT_TEMPLATES: SmartCustomTemplate[] = [ + { + id: 'operador_padrao', + nome: 'Padrão Operador', + descricao: 'Focado em apontamento de peças, montagem e relatórios básicos.', + icone: 'Factory', + badge: 'Chão de Fábrica', + isCustom: false, + permissions: { + smart_of: { can_view: true, can_edit: false, can_delete: false }, + smart_fases: { can_view: true, can_edit: false, can_delete: false }, + smart_processos: { can_view: true, can_edit: false, can_delete: false }, + smart_apontamento: { can_view: true, can_edit: true, can_delete: false }, + smart_forcar_apontamento: { can_view: false, can_edit: false, can_delete: false }, + smart_3d: { can_view: true, can_edit: false, can_delete: false }, + smart_modo_completo: { can_view: false, can_edit: false, can_delete: false }, + smart_romaneios: { can_view: true, can_edit: false, can_delete: false }, + smart_montagem: { can_view: true, can_edit: true, can_delete: false }, + smart_relatorios: { can_view: true, can_edit: true, can_delete: false }, + }, + }, + { + id: 'lider_producao', + nome: 'Líder de Produção', + descricao: 'Permite forçar apontamentos com pendências e gerar todos os relatórios.', + icone: 'Zap', + badge: 'Liderança', + isCustom: false, + permissions: { + smart_of: { can_view: true, can_edit: true, can_delete: false }, + smart_fases: { can_view: true, can_edit: true, can_delete: false }, + smart_processos: { can_view: true, can_edit: true, can_delete: false }, + smart_apontamento: { can_view: true, can_edit: true, can_delete: true }, + smart_forcar_apontamento: { can_view: true, can_edit: true, can_delete: false }, + smart_3d: { can_view: true, can_edit: false, can_delete: false }, + smart_modo_completo: { can_view: true, can_edit: false, can_delete: false }, + smart_romaneios: { can_view: true, can_edit: true, can_delete: false }, + smart_montagem: { can_view: true, can_edit: true, can_delete: false }, + smart_relatorios: { can_view: true, can_edit: true, can_delete: false }, + }, + }, + { + id: 'inspetor_qualidade', + nome: 'Inspetor de Qualidade', + descricao: 'Acesso ao 3D, relatórios, romaneios e visualização completa de processos.', + icone: 'CheckCircle2', + badge: 'Qualidade', + isCustom: false, + permissions: { + smart_of: { can_view: true, can_edit: false, can_delete: false }, + smart_fases: { can_view: true, can_edit: false, can_delete: false }, + smart_processos: { can_view: true, can_edit: false, can_delete: false }, + smart_apontamento: { can_view: true, can_edit: false, can_delete: false }, + smart_forcar_apontamento: { can_view: false, can_edit: false, can_delete: false }, + smart_3d: { can_view: true, can_edit: false, can_delete: false }, + smart_modo_completo: { can_view: false, can_edit: false, can_delete: false }, + smart_romaneios: { can_view: true, can_edit: false, can_delete: false }, + smart_montagem: { can_view: true, can_edit: false, can_delete: false }, + smart_relatorios: { can_view: true, can_edit: true, can_delete: false }, + }, + }, + { + id: 'total_admin', + nome: 'Total Admin', + descricao: 'Acesso irrestrito a todos os submódulos, forçar apontamentos e modo completo.', + icone: 'Shield', + badge: 'Administrador', + isCustom: false, + permissions: { + smart_of: { can_view: true, can_edit: true, can_delete: true }, + smart_fases: { can_view: true, can_edit: true, can_delete: true }, + smart_processos: { can_view: true, can_edit: true, can_delete: true }, + smart_apontamento: { can_view: true, can_edit: true, can_delete: true }, + smart_forcar_apontamento: { can_view: true, can_edit: true, can_delete: true }, + smart_3d: { can_view: true, can_edit: true, can_delete: true }, + smart_modo_completo: { can_view: true, can_edit: true, can_delete: true }, + smart_romaneios: { can_view: true, can_edit: true, can_delete: true }, + smart_montagem: { can_view: true, can_edit: true, can_delete: true }, + smart_relatorios: { can_view: true, can_edit: true, can_delete: true }, + }, + }, + { + id: 'apenas_leitura', + nome: 'Apenas Leitura', + descricao: 'Somente visualização de OFs, peças, 3D e status sem permissão de apontamento.', + icone: 'Eye', + badge: 'Consulta', + isCustom: false, + permissions: { + smart_of: { can_view: true, can_edit: false, can_delete: false }, + smart_fases: { can_view: true, can_edit: false, can_delete: false }, + smart_processos: { can_view: true, can_edit: false, can_delete: false }, + smart_apontamento: { can_view: false, can_edit: false, can_delete: false }, + smart_forcar_apontamento: { can_view: false, can_edit: false, can_delete: false }, + smart_3d: { can_view: true, can_edit: false, can_delete: false }, + smart_modo_completo: { can_view: false, can_edit: false, can_delete: false }, + smart_romaneios: { can_view: true, can_edit: false, can_delete: false }, + smart_montagem: { can_view: true, can_edit: false, can_delete: false }, + smart_relatorios: { can_view: true, can_edit: false, can_delete: false }, + }, + }, +]; + export interface SmartUserPermission { id?: string; user_id: string;