Merge pull request #21 from RoBorregos/feature/team-results

Feature/team results

package.json

@@ -47,6 +47,7 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-hook-form": "^7.53.1",
+    "react-icons": "^5.3.0",
     "react-select": "^5.8.2",
     "server-only": "^0.0.1",
     "sonner": "^1.5.0",

src/app/_components/custom-login-text.tsx

@@ -0,0 +1,19 @@
+"use client";
+import { signIn } from "next-auth/react";
+
+export default function CustomLoginText({ text, label }: { text: string, label: string }) {
+    return (
+
+        <div className="flex flex-col justify-center items-center">
+            <p className="w-fit text-white pb-5">
+                {text}
+            </p>
+            <p
+                className="w-fit p-2 bg-slate-700 cursor-pointer rounded-md text-white transition duration-300 hover:bg-slate-100 hover:bg-opacity-10"
+                onClick={() => signIn("google")}
+            >
+                {label}
+            </p>
+        </div>
+    );
+}

src/app/_components/team/results.tsx

@@ -0,0 +1,109 @@
+"use client";
+import { useState } from "react";
+import { TeamType } from "rbrgs/server/api/routers/team";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../shadcn/ui/select";
+
+
+const Results = ({ team }: { team: TeamType }) => {
+    const challengeA = team?.challengeA;
+    const challengeB = team?.challengeB;
+    const challengeC = team?.challengeC;
+    const [selected, setSelected] = useState("Sin seleccionar");
+
+
+    return (
+        <div>
+            <h1 className="mb-5 text-center text-4xl">Results</h1>
+            <div className="mx-auto w-10/12 lg:w-1/2">
+                <p>Select a round</p>
+                <Select
+                    onValueChange={(value) => {
+                        setSelected(value);
+                    }}
+                    value={selected}
+                >
+                    <SelectTrigger>
+                        <SelectValue placeholder="Selecciona una ronda" />
+                    </SelectTrigger>
+
+                    <SelectContent>
+                        <SelectItem value="1">Ronda 1</SelectItem>
+                        <SelectItem value="2">Ronda 2</SelectItem>
+                        <SelectItem value="3">Ronda 3</SelectItem>
+                    </SelectContent>
+                </Select>
+
+                {selected != "Sin seleccionar" && (
+                    <RoundResults team={team} selection={selected} />
+                )}
+
+
+            </div>
+        </div>
+    )
+}
+
+const RoundResults = ({ team, selection }: { team: TeamType, selection: string }) => {
+
+    const challengesA = team?.challengeA;
+    const challengesB = team?.challengeB;
+    const challengesC = team?.challengeC;
+
+    return (
+        <div className="pt-10">
+            <div>
+                <div className="pb-10">
+
+                    <h1 className="font-anton text-lg pb-2">Challenge A - Ball</h1>
+                    {challengesA?.filter((challenge) => challenge.roundId === selection).map((challenge, key) => (
+                        <div key={key} className="px-5">
+                            Ball contact: {challenge.ballContact ? "Yes" : "No"}
+                            <br />Ball saved: {challenge.ballSaved ? "Yes" : "No"}
+                            <br />Finish track: {challenge.finshTrack ? "Yes" : "No"}
+                            <br />Finish track (No crossing line): {challenge.finishTrackNoCrossingLine ? "Yes" : "No"}
+                            <br />Bonus: {challenge.obtainedBonus ? "Yes" : "No"}
+                            <br />Time: {challenge.roundTimeSeconds} seconds
+                            <br />Lack of progress: {challenge.lackOfProgress ? "Yes" : "No"}
+                            <hr className="py-1" />
+                            Points: {challenge.points}
+                        </div>
+                    ))}
+                </div>
+
+
+                <div className="pb-10">
+                    <h1 className="font-anton text-lg pb-2">Challenge B - Line Follower</h1>
+                    {challengesB?.filter((challenge) => challenge.roundId === selection).map((challenge, key) => (
+                        <div key={key} className="px-5">
+                            Track Points: {challenge.trackPoints}
+                            <br />Time: {challenge.roundTimeSeconds} seconds
+                            <br />Lack of progress: {challenge.lackOfProgress ? "Yes" : "No"}
+                            <hr className="py-1" />
+                            Points: {challenge.points}
+                        </div>
+                    ))}
+                </div>
+
+
+                <h1 className="font-anton text-lg pb-2">Challenge C - Maze</h1>
+                {challengesC?.filter((challenge) => challenge.roundId === selection).map((challenge, key) => (
+                    <div key={key} className="px-5">
+                        Number of detected colors: {challenge.detectedColors}
+                        <br />Passed ramp: {challenge.passedRamp ? "Yes" : "No"}
+                        <br />Passed ramp (No lack of progress): {challenge.crossedRampWithoutLOP ? "Yes" : "No"}
+                        <br />Passed ramp (No touching walls): {challenge.crossedRampWithoutTouching ? "Yes" : "No"}
+                        <br />Balanced in ramp: {challenge.balancedRamp ? "Yes" : "No"}
+                        <br />Bonus: {challenge.obtainedBonus ? "Yes" : "No"}
+                        <br />Time: {challenge.roundTimeSeconds} seconds
+                        <br />Lack of progress: {challenge.lackOfProgress ? "Yes" : "No"}
+                        <hr className="py-1" />
+                        Points: {challenge.points}
+                    </div>
+                ))}
+            </div>
+        </div>
+    )
+}
+
+
+export default Results;

