First UI draft

components/RangePickerModal.tsx

@@ -0,0 +1,57 @@
+import React, { useState, useEffect } from 'react';
+import { Modal, Text, TouchableOpacity, View } from 'react-native';
+import DateTimePicker, { DateType, useDefaultStyles } 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 [localRange, setLocalRange] = useState(currentRange);
+
+    // Sincronizza lo stato locale quando il modale si apre
+    useEffect(() => {
+        if (visible) setLocalRange(currentRange);
+    }, [visible, currentRange]);
+
+    return (
+        <Modal
+            visible={visible}
+            transparent={true}
+            animationType="fade"
+            onRequestClose={onClose}
+        >
+            <View className="flex-1 bg-black/60 justify-center items-center p-6">
+                <View className="bg-white rounded-[2rem] p-6 w-full max-w-sm shadow-2xl">
+                    <View className="flex-row justify-between items-center mb-4">
+                        <Text className="text-xl font-bold text-gray-800">Seleziona Periodo</Text>
+                        <TouchableOpacity onPress={onClose} className="p-2 bg-gray-50 rounded-full">
+                            <X size={20} color="#4b5563" />
+                        </TouchableOpacity>
+                    </View>
+
+                    <DateTimePicker
+                        mode="range"
+                        locale="it"
+                        startDate={localRange.startDate}
+                        endDate={localRange.endDate}
+                        onChange={(params: any) => setLocalRange(params)}
+                        // selectedItemColor="#099499"
+                        // headerTextStyle={{ color: '#1f2937', fontWeight: 'bold', fontSize: 18 }}
+                        // calendarTextStyle={{ color: '#374151' }}
+                        // weekDaysTextStyle={{ color: '#9ca3af', fontWeight: 'bold' }}
+                    />
+
+                    <TouchableOpacity
+                        onPress={() => {
+                            onApply(localRange);
+                            onClose();
+                        }}
+                        className="mt-6 bg-[#099499] rounded-xl py-4 flex-row justify-center items-center active:bg-[#077d82]"
+                    >
+                        <Check size={20} color="white" className="mr-2" />
+                        <Text className="text-white font-bold text-lg ml-2">Applica Filtro</Text>
+                    </TouchableOpacity>
+                </View>
+            </View>
+        </Modal>
+    );
+};