Merge branch 'develop' into issues/8264-VentilatorData-ConsultationPage

.devcontainer/devcontainer.json

@@ -26,7 +26,7 @@
     "cpus": 4
   },
   "waitFor": "onCreateCommand",
-  "postCreateCommand": "npm install",
+  "postCreateCommand": "npm run install-all",
   "postAttachCommand": {
     "server": "npm run dev"
   },

.github/workflows/cypress.yaml

@@ -70,7 +70,7 @@ jobs:
           node-version: "20"
 
       - name: Install dependencies 📦
-        run: npm install
+        run: npm run install-all
 
       - name: Build ⚙️
         run: npm run build

Dockerfile

@@ -13,6 +13,8 @@ RUN npm install
 
 COPY . .
 
+RUN npm run setup
+
 RUN npm run build
 
 

cypress/pageobject/Facility/FacilityHome.ts

@@ -72,7 +72,7 @@ class FacilityHome {
   }
 
   verifyOccupancyBadgeVisibility() {
-    cy.get("#occupany-badge").should("be.visible");
+    cy.get('[data-test-id="occupancy-badge"]').should("be.visible");
   }
 
   verifyAndCloseNotifyModal() {

package.json

@@ -47,7 +47,8 @@
     "prepare": "husky install",
     "lint": "eslint ./src",
     "lint-fix": "eslint ./src --fix",
-    "format": "prettier ./src --write"
+    "format": "prettier ./src --write",
+    "sort-locales": "node ./scripts/sort-locales.js"
   },
   "dependencies": {
     "@fontsource/figtree": "^5.1.0",
@@ -163,10 +164,13 @@
       "prettier --write --ignore-unknown --plugin prettier-plugin-tailwindcss",
       "eslint --fix",
       "git update-index --again"
+    ],
+    "src/Locale/*.json": [
+      "npm run sort-locales"
     ]
   },
   "engines": {
     "node": ">=20.12.0"
   },
   "packageManager": "[email protected]"
-}
+}

scripts/sort-locales.js

@@ -0,0 +1,15 @@
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const fs = require("fs");
+
+const file = "src/Locale/en.json";
+
+const data = JSON.parse(fs.readFileSync(file, "utf8"));
+
+const sortedData = Object.keys(data)
+  .sort()
+  .reduce((acc, key) => {
+    acc[key] = data[key];
+    return acc;
+  }, {});
+
+fs.writeFileSync(file, JSON.stringify(sortedData, null, 2) + "\n");

src/CAREUI/display/Count.tsx

