Minor Bug Fix | Merge Develop to Staging | v24.23.0

src/CAREUI/display/NetworkSignal.tsx

@@ -19,7 +19,7 @@ export default function NetworkSignal({ strength, children }: Props) {
   return (
     <div
       className={classNames(
-        "flex items-center", // Strength colors
+        "relative flex items-center", // Strength colors
         strength === 0 && "text-danger-500",
         strength === 1 && "text-danger-500",
         strength === 2 && "text-warning-500",
@@ -50,6 +50,12 @@ export default function NetworkSignal({ strength, children }: Props) {
             />
           ))
         )}
+        {!!strength && strength < 2 && (
+          <CareIcon
+            icon="l-exclamation-circle"
+            className="absolute left-0.5 top-0 animate-pulse text-sm text-danger-500"
+          />
+        )}
       </div>
       {children}
     </div>

src/Common/constants.tsx

@@ -363,10 +363,10 @@ export const SAMPLE_TEST_RESULT = [
 export const CONSULTATION_SUGGESTION = [
   { id: "HI", text: "Home Isolation", deprecated: true }, // # Deprecated. Preserving option for backward compatibility (use only for readonly operations)
   { id: "A", text: "Admission" },
-  { id: "R", text: "Refer to another Hospital" },
+  { id: "R", text: "Refer to another Hospital", editDisabled: true },
   { id: "OP", text: "OP Consultation" },
   { id: "DC", text: "Domiciliary Care" },
-  { id: "DD", text: "Declare Death" },
+  { id: "DD", text: "Declare Death", editDisabled: true },
 ] as const;
 
 export type ConsultationSuggestionValue =

src/Components/Assets/configure/CameraConfigure.tsx

@@ -7,6 +7,7 @@ import { getCameraConfig } from "../../../Utils/transformUtils";
 import { Submit } from "../../Common/components/ButtonV2";
 import TextFormField from "../../Form/FormFields/TextFormField";
 import Card from "../../../CAREUI/display/Card";
+import { FieldErrorText } from "../../Form/FormFields/FormField";
 
 interface CameraConfigureProps {
   asset: AssetData;
@@ -59,8 +60,14 @@ export default function CameraConfigure(props: CameraConfigureProps) {
                 value={newPreset}
                 className="mt-1"
                 onChange={(e) => setNewPreset(e.value)}
-                error=""
+                errorClassName="hidden"
               />
+              {newPreset.length > 12 && (
+                <FieldErrorText
+                  error="It is advisable to keep preset name below 12 characters"
+                  className="!text-warning-500"
+                />
+              )}
             </div>
           </div>
           <div className="mt-4 flex justify-end">

src/Components/CameraFeed/AssetBedSelect.tsx

@@ -15,28 +15,32 @@ export default function CameraPresetSelect(props: Props) {
   const label = props.label ?? defaultLabel;
   return (
     <>
-      <div className="hidden gap-2 whitespace-nowrap pr-2 md:flex">
+      <div className="hidden gap-4 whitespace-nowrap pr-2 lg:flex lg:gap-2">
         {/* Desktop View */}
         {props.options
           .slice(0, props.options.length > 5 ? 4 : 5)
           .map((option) => (
             <button
               className={classNames(
-                "rounded-xl border px-2 py-0.5 text-xs transition-all duration-200 ease-in-out hover:bg-zinc-600",
+                "min-w-16 max-w-40 overflow-hidden text-ellipsis whitespace-nowrap rounded-lg border-2 px-2 py-0.5 text-base transition-all duration-200 ease-in-out hover:bg-zinc-600",
                 props.value?.id === option.id
                   ? "border-white bg-zinc-100 font-bold text-black"
-                  : "border-white/50 text-zinc-100",
+                  : "border-zinc-700 font-medium text-zinc-300",
               )}
               onClick={() => props.onChange?.(option)}
             >
               {label(option)}
             </button>
           ))}
         {props.options.length > 5 && (
-          <CameraPresetDropdown {...props} options={props.options.slice(4)} />
+          <CameraPresetDropdown
+            {...props}
+            options={props.options.slice(4)}
+            value={props.options.slice(4).find((o) => o.id === props.value?.id)}
+          />
         )}
       </div>
-      <div className="md:hidden">
+      <div className="w-full lg:hidden">
         {/* Mobile View */}
         <CameraPresetDropdown {...props} />
       </div>
@@ -54,17 +58,19 @@ export const CameraPresetDropdown = (props: Props) => {
   return (
     <Listbox value={selected} onChange={props.onChange}>
       <div className="relative flex-1">
-        <Listbox.Button className="relative w-full cursor-default pr-6 text-left text-xs text-white focus:outline-none disabled:cursor-not-allowed disabled:bg-transparent disabled:text-zinc-700 sm:text-sm md:pl-2">
-          <span
-            className={classNames(
-              "block truncate",
-              !selected && "text-gray-500",
-            )}
-          >
+        <Listbox.Button
+          className={classNames(
+            "relative min-w-32 max-w-40 overflow-hidden text-ellipsis whitespace-nowrap rounded-lg border-2 px-2 py-0.5 pr-8 text-left text-base transition-all duration-200 ease-in-out hover:bg-zinc-600 focus:outline-none disabled:cursor-not-allowed disabled:bg-transparent disabled:text-zinc-700",
+            selected
+              ? "border-white bg-zinc-100 font-bold text-black"
+              : "border-zinc-700 font-medium text-zinc-300",
+          )}
+        >
+          <span className="block truncate">
             {selected ? label(selected) : "Select preset"}
           </span>
-          <span className="pointer-events-none absolute inset-y-0 right-0 mt-1 flex items-center">
-            <CareIcon icon="l-angle-down" className="text-lg text-zinc-500" />
+          <span className="pointer-events-none absolute inset-y-0 right-0 mr-1 mt-1 flex items-center">
+            <CareIcon icon="l-angle-down" className="text-xl text-zinc-400" />
           </span>
         </Listbox.Button>
         <Transition
@@ -73,7 +79,7 @@ export const CameraPresetDropdown = (props: Props) => {
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <Listbox.Options className="absolute z-20 mt-1 max-h-48 w-full overflow-auto rounded-b-lg bg-zinc-900/75 py-1 text-base shadow-lg ring-1 ring-white/5 backdrop-blur-sm focus:outline-none sm:text-sm md:max-h-60">
+          <Listbox.Options className="absolute z-20 mt-1 max-h-48 w-full overflow-auto rounded-b-lg bg-zinc-900/75 py-1 text-base shadow-lg ring-1 ring-white/5 backdrop-blur-sm focus:outline-none md:max-h-60">
             {options?.map((obj) => (
               <Listbox.Option
                 key={obj.id}
@@ -87,7 +93,7 @@ export const CameraPresetDropdown = (props: Props) => {
                 {({ selected }) => (
                   <>
                     <span
-                      className={`block truncate text-xs md:text-sm ${
+                      className={`block truncate text-sm md:text-base ${
                         selected ? "font-bold text-white" : "font-normal"
                       }`}
                     >

src/Components/CameraFeed/CameraFeed.tsx

@@ -96,13 +96,13 @@ export default function CameraFeed(props: Props) {
           props.className,
         )}
       >
-        <div className="flex items-center justify-between bg-zinc-900 px-4 py-0.5">
+        <div className="flex items-center justify-between bg-zinc-900 px-4 py-1.5 md:py-2">
           {props.children}
           <div className="flex w-full items-center justify-end gap-1 md:gap-4">
-            <span className="text-xs font-semibold text-white md:text-sm">
+            <span className="text-base font-semibold text-white">
               <CareIcon
                 icon="l-video"
-                className="hidden pr-2 text-base text-zinc-400 md:inline-block"
+                className="hidden pr-2 text-lg text-zinc-400 md:inline-block"
               />
               {props.asset.name}
             </span>
@@ -170,7 +170,7 @@ export default function CameraFeed(props: Props) {
           ) : (
             <video
               onContextMenu={(e) => e.preventDefault()}
-              className="absolute inset-0 w-full"
+              className="absolute inset-x-0 mx-auto aspect-video max-h-screen w-full"
               id="mse-video"
               autoPlay
               muted

src/Components/CameraFeed/FeedWatermark.tsx

@@ -8,12 +8,12 @@ export default function FeedWatermark() {
       <Watermark className="left-1/3 top-1/3 -translate-x-1/2 -translate-y-1/2">
         {me.username}
       </Watermark>
-      <Watermark className="right-1/3 top-1/3 -translate-y-1/2 translate-x-1/2">
+      {/* <Watermark className="right-1/3 top-1/3 -translate-y-1/2 translate-x-1/2">
         {me.username}
       </Watermark>
       <Watermark className="bottom-1/3 left-1/3 -translate-x-1/2 translate-y-1/2">
         {me.username}
-      </Watermark>
+      </Watermark> */}
       <Watermark className="bottom-1/3 right-1/3 translate-x-1/2 translate-y-1/2">
         {me.username}
       </Watermark>
@@ -47,7 +47,7 @@ const Watermark = (props: { children: string; className: string }) => {
   return (
     <span
       ref={ref}
-      className={`absolute z-10 text-2xl font-bold text-white/30 ${props.className}`}
+      className={`absolute z-10 font-bold text-white/20 md:text-2xl ${props.className}`}
     >
       {props.children}
     </span>

src/Components/Facility/ConsultationDetails/ConsultationFeedTab.tsx

@@ -100,6 +100,10 @@ export const ConsultationFeedTab = (props: ConsultationTabProps) => {
         hideBack={true}
         focusOnLoad={false}
       />
+      <span className="mb-2 flex rounded-lg border border-warning-400 bg-warning-100 px-2 py-1 text-sm font-medium text-warning-700 sm:hidden">
+        <CareIcon icon="l-exclamation-triangle" className="pr-2 text-base" />
+        For better experience, rotate your device.
+      </span>
       <div ref={divRef}>
         <CameraFeed
           asset={asset}
@@ -161,7 +165,7 @@ export const ConsultationFeedTab = (props: ConsultationTabProps) => {
                     <CareIcon
                       icon="l-save"
                       className={classNames(
-                        "text-base",
+                        "text-lg",
                         hasMoved ? "text-gray-200" : "text-gray-500",
                       )}
                     />

src/Components/Facility/ConsultationForm.tsx

@@ -1148,6 +1148,14 @@ export const ConsultationForm = ({ facilityId, patientId, id }: Props) => {
                       options={CONSULTATION_SUGGESTION.filter(
                         (option) => !("deprecated" in option),
                       )}
+                      optionDisabled={(option) =>
+                        isUpdate && "editDisabled" in option
+                      }
+                      optionDescription={(option) =>
+                        isUpdate && "editDisabled" in option
+                          ? t("encounter_suggestion_edit_disallowed")
+                          : undefined
+                      }
                     />
                   </div>
 

src/Components/Form/FormFields/Autocomplete.tsx

@@ -17,6 +17,7 @@ type AutocompleteFormFieldProps<T, V> = FormFieldBaseProps<V> & {
   optionValue?: OptionCallback<T, V>;
   optionDescription?: OptionCallback<T, string>;
   optionIcon?: OptionCallback<T, React.ReactNode>;
+  optionDisabled?: OptionCallback<T, boolean>;
   onQuery?: (query: string) => void;
   dropdownIcon?: React.ReactNode | undefined;
   isLoading?: boolean;
@@ -43,6 +44,7 @@ const AutocompleteFormField = <T, V>(
         optionIcon={props.optionIcon}
         optionValue={props.optionValue}
         optionDescription={props.optionDescription}
+        optionDisabled={props.optionDisabled}
         onQuery={props.onQuery}
         isLoading={props.isLoading}
         allowRawInput={props.allowRawInput}
@@ -65,6 +67,7 @@ type AutocompleteProps<T, V = T> = {
   optionIcon?: OptionCallback<T, React.ReactNode>;
   optionValue?: OptionCallback<T, V>;
   optionDescription?: OptionCallback<T, React.ReactNode>;
+  optionDisabled?: OptionCallback<T, boolean>;
   className?: string;
   onQuery?: (query: string) => void;
   requiredError?: boolean;
@@ -105,6 +108,7 @@ export const Autocomplete = <T, V>(props: AutocompleteProps<T, V>) => {
       search: label.toLowerCase(),
       icon: props.optionIcon?.(option),
       value: props.optionValue ? props.optionValue(option) : option,
+      disabled: props.optionDisabled?.(option),
     };
   });
 
@@ -123,6 +127,7 @@ export const Autocomplete = <T, V>(props: AutocompleteProps<T, V>) => {
         search: query.toLowerCase(),
         icon: <CareIcon icon="l-plus" />,
         value: query,
+        disabled: undefined,
       },
       ...mappedOptions,
     ];
@@ -204,6 +209,7 @@ export const Autocomplete = <T, V>(props: AutocompleteProps<T, V>) => {
                   key={`${props.id}-option-${option.label}-value-${index}`}
                   className={dropdownOptionClassNames}
                   value={option}
+                  disabled={option.disabled}
                 >
                   {({ active }) => (
                     <div className="flex flex-col">
@@ -214,8 +220,12 @@ export const Autocomplete = <T, V>(props: AutocompleteProps<T, V>) => {
                       {option.description && (
                         <div
                           className={classNames(
-                            "text-sm",
-                            active ? "text-primary-200" : "text-gray-700",
+                            "text-sm font-normal",
+                            option.disabled
+                              ? "text-gray-700"
+                              : active
+                                ? "text-primary-200"
+                                : "text-gray-700",
                           )}
                         >
                           {option.description}

src/Components/Form/FormFields/AutocompleteMultiselect.tsx

@@ -17,6 +17,7 @@ type AutocompleteMultiSelectFormFieldProps<T, V> = FormFieldBaseProps<V[]> & {
   options: T[];
   optionLabel: OptionCallback<T, string>;
   optionValue?: OptionCallback<T, V>;
+  optionDisabled?: OptionCallback<T, boolean>;
   onQuery?: (query: string) => void;
   dropdownIcon?: React.ReactNode | undefined;
   isLoading?: boolean;
@@ -50,6 +51,7 @@ type AutocompleteMutliSelectProps<T, V = T> = {
   optionDescription?: OptionCallback<T, ReactNode>;
   optionLabel: OptionCallback<T, string>;
   optionValue?: OptionCallback<T, V>;
+  optionDisabled?: OptionCallback<T, boolean>;
   className?: string;
   onChange: OptionCallback<V[], void>;
   onQuery?: (query: string) => void;
@@ -87,6 +89,7 @@ export const AutocompleteMutliSelect = <T, V>(
       description: props.optionDescription?.(option),
       search: label.toLowerCase(),
       value: (props.optionValue ? props.optionValue(option) : option) as V,
+      disabled: props.optionDisabled?.(option),
     };
   });
 
@@ -187,8 +190,9 @@ export const AutocompleteMutliSelect = <T, V>(
                       onClick={() => {
                         handleSingleSelect(option);
                       }}
+                      disabled={option.disabled}
                     >
-                      {({ selected }) => (
+                      {({ active, selected }) => (
                         <>
                           <div className="flex justify-between">
                             {option.label}
@@ -198,9 +202,14 @@ export const AutocompleteMutliSelect = <T, V>(
                           </div>
                           {option.description && (
                             <p
-                              className={`font-normal ${
-                                selected ? "text-primary-200" : "text-gray-700"
-                              }`}
+                              className={classNames(
+                                "text-sm font-normal",
+                                option.disabled
+                                  ? "text-gray-700"
+                                  : active
+                                    ? "text-primary-200"
+                                    : "text-gray-700",
+                              )}
                             >
                               {option.description}
                             </p>

src/Components/Form/FormFields/SelectFormField.tsx

@@ -14,6 +14,7 @@ type SelectFormFieldProps<T, V = T> = FormFieldBaseProps<V> & {
   optionDescription?: OptionCallback<T, React.ReactNode>;
   optionIcon?: OptionCallback<T, React.ReactNode>;
   optionValue?: OptionCallback<T, V>;
+  optionDisabled?: OptionCallback<T, boolean>;
 };
 
 export const SelectFormField = <T, V>(props: SelectFormFieldProps<T, V>) => {
@@ -34,6 +35,7 @@ export const SelectFormField = <T, V>(props: SelectFormFieldProps<T, V>) => {
         optionDescription={props.optionDescription}
         optionIcon={props.optionIcon}
         optionValue={props.optionValue}
+        optionDisabled={props.optionDisabled}
         requiredError={field.error ? props.required : false}
       />
     </FormField>
@@ -48,6 +50,7 @@ type MultiSelectFormFieldProps<T, V = T> = FormFieldBaseProps<V[]> & {
   optionDescription?: OptionCallback<T, React.ReactNode>;
   optionIcon?: OptionCallback<T, React.ReactNode>;
   optionValue?: OptionCallback<T, V>;
+  optionDisabled?: OptionCallback<T, boolean>;
 };
 
 export const MultiSelectFormField = <T, V>(
@@ -67,6 +70,7 @@ export const MultiSelectFormField = <T, V>(
         optionSelectedLabel={props.optionSelectedLabel}
         optionDescription={props.optionDescription}
         optionIcon={props.optionIcon}
+        optionDisabled={props.optionDisabled}
         optionValue={props.optionValue}
       />
     </FormField>