ttp 60 health records react native

apps/expo/app.config.ts

@@ -28,11 +28,11 @@ const defineConfig = (): ExpoConfig => ({
       backgroundColor: "#1F104A",
     },
   },
-  // extra: {
-  //   eas: {
-  //     projectId: "your-eas-project-id",
-  //   },
-  // },
+  extra: {
+    eas: {
+      projectId: "8fced4f1-e004-428e-b6a0-1696bc85f6ce",
+    },
+  },
   experiments: {
     tsconfigPaths: true,
     typedRoutes: true,

apps/expo/package.json

@@ -28,20 +28,23 @@
     "expo-constants": "~14.4.2",
     "expo-linking": "~5.0.2",
     "expo-router": "2.0.12",
-    "expo-secure-store": "^12.5.0",
-    "expo-splash-screen": "~0.22.0",
-    "expo-status-bar": "~1.7.1",
-    "expo-web-browser": "^12.5.0",
+    "expo-secure-store": "^12.3.1",
+    "expo-splash-screen": "~0.20.5",
+    "expo-status-bar": "~1.6.0",
+    "expo-web-browser": "^12.3.2",
+    "jotai": "^2.6.0",
     "lucide-react-native": "^0.294.0",
     "nativewind": "^4.0.13",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-native": "0.72.7",
+    "react-native": "0.72.6",
+    "react-native-blob-util": "^0.19.6",
     "react-native-gesture-handler": "~2.12.0",
+    "react-native-pdf": "^6.7.3",
     "react-native-reanimated": "~3.3.0",
     "react-native-safe-area-context": "4.6.3",
     "react-native-screens": "~3.22.1",
-    "react-native-svg": "^14.1.0",
+    "react-native-svg": "^13.9.0",
     "superjson": "^2.2.1"
   },
   "devDependencies": {

apps/expo/src/app/portal/(tabs)/health-record/_layout.tsx

@@ -1,4 +1,3 @@
-import { Text } from "react-native";
 import { Stack } from "expo-router";
 
 import {
@@ -30,7 +29,7 @@ export default function HealthRecordLayout() {
           headerStyle: {
             backgroundColor: "#fff",
           },
-          headerLeft: () => <LeftHeaderBack />,
+          headerShown: false,
         }}
       />
       <Stack.Screen
@@ -40,7 +39,7 @@ export default function HealthRecordLayout() {
           headerStyle: {
             backgroundColor: "#fff",
           },
-          headerLeft: () => <LeftHeaderBack />,
+          headerShown: false,
         }}
       />
       <Stack.Screen

apps/expo/src/app/portal/(tabs)/health-record/allergies.tsx

@@ -1,9 +1,56 @@
 import { Text, View } from "react-native";
+import { FlashList } from "@shopify/flash-list";
+import { atom, useAtom } from "jotai";
+
+import AllergyItem from "~/components/ui/health-record/allergy-item";
+import { api } from "~/utils/api";
+
+export const patientAtom = atom("e7836251cbed4bd5bb2d792bc02893fd");
 
 export default function Allergies() {
+  const [patientId] = useAtom(patientAtom);
+
+  const { isLoading, isError, data, error } =
+    api.patientMedicalHistory.getPatientAllergies.useQuery({ patientId });
+
+  if (isLoading) {
+    return <Text>Loading...</Text>;
+  }
+
+  if (isError) {
+    return <Text>Error: {error.message}</Text>;
+  }
+
+  const allergies = data?.entry;
+
   return (
-    <View>
-      <Text>Allergies</Text>
+    <View className="flex-1 bg-gray-100">
+      {data.total > 0 ? (
+        <FlashList
+          data={allergies}
+          renderItem={({ item, index }) => (
+            <AllergyItem
+              allergen={item.resource.code.text}
+              type={item.resource.type}
+              severity={item.resource.reaction?.[0]?.severity ?? ""}
+              reaction={
+                item.resource.reaction?.[0]?.manifestation[0]?.text ?? ""
+              }
+              first={index === 0}
+              last={index === data.total - 1}
+            />
+          )}
+          estimatedItemSize={100}
+          keyExtractor={(item, index) => index.toString()}
+          contentContainerStyle={{
+            paddingBottom: 16,
+            // paddingTop: 16,
+            // paddingHorizontal: 16,
+          }}
+        />
+      ) : (
+        <Text className="p-8">{`No allergies found.`}</Text>
+      )}
     </View>
   );
 }

apps/expo/src/app/portal/(tabs)/health-record/conditions.tsx

@@ -1,9 +1,57 @@
 import { Text, View } from "react-native";
