@skyhook-io/k8s-ui 1.0.0

package/src/components/resources/renderers/CNPGClusterRenderer.tsx

@@ -0,0 +1,194 @@
+import { Database, HardDrive, Activity, Clock, Shield } from 'lucide-react'
+import { Section, PropertyList, Property, ConditionsSection, AlertBanner, ResourceLink } from '../../ui/drawer-components'
+import {
+  getCNPGClusterInstances,
+  getCNPGClusterPrimary,
+  getCNPGClusterPhase,
+  getCNPGClusterImage,
+  getCNPGClusterStorage,
+  getCNPGClusterStorageClass,
+  getCNPGClusterWALStorage,
+  getCNPGClusterBootstrapMethod,
+  getCNPGClusterUpdateStrategy,
+  getCNPGClusterBackupConfig,
+  getCNPGClusterMonitoring,
+  getCNPGClusterIsReplica,
+  getCNPGClusterReplicaSource,
+  getCNPGClusterInstanceNames,
+  getCNPGClusterPostgresParams,
+} from '../resource-utils-cnpg'
+
+interface CNPGClusterRendererProps {
+  data: any
+  onNavigate?: (ref: { kind: string; namespace: string; name: string }) => void
+}
+
+export function CNPGClusterRenderer({ data, onNavigate }: CNPGClusterRendererProps) {
+  const conditions = data.status?.conditions || []
+  const instances = data.spec?.instances ?? 0
+  const readyInstances = data.status?.readyInstances ?? 0
+  const phase = getCNPGClusterPhase(data)
+  const backupConfig = getCNPGClusterBackupConfig(data)
+  const monitoring = getCNPGClusterMonitoring(data)
+  const isReplica = getCNPGClusterIsReplica(data)
+  const walStorage = getCNPGClusterWALStorage(data)
+  const postgresParams = getCNPGClusterPostgresParams(data)
+  const instanceNames = getCNPGClusterInstanceNames(data)
+  const bootstrapMethod = getCNPGClusterBootstrapMethod(data)
+
+  // Problem detection
+  const isDegraded = instances > 0 && readyInstances < instances
+  const isFailover = phase.toLowerCase().includes('failing over')
+  const isSwitchover = phase.toLowerCase().includes('switchover')
+
+  return (
+    <>
+      {/* Problem alerts */}
+      {isDegraded && (
+        <AlertBanner
+          variant="warning"
+          title="Degraded Cluster"
+          message={`Only ${readyInstances} of ${instances} instances are ready.`}
+        />
+      )}
+      {isFailover && (
+        <AlertBanner
+          variant="error"
+          title="Failover in Progress"
+          message={`Cluster is performing a failover. Current phase: ${phase}`}
+        />
+      )}
+      {isSwitchover && (
+        <AlertBanner
+          variant="warning"
+          title="Switchover in Progress"
+          message={`Cluster is performing a switchover. Current phase: ${phase}`}
+        />
+      )}
+
+      {/* Cluster Overview */}
+      <Section title="Cluster Overview" icon={Database} defaultExpanded>
+        <PropertyList>
+          <Property label="Phase" value={phase} />
+          <Property label="Instances" value={getCNPGClusterInstances(data)} />
+          <Property label="Current Primary" value={getCNPGClusterPrimary(data)} />
+          <Property label="Image" value={getCNPGClusterImage(data)} />
+          <Property label="Update Strategy" value={getCNPGClusterUpdateStrategy(data)} />
+        </PropertyList>
+        {instanceNames.length > 0 && (
+          <div className="mt-2 pt-2 border-t border-theme-border">
+            <div className="text-xs font-medium text-theme-text-secondary uppercase tracking-wider mb-1">Instance Nodes</div>
+            <div className="flex flex-wrap gap-1">
+              {instanceNames.map((name: string) => (
+                <span
+                  key={name}
+                  className="px-1.5 py-0.5 bg-theme-hover rounded text-xs text-theme-text-secondary font-mono"
+                >
+                  {name}
+                </span>
+              ))}
+            </div>
+          </div>
+        )}
+      </Section>
+
+      {/* Storage */}
+      <Section title="Storage" icon={HardDrive} defaultExpanded>
+        <PropertyList>
+          <Property label="Data Size" value={getCNPGClusterStorage(data)} />
+          <Property label="Storage Class" value={getCNPGClusterStorageClass(data)} />
+        </PropertyList>
+        {walStorage && (
+          <div className="mt-2 pt-2 border-t border-theme-border">
+            <div className="text-xs font-medium text-theme-text-secondary uppercase tracking-wider mb-1">WAL Storage</div>
+            <PropertyList>
+              {walStorage.size && <Property label="Size" value={walStorage.size} />}
+              {walStorage.storageClass && <Property label="Storage Class" value={walStorage.storageClass} />}
+            </PropertyList>
+          </div>
+        )}
+      </Section>
+
+      {/* Bootstrap - only show if method is interesting */}
+      {bootstrapMethod !== '-' && bootstrapMethod !== 'initdb' && (
+        <Section title="Bootstrap" icon={Activity} defaultExpanded>
+          <PropertyList>
+            <Property label="Method" value={bootstrapMethod} />
+          </PropertyList>
+        </Section>
+      )}
+
+      {/* Backup */}
+      {backupConfig.configured && (
+        <Section title="Backup" icon={Clock} defaultExpanded>
+          <PropertyList>
+            {backupConfig.destinationPath && (
+              <Property label="Destination" value={backupConfig.destinationPath} />
+            )}
+            {backupConfig.retentionPolicy && (
+              <Property label="Retention" value={backupConfig.retentionPolicy} />
+            )}
+            {backupConfig.lastSuccessfulBackup && (
+              <Property label="Last Successful" value={backupConfig.lastSuccessfulBackup} />
+            )}
+            {backupConfig.firstRecoverabilityPoint && (
+              <Property label="First Recoverability" value={backupConfig.firstRecoverabilityPoint} />
+            )}
+          </PropertyList>
+        </Section>
+      )}
+
+      {/* Monitoring */}
+      {(monitoring.podMonitorEnabled || (monitoring.customQueriesConfigMap && monitoring.customQueriesConfigMap.length > 0)) && (
+        <Section title="Monitoring" icon={Activity} defaultExpanded>
+          <PropertyList>
+            <Property label="Pod Monitor" value={monitoring.podMonitorEnabled ? 'Enabled' : 'Disabled'} />
+          </PropertyList>
+          {monitoring.customQueriesConfigMap && monitoring.customQueriesConfigMap.length > 0 && (
+            <div className="mt-2 pt-2 border-t border-theme-border">
+              <div className="text-xs font-medium text-theme-text-secondary uppercase tracking-wider mb-1">Custom Queries</div>
+              <div className="flex flex-wrap gap-1">
+                {monitoring.customQueriesConfigMap.map((name: string) => (
+                  <ResourceLink
+                    key={name}
+                    name={name}
+                    kind="configmaps"
+                    namespace={data.metadata?.namespace || ''}
+                    onNavigate={onNavigate}
+                  />
+                ))}
+              </div>
+            </div>
+          )}
+        </Section>
+      )}
+
+      {/* Replication - only if this is a replica cluster */}
+      {isReplica && (
+        <Section title="Replication" icon={Shield} defaultExpanded>
+          <PropertyList>
+            <Property label="Role" value="Replica" />
+            <Property label="Source" value={getCNPGClusterReplicaSource(data)} />
+          </PropertyList>
+        </Section>
+      )}
+
+      {/* PostgreSQL Parameters */}
+      {Object.keys(postgresParams).length > 0 && (
+        <Section title="PostgreSQL Parameters" defaultExpanded={false}>
+          <div className="space-y-0.5">
+            {Object.entries(postgresParams).map(([key, value]) => (
+              <div key={key} className="flex items-center gap-2 text-xs">
+                <span className="text-theme-text-secondary font-mono shrink-0">{key}</span>
+                <span className="text-theme-text-tertiary">=</span>
+                <span className="text-theme-text-primary font-mono break-all">{value}</span>
+              </div>
+            ))}
+          </div>
+        </Section>
+      )}
+
+      <ConditionsSection conditions={conditions} />
+    </>
+  )
+}

