First swing.

src/components/BackupRestoreModal.tsx

@@ -0,0 +1,158 @@
+import { useState } from 'react';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from './ui/dialog';
+import { Button } from './ui/button';
+import { Badge } from './ui/badge';
+import { Loader2, AlertCircle, Clock, HardDrive } from 'lucide-react';
+
+interface Backup {
+  id: string;
+  timestamp: string;
+  size?: string;
+}
+
+interface BackupRestoreModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  mode: 'backup' | 'restore';
+  appName: string;
+  backups?: Backup[];
+  isLoading?: boolean;
+  onConfirm: (backupId?: string) => void;
+  isPending?: boolean;
+}
+
+export function BackupRestoreModal({
+  isOpen,
+  onClose,
+  mode,
+  appName,
+  backups = [],
+  isLoading = false,
+  onConfirm,
+  isPending = false,
+}: BackupRestoreModalProps) {
+  const [selectedBackupId, setSelectedBackupId] = useState<string | null>(null);
+
+  const handleConfirm = () => {
+    if (mode === 'backup') {
+      onConfirm();
+    } else if (mode === 'restore' && selectedBackupId) {
+      onConfirm(selectedBackupId);
+    }
+    onClose();
+  };
+
+  const formatTimestamp = (timestamp: string) => {
+    try {
+      return new Date(timestamp).toLocaleString();
+    } catch {
+      return timestamp;
+    }
+  };
+
+  return (
+    <Dialog open={isOpen} onOpenChange={onClose}>
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle>
+            {mode === 'backup' ? 'Create Backup' : 'Restore from Backup'}
+          </DialogTitle>
+          <DialogDescription>
+            {mode === 'backup'
+              ? `Create a backup of the ${appName} application data.`
+              : `Select a backup to restore for the ${appName} application.`}
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-4">
+          {mode === 'backup' ? (
+            <div className="p-4 bg-muted rounded-lg">
+              <p className="text-sm text-muted-foreground">
+                This will create a new backup of the current application state. The backup
+                process may take a few minutes depending on the size of the data.
+              </p>
+            </div>
+          ) : (
+            <div className="space-y-3">
+              {isLoading ? (
+                <div className="flex items-center justify-center py-8">
+                  <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
+                </div>
+              ) : backups.length === 0 ? (
+                <div className="text-center py-8">
+                  <AlertCircle className="h-12 w-12 text-muted-foreground mx-auto mb-4" />
+                  <p className="text-sm text-muted-foreground">
+                    No backups available for this application.
+                  </p>
+                </div>
+              ) : (
+                <div className="space-y-2 max-h-64 overflow-y-auto">
+                  {backups.map((backup) => (
+                    <button
+                      key={backup.id}
+                      onClick={() => setSelectedBackupId(backup.id)}
+                      className={`w-full p-3 rounded-lg border text-left transition-colors ${
+                        selectedBackupId === backup.id
+                          ? 'border-primary bg-primary/10'
+                          : 'border-border hover:bg-muted'
+                      }`}
+                    >
+                      <div className="flex items-center justify-between mb-2">
+                        <div className="flex items-center gap-2">
+                          <Clock className="h-4 w-4 text-muted-foreground" />
+                          <span className="text-sm font-medium">
+                            {formatTimestamp(backup.timestamp)}
+                          </span>
+                        </div>
+                        {selectedBackupId === backup.id && (
+                          <Badge variant="default">Selected</Badge>
+                        )}
+                      </div>
+                      {backup.size && (
+                        <div className="flex items-center gap-2 text-xs text-muted-foreground">
+                          <HardDrive className="h-3 w-3" />
+                          <span>{backup.size}</span>
+                        </div>
+                      )}
+                    </button>
+                  ))}
+                </div>
+              )}
+            </div>
+          )}
+        </div>
+
+        <DialogFooter>
+          <Button variant="outline" onClick={onClose} disabled={isPending}>
+            Cancel
+          </Button>
+          <Button
+            onClick={handleConfirm}
+            disabled={
+              isPending ||
+              (mode === 'restore' && (!selectedBackupId || backups.length === 0))
+            }
+          >
+            {isPending ? (
+              <>
+                <Loader2 className="h-4 w-4 mr-2 animate-spin" />
+                {mode === 'backup' ? 'Creating...' : 'Restoring...'}
+              </>
+            ) : mode === 'backup' ? (
+              'Create Backup'
+            ) : (
+              'Restore'
+            )}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}