Add DatePicker and refactor some views layout

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>
+    );
+};