127 lines
7.0 KiB
TypeScript
127 lines
7.0 KiB
TypeScript
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>
|
|
);
|
|
}; |