feat: Gestao Avancada de Privilegios e Notificacoes do Modo Smart

src/components/users/matriz/MatrizAcessosPainel.tsx

@@ -2,11 +2,12 @@ import React, { useState } from 'react';
 import { useMatrizAcessos, UsuarioMatriz } from '@/hooks/useMatrizAcessos';
 import { MatrizGrid } from './MatrizGrid';
 import { MatrizTemplatesModal } from './MatrizTemplatesModal';
+import { MatrizSmartAvancadoModal } from './MatrizSmartAvancadoModal';
 import { SimuladorVisaoBar } from './SimuladorVisaoBar';
 import { Input } from '@/components/ui/input';
 import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
-import { Search, RefreshCw, Users, Shield, Factory, Sparkles } from 'lucide-react';
+import { Search, RefreshCw, Users, Shield, Factory, Sparkles, SlidersHorizontal } from 'lucide-react';
 
 interface MatrizAcessosPainelProps {
   onOpenNovoUsuario?: () => void;
@@ -28,6 +29,7 @@ export const MatrizAcessosPainel: React.FC<MatrizAcessosPainelProps> = ({
 
   const [busca, setBusca] = useState('');
   const [selectedUserForTemplate, setSelectedUserForTemplate] = useState<UsuarioMatriz | null>(null);
+  const [smartAvancadoOpen, setSmartAvancadoOpen] = useState(false);
 
   // Filtragem por nome, email ou cargo
   const usuariosFiltrados = usuarios.filter((u) => {
@@ -105,6 +107,16 @@ export const MatrizAcessosPainel: React.FC<MatrizAcessosPainelProps> = ({
         </div>
 
         <div className="flex items-center gap-2 w-full sm:w-auto justify-end">
+          <Button
+            size="sm"
+            variant="outline"
+            onClick={() => setSmartAvancadoOpen(true)}
+            className="text-xs h-9 border-emerald-500/30 bg-emerald-500/10 hover:bg-emerald-500/20 text-emerald-400 font-semibold"
+          >
+            <SlidersHorizontal className="h-3.5 w-3.5 mr-1.5" />
+            Avançado Modo Smart
+          </Button>
+
           <Button
             size="sm"
             variant="outline"
@@ -139,6 +151,7 @@ export const MatrizAcessosPainel: React.FC<MatrizAcessosPainelProps> = ({
           grupos={gruposModulos}
           onToggleNivel={toggleNivel}
           onOpenTemplates={(user) => setSelectedUserForTemplate(user)}
+          onOpenSmartAvancado={() => setSmartAvancadoOpen(true)}
         />
       )}
 
@@ -149,6 +162,12 @@ export const MatrizAcessosPainel: React.FC<MatrizAcessosPainelProps> = ({
         onClose={() => setSelectedUserForTemplate(null)}
         onSelectTemplate={aplicarTemplate}
       />
+
+      {/* 6. MODAL DE GESTÃO AVANÇADA MODO SMART */}
+      <MatrizSmartAvancadoModal
+        isOpen={smartAvancadoOpen}
+        onClose={() => setSmartAvancadoOpen(false)}
+      />
     </div>
   );
 };

src/components/users/matriz/MatrizGrid.tsx

@@ -3,7 +3,7 @@ import { UsuarioMatriz, GrupoRecurso, NivelAcesso } from '@/hooks/useMatrizAcess
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
-import { Sparkles, Eye, Edit3, ShieldAlert } from 'lucide-react';
+import { Sparkles, Eye, Edit3, ShieldAlert, SlidersHorizontal } from 'lucide-react';
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
 
 interface MatrizGridProps {
@@ -11,6 +11,7 @@ interface MatrizGridProps {
   grupos: GrupoRecurso[];
   onToggleNivel: (userId: string, resourceKey: string, tipo: 'V' | 'C') => void;
   onOpenTemplates: (user: UsuarioMatriz) => void;
+  onOpenSmartAvancado?: () => void;
 }
 
 export const MatrizGrid: React.FC<MatrizGridProps> = ({
@@ -18,6 +19,7 @@ export const MatrizGrid: React.FC<MatrizGridProps> = ({
   grupos,
   onToggleNivel,
   onOpenTemplates,
+  onOpenSmartAvancado,
 }) => {
   // Cores de fundo e borda para os grupos
   const corGrupoHeader: Record<string, string> = {
@@ -48,8 +50,20 @@ export const MatrizGrid: React.FC<MatrizGridProps> = ({
                   colSpan={grupo.recursos.length}
                   className={`p-2.5 text-center border-r border-border/40 text-xs font-bold ${corGrupoHeader[grupo.cor]}`}
                 >
-                  <div className="flex items-center justify-center gap-1.5">
+                  <div className="flex items-center justify-center gap-2 flex-wrap">
                     <span>{grupo.titulo}</span>
+                    {grupo.key === 'smart' && onOpenSmartAvancado && (
+                      <Button
+                        size="sm"
+                        variant="secondary"
+                        onClick={onOpenSmartAvancado}
+                        className="h-6 px-2 py-0 text-[10px] bg-emerald-500/20 hover:bg-emerald-500/30 text-emerald-300 border border-emerald-500/40 rounded-md font-semibold flex items-center gap-1 shadow-sm transition-transform active:scale-95"
+                        title="Abrir Gestão Avançada de Privilégios e Notificações do Modo Smart"
+                      >
+                        <SlidersHorizontal className="h-3 w-3" />
+                        Avançado
+                      </Button>
+                    )}
                   </div>
                   <span className="text-[10px] font-normal opacity-80 block truncate">
                     {grupo.descricao}

src/components/users/matriz/MatrizSmartAvancadoModal.tsx

@@ -0,0 +1,536 @@
+import React, { useState } from 'react';
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Badge } from '@/components/ui/badge';
+import { Switch } from '@/components/ui/switch';
+import { Label } from '@/components/ui/label';
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
+import {
+  SlidersHorizontal,
+  Search,
+  CheckCircle2,
+  Save,
+  RotateCcw,
+  Shield,
+  Factory,
+  Eye,
+  Edit3,
+  Trash2,
+  Mail,
+  Phone,
+  MessageSquare,
+  AlertTriangle,
+  FileText,
+  Layers,
+  Flame,
+  Zap,
+  Box,
+  ExternalLink,
+  Truck,
+  Wrench,
+  FileSpreadsheet,
+  Info,
+  Sparkles,
+  Lock,
+} from 'lucide-react';
+import { useSmartPermissions } from '@/hooks/useSmartPermissions';
+import { SMART_SUBMODULES } from '@/types/smartPermissions';
+
+interface MatrizSmartAvancadoModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export const MatrizSmartAvancadoModal: React.FC<MatrizSmartAvancadoModalProps> = ({
+  isOpen,
+  onClose,
+}) => {
+  const {
+    loading,
+    saving,
+    users,
+    selectedUserId,
+    setSelectedUserId,
+    selectedUser,
+    togglePermission,
+    updateNotificationConfig,
+    salvarConfiguracaoUsuario,
+    aplicarTemplateSmart,
+    recarregar,
+  } = useSmartPermissions();
+
+  const [busca, setBusca] = useState('');
+
+  const usersFiltrados = users.filter((u) => {
+    const termo = busca.toLowerCase();
+    return (
+      u.fullName.toLowerCase().includes(termo) ||
+      u.email.toLowerCase().includes(termo) ||
+      u.functionName.toLowerCase().includes(termo)
+    );
+  });
+
+  const getIconComponent = (icone: string) => {
+    switch (icone) {
+      case 'FileText':
+        return <FileText className="h-4 w-4 text-sky-400" />;
+      case 'Layers':
+        return <Layers className="h-4 w-4 text-indigo-400" />;
+      case 'Flame':
+        return <Flame className="h-4 w-4 text-orange-400" />;
+      case 'CheckCircle2':
+        return <CheckCircle2 className="h-4 w-4 text-emerald-400" />;
+      case 'Zap':
+        return <Zap className="h-4 w-4 text-amber-400" />;
+      case 'Box':
+        return <Box className="h-4 w-4 text-cyan-400" />;
+      case 'ExternalLink':
+        return <ExternalLink className="h-4 w-4 text-purple-400" />;
+      case 'Truck':
+        return <Truck className="h-4 w-4 text-amber-500" />;
+      case 'Wrench':
+        return <Wrench className="h-4 w-4 text-teal-400" />;
+      case 'FileSpreadsheet':
+        return <FileSpreadsheet className="h-4 w-4 text-emerald-500" />;
+      default:
+        return <Factory className="h-4 w-4 text-muted-foreground" />;
+    }
+  };
+
+  return (
+    <Dialog open={isOpen} onOpenChange={(open) => !open && onClose()}>
+      <DialogContent className="max-w-6xl w-[96vw] max-h-[92vh] h-[880px] p-0 flex flex-col bg-card border-border shadow-2xl rounded-2xl overflow-hidden">
+        {/* CABEÇALHO DO MODAL */}
+        <div className="px-6 py-4 border-b border-border bg-muted/40 flex items-center justify-between">
+          <div className="flex items-center gap-3">
+            <div className="p-2.5 rounded-xl bg-emerald-500/10 text-emerald-400 border border-emerald-500/20">
+              <SlidersHorizontal className="h-5 w-5" />
+            </div>
+            <div>
+              <DialogTitle className="text-base sm:text-lg font-bold flex items-center gap-2">
+                Gestão Avançada de Privilégios & Notificações
+                <Badge variant="outline" className="bg-emerald-500/10 text-emerald-400 border-emerald-500/30 text-[10px] uppercase tracking-wider font-semibold">
+                  Modo Smart
+                </Badge>
+              </DialogTitle>
+              <DialogDescription className="text-xs text-muted-foreground mt-0.5">
+                Controle granular de acesso por submódulo e canais de notificação (E-mail e WhatsApp via única).
+              </DialogDescription>
+            </div>
+          </div>
+        </div>
+
+        {/* CORPO PRINCIPAL COM SIDEBAR DE USUÁRIOS E ÁREA DE CONFIGURAÇÃO */}
+        <div className="flex-1 flex overflow-hidden">
+          {/* SIDEBAR DE USUÁRIOS */}
+          <div className="w-[300px] border-r border-border bg-background/50 flex flex-col">
+            <div className="p-3 border-b border-border">
+              <div className="relative">
+                <Search className="absolute left-2.5 top-2.5 h-3.5 w-3.5 text-muted-foreground" />
+                <Input
+                  placeholder="Buscar colaborador..."
+                  value={busca}
+                  onChange={(e) => setBusca(e.target.value)}
+                  className="pl-8 text-xs h-8 bg-card"
+                />
+              </div>
+            </div>
+
+            <div className="flex-1 overflow-y-auto divide-y divide-border/40 p-1.5 space-y-0.5">
+              {loading ? (
+                <div className="py-12 text-center text-xs text-muted-foreground">
+                  Carregando colaboradores...
+                </div>
+              ) : usersFiltrados.length === 0 ? (
+                <div className="py-12 text-center text-xs text-muted-foreground">
+                  Nenhum colaborador encontrado.
+                </div>
+              ) : (
+                usersFiltrados.map((user) => {
+                  const isSelected = user.userId === selectedUserId;
+                  return (
+                    <button
+                      key={user.userId}
+                      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'
+                      }`}
+                    >
+                      <Avatar className="h-8 w-8 rounded-lg border border-border">
+                        <AvatarImage src={user.profileImageUrl || ''} />
+                        <AvatarFallback className="rounded-lg bg-primary/10 text-primary text-xs font-bold">
+                          {user.fullName.substring(0, 2).toUpperCase()}
+                        </AvatarFallback>
+                      </Avatar>
+                      <div className="min-w-0 flex-1">
+                        <p className={`text-xs font-bold truncate ${isSelected ? 'text-emerald-400' : 'text-foreground'}`}>
+                          {user.fullName}
+                        </p>
+                        <p className="text-[10px] text-muted-foreground truncate">
+                          {user.functionName}
+                        </p>
+                      </div>
+                      {user.whatsappNumber && (
+                        <div className="p-1 rounded-md bg-emerald-500/10 text-emerald-400" title={`WhatsApp: ${user.whatsappNumber}`}>
+                          <MessageSquare className="h-3 w-3" />
+                        </div>
+                      )}
+                    </button>
+                  );
+                })
+              )}
+            </div>
+          </div>
+
+          {/* ÁREA DE CONFIGURAÇÃO DO USUÁRIO SELECIONADO */}
+          <div className="flex-1 flex flex-col bg-card overflow-y-auto">
+            {selectedUser ? (
+              <div className="p-6 space-y-6">
+                {/* CABEÇALHO DO USUÁRIO + AÇÕES RÁPIDAS */}
+                <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 p-4 rounded-xl border border-border bg-muted/20">
+                  <div className="flex items-center gap-3">
+                    <Avatar className="h-12 w-12 rounded-xl border border-border shadow-sm">
+                      <AvatarImage src={selectedUser.profileImageUrl || ''} />
+                      <AvatarFallback className="rounded-xl bg-primary/10 text-primary text-sm font-bold">
+                        {selectedUser.fullName.substring(0, 2).toUpperCase()}
+                      </AvatarFallback>
+                    </Avatar>
+                    <div>
+                      <h3 className="text-base font-bold text-foreground">
+                        {selectedUser.fullName}
+                      </h3>
+                      <p className="text-xs text-muted-foreground flex items-center gap-2">
+                        <span>{selectedUser.email}</span>
+                        <span>•</span>
+                        <span className="text-emerald-400 font-medium">{selectedUser.functionName}</span>
+                      </p>
+                    </div>
+                  </div>
+
+                  {/* TEMPLATES E BOTÃO SALVAR */}
+                  <div className="flex flex-wrap items-center gap-2">
+                    <Button
+                      size="sm"
+                      variant="outline"
+                      onClick={() => aplicarTemplateSmart(selectedUser.userId, 'operador')}
+                      className="text-xs h-8 border-border hover:bg-muted"
+                      title="Restringe para o padrão do chão de fábrica"
+                    >
+                      <Factory className="h-3.5 w-3.5 mr-1 text-emerald-400" />
+                      Padrão Operador
+                    </Button>
+                    <Button
+                      size="sm"
+                      variant="outline"
+                      onClick={() => aplicarTemplateSmart(selectedUser.userId, 'admin')}
+                      className="text-xs h-8 border-border hover:bg-muted"
+                      title="Libera todos os 10 submódulos com acesso total"
+                    >
+                      <Shield className="h-3.5 w-3.5 mr-1 text-rose-400" />
+                      Total Admin
+                    </Button>
+                    <Button
+                      size="sm"
+                      onClick={() => salvarConfiguracaoUsuario(selectedUser.userId)}
+                      disabled={saving}
+                      className="text-xs h-8 bg-emerald-600 hover:bg-emerald-500 text-white font-semibold shadow-sm flex items-center gap-1.5"
+                    >
+                      <Save className={`h-3.5 w-3.5 ${saving ? 'animate-spin' : ''}`} />
+                      {saving ? 'Salvando...' : 'Salvar Alterações'}
+                    </Button>
+                  </div>
+                </div>
+
+                {/* SEÇÃO 1: MATRIZ DE ACESSO AOS SUBMÓDULOS */}
+                <div className="space-y-3">
+                  <div className="flex items-center justify-between">
+                    <h4 className="text-xs font-bold uppercase tracking-wider text-muted-foreground flex items-center gap-1.5">
+                      <Lock className="h-3.5 w-3.5 text-emerald-400" />
+                      1. Permissões Granulares nos Submódulos (Modo Smart)
+                    </h4>
+                    <span className="text-[11px] text-muted-foreground">
+                      Controle de Visualização, Edição/Apontamento e Exclusão
+                    </span>
+                  </div>
+
+                  <div className="rounded-xl border border-border bg-background/50 overflow-hidden">
+                    <table className="w-full text-left border-collapse">
+                      <thead>
+                        <tr className="border-b border-border/80 bg-muted/40 text-[11px] text-muted-foreground font-semibold">
+                          <th className="p-3">Submódulo / Recurso</th>
+                          <th className="p-3 text-center w-[110px]">
+                            <span className="inline-flex items-center gap-1 text-sky-400">
+                              <Eye className="h-3.5 w-3.5" />
+                              Visualizar
+                            </span>
+                          </th>
+                          <th className="p-3 text-center w-[120px]">
+                            <span className="inline-flex items-center gap-1 text-emerald-400">
+                              <Edit3 className="h-3.5 w-3.5" />
+                              Apontar / Editar
+                            </span>
+                          </th>
+                          <th className="p-3 text-center w-[110px]">
+                            <span className="inline-flex items-center gap-1 text-rose-400">
+                              <Trash2 className="h-3.5 w-3.5" />
+                              Excluir
+                            </span>
+                          </th>
+                        </tr>
+                      </thead>
+                      <tbody className="divide-y divide-border/40 text-xs">
+                        {SMART_SUBMODULES.map((sub) => {
+                          const perm = selectedUser.permissions[sub.key] || {
+                            can_view: false,
+                            can_edit: false,
+                            can_delete: false,
+                          };
+
+                          return (
+                            <tr
+                              key={sub.key}
+                              className="hover:bg-muted/30 transition-colors"
+                            >
+                              <td className="p-3">
+                                <div className="flex items-center gap-2.5">
+                                  <div className="p-1.5 rounded-lg bg-card border border-border/60">
+                                    {getIconComponent(sub.icone)}
+                                  </div>
+                                  <div>
+                                    <p className="font-bold text-foreground text-xs">
+                                      {sub.nome}
+                                    </p>
+                                    <p className="text-[10px] text-muted-foreground">
+                                      {sub.descricao}
+                                    </p>
+                                  </div>
+                                </div>
+                              </td>
+
+                              {/* VISUALIZAR */}
+                              <td className="p-3 text-center">
+                                <div className="flex justify-center">
+                                  <Switch
+                                    checked={perm.can_view}
+                                    onCheckedChange={() =>
+                                      togglePermission(selectedUser.userId, sub.key, 'can_view')
+                                    }
+                                  />
+                                </div>
+                              </td>
+
+                              {/* EDITAR / APONTAR */}
+                              <td className="p-3 text-center">
+                                <div className="flex justify-center">
+                                  <Switch
+                                    checked={perm.can_edit}
+                                    onCheckedChange={() =>
+                                      togglePermission(selectedUser.userId, sub.key, 'can_edit')
+                                    }
+                                  />
+                                </div>
+                              </td>
+
+                              {/* EXCLUIR */}
+                              <td className="p-3 text-center">
+                                <div className="flex justify-center">
+                                  <Switch
+                                    checked={perm.can_delete}
+                                    onCheckedChange={() =>
+                                      togglePermission(selectedUser.userId, sub.key, 'can_delete')
+                                    }
+                                  />
+                                </div>
+                              </td>
+                            </tr>
+                          );
+                        })}
+                      </tbody>
+                    </table>
+                  </div>
+                </div>
+
+                {/* SEÇÃO 2: NOTIFICAÇÕES & CANAL WHATSAPP VIA ÚNICA */}
+                <div className="space-y-4 pt-2">
+                  <h4 className="text-xs font-bold uppercase tracking-wider text-muted-foreground flex items-center gap-1.5">
+                    <MessageSquare className="h-3.5 w-3.5 text-emerald-400" />
+                    2. Notificações do Usuário (E-mail & WhatsApp BrainSteel)
+                  </h4>
+
+                  {/* BANNER INFORMATIVO: REGRA DE VIA ÚNICA */}
+                  <div className="p-3.5 rounded-xl border border-amber-500/30 bg-amber-500/10 text-amber-200 flex items-start gap-3">
+                    <AlertTriangle className="h-5 w-5 text-amber-400 shrink-0 mt-0.5" />
+                    <div className="text-xs space-y-1">
+                      <p className="font-bold text-amber-300">
+                        Comunicação Estritamente Unidirecional (Via Única) no WhatsApp
+                      </p>
+                      <p className="text-amber-200/90 leading-relaxed text-[11px]">
+                        O número oficial da BrainSteel é configurado para <strong>somente enviar</strong> alertas, relatórios e métricas de produção. Mensagens de resposta enviadas pelo colaborador não serão recebidas nem respondidas pelo sistema.
+                      </p>
+                    </div>
+                  </div>
+
+                  {/* GRID DE CONFIGURAÇÕES DE CANAL */}
+                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                    {/* CANAL WHATSAPP */}
+                    <div className="p-4 rounded-xl border border-border bg-background/50 space-y-4">
+                      <div className="flex items-center gap-2 text-emerald-400 font-bold text-xs">
+                        <Phone className="h-4 w-4" />
+                        Canal WhatsApp do Colaborador
+                      </div>
+
+                      <div className="space-y-1.5">
+                        <Label className="text-[11px] text-muted-foreground">
+                          Número de WhatsApp com DDD
+                        </Label>
+                        <Input
+                          placeholder="Ex: 5511999998888 ou (11) 99999-8888"
+                          value={selectedUser.whatsappNumber}
+                          onChange={(e) =>
+                            updateNotificationConfig(
+                              selectedUser.userId,
+                              'whatsappNumber',
+                              e.target.value
+                            )
+                          }
+                          className="h-8 text-xs bg-card"
+                        />
+                        <span className="text-[10px] text-muted-foreground">
+                          Informe o número com DDD para receber avisos automáticos.
+                        </span>
+                      </div>
+
+                      <div className="pt-2 border-t border-border/40 space-y-3">
+                        <div className="flex items-center justify-between">
+                          <div className="space-y-0.5">
+                            <Label className="text-xs font-medium text-foreground">
+                              Alertas de Apontamentos
+                            </Label>
+                            <p className="text-[10px] text-muted-foreground">
+                              Notificar sobre novos apontamentos ou avanços forçados
+                            </p>
+                          </div>
+                          <Switch
+                            checked={selectedUser.notifWhatsappApontamentos}
+                            onCheckedChange={(val) =>
+                              updateNotificationConfig(
+                                selectedUser.userId,
+                                'notifWhatsappApontamentos',
+                                val
+                              )
+                            }
+                          />
+                        </div>
+
+                        <div className="flex items-center justify-between">
+                          <div className="space-y-0.5">
+                            <Label className="text-xs font-medium text-foreground">
+                              Resumo Diário de Métricas
+                            </Label>
+                            <p className="text-[10px] text-muted-foreground">
+                              Receber fechamento diário de produção (peso e peças)
+                            </p>
+                          </div>
+                          <Switch
+                            checked={selectedUser.notifWhatsappMetricas}
+                            onCheckedChange={(val) =>
+                              updateNotificationConfig(
+                                selectedUser.userId,
+                                'notifWhatsappMetricas',
+                                val
+                              )
+                            }
+                          />
+                        </div>
+                      </div>
+                    </div>
+
+                    {/* CANAL E-MAIL */}
+                    <div className="p-4 rounded-xl border border-border bg-background/50 space-y-4">
+                      <div className="flex items-center gap-2 text-sky-400 font-bold text-xs">
+                        <Mail className="h-4 w-4" />
+                        Canal de E-mail ({selectedUser.email})
+                      </div>
+
+                      <div className="space-y-3 pt-2">
+                        <div className="flex items-center justify-between">
+                          <div className="space-y-0.5">
+                            <Label className="text-xs font-medium text-foreground">
+                              Alertas de Apontamentos por E-mail
+                            </Label>
+                            <p className="text-[10px] text-muted-foreground">
+                              Receber e-mail informativo a cada lote apontado
+                            </p>
+                          </div>
+                          <Switch
+                            checked={selectedUser.notifEmailApontamentos}
+                            onCheckedChange={(val) =>
+                              updateNotificationConfig(
+                                selectedUser.userId,
+                                'notifEmailApontamentos',
+                                val
+                              )
+                            }
+                          />
+                        </div>
+
+                        <div className="flex items-center justify-between">
+                          <div className="space-y-0.5">
+                            <Label className="text-xs font-medium text-foreground">
+                              Relatórios e Métricas por E-mail
+                            </Label>
+                            <p className="text-[10px] text-muted-foreground">
+                              Receber resumos periódicos e PDFs automáticos
+                            </p>
+                          </div>
+                          <Switch
+                            checked={selectedUser.notifEmailMetricas}
+                            onCheckedChange={(val) =>
+                              updateNotificationConfig(
+                                selectedUser.userId,
+                                'notifEmailMetricas',
+                                val
+                              )
+                            }
+                          />
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            ) : (
+              <div className="flex-1 flex items-center justify-center text-xs text-muted-foreground">
+                Selecione um colaborador na barra lateral para configurar.
+              </div>
+            )}
+          </div>
+        </div>
+
+        {/* RODAPÉ DO MODAL */}
+        <div className="px-6 py-3 border-t border-border bg-muted/40 flex items-center justify-between text-xs">
+          <span className="text-muted-foreground text-[11px]">
+            As alterações passam a valer imediatamente no Modo Smart após salvar.
+          </span>
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={onClose}
+            className="text-xs h-8"
+          >
+            Fechar
+          </Button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+};

src/hooks/useSmartPermissions.ts

@@ -0,0 +1,235 @@
+import { useState, useEffect, useCallback } from 'react';
+import { supabase } from '@/integrations/supabase/client';
+import { toast } from 'sonner';
+import { SMART_SUBMODULES, SmartUserConfig } from '@/types/smartPermissions';
+
+export function useSmartPermissions() {
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+  const [users, setUsers] = useState<SmartUserConfig[]>([]);
+  const [selectedUserId, setSelectedUserId] = useState<string | null>(null);
+
+  const carregarDados = useCallback(async () => {
+    try {
+      setLoading(true);
+
+      // 1. Carregar profiles com functions
+      const { data: profiles, error: profError } = await (supabase as any)
+        .from('profiles')
+        .select(`
+          id,
+          email,
+          full_name,
+          profile_image_url,
+          whatsapp_number,
+          notif_email_apontamentos,
+          notif_email_metricas,
+          notif_whatsapp_apontamentos,
+          notif_whatsapp_metricas,
+          functions:function_id ( name )
+        `)
+        .order('full_name', { ascending: true });
+
+      if (profError) throw profError;
+
+      // 2. Carregar permissões da tabela smart_user_permissions
+      const { data: perms, error: permError } = await (supabase as any)
+        .from('smart_user_permissions')
+        .select('*');
+
+      if (permError) throw permError;
+
+      // Montar mapa de permissões por usuário
+      const permsByUser: Record<string, Record<string, { can_view: boolean; can_edit: boolean; can_delete: boolean }>> = {};
+      
+      (perms || []).forEach((p: any) => {
+        if (!permsByUser[p.user_id]) {
+          permsByUser[p.user_id] = {};
+        }
+        permsByUser[p.user_id][p.resource_key] = {
+          can_view: Boolean(p.can_view),
+          can_edit: Boolean(p.can_edit),
+          can_delete: Boolean(p.can_delete),
+        };
+      });
+
+      const formattedUsers: SmartUserConfig[] = (profiles || []).map((prof: any) => {
+        const userPerms = permsByUser[prof.id] || {};
+        const mergedPerms: Record<string, { can_view: boolean; can_edit: boolean; can_delete: boolean }> = {};
+
+        SMART_SUBMODULES.forEach((sub) => {
+          if (userPerms[sub.key]) {
+            mergedPerms[sub.key] = userPerms[sub.key];
+          } else {
+            // Default fallback
+            mergedPerms[sub.key] = { ...sub.padraoOperador };
+          }
+        });
+
+        return {
+          userId: prof.id,
+          email: prof.email || '',
+          fullName: prof.full_name || prof.email?.split('@')[0] || 'Sem Nome',
+          functionName: prof.functions?.name || 'Não atribuído',
+          profileImageUrl: prof.profile_image_url,
+          whatsappNumber: prof.whatsapp_number || '',
+          notifEmailApontamentos: prof.notif_email_apontamentos !== false,
+          notifEmailMetricas: prof.notif_email_metricas !== false,
+          notifWhatsappApontamentos: prof.notif_whatsapp_apontamentos !== false,
+          notifWhatsappMetricas: prof.notif_whatsapp_metricas !== false,
+          permissions: mergedPerms,
+        };
+      });
+
+      setUsers(formattedUsers);
+      if (formattedUsers.length > 0 && !selectedUserId) {
+        setSelectedUserId(formattedUsers[0].userId);
+      }
+    } catch (err: any) {
+      console.error('Erro ao carregar permissões do Modo Smart:', err);
+      toast.error('Não foi possível carregar as permissões do Modo Smart.');
+    } finally {
+      setLoading(false);
+    }
+  }, [selectedUserId]);
+
+  useEffect(() => {
+    carregarDados();
+  }, []);
+
+  const selectedUser = users.find((u) => u.userId === selectedUserId) || null;
+
+  // Atualizar permissão no estado local
+  const togglePermission = (
+    userId: string,
+    resourceKey: string,
+    field: 'can_view' | 'can_edit' | 'can_delete'
+  ) => {
+    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 updated = {
+          ...current,
+          [field]: !current[field],
+        };
+        // Se desativar visualizar, desativa edição e exclusão por coerência
+        if (field === 'can_view' && !updated.can_view) {
+          updated.can_edit = false;
+          updated.can_delete = false;
+        }
+        // Se ativar edição ou exclusão, ativa automaticamente visualizar
+        if ((field === 'can_edit' || field === 'can_delete') && updated[field]) {
+          updated.can_view = true;
+        }
+
+        return {
+          ...u,
+          permissions: {
+            ...u.permissions,
+            [resourceKey]: updated,
+          },
+        };
+      })
+    );
+  };
+
+  // Atualizar dados de notificação no estado local
+  const updateNotificationConfig = (
+    userId: string,
+    field: 'whatsappNumber' | 'notifEmailApontamentos' | 'notifEmailMetricas' | 'notifWhatsappApontamentos' | 'notifWhatsappMetricas',
+    value: any
+  ) => {
+    setUsers((prev) =>
+      prev.map((u) => (u.userId === userId ? { ...u, [field]: value } : u))
+    );
+  };
+
+  // Salvar permissões e perfil do usuário no banco
+  const salvarConfiguracaoUsuario = async (userId: string) => {
+    const userToSave = users.find((u) => u.userId === userId);
+    if (!userToSave) return;
+
+    try {
+      setSaving(true);
+
+      // 1. Atualizar Profile
+      const { error: profError } = await (supabase as any)
+        .from('profiles')
+        .update({
+          whatsapp_number: userToSave.whatsappNumber.trim() || null,
+          notif_email_apontamentos: userToSave.notifEmailApontamentos,
+          notif_email_metricas: userToSave.notifEmailMetricas,
+          notif_whatsapp_apontamentos: userToSave.notifWhatsappApontamentos,
+          notif_whatsapp_metricas: userToSave.notifWhatsappMetricas,
+          updated_at: new Date().toISOString(),
+        })
+        .eq('id', userId);
+
+      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 { error: permError } = await (supabase as any)
+        .from('smart_user_permissions')
+        .upsert(rowsToUpsert, { onConflict: 'user_id,resource_key' });
+
+      if (permError) throw permError;
+
+      toast.success(`Configurações de ${userToSave.fullName} salvas com sucesso!`);
+    } catch (err: any) {
+      console.error('Erro ao salvar configurações do Modo Smart:', err);
+      toast.error('Erro ao salvar configurações: ' + (err.message || 'Falha na requisição'));
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  // Aplicar Template Padrão (Chão de Fábrica ou Administrador)
+  const aplicarTemplateSmart = (userId: string, tipo: 'operador' | 'admin' | 'leitura') => {
+    setUsers((prev) =>
+      prev.map((u) => {
+        if (u.userId !== userId) return u;
+        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 };
+          }
+        });
+
+        return {
+          ...u,
+          permissions: newPerms,
+        };
+      })
+    );
+    toast.info(`Template ${tipo.toUpperCase()} aplicado na tela. Clique em "Salvar" para confirmar.`);
+  };
+
+  return {
+    loading,
+    saving,
+    users,
+    selectedUserId,
+    setSelectedUserId,
+    selectedUser,
+    togglePermission,
+    updateNotificationConfig,
+    salvarConfiguracaoUsuario,
+    aplicarTemplateSmart,
+    recarregar: carregarDados,
+  };
+}

src/hooks/useUserSmartAccess.ts

@@ -0,0 +1,78 @@
+import { useState, useEffect } from 'react';
+import { useAuth } from '@/hooks/useAuth';
+import { supabase } from '@/integrations/supabase/client';
+import { SMART_SUBMODULES } from '@/types/smartPermissions';
+
+export function useUserSmartAccess() {
+  const { user } = useAuth();
+  const [permissions, setPermissions] = useState<
+    Record<string, { can_view: boolean; can_edit: boolean; can_delete: boolean }>
+  >({});
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    let mounted = true;
+
+    async function loadPermissions() {
+      if (!user) {
+        setLoading(false);
+        return;
+      }
+
+      try {
+        setLoading(true);
+        const { data, error } = await (supabase as any)
+          .from('smart_user_permissions')
+          .select('resource_key, can_view, can_edit, can_delete')
+          .eq('user_id', user.id);
+
+        if (error) throw error;
+
+        const permsMap: Record<
+          string,
+          { can_view: boolean; can_edit: boolean; can_delete: boolean }
+        > = {};
+
+        // Preenche com padrão do operador primeiro
+        SMART_SUBMODULES.forEach((sub) => {
+          permsMap[sub.key] = { ...sub.padraoOperador };
+        });
+
+        // Sobrescreve com as regras salvas para este usuário
+        (data || []).forEach((row: any) => {
+          permsMap[row.resource_key] = {
+            can_view: Boolean(row.can_view),
+            can_edit: Boolean(row.can_edit),
+            can_delete: Boolean(row.can_delete),
+          };
+        });
+
+        if (mounted) {
+          setPermissions(permsMap);
+        }
+      } catch (err) {
+        console.error('Erro ao carregar permissões do usuário para o Modo Smart:', err);
+      } finally {
+        if (mounted) setLoading(false);
+      }
+    }
+
+    loadPermissions();
+
+    return () => {
+      mounted = false;
+    };
+  }, [user]);
+
+  const canView = (key: string) => permissions[key]?.can_view ?? true;
+  const canEdit = (key: string) => permissions[key]?.can_edit ?? false;
+  const canDelete = (key: string) => permissions[key]?.can_delete ?? false;
+
+  return {
+    loading,
+    permissions,
+    canView,
+    canEdit,
+    canDelete,
+  };
+}

src/types/smartPermissions.ts

@@ -0,0 +1,107 @@
+export interface SmartSubmodule {
+  key: string;
+  nome: string;
+  descricao: string;
+  icone: string;
+  padraoOperador: {
+    can_view: boolean;
+    can_edit: boolean;
+    can_delete: boolean;
+  };
+}
+
+export const SMART_SUBMODULES: SmartSubmodule[] = [
+  {
+    key: 'smart_of',
+    nome: 'Ordens de Fabricação (OF)',
+    descricao: 'Acesso à seleção, listagem e busca de OFs ativas',
+    icone: 'FileText',
+    padraoOperador: { can_view: true, can_edit: false, can_delete: false },
+  },
+  {
+    key: 'smart_fases',
+    nome: 'Fases & Etapas da Obra',
+    descricao: 'Filtro e navegação pelas etapas/fases de fabricação',
+    icone: 'Layers',
+    padraoOperador: { can_view: true, can_edit: false, can_delete: false },
+  },
+  {
+    key: 'smart_processos',
+    nome: 'Processos de Fabricação',
+    descricao: 'Visualização e seleção de processos (Corte, Solda, Pintura, etc.)',
+    icone: 'Flame',
+    padraoOperador: { can_view: true, can_edit: false, can_delete: false },
+  },
+  {
+    key: 'smart_apontamento',
+    nome: 'Apontamento de Peças',
+    descricao: 'Realização de apontamentos normais de produção no chão de fábrica',
+    icone: 'CheckCircle2',
+    padraoOperador: { can_view: true, can_edit: true, can_delete: false },
+  },
+  {
+    key: 'smart_forcar_apontamento',
+    nome: 'Forçar Apontamento (Avanço sem restrição)',
+    descricao: 'Permissão para avançar peças furando fila ou com pendências de processos anteriores',
+    icone: 'Zap',
+    padraoOperador: { can_view: false, can_edit: false, can_delete: false },
+  },
+  {
+    key: 'smart_3d',
+    nome: 'Modelo 3D BIM',
+    descricao: 'Visualizador interativo 3D de peças, montagens e conjuntos',
+    icone: 'Box',
+    padraoOperador: { can_view: true, can_edit: false, can_delete: false },
+  },
+  {
+    key: 'smart_modo_completo',
+    nome: 'Acesso ao Modo Completo ERP',
+    descricao: 'Permissão para alternar da interface touch para o ERP gerencial',
+    icone: 'ExternalLink',
+    padraoOperador: { can_view: false, can_edit: false, can_delete: false },
+  },
+  {
+    key: 'smart_romaneios',
+    nome: 'Romaneios & Embarque',
+    descricao: 'Acesso e conferência de romaneios de expedição de peças',
+    icone: 'Truck',
+    padraoOperador: { can_view: true, can_edit: false, can_delete: false },
+  },
+  {
+    key: 'smart_montagem',
+    nome: 'Montagem & Canteiro',
+    descricao: 'Apontamentos e checklists de montagem externa',
+    icone: 'Wrench',
+    padraoOperador: { can_view: true, can_edit: true, can_delete: false },
+  },
+  {
+    key: 'smart_relatorios',
+    nome: 'Relatórios & Exportação PDF',
+    descricao: 'Geração de resumos de produção, checklists e exportação de relatórios',
+    icone: 'FileSpreadsheet',
+    padraoOperador: { can_view: true, can_edit: true, can_delete: false },
+  },
+];
+
+export interface SmartUserPermission {
+  id?: string;
+  user_id: string;
+  resource_key: string;
+  can_view: boolean;
+  can_edit: boolean;
+  can_delete: boolean;
+}
+
+export interface SmartUserConfig {
+  userId: string;
+  email: string;
+  fullName: string;
+  functionName: string;
+  profileImageUrl: string | null;
+  whatsappNumber: string;
+  notifEmailApontamentos: boolean;
+  notifEmailMetricas: boolean;
+  notifWhatsappApontamentos: boolean;
+  notifWhatsappMetricas: boolean;
+  permissions: Record<string, { can_view: boolean; can_edit: boolean; can_delete: boolean }>;
+}