feat: integrate rclone WebDAV backup for PC-to-PC file sync

Source PC serves backups/ folder via rclone WebDAV server (auto-starts with app). Receiver PC pulls backups on schedule using rclone sync. Network Backup UI now has two tabs: Rclone and API Key. Rclone installed automatically via postinstall script. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-06-24 23:29:36 -04:00
parent 24e66bfaf9
commit 5e881c9ff7
8 changed files with 723 additions and 148 deletions
--- a/apps/Backend/src/app.ts
+++ b/apps/Backend/src/app.ts
@@ -10,6 +10,7 @@ import { authenticateJWT } from "./middlewares/auth.middleware";
 import networkBackupPublicRoutes from "./routes/network-backup-public";
 import dotenv from "dotenv";
 import { startBackupCron } from "./cron/backupCheck";
+import { autoStartServer } from "./services/rcloneService";
 import path from "path";

 dotenv.config();
@@ -87,5 +88,6 @@ app.use(errorHandler);

 //startig cron job
 startBackupCron();
+autoStartServer();

 export default app;
--- a/apps/Backend/src/cron/backupCheck.ts
+++ b/apps/Backend/src/cron/backupCheck.ts
@@ -6,6 +6,8 @@ import { backupDatabaseToPath } from "../services/databaseBackupService";
 import { cronJobLogStorage } from "../storage/cron-job-log-storage";
 import { readSyncConfig, writeSyncConfig } from "../services/networkSyncConfigService";
 import { runNetworkSync, runNetworkFilesSync } from "../services/networkSyncService";
+import { readRcloneConfig, writeRcloneConfig } from "../services/rcloneConfigService";
+import { runRclonePull } from "../services/rcloneService";

 // Local backup folder in the app root (apps/Backend/backups)
 const LOCAL_BACKUP_DIR = path.resolve(process.cwd(), "backups");
@@ -174,6 +176,42 @@ export const startBackupCron = () => {
    console.log("✅ [9 PM] USB backup complete.");
  });

+  // ============================================================
+  // Every hour — Rclone backup (runs only when hour matches config)
+  // ============================================================
+  cron.schedule("0 * * * *", async () => {
+    const rcloneConfig = readRcloneConfig();
+    if (!rcloneConfig.receiverEnabled || !rcloneConfig.sourceIp) return;
+
+    const currentHour = new Date().getHours();
+    if (currentHour !== rcloneConfig.receiverSyncHour) return;
+
+    console.log(`[${rcloneConfig.receiverSyncHour}:00] Running rclone pull from ${rcloneConfig.sourceIp}...`);
+
+    const admin = await getAdminUser();
+    const startedAt = new Date();
+    const log = await cronJobLogStorage.createJobLog("rclone-backup", startedAt);
+
+    try {
+      await runRclonePull();
+      writeRcloneConfig({ lastSyncAt: new Date().toISOString(), lastSyncStatus: "success", lastSyncError: null });
+      await cronJobLogStorage.completeJobLog(log.id, "success", new Date());
+      console.log(`Rclone backup complete.`);
+    } catch (err) {
+      const errorMessage = err instanceof Error ? err.message : String(err);
+      console.error("Rclone backup failed:", err);
+      writeRcloneConfig({ lastSyncAt: new Date().toISOString(), lastSyncStatus: "failed", lastSyncError: errorMessage });
+      await cronJobLogStorage.completeJobLog(log.id, "failed", new Date(), errorMessage);
+      if (admin) {
+        await storage.createNotification(
+          admin.id,
+          "BACKUP",
+          `Rclone backup failed: ${errorMessage}`
+        );
+      }
+    }
+  });
+
  // ============================================================
  // Every hour — Network sync (runs only when hour matches config)
  // ============================================================
--- a/apps/Backend/src/routes/database-management.ts
+++ b/apps/Backend/src/routes/database-management.ts
@@ -15,6 +15,8 @@ import {
  writeSyncConfig,
 } from "../services/networkSyncConfigService";
 import { runNetworkSync, runNetworkFilesSync } from "../services/networkSyncService";
+import { readRcloneConfig, writeRcloneConfig } from "../services/rcloneConfigService";
+import { checkRcloneInstalled, isServerRunning, startWebDavServer, stopWebDavServer, runRclonePull } from "../services/rcloneService";

 const UPLOADS_DIR = path.join(process.cwd(), "uploads");

@@ -605,4 +607,63 @@ router.post("/network-sync-now", async (req: Request, res: Response): Promise<an
  }
 });

