feat: enhance import handling with overwrite support and detailed conflict resolution

feat: add subroute handler extraction for improved Caddyfile parsing
test: add tests for subroute handler extraction functionality
fix: update UI to display staging certificate status and improve dashboard metrics
docs: clarify staging certificate deletion process in ACME documentation

frontend/src/pages/Certificates.tsx

@@ -53,7 +53,7 @@ export default function Certificates() {
       </div>
 
       <div className="mb-4 bg-blue-900/20 border border-blue-500/30 text-blue-300 px-4 py-3 rounded-lg text-sm">
-        <strong>Note:</strong> You can delete custom certificates and staging certificates. 
+        <strong>Note:</strong> You can delete custom certificates and staging certificates.
         Production Let's Encrypt certificates are automatically renewed and should not be deleted unless switching environments.
       </div>
 

frontend/src/pages/Dashboard.tsx

@@ -1,12 +1,14 @@
 import { useEffect, useState } from 'react'
 import { useProxyHosts } from '../hooks/useProxyHosts'
 import { useRemoteServers } from '../hooks/useRemoteServers'
+import { useCertificates } from '../hooks/useCertificates'
 import { checkHealth } from '../api/health'
 import { Link } from 'react-router-dom'
 
 export default function Dashboard() {
   const { hosts } = useProxyHosts()
   const { servers } = useRemoteServers()
+  const { certificates } = useCertificates()
   const [health, setHealth] = useState<{ status: string } | null>(null)
 
   useEffect(() => {
@@ -41,11 +43,11 @@ export default function Dashboard() {
           <div className="text-xs text-gray-500">{enabledServers} enabled</div>
         </Link>
 
-        <div className="bg-dark-card p-6 rounded-lg border border-gray-800">
+        <Link to="/certificates" className="bg-dark-card p-6 rounded-lg border border-gray-800 hover:border-gray-700 transition-colors">
           <div className="text-sm text-gray-400 mb-2">SSL Certificates</div>
-          <div className="text-3xl font-bold text-white mb-1">0</div>
-          <div className="text-xs text-gray-500">Coming soon</div>
-        </div>
+          <div className="text-3xl font-bold text-white mb-1">{certificates.length}</div>
+          <div className="text-xs text-gray-500">{certificates.filter(c => c.status === 'valid').length} valid</div>
+        </Link>
 
         <div className="bg-dark-card p-6 rounded-lg border border-gray-800">
           <div className="text-sm text-gray-400 mb-2">System Status</div>