Add DatePicker and refactor some views layout

.gitignore

@@ -41,3 +41,7 @@ app-example
 # generated native folders
 /ios
 /android
+
+# IDE
+.idea
+.vscode

app/_layout.tsx

@@ -53,7 +53,7 @@ export default function AppLayout() {
         }}
       />
       <Tabs.Screen
-        name="automation/index"
+        name="automation"
         options={{
           title: 'Domotica',
           tabBarIcon: ({ color, size }) => <Zap color={color} size={24} />,

app/attendance/index.tsx

@@ -80,9 +80,11 @@ export default function AttendanceScreen() {
                                             <Text className="text-sm 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>
                                     </View>
+                                    )}
                                 </View>
                             ))}
                         </View>

app/automation/[id].tsx

@@ -0,0 +1,75 @@
+import { OFFICES_DATA } from '@/data/data';
+import type { OfficeItem } from '@/types/types';
+import { Activity, ChevronLeft, Lightbulb, Thermometer, Wifi, WifiOff, Zap, Plus } from 'lucide-react-native';
+import React from 'react';
+import { useRouter, useLocalSearchParams } from 'expo-router';
+import { ScrollView, Text, TouchableOpacity, View } from 'react-native';
+
+export default function AutomationDetail() {
+    const router = useRouter();
+    const { id } = useLocalSearchParams<{ id: string }>();
+
+    const selectedOffice: OfficeItem | undefined = OFFICES_DATA.find(o => o.id.toString() === id);
+    if (!selectedOffice) return <Text>Ufficio non trovato</Text>;
+
+    return (
+        <View className="flex-1 bg-gray-50">
+            {/* Header Dettaglio */}
+            <View className="bg-white p-6 pt-16 shadow-sm flex-row justify-between items-center border-b border-gray-100">
+                <View className='flex-row items-center'>
+                    <TouchableOpacity
+                        onPress={() => router.back()}
+                        className="mr-4 p-3 rounded-full bg-gray-50 active:bg-gray-200"
+                    >
+                        <ChevronLeft size={28} color="#4b5563" />
+                    </TouchableOpacity>
+                    <Text className="text-2xl font-bold text-gray-800">{selectedOffice.name}</Text>
+                </View>
+                {/* Status Dot */}
+                <View className={`ms-auto w-4 h-4 rounded-full border-2 border-white shadow-sm ${selectedOffice.status === 'online' ? 'bg-green-500' : 'bg-red-500'}`} />
+            </View>
+
+            <ScrollView contentContainerStyle={{ padding: 20, gap: 24 }} showsVerticalScrollIndicator={false}>
+                <View className="flex-row gap-5">
+                    {/* Lights Card Grande */}
+                    <TouchableOpacity className={`flex-1 p-6 rounded-3xl border-2 active:scale-95 ${selectedOffice.lights ? 'border-[#099499] bg-teal-50' : 'border-transparent bg-white shadow-sm'}`}>
+                        <View className="flex-row justify-between items-start mb-6">
+                            <Lightbulb size={40} color={selectedOffice.lights ? '#099499' : '#d1d5db'} />
+                            {/* Switch UI Grande - FIXED: Rimossa 'transition-colors' che causava il crash */}
+                            <View className={`w-14 h-8 rounded-full p-1 ${selectedOffice.lights ? 'bg-[#099499]' : 'bg-gray-200'}`}>
+                                <View className={`bg-white w-6 h-6 rounded-full shadow-sm ${selectedOffice.lights ? 'translate-x-6' : 'translate-x-0'}`} />
+                            </View>
+                        </View>
+                        <Text className="text-lg font-bold text-gray-800 mb-1">Luci</Text>
+                        <Text className="text-gray-500 font-medium">{selectedOffice.lights ? 'Accese - 80%' : 'Spente'}</Text>
+                    </TouchableOpacity>
+
+                    {/* Temp Card Grande */}
+                    <View className="flex-1 bg-white p-6 rounded-3xl border border-transparent shadow-sm">
+                        <Thermometer size={40} color="#fb923c" className="mb-6" />
+                        <Text className="text-lg font-bold text-gray-800 mb-1">Clima</Text>
+                        <View className="flex-row items-end">
+                            <Text className="text-4xl font-bold text-gray-800">{selectedOffice.temp}</Text>
+                            <Text className="text-gray-500 mb-2 ml-1 text-lg">°C</Text>
+                        </View>
+                    </View>
+                </View>
+
+                {/* Chart Card Grande */}
+                <View className="bg-white p-6 rounded-3xl shadow-sm border border-gray-100">
+                    <View className="flex-row items-center mb-6 gap-3">
+                        <Activity size={28} color="#099499" />
+                        <Text className="text-xl font-bold text-gray-700">Consumo Oggi</Text>
+                    </View>
+                    <View className="flex-row items-end justify-between h-48 gap-4">
+                        {[40, 65, 30, 80, 55, 90, 45].map((h, i) => (
+                            <View key={i} className="flex-1 bg-gray-100 rounded-t-xl relative overflow-hidden h-full justify-end">
+                                <View style={{ height: `${h}%` }} className="w-full bg-[#099499] rounded-t-xl opacity-80" />
+                            </View>
+                        ))}
+                    </View>
+                </View>
+            </ScrollView>
+        </View>
+    );
+}

