const { useState, useEffect, useCallback, useMemo, useRef } = React; // --- Web Audio Chime Synthesizer --- class AudioChimeEngine { constructor() { this.ctx = null; this.enabled = true; } init() { if (!this.ctx) { const AudioCtx = window.AudioContext || window.webkitAudioContext; if (AudioCtx) this.ctx = new AudioCtx(); } if (this.ctx && this.ctx.state === 'suspended') { this.ctx.resume(); } } playTone(freq, duration, type = 'sine', delay = 0) { if (!this.enabled) return; this.init(); if (!this.ctx) return; setTimeout(() => { try { const osc = this.ctx.createOscillator(); const gain = this.ctx.createGain(); osc.type = type; osc.frequency.setValueAtTime(freq, this.ctx.currentTime); gain.gain.setValueAtTime(0.15, this.ctx.currentTime); gain.gain.exponentialRampToValueAtTime(0.001, this.ctx.currentTime + duration); osc.connect(gain); gain.connect(this.ctx.destination); osc.start(); osc.stop(this.ctx.currentTime + duration); } catch (e) { console.warn('Audio playback error', e); } }, delay * 1000); } playSuccess() { this.playTone(523.25, 0.12, 'sine', 0); this.playTone(659.25, 0.12, 'sine', 0.08); this.playTone(783.99, 0.20, 'sine', 0.16); this.playTone(1046.50, 0.35, 'sine', 0.24); } playAlert() { this.playTone(440, 0.12, 'triangle', 0); this.playTone(330, 0.25, 'triangle', 0.12); } playPop() { this.playTone(880, 0.05, 'sine', 0); } playDing() { this.playTone(987.77, 0.35, 'sine', 0); } } const chimeEngine = new AudioChimeEngine(); // --- Avatar Presets (Matching Android Mobile App) --- const AVATAR_PRESETS = [ { id: 'p1', name: 'Sarah J. (Client Lead)', icon: 'person', bg: '#059669' }, { id: 'p2', name: 'Alex C. (Staff Lead)', icon: 'badge', bg: '#0284C7' }, { id: 'p3', name: 'Daniel M. (Executive Lead)', icon: 'verified_user', bg: '#7C3AED' }, { id: 'p4', name: 'Marcus R. (Security)', icon: 'shield', bg: '#D97706' }, { id: 'p5', name: 'Elena K. (QA Lead)', icon: 'bug_report', bg: '#DC2626' }, { id: 'p6', name: 'David L. (Mobile Dev)', icon: 'smartphone', bg: '#0891B2' }, { id: 'p7', name: 'Taylor W. (UI/UX)', icon: 'palette', bg: '#DB2777' }, { id: 'p8', name: 'Enterprise Admin', icon: 'admin_panel_settings', bg: '#475569' } ]; // --- Sneksoft Infinity Logo SVG --- function SneksoftLogo({ className = "sneksoft-infinity-logo-svg" }) { return ( ); } // --- Login Screen Component (Clean, Authentic Enterprise Login) --- function LoginScreen({ onLoginSuccess, showToast }) { const [email, setEmail] = useState(''); const [password, setPassword] = useState(''); const [isPasswordVisible, setIsPasswordVisible] = useState(false); const [rememberMe, setRememberMe] = useState(true); const [isLoading, setIsLoading] = useState(false); const [errorMessage, setErrorMessage] = useState(null); // Live domain / staff feedback (subtle) const isStaffDomain = useMemo(() => { const trimmed = (email || '').trim().toLowerCase(); return trimmed.endsWith('@sneksoft.dev') || trimmed.endsWith('@rizewolf.com') || trimmed.includes('admin'); }, [email]); const handleSubmit = async (e) => { if (e) e.preventDefault(); if (!email.trim() || !password) { setErrorMessage('Please enter both your email address and password.'); chimeEngine.playAlert(); return; } setIsLoading(true); setErrorMessage(null); chimeEngine.playPop(); try { const res = await fetch('/api/v1/auth/login', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ email: email.trim(), password }) }); const data = await res.json(); if (res.ok && data.status === 'success') { if (rememberMe) { localStorage.setItem('sneksoft_token', data.token); localStorage.setItem('sneksoft_user', JSON.stringify(data.user)); } chimeEngine.playSuccess(); if (window.confetti) { window.confetti({ particleCount: 75, spread: 85, origin: { y: 0.7 } }); } showToast(data.message || `Welcome back, ${data.user.displayName}!`, 'success'); onLoginSuccess(data.user, data.token); } else { setErrorMessage(data.message || 'Sign in failed. Please check your email and password.'); chimeEngine.playAlert(); } } catch (err) { setErrorMessage('Network error connecting to auth service.'); chimeEngine.playAlert(); } finally { setIsLoading(false); } }; const handleForgotPassword = async () => { if (!email.trim()) { setErrorMessage('Please enter your email above to receive password reset instructions.'); chimeEngine.playAlert(); return; } try { const res = await fetch('/api/v1/auth/reset-password', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ email: email.trim() }) }); const data = await res.json(); showToast(data.message || 'Password reset link dispatched.', 'info'); setErrorMessage(null); chimeEngine.playDing(); } catch (e) { setErrorMessage('Failed to send reset email.'); } }; return (
{/* Scenic Background with subtle glow */}
{/* Sneksoft Infinity Logo & Header */}

SN3KB1TE

CLIENT & STAFF PORTAL
{/* Clean, Fully Visible Login Card */}

Sign In

Enter your credentials to access your deliverables & tasks

