Add View Consultation Button

public/locale/en.json

@@ -1539,6 +1539,7 @@
   "view_all_details": "View All Details",
   "view_asset": "View Assets",
   "view_cns": "View CNS",
+  "view_consultation": "View Latest Encounter",
   "view_consultation_and_log_updates": "View Consultation / Log Updates",
   "view_details": "View Details",
   "view_faciliy": "View Facility",

src/components/Common/AuthorizedButton.tsx

@@ -0,0 +1,19 @@
+import { Button, ButtonProps } from "@headlessui/react";
+
+import AuthorizedChild from "@/CAREUI/misc/AuthorizedChild";
+
+import { AuthorizedElementProps } from "@/Utils/AuthorizeFor";
+
+export const AuthorizedButton: React.FC<
+  AuthorizedElementProps & ButtonProps
+> = ({ authorizeFor = () => true, ...props }) => {
+  return (
+    <AuthorizedChild authorizeFor={authorizeFor}>
+      {({ isAuthorized }) => (
+        <Button {...props} disabled={props.disabled || !isAuthorized}>
+          {props.children}
+        </Button>
+      )}
+    </AuthorizedChild>
+  );
+};

src/components/Patient/PatientHome.tsx

@@ -5,19 +5,11 @@ import { useTranslation } from "react-i18next";
 import Chip from "@/CAREUI/display/Chip";
 import CareIcon from "@/CAREUI/icons/CareIcon";
 
-import { Avatar } from "@/components/Common/Avatar";
-import ButtonV2 from "@/components/Common/ButtonV2";
+import { Button } from "@/components/ui/button";
+
+import { AuthorizedButton } from "@/components/Common/AuthorizedButton";
 import ConfirmDialog from "@/components/Common/ConfirmDialog";
-import Loading from "@/components/Common/Loading";
-import Page from "@/components/Common/Page";
 import UserAutocomplete from "@/components/Common/UserAutocompleteFormField";
-import { patientTabs } from "@/components/Patient/PatientDetailsTab";
-import { isPatientMandatoryDataFilled } from "@/components/Patient/Utils";
-import {
-  AssignedToObjectModel,
-  PatientModel,
-} from "@/components/Patient/models";
-import { SkillModel, UserBareMinimum } from "@/components/Users/models";
 
 import useAuthUser from "@/hooks/useAuthUser";
 
@@ -34,6 +26,7 @@ import dayjs from "@/Utils/dayjs";
 import routes from "@/Utils/request/api";
 import request from "@/Utils/request/request";
 import useTanStackQueryInstead from "@/Utils/request/useQuery";
