Patient header UI update in Patient details page

public/locale/en.json

@@ -1112,7 +1112,7 @@
   "patient_consultation__treatment__summary__spo2": "SpO2",
   "patient_consultation__treatment__summary__temperature": "Temperature",
   "patient_created": "Patient Created",
-  "patient_details": "Patient Details",
+  "patient_details": "Details of Patient",
   "patient_details_incomplete": "Patient Details Incomplete",
   "patient_face": "Patient Face",
   "patient_name": "Patient name",

src/components/Common/AuthorizedButton.tsx

@@ -1,12 +1,20 @@
-import { Button, ButtonProps } from "@headlessui/react";
+import * as React from "react";
 
 import AuthorizedChild from "@/CAREUI/misc/AuthorizedChild";
 
+import { Button, ButtonProps } from "@/components/ui/button";
+
 import { AuthorizedElementProps } from "@/Utils/AuthorizeFor";
 
-export const AuthorizedButton: React.FC<
-  AuthorizedElementProps & ButtonProps
-> = ({ authorizeFor = () => true, ...props }) => {
+const AuthorizedButton: React.FC<AuthorizedElementProps & ButtonProps> = ({
+  authorizeFor,
+  ...props
+}) => {
+  if (!authorizeFor) {
+    throw new Error(
+      "The 'authorizeFor' prop is required for AuthorizedButton.",
+    );
+  }
   return (
     <AuthorizedChild authorizeFor={authorizeFor}>
       {({ isAuthorized }) => (
@@ -17,3 +25,5 @@ export const AuthorizedButton: React.FC<
     </AuthorizedChild>
   );
 };
+
+export default AuthorizedButton;

src/components/Patient/PatientDetailsTab/Demography.tsx

@@ -101,7 +101,7 @@ export const Demography = (props: PatientProps) => {
   const EmergencyContact = (props: { number?: string; name?: string }) => (
     <div className="sm:col-span-2">
       <div className="mr-6 flex flex-col items-start justify-between rounded-md border border-orange-300 bg-orange-50 p-4 sm:flex-row">
-        {/* Emergency Contact Section */}
+        {/* Emergency contact Section */}
         <div className="flex-1">
           <div className="text-sm font-normal leading-5 text-gray-600">
             {t("emergency_contact")}
@@ -226,7 +226,7 @@ export const Demography = (props: PatientProps) => {
         },
         {
           label: t("state"),
-          value: patientData.state,
+          value: patientData?.state_object?.name,
         },
         {
           label: t("district"),