228 lines
10 KiB
TypeScript
228 lines
10 KiB
TypeScript
import { useAlert } from '@/components/AlertComponent';
|
|
import MachineCard from '@/components/MachineCard';
|
|
import FilterModal from '@/components/FilterModal';
|
|
import LoadingScreen from '@/components/LoadingScreen';
|
|
import QrScanModal from '@/components/QrScanModal';
|
|
import { StatusBar } from 'expo-status-bar';
|
|
import api from '@/utils/api';
|
|
import { formatTime } from '@/utils/dateTime';
|
|
import { CarFront, CheckCircle2, Filter, QrCode } from 'lucide-react-native';
|
|
import React, { useEffect, useState } from 'react';
|
|
import { RefreshControl, ScrollView, Text, TouchableOpacity, View } from 'react-native';
|
|
import { SafeAreaView } from 'react-native-safe-area-context';
|
|
import { MachineAttendanceItem } from '@/types/types';
|
|
|
|
export default function MachineScreen() {
|
|
const alert = useAlert();
|
|
const [showScanner, setShowScanner] = useState(false);
|
|
const [lastScan, setLastScan] = useState<{ type: string; time: string; site: string } | null>(null);
|
|
const [attendances, setAttendances] = useState<MachineAttendanceItem[]>([]);
|
|
const [isLoading, setIsLoading] = useState(true);
|
|
const [refreshing, setRefreshing] = useState(false);
|
|
|
|
// Filters state
|
|
const [isFilterVisible, setIsFilterVisible] = useState(false);
|
|
const [filterRange, setFilterRange] = useState<{ startDate: string | null; endDate: string | null }>({ startDate: null, endDate: null });
|
|
const [filterMachine, setFilterMachine] = useState<any>(null);
|
|
|
|
const activeFiltersCount = (filterRange.startDate ? 1 : 0) + (filterMachine ? 1 : 0);
|
|
|
|
const fetchAttendances = async (currentRange = filterRange, currentMachine = filterMachine) => {
|
|
try {
|
|
if (!refreshing) setIsLoading(true);
|
|
|
|
const rangeParam = currentRange.startDate ? currentRange : null;
|
|
const params = { range: rangeParam, machine: currentMachine };
|
|
const response = await api.post('/machine-attendance/list', { params });
|
|
|
|
if (response.data?.success) {
|
|
setAttendances(response.data.data || []);
|
|
}
|
|
} catch (error) {
|
|
console.error('Errore nel recupero degli utilizzi macchine:', error);
|
|
alert.showAlert('error', 'Errore', 'Impossibile recuperare i dati. Riprova più tardi.');
|
|
} finally {
|
|
setIsLoading(false);
|
|
setRefreshing(false);
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
fetchAttendances();
|
|
setLastScan(null);
|
|
}, []);
|
|
|
|
const onRefresh = () => {
|
|
setRefreshing(true);
|
|
fetchAttendances();
|
|
setLastScan(null);
|
|
};
|
|
|
|
const handleStartScan = () => {
|
|
setShowScanner(true);
|
|
};
|
|
|
|
const onScan = async (data: string) => {
|
|
console.log('Scanned data:', data);
|
|
try {
|
|
const response = await api.post('/machine-attendance/in', { uuid: data });
|
|
if (response.data?.success) {
|
|
console.log('Scan data sent successfully:', response.data);
|
|
fetchAttendances();
|
|
setLastScan({
|
|
type: response.data.type,
|
|
time: formatTime(response.data.time),
|
|
site: response.data.site
|
|
});
|
|
} else {
|
|
alert.showAlert('error', 'Errore', response.data?.message || 'Impossibile registrare operazione.');
|
|
}
|
|
} catch (error) {
|
|
console.error('Errore nell\'invio dei dati di scansione:', error);
|
|
alert.showAlert('error', 'Errore', 'Impossibile registrare operazione. Riprova più tardi.');
|
|
return;
|
|
}
|
|
};
|
|
|
|
if (isLoading && !refreshing) {
|
|
return <LoadingScreen />;
|
|
}
|
|
|
|
return (
|
|
<View className="flex-1 bg-gray-50">
|
|
<StatusBar style="light" />
|
|
{/* Header */}
|
|
<SafeAreaView edges={['top']} className='pt-5 bg-primary-dark'>
|
|
<View className="pb-6 px-6 z-10 flex-row justify-between items-center">
|
|
<View>
|
|
<Text className="text-white text-md font-semibold uppercase tracking-wider mb-1">Elenco degli utilizzi dei mezzi</Text>
|
|
<Text className="text-yellow-400 text-3xl font-bold leading-tight">Macchine</Text>
|
|
</View>
|
|
<View className="bg-white/10 p-4 rounded-full">
|
|
<CarFront size={32} color="white" pointerEvents="none" />
|
|
</View>
|
|
</View>
|
|
</SafeAreaView>
|
|
|
|
<View className="flex-1 bg-gray-50 rounded-t-[2.5rem] overflow-hidden">
|
|
<ScrollView
|
|
contentContainerStyle={{ paddingBottom: 100 }}
|
|
showsVerticalScrollIndicator={false}
|
|
refreshControl={
|
|
<RefreshControl refreshing={refreshing} onRefresh={onRefresh} colors={['#1071C2']} />
|
|
}
|
|
>
|
|
<View className="flex-1 p-5 items-center">
|
|
|
|
{/* Feedback Card */}
|
|
{lastScan ? (
|
|
<View className="w-full bg-green-50 border border-green-200 rounded-3xl p-5 mb-8 flex-row items-center gap-4 shadow-sm">
|
|
<View className="bg-green-500 rounded-full p-3 shadow-lg shadow-green-500/40 flex-shrink-0">
|
|
<CheckCircle2 size={32} color="white" pointerEvents="none" />
|
|
</View>
|
|
<View className="flex-1">
|
|
<Text
|
|
className="font-bold text-green-800 text-xl leading-tight"
|
|
numberOfLines={1}
|
|
ellipsizeMode="tail"
|
|
>
|
|
{lastScan.type} Registrata
|
|
</Text>
|
|
|
|
<Text
|
|
className="text-base text-green-700 font-medium mt-0.5 leading-snug"
|
|
numberOfLines={2}
|
|
ellipsizeMode="tail"
|
|
>
|
|
{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 Code</Text>
|
|
|
|
<TouchableOpacity
|
|
onPress={handleStartScan}
|
|
className="bg-[#1071C2] rounded-2xl py-6 flex-row items-center justify-center active:bg-blue-700 shadow-lg shadow-blue-900/20 active:scale-[0.98]"
|
|
>
|
|
<QrCode color="white" size={32} pointerEvents="none" />
|
|
<Text className="text-white text-xl font-bold ml-3 uppercase">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 per registrare l'ingresso o l'uscita dalla macchina
|
|
</Text>
|
|
</View>
|
|
</View>
|
|
|
|
{/* History using MachineCard component */}
|
|
<View className="w-full mt-4">
|
|
<Text className="text-gray-500 font-bold text-base mb-4 uppercase tracking-wider px-2">Ultimi Utilizzi</Text>
|
|
{attendances.length === 0 ? (
|
|
<View className="bg-white p-6 rounded-3xl border border-gray-100 items-center justify-center border-dashed">
|
|
<Text className="text-gray-400 font-medium">Nessun utilizzo registrato</Text>
|
|
</View>
|
|
) : (
|
|
<View>
|
|
{attendances.map((item, index) => (
|
|
<MachineCard key={index} item={item} />
|
|
))}
|
|
</View>
|
|
)}
|
|
</View>
|
|
|
|
</View>
|
|
</ScrollView>
|
|
|
|
{/* FAB Filter */}
|
|
<TouchableOpacity
|
|
onPress={() => setIsFilterVisible(true)}
|
|
className="absolute bottom-8 right-6 w-16 h-16 bg-[#1071C2] rounded-full shadow-lg items-center justify-center active:scale-90"
|
|
>
|
|
<Filter size={28} color="white" pointerEvents="none" />
|
|
{activeFiltersCount > 0 && (
|
|
<View className="absolute top-0 right-0 bg-red-500 w-6 h-6 rounded-full items-center justify-center border-2 border-white">
|
|
<Text className="text-white text-xs font-bold">{activeFiltersCount}</Text>
|
|
</View>
|
|
)}
|
|
</TouchableOpacity>
|
|
|
|
{/* Filter Modal */}
|
|
<FilterModal
|
|
visible={isFilterVisible}
|
|
showPlace={false}
|
|
showMachine={true}
|
|
currentRange={filterRange}
|
|
currentMachine={filterMachine}
|
|
onClose={() => setIsFilterVisible(false)}
|
|
onApply={(range, place, supplier, machine) => {
|
|
setFilterRange(range);
|
|
setFilterMachine(machine);
|
|
setIsFilterVisible(false);
|
|
fetchAttendances(range, machine);
|
|
}}
|
|
onReset={() => {
|
|
const emptyRange = { startDate: null, endDate: null };
|
|
setFilterRange(emptyRange);
|
|
setFilterMachine(null);
|
|
setIsFilterVisible(false);
|
|
fetchAttendances(emptyRange, null);
|
|
}}
|
|
/>
|
|
|
|
{/* Scanner Modal */}
|
|
<QrScanModal
|
|
visible={showScanner}
|
|
onClose={() => setShowScanner(false)}
|
|
onScan={onScan}
|
|
/>
|
|
</View>
|
|
</View>
|
|
);
|
|
}
|