Add schedule and requests screens with workdays fetching and navigation

app/profile.tsx

@@ -1,8 +1,10 @@
 import { Ionicons, MaterialCommunityIcons, MaterialIcons } from '@expo/vector-icons';
+import axios from 'axios';
+import { addDays, addMonths, endOfMonth, endOfWeek, format, getMonth, getYear, isSameDay, startOfMonth, startOfWeek, subMonths } from 'date-fns';
 import { useRouter } from 'expo-router';
 import * as SecureStore from 'expo-secure-store';
 import React, { useEffect, useState } from "react";
-import { StyleSheet, Text, TouchableOpacity, View } from "react-native";
+import { ScrollView, StyleSheet, Text, TouchableOpacity, View } from "react-native";
 
 const PRIMARY = '#A24BFA';
 const BG = '#0c0a0a';
@@ -17,6 +19,9 @@ export default function Profile() {
   const [email, setEmail] = useState('');
   const [userId, setUserId] = useState('');
   const [activeTab, setActiveTab] = useState('profile');
+  const [currentMonth, setCurrentMonth] = useState(new Date());
+  const [workdays, setWorkdays] = useState<any[]>([]);
+  const [loading, setLoading] = useState(false);
   const router = useRouter();
 
   useEffect(() => {
@@ -30,6 +35,38 @@ export default function Profile() {
     })();
   }, []);
 
+  useEffect(() => {
+    if (activeTab === 'schedule') {
+      fetchWorkdays();
+    }
+    // eslint-disable-next-line
+  }, [currentMonth, activeTab]);
+
+  async function fetchWorkdays() {
+    setLoading(true);
+    try {
+      const userCookie = await SecureStore.getItemAsync('cookie');
+      const year = getYear(currentMonth);
+      const month = getMonth(currentMonth) + 1;
+      const response = await axios.post(
+        'https://mymenu.mcdonalds.hu/api/UserDataApi/GetWorkDayMonthList',
+        { Data: { Year: year, Month: month } },
+        {
+          headers: {
+            'Content-Type': 'application/json',
+            'cookie': userCookie,
+            'origin': 'https://mymenu.mcdonalds.hu',
+          },
+        }
+      );
+      setWorkdays(response.data.data.Data || []);
+    } catch (e) {
+      setWorkdays([]);
+    } finally {
+      setLoading(false);
+    }
+  }
+
   async function handleLogout() {
     await SecureStore.deleteItemAsync('cookie');
     await SecureStore.deleteItemAsync('userId');
@@ -39,6 +76,73 @@ export default function Profile() {
     router.replace('/');
   }
 
+  function renderCalendar() {
+    const monthStart = startOfMonth(currentMonth);
+    const monthEnd = endOfMonth(monthStart);
+    const startDate = startOfWeek(monthStart, { weekStartsOn: 1 });
+    const endDate = endOfWeek(monthEnd, { weekStartsOn: 1 });
+    const today = new Date();
+    const rows = [];
+    let days = [];
+    let day = startDate;
+    let formattedDate = '';
+    while (day <= endDate) {
+      for (let i = 0; i < 7; i++) {
+        formattedDate = format(day, 'yyyy-MM-dd');
+        const wd = workdays.find(w => w.WorkDay?.slice(0, 10) === formattedDate);
+        let bg = 'rgba(24,20,28,0.7)';
+        let color = '#fff';
+        let borderWidth = 0;
+        if (isSameDay(day, today)) {
+          borderWidth = 2;
+          color = PRIMARY;
+        }
+        if (wd) {
+          bg = wd.color || 'deepskyblue';
+          color = '#222';
+        }
+        days.push(
+          <View key={day.toString()} style={{ flex: 1, aspectRatio: 1, margin: 2 }}>
+            <View style={{
+              backgroundColor: bg,
+              borderRadius: 8,
+              borderWidth,
+              borderColor: PRIMARY,
+              justifyContent: 'center',
+              alignItems: 'center',
+              flex: 1,
+            }}>
+              <Text style={{ color, fontWeight: isSameDay(day, today) ? 'bold' : 'normal' }}>{format(day, 'd')}</Text>
+              {wd && <Text style={{ color, fontSize: 10 }}>{wd.text}</Text>}
+            </View>
+          </View>
+        );
+        day = addDays(day, 1);
+      }
+      rows.push(<View key={day.toString()} style={{ flexDirection: 'row' }}>{days}</View>);
+      days = [];
+    }
+    return (
+      <View>
+        <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', marginBottom: 12 }}>
+          <TouchableOpacity onPress={() => setCurrentMonth(subMonths(currentMonth, 1))}><Ionicons name="chevron-back" size={28} color="#fff" /></TouchableOpacity>
+          <Text style={{ color: '#fff', fontSize: 18, fontWeight: 'bold' }}>{format(currentMonth, 'yyyy. MMMM')}</Text>
+          <TouchableOpacity onPress={() => setCurrentMonth(addMonths(currentMonth, 1))}><Ionicons name="chevron-forward" size={28} color="#fff" /></TouchableOpacity>
+        </View>
+        <View style={{ flexDirection: 'row', marginBottom: 4 }}>
+          {["H", "K", "Sz", "Cs", "P", "Szo", "V"].map(d => (
+            <Text key={d} style={{ flex: 1, color: '#bdbdbd', textAlign: 'center', fontWeight: 'bold' }}>{d}</Text>
+          ))}
+        </View>
+        {loading ? (
+          <Text style={{ color: '#fff', textAlign: 'center', marginTop: 24 }}>Betöltés…</Text>
+        ) : (
+          <View>{rows}</View>
+        )}
+      </View>
+    );
+  }
+
   function renderContent() {
     if (activeTab === 'profile') {
       return (
@@ -56,9 +160,12 @@ export default function Profile() {
       );
     } else if (activeTab === 'schedule') {
       return (
-        <View style={styles.card}>
-          <Text style={styles.value}>Beosztás funkció hamarosan…</Text>
-        </View>
+        <ScrollView style={{ width: '100%' }} contentContainerStyle={{ alignItems: 'center' }}>
+          <View style={styles.card}>
+            <Text style={styles.label}>Beosztás naptár</Text>
+            {renderCalendar()}
+          </View>
+        </ScrollView>
       );
     } else if (activeTab === 'requests') {
       return (