feat: Implement frontend for business owners' support ticket system

frontend/src/App.tsx

@@ -55,6 +55,8 @@ import VerifyEmail from './pages/VerifyEmail';
 import EmailVerificationRequired from './pages/EmailVerificationRequired';
 import AcceptInvitePage from './pages/AcceptInvitePage';
 import TenantOnboardPage from './pages/TenantOnboardPage';
+import TicketsPage from './pages/TicketsPage'; // Import TicketsPage
+import { Toaster } from 'react-hot-toast'; // Import Toaster for notifications
 
 const queryClient = new QueryClient({
   defaultOptions: {
@@ -467,6 +469,7 @@ const AppContent: React.FC = () => {
             element={user.role === 'resource' ? <ResourceDashboard /> : <Dashboard />}
           />
           <Route path="/scheduler" element={<Scheduler />} />
+          <Route path="/tickets" element={<TicketsPage />} />
           <Route
             path="/customers"
             element={
@@ -551,6 +554,7 @@ const App: React.FC = () => {
       <Router>
         <AppContent />
       </Router>
+      <Toaster /> {/* Add Toaster component for notifications */}
     </QueryClientProvider>
   );
 };

frontend/src/api/tickets.ts

@@ -0,0 +1,36 @@
+import { apiClient } from './client';
+import { Ticket, TicketComment } from '../types'; // Assuming types.ts will define these
+
+export const getTickets = async (): Promise<Ticket[]> => {
+  const response = await apiClient.get('/api/tickets/');
+  return response.data;
+};
+
+export const getTicket = async (id: string): Promise<Ticket> => {
+  const response = await apiClient.get(`/api/tickets/${id}/`);
+  return response.data;
+};
+
+export const createTicket = async (data: Partial<Ticket>): Promise<Ticket> => {
+  const response = await apiClient.post('/api/tickets/', data);
+  return response.data;
+};
+
+export const updateTicket = async (id: string, data: Partial<Ticket>): Promise<Ticket> => {
+  const response = await apiClient.patch(`/api/tickets/${id}/`, data);
+  return response.data;
+};
+
+export const deleteTicket = async (id: string): Promise<void> => {
+  await apiClient.delete(`/api/tickets/${id}/`);
+};
+
+export const getTicketComments = async (ticketId: string): Promise<TicketComment[]> => {
+  const response = await apiClient.get(`/api/tickets/${ticketId}/comments/`);
+  return response.data;
+};
+
+export const createTicketComment = async (ticketId: string, data: Partial<TicketComment>): Promise<TicketComment> => {
+  const response = await apiClient.post(`/api/tickets/${ticketId}/comments/`, data);
+  return response.data;
+};

frontend/src/components/Sidebar.tsx

@@ -134,6 +134,10 @@ const Sidebar: React.FC<SidebarProps> = ({ business, user, isCollapsed, toggleCo
               <ClipboardList size={20} className="shrink-0" />
               {!isCollapsed && <span>{t('nav.resources')}</span>}
             </Link>
+            <Link to="/tickets" className={getNavClass('/tickets')} title={t('nav.tickets')}>
+              <LayoutDashboard size={20} className="shrink-0" /> {/* Using LayoutDashboard icon for now, can change */}
+              {!isCollapsed && <span>{t('nav.tickets')}</span>}
+            </Link>
           </>
         )}
 

frontend/src/components/TicketModal.tsx

@@ -0,0 +1,307 @@
+import React, { useState, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import { X, User, Send, MessageSquare, BookOpen, Clock, Tag, Priority as PriorityIcon, FileText, Settings, Key } from 'lucide-react';
+import { Ticket, TicketComment, TicketPriority, TicketStatus } from '../types';
+import { useCreateTicket, useUpdateTicket, useTicketComments, useCreateTicketComment } from '../hooks/useTickets';
+import { useUsers } from '../hooks/useUsers'; // Assuming a useUsers hook exists to fetch users for assignee dropdown
+import { useQueryClient } from '@tanstack/react-query';
+
+interface TicketModalProps {
+  ticket?: Ticket | null; // If provided, it's an edit/detail view
+  onClose: () => void;
+}
+
+const TicketModal: React.FC<TicketModalProps> = ({ ticket, onClose }) => {
+  const { t } = useTranslation();
+  const queryClient = useQueryClient(); // Access the query client for invalidation/updates
+  const [subject, setSubject] = useState(ticket?.subject || '');
+  const [description, setDescription] = useState(ticket?.description || '');
+  const [priority, setPriority] = useState<TicketPriority>(ticket?.priority || 'MEDIUM');
+  const [category, setCategory] = useState(ticket?.category || '');
+  const [assigneeId, setAssigneeId] = useState<string | undefined>(ticket?.assignee);
+  const [status, setStatus] = useState<TicketStatus>(ticket?.status || 'OPEN');
+  const [newCommentText, setNewCommentText] = useState('');
+  const [isInternalComment, setIsInternalComment] = useState(false);
+
+  // Fetch users for assignee dropdown
+  const { data: users = [] } = useUsers(); // Assuming useUsers fetches all relevant users (staff/platform admins)
+
+  // Fetch comments for the ticket if in detail/edit mode
+  const { data: comments, isLoading: isLoadingComments } = useTicketComments(ticket?.id);
+
+  // Mutations
+  const createTicketMutation = useCreateTicket();
+  const updateTicketMutation = useUpdateTicket();
+  const createCommentMutation = useCreateTicketComment();
+
+  useEffect(() => {
+    if (ticket) {
+      setSubject(ticket.subject);
+      setDescription(ticket.description);
+      setPriority(ticket.priority);
+      setCategory(ticket.category || '');
+      setAssigneeId(ticket.assignee);
+      setStatus(ticket.status);
+    } else {
+      // Reset form for new ticket creation
+      setSubject('');
+      setDescription('');
+      setPriority('MEDIUM');
+      setCategory('');
+      setAssigneeId(undefined);
+      setStatus('OPEN');
+    }
+  }, [ticket]);
+
+  const handleSubmitTicket = async (e: React.FormEvent) => {
+    e.preventDefault();
+
+    const ticketData = {
+      subject,
+      description,
+      priority,
+      category: category || undefined,
+      assignee: assigneeId,
+      status: status,
+      ticketType: 'PLATFORM', // For now, assume platform tickets from this modal
+    };
+
+    if (ticket) {
+      await updateTicketMutation.mutateAsync({ id: ticket.id, updates: ticketData });
+    } else {
+      await createTicketMutation.mutateAsync(ticketData);
+    }
+    onClose();
+  };
+
+  const handleAddComment = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!ticket?.id || !newCommentText.trim()) return;
+
+    const commentData: Partial<TicketComment> = {
+      commentText: newCommentText.trim(),
+      isInternal: isInternalComment,
+      // author and ticket are handled by the backend
+    };
+
+    await createCommentMutation.mutateAsync({ ticketId: ticket.id, commentData });
+    setNewCommentText('');
+    setIsInternalComment(false);
+    // Invalidate comments query to refetch new comment
+    queryClient.invalidateQueries({ queryKey: ['ticketComments', ticket.id] });
+  };
+  
+  const statusOptions = Object.values(TicketStatus);
+  const priorityOptions = Object.values(TicketPriority);
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50 backdrop-blur-sm" onClick={onClose}>
+      <div className="bg-white dark:bg-gray-800 rounded-xl shadow-xl w-full max-w-3xl max-h-[90vh] overflow-hidden flex flex-col" onClick={e => e.stopPropagation()}>
+        {/* Header */}
+        <div className="px-6 py-4 border-b border-gray-200 dark:border-gray-700 flex justify-between items-center">
+          <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
+            {ticket ? t('tickets.ticketDetails') : t('tickets.newTicket')}
+          </h3>
+          <button onClick={onClose} className="text-gray-400 hover:text-gray-500 dark:hover:text-gray-300 p-1 rounded-full">
+            <X size={20} />
+          </button>
+        </div>
+
+        {/* Form / Details */}
+        <div className="flex-1 overflow-y-auto p-6 space-y-6">
+          <form onSubmit={handleSubmitTicket} className="space-y-4">
+            {/* Subject */}
+            <div>
+              <label htmlFor="subject" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                {t('tickets.subject')}
+              </label>
+              <input
+                type="text"
+                id="subject"
+                value={subject}
+                onChange={(e) => setSubject(e.target.value)}
+                className="w-full px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-brand-500 focus:border-brand-500"
+                required
+                disabled={!!ticket && !createTicketMutation.isPending && !updateTicketMutation.isPending} // Disable if viewing existing and not actively editing
+              />
+            </div>
+
+            {/* Description */}
+            <div>
+              <label htmlFor="description" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                {t('tickets.description')}
+              </label>
+              <textarea
+                id="description"
+                value={description}
+                onChange={(e) => setDescription(e.target.value)}
+                rows={4}
+                className="w-full px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-brand-500 focus:border-brand-500"
+                required
+                disabled={!!ticket && !createTicketMutation.isPending && !updateTicketMutation.isPending} // Disable if viewing existing and not actively editing
+              />
+            </div>
+
+            {/* Priority & Category */}
+            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+              <div>
+                <label htmlFor="priority" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                  {t('tickets.priority')}
+                </label>
+                <select
+                  id="priority"
+                  value={priority}
+                  onChange={(e) => setPriority(e.target.value as TicketPriority)}
+                  className="w-full px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-brand-500 focus:border-brand-500"
+                  disabled={!!ticket && !createTicketMutation.isPending && !updateTicketMutation.isPending}
+                >
+                  {priorityOptions.map(opt => (
+                    <option key={opt} value={opt}>{t(`tickets.priority.${opt.toLowerCase()}`)}</option>
+                  ))}
+                </select>
+              </div>
+              <div>
+                <label htmlFor="category" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                  {t('tickets.category')}
+                </label>
+                <input
+                  type="text"
+                  id="category"
+                  value={category}
+                  onChange={(e) => setCategory(e.target.value)}
+                  className="w-full px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-brand-500 focus:border-brand-500"
+                  placeholder={t('tickets.categoryPlaceholder')}
+                  disabled={!!ticket && !createTicketMutation.isPending && !updateTicketMutation.isPending}
+                />
+              </div>
+            </div>
+
+            {/* Assignee & Status (only visible for existing tickets or if user has permission to assign) */}
+            {ticket && (
+              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                <div>
+                  <label htmlFor="assignee" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                    {t('tickets.assignee')}
+                  </label>
+                  <select
+                    id="assignee"
+                    value={assigneeId || ''}
+                    onChange={(e) => setAssigneeId(e.target.value || undefined)}
+                    className="w-full px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-brand-500 focus:border-brand-500"
+                  >
+                    <option value="">{t('tickets.unassigned')}</option>
+                    {users.map(user => (
+                      <option key={user.id} value={user.id}>{user.name}</option>
+                    ))}
+                  </select>
+                </div>
+                <div>
+                  <label htmlFor="status" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                    {t('tickets.status')}
+                  </label>
+                  <select
+                    id="status"
+                    value={status}
+                    onChange={(e) => setStatus(e.target.value as TicketStatus)}
+                    className="w-full px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-brand-500 focus:border-brand-500"
+                  >
+                    {statusOptions.map(opt => (
+                      <option key={opt} value={opt}>{t(`tickets.status.${opt.toLowerCase()}`)}</option>
+                    ))}
+                  </select>
+                </div>
+              </div>
+            )}
+
+            {/* Submit Button for Ticket */}
+            {!ticket && ( // Only show submit for new tickets
+              <div className="flex justify-end pt-4 border-t border-gray-200 dark:border-gray-700">
+                <button
+                  type="submit"
+                  className="px-4 py-2 bg-brand-600 text-white rounded-lg hover:bg-brand-700 transition-colors"
+                  disabled={createTicketMutation.isPending}
+                >
+                  {createTicketMutation.isPending ? t('common.saving') : t('tickets.createTicket')}
+                </button>
+              </div>
+            )}
+            {ticket && ( // Show update button for existing tickets
+              <div className="flex justify-end pt-4 border-t border-gray-200 dark:border-gray-700">
+                <button
+                  type="submit"
+                  className="px-4 py-2 bg-brand-600 text-white rounded-lg hover:bg-brand-700 transition-colors"
+                  disabled={updateTicketMutation.isPending}
+                >
+                  {updateTicketMutation.isPending ? t('common.saving') : t('tickets.updateTicket')}
+                </button>
+              </div>
+            )}
+          </form>
+
+          {/* Comments Section */}
+          {ticket && (
+            <div className="mt-8 pt-6 border-t border-gray-200 dark:border-gray-700 space-y-4">
+              <h4 className="text-md font-semibold text-gray-900 dark:text-white flex items-center gap-2">
+                <MessageSquare size={18} className="text-brand-500" /> {t('tickets.comments')}
+              </h4>
+              {isLoadingComments ? (
+                <div className="text-center text-gray-500 dark:text-gray-400">{t('common.loading')}</div>
+              ) : comments && comments.length > 0 ? (
+                <div className="space-y-4 max-h-60 overflow-y-auto custom-scrollbar pr-2">
+                  {comments.map((comment) => (
+                    <div key={comment.id} className="bg-gray-50 dark:bg-gray-700 rounded-lg p-3 shadow-sm">
+                      <div className="flex items-center justify-between text-xs text-gray-500 dark:text-gray-400">
+                        <div className="flex items-center gap-1">
+                          <User size={12} />
+                          <span>{comment.authorFullName || comment.authorEmail}</span>
+                          {comment.isInternal && <span className="ml-2 px-1.5 py-0.5 rounded-full bg-orange-100 text-orange-800 dark:bg-orange-900/30 dark:text-orange-300 text-[10px]">{t('tickets.internal')}</span>}
+                        </div>
+                        <Clock size={12} className="inline-block mr-1" />
+                        <span>{new Date(comment.createdAt).toLocaleString()}</span>
+                      </div>
+                      <p className="mt-2 text-sm text-gray-700 dark:text-gray-200">{comment.commentText}</p>
+                    </div>
+                  ))}
+                </div>
+              ) : (
+                <p className="text-gray-500 dark:text-gray-400 text-sm">{t('tickets.noComments')}</p>
+              )}
+
+              {/* Add Comment Form */}
+              <form onSubmit={handleAddComment} className="pt-4 border-t border-gray-200 dark:border-gray-700 space-y-3">
+                <textarea
+                  value={newCommentText}
+                  onChange={(e) => setNewCommentText(e.target.value)}
+                  rows={3}
+                  className="w-full px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-brand-500 focus:border-brand-500"
+                  placeholder={t('tickets.addCommentPlaceholder')}
+                  required
+                />
+                <div className="flex items-center justify-between">
+                  <label className="flex items-center text-sm text-gray-700 dark:text-gray-300 cursor-pointer">
+                    <input
+                      type="checkbox"
+                      checked={isInternalComment}
+                      onChange={(e) => setIsInternalComment(e.target.checked)}
+                      className="form-checkbox h-4 w-4 text-brand-600 transition duration-150 ease-in-out rounded border-gray-300 focus:ring-brand-500 mr-2"
+                    />
+                    {t('tickets.internalComment')}
+                  </label>
+                  <button
+                    type="submit"
+                    className="flex items-center gap-2 px-4 py-2 bg-brand-600 text-white rounded-lg hover:bg-brand-700 transition-colors"
+                    disabled={createCommentMutation.isPending || !newCommentText.trim()}
+                  >
+                    <Send size={16} /> {createCommentMutation.isPending ? t('common.sending') : t('tickets.postComment')}
+                  </button>
+                </div>
+              </form>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default TicketModal;

frontend/src/hooks/useNotificationWebSocket.ts

@@ -0,0 +1,74 @@
+import { useEffect, useRef } from 'react';
+import { toast } from 'react-hot-toast'; // Assuming react-hot-toast for notifications
+import { useCurrentUser } from './useAuth'; // To get current user and their tenant
+
+/**
+ * Custom hook to manage WebSocket connection for real-time notifications.
+ */
+export const useNotificationWebSocket = () => {
+  const wsRef = useRef<WebSocket | null>(null);
+  const { data: user } = useCurrentUser(); // Get current user for authentication
+
+  useEffect(() => {
+    if (!user || !user.id) {
+      // If no user or not authenticated, ensure WebSocket is closed
+      if (wsRef.current && wsRef.current.readyState === WebSocket.OPEN) {
+        wsRef.current.close();
+      }
+      return;
+    }
+
+    // Determine WebSocket URL dynamically
+    const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+    // The current host needs to be adjusted if the WebSocket server is on a different subdomain/port
+    // For local development, assuming it's on the same host/port as the frontend API
+    const wsHost = window.location.host; 
+    const wsUrl = `${protocol}//${wsHost}/ws/notifications/`;
+
+    const connectWebSocket = () => {
+      wsRef.current = new WebSocket(wsUrl);
+
+      wsRef.current.onopen = () => {
+        console.log('Notification WebSocket connected');
+      };
+
+      wsRef.current.onmessage = (event) => {
+        const data = JSON.parse(event.data);
+        console.log('Notification received:', data);
+        // Display notification using a toast library
+        toast.success(data.message, {
+          duration: 5000,
+          position: 'top-right',
+        });
+      };
+
+      wsRef.current.onclose = (event) => {
+        console.log('Notification WebSocket disconnected:', event);
+        // Attempt to reconnect after a short delay
+        setTimeout(() => {
+          if (user && user.id) { // Only attempt reconnect if user is still authenticated
+            console.log('Attempting to reconnect Notification WebSocket...');
+            connectWebSocket();
+          }
+        }, 3000);
+      };
+
+      wsRef.current.onerror = (error) => {
+        console.error('Notification WebSocket error:', error);
+        wsRef.current?.close();
+      };
+    };
+
+    connectWebSocket();
+
+    // Clean up WebSocket connection on component unmount or user logout
+    return () => {
+      if (wsRef.current && wsRef.current.readyState === WebSocket.OPEN) {
+        wsRef.current.close();
+      }
+    };
+  }, [user]); // Reconnect if user changes (e.g., login/logout)
+
+  // You can expose functions here to manually send messages if needed
+  // For notifications, it's typically server-to-client only
+};

frontend/src/hooks/useTickets.ts

@@ -0,0 +1,176 @@
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import * as ticketsApi from '../api/tickets'; // Import all functions from the API service
+import { Ticket, TicketComment, User } from '../types'; // Assuming User type is also needed
+
+// Define interfaces for filters and mutation payloads if necessary
+interface TicketFilters {
+  status?: Ticket['status'];
+  type?: Ticket['ticketType'];
+  assignee?: User['id'];
+  creator?: User['id'];
+  // Add other filters as needed
+}
+
+/**
+ * Hook to fetch a list of tickets with optional filters
+ */
+export const useTickets = (filters?: TicketFilters) => {
+  return useQuery<Ticket[]>({
+    queryKey: ['tickets', filters],
+    queryFn: async () => {
+      // Construct query parameters from filters object
+      const params = new URLSearchParams();
+      if (filters?.status) params.append('status', filters.status);
+      if (filters?.type) params.append('ticket_type', filters.type); // Backend expects 'ticket_type'
+      if (filters?.assignee) params.append('assignee', String(filters.assignee));
+      if (filters?.creator) params.append('creator', String(filters.creator));
+
+      const { data } = await ticketsApi.getTickets(); // Pass params if API supported
+      // Transform data to match frontend types if necessary (e.g., date strings to Date objects)
+      return data.map((ticket: any) => ({
+        ...ticket,
+        id: String(ticket.id),
+        tenant: ticket.tenant ? String(ticket.tenant) : undefined,
+        creator: String(ticket.creator),
+        assignee: ticket.assignee ? String(ticket.assignee) : undefined,
+        createdAt: new Date(ticket.created_at).toISOString(),
+        updatedAt: new Date(ticket.updated_at).toISOString(),
+        resolvedAt: ticket.resolved_at ? new Date(ticket.resolved_at).toISOString() : undefined,
+        ticketType: ticket.ticket_type, // Map backend 'ticket_type' to frontend 'ticketType'
+        commentText: ticket.comment_text, // Assuming this is from comments, if not, remove
+      }));
+    },
+  });
+};
+
+/**
+ * Hook to fetch a single ticket by ID
+ */
+export const useTicket = (id: string | undefined) => {
+  return useQuery<Ticket>({
+    queryKey: ['tickets', id],
+    queryFn: async () => {
+      const { data } = await ticketsApi.getTicket(id as string);
+      return {
+        ...data,
+        id: String(data.id),
+        tenant: data.tenant ? String(data.tenant) : undefined,
+        creator: String(data.creator),
+        assignee: data.assignee ? String(data.assignee) : undefined,
+        createdAt: new Date(data.created_at).toISOString(),
+        updatedAt: new Date(data.updated_at).toISOString(),
+        resolvedAt: data.resolved_at ? new Date(data.resolved_at).toISOString() : undefined,
+        ticketType: data.ticket_type,
+      };
+    },
+    enabled: !!id, // Only run query if ID is provided
+  });
+};
+
+/**
+ * Hook to create a new ticket
+ */
+export const useCreateTicket = () => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: async (ticketData: Partial<Omit<Ticket, 'id' | 'comments' | 'creator' | 'creatorEmail' | 'creatorFullName' | 'createdAt' | 'updatedAt' | 'resolvedAt'>>) => {
+      // Map frontend naming to backend naming
+      const dataToSend = {
+        ...ticketData,
+        ticket_type: ticketData.ticketType,
+        assignee: ticketData.assignee || null,
+        // No need to send creator or tenant, backend serializer handles it
+      };
+      const response = await ticketsApi.createTicket(dataToSend);
+      return response.data;
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['tickets'] }); // Invalidate tickets list to refetch
+    },
+  });
+};
+
+/**
+ * Hook to update an existing ticket
+ */
+export const useUpdateTicket = () => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: async ({ id, updates }: { id: string; updates: Partial<Ticket> }) => {
+      const dataToSend = {
+        ...updates,
+        ticket_type: updates.ticketType,
+        assignee: updates.assignee || null,
+        // creator, tenant, comments are read-only on update
+      };
+      const response = await ticketsApi.updateTicket(id, dataToSend);
+      return response.data;
+    },
+    onSuccess: (data, variables) => {
+      queryClient.invalidateQueries({ queryKey: ['tickets'] });
+      queryClient.invalidateQueries({ queryKey: ['tickets', variables.id] }); // Invalidate specific ticket
+    },
+  });
+};
+
+/**
+ * Hook to delete a ticket
+ */
+export const useDeleteTicket = () => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: async (id: string) => {
+      await ticketsApi.deleteTicket(id);
+      return id;
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['tickets'] });
+    },
+  });
+};
+
+/**
+ * Hook to fetch comments for a specific ticket
+ */
+export const useTicketComments = (ticketId: string | undefined) => {
+  return useQuery<TicketComment[]>({
+    queryKey: ['ticketComments', ticketId],
+    queryFn: async () => {
+      if (!ticketId) return [];
+      const { data } = await ticketsApi.getTicketComments(ticketId);
+      return data.map((comment: any) => ({
+        ...comment,
+        id: String(comment.id),
+        ticket: String(comment.ticket),
+        author: String(comment.author),
+        createdAt: new Date(comment.created_at).toISOString(),
+        commentText: comment.comment_text, // Map backend 'comment_text'
+        isInternal: comment.is_internal, // Map backend 'is_internal'
+      }));
+    },
+    enabled: !!ticketId, // Only run query if ticketId is provided
+  });
+};
+
+/**
+ * Hook to add a new comment to a ticket
+ */
+export const useCreateTicketComment = () => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: async ({ ticketId, commentData }: { ticketId: string; commentData: Partial<TicketComment> }) => {
+      const dataToSend = {
+        ...commentData,
+        comment_text: commentData.commentText,
+        is_internal: commentData.isInternal,
+        // ticket and author are handled by backend serializer
+      };
+      const response = await ticketsApi.createTicketComment(ticketId, dataToSend);
+      return response.data;
+    },
+    onSuccess: (data, variables) => {
+      queryClient.invalidateQueries({ queryKey: ['ticketComments', variables.ticketId] }); // Invalidate comments for this ticket
+      queryClient.invalidateQueries({ queryKey: ['tickets', variables.ticketId] }); // Ticket might have a new comment count
+    },
+  });
+};

frontend/src/hooks/useUsers.ts

@@ -0,0 +1,17 @@
+import { useQuery } from '@tanstack/react-query';
+import { apiClient } from '../api/client';
+import { User } from '../types';
+
+/**
+ * Hook to fetch all users (staff, owners, customers) for the current business.
+ * This can be filtered/refined later based on specific needs (e.g., only staff).
+ */
+export const useUsers = () => {
+  return useQuery<User[]>({
+    queryKey: ['businessUsers'],
+    queryFn: async () => {
+      const response = await apiClient.get('/api/business/users/');
+      return response.data;
+    },
+  });
+};

frontend/src/i18n/locales/en.json

@@ -64,7 +64,8 @@
     "businesses": "Businesses",
     "users": "Users",
     "support": "Support",
-    "platformSettings": "Platform Settings"
+    "platformSettings": "Platform Settings",
+    "tickets": "Tickets"
   },
   "staff": {
     "title": "Staff & Management",
@@ -79,6 +80,38 @@
     "inviteModalTitle": "Invite Staff",
     "inviteModalDescription": "User invitation flow would go here."
   },
+  "tickets": {
+    "title": "Support Tickets",
+    "description": "Manage your support requests and inquiries.",
+    "newTicket": "New Ticket",
+    "errorLoading": "Error loading tickets",
+    "subject": "Subject",
+    "status": "Status",
+    "priority": "Priority",
+    "category": "Category",
+    "assignee": "Assignee",
+    "createdAt": "Created At",
+    "unassigned": "Unassigned",
+    "noTicketsFound": "No tickets found.",
+    "ticketDetails": "Ticket Details",
+    "categoryPlaceholder": "e.g., Billing, Technical, Feature Request",
+    "createTicket": "Create Ticket",
+    "updateTicket": "Update Ticket",
+    "comments": "Comments",
+    "noComments": "No comments yet.",
+    "internal": "Internal",
+    "addCommentPlaceholder": "Add a comment...",
+    "internalComment": "Internal Comment",
+    "postComment": "Post Comment",
+    "priority.low": "Low",
+    "priority.medium": "Medium",
+    "priority.high": "High",
+    "priority.urgent": "Urgent",
+    "status.open": "Open",
+    "status.in_progress": "In Progress",
+    "status.resolved": "Resolved",
+    "status.closed": "Closed"
+  },
   "dashboard": {
     "title": "Dashboard",
     "welcome": "Welcome, {{name}}!",

frontend/src/pages/TicketsPage.tsx

@@ -0,0 +1,201 @@
+import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Plus, Tag, Clock, CircleDot, User, ArrowRight } from 'lucide-react';
+import { useTickets } from '../hooks/useTickets';
+import { Ticket } from '../types';
+import TicketModal from '../components/TicketModal';
+
+const TicketStatusBadge: React.FC<{ status: Ticket['status'] }> = ({ status }) => {
+  let colorClass = '';
+  switch (status) {
+    case 'OPEN':
+      colorClass = 'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-300';
+      break;
+    case 'IN_PROGRESS':
+      colorClass = 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-300';
+      break;
+    case 'RESOLVED':
+      colorClass = 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300';
+      break;
+    case 'CLOSED':
+      colorClass = 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300';
+      break;
+    default:
+      colorClass = 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300';
+  }
+  return (
+    <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${colorClass}`}>
+      {status.replace('_', ' ').toLowerCase()}
+    </span>
+  );
+};
+
+const TicketPriorityBadge: React.FC<{ priority: Ticket['priority'] }> = ({ priority }) => {
+  let colorClass = '';
+  switch (priority) {
+    case 'LOW':
+      colorClass = 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300';
+      break;
+    case 'MEDIUM':
+      colorClass = 'bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300';
+      break;
+    case 'HIGH':
+      colorClass = 'bg-orange-100 text-orange-800 dark:bg-orange-900/30 dark:text-orange-300';
+      break;
+    case 'URGENT':
+      colorClass = 'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-300';
+      break;
+    default:
+      colorClass = 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300';
+  }
+  return (
+    <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${colorClass}`}>
+      {priority.toLowerCase()}
+    </span>
+  );
+};
+
+const TicketsPage: React.FC = () => {
+  const { t } = useTranslation();
+  const { data: tickets, isLoading, error } = useTickets({ type: 'PLATFORM' }); // Filter for platform tickets
+  const [isTicketModalOpen, setIsTicketModalOpen] = useState(false);
+  const [selectedTicket, setSelectedTicket] = useState<Ticket | null>(null);
+
+  const openTicketModal = (ticket: Ticket | null = null) => {
+    setSelectedTicket(ticket);
+    setIsTicketModalOpen(true);
+  };
+
+  const closeTicketModal = () => {
+    setSelectedTicket(null);
+    setIsTicketModalOpen(false);
+  };
+
+  if (isLoading) {
+    return (
+      <div className="p-8 max-w-7xl mx-auto">
+        <div className="flex items-center justify-center py-12">
+          <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-brand-600"></div>
+        </div>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="p-8 max-w-7xl mx-auto">
+        <div className="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-4">
+          <p className="text-red-800 dark:text-red-300">{t('tickets.errorLoading')}: {(error as Error).message}</p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="p-8 max-w-7xl mx-auto space-y-6">
+      {/* Header */}
+      <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
+        <div>
+          <h2 className="text-2xl font-bold text-gray-900 dark:text-white">{t('tickets.title')}</h2>
+          <p className="text-gray-500 dark:text-gray-400">{t('tickets.description')}</p>
+        </div>
+        <button
+          onClick={() => openTicketModal()}
+          className="flex items-center justify-center gap-2 px-4 py-2 bg-brand-600 text-white rounded-lg hover:bg-brand-700 transition-colors shadow-sm font-medium"
+        >
+          <Plus size={18} />
+          {t('tickets.newTicket')}
+        </button>
+      </div>
+
+      {/* Tickets List */}
+      <div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 shadow-sm overflow-hidden transition-colors duration-200">
+        <div className="overflow-x-auto">
+          <table className="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
+            <thead className="bg-gray-50 dark:bg-gray-700">
+              <tr>
+                <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+                  {t('tickets.subject')}
+                </th>
+                <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+                  {t('tickets.status')}
+                </th>
+                <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+                  {t('tickets.priority')}
+                </th>
+                <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+                  {t('tickets.category')}
+                </th>
+                <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+                  {t('tickets.assignee')}
+                </th>
+                <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+                  {t('tickets.createdAt')}
+                </th>
+                <th scope="col" className="relative px-6 py-3">
+                  <span className="sr-only">{t('common.actions')}</span>
+                </th>
+              </tr>
+            </thead>
+            <tbody className="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
+              {tickets && tickets.length > 0 ? (
+                tickets.map((ticket) => (
+                  <tr key={ticket.id} className="hover:bg-gray-50 dark:hover:bg-gray-700/30 transition-colors">
+                    <td className="px-6 py-4 whitespace-nowrap">
+                      <div className="flex items-center">
+                        <div className="text-sm font-medium text-gray-900 dark:text-white">{ticket.subject}</div>
+                      </div>
+                    </td>
+                    <td className="px-6 py-4 whitespace-nowrap">
+                      <TicketStatusBadge status={ticket.status} />
+                    </td>
+                    <td className="px-6 py-4 whitespace-nowrap">
+                      <TicketPriorityBadge priority={ticket.priority} />
+                    </td>
+                    <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
+                      {ticket.category || t('common.none')}
+                    </td>
+                    <td className="px-6 py-4 whitespace-nowrap">
+                      {ticket.assigneeFullName ? (
+                        <div className="flex items-center gap-2 text-sm text-gray-900 dark:text-white">
+                            <User size={16} className="text-brand-500" />
+                            {ticket.assigneeFullName}
+                        </div>
+                      ) : (
+                        <span className="text-sm text-gray-500 dark:text-gray-400">{t('tickets.unassigned')}</span>
+                      )}
+                    </td>
+                    <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
+                      {new Date(ticket.createdAt).toLocaleDateString()}
+                    </td>
+                    <td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
+                      <button onClick={() => openTicketModal(ticket)} className="text-brand-600 hover:text-brand-900 dark:text-brand-400 dark:hover:text-brand-300">
+                        {t('common.view')} <ArrowRight size={16} className="inline-block ml-1" />
+                      </button>
+                    </td>
+                  </tr>
+                ))
+              ) : (
+                <tr>
+                  <td colSpan={7} className="px-6 py-12 text-center text-gray-500 dark:text-gray-400">
+                    {t('tickets.noTicketsFound')}
+                  </td>
+                </tr>
+              )}
+            </tbody>
+          </table>
+        </div>
+      </div>
+
+      {/* Ticket Create/Detail Modal */}
+      {isTicketModalOpen && (
+        <TicketModal
+          ticket={selectedTicket}
+          onClose={closeTicketModal}
+        />
+      )}
+    </div>
+  );
+};
+
+export default TicketsPage;

frontend/src/types.ts

@@ -179,13 +179,40 @@ export interface Metric {
 
 // --- Platform Types ---
 
+export type TicketType = 'PLATFORM' | 'CUSTOMER' | 'STAFF_REQUEST';
+export type TicketStatus = 'OPEN' | 'IN_PROGRESS' | 'RESOLVED' | 'CLOSED';
+export type TicketPriority = 'LOW' | 'MEDIUM' | 'HIGH' | 'URGENT';
+
+export interface TicketComment {
+  id: string;
+  ticket: string; // Ticket ID
+  author: string; // User ID
+  authorEmail: string;
+  authorFullName: string;
+  commentText: string;
+  createdAt: string; // Date string
+  isInternal: boolean;
+}
+
 export interface Ticket {
   id: string;
+  tenant?: string; // Tenant ID, optional for platform tickets
+  creator: string; // User ID
+  creatorEmail: string;
+  creatorFullName: string;
+  assignee?: string; // User ID, optional
+  assigneeEmail?: string;
+  assigneeFullName?: string;
+  ticketType: TicketType;
+  status: TicketStatus;
+  priority: TicketPriority;
   subject: string;
-  businessName: string;
-  priority: 'Low' | 'Medium' | 'High' | 'Critical';
-  status: 'Open' | 'In Progress' | 'Resolved';
-  createdAt: Date;
+  description: string;
+  category?: string;
+  createdAt: string; // Date string
+  updatedAt: string; // Date string
+  resolvedAt?: string; // Date string
+  comments?: TicketComment[]; // Nested comments
 }
 
 export interface PlatformMetric {