New Patient Search and Register UI

package.json

@@ -58,13 +58,13 @@
     "@pnotify/core": "^5.2.0",
     "@pnotify/mobile": "^5.2.0",
     "@radix-ui/react-alert-dialog": "^1.1.2",
-    "@radix-ui/react-checkbox": "^1.1.2",
+    "@radix-ui/react-checkbox": "^1.1.3",
     "@radix-ui/react-dialog": "^1.1.2",
     "@radix-ui/react-dropdown-menu": "^2.1.2",
     "@radix-ui/react-icons": "^1.3.2",
     "@radix-ui/react-label": "^2.1.0",
     "@radix-ui/react-popover": "^1.1.2",
-    "@radix-ui/react-radio-group": "^1.2.1",
+    "@radix-ui/react-radio-group": "^1.2.2",
     "@radix-ui/react-scroll-area": "^1.2.2",
     "@radix-ui/react-select": "^2.1.2",
     "@radix-ui/react-separator": "^1.1.0",
@@ -93,7 +93,7 @@
     "events": "^3.3.0",
     "hi-profiles": "^1.1.0",
     "i18next": "^23.16.4",
-    "i18next-browser-languagedetector": "^8.0.2",
+    "i18next-browser-languagedetector": "^8.0.0",
     "i18next-http-backend": "^3.0.1",
     "lodash-es": "^4.17.21",
     "next-themes": "^0.4.3",

public/locale/en.json

@@ -64,7 +64,7 @@
   "DOMESTIC_HEALTHCARE_SUPPORT__PAID_CAREGIVER": "Paid caregiver",
   "GENDER__1": "Male",
   "GENDER__2": "Female",
-  "GENDER__3": "Non-binary",
+  "GENDER__3": "Transgender",
   "HEARTBEAT_RHYTHM__IRREGULAR": "Irregular",
   "HEARTBEAT_RHYTHM__REGULAR": "Regular",
   "HEARTBEAT_RHYTHM__UNKNOWN": "Unknown",
@@ -335,8 +335,11 @@
   "admitted_on": "Admitted On",
   "advanced_filters": "Advanced Filters",
   "age": "Age",
+  "age_input_warning": "While entering a patient's age is an option, please note that only the year of birth will be captured from this information.",
+  "age_input_warning_bold": "Recommended only when the patient's date of birth is unknown",
   "all_changes_have_been_saved": "All changes have been saved",
   "all_details": "All Details",
+  "all_patients": "All Patients",
   "allergies": "Allergies",
   "allow_transfer": "Allow Transfer",
   "allowed_formats_are": "Allowed formats are",
@@ -621,6 +624,7 @@
   "date_of_result": "Covid confirmation date",
   "date_of_return": "Date of Return",
   "date_of_test": "Date of sample collection for Covid testing",
+  "day": "Day",
   "days": "Days",
   "death_report": "Death Report",
   "delete": "Delete",
@@ -671,6 +675,7 @@
   "disease_status": "Disease status",
   "district": "District",
   "district_program_management_supporting_unit": "District Program Management Supporting Unit",
+  "dob": "DOB",
   "dob_format": "Please enter date in DD/MM/YYYY format",
   "doc_will_visit_patient": "will visit the patient at the scheduled time.",
   "doctor_experience_error": "Please enter a valid number between 0 and 100.",
@@ -723,8 +728,10 @@
   "emergency_contact": "Emergency Contact",
   "emergency_contact_number": "Emergency Contact Number",
   "emergency_contact_person_name": "Emergency Contact Person Name",
+  "emergency_contact_person_name_details": "Emergency contact person (Father, Mother, Spouse, Sibling, Friend)",
   "emergency_contact_person_name_volunteer": "Emergency Contact Person Name (Volunteer)",
   "emergency_contact_volunteer": "Emergency Contact (Volunteer)",
+  "emergency_phone_number": "Emergency Phone Number",
   "empty_date_time": "--:-- --; --/--/----",
   "encounter_date_field_label__A": "Date & Time of Admission to the Facility",
   "encounter_date_field_label__DC": "Date & Time of Domiciliary Care commencement",
@@ -825,6 +832,7 @@
   "full_name": "Full Name",
   "full_screen": "Full Screen",
   "gender": "Gender",
+  "general_info_detail": "Provide the patient's personal details, including name, date of birth, gender, and contact information for accurate identification and communication.",
   "generate_link_abha": "Generate/Link ABHA Number",
   "generate_report": "Generate Report",
   "generated_summary_caution": "This is a computer generated summary using the information captured in the CARE system.",
