Mentorship System

.gitignore

@@ -39,3 +39,7 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+# for dev only - Ryan
+/app/api/create-mentors/**
+*adminsdk*.*

app/mentorship/[mentorId]/page.tsx

@@ -0,0 +1,89 @@
+"use client"
+
+import MentorshipAppointmentCardComponent from "@/components/MentorshipAppointmentCardComponent"
+import { fetchMentorshipAppointmentsByMentorId, fetchMentorById, getMentorProfilePicture } from "@/lib/firebaseUtils"
+import { FirestoreMentor, MentorshipAppointment } from "@/lib/types"
+import { Plus } from "lucide-react"
+import Image from "next/image"
+import { useParams, useRouter } from "next/navigation"
+import { useEffect, useState } from "react"
+import ghq from "@/public/assets/ghq.png"
+
+export default function MentorDetailPage() {
+  const params = useParams<{ mentorId: string }>()
+  const router = useRouter()
+  const [mentor, setMentor] = useState<FirestoreMentor>()
+  const [mentorshipAppointments, setMentorshipAppointments] = useState<MentorshipAppointment[]>()
+  const [mentorUrl, setMentorUrl] = useState<string>('')
+
+  useEffect(() => {
+    fetchMentorById(params.mentorId).then((m) => {
+      if (m) {
+        setMentor(m)
+
+        getMentorProfilePicture(m.name).then((pp) => {
+          if (pp) {
+            setMentorUrl(pp)
+          }
+        })
+      }
+    })
+
+    fetchMentorshipAppointmentsByMentorId(params.mentorId).then((m) => {
+      if (m) {
+        setMentorshipAppointments(m)
+      }
+    })
+
+
+  }, [params.mentorId])
+
+  const handleOnClickAddAppointment = (mentorId: string) => {
+    router.push(`/mentorship/add?mentorId=${mentorId}`)
+  }
+
+  return (
+    <div className="flex flex-col gap-4">
+      <div className="flex flex-col gap-4">
+        <h1 className="text-xl font-bold">Mentor Details</h1>
+        <div className="flex flex-col gap-2 border p-4 rounded-xl">
+          <Image
+            src={mentorUrl || "https://garudahacks.com/images/logo/ghq.png"}
+            alt={`Profile picture of ${mentor?.name || 'mentor'}`}
+            width={200}
+            height={200}
+            onError={() => {
+              setMentorUrl(ghq.src)
+            }}
+            className="rounded-full w-64 aspect-square"
+          />
+          {mentor?.name && <h2 className="text-2xl font-bold">{mentor?.name}</h2>}
+          {mentor?.email && <h3 className="text-muted-foreground">{mentor?.email}</h3>}
+          {mentor?.discordUsername && <p className="">Discord: <span className="text-muted-foreground font-mono w-fit p-1 rounded-full text-sm">{mentor?.discordUsername}</span></p>}
+          {mentor?.specialization && <p className="">Specialization: {mentor?.specialization.toUpperCase()}</p>}
+          <div>
+            <p className="font-semibold text-muted-foreground">Intro</p>
+            <p className="text-sm">{mentor?.intro}</p>
+          </div>
+        </div>
+      </div>
+
+      <div className="flex flex-col gap-4">
+        <div className="flex justify-between items-center">
+          <h2 className="font-bold">Mentoring Schedule ({mentorshipAppointments?.length})</h2>
+          <button className="flex items-center gap-1 text-sm border rounded-full px-3 py-1 hover:bg-primary/90"
+            onClick={() => handleOnClickAddAppointment(params.mentorId)}
+          >Add Schedule
+            <Plus />
+          </button>
+        </div>
+
+        <div className="flex flex-col gap-4">
+          {mentorshipAppointments?.map((mentorshipAppointment) => (
+            <MentorshipAppointmentCardComponent key={mentorshipAppointment.id} mentorshipAppointment={mentorshipAppointment} />
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}

app/mentorship/add/page.tsx

@@ -0,0 +1,135 @@
+"use client"
+
+import { ONE_SLOT_INTERVAL_MINUTES } from "@/config"
+import { addMentorshipAppointment, fetchMentorById } from "@/lib/firebaseUtils"
+import { dateToStringTime, epochToStringDate } from "@/lib/helpers"
+import { FirestoreMentor, MentorshipAppointment } from "@/lib/types"
+import { Loader2 } from "lucide-react"
+import { useRouter, useSearchParams } from "next/navigation"
+import { useEffect, useState } from "react"
+import DatePicker from "react-datepicker"
+import "react-datepicker/dist/react-datepicker.css";
+
+export default function AddMentorshipAppointmentPage() {
+  const router = useRouter()
+  const TIME_INTERVAL = 15
+  const params = useSearchParams()
+  const mentorId = params.get('mentorId')
+
+  const [mentor, setMentor] = useState<FirestoreMentor | null>()
+  const [mentorName, setMentorName] = useState<string | undefined>('')
+  const [startDate, setStartDate] = useState<Date | null>(new Date());
+  const [nTime, setNTime] = useState<number>(1)
+  const [appointmentType, setAppointmentType] = useState<string>('online');
+  const [error, setError] = useState('')
+
+  const [loading, setLoading] = useState(false)
+
+  const handleTypeChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setAppointmentType(event.target.value);
+  };
+
+  const handleSubmit = async () => {
+    setLoading(true)
+
+    try {
+      if (nTime <= 0) {
+        setError('Must create minimum 1 slot')
+        return
+      } else {
+        setError('')
+      }
+
+      if (!startDate) {
+        setError('Start date cannot be empty')
+        return
+      }
+
+      if (!mentorId) {
+        setError('Mentor Id cannot be empty')
+        return
+      }
+
+      if (!location) {
+        setError('Location cannot be empty')
+        return
+      }
+      for (let index = 0; index < nTime; index++) {
+        const INTERVALS_SECONDS = ONE_SLOT_INTERVAL_MINUTES * 60 * index;
+        addMentorshipAppointment((startDate.getTime() / 1000) + INTERVALS_SECONDS, mentorId, appointmentType).then((res) => {
+          router.replace(`/mentorship/${mentorId}`)
+        })
+      }
+    } catch (error) {
+      console.log(error)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  useEffect(() => {
+    if (mentorId) {
+      fetchMentorById(mentorId).then((result) => {
+        setMentor(result)
+        setMentorName(result?.name)
+      })
+    }
+  }, [mentorId])
+
+
+  return (
+    <div className="flex flex-col gap-4">
+      <div>
+        <h1 className="text-xl">Add Mentorship Appointment Slot</h1>
+        <p className="text-muted-foreground">Add mentorship slots that can be booked immediately by hackers.</p>
+      </div>
+
+      <div className="flex flex-col gap-4 max-w-xl">
+        <div className="flex flex-col gap-2">
+          <span className="font-semibold text-sm">Mentor Name</span>
+          <input value={mentorName} onChange={e => setMentorName(e.target.value)} disabled type="text" className="p-2 rounded-xl bg-zinc-50/20" />
+        </div>
+
+        <div className="flex flex-col gap-2">
+          <span className="font-semibold text-sm">Start Time</span>
+          <div className="flex flex-row items-center gap-4">
+            <DatePicker
+              selected={startDate}
+              onChange={(date: Date | null) => date && setStartDate(date)}
+              showTimeSelect
+              timeIntervals={15}
+              className="bg-zinc-50/20 p-2 rounded-lg"
+            />
+            <span>{dateToStringTime(startDate || new Date())}</span>
+          </div>
+        </div>
+
+        <div className="flex flex-col gap-2">
+          <span className="font-semibold text-sm">Create For N Times</span>
+          <input value={nTime} onChange={e => setNTime(Number(e.target.value))} type="number" className="p-2 rounded-xl bg-zinc-50/20" />
+          {startDate && <p className="text-muted-foreground text-sm">This will create {nTime} slot(s) with interval {TIME_INTERVAL} minutes starting from {epochToStringDate(startDate.getTime() / 1000)}</p>}
+
+        </div>
+
+        <div>
+          <div className="flex flex-row gap-1">
+            <input type="radio" name="appointmentType" value={"online"} id="online" checked={appointmentType === 'online'} onChange={handleTypeChange} />
+            <label htmlFor="online">Online</label>
+          </div>
+          <div className="flex flex-row gap-1">
+            <input type="radio" name="appointmentType" value={"offline"} id="offline" checked={appointmentType === 'offline'} onChange={handleTypeChange} />
+            <label htmlFor="offline">Offline</label>
+          </div>
+        </div>
+
+        <div className="flex flex-col gap-2 text-center">
+          {error && <span className="text-red-500 text-sm">{error}</span>}
+          <button onClick={handleSubmit} className="border p-2 rounded-xl text-sm flex flex-row items-center justify-center gap-1" type="button">
+            {loading && <Loader2 className="" />}
+            Add Slot
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}

app/mentorship/layout.tsx

@@ -0,0 +1,23 @@
+"use client"
+
+import { ChevronLeft } from "lucide-react";
+import { useRouter } from "next/navigation";
+import { ReactNode } from "react";
+
+export default function MentorDetailLayout(
+  { children }: { children: ReactNode }
+) {
+  const router = useRouter()
+
+  return (
+    <div className="flex flex-col gap-4">
+      <div>
+        <button className="flex flex-row items-center justify-center gap-1 border p-2 rounded-lg text-md" onClick={() => router.back()}>
+          <ChevronLeft />
+          <span>Back</span>
+        </button>
+      </div>
+      {children}
+    </div>
+  )
+}

app/mentorship/page.tsx

@@ -1,5 +1,8 @@
+"use client";
+
+import MentorListComponent from "@/components/MentorList";
 import PageHeader from "@/components/PageHeader";
-import UnderConstruction from "@/components/UnderConstruction";
+import { useAuth } from "@/contexts/AuthContext";
 
 export default function Mentorship() {
   return (
@@ -8,10 +11,9 @@ export default function Mentorship() {
         title="Mentorship"
         subtitle="Connect mentors with participants and manage mentorship programs."
       />
-      <UnderConstruction
-        feature="Mentorship System"
-        description="This section will allow you to manage mentor assignments, track mentorship sessions, and facilitate connections between mentors and participants during Garuda Hacks 6.0."
-      />
+      <div>
+        <MentorListComponent />
+      </div>
     </div>
   );
 }

components/DrawMentorshipSlot.tsx

@@ -0,0 +1,50 @@
+import { EPOCH_START_MENTORING, PIXELS_PER_MINUTE } from "@/config";
+import { epochToStringDate } from "@/lib/helpers";
+import { ChevronDown, ChevronUp } from "lucide-react";
+import { ReactNode, useState } from "react";
+
+interface DrawMentorshipSlotProps {
+  index: number
+  startTime: number
+  endTime: number
+  children?: ReactNode
+  asBooking?: boolean
+}
+
+export default function DrawMentorshipSlot(
+  { startTime, endTime, index, children, asBooking }: DrawMentorshipSlotProps
+) {
+  const startOffset = (startTime - EPOCH_START_MENTORING) / 60; // minutes from start
+  const duration = (endTime - startTime) / 60; // duration in minutes
+  const topPosition = startOffset * PIXELS_PER_MINUTE;
+  const height = duration * PIXELS_PER_MINUTE;
+
+  const [openDetail, setOpenDetail] = useState(false)
+
+  return (
+    <div
+      key={index}
+      className={`absolute flex flex-col text-sm items-center gap-2 px-2 py-1 border opacity-90 rounded-lg cursor-pointer transition-colors z-10 ${asBooking ? 'bg-primary' : 'bg-zinc-700 border-dashed rounded-l-none'}`}
+      style={{
+        top: `${topPosition}px`,
+        height: `${height}px`,
+        minHeight: '24px',
+        width: `${asBooking ? '50%' : '20%'}`,
+        right: `${asBooking ? '20%' : '0'}`
+      }}
+      onClick={() => setOpenDetail(!openDetail)}
+    >
+      <div className="flex flex-col gap-2">
+        <div className="flex justify-between gap-2 items-center w-full">
+          <p>{asBooking && <span className="font-bold">Booked{" -- "}</span> }{epochToStringDate(startTime)} - {epochToStringDate(endTime)} WIB</p>
+          <button >
+            {openDetail ? <ChevronUp /> : <ChevronDown />}
+          </button>
+        </div>
+        <div className={`${openDetail ? 'block' : 'hidden'} bg-gray-700 max-w-xl p-4 rounded-xl`}>
+          {children}
+        </div>
+      </div>
+    </div>
+  );
+}

components/MentorItemComponent.tsx

@@ -0,0 +1,18 @@
+import { epochToStringDate } from "@/lib/helpers"
+import { FirestoreMentor } from "@/lib/types"
+import Link from "next/link"
+
+export default function MentorItemComponent({ mentor: m }: { mentor: FirestoreMentor }) {
+  return (
+    <Link href={`/mentorship/${m.id}`} key={m.id} className="border rounded-xl border-gray-400 p-4 flex justify-between">
+      <div className="flex flex-col gap-2">
+        <p className="font-semibold">{m.name}</p>
+        <p className="text-muted-foreground">{m.email}</p>
+        <p className="">{m.specialization.toUpperCase()}</p>
+      </div>
+      <button className="font-semibold text-sm hover:underline">
+        View
+      </button>
+    </Link>
+  )
+}