chore: clean git cache

2026-01-02 01:01:54 +00:00
parent aae55a8ae9
commit 5ea207ab47
290 changed files with 62353 additions and 0 deletions
--- a/frontend/src/components/CertificateStatusCard.tsx
+++ b/frontend/src/components/CertificateStatusCard.tsx
@@ -0,0 +1,143 @@
+import { useMemo } from 'react'
+import { Link } from 'react-router-dom'
+import { FileKey, Loader2 } from 'lucide-react'
+import { Card, CardHeader, CardContent, Badge, Skeleton, Progress } from './ui'
+import type { Certificate } from '../api/certificates'
+import type { ProxyHost } from '../api/proxyHosts'
+
+interface CertificateStatusCardProps {
+  certificates: Certificate[]
+  hosts: ProxyHost[]
+  isLoading?: boolean
+}
+
+export default function CertificateStatusCard({ certificates, hosts, isLoading }: CertificateStatusCardProps) {
+  const validCount = certificates.filter(c => c.status === 'valid').length
+  const expiringCount = certificates.filter(c => c.status === 'expiring').length
+  const untrustedCount = certificates.filter(c => c.status === 'untrusted').length
+
+  // Build a set of all domains that have certificates (case-insensitive)
+  // ACME certificates (Let's Encrypt) are auto-managed and don't set certificate_id,
+  // so we match by domain name instead
+  const certifiedDomains = useMemo(() => {
+    const domains = new Set<string>()
+    certificates.forEach(cert => {
+      // Handle missing or undefined domain field
+      if (!cert.domain) return
+      // Certificate domain field can be comma-separated
+      cert.domain.split(',').forEach(d => {
+        const trimmed = d.trim().toLowerCase()
+        if (trimmed) domains.add(trimmed)
+      })
+    })
+    return domains
+  }, [certificates])
+
+  // Calculate pending hosts: SSL-enabled hosts without any domain covered by a certificate
+  const { pendingCount, totalSSLHosts, hostsWithCerts } = useMemo(() => {
+    const sslHosts = hosts.filter(h => h.ssl_forced && h.enabled)
+
+    let withCerts = 0
+    sslHosts.forEach(host => {
+      // Check if any of the host's domains have a certificate
+      const hostDomains = host.domain_names.split(',').map(d => d.trim().toLowerCase())
+      if (hostDomains.some(domain => certifiedDomains.has(domain))) {
+        withCerts++
+      }
+    })
+
+    return {
+      pendingCount: sslHosts.length - withCerts,
+      totalSSLHosts: sslHosts.length,
+      hostsWithCerts: withCerts,
+    }
+  }, [hosts, certifiedDomains])
+
+  const hasProvisioning = pendingCount > 0
+  const progressPercent = totalSSLHosts > 0
+    ? Math.round((hostsWithCerts / totalSSLHosts) * 100)
+    : 100
+
+  if (isLoading) {
+    return (
+      <Card>
+        <CardHeader className="pb-2">
+          <div className="flex items-center gap-2">
+            <Skeleton className="h-5 w-5 rounded" />
+            <Skeleton className="h-4 w-28" />
+          </div>
+        </CardHeader>
+        <CardContent className="space-y-3">
+          <Skeleton className="h-8 w-16" />
+          <div className="flex gap-2">
+            <Skeleton className="h-5 w-16 rounded-md" />
+            <Skeleton className="h-5 w-20 rounded-md" />
+          </div>
+        </CardContent>
+      </Card>
+    )
+  }
+
+  return (
+    <Link to="/certificates" className="block group">
+      <Card variant="interactive" className="h-full">
+        <CardHeader className="pb-2">
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-2">
+              <div className="rounded-lg bg-brand-500/10 p-2 text-brand-500">
+                <FileKey className="h-5 w-5" />
+              </div>
+              <span className="text-sm font-medium text-content-secondary">SSL Certificates</span>
+            </div>
+            {hasProvisioning && (
+              <Badge variant="primary" size="sm" className="animate-pulse">
+                Provisioning
+              </Badge>
+            )}
+          </div>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div className="text-3xl font-bold text-content-primary tabular-nums">
+            {certificates.length}
+          </div>
+
+          {/* Status breakdown */}
+          <div className="flex flex-wrap gap-2">
+            {validCount > 0 && (
+              <Badge variant="success" size="sm">
+                {validCount} valid
+              </Badge>
+            )}
+            {expiringCount > 0 && (
+              <Badge variant="warning" size="sm">
+                {expiringCount} expiring
+              </Badge>
+            )}
+            {untrustedCount > 0 && (
+              <Badge variant="outline" size="sm">
+                {untrustedCount} staging
+              </Badge>
+            )}
+            {certificates.length === 0 && (
+              <Badge variant="outline" size="sm">
+                No certificates
+              </Badge>
+            )}
+          </div>
+
+          {/* Pending indicator */}
+          {hasProvisioning && (
+            <div className="pt-3 border-t border-border space-y-2">
+              <div className="flex items-center gap-2 text-brand-400 text-sm">
+                <Loader2 className="h-4 w-4 animate-spin" />
+                <span>{pendingCount} host{pendingCount !== 1 ? 's' : ''} awaiting certificate</span>
+              </div>
+              <Progress value={progressPercent} variant="default" />
+              <div className="text-xs text-content-muted">{progressPercent}% provisioned</div>
+            </div>
+          )}
+        </CardContent>
+      </Card>
+    </Link>
+  )
+}