Elektrikspark/ttp 78 polish tasks and messaging for submission

apps/expo/src/app/(main)/onboarding/_layout.tsx

@@ -4,11 +4,6 @@ import { useAtom } from "jotai";
 import { patientIdAtom, userJourneyAtom } from "~/app/(main)";
 import { UserJourney } from "~/lib/constants";
 
-export const unstable_settings = {
-  // Ensure any route can link back to `onboarding/index.tsx`?
-  initialRouteName: "index",
-};
-
 export default function OnboardingLayout() {
   const [patientId] = useAtom(patientIdAtom);
   const [userJourney] = useAtom(userJourneyAtom);

apps/expo/src/app/(main)/portal/(messages)/index.tsx

@@ -25,8 +25,7 @@ export default function MessagesPage() {
       data?.map((msg) => ({
         title: msg.recipient.name,
         preview: msg?.messages[msg?.messages?.length - 1] ?? "",
-        onPress: () =>
-          router.push(`/portal/(messages)/chat/${msg.recipient.id}`),
+        onPress: () => router.push(`/portal/chat/${msg.recipient.id}`),
       })) ?? []
     );
   }, [data]);

apps/expo/src/app/(main)/portal/(tabs)/_layout.tsx

@@ -14,6 +14,7 @@ export default function TabsLayout() {
             return <Home size={size} color={color} />;
           },
           header: () => <TabsHeader title="Home" />,
+          href: "/portal/(tabs)",
         }}
       />
       <Tabs.Screen
@@ -24,6 +25,7 @@ export default function TabsLayout() {
             return <Calendar size={size} color={color} />;
           },
           headerShown: false,
+          href: "/portal/appointments",
         }}
       />
       <Tabs.Screen
@@ -34,6 +36,7 @@ export default function TabsLayout() {
             return <Clipboard size={size} color={color} />;
           },
           headerShown: false,
+          href: "/portal/health-record",
         }}
       />
       <Tabs.Screen
@@ -44,6 +47,7 @@ export default function TabsLayout() {
             return <User size={size} color={color} />;
           },
           headerShown: false,
+          href: "/portal/account",
         }}
       />
     </Tabs>

apps/expo/src/app/(main)/portal/(tabs)/index.tsx

