Add Dashboard Team Info

src/app/(main)/(routes)/(protected)/dashboard/page.tsx

@@ -1,18 +1,52 @@
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+} from "@/app/_components/ui/card";
+import { serverTRPC } from "@/app/_trpc/server";
+import { composeServerComponentClient } from "@/server/lib/supabase/server";
+import { getUser } from "@/shared/supabase/auth";
 import { type Metadata } from "next";
 
 export const metadata: Metadata = {
   title: "Dashboard | HackPSH",
   description: "Overview your progress within the competition.",
 };
 
-export default function DashboardPage() {
+export default async function DashboardPage() {
+  const supabase = composeServerComponentClient();
+
+  const user = await getUser(supabase);
+  const { team_name, team_join_code, team_points, team_members } =
+    await serverTRPC.team.get_team_info.query({
+      user_uuid: user.id,
+    });
+
   return (
-    <div>
-      <div className="mt-14 flex w-full flex-col items-center justify-center">
-        <p className="mb-10 text-center text-3xl font-bold tracking-tight">
-          Dashboard
-        </p>
-      </div>
+    <div className="container my-8">
+      <Card>
+        <CardHeader>
+          <CardTitle className="text-4xl">Team</CardTitle>
+        </CardHeader>
+        <CardContent className="flex flex-col space-y-4 text-muted-foreground">
+          <div>
+            <p className="text-xl text-foreground">General Information</p>
+            <p>Team Name: {team_name}</p>
+            <p>Team Code: {team_join_code}</p>
+            <p>Points: {team_points}</p>
+          </div>
+
+          <div>
+            <p className="text-xl text-foreground">Members</p>
+            {team_members.map((member, index) => (
+              <p key={`member-${index}`} className="text-muted-foreground">
+                {member.user_display_name}
+              </p>
+            ))}
+          </div>
+        </CardContent>
+      </Card>
     </div>
   );
 }

src/app/_components/onboarding/support-us-form.tsx

@@ -21,7 +21,6 @@ import {
   FormLabel,
 } from "../ui/form";
 import { cn } from "@/app/_lib/client-utils";
-import NumberStepper from "./number-stepper";
 import { Switch } from "../ui/switch";
 import { Button } from "../ui/button";
 import { Icons } from "../ui/icons";
@@ -85,7 +84,7 @@ export default function SupportUsForm({
               control={form.control}
               name="user_support_administrative"
               render={({ field }) => (
-                <FormItem className="flex flex-row items-center justify-between rounded-lg border p-4">
+                <FormItem className="flex flex-row items-center justify-between p-4 border rounded-lg">
                   <div className="space-y-0.5">
                     <FormLabel className="text-base">Administrative</FormLabel>
                     <FormDescription>
@@ -107,7 +106,7 @@ export default function SupportUsForm({
               control={form.control}
               name="user_support_technical"
               render={({ field }) => (
-                <FormItem className="flex flex-row items-center justify-between rounded-lg border p-4">
+                <FormItem className="flex flex-row items-center justify-between p-4 border rounded-lg">
                   <div className="space-y-0.5">
                     <FormLabel className="text-base">Technical</FormLabel>
                     <FormDescription>
@@ -131,7 +130,7 @@ export default function SupportUsForm({
             disabled={form.formState.isSubmitting}
           >
             {form.formState.isSubmitting && (
-              <Icons.spinner className="mr-2 h-4 w-4 animate-spin" />
+              <Icons.spinner className="w-4 h-4 mr-2 animate-spin" />
             )}
             Next
           </Button>

src/server/dao/team.ts

@@ -142,3 +142,37 @@ export async function joinTeam(
     });
   }
 }
+
+export async function getTeamInfo(db: Database, user_uuid: string) {
+  try {
+    const teamUUID = await db.query.app_user_profile.findFirst({
+      columns: { user_team_uuid: true },
+      where: (user_data, { eq }) => eq(user_data.user_uuid, user_uuid),
+    });
+
+    const teamGeneralInfo = await db.query.app_team.findFirst({
+      columns: {
+        team_name: true,
+        team_join_code: true,
+        team_points: true,
+      },
+      where: (team_data, { eq }) =>
+        eq(team_data.team_uuid, teamUUID!.user_team_uuid!),
+    });
+
+    const teamMembers = await db.query.app_user_profile.findMany({
+      columns: {
+        user_display_name: true,
+      },
+      where: (user_data, { eq }) =>
+        eq(user_data.user_team_uuid, teamUUID!.user_team_uuid!),
+    });
+
+    return { teamGeneralInfo, teamMembers };
+  } catch (error) {
+    throw new TRPCError({
+      message: "The database has encountered some issues.",
+      code: "INTERNAL_SERVER_ERROR",
+    });
+  }
+}

src/server/procedures/protected/team/getTeamInfoProcedure.ts

@@ -0,0 +1,16 @@
+import { getTeamInfo } from "@/server/dao/team";
+import { protectedProcedure } from "@/server/trpc";
+import { LookupUserSchema } from "@/server/zod-schemas/user";
+
+export default protectedProcedure
+  .input(LookupUserSchema)
+  .query(async ({ ctx, input }) => {
+    const result = await getTeamInfo(ctx.db, input.user_uuid);
+
+    return {
+      team_name: result.teamGeneralInfo?.team_name,
+      team_join_code: result.teamGeneralInfo?.team_join_code,
+      team_points: result.teamGeneralInfo?.team_points,
+      team_members: result.teamMembers,
+    };
+  });

src/server/routers/team.ts

@@ -1,8 +1,10 @@
 import createTeamProcedure from "../procedures/protected/team/createTeamProcedure";
+import getTeamInfoProcedure from "../procedures/protected/team/getTeamInfoProcedure";
 import joinTeamProcedure from "../procedures/protected/team/joinTeamProcedure";
 import { createTRPCRouter } from "../trpc";
 
 export const teamRouter = createTRPCRouter({
   join_team: joinTeamProcedure,
   create_team: createTeamProcedure,
+  get_team_info: getTeamInfoProcedure,
 });