Finish Filter conflicted courses in Catagory part

apps/backend/src/modules/schedule/controller.ts

@@ -3,7 +3,7 @@ import {
   IClassItem,
   ScheduleModel,
   SectionModel,
-  TermModel,
+  TermModel
 } from "@repo/common";
 
 import {
@@ -12,6 +12,8 @@ import {
   Semester,
   UpdateScheduleInput,
 } from "../../generated-types/graphql";
+
+import {getSecondarySections} from "../class/controller"
 import { formatClass } from "../class/formatter";
 import { ClassModule } from "../class/generated-types/module-types";
 import { formatSchedule } from "./formatter";
@@ -139,3 +141,5 @@ export const getClasses = async (
 
   return classes;
 };
+
+

apps/backend/src/modules/schedule/resolver.ts

@@ -6,7 +6,7 @@ import {
   getClasses,
   getSchedule,
   getSchedules,
-  updateSchedule,
+  updateSchedule
 } from "./controller";
 import { IntermediateSchedule } from "./formatter";
 import { ScheduleModule } from "./generated-types/module-types";
@@ -24,6 +24,8 @@ const resolvers: ScheduleModule.Resolvers = {
 
       return schedule as unknown as ScheduleModule.Schedule;
     },
+
+
   },
 
   Schedule: {
@@ -53,6 +55,7 @@ const resolvers: ScheduleModule.Resolvers = {
     },
   },
 
