leonardo/mariani_mobile
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

First UI draft

Browse Source
This commit is contained in:
leonardo
2025-12-03 18:15:55 +01:00
parent e5270239e1
commit 2251c42ecf
38 changed files with 2237 additions and 866 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
app.json
View File

@ -23,7 +23,8 @@
},
"web": {
"output": "static",
"favicon": "./assets/images/favicon.png"
"favicon": "./assets/images/favicon.png",
"bundler": "metro"
},
"plugins": [
"expo-router",

35
app/(tabs)/_layout.tsx
View File

@ -1,35 +0,0 @@
import { Tabs } from 'expo-router';
import React from 'react';
import { HapticTab } from '@/components/haptic-tab';
import { IconSymbol } from '@/components/ui/icon-symbol';
import { Colors } from '@/constants/theme';
import { useColorScheme } from '@/hooks/use-color-scheme';
export default function TabLayout() {
const colorScheme = useColorScheme();
return (
<Tabs
screenOptions={{
tabBarActiveTintColor: Colors[colorScheme ?? 'light'].tint,
headerShown: false,
tabBarButton: HapticTab,
}}>
<Tabs.Screen
name="index"
options={{
title: 'Home',
tabBarIcon: ({ color }) => <IconSymbol size={28} name="house.fill" color={color} />,
}}
/>
<Tabs.Screen
name="explore"
options={{
title: 'Explore',
tabBarIcon: ({ color }) => <IconSymbol size={28} name="paperplane.fill" color={color} />,
}}
/>
</Tabs>
);
}

112
app/(tabs)/explore.tsx
View File

@ -1,112 +0,0 @@
import { Image } from 'expo-image';
import { Platform, StyleSheet } from 'react-native';
import { Collapsible } from '@/components/ui/collapsible';
import { ExternalLink } from '@/components/external-link';
import ParallaxScrollView from '@/components/parallax-scroll-view';
import { ThemedText } from '@/components/themed-text';
import { ThemedView } from '@/components/themed-view';
import { IconSymbol } from '@/components/ui/icon-symbol';
import { Fonts } from '@/constants/theme';
export default function TabTwoScreen() {
return (
<ParallaxScrollView
headerBackgroundColor={{ light: '#D0D0D0', dark: '#353636' }}
headerImage={
<IconSymbol
size={310}
color="#808080"
name="chevron.left.forwardslash.chevron.right"
style={styles.headerImage}
/>
}>
<ThemedView style={styles.titleContainer}>
<ThemedText
type="title"
style={{
fontFamily: Fonts.rounded,
}}>
Explore
</ThemedText>
</ThemedView>
<ThemedText>This app includes example code to help you get started.</ThemedText>
<Collapsible title="File-based routing">
<ThemedText>
This app has two screens:{' '}
<ThemedText type="defaultSemiBold">app/(tabs)/index.tsx</ThemedText> and{' '}
<ThemedText type="defaultSemiBold">app/(tabs)/explore.tsx</ThemedText>
</ThemedText>
<ThemedText>
The layout file in <ThemedText type="defaultSemiBold">app/(tabs)/_layout.tsx</ThemedText>{' '}
sets up the tab navigator.
</ThemedText>
<ExternalLink href="https://docs.expo.dev/router/introduction">
<ThemedText type="link">Learn more</ThemedText>
</ExternalLink>
</Collapsible>
<Collapsible title="Android, iOS, and web support">
<ThemedText>
You can open this project on Android, iOS, and the web. To open the web version, press{' '}
<ThemedText type="defaultSemiBold">w</ThemedText> in the terminal running this project.
</ThemedText>
</Collapsible>
<Collapsible title="Images">
<ThemedText>
For static images, you can use the <ThemedText type="defaultSemiBold">@2x</ThemedText> and{' '}
<ThemedText type="defaultSemiBold">@3x</ThemedText> suffixes to provide files for
different screen densities
</ThemedText>
<Image
source={require('@/assets/images/react-logo.png')}
style={{ width: 100, height: 100, alignSelf: 'center' }}
/>
<ExternalLink href="https://reactnative.dev/docs/images">
<ThemedText type="link">Learn more</ThemedText>
</ExternalLink>
</Collapsible>
<Collapsible title="Light and dark mode components">
<ThemedText>
This template has light and dark mode support. The{' '}
<ThemedText type="defaultSemiBold">useColorScheme()</ThemedText> hook lets you inspect
what the user&apos;s current color scheme is, and so you can adjust UI colors accordingly.
</ThemedText>
<ExternalLink href="https://docs.expo.dev/develop/user-interface/color-themes/">
<ThemedText type="link">Learn more</ThemedText>
</ExternalLink>
</Collapsible>
<Collapsible title="Animations">
<ThemedText>
This template includes an example of an animated component. The{' '}
<ThemedText type="defaultSemiBold">components/HelloWave.tsx</ThemedText> component uses
the powerful{' '}
<ThemedText type="defaultSemiBold" style={{ fontFamily: Fonts.mono }}>
react-native-reanimated
</ThemedText>{' '}
library to create a waving hand animation.
</ThemedText>
{Platform.select({
ios: (
<ThemedText>
The <ThemedText type="defaultSemiBold">components/ParallaxScrollView.tsx</ThemedText>{' '}
component provides a parallax effect for the header image.
</ThemedText>
),
})}
</Collapsible>
</ParallaxScrollView>
);
}
const styles = StyleSheet.create({
headerImage: {
color: '#808080',
bottom: -90,
left: -35,
position: 'absolute',
},
titleContainer: {
flexDirection: 'row',
gap: 8,
},
});

98
app/(tabs)/index.tsx
View File

@ -1,98 +0,0 @@
import { Image } from 'expo-image';
import { Platform, StyleSheet } from 'react-native';
import { HelloWave } from '@/components/hello-wave';
import ParallaxScrollView from '@/components/parallax-scroll-view';
import { ThemedText } from '@/components/themed-text';
import { ThemedView } from '@/components/themed-view';
import { Link } from 'expo-router';
export default function HomeScreen() {
return (
<ParallaxScrollView
headerBackgroundColor={{ light: '#A1CEDC', dark: '#1D3D47' }}
headerImage={
<Image
source={require('@/assets/images/partial-react-logo.png')}
style={styles.reactLogo}
/>
}>
<ThemedView style={styles.titleContainer}>
<ThemedText type="title">Welcome!</ThemedText>
<HelloWave />
</ThemedView>
<ThemedView style={styles.stepContainer}>
<ThemedText type="subtitle">Step 1: Try it</ThemedText>
<ThemedText>
Edit <ThemedText type="defaultSemiBold">app/(tabs)/index.tsx</ThemedText> to see changes.
Press{' '}
<ThemedText type="defaultSemiBold">
{Platform.select({
ios: 'cmd + d',
android: 'cmd + m',
web: 'F12',
})}
</ThemedText>{' '}
to open developer tools.
</ThemedText>
</ThemedView>
<ThemedView style={styles.stepContainer}>
<Link href="/modal">
<Link.Trigger>
<ThemedText type="subtitle">Step 2: Explore</ThemedText>
</Link.Trigger>
<Link.Preview />
<Link.Menu>
<Link.MenuAction title="Action" icon="cube" onPress={() => alert('Action pressed')} />
<Link.MenuAction
title="Share"
icon="square.and.arrow.up"
onPress={() => alert('Share pressed')}
/>
<Link.Menu title="More" icon="ellipsis">
<Link.MenuAction
title="Delete"
icon="trash"
destructive
onPress={() => alert('Delete pressed')}
/>
</Link.Menu>
</Link.Menu>
</Link>
<ThemedText>
{`Tap the Explore tab to learn more about what's included in this starter app.`}
</ThemedText>
</ThemedView>
<ThemedView style={styles.stepContainer}>
<ThemedText type="subtitle">Step 3: Get a fresh start</ThemedText>
<ThemedText>
{`When you're ready, run `}
<ThemedText type="defaultSemiBold">npm run reset-project</ThemedText> to get a fresh{' '}
<ThemedText type="defaultSemiBold">app</ThemedText> directory. This will move the current{' '}
<ThemedText type="defaultSemiBold">app</ThemedText> to{' '}
<ThemedText type="defaultSemiBold">app-example</ThemedText>.
</ThemedText>
</ThemedView>
</ParallaxScrollView>
);
}
const styles = StyleSheet.create({
titleContainer: {
flexDirection: 'row',
alignItems: 'center',
gap: 8,
},
stepContainer: {
gap: 8,
marginBottom: 8,
},
reactLogo: {
height: 178,
width: 290,
bottom: 0,
left: 0,
position: 'absolute',
},
});

82
app/_layout.tsx
View File

@ -1,24 +1,64 @@
import { DarkTheme, DefaultTheme, ThemeProvider } from '@react-navigation/native';
import { Stack } from 'expo-router';
import { StatusBar } from 'expo-status-bar';
import 'react-native-reanimated';
import { useColorScheme } from '@/hooks/use-color-scheme';
export const unstable_settings = {
anchor: '(tabs)',
};
export default function RootLayout() {
const colorScheme = useColorScheme();
import '../global.css';
import { Tabs } from 'expo-router';
import { Home, Clock, FileText, Zap, CalendarIcon } from 'lucide-react-native';
export default function AppLayout() {
return (
<ThemeProvider value={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
<Stack>
<Stack.Screen name="(tabs)" options={{ headerShown: false }} />
<Stack.Screen name="modal" options={{ presentation: 'modal', title: 'Modal' }} />
</Stack>
<StatusBar style="auto" />
</ThemeProvider>
<Tabs
screenOptions={{
headerShown: false,
tabBarStyle: {
backgroundColor: '#ffffff',
borderTopWidth: 1,
borderTopColor: '#f3f4f6',
height: 80,
paddingBottom: 20,
paddingTop: 10,
},
tabBarActiveTintColor: '#099499',
tabBarInactiveTintColor: '#9ca3af',
tabBarLabelStyle: {
fontSize: 10,
fontWeight: '600',
marginTop: 4
}
}}
>
<Tabs.Screen
name="index"
options={{
title: 'Home',
tabBarIcon: ({ color, size }) => <Home color={color} size={24} />,
}}
/>
<Tabs.Screen
name="attendance/index"
options={{
title: 'Presenze',
tabBarIcon: ({ color, size }) => <Clock color={color} size={24} />,
}}
/>
<Tabs.Screen
name="permits/index"
options={{
title: 'Permessi',
tabBarIcon: ({ color, size }) => <CalendarIcon color={color} size={24} />,
}}
/>
<Tabs.Screen
name="documents/index"
options={{
title: 'Moduli',
tabBarIcon: ({ color, size }) => <FileText color={color} size={24} />,
}}
/>
<Tabs.Screen
name="automation/index"
options={{
title: 'Domotica',
tabBarIcon: ({ color, size }) => <Zap color={color} size={24} />,
}}
/>
</Tabs>
);
}
}

101
app/attendance/index.tsx Normal file
View File

@ -0,0 +1,101 @@
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>
);
}

