First UI draft
This commit is contained in:
3
app.json
3
app.json
@ -23,7 +23,8 @@
|
|||||||
},
|
},
|
||||||
"web": {
|
"web": {
|
||||||
"output": "static",
|
"output": "static",
|
||||||
"favicon": "./assets/images/favicon.png"
|
"favicon": "./assets/images/favicon.png",
|
||||||
|
"bundler": "metro"
|
||||||
},
|
},
|
||||||
"plugins": [
|
"plugins": [
|
||||||
"expo-router",
|
"expo-router",
|
||||||
|
|||||||
@ -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>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -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'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,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
@ -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',
|
|
||||||
},
|
|
||||||
});
|
|
||||||
@ -1,24 +1,64 @@
|
|||||||
import { DarkTheme, DefaultTheme, ThemeProvider } from '@react-navigation/native';
|
import '../global.css';
|
||||||
import { Stack } from 'expo-router';
|
import { Tabs } from 'expo-router';
|
||||||
import { StatusBar } from 'expo-status-bar';
|
import { Home, Clock, FileText, Zap, CalendarIcon } from 'lucide-react-native';
|
||||||
import 'react-native-reanimated';
|
|
||||||
|
|
||||||
import { useColorScheme } from '@/hooks/use-color-scheme';
|
|
||||||
|
|
||||||
export const unstable_settings = {
|
|
||||||
anchor: '(tabs)',
|
|
||||||
};
|
|
||||||
|
|
||||||
export default function RootLayout() {
|
|
||||||
const colorScheme = useColorScheme();
|
|
||||||
|
|
||||||
|
export default function AppLayout() {
|
||||||
return (
|
return (
|
||||||
<ThemeProvider value={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
|
<Tabs
|
||||||
<Stack>
|
screenOptions={{
|
||||||
<Stack.Screen name="(tabs)" options={{ headerShown: false }} />
|
headerShown: false,
|
||||||
<Stack.Screen name="modal" options={{ presentation: 'modal', title: 'Modal' }} />
|
tabBarStyle: {
|
||||||
</Stack>
|
backgroundColor: '#ffffff',
|
||||||
<StatusBar style="auto" />
|
borderTopWidth: 1,
|
||||||
</ThemeProvider>
|
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
101
app/attendance/index.tsx
Normal 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
130
app/automation/index.tsx
Normal 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
136
app/documents/index.tsx
Normal 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
126
app/index.tsx
Normal 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>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -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
176
app/permits/index.tsx
Normal 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
9
babel.config.js
Normal 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
42
components/QrScanModal.tsx
Normal 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
57
components/RangePickerModal.tsx
Normal 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
127
components/RenamePermitModal.tsx
Normal 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>
|
||||||
|
);
|
||||||
|
};
|
||||||
@ -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,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -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);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -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>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -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',
|
|
||||||
},
|
|
||||||
});
|
|
||||||
@ -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',
|
|
||||||
},
|
|
||||||
});
|
|
||||||
@ -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} />;
|
|
||||||
}
|
|
||||||
@ -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,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
@ -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,
|
|
||||||
]}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -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} />;
|
|
||||||
}
|
|
||||||
@ -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
41
data/data.ts
Normal 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
3
global.css
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
@tailwind base;
|
||||||
|
@tailwind components;
|
||||||
|
@tailwind utilities;
|
||||||
@ -1 +0,0 @@
|
|||||||
export { useColorScheme } from 'react-native';
|
|
||||||
@ -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';
|
|
||||||
}
|
|
||||||
@ -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
6
metro.config.js
Normal 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
1
nativewind-env.d.ts
vendored
Normal file
@ -0,0 +1 @@
|
|||||||
|
/// <reference types="nativewind/types" />
|
||||||
1170
package-lock.json
generated
1170
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
15
package.json
15
package.json
@ -27,21 +27,26 @@
|
|||||||
"expo-symbols": "~1.0.7",
|
"expo-symbols": "~1.0.7",
|
||||||
"expo-system-ui": "~6.0.8",
|
"expo-system-ui": "~6.0.8",
|
||||||
"expo-web-browser": "~15.0.9",
|
"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": "19.1.0",
|
||||||
"react-dom": "19.1.0",
|
"react-dom": "19.1.0",
|
||||||
"react-native": "0.81.5",
|
"react-native": "0.81.5",
|
||||||
"react-native-gesture-handler": "~2.28.0",
|
"react-native-gesture-handler": "~2.28.0",
|
||||||
"react-native-worklets": "0.5.1",
|
"react-native-reanimated": "~3.17.4",
|
||||||
"react-native-reanimated": "~4.1.1",
|
|
||||||
"react-native-safe-area-context": "~5.6.0",
|
"react-native-safe-area-context": "~5.6.0",
|
||||||
"react-native-screens": "~4.16.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": {
|
"devDependencies": {
|
||||||
"@types/react": "~19.1.0",
|
"@types/react": "~19.1.0",
|
||||||
"typescript": "~5.9.2",
|
|
||||||
"eslint": "^9.25.0",
|
"eslint": "^9.25.0",
|
||||||
"eslint-config-expo": "~10.0.0"
|
"eslint-config-expo": "~10.0.0",
|
||||||
|
"typescript": "~5.9.2"
|
||||||
},
|
},
|
||||||
"private": true
|
"private": true
|
||||||
}
|
}
|
||||||
|
|||||||
@ -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
10
tailwind.config.js
Normal 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: [],
|
||||||
|
}
|
||||||
@ -12,6 +12,7 @@
|
|||||||
"**/*.ts",
|
"**/*.ts",
|
||||||
"**/*.tsx",
|
"**/*.tsx",
|
||||||
".expo/types/**/*.ts",
|
".expo/types/**/*.ts",
|
||||||
"expo-env.d.ts"
|
"expo-env.d.ts",
|
||||||
|
"nativewind-env.d.ts"
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
48
types/types.ts
Normal file
48
types/types.ts
Normal 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';
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user