app/automation/_layout.tsx

@@ -0,0 +1,10 @@
+import { Stack } from "expo-router";
+
+export default function AutomationLayout() {
+  return (
+    <Stack screenOptions={{headerShown: false}}>
+      <Stack.Screen name="index" />
+      <Stack.Screen name="[id]" />
+    </Stack>
+  );
+}

app/automation/index.tsx

@@ -1,91 +1,24 @@
 import { OFFICES_DATA } from '@/data/data';
 import type { OfficeItem } from '@/types/types';
-import { Activity, ChevronRight, Lightbulb, Thermometer, Wifi, WifiOff, Zap } from 'lucide-react-native';
+import { useRouter } from 'expo-router';
+import { Activity, ChevronLeft, Lightbulb, Thermometer, Wifi, WifiOff, Zap, Plus } from 'lucide-react-native';
 import React, { useState } from 'react';
 import { ScrollView, Text, TouchableOpacity, View } from 'react-native';
 
 export default function AutomationScreen() {
+    const router = useRouter();
     const [selectedOffice, setSelectedOffice] = useState<OfficeItem | null>(null);
 
-    // --- DETAIL VIEW ---
-    if (selectedOffice) {
-        return (
-            <View className="flex-1 bg-gray-50">
-                {/* Header Dettaglio */}
-                <View className="bg-white p-6 pt-16 shadow-sm flex-row items-center border-b border-gray-100">
-                    <TouchableOpacity
-                        onPress={() => setSelectedOffice(null)}
-                        className="mr-4 p-3 rounded-full bg-gray-50 active:bg-gray-200"
-                    >
-                        <ChevronRight size={28} color="#4b5563" className="rotate-180" style={{ transform: [{ rotate: '180deg' }] }} />
-                    </TouchableOpacity>
-                    <Text className="text-2xl font-bold text-gray-800">{selectedOffice.name}</Text>
-                </View>
-
-                <ScrollView contentContainerStyle={{ padding: 20, gap: 24 }} showsVerticalScrollIndicator={false}>
-                    {/* Status Banner Grande */}
-                    <View className="bg-white rounded-3xl p-8 shadow-sm items-center relative overflow-hidden border border-gray-100">
-                        <View className={`absolute top-0 left-0 w-full h-2 ${selectedOffice.status === 'online' ? 'bg-green-500' : 'bg-red-500'}`} />
-                        <View className="flex-row items-center mt-2 gap-3">
-                            <View className={`w-4 h-4 rounded-full ${selectedOffice.status === 'online' ? 'bg-green-500 shadow-lg shadow-green-500/50' : 'bg-red-500'}`} />
-                            <Text className="text-lg text-gray-600 uppercase tracking-widest font-bold">{selectedOffice.status}</Text>
-                        </View>
-                    </View>
-
-                    <View className="flex-row gap-5">
-                        {/* Lights Card Grande */}
-                        <TouchableOpacity className={`flex-1 p-6 rounded-3xl border-2 active:scale-95 ${selectedOffice.lights ? 'border-[#099499] bg-teal-50' : 'border-transparent bg-white shadow-sm'}`}>
-                            <View className="flex-row justify-between items-start mb-6">
-                                <Lightbulb size={40} color={selectedOffice.lights ? '#099499' : '#d1d5db'} />
-                                {/* Switch UI Grande - FIXED: Rimossa 'transition-colors' che causava il crash */}
-                                <View className={`w-14 h-8 rounded-full p-1 ${selectedOffice.lights ? 'bg-[#099499]' : 'bg-gray-200'}`}>
-                                    <View className={`bg-white w-6 h-6 rounded-full shadow-sm ${selectedOffice.lights ? 'translate-x-6' : 'translate-x-0'}`} />
-                                </View>
-                            </View>
-                            <Text className="text-lg font-bold text-gray-800 mb-1">Luci</Text>
-                            <Text className="text-sm text-gray-500 font-medium">{selectedOffice.lights ? 'Accese - 80%' : 'Spente'}</Text>
-                        </TouchableOpacity>
-
-                        {/* Temp Card Grande */}
-                        <View className="flex-1 bg-white p-6 rounded-3xl border border-transparent shadow-sm">
-                            <Thermometer size={40} color="#fb923c" className="mb-6" />
-                            <Text className="text-lg font-bold text-gray-800 mb-1">Clima</Text>
-                            <View className="flex-row items-end">
-                                <Text className="text-4xl font-bold text-gray-800">{selectedOffice.temp}</Text>
-                                <Text className="text-gray-500 mb-2 ml-1 text-lg">°C</Text>
-                            </View>
-                        </View>
-                    </View>
-
-                    {/* Chart Card Grande */}
-                    <View className="bg-white p-6 rounded-3xl shadow-sm border border-gray-100">
-                        <View className="flex-row items-center mb-6 gap-3">
-                            <Activity size={28} color="#099499" />
-                            <Text className="text-xl font-bold text-gray-700">Consumo Oggi</Text>
-                        </View>
-                        <View className="flex-row items-end justify-between h-48 gap-4">
-                            {[40, 65, 30, 80, 55, 90, 45].map((h, i) => (
-                                <View key={i} className="flex-1 bg-gray-100 rounded-t-xl relative overflow-hidden h-full justify-end">
-                                    <View style={{ height: `${h}%` }} className="w-full bg-[#099499] rounded-t-xl opacity-80" />
-                                </View>
-                            ))}
-                        </View>
-                    </View>
-                </ScrollView>
-            </View>
-        );
-    }
-
     // --- LIST VIEW (INGRANDITA) ---
     return (
         <View className="flex-1 bg-gray-50">
-            <View className="bg-white p-6 pt-16 shadow-sm flex-row justify-between items-start border-b border-gray-100">
+            <View className="bg-white p-6 pt-16 shadow-sm flex-row justify-between items-center border-b border-gray-100">
                 <View>
                     <Text className="text-3xl font-bold text-gray-800 mb-1">Domotica</Text>
                     <Text className="text-base text-gray-500">Controlla gli ambienti</Text>
                 </View>
                 <View className="bg-green-100 px-4 py-2 rounded-xl border border-green-200 mt-1">
-                    <Text className="text-xs font-bold text-green-700 tracking-wide">SYSTEM OK</Text>
+                    <Text className="text-xs font-bold text-green-700 tracking-wide">ONLINE</Text>
                 </View>
             </View>
 
@@ -93,7 +26,7 @@ export default function AutomationScreen() {
                 {OFFICES_DATA.map((office) => (
                     <TouchableOpacity
                         key={office.id}
-                        onPress={() => setSelectedOffice(office)}
+                        onPress={() => router.push(`/automation/${office.id}`)}
                         className="bg-white rounded-3xl p-6 shadow-sm flex-row items-center justify-between border border-gray-100 active:border-[#099499]/30 active:scale-[0.98]"
                     >
                         <View className="flex-row items-center gap-5">
@@ -125,6 +58,14 @@ export default function AutomationScreen() {
                 {/* Spacer finale per la navbar */}
                 <View className="h-20" />
             </ScrollView>
+
+            {/* FAB */}
+            <TouchableOpacity
+                onPress={() => alert('Aggiungi nuovo collegamento')}
+                className="absolute bottom-8 right-6 w-16 h-16 bg-[#099499] rounded-full shadow-lg items-center justify-center active:scale-90"
+            >
+                <Plus size={32} color="white" />
+            </TouchableOpacity>
         </View>
     );
 }

app/index.tsx

@@ -9,9 +9,9 @@ export default function HomeScreen() {
     const incompleteTasks = ATTENDANCE_DATA.filter(item => item.status === 'incomplete');
 
     return (
-        <View className="flex-1 bg-gray-50">
+        <View className="flex-1 bg-[#099499]">
             {/* Banner Custom */}
-            <View className="bg-[#099499] pt-16 pb-6 px-6 rounded-b-[2rem] shadow-sm z-10">
+            <View className="pt-16 pb-6 px-6 shadow-sm z-10">
                 <View className="flex-row justify-between items-start">
                     <View className="flex-row items-center gap-4">
                         <View>
@@ -34,7 +34,7 @@ export default function HomeScreen() {
 
             {/* Contenuto Scrollabile */}
             <ScrollView
-                className="flex-1 px-5 pt-6"
+                className="flex-1 bg-gray-50 rounded-t-[2.5rem] px-5 pt-6"
                 contentContainerStyle={{ paddingBottom: 50, gap: 24 }}
                 showsVerticalScrollIndicator={false}
             >
@@ -48,7 +48,7 @@ export default function HomeScreen() {
                             </View>
                             <View className="flex-1">
                                 <Text className="font-bold text-gray-800 text-lg">Presenza incompleta</Text>
-                                <Text className="text-base text-gray-500 mt-1">Manca uscita: {incompleteTasks[0].site}</Text>
+                                <Text className="text-base text-gray-500 mt-1">{incompleteTasks[0].site}</Text>
                             </View>
                         </View>
                         <TouchableOpacity onPress={() => router.push('/attendance')} className="bg-orange-50 px-5 py-3 rounded-xl ml-2 active:bg-orange-100">

app/permits/index.tsx

@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import { PERMITS_DATA } from '@/data/data';
 import { Calendar as CalendarIcon, ChevronLeft, ChevronRight, Clock, Plus, Thermometer, X } from 'lucide-react-native';
 import { ScrollView, Text, TouchableOpacity, View } from 'react-native';
-import RequestPermitModal from '@/components/RenamePermitModal';
+import RequestPermitModal from '@/components/RequestPermitModal';
 
 export default function PermitsScreen() {
     const [currentDate, setCurrentDate] = useState(new Date(2025, 11, 1)); // Dicembre 2025 Mock

components/RangePickerModal.tsx

@@ -1,16 +1,15 @@
 import React, { useState, useEffect } from 'react';
-import { Modal, Text, TouchableOpacity, View } from 'react-native';
+import { Alert, Modal, Text, TouchableOpacity, View } from 'react-native';
-import DateTimePicker, { DateType, useDefaultStyles } from 'react-native-ui-datepicker';
+import DateTimePicker, { DateType, useDefaultStyles, useDefaultClassNames } from 'react-native-ui-datepicker';
 import { Check, X } from 'lucide-react-native';
 
 export const RangePickerModal = ({ visible, onClose, currentRange, onApply }: any) => {
-    // Stato locale temporaneo per la selezione nel modale
+    const defaultStyles = useDefaultStyles();
-    const [localRange, setLocalRange] = useState(currentRange);
+    // const defaultClassNames = useDefaultClassNames();
-
+    const [range, setRange] = useState<{
-    // Sincronizza lo stato locale quando il modale si apre
+        startDate: DateType;
-    useEffect(() => {
+        endDate: DateType;
-        if (visible) setLocalRange(currentRange);
+    }>({ startDate: undefined, endDate: undefined });
-    }, [visible, currentRange]);
 
     return (
         <Modal
@@ -30,19 +29,26 @@ export const RangePickerModal = ({ visible, onClose, currentRange, onApply }: an
 
                     <DateTimePicker
                         mode="range"
-                        locale="it"
+                        startDate={range.startDate}
-                        startDate={localRange.startDate}
+                        endDate={range.endDate}
-                        endDate={localRange.endDate}
+                        onChange={(params) => setRange(params)}
-                        onChange={(params: any) => setLocalRange(params)}
+                        timeZone='Europe/Rome'
-                        // selectedItemColor="#099499"
+                        locale='it'
-                        // headerTextStyle={{ color: '#1f2937', fontWeight: 'bold', fontSize: 18 }}
+                        styles={{
-                        // calendarTextStyle={{ color: '#374151' }}
+                            ...defaultStyles,
-                        // weekDaysTextStyle={{ color: '#9ca3af', fontWeight: 'bold' }}
+                            selected: { backgroundColor: '#099499' }
+                        }}
+                    // classNames={{
+                    //     ...defaultClassNames,
+                    //     selected: 'bg-#099499'
+                    // }}
                     />
 
                     <TouchableOpacity
                         onPress={() => {
-                            onApply(localRange);
+                            console.log("Data inizio: ", range.startDate?.toLocaleString());
+                            console.log("Data fine: ", range.endDate?.toLocaleString());
+                            onApply(range);
                             onClose();
                         }}
                         className="mt-6 bg-[#099499] rounded-xl py-4 flex-row justify-center items-center active:bg-[#077d82]"
@@ -50,6 +56,16 @@ export const RangePickerModal = ({ visible, onClose, currentRange, onApply }: an
                         <Check size={20} color="white" className="mr-2" />
                         <Text className="text-white font-bold text-lg ml-2">Applica Filtro</Text>
                     </TouchableOpacity>
+                    <TouchableOpacity
+                        onPress={() => {
+                            console.log("Reset pressed");
+                            range.startDate = range.endDate = undefined;
+                            // 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">Reset</Text>
+                    </TouchableOpacity>
                 </View>
             </View>
         </Modal>

components/RenamePermitModal.tsx

@@ -1,127 +0,0 @@
-import React, { useState } from 'react';
-import { View, Text, Modal, TouchableOpacity, TextInput, ScrollView } from 'react-native';
-import { PermitType } from '@/types/types';
-import { X } from 'lucide-react-native';
-
-interface RequestPermitModalProps {
-  visible: boolean;
-  onClose: () => void;
-  onSubmit: (data: any) => void;
-}
-
-export default function RequestPermitModal({ visible, onClose, onSubmit}: RequestPermitModalProps) {
-    const [type, setType] = useState<PermitType>('Ferie');
-    const [startDate, setStartDate] = useState('');
-    const [endDate, setEndDate] = useState('');
-    const [startTime, setStartTime] = useState('');
-    const [endTime, setEndTime] = useState('');
-
-    return (
-        <Modal
-            visible={visible}
-            transparent={true}
-            animationType="slide"
-            statusBarTranslucent
-        >
-            <View className="flex-1 bg-black/60 justify-end sm:justify-center">
-                <View className="bg-white w-full rounded-t-[2.5rem] p-6 shadow-2xl h-[85%] sm:h-auto">
-                    {/* Header Modale */}
-                    <View className="flex-row justify-between items-center mb-6">
-                        <Text className="text-2xl font-bold text-gray-800">Nuova Richiesta</Text>
-                        <TouchableOpacity onPress={onClose} className="p-2 bg-gray-100 rounded-full">
-                            <X size={24} color="#4b5563" />
-                        </TouchableOpacity>
-                    </View>
-
-                    <ScrollView showsVerticalScrollIndicator={false} contentContainerStyle={{ paddingBottom: 40 }}>
-                        <View className="space-y-6 gap-6">
-                            {/* Tipologia */}
-                            <View>
-                                <Text className="text-base font-bold text-gray-700 mb-3">Tipologia Assenza</Text>
-                                <View className="flex-row gap-3">
-                                    {(['Ferie', 'Permesso', 'Malattia'] as PermitType[]).map((t) => (
-                                        <TouchableOpacity
-                                            key={t}
-                                            onPress={() => setType(t)}
-                                            className={`flex-1 py-4 rounded-xl border-2 items-center justify-center ${
-                                                type === t 
-                                                ? 'border-[#099499] bg-teal-50' 
-                                                : 'border-gray-100 bg-white'
-                                            }`}
-                                        >
-                                            <Text className={`text-sm font-bold ${
-                                                type === t ? 'text-[#099499]' : 'text-gray-500'
-                                            }`}>
-                                                {t}
-                                            </Text>
-                                        </TouchableOpacity>
-                                    ))}
-                                </View>
-                            </View>
-
-                            {/* Date Selection */}
-                            <View className="flex-row gap-4">
-                                <View className={`flex-1 ${type === 'Permesso' ? 'w-full' : ''}`}>
-                                    <Text className="text-sm font-bold text-gray-700 mb-2">
-                                        {type === 'Permesso' ? 'Data' : 'Dal'}
-                                    </Text>
-                                    <TextInput 
-                                        placeholder="YYYY-MM-DD"
-                                        className="w-full p-4 bg-gray-50 rounded-xl font-medium text-gray-800"
-                                        value={startDate}
-                                        onChangeText={setStartDate}
-                                    />
-                                </View>
-                                {type !== 'Permesso' && (
-                                    <View className="flex-1">
-                                        <Text className="text-sm font-bold text-gray-700 mb-2">Al</Text>
-                                        <TextInput 
-                                            placeholder="YYYY-MM-DD"
-                                            className="w-full p-4 bg-gray-50 rounded-xl font-medium text-gray-800"
-                                            value={endDate}
-                                            onChangeText={setEndDate}
-                                        />
-                                    </View>
-                                )}
-                            </View>
-
-                            {/* Time Selection (Solo Permessi) */}
-                            {type === 'Permesso' && (
-                                <View className="flex-row gap-4 p-4 bg-orange-50 rounded-xl border border-orange-100">
-                                    <View className="flex-1">
-                                        <Text className="text-xs font-bold text-orange-800 mb-2 uppercase">Dalle Ore</Text>
-                                        <TextInput 
-                                            placeholder="09:00"
-                                            className="w-full p-3 bg-white rounded-lg border border-orange-200 font-bold text-gray-800 text-center"
-                                            value={startTime}
-                                            onChangeText={setStartTime}
-                                        />
-                                    </View>
-                                    <View className="flex-1">
-                                        <Text className="text-xs font-bold text-orange-800 mb-2 uppercase">Alle Ore</Text>
-                                        <TextInput 
-                                            placeholder="18:00"
-                                            className="w-full p-3 bg-white rounded-lg border border-orange-200 font-bold text-gray-800 text-center"
-                                            value={endTime}
-                                            onChangeText={setEndTime}
-                                        />
-                                    </View>
-                                </View>
-                            )}
-
-                            <TouchableOpacity 
-                                onPress={() => {
-                                    onSubmit({ type, startDate, endDate, startTime, endTime });
-                                    onClose();
-                                }}
-                                className="w-full py-4 bg-[#099499] rounded-2xl shadow-lg mt-4 active:scale-[0.98]"
-                            >
-                                <Text className="text-white text-center font-bold text-lg">Invia Richiesta</Text>
-                            </TouchableOpacity>
-                        </View>
-                    </ScrollView>
-                </View>
-            </View>
-        </Modal>
-    );
-};

components/RequestPermitModal.tsx

@@ -0,0 +1,166 @@
+import React, { useState } from 'react';
+import { View, Text, Modal, TouchableOpacity, TextInput, ScrollView } from 'react-native';
+import DateTimePicker, { DateType, useDefaultStyles, useDefaultClassNames } from 'react-native-ui-datepicker';
+import { PermitType } from '@/types/types';
+import { X } from 'lucide-react-native';
+import { TimePickerModal } from './TimePickerModal';
+
+interface RequestPermitModalProps {
+    visible: boolean;
+    onClose: () => void;
+    onSubmit: (data: any) => void;
+}
+
+export default function RequestPermitModal({ visible, onClose, onSubmit }: RequestPermitModalProps) {
+    const defaultStyles = useDefaultStyles();
+    const [type, setType] = useState<PermitType>('Ferie');
+    const [date, setDate] = useState<DateType>();
+    const [range, setRange] = useState<{
+        startDate: DateType;
+        endDate: DateType;
+    }>({ startDate: undefined, endDate: undefined });
+
+    const [showStartPicker, setShowStartPicker] = useState(false);
+    const [showEndPicker, setShowEndPicker] = useState(false);
+    const [startTime, setStartTime] = useState('');
+    const [endTime, setEndTime] = useState('');
+
+    return (
+        <Modal
+            visible={visible}
+            transparent={true}
+            animationType="slide"
+            statusBarTranslucent
+        >
+            <View className="flex-1 bg-black/60 justify-end sm:justify-center">
+                <View className="bg-white w-full rounded-t-[2.5rem] p-6 shadow-2xl h-[85%] sm:h-auto">
+                    {/* Header Modale */}
+                    <View className="flex-row justify-between items-center mb-6">
+                        <Text className="text-2xl font-bold text-gray-800">Nuova Richiesta</Text>
+                        <TouchableOpacity onPress={onClose} className="p-2 bg-gray-100 rounded-full">
+                            <X size={24} color="#4b5563" />
+                        </TouchableOpacity>
+                    </View>
+
+                    <ScrollView showsVerticalScrollIndicator={false} contentContainerStyle={{ paddingBottom: 40 }}>
+                        <View className="space-y-6 gap-6">
+                            {/* Tipologia */}
+                            <View>
+                                <Text className="text-base font-bold text-gray-700 mb-3">Tipologia Assenza</Text>
+                                <View className="flex-row gap-3">
+                                    {(['Ferie', 'Permesso', 'Malattia'] as PermitType[]).map((t) => (
+                                        <TouchableOpacity
+                                            key={t}
+                                            onPress={() => setType(t)}
+                                            className={`flex-1 py-4 rounded-xl border-2 items-center justify-center ${type === t
+                                                ? 'border-[#099499] bg-teal-50'
+                                                : 'border-gray-100 bg-white'
+                                                }`}
+                                        >
+                                            <Text className={`text-sm font-bold ${type === t ? 'text-[#099499]' : 'text-gray-500'
+                                                }`}>
+                                                {t}
+                                            </Text>
+                                        </TouchableOpacity>
+                                    ))}
+                                </View>
+                            </View>
+
+                            {/* Date Selection */}
+                            {type !== 'Permesso' ? (
+                                <DateTimePicker
+                                    mode="range"
+                                    startDate={range.startDate}
+                                    endDate={range.endDate}
+                                    onChange={(params) => setRange(params)}
+                                    timeZone='Europe/Rome'
+                                    locale='it'
+                                    styles={{
+                                        ...defaultStyles,
+                                        selected: { backgroundColor: '#099499' }
+                                    }}
+                                />
+                            ) : (
+                                <View className='flex-column'>
+                                    <DateTimePicker
+                                        mode="single"
+                                        date={date}
+                                        onChange={({ date }) => setDate(date)}
+                                        timeZone='Europe/Rome'
+                                        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-1">
+                                            <Text className="text-xs font-bold text-orange-800 mb-2 uppercase">Dalle Ore</Text>
+                                            <TouchableOpacity onPress={() => setShowStartPicker(true)}>
+                                                <TextInput
+                                                    placeholder="09:00"
+                                                    className="w-full p-3 bg-white rounded-lg border border-orange-200 font-bold text-gray-800 text-center"
+                                                    value={startTime}
+                                                    onChangeText={setStartTime}
+                                                    editable={false}
+                                                />
+                                            </TouchableOpacity>
+                                        </View>
+                                        <View className="flex-1">
+                                            <Text className="text-xs font-bold text-orange-800 mb-2 uppercase">Alle Ore</Text>
+                                            <TouchableOpacity onPress={() => setShowEndPicker(true)}>
+                                                <TextInput
+                                                    placeholder="18:00"
+                                                    className="w-full p-3 bg-white rounded-lg border border-orange-200 font-bold text-gray-800 text-center"
+                                                    value={endTime}
+                                                    onChangeText={setEndTime}
+                                                    editable={false}
+                                                />
+                                            </TouchableOpacity>
+                                        </View>
+                                    </View>
+                                </View>
+                            )}
+
+                            <TimePickerModal
+                                visible={showStartPicker}
+                                initialDate={new Date()}
+                                onConfirm={(time) => setStartTime(time)}
+                                onClose={() => setShowStartPicker(false)}
+                            />
+                            <TimePickerModal
+                                visible={showEndPicker}
+                                initialDate={new Date()}
+                                onConfirm={(time) => setEndTime(time)}
+                                onClose={() => setShowEndPicker(false)}
+                            />
+
+                            <View>
+                                <TouchableOpacity
+                                    onPress={() => {
+                                        onSubmit({ type, date, range, startTime, endTime });
+                                        onClose();
+                                    }}
+                                    className="w-full 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>
+                                </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>
+                    </ScrollView>
+                </View>
+            </View>
+        </Modal>
+    );
+};

components/TimePickerModal.tsx

@@ -0,0 +1,68 @@
+import React, { useState } from 'react';
+import { Modal, View, TouchableOpacity, Text } from 'react-native';
+import DateTimePicker, { DateType, useDefaultStyles } from 'react-native-ui-datepicker';
+import { X } from 'lucide-react-native';
+import dayjs from 'dayjs';
+
+interface TimePickerModalProps {
+    visible: boolean;
+    initialDate?: DateType;
+    onConfirm: (time: string) => void;
+    onClose: () => void;
+}
+
+export const TimePickerModal = ({ visible, initialDate, onConfirm, onClose }: TimePickerModalProps) => {
+    const defaultStyles = useDefaultStyles();
+    const [selectedDate, setSelectedDate] = useState<DateType>(initialDate || new Date());
+
+    const formatTime = (date?: DateType | null) => {
+        if (!date) return "00:00";
+        date = dayjs(date);
+        const hour = date?.hour().toString().padStart(2, "0") ?? "00";
+        const minute = date?.minute().toString().padStart(2, "0") ?? "00";
+        return `${hour}:${minute}`;
+    };
+
+    const handleConfirm = () => {
+        const time = formatTime(selectedDate);
+        console.log("Selected time:", time);
+        onConfirm(time);
+        onClose();
+    };
+
+    return (
+        <Modal visible={visible} transparent animationType="fade">
+            <View className="flex-1 justify-center items-center bg-black/50">
+                <View className="bg-white rounded-xl p-4 w-[90%] max-h-[400px]">
+
+                    {/* Header con chiusura */}
+                    <View className="flex-row justify-end items-center mb-4">
+                        <TouchableOpacity onPress={onClose} className="p-2 bg-gray-100 rounded-full">
+                            <X size={20} color="#4b5563" />
+                        </TouchableOpacity>
+                    </View>
+
+                    {/* TimePicker */}
+                    <DateTimePicker
+                        mode="single"
+                        timePicker
+                        date={selectedDate}
+                        initialView="time"
+                        hideHeader
+                        containerHeight={200}
+                        styles={defaultStyles}
+                        onChange={(d) => setSelectedDate(d.date || new Date())}
+                    />
+
+                    {/* Bottone conferma */}
+                    <TouchableOpacity
+                        onPress={handleConfirm}
+                        className="mt-4 w-full py-3 bg-[#099499] rounded-xl shadow-lg active:scale-[0.98]"
+                    >
+                        <Text className="text-white text-center font-bold text-lg">Applica</Text>
+                    </TouchableOpacity>
+                </View>
+            </View>
+        </Modal>
+    );
+};