79 user dashboard 2

app/index.tsx

@@ -45,6 +45,9 @@ export default function HomeScreen(): ReactElement {
 
         <Link href="/(tabs)"
               style={linkStyle}>Go to main app features after login</Link>
+        <Link
+            href="/user-dashboard"
+            style={linkStyle}>User Dashboard Page</Link>
         <Link
             href="/(auth)/forgot-password"
             style={linkStyle}>Forgot Password Page</Link>

app/user-dashboard.tsx

@@ -1,63 +1,201 @@
-import React, {useEffect} from 'react';
-import { Image, StyleSheet, View, Text } from 'react-native';
-
-import ParallaxScrollView from '@/components/ParallaxScrollView';
+import React, {useCallback, useEffect, useRef, useState} from 'react';
+import {StyleSheet, SectionList} from 'react-native';
 import { supabase } from '@/supabaseClient';
 import {OptionToggle} from "@/components/dashboard/OptionToggle";
+import {AgendaList, Calendar, CalendarProvider, WeekCalendar} from "react-native-calendars";
+import {shiftData, ShiftData} from "@/data/dummyShiftData";
+import {MarkedDates} from "react-native-calendars/src/types";
+import {DayViewItem} from "@/components/DayViewItem";
+import {ThemedView} from "@/components/ThemedView";
+import {ThemedText} from "@/components/ThemedText";
+
+interface DateProps {
+  dateString: string,
+  day: number,
+  month: number,
+  timestamp: number,
+  year: number,
+}
+interface AgendaListProps {
+  title: string,
+  data: any[]
+}
+enum Timeframes {
+  Week = "Week",
+  Month = "Month"
+}
+const getMarkedDates = (shifts: ShiftData[], selectedDate: string) => {
+  let marked: MarkedDates = {};
+  shifts.forEach(({ date, id }) => {
+    if (!marked[date]) {
+      marked[date] = {
+        marked: true,
+        dots: [{
+          key: `${date}-${id}`,
+          color: 'black'
+        }]
+      };
+    } else {
+      marked[date].dots?.push({
+        key: `${date}-${id}`,
+        color: 'black'
+      })
+    }
+  });
+
+  marked[selectedDate] = {
+    ...(marked[selectedDate] || {}),
+    selected: true,
+    dots: [...(marked[selectedDate]?.dots || [])]
+  }
 
+  return marked;
+};
 export default function UserDashboard() {
-  const [selectedTimeframe, setSelectedTimeframe] = React.useState<string | undefined>();
-  const [selectedApprovalStatus, setSelectedApprovalStatus] = React.useState<string | undefined>();
+  const today = new Intl.DateTimeFormat('en-CA').format(new Date());
+  const timeframeOptions = [Timeframes.Month, Timeframes.Week];
+  const approvalStatusOptions = ['Pending', 'Approved', 'Denied'];
+  const [selectedTimeframe, setSelectedTimeframe] = useState<Timeframes | undefined>(timeframeOptions[0]);
+  const [selectedApprovalStatus, setSelectedApprovalStatus] = useState<string | undefined>(approvalStatusOptions[0]);
+  const [selectedDate, setSelectedDate] = useState<string>(today);
+  const [agendaListItems, setAgendaListItems] = useState<any[]>([]);
+  const [markedDates, setMarkedDates] = useState<MarkedDates>();
 
   useEffect(() => {
-    console.log(selectedApprovalStatus);
-  }, [selectedApprovalStatus]);
+    initializeAgendaItems();
+  }, []);
+
+  useEffect(() => {
+    setMarkedDates(getMarkedDates(shiftData, selectedDate))
+  }, [selectedDate]);
+
   useEffect(() => {
-    console.log(selectedTimeframe);
+    if (selectedTimeframe === Timeframes.Week) {
+      setSelectedDate(today);
+    }
   }, [selectedTimeframe]);