src/app/_components/team/switchButton.tsx

@@ -0,0 +1,38 @@
+"use client";
+import { useState } from 'react';
+import { BsChatRight } from 'react-icons/bs'
+import { BsFileEarmarkText } from 'react-icons/bs'
+
+interface sbuttonProps {
+    variant: string;
+    onClick: () => void;
+}
+
+const SwitchButton: React.FC<sbuttonProps> = ({ variant, onClick }) => {
+
+    return (
+        <div className="w-full flex flex-col justify-center mt-5 gap-3 pb-20">
+            <div className='flex mx-auto bg-neutral-800 p-1 rounded-md shadow-md'>
+                <ButtonX label="Schedule" selected={variant == "INFO"} onClick={onClick} />
+                <ButtonX label="Results" selected={variant == "RESULTS"} onClick={onClick} />
+
+            </div>
+        </div>
+    )
+}
+
+interface buttonProps {
+    label: string;
+    selected: boolean;
+    onClick: () => void;
+}
+
+const ButtonX: React.FC<buttonProps> = ({ label, selected, onClick }) => {
+    return (
+        <button className={`flex items-center justify-center p-2 rounded-md ${selected ? 'bg-blue-600 text-white' : 'text-gray-400'}`} onClick={onClick}>
+            <span>{label}</span>
+        </button>
+    )
+}
+
+export default SwitchButton

src/app/_components/team/team.tsx

@@ -0,0 +1,103 @@
+"use client";
+import { Challenge, User } from "@prisma/client";
+import Table from "rbrgs/app/_components/table";
+import Input from "../input";
+import Spinner from "../spinner";
+import Title from "../title";
+import SwitchButton from "./switchButton";
+import { useCallback, useState } from "react";
+import { TeamType } from "rbrgs/server/api/routers/team";
+import Results from "./results";
+
+interface Data {
+    col1: string;
+    col2: string;
+}
+
+function transformChallengeData(challenges: Challenge[]): Data[] {
+    return challenges.map((challenge, key) => ({
+        col1: challenge.time.toLocaleTimeString("en-US", {
+            hour: "numeric",
+            minute: "2-digit",
+            hour12: true,
+        }),
+        col2: challenge.name,
+    }));
+}
+
+function transformInterviewData(members: User[]): Data[] {
+    return members.map((member, key) => ({
+        col1: member.interviewTime
+            ? member.interviewTime.toLocaleTimeString("en-US", {
+                hour: "numeric",
+                minute: "2-digit",
+                hour12: true,
+            })
+            : "",
+        col2: member.name ? member.name : "",
+    }));
+}
+
+const TeamInfo = ({ team }: { team: TeamType }) => {
+
+    const [variant, setSelected] = useState("INFO");
+    const toggleVariant = useCallback(() => {
+        setSelected(variant === "INFO" ? "RESULTS" : "INFO");
+    }, [variant]);
+
+    return (
+        <div>
+            <SwitchButton variant={variant} onClick={toggleVariant} />
+            {team?.name ? (
+
+                <div className="pb-40">
+
+                    {variant === "INFO" ? (
+                        <Schedules team={team} />
+                    ) : (
+                        <Results team={team} />
+                    )}
+
+
+                    <h1 className="mb-5 text-center text-4xl mt-16">Documents</h1>
+                    <Input teamId={team.id} prevLink={team.link ?? ""} />
+                </div>
+            ) : !team ? (
+                <div>
+                    <div className="flex h-[30rem] items-center justify-center">
+                        <Spinner size="lg" />
+                    </div>
+                </div>
+            ) : (
+                <div className="flex h-[30rem] items-center justify-center">
+                    <Title title="No data found" />
+                </div>
+
+            )}
+        </div>
+    )
+}
+
+const Schedules = ({ team }: { team: TeamType }) => {
+    const rounds = team?.rounds;
+    return (
+        <div>
+            <h1 className="mb-5 text-center text-4xl ">Rounds</h1>
+            {rounds?.map((round, key) => (
+                <Table
+                    key={key}
+                    data={transformChallengeData(round.challenges)}
+                    title={`Round ${round.number}`}
+                />
+            ))}
+
+            <h1 className="mb-5 text-center text-4xl mt-16">Interviews</h1>
+
+            <Table data={team?.members ? transformInterviewData(team.members) : []} title={""} />
+        </div>
+    )
+}
+
+
+
+export default TeamInfo;

src/app/account/page.tsx

@@ -17,6 +17,7 @@ export default async function AccountPage() {
   }
 
   const teamData = await api.team.getTeam();
+
   return (
     <div className="mt-[4rem] h-max bg-black p-10 font-mono text-white">
       <h1 className="font-anton text-[3vw]">Account</h1>