diff --git a/src/app/globals.css b/src/app/globals.css
index 816a28b..d457967 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -1,7 +1,6 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
-
body {
font-family: Arial, Helvetica, sans-serif;
height: 98dvh;
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 3ecbd5d..560aef7 100644
--- a/src/app/layout.tsx
+++ b/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";
diff --git a/src/app/page.tsx b/src/app/page.tsx
index fcad3e7..47e8d10 100644
--- a/src/app/page.tsx
+++ b/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 (
-
+
-
DragonGPT
+ DragonGPT
-
+
+
+
diff --git a/src/app/scheduler/page.tsx b/src/app/scheduler/page.tsx
new file mode 100644
index 0000000..2332116
--- /dev/null
+++ b/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 (
+
+
+
+
+
+
DragonGPT Scheduler
+
+
+
setCalendarOpen()}
+ >
+
+
Dragon Scheduler
+
Take a look at your schedule
+
+
+
+
+
+ {isDesktop
+ ? calendarOpen && (
)
+ :
setCalendarOpen()} >
+ Dragon Scheduler
+
+
+
+
+ Exit calendar
+
+
Dragon Scheduler
+
+ }
+
+
+
+
+ )
+}
diff --git a/src/components/Calendar/CalendarGrid.tsx b/src/components/Calendar/CalendarGrid.tsx
deleted file mode 100644
index 53e0afa..0000000
--- a/src/components/Calendar/CalendarGrid.tsx
+++ /dev/null
@@ -1,69 +0,0 @@
-"use client";
-import React, { useState } from 'react';
-import moment from 'moment';
-
-const CalendarGrid: React.FC = () => {
- const [currentDate, setCurrentDate] = useState(moment()); // Set initial date to today
-
- const goToPreviousMonth = () => {
- setCurrentDate(currentDate.clone().subtract(1, 'month'));
- };
-
- const goToNextMonth = () => {
- setCurrentDate(currentDate.clone().add(1, 'month'));
- };
-
- const goToToday = () => {
- setCurrentDate(moment());
- };
-
- const startOfMonth = currentDate.clone().startOf('month');
- const endOfMonth = currentDate.clone().endOf('month');
- const startDate = startOfMonth.clone().startOf('week'); // Start on Sunday
- const endDate = endOfMonth.clone().endOf('week'); // End on Saturday
-
- const dates = [];
- const day = startDate.clone();
- while (day.isBefore(endDate, 'day')) {
- dates.push(day.clone());
- day.add(1, 'day');
- }
-
- return (
-
-
-
-
-
- {currentDate.format('MMMM YYYY')}
-
-
- {['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'].map((dayName) => (
-
- {dayName}
-
- ))}
-
-
- {dates.map((date) => (
-
- {date.date()}
- {/* Render events/tasks here if needed */}
-
- ))}
-
-
- );
-};
-
-export default CalendarGrid;
diff --git a/src/components/Calendar/MainCalendar.tsx b/src/components/Calendar/MainCalendar.tsx
new file mode 100644
index 0000000..6fb876e
--- /dev/null
+++ b/src/components/Calendar/MainCalendar.tsx
@@ -0,0 +1,366 @@
+import { useEffect, useRef, useState, useMemo } from 'react';
+import moment from 'moment';
+import { ChevronDownIcon, ChevronLeft, ChevronRight } from 'lucide-react';
+import { WeekHeader } from './views/week/WeekHeader';
+import { EventLayer } from './components/EventLayer';
+import { MinimumWidth } from '@/types';
+import { Button } from '../ui/button';
+import { useMaskImage } from '@/hooks';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from '../ui/dropdown-menu';
+import { DayIcon, MonthIcon, ScheduleIcon, ThreeDayIcon, WeekIcon } from '@/icons/calendar';
+import { WeekViewGrid } from './views/week/WeekViewGrid';
+import CalendarHours from './components/CalendarHours';
+import ScheduleView from './views/schedule/ScheduleView';
+import MonthView from './views/month/MonthView';
+import { useEventStore } from '@/stores/useEventStore';
+import { cn } from '@/lib/utils';
+
+const expandRecurringEvents = (events: CalendarEvent[], startDate: Date, endDate: Date): CalendarEvent[] => {
+ const expandedEvents: CalendarEvent[] = [];
+
+ events.forEach(event => {
+ if (!event.recurrence) {
+ expandedEvents.push(event);
+ return;
+ }
+
+ const start = moment(startDate);
+ const end = moment(endDate);
+ const eventStart = moment(event.start);
+ const eventEnd = moment(event.end);
+ const recurrenceEnd = event.recurrence.endDate ? moment(event.recurrence.endDate) : end;
+
+ while (start.isBefore(end) && start.isSameOrBefore(recurrenceEnd)) {
+ if (event.recurrence.type === 'daily') {
+ expandedEvents.push({
+ ...event,
+ start: start.clone().hour(eventStart.hour()).minute(eventStart.minute()).toDate(),
+ end: start.clone().hour(eventEnd.hour()).minute(eventEnd.minute()).toDate(),
+ });
+ } else if (event.recurrence.type === 'weekly') {
+ const interval = event.recurrence.interval || 1;
+ const weekDiff = start.diff(eventStart, 'weeks');
+ if (start.day() === eventStart.day() && weekDiff % interval === 0) {
+ expandedEvents.push({
+ ...event,
+ start: start.clone().hour(eventStart.hour()).minute(eventStart.minute()).toDate(),
+ end: start.clone().hour(eventEnd.hour()).minute(eventEnd.minute()).toDate(),
+ });
+ }
+ } else if (event.recurrence.type === 'specific-days') {
+ const interval = event.recurrence.interval || 1;
+ const weekDiff = start.diff(eventStart, 'weeks');
+ if (event.recurrence.days?.includes(start.format('dddd').toLowerCase() as 'monday' | 'tuesday' | 'wednesday' | 'thursday' | 'friday' | 'saturday' | 'sunday') &&
+ weekDiff % interval === 0) {
+ expandedEvents.push({
+ ...event,
+ start: start.clone().hour(eventStart.hour()).minute(eventStart.minute()).toDate(),
+ end: start.clone().hour(eventEnd.hour()).minute(eventEnd.minute()).toDate(),
+ });
+ }
+ }
+ start.add(1, 'day');
+ }
+ });
+
+ return expandedEvents.sort((a, b) => moment(a.start).diff(moment(b.start)));
+};
+
+export default function MainCalendar() {
+ const { baseEvents, generateMockEvents } = useEventStore();
+ const [currentDate, setCurrentDate] = useState(moment());
+ const [loadedWeeks, setLoadedWeeks] = useState(6);
+ const [currentView, setCurrentView] = useState
(() => {
+ const savedView = localStorage.getItem('calendarView');
+ return (savedView as CalendarView) || '3day';
+ });
+
+ useEffect(() => {
+ generateMockEvents(currentDate);
+ }, []);
+
+ const events = useMemo(() => {
+ const startDate = moment(currentDate).subtract(loadedWeeks, 'weeks');
+ const endDate = moment(currentDate).add(loadedWeeks, 'weeks');
+ return expandRecurringEvents(baseEvents, startDate.toDate(), endDate.toDate());
+ }, [baseEvents, currentDate, loadedWeeks]);
+
+ const handleLoadMoreEvents = () => {
+ setLoadedWeeks(prev => prev + 6);
+ };
+
+ const isDesktop = window?.innerWidth > MinimumWidth.Large;
+ const scrollRef = useRef(null);
+ const [swipeProgress, setSwipeProgress] = useState(0);
+ const [isSwiping, setIsSwiping] = useState(false);
+ const [startX, setStartX] = useState(0);
+ const [offsetX, setOffsetX] = useState(0);
+ const containerRef = useRef(null);
+
+ useMaskImage(scrollRef);
+
+ const [weekDays, setWeekDays] = useState(
+ Array.from({ length: isDesktop ? 7 : 5 }, (_, i) =>
+ moment(currentDate).startOf(isDesktop ? 'week' : 'day').add(i, 'days')
+ )
+ );
+
+ const goToPrevious = () => {
+ let newDate: moment.Moment;
+ if (currentView === 'day') {
+ newDate = currentDate.clone().subtract(1, "days");
+ setWeekDays(
+ Array.from({ length: 5 }, (_, i) =>
+ moment(newDate).add(i, 'days')
+ )
+ );
+ } else if (currentView === '3day') {
+ const firstShownDate = weekDays[0];
+ newDate = moment(firstShownDate).subtract(3, "days");
+ setWeekDays(
+ Array.from({ length: 3 }, (_, i) =>
+ moment(newDate).add(i, 'days')
+ )
+ );
+ } else if (currentView === 'week') {
+ const firstShownDate = weekDays[0];
+ newDate = moment(firstShownDate).subtract(5, "days");
+ setWeekDays(
+ Array.from({ length: 5 }, (_, i) =>
+ moment(newDate).add(i, 'days')
+ )
+ );
+ }
+
+ setCurrentDate(newDate!);
+ };
+
+ const goToNext = () => {
+ let newDate: moment.Moment;
+ if (currentView === 'day') {
+ newDate = currentDate.clone().add(1, "days");
+ setWeekDays(
+ Array.from({ length: 5 }, (_, i) =>
+ moment(newDate).add(i, 'days')
+ )
+ );
+ } else if (currentView === '3day') {
+ const lastShownDate = weekDays[2];
+ newDate = moment(lastShownDate).add(1, "days");
+ setWeekDays(
+ Array.from({ length: 3 }, (_, i) =>
+ moment(newDate).add(i, 'days')
+ )
+ );
+ } else if (currentView === 'week') {
+ const lastShownDate = weekDays[4];
+ newDate = moment(lastShownDate).add(1, "days");
+ setWeekDays(
+ Array.from({ length: 5 }, (_, i) =>
+ moment(newDate).add(i, 'days')
+ )
+ );
+ }
+
+ setCurrentDate(newDate!);
+ };
+
+ const goToToday = () => {
+ const newDate = moment();
+ setCurrentDate(moment());
+ if (currentView === 'week' || currentView === 'day') {
+ setWeekDays(
+ Array.from({ length: 5 }, (_, i) =>
+ moment(newDate).add(i, 'days')
+ )
+ );
+ } else if (currentView === '3day') {
+ setWeekDays(
+ Array.from({ length: 3 }, (_, i) =>
+ moment(newDate).add(i, 'days')
+ )
+ );
+ }
+ };
+
+ const handleTouchStart = (e: React.TouchEvent) => {
+ setIsSwiping(true);
+ setStartX(e.touches[0].clientX);
+ };
+
+ const handleTouchMove = (e: React.TouchEvent) => {
+ if (!isSwiping) return;
+ setOffsetX(e.touches[0].clientX - startX);
+ const currentX = e.touches[0].clientX;
+ const delta = currentX - startX;
+ const progress = Math.max(0, Math.min(1, Math.abs(delta) / window.innerWidth));
+ setSwipeProgress(progress);
+ };
+
+ const handleTouchEnd = () => {
+ setIsSwiping(false);
+ if (offsetX > 50) {
+ goToPrevious();
+ } else if (offsetX < -50) {
+ goToNext();
+ }
+ setOffsetX(0);
+ setSwipeProgress(0);
+ };
+
+ useEffect(() => {
+ if (currentView === 'week' || currentView === 'day') {
+ setWeekDays(
+ Array.from({ length: 5 }, (_, i) =>
+ moment(currentDate).add(i, 'days')
+ )
+ );
+ } else if (currentView === '3day') {
+ setWeekDays(
+ Array.from({ length: 3 }, (_, i) =>
+ moment(currentDate).add(i, 'days')
+ )
+ );
+ }
+ }, [currentView, currentDate]);
+
+ const handleViewChange = (view: CalendarView) => {
+ setCurrentView(view);
+ localStorage.setItem('calendarView', view);
+ };
+
+ const handleMonthChange = (newDate: moment.Moment) => {
+ setCurrentDate(newDate);
+ };
+
+ return (
+
+ {/*
+
+
+ {currentDate.format('MMMM YYYY')}
+
+ */}
+
+
+
+ {/*
*/}
+
+
+
+
+
+
+ handleViewChange('day')}
+ >
+ Day
+
+
+ handleViewChange('3day')}
+ >
+ 3 Day
+
+
+ handleViewChange('week')}
+ >
+ Week
+
+
+ handleViewChange('month')}
+ >
+ Month
+
+
+ handleViewChange('schedule')}>
+ Schedule
+
+
+
+
+
+
+
+ {currentView === 'schedule' ? (
+
+ ) : currentView === 'month' ? (
+
+ ) : (
+ <>
+
+
+
{moment(currentDate).format('MMMM YYYY')}
+
+
+
+
+
+ )}z
+
+ {hours.map((hour) => (
+
+
+ {formatHourIntl(hour)}
+
+
+ ))}
+
setOpen(true)}
+ >
+
e.stopPropagation()}>
+
+
+
+
+
+
{event.title}
+ {event.recurrence &&
}
+
+
+ {event.location}
+ {moment(event.start).format("h:mm a")} - {moment(event.end).format("h:mm a")}
+
+
+
+ {events.map((event, index) => {
+ const position = calculateEventPosition(event, view);
+ if (!position) return null;
+
+ return (
+
{
+ const currentTarget = e.currentTarget;
+ const computedStyle = window.getComputedStyle(currentTarget);
+ const currentHeight = parseFloat(computedStyle.height);
+ const contentHeight = currentTarget.scrollHeight;
+
+ currentTarget.style.height = `${Math.max(currentHeight, contentHeight)}px`;
+ }}
+ onMouseLeave={(e) => {
+ e.currentTarget.style.height = 'unset';
+ }}
+ onClick={() => handleEventClick(event)}
+ >
+
+ {event.title}
+
+
{event.location}
+
+ );
+ })}
+
+ {selectedEvent && (
+
{
+ setEditModalOpen(open);
+ if (!open) setSelectedEvent(null);
+ }}
+ />
+ )}
+
+
onMonthChange?.(moment(date))}
+ />
+
+
{moment(date).format('MMMM Do YYYY')}
+ {events.filter(event => moment(event.start).isSame(date, 'day')).length > 0 ?
+ events.filter(event => moment(event.start).isSame(date, 'day')).map((event) => (
+
+ )) : (
+
+
+
No events for this day
+
Yay or nay?
+
+ )}
+
+
+
No upcoming events scheduled
+
+
+ {sortedDays.map((day, index) => (
+
+ {isNewMonth(day, sortedDays[index - 1]) && (
+
+ )}
+
+ {moment(day).format("D")}
+
+ {moment(day).format("ddd")}
+
+
+
+ ))}
+
+
+
+ {sortedDays.map((day, index) => (
+
+ {isNewMonth(day, sortedDays[index - 1]) && (
+
+ {moment(day).format("MMMM YYYY")}
+
+ )}
+
+ {groupedEvents[day].length === 0 && moment(day).isSame(moment(), 'day') ? (
+
+ Your schedule is empty for today
+
+ ) : (
+ groupedEvents[day].map((event) => (
+
+ ))
+ )}
+
+ ))}
+ {isLoading && (
+
+
+
+ )}
+ {!hasMore && !isLoading && (
+
+ No more events to load
+
+ )}
+
+
+ {displayDays.map((day, index) => (
+
+ {day.format("D")}
+
+ {day.format(view === "day" ? "dddd" : "ddd")}
+
+
+ ))}
+
+ {/* Current time indicator */}
+ {moment().isSame(weekDays[0], 'day') && view === 'day' && (
+
+ )}
+
+ {/* Day columns */}
+ {Array.from({ length: findDayLength(view) }).map((_, dayIndex) => (
+
+ {Array.from({ length: 24 }).map((_, hour) => (
+
+ ))}
+
+ ))}
+