-  return (
-    <ParallaxScrollView
-      headerBackgroundColor={{ light: '#A1CEDC', dark: '#1D3D47' }}
-      headerImage={
-        <Image
-          source={require('@/assets/images/partial-react-logo.png')}
-          style={styles.reactLogo}
-        />
-      }>
+  const initializeAgendaItems = () => {
+    const items: AgendaListProps[] = [];
+    shiftData.forEach(shift => {
+      const existing = items.findIndex(item => item.title === shift.date);
+      const shiftItem = {
+        startTime: shift.startTime,
+        endTime: shift.endTime,
+        role: shift.role,
+        roomNumber: shift.roomNumber,
+        building: shift.building,
+        title: "Shift"
+      }
+      if (existing === -1) {
+        items.push({
+          title: shift.date,
+          data: [...[shiftItem]],
+        })
+      } else {
+        items[existing].data.push(shiftItem);
+      }
+    })
+    setAgendaListItems(items);
+  }
+
+  const isDateInCurrentWeek = (dateStr: string): boolean => {
+    const inputDate = new Date(dateStr);
+    const today = new Date();
 
+    const startOfWeek = new Date(today);
+    startOfWeek.setDate(today.getDate() - today.getDay());
+    startOfWeek.setHours(0, 0, 0, 0);
+
+    const endOfWeek = new Date(startOfWeek);
+    endOfWeek.setDate(startOfWeek.getDate() + 6);
+    endOfWeek.setHours(23, 59, 59, 999);
+
+    return inputDate >= startOfWeek && inputDate <= endOfWeek;
+  }
+  const handleDatePress = (date: DateProps) => {
+    setSelectedDate(date.dateString);
+  }
+
+  const renderItem = useCallback(({item}: any) => {
+    return <DayViewItem item={item}/>
+  }, []);
+
+  const agendaRef = useRef<SectionList>(null);
+  const scrollToEvent = (dateIndex: number, itemIndex: number) => {
+    if (agendaRef.current) {
+      agendaRef.current.scrollToLocation({
+        sectionIndex: dateIndex,
+        itemIndex: itemIndex,
+        animated: true,
+      });
+    }
+  };
+
+  return (
+    <ThemedView style={{flex: 1}}>
+      <CalendarProvider
+          date={selectedDate}
+          onDateChanged={setSelectedDate}
+          showTodayButton={false}
+      >
       {/* Schedule Title*/}
-      <View style={styles.scheduleContainer}>
-        <Text style={styles.scheduleTitle}>Schedule</Text>
+      <ThemedView style={styles.scheduleContainer}>
+        <ThemedText style={styles.scheduleTitle}>Schedule</ThemedText>
         <OptionToggle
-            options={['Week', 'Month']}
+            options={timeframeOptions.map(tf => tf.toString())}
             gap={8}
-            handleToggledOption={setSelectedTimeframe}
+            handleToggledOption={(value) => setSelectedTimeframe(value === Timeframes.Month.toString() ? Timeframes.Month : Timeframes.Week)}
         />
         <OptionToggle
-            options={['Pending', 'Approved', 'Denied']}
+            options={approvalStatusOptions}
             gap={4}
             handleToggledOption={setSelectedApprovalStatus}
         />
-      </View>
-
-      {/* Placeholder Box */}
-      <View style={styles.placeholderBox}>
-        <Text style={styles.placeholderText}>
-          Calendar Components Placeholder Box
-        </Text>
-      </View>
-    </ParallaxScrollView>
+      </ThemedView>
+      {
+        selectedTimeframe === Timeframes.Month ?
+            (
+              <Calendar
+                enableSwipeMonths={true}
+                markingType={"multi-dot"}
+                onDayPress={(day: DateProps) => handleDatePress(day)}
+                markedDates={markedDates}
+              />
+            )
+            : (
+              <WeekCalendar
+                markingType={'multi-dot'}
+                enableSwipeMonths={false}
+                onDayPress={(day: DateProps) => handleDatePress(day)}
+                markedDates={markedDates}
+                current={selectedDate}
+                initialDate={today}
+              />
+            )
+      }
+      <AgendaList
+          ref={agendaRef}
+          sections={selectedTimeframe === Timeframes.Month ?
+              agendaListItems :
+              agendaListItems.filter(item => {
+            return isDateInCurrentWeek(item.title);
+          })}
+          avoidDateUpdates={selectedTimeframe === Timeframes.Week}
+          renderItem={renderItem}
+          onLayout={() => scrollToEvent(0,0)}
+          contentContainerStyle={{paddingBottom: 50}}
+          infiniteListProps={{
+            itemHeight: 115,
+            titleHeight: 45,
+            visibleIndicesChangedDebounce: 250,
+          }}
+      />
+      </CalendarProvider>
+    </ThemedView>
   );
 }
 
 const styles = StyleSheet.create({
-  reactLogo: {
-    height: 178,
-    width: 290,
-    bottom: 0,
-    left: 0,
-    position: 'absolute',
-  },
   scheduleContainer: {
     margin: 16,
     alignItems: 'center',
@@ -67,15 +205,4 @@ const styles = StyleSheet.create({
     fontWeight: 'bold',
     marginBottom: 16,
   },
-  placeholderBox: {
-    marginTop: 16,
-    padding: 16,
-    backgroundColor: '#f0f0f0',
-    borderRadius: 8,
-    alignItems: 'center',
-  },
-  placeholderText: {
-    fontSize: 16,
-    color: 'black',
-  },
 });

components/DayViewItem.tsx

@@ -0,0 +1,38 @@
+import {Text, View} from "react-native";
+import React from "react";
+import {ThemedText} from "@/components/ThemedText";
+import {ThemedView} from "@/components/ThemedView";
+
+interface DayViewItemProps {
+    item: any,
+}
+
+export const DayViewItem = ({item}: DayViewItemProps) => {
+    const start = Number(item.startTime.split(':')[0]);
+    const end = Number(item.endTime.split(':')[0]);
+    const numHoursScheduled = end - start;
+    const setAMOrPM = (time: number) => time >= 12 ? "pm" : 'am';
+    const to12Hours = (time: number) =>  time > 12 ? time - 12 : time;
+    return (
+        <ThemedView>
+            <ThemedView lightColor={'#CFD8DC'} darkColor={'#CFD8DC'} style={{
+                marginBottom: 10,
+                width: '70%',
+                padding: 10,
+                paddingLeft: 20,
+                borderRadius: 20
+            }}>
+                <ThemedText style={{fontSize: 16}}>{item.role}</ThemedText>
+                <ThemedText style={{flexDirection: 'row', justifyContent: 'flex-start', fontSize: 12, color: '#3e3e3e'}}>
+                    <ThemedText>{item.building}: </ThemedText>
+                    <ThemedText>{item.roomNumber}</ThemedText>
+                </ThemedText>
+                <ThemedText style={{flexDirection: 'row', justifyContent: 'flex-start', fontSize: 16, marginVertical: 4}}>
+                    <ThemedText style={{fontWeight: 'bold'}}>{numHoursScheduled} HR</ThemedText>
+                    <ThemedText> | {`${to12Hours(start)}${setAMOrPM(start)} - ${to12Hours(end)}${setAMOrPM(end)}`}</ThemedText>
+                    <ThemedText>{item.duration}</ThemedText>
+                </ThemedText>
+            </ThemedView>
+        </ThemedView>
+    )
+}