+ {children}
+
+
+ {/* Label with help button */}
+ = ({
+ isOpen,
+ onClose,
+}) => {
+ const [notifications, setNotifications] = useState([]);
+ const [isLoading, setIsLoading] = useState(false);
+
+ const fetchArchived = async () => {
+ setIsLoading(true);
+ try {
+ const response = await api.get('/notifications?includeArchived=true');
+ // Filtrar apenas as arquivadas (no frontend por segurança, embora o backend já devesse ajudar)
+ // Na verdade, passamos includeArchived=true, o backend retornará unread + archived.
+ // Vamos filtrar para mostrar apenas o "Log" (arquivadas).
+ setNotifications(response.data.filter(n => n.isArchived || n.archivedBy?.length > 0));
+ } catch (error) {
+ console.error('Error fetching archived notifications:', error);
+ } finally {
+ setIsLoading(false);
+ }
+ };
+
+ useEffect(() => {
+ if (isOpen) {
+ fetchArchived();
+ }
+ }, [isOpen]);
+
+ const deleteForever = async (id: string) => {
+ if (!window.confirm('Excluir permanentemente este registro do log?')) return;
+ try {
+ await api.delete(`/notifications/${id}`);
+ setNotifications(prev => prev.filter(n => n._id !== id));
+ } catch (error) {
+ console.error('Error deleting archived notification:', error);
+ }
+ };
+
+ if (!isOpen) return null;
+
+ return (
+ {
+ variant?: 'primary' | 'secondary' | 'success' | 'danger' | 'ghost';
+ size?: 'sm' | 'md' | 'lg';
+}
+
+export const Button: React.FC = ({
+ className,
+ variant = 'primary',
+ size = 'md',
+ children,
+ ...props
+}) => {
+ const baseStyles = 'inline-flex items-center justify-center rounded-xl font-bold transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none active:scale-95 tracking-wide';
+ const variants = {
+ primary: 'bg-primary text-background-dark shadow-lg shadow-primary/20 hover:shadow-glow-primary hover:bg-primary/90 focus:ring-primary font-black',
+ secondary: 'bg-surface-highlight/50 backdrop-blur-sm text-text-main border border-white/10 hover:bg-surface-hover hover:border-text-muted/30 focus:ring-accent',
+ success: 'bg-accent-green text-background-dark shadow-lg shadow-accent-green/20 hover:shadow-[0_0_20px_rgba(11,218,77,0.4)] hover:bg-accent-green/90 focus:ring-accent-green font-black',
+ danger: 'bg-error text-white shadow-lg shadow-error/20 hover:shadow-glow-error hover:bg-error/90 focus:ring-error font-bold',
+ ghost: 'bg-transparent hover:bg-white/5 text-text-muted hover:text-white'
+ };
+
+ const sizes = {
+ sm: 'h-9 px-4 text-xs',
+ md: 'h-11 px-6 py-2.5 text-sm',
+ lg: 'h-14 px-8 text-base shadow-xl'
+ };
+
+ return (
+
+ );
+};
diff --git a/src/client/components/Card.tsx b/src/client/components/Card.tsx
new file mode 100644
index 0000000..66f7bbc
--- /dev/null
+++ b/src/client/components/Card.tsx
@@ -0,0 +1,37 @@
+import React from 'react';
+import { twMerge } from 'tailwind-merge';
+
+interface CardProps {
+ children: React.ReactNode;
+ className?: string;
+ title?: string;
+ description?: string;
+ actions?: React.ReactNode;
+ onClick?: () => void;
+}
+
+export const Card: React.FC = ({ children, className, title, description, actions, onClick }) => {
+ return (
+ = ({ colorHex, className, title }) => {
+ const bubbleRef = useRef(null);
+
+ useEffect(() => {
+ if (bubbleRef.current) {
+ if (colorHex) {
+ bubbleRef.current.style.setProperty('--bg-color', colorHex);
+ } else {
+ bubbleRef.current.style.removeProperty('--bg-color');
+ }
+ }
+ }, [colorHex]);
+
+ return (
+
+ );
+};
diff --git a/src/client/components/ConfirmModal.tsx b/src/client/components/ConfirmModal.tsx
new file mode 100644
index 0000000..300dcc7
--- /dev/null
+++ b/src/client/components/ConfirmModal.tsx
@@ -0,0 +1,66 @@
+import React from 'react';
+import { Modal } from './Modal';
+import { Button } from './Button';
+import { AlertTriangle, HelpCircle } from 'lucide-react';
+
+interface ConfirmModalProps {
+ isOpen: boolean;
+ onClose: () => void;
+ onConfirm: () => void;
+ title: string;
+ description: string;
+ confirmText?: string;
+ cancelText?: string;
+ type?: 'danger' | 'warning' | 'info';
+}
+
+export const ConfirmModal: React.FC = ({
+ isOpen,
+ onClose,
+ onConfirm,
+ title,
+ description,
+ confirmText = 'Confirmar',
+ cancelText = 'Cancelar',
+ type = 'info'
+}) => {
+ const getIcon = () => {
+ switch (type) {
+ case 'danger': return
+
+ );
+};
diff --git a/src/client/components/Input.tsx b/src/client/components/Input.tsx
new file mode 100644
index 0000000..523ae5b
--- /dev/null
+++ b/src/client/components/Input.tsx
@@ -0,0 +1,28 @@
+import React from 'react';
+import { twMerge } from 'tailwind-merge';
+
+interface InputProps extends React.InputHTMLAttributes {
+ label?: string;
+ error?: string;
+}
+
+export const Input = React.forwardRef(({ className, label, error, ...props }, ref) => {
+ return (
+ = ({ children }) => {
+ const [isSidebarOpen, setIsSidebarOpen] = useState(false);
+ const [isManualOpen, setIsManualOpen] = useState(false);
+ const [isDarkMode, setIsDarkMode] = useState(() => {
+ const saved = localStorage.getItem('theme');
+ return saved === 'dark' || (!saved && window.matchMedia('(prefers-color-scheme: dark)').matches);
+ });
+ const location = useLocation();
+ const { signOut } = useClerk();
+ const { user } = useUser();
+ const { organization } = useOrganization();
+ const { isAdmin, isUser, isDeveloper, appUser } = useAuth();
+ // const { settings } = useSystemSettings();
+
+ // Sync Organization ID with API client
+ React.useEffect(() => {
+ if (organization?.id) {
+
+ setApiOrgData(organization.id, organization.name);
+ } else {
+ setApiOrgData(null);
+ }
+ }, [organization]);
+
+ // Helper to get role display name
+ const getRoleDisplay = () => {
+ switch (appUser?.role) {
+ case 'admin': return { label: 'Admin', color: 'text-amber-500' };
+ case 'user': return { label: 'Usuário', color: 'text-green-500' };
+ case 'guest': return { label: 'Convidado', color: 'text-blue-400' };
+ default: return { label: 'Carregando...', color: 'text-text-muted' };
+ }
+ };
+ const roleInfo = getRoleDisplay();
+
+ React.useEffect(() => {
+ if (isDarkMode) {
+ document.documentElement.classList.add('dark');
+ localStorage.setItem('theme', 'dark');
+ } else {
+ document.documentElement.classList.remove('dark');
+ localStorage.setItem('theme', 'light');
+ }
+ }, [isDarkMode]);
+
+ const toggleTheme = () => setIsDarkMode(!isDarkMode);
+ const navigate = useNavigate();
+
+ // Guest Redirection Logic
+ React.useEffect(() => {
+ if (appUser?.role === 'guest' && (location.pathname === '/' || location.pathname === '/projects')) {
+ navigate('/guest-dashboard');
+ }
+ }, [appUser, location.pathname, navigate]);
+
+ interface NavItem {
+ icon: React.ElementType;
+ label: string;
+ path: string;
+ adminOnly?: boolean;
+ }
+
+ const navItems: NavItem[] = [
+ { icon: LayoutDashboard, label: 'Painel Principal', path: '/guest-dashboard' },
+ { icon: FolderOpen, label: 'Obras & Projetos', path: '/' },
+ { icon: Layers, label: 'Esquemas', path: '/schemes' },
+ { icon: ClipboardCheck, label: 'Inspeções', path: '/inspections' },
+ { icon: FolderOpen, label: 'Biblioteca', path: '/library', adminOnly: true },
+ { icon: Thermometer, label: 'Instrumentos', path: '/instruments' },
+ { icon: TrendingUp, label: 'Estudo Rend.', path: '/yield-study', adminOnly: true },
+ { icon: Package, label: 'Estoque', path: '/stock' },
+ { icon: Wrench, label: 'Calculadora', path: '/calculators' },
+ ];
+
+ const isActive = (path: string) => {
+ if (path === '/' && location.pathname === '/') return true;
+ if (path !== '/' && location.pathname.startsWith(path)) return true;
+ return false;
+ };
+
+ return (
+
+ {label && }
+
+
+
+
+
+ {/* Guide Modal */}
+ {showGuide && (
+ <>
+ {/* Backdrop */}
+ setShowGuide(false)}
+ />
+
+ {/* Modal */}
+
+ );
+};
diff --git a/src/client/components/ArchivedNotificationsModal.tsx b/src/client/components/ArchivedNotificationsModal.tsx
new file mode 100644
index 0000000..e230689
--- /dev/null
+++ b/src/client/components/ArchivedNotificationsModal.tsx
@@ -0,0 +1,131 @@
+import React, { useState, useEffect } from 'react';
+import { X, Archive, Trash2, RefreshCcw } from 'lucide-react';
+import api from '../services/api';
+import type { INotification } from '../types';
+
+interface ArchivedNotificationsModalProps {
+ isOpen: boolean;
+ onClose: () => void;
+}
+
+export const ArchivedNotificationsModal: React.FC
+
+
+ )}
+
+ {/* Header */}
+
+
+
+
+ {/* Content */}
+
+
+
+ Guia de Classificação ASTM D3359
+Método B - Teste de Aderência de Corte em Grade
+
+ {/* Grade Image */}
+
+
+ 
+
+
+ {/* Grade Cards */}
+
+ {adhesionGrades.map((grade) => (
+
+
+ {/* Info Note */}
+
+
+ ))}
+
+ {grade.value}
+
+ {grade.areaRemoved}
+
+
+ {grade.statusLabel}
++ {grade.description} +
+
+
+ + Nota: A escala ASTM funciona como uma "nota escolar": + 5B é a nota máxima (perfeito) e + 0B é a nota mínima (reprovado). +
+
+
+ );
+};
diff --git a/src/client/components/Button.tsx b/src/client/components/Button.tsx
new file mode 100644
index 0000000..70082d5
--- /dev/null
+++ b/src/client/components/Button.tsx
@@ -0,0 +1,39 @@
+import React from 'react';
+import { twMerge } from 'tailwind-merge';
+
+interface ButtonProps extends React.ButtonHTMLAttributes
+ {/* Header */}
+
+
+
+
+ {/* Body */}
+
+
+
+
+
+
+
+ Log de Mensagens (Arquivadas)
++ Histórico de notificações sistema +
+
+ {isLoading ? (
+
+
+ {/* Footer */}
+
+
+ ) : notifications.length === 0 ? (
+ Carregando histórico...
+
+
+ ) : (
+ Nenhuma mensagem arquivada
++ Mensagens arquivadas aparecerão aqui para consulta. +
+
+ {notifications.map((msg) => (
+
+ )}
+
+
+ ))}
+
+
+
+ {msg.title}
+
+ {new Date(msg.createdAt).toLocaleString('pt-BR')}
+
+
+
+ {msg.message}
+
+
+
+
+ {(title || actions) && (
+
+ );
+};
+
diff --git a/src/client/components/ColorBubble.tsx b/src/client/components/ColorBubble.tsx
new file mode 100644
index 0000000..d41ac47
--- /dev/null
+++ b/src/client/components/ColorBubble.tsx
@@ -0,0 +1,36 @@
+import React, { useEffect, useRef } from 'react';
+import { clsx } from 'clsx';
+
+interface ColorBubbleProps {
+ colorHex?: string;
+ className?: string;
+ title?: string;
+}
+
+export const ColorBubble: React.FC
+
+ )}
+
+ {title &&
+ {actions && {title}
} + {description &&{description}
} +{actions}
}
+ {children}
+
+
+
+
+
+
+ {getIcon()}
+
+
+
+ + {description} +
+
+
+
+
+
+ {label && }
+
+ {error && {error}}
+
+ );
+});
diff --git a/src/client/components/Layout.tsx b/src/client/components/Layout.tsx
new file mode 100644
index 0000000..1d6c29b
--- /dev/null
+++ b/src/client/components/Layout.tsx
@@ -0,0 +1,418 @@
+import React, { useState } from 'react';
+import NotificationBell from './NotificationBell';
+import { TeamPresence } from './TeamPresence';
+import { Link, useLocation, useNavigate } from 'react-router-dom';
+import { Menu, X, FolderOpen, Layers, ClipboardCheck, LogOut, TrendingUp, Sun, Moon, HelpCircle, Shield, Wrench, Terminal, LayoutDashboard, Package, Thermometer } from 'lucide-react';
+import { clsx } from 'clsx';
+import { useClerk, UserButton, useUser, OrganizationSwitcher, useOrganization } from '@clerk/clerk-react';
+import { TechnicalManual } from './TechnicalManual';
+import { useAuth } from '../context/useAuth';
+// import { useSystemSettings } from '../context/SystemSettingsContext';
+import { setApiOrgData } from '../services/api';
+
+interface LayoutProps {
+ children: React.ReactNode;
+}
+
+export const Layout: React.FC
+ {/* Sidebar Desktop - Fixed */}
+
+
+ {/* Mobile Header */}
+
+
+
+ {/* Mobile Sidebar Overlay */}
+ {isSidebarOpen && (
+ {
+ header: string;
+ accessor: keyof T | ((item: T) => React.ReactNode);
+ className?: string; // For adding widths or hiding on smaller screens
+}
+
+interface MobileListProps {
+ data: T[];
+ columns: Column[];
+ keyExtractor: (item: T) => string;
+ onItemClick?: (item: T) => void;
+ titleAccessor?: keyof T | ((item: T) => React.ReactNode);
+ subtitleAccessor?: keyof T | ((item: T) => React.ReactNode);
+ actionRender?: (item: T) => React.ReactNode;
+}
+
+export const MobileList = ({
+ data,
+ columns,
+ keyExtractor,
+ onItemClick,
+ titleAccessor,
+ subtitleAccessor,
+ actionRender
+}: MobileListProps) => {
+
+ const renderCell = (item: T, col: Column) => {
+ if (typeof col.accessor === 'function') {
+ return col.accessor(item);
+ }
+ return item[col.accessor] as React.ReactNode;
+ };
+
+ const getTitle = (item: T) => {
+ if (!titleAccessor) return undefined;
+ if (typeof titleAccessor === 'function') return titleAccessor(item) as string;
+ return item[titleAccessor] as string;
+ };
+
+ const getSubtitle = (item: T) => {
+ if (!subtitleAccessor) return undefined;
+ if (typeof subtitleAccessor === 'function') return subtitleAccessor(item) as string;
+ return item[subtitleAccessor] as string;
+ };
+
+ return (
+ <>
+ {/* Mobile View: Cards */}
+ = ({ isOpen, onClose, title, children, maxWidth = 'max-w-2xl' }) => {
+ if (!isOpen) return null;
+
+ return (
+ (null);
+ const popoverRef = useRef(null);
+
+ // Close popover when clicking outside
+ useEffect(() => {
+ function handleClickOutside(event: MouseEvent) {
+ if (popoverRef.current && !popoverRef.current.contains(event.target as Node)) {
+ setIsOpen(false);
+ }
+ }
+ document.addEventListener("mousedown", handleClickOutside);
+ return () => {
+ document.removeEventListener("mousedown", handleClickOutside);
+ };
+ }, [popoverRef]);
+
+ const getIcon = (type: NotificationType) => {
+ switch (type) {
+ case 'info': return = ({ photos, onPhotosChange, onRemovePhoto }) => {
+ const fileInputRef = useRef(null);
+ const [uploading, setUploading] = useState(false);
+
+ const handleFileChange = async (e: React.ChangeEvent) => {
+ const file = e.target.files?.[0];
+ if (!file) return;
+
+ // Validation: Max 500KB
+ if (file.size > 500 * 1024) {
+ alert('A foto deve ter no máximo 500KB.');
+ if (fileInputRef.current) fileInputRef.current.value = '';
+ return;
+ }
+
+ // Validation: JPG only
+ if (file.type !== 'image/jpeg' && file.type !== 'image/jpg') {
+ alert('Apenas fotos no formato JPG são permitidas.');
+ if (fileInputRef.current) fileInputRef.current.value = '';
+ return;
+ }
+
+ setUploading(true);
+ const formData = new FormData();
+ formData.append('photo', file);
+
+ try {
+ const response = await api.post('/inspections/upload', formData, {
+ headers: {
+ 'Content-Type': 'multipart/form-data',
+ },
+ });
+ onPhotosChange(response.data.url);
+ } catch (error) {
+ console.error('Error uploading photo:', error);
+ alert('Erro ao enviar foto. Verifique se o tamanho é menor que 500KB.');
+ } finally {
+ setUploading(false);
+ if (fileInputRef.current) {
+ fileInputRef.current.value = '';
+ }
+ }
+ };
+
+ return (
+ = ({
+ children,
+ allowedRoles,
+ requireEdit = false,
+ redirectTo = '/',
+}) => {
+ const { appUser, isLoading, canEdit } = useAuth();
+
+ // Show loading state
+ if (isLoading) {
+ return (
+ {
+ label?: string;
+ error?: string;
+ options: { label: string; value: string | number }[];
+}
+
+export const Select = React.forwardRef(({ className, label, error, options, ...props }, ref) => {
+ return (
+ = ({
+ isOpen,
+ onClose,
+ recipientId,
+ recipientName,
+ existingMessage,
+ onMessageSent,
+}) => {
+ const [message, setMessage] = useState(existingMessage?.message || '');
+ const [isSending, setIsSending] = useState(false);
+
+ if (!isOpen) return null;
+
+ const handleSend = async () => {
+ if (!message.trim()) {
+ alert('Digite uma mensagem primeiro');
+ return;
+ }
+
+ setIsSending(true);
+ try {
+ await api.post('/messages', {
+ toUserId: recipientId,
+ message: message.trim(),
+ });
+ alert('Mensagem enviada com sucesso!');
+ onMessageSent();
+ onClose();
+ } catch (error) {
+ console.error('Error sending message:', error);
+ alert('Erro ao enviar mensagem');
+ } finally {
+ setIsSending(false);
+ }
+ };
+
+ const handleDelete = async () => {
+ if (!existingMessage?.id) return;
+
+ if (!confirm('Deseja realmente deletar esta mensagem?')) return;
+
+ setIsSending(true);
+ try {
+ await api.delete(`/messages/${existingMessage.id}`);
+ alert('Mensagem deletada com sucesso!');
+ onMessageSent();
+ onClose();
+ } catch (error) {
+ console.error('Error deleting message:', error);
+ alert('Erro ao deletar mensagem');
+ } finally {
+ setIsSending(false);
+ }
+ };
+
+ return (
+
+ 
+ SteelPaint
+
+
+ setIsSidebarOpen(false)}
+ />
+ )}
+
+ {/* Mobile Sidebar Drawer */}
+
+
+
+ {/* Floating Help Button */}
+
+
+ {/* Technical Manual Modal */}
+ setIsManualOpen(false)} />
+
+ );
+};
+
diff --git a/src/client/components/MobileList.tsx b/src/client/components/MobileList.tsx
new file mode 100644
index 0000000..b47e571
--- /dev/null
+++ b/src/client/components/MobileList.tsx
@@ -0,0 +1,117 @@
+import React from 'react';
+import { Card } from './Card';
+
+interface Column
+
+
+ {/* Main Content Area */}
+
+
+
+
+
+ SteelPaint
+
+
+
+
+
+
+ {data.map((item, index) => (
+ onItemClick?.(item)}
+ title={getTitle(item)}
+ description={getSubtitle(item)}
+ actions={actionRender?.(item)}
+ className="active:bg-surface-hover"
+ >
+
+ ))}
+
+
+ {/* Desktop View: Table */}
+
+ {columns.map((col, colIndex) => {
+ // Skip if it's the title or subtitle to avoid duplication (optional logic)
+ return (
+
+
+ {col.header}:
+ {renderCell(item, col)}
+
+ );
+ })}
+
+
+
+
+
+
+ );
+};
diff --git a/src/client/components/Modal.tsx b/src/client/components/Modal.tsx
new file mode 100644
index 0000000..d7648e5
--- /dev/null
+++ b/src/client/components/Modal.tsx
@@ -0,0 +1,30 @@
+import React from 'react';
+import { X } from 'lucide-react';
+
+interface ModalProps {
+ isOpen: boolean;
+ onClose: () => void;
+ title: string;
+ children: React.ReactNode;
+ maxWidth?: string;
+}
+
+export const Modal: React.FC| + {col.header} + | + ))} + {actionRender &&Ações | } +
|---|---|
| + {renderCell(item, col)} + | + ))} + {actionRender && ( ++ {actionRender(item)} + | + )} +
+
+ );
+};
diff --git a/src/client/components/NotificationBell.tsx b/src/client/components/NotificationBell.tsx
new file mode 100644
index 0000000..67df66b
--- /dev/null
+++ b/src/client/components/NotificationBell.tsx
@@ -0,0 +1,199 @@
+import React, { useState, useRef, useEffect } from 'react';
+import { useNotifications } from '../hooks/useNotifications';
+import { Bell, Check, Info, AlertTriangle, AlertCircle, CheckCircle, Trash2, Archive } from 'lucide-react';
+import type { NotificationType, INotification } from '../types';
+import { ArchivedNotificationsModal } from './ArchivedNotificationsModal';
+
+const NotificationBell: React.FC = () => {
+ const {
+ unreadCount,
+ notifications,
+ markAsRead,
+ markAllAsRead,
+ clearAll,
+ archiveNotification,
+ deleteNotification
+ } = useNotifications();
+ const [isOpen, setIsOpen] = useState(false);
+ const [isArchiveModalOpen, setIsArchiveModalOpen] = useState(false);
+ const [confirmActionId, setConfirmActionId] = useState
+
+
+
+ {title}
+ +
+ {children}
+
+
+
+
+ {isOpen && (
+ setIsArchiveModalOpen(false)}
+ />
+
+ );
+};
+
+export default NotificationBell;
diff --git a/src/client/components/PhotoUpload.tsx b/src/client/components/PhotoUpload.tsx
new file mode 100644
index 0000000..5ebcd23
--- /dev/null
+++ b/src/client/components/PhotoUpload.tsx
@@ -0,0 +1,112 @@
+import React, { useRef, useState } from 'react';
+import { Camera, X } from 'lucide-react';
+import api from '../services/api';
+
+interface PhotoUploadProps {
+ photos: string[];
+ onPhotosChange: (url: string) => void;
+ onRemovePhoto: (index: number) => void;
+}
+
+export const PhotoUpload: React.FC
+
+ )}
+
+
+
+
+ Notificações
+
+ {unreadCount > 0 && (
+
+ )}
+ {notifications.length > 0 && (
+
+ )}
+
+
+
+ {notifications.length === 0 ? (
+
+
+ Nenhuma notificação.
+
+ ) : (
+ -
+ {notifications.map((notification: INotification) => (
+
-
+ + {getIcon(notification.type)} +++++ + {notification.title} + + + {formatDate(notification.createdAt)} + +++ {!notification.isRead ? ( + + ) : } + + ++ + {/* Prompt de Arquivar/Excluir */} + {confirmActionId === notification._id && ( +++ )} +
O que deseja fazer com esta mensagem?
++ + ++ +
+ ))}
+
+ Fotos da Inspeção
+
+
+ );
+};
diff --git a/src/client/components/ProtectedRoute.tsx b/src/client/components/ProtectedRoute.tsx
new file mode 100644
index 0000000..302ec86
--- /dev/null
+++ b/src/client/components/ProtectedRoute.tsx
@@ -0,0 +1,48 @@
+import React from 'react';
+import { Navigate } from 'react-router-dom';
+import { useAuth } from '../context/useAuth';
+import type { UserRole } from '../types';
+import { RefreshCw } from 'lucide-react';
+
+interface ProtectedRouteProps {
+ children: React.ReactNode;
+ allowedRoles?: UserRole[];
+ requireEdit?: boolean;
+ redirectTo?: string;
+}
+
+/**
+ * ProtectedRoute component that restricts access based on user role
+ * @param allowedRoles - Array of roles that can access the route
+ * @param requireEdit - If true, only users who can edit (not guests) can access
+ * @param redirectTo - Where to redirect if access is denied (default: '/')
+ */
+export const ProtectedRoute: React.FC
+ {photos.map((photo, index) => (
+
+
+
+
+ 
+
+ ))}
+
+
+
+
+
+
+
+ );
+ }
+
+ // Check role-based access
+ if (allowedRoles && appUser && !allowedRoles.includes(appUser.role)) {
+ return
+ {label && }
+
+ {error && {error}}
+
+ );
+});
diff --git a/src/client/components/SendMessageModal.tsx b/src/client/components/SendMessageModal.tsx
new file mode 100644
index 0000000..2917881
--- /dev/null
+++ b/src/client/components/SendMessageModal.tsx
@@ -0,0 +1,154 @@
+import React, { useState } from 'react';
+import { X, Send, Trash2 } from 'lucide-react';
+import api from '../services/api';
+
+interface SendMessageModalProps {
+ isOpen: boolean;
+ onClose: () => void;
+ recipientId: string;
+ recipientName: string;
+ existingMessage?: {
+ id: string;
+ message: string;
+ };
+ onMessageSent: () => void;
+}
+
+export const SendMessageModal: React.FC
+
+ {/* Header */}
+
+
+
+ {/* Body */}
+
+
+
+ + {existingMessage ? 'Editar Mensagem' : 'Enviar Mensagem'} +
++ Para: {recipientName} +
+
+
+
+