feat: update app configuration and enhance UI components
This commit is contained in:
@@ -1,12 +1,13 @@
|
||||
import { useAlert } from '@/components/AlertComponent';
|
||||
import React, { useState } from 'react';
|
||||
import { View, Text, Modal, TouchableOpacity, TextInput, ScrollView } from 'react-native';
|
||||
import DateTimePicker, { DateType, useDefaultStyles } from 'react-native-ui-datepicker';
|
||||
import { View, Text, Modal, TouchableOpacity, TextInput, ScrollView, Platform } from 'react-native';
|
||||
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';
|
||||
import { AppDatePicker } from '@/components/AppDatePicker';
|
||||
import { KeyboardAvoidingView } from 'react-native-keyboard-controller';
|
||||
|
||||
interface RequestPermitModalProps {
|
||||
visible: boolean;
|
||||
@@ -16,7 +17,6 @@ interface RequestPermitModalProps {
|
||||
}
|
||||
|
||||
export default function RequestPermitModal({ visible, types, onClose, onSubmit }: RequestPermitModalProps) {
|
||||
const defaultStyles = useDefaultStyles('light');
|
||||
const alert = useAlert();
|
||||
const [type, setType] = useState<TimeOffRequestType>(types[0]); // Default to first type
|
||||
const [date, setDate] = useState<string | null>();
|
||||
@@ -116,143 +116,142 @@ export default function RequestPermitModal({ visible, types, onClose, onSubmit }
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
|
||||
<ScrollView showsVerticalScrollIndicator={false} contentContainerStyle={{ paddingBottom: 40 }}>
|
||||
<View className="space-y-6">
|
||||
{/* Permit Type */}
|
||||
<View className='mb-6'>
|
||||
<Text className="text-lg font-bold text-gray-700 mb-3">Tipologia Assenza</Text>
|
||||
<ScrollView
|
||||
horizontal
|
||||
showsHorizontalScrollIndicator={false}
|
||||
contentContainerStyle={{ paddingHorizontal: 0, gap: 12 }}
|
||||
>
|
||||
{types.map((t) => (
|
||||
<TouchableOpacity
|
||||
key={t.id}
|
||||
onPress={() => setType(t)}
|
||||
className={`py-4 px-5 rounded-xl border-2 items-center justify-center ${type?.id === t.id ? 'border-[#099499] bg-teal-50' : 'border-gray-100 bg-white'
|
||||
}`}
|
||||
>
|
||||
<Text className={`text-sm font-bold ${type?.id === t.id ? 'text-[#099499]' : 'text-gray-500'}`}>
|
||||
{t.name}
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
))}
|
||||
</ScrollView>
|
||||
</View>
|
||||
<KeyboardAvoidingView
|
||||
behavior={"padding"}
|
||||
keyboardVerticalOffset={100}
|
||||
className='flex-1 mh-600'
|
||||
>
|
||||
<ScrollView showsVerticalScrollIndicator={false} contentContainerStyle={{ paddingBottom: 40 }}>
|
||||
<View className="space-y-6">
|
||||
{/* Permit Type */}
|
||||
<View className='mb-6'>
|
||||
<Text className="text-lg font-bold text-gray-700 mb-3">Tipologia Assenza</Text>
|
||||
<ScrollView
|
||||
horizontal
|
||||
showsHorizontalScrollIndicator={false}
|
||||
contentContainerStyle={{ paddingHorizontal: 0, gap: 12 }}
|
||||
>
|
||||
{types.map((t) => (
|
||||
<TouchableOpacity
|
||||
key={t.id}
|
||||
onPress={() => setType(t)}
|
||||
className={`py-4 px-5 rounded-xl border-2 items-center justify-center ${type?.id === t.id ? 'border-[#099499] bg-teal-50' : 'border-gray-100 bg-white'
|
||||
}`}
|
||||
>
|
||||
<Text className={`text-sm font-bold ${type?.id === t.id ? 'text-[#099499]' : 'text-gray-500'}`}>
|
||||
{t.name}
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
))}
|
||||
</ScrollView>
|
||||
</View>
|
||||
|
||||
{/* Date and Time Selection */}
|
||||
{type?.time_required === 0 ? (
|
||||
<DateTimePicker
|
||||
mode="range"
|
||||
startDate={range.startDate}
|
||||
endDate={range.endDate}
|
||||
onChange={(params) => {
|
||||
setRange({
|
||||
startDate: params.startDate ? formatPickerDate(params.startDate) : null,
|
||||
endDate: params.endDate ? formatPickerDate(params.endDate) : null
|
||||
})
|
||||
}}
|
||||
locale='it'
|
||||
styles={{
|
||||
...defaultStyles,
|
||||
selected: { backgroundColor: '#099499' },
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<DateTimePicker
|
||||
mode="single"
|
||||
date={date}
|
||||
onChange={({ date }) => setDate(date ? formatPickerDate(date) : null)}
|
||||
locale='it'
|
||||
styles={{
|
||||
...defaultStyles,
|
||||
selected: { backgroundColor: '#099499' }
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
|
||||
<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-sm 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-sm 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>
|
||||
|
||||
<TimePickerModal
|
||||
visible={showStartPicker}
|
||||
initialDate={new Date()}
|
||||
title="Seleziona Ora Inizio"
|
||||
onConfirm={(time) => setStartTime(time)}
|
||||
onClose={() => setShowStartPicker(false)}
|
||||
/>
|
||||
<TimePickerModal
|
||||
visible={showEndPicker}
|
||||
initialDate={new Date()}
|
||||
title="Seleziona Ora Fine"
|
||||
onConfirm={(time) => setEndTime(time)}
|
||||
onClose={() => setShowEndPicker(false)}
|
||||
/>
|
||||
</View>
|
||||
{/* Date and Time Selection */}
|
||||
{type?.time_required === 0 ? (
|
||||
<AppDatePicker
|
||||
mode="range"
|
||||
startDate={range.startDate}
|
||||
endDate={range.endDate}
|
||||
onChange={(params) => {
|
||||
setRange({
|
||||
startDate: params.startDate ? formatPickerDate(params.startDate) : null,
|
||||
endDate: params.endDate ? formatPickerDate(params.endDate) : null
|
||||
})
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<AppDatePicker
|
||||
mode="single"
|
||||
date={date}
|
||||
onChange={({ date }) => setDate(date ? formatPickerDate(date) : null)}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Reason field */}
|
||||
<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 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-sm font-bold text-orange-800 mb-2 uppercase">Dalle Ore</Text>
|
||||
<TouchableOpacity onPress={() => setShowStartPicker(true)}>
|
||||
<TextInput
|
||||
placeholder="09:00"
|
||||
placeholderTextColor="#9CA3AF"
|
||||
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-sm font-bold text-orange-800 mb-2 uppercase">Alle Ore</Text>
|
||||
<TouchableOpacity onPress={() => setShowEndPicker(true)}>
|
||||
<TextInput
|
||||
placeholder="18:00"
|
||||
placeholderTextColor="#9CA3AF"
|
||||
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>
|
||||
|
||||
<TimePickerModal
|
||||
visible={showStartPicker}
|
||||
initialDate={new Date()}
|
||||
title="Seleziona Ora Inizio"
|
||||
onConfirm={(time) => setStartTime(time)}
|
||||
onClose={() => setShowStartPicker(false)}
|
||||
/>
|
||||
<TimePickerModal
|
||||
visible={showEndPicker}
|
||||
initialDate={new Date()}
|
||||
title="Seleziona Ora Fine"
|
||||
onConfirm={(time) => setEndTime(time)}
|
||||
onClose={() => setShowEndPicker(false)}
|
||||
/>
|
||||
</View>
|
||||
)}
|
||||
|
||||
{/* Reason field */}
|
||||
<View className="p-4">
|
||||
<Text className="text-sm font-bold text-orange-800 mb-2 uppercase">Motivo</Text>
|
||||
<TextInput
|
||||
placeholder="Scrivi qui il motivo..."
|
||||
placeholderTextColor="#9CA3AF"
|
||||
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>
|
||||
|
||||
{/* Actions */}
|
||||
<View className="flex-row gap-4">
|
||||
<TouchableOpacity
|
||||
onPress={() => {
|
||||
clearCalendar();
|
||||
onClose();
|
||||
}}
|
||||
className="flex-1 py-4 bg-gray-200 rounded-2xl shadow-sm active:bg-gray-300"
|
||||
>
|
||||
<Text className="text-gray-700 text-center font-bold text-lg">Annulla Richiesta</Text>
|
||||
</TouchableOpacity>
|
||||
|
||||
<TouchableOpacity
|
||||
onPress={handleSubmit}
|
||||
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>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* Actions */}
|
||||
<View className="flex-row gap-4">
|
||||
<TouchableOpacity
|
||||
onPress={() => {
|
||||
clearCalendar();
|
||||
onClose();
|
||||
}}
|
||||
className="flex-1 py-4 bg-gray-200 rounded-2xl shadow-sm active:bg-gray-300"
|
||||
>
|
||||
<Text className="text-gray-700 text-center font-bold text-lg">Annulla Richiesta</Text>
|
||||
</TouchableOpacity>
|
||||
|
||||
<TouchableOpacity
|
||||
onPress={handleSubmit}
|
||||
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>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</View>
|
||||
</ScrollView>
|
||||
</ScrollView>
|
||||
</KeyboardAvoidingView>
|
||||
</View>
|
||||
</View>
|
||||
</Modal>
|
||||
|
||||
Reference in New Issue
Block a user