{errorMessage && (
error {errorMessage}
)}
{/* Email Field */}
{isStaffDomain && ( Staff Domain )}
mail setEmail(e.target.value)} required autoFocus />
{/* Password Field */}
lock setPassword(e.target.value)} required />
{/* Remember Me */}
verified_user Encrypted & Secure
{/* Submit Button */}
); } // --- Route & URL History Helpers --- function getRouteFromLocation() { if (typeof window === 'undefined') return { tab: 'dashboard', subId: null }; const path = window.location.pathname.replace(/^\/+/, '').toLowerCase(); const hash = window.location.hash.replace(/^#\/?/, '').toLowerCase(); const raw = path || hash || 'dashboard'; const segments = raw.split('/').filter(Boolean); let mainTab = segments[0] || 'dashboard'; if (mainTab === 'crm') mainTab = 'clients'; const subId = segments[1] || null; const validTabs = ['dashboard', 'projects', 'deliverables', 'tasks', 'clients', 'staff', 'messages', 'analytics', 'webhooks', 'health', 'profile']; if (validTabs.includes(mainTab)) { return { tab: mainTab, subId }; } return { tab: 'dashboard', subId: null }; } // --- Main App Component --- function App() { // Authentication State const [currentUser, setCurrentUser] = useState(() => { try { const stored = localStorage.getItem('sneksoft_user'); return stored ? JSON.parse(stored) : null; } catch (e) { return null; } }); const [authToken, setAuthToken] = useState(() => localStorage.getItem('sneksoft_token')); const [isUserMenuOpen, setIsUserMenuOpen] = useState(false); const [isSidebarCollapsed, setIsSidebarCollapsed] = useState(false); // Individual Page Routing with Browser History const initialRoute = useMemo(() => getRouteFromLocation(), []); const [activeTab, setActiveTab] = useState(initialRoute.tab); const [soundEnabled, setSoundEnabled] = useState(true); const [selectedProjectId, setSelectedProjectId] = useState('ALL'); const [searchQuery, setSearchQuery] = useState(''); const [toast, setToast] = useState(null); const [selectedAvatarId, setSelectedAvatarId] = useState(currentUser?.avatarId || 'p1'); const [customAvatarUrl, setCustomAvatarUrl] = useState(''); // Data Collections const [projects, setProjects] = useState([]); const [deliverables, setDeliverables] = useState([]); const [tasks, setTasks] = useState([]); const [messages, setMessages] = useState([]); const [staff, setStaff] = useState([]); const [clients, setClients] = useState([]); const [webhooks, setWebhooks] = useState([]); const [analytics, setAnalytics] = useState(null); const [activeProjectDetail, setActiveProjectDetail] = useState(null); const [activeProjectTab, setActiveProjectTab] = useState('milestones'); const [deliverableFilter, setDeliverableFilter] = useState('ALL'); const [taskFilter, setTaskFilter] = useState('ALL'); const [clientFilter, setClientFilter] = useState('ALL'); const [clientTierFilter, setClientTierFilter] = useState('ALL'); const [clientSearchQuery, setClientSearchQuery] = useState(''); const [clientStatusFilter, setClientStatusFilter] = useState('ALL'); const [clientViewMode, setClientViewMode] = useState('grid'); const [projectCategoryFilter, setProjectCategoryFilter] = useState('ALL'); const [projectViewMode, setProjectViewMode] = useState('kanban'); const [modalType, setModalType] = useState(null); const [targetDeliverable, setTargetDeliverable] = useState(null); const [approvalNote, setApprovalNote] = useState(''); const [editingClient, setEditingClient] = useState(null); const [viewingContractClient, setViewingContractClient] = useState(null); const [clientCreationStep, setClientCreationStep] = useState(1); const [contractPdfFile, setContractPdfFile] = useState(null); const [isDraggingPdf, setIsDraggingPdf] = useState(false); // Profile Edit State const [profileForm, setProfileForm] = useState({ displayName: currentUser?.displayName || 'Client Representative', email: currentUser?.email || 'sarah.jenkins@sneksoft.com', phone: '(303) 555-0105', address: 'UK, 789 Pine Avenue', occupation: currentUser?.title || 'Executive Business Leader', company: currentUser?.company || 'Enterprise Client' }); const [projectForm, setProjectForm] = useState({ title: '', clientName: '', category: 'Mobile App Development', description: '', deadline: 'Dec 2026', progress: 15, accentColorHex: '#0284C7' }); const [clientForm, setClientForm] = useState({ company: '', primaryContact: '', email: '', phone: '', industry: 'Enterprise Software & Cloud', tier: 'ENTERPRISE', status: 'ACTIVE', billingStatus: 'CURRENT', monthlyRetainer: '$18,500/mo', contractStart: new Date().toISOString().split('T')[0], contractEnd: '2026-12-31', contractPdfName: 'Enterprise_Master_Services_Agreement_2026.pdf', contractPdfSize: '2.4 MB', contractPdfUrl: '', contractType: 'Master Services Agreement (MSA)', slaTier: '24/7 Dedicated Architecture Team (1hr SLA)', ndaSigned: true, notes: '', assignedProjects: [] }); const [deliverableForm, setDeliverableForm] = useState({ projectId: '1', title: '', fileType: 'APK', fileDetails: 'Android Staging Build (SHA-256 Verified)', downloadUrl: 'https://builds.sneksoft.com/app-staging-v2.5.0.apk', buildNumber: '2.5.0', changelog: 'Added real-time notification chimes and passkey security flow.', submittedBy: currentUser?.displayName || 'Alex Chen (Staff Lead)' }); const [taskForm, setTaskForm] = useState({ projectId: '1', title: '', description: '', assignedToRole: 'CLIENT', assignedToName: 'Client Lead', dueDate: 'Tomorrow at 5:00 PM', priority: 'HIGH' }); const [staffForm, setStaffForm] = useState({ name: '', email: '', role: 'Staff Engineer', accessLevel: 'STAFF_ENGINEER', isPasskeyEnrolled: true }); const [assignStaffForm, setAssignStaffForm] = useState({ staffId: '', role: 'Lead Architect & Engineer' }); const [chatMessage, setChatMessage] = useState(''); const [pushPermission, setPushPermission] = useState(() => { return (typeof window !== 'undefined' && 'Notification' in window) ? Notification.permission : 'default'; }); const [messageSearch, setMessageSearch] = useState(''); const [selectedChannelId, setSelectedChannelId] = useState('ALL'); const [attachedDeliverableWeb, setAttachedDeliverableWeb] = useState(null); const [reactions, setReactions] = useState({}); const [isStaffTyping, setIsStaffTyping] = useState(false); const requestPushPermission = async () => { if (typeof window !== 'undefined' && 'Notification' in window) { try { const permission = await Notification.requestPermission(); setPushPermission(permission); if (permission === 'granted') { showToast('Push notifications enabled for Sneksoft Portal!', 'success'); try { new Notification('Sneksoft Client Portal', { body: 'Push notifications are active. You will receive real-time updates for messages and deliverables.', icon: '/images/login_bg.png' }); } catch (e) {} } else { showToast('Notification permission: ' + permission, 'info'); } } catch (e) { showToast('Could not request notification permissions.', 'warning'); } } else { showToast('Notifications are not supported in this browser.', 'warning'); } }; const triggerPushAlert = (title, body) => { if (typeof window !== 'undefined' && 'Notification' in window && Notification.permission === 'granted') { try { new Notification(title, { body: body, icon: '/images/login_bg.png' }); } catch (err) { console.warn('Push alert error:', err); } } }; useEffect(() => { chimeEngine.enabled = soundEnabled; }, [soundEnabled]); const showToast = (message, type = 'info') => { setToast({ message, type, id: Date.now() }); if (type === 'success') { chimeEngine.playSuccess(); if (window.confetti) { window.confetti({ particleCount: 50, spread: 70, origin: { y: 0.8 } }); } } else if (type === 'warning') { chimeEngine.playAlert(); } else { chimeEngine.playDing(); } setTimeout(() => setToast(null), 3500); }; // Authenticated Data Sync with Real-time SSE Stream const fetchData = useCallback(async () => { if (!currentUser) return; const headers = {}; if (authToken) headers['Authorization'] = `Bearer ${authToken}`; try { const [pRes, dRes, tRes, mRes, sRes, cRes, wRes, aRes] = await Promise.all([ fetch('/api/v1/projects', { headers }).then(r => r.json()), fetch('/api/v1/deliverables', { headers }).then(r => r.json()), fetch('/api/v1/tasks', { headers }).then(r => r.json()), fetch('/api/v1/messages', { headers }).then(r => r.json()), fetch('/api/v1/staff', { headers }).then(r => r.json()), fetch('/api/v1/clients', { headers }).then(r => r.json()), fetch('/api/v1/webhooks', { headers }).then(r => r.json()), fetch('/api/v1/analytics', { headers }).then(r => r.json()) ]); if (pRes.projects) { setProjects(pRes.projects); // Keep active project in sync setActiveProjectDetail(prev => { if (!prev) return pRes.projects[0] || null; const updated = pRes.projects.find(p => String(p.id) === String(prev.id)); return updated || pRes.projects[0] || null; }); } if (dRes.deliverables) setDeliverables(dRes.deliverables); if (tRes.tasks) setTasks(tRes.tasks); if (mRes.messages) setMessages(mRes.messages); if (sRes.staff) setStaff(sRes.staff); if (cRes.clients && Array.isArray(cRes.clients)) { setClients(cRes.clients); } else { setClients([]); } if (wRes.webhooks) setWebhooks(wRes.webhooks); if (aRes.system) setAnalytics(aRes); } catch (err) { console.error('Failed to sync backend data:', err); } }, [currentUser, authToken]); // Real-time synchronization via Server-Sent Events (SSE) useEffect(() => { if (!currentUser) return; fetchData(); let eventSource; try { eventSource = new EventSource('/api/v1/events'); eventSource.onmessage = (e) => { try { const payload = JSON.parse(e.data); if (payload.type && payload.type !== 'CONNECTED') { console.log('⚡ Real-time SSE event received from backend:', payload.type); fetchData(); } } catch (err) { console.error('SSE payload parse error:', err); } }; eventSource.onerror = (err) => { // SSE auto-reconnects }; } catch (err) { console.warn('SSE subscription fallback:', err); } const interval = setInterval(fetchData, 6000); return () => { clearInterval(interval); if (eventSource) eventSource.close(); }; }, [currentUser, fetchData]); // Dedicated Page Navigation & Browser History Sync (Back / Forward navigation) const navigateTo = useCallback((tab, subId = null, replace = false) => { const normalizedTab = tab === 'crm' ? 'clients' : tab; setActiveTab(normalizedTab); if (normalizedTab === 'projects' && subId && projects.length > 0) { const proj = projects.find(p => String(p.id) === String(subId)); if (proj) setActiveProjectDetail(proj); } let urlPath = `/${normalizedTab === 'dashboard' && !subId ? '' : normalizedTab}`; if (subId) urlPath += `/${subId}`; if (urlPath === '') urlPath = '/'; const pageTitles = { dashboard: 'Sneksoft • Overview Dashboard', projects: subId ? 'Sneksoft • Project Details' : 'Sneksoft • Projects Hub', deliverables: 'Sneksoft • Deliverables & Builds', tasks: 'Sneksoft • Action Items & Tasks', clients: 'Sneksoft • CRM & Contracts', staff: 'Sneksoft • Staff Directory', messages: 'Sneksoft • Team Discussions', analytics: 'Sneksoft • Analytics & Audits', webhooks: 'Sneksoft • Webhooks & Events', health: 'Sneksoft • System Diagnostics', profile: 'Sneksoft • Profile & Preferences' }; document.title = pageTitles[normalizedTab] || 'Sneksoft Client Portal'; try { if (window.location.pathname !== urlPath) { if (replace) { window.history.replaceState({ tab: normalizedTab, subId }, '', urlPath); } else { window.history.pushState({ tab: normalizedTab, subId }, '', urlPath); } } } catch (e) { const hashPath = subId ? `#/${normalizedTab}/${subId}` : `#/${normalizedTab}`; if (window.location.hash !== hashPath) { if (replace) window.location.replace(hashPath); else window.location.hash = hashPath; } } }, [projects]); // Handle browser Back / Forward history navigation (popstate & hashchange) useEffect(() => { const handleLocationChange = () => { const route = getRouteFromLocation(); setActiveTab(route.tab); if (route.subId && projects.length > 0) { const found = projects.find(p => String(p.id) === String(route.subId)); if (found) setActiveProjectDetail(found); } const pageTitles = { dashboard: 'Sneksoft • Overview Dashboard', projects: route.subId ? 'Sneksoft • Project Details' : 'Sneksoft • Projects Hub', deliverables: 'Sneksoft • Deliverables & Builds', tasks: 'Sneksoft • Action Items & Tasks', clients: 'Sneksoft • CRM & Contracts', staff: 'Sneksoft • Staff Directory', messages: 'Sneksoft • Team Discussions', analytics: 'Sneksoft • Analytics & Audits', webhooks: 'Sneksoft • Webhooks & Events', health: 'Sneksoft • System Diagnostics', profile: 'Sneksoft • Profile & Preferences' }; document.title = pageTitles[route.tab] || 'Sneksoft Client Portal'; }; window.addEventListener('popstate', handleLocationChange); window.addEventListener('hashchange', handleLocationChange); // Initial sync when projects list is populated if (initialRoute.subId && projects.length > 0) { const found = projects.find(p => String(p.id) === String(initialRoute.subId)); if (found) setActiveProjectDetail(found); } return () => { window.removeEventListener('popstate', handleLocationChange); window.removeEventListener('hashchange', handleLocationChange); }; }, [projects, initialRoute]); // Auth Handlers const handleLoginSuccess = (user, token) => { setCurrentUser(user); setAuthToken(token); setSelectedAvatarId(user.avatarId || 'p1'); setProfileForm({ displayName: user.displayName, email: user.email, phone: '(303) 555-0105', address: 'UK, 789 Pine Avenue', occupation: user.title, company: user.company || 'Enterprise Client' }); const currentRoute = getRouteFromLocation(); navigateTo(currentRoute.tab, currentRoute.subId, true); }; const handleLogout = async () => { chimeEngine.playAlert(); try { if (authToken) { await fetch('/api/v1/auth/logout', { method: 'POST', headers: { 'Authorization': `Bearer ${authToken}` } }); } } catch (e) { // ignore } localStorage.removeItem('sneksoft_token'); localStorage.removeItem('sneksoft_user'); setCurrentUser(null); setAuthToken(null); setIsUserMenuOpen(false); showToast('Signed out of Sneksoft Portal', 'info'); }; // Filters & Calculations const filteredProjects = useMemo(() => { return projects.filter(p => { const q = (searchQuery || '').toLowerCase(); const matchesSearch = (p.title || '').toLowerCase().includes(q) || (p.clientName || '').toLowerCase().includes(q) || (p.category || '').toLowerCase().includes(q) || (p.description || '').toLowerCase().includes(q); const matchesProject = selectedProjectId === 'ALL' || String(p.id) === String(selectedProjectId); const matchesCategory = projectCategoryFilter === 'ALL' || p.category === projectCategoryFilter; return matchesSearch && matchesProject && matchesCategory; }); }, [projects, searchQuery, selectedProjectId, projectCategoryFilter]); const filteredDeliverables = useMemo(() => { return deliverables.filter(d => { const matchesSearch = d.title.toLowerCase().includes(searchQuery.toLowerCase()) || d.fileType.toLowerCase().includes(searchQuery.toLowerCase()); const matchesProject = selectedProjectId === 'ALL' || String(d.projectId) === String(selectedProjectId); let matchesFilter = true; if (deliverableFilter === 'PENDING') matchesFilter = d.status === 'PENDING_APPROVAL'; if (deliverableFilter === 'APPROVED') matchesFilter = d.status === 'APPROVED'; if (deliverableFilter === 'CHANGES') matchesFilter = d.status === 'CHANGES_REQUESTED'; if (deliverableFilter === 'APK') matchesFilter = d.fileType === 'APK'; if (deliverableFilter === 'FIGMA') matchesFilter = d.fileType === 'FIGMA'; return matchesSearch && matchesProject && matchesFilter; }); }, [deliverables, searchQuery, selectedProjectId, deliverableFilter]); const filteredTasks = useMemo(() => { return tasks.filter(t => { const matchesSearch = t.title.toLowerCase().includes(searchQuery.toLowerCase()) || t.description.toLowerCase().includes(searchQuery.toLowerCase()) || t.assignedToName.toLowerCase().includes(searchQuery.toLowerCase()); const matchesProject = selectedProjectId === 'ALL' || String(t.projectId) === String(selectedProjectId); let matchesFilter = true; if (taskFilter === 'PENDING') matchesFilter = !t.isCompleted; if (taskFilter === 'COMPLETED') matchesFilter = t.isCompleted; if (taskFilter === 'HIGH') matchesFilter = t.priority === 'HIGH'; if (taskFilter === 'CLIENT') matchesFilter = t.assignedToRole === 'CLIENT'; if (taskFilter === 'STAFF') matchesFilter = t.assignedToRole === 'STAFF'; return matchesSearch && matchesProject && matchesFilter; }); }, [tasks, searchQuery, selectedProjectId, taskFilter]); const filteredClients = useMemo(() => { return (clients || []).filter(c => { const q = (clientSearchQuery || '').toLowerCase().trim(); const matchesSearch = !q || (c.company || '').toLowerCase().includes(q) || (c.primaryContact || '').toLowerCase().includes(q) || (c.email || '').toLowerCase().includes(q) || (c.industry || '').toLowerCase().includes(q) || (c.tier || '').toLowerCase().includes(q); let matchesStatus = true; if (clientStatusFilter !== 'ALL') { matchesStatus = c.status === clientStatusFilter; } else if (clientFilter !== 'ALL') { matchesStatus = c.status === clientFilter; } let matchesTier = true; if (clientTierFilter !== 'ALL') matchesTier = c.tier === clientTierFilter; return matchesSearch && matchesStatus && matchesTier; }); }, [clients, clientSearchQuery, clientFilter, clientStatusFilter, clientTierFilter]); const pendingApprovalsCount = useMemo(() => deliverables.filter(d => d.status === 'PENDING_APPROVAL').length, [deliverables]); const pendingTasksCount = useMemo(() => tasks.filter(t => !t.isCompleted).length, [tasks]); const avgCompletion = useMemo(() => { if (!projects.length) return 0; return Math.round(projects.reduce((acc, p) => acc + (Number(p.progress) || 0), 0) / projects.length); }, [projects]); // Handlers for Data Mutations const handleCreateProject = async (e) => { e.preventDefault(); try { const emailLower = (currentUser?.email || '').trim().toLowerCase(); const isStaffUser = currentUser?.isStaff || emailLower.endsWith('@sneksoft.dev') || emailLower.endsWith('@rizewolf.com') || currentUser?.isAdmin; const payload = { ...projectForm, creatorEmail: currentUser?.email, creatorName: currentUser?.displayName || currentUser?.name, creatorRole: currentUser?.role || (emailLower.endsWith('@rizewolf.com') ? 'Principal Security Architect' : 'Staff Lead & Enterprise Architect'), creatorId: currentUser?.id || currentUser?.uid }; const res = await fetch('/api/v1/projects', { method: 'POST', headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${authToken}` }, body: JSON.stringify(payload) }); const data = await res.json(); if (res.ok) { showToast(isStaffUser ? `Project published & automatically assigned to ${currentUser?.displayName || 'you'}!` : 'Client project registered & published!', 'success'); setModalType(null); setProjectForm({ title: '', clientName: '', category: 'Mobile App Development', description: '', deadline: 'Dec 2026', progress: 15, accentColorHex: '#0284C7' }); fetchData(); } else { showToast(data.message || 'Failed to create project', 'warning'); } } catch (e) { showToast('Network error publishing project', 'warning'); } }; const handleCreateDeliverable = async (e) => { e.preventDefault(); try { const res = await fetch('/api/v1/deliverables', { method: 'POST', headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${authToken}` }, body: JSON.stringify(deliverableForm) }); const data = await res.json(); if (res.ok) { showToast('Deliverable build dispatched to client!', 'success'); setModalType(null); setDeliverableForm({ projectId: '1', title: '', fileType: 'APK', fileDetails: 'Android Staging Build', downloadUrl: 'https://builds.sneksoft.com/app-v2.5.0.apk', buildNumber: '2.5.0', changelog: '', submittedBy: currentUser?.displayName }); fetchData(); } else { showToast(data.message || 'Failed to publish deliverable', 'warning'); } } catch (e) { showToast('Network error publishing deliverable', 'warning'); } }; const handleUpdateDeliverableStatus = async (id, status, notes = '') => { try { const res = await fetch(`/api/v1/deliverables/${id}/status`, { method: 'PATCH', headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${authToken}` }, body: JSON.stringify({ status, notes, reviewedBy: currentUser?.displayName }) }); if (res.ok) { showToast(`Deliverable marked as ${status.replace('_', ' ')}!`, status === 'APPROVED' ? 'success' : 'info'); setModalType(null); fetchData(); } } catch (e) { showToast('Status update failed', 'warning'); } }; const handleCreateTask = async (e) => { e.preventDefault(); try { const res = await fetch('/api/v1/tasks', { method: 'POST', headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${authToken}` }, body: JSON.stringify(taskForm) }); if (res.ok) { showToast('Action item assigned!', 'success'); setModalType(null); setTaskForm({ projectId: '1', title: '', description: '', assignedToRole: 'CLIENT', assignedToName: 'Client Lead', dueDate: 'Tomorrow at 5:00 PM', priority: 'HIGH' }); fetchData(); } } catch (e) { showToast('Task creation failed', 'warning'); } }; const handleToggleTask = async (id, currentStatus) => { try { const res = await fetch(`/api/v1/tasks/${id}/toggle`, { method: 'PATCH', headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${authToken}` }, body: JSON.stringify({ isCompleted: !currentStatus }) }); if (res.ok) { showToast(!currentStatus ? 'Task completed!' : 'Task reopened', !currentStatus ? 'success' : 'info'); fetchData(); } } catch (e) { showToast('Failed to toggle task', 'warning'); } }; const handleSendMessage = async (e) => { e?.preventDefault?.(); if (!chatMessage.trim()) return; const targetProjId = selectedChannelId === 'ALL' ? (selectedProjectId === 'ALL' ? '1' : selectedProjectId) : selectedChannelId; const textToSend = attachedDeliverableWeb ? `${chatMessage.trim()}\n📎 Attached: ${attachedDeliverableWeb}` : chatMessage.trim(); try { const res = await fetch('/api/v1/messages', { method: 'POST', headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${authToken}` }, body: JSON.stringify({ projectId: targetProjId, senderName: currentUser?.displayName || 'Client Representative', senderRole: currentUser?.role || 'CLIENT', text: textToSend }) }); if (res.ok) { setChatMessage(''); setAttachedDeliverableWeb(null); chimeEngine.playPop(); fetchData(); triggerPushAlert('💬 Message Dispatched', `${currentUser?.displayName || 'You'}: ${chatMessage.trim()}`); // Real-time bidirectional staff reply simulation with push notification setIsStaffTyping(true); setTimeout(async () => { setIsStaffTyping(false); const replies = [ 'Thanks for the update! Reviewing the build logs and UI specs now.', 'Acknowledged. The engineering team is preparing the milestone deliverable.', 'Great question! We have verified the build artifacts and passkey credentials.', 'Received. Staging deployment is underway for your review.' ]; const autoReply = replies[Math.floor(Math.random() * replies.length)]; try { await fetch('/api/v1/messages', { method: 'POST', headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${authToken}` }, body: JSON.stringify({ projectId: targetProjId, senderName: 'Alex Chen', senderRole: 'STAFF', text: autoReply }) }); fetchData(); chimeEngine.playDing(); triggerPushAlert('🔔 New Message from Alex Chen (Staff Lead)', autoReply); } catch (err) {} }, 2200); } } catch (e) { showToast('Failed to send message', 'warning'); } }; const handleDeleteMessage = async (msgId) => { try { const res = await fetch(`/api/v1/messages/${msgId}`, { method: 'DELETE', headers: { 'Authorization': `Bearer ${authToken}` } }); if (res.ok) { showToast('Message removed', 'info'); fetchData(); } else { setMessages(prev => prev.filter(m => m.id !== msgId)); showToast('Message removed', 'info'); } } catch (e) { setMessages(prev => prev.filter(m => m.id !== msgId)); showToast('Message removed', 'info'); } }; const handleReactMessage = (msgId, emoji) => { setReactions(prev => { const msgReactions = prev[msgId] || {}; const currentCount = msgReactions[emoji] || 0; return { ...prev, [msgId]: { ...msgReactions, [emoji]: currentCount + 1 } }; }); chimeEngine.playPop(); showToast(`Reacted ${emoji}`, 'info'); }; const handleCreateStaff = async (e) => { e.preventDefault(); try { const res = await fetch('/api/v1/staff', { method: 'POST', headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${authToken}` }, body: JSON.stringify(staffForm) }); if (res.ok) { showToast('Staff member enrolled with passkey credentials!', 'success'); setModalType(null); setStaffForm({ name: '', email: '', role: 'Staff Engineer', accessLevel: 'STAFF_ENGINEER', isPasskeyEnrolled: true }); fetchData(); } } catch (e) { showToast('Failed to enroll staff member', 'warning'); } }; const handleAssignStaff = async (projectId, staffMember, role) => { if (!staffMember) { showToast('Please select a valid staff member', 'warning'); return; } try { const res = await fetch(`/api/v1/projects/${projectId}/assign-staff`, { method: 'POST', headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${authToken}` }, body: JSON.stringify({ staffId: staffMember.id, staffName: staffMember.name, staffEmail: staffMember.email, role: role || staffMember.role || 'Staff Engineer', avatar: staffMember.avatar || 'p2' }) }); const data = await res.json(); if (res.ok && data.status === 'success') { showToast(`Assigned ${staffMember.name} to project!`, 'success'); setModalType(null); fetchData(); } else { showToast(data.message || 'Failed to assign staff', 'warning'); } } catch (e) { showToast('Failed to assign staff to project', 'warning'); } }; const handleUnassignStaff = async (projectId, staffIdOrEmail) => { try { const res = await fetch(`/api/v1/projects/${projectId}/assign-staff/${staffIdOrEmail}`, { method: 'DELETE', headers: { 'Authorization': `Bearer ${authToken}` } }); const data = await res.json(); if (res.ok && data.status === 'success') { showToast('Staff member unassigned from project', 'info'); fetchData(); } else { showToast(data.message || 'Failed to remove assignment', 'warning'); } } catch (e) { showToast('Error unassigning staff member', 'warning'); } }; const handleToggleStaffPasskey = async (staffId, currentStatus, staffMember) => { try { chimeEngine.playPop(); const newStatus = !currentStatus; // Immediate optimistic update setStaff(prev => prev.map(s => (String(s.id) === String(staffId) || (staffMember?.email && s.email === staffMember.email)) ? { ...s, isPasskeyEnrolled: newStatus } : s )); const res = await fetch(`/api/v1/staff/${staffId}/passkey`, { method: 'PATCH', headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${authToken}` }, body: JSON.stringify({ isPasskeyEnrolled: newStatus }) }); const data = await res.json(); if (res.ok) { showToast(newStatus ? `Passkey credentials enrolled for ${data.staff?.name || staffMember?.name || 'staff'}` : `Passkey enrolment revoked for ${data.staff?.name || staffMember?.name || 'staff'}`, newStatus ? 'success' : 'info'); fetchData(); } else { showToast(data.message || 'Failed to update passkey status', 'warning'); fetchData(); } } catch (e) { showToast('Error updating staff passkey enrollment', 'warning'); fetchData(); } }; const handleSaveProfile = (e) => { e.preventDefault(); const updated = { ...currentUser, displayName: profileForm.displayName, email: profileForm.email, title: profileForm.occupation, avatarId: selectedAvatarId, company: profileForm.company }; setCurrentUser(updated); localStorage.setItem('sneksoft_user', JSON.stringify(updated)); showToast('Profile credentials saved!', 'success'); }; const handlePdfUpload = (e) => { const file = e.target?.files?.[0] || e.dataTransfer?.files?.[0]; if (file) { if (file.type !== 'application/pdf' && !file.name.toLowerCase().endsWith('.pdf')) { showToast('Please upload a valid PDF contract file (*.pdf)', 'warning'); return; } const sizeInMb = (file.size / (1024 * 1024)).toFixed(1) + ' MB'; const fileUrl = URL.createObjectURL(file); const reader = new FileReader(); reader.onload = (loadEvent) => { const base64Data = loadEvent.target?.result; setContractPdfFile({ name: file.name, size: sizeInMb, url: fileUrl, base64: base64Data, uploadedAt: new Date().toLocaleTimeString() }); setClientForm(prev => ({ ...prev, contractPdfName: file.name, contractPdfSize: sizeInMb, contractPdfUrl: fileUrl, pdfBase64: base64Data })); chimeEngine.playSuccess(); showToast(`Contract PDF '${file.name}' attached and staged for Firebase Storage!`, 'success'); }; reader.readAsDataURL(file); } }; const handleDownloadContractPdf = (client) => { if (!client) return; const fileName = client.contractPdfName || `${(client.company || 'Enterprise_Client').replace(/\s+/g, '_')}_MSA_Agreement.pdf`; // If there is a direct Firebase Storage URL, attempt to trigger direct download or fallback to generated blob if (client.contractPdfUrl && (client.contractPdfUrl.startsWith('http://') || client.contractPdfUrl.startsWith('https://'))) { const a = document.createElement('a'); a.href = client.contractPdfUrl; a.target = '_blank'; a.download = fileName; document.body.appendChild(a); a.click(); document.body.removeChild(a); chimeEngine.playSuccess(); showToast(`Downloading contract from Firebase Storage: ${fileName}`, 'success'); return; } const dummyPdf = `%PDF-1.4 %SNEKSOFT ENTERPRISE MASTER SERVICES AGREEMENT & SLA ====================================================== Organization: ${client.company} Principal Contact: ${client.primaryContact} Email: ${client.email} Account Tier: ${client.tier || 'ENTERPRISE'} Monthly Retainer: ${client.monthlyRetainer || '$18,500/mo'} Contract Term: ${client.contractStart || '2026-01-01'} to ${client.contractEnd || '2027-12-31'} SLA Commitment: ${client.slaTier || '24/7 Dedicated Architecture Team (1hr SLA)'} NDA Status: MUTUALLY EXECUTED Document ID: SNEK-MSA-${Date.now().toString(36).toUpperCase()} Storage Bucket: ${client.contractStorageBucket || 'sneksoft-core-app.appspot.com'} SHA-256 Checksum: e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855 ====================================================== Signed on behalf of Sneksoft Technologies: Alex Chen (Staff Lead) Signed on behalf of ${client.company}: ${client.primaryContact} %%EOF`; const blob = new Blob([dummyPdf], { type: 'application/pdf' }); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = fileName; document.body.appendChild(a); a.click(); document.body.removeChild(a); URL.revokeObjectURL(url); chimeEngine.playSuccess(); showToast(`Downloading contract PDF: ${fileName}`, 'success'); }; const handleCreateClient = async (e) => { if (e && e.preventDefault) e.preventDefault(); if (!clientForm.company.trim()) { showToast('Please enter a company name', 'warning'); setClientCreationStep(1); return; } try { showToast('Persisting client to Firestore & uploading contract to Firebase Storage...', 'info'); const payload = { ...clientForm, contractPdfName: clientForm.contractPdfName || `${clientForm.company.replace(/\s+/g, '_')}_Master_Services_Agreement_2026.pdf`, contractPdfSize: clientForm.contractPdfSize || '2.4 MB', pdfBase64: clientForm.pdfBase64 || contractPdfFile?.base64 || null, slaTier: clientForm.slaTier || '24/7 Dedicated Architecture Team (1hr SLA)', ndaSigned: true }; const res = await fetch('/api/v1/clients', { method: 'POST', headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${authToken}` }, body: JSON.stringify(payload) }); const data = await res.json(); if (res.ok) { showToast(`Client '${clientForm.company}' and signed contract persisted to Firestore & Firebase Storage!`, 'success'); chimeEngine.playSuccess(); setModalType(null); setClientCreationStep(1); setContractPdfFile(null); setClientForm({ company: '', primaryContact: '', email: '', phone: '', industry: 'Enterprise Software & Cloud', tier: 'ENTERPRISE', status: 'ACTIVE', billingStatus: 'CURRENT', monthlyRetainer: '$18,500/mo', contractStart: new Date().toISOString().split('T')[0], contractEnd: '2026-12-31', contractPdfName: 'Enterprise_Master_Services_Agreement_2026.pdf', contractPdfSize: '2.4 MB', contractPdfUrl: '', pdfBase64: null, contractType: 'Master Services Agreement (MSA)', slaTier: '24/7 Dedicated Architecture Team (1hr SLA)', ndaSigned: true, notes: '', assignedProjects: [] }); fetchData(); } else { showToast(data.message || 'Failed to create client', 'warning'); } } catch (err) { showToast('Error creating client account', 'warning'); } }; const handleUpdateClient = async (e) => { e.preventDefault(); if (!editingClient) return; try { const res = await fetch(`/api/v1/clients/${editingClient.id}`, { method: 'PATCH', headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${authToken}` }, body: JSON.stringify(editingClient) }); const data = await res.json(); if (res.ok) { showToast(`Client account '${editingClient.company}' updated!`, 'success'); setModalType(null); setEditingClient(null); fetchData(); } else { showToast(data.message || 'Failed to update client', 'warning'); } } catch (err) { showToast('Error updating client', 'warning'); } }; const handleDeleteClient = async (id, companyName) => { if (!confirm(`Are you sure you want to delete CRM client account '${companyName}'?`)) return; try { const res = await fetch(`/api/v1/clients/${id}`, { method: 'DELETE', headers: { 'Authorization': `Bearer ${authToken}` } }); if (res.ok) { showToast(`Deleted CRM client account '${companyName}'`, 'info'); fetchData(); } else { showToast('Failed to delete client', 'warning'); } } catch (err) { showToast('Error deleting client', 'warning'); } }; const handleAssignClientProject = async (clientId, projectId) => { try { const targetClient = clients.find(c => String(c.id) === String(clientId)); if (!targetClient) return; const currentProjects = targetClient.assignedProjects || []; const updatedProjects = currentProjects.includes(String(projectId)) ? currentProjects.filter(id => id !== String(projectId)) : [...currentProjects, String(projectId)]; const res = await fetch(`/api/v1/clients/${clientId}`, { method: 'PATCH', headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${authToken}` }, body: JSON.stringify({ assignedProjects: updatedProjects }) }); if (res.ok) { showToast(`Updated project assignments for ${targetClient.company}`, 'success'); fetchData(); } } catch (e) { showToast('Failed to assign project', 'warning'); } }; // If user is unauthenticated, render the dedicated Login Screen if (!currentUser) { return ; } const activeAvatar = AVATAR_PRESETS.find(p => p.id === selectedAvatarId) || AVATAR_PRESETS[0]; return (
{/* Toast Notification */} {toast && (
{toast.type === 'success' ? 'check_circle' : toast.type === 'warning' ? 'warning' : 'info'} {toast.message}
)} {/* Desktop Sidebar Navigation (Seamless on Desktop viewports) */} {/* Desktop Sidebar Navigation (Collapsible) */} {/* Main Content Area */}
{/* Topbar Header */}
{/* Project Filter Selector */} {/* Search Input */}
search setSearchQuery(e.target.value)} />
{/* Quick Action: New Project */} {/* Quick Action: New Client */}
{/* Viewport Content */}
{/* 1. DASHBOARD */} {activeTab === 'dashboard' && (
verified SNEKSOFT ENTERPRISE CLIENT ENVIRONMENT

Client Portfolio & Deliverables Gateway

Access certified staging APKs, inspect architectural milestones, review deliverables, and communicate securely with the lead engineering team.

folder_special
Total Projects
{projects.length}
donut_large
Avg Portfolio Progress
{avgCompletion}%
pending_actions
Pending Sign-Offs
{pendingApprovalsCount}
checklist
Open Tasks
{pendingTasksCount}
{/* Active Projects Bento */}
appsActive Client Projects
{filteredProjects.slice(0, 4).map(p => (
{ setActiveProjectDetail(p); navigateTo('projects', p.id); chimeEngine.playPop(); }} >
{p.category} {p.progress}%

{p.title}

Client: {p.clientName}

))}
{/* Pending Approvals Bento */}
gavelPending Deliverable Approvals
{deliverables.filter(d => d.status === 'PENDING_APPROVAL').length === 0 ? (
task_alt

All deliverables certified & up to date!

) : (
{deliverables.filter(d => d.status === 'PENDING_APPROVAL').slice(0, 4).map(d => (
{d.fileType}
{d.title}
v{d.buildNumber || '1.0'} • Submitted by {d.submittedBy || 'Engineering'}
))}
)}
)} {/* 2. PROJECTS HUB */} {activeTab === 'projects' && (
{/* Projects Hero Banner */}
folder_special ENGINEERING PORTFOLIO & WORKSPACES

Enterprise Client Projects & Architecture

Monitor project milestones, inspect technical roadmap progress, review deliverables, collaborate with assigned engineering leads, and manage sprint deliverables.

folder
Active Projects
{projects.length}
donut_large
Avg Portfolio Progress
{avgCompletion}%
verified
Approved Builds
{deliverables.filter(d => d.status === 'APPROVED').length}
assignment_late
Pending Tasks
{pendingTasksCount}
{/* Project Filter & Desktop View Mode Switcher */}
Category: {Array.from(new Set(projects.map(p => p.category).filter(Boolean))).map(cat => ( ))}
{/* Desktop View Switcher */}
{/* Split Master-Detail View Mode */} {projectViewMode === 'split' && (
{/* Left List of Projects */}
Projects ({filteredProjects.length})
{filteredProjects.length === 0 ? (
folder_off

No projects match your filter

) : ( filteredProjects.map(p => { const isSelected = activeProjectDetail?.id === p.id; const projDeliverables = deliverables.filter(d => String(d.projectId) === String(p.id)); const projTasks = tasks.filter(t => String(t.projectId) === String(p.id)); return (
{ setActiveProjectDetail(p); navigateTo('projects', p.id); chimeEngine.playPop(); }} >
{p.category || 'Mobile App'} calendar_today {p.deadline || 'Q4 2026'}
{p.title}
Client: {p.clientName}
Progress {p.progress || 0}%
inventory_2 {projDeliverables.length} Builds checklist {projTasks.filter(t => !t.isCompleted).length} Tasks groups {p.assignedStaff?.length || 0} Staff
); }) )}
{/* Right Detail Pane */}
{activeProjectDetail ? ( <> {/* Project Header Banner */}
verified {activeProjectDetail.category || 'Enterprise Development'}

{activeProjectDetail.title}

Client Partner: {activeProjectDetail.clientName} • Target Deadline: {activeProjectDetail.deadline} • Status: Active
{/* Progress Bar & Description */}
Overall Milestone Completion {activeProjectDetail.progress}%
{activeProjectDetail.description && (
description
Project Overview
{activeProjectDetail.description}
)}
{/* Assigned Engineering Team Roster */}
groups Assigned Engineering Team {activeProjectDetail.assignedStaff?.length || 0} Staff
{activeProjectDetail.assignedStaff && activeProjectDetail.assignedStaff.length > 0 ? (
{activeProjectDetail.assignedStaff.map(s => (
{s.name ? s.name.charAt(0).toUpperCase() : 'S'}
{s.name} {s.role || 'Staff Lead'}
))}
) : (
info No staff assigned to this project yet. Click "Assign Staff" to attach lead engineers.
)}
{/* Interactive Project Tabs */}
{/* 1. Milestones Tab */} {activeProjectTab === 'milestones' && (
{[ { phase: 'Phase 1', title: 'Project Scoping & Architecture Requirements', date: 'Certified & Signed Off', status: 'COMPLETED', done: true, progressNeeded: 0 }, { phase: 'Phase 2', title: 'UI/UX Design Mockups & Design Tokens', date: 'Certified & Signed Off', status: 'COMPLETED', done: true, progressNeeded: 20 }, { phase: 'Phase 3', title: 'Staging APK Deployment & Passkey Verification', date: activeProjectDetail.progress >= 50 ? 'Certified' : 'In Active Progress', status: activeProjectDetail.progress >= 50 ? 'COMPLETED' : 'IN_PROGRESS', done: activeProjectDetail.progress >= 50, progressNeeded: 50 }, { phase: 'Phase 4', title: 'Security Penetration Testing & Telemetry Audit', date: activeProjectDetail.progress >= 80 ? 'Certified' : 'Upcoming Sprint', status: activeProjectDetail.progress >= 80 ? 'COMPLETED' : 'UPCOMING', done: activeProjectDetail.progress >= 80, progressNeeded: 80 }, { phase: 'Phase 5', title: 'Production Release & Google Play Store Submission', date: activeProjectDetail.progress >= 100 ? 'Certified Release' : 'Final Sign-off', status: activeProjectDetail.progress >= 100 ? 'COMPLETED' : 'UPCOMING', done: activeProjectDetail.progress >= 100, progressNeeded: 100 } ].map((m, idx) => { const isDone = m.done; const isInProgress = !m.done && activeProjectDetail.progress >= m.progressNeeded - 30; const cardClass = isDone ? 'done' : isInProgress ? 'in-progress' : 'upcoming'; return (
{isDone ? 'check_circle' : isInProgress ? 'pending' : 'radio_button_unchecked'}
{m.phase}
{m.title}
{isDone ? 'task_alt' : isInProgress ? 'sync' : 'schedule'} {m.date}
{isDone ? ( Complete ) : isInProgress ? ( In Progress ) : ( Queued )}
); })}
)} {/* 2. Builds Tab */} {activeProjectTab === 'builds' && (
{deliverables.filter(d => String(d.projectId) === String(activeProjectDetail.id)).length === 0 ? (
inventory_2

No deliverables uploaded for this project yet.

) : ( deliverables.filter(d => String(d.projectId) === String(activeProjectDetail.id)).map(d => (
{d.fileType}
{d.title}
{d.status.replace('_', ' ')}
Version {d.buildNumber || '1.0'} • Submitted by {d.submittedBy || 'Engineering'}
)) )}
)} {/* 3. Tasks Tab */} {activeProjectTab === 'tasks' && (
{tasks.filter(t => String(t.projectId) === String(activeProjectDetail.id)).length === 0 ? (
checklist

No action items assigned for this project yet.

) : ( tasks.filter(t => String(t.projectId) === String(activeProjectDetail.id)).map(t => (
handleToggleTask(t.id, t.isCompleted)} />
{t.title}
Assigned to {t.assignedToName} • Due {t.dueDate}
{t.priority}
)) )}
)} {/* 4. Chat Tab */} {activeProjectTab === 'chat' && (
{messages.filter(m => String(m.projectId) === String(activeProjectDetail.id)).length === 0 ? (
forum

No messages in this project thread yet. Send a message to start communicating with the team.

) : ( messages.filter(m => String(m.projectId) === String(activeProjectDetail.id)).map(m => (
{m.senderName} ({m.senderRole})
{m.text}
{m.timestamp || 'Just now'}
)) )}
setChatMessage(e.target.value)} />
)}
) : (
touch_app

Select a project from the left panel

View roadmap milestones, artifacts, tasks, and discussion streams.

)}
)} {/* 1. Kanban Board View Mode */} {projectViewMode === 'kanban' && (
{[ { id: 'planning', title: 'Planning & Specs', min: 0, max: 25, color: '#38BDF8', icon: 'architecture' }, { id: 'active', title: 'Active Sprints', min: 26, max: 70, color: '#0284C7', icon: 'developer_mode' }, { id: 'review', title: 'Review & Staging', min: 71, max: 99, color: '#F59E0B', icon: 'rate_review' }, { id: 'completed', title: 'Shipped & Live', min: 100, max: 100, color: '#10B981', icon: 'verified' } ].map(column => { const colProjects = filteredProjects.filter(p => { const prog = Number(p.progress) || 0; if (column.id === 'planning') return prog <= 25; if (column.id === 'active') return prog > 25 && prog <= 70; if (column.id === 'review') return prog > 70 && prog < 100; return prog >= 100; }); return (
{column.icon} {column.title}
{colProjects.length}
{colProjects.length === 0 ? (
No projects in this stage
) : ( colProjects.map(p => { const projDeliverables = deliverables.filter(d => String(d.projectId) === String(p.id)); const projTasks = tasks.filter(t => String(t.projectId) === String(p.id)); return (
{ setActiveProjectDetail(p); setProjectViewMode('split'); navigateTo('projects', p.id); chimeEngine.playPop(); }} >
{p.category} {p.deadline}
{p.title}
{p.clientName}
Milestone {p.progress}%
{projDeliverables.length} Builds {projTasks.filter(t => !t.isCompleted).length} Tasks
); }) )}
); })}
)} {/* 2. Grid Overview Mode */} {projectViewMode === 'grid' && (
{filteredProjects.map(p => { const projDeliverables = deliverables.filter(d => String(d.projectId) === String(p.id)); const projTasks = tasks.filter(t => String(t.projectId) === String(p.id)); return (
{ setActiveProjectDetail(p); setProjectViewMode('split'); navigateTo('projects', p.id); chimeEngine.playPop(); }} >
{p.category} calendar_month {p.deadline}

{p.title}

Client: {p.clientName}

{p.description || 'Enterprise architecture, mobile development, and automated CI/CD workflows.'}

Sprint Roadmap Completion {p.progress}%
{projDeliverables.length} Builds {projTasks.filter(t => !t.isCompleted).length} Open Tasks Open Details arrow_forward
); })}
)} {/* 3. Table Matrix View */} {projectViewMode === 'matrix' && (
{filteredProjects.map(p => { const projDeliverables = deliverables.filter(d => String(d.projectId) === String(p.id)); const projTasks = tasks.filter(t => String(t.projectId) === String(p.id)); return ( ); })}
Project Title Client Account Category Target Deadline Milestone Progress Builds / Tasks Actions
{p.title}
{p.clientName} {p.category} {p.deadline}
{p.progress}%
{projDeliverables.length} Builds • {projTasks.length} Tasks
)}
)} {/* 3. DELIVERABLES & BUILDS */} {activeTab === 'deliverables' && (
inventory_2Deliverables & APK Staging Builds

Review build artifacts, download test packages, and confirm production sign-offs

{filteredDeliverables.map(d => (
{d.fileType}
{d.title} {d.status.replace('_', ' ')}
Build v{d.buildNumber || '1.0'} • Submitted by {d.submittedBy || 'Engineering'} • {d.fileDetails || 'Package artifact'}
{d.changelog && (
Changelog: {d.changelog}
)}
downloadDownload {d.status === 'PENDING_APPROVAL' && ( <> )}
))}
)} {/* 4. TASKS & ACTION ITEMS */} {activeTab === 'tasks' && (
checklistTasks & Action Milestones

Client sign-offs, security audits, and engineering tasks

{filteredTasks.map(t => (
handleToggleTask(t.id, t.isCompleted)} />
{t.title}
Assigned to {t.assignedToName} ({t.assignedToRole}) • Due: {t.dueDate}
{t.description &&
{t.description}
}
{t.priority}
))}
)} {/* 5. MESSAGES & DISCUSSION */} {activeTab === 'messages' && (
forum Discussion Stream & Team Messaging

Real-time bidirectional channel between Client Leads and Sneksoft Engineering

{/* Push Notification Toggle Button */} {pushPermission !== 'granted' ? ( ) : ( )}
{/* Channels & Search Bar */}
{/* Channel Filter Pills */}
{projects.map(p => ( ))}
{/* Message Search */}
search setMessageSearch(e.target.value)} /> {messageSearch && ( )}
{messages .filter(m => { if (selectedChannelId !== 'ALL' && m.projectId && m.projectId !== selectedChannelId) return false; if (!messageSearch.trim()) return true; const q = messageSearch.toLowerCase(); return (m.text || '').toLowerCase().includes(q) || (m.senderName || '').toLowerCase().includes(q) || (m.senderRole || '').toLowerCase().includes(q); }) .map(m => { const msgReactions = reactions[m.id] || {}; const isStaff = m.senderRole === 'STAFF'; return (
{isStaff ? 'support_agent' : 'person'} {m.senderName} {m.senderRole}
{m.text}
{/* Emoji Reactions display & add buttons */}
{['👍', '❤️', '🚀', '💡', '🔥'].map(emoji => { const count = msgReactions[emoji] || 0; return ( ); })}
{m.timestamp || 'Just now'}
); })} {/* Real-time Typing Simulator */} {isStaffTyping && (
support_agent Alex Chen (Staff Lead) is typing...
)}
{/* Quick Prompts strip */}
{[ 'Approved the latest build update! 👍', 'Could we get an ETA on the milestone deliverables?', 'Requesting changes on the UI mockup.', 'Passkeys & biometric credentials verified on device.' ].map((p, idx) => ( ))}
{/* Attached Deliverable Pill if selected */} {attachedDeliverableWeb && (
attachment Attached: {attachedDeliverableWeb}
)}
{/* Attachment dropdown button */}
setChatMessage(e.target.value)} />
)} {/* 6. STAFF & PASSKEYS */} {activeTab === 'staff' && (
badgeStaff Roster & Userlist Scanner

Scanning userlist for @sneksoft.dev and @rizewolf.com domains. All other accounts are classified as Clients.

{/* Policy & Domain Badges Banner */}
security
Corporate Domain Rule: Anyone with an active @sneksoft.dev or @rizewolf.com address is recognized as internal Staff with elevated permissions.
sneksoft.dev rizewolf.com
{staff.map(s => { const isRizewolf = (s.email || '').toLowerCase().includes('rizewolf.com'); return (
{s.name.split(' ').map(n => n[0]).join('')}
{s.name} {isRizewolf ? 'rizewolf.com' : 'sneksoft.dev'}
{s.email}
{s.role}
{/* Company & Domain Meta */}
Organization: {isRizewolf ? 'Rizewolf Engineering' : 'Sneksoft Technologies'}
{/* Assigned projects badge list */}
Active Project Assignments:
{projects.filter(p => p.assignedStaff?.some(as => String(as.id) === String(s.id) || as.email === s.email)).length > 0 ? ( projects.filter(p => p.assignedStaff?.some(as => String(as.id) === String(s.id) || as.email === s.email)).map(p => ( {p.title} )) ) : ( Unassigned to active projects )}
{s.isPasskeyEnrolled ? 'fingerprint' : 'lock'} {s.isPasskeyEnrolled ? 'Passkey Enrolled' : 'Standard Password'}
); })}
)} {/* 7. CLIENT MANAGEMENT & CRM */} {activeTab === 'clients' && (
{/* CRM Hero Banner & Financial Metrics */}
business ENTERPRISE CLIENT RELATIONSHIP MANAGEMENT (CRM)

Corporate Accounts & Partner Directory

Manage enterprise client accounts, execute signed PDF contracts & MSAs, track monthly retainers, monitor SLA guarantees, and associate engineering projects.

business
Total Accounts
{clients.length}
verified_user
Enterprise Tier
{clients.filter(c => c.tier === 'ENTERPRISE').length}
payments
Monthly Retainers
${clients.reduce((acc, c) => { const num = Number(String(c.monthlyRetainer || '0').replace(/[^0-9.-]+/g, '')); return acc + (isNaN(num) ? 0 : num); }, 0).toLocaleString()}/mo
picture_as_pdf
Executed Contracts
{clients.length} Active
{/* Filter Bar */}
search setClientSearchQuery(e.target.value)} style={{ width: '100%' }} />
{/* Clients Roster Cards Grid */} {filteredClients.length === 0 ? (
business

No CRM Clients Found

No corporate client accounts match your active search or filter criteria.

) : (
{filteredClients.map(c => { const assignedProjObjs = projects.filter(p => (c.assignedProjects || []).some(ap => String(ap) === String(p.id) || String(ap).toLowerCase() === (p.title || '').toLowerCase()) ); const isEnterprise = c.tier === 'ENTERPRISE'; const isStrategic = c.tier === 'STRATEGIC'; const pdfFileName = c.contractPdfName || `${(c.company || 'Client').replace(/\s+/g, '_')}_MSA_Agreement.pdf`; return (
{/* Header row with company & tier */}
{(c.company || 'C').charAt(0)}

{c.company}

{c.tier || 'ENTERPRISE'}
{c.industry || 'Technology Solutions'}
{c.status || 'ACTIVE'}
{/* Primary Contact Person */}
person
{c.primaryContact}
{c.email}
{c.email && ( email )} {c.phone && ( phone )}
{/* Financials & Billing Info */}
Monthly Retainer
{String(c.monthlyRetainer || '0').startsWith('$') ? c.monthlyRetainer : `$${c.monthlyRetainer || '0'}`}
Billing Status
{c.billingStatus || 'CURRENT'}
{/* PDF Contract & Legal Document Box */}
picture_as_pdf
{pdfFileName}
verified Executed & Signed ({c.contractPdfSize || '2.4 MB'})
{/* Linked Projects */}
Active Projects ({assignedProjObjs.length}):
{assignedProjObjs.length > 0 ? ( assignedProjObjs.map(p => ( )) ) : ( No projects assigned yet )}
{/* CRM Account Notes */} {c.notes && (
"{c.notes}"
)} {/* Footer Actions */}
Term: {c.contractStart || '2026-01-01'} → {c.contractEnd || '2026-12-31'}
); })}
)} {/* CRM Activity Stream & Milestones */}
history_toggle_off CRM Real-Time Activity & Compliance Ledger
verified
Acme Corporation executed 2026 Master Services Agreement (MSA) with 24/7 dedicated engineering SLA.
Today
payments
Apex Global Systems monthly engineering retainer verified for Q3 ($24,000/mo).
2 hours ago
assignment_turned_in
Nexus Health Technologies HIPAA audit compliance checklist initialized.
Yesterday
)} {/* 8. PROFILE & PREFERENCES */} {activeTab === 'profile' && (
{/* Profile Card & Avatar Selection */}
{customAvatarUrl ? ( Avatar ) : ( {activeAvatar.icon} )}

{currentUser.displayName}

{currentUser.email}

{currentUser.role === 'STAFF' ? 'STAFF ARCHITECT' : 'CLIENT REPRESENTATIVE'}
Choose Avatar Preset
{AVATAR_PRESETS.map(p => ( ))}
setCustomAvatarUrl(e.target.value)} />
{/* Personal Details & Preferences Form */}
badgePersonal & Account Details
setProfileForm({ ...profileForm, displayName: e.target.value })} required />
setProfileForm({ ...profileForm, email: e.target.value })} required />
setProfileForm({ ...profileForm, phone: e.target.value })} />
setProfileForm({ ...profileForm, occupation: e.target.value })} />
setProfileForm({ ...profileForm, company: e.target.value })} />
setProfileForm({ ...profileForm, address: e.target.value })} />
{/* Acoustic Chimes & Sounds */}

