Ms3 shavonne/profile management (#60)

* Add profile page with main components

* Update Skills Component

* Update attempted questions table

* Update columns of question table

* Update side contents to include topic preferences

* Add EditProfile modal

* Update edit profile modal to include profile image icon and add minor layout edits

* Add overall padding to profile page

---------

Co-authored-by: shavonneg <>
Co-authored-by: Jajabonks <[email protected]>

Author: shavonneg

frontend/src/app/profile/_components/EditProfile.tsx

@@ -0,0 +1,144 @@
+"use client";
+
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+
+import React, { useCallback } from "react";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+
+import { Form, FormLabel } from "@/components/ui/form";
+import { Button } from "@/components/ui/button";
+import { TextInput } from "@/components/form/TextInput";
+import { RadioGroupInput } from "@/components/form/RadioGroupInput";
+import { useToast } from "@/hooks/use-toast";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { CodeXml } from "lucide-react";
+
+interface EditProfileModalProps {
+  isOpen: boolean;
+  setIsOpen: (open: boolean) => void;
+  userProfile: {
+    displayName: string;
+    username: string;
+    email: string;
+    proficiency: string;
+  };
+}
+
+const FormSchema = z.object({
+  displayName: z.string().min(1, "Display Name is required"),
+  username: z.string().min(1, "Username is required"),
+  email: z.string().email("Invalid email format"),
+  proficiency: z.enum(["Beginner", "Intermediate", "Expert"]),
+});
+
+export function EditProfile({
+  isOpen,
+  setIsOpen,
+  userProfile,
+}: EditProfileModalProps) {
+  const { toast } = useToast();
+
+  const form = useForm<z.infer<typeof FormSchema>>({
+    resolver: zodResolver(FormSchema),
+    defaultValues: {
+      displayName: userProfile.displayName,
+      username: userProfile.username,
+      email: userProfile.email,
+    },
+  });
+
+  const onSubmit = useCallback(
+    async (data: z.infer<typeof FormSchema>) => {
+      console.log("Form data:", data);
+      toast({
+        title: "Profile updated!",
+        description: "Your profile has been updated successfully.",
+      });
+      setIsOpen(false);
+    },
+    [toast, setIsOpen]
+  );
+
+  return (
+    <Dialog open={isOpen} onOpenChange={setIsOpen}>
+      <DialogContent className="max-w-md">
+        <DialogHeader>
+          <DialogTitle className="text-primary">Edit Profile</DialogTitle>
+          <Form {...form}>
+            <form
+              onSubmit={form.handleSubmit(onSubmit)}
+              className="flex flex-col space-y-4"
+            >
+            {/* Profile Image Upload */}
+            <FormLabel className="pt-8">Profile Image</FormLabel>
+            <div className="flex flex-row justify-center items-center p-2">
+                <input
+                    type="file"
+                    className="hidden"
+                    id="profile-upload"
+                    accept="image/*"
+                />
+                
+                <Avatar>
+                    <AvatarImage/>
+                    <AvatarFallback className="text-base font-normal text-foreground">
+                        <CodeXml/>
+                    </AvatarFallback>
+                </Avatar>
+
+                <div className="pl-6">
+                    <label
+                        htmlFor="profile-upload"
+                        className="bg-background-200 text-sm rounded-lg font-bold p-2 cursor-pointer"
+                    >
+                        Upload Image
+                    </label>
+                    <DialogDescription className="pt-2">.png, .jpeg files up to 2MB. Recommended size is 256x256px.</DialogDescription>
+                </div>
+            </div>
+
+            {/* Display Name */}
+            <TextInput label="Display Name" name="displayName" placeholder="Display Name" />
+
+            {/* Username */}
+            <TextInput label="Username" name="username" placeholder="Username" />
+            {form.formState.errors.username && (
+            <p className="text-destructive text-sm">
+                {form.formState.errors.username.message || "Username already taken"}
+            </p>
+            )}
+
+            {/* Email */}
+            <TextInput label="Email" name="email" placeholder="Email" />
+
+            {/* Proficiency Radio Buttons */}
+            <RadioGroupInput
+            label="Proficiency"
+            name="proficiency"
+            options={[
+                { value: "Beginner", optionLabel: "Beginner" },
+                { value: "Intermediate", optionLabel: "Intermediate" },
+                { value: "Expert", optionLabel: "Expert" },
+            ]}
+            />
+
+            <Button className="p-5" type="submit">
+            {form.formState.isSubmitting
+                ? "Updating Profile"
+                : "Save"}
+            </Button>
+            </form>
+          </Form>
+        </DialogHeader>
+      </DialogContent>
+    </Dialog>
+  );
+}

frontend/src/app/profile/_components/GitGraph.tsx

@@ -0,0 +1,59 @@
+import { Card } from "@/components/ui/card";
+import CollaborationHeatmap from "./HeatMap";
+
+export default function GitGraph() {
+    const monthsData = [
+        [1, 0, 0, 0, 1, 1, 0, 1, 0, 0], // January
+        [0, 1, 1, 0, 0, 1, 0, 1, 0, 0], // February
+        [1, 0, 0, 1, 0, 1, 1, 1, 0, 0], // March
+        [1, 0, 0, 0, 1, 1, 0, 1, 0, 0], // April
+        [0, 1, 1, 0, 0, 1, 0, 1, 0, 0], // May
+        [1, 0, 0, 1, 0, 1, 1, 1, 0, 0], // June
+        [1, 0, 0, 0, 1, 1, 0, 1, 0, 0], // July
+        [0, 1, 1, 0, 0, 1, 0, 1, 0, 0], // August
+        [1, 0, 0, 1, 0, 1, 1, 1, 0, 0], // Sept
+        [1, 0, 0, 0, 1, 1, 0, 1, 0, 0], // Oct
+        [0, 1, 1, 0, 0, 1, 0, 1, 0, 0], // Nov
+        [1, 0, 0, 1, 0, 1, 1, 1, 0, 0], // Dec
+      ];
+
+    return (
+        <Card className="flex flex-col rounded-md p-6 gap-4">
+            <StatsHeader />
+            <div className="flex flex-row"> 
+                <StatsDetails/>
+                <CollaborationHeatmap
+                    monthsData={monthsData}
+                    year={2024}
+                />
+            </div>
+        </Card>
+    )
+}
+
+function StatsHeader() {
+    return (
+        <div className="flex flex-row gap-2">
+            <big className="font-bold">15</big>
+            <big className="text-card-foreground-100"> collaborations done in the past one year</big>
+        </div>
+    )
+}
+function StatsDetails() {
+    return (
+        <div className="flex flex-col gap-2 pt-2 pl-2 pr-4">
+            <div className="flex flex-col p-1">
+                <small className="font-bold"> Total Active: </small>
+                <small className="text-card-foreground-100"> 15 Days </small>
+            </div>
+            <div className="flex flex-col p-1">
+                <small className="font-bold"> Max Streaks: </small>
+                <small className="text-card-foreground-100"> 3 Days </small>
+            </div>
+        </div>
+    )
+}
+
+function MonthlyCommits({ month } : { month: string }) {
+
+}

frontend/src/app/profile/_components/HeatMap.tsx

@@ -0,0 +1,50 @@
+interface CollaborationHeatmapProps {
+  monthsData: Array<Array<number>>;
+  year: number;
+}
+
+export default function CollaborationHeatmap({
+  monthsData,
+  year,
+}: CollaborationHeatmapProps) {
+  return (
+    <section className="flex flex-row gap-8 rounded-lg max-w-4xl">
+      <div className="grid grid-cols-12 gap-2 mt-4">
+        {monthsData.map((month, monthIndex) => (
+          <div key={monthIndex} className="flex flex-col items-center">
+            <div className="grid grid-cols-3 gap-1">
+              {month.map((active, dayIndex) => (
+                <div
+                  key={dayIndex}
+                  className={`w-4 h-4 ${active ? "bg-primary" : "bg-background-100"}`}
+                />
+              ))}
+            </div>
+            <p className="text-sm text-card-foreground-100 pt-4">{getMonthName(monthIndex)}</p>
+          </div>
+        ))}
+      </div>
+
+        <div className="flex flex-col items-center">
+          {[2024, 2023, 2022, 2021].map((yr) => (
+            <button
+              key={yr}
+              className={`w-20 py-1 font-bold my-1 rounded-md ${year === yr ? "bg-primary" : "text-card-foreground-100"}`}
+            >
+              {yr}
+            </button>
+          ))}
+        </div>
+
+    </section>
+  );
+}
+
+// Convert month index to name
+function getMonthName(index: number): string {
+  const months = [
+    "Jan", "Feb", "Mar", "Apr", "May", "Jun", 
+    "Jul", "Aug", "Sept", "Oct", "Nov", "Dec"
+  ];
+  return months[index];
+}

frontend/src/app/profile/_components/MainContent.tsx

@@ -0,0 +1,22 @@
+import GitGraph from "./GitGraph";
+import { QuestionsStatsCard } from "@/app/dashboard/_components/QuestionsStatsCard";
+import { SkillsCard } from "./SkillsCard";
+import QuestionHistory from "./QuestionHistory/QuestionHistory";
+
+export default function MainContent() {
+    return (
+        <div className="flex flex-col gap-4">
+            <GitGraph />
+            <h2 className="font-bold pb-2 pt-2">Collaborations</h2>
+            <div className="flex flex-row gap-4">
+                <QuestionHistory/>
+                <div className="flex flex-col gap-4">
+                    <QuestionsStatsCard />
+                    <SkillsCard />
+                </div>
+            </div>
+
+
+        </div>
+    )
+}

frontend/src/app/profile/_components/QuestionHistory/QuestionColumns/CollaboratorsColumn.tsx

@@ -0,0 +1,30 @@
+import { Question } from "@/types/Question";
+import { ColumnDef } from "@tanstack/react-table";
+import UserAvatar from "@/components/UserAvatar";
+
+const mockCollaborators = [
+  { id: 1, name: "Jm San Diego" },
+  { id: 2, name: "Charlie Brown"},
+];
+
+const StatusColumn: ColumnDef<Question> = {
+  accessorKey: "_id",
+  header: () => <div className="px-4">Collaborators</div>,
+  cell: () => {
+    return (
+      <div className="flex items-center space-x-0">
+        {mockCollaborators.map((collaborator) => (
+          <UserAvatar
+            key={collaborator.id}
+            src={"https://non-existent.com"}
+            name={collaborator.name}
+            isHoverEnabled={true}
+            className="w-8 h-8" 
+          />
+        ))}
+      </div>
+    );
+  },
+};
+
+export default StatusColumn;

frontend/src/app/profile/_components/QuestionHistory/QuestionColumns/DifficultyColumn.tsx

@@ -0,0 +1,48 @@
+import { Question, QuestionSchema } from "@/types/Question";
+import { ColumnDef } from "@tanstack/react-table";
+import { DataTableColumnHeader } from "../data-table-column-header";
+import { cn } from "@/lib/utils";
+
+const DifficultyColumn: ColumnDef<Question> = {
+  accessorKey: "difficulty",
+  header: ({ column }) => {
+    return (
+      <DataTableColumnHeader
+        column={column}
+        title="Difficulty"
+        className="w-1/4"
+      />
+    );
+  },
+  cell: ({ row }) => {
+    const question = QuestionSchema.parse(row.original);
+
+    return (
+      <span
+        className={cn(
+          question.difficulty == "Easy" && "text-difficulty-easy",
+          question.difficulty == "Medium" && "text-difficulty-medium",
+          question.difficulty == "Hard" && "text-difficulty-hard"
+        )}
+      >
+        {question.difficulty}
+      </span>
+    );
+  },
+  sortingFn: (rowA, rowB) => {
+    const difficultyMap = {
+      Easy: 0,
+      Medium: 1,
+      Hard: 2,
+    };
+    return (
+      difficultyMap[rowA.original.difficulty] -
+      difficultyMap[rowB.original.difficulty]
+    );
+  },
+  filterFn: (row, key, value) => {
+    return value.includes(row.getValue(key));
+  },
+};
+
+export default DifficultyColumn;