package/src/components/resources/renderers/CNPGPoolerRenderer.tsx

@@ -0,0 +1,79 @@
+import { Users, Database } from 'lucide-react'
+import { Section, PropertyList, Property, AlertBanner, ResourceLink } from '../../ui/drawer-components'
+import {
+  getCNPGPoolerCluster,
+  getCNPGPoolerType,
+  getCNPGPoolerMode,
+  getCNPGPoolerInstances,
+  getCNPGPoolerParameters,
+} from '../resource-utils-cnpg'
+
+interface CNPGPoolerRendererProps {
+  data: any
+  onNavigate?: (ref: { kind: string; namespace: string; name: string }) => void
+}
+
+export function CNPGPoolerRenderer({ data, onNavigate }: CNPGPoolerRendererProps) {
+  const desired = data.spec?.instances ?? 0
+  const ready = data.status?.instances ?? 0
+  const isDegraded = desired > 0 && ready < desired
+  const clusterName = getCNPGPoolerCluster(data)
+  const parameters = getCNPGPoolerParameters(data)
+
+  return (
+    <>
+      {/* Problem alerts */}
+      {isDegraded && (
+        <AlertBanner
+          variant="warning"
+          title="Pooler Degraded"
+          message={`Only ${ready} of ${desired} pooler instances are ready.`}
+        />
+      )}
+
+      {/* Pooler Configuration */}
+      <Section title="Pooler Configuration" icon={Users} defaultExpanded>
+        <PropertyList>
+          <Property label="Type" value={getCNPGPoolerType(data)} />
+          <Property label="Pool Mode" value={getCNPGPoolerMode(data)} />
+          <Property label="Instances" value={getCNPGPoolerInstances(data)} />
+        </PropertyList>
+      </Section>
+
+      {/* Cluster Reference */}
+      <Section title="Cluster" icon={Database} defaultExpanded>
+        <PropertyList>
+          <Property label="Cluster" value={(() => {
+            if (clusterName && clusterName !== '-') {
+              return (
+                <ResourceLink
+                  name={clusterName}
+                  kind="clusters"
+                  namespace={data.metadata?.namespace || ''}
+                  group="postgresql.cnpg.io"
+                  onNavigate={onNavigate}
+                />
+              )
+            }
+            return clusterName
+          })()} />
+        </PropertyList>
+      </Section>
+
+      {/* PgBouncer Parameters */}
+      {Object.keys(parameters).length > 0 && (
+        <Section title="PgBouncer Parameters" defaultExpanded>
+          <div className="space-y-0.5">
+            {Object.entries(parameters).map(([key, value]) => (
+              <div key={key} className="flex items-center gap-2 text-xs">
+                <span className="text-theme-text-secondary font-mono shrink-0">{key}</span>
+                <span className="text-theme-text-tertiary">=</span>
+                <span className="text-theme-text-primary font-mono break-all">{value}</span>
+              </div>
+            ))}
+          </div>
+        </Section>
+      )}
+    </>
+  )
+}