+
   Mutation: {
     deleteSchedule: async (_, { id }, context) => {
       return await deleteSchedule(context, id);

apps/backend/src/modules/schedule/typedefs/schedule.ts

@@ -29,6 +29,7 @@ const typedef = gql`
     events: [Event!]!
   }
 
+
   type Query {
     schedules: [Schedule] @auth
     schedule(id: ID!): Schedule

apps/frontend/src/App.tsx

@@ -311,9 +311,7 @@ export default function App() {
   return (
     <ApolloProvider client={client}>
       <ThemeProvider>
-        {/* <PinsProvider> */}
-        <RouterProvider router={router} />
-        {/* </PinsProvider> */}
+          <RouterProvider router={router} />
       </ThemeProvider>
     </ApolloProvider>
   );

apps/frontend/src/app/Catalog/index.tsx

@@ -12,6 +12,7 @@ import ClassBrowser from "@/components/ClassBrowser";
 import { useReadTerms } from "@/hooks/api";
 import { useReadClass } from "@/hooks/api/classes/useReadClass";
 import { Semester, TemporalPosition } from "@/lib/api";
+import { useReadSchedules } from "@/hooks/api";
 
 import styles from "./Catalog.module.scss";
 import Dashboard from "./Dashboard";
@@ -96,6 +97,8 @@ export default function Catalog() {
     [navigate, location, term]
   );
 
+  const { data: schedules = [] } = useReadSchedules();
+
   // TODO: Loading state
   if (termsLoading) {
     return <></>;
@@ -129,6 +132,7 @@ export default function Catalog() {
             semester={term.semester}
             year={term.year}
             persistent
+            allSchedules={schedules}
           />
         </div>
       </div>

apps/frontend/src/app/Schedule/Editor/SideBar/Class/Section/index.tsx

@@ -5,6 +5,7 @@ import Time from "@/components/Time";
 import { ISection } from "@/lib/api";
 
 import styles from "./Section.module.scss";
+import useSchedule from "@/hooks/useSchedule";
 
 interface SectionProps {
   onSectionSelect?: () => void;
@@ -22,6 +23,7 @@ export default function Section({
   number,
   meetings: [{ startTime, endTime, days }],
 }: SectionProps & ISection) {
+
   return (
     <div
       className={classNames(styles.root, {

apps/frontend/src/app/Schedule/Week/index.tsx

@@ -54,6 +54,7 @@ function rotateRight<T>(arr: T[]): T[] {
   return [arr[arr.length - 1], ...arr.slice(0, arr.length - 1)];
 }
 
+// Need to add alarm when users dont choose days
 export default function Week({
   selectedSections,
   currentSection,
@@ -83,9 +84,15 @@ export default function Week({
         const positions: Record<string, [number, number]> = {};
         const minutes: string[][] = [...Array(60 * 18)].map(() => []);
 
-        const relevantEvents = events
+        const relevantEvents = (events ?? [])
           // Filter events for the current day
-          .filter((event) => event.days[day])
+          .filter((event) => {
+            if (!Array.isArray(event.days)) {
+              console.warn("Invalid event.days:", event);
+              return false;
+            }
+            return event.days[day];
+          })
           .map(
             (event) =>
               ({

apps/frontend/src/app/Schedule/schedule.ts

@@ -21,9 +21,20 @@ export type ScheduleEvent = SectionEvent | CustomEvent;
 
 const defaultUnits = [0, 0];
 
+// motify the function to give boundaries
+// need to fix bug --> if time out of bounds, webpage should jump out alarm
 export const getY = (time: string) => {
   const [hour, minute] = time.split(":");
-  return (parseInt(hour) - 6) * 60 + parseInt(minute);
+  const hour1 = parseInt(hour, 10);
+  const minute1 = parseInt(minute, 10);
+
+  if (isNaN(hour1) || isNaN(minute1)) {
+    console.warn("Invalid time string:", time);
+    return -1;
+  } 
+  const offset = (hour1 - 6) * 60 + minute1;
+
+  return Math.max(0, Math.min(1079, offset));
 };
 
 export const getUnits = (schedule?: ISchedule) => {

apps/frontend/src/components/Class/Sections/Sections.module.scss

@@ -37,6 +37,7 @@
     align-items: flex-start;
   }
 
+
   .view {
     flex-grow: 1;
 
@@ -51,6 +52,10 @@
         margin-bottom: 24px;
         border: 1px solid var(--border-color);
 
+        &.conflict {
+          border: 2px solid var(--red-500); 
+        }
+
         .header {
           display: flex;
           margin-bottom: 24px;

apps/frontend/src/components/Class/Sections/index.tsx

@@ -11,10 +11,14 @@ import Details from "@/components/Details";
 import useClass from "@/hooks/useClass";
 import { Component, componentMap } from "@/lib/api";
 import { getExternalLink } from "@/lib/section";
+import useScheduleTimeSlots from "@/hooks/useScheduleTimeSlots";
+import { hasTimeConflict } from "@/components/ClassBrowser/browser";
 
 import styles from "./Sections.module.scss";
 
 export default function Sections() {
+  const timeSlots = useScheduleTimeSlots();
+
   const { class: _class } = useClass();
 
   const viewRef = useRef<HTMLDivElement>(null);
@@ -85,16 +89,21 @@ export default function Sections() {
     viewRef.current?.children[index].scrollIntoView({ behavior: "smooth" });
   };
 
-  return _class.sections.length === 0 ? (
-    <div className={styles.placeholder}>
+  if (_class.sections.length === 0) {
+    return (
+      <div className={styles.placeholder}>
       <FrameAltEmpty width={32} height={32} />
       <p className={styles.heading}>No associated sections</p>
       <p className={styles.paragraph}>
         Please refer to the class syllabus or instructor for the most accurate
         information regarding class attendance requirements.
       </p>
     </div>
-  ) : (
+    );
+  }
+
+
+  return (
     <div className={styles.root}>
       <div className={styles.menu}>
         {Object.keys(groups).map((component, index) => (
@@ -116,48 +125,54 @@ export default function Sections() {
       <div className={styles.view} ref={viewRef}>
         {Object.values(groups).map((sections) => (
           <div className={styles.group}>
-            {sections.map((section) => (
-              <div className={styles.section} key={section.sectionId}>
-                <div className={styles.header}>
-                  <div className={styles.text}>
-                    <p className={styles.heading}>
-                      {componentMap[section.component]} {section.number}
-                    </p>
-                    <CCN sectionId={section.sectionId} />
+            {sections.map((section) => {
+              const { conflictingSectionIds } = hasTimeConflict(section, timeSlots);
+              console.log("14", conflictingSectionIds.includes(section.sectionId));
+              return (
+                <div className={classNames(styles.section, {[styles.conflict]: conflictingSectionIds.includes(section.sectionId),})}
+                  key={section.sectionId}>
+                  <div className={styles.header}>
+                    <div className={styles.text}>
+                      <p className={styles.heading}>
+                        {componentMap[section.component]} {section.number}
+                      </p>
+                      <CCN sectionId={section.sectionId} />
+                    </div>
+                    <Capacity
+                      enrolledCount={section.enrollment?.latest.enrolledCount}
+                      maxEnroll={section.enrollment?.latest.maxEnroll}
+                      waitlistedCount={section.enrollment?.latest.waitlistedCount}
+                      maxWaitlist={section.enrollment?.latest.maxWaitlist}
+                    />
+                    <Tooltip content="Berkeley Academic Guide">
+                      <a
+                        href={getExternalLink(
+                          _class.year,
+                          _class.semester,
+                          _class.courseNumber,
+                          _class.number,
+                          section.number,
+                          section.component
+                        )}
+                        target="_blank"
+                      >
+                        <IconButton>
+                          <OpenNewWindow />
+                        </IconButton>
+                      </a>
+                    </Tooltip>
                   </div>
-                  <Capacity
-                    enrolledCount={section.enrollment?.latest.enrolledCount}
-                    maxEnroll={section.enrollment?.latest.maxEnroll}
-                    waitlistedCount={section.enrollment?.latest.waitlistedCount}
-                    maxWaitlist={section.enrollment?.latest.maxWaitlist}
+                  <Details
+                    days={section.meetings[0].days}
+                    startTime={section.meetings[0].startTime}
+                    endTime={section.meetings[0].endTime}
+                    location={section.meetings[0].location}
+                    instructors={section.meetings[0].instructors}
                   />
-                  <Tooltip content="Berkeley Academic Guide">
-                    <a
-                      href={getExternalLink(
-                        _class.year,
-                        _class.semester,
-                        _class.courseNumber,
-                        _class.number,
-                        section.number,
-                        section.component
-                      )}
-                      target="_blank"
-                    >
-                      <IconButton>
-                        <OpenNewWindow />
-                      </IconButton>
-                    </a>
-                  </Tooltip>
                 </div>
-                <Details
-                  days={section.meetings[0].days}
-                  startTime={section.meetings[0].startTime}
-                  endTime={section.meetings[0].endTime}
-                  location={section.meetings[0].location}
-                  instructors={section.meetings[0].instructors}
-                />
-              </div>
-            ))}
+              );
+
+            })}
           </div>
         ))}
       </div>

apps/frontend/src/components/ClassBrowser/Filters/Filters.module.scss

@@ -36,6 +36,46 @@
       }
     }
 
+    .filterVertical {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+      margin-top: 12px;
+
+      .text {
+        font-size: 14px;
+        color: var(--label-color);
+        line-height: 1;
+        font-weight: 500;
+
+        .value {
+          color: var(--paragraph-color);
+        }
+      }
+
+      .select {
+        font-size: 14px;
+        color: var(--paragraph-color);
+        font-weight: 500;
+        border: 2px solid var(--paragraph-color);
+        border-radius: 4px;
+        padding: 4px 8px;
+        background-color: white;
+        appearance: none;
+        background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='8'%20height='5'%3E%3Cpath%20fill='black'%20d='M0,0L4,5L8,0'/%3E%3C/svg%3E");
+        background-repeat: no-repeat;
+        background-position: right 8px center;
+        background-size: 8px 5px;
+
+        &:focus {
+          outline: none;
+          border-color: var(--blue-500);
+        }
+      }
+    }
+
+
+
     .filter {
       display: flex;
       align-items: center;