101 lines
5.2 KiB
TypeScript
101 lines
5.2 KiB
TypeScript
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>
|
|
<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>
|
|
);
|
|
} |