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

Add profile and login screen + first api logic draft

Browse Source
This commit is contained in:
leonardo
2025-12-09 18:29:24 +01:00
parent abe14f4c3f
commit 49b6ecadb2
19 changed files with 1046 additions and 810 deletions
Download Patch File Download Diff File Expand all files Collapse all files

84
app/(protected)/_layout.tsx Normal file
View File

@ -0,0 +1,84 @@
import { Redirect, Tabs } from 'expo-router';
import { Home, Clock, FileText, Zap, CalendarIcon } from 'lucide-react-native';
import { useContext } from 'react';
import { AuthContext } from '@/utils/authContext';
export default function ProtectedLayout() {
const authState = useContext(AuthContext);
if (!authState.isReady) {
return null;
}
if (!authState.isAuthenticated) {
return <Redirect href="/login" />;
}
return (
<Tabs
screenOptions={{
headerShown: false,
tabBarStyle: {
backgroundColor: '#ffffff',
borderTopWidth: 1,
borderTopColor: '#f3f4f6',
height: 80,
paddingBottom: 20,
paddingTop: 10,
},
tabBarActiveTintColor: '#099499',
tabBarInactiveTintColor: '#9ca3af',
tabBarLabelStyle: {
fontSize: 10,
fontWeight: '600',
marginTop: 4
}
}}
backBehavior='history'
>
<Tabs.Screen
name="index"
options={{
title: 'Home',
tabBarIcon: ({ color, size }) => <Home color={color} size={24} />,
}}
/>
<Tabs.Screen
name="attendance/index"
options={{
title: 'Presenze',
tabBarIcon: ({ color, size }) => <Clock color={color} size={24} />,
}}
/>
<Tabs.Screen
name="permits/index"
options={{
title: 'Permessi',
tabBarIcon: ({ color, size }) => <CalendarIcon color={color} size={24} />,
}}
/>
<Tabs.Screen
name="documents/index"
options={{
title: 'Moduli',
tabBarIcon: ({ color, size }) => <FileText color={color} size={24} />,
}}
/>
<Tabs.Screen
name="automation"
options={{
title: 'Domotica',
tabBarIcon: ({ color, size }) => <Zap color={color} size={24} />,
}}
/>
{/* TODO: Da rimuovere */}
<Tabs.Screen
name="profile"
options={{
href: null,
title: 'Profilo',
}}
/>
</Tabs>
);
}

103
app/(protected)/attendance/index.tsx Normal file
View File

