Feat : Integration of BSP app for provider service

beneficiary-app/.env

@@ -1,5 +1,5 @@
 registry_url="https://dev-hcx.swasth.app/registry/api/v1/Beneficiary"
-hcx_mock_service="https://dev-hcx.swasth.app/hcx-mock-service/v0.7"
+hcx_mock_service="https://dev-hcx.swasth.app/hcx-provider-service/v0.7"
 hcx_service="https://dev-hcx.swasth.app/api/v0.8"
-SEARCH_PARTICIPANT_USERNAME="bsp_demobs_812521@swasth-hcx-dev"
+SEARCH_PARTICIPANT_USERNAME="bsp_bspapp_418166@swasth-hcx-dev"
 SEARCH_PARTICIPANT_PASSWORD="Opensaber@123"

beneficiary-app/src/components/DropdownNotification.tsx

@@ -35,7 +35,7 @@ const DropdownNotification = () => {
                 }}
                 className="relative flex h-8.5 w-8.5 items-center justify-center rounded-full border-[0.5px] border-stroke bg-gray hover:text-primary dark:border-strokedark dark:bg-meta-4 dark:text-white"
             >
-                {showMessageCount ? <div className="absolute inline-flex items-center justify-center w-5 h-5 text-xs font-bold text-white bg-red ml-6 border-2 border-white rounded-full -top-2 -end-2 dark:border-gray-900">{notificationData.length - 1 || 0}</div> : <></>}
+                {showMessageCount ? <div className="absolute inline-flex items-center justify-center w-5 h-5 text-xs font-bold text-white bg-red ml-6 border-2 border-white rounded-full -top-2 -end-2 dark:border-gray-900">{notificationData.length || 0}</div> : <></>}
                 <span
                     className={`absolute -top-0.5 right-0 z-1 h-2 w-2 rounded-full bg-meta-1 ${notifying === false ? 'hidden' : 'inline'
                         }`}

beneficiary-app/src/components/InsuranceDetailsForm.tsx

