From 0ba385eebc90a1d314340b3de87a59325965596a Mon Sep 17 00:00:00 2001
From: salirezav <s.alireza.v@gmail.com>
Date: Fri, 19 Sep 2025 12:46:03 -0400
Subject: [PATCH] update scheduling

---
 .../src/components/Scheduling.tsx             | 87 ++++++++-----------
 1 file changed, 36 insertions(+), 51 deletions(-)

diff --git a/management-dashboard-web-app/src/components/Scheduling.tsx b/management-dashboard-web-app/src/components/Scheduling.tsx
index 4ebbc4e..210a3b2 100644
--- a/management-dashboard-web-app/src/components/Scheduling.tsx
+++ b/management-dashboard-web-app/src/components/Scheduling.tsx
@@ -362,40 +362,40 @@ function AvailabilityCalendar({ user }: { user: User }) {
         }
     ])
 
-  const [selectedDate, setSelectedDate] = useState<Date | null>(null)
-  const [showTimeSlotForm, setShowTimeSlotForm] = useState(false)
-  const [newTimeSlot, setNewTimeSlot] = useState({
-    startTime: '09:00',
-    endTime: '17:00'
-  })
-  const [currentView, setCurrentView] = useState(Views.MONTH)
-
-  const eventStyleGetter = (event: CalendarEvent) => {
-    return {
-      style: {
-        backgroundColor: '#10b981', // green-500 for available
-        borderColor: '#10b981',
-        color: 'white',
-        borderRadius: '4px',
-        border: 'none',
-        display: 'block'
-      }
-    }
-  }
-
-  const handleSelectSlot = ({ start, end }: { start: Date; end: Date }) => {
-    // Set the selected date and show the time slot form
-    setSelectedDate(start)
-    setShowTimeSlotForm(true)
-    
-    // Pre-fill the form with the selected time range
-    const startTime = moment(start).format('HH:mm')
-    const endTime = moment(end).format('HH:mm')
-    setNewTimeSlot({
-      startTime,
-      endTime
+    const [selectedDate, setSelectedDate] = useState<Date | null>(null)
+    const [showTimeSlotForm, setShowTimeSlotForm] = useState(false)
+    const [newTimeSlot, setNewTimeSlot] = useState({
+        startTime: '09:00',
+        endTime: '17:00'
     })
-  }
+    const [currentView, setCurrentView] = useState(Views.MONTH)
+
+    const eventStyleGetter = (event: CalendarEvent) => {
+        return {
+            style: {
+                backgroundColor: '#10b981', // green-500 for available
+                borderColor: '#10b981',
+                color: 'white',
+                borderRadius: '4px',
+                border: 'none',
+                display: 'block'
+            }
+        }
+    }
+
+    const handleSelectSlot = ({ start, end }: { start: Date; end: Date }) => {
+        // Set the selected date and show the time slot form
+        setSelectedDate(start)
+        setShowTimeSlotForm(true)
+
+        // Pre-fill the form with the selected time range
+        const startTime = moment(start).format('HH:mm')
+        const endTime = moment(end).format('HH:mm')
+        setNewTimeSlot({
+            startTime,
+            endTime
+        })
+    }
 
     const handleSelectEvent = (event: CalendarEvent) => {
         if (window.confirm('Do you want to remove this availability?')) {
@@ -434,7 +434,7 @@ function AvailabilityCalendar({ user }: { user: User }) {
 
         const newEvent = {
             id: Date.now(),
-            title: newTimeSlot.title,
+            title: 'Available',
             start: startDateTime,
             end: endDateTime,
             resource: 'available'
@@ -476,10 +476,6 @@ function AvailabilityCalendar({ user }: { user: User }) {
                         <div className="w-3 h-3 bg-green-500 rounded mr-2"></div>
                         <span className="text-sm text-gray-600 dark:text-gray-400">Available</span>
                     </div>
-                    <div className="flex items-center">
-                        <div className="w-3 h-3 bg-red-500 rounded mr-2"></div>
-                        <span className="text-sm text-gray-600 dark:text-gray-400">Unavailable</span>
-                    </div>
                 </div>
             </div>
 
@@ -541,18 +537,6 @@ function AvailabilityCalendar({ user }: { user: User }) {
                                 />
                             </div>
 
-                            <div>
-                                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-                                    Description (Optional)
-                                </label>
-                                <input
-                                    type="text"
-                                    value={newTimeSlot.title}
-                                    onChange={(e) => setNewTimeSlot({ ...newTimeSlot, title: e.target.value })}
-                                    placeholder="e.g., Available - Morning, Available - Afternoon"
-                                    className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:text-white"
-                                />
-                            </div>
                         </div>
 
                         {/* Show existing time slots for this date */}
@@ -597,7 +581,8 @@ function AvailabilityCalendar({ user }: { user: User }) {
                     startAccessor="start"
                     endAccessor="end"
                     style={{ height: '100%' }}
-                    defaultView={Views.MONTH}
+                    view={currentView}
+                    onView={setCurrentView}
                     views={[Views.MONTH, Views.WEEK, Views.DAY]}
                     selectable
                     onSelectSlot={handleSelectSlot}