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;
|
||||
@@ -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;
|
||||
@@ -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>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user