Refactor Health Profile Page and enhance Utilization Model Test inputs

- Reorganized import statements for better readability in the health profile page.
- Improved state management and effect hooks for member selection and utilization display.
- Updated the utilization model test page to replace numeric inputs with dropdowns and radio buttons for better user experience.
- Added validation for family size and K6 distress score inputs to ensure valid ranges.
- Enhanced labels for clarity and consistency across the input fields.
- Added button on Health Profile page that links to the new prediction page

Author: ojoffe

app/health-profile/page.tsx

@@ -1,89 +1,111 @@
-"use client"
-
-import * as React from "react"
-import { useState, useMemo, useEffect, useCallback } from "react"
-import { SidebarInset, SidebarTrigger } from "@/components/ui/sidebar"
-import { Separator } from "@/components/ui/separator"
-import { Breadcrumb, BreadcrumbItem, BreadcrumbList, BreadcrumbPage } from "@/components/ui/breadcrumb"
-import { Button } from "@/components/ui/button"
-import { Plus, Trash2 } from "lucide-react"
-import { useHealthProfileStore, type Member } from "@/lib/health-profile-store"
-import { calculateHealthcareUtilization } from "@/lib/utilization-engine"
-import { useScreenReaderAnnouncement, ScreenReaderAnnouncement } from "@/lib/hooks/use-screen-reader"
-import { MemberCard, UtilizationAnalysis } from "@/components/health-profile"
+"use client";
+
+import { MemberCard, UtilizationAnalysis } from "@/components/health-profile";
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbList,
+  BreadcrumbPage,
+} from "@/components/ui/breadcrumb";
+import { Button } from "@/components/ui/button";
+import { Separator } from "@/components/ui/separator";
+import { SidebarInset, SidebarTrigger } from "@/components/ui/sidebar";
+import { useHealthProfileStore, type Member } from "@/lib/health-profile-store";
+import {
+  ScreenReaderAnnouncement,
+  useScreenReaderAnnouncement,
+} from "@/lib/hooks/use-screen-reader";
+import { calculateHealthcareUtilization } from "@/lib/utilization-engine";
+import { Plus, Trash2 } from "lucide-react";
+import * as React from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 
 export default function HealthProfilePage() {
-  const { members, addMember, removeMember, updateMember, clearProfile } = useHealthProfileStore()
-  const [showUtilization, setShowUtilization] = useState(false)
-  const [selectedMemberId, setSelectedMemberId] = useState<string>("")
-  const { announce, announcementRef } = useScreenReaderAnnouncement()
-  const [isHydrated, setIsHydrated] = useState(false)
-  const [collapsedCards, setCollapsedCards] = useState<Record<string, boolean>>({})
-  
+  const { members, addMember, removeMember, updateMember, clearProfile } =
+    useHealthProfileStore();
+  const [showUtilization, setShowUtilization] = useState(false);
+  const [selectedMemberId, setSelectedMemberId] = useState<string>("");
+  const { announce, announcementRef } = useScreenReaderAnnouncement();
+  const [isHydrated, setIsHydrated] = useState(false);
+  const [collapsedCards, setCollapsedCards] = useState<Record<string, boolean>>(
+    {}
+  );
+
   // Handle hydration
   useEffect(() => {
-    setIsHydrated(true)
-  }, [])
-  
+    setIsHydrated(true);
+  }, []);
+
   // Calculate utilization for all members
   const memberUtilizations = useMemo(() => {
-    return members.map(member => ({
+    return members.map((member) => ({
       memberId: member.id,
       memberName: member.age ? `Member (Age ${member.age})` : "Member",
       utilization: member.age ? calculateHealthcareUtilization(member) : null,
-      hasConditions: member.conditions && member.conditions.length > 0 && !member.conditions.includes("NONE"),
-      hasBasicData: Boolean(member.age && member.age.trim() !== '')
-    }))
-  }, [members])
-  
+      hasConditions:
+        member.conditions &&
+        member.conditions.length > 0 &&
+        !member.conditions.includes("NONE"),
+      hasBasicData: Boolean(member.age && member.age.trim() !== ""),
+    }));
+  }, [members]);
+
   // Set default selected member when members change
   React.useEffect(() => {
-    if (!selectedMemberId || !members.find(m => m.id === selectedMemberId)) {
-      const firstMemberWithData = members.find(m => m.age && m.age.trim() !== '')
-      setSelectedMemberId(firstMemberWithData?.id || members[0]?.id || "")
+    if (!selectedMemberId || !members.find((m) => m.id === selectedMemberId)) {
+      const firstMemberWithData = members.find(
+        (m) => m.age && m.age.trim() !== ""
+      );
+      setSelectedMemberId(firstMemberWithData?.id || members[0]?.id || "");
     }
-  }, [members, selectedMemberId])
-  
+  }, [members, selectedMemberId]);
+
   // Auto-show utilization if any member has sufficient data
   React.useEffect(() => {
-    const hasMemberWithData = memberUtilizations.some(mu => mu.utilization && mu.hasBasicData)
+    const hasMemberWithData = memberUtilizations.some(
+      (mu) => mu.utilization && mu.hasBasicData
+    );
     if (hasMemberWithData) {
-      setShowUtilization(true)
+      setShowUtilization(true);
     }
-  }, [memberUtilizations])
-  
+  }, [memberUtilizations]);
+
   // Calculate profile completeness for basic profile
   const calculateBasicCompleteness = (member: Member) => {
     // Demographics scoring (age, gender, height, weight)
     const demographics = [
-      member.age && member.age.trim() !== '' ? 25 : 0,
-      member.gender && member.gender !== 'prefer_not_to_say' ? 25 : 0,
+      member.age && member.age.trim() !== "" ? 25 : 0,
+      member.gender && member.gender !== "prefer_not_to_say" ? 25 : 0,
       member.height && member.height > 0 ? 25 : 0,
       member.weight && member.weight > 0 ? 25 : 0,
-    ].reduce((a, b) => a + b, 0)
-    
+    ].reduce((a, b) => a + b, 0);
+
     // Conditions scoring - 100% if at least one condition is added OR explicitly marked as "NONE"
