made myVehicle UI

app/(auth)/(tabs)/(home)/(vehicle)/addVehiclePage.tsx

@@ -0,0 +1,13 @@
+import { View, Text } from 'react-native';
+import React from 'react';
+import AddVehiclePageComponent from '../../../../../component/accountPages/addVehiclePageComponent';
+
+const AddVehiclePage = () => {
+    return (
+        <View className="flex-1">
+            <AddVehiclePageComponent />
+        </View>
+    );
+};
+
+export default AddVehiclePage;

app/(auth)/(tabs)/(home)/(vehicle)/addVehicleSuccessfullPage.tsx

@@ -0,0 +1,13 @@
+import { View, Text } from 'react-native';
+import React from 'react';
+import AddVehicleSuccessfulPageComponent from '../../../../../component/accountPages/addVehicleSuccessfulPageComponent';
+
+const AddVehicleSuccessfulPage = () => {
+    return (
+        <View className="flex-1">
+            <AddVehicleSuccessfulPageComponent />
+        </View>
+    );
+};
+
+export default AddVehicleSuccessfulPage;

app/(auth)/(tabs)/(home)/(vehicle)/manageVehiclePage.tsx

@@ -0,0 +1,12 @@
+import { View, Text } from 'react-native';
+import ManageVehiclePageComponent from '../../../../../component/accountPages/manageVehiclePageComponent';
+
+const ManageVehiclePage = () => {
+    return (
+        <View className="flex-1">
+            <ManageVehiclePageComponent />
+        </View>
+    );
+};
+
+export default ManageVehiclePage;

app/(auth)/(tabs)/(home)/(vehicle)/myVehiclePage.tsx

@@ -0,0 +1,13 @@
+import { View } from 'react-native';
+import React from 'react';
+import MyVehiclePageComponent from '../../../../../component/accountPages/myVehiclePageComponent';
+
+const MyVehiclePage = () => {
+    return (
+        <View className="flex-1">
+            <MyVehiclePageComponent />
+        </View>
+    );
+};
+
+export default MyVehiclePage;

component/accountPages/addVehiclePageComponent.tsx

