Show chapter of diagnosis for principal diagnosis

src/Components/Diagnosis/ConsultationDiagnosisBuilder/ConsultationDiagnosisBuilder.tsx

@@ -10,6 +10,7 @@ import ConsultationDiagnosisEntry from "./ConsultationDiagnosisEntry";
 import request from "../../../Utils/request/request";
 import DiagnosesRoutes from "../routes";
 import * as Notification from "../../../Utils/Notifications";
+import PrincipalDiagnosisCard from "./PrincipalDiagnosisCard";
 
 interface CreateDiagnosesProps {
   className?: string;
@@ -18,6 +19,7 @@ interface CreateDiagnosesProps {
 }
 
 export const CreateDiagnosesBuilder = (props: CreateDiagnosesProps) => {
+  const principalDiagnosis = props.value.find((d) => d.is_principal);
   return (
     <div className={props.className}>
       <div className="flex w-full flex-col items-start rounded-lg border border-gray-400">
@@ -62,6 +64,13 @@ export const CreateDiagnosesBuilder = (props: CreateDiagnosesProps) => {
           />
         </div>
       </div>
+
+      {principalDiagnosis?.diagnosis_object && (
+        <PrincipalDiagnosisCard
+          className="my-2"
+          diagnosis={principalDiagnosis.diagnosis_object}
+        />
+      )}
     </div>
   );
 };
@@ -75,6 +84,8 @@ export const EditDiagnosesBuilder = (props: EditDiagnosesProps) => {
   const consultation = useSlug("consultation");
   const [diagnoses, setDiagnoses] = useState(props.value);
 
+  const principalDiagnosis = diagnoses.find((d) => d.is_principal);
+
   return (
     <div className={props.className}>
       <div className="flex w-full flex-col items-start rounded-lg border border-gray-400">
@@ -84,6 +95,15 @@ export const EditDiagnosesBuilder = (props: EditDiagnosesProps) => {
               key={index}
               value={diagnosis}
               consultationId={consultation}
+              onChange={(action) => {
+                setDiagnoses(
+                  diagnoses.map((diagnose, i) =>
+                    i === index
+                      ? (action.value as ConsultationDiagnosis)
+                      : diagnose
+                  )
+                );
+              }}
             />
           ))}
         </div>
@@ -118,6 +138,13 @@ export const EditDiagnosesBuilder = (props: EditDiagnosesProps) => {
           />
         </div>
       </div>
+
+      {principalDiagnosis?.diagnosis_object && (
+        <PrincipalDiagnosisCard
+          className="my-2"
+          diagnosis={principalDiagnosis?.diagnosis_object}
+        />
+      )}
     </div>
   );
 };

src/Components/Diagnosis/ConsultationDiagnosisBuilder/ConsultationDiagnosisEntry.tsx

@@ -22,21 +22,20 @@ interface EditAction {
   value: CreateDiagnosis | ConsultationDiagnosis;
 }
 
-type Action = RemoveAction | EditAction;
-
 interface BaseProps {
   className?: string;
 }
 
 interface ConsultationCreateProps extends BaseProps {
   consultationId?: undefined;
   value: CreateDiagnosis;
-  onChange: (action: Action) => void;
+  onChange: (action: EditAction | RemoveAction) => void;
 }
 
 interface ConsultationEditProps extends BaseProps {
   consultationId: string;
   value: ConsultationDiagnosis;
+  onChange: (action: EditAction) => void;
 }
 
 type Props = ConsultationCreateProps | ConsultationEditProps;
@@ -101,15 +100,12 @@ export default function ConsultationDiagnosisEntry(props: Props) {
               disabled={disabled}
               ghost
               border
-              onClick={() => {
+              onClick={async () => {
                 const value = { ...object, is_principal: !object.is_principal };
-
-                if (props.consultationId === undefined) {
-                  props.onChange({ type: "edit", value });
-                  return;
+                if (props.consultationId) {
+                  await handleUpdate(value as ConsultationDiagnosis);
                 }
-
-                handleUpdate(value as ConsultationDiagnosis);
+                props.onChange({ type: "edit", value });
               }}
               tooltip={object.is_principal ? t("unmark_as_principal") : ""}
               tooltipClassName="tooltip-bottom -translate-x-1/2 translate-y-1 text-xs"
@@ -141,18 +137,15 @@ export default function ConsultationDiagnosisEntry(props: Props) {
                   ? ActiveConditionVerificationStatuses
                   : ConditionVerificationStatuses
               }
-              onSelect={(verification_status) => {
+              onSelect={async (verification_status) => {
                 const value = { ...object, verification_status };
-
-                if (props.consultationId === undefined) {
-                  props.onChange({
-                    type: "edit",
-                    value: value as CreateDiagnosis,
-                  });
-                  return;
+                if (props.consultationId) {
+                  await handleUpdate(value as ConsultationDiagnosis);
                 }
-
-                handleUpdate(value as ConsultationDiagnosis);
+                props.onChange({
+                  type: "edit",
+                  value: value as CreateDiagnosis | ConsultationDiagnosis,
+                });
               }}
               onRemove={
                 props.consultationId === undefined

src/Components/Diagnosis/ConsultationDiagnosisBuilder/PrincipalDiagnosisCard.tsx

@@ -0,0 +1,25 @@
+import { ICD11DiagnosisModel } from "../types";
+
+interface Props {
+  className?: string;
+  diagnosis: ICD11DiagnosisModel;
+}
+
+export default function PrincipalDiagnosisCard(props: Props) {
+  return (
+    <div className={props.className}>
+      <div className="rounded-lg border border-gray-400 bg-gray-200 p-4">
+        <h3 className="text-lg font-semibold">Principal Diagnosis</h3>
+        <span className="mt-2 flex w-full flex-col items-center gap-2 text-center text-gray-900">
+          <span className="cui-input-base text-base font-bold">
+            {props.diagnosis.label}
+          </span>
+          <span className="flex flex-wrap gap-x-1 px-2">
+            <p>This encounter will be categorised under:</p>
+            <p className="font-bold">{props.diagnosis.chapter}</p>
+          </span>
+        </span>
+      </div>
+    </div>
+  );
+}

src/Components/Diagnosis/types.ts

@@ -3,6 +3,7 @@ import { PerformedByModel } from "../HCX/misc";
 export type ICD11DiagnosisModel = {
   id: string;
   label: string;
+  chapter: string;
 };
 
 export const ActiveConditionVerificationStatuses = [