@@ -553,7 +557,7 @@ const LiveMonitoringButton = () => {
-
+
);
diff --git a/src/Components/Form/AutoCompleteAsync.tsx b/src/Components/Form/AutoCompleteAsync.tsx
index 4fd9346065d..9b4c1f876e4 100644
--- a/src/Components/Form/AutoCompleteAsync.tsx
+++ b/src/Components/Form/AutoCompleteAsync.tsx
@@ -1,5 +1,11 @@
import { useEffect, useState, useMemo } from "react";
-import { Combobox } from "@headlessui/react";
+import {
+ Combobox,
+ ComboboxButton,
+ ComboboxInput,
+ ComboboxOption,
+ ComboboxOptions,
+} from "@headlessui/react";
import { debounce } from "lodash-es";
import { DropdownTransition } from "../Common/components/HelperComponents";
import CareIcon from "../../CAREUI/icons/CareIcon";
@@ -89,7 +95,7 @@ const AutoCompleteAsync = (props: Props) => {
>
-
{
autoComplete="off"
/>
{!disabled && (
-
+
{hasSelection && !loading && !required && (
@@ -135,14 +141,21 @@ const AutoCompleteAsync = (props: Props) => {
className="-mb-1.5 animate-spin"
/>
) : (
-
-
+
)}
-
+
{data?.length === 0 ? (
{query !== ""
@@ -151,7 +164,8 @@ const AutoCompleteAsync = (props: Props) => {
) : (
data?.map((item: any) => (
- {
)}
)}
-
+
))
)}
-
+
{multiple && selected?.length > 0 && (
diff --git a/src/Components/Form/FormFields/Autocomplete.tsx b/src/Components/Form/FormFields/Autocomplete.tsx
index ab7c48b3428..7802a296201 100644
--- a/src/Components/Form/FormFields/Autocomplete.tsx
+++ b/src/Components/Form/FormFields/Autocomplete.tsx
@@ -1,5 +1,11 @@
import { useEffect, useState } from "react";
-import { Combobox } from "@headlessui/react";
+import {
+ Combobox,
+ ComboboxButton,
+ ComboboxInput,
+ ComboboxOption,
+ ComboboxOptions,
+} from "@headlessui/react";
import { DropdownTransition } from "../../Common/components/HelperComponents";
import CareIcon from "../../../CAREUI/icons/CareIcon";
import { dropdownOptionClassNames } from "../MultiSelectMenuV2";
@@ -157,12 +163,12 @@ export const Autocomplete =
(props: AutocompleteProps) => {
>
props.onChange(selection.value)}
>
-
value?.label || ""}
@@ -171,7 +177,7 @@ export const Autocomplete = (props: AutocompleteProps) => {
autoComplete="off"
/>
{!props.disabled && (
-
+
{value?.icon}
@@ -194,15 +200,18 @@ export const Autocomplete = (props: AutocompleteProps) => {
{props.isLoading ? (
-
+
)}
-
+
{props.minQueryLength && query.length < props.minQueryLength ? (
{`Please enter at least ${props.minQueryLength} characters to search`}
@@ -213,14 +222,15 @@ export const Autocomplete = (props: AutocompleteProps) => {
) : (
filteredOptions.map((option, index) => (
-
- {({ active }) => (
+ {({ focus }) => (
{option.label}
@@ -232,7 +242,7 @@ export const Autocomplete = (props: AutocompleteProps) => {
"text-sm font-normal",
option.disabled
? "text-secondary-700"
- : active
+ : focus
? "text-primary-200"
: "text-secondary-700",
)}
@@ -242,10 +252,10 @@ export const Autocomplete = (props: AutocompleteProps) => {
)}
)}
-
+
))
)}
-
+
diff --git a/src/Components/Form/FormFields/AutocompleteMultiselect.tsx b/src/Components/Form/FormFields/AutocompleteMultiselect.tsx
index b4746b7e70c..7fea2d4c6e7 100644
--- a/src/Components/Form/FormFields/AutocompleteMultiselect.tsx
+++ b/src/Components/Form/FormFields/AutocompleteMultiselect.tsx
@@ -5,7 +5,13 @@ import {
} from "../MultiSelectMenuV2";
import { ReactNode, useEffect, useRef, useState } from "react";
import CareIcon from "../../../CAREUI/icons/CareIcon";
-import { Combobox } from "@headlessui/react";
+import {
+ Combobox,
+ ComboboxButton,
+ ComboboxInput,
+ ComboboxOption,
+ ComboboxOptions,
+} from "@headlessui/react";
import { DropdownTransition } from "../../Common/components/HelperComponents";
import FormField from "./FormField";
import { classNames } from "../../../Utils/utils";
@@ -116,7 +122,7 @@ export const AutocompleteMutliSelect = (
>
- (
autoComplete="off"
/>
{!props.disabled && (
-
@@ -139,10 +145,14 @@ export const AutocompleteMutliSelect = (
{props.isLoading ? (
-
+
)}
{value.length !== 0 && (
@@ -161,13 +171,17 @@ export const AutocompleteMutliSelect = (
)}
-
+
{props.isLoading ? (
(
-
+
)}
{filteredOptions.map((option, index) => (
- (
}}
disabled={option.disabled}
>
- {({ active, selected }) => (
+ {({ focus, selected }) => (
<>
{option.label}
@@ -206,7 +221,7 @@ export const AutocompleteMutliSelect = (
"text-sm font-normal",
option.disabled
? "text-secondary-700"
- : active
+ : focus
? "text-primary-200"
: "text-secondary-700",
)}
@@ -216,7 +231,7 @@ export const AutocompleteMutliSelect = (
)}
)}
-
+
))}
) : (
@@ -225,7 +240,7 @@ export const AutocompleteMutliSelect = (
{query ? "No results" : "Type to search"}
)}
-
+
diff --git a/src/Components/Form/FormFields/PhoneNumberFormField.tsx b/src/Components/Form/FormFields/PhoneNumberFormField.tsx
index 6038478f1c5..c46d2690ad3 100644
--- a/src/Components/Form/FormFields/PhoneNumberFormField.tsx
+++ b/src/Components/Form/FormFields/PhoneNumberFormField.tsx
@@ -16,7 +16,7 @@ import {
PhoneNumberType,
} from "../FieldValidators";
import CareIcon from "../../../CAREUI/icons/CareIcon";
-import { Popover } from "@headlessui/react";
+import { Popover, PopoverButton, PopoverPanel } from "@headlessui/react";
import { useTranslation } from "react-i18next";
const phoneCodes: Record = phoneCodesJson;
@@ -111,7 +111,7 @@ export default function PhoneNumberFormField(props: Props) {
{({ open }: { open: boolean }) => {
return (
<>
-
+
{country?.flag ?? "🇮🇳"}
@@ -121,7 +121,7 @@ export default function PhoneNumberFormField(props: Props) {
className={`text-2xl font-bold ${open && "rotate-180"}`}
/>
-
+
+
{({ close }) => (
+
);
}}
diff --git a/src/Components/Form/MultiSelectMenuV2.tsx b/src/Components/Form/MultiSelectMenuV2.tsx
index 9ab2f4d55c7..e728260e142 100644
--- a/src/Components/Form/MultiSelectMenuV2.tsx
+++ b/src/Components/Form/MultiSelectMenuV2.tsx
@@ -1,6 +1,11 @@
import CareIcon from "../../CAREUI/icons/CareIcon";
-import { DropdownTransition } from "../Common/components/HelperComponents";
-import { Listbox } from "@headlessui/react";
+import {
+ Label,
+ Listbox,
+ ListboxButton,
+ ListboxOption,
+ ListboxOptions,
+} from "@headlessui/react";
import { classNames } from "../../Utils/utils";
import { ReactNode, useRef } from "react";
@@ -87,95 +92,94 @@ const MultiSelectMenuV2 = (props: Props) => {
}
multiple
>
- {({ open }) => (
- <>
-
- {props.placeholder}
-
-
-
-
+ {props.placeholder}
+
+
+
+
+
+
+
+
+ {selectedOptions.length !== 0 && (
+
+ {selectedOptions.map((option, index) => (
+ {
+ const updatedOptions = selectedOptions.filter(
+ (selectedOption) =>
+ selectedOption.value !== option.value,
+ );
+ props.onChange(
+ updatedOptions.map((o) => o.value) as any,
+ );
+ }}
+ />
+ ))}
+
+ )}
+
+
+
+
+
+ {options.map((option, index) => (
+ handleSingleSelect(option)}
+ disabled={option.disabled}
>
-
-
-
-
-
- {selectedOptions.length !== 0 && (
-
- {selectedOptions.map((option, index) => (
-
{
- const updatedOptions = selectedOptions.filter(
- (selectedOption) =>
- selectedOption.value !== option.value,
- );
- props.onChange(
- updatedOptions.map((o) => o.value) as any,
- );
- }}
- />
+ {({ focus }) => (
+
+
+ {option.label}
+ {(option.icon || option.isSelected) &&
+ (option.isSelected ? (
+
- )}
-
-
-
-
-
- {options.map((option, index) => (
- handleSingleSelect(option)}
- disabled={option.disabled}
- >
- {({ active }) => (
-
-
- {option.label}
- {(option.icon || option.isSelected) &&
- (option.isSelected ? (
-
- {option.description && (
-
- {option.description}
-
+
+ >
+ {option.description}
+
)}
-
- ))}
-
-
-
+
(props: SelectMenuProps) => {
value={value}
onChange={(selection: any) => props.onChange(selection.value)}
>
- {({ open }) => (
- <>
-
- {props.placeholder}
-
-
-
-
-
- {props.showIconWhenSelected && value?.icon && (
-
- {value.icon}
-
- )}
-
- {value.selectedLabel}
-
-
- {showChevronIcon && (
-
+ <>
+
{props.placeholder}
+
+
+
+
+ {props.showIconWhenSelected && value?.icon && (
+
+ {value.icon}
+
)}
+
+ {value.selectedLabel}
+
-
-
)}
- >
-
-
- {options.map((option, index) => (
-
- {({ active, selected }) => (
-
-
- {option.label}
- {props.optionIcon
- ? option.icon
- : selected && (
-
- {option.description && (
-
- {option.description}
-
+
+
+ {options.map((option, index) => (
+
+ {({ focus, selected }) => (
+
+
+ {option.label}
+ {props.optionIcon
+ ? option.icon
+ : selected && (
+
+ {option.description && (
+
+ >
+ {option.description}
+
)}
-
- ))}
-
-
-
+
props.onClose(false)}
diff --git a/src/Components/Patient/PatientInfoCard.tsx b/src/Components/Patient/PatientInfoCard.tsx
index a507a42f627..005c93521d6 100644
--- a/src/Components/Patient/PatientInfoCard.tsx
+++ b/src/Components/Patient/PatientInfoCard.tsx
@@ -8,7 +8,7 @@ import {
TELEMEDICINE_ACTIONS,
} from "../../Common/constants.js";
import { ConsultationModel, PatientCategory } from "../Facility/models.js";
-import { Switch, Menu } from "@headlessui/react";
+import { Switch, MenuItem, Field, Label } from "@headlessui/react";
import { Link, navigate } from "raviger";
import { useState } from "react";
import CareIcon from "../../CAREUI/icons/CareIcon.js";
@@ -738,7 +738,7 @@ export default function PatientInfoCard(props: {
{enable_abdm &&
(patient.abha_number ? (
<>
-
+
{({ close }) => (
<>
)}
-
+
) : (
-
+
{({ close }) => (
)}
-
+
))}
{!consultation?.discharge_date && (
-
+
{({ close }) => (
<>
{hasActiveShiftingRequest() ? (
@@ -869,9 +869,9 @@ export default function PatientInfoCard(props: {
)}
)}
-
+
)}
-
+
{({ close }) => (
)}
-
-
+
+
{({ close }) => (
)}
-
+
-
+
{
@@ -945,12 +945,12 @@ export default function PatientInfoCard(props: {
)}
/>
-
+
Medico-Legal Case
{" "}
-
-
+
+
= ({ form, onFormUpdate }) => {
return (
-
+
setOpen(!open)}
className="rounded py-2 font-bold"
@@ -558,9 +558,9 @@ export const Scribe: React.FC = ({ form, onFormUpdate }) => {
-
+
{open && (
-
+
@@ -730,7 +730,7 @@ export const Scribe: React.FC = ({ form, onFormUpdate }) => {
-
+
)}
);
diff --git a/src/Components/VitalsMonitor/VitalsMonitorAssetPopover.tsx b/src/Components/VitalsMonitor/VitalsMonitorAssetPopover.tsx
index c57daf8f324..7ee5bf6c898 100644
--- a/src/Components/VitalsMonitor/VitalsMonitorAssetPopover.tsx
+++ b/src/Components/VitalsMonitor/VitalsMonitorAssetPopover.tsx
@@ -3,8 +3,12 @@ import { AssetData, assetClassProps } from "../Assets/AssetTypes";
import ButtonV2 from "../Common/components/ButtonV2";
import { navigate } from "raviger";
import { useTranslation } from "react-i18next";
-import { Popover, Transition } from "@headlessui/react";
-import { Fragment } from "react";
+import {
+ Popover,
+ PopoverButton,
+ PopoverPanel,
+ Transition,
+} from "@headlessui/react";
interface VitalsMonitorAssetPopoverProps {
asset?: AssetData;
@@ -17,14 +21,13 @@ const VitalsMonitorAssetPopover = ({
return (
-
+
+
-
+
-
+
);
diff --git a/src/Locale/en/Medicine.json b/src/Locale/en/Medicine.json
index a04c5caa77a..3e861f2e486 100644
--- a/src/Locale/en/Medicine.json
+++ b/src/Locale/en/Medicine.json
@@ -39,6 +39,7 @@
"prescription_logs": "Prescription Logs",
"modification_caution_note": "No modifications possible once added",
"discontinue_caution_note": "Are you sure you want to discontinue this prescription?",
+ "confirm_discontinue": "Confirm Discontinue",
"edit_caution_note": "A new prescription will be added to the consultation with the edited details and the current prescription will be discontinued.",
"reason_for_discontinuation": "Reason for discontinuation",
"reason_for_edit": "Reason for edit",