show credential pw

apps/Frontend/src/components/layout/sidebar.tsx

@@ -16,10 +16,13 @@ import {
 import { cn } from "@/lib/utils";
 import { useMemo } from "react";
 import { useSidebar } from "@/components/ui/sidebar";
+import { useAuth } from "@/hooks/use-auth";
 
 export function Sidebar() {
   const [location] = useLocation();
   const { state, openMobile, setOpenMobile } = useSidebar(); // "expanded" | "collapsed"
+  const { user } = useAuth();
+  const isAdmin = user?.username === "admin";
 
   const navItems = useMemo(
     () => [
@@ -82,6 +85,7 @@ export function Sidebar() {
         name: "Settings",
         path: "/settings",
         icon: <Settings className="h-5 w-5" />,
+        adminOnly: true,
       },
     ],
     []
@@ -107,7 +111,7 @@ export function Sidebar() {
     >
       <div className="p-2">
         <nav role="navigation" aria-label="Main">
-          {navItems.map((item) => (
+          {navItems.filter((item) => !item.adminOnly || isAdmin).map((item) => (
             <div key={item.path}>
               <Link to={item.path} onClick={() => setOpenMobile(false)}>
                 <div

apps/Frontend/src/components/settings/InsuranceCredForm.tsx

@@ -2,6 +2,7 @@ import { useEffect, useState } from "react";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { apiRequest } from "@/lib/queryClient";
 import { toast } from "@/hooks/use-toast";
+import { Eye, EyeOff } from "lucide-react";
 
 type CredentialFormProps = {
   onClose: () => void;
@@ -18,6 +19,7 @@ export function CredentialForm({ onClose, userId, defaultValues }: CredentialFor
   const [siteKey, setSiteKey] = useState(defaultValues?.siteKey || "");
   const [username, setUsername] = useState(defaultValues?.username || "");
   const [password, setPassword] = useState(defaultValues?.password || "");
+  const [showPassword, setShowPassword] = useState(false);
 
   const queryClient = useQueryClient();
 
@@ -111,12 +113,22 @@ export function CredentialForm({ onClose, userId, defaultValues }: CredentialFor
           </div>
           <div>
             <label className="block text-sm font-medium">Password</label>
-            <input
-              type="password"
-              value={password}
-              onChange={(e) => setPassword(e.target.value)}
-              className="mt-1 p-2 border rounded w-full"
-            />
+            <div className="relative mt-1">
+              <input
+                type={showPassword ? "text" : "password"}
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                className="p-2 border rounded w-full pr-10"
+              />
+              <button
+                type="button"
+                onClick={() => setShowPassword((prev) => !prev)}
+                className="absolute inset-y-0 right-2 flex items-center text-gray-500 hover:text-gray-700"
+                tabIndex={-1}
+              >
+                {showPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
+              </button>
+            </div>
           </div>
           <div className="flex justify-end gap-2">
             <button