Merge branch 'develop' into replace-buttonv2

public/locale/en.json

@@ -224,6 +224,19 @@
   "SPO2_LEVEL_MODERATE_HYPOXEMIA": "Moderate Hypoxemia",
   "SPO2_LEVEL_NORMAL": "Normal",
   "SPO2_LEVEL_SEVERE_HYPOXEMIA": "Severe Hypoxemia",
+  "SYSTEM__govt_org_type__block_panchayat": "Block Panchayat",
+  "SYSTEM__govt_org_type__corporation": "Corporation",
+  "SYSTEM__govt_org_type__default": "State",
+  "SYSTEM__govt_org_type__district": "District",
+  "SYSTEM__govt_org_type__grama_panchayat": "Grama Panchayat",
+  "SYSTEM__govt_org_type__local_body": "Local Body",
+  "SYSTEM__govt_org_type__muncipality": "Muncipality",
+  "SYSTEM__govt_org_type__state": "State",
+  "SYSTEM__govt_org_type__ward": "Ward",
+  "SYSTEM__org_type__default": "Organization",
+  "SYSTEM__org_type__govt": "Government",
+  "SYSTEM__org_type__role": "Role",
+  "SYSTEM__org_type__team": "Team",
   "Submit": "Submit",
   "TELEMEDICINE": "Telemedicine",
   "TRANSPORTATION TO BE ARRANGED": "Transportation",

src/common/constants.tsx

@@ -1762,12 +1762,3 @@ export const ADMIN_USER_TYPES = ["DistrictAdmin", "StateAdmin"] as const;
  * @deprecated use `LocalStorageKeys.patientTokenKey` instead
  */
 export const CarePatientTokenKey = LocalStorageKeys.patientTokenKey;
-
-// organization_levels map based of type. for govt
-// thought: This might be better placed in the organization types files
-export const ORGANIZATION_LEVELS = {
-  govt: ["State", "District", "LocalBody", "Ward"],
-  team: ["Team"],
-  role: ["Role"],
-  other: ["Other"],
-};

src/components/Facility/FacilityHome.tsx

@@ -38,7 +38,7 @@ import type {
   Organization,
   OrganizationParent,
 } from "@/types/organization/organization";
-import { getOrgLevelLabel } from "@/types/organization/organization";
+import { getOrgLabel } from "@/types/organization/organization";
 
 import type { UserModel } from "../Users/models";
 