@ -0,0 +1,103 @@
import React, { useState } from 'react';
import { View, Text, TouchableOpacity, ScrollView } from 'react-native';
import { QrCode, CheckCircle2 } from 'lucide-react-native';
import { ATTENDANCE_DATA } from '@/data/data';
import QrScanModal from '@/components/QrScanModal';
export default function AttendanceScreen() {
const [showScanner, setShowScanner] = useState(false);
const [lastScan, setLastScan] = useState<{ type: string; time: string; site: string } | null>(null);
const handleQRScan = () => {
setShowScanner(true);
// Simulate scanning process
setTimeout(() => {
setShowScanner(false);
// Add new entry or update existing one
setLastScan({
type: 'Entrata',
time: new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }),
site: 'Cantiere Ospedale A.'
});
}, 3000);
};
return (
<View className="flex-1 bg-gray-50">
{/* Header */}
<View className="bg-white p-6 pt-16 shadow-sm border-b border-gray-100">
<Text className="text-3xl font-bold text-gray-800 mb-1">Gestione Presenze</Text>
<Text className="text-base text-gray-500">Registra i tuoi movimenti</Text>
</View>
<ScrollView contentContainerStyle={{ paddingBottom: 40 }}>
<View className="flex-1 p-5 items-center">
{/* Feedback Card - OPZIONALE */}
{lastScan ? (
<View className="w-full bg-green-50 border border-green-200 rounded-3xl p-6 mb-8 flex-row items-center gap-5 shadow-sm">
<View className="bg-green-500 rounded-full p-3 shadow-lg shadow-green-500/40">
<CheckCircle2 size={32} color="white" />
</View>
<View>
<Text className="font-bold text-green-800 text-xl">{lastScan.type} Registrata!</Text>
<Text className="text-base text-green-700 font-medium">{lastScan.site} alle {lastScan.time}</Text>
</View>
</View>
) : (
null
)}
{/* Scanner Section */}
<View className="w-full mb-6">
<View className="bg-white rounded-3xl p-8 shadow-sm border border-gray-100">
<Text className="text-2xl font-bold text-gray-800 mb-6 text-center">Scansione QR/NFC</Text>
<TouchableOpacity
onPress={handleQRScan}
className="bg-[#099499] rounded-2xl py-6 flex-row items-center justify-center active:bg-[#077d82] shadow-lg shadow-teal-900/20 active:scale-[0.98]"
>
<QrCode color="white" size={32} />
<Text className="text-white text-xl font-bold ml-3">Scansiona Codice</Text>
</TouchableOpacity>
<Text className="text-gray-500 text-center mt-6 text-base px-2 leading-relaxed">
Posiziona il codice QR davanti alla fotocamera o usa il lettore NFC
</Text>
</View>
</View>
{/* Mini History */}
<View className="w-full mt-4">
<Text className="text-gray-500 font-bold text-base mb-4 uppercase tracking-wider px-2">Oggi</Text>
<View className="bg-white rounded-3xl shadow-sm overflow-hidden border border-gray-100">
{ATTENDANCE_DATA.map((item, index) => (
<View key={item.id} className={`p-6 flex-row justify-between items-center ${index !== 0 ? 'border-t border-gray-100' : ''}`}>
<View className="flex-row items-center gap-4">
<View className={`w-3 h-3 rounded-full shadow-sm ${item.status === 'complete' ? 'bg-green-500' : 'bg-orange-500'}`} />
<View>
<Text className="font-bold text-gray-800 text-lg mb-0.5">{item.site}</Text>
<Text className="text-sm text-gray-400 font-medium">{item.in} - {item.out || 'In corso'}</Text>
</View>
</View>
{item.status === 'complete' && (
<View className="bg-gray-100 px-3 py-1.5 rounded-lg">
<Text className="text-sm font-mono text-gray-600 font-bold">8h</Text>
</View>
)}
</View>
))}
</View>
</View>
</View>
</ScrollView>
{/* Scanner Modal */}
<QrScanModal
visible={showScanner}
onClose={() => setShowScanner(false)}
/>
</View>
);
}

75
app/(protected)/automation/[id].tsx Normal file
View File

@ -0,0 +1,75 @@
import { OFFICES_DATA } from '@/data/data';
import type { OfficeItem } from '@/types/types';
import { Activity, ChevronLeft, Lightbulb, Thermometer, Wifi, WifiOff, Zap, Plus } from 'lucide-react-native';
import React from 'react';
import { useRouter, useLocalSearchParams } from 'expo-router';
import { ScrollView, Text, TouchableOpacity, View } from 'react-native';
export default function AutomationDetail() {
const router = useRouter();
const { id } = useLocalSearchParams<{ id: string }>();
const selectedOffice: OfficeItem | undefined = OFFICES_DATA.find(o => o.id.toString() === id);
if (!selectedOffice) return <Text>Ufficio non trovato</Text>;
return (
<View className="flex-1 bg-gray-50">
{/* Header Dettaglio */}
<View className="bg-white p-6 pt-16 shadow-sm flex-row justify-between items-center border-b border-gray-100">
<View className='flex-row items-center'>
<TouchableOpacity
onPress={() => router.back()}
className="mr-4 p-3 rounded-full bg-gray-50 active:bg-gray-200"
>
<ChevronLeft size={28} color="#4b5563" />
</TouchableOpacity>
<Text className="text-2xl font-bold text-gray-800">{selectedOffice.name}</Text>
</View>
{/* Status Dot */}
<View className={`ms-auto w-4 h-4 rounded-full border-2 border-white shadow-sm ${selectedOffice.status === 'online' ? 'bg-green-500' : 'bg-red-500'}`} />
</View>
<ScrollView contentContainerStyle={{ padding: 20, gap: 24 }} showsVerticalScrollIndicator={false}>
<View className="flex-row gap-5">
{/* Lights Card Grande */}
<TouchableOpacity className={`flex-1 p-6 rounded-3xl border-2 active:scale-95 ${selectedOffice.lights ? 'border-[#099499] bg-teal-50' : 'border-transparent bg-white shadow-sm'}`}>
<View className="flex-row justify-between items-start mb-6">
<Lightbulb size={40} color={selectedOffice.lights ? '#099499' : '#d1d5db'} />
{/* Switch UI Grande - FIXED: Rimossa 'transition-colors' che causava il crash */}
<View className={`w-14 h-8 rounded-full p-1 ${selectedOffice.lights ? 'bg-[#099499]' : 'bg-gray-200'}`}>
<View className={`bg-white w-6 h-6 rounded-full shadow-sm ${selectedOffice.lights ? 'translate-x-6' : 'translate-x-0'}`} />
</View>
</View>
<Text className="text-lg font-bold text-gray-800 mb-1">Luci</Text>
<Text className="text-gray-500 font-medium">{selectedOffice.lights ? 'Accese - 80%' : 'Spente'}</Text>
</TouchableOpacity>
{/* Temp Card Grande */}
<View className="flex-1 bg-white p-6 rounded-3xl border border-transparent shadow-sm">
<Thermometer size={40} color="#fb923c" className="mb-6" />
<Text className="text-lg font-bold text-gray-800 mb-1">Clima</Text>
<View className="flex-row items-end">
<Text className="text-4xl font-bold text-gray-800">{selectedOffice.temp}</Text>
<Text className="text-gray-500 mb-2 ml-1 text-lg">°C</Text>
</View>
</View>
</View>
{/* Chart Card Grande */}
<View className="bg-white p-6 rounded-3xl shadow-sm border border-gray-100">
<View className="flex-row items-center mb-6 gap-3">
<Activity size={28} color="#099499" />
<Text className="text-xl font-bold text-gray-700">Consumo Oggi</Text>
</View>
<View className="flex-row items-end justify-between h-48 gap-4">
{[40, 65, 30, 80, 55, 90, 45].map((h, i) => (
<View key={i} className="flex-1 bg-gray-100 rounded-t-xl relative overflow-hidden h-full justify-end">
<View style={{ height: `${h}%` }} className="w-full bg-[#099499] rounded-t-xl opacity-80" />
</View>
))}
</View>
</View>
</ScrollView>
</View>
);
}

