From cee84bcd6117605b13076b7253057f4844f9c9c7 Mon Sep 17 00:00:00 2001
From: Summit Dental Care <admin@mydentalofficemanagement.com>
Date: Mon, 22 Jun 2026 23:34:07 -0400
Subject: [PATCH] feat: add eye icon toggle to source PC API key field

Allows verifying the pasted key is correct before saving.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../network-backup-manager.tsx                | 24 ++++++++++++++-----
 1 file changed, 18 insertions(+), 6 deletions(-)

diff --git a/apps/Frontend/src/components/database-management/network-backup-manager.tsx b/apps/Frontend/src/components/database-management/network-backup-manager.tsx
index 56b0baf3..42802d00 100644
--- a/apps/Frontend/src/components/database-management/network-backup-manager.tsx
+++ b/apps/Frontend/src/components/database-management/network-backup-manager.tsx
@@ -33,6 +33,7 @@ const HOUR_OPTIONS = Array.from({ length: 24 }, (_, h) => {
 export function NetworkBackupManager() {
   const { toast } = useToast();
   const [showKey, setShowKey] = useState(false);
+  const [showReceiverKey, setShowReceiverKey] = useState(false);
   const [confirmRegenOpen, setConfirmRegenOpen] = useState(false);
 
   // receiver form state (initialised from query)
@@ -239,12 +240,23 @@ export function NetworkBackupManager() {
 
           <div className="space-y-2">
             <label className="text-xs font-medium text-gray-600">Source PC API Key</label>
-            <Input
-              type="password"
-              placeholder="Paste the key from the source PC"
-              value={receiverApiKey}
-              onChange={(e) => setReceiverApiKey(e.target.value)}
-            />
+            <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">