feat: Course Calendar

package.json

@@ -12,19 +12,22 @@
     "@hookform/resolvers": "^3.9.0",
     "@microsoft/applicationinsights-web": "^3.3.4",
     "@radix-ui/react-alert-dialog": "^1.1.2",
+    "@radix-ui/react-checkbox": "^1.1.3",
     "@radix-ui/react-context-menu": "^2.2.2",
     "@radix-ui/react-dialog": "^1.1.2",
     "@radix-ui/react-dropdown-menu": "^2.1.1",
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-label": "^2.1.0",
     "@radix-ui/react-popover": "^1.1.2",
+    "@radix-ui/react-select": "^2.1.2",
     "@radix-ui/react-separator": "^1.1.0",
     "@radix-ui/react-slot": "^1.1.0",
     "@radix-ui/react-tooltip": "^1.1.2",
     "@vercel/analytics": "^1.4.0",
     "@vercel/speed-insights": "^1.1.0",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
+    "date-fns": "^3.6.0",
     "dompurify": "^3.1.7",
     "lucide": "^0.446.0",
     "lucide-react": "^0.446.0",
@@ -34,6 +37,9 @@
     "next": "14.2.13",
     "next-themes": "^0.3.0",
     "react": "^18",
+    "react-aria-components": "^1.6.0",
+    "react-big-calendar": "^1.16.0",
+    "react-day-picker": "^8.10.1",
     "react-dom": "^18",
     "react-hook-form": "^7.53.1",
     "sonner": "^1.7.0",
@@ -47,14 +53,20 @@
   "devDependencies": {
     "@types/dom-speech-recognition": "^0.0.4",
     "@types/dompurify": "^3.0.5",
+    "@types/moment": "^2.13.0",
     "@types/node": "^20",
     "@types/react": "^18",
+    "@types/react-big-calendar": "^1.16.0",
     "@types/react-dom": "^18",
     "@types/uuid": "^10.0.0",
     "eslint": "^8",
     "eslint-config-next": "14.2.13",
     "postcss": "^8",
     "tailwindcss": "^3.4.1",
     "typescript": "^5"
+  },
+  "overrides": {
+    "@radix-ui/react-dismissable-layer": "1.0.5",
+    "@radix-ui/react-focus-scope": "1.0.4"
   }
 }

src/app/chat/[id]/page.tsx

@@ -6,6 +6,12 @@ import InfoToolTip from "@/components/InfoTooltip";
 import ChatInterface from "@/components/ChatInterface";
 import { useEffect } from "react";
 import { useConversationStore } from "@/stores/useConversationStore";
+import Calendar from "@/components/Calendar/MainCalendar";
+import { useCalendarStore } from "@/stores/useCalendarStore";
+import { cn } from "@/lib/utils";
+import { MinimumWidth } from "@/types";
+import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet";
+import { ArrowLeft } from "lucide-react";
 
 // export async function generateMetadata({ params }: { params: { id: string }}) {
 // 	const conversations = await fetchConversations();
