شرح مختصر للتعديلات اللي عملتها

2025-08-15 00:37:16 +03:00
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -0,0 +1,18 @@
+import '@/styles/globals.css'
+import type { AppProps } from 'next/app'
+import { Toaster } from "@/components/ui/sonner"
+import { ThemeProvider } from '@/components/theme-provider'
+
+export default function App({ Component, pageProps }: AppProps) {
+  return (
+    <ThemeProvider
+      attribute="class"
+      defaultTheme="system"
+      enableSystem
+      disableTransitionOnChange
+    >
+      <Component {...pageProps} />
+      <Toaster />
+    </ThemeProvider>
+  )
+}
--- a/pages/_document.tsx
+++ b/pages/_document.tsx
@@ -0,0 +1,13 @@
+import { Html, Head, Main, NextScript } from "next/document";
+
+export default function Document() {
+  return (
+    <Html lang="en">
+      <Head />
+      <body className="antialiased">
+        <Main />
+        <NextScript />
+      </body>
+    </Html>
+  );
+}
--- a/pages/api/backup-stream.ts
+++ b/pages/api/backup-stream.ts
@@ -0,0 +1,170 @@
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { spawn } from 'child_process';
+import path from 'path';
+import fs from 'fs';
+import { randomUUID } from 'crypto';
+import { S3Client, GetObjectCommand } from "@aws-sdk/client-s3";
+import { Upload } from "@aws-sdk/lib-storage";
+import { getSignedUrl } from "@aws-sdk/s3-request-presigner";
+import { PassThrough } from 'stream';
+
+// --- Helper Types and Functions for History Logging ---
+type BackupStatus = 'COMPLETED' | 'FAILED' | 'PROCESSING' | 'QUEUED' | 'CANCELLED';
+type BackupRecord = {
+    id: string;
+    dbName: string;
+    status: BackupStatus;
+    createdAt: string;
+    fileName?: string;
+    error?: string;
+    downloadUrl?: string;
+};
+
+const DB_PATH = path.resolve(process.cwd(), 'backup-history.json');
+
+const readRecords = async (): Promise<BackupRecord[]> => {
+    try {
+        if (!fs.existsSync(DB_PATH)) {
+            await fs.promises.writeFile(DB_PATH, JSON.stringify([]), 'utf-8');
+            return [];
+        }
+        const fileContent = await fs.promises.readFile(DB_PATH, 'utf-8');
+        return fileContent ? JSON.parse(fileContent) : [];
+    } catch (error) {
+        console.error("Error reading backup history:", error);
+        return [];
+    }
+};
+
+const writeRecords = async (records: BackupRecord[]): Promise<void> => {
+    try {
+        await fs.promises.writeFile(DB_PATH, JSON.stringify(records, null, 2), 'utf-8');
+    } catch (error) {
+        console.error("Error writing backup history:", error);
+    }
+};
+
+const sendStreamMessage = (res: NextApiResponse, data: object) => {
+    try {
+        if (!res.writableEnded) {
+            res.write(`data: ${JSON.stringify(data)}\n\n`);
+        }
+    } catch (e) {
+        console.error("Failed to write to stream:", e);
+    }
+};
+
+
+export default async function handler(req: NextApiRequest, res: NextApiResponse) {
+    res.setHeader('Content-Type', 'text/event-stream');
+    res.setHeader('Cache-Control', 'no-cache');
+    res.setHeader('Connection', 'keep-alive');
+    res.flushHeaders();
+
+    const {
+        dbHost, dbPort, dbUser, dbPassword, dbName, dbRequireSsl,
+        s3Endpoint, s3BucketName, s3AccessKey, s3SecretKey, s3Region
+    } = req.query;
+
+    const recordId = randomUUID();
+    const timestamp = new Date().toISOString().replace(/[:.]/g, '-');
+    const backupFileName = `${dbName as string}_${timestamp}.dump`;
+    
+    const backupsDir = path.resolve(process.cwd(), 'backups');
+    const backupFilePath = path.join(backupsDir, backupFileName);
+    if (!fs.existsSync(backupsDir)) fs.mkdirSync(backupsDir);
+
+    const newRecord: BackupRecord = { id: recordId, dbName: dbName as string, status: 'PROCESSING', createdAt: new Date().toISOString(), fileName: backupFileName };
+    const records = await readRecords();
+    records.push(newRecord);
+    await writeRecords(records);
+    
+    const pgDumpCommand = 'pg_dump';
+    
+    const args: string[] = [
+        '--format=c',
+        '--blobs',
+        '--verbose',
+        `--host=${dbHost}`,
+        `--port=${dbPort}`,
+        `--username=${dbUser}`,
+        `--dbname=${dbName}`,
+    ];
+    
+    const env: NodeJS.ProcessEnv = {
+        ...process.env,
+        PGPASSWORD: dbPassword as string,
+        PGSSLMODE: dbRequireSsl === 'true' ? 'require' : 'prefer',
+    };
+    
+    const backupProcess = spawn(pgDumpCommand, args, { env });
+
+    req.on('close', async () => {
+        console.log("Client disconnected. Terminating backup process...");
+        backupProcess.kill(); // Stop the pg_dump process
+        const finalRecords = await readRecords();
+        const recordIndex = finalRecords.findIndex(r => r.id === recordId);
+        if (recordIndex > -1 && finalRecords[recordIndex].status === 'PROCESSING') {
+            finalRecords[recordIndex].status = 'CANCELLED';
+            finalRecords[recordIndex].error = 'Process cancelled by user.';
+            await writeRecords(finalRecords);
+        }
+        res.end();
+    });
+
+    const s3Client = new S3Client({
+        endpoint: s3Endpoint as string,
+        region: s3Region as string,
+        credentials: { accessKeyId: s3AccessKey as string, secretAccessKey: s3SecretKey as string }
+    });
+
+    const passThrough = new PassThrough();
+    passThrough.pipe(fs.createWriteStream(backupFilePath));
+
+    const s3Upload = new Upload({
+        client: s3Client,
+        params: { Bucket: s3BucketName as string, Key: backupFileName, Body: passThrough, ContentType: 'application/octet-stream' },
+    });
+
+    if (backupProcess.stdout) backupProcess.stdout.pipe(passThrough);
+
+    let errorOutput = '';
+    if (backupProcess.stderr) {
+        backupProcess.stderr.on('data', (data: Buffer | string) => {
+            errorOutput += data.toString();
+            sendStreamMessage(res, { message: data.toString().trim() });
+        });
+    }
+
+    try {
+        await s3Upload.done();
+        sendStreamMessage(res, { message: "✅ S3 upload completed successfully." });
+
+        const command = new GetObjectCommand({ Bucket: s3BucketName as string, Key: backupFileName });
+        const signedUrl = await getSignedUrl(s3Client, command, { expiresIn: 3600 });
+
+        const finalRecords = await readRecords();
+        const recordIndex = finalRecords.findIndex(r => r.id === recordId);
+        if (recordIndex > -1) {
+            finalRecords[recordIndex].status = 'COMPLETED';
+            finalRecords[recordIndex].downloadUrl = signedUrl;
+            await writeRecords(finalRecords);
+        }
+        sendStreamMessage(res, { message: "All tasks finished.", status: 'completed' });
+
+    } catch (err: any) {
+        sendStreamMessage(res, { message: `❌ S3 Upload Failed: ${err.message}`, status: 'failed' });
+        const finalRecords = await readRecords();
+        const recordIndex = finalRecords.findIndex(r => r.id === recordId);
+        if (recordIndex > -1) {
+            finalRecords[recordIndex].status = 'FAILED';
+            finalRecords[recordIndex].error = `S3 Error: ${err.message}`;
+            await writeRecords(finalRecords);
+        }
+    } finally {
+        if (!res.writableEnded) {
+            sendStreamMessage(res, { status: 'closed' });
+            res.end();
+        }
+    }
+}
--- a/pages/api/backup.ts
+++ b/pages/api/backup.ts
@@ -0,0 +1,59 @@
+import type { NextApiRequest, NextApiResponse } from 'next';
+import fs from 'fs';
+import path from 'path';
+
+// Define a type for our backup records for type safety
+type BackupRecord = {
+    id: string;
+    dbName: string;
+    status: 'COMPLETED' | 'FAILED' | 'PROCESSING' | 'QUEUED';
+    createdAt: string;
+    fileName?: string;
+    error?: string;
+    downloadUrl?: string;
+};
+
+// Define the path to our simple JSON database file
+const DB_PATH = path.resolve(process.cwd(), 'backup-history.json');
+
+/**
+ * Reads backup records from the JSON file.
+ * @returns {Promise<BackupRecord[]>} A promise that resolves to an array of backup records.
+ */
+const readRecords = async (): Promise<BackupRecord[]> => {
+    try {
+        // Check if the database file exists
+        if (!fs.existsSync(DB_PATH)) {
+            // If not, create it with an empty array
+            await fs.promises.writeFile(DB_PATH, JSON.stringify([]), 'utf-8');
+            return [];
+        }
+        // If it exists, read and parse it
+        const fileContent = await fs.promises.readFile(DB_PATH, 'utf-8');
+        return JSON.parse(fileContent);
+    } catch (error) {
+        console.error("Error reading backup history:", error);
+        // Return an empty array in case of any error to prevent crashes
+        return [];
+    }
+};
+
+/**
+ * API handler for fetching backup history.
+ */
+export default async function handler(req: NextApiRequest, res: NextApiResponse) {
+    // This endpoint only supports GET requests
+    if (req.method !== 'GET') {
+        res.setHeader('Allow', ['GET']);
+        return res.status(405).json({ message: `Method ${req.method} Not Allowed` });
+    }
+
+    try {
+        const records = await readRecords();
+        // Sort records by date, newest first
+        const sortedRecords = records.sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime());
+        return res.status(200).json(sortedRecords);
+    } catch (error) {
+        return res.status(500).json({ error: 'Failed to retrieve backup history.' });
+    }
+}
--- a/pages/api/backups.ts
+++ b/pages/api/backups.ts
@@ -0,0 +1,63 @@
+import type { NextApiRequest, NextApiResponse } from 'next';
+import fs from 'fs';
+import path from 'path';
+
+// Define a type for our backup records for type safety
+type BackupRecord = {
+    id: string;
+    dbName: string;
+    status: 'COMPLETED' | 'FAILED' | 'PROCESSING' | 'QUEUED';
+    createdAt: string;
+    fileName?: string;
+    error?: string;
+    downloadUrl?: string;
+};
+
+// Define the path to our simple JSON database file
+// This file will be created in the root of your project
+const DB_PATH = path.resolve(process.cwd(), 'backup-history.json');
+
+/**
+ * Reads backup records from the JSON file.
+ * Creates the file if it doesn't exist.
+ * @returns {Promise<BackupRecord[]>} A promise that resolves to an array of backup records.
+ */
+const readRecords = async (): Promise<BackupRecord[]> => {
+    try {
+        // Check if the database file exists
+        if (!fs.existsSync(DB_PATH)) {
+            // If not, create it with an empty array
+            await fs.promises.writeFile(DB_PATH, JSON.stringify([]), 'utf-8');
+            return [];
+        }
+        // If it exists, read and parse it
+        const fileContent = await fs.promises.readFile(DB_PATH, 'utf-8');
+        // Handle case where file is empty
+        return fileContent ? JSON.parse(fileContent) : [];
+    } catch (error) {
+        console.error("Error reading backup history:", error);
+        // Return an empty array in case of any error to prevent crashes
+        return [];
+    }
+};
+
+/**
+ * API handler for fetching backup history.
+ */
+export default async function handler(req: NextApiRequest, res: NextApiResponse) {
+    // This endpoint only supports GET requests
+    if (req.method !== 'GET') {
+        res.setHeader('Allow', ['GET']);
+        return res.status(405).json({ message: `Method ${req.method} Not Allowed` });
+    }
+
+    try {
+        const records = await readRecords();
+        // Sort records by date, newest first, to display the latest jobs on top
+        const sortedRecords = records.sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime());
+        return res.status(200).json(sortedRecords);
+    } catch (error) {
+        console.error("API Error fetching history:", error);
+        return res.status(500).json({ error: 'Failed to retrieve backup history.' });
+    }
+}
--- a/pages/api/hello.ts
+++ b/pages/api/hello.ts
@@ -0,0 +1,13 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import type { NextApiRequest, NextApiResponse } from "next";
+
+type Data = {
+  name: string;
+};
+
+export default function handler(
+  req: NextApiRequest,
+  res: NextApiResponse<Data>,
+) {
+  res.status(200).json({ name: "John Doe" });
+}
--- a/pages/api/test-connection.ts
+++ b/pages/api/test-connection.ts
@@ -0,0 +1,90 @@
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { Client as PgClient } from 'pg';
+import mysql from 'mysql2/promise';
+import { MongoClient } from 'mongodb';
+
+/**
+ * Handles testing the connection to a database.
+ * This version uses native Node.js drivers for reliability and security.
+ */
+export default async function handler(req: NextApiRequest, res: NextApiResponse) {
+    if (req.method !== 'POST') {
+        return res.status(405).json({ message: 'Method Not Allowed' });
+    }
+
+    const { 
+        dbType, 
+        dbHost, 
+        dbPort, 
+        dbUser, 
+        dbPassword, 
+        dbName, 
+        dbRequireSsl 
+    } = req.body;
+
+    if (!dbType || !dbHost || !dbPort || !dbUser) {
+        return res.status(400).json({ error: 'Missing required database credentials for testing.' });
+    }
+
+    switch (dbType) {
+        case 'postgresql':
+            const pgClient = new PgClient({
+                host: dbHost,
+                port: Number(dbPort),
+                user: dbUser,
+                password: dbPassword,
+                database: dbName,
+                ssl: dbRequireSsl ? { rejectUnauthorized: false } : false,
+                // ✅ **التعديل: زيادة مهلة الاتصال إلى 30 ثانية**
+                connectionTimeoutMillis: 30000, 
+            });
+
+            try {
+                await pgClient.connect();
+                await pgClient.end();
+                return res.status(200).json({ message: 'PostgreSQL connection successful!' });
+            } catch (error: any) {
+                return res.status(500).json({ error: error.message });
+            }
+
+        case 'mysql':
+            let mysqlConnection;
+            try {
+                mysqlConnection = await mysql.createConnection({
+                    host: dbHost,
+                    port: Number(dbPort),
+                    user: dbUser,
+                    password: dbPassword,
+                    database: dbName,
+                    ssl: dbRequireSsl ? { rejectUnauthorized: false } : undefined,
+                    connectTimeout: 30000, // 30 second timeout
+                });
+                await mysqlConnection.end();
+                return res.status(200).json({ message: 'MySQL connection successful!' });
+            } catch (error: any) {
+                // Ensure connection is closed even if it fails
+                if (mysqlConnection) await mysqlConnection.end();
+                return res.status(500).json({ error: error.message });
+            }
+
+        case 'mongodb':
+            const mongoURI = `mongodb://${dbUser}:${encodeURIComponent(dbPassword || '')}@${dbHost}:${dbPort}/${dbName || ''}?authSource=admin`;
+            const mongoClient = new MongoClient(mongoURI, {
+                ssl: dbRequireSsl,
+                serverSelectionTimeoutMS: 30000, // 30 second timeout
+            });
+            try {
+                await mongoClient.connect();
+                await mongoClient.db("admin").command({ ping: 1 });
+                await mongoClient.close();
+                return res.status(200).json({ message: 'MongoDB connection successful!' });
+            } catch (error: any) {
+                await mongoClient.close();
+                return res.status(500).json({ error: error.message });
+            }
+
+        default:
+            return res.status(400).json({ error: 'Unsupported database type' });
+    }
+}
+
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -0,0 +1,442 @@
+import { useState, useEffect } from 'react';
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { toast } from "sonner";
+import { useTheme } from "next-themes";
+import { Loader2, CheckCircle, XCircle, Wand2, Moon, Sun, ShieldCheck, History, ArrowRight, ArrowLeft, Download, Database, Server, Cloud } from "lucide-react";
+import { Checkbox } from '@/components/ui/checkbox';
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import { Badge } from "@/components/ui/badge";
+
+// It's a good practice to define types for complex objects
+type BackupRecord = {
+    id: string;
+    dbName: string;
+    status: 'COMPLETED' | 'FAILED' | 'PROCESSING' | 'QUEUED';
+    createdAt: string;
+    fileName?: string;
+    error?: string;
+    downloadUrl?: string;
+};
+
+// Define a type for the form data to ensure type safety
+type BackupFormData = {
+    dbType: string;
+    dbHost: string;
+    dbPort: string;
+    dbUser: string;
+    dbPassword: string;
+    dbName: string;
+    dbRequireSsl: boolean;
+    s3Endpoint: string;
+    s3BucketName: string;
+    s3AccessKey: string;
+    s3SecretKey: string;
+    s3Region: string;
+    cronExpression: string;
+};
+
+type View = 'form' | 'history';
+type Step = 'database' | 's3' | 'schedule';
+type ConnectionStatus = 'idle' | 'success' | 'error' | 'testing';
+
+/**
+ * Main component for the Backup System UI
+ */
+export default function HomePage() {
+    const { setTheme, theme } = useTheme();
+    const [view, setView] = useState<View>('form');
+
+    // State for the main backup form
+    const [formData, setFormData] = useState<BackupFormData>({
+        dbType: 'postgresql',
+        dbHost: '', dbPort: '5432', dbUser: '', dbPassword: '', dbName: '', dbRequireSsl: true,
+        s3Endpoint: '', s3BucketName: '', s3AccessKey: '', s3SecretKey: '', s3Region: 'us-east-1',
+        cronExpression: '',
+    });
+
+    // UI/UX State
+    const [currentStep, setCurrentStep] = useState<Step>('database');
+    const [isLoading, setIsLoading] = useState(false);
+    const [connectionStatus, setConnectionStatus] = useState<ConnectionStatus>('idle');
+    
+    // State for the real-time backup process modal
+    const [isBackupInProgress, setIsBackupInProgress] = useState(false);
+    const [backupLogs, setBackupLogs] = useState<string[]>([]);
+    const [backupStatus, setBackupStatus] = useState<'pending' | 'completed' | 'failed'>('pending');
+
+    // --- Event Handlers ---
+
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        const { name, value } = e.target;
+        setFormData(prev => ({ ...prev, [name]: value }));
+        // Reset connection status if database details change
+        if (name.startsWith('db')) {
+            setConnectionStatus('idle');
+        }
+    };
+
+    const handleSelectChange = (name: string, value: string) => {
+        setFormData(prev => ({ ...prev, [name]: value }));
+        if (name === 'dbType') {
+            const ports: { [key: string]: string } = { postgresql: '5432' };
+            setFormData(prev => ({ ...prev, dbPort: ports[value] || '' }));
+            setConnectionStatus('idle');
+        }
+    };
+
+    const handleCheckboxChange = (name: string, checked: boolean) => {
+        setFormData(prev => ({ ...prev, [name]: checked }));
+         if (name.startsWith('db')) {
+            setConnectionStatus('idle');
+        }
+    };
+
+    // --- API Calls ---
+
+    const handleTestConnection = async () => {
+        setConnectionStatus('testing');
+        try {
+            const response = await fetch('/api/test-connection', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify(formData),
+            });
+            const result = await response.json();
+            if (response.ok) {
+                setConnectionStatus('success');
+                toast.success("Connection successful!");
+            } else {
+                setConnectionStatus('error');
+                toast.error("Connection failed.", { description: result.error || "Please check credentials and network." });
+            }
+        } catch (error: any) {
+            setConnectionStatus('error');
+            toast.error("Connection failed.", { description: error?.message || "An unknown error occurred." });
+        }
+    };
+
+    const handleSubmit = async (e: React.FormEvent) => {
+        e.preventDefault();
+        
+        // If cron expression exists, it's a schedule job, not a real-time one
+        if (formData.cronExpression) {
+            setIsLoading(true);
+            try {
+                const response = await fetch('/api/backup', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify(formData),
+                });
+                const result = await response.json();
+                if (response.ok) {
+                    toast.success("Success! 🎉", { description: "Backup job has been scheduled." });
+                    setView('history');
+                } else {
+                    toast.error("Uh oh! Something went wrong.", { description: result.message || result.error });
+                }
+            } catch (error: any) {
+                 toast.error("Failed to schedule backup.", { description: error?.message });
+            } finally {
+                setIsLoading(false);
+            }
+            return;
+        }
+
+        // --- Start Real-time Backup via Server-Sent Events ---
+        setIsBackupInProgress(true);
+        setBackupLogs([]);
+        setBackupStatus('pending');
+
+        const queryParams = new URLSearchParams();
+        // A more type-safe way to append params
+        Object.entries(formData).forEach(([key, value]) => {
+            queryParams.append(key, String(value));
+        });
+
+        const eventSource = new EventSource(`/api/backup-stream?${queryParams.toString()}`);
+
+        eventSource.onopen = () => {
+             setBackupLogs(prev => [...prev, "Connection to server established. Starting backup..."]);
+        };
+
+        eventSource.onmessage = (event) => {
+            const data = JSON.parse(event.data);
+            if (data.message) {
+                setBackupLogs((prevLogs) => [...prevLogs, data.message]);
+            }
+            if (data.status) {
+                setBackupStatus(data.status);
+                if (['completed', 'failed', 'closed'].includes(data.status)) {
+                    eventSource.close();
+                    if (data.status === 'completed') {
+                         toast.success("Backup completed successfully!");
+                    } else if (data.status === 'failed') {
+                         toast.error("Backup failed.", { description: "Check logs for more details."});
+                    }
+                }
+            }
+        };
+
+        eventSource.onerror = (err) => {
+            toast.error("Connection to backup stream failed.");
+            setBackupStatus('failed');
+            setBackupLogs((prev) => [...prev, "Stream connection closed unexpectedly. The server might have terminated the process."]);
+            eventSource.close();
+        };
+    };
+    
+    // --- Step Navigation ---
+    const nextStep = () => {
+        if (currentStep === 'database') setCurrentStep('s3');
+        if (currentStep === 's3') setCurrentStep('schedule');
+    };
+    const prevStep = () => {
+        if (currentStep === 'schedule') setCurrentStep('s3');
+        if (currentStep === 's3') setCurrentStep('database');
+    };
+
+    // --- Render Logic ---
+    
+    const renderStepContent = () => {
+        switch(currentStep) {
+            case 'database': return <DatabaseStepContent formData={formData} connectionStatus={connectionStatus} onTestConnection={handleTestConnection} onChange={handleChange} onSelectChange={(v: string) => handleSelectChange('dbType', v)} onCheckboxChange={(c: boolean) => handleCheckboxChange('dbRequireSsl', c)} />;
+            case 's3': return <S3StepContent formData={formData} onChange={handleChange} />;
+            case 'schedule': return <ScheduleStepContent formData={formData} onChange={handleChange} />;
+            default: return null;
+        }
+    };
+
+    return (
+        <main className="container mx-auto flex min-h-screen flex-col items-center justify-center p-4">
+            <div className="absolute top-4 right-4 flex items-center gap-2">
+                <Button variant="outline" onClick={() => setView(view === 'form' ? 'history' : 'form')}>
+                    {view === 'form' ? <History className="mr-2 h-4 w-4"/> : <Wand2 className="mr-2 h-4 w-4" />}
+                    {view === 'form' ? 'View History' : 'New Backup'}
+                </Button>
+                <Button variant="outline" size="icon" onClick={() => setTheme(theme === "light" ? "dark" : "light")}>
+                    <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+                    <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+                    <span className="sr-only">Toggle theme</span>
+                </Button>
+            </div>
+            
+            {view === 'form' ? (
+                <Card className="w-full max-w-2xl animate-in fade-in-50 duration-500">
+                    <form onSubmit={handleSubmit}>
+                        <CardHeader>
+                            <CardTitle className="flex items-center gap-2 text-2xl"><ShieldCheck /> Secure Backup System</CardTitle>
+                            <CardDescription>Configure and run a secure, one-time or scheduled database backup.</CardDescription>
+                        </CardHeader>
+                        
+                        {renderStepContent()}
+
+                        <CardFooter className="flex justify-between">
+                            <Button type="button" variant="outline" onClick={prevStep} disabled={currentStep === 'database'}>
+                                <ArrowLeft className="mr-2 h-4 w-4" /> Previous
+                            </Button>
+                            {currentStep !== 'schedule' ? (
+                                <Button type="button" onClick={nextStep} disabled={currentStep === 'database' && connectionStatus !== 'success'}>
+                                    Next <ArrowRight className="ml-2 h-4 w-4" />
+                                </Button>
+                            ) : (
+                                <Button type="submit" disabled={isLoading}>
+                                    {isLoading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+                                    {formData.cronExpression ? 'Schedule Backup' : 'Run Backup Now'}
+                                </Button>
+                            )}
+                        </CardFooter>
+                    </form>
+                </Card>
+            ) : (
+                <HistoryView />
+            )}
+
+            {/* Real-time Backup Progress Modal */}
+            <Dialog open={isBackupInProgress} onOpenChange={setIsBackupInProgress}>
+                <DialogContent className="max-w-2xl">
+                    <DialogHeader>
+                        <DialogTitle>Backup in Progress...</DialogTitle>
+                        <DialogDescription>Please keep this window open until the process is complete. Logs are streamed from the server.</DialogDescription>
+                    </DialogHeader>
+                    <div className="mt-4 h-64 overflow-y-auto rounded-md bg-muted p-4 font-mono text-xs selection:bg-primary selection:text-primary-foreground">
+                        {backupLogs.map((log, index) => (<p key={index} className="whitespace-pre-wrap">{log}</p>))}
+                    </div>
+                    <DialogFooter className="sm:justify-between">
+                        <div className="flex items-center gap-2">
+                             {backupStatus === 'completed' && <><CheckCircle className="h-5 w-5 text-green-500" /><p className="text-sm text-green-500">Backup completed successfully!</p></>}
+                             {backupStatus === 'failed' && <><XCircle className="h-5 w-5 text-red-500" /><p className="text-sm text-red-500">Backup failed. Check logs for details.</p></>}
+                             {backupStatus === 'pending' && <><Loader2 className="h-5 w-5 animate-spin" /><p className="text-sm text-muted-foreground">Processing...</p></>}
+                        </div>
+                        <Button onClick={() => { setIsBackupInProgress(false); if (backupStatus !== 'pending') setView('history'); }}>Close</Button>
+                    </DialogFooter>
+                </DialogContent>
+            </Dialog>
+        </main>
+    );
+}
+
+// --- Sub-components for Form Steps with defined Prop Types ---
+
+type DatabaseStepProps = {
+    formData: BackupFormData;
+    connectionStatus: ConnectionStatus;
+    onTestConnection: () => void;
+    onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    onSelectChange: (value: string) => void;
+    onCheckboxChange: (checked: boolean) => void;
+};
+
+const DatabaseStepContent = ({ formData, connectionStatus, onTestConnection, onChange, onSelectChange, onCheckboxChange }: DatabaseStepProps) => (
+    <CardContent className="space-y-6 pt-6">
+        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+            <div className="space-y-2">
+                <Label htmlFor="dbType">Database Type</Label>
+                <Select onValueChange={onSelectChange} defaultValue={formData.dbType}>
+                    <SelectTrigger id="dbType"><SelectValue /></SelectTrigger>
+                    <SelectContent><SelectItem value="postgresql">PostgreSQL</SelectItem></SelectContent>
+                </Select>
+            </div>
+            <div className="space-y-2"><Label htmlFor="dbHost">Host</Label><Input id="dbHost" name="dbHost" value={formData.dbHost} onChange={onChange} placeholder="e.g., db.example.com" required /></div>
+            <div className="space-y-2"><Label htmlFor="dbPort">Port</Label><Input id="dbPort" name="dbPort" value={formData.dbPort} onChange={onChange} required /></div>
+            <div className="space-y-2"><Label htmlFor="dbUser">User</Label><Input id="dbUser" name="dbUser" value={formData.dbUser} onChange={onChange} placeholder="e.g., backup_user" required /></div>
+            <div className="space-y-2"><Label htmlFor="dbPassword">Password</Label><Input id="dbPassword" name="dbPassword" type="password" value={formData.dbPassword} onChange={onChange} /></div>
+            <div className="space-y-2"><Label htmlFor="dbName">Database Name</Label><Input id="dbName" name="dbName" value={formData.dbName} onChange={onChange} placeholder="e.g., production_db" required /></div>
+        </div>
+        <div className="flex items-center space-x-2 pt-2">
+            <Checkbox id="dbRequireSsl" checked={formData.dbRequireSsl} onCheckedChange={onCheckboxChange} />
+            <label htmlFor="dbRequireSsl" className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">Require SSL Connection</label>
+        </div>
+        <div className="flex items-center justify-end space-x-2 pt-4 border-t mt-4">
+            {connectionStatus === 'success' && <CheckCircle className="h-5 w-5 text-green-500" />}
+            {connectionStatus === 'error' && <XCircle className="h-5 w-5 text-red-500" />}
+            <Button type="button" variant="outline" onClick={onTestConnection} disabled={connectionStatus === 'testing'}>
+                {connectionStatus === 'testing' && <Loader2 className="mr-2 h-4 w-4 animate-spin" />} Test Connection
+            </Button>
+        </div>
+    </CardContent>
+);
+
+type S3StepProps = {
+    formData: BackupFormData;
+    onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+};
+
+const S3StepContent = ({ formData, onChange }: S3StepProps) => (
+    <CardContent className="space-y-4 pt-6">
+        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+            <div className="space-y-2 sm:col-span-2"><Label htmlFor="s3Endpoint">S3-Compatible Endpoint URL</Label><Input id="s3Endpoint" name="s3Endpoint" value={formData.s3Endpoint} onChange={onChange} placeholder="e.g., s3.us-west-2.amazonaws.com" required /></div>
+            <div className="space-y-2"><Label htmlFor="s3BucketName">Bucket Name</Label><Input id="s3BucketName" name="s3BucketName" value={formData.s3BucketName} onChange={onChange} required /></div>
+            <div className="space-y-2"><Label htmlFor="s3Region">Region</Label><Input id="s3Region" name="s3Region" value={formData.s3Region} onChange={onChange} required /></div>
+            <div className="space-y-2"><Label htmlFor="s3AccessKey">Access Key</Label><Input id="s3AccessKey" name="s3AccessKey" value={formData.s3AccessKey} type="password" onChange={onChange} required /></div>
+            <div className="space-y-2"><Label htmlFor="s3SecretKey">Secret Key</Label><Input id="s3SecretKey" name="s3SecretKey" type="password" value={formData.s3SecretKey} onChange={onChange} required /></div>
+        </div>
+    </CardContent>
+);
+
+type ScheduleStepProps = {
+    formData: BackupFormData;
+    onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+};
+
+const ScheduleStepContent = ({ formData, onChange }: ScheduleStepProps) => (
+    <CardContent className="space-y-4 pt-6">
+        <div className="space-y-2">
+            <Label htmlFor="cronExpression">Cron Expression (Optional)</Label>
+            <Input id="cronExpression" name="cronExpression" placeholder="e.g., 0 2 * * * (for 2 AM daily)" value={formData.cronExpression} onChange={onChange} />
+            <p className="text-sm text-muted-foreground">Leave empty to run backup once immediately. Use <a href="https://crontab.guru/" target="_blank" rel="noopener noreferrer" className="text-primary underline">crontab.guru</a> to build expressions.</p>
+        </div>
+    </CardContent>
+);
+
+/**
+ * Component to display the history of backup jobs
+ */
+function HistoryView() {
+    const [records, setRecords] = useState<BackupRecord[]>([]);
+    const [isLoading, setIsLoading] = useState(true);
+
+    useEffect(() => {
+        const fetchRecords = async () => {
+            try {
+                const response = await fetch('/api/backups');
+                if(response.ok) {
+                    const data = await response.json();
+                    setRecords(data);
+                } else {
+                    toast.error("Could not fetch backup history.");
+                }
+            } catch (error) {
+                console.error("Failed to fetch backup records:", error);
+                toast.error("Could not fetch backup history.");
+            } finally {
+                setIsLoading(false);
+            }
+        };
+
+        fetchRecords();
+        const interval = setInterval(fetchRecords, 5000); // Refresh every 5 seconds
+        return () => clearInterval(interval);
+    }, []);
+
+    return (
+        <Card className="w-full max-w-4xl animate-in fade-in-50 duration-500">
+            <CardHeader>
+                <CardTitle>Backup History</CardTitle>
+                <CardDescription>A list of all scheduled and completed backup jobs. Refreshes automatically.</CardDescription>
+            </CardHeader>
+            <CardContent>
+                {isLoading && records.length === 0 ? (
+                    <div className="flex flex-col justify-center items-center p-8 gap-4">
+                        <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
+                        <p className="text-muted-foreground">Loading history...</p>
+                    </div>
+                ) : records.length === 0 ? (
+                    <p className="text-center text-muted-foreground p-8">No backup jobs found yet.</p>
+                ) : (
+                    <div className="border rounded-md">
+                        <Table>
+                            <TableHeader>
+                                <TableRow>
+                                    <TableHead>Database</TableHead>
+                                    <TableHead>Status</TableHead>
+                                    <TableHead>Created At</TableHead>
+                                    <TableHead>Filename / Error</TableHead>
+                                    <TableHead className="text-right">Actions</TableHead>
+                                </TableRow>
+                            </TableHeader>
+                            <TableBody>
+                                {records.map((record) => (
+                                    <TableRow key={record.id}>
+                                        <TableCell className="font-medium flex items-center gap-2"><Database size={16}/> {record.dbName}</TableCell>
+                                        <TableCell>
+                                            <Badge variant={record.status === 'COMPLETED' ? 'default' : record.status === 'FAILED' ? 'destructive' : 'secondary'}>
+                                                {(record.status === 'QUEUED' || record.status === 'PROCESSING') && <Loader2 className="mr-2 h-3 w-3 animate-spin" />}
+                                                {record.status}
+                                            </Badge>
+                                        </TableCell>
+                                        <TableCell>{new Date(record.createdAt).toLocaleString()}</TableCell>
+                                        <TableCell className="text-xs max-w-xs truncate" title={record.fileName || record.error}>{record.fileName || record.error}</TableCell>
+                                        <TableCell className="text-right">
+                                            {record.status === 'COMPLETED' && record.downloadUrl && (
+                                                <Button asChild variant="outline" size="sm">
+                                                    <a href={record.downloadUrl} target="_blank" rel="noopener noreferrer">
+                                                        <Download className="mr-2 h-4 w-4"/> Download
+                                                    </a>
+                                                </Button>
+                                            )}
+                                        </TableCell>
+                                    </TableRow>
+                                ))}
+                            </TableBody>
+                        </Table>
+                    </div>
+                )}
+            </CardContent>
+        </Card>
+    );
+}