@@ -0,0 +1,143 @@
+import { router } from 'expo-router';
+import {
+    View,
+    Text,
+    ScrollView,
+    Pressable,
+    Image,
+    Dimensions,
+    ImageBackground,
+    StyleSheet,
+    TextInput
+} from 'react-native';
+import CheckBox from '@react-native-community/checkbox';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import { PreviousPageBlackSvg } from '../global/SVG';
+import NormalButton from '../global/normal_button';
+import { useState } from 'react';
+import Checkbox from 'expo-checkbox';
+
+const AddVehiclePageComponent = () => {
+    const [isChecked, setChecked] = useState(false);
+    const { height: deviceHeight, width: deviceWidth } =
+        Dimensions.get('window');
+
+    return (
+        <SafeAreaView
+            className="flex-1 bg-white"
+            edges={['top', 'right', 'left']}
+        >
+            <ScrollView
+                showsVerticalScrollIndicator={false}
+                className="flex-1 mx-[5%]"
+            >
+                <View style={{ marginTop: 25 }}>
+                    <Pressable
+                        className="self-start"
+                        onPress={() => {
+                            if (router.canGoBack()) {
+                                router.back();
+                            } else {
+                                router.replace('/accountMainPage');
+                            }
+                        }}
+                    >
+                        <PreviousPageBlackSvg />
+                    </Pressable>
+                    <Text
+                        style={{
+                            fontSize: 30,
+                            marginTop: 25,
+                            marginBottom: 10
+                        }}
+                    >
+                        新增車輛
+                    </Text>
+                </View>
+
+                <View className="items-center ">
+                    <Image
+                        source={require('../../assets/car.png')}
+                        resizeMode="contain"
+                        style={{
+                            width: deviceWidth * 0.8,
+                            height: deviceHeight * 0.25
+                        }}
+                    />
+                </View>
+                <Text className="text-xl mb-4">新增車輛</Text>
+                <View
+                    style={{
+                        display: 'flex',
+                        flexDirection: 'column',
+                        gap: 10
+                    }}
+                >
+                    <Pressable
+                        style={styles.button}
+                        onPress={() => console.log('goToChooseCarPage')}
+                    >
+                        <TextInput
+                            style={styles.fakeTextInput}
+                            placeholder="車輛類型"
+                            editable={false}
+                            pointerEvents="none"
+                        ></TextInput>
+                        <TextInput
+                            style={styles.fakeTextInput}
+                            placeholder="車輛型號"
+                            editable={false}
+                            pointerEvents="none"
+                        ></TextInput>
+                        <TextInput
+                            style={styles.fakeTextInput}
+                            placeholder="車輛牌照號碼"
+                            editable={false}
+                            pointerEvents="none"
+                        ></TextInput>
+                    </Pressable>
+                </View>
+                <View className="flex-row items-center">
+                    <Text className="mt-4 mb-4 text-lg">設置為預設車輛</Text>
+                    <Checkbox
+                        style={styles.checkbox}
+                        value={isChecked}
+                        onValueChange={setChecked}
+                        color={isChecked ? '#025c72' : undefined}
+                    />
+                </View>
+                <NormalButton
+                    title={
+                        <Text
+                            style={{
+                                fontWeight: '700',
+                                fontSize: 20,
+                                color: '#fff'
+                            }}
+                        >
+                            新增
+                        </Text>
+                    }
+                    onPress={() => router.push('addVehicleSuccessfulPage')}
+                />
+                <Text> </Text>
+            </ScrollView>
+        </SafeAreaView>
+    );
+};
+
+const styles = StyleSheet.create({
+    button: { flex: 1, gap: 10, marginTop: 5 },
+    fakeTextInput: {
+        maxWidth: '100%',
+        fontSize: 16,
+        borderWidth: 1,
+        padding: 20,
+        borderRadius: 12,
+        borderColor: '#bbbbbb'
+    },
+    checkbox: {
+        margin: 8
+    }
+});
+export default AddVehiclePageComponent;

component/accountPages/addVehicleSuccessfulPageComponent.tsx

@@ -0,0 +1,76 @@
+import {
+    View,
+    Text,
+    ScrollView,
+    Image,
+    Dimensions,
+    Pressable
+} from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import NormalButton from '../global/normal_button';
+import { PreviousPageBlackSvg, TickLogoSvg } from '../global/SVG';
+import { router } from 'expo-router';
+
+const AddVehicleSuccessfulPageComponent = () => {
+    const { height: deviceHeight, width: deviceWidth } =
+        Dimensions.get('window');
+    return (
+        <SafeAreaView className="flex-1 bg-white">
+            <ScrollView
+                className="flex-1 mx-[5%]"
+                showsVerticalScrollIndicator={false}
+            >
+                <View style={{ marginTop: 25, flex: 1 }}>
+                    <Pressable
+                        className="self-start"
+                        onPress={() => {
+                            if (router.canGoBack()) {
+                                router.back();
+                            } else {
+                                router.replace('/accountMainPage');
+                            }
+                        }}
+                    >
+                        <PreviousPageBlackSvg />
+                    </Pressable>
+                    <View className="flex-row items-center mt-6">
+                        <TickLogoSvg />
+                        <Text className="text-3xl pl-2">新增完成</Text>
+                    </View>
+                    <View className="items-center pt-4 justify-center">
+                        <View className="items-center ">
+                            <Image
+                                source={require('../../assets/car.png')}
+                                resizeMode="contain"
+                                style={{
+                                    width: deviceWidth * 0.8,
+                                    height: deviceHeight * 0.25
+                                }}
+                            />
+                        </View>
+
+                        <Text className="text-3xl font-light pb-4">
+                            TESLA Model 3
+                        </Text>
+                        <Text className="text-lg font-light pb-4">
+                            已加入我的車輛裡
+                        </Text>
+                    </View>
+
+                    <NormalButton
+                        title={
+                            <Text style={{ color: '#fff', fontSize: 20 }}>
+                                返回首頁
+                            </Text>
+                        }
+                        onPress={() => {
+                           router.replace('homePage')
+                        }}
+                    />
+                </View>
+            </ScrollView>
+        </SafeAreaView>
+    );
+};
+
+export default AddVehicleSuccessfulPageComponent;

