Add View Consultation Button

public/locale/en.json

@@ -1418,6 +1418,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/Patient/PatientHome.tsx

@@ -2,6 +2,8 @@ import { Link, navigate } from "raviger";
 import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 
+import { AuthorizedButton, Button } from "@/components/ui/button";
+
 import ConfirmDialog from "@/components/Common/ConfirmDialog";
 import UserAutocomplete from "@/components/Common/UserAutocompleteFormField";
 
@@ -34,7 +36,6 @@ import {
   relativeDate,
 } from "../../Utils/utils";
 import { Avatar } from "../Common/Avatar";
-import ButtonV2 from "../Common/ButtonV2";
 import Loading from "../Common/Loading";
 import Page from "../Common/Page";
 import { SkillModel, UserBareMinimum } from "../Users/models";
@@ -238,11 +239,14 @@ 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 &&
+                      {facilityId ===
+                        patientData.facility_object?.id.toString() &&
+                        (patientData?.is_active &&
                         (!patientData?.last_consultation ||
-                          patientData?.last_consultation?.discharge_date) && (
+                          patientData?.last_consultation?.discharge_date) ? (
                           <div>
-                            <ButtonV2
+                            <Button
+                              variant="primary"
                               className="w-full"
                               size="default"
                               onClick={() =>
@@ -258,9 +262,30 @@ export const PatientHome = (props: {
                                 />
                                 {t("add_consultation")}
                               </span>
-                            </ButtonV2>
+                            </Button>
                           </div>
-                        )}
+                        ) : (
+                          <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>
                   </div>
                 </div>
@@ -480,9 +505,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`)
                         }
@@ -494,13 +518,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`,
@@ -511,32 +534,30 @@ 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" />{" "}
                             {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
@@ -557,7 +578,7 @@ export const PatientHome = (props: {
                             ? t("disable_transfer")
                             : t("allow_transfer")}
                         </span>
-                      </ButtonV2>
+                      </AuthorizedButton>
                     </div>
                   </div>
                 </div>
@@ -676,15 +697,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>

src/components/ui/button.tsx

@@ -4,6 +4,10 @@ import * as React from "react";
 
 import { cn } from "@/lib/utils";
 
+import AuthorizedChild from "@/CAREUI/misc/AuthorizedChild";
+
+import { AuthorizedElementProps } from "@/Utils/AuthorizeFor";
+
 const buttonVariants = cva(
   "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-gray-950 disabled:pointer-events-none disabled:opacity-50 dark:focus-visible:ring-gray-300",
   {
@@ -60,4 +64,19 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
 );
 Button.displayName = "Button";
 
-export { Button, buttonVariants };
+const AuthorizedButton: React.FC<AuthorizedElementProps & ButtonProps> = ({
+  authorizeFor = () => true,
+  ...props
+}) => {
+  return (
+    <AuthorizedChild authorizeFor={authorizeFor}>
+      {({ isAuthorized }) => (
+        <Button {...props} disabled={props.disabled || !isAuthorized}>
+          {props.children}
+        </Button>
+      )}
+    </AuthorizedChild>
+  );
+};
+
+export { Button, buttonVariants, AuthorizedButton };