@@ -53,7 +53,7 @@ export default function Home() {
         <SubmenuButtons />
       </View>
       {/* Tasks */}
-      <View className="pb-2">
+      <View className="flex-1 pb-6">
         <Tasks />
       </View>
     </View>

apps/expo/src/app/(main)/portal/_layout.tsx

@@ -4,11 +4,6 @@ import { useAtom } from "jotai";
 import { patientIdAtom, userJourneyAtom } from "~/app/(main)";
 import { UserJourney } from "~/lib/constants";
 
-export const unstable_settings = {
-  // Ensure any route can link back to `(tabs)/index.tsx`?
-  initialRouteName: "(tabs)",
-};
-
 export default function PortalLayout() {
   const [patientId] = useAtom(patientIdAtom);
   const [userJourney] = useAtom(userJourneyAtom);

apps/expo/src/components/forms/medications-form.tsx

@@ -1,7 +1,6 @@
 import {
   KeyboardAvoidingView,
   Platform,
-  SafeAreaView,
   ScrollView,
   Text,
   TouchableOpacity,

apps/expo/src/components/tasks.tsx

@@ -1,116 +1,80 @@
 import { useState } from "react";
-import { FlatList, Text, TouchableOpacity, View } from "react-native";
-import { useRouter } from "expo-router";
+import { Button, FlatList, Text, View } from "react-native";
 import { useAtom } from "jotai";
-import { FileCheck, FileText, FileX } from "lucide-react-native";
 
 import { patientIdAtom } from "~/app/(main)";
-import { Button } from "~/components/ui/rn-ui/components/ui/button";
+import MeditationSvg from "~/components/ui/tasks-svg";
 import { api } from "~/utils/api";
 import { formatDateTime } from "~/utils/dates";
 
 export default function Tasks() {
   const [patientId] = useAtom(patientIdAtom);
 
-  const router = useRouter();
-
   const [taskStatus, setTaskStatus] = useState<
     "requested" | "cancelled" | "completed" | ""
   >("");
+  const [taskDescription, setTaskDescription] = useState<string>("");
 
-  const listTask = api.task.search.useQuery({
+  const tasksQuery = api.task.search.useQuery({
     query: {
       patient: `Patient/${patientId}`,
     },
   });
 
+  // Check if there are tasks to display
+  const hasTasks = tasksQuery.data?.entry?.length ?? 0 > 0;
+
   return (
-    <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">
-            <TouchableOpacity
-              onPress={async () => {
-                setTaskStatus("requested");
-                await listTask.refetch();
-              }}
-            >
-              <FileText color={"red"} size={40} />
-            </TouchableOpacity>
-          </View>
-        </View>
-        <View className="flex flex-col gap-4">
-          <View className="rounded-full border border-yellow-400 bg-yellow-100 p-3">
-            <TouchableOpacity
-              onPress={async () => {
-                setTaskStatus("cancelled");
-                await listTask.refetch();
-              }}
-            >
-              <FileX className="text-yellow-800" size={40} />
-            </TouchableOpacity>
-          </View>
-        </View>
-        <View className="flex flex-col gap-4">
-          <View className="rounded-full border border-green-400 bg-green-100 p-3">
-            <TouchableOpacity
-              onPress={async () => {
-                setTaskStatus("completed");
-                await listTask.refetch();
-              }}
-            >
-              <FileCheck color={"green"} size={40} />
-            </TouchableOpacity>
-          </View>
-        </View>
-      </View>
-      <View className="flex flex-row items-center justify-around">
-        <Text>To-Do</Text>
-        <Text>Cancelled</Text>
-        <Text>Done</Text>
-      </View>
-      <View className="flex flex-row items-center justify-around">
-        <Text className="text-3xl font-bold">{"Today's Tasks"}</Text>
+    <View className="flex-1 flex-col gap-8">
+      <View className="flex-row items-center justify-around">
+        <Text className="text-3xl font-bold">{`Today's Tasks`}</Text>
         <Button
+          title="See All"
           onPress={() => {
             setTaskStatus("");
-            router.push("/portal/tasks");
+            setTaskDescription("");
           }}
-          textClass="text-center"
-        >
-          See All
-        </Button>
+          color={"#1d4ed8"}
+        />
       </View>
-      <FlatList
-        horizontal={true}
-        showsHorizontalScrollIndicator={false}
-        data={listTask.data?.entry?.filter((item) => {
-          if (taskStatus === "") {
-            return true;
-          }
-          return item.resource.status === taskStatus;
-        })}
-        renderItem={({ item }) => (
-          <View
-            className={`ml-4 flex w-52 flex-col gap-4 rounded-xl p-2 ${item.resource.status === "requested"
-              ? "bg-red-500"
-              : item.resource.status === "cancelled"
-                ? "bg-yellow-800"
-                : "bg-green-800"
+      {!hasTasks ? (
+        <FlatList
+          horizontal={true}
+          showsHorizontalScrollIndicator={false}
+          data={tasksQuery.data?.entry?.filter((item) => {
+            if (taskDescription !== "") {
+              return item.resource.description?.includes(taskDescription);
+            }
+
+            if (taskStatus === "") {
+              return true;
+            }
+            return item.resource.status === taskStatus;
+          })}
+          renderItem={({ item }) => (
+            <View
+              className={`ml-4 w-52 flex-1 flex-col gap-4 rounded-xl border p-2 ${
+                item.resource.status === "requested"
+                  ? "border-red-400 bg-red-200"
+                  : item.resource.status === "cancelled"
+                    ? "border-yellow-400 bg-yellow-200"
+                    : "border-green-400 bg-green-200"
               }`}
-          >
-            <Text className="font-medium text-white">
-              {formatDateTime(item.resource.authoredOn!)}
-            </Text>
-            <Text className="text-gray-300">{item.resource.description}</Text>
-            <Text className="font-bold capitalize text-white">
-              {item.resource.status}
-            </Text>
-          </View>
-        )}
-        keyExtractor={(item) => item.resource.id}
-        contentContainerStyle={{ paddingHorizontal: 0 }}
-      />
+            >
+              <Text>{formatDateTime(item.resource.authoredOn!)}</Text>
+              <Text>{item.resource.description}</Text>
+              <Text>{item.resource.status}</Text>
+            </View>
+          )}
+          keyExtractor={(item) => item.resource.id}
+          contentContainerStyle={{ paddingHorizontal: 0 }}
+        />
+      ) : (
+        <View className="flex-1 items-center justify-start gap-2">
+          <MeditationSvg />
+          <Text className="text-2xl font-normal">{`All tasks done!`}</Text>
+        </View>
+      )}
     </View>
   );
 }

apps/expo/src/components/ui/cards/record-category-card.tsx

@@ -2,6 +2,8 @@ import { Text, TouchableOpacity, View } from "react-native";
 import { ChevronRight } from "lucide-react-native";
 import type { LucideIcon } from "lucide-react-native";
 
+import { Card } from "~/components/ui/rn-ui/components/ui/card";
+
 const RecordCategoryCard = ({
   icon: Icon,
   title,
@@ -12,15 +14,15 @@ const RecordCategoryCard = ({
   onPress: () => void;
 }) => {
   return (
-    <TouchableOpacity activeOpacity={0.5} onPress={onPress}>
-      <View className="mb-4 flex-1 flex-row items-center rounded-xl bg-white py-9 pl-8 pr-4 shadow-sm">
+    <TouchableOpacity activeOpacity={0.5} onPress={onPress} className="mb-4">
+      <Card className="flex-1 flex-row items-center bg-white py-9 pl-8 pr-4">
         <View className="mr-4">
           <Icon size={24} color="black" />
         </View>
         <Text className="flex-1 text-xl font-bold">{title}</Text>
 
         <ChevronRight size={20} strokeWidth={2} />
-      </View>
+      </Card>
     </TouchableOpacity>
   );
 };

apps/expo/src/components/ui/headers/tabs-header.tsx

@@ -12,14 +12,14 @@ export function TabsHeader({ title }: { title: string }) {
         <View className="flex-row items-center">
           <TouchableOpacity
             onPress={() => {
-              router.push("/portal/(alerts)/");
+              router.push("/(main)/portal/(alerts)");
             }}
           >
             <Bell size={28} className="mr-6 text-black" />
           </TouchableOpacity>
           <TouchableOpacity
             onPress={() => {
-              router.push("/portal/(messages)/");
+              router.push("/(main)/portal/(messages)");
             }}
           >
             <View className="flex-row items-center">
@@ -51,7 +51,7 @@ export function TabsRightHeader() {
       </TouchableOpacity>
       <TouchableOpacity
         onPress={() => {
-          router.push("/portal/(messages)/");
+          router.push("/(main)/portal/(messages)");
         }}
       >
         <MessageSquare size={24} className="text-black" />