10
app/(protected)/automation/_layout.tsx Normal file
View File

@ -0,0 +1,10 @@
import { Stack } from "expo-router";
export default function AutomationLayout() {
return (
<Stack screenOptions={{headerShown: false}}>
<Stack.Screen name="index" />
<Stack.Screen name="[id]" />
</Stack>
);
}

71
app/(protected)/automation/index.tsx Normal file
View File

@ -0,0 +1,71 @@
import { OFFICES_DATA } from '@/data/data';
import type { OfficeItem } from '@/types/types';
import { useRouter } from 'expo-router';
import { Activity, ChevronLeft, Lightbulb, Thermometer, Wifi, WifiOff, Zap, Plus } from 'lucide-react-native';
import React, { useState } from 'react';
import { ScrollView, Text, TouchableOpacity, View } from 'react-native';
export default function AutomationScreen() {
const router = useRouter();
const [selectedOffice, setSelectedOffice] = useState<OfficeItem | null>(null);
// --- LIST VIEW (INGRANDITA) ---
return (
<View className="flex-1 bg-gray-50">
<View className="bg-white p-6 pt-16 shadow-sm flex-row justify-between items-center border-b border-gray-100">
<View>
<Text className="text-3xl font-bold text-gray-800 mb-1">Domotica</Text>
<Text className="text-base text-gray-500">Controlla gli ambienti</Text>
</View>
<View className="bg-green-100 px-4 py-2 rounded-xl border border-green-200 mt-1">
<Text className="text-xs font-bold text-green-700 tracking-wide">ONLINE</Text>
</View>
</View>
<ScrollView contentContainerStyle={{ padding: 20, gap: 20 }} showsVerticalScrollIndicator={false}>
{OFFICES_DATA.map((office) => (
<TouchableOpacity
key={office.id}
onPress={() => router.push(`/automation/${office.id}`)}
className="bg-white rounded-3xl p-6 shadow-sm flex-row items-center justify-between border border-gray-100 active:border-[#099499]/30 active:scale-[0.98]"
>
<View className="flex-row items-center gap-5">
<View className={`p-5 rounded-2xl ${office.status === 'online' ? 'bg-teal-50' : 'bg-gray-100'}`}>
{office.status === 'online' ?
<Wifi size={32} color="#099499" /> :
<WifiOff size={32} color="#9ca3af" />
}
</View>
<View>
<Text className="font-bold text-gray-800 text-xl mb-2">{office.name}</Text>
<View className="flex-row items-center gap-4">
<View className="flex-row items-center gap-1.5">
<Thermometer size={16} color="#6b7280" />
<Text className="text-sm font-medium text-gray-600">{office.temp}°C</Text>
</View>
<View className="w-1 h-1 rounded-full bg-gray-300" />
<View className="flex-row items-center gap-1.5">
<Zap size={16} color="#eab308" />
<Text className="text-sm font-medium text-gray-600">{office.power}W</Text>
</View>
</View>
</View>
</View>
{/* Status Dot */}
<View className={`w-4 h-4 rounded-full border-2 border-white shadow-sm ${office.status === 'online' ? 'bg-green-500' : 'bg-red-500'}`} />
</TouchableOpacity>
))}
{/* Spacer finale per la navbar */}
<View className="h-20" />
</ScrollView>
{/* FAB */}
<TouchableOpacity
onPress={() => alert('Aggiungi nuovo collegamento')}
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>
);
}

