page added

apps/Frontend/src/components/insurance/credentials-modal.tsx

@@ -0,0 +1,121 @@
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+} from "@/components/ui/dialog";
+import { Eye, EyeOff } from "lucide-react";
+
+interface CredentialsModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onSubmit: (credentials: { username: string; password: string }) => void;
+  providerName: string;
+  isLoading?: boolean;
+}
+
+export function CredentialsModal({ 
+  isOpen, 
+  onClose, 
+  onSubmit, 
+  providerName,
+  isLoading = false 
+}: CredentialsModalProps) {
+  const [username, setUsername] = useState("");
+  const [password, setPassword] = useState("");
+  const [showPassword, setShowPassword] = useState(false);
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (username && password) {
+      onSubmit({ username, password });
+    }
+  };
+
+  const handleClose = () => {
+    setUsername("");
+    setPassword("");
+    setShowPassword(false);
+    onClose();
+  };
+
+  return (
+    <Dialog open={isOpen} onOpenChange={handleClose}>
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle>Insurance Portal Login</DialogTitle>
+          <DialogDescription>
+            Enter your credentials for {providerName} insurance portal to check patient eligibility automatically.
+          </DialogDescription>
+        </DialogHeader>
+        
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div className="space-y-2">
+            <Label htmlFor="username">Username</Label>
+            <Input
+              id="username"
+              type="text"
+              value={username}
+              onChange={(e) => setUsername(e.target.value)}
+              placeholder="Enter your username"
+              required
+              disabled={isLoading}
+            />
+          </div>
+          
+          <div className="space-y-2">
+            <Label htmlFor="password">Password</Label>
+            <div className="relative">
+              <Input
+                id="password"
+                type={showPassword ? "text" : "password"}
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                placeholder="Enter your password"
+                required
+                disabled={isLoading}
+              />
+              <Button
+                type="button"
+                variant="ghost"
+                size="sm"
+                className="absolute right-0 top-0 h-full px-3 py-2 hover:bg-transparent"
+                onClick={() => setShowPassword(!showPassword)}
+                disabled={isLoading}
+              >
+                {showPassword ? (
+                  <EyeOff className="h-4 w-4" />
+                ) : (
+                  <Eye className="h-4 w-4" />
+                )}
+              </Button>
+            </div>
+          </div>
+          
+          <DialogFooter className="flex gap-2">
+            <Button
+              type="button"
+              variant="outline"
+              onClick={handleClose}
+              disabled={isLoading}
+            >
+              Cancel
+            </Button>
+            <Button
+              type="submit"
+              disabled={!username || !password || isLoading}
+            >
+              {isLoading ? "Checking..." : "Check Eligibility"}
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}

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

@@ -1,5 +1,5 @@
 import { Link, useLocation } from "wouter";
-import { LayoutDashboard, Users, Calendar, Settings, FileCheck, ClipboardCheck, CreditCard, FolderOpen } from "lucide-react";
+import { LayoutDashboard, Users, Calendar, Settings, FileCheck, Shield, CreditCard, FolderOpen } from "lucide-react";
 
 import { cn } from "@/lib/utils";
 
@@ -27,16 +27,16 @@ export function Sidebar({ isMobileOpen, setIsMobileOpen }: SidebarProps) {
       path: "/patients",
       icon: <Users className="h-5 w-5" />,
     },
+    {
+      name: "Insurance Eligibility",
+      path: "/insurance-eligibility",
+      icon: <Shield className="h-5 w-5" />,
+    },
     {
       name: "Claims",
       path: "/claims",
       icon: <FileCheck className="h-5 w-5" />,
     },
-    {
-      name: "Pre-authorizations",
-      path: "/preauthorizations",
-      icon: <ClipboardCheck className="h-5 w-5" />,
-    },
     {
       name: "Payments",
       path: "/payments",