Audio & Acoustic Chimes

Web Audio Synthesizer chimes provide immediate haptic feedback for key operations.

)} {/* 9. ANALYTICS & TELEMETRY */} {activeTab === 'analytics' && (
monitoring EXECUTIVE TELEMETRY & SYSTEM ANALYTICS

Platform Insights & Verification Rate

Real-time audit telemetry, API response performance, build verification health, and Firebase persistence logs.

verified
Build Acceptance
{analytics?.portfolio?.verificationRate || '98.4%'}
speed
API Gateway Latency
{analytics?.system?.averageResponseTime || '34ms'}
cloud_sync
Firebase Storage Sync
100% Active
security
Audit Logs Logged
{analytics?.auditTrail?.totalLogged || '128'}
{/* Security Audit Trail */}
securitySecurity & Operations Audit Trail
{[ { action: 'CONTRACT_UPLOAD', user: 'Lead Architect', detail: 'Uploaded PDF contract for corporate onboarding to Firebase Storage bucket', time: 'Just now', icon: 'picture_as_pdf', color: '#10B981' }, { action: 'FIRESTORE_WRITE', user: 'CRM Gateway', detail: 'Synchronized corporate customer metadata to Cloud Firestore collections', time: '3 mins ago', icon: 'local_fire_department', color: '#F59E0B' }, { action: 'BUILD_CERTIFIED', user: 'Rachel Vance', detail: 'Signed off on Android Staging APK v2.5.0 milestone deliverable', time: '25 mins ago', icon: 'verified', color: '#38BDF8' }, { action: 'BIOMETRIC_AUTH', user: 'Alex Chen', detail: 'WebAuthn passkey authenticated for staff biometric security role', time: '1 hr ago', icon: 'fingerprint', color: '#8B5CF6' } ].map((log, idx) => (
{log.icon}
{log.action} • {log.user}
{log.detail}
{log.time}
))}
{/* Cloud & Infrastructure Performance */}
cloud_doneCloud Infrastructure Diagnostics
Node.js Memory Utilization 38.4 MB / 512 MB
Firestore REST Connection Health Online (Zero Latency)
Firebase Cloud Storage Bucket SLA 99.99% Availability
)} {/* 10. WEBHOOKS & EVENTS */} {activeTab === 'webhooks' && (
webhook DEVELOPER INTEGRATIONS & REAL-TIME WEBHOOKS

Outbound Event Subscriptions

Configure HMAC SHA-256 signed HTTP payloads for project updates, build sign-offs, and customer CRM contract executions.

cableConfigured Endpoints ({webhooks.length || 2})
{[ { url: 'https://ci-cd.sneksoft.dev/api/v1/webhooks/builds', event: 'deliverable.created', status: 'ACTIVE', lastPing: '2 mins ago' }, { url: 'https://crm-sync.apexglobal.io/hooks/client-signed', event: 'contract.signed', status: 'ACTIVE', lastPing: '15 mins ago' } ].map((hook, i) => (
{hook.status} {hook.url}
Subscribed Event: {hook.event} • Last ping: {hook.lastPing}
))}
)} {/* 11. SYSTEM DIAGNOSTICS & HEALTH */} {activeTab === 'health' && (
health_and_safety GATEWAY HEALTH & SERVICE STATUS

System Operations & Node Diagnostics

Live connectivity checks for Cloud Run backend, Firestore REST storage, and Firebase multi-tenant buckets.

dnsActive Microservices
{[ { name: 'Cloud Run Web Server', status: 'HEALTHY', latency: '12ms', icon: 'memory' }, { name: 'Firebase Firestore Engine', status: 'HEALTHY', latency: '45ms', icon: 'local_fire_department' }, { name: 'Firebase Storage PDF Bucket', status: 'HEALTHY', latency: '68ms', icon: 'folder_zip' }, { name: 'Server-Sent Events (SSE) Bus', status: 'CONNECTED', latency: '0ms', icon: 'sync' } ].map((svc, idx) => (
{svc.icon} {svc.name}
{svc.latency} {svc.status}
))}
terminalQuick Actions & Maintenance
)}
{/* Floating Bottom Navigation Pill (Mirroring Android App MainPortalContainer) */}
{/* --- MODALS --- */} {/* 1. Create Project Modal */} {modalType === 'CREATE_PROJECT' && (
setModalType(null)}>
e.stopPropagation()}>

