app/(app)/clients/[id]/page.tsx

@@ -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>

src/types/index.ts

@@ -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;
 }