added section for Cohort 3

apps/web/components/ModeToggle.tsx

@@ -3,7 +3,6 @@ import { MoonIcon, SunIcon } from "@radix-ui/react-icons";
 import { useTheme } from "next-themes";
 import { Button } from "@repo/ui";
 
-
 export function ModeToggle() {
   const { theme,setTheme } = useTheme();
 

apps/web/components/Tracks.tsx

@@ -5,7 +5,7 @@ import { category } from "@repo/store";
 import { Track, Problem } from "@prisma/client";
 import { useRecoilValue } from "recoil";
 import { useEffect, useState } from "react";
-import { Select, SelectTrigger, SelectValue, SelectContent, SelectGroup, SelectItem } from "@repo/ui";
+import { Select, SelectTrigger, SelectValue, SelectContent, SelectGroup, SelectItem, Switch, Label } from "@repo/ui";
 
 interface TrackPros extends Track {
   problems: Problem[];
@@ -21,9 +21,13 @@ export const Tracks = ({ tracks }: { tracks: TrackPros[] }) => {
   const selectedCategory = useRecoilValue(category);
   const [filteredTracks, setFilteredTracks] = useState<TrackPros[]>(tracks);
   const [sortBy, setSortBy] = useState<string>("");
-
+  const [cohort3, setCohort3] = useState<boolean>(false);
+
   const filterTracks = () => {
     let filteredTracks = tracks;
+    if (cohort3) {
+      filteredTracks = filteredTracks.filter((t) => t.cohort === 3);
+    }
     if (selectedCategory.length > 0) {
       filteredTracks = filteredTracks.filter((t) => t.categories.some((c) => c.category.category === selectedCategory));
     }
@@ -44,39 +48,46 @@ export const Tracks = ({ tracks }: { tracks: TrackPros[] }) => {
   };
   useEffect(() => {
     filterTracks();
-  }, [selectedCategory]);
+  }, [selectedCategory,cohort3]);
   useEffect(() => {
     sortTracks(sortBy);
   }, [sortBy]);
   return (
     <div>
-      <Select
-        onValueChange={(e) => {
-          setSortBy(e);
-        }}
-      >
-        <SelectTrigger className="w-[250px] mx-auto mt-6">
-          <SelectValue placeholder="Sort by" />
-        </SelectTrigger>
-        <SelectContent
-        ref={(ref)=>{
-          if(!ref) return;
-          ref.ontouchstart = (e)=>{
-            e.preventDefault();
-          }
-        }}>
-          <SelectGroup>
-            <SelectItem value="ascending">Ascending (A to Z)</SelectItem>
-            <SelectItem value="descending">Descending (Z to A)</SelectItem>
-            <SelectItem value="new">Newest first</SelectItem>
-            <SelectItem value="old">Oldest first</SelectItem>
-          </SelectGroup>
-        </SelectContent>
-      </Select>
+      <div className="flex flex-col gap-4 md:flex-row items-center justify-evenly mt-6">
+        <Select
+          onValueChange={(e) => {
+            setSortBy(e);
+          }}
+        >
+          <SelectTrigger className="max-w-[250px]">
+            <SelectValue placeholder="Sort by" />
+          </SelectTrigger>
+          <SelectContent
+            ref={(ref) => {
+              if (!ref) return;
+              ref.ontouchstart = (e) => {
+                e.preventDefault();
+              };
+            }}
+          >
+            <SelectGroup>
+              <SelectItem value="ascending">Ascending (A to Z)</SelectItem>
+              <SelectItem value="descending">Descending (Z to A)</SelectItem>
+              <SelectItem value="new">Newest first</SelectItem>
+              <SelectItem value="old">Oldest first</SelectItem>
+            </SelectGroup>
+          </SelectContent>
+        </Select>
+        <div className="flex items-center space-x-2">
+          <Switch id="cohort 3" checked={cohort3} onCheckedChange={(e)=>setCohort3(e.valueOf())} />
+          <Label htmlFor="cohort-3">Cohort 3 Only</Label>
+        </div>
+      </div>
       <ul className="p-8 md:20 grid grid-cols-1 gap-x-6 gap-y-8 place-items-center lg:grid-cols-2 w-full">
         {filteredTracks.map((t) => (
           <li key={t.id} className="max-w-screen-md w-full">
-                <TrackCard track={t} />
+            <TrackCard track={t} />
           </li>
         ))}
       </ul>

apps/web/components/admin/CompleteAddTracks.tsx

@@ -3,13 +3,15 @@ import { useEffect, useState } from "react";
 import { Input, Button } from "@repo/ui";
 import { Categories } from "@prisma/client";
 import CompleteTrackCard from "./CompleteTrackCard";
+import EditCategories from "./EditCategories";
 
 export interface CompleteTrack {
   trackId: string;
   trackTitle: string;
   trackDescription: string;
   trackImage: string;
   selectedCategory: string[];
+  cohort: string;
 }
 
 const CompleteAddTracks = ({ categories }: { categories: Categories[] }) => {
@@ -18,6 +20,7 @@ const CompleteAddTracks = ({ categories }: { categories: Categories[] }) => {
   const [trackTitle, setTrackTitle] = useState("");
   const [trackDescription, setTrackDescription] = useState("");
   const [trackImage, setTrackImage] = useState("");
+  const [cohort, setCohort] = useState<string>("3");
   const [selectedCategory, setSelectedCategory] = useState<string[]>([]);
   const [trackData, setTrackData] = useState<CompleteTrack>({} as CompleteTrack);
 
@@ -30,7 +33,7 @@ const CompleteAddTracks = ({ categories }: { categories: Categories[] }) => {
   }
 
   useEffect(() => {
-    setTrackData({ trackId, trackDescription, trackTitle, trackImage, selectedCategory });
+    setTrackData({ trackId, trackDescription, trackTitle, trackImage, selectedCategory, cohort });
   }, [trackId, trackDescription, trackTitle, trackImage,selectedCategory]);
   return (
     <div className="flex flex-col justify-center">
@@ -60,6 +63,10 @@ const CompleteAddTracks = ({ categories }: { categories: Categories[] }) => {
           <div className="mr-3">{"NotionId: "}</div>
           <Input className="w-1/3 mr-3" onChange={(e) => setNotionId(e.target.value)} placeholder="NotionId" />
         </div>
+        <div className="flex justify-center">
+          <div className="mr-3">{"Cohort: "}</div>
+          <Input className="w-1/3 mr-3" type="number" value={cohort} onChange={(e) => setCohort(e.target.value)} placeholder="3" />
+        </div>
         <div className="flex lg:flex-row justify-evenly mx-auto py-1">
           {categories.map((category, i) => (
             <Button
@@ -71,6 +78,7 @@ const CompleteAddTracks = ({ categories }: { categories: Categories[] }) => {
               {category.category}
             </Button>
           ))}
+        <EditCategories categories={categories} />
         </div>
         <div className="flex justify-center">
           <CompleteTrackCard notionId={notionId} TrackData={trackData} />

apps/web/components/admin/CompleteTrackCard.tsx

@@ -11,6 +11,7 @@ interface CompleteTrackCardProps {
   trackDescription: string;
   trackImage: string;
   selectedCategory: string[];
+  cohort: string;
 }
 
 export interface Problem {
@@ -32,6 +33,7 @@ const CompleteTrackCard = ({ notionId, TrackData }: { notionId: string; TrackDat
       hidden: false,
       problems: problems,
       selectedCategory: TrackData.selectedCategory,
+      cohort: parseInt(TrackData.cohort),
     });
     await insertData(TrackData.trackId);
     setIsSubmitting(true);

apps/web/components/admin/EditCategories.tsx

@@ -0,0 +1,94 @@
+"use client";
+import { Button, toast } from "@repo/ui";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@repo/ui";
+import { Input } from "@repo/ui";
+import { Label } from "@repo/ui";
+import { Trash2 } from "lucide-react";
+import { useState } from "react";
+import { addCategory, deleteCategory } from "../utils";
+import { useRouter } from "next/navigation";
+
+const EditCategories = ({
+  categories,
+}: {
+  categories: {
+    id: string;
+    category: string;
+  }[];
+}) => {
+  const router = useRouter();
+  const [newCategory, setNewCategory] = useState<string>("");
+  async function handleAddCategory() {
+    if (!newCategory) {
+      toast({
+        title: "Category cannot be empty",
+        description: "Please enter a category",
+      });
+      return;
+    }
+    toast({
+      title: "Adding category",
+    });
+    try {
+      await addCategory(newCategory);
+      router.refresh();
+      toast({
+        title: "Category added",
+        description: `Category ${newCategory} added`,
+      });
+    } catch (error) {
+      toast({
+        title: "Error adding category",
+      });
+    }
+  }
+  async function handleDeleteCategory(categoryId: string) {
+    toast({
+      title: "Deleting category",
+    });
+    try {
+      await deleteCategory(categoryId);
+      router.refresh();
+      toast({
+        title: "Category deleted",
+      });
+    } catch (error) {
+      toast({
+        title: "Error deleting category",
+      });
+    }
+  }
+  return (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button variant="outline">Edit categories</Button>
+      </DialogTrigger>
+      <DialogContent className="sm:max-w-[425px]">
+        <div className="grid gap-4 py-4">
+          {categories.map((category) => (
+            <div key={category.id} className="flex justify-between">
+              <Label>{category.category}</Label>
+              <Button onClick={() =>handleDeleteCategory(category.id)} variant={"outline"} size={"sm"}>
+                <Trash2 size={16} />
+              </Button>
+            </div>
+          ))}
+        </div>
+        <Input value={newCategory} onChange={(e) => setNewCategory(e.target.value)} placeholder="Add new category" />
+        <DialogFooter>
+          <Button onClick={handleAddCategory}>Add</Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default EditCategories;