added first version of the patients-without-episodes warning table in the landing page

Author: paolo7

src/api/patientsAPI/patientsAPI.tsx

@@ -17,6 +17,7 @@ export default {
   getSurgeons: (params?: PaginationParams) =>
     request(METHODS.GET, '/medical-personnel/', { params }),
   getPatient: (id: string) => request(METHODS.GET, `/patients/${id}/`, {}),
+  getUnlinkedPatients: () => request(METHODS.GET, '/unlinked-patients/', {}),
   getEpisode: (id: string) => request(METHODS.GET, `/episodes/${id}/`, {}),
   getEpisodeDischarge: (id: string) => request(METHODS.GET, `/episodes/${id}/discharge/`, {}),
   getEpisodeFollowUps: (id: string) => request(METHODS.GET, `/episodes/${id}/follow-ups/`, {}),

src/hooks/api/patientHooks.ts

@@ -23,7 +23,7 @@ import {
   RegisterEpisodePayload,
   RegisterPatientPayload,
   SurgeonEpisodeSummaryAPI,
-  SurgeonsResponse,
+  SurgeonsResponse, UnlinkedPatientsResponse,
 } from '../../models/apiTypes';
 import { RegisterEpisodeFormType } from '../../pages/RegisterEpisode/types';
 import { RegisterPatientFormType } from '../../pages/RegisterPatient/types';
@@ -138,6 +138,22 @@ export const useGetPatients = (params?: PatientsPayload) => {
   );
 };
 
+export const useGetUnlinkedPatients = () => {
+  return useQuery<UnlinkedPatientsResponse, AxiosError>(
+    ReactQueryKeys.UnlinkedPatientsQuery,
+    async () => {
+      const { request } = patientsAPI.single.getUnlinkedPatients();
+      return await request();
+    },
+    {
+      onError: (error: AxiosError) => {
+        console.error("Error fetching unlinked patients:", error);
+      },
+      retry: false,
+    }
+  );
+};
+
 export const useGetSurgeons = (params?: PaginationParams) => {
   return useQuery<SurgeonsResponse, AxiosError, SurgeonsResponse>(
     [ReactQueryKeys.SurgeonsQuery, params?.limit, params?.offset, params?.ordering],

src/hooks/constants.ts

@@ -6,4 +6,5 @@ export const ReactQueryKeys = {
   PreferredHospitalQuery: 'preferredHospital',
   SurgeonEpisodeSummaryQuery: 'surgeonEpisodeSummary',
   OwnedEpisodesQuery: 'ownedEpisodes',
+  UnlinkedPatientsQuery: 'unlinkedPatientsQuery',
 };

src/models/apiTypes.tsx

@@ -235,4 +235,13 @@ export type OwnedEpisodeAPI = {
   follow_up_dates: FollowUpAPI[];
   patient_id: number;
   hospital_id: number;
-};
+};
+
+export type UnlinkedPatient = {
+  id: string;
+  full_name: string;
+  hospital_id: string;
+  patient_hospital_id: string;
+};
+
+export type UnlinkedPatientsResponse = UnlinkedPatient[];

src/pages/LandingPage/LandingPage.tsx

@@ -1,7 +1,12 @@
 import React, { useState } from 'react';
 
 import { Button } from '@orfium/ictinus';
-import { useGetSurgeonEpisodeSummary, useGetOwnedEpisodes } from 'hooks/api/patientHooks';
+import {
+  useGetSurgeonEpisodeSummary,
+  useGetOwnedEpisodes,
+  useGetUnlinkedPatients,
+  useGetPreferredHospital,
+} from 'hooks/api/patientHooks';
 import { useHistory } from 'react-router-dom';
 import urls from 'routing/urls';
 
@@ -19,6 +24,9 @@ const LandingPage: React.FC = () => {
   const history = useHistory();
   const { isDesktop } = useResponsiveLayout();
 
+  const { data: preferredHospital, isLoading: isLoadingHospital, error: hospitalError } = useGetPreferredHospital();
+  const { data: unlinkedPatients = [] } = useGetUnlinkedPatients();
+
   // State to handle sorting
   const [sortConfig, setSortConfig] = useState<{
     key: keyof OwnedEpisodeAPI | 'discharged';
@@ -105,6 +113,53 @@ const LandingPage: React.FC = () => {
           <DashboardText>Loading surgeon summary...</DashboardText>
         )}
 
+        {/* Display unlinked patients section */}
+        {isLoadingHospital ? (
+          <DashboardText>Loading preferred hospital...</DashboardText>
+        ) : hospitalError ? (
+          <DashboardText style={{ color: 'red' }}>
+            Failed to load preferred hospital: {hospitalError.message}
+          </DashboardText>
+        ) : !preferredHospital || Object.keys(preferredHospital).length === 0 ? (
+          <DashboardText style={{ color: 'red', fontStyle: 'italic' }}>
+            Configure your preferred hospital to view any patients missing an episode.
+          </DashboardText>
+        ) : unlinkedPatients.length > 0 ? (
+          <div style={{ marginBottom: '2rem' }}>
+            <DashboardTextHeader>
+              <h2>Patients without Episodes Registered in Your Hospital</h2>
+            </DashboardTextHeader>
+            <div style={{ maxHeight: '150px', overflowY: 'auto' }}>
+              <table style={{ width: '100%', borderCollapse: 'collapse' }}>
+                <thead>
+                  <tr>
+                    <th style={{ border: '1px solid lightgrey', padding: '8px' }}>Patient Name</th>
+                    <th style={{ border: '1px solid lightgrey', padding: '8px' }}>Patient Hospital ID</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {unlinkedPatients.map((patient) => (
+                    <tr
+                      key={patient.id}
+                      onClick={() =>
+                        history.push(`${urls.patients()}/${patient.hospital_id}/${patient.id}`)
+                      }
+                      style={{
+                        backgroundColor: '#fc7c7c',
+                        cursor: 'pointer',
+                        borderBottom: '1px solid lightgrey',
+                      }}
+                    >
+                      <td style={{ border: '1px solid lightgrey', padding: '8px' }}>{patient.full_name}</td>
+                      <td style={{ border: '1px solid lightgrey', padding: '8px' }}>{patient.patient_hospital_id}</td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          </div>
+        ) : null}
+
         {/* Render owned episodes table */}
         {ownedEpisodes ? (
           ownedEpisodes.length > 0 ? (