71 lines
3.2 KiB
TypeScript
71 lines
3.2 KiB
TypeScript
'use client';
|
|
|
|
import { useTransition, useState } from 'react';
|
|
import type { User } from '@/lib/types/user';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Input } from '@/components/ui/input';
|
|
import { Label } from '@/components/ui/label';
|
|
import { EscalationForm } from '../dialogs/EscalationForm';
|
|
import {
|
|
MessageSquare,
|
|
Mail,
|
|
Plus,
|
|
UserCircle2,
|
|
Headphones,
|
|
Loader2
|
|
} from 'lucide-react';
|
|
import { toast } from 'sonner';
|
|
|
|
interface SupportTabProps {
|
|
user: User;
|
|
}
|
|
|
|
export function SupportTab({ user }: SupportTabProps) {
|
|
const [createDialogOpen, setCreateDialogOpen] = useState(false);
|
|
|
|
// Filter state could go here in future
|
|
// const [filter, setFilter] = useState('all');
|
|
|
|
return (
|
|
<div className="space-y-4">
|
|
<div className="flex items-center justify-between">
|
|
<h3 className="text-sm font-semibold">Communication Timeline</h3>
|
|
|
|
<EscalationForm
|
|
userId={user.id}
|
|
userName={user.name}
|
|
open={createDialogOpen}
|
|
onOpenChange={setCreateDialogOpen}
|
|
/>
|
|
</div>
|
|
|
|
{/* Timeline Stream */}
|
|
<div className="relative pl-4 border-l-2 border-border/50 space-y-6">
|
|
{[
|
|
{ id: 1, type: 'ticket', title: 'Refund requested for "Tech Summit"', status: 'Open', date: '2 hours ago', icon: Headphones, color: 'text-blue-600 bg-blue-50' },
|
|
{ id: 2, type: 'email', title: 'Sent: "Your tickets are ready!"', status: 'Delivered', date: 'Yesterday', icon: Mail, color: 'text-slate-600 bg-slate-50' },
|
|
{ id: 3, type: 'ticket', title: 'Login issue reported', status: 'Resolved', date: '3 days ago', icon: MessageSquare, color: 'text-emerald-600 bg-emerald-50' },
|
|
].map((item) => (
|
|
<div key={item.id} className="relative">
|
|
<div className={`absolute -left-[25px] top-0 h-8 w-8 rounded-full border-2 border-background flex items-center justify-center ${item.color}`}>
|
|
<item.icon className="h-4 w-4" />
|
|
</div>
|
|
<div className="bg-card border rounded-lg p-3 shadow-sm hover:shadow-md transition-shadow">
|
|
<div className="flex justify-between items-start">
|
|
<h4 className="text-sm font-medium">{item.title}</h4>
|
|
<span className="text-xs text-muted-foreground whitespace-nowrap">{item.date}</span>
|
|
</div>
|
|
<div className="mt-1 flex items-center gap-2">
|
|
<span className="text-xs font-medium px-2 py-0.5 rounded-full bg-secondary/50 text-secondary-foreground">
|
|
{item.type === 'ticket' ? 'Ticket #1234' : 'Email System'}
|
|
</span>
|
|
<span className="text-xs text-muted-foreground">• {item.status}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|