package/src/components/resources/renderers/CNPGScheduledBackupRenderer.tsx

@@ -0,0 +1,68 @@
+import { Clock, Database } from 'lucide-react'
+import { Section, PropertyList, Property, AlertBanner, ResourceLink } from '../../ui/drawer-components'
+import {
+  getCNPGScheduledBackupCluster,
+  getCNPGScheduleCron,
+  getCNPGScheduledBackupMethod,
+  getCNPGScheduledBackupLastSchedule,
+  getCNPGScheduledBackupNextSchedule,
+  getCNPGScheduledBackupIsSuspended,
+  getCNPGScheduledBackupIsImmediate,
+  getCNPGScheduledBackupOwnerRef,
+} from '../resource-utils-cnpg'
+
+interface CNPGScheduledBackupRendererProps {
+  data: any
+  onNavigate?: (ref: { kind: string; namespace: string; name: string }) => void
+}
+
+export function CNPGScheduledBackupRenderer({ data, onNavigate }: CNPGScheduledBackupRendererProps) {
+  const isSuspended = getCNPGScheduledBackupIsSuspended(data)
+  const clusterName = getCNPGScheduledBackupCluster(data)
+
+  return (
+    <>
+      {/* Suspended alert */}
+      {isSuspended && (
+        <AlertBanner
+          variant="warning"
+          title="Schedule Suspended"
+          message="This scheduled backup is currently suspended. No new backups will be created."
+        />
+      )}
+
+      {/* Schedule */}
+      <Section title="Schedule" icon={Clock} defaultExpanded>
+        <PropertyList>
+          <Property label="Cron Expression" value={getCNPGScheduleCron(data)} />
+          <Property label="Last Schedule" value={getCNPGScheduledBackupLastSchedule(data)} />
+          <Property label="Next Schedule" value={getCNPGScheduledBackupNextSchedule(data)} />
+          <Property label="Suspended" value={isSuspended ? 'Yes' : 'No'} />
+          <Property label="Immediate" value={getCNPGScheduledBackupIsImmediate(data) ? 'Yes' : 'No'} />
+        </PropertyList>
+      </Section>
+
+      {/* Backup Configuration */}
+      <Section title="Backup Configuration" icon={Database} defaultExpanded>
+        <PropertyList>
+          <Property label="Cluster" value={(() => {
+            if (clusterName && clusterName !== '-') {
+              return (
+                <ResourceLink
+                  name={clusterName}
+                  kind="clusters"
+                  namespace={data.metadata?.namespace || ''}
+                  group="postgresql.cnpg.io"
+                  onNavigate={onNavigate}
+                />
+              )
+            }
+            return clusterName
+          })()} />
+          <Property label="Method" value={getCNPGScheduledBackupMethod(data)} />
+          <Property label="Owner Reference" value={getCNPGScheduledBackupOwnerRef(data)} />
+        </PropertyList>
+      </Section>
+    </>
+  )
+}

