buggy

package.json

@@ -18,6 +18,7 @@
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/themes": "^3.1.4",
     "graphql": "^16.9.0",
+    "iconoir": "^7.10.0",
     "iconoir-react": "^7.9.0",
     "mongodb": "^6.11.0",
     "react": "^18.3.1",
@@ -30,6 +31,7 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.9.0",
+    "@svgr/webpack": "^8.1.0",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "@vitejs/plugin-react": "^4.3.1",

src/App.tsx

@@ -1,18 +1,22 @@
 import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
 import SetUpPage from "./components/SetUpPage"
 import AddDegree from "./components/AddDegree/AddDegree";
-import SemesterHome from './app/SemesterHome/SemesterHome';
+import SemesterHome from './app/Onboarding/SemesterHome/SemesterHome';
+import Header from "./components/Header/header";
 
 function App() {
   return (
-    <Router>
-      <Routes>
-        <Route path="/" element={<SetUpPage />} />
-        <Route path="/add-major" element={<AddDegree isMajor={true}/>} />
-        <Route path="/add-minor" element={<AddDegree isMajor={false}/>} />
-        <Route path="/semester-home" element={<SemesterHome />} />
-      </Routes>
-    </Router>
+    <>
+      {/* <Header /> */}
+      <Router>
+        <Routes>
+          <Route path="/" element={<SetUpPage />} />
+          <Route path="/add-major" element={<AddDegree isMajor={true}/>} />
+          <Route path="/add-minor" element={<AddDegree isMajor={false}/>} />
+          <Route path="/next" element={<SemesterHome />} />
+        </Routes>
+      </Router>
+    </>
   );
 }
 

src/app/Onboarding/SemesterHome/SemesterHome.css