+import { FlashList } from "@shopify/flash-list";
+import { useAtom } from "jotai";
+
+import ConditionItem from "~/components/ui/health-record/condition-item";
+import { api } from "~/utils/api";
+import { patientAtom } from "./allergies";
 
 export default function Conditions() {
+  const [patientId] = useAtom(patientAtom);
+
+  const { isLoading, isError, data, error } =
+    api.patientMedicalHistory.getPatientConditions.useQuery({ patientId });
+
+  if (isLoading) {
+    return <Text>Loading...</Text>;
+  }
+
+  if (isError) {
+    return <Text>Error: {error.message}</Text>;
+  }
+
+  const conditions = data?.entry;
+
   return (
-    <View>
-      <Text>Conditions</Text>
+    <View className="flex-1 bg-gray-100">
+      {data?.total > 0 ? (
+        <FlashList
+          data={conditions}
+          renderItem={({ item, index }) => (
+            <ConditionItem
+              condition={
+                item.resource.category?.[0]?.coding[0]?.display ?? "unknown"
+              }
+              status={
+                item.resource.clinicalStatus?.coding[0]?.display ?? "unknown"
+              }
+              onset={item.resource.onsetDateTime ?? "unknown"}
+              abatement={item.resource.abatementDateTime ?? "unknown"}
+              first={index === 0}
+              last={index === data.total - 1}
+            />
+          )}
+          estimatedItemSize={100}
+          keyExtractor={(item, index) => index.toString()}
+          contentContainerStyle={{
+            paddingBottom: 16,
+            // paddingTop: 16,
+            // paddingHorizontal: 16,
+          }}
+        />
+      ) : (
+        <Text className="p-8">{`No immunizations found.`}</Text>
+      )}
     </View>
   );
 }

apps/expo/src/app/portal/(tabs)/health-record/forms/_layout.tsx

@@ -0,0 +1,50 @@
+import { Stack } from "expo-router";
+
+import { LeftHeaderBack } from "~/components/ui/tabs-header";
+
+export default function FormsLayout() {
+  return (
+    <Stack>
+      <Stack.Screen
+        name="index"
+        options={{
+          title: "Forms",
+          headerStyle: {
+            backgroundColor: "#fff",
+          },
+          headerLeft: () => <LeftHeaderBack />,
+        }}
+      />
+      <Stack.Screen
+        name="goals"
+        options={{
+          title: "Goals",
+          headerStyle: {
+            backgroundColor: "#fff",
+          },
+          headerLeft: () => <LeftHeaderBack />,
+        }}
+      />
+      <Stack.Screen
+        name="questionnaires"
+        options={{
+          title: "Questionnaires",
+          headerStyle: {
+            backgroundColor: "#fff",
+          },
+          headerShown: false,
+        }}
+      />
+      <Stack.Screen
+        name="consents"
+        options={{
+          title: "Consents",
+          headerStyle: {
+            backgroundColor: "#fff",
+          },
+          headerShown: false,
+        }}
+      />
+    </Stack>
+  );
+}

apps/expo/src/app/portal/(tabs)/health-record/forms/consents/[consentId].tsx

@@ -0,0 +1,26 @@
+import { Text, View } from "react-native";
+import { Stack, useLocalSearchParams } from "expo-router";
+
+import {
+  ChatRightHeaderClose,
+  MessagesLeftHeaderBack,
+} from "~/components/ui/messages-header";
+
+export default function ConsentPage() {
+  const { consentId } = useLocalSearchParams<{
+    consentId: string;
+  }>();
+  return (
+    <View>
+      <Stack.Screen
+        options={{
+          title: consentId,
+          headerLeft: () => <MessagesLeftHeaderBack />,
+          headerRight: () => <ChatRightHeaderClose />,
+        }}
+      />
+      <Text>Consent Page</Text>
+      <Text>{consentId}</Text>
+    </View>
+  );
+}

apps/expo/src/app/portal/(tabs)/health-record/forms/consents/_layout.tsx

@@ -0,0 +1,18 @@
+import { Stack } from "expo-router";
+
+import { LeftHeaderBack } from "~/components/ui/tabs-header";
+
+export default function ConsentsLayout() {
+  return (
+    <Stack>
+      <Stack.Screen
+        name="index"
+        options={{
+          headerTitle: "Consents",
+          headerStyle: { backgroundColor: "#fff" },
+          headerLeft: () => <LeftHeaderBack />,
+        }}
+      />
+    </Stack>
+  );
+}

apps/expo/src/app/portal/(tabs)/health-record/forms/consents/index.tsx

@@ -0,0 +1,58 @@
+import { Text, View } from "react-native";
+import { FlashList } from "@shopify/flash-list";
+import { useAtom } from "jotai";
+
+import ConsentItem from "~/components/ui/health-record/consent-item";
+import { api } from "~/utils/api";
+import { patientAtom } from "../../allergies";
+
+export default function ConsentsPage() {
+  const [patientId] = useAtom(patientAtom);
+
+  const { isLoading, isError, data, error } =
+    api.patientMedicalHistory.getPatientConsents.useQuery({
+      patientId,
+    });
+
+  if (isLoading) {
+    return <Text>Loading...</Text>;
+  }
+
+  if (isError) {
+    return <Text>Error: {error.message}</Text>;
+  }
+
+  const consents = data?.entry;
+
+  return (
+    <View className="flex-1 bg-gray-100">
+      {data?.total > 0 ? (
+        <FlashList
+          data={consents}
+          renderItem={({ item, index }) => (
+            <ConsentItem
+              consent={
+                item.resource?.category?.[0]?.coding?.[0]?.display ??
+                "unknown consent"
+              }
+              status={item.resource?.status ?? "unknown"}
+              start={item.resource?.provision?.period?.start ?? "unknown"}
+              end={item.resource?.provision?.period?.end ?? "unknown"}
+              first={index === 0}
+              last={index === data?.total - 1}
+            />
+          )}
+          estimatedItemSize={100}
+          keyExtractor={(item, index) => index.toString()}
+          contentContainerStyle={{
+            paddingBottom: 16,
+            // paddingTop: 16,
+            // paddingHorizontal: 16,
+          }}
+        />
+      ) : (
+        <Text className="p-8">{`No consents found.`}</Text>
+      )}
+    </View>
+  );
+}