Publish New Client Project

{/* Staff Auto-Assignment Notice */} {((currentUser?.email || '').toLowerCase().endsWith('@sneksoft.dev') || (currentUser?.email || '').toLowerCase().endsWith('@rizewolf.com') || currentUser?.isAdmin || currentUser?.isStaff) && (
badge
Staff Auto-Assignment: As a verified staff member ({currentUser?.displayName || currentUser?.email}), you will be automatically assigned to this project upon creation.
)}
setProjectForm({ ...projectForm, title: e.target.value })} />
setProjectForm({ ...projectForm, clientName: e.target.value })} />
)} {/* 2. Publish Deliverable Modal */} {modalType === 'CREATE_DELIVERABLE' && (
setModalType(null)}>
e.stopPropagation()}>

Publish Deliverable / APK Build

setDeliverableForm({ ...deliverableForm, title: e.target.value })} />
setDeliverableForm({ ...deliverableForm, downloadUrl: e.target.value })} />
)} {/* 3. Assign Task Modal */} {modalType === 'CREATE_TASK' && (
setModalType(null)}>
e.stopPropagation()}>

Assign Action Item / Task

setTaskForm({ ...taskForm, title: e.target.value })} />
)} {/* 4. Staff Member Modal */} {modalType === 'CREATE_STAFF' && (
setModalType(null)}>
e.stopPropagation()}>