136
app/(protected)/documents/index.tsx Normal file
View File

@ -0,0 +1,136 @@
import { DOCUMENTS_DATA } from '@/data/data';
import { Download, FileText, MapPin, Plus, Search, CalendarIcon } from 'lucide-react-native';
import React, { useState } from 'react';
import { RangePickerModal } from '@/components/RangePickerModal';
import { ScrollView, Text, TextInput, TouchableOpacity, View } from 'react-native';
import dayjs from 'dayjs';
export default function DocumentsScreen() {
const [searchTerm, setSearchTerm] = useState('');
// Gestiamo le date come oggetti Dayjs o null per il datepicker, e stringhe per il filtro
const [range, setRange] = useState<{ startDate: any; endDate: any }>({
startDate: null,
endDate: null
});
const [showRangePicker, setShowRangePicker] = useState(false);
// Funzione helper per convertire DD/MM/YYYY in oggetto Date (per il filtro esistente)
const parseDate = (dateStr: string) => {
if (!dateStr) return new Date();
const [day, month, year] = dateStr.split('/').map(Number);
return new Date(year, month - 1, day);
};
const filteredDocs = DOCUMENTS_DATA.filter(doc => {
// Filtro Testuale
const matchesSearch = doc.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
doc.site.toLowerCase().includes(searchTerm.toLowerCase());
if (!matchesSearch) return false;
// Filtro Date Range
if (range.startDate || range.endDate) {
const docDate = parseDate(doc.date); // doc.date è "DD/MM/YYYY"
// Controllo Data Inizio
if (range.startDate) {
// dayjs(range.startDate).toDate() converte in oggetto Date JS standard
const start = dayjs(range.startDate).startOf('day').toDate();
if (docDate < start) return false;
}
// Controllo Data Fine
if (range.endDate) {
const end = dayjs(range.endDate).endOf('day').toDate();
if (docDate > end) return false;
}
}
return true;
});
// Funzione per formattare la visualizzazione
const formatDateDisplay = (date: any) => {
return date ? dayjs(date).format('DD/MM/YYYY') : 'gg/mm/aaaa';
};
return (
<View className="flex-1 bg-gray-50">
{/* Header */}
<View className="bg-white p-6 pt-16 shadow-sm border-b border-gray-100">
<Text className="text-3xl font-bold text-gray-800 mb-1">Documenti</Text>
<Text className="text-base text-gray-500">Gestione modulistica e schemi</Text>
</View>
<View className="p-5 gap-6 flex-1">
{/* Search + Date Row */}
<View className="flex-row gap-2">
{/* Search Bar */}
<View className={`flex-1 relative justify-center shadow-sm rounded-2xl border ${searchTerm ? 'border-[#099499]' : 'border-gray-200'}`}>
<View className="absolute left-4 z-10">
<Search size={24} color="#9ca3af" />
</View>
<TextInput
placeholder="Cerca nome, cantiere..."
placeholderTextColor="#9ca3af"
className="w-full pl-12 pr-4 py-4 bg-white rounded-2xl text-gray-800 text-lg"
value={searchTerm}
onChangeText={setSearchTerm}
/>
</View>
{/* Date Filter Button */}
<TouchableOpacity
onPress={() => setShowRangePicker(true)}
className={`p-4 bg-white rounded-2xl shadow-sm border ${range.startDate ? 'border-[#099499]' : 'border-gray-200'}`}
>
<CalendarIcon size={24} color={range.startDate ? "#099499" : "#9ca3af"} />
</TouchableOpacity>
</View>
{/* Modale Unico per il Range */}
<RangePickerModal
visible={showRangePicker}
onClose={() => setShowRangePicker(false)}
currentRange={range}
onApply={setRange}
/>
{/* List */}
<ScrollView
contentContainerStyle={{ gap: 16, paddingBottom: 100 }}
showsVerticalScrollIndicator={false}
>
{filteredDocs.map((doc) => (
<View key={doc.id} className="bg-white p-5 rounded-3xl shadow-sm flex-row items-center justify-between border border-gray-100">
<View className="flex-row items-center gap-5 flex-1">
<View className="bg-red-50 p-4 rounded-2xl">
<FileText size={32} color="#ef4444" />
</View>
<View className="flex-1">
<Text className="font-bold text-gray-800 text-lg mb-1">{doc.name}</Text>
<View className="flex-row items-center mt-1">
<MapPin size={16} color="#9ca3af" />
<Text className="text-sm text-gray-400 ml-1 font-medium">{doc.site}</Text>
</View>
</View>
</View>
<TouchableOpacity className="p-4 bg-gray-50 rounded-2xl active:bg-gray-100">
<Download size={24} color="#6b7280" />
</TouchableOpacity>
</View>
))}
</ScrollView>
</View>
{/* FAB */}
<TouchableOpacity
onPress={() => alert('Aggiungi nuovo documento')}
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>
);
}