@@ -0,0 +1,28 @@
+/* .body {
+    display: block !important;
+} */
+.content {
+    display: flex;
+    flex: 1;
+    padding: 16px;
+    overflow: auto;
+    box-sizing: border-box;
+}
+
+.semester-layout {
+    margin-left: 32px;
+    margin-right: 32px;
+}
+
+.semester-title {
+    color: var(--Primary-Text, #000);
+    /* Web UI/Heading/Heading Large */
+    font-family: "Inter Variable";
+    font-size: 28px;
+    font-style: normal;
+    font-weight: 580;
+    line-height: 36px; /* 128.571% */
+    letter-spacing: -0.28px;
+    text-align: left;
+    margin-left: 32px;
+}

src/app/Onboarding/SemesterHome/SemesterHome.tsx

@@ -0,0 +1,74 @@
+import React from 'react';
+import { useLocation } from 'react-router-dom';
+import SemesterBlock from "../../../components/SemesterBlock"
+import { Flex, Button } from '@radix-ui/themes';
+import SidePanel from "../../../components/SidePanel/SidePanel" 
+import "./SemesterHome.css"
+
+type DegreeOption = {
+  label: string;
+  value: string;
+};
+
+function SemesterHome() {
+  const location = useLocation();
+  const state = location.state as {
+    startYear: string;
+    gradYear: string;
+    summerCheck: boolean;
+    selectedDegreeList: DegreeOption[];
+};
+  const { startYear, gradYear, summerCheck, selectedDegreeList } = state;
+  const selectedDegreeStrings: string[] = selectedDegreeList.map((degree) => degree.value);
+
+
+  // Pretend this is the queried data
+  const user = {
+    "name": "Khankamol Chor Kongrukgreatiyos",
+    "majors": selectedDegreeStrings,
+    "minors": []
+  }
+
+  const numStartYear = parseInt(startYear, 10);
+  const numGradYear = parseInt(gradYear, 10);
+  const yearCount = numGradYear - numStartYear + 1;
+  const years = Array.from(
+    { length: yearCount }, 
+    (_, i) => numStartYear + i
+  );
+
+  return (
+    <>
+      <Flex direction="row" height="100vh" className='semester-home'>
+        {/* Side panel */}
+          <SidePanel 
+            name={user.name} 
+            majors={user.majors} 
+            minors={user.minors}
+            totalUnits={140}
+            transferUnits={40}
+            pnpTotal={15}
+          />
+
+        {/* Page body */}
+          <Flex direction="column" gap="32px">
+            <h3 className='semester-title'>Semesters</h3>
+            <Flex direction="row" gap="12px" className='semester-layout'>
+              <SemesterBlock selectedSemester={"Miscellaneous"} selectedYear={""}></SemesterBlock>
+                {years.map((year) => (
+                    <Flex key={year} className="year-element" direction="row" gap="12px">
+                      <SemesterBlock selectedSemester={"Fall"} selectedYear={year}></SemesterBlock>
+                      <SemesterBlock selectedSemester={"Spring"} selectedYear={year}></SemesterBlock>
+                      {summerCheck &&
+                        <SemesterBlock selectedSemester={"Summer"} selectedYear={year}></SemesterBlock>
+                      }
+                    </Flex>
+                  ))}
+            </Flex>
+          </Flex>
+      </Flex>
+    </>
+  );
+}
+
+export default SemesterHome;

src/app/SemesterHome/SemesterHome.css

@@ -1,6 +1,3 @@
-/* .body {
-    display: block !important;
-} */
 .semester-home-body {
     display: flex;
     flex-direction: column;  

src/components/AddClass/AddClass.tsx

@@ -15,6 +15,7 @@ interface AddClassProps  {
     isOpen: boolean;
     setIsOpen: (isOpen: boolean) => void;
     addClass: (cls: ClassType) => void;
+    handleOnConfirm: (cls: ClassType) => void;
 };
 
 type ClassType = {
@@ -24,12 +25,10 @@ type ClassType = {
   };
 
 
-function AddClass({ isOpen, setIsOpen, addClass }: AddClassProps) {
-    const [showMenu, setShowMenu] = useState(false);
+function AddClass({ isOpen, setIsOpen, addClass, handleOnConfirm }: AddClassProps) {
 
     const [searchTerm, setSearchTerm] = useState('');
     const [filteredClasses, setFilteredClasses] = useState<ClassType[]>([]);
-    const [units, setUnits] = useState<number | null>(null);
 
     const handleSearch = (event: React.ChangeEvent<HTMLInputElement>) => {
         const term = event.target.value;
@@ -48,45 +47,10 @@ function AddClass({ isOpen, setIsOpen, addClass }: AddClassProps) {
       };
 
     return (
-        <div  
-        // onMouseEnter={() => setShowMenu(true)} 
-        // onMouseLeave={() => setShowMenu(false)}
-        >
-            {showMenu && 
-                <DropdownMenu.Root>
-                    <DropdownMenu.Trigger asChild>
-                    <Button className="dropDownBtn">
-                        <DotsHorizontalIcon className="" />
-                    </Button>
-                    </DropdownMenu.Trigger>
-
-                    {/* Dropdown Menu Content */}
-                    <DropdownMenu.Content
-                    className="bg-white shadow-lg rounded-md p-1 border border-gray-200"
-                    sideOffset={5}
-                    align="end"
-                    >
-                    <DropdownMenu.Item
-                        className="px-4 py-2 cursor-pointer hover:bg-gray-100 rounded"
-                        // onClick={onEdit}
-                    >
-                        Edit Course Details
-                    </DropdownMenu.Item>
-                    <DropdownMenu.Item
-                        className="px-4 py-2 cursor-pointer hover:bg-gray-100 rounded"
-                        // onClick={() => onDelete(name)}
-                    >
-                        Delete Class
-                    </DropdownMenu.Item>
-                    </DropdownMenu.Content>
-                </DropdownMenu.Root>
-            }
-
+        <div>
             <SearchBar isOpen={isOpen} setIsOpen={setIsOpen} searchTerm={searchTerm} 
             handleSearch={handleSearch} filteredClasses={filteredClasses}
-            handleSelectClass={handleSelectClass}></SearchBar>
-
-
+            handleSelectClass={handleSelectClass} handleOnConfirm={handleOnConfirm}></SearchBar>
         </div>
     )
 }

src/components/AddClass/SearchBar.tsx

@@ -1,5 +1,8 @@
 import * as Dialog from '@radix-ui/react-dialog';
-import "./addclass.css"
+import React, { useState } from 'react';
+import { Button } from "@radix-ui/themes";
+import CustomClass from "../CustomClass/custom-class";
+import "./addclass.css";
 
 interface SearchBarProps  {
     isOpen: boolean;
@@ -8,6 +11,7 @@ interface SearchBarProps  {
     handleSearch: (event: React.ChangeEvent<HTMLInputElement>) => void;
     filteredClasses: ClassType[];
     handleSelectClass: (cls: ClassType) => void;
+    handleOnConfirm: (cls: ClassType) => void;
 
 };
 
@@ -17,7 +21,15 @@ type ClassType = {
     units: number;
   };
 
-function SearchBar({isOpen, setIsOpen, searchTerm, handleSearch, filteredClasses, handleSelectClass}: SearchBarProps) {
+function SearchBar({isOpen, setIsOpen, searchTerm, handleSearch, filteredClasses, handleSelectClass, handleOnConfirm}: SearchBarProps) {
+    const [isCustomClassOpen, setIsCustomClassOpen] = useState(false);
+
+    const openCustomClass = () => setIsCustomClassOpen(true);
+    const closeCustomClass = () => {
+      setIsOpen(false)  
+      setIsCustomClassOpen(false)
+    };
+
     return (
         <Dialog.Root open={isOpen} onOpenChange={setIsOpen}>
                         <Dialog.Content className="searchContent">
@@ -30,7 +42,7 @@ function SearchBar({isOpen, setIsOpen, searchTerm, handleSearch, filteredClasses
                             />
 
                             {/* Dropdown for suggestions */}
-                            {filteredClasses.length > 0 && (
+                            {(
                                 <ul className="suggestion-list">
                                 {filteredClasses.map((cls) => (
                                     <li
@@ -41,9 +53,19 @@ function SearchBar({isOpen, setIsOpen, searchTerm, handleSearch, filteredClasses
                                     {cls.name} - {cls.units} units
                                     </li>
                                 ))}
+                                <li key="default" className='suggestion-item'>
+                                    <Button className='add-custom-btn' onClick={openCustomClass}>
+                                        + Add Custom Class
+                                    </Button>
+                                </li>
                                 </ul>
                             )}
                         </Dialog.Content>
+                        <CustomClass 
+                            open={isCustomClassOpen} 
+                            onClose={closeCustomClass} 
+                            onConfirm={handleOnConfirm}>
+                        </CustomClass>
             </Dialog.Root>
     )
 }

src/components/AddClass/addclass.css

@@ -55,9 +55,36 @@ body {
     cursor: pointer;
     padding: 0.5rem;
     text-align: left;
+    overflow: hidden;
+    color: var(--Black-1, rgba(0, 0, 0, 0.80));
+    text-overflow: ellipsis;
+    font-family: "Inter Variable";
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 20px; /* 142.857% */
+    letter-spacing: -0.1px;
 }
 
 .suggestion-item:hover {
     background-color: #bfdbfe; /* Light blue for hover */
   }
 
+.add-custom-btn {
+  color: var(--Black-1, rgba(0, 0, 0, 0.80));
+  font-family: "Inter Variable";
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 20px; /* 142.857% */
+  letter-spacing: -0.1px;
+  /* width: 100%; */
+  padding: 0;
+  text-align: left;
+  background-color: transparent;
+}
+
+/* .add-custom-btn:hover {
+  background-color: #bfdbfe;
+} */
+

src/components/AddDegree/AddDegree.css

@@ -10,7 +10,10 @@
     align-items: flex-start;
     justify-content: center;
     align-self: stretch;
-    margin-left: 450px;
+    position: absolute; /* Change to absolute for centering */
+    top: 50%; /* Push down by 50% of the viewport height */
+    left: 50%; /* Push right by 50% of the viewport width */
+    transform: translate(-50%, -50%); /* Offset by half the container's size */
 }
 @media (max-width: 600px) {
     .container {