130
app/automation/index.tsx Normal file
View File

@ -0,0 +1,130 @@
import { OFFICES_DATA } from '@/data/data';
import type { OfficeItem } from '@/types/types';
import { Activity, ChevronRight, Lightbulb, Thermometer, Wifi, WifiOff, Zap } from 'lucide-react-native';
import React, { useState } from 'react';
import { ScrollView, Text, TouchableOpacity, View } from 'react-native';
export default function AutomationScreen() {
const [selectedOffice, setSelectedOffice] = useState<OfficeItem | null>(null);
// --- DETAIL VIEW ---
if (selectedOffice) {
return (
<View className="flex-1 bg-gray-50">
{/* Header Dettaglio */}
<View className="bg-white p-6 pt-16 shadow-sm flex-row items-center border-b border-gray-100">
<TouchableOpacity
onPress={() => setSelectedOffice(null)}
className="mr-4 p-3 rounded-full bg-gray-50 active:bg-gray-200"
>
<ChevronRight size={28} color="#4b5563" className="rotate-180" style={{ transform: [{ rotate: '180deg' }] }} />
</TouchableOpacity>
<Text className="text-2xl font-bold text-gray-800">{selectedOffice.name}</Text>
</View>
<ScrollView contentContainerStyle={{ padding: 20, gap: 24 }} showsVerticalScrollIndicator={false}>
{/* Status Banner Grande */}
<View className="bg-white rounded-3xl p-8 shadow-sm items-center relative overflow-hidden border border-gray-100">
<View className={`absolute top-0 left-0 w-full h-2 ${selectedOffice.status === 'online' ? 'bg-green-500' : 'bg-red-500'}`} />
<View className="flex-row items-center mt-2 gap-3">
<View className={`w-4 h-4 rounded-full ${selectedOffice.status === 'online' ? 'bg-green-500 shadow-lg shadow-green-500/50' : 'bg-red-500'}`} />
<Text className="text-lg text-gray-600 uppercase tracking-widest font-bold">{selectedOffice.status}</Text>
</View>
</View>
<View className="flex-row gap-5">
{/* Lights Card Grande */}
<TouchableOpacity className={`flex-1 p-6 rounded-3xl border-2 active:scale-95 ${selectedOffice.lights ? 'border-[#099499] bg-teal-50' : 'border-transparent bg-white shadow-sm'}`}>
<View className="flex-row justify-between items-start mb-6">
<Lightbulb size={40} color={selectedOffice.lights ? '#099499' : '#d1d5db'} />
{/* Switch UI Grande - FIXED: Rimossa 'transition-colors' che causava il crash */}
<View className={`w-14 h-8 rounded-full p-1 ${selectedOffice.lights ? 'bg-[#099499]' : 'bg-gray-200'}`}>
<View className={`bg-white w-6 h-6 rounded-full shadow-sm ${selectedOffice.lights ? 'translate-x-6' : 'translate-x-0'}`} />
</View>
</View>
<Text className="text-lg font-bold text-gray-800 mb-1">Luci</Text>
<Text className="text-sm text-gray-500 font-medium">{selectedOffice.lights ? 'Accese - 80%' : 'Spente'}</Text>
</TouchableOpacity>
{/* Temp Card Grande */}
<View className="flex-1 bg-white p-6 rounded-3xl border border-transparent shadow-sm">
<Thermometer size={40} color="#fb923c" className="mb-6" />
<Text className="text-lg font-bold text-gray-800 mb-1">Clima</Text>
<View className="flex-row items-end">
<Text className="text-4xl font-bold text-gray-800">{selectedOffice.temp}</Text>
<Text className="text-gray-500 mb-2 ml-1 text-lg">°C</Text>
</View>
</View>
</View>
{/* Chart Card Grande */}
<View className="bg-white p-6 rounded-3xl shadow-sm border border-gray-100">
<View className="flex-row items-center mb-6 gap-3">
<Activity size={28} color="#099499" />
<Text className="text-xl font-bold text-gray-700">Consumo Oggi</Text>
</View>
<View className="flex-row items-end justify-between h-48 gap-4">
{[40, 65, 30, 80, 55, 90, 45].map((h, i) => (
<View key={i} className="flex-1 bg-gray-100 rounded-t-xl relative overflow-hidden h-full justify-end">
<View style={{ height: `${h}%` }} className="w-full bg-[#099499] rounded-t-xl opacity-80" />
</View>
))}
</View>
</View>
</ScrollView>
</View>
);
}
// --- LIST VIEW (INGRANDITA) ---
return (
<View className="flex-1 bg-gray-50">
<View className="bg-white p-6 pt-16 shadow-sm flex-row justify-between items-start border-b border-gray-100">
<View>
<Text className="text-3xl font-bold text-gray-800 mb-1">Domotica</Text>
<Text className="text-base text-gray-500">Controlla gli ambienti</Text>
</View>
<View className="bg-green-100 px-4 py-2 rounded-xl border border-green-200 mt-1">
<Text className="text-xs font-bold text-green-700 tracking-wide">SYSTEM OK</Text>
</View>
</View>
<ScrollView contentContainerStyle={{ padding: 20, gap: 20 }} showsVerticalScrollIndicator={false}>
{OFFICES_DATA.map((office) => (
<TouchableOpacity
key={office.id}
onPress={() => setSelectedOffice(office)}
className="bg-white rounded-3xl p-6 shadow-sm flex-row items-center justify-between border border-gray-100 active:border-[#099499]/30 active:scale-[0.98]"
>
<View className="flex-row items-center gap-5">
<View className={`p-5 rounded-2xl ${office.status === 'online' ? 'bg-teal-50' : 'bg-gray-100'}`}>
{office.status === 'online' ?
<Wifi size={32} color="#099499" /> :
<WifiOff size={32} color="#9ca3af" />
}
</View>
<View>
<Text className="font-bold text-gray-800 text-xl mb-2">{office.name}</Text>
<View className="flex-row items-center gap-4">
<View className="flex-row items-center gap-1.5">
<Thermometer size={16} color="#6b7280" />
<Text className="text-sm font-medium text-gray-600">{office.temp}°C</Text>
</View>
<View className="w-1 h-1 rounded-full bg-gray-300" />
<View className="flex-row items-center gap-1.5">
<Zap size={16} color="#eab308" />
<Text className="text-sm font-medium text-gray-600">{office.power}W</Text>
</View>
</View>
</View>
</View>
{/* Status Dot */}
<View className={`w-4 h-4 rounded-full border-2 border-white shadow-sm ${office.status === 'online' ? 'bg-green-500' : 'bg-red-500'}`} />
</TouchableOpacity>
))}
{/* Spacer finale per la navbar */}
<View className="h-20" />
</ScrollView>
</View>
);
}