-    const conditions = (member.conditions && member.conditions.length > 0) ? 100 : 0
-    
+    const conditions =
+      member.conditions && member.conditions.length > 0 ? 100 : 0;
+
     // Medications scoring - 100% if at least one medication is added OR explicitly marked as "NONE"
-    const medications = (member.medications && member.medications.length > 0) ? 100 : 0
-    
+    const medications =
+      member.medications && member.medications.length > 0 ? 100 : 0;
+
     // History scoring - 100% if allergies are specified (including "NONE")
-    const history = (member.allergies && member.allergies.length > 0) ? 100 : 0
-    
+    const history = member.allergies && member.allergies.length > 0 ? 100 : 0;
+
     // Preferences scoring (lifestyle factors only, medical services optional)
     // Count as answered if user has selected any value
     const lifestyleFactors = [
       member.smokingStatus !== undefined ? 1 : 0,
       member.alcoholUse !== undefined ? 1 : 0,
       member.exerciseFrequency !== undefined ? 1 : 0,
-    ]
-    const answeredCount = lifestyleFactors.reduce((a, b) => a + b, 0)
-    const preferences = answeredCount === 3 ? 100 : Math.round((answeredCount / 3) * 100)
-    
+    ];
+    const answeredCount = lifestyleFactors.reduce((a, b) => a + b, 0);
+    const preferences =
+      answeredCount === 3 ? 100 : Math.round((answeredCount / 3) * 100);
+
     // Calculate overall score (average of all categories, excluding providers)
-    const overall = (demographics + conditions + medications + history + preferences) / 5
-    
+    const overall =
+      (demographics + conditions + medications + history + preferences) / 5;
+
     return {
       overall: Math.round(overall),
       categories: {
@@ -93,39 +115,45 @@ export default function HealthProfilePage() {
         providers: 0, // Not used but kept for compatibility
         history: Math.round(history),
         preferences: Math.round(preferences),
-      }
-    }
-  }
+      },
+    };
+  };
 
   // Handle member addition with announcement
   const handleAddMember = () => {
-    addMember()
-    announce(`New family member added. Total members: ${members.length + 1}`)
-  }
+    addMember();
+    announce(`New family member added. Total members: ${members.length + 1}`);
+  };
 
   // Handle member removal with announcement
