connect the replay API to frontend

Author: Yasir761

web/src/app/api/webhook-test/route.ts

@@ -0,0 +1,5 @@
+
+export async function POST(req: Request) {
+    console.log("Webhook received")
+    return new Response("ok", { status: 200 })
+  }

web/src/app/delivery-targets/[id]/delivery-target-detail-client.tsx

@@ -13,6 +13,8 @@ import { UserNav } from "@/components/user-nav"
 import { useState } from "react"
 import type { DeliveryTarget, TargetStats } from "@/types/delivery-target"
 
+import TargetLogs from "../target-logs"
+
 
 
 
@@ -146,19 +148,23 @@ export default function DeliveryTargetDetailClient({
           <h2 className="font-semibold mb-4">Observability Insight</h2>
 
           <p className="text-sm text-muted-foreground">
-  {successRate >= 98
-    ? "Delivery pipeline is highly stable with minimal failure rate."
-    : successRate >= 90
-    ? "Minor delivery issues detected. Monitor retry behavior."
-    : "Significant failures detected. Check endpoint health, retries, or configuration."}
+         {successRate >= 98
+          ? "Delivery pipeline is highly stable with minimal failure rate."
+          : successRate >= 90
+          ? "Minor delivery issues detected. Monitor retry behavior."
+          : "Significant failures detected. Check endpoint health, retries, or configuration."}
 </p>
         </div>
+        <TargetLogs targetId={target.id} />
 
       </div>
     </div>
   )
 }
 
+
+
+
 /* ---------------- UI ---------------- */
 
 function Card({
@@ -176,6 +182,8 @@ function Card({
     >
       <p className="text-sm text-muted-foreground">{label}</p>
       <p className="text-xl font-bold">{value}</p>
+
     </motion.div>
   )
+  
 }

web/src/app/delivery-targets/target-logs.tsx

@@ -0,0 +1,85 @@
+"use client"
+
+import { useEffect, useState } from "react"
+import { CheckCircle2, XCircle, Clock } from "lucide-react"
+
+type Log = {
+  id: string
+  event_id: number
+  status: "success" | "failed"
+  status_code?: number
+  response?: string
+  attempt: number
+  created_at: string
+}
+
+export default function TargetLogs({ targetId }: { targetId: string }) {
+  const [logs, setLogs] = useState<Log[]>([])
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    fetch(`${process.env.NEXT_PUBLIC_API_URL}/delivery-targets/${targetId}/logs`)
+      .then(res => res.json())
+      .then(data => setLogs(data.items || []))
+      .finally(() => setLoading(false))
+  }, [targetId])
+
+  if (loading) {
+    return (
+      <div className="p-6 text-sm text-muted-foreground">
+        Loading logs...
+      </div>
+    )
+  }
+
+  return (
+    <div className="rounded-xl border bg-card overflow-hidden">
+
+      <div className="px-4 py-3 border-b text-sm font-medium">
+        Delivery Logs
+      </div>
+
+      <div className="divide-y">
+        {logs.length === 0 && (
+          <div className="p-6 text-sm text-muted-foreground">
+            No deliveries yet
+          </div>
+        )}
+
+        {logs.map(log => (
+          <div
+            key={log.id}
+            className="flex items-center justify-between p-4 hover:bg-muted/40 transition"
+          >
+            {/* LEFT */}
+            <div className="flex items-center gap-3">
+
+              {log.status === "success" && (
+                <CheckCircle2 className="w-4 h-4 text-emerald-500" />
+              )}
+
+              {log.status === "failed" && (
+                <XCircle className="w-4 h-4 text-rose-500" />
+              )}
+
+              <div>
+                <p className="text-sm font-medium">
+                  Event #{log.event_id}
+                </p>
+
+                <p className="text-xs text-muted-foreground">
+                  Attempt {log.attempt} • {log.status_code || "—"}
+                </p>
+              </div>
+            </div>
+
+            {/* RIGHT */}
+            <div className="text-xs text-muted-foreground">
+              {new Date(log.created_at).toLocaleTimeString()}
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}