136
app/documents/index.tsx Normal file
View File

@ -0,0 +1,136 @@
import { DOCUMENTS_DATA } from '@/data/data';
import { Download, FileText, MapPin, Plus, Search, CalendarIcon } from 'lucide-react-native';
import React, { useState } from 'react';
import { RangePickerModal } from '@/components/RangePickerModal';
import { ScrollView, Text, TextInput, TouchableOpacity, View } from 'react-native';
import dayjs from 'dayjs';
export default function DocumentsScreen() {
const [searchTerm, setSearchTerm] = useState('');
// Gestiamo le date come oggetti Dayjs o null per il datepicker, e stringhe per il filtro
const [range, setRange] = useState<{ startDate: any; endDate: any }>({
startDate: null,
endDate: null
});
const [showRangePicker, setShowRangePicker] = useState(false);
// Funzione helper per convertire DD/MM/YYYY in oggetto Date (per il filtro esistente)
const parseDate = (dateStr: string) => {
if (!dateStr) return new Date();
const [day, month, year] = dateStr.split('/').map(Number);
return new Date(year, month - 1, day);
};
const filteredDocs = DOCUMENTS_DATA.filter(doc => {
// Filtro Testuale
const matchesSearch = doc.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
doc.site.toLowerCase().includes(searchTerm.toLowerCase());
if (!matchesSearch) return false;
// Filtro Date Range
if (range.startDate || range.endDate) {
const docDate = parseDate(doc.date); // doc.date è "DD/MM/YYYY"
// Controllo Data Inizio
if (range.startDate) {
// dayjs(range.startDate).toDate() converte in oggetto Date JS standard
const start = dayjs(range.startDate).startOf('day').toDate();
if (docDate < start) return false;
}
// Controllo Data Fine
if (range.endDate) {
const end = dayjs(range.endDate).endOf('day').toDate();
if (docDate > end) return false;
}
}
return true;
});
// Funzione per formattare la visualizzazione
const formatDateDisplay = (date: any) => {
return date ? dayjs(date).format('DD/MM/YYYY') : 'gg/mm/aaaa';
};
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">Documenti</Text>
<Text className="text-base text-gray-500">Gestione modulistica e schemi</Text>
</View>
<View className="p-5 gap-6 flex-1">
{/* Search + Date Row */}
<View className="flex-row gap-2">
{/* Search Bar */}
<View className={`flex-1 relative justify-center shadow-sm rounded-2xl border ${searchTerm ? 'border-[#099499]' : 'border-gray-200'}`}>
<View className="absolute left-4 z-10">
<Search size={24} color="#9ca3af" />
</View>
<TextInput
placeholder="Cerca nome, cantiere..."
placeholderTextColor="#9ca3af"
className="w-full pl-12 pr-4 py-4 bg-white rounded-2xl text-gray-800 text-lg"
value={searchTerm}
onChangeText={setSearchTerm}
/>
</View>
{/* Date Filter Button */}
<TouchableOpacity
onPress={() => setShowRangePicker(true)}
className={`p-4 bg-white rounded-2xl shadow-sm border ${range.startDate ? 'border-[#099499]' : 'border-gray-200'}`}
>
<CalendarIcon size={24} color={range.startDate ? "#099499" : "#9ca3af"} />
</TouchableOpacity>
</View>
{/* Modale Unico per il Range */}
<RangePickerModal
visible={showRangePicker}
onClose={() => setShowRangePicker(false)}
currentRange={range}
onApply={setRange}
/>
{/* List */}
<ScrollView
contentContainerStyle={{ gap: 16, paddingBottom: 100 }}
showsVerticalScrollIndicator={false}
>
{filteredDocs.map((doc) => (
<View key={doc.id} className="bg-white p-5 rounded-3xl shadow-sm flex-row items-center justify-between border border-gray-100">
<View className="flex-row items-center gap-5 flex-1">
<View className="bg-red-50 p-4 rounded-2xl">
<FileText size={32} color="#ef4444" />
</View>
<View className="flex-1">
<Text className="font-bold text-gray-800 text-lg mb-1">{doc.name}</Text>
<View className="flex-row items-center mt-1">
<MapPin size={16} color="#9ca3af" />
<Text className="text-sm text-gray-400 ml-1 font-medium">{doc.site}</Text>
</View>
</View>
</View>
<TouchableOpacity className="p-4 bg-gray-50 rounded-2xl active:bg-gray-100">
<Download size={24} color="#6b7280" />
</TouchableOpacity>
</View>
))}
</ScrollView>
</View>
{/* FAB */}
<TouchableOpacity
onPress={() => alert('Aggiungi nuovo documento')}
className="absolute bottom-8 right-6 w-16 h-16 bg-[#099499] rounded-full shadow-lg items-center justify-center active:scale-90"
>
<Plus size={32} color="white" />
</TouchableOpacity>
</View>
);
}

126
app/index.tsx Normal file
View File