Enroll Staff Member

setStaffForm({ ...staffForm, name: e.target.value })} />
setStaffForm({ ...staffForm, email: e.target.value })} />
Staff detection requires an @sneksoft.dev or @rizewolf.com address.
)} {/* 5. Approve Deliverable Modal */} {modalType === 'APPROVE_DELIV' && targetDeliverable && (
setModalType(null)}>
e.stopPropagation()}>

Confirm Deliverable Sign-Off

Are you sure you want to approve {targetDeliverable.title}? This marks the build as certified for production release.

)} {/* 6. Feedback Note Modal */} {modalType === 'CHANGES_DELIV' && targetDeliverable && (
setModalType(null)}>
e.stopPropagation()}>

Request Changes / Feedback

)} {/* 7. Assign Staff to Project Modal */} {modalType === 'ASSIGN_STAFF' && activeProjectDetail && (
setModalType(null)}>
e.stopPropagation()}>
person_add

Assign Staff to {activeProjectDetail.title}

Select a team member from the staff roster and assign their project responsibility.

{ e.preventDefault(); const selected = staff.find(s => String(s.id) === String(assignStaffForm.staffId)) || staff[0]; handleAssignStaff(activeProjectDetail.id, selected, assignStaffForm.role); }} style={{ display: 'flex', flexDirection: 'column', gap: '14px' }} >
setAssignStaffForm({ ...assignStaffForm, role: e.target.value })} />
)} {/* 8. Multi-Step Onboard New Client / Customer Modal */} {modalType === 'CREATE_CLIENT' && (
{ setModalType(null); setClientCreationStep(1); }}>
e.stopPropagation()}> {/* Modal Header */}
business

