trevorpfiz · trevorpfiz · Dec 29, 2023 · Dec 29, 2023
diff --git a/apps/expo/src/app/index.tsx b/apps/expo/src/app/index.tsx
@@ -15,6 +15,7 @@ export const patientNameAtom = atomWithMMKV("patient_name", {
 
 const Index = () => {
   const [, setPatientId] = useAtom(patientIdAtom);
+  const [, setPatientName] = useAtom(patientNameAtom);
   const router = useRouter();
 
   return (
@@ -36,6 +37,7 @@ const Index = () => {
                 onPress={() => {
                   // use the demo patient Donna Lewis as the existing patient
                   setPatientId("e7836251cbed4bd5bb2d792bc02893fd");
+                  setPatientName({ firstName: "Donna", lastName: "Lewis" });
                   router.replace("/portal/(tabs)/");
                 }}
                 textClass="text-center"

diff --git a/apps/expo/src/app/portal/(alerts)/index.tsx b/apps/expo/src/app/portal/(alerts)/index.tsx
@@ -1,4 +1,4 @@
-import { Text, View } from "react-native";
+import { View } from "react-native";
 import { router } from "expo-router";
 import { FlashList } from "@shopify/flash-list";
 
@@ -14,7 +14,7 @@ const alerts = [
     title: "New appointment",
     message: "You have been scheduled for a new appointment.",
 
-    onPress: () => router.push("/portal/(tabs)/health-record"),
+    onPress: () => router.push("/portal/(tabs)/appointments"),
   },
 ];
 

diff --git a/apps/expo/src/app/portal/(tabs)/health-record/conditions.tsx b/apps/expo/src/app/portal/(tabs)/health-record/conditions.tsx
@@ -39,9 +39,7 @@ export default function Conditions() {
           data={conditions}
           renderItem={({ item, index }) => (
             <ConditionItem
-              condition={
-                item.resource.category?.[0]?.coding[0]?.display ?? "unknown"
-              }
+              condition={item.resource.code?.coding[0]?.display ?? "unknown"}
               status={
                 item.resource.clinicalStatus?.coding[0]?.display ?? "unknown"
               }

diff --git a/apps/expo/src/app/portal/(tabs)/health-record/forms/_layout.tsx b/apps/expo/src/app/portal/(tabs)/health-record/forms/_layout.tsx
@@ -52,7 +52,7 @@ export default function FormsLayout() {
           headerStyle: {
             backgroundColor: "#fff",
           },
-          headerShown: false,
+          headerLeft: () => <LeftHeaderBack />,
         }}
       />
     </Stack>

diff --git a/...s)/health-record/forms/consents/index.tsx → ...l/(tabs)/health-record/forms/consents.tsx b/...s)/health-record/forms/consents/index.tsx → ...l/(tabs)/health-record/forms/consents.tsx
@@ -48,6 +48,7 @@ export default function ConsentsPage() {
               status={item.resource?.status ?? "unknown"}
               start={item.resource?.provision?.period?.start ?? "unknown"}
               end={item.resource?.provision?.period?.end ?? "unknown"}
+              source={item.resource?.sourceAttachment?.url ?? ""}
               first={index === 0}
               last={index === data?.total - 1}
             />

diff --git a/apps/expo/src/app/portal/(tabs)/health-record/forms/consents/[consentId].tsx b/apps/expo/src/app/portal/(tabs)/health-record/forms/consents/[consentId].tsx
diff --git a/apps/expo/src/app/portal/(tabs)/health-record/forms/consents/_layout.tsx b/apps/expo/src/app/portal/(tabs)/health-record/forms/consents/_layout.tsx
diff --git a/apps/expo/src/app/portal/(tabs)/health-record/forms/questionnaires/[questionnaireId].tsx b/apps/expo/src/app/portal/(tabs)/health-record/forms/questionnaires/[questionnaireId].tsx
@@ -7,9 +7,12 @@ import QuestionItem from "~/components/ui/health-record/question-item";
 import { api } from "~/utils/api";
 
 export default function QuesitonnairePage() {
-  const { questionnaireId } = useLocalSearchParams<{
-    questionnaireId: string;
-  }>();
+  const { questionnaireId, questionnaireName, questionnaireStatus } =
+    useLocalSearchParams<{
+      questionnaireId: string;
+      questionnaireName: string;
+      questionnaireStatus: string;
+    }>();
 
   const { isLoading, isError, data, error } =
     api.questionnaire.getQuestionnaireResponse.useQuery({
@@ -37,14 +40,9 @@ export default function QuesitonnairePage() {
     <View className="flex-1 bg-gray-100">
       <Stack.Screen
         options={{
-          title: questionnaireId,
+          title: questionnaireName,
         }}
       />
-      <Text className="text-lg font-semibold">
-        {data?.questionnaire ?? "unknown questionnaire"}
-      </Text>
-      <Text>{data?.status ?? "unknown"}</Text>
-      <Text>{data?.authored ?? "unknown"}</Text>
       <FlashList
         data={data?.item}
         renderItem={({ item, index }) => (

diff --git a/apps/expo/src/app/portal/(tabs)/health-record/forms/questionnaires/index.tsx b/apps/expo/src/app/portal/(tabs)/health-record/forms/questionnaires/index.tsx
@@ -17,7 +17,25 @@ export default function QuestionnairesPage() {
       patientId,
     });
 
-  if (isLoading) {
+  const activeQuestionnairesQuery =
+    api.questionnaire.searchQuestionnaires.useQuery({
+      query: {
+        status: "active",
+      },
+    });
+
+  const retiredQuestionnairesQuery =
+    api.questionnaire.searchQuestionnaires.useQuery({
+      query: {
+        status: "retired",
+      },
+    });
+
+  if (
+    isLoading ||
+    activeQuestionnairesQuery.isLoading ||
+    retiredQuestionnairesQuery.isLoading
+  ) {
     return (
       <View className="mb-36 flex-1 items-center justify-center bg-white">
         <Loader2
@@ -29,28 +47,62 @@ export default function QuestionnairesPage() {
       </View>
     );
   }
-  if (isError) {
-    return <Text>Error: {error.message}</Text>;
+  if (
+    isError ||
+    activeQuestionnairesQuery.isError ||
+    retiredQuestionnairesQuery.isError
+  ) {
+    return (
+      <Text>
+        Error:{" "}
+        {error?.message ??
+          activeQuestionnairesQuery.error?.message ??
+          retiredQuestionnairesQuery.error?.message ??
+          "unknown error"}
+      </Text>
+    );
   }
 
   const responses = data?.entry;
+  const allQuestionnaires = [
+    ...(activeQuestionnairesQuery.data?.entry ?? []),
+    ...(retiredQuestionnairesQuery.data?.entry ?? []),
+  ];
+
+  // Merge questionnaire responses with their corresponding questionnaires
+  const mergedResponses = responses?.map((response) => {
+    const questionnaireId = response.resource?.questionnaire.split("/")[1];
+    const questionnaire = allQuestionnaires.find(
+      (q) => q.resource.id === questionnaireId,
+    );
+
+    return {
+      ...response,
+      questionnaireName:
+        questionnaire?.resource?.name ?? "Retired questionnaire",
+      questionnaireStatus: questionnaire?.resource?.status ?? "retired",
+    };
+  });
 
   return (
     <View className="flex-1 bg-gray-100">
       {data?.total > 0 ? (
         <FlashList
-          data={responses}
+          data={mergedResponses}
           renderItem={({ item, index }) => (
             <QuestionnaireItem
-              questionnaireResponse={
-                item.resource?.questionnaire ?? "unknown questionnaire"
-              }
+              questionnaireName={item.questionnaireName}
+              questionnaireStatus={item.questionnaireStatus}
               status={item.resource?.status ?? "unknown"}
               authored={item.resource?.authored ?? "unknown"}
               onPress={() =>
-                router.push(
-                  `/portal/(tabs)/health-record/forms/questionnaires/${item.resource?.id}`,
-                )
+                router.push({
+                  pathname: `/portal/(tabs)/health-record/forms/questionnaires/${item.resource?.id}`,
+                  params: {
+                    questionnaireName: item.questionnaireName,
+                    questionnaireStatus: item.questionnaireStatus,
+                  },
+                })
               }
               first={index === 0}
               last={index === data?.total - 1}

diff --git a/apps/expo/src/app/portal/(tabs)/health-record/test-results/index.tsx b/apps/expo/src/app/portal/(tabs)/health-record/test-results/index.tsx
@@ -2,6 +2,7 @@ import { Text, View } from "react-native";
 import { useRouter } from "expo-router";
 import { FlashList } from "@shopify/flash-list";
 import { useAtom } from "jotai";
+import { Loader2 } from "lucide-react-native";
 
 import { patientIdAtom } from "~/app";
 import TestItem from "~/components/ui/health-record/test-item";
@@ -26,7 +27,16 @@ export default function TestResultsPage() {
   });
 
   if (isLoading || isObsLoading) {
-    return <Text>Loading...</Text>;
+    return (
+      <View className="mb-36 flex-1 items-center justify-center bg-white">
+        <Loader2
+          size={48}
+          color="black"
+          strokeWidth={2}
+          className="animate-spin"
+        />
+      </View>
+    );
   }
 
   if (isError || isObsError) {

diff --git a/apps/expo/src/app/portal/(tabs)/index.tsx b/apps/expo/src/app/portal/(tabs)/index.tsx
@@ -46,17 +46,20 @@ export default function Home() {
   }
 
   return (
-    <View className="flex-1 flex-col gap-8 px-6 py-4">
+    <View className="flex-1 flex-col gap-8 bg-gray-100">
       {/* Welcome message */}
-      <Text className="text-3xl font-semibold">
-        Good Morning, {patientName.firstName || "User"}
-      </Text>
+      <View className="bg-white px-6 py-8">
+        <Text className="text-3xl font-semibold">
+          Good to see you, {patientName.firstName || "User"}
+        </Text>
+      </View>
+
       {/* Next appointment */}
-      <View>
+      <View className="px-6">
         <NextAppointment />
       </View>
       {/* Tasks */}
-      <View className="flex-1">
+      <View className="pb-2">
         <Tasks />
       </View>
     </View>

diff --git a/apps/expo/src/components/tasks.tsx b/apps/expo/src/components/tasks.tsx
@@ -22,7 +22,7 @@ export default function Tasks() {
   });
 
   return (
-    <View className="flex flex-col gap-8 p-4">
+    <View className="flex flex-col gap-8">
       <View className="flex flex-row items-center justify-around">
         <View className="flex flex-col gap-4">
           <View className="rounded-full border border-red-400 bg-red-100 p-3">
@@ -82,6 +82,7 @@ export default function Tasks() {
       </View>
       <FlatList
         horizontal={true}
+        showsHorizontalScrollIndicator={false}
         data={listTask.data?.entry?.filter((item) => {
           if (taskDescription !== "") {
             return item.resource.description?.includes(taskDescription);
@@ -108,6 +109,7 @@ export default function Tasks() {
           </View>
         )}
         keyExtractor={(item) => item.resource.id}
+        contentContainerStyle={{ paddingHorizontal: 16 }}
       />
     </View>
   );

diff --git a/apps/expo/src/components/ui/cards/alert-card.tsx b/apps/expo/src/components/ui/cards/alert-card.tsx
@@ -20,7 +20,7 @@ export default function AlertCard({
     <TouchableOpacity
       onPress={onPress}
       className={cn(
-        "border border-gray-200 bg-white shadow-sm",
+        "border-b border-gray-200 bg-white",
         first ? "" : "",
         last ? "" : "",
       )}

diff --git a/apps/expo/src/components/ui/health-record/allergy-item.tsx b/apps/expo/src/components/ui/health-record/allergy-item.tsx
@@ -1,6 +1,6 @@
 import { Text, View } from "react-native";
 
-import { cn } from "../rn-ui/lib/utils";
+import { cn } from "~/components/ui/rn-ui/lib/utils";
 
 export default function AllergyItem({
   allergen,
@@ -13,7 +13,7 @@ export default function AllergyItem({
   allergen: string;
   type: string;
   severity: string;
-  reaction: string;
+  reaction?: string;
   first?: boolean;
   last?: boolean;
 }) {
@@ -29,7 +29,7 @@ export default function AllergyItem({
         <Text className="text-lg font-semibold">{allergen}</Text>
         <View>
           <Text>
-            {type} - {severity} - {reaction}
+            {type} - {severity}
           </Text>
         </View>
       </View>