leonardo/mariani_mobile
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

First UI draft

Browse Source
This commit is contained in:
leonardo
2025-12-03 18:15:55 +01:00
parent e5270239e1
commit 2251c42ecf
38 changed files with 2237 additions and 866 deletions
Download Patch File Download Diff File Expand all files Collapse all files

127
components/RenamePermitModal.tsx Normal file
View File

@ -0,0 +1,127 @@
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>
);
};