changes to calendar and UI

contexts/CalendarContext.tsx

@@ -0,0 +1,194 @@
+// CalendarContext.tsx
+import React, { createContext, useContext, useState, ReactNode } from "react";
+
+// Define the CalendarEvent interface
+export interface CalendarEvent {
+  id?: number; // Unique identifier for the event
+  user?: string;
+  title: string; // Event title or name
+  description?: string; // Optional description for the event
+  start: Date; // Start date and time of the event
+  end: Date; // End date and time of the event
+  location?: string; // Optional event location
+  allDay?: boolean; // Specifies if the event lasts all day
+  color?: string; // Optional color to represent the event
+  participants?: string[]; // Optional list of participants or attendees
+  private?: boolean;
+}
+
+// Define the context type
+interface CalendarContextType {
+  events: CalendarEvent[];
+  familyEvents: CalendarEvent[];
+  addEvent: (event: CalendarEvent) => void; // Function to add an event
+  removeEvent: (id: number) => void; // Function to remove an event by ID
+  updateEvent: (changes: Partial<CalendarEvent>, id?: number) => void;
+}
+
+// Create the CalendarContext
+const CalendarContext = createContext<CalendarContextType | undefined>(
+  undefined
+);
+
+// Create a provider component
+export const CalendarProvider: React.FC<{ children: ReactNode }> = ({
+  children,
+}) => {
+  const [events, setEvents] = useState<CalendarEvent[]>([
+    {
+      id: 1,
+      title: "Team Meeting",
+      description: "Discuss project milestones and deadlines.",
+      start: new Date("2024-09-15T10:00:00"),
+      end: new Date("2024-09-15T11:00:00"),
+      location: "Office Conference Room",
+      allDay: false,
+      color: "#FF5733",
+      participants: ["Alice", "Bob", "Charlie"],
+    },
+    {
+      id: 2,
+      title: "Doctor's Appointment",
+      description: "Annual check-up with Dr. Smith.",
+      start: new Date("2024-09-20T14:30:00"),
+      end: new Date("2024-09-20T15:30:00"),
+      location: "Health Clinic",
+      allDay: false,
+      color: "#33FF57",
+      participants: ["You"],
+    },
+    {
+      id: 3,
+      title: "Birthday Party",
+      description: "Celebrating Sarah's 30th birthday.",
+      start: new Date("2024-09-25T18:00:00"),
+      end: new Date("2024-09-25T21:00:00"),
+      location: "Sarah's House",
+      allDay: false,
+      color: "#3357FF",
+      participants: ["You", "Sarah", "Tom", "Lily"],
+    },
+    {
+      id: 4,
+      title: "Project Deadline",
+      description: "Final submission for the project.",
+      start: new Date("2024-10-01T00:00:00"),
+      end: new Date("2024-10-01T23:59:00"),
+      location: "Online",
+      allDay: false,
+      color: "#FF33A1",
+      participants: ["You"],
+    },
+    {
+      id: 5,
+      title: "Halloween Costume Party",
+      description: "Join us for a spooky night of fun!",
+      start: new Date("2024-10-31T19:00:00"),
+      end: new Date("2024-10-31T23:00:00"),
+      location: "Downtown Club",
+      allDay: false,
+      color: "#FFB733",
+      participants: ["You", "Friends"],
+    },
+  ]);
+
+  const [familyEvents, setFamilyEvents] = useState<CalendarEvent[]>([
+    {
+      id: 1,
+      user: "jakesId",
+      title: "Team Meeting",
+      description: "Discuss project milestones and deadlines.",
+      start: new Date("2024-09-10T10:00:00"),
+      end: new Date("2024-09-10T11:00:00"),
+      location: "Office Conference Room",
+      allDay: false,
+      color: "#FF5733",
+      participants: ["Alice", "Bob", "Charlie"],
+    },
+    {
+      id: 2,
+      user: "mikesId",
+      title: "Doctor's Appointment",
+      description: "Annual check-up with Dr. Smith.",
+      start: new Date("2024-09-21T14:30:00"),
+      end: new Date("2024-09-21T15:30:00"),
+      location: "Health Clinic",
+      allDay: false,
+      color: "#33FF57",
+      participants: ["You"],
+    },
+    {
+      id: 3,
+      user: "jakesId",
+      title: "Birthday Party",
+      description: "Celebrating Sarah's 30th birthday.",
+      start: new Date("2024-09-5T18:00:00"),
+      end: new Date("2024-09-5T21:00:00"),
+      location: "Sarah's House",
+      allDay: false,
+      color: "#3357FF",
+      participants: ["You", "Sarah", "Tom", "Lily"],
+    },
+    {
+      id: 4,
+      user: "davidsId",
+      title: "Project Deadline",
+      description: "Final submission for the project.",
+      start: new Date("2024-10-03T00:00:00"),
+      end: new Date("2024-10-03T23:59:00"),
+      location: "Online",
+      allDay: false,
+      color: "#FF33A1",
+      participants: ["You"],
+    },
+    {
+      id: 5,
+      user: "jakesId",
+      title: "Halloween Costume Party",
+      description: "Join us for a spooky night of fun!",
+      start: new Date("2024-10-02T19:00:00"),
+      end: new Date("2024-10-02T23:00:00"),
+      location: "Downtown Club",
+      allDay: false,
+      color: "#FFB733",
+      participants: ["You", "Friends"],
+    },
+  ]);
+
+  // Function to add an event
+  const addEvent = (event: CalendarEvent) => {
+    event.id = events.length + 1;
+    setEvents((prevEvents) => [...prevEvents, event]);
+  };
+
+  // Function to remove an event by ID
+  const removeEvent = (id: number) => {
+    setEvents((prevEvents) => prevEvents.filter((event) => event.id !== id));
+  };
+
+  // Function to update an event
+  const updateEvent = ( changes: Partial<CalendarEvent>, id?: number) => {
+    setEvents((prevEvents) =>
+      prevEvents.map((event) =>
+        event.id === id ? { ...event, ...changes } : event
+      )
+    );
+  };
+
+  return (
+    <CalendarContext.Provider
+      value={{ events, addEvent, removeEvent, updateEvent, familyEvents }}
+    >
+      {children}
+    </CalendarContext.Provider>
+  );
+};
+
+// Custom hook to use the CalendarContext
+export const useCalendarContext = () => {
+  const context = useContext(CalendarContext);
+  if (!context) {
+    throw new Error("useCalendar must be used within a CalendarProvider");
+  }
+  return context;
+};

contexts/GroceryContext.tsx

@@ -221,13 +221,13 @@ export const GroceryProvider: React.FC<{ children: React.ReactNode }> = ({
     return bestMatchCategory;
   };
 
-  const updateGroceryItem = (id: number, changes: Partial<IGrocery>) => {
-    setGroceries((prevGroceries) =>
-      prevGroceries.map((grocery) =>
-        grocery.id === id ? { ...grocery, ...changes } : grocery
-      )
-    );
-  };
+    const updateGroceryItem = (id: number, changes: Partial<IGrocery>) => {
+      setGroceries((prevGroceries) =>
+        prevGroceries.map((grocery) =>
+          grocery.id === id ? { ...grocery, ...changes } : grocery
+        )
+      );
+    };
 
   return (
     <GroceryContext.Provider