First UI draft
This commit is contained in:
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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user