component/accountPages/manageVehiclePageComponent.tsx

@@ -0,0 +1,143 @@
+import { router } from 'expo-router';
+import {
+    View,
+    Text,
+    ScrollView,
+    Pressable,
+    Image,
+    Dimensions,
+    StyleSheet
+} from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import { PreviousPageBlackSvg, StarSvg } from '../global/SVG';
+import NormalButton from '../global/normal_button';
+import { useState } from 'react';
+
+const ManageVehiclePageComponent = () => {
+    const { height: deviceHeight, width: deviceWidth } =
+        Dimensions.get('window');
+
+    return (
+        <SafeAreaView
+            className="flex-1 bg-white"
+            edges={['top', 'right', 'left']}
+        >
+            <ScrollView
+                showsVerticalScrollIndicator={false}
+                className="flex-1 mx-[5%]"
+            >
+                <View style={{ marginTop: 25, flexDirection: 'column' }}>
+                    <Pressable
+                        className="self-start"
+                        onPress={() => {
+                            if (router.canGoBack()) {
+                                router.back();
+                            } else {
+                                router.replace('/accountMainPage');
+                            }
+                        }}
+                    >
+                        <PreviousPageBlackSvg />
+                    </Pressable>
+                </View>
+
+                <Text
+                    style={{
+                        fontSize: 30,
+                        marginTop: 25,
+                        marginBottom: 10
+                    }}
+                >
+                    管理車輛
+                </Text>
+                <View className="items-center ">
+                    <Image
+                        source={require('../../assets/car.png')}
+                        resizeMode="contain"
+                        style={{
+                            width: deviceWidth * 0.8,
+                            height: deviceHeight * 0.25
+                        }}
+                    />
+                </View>
+
+                <View className="flex-row space-x-2 ">
+                    <View
+                        style={{
+                            width: 4,
+                            height: '100%',
+                            backgroundColor: '#02677D'
+                        }}
+                    />
+                    <View>
+                        <Text className="text-2xl">TESLA Model 3</Text>
+                        <Text className="text-lg text-[#888888]">CE1107</Text>
+                    </View>
+                </View>
+
+                <NormalButton
+                    title={
+                        <Text
+                            style={{
+                                fontWeight: '500',
+                                fontSize: 20,
+                                color: '#fff'
+                            }}
+                        >
+                            設置為預設車輛 <StarSvg />
+                        </Text>
+                    }
+                    // onPress={() => router.push(addVehicleSuccessful)}
+                    onPress={() => console.log('ab')}
+                    extendedStyle={{ marginTop: 24 }}
+                />
+                <View className="w-full h-1 my-4 bg-[#DBE4E8]" />
+
+                <View>
+                    <Text className="text-xl pb-4">車輛資訊</Text>
+                    <Text className="text-base text-[#888888]">加入日期</Text>
+                    <Text className="text-base mb-3">2/24/2024</Text>
+                    <Text className="text-base text-[#888888]">總充電量</Text>
+                    <Text className="text-base mb-3">307kWh</Text>
+                    <Text className="text-base text-[#888888]">上一次充電</Text>
+                    <Text className="text-base mb-3">3/12/2024</Text>
+                    <View className="my-4 pb-8">
+                        <NormalButton
+                            title={
+                                <Text
+                                    style={{
+                                        color: 'white',
+                                        fontSize: 20,
+                                        fontWeight: '800'
+                                    }}
+                                >
+                                    删除車輛
+                                </Text>
+                            }
+                            onPress={() => router.replace('mainPage')}
+                            extendedStyle={{
+                                backgroundColor: '#D40000'
+                            }}
+                        />
+                    </View>
+                </View>
+            </ScrollView>
+        </SafeAreaView>
+    );
+};
+
+const styles = StyleSheet.create({
+    button: { flex: 1, gap: 10, marginTop: 5 },
+    fakeTextInput: {
+        maxWidth: '100%',
+        fontSize: 16,
+        borderWidth: 1,
+        padding: 20,
+        borderRadius: 12,
+        borderColor: '#bbbbbb'
+    },
+    checkbox: {
+        margin: 8
+    }
+});
+export default ManageVehiclePageComponent;

