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

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>
);
}