Update tabBarIcon sizes, use FlatList for invoices and refactor QrScanModal layout

app/(protected)/_layout.tsx

@@ -43,35 +43,35 @@ export default function ProtectedLayout() {
         name="index"
         options={{
           title: 'Home',
-          tabBarIcon: ({ color, size }) => <Home pointerEvents="none" color={color} size={24} />,
+          tabBarIcon: ({ color, size }) => <Home pointerEvents="none" color={color} size={28} />,
         }}
       />
       <Tabs.Screen
         name="attendance/index"
         options={{
           title: 'Presenze',
-          tabBarIcon: ({ color, size }) => <Clock pointerEvents="none" color={color} size={24} />,
+          tabBarIcon: ({ color, size }) => <Clock pointerEvents="none" color={color} size={28} />,
         }}
       />
       <Tabs.Screen
         name="journal"
         options={{
           title: 'Giornale',
-          tabBarIcon: ({ color, size }) => <ImageIcon pointerEvents="none" color={color} size={24} />,
+          tabBarIcon: ({ color, size }) => <ImageIcon pointerEvents="none" color={color} size={28} />,
         }}
       />
       <Tabs.Screen
         name="permits/index"
         options={{
           title: 'Ferie',
-          tabBarIcon: ({ color, size }) => <CalendarIcon pointerEvents="none" color={color} size={24} />,
+          tabBarIcon: ({ color, size }) => <CalendarIcon pointerEvents="none" color={color} size={28} />,
         }}
       />
       <Tabs.Screen
         name="invoice"
         options={{
           title: 'Fatture',
-          tabBarIcon: ({ color, size }) => <FileText pointerEvents="none" color={color} size={24} />,
+          tabBarIcon: ({ color, size }) => <FileText pointerEvents="none" color={color} size={28} />,
           href: authState.user?.isAdmin ? undefined : null,
         }}
       />
@@ -79,7 +79,7 @@ export default function ProtectedLayout() {
         name="machine/index"
         options={{
           title: 'Macchine',
-          tabBarIcon: ({ color, size }) => <Car pointerEvents="none" color={color} size={24} />,
+          tabBarIcon: ({ color, size }) => <Car pointerEvents="none" color={color} size={28} />,
           href: !authState.user?.isAdmin ? undefined : null,
         }}
       />
@@ -88,6 +88,7 @@ export default function ProtectedLayout() {
         options={{
           href: null,
           title: 'Profilo',
+          tabBarStyle: { display: 'none' },
         }}
       />
     </Tabs>

app/(protected)/invoice/index.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useCallback } from 'react';
-import { View, Text, ScrollView, TouchableOpacity, RefreshControl } from 'react-native';
+import { View, Text, FlatList, TouchableOpacity, RefreshControl } from 'react-native';
 import { SafeAreaView } from 'react-native-safe-area-context';
 import { useRouter } from 'expo-router';
 import { StatusBar } from 'expo-status-bar';
@@ -112,22 +112,26 @@ export default function InvoiceScreen() {
 
             <View className="flex-1 bg-gray-50 rounded-t-[2.5rem] overflow-hidden">
             {/* List */}
-            <ScrollView
+            <FlatList
+                data={invoices}
+                keyExtractor={(item) => item.id.toString()}
                 className="flex-1"
                 contentContainerStyle={{ padding: 20, paddingBottom: 100, gap: 16 }}
                 showsVerticalScrollIndicator={true}
                 scrollIndicatorInsets={{ right: 1 }}
                 refreshControl={<RefreshControl refreshing={refreshing} onRefresh={onRefresh} colors={['#1071C2']} />}
-            >
-                {invoices.length === 0 ? (
+                initialNumToRender={10}
+                maxToRenderPerBatch={10}
+                windowSize={5}
+                renderItem={({ item }) => (
+                    <InvoiceCard item={item} onPress={handleInvoicePress} />
+                )}
+                ListEmptyComponent={
                     <View className="bg-white p-8 rounded-3xl border border-gray-100 items-center justify-center border-dashed mt-4">
                         <Text className="text-gray-400 font-medium text-center">Nessuna fattura trovata</Text>
                     </View>
-                ) : (
-                    invoices.map((invoice) => (
-                        <InvoiceCard key={invoice.id} item={invoice} onPress={handleInvoicePress} />
-                )))}
-            </ScrollView>
+                }
+            />
 
             {/* FAB Filter */}
             <TouchableOpacity