leonardo/mariani_mobile
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

- Refactor Profile and Login screens to use AuthContext for user data

Browse Source 
- Enhance RequestPermitModal with multiple time-off types and validation
- Implement CalendarWidget for visualizing time-off requests
- Improve API error handling and token management
- Add utility functions for consistent date and time formatting
- Clean up unused mock data and update types
This commit is contained in:
leonardo
2025-12-10 18:21:08 +01:00
parent 49b6ecadb2
commit b9807f6cc2
13 changed files with 503 additions and 343 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
app/(protected)/_layout.tsx
View File

@ -64,6 +64,7 @@ export default function ProtectedLayout() {
tabBarIcon: ({ color, size }) => <FileText color={color} size={24} />, tabBarIcon: ({ color, size }) => <FileText color={color} size={24} />,
}} }}
/> />
{/* // TODO: Rimuovere all'utente e mostrare solo a admin */}
<Tabs.Screen <Tabs.Screen
name="automation" name="automation"
options={{ options={{
@ -71,7 +72,7 @@ export default function ProtectedLayout() {
tabBarIcon: ({ color, size }) => <Zap color={color} size={24} />, tabBarIcon: ({ color, size }) => <Zap color={color} size={24} />,
}} }}
/> />
{/* TODO: Da rimuovere */} {/* TODO: Dovrebbe essere rimosso, va rivisto layout */}
<Tabs.Screen <Tabs.Screen
name="profile" name="profile"
options={{ options={{

16
app/(protected)/index.tsx
View File

@ -1,11 +1,13 @@
import { useRouter } from 'expo-router'; import { useRouter } from 'expo-router';
import { AlertTriangle, Bell, CheckCircle2, FileText, QrCode, User } from 'lucide-react-native'; import { AlertTriangle, CheckCircle2, FileText, QrCode, User } from 'lucide-react-native';
import React from 'react'; import React, { useContext } from 'react';
import { ScrollView, Text, TouchableOpacity, View } from 'react-native'; import { ScrollView, Text, TouchableOpacity, View } from 'react-native';
import { ATTENDANCE_DATA, DOCUMENTS_DATA, MOCK_USER } from '../../data/data'; import { ATTENDANCE_DATA, DOCUMENTS_DATA } from '@/data/data';
import { AuthContext } from '@/utils/authContext';
export default function HomeScreen() { export default function HomeScreen() {
const router = useRouter(); const router = useRouter();
const { user } = useContext(AuthContext);
const incompleteTasks = ATTENDANCE_DATA.filter(item => item.status === 'incomplete'); const incompleteTasks = ATTENDANCE_DATA.filter(item => item.status === 'incomplete');
return ( return (
@ -16,15 +18,11 @@ export default function HomeScreen() {
<View className="flex-row items-center gap-4"> <View className="flex-row items-center gap-4">
<View> <View>
<Text className="text-teal-100 text-lg font-medium uppercase tracking-wider mb-1">Benvenuto</Text> <Text className="text-teal-100 text-lg font-medium uppercase tracking-wider mb-1">Benvenuto</Text>
<Text className="text-white text-3xl font-bold">{MOCK_USER.name} {MOCK_USER.surname}</Text> <Text className="text-white text-3xl font-bold">{user?.name} {user?.surname}</Text>
<Text className="text-teal-200">{MOCK_USER.role}</Text> <Text className="text-xl text-teal-200">{user?.role}</Text>
</View> </View>
</View> </View>
<View className="flex-row gap-4"> <View className="flex-row gap-4">
<TouchableOpacity className="relative p-3 bg-white/10 rounded-full active:bg-white/20">
<Bell size={28} color="white" />
<View className="absolute top-2.5 right-3 w-3 h-3 bg-red-500 rounded-full border-2 border-[#099499]" />
</TouchableOpacity>
<TouchableOpacity className="p-3 bg-white/10 rounded-full active:bg-white/20" onPress={() => router.push('/profile')}> <TouchableOpacity className="p-3 bg-white/10 rounded-full active:bg-white/20" onPress={() => router.push('/profile')}>
<User size={28} color="white" /> <User size={28} color="white" />
</TouchableOpacity> </TouchableOpacity>

239
app/(protected)/permits/index.tsx
View File

@ -1,37 +1,75 @@
import React, { useState } from 'react'; import React, { JSX, useEffect, useState } from 'react';
import { PERMITS_DATA } from '@/data/data'; import { Calendar as CalendarIcon, CalendarX, Clock, Plus, Thermometer } from 'lucide-react-native';
import { Calendar as CalendarIcon, ChevronLeft, ChevronRight, Clock, Plus, Thermometer, X } from 'lucide-react-native'; import { Alert, ScrollView, Text, TouchableOpacity, View, ActivityIndicator, RefreshControl } from 'react-native';
import { ScrollView, Text, TouchableOpacity, View } from 'react-native'; import { TimeOffRequest, TimeOffRequestType } from '@/types/types';
import RequestPermitModal from '@/components/RequestPermitModal'; import RequestPermitModal from '@/components/RequestPermitModal';
import CalendarWidget from '@/components/CalendarWidget';
import api from '@/utils/api';
import { formatDate, formatTime } from '@/utils/dateTime';
// Icon Mapping
const typeIcons: Record<string, (color: string) => JSX.Element> = {
Ferie: (color) => <CalendarIcon size={24} color={color} />,
Permesso: (color) => <Clock size={24} color={color} />,
Malattia: (color) => <Thermometer size={24} color={color} />,
Assenza: (color) => <CalendarX size={24} color={color} />,
};
export default function PermitsScreen() { export default function PermitsScreen() {
const [currentDate, setCurrentDate] = useState(new Date(2025, 11, 1)); // Dicembre 2025 Mock
const [showModal, setShowModal] = useState(false); const [showModal, setShowModal] = useState(false);
const [permits, setPermits] = useState<TimeOffRequest[]>([]);
const [types, setTypes] = useState<TimeOffRequestType[]>([]);
const [isLoading, setIsLoading] = useState(true);
const [refreshing, setRefreshing] = useState(false);
// Helpers per il calendario const fetchPermits = async () => {
const daysInMonth = new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 0).getDate(); try {
const firstDayOfMonth = new Date(currentDate.getFullYear(), currentDate.getMonth(), 1).getDay(); // 0 = Sun if (!refreshing) setIsLoading(true);
const adjustedFirstDay = firstDayOfMonth === 0 ? 6 : firstDayOfMonth - 1; // 0 = Mon
// Fetch Permits
const getEventForDay = (day: number) => { const response = await api.get('/time-off-request/list');
const dateStr = `${currentDate.getFullYear()}-${String(currentDate.getMonth() + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`; setPermits(response.data);
return PERMITS_DATA.find(leave => { // Fetch Types
if (leave.type === 'Permesso') return leave.startDate === dateStr; const typesResponse = await api.get('/time-off-request/get-types');
return dateStr >= leave.startDate && dateStr <= (leave.endDate || leave.startDate); setTypes(typesResponse.data);
}); } catch (error) {
console.error('Errore nel recupero dei permessi:', error);
Alert.alert('Errore', 'Impossibile recuperare i permessi. Riprova più tardi.');
} finally {
setIsLoading(false);
setRefreshing(false);
}
}; };
const weekDays = ['Lun', 'Mar', 'Mer', 'Gio', 'Ven', 'Sab', 'Dom']; useEffect(() => {
fetchPermits();
}, []);
const onRefresh = () => {
setRefreshing(true);
fetchPermits();
};
// TODO: Migliorare schermata di caricamento -> spostarla in un componente a parte
if (isLoading && !refreshing) {
return (
<View className="flex-1 justify-center items-center bg-gray-50">
<ActivityIndicator size="large" color="#099499" />
<Text className="text-gray-500 mt-2">Caricamento...</Text>
</View>
);
}
return ( return (
<View className="flex-1 bg-gray-50"> <View className="flex-1 bg-gray-50">
<RequestPermitModal <RequestPermitModal
visible={showModal} visible={showModal}
onClose={() => setShowModal(false)} types={types}
onSubmit={(data) => console.log('Richiesta:', data)} onClose={() => setShowModal(false)}
onSubmit={(data) => { console.log('Richiesta:', data); fetchPermits(); }}
/> />
{/* Header */} {/* Header */}
<View className="bg-white p-6 pt-16 shadow-sm border-b border-gray-100 flex-row justify-between items-center"> <View className="bg-white p-6 pt-16 shadow-sm border-b border-gray-100 flex-row justify-between items-center">
<View> <View>
@ -40,132 +78,57 @@ export default function PermitsScreen() {
</View> </View>
</View> </View>
<ScrollView contentContainerStyle={{ padding: 20, paddingBottom: 100, gap: 24 }} showsVerticalScrollIndicator={false}> <ScrollView
contentContainerStyle={{ padding: 20, paddingBottom: 100, gap: 24 }}
showsVerticalScrollIndicator={false}
refreshControl={
<RefreshControl refreshing={refreshing} onRefresh={onRefresh} colors={['#099499']} />
}
>
{/* Calendar Widget */} {/* Calendar Widget */}
<View className="bg-white rounded-[2rem] p-6 shadow-sm border border-gray-100"> <CalendarWidget events={permits} types={types} />
<View className="flex-row justify-between items-center mb-6">
<TouchableOpacity className="p-2 bg-gray-50 rounded-full">
<ChevronLeft size={24} color="#374151" />
</TouchableOpacity>
<Text className="text-xl font-bold text-gray-800 capitalize">
{currentDate.toLocaleString('it-IT', { month: 'long', year: 'numeric' })}
</Text>
<TouchableOpacity className="p-2 bg-gray-50 rounded-full">
<ChevronRight size={24} color="#374151" />
</TouchableOpacity>
</View>
{/* Week Header */}
<View className="flex-row justify-between mb-4">
{weekDays.map(day => (
<Text key={day} className="w-10 text-center text-xs font-bold text-gray-400 uppercase">{day}</Text>
))}
</View>
{/* Days Grid */}
<View className="flex-row flex-wrap gap-y-4">
{/* Empty slots for alignment */}
{Array.from({ length: adjustedFirstDay }).map((_, i) => (
<View key={`empty-${i}`} style={{ width: '14.28%' }} />
))}
{/* Days */}
{Array.from({ length: daysInMonth }).map((_, i) => {
const day = i + 1;
const event = getEventForDay(day);
let bgClass = 'bg-transparent';
let textClass = 'text-gray-700';
let borderClass = 'border-transparent';
if (event) {
if (event.type === 'Ferie') {
bgClass = 'bg-purple-100';
textClass = 'text-purple-700 font-bold';
borderClass = 'border-purple-200';
} else if (event.type === 'Permesso') {
bgClass = 'bg-orange-100';
textClass = 'text-orange-700 font-bold';
borderClass = 'border-orange-200';
} else if (event.type === 'Malattia') {
bgClass = 'bg-red-100';
textClass = 'text-red-700 font-bold';
borderClass = 'border-red-200';
}
}
return (
<View key={day} style={{ width: '14.28%' }} className="items-center">
<View className={`w-10 h-10 rounded-full items-center justify-center border ${bgClass} ${borderClass}`}>
<Text className={`text-sm ${textClass}`}>{day}</Text>
</View>
</View>
);
})}
</View>
{/* Legenda */}
<View className="flex-row justify-center gap-4 mt-8 pt-4 border-t border-gray-100">
<View className="flex-row items-center">
<View className="w-3 h-3 rounded-full bg-purple-500 mr-2" />
<Text className="text-xs font-medium text-gray-500">Ferie</Text>
</View>
<View className="flex-row items-center">
<View className="w-3 h-3 rounded-full bg-orange-500 mr-2" />
<Text className="text-xs font-medium text-gray-500">Permessi</Text>
</View>
<View className="flex-row items-center">
<View className="w-3 h-3 rounded-full bg-red-500 mr-2" />
<Text className="text-xs font-medium text-gray-500">Malattia</Text>
</View>
</View>
</View>
{/* Lista Richieste Recenti */} {/* Lista Richieste Recenti */}
<View> <View>
<Text className="text-lg font-bold text-gray-800 mb-4 px-1">Le tue richieste</Text> {permits.length === 0 ? (
<View className="gap-4"> <Text className="text-center text-gray-500 mt-8">Nessuna richiesta di permesso trovata.</Text>
{PERMITS_DATA.map((item) => ( ) : (
<View key={item.id} className="bg-white p-5 rounded-3xl shadow-sm border border-gray-100 flex-row justify-between items-center"> <View className="gap-4">
<View className="flex-row items-center gap-4"> <Text className="text-xl font-bold text-gray-800 px-1">Le tue richieste</Text>
<View className={`p-4 rounded-2xl ${ {/* TODO: Aggiungere una paginazione con delle freccette affianco? */}
item.type === 'Ferie' ? 'bg-purple-50' : {permits.map((item) => (
item.type === 'Permesso' ? 'bg-orange-50' : 'bg-red-50' <View key={item.id} className="bg-white p-5 rounded-3xl shadow-sm border border-gray-100 flex-row justify-between items-center">
}`}> <View className="flex-row items-center gap-4">
{item.type === 'Ferie' && <CalendarIcon size={24} color="#9333ea" />} <View className={`p-4 rounded-2xl`} style={{ backgroundColor: item.timeOffRequestType.color ? `${item.timeOffRequestType.color}25` : '#E5E7EB' }}>
{item.type === 'Permesso' && <Clock size={24} color="#ea580c" />} {typeIcons[item.timeOffRequestType.name]?.(item.timeOffRequestType.color)}
{item.type === 'Malattia' && <Thermometer size={24} color="#dc2626" />} </View>
</View> <View>
<View> <Text className="font-bold text-gray-800 text-lg">{item.timeOffRequestType.name}</Text>
<Text className="font-bold text-gray-800 text-lg">{item.type}</Text> <Text className="text-base text-gray-500 mt-0.5">
<Text className="text-sm text-gray-500 mt-0.5"> {formatDate(item.start_date?.toLocaleString())} {item.end_date ? `- ${formatDate(item.end_date.toLocaleString())}` : ''}
{item.startDate} {item.endDate ? `- ${item.endDate}` : ''}
</Text>
{item.type === 'Permesso' && (
<Text className="text-xs text-orange-600 font-bold mt-1">
{item.startTime} - {item.endTime}
</Text> </Text>
)} {item.timeOffRequestType.name === 'Permesso' && (
<Text className="text-sm text-orange-600 font-bold mt-1">
{formatTime(item.start_time)} - {formatTime(item.end_time)}
</Text>
)}
</View>
</View>
<View className={`px-3 py-1.5 rounded-lg ${item.status ? 'bg-green-100' : 'bg-yellow-100'}`}>
<Text className={`text-xs font-bold uppercase tracking-wide ${item.status ? 'text-green-700' : 'text-yellow-700'}`}>
{item.status ? 'Approvato' : 'In Attesa'}
</Text>
</View> </View>
</View> </View>
<View className={`px-3 py-1.5 rounded-lg ${ ))}
item.status === 'Approvato' ? 'bg-green-100' : </View>
item.status === 'In Attesa' ? 'bg-yellow-100' : 'bg-red-100' )}
}`}>
<Text className={`text-xs font-bold uppercase tracking-wide ${
item.status === 'Approvato' ? 'text-green-700' :
item.status === 'In Attesa' ? 'text-yellow-700' : 'text-red-700'
}`}>
{item.status}
</Text>
</View>
</View>
))}
</View>
</View> </View>
</ScrollView> </ScrollView>
{/* FAB */} {/* FAB */}
<TouchableOpacity <TouchableOpacity
onPress={() => setShowModal(true)} onPress={() => setShowModal(true)}
className="absolute bottom-8 right-6 w-16 h-16 bg-[#099499] rounded-full shadow-lg items-center justify-center active:scale-90" className="absolute bottom-8 right-6 w-16 h-16 bg-[#099499] rounded-full shadow-lg items-center justify-center active:scale-90"
> >

14
app/(protected)/profile/index.tsx
View File

@ -7,13 +7,11 @@ import { AuthContext } from '@/utils/authContext';
export default function ProfileScreen() { export default function ProfileScreen() {
const authContext = useContext(AuthContext); const authContext = useContext(AuthContext);
const { user } = authContext;
const router = useRouter(); const router = useRouter();
// Dati fittizi aggiuntivi (possono essere presi dal backend in seguito) // Genera le iniziali dell'utente
const email = `${MOCK_USER.name.toLowerCase().replace(/\s+/g, '.')}@example.com`; const initials = `${user?.name?.[0] ?? ''}${user?.surname?.[0] ?? ''}`.toUpperCase();
const phone = '+39 345 123 4567';
const initials = MOCK_USER.name.split(' ').map(n => n[0]).slice(0, 2).join('').toUpperCase();
return ( return (
<View className="flex-1 bg-[#099499]"> <View className="flex-1 bg-[#099499]">
@ -31,7 +29,7 @@ export default function ProfileScreen() {
</View> </View>
<View> <View>
<Text className="text-teal-100 text-lg font-medium uppercase tracking-wider mb-1">Profilo</Text> <Text className="text-teal-100 text-lg font-medium uppercase tracking-wider mb-1">Profilo</Text>
<Text className="text-white text-2xl font-bold">{MOCK_USER.name} {MOCK_USER.surname}</Text> <Text className="text-white text-2xl font-bold">{user?.name} {user?.surname}</Text>
</View> </View>
</View> </View>
</View> </View>
@ -56,7 +54,7 @@ export default function ProfileScreen() {
<View> <View>
{/* Label e valore ingranditi */} {/* Label e valore ingranditi */}
<Text className="text-lg text-gray-700 font-bold">Email</Text> <Text className="text-lg text-gray-700 font-bold">Email</Text>
<Text className="text-gray-500 text-base">{email}</Text> <Text className="text-gray-500 text-base">{user?.email}</Text>
</View> </View>
</View> </View>
@ -77,7 +75,7 @@ export default function ProfileScreen() {
</View> </View>
<View> <View>
<Text className="text-lg text-gray-700 font-bold">Ruolo</Text> <Text className="text-lg text-gray-700 font-bold">Ruolo</Text>
<Text className="text-gray-500 text-base capitalize">{MOCK_USER.role}</Text> <Text className="text-gray-500 text-base capitalize">{user?.role}</Text>
</View> </View>
</View> </View>
</View> </View>

64
app/login.tsx
View File

@ -8,24 +8,66 @@ import {
TextInput, TextInput,
TouchableOpacity, TouchableOpacity,
View, View,
Image Image,
Alert
} from 'react-native'; } from 'react-native';
import { AuthContext } from '@/utils/authContext'; import { AuthContext } from '@/utils/authContext';
import api from '@/utils/api';
export default function LoginScreen() { export default function LoginScreen() {
const authContext = useContext(AuthContext); const authContext = useContext(AuthContext);
const [email, setEmail] = useState(''); const [username, setUsername] = useState('');
const [password, setPassword] = useState(''); const [password, setPassword] = useState('');
const [showPassword, setShowPassword] = useState(false); const [showPassword, setShowPassword] = useState(false);
const [isLoading, setIsLoading] = useState(false); const [isLoading, setIsLoading] = useState(false);
const handleLogin = () => { const handleLogin = async () => {
// TODO: Implementa toast o messaggio di errore più user-friendly
if (!username || !password) {
Alert.alert("Attenzione", "Inserisci username e password");
return;
}
setIsLoading(true); setIsLoading(true);
// Simulazione login
setTimeout(() => { try {
console.log("Tentativo login con:", username);
// Chiamata vera al backend
const response = await api.post("/user/login", {
username: username,
password: password
});
const { token, user } = response.data;
console.log("Login successo, token ricevuto.");
console.log("Dati utente:", user);
// Passiamo token e dati utente al context che gestirà salvataggio e redirect
authContext.logIn(token, user);
} catch (error: any) {
console.error("Login Error:", error);
let message = "Si è verificato un errore durante l'accesso.";
if (error.response) {
// Errore dal server (es. 401 Credenziali errate)
if (error.response.status === 401) {
message = "Credenziali non valide.";
} else {
message = `Errore Server: ${error.response.data.message || error.response.status}`;
}
} else if (error.request) {
// Server non raggiungibile
message = "Impossibile contattare il server. Controlla la connessione.";
}
Alert.alert("Login Fallito", message);
} finally {
setIsLoading(false); setIsLoading(false);
authContext.logIn(); }
}, 1500);
}; };
return ( return (
@ -47,17 +89,17 @@ export default function LoginScreen() {
> >
<ScrollView showsVerticalScrollIndicator={false} className="h-full"> <ScrollView showsVerticalScrollIndicator={false} className="h-full">
<View className="gap-6 flex flex-col" style={{ gap: '1.5rem' }}> <View className="gap-6 flex flex-col" style={{ gap: '1.5rem' }}>
{/* Input Email */} {/* Input Username / Email */}
<View> <View>
<Text className="text-gray-700 text-lg font-bold mb-3 ml-1">Email o Username</Text> <Text className="text-gray-700 text-lg font-bold mb-3 ml-1">Username o Email</Text>
<View className="flex-row items-center bg-gray-50 border border-gray-100 rounded-2xl h-16 px-4 flex"> <View className="flex-row items-center bg-gray-50 border border-gray-100 rounded-2xl h-16 px-4 flex">
<Mail size={24} color="#9ca3af" /> <Mail size={24} color="#9ca3af" />
<TextInput <TextInput
className="flex-1 ml-4 text-gray-800 text-lg font-medium h-full w-full" className="flex-1 ml-4 text-gray-800 text-lg font-medium h-full w-full"
placeholder="mario.rossi@esempio.com" placeholder="mario.rossi@esempio.com"
placeholderTextColor="#9ca3af" placeholderTextColor="#9ca3af"
value={email} value={username}
onChangeText={setEmail} onChangeText={setUsername}
autoCapitalize="none" autoCapitalize="none"
keyboardType="email-address" keyboardType="email-address"
/> />

109
components/CalendarWidget.tsx Normal file
View File

@ -0,0 +1,109 @@
import React, { useState } from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
import { ChevronLeft, ChevronRight } from 'lucide-react-native';
import { TimeOffRequest, TimeOffRequestType } from '@/types/types';
interface CalendarWidgetProps {
events: TimeOffRequest[];
types: TimeOffRequestType[];
}
export default function CalendarWidget({ events, types }: CalendarWidgetProps) {
const [currentDate, setCurrentDate] = useState(new Date());
// Helpers per il calendario
const daysInMonth = new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 0).getDate();
const firstDayOfMonth = new Date(currentDate.getFullYear(), currentDate.getMonth(), 1).getDay(); // 0 = Sun
const adjustedFirstDay = firstDayOfMonth === 0 ? 6 : firstDayOfMonth - 1; // 0 = Mon
const weekDays = ['Lun', 'Mar', 'Mer', 'Gio', 'Ven', 'Sab', 'Dom'];
const changeMonth = (increment: number) => {
const newDate = new Date(currentDate.setMonth(currentDate.getMonth() + increment));
setCurrentDate(new Date(newDate));
};
const getEventForDay = (day: number) => {
const year = currentDate.getFullYear();
const month = String(currentDate.getMonth() + 1).padStart(2, '0');
const dayStr = String(day).padStart(2, '0');
const dateStr = `${year}-${month}-${dayStr}`;
return events.find(event => {
// Logica semplice: controlla se la data cade nel range
// Nota: per una logica perfetta sui range lunghi, servirebbe un controllo più approfondito
if (event.timeOffRequestType.name === 'Permesso') return event.start_date === dateStr;
const end = event.end_date || event.start_date;
return dateStr >= event.start_date && dateStr <= end;
});
};
return (
<View className="bg-white rounded-[2rem] p-6 shadow-sm border border-gray-100">
{/* Header Mese */}
<View className="flex-row justify-between items-center mb-6">
<TouchableOpacity
onPress={() => changeMonth(-1)}
className="p-2 bg-gray-50 rounded-full"
>
<ChevronLeft size={24} color="#374151" />
</TouchableOpacity>
<Text className="text-xl font-bold text-gray-800 capitalize">
{currentDate.toLocaleString('it-IT', { month: 'long', year: 'numeric' })}
</Text>
<TouchableOpacity
onPress={() => changeMonth(1)}
className="p-2 bg-gray-50 rounded-full"
>
<ChevronRight size={24} color="#374151" />
</TouchableOpacity>
</View>
{/* Week Header */}
<View className="flex-row justify-between mb-4">
{weekDays.map(day => (
<Text key={day} className="w-10 text-center text-xs font-bold text-gray-400 uppercase">{day}</Text>
))}
</View>
{/* Days Grid */}
<View className="flex-row flex-wrap gap-y-4">
{/* Empty slots for alignment */}
{Array.from({ length: adjustedFirstDay }).map((_, i) => (
<View key={`empty-${i}`} style={{ width: '14.28%' }} />
))}
{/* Days */}
{Array.from({ length: daysInMonth }).map((_, i) => {
const day = i + 1;
const event = getEventForDay(day);
let bgClass = 'bg-transparent';
let textClass = 'text-gray-700';
let borderClass = 'border-transparent';
const bgColor = event?.timeOffRequestType?.color ? `${event.timeOffRequestType.color}25` : 'transparent';
const borderColor = event?.timeOffRequestType?.color || 'transparent';
const textColor = event ? event.timeOffRequestType?.color : '#374151';
return (
<View key={day} style={{ width: '14.28%' }} className="items-center">
<View className={`w-10 h-10 rounded-full items-center justify-center border`} style={{backgroundColor: bgColor, borderColor: borderColor }}>
<Text className={`text-sm ${event ? 'font-bold' : ''}`} style={{ color: textColor }}>{day}</Text>
</View>
</View>
);
})}
</View>
{/* Legenda */}
<View className="flex-row flex-wrap justify-center gap-4 mt-8 pt-4 border-t border-gray-100">
{types.map((type) => (
<View key={type.id} className="flex-row items-center" >
<View className={`w-3 h-3 rounded-full mr-2`} style={{ backgroundColor: type.color }} />
<Text className="text-sm font-medium text-gray-500">{type.name}</Text>
</View>
))}
</View>
</View>
);
}

138
components/RequestPermitModal.tsx
View File

@ -1,19 +1,21 @@
import React, { useState } from 'react'; import React, { useState } from 'react';
import { View, Text, Modal, TouchableOpacity, TextInput, ScrollView } from 'react-native'; import { View, Text, Modal, TouchableOpacity, TextInput, ScrollView, Alert } from 'react-native';
import DateTimePicker, { DateType, useDefaultStyles, useDefaultClassNames } from 'react-native-ui-datepicker'; import DateTimePicker, { DateType, useDefaultStyles } from 'react-native-ui-datepicker';
import { PermitType } from '@/types/types'; import { TimeOffRequest, TimeOffRequestType } from '@/types/types';
import { X } from 'lucide-react-native'; import { X } from 'lucide-react-native';
import { TimePickerModal } from './TimePickerModal'; import { TimePickerModal } from './TimePickerModal';
import api from '@/utils/api';
interface RequestPermitModalProps { interface RequestPermitModalProps {
visible: boolean; visible: boolean;
types: TimeOffRequestType[];
onClose: () => void; onClose: () => void;
onSubmit: (data: any) => void; onSubmit: (data: any) => void;
} }
export default function RequestPermitModal({ visible, onClose, onSubmit }: RequestPermitModalProps) { export default function RequestPermitModal({ visible, types, onClose, onSubmit }: RequestPermitModalProps) {
const defaultStyles = useDefaultStyles(); const defaultStyles = useDefaultStyles();
const [type, setType] = useState<PermitType>('Ferie'); const [type, setType] = useState<TimeOffRequestType | undefined>(types[0]); // Default to first type
const [date, setDate] = useState<DateType>(); const [date, setDate] = useState<DateType>();
const [range, setRange] = useState<{ const [range, setRange] = useState<{
startDate: DateType; startDate: DateType;
@ -25,6 +27,74 @@ export default function RequestPermitModal({ visible, onClose, onSubmit }: Reque
const [startTime, setStartTime] = useState(''); const [startTime, setStartTime] = useState('');
const [endTime, setEndTime] = useState(''); const [endTime, setEndTime] = useState('');
// Funzione per resettare le selezioni di data
const clearCalendar = () => {
setDate(undefined);
setRange({ startDate: undefined, endDate: undefined });
setStartTime(''); setEndTime('');
setType(types[0]);
};
const saveRequest = async (requestData: any) => {
try {
// Chiamata API per salvare la richiesta
const response = await api.post('/time-off-request/save-request', requestData);
Alert.alert('Successo', 'La tua richiesta è stata inviata con successo.');
} catch (error) {
console.error('Errore nell\'invio della richiesta:', error);
Alert.alert('Errore', 'Impossibile inviare la richiesta. Riprova più tardi.');
}
};
// Funzione per inviare la richiesta
const handleSubmit = (
type: TimeOffRequestType | undefined,
date: DateType | undefined,
range: { startDate: DateType | undefined; endDate: DateType | undefined },
startTime: string,
endTime: string
) => {
if (!type) {
alert('Seleziona una tipologia di assenza.');
return;
}
// Validazioni
if (type.time_required === 0) {
if (!range.startDate && !range.endDate) {
alert('Seleziona almeno una data.');
return;
}
} else {
if (!date) {
alert('Seleziona una data.');
return;
}
if (!startTime || !endTime) {
alert('Seleziona l\'orario di inizio e fine.');
return;
} else if (startTime >= endTime) {
alert('L\'orario di fine deve essere successivo all\'orario di inizio.');
return;
}
}
// Costruzione oggetto request
const requestData = {
id_type: type.id,
start_date: type.time_required === 0 ? range.startDate : date,
end_date: type.time_required === 0 ? range.endDate : null,
start_time: type.time_required === 1 ? startTime : null,
end_time: type.time_required === 1 ? endTime : null,
};
saveRequest(requestData);
onSubmit(requestData);
onClose();
};
return ( return (
<Modal <Modal
visible={visible} visible={visible}
@ -46,34 +116,35 @@ export default function RequestPermitModal({ visible, onClose, onSubmit }: Reque
<View className="space-y-6 gap-6"> <View className="space-y-6 gap-6">
{/* Tipologia */} {/* Tipologia */}
<View> <View>
<Text className="text-base font-bold text-gray-700 mb-3">Tipologia Assenza</Text> <Text className="text-lg font-bold text-gray-700 mb-3">Tipologia Assenza</Text>
<View className="flex-row gap-3"> <ScrollView
{(['Ferie', 'Permesso', 'Malattia'] as PermitType[]).map((t) => ( horizontal
showsHorizontalScrollIndicator={false}
contentContainerStyle={{ paddingHorizontal: 0, gap: 12 }}
>
{types.map((t) => (
<TouchableOpacity <TouchableOpacity
key={t} key={t.id}
onPress={() => setType(t)} onPress={() => setType(t)}
className={`flex-1 py-4 rounded-xl border-2 items-center justify-center ${type === t className={`py-4 px-5 rounded-xl border-2 items-center justify-center ${type?.id === t.id ? 'border-[#099499] bg-teal-50' : 'border-gray-100 bg-white'
? 'border-[#099499] bg-teal-50'
: 'border-gray-100 bg-white'
}`} }`}
> >
<Text className={`text-sm font-bold ${type === t ? 'text-[#099499]' : 'text-gray-500' <Text className={`text-sm font-bold ${type?.id === t.id ? 'text-[#099499]' : 'text-gray-500'}`}>
}`}> {t.name}
{t}
</Text> </Text>
</TouchableOpacity> </TouchableOpacity>
))} ))}
</View> </ScrollView>
</View> </View>
{/* Date Selection */} {/* Date and Time Selection */}
{type !== 'Permesso' ? ( {type?.time_required === 0 ? (
<DateTimePicker <DateTimePicker
mode="range" mode="range"
startDate={range.startDate} startDate={range.startDate}
endDate={range.endDate} endDate={range.endDate}
onChange={(params) => setRange(params)} onChange={(params) => setRange(params)}
timeZone='Europe/Rome' timeZone='Universal'
locale='it' locale='it'
styles={{ styles={{
...defaultStyles, ...defaultStyles,
@ -86,7 +157,7 @@ export default function RequestPermitModal({ visible, onClose, onSubmit }: Reque
mode="single" mode="single"
date={date} date={date}
onChange={({ date }) => setDate(date)} onChange={({ date }) => setDate(date)}
timeZone='Europe/Rome' timeZone='Universal'
locale='it' locale='it'
styles={{ styles={{
...defaultStyles, ...defaultStyles,
@ -126,36 +197,37 @@ export default function RequestPermitModal({ visible, onClose, onSubmit }: Reque
<TimePickerModal <TimePickerModal
visible={showStartPicker} visible={showStartPicker}
initialDate={new Date()} initialDate={new Date()}
title="Seleziona Ora Inizio"
onConfirm={(time) => setStartTime(time)} onConfirm={(time) => setStartTime(time)}
onClose={() => setShowStartPicker(false)} onClose={() => setShowStartPicker(false)}
/> />
<TimePickerModal <TimePickerModal
visible={showEndPicker} visible={showEndPicker}
initialDate={new Date()} initialDate={new Date()}
title="Seleziona Ora Fine"
onConfirm={(time) => setEndTime(time)} onConfirm={(time) => setEndTime(time)}
onClose={() => setShowEndPicker(false)} onClose={() => setShowEndPicker(false)}
/> />
<View> <View className="flex-row gap-4">
<TouchableOpacity <TouchableOpacity
onPress={() => { onPress={() => {
onSubmit({ type, date, range, startTime, endTime }); clearCalendar();
onClose(); onClose();
}} }}
className="w-full py-4 bg-[#099499] rounded-2xl shadow-lg active:scale-[0.98]" className="flex-1 py-4 bg-gray-200 rounded-2xl shadow-sm active:bg-gray-300"
>
<Text className="text-gray-700 text-center font-bold text-lg">Annulla Richiesta</Text>
</TouchableOpacity>
<TouchableOpacity
onPress={() => {
handleSubmit(type, date, range, startTime, endTime);
}}
className="flex-1 py-4 bg-[#099499] rounded-2xl shadow-lg active:scale-[0.98]"
> >
<Text className="text-white text-center font-bold text-lg">Invia Richiesta</Text> <Text className="text-white text-center font-bold text-lg">Invia Richiesta</Text>
</TouchableOpacity> </TouchableOpacity>
<TouchableOpacity
onPress={() => {
console.log("Reset pressed");
onClose();
// TODO: deselect dates from calendar
}}
className="mt-2 bg-gray-200 rounded-xl py-4 flex-row justify-center items-center active:bg-gray-300"
>
<Text className="text-gray-700 font-bold text-lg ml-2">Annulla Richiesta</Text>
</TouchableOpacity>
</View> </View>
</View> </View>
</ScrollView> </ScrollView>

6
components/TimePickerModal.tsx
View File

@ -7,11 +7,12 @@ import dayjs from 'dayjs';
interface TimePickerModalProps { interface TimePickerModalProps {
visible: boolean; visible: boolean;
initialDate?: DateType; initialDate?: DateType;
title?: string;
onConfirm: (time: string) => void; onConfirm: (time: string) => void;
onClose: () => void; onClose: () => void;
} }
export const TimePickerModal = ({ visible, initialDate, onConfirm, onClose }: TimePickerModalProps) => { export const TimePickerModal = ({ visible, initialDate, title, onConfirm, onClose }: TimePickerModalProps) => {
const defaultStyles = useDefaultStyles(); const defaultStyles = useDefaultStyles();
const [selectedDate, setSelectedDate] = useState<DateType>(initialDate || new Date()); const [selectedDate, setSelectedDate] = useState<DateType>(initialDate || new Date());
@ -36,7 +37,8 @@ export const TimePickerModal = ({ visible, initialDate, onConfirm, onClose }: Ti
<View className="bg-white rounded-xl p-4 w-[90%] max-h-[400px]"> <View className="bg-white rounded-xl p-4 w-[90%] max-h-[400px]">
{/* Header con chiusura */} {/* Header con chiusura */}
<View className="flex-row justify-end items-center mb-4"> <View className="flex-row justify-between items-center mb-4">
<Text className="text-lg font-bold text-gray-800">{title}</Text>
<TouchableOpacity onPress={onClose} className="p-2 bg-gray-100 rounded-full"> <TouchableOpacity onPress={onClose} className="p-2 bg-gray-100 rounded-full">
<X size={20} color="#4b5563" /> <X size={20} color="#4b5563" />
</TouchableOpacity> </TouchableOpacity>

24
data/data.ts
View File

@ -1,15 +1,6 @@
import { UserData, AttendanceRecord, DocumentItem, OfficeItem, PermitRecord } from '@/types/types'; import { UserData, AttendanceRecord, DocumentItem, OfficeItem } from '@/types/types';
// --- MOCK DATA (File: data.ts) --- // --- MOCK DATA (File: data.ts) ---
export const MOCK_USER: UserData = {
name: "Mario",
surname: "Rossi",
username: "mario.rossi",
email: "mario.rossi@esempio.com",
role: "Tecnico Specializzato",
id: "EMP-8842"
};
export const ATTENDANCE_DATA: AttendanceRecord[] = [ export const ATTENDANCE_DATA: AttendanceRecord[] = [
{ id: 1, site: "Cantiere Ospedale A.", date: "03/12/2025", in: "08:00", out: "17:00", status: "complete" }, { id: 1, site: "Cantiere Ospedale A.", date: "03/12/2025", in: "08:00", out: "17:00", status: "complete" },
{ id: 2, site: "Uffici Centrali", date: "02/12/2025", in: "08:15", out: "17:15", status: "complete" }, { id: 2, site: "Uffici Centrali", date: "02/12/2025", in: "08:15", out: "17:15", status: "complete" },
@ -28,17 +19,4 @@ export const OFFICES_DATA: OfficeItem[] = [
{ id: 2, name: "Sala Riunioni", status: "offline", temp: 19, lights: false, power: 0 }, { id: 2, name: "Sala Riunioni", status: "offline", temp: 19, lights: false, power: 0 },
{ id: 3, name: "Amministrazione", status: "online", temp: 24, lights: true, power: 320 }, { id: 3, name: "Amministrazione", status: "online", temp: 24, lights: true, power: 320 },
{ id: 4, name: "Magazzino", status: "online", temp: 18, lights: false, power: 120 }, { id: 4, name: "Magazzino", status: "online", temp: 18, lights: false, power: 120 },
];
export const COLORS = {
primary: '#099499',
bg: '#f3f4f6',
white: '#ffffff',
text: '#1f2937',
};
export const PERMITS_DATA: PermitRecord[] = [
{ id: 1, type: 'Ferie', startDate: '2025-12-24', endDate: '2025-12-31', status: 'Approvato' },
{ id: 2, type: 'Permesso', startDate: '2025-12-10', startTime: '09:00', endTime: '11:00', status: 'In Attesa' },
{ id: 3, type: 'Malattia', startDate: '2025-11-15', endDate: '2025-11-16', status: 'Approvato' },
]; ];

32
types/types.ts
View File

@ -1,5 +1,7 @@
// --- TYPES & export INTERFACES (File: types.ts) --- // --- TYPES & export INTERFACES (File: types.ts) ---
import { DateType } from "react-native-ui-datepicker";
export interface UserData { export interface UserData {
name: string; name: string;
surname: string; surname: string;
@ -35,16 +37,24 @@ export interface OfficeItem {
power: number; power: number;
} }
export type ScreenName = 'home' | 'attendance' | 'documents' | 'smart-office' | 'profile'; export interface TimeOffRequestType {
export type PermitType = 'Ferie' | 'Permesso' | 'Malattia';
export interface PermitRecord {
id: number; id: number;
type: PermitType; name: string;
startDate: string; color: string;
endDate?: string; // Opzionale per permessi giornalieri abbreviation: string;
startTime?: string; // Solo per permessi time_required: number; // backend usa 0/1
endTime?: string; // Solo per permessi deleted: number; // backend usa 0/1
status: 'Approvato' | 'In Attesa' | 'Rifiutato'; }
export interface TimeOffRequest {
id: number;
id_type: number;
id_user: number;
start_date: DateType;
end_date?: DateType | null;
start_time?: string | null;
end_time?: string | null;
message?: string | null;
status: number;
timeOffRequestType: TimeOffRequestType;
} }

66
utils/api.ts
View File

@ -1,43 +1,55 @@
import axios from 'axios'; import axios from 'axios';
import AsyncStorage from '@react-native-async-storage/async-storage';
import * as SecureStore from 'expo-secure-store'; import * as SecureStore from 'expo-secure-store';
// CONFIGURAZIONE GATEWAY (Adatta questi valori al tuo DDEV) const API_BASE_URL = `http://10.0.2.2:32768/mobile`;
// Se sei su emulatore Android usa 10.0.2.2, se su iOS o fisico usa il tuo IP LAN (es 192.168.1.x) export const KEY_TOKEN = 'auth_key';
const GATEWAY_BASE_URL = "http://10.0.2.2:PORTA";
export const GATEWAY_ENDPOINT = `${GATEWAY_BASE_URL}/tuo_endpoint_gateway`;
export const GATEWAY_TOKEN = "il_tuo_token_statico_se_esiste";
// Crea un'istanza di axios
const api = axios.create({ const api = axios.create({
baseURL: API_BASE_URL,
headers: { headers: {
'Content-Type': 'application/json', 'Content-Type': 'application/json',
'Accept': 'application/json',
}, },
timeout: 10000, // 10 secondi timeout
}); });
// INTERCEPTOR: Configura ogni chiamata al volo // Interceptor: Aggiunge il token a OGNI richiesta se esiste
api.interceptors.request.use(async (config) => { api.interceptors.request.use(
try { async (config) => {
// 1. Cerchiamo se abbiamo già salvato l'URL finale del backend (post-gateway) const token = await SecureStore.getItemAsync(KEY_TOKEN);
const savedBaseUrl = await SecureStore.getItemAsync('App_URL');
if (savedBaseUrl) {
config.baseURL = savedBaseUrl;
} else {
// Se non c'è, usiamo il gateway come fallback o gestiamo l'errore
// (La logica di init nell'AuthContext dovrebbe averlo già settato)
config.baseURL = GATEWAY_BASE_URL;
}
// 2. Cerchiamo il token utente
const token = await SecureStore.getItemAsync('auth-token');
if (token) { if (token) {
// Adatta l'header in base al tuo backend (Bearer, x-access-tokens, etc.)
config.headers.Authorization = `Bearer ${token}`; config.headers.Authorization = `Bearer ${token}`;
} }
} catch (error) { console.log(`[API REQUEST] ${config.method?.toUpperCase()} ${config.url}`);
console.error("Errore interceptor:", error); return config;
},
(error) => {
return Promise.reject(error);
} }
return config; );
});
// Interceptor: Gestione errori globale (es. token scaduto)
api.interceptors.response.use(
(response) => response,
async (error) => {
const originalRequest = error.config;
if (error.response) {
console.error('[API ERROR]', error.response.status, error.response.data);
// Se riceviamo 401 (Unauthorized), potremmo voler fare il logout forzato
if (error.response.status === 401) {
// TODO: Qui potresti emettere un evento per disconnettere l'utente
await SecureStore.deleteItemAsync(KEY_TOKEN);
}
} else {
console.error('[API NETWORK ERROR]', error.message);
}
return Promise.reject(error);
}
);
export default api; export default api;

114
utils/authContext.tsx
View File

@ -1,10 +1,8 @@
import { createContext, PropsWithChildren, useContext, useEffect, useState } from 'react'; import { createContext, PropsWithChildren, useContext, useEffect, useState } from 'react';
import { SplashScreen, useRouter, useSegments } from 'expo-router'; import { SplashScreen, useRouter, useSegments } from 'expo-router';
import AsyncStorage from '@react-native-async-storage/async-storage';
import { UserData } from '@/types/types'; import { UserData } from '@/types/types';
import * as SecureStore from 'expo-secure-store'; import * as SecureStore from 'expo-secure-store';
import api, { GATEWAY_ENDPOINT, GATEWAY_TOKEN } from './api'; import api, { KEY_TOKEN } from './api';
import axios from 'axios';
type AuthState = { type AuthState = {
isAuthenticated: boolean; isAuthenticated: boolean;
@ -16,9 +14,6 @@ type AuthState = {
SplashScreen.preventAutoHideAsync(); SplashScreen.preventAutoHideAsync();
const KEY_TOKEN = 'auth-token';
const KEY_URL = 'App_URL';
export const AuthContext = createContext<AuthState>({ export const AuthContext = createContext<AuthState>({
isAuthenticated: false, isAuthenticated: false,
isReady: false, isReady: false,
@ -36,21 +31,12 @@ export function AuthProvider({ children }: PropsWithChildren) {
const router = useRouter(); const router = useRouter();
const segments = useSegments(); const segments = useSegments();
const storeAuthState = async (newState: { isAuthenticated: boolean }) => {
try {
const jsonValue = JSON.stringify(newState);
await AsyncStorage.setItem(KEY_TOKEN, jsonValue);
} catch (error) {
console.error('Errore nel salvataggio dello stato di autenticazione:', error);
}
}
const logIn = async (token: string, userData: UserData) => { const logIn = async (token: string, userData: UserData) => {
try { try {
await SecureStore.setItemAsync(KEY_TOKEN, token); await SecureStore.setItemAsync(KEY_TOKEN, token);
setIsAuthenticated(true); setIsAuthenticated(true);
setUser(userData); setUser(userData);
storeAuthState({ isAuthenticated: true }); // TODO: can be removed later
router.replace('/'); router.replace('/');
} catch (error) { } catch (error) {
console.error('Errore durante il login:', error); console.error('Errore durante il login:', error);
@ -62,7 +48,7 @@ export function AuthProvider({ children }: PropsWithChildren) {
await SecureStore.deleteItemAsync(KEY_TOKEN); await SecureStore.deleteItemAsync(KEY_TOKEN);
setIsAuthenticated(false); setIsAuthenticated(false);
setUser(null); setUser(null);
storeAuthState({ isAuthenticated: false });
router.replace('/login'); router.replace('/login');
} catch (error) { } catch (error) {
console.error('Errore durante il logout:', error); console.error('Errore durante il logout:', error);
@ -72,54 +58,45 @@ export function AuthProvider({ children }: PropsWithChildren) {
useEffect(() => { useEffect(() => {
const initApp = async () => { const initApp = async () => {
try { try {
// 1. Gestione URL Gateway (Logica "else" del vecchio snippet) // 1. Recupero Token salvato
let currentApiUrl = await SecureStore.getItemAsync(KEY_URL);
if (!currentApiUrl) {
console.log("URL non trovato, contatto Gateway...");
try {
// Chiamata diretta al gateway (senza interceptor api.ts)
const gwResponse = await axios.get(GATEWAY_ENDPOINT, {
headers: { "x-access-tokens": GATEWAY_TOKEN }
});
// Supponiamo che il backend ritorni { url: "http://..." }
// Adatta questo parsing alla risposta reale del tuo backend
const newUrl = gwResponse.data.url + "/api/app_cantieri";
await SecureStore.setItemAsync(KEY_URL, newUrl);
currentApiUrl = newUrl;
console.log("URL acquisito:", newUrl);
} catch (gwError) {
console.error("Errore connessione Gateway:", gwError);
// Qui potresti decidere di non bloccare l'app o mostrare un errore
}
}
// 2. Controllo Token e Recupero User (Logica "if" del vecchio snippet)
const savedToken = await SecureStore.getItemAsync(KEY_TOKEN); const savedToken = await SecureStore.getItemAsync(KEY_TOKEN);
if (savedToken && currentApiUrl) { if (savedToken) {
// Verifichiamo il token chiamando /user console.log("Token trovato: ", savedToken);
// Qui usiamo l'istanza 'api' importata che ora userà l'URL e il token
const userRes = await api.get("/user");
const result = userRes.data; // 2. Chiamata al backend per verificare il token e scaricare i dati utente
// Nota: api.ts aggiunge già l'header Authorization grazie all'interceptor (se configurato per leggere da SecureStore)
// Se il tuo api.ts legge da AsyncStorage, assicurati che siano allineati, altrimenti passalo a mano qui:
const response = await api.get("/user/info", {
headers: { Authorization: `Bearer ${savedToken}` }
});
const result = response.data;
const userData = result.user;
console.log("Sessione valida, dati utente caricati:", userData);
// 3. Mappatura dati (Backend -> Frontend)
// Il backend actionMe ritorna: { id, username, role }
const loadedUser: UserData = { const loadedUser: UserData = {
name: result.nome, id: userData.id,
surname: result.cognome, username: userData.username,
username: result.username, role: userData.role,
email: result.email, // Gestiamo i campi opzionali se il backend non li manda ancora
role: result.role, name: userData.name,
id: result.id, surname: userData.surname || '',
email: userData.email || '',
}; };
setUser(loadedUser); setUser(loadedUser);
setIsAuthenticated(true); setIsAuthenticated(true);
} else {
console.log("Nessun token salvato.");
} }
} catch (error) {
console.error('Errore durante l\'inizializzazione dell\'app:', error); } catch (error: any) {
// Se il token è scaduto o l'API fallisce, consideriamo l'utente non loggato console.error('Errore inizializzazione (Token scaduto o Server down):', error.message);
// Se il token non è valido, puliamo tutto
await SecureStore.deleteItemAsync(KEY_TOKEN); await SecureStore.deleteItemAsync(KEY_TOKEN);
setIsAuthenticated(false); setIsAuthenticated(false);
setUser(null); setUser(null);
@ -129,32 +106,9 @@ export function AuthProvider({ children }: PropsWithChildren) {
} }
}; };
// TODO: can be removed later
// const getAuthFromStorage = async () => {
// try {
// const jsonValue = await AsyncStorage.getItem(KEY_TOKEN);
// if (jsonValue != null) {
// const auth = JSON.parse(jsonValue);
// setIsAuthenticated(auth.isAuthenticated);
// }
// } catch (error) {
// console.error('Errore nel recupero dello stato di autenticazione:', error);
// }
// setIsReady(true);
// };
// getAuthFromStorage();
initApp(); initApp();
}, []); }, []);
// TODO: Can be removed later
// useEffect(() => {
// if (isReady) {
// SplashScreen.hideAsync();
// }
// }, [isReady]);
// Protezione rotte (opzionale, ma consigliata qui o nel Layout) // Protezione rotte (opzionale, ma consigliata qui o nel Layout)
useEffect(() => { useEffect(() => {
if (!isReady) return; if (!isReady) return;
@ -164,7 +118,7 @@ export function AuthProvider({ children }: PropsWithChildren) {
if (!isAuthenticated && inAuthGroup) { if (!isAuthenticated && inAuthGroup) {
router.replace('/login'); router.replace('/login');
} else if (isAuthenticated && !inAuthGroup) { } else if (isAuthenticated && !inAuthGroup) {
// router.replace('/(protected)/home'); // Decommenta se vuoi redirect automatico da login a home router.replace('/');
} }
}, [isReady, isAuthenticated, segments]); }, [isReady, isAuthenticated, segments]);

21
utils/dateTime.ts Normal file
View File

@ -0,0 +1,21 @@
/**
* Trasforma una data da "YYYY-MM-DD" a "DD/MM/YYYY"
* @param dateStr stringa data in formato ISO "YYYY-MM-DD"
* @returns stringa formattata "DD/MM/YYYY"
*/
export const formatDate = (dateStr: string | null | undefined): string => {
if (!dateStr) return '';
const [year, month, day] = dateStr.split('-');
return `${day}/${month}/${year}`;
};
/**
* Trasforma un'ora da "HH:MM:SS" a "HH:MM"
* @param timeStr stringa ora in formato "HH:MM:SS"
* @returns stringa formattata "HH:MM"
*/
export const formatTime = (timeStr: string | null | undefined): string => {
if (!timeStr) return '';
const [hours, minutes] = timeStr.split(':');
return `${hours}:${minutes}`;
};