proxy-manager/web/CertificatesPanel.tsx

import { useCallback, useEffect, useRef, useState } from "react";
import { RefreshCw, ShieldAlert, ShieldCheck } from "lucide-react";
import { useClient } from "hooks/useClient";

/**
 * Certificates, ordered by how soon they expire.
 *
 * That ordering is the whole design. A certificate list sorted by name is a reference; sorted by expiry
 * it answers the only question anybody has, which is whether something is about to break. The server
 * computes `daysUntilExpiry` so the browser is not parsing dates and getting the timezone wrong.
 */

type Certificate = {
  id: number;
  provider: string;
  nice_name: string;
  domain_names: string[];
  expires_on: string | null;
  daysUntilExpiry: number | null;
};

/** Let's Encrypt renews at 30 days, so inside 14 something has actually gone wrong. */
const WARN_DAYS = 30;
const URGENT_DAYS = 14;

export const CertificatesPanel = () => {
  const client = useClient();
  const clientRef = useRef(client);
  clientRef.current = client;

  const [certificates, setCertificates] = useState<Certificate[] | null>(null);
  const [error, setError] = useState<string | null>(null);

  const load = useCallback(async () => {
    try {
      setCertificates(await clientRef.current.get<Certificate[]>("/proxy-manager/certificates"));
      setError(null);
    } catch (caught) {
      const body = (caught as { body?: { error?: string } })?.body;
      setError(body?.error ?? "Could not load certificates.");
      setCertificates(null);
    }
  }, []);

  useEffect(() => {
    void load();
  }, [load]);

  if (error) return <Centred>{error}</Centred>;
  if (!certificates) return <Centred>Loading certificates…</Centred>;
  if (certificates.length === 0) return <Centred>No certificates.</Centred>;

  const expiring = certificates.filter((c) => c.daysUntilExpiry !== null && c.daysUntilExpiry < WARN_DAYS).length;

  return (
    <div className="flex size-full flex-col">
      <header className="flex items-center justify-between border-b px-3 py-2">
        <span className="text-sm font-medium">
          {certificates.length} certificate{certificates.length === 1 ? "" : "s"}
          {expiring > 0 ? <span className="ml-2 text-xs text-amber-500">{expiring} expiring</span> : null}
        </span>
        <button type="button" onClick={() => void load()} className="text-muted-foreground hover:text-foreground">
          <RefreshCw className="size-4" />
        </button>
      </header>

      <ul className="flex-1 overflow-auto">
        {certificates.map((certificate) => {
          const days = certificate.daysUntilExpiry;
          const urgent = days !== null && days < URGENT_DAYS;
          const warn = days !== null && days < WARN_DAYS;
          return (
            <li key={certificate.id} className="flex items-center gap-2 border-b px-3 py-2">
              {warn ? (
                <ShieldAlert className={`size-4 shrink-0 ${urgent ? "text-destructive" : "text-amber-500"}`} />
              ) : (
                <ShieldCheck className="size-4 shrink-0 text-emerald-500" />
              )}
              <span className="min-w-0 flex-1">
                <span className="block truncate text-sm">{certificate.nice_name}</span>
                <span className="block truncate text-xs text-muted-foreground">
                  {certificate.domain_names.join(", ")}
                </span>
              </span>
              <span className={`shrink-0 text-xs ${urgent ? "text-destructive" : warn ? "text-amber-500" : "text-muted-foreground"}`}>
                {days === null ? certificate.provider : days < 0 ? `expired ${-days}d ago` : `${days}d`}
              </span>
            </li>
          );
        })}
      </ul>
    </div>
  );
};

const Centred = ({ children }: { children: React.ReactNode }) => (
  <div className="flex size-full items-center justify-center p-6 text-center text-sm text-muted-foreground">
    {children}
  </div>
);