feat: Implement ticket commenting functionality

Adds the ability for users to comment on tickets, view comments, and distinguish between user and admin responses. Also introduces a new 'SUSPENDED' status for tickets and refactors database schema and API endpoints to support comments.

Dockerfile

@@ -1,15 +0,0 @@
-# Stage 1: Build Frontend
-FROM node:18-alpine as build
-WORKDIR /app
-COPY package*.json ./
-RUN npm install
-COPY . .
-RUN npm run build
-
-# Stage 2: Serve with Nginx
-FROM nginx:alpine
-COPY --from=build /app/dist /usr/share/nginx/html
-# Copy the nginx configuration file (using the .txt extension as provided in source)
-COPY nginx.txt /etc/nginx/nginx.conf
-EXPOSE 80
-CMD ["nginx", "-g", "daemon off;"]

nginx.conf

@@ -1,38 +0,0 @@
-worker_processes 1;
-
-events { worker_connections 1024; }
-
-http {
-    include       mime.types;
-    default_type  application/octet-stream;
-    sendfile        on;
-    keepalive_timeout  65;
-
-    server {
-        listen 80;
-        root /usr/share/nginx/html;
-        index index.html;
-
-        # Limite upload per allegati (es. foto/video ticket) - Allineato con il backend
-        client_max_body_size 50M;
-
-        # Compressione Gzip
-        gzip on;
-        gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
-
-        # Gestione SPA (React Router)
-        location / {
-            try_files $uri $uri/ /index.html;
-        }
-
-        # Proxy API verso il backend
-        location /api/ {
-            proxy_pass http://backend:3001;
-            proxy_http_version 1.1;
-            proxy_set_header Upgrade $http_upgrade;
-            proxy_set_header Connection 'upgrade';
-            proxy_set_header Host $host;
-            proxy_cache_bypass $http_upgrade;
-        }
-    }
-}

pages/Tickets.tsx

@@ -1,8 +1,8 @@
 
 import React, { useEffect, useState } from 'react';
 import { CondoService } from '../services/mockDb';
-import { Ticket, TicketStatus, TicketPriority, TicketCategory, TicketAttachment } from '../types';
+import { Ticket, TicketStatus, TicketPriority, TicketCategory, TicketAttachment, TicketComment } from '../types';
-import { MessageSquareWarning, Plus, Search, Filter, Paperclip, X, CheckCircle2, Clock, XCircle, FileIcon, Image as ImageIcon, Film } from 'lucide-react';
+import { MessageSquareWarning, Plus, Search, Filter, Paperclip, X, CheckCircle2, Clock, XCircle, FileIcon, Image as ImageIcon, Film, Send, PauseCircle, Archive, Trash2, User } from 'lucide-react';
 
 export const TicketsPage: React.FC = () => {
     const user = CondoService.getCurrentUser();
@@ -10,11 +10,19 @@ export const TicketsPage: React.FC = () => {
 
     const [tickets, setTickets] = useState<Ticket[]>([]);
     const [loading, setLoading] = useState(true);
-    const [filterStatus, setFilterStatus] = useState<string>('ALL');
+    
+    // View Filters
+    const [viewMode, setViewMode] = useState<'active' | 'archived'>('active');
+    
     const [showModal, setShowModal] = useState(false);
     const [viewTicket, setViewTicket] = useState<Ticket | null>(null);
     const [submitting, setSubmitting] = useState(false);
 
+    // Comments State
+    const [comments, setComments] = useState<TicketComment[]>([]);
+    const [newComment, setNewComment] = useState('');
+    const [loadingComments, setLoadingComments] = useState(false);
+
     // Form State
     const [formTitle, setFormTitle] = useState('');
     const [formDesc, setFormDesc] = useState('');
@@ -69,10 +77,27 @@ export const TicketsPage: React.FC = () => {
         }
     };
 
+    const loadComments = async (ticketId: string) => {
+        setLoadingComments(true);
+        try {
+            const data = await CondoService.getTicketComments(ticketId);
+            setComments(data);
+        } catch(e) { console.error(e); }
+        finally { setLoadingComments(false); }
+    };
+
     useEffect(() => {
         loadTickets();
     }, []);
 
+    useEffect(() => {
+        if (viewTicket) {
+            loadComments(viewTicket.id);
+        } else {
+            setComments([]);
+        }
+    }, [viewTicket]);
+
     const handleCreateSubmit = async (e: React.FormEvent) => {
         e.preventDefault();
         setSubmitting(true);
@@ -118,16 +143,33 @@ export const TicketsPage: React.FC = () => {
             await CondoService.deleteTicket(id);
             setTickets(tickets.filter(t => t.id !== id));
             setViewTicket(null);
-        } catch (e) { alert("Impossibile eliminare."); }
+        } catch (e: any) { alert(e.message || "Impossibile eliminare."); }
     };
 