package/src/components/resources/renderers/CertificateRenderer.tsx

@@ -0,0 +1,209 @@
+import { Shield, Clock, Globe } from 'lucide-react'
+import { clsx } from 'clsx'
+import { Section, PropertyList, Property, ConditionsSection, AlertBanner } from '../../ui/drawer-components'
+
+interface CertificateRendererProps {
+  data: any
+}
+
+function formatDate(dateStr: string): string {
+  if (!dateStr) return '-'
+  const d = new Date(dateStr)
+  return d.toLocaleDateString(undefined, { year: 'numeric', month: 'short', day: 'numeric' })
+}
+
+function getDaysUntil(dateStr: string): number {
+  const target = new Date(dateStr).getTime()
+  const now = Date.now()
+  return Math.floor((target - now) / (1000 * 60 * 60 * 24))
+}
+
+export function CertificateRenderer({ data }: CertificateRendererProps) {
+  const spec = data.spec || {}
+  const status = data.status || {}
+  const conditions = status.conditions || []
+  const dnsNames = spec.dnsNames || []
+  const issuerRef = spec.issuerRef || {}
+  const usages = spec.usages || []
+
+  const readyCond = conditions.find((c: any) => c.type === 'Ready')
+  const isReady = readyCond?.status === 'True'
+  const isNotReady = readyCond?.status === 'False'
+
+  const notAfter = status.notAfter
+  const notBefore = status.notBefore
+  const renewalTime = status.renewalTime
+
+  const daysUntilExpiry = notAfter ? getDaysUntil(notAfter) : null
+  const isExpired = daysUntilExpiry !== null && daysUntilExpiry < 0
+  const expiresWithin7Days = daysUntilExpiry !== null && !isExpired && daysUntilExpiry <= 7
+  const expiresWithin30Days = daysUntilExpiry !== null && !isExpired && !expiresWithin7Days && daysUntilExpiry <= 30
+
+  // Progress bar calculation
+  let progressPct = 0
+  let progressColor = 'bg-green-500'
+  if (notBefore && notAfter) {
+    const now = Date.now()
+    const start = new Date(notBefore).getTime()
+    const end = new Date(notAfter).getTime()
+    progressPct = Math.min(100, Math.max(0, ((now - start) / (end - start)) * 100))
+    if (progressPct >= 90) {
+      progressColor = 'bg-red-500'
+    } else if (progressPct >= 70) {
+      progressColor = 'bg-yellow-500'
+    }
+  }
+
+  // Expiry remaining text color
+  const expiryTextColor = isExpired || expiresWithin7Days
+    ? 'text-red-400'
+    : expiresWithin30Days
+      ? 'text-yellow-400'
+      : 'text-green-400'
+
+  return (
+    <>
+      {/* Problem detection alerts */}
+      {isNotReady && (
+        <AlertBanner
+          variant="error"
+          title="Certificate Not Ready"
+          message={<>{readyCond.reason && <span className="font-medium">{readyCond.reason}: </span>}{readyCond.message || 'The certificate is not in a ready state.'}</>}
+        />
+      )}
+
+      {isExpired && (
+        <AlertBanner
+          variant="error"
+          title="Certificate has expired"
+          message={`Expired ${formatDate(notAfter)}. Renewal may be pending or failing.`}
+        />
+      )}
+
+      {expiresWithin7Days && (
+        <AlertBanner
+          variant="error"
+          title={`Certificate expires in ${daysUntilExpiry} day${daysUntilExpiry !== 1 ? 's' : ''}`}
+          message="Check that cert-manager is renewing this certificate."
+        />
+      )}
+
+      {expiresWithin30Days && (
+        <AlertBanner
+          variant="warning"
+          title={`Certificate expires in ${daysUntilExpiry} day${daysUntilExpiry !== 1 ? 's' : ''}`}
+          message="Renewal should happen automatically before expiry."
+        />
+      )}
+
+      {/* Certificate Info */}
+      <Section title="Certificate Info" icon={Shield}>
+        <PropertyList>
+          <Property
+            label="Status"
+            value={
+              <span className={clsx(
+                'px-2 py-0.5 rounded text-xs font-medium',
+                isReady
+                  ? 'bg-green-500/20 text-green-400'
+                  : 'bg-red-500/20 text-red-400'
+              )}>
+                {isReady ? 'Ready' : 'Not Ready'}
+              </span>
+            }
+          />
+          <Property label="Secret Name" value={spec.secretName} />
+          <Property label="Revision" value={status.revision} />
+        </PropertyList>
+      </Section>
+
+      {/* Validity */}
+      <Section title="Validity" icon={Clock}>
+        <PropertyList>
+          <Property label="Not Before" value={notBefore ? formatDate(notBefore) : '-'} />
+          <Property
+            label="Not After"
+            value={
+              notAfter ? (
+                <span>
+                  {formatDate(notAfter)}
+                  {daysUntilExpiry !== null && (
+                    <span className={clsx('ml-2 text-xs', expiryTextColor)}>
+                      {isExpired
+                        ? `(expired ${-daysUntilExpiry}d ago)`
+                        : `(${daysUntilExpiry}d remaining)`}
+                    </span>
+                  )}
+                </span>
+              ) : '-'
+            }
+          />
+          <Property label="Renewal Time" value={renewalTime ? formatDate(renewalTime) : '-'} />
+        </PropertyList>
+
+        {/* Progress bar */}
+        {notBefore && notAfter && (
+          <div className="mt-3">
+            <div className="flex items-center justify-between text-xs text-theme-text-tertiary mb-1">
+              <span>{formatDate(notBefore)}</span>
+              <span>{formatDate(notAfter)}</span>
+            </div>
+            <div className="h-2 bg-theme-hover rounded overflow-hidden">
+              <div
+                className={clsx('h-full transition-all', progressColor)}
+                style={{ width: `${progressPct}%` }}
+              />
+            </div>
+            <div className="text-xs text-theme-text-tertiary mt-1 text-center">
+              {Math.round(progressPct)}% elapsed
+            </div>
+          </div>
+        )}
+      </Section>
+
+      {/* Domains */}
+      {dnsNames.length > 0 && (
+        <Section title="Domains" icon={Globe}>
+          <div className="flex flex-wrap gap-1">
+            {dnsNames.map((name: string) => (
+              <span
+                key={name}
+                className="px-2 py-0.5 bg-theme-elevated rounded text-xs text-theme-text-secondary"
+              >
+                {name}
+              </span>
+            ))}
+          </div>
+        </Section>
+      )}
+
+      {/* Issuer */}
+      <Section title="Issuer">
+        <PropertyList>
+          <Property label="Kind" value={issuerRef.kind} />
+          <Property label="Name" value={issuerRef.name} />
+          <Property label="Group" value={issuerRef.group} />
+        </PropertyList>
+      </Section>
+
+      {/* Usages */}
+      {usages.length > 0 && (
+        <Section title="Usages">
+          <div className="flex flex-wrap gap-1">
+            {usages.map((usage: string) => (
+              <span
+                key={usage}
+                className="px-2 py-0.5 bg-theme-elevated rounded text-xs text-theme-text-secondary"
+              >
+                {usage}
+              </span>
+            ))}
+          </div>
+        </Section>
+      )}
+
+      {/* Conditions */}
+      <ConditionsSection conditions={conditions} />
+    </>
+  )
+}

package/src/components/resources/renderers/CertificateRequestRenderer.tsx

@@ -0,0 +1,123 @@
+import { Shield, FileText, Info } from 'lucide-react'
+import { clsx } from 'clsx'
+import { Section, PropertyList, Property, ConditionsSection, AlertBanner } from '../../ui/drawer-components'
+
+interface CertificateRequestRendererProps {
+  data: any
+}
+
+export function CertificateRequestRenderer({ data }: CertificateRequestRendererProps) {
+  const spec = data.spec || {}
+  const status = data.status || {}
+  const conditions = status.conditions || []
+  const issuerRef = spec.issuerRef || {}
+  const usages = spec.usages || []
+  const ownerRefs = data.metadata?.ownerReferences || []
+
+  const readyCond = conditions.find((c: any) => c.type === 'Ready')
+  const approvedCond = conditions.find((c: any) => c.type === 'Approved')
+  const deniedCond = conditions.find((c: any) => c.type === 'Denied')
+
+  const isReady = readyCond?.status === 'True'
+  const isNotReady = readyCond?.status === 'False'
+  const isApproved = approvedCond?.status === 'True'
+  const isDenied = deniedCond?.status === 'True'
+
+  const ownerCertificate = ownerRefs.find((ref: any) => ref.kind === 'Certificate')
+
+  return (
+    <>
+      {/* Problem detection alerts */}
+      {isNotReady && (
+        <AlertBanner
+          variant="error"
+          title="Certificate Request Not Ready"
+          message={<>{readyCond.reason && <span className="font-medium">{readyCond.reason}: </span>}{readyCond.message || 'The certificate request is not in a ready state.'}</>}
+        />
+      )}
+
+      {isDenied && (
+        <AlertBanner
+          variant="error"
+          title="Certificate request was denied"
+          message={<>{deniedCond.reason && <span className="font-medium">{deniedCond.reason}: </span>}{deniedCond.message || 'The certificate request has been denied by the approver.'}</>}
+        />
+      )}
+
+      {/* Status */}
+      <Section title="Status" icon={Shield}>
+        <PropertyList>
+          <Property
+            label="Ready"
+            value={
+              <span className={clsx(
+                'px-2 py-0.5 rounded text-xs font-medium',
+                isReady
+                  ? 'bg-green-500/20 text-green-400'
+                  : 'bg-red-500/20 text-red-400'
+              )}>
+                {isReady ? 'Ready' : 'Not Ready'}
+              </span>
+            }
+          />
+          <Property
+            label="Approved"
+            value={
+              <span className={clsx(
+                'px-2 py-0.5 rounded text-xs font-medium',
+                isApproved
+                  ? 'bg-green-500/20 text-green-400'
+                  : isDenied
+                    ? 'bg-red-500/20 text-red-400'
+                    : 'bg-yellow-500/20 text-yellow-400'
+              )}>
+                {isApproved ? 'Yes' : isDenied ? 'No' : 'Pending'}
+              </span>
+            }
+          />
+          <Property label="Reason" value={readyCond?.reason} />
+          {ownerCertificate && (
+            <Property label="Owner Certificate" value={ownerCertificate.name} />
+          )}
+        </PropertyList>
+      </Section>
+
+      {/* Issuer */}
+      <Section title="Issuer" icon={Info}>
+        <PropertyList>
+          <Property label="Kind" value={issuerRef.kind} />
+          <Property label="Name" value={issuerRef.name} />
+          <Property label="Group" value={issuerRef.group} />
+        </PropertyList>
+      </Section>
+
+      {/* Request Details */}
+      <Section title="Request Details" icon={FileText}>
+        <PropertyList>
+          <Property label="Duration" value={spec.duration} />
+          {usages.length > 0 && (
+            <Property
+              label="Usages"
+              value={
+                <div className="flex flex-wrap gap-1">
+                  {usages.map((usage: string) => (
+                    <span
+                      key={usage}
+                      className="px-2 py-0.5 bg-theme-elevated rounded text-xs text-theme-text-secondary"
+                    >
+                      {usage}
+                    </span>
+                  ))}
+                </div>
+              }
+            />
+          )}
+          <Property label="Has Certificate" value={status.certificate ? 'Yes' : 'No'} />
+        </PropertyList>
+      </Section>
+
+      {/* Conditions */}
+      <ConditionsSection conditions={conditions} />
+    </>
+  )
+}