From 222ce8de73927ad21cfbda24c659ab61f5e83d31 Mon Sep 17 00:00:00 2001
From: jyswee <jyswee@gmail.com>
Date: Thu, 23 Jul 2026 22:15:25 +0000
Subject: [PATCH] Seed: developer-tools template (15 files)

---
 src/pages/Status.tsx | 168 +++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 168 insertions(+)
 create mode 100644 src/pages/Status.tsx

diff --git a/src/pages/Status.tsx b/src/pages/Status.tsx
new file mode 100644
index 0000000..44391a3
--- /dev/null
+++ b/src/pages/Status.tsx
@@ -0,0 +1,168 @@
+import { Badge } from "@/components/ui/badge";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { CheckCircle2, AlertTriangle, Clock } from "lucide-react";
+import Header from "@/components/Header";
+import Footer from "@/components/Footer";
+
+const services = [
+  { name: "API", status: "operational", uptime: "99.99" },
+  { name: "Dashboard", status: "operational", uptime: "99.98" },
+  { name: "CDN", status: "operational", uptime: "99.99" },
+  { name: "Database", status: "operational", uptime: "99.97" },
+  { name: "Auth", status: "degraded", uptime: "99.91" },
+  { name: "Webhooks", status: "operational", uptime: "99.95" },
+];
+
+const incidents = [
+  {
+    date: "Mar 28, 2024",
+    title: "Elevated API Latency in US-East",
+    status: "resolved",
+    duration: "23 minutes",
+    desc: "API response times were elevated due to a database connection pool issue. The pool was resized and latency returned to normal.",
+  },
+  {
+    date: "Mar 15, 2024",
+    title: "Dashboard Login Timeout",
+    status: "resolved",
+    duration: "8 minutes",
+    desc: "Some users experienced timeouts during login. The auth service was restarted and the issue was resolved.",
+  },
+  {
+    date: "Feb 22, 2024",
+    title: "CDN Cache Invalidation Delay",
+    status: "resolved",
+    duration: "45 minutes",
+    desc: "Cache invalidation requests were delayed by up to 10 minutes due to a queue backlog. The queue was cleared and processing returned to normal.",
+  },
+];
+
+function StatusDot({ status }: { status: string }) {
+  const colors: Record<string, string> = {
+    operational: "bg-emerald-500",
+    degraded: "bg-amber-500",
+    down: "bg-red-500",
+  };
+  return <span className={`h-3 w-3 rounded-full \${colors[status] || colors.operational} inline-block`} />;
+}
+
+export default function StatusPage() {
+  const allOperational = services.every((s) => s.status === "operational");
+
+  return (
+    <div className="min-h-screen bg-slate-950 text-white antialiased">
+      <Header />
+
+      <div className="pt-32 pb-24 mx-auto max-w-4xl px-6">
+        {/* Overall Status */}
+        <div className="text-center mb-16">
+          <div className={`inline-flex items-center gap-3 px-6 py-3 rounded-full mb-6 \${
+            allOperational
+              ? "bg-emerald-500/10 border border-emerald-500/20"
+              : "bg-amber-500/10 border border-amber-500/20"
+          }`}>
+            {allOperational ? (
+              <CheckCircle2 className="h-6 w-6 text-emerald-400" />
+            ) : (
+              <AlertTriangle className="h-6 w-6 text-amber-400" />
+            )}
+            <span className={`text-lg font-semibold \${allOperational ? "text-emerald-400" : "text-amber-400"}`}>
+              {allOperational ? "All Systems Operational" : "Partial Degradation"}
+            </span>
+          </div>
+          <p className="text-slate-400">
+            Last checked: {new Date().toLocaleString()}
+          </p>
+        </div>
+
+        {/* Service Status Rows */}
+        <Card className="bg-slate-900/60 border-slate-800 mb-12">
+          <CardHeader>
+            <CardTitle className="text-lg text-white animate-fade-up">Service Status</CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-0 stagger">
+            {services.map((service, i) => (
+              <div
+                key={service.name}
+                className={`flex items-center justify-between py-4 \${
+                  i < services.length - 1 ? "border-b border-slate-800" : ""
+                }`}
+              >
+                <div className="flex items-center gap-3">
+                  <StatusDot status={service.status} />
+                  <span className="font-medium text-white">{service.name}</span>
+                </div>
+                <div className="flex items-center gap-4">
+                  <Badge variant="outline" className={`text-xs \${
+                    service.status === "operational"
+                      ? "text-emerald-400 border-emerald-500/30"
+                      : service.status === "degraded"
+                      ? "text-amber-400 border-amber-500/30"
+                      : "text-red-400 border-red-500/30"
+                  }`}>
+                    {service.status}
+                  </Badge>
+                  <span className="text-sm text-slate-400 font-mono w-16 text-right">{service.uptime}%</span>
+                </div>
+              </div>
+            ))}
+          </CardContent>
+        </Card>
+
+        {/* 90-Day Uptime Bar */}
+        <Card className="bg-slate-900/60 border-slate-800 mb-12">
+          <CardHeader>
+            <div className="flex items-center justify-between">
+              <CardTitle className="text-lg text-white">90-Day Uptime</CardTitle>
+              <span className="text-sm text-emerald-400 font-mono">99.97%</span>
+            </div>
+          </CardHeader>
+          <CardContent>
+            <div className="flex gap-0.5 h-8">
+              {Array.from({ length: 90 }).map((_, i) => (
+                <div
+                  key={i}
+                  className={`flex-1 rounded-sm \${
+                    i === 62 ? "bg-amber-500" : i === 71 ? "bg-amber-500" : "bg-emerald-500/60"
+                  }`}
+                  title={`Day \${90 - i}`}
+                />
+              ))}
+            </div>
+            <div className="flex justify-between mt-2">
+              <span className="text-xs text-slate-500">90 days ago</span>
+              <span className="text-xs text-slate-500">Today</span>
+            </div>
+          </CardContent>
+        </Card>
+
+        {/* Incident History */}
+        <div className="mb-8">
+          <h2 className="text-xl font-bold mb-6 animate-fade-up">Incident History</h2>
+          <div className="space-y-6">
+            {incidents.map((incident) => (
+              <Card key={incident.date} className="bg-slate-900/60 border-slate-800">
+                <CardContent className="p-6">
+                  <div className="flex flex-wrap items-center gap-3 mb-3">
+                    <Badge variant="outline" className="text-emerald-400 border-emerald-500/30 text-xs">
+                      {incident.status}
+                    </Badge>
+                    <span className="text-sm text-slate-500">{incident.date}</span>
+                    <div className="flex items-center gap-1 text-slate-500">
+                      <Clock className="h-3.5 w-3.5" />
+                      <span className="text-xs">{incident.duration}</span>
+                    </div>
+                  </div>
+                  <h3 className="font-semibold text-white mb-2">{incident.title}</h3>
+                  <p className="text-sm text-slate-400 leading-relaxed">{incident.desc}</p>
+                </CardContent>
+              </Card>
+            ))}
+          </div>
+        </div>
+      </div>
+
+      <Footer />
+    </div>
+  );
+}