component/accountPages/myVehiclePageComponent.tsx

@@ -0,0 +1,181 @@
+import { router } from 'expo-router';
+import {
+    View,
+    Text,
+    ScrollView,
+    Pressable,
+    Image,
+    Dimensions,
+    ImageBackground
+} from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import { CrossLogoSvg, GreenStarSvg, RightArrowIconSvg } from '../global/SVG';
+import NormalButton from '../global/normal_button';
+
+const VehicleRowComponent = ({
+    deviceWidth,
+    deviceHeight
+}: {
+    deviceWidth: number;
+    deviceHeight: number;
+}) => (
+    <Pressable onPress={() => router.push('manageVehiclePage')}>
+        <View
+            className="rounded-xl overflow-hidden mb-3"
+            style={{
+                width: deviceWidth * 0.9,
+                height: deviceHeight * 0.12
+            }}
+        >
+            <ImageBackground
+                source={require('../../assets/myVehicleBackground.png')}
+                resizeMode="cover"
+                className="flex-1 flex-row items-center justify-between "
+            >
+                <Image
+                    style={{
+                        marginTop: 15,
+                        marginLeft: 5,
+                        width: deviceWidth * 0.35,
+                        height: '100%'
+                    }}
+                    resizeMode="contain"
+                    source={require('../../assets/car1.png')}
+                    className=""
+                />
+                {/* <View className="pr-28 "> */}
+                <View
+                    className="flex-col "
+                    style={{
+                        paddingRight: deviceHeight < 600 ? 80 : 100
+                    }}
+                >
+                    <Text
+                        style={{
+                            fontSize: deviceHeight < 600 ? 18 : 22,
+                            fontWeight: '600'
+                        }}
+                    >
+                        TESLA
+                    </Text>
+                    <Text style={{ fontSize: deviceHeight < 600 ? 14 : 18 }}>
+                        Model S
+                    </Text>
+                    <Text
+                        style={{
+                            fontSize: deviceHeight < 600 ? 12 : 16,
+                            color: '#02677D'
+                        }}
+                        className=" text-[#02677D]"
+                    >
+                        BF0992
+                    </Text>
+                </View>
+                <View className="pr-3">
+                    <RightArrowIconSvg />
+                </View>
+            </ImageBackground>
+        </View>
+    </Pressable>
+);
+
+const MyVehiclePageComponent = () => {
+    const { height: deviceHeight, width: deviceWidth } =
+        Dimensions.get('window');
+    console.log(deviceHeight, deviceWidth);
+    return (
+        <SafeAreaView
+            className="flex-1 bg-white"
+            edges={['top', 'right', 'left']}
+        >
+            <ScrollView
+                showsVerticalScrollIndicator={false}
+                className="flex-1 mx-[5%]"
+            >
+                <View style={{ marginTop: 25 }}>
+                    <Pressable
+                        className="self-start"
+                        onPress={() => {
+                            if (router.canGoBack()) {
+                                router.back();
+                            } else {
+                                router.replace('/accountMainPage');
+                            }
+                        }}
+                    >
+                        <CrossLogoSvg />
+                    </Pressable>
+                    <Text
+                        style={{
+                            fontSize: 45,
+                            marginTop: 25,
+                            marginBottom: 10
+                        }}
+                    >
+                        我的車輛
+                    </Text>
+                </View>
+                <View className="items-center ">
+                    <Image
+                        source={require('../../assets/car.png')}
+                        resizeMode="contain"
+                        style={{
+                            width: deviceWidth * 0.8,
+                            height: deviceHeight * 0.25
+                        }}
+                    />
+                </View>
+                <View className="flex-row space-x-2 ">
+                    <View
+                        style={{
+                            width: 4,
+                            height: '100%',
+                            backgroundColor: '#02677D'
+                        }}
+                    />
+                    <View>
+                        <View className="flex-row items-center">
+                            <Text className="text-lg text-[#02677D]">
+                                預設車輛
+                            </Text>
+                            <GreenStarSvg />
+                        </View>
+                        <Text className="text-2xl">TESLA Model 3</Text>
+                        <Text className="text-lg text-[#888888]">CE1107</Text>
+                    </View>
+                </View>
+                <View className="w-full h-1 my-4 bg-[#DBE4E8]" />
+
+                <Text className="text-xl mb-4">其他車輛</Text>
+                <VehicleRowComponent
+                    deviceHeight={deviceHeight}
+                    deviceWidth={deviceWidth}
+                />
+                <VehicleRowComponent
+                    deviceHeight={deviceHeight}
+                    deviceWidth={deviceWidth}
+                />
+                <VehicleRowComponent
+                    deviceHeight={deviceHeight}
+                    deviceWidth={deviceWidth}
+                />
+                <NormalButton
+                    title={
+                        <Text
+                            style={{
+                                fontWeight: '700',
+                                fontSize: 20,
+                                color: '#fff'
+                            }}
+                        >
+                            新增車輛
+                        </Text>
+                    }
+                    onPress={() => router.push('addVehiclePage')}
+                />
+            </ScrollView>
+        </SafeAreaView>
+    );
+};
+
+export default MyVehiclePageComponent;