@@ -77,22 +77,22 @@ const renderGeoOrganizations = (geoOrg: Organization) => {
 
   const parentDetails = orgParents.map((org) => {
     return {
-      label: getOrgLevelLabel(org.org_type, org.level_cache),
+      label: getOrgLabel(org.org_type, org.metadata),
       value: org.name,
     };
   });
 
   return parentDetails
     .reverse()
     .concat({
-      label: getOrgLevelLabel(geoOrg.org_type, geoOrg.level_cache),
+      label: getOrgLabel(geoOrg.org_type, geoOrg.metadata),
       value: geoOrg.name,
     })
     .map((org, index) => (
       <span key={org.value}>
-        <span className="text-muted-foreground">{org.value}</span>
+        <span className="text-gray-500">{org.value}</span>
         {index < parentDetails.length - 1 && (
-          <span className="mx-2 text-muted-foreground/50">→</span>
+          <span className="mx-2 text-gray-500">→</span>
         )}
       </span>
     ));

src/components/Patient/PatientDetailsTab/Demography.tsx

@@ -16,7 +16,7 @@ import { formatPatientAge } from "@/Utils/utils";
 import {
   Organization,
   OrganizationParent,
-  getOrgLevelLabel,
+  getOrgLabel,
 } from "@/types/organization/organization";
 
 export const Demography = (props: PatientProps) => {
@@ -25,34 +25,6 @@ export const Demography = (props: PatientProps) => {
 
   const [activeSection, _setActiveSection] = useState<string | null>(null);
 
-  // useEffect(() => {
-  //   setAssignedVolunteerObject(patientData.assigned_to_object);
-
-  //   const observedSections: Element[] = [];
-  //   const sections = document.querySelectorAll("div[id]");
-  //   const observer = new IntersectionObserver(
-  //     (entries) => {
-  //       entries.forEach((entry) => {
-  //         if (entry.isIntersecting) {
-  //           setActiveSection(entry.target.id);
-  //         }
-  //       });
-  //     },
-  //     {
-  //       threshold: 0.6,
-  //     },
-  //   );
-
-  //   sections.forEach((section) => {
-  //     observer.observe(section);
-  //     observedSections.push(section);
-  //   });
-
-  //   return () => {
-  //     observedSections.forEach((section) => observer.unobserve(section));
-  //   };
-  // }, [patientData.assigned_to_object]);
-
   const patientGender = GENDER_TYPES.find(
     (i) => i.id === patientData.gender,
   )?.text;
@@ -137,15 +109,6 @@ export const Demography = (props: PatientProps) => {
     details: (React.ReactNode | { label: string; value: React.ReactNode })[];
   };
 
-  // const orgParents: OrganizationParent[] = [];
-  // let currentParent = org.parent;
-  // while (currentParent) {
-  //   if (currentParent.id) {
-  //     orgParents.push(currentParent);
-  //   }
-  //   currentParent = currentParent.parent;
-  // }
-
   const getGeoOrgDetails = (geoOrg: Organization) => {
     const orgParents: OrganizationParent[] = [];
     let currentParent = geoOrg.parent;
@@ -158,13 +121,13 @@ export const Demography = (props: PatientProps) => {
 
     const parentDetails = orgParents.map((org) => {
       return {
-        label: getOrgLevelLabel(org.org_type, org.level_cache),
+        label: getOrgLabel(org.org_type, org.metadata),
         value: org.name,
       };
     });
 
     return parentDetails.reverse().concat({
-      label: getOrgLevelLabel(geoOrg.org_type, geoOrg.level_cache),
+      label: getOrgLabel(geoOrg.org_type, geoOrg.metadata),
       value: geoOrg.name,
     });
   };

src/components/Schedule/Appointments/AppointmentCreatePage.tsx

@@ -30,6 +30,8 @@ import {
 } from "@/components/Schedule/Appointments/utils";
 import { ScheduleAPIs } from "@/components/Schedule/api";
 
+import useAppHistory from "@/hooks/useAppHistory";
+
 import mutate from "@/Utils/request/mutate";
 import query from "@/Utils/request/query";
 import { dateQueryString, formatDisplayName, formatName } from "@/Utils/utils";
@@ -41,6 +43,7 @@ interface Props {
 
 export default function AppointmentCreatePage(props: Props) {
   const { t } = useTranslation();
+  const { goBack } = useAppHistory();
 
   const [resourceId, setResourceId] = useState<string>();
   const [selectedMonth, setSelectedMonth] = useState(new Date());
@@ -363,7 +366,9 @@ export default function AppointmentCreatePage(props: Props) {
           </div>
 
           <div className="flex justify-end gap-4">
-            <Button variant="outline">{t("cancel")}</Button>
+            <Button variant="outline" type="button" onClick={() => goBack()}>
+              {t("cancel")}
+            </Button>
             <Button
               variant="primary"
               type="submit"

src/pages/Organization/OrganizationIndex.tsx

@@ -17,8 +17,10 @@ import { Skeleton } from "@/components/ui/skeleton";
 import Page from "@/components/Common/Page";
 
 import query from "@/Utils/request/query";
-import type { Organization } from "@/types/organization/organization";
-import { getOrgLevel } from "@/types/organization/organization";
+import {
+  type Organization,
+  getOrgLabel,
+} from "@/types/organization/organization";
 import organizationApi from "@/types/organization/organizationApi";
 
 export default function OrganizationIndex() {
@@ -88,7 +90,7 @@ export default function OrganizationIndex() {
                   {org.name}
                 </CardTitle>
                 <CardDescription>
-                  {getOrgLevel(org.org_type, org.level_cache)}
+                  {getOrgLabel(org.org_type, org.metadata)}
                 </CardDescription>
               </div>
             </CardHeader>

src/pages/Organization/OrganizationView.tsx

@@ -12,7 +12,7 @@ import { Input } from "@/components/ui/input";
 import Pagination from "@/components/Common/Pagination";
 
 import query from "@/Utils/request/query";
-import { Organization, getOrgLevel } from "@/types/organization/organization";
+import { Organization, getOrgLabel } from "@/types/organization/organization";
 import organizationApi from "@/types/organization/organizationApi";
 
 import OrganizationLayout from "./components/OrganizationLayout";
@@ -95,12 +95,14 @@ export default function OrganizationView({ id, navOrganizationId }: Props) {
                               <Badge variant="outline">
                                 {orgChild.org_type}
                               </Badge>
-                              <Badge variant="outline">
-                                {getOrgLevel(
-                                  orgChild.org_type,
-                                  orgChild.level_cache,
-                                )}
-                              </Badge>
+                              {orgChild.metadata?.govt_org_type && (
+                                <Badge variant="outline">
+                                  {getOrgLabel(
+                                    orgChild.org_type,
+                                    orgChild.metadata,
+                                  )}
+                                </Badge>
+                              )}
                             </div>
                           </div>
                           <Button variant="link" asChild>

src/pages/Organization/components/OrganizationLayout.tsx

@@ -18,7 +18,6 @@ import query from "@/Utils/request/query";
 import {
   Organization,
   OrganizationParent,
-  getOrgLevel,
 } from "@/types/organization/organization";
 import organizationApi from "@/types/organization/organizationApi";
 
@@ -93,10 +92,7 @@ export default function OrganizationLayout({
   }
 
   return (
-    <Page
-      title={`${org.name} ${getOrgLevel(org.org_type, org.level_cache)}`}
-      breadcrumbs={false}
-    >
+    <Page title={`${org.name}`} breadcrumbs={false}>
       {/* Since we have links to all parent organizations, we can show the breadcrumb here */}
       <Breadcrumb className="mt-1">
         <BreadcrumbList>

src/pages/Organization/components/OrganizationSelector.tsx

@@ -1,4 +1,5 @@
 import { useQuery } from "@tanstack/react-query";
+import { t } from "i18next";
 import { useState } from "react";
 
 import CareIcon from "@/CAREUI/icons/CareIcon";
@@ -9,10 +10,8 @@ import InputWithError from "@/components/ui/input-with-error";
 
 import useDebouncedState from "@/hooks/useDebouncedState";
 
-import { ORGANIZATION_LEVELS } from "@/common/constants";
-
 import query from "@/Utils/request/query";
-import { Organization, getOrgLevel } from "@/types/organization/organization";
+import { Organization } from "@/types/organization/organization";
 import organizationApi from "@/types/organization/organizationApi";
 
 interface OrganizationSelectorProps {
@@ -27,6 +26,7 @@ interface AutoCompleteOption {
   value: string;
 }
 
+// TODO: Rename to GovtOrganizationSelector
 export default function OrganizationSelector(props: OrganizationSelectorProps) {
   const { onChange, required } = props;
   const [selectedLevels, setSelectedLevels] = useState<Organization[]>([]);
@@ -99,25 +99,20 @@ export default function OrganizationSelector(props: OrganizationSelectorProps) {
     }));
   };
 
-  const getLevelLabel = (org: Organization) => {
-    const orgLevel = getOrgLevel(org.org_type, org.level_cache);
-    return typeof orgLevel === "string" ? orgLevel : orgLevel[0];
-  };
-
   const handleEdit = (level: number) => {
     setSelectedLevels((prev) => prev.slice(0, level));
   };
 
+  const lastLevel = selectedLevels[selectedLevels.length - 1];
+
   return (
     <>
       {/* Selected Levels */}
       {selectedLevels.map((level, index) => (
         <div>
           <InputWithError
             key={level.id}
-            label={
-              index === 0 ? ORGANIZATION_LEVELS.govt[0] : getLevelLabel(level)
-            }
+            label={t(`SYSTEM__govt_org_type__${level.metadata?.govt_org_type}`)}
             required={required}
           >
             <div className="flex">
@@ -144,8 +139,11 @@ export default function OrganizationSelector(props: OrganizationSelectorProps) {
         selectedLevels[selectedLevels.length - 1]?.has_children) && (
         <div>
           <InputWithError
-            label={ORGANIZATION_LEVELS.govt[selectedLevels.length]}
-            required={selectedLevels.length === 0 && required}
+            label={t(
+              lastLevel
+                ? `SYSTEM__govt_org_type__${lastLevel.metadata?.govt_org_children_type || "default"}`
+                : "SYSTEM__govt_org_type__default",
+            )}
           >
             <Autocomplete
               value=""

src/pages/UserDashboard.tsx

@@ -8,7 +8,7 @@ import { Avatar } from "@/components/Common/Avatar";
 
 import useAuthUser, { useAuthContext } from "@/hooks/useAuthUser";
 
-import { getOrgLevel } from "@/types/organization/organization";
+import { getOrgLabel } from "@/types/organization/organization";
 
 export default function UserDashboard() {
   const user = useAuthUser();
@@ -118,8 +118,7 @@ export default function UserDashboard() {
                         {org.name}
                       </h3>
                       <p className="text-xs md:text-sm text-muted-foreground truncate">
-                        {org.org_type} ·{" "}
-                        {getOrgLevel(org.org_type, org.level_cache)}
+                        {getOrgLabel(org.org_type, org.metadata)}
                       </p>
                     </div>
                     <ChevronRight className="h-4 w-4 md:h-5 md:w-5 text-muted-foreground" />

src/types/organization/organization.ts

@@ -1,15 +1,21 @@
-import { ORGANIZATION_LEVELS } from "@/common/constants";
+import { t } from "i18next";
 
 import { PaginatedResponse } from "@/Utils/request/types";
 
 import { UserBase } from "../user/user";
 
 type org_type = "team" | "govt" | "role" | "other";
 
+export type Metadata = {
+  govt_org_children_type?: string;
+  govt_org_type?: string;
+};
+
 export interface OrganizationParent {
   id: string;
   name: string;
   description?: string;
+  metadata: Metadata | null;
   org_type: org_type;
   level_cache: number;
   parent?: OrganizationParent;
@@ -26,6 +32,7 @@ export interface Organization {
   parent?: OrganizationParent;
   created_at: string;
   updated_at: string;
+  metadata: Metadata | null;
 }
 
 export interface OrganizationUserRole {
@@ -49,15 +56,11 @@ export type OrganizationUserRoleResponse =
   PaginatedResponse<OrganizationUserRole>;
 export type RoleResponse = PaginatedResponse<Role>;
 
-export const getOrgLevel = (org_type: org_type, level_cache: number) => {
+export const getOrgLabel = (org_type: org_type, metadata: Metadata | null) => {
   if (org_type === "govt") {
-    return ORGANIZATION_LEVELS.govt[level_cache];
-  } else {
-    return ORGANIZATION_LEVELS[org_type];
+    return metadata?.govt_org_type
+      ? t(`SYSTEM__govt_org_type__${metadata?.govt_org_type}`)
+      : t(`SYSTEM__org_type__${org_type}`);
   }
-};
-
-export const getOrgLevelLabel = (org_type: org_type, level_cache: number) => {
-  const orgLevel = getOrgLevel(org_type, level_cache);
-  return typeof orgLevel === "string" ? orgLevel : orgLevel[0];
+  return org_type;
 };