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>
This commit is contained in:
poduck
294
frontend/src/pages/Tickets.tsx
Normal file
294
frontend/src/pages/Tickets.tsx
Normal file
@@ -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;
|
||||
Reference in New Issue
Block a user