-  const handleRemoveMember = useCallback((memberId: string, index: number) => {
-    removeMember(memberId)
-    announce(`Member ${index + 1} removed from health profile`)
-  }, [removeMember, announce])
+  const handleRemoveMember = useCallback(
+    (memberId: string, index: number) => {
+      removeMember(memberId);
+      announce(`Member ${index + 1} removed from health profile`);
+    },
+    [removeMember, announce]
+  );
 
   // Toggle card collapse state
   const toggleCardCollapse = useCallback((memberId: string) => {
-    setCollapsedCards(prev => ({
+    setCollapsedCards((prev) => ({
       ...prev,
-      [memberId]: !prev[memberId]
-    }))
-  }, [])
+      [memberId]: !prev[memberId],
+    }));
+  }, []);
 
   // Check if card is collapsed (default to open for first member, closed for others)
   const isCardCollapsed = (memberId: string, index: number) => {
-    return collapsedCards[memberId] ?? (index > 0)
-  }
+    return collapsedCards[memberId] ?? index > 0;
+  };
 
   // Memoize the updateMember callback to prevent infinite loops
-  const handleUpdateMember = useCallback((memberId: string, updates: Partial<Member>) => {
-    updateMember(memberId, updates)
-  }, [updateMember])
+  const handleUpdateMember = useCallback(
+    (memberId: string, updates: Partial<Member>) => {
+      updateMember(memberId, updates);
+    },
+    [updateMember]
+  );
 
   return (
     <SidebarInset>
@@ -146,20 +174,38 @@ export default function HealthProfilePage() {
         <div className="max-w-7xl mx-auto px-4 py-8">
           <div className="mb-8 flex justify-between items-start">
             <div>
-              <h1 className="text-3xl font-bold text-gray-900 mb-2">Health Profile</h1>
+              <h1 className="text-3xl font-bold text-gray-900 mb-2">
+                Health Profile
+              </h1>
               <p className="text-gray-600">
-                Add your healthcare information to get personalized insurance analysis and recommendations.
+                Add your healthcare information to get personalized insurance
+                analysis and recommendations.
               </p>
             </div>
-            <Button variant="outline" onClick={clearProfile} className="text-red-600 hover:text-red-700">
-              <Trash2 className="w-4 h-4 mr-2" />
-              Clear All
-            </Button>
+            <div className="flex gap-3">
+              <Button
+                variant="outline"
+                onClick={() =>
+                  (window.location.href = "/utilization-model-test")
+                }
+                className="text-blue-600 hover:text-blue-700 border-blue-200 hover:border-blue-300"
+              >
+                Try our new model here
+              </Button>
+              <Button
+                variant="outline"
+                onClick={clearProfile}
+                className="text-red-600 hover:text-red-700"
+              >
+                <Trash2 className="w-4 h-4 mr-2" />
+                Clear All
+              </Button>
+            </div>
           </div>
-          
-                    <div className="space-y-4 mb-6">
+
+          <div className="space-y-4 mb-6">
             {members.map((member, index) => (
-              <MemberCard 
+              <MemberCard
                 key={member.id}
                 member={member}
                 index={index}
@@ -172,17 +218,17 @@ export default function HealthProfilePage() {
             ))}
           </div>
 
-          <Button 
-            onClick={handleAddMember} 
-            variant="outline" 
+          <Button
+            onClick={handleAddMember}
+            variant="outline"
             className="w-full mb-6 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
             aria-label="Add new family member to health profile"
           >
             <Plus className="w-4 h-4 mr-2" />
             Add Family Member
           </Button>
 
-           {/* Profile Completeness Summary */}
+          {/* Profile Completeness Summary */}
           {/* {isHydrated && members.length > 0 && members[0] && (
             <div className="mb-6">
               <ProfileCompleteness 
@@ -194,15 +240,16 @@ export default function HealthProfilePage() {
           )} */}
 
           <div className="flex justify-between items-center pt-4">
-            <p className="text-sm text-gray-500">Your health profile is automatically saved to your browser</p>
+            <p className="text-sm text-gray-500">
+              Your health profile is automatically saved to your browser
+            </p>
             <div className="text-sm text-gray-500">
-              {members.length} member{members.length !== 1 ? "s" : ""} in profile
+              {members.length} member{members.length !== 1 ? "s" : ""} in
+              profile
             </div>
           </div>
 
-          
-          
-          <UtilizationAnalysis 
+          <UtilizationAnalysis
             memberUtilizations={memberUtilizations}
             members={members}
             showUtilization={showUtilization}
@@ -213,5 +260,5 @@ export default function HealthProfilePage() {
         </div>
       </div>
     </SidebarInset>
-  )
-}
+  );
+}