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>
This commit is contained in:
ff
@@ -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>
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user