opportunity page

app/opportunities/[opportunity_id]/dashboard/_components/leaderboard.tsx

@@ -32,11 +32,11 @@ export function Leaderboard({
   const topThree = sortedReviewers.slice(0, 3);
 
   return (
-    <div className="flex items-end justify-center space-x-4">
+    <div className="flex max-w-full items-end justify-center space-x-4">
       {topThree.map((reviewer, index) => (
         <div key={reviewer.user} className="flex flex-col items-center">
           <div
-            className={`w-20 h-${["28", "24", "20"][index]} flex flex-col items-center justify-end rounded-t-lg bg-primary p-2`}
+            className={`w-20 h-${["28", "24", "20"][index]} flex flex-col items-center justify-end rounded-t-lg bg-primary pt-2`}
           >
             {index === 0 && <Trophy className="mb-2 h-8 w-8 text-yellow-300" />}
             {index === 1 && <Medal className="mb-2 h-8 w-8 text-gray-300" />}

app/opportunities/[opportunity_id]/dashboard/page.tsx

@@ -89,8 +89,8 @@ export default async function OpportunitiesDashboardPage({ params }: Props) {
     <div className="flex flex-col gap-8 py-8">
       <PageHeading title="Dashboard" breadcrumbs={breadcrumbs} />
 
-      <div className="grid auto-rows-fr gap-4 lg:grid-cols-6">
-        <div className="col-span-2 row-span-2 grid grid-cols-subgrid grid-rows-subgrid">
+      <div className="grid auto-rows-fr gap-4 md:grid-cols-4 lg:grid-cols-6">
+        <div className="col-span-2 row-span-3 grid grid-cols-subgrid grid-rows-subgrid sm:row-span-2">
           <Card className="col-span-2">
             <CardHeader className="pb-3">
               <CardTitle>Your Dashboard</CardTitle>
@@ -106,7 +106,7 @@ export default async function OpportunitiesDashboardPage({ params }: Props) {
             </CardFooter>
           </Card>
 
-          <Card className="flex justify-between">
+          <Card className="col-span-2 flex justify-between sm:col-span-1">
             <CardHeader className="pb-2">
               <CardDescription>Applications</CardDescription>
               <CardTitle className="text-4xl">
@@ -118,7 +118,7 @@ export default async function OpportunitiesDashboardPage({ params }: Props) {
             </div>
           </Card>
 
-          <Card className="flex justify-between">
+          <Card className="col-span-2 flex justify-between sm:col-span-1">
             <CardHeader className="pb-2">
               <CardDescription>Reviews</CardDescription>
               <CardTitle className="text-4xl">{reviews.length ?? 0}</CardTitle>
@@ -143,7 +143,7 @@ export default async function OpportunitiesDashboardPage({ params }: Props) {
 
         <ReviewsChart reviews={reviews} className="col-span-2 row-span-2" />
 
-        <Card className="col-span-2 row-span-2 flex flex-col">
+        <Card className="col-span-2 row-span-2 hidden flex-col sm:flex">
           <CardHeader>
             <CardTitle>Top reviewer</CardTitle>
             <CardDescription>

app/opportunities/[opportunity_id]/page.tsx

@@ -0,0 +1,58 @@
+import { Card, CardContent, CardHeader, CardTitle } from "@components/ui/card";
+import { mapPathnameToBreadcrumbs } from "@components/ui/page-breadcrumbs";
+import { PageHeading } from "@components/ui/page-heading";
+import { cn } from "@lib/utils";
+import { headers } from "next/headers";
+import { redirect } from "next/navigation";
+import { getServerAuthSession } from "server/auth";
+import db from "server/db";
+
+interface Props {
+  params: {
+    opportunity_id: string;
+  };
+}
+
+export default async function OpportunityPage({ params }: Props) {
+  const session = await getServerAuthSession();
+  if (!session?.user.id) redirect("/auth");
+
+  const opportunityId = Number(params.opportunity_id);
+  const opportunity = await db.opportunity.findUnique({
+    where: { id: opportunityId },
+  });
+
+  if (!opportunity) redirect("/404");
+
+  const headerList = headers();
+  const breadcrumbs = await mapPathnameToBreadcrumbs(headerList);
+
+  return (
+    <div className="space-y-8 py-8">
+      <PageHeading
+        title={opportunity.title}
+        description={opportunity.description ?? undefined}
+        breadcrumbs={breadcrumbs}
+      />
+
+      <div className="grid grid-cols-3 gap-4">
+        {[
+          { href: "applications", label: "Applications" },
+          { href: "applications", label: "Review" },
+          { href: "applications", label: "Dashboard" },
+        ].map((item) => (
+          <Card
+            className={cn(
+              "flex h-full w-full flex-col justify-between overflow-hidden",
+            )}
+          >
+            <CardHeader className="p-4">
+              <CardTitle className="truncate text-lg">{item.label}</CardTitle>
+            </CardHeader>
+            <CardContent></CardContent>
+          </Card>
+        ))}
+      </div>
+    </div>
+  );
+}

app/opportunities/[opportunity_id]/review/[review_id]/reviewForm.tsx

@@ -12,7 +12,7 @@ import { toast } from "sonner";
 import { type Application, type Review } from "@prisma/client";
 import { type Tally } from "@lib/types/tally";
 import { useRouter } from "next/navigation";
-import { DeleteAlertDialog } from "../components/review-altert-dialog";
+import { DeleteAlertDialog } from "../_components/review-altert-dialog";
 import { QuestionField } from "./_components/questionField";
 import {
   ResizableHandle,

app/opportunities/[opportunity_id]/review/columns.tsx

@@ -12,7 +12,7 @@ import {
 import { Button } from "@components/ui/button";
 import Link from "next/link";
 import { CheckCircle, Clock, Edit, PlusCircle, Trash } from "lucide-react";
-import { DeleteAlertDialog } from "./components/review-altert-dialog";
+import { DeleteAlertDialog } from "./_components/review-altert-dialog";
 import { Badge } from "@components/ui/badge";
 
 export type Review = PrismaReview & {

components/ui/page-breadcrumbs.tsx

@@ -55,10 +55,7 @@ export async function mapPathnameToBreadcrumbs(
         return { label, href };
       }),
     )
-  ).map((e) => {
-    console.log(e);
-    return e;
-  }) as PageBreadcrumb[];
+  ).map((e) => e) as PageBreadcrumb[];
 }
 
 type PageBreadcrumb = { href: string; label: string };