@ -0,0 +1,126 @@
import React from 'react';
import { useRouter } from 'expo-router';
import { View, Text, ScrollView, TouchableOpacity } from 'react-native';
import { Bell, User, AlertTriangle, QrCode, FileText, CheckCircle2 } from 'lucide-react-native';
import { MOCK_USER, ATTENDANCE_DATA, DOCUMENTS_DATA } from '../data/data';
export default function HomeScreen() {
const router = useRouter();
const incompleteTasks = ATTENDANCE_DATA.filter(item => item.status === 'incomplete');
return (
<View className="flex-1 bg-gray-50">
{/* Banner Custom */}
<View className="bg-[#099499] pt-16 pb-6 px-6 rounded-b-[2rem] shadow-sm z-10">
<View className="flex-row justify-between items-start">
<View className="flex-row items-center gap-4">
<View>
<Text className="text-teal-100 text-lg font-medium uppercase tracking-wider mb-1">Benvenuto</Text>
<Text className="text-white text-3xl font-bold">{MOCK_USER.name}</Text>
<Text className="text-teal-200">{MOCK_USER.role}</Text>
</View>
</View>
<View className="flex-row gap-4">
<TouchableOpacity className="relative p-3 bg-white/10 rounded-full active:bg-white/20">
<Bell size={28} color="white" />
<View className="absolute top-2.5 right-3 w-3 h-3 bg-red-500 rounded-full border-2 border-[#099499]" />
</TouchableOpacity>
<TouchableOpacity className="p-3 bg-white/10 rounded-full active:bg-white/20">
<User size={28} color="white" />
</TouchableOpacity>
</View>
</View>
</View>
{/* Contenuto Scrollabile */}
<ScrollView
className="flex-1 px-5 pt-6"
contentContainerStyle={{ paddingBottom: 50, gap: 24 }}
showsVerticalScrollIndicator={false}
>
{/* 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">
<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">Manca uscita: {incompleteTasks[0].site}</Text>
</View>
</View>
<TouchableOpacity onPress={() => router.push('/attendance')} className="bg-orange-50 px-5 py-3 rounded-xl ml-2 active:bg-orange-100">
<Text className="text-orange-600 text-sm font-bold uppercase tracking-wide">Risolvi</Text>
</TouchableOpacity>
</View>
)}
{/* Quick Actions */}
<View>
<Text className="text-gray-800 text-xl font-bold mb-4 px-1">Azioni Rapide</Text>
<View className="flex-row gap-5">
<TouchableOpacity
onPress={() => router.push('/attendance')}
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-teal-50 items-center justify-center mb-1">
<QrCode size={40} color="#099499" />
</View>
<Text className="text-lg font-bold text-gray-700 text-center">Nuova Presenza</Text>
</TouchableOpacity>
<TouchableOpacity
onPress={() => router.push('/documents')}
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" />
</View>
<Text className="text-lg font-bold text-gray-700 text-center">Carica Documento</Text>
</TouchableOpacity>
</View>
</View>
{/* Recent Activity */}
<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>
<Text className="text-base text-[#099499] font-bold p-1">Vedi tutto</Text>
</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" />
</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>
</View>
</View>
</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>
</View>
))}
</View>
</View>
</ScrollView>
</View>
);
}

29
app/modal.tsx
View File

@ -1,29 +0,0 @@
import { Link } from 'expo-router';
import { StyleSheet } from 'react-native';
import { ThemedText } from '@/components/themed-text';
import { ThemedView } from '@/components/themed-view';
export default function ModalScreen() {
return (
<ThemedView style={styles.container}>
<ThemedText type="title">This is a modal</ThemedText>
<Link href="/" dismissTo style={styles.link}>
<ThemedText type="link">Go to home screen</ThemedText>
</Link>
</ThemedView>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
padding: 20,
},
link: {
marginTop: 15,
paddingVertical: 15,
},
});

176
app/permits/index.tsx Normal file
View File

