feat: Add document download and upload. Add NFC support and enhance attendance and permits views
- Improved error message handling in LoginScreen for invalid credentials. - Added new images: mariani-icon.png and mariani-splash.png. - Updated AddDocumentModal to handle file extensions and improve UI. - Enhanced CalendarWidget to support month change callbacks. - Introduced NfcScanModal for NFC tag scanning with animations. - Revamped QrScanModal to utilize camera for QR code scanning. - Removed mock data from data.ts and streamlined Office data. - Updated package dependencies for expo-camera and react-native-nfc-manager. - Added utility function to parse seconds to time format. - Refactored document upload logic to use FormData for server uploads.
This commit is contained in:
@ -1,28 +1,81 @@
|
||||
import { useRouter } from 'expo-router';
|
||||
import { AlertTriangle, CheckCircle2, FileText, QrCode, User } from 'lucide-react-native';
|
||||
import React, { useContext } from 'react';
|
||||
import { ScrollView, Text, TouchableOpacity, View } from 'react-native';
|
||||
import { ATTENDANCE_DATA, DOCUMENTS_DATA } from '@/data/data';
|
||||
import { AlertTriangle, CalendarDays, CheckCircle2, FileText, QrCode, User, CalendarClock, LayoutDashboard } from 'lucide-react-native';
|
||||
import React, { useState, useContext, useEffect } from 'react';
|
||||
import { RefreshControl, ScrollView, Text, TouchableOpacity, View } from 'react-native';
|
||||
import { AuthContext } from '@/utils/authContext';
|
||||
import { ActivityItem } from '@/types/types';
|
||||
import api from '@/utils/api';
|
||||
import LoadingScreen from '@/components/LoadingScreen';
|
||||
|
||||
export default function HomeScreen() {
|
||||
const router = useRouter();
|
||||
const { user } = useContext(AuthContext);
|
||||
const incompleteTasks = ATTENDANCE_DATA.filter(item => item.status === 'incomplete');
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [refreshing, setRefreshing] = useState(false);
|
||||
const [incompleteAttendance, setIncompleteAttendance] = useState<string | null>(null);
|
||||
const [recentActivities, setRecentActivities] = useState<ActivityItem[]>([]);
|
||||
|
||||
const fetchDashboardData = async () => {
|
||||
try {
|
||||
if (!refreshing) setIsLoading(true);
|
||||
// Fetch incomplete attendance data from API
|
||||
const attendance = await api.get('/attendance/incomplete');
|
||||
setIncompleteAttendance(attendance.data);
|
||||
|
||||
// Fetch recent activities data from API
|
||||
const activities = await api.get('/user/recent-activities');
|
||||
setRecentActivities(activities.data);
|
||||
} catch (error) {
|
||||
console.error('Errore nel recupero dei dati della dashboard:', error);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
setRefreshing(false);
|
||||
}
|
||||
};
|
||||
|
||||
const getActivityConfig = (type: string) => {
|
||||
switch (type) {
|
||||
case 'document':
|
||||
return { icon: FileText, bg: 'bg-gray-100', color: '#4b5563' };
|
||||
case 'attendance':
|
||||
return { icon: CheckCircle2, bg: 'bg-[#099499]/10', color: '#099499' };
|
||||
case 'permit':
|
||||
return { icon: CalendarClock, bg: 'bg-[#2563eb]/10', color: '#2563eb' };
|
||||
default:
|
||||
return { icon: LayoutDashboard, bg: 'bg-gray-100', color: '#9ca3af' };
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
fetchDashboardData();
|
||||
}, []);
|
||||
|
||||
const onRefresh = () => {
|
||||
setRefreshing(true);
|
||||
fetchDashboardData();
|
||||
};
|
||||
|
||||
if (isLoading && !refreshing) {
|
||||
return (
|
||||
<LoadingScreen />
|
||||
);
|
||||
}
|
||||
|
||||
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>
|
||||
<View className="flex-row items-center gap-4 flex-1 mr-4">
|
||||
<View className="flex-1">
|
||||
<Text className="text-teal-100 text-lg font-medium uppercase tracking-wider mb-1">Benvenuto</Text>
|
||||
<Text className="text-white text-3xl font-bold">{user?.name} {user?.surname}</Text>
|
||||
<Text className="text-white text-3xl font-bold leading-tight">
|
||||
{user?.name} {user?.surname}
|
||||
</Text>
|
||||
<Text className="text-xl text-teal-200">{user?.role}</Text>
|
||||
</View>
|
||||
</View>
|
||||
<View className="flex-row gap-4">
|
||||
<View className="flex-row gap-4 flex-shrink-0">
|
||||
<TouchableOpacity className="p-3 bg-white/10 rounded-full active:bg-white/20" onPress={() => router.push('/profile')}>
|
||||
<User size={28} color="white" />
|
||||
</TouchableOpacity>
|
||||
@ -35,18 +88,21 @@ export default function HomeScreen() {
|
||||
className="flex-1 bg-gray-50 rounded-t-[2.5rem] px-5 pt-6"
|
||||
contentContainerStyle={{ paddingBottom: 50, gap: 24 }}
|
||||
showsVerticalScrollIndicator={false}
|
||||
refreshControl={
|
||||
<RefreshControl refreshing={refreshing} onRefresh={onRefresh} colors={['#099499']} />
|
||||
}
|
||||
>
|
||||
|
||||
{/* 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">
|
||||
{/* Warning Card */}
|
||||
{incompleteAttendance && (
|
||||
<View className="bg-white p-6 rounded-3xl shadow-md 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>
|
||||
<Text className="text-base text-gray-500 mt-1">{incompleteAttendance}</Text>
|
||||
</View>
|
||||
</View>
|
||||
<TouchableOpacity onPress={() => router.push('/attendance')} className="bg-orange-50 px-5 py-3 rounded-xl ml-2 active:bg-orange-100">
|
||||
@ -70,13 +126,13 @@ export default function HomeScreen() {
|
||||
</TouchableOpacity>
|
||||
|
||||
<TouchableOpacity
|
||||
onPress={() => router.push('/documents')}
|
||||
onPress={() => router.push('/permits')}
|
||||
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" />
|
||||
<CalendarDays size={40} color="#2563eb" />
|
||||
</View>
|
||||
<Text className="text-lg font-bold text-gray-700 text-center">Carica Documento</Text>
|
||||
<Text className="text-lg font-bold text-gray-700 text-center">Gestisci Permessi</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</View>
|
||||
@ -85,37 +141,62 @@ export default function HomeScreen() {
|
||||
<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>
|
||||
{/* <TouchableOpacity>
|
||||
<Text className="text-base text-[#099499] font-bold p-1">Vedi tutto</Text>
|
||||
</TouchableOpacity>
|
||||
</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" />
|
||||
{recentActivities.map((item) => {
|
||||
const config = getActivityConfig(item.type);
|
||||
const IconComponent = config.icon;
|
||||
return (
|
||||
<View key={item.id} className="bg-white p-5 rounded-3xl shadow-sm border border-gray-100 flex-row items-center justify-between">
|
||||
<View className="flex-row items-center gap-4 flex-1">
|
||||
|
||||
{/* Icona */}
|
||||
<View className={`${config.bg} p-4 rounded-2xl flex-shrink-0`}>
|
||||
<IconComponent size={24} color={config.color} />
|
||||
</View>
|
||||
|
||||
{/* Titolo e Sottotitolo */}
|
||||
<View className="flex-1 mr-2">
|
||||
<Text
|
||||
className="text-lg font-bold text-gray-800 mb-0.5 leading-tight"
|
||||
numberOfLines={1}
|
||||
ellipsizeMode="tail"
|
||||
>
|
||||
{item.title}
|
||||
</Text>
|
||||
<Text
|
||||
className="text-base text-gray-400 font-medium"
|
||||
numberOfLines={1}
|
||||
>
|
||||
{item.subtitle}
|
||||
</Text>
|
||||
</View>
|
||||
</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>
|
||||
|
||||
{/* Data */}
|
||||
<View className="flex-shrink-0">
|
||||
<Text className="text-sm font-bold text-gray-300">{item.date_display}</Text>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
})}
|
||||
|
||||
{/* Empty State */}
|
||||
{!isLoading && recentActivities.length === 0 && (
|
||||
<View className="bg-white p-8 rounded-3xl border border-gray-100 items-center justify-center border-dashed">
|
||||
<Text className="text-gray-400 font-medium">Nessuna attività recente</Text>
|
||||
</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>
|
||||
)}
|
||||
|
||||
{/* Loading State */}
|
||||
{isLoading && recentActivities.length === 0 && (
|
||||
<View className="bg-white p-5 rounded-3xl border border-gray-100 h-24 justify-center items-center">
|
||||
<Text className="text-gray-400">Caricamento...</Text>
|
||||
</View>
|
||||
))}
|
||||
)}
|
||||
</View>
|
||||
</View>
|
||||
</ScrollView>
|
||||
|
||||
Reference in New Issue
Block a user