+
 import {
   formatDateTime,
   formatName,
@@ -42,7 +35,14 @@ import {
   isAntenatal,
   isPostPartum,
   relativeDate,
-} from "@/Utils/utils";
+} from "../../Utils/utils";
+import { Avatar } from "../Common/Avatar";
+import Loading from "../Common/Loading";
+import Page from "../Common/Page";
+import { SkillModel, UserBareMinimum } from "../Users/models";
+import { patientTabs } from "./PatientDetailsTab";
+import { isPatientMandatoryDataFilled } from "./Utils";
+import { AssignedToObjectModel, PatientModel } from "./models";
 
 export const parseOccupation = (occupation: string | undefined) => {
   return OCCUPATION_TYPES.find((i) => i.value === occupation)?.text;
@@ -218,29 +218,55 @@ export const PatientHome = (props: {
                 <div className="h-full space-y-2">
                   <div className="space-y-3 border-b border-dashed text-left text-lg font-semibold text-secondary-900">
                     <div>
-                      {patientData?.is_active &&
-                        (!patientData?.last_consultation ||
-                          patientData?.last_consultation?.discharge_date) && (
-                          <div>
-                            <ButtonV2
-                              id="create-consultation"
-                              className="w-full"
-                              size="default"
-                              onClick={() =>
-                                navigate(
-                                  `/facility/${patientData?.facility}/patient/${id}/consultation`,
-                                )
-                              }
-                            >
-                              <span className="flex w-full items-center justify-start gap-2">
-                                <CareIcon
-                                  icon="l-chat-bubble-user"
-                                  className="text-xl"
-                                />
-                                {t("add_consultation")}
-                              </span>
-                            </ButtonV2>
-                          </div>
+                      {facilityId ===
+                        patientData.facility_object?.id.toString() &&
+                        patientData?.is_active && (
+                          <>
+                            {patientData?.last_consultation &&
+                            !patientData?.last_consultation.discharge_date ? (
+                              <div>
+                                <Button
+                                  variant="primary"
+                                  className="w-full"
+                                  size="default"
+                                  onClick={() =>
+                                    navigate(
+                                      `/facility/${patientData.facility}/patient/${id}/consultation/${patientData.last_consultation?.id}`,
+                                    )
+                                  }
+                                >
+                                  <span className="flex w-full items-center justify-start gap-2">
+                                    <CareIcon
+                                      icon="l-chat-bubble-user"
+                                      className="text-xl"
+                                    />
+                                    {t("view_consultation")}
+                                  </span>
+                                </Button>
+                              </div>
+                            ) : (
+                              <div>
+                                <Button
+                                  variant="primary"
+                                  className="w-full"
+                                  size="default"
+                                  onClick={() =>
+                                    navigate(
+                                      `/facility/${patientData?.facility}/patient/${id}/consultation`,
+                                    )
+                                  }
+                                >
+                                  <span className="flex w-full items-center justify-start gap-2">
+                                    <CareIcon
+                                      icon="l-chat-bubble-user"
+                                      className="text-xl"
+                                    />
+                                    {t("add_consultation")}
+                                  </span>
+                                </Button>
+                              </div>
+                            )}
+                          </>
                         )}
                     </div>
                   </div>
@@ -366,7 +392,7 @@ export const PatientHome = (props: {
                             className="tooltip-text tooltip-bottom flex flex-col text-xs font-medium"
                             role="tooltip"
                           >
-                            {skillsQuery.data?.results.map((skill) => (
+                            {skillsQuery.data?.results.map((skill: any) => (
                               <li key={skill.skill_object.id}>
                                 {skill.skill_object.name}
                               </li>
@@ -463,9 +489,8 @@ export const PatientHome = (props: {
                 <div className="mt-2 h-full space-y-2">
                   <div className="space-y-3 border-b border-dashed text-left text-lg font-semibold text-secondary-900">
                     <div>
-                      <ButtonV2
+                      <Button
                         className="w-full bg-white font-semibold text-green-800 hover:bg-secondary-200"
-                        size="large"
                         onClick={() =>
                           navigate(`/patient/${id}/investigation_reports`)
                         }
@@ -477,13 +502,12 @@ export const PatientHome = (props: {
                           />
                           {t("investigations_summary")}
                         </span>
-                      </ButtonV2>
+                      </Button>
                     </div>
                     <div>
-                      <ButtonV2
+                      <Button
                         className="w-full bg-white font-semibold text-green-800 hover:bg-secondary-200"
                         id="upload-patient-files"
-                        size="large"
                         onClick={() =>
                           navigate(
                             `/facility/${patientData?.facility}/patient/${id}/files`,
@@ -494,34 +518,32 @@ export const PatientHome = (props: {
                           <CareIcon icon="l-file-upload" className="text-xl" />
                           {t("view_update_patient_files")}
                         </span>
-                      </ButtonV2>
+                      </Button>
                     </div>
 
-                    {NonReadOnlyUsers && (
+                    {NonReadOnlyUsers(authUser.user_type) && (
                       <div>
-                        <ButtonV2
+                        <AuthorizedButton
                           id="assign-volunteer"
                           onClick={() => setOpenAssignVolunteerDialog(true)}
                           disabled={false}
                           authorizeFor={NonReadOnlyUsers}
                           className="w-full bg-white font-semibold text-green-800 hover:bg-secondary-200"
-                          size="large"
                         >
                           <span className="flex w-full items-center justify-start gap-2">
                             <CareIcon icon="l-users-alt" className="text-lg" />{" "}
                             {patientData.assigned_to
                               ? t("update_volunteer")
                               : t("assign_to_volunteer")}
                           </span>
-                        </ButtonV2>
+                        </AuthorizedButton>
                       </div>
                     )}
 
                     <div>
-                      <ButtonV2
+                      <AuthorizedButton
                         id="patient-allow-transfer"
                         className="flex w-full flex-row bg-white font-semibold text-green-800 hover:bg-secondary-200"
-                        size="large"
                         disabled={
                           !patientData.last_consultation?.id ||
                           !patientData.is_active
@@ -542,7 +564,7 @@ export const PatientHome = (props: {
                             ? t("disable_transfer")
                             : t("allow_transfer")}
                         </span>
-                      </ButtonV2>
+                      </AuthorizedButton>
                     </div>
                   </div>
                 </div>
@@ -661,15 +683,15 @@ export const PatientHome = (props: {
                 {patientData.last_consultation?.new_discharge_reason ===
                   DISCHARGE_REASONS.find((i) => i.text == "Expired")?.id && (
                   <div>
-                    <ButtonV2
+                    <Button
                       id="death-report"
                       className="my-2 w-full"
                       name="death_report"
                       onClick={() => navigate(`/death_report/${id}`)}
                     >
                       <CareIcon icon="l-file-download" className="text-lg" />
                       {t("death_report")}
-                    </ButtonV2>
+                    </Button>
                   </div>
                 )}
               </div>