@@ -11,15 +11,13 @@ interface Props {
 
 export default function CountBlock(props: Props) {
   return (
-    <div
-      className={classNames("rounded-lg bg-white p-4 shadow", props.className)}
-    >
-      <dl>
-        <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-primary-100 text-xl">
+    <div className={classNames("rounded-lg", props.className)}>
+      <dl className="flex gap-3">
+        <div className="flex aspect-square h-16 items-center justify-center rounded-lg border border-black/10 bg-primary-100 text-2xl">
           <CareIcon icon={props.icon} className="text-primary-600" />
         </div>
         <div>
-          <dt className="my-2 truncate text-sm font-semibold text-secondary-700">
+          <dt className="mb-1 truncate text-sm font-semibold text-secondary-700">
             {props.text}
           </dt>
           {props.loading ? (

src/Components/Common/Avatar.tsx

@@ -1,4 +1,5 @@
-import React from "react";
+import { cn } from "@/lib/utils";
+import React, { useEffect, useRef, useState } from "react";
 
 const colors: string[] = [
   "#E6F3FF", // Light Blue
@@ -44,43 +45,54 @@ const initials = (name: string): string => {
 interface AvatarProps {
   colors?: [string, string];
   name: string;
+  imageUrl?: string;
   className?: string;
-  square?: boolean; // New prop to determine if the avatar should be square
 }
 
 const Avatar: React.FC<AvatarProps> = ({
   colors: propColors,
   name,
+  imageUrl,
   className,
-  square = false, // Default to false for backwards compatibility
 }) => {
-  const [bgColor, fgColor] = propColors || toColor(name);
+  const [bgColor] = propColors || toColor(name);
+  const [width, setWidth] = useState(0);
+  const avatarRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const updateWidth = () => {
+      const avatarRect = avatarRef.current?.getBoundingClientRect();
+      const width = avatarRect?.width || 0;
+      setWidth(width);
+    };
+    updateWidth();
+    document.addEventListener("resize", updateWidth);
+    return () => document.removeEventListener("resize", updateWidth);
+  }, []);
 
   return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      version="1.1"
-      viewBox="0 0 100 100"
-      className={className}
+    <div
+      ref={avatarRef}
+      className={cn(
+        `flex aspect-square w-full items-center justify-center overflow-hidden border border-black/10 font-black text-black/10`,
+        className,
+      )}
+      style={{
+        background: bgColor,
+        borderRadius: width / 15 + "px",
+        fontSize: width / 2.5 + "px",
+      }}
     >
-      {square ? (
-        <rect width="100" height="100" fill={bgColor} />
+      {imageUrl ? (
+        <img
+          src={imageUrl}
+          alt={name}
+          className="aspect-square w-full object-cover"
+        />
       ) : (
-        <circle cx="50" cy="50" r="50" fill={bgColor} />
+        <div>{initials(name)}</div>
       )}
-      <text
-        fill={fgColor}
-        fontSize="42"
-        fontFamily="sans-serif"
-        x="50"
-        y="54"
-        textAnchor="middle"
-        dominantBaseline="middle"
-        alignmentBaseline="middle"
-      >
-        {initials(name)}
-      </text>
-    </svg>
+    </div>
   );
 };
 

src/Components/Common/Sidebar/SidebarUserCard.tsx

@@ -40,7 +40,7 @@ const SidebarUserCard: React.FC<SidebarUserCardProps> = ({ shrinked }) => {
               <div className="flex-none text-lg">
                 <Avatar
                   name={formatDisplayName(user)}
-                  className="w-8 text-sm font-medium"
+                  className="h-8 rounded-full text-black/50"
                 />
               </div>
               <div className="max-w-32">

src/Components/Facility/FacilityBlock.tsx

@@ -1,32 +1,41 @@
 import { Link } from "raviger";
 import { FacilityModel } from "./models";
+import { ReactNode } from "react";
 import { Avatar } from "@/Components/Common/Avatar";
 
-export default function FacilityBlock(props: { facility: FacilityModel }) {
-  const { facility } = props;
+export default function FacilityBlock(props: {
+  facility: FacilityModel;
+  redirect?: boolean;
+}) {
+  const { facility, redirect = true } = props;
+
+  const Element = (props: { children: ReactNode; className?: string }) =>
+    redirect ? (
+      <Link
+        target="_blank"
+        href={`/facility/${facility.id}`}
+        className={props.className}
+      >
+        {props.children}
+      </Link>
+    ) : (
+      <button className={props.className}>{props.children}</button>
+    );
 
   return (
-    <Link
-      className="flex items-center gap-4 text-inherit"
-      target="_blank"
-      href={`/facility/${facility.id}`}
-    >
-      <div className="flex aspect-square h-14 shrink-0 items-center justify-center overflow-hidden rounded-lg border border-gray-400 bg-gray-200">
-        {facility.read_cover_image_url ? (
-          <img
-            className="h-full w-full object-cover"
-            src={facility.read_cover_image_url}
-          />
-        ) : (
-          <Avatar name={facility.name!} square={true} />
-        )}
+    <Element className="flex items-center gap-4 text-left text-inherit">
+      <div className="flex aspect-square h-14 shrink-0 items-center justify-center overflow-hidden">
+        <Avatar
+          name={facility.name!}
+          imageUrl={facility.read_cover_image_url}
+        />
       </div>
       <div>
         <b className="font-semibold">{facility.name}</b>
         <p className="text-sm">
           {facility.address} {facility.local_body_object?.name}
         </p>
       </div>
-    </Link>
+    </Element>
   );
 }