@@ -889,9 +897,11 @@
   "insurance__insurer_name": "Insurer Name",
   "insurance__member_id": "Member ID",
   "insurance__policy_name": "Policy ID / Policy Name",
+  "insurance_details_detail": "Include details of all the Insurance Policies held by the Patient for smooth insurance processing",
   "insurer_name_required": "Insurer Name is required",
   "international_mobile": "International Mobile",
   "invalid_asset_id_msg": "Oops! The asset ID you entered does not appear to be valid.",
+  "invalid_date_format": "Invalid date format, expected {{format}}",
   "invalid_email": "Please enter a valid email address",
   "invalid_ip_address": "Invalid IP Address",
   "invalid_link_msg": "It appears that the password reset link you have used is either invalid or expired. Please request a new password reset link.",
@@ -941,6 +951,7 @@
   "kasp_enabled_date": "{{kasp_string}} enabled date",
   "label": "Label",
   "landline": "Indian landline",
+  "landmark": "Landmark",
   "language_selection": "Language Selection",
   "languages": "Languages",
   "last_administered": "Last administered",
@@ -1034,6 +1045,7 @@
   "modified_date": "Modified Date",
   "modified_on": "Modified On",
   "monitor": "Monitor",
+  "month": "Month",
   "more_details": "More details",
   "more_info": "More Info",
   "morning_slots": "Morning Slots",
@@ -1065,6 +1077,7 @@
   "no_facilities": "No Facilities found",
   "no_files_found": "No {{type}} files found",
   "no_home_facility": "No home facility",
+  "no_home_facility_found": "No home facility found",
   "no_image_found": "No image found",
   "no_investigation": "No investigation Reports found",
   "no_investigation_suggestions": "No Investigation Suggestions",
@@ -1187,9 +1200,13 @@
   "patient_registration__contact": "Emergency Contact",
   "patient_registration__gender": "Gender",
   "patient_registration__name": "Name",
+  "patient_registration_error": "Could not register patient",
+  "patient_registration_success": "Patient Registered Successfuly",
   "patient_state": "Patient State",
   "patient_status": "Patient Status",
   "patient_transfer_birth_match_note": "Note: Year of birth must match the patient to process the transfer request.",
+  "patient_update_error": "Could not update patient",
+  "patient_update_success": "Patient Updated Sucessfuly",
   "patients": "Patients",
   "permanent_address": "Permanent Address",
   "permission_denied": "You do not have permission to perform this action",
@@ -1201,7 +1218,9 @@
   "phone_no": "Phone no.",
   "phone_number": "Phone Number",
   "phone_number_at_current_facility": "Phone Number of Contact person at current Facility",
+  "phone_number_min_error": "Phone number must be at least 10 characters long",
   "pincode": "Pincode",
+  "pincode_autofill": "State and District auto-filled from Pincode",
   "please_assign_bed_to_patient": "Please assign a bed to this patient",
   "please_check_your_messages": "Please check your messages",
   "please_confirm_password": "Please confirm your new password.",
@@ -1255,6 +1274,7 @@
   "preset_updated": "Preset updated",
   "prev_sessions": "Prev Sessions",
   "primary_ph_no": "Primary Ph No.",
+  "primary_phone_no": "Primary ph. no.",
   "principal": "Principal",
   "principal_diagnosis": "Principal diagnosis",
   "print": "Print",
@@ -1373,6 +1393,7 @@
   "search_icd11_placeholder": "Search for ICD-11 Diagnoses",
   "search_investigation_placeholder": "Search Investigation & Groups",
   "search_patient": "Search Patient",
+  "search_patients": "Search Patients",
   "search_resource": "Search Resource",
   "see_attachments": "See Attachments",
   "select": "Select",
@@ -1431,6 +1452,7 @@
   "skill_added_successfully": "Skill added successfully",
   "skills": "Skills",
   "social_profile": "Social Profile",
+  "social_profile_detail": "Include occupation, ration card category, socioeconomic status, and 
domestic healthcare support for a complete profile.",
   "socioeconomic_status": "Socioeconomic status",
   "software_update": "Software Update",
   "something_went_wrong": "Something went wrong..!",
@@ -1476,6 +1498,7 @@
   "time": "Time",
   "titrate_dosage": "Titrate Dosage",
   "to_be_conducted": "To be conducted",
+  "to_proceed_with_registration": "To proceed with registration, please create a new patient.",
   "total_amount": "Total Amount",
   "total_beds": "Total Beds",
   "total_patients": "Total Patients",