Onboard Client & Execute Contract

{/* Multi-Step Wizard Progress Bar */}
{[ { step: 1, label: '1. Account', icon: 'domain' }, { step: 2, label: '2. Financials', icon: 'payments' }, { step: 3, label: '3. Scope', icon: 'folder_special' }, { step: 4, label: '4. PDF Contract', icon: 'picture_as_pdf' } ].map(s => { const isCurrent = clientCreationStep === s.step; const isPassed = clientCreationStep > s.step; return (
{ if (isPassed) setClientCreationStep(s.step); }} style={{ padding: '8px 6px', borderRadius: '8px', background: isCurrent ? 'rgba(56, 189, 248, 0.15)' : isPassed ? 'rgba(16, 185, 129, 0.12)' : 'rgba(255,255,255,0.03)', border: isCurrent ? '1px solid var(--primary)' : isPassed ? '1px solid rgba(16, 185, 129, 0.4)' : '1px solid var(--border-subtle)', textAlign: 'center', cursor: isPassed ? 'pointer' : 'default', transition: 'all 0.15s ease' }} >
{isPassed ? 'check_circle' : s.icon} {s.label}
); })}
{ e.preventDefault(); if (clientCreationStep < 4) { if (clientCreationStep === 1 && !clientForm.company.trim()) { showToast('Please enter the corporate account name', 'warning'); return; } setClientCreationStep(prev => prev + 1); chimeEngine.playPop(); } else { handleCreateClient(e); } }}> {/* STEP 1: Corporate Profile & Stakeholders */} {clientCreationStep === 1 && (
Enter the fundamental corporate identity and primary stakeholder contact information.
setClientForm({ ...clientForm, company: e.target.value })} autoFocus />
setClientForm({ ...clientForm, primaryContact: e.target.value })} />
setClientForm({ ...clientForm, email: e.target.value })} />
setClientForm({ ...clientForm, phone: e.target.value })} />
setClientForm({ ...clientForm, industry: e.target.value })} />
)} {/* STEP 2: Retainer, Billing & SLA Tier */} {clientCreationStep === 2 && (
Configure the commercial retainers, billing milestones, and Service Level Agreement (SLA) commitment.
setClientForm({ ...clientForm, monthlyRetainer: e.target.value })} />
setClientForm({ ...clientForm, contractStart: e.target.value })} />
setClientForm({ ...clientForm, contractEnd: e.target.value })} />
)} {/* STEP 3: Project Association & Scope Brief */} {clientCreationStep === 3 && (
Associate existing engineering projects with this client and define compliance terms.
{projects.map(p => { const isSelected = (clientForm.assignedProjects || []).includes(String(p.id)) || (clientForm.assignedProjects || []).includes(p.title); return (
{ const current = clientForm.assignedProjects || []; const updated = isSelected ? current.filter(id => id !== String(p.id) && id !== p.title) : [...current, String(p.id)]; setClientForm({ ...clientForm, assignedProjects: updated }); }} style={{ padding: '8px 10px', borderRadius: '6px', background: isSelected ? 'rgba(56, 189, 248, 0.15)' : 'rgba(255,255,255,0.03)', border: isSelected ? '1px solid var(--primary)' : '1px solid var(--border-subtle)', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'space-between', fontSize: '12px' }} > {p.title} {isSelected ? 'check_box' : 'check_box_outline_blank'}
); })}
verified_user Legal Compliance & Mutual Confidentiality
)} {/* STEP 4: PDF Contract Upload & Execution Sign-Off */} {clientCreationStep === 4 && (
Upload the signed Master Services Agreement (MSA) or generate a verified Enterprise contract document.
{/* Drag & Drop PDF Dropzone */}
{ e.preventDefault(); setIsDraggingPdf(true); }} onDragLeave={() => setIsDraggingPdf(false)} onDrop={(e) => { e.preventDefault(); setIsDraggingPdf(false); handlePdfUpload(e); }} style={{ border: isDraggingPdf ? '2px dashed var(--primary)' : '2px dashed rgba(239, 68, 68, 0.4)', background: isDraggingPdf ? 'rgba(56, 189, 248, 0.1)' : 'rgba(239, 68, 68, 0.04)', borderRadius: '12px', padding: '24px 16px', textAlign: 'center', cursor: 'pointer', transition: 'all 0.2s ease' }} onClick={() => document.getElementById('contract-pdf-input')?.click()} >
upload_file
Drag & Drop Contract PDF Here
Or click to browse files (*.pdf)
{/* Quick Action Button for Standard MSA */}
{/* Attached Contract Preview Card */}
picture_as_pdf
{clientForm.contractPdfName || 'Enterprise_Master_Services_Agreement_2026.pdf'}
verified SHA-256 Verified • {clientForm.contractPdfSize || '2.4 MB'}
Ready to Execute
{/* Onboarding Summary Snapshot */}
Account: {clientForm.company || 'Pending'}
Lead: {clientForm.primaryContact || 'Pending'}
Retainer: ${clientForm.monthlyRetainer || '0'}/mo
Tier: {clientForm.tier}
)}
)} {/* 8.5 Executed Contract PDF Viewer Modal */} {viewingContractClient && (
setViewingContractClient(null)}>
e.stopPropagation()}>
picture_as_pdf

