feat: full CRUD on all pages — clients (add+navigate), client detail (payments tab+pay), invoices (detail+pay+void), payments (detail view), remittances (submit flow), tickets (detail+comments+create), leads (add+status update)
This commit is contained in:
Forge
@@ -1,168 +1,294 @@
|
||||
'use client';
|
||||
"use client";
|
||||
|
||||
import { useState } from 'react';
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { api } from '@/lib/api';
|
||||
import { Card, CardContent } from '@/components/ui/card';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Skeleton } from '@/components/ui/skeleton';
|
||||
import { Search, Plus, ChevronRight } from 'lucide-react';
|
||||
import { format } from 'date-fns';
|
||||
import { useState } from "react";
|
||||
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
|
||||
import { RefreshCw, Ticket, Plus, Send } from "lucide-react";
|
||||
import { Card, CardContent, CardHeader } from "@/components/ui/Card";
|
||||
import { Table, TableHead, TableBody, TableRow, Th, Td, EmptyState } from "@/components/ui/Table";
|
||||
import { Badge } from "@/components/ui/Badge";
|
||||
import { Button } from "@/components/ui/Button";
|
||||
import { Input } from "@/components/ui/Input";
|
||||
import { Modal } from "@/components/ui/Modal";
|
||||
import { formatDate } from "@/lib/utils";
|
||||
import api from "@/lib/api";
|
||||
import { toast } from "sonner";
|
||||
|
||||
interface Ticket {
|
||||
id: string;
|
||||
subject: string;
|
||||
type: string;
|
||||
status: string;
|
||||
priority: string;
|
||||
createdAt: string;
|
||||
client?: { firstName: string; lastName: string; accountNumber: string };
|
||||
assignedTo?: { firstName: string; lastName: string };
|
||||
interface TicketComment { id: string; body: string; createdAt: string; author?: { firstName: string; lastName: string }; }
|
||||
interface TicketItem {
|
||||
id: string; ticketNumber?: string; subject: string; description?: string;
|
||||
type: string; priority: string; status: string; clientId?: string;
|
||||
client?: { id: string; firstName: string; lastName: string; accountNumber: string };
|
||||
assignedTo?: { id: string; firstName: string; lastName: string } | string;
|
||||
createdAt: string; updatedAt?: string;
|
||||
comments?: TicketComment[];
|
||||
}
|
||||
interface PaginatedResponse<T> { data: T[]; meta: { total: number; page: number; limit: number; }; }
|
||||
|
||||
const statusColors: Record<string, string> = {
|
||||
OPEN: 'bg-blue-100 text-blue-700',
|
||||
IN_PROGRESS: 'bg-yellow-100 text-yellow-700',
|
||||
RESOLVED: 'bg-green-100 text-green-700',
|
||||
CLOSED: 'bg-gray-100 text-gray-500',
|
||||
const statusVariant: Record<string, "success" | "warning" | "danger" | "muted"> = {
|
||||
OPEN: "warning", IN_PROGRESS: "default" as any, RESOLVED: "success", CLOSED: "muted",
|
||||
};
|
||||
const priorityVariant: Record<string, "danger" | "warning" | "muted"> = {
|
||||
HIGH: "danger", NORMAL: "muted", LOW: "muted",
|
||||
};
|
||||
|
||||
const priorityColors: Record<string, string> = {
|
||||
HIGH: 'bg-red-100 text-red-700',
|
||||
NORMAL: 'bg-slate-100 text-slate-600',
|
||||
};
|
||||
|
||||
const typeColors: Record<string, string> = {
|
||||
INSTALLATION: 'bg-cyan-100 text-cyan-700',
|
||||
SUPPORT: 'bg-purple-100 text-purple-700',
|
||||
BILLING: 'bg-orange-100 text-orange-700',
|
||||
};
|
||||
const statusFilters = ["", "OPEN", "IN_PROGRESS", "RESOLVED", "CLOSED"];
|
||||
const typeFilters = ["", "SUPPORT", "BILLING", "INSTALLATION"];
|
||||
|
||||
export default function TicketsPage() {
|
||||
const [search, setSearch] = useState('');
|
||||
const [statusFilter, setStatusFilter] = useState('');
|
||||
const [typeFilter, setTypeFilter] = useState('');
|
||||
const qc = useQueryClient();
|
||||
const [search, setSearch] = useState("");
|
||||
const [statusFilter, setStatusFilter] = useState("");
|
||||
const [typeFilter, setTypeFilter] = useState("");
|
||||
const [page, setPage] = useState(1);
|
||||
const [selected, setSelected] = useState<TicketItem | null>(null);
|
||||
const [showCreate, setShowCreate] = useState(false);
|
||||
const [comment, setComment] = useState("");
|
||||
const [newForm, setNewForm] = useState({ subject: "", description: "", type: "SUPPORT", priority: "NORMAL", clientSearch: "", clientId: "" });
|
||||
|
||||
const { data, isLoading } = useQuery<{ data: Ticket[]; total: number }>({
|
||||
queryKey: ['tickets', search, statusFilter, typeFilter, page],
|
||||
const { data, isLoading, refetch } = useQuery<PaginatedResponse<TicketItem>>({
|
||||
queryKey: ["tickets", search, statusFilter, typeFilter, page],
|
||||
queryFn: async () => {
|
||||
const params = new URLSearchParams({ page: String(page), limit: '20' });
|
||||
if (statusFilter) params.set('status', statusFilter);
|
||||
if (typeFilter) params.set('type', typeFilter);
|
||||
const res = await api.get(`/api/v1/tickets?${params}`);
|
||||
const params = new URLSearchParams({ page: String(page), limit: "20" });
|
||||
if (search) params.set("search", search);
|
||||
if (statusFilter) params.set("status", statusFilter);
|
||||
if (typeFilter) params.set("type", typeFilter);
|
||||
const res = await api.get<PaginatedResponse<TicketItem>>(`/api/v1/tickets?${params}`);
|
||||
return res.data;
|
||||
},
|
||||
staleTime: 30_000,
|
||||
});
|
||||
|
||||
const { data: ticketDetail, refetch: refetchDetail } = useQuery<TicketItem>({
|
||||
queryKey: ["ticket", selected?.id],
|
||||
queryFn: async () => {
|
||||
const res = await api.get<TicketItem>(`/api/v1/tickets/${selected!.id}`);
|
||||
return res.data;
|
||||
},
|
||||
enabled: !!selected?.id,
|
||||
});
|
||||
|
||||
const { data: clientSearch = [], isFetching: searchingClients } = useQuery({
|
||||
queryKey: ["client-search", newForm.clientSearch],
|
||||
queryFn: async () => {
|
||||
if (!newForm.clientSearch || newForm.clientSearch.length < 2) return [];
|
||||
const res = await api.get(`/api/v1/clients?search=${encodeURIComponent(newForm.clientSearch)}&limit=10`);
|
||||
return res.data?.data ?? [];
|
||||
},
|
||||
enabled: newForm.clientSearch.length >= 2,
|
||||
});
|
||||
|
||||
const updateStatus = useMutation({
|
||||
mutationFn: async ({ id, status }: { id: string; status: string }) => {
|
||||
await api.patch(`/api/v1/tickets/${id}`, { status });
|
||||
},
|
||||
onSuccess: () => { toast.success("Status updated"); refetch(); refetchDetail(); qc.invalidateQueries({ queryKey: ["ticket"] }); },
|
||||
onError: (e: any) => toast.error(e.response?.data?.message ?? "Failed"),
|
||||
});
|
||||
|
||||
const addComment = useMutation({
|
||||
mutationFn: async () => {
|
||||
await api.post(`/api/v1/tickets/${selected!.id}/comments`, { body: comment });
|
||||
},
|
||||
onSuccess: () => { toast.success("Comment added"); setComment(""); refetchDetail(); },
|
||||
onError: (e: any) => toast.error(e.response?.data?.message ?? "Failed"),
|
||||
});
|
||||
|
||||
const createTicket = useMutation({
|
||||
mutationFn: async () => {
|
||||
await api.post("/api/v1/tickets", {
|
||||
subject: newForm.subject, description: newForm.description,
|
||||
type: newForm.type, priority: newForm.priority,
|
||||
clientId: newForm.clientId || undefined,
|
||||
});
|
||||
},
|
||||
onSuccess: () => {
|
||||
toast.success("Ticket created!");
|
||||
setShowCreate(false);
|
||||
setNewForm({ subject: "", description: "", type: "SUPPORT", priority: "NORMAL", clientSearch: "", clientId: "" });
|
||||
qc.invalidateQueries({ queryKey: ["tickets"] });
|
||||
},
|
||||
onError: (e: any) => toast.error(e.response?.data?.message ?? "Failed to create ticket"),
|
||||
});
|
||||
|
||||
const tickets = data?.data ?? [];
|
||||
const total = data?.total ?? 0;
|
||||
const total = data?.meta?.total ?? 0;
|
||||
const detail = ticketDetail ?? selected;
|
||||
const comments = (ticketDetail as any)?.comments ?? [];
|
||||
|
||||
const nextStatus: Record<string, string> = { OPEN: "IN_PROGRESS", IN_PROGRESS: "RESOLVED", RESOLVED: "CLOSED" };
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-slate-800">Tickets</h1>
|
||||
<p className="text-slate-500 text-sm mt-1">{total} tickets</p>
|
||||
<h1 className="text-2xl font-bold text-gray-900">Tickets</h1>
|
||||
<p className="text-sm text-gray-500 mt-1">{total} total tickets</p>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<Button onClick={() => refetch()} variant="outline" size="sm"><RefreshCw size={14} className="mr-1" />Refresh</Button>
|
||||
<Button onClick={() => setShowCreate(true)} size="sm"><Plus size={14} className="mr-1" />New Ticket</Button>
|
||||
</div>
|
||||
<button
|
||||
className="flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium text-white"
|
||||
style={{ backgroundColor: '#0891B2' }}
|
||||
>
|
||||
<Plus size={16} />
|
||||
New Ticket
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-3 mb-4 flex-wrap">
|
||||
<div className="relative flex-1 min-w-[200px]">
|
||||
<Search size={16} className="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400" />
|
||||
<Input placeholder="Search tickets..." className="pl-9" value={search}
|
||||
onChange={(e) => { setSearch(e.target.value); setPage(1); }} />
|
||||
</div>
|
||||
<select className="border rounded-md px-3 py-2 text-sm bg-white"
|
||||
value={typeFilter} onChange={(e) => { setTypeFilter(e.target.value); setPage(1); }}>
|
||||
<option value="">All Types</option>
|
||||
{['INSTALLATION', 'SUPPORT', 'BILLING'].map(t => (
|
||||
<option key={t} value={t}>{t}</option>
|
||||
))}
|
||||
</select>
|
||||
<select className="border rounded-md px-3 py-2 text-sm bg-white"
|
||||
value={statusFilter} onChange={(e) => { setStatusFilter(e.target.value); setPage(1); }}>
|
||||
<option value="">All Statuses</option>
|
||||
{['OPEN', 'IN_PROGRESS', 'RESOLVED', 'CLOSED'].map(s => (
|
||||
<option key={s} value={s}>{s.replace('_', ' ')}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<Card className="border shadow-sm">
|
||||
<CardContent className="p-0">
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full text-sm">
|
||||
<thead>
|
||||
<tr className="border-b bg-slate-50">
|
||||
<th className="text-left px-4 py-3 font-medium text-slate-500">Subject</th>
|
||||
<th className="text-left px-4 py-3 font-medium text-slate-500 hidden md:table-cell">Client</th>
|
||||
<th className="text-left px-4 py-3 font-medium text-slate-500">Type</th>
|
||||
<th className="text-left px-4 py-3 font-medium text-slate-500">Priority</th>
|
||||
<th className="text-left px-4 py-3 font-medium text-slate-500">Status</th>
|
||||
<th className="text-left px-4 py-3 font-medium text-slate-500 hidden lg:table-cell">Assigned</th>
|
||||
<th className="text-left px-4 py-3 font-medium text-slate-500 hidden xl:table-cell">Created</th>
|
||||
<th className="px-4 py-3"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{isLoading
|
||||
? Array.from({ length: 8 }).map((_, i) => (
|
||||
<tr key={i} className="border-b">
|
||||
{Array.from({ length: 8 }).map((_, j) => (
|
||||
<td key={j} className="px-4 py-3"><Skeleton className="h-4 w-16" /></td>
|
||||
))}
|
||||
</tr>
|
||||
))
|
||||
: tickets.map((t) => (
|
||||
<tr key={t.id} className="border-b hover:bg-slate-50 cursor-pointer transition-colors">
|
||||
<td className="px-4 py-3 text-slate-800 font-medium max-w-[200px] truncate">
|
||||
{t.subject}
|
||||
</td>
|
||||
<td className="px-4 py-3 text-slate-600 hidden md:table-cell">
|
||||
{t.client ? `${t.client.firstName} ${t.client.lastName}` : '—'}
|
||||
<div className="text-xs text-slate-400">{t.client?.accountNumber}</div>
|
||||
</td>
|
||||
<td className="px-4 py-3">
|
||||
<span className={`px-2 py-0.5 rounded-full text-xs font-medium ${typeColors[t.type] ?? 'bg-gray-100 text-gray-500'}`}>
|
||||
{t.type}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-4 py-3">
|
||||
<span className={`px-2 py-0.5 rounded-full text-xs font-medium ${priorityColors[t.priority] ?? 'bg-gray-100 text-gray-500'}`}>
|
||||
{t.priority}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-4 py-3">
|
||||
<span className={`px-2 py-0.5 rounded-full text-xs font-medium ${statusColors[t.status] ?? 'bg-gray-100 text-gray-500'}`}>
|
||||
{t.status?.replace('_', ' ')}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-4 py-3 text-slate-600 hidden lg:table-cell">
|
||||
{t.assignedTo ? `${t.assignedTo.firstName} ${t.assignedTo.lastName}` : 'Unassigned'}
|
||||
</td>
|
||||
<td className="px-4 py-3 text-slate-500 hidden xl:table-cell">
|
||||
{t.createdAt ? format(new Date(t.createdAt), 'MMM d') : '—'}
|
||||
</td>
|
||||
<td className="px-4 py-3 text-slate-400"><ChevronRight size={16} /></td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<div className="flex flex-wrap gap-3">
|
||||
<input className="flex-1 min-w-[200px] border rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
placeholder="Search tickets..." value={search} onChange={e => { setSearch(e.target.value); setPage(1); }} />
|
||||
<div className="flex gap-2 flex-wrap">
|
||||
{statusFilters.map(s => (
|
||||
<button key={s} onClick={() => { setStatusFilter(s); setPage(1); }}
|
||||
className={`px-3 py-1.5 rounded-lg text-xs font-medium transition-colors ${statusFilter === s ? "bg-blue-600 text-white" : "bg-gray-100 text-gray-600 hover:bg-gray-200"}`}>
|
||||
{s || "All Status"}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<div className="flex gap-2 flex-wrap">
|
||||
{typeFilters.map(t => (
|
||||
<button key={t} onClick={() => { setTypeFilter(t); setPage(1); }}
|
||||
className={`px-3 py-1.5 rounded-lg text-xs font-medium transition-colors ${typeFilter === t ? "bg-purple-600 text-white" : "bg-gray-100 text-gray-600 hover:bg-gray-200"}`}>
|
||||
{t || "All Types"}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
{!isLoading && tickets.length === 0 && (
|
||||
<div className="text-center py-12 text-slate-400">No tickets found</div>
|
||||
</CardHeader>
|
||||
<CardContent className="p-0">
|
||||
<Table>
|
||||
<TableHead>
|
||||
<TableRow><Th>Subject</Th><Th>Client</Th><Th>Type</Th><Th>Priority</Th><Th>Status</Th><Th>Created</Th><Th></Th></TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{isLoading ? (
|
||||
Array.from({ length: 8 }).map((_, i) => (
|
||||
<TableRow key={i}><Td colSpan={7}><div className="h-4 bg-gray-100 rounded animate-pulse" /></Td></TableRow>
|
||||
))
|
||||
) : tickets.length === 0 ? (
|
||||
<EmptyState colSpan={7} message="No tickets found" icon={<Ticket size={24} />} />
|
||||
) : tickets.map(t => (
|
||||
<TableRow key={t.id} onClick={() => setSelected(t)} className="cursor-pointer hover:bg-blue-50 transition-colors">
|
||||
<Td className="font-medium max-w-[200px] truncate">{t.subject}</Td>
|
||||
<Td className="text-sm text-gray-600">{t.client ? `${t.client.firstName} ${t.client.lastName}` : "—"}</Td>
|
||||
<Td><Badge variant="muted">{t.type}</Badge></Td>
|
||||
<Td><Badge variant={priorityVariant[t.priority] ?? "muted"}>{t.priority}</Badge></Td>
|
||||
<Td><Badge variant={statusVariant[t.status] ?? "muted"}>{t.status}</Badge></Td>
|
||||
<Td className="text-xs text-gray-400">{formatDate(t.createdAt)}</Td>
|
||||
<Td className="text-gray-400 text-xs">View →</Td>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
{total > 20 && (
|
||||
<div className="flex items-center justify-between px-4 py-3 border-t text-sm text-gray-500">
|
||||
<span>Showing {(page - 1) * 20 + 1}–{Math.min(page * 20, total)} of {total}</span>
|
||||
<div className="flex gap-2">
|
||||
<button disabled={page === 1} onClick={() => setPage(p => p - 1)} className="px-3 py-1 border rounded-md disabled:opacity-40">Prev</button>
|
||||
<button disabled={page * 20 >= total} onClick={() => setPage(p => p + 1)} className="px-3 py-1 border rounded-md disabled:opacity-40">Next</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Ticket Detail Modal */}
|
||||
<Modal isOpen={!!selected} onClose={() => setSelected(null)} title={`Ticket — ${detail?.subject ?? ""}`} className="max-w-2xl">
|
||||
{detail && (
|
||||
<div className="space-y-4">
|
||||
<div className="grid grid-cols-2 gap-3 text-sm bg-gray-50 rounded-lg p-4">
|
||||
<div><span className="text-gray-500">Client</span><p className="font-medium">{detail.client ? `${detail.client.firstName} ${detail.client.lastName}` : "—"}</p></div>
|
||||
<div><span className="text-gray-500">Type</span><p><Badge variant="muted">{detail.type}</Badge></p></div>
|
||||
<div><span className="text-gray-500">Priority</span><p><Badge variant={priorityVariant[detail.priority] ?? "muted"}>{detail.priority}</Badge></p></div>
|
||||
<div><span className="text-gray-500">Status</span><p><Badge variant={statusVariant[detail.status] ?? "muted"}>{detail.status}</Badge></p></div>
|
||||
<div className="col-span-2"><span className="text-gray-500">Created</span><p>{formatDate(detail.createdAt)}</p></div>
|
||||
{detail.description && <div className="col-span-2"><span className="text-gray-500">Description</span><p className="mt-1 text-gray-800 whitespace-pre-wrap">{detail.description}</p></div>}
|
||||
</div>
|
||||
|
||||
{/* Status actions */}
|
||||
{nextStatus[detail.status] && (
|
||||
<Button size="sm" onClick={() => updateStatus.mutate({ id: detail.id, status: nextStatus[detail.status] })} isLoading={updateStatus.isPending}>
|
||||
Move to {nextStatus[detail.status].replace("_", " ")}
|
||||
</Button>
|
||||
)}
|
||||
|
||||
{/* Comments */}
|
||||
<div>
|
||||
<p className="text-sm font-semibold text-gray-700 mb-2">Comments ({comments.length})</p>
|
||||
<div className="space-y-2 max-h-48 overflow-y-auto mb-3">
|
||||
{comments.length === 0 ? <p className="text-sm text-gray-400">No comments yet.</p> :
|
||||
comments.map((c: TicketComment) => (
|
||||
<div key={c.id} className="bg-white border rounded-lg px-3 py-2 text-sm">
|
||||
<p className="font-medium text-gray-700 text-xs">{c.author ? `${c.author.firstName} ${c.author.lastName}` : "Staff"} · {formatDate(c.createdAt)}</p>
|
||||
<p className="text-gray-800 mt-0.5">{c.body}</p>
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<input className="flex-1 border rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
placeholder="Add a comment..." value={comment} onChange={e => setComment(e.target.value)}
|
||||
onKeyDown={e => e.key === "Enter" && !e.shiftKey && comment.trim() && addComment.mutate()} />
|
||||
<Button size="sm" onClick={() => addComment.mutate()} isLoading={addComment.isPending} disabled={!comment.trim()}>
|
||||
<Send size={14} />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end">
|
||||
<Button variant="outline" size="sm" onClick={() => setSelected(null)}>Close</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</Modal>
|
||||
|
||||
{/* Create Ticket Modal */}
|
||||
<Modal isOpen={showCreate} onClose={() => setShowCreate(false)} title="New Ticket">
|
||||
<div className="space-y-4">
|
||||
<Input label="Subject *" value={newForm.subject} onChange={e => setNewForm(f => ({ ...f, subject: e.target.value }))} />
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<label className="text-sm font-medium text-gray-700">Description</label>
|
||||
<textarea className="border rounded-lg px-3 py-2 text-sm resize-none h-24 focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
value={newForm.description} onChange={e => setNewForm(f => ({ ...f, description: e.target.value }))} />
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<label className="text-sm font-medium text-gray-700">Type</label>
|
||||
<select className="border rounded-lg px-3 py-2 text-sm" value={newForm.type} onChange={e => setNewForm(f => ({ ...f, type: e.target.value }))}>
|
||||
<option value="SUPPORT">Support</option>
|
||||
<option value="BILLING">Billing</option>
|
||||
<option value="INSTALLATION">Installation</option>
|
||||
</select>
|
||||
</div>
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<label className="text-sm font-medium text-gray-700">Priority</label>
|
||||
<select className="border rounded-lg px-3 py-2 text-sm" value={newForm.priority} onChange={e => setNewForm(f => ({ ...f, priority: e.target.value }))}>
|
||||
<option value="NORMAL">Normal</option>
|
||||
<option value="HIGH">High</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<label className="text-sm font-medium text-gray-700">Link to Client (optional)</label>
|
||||
<input className="border rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
placeholder="Search client by name..." value={newForm.clientSearch}
|
||||
onChange={e => setNewForm(f => ({ ...f, clientSearch: e.target.value, clientId: "" }))} />
|
||||
{(clientSearch as any[]).length > 0 && !newForm.clientId && (
|
||||
<div className="border rounded-lg divide-y max-h-40 overflow-y-auto shadow-sm">
|
||||
{(clientSearch as any[]).map((c: any) => (
|
||||
<button key={c.id} onClick={() => setNewForm(f => ({ ...f, clientId: c.id, clientSearch: `${c.firstName} ${c.lastName}` }))}
|
||||
className="w-full text-left px-3 py-2 text-sm hover:bg-blue-50 transition-colors">
|
||||
<span className="font-medium">{c.firstName} {c.lastName}</span>
|
||||
<span className="text-gray-400 ml-2 text-xs">{c.accountNumber}</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
{newForm.clientId && <p className="text-xs text-green-600">✓ Client linked</p>}
|
||||
</div>
|
||||
<div className="flex justify-end gap-2">
|
||||
<Button variant="outline" onClick={() => setShowCreate(false)}>Cancel</Button>
|
||||
<Button onClick={() => createTicket.mutate()} isLoading={createTicket.isPending} disabled={!newForm.subject}>Create Ticket</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user