First UI draft

app/_layout.tsx

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