zfs-backup-webinterface/client/src/pages/ServerPage.tsx

import { useEffect, useState } from "react";
import ServerCard from "../components/ServerCard.tsx";

interface Snapshot {
    id: string;
    timestamp: string;
    progress: number;
    status: "pending" | "in-progress" | "completed" | "error";
}

interface ServerData {
    name: string;
    current: Snapshot[];
    history: Snapshot[];
}

export default function ServerPage() {
    const [serverA, setServerA] = useState<ServerData | null>(null);
    const [serverB, setServerB] = useState<ServerData | null>(null);
    const [loading, setLoading] = useState(true);

    useEffect(() => {
        async function fetchData() {
            try {
                const response = await fetch("/api/snapshots");
                const data = await response.json();
                setServerA(data.serverA);
                setServerB(data.serverB);
            } catch (error) {
                console.error("Error fetching snapshot data:", error);
            } finally {
                setLoading(false);
            }
        }

        fetchData();
    }, []);

    if (loading) {
        return <div>Loading...</div>;
    }

    if (!serverA || !serverB) {
        return <div>Error loading server data.</div>;
    }

    return (
        <div className="min-h-dvh flex flex-col bg-gray-100 dark:bg-gray-900 text-gray-800 dark:text-gray-200">
            {/* Header */}
            <header className="bg-gray-200 dark:bg-gray-800 p-4 shadow-md">
                <h1 className="text-3xl font-bold text-center">Server Snapshots</h1>
            </header>

            {/* Main Content */}
            <main className="flex-1 p-6">
                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <ServerCard serverName={serverA.name} snapshots={serverA.current} />
                    <ServerCard serverName={serverB.name} snapshots={serverB.current} />
                </div>
            </main>

            {/* Footer */}
            <footer className="bg-gray-200 dark:bg-gray-800 p-4 text-center">
                <p>&copy; 2023 ZFS Monitoring. All rights reserved.</p>
            </footer>
        </div>
    );
}