Refactor Consultation Diagnosis (M2M relation, additional verificatio…

…n statuses and other improvements) (#6528)

* useSlug: support for fallbacks for graceful handling

* Miscellaneous changes / cleanup

* Add API routes

* remove old diagnoses from Consultation Form

* Add component: `AddICD11Diagnosis`

* Add component: `ConditionVerificationStatusMenu`

* uncomplicate things

* Add component `ConsultationDiangosisEntry`

* Basic implementation

* i have no idea what these are, but lots of bugs gone

* goodnight for today

* responsiveness

* pre-sort by verification status

* Adds help text

* responsiveness

* fix overflow

* show diagnoses in consultation dashboard

* fix consultation create

* Show chapter of diagnosis for principal diagnosis (#6541)

* Add PrincipalDiagnosisCard component and update
ConsultationDiagnosisBuilder

* Add chapter field to ICD11DiagnosisModel

* fixes #6544; Principal Diagnosis as Dropdown

* fix cypress

* minor fix

cypress/pageobject/Patient/PatientConsultation.ts

@@ -44,23 +44,20 @@ export class PatientConsultationPage {
     cy.get("#height").click().type(weight);
     cy.get("#patient_no").type(ipNumber);
     cy.intercept("GET", "**/icd/**").as("getIcdResults");
-    cy.get(
-      "#icd11_diagnoses_object input[placeholder='Select'][role='combobox']"
-    )
+    cy.get("#icd11-search input[role='combobox']")
       .scrollIntoView()
       .click()
       .type("1A");
-    cy.get("#icd11_diagnoses_object [role='option']")
+    cy.get("#icd11-search [role='option']")
       .contains("1A00 Cholera")
       .scrollIntoView()
       .click();
-    cy.get("label[for='icd11_diagnoses_object']").click();
+    cy.get("#condition-verification-status-menu").click();
+    cy.get("#add-icd11-diagnosis-as-confirmed").click();
     cy.wait("@getIcdResults").its("response.statusCode").should("eq", 200);
 
-    cy.get("#icd11_principal_diagnosis [role='combobox']").click().type("1A");
-    cy.get("#icd11_principal_diagnosis [role='option']")
-      .contains("1A00 Cholera")
-      .click();
+    cy.get("#principal-diagnosis-select").click();
+    cy.get("#principal-diagnosis-select [role='option']").first().click();
 
     cy.get("#consultation_notes").click().type(consulationNotes);
     cy.get("#verified_by")

src/Common/hooks/useSlug.ts

@@ -8,9 +8,9 @@ import { usePath } from "raviger";
  * // Current path: /consultation/94b9a
  * const consultation = useSlug("consultation"); // consultation = "94b9a"
  */
-export default function useSlug(prefix: string) {
+export default function useSlug(prefix: string, fallback?: string) {
   const path = usePath() ?? "";
-  return findSlug(path.split("/"), prefix);
+  return findSlug(path.split("/"), prefix, fallback);
 }
 
 /**
@@ -28,16 +28,16 @@ export const useSlugs = (...prefix: string[]) => {
   return prefix.map((p) => findSlug(path.split("/"), p));
 };
 
-const findSlug = (segments: string[], prefix: string) => {
+const findSlug = (segments: string[], prefix: string, fallback?: string) => {
   const index = segments.findIndex((segment) => segment === prefix);
   if (index === -1) {
     throw new Error(
       `Prefix "${prefix}" not found in path "${segments.join("/")}"`
     );
   }
 
-  const slug = segments[index + 1];
-  if (!slug) {
+  const slug = segments[index + 1] ?? fallback;
+  if (slug === undefined) {
     throw new Error(`Slug not found in path "${segments.join("/")}"`);
   }
 

src/Components/Common/components/Menu.tsx

@@ -1,6 +1,6 @@
 import { Anyone, AuthorizedElementProps } from "../../../Utils/AuthorizeFor";
 
-import { ButtonVariant } from "./ButtonV2";
+import { ButtonSize, ButtonVariant } from "./ButtonV2";
 import CareIcon from "../../../CAREUI/icons/CareIcon";
 import { DropdownTransition } from "./HelperComponents";
 import { Menu } from "@headlessui/react";
@@ -12,6 +12,7 @@ interface DropdownMenuProps {
   id?: string;
   title: string;
   variant?: ButtonVariant;
+  size?: ButtonSize;
   icon?: JSX.Element | undefined;
   children: JSX.Element | JSX.Element[];
   disabled?: boolean | undefined;
@@ -21,20 +22,29 @@ interface DropdownMenuProps {
 
 export default function DropdownMenu({
   variant = "primary",
+  size = "default",
   ...props
 }: DropdownMenuProps) {
   return (
     <div id={props.id} className="text-right">
       <Menu as="div" className="relative inline-block w-full text-left">
         <Menu.Button
           disabled={props.disabled}
-          className={`button-size-default button-${variant}-default  button-shape-square flex w-full cursor-pointer items-center justify-center gap-2 font-medium outline-offset-1 transition-all duration-200 ease-in-out disabled:cursor-not-allowed disabled:bg-gray-200 disabled:text-gray-500 lg:justify-between ${props.className}`}
+          className={`button-size-${size} button-${variant}-default  button-shape-square flex w-full cursor-pointer items-center justify-center gap-2 font-medium outline-offset-1 transition-all duration-200 ease-in-out disabled:cursor-not-allowed disabled:bg-gray-200 disabled:text-gray-500 lg:justify-between ${props.className}`}
         >
-          <div className="flex h-6 items-center gap-2">
+          <div
+            className={classNames(
+              "flex items-center gap-2 whitespace-nowrap",
+              size === "small" ? "h-5" : "h-6"
+            )}
+          >
             {props.icon}
             {props.title || "Dropdown"}
           </div>
-          <CareIcon className="care-l-angle-down -mr-1 ml-2 text-lg" />
+          <CareIcon
+            icon="l-angle-down"
+            className={size === "small" ? "text-base" : "text-lg"}
+          />
         </Menu.Button>
         <DropdownTransition>
           <Menu.Items