added progress bar and scheduler

frontend/src/App.jsx

@@ -1,7 +1,8 @@
 import { useEffect, useMemo, useState } from 'react';
-import { AlertTriangle, DatabaseBackup, RefreshCw, Settings as SettingsIcon } from 'lucide-react';
+import { AlertTriangle, CalendarClock, DatabaseBackup, RefreshCw, Settings as SettingsIcon } from 'lucide-react';
 import { api, errorMessage } from './api.js';
 import { Dashboard } from './components/Dashboard.jsx';
+import { Scheduler } from './components/Scheduler.jsx';
 import { Settings } from './components/Settings.jsx';
 import { VMDetail } from './components/VMDetail.jsx';
 
@@ -9,6 +10,7 @@ export default function App() {
   const [health, setHealth] = useState(null);
   const [vms, setVms] = useState([]);
   const [jobs, setJobs] = useState([]);
+  const [schedules, setSchedules] = useState([]);
   const [selectedVm, setSelectedVm] = useState(null);
   const [view, setView] = useState('dashboard');
   const [error, setError] = useState('');
@@ -17,10 +19,11 @@ export default function App() {
   async function refresh() {
     setError('');
     try {
-      const [healthResult, vmsResult, jobsResult] = await Promise.allSettled([
+      const [healthResult, vmsResult, jobsResult, schedulesResult] = await Promise.allSettled([
         api.get('/health'),
         api.get('/vms'),
         api.get('/jobs'),
+        api.get('/schedules'),
       ]);
 
       if (healthResult.status === 'fulfilled') {
@@ -31,8 +34,9 @@ export default function App() {
 
       if (vmsResult.status === 'fulfilled') setVms(vmsResult.value.data);
       if (jobsResult.status === 'fulfilled') setJobs(jobsResult.value.data);
+      if (schedulesResult.status === 'fulfilled') setSchedules(schedulesResult.value.data);
 
-      const firstFailure = [healthResult, vmsResult, jobsResult].find((result) => result.status === 'rejected');
+      const firstFailure = [healthResult, vmsResult, jobsResult, schedulesResult].find((result) => result.status === 'rejected');
       if (firstFailure) setError(errorMessage(firstFailure.reason));
     } catch (requestError) {
       setError(errorMessage(requestError));
@@ -73,6 +77,17 @@ export default function App() {
             </span>
           </button>
           <div className="flex items-center gap-2">
+            <button
+              className="inline-flex h-9 items-center gap-2 rounded-md border border-zinc-800 bg-zinc-900 px-3 text-sm text-zinc-200 hover:border-zinc-700"
+              onClick={() => {
+                setSelectedVm(null);
+                setView('scheduler');
+              }}
+              type="button"
+            >
+              <CalendarClock className="h-4 w-4" />
+              Scheduler
+            </button>
             <button
               className="inline-flex h-9 items-center gap-2 rounded-md border border-zinc-800 bg-zinc-900 px-3 text-sm text-zinc-200 hover:border-zinc-700"
               onClick={() => {
@@ -106,6 +121,8 @@ export default function App() {
       <div className="mx-auto max-w-7xl px-4 py-6 sm:px-6">
         {view === 'settings' ? (
           <Settings onChanged={refresh} />
+        ) : view === 'scheduler' ? (
+          <Scheduler onChanged={refresh} schedules={schedules} vms={vms} />
         ) : currentVm ? (
           <VMDetail vm={currentVm} jobs={jobs} onBack={() => setSelectedVm(null)} onChanged={refresh} />
         ) : (