@ -0,0 +1,176 @@
import React, { useState } from 'react';
import { PERMITS_DATA } from '@/data/data';
import { Calendar as CalendarIcon, ChevronLeft, ChevronRight, Clock, Plus, Thermometer, X } from 'lucide-react-native';
import { ScrollView, Text, TouchableOpacity, View } from 'react-native';
import RequestPermitModal from '@/components/RenamePermitModal';
export default function PermitsScreen() {
const [currentDate, setCurrentDate] = useState(new Date(2025, 11, 1)); // Dicembre 2025 Mock
const [showModal, setShowModal] = useState(false);
// Helpers per il calendario
const daysInMonth = new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 0).getDate();
const firstDayOfMonth = new Date(currentDate.getFullYear(), currentDate.getMonth(), 1).getDay(); // 0 = Sun
const adjustedFirstDay = firstDayOfMonth === 0 ? 6 : firstDayOfMonth - 1; // 0 = Mon
const getEventForDay = (day: number) => {
const dateStr = `${currentDate.getFullYear()}-${String(currentDate.getMonth() + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
return PERMITS_DATA.find(leave => {
if (leave.type === 'Permesso') return leave.startDate === dateStr;
return dateStr >= leave.startDate && dateStr <= (leave.endDate || leave.startDate);
});
};
const weekDays = ['Lun', 'Mar', 'Mer', 'Gio', 'Ven', 'Sab', 'Dom'];
return (
<View className="flex-1 bg-gray-50">
<RequestPermitModal
visible={showModal}
onClose={() => setShowModal(false)}
onSubmit={(data) => console.log('Richiesta:', data)}
/>
{/* Header */}
<View className="bg-white p-6 pt-16 shadow-sm border-b border-gray-100 flex-row justify-between items-center">
<View>
<Text className="text-3xl font-bold text-gray-800 mb-1">Ferie e Permessi</Text>
<Text className="text-base text-gray-500">Gestisci le tue assenze</Text>
</View>
</View>
<ScrollView contentContainerStyle={{ padding: 20, paddingBottom: 100, gap: 24 }} showsVerticalScrollIndicator={false}>
{/* Calendar Widget */}
<View className="bg-white rounded-[2rem] p-6 shadow-sm border border-gray-100">
<View className="flex-row justify-between items-center mb-6">
<TouchableOpacity className="p-2 bg-gray-50 rounded-full">
<ChevronLeft size={24} color="#374151" />
</TouchableOpacity>
<Text className="text-xl font-bold text-gray-800 capitalize">
{currentDate.toLocaleString('it-IT', { month: 'long', year: 'numeric' })}
</Text>
<TouchableOpacity className="p-2 bg-gray-50 rounded-full">
<ChevronRight size={24} color="#374151" />
</TouchableOpacity>
</View>
{/* Week Header */}
<View className="flex-row justify-between mb-4">
{weekDays.map(day => (
<Text key={day} className="w-10 text-center text-xs font-bold text-gray-400 uppercase">{day}</Text>
))}
</View>
{/* Days Grid */}
<View className="flex-row flex-wrap gap-y-4">
{/* Empty slots for alignment */}
{Array.from({ length: adjustedFirstDay }).map((_, i) => (
<View key={`empty-${i}`} style={{ width: '14.28%' }} />
))}
{/* Days */}
{Array.from({ length: daysInMonth }).map((_, i) => {
const day = i + 1;
const event = getEventForDay(day);
let bgClass = 'bg-transparent';
let textClass = 'text-gray-700';
let borderClass = 'border-transparent';
if (event) {
if (event.type === 'Ferie') {
bgClass = 'bg-purple-100';
textClass = 'text-purple-700 font-bold';
borderClass = 'border-purple-200';
} else if (event.type === 'Permesso') {
bgClass = 'bg-orange-100';
textClass = 'text-orange-700 font-bold';
borderClass = 'border-orange-200';
} else if (event.type === 'Malattia') {
bgClass = 'bg-red-100';
textClass = 'text-red-700 font-bold';
borderClass = 'border-red-200';
}
}
return (
<View key={day} style={{ width: '14.28%' }} className="items-center">
<View className={`w-10 h-10 rounded-full items-center justify-center border ${bgClass} ${borderClass}`}>
<Text className={`text-sm ${textClass}`}>{day}</Text>
</View>
</View>
);
})}
</View>
{/* Legenda */}
<View className="flex-row justify-center gap-4 mt-8 pt-4 border-t border-gray-100">
<View className="flex-row items-center">
<View className="w-3 h-3 rounded-full bg-purple-500 mr-2" />
<Text className="text-xs font-medium text-gray-500">Ferie</Text>
</View>
<View className="flex-row items-center">
<View className="w-3 h-3 rounded-full bg-orange-500 mr-2" />
<Text className="text-xs font-medium text-gray-500">Permessi</Text>
</View>
<View className="flex-row items-center">
<View className="w-3 h-3 rounded-full bg-red-500 mr-2" />
<Text className="text-xs font-medium text-gray-500">Malattia</Text>
</View>
</View>
</View>
{/* Lista Richieste Recenti */}
<View>
<Text className="text-lg font-bold text-gray-800 mb-4 px-1">Le tue richieste</Text>
<View className="gap-4">
{PERMITS_DATA.map((item) => (
<View key={item.id} className="bg-white p-5 rounded-3xl shadow-sm border border-gray-100 flex-row justify-between items-center">
<View className="flex-row items-center gap-4">
<View className={`p-4 rounded-2xl ${
item.type === 'Ferie' ? 'bg-purple-50' :
item.type === 'Permesso' ? 'bg-orange-50' : 'bg-red-50'
}`}>
{item.type === 'Ferie' && <CalendarIcon size={24} color="#9333ea" />}
{item.type === 'Permesso' && <Clock size={24} color="#ea580c" />}
{item.type === 'Malattia' && <Thermometer size={24} color="#dc2626" />}
</View>
<View>
<Text className="font-bold text-gray-800 text-lg">{item.type}</Text>
<Text className="text-sm text-gray-500 mt-0.5">
{item.startDate} {item.endDate ? `- ${item.endDate}` : ''}
</Text>
{item.type === 'Permesso' && (
<Text className="text-xs text-orange-600 font-bold mt-1">
{item.startTime} - {item.endTime}
</Text>
)}
</View>
</View>
<View className={`px-3 py-1.5 rounded-lg ${
item.status === 'Approvato' ? 'bg-green-100' :
item.status === 'In Attesa' ? 'bg-yellow-100' : 'bg-red-100'
}`}>
<Text className={`text-xs font-bold uppercase tracking-wide ${
item.status === 'Approvato' ? 'text-green-700' :
item.status === 'In Attesa' ? 'text-yellow-700' : 'text-red-700'
}`}>
{item.status}
</Text>
</View>
</View>
))}
</View>
</View>
</ScrollView>
{/* FAB */}
<TouchableOpacity
onPress={() => setShowModal(true)}
className="absolute bottom-8 right-6 w-16 h-16 bg-[#099499] rounded-full shadow-lg items-center justify-center active:scale-90"
>
<Plus size={32} color="white" />
</TouchableOpacity>
</View>
);
}

9
babel.config.js Normal file
View File

@ -0,0 +1,9 @@
module.exports = function (api) {
api.cache(true);
return {
presets: [
["babel-preset-expo", { jsxImportSource: "nativewind" }],
"nativewind/babel",
],
};
};

42
components/QrScanModal.tsx Normal file
View File

@ -0,0 +1,42 @@
import React from 'react';
import { View, Text, Modal, TouchableOpacity } from 'react-native';
import { QrCode } from 'lucide-react-native';
interface QrScanModalProps {
visible: boolean;
onClose: () => void;
}
export default function QrScanModal({ visible, onClose }: QrScanModalProps) {
return (
<Modal
visible={visible}
transparent={true}
animationType="fade"
statusBarTranslucent
>
<View className="flex-1 bg-black/90 items-center justify-center p-4">
<View className="bg-white rounded-[2rem] p-8 w-full max-w-sm items-center shadow-2xl">
<QrCode color="#099499" size={80} />
<Text className="text-2xl font-bold mt-6 text-gray-800 text-center">Scansione in corso...</Text>
<Text className="text-gray-500 mt-3 text-center text-base px-4">
Inquadra il codice QR nel riquadro sottostante
</Text>
{/* Viewfinder Simulata */}
<View className="mt-8 w-64 h-64 border-4 border-[#099499] rounded-3xl bg-gray-50 relative overflow-hidden items-center justify-center">
<View className="absolute top-0 w-full h-1 bg-red-500 shadow-[0_0_15px_rgba(239,68,68,0.8)]" />
<Text className="text-gray-400 text-sm">Camera Feed</Text>
</View>
<TouchableOpacity
onPress={onClose}
className="mt-10 bg-gray-100 rounded-2xl px-10 py-4 w-full active:bg-gray-200"
>
<Text className="text-gray-800 font-bold text-lg text-center">Annulla</Text>
</TouchableOpacity>
</View>
</View>
</Modal>
);
}

57
components/RangePickerModal.tsx Normal file
View File

@ -0,0 +1,57 @@
import React, { useState, useEffect } from 'react';
import { Modal, Text, TouchableOpacity, View } from 'react-native';
import DateTimePicker, { DateType, useDefaultStyles } from 'react-native-ui-datepicker';
import { Check, X } from 'lucide-react-native';
export const RangePickerModal = ({ visible, onClose, currentRange, onApply }: any) => {
// Stato locale temporaneo per la selezione nel modale
const [localRange, setLocalRange] = useState(currentRange);
// Sincronizza lo stato locale quando il modale si apre
useEffect(() => {
if (visible) setLocalRange(currentRange);
}, [visible, currentRange]);
return (
<Modal
visible={visible}
transparent={true}
animationType="fade"
onRequestClose={onClose}
>
<View className="flex-1 bg-black/60 justify-center items-center p-6">
<View className="bg-white rounded-[2rem] p-6 w-full max-w-sm shadow-2xl">
<View className="flex-row justify-between items-center mb-4">
<Text className="text-xl font-bold text-gray-800">Seleziona Periodo</Text>
<TouchableOpacity onPress={onClose} className="p-2 bg-gray-50 rounded-full">
<X size={20} color="#4b5563" />
</TouchableOpacity>
</View>
<DateTimePicker
mode="range"
locale="it"
startDate={localRange.startDate}
endDate={localRange.endDate}
onChange={(params: any) => setLocalRange(params)}
// selectedItemColor="#099499"
// headerTextStyle={{ color: '#1f2937', fontWeight: 'bold', fontSize: 18 }}
// calendarTextStyle={{ color: '#374151' }}
// weekDaysTextStyle={{ color: '#9ca3af', fontWeight: 'bold' }}
/>
<TouchableOpacity
onPress={() => {
onApply(localRange);
onClose();
}}
className="mt-6 bg-[#099499] rounded-xl py-4 flex-row justify-center items-center active:bg-[#077d82]"
>
<Check size={20} color="white" className="mr-2" />
<Text className="text-white font-bold text-lg ml-2">Applica Filtro</Text>
</TouchableOpacity>
</View>
</View>
</Modal>
);
};

127
components/RenamePermitModal.tsx Normal file
View File

@ -0,0 +1,127 @@
import React, { useState } from 'react';
import { View, Text, Modal, TouchableOpacity, TextInput, ScrollView } from 'react-native';
import { PermitType } from '@/types/types';
import { X } from 'lucide-react-native';
interface RequestPermitModalProps {
visible: boolean;
onClose: () => void;
onSubmit: (data: any) => void;
}
export default function RequestPermitModal({ visible, onClose, onSubmit}: RequestPermitModalProps) {
const [type, setType] = useState<PermitType>('Ferie');
const [startDate, setStartDate] = useState('');
const [endDate, setEndDate] = useState('');
const [startTime, setStartTime] = useState('');
const [endTime, setEndTime] = useState('');
return (
<Modal
visible={visible}
transparent={true}
animationType="slide"
statusBarTranslucent
>
<View className="flex-1 bg-black/60 justify-end sm:justify-center">
<View className="bg-white w-full rounded-t-[2.5rem] p-6 shadow-2xl h-[85%] sm:h-auto">
{/* Header Modale */}
<View className="flex-row justify-between items-center mb-6">
<Text className="text-2xl font-bold text-gray-800">Nuova Richiesta</Text>
<TouchableOpacity onPress={onClose} className="p-2 bg-gray-100 rounded-full">
<X size={24} color="#4b5563" />
</TouchableOpacity>
</View>
<ScrollView showsVerticalScrollIndicator={false} contentContainerStyle={{ paddingBottom: 40 }}>
<View className="space-y-6 gap-6">
{/* Tipologia */}
<View>
<Text className="text-base font-bold text-gray-700 mb-3">Tipologia Assenza</Text>
<View className="flex-row gap-3">
{(['Ferie', 'Permesso', 'Malattia'] as PermitType[]).map((t) => (
<TouchableOpacity
key={t}
onPress={() => setType(t)}
className={`flex-1 py-4 rounded-xl border-2 items-center justify-center ${
type === t
? 'border-[#099499] bg-teal-50'
: 'border-gray-100 bg-white'
}`}
>
<Text className={`text-sm font-bold ${
type === t ? 'text-[#099499]' : 'text-gray-500'
}`}>
{t}
</Text>
</TouchableOpacity>
))}
</View>
</View>
{/* Date Selection */}
<View className="flex-row gap-4">
<View className={`flex-1 ${type === 'Permesso' ? 'w-full' : ''}`}>
<Text className="text-sm font-bold text-gray-700 mb-2">
{type === 'Permesso' ? 'Data' : 'Dal'}
</Text>
<TextInput
placeholder="YYYY-MM-DD"
className="w-full p-4 bg-gray-50 rounded-xl font-medium text-gray-800"
value={startDate}
onChangeText={setStartDate}
/>
</View>
{type !== 'Permesso' && (
<View className="flex-1">
<Text className="text-sm font-bold text-gray-700 mb-2">Al</Text>
<TextInput
placeholder="YYYY-MM-DD"
className="w-full p-4 bg-gray-50 rounded-xl font-medium text-gray-800"
value={endDate}
onChangeText={setEndDate}
/>
</View>
)}
</View>
{/* Time Selection (Solo Permessi) */}
{type === 'Permesso' && (
<View className="flex-row gap-4 p-4 bg-orange-50 rounded-xl border border-orange-100">
<View className="flex-1">
<Text className="text-xs font-bold text-orange-800 mb-2 uppercase">Dalle Ore</Text>
<TextInput
placeholder="09:00"
className="w-full p-3 bg-white rounded-lg border border-orange-200 font-bold text-gray-800 text-center"
value={startTime}
onChangeText={setStartTime}
/>
</View>
<View className="flex-1">
<Text className="text-xs font-bold text-orange-800 mb-2 uppercase">Alle Ore</Text>
<TextInput
placeholder="18:00"
className="w-full p-3 bg-white rounded-lg border border-orange-200 font-bold text-gray-800 text-center"
value={endTime}
onChangeText={setEndTime}
/>
</View>
</View>
)}
<TouchableOpacity
onPress={() => {
onSubmit({ type, startDate, endDate, startTime, endTime });
onClose();
}}
className="w-full py-4 bg-[#099499] rounded-2xl shadow-lg mt-4 active:scale-[0.98]"
>
<Text className="text-white text-center font-bold text-lg">Invia Richiesta</Text>
</TouchableOpacity>
</View>
</ScrollView>
</View>
</View>
</Modal>
);
};

25
components/external-link.tsx
View File

@ -1,25 +0,0 @@
import { Href, Link } from 'expo-router';
import { openBrowserAsync, WebBrowserPresentationStyle } from 'expo-web-browser';
import { type ComponentProps } from 'react';
type Props = Omit<ComponentProps<typeof Link>, 'href'> & { href: Href & string };
export function ExternalLink({ href, ...rest }: Props) {
return (
<Link
target="_blank"
{...rest}
href={href}
onPress={async (event) => {
if (process.env.EXPO_OS !== 'web') {
// Prevent the default behavior of linking to the default browser on native.
event.preventDefault();
// Open the link in an in-app browser.
await openBrowserAsync(href, {
presentationStyle: WebBrowserPresentationStyle.AUTOMATIC,
});
}
}}
/>
);
}

18
components/haptic-tab.tsx
View File

@ -1,18 +0,0 @@
import { BottomTabBarButtonProps } from '@react-navigation/bottom-tabs';
import { PlatformPressable } from '@react-navigation/elements';
import * as Haptics from 'expo-haptics';
export function HapticTab(props: BottomTabBarButtonProps) {
return (
<PlatformPressable
{...props}
onPressIn={(ev) => {
if (process.env.EXPO_OS === 'ios') {
// Add a soft haptic feedback when pressing down on the tabs.
Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
}
props.onPressIn?.(ev);
}}
/>
);
}

19
components/hello-wave.tsx
View File

@ -1,19 +0,0 @@
import Animated from 'react-native-reanimated';
export function HelloWave() {
return (
<Animated.Text
style={{
fontSize: 28,
lineHeight: 32,
marginTop: -6,
animationName: {
'50%': { transform: [{ rotate: '25deg' }] },
},
animationIterationCount: 4,
animationDuration: '300ms',
}}>
👋
</Animated.Text>
);
}

79
components/parallax-scroll-view.tsx
View File

@ -1,79 +0,0 @@
import type { PropsWithChildren, ReactElement } from 'react';
import { StyleSheet } from 'react-native';
import Animated, {
interpolate,
useAnimatedRef,
useAnimatedStyle,
useScrollOffset,
} from 'react-native-reanimated';
import { ThemedView } from '@/components/themed-view';
import { useColorScheme } from '@/hooks/use-color-scheme';
import { useThemeColor } from '@/hooks/use-theme-color';
const HEADER_HEIGHT = 250;
type Props = PropsWithChildren<{
headerImage: ReactElement;
headerBackgroundColor: { dark: string; light: string };
}>;
export default function ParallaxScrollView({
children,
headerImage,
headerBackgroundColor,
}: Props) {
const backgroundColor = useThemeColor({}, 'background');
const colorScheme = useColorScheme() ?? 'light';
const scrollRef = useAnimatedRef<Animated.ScrollView>();
const scrollOffset = useScrollOffset(scrollRef);
const headerAnimatedStyle = useAnimatedStyle(() => {
return {
transform: [
{
translateY: interpolate(
scrollOffset.value,
[-HEADER_HEIGHT, 0, HEADER_HEIGHT],
[-HEADER_HEIGHT / 2, 0, HEADER_HEIGHT * 0.75]
),
},
{
scale: interpolate(scrollOffset.value, [-HEADER_HEIGHT, 0, HEADER_HEIGHT], [2, 1, 1]),
},
],
};
});
return (
<Animated.ScrollView
ref={scrollRef}
style={{ backgroundColor, flex: 1 }}
scrollEventThrottle={16}>
<Animated.View
style={[
styles.header,
{ backgroundColor: headerBackgroundColor[colorScheme] },
headerAnimatedStyle,
]}>
{headerImage}
</Animated.View>
<ThemedView style={styles.content}>{children}</ThemedView>
</Animated.ScrollView>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
header: {
height: HEADER_HEIGHT,
overflow: 'hidden',
},
content: {
flex: 1,
padding: 32,
gap: 16,
overflow: 'hidden',
},
});

60
components/themed-text.tsx
View File

@ -1,60 +0,0 @@
import { StyleSheet, Text, type TextProps } from 'react-native';
import { useThemeColor } from '@/hooks/use-theme-color';
export type ThemedTextProps = TextProps & {
lightColor?: string;
darkColor?: string;
type?: 'default' | 'title' | 'defaultSemiBold' | 'subtitle' | 'link';
};
export function ThemedText({
style,
lightColor,
darkColor,
type = 'default',
...rest
}: ThemedTextProps) {
const color = useThemeColor({ light: lightColor, dark: darkColor }, 'text');
return (
<Text
style={[
{ color },
type === 'default' ? styles.default : undefined,
type === 'title' ? styles.title : undefined,
type === 'defaultSemiBold' ? styles.defaultSemiBold : undefined,
type === 'subtitle' ? styles.subtitle : undefined,
type === 'link' ? styles.link : undefined,
style,
]}
{...rest}
/>
);
}
const styles = StyleSheet.create({
default: {
fontSize: 16,
lineHeight: 24,
},
defaultSemiBold: {
fontSize: 16,
lineHeight: 24,
fontWeight: '600',
},
title: {
fontSize: 32,
fontWeight: 'bold',
lineHeight: 32,
},
subtitle: {
fontSize: 20,
fontWeight: 'bold',
},
link: {
lineHeight: 30,
fontSize: 16,
color: '#0a7ea4',
},
});

14
components/themed-view.tsx
View File

@ -1,14 +0,0 @@
import { View, type ViewProps } from 'react-native';
import { useThemeColor } from '@/hooks/use-theme-color';
export type ThemedViewProps = ViewProps & {
lightColor?: string;
darkColor?: string;
};
export function ThemedView({ style, lightColor, darkColor, ...otherProps }: ThemedViewProps) {
const backgroundColor = useThemeColor({ light: lightColor, dark: darkColor }, 'background');
return <View style={[{ backgroundColor }, style]} {...otherProps} />;
}

45
components/ui/collapsible.tsx
View File

@ -1,45 +0,0 @@
import { PropsWithChildren, useState } from 'react';
import { StyleSheet, TouchableOpacity } from 'react-native';
import { ThemedText } from '@/components/themed-text';
import { ThemedView } from '@/components/themed-view';
import { IconSymbol } from '@/components/ui/icon-symbol';
import { Colors } from '@/constants/theme';
import { useColorScheme } from '@/hooks/use-color-scheme';
export function Collapsible({ children, title }: PropsWithChildren & { title: string }) {
const [isOpen, setIsOpen] = useState(false);
const theme = useColorScheme() ?? 'light';
return (
<ThemedView>
<TouchableOpacity
style={styles.heading}
onPress={() => setIsOpen((value) => !value)}
activeOpacity={0.8}>
<IconSymbol
name="chevron.right"
size={18}
weight="medium"
color={theme === 'light' ? Colors.light.icon : Colors.dark.icon}
style={{ transform: [{ rotate: isOpen ? '90deg' : '0deg' }] }}
/>
<ThemedText type="defaultSemiBold">{title}</ThemedText>
</TouchableOpacity>
{isOpen && <ThemedView style={styles.content}>{children}</ThemedView>}
</ThemedView>
);
}
const styles = StyleSheet.create({
heading: {
flexDirection: 'row',
alignItems: 'center',
gap: 6,
},
content: {
marginTop: 6,
marginLeft: 24,
},
});

32
components/ui/icon-symbol.ios.tsx
View File

@ -1,32 +0,0 @@
import { SymbolView, SymbolViewProps, SymbolWeight } from 'expo-symbols';
import { StyleProp, ViewStyle } from 'react-native';
export function IconSymbol({
name,
size = 24,
color,
style,
weight = 'regular',
}: {
name: SymbolViewProps['name'];
size?: number;
color: string;
style?: StyleProp<ViewStyle>;
weight?: SymbolWeight;
}) {
return (
<SymbolView
weight={weight}
tintColor={color}
resizeMode="scaleAspectFit"
name={name}
style={[
{
width: size,
height: size,
},
style,
]}
/>
);
}

41
components/ui/icon-symbol.tsx
View File

@ -1,41 +0,0 @@
// Fallback for using MaterialIcons on Android and web.
import MaterialIcons from '@expo/vector-icons/MaterialIcons';
import { SymbolWeight, SymbolViewProps } from 'expo-symbols';
import { ComponentProps } from 'react';
import { OpaqueColorValue, type StyleProp, type TextStyle } from 'react-native';
type IconMapping = Record<SymbolViewProps['name'], ComponentProps<typeof MaterialIcons>['name']>;
type IconSymbolName = keyof typeof MAPPING;
/**
* Add your SF Symbols to Material Icons mappings here.
* - see Material Icons in the [Icons Directory](https://icons.expo.fyi).
* - see SF Symbols in the [SF Symbols](https://developer.apple.com/sf-symbols/) app.
*/
const MAPPING = {
'house.fill': 'home',
'paperplane.fill': 'send',
'chevron.left.forwardslash.chevron.right': 'code',
'chevron.right': 'chevron-right',
} as IconMapping;
/**
* An icon component that uses native SF Symbols on iOS, and Material Icons on Android and web.
* This ensures a consistent look across platforms, and optimal resource usage.
* Icon `name`s are based on SF Symbols and require manual mapping to Material Icons.
*/
export function IconSymbol({
name,
size = 24,
color,
style,
}: {
name: IconSymbolName;
size?: number;
color: string | OpaqueColorValue;
style?: StyleProp<TextStyle>;
weight?: SymbolWeight;
}) {
return <MaterialIcons color={color} size={size} name={MAPPING[name]} style={style} />;
}

53
constants/theme.ts
View File

@ -1,53 +0,0 @@
/**
* Below are the colors that are used in the app. The colors are defined in the light and dark mode.
* There are many other ways to style your app. For example, [Nativewind](https://www.nativewind.dev/), [Tamagui](https://tamagui.dev/), [unistyles](https://reactnativeunistyles.vercel.app), etc.
*/
import { Platform } from 'react-native';
const tintColorLight = '#0a7ea4';
const tintColorDark = '#fff';
export const Colors = {
light: {
text: '#11181C',
background: '#fff',
tint: tintColorLight,
icon: '#687076',
tabIconDefault: '#687076',
tabIconSelected: tintColorLight,
},
dark: {
text: '#ECEDEE',
background: '#151718',
tint: tintColorDark,
icon: '#9BA1A6',
tabIconDefault: '#9BA1A6',
tabIconSelected: tintColorDark,
},
};
export const Fonts = Platform.select({
ios: {
/** iOS `UIFontDescriptorSystemDesignDefault` */
sans: 'system-ui',
/** iOS `UIFontDescriptorSystemDesignSerif` */
serif: 'ui-serif',
/** iOS `UIFontDescriptorSystemDesignRounded` */
rounded: 'ui-rounded',
/** iOS `UIFontDescriptorSystemDesignMonospaced` */
mono: 'ui-monospace',
},
default: {
sans: 'normal',
serif: 'serif',
rounded: 'normal',
mono: 'monospace',
},
web: {
sans: "system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif",
serif: "Georgia, 'Times New Roman', serif",
rounded: "'SF Pro Rounded', 'Hiragino Maru Gothic ProN', Meiryo, 'MS PGothic', sans-serif",
mono: "SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace",
},
});

41
data/data.ts Normal file
View File

@ -0,0 +1,41 @@
import { UserData, AttendanceRecord, DocumentItem, OfficeItem, PermitRecord } from '../types/types';
// --- MOCK DATA (File: data.ts) ---
export const MOCK_USER: UserData = {
name: "Mario Rossi",
role: "Tecnico Specializzato",
id: "EMP-8842"
};
export const ATTENDANCE_DATA: AttendanceRecord[] = [
{ id: 1, site: "Cantiere Ospedale A.", date: "03/12/2025", in: "08:00", out: "17:00", status: "complete" },
{ id: 2, site: "Uffici Centrali", date: "02/12/2025", in: "08:15", out: "17:15", status: "complete" },
{ id: 3, site: "Residenza Parco", date: "01/12/2025", in: "08:00", out: null, status: "incomplete" },
];
export const DOCUMENTS_DATA: DocumentItem[] = [
{ id: 1, name: "Schema Elettrico Piano 1", type: "PDF", site: "Cantiere Ospedale A.", date: "01/12/2025" },
{ id: 2, name: "Modulo Sicurezza v2", type: "PDF", site: "Generale", date: "28/11/2025" },
{ id: 3, name: "Certificazione Impianto", type: "PDF", site: "Residenza Parco", date: "25/11/2025" },
{ id: 4, name: "Manuale Domotica", type: "PDF", site: "Uffici Centrali", date: "20/11/2025" },
];
export const OFFICES_DATA: OfficeItem[] = [
{ id: 1, name: "Ufficio Tecnico", status: "online", temp: 22, lights: true, power: 450 },
{ id: 2, name: "Sala Riunioni", status: "offline", temp: 19, lights: false, power: 0 },
{ id: 3, name: "Amministrazione", status: "online", temp: 24, lights: true, power: 320 },
{ id: 4, name: "Magazzino", status: "online", temp: 18, lights: false, power: 120 },
];
export const COLORS = {
primary: '#099499',
bg: '#f3f4f6',
white: '#ffffff',
text: '#1f2937',
};
export const PERMITS_DATA: PermitRecord[] = [
{ id: 1, type: 'Ferie', startDate: '2025-12-24', endDate: '2025-12-31', status: 'Approvato' },
{ id: 2, type: 'Permesso', startDate: '2025-12-10', startTime: '09:00', endTime: '11:00', status: 'In Attesa' },
{ id: 3, type: 'Malattia', startDate: '2025-11-15', endDate: '2025-11-16', status: 'Approvato' },
];

3
global.css Normal file
View File

@ -0,0 +1,3 @@
@tailwind base;
@tailwind components;
@tailwind utilities;

1
hooks/use-color-scheme.ts
View File

@ -1 +0,0 @@
export { useColorScheme } from 'react-native';

21
hooks/use-color-scheme.web.ts
View File

@ -1,21 +0,0 @@
import { useEffect, useState } from 'react';
import { useColorScheme as useRNColorScheme } from 'react-native';
/**
* To support static rendering, this value needs to be re-calculated on the client side for web
*/
export function useColorScheme() {
const [hasHydrated, setHasHydrated] = useState(false);
useEffect(() => {
setHasHydrated(true);
}, []);
const colorScheme = useRNColorScheme();
if (hasHydrated) {
return colorScheme;
}
return 'light';
}

21
hooks/use-theme-color.ts
View File

@ -1,21 +0,0 @@
/**
* Learn more about light and dark modes:
* https://docs.expo.dev/guides/color-schemes/
*/
import { Colors } from '@/constants/theme';
import { useColorScheme } from '@/hooks/use-color-scheme';
export function useThemeColor(
props: { light?: string; dark?: string },
colorName: keyof typeof Colors.light & keyof typeof Colors.dark
) {
const theme = useColorScheme() ?? 'light';
const colorFromProps = props[theme];
if (colorFromProps) {
return colorFromProps;
} else {
return Colors[theme][colorName];
}
}

6
metro.config.js Normal file
View File

@ -0,0 +1,6 @@
const { getDefaultConfig } = require("expo/metro-config");
const { withNativeWind } = require('nativewind/metro');
const config = getDefaultConfig(__dirname)
module.exports = withNativeWind(config, { input: './global.css' })

1
nativewind-env.d.ts vendored Normal file
View File

@ -0,0 +1 @@
/// <reference types="nativewind/types" />

1170
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

15
package.json
View File

@ -27,21 +27,26 @@
"expo-symbols": "~1.0.7",
"expo-system-ui": "~6.0.8",
"expo-web-browser": "~15.0.9",
"lucide-react-native": "^0.555.0",
"nativewind": "^4.2.1",
"prettier-plugin-tailwindcss": "^0.5.14",
"react": "19.1.0",
"react-dom": "19.1.0",
"react-native": "0.81.5",
"react-native-gesture-handler": "~2.28.0",
"react-native-worklets": "0.5.1",
"react-native-reanimated": "~4.1.1",
"react-native-reanimated": "~3.17.4",
"react-native-safe-area-context": "~5.6.0",
"react-native-screens": "~4.16.0",
"react-native-web": "~0.21.0"
"react-native-ui-datepicker": "^3.1.2",
"react-native-web": "~0.21.0",
"react-native-worklets": "0.5.1",
"tailwindcss": "^3.4.18"
},
"devDependencies": {
"@types/react": "~19.1.0",
"typescript": "~5.9.2",
"eslint": "^9.25.0",
"eslint-config-expo": "~10.0.0"
"eslint-config-expo": "~10.0.0",
"typescript": "~5.9.2"
},
"private": true
}

112
scripts/reset-project.js
View File

@ -1,112 +0,0 @@
#!/usr/bin/env node
/**
* This script is used to reset the project to a blank state.
* It deletes or moves the /app, /components, /hooks, /scripts, and /constants directories to /app-example based on user input and creates a new /app directory with an index.tsx and _layout.tsx file.
* You can remove the `reset-project` script from package.json and safely delete this file after running it.
*/
const fs = require("fs");
const path = require("path");
const readline = require("readline");
const root = process.cwd();
const oldDirs = ["app", "components", "hooks", "constants", "scripts"];
const exampleDir = "app-example";
const newAppDir = "app";
const exampleDirPath = path.join(root, exampleDir);
const indexContent = `import { Text, View } from "react-native";
export default function Index() {
return (
<View
style={{
flex: 1,
justifyContent: "center",
alignItems: "center",
}}
>
<Text>Edit app/index.tsx to edit this screen.</Text>
</View>
);
}
`;
const layoutContent = `import { Stack } from "expo-router";
export default function RootLayout() {
return <Stack />;
}
`;
const rl = readline.createInterface({
input: process.stdin,
output: process.stdout,
});
const moveDirectories = async (userInput) => {
try {
if (userInput === "y") {
// Create the app-example directory
await fs.promises.mkdir(exampleDirPath, { recursive: true });
console.log(`📁 /${exampleDir} directory created.`);
}
// Move old directories to new app-example directory or delete them
for (const dir of oldDirs) {
const oldDirPath = path.join(root, dir);
if (fs.existsSync(oldDirPath)) {
if (userInput === "y") {
const newDirPath = path.join(root, exampleDir, dir);
await fs.promises.rename(oldDirPath, newDirPath);
console.log(`➡️ /${dir} moved to /${exampleDir}/${dir}.`);
} else {
await fs.promises.rm(oldDirPath, { recursive: true, force: true });
console.log(`❌ /${dir} deleted.`);
}
} else {
console.log(`➡️ /${dir} does not exist, skipping.`);
}
}
// Create new /app directory
const newAppDirPath = path.join(root, newAppDir);
await fs.promises.mkdir(newAppDirPath, { recursive: true });
console.log("\n📁 New /app directory created.");
// Create index.tsx
const indexPath = path.join(newAppDirPath, "index.tsx");
await fs.promises.writeFile(indexPath, indexContent);
console.log("📄 app/index.tsx created.");
// Create _layout.tsx
const layoutPath = path.join(newAppDirPath, "_layout.tsx");
await fs.promises.writeFile(layoutPath, layoutContent);
console.log("📄 app/_layout.tsx created.");
console.log("\n✅ Project reset complete. Next steps:");
console.log(
`1. Run \`npx expo start\` to start a development server.\n2. Edit app/index.tsx to edit the main screen.${
userInput === "y"
? `\n3. Delete the /${exampleDir} directory when you're done referencing it.`
: ""
}`
);
} catch (error) {
console.error(`❌ Error during script execution: ${error.message}`);
}
};
rl.question(
"Do you want to move existing files to /app-example instead of deleting them? (Y/n): ",
(answer) => {
const userInput = answer.trim().toLowerCase() || "y";
if (userInput === "y" || userInput === "n") {
moveDirectories(userInput).finally(() => rl.close());
} else {
console.log("❌ Invalid input. Please enter 'Y' or 'N'.");
rl.close();
}
}
);

10
tailwind.config.js Normal file
View File

@ -0,0 +1,10 @@
/** @type {import('tailwindcss').Config} */
module.exports = {
// NOTE: Update this to include the paths to all files that contain Nativewind classes.
content: ["./App.tsx", "./components/**/*.{js,jsx,ts,tsx}", "./app/**/*.{js,jsx,ts,tsx}"],
presets: [require("nativewind/preset")],
theme: {
extend: {},
},
plugins: [],
}

5
tsconfig.json
View File

@ -12,6 +12,7 @@
"**/*.ts",
"**/*.tsx",
".expo/types/**/*.ts",
"expo-env.d.ts"
"expo-env.d.ts",
"nativewind-env.d.ts"
]
}
}

48
types/types.ts Normal file
View File

@ -0,0 +1,48 @@
// --- TYPES & export INTERFACES (File: types.ts) ---
// In un progetto reale, metti queste interfacce in un file separato 'types.ts'
export interface UserData {
name: string;
role: string;
id: string;
}
export interface AttendanceRecord {
id: number;
site: string;
date: string;
in: string;
out: string | null;
status: 'complete' | 'incomplete';
}
export interface DocumentItem {
id: number;
name: string;
type: string;
site: string;
date: string;
}
export interface OfficeItem {
id: number;
name: string;
status: 'online' | 'offline';
temp: number;
lights: boolean;
power: number;
}
export type ScreenName = 'home' | 'attendance' | 'documents' | 'smart-office' | 'profile';
export type PermitType = 'Ferie' | 'Permesso' | 'Malattia';
export interface PermitRecord {
id: number;
type: PermitType;
startDate: string;
endDate?: string; // Opzionale per permessi giornalieri
startTime?: string; // Solo per permessi
endTime?: string; // Solo per permessi
status: 'Approvato' | 'In Attesa' | 'Rifiutato';
}