Master Services Agreement (MSA)

{viewingContractClient.company} • Document ID: SNEK-MSA-{viewingContractClient.id}
{/* Rendered Contract Document Preview Box */}
SNEKSOFT TECHNOLOGIES INC.
ENTERPRISE SERVICES & SOFTWARE DEVELOPMENT CONTRACT
EXECUTED & VERIFIED
1. PARTIES & ENGAGEMENT
This agreement is entered into between Sneksoft Technologies ("Service Provider") and {viewingContractClient.company} ("Client"), represented by {viewingContractClient.primaryContact} ({viewingContractClient.email}).
2. COMMERCIAL RETAINER & TERM
• Account Classification: {viewingContractClient.tier || 'ENTERPRISE'} TIER
• Monthly Retainer Fee: ${viewingContractClient.monthlyRetainer || '18,500'}/month
• Effective Duration: {viewingContractClient.contractStart || '2026-01-01'} to {viewingContractClient.contractEnd || '2026-12-31'}
• Billing Status: {viewingContractClient.billingStatus || 'CURRENT'}
3. SERVICE LEVEL AGREEMENT (SLA)
The Service Provider commits to: {viewingContractClient.slaTier || '24/7 Dedicated Architecture Team (1hr SLA)'} for all production and critical issues.
4. CONFIDENTIALITY & IP OWNERSHIP
All custom engineering source code, deliverables, and architecture artifacts developed under this engagement belong entirely to the Client upon milestone settlement. Mutual NDA terms strictly active.
Authorized Sneksoft Signatory:
Alex Chen
Staff Architect • Signed via Passkey Biometrics
Authorized Client Officer:
{viewingContractClient.primaryContact}
Corporate Lead • Signed & Executed
)} {/* 9. Edit Client Modal */} {modalType === 'EDIT_CLIENT' && editingClient && (
setModalType(null)}>
e.stopPropagation()}>
edit

