consultationDetails.tsx file broken down into smaller components fixes #5830

src/Common/constants.tsx

@@ -1,8 +1,12 @@
 import { IConfig } from "./hooks/useConfig";
-import { PatientCategory } from "../Components/Facility/models";
+import {
+  ConsultationModel,
+  PatientCategory,
+} from "../Components/Facility/models";
 import { SortOption } from "../Components/Common/SortDropdown";
 import moment from "moment";
 import { parsePhoneNumberFromString } from "libphonenumber-js";
+import { PatientModel } from "../Components/Patient/models";
 
 export const RESULTS_PER_PAGE_LIMIT = 14;
 export const PAGINATION_LIMIT = 36;
@@ -22,6 +26,17 @@ export interface OptionsType {
   disabled?: boolean;
 }
 
+export interface ConsultationTabProps {
+  // necessary props received for each tab
+  consultationData: ConsultationModel;
+  hl7SocketUrl?: string;
+  ventilatorSocketUrl?: string;
+  patientData: PatientModel;
+  facilityId: any;
+  patientId: any;
+  consultationId: any;
+}
+
 export type UserRole =
   | "Pharmacist"
   | "Volunteer"

src/Components/Facility/ConsultationABGTab.tsx

@@ -0,0 +1,23 @@
+import { ConsultationTabProps } from "../../Common/constants";
+import PageTitle from "../Common/PageTitle";
+import { ABGPlots } from "./Consultations/ABGPlots";
+export default function ConsultationABGTab({
+  facilityId,
+  patientId,
+  consultationId,
+}: ConsultationTabProps) {
+  return (
+    <div>
+      <PageTitle
+        title="ABG Analysis Plot"
+        hideBack={true}
+        breadcrumbs={false}
+      />
+      <ABGPlots
+        facilityId={facilityId}
+        patientId={patientId}
+        consultationId={consultationId}
+      ></ABGPlots>
+    </div>
+  );
+}

src/Components/Facility/ConsultationDialysisTab.tsx

@@ -0,0 +1,13 @@
+import { ConsultationTabProps } from "../../Common/constants";
+import PageTitle from "../Common/PageTitle";
+import { DialysisPlots } from "./Consultations/DialysisPlots";
+export default function ConsultationDialysisTab({
+  consultationId,
+}: ConsultationTabProps) {
+  return (
+    <div>
+      <PageTitle title="Dialysis Plots" hideBack={true} breadcrumbs={false} />
+      <DialysisPlots consultationId={consultationId}></DialysisPlots>
+    </div>
+  );
+}

src/Components/Facility/ConsultationFeedTab.tsx

@@ -0,0 +1,24 @@
+import { ConsultationTabProps } from "../../Common/constants";
+import PageTitle from "../Common/PageTitle";
+import { Feed } from "./Consultations/Feed";
+export default function ConsultationFeedTab({
+  facilityId,
+  patientId,
+  consultationId,
+}: ConsultationTabProps) {
+  return (
+    <div>
+      <PageTitle
+        title="Camera Feed"
+        breadcrumbs={false}
+        hideBack={true}
+        focusOnLoad={true}
+      />
+      <Feed
+        facilityId={facilityId}
+        patientId={patientId}
+        consultationId={consultationId}
+      />
+    </div>
+  );
+}

src/Components/Facility/ConsultationFilesTab.tsx

@@ -0,0 +1,22 @@
+import { FileUpload } from "../Patient/FileUpload";
+import { ConsultationTabProps } from "../../Common/constants";
+
+export default function ConsultationFilesTab({
+  facilityId,
+  patientId,
+  consultationId,
+}: ConsultationTabProps) {
+  return (
+    <div>
+      <FileUpload
+        facilityId={facilityId}
+        patientId={patientId}
+        consultationId={consultationId}
+        type="CONSULTATION"
+        hideBack={true}
+        audio={true}
+        unspecified={true}
+      />
+    </div>
+  );
+}

src/Components/Facility/ConsultationInvestigationsTab.tsx

@@ -0,0 +1,44 @@
+import ButtonV2 from "../Common/components/ButtonV2";
+import { ConsultationTabProps } from "../../Common/constants";
+import PageTitle from "../Common/PageTitle";
+import CareIcon from "../../CAREUI/icons/CareIcon";
+import InvestigationTab from "./Investigations/investigationsTab";
+import { NonReadOnlyUsers } from "../../Utils/AuthorizeFor";
+import { navigate } from "raviger";
+import { useTranslation } from "react-i18next";
+
+export default function ConsultationInvestigationsTab({
+  patientData,
+  facilityId,
+  patientId,
+  consultationId,
+}: ConsultationTabProps) {
+  const { t } = useTranslation();
+  return (
+    <div>
+      <div className="sm:flex justify-between">
+        <PageTitle title="Investigations" hideBack={true} breadcrumbs={false} />
+        <div className="pt-6">
+          <ButtonV2
+            authorizeFor={NonReadOnlyUsers}
+            disabled={!patientData.is_active}
+            onClick={() =>
+              navigate(
+                `/facility/${facilityId}/patient/${patientId}/consultation/${consultationId}/investigation/`
+              )
+            }
+          >
+            <CareIcon className="care-l-plus" />
+            <span>{t("log_lab_results")}</span>
+          </ButtonV2>
+        </div>
+      </div>
+      <InvestigationTab
+        consultationId={consultationId}
+        facilityId={facilityId}
+        patientId={patientId}
+        patientData={patientData}
+      />
+    </div>
+  );
+}

