The base views for all sub screens in healthscreen/mock data removed

mobile/package.json

@@ -30,6 +30,7 @@
     "react-native-reanimated": "~4.1.1",
     "react-native-safe-area-context": "~5.6.0",
     "react-native-screens": "~4.16.0",
+    "react-native-svg": "^15.15.1",
     "react-native-worklets": "^0.5.1"
   },
   "devDependencies": {

mobile/src/navigation/Navigation.tsx

@@ -15,6 +15,11 @@ import RegisterScreen from '@screens/RegisterScreen';
 import MapScreen from '@screens/MapScreen';
 import WalkHistoryScreen from '@screens/WalkHistoryScreen';
 import WalkDetailScreen from '@screens/WalkDetailScreen';
+import HealthScreen from '@screens/HealthScreen';
+import VisitsScreen from '@screens/VisitsScreen';
+import MedicationsScreen from '@screens/MedicationsScreen';
+import VaccinationsScreen from '@screens/VaccinationsScreen';
+import WeightManagementScreen from '@screens/WeightManagementScreen';
 
 const Stack = createNativeStackNavigator();
 const Tab = createBottomTabNavigator();
@@ -175,6 +180,46 @@ export default function Navigation() {
                 headerBackTitle: 'Takaisin',
               }}
             />
+            <Stack.Screen
+              name="Health"
+              component={HealthScreen}
+              options={{
+                title: 'Terveys',
+                headerBackTitle: 'Takaisin',
+              }}
+            />
+            <Stack.Screen
+              name="Visits"
+              component={VisitsScreen}
+              options={{
+                title: 'Käynnit',
+                headerBackTitle: 'Takaisin',
+              }}
+            />
+            <Stack.Screen
+              name="Medications"
+              component={MedicationsScreen}
+              options={{
+                title: 'Lääkitykset',
+                headerBackTitle: 'Takaisin',
+              }}
+            />
+            <Stack.Screen
+              name="Vaccinations"
+              component={VaccinationsScreen}
+              options={{
+                title: 'Rokotukset',
+                headerBackTitle: 'Takaisin',
+              }}
+            />
+            <Stack.Screen
+              name="WeightManagement"
+              component={WeightManagementScreen}
+              options={{
+                title: 'Painonhallinta',
+                headerBackTitle: 'Takaisin',
+              }}
+            />
           </>
         ) : (
           <>

mobile/src/screens/HealthScreen.tsx

@@ -0,0 +1,80 @@
+import React, { useEffect, useRef } from 'react';
+import { View, ScrollView, Animated } from 'react-native';
+import { Text, Card } from 'react-native-paper';
+import { MaterialCommunityIcons } from '@expo/vector-icons';
+import { useNavigation } from '@react-navigation/native';
+import { homeStyles as styles } from '../styles/screenStyles';
+import { COLORS, SPACING } from '../styles/theme';
+
+export default function HealthScreen() {
+  const navigation = useNavigation();
+  const pulse = useRef(new Animated.Value(1)).current;
+
+  useEffect(() => {
+    const animatePulse = () => {
+      Animated.sequence([
+        Animated.timing(pulse, { toValue: 1.2, duration: 800, useNativeDriver: true }),
+        Animated.timing(pulse, { toValue: 1, duration: 800, useNativeDriver: true }),
+        Animated.delay(500),
+      ]).start(() => animatePulse());
+    };
+    animatePulse();
+  }, []);
+
+  return (
+    <ScrollView style={styles.container}>
+      <View style={styles.header}>
+        <View style={{ flexDirection: 'row', justifyContent: 'center', marginBottom: SPACING.md }}>
+          <Animated.View style={{ transform: [{ scale: pulse }] }}>
+            <MaterialCommunityIcons name="heart-pulse" size={48} color={COLORS.primary} />
+          </Animated.View>
+        </View>
+        <Text variant="bodyMedium" style={styles.subtitle}>
+          Pidä huolta lemmikin terveydestä
+        </Text>
+      </View>
+
+      <View style={styles.content}>
+        <Card style={styles.card} onPress={() => navigation.navigate('Visits' as never)}>
+          <Card.Content style={{ alignItems: 'center' }}>
+            <MaterialCommunityIcons name="hospital-building" size={64} color={COLORS.primary} />
+            <Text variant="titleLarge" style={{ marginTop: SPACING.md }}>Käynnit</Text>
+            <Text variant="bodyMedium" style={[styles.cardText, { textAlign: 'center' }]}>
+              Eläinlääkäri- ja klinikkakäynnit
+            </Text>
+          </Card.Content>
+        </Card>
+
+        <Card style={styles.card} onPress={() => navigation.navigate('Medications' as never)}>
+          <Card.Content style={{ alignItems: 'center' }}>
+            <MaterialCommunityIcons name="pill" size={64} color={COLORS.primary} />
+            <Text variant="titleLarge" style={{ marginTop: SPACING.md }}>Lääkitykset</Text>
+            <Text variant="bodyMedium" style={[styles.cardText, { textAlign: 'center' }]}>
+              Lääkkeet ja hoito-ohjelmat
+            </Text>
+          </Card.Content>
+        </Card>
+
+        <Card style={styles.card} onPress={() => navigation.navigate('Vaccinations' as never)}>
+          <Card.Content style={{ alignItems: 'center' }}>
+            <MaterialCommunityIcons name="needle" size={64} color={COLORS.primary} />
+            <Text variant="titleLarge" style={{ marginTop: SPACING.md }}>Rokotukset</Text>
+            <Text variant="bodyMedium" style={[styles.cardText, { textAlign: 'center' }]}>
+              Rokotushistoria ja muistutukset
+            </Text>
+          </Card.Content>
+        </Card>
+
+        <Card style={styles.card} onPress={() => navigation.navigate('WeightManagement' as never)}>
+          <Card.Content style={{ alignItems: 'center' }}>
+            <MaterialCommunityIcons name="scale-bathroom" size={64} color={COLORS.primary} />
+            <Text variant="titleLarge" style={{ marginTop: SPACING.md }}>Painonhallinta</Text>
+            <Text variant="bodyMedium" style={[styles.cardText, { textAlign: 'center' }]}>
+              Seuraa painoa ja kasvua
+            </Text>
+          </Card.Content>
+        </Card>
+      </View>
+    </ScrollView>
+  );
+}

mobile/src/screens/HomeScreen.tsx

@@ -82,7 +82,7 @@ export default function HomeScreen() {
           </Card.Content>
         </Card>
 
-        <Card style={styles.card} onPress={() => console.log('Terveys')}>
+        <Card style={styles.card} onPress={() => navigation.navigate('Health' as never)}>
           <Card.Content style={{ alignItems: 'center' }}>
             <MaterialCommunityIcons name="medical-bag" size={64} color={COLORS.primary} />
             <Text variant="titleLarge" style={{ marginTop: SPACING.md }}>Terveys</Text>