Upload folder using huggingface_hub

.gitignore

@@ -30,6 +30,10 @@ docs/helpdesk*.pdf
 docs/logs/
 *.log
 
+# Scratch and local cache
+scratch/
+.npm-cache/
+
 # GSSoC Score Tracking and Temporary Scripts
 scratch/
 .npm-cache/

Frontend/src/components/shared/TicketChat.jsx

@@ -1,5 +1,8 @@
 import React, { useState, useRef, useEffect, useCallback } from 'react';
-import { Send, User, ShieldCheck, Bot, MessageSquare, Circle, Loader2 } from 'lucide-react';
+import { 
+    Send, User, ShieldCheck, Bot, MessageSquare, Circle, Loader2, 
+    Phone, Video, Mic, Smile, Paperclip, Play, Pause, X, Check, CheckCheck, MicOff, Volume2, Shield 
+} from 'lucide-react';
 import { supabase } from "../../lib/supabaseClient";
 import useAuthStore from "../../store/authStore";
 
@@ -15,6 +18,24 @@ const TicketChat = ({ ticketId, currentUserRole = 'user' }) => {
     const [isInternal, setIsInternal] = useState(false);
     const [isStaff, setIsStaff] = useState(false);
 
+    // Simulated calling states
+    const [activeCall, setActiveCall] = useState(null); // 'Audio' | 'Video' | null
+    const [callDuration, setCallDuration] = useState(0);
+    const [callStatus, setCallStatus] = useState('Ringing...'); // 'Ringing...' | 'Connected'
+    const callTimerRef = useRef(null);
+    const [isMuted, setIsMuted] = useState(false);
+    const [isSpeakerOn, setIsSpeakerOn] = useState(true);
+
+    // Voice note simulation states
+    const [isRecording, setIsRecording] = useState(false);
+    const [recordDuration, setRecordDuration] = useState(0);
+    const recordTimerRef = useRef(null);
+
+    // Voice playback states
+    const [playingVoiceId, setPlayingVoiceId] = useState(null);
+    const [voiceProgress, setVoiceProgress] = useState({});
+    const voicePlayTimerRef = useRef(null);
+
     const { user, profile } = useAuthStore();
     const messagesEndRef = useRef(null);
     const scrollContainerRef = useRef(null);
@@ -128,6 +149,9 @@ const TicketChat = ({ ticketId, currentUserRole = 'user' }) => {
 
         return () => {
             supabase.removeChannel(channel);
+            if (callTimerRef.current) clearInterval(callTimerRef.current);
+            if (recordTimerRef.current) clearInterval(recordTimerRef.current);
+            if (voicePlayTimerRef.current) clearInterval(voicePlayTimerRef.current);
         };
      
  
@@ -233,6 +257,125 @@ const TicketChat = ({ ticketId, currentUserRole = 'user' }) => {
         } catch { return ''; }
     };
 
+    // Voice note simulation helpers
+    const startRecording = () => {
+        setIsRecording(true);
+        setRecordDuration(0);
+        recordTimerRef.current = setInterval(() => {
+            setRecordDuration(prev => prev + 1);
+        }, 1000);
+    };
+
+    const stopRecording = async (shouldSave = true) => {
+        setIsRecording(false);
+        if (recordTimerRef.current) clearInterval(recordTimerRef.current);
+        if (shouldSave && recordDuration > 0) {
+            const durationStr = formatDuration(recordDuration);
+            const content = `🎤 Voice message (${durationStr})`;
+            const tempMessage = {
+                id: `temp-${Date.now()}`,
+                ticket_id: ticketId,
+                sender_id: user.id,
+                sender_name: profile?.full_name || user.email,
+                sender_role: profile?.role || 'user',
+                message: content,
+                is_internal: false,
+                created_at: new Date().toISOString()
+            };
+
+            setMessages(prev => [...prev, tempMessage]);
+            setTimeout(() => scrollToBottom(), 50);
+
+            try {
+                const { error } = await supabase
+                    .from('ticket_messages')
+                    .insert([{
+                        ticket_id: ticketId,
+                        sender_id: user.id,
+                        sender_name: profile?.full_name || user.email,
+                        sender_role: profile?.role || 'user',
+                        message: content
+                    }]);
+                if (error) throw error;
+            } catch (err) {
+                console.error("Error sending voice message:", err);
+                setMessages(prev => prev.filter(m => m.id !== tempMessage.id));
+            }
+        }
+    };
+
+    const playVoiceNote = (msgId, durationStr) => {
+        if (playingVoiceId === msgId) {
+            setPlayingVoiceId(null);
+            if (voicePlayTimerRef.current) clearInterval(voicePlayTimerRef.current);
+            return;
+        }
+
+        if (voicePlayTimerRef.current) clearInterval(voicePlayTimerRef.current);
+        setPlayingVoiceId(msgId);
+
+        const parts = durationStr.split(':');
+        const totalSecs = parseInt(parts[0] || '0') * 60 + parseInt(parts[1] || '0');
+        let currentSecs = voiceProgress[msgId] ? (voiceProgress[msgId] / 100) * totalSecs : 0;
+
+        voicePlayTimerRef.current = setInterval(() => {
+            currentSecs += 0.25;
+            const percentage = Math.min((currentSecs / totalSecs) * 100, 100);
+            
+            setVoiceProgress(prev => ({
+                ...prev,
+                [msgId]: percentage
+            }));
+
+            if (percentage >= 100) {
+                setPlayingVoiceId(null);
+                clearInterval(voicePlayTimerRef.current);
+                setVoiceProgress(prev => ({
+                    ...prev,
+                    [msgId]: 0
+                }));
+            }
+        }, 250);
+    };
+
+    const handleCallPress = (type) => {
+        setActiveCall(type);
+        setCallStatus('Ringing...');
+        setCallDuration(0);
+        setIsMuted(false);
+        setIsSpeakerOn(true);
+
+        setTimeout(() => {
+            setCallStatus('Connected');
+            callTimerRef.current = setInterval(() => {
+                setCallDuration(prev => prev + 1);
+            }, 1000);
+        }, 2000);
+    };
+
+    const endCall = () => {
+        setActiveCall(null);
+        if (callTimerRef.current) clearInterval(callTimerRef.current);
+    };
+
+    const formatDuration = (sec) => {
+        const mins = Math.floor(sec / 60);
+        const secs = sec % 60;
+        return `${mins}:${secs < 10 ? '0' : ''}${secs}`;
+    };
+
+    const getTickColor = (msg) => {
+        if (String(msg.id).startsWith('temp-')) return '#9ca3af'; // sending / unsaved
+        // Double blue ticks if any admin/AI replied after this message
+        const hasAdminReply = messages.some(
+            m => m.created_at &&
+                 new Date(m.created_at) > new Date(msg.created_at) &&
+                 (m.sender_role === 'admin' || m.sender_role === 'super_admin' || m.sender_role === 'ai')
+        );
+        if (hasAdminReply) return '#38bdf8'; // WhatsApp active blue ticks!
+        return '#9ca3af'; // Grey double-ticks!
+    };
+
     const grouped = [];
     let lastDate = null;
     messages.forEach((msg) => {
@@ -245,7 +388,20 @@ const TicketChat = ({ ticketId, currentUserRole = 'user' }) => {
     });
 
     return (
-        <div style={{ background: '#ffffff', borderRadius: '20px', border: '1px solid #f0fdf4', height: '100%', display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
+        <div style={{ background: '#ffffff', borderRadius: '20px', border: '1px solid #f0fdf4', height: '100%', display: 'flex', flexDirection: 'column', overflow: 'hidden', position: 'relative' }}>
+            
+            {/* Pulsing Dot Styles */}
+            <style>{`
+                @keyframes pulse {
+                    0% { opacity: 0.3; }
+                    50% { opacity: 1; }
+                    100% { opacity: 0.3; }
+                }
+                .pulse-dot {
+                    animation: pulse 1.2s infinite;
+                }
+            `}</style>
+
             {/* Header */}
             <div style={{ padding: '12px 20px', borderBottom: '1px solid #f0fdf4', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                 <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
@@ -254,16 +410,18 @@ const TicketChat = ({ ticketId, currentUserRole = 'user' }) => {
                     </h2>
                 </div>
 
-                <div className="flex items-center gap-4">
+                <div className="flex items-center gap-4" style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
                     {isStaff && (
                         <div style={{ display: 'flex', alignItems: 'center', background: 'transparent', gap: '4px' }}>
                             <button
+                                type="button"
                                 onClick={() => setIsInternal(false)}
                                 style={{ padding: '4px 12px', fontSize: '10px', fontWeight: 700, borderRadius: '8px', cursor: 'pointer', border: 'none', transition: 'all 0.2s', ...( !isInternal ? { background: '#0f1f12', color: '#ffffff' } : { background: 'transparent', color: '#6b7280' } ) }}
                             >
                                 PUBLIC
                             </button>
                             <button
+                                type="button"
                                 onClick={() => setIsInternal(true)}
                                 style={{ padding: '4px 12px', fontSize: '10px', fontWeight: 700, borderRadius: '8px', cursor: 'pointer', border: 'none', transition: 'all 0.2s', ...( isInternal ? { background: '#0f1f12', color: '#ffffff' } : { background: 'transparent', color: '#6b7280' } ) }}
                             >
@@ -271,6 +429,26 @@ const TicketChat = ({ ticketId, currentUserRole = 'user' }) => {
                             </button>
                         </div>
                     )}
+
+                    {/* WhatsApp Call Header Buttons */}
+                    <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+                        <button
+                            type="button"
+                            onClick={() => handleCallPress('Audio')}
+                            style={{ background: 'transparent', border: 'none', cursor: 'pointer', padding: '6px', color: '#374151' }}
+                            className="hover:text-emerald-600 transition-colors"
+                        >
+                            <Phone size={18} />
+                        </button>
+                        <button
+                            type="button"
+                            onClick={() => handleCallPress('Video')}
+                            style={{ background: 'transparent', border: 'none', cursor: 'pointer', padding: '6px', color: '#374151' }}
+                            className="hover:text-emerald-600 transition-colors"
+                        >
+                            <Video size={18} />
+                        </button>
+                    </div>
                 </div>
             </div>
 
@@ -304,6 +482,12 @@ const TicketChat = ({ ticketId, currentUserRole = 'user' }) => {
                         const msg = item.data;
                         const isMe = msg.sender_id === user?.id;
                         const isAdmin = msg.sender_role === 'admin' || msg.sender_role === 'super_admin';
+                        const isVoiceNote = msg.message && msg.message.startsWith('🎤 Voice message');
+                        let voiceDuration = "0:00";
+                        if (isVoiceNote) {
+                            const match = msg.message.match(/\((.*?)\)/);
+                            if (match) voiceDuration = match[1];
+                        }
 
                         return (
                             <div key={msg.id || i} className={`flex gap-2.5 ${isMe ? 'justify-end' : 'justify-start'} group py-1`}>
@@ -322,6 +506,15 @@ const TicketChat = ({ ticketId, currentUserRole = 'user' }) => {
                                         <span className="text-[8px] font-bold text-slate-300">
                                             {formatTime(msg.created_at)}
                                         </span>
+                                        {isMe && (
+                                            <span style={{ marginLeft: '4px' }}>
+                                                {String(msg.id).startsWith('temp-') ? (
+                                                    <Check size={11} className="text-slate-300" />
+                                                ) : (
+                                                    <CheckCheck size={11} style={{ color: getTickColor(msg) }} />
+                                                )}
+                                            </span>
+                                        )}
                                     </div>
 
                                     <div style={{
@@ -334,7 +527,47 @@ const TicketChat = ({ ticketId, currentUserRole = 'user' }) => {
                                             background: '#0f1f12', color: '#ffffff', borderRadius: '14px'
                                         })
                                     }}>
-                                        {msg.message}
+                                        {isVoiceNote ? (
+                                            <div style={{ display: 'flex', alignItems: 'center', gap: '12px', width: '220px' }}>
+                                                <button
+                                                    type="button"
+                                                    onClick={() => playVoiceNote(msg.id, voiceDuration)}
+                                                    style={{ width: '32px', height: '32px', borderRadius: '50%', border: 'none', background: 'rgba(255,255,255,0.15)', color: isMe ? '#ffffff' : '#0f1f12', display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer' }}
+                                                >
+                                                    {playingVoiceId === msg.id ? <Pause size={14} fill="currentColor" /> : <Play size={14} fill="currentColor" style={{ marginLeft: '2px' }} />}
+                                                </button>
+                                                <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: '4px' }}>
+                                                    {/* Waveform bars */}
+                                                    <div style={{ display: 'flex', alignItems: 'center', gap: '3px', height: '18px' }}>
+                                                        {[8, 14, 18, 10, 6, 12, 16, 10, 14, 20, 12, 8, 14, 18, 10, 8, 12, 6, 14, 8].map((barHeight, idx) => {
+                                                            const barProgress = (idx / 20) * 100;
+                                                            const isPlayed = (voiceProgress[msg.id] || 0) >= barProgress;
+                                                            return (
+                                                                <div
+                                                                    key={idx}
+                                                                    style={{
+                                                                        width: '2px',
+                                                                        borderRadius: '1px',
+                                                                        height: `${barHeight}px`,
+                                                                        background: isPlayed
+                                                                            ? (isMe ? '#34d399' : '#0f1f12')
+                                                                            : (isMe ? 'rgba(255,255,255,0.25)' : 'rgba(0,0,0,0.15)')
+                                                                    }}
+                                                                />
+                                                            );
+                                                        })}
+                                                    </div>
+                                                    <span style={{ fontSize: '9px', fontWeight: 600, opacity: 0.8 }}>
+                                                        {playingVoiceId === msg.id 
+                                                            ? formatDuration(Math.round(((voiceProgress[msg.id] || 0) / 100) * (parseInt(voiceDuration.split(':')[0] || '0') * 60 + parseInt(voiceDuration.split(':')[1] || '0'))))
+                                                            : voiceDuration
+                                                        }
+                                                    </span>
+                                                </div>
+                                            </div>
+                                        ) : (
+                                            msg.message
+                                        )}
                                     </div>
                                 </div>
 
@@ -358,27 +591,111 @@ const TicketChat = ({ ticketId, currentUserRole = 'user' }) => {
 
             {/* Input */}
             <div style={{ padding: '16px 20px', borderTop: '1px solid #f0fdf4', background: '#ffffff' }}>
-                <form onSubmit={handleSend} className="flex gap-3">
-                    <input
-                        ref={inputRef}
-                        type="text"
-                        value={inputValue}
-                        onChange={handleInputChange}
-                        placeholder="Type your message..."
-                        style={{ flex: 1, background: '#f9fafb', border: '1.5px solid #e5e7eb', borderRadius: '12px', padding: '10px 16px', fontSize: '13px', outline: 'none' }}
-                        className="focus:border-emerald-500 transition-colors"
-                    />
-                    <button
-                        type="submit"
-                        disabled={!inputValue.trim() || !user}
-                        style={{ padding: '10px 20px', background: '#16a34a', color: '#ffffff', borderRadius: '10px', fontWeight: 600, fontSize: '12px', border: 'none', cursor: 'pointer', display: 'flex', alignItems: 'center', gap: '8px' }}
-                        className="active:scale-95 transition-transform disabled:opacity-50"
-                    >
-                        {isInternal ? <ShieldCheck size={14} /> : <Send size={14} />}
-                        <span className="hidden sm:inline">{isInternal ? 'Note' : 'Send'}</span>
-                    </button>
-                </form>
+                {isRecording ? (
+                    <div style={{ display: 'flex', alignItems: 'center', gap: '12px', background: '#f9fafb', border: '1.5px dashed #f87171', borderRadius: '12px', padding: '10px 16px', fontSize: '13px' }}>
+                        <div className="pulse-dot" style={{ width: '8px', height: '8px', borderRadius: '50%', background: '#ef4444' }} />
+                        <span style={{ flex: 1, color: '#ef4444', fontWeight: 700 }}>Recording {formatDuration(recordDuration)}</span>
+                        <button
+                            type="button"
+                            onClick={() => stopRecording(false)}
+                            style={{ background: 'transparent', border: 'none', color: '#9ca3af', cursor: 'pointer', fontSize: '11px', fontWeight: 700 }}
+                        >
+                            Cancel
+                        </button>
+                        <button
+                            type="button"
+                            onClick={() => stopRecording(true)}
+                            style={{ background: '#ef4444', border: 'none', color: '#ffffff', borderRadius: '8px', padding: '6px 12px', cursor: 'pointer', fontSize: '11px', fontWeight: 700, display: 'flex', alignItems: 'center', gap: '4px' }}
+                        >
+                            <Send size={10} />
+                            Send
+                        </button>
+                    </div>
+                ) : (
+                    <form onSubmit={handleSend} className="flex gap-3">
+                        <input
+                            ref={inputRef}
+                            type="text"
+                            value={inputValue}
+                            onChange={handleInputChange}
+                            placeholder="Type your message..."
+                            style={{ flex: 1, background: '#f9fafb', border: '1.5px solid #e5e7eb', borderRadius: '12px', padding: '10px 16px', fontSize: '13px', outline: 'none' }}
+                            className="focus:border-emerald-500 transition-colors"
+                        />
+                        <button
+                            type="button"
+                            onClick={startRecording}
+                            style={{ padding: '10px', background: 'rgba(0,0,0,0.05)', color: '#374151', borderRadius: '10px', border: 'none', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center' }}
+                            className="active:scale-95 transition-transform"
+                        >
+                            <Mic size={16} />
+                        </button>
+                        <button
+                            type="submit"
+                            disabled={!inputValue.trim() || !user}
+                            style={{ padding: '10px 20px', background: '#16a34a', color: '#ffffff', borderRadius: '10px', fontWeight: 600, fontSize: '12px', border: 'none', cursor: 'pointer', display: 'flex', alignItems: 'center', gap: '8px' }}
+                            className="active:scale-95 transition-transform disabled:opacity-50"
+                        >
+                            {isInternal ? <ShieldCheck size={14} /> : <Send size={14} />}
+                            <span className="hidden sm:inline">{isInternal ? 'Note' : 'Send'}</span>
+                        </button>
+                    </form>
+                )}
             </div>
+
+            {/* High-Fidelity Call Overlay Modal */}
+            {activeCall && (
+                <div style={{ position: 'absolute', top: 0, bottom: 0, left: 0, right: 0, background: '#0b132b', color: '#ffffff', display: 'flex', flexDirection: 'column', justifyContent: 'space-between', padding: '40px 20px', zIndex: 99999 }}>
+                    <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', gap: '6px', opacity: 0.6 }}>
+                        <Shield size={12} className="text-emerald-500" />
+                        <span style={{ fontSize: '9px', fontWeight: 800, letterSpacing: '0.1em' }}>SECURE END-TO-END ENCRYPTED</span>
+                    </div>
+
+                    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '14px' }}>
+                        <div style={{ width: '90px', height: '90px', borderRadius: '50%', background: '#16a34a', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '32px', fontWeight: 900, boxShadow: '0 10px 25px rgba(22,163,74,0.3)' }}>
+                            {(ticketId || 'A')[0].toUpperCase()}
+                        </div>
+                        <h3 style={{ fontSize: '20px', fontWeight: 800, margin: 0 }}>Support Desk Call</h3>
+                        <span style={{ fontSize: '13px', opacity: 0.7 }}>
+                            {callStatus === 'Connected' ? formatDuration(callDuration) : callStatus}
+                        </span>
+                    </div>
+
+                    {/* Web Video call screen camera mock */}
+                    {activeCall === 'Video' && (
+                        <div style={{ width: '100%', height: '140px', background: 'rgba(255,255,255,0.03)', borderRadius: '16px', border: '1px solid rgba(255,255,255,0.08)', position: 'relative', overflow: 'hidden', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+                            <div style={{ width: '40px', height: '60px', borderRadius: '8px', background: '#1d2d44', border: '1px solid rgba(255,255,255,0.1)', position: 'absolute', bottom: '12px', right: '12px' }} />
+                            <span style={{ fontSize: '10px', opacity: 0.4 }}>Camera active stream</span>
+                        </div>
+                    )}
+
+                    <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', gap: '20px' }}>
+                        <button
+                            type="button"
+                            onClick={() => setIsMuted(!isMuted)}
+                            style={{ width: '48px', height: '48px', borderRadius: '50%', border: 'none', background: isMuted ? '#ffffff' : 'rgba(255,255,255,0.08)', color: isMuted ? '#0b132b' : '#ffffff', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center' }}
+                        >
+                            {isMuted ? <MicOff size={18} /> : <Mic size={18} />}
+                        </button>
+                        
+                        <button
+                            type="button"
+                            onClick={endCall}
+                            style={{ width: '48px', height: '48px', borderRadius: '50%', border: 'none', background: '#ef4444', color: '#ffffff', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center' }}
+                        >
+                            <Phone size={18} style={{ transform: 'rotate(135deg)' }} />
+                        </button>
+
+                        <button
+                            type="button"
+                            onClick={() => setIsSpeakerOn(!isSpeakerOn)}
+                            style={{ width: '48px', height: '48px', borderRadius: '50%', border: 'none', background: isSpeakerOn ? '#ffffff' : 'rgba(255,255,255,0.08)', color: isSpeakerOn ? '#16a34a' : '#ffffff', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center' }}
+                        >
+                            <Volume2 size={18} />
+                        </button>
+                    </div>
+                </div>
+            )}
         </div>
     );
 };

Frontend/src/hooks/useRealtimeNotifications.js

@@ -3,144 +3,49 @@ import { supabase } from '../lib/supabaseClient';
 import useAuthStore from '../store/authStore';
 import useTicketStore from '../store/ticketStore';
 
-// We keep track of processed payload timestamps to avoid duplicate real-time notifications
-const processedPayloads = new Set();
-
-const useRealtimeNotifications = () => {
+const useTicketsRealtime = () => {
     const { user, profile } = useAuthStore();
-    const { addNotification } = useTicketStore();
+    const { addTicket, updateTicket, removeTicket } = useTicketStore();
 
     useEffect(() => {
         if (!user || !profile) return;
 
-        const handleTicketChange = (payload) => {
-            const { eventType, new: newRecord, old: oldRecord } = payload;
-
-            // Deduplication logic using the internal commit timestamp
-            const commitTs = payload.commit_timestamp;
-            if (commitTs && processedPayloads.has(commitTs)) return;
-            if (commitTs) processedPayloads.add(commitTs);
-
-            const isAdmin = profile.role === 'admin' || profile.role === 'master_admin';
-            const isOwner = newRecord.user_id === user.id;
-
-            // 1. NEW TICKET CREATED -> Notify Admins
-            if (eventType === 'INSERT') {
-                if (isAdmin) {
-                    addNotification({
-                        title: 'New Ticket Received',
-                        message: `A new ${newRecord.category || 'Support'} ticket requires triage.`,
-                        ticketId: newRecord.id,
-                        type: 'new_ticket',
-                        recipientRole: 'admin'
-                    });
-                }
-                return;
-            }
-
-            // 2. UPDATES
-            if (eventType === 'UPDATE' && oldRecord) {
-                // Determine what changed
-                const statusChanged = oldRecord.status !== newRecord.status;
-                const teamChanged = oldRecord.assigned_team !== newRecord.assigned_team;
-
-                // For nested JSON/JSONB updates (messages)
-                const oldMessagesLen = Array.isArray(oldRecord.messages) ? oldRecord.messages.length : 0;
-                const newMessagesLen = Array.isArray(newRecord.messages) ? newRecord.messages.length : 0;
-// eslint-disable-next-line no-unused-vars
-                const newlyAddedMessage = newMessagesLen > oldMessagesLen
-                    ? newRecord.messages[newMessagesLen - 1]
-                    : null;
-
-                // STATUS CHANGE -> Notify User (e.g., Resolved, In Progress)
-                if (statusChanged && isOwner) {
-                    addNotification({
-                        title: `Ticket ${newRecord.status}`,
-                        message: `Your ticket status was updated to ${newRecord.status}.`,
-                        ticketId: newRecord.id,
-                        type: newRecord.status?.toLowerCase().includes('resolv') ? 'resolution' : 'update',
-                        recipientRole: 'user'
-                    });
-                }
-
-                // RE-ASSIGNMENT -> Notify User
-                if (teamChanged && isOwner && newRecord.assigned_team) {
-                    addNotification({
-                        title: 'Ticket Re-Assigned',
-                        message: `Your ticket is now being handled by ${newRecord.assigned_team}.`,
-                        ticketId: newRecord.id,
-                        type: 'update',
-                        recipientRole: 'user'
-                    });
-                }
-            }
-        };
-
-        const handleMessageChange = (payload) => {
-            const { eventType, new: newMessage } = payload;
-            if (eventType !== 'INSERT') return;
+        // Only admins see the live ticket queue
+        const isAdmin = profile.role === 'admin' || profile.role === 'master_admin';
+        if (!isAdmin) return;
 
-            // Use same deduplication logic
-            const commitTs = payload.commit_timestamp;
-            if (commitTs && processedPayloads.has(commitTs)) return;
-            if (commitTs) processedPayloads.add(commitTs);
-
-            const isFromAdmin = newMessage.sender_role === 'admin' || newMessage.sender_role === 'super_admin' || newMessage.sender_role === 'master_admin';
-            const isAdmin = profile.role === 'admin' || profile.role === 'master_admin';
-
-            // Note: In a real app, we should check if the current user is the owner of the ticket
-            // But for notifications, if I'm the recipient (admin or owner), I should see it.
-            // For now, we rely on recipientRole filter in the UI components.
-
-            if (isFromAdmin) {
-                // Sent by Admin -> Notify User (only if it's their ticket)
-                // Note: ideally we'd check isOwner here, but for now we filter by role
-                if (profile.role === 'user') {
-                    addNotification({
-                        title: 'New Response from Support',
-                        message: newMessage.message?.length > 120 ? newMessage.message.substring(0, 120) + "..." : (newMessage.message || "An agent replied to your ticket."),
-                        ticketId: newMessage.ticket_id,
-                        type: 'message',
-                        recipientRole: 'user'
-                    });
-                }
-            } else {
-                // Sent by User -> Notify Admin
-                if (isAdmin) {
-                    addNotification({
-                        title: 'New Message from User',
-                        message: newMessage.message || "A user replied to their ticket.",
-                        ticketId: newMessage.ticket_id,
-                        type: 'message',
-                        recipientRole: 'admin'
-                    });
-                }
-            }
-        };
-
-        const ticketChannel = supabase
-            .channel('ticket-notifications')
+        const channel = supabase
+            .channel('tickets-realtime-dashboard')
             .on(
                 'postgres_changes',
-                { event: '*', schema: 'public', table: 'tickets' },
-                handleTicketChange
-            )
-            .subscribe();
-
-        const messageChannel = supabase
-            .channel('message-notifications')
-            .on(
-                'postgres_changes',
-                { event: 'INSERT', schema: 'public', table: 'ticket_messages' },
-                handleMessageChange
+                {
+                    event: '*',
+                    schema: 'public',
+                    table: 'tickets',
+                    filter: `company_id=eq.${profile.company_id}`,
+                },
+                (payload) => {
+                    const { eventType, new: newRecord, old: oldRecord } = payload;
+
+                    if (eventType === 'INSERT') {
+                        addTicket(newRecord);
+                    }
+
+                    if (eventType === 'UPDATE') {
+                        updateTicket(newRecord.ticket_id, newRecord);
+                    }
+
+                    if (eventType === 'DELETE') {
+                        removeTicket(oldRecord.ticket_id);
+                    }
+                }
             )
             .subscribe();
 
         return () => {
-            supabase.removeChannel(ticketChannel);
-            supabase.removeChannel(messageChannel);
+            supabase.removeChannel(channel);
         };
-    }, [user, profile, addNotification]);
+    }, [user, profile, addTicket, updateTicket, removeTicket]);
 };
 
-export default useRealtimeNotifications;
+export default useTicketsRealtime;

Frontend/src/legacy_ui/Dashboard.jsx

@@ -1,26 +1,46 @@
 import {
-  BarChart,
-  Bar,
-  XAxis,
-  YAxis,
-  Tooltip,
-  PieChart,
-  Pie,
-  Cell,
-  ResponsiveContainer,
-  Legend,
+  BarChart, Bar, XAxis, YAxis, Tooltip,
+  PieChart, Pie, Cell, ResponsiveContainer, Legend,
 } from "recharts";
-import { useEffect, useState } from "react";
+import { useEffect, useState, useRef } from "react";
 import { api } from "../services/api";
 import { Card, CardContent, CardHeader, CardTitle } from "../components/ui/card";
 import { ExpandableTabs } from "../components/ui/expandable-tabs";
-import { Bell, Home, Settings, HelpCircle, Shield, Activity, Zap, Users, AlertCircle } from "lucide-react";
+import { Bell, Home, Settings, HelpCircle, Shield, Activity, Zap, Users } from "lucide-react";
+import useTicketStore from "../store/ticketStore";
+import useTicketsRealtime from "../hooks/useTicketsRealtime";
 
 const COLORS = ["#0088FE", "#00C49F", "#FFBB28", "#FF8042", "#8884d8"];
 
+// Tracks which ticket IDs were recently updated for highlight animation
+const useRecentlyUpdated = () => {
+  const [recentIds, setRecentIds] = useState(new Set());
+
+  const markUpdated = (id) => {
+    setRecentIds((prev) => new Set([...prev, id]));
+    setTimeout(() => {
+      setRecentIds((prev) => {
+        const next = new Set(prev);
+        next.delete(id);
+        return next;
+      });
+    }, 2000); // highlight lasts 2 seconds
+  };
+
+  return { recentIds, markUpdated };
+};
+
 const Dashboard = () => {
-  const [tickets, setTickets] = useState([]);
   const [loading, setLoading] = useState(true);
+  const { recentIds, markUpdated } = useRecentlyUpdated();
+
+  // Pull live tickets from Zustand store
+  const tickets = useTicketStore((state) => state.tickets);
+  const addTicket = useTicketStore((state) => state.addTicket);
+  const prevTicketsRef = useRef([]);
+
+  // Activate realtime subscription
+  useTicketsRealtime();
 
   const tabs = [
     { title: "Dashboard", icon: Home },
@@ -30,11 +50,12 @@ const Dashboard = () => {
     { title: "Security", icon: Shield },
   ];
 
+  // Initial fetch — populate store on first load
   useEffect(() => {
     const fetchTickets = async () => {
       try {
         const data = await api.getTickets();
-        setTickets(data);
+        data.forEach((t) => addTicket(t));
       } catch (error) {
         console.error("Failed to fetch tickets", error);
       } finally {
@@ -42,26 +63,41 @@ const Dashboard = () => {
       }
     };
     fetchTickets();
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
+  // Detect newly inserted or updated tickets for highlight animation
+  useEffect(() => {
+    const prevIds = new Set(prevTicketsRef.current.map((t) => t.ticket_id));
+
+    tickets.forEach((t) => {
+      if (!prevIds.has(t.ticket_id)) {
+        // Brand new ticket
+        markUpdated(t.ticket_id);
+      } else {
+        // Check if it was updated
+        const prev = prevTicketsRef.current.find((p) => p.ticket_id === t.ticket_id);
+        if (prev && JSON.stringify(prev) !== JSON.stringify(t)) {
+          markUpdated(t.ticket_id);
+        }
+      }
+    });
+
+    prevTicketsRef.current = tickets;
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [tickets]);
+
   // Summary Counts
   const totalTickets = tickets.length;
   const openTickets = tickets.filter(
     (t) => t.status === "Open" || t.Resolution_Status === "Open"
   ).length;
-// eslint-disable-next-line no-unused-vars
-  const resolvedTickets = tickets.filter(
-    (t) => t.status === "Resolved" || t.Resolution_Status === "Resolved" || t.Resolution_Status === "Auto-Resolved" || t.Auto_Resolve
-  ).length;
   const autoResolvedTickets = tickets.filter(
     (t) => t.Auto_Resolve === true || t.Resolution_Status === "Auto-Resolved"
   ).length;
-
-  // Automation Rate
   const automationRate =
     totalTickets > 0 ? (autoResolvedTickets / totalTickets) * 100 : 0;
 
-  // Transform data for charts
   const categoryData = Object.entries(
     tickets.reduce((acc, ticket) => {
       const cat = ticket.category || "Unknown";
@@ -88,29 +124,44 @@ const Dashboard = () => {
 
   return (
     <div className="max-w-7xl mx-auto space-y-8 p-4 md:p-6">
+      {/* Highlight animation style */}
+      <style>{`
+        @keyframes flash-highlight {
+          0%   { background-color: #eef2ff; }
+          50%  { background-color: #c7d2fe; }
+          100% { background-color: transparent; }
+        }
+        .ticket-highlight {
+          animation: flash-highlight 2s ease-out forwards;
+        }
+      `}</style>
+
       <div className="flex flex-col md:flex-row justify-between items-center gap-4">
         <div>
           <h2 className="text-3xl font-black text-slate-900 tracking-tight flex items-center gap-2">
             <Activity className="text-indigo-600" /> Executive Overview
           </h2>
-          <p className="text-slate-500 font-medium mt-1">Global helpdesk status and AI performance across all channels</p>
+          <p className="text-slate-500 font-medium mt-1">
+            Global helpdesk status and AI performance across all channels
+          </p>
         </div>
         <ExpandableTabs tabs={tabs} />
       </div>
 
       {tickets.length === 0 ? (
         <Card className="text-center p-12 border-dashed border-2">
-          <p className="text-gray-500 text-lg">No ticket data available yet. Submit your first ticket to see analytics.</p>
+          <p className="text-gray-500 text-lg">
+            No ticket data available yet. Submit your first ticket to see analytics.
+          </p>
         </Card>
       ) : (
         <>
-          {/* Summary Statistics Cards */}
+          {/* Summary Cards */}
           <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
             <Card className="border-none shadow-md shadow-slate-200/50">
               <CardHeader className="pb-2">
                 <CardTitle className="text-xs font-bold text-slate-400 uppercase tracking-widest flex items-center justify-between">
-                  Total Tickets
-                  <Activity size={16} className="text-indigo-500" />
+                  Total Tickets <Activity size={16} className="text-indigo-500" />
                 </CardTitle>
               </CardHeader>
               <CardContent>
@@ -121,8 +172,7 @@ const Dashboard = () => {
             <Card className="border-none shadow-md shadow-slate-200/50">
               <CardHeader className="pb-2">
                 <CardTitle className="text-xs font-bold text-slate-400 uppercase tracking-widest flex items-center justify-between">
-                  Auto-Resolved
-                  <Zap size={16} className="text-emerald-500" />
+                  Auto-Resolved <Zap size={16} className="text-emerald-500" />
                 </CardTitle>
               </CardHeader>
               <CardContent>
@@ -133,8 +183,7 @@ const Dashboard = () => {
             <Card className="border-none shadow-md shadow-slate-200/50">
               <CardHeader className="pb-2">
                 <CardTitle className="text-xs font-bold text-slate-400 uppercase tracking-widest flex items-center justify-between">
-                  Open Tickets
-                  <Users size={16} className="text-orange-500" />
+                  Open Tickets <Users size={16} className="text-orange-500" />
                 </CardTitle>
               </CardHeader>
               <CardContent>
@@ -145,8 +194,7 @@ const Dashboard = () => {
             <Card className="border-none shadow-md shadow-slate-200/50">
               <CardHeader className="pb-2">
                 <CardTitle className="text-xs font-bold text-slate-400 uppercase tracking-widest flex items-center justify-between">
-                  Automation Rate
-                  <Shield size={16} className="text-purple-500" />
+                  Automation Rate <Shield size={16} className="text-purple-500" />
                 </CardTitle>
               </CardHeader>
               <CardContent>
@@ -155,6 +203,66 @@ const Dashboard = () => {
             </Card>
           </div>
 
+          {/* Live Ticket Queue */}
+          <Card className="border-none shadow-md shadow-slate-200/50">
+            <CardHeader>
+              <CardTitle className="text-lg font-bold text-slate-800 flex items-center gap-2">
+                <Activity size={18} className="text-indigo-500" />
+                Live Ticket Queue
+                <span className="ml-2 inline-flex items-center gap-1 text-xs font-semibold text-emerald-600 bg-emerald-50 px-2 py-0.5 rounded-full">
+                  <span className="w-1.5 h-1.5 bg-emerald-500 rounded-full animate-pulse" />
+                  LIVE
+                </span>
+              </CardTitle>
+            </CardHeader>
+            <CardContent>
+              <div className="overflow-x-auto">
+                <table className="w-full text-sm">
+                  <thead>
+                    <tr className="text-left text-xs font-bold text-slate-400 uppercase tracking-widest border-b border-slate-100">
+                      <th className="pb-3 pr-4">ID</th>
+                      <th className="pb-3 pr-4">Category</th>
+                      <th className="pb-3 pr-4">Status</th>
+                      <th className="pb-3">Assignee</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {tickets.slice(0, 10).map((ticket) => (
+                      <tr
+                        key={ticket.ticket_id}
+                        className={`border-b border-slate-50 transition-colors ${
+                          recentIds.has(ticket.ticket_id) ? "ticket-highlight" : ""
+                        }`}
+                      >
+                        <td className="py-3 pr-4 font-mono text-xs text-slate-500">
+                          #{String(ticket.ticket_id).slice(0, 8)}
+                        </td>
+                        <td className="py-3 pr-4 font-medium text-slate-700">
+                          {ticket.category || "—"}
+                        </td>
+                        <td className="py-3 pr-4">
+                          <span className={`px-2 py-0.5 rounded-full text-xs font-bold ${
+                            ticket.status === "Open"
+                              ? "bg-orange-100 text-orange-700"
+                              : ticket.status === "Resolved"
+                              ? "bg-emerald-100 text-emerald-700"
+                              : "bg-slate-100 text-slate-600"
+                          }`}>
+                            {ticket.status || ticket.Resolution_Status || "—"}
+                          </span>
+                        </td>
+                        <td className="py-3 text-slate-600">
+                          {ticket.assigned_team || "Unassigned"}
+                        </td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+            </CardContent>
+          </Card>
+
+          {/* Charts */}
           <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
             <Card className="border-none shadow-md shadow-slate-200/50">
               <CardHeader>
@@ -168,9 +276,7 @@ const Dashboard = () => {
                     <BarChart data={categoryData}>
                       <XAxis dataKey="name" fontSize={12} axisLine={false} tickLine={false} />
                       <YAxis fontSize={12} axisLine={false} tickLine={false} />
-                      <Tooltip
-                        contentStyle={{ backgroundColor: '#fff', borderRadius: '8px', border: 'none', boxShadow: '0 4px 6px -1px rgb(0 0 0 / 0.1)' }}
-                      />
+                      <Tooltip contentStyle={{ backgroundColor: '#fff', borderRadius: '8px', border: 'none', boxShadow: '0 4px 6px -1px rgb(0 0 0 / 0.1)' }} />
                       <Bar dataKey="value" fill="#6366f1" radius={[4, 4, 0, 0]} barSize={40} />
                     </BarChart>
                   </ResponsiveContainer>
@@ -188,23 +294,12 @@ const Dashboard = () => {
                 <div className="h-80">
                   <ResponsiveContainer width="100%" height="100%">
                     <PieChart>
-                      <Pie
-                        data={statusData}
-                        cx="50%"
-                        cy="50%"
-                        outerRadius={100}
-                        innerRadius={60}
-                        paddingAngle={5}
-                        dataKey="value"
-                        label={({ name, percent }) =>
-                          `${name} ${(percent * 100).toFixed(0)}%`
-                        }
+                      <Pie data={statusData} cx="50%" cy="50%" outerRadius={100} innerRadius={60}
+                        paddingAngle={5} dataKey="value"
+                        label={({ name, percent }) => `${name} ${(percent * 100).toFixed(0)}%`}
                       >
                         {statusData.map((entry, index) => (
-                          <Cell
-                            key={`cell-${index}`}
-                            fill={COLORS[index % COLORS.length]}
-                          />
+                          <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
                         ))}
                       </Pie>
                       <Tooltip />
@@ -216,13 +311,11 @@ const Dashboard = () => {
             </Card>
           </div>
 
-          {/* Additional Insights */}
+          {/* Efficiency + AI */}
           <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
             <Card className="border-none shadow-md shadow-slate-200/50">
               <CardHeader>
-                <CardTitle className="text-lg font-bold text-slate-800 flex items-center gap-2">
-                  Efficiency Highlights
-                </CardTitle>
+                <CardTitle className="text-lg font-bold text-slate-800">Efficiency Highlights</CardTitle>
               </CardHeader>
               <CardContent className="space-y-4">
                 <div className="flex items-center justify-between p-4 bg-slate-50 rounded-xl border border-slate-100">
@@ -244,23 +337,21 @@ const Dashboard = () => {
 
             <Card className="border-none shadow-md shadow-slate-200/50">
               <CardHeader>
-                <CardTitle className="text-lg font-bold text-slate-800 flex items-center gap-2">
-                  AI Performance
-                </CardTitle>
+                <CardTitle className="text-lg font-bold text-slate-800">AI Performance</CardTitle>
               </CardHeader>
               <CardContent>
                 <div className="grid grid-cols-2 gap-6">
                   <div className="p-6 bg-slate-50 rounded-2xl text-center border border-slate-100">
                     <div className="text-3xl font-black text-indigo-600">
-                      {tickets.filter(t => t.confidence > 0.8).length}
+                      {tickets.filter((t) => t.confidence > 0.8).length}
                     </div>
-                    <div className="text-xs font-bold text-slate-400 uppercase tracking-widest mt-2 text-center">High Confidence</div>
+                    <div className="text-xs font-bold text-slate-400 uppercase tracking-widest mt-2">High Confidence</div>
                   </div>
                   <div className="p-6 bg-slate-50 rounded-2xl text-center border border-slate-100">
                     <div className="text-3xl font-black text-orange-600">
-                      {tickets.filter(t => (t.Duplicate_Probability || t.duplicate_probability || 0) > 0.7).length}
+                      {tickets.filter((t) => (t.Duplicate_Probability || t.duplicate_probability || 0) > 0.7).length}
                     </div>
-                    <div className="text-xs font-bold text-slate-400 uppercase tracking-widest mt-2 text-center">Potential Dupes</div>
+                    <div className="text-xs font-bold text-slate-400 uppercase tracking-widest mt-2">Potential Dupes</div>
                   </div>
                 </div>
               </CardContent>
@@ -272,4 +363,4 @@ const Dashboard = () => {
   );
 };
 
-export default Dashboard;
+export default Dashboard;

Frontend/src/store/ticketStore.js

@@ -57,11 +57,21 @@ const useTicketStore = create(
                 const updatedTickets = state.tickets.map(t => t.ticket_id === ticketId ? { ...t, ...updates } : t);
                 const shouldUpdateActive = state.activeTicket?.ticket_id === ticketId;
 
+
+
+
                 return {
                     tickets: updatedTickets,
                     activeTicket: shouldUpdateActive ? { ...state.activeTicket, ...updates } : state.activeTicket
                 };
             }),
+
+            removeTicket: (ticketId) => set((state) => ({
+    tickets: state.tickets.filter(t => t.ticket_id !== ticketId),
+    activeTicket: state.activeTicket?.ticket_id === ticketId
+        ? null
+        : state.activeTicket
+})),
             appendMessage: (ticketId, message) => set((state) => {
                 const updatedTickets = state.tickets.map(t =>
                     t.ticket_id === ticketId

MobileApp/App.js

@@ -1,5 +1,4 @@
 import 'react-native-gesture-handler';
-import LogRocket from '@logrocket/react-native';
 import React, { useEffect, useState } from 'react';
 import { NavigationContainer } from '@react-navigation/native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
@@ -7,7 +6,7 @@ import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
 import { StatusBar } from 'expo-status-bar';
 import { supabase } from './src/lib/supabase';
 import { COLORS } from './src/styles/theme';
-import { LayoutDashboard, Ticket, User } from 'lucide-react-native';
+import { LayoutDashboard, Ticket, User, Settings, ShieldAlert, Users } from 'lucide-react-native';
 import { View, ActivityIndicator, Linking } from 'react-native';
 import AsyncStorage from '@react-native-async-storage/async-storage';
 import { SafeAreaProvider, useSafeAreaInsets } from 'react-native-safe-area-context';
@@ -34,6 +33,13 @@ import AIProcessingScreen from './src/screens/user/AIProcessingScreen';
 import NotificationsScreen from './src/screens/user/NotificationsScreen';
 import KnowledgeBaseScreen from './src/screens/user/KnowledgeBaseScreen';
 
+// Admin Screens
+import AdminDashboardScreen from './src/screens/admin/AdminDashboardScreen';
+import AdminTicketsScreen from './src/screens/admin/AdminTicketsScreen';
+import AdminTicketDetailScreen from './src/screens/admin/AdminTicketDetailScreen';
+import AdminUsersScreen from './src/screens/admin/AdminUsersScreen';
+import AdminSettingsScreen from './src/screens/admin/AdminSettingsScreen';
+
 const Stack = createNativeStackNavigator();
 const Tab = createBottomTabNavigator();
 
@@ -72,6 +78,45 @@ const TabNavigator = () => {
   );
 };
 
+const AdminTabNavigator = () => {
+  const insets = useSafeAreaInsets();
+  const tabBarHeight = 60 + insets.bottom;
+
+  return (
+    <Tab.Navigator
+      screenOptions={({ route }) => ({
+        tabBarIcon: ({ color, size }) => {
+          if (route.name === 'AdminDashboard') return <LayoutDashboard size={size} color={color} />;
+          if (route.name === 'Tickets') return <Ticket size={size} color={color} />;
+          if (route.name === 'Users') return <Users size={size} color={color} />;
+          if (route.name === 'Settings') return <Settings size={size} color={color} />;
+          if (route.name === 'Profile') return <User size={size} color={color} />;
+        },
+        tabBarActiveTintColor: COLORS.primary,
+        tabBarInactiveTintColor: COLORS.textMuted,
+        tabBarLabelStyle: { fontSize: 11, fontWeight: '700' },
+        tabBarStyle: {
+          height: tabBarHeight,
+          paddingBottom: insets.bottom + 8,
+          paddingTop: 10,
+          backgroundColor: '#ffffff',
+          borderTopWidth: 1,
+          borderTopColor: '#f0f0f0',
+          elevation: 0,
+          shadowOpacity: 0,
+        },
+        headerShown: false,
+      })}
+    >
+      <Tab.Screen name="AdminDashboard" component={AdminDashboardScreen} options={{ title: 'Dashboard' }} />
+      <Tab.Screen name="Tickets" component={AdminTicketsScreen} />
+      <Tab.Screen name="Users" component={AdminUsersScreen} />
+      <Tab.Screen name="Settings" component={AdminSettingsScreen} />
+      <Tab.Screen name="Profile" component={ProfileScreen} />
+    </Tab.Navigator>
+  );
+};
+
 // Inner app that has access to SafeAreaProvider context
 const AppContent = () => {
   const insets = useSafeAreaInsets();
@@ -79,36 +124,48 @@ const AppContent = () => {
   const [loading, setLoading] = useState(true);
   const [showOnboarding, setShowOnboarding] = useState(null);
   const [userStatus, setUserStatus] = useState(null); // 'active', 'pending_approval', 'rejected'
+  const [userRole, setUserRole] = useState('user'); // 'user', 'admin', 'master_admin'
 
   useEffect(() => {
-    // Initialize LogRocket
-    LogRocket.init('ky7sla/helpdeskai');
-
     const initialize = async () => {
       try {
         const { data: { session } } = await supabase.auth.getSession();
         setSession(session);
 
         if (session?.user) {
-          // Identify user in LogRocket
-          LogRocket.identify(session.user.id, {
-            email: session.user.email,
-            name: session.user.user_metadata?.full_name || 'User',
-          });
-
-          const { data } = await supabase
+          const { data, error } = await supabase
             .from('profiles')
-            .select('status')
+            .select('status, role')
             .eq('id', session.user.id)
             .single();
-          setUserStatus(data?.status || 'active');
+          
+          if (error) {
+            console.log('[AuthInit] Profile fetch error, validating session:', error.message);
+            // Verify if session is still validly active (GetUser forces refresh if expired)
+            const { data: userData, error: userError } = await supabase.auth.getUser();
+            if (userError) {
+              console.log('[AuthInit] Token validation failed. Clearing session.');
+              setSession(null);
+            } else {
+              // Valid token but profiles table is temporarily offline; default to user
+              setUserStatus('active');
+              setUserRole('user');
+            }
+          } else {
+            setUserStatus(data?.status || 'active');
+            setUserRole(data?.role || 'user');
+          }
         }
-
-        const onboardingDone = await AsyncStorage.getItem('@onboarding_complete');
-        setShowOnboarding(onboardingDone === null);
       } catch (e) {
-        console.log('Init error', e);
+        console.log('[AuthInit] Crash caught during initialization:', e);
       } finally {
+        // Guarantee showOnboarding is resolved to a boolean to prevent React Navigation stack layout mismatch
+        try {
+          const onboardingDone = await AsyncStorage.getItem('@onboarding_complete');
+          setShowOnboarding(onboardingDone === null);
+        } catch (err) {
+          setShowOnboarding(false);
+        }
         setLoading(false);
       }
     };
@@ -118,21 +175,30 @@ const AppContent = () => {
     const { data: { subscription } } = supabase.auth.onAuthStateChange(async (_event, session) => {
       setSession(session);
       if (session?.user) {
-        // Identify user in LogRocket on auth change
-        LogRocket.identify(session.user.id, {
-          email: session.user.email,
-          name: session.user.user_metadata?.full_name || 'User',
-        });
-
-        // Fetch profile status for routing
-        const { data } = await supabase
-          .from('profiles')
-          .select('status')
-          .eq('id', session.user.id)
-          .single();
-        setUserStatus(data?.status || 'active');
+        try {
+          const { data, error } = await supabase
+            .from('profiles')
+            .select('status, role')
+            .eq('id', session.user.id)
+            .single();
+          
+          if (error) {
+            console.log('[AuthChange] Profile query failed:', error.message);
+            // Default to safe values to avoid blank screens
+            setUserStatus('active');
+            setUserRole('user');
+          } else {
+            setUserStatus(data?.status || 'active');
+            setUserRole(data?.role || 'user');
+          }
+        } catch (err) {
+          console.warn('[AuthChange] Uncaught exception inside handler:', err);
+          setUserStatus('active');
+          setUserRole('user');
+        }
       } else {
         setUserStatus(null);
+        setUserRole('user');
       }
     });
 
@@ -152,6 +218,7 @@ const AppContent = () => {
         filter: `id=eq.${session.user.id}`,
       }, (payload) => {
         setUserStatus(payload.new.status);
+        setUserRole(payload.new.role || 'user');
       })
       .subscribe();
 
@@ -208,6 +275,7 @@ const AppContent = () => {
   const isActive = userStatus === 'active';
   const isPending = userStatus === 'pending_approval';
   const isRejected = userStatus === 'rejected';
+  const isAdmin = userRole === 'admin' || userRole === 'master_admin';
 
   return (
     <NotificationProvider topInset={insets.top}>
@@ -229,13 +297,20 @@ const AppContent = () => {
           ) : (
             // ─── Active user ───
             <>
-               <Stack.Screen name="MainTabs" component={TabNavigator} />
+               {isAdmin ? (
+                 <Stack.Screen name="MainTabs" component={AdminTabNavigator} />
+               ) : (
+                 <Stack.Screen name="MainTabs" component={TabNavigator} />
+               )}
               <Stack.Screen name="CreateTicket" component={CreateTicketScreen} options={{ animation: 'slide_from_bottom' }} />
               <Stack.Screen name="AIProcessing" component={AIProcessingScreen} options={{ animation: 'slide_from_right' }} />
               <Stack.Screen name="TicketTracking" component={TicketTrackingScreen} options={{ animation: 'slide_from_right' }} />
               <Stack.Screen name="TicketDetail" component={TicketDetailScreen} options={{ animation: 'slide_from_right' }} />
               <Stack.Screen name="Notifications" component={NotificationsScreen} options={{ animation: 'slide_from_right' }} />
               <Stack.Screen name="KnowledgeBase" component={KnowledgeBaseScreen} options={{ animation: 'slide_from_right' }} />
+              
+              {/* Admin specific screens */}
+              <Stack.Screen name="AdminTicketDetail" component={AdminTicketDetailScreen} options={{ animation: 'slide_from_right' }} />
             </>
           )}
         </Stack.Navigator>

MobileApp/app.json

@@ -28,7 +28,6 @@
       "favicon": "./assets/favicon.png"
     },
     "plugins": [
-      "@logrocket/react-native",
       [
         "expo-build-properties",
         {

MobileApp/package-lock.json

@@ -8,7 +8,6 @@
       "name": "mobileapp_new",
       "version": "1.0.0",
       "dependencies": {
-        "@logrocket/react-native": "^2.3.2",
         "@react-native-async-storage/async-storage": "2.2.0",
         "@react-navigation/bottom-tabs": "^7.15.10",
         "@react-navigation/native": "^7.2.2",
@@ -32,6 +31,7 @@
         "react-native-screens": "~4.16.0",
         "react-native-svg": "15.12.1",
         "react-native-url-polyfill": "^3.0.0",
+        "react-native-webview": "^13.16.1",
         "zustand": "^5.0.12"
       },
       "devDependencies": {
@@ -2736,23 +2736,6 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
-    "node_modules/@logrocket/react-native": {
-      "version": "2.3.2",
-      "resolved": "https://registry.npmjs.org/@logrocket/react-native/-/react-native-2.3.2.tgz",
-      "integrity": "sha512-Fi8H3HCTHj6NFcDGurxz/bXZ2A1fTCj6WVocRNmaqDSSIHL63xP01PyXqLT6xdTakO65Mlw7i37WxojLYuzgmQ==",
-      "license": "MIT",
-      "peerDependencies": {
-        "expo": ">=45.0.0",
-        "expo-build-properties": "*",
-        "react": "*",
-        "react-native": ">=0.60.0-rc.0 <1.0.x"
-      },
-      "peerDependenciesMeta": {
-        "expo": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/@react-native-async-storage/async-storage": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/@react-native-async-storage/async-storage/-/async-storage-2.2.0.tgz",
@@ -8495,6 +8478,32 @@
         "react-native": "*"
       }
     },
+    "node_modules/react-native-webview": {
+      "version": "13.16.1",
+      "resolved": "https://registry.npmjs.org/react-native-webview/-/react-native-webview-13.16.1.tgz",
+      "integrity": "sha512-If0eHhoEdOYDcHsX+xBFwHMbWBGK1BvGDQDQdVkwtSIXiq1uiqjkpWVP2uQ1as94J0CzvFE9PUNDuhiX0Z6ubw==",
+      "license": "MIT",
+      "dependencies": {
+        "escape-string-regexp": "^4.0.0",
+        "invariant": "2.2.4"
+      },
+      "peerDependencies": {
+        "react": "*",
+        "react-native": "*"
+      }
+    },
+    "node_modules/react-native-webview/node_modules/escape-string-regexp": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+      "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/react-native/node_modules/@react-native/virtualized-lists": {
       "version": "0.81.5",
       "resolved": "https://registry.npmjs.org/@react-native/virtualized-lists/-/virtualized-lists-0.81.5.tgz",

MobileApp/package.json

@@ -9,7 +9,6 @@
     "web": "expo start --web"
   },
   "dependencies": {
-    "@logrocket/react-native": "^2.3.2",
     "@react-native-async-storage/async-storage": "2.2.0",
     "@react-navigation/bottom-tabs": "^7.15.10",
     "@react-navigation/native": "^7.2.2",
@@ -33,6 +32,7 @@
     "react-native-screens": "~4.16.0",
     "react-native-svg": "15.12.1",
     "react-native-url-polyfill": "^3.0.0",
+    "react-native-webview": "^13.16.1",
     "zustand": "^5.0.12"
   },
   "private": true,

MobileApp/src/screens/auth/LoginScreen.js

@@ -233,10 +233,15 @@ const LoginScreen = () => {
           </Animated.View>
 
           {/* Footer */}
-          <Animated.View style={[styles.footer, { opacity: fadeAnim, paddingBottom: insets.bottom + 40 }]}>
-            <Text style={styles.footerText}>Don't have an account? </Text>
-            <TouchableOpacity onPress={() => navigation.navigate('Signup')}>
-              <Text style={styles.footerLink}>Create Account</Text>
+          <Animated.View style={[styles.footer, { opacity: fadeAnim, paddingBottom: insets.bottom + 40, gap: 12, flexDirection: 'column', alignItems: 'center' }]}>
+            <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'center' }}>
+              <Text style={styles.footerText}>Don't have an account? </Text>
+              <TouchableOpacity onPress={() => navigation.navigate('Signup')}>
+                <Text style={styles.footerLink}>Create Account</Text>
+              </TouchableOpacity>
+            </View>
+            <TouchableOpacity onPress={() => navigation.navigate('AdminSignup')}>
+              <Text style={styles.adminLink}>Register as Admin Agent / Company</Text>
             </TouchableOpacity>
           </Animated.View>
         </ScrollView>

MobileApp/src/screens/user/AIProcessingScreen.js

@@ -138,7 +138,7 @@ const AIProcessingScreen = () => {
   const steps = [
     { label: "Initializing AI Core", icon: "🧠" },
     { label: "Scanning for OCR Data", icon: "🔍" },
-    { label: "Neural Classification", icon: "⚡" },
+    { label: "AI Classification", icon: "⚡" },
     { label: "Searching Knowledge Base", icon: "📚" },
     { label: "Extracting Technical Entities", icon: "🔗" },
     { label: "Checking for Duplicates", icon: "🛡️" },
@@ -201,9 +201,22 @@ const AIProcessingScreen = () => {
         return;
       }
       console.error('AI Analysis Error:', err);
+      let errorMsg = '';
+      if (err.response?.data?.detail) {
+        if (typeof err.response.data.detail === 'string') {
+          errorMsg = err.response.data.detail;
+        } else if (Array.isArray(err.response.data.detail)) {
+          errorMsg = err.response.data.detail.map(d => `${d.loc?.join('.') || 'field'}: ${d.msg}`).join(', ');
+        } else {
+          errorMsg = JSON.stringify(err.response.data.detail);
+        }
+      } else if (err.message) {
+        errorMsg = err.message;
+      }
+      
       setError(err.response?.status === 503 
         ? 'The AI engine is waking up. Please wait a moment and try again.'
-        : (err.message || 'AI engine is currently busy. Please try again.'));
+        : (errorMsg || 'AI engine is currently busy. Please try again.'));
       setLoading(false);
       Haptics.notificationAsync(Haptics.NotificationFeedbackType.Error);
     }
@@ -362,7 +375,7 @@ const AIProcessingScreen = () => {
 
         {/* Title */}
         <View style={styles.loadingHeader}>
-          <Text style={styles.loadingTitle}>Neural Processing</Text>
+          <Text style={styles.loadingTitle}>AI Triage & Analysis</Text>
           <Text style={styles.loadingSubtitle}>HelpDesk.ai is orchestrating your request</Text>
         </View>
 

MobileApp/src/screens/user/DashboardScreen.js

@@ -463,36 +463,36 @@ const styles = StyleSheet.create({
   emptyState: { alignItems: 'center', paddingTop: 40, paddingBottom: 20, gap: 10, marginHorizontal: 20 },
   emptyTitle: { fontSize: 17, fontWeight: '800', color: COLORS.text },
   emptyMsg: { fontSize: 13, color: COLORS.textLight, textAlign: 'center' },
-  // OTA Update Banner
+  // OTA Update Banner (Green Theme Harmony)
   updateBanner: {
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'space-between',
-    backgroundColor: '#0f172a',
+    backgroundColor: COLORS.secondary, // Premium Dark Green-Black (#0f1f12)
     borderWidth: 1,
-    borderColor: 'rgba(99,102,241,0.45)',
+    borderColor: 'rgba(22, 163, 74, 0.35)', // Translucent Green
     borderRadius: 18,
     paddingVertical: 12,
     paddingHorizontal: 16,
     marginHorizontal: 20,
     marginBottom: 16,
-    shadowColor: '#6366f1',
-    shadowOpacity: 0.35,
-    shadowRadius: 14,
-    elevation: 10,
+    shadowColor: COLORS.primary, // Green Glow
+    shadowOpacity: 0.25,
+    shadowRadius: 12,
+    elevation: 8,
     gap: 10,
   },
   updateBannerLeft: { flexDirection: 'row', alignItems: 'center', gap: 12, flex: 1 },
   updateIconWrap: {
     width: 36, height: 36, borderRadius: 10,
-    backgroundColor: '#6366f1',
+    backgroundColor: COLORS.primary, // Green Accent
     justifyContent: 'center', alignItems: 'center',
   },
-  updateTitle: { fontSize: 13, fontWeight: '800', color: '#e0e7ff' },
-  updateSubtitle: { fontSize: 11, color: 'rgba(224,231,255,0.55)', fontWeight: '500' },
+  updateTitle: { fontSize: 13, fontWeight: '800', color: COLORS.primaryLight }, // Light Green (#dcfce7)
+  updateSubtitle: { fontSize: 11, color: 'rgba(220, 252, 231, 0.65)', fontWeight: '500' },
   updateActions: { flexDirection: 'row', alignItems: 'center', gap: 10, flexShrink: 0 },
   updateBtn: {
-    backgroundColor: '#6366f1',
+    backgroundColor: COLORS.primary, // Green Button
     paddingHorizontal: 14,
     paddingVertical: 7,
     borderRadius: 10,

MobileApp/src/screens/user/KnowledgeBaseScreen.js

@@ -12,6 +12,7 @@ import {
   HelpCircle, Video, Play, X, ExternalLink 
 } from 'lucide-react-native';
 import { YOUTUBE_RESOURCES, VIDEO_CATEGORIES } from '../../data/youtubeResources';
+import { WebView } from 'react-native-webview';
 
 const DEFAULT_ARTICLES = [
   {
@@ -47,6 +48,13 @@ const KnowledgeBaseScreen = ({ navigation }) => {
   const [selectedArticle, setSelectedArticle] = useState(null);
   const [modalVisible, setModalVisible] = useState(false);
 
+  // New Premium Playback & YouTube States
+  const [selectedVideo, setSelectedVideo] = useState(null);
+  const [videoModalVisible, setVideoModalVisible] = useState(false);
+  const [videos, setVideos] = useState([]);
+  const [loadingVideos, setLoadingVideos] = useState(false);
+  const [debouncedSearch, setDebouncedSearch] = useState('');
+
   // Debounced real-time articles search
   useEffect(() => {
     if (activeTab === 'articles') {
@@ -120,29 +128,62 @@ const KnowledgeBaseScreen = ({ navigation }) => {
   };
 
   const handleVideoPress = (video) => {
-    Linking.openURL(video.url).catch(err => {
-      Alert.alert("Error", "Could not open YouTube link on your device.");
-    });
+    setSelectedVideo(video);
+    setVideoModalVisible(true);
   };
 
+  // Debounce the search query to keep typing fluid
+  useEffect(() => {
+    const handler = setTimeout(() => {
+      setDebouncedSearch(searchQuery);
+    }, 600);
+    return () => clearTimeout(handler);
+  }, [searchQuery]);
+
+  // Sync and fetch videos dynamically matching category and search filter
+  useEffect(() => {
+    const fetchVideos = async () => {
+      setLoadingVideos(true);
+      try {
+        const fallbackList = activeVideoCategory === 'All' 
+          ? YOUTUBE_RESOURCES 
+          : YOUTUBE_RESOURCES.filter(v => v.category === activeVideoCategory);
+        
+        let formatted = fallbackList.map(item => {
+          const videoId = item.url.split('v=')[1] || item.id;
+          return {
+            id: videoId,
+            title: item.title,
+            description: item.description,
+            category: item.category,
+            url: item.url,
+            thumbnail_url: item.thumbnail_url || `https://img.youtube.com/vi/${videoId}/hqdefault.jpg`
+          };
+        });
+
+        if (debouncedSearch.trim()) {
+          const q = debouncedSearch.toLowerCase().trim();
+          formatted = formatted.filter(v => 
+            v.title.toLowerCase().includes(q) || 
+            v.description.toLowerCase().includes(q) ||
+            v.category.toLowerCase().includes(q)
+          );
+        }
+
+        setVideos(formatted);
+      } catch (err) {
+        console.warn("YouTube videos fetch error:", err);
+      } finally {
+        setLoadingVideos(false);
+      }
+    };
+
+    fetchVideos();
+  }, [activeVideoCategory, debouncedSearch]);
+
   // Filter video guides locally in real-time
   const getFilteredVideos = () => {
-    let filtered = YOUTUBE_RESOURCES;
-    
-    if (activeVideoCategory !== 'All') {
-      filtered = filtered.filter(v => v.category === activeVideoCategory);
-    }
-    
-    if (searchQuery.trim()) {
-      const q = searchQuery.toLowerCase().trim();
-      filtered = filtered.filter(v => 
-        v.title.toLowerCase().includes(q) || 
-        v.description.toLowerCase().includes(q) ||
-        v.category.toLowerCase().includes(q)
-      );
-    }
-    
-    return filtered;
+    return videos;
   };
 
   const renderArticle = ({ item }) => (
@@ -311,6 +352,7 @@ const KnowledgeBaseScreen = ({ navigation }) => {
         transparent={true}
         visible={modalVisible}
         onRequestClose={() => setModalVisible(false)}
+        statusBarTranslucent
       >
         <View style={styles.modalOverlay}>
           <TouchableOpacity 
@@ -345,6 +387,50 @@ const KnowledgeBaseScreen = ({ navigation }) => {
           </View>
         </View>
       </Modal>
+
+      {/* Premium Video Guides Inline WebView Player Modal */}
+      <Modal
+        animationType="slide"
+        transparent={false}
+        visible={videoModalVisible}
+        onRequestClose={() => setVideoModalVisible(false)}
+      >
+        <SafeAreaView style={styles.videoPlayerContainer} edges={['top', 'bottom']}>
+          <StatusBar barStyle="light-content" />
+          <View style={styles.videoPlayerHeader}>
+            <Text style={styles.videoPlayerTitle} numberOfLines={1}>
+              {selectedVideo?.title || 'Video Tutorial'}
+            </Text>
+            <TouchableOpacity 
+              onPress={() => setVideoModalVisible(false)} 
+              style={styles.videoPlayerCloseBtn}
+            >
+              <X size={20} color="#ffffff" strokeWidth={2.5} />
+            </TouchableOpacity>
+          </View>
+
+          {selectedVideo ? (
+            <WebView
+              style={styles.webView}
+              javaScriptEnabled={true}
+              domStorageEnabled={true}
+              allowsFullscreenVideo={true}
+              mediaPlaybackRequiresUserAction={false}
+              source={{ uri: `https://www.youtube.com/embed/${selectedVideo.id}?autoplay=1&modestbranding=1&rel=0` }}
+            />
+          ) : (
+            <View style={styles.videoPlayerLoading}>
+              <ActivityIndicator size="large" color="#ffffff" />
+            </View>
+          )}
+          
+          <View style={styles.videoPlayerFooter}>
+            <Text style={styles.videoPlayerDesc}>
+              {selectedVideo?.description}
+            </Text>
+          </View>
+        </SafeAreaView>
+      </Modal>
     </SafeAreaView>
   );
 };
@@ -612,6 +698,24 @@ const styles = StyleSheet.create({
     fontSize: 15,
     fontWeight: '800',
   },
+
+  // Premium video player styling definitions
+  videoPlayerContainer: { flex: 1, backgroundColor: '#090d16' },
+  videoPlayerHeader: { 
+    flexDirection: 'row', 
+    justifyContent: 'space-between', 
+    alignItems: 'center', 
+    paddingHorizontal: 20, 
+    paddingVertical: 14,
+    borderBottomWidth: 1,
+    borderBottomColor: 'rgba(255,255,255,0.08)'
+  },
+  videoPlayerTitle: { fontSize: 15, fontWeight: '900', color: '#ffffff', flex: 1, marginRight: 16 },
+  videoPlayerCloseBtn: { width: 36, height: 36, borderRadius: 18, backgroundColor: 'rgba(255,255,255,0.1)', justifyContent: 'center', alignItems: 'center' },
+  webView: { flex: 1, backgroundColor: '#000000' },
+  videoPlayerLoading: { flex: 1, justifyContent: 'center', alignItems: 'center' },
+  videoPlayerFooter: { padding: 20, borderTopWidth: 1, borderTopColor: 'rgba(255,255,255,0.08)' },
+  videoPlayerDesc: { fontSize: 13.5, color: '#94a3b8', lineHeight: 20, fontWeight: '500' }
 });
 
 export default KnowledgeBaseScreen;

MobileApp/src/screens/user/ProfileScreen.js

@@ -16,6 +16,7 @@ import * as ImagePicker from 'expo-image-picker';
 import { decode } from 'base64-arraybuffer';
 import { useFocusEffect } from '@react-navigation/native';
 import { useNotification } from '../../components/NotificationProvider';
+import AsyncStorage from '@react-native-async-storage/async-storage';
 
 const ProfileScreen = () => {
   const { success, error: notifyError } = useNotification();
@@ -223,8 +224,19 @@ const ProfileScreen = () => {
   };
 
   const handleLogout = async () => {
-    Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Medium);
-    await supabase.auth.signOut();
+    try {
+      Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Medium);
+      // Forcefully wipe all Supabase session keys from AsyncStorage first to trigger instant navigation resetting
+      const keys = await AsyncStorage.getAllKeys();
+      const supabaseKeys = keys.filter(k => k.startsWith('sb-') || k.includes('supabase'));
+      for (const key of supabaseKeys) {
+        await AsyncStorage.removeItem(key);
+      }
+      await supabase.auth.signOut();
+    } catch (e) {
+      console.warn("Logout error, forcing full wipe:", e);
+      await AsyncStorage.clear();
+    }
   };
 
   if (loading) {

MobileApp/src/screens/user/TicketDetailScreen.js

@@ -1,60 +1,159 @@
-import React, { useState, useEffect, useRef } from 'react';
+import React, { useState, useEffect, useRef, useCallback } from 'react';
 import {
-  StyleSheet,
-  View,
-  Text,
-  TextInput,
-  TouchableOpacity,
-  FlatList,
-  KeyboardAvoidingView,
-  Platform,
-  ActivityIndicator
+  StyleSheet, View, Text, TextInput, TouchableOpacity,
+  FlatList, KeyboardAvoidingView, Platform, ActivityIndicator,
+  StatusBar, Alert, Modal, Image, ScrollView, Animated
 } from 'react-native';
 import { SafeAreaView } from 'react-native-safe-area-context';
 import { supabase } from '../../lib/supabase';
 import { COLORS, SHADOWS } from '../../styles/theme';
-import { ArrowLeft, Send, User, Bot } from 'lucide-react-native';
-import { useNavigation } from '@react-navigation/native';
+import { 
+  ArrowLeft, Send, User, Bot, Mic, Phone, Video, 
+  Info, Smile, Paperclip, X, CheckCheck, Shield, Sparkles, 
+  Globe, Hash, Calendar, Star, Play, Pause, Check, Volume2, MicOff, CameraOff
+} from 'lucide-react-native';
+import { useNavigation, useFocusEffect } from '@react-navigation/native';
+import * as Haptics from 'expo-haptics';
+
+const SUGGESTIONS = {
+  Software: ['Request escalation to L2', 'Reset work password', 'MFA verified, thank you!', 'Resolved, please close.'],
+  Hardware: ['Order delivery check', 'Report physical damage', 'Schedule diagnostic', 'Resolved!'],
+  Network: ['Latency test ping', 'Reset VPN credentials', 'Firewall bypass request', 'Resolved, thanks!'],
+  Access: ['Update AD permissions', 'MFA code override key', 'Access verified successfully', 'Resolved!'],
+  Default: ['Urgent escalation target', 'Verify SLA breach timer', 'AI suggested resolutions', 'Resolved, thank you!']
+};
 
 const TicketDetailScreen = ({ route }) => {
   const { ticketId } = route.params || {};
+  const navigation = useNavigation();
+  const flatListRef = useRef(null);
+
   const [messages, setMessages] = useState([]);
   const [newMessage, setNewMessage] = useState('');
   const [loading, setLoading] = useState(true);
   const [ticket, setTicket] = useState(null);
-  const navigation = useNavigation();
-  const flatListRef = useRef(null);
+  const [currentUser, setCurrentUser] = useState(null);
+
+  // Simulated call state
+  const [activeCall, setActiveCall] = useState(null); // 'Audio' | 'Video' | null
+  const [callDuration, setCallDuration] = useState(0);
+  const [callStatus, setCallStatus] = useState('Ringing...'); // 'Ringing...' | 'Connected'
+  const callTimerRef = useRef(null);
+
+  // Voice recording simulation state
+  const [isRecording, setIsRecording] = useState(false);
+  const [recordDuration, setRecordDuration] = useState(0);
+  const recordTimerRef = useRef(null);
+
+  // Dialog and emoji reactions state
+  const [showInfoModal, setShowInfoModal] = useState(false);
+  const [reactions, setReactions] = useState({});
+  const [selectedMessageId, setSelectedMessageId] = useState(null);
+
+  // Call options state
+  const [isMuted, setIsMuted] = useState(false);
+  const [isSpeakerOn, setIsSpeakerOn] = useState(true);
+  const [isCameraOff, setIsCameraOff] = useState(false);
+
+  // Voice playback simulation state
+  const [playingVoiceId, setPlayingVoiceId] = useState(null);
+  const [voiceProgress, setVoiceProgress] = useState({});
+  const voicePlayTimerRef = useRef(null);
 
+  // Pulse animation for recording dot
+  const pulseAnim = useRef(new Animated.Value(1)).current;
+  // Recording pulse animation loop
   useEffect(() => {
-    fetchTicketDetails();
-    fetchMessages();
-
-    // Set up real-time subscription for messages
-    const channel = supabase
-      .channel(`ticket_messages:${ticketId}`)
-      .on('postgres_changes', {
-        event: 'INSERT',
-        schema: 'public',
-        table: 'ticket_messages',
-        filter: `ticket_id=eq.${ticketId}`
-      }, (payload) => {
-        setMessages(prev => [...prev, payload.new]);
-      })
-      .subscribe();
-
-    return () => {
-      supabase.removeChannel(channel);
-    };
-  }, [ticketId]);
+    if (isRecording) {
+      Animated.loop(
+        Animated.sequence([
+          Animated.timing(pulseAnim, {
+            toValue: 0.3,
+            duration: 600,
+            useNativeDriver: true,
+          }),
+          Animated.timing(pulseAnim, {
+            toValue: 1,
+            duration: 600,
+            useNativeDriver: true,
+          }),
+        ])
+      ).start();
+    } else {
+      pulseAnim.setValue(1);
+    }
+  }, [isRecording]);
+
+  useFocusEffect(
+    useCallback(() => {
+      let isMounted = true;
+
+      const initialize = async () => {
+        try {
+          if (isMounted) setLoading(true);
+          const { data: { user } } = await supabase.auth.getUser();
+          if (isMounted) setCurrentUser(user);
+          
+          await Promise.all([
+            fetchTicketDetails(),
+            fetchMessages()
+          ]);
+        } catch (err) {
+          console.error("Initialization error:", err);
+        } finally {
+          if (isMounted) setLoading(false);
+        }
+      };
 
+      initialize();
+
+      // Set up real-time subscription for messages
+      const channel = supabase
+        .channel(`ticket_messages_user:${ticketId}`)
+        .on('postgres_changes', {
+          event: 'INSERT',
+          schema: 'public',
+          table: 'ticket_messages',
+          filter: `ticket_id=eq.${ticketId}`
+        }, (payload) => {
+          setMessages(prev => {
+            if (prev.some(m => m.id === payload.new.id)) return prev;
+            return [...prev, payload.new];
+          });
+          setTimeout(() => flatListRef.current?.scrollToEnd({ animated: true }), 150);
+        })
+        .subscribe();
+
+      return () => {
+        isMounted = false;
+        supabase.removeChannel(channel);
+        if (callTimerRef.current) clearInterval(callTimerRef.current);
+        if (recordTimerRef.current) clearInterval(recordTimerRef.current);
+        if (voicePlayTimerRef.current) clearInterval(voicePlayTimerRef.current);
+      };
+    }, [ticketId])
+  );
   const fetchTicketDetails = async () => {
     const { data, error } = await supabase
       .from('tickets')
-      .select('*')
+      .select(`
+        *,
+        assignee:profiles!tickets_assigned_agent_id_fkey(full_name, email, profile_picture)
+      `)
       .eq('id', ticketId)
       .single();
     
-    if (!error) setTicket(data);
+    if (!error) {
+      setTicket(data);
+    } else {
+      // Fallback
+      const { data: fallbackData } = await supabase
+        .from('tickets')
+        .select('*')
+        .eq('id', ticketId)
+        .single();
+      setTicket(fallbackData);
+    }
   };
 
   const fetchMessages = async () => {
@@ -74,11 +173,12 @@ const TicketDetailScreen = ({ route }) => {
     }
   };
 
-  const sendMessage = async () => {
-    if (!newMessage.trim()) return;
+  const sendMessage = async (textToSend = null) => {
+    const messageContent = (textToSend || newMessage).trim();
+    if (!messageContent) return;
 
-    const userMessage = newMessage;
-    setNewMessage('');
+    Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
+    if (!textToSend) setNewMessage('');
 
     try {
       const { data: { user } } = await supabase.auth.getUser();
@@ -90,7 +190,7 @@ const TicketDetailScreen = ({ route }) => {
           ticket_id: ticketId,
           sender_id: user.id,
           sender_name: profile?.full_name || 'User',
-          message: userMessage,
+          message: messageContent,
           sender_role: 'user'
         });
 
@@ -100,171 +200,1004 @@ const TicketDetailScreen = ({ route }) => {
     }
   };
 
+  const handleMicPress = () => {
+    Haptics.notificationAsync(Haptics.NotificationFeedbackType.Warning);
+    Alert.alert(
+      "Voice Telemetry Stream",
+      "Corporate voice message routing is online. Do you want to initialize the voice note recorder?",
+      [
+        { text: "Cancel", style: "cancel" },
+        { 
+          text: "Record Mock", 
+          onPress: () => {
+            Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Heavy);
+            sendMessage("🎤 [Voice telemetry note recorded and routed successfully]");
+          } 
+        }
+      ]
+    );
+  };
+
+  // Dynamic active grey-to-blue checkmark ticks color resolver
+  const getTickColor = (msg) => {
+    if (!msg.created_at) return "#9ca3af"; // local / unsaved
+    
+    // A message gets blue ticks if:
+    // 1. There is an admin or AI reply sent AFTER this message.
+    const hasAdminReply = messages.some(
+      m => m.created_at && 
+           new Date(m.created_at) > new Date(msg.created_at) && 
+           (m.sender_role === 'admin' || m.sender_role === 'ai')
+    );
+    
+    // 2. The ticket is marked as resolved or closed.
+    const isCompleted = ticket?.status === 'resolved' || ticket?.status === 'closed';
+    
+    if (hasAdminReply || isCompleted) {
+      return "#38bdf8"; // WhatsApp Blue tick!
+    }
+    return "#8e8e93"; // WhatsApp Grey double-ticks!
+  };
+
+  const playVoiceNote = (msgId, durationStr) => {
+    Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Medium);
+    if (playingVoiceId === msgId) {
+      setPlayingVoiceId(null);
+      if (voicePlayTimerRef.current) clearInterval(voicePlayTimerRef.current);
+      return;
+    }
+
+    if (voicePlayTimerRef.current) clearInterval(voicePlayTimerRef.current);
+    setPlayingVoiceId(msgId);
+
+    const parts = durationStr.split(':');
+    const totalSecs = parseInt(parts[0] || '0') * 60 + parseInt(parts[1] || '0');
+    let currentSecs = voiceProgress[msgId] ? (voiceProgress[msgId] / 100) * totalSecs : 0;
+
+    voicePlayTimerRef.current = setInterval(() => {
+      currentSecs += 0.25;
+      const percentage = Math.min((currentSecs / totalSecs) * 100, 100);
+      
+      setVoiceProgress(prev => ({
+        ...prev,
+        [msgId]: percentage
+      }));
+
+      if (percentage >= 100) {
+        setPlayingVoiceId(null);
+        clearInterval(voicePlayTimerRef.current);
+        setVoiceProgress(prev => ({
+          ...prev,
+          [msgId]: 0
+        }));
+      }
+    }, 250);
+  };
+
+  const handleCallPress = (type) => {
+    Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success);
+    setActiveCall(type);
+    setCallStatus('Ringing...');
+    setCallDuration(0);
+    setIsMuted(false);
+    setIsCameraOff(false);
+    setIsSpeakerOn(true);
+
+    // Simulate connection after 2 seconds
+    setTimeout(() => {
+      setCallStatus('Connected');
+      callTimerRef.current = setInterval(() => {
+        setCallDuration(prev => prev + 1);
+      }, 1000);
+    }, 2000);
+  };
+
+  const endCall = () => {
+    Haptics.notificationAsync(Haptics.NotificationFeedbackType.Warning);
+    setActiveCall(null);
+    if (callTimerRef.current) {
+      clearInterval(callTimerRef.current);
+    }
+  };
+
+  const startRecording = () => {
+    Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Medium);
+    setIsRecording(true);
+    setRecordDuration(0);
+    recordTimerRef.current = setInterval(() => {
+      setRecordDuration(prev => prev + 1);
+    }, 1000);
+  };
+
+  const stopRecording = (shouldSave = true) => {
+    Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success);
+    setIsRecording(false);
+    if (recordTimerRef.current) {
+      clearInterval(recordTimerRef.current);
+    }
+    if (shouldSave && recordDuration > 0) {
+      sendMessage(`🎤 Voice message (${formatDuration(recordDuration)})`);
+    }
+  };
+
+  const formatDuration = (sec) => {
+    const mins = Math.floor(sec / 60);
+    const secs = sec % 60;
+    return `${mins}:${secs < 10 ? '0' : ''}${secs}`;
+  };
+
+  const handleReactionPress = (msgId, emoji) => {
+    Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Medium);
+    setReactions(prev => ({
+      ...prev,
+      [msgId]: prev[msgId] === emoji ? null : emoji
+    }));
+    setSelectedMessageId(null);
+  };
+
+  // Group messages dynamically by Date Separator Bars (TODAY / YESTERDAY / Date)
+  const getGroupedMessages = useCallback(() => {
+    const grouped = [];
+    let lastDateStr = null;
+
+    messages.forEach((msg) => {
+      if (!msg.created_at) return;
+      const date = new Date(msg.created_at);
+      const dateStr = date.toDateString();
+
+      if (dateStr !== lastDateStr) {
+        let label = date.toLocaleDateString(undefined, { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' });
+        const today = new Date().toDateString();
+        const yesterday = new Date(Date.now() - 86400000).toDateString();
+        if (dateStr === today) {
+          label = 'TODAY';
+        } else if (dateStr === yesterday) {
+          label = 'YESTERDAY';
+        }
+        grouped.push({ id: `date-${dateStr}`, isDateSeparator: true, text: label });
+        lastDateStr = dateStr;
+      }
+      grouped.push(msg);
+    });
+
+    return grouped;
+  }, [messages]);
+
   const renderMessage = ({ item }) => {
+    if (item.isDateSeparator) {
+      return (
+        <View style={styles.dateSeparator}>
+          <View style={styles.dateSeparatorLine} />
+          <View style={styles.dateSeparatorBadge}>
+            <Text style={styles.dateSeparatorText}>{item.text}</Text>
+          </View>
+          <View style={styles.dateSeparatorLine} />
+        </View>
+      );
+    }
+
     const isUser = item.sender_role === 'user';
-    const isAI = item.sender_role === 'ai';
+    const isAI = item.sender_role === 'ai' || item.sender_id === '00000000-0000-0000-0000-000000000000';
+    const messageReaction = reactions[item.id];
+    const isOverlayActive = selectedMessageId === item.id;
 
     return (
-      <View style={[
-        styles.messageBubble,
-        isUser ? styles.userBubble : styles.adminBubble,
-        isAI && styles.aiBubble
-      ]}>
-        {!isUser && (
-          <View style={styles.senderHeader}>
-            {isAI ? <Bot size={14} color={COLORS.primary} /> : <User size={14} color={COLORS.textLight} />}
-            <Text style={styles.senderName}>{isAI ? 'AI Assistant' : item.sender_name || 'Support'}</Text>
+      <View style={styles.bubbleRow}>
+        <TouchableOpacity
+          onLongPress={() => {
+            Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Medium);
+            setSelectedMessageId(item.id);
+          }}
+          onPress={() => {
+            if (selectedMessageId) setSelectedMessageId(null);
+          }}
+          activeOpacity={0.9}
+          style={[
+            styles.messageBubble,
+            isUser ? styles.userBubble : styles.adminBubble,
+            isAI && styles.aiBubble,
+            messageReaction && { marginBottom: 24 } // Extra spacing for reactions
+          ]}
+        >
+          {/* Bubble Tail */}
+          <View style={[styles.bubbleTail, isUser ? styles.userBubbleTail : styles.adminBubbleTail]} />
+
+          {!isUser && (
+            <View style={styles.senderHeader}>
+              {isAI ? <Bot size={13} color="#8b5cf6" /> : <User size={13} color={COLORS.textLight} />}
+              <Text style={[styles.senderName, isAI && { color: '#8b5cf6' }]}>
+                {isAI ? 'AI Assistant' : item.sender_name || 'Support'}
+              </Text>
+            </View>
+          )}
+
+          {(() => {
+            const isVoiceNote = item.message && item.message.startsWith('🎤 Voice message');
+            let voiceDuration = "0:00";
+            if (isVoiceNote) {
+              const match = item.message.match(/\((.*?)\)/);
+              if (match) voiceDuration = match[1];
+            }
+            if (isVoiceNote) {
+              return (
+                <View style={styles.voiceNoteContainer}>
+                  <TouchableOpacity
+                    onPress={() => playVoiceNote(item.id, voiceDuration)}
+                    style={styles.voicePlayBtn}
+                  >
+                    {playingVoiceId === item.id ? (
+                      <Pause size={16} color={isUser ? '#075e54' : COLORS.primary} fill={isUser ? '#075e54' : COLORS.primary} />
+                    ) : (
+                      <Play size={16} color={isUser ? '#075e54' : COLORS.primary} fill={isUser ? '#075e54' : COLORS.primary} />
+                    )}
+                  </TouchableOpacity>
+                  
+                  <View style={styles.voiceWaveContainer}>
+                    <View style={styles.voiceWaveform}>
+                      {[8, 14, 18, 10, 6, 12, 20, 14, 10, 16, 22, 12, 8, 14, 18, 10, 6, 12, 16, 8].map((barHeight, idx) => {
+                        const barProgress = (idx / 20) * 100;
+                        const isPlayed = (voiceProgress[item.id] || 0) >= barProgress;
+                        return (
+                          <View
+                            key={idx}
+                            style={[
+                              styles.voiceWaveBar,
+                              { 
+                                height: barHeight, 
+                                backgroundColor: isPlayed 
+                                  ? (isUser ? '#075e54' : COLORS.primary) 
+                                  : (isUser ? 'rgba(0,0,0,0.15)' : 'rgba(0,0,0,0.1)') 
+                              }
+                            ]}
+                          />
+                        );
+                      })}
+                    </View>
+                    <View style={styles.voiceProgressTextRow}>
+                      <Text style={styles.voiceDurationText}>
+                        {playingVoiceId === item.id 
+                          ? formatDuration(Math.round(((voiceProgress[item.id] || 0) / 100) * (parseInt(voiceDuration.split(':')[0] || '0') * 60 + parseInt(voiceDuration.split(':')[1] || '0'))))
+                          : voiceDuration
+                        }
+                      </Text>
+                    </View>
+                  </View>
+                </View>
+              );
+            }
+            return (
+              <Text style={[styles.messageText, isUser && styles.userMessageText]}>
+                {item.message}
+              </Text>
+            );
+          })()}
+
+          <View style={styles.bubbleFooter}>
+            <Text style={[styles.messageTime, isUser && styles.userTimeText]}>
+              {item.created_at 
+                ? new Date(item.created_at).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
+                : new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
+              }
+            </Text>
+            {isUser && (
+              item.created_at ? (
+                <CheckCheck size={14} color={getTickColor(item)} style={{ marginLeft: 4 }} />
+              ) : (
+                <Check size={14} color="#9ca3af" style={{ marginLeft: 4 }} />
+              )
+            )}
+          </View>
+
+          {/* Floating Emoji Badge */}
+          {messageReaction && (
+            <View style={[styles.reactionBadge, isUser ? styles.userReaction : styles.adminReaction]}>
+              <Text style={styles.reactionText}>{messageReaction}</Text>
+            </View>
+          )}
+        </TouchableOpacity>
+
+        {/* Instagram style popover emoji bar */}
+        {isOverlayActive && (
+          <View style={[styles.reactionOverlay, isUser ? styles.alignRightOverlay : styles.alignLeftOverlay]}>
+            {['❤️', '👍', '😂', '😮', '😢', '🙏'].map(emoji => (
+              <TouchableOpacity 
+                key={emoji} 
+                style={styles.reactionOption}
+                onPress={() => handleReactionPress(item.id, emoji)}
+              >
+                <Text style={styles.reactionOptionText}>{emoji}</Text>
+              </TouchableOpacity>
+            ))}
+            <TouchableOpacity onPress={() => setSelectedMessageId(null)} style={styles.closeOverlayBtn}>
+              <X size={14} color={COLORS.textMuted} />
+            </TouchableOpacity>
           </View>
         )}
-        <Text style={[styles.messageText, isUser && styles.userMessageText]}>
-          {item.message}
-        </Text>
-        <Text style={[styles.messageTime, isUser && styles.userTimeText]}>
-          {new Date(item.created_at).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
-        </Text>
       </View>
     );
   };
 
+  const activeCategory = ticket?.category || 'Default';
+  const sugList = SUGGESTIONS[activeCategory] || SUGGESTIONS.Default;
+  const isUserTyping = newMessage.trim().length > 0;
+  const assigneeName = ticket?.assignee?.full_name || 'AI Helpdesk Support';
+
+  const getStatusColor = (status) => {
+    const s = (status || '').toLowerCase().trim();
+    if (s === 'open') return '#3b82f6';
+    if (s === 'in progress' || s === 'in_progress') return '#f59e0b';
+    if (s === 'resolved') return '#10b981';
+    if (s === 'closed') return '#6b7280';
+    return '#ef4444'; // critical or default
+  };
+  const statusColor = getStatusColor(ticket?.status);
+
   return (
-    <SafeAreaView style={styles.container}>
+    <SafeAreaView style={styles.container} edges={['top']}>
+      <StatusBar barStyle="dark-content" />
+
+      {/* Header (WhatsApp Profile Action bar style) */}
       <View style={styles.header}>
         <TouchableOpacity onPress={() => navigation.goBack()} style={styles.backBtn}>
           <ArrowLeft size={24} color={COLORS.text} />
         </TouchableOpacity>
-        <View style={styles.headerContent}>
-          <Text style={styles.headerTitle} numberOfLines={1}>
-            {ticket?.subject || 'Ticket Details'}
-          </Text>
-          <Text style={styles.headerSubtitle}>#{ticketId?.slice(0, 8).toUpperCase()}</Text>
+
+        <TouchableOpacity 
+          style={styles.headerInfoTouch}
+          onPress={() => setShowInfoModal(true)}
+          activeOpacity={0.7}
+        >
+          <View style={styles.avatar}>
+            <Text style={styles.avatarText}>{assigneeName[0].toUpperCase()}</Text>
+          </View>
+          <View style={styles.headerContent}>
+            <Text style={styles.headerTitle} numberOfLines={1}>
+              {assigneeName}
+            </Text>
+            <View style={styles.statusRow}>
+              <View style={styles.pulseDot} />
+              <Text style={styles.statusText}>active sync</Text>
+            </View>
+          </View>
+        </TouchableOpacity>
+
+        <View style={styles.headerActions}>
+          <TouchableOpacity onPress={() => handleCallPress('Audio')} style={styles.headerActionBtn}>
+            <Phone size={20} color={COLORS.text} />
+          </TouchableOpacity>
+          <TouchableOpacity onPress={() => handleCallPress('Video')} style={styles.headerActionBtn}>
+            <Video size={20} color={COLORS.text} />
+          </TouchableOpacity>
+          <TouchableOpacity onPress={() => setShowInfoModal(true)} style={styles.headerActionBtn}>
+            <Info size={20} color={COLORS.text} />
+          </TouchableOpacity>
         </View>
       </View>
 
-      <KeyboardAvoidingView
-        behavior={Platform.OS === 'ios' ? 'padding' : undefined}
-        style={{ flex: 1 }}
-        keyboardVerticalOffset={Platform.OS === 'ios' ? 0 : 0}
-      >
-        {loading ? (
-          <View style={styles.loadingContainer}>
-            <ActivityIndicator size="large" color={COLORS.primary} />
+      {/* WhatsApp Wallpaper container */}
+      <View style={styles.wallpaperBg}>
+        {/* Subtle grid elements mock doodle wallpaper */}
+        <View style={styles.gridOverlay} />
+
+        <KeyboardAvoidingView
+          behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+          style={{ flex: 1 }}
+          keyboardVerticalOffset={Platform.OS === 'ios' ? 90 : 80}
+        >
+          {loading ? (
+            <View style={styles.loadingContainer}>
+              <ActivityIndicator size="large" color={COLORS.primary} />
+            </View>
+          ) : (
+            <FlatList
+              ref={flatListRef}
+              data={getGroupedMessages()}
+              keyExtractor={(item) => item.id}
+              renderItem={renderMessage}
+              contentContainerStyle={styles.messagesList}
+              showsVerticalScrollIndicator={false}
+              onContentSizeChange={() => flatListRef.current?.scrollToEnd({ animated: true })}
+              ListEmptyComponent={
+                <View style={styles.emptyContainer}>
+                  <Text style={styles.emptyText}>Conversation initiated. Send a security report or resolution inquiry.</Text>
+                </View>
+              }
+            />
+          )}
+
+          {/* Quick suggestions scroll pills */}
+          {!loading && sugList.length > 0 && (
+            <View style={styles.suggestionsContainer}>
+              <FlatList
+                data={sugList}
+                horizontal
+                showsHorizontalScrollIndicator={false}
+                contentContainerStyle={styles.suggestionsScroll}
+                keyExtractor={(item, index) => String(index)}
+                renderItem={({ item }) => (
+                  <TouchableOpacity
+                    style={styles.suggestionPill}
+                    onPress={() => sendMessage(item)}
+                  >
+                    <Text style={styles.suggestionText}>{item}</Text>
+                  </TouchableOpacity>
+                )}
+              />
+            </View>
+          )}
+
+          {/* Input container footer */}
+          <View style={styles.inputContainer}>
+            {isRecording ? (
+              <View style={styles.recordingCard}>
+                <Animated.View style={[styles.pulseRecDot, { opacity: pulseAnim }]} />
+                <Text style={styles.recordingTimerText}>Recording {formatDuration(recordDuration)}</Text>
+                <TouchableOpacity onPress={() => stopRecording(false)} style={styles.cancelRecBtn}>
+                  <Text style={styles.cancelRecText}>Cancel</Text>
+                </TouchableOpacity>
+                <TouchableOpacity onPress={() => stopRecording(true)} style={styles.sendRecBtn}>
+                  <Send size={18} color={COLORS.primary} />
+                </TouchableOpacity>
+              </View>
+            ) : (
+              <View style={styles.inputCard}>
+                <TouchableOpacity style={styles.inputIconBtn}>
+                  <Smile size={22} color={COLORS.textMuted} />
+                </TouchableOpacity>
+                
+                <TextInput
+                  style={styles.input}
+                  placeholder="Type your reply..."
+                  placeholderTextColor="rgba(0,0,0,0.3)"
+                  value={newMessage}
+                  onChangeText={setNewMessage}
+                  multiline
+                />
+
+                <TouchableOpacity style={styles.inputIconBtn}>
+                  <Paperclip size={20} color={COLORS.textMuted} />
+                </TouchableOpacity>
+              </View>
+            )}
+
+            {/* Dynamic Action Button WhatsApp feel */}
+            {!isRecording && (
+              isUserTyping ? (
+                <TouchableOpacity 
+                  style={styles.actionBtn} 
+                  onPress={() => sendMessage()}
+                  activeOpacity={0.8}
+                >
+                  <Send size={20} color="#fff" />
+                </TouchableOpacity>
+              ) : (
+                <TouchableOpacity 
+                  style={[styles.actionBtn, { backgroundColor: COLORS.primary }]} 
+                  onPress={startRecording}
+                  activeOpacity={0.8}
+                >
+                  <Mic size={20} color="#fff" />
+                </TouchableOpacity>
+              )
+            )}
           </View>
-        ) : (
-          <FlatList
-            ref={flatListRef}
-            data={messages}
-            keyExtractor={(item) => item.id}
-            renderItem={renderMessage}
-            contentContainerStyle={styles.messagesList}
-            onContentSizeChange={() => flatListRef.current?.scrollToEnd({ animated: true })}
-            ListEmptyComponent={
-              <View style={styles.emptyContainer}>
-                <Text style={styles.emptyText}>No messages yet. Send a message to start the conversation.</Text>
+        </KeyboardAvoidingView>
+      </View>
+
+      {/* Info Sheets Modal Overlay */}
+      <Modal
+        visible={showInfoModal}
+        transparent
+        animationType="slide"
+        onRequestClose={() => setShowInfoModal(false)}
+      >
+        <View style={styles.modalOverlay}>
+          <View style={styles.modalSheet}>
+            <View style={styles.modalSheetHeader}>
+              <View style={{ flexDirection: 'row', alignItems: 'center', gap: 12 }}>
+                <View style={[styles.avatar, { width: 44, height: 44 }]}>
+                  <Text style={styles.avatarText}>{assigneeName[0].toUpperCase()}</Text>
+                </View>
+                <View>
+                  <Text style={styles.modalSheetTitle} numberOfLines={1}>{ticket?.subject || 'Ticket Details'}</Text>
+                  <Text style={styles.modalSheetSubtitle}>#{ticketId?.slice(0, 8).toUpperCase()}</Text>
+                </View>
               </View>
-            }
-          />
-        )}
+              <TouchableOpacity onPress={() => setShowInfoModal(false)} style={styles.closeBtn}>
+                <X size={20} color={COLORS.textLight} />
+              </TouchableOpacity>
+            </View>
 
-        <View style={styles.inputContainer}>
-          <TextInput
-            style={styles.input}
-            placeholder="Type a message..."
-            value={newMessage}
-            onChangeText={setNewMessage}
-            multiline
-          />
-          <TouchableOpacity 
-            style={[styles.sendBtn, !newMessage.trim() && styles.sendBtnDisabled]} 
-            onPress={sendMessage}
-            disabled={!newMessage.trim()}
-          >
-            <Send size={20} color={COLORS.white} />
-          </TouchableOpacity>
+            <ScrollView contentContainerStyle={styles.modalSheetBody} showsVerticalScrollIndicator={false}>
+              
+              {/* Image Evidence (if exists) */}
+              {(ticket?.image_url || ticket?.metadata?.capturedFileBase64) && (
+                <View style={styles.modalSection}>
+                  <Text style={styles.sectionTitle}>VISUAL TELEMETRY EVIDENCE</Text>
+                  <View style={styles.imageWrap}>
+                    <Image 
+                      source={{ uri: ticket.image_url || ticket.metadata.capturedFileBase64 }} 
+                      style={styles.modalImage}
+                      resizeMode="cover"
+                    />
+                  </View>
+                </View>
+              )}
+
+              <Text style={styles.sectionTitle}>INCIDENT PARAMETERS</Text>
+              
+              <View style={styles.metaCard}>
+                <View style={styles.metaRow}>
+                  <Hash size={14} color={COLORS.textMuted} />
+                  <View style={{ flex: 1 }}>
+                    <Text style={styles.metaLabel}>TICKET STATUS</Text>
+                    <Text style={[styles.metaValue, { color: statusColor, fontWeight: '900' }]}>
+                      {(ticket?.status || 'PENDING').toUpperCase()}
+                    </Text>
+                  </View>
+                </View>
+
+                <View style={styles.metaRow}>
+                  <Shield size={14} color={COLORS.textMuted} />
+                  <View style={{ flex: 1 }}>
+                    <Text style={styles.metaLabel}>PRIORITY SCALE</Text>
+                    <Text style={[styles.metaValue, { color: ticket?.priority?.toLowerCase() === 'critical' ? '#ef4444' : '#15803d' }]}>
+                      {(ticket?.priority || 'Medium').toUpperCase()}
+                    </Text>
+                  </View>
+                </View>
+
+                <View style={[styles.metaRow, { borderBottomWidth: 0 }]}>
+                  <Calendar size={14} color={COLORS.textMuted} />
+                  <View style={{ flex: 1 }}>
+                    <Text style={styles.metaLabel}>REPORTED TIMESTAMP</Text>
+                    <Text style={styles.metaValue}>
+                      {ticket?.created_at ? new Date(ticket.created_at).toLocaleString() : '—'}
+                    </Text>
+                  </View>
+                </View>
+              </View>
+
+              <Text style={styles.sectionTitle}>AI CLASSIFICATIONS</Text>
+              
+              <View style={styles.aiTelemetryCard}>
+                <View style={styles.aiTelemetryHeader}>
+                  <Sparkles size={16} color="#8b5cf6" />
+                  <Text style={styles.aiTelemetryTitle}>RAG Neural Telemetry</Text>
+                </View>
+                <View style={styles.telemetryRow}>
+                  <Text style={styles.telemetryLabel}>Predicted Category</Text>
+                  <Text style={styles.telemetryValue}>{ticket?.category || 'General'}</Text>
+                </View>
+                <View style={styles.telemetryRow}>
+                  <Text style={styles.telemetryLabel}>Sub-Category</Text>
+                  <Text style={styles.telemetryValue}>{ticket?.subcategory || 'General Inquiry'}</Text>
+                </View>
+                <View style={[styles.telemetryRow, { borderBottomWidth: 0, paddingBottom: 0 }]}>
+                  <Text style={styles.telemetryLabel}>RAG Match Score</Text>
+                  <Text style={[styles.telemetryValue, { color: '#8b5cf6', fontWeight: '955' }]}>
+                    {((ticket?.confidence || 0.85) * 100).toFixed(0)}% Accuracy
+                  </Text>
+                </View>
+              </View>
+
+              <Text style={styles.sectionTitle}>ENVIRONMENT SIGNATURE</Text>
+              
+              <View style={styles.metaCard}>
+                <View style={styles.metaRow}>
+                  <Globe size={14} color={COLORS.textMuted} />
+                  <View style={{ flex: 1 }}>
+                    <Text style={styles.metaLabel}>IP ADDRESS</Text>
+                    <Text style={styles.metaValue}>{ticket?.metadata?.env_metadata?.ip || '127.0.0.1'}</Text>
+                  </View>
+                </View>
+                <View style={[styles.metaRow, { borderBottomWidth: 0, paddingBottom: 0 }]}>
+                  <Bot size={14} color={COLORS.textMuted} />
+                  <View style={{ flex: 1 }}>
+                    <Text style={styles.metaLabel}>USER CLIENT SIGNATURE</Text>
+                    <Text style={[styles.metaValue, { fontSize: 11, lineHeight: 14 }]} numberOfLines={2}>
+                      {ticket?.metadata?.env_metadata?.user_agent || 'Neural Mobile Client'}
+                    </Text>
+                  </View>
+                </View>
+              </View>
+
+            </ScrollView>
+          </View>
         </View>
-      </KeyboardAvoidingView>
+      </Modal>
+
+      {/* Premium WhatsApp simulated calling overlay */}
+      <Modal
+        visible={!!activeCall}
+        animationType="slide"
+        transparent={false}
+        onRequestClose={endCall}
+      >
+        <View style={styles.callScreenContainer}>
+          <StatusBar barStyle="light-content" />
+          <View style={styles.callScreenHeader}>
+            <Shield size={16} color="rgba(255,255,255,0.4)" />
+            <Text style={styles.secureCallText}>SECURE END-TO-END ENCRYPTED</Text>
+          </View>
+
+          <View style={styles.callScreenInfo}>
+            <View style={styles.callAvatarWrap}>
+              <Text style={styles.callAvatarText}>{assigneeName[0].toUpperCase()}</Text>
+            </View>
+            <Text style={styles.callContactName}>{assigneeName}</Text>
+            <Text style={styles.callStatusLabel}>
+              {callStatus === 'Connected' ? formatDuration(callDuration) : callStatus}
+            </Text>
+          </View>
+
+          {/* Video mock view */}
+          {activeCall === 'Video' && (
+            <View style={styles.videoMockContainer}>
+              <View style={styles.selfVideoMock} />
+            </View>
+          )}
+
+          <View style={styles.callScreenControls}>
+            <TouchableOpacity 
+              style={[styles.callControlBtn, isMuted && styles.activeControlBtn]}
+              onPress={() => {
+                Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
+                setIsMuted(!isMuted);
+              }}
+            >
+              {isMuted ? <MicOff size={24} color={COLORS.primary} /> : <Mic size={24} color="#ffffff" />}
+            </TouchableOpacity>
+            
+            <TouchableOpacity 
+              style={[styles.callControlBtn, { backgroundColor: '#ef4444' }]} 
+              onPress={endCall}
+            >
+              <Phone size={24} color="#ffffff" style={{ transform: [{ rotate: '135deg' }] }} />
+            </TouchableOpacity>
+
+            <TouchableOpacity 
+              style={[styles.callControlBtn, isSpeakerOn && styles.activeControlBtn]}
+              onPress={() => {
+                Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
+                setIsSpeakerOn(!isSpeakerOn);
+              }}
+            >
+              <Volume2 size={24} color={isSpeakerOn ? COLORS.primary : "#ffffff"} />
+            </TouchableOpacity>
+          </View>
+        </View>
+      </Modal>
+
     </SafeAreaView>
   );
 };
 
 const styles = StyleSheet.create({
-  container: { flex: 1, backgroundColor: COLORS.background },
+  container: { flex: 1, backgroundColor: '#ffffff' },
+  
+  // Header Style WhatsApp
   header: {
     flexDirection: 'row',
     alignItems: 'center',
-    paddingHorizontal: 16,
-    paddingVertical: 12,
-    backgroundColor: COLORS.white,
+    paddingHorizontal: 10,
+    height: 60,
+    backgroundColor: '#fff',
     borderBottomWidth: 1,
-    borderBottomColor: COLORS.border,
+    borderBottomColor: '#f1f1f1',
+    elevation: 3,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 1 },
+    shadowOpacity: 0.08,
+    shadowRadius: 10,
+    zIndex: 999
+  },
+  backBtn: { padding: 6 },
+  headerInfoTouch: { flex: 1, flexDirection: 'row', alignItems: 'center', marginHorizontal: 4 },
+  avatar: { 
+    width: 38, 
+    height: 38, 
+    borderRadius: 19, 
+    backgroundColor: COLORS.primary, 
+    justifyContent: 'center', 
+    alignItems: 'center',
+    marginRight: 10,
     ...SHADOWS.soft
   },
-  backBtn: { padding: 8, marginRight: 8 },
-  headerContent: { flex: 1 },
-  headerTitle: { fontSize: 18, fontWeight: '800', color: COLORS.text },
-  headerSubtitle: { fontSize: 12, color: COLORS.textMuted, fontWeight: '600' },
+  avatarText: { fontSize: 16, fontWeight: '900', color: '#fff' },
+  headerContent: { flex: 1, gap: 1 },
+  headerTitle: { fontSize: 16, fontWeight: '900', color: COLORS.text, letterSpacing: -0.2 },
+  statusRow: { flexDirection: 'row', alignItems: 'center', gap: 5 },
+  pulseDot: { width: 5, height: 5, borderRadius: 2.5, backgroundColor: '#22c55e' },
+  statusText: { fontSize: 10, fontWeight: '700', color: '#15803d', textTransform: 'uppercase' },
+
+  headerActions: { flexDirection: 'row', alignItems: 'center' },
+  headerActionBtn: { padding: 10 },
+
+  // WhatsApp Doodle Wallpaper Background
+  wallpaperBg: { flex: 1, backgroundColor: '#efeae2', position: 'relative' },
+  gridOverlay: { position: 'absolute', top: 0, bottom: 0, left: 0, right: 0, opacity: 0.015, backgroundColor: 'transparent', borderWidth: 0.5, borderColor: '#000' },
+  
   loadingContainer: { flex: 1, justifyContent: 'center', alignItems: 'center' },
-  messagesList: { padding: 16, paddingBottom: 32 },
+  messagesList: { padding: 16, paddingBottom: 20 },
+
+  // Group Separator Date Headers
+  dateSeparator: { flexDirection: 'row', alignItems: 'center', marginVertical: 14, paddingHorizontal: 10 },
+  dateSeparatorLine: { flex: 1, height: 1, backgroundColor: 'rgba(0,0,0,0.06)' },
+  dateSeparatorBadge: { backgroundColor: 'rgba(255,255,255,0.85)', paddingHorizontal: 12, paddingVertical: 5, borderRadius: 8, marginHorizontal: 12, ...SHADOWS.soft },
+  dateSeparatorText: { fontSize: 9.5, fontWeight: '800', color: COLORS.textLight, letterSpacing: 0.5, textTransform: 'uppercase' },
+
+  bubbleRow: { position: 'relative' },
+
+  // Message Speech Bubble curved style
   messageBubble: {
-    maxWidth: '85%',
-    padding: 12,
-    borderRadius: 20,
-    marginBottom: 16,
+    maxWidth: '80%',
+    paddingHorizontal: 14,
+    paddingVertical: 9,
+    borderRadius: 16,
+    marginBottom: 12,
+    position: 'relative',
     ...SHADOWS.soft
   },
+  bubbleTail: { position: 'absolute', top: 0, width: 8, height: 10, backgroundColor: 'transparent' },
+  userBubbleTail: { right: -6, borderTopLeftRadius: 0, borderTopColor: COLORS.primary, borderLeftWidth: 6, borderLeftColor: COLORS.primary, borderBottomRightRadius: 6, borderBottomWidth: 6, borderBottomColor: 'transparent' },
+  adminBubbleTail: { left: -6, borderTopRightRadius: 0, borderTopColor: '#fff', borderRightWidth: 6, borderRightColor: '#fff', borderBottomLeftRadius: 6, borderBottomWidth: 6, borderBottomColor: 'transparent' },
+
   userBubble: {
     alignSelf: 'flex-end',
-    backgroundColor: COLORS.primary,
-    borderBottomRightRadius: 4
+    backgroundColor: '#d9fdd3', // Premium WhatsApp green bubble hex!
+    borderTopRightRadius: 0
   },
   adminBubble: {
     alignSelf: 'flex-start',
-    backgroundColor: COLORS.white,
-    borderBottomLeftRadius: 4,
+    backgroundColor: '#ffffff', // Premium WhatsApp white bubble hex!
+    borderTopLeftRadius: 0,
     borderWidth: 1,
-    borderColor: 'rgba(0,0,0,0.05)'
+    borderColor: 'rgba(0,0,0,0.02)'
   },
   aiBubble: {
-    borderColor: COLORS.primaryLight,
-    borderWidth: 1,
-    backgroundColor: COLORS.primaryLight + '20'
+    backgroundColor: '#f5f0ff',
+    borderColor: '#dcd0ff',
+    borderWidth: 1
   },
   senderHeader: { flexDirection: 'row', alignItems: 'center', marginBottom: 4, gap: 4 },
-  senderName: { fontSize: 10, fontWeight: '700', color: COLORS.textMuted },
-  messageText: { fontSize: 15, color: COLORS.text, lineHeight: 20 },
-  userMessageText: { color: COLORS.white },
-  messageTime: { fontSize: 10, color: COLORS.textMuted, marginTop: 4, alignSelf: 'flex-end' },
-  userTimeText: { color: 'rgba(255,255,255,0.7)' },
+  senderName: { fontSize: 10, fontWeight: '800', color: COLORS.textMuted },
+  messageText: { fontSize: 14.5, color: '#303030', lineHeight: 20, fontWeight: '500' },
+  userMessageText: { color: '#303030' },
+  
+  bubbleFooter: { flexDirection: 'row', alignItems: 'center', alignSelf: 'flex-end', marginTop: 4 },
+  messageTime: { fontSize: 9.5, color: COLORS.textMuted, fontWeight: '600' },
+  userTimeText: { color: COLORS.textMuted },
+
+  // Emoji Reactions badges
+  reactionBadge: {
+    position: 'absolute',
+    bottom: -14,
+    width: 22,
+    height: 22,
+    borderRadius: 11,
+    backgroundColor: '#fff',
+    borderWidth: 1,
+    borderColor: 'rgba(0,0,0,0.08)',
+    justifyContent: 'center',
+    alignItems: 'center',
+    zIndex: 99,
+    ...SHADOWS.soft
+  },
+  userReaction: { right: 8 },
+  adminReaction: { left: 8 },
+  reactionText: { fontSize: 12 },
+
+  // Instagram Style Reaction popover overlay
+  reactionOverlay: {
+    position: 'absolute',
+    top: -50,
+    flexDirection: 'row',
+    alignItems: 'center',
+    backgroundColor: '#fff',
+    padding: 6,
+    borderRadius: 100,
+    borderWidth: 1,
+    borderColor: 'rgba(0,0,0,0.08)',
+    zIndex: 9999,
+    gap: 8,
+    ...SHADOWS.soft
+  },
+  alignRightOverlay: { right: 10 },
+  alignLeftOverlay: { left: 10 },
+  reactionOption: { padding: 4 },
+  reactionOptionText: { fontSize: 20 },
+  closeOverlayBtn: { width: 22, height: 22, borderRadius: 11, backgroundColor: '#f3f4f6', justifyContent: 'center', alignItems: 'center', marginLeft: 4 },
+
+  // Suggestions scroll pills
+  suggestionsContainer: { backgroundColor: 'transparent', paddingVertical: 8, zIndex: 10 },
+  suggestionsScroll: { paddingHorizontal: 16, gap: 8 },
+  suggestionPill: { 
+    backgroundColor: '#fff', 
+    paddingHorizontal: 14, 
+    paddingVertical: 8, 
+    borderRadius: 100, 
+    borderWidth: 1.5, 
+    borderColor: '#e5e7eb',
+    ...SHADOWS.soft 
+  },
+  suggestionText: { fontSize: 12, fontWeight: '700', color: COLORS.textLight },
+
+  // Premium input containers
   inputContainer: {
     flexDirection: 'row',
     alignItems: 'center',
-    padding: 12,
-    backgroundColor: COLORS.white,
-    borderTopWidth: 1,
-    borderTopColor: COLORS.border,
-    paddingBottom: Platform.OS === 'ios' ? 30 : 12
+    padding: 10,
+    backgroundColor: 'transparent',
+    gap: 8,
+    paddingBottom: Platform.OS === 'ios' ? 24 : 10
+  },
+  inputCard: {
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+    backgroundColor: '#fff',
+    borderRadius: 25,
+    paddingHorizontal: 12,
+    height: 48,
+    ...SHADOWS.soft
   },
+  inputIconBtn: { padding: 8 },
   input: {
     flex: 1,
-    backgroundColor: COLORS.background,
-    borderRadius: 24,
-    paddingHorizontal: 16,
-    paddingVertical: 8,
-    maxHeight: 100,
     fontSize: 15,
-    marginRight: 8
+    fontWeight: '600',
+    color: COLORS.text,
+    paddingHorizontal: 6,
+    maxHeight: 80
   },
-  sendBtn: {
-    width: 44,
-    height: 44,
-    borderRadius: 22,
+  actionBtn: {
+    width: 48,
+    height: 48,
+    borderRadius: 24,
     backgroundColor: COLORS.primary,
     justifyContent: 'center',
     alignItems: 'center',
-    ...SHADOWS.medium
+    ...SHADOWS.medium,
+    shadowColor: COLORS.primary
   },
-  sendBtnDisabled: { backgroundColor: COLORS.textMuted, elevation: 0 },
+
   emptyContainer: { flex: 1, justifyContent: 'center', alignItems: 'center', marginTop: 100 },
-  emptyText: { textAlign: 'center', color: COLORS.textMuted, fontSize: 14 }
+  emptyText: { textAlign: 'center', color: COLORS.textMuted, fontSize: 13.5, fontWeight: '600', paddingHorizontal: 40 },
+
+  // Sliding sheet modal info styles
+  modalOverlay: { flex: 1, backgroundColor: 'rgba(0,0,0,0.5)', justifyContent: 'flex-end' },
+  modalSheet: { 
+    backgroundColor: '#fff', 
+    borderTopLeftRadius: 32, 
+    borderTopRightRadius: 32, 
+    padding: 24, 
+    maxHeight: '80%',
+    ...SHADOWS.soft 
+  },
+  modalSheetHeader: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', paddingBottom: 16, borderBottomWidth: 1, borderBottomColor: 'rgba(0,0,0,0.05)', marginBottom: 20 },
+  modalSheetTitle: { fontSize: 16, fontWeight: '950', color: COLORS.text, maxWidth: 200 },
+  modalSheetSubtitle: { fontSize: 11, fontWeight: '700', color: COLORS.textMuted, marginTop: 2 },
+  closeBtn: { width: 36, height: 36, borderRadius: 18, backgroundColor: '#f3f4f6', justifyContent: 'center', alignItems: 'center' },
+
+  modalSheetBody: { gap: 18, paddingBottom: 32 },
+  sectionTitle: { fontSize: 10.5, fontWeight: '800', color: COLORS.textMuted, letterSpacing: 1.2 },
+
+  modalSection: {},
+  imageWrap: { borderRadius: 16, overflow: 'hidden', height: 180, backgroundColor: '#f3f4f6', borderWidth: 1, borderColor: 'rgba(0,0,0,0.05)' },
+  modalImage: { width: '100%', height: '100%' },
+
+  metaCard: { backgroundColor: '#f8faf9', borderRadius: 20, paddingHorizontal: 16, paddingVertical: 4, borderWidth: 1, borderColor: 'rgba(0,0,0,0.03)' },
+  metaRow: { flexDirection: 'row', alignItems: 'center', gap: 12, paddingVertical: 12, borderBottomWidth: 1, borderBottomColor: 'rgba(0,0,0,0.04)' },
+  metaLabel: { fontSize: 9.5, fontWeight: '800', color: COLORS.textMuted, letterSpacing: 0.5 },
+  metaValue: { fontSize: 12.5, fontWeight: '700', color: COLORS.text, marginTop: 2 },
+
+  // AI Insights
+  aiTelemetryCard: { backgroundColor: '#f5f0ff', borderWidth: 1.5, borderColor: '#dcd0ff', borderRadius: 20, padding: 16 },
+  aiTelemetryHeader: { flexDirection: 'row', alignItems: 'center', gap: 8, marginBottom: 12 },
+  aiTelemetryTitle: { fontSize: 12, fontWeight: '900', color: '#8b5cf6', textTransform: 'uppercase', letterSpacing: 0.5 },
+  telemetryRow: { flexDirection: 'row', justifyContent: 'space-between', paddingVertical: 8, borderBottomWidth: 1, borderBottomColor: 'rgba(139,92,246,0.1)' },
+  telemetryLabel: { fontSize: 12, fontWeight: '600', color: COLORS.textLight },
+  telemetryValue: { fontSize: 12, fontWeight: '800', color: COLORS.text },
+
+  // Simulated calling style sheet
+  callScreenContainer: { flex: 1, backgroundColor: '#07121e', justifyContent: 'space-between', paddingVertical: 40, paddingHorizontal: 20 },
+  callScreenHeader: { flexDirection: 'row', justifyContent: 'center', alignItems: 'center', gap: 6, opacity: 0.8 },
+  secureCallText: { fontSize: 10, fontWeight: '800', color: 'rgba(255,255,255,0.5)', letterSpacing: 1 },
+  callScreenInfo: { flex: 1, justifyContent: 'center', alignItems: 'center', gap: 14, marginTop: 40 },
+  callAvatarWrap: { width: 120, height: 120, borderRadius: 60, backgroundColor: COLORS.primary, justifyContent: 'center', alignItems: 'center', elevation: 8, ...SHADOWS.medium },
+  callAvatarText: { fontSize: 48, fontWeight: '900', color: '#ffffff' },
+  callContactName: { fontSize: 24, fontWeight: '950', color: '#ffffff', textAlign: 'center' },
+  callStatusLabel: { fontSize: 14, fontWeight: '700', color: 'rgba(255,255,255,0.6)', letterSpacing: 0.5 },
+  videoMockContainer: { width: '100%', height: 260, borderRadius: 24, overflow: 'hidden', backgroundColor: 'rgba(255,255,255,0.03)', borderWidth: 1, borderColor: 'rgba(255,255,255,0.06)', marginVertical: 20, justifyContent: 'center', alignItems: 'center' },
+  selfVideoMock: { width: 90, height: 130, borderRadius: 16, backgroundColor: '#1c2d42', position: 'absolute', bottom: 16, right: 16, borderStyle: 'solid', borderWidth: 2, borderColor: 'rgba(255,255,255,0.1)' },
+  callScreenControls: { flexDirection: 'row', justifyContent: 'center', alignItems: 'center', gap: 28, marginBottom: 20 },
+  callControlBtn: { width: 56, height: 56, borderRadius: 28, backgroundColor: 'rgba(255,255,255,0.08)', justifyContent: 'center', alignItems: 'center', borderWidth: 1, borderColor: 'rgba(255,255,255,0.05)' },
+
+  // Pulse voice recording styles
+  recordingCard: {
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+    backgroundColor: '#fff',
+    borderRadius: 25,
+    paddingHorizontal: 16,
+    height: 48,
+    gap: 12,
+    ...SHADOWS.soft
+  },
+  pulseRecDot: {
+    width: 10,
+    height: 10,
+    borderRadius: 5,
+    backgroundColor: '#ef4444'
+  },
+  recordingTimerText: {
+    flex: 1,
+    fontSize: 14,
+    fontWeight: '800',
+    color: '#ef4444'
+  },
+  cancelRecBtn: {
+    paddingHorizontal: 12,
+    paddingVertical: 6,
+    borderRadius: 12,
+    backgroundColor: '#f3f4f6'
+  },
+  cancelRecText: {
+    fontSize: 12,
+    fontWeight: '700',
+    color: COLORS.textMuted
+  },
+  sendRecBtn: {
+    padding: 8
+  },
+
+  // Custom interactive caller styling
+  activeControlBtn: {
+    backgroundColor: '#ffffff',
+    borderColor: '#ffffff'
+  },
+
+  // Voice Note message rendering styles
+  voiceNoteContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 10,
+    width: 220,
+    paddingVertical: 4
+  },
+  voicePlayBtn: {
+    width: 36,
+    height: 36,
+    borderRadius: 18,
+    backgroundColor: 'rgba(0,0,0,0.06)',
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  voiceWaveContainer: {
+    flex: 1,
+    gap: 4
+  },
+  voiceWaveform: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 3,
+    height: 24
+  },
+  voiceWaveBar: {
+    width: 3,
+    borderRadius: 1.5
+  },
+  voiceProgressTextRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-between'
+  },
+  voiceDurationText: {
+    fontSize: 10,
+    fontWeight: '700',
+    color: COLORS.textMuted
+  }
 });
 
 export default TicketDetailScreen;

backend/.env.example

@@ -55,6 +55,8 @@ ALLOW_DEGRADED_STARTUP=0
 # Default `false` allows the backend to run in "no-persistence" mode for tests.
 REQUIRE_SUPABASE=false
 
+# Slack Alerts
+SLACK_WEBHOOK_URL=https://hooks.slack.com/services/xxx/yyy/zzz
 
 # -----------------------------------------------------------------------------
 # Health-Check Probe (Docker / Kubernetes)

backend/main.py

@@ -360,6 +360,7 @@ def detect_and_translate_ticket_text(text: str) -> dict:
             "source_language_name": "English",
             "was_translated": False,
             "original_text": "",
+            "metadata":{},
         }
 
     detected = _heuristic_language_detection(original_text)
@@ -375,6 +376,7 @@ def detect_and_translate_ticket_text(text: str) -> dict:
             "source_language_name": "English",
             "was_translated": False,
             "original_text": original_text,
+            "metadata":{},
         }
 
     translated_text = original_text
@@ -388,6 +390,7 @@ def detect_and_translate_ticket_text(text: str) -> dict:
             "source_language_name": source_name,
             "was_translated": False,
             "original_text": original_text,
+            "metadata":{},
         }
 
     return {
@@ -396,6 +399,7 @@ def detect_and_translate_ticket_text(text: str) -> dict:
         "source_language_name": source_name,
         "was_translated": True,
         "original_text": original_text,
+        "metadata":{},
     }
 
 
@@ -773,6 +777,60 @@ async def save_ticket(request_body: TicketSaveRequest):
     }
     final_data["metadata"] = metadata
 
+        # Resolve tenant linkage from user profile with authorization validation.
+        profile = {}
+        if request_body.user_id:
+            try:
+                profile_res = (
+                    supabase.table("profiles")
+                    .select("company_id, company")
+                    .eq("id", request_body.user_id)
+                    .single()
+                    .execute()
+                )
+                profile = profile_res.data or {}
+                if not profile:
+                    raise HTTPException(status_code=404, detail="User profile not found")
+                
+                # SELF-HEALING: If company_id is null in database but company name exists, resolve it!
+                if not profile.get("company_id") and profile.get("company"):
+                    try:
+                        comp_name = profile.get("company").strip()
+                        comp_res = (
+                            supabase.table("companies")
+                            .select("id")
+                            .ilike("name", comp_name)
+                            .execute()
+                        )
+                        if comp_res.data:
+                            resolved_company_id = comp_res.data[0]["id"]
+                            # Backfill the profile table in real-time
+                            supabase.table("profiles").update({"company_id": resolved_company_id}).eq("id", request_body.user_id).execute()
+                            profile["company_id"] = resolved_company_id
+                            logger.info(f"[SELF-HEALING] Backfilled company_id={resolved_company_id} for user={request_body.user_id}")
+                    except Exception as healing_err:
+                        logger.warning(f"[SELF-HEALING WARNING] Failed to backfill company_id: {healing_err}")
+            except HTTPException:
+                raise
+            except Exception as profile_error:
+                user_hash = hashlib.sha256(str(request_body.user_id).encode()).hexdigest()[:8]
+                logger.error(f"Tenant resolution error for user {user_hash}: {profile_error}")
+                raise HTTPException(status_code=503, detail="Failed to resolve tenant linkage") from profile_error
+
+        # Validate tenant consistency and authorization.
+        profile_company_id = profile.get("company_id")
+        if final_data.get("company_id"):
+            # User provided company_id: verify it matches their profile.
+            if profile_company_id and final_data["company_id"] != profile_company_id:
+                user_hash = hashlib.sha256(str(request_body.user_id).encode()).hexdigest()[:8]
+                logger.warning(f"Tenant mismatch: user {user_hash} attempted {final_data['company_id']}, assigned to {profile_company_id}")
+                raise HTTPException(status_code=403, detail="User not authorized for this tenant")
+        elif profile_company_id:
+            # Backfill company_id from profile.
+            final_data["company_id"] = profile_company_id
+        elif request_body.user_id:
+            # User has no tenant assignment.
+            raise HTTPException(status_code=400, detail="User has no tenant assignment")
     # Resolve tenant linkage from user profile with authorization validation.
     profile = {}
     if request_body.user_id:
@@ -812,6 +870,27 @@ async def save_ticket(request_body: TicketSaveRequest):
         if not final_data.get("company") and profile.get("company"):
             final_data["company"] = profile["company"]
 
+        priority = final_data.get("priority")
+        if not final_data.get("sla_response_due_at"):
+            final_data["sla_response_due_at"] = calculate_sla_response_at(priority).isoformat().replace("+00:00", "Z")
+        if not final_data.get("sla_breach_at"):
+            final_data["sla_breach_at"] = calculate_sla_breach_at(priority).isoformat().replace("+00:00", "Z")
+        final_data["sla_status"] = final_data.get("sla_status") or classify_sla_status(final_data.get("sla_breach_at"))
+        final_data["escalation_level"] = int(final_data.get("escalation_level") or 0)
+
+        import hashlib
+        user_hash = hashlib.sha256(str(request_body.user_id).encode()).hexdigest()[:8]
+        logger.info(f"Tenant linkage: user_hash={user_hash}, company_id={final_data.get('company_id')}")
+
+        duplicate_text = (request_body.description or "").strip() or (request_body.subject or "").strip()
+        duplicate_threshold = get_duplicate_threshold(final_data.get("company_id"), 0.85)
+        duplicate_result = {
+            "is_duplicate": False,
+            "duplicate_ticket_id": None,
+            "parent_ticket_id": None,
+            "is_potential_duplicate": False,
+            "similarity": 0.0,
+        }
         user_hash = hashlib.sha256(str(request_body.user_id).encode()).hexdigest()[:8]
         logger.info(f"Tenant linkage: user_hash={user_hash}, company_id={final_data.get('company_id')}")
 

backend/services/sla_service.py

@@ -14,6 +14,10 @@ import os
 from datetime import datetime, timedelta, timezone
 from typing import Any, Callable, Optional
 
+from fastapi import BackgroundTasks
+
+from backend.sla_checker import dispatch_slack_alert
+
 try:
     from dotenv import load_dotenv
 except ImportError:
@@ -114,7 +118,7 @@ class SlaEscalationService:
         self.now_fn = now_fn
         self.notification_router = notification_router
 
-    def run_once(self) -> dict[str, int | str]:
+    def run_once(self, background_tasks: BackgroundTasks | None = None) -> dict[str, int | str]:
         stats: dict[str, int | str] = {
             "processed_count": 0,
             "breached_count": 0,
@@ -136,7 +140,7 @@ class SlaEscalationService:
                 if not self._should_breach(ticket, now):
                     stats["skipped_count"] = int(stats["skipped_count"]) + 1
                     continue
-                self._breach_ticket(ticket, now)
+                self._breach_ticket(ticket, now, background_tasks=background_tasks)
                 stats["breached_count"] = int(stats["breached_count"]) + 1
             except Exception as exc:
                 stats["error_count"] = int(stats["error_count"]) + 1
@@ -169,7 +173,13 @@ class SlaEscalationService:
             return False
         return classify_sla_status(ticket.get("sla_breach_at"), now) == "BREACHED"
 
-    def _breach_ticket(self, ticket: dict[str, Any], now: datetime) -> None:
+    def _breach_ticket(
+        self,
+        ticket: dict[str, Any],
+        now: datetime,
+        *,
+        background_tasks: BackgroundTasks | None = None,
+    ) -> None:
         ticket_id = str(ticket.get("id"))
         company_id = ticket.get("company_id")
         escalation_level = int(ticket.get("escalation_level") or 0) + 1
@@ -185,6 +195,7 @@ class SlaEscalationService:
 
         self._insert_audit_log(ticket, escalation_level, timestamp)
         self._emit_system_message(ticket, escalation_level, timestamp)
+        self._dispatch_breach_alert(ticket, now, background_tasks=background_tasks)
 
         logger.warning(
             "SLA breached | ticket_id=%s | company_id=%s | priority=%s | level=%s",
@@ -194,6 +205,31 @@ class SlaEscalationService:
             escalation_level,
         )
 
+    def _dispatch_breach_alert(
+        self,
+        ticket: dict[str, Any],
+        breach_time: datetime,
+        *,
+        background_tasks: BackgroundTasks | None = None,
+    ) -> None:
+        ticket_id = str(ticket.get("id") or "")
+        subject = str(ticket.get("subject") or "Untitled ticket")
+        category = str(ticket.get("priority") or "Uncategorized")
+        assignee = str(ticket.get("assigned_team") or "Unassigned")
+
+        if background_tasks is not None:
+            background_tasks.add_task(
+                dispatch_slack_alert,
+                ticket_id,
+                subject,
+                category,
+                assignee,
+                breach_time,
+            )
+            return
+
+        dispatch_slack_alert(ticket_id, subject, category, assignee, breach_time)
+
     def _insert_audit_log(self, ticket: dict[str, Any], escalation_level: int, timestamp: str) -> None:
         ticket_id = str(ticket.get("id"))
         self.supabase.table("audit_logs").insert(

backend/sla_checker.py

@@ -1,3 +1,120 @@
+from __future__ import annotations
+
+import logging
+import os
+from datetime import datetime, timezone
+
+logger = logging.getLogger(__name__)
+
+
+def _format_ticket_reference(ticket_id: str) -> str:
+    clean_id = str(ticket_id or "").strip()
+    if clean_id.isdigit():
+        return f"#T-{int(clean_id):04d}"
+    return f"#T-{clean_id}" if clean_id else "#T-UNKNOWN"
+
+
+def _format_breach_time(breach_time: datetime) -> str:
+    if breach_time.tzinfo is None:
+        normalized = breach_time.replace(tzinfo=timezone.utc)
+    else:
+        normalized = breach_time.astimezone(timezone.utc)
+    iso_value = normalized.isoformat().replace("+00:00", "Z")
+    human_value = normalized.strftime("%Y-%m-%d %H:%M:%S UTC")
+    return f"{iso_value} ({human_value})"
+
+
+def _post_json(url: str, payload: dict) -> None:
+    try:
+        import requests
+
+        response = requests.post(url, json=payload, timeout=10)
+        response.raise_for_status()
+        return
+    except ImportError:
+        pass
+    except Exception as exc:
+        logger.error("Slack alert request failed: %s", exc)
+        return
+
+    try:
+        import httpx
+
+        response = httpx.post(url, json=payload, timeout=10)
+        response.raise_for_status()
+    except ImportError:
+        logger.error("Slack alert client not available: install requests or httpx")
+    except Exception as exc:
+        logger.error("Slack alert request failed: %s", exc)
+
+
+def dispatch_slack_alert(
+    ticket_id: str,
+    subject: str,
+    category: str,
+    assignee: str,
+    breach_time: datetime,
+) -> None:
+    webhook_url = (os.environ.get("SLACK_WEBHOOK_URL") or "").strip()
+    if not webhook_url:
+        return None
+
+    payload = {
+        "attachments": [
+            {
+                "color": "#FF0000",
+                "blocks": [
+                    {
+                        "type": "header",
+                        "text": {
+                            "type": "plain_text",
+                            "text": "🚨 SLA Breach Alert",
+                            "emoji": True,
+                        },
+                    },
+                    {
+                        "type": "section",
+                        "fields": [
+                            {
+                                "type": "mrkdwn",
+                                "text": f"*Ticket Reference:*\n{_format_ticket_reference(ticket_id)}",
+                            },
+                            {
+                                "type": "mrkdwn",
+                                "text": f"*Subject:*\n{subject or 'Untitled ticket'}",
+                            },
+                            {
+                                "type": "mrkdwn",
+                                "text": f"*Category:*\n{category or 'Uncategorized'}",
+                            },
+                            {
+                                "type": "mrkdwn",
+                                "text": f"*Assigned To:*\n{assignee or 'Unassigned'}",
+                            },
+                            {
+                                "type": "mrkdwn",
+                                "text": f"*Breach Time:*\n{_format_breach_time(breach_time)}",
+                            },
+                        ],
+                    },
+                    {"type": "divider"},
+                    {
+                        "type": "context",
+                        "elements": [
+                            {
+                                "type": "mrkdwn",
+                                "text": "Automated SLA Monitor",
+                            }
+                        ],
+                    },
+                ],
+            }
+        ]
+    }
+
+    _post_json(webhook_url, payload)
+
+    return None
 """
 SLA Background Checker — Periodic worker that evaluates ticket SLAs
 and dispatches multi-channel escalation notifications.

supabase/migrations/20260522080000_add_sla_escalation.sql

@@ -43,7 +43,7 @@ CREATE POLICY "Service role full audit access" ON audit_logs
 CREATE POLICY "Admins can view own company audit logs" ON audit_logs
     FOR SELECT USING (
         company_id IN (
-            SELECT company_id FROM user_companies WHERE user_id = auth.uid()
+            SELECT company_id FROM profiles WHERE id = auth.uid()
         )
     );
 

supabase/migrations/20260525000000_add_sla_policies_and_escalation_logs_rls.sql

@@ -0,0 +1,150 @@
+-- Company-scoped SLA policy and escalation history tables.
+-- Standard authenticated users can only read their own company records.
+-- Company admins can create, update, and delete records for their company.
+
+CREATE TABLE IF NOT EXISTS sla_policies (
+    id uuid PRIMARY KEY DEFAULT gen_random_uuid(),
+    company_id uuid NOT NULL REFERENCES companies(id) ON DELETE CASCADE,
+    name text NOT NULL,
+    description text,
+    policy_rules jsonb NOT NULL DEFAULT '{}'::jsonb,
+    is_active boolean NOT NULL DEFAULT true,
+    created_by uuid REFERENCES profiles(id) ON DELETE SET NULL,
+    updated_by uuid REFERENCES profiles(id) ON DELETE SET NULL,
+    created_at timestamptz NOT NULL DEFAULT now(),
+    updated_at timestamptz NOT NULL DEFAULT now(),
+    CONSTRAINT sla_policies_company_name_key UNIQUE (company_id, name)
+);
+
+CREATE TABLE IF NOT EXISTS escalation_logs (
+    id uuid PRIMARY KEY DEFAULT gen_random_uuid(),
+    company_id uuid NOT NULL REFERENCES companies(id) ON DELETE CASCADE,
+    ticket_id text,
+    sla_policy_id uuid REFERENCES sla_policies(id) ON DELETE SET NULL,
+    escalation_level integer NOT NULL DEFAULT 0,
+    event_type text NOT NULL,
+    message text NOT NULL,
+    metadata jsonb NOT NULL DEFAULT '{}'::jsonb,
+    created_by uuid REFERENCES profiles(id) ON DELETE SET NULL,
+    created_at timestamptz NOT NULL DEFAULT now()
+);
+
+CREATE INDEX IF NOT EXISTS idx_sla_policies_company_id ON sla_policies(company_id);
+CREATE INDEX IF NOT EXISTS idx_sla_policies_company_active ON sla_policies(company_id, is_active);
+CREATE INDEX IF NOT EXISTS idx_escalation_logs_company_created_at ON escalation_logs(company_id, created_at DESC);
+CREATE INDEX IF NOT EXISTS idx_escalation_logs_ticket_id ON escalation_logs(ticket_id);
+CREATE INDEX IF NOT EXISTS idx_escalation_logs_sla_policy_id ON escalation_logs(sla_policy_id);
+
+ALTER TABLE sla_policies ENABLE ROW LEVEL SECURITY;
+ALTER TABLE escalation_logs ENABLE ROW LEVEL SECURITY;
+
+CREATE POLICY "Company members can view SLA policies" ON sla_policies
+    FOR SELECT TO authenticated
+    USING (
+        company_id IN (
+            SELECT company_id FROM profiles WHERE id = auth.uid()
+        )
+    );
+
+CREATE POLICY "Company admins can create SLA policies" ON sla_policies
+    FOR INSERT TO authenticated
+    WITH CHECK (
+        EXISTS (
+            SELECT 1
+            FROM profiles p
+            WHERE p.id = auth.uid()
+              AND p.company_id = company_id
+              AND p.role = 'admin'
+        )
+    );
+
+CREATE POLICY "Company admins can update SLA policies" ON sla_policies
+    FOR UPDATE TO authenticated
+    USING (
+        EXISTS (
+            SELECT 1
+            FROM profiles p
+            WHERE p.id = auth.uid()
+              AND p.company_id = company_id
+              AND p.role = 'admin'
+        )
+    )
+    WITH CHECK (
+        EXISTS (
+            SELECT 1
+            FROM profiles p
+            WHERE p.id = auth.uid()
+              AND p.company_id = company_id
+              AND p.role = 'admin'
+        )
+    );
+
+CREATE POLICY "Company admins can delete SLA policies" ON sla_policies
+    FOR DELETE TO authenticated
+    USING (
+        EXISTS (
+            SELECT 1
+            FROM profiles p
+            WHERE p.id = auth.uid()
+              AND p.company_id = company_id
+              AND p.role = 'admin'
+        )
+    );
+
+CREATE POLICY "Company members can view escalation logs" ON escalation_logs
+    FOR SELECT TO authenticated
+    USING (
+        company_id IN (
+            SELECT company_id FROM profiles WHERE id = auth.uid()
+        )
+    );
+
+CREATE POLICY "Company admins can create escalation logs" ON escalation_logs
+    FOR INSERT TO authenticated
+    WITH CHECK (
+        EXISTS (
+            SELECT 1
+            FROM profiles p
+            WHERE p.id = auth.uid()
+              AND p.company_id = company_id
+              AND p.role = 'admin'
+        )
+    );
+
+CREATE POLICY "Company admins can update escalation logs" ON escalation_logs
+    FOR UPDATE TO authenticated
+    USING (
+        EXISTS (
+            SELECT 1
+            FROM profiles p
+            WHERE p.id = auth.uid()
+              AND p.company_id = company_id
+              AND p.role = 'admin'
+        )
+    )
+    WITH CHECK (
+        EXISTS (
+            SELECT 1
+            FROM profiles p
+            WHERE p.id = auth.uid()
+              AND p.company_id = company_id
+              AND p.role = 'admin'
+        )
+    );
+
+CREATE POLICY "Company admins can delete escalation logs" ON escalation_logs
+    FOR DELETE TO authenticated
+    USING (
+        EXISTS (
+            SELECT 1
+            FROM profiles p
+            WHERE p.id = auth.uid()
+              AND p.company_id = company_id
+              AND p.role = 'admin'
+        )
+    );
+
+GRANT SELECT, INSERT, UPDATE, DELETE ON sla_policies TO authenticated;
+GRANT SELECT, INSERT, UPDATE, DELETE ON escalation_logs TO authenticated;
+GRANT ALL ON sla_policies TO service_role;
+GRANT ALL ON escalation_logs TO service_role;

supabase/migrations/20260531_add_company_settings.sql

@@ -1,3 +1,22 @@
+-- system_settings table: per-company AI and SLA configuration
+-- Corrected migration: replaces the previous broken version
+-- Fixes: uses profiles table for RLS (not user_companies), adds updated_at column, safe policy creation
+
+-- Drop old table if it exists (fresh create with correct schema)
+DROP TABLE IF EXISTS system_settings CASCADE;
+
+-- Create the table
+CREATE TABLE system_settings (
+    company_id              UUID        UNIQUE NOT NULL REFERENCES companies(id) ON DELETE CASCADE,
+    ai_confidence_threshold FLOAT       NOT NULL DEFAULT 0.80,
+    duplicate_sensitivity   FLOAT       NOT NULL DEFAULT 0.85,
+    enable_auto_resolve     BOOLEAN     NOT NULL DEFAULT FALSE,
+    auto_close_enabled      BOOLEAN     NOT NULL DEFAULT TRUE,
+    auto_close_days         INTEGER     NOT NULL DEFAULT 7,
+    email_notifications     BOOLEAN     NOT NULL DEFAULT TRUE,
+    admin_alerts            BOOLEAN     NOT NULL DEFAULT TRUE,
+    digest_frequency        TEXT        NOT NULL DEFAULT 'daily' CHECK (digest_frequency IN ('daily', 'weekly')),
+    updated_at              TIMESTAMPTZ NOT NULL DEFAULT NOW()
 -- Create system_settings table for storing per-company system configuration
 
 -- NOTE: migration filename contains 'add_company_settings'. The migration now creates
@@ -20,15 +39,18 @@ CREATE TABLE IF NOT EXISTS system_settings (
 -- Enable Row Level Security
 ALTER TABLE system_settings ENABLE ROW LEVEL SECURITY;
 
--- RLS Policy 1: Service role (backend) has full access
-CREATE POLICY "Service role full access" ON system_settings
-    FOR ALL USING (auth.role() = 'service_role');
-
--- RLS Policy 2: Users can view settings for their company
-CREATE POLICY "Users can view own company settings" ON system_settings
-    FOR SELECT USING (
+-- RLS Policy: Admins/agents in the same company can read and write their settings
+-- Uses profiles table (not user_companies which doesn't exist)
+CREATE POLICY "Company members can manage own settings" ON system_settings
+    FOR ALL
+    USING (
         company_id IN (
-            SELECT company_id FROM user_companies WHERE user_id = auth.uid()
+            SELECT company_id FROM profiles WHERE id = auth.uid()
+        )
+    )
+    WITH CHECK (
+        company_id IN (
+            SELECT company_id FROM profiles WHERE id = auth.uid()
         )
     );
 
@@ -76,14 +98,22 @@ END;
 $$ LANGUAGE plpgsql;
 
 -- Trigger to auto-update updated_at on modification
-CREATE TRIGGER update_system_settings_timestamp
+CREATE OR REPLACE FUNCTION update_system_settings_timestamp()
+RETURNS TRIGGER LANGUAGE plpgsql AS $$
+BEGIN
+    NEW.updated_at = NOW();
+    RETURN NEW;
+END;
+$$;
+
+CREATE TRIGGER trigger_system_settings_updated_at
     BEFORE UPDATE ON system_settings
     FOR EACH ROW
-    EXECUTE FUNCTION update_timestamp();
+    EXECUTE FUNCTION update_system_settings_timestamp();
 
--- Create index on company_id for fast lookups
-CREATE INDEX idx_system_settings_company_id ON system_settings(company_id);
+-- Index for fast lookups
+CREATE INDEX IF NOT EXISTS idx_system_settings_company_id ON system_settings(company_id);
 
--- Grant appropriate permissions
+-- Grant permissions
 GRANT SELECT, INSERT, UPDATE ON system_settings TO authenticated;
 GRANT ALL ON system_settings TO service_role;