feat(frontend): add Dashboard, Backups, and Settings pages

- Create Dashboard page with stats cards and recent activity feed
- Create Backups page with job listing table, create modal, and actions
- Create Settings page with tabs for General, Notifications, Security, Logs
- Update App.tsx to use new page components
- Add delete method to jobsApi in client.ts
- TypeScript compiles cleanly

frontend/src/App.tsx

@@ -1,6 +1,9 @@
 import { BrowserRouter, Routes, Route } from 'react-router-dom';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { Layout } from './components/Layout';
+import { Dashboard } from './pages/Dashboard';
+import { Backups } from './pages/Backups';
+import { Settings } from './pages/Settings';
 
 const queryClient = new QueryClient({
   defaultOptions: {
@@ -11,42 +14,15 @@ const queryClient = new QueryClient({
   },
 });
 
-function DashboardPage() {
-  return (
-    <div>
-      <h2 className="text-2xl font-bold text-gray-900 mb-4">Dashboard</h2>
-      <p className="text-gray-600">Welcome to the Backup Tool dashboard.</p>
-    </div>
-  );
-}
-
-function BackupsPage() {
-  return (
-    <div>
-      <h2 className="text-2xl font-bold text-gray-900 mb-4">Backups</h2>
-      <p className="text-gray-600">Manage your backup jobs here.</p>
-    </div>
-  );
-}
-
-function SettingsPage() {
-  return (
-    <div>
-      <h2 className="text-2xl font-bold text-gray-900 mb-4">Settings</h2>
-      <p className="text-gray-600">Configure your backup sources and preferences.</p>
-    </div>
-  );
-}
-
 function App() {
   return (
     <QueryClientProvider client={queryClient}>
       <BrowserRouter>
         <Layout>
           <Routes>
-            <Route path="/" element={<DashboardPage />} />
+            <Route path="/" element={<Dashboard />} />
-            <Route path="/backups" element={<BackupsPage />} />
+            <Route path="/backups" element={<Backups />} />
-            <Route path="/settings" element={<SettingsPage />} />
+            <Route path="/settings" element={<Settings />} />
           </Routes>
         </Layout>
       </BrowserRouter>

frontend/src/api/client.ts

@@ -51,6 +51,7 @@ export const jobsApi = {
   getById: (id: string) => apiClient.get<BackupJob>(`/jobs/${id}`),
   create: (sourceId: string) =>
     apiClient.post<BackupJob>('/jobs', { source_id: sourceId }),
+  delete: (id: string) => apiClient.delete(`/jobs/${id}`),
   getLogs: (id: string) => apiClient.get<string>(`/jobs/${id}/logs`),
 };
 

frontend/src/pages/Backups.tsx

@@ -0,0 +1,238 @@
+import { useState } from 'react';
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { Play, Trash2, Plus } from 'lucide-react';
+import { jobsApi, sourcesApi } from '../api/client';
+import type { BackupJob, BackupSource } from '../api/client';
+
+function StatusBadge({ status }: { status: string }) {
+  const styles = {
+    pending: 'bg-yellow-100 text-yellow-800',
+    running: 'bg-blue-100 text-blue-800',
+    completed: 'bg-green-100 text-green-800',
+    failed: 'bg-red-100 text-red-800',
+  };
+  return (
+    <span
+      className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${
+        styles[status as keyof typeof styles] || 'bg-gray-100 text-gray-800'
+      }`}
+    >
+      {status}
+    </span>
+  );
+}
+
+function CreateJobModal({
+  onClose,
+}: {
+  onClose: () => void;
+}) {
+  const queryClient = useQueryClient();
+  const [sourceId, setSourceId] = useState('');
+
+  const { data: sources } = useQuery({
+    queryKey: ['sources'],
+    queryFn: () => sourcesApi.getAll().then((res) => res.data),
+  });
+
+  const createMutation = useMutation({
+    mutationFn: (sid: string) => jobsApi.create(sid),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['jobs'] });
+      onClose();
+    },
+  });
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (sourceId) {
+      createMutation.mutate(sourceId);
+    }
+  };
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
+      <div className="bg-white rounded-lg shadow-xl w-full max-w-md mx-4">
+        <div className="px-6 py-4 border-b border-gray-200">
+          <h3 className="text-lg font-semibold text-gray-900">
+            Create Backup Job
+          </h3>
+        </div>
+        <form onSubmit={handleSubmit} className="p-6 space-y-4">
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-1">
+              Source
+            </label>
+            <select
+              value={sourceId}
+              onChange={(e) => setSourceId(e.target.value)}
+              className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+              required
+            >
+              <option value="">Select a source...</option>
+              {sources?.map((source: BackupSource) => (
+                <option key={source.id} value={source.id}>
+                  {source.name} ({source.type})
+                </option>
+              ))}
+            </select>
+          </div>
+          <div className="flex justify-end gap-3 pt-2">
+            <button
+              type="button"
+              onClick={onClose}
+              className="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50"
+            >
+              Cancel
+            </button>
+            <button
+              type="submit"
+              disabled={!sourceId || createMutation.isPending}
+              className="px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-lg hover:bg-blue-700 disabled:opacity-50"
+            >
+              {createMutation.isPending ? 'Creating...' : 'Create Job'}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}
+
+export function Backups() {
+  const [showModal, setShowModal] = useState(false);
+  const queryClient = useQueryClient();
+
+  const { data: jobs, isLoading } = useQuery({
+    queryKey: ['jobs'],
+    queryFn: () => jobsApi.getAll().then((res) => res.data),
+  });
+
+  const { data: sources } = useQuery({
+    queryKey: ['sources'],
+    queryFn: () => sourcesApi.getAll().then((res) => res.data),
+  });
+
+  const deleteMutation = useMutation({
+    mutationFn: (id: string) => jobsApi.delete(id),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['jobs'] });
+    },
+  });
+
+  const runMutation = useMutation({
+    mutationFn: (id: string) => jobsApi.create(id),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['jobs'] });
+    },
+  });
+
+  const getSourceName = (sourceId: string) => {
+    const source = sources?.find((s: BackupSource) => s.id === sourceId);
+    return source?.name || sourceId.slice(0, 8);
+  };
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center justify-between">
+        <h2 className="text-2xl font-bold text-gray-900">Backups</h2>
+        <button
+          onClick={() => setShowModal(true)}
+          className="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-lg hover:bg-blue-700"
+        >
+          <Plus className="w-4 h-4" />
+          New Job
+        </button>
+      </div>
+
+      <div className="bg-white rounded-lg border border-gray-200 overflow-hidden">
+        <table className="min-w-full divide-y divide-gray-200">
+          <thead className="bg-gray-50">
+            <tr>
+              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                Job ID
+              </th>
+              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                Source
+              </th>
+              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                Status
+              </th>
+              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                Started
+              </th>
+              <th className="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
+                Actions
+              </th>
+            </tr>
+          </thead>
+          <tbody className="bg-white divide-y divide-gray-200">
+            {isLoading && (
+              <tr>
+                <td
+                  colSpan={5}
+                  className="px-6 py-8 text-center text-gray-500"
+                >
+                  Loading...
+                </td>
+              </tr>
+            )}
+            {jobs?.length === 0 && !isLoading && (
+              <tr>
+                <td
+                  colSpan={5}
+                  className="px-6 py-8 text-center text-gray-500"
+                >
+                  No backup jobs yet. Create one to get started.
+                </td>
+              </tr>
+            )}
+            {jobs?.map((job: BackupJob) => (
+              <tr key={job.id} className="hover:bg-gray-50">
+                <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
+                  {job.id.slice(0, 8)}
+                </td>
+                <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-600">
+                  {getSourceName(job.source_id)}
+                </td>
+                <td className="px-6 py-4 whitespace-nowrap">
+                  <StatusBadge status={job.status} />
+                </td>
+                <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                  {job.started_at
+                    ? new Date(job.started_at).toLocaleString()
+                    : 'Not started'}
+                </td>
+                <td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
+                  <div className="flex items-center justify-end gap-2">
+                    <button
+                      onClick={() => runMutation.mutate(job.source_id)}
+                      disabled={job.status === 'running'}
+                      className="p-1 text-gray-600 hover:text-blue-600 disabled:opacity-50"
+                      title="Run job"
+                    >
+                      <Play className="w-4 h-4" />
+                    </button>
+                    <button
+                      onClick={() => {
+                        if (confirm('Delete this job?')) {
+                          deleteMutation.mutate(job.id);
+                        }
+                      }}
+                      className="p-1 text-gray-600 hover:text-red-600"
+                      title="Delete job"
+                    >
+                      <Trash2 className="w-4 h-4" />
+                    </button>
+                  </div>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+
+      {showModal && <CreateJobModal onClose={() => setShowModal(false)} />}
+    </div>
+  );
+}

frontend/src/pages/Dashboard.tsx

@@ -0,0 +1,141 @@
+import { useQuery } from '@tanstack/react-query';
+import { Activity, Archive, AlertTriangle, CheckCircle } from 'lucide-react';
+import { dashboardApi } from '../api/client';
+
+function StatCard({
+  title,
+  value,
+  icon: Icon,
+  color,
+}: {
+  title: string;
+  value: number;
+  icon: React.ElementType;
+  color: string;
+}) {
+  return (
+    <div className="bg-white rounded-lg border border-gray-200 p-6">
+      <div className="flex items-center justify-between">
+        <div>
+          <p className="text-sm font-medium text-gray-600">{title}</p>
+          <p className="mt-2 text-3xl font-bold text-gray-900">{value}</p>
+        </div>
+        <div className={`p-3 rounded-lg ${color}`}>
+          <Icon className="w-6 h-6 text-white" />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function StatusBadge({ status }: { status: string }) {
+  const styles = {
+    pending: 'bg-yellow-100 text-yellow-800',
+    running: 'bg-blue-100 text-blue-800',
+    completed: 'bg-green-100 text-green-800',
+    failed: 'bg-red-100 text-red-800',
+  };
+  return (
+    <span
+      className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${
+        styles[status as keyof typeof styles] || 'bg-gray-100 text-gray-800'
+      }`}
+    >
+      {status}
+    </span>
+  );
+}
+
+export function Dashboard() {
+  const { data: stats } = useQuery({
+    queryKey: ['dashboard-stats'],
+    queryFn: () => dashboardApi.getStats().then((res) => res.data),
+  });
+
+  const { data: recentJobs } = useQuery({
+    queryKey: ['recent-jobs'],
+    queryFn: () => dashboardApi.getRecentJobs(5).then((res) => res.data),
+  });
+
+  const activeJobs = stats?.pending_jobs || 0;
+  const recentFailures = stats?.failed_jobs || 0;
+
+  return (
+    <div className="space-y-6">
+      <h2 className="text-2xl font-bold text-gray-900">Dashboard</h2>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+        <StatCard
+          title="Active Jobs"
+          value={activeJobs}
+          icon={Activity}
+          color="bg-blue-500"
+        />
+        <StatCard
+          title="Total Backups"
+          value={stats?.total_jobs || 0}
+          icon={Archive}
+          color="bg-green-500"
+        />
+        <StatCard
+          title="Completed"
+          value={stats?.completed_jobs || 0}
+          icon={CheckCircle}
+          color="bg-indigo-500"
+        />
+        <StatCard
+          title="Recent Failures"
+          value={recentFailures}
+          icon={AlertTriangle}
+          color="bg-red-500"
+        />
+      </div>
+
+      <div className="bg-white rounded-lg border border-gray-200">
+        <div className="px-6 py-4 border-b border-gray-200">
+          <h3 className="text-lg font-semibold text-gray-900">
+            Recent Activity
+          </h3>
+        </div>
+        <div className="divide-y divide-gray-200">
+          {recentJobs?.length === 0 && (
+            <div className="px-6 py-8 text-center text-gray-500">
+              No recent activity
+            </div>
+          )}
+          {recentJobs?.map((job) => (
+            <div
+              key={job.id}
+              className="px-6 py-4 flex items-center justify-between"
+            >
+              <div className="flex items-center gap-3">
+                <div
+                  className={`w-2 h-2 rounded-full ${
+                    job.status === 'completed'
+                      ? 'bg-green-500'
+                      : job.status === 'failed'
+                      ? 'bg-red-500'
+                      : job.status === 'running'
+                      ? 'bg-blue-500'
+                      : 'bg-yellow-500'
+                  }`}
+                />
+                <div>
+                  <p className="text-sm font-medium text-gray-900">
+                    Job {job.id.slice(0, 8)}
+                  </p>
+                  <p className="text-xs text-gray-500">
+                    {job.created_at
+                      ? new Date(job.created_at).toLocaleString()
+                      : 'Unknown'}
+                  </p>
+                </div>
+              </div>
+              <StatusBadge status={job.status} />
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/src/pages/Settings.tsx

@@ -0,0 +1,205 @@
+import { useState } from 'react';
+
+const tabs = [
+  { id: 'general', label: 'General' },
+  { id: 'notifications', label: 'Notifications' },
+  { id: 'security', label: 'Security' },
+  { id: 'logs', label: 'Logs' },
+];
+
+function GeneralSettings() {
+  return (
+    <div className="space-y-6">
+      <div>
+        <label className="block text-sm font-medium text-gray-700 mb-1">
+          Backup Retention (days)
+        </label>
+        <input
+          type="number"
+          defaultValue={30}
+          className="w-full max-w-xs rounded-lg border border-gray-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+        />
+      </div>
+      <div>
+        <label className="block text-sm font-medium text-gray-700 mb-1">
+          Default Backup Strategy
+        </label>
+        <select
+          defaultValue="incremental"
+          className="w-full max-w-xs rounded-lg border border-gray-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+        >
+          <option value="full">Full</option>
+          <option value="incremental">Incremental</option>
+          <option value="differential">Differential</option>
+        </select>
+      </div>
+      <div className="flex items-center gap-3">
+        <input
+          type="checkbox"
+          id="auto-cleanup"
+          defaultChecked
+          className="w-4 h-4 text-blue-600 rounded border-gray-300"
+        />
+        <label htmlFor="auto-cleanup" className="text-sm text-gray-700">
+          Enable automatic cleanup of old backups
+        </label>
+      </div>
+    </div>
+  );
+}
+
+function NotificationSettings() {
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center gap-3">
+        <input
+          type="checkbox"
+          id="email-notify"
+          defaultChecked
+          className="w-4 h-4 text-blue-600 rounded border-gray-300"
+        />
+        <label htmlFor="email-notify" className="text-sm text-gray-700">
+          Enable email notifications
+        </label>
+      </div>
+      <div>
+        <label className="block text-sm font-medium text-gray-700 mb-1">
+          Email Address
+        </label>
+        <input
+          type="email"
+          placeholder="admin@example.com"
+          className="w-full max-w-md rounded-lg border border-gray-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+        />
+      </div>
+      <div className="flex items-center gap-3">
+        <input
+          type="checkbox"
+          id="notify-failures"
+          defaultChecked
+          className="w-4 h-4 text-blue-600 rounded border-gray-300"
+        />
+        <label htmlFor="notify-failures" className="text-sm text-gray-700">
+          Notify on backup failures only
+        </label>
+      </div>
+    </div>
+  );
+}
+
+function SecuritySettings() {
+  return (
+    <div className="space-y-6">
+      <div>
+        <label className="block text-sm font-medium text-gray-700 mb-1">
+          Encryption Key
+        </label>
+        <input
+          type="password"
+          placeholder="Enter encryption key"
+          className="w-full max-w-md rounded-lg border border-gray-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+        />
+      </div>
+      <div className="flex items-center gap-3">
+        <input
+          type="checkbox"
+          id="encrypt-backups"
+          className="w-4 h-4 text-blue-600 rounded border-gray-300"
+        />
+        <label htmlFor="encrypt-backups" className="text-sm text-gray-700">
+          Encrypt all backups
+        </label>
+      </div>
+      <div className="flex items-center gap-3">
+        <input
+          type="checkbox"
+          id="require-auth"
+          defaultChecked
+          className="w-4 h-4 text-blue-600 rounded border-gray-300"
+        />
+        <label htmlFor="require-auth" className="text-sm text-gray-700">
+          Require authentication for API access
+        </label>
+      </div>
+    </div>
+  );
+}
+
+function LogSettings() {
+  return (
+    <div className="space-y-6">
+      <div>
+        <label className="block text-sm font-medium text-gray-700 mb-1">
+          Log Level
+        </label>
+        <select
+          defaultValue="info"
+          className="w-full max-w-xs rounded-lg border border-gray-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+        >
+          <option value="debug">Debug</option>
+          <option value="info">Info</option>
+          <option value="warn">Warning</option>
+          <option value="error">Error</option>
+        </select>
+      </div>
+      <div>
+        <label className="block text-sm font-medium text-gray-700 mb-1">
+          Log Retention (days)
+        </label>
+        <input
+          type="number"
+          defaultValue={7}
+          className="w-full max-w-xs rounded-lg border border-gray-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+        />
+      </div>
+      <div className="flex items-center gap-3">
+        <input
+          type="checkbox"
+          id="verbose-logs"
+          className="w-4 h-4 text-blue-600 rounded border-gray-300"
+        />
+        <label htmlFor="verbose-logs" className="text-sm text-gray-700">
+          Enable verbose logging
+        </label>
+      </div>
+    </div>
+  );
+}
+
+export function Settings() {
+  const [activeTab, setActiveTab] = useState('general');
+
+  const tabContent = {
+    general: <GeneralSettings />,
+    notifications: <NotificationSettings />,
+    security: <SecuritySettings />,
+    logs: <LogSettings />,
+  };
+
+  return (
+    <div className="space-y-6">
+      <h2 className="text-2xl font-bold text-gray-900">Settings</h2>
+
+      <div className="bg-white rounded-lg border border-gray-200">
+        <div className="border-b border-gray-200">
+          <nav className="flex -mb-px">
+            {tabs.map((tab) => (
+              <button
+                key={tab.id}
+                onClick={() => setActiveTab(tab.id)}
+                className={`px-6 py-3 text-sm font-medium border-b-2 transition-colors ${
+                  activeTab === tab.id
+                    ? 'border-blue-500 text-blue-600'
+                    : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
+                }`}
+              >
+                {tab.label}
+              </button>
+            ))}
+          </nav>
+        </div>
+        <div className="p-6">{tabContent[activeTab as keyof typeof tabContent]}</div>
+      </div>
+    </div>
+  );
+}