My patients

app/dashboard/page.tsx

@@ -1,4 +1,4 @@
-import { TypographyH2, TypographyP } from "@/components/ui/typography";
+import { TypographyP } from "@/components/ui/typography";
 import { createServerSupabaseClient } from "@/lib/server-utils";
 import { redirect } from "next/navigation";
 
@@ -13,14 +13,10 @@ export default async function Dashboard() {
     // this is a protected route - only users who are signed in can view this route
     redirect("/");
   }
-  const userEmail = session.user.email;
 
   return (
     <>
-      <TypographyH2>Dashboard</TypographyH2>
-      <TypographyP>This is a protected route accessible only to signed-in users.</TypographyP>
-      {userEmail && <TypographyP>{`Your email is ${userEmail}`}</TypographyP>}
-      <br />
+      <TypographyP>Dashboard, coming soon!</TypographyP>
     </>
   );
 }

app/login/page.tsx

@@ -19,7 +19,7 @@ export default async function LoginPage() {
   return (
     <LoginCard className="sm:w-[350px]">
       <div className="flex flex-col space-y-2 text-center">
-        <h1 className="text-2xl font-semibold tracking-tight">Kinnect</h1>
+        <h1 className="text-2xl font-semibold tracking-tight">Therable</h1>
       </div>
       <UserAuthForm />
       <div className="flex flex-col space-y-1 text-center">

app/my-patients/page.tsx

@@ -0,0 +1,52 @@
+import PatientCard from "@/components/patient-card";
+import { createServerSupabaseClient } from "@/lib/server-utils";
+import { redirect } from "next/navigation";
+
+export default async function MyPatients() {
+  const supabase = createServerSupabaseClient();
+  const {
+    data: { session },
+  } = await supabase.auth.getSession();
+
+  if (!session || session.user.user_metadata.type !== "clinician") {
+    redirect("/dashboard");
+  }
+  const { data: clinician } = await supabase.from("clinicians").select().eq("user_id", session.user.id).single();
+
+  // redundant check if clinician irretrievable for some reason
+  if (!clinician) {
+    redirect("/dashboard");
+  }
+
+  const { data: clinic } = await supabase.from("clinics").select().eq("owner", clinician.id).single();
+  const { data: patients } = await supabase
+    .from("clinic_members")
+    .select(`*, patients(first_name, last_name)`)
+    .eq("clinic_id", clinic?.id);
+
+  return (
+    <>
+      <p className="mb-10 text-2xl">My patients</p>
+      <div className="grid grid-cols-4 gap-4">
+        {patients && patients.length > 0 ? (
+          patients.map((patient, i) => (
+            <PatientCard
+              key={i}
+              userId={patient.id}
+              firstName={patient.patients ? patient.patients.first_name : "FNU"}
+              lastName={patient.patients ? patient.patients.last_name : "LNU"}
+              diagnosis={patient.diagnosis}
+              lastVisit={new Date()} // placeholder
+              nextVisit={new Date()} // placeholder
+              avatar="https://images.pexels.com/photos/771742/pexels-photo-771742.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" // placeholder
+            />
+          ))
+        ) : clinic ? (
+          <p>No patients currently enrolled</p>
+        ) : (
+          <p>You haven&apos;t created a clinic yet!</p>
+        )}
+      </div>
+    </>
+  );
+}