first

2026-09-08 07:21:34 -04:00
commit a4b224da8e
169 changed files with 27483 additions and 0 deletions
@@ -0,0 +1,112 @@
+"use client";
+
+import React from "react";
+import { Plug, Github, GitBranch, CircleDot, BookMarked, Activity, CheckCircle2, AlertTriangle, Plus } from "lucide-react";
+import { Card, CardBody, CardHeader, CardTitle } from "@/components/ui/Card";
+import { Button } from "@/components/ui/Button";
+import { Badge } from "@/components/ui/Badge";
+import { EmptyState } from "@/components/ui/EmptyState";
+
+const CATALOG = [
+  { key: "github",    name: "GitHub",              icon: Github,      kind: "git",         status: "available", desc: "Import PRs, commits, branches and release events." },
+  { key: "gitlab",    name: "GitLab",              icon: GitBranch,   kind: "git",         status: "planned",   desc: "Planned connector — same primitives as GitHub." },
+  { key: "jira",      name: "Jira / Linear",       icon: CircleDot,   kind: "requirements", status: "planned", desc: "Sync epics, stories and tasks as ASF Artifacts." },
+  { key: "jenkins",   name: "Jenkins CI",          icon: GitBranch,   kind: "ci",          status: "planned",   desc: "Map build results to Build & Test artifacts." },
+  { key: "notion",    name: "Notion / Confluence", icon: BookMarked,  kind: "docs",        status: "planned",   desc: "ADRs and docs synchronized as Document artifacts." },
+  { key: "datadog",   name: "Datadog / Prometheus",icon: Activity,    kind: "observability", status: "planned", desc: "Incidents and runtime events → incident artifacts." },
+];
+
+const CONNECTED = [
+  { key: "github", name: "GitHub (azurian-org)", tenant: "default", status: "ok", since: "2025-11-01T00:00:00Z" },
+];
+
+export default function IntegrationsPage() {
+  return (
+    <div className="p-6 lg:p-8 max-w-[1400px] mx-auto">
+      <header className="mb-6 flex flex-wrap items-start justify-between gap-3">
+        <div>
+          <h1 className="text-2xl font-semibold tracking-tight text-slate-900 flex items-center gap-2">
+            <Plug className="w-6 h-6 text-brand-600" />
+            Integrations
+          </h1>
+          <p className="mt-1 text-sm text-slate-500">
+            ASF connectors — plug in Git providers, requirements tools, CI/CD, docs and observability platforms. Core stays decoupled.
+          </p>
+        </div>
+        <Button variant="primary" size="sm"><Plus className="w-4 h-4" /> Add integration</Button>
+      </header>
+
+      <section className="mb-6">
+        <Card>
+          <CardHeader>
+            <CardTitle>Connected</CardTitle>
+            <Badge tone="green">{CONNECTED.length} active</Badge>
+          </CardHeader>
+          <CardBody className="p-0">
+            {CONNECTED.length === 0 ? (
+              <div className="p-6">
+                <EmptyState title="Nothing connected yet" description="Choose a provider from the catalog to start ingesting artifacts." icon={Plug} />
+              </div>
+            ) : (
+              <ul className="divide-y divide-slate-100">
+                {CONNECTED.map((c) => (
+                  <li key={c.key} className="p-4 flex items-center gap-4 hover:bg-slate-50">
+                    <div className="w-10 h-10 rounded-lg bg-slate-50 border border-slate-200 grid place-items-center shrink-0">
+                      <Github className="w-5 h-5 text-slate-700" />
+                    </div>
+                    <div className="min-w-0 flex-1">
+                      <div className="font-medium text-slate-800">{c.name}</div>
+                      <div className="text-xs text-slate-500">tenant: <span className="asf-monospace">{c.tenant}</span></div>
+                    </div>
+                    <Badge tone={c.status === "ok" ? "green" : "amber"} className="inline-flex items-center gap-1">
+                      {c.status === "ok" ? <CheckCircle2 className="w-3 h-3" /> : <AlertTriangle className="w-3 h-3" />}
+                      {c.status}
+                    </Badge>
+                  </li>
+                ))}
+              </ul>
+            )}
+          </CardBody>
+        </Card>
+      </section>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Catalog</CardTitle>
+          <Badge tone="brand">asf-connectors package</Badge>
+        </CardHeader>
+        <CardBody>
+          <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-3">
+            {CATALOG.map((c) => {
+              const Icon = c.icon;
+              return (
+                <div key={c.key} className="p-4 rounded-xl border border-slate-200 bg-white hover:border-brand-200 hover:shadow-card transition-all">
+                  <div className="flex items-start justify-between gap-3">
+                    <div className="w-10 h-10 rounded-lg bg-brand-50 border border-brand-100 grid place-items-center text-brand-600 shrink-0">
+                      <Icon className="w-5 h-5" />
+                    </div>
+                    <Badge
+                      tone={c.status === "available" ? "green" : c.status === "planned" ? "neutral" : "amber"}
+                    >
+                      {c.status}
+                    </Badge>
+                  </div>
+                  <div className="mt-3">
+                    <div className="font-semibold text-slate-800">{c.name}</div>
+                    <div className="text-xs text-slate-500 mt-1 capitalize">{c.kind}</div>
+                    <p className="text-xs text-slate-600 mt-2 leading-relaxed">{c.desc}</p>
+                  </div>
+                  <div className="mt-4 flex justify-end">
+                    <Button variant="secondary" size="sm" disabled={c.status !== "available"}>
+                      {c.status === "available" ? "Connect" : "Coming soon"}
+                    </Button>
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        </CardBody>
+      </Card>
+    </div>
+  );
+}