Show skills of treating doctor in consultation dashboard

src/Components/Patient/PatientInfoCard.tsx

@@ -37,7 +37,9 @@ 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";
 
 export default function PatientInfoCard(props: {
   patient: PatientModel;
@@ -113,7 +115,26 @@ export default function PatientInfoCard(props: {
 
     return false;
   };
-
+  const { data: skills } = useQuery(routes.userListSkill, {
+    pathParams: {
+      username: consultation?.treating_physician_object?.username ?? "",
+    },
+    prefetch: !!consultation?.treating_physician_object?.username,
+  });
+  const getSkillsDescription = (skills: SkillModel[]) => {
+    if (skills.length === 1) {
+      return skills[0].skill_object.name;
+    }
+    if (skills.length === 2) {
+      return skills.map((s) => s.skill_object.name).join(" and ");
+    }
+    return (
+      skills
+        .slice(0, 2)
+        .map((s) => s.skill_object.name)
+        .join(", ") + ` and ${skills.length - 2} more`
+    );
+  };
   return (
     <>
       <DialogModal
@@ -450,7 +471,7 @@ export default function PatientInfoCard(props: {
                   : null}
                 {(consultation?.treating_physician_object ||
                   consultation?.deprecated_verified_by) && (
-                  <div className="text-sm" id="treating-physician">
+                  <div className="flex text-sm" id="treating-physician">
                     <span className="font-semibold leading-relaxed">
                       {t("treating_doctor")}:{" "}
                     </span>
@@ -461,6 +482,7 @@ export default function PatientInfoCard(props: {
                       icon="l-check"
                       className="ml-2 fill-current text-xl text-green-500"
                     />
+                    {skills && getSkillsDescription(skills.results)}
                   </div>
                 )}
               </div>