126
app/(protected)/index.tsx Normal file
View File

@ -0,0 +1,126 @@
import { useRouter } from 'expo-router';
import { AlertTriangle, Bell, CheckCircle2, FileText, QrCode, User } from 'lucide-react-native';
import React from 'react';
import { ScrollView, Text, TouchableOpacity, View } from 'react-native';
import { ATTENDANCE_DATA, DOCUMENTS_DATA, MOCK_USER } from '../../data/data';
export default function HomeScreen() {
const router = useRouter();
const incompleteTasks = ATTENDANCE_DATA.filter(item => item.status === 'incomplete');
return (
<View className="flex-1 bg-[#099499]">
{/* Banner Custom */}
<View className="pt-16 pb-6 px-6 shadow-sm z-10">
<View className="flex-row justify-between items-start">
<View className="flex-row items-center gap-4">
<View>
<Text className="text-teal-100 text-lg font-medium uppercase tracking-wider mb-1">Benvenuto</Text>
<Text className="text-white text-3xl font-bold">{MOCK_USER.name} {MOCK_USER.surname}</Text>
<Text className="text-teal-200">{MOCK_USER.role}</Text>
</View>
</View>
<View className="flex-row gap-4">
<TouchableOpacity className="relative p-3 bg-white/10 rounded-full active:bg-white/20">
<Bell size={28} color="white" />
<View className="absolute top-2.5 right-3 w-3 h-3 bg-red-500 rounded-full border-2 border-[#099499]" />
</TouchableOpacity>
<TouchableOpacity className="p-3 bg-white/10 rounded-full active:bg-white/20" onPress={() => router.push('/profile')}>
<User size={28} color="white" />
</TouchableOpacity>
</View>
</View>
</View>
{/* Contenuto Scrollabile */}
<ScrollView
className="flex-1 bg-gray-50 rounded-t-[2.5rem] px-5 pt-6"
contentContainerStyle={{ paddingBottom: 50, gap: 24 }}
showsVerticalScrollIndicator={false}
>
{/* Warning Card - OPZIONALE */}
{incompleteTasks.length > 0 && (
<View className="bg-white p-6 rounded-3xl shadow-sm border-l-8 border-orange-500 flex-row items-center justify-between">
<View className="flex-row items-center gap-5 flex-1">
<View className="bg-orange-100 p-4 rounded-full">
<AlertTriangle size={32} color="#f97316" />
</View>
<View className="flex-1">
<Text className="font-bold text-gray-800 text-lg">Presenza incompleta</Text>
<Text className="text-base text-gray-500 mt-1">{incompleteTasks[0].site}</Text>
</View>
</View>
<TouchableOpacity onPress={() => router.push('/attendance')} className="bg-orange-50 px-5 py-3 rounded-xl ml-2 active:bg-orange-100">
<Text className="text-orange-600 text-sm font-bold uppercase tracking-wide">Risolvi</Text>
</TouchableOpacity>
</View>
)}
{/* Quick Actions */}
<View>
<Text className="text-gray-800 text-xl font-bold mb-4 px-1">Azioni Rapide</Text>
<View className="flex-row gap-5">
<TouchableOpacity
onPress={() => router.push('/attendance')}
className="flex-1 bg-white p-6 rounded-3xl shadow-sm items-center justify-center gap-4 border border-gray-100 active:scale-[0.98]"
>
<View className="w-20 h-20 rounded-full bg-teal-50 items-center justify-center mb-1">
<QrCode size={40} color="#099499" />
</View>
<Text className="text-lg font-bold text-gray-700 text-center">Nuova Presenza</Text>
</TouchableOpacity>
<TouchableOpacity
onPress={() => router.push('/documents')}
className="flex-1 bg-white p-6 rounded-3xl shadow-sm items-center justify-center gap-4 border border-gray-100 active:scale-[0.98]"
>
<View className="w-20 h-20 rounded-full bg-blue-50 items-center justify-center mb-1">
<FileText size={40} color="#2563eb" />
</View>
<Text className="text-lg font-bold text-gray-700 text-center">Carica Documento</Text>
</TouchableOpacity>
</View>
</View>
{/* Recent Activity */}
<View>
<View className="flex-row justify-between items-center px-1 mb-4">
<Text className="text-gray-800 text-xl font-bold">Ultime Attività</Text>
<TouchableOpacity>
<Text className="text-base text-[#099499] font-bold p-1">Vedi tutto</Text>
</TouchableOpacity>
</View>
<View className="gap-4">
{DOCUMENTS_DATA.slice(0, 2).map((doc, i) => (
<View key={i} className="bg-white p-5 rounded-2xl shadow-sm flex-row items-center justify-between border border-gray-100">
<View className="flex-row items-center gap-5">
<View className="bg-gray-100 p-4 rounded-2xl">
<FileText size={28} color="#4b5563" />
</View>
<View>
<Text className="text-lg font-bold text-gray-800 mb-1">{doc.name}</Text>
<Text className="text-sm text-gray-400">Nuovo documento • {doc.date}</Text>
</View>
</View>
</View>
))}
{ATTENDANCE_DATA.slice(0, 1).map((att, i) => (
<View key={i + 10} className="bg-white p-5 rounded-2xl shadow-sm flex-row items-center justify-between border border-gray-100">
<View className="flex-row items-center gap-5">
<View className="bg-[#099499]/10 p-4 rounded-2xl">
<CheckCircle2 size={28} color="#099499" />
</View>
<View>
<Text className="text-lg font-bold text-gray-800 mb-1">Presenza Completata</Text>
<Text className="text-sm text-gray-400">{att.site} • {att.in}</Text>
</View>
</View>
</View>
))}
</View>
</View>
</ScrollView>
</View>
);
}