component/global/SVG.tsx

@@ -173,6 +173,15 @@ export const StarSvg = () => (
         />
     </Svg>
 );
+
+export const GreenStarSvg = () => (
+    <Svg width="20" height="18" viewBox="0 0 20 18" fill="none">
+        <Path
+            d="M4.39015 17.3596L5.8786 10.9834L0.930908 6.69802L7.44784 6.13264L10.0001 0.121094L12.5525 6.13264L19.0694 6.69802L14.1217 10.9834L15.6101 17.3596L10.0001 13.9742L4.39015 17.3596Z"
+            fill="#02677D"
+        />
+    </Svg>
+);
 export const TickLogoSvg = () => (
     <Svg width="40" height="40" viewBox="0 0 40 40" fill="none">
         <Rect width="40" height="40" rx="20" fill="#02677D" />

component/homePage/homePage.tsx

@@ -78,7 +78,7 @@ const HomePage: React.FC<HomePageProps> = () => {
                         </View>
                         <View className="flex-1">
                             <NormalButton
-                                onPress={() => router.push('/k')}
+                                onPress={() => router.push('myVehiclePage')}
                                 title={
                                     <Text className="text-white font-bold text-lg">
                                         我的車輛

package-lock.json

@@ -14,6 +14,7 @@
         "axios": "^1.6.7",
         "dotenv": "^16.4.5",
         "expo": "~51.0.7",
+        "expo-checkbox": "~3.0.0",
         "expo-constants": "~16.0.1",
         "expo-env": "^1.1.1",
         "expo-linking": "~6.3.1",
@@ -8399,6 +8400,11 @@
         "expo": "*"
       }
     },
+    "node_modules/expo-checkbox": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/expo-checkbox/-/expo-checkbox-3.0.0.tgz",
+      "integrity": "sha512-ZfNUawE0Bp/Xa5Gwtn04yfg6rCnKdqdmBXvEGbYg5U+IfRfLh+ocLiiBAcx760DfdYpzMGQOGpUtWQeEVmJwNw=="
+    },
     "node_modules/expo-constants": {
       "version": "16.0.1",
       "resolved": "https://registry.npmjs.org/expo-constants/-/expo-constants-16.0.1.tgz",

package.json

@@ -36,7 +36,8 @@
     "react-native-svg": "^15.3.0",
     "react-native-tab-view": "^3.5.2",
     "zustand": "^4.5.2",
-    "react-native-reanimated": "~3.10.1"
+    "react-native-reanimated": "~3.10.1",
+    "expo-checkbox": "~3.0.0"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",