@@ -1501,6 +1524,7 @@
   "type_b_cylinders": "B Type Cylinders",
   "type_c_cylinders": "C Type Cylinders",
   "type_d_cylinders": "D Type Cylinders",
+  "type_patient_name": "Type Patient Name",
   "type_to_search": "Type to search",
   "type_your_comment": "Type your comment",
   "type_your_reason_here": "Type your reason here",
@@ -1560,11 +1584,14 @@
   "upload_headings__supporting_info": "Upload Supporting Info",
   "upload_report": "Upload Report",
   "uploading": "Uploading",
+  "use_address_as_permanent": "Use this address for permanent address",
   "use_existing_abha_address": "Use Existing ABHA Address",
+  "use_phone_number_for_emergency": "Use this phone number for emergency contact",
   "user_add_error": "Error while adding User",
   "user_added_successfully": "User added successfully",
   "user_delete_error": "Error while deleting User",
   "user_deleted_successfully": "User Deleted Successfully",
+  "user_deleted_successfuly": "User Deleted Successfuly",
   "user_details": "User Details",
   "user_details_update_error": "Error while updating user details",
   "user_details_update_success": "User details updated successfully",
@@ -1622,6 +1649,7 @@
   "voice_autofill": "Voice Autofill",
   "volunteer_assigned": "Volunteer assigned successfully",
   "volunteer_contact": "Volunteer Contact",
+  "volunteer_contact_detail": "Provide the name and contact details of a volunteer who can assist 
the patient in emergencies. This should be someone outside the family.",
   "volunteer_unassigned": "Volunteer unassigned successfully",
   "volunteer_update": "Volunteer updated successfully",
   "ward": "Ward",
@@ -1634,6 +1662,7 @@
   "width": "Width ({{unit}})",
   "with": "with",
   "working_status": "Working Status",
+  "year": "Year",
   "year_of_birth": "Year of Birth",
   "years": "years",
   "years_of_experience": "Years of Experience",

src/CAREUI/misc/SectionNavigator.tsx

@@ -0,0 +1,78 @@
+import { useEffect, useState } from "react";
+
+import { cn } from "@/lib/utils";
+
+import { Button } from "@/components/ui/button";
+
+export default function SectionNavigator(props: {
+  sections: { label: string; id: string }[];
+  className?: string;
+}) {
+  const { sections, className } = props;
+
+  const [activeSection, setActiveSection] = useState<string | null>(null);
+
+  useEffect(() => {
+    const updateActiveSection = () => {
+      sections.forEach((section) => {
+        const element = document.getElementById(section.id);
+        if (element) {
+          const rect = element.getBoundingClientRect();
+          if (rect.top >= 0 && rect.bottom <= window.innerHeight) {
+            setActiveSection(section.id);
+          }
+        }
+      });
+    };
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting) {
+            setActiveSection(entry.target.id);
+          }
+        });
+      },
+      { rootMargin: "0px 0px -80% 0px", threshold: 0.1 },
+    );
+
+    sections.forEach((section) => {
+      const element = document.getElementById(section.id);
+      if (element) {
+        observer.observe(element);
+      }
+    });
+
+    updateActiveSection(); // Update on page load
+
+    return () => {
+      sections.forEach((section) => {
+        const element = document.getElementById(section.id);
+        if (element) {
+          observer.unobserve(element);
+        }
+      });
+    };
+  }, [sections]);
+
+  return (
+    <div className={cn("sticky top-4 left-0 flex flex-col w-52", className)}>
+      {sections.map((section) => (
+        <Button
+          className={cn(
+            "justify-start bg-transparent shadow-none text-gray-700 hover:bg-black/5",
+            activeSection === section.id && "text-primary-500 font-semibold",
+          )}
+          onClick={() => {
+            const element = document.getElementById(section.id);
+            if (element) {
+              element.scrollIntoView({ behavior: "smooth" });
+            }
+          }}
+        >
+          {section.label}
+        </Button>
+      ))}
+    </div>
+  );
+}

src/Routers/routes/PatientRoutes.tsx

@@ -2,23 +2,27 @@ import DeathReport from "@/components/DeathReport/DeathReport";
 import InvestigationReports from "@/components/Facility/Investigations/Reports";
 import FileUploadPage from "@/components/Patient/FileUploadPage";
 import { InsuranceDetails } from "@/components/Patient/InsuranceDetails";