176
app/(protected)/permits/index.tsx Normal file
View 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/RequestPermitModal';
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>
);
}

7
app/(protected)/profile/_layout.tsx Normal file
View File

@ -0,0 +1,7 @@
import { Stack } from "expo-router";
export default function ProfileLayout() {
return (
<Stack screenOptions={{headerShown: false}} />
);
}

132
app/(protected)/profile/index.tsx Normal file
View File

@ -0,0 +1,132 @@
import { useRouter } from 'expo-router';
import { ChevronLeft, LogOut, Mail, Settings, Smartphone, User } from 'lucide-react-native';
import React, { useContext } from 'react';
import { ScrollView, Text, TouchableOpacity, View } from 'react-native';
import { MOCK_USER } from '@/data/data';
import { AuthContext } from '@/utils/authContext';
export default function ProfileScreen() {
const authContext = useContext(AuthContext);
const router = useRouter();
// Dati fittizi aggiuntivi (possono essere presi dal backend in seguito)
const email = `${MOCK_USER.name.toLowerCase().replace(/\s+/g, '.')}@example.com`;
const phone = '+39 345 123 4567';
const initials = MOCK_USER.name.split(' ').map(n => n[0]).slice(0, 2).join('').toUpperCase();
return (
<View className="flex-1 bg-[#099499]">
{/* --- SEZIONE HEADER (INVARIATA) --- */}
<View className="pt-16 pb-6 px-6">
<View className="flex-row justify-start items-center gap-4">
<TouchableOpacity
onPress={() => router.back()}
>
<ChevronLeft size={28} color="white" />
</TouchableOpacity>
<View className="flex-row items-center gap-4">
<View className="w-16 h-16 rounded-full bg-white/20 items-center justify-center">
<Text className="text-white font-bold text-2xl">{initials}</Text>
</View>
<View>
<Text className="text-teal-100 text-lg font-medium uppercase tracking-wider mb-1">Profilo</Text>
<Text className="text-white text-2xl font-bold">{MOCK_USER.name} {MOCK_USER.surname}</Text>
</View>
</View>
</View>
</View>
<ScrollView
className="flex-1 bg-gray-50 rounded-t-[2.5rem] px-5 pt-8"
contentContainerStyle={{ paddingBottom: 60, gap: 24 }}
showsVerticalScrollIndicator={false}
>
{/* Card info - Testi ingranditi */}
<View className="bg-white p-7 rounded-3xl shadow-sm border border-gray-100">
{/* Titolo sezione ingrandito */}
<Text className="text-2xl font-bold text-gray-800">Informazioni</Text>
<View className="mt-6 gap-5">
<View className="flex-row items-center gap-5">
{/* Icona leggermente più grande e container adattato */}
<View className="w-14 h-14 bg-gray-100 rounded-2xl items-center justify-center">
<Mail size={24} color="#374151" />
</View>
<View>
{/* Label e valore ingranditi */}
<Text className="text-lg text-gray-700 font-bold">Email</Text>
<Text className="text-gray-500 text-base">{email}</Text>
</View>
</View>
{/* // TODO: Rimuovere telefono, si potrebbe sostituire con altro dato? */}
{/* <View className="flex-row items-center gap-5">
<View className="w-14 h-14 bg-gray-100 rounded-2xl items-center justify-center">
<Smartphone size={24} color="#374151" />
</View>
<View>
<Text className="text-lg text-gray-700 font-bold">Telefono</Text>
<Text className="text-gray-500 text-base">{phone}</Text>
</View>
</View> */}
<View className="flex-row items-center gap-5">
<View className="w-14 h-14 bg-gray-100 rounded-2xl items-center justify-center">
<User size={24} color="#374151" />
</View>
<View>
<Text className="text-lg text-gray-700 font-bold">Ruolo</Text>
<Text className="text-gray-500 text-base capitalize">{MOCK_USER.role}</Text>
</View>
</View>
</View>
</View>
{/* Actions - Testi e Pulsanti ingranditi */}
<View>
<Text className="text-gray-800 text-2xl font-bold mb-5 px-1">Azioni</Text>
<TouchableOpacity onPress={() => router.push('/permits')} className="bg-white p-4 rounded-3xl shadow-sm flex-row items-center justify-between border border-gray-100 mb-4">
<View className="flex-row items-center gap-5">
<View className="bg-[#099499]/10 p-3.5 rounded-2xl">
<Settings size={26} color="#099499" />
</View>
<View>
<Text className="text-lg text-gray-800 font-bold">I miei permessi</Text>
<Text className="text-base text-gray-400 mt-0.5">Richiedi o controlla lo stato</Text>
</View>
</View>
<Text className="text-[#099499] text-base font-bold">Apri</Text>
</TouchableOpacity>
<TouchableOpacity onPress={() => console.log('Apri impostazioni')} className="bg-white p-4 rounded-3xl shadow-sm flex-row items-center justify-between border border-gray-100 mb-4">
<View className="flex-row items-center gap-5">
<View className="bg-gray-100 p-3.5 rounded-2xl">
<Settings size={26} color="#374151" />
</View>
<View>
<Text className="text-lg text-gray-800 font-bold">Impostazioni</Text>
<Text className="text-base text-gray-400 mt-0.5">Preferenze e privacy</Text>
</View>
</View>
<Text className="text-gray-400 text-base font-bold">Apri</Text>
</TouchableOpacity>
<TouchableOpacity onPress={authContext.logOut} className="bg-white p-4 rounded-3xl shadow-sm flex-row items-center justify-between border border-gray-100">
<View className="flex-row items-center gap-5">
<View className="bg-red-50 p-3.5 rounded-2xl">
<LogOut size={26} color="#ef4444" />
</View>
<View>
<Text className="text-lg text-gray-800 font-bold">Esci</Text>
<Text className="text-base text-gray-400 mt-0.5">Chiudi la sessione corrente</Text>
</View>
</View>
<Text className="text-red-500 text-base font-bold">Esci</Text>
</TouchableOpacity>
</View>
</ScrollView>
</View>
);
}