Fixes multiple tiny issues (ohcnetwork#8784)

JavidSumra · Oct 16, 2024 · b02062a · b02062a
1 parent e8f898e
commit b02062a
Show file tree

Hide file tree

Showing 23 changed files with 75 additions and 103 deletions.
diff --git a/public/favicon-light.ico b/public/favicon-light.ico
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,6 +1,5 @@
 import { Suspense } from "react";
 import Routers from "./Routers";
-import ThemedFavicon from "./CAREUI/misc/ThemedFavicon";
 import Integrations from "./Integrations";
 import Loading from "./Components/Common/Loading";
 import HistoryAPIProvider from "./Providers/HistoryAPIProvider";
@@ -11,7 +10,6 @@ import { Toaster } from "./Components/ui/toaster";
 const App = () => {
   return (
     <Suspense fallback={<Loading />}>
-      <ThemedFavicon />
       <HistoryAPIProvider>
         <AuthUserProvider unauthorized={<Routers.SessionRouter />}>
           <FeatureFlagsProvider>

diff --git a/src/CAREUI/misc/PaginatedList.tsx b/src/CAREUI/misc/PaginatedList.tsx
@@ -33,6 +33,8 @@ function useContextualized<TItem>() {
 interface Props<TItem> extends QueryOptions<PaginatedResponse<TItem>> {
   route: QueryRoute<PaginatedResponse<TItem>>;
   perPage?: number;
+  initialPage?: number;
+  onPageChange?: (page: number) => void;
   queryCB?: (
     query: ReturnType<typeof useQuery<PaginatedResponse<TItem>>>,
   ) => void;
@@ -49,7 +51,13 @@ export default function PaginatedList<TItem extends object>({
   queryCB,
   ...queryOptions
 }: Props<TItem>) {
-  const [currentPage, setPage] = useState(1);
+  const [currentPage, _setPage] = useState(queryOptions.initialPage ?? 1);
+
+  const setPage = (page: number) => {
+    _setPage(page);
+    queryOptions.onPageChange?.(page);
+  };
+
   const query = useQuery(route, {
     ...queryOptions,
     query: {

diff --git a/src/CAREUI/misc/ThemedFavicon.tsx b/src/CAREUI/misc/ThemedFavicon.tsx
diff --git a/src/Components/ABDM/LinkABHANumberModal.tsx b/src/Components/ABDM/LinkABHANumberModal.tsx
@@ -225,7 +225,6 @@ const ScanABHAQRSection = ({
               Notify.Error({ msg: "Linking Failed" });
             }
           } catch (e) {
-            console.log(e);
             Notify.Error({ msg: "Invalid ABHA QR" });
           } finally {
             setIsLoading(false);

diff --git a/src/Components/Assets/AssetsList.tsx b/src/Components/Assets/AssetsList.tsx
@@ -159,7 +159,6 @@ const AssetsList = () => {
         });
       }
     } catch (err) {
-      console.log(err);
       Notification.Error({
         msg: t("invalid_asset_id_msg"),
       });

diff --git a/src/Components/Common/Breadcrumbs.tsx b/src/Components/Common/Breadcrumbs.tsx
@@ -58,8 +58,8 @@ export default function Breadcrumbs({
       style: replacements[field]?.style || "",
     }));
 
-  const renderCrumb = (crumb: any, index: number, array: any[]) => {
-    const isLastItem = index === array.length - 1;
+  const renderCrumb = (crumb: any, index: number) => {
+    const isLastItem = index === crumbs!.length - 1;
     return (
       <li
         key={crumb.name}
@@ -139,9 +139,8 @@ export default function Breadcrumbs({
             {showFullPath && crumbs.slice(0, -1).map(renderCrumb)}
           </>
         )}
-        {crumbs &&
-          crumbs.length > 0 &&
-          renderCrumb(crumbs[crumbs.length - 1], crumbs.length - 1, crumbs)}
+        {crumbs?.length &&
+          renderCrumb(crumbs[crumbs.length - 1], crumbs.length - 1)}
       </ol>
     </nav>
   );

diff --git a/src/Components/Common/Sidebar/Sidebar.tsx b/src/Components/Common/Sidebar/Sidebar.tsx
@@ -104,11 +104,11 @@ const StatelessSidebar = ({
           : "overflow-y-auto overflow-x-hidden"
       }`}
     >
-      {shrinked && (
+      {setShrinked && shrinked && (
         <div>
           <ToggleShrink
             shrinked={shrinked}
-            toggle={() => setShrinked && setShrinked(!shrinked)}
+            toggle={() => setShrinked(!shrinked)}
           />
         </div>
       )}
@@ -123,11 +123,11 @@ const StatelessSidebar = ({
             src={shrinked ? LOGO_COLLAPSE : careConfig.mainLogo?.light}
           />
         </Link>
-        {!shrinked && (
+        {setShrinked && !shrinked && (
           <div className="ml-1">
             <ToggleShrink
               shrinked={shrinked}
-              toggle={() => setShrinked && setShrinked(!shrinked)}
+              toggle={() => setShrinked(!shrinked)}
             />
           </div>
         )}
@@ -220,7 +220,7 @@ interface ToggleShrinkProps {
 
 const ToggleShrink = ({ shrinked, toggle }: ToggleShrinkProps) => (
   <div
-    className={`flex h-5 w-5 cursor-pointer items-center justify-center self-end rounded bg-gray-300 text-secondary-100 text-opacity-70 hover:bg-primary-700 hover:text-opacity-100 ${
+    className={`flex h-5 w-5 cursor-pointer items-center justify-center self-end rounded bg-gray-300 text-secondary-100 text-opacity-70 hover:bg-secondary-500 hover:text-opacity-100 ${
       shrinked ? "mx-auto" : "mr-4"
     } transition-all duration-200 ease-in-out`}
     onClick={toggle}

diff --git a/src/Components/Common/Sidebar/SidebarUserCard.tsx b/src/Components/Common/Sidebar/SidebarUserCard.tsx
@@ -43,13 +43,7 @@ const SidebarUserCard: React.FC<SidebarUserCardProps> = ({ shrinked }) => {
           id="sign-out-button"
           className={`flex h-full items-center justify-start transition-all duration-200 ease-in-out ${shrinked ? "pl-2" : "pl-5 pr-4"}`}
         >
-          <div className="flex-none text-lg">
-            <CareIcon
-              icon="l-sign-out-alt"
-              className="text-2xl text-gray-900"
-            />
-          </div>
-
+          <CareIcon icon="l-sign-out-alt" className="text-2xl text-gray-900" />
           {!shrinked && (
             <div className="flex w-full items-center pl-4 text-sm tracking-wide text-gray-900">
               {t("sign_out")}

diff --git a/src/Components/Facility/DischargedPatientsList.tsx b/src/Components/Facility/DischargedPatientsList.tsx
@@ -47,15 +47,16 @@ const DischargedPatientsList = ({
     pathParams: { id: facility_external_id },
   });
 
-  const { qParams, updateQuery, advancedFilter, FilterBadges } = useFilters({
-    limit: 12,
-    cacheBlacklist: [
-      "name",
-      "patient_no",
-      "phone_number",
-      "emergency_phone_number",
-    ],
-  });
+  const { qParams, updateQuery, advancedFilter, FilterBadges, updatePage } =
+    useFilters({
+      limit: 12,
+      cacheBlacklist: [
+        "name",
+        "patient_no",
+        "phone_number",
+        "emergency_phone_number",
+      ],
+    });
 
   useEffect(() => {
     if (!qParams.phone_number && phone_number.length >= 13) {
@@ -434,10 +435,9 @@ const DischargedPatientsList = ({
         route={routes.listFacilityDischargedPatients}
         pathParams={{ facility_external_id }}
         query={{ ordering: "-modified_date", ...qParams }}
-        queryCB={(query) => {
-          setCount(query.data?.count || 0);
-          console.log(query.data?.count);
-        }}
+        queryCB={(query) => setCount(query.data?.count || 0)}
+        initialPage={qParams.page}
+        onPageChange={updatePage}
       >
         {() => (
           <div className="flex flex-col gap-4">

diff --git a/src/Components/Facility/FacilityBlock.tsx b/src/Components/Facility/FacilityBlock.tsx
@@ -1,6 +1,6 @@
 import { Link } from "raviger";
-import CareIcon from "../../CAREUI/icons/CareIcon";
 import { FacilityModel } from "./models";
+import { Avatar } from "@/Components/Common/Avatar";
 
 export default function FacilityBlock(props: { facility: FacilityModel }) {
   const { facility } = props;
@@ -18,9 +18,7 @@ export default function FacilityBlock(props: { facility: FacilityModel }) {
             src={facility.read_cover_image_url}
           />
         ) : (
-          <>
-            <CareIcon icon="l-hospital" />
-          </>
+          <Avatar name={facility.name!} square={true} />
         )}
       </div>
       <div>

diff --git a/src/Components/Facility/FacilityCard.tsx b/src/Components/Facility/FacilityCard.tsx
@@ -61,12 +61,7 @@ export const FacilityCard = (props: { facility: any; userType: any }) => {
                   alt={facility.name}
                   className="h-full max-h-32 w-full object-cover"
                 />
-              )) || (
-                <CareIcon
-                  icon="l-hospital"
-                  className="block text-7xl text-secondary-500"
-                />
-              )}
+              )) || <Avatar name={facility.name} square={true} />}
             </Link>
 
             <div className="mx-auto flex h-fit w-full max-w-full flex-col flex-wrap justify-between md:h-full lg:max-w-3xl">

diff --git a/src/Components/Facility/FacilityHome.tsx b/src/Components/Facility/FacilityHome.tsx
@@ -43,6 +43,7 @@ type Props = {
 };
 
 import Loading from "@/Components/Common/Loading";
+import { Avatar } from "@/Components/Common/Avatar.js";
 export const getFacilityFeatureIcon = (featureId: number) => {
   const feature = FACILITY_FEATURE_TYPES.find((f) => f.id === featureId);
   if (!feature?.icon) return null;
@@ -124,7 +125,7 @@ export const FacilityHome = ({ facilityId }: Props) => {
       onClick={() => setEditCoverImage(true)}
     >
       <CareIcon icon="l-pen" className="text-lg" />
-      <span className="mt-2">{`${hasCoverImage ? "Edit" : "Upload"}`}</span>
+      <span className="mt-2">{t(hasCoverImage ? "edit" : "upload")}</span>
     </div>
   );
 
@@ -181,11 +182,7 @@ export const FacilityHome = ({ facilityId }: Props) => {
             hasPermissionToEditCoverImage && setEditCoverImage(true)
           }
         >
-          <CareIcon
-            icon="l-hospital"
-            className="block p-10 text-4xl text-secondary-500"
-            aria-hidden="true"
-          />
+          <Avatar name={facilityData?.name ?? ""} square={true} />
           {editCoverImageTooltip}
         </div>
       )}
@@ -210,13 +207,7 @@ export const FacilityHome = ({ facilityId }: Props) => {
                     <CoverImage />
                   ) : (
                     <div className="flex h-80 w-[88px] items-center justify-center rounded-lg bg-secondary-200 font-medium text-secondary-700 lg:h-80 lg:w-80">
-                      <svg
-                        className="h-8 w-8 fill-current text-secondary-500"
-                        viewBox="0 0 40 32"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path d="M18.5 6C18.5 5.4475 18.95 5 19.5 5H20.5C21.05 5 21.5 5.4475 21.5 6V7.5H23C23.55 7.5 24 7.95 24 8.5V9.5C24 10.05 23.55 10.5 23 10.5H21.5V12C21.5 12.55 21.05 13 20.5 13H19.5C18.95 13 18.5 12.55 18.5 12V10.5H17C16.45 10.5 16 10.05 16 9.5V8.5C16 7.95 16.45 7.5 17 7.5H18.5V6ZM25.5 0C27.9875 0 30 2.015 30 4.5V5H35.5C37.9875 5 40 7.0125 40 9.5V27.5C40 29.9875 37.9875 32 35.5 32H4.49875C2.01188 32 0 29.9875 0 27.5V9.5C0 7.0125 2.015 5 4.5 5H10V4.5C10 2.015 12.0125 0 14.5 0H25.5ZM30 8V29H35.5C36.3312 29 37 28.3313 37 27.5V21H33.5C32.6688 21 32 20.3313 32 19.5C32 18.6688 32.6688 18 33.5 18H37V15H33.5C32.6688 15 32 14.3313 32 13.5C32 12.6688 32.6688 12 33.5 12H37V9.5C37 8.66875 36.3312 8 35.5 8H30ZM3 9.5V12H6.5C7.33125 12 8 12.6688 8 13.5C8 14.3313 7.33125 15 6.5 15H3V18H6.5C7.33125 18 8 18.6688 8 19.5C8 20.3313 7.33125 21 6.5 21H3V27.5C3 28.3313 3.67125 29 4.49875 29H10V8H4.5C3.67188 8 3 8.66875 3 9.5ZM13 29H17V25C17 23.3438 18.3438 22 20 22C21.6562 22 23 23.3438 23 25V29H27V4.5C27 3.67188 26.3312 3 25.5 3H14.5C13.6688 3 13 3.67188 13 4.5V29Z" />
-                      </svg>
+                      <Avatar name={facilityData?.name ?? ""} square={true} />
                     </div>
                   )}
                   {editCoverImageTooltip}
@@ -291,7 +282,10 @@ export const FacilityHome = ({ facilityId }: Props) => {
                             </h1>
                             <div className="mt-4 grid grid-cols-1 gap-4 xl:grid-cols-2">
                               {spokesQuery.data?.results.map((spoke) => (
-                                <FacilityBlock facility={spoke.spoke_object} />
+                                <FacilityBlock
+                                  key={spoke.id}
+                                  facility={spoke.spoke_object}
+                                />
                               ))}
                             </div>
                           </div>

diff --git a/src/Components/Facility/LocationManagement.tsx b/src/Components/Facility/LocationManagement.tsx
@@ -16,6 +16,7 @@ import useAuthUser from "../../Common/hooks/useAuthUser";
 import useQuery from "../../Utils/request/useQuery";
 
 import Loading from "@/Components/Common/Loading";
+import { cn } from "@/lib/utils";
 interface Props {
   facilityId: string;
 }
@@ -87,14 +88,14 @@ export default function LocationManagement({ facilityId }: Props) {
               id="add-new-location"
               href={`/facility/${facilityId}/location/add`}
               authorizeFor={NonReadOnlyUsers}
-              className="mr-4 hidden lg:block"
+              className="hidden lg:block"
             >
               <CareIcon icon="l-plus" className="text-lg" />
               Add New Location
             </ButtonV2>
           }
         >
-          <div className="mx-auto">
+          <div className="mx-auto mt-4 lg:mt-0">
             <ButtonV2
               href={`/facility/${facilityId}/location/add`}
               authorizeFor={NonReadOnlyUsers}
@@ -112,7 +113,7 @@ export default function LocationManagement({ facilityId }: Props) {
             <PaginatedList.WhenLoading>
               <Loading />
             </PaginatedList.WhenLoading>
-            <PaginatedList.Items<LocationModel> className="my-8 grid gap-3 @4xl:grid-cols-2 @6xl:grid-cols-3 @[100rem]:grid-cols-4 lg:mx-8">
+            <PaginatedList.Items<LocationModel> className="my-8 grid gap-3 @4xl:grid-cols-2 @6xl:grid-cols-3 @[100rem]:grid-cols-4">
               {(item) => (
                 <Location
                   setShowDeletePopup={setShowDeletePopup}
@@ -225,18 +226,14 @@ const Location = ({
   setShowDeletePopup,
   facilityId,
 }: LocationProps) => {
-  const { loading, data } = useQuery(routes.listFacilityBeds, {
+  const bedsQuery = useQuery(routes.listFacilityBeds, {
     query: {
       facility: facilityId,
       location: id,
     },
   });
 
-  const totalBeds = data?.count ?? 0;
-
-  if (loading) {
-    return <Loading />;
-  }
+  const totalBeds = bedsQuery.data?.count;
 
   return (
     <div className="flex h-full w-full flex-col rounded border border-secondary-300 bg-white p-6 shadow-sm transition-all duration-200 ease-in-out hover:border-primary-400">
@@ -290,13 +287,16 @@ const Location = ({
         id="manage-bed-button"
         variant="secondary"
         border
-        className="mt-3 flex w-full items-center justify-between"
+        className={cn(
+          "mt-3 flex w-full items-center justify-between",
+          totalBeds != null && "opacity-50",
+        )}
         href={`location/${id}/beds`}
       >
         Manage Beds
         <span className="flex items-center justify-center gap-2">
           <CareIcon icon="l-bed" className="text-lg" />
-          {totalBeds}
+          {totalBeds ?? "--"}
         </span>
       </ButtonV2>
       <div className="mt-2 flex w-full flex-col gap-2 md:flex-row">

diff --git a/src/Components/Patient/ManagePatients.tsx b/src/Components/Patient/ManagePatients.tsx
@@ -471,7 +471,7 @@ export const PatientManager = () => {
 
   let patientList: ReactNode[] = [];
   if (data?.count) {
-    patientList = data.results.map((patient: any) => {
+    patientList = data.results.map((patient) => {
       let patientUrl = "";
       if (
         patient.last_consultation &&
@@ -506,7 +506,7 @@ export const PatientManager = () => {
             </span>
           </div>
           <div className="flex flex-col items-start gap-4 md:flex-row">
-            <div className="h-20 w-full min-w-20 rounded-lg border border-secondary-300 bg-secondary-50 md:w-20">
+            <div className="w-full min-w-20 rounded-lg border border-secondary-300 bg-secondary-50 md:h-20 md:w-20">
               {patient?.last_consultation?.current_bed &&
               patient?.last_consultation?.discharge_date === null ? (
                 <div className="tooltip flex h-full flex-col items-center justify-center">
@@ -541,9 +541,10 @@ export const PatientManager = () => {
                   </div>
                 </div>
               ) : (
-                <div className="flex min-h-20 items-center justify-center">
+                <div className="flex items-center justify-center">
                   <Avatar
-                    name={patient.name}
+                    className="size-10 md:size-auto"
+                    name={patient.name!}
                     square={true}
                     colors={["#F9FAFB", "#BFB8CB"]}
                   />

diff --git a/src/Components/Patient/PatientConsentRecordBlock.tsx b/src/Components/Patient/PatientConsentRecordBlock.tsx
@@ -70,10 +70,7 @@ export default function PatientConsentRecordBlockGroup(props: {
           <SelectFormField
             name="patient_code_status"
             className="flex-1"
-            onChange={(e) => {
-              console.log(e.value);
-              setPatientCodeStatus(e.value);
-            }}
+            onChange={(e) => setPatientCodeStatus(e.value)}
             value={
               CONSENT_PATIENT_CODE_STATUS_CHOICES.find(
                 (c) => c.id === patientCodeStatus,