src/Components/Facility/ConsultationMedicinesTab.tsx

@@ -0,0 +1,38 @@
+import { useState } from "react";
+import MedicineAdministrationsTable from "../Medicine/MedicineAdministrationsTable";
+import PrescriptionsTable from "../Medicine/PrescriptionsTable";
+import { ConsultationTabProps } from "../../Common/constants";
+
+export default function ConsultationMedicinesTab({
+  consultationId,
+  consultationData,
+}: ConsultationTabProps) {
+  const [medicinesKey, setMedicinesKey] = useState(0);
+  return (
+    <div>
+      <div className="mt-4">
+        <PrescriptionsTable
+          key={medicinesKey}
+          consultation_id={consultationId}
+          onChange={() => setMedicinesKey((k) => k + 1)}
+          readonly={!!consultationData.discharge_date}
+        />
+      </div>
+      <div className="mt-8">
+        <PrescriptionsTable
+          key={medicinesKey}
+          consultation_id={consultationId}
+          is_prn
+          onChange={() => setMedicinesKey((k) => k + 1)}
+          readonly={!!consultationData.discharge_date}
+        />
+      </div>
+      <div className="mt-8">
+        <MedicineAdministrationsTable
+          key={medicinesKey}
+          consultation_id={consultationId}
+        />
+      </div>
+    </div>
+  );
+}

src/Components/Facility/ConsultationNeurologicalMonitoringTab.tsx

@@ -0,0 +1,23 @@
+import { ConsultationTabProps } from "../../Common/constants";
+import PageTitle from "../Common/PageTitle";
+import { NeurologicalTable } from "./Consultations/NeurologicalTables";
+export default function ConsultationNeurologicalMonitoringTab({
+  facilityId,
+  patientId,
+  consultationId,
+}: ConsultationTabProps) {
+  return (
+    <div>
+      <PageTitle
+        title="Neurological Monitoring"
+        hideBack={true}
+        breadcrumbs={false}
+      />
+      <NeurologicalTable
+        facilityId={facilityId}
+        patientId={patientId}
+        consultationId={consultationId}
+      ></NeurologicalTable>
+    </div>
+  );
+}

src/Components/Facility/ConsultationNursingTab.tsx

@@ -0,0 +1,20 @@
+import PageTitle from "../Common/PageTitle";
+import { ConsultationTabProps } from "../../Common/constants";
+import { NursingPlot } from "./Consultations/NursingPlot";
+
+export default function ConsultationNursingTab({
+  facilityId,
+  patientId,
+  consultationId,
+}: ConsultationTabProps) {
+  return (
+    <div>
+      <PageTitle title="Nursing Analysis" hideBack={true} breadcrumbs={false} />
+      <NursingPlot
+        facilityId={facilityId}
+        patientId={patientId}
+        consultationId={consultationId}
+      ></NursingPlot>
+    </div>
+  );
+}

src/Components/Facility/ConsultationNutritionTab.tsx

@@ -0,0 +1,19 @@
+import { ConsultationTabProps } from "../../Common/constants";
+import PageTitle from "../Common/PageTitle";
+import { NutritionPlots } from "./Consultations/NutritionPlots";
+export default function ConsultationNutritionTab({
+  facilityId,
+  patientId,
+  consultationId,
+}: ConsultationTabProps) {
+  return (
+    <div>
+      <PageTitle title="Nutrition" hideBack={true} breadcrumbs={false} />
+      <NutritionPlots
+        facilityId={facilityId}
+        patientId={patientId}
+        consultationId={consultationId}
+      ></NutritionPlots>
+    </div>
+  );
+}

src/Components/Facility/ConsultationPressureSoreTab.tsx

@@ -0,0 +1,14 @@
+import { ConsultationTabProps } from "../../Common/constants";
+import { PressureSoreDiagrams } from "./Consultations/PressureSoreDiagrams";
+import PageTitle from "../Common/PageTitle";
+
+export default function ConsultationPressureSoreTab({
+  consultationId,
+}: ConsultationTabProps) {
+  return (
+    <div className="mt-4">
+      <PageTitle title="Pressure Sore" hideBack={true} breadcrumbs={false} />
+      <PressureSoreDiagrams consultationId={consultationId} />
+    </div>
+  );
+}

src/Components/Facility/ConsultationSummaryTab.tsx

@@ -0,0 +1,23 @@
+import { ConsultationTabProps } from "../../Common/constants";
+import PageTitle from "../Common/PageTitle";
+import { PrimaryParametersPlot } from "./Consultations/PrimaryParametersPlot";
+export default function ConsultationSummaryTab({
+  facilityId,
+  patientId,
+  consultationId,
+}: ConsultationTabProps) {
+  return (
+    <div className="mt-4">
+      <PageTitle
+        title="Primary Parameters Plot"
+        hideBack={true}
+        breadcrumbs={false}
+      />
+      <PrimaryParametersPlot
+        facilityId={facilityId}
+        patientId={patientId}
+        consultationId={consultationId}
+      ></PrimaryParametersPlot>
+    </div>
+  );
+}