feat: add Connections workspace and navigation for provider management

Author: Yasir761

web/src/app/(dashboard)/connections/page.tsx

@@ -0,0 +1,5 @@
+import { ConnectionsWorkspace } from "@/components/connections/connections-workspace"
+
+export default function ConnectionsPage() {
+  return <ConnectionsWorkspace />
+}

web/src/components/connections/connection-card.tsx

@@ -0,0 +1,111 @@
+"use client"
+
+import {
+  CheckCircle2,
+  AlertTriangle,
+  ExternalLink,
+} from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import type { Connection } from "@/types/connection"
+
+type Props = {
+  connection: Connection
+  selected?: boolean
+  onClick?: () => void
+}
+
+export function ConnectionCard({
+  connection,
+  selected,
+  onClick,
+}: Props) {
+  return (
+    <button
+      onClick={onClick}
+      className={cn(
+        `
+          rounded-2xl
+          border border-border
+          bg-background/40
+          p-5
+          text-left
+          transition-all
+          hover:border-orange-500/30
+        `,
+        selected &&
+          "border-orange-500/50 bg-orange-500/[0.03]"
+      )}
+    >
+      <div className="mb-5 flex items-center justify-between">
+
+        <h3 className="text-lg font-semibold">
+          {connection.provider}
+        </h3>
+
+        {connection.status ===
+        "healthy" ? (
+          <CheckCircle2 className="h-5 w-5 text-emerald-400" />
+        ) : (
+          <AlertTriangle className="h-5 w-5 text-rose-400" />
+        )}
+
+      </div>
+
+      <div className="space-y-3 text-sm">
+
+        <Info
+          label="Account"
+          value={
+            connection.accountName
+          }
+        />
+
+        <Info
+          label="Last Sync"
+          value={
+            connection.lastSync
+          }
+        />
+
+        <Info
+          label="API Version"
+          value={
+            connection.apiVersion
+          }
+        />
+
+      </div>
+
+      <div className="mt-5 flex items-center justify-between border-t border-border pt-4">
+
+        <span className="text-xs text-muted-foreground">
+          Connected
+          {" "}
+          {connection.connectedAt}
+        </span>
+
+        <ExternalLink className="h-4 w-4 text-muted-foreground" />
+
+      </div>
+    </button>
+  )
+}
+
+function Info({
+  label,
+  value,
+}: {
+  label: string
+  value: string
+}) {
+  return (
+    <div className="flex justify-between">
+      <span className="text-muted-foreground">
+        {label}
+      </span>
+
+      <span>{value}</span>
+    </div>
+  )
+}

web/src/components/connections/connection-inspector.tsx

@@ -0,0 +1,127 @@
+"use client"
+
+import { PlugZap } from "lucide-react"
+
+import type { Connection } from "@/types/connection"
+
+type Props = {
+  connection: Connection | null
+}
+
+export function ConnectionInspector({
+  connection,
+}: Props) {
+  if (!connection) {
+    return (
+      <div className="flex h-full items-center justify-center text-muted-foreground">
+        Select a provider
+      </div>
+    )
+  }
+
+  return (
+    <div className="flex h-full flex-col">
+
+      <div className="border-b border-border p-5">
+
+        <div className="flex items-center gap-3">
+
+          <PlugZap className="h-5 w-5 text-orange-400" />
+
+          <div>
+
+            <h2 className="font-semibold">
+              Connection Inspector
+            </h2>
+
+            <p className="text-sm text-muted-foreground">
+              provider details
+            </p>
+
+          </div>
+
+        </div>
+
+      </div>
+
+      <div className="space-y-4 p-5 text-sm">
+
+        <Info
+          label="Provider"
+          value={
+            connection.provider
+          }
+        />
+
+        <Info
+          label="Status"
+          value={
+            connection.status
+          }
+        />
+
+        <Info
+          label="Events"
+          value={
+            connection.eventsReceived
+          }
+        />
+
+        <Info
+          label="Rate Limit"
+          value={
+            connection.rateLimitRemaining
+          }
+        />
+
+        <Info
+          label="Last Event"
+          value={
+            connection.lastSync
+          }
+        />
+
+      </div>
+
+      <div className="border-t border-border p-5">
+
+        <h3 className="mb-3 font-medium">
+          Webhook URL
+        </h3>
+
+        <div className="rounded-xl border border-border p-3 text-xs">
+          {connection.webhookUrl}
+        </div>
+
+      </div>
+
+      <div className="border-t border-border p-5">
+
+        <h3 className="mb-3 font-medium">
+          Secret
+        </h3>
+
+        <div className="rounded-xl border border-border p-3 text-xs">
+          {connection.secret}
+        </div>
+
+      </div>
+
+    </div>
+  )
+}
+
+function Info({
+  label,
+  value,
+}: {
+  label: string
+  value: React.ReactNode
+}) {
+  return (
+    <div className="flex justify-between">
+      <span>{label}</span>
+      <span>{value}</span>
+    </div>
+  )
+}

web/src/components/connections/connections-grid.tsx

@@ -0,0 +1,45 @@
+"use client"
+
+import type { Connection } from "@/types/connection"
+
+import { ConnectionCard } from "./connection-card"
+
+type Props = {
+  connections: Connection[]
+  selected: Connection | null
+  onSelect: (
+    connection: Connection
+  ) => void
+}
+
+export function ConnectionsGrid({
+  connections,
+  selected,
+  onSelect,
+}: Props) {
+  return (
+    <div
+      className="
+        grid gap-5 p-5
+        md:grid-cols-2
+        xl:grid-cols-3
+      "
+    >
+      {connections.map(
+        (connection) => (
+          <ConnectionCard
+            key={connection.id}
+            connection={connection}
+            selected={
+              selected?.id ===
+              connection.id
+            }
+            onClick={() =>
+              onSelect(connection)
+            }
+          />
+        )
+      )}
+    </div>
+  )
+}

web/src/components/connections/connections-stats.tsx

@@ -0,0 +1,73 @@
+"use client"
+
+import type { Connection } from "@/types/connection"
+
+type Props = {
+  connections: Connection[]
+}
+
+export function ConnectionsStats({
+  connections,
+}: Props) {
+  const healthy =
+    connections.filter(
+      (c) =>
+        c.status ===
+        "healthy"
+    ).length
+
+  const errors =
+    connections.filter(
+      (c) =>
+        c.status ===
+        "error"
+    ).length
+
+  return (
+    <div className="grid grid-cols-4 border-b border-border">
+
+      <Stat
+        label="Providers"
+        value={connections.length}
+      />
+
+      <Stat
+        label="Healthy"
+        value={healthy}
+      />
+
+      <Stat
+        label="Errors"
+        value={errors}
+      />
+
+      <Stat
+        label="Events Today"
+        value="128k"
+      />
+
+    </div>
+  )
+}
+
+function Stat({
+  label,
+  value,
+}: {
+  label: string
+  value: string | number
+}) {
+  return (
+    <div className="border-r border-border p-5 last:border-r-0">
+
+      <p className="text-sm text-muted-foreground">
+        {label}
+      </p>
+
+      <h3 className="mt-2 text-4xl font-bold">
+        {value}
+      </h3>
+
+    </div>
+  )
+}