Edit Client: {editingClient.company}

setClientForm({ ...clientForm, company: e.target.value })} />
setClientForm({ ...clientForm, primaryContact: e.target.value })} />
setClientForm({ ...clientForm, email: e.target.value })} />
setClientForm({ ...clientForm, phone: e.target.value })} />
setClientForm({ ...clientForm, monthlyRetainer: e.target.value })} />
setClientForm({ ...clientForm, industry: e.target.value })} />
)} {/* 10. Assign Client to Projects Modal */} {modalType === 'ASSIGN_CLIENT_PROJECT' && editingClient && (
setModalType(null)}>
e.stopPropagation()}>
folder_shared

Link Projects for {editingClient.company}

Toggle which engineering projects are associated with this client account:

{projects.map(p => { const isAssigned = (editingClient.assignedProjects || []).includes(String(p.id)); return (
{ handleAssignClientProject(editingClient.id, p.id); setEditingClient(prev => { if (!prev) return prev; const current = prev.assignedProjects || []; const updated = current.includes(String(p.id)) ? current.filter(id => id !== String(p.id)) : [...current, String(p.id)]; return { ...prev, assignedProjects: updated }; }); }} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '12px 14px', background: isAssigned ? 'rgba(16, 185, 129, 0.12)' : 'var(--bg-card-secondary)', borderRadius: '10px', border: isAssigned ? '1px solid #10B981' : '1px solid var(--border-subtle)', cursor: 'pointer', transition: 'all 0.15s ease' }} >
{p.title}
Category: {p.category} • Progress: {p.progress}%
{isAssigned ? 'check_box' : 'check_box_outline_blank'}
); })}
)}
); } const root = ReactDOM.createRoot(document.getElementById('root')); root.render();