-import { PatientManager } from "@/components/Patient/ManagePatients";
 import { patientTabs } from "@/components/Patient/PatientDetailsTab";
 import { PatientHome } from "@/components/Patient/PatientHome";
+import PatientIndex from "@/components/Patient/PatientIndex";
 import PatientNotes from "@/components/Patient/PatientNotes";
-import { PatientRegister } from "@/components/Patient/PatientRegister";
+import PatientRegistration from "@/components/Patient/PatientRegistration";
 
 import { AppRoutes } from "@/Routers/AppRouter";
 
 const PatientRoutes: AppRoutes = {
-  "/patients": () => <PatientManager />,
+  //"/patients": () => <PatientManager />,
+  "/patients": () => <PatientIndex />,
   "/patient/:id": ({ id }) => <PatientHome id={id} page="demography" />,
   "/patient/:id/investigation_reports": ({ id }) => (
     <InvestigationReports id={id} />
   ),
-  "/facility/:facilityId/patient": ({ facilityId }) => (
-    <PatientRegister facilityId={facilityId} />
+  "/facility/:facilityId/register-patient": ({ facilityId }) => (
+    <PatientRegistration facilityId={facilityId} />
   ),
+  // "/facility/:facilityId/patient": ({ facilityId }) => (
+  //   <PatientRegister facilityId={facilityId} />
+  // ),
   "/facility/:facilityId/patient/:id": ({ facilityId, id }) => (
     <PatientHome facilityId={facilityId} id={id} page="demography" />
   ),
@@ -33,7 +37,7 @@ const PatientRoutes: AppRoutes = {
     <InsuranceDetails facilityId={facilityId} id={id} />
   ),
   "/facility/:facilityId/patient/:id/update": ({ facilityId, id }) => (
-    <PatientRegister facilityId={facilityId} id={id} />
+    <PatientRegistration facilityId={facilityId} patientId={id} />
   ),
   "/facility/:facilityId/patient/:patientId/notes": ({
     facilityId,

src/Utils/utils.ts

@@ -240,6 +240,7 @@ export const parsePhoneNumber = (phoneNumber: string, countryCode?: string) => {
   if (phoneNumber === "+91") return "";
   const phoneCodes: Record<string, CountryData> = phoneCodesJson;
   let parsedNumber = phoneNumber.replace(/[-+() ]/g, "");
+  if (parsedNumber.length < 12) return "";
   if (countryCode && phoneCodes[countryCode]) {
     parsedNumber = phoneCodes[countryCode].code + parsedNumber;
   } else if (!phoneNumber.startsWith("+")) {

src/components/Common/Breadcrumbs.tsx

@@ -109,7 +109,7 @@ export default function Breadcrumbs({
           <Button
             asChild
             variant="link"
-            className="p-1 font-normal text-gray-800 underline underline-offset-2 hover:text-gray-700"
+            className="p-0 font-normal text-gray-800 underline underline-offset-2 hover:text-gray-700"
           >
             <Link href="/">Home</Link>
           </Button>

src/components/Common/SearchByMultipleFields.tsx

@@ -30,7 +30,6 @@ import PhoneNumberFormField from "@/components/Form/FormFields/PhoneNumberFormFi
 
 interface SearchOption {
   key: string;
-  label: string;
   type: "text" | "phone";
   placeholder: string;
   value: string;
@@ -243,7 +242,7 @@ const SearchByMultipleFields: React.FC<SearchByMultipleFieldsProps> = ({
                       <CareIcon icon="l-search" className="mr-2 h-4 w-4" />
                       <span className="flex-1">{t(option.key)}</span>
                       <kbd className="ml-auto text-xs text-gray-400">
-                        {option.label.charAt(0).toUpperCase()}
+                        {option.shortcutKey}
                       </kbd>
                     </CommandItem>
                   ))}
@@ -252,7 +251,7 @@ const SearchByMultipleFields: React.FC<SearchByMultipleFieldsProps> = ({
             </Command>
           </PopoverContent>
         </Popover>
-        {renderSearchInput}
+        <div className="w-full">{renderSearchInput}</div>
       </div>
       {error && (
         <div className="error-text px-2 mb-1 text-xs font-medium tracking-wide text-danger-500 transition-opacity duration-300">

src/components/Facility/FacilityList.tsx

@@ -184,7 +184,6 @@ export const FacilityList = () => {
           options={[
             {
               key: "facility_district_name",
-              label: "Facility or District Name",
               type: "text" as const,
               placeholder: "facility_search_placeholder",
               value: qParams.search || "",