feat: add and enhance PermitsScreen and RequestPermitModal

- add LoadingScreen component
- update utilities

.gitignore

@@ -31,6 +31,7 @@ yarn-error.*
 *.pem
 
 # local env files
+.env
 .env*.local
 
 # typescript

app/(protected)/_layout.tsx

@@ -14,6 +14,7 @@ export default function ProtectedLayout() {
     return <Redirect href="/login" />;
   }
 
+  // TODO: Aggiungere padding per i dispositivi con notch/bottom bar
   return (
     <Tabs
       screenOptions={{

app/(protected)/attendance/index.tsx

@@ -77,12 +77,12 @@ export default function AttendanceScreen() {
                                         <View className={`w-3 h-3 rounded-full shadow-sm ${item.status === 'complete' ? 'bg-green-500' : 'bg-orange-500'}`} />
                                         <View>
                                             <Text className="font-bold text-gray-800 text-lg mb-0.5">{item.site}</Text>
-                                            <Text className="text-sm text-gray-400 font-medium">{item.in} - {item.out || 'In corso'}</Text>
+                                            <Text className="text-base text-gray-400 font-medium">{item.in} - {item.out || 'In corso'}</Text>
                                         </View>
                                     </View>
                                     {item.status === 'complete' && (
                                     <View className="bg-gray-100 px-3 py-1.5 rounded-lg">
-                                        <Text className="text-sm font-mono text-gray-600 font-bold">8h</Text>
+                                        <Text className="text-base font-mono text-gray-600 font-bold">8h</Text>
                                     </View>
                                     )}
                                 </View>

app/(protected)/permits/index.tsx

@@ -4,6 +4,7 @@ import { Alert, ScrollView, Text, TouchableOpacity, View, ActivityIndicator, Ref
 import { TimeOffRequest, TimeOffRequestType } from '@/types/types';
 import RequestPermitModal from '@/components/RequestPermitModal';
 import CalendarWidget from '@/components/CalendarWidget';
+import LoadingScreen from '@/components/LoadingScreen';
 import api from '@/utils/api';
 import { formatDate, formatTime } from '@/utils/dateTime';
 
@@ -51,14 +52,8 @@ export default function PermitsScreen() {
         fetchPermits();
     };
 
-    // TODO: Migliorare schermata di caricamento -> spostarla in un componente a parte
     if (isLoading && !refreshing) {
-        return (
+        return <LoadingScreen />;
-            <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 (
@@ -96,7 +91,7 @@ export default function PermitsScreen() {
                     ) : (
                         <View className="gap-4">
                             <Text className="text-xl font-bold text-gray-800 px-1">Le tue richieste</Text>
-                            {/* TODO: Aggiungere una paginazione con delle freccette affianco? */}
+                            {/* TODO: Aggiungere una paginazione con delle freccette affianco? - Limite backend? */}
                             {permits.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="flex-row items-center gap-4">
@@ -115,6 +110,7 @@ export default function PermitsScreen() {
                                             )}
                                         </View>
                                     </View>
+                                    {/* TODO: Aggiungere funzionalità per modificare/eliminare la richiesta? */}
                                     <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'}

components/CalendarWidget.tsx

@@ -32,6 +32,7 @@ export default function CalendarWidget({ events, types }: CalendarWidgetProps) {
         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.start_date) return false;
             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;

components/LoadingScreen.tsx

@@ -0,0 +1,10 @@
+import { View, Text, ActivityIndicator } from 'react-native';
+
+export default function LoadingScreen() {
+    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>
+    );
+}

components/RequestPermitModal.tsx

@@ -1,10 +1,11 @@
 import React, { useState } from 'react';
 import { View, Text, Modal, TouchableOpacity, TextInput, ScrollView, Alert } from 'react-native';
 import DateTimePicker, { DateType, useDefaultStyles } from 'react-native-ui-datepicker';
-import { TimeOffRequest, TimeOffRequestType } from '@/types/types';
+import { TimeOffRequestType } from '@/types/types';
 import { X } from 'lucide-react-native';
 import { TimePickerModal } from './TimePickerModal';
 import api from '@/utils/api';
+import { formatPickerDate } from '@/utils/dateTime';
 
 interface RequestPermitModalProps {
     visible: boolean;
@@ -15,86 +16,84 @@ interface RequestPermitModalProps {
 
 export default function RequestPermitModal({ visible, types, onClose, onSubmit }: RequestPermitModalProps) {
     const defaultStyles = useDefaultStyles();
-    const [type, setType] = useState<TimeOffRequestType | undefined>(types[0]); // Default to first type
+    const [type, setType] = useState<TimeOffRequestType>(types[0]); // Default to first type
-    const [date, setDate] = useState<DateType>();
+    const [date, setDate] = useState<string | null>();
     const [range, setRange] = useState<{
-        startDate: DateType;
+        startDate: string | null;
-        endDate: DateType;
+        endDate: string | null;
-    }>({ startDate: undefined, endDate: undefined });
+    }>({ startDate: null, endDate: null });
 
     const [showStartPicker, setShowStartPicker] = useState(false);
     const [showEndPicker, setShowEndPicker] = useState(false);
     const [startTime, setStartTime] = useState('');
     const [endTime, setEndTime] = useState('');
+    const [message, setMessage] = useState('');
 
     // Funzione per resettare le selezioni di data
     const clearCalendar = () => {
-        setDate(undefined);
+        setDate(null);
-        setRange({ startDate: undefined, endDate: undefined });
+        setRange({ startDate: null, endDate: null });
         setStartTime(''); setEndTime('');
         setType(types[0]);
     };
 
+    // Funzione per validare la richiesta
+    function validateRequest(type: TimeOffRequestType, date: string | null | undefined, range: { startDate: string | null; endDate: string | null }, startTime: string, endTime: string, message: string): string | null {
+        if (!type) return "Seleziona una tipologia di assenza.";
+
+        if (!message || message.trim() === "") return "Inserisci un messaggio.";
+
+        if (type.time_required === 0) {
+            if (!range.startDate) return "Seleziona una data di inizio.";
+            return null;
+        }
+
+        if (!date) return "Seleziona una data.";
+        if (!startTime || !endTime) return "Seleziona gli orari.";
+        if (startTime >= endTime) return "L'orario di fine deve essere successivo a quello di inizio.";
+
+        return null;
+    }
+
+    // Funzione per inviare la richiesta alla API
     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) {
+            if (response.data.status === 'success') {
+                Alert.alert('Successo', response.data.message || 'La tua richiesta è stata inviata con successo.');
+            } else {
+                Alert.alert('Errore', response.data.message || 'Impossibile inviare la richiesta.');
+            }
+        } catch (error: any) {
             console.error('Errore nell\'invio della richiesta:', error);
-            Alert.alert('Errore', 'Impossibile inviare la richiesta. Riprova più tardi.');
+            throw new Error('Impossibile inviare la richiesta.');
         }
     };
 
     // Funzione per inviare la richiesta
-    const handleSubmit = (
+    const handleSubmit = async () => {
-        type: TimeOffRequestType | undefined,
+        const error = validateRequest(type, date, range, startTime, endTime, message);
-        date: DateType | undefined,
+        if (error) return Alert.alert("Errore", error);
-        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,
+            message: message || ""
         };
 
-        saveRequest(requestData);
+        try {
-        onSubmit(requestData);
+            await saveRequest(requestData);
+            onSubmit(requestData); // TODO: Gestire risposta e controllare fetch in index?
             onClose();
+        } catch (e) {
+            Alert.alert("Errore", "Impossibile inviare la richiesta.");
+        }
     };
 
-
     return (
         <Modal
             visible={visible}
@@ -113,9 +112,9 @@ export default function RequestPermitModal({ visible, types, onClose, onSubmit }
                     </View>
 
                     <ScrollView showsVerticalScrollIndicator={false} contentContainerStyle={{ paddingBottom: 40 }}>
-                        <View className="space-y-6 gap-6">
+                        <View className="space-y-6">
                             {/* Tipologia */}
-                            <View>
+                            <View className='mb-6'>
                                 <Text className="text-lg font-bold text-gray-700 mb-3">Tipologia Assenza</Text>
                                 <ScrollView
                                     horizontal
@@ -143,8 +142,12 @@ export default function RequestPermitModal({ visible, types, onClose, onSubmit }
                                     mode="range"
                                     startDate={range.startDate}
                                     endDate={range.endDate}
-                                    onChange={(params) => setRange(params)}
+                                    onChange={(params) => {
-                                    timeZone='Universal'
+                                        setRange({
+                                            startDate: params.startDate ? formatPickerDate(params.startDate) : null,
+                                            endDate: params.endDate ? formatPickerDate(params.endDate) : null
+                                        })
+                                    }}
                                     locale='it'
                                     styles={{
                                         ...defaultStyles,
@@ -152,22 +155,24 @@ export default function RequestPermitModal({ visible, types, onClose, onSubmit }
                                     }}
                                 />
                             ) : (
-                                <View className='flex-column'>
                                 <DateTimePicker
                                     mode="single"
                                     date={date}
-                                        onChange={({ date }) => setDate(date)}
+                                    onChange={({ date }) => setDate(date ? formatPickerDate(date) : null)}
-                                        timeZone='Universal'
                                     locale='it'
                                     styles={{
                                         ...defaultStyles,
                                         selected: { backgroundColor: '#099499' }
                                     }}
                                 />
+                            )}
 
-                                    <View className="flex-row gap-4 p-4 bg-orange-50 rounded-xl border border-orange-100">
+                            <View className='flex-column bg-orange-50 rounded-xl border border-orange-100 mb-6'>
+                                {type?.time_required === 1 && (
+                                    <View>
+                                        <View className="flex-row gap-4 p-4">
                                             <View className="flex-1">
-                                            <Text className="text-xs font-bold text-orange-800 mb-2 uppercase">Dalle Ore</Text>
+                                                <Text className="text-sm font-bold text-orange-800 mb-2 uppercase">Dalle Ore</Text>
                                                 <TouchableOpacity onPress={() => setShowStartPicker(true)}>
                                                     <TextInput
                                                         placeholder="09:00"
@@ -179,7 +184,7 @@ export default function RequestPermitModal({ visible, types, onClose, onSubmit }
                                                 </TouchableOpacity>
                                             </View>
                                             <View className="flex-1">
-                                            <Text className="text-xs font-bold text-orange-800 mb-2 uppercase">Alle Ore</Text>
+                                                <Text className="text-sm font-bold text-orange-800 mb-2 uppercase">Alle Ore</Text>
                                                 <TouchableOpacity onPress={() => setShowEndPicker(true)}>
                                                     <TextInput
                                                         placeholder="18:00"
@@ -191,8 +196,6 @@ export default function RequestPermitModal({ visible, types, onClose, onSubmit }
                                                 </TouchableOpacity>
                                             </View>
                                         </View>
-                                </View>
-                            )}
 
                                         <TimePickerModal
                                             visible={showStartPicker}
@@ -208,7 +211,22 @@ export default function RequestPermitModal({ visible, types, onClose, onSubmit }
                                             onConfirm={(time) => setEndTime(time)}
                                             onClose={() => setShowEndPicker(false)}
                                         />
+                                    </View>
+                                )}
+                                {/* TODO: Trasformare message in una select? - Predefinito per alcuni tipi */}
+                                <View className="p-4">
+                                    <Text className="text-sm font-bold text-orange-800 mb-2 uppercase">Motivo</Text>
+                                    <TextInput
+                                        placeholder="Scrivi qui il motivo..."
+                                        className="w-full px-3 py-4 bg-white font-bold text-gray-800 rounded-lg border border-orange-200 text-gray-800"
+                                        textAlignVertical="top"
+                                        value={message}
+                                        onChangeText={setMessage}
+                                    />
+                                </View>
+                            </View>
 
+                            {/* Azioni */}
                             <View className="flex-row gap-4">
                                 <TouchableOpacity
                                     onPress={() => {
@@ -221,9 +239,7 @@ export default function RequestPermitModal({ visible, types, onClose, onSubmit }
                                 </TouchableOpacity>
 
                                 <TouchableOpacity
-                                    onPress={() => {
+                                    onPress={handleSubmit}
-                                        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>

utils/api.ts

@@ -1,8 +1,7 @@
 import axios from 'axios';
-import AsyncStorage from '@react-native-async-storage/async-storage';
 import * as SecureStore from 'expo-secure-store';
 
-const API_BASE_URL = `http://10.0.2.2:32768/mobile`;
+const API_BASE_URL = process.env.EXPO_PUBLIC_API_URL;
 export const KEY_TOKEN = 'auth_key';
 
 // Crea un'istanza di axios

utils/dateTime.ts

@@ -1,3 +1,5 @@
+import { DateType } from "react-native-ui-datepicker";
+
 /**
  * Trasforma una data da "YYYY-MM-DD" a "DD/MM/YYYY"
  * @param dateStr stringa data in formato ISO "YYYY-MM-DD"
@@ -19,3 +21,21 @@ export const formatTime = (timeStr: string | null | undefined): string => {
     const [hours, minutes] = timeStr.split(':');
     return `${hours}:${minutes}`;
 };
+
+/**
+ * Formatta una data per l'uso con un date picker, normalizzandola a mezzanotte
+ * @param d Data in formato DateType
+ * @returns stringa data in formato "YYYY-MM-DD" o null se l'input è null/undefined
+ */
+export const formatPickerDate = (d: DateType | null | undefined) => {
+    if (!d) return null;
+
+    const date = new Date(d as string | number | Date);
+    const normalized = new Date(date.getFullYear(), date.getMonth(), date.getDate());
+
+    const yyyy = normalized.getFullYear();
+    const mm = String(normalized.getMonth() + 1).padStart(2, "0");
+    const dd = String(normalized.getDate()).padStart(2, "0");
+
+    return `${yyyy}-${mm}-${dd}`;
+}