Show skills of treating doctor in consultation dashboard

src/Components/Patient/PatientInfoCard.tsx

@@ -37,7 +37,27 @@ import { Mews } from "../Facility/Consultations/Mews.js";
 import DischargeSummaryModal from "../Facility/DischargeSummaryModal.js";
 import DischargeModal from "../Facility/DischargeModal.js";
 import { useTranslation } from "react-i18next";
+import useQuery from "../../Utils/request/useQuery.js";
 import FetchRecordsModal from "../ABDM/FetchRecordsModal.js";
+import { SkillModel } from "../Users/models.js";
+
+const formatSkills = (arr: SkillModel[]) => {
+  const skills = arr.map((skill) => skill.skill_object.name);
+
+  if (skills.length === 1) {
+    return skills[0];
+  }
+
+  if (skills.length === 2) {
+    return `${skills[0]} and ${skills[1]}`;
+  }
+
+  if (skills.length === 3) {
+    return `${skills[0]}, ${skills[1]} and ${skills[2]}`;
+  }
+
+  return `${skills[0]}, ${skills[1]} and ${skills.length - 2} other skills...`;
+};
 
 export default function PatientInfoCard(props: {
   patient: PatientModel;
@@ -113,6 +133,12 @@ export default function PatientInfoCard(props: {
 
     return false;
   };
+  const skillsQuery = useQuery(routes.userListSkill, {
+    pathParams: {
+      username: consultation?.treating_physician_object?.username ?? "",
+    },
+    prefetch: !!consultation?.treating_physician_object?.username,
+  });
 
   return (
     <>
@@ -450,7 +476,7 @@ export default function PatientInfoCard(props: {
                   : null}
                 {(consultation?.treating_physician_object ||
                   consultation?.deprecated_verified_by) && (
-                  <div className="text-sm" id="treating-physician">
+                  <span className="space-x-1 text-sm" id="treating-physician">
                     <span className="font-semibold leading-relaxed">
                       {t("treating_doctor")}:{" "}
                     </span>
@@ -459,9 +485,21 @@ export default function PatientInfoCard(props: {
                       : consultation?.deprecated_verified_by}
                     <CareIcon
                       icon="l-check"
-                      className="ml-2 fill-current text-xl text-green-500"
+                      className="fill-current text-xl text-green-500"
                     />
-                  </div>
+                    <br className="md:hidden" />
+                    <span className="tooltip text-xs text-gray-800">
+                      {!!skillsQuery.data?.results?.length &&
+                        formatSkills(skillsQuery.data?.results)}
+                      {(skillsQuery.data?.results?.length || 0) > 3 && (
+                        <ul className="tooltip-text tooltip-bottom flex flex-col text-xs font-medium">
+                          {skillsQuery.data?.results.map((skill) => (
+                            <li>{skill.skill_object.name}</li>
+                          ))}
+                        </ul>
+                      )}
+                    </span>
+                  </span>
                 )}
               </div>
             </div>