Merge branch 'develop' into rithviknishad/fix/7600-live-feed-and-cns-…

…settings-and-filter

.env

@@ -1,7 +1,7 @@
 # Whitelabelling envs
 
 REACT_APP_TITLE=CARE
-REACT_APP_META_DESCRIPTION=CoronaSafe Network is an open-source public utility designed by a multi-disciplinary team of innovators and volunteers. CoronaSafe Care is a Digital Public Good recognised by United Nations.
+REACT_APP_META_DESCRIPTION=Revolutionizing EMR with AI: Open Healthcare Network develops free, open-source tools to enhance efficiency in global healthcare delivery. Our EMR system is recognized as a Digital Public Good by the United Nations.
 REACT_APP_COVER_IMAGE=https://cdn.coronasafe.network/care_logo.svg
 REACT_APP_COVER_IMAGE_ALT=https://cdn.coronasafe.network/care_logo.svg
 REACT_PUBLIC_URL=https://care.coronasafe.in

src/CAREUI/display/Count.tsx

@@ -19,11 +19,11 @@ export default function CountBlock(props: Props) {
           <CareIcon icon={props.icon} className="text-primary-600" />
         </div>
         <div>
-          <dt className="my-2 truncate text-sm font-semibold text-gray-700">
+          <dt className="my-2 truncate text-sm font-semibold text-secondary-700">
             {props.text}
           </dt>
           {props.loading ? (
-            <dd className="h-10 w-full max-w-[100px] animate-pulse rounded-lg bg-gray-300" />
+            <dd className="h-10 w-full max-w-[100px] animate-pulse rounded-lg bg-secondary-300" />
           ) : (
             <dd id="count" className="text-5xl font-black leading-9">
               {props.count}

src/CAREUI/display/FilterBadge.tsx

@@ -16,13 +16,13 @@ const FilterBadge = ({ name, value, onRemove }: FilterBadgeProps) => {
       data-testid={name}
       className={`${
         !value && "hidden"
-      } flex flex-row items-center rounded-full border border-gray-300 bg-white px-3 py-1 text-xs font-medium leading-4 text-gray-600`}
+      } flex flex-row items-center rounded-full border border-secondary-300 bg-white px-3 py-1 text-xs font-medium leading-4 text-secondary-600`}
     >
       {`${name}: ${value}`}
       <CareIcon
         id="removeicon"
         icon="l-times"
-        className="ml-2 box-content cursor-pointer rounded-full text-base hover:bg-gray-500"
+        className="ml-2 box-content cursor-pointer rounded-full text-base hover:bg-secondary-500"
         onClick={onRemove}
       />
     </span>

src/CAREUI/display/SubHeading.tsx

@@ -13,11 +13,11 @@ export default function SubHeading(props: Props) {
   return (
     <div className="flex flex-wrap items-center justify-between py-2">
       <div className="flex items-center">
-        <span className="text-lg font-semibold leading-relaxed text-gray-900">
+        <span className="text-lg font-semibold leading-relaxed text-secondary-900">
           {props.title}
         </span>
         {props.lastModified && (
-          <div className="ml-3 flex flex-row gap-2 text-xs font-medium text-gray-600">
+          <div className="ml-3 flex flex-row gap-2 text-xs font-medium text-secondary-600">
             <CareIcon icon="l-history-alt" className="text-sm" />
             <RecordMeta time={props.lastModified} prefix="Last modified" />
           </div>

src/CAREUI/display/Timeline.tsx

@@ -62,7 +62,7 @@ export const TimelineNode = (props: TimelineNodeProps) => {
           "absolute left-0 top-0 flex w-6 justify-center",
         )}
       >
-        <div className="w-px bg-gray-300" />
+        <div className="w-px bg-secondary-300" />
       </div>
 
       <div
@@ -81,9 +81,9 @@ export const TimelineNode = (props: TimelineNodeProps) => {
             {props.title || (
               <TimelineNodeTitle event={props.event}>
                 <div className="flex w-full justify-between gap-2">
-                  <p className="flex-auto py-0.5 text-xs leading-5 text-gray-600 md:w-2/3">
+                  <p className="flex-auto py-0.5 text-xs leading-5 text-secondary-600 md:w-2/3">
                     {props.event.by && (
-                      <span className="font-medium text-gray-900">
+                      <span className="font-medium text-secondary-900">
                         {props.event.by.username.startsWith("asset")
                           ? t("virtual_nursing_assistant")
                           : `${formatName(props.event.by)} ${
@@ -101,7 +101,7 @@ export const TimelineNode = (props: TimelineNodeProps) => {
                       <TimelineNodeActions>{props.actions}</TimelineNodeActions>
                     )}
                     <RecordMeta
-                      className="flex-none py-0.5 text-xs leading-5 text-gray-500"
+                      className="flex-none py-0.5 text-xs leading-5 text-secondary-500"
                       time={props.event.timestamp}
                     />
                   </div>
@@ -131,13 +131,13 @@ export const TimelineNodeTitle = (props: TimelineNodeTitleProps) => {
       <div
         className={classNames(
           props.event.iconWrapperStyle,
-          "relative flex h-6 w-6 flex-none items-center justify-center rounded-full bg-gray-200 transition-all duration-200 ease-in-out group-hover:bg-primary-500",
+          "relative flex h-6 w-6 flex-none items-center justify-center rounded-full bg-secondary-200 transition-all duration-200 ease-in-out group-hover:bg-primary-500",
         )}
       >
         <CareIcon
           className={classNames(
             props.event.iconStyle,
-            "text-base text-gray-700 transition-all duration-200 ease-in-out group-hover:text-white",
+            "text-base text-secondary-700 transition-all duration-200 ease-in-out group-hover:text-white",
           )}
           aria-hidden="true"
           icon={props.event.icon}
@@ -171,9 +171,11 @@ export const TimelineNodeNotes = ({
   }
 
   return (
-    <div className="flex w-full items-start gap-2 rounded-md p-3 ring-1 ring-inset ring-gray-200">
-      <CareIcon icon={icon} className="text-lg text-gray-700" />
-      <div className="mt-1 flex-auto text-xs text-gray-700">{children}</div>
+    <div className="flex w-full items-start gap-2 rounded-md p-3 ring-1 ring-inset ring-secondary-200">
+      <CareIcon icon={icon} className="text-lg text-secondary-700" />
+      <div className="mt-1 flex-auto text-xs text-secondary-700">
+        {children}
+      </div>
     </div>
   );
 };

src/CAREUI/interactive/LegendInput.tsx

@@ -127,7 +127,7 @@ export default function LegendInput(props: InputProps) {
           required={props.required}
           autoComplete={props.autoComplete}
           className={classNames(
-            "cui-input w-full rounded-md border-gray-300 bg-gray-50 shadow-sm focus:border-2 focus:border-primary-500 focus:bg-gray-100 focus:outline-none focus:ring-0",
+            "cui-input bg-secondary-50 w-full rounded-md border-secondary-300 shadow-sm focus:border-2 focus:border-primary-500 focus:bg-secondary-100 focus:outline-none focus:ring-0",
             props.size === "small" && "px-3 py-2 text-xs",
             (!props.size || !["small", "large"].includes(props.size)) &&
               "px-4 py-3",

src/CAREUI/interactive/ScrollOverlay.tsx

@@ -19,7 +19,7 @@ export default function ScrollOverlay(props: Props) {
       <div ref={ref as any} />
       <div
         className={classNames(
-          "sticky inset-x-0 -bottom-3.5 z-10 flex items-end justify-center bg-gradient-to-t from-gray-900/90 to-transparent text-white transition-all duration-500 ease-in-out md:bottom-0",
+          "sticky inset-x-0 -bottom-3.5 z-10 flex items-end justify-center bg-gradient-to-t from-secondary-900/90 to-transparent text-white transition-all duration-500 ease-in-out md:bottom-0",
           hasScrollContent ? "h-16 opacity-75" : "h-0 opacity-0",
         )}
       >

src/CAREUI/interactive/Switch.tsx

@@ -26,7 +26,7 @@ export default function Switch<T extends string>({
               size === "lg" && "px-4 py-3 text-base",
               props.selected === tab
                 ? "border-primary-500 bg-primary-500 font-semibold text-white hover:bg-primary-600 focus:border-primary-500 focus:ring-primary-500"
-                : "border-gray-400 bg-gray-50 hover:bg-gray-200 focus:border-primary-500 focus:ring-primary-500",
+                : "bg-secondary-50 border-secondary-400 hover:bg-secondary-200 focus:border-primary-500 focus:ring-primary-500",
             )}
             onClick={() => props.onChange(tab as T)}
           >

src/Common/hooks/useFilters.tsx

@@ -4,7 +4,7 @@ import { useTranslation } from "react-i18next";
 import GenericFilterBadge from "../../CAREUI/display/FilterBadge";
 import PaginationComponent from "../../Components/Common/Pagination";
 import useConfig from "./useConfig";
-import { classNames } from "../../Utils/utils";
+import { classNames, humanizeStrings } from "../../Utils/utils";
 import FiltersCache from "../../Utils/FiltersCache";
 
 export type FilterState = Record<string, unknown>;
@@ -87,10 +87,7 @@ export default function useFilters({
           name={name}
           value={
             value === undefined
-              ? paramKey
-                  .map((k) => qParams[k])
-                  .filter(Boolean)
-                  .join(", ")
+              ? humanizeStrings(paramKey.map((k) => qParams[k]).filter(Boolean))
               : value
           }
           onRemove={() => removeFilters(paramKey)}
@@ -196,7 +193,7 @@ export default function useFilters({
         {(activeFilters.length >= 1 || children) && (
           <button
             id="clear-all-filters"
-            className="rounded-full border border-gray-300 bg-white px-2 py-1 text-xs text-gray-600 hover:text-gray-800"
+            className="rounded-full border border-secondary-300 bg-white px-2 py-1 text-xs text-secondary-600 hover:text-secondary-800"
             onClick={() => removeFilters()}
           >
             {t("clear_all_filters")}

src/Common/utils.tsx

@@ -1,6 +1,7 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import { useEffect } from "react";
 import { OptionsType } from "./constants";
+import { humanizeStrings } from "../Utils/utils";
 
 export interface statusType {
   aborted?: boolean;
@@ -34,14 +35,15 @@ export const parseOptionId: (
   options: readonly OptionsType[],
   id: string | string[],
 ) => string = (options, id) => {
-  const textArray = options
-    .filter((option) => {
-      return id instanceof Array
-        ? id.map((i) => String(i)).includes(String(option.id))
-        : String(option.id) === String(id);
-    })
-    .map((option) => option.text);
-  return textArray.join(", ");
+  return humanizeStrings(
+    options
+      .filter((option) => {
+        return id instanceof Array
+          ? id.map((i) => String(i)).includes(String(option.id))
+          : String(option.id) === String(id);
+      })
+      .map((option) => option.text),
+  );
 };
 
 export const deepEqual = (x: any, y: any): boolean => {

src/Components/ABDM/ABDMFacilityRecords.tsx

@@ -44,13 +44,13 @@ export default function ABDMFacilityRecords({ facilityId }: IProps) {
             <div className="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8">
               {/* eslint-disable-next-line tailwindcss/migration-from-tailwind-2 */}
               <div className="overflow-hidden shadow ring-1 ring-black ring-opacity-5  sm:rounded-lg">
-                <table className="min-w-full table-fixed divide-y divide-gray-300">
-                  <thead className="bg-gray-50">
+                <table className="min-w-full table-fixed divide-y divide-secondary-300">
+                  <thead className="bg-secondary-50">
                     <tr>
                       {TableHeads.map((head) => (
                         <th
                           scope="col"
-                          className="px-3 py-3.5 text-center text-sm font-semibold text-gray-900"
+                          className="px-3 py-3.5 text-center text-sm font-semibold text-secondary-900"
                         >
                           {head}
                         </th>
@@ -62,20 +62,20 @@ export default function ABDMFacilityRecords({ facilityId }: IProps) {
                         <ButtonV2
                           onClick={() => refetch()}
                           ghost
-                          className="max-w-2xl text-sm text-gray-700 hover:text-gray-900"
+                          className="max-w-2xl text-sm text-secondary-700 hover:text-secondary-900"
                         >
                           <CareIcon icon="l-refresh" /> Refresh
                         </ButtonV2>
                         <span className="sr-only">View</span>
                       </th>
                     </tr>
                   </thead>
-                  <tbody className="divide-y divide-gray-200 bg-white">
+                  <tbody className="divide-y divide-secondary-200 bg-white">
                     {consentsResult?.results.map((consent) => (
                       <tr key={consent.id}>
                         <td className="px-3 py-4 text-center text-sm">
                           {consent.patient_abha_object?.name}
-                          <p className="text-gray-600">
+                          <p className="text-secondary-600">
                             ({consent.patient_abha})
                           </p>
                         </td>
@@ -104,7 +104,7 @@ export default function ABDMFacilityRecords({ facilityId }: IProps) {
 
                         {/* <td className="px-3 py-4 text-center text-sm">
                           {`${consent.requester?.first_name} ${consent.requester?.last_name}`.trim()}
-                          <p className="text-gray-600">
+                          <p className="text-secondary-600">
                             ({consent.requester.username})
                           </p>
                         </td> */}
@@ -134,7 +134,7 @@ export default function ABDMFacilityRecords({ facilityId }: IProps) {
                               consent.consent_artefacts?.[0]?.hi_types ??
                               consent.hi_types
                             )?.map((hiType) => (
-                              <span className="mb-2 mr-2 rounded-full bg-gray-100 px-2 py-1 text-xs font-medium text-gray-600">
+                              <span className="mb-2 mr-2 rounded-full bg-secondary-100 px-2 py-1 text-xs font-medium text-secondary-600">
                                 {hiType}
                               </span>
                             ))}
@@ -159,7 +159,7 @@ export default function ABDMFacilityRecords({ facilityId }: IProps) {
                                 View
                               </Link>
                             ) : (
-                              <p className="cursor-not-allowed text-gray-600 opacity-70 ">
+                              <p className="cursor-not-allowed text-secondary-600 opacity-70 ">
                                 View
                               </p>
                             )}