Remove Breadcrumbs

src/components/Common/Page.tsx

@@ -43,11 +43,9 @@ export default function Page(props: PageProps) {
         <PageTitle
           changePageMetadata={props.changePageMetadata}
           title={props.title}
-          breadcrumbs={props.breadcrumbs}
           backUrl={props.backUrl}
           hideBack={props.hideBack}
           componentRight={props.componentRight}
-          crumbsReplacements={props.crumbsReplacements}
           focusOnLoad={props.focusOnLoad}
           onBackClick={props.onBackClick}
           isInsidePage={true}

src/components/Common/PageTitle.tsx

@@ -1,27 +1,23 @@
 import { ReactNode, useEffect, useRef } from "react";
 
-import Breadcrumbs from "@/components/Common/Breadcrumbs";
+import { cn } from "@/lib/utils";
+
+import CareIcon from "@/CAREUI/icons/CareIcon";
+
+import { BreadcrumbItem } from "@/components/ui/breadcrumb";
+import { Button } from "@/components/ui/button";
+
 import PageHeadTitle from "@/components/Common/PageHeadTitle";
 
-import { classNames } from "@/Utils/utils";
+import useAppHistory from "@/hooks/useAppHistory";
 
 export interface PageTitleProps {
   title: string;
   className?: string;
   componentRight?: ReactNode;
-  breadcrumbs?: boolean;
-  crumbsReplacements?: {
-    [key: string]: {
-      name?: string;
-      uri?: string;
-      style?: string;
-      hide?: boolean;
-    };
-  };
   focusOnLoad?: boolean;
   isInsidePage?: boolean;
   changePageMetadata?: boolean;
-  // New props for Breadcrumbs
   hideBack?: boolean;
   backUrl?: string;
   hideTitleOnPage?: boolean;
@@ -32,18 +28,16 @@ export default function PageTitle({
   title,
   className = "",
   componentRight = <></>,
-  breadcrumbs = true,
-  crumbsReplacements = {},
   focusOnLoad = false,
   isInsidePage = false,
   changePageMetadata = true,
-  // New props passed to Breadcrumbs
   hideBack = false,
   backUrl,
   onBackClick,
   hideTitleOnPage,
 }: PageTitleProps) {
   const divRef = useRef<any>();
+  const { goBack } = useAppHistory();
 
   useEffect(() => {
     if (divRef.current && focusOnLoad) {
@@ -54,23 +48,32 @@ export default function PageTitle({
   return (
     <div
       ref={divRef}
-      className={classNames(!isInsidePage && "mb-2 md:mb-4", className)}
+      className={cn(!isInsidePage && "mb-2 md:mb-4", className)}
     >
       <div className="flex flex-col items-start md:flex-row md:items-center">
-        {breadcrumbs && (
-          <Breadcrumbs
-            replacements={crumbsReplacements}
-            className="flex-grow"
-            hideBack={hideBack}
-            backUrl={backUrl}
-            onBackClick={onBackClick}
-          />
+        {!hideBack && (
+          <BreadcrumbItem>
+            <Button
+              variant="link"
+              type="button"
+              className="rounded bg-gray-200/50 px-1 text-sm font-normal text-gray-800 transition hover:bg-gray-200/75 hover:no-underline"
+              size="xs"
+              onClick={() => {
+                if (onBackClick && onBackClick() === false) return;
+                // console.log(backUrl);
+                goBack(backUrl);
+              }}
+            >
+              <CareIcon icon="l-arrow-left" className="h-5 text-gray-700" />
+              <span className="pr-2">Back</span>
+            </Button>
+          </BreadcrumbItem>
         )}
       </div>
       {changePageMetadata && <PageHeadTitle title={title} />}
 
       <div
-        className={classNames(
+        className={cn(
           "mt-1 flex",
           !!componentRight &&
             "flex-col justify-start space-y-2 md:flex-row md:justify-between md:space-y-0",

src/components/Patient/FileUploadPage.tsx

@@ -1,28 +1,17 @@
 import Page from "@/components/Common/Page";
 import { FileUpload } from "@/components/Files/FileUpload";
 
-import routes from "@/Utils/request/api";
-import useTanStackQueryInstead from "@/Utils/request/useQuery";
-
 export default function FileUploadPage(props: {
   facilityId: string;
   patientId: string;
   encounterId?: string;
   type: "encounter" | "patient";
 }) {
   const { facilityId, patientId, encounterId, type } = props;
-  const { data: patient } = useTanStackQueryInstead(routes.getPatient, {
-    pathParams: { id: patientId },
-    prefetch: !!patientId,
-  });
   return (
     <Page
       hideBack={false}
       title="Patient Files"
-      crumbsReplacements={{
-        [facilityId]: { name: patient?.facility_object?.name },
-        [patientId]: { name: patient?.name },
-      }}
       backUrl={
         type === "encounter"
           ? `/facility/${facilityId}/encounter/${encounterId}`

src/components/Resource/ResourceBoard.tsx

@@ -71,7 +71,6 @@ export default function BoardView() {
                 filenamePrefix="resource_requests"
               />
             }
-            breadcrumbs={false}
           />
         </div>
 

src/components/Resource/ResourceCreate.tsx

@@ -1,5 +1,5 @@
 import { zodResolver } from "@hookform/resolvers/zod";
-import { useQuery } from "@tanstack/react-query";
+// import { useQuery } from "@tanstack/react-query";
 import { navigate, useQueryParams } from "raviger";
 import { useState } from "react";
 import { useForm } from "react-hook-form";
@@ -44,7 +44,7 @@ import useAuthUser from "@/hooks/useAuthUser";
 import { RESOURCE_CATEGORY_CHOICES } from "@/common/constants";
 
 import routes from "@/Utils/request/api";
-import query from "@/Utils/request/query";
+// import query from "@/Utils/request/query";
 import request from "@/Utils/request/request";
 import validators from "@/Utils/validators";
 import { CreateResourceRequest } from "@/types/resourceRequest/resourceRequest";
@@ -81,14 +81,14 @@ export default function ResourceCreate(props: ResourceProps) {
 
   type ResourceFormValues = z.infer<typeof resourceFormSchema>;
 
-  const { data: facilityData } = useQuery({
-    queryKey: ["facility", facilityId],
-    queryFn: () =>
-      query(routes.getAnyFacility, {
-        pathParams: { id: String(facilityId) },
-      }),
-    enabled: !!facilityId,
-  });
+  // const { data: facilityData } = useQuery({
+  //   queryKey: ["facility", facilityId],
+  //   queryFn: () =>
+  //     query(routes.getAnyFacility, {
+  //       pathParams: { id: String(facilityId) },
+  //     }),
+  //   enabled: !!facilityId,
+  // });
 
   const form = useForm<ResourceFormValues>({
     resolver: zodResolver(resourceFormSchema),
@@ -157,10 +157,6 @@ export default function ResourceCreate(props: ResourceProps) {
   return (
     <Page
       title={t("create_resource_request")}
-      crumbsReplacements={{
-        [facilityId]: { name: facilityData?.name || "" },
-        resource: { style: "pointer-events-none" },
-      }}
       backUrl={`/facility/${facilityId}`}
     >
       <div className="container mx-auto max-w-4xl">

src/components/Resource/ResourceDetails.tsx

@@ -117,11 +117,7 @@ export default function ResourceDetails(props: { id: string }) {
   }
 
   return (
-    <Page
-      title="Request Details"
-      crumbsReplacements={{ [props.id]: { name: data.title } }}
-      backUrl="/resource/board"
-    >
+    <Page title="Request Details">
       <div className="mx-auto max-w-7xl space-y-6 p-4 md:p-6">
         {/* Action Buttons */}
         <div className="flex items-center justify-between">