+// ==============================
+// Rclone Backup
+// ==============================
+
+router.get("/rclone-config", (req, res) => {
+  if (!req.user?.id) return res.status(401).json({ error: "Unauthorized" });
+  res.json(readRcloneConfig());
+});
+
+router.put("/rclone-config", (req: Request, res: Response): any => {
+  if (!req.user?.id) return res.status(401).json({ error: "Unauthorized" });
+  const { serverEnabled, serverPort, receiverEnabled, receiverSyncHour, sourceIp, sourcePort } = req.body;
+  const patch: any = {};
+  if (typeof serverEnabled === "boolean") patch.serverEnabled = serverEnabled;
+  if (typeof serverPort === "number") patch.serverPort = serverPort;
+  if (typeof receiverEnabled === "boolean") patch.receiverEnabled = receiverEnabled;
+  if (typeof receiverSyncHour === "number") patch.receiverSyncHour = receiverSyncHour;
+  if (typeof sourceIp === "string") patch.sourceIp = sourceIp.trim();
+  if (typeof sourcePort === "number") patch.sourcePort = sourcePort;
+  const updated = writeRcloneConfig(patch);
+  res.json(updated);
+});
+
+router.get("/rclone-status", async (req, res) => {
+  if (!req.user?.id) return res.status(401).json({ error: "Unauthorized" });
+  const installed = await checkRcloneInstalled();
+  const serverRunning = isServerRunning();
+  res.json({ installed, serverRunning });
+});
+
+router.post("/rclone-server/start", async (req: Request, res: Response): Promise<any> => {
+  if (!req.user?.id) return res.status(401).json({ error: "Unauthorized" });
+  try {
+    await startWebDavServer();
+    res.json({ success: true, running: true });
+  } catch (err: any) {
+    res.status(500).json({ error: "Failed to start rclone server", details: err.message });
+  }
+});
+
+router.post("/rclone-server/stop", (req: Request, res: Response): any => {
+  if (!req.user?.id) return res.status(401).json({ error: "Unauthorized" });
+  stopWebDavServer();
+  res.json({ success: true, running: false });
+});
+
+router.post("/rclone-pull-now", async (req: Request, res: Response): Promise<any> => {
+  if (!req.user?.id) return res.status(401).json({ error: "Unauthorized" });
+
+  try {
+    await runRclonePull();
+    writeRcloneConfig({ lastSyncAt: new Date().toISOString(), lastSyncStatus: "success", lastSyncError: null });
+    res.json({ success: true, syncedAt: new Date() });
+  } catch (err: any) {
+    writeRcloneConfig({ lastSyncAt: new Date().toISOString(), lastSyncStatus: "failed", lastSyncError: err.message });
+    res.status(500).json({ error: "Rclone pull failed", details: err.message });
+  }
+});
+
 export default router;
