Initial commit

2026-08-31 16:50:53 +02:00
commit a68c8864b0
80 changed files with 22222 additions and 0 deletions
@@ -0,0 +1,118 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { View, Text, Modal, TouchableOpacity, Vibration, StyleSheet, useWindowDimensions } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import { CameraView, useCameraPermissions } from 'expo-camera';
+import { X, ScanLine } from 'lucide-react-native';
+
+interface QrScanModalProps {
+    visible: boolean;
+    onClose: () => void;
+    onScan: (data: string) => void;
+}
+
+export default function QrScanModal({ visible, onClose, onScan }: QrScanModalProps) {
+    const [permission, requestPermission] = useCameraPermissions();
+    const [scanned, setScanned] = useState(false);
+    const scanInProgress = useRef(false);
+    const { width, height } = useWindowDimensions();
+    const squareSize = Math.min(width * 0.8, height * 0.8, 400);
+
+    // Permission handling and scanned state reset on modal open
+    useEffect(() => {
+        if (!visible) return;
+        setScanned(false);
+        scanInProgress.current = false;
+        if (permission && !permission.granted && permission.canAskAgain) {
+            requestPermission();
+        }
+    }, [visible, permission]);
+
+    const handleBarCodeScanned = ({ type, data }: { type: string; data: string }) => {
+        if (scanInProgress.current) return;
+        scanInProgress.current = true;
+
+        setScanned(true);
+        Vibration.vibrate();
+        console.log(`Bar code with type ${type} and data ${data} has been scanned!`);
+        onScan(data);
+        onClose();
+    };
+
+    if (!permission) {
+        return <View />;
+    }
+
+    return (
+        <Modal
+            visible={visible}
+            animationType="slide"
+            presentationStyle="fullScreen"
+            onRequestClose={onClose}
+        >
+            <View className="flex-1 bg-black">
+                {/* Camera Full Screen */}
+                <CameraView
+                    style={StyleSheet.absoluteFillObject}
+                    facing="back"
+                    onBarcodeScanned={scanned ? undefined : handleBarCodeScanned}
+                    barcodeScannerSettings={{
+                        barcodeTypes: ['qr'],
+                    }}
+                />
+
+                {/* Mask Overlay with transparent cutout */}
+                <View style={StyleSheet.absoluteFillObject} pointerEvents="none">
+                    <View className="flex-1 bg-black/60" />
+                    <View style={{ height: squareSize }} className="flex-row">
+                        <View className="flex-1 bg-black/60" />
+
+                        {/* Scanner Target Frame */}
+                        <View
+                            style={{ width: squareSize, height: squareSize }}
+                            className="border-2 border-[#1071C2] justify-center items-center relative"
+                        >
+                            <View className="absolute top-0 left-0 w-6 h-6 border-l-4 border-t-4 border-[#1071C2]" />
+                            <View className="absolute top-0 right-0 w-6 h-6 border-r-4 border-t-4 border-[#1071C2]" />
+                            <View className="absolute bottom-0 left-0 w-6 h-6 border-l-4 border-b-4 border-[#1071C2]" />
+                            <View className="absolute bottom-0 right-0 w-6 h-6 border-r-4 border-b-4 border-[#1071C2]" />
+
+                            {!scanned && <ScanLine color="#1071C2" size={40} />}
+                        </View>
+
+                        <View className="flex-1 bg-black/60" />
+                    </View>
+                    <View className="flex-1 bg-black/60" />
+                </View>
+
+                {/* UI Overlay */}
+                <SafeAreaView style={StyleSheet.absoluteFillObject} pointerEvents="box-none">
+                    <View className="flex-1 justify-between pt-8">
+                        {/* Header */}
+                        <View className="items-center">
+                            <Text className="text-white text-xl font-bold">
+                                Scansiona QR Code
+                            </Text>
+                            <Text className="text-gray-300 text-base mt-1">
+                                Inquadra il codice nel riquadro
+                            </Text>
+                        </View>
+
+                        {/* Footer */}
+                        <View className="items-center pb-12">
+                            <TouchableOpacity
+                                onPress={onClose}
+                                className="bg-white/20 p-4 rounded-full"
+                            >
+                                <X color="white" size={32} />
+                            </TouchableOpacity>
+
+                            <Text className="text-white mt-4 font-medium">
+                                Chiudi
+                            </Text>
+                        </View>
+                    </View>
+                </SafeAreaView>
+            </View>
+        </Modal>
+    );
+}