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

42
components/QrScanModal.tsx Normal file
View File

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

57
components/RangePickerModal.tsx Normal file
View File

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

127
components/RenamePermitModal.tsx Normal file
View File

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

25
components/external-link.tsx
View File

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

18
components/haptic-tab.tsx
View File

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

19
components/hello-wave.tsx
View File

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

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

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

60
components/themed-text.tsx
View File

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

14
components/themed-view.tsx
View File

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

45
components/ui/collapsible.tsx
View File

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

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

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

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

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