-    const filteredTickets = tickets.filter(t => filterStatus === 'ALL' || t.status === filterStatus);
+    const handleSendComment = async (e: React.FormEvent) => {
+        e.preventDefault();
+        if (!viewTicket || !newComment.trim()) return;
+        
+        try {
+            await CondoService.addTicketComment(viewTicket.id, newComment);
+            setNewComment('');
+            loadComments(viewTicket.id);
+        } catch(e) { console.error(e); }
+    };
+
+    // Filter Logic
+    const filteredTickets = tickets.filter(t => {
+        const isArchived = t.status === TicketStatus.RESOLVED || t.status === TicketStatus.CLOSED;
+        if (viewMode === 'active') return !isArchived;
+        return isArchived;
+    });
 
     // Helpers for Badge Colors
     const getStatusColor = (s: TicketStatus) => {
         switch(s) {
             case TicketStatus.OPEN: return 'bg-blue-100 text-blue-700';
             case TicketStatus.IN_PROGRESS: return 'bg-yellow-100 text-yellow-700';
+            case TicketStatus.SUSPENDED: return 'bg-orange-100 text-orange-700';
             case TicketStatus.RESOLVED: return 'bg-green-100 text-green-700';
             case TicketStatus.CLOSED: return 'bg-slate-200 text-slate-600';
         }
@@ -155,16 +197,13 @@ export const TicketsPage: React.FC = () => {
     const openAttachment = async (ticketId: string, attId: string) => {
         try {
             const file = await CondoService.getTicketAttachment(ticketId, attId);
-            // Open base64 in new tab
             const win = window.open();
             if (win) {
-                // Determine display method
                 if (file.fileType.startsWith('image/')) {
                     win.document.write(`<img src="${file.data}" style="max-width:100%"/>`);
                 } else if (file.fileType === 'application/pdf') {
                     win.document.write(`<iframe src="${file.data}" frameborder="0" style="border:0; top:0px; left:0px; bottom:0px; right:0px; width:100%; height:100%;" allowfullscreen></iframe>`);
                 } else {
-                    // Download link fallback
                      win.document.write(`<a href="${file.data}" download="${file.fileName}">Clicca qui per scaricare ${file.fileName}</a>`);
                 }
             }
@@ -186,17 +225,24 @@ export const TicketsPage: React.FC = () => {
                 </button>
             </div>
 
-            {/* Filters */}
+            {/* Main Tabs */}
-            <div className="flex gap-2 overflow-x-auto pb-2 no-scrollbar">
+            <div className="border-b border-slate-200">
-                {['ALL', 'OPEN', 'IN_PROGRESS', 'RESOLVED', 'CLOSED'].map(status => (
+                <div className="flex gap-4">
                     <button
-                        key={status}
+                        onClick={() => setViewMode('active')}
-                        onClick={() => setFilterStatus(status)}
+                        className={`pb-2 text-sm font-medium border-b-2 transition-colors flex items-center gap-2 ${viewMode === 'active' ? 'border-blue-600 text-blue-600' : 'border-transparent text-slate-500 hover:text-slate-700'}`}
-                        className={`px-4 py-2 rounded-lg text-sm font-medium whitespace-nowrap ${filterStatus === status ? 'bg-slate-800 text-white' : 'bg-white border border-slate-200 text-slate-600 hover:bg-slate-50'}`}
                     >
-                        {status === 'ALL' ? 'Tutti' : status === 'OPEN' ? 'Aperti' : status === 'IN_PROGRESS' ? 'In Corso' : status === 'RESOLVED' ? 'Risolti' : 'Chiusi'}
+                        <Clock className="w-4 h-4"/>
+                        In Corso
                     </button>
-                ))}
+                    <button
+                        onClick={() => setViewMode('archived')}
+                        className={`pb-2 text-sm font-medium border-b-2 transition-colors flex items-center gap-2 ${viewMode === 'archived' ? 'border-blue-600 text-blue-600' : 'border-transparent text-slate-500 hover:text-slate-700'}`}
+                    >
+                        <Archive className="w-4 h-4"/>
+                        Archivio (Risolti/Chiusi)
+                    </button>
+                </div>
             </div>
 
             {/* List */}
@@ -205,7 +251,7 @@ export const TicketsPage: React.FC = () => {
             ) : filteredTickets.length === 0 ? (
                 <div className="text-center p-12 bg-white rounded-xl border border-dashed border-slate-300">
                     <MessageSquareWarning className="w-12 h-12 text-slate-300 mx-auto mb-3"/>
-                    <p className="text-slate-500">Nessuna segnalazione trovata.</p>
+                    <p className="text-slate-500">Nessuna segnalazione in questa vista.</p>
                 </div>
             ) : (
                 <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
@@ -320,70 +366,143 @@ export const TicketsPage: React.FC = () => {
             {/* VIEW DETAILS MODAL */}
             {viewTicket && (
                  <div className="fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4 backdrop-blur-sm">
-                    <div className="bg-white rounded-xl shadow-xl w-full max-w-2xl p-6 animate-in fade-in zoom-in duration-200 max-h-[90vh] overflow-y-auto">
+                    <div className="bg-white rounded-xl shadow-xl w-full max-w-3xl flex flex-col md:flex-row max-h-[90vh] overflow-hidden animate-in fade-in zoom-in duration-200">
-                        <div className="flex justify-between items-start mb-4">
+                        
-                            <div>
+                        {/* LEFT COLUMN: Info */}
-                                <h3 className="font-bold text-xl text-slate-800">{viewTicket.title}</h3>
+                        <div className="flex-1 p-6 overflow-y-auto border-r border-slate-100">
-                                <p className="text-sm text-slate-500">{new Date(viewTicket.createdAt).toLocaleString()} • {getCategoryLabel(viewTicket.category)}</p>
+                            <div className="flex justify-between items-start mb-4">
+                                <div>
+                                    <h3 className="font-bold text-xl text-slate-800">{viewTicket.title}</h3>
+                                    <p className="text-sm text-slate-500">{new Date(viewTicket.createdAt).toLocaleString()} • {getCategoryLabel(viewTicket.category)}</p>
+                                </div>
+                                <button className="md:hidden" onClick={() => setViewTicket(null)}><X className="w-6 h-6 text-slate-400"/></button>
                             </div>
-                            <button onClick={() => setViewTicket(null)}><X className="w-6 h-6 text-slate-400 hover:text-slate-600"/></button>
+
+                            <div className="flex gap-2 mb-6">
+                                <div className={`px-3 py-1 rounded-lg text-sm font-bold uppercase ${getStatusColor(viewTicket.status)}`}>
+                                    {viewTicket.status.replace('_', ' ')}
+                                </div>
+                                <div className={`px-3 py-1 rounded-lg text-sm font-bold uppercase ${getPriorityColor(viewTicket.priority)}`}>
+                                    {viewTicket.priority}
+                                </div>
+                            </div>
+
+                            <div className="bg-slate-50 p-4 rounded-xl border border-slate-200 mb-6 text-slate-700 whitespace-pre-wrap leading-relaxed">
+                                {viewTicket.description}
+                            </div>
+
+                            {/* Attachments */}
+                            {viewTicket.attachments && viewTicket.attachments.length > 0 && (
+                                <div className="mb-6">
+                                    <h4 className="font-bold text-sm text-slate-800 mb-2 flex items-center gap-2"><Paperclip className="w-4 h-4"/> Allegati</h4>
+                                    <div className="grid grid-cols-2 gap-3">
+                                        {viewTicket.attachments.map(att => (
+                                            <button 
+                                                key={att.id} 
+                                                onClick={() => openAttachment(viewTicket.id, att.id)}
+                                                className="flex flex-col items-center justify-center p-3 bg-white border border-slate-200 rounded-lg hover:border-blue-400 hover:shadow-sm transition-all text-center"
+                                            >
+                                                {att.fileType.includes('image') ? <ImageIcon className="w-6 h-6 text-blue-500 mb-1"/> : att.fileType.includes('video') ? <Film className="w-6 h-6 text-purple-500 mb-1"/> : <FileIcon className="w-6 h-6 text-slate-500 mb-1"/>}
+                                                <span className="text-[10px] text-slate-600 truncate w-full">{att.fileName}</span>
+                                            </button>
+                                        ))}
+                                    </div>
+                                </div>
+                            )}
+
+                            {/* Admin Actions */}
+                            {isAdmin && (
+                                <div className="border-t border-slate-100 pt-4">
+                                    <h4 className="font-bold text-sm text-slate-500 uppercase mb-3">Gestione Admin</h4>
+                                    <div className="flex flex-wrap gap-2">
+                                        {(viewTicket.status === TicketStatus.OPEN || viewTicket.status === TicketStatus.SUSPENDED) && (
+                                            <button onClick={() => handleStatusUpdate(TicketStatus.IN_PROGRESS)} className="px-3 py-2 bg-yellow-100 text-yellow-700 rounded-lg font-bold text-xs hover:bg-yellow-200 flex items-center gap-1">
+                                                <Clock className="w-3 h-3"/> Prendi in Carico
+                                            </button>
+                                        )}
+                                        {viewTicket.status === TicketStatus.IN_PROGRESS && (
+                                            <button onClick={() => handleStatusUpdate(TicketStatus.SUSPENDED)} className="px-3 py-2 bg-orange-100 text-orange-700 rounded-lg font-bold text-xs hover:bg-orange-200 flex items-center gap-1">
+                                                <PauseCircle className="w-3 h-3"/> Sospendi
+                                            </button>
+                                        )}
+                                        {(viewTicket.status !== TicketStatus.RESOLVED && viewTicket.status !== TicketStatus.CLOSED) && (
+                                            <button onClick={() => handleStatusUpdate(TicketStatus.RESOLVED)} className="px-3 py-2 bg-green-100 text-green-700 rounded-lg font-bold text-xs hover:bg-green-200 flex items-center gap-1">
+                                                <CheckCircle2 className="w-3 h-3"/> Risolvi
+                                            </button>
+                                        )}
+                                        {(viewTicket.status !== TicketStatus.RESOLVED && viewTicket.status !== TicketStatus.CLOSED) && (
+                                            <button onClick={() => handleStatusUpdate(TicketStatus.CLOSED)} className="px-3 py-2 bg-slate-200 text-slate-700 rounded-lg font-bold text-xs hover:bg-slate-300 flex items-center gap-1">
+                                                <XCircle className="w-3 h-3"/> Chiudi (Non Risolto)
+                                            </button>
+                                        )}
+                                        
+                                        {/* DELETE ONLY ALLOWED IF NOT ARCHIVED OR IF ADMIN WANTS TO FORCE CLEANUP (But prompt requested archive logic) */}
+                                        {/* Based on requirement: Do not allow deletion when closed. So hide delete button if archived */}
+                                        {(viewTicket.status !== TicketStatus.RESOLVED && viewTicket.status !== TicketStatus.CLOSED) && (
+                                            <button onClick={() => handleDeleteTicket(viewTicket.id)} className="ml-auto px-3 py-2 text-red-600 font-medium text-xs hover:bg-red-50 rounded-lg flex items-center gap-1">
+                                                <Trash2 className="w-3 h-3"/> Elimina
+                                            </button>
+                                        )}
+                                    </div>
+                                </div>
+                            )}
+                             {!isAdmin && viewTicket.status === TicketStatus.OPEN && (
+                                <div className="border-t border-slate-100 pt-4 flex justify-end">
+                                     <button onClick={() => handleDeleteTicket(viewTicket.id)} className="px-4 py-2 text-red-600 font-medium text-sm hover:bg-red-50 rounded-lg">Elimina Segnalazione</button>
+                                </div>
+                             )}
                         </div>
 
-                        <div className="flex gap-2 mb-6">
+                        {/* RIGHT COLUMN: Chat / History */}
-                             <div className={`px-3 py-1 rounded-lg text-sm font-bold uppercase ${getStatusColor(viewTicket.status)}`}>
+                        <div className="w-full md:w-80 bg-slate-50 flex flex-col h-[500px] md:h-auto">
-                                 {viewTicket.status.replace('_', ' ')}
+                            <div className="p-4 border-b border-slate-200 flex justify-between items-center bg-white">
-                             </div>
+                                <h4 className="font-bold text-slate-800">Discussione</h4>
-                             <div className={`px-3 py-1 rounded-lg text-sm font-bold uppercase ${getPriorityColor(viewTicket.priority)}`}>
+                                <button className="hidden md:block" onClick={() => setViewTicket(null)}><X className="w-5 h-5 text-slate-400 hover:text-slate-600"/></button>
-                                 {viewTicket.priority}
+                            </div>
-                             </div>
-                        </div>
                             
-                        <div className="bg-slate-50 p-4 rounded-xl border border-slate-200 mb-6 text-slate-700 whitespace-pre-wrap leading-relaxed">
+                            <div className="flex-1 overflow-y-auto p-4 space-y-4">
-                            {viewTicket.description}
+                                {loadingComments ? (
-                        </div>
+                                    <p className="text-center text-slate-400 text-xs">Caricamento...</p>
+                                ) : comments.length === 0 ? (
+                                    <p className="text-center text-slate-400 text-xs italic">Nessun commento.</p>
+                                ) : (
+                                    comments.map(comment => {
+                                        const isMe = comment.userId === user?.id;
+                                        return (
+                                            <div key={comment.id} className={`flex flex-col ${isMe ? 'items-end' : 'items-start'}`}>
+                                                <div className={`max-w-[85%] rounded-2xl px-4 py-2 text-sm ${isMe ? 'bg-blue-600 text-white rounded-br-none' : 'bg-white border border-slate-200 text-slate-700 rounded-bl-none'}`}>
+                                                    <p>{comment.text}</p>
+                                                </div>
+                                                <span className="text-[10px] text-slate-400 mt-1 px-1">
+                                                    {isMe ? 'Tu' : comment.userName} • {new Date(comment.createdAt).toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'})}
+                                                </span>
+                                            </div>
+                                        );
+                                    })
+                                )}
+                            </div>
 
-                        {/* Attachments */}
+                            {/* Input Area - Disabled if ticket closed/resolved */}
-                        {viewTicket.attachments && viewTicket.attachments.length > 0 && (
+                            {(viewTicket.status !== TicketStatus.CLOSED && viewTicket.status !== TicketStatus.RESOLVED) ? (
-                            <div className="mb-6">
+                                <form onSubmit={handleSendComment} className="p-3 bg-white border-t border-slate-200">
-                                <h4 className="font-bold text-sm text-slate-800 mb-2 flex items-center gap-2"><Paperclip className="w-4 h-4"/> Allegati</h4>
+                                    <div className="relative">
-                                <div className="grid grid-cols-2 sm:grid-cols-3 gap-3">
+                                        <input 
-                                    {viewTicket.attachments.map(att => (
+                                            className="w-full border border-slate-300 rounded-full pl-4 pr-12 py-2 text-sm focus:outline-none focus:border-blue-500"
-                                        <button 
+                                            placeholder="Scrivi una risposta..."
-                                            key={att.id} 
+                                            value={newComment}
-                                            onClick={() => openAttachment(viewTicket.id, att.id)}
+                                            onChange={e => setNewComment(e.target.value)}
-                                            className="flex flex-col items-center justify-center p-3 bg-white border border-slate-200 rounded-lg hover:border-blue-400 hover:shadow-sm transition-all text-center"
+                                        />
-                                        >
+                                        <button type="submit" disabled={!newComment.trim()} className="absolute right-1 top-1 bottom-1 bg-blue-600 text-white w-8 h-8 rounded-full flex items-center justify-center hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed">
-                                            {att.fileType.includes('image') ? <ImageIcon className="w-6 h-6 text-blue-500 mb-1"/> : att.fileType.includes('video') ? <Film className="w-6 h-6 text-purple-500 mb-1"/> : <FileIcon className="w-6 h-6 text-slate-500 mb-1"/>}
+                                            <Send className="w-4 h-4 ml-0.5"/>
-                                            <span className="text-[10px] text-slate-600 truncate w-full">{att.fileName}</span>
                                         </button>
-                                    ))}
+                                    </div>
+                                </form>
+                            ) : (
+                                <div className="p-4 bg-slate-100 text-center text-xs text-slate-500 border-t border-slate-200">
+                                    Ticket archiviato. Non è possibile rispondere.
                                 </div>
-                            </div>
+                            )}
-                        )}
+                        </div>
-
-                        {/* Admin Actions */}
-                        {isAdmin && (
-                            <div className="border-t border-slate-100 pt-4">
-                                <h4 className="font-bold text-sm text-slate-500 uppercase mb-3">Gestione Admin</h4>
-                                <div className="flex flex-wrap gap-2">
-                                    {viewTicket.status !== TicketStatus.IN_PROGRESS && (
-                                        <button onClick={() => handleStatusUpdate(TicketStatus.IN_PROGRESS)} className="px-4 py-2 bg-yellow-100 text-yellow-700 rounded-lg font-bold text-sm hover:bg-yellow-200">Prendi in Carico</button>
-                                    )}
-                                    {viewTicket.status !== TicketStatus.RESOLVED && (
-                                        <button onClick={() => handleStatusUpdate(TicketStatus.RESOLVED)} className="px-4 py-2 bg-green-100 text-green-700 rounded-lg font-bold text-sm hover:bg-green-200">Segna Risolto</button>
-                                    )}
-                                    {viewTicket.status !== TicketStatus.CLOSED && (
-                                        <button onClick={() => handleStatusUpdate(TicketStatus.CLOSED)} className="px-4 py-2 bg-slate-200 text-slate-700 rounded-lg font-bold text-sm hover:bg-slate-300">Chiudi</button>
-                                    )}
-                                    <button onClick={() => handleDeleteTicket(viewTicket.id)} className="ml-auto px-4 py-2 text-red-600 font-medium text-sm hover:bg-red-50 rounded-lg">Elimina</button>
-                                </div>
-                            </div>
-                        )}
-                         {!isAdmin && viewTicket.status === TicketStatus.OPEN && (
-                            <div className="border-t border-slate-100 pt-4 flex justify-end">
-                                 <button onClick={() => handleDeleteTicket(viewTicket.id)} className="px-4 py-2 text-red-600 font-medium text-sm hover:bg-red-50 rounded-lg">Elimina Segnalazione</button>
-                            </div>
-                         )}
                     </div>
                  </div>
             )}

server/Dockerfile

@@ -1,13 +0,0 @@
-FROM node:18-alpine
-WORKDIR /app
-
-# Set production environment
-ENV NODE_ENV=production
-
-COPY package*.json ./
-RUN npm install --production
-
-COPY . .
-
-EXPOSE 3001
-CMD ["node", "server.js"]

server/db.js

@@ -334,6 +334,19 @@ const initDb = async () => {
       )
     `);
 
+    // 10. Ticket Comments Table
+    await connection.query(`
+      CREATE TABLE IF NOT EXISTS ticket_comments (
+        id VARCHAR(36) PRIMARY KEY,
+        ticket_id VARCHAR(36) NOT NULL,
+        user_id VARCHAR(36) NOT NULL,
+        text TEXT NOT NULL,
+        created_at ${TIMESTAMP_TYPE} DEFAULT CURRENT_TIMESTAMP,
+        FOREIGN KEY (ticket_id) REFERENCES tickets(id) ON DELETE CASCADE,
+        FOREIGN KEY (user_id) REFERENCES users(id) ON DELETE CASCADE
+      )
+    `);
+
     // --- SEEDING ---
     const [rows] = await connection.query('SELECT * FROM settings WHERE id = 1');
     const defaultFeatures = {

server/server.js

@@ -617,6 +617,81 @@ app.get('/api/tickets/:id/attachments/:attachmentId', authenticateToken, async (
     } catch (e) { res.status(500).json({ error: e.message }); }
 });
 
+app.get('/api/tickets/:id/comments', authenticateToken, async (req, res) => {
+    try {
+        const [rows] = await pool.query(`
+            SELECT c.*, u.name as user_name, u.role as user_role
+            FROM ticket_comments c
+            JOIN users u ON c.user_id = u.id
+            WHERE c.ticket_id = ?
+            ORDER BY c.created_at ASC
+        `, [req.params.id]);
+        
+        res.json(rows.map(r => ({
+            id: r.id,
+            ticketId: r.ticket_id,
+            userId: r.user_id,
+            userName: r.user_name,
+            text: r.text,
+            createdAt: r.created_at,
+            isAdminResponse: r.user_role === 'admin' || r.user_role === 'poweruser'
+        })));
+    } catch (e) { res.status(500).json({ error: e.message }); }
+});
+
+app.post('/api/tickets/:id/comments', authenticateToken, async (req, res) => {
+    const { text } = req.body;
+    const userId = req.user.id;
+    const ticketId = req.params.id;
+    const commentId = uuidv4();
+    const isAdmin = req.user.role === 'admin' || req.user.role === 'poweruser';
+
+    try {
+        await pool.query(
+            'INSERT INTO ticket_comments (id, ticket_id, user_id, text) VALUES (?, ?, ?, ?)',
+            [commentId, ticketId, userId, text]
+        );
+
+        // --- EMAIL NOTIFICATION LOGIC ---
+        // 1. Get ticket info to know who to notify
+        const [ticketRows] = await pool.query(`
+            SELECT t.title, t.user_id, u.email as creator_email, u.receive_alerts as creator_alerts
+            FROM tickets t
+            JOIN users u ON t.user_id = u.id
+            WHERE t.id = ?
+        `, [ticketId]);
+
+        if (ticketRows.length > 0) {
+            const ticket = ticketRows[0];
+            const subject = `Nuovo commento sul ticket: ${ticket.title}`;
+            
+            // If ADMIN replied -> Notify Creator
+            if (isAdmin && ticket.creator_email && ticket.creator_alerts) {
+                const body = `Salve,\n\nÈ stato aggiunto un nuovo commento al tuo ticket "${ticket.title}".\n\nCommento:\n${text}\n\nAccedi alla piattaforma per rispondere.`;
+                sendDirectEmail(ticket.creator_email, subject, body);
+            }
+            // If CREATOR replied -> Notify Admins (logic similar to new ticket)
+            else if (!isAdmin) {
+                const [admins] = await pool.query(`
+                    SELECT u.email FROM users u
+                    LEFT JOIN families f ON u.family_id = f.id
+                    JOIN tickets t ON t.id = ?
+                    WHERE (u.role = 'admin' OR u.role = 'poweruser')
+                    AND (f.condo_id = t.condo_id OR u.family_id IS NULL)
+                    AND u.receive_alerts = TRUE
+                `, [ticketId]);
+                
+                const body = `Salve,\n\nNuova risposta dall'utente sul ticket "${ticket.title}".\n\nCommento:\n${text}\n\nAccedi alla piattaforma per gestire.`;
+                for(const admin of admins) {
+                    if (admin.email) sendDirectEmail(admin.email, subject, body);
+                }
+            }
+        }
+
+        res.json({ success: true, id: commentId });
+    } catch (e) { res.status(500).json({ error: e.message }); }
+});
+
 app.post('/api/tickets', authenticateToken, async (req, res) => {
     const { condoId, title, description, category, priority, attachments } = req.body;
     const userId = req.user.id;
@@ -709,23 +784,32 @@ app.put('/api/tickets/:id', authenticateToken, async (req, res) => {
 
 app.delete('/api/tickets/:id', authenticateToken, async (req, res) => {
     // Only delete own ticket if open, or admin can delete any
+    // MODIFIED: Prevent deletion if status is CLOSED or RESOLVED (Archived)
     const isAdmin = req.user.role === 'admin' || req.user.role === 'poweruser';
     const userId = req.user.id;
 
     try {
+        // Check status first
+        const [rows] = await pool.query('SELECT status, user_id FROM tickets WHERE id = ?', [req.params.id]);
+        if (rows.length === 0) return res.status(404).json({ message: 'Ticket not found' });
+        
+        const ticket = rows[0];
+        
+        // Block deletion of Archived tickets
+        if (ticket.status === 'CLOSED' || ticket.status === 'RESOLVED') {
+            return res.status(403).json({ message: 'Cannot delete archived tickets. They are kept for history.' });
+        }
+
         let query = 'DELETE FROM tickets WHERE id = ?';
         let params = [req.params.id];
         
         if (!isAdmin) {
-            query += ' AND user_id = ? AND status = "OPEN"'; // Users can only delete their own OPEN tickets
+            // Additional check for user ownership
-            params.push(userId);
+            if (ticket.user_id !== userId) return res.status(403).json({ message: 'Forbidden' });
-        }
+            if (ticket.status !== 'OPEN') return res.status(403).json({ message: 'Can only delete OPEN tickets' });
-
-        const [result] = await pool.query(query, params);
-        if (result.affectedRows === 0) {
-             return res.status(403).json({ message: 'Cannot delete ticket (Permission denied or not found)' });
         }
 
+        await pool.query(query, params);
         res.json({ success: true });
     } catch (e) { res.status(500).json({ error: e.message }); }
 });

services/mockDb.ts

@@ -1,5 +1,5 @@
 
-import { Family, Payment, AppSettings, User, AlertDefinition, Condo, Notice, NoticeRead, Ticket, TicketAttachment } from '../types';
+import { Family, Payment, AppSettings, User, AlertDefinition, Condo, Notice, NoticeRead, Ticket, TicketAttachment, TicketComment } from '../types';
 
 // --- CONFIGURATION TOGGLE ---
 const FORCE_LOCAL_DB = false; 
@@ -325,6 +325,17 @@ export const CondoService = {
       return request<TicketAttachment>(`/tickets/${ticketId}/attachments/${attachmentId}`);
   },
 
+  getTicketComments: async (ticketId: string): Promise<TicketComment[]> => {
+      return request<TicketComment[]>(`/tickets/${ticketId}/comments`);
+  },
+
+  addTicketComment: async (ticketId: string, text: string): Promise<void> => {
+      await request(`/tickets/${ticketId}/comments`, {
+          method: 'POST',
+          body: JSON.stringify({ text })
+      });
+  },
+
   // --- SEEDING ---
   seedPayments: () => {
     // No-op in remote mode

types.ts

@@ -125,8 +125,9 @@ export interface AuthResponse {
 export enum TicketStatus {
   OPEN = 'OPEN',
   IN_PROGRESS = 'IN_PROGRESS',
+  SUSPENDED = 'SUSPENDED', // New State
   RESOLVED = 'RESOLVED',
-  CLOSED = 'CLOSED'
+  CLOSED = 'CLOSED' // Closed without resolution (Archived/WontFix)
 }
 
 export enum TicketPriority {
@@ -152,6 +153,16 @@ export interface TicketAttachment {
   data: string; // Base64 Data URI
 }
 
+export interface TicketComment {
+  id: string;
+  ticketId: string;
+  userId: string;
+  userName: string;
+  text: string;
+  createdAt: string;
+  isAdminResponse: boolean;
+}
+
 export interface Ticket {
   id: string;
   condoId: string;
@@ -164,6 +175,7 @@ export interface Ticket {
   createdAt: string;
   updatedAt: string;
   attachments?: TicketAttachment[];
+  comments?: TicketComment[];
   userName?: string; // Joined field
   userEmail?: string; // Joined field
 }