--- a/apps/Backend/src/services/rcloneConfigService.ts
+++ b/apps/Backend/src/services/rcloneConfigService.ts
@@ -0,0 +1,50 @@
+import fs from "fs";
+import path from "path";
+
+const CONFIG_FILE = path.resolve(process.cwd(), "rclone-config.json");
+
+export const RCLONE_USER = "MyDentalApp";
+export const RCLONE_PASS = "SuperSecret!@2026";
+
+export interface RcloneConfig {
+  // Source role: serve backups folder via WebDAV
+  serverEnabled: boolean;
+  serverPort: number;
+
+  // Receiver role: pull backups from source PC
+  receiverEnabled: boolean;
+  receiverSyncHour: number;
+  sourceIp: string;
+  sourcePort: number;
+  lastSyncAt: string | null;
+  lastSyncStatus: string | null;
+  lastSyncError: string | null;
+}
+
+const DEFAULT_CONFIG: RcloneConfig = {
+  serverEnabled: false,
+  serverPort: 8080,
+  receiverEnabled: false,
+  receiverSyncHour: 21,
+  sourceIp: "",
+  sourcePort: 8080,
+  lastSyncAt: null,
+  lastSyncStatus: null,
+  lastSyncError: null,
+};
+
+export function readRcloneConfig(): RcloneConfig {
+  if (fs.existsSync(CONFIG_FILE)) {
+    try {
+      return { ...DEFAULT_CONFIG, ...JSON.parse(fs.readFileSync(CONFIG_FILE, "utf8")) };
+    } catch {}
+  }
+  return { ...DEFAULT_CONFIG };
+}
+
+export function writeRcloneConfig(patch: Partial<RcloneConfig>): RcloneConfig {
+  const current = readRcloneConfig();
+  const updated = { ...current, ...patch };
+  fs.writeFileSync(CONFIG_FILE, JSON.stringify(updated, null, 2), "utf8");
+  return updated;
+}
--- a/apps/Backend/src/services/rcloneService.ts
+++ b/apps/Backend/src/services/rcloneService.ts
@@ -0,0 +1,140 @@
+import { spawn, ChildProcess } from "child_process";
+import path from "path";
+import { readRcloneConfig, RCLONE_USER, RCLONE_PASS } from "./rcloneConfigService";
+
+const LOCAL_BACKUP_DIR = path.resolve(process.cwd(), "backups");
+
+let serverProcess: ChildProcess | null = null;
+
+export function checkRcloneInstalled(): Promise<boolean> {
+  return new Promise((resolve) => {
+    const proc = spawn("rclone", ["version"]);
+    proc.on("error", () => resolve(false));
+    proc.on("close", (code) => resolve(code === 0));
+  });
+}
+
+function obscurePassword(password: string): Promise<string> {
+  return new Promise((resolve, reject) => {
+    const proc = spawn("rclone", ["obscure", password]);
+    let stdout = "";
+    let stderr = "";
+    proc.stdout.on("data", (d) => (stdout += d.toString()));
+    proc.stderr.on("data", (d) => (stderr += d.toString()));
+    proc.on("error", (err) => reject(new Error(`Failed to run rclone obscure: ${err.message}`)));
+    proc.on("close", (code) => {
+      if (code !== 0) return reject(new Error(`rclone obscure failed: ${stderr}`));
+      resolve(stdout.trim());
+    });
+  });
+}
+
+export function isServerRunning(): boolean {
+  return serverProcess !== null && serverProcess.exitCode === null;
+}
+
+// Source PC: rclone serve webdav ./backups --addr :8080 --user MyDentalApp --pass SuperSecret!@2026
+export async function startWebDavServer(): Promise<void> {
+  if (isServerRunning()) return;
+
+  const installed = await checkRcloneInstalled();
+  if (!installed) {
+    throw new Error("rclone is not installed. Run: curl https://rclone.org/install.sh | sudo bash");
+  }
+
+  const config = readRcloneConfig();
+
+  const args = [
+    "serve", "webdav",
+    LOCAL_BACKUP_DIR,
+    "--addr", `:${config.serverPort}`,
+    "--user", RCLONE_USER,
+    "--pass", RCLONE_PASS,
+    "--read-only",
+  ];
+
+  serverProcess = spawn("rclone", args, { stdio: "pipe" });
+
+  serverProcess.stdout?.on("data", (d) => console.log(`[rclone-server] ${d.toString().trim()}`));
+  serverProcess.stderr?.on("data", (d) => console.log(`[rclone-server] ${d.toString().trim()}`));
+
+  serverProcess.on("error", (err) => {
+    console.error("[rclone-server] Failed to start:", err.message);
+    serverProcess = null;
+  });
+
+  serverProcess.on("close", (code) => {
+    console.log(`[rclone-server] Exited with code ${code}`);
+    serverProcess = null;
+  });
+
+  await new Promise((resolve) => setTimeout(resolve, 1000));
+
+  if (!isServerRunning()) {
+    throw new Error("rclone WebDAV server failed to start");
+  }
+
+  console.log(`[rclone-server] WebDAV server started on port ${config.serverPort}`);
+}
+
+export function stopWebDavServer(): void {
+  if (serverProcess && serverProcess.exitCode === null) {
+    serverProcess.kill("SIGTERM");
+    serverProcess = null;
+    console.log("[rclone-server] WebDAV server stopped");
+  }
+}
+
+// Receiver PC: rclone sync :webdav:/ ./backups --webdav-url http://IP:PORT --webdav-user MyDentalApp --webdav-pass OBSCURED
+export async function runRclonePull(): Promise<void> {
+  const config = readRcloneConfig();
+  if (!config.sourceIp || !config.sourcePort) {
+    throw new Error("Rclone receiver configuration is incomplete — source IP and port are required");
+  }
+
+  const installed = await checkRcloneInstalled();
+  if (!installed) {
+    throw new Error("rclone is not installed. Run: curl https://rclone.org/install.sh | sudo bash");
+  }
+
+  const obscuredPass = await obscurePassword(RCLONE_PASS);
+  const webdavUrl = `http://${config.sourceIp}:${config.sourcePort}`;
+
+  const args = [
+    "sync",
+    `:webdav:/`,
+    LOCAL_BACKUP_DIR,
+    "--webdav-url", webdavUrl,
+    "--webdav-user", RCLONE_USER,
+    "--webdav-pass", obscuredPass,
+    "-v",
+  ];
+
+  return new Promise((resolve, reject) => {
+    const proc = spawn("rclone", args);
+
+    let stderr = "";
+    proc.stdout.on("data", (d) => console.log(`[rclone-pull] ${d.toString().trim()}`));
+    proc.stderr.on("data", (d) => {
+      const line = d.toString().trim();
+      stderr += line + "\n";
+      console.log(`[rclone-pull] ${line}`);
+    });
+    proc.on("error", (err) => reject(new Error(`Failed to start rclone: ${err.message}`)));
+    proc.on("close", (code) => {
+      if (code !== 0) return reject(new Error(`rclone exited with code ${code}: ${stderr}`));
+      resolve();
+    });
+  });
+}
+
+export async function autoStartServer(): Promise<void> {
+  const config = readRcloneConfig();
+  if (config.serverEnabled) {
+    try {
+      await startWebDavServer();
+    } catch (err) {
+      console.error("[rclone-server] Auto-start failed:", err);
+    }
+  }
+}
--- a/apps/Frontend/src/components/database-management/network-backup-manager.tsx
+++ b/apps/Frontend/src/components/database-management/network-backup-manager.tsx
@@ -4,6 +4,7 @@ import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
 import { Switch } from "@/components/ui/switch";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import {
  AlertDialog,
  AlertDialogAction,
@@ -14,7 +15,7 @@ import {
  AlertDialogHeader,
  AlertDialogTitle,
 } from "@/components/ui/alert-dialog";
-import { Copy, Eye, EyeOff, RefreshCw, Network, RotateCcw } from "lucide-react";
+import { Copy, Eye, EyeOff, RefreshCw, Network, RotateCcw, HardDrive } from "lucide-react";
 import { apiRequest, queryClient } from "@/lib/queryClient";
 import { useToast } from "@/hooks/use-toast";

@@ -31,21 +32,295 @@ const HOUR_OPTIONS = Array.from({ length: 24 }, (_, h) => {
 });

 export function NetworkBackupManager() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="flex items-center gap-2">
+          <Network className="h-5 w-5" />
+          Network Backup
+        </CardTitle>
+      </CardHeader>
+      <CardContent>
+        <Tabs defaultValue="rclone">
+          <TabsList className="mb-4">
+            <TabsTrigger value="rclone">
+              <HardDrive className="h-4 w-4 mr-1" />
+              Rclone
+            </TabsTrigger>
+            <TabsTrigger value="apikey">
+              <Network className="h-4 w-4 mr-1" />
+              API Key
+            </TabsTrigger>
+          </TabsList>
+          <TabsContent value="rclone">
+            <RcloneBackupSection />
+          </TabsContent>
+          <TabsContent value="apikey">
+            <ApiKeyBackupSection />
+          </TabsContent>
+        </Tabs>
+      </CardContent>
+    </Card>
+  );
+}
+
+// ============================================================
+// Tab 1: Rclone
+// ============================================================
+function RcloneBackupSection() {
+  const { toast } = useToast();
+
+  // Server (source) state
+  const [serverEnabled, setServerEnabled] = useState(false);
+  const [serverPort, setServerPort] = useState(8080);
+
+  // Receiver state
+  const [receiverEnabled, setReceiverEnabled] = useState(false);
+  const [receiverSyncHour, setReceiverSyncHour] = useState(21);
+  const [sourceIp, setSourceIp] = useState("");
+  const [sourcePort, setSourcePort] = useState(8080);
+
+  const [formLoaded, setFormLoaded] = useState(false);
+
+  const { data: rcloneConfig } = useQuery({
+    queryKey: ["/db/rclone-config"],
+    queryFn: async () => {
+      const res = await apiRequest("GET", "/api/database-management/rclone-config");
+      return res.json();
+    },
+  });
+
+  const { data: rcloneStatus } = useQuery({
+    queryKey: ["/db/rclone-status"],
+    queryFn: async () => {
+      const res = await apiRequest("GET", "/api/database-management/rclone-status");
+      return res.json() as Promise<{ installed: boolean; serverRunning: boolean }>;
+    },
+    refetchInterval: 5000,
+  });
+
+  useEffect(() => {
+    if (rcloneConfig && !formLoaded) {
+      setServerEnabled(rcloneConfig.serverEnabled ?? false);
+      setServerPort(rcloneConfig.serverPort ?? 8080);
+      setReceiverEnabled(rcloneConfig.receiverEnabled ?? false);
+      setReceiverSyncHour(rcloneConfig.receiverSyncHour ?? 21);
+      setSourceIp(rcloneConfig.sourceIp ?? "");
+      setSourcePort(rcloneConfig.sourcePort ?? 8080);
+      setFormLoaded(true);
+    }
+  }, [rcloneConfig, formLoaded]);
+
+  const saveMutation = useMutation({
+    mutationFn: async () => {
+      const res = await apiRequest("PUT", "/api/database-management/rclone-config", {
+        serverEnabled,
+        serverPort,
+        receiverEnabled,
+        receiverSyncHour,
+        sourceIp,
+        sourcePort,
+      });
+      return res.json();
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["/db/rclone-config"] });
+      toast({ title: "Rclone settings saved" });
+    },
+    onError: () => {
+      toast({ title: "Error", description: "Failed to save rclone settings.", variant: "destructive" });
+    },
+  });
+
+  const pullNowMutation = useMutation({
+    mutationFn: async () => {
+      const res = await apiRequest("POST", "/api/database-management/rclone-pull-now");
+      if (!res.ok) {
+        const body = await res.json();
+        throw new Error(body.details || body.error || "Pull failed");
+      }
+      return res.json();
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["/db/rclone-config"] });
+      toast({ title: "Rclone pull complete", description: "Backup files copied from source PC." });
+    },
+    onError: (err: any) => {
+      queryClient.invalidateQueries({ queryKey: ["/db/rclone-config"] });
+      toast({ title: "Rclone pull failed", description: err.message, variant: "destructive" });
+    },
+  });
+
+  const serverRunning = rcloneStatus?.serverRunning ?? false;
+
+  return (
+    <div className="space-y-6">
+      {/* ── Source PC: Serve backups via WebDAV ── */}
+      <div className="space-y-3 border rounded-lg p-4">
+        <div className="flex items-center justify-between">
+          <p className="text-sm font-semibold text-gray-800">Source PC — Serve Backups</p>
+          <div className={`flex items-center gap-1.5 text-xs ${serverRunning ? "text-green-600" : "text-gray-400"}`}>
+            <div className={`w-2 h-2 rounded-full ${serverRunning ? "bg-green-500" : "bg-gray-300"}`} />
+            {serverRunning ? "Running" : "Stopped"}
+          </div>
+        </div>
+        <p className="text-xs text-gray-500">
+          Enable this on the source PC to serve the <code>backups/</code> folder via WebDAV.
+          The backup PC will connect to this machine to pull files.
+        </p>
+
+        <div className="flex flex-wrap items-center gap-4">
+          <div className="flex items-center gap-2">
+            <Switch
+              id="rclone-server-toggle"
+              checked={serverEnabled}
+              onCheckedChange={setServerEnabled}
+            />
+            <label
+              htmlFor="rclone-server-toggle"
+              className="text-sm font-medium text-gray-700 cursor-pointer select-none"
+            >
+              Enable WebDAV server
+            </label>
+          </div>
+        </div>
+
+        <div className="space-y-1 max-w-xs">
+          <label className="text-xs font-medium text-gray-600">Port</label>
+          <Input
+            type="number"
+            placeholder="8080"
+            value={serverPort}
+            onChange={(e) => setServerPort(Number(e.target.value))}
+          />
+        </div>
+
+      </div>
+
+      {/* ── Receiver PC: Pull backups from source ── */}
+      <div className="space-y-3 border rounded-lg p-4">
+        <p className="text-sm font-semibold text-gray-800">Receiver PC — Pull Backups</p>
+        <p className="text-xs text-gray-500">
+          Enable this on the backup PC to pull backup files from the source PC's WebDAV server
+          at a scheduled time each day.
+        </p>
+
+        <div className="flex flex-wrap items-center gap-4">
+          <div className="flex items-center gap-2">
+            <Switch
+              id="rclone-receiver-toggle"
+              checked={receiverEnabled}
+              onCheckedChange={setReceiverEnabled}
+            />
+            <label
+              htmlFor="rclone-receiver-toggle"
+              className="text-sm font-medium text-gray-700 cursor-pointer select-none"
+            >
+              Enable daily pull
+            </label>
+          </div>
+
+          <div className="flex items-center gap-2">
+            <label className="text-sm text-gray-600 whitespace-nowrap">at</label>
+            <select
+              className="border rounded px-2 py-1 text-sm text-gray-700 bg-white"
+              value={receiverSyncHour}
+              onChange={(e) => setReceiverSyncHour(Number(e.target.value))}
+            >
+              {HOUR_OPTIONS.map((o) => (
+                <option key={o.value} value={o.value}>
+                  {o.label}
+                </option>
+              ))}
+            </select>
+          </div>
+        </div>
+
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+          <div className="space-y-1">
+            <label className="text-xs font-medium text-gray-600">Source PC IP</label>
+            <Input
+              placeholder="192.168.0.94"
+              value={sourceIp}
+              onChange={(e) => setSourceIp(e.target.value)}
+            />
+          </div>
+          <div className="space-y-1">
+            <label className="text-xs font-medium text-gray-600">Source PC Port</label>
+            <Input
+              type="number"
+              placeholder="8080"
+              value={sourcePort}
+              onChange={(e) => setSourcePort(Number(e.target.value))}
+            />
+          </div>
+        </div>
+
+        <div className="flex gap-2">
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => pullNowMutation.mutate()}
+            disabled={pullNowMutation.isPending || !sourceIp}
+          >
+            <RotateCcw className="h-4 w-4 mr-1" />
+            {pullNowMutation.isPending ? "Pulling..." : "Pull Now"}
+          </Button>
+        </div>
+
+        <RcloneSyncStatus />
+      </div>
+
+      {/* Save all settings */}
+      <Button
+        onClick={() => saveMutation.mutate()}
+        disabled={saveMutation.isPending}
+      >
+        {saveMutation.isPending ? "Saving..." : "Save Rclone Settings"}
+      </Button>
+    </div>
+  );
+}
+
+function RcloneSyncStatus() {
+  const { data } = useQuery({
+    queryKey: ["/db/rclone-config"],
+    queryFn: async () => {
+      const res = await apiRequest("GET", "/api/database-management/rclone-config");
+      return res.json();
+    },
+  });
+
+  if (!data?.lastSyncAt) return null;
+
+  const date = new Date(data.lastSyncAt).toLocaleString();
+  const ok = data.lastSyncStatus === "success";
+
+  return (
+    <div className={`text-xs rounded p-2 ${ok ? "bg-green-50 text-green-700" : "bg-red-50 text-red-700"}`}>
+      {ok ? "Last pull: " : "Last pull failed: "}{date}
+      {!ok && data.lastSyncError && (
+        <span className="block mt-0.5 text-red-500">{data.lastSyncError}</span>
+      )}
+    </div>
+  );
+}
+
+// ============================================================
+// Tab 2: API Key (existing behavior)
+// ============================================================
+function ApiKeyBackupSection() {
  const { toast } = useToast();
  const [showKey, setShowKey] = useState(false);
  const [showReceiverKey, setShowReceiverKey] = useState(false);
  const [confirmRegenOpen, setConfirmRegenOpen] = useState(false);

-  // receiver form state (initialised from query)
  const [enabled, setEnabled] = useState(false);
  const [syncHour, setSyncHour] = useState(0);
  const [sourceUrl, setSourceUrl] = useState("");
  const [receiverApiKey, setReceiverApiKey] = useState("");
  const [formLoaded, setFormLoaded] = useState(false);

-  // ==============================
-  // Queries
-  // ==============================
  const { data: keyData } = useQuery({
    queryKey: ["/db/network-backup-key"],
    queryFn: async () => {
@@ -72,9 +347,6 @@ export function NetworkBackupManager() {
    }
  }, [syncConfig, formLoaded]);

-  // ==============================
-  // Mutations
-  // ==============================
  const regenMutation = useMutation({
    mutationFn: async () => {
      const res = await apiRequest("POST", "/api/database-management/network-backup-key/regenerate");
@@ -132,155 +404,144 @@ export function NetworkBackupManager() {
  const maskedKey = displayKey ? "••••••••-••••-••••-••••-" + displayKey.slice(-12) : "—";

  return (
-    <Card>
-      <CardHeader>
-        <CardTitle className="flex items-center gap-2">
-          <Network className="h-5 w-5" />
-          Network Backup
-        </CardTitle>
-      </CardHeader>
-      <CardContent className="space-y-6">
+    <div className="space-y-6">
+      {/* Source role */}
+      <div className="space-y-3">
+        <p className="text-sm font-semibold text-gray-800">This Machine's Backup Key</p>
+        <p className="text-xs text-gray-500">
+          Share this key with the backup PC so it can pull a copy of this machine's
+          database. The key survives database restores (stored in a local file).
+        </p>
+        <div className="flex items-center gap-2">
+          <Input
+            readOnly
+            value={showKey ? displayKey : maskedKey}
+            className="font-mono text-sm"
+          />
+          <Button
+            variant="outline"
+            size="icon"
+            title={showKey ? "Hide key" : "Show key"}
+            onClick={() => setShowKey((v) => !v)}
+          >
+            {showKey ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
+          </Button>
+          <Button
+            variant="outline"
+            size="icon"
+            title="Copy to clipboard"
+            onClick={() => {
+              navigator.clipboard.writeText(displayKey);
+              toast({ title: "Copied to clipboard" });
+            }}
+            disabled={!displayKey}
+          >
+            <Copy className="h-4 w-4" />
+          </Button>
+          <Button
+            variant="outline"
+            size="icon"
+            title="Regenerate key"
+            onClick={() => setConfirmRegenOpen(true)}
+            disabled={regenMutation.isPending}
+          >
+            <RefreshCw className="h-4 w-4" />
+          </Button>
+        </div>
+      </div>

-        {/* ── Section A: Source role (this machine's API key) ── */}
-        <div className="space-y-3">
-          <p className="text-sm font-semibold text-gray-800">This Machine's Backup Key</p>
-          <p className="text-xs text-gray-500">
-            Share this key with the backup PC so it can pull a copy of this machine's
-            database. The key survives database restores (stored in a local file).
-          </p>
+      <div className="border-t" />
+
+      {/* Receiver role */}
+      <div className="space-y-4">
+        <p className="text-sm font-semibold text-gray-800">Sync from Another PC</p>
+        <p className="text-xs text-gray-500">
+          Configure this machine to pull a fresh copy of the database and all uploaded
+          files (patient photos, cloud storage, documents) from another PC at a scheduled
+          time each day. Enter the source PC's URL (e.g. http://192.168.0.94 — no port number) and the Backup Key shown in the source PC's Network Backup section.
+        </p>
+
+        <div className="flex flex-wrap items-center gap-4">
+          <div className="flex items-center gap-2">
+            <Switch
+              id="network-sync-toggle"
+              checked={enabled}
+              onCheckedChange={setEnabled}
+            />
+            <label
+              htmlFor="network-sync-toggle"
+              className="text-sm font-medium text-gray-700 cursor-pointer select-none"
+            >
+              Enable daily sync
+            </label>
+          </div>
+
+          <div className="flex items-center gap-2">
+            <label className="text-sm text-gray-600 whitespace-nowrap">at</label>
+            <select
+              className="border rounded px-2 py-1 text-sm text-gray-700 bg-white"
+              value={syncHour}
+              onChange={(e) => setSyncHour(Number(e.target.value))}
+            >
+              {HOUR_OPTIONS.map((o) => (
+                <option key={o.value} value={o.value}>
+                  {o.label}
+                </option>
+              ))}
+            </select>
+          </div>
+        </div>
+
+        <div className="space-y-2">
+          <label className="text-xs font-medium text-gray-600">Source PC URL</label>
+          <Input
+            placeholder="http://192.168.0.94"
+            value={sourceUrl}
+            onChange={(e) => setSourceUrl(e.target.value)}
+          />
+        </div>
+
+        <div className="space-y-2">
+          <label className="text-xs font-medium text-gray-600">Source PC API Key</label>
          <div className="flex items-center gap-2">
            <Input
-              readOnly
-              value={showKey ? displayKey : maskedKey}
-              className="font-mono text-sm"
+              type={showReceiverKey ? "text" : "password"}
+              placeholder="Paste the key from the source PC"
+              value={receiverApiKey}
+              onChange={(e) => setReceiverApiKey(e.target.value)}
            />
            <Button
              variant="outline"
              size="icon"
-              title={showKey ? "Hide key" : "Show key"}
-              onClick={() => setShowKey((v) => !v)}
+              title={showReceiverKey ? "Hide key" : "Show key"}
+              onClick={() => setShowReceiverKey((v) => !v)}
+              type="button"
            >
-              {showKey ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
-            </Button>
-            <Button
-              variant="outline"
-              size="icon"
-              title="Copy to clipboard"
-              onClick={() => {
-                navigator.clipboard.writeText(displayKey);
-                toast({ title: "Copied to clipboard" });
-              }}
-              disabled={!displayKey}
-            >
-              <Copy className="h-4 w-4" />
-            </Button>
-            <Button
-              variant="outline"
-              size="icon"
-              title="Regenerate key"
-              onClick={() => setConfirmRegenOpen(true)}
-              disabled={regenMutation.isPending}
-            >
-              <RefreshCw className="h-4 w-4" />
+              {showReceiverKey ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
            </Button>
          </div>
        </div>

-        <div className="border-t" />
-
-        {/* ── Section B: Receiver role (pull config) ── */}
-        <div className="space-y-4">
-          <p className="text-sm font-semibold text-gray-800">Sync from Another PC</p>
-          <p className="text-xs text-gray-500">
-            Configure this machine to pull a fresh copy of the database and all uploaded
-            files (patient photos, cloud storage, documents) from another PC at a scheduled
-            time each day. Enter the source PC's URL (e.g. http://192.168.0.94 — no port number) and the Backup Key shown in the source PC's Network Backup section.
-          </p>
-
-          {/* Enable toggle + time picker on same row */}
-          <div className="flex flex-wrap items-center gap-4">
-            <div className="flex items-center gap-2">
-              <Switch
-                id="network-sync-toggle"
-                checked={enabled}
-                onCheckedChange={setEnabled}
-              />
-              <label
-                htmlFor="network-sync-toggle"
-                className="text-sm font-medium text-gray-700 cursor-pointer select-none"
-              >
-                Enable daily sync
-              </label>
-            </div>
-
-            <div className="flex items-center gap-2">
-              <label className="text-sm text-gray-600 whitespace-nowrap">at</label>
-              <select
-                className="border rounded px-2 py-1 text-sm text-gray-700 bg-white"
-                value={syncHour}
-                onChange={(e) => setSyncHour(Number(e.target.value))}
-              >
-                {HOUR_OPTIONS.map((o) => (
-                  <option key={o.value} value={o.value}>
-                    {o.label}
-                  </option>
-                ))}
-              </select>
-            </div>
-          </div>
-
-          <div className="space-y-2">
-            <label className="text-xs font-medium text-gray-600">Source PC URL</label>
-            <Input
-              placeholder="http://192.168.0.94"
-              value={sourceUrl}
-              onChange={(e) => setSourceUrl(e.target.value)}
-            />
-          </div>
-
-          <div className="space-y-2">
-            <label className="text-xs font-medium text-gray-600">Source PC API Key</label>
-            <div className="flex items-center gap-2">
-              <Input
-                type={showReceiverKey ? "text" : "password"}
-                placeholder="Paste the key from the source PC"
-                value={receiverApiKey}
-                onChange={(e) => setReceiverApiKey(e.target.value)}
-              />
-              <Button
-                variant="outline"
-                size="icon"
-                title={showReceiverKey ? "Hide key" : "Show key"}
-                onClick={() => setShowReceiverKey((v) => !v)}
-                type="button"
-              >
-                {showReceiverKey ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
-              </Button>
-            </div>
-          </div>
-
-          <div className="flex gap-2">
-            <Button
-              onClick={() => saveMutation.mutate()}
-              disabled={saveMutation.isPending}
-            >
-              {saveMutation.isPending ? "Saving…" : "Save Settings"}
-            </Button>
-            <Button
-              variant="outline"
-              onClick={() => syncNowMutation.mutate()}
-              disabled={syncNowMutation.isPending || !sourceUrl || !receiverApiKey}
-              title="Pull and restore now — replaces this machine's database and uploads folder"
-            >
-              <RotateCcw className="h-4 w-4 mr-1" />
-              {syncNowMutation.isPending ? "Syncing…" : "Sync Now"}
-            </Button>
-          </div>
-
-          {/* Last sync status */}
-          <SyncStatus />
+        <div className="flex gap-2">
+          <Button
+            onClick={() => saveMutation.mutate()}
+            disabled={saveMutation.isPending}
+          >
+            {saveMutation.isPending ? "Saving..." : "Save Settings"}
+          </Button>
+          <Button
+            variant="outline"
+            onClick={() => syncNowMutation.mutate()}
+            disabled={syncNowMutation.isPending || !sourceUrl || !receiverApiKey}
+            title="Pull and restore now — replaces this machine's database and uploads folder"
+          >
+            <RotateCcw className="h-4 w-4 mr-1" />
+            {syncNowMutation.isPending ? "Syncing..." : "Sync Now"}
+          </Button>
        </div>
-      </CardContent>
+
+        <ApiKeySyncStatus />
+      </div>

      {/* Confirm regenerate dialog */}
      <AlertDialog open={confirmRegenOpen}>
@@ -303,11 +564,11 @@ export function NetworkBackupManager() {
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
-    </Card>
+    </div>
  );
 }

-function SyncStatus() {
+function ApiKeySyncStatus() {
  const { data } = useQuery({
    queryKey: ["/db/network-sync-config"],
    queryFn: async () => {
@@ -323,7 +584,7 @@ function SyncStatus() {

  return (
    <div className={`text-xs rounded p-2 ${ok ? "bg-green-50 text-green-700" : "bg-red-50 text-red-700"}`}>
-      {ok ? "✅" : "❌"} Last sync: {date}
+      {ok ? "Last sync: " : "Last sync failed: "}{date}
      {!ok && data.lastSyncError && (
        <span className="block mt-0.5 text-red-500">{data.lastSyncError}</span>
      )}
--- a/package.json
+++ b/package.json
@@ -13,7 +13,7 @@
    "db:seed": "npx ts-node packages/db/prisma/seed.ts",
    "db:studio": "npx prisma studio --config=packages/db/prisma/prisma.config.ts",
    "setup:env": "shx cp packages/db/prisma/.env.example packages/db/prisma/.env && shx cp apps/Frontend/.env.example apps/Frontend/.env && shx cp apps/Backend/.env.example apps/Backend/.env && shx cp apps/PatientDataExtractorService/.env.example apps/PatientDataExtractorService/.env && shx cp apps/SeleniumService/.env.example apps/SeleniumService/.env && shx cp apps/PaymentOCRService/.env.example apps/PaymentOCRService/.env",
-    "postinstall": "npm --prefix apps/PatientDataExtractorService run postinstall && npm --prefix apps/PaymentOCRService run postinstall"
+    "postinstall": "npm --prefix apps/PatientDataExtractorService run postinstall && npm --prefix apps/PaymentOCRService run postinstall && bash scripts/install-rclone.sh"
  },
  "prisma": {
    "seed": "ts-node packages/db/prisma/seed.ts"
--- a/scripts/install-rclone.sh
+++ b/scripts/install-rclone.sh
@@ -0,0 +1,23 @@
+#!/bin/bash
+# Install rclone if not already present
+if command -v rclone &> /dev/null; then
+  echo "rclone is already installed: $(rclone version | head -1)"
+  exit 0
+fi
+
+echo "Installing rclone..."
+if command -v curl &> /dev/null; then
+  curl -s https://rclone.org/install.sh | sudo bash
+elif command -v wget &> /dev/null; then
+  wget -qO- https://rclone.org/install.sh | sudo bash
+else
+  echo "WARNING: Neither curl nor wget found. Please install rclone manually:"
+  echo "  https://rclone.org/install/"
+  exit 0
+fi
+
+if command -v rclone &> /dev/null; then
+  echo "rclone installed successfully: $(rclone version | head -1)"
+else
+  echo "WARNING: rclone installation may have failed. Please install manually."
+fi