@@ -24,11 +30,12 @@ import { useConversationStore } from "@/stores/useConversationStore";
 // }
 
 export default function ChatPage({ params }: { params: { id: string } }) {
+	const isDesktop = window.innerWidth > MinimumWidth.Large;
 	const {
 		setConversations,
 		setActiveConversation
 	} = useConversationStore();
-
+	const { calendarOpen, setCalendarOpen } = useCalendarStore();
 	const router = useRouter();
 
 	useEffect(() => {
@@ -53,13 +60,21 @@ export default function ChatPage({ params }: { params: { id: string } }) {
 	return (
 		<div className="m-4 flex">
 			<Nav />
-			<div className="sm:py-4 xl:px-24 lg:px-18 md:px-14 sm:px-3 w-full">
+			<div className={cn(
+				"w-full",
+				!calendarOpen && "sm:py-4 xl:px-24 lg:px-18 md:px-14 sm:px-3 "
+			)}>
 				<div className="flex flex-col">
 					<div className="flex flex-row pb-4 mb-4 md:relative md:left-[-50px] md:top-[20px] justify-center md:justify-normal">
-						<h1 className="fixed md:relative text-4xl px-4 font-semibold">DragonGPT</h1>
+						<h1 className={cn(
+							"fixed md:relative text-4xl px-4 font-semibold",
+							calendarOpen && "ml-8"
+						)}>DragonGPT</h1>
 						<InfoToolTip />
 					</div>
-					<ChatInterface />
+					<div className="flex flex-row">
+						<ChatInterface />
+					</div>
 				</div>
 			</div>
 		</div>

src/app/globals.css

@@ -1,7 +1,6 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-
 body {
 	font-family: Arial, Helvetica, sans-serif;
 	height: 98dvh;

src/app/layout.tsx

@@ -1,3 +1,4 @@
+import "react-big-calendar/lib/css/react-big-calendar.css";
 import type { Metadata } from "next";
 import localFont from "next/font/local";
 import "./globals.css";

src/app/page.tsx

@@ -6,13 +6,20 @@ import InfoToolTip from "@/components/InfoTooltip";
 import { usePathname } from "next/navigation";
 import { useEffect } from "react";
 import { useConversationStore } from "@/stores/useConversationStore";
+import Calendar from "@/components/Calendar/MainCalendar";
+import { useCalendarStore } from "@/stores/useCalendarStore";
+import { cn } from "@/lib/utils";
+import { MinimumWidth } from "@/types";
+import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet";
+import { ArrowLeft } from "lucide-react";
 
 export default function Home() {
+	const isDesktop = window.innerWidth > MinimumWidth.Large;
 	const {
 		setConversations,
 		setActiveConversation,
 	} = useConversationStore();
-
+	const { calendarOpen, setCalendarOpen } = useCalendarStore();
 	const pathname = usePathname();
 
 	useEffect(() => {
@@ -42,13 +49,21 @@ export default function Home() {
 	return (
 		<div className="m-4 flex">
 			<Nav />
-			<div className="sm:py-4 xl:px-24 lg:px-18 md:px-14 sm:px-3 w-full">
+			<div className={cn(
+				"w-full",
+				!calendarOpen && "sm:py-4 xl:px-24 lg:px-18 md:px-14 sm:px-3 "
+			)}>
 				<div className="flex flex-col gap-8">
 					<div className="flex flex-row pb-4 md:relative md:left-[-50px] md:top-[20px] justify-center md:justify-normal">
-						<h1 className="fixed md:relative text-4xl px-4 font-semibold">DragonGPT</h1>
+						<h1 className={cn(
+							"fixed md:relative text-4xl px-4 font-semibold",
+							calendarOpen && "ml-8"
+						)}>DragonGPT</h1>
 						<InfoToolTip />
 					</div>
-					<ChatInterface />
+					<div className="flex flex-row">
+						<ChatInterface />
+					</div>
 				</div>
 			</div>
 		</div>

src/app/scheduler/page.tsx

@@ -0,0 +1,83 @@
+"use client";
+import WeekCalendar from "@/components/Calendar/MainCalendar";
+import InfoTooltip from "@/components/InfoTooltip";
+import Nav from "@/components/Navigation/Nav";
+import SchedulerInterface from "@/components/scheduler/scheduler-interface";
+import { Sheet, SheetContent, SheetTitle, SheetTrigger } from "@/components/ui/sheet";
+import { cn } from "@/lib/utils";
+import { useCalendarStore } from "@/stores/useCalendarStore";
+import { useSchedulerStore } from "@/stores/useSchedulerStore";
+import { MinimumWidth } from "@/types";
+import { ArrowLeft, ArrowUpRight } from "lucide-react";
+import { useEffect } from "react"
+
+export default function Page() {
+	const isDesktop = window.innerWidth > MinimumWidth.Large;
+	const {
+		setSchedulerMessages,
+	} = useSchedulerStore();
+
+	const { calendarOpen, setCalendarOpen } = useCalendarStore();
+
+	useEffect(() => {
+		const fetchSchedulerChat = () => {
+			return JSON.parse(
+				window.localStorage.getItem("scheduler-messages") || "[]"
+			) as Message[];
+		};
+
+		if (typeof window !== "undefined") {
+			setSchedulerMessages(fetchSchedulerChat());
+		}
+	}, [setSchedulerMessages]);
+
+	return (
+		<div className="m-4 flex">
+			<Nav />
+			<div className={cn(
+				"w-full",
+				!calendarOpen && "sm:py-4 xl:px-24 lg:px-18 md:px-14 sm:px-3 "
+			)}>
+				<div className="flex flex-col">
+					<div className="flex flex-row pb-4 mb-4 md:relative md:left-[-50px] md:top-[20px] justify-center md:justify-normal">
+						<h1 className={cn(
+							"fixed md:relative text-xl px-4 py-2 font-semibold",
+							calendarOpen && "ml-8"
+						)}>DragonGPT Scheduler</h1>
+						<InfoTooltip />
+					</div>
+					<div
+						className="flex flex-row gap-2 self-center border text-sky-900 border-sky-900 rounded-[2rem] p-6 m-8 w-full hover:cursor-pointer"
+						onClick={() => setCalendarOpen()}
+					>
+							<div className="w-full">
+								<p className="font-semibold text-lg">Dragon Scheduler</p>
+								<p>Take a look at your schedule</p>
+							</div>
+							<ArrowUpRight />
+					</div>
+					<div className="flex flex-row">
+						<SchedulerInterface />
+						{isDesktop
+							? calendarOpen && (<WeekCalendar />)
+							: <Sheet open={calendarOpen} onOpenChange={() => setCalendarOpen()} >
+								<SheetTitle className="sr-only">Dragon Scheduler</SheetTitle>
+								<SheetContent className="!max-w-full w-full p-2">
+									<div className="flex flex-row gap-6 ml-8">
+										<SheetTrigger className=" hover:bg-gray-300/40 -top-4 sm:top-0 rounded-sm"
+										>
+											<ArrowLeft />
+											<span className="sr-only">Exit calendar</span>
+										</SheetTrigger>
+										<span className="text-xl font-bold">Dragon Scheduler</span>
+									</div>
+									<WeekCalendar />
+								</SheetContent>
+							</Sheet>
+						}
+					</div>
+				</div>
+			</div>
+		</div>
+	)
+}