@@ -0,0 +1,140 @@
+import  { useEffect, useState } from 'react';
+import _ from 'lodash';
+import { generateToken, searchParticipant } from '../services/hcxService';
+import TextInputWithLabel from './TextInputField';
+
+const InsuranceDetailsForm = (props:any) => {
+
+    const [openDropdown, setOpenDropdown] = useState(false);
+    const {beneficiaryName, setBeneficiaryName,insuranceId, setInsuranceId , payorName, setPayorName , payorParticipantCode, setPayorParticipantCode } = props;
+    const [searchResults, setSearchResults] = useState<any>([]);
+
+    const filteredResults = searchResults.filter((result: any) =>
+        result.participant_name.toLowerCase().includes(payorName.toLowerCase())
+    );
+
+    const handleSelect = (result: any, participantCode: any) => {
+        setOpenDropdown(false);
+        setPayorParticipantCode(participantCode);
+        setPayorName(result);
+    };
+
+
+    let searchPayorForPatient = async () => {
+        try {
+            const tokenResponse = await generateToken();
+            const token = tokenResponse.data.access_token;
+            const response = await searchParticipant(searchPayload, {
+                headers: {
+                    Authorization: `Bearer ${token}`,
+                },
+            });
+            console.log("setSearchResults" , response.data?.participants);
+            setSearchResults(response.data?.participants);
+        } catch (error: any) {
+            setOpenDropdown(false);
+        }
+    };
+
+    const searchPayload = {
+        filters: {
+            "roles": {
+                "eq": "payor"
+            },
+            "status": {
+                "eq": "Active"
+            }
+        },
+    };
+
+    useEffect(() => {
+        searchPayorForPatient();
+    }, []);
+
+    return (
+        <div>
+            <h2 className="sm:text-title-xl1 mb-2 mt-3 text-2xl font-bold text-black dark:text-white">
+                {"Insurance Details"}
+            </h2>
+            <div className="relative rounded-lg border border-stroke bg-white p-3 -mt-1 px-1 shadow-default dark:border-strokedark dark:bg-boxdark">
+                <div className="flex flex-col gap-5.5 p-3">
+                    <TextInputWithLabel
+                        label="Beneficiary name *"
+                        value={beneficiaryName}
+                        onChange={(e: any) => setBeneficiaryName(e.target.value)}
+                        placeholder="Enter beneficiary name"
+                        type="text"
+                    />
+                    <TextInputWithLabel
+                        label="Insurance ID *"
+                        value={insuranceId}
+                        onChange={(e: any) => setInsuranceId(e.target.value)}
+                        placeholder="Enter insurance id"
+                        type="text"
+                    />
+                    <div>
+                        <h2 className="-mt-2 block text-left font-medium text-black dark:text-white">
+                            Payor name *:
+                            <div className="relative">
+                                <input type="text" placeholder="Search insurer name" value={payorName} required
+                                    onChange={(e) => {
+                                        const inputText = e.target.value; setPayorName(inputText)
+                                        const hasMatchingRecords = searchResults.some((result: any) => result.participant_name.toLowerCase().includes(inputText.toLowerCase())
+                                        );
+                                        setOpenDropdown(hasMatchingRecords);
+                                    }
+                                    }
+                                    className="mt-2 w-full rounded-lg border border-stroke bg-transparent py-4 pl-6 pr-10 outline-none focus:border-primary focus-visible:shadow-none dark:border-form-strokedark dark:bg-form-input dark:focus:border-primary"
+                                />
+                                <span className="absolute top-8 right-4 z-30 -translate-y-1/2"
+                                    onClick={() => {
+                                        setOpenDropdown(!openDropdown);
+                                    }}>
+                                    <svg className="fill-current" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                        <g opacity="0.8"> <path fillRule="evenodd" clipRule="evenodd" d="M5.29289 8.29289C5.68342 7.90237 6.31658 7.90237 6.70711 8.29289L12 13.5858L17.2929 8.29289C17.6834 7.90237 18.3166 7.90237 18.7071 8.29289C19.0976 8.68342 19.0976 9.31658 18.7071 9.70711L12.7071 15.7071C12.3166 16.0976 11.6834 16.0976 11.2929 15.7071L5.29289 9.70711C4.90237 9.31658 4.90237 8.68342 5.29289 8.29289Z" fill=""></path></g>
+                                    </svg>
+                                </span>
+                                {filteredResults.length !== 0 && openDropdown ? (
+                                    <div className="max-h-40 overflow-y-auto overflow-x-hidden">
+                                        <ul className="border-gray-300 left-0 w-full rounded-lg bg-gray px-2 text-black">
+                                            {_.map(filteredResults, (result: any, index: any) => (
+                                                <li
+                                                    key={index}
+                                                    onClick={() => {
+                                                        setOpenDropdown(!openDropdown)
+                                                        handleSelect(
+                                                            result?.participant_name,
+                                                            result?.participant_code
+                                                        )
+                                                    }
+                                                    }
+                                                    className="hover:bg-gray-200 cursor-pointer p-2">
+                                                    {result?.participant_name +
+                                                        `(${result?.participant_code})` || ''}
+                                                </li>
+                                            ))}
+                                        </ul>
+                                    </div>
+                                ) : (
+                                    <></>
+                                )}
+                            </div>
+                        </h2>
+                        <div className="mt-2 relative items-center">
+                            <TextInputWithLabel
+                                label="Participant code : *"
+                                disabled={true}
+                                value={payorParticipantCode}
+                                type="text"
+                                placeholder="Search above for participant code"
+                                onChange={(e: any) => setPayorParticipantCode(e.target.value)}
+                            />
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default InsuranceDetailsForm;

beneficiary-app/src/components/PayorDetailsCard/PayorDetailsCard.tsx

@@ -1,12 +1,139 @@
-const PayorDetailsCard = ({ onInputChange, cardKey }: any) => {
+const PayorDetailsCard = ({ onInputChange, cardKey, searchResults}: any) => {
   const handleInputChange = (event: any) => {
     const { name, value } = event.target;
     // Pass the updated data back to the parent component
     onInputChange({ [name]: value });
   };
   return (
     <div className="rounded-lg border border-stroke bg-white shadow-default dark:border-strokedark dark:bg-boxdark">
-      <div className="flex flex-col gap-5.5 p-4">
+     <h2 className="sm:text-title-xl1 mb-2 text-2xl font-bold text-black dark:text-white">
+            {"Insurance Details"}
+          </h2>
+          <div className="rounded-lg mb-3 border border-stroke bg-white shadow-default dark:border-strokedark dark:bg-boxdark">
+            <div className="flex flex-col gap-5.5 p-3">
+              <label className="block text-left font-medium text-black dark:text-white">
+                {"Beneficiary name *"}
+              </label>
+              <div className="-mt-2 relative">
+                <input
+                  required
+                  onChange={handleInputChange}
+                  type="text"
+                  placeholder="Enter beneficiary name"
+                  className={
+                    'w-full rounded-lg border border-stroke bg-transparent py-4 pl-6 pr-10 outline-none focus:border-primary focus-visible:shadow-none dark:border-form-strokedark dark:bg-form-input dark:focus:border-primary'
+                  }
+                />
+              </div>
+              <label className="-mt-2 block text-left font-medium text-black dark:text-white">
+                {" Insurance ID *"}
+              </label>
+              <div className="-mt-2 relative">
+                <input
+                  required
+                  onChange={handleInputChange}
+                  type="text"
+                  placeholder="Enter insurance id"
+                  className={
+                    'w-full rounded-lg border border-stroke bg-transparent py-4 pl-6 pr-10 outline-none focus:border-primary focus-visible:shadow-none dark:border-form-strokedark dark:bg-form-input dark:focus:border-primary'
+                  }
+                />
+              </div>
+              <div>
+                <h2 className="-mt-2 block text-left font-medium text-black dark:text-white">
+                  Payor name *:
+                  <div className="relative">
+                    <input
+                      type="text"
+                      placeholder="Search insurer name"
+                      value={payorName}
+                      required
+                      onChange={(e) => {
+                        const inputText = e.target.value;
+                        setPayorName(inputText)
+                        const hasMatchingRecords = searchResults.some((result: any) =>
+                          result.participant_name.toLowerCase().includes(inputText.toLowerCase())
+                        );
+                        setOpenDropdown(hasMatchingRecords);
+                      }
+                      }
+                      // onChange={(e) => setPayorName(e.target.value)}
+                      className="mt-2 w-full rounded-lg border border-stroke bg-transparent py-4 pl-6 pr-10 outline-none focus:border-primary focus-visible:shadow-none dark:border-form-strokedark dark:bg-form-input dark:focus:border-primary"
+                    />
+
+                    <span
+                      className="absolute top-8 right-4 z-30 -translate-y-1/2"
+                      onClick={() => {
+                        setOpenDropdown(!openDropdown);
+                      }}
+                    >
+                      <svg
+                        className="fill-current"
+                        width="24"
+                        height="24"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <g opacity="0.8">
+                          <path
+                            fillRule="evenodd"
+                            clipRule="evenodd"
+                            d="M5.29289 8.29289C5.68342 7.90237 6.31658 7.90237 6.70711 8.29289L12 13.5858L17.2929 8.29289C17.6834 7.90237 18.3166 7.90237 18.7071 8.29289C19.0976 8.68342 19.0976 9.31658 18.7071 9.70711L12.7071 15.7071C12.3166 16.0976 11.6834 16.0976 11.2929 15.7071L5.29289 9.70711C4.90237 9.31658 4.90237 8.68342 5.29289 8.29289Z"
+                            fill=""
+                          ></path>
+                        </g>
+                      </svg>
+                    </span>
+                    {filteredResults.length !== 0 && openDropdown ? (
+                      <div className="max-h-40 overflow-y-auto overflow-x-hidden">
+                        <ul className="border-gray-300 left-0 w-full rounded-lg bg-gray px-2 text-black">
+                          {_.map(filteredResults, (result: any, index: any) => (
+                            <li
+                              key={index}
+                              onClick={() => {
+                                setOpenDropdown(!openDropdown)
+                                handleSelect(
+                                  result?.participant_name,
+                                  result?.participant_code
+                                )
+                              }
+                              }
+                              className="hover:bg-gray-200 cursor-pointer p-2"
+                            >
+                              {result?.participant_name +
+                                `(${result?.participant_code})` || ''}
+                            </li>
+                          ))}
+                        </ul>
+                      </div>
+                    ) : (
+                      <></>
+                    )}
+
+                  </div>
+                </h2>
+                <div className='items-center'>
+                  <label className="mt-2 block text-left font-medium text-black dark:text-white">
+                    {" Participant code : *"}
+                  </label>
+                  <div className="mt-2 relative">
+                    <input
+                      disabled
+                      required
+                      onChange={handleInputChange}
+                      type="text"
+                      placeholder="Search above for participant code"
+                      className={
+                        'w-full rounded-lg border border-stroke bg-transparent py-4 pl-6 pr-10 outline-none focus:border-primary focus-visible:shadow-none dark:border-form-strokedark dark:bg-form-input dark:focus:border-primary'
+                      }
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+      {/* <div className="flex flex-col gap-5.5 p-4">
         <div>
           <label className="mb-2.5 block text-left font-medium text-black dark:text-white">
             Payor Details *
@@ -58,7 +185,7 @@ const PayorDetailsCard = ({ onInputChange, cardKey }: any) => {
             />
           </div>
         </div>
-      </div>
+      </div> */}
     </div>
   );
 };

beneficiary-app/src/components/SelectInput.tsx

@@ -0,0 +1,44 @@
+const SelectInput = ({ label, value, onChange, options, disabled }: any) => {
+  return (
+    <div>
+      <label className="mb-2.5 mt-3 block text-left font-medium text-black dark:text-white">
+        {label}
+      </label>
+      <div className="relative z-20 bg-white dark:bg-form-input">
+        <select
+          onChange={onChange}
+          value={value}
+          className="relative z-20 w-full appearance-none rounded border border-stroke bg-transparent bg-transparent py-3 px-6 outline-none transition focus:border-primary active:border-primary dark:border-form-strokedark"
+          disabled={disabled}
+        >
+          {options &&
+            options.map((option: any) => (
+              <option key={option.value} value={option.value}>
+                {option.label}
+              </option>
+            ))}
+        </select>
+        <span className="absolute top-1/2 right-4 z-10 -translate-y-1/2">
+          <svg
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <g opacity="0.8">
+              <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M5.29289 8.29289C5.68342 7.90237 6.31658 7.90237 6.70711 8.29289L12 13.5858L17.2929 8.29289C17.6834 7.90237 18.3166 7.90237 18.7071 8.29289C19.0976 8.68342 19.0976 9.31658 18.7071 9.70711L12.7071 15.7071C12.3166 16.0976 11.6834 16.0976 11.2929 15.7071L5.29289 9.70711C4.90237 9.31658 4.90237 8.68342 5.29289 8.29289Z"
+                fill="#637381"
+              ></path>
+            </g>
+          </svg>
+        </span>
+      </div>
+    </div>
+  );
+};
+
+export default SelectInput;

beneficiary-app/src/components/TextInputField.tsx

@@ -0,0 +1,26 @@
+const TextInputWithLabel = ({
+  label,
+  value,
+  onChange,
+  placeholder,
+  disabled,
+  type 
+}: any) => {
+  return (
+    <div className="block text-left font-medium text-black dark:text-white">
+      {label}
+      <div>
+        <input
+          onChange={onChange}
+          value={value}
+          disabled={disabled}
+          type={type}
+          placeholder={placeholder}
+          className="mt-2 w-full rounded-lg border-[1.5px] border-stroke bg-white py-3 px-5 font-medium outline-none transition focus:border-primary active:border-primary disabled:cursor-default disabled:bg-whiter dark:border-form-strokedark dark:bg-form-input dark:focus:border-primary"
+        />
+      </div>
+    </div>
+  );
+};
+
+export default TextInputWithLabel;