feat: Enhance ticketing system with categories, templates, SLA tracking, and fix frontend integration

- Add ticket categories (billing, technical, feature_request, etc.) with type-specific options
- Add TicketTemplate and CannedResponse models for quick ticket creation
- Implement SLA tracking with due_at and first_response_at fields
- Add is_platform_admin and is_customer helper functions to fix permission checks
- Register models in Django admin with filters and fieldsets
- Enhance signals with error handling for WebSocket notifications
- Fix frontend API URLs for templates and canned responses
- Update PlatformSupport page to use real ticketing API
- Add comprehensive i18n translations for all ticket fields

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

frontend/src/App.tsx

@@ -55,7 +55,7 @@ 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 Tickets from './pages/Tickets'; // Import Tickets page
 import { Toaster } from 'react-hot-toast'; // Import Toaster for notifications
 
 const queryClient = new QueryClient({
@@ -469,7 +469,7 @@ const AppContent: React.FC = () => {
             element={user.role === 'resource' ? <ResourceDashboard /> : <Dashboard />}
           />
           <Route path="/scheduler" element={<Scheduler />} />
-          <Route path="/tickets" element={<TicketsPage />} />
+          <Route path="/tickets" element={<Tickets />} />
           <Route
             path="/customers"
             element={

frontend/src/api/tickets.ts

@@ -1,8 +1,23 @@
-import { apiClient } from './client';
-import { Ticket, TicketComment } from '../types'; // Assuming types.ts will define these
+import apiClient from './client';
+import { Ticket, TicketComment, TicketTemplate, CannedResponse, TicketStatus, TicketPriority, TicketCategory, TicketType } from '../types';
 
-export const getTickets = async (): Promise<Ticket[]> => {
-  const response = await apiClient.get('/api/tickets/');
+export interface TicketFilters {
+  status?: TicketStatus;
+  priority?: TicketPriority;
+  category?: TicketCategory;
+  ticketType?: TicketType;
+  assignee?: string;
+}
+
+export const getTickets = async (filters?: TicketFilters): Promise<Ticket[]> => {
+  const params = new URLSearchParams();
+  if (filters?.status) params.append('status', filters.status);
+  if (filters?.priority) params.append('priority', filters.priority);
+  if (filters?.category) params.append('category', filters.category);
+  if (filters?.ticketType) params.append('ticket_type', filters.ticketType);
+  if (filters?.assignee) params.append('assignee', filters.assignee);
+
+  const response = await apiClient.get(`/api/tickets/${params.toString() ? `?${params.toString()}` : ''}`);
   return response.data;
 };
 
@@ -34,3 +49,20 @@ export const createTicketComment = async (ticketId: string, data: Partial<Ticket
   const response = await apiClient.post(`/api/tickets/${ticketId}/comments/`, data);
   return response.data;
 };
+
+// Ticket Templates
+export const getTicketTemplates = async (): Promise<TicketTemplate[]> => {
+  const response = await apiClient.get('/api/tickets/templates/');
+  return response.data;
+};
+
+export const getTicketTemplate = async (id: string): Promise<TicketTemplate> => {
+  const response = await apiClient.get(`/api/tickets/templates/${id}/`);
+  return response.data;
+};
+
+// Canned Responses
+export const getCannedResponses = async (): Promise<CannedResponse[]> => {
+  const response = await apiClient.get('/api/tickets/canned-responses/');
+  return response.data;
+};

frontend/src/components/Sidebar.tsx

@@ -10,7 +10,8 @@ import {
   MessageSquare,
   LogOut,
   ClipboardList,
-  Briefcase
+  Briefcase,
+  Ticket
 } from 'lucide-react';
 import { Business, User } from '../types';
 import { useLogout } from '../hooks/useAuth';
@@ -135,7 +136,7 @@ const Sidebar: React.FC<SidebarProps> = ({ business, user, isCollapsed, toggleCo
               {!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 */}
+              <Ticket size={20} className="shrink-0" />
               {!isCollapsed && <span>{t('nav.tickets')}</span>}
             </Link>
           </>

frontend/src/components/TicketModal.tsx

@@ -1,7 +1,7 @@
 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 { X, User, Send, MessageSquare, Clock, AlertCircle } from 'lucide-react';
+import { Ticket, TicketComment, TicketStatus, TicketPriority, TicketCategory, TicketType } 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';
@@ -9,15 +9,25 @@ import { useQueryClient } from '@tanstack/react-query';
 interface TicketModalProps {
   ticket?: Ticket | null; // If provided, it's an edit/detail view
   onClose: () => void;
+  defaultTicketType?: TicketType; // Allow specifying default ticket type
 }
 
-const TicketModal: React.FC<TicketModalProps> = ({ ticket, onClose }) => {
+// Category options grouped by ticket type
+const CATEGORY_OPTIONS: Record<TicketType, TicketCategory[]> = {
+  PLATFORM: ['BILLING', 'TECHNICAL', 'FEATURE_REQUEST', 'ACCOUNT', 'OTHER'],
+  CUSTOMER: ['APPOINTMENT', 'REFUND', 'COMPLAINT', 'GENERAL_INQUIRY', 'OTHER'],
+  STAFF_REQUEST: ['TIME_OFF', 'SCHEDULE_CHANGE', 'EQUIPMENT', 'OTHER'],
+  INTERNAL: ['EQUIPMENT', 'GENERAL_INQUIRY', 'OTHER'],
+};
+
+const TicketModal: React.FC<TicketModalProps> = ({ ticket, onClose, defaultTicketType = 'CUSTOMER' }) => {
   const { t } = useTranslation();
-  const queryClient = useQueryClient(); // Access the query client for invalidation/updates
+  const queryClient = useQueryClient();
   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 [category, setCategory] = useState<TicketCategory>(ticket?.category || 'OTHER');
+  const [ticketType, setTicketType] = useState<TicketType>(ticket?.ticketType || defaultTicketType);
   const [assigneeId, setAssigneeId] = useState<string | undefined>(ticket?.assignee);
   const [status, setStatus] = useState<TicketStatus>(ticket?.status || 'OPEN');
   const [newCommentText, setNewCommentText] = useState('');
@@ -34,12 +44,16 @@ const TicketModal: React.FC<TicketModalProps> = ({ ticket, onClose }) => {
   const updateTicketMutation = useUpdateTicket();
   const createCommentMutation = useCreateTicketComment();
 
+  // Get available categories based on ticket type
+  const availableCategories = CATEGORY_OPTIONS[ticketType] || CATEGORY_OPTIONS.CUSTOMER;
+
   useEffect(() => {
     if (ticket) {
       setSubject(ticket.subject);
       setDescription(ticket.description);
       setPriority(ticket.priority);
-      setCategory(ticket.category || '');
+      setCategory(ticket.category || 'OTHER');
+      setTicketType(ticket.ticketType);
       setAssigneeId(ticket.assignee);
       setStatus(ticket.status);
     } else {
@@ -47,11 +61,19 @@ const TicketModal: React.FC<TicketModalProps> = ({ ticket, onClose }) => {
       setSubject('');
       setDescription('');
       setPriority('MEDIUM');
-      setCategory('');
+      setCategory('OTHER');
+      setTicketType(defaultTicketType);
       setAssigneeId(undefined);
       setStatus('OPEN');
     }
-  }, [ticket]);
+  }, [ticket, defaultTicketType]);
+
+  // Reset category when ticket type changes (if current category not available)
+  useEffect(() => {
+    if (!availableCategories.includes(category)) {
+      setCategory('OTHER');
+    }
+  }, [ticketType, availableCategories, category]);
 
   const handleSubmitTicket = async (e: React.FormEvent) => {
     e.preventDefault();
@@ -60,10 +82,10 @@ const TicketModal: React.FC<TicketModalProps> = ({ ticket, onClose }) => {
       subject,
       description,
       priority,
-      category: category || undefined,
+      category,
       assignee: assigneeId,
-      status: status,
-      ticketType: 'PLATFORM', // For now, assume platform tickets from this modal
+      status,
+      ticketType,
     };
 
     if (ticket) {
@@ -91,8 +113,9 @@ const TicketModal: React.FC<TicketModalProps> = ({ ticket, onClose }) => {
     queryClient.invalidateQueries({ queryKey: ['ticketComments', ticket.id] });
   };
   
-  const statusOptions = Object.values(TicketStatus);
-  const priorityOptions = Object.values(TicketPriority);
+  const statusOptions: TicketStatus[] = ['OPEN', 'IN_PROGRESS', 'AWAITING_RESPONSE', 'RESOLVED', 'CLOSED'];
+  const priorityOptions: TicketPriority[] = ['LOW', 'MEDIUM', 'HIGH', 'URGENT'];
+  const ticketTypeOptions: TicketType[] = ['CUSTOMER', 'STAFF_REQUEST', 'INTERNAL', 'PLATFORM'];
 
   return (
     <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50 backdrop-blur-sm" onClick={onClose}>
@@ -142,6 +165,25 @@ const TicketModal: React.FC<TicketModalProps> = ({ ticket, onClose }) => {
               />
             </div>
 
+            {/* Ticket Type (only for new tickets) */}
+            {!ticket && (
+              <div>
+                <label htmlFor="ticketType" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                  {t('tickets.ticketType')}
+                </label>
+                <select
+                  id="ticketType"
+                  value={ticketType}
+                  onChange={(e) => setTicketType(e.target.value as TicketType)}
+                  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"
+                >
+                  {ticketTypeOptions.map(opt => (
+                    <option key={opt} value={opt}>{t(`tickets.types.${opt.toLowerCase()}`)}</option>
+                  ))}
+                </select>
+              </div>
+            )}
+
             {/* Priority & Category */}
             <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
               <div>
@@ -156,7 +198,7 @@ const TicketModal: React.FC<TicketModalProps> = ({ ticket, onClose }) => {
                   disabled={!!ticket && !createTicketMutation.isPending && !updateTicketMutation.isPending}
                 >
                   {priorityOptions.map(opt => (
-                    <option key={opt} value={opt}>{t(`tickets.priority.${opt.toLowerCase()}`)}</option>
+                    <option key={opt} value={opt}>{t(`tickets.priorities.${opt.toLowerCase()}`)}</option>
                   ))}
                 </select>
               </div>
@@ -164,15 +206,17 @@ const TicketModal: React.FC<TicketModalProps> = ({ ticket, onClose }) => {
                 <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"
+                <select
                   id="category"
                   value={category}
-                  onChange={(e) => setCategory(e.target.value)}
+                  onChange={(e) => setCategory(e.target.value as TicketCategory)}
                   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}
-                />
+                >
+                  {availableCategories.map(cat => (
+                    <option key={cat} value={cat}>{t(`tickets.categories.${cat.toLowerCase()}`)}</option>
+                  ))}
+                </select>
               </div>
             </div>
 

frontend/src/hooks/useBusiness.ts

@@ -46,6 +46,7 @@ export const useCurrentBusiness = () => {
         initialSetupComplete: data.initial_setup_complete,
         websitePages: data.website_pages || {},
         customerDashboardContent: data.customer_dashboard_content || [],
+        paymentsEnabled: data.payments_enabled ?? false,
         // Platform-controlled permissions
         canManageOAuthCredentials: data.can_manage_oauth_credentials || false,
       };

frontend/src/hooks/useTickets.ts

@@ -1,14 +1,14 @@
 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
+import { Ticket, TicketComment, TicketTemplate, CannedResponse, TicketStatus, TicketPriority, TicketCategory, TicketType } from '../types';
 
 // 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
+  status?: TicketStatus;
+  priority?: TicketPriority;
+  category?: TicketCategory;
+  ticketType?: TicketType;
+  assignee?: string;
 }
 
 /**
@@ -18,26 +18,39 @@ 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));
+      // Use the API filters
+      const apiFilters: ticketsApi.TicketFilters = {};
+      if (filters?.status) apiFilters.status = filters.status;
+      if (filters?.priority) apiFilters.priority = filters.priority;
+      if (filters?.category) apiFilters.category = filters.category;
+      if (filters?.ticketType) apiFilters.ticketType = filters.ticketType;
+      if (filters?.assignee) apiFilters.assignee = filters.assignee;
 
-      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)
+      const data = await ticketsApi.getTickets(apiFilters);
+      // Transform data to match frontend types if necessary (e.g., snake_case to camelCase)
       return data.map((ticket: any) => ({
-        ...ticket,
         id: String(ticket.id),
         tenant: ticket.tenant ? String(ticket.tenant) : undefined,
         creator: String(ticket.creator),
+        creatorEmail: ticket.creator_email,
+        creatorFullName: ticket.creator_full_name,
         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
+        assigneeEmail: ticket.assignee_email,
+        assigneeFullName: ticket.assignee_full_name,
+        ticketType: ticket.ticket_type,
+        status: ticket.status,
+        priority: ticket.priority,
+        subject: ticket.subject,
+        description: ticket.description,
+        category: ticket.category,
+        relatedAppointmentId: ticket.related_appointment_id || undefined,
+        dueAt: ticket.due_at,
+        firstResponseAt: ticket.first_response_at,
+        isOverdue: ticket.is_overdue,
+        createdAt: ticket.created_at,
+        updatedAt: ticket.updated_at,
+        resolvedAt: ticket.resolved_at,
+        comments: ticket.comments,
       }));
     },
   });
@@ -50,17 +63,30 @@ export const useTicket = (id: string | undefined) => {
   return useQuery<Ticket>({
     queryKey: ['tickets', id],
     queryFn: async () => {
-      const { data } = await ticketsApi.getTicket(id as string);
+      const ticket: any = 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,
+        id: String(ticket.id),
+        tenant: ticket.tenant ? String(ticket.tenant) : undefined,
+        creator: String(ticket.creator),
+        creatorEmail: ticket.creator_email,
+        creatorFullName: ticket.creator_full_name,
+        assignee: ticket.assignee ? String(ticket.assignee) : undefined,
+        assigneeEmail: ticket.assignee_email,
+        assigneeFullName: ticket.assignee_full_name,
+        ticketType: ticket.ticket_type,
+        status: ticket.status,
+        priority: ticket.priority,
+        subject: ticket.subject,
+        description: ticket.description,
+        category: ticket.category,
+        relatedAppointmentId: ticket.related_appointment_id || undefined,
+        dueAt: ticket.due_at,
+        firstResponseAt: ticket.first_response_at,
+        isOverdue: ticket.is_overdue,
+        createdAt: ticket.created_at,
+        updatedAt: ticket.updated_at,
+        resolvedAt: ticket.resolved_at,
+        comments: ticket.comments,
       };
     },
     enabled: !!id, // Only run query if ID is provided
@@ -82,7 +108,7 @@ export const useCreateTicket = () => {
         // No need to send creator or tenant, backend serializer handles it
       };
       const response = await ticketsApi.createTicket(dataToSend);
-      return response.data;
+      return response;
     },
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ['tickets'] }); // Invalidate tickets list to refetch
@@ -104,7 +130,7 @@ export const useUpdateTicket = () => {
         // creator, tenant, comments are read-only on update
       };
       const response = await ticketsApi.updateTicket(id, dataToSend);
-      return response.data;
+      return response;
     },
     onSuccess: (data, variables) => {
       queryClient.invalidateQueries({ queryKey: ['tickets'] });
@@ -137,8 +163,8 @@ export const useTicketComments = (ticketId: string | undefined) => {
     queryKey: ['ticketComments', ticketId],
     queryFn: async () => {
       if (!ticketId) return [];
-      const { data } = await ticketsApi.getTicketComments(ticketId);
-      return data.map((comment: any) => ({
+      const comments = await ticketsApi.getTicketComments(ticketId);
+      return comments.map((comment: any) => ({
         ...comment,
         id: String(comment.id),
         ticket: String(comment.ticket),
@@ -166,7 +192,7 @@ export const useCreateTicketComment = () => {
         // ticket and author are handled by backend serializer
       };
       const response = await ticketsApi.createTicketComment(ticketId, dataToSend);
-      return response.data;
+      return response;
     },
     onSuccess: (data, variables) => {
       queryClient.invalidateQueries({ queryKey: ['ticketComments', variables.ticketId] }); // Invalidate comments for this ticket
@@ -174,3 +200,77 @@ export const useCreateTicketComment = () => {
     },
   });
 };
+
+/**
+ * Hook to fetch ticket templates
+ */
+export const useTicketTemplates = () => {
+  return useQuery<TicketTemplate[]>({
+    queryKey: ['ticketTemplates'],
+    queryFn: async () => {
+      const data = await ticketsApi.getTicketTemplates();
+      return data.map((template: any) => ({
+        id: String(template.id),
+        tenant: template.tenant ? String(template.tenant) : undefined,
+        name: template.name,
+        description: template.description,
+        ticketType: template.ticket_type,
+        category: template.category,
+        defaultPriority: template.default_priority,
+        subjectTemplate: template.subject_template,
+        descriptionTemplate: template.description_template,
+        isActive: template.is_active,
+        createdAt: template.created_at,
+      }));
+    },
+  });
+};
+
+/**
+ * Hook to fetch a single ticket template by ID
+ */
+export const useTicketTemplate = (id: string | undefined) => {
+  return useQuery<TicketTemplate>({
+    queryKey: ['ticketTemplates', id],
+    queryFn: async () => {
+      const template: any = await ticketsApi.getTicketTemplate(id as string);
+      return {
+        id: String(template.id),
+        tenant: template.tenant ? String(template.tenant) : undefined,
+        name: template.name,
+        description: template.description,
+        ticketType: template.ticket_type,
+        category: template.category,
+        defaultPriority: template.default_priority,
+        subjectTemplate: template.subject_template,
+        descriptionTemplate: template.description_template,
+        isActive: template.is_active,
+        createdAt: template.created_at,
+      };
+    },
+    enabled: !!id,
+  });
+};
+
+/**
+ * Hook to fetch canned responses
+ */
+export const useCannedResponses = () => {
+  return useQuery<CannedResponse[]>({
+    queryKey: ['cannedResponses'],
+    queryFn: async () => {
+      const data = await ticketsApi.getCannedResponses();
+      return data.map((response: any) => ({
+        id: String(response.id),
+        tenant: response.tenant ? String(response.tenant) : undefined,
+        title: response.title,
+        content: response.content,
+        category: response.category,
+        isActive: response.is_active,
+        useCount: response.use_count,
+        createdBy: response.created_by ? String(response.created_by) : undefined,
+        createdAt: response.created_at,
+      }));
+    },
+  });
+};

frontend/src/hooks/useUsers.ts

@@ -1,5 +1,5 @@
 import { useQuery } from '@tanstack/react-query';
-import { apiClient } from '../api/client';
+import apiClient from '../api/client';
 import { User } from '../types';
 
 /**

frontend/src/i18n/locales/en.json

@@ -83,18 +83,23 @@
   "tickets": {
     "title": "Support Tickets",
     "description": "Manage your support requests and inquiries.",
+    "descriptionOwner": "Manage support tickets for your business",
+    "descriptionStaff": "View and create support tickets",
     "newTicket": "New Ticket",
     "errorLoading": "Error loading tickets",
     "subject": "Subject",
+    "description": "Description",
     "status": "Status",
     "priority": "Priority",
     "category": "Category",
+    "ticketType": "Ticket Type",
     "assignee": "Assignee",
+    "assignedTo": "Assigned to",
     "createdAt": "Created At",
     "unassigned": "Unassigned",
-    "noTicketsFound": "No tickets found.",
+    "noTicketsFound": "No tickets found",
+    "noTicketsInStatus": "No tickets with this status",
     "ticketDetails": "Ticket Details",
-    "categoryPlaceholder": "e.g., Billing, Technical, Feature Request",
     "createTicket": "Create Ticket",
     "updateTicket": "Update Ticket",
     "comments": "Comments",
@@ -103,14 +108,47 @@
     "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"
+    "tabs": {
+      "all": "All",
+      "open": "Open",
+      "inProgress": "In Progress",
+      "awaitingResponse": "Awaiting Response",
+      "resolved": "Resolved",
+      "closed": "Closed"
+    },
+    "priorities": {
+      "low": "Low",
+      "medium": "Medium",
+      "high": "High",
+      "urgent": "Urgent"
+    },
+    "statuses": {
+      "open": "Open",
+      "in_progress": "In Progress",
+      "awaiting_response": "Awaiting Response",
+      "resolved": "Resolved",
+      "closed": "Closed"
+    },
+    "types": {
+      "platform": "Platform Support",
+      "customer": "Customer Inquiry",
+      "staff_request": "Staff Request",
+      "internal": "Internal"
+    },
+    "categories": {
+      "billing": "Billing & Payments",
+      "technical": "Technical Issue",
+      "feature_request": "Feature Request",
+      "account": "Account & Settings",
+      "appointment": "Appointment Issue",
+      "refund": "Refund Request",
+      "complaint": "Complaint",
+      "general_inquiry": "General Inquiry",
+      "time_off": "Time Off Request",
+      "schedule_change": "Schedule Change",
+      "equipment": "Equipment Issue",
+      "other": "Other"
+    }
   },
   "dashboard": {
     "title": "Dashboard",

frontend/src/layouts/BusinessLayout.tsx

@@ -7,6 +7,7 @@ import { Business, User } from '../types';
 import MasqueradeBanner from '../components/MasqueradeBanner';
 import OnboardingWizard from '../components/OnboardingWizard';
 import { useStopMasquerade } from '../hooks/useAuth';
+import { useNotificationWebSocket } from '../hooks/useNotificationWebSocket'; // Import the new hook
 import { MasqueradeStackEntry } from '../api/auth';
 import { useScrollToTop } from '../hooks/useScrollToTop';
 
@@ -176,6 +177,8 @@ const BusinessLayout: React.FC<BusinessLayoutProps> = ({ business, user, darkMod
     stopMasqueradeMutation.mutate();
   };
 
+  useNotificationWebSocket(); // Activate the notification WebSocket listener
+
   // Get the previous user from the stack (the one we'll return to)
   const previousUser = masqueradeStack.length > 0
     ? {

frontend/src/pages/Tickets.tsx

@@ -0,0 +1,294 @@
+import React, { useState, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Plus, User, Clock, AlertCircle, CheckCircle, XCircle, Circle, Loader2 } from 'lucide-react';
+import { useTickets } from '../hooks/useTickets';
+import { Ticket, TicketStatus } from '../types';
+import TicketModal from '../components/TicketModal';
+import { useCurrentUser } from '../hooks/useAuth';
+
+const TicketStatusBadge: React.FC<{ status: Ticket['status'] }> = ({ status }) => {
+  const { t } = useTranslation();
+
+  const statusConfig = {
+    OPEN: {
+      color: 'bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300',
+      icon: Circle,
+      label: t('tickets.status.open', 'Open'),
+    },
+    IN_PROGRESS: {
+      color: 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-300',
+      icon: Loader2,
+      label: t('tickets.status.in_progress', 'In Progress'),
+    },
+    RESOLVED: {
+      color: 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300',
+      icon: CheckCircle,
+      label: t('tickets.status.resolved', 'Resolved'),
+    },
+    CLOSED: {
+      color: 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300',
+      icon: XCircle,
+      label: t('tickets.status.closed', 'Closed'),
+    },
+  };
+
+  const config = statusConfig[status] || statusConfig.OPEN;
+  const Icon = config.icon;
+
+  return (
+    <span className={`inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-xs font-medium ${config.color}`}>
+      <Icon size={12} className={status === 'IN_PROGRESS' ? 'animate-spin' : ''} />
+      {config.label}
+    </span>
+  );
+};
+
+const TicketPriorityBadge: React.FC<{ priority: Ticket['priority'] }> = ({ priority }) => {
+  const { t } = useTranslation();
+
+  const priorityConfig = {
+    LOW: {
+      color: 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300',
+      label: t('tickets.priority.low', 'Low'),
+    },
+    MEDIUM: {
+      color: 'bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300',
+      label: t('tickets.priority.medium', 'Medium'),
+    },
+    HIGH: {
+      color: 'bg-orange-100 text-orange-800 dark:bg-orange-900/30 dark:text-orange-300',
+      label: t('tickets.priority.high', 'High'),
+    },
+    URGENT: {
+      color: 'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-300',
+      label: t('tickets.priority.urgent', 'Urgent'),
+    },
+  };
+
+  const config = priorityConfig[priority] || priorityConfig.MEDIUM;
+
+  return (
+    <span className={`inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-xs font-medium ${config.color}`}>
+      <AlertCircle size={12} />
+      {config.label}
+    </span>
+  );
+};
+
+const Tickets: React.FC = () => {
+  const { t } = useTranslation();
+  const { data: currentUser } = useCurrentUser();
+  const [statusFilter, setStatusFilter] = useState<TicketStatus | 'ALL'>('ALL');
+  const [isTicketModalOpen, setIsTicketModalOpen] = useState(false);
+  const [selectedTicket, setSelectedTicket] = useState<Ticket | null>(null);
+
+  // Fetch all tickets (backend will filter based on user role)
+  const { data: tickets = [], isLoading, error } = useTickets();
+
+  // Filter tickets by status
+  const filteredTickets = useMemo(() => {
+    if (statusFilter === 'ALL') return tickets;
+    return tickets.filter(ticket => ticket.status === statusFilter);
+  }, [tickets, statusFilter]);
+
+  // Count tickets by status for tabs
+  const statusCounts = useMemo(() => {
+    const counts = {
+      ALL: tickets.length,
+      OPEN: 0,
+      IN_PROGRESS: 0,
+      RESOLVED: 0,
+      CLOSED: 0,
+    };
+
+    tickets.forEach(ticket => {
+      counts[ticket.status]++;
+    });
+
+    return counts;
+  }, [tickets]);
+
+  const openTicketModal = (ticket: Ticket | null = null) => {
+    setSelectedTicket(ticket);
+    setIsTicketModalOpen(true);
+  };
+
+  const closeTicketModal = () => {
+    setSelectedTicket(null);
+    setIsTicketModalOpen(false);
+  };
+
+  const isOwnerOrManager = currentUser?.role === 'owner' || currentUser?.role === 'manager';
+
+  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 loading tickets')}: {(error as Error).message}
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  const tabs: Array<{ id: TicketStatus | 'ALL'; label: string }> = [
+    { id: 'ALL', label: t('tickets.tabs.all', 'All') },
+    { id: 'OPEN', label: t('tickets.tabs.open', 'Open') },
+    { id: 'IN_PROGRESS', label: t('tickets.tabs.inProgress', 'In Progress') },
+    { id: 'RESOLVED', label: t('tickets.tabs.resolved', 'Resolved') },
+    { id: 'CLOSED', label: t('tickets.tabs.closed', 'Closed') },
+  ];
+
+  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', 'Support Tickets')}
+          </h2>
+          <p className="text-gray-500 dark:text-gray-400">
+            {isOwnerOrManager
+              ? t('tickets.descriptionOwner', 'Manage support tickets for your business')
+              : t('tickets.descriptionStaff', 'View and create support tickets')}
+          </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', 'New Ticket')}
+        </button>
+      </div>
+
+      {/* Status Filter Tabs */}
+      <div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 shadow-sm overflow-hidden">
+        <div className="border-b border-gray-200 dark:border-gray-700">
+          <nav className="flex -mb-px overflow-x-auto" aria-label="Tabs">
+            {tabs.map(tab => (
+              <button
+                key={tab.id}
+                onClick={() => setStatusFilter(tab.id)}
+                className={`
+                  flex-shrink-0 px-6 py-3 text-sm font-medium border-b-2 transition-colors whitespace-nowrap
+                  ${statusFilter === tab.id
+                    ? 'border-brand-600 text-brand-600 dark:text-brand-400'
+                    : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300'
+                  }
+                `}
+              >
+                {tab.label}
+                <span className={`ml-2 py-0.5 px-2 rounded-full text-xs ${
+                  statusFilter === tab.id
+                    ? 'bg-brand-100 text-brand-800 dark:bg-brand-900/30 dark:text-brand-300'
+                    : 'bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-400'
+                }`}>
+                  {statusCounts[tab.id]}
+                </span>
+              </button>
+            ))}
+          </nav>
+        </div>
+
+        {/* Tickets Grid */}
+        <div className="p-6">
+          {filteredTickets.length === 0 ? (
+            <div className="text-center py-12">
+              <AlertCircle size={48} className="mx-auto mb-4 text-gray-300 dark:text-gray-600" />
+              <p className="text-gray-500 dark:text-gray-400">
+                {statusFilter === 'ALL'
+                  ? t('tickets.noTicketsFound', 'No tickets found')
+                  : t('tickets.noTicketsInStatus', `No ${statusFilter.toLowerCase().replace('_', ' ')} tickets`)}
+              </p>
+            </div>
+          ) : (
+            <div className="grid grid-cols-1 gap-4">
+              {filteredTickets.map(ticket => (
+                <div
+                  key={ticket.id}
+                  onClick={() => openTicketModal(ticket)}
+                  className="bg-white dark:bg-gray-700/50 border border-gray-200 dark:border-gray-600 rounded-lg p-4 hover:border-brand-300 dark:hover:border-brand-600 hover:shadow-md transition-all cursor-pointer group"
+                >
+                  <div className="flex items-start justify-between gap-4">
+                    <div className="flex-1 min-w-0">
+                      <div className="flex items-center gap-2 mb-2">
+                        <h3 className="text-base font-semibold text-gray-900 dark:text-white truncate group-hover:text-brand-600 dark:group-hover:text-brand-400">
+                          {ticket.subject}
+                        </h3>
+                      </div>
+
+                      <p className="text-sm text-gray-600 dark:text-gray-300 line-clamp-2 mb-3">
+                        {ticket.description}
+                      </p>
+
+                      <div className="flex flex-wrap items-center gap-3 text-xs">
+                        <TicketStatusBadge status={ticket.status} />
+                        <TicketPriorityBadge priority={ticket.priority} />
+
+                        {ticket.category && (
+                          <span className="inline-flex items-center gap-1 px-2 py-0.5 bg-gray-100 dark:bg-gray-600 text-gray-700 dark:text-gray-300 rounded-full">
+                            {ticket.category}
+                          </span>
+                        )}
+
+                        <span className="flex items-center gap-1 text-gray-500 dark:text-gray-400">
+                          <User size={12} />
+                          {ticket.creatorFullName || ticket.creatorEmail}
+                        </span>
+
+                        <span className="flex items-center gap-1 text-gray-500 dark:text-gray-400">
+                          <Clock size={12} />
+                          {new Date(ticket.createdAt).toLocaleDateString()}
+                        </span>
+                      </div>
+                    </div>
+
+                    <div className="flex-shrink-0 text-right">
+                      {ticket.assigneeFullName ? (
+                        <div className="text-xs text-gray-600 dark:text-gray-400">
+                          <div className="font-medium mb-1">{t('tickets.assignedTo', 'Assigned to')}</div>
+                          <div className="flex items-center gap-1 justify-end">
+                            <User size={12} className="text-brand-500" />
+                            <span className="font-medium text-gray-900 dark:text-white">
+                              {ticket.assigneeFullName}
+                            </span>
+                          </div>
+                        </div>
+                      ) : (
+                        <span className="text-xs text-gray-400 dark:text-gray-500">
+                          {t('tickets.unassigned', 'Unassigned')}
+                        </span>
+                      )}
+                    </div>
+                  </div>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* Ticket Create/Detail Modal */}
+      {isTicketModalOpen && (
+        <TicketModal
+          ticket={selectedTicket}
+          onClose={closeTicketModal}
+        />
+      )}
+    </div>
+  );
+};
+
+export default Tickets;

frontend/src/pages/TicketsPage.tsx

@@ -1,201 +0,0 @@
-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/pages/platform/PlatformSupport.tsx

@@ -1,11 +1,79 @@
-
-import React from 'react';
+import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { SUPPORT_TICKETS } from '../../mockData';
-import { Ticket as TicketIcon, AlertCircle, CheckCircle2, Clock } from 'lucide-react';
+import { Ticket as TicketIcon, AlertCircle, CheckCircle2, Clock, Circle, Loader2, XCircle, Plus } from 'lucide-react';
+import { useTickets } from '../../hooks/useTickets';
+import { Ticket, TicketStatus } from '../../types';
+import TicketModal from '../../components/TicketModal';
+import Portal from '../../components/Portal';
 
 const PlatformSupport: React.FC = () => {
   const { t } = useTranslation();
+  const [selectedTicket, setSelectedTicket] = useState<Ticket | null>(null);
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [statusFilter, setStatusFilter] = useState<TicketStatus | 'ALL'>('ALL');
+
+  // Fetch all tickets (platform admins see all)
+  const { data: tickets = [], isLoading, error } = useTickets(
+    statusFilter !== 'ALL' ? { status: statusFilter } : undefined
+  );
+
+  // Filter to show PLATFORM tickets primarily, but also show all for platform admins
+  const platformTickets = tickets;
+
+  const getStatusIcon = (status: TicketStatus) => {
+    switch (status) {
+      case 'OPEN': return <Circle size={14} className="text-green-500" />;
+      case 'IN_PROGRESS': return <Loader2 size={14} className="text-blue-500 animate-spin" />;
+      case 'AWAITING_RESPONSE': return <Clock size={14} className="text-orange-500" />;
+      case 'RESOLVED': return <CheckCircle2 size={14} className="text-gray-500" />;
+      case 'CLOSED': return <XCircle size={14} className="text-gray-400" />;
+      default: return <AlertCircle size={14} />;
+    }
+  };
+
+  const getPriorityColor = (priority: string) => {
+    switch (priority) {
+      case 'URGENT': return 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400';
+      case 'HIGH': return 'bg-orange-100 text-orange-700 dark:bg-orange-900/30 dark:text-orange-400';
+      case 'MEDIUM': return 'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400';
+      case 'LOW': return 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400';
+      default: return 'bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-300';
+    }
+  };
+
+  const statusTabs: { key: TicketStatus | 'ALL'; label: string }[] = [
+    { key: 'ALL', label: t('tickets.tabs.all', 'All') },
+    { key: 'OPEN', label: t('tickets.tabs.open', 'Open') },
+    { key: 'IN_PROGRESS', label: t('tickets.tabs.inProgress', 'In Progress') },
+    { key: 'AWAITING_RESPONSE', label: t('tickets.tabs.awaitingResponse', 'Awaiting') },
+    { key: 'RESOLVED', label: t('tickets.tabs.resolved', 'Resolved') },
+    { key: 'CLOSED', label: t('tickets.tabs.closed', 'Closed') },
+  ];
+
+  const handleTicketClick = (ticket: Ticket) => {
+    setSelectedTicket(ticket);
+    setIsModalOpen(true);
+  };
+
+  const handleNewTicket = () => {
+    setSelectedTicket(null);
+    setIsModalOpen(true);
+  };
+
+  const handleCloseModal = () => {
+    setIsModalOpen(false);
+    setSelectedTicket(null);
+  };
+
+  if (error) {
+    return (
+      <div className="text-center py-12">
+        <AlertCircle className="mx-auto h-12 w-12 text-red-400" />
+        <p className="mt-4 text-red-600 dark:text-red-400">{t('tickets.errorLoading')}</p>
+      </div>
+    );
+  }
+
   return (
     <div className="space-y-6">
       <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
@@ -13,54 +81,119 @@ const PlatformSupport: React.FC = () => {
           <h2 className="text-2xl font-bold text-gray-900 dark:text-white">{t('platform.supportTickets')}</h2>
           <p className="text-gray-500 dark:text-gray-400">{t('platform.supportDescription')}</p>
         </div>
+        <button
+          onClick={handleNewTicket}
+          className="inline-flex items-center gap-2 px-4 py-2 bg-brand-600 text-white rounded-lg hover:bg-brand-700 transition-colors"
+        >
+          <Plus size={18} />
+          {t('tickets.newTicket')}
+        </button>
       </div>
 
-      <div className="grid grid-cols-1 gap-4">
-        {SUPPORT_TICKETS.map((ticket) => (
-            <div key={ticket.id} className="bg-white dark:bg-gray-800 p-4 rounded-xl border border-gray-200 dark:border-gray-700 shadow-sm hover:shadow-md transition-shadow cursor-pointer">
-                <div className="flex items-start justify-between">
-                    <div className="flex items-start gap-4">
-                        <div className={`p-2 rounded-lg shrink-0 ${
-                            ticket.priority === 'High' || ticket.priority === 'Critical' ? 'bg-red-100 text-red-600 dark:bg-red-900/20 dark:text-red-400' :
-                            ticket.priority === 'Medium' ? 'bg-orange-100 text-orange-600 dark:bg-orange-900/20 dark:text-orange-400' :
-                            'bg-blue-100 text-blue-600 dark:bg-blue-900/20 dark:text-blue-400'
-                        }`}>
-                            <TicketIcon size={20} />
-                        </div>
-                        <div>
-                            <div className="flex items-center gap-2 mb-1">
-                                <h3 className="font-semibold text-gray-900 dark:text-white">{ticket.subject}</h3>
-                                <span className="text-xs px-2 py-0.5 rounded-full bg-gray-100 dark:bg-gray-700 text-gray-500 dark:text-gray-400 border border-gray-200 dark:border-gray-600">
-                                    {ticket.id}
-                                </span>
-                            </div>
-                            <p className="text-sm text-gray-500 dark:text-gray-400 mb-2">{t('platform.reportedBy')} <span className="font-medium text-gray-900 dark:text-white">{ticket.businessName}</span></p>
-                            <div className="flex items-center gap-4 text-xs text-gray-500 dark:text-gray-400">
-                                <span className="flex items-center gap-1">
-                                    <Clock size={12} /> {ticket.createdAt.toLocaleDateString()}
-                                </span>
-                                <span className={`flex items-center gap-1 font-medium ${
-                                    ticket.status === 'Open' ? 'text-green-600' :
-                                    ticket.status === 'In Progress' ? 'text-blue-600' : 'text-gray-500'
-                                }`}>
-                                    {ticket.status === 'Open' && <AlertCircle size={12} />}
-                                    {ticket.status === 'Resolved' && <CheckCircle2 size={12} />}
-                                    {ticket.status}
-                                </span>
-                            </div>
-                        </div>
-                    </div>
-                    <div className="text-right">
-                        <span className={`inline-block px-2 py-1 rounded text-xs font-medium ${
-                             ticket.priority === 'High' ? 'bg-red-50 text-red-700 dark:bg-red-900/30' : 'bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-300'
-                        }`}>
-                            {ticket.priority} {t('platform.priority')}
-                        </span>
-                    </div>
-                </div>
-            </div>
+      {/* Status Tabs */}
+      <div className="flex flex-wrap gap-2 border-b border-gray-200 dark:border-gray-700 pb-2">
+        {statusTabs.map((tab) => (
+          <button
+            key={tab.key}
+            onClick={() => setStatusFilter(tab.key)}
+            className={`px-4 py-2 text-sm font-medium rounded-lg transition-colors ${
+              statusFilter === tab.key
+                ? 'bg-brand-600 text-white'
+                : 'text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700'
+            }`}
+          >
+            {tab.label}
+          </button>
         ))}
       </div>
+
+      {isLoading ? (
+        <div className="text-center py-12">
+          <Loader2 className="mx-auto h-8 w-8 animate-spin text-brand-600" />
+          <p className="mt-4 text-gray-500">{t('common.loading')}</p>
+        </div>
+      ) : platformTickets.length === 0 ? (
+        <div className="text-center py-12 bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700">
+          <TicketIcon className="mx-auto h-12 w-12 text-gray-400" />
+          <p className="mt-4 text-gray-500 dark:text-gray-400">{t('tickets.noTicketsFound')}</p>
+        </div>
+      ) : (
+        <div className="grid grid-cols-1 gap-4">
+          {platformTickets.map((ticket) => (
+            <div
+              key={ticket.id}
+              onClick={() => handleTicketClick(ticket)}
+              className="bg-white dark:bg-gray-800 p-4 rounded-xl border border-gray-200 dark:border-gray-700 shadow-sm hover:shadow-md transition-shadow cursor-pointer"
+            >
+              <div className="flex items-start justify-between">
+                <div className="flex items-start gap-4">
+                  <div className={`p-2 rounded-lg shrink-0 ${getPriorityColor(ticket.priority)}`}>
+                    <TicketIcon size={20} />
+                  </div>
+                  <div>
+                    <div className="flex items-center gap-2 mb-1">
+                      <h3 className="font-semibold text-gray-900 dark:text-white">{ticket.subject}</h3>
+                      <span className="text-xs px-2 py-0.5 rounded-full bg-gray-100 dark:bg-gray-700 text-gray-500 dark:text-gray-400 border border-gray-200 dark:border-gray-600">
+                        #{ticket.id}
+                      </span>
+                      <span className={`text-xs px-2 py-0.5 rounded-full ${
+                        ticket.ticketType === 'PLATFORM' ? 'bg-purple-100 text-purple-700 dark:bg-purple-900/30 dark:text-purple-400' :
+                        ticket.ticketType === 'CUSTOMER' ? 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400' :
+                        'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400'
+                      }`}>
+                        {t(`tickets.types.${ticket.ticketType.toLowerCase()}`)}
+                      </span>
+                    </div>
+                    <p className="text-sm text-gray-500 dark:text-gray-400 mb-2">
+                      {t('platform.reportedBy')} <span className="font-medium text-gray-900 dark:text-white">{ticket.creatorFullName || ticket.creatorEmail}</span>
+                      {ticket.category && (
+                        <span className="ml-2 text-xs px-2 py-0.5 rounded bg-gray-100 dark:bg-gray-700">
+                          {t(`tickets.categories.${ticket.category.toLowerCase()}`)}
+                        </span>
+                      )}
+                    </p>
+                    <div className="flex items-center gap-4 text-xs text-gray-500 dark:text-gray-400">
+                      <span className="flex items-center gap-1">
+                        <Clock size={12} /> {new Date(ticket.createdAt).toLocaleDateString()}
+                      </span>
+                      <span className="flex items-center gap-1 font-medium">
+                        {getStatusIcon(ticket.status)}
+                        {t(`tickets.statuses.${ticket.status.toLowerCase()}`)}
+                      </span>
+                      {ticket.assigneeFullName && (
+                        <span className="text-gray-400">
+                          {t('tickets.assignedTo')}: {ticket.assigneeFullName}
+                        </span>
+                      )}
+                    </div>
+                  </div>
+                </div>
+                <div className="text-right">
+                  <span className={`inline-block px-2 py-1 rounded text-xs font-medium ${getPriorityColor(ticket.priority)}`}>
+                    {t(`tickets.priorities.${ticket.priority.toLowerCase()}`)}
+                  </span>
+                  {ticket.isOverdue && (
+                    <span className="block mt-1 text-xs text-red-600 dark:text-red-400 font-medium">
+                      Overdue
+                    </span>
+                  )}
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+
+      {/* Ticket Modal */}
+      {isModalOpen && (
+        <Portal>
+          <TicketModal
+            ticket={selectedTicket}
+            onClose={handleCloseModal}
+            defaultTicketType="PLATFORM"
+          />
+        </Portal>
+      )}
     </div>
   );
 };

frontend/src/types.ts

@@ -179,9 +179,22 @@ export interface Metric {
 
 // --- Platform Types ---
 
-export type TicketType = 'PLATFORM' | 'CUSTOMER' | 'STAFF_REQUEST';
-export type TicketStatus = 'OPEN' | 'IN_PROGRESS' | 'RESOLVED' | 'CLOSED';
+export type TicketType = 'PLATFORM' | 'CUSTOMER' | 'STAFF_REQUEST' | 'INTERNAL';
+export type TicketStatus = 'OPEN' | 'IN_PROGRESS' | 'RESOLVED' | 'CLOSED' | 'AWAITING_RESPONSE';
 export type TicketPriority = 'LOW' | 'MEDIUM' | 'HIGH' | 'URGENT';
+export type TicketCategory =
+  | 'BILLING'
+  | 'TECHNICAL'
+  | 'FEATURE_REQUEST'
+  | 'ACCOUNT'
+  | 'APPOINTMENT'
+  | 'REFUND'
+  | 'COMPLAINT'
+  | 'GENERAL_INQUIRY'
+  | 'TIME_OFF'
+  | 'SCHEDULE_CHANGE'
+  | 'EQUIPMENT'
+  | 'OTHER';
 
 export interface TicketComment {
   id: string;
@@ -208,13 +221,43 @@ export interface Ticket {
   priority: TicketPriority;
   subject: string;
   description: string;
-  category?: string;
+  category: TicketCategory;
+  relatedAppointmentId?: string; // Appointment ID, optional
+  dueAt?: string; // Date string
+  firstResponseAt?: string; // Date string
+  isOverdue?: boolean;
   createdAt: string; // Date string
   updatedAt: string; // Date string
   resolvedAt?: string; // Date string
   comments?: TicketComment[]; // Nested comments
 }
 
+export interface TicketTemplate {
+  id: string;
+  tenant?: string; // Tenant ID, optional for platform templates
+  name: string;
+  description: string;
+  ticketType: TicketType;
+  category: TicketCategory;
+  defaultPriority: TicketPriority;
+  subjectTemplate: string;
+  descriptionTemplate: string;
+  isActive: boolean;
+  createdAt: string; // Date string
+}
+
+export interface CannedResponse {
+  id: string;
+  tenant?: string; // Tenant ID, optional for platform canned responses
+  title: string;
+  content: string;
+  category?: TicketCategory;
+  isActive: boolean;
+  useCount: number;
+  createdBy?: string; // User ID
+  createdAt: string; // Date string
+}
+
 export interface PlatformMetric {
   label: string;
   value: string;