feat: client activation flow — prepaid & postpaid step-by-step wizard (FIBEROPS-227)
This commit is contained in:
root
@@ -3,7 +3,10 @@
|
||||
import { useState } from "react";
|
||||
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
|
||||
import { useParams, useRouter } from "next/navigation";
|
||||
import { ArrowLeft, Wifi, FileText, Ticket, CreditCard, RefreshCw } from "lucide-react";
|
||||
import {
|
||||
ArrowLeft, FileText, Ticket, CreditCard, RefreshCw,
|
||||
CheckCircle2, Circle, MapPin, Zap, AlertTriangle,
|
||||
} from "lucide-react";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/Card";
|
||||
import { Badge } from "@/components/ui/Badge";
|
||||
import { Button } from "@/components/ui/Button";
|
||||
@@ -40,6 +43,351 @@ const channelColors: Record<string, string> = {
|
||||
CHECK: "bg-gray-100 text-gray-700",
|
||||
};
|
||||
|
||||
// ─── Activation Flow Types ────────────────────────────────────────────────────
|
||||
|
||||
interface ActivationState {
|
||||
installationTicketId: string | null; // existing INSTALLATION ticket (OPEN/IN_PROGRESS)
|
||||
installationResolved: boolean;
|
||||
locationPinned: boolean; // client has lat/lng set
|
||||
invoiceCreated: boolean; // at least one invoice exists (prepaid: before activation)
|
||||
activationTicketId: string | null; // the INSTALLATION ticket used for activation step
|
||||
activationResolved: boolean;
|
||||
clientActive: boolean;
|
||||
}
|
||||
|
||||
// ─── Activation Flow Card ─────────────────────────────────────────────────────
|
||||
|
||||
function ActivationFlowCard({
|
||||
client,
|
||||
subscriptions,
|
||||
tickets,
|
||||
invoices,
|
||||
onRefresh,
|
||||
}: {
|
||||
client: Client;
|
||||
subscriptions: Subscription[];
|
||||
tickets: TicketType[];
|
||||
invoices: Invoice[];
|
||||
onRefresh: () => void;
|
||||
}) {
|
||||
const qc = useQueryClient();
|
||||
const [showPinModal, setShowPinModal] = useState(false);
|
||||
const [pinForm, setPinForm] = useState({ lat: String(client.lat ?? ""), lng: String(client.lng ?? "") });
|
||||
const [showActivationTicketModal, setShowActivationTicketModal] = useState(false);
|
||||
|
||||
const pendingSub = subscriptions.find(s => s.status === "PENDING");
|
||||
const billingType = pendingSub?.type ?? "POSTPAID";
|
||||
|
||||
// Derive state from data
|
||||
const installationTickets = tickets.filter(t => t.type === "INSTALLATION");
|
||||
const openInstallTicket = installationTickets.find(t => t.status === "OPEN" || t.status === "IN_PROGRESS");
|
||||
const resolvedInstallTickets = installationTickets.filter(t => t.status === "RESOLVED" || t.status === "CLOSED");
|
||||
|
||||
// Activation ticket = an INSTALLATION ticket created after the first one is resolved
|
||||
// We identify it by: resolved install exists + there's another ticket also INSTALLATION
|
||||
const activationTicket = resolvedInstallTickets.length > 1
|
||||
? resolvedInstallTickets[resolvedInstallTickets.length - 1] // latest resolved = activation
|
||||
: installationTickets.find(t =>
|
||||
(t.status === "OPEN" || t.status === "IN_PROGRESS") &&
|
||||
resolvedInstallTickets.length > 0
|
||||
);
|
||||
|
||||
const state: ActivationState = {
|
||||
installationTicketId: openInstallTicket?.id ?? null,
|
||||
installationResolved: resolvedInstallTickets.length > 0,
|
||||
locationPinned: !!(client.lat && client.lng),
|
||||
invoiceCreated: invoices.length > 0,
|
||||
activationTicketId: activationTicket?.id ?? null,
|
||||
activationResolved: !!(activationTicket && (activationTicket.status === "RESOLVED" || activationTicket.status === "CLOSED")),
|
||||
clientActive: client.isActive && (!pendingSub || pendingSub.status !== "PENDING"),
|
||||
};
|
||||
|
||||
// PREPAID steps: resolve install → pin location → create invoice → create activation ticket → resolve → activate
|
||||
// POSTPAID steps: resolve install → pin location → create activation ticket → resolve → activate → create invoice
|
||||
const isPrepaid = billingType === "PREPAID";
|
||||
|
||||
// Mutations
|
||||
const resolveInstallMutation = useMutation({
|
||||
mutationFn: async (ticketId: string) => {
|
||||
await api.patch(`/api/v1/tickets/${ticketId}`, { status: "RESOLVED" });
|
||||
},
|
||||
onSuccess: () => { toast.success("Installation ticket resolved!"); onRefresh(); qc.invalidateQueries({ queryKey: ["client-tickets", client.id] }); },
|
||||
onError: (e: any) => toast.error(e.response?.data?.message ?? "Failed to resolve ticket"),
|
||||
});
|
||||
|
||||
const pinLocationMutation = useMutation({
|
||||
mutationFn: async () => {
|
||||
const lat = parseFloat(pinForm.lat);
|
||||
const lng = parseFloat(pinForm.lng);
|
||||
if (isNaN(lat) || isNaN(lng)) throw new Error("Invalid coordinates");
|
||||
await api.patch(`/api/v1/clients/${client.id}`, { lat, lng });
|
||||
},
|
||||
onSuccess: () => {
|
||||
toast.success("Location pinned!");
|
||||
setShowPinModal(false);
|
||||
onRefresh();
|
||||
qc.invalidateQueries({ queryKey: ["client", client.id] });
|
||||
},
|
||||
onError: (e: any) => toast.error(e.response?.data?.message ?? e.message ?? "Failed to save location"),
|
||||
});
|
||||
|
||||
const generateInvoiceMutation = useMutation({
|
||||
mutationFn: async () => {
|
||||
await api.post(`/api/v1/invoices/generate/${client.id}`, {});
|
||||
},
|
||||
onSuccess: () => {
|
||||
toast.success("Invoice generated!");
|
||||
onRefresh();
|
||||
qc.invalidateQueries({ queryKey: ["client-invoices", client.id] });
|
||||
},
|
||||
onError: (e: any) => toast.error(e.response?.data?.message ?? "Failed to generate invoice"),
|
||||
});
|
||||
|
||||
const createActivationTicketMutation = useMutation({
|
||||
mutationFn: async () => {
|
||||
await api.post("/api/v1/tickets", {
|
||||
clientId: client.id,
|
||||
subject: `Activation — ${client.firstName} ${client.lastName} (${client.accountNumber})`,
|
||||
type: "INSTALLATION",
|
||||
priority: "HIGH",
|
||||
});
|
||||
},
|
||||
onSuccess: () => {
|
||||
toast.success("Activation ticket created!");
|
||||
setShowActivationTicketModal(false);
|
||||
onRefresh();
|
||||
qc.invalidateQueries({ queryKey: ["client-tickets", client.id] });
|
||||
},
|
||||
onError: (e: any) => toast.error(e.response?.data?.message ?? "Failed to create ticket"),
|
||||
});
|
||||
|
||||
const resolveActivationMutation = useMutation({
|
||||
mutationFn: async (ticketId: string) => {
|
||||
// 1. Resolve activation ticket
|
||||
await api.patch(`/api/v1/tickets/${ticketId}`, { status: "RESOLVED" });
|
||||
// 2. Set client to active
|
||||
await api.patch(`/api/v1/clients/${client.id}`, { isActive: true });
|
||||
// 3. Activate pending subscription if any
|
||||
if (pendingSub) {
|
||||
await api.patch(`/api/v1/clients/${client.id}/subscriptions/${pendingSub.id}/activate`, {});
|
||||
}
|
||||
},
|
||||
onSuccess: () => {
|
||||
toast.success("Client activated! 🎉");
|
||||
onRefresh();
|
||||
qc.invalidateQueries({ queryKey: ["client", client.id] });
|
||||
qc.invalidateQueries({ queryKey: ["client-subscriptions", client.id] });
|
||||
qc.invalidateQueries({ queryKey: ["client-tickets", client.id] });
|
||||
},
|
||||
onError: (e: any) => toast.error(e.response?.data?.message ?? "Activation failed"),
|
||||
});
|
||||
|
||||
const generatePostpaidInvoiceMutation = useMutation({
|
||||
mutationFn: async () => {
|
||||
await api.post(`/api/v1/invoices/generate/${client.id}`, {});
|
||||
},
|
||||
onSuccess: () => {
|
||||
toast.success("First month invoice generated!");
|
||||
onRefresh();
|
||||
qc.invalidateQueries({ queryKey: ["client-invoices", client.id] });
|
||||
},
|
||||
onError: (e: any) => toast.error(e.response?.data?.message ?? "Failed to generate invoice"),
|
||||
});
|
||||
|
||||
// Build steps based on billing type
|
||||
type StepStatus = "done" | "active" | "pending";
|
||||
|
||||
interface Step {
|
||||
label: string;
|
||||
description: string;
|
||||
status: StepStatus;
|
||||
action?: React.ReactNode;
|
||||
}
|
||||
|
||||
const steps: Step[] = isPrepaid
|
||||
? [
|
||||
{
|
||||
label: "Resolve Installation",
|
||||
description: "Mark the installation ticket as resolved",
|
||||
status: state.installationResolved ? "done" : "active",
|
||||
action: !state.installationResolved && state.installationTicketId ? (
|
||||
<Button size="sm" onClick={() => resolveInstallMutation.mutate(state.installationTicketId!)}
|
||||
isLoading={resolveInstallMutation.isPending}>
|
||||
Resolve Ticket
|
||||
</Button>
|
||||
) : undefined,
|
||||
},
|
||||
{
|
||||
label: "Pin Installation Location",
|
||||
description: "Save the client's GPS coordinates",
|
||||
status: state.locationPinned ? "done" : state.installationResolved ? "active" : "pending",
|
||||
action: !state.locationPinned && state.installationResolved ? (
|
||||
<Button size="sm" onClick={() => setShowPinModal(true)}>
|
||||
<MapPin className="h-3.5 w-3.5 mr-1" /> Pin Location
|
||||
</Button>
|
||||
) : undefined,
|
||||
},
|
||||
{
|
||||
label: "Create Invoice",
|
||||
description: "Generate the first month invoice (client pays before activation)",
|
||||
status: state.invoiceCreated ? "done" : (state.installationResolved && state.locationPinned) ? "active" : "pending",
|
||||
action: !state.invoiceCreated && state.installationResolved && state.locationPinned ? (
|
||||
<Button size="sm" onClick={() => generateInvoiceMutation.mutate()}
|
||||
isLoading={generateInvoiceMutation.isPending}>
|
||||
<FileText className="h-3.5 w-3.5 mr-1" /> Generate Invoice
|
||||
</Button>
|
||||
) : undefined,
|
||||
},
|
||||
{
|
||||
label: "Create Activation Ticket",
|
||||
description: "Open a ticket to confirm service activation",
|
||||
status: state.activationTicketId ? "done" : (state.invoiceCreated) ? "active" : "pending",
|
||||
action: !state.activationTicketId && state.invoiceCreated ? (
|
||||
<Button size="sm" onClick={() => createActivationTicketMutation.mutate()}
|
||||
isLoading={createActivationTicketMutation.isPending}>
|
||||
<Ticket className="h-3.5 w-3.5 mr-1" /> Create Ticket
|
||||
</Button>
|
||||
) : undefined,
|
||||
},
|
||||
{
|
||||
label: "Resolve Activation → Client Active",
|
||||
description: "Resolve the activation ticket — client status will be set to Active automatically",
|
||||
status: state.clientActive ? "done" : (state.activationTicketId && !state.activationResolved) ? "active" : "pending",
|
||||
action: state.activationTicketId && !state.activationResolved && !state.clientActive ? (
|
||||
<Button size="sm" variant="primary" onClick={() => resolveActivationMutation.mutate(state.activationTicketId!)}
|
||||
isLoading={resolveActivationMutation.isPending}>
|
||||
<Zap className="h-3.5 w-3.5 mr-1" /> Resolve & Activate
|
||||
</Button>
|
||||
) : undefined,
|
||||
},
|
||||
]
|
||||
: [
|
||||
{
|
||||
label: "Resolve Installation",
|
||||
description: "Mark the installation ticket as resolved",
|
||||
status: state.installationResolved ? "done" : "active",
|
||||
action: !state.installationResolved && state.installationTicketId ? (
|
||||
<Button size="sm" onClick={() => resolveInstallMutation.mutate(state.installationTicketId!)}
|
||||
isLoading={resolveInstallMutation.isPending}>
|
||||
Resolve Ticket
|
||||
</Button>
|
||||
) : undefined,
|
||||
},
|
||||
{
|
||||
label: "Pin Installation Location",
|
||||
description: "Save the client's GPS coordinates",
|
||||
status: state.locationPinned ? "done" : state.installationResolved ? "active" : "pending",
|
||||
action: !state.locationPinned && state.installationResolved ? (
|
||||
<Button size="sm" onClick={() => setShowPinModal(true)}>
|
||||
<MapPin className="h-3.5 w-3.5 mr-1" /> Pin Location
|
||||
</Button>
|
||||
) : undefined,
|
||||
},
|
||||
{
|
||||
label: "Create Activation Ticket",
|
||||
description: "Open a ticket to confirm service activation",
|
||||
status: state.activationTicketId ? "done" : (state.installationResolved && state.locationPinned) ? "active" : "pending",
|
||||
action: !state.activationTicketId && state.installationResolved && state.locationPinned ? (
|
||||
<Button size="sm" onClick={() => createActivationTicketMutation.mutate()}
|
||||
isLoading={createActivationTicketMutation.isPending}>
|
||||
<Ticket className="h-3.5 w-3.5 mr-1" /> Create Ticket
|
||||
</Button>
|
||||
) : undefined,
|
||||
},
|
||||
{
|
||||
label: "Resolve Activation → Client Active",
|
||||
description: "Resolve the activation ticket — client status will be set to Active automatically",
|
||||
status: state.clientActive ? "done" : (state.activationTicketId && !state.activationResolved) ? "active" : "pending",
|
||||
action: state.activationTicketId && !state.activationResolved && !state.clientActive ? (
|
||||
<Button size="sm" variant="primary" onClick={() => resolveActivationMutation.mutate(state.activationTicketId!)}
|
||||
isLoading={resolveActivationMutation.isPending}>
|
||||
<Zap className="h-3.5 w-3.5 mr-1" /> Resolve & Activate
|
||||
</Button>
|
||||
) : undefined,
|
||||
},
|
||||
{
|
||||
label: "Generate First Month Invoice",
|
||||
description: "Create the first invoice after client is active (postpaid)",
|
||||
status: (state.clientActive && state.invoiceCreated) ? "done" : state.clientActive ? "active" : "pending",
|
||||
action: state.clientActive && !state.invoiceCreated ? (
|
||||
<Button size="sm" onClick={() => generatePostpaidInvoiceMutation.mutate()}
|
||||
isLoading={generatePostpaidInvoiceMutation.isPending}>
|
||||
<FileText className="h-3.5 w-3.5 mr-1" /> Generate Invoice
|
||||
</Button>
|
||||
) : undefined,
|
||||
},
|
||||
];
|
||||
|
||||
const allDone = steps.every(s => s.status === "done");
|
||||
if (allDone) return null;
|
||||
|
||||
return (
|
||||
<>
|
||||
<Card className="border-amber-200 bg-amber-50">
|
||||
<CardHeader>
|
||||
<div className="flex items-center gap-2">
|
||||
<AlertTriangle className="h-4 w-4 text-amber-600" />
|
||||
<CardTitle className="text-amber-800 text-base">
|
||||
Activation Flow — {isPrepaid ? "Prepaid" : "Postpaid"}
|
||||
</CardTitle>
|
||||
<Badge variant="warning" className="ml-auto">{pendingSub?.plan?.name ?? "Pending"}</Badge>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<ol className="space-y-3">
|
||||
{steps.map((step, i) => (
|
||||
<li key={i} className="flex items-start gap-3">
|
||||
<div className="mt-0.5 shrink-0">
|
||||
{step.status === "done" ? (
|
||||
<CheckCircle2 className="h-5 w-5 text-green-500" />
|
||||
) : step.status === "active" ? (
|
||||
<div className="h-5 w-5 rounded-full border-2 border-amber-500 bg-amber-100 flex items-center justify-center">
|
||||
<div className="h-2 w-2 rounded-full bg-amber-500" />
|
||||
</div>
|
||||
) : (
|
||||
<Circle className="h-5 w-5 text-gray-300" />
|
||||
)}
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className={`text-sm font-medium ${
|
||||
step.status === "done" ? "text-green-700 line-through opacity-60" :
|
||||
step.status === "active" ? "text-gray-900" : "text-gray-400"
|
||||
}`}>{step.label}</p>
|
||||
{step.status !== "done" && (
|
||||
<p className="text-xs text-gray-500 mt-0.5">{step.description}</p>
|
||||
)}
|
||||
</div>
|
||||
{step.action && <div className="shrink-0">{step.action}</div>}
|
||||
</li>
|
||||
))}
|
||||
</ol>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Pin Location Modal */}
|
||||
<Modal isOpen={showPinModal} onClose={() => setShowPinModal(false)} title="Pin Installation Location">
|
||||
<div className="space-y-4">
|
||||
<p className="text-sm text-gray-500">Enter the GPS coordinates for this installation site.</p>
|
||||
<Input label="Latitude" type="number" step="any" placeholder="e.g. 16.5325"
|
||||
value={pinForm.lat} onChange={e => setPinForm(f => ({ ...f, lat: e.target.value }))} />
|
||||
<Input label="Longitude" type="number" step="any" placeholder="e.g. 121.7710"
|
||||
value={pinForm.lng} onChange={e => setPinForm(f => ({ ...f, lng: e.target.value }))} />
|
||||
<p className="text-xs text-gray-400">💡 Tip: Get coordinates from Google Maps → right-click the location → copy lat/lng.</p>
|
||||
<div className="flex justify-end gap-2 pt-1">
|
||||
<Button variant="outline" onClick={() => setShowPinModal(false)}>Cancel</Button>
|
||||
<Button onClick={() => pinLocationMutation.mutate()} isLoading={pinLocationMutation.isPending}
|
||||
disabled={!pinForm.lat || !pinForm.lng}>
|
||||
<MapPin className="h-4 w-4 mr-1" /> Save Location
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
// ─── Main Page ────────────────────────────────────────────────────────────────
|
||||
|
||||
export default function ClientDetailPage() {
|
||||
const { id } = useParams<{ id: string }>();
|
||||
const router = useRouter();
|
||||
@@ -53,16 +401,28 @@ export default function ClientDetailPage() {
|
||||
queryFn: async () => { const r = await api.get<Client>(`/api/v1/clients/${id}`); return r.data; },
|
||||
});
|
||||
|
||||
const { data: subscriptions, isError: subsError } = useQuery<Subscription[]>({
|
||||
const { data: subscriptions = [] } = useQuery<Subscription[]>({
|
||||
queryKey: ["client-subscriptions", id],
|
||||
queryFn: async () => { const r = await api.get<{ data: Subscription[] }>(`/api/v1/clients/${id}/subscriptions`); return (r.data as any).data ?? []; },
|
||||
enabled: activeTab === "subscriptions",
|
||||
queryFn: async () => {
|
||||
const r = await api.get<{ data: Subscription[] }>(`/api/v1/clients/${id}/subscriptions`);
|
||||
return (r.data as any).data ?? [];
|
||||
},
|
||||
});
|
||||
|
||||
const { data: allTickets = [] } = useQuery<TicketType[]>({
|
||||
queryKey: ["client-tickets-all", id],
|
||||
queryFn: async () => {
|
||||
const r = await api.get<LegacyPaginatedResponse<TicketType>>(`/api/v1/tickets?clientId=${id}&page=1&limit=50`);
|
||||
return (r.data as any).data ?? [];
|
||||
},
|
||||
});
|
||||
|
||||
const { data: invoicesData, refetch: refetchInvoices } = useQuery<LegacyPaginatedResponse<Invoice>>({
|
||||
queryKey: ["client-invoices", id],
|
||||
queryFn: async () => { const r = await api.get<LegacyPaginatedResponse<Invoice>>(`/api/v1/invoices?clientId=${id}&page=1&limit=30`); return r.data; },
|
||||
enabled: activeTab === "invoices",
|
||||
queryFn: async () => {
|
||||
const r = await api.get<LegacyPaginatedResponse<Invoice>>(`/api/v1/invoices?clientId=${id}&page=1&limit=30`);
|
||||
return r.data;
|
||||
},
|
||||
});
|
||||
|
||||
const { data: paymentsData } = useQuery<LegacyPaginatedResponse<Payment>>({
|
||||
@@ -74,12 +434,6 @@ export default function ClientDetailPage() {
|
||||
enabled: activeTab === "payments",
|
||||
});
|
||||
|
||||
const { data: ticketsData } = useQuery<LegacyPaginatedResponse<TicketType>>({
|
||||
queryKey: ["client-tickets", id],
|
||||
queryFn: async () => { const r = await api.get<LegacyPaginatedResponse<TicketType>>(`/api/v1/tickets?clientId=${id}&page=1&limit=20`); return r.data; },
|
||||
enabled: activeTab === "tickets",
|
||||
});
|
||||
|
||||
const recordPayment = useMutation({
|
||||
mutationFn: async () => {
|
||||
await api.post("/api/v1/payments", {
|
||||
@@ -125,6 +479,15 @@ export default function ClientDetailPage() {
|
||||
|
||||
const sub = client.subscriptions?.[0];
|
||||
const clientStatus = sub?.status ?? (client.isActive ? "ACTIVE" : "INACTIVE");
|
||||
const hasPendingSub = subscriptions.some(s => s.status === "PENDING");
|
||||
const needsActivation = !client.isActive || hasPendingSub;
|
||||
|
||||
const handleRefresh = () => {
|
||||
refetchClient();
|
||||
qc.invalidateQueries({ queryKey: ["client-subscriptions", id] });
|
||||
qc.invalidateQueries({ queryKey: ["client-tickets-all", id] });
|
||||
qc.invalidateQueries({ queryKey: ["client-invoices", id] });
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
@@ -138,9 +501,20 @@ export default function ClientDetailPage() {
|
||||
<p className="text-sm text-gray-500">{client.accountNumber} · {client.area?.name ?? "No area"}</p>
|
||||
</div>
|
||||
<Badge variant={statusColor[clientStatus] ?? "muted"}>{clientStatus}</Badge>
|
||||
<Button size="sm" variant="outline" onClick={() => refetchClient()}><RefreshCw className="h-4 w-4" /></Button>
|
||||
<Button size="sm" variant="outline" onClick={handleRefresh}><RefreshCw className="h-4 w-4" /></Button>
|
||||
</div>
|
||||
|
||||
{/* Activation Flow Banner — only when client is not yet active */}
|
||||
{needsActivation && (
|
||||
<ActivationFlowCard
|
||||
client={client}
|
||||
subscriptions={subscriptions}
|
||||
tickets={allTickets}
|
||||
invoices={invoicesData?.data ?? []}
|
||||
onRefresh={handleRefresh}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Tabs */}
|
||||
<div className="flex border-b border-gray-200 overflow-x-auto">
|
||||
{tabs.map(tab => (
|
||||
@@ -165,6 +539,7 @@ export default function ClientDetailPage() {
|
||||
{ label: "Address", value: client.address || "—" },
|
||||
{ label: "Area", value: client.area?.name || "—" },
|
||||
{ label: "Status", value: client.isActive ? "Active" : "Inactive" },
|
||||
{ label: "Location", value: client.lat && client.lng ? `${client.lat}, ${client.lng}` : "Not pinned" },
|
||||
{ label: "Joined", value: formatDate(client.createdAt) },
|
||||
].map(({ label, value }) => (
|
||||
<div key={label}>
|
||||
@@ -185,7 +560,7 @@ export default function ClientDetailPage() {
|
||||
<Table>
|
||||
<TableHead><TableRow><Th>Plan</Th><Th>Type</Th><Th>Status</Th><Th>Start Date</Th><Th>Monthly Rate</Th></TableRow></TableHead>
|
||||
<TableBody>
|
||||
{!subscriptions || subscriptions.length === 0 ? <EmptyState message="No subscriptions" /> :
|
||||
{subscriptions.length === 0 ? <EmptyState message="No subscriptions" /> :
|
||||
subscriptions.map(sub => (
|
||||
<TableRow key={sub.id}>
|
||||
<Td className="font-medium">{sub.plan?.name ?? "—"}</Td>
|
||||
@@ -270,8 +645,8 @@ export default function ClientDetailPage() {
|
||||
<Table>
|
||||
<TableHead><TableRow><Th>Subject</Th><Th>Type</Th><Th>Priority</Th><Th>Status</Th><Th>Created</Th></TableRow></TableHead>
|
||||
<TableBody>
|
||||
{!ticketsData?.data || ticketsData.data.length === 0 ? <EmptyState message="No tickets" /> :
|
||||
ticketsData.data.map(t => (
|
||||
{allTickets.length === 0 ? <EmptyState message="No tickets" /> :
|
||||
allTickets.map(t => (
|
||||
<TableRow key={t.id}>
|
||||
<Td className="font-medium">{t.subject}</Td>
|
||||
<Td><Badge variant="muted">{t.type}</Badge></Td>
|
||||
|
||||
@@ -46,6 +46,8 @@ export interface Client {
|
||||
phone: string;
|
||||
address?: string;
|
||||
isActive: boolean;
|
||||
lat?: number | null;
|
||||
lng?: number | null;
|
||||
createdAt: string;
|
||||
updatedAt: string;
|
||||
area?: { id: string; name: string };
|
||||
@@ -63,6 +65,7 @@ export interface Subscription {
|
||||
endDate?: string;
|
||||
monthlyRate?: number;
|
||||
mrc?: number;
|
||||
monthlyPrice?: number | string;
|
||||
createdAt: string;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user