First UI draft
This commit is contained in:
176
app/permits/index.tsx
Normal file
176
app/permits/index.tsx
Normal file
@ -0,0 +1,176 @@
|
||||
import React, { useState } from 'react';
|
||||
import { PERMITS_DATA } from '@/data/data';
|
||||
import { Calendar as CalendarIcon, ChevronLeft, ChevronRight, Clock, Plus, Thermometer, X } from 'lucide-react-native';
|
||||
import { ScrollView, Text, TouchableOpacity, View } from 'react-native';
|
||||
import RequestPermitModal from '@/components/RenamePermitModal';
|
||||
|
||||
export default function PermitsScreen() {
|
||||
const [currentDate, setCurrentDate] = useState(new Date(2025, 11, 1)); // Dicembre 2025 Mock
|
||||
const [showModal, setShowModal] = useState(false);
|
||||
|
||||
// Helpers per il calendario
|
||||
const daysInMonth = new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 0).getDate();
|
||||
const firstDayOfMonth = new Date(currentDate.getFullYear(), currentDate.getMonth(), 1).getDay(); // 0 = Sun
|
||||
const adjustedFirstDay = firstDayOfMonth === 0 ? 6 : firstDayOfMonth - 1; // 0 = Mon
|
||||
|
||||
const getEventForDay = (day: number) => {
|
||||
const dateStr = `${currentDate.getFullYear()}-${String(currentDate.getMonth() + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
|
||||
|
||||
return PERMITS_DATA.find(leave => {
|
||||
if (leave.type === 'Permesso') return leave.startDate === dateStr;
|
||||
return dateStr >= leave.startDate && dateStr <= (leave.endDate || leave.startDate);
|
||||
});
|
||||
};
|
||||
|
||||
const weekDays = ['Lun', 'Mar', 'Mer', 'Gio', 'Ven', 'Sab', 'Dom'];
|
||||
|
||||
return (
|
||||
<View className="flex-1 bg-gray-50">
|
||||
<RequestPermitModal
|
||||
visible={showModal}
|
||||
onClose={() => setShowModal(false)}
|
||||
onSubmit={(data) => console.log('Richiesta:', data)}
|
||||
/>
|
||||
|
||||
{/* Header */}
|
||||
<View className="bg-white p-6 pt-16 shadow-sm border-b border-gray-100 flex-row justify-between items-center">
|
||||
<View>
|
||||
<Text className="text-3xl font-bold text-gray-800 mb-1">Ferie e Permessi</Text>
|
||||
<Text className="text-base text-gray-500">Gestisci le tue assenze</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<ScrollView contentContainerStyle={{ padding: 20, paddingBottom: 100, gap: 24 }} showsVerticalScrollIndicator={false}>
|
||||
|
||||
{/* Calendar Widget */}
|
||||
<View className="bg-white rounded-[2rem] p-6 shadow-sm border border-gray-100">
|
||||
<View className="flex-row justify-between items-center mb-6">
|
||||
<TouchableOpacity className="p-2 bg-gray-50 rounded-full">
|
||||
<ChevronLeft size={24} color="#374151" />
|
||||
</TouchableOpacity>
|
||||
<Text className="text-xl font-bold text-gray-800 capitalize">
|
||||
{currentDate.toLocaleString('it-IT', { month: 'long', year: 'numeric' })}
|
||||
</Text>
|
||||
<TouchableOpacity className="p-2 bg-gray-50 rounded-full">
|
||||
<ChevronRight size={24} color="#374151" />
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
|
||||
{/* Week Header */}
|
||||
<View className="flex-row justify-between mb-4">
|
||||
{weekDays.map(day => (
|
||||
<Text key={day} className="w-10 text-center text-xs font-bold text-gray-400 uppercase">{day}</Text>
|
||||
))}
|
||||
</View>
|
||||
|
||||
{/* Days Grid */}
|
||||
<View className="flex-row flex-wrap gap-y-4">
|
||||
{/* Empty slots for alignment */}
|
||||
{Array.from({ length: adjustedFirstDay }).map((_, i) => (
|
||||
<View key={`empty-${i}`} style={{ width: '14.28%' }} />
|
||||
))}
|
||||
{/* Days */}
|
||||
{Array.from({ length: daysInMonth }).map((_, i) => {
|
||||
const day = i + 1;
|
||||
const event = getEventForDay(day);
|
||||
let bgClass = 'bg-transparent';
|
||||
let textClass = 'text-gray-700';
|
||||
let borderClass = 'border-transparent';
|
||||
|
||||
if (event) {
|
||||
if (event.type === 'Ferie') {
|
||||
bgClass = 'bg-purple-100';
|
||||
textClass = 'text-purple-700 font-bold';
|
||||
borderClass = 'border-purple-200';
|
||||
} else if (event.type === 'Permesso') {
|
||||
bgClass = 'bg-orange-100';
|
||||
textClass = 'text-orange-700 font-bold';
|
||||
borderClass = 'border-orange-200';
|
||||
} else if (event.type === 'Malattia') {
|
||||
bgClass = 'bg-red-100';
|
||||
textClass = 'text-red-700 font-bold';
|
||||
borderClass = 'border-red-200';
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<View key={day} style={{ width: '14.28%' }} className="items-center">
|
||||
<View className={`w-10 h-10 rounded-full items-center justify-center border ${bgClass} ${borderClass}`}>
|
||||
<Text className={`text-sm ${textClass}`}>{day}</Text>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
})}
|
||||
</View>
|
||||
|
||||
{/* Legenda */}
|
||||
<View className="flex-row justify-center gap-4 mt-8 pt-4 border-t border-gray-100">
|
||||
<View className="flex-row items-center">
|
||||
<View className="w-3 h-3 rounded-full bg-purple-500 mr-2" />
|
||||
<Text className="text-xs font-medium text-gray-500">Ferie</Text>
|
||||
</View>
|
||||
<View className="flex-row items-center">
|
||||
<View className="w-3 h-3 rounded-full bg-orange-500 mr-2" />
|
||||
<Text className="text-xs font-medium text-gray-500">Permessi</Text>
|
||||
</View>
|
||||
<View className="flex-row items-center">
|
||||
<View className="w-3 h-3 rounded-full bg-red-500 mr-2" />
|
||||
<Text className="text-xs font-medium text-gray-500">Malattia</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* Lista Richieste Recenti */}
|
||||
<View>
|
||||
<Text className="text-lg font-bold text-gray-800 mb-4 px-1">Le tue richieste</Text>
|
||||
<View className="gap-4">
|
||||
{PERMITS_DATA.map((item) => (
|
||||
<View key={item.id} className="bg-white p-5 rounded-3xl shadow-sm border border-gray-100 flex-row justify-between items-center">
|
||||
<View className="flex-row items-center gap-4">
|
||||
<View className={`p-4 rounded-2xl ${
|
||||
item.type === 'Ferie' ? 'bg-purple-50' :
|
||||
item.type === 'Permesso' ? 'bg-orange-50' : 'bg-red-50'
|
||||
}`}>
|
||||
{item.type === 'Ferie' && <CalendarIcon size={24} color="#9333ea" />}
|
||||
{item.type === 'Permesso' && <Clock size={24} color="#ea580c" />}
|
||||
{item.type === 'Malattia' && <Thermometer size={24} color="#dc2626" />}
|
||||
</View>
|
||||
<View>
|
||||
<Text className="font-bold text-gray-800 text-lg">{item.type}</Text>
|
||||
<Text className="text-sm text-gray-500 mt-0.5">
|
||||
{item.startDate} {item.endDate ? `- ${item.endDate}` : ''}
|
||||
</Text>
|
||||
{item.type === 'Permesso' && (
|
||||
<Text className="text-xs text-orange-600 font-bold mt-1">
|
||||
{item.startTime} - {item.endTime}
|
||||
</Text>
|
||||
)}
|
||||
</View>
|
||||
</View>
|
||||
<View className={`px-3 py-1.5 rounded-lg ${
|
||||
item.status === 'Approvato' ? 'bg-green-100' :
|
||||
item.status === 'In Attesa' ? 'bg-yellow-100' : 'bg-red-100'
|
||||
}`}>
|
||||
<Text className={`text-xs font-bold uppercase tracking-wide ${
|
||||
item.status === 'Approvato' ? 'text-green-700' :
|
||||
item.status === 'In Attesa' ? 'text-yellow-700' : 'text-red-700'
|
||||
}`}>
|
||||
{item.status}
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
))}
|
||||
</View>
|
||||
</View>
|
||||
</ScrollView>
|
||||
|
||||
{/* FAB */}
|
||||
<TouchableOpacity
|
||||
onPress={() => setShowModal(true)}
|
||||
className="absolute bottom-8 right-6 w-16 h-16 bg-[#099499] rounded-full shadow-lg items-center justify-center active:scale-90"
|
||||
>
|
||||
<Plus size={32} color="white" />
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user