Improve router provisioning workflow

src/app/routes.tsx

@@ -8,13 +8,9 @@ import {
 
 import { TopBar } from '@/components/layout/TopBar';
 import { MetricCard } from '@/components/dashboard/MetricCard';
-import { ProvisioningWorkflow } from '@/components/dashboard/ProvisioningWorkflow';
 import { IpPoolChart } from '@/components/dashboard/IpPoolChart';
 import { NetworkTrafficChart } from '@/components/dashboard/NetworkTrafficChart';
 
-import { VpnPeersTable } from '@/components/vpn/VpnPeersTable';
-import { IpManagementPanel } from '@/components/vpn/IpManagementPanel';
-
 import { ProvisioningWizard } from '@/components/provisioning/ProvisioningWizard';
 import { BackendSettings } from '@/components/settings/BackendSettings';
 import { ActivityLogs } from '@/components/activity/ActivityLogs';
@@ -40,8 +36,6 @@ export function DashboardRoute() {
   useEffect(() => {
     async function loadDashboard() {
       try {
-        setError('');
-
         const [
           healthResponse,
           usedIpsResponse,
@@ -52,7 +46,11 @@ export function DashboardRoute() {
 
         setHealth(healthResponse);
         setUsedIps(usedIpsResponse);
+        setError('');
       } catch (err) {
+        setHealth(null);
+        setUsedIps(null);
+
         setError(String(err));
       }
     }
@@ -84,15 +82,21 @@ export function DashboardRoute() {
     ).toFixed(2);
   }, [usedCount, ipPoolTotal]);
 
-  const vpnHealthy =
-    health?.wireGuardRunning ?? false;
-
   const backendHealthy =
-    health?.backend ?? !error;
+    health?.backend === true;
+
+  const vpnHealthy =
+    health?.wireGuardRunning === true;
+
+  const dashboardReady =
+    !error &&
+    Boolean(health) &&
+    backendHealthy &&
+    vpnHealthy;
 
   return (
     <div className="flex h-full flex-col overflow-hidden">
-      <TopBar />
+      <TopBar healthy={dashboardReady} />
 
       {error && (
         <div className="mb-3 rounded-xl border border-red-500/20 bg-red-500/10 p-3 text-sm text-red-300">
@@ -146,7 +150,7 @@ export function DashboardRoute() {
         />
       </div>
 
-      <div className="mt-4 grid flex-1 grid-cols-12 grid-rows-[minmax(0,1fr)_auto] gap-4 overflow-hidden">
+      <div className="mt-4 grid min-h-0 flex-1 grid-cols-12 gap-4 overflow-hidden pb-4">
         <div className="col-span-9 min-h-0">
           <NetworkTrafficChart />
         </div>
@@ -157,10 +161,6 @@ export function DashboardRoute() {
             total={ipPoolTotal}
           />
         </div>
-
-        <div className="col-span-12">
-          <ProvisioningWorkflow />
-        </div>
       </div>
     </div>
   );