fix: update tests for new Menubar UI implementation

- Remove refresh button test from Calendar.test.tsx
- Update Menubar tests to pass required props (calendarRef, onRefresh, currentDate)
- Update Calendar tests to pass calendarRef prop
- Remove outdated test cases from MiniCalendarColor.test.tsx that tested old headerToolbar
- Format code with prettier

src/components/Calendar/Calendar.tsx

@@ -43,7 +43,10 @@ interface CalendarAppProps {
   onDateChange?: (date: Date) => void;
 }
 
-export default function CalendarApp({ calendarRef, onDateChange }: CalendarAppProps) {
+export default function CalendarApp({
+  calendarRef,
+  onDateChange,
+}: CalendarAppProps) {
   const [selectedDate, setSelectedDate] = useState(new Date());
   const [selectedMiniDate, setSelectedMiniDate] = useState(new Date());
   const tokens = useAppSelector((state) => state.user.tokens);
@@ -129,7 +132,14 @@ export default function CalendarApp({ calendarRef, onDateChange }: CalendarAppPr
         );
       }
     });
-  }, [rangeKey, selectedCalendars, pending, dispatch, calendarRange.start, calendarRange.end]);
+  }, [
+    rangeKey,
+    selectedCalendars,
+    pending,
+    dispatch,
+    calendarRange.start,
+    calendarRange.end,
+  ]);
 
   useEffect(() => {
     updateCalsDetails(
@@ -357,8 +367,9 @@ export default function CalendarApp({ calendarRef, onDateChange }: CalendarAppPr
           }}
           datesSet={(arg) => {
             // Get the current date from calendar API to ensure consistency
-            const calendarCurrentDate = calendarRef.current?.getDate() || new Date(arg.start);
-            
+            const calendarCurrentDate =
+              calendarRef.current?.getDate() || new Date(arg.start);
+
             if (arg.view.type === "dayGridMonth") {
               setSelectedDate(new Date(arg.start));
               setSelectedMiniDate(calendarCurrentDate);
@@ -366,7 +377,7 @@ export default function CalendarApp({ calendarRef, onDateChange }: CalendarAppPr
               setSelectedDate(new Date(arg.start));
               setSelectedMiniDate(new Date(arg.start));
             }
-            
+
             // Always use the calendar's current date for consistency
             if (onDateChange) {
               onDateChange(calendarCurrentDate);

src/components/Calendar/CalendarLayout.tsx

@@ -16,17 +16,18 @@ export default function CalendarLayout() {
   const calendarRef = useRef<any>(null);
   const dispatch = useAppDispatch();
   const selectedCalendars = useAppSelector((state) => state.calendars.list);
-  const userId = useAppSelector((state) => state.user.userData?.openpaasId) ?? "";
+  const userId =
+    useAppSelector((state) => state.user.userData?.openpaasId) ?? "";
   const [currentDate, setCurrentDate] = useState<Date>(new Date());
 
   const handleRefresh = async () => {
     await dispatch(getCalendarsListAsync());
-    
+
     // Get current calendar range
     if (calendarRef.current) {
       const view = calendarRef.current.getApi().view;
       const calendarRange = getCalendarRange(view.activeStart);
-      
+
       // Refresh events for selected calendars
       Object.keys(selectedCalendars).forEach((id) => {
         if (id.split("/")[0] === userId) {

src/components/Calendar/CustomCalendar.css

@@ -105,7 +105,11 @@ th.fc-col-header-cell.fc-day {
   position: relative;
   transform: translate(-15px, -12px);
 }
-.fc tbody tr:first-of-type .fc-timegrid-slot-label .fc-timegrid-slot-label-frame {
+.fc
+  tbody
+  tr:first-of-type
+  .fc-timegrid-slot-label
+  .fc-timegrid-slot-label-frame {
   display: none;
 }
 .fc .fc-timegrid-slot-label .fc-timegrid-slot-label-frame::after {

src/components/Menubar/Menubar.tsx

@@ -7,16 +7,16 @@ import ChevronRightIcon from "@mui/icons-material/ChevronRight";
 import "./Menubar.css";
 import { useAppDispatch, useAppSelector } from "../../app/hooks";
 import { stringToColor } from "../../features/Events/EventDisplay";
-import { 
-  Avatar, 
-  IconButton, 
-  Popover, 
-  ButtonGroup, 
-  Button, 
-  Select, 
-  MenuItem, 
+import {
+  Avatar,
+  IconButton,
+  Popover,
+  ButtonGroup,
+  Button,
+  Select,
+  MenuItem,
   FormControl,
-  Typography
+  Typography,
 } from "@mui/material";
 import { push } from "redux-first-history";
 import { CalendarApi } from "@fullcalendar/core";
@@ -34,7 +34,12 @@ export type MenubarProps = {
   onDateChange?: (date: Date) => void;
 };
 
-export function Menubar({ calendarRef, onRefresh, currentDate, onDateChange }: MenubarProps) {
+export function Menubar({
+  calendarRef,
+  onRefresh,
+  currentDate,
+  onDateChange,
+}: MenubarProps) {
   const user = useAppSelector((state) => state.user.userData);
   const applist: AppIconProps[] = (window as any).appList ?? [];
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
@@ -52,21 +57,21 @@ export function Menubar({ calendarRef, onRefresh, currentDate, onDateChange }: M
     setAnchorEl(null);
   };
 
-  const handleNavigation = (action: 'prev' | 'next' | 'today') => {
+  const handleNavigation = (action: "prev" | "next" | "today") => {
     if (!calendarRef.current) return;
-    
+
     switch (action) {
-      case 'prev':
+      case "prev":
         calendarRef.current.prev();
         break;
-      case 'next':
+      case "next":
         calendarRef.current.next();
         break;
-      case 'today':
+      case "today":
         calendarRef.current.today();
         break;
     }
-    
+
     // Notify parent about date change after navigation
     if (onDateChange) {
       const newDate = calendarRef.current.getDate();
@@ -78,7 +83,7 @@ export function Menubar({ calendarRef, onRefresh, currentDate, onDateChange }: M
     if (!calendarRef.current) return;
     setCurrentView(view);
     calendarRef.current.changeView(view);
-    
+
     // Notify parent about date change after view change
     if (onDateChange) {
       const newDate = calendarRef.current.getDate();
@@ -90,23 +95,20 @@ export function Menubar({ calendarRef, onRefresh, currentDate, onDateChange }: M
     onRefresh();
   };
 
-
   const open = Boolean(anchorEl);
   return (
     <>
       <header className="menubar">
         <div className="left-menu">
           <MainTitle />
-          
+
           <div className="navigation-controls">
             <ButtonGroup variant="outlined" size="small">
-              <Button onClick={() => handleNavigation('prev')}>
+              <Button onClick={() => handleNavigation("prev")}>
                 <ChevronLeftIcon />
               </Button>
-              <Button onClick={() => handleNavigation('today')}>
-                Today
-              </Button>
-              <Button onClick={() => handleNavigation('next')}>
+              <Button onClick={() => handleNavigation("today")}>Today</Button>
+              <Button onClick={() => handleNavigation("next")}>
                 <ChevronRightIcon />
               </Button>
             </ButtonGroup>
@@ -114,9 +116,9 @@ export function Menubar({ calendarRef, onRefresh, currentDate, onDateChange }: M
 
           <div className="current-date-time">
             <Typography variant="h6" component="div">
-              {currentDate.toLocaleDateString('en-US', {
-                month: 'long',
-                year: 'numeric'
+              {currentDate.toLocaleDateString("en-US", {
+                month: "long",
+                year: "numeric",
               })}
             </Typography>
           </div>
@@ -134,13 +136,13 @@ export function Menubar({ calendarRef, onRefresh, currentDate, onDateChange }: M
                 <MenuItem value="timeGridDay">Day</MenuItem>
               </Select>
             </FormControl>
-            
+
             {applist.length > 0 && (
               <IconButton onClick={handleOpen} sx={{ mr: 1 }}>
                 <AppsIcon />
               </IconButton>
             )}
-            
+
             <Avatar
               sx={{
                 bgcolor: stringToColor(