.

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

@@ -0,0 +1,252 @@
+interface AlphabetSection {
+    letter: string;
+    brands: CarBrand[];
+}
+const carBrands: AlphabetSection[] = [
+    {
+        letter: 'A',
+        brands: [
+            { name: 'Audi', logo: require('../../../../../assets/audi.png') },
+            { name: 'Acura', logo: require('../../../../../assets/acura.png') }
+        ]
+    },
+    {
+        letter: 'B',
+        brands: [
+            { name: 'BMW', logo: require('../../../../../assets/bmw.png') },
+            { name: 'BYD', logo: require('../../../../../assets/byd.png') }
+        ]
+    },
+    {
+        letter: 'C',
+        brands: [
+            { name: 'Chevrolet', logo: require('../../../../../assets/chevrolet.png') },
+            { name: 'Cadillac', logo: require('../../../../../assets/cadillac.png') }
+        ]
+    },
+    {
+        letter: 'F',
+        brands: [
+            { name: 'Ford', logo: require('../../../../../assets/ford.png') },
+            { name: 'Fiat', logo: require('../../../../../assets/fiat.png') }
+        ]
+    },
+    {
+        letter: 'G',
+        brands: [{ name: 'Genesis', logo: require('../../../../../assets/genesis.png') }]
+    },
+    {
+        letter: 'H',
+        brands: [
+            { name: 'Honda', logo: require('../../../../../assets/honda.png') },
+            { name: 'Hyundai', logo: require('../../../../../assets/hyundai.png') }
+        ]
+    },
+    {
+        letter: 'J',
+        brands: [{ name: 'Jaguar', logo: require('../../../../../assets/jaguar.png') }]
+    },
+    {
+        letter: 'K',
+        brands: [{ name: 'Kia', logo: require('../../../../../assets/kia.png') }]
+    },
+    {
+        letter: 'M',
+        brands: [
+            { name: 'Mercedes-Benz', logo: require('../../../../../assets/benz.png') },
+            { name: 'Mini', logo: require('../../../../../assets/mini.png') },
+            { name: 'Mazda', logo: require('../../../../../assets/mazda.png') }
+        ]
+    },
+    {
+        letter: 'N',
+        brands: [{ name: 'Nissan', logo: require('../../../../../assets/nissan.png') }]
+    },
+    {
+        letter: 'P',
+        brands: [{ name: 'Porsche', logo: require('../../../../../assets/porsche.png') }]
+    },
+    {
+        letter: 'S',
+        brands: [{ name: 'Subaru', logo: require('../../../../../assets/subaru.png') }]
+    },
+    {
+        letter: 'T',
+        brands: [
+            { name: 'Tesla', logo: require('../../../../../assets/tesla.png') },
+            { name: 'Toyota', logo: require('../../../../../assets/toyota.png') }
+        ]
+    },
+    {
+        letter: 'V',
+        brands: [
+            { name: 'Volkswagen', logo: require('../../../../../assets/volkswagen.png') },
+            { name: 'Volvo', logo: require('../../../../../assets/volvo.png') }
+        ]
+    }
+];
+import React, { useEffect, useState } from 'react';
+import { View, Text, Image, Pressable, StyleSheet, ScrollView } from 'react-native';
+
+import { FlashList } from '@shopify/flash-list';
+import { router } from 'expo-router';
+import useVehicleStore from '../../../../../providers/vehicle_store';
+import { PreviousPageBlackSvg } from '../../../../../component/global/SVG';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import { chargeStationService } from '../../../../../service/chargeStationService';
+
+const SetVehiclesOne = () => {
+    const [carData, setCarData] = useState();
+    const [extractedCarNameAndImgUrl, setExtractedCarNameAndImgUrl] = useState('');
+    const [processedCarData, setProcessedCarData] = useState([]);
+    const {
+        vehicleBrand,
+        vehicleModel,
+        BrandID,
+        ModelID,
+        licensePlate,
+        setVehicleBrand,
+        setVehicleModel,
+        setBrandID,
+        setModelID,
+        setLicensePlate
+    } = useVehicleStore();
+
+    //this uses getCarBrand to create an array of object with 2 keys: name and img_url
+    useEffect(() => {
+        const fetchCarBrand = async () => {
+            try {
+                const response = await chargeStationService.fetchCarBrand();
+                if (response) {
+                    const processedData = await Promise.all(
+                        response.data.map(async (car) => ({
+                            ...car,
+                            logo: await chargeStationService.getProcessedCarImageUrl(car.img_url)
+                        }))
+                    );
+                    setProcessedCarData(processedData);
+                }
+            } catch (error) {
+                console.log(error);
+            }
+        };
+        fetchCarBrand();
+    }, []);
+
+    useEffect(() => {
+        console.log('Zustand VehicleBrand', vehicleBrand);
+        console.log('Zustand BrandID', BrandID);
+        console.log('Zustand VehicleModel', vehicleModel);
+        console.log('Zustand ModelID', ModelID);
+    }, [processedCarData]);
+
+    const renderBrandItem = ({ item: brand }: { item }) => (
+        <Pressable
+            style={styles.brandItem}
+            onPress={() => {
+                setVehicleBrand(brand.name);
+                setBrandID(brand.id);
+
+                router.push({
+                    pathname: 'setVehiclesTwo',
+                    params: {
+                        brandId: brand.id.toString(),
+                        brandName: brand.name,
+                        carTypes: JSON.stringify(brand.car_types)
+                    }
+                });
+            }}
+        >
+            <Image source={{ uri: brand.logo }} style={styles.logo} resizeMode="contain" />
+            <Text style={styles.brandName}>{brand.name}</Text>
+        </Pressable>
+    );
+
+    const renderAlphabetSection = ({ item: section }: { item: AlphabetSection }) => (
+        <View>
+            <View style={styles.letterHeader} className="h-9">
+                <Text style={styles.letterText}>{section.letter}</Text>
+            </View>
+            <View style={styles.brandRow}>{section.brands.map((brand) => renderBrandItem({ item: brand }))}</View>
+        </View>
+    );
+
+    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="flex-1">
+                    <FlashList
+                        estimatedItemSize={100}
+                        data={processedCarData.reduce((acc, brand) => {
+                            const letter = brand.name[0].toUpperCase();
+                            const existingSection = acc.find((section) => section.letter === letter);
+                            if (existingSection) {
+                                existingSection.brands.push(brand);
+                            } else {
+                                acc.push({ letter, brands: [brand] });
+                            }
+                            return acc;
+                        }, [] as AlphabetSection[])}
+                        renderItem={renderAlphabetSection}
+                        keyExtractor={(item) => item.letter}
+                    />
+                </View>
+            </ScrollView>
+        </SafeAreaView>
+    );
+};
+
+const styles = StyleSheet.create({
+    letterHeader: {
+        backgroundColor: '#E3F2F8',
+        padding: 10,
+        marginVertical: 10
+    },
+    letterText: {
+        color: '#02677D',
+        fontSize: 14,
+        fontWeight: 'bold'
+    },
+    brandRow: {
+        flexDirection: 'row',
+        flexWrap: 'wrap'
+    },
+    brandItem: {
+        width: '33.33%',
+        alignItems: 'center',
+        padding: 10
+    },
+    logo: {
+        width: 80,
+        height: 80
+    },
+    brandName: {
+        marginTop: 5,
+        textAlign: 'center'
+    }
+});
+
+export default SetVehiclesOne;

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

@@ -0,0 +1,167 @@
+interface CarModel {
+    name: string;
+    year: number;
+    id: string;
+}
+
+import React, { useEffect, useState } from 'react';
+import { View, Text, Image, Pressable, StyleSheet, ScrollView } from 'react-native';
+import { FlashList } from '@shopify/flash-list';
+import { router, useLocalSearchParams } from 'expo-router';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import { PreviousPageBlackSvg } from '../../../../../component/global/SVG';
+import useVehicleStore from '../../../../../providers/vehicle_store';
+import { set } from 'date-fns';
+interface CarType {
+    id: number;
+    name: string;
+}
+const SetVehiclesTwo = () => {
+    const { brandId, brandName, carTypes } = useLocalSearchParams<{
+        brandId: string;
+        brandName: string;
+        carTypes: string;
+    }>();
+    const [parsedCarTypes, setParsedCarTypes] = useState<CarType[]>([]);
+
+    useEffect(() => {
+        if (carTypes) {
+            const parsed = JSON.parse(carTypes);
+            setParsedCarTypes(parsed);
+            console.log(parsed);
+        }
+    }, [carTypes]);
+
+    const {
+        vehicleBrand,
+        vehicleModel,
+        BrandID,
+        ModelID,
+        licensePlate,
+        setVehicleBrand,
+        setVehicleModel,
+        setBrandID,
+        setModelID,
+        setLicensePlate
+    } = useVehicleStore();
+    const logoPath = `../../../../../assets/${vehicleBrand.toLowerCase()}.png`;
+    const [carModels, setCarModels] = useState<CarModel[]>([]);
+
+    const brandLogos = {
+        audi: require('../../../../../assets/audi.png'),
+        acura: require('../../../../../assets/acura.png'),
+        bmw: require('../../../../../assets/bmw.png'),
+        byd: require('../../../../../assets/byd.png'),
+        chevrolet: require('../../../../../assets/chevrolet.png'),
+        cadillac: require('../../../../../assets/cadillac.png'),
+        ford: require('../../../../../assets/ford.png'),
+        fiat: require('../../../../../assets/fiat.png'),
+        genesis: require('../../../../../assets/genesis.png'),
+        honda: require('../../../../../assets/honda.png'),
+        hyundai: require('../../../../../assets/hyundai.png'),
+        jaguar: require('../../../../../assets/jaguar.png'),
+        kia: require('../../../../../assets/kia.png'),
+        'mercedes-benz': require('../../../../../assets/benz.png'),
+        mini: require('../../../../../assets/mini.png'),
+        mazda: require('../../../../../assets/mazda.png'),
+        nissan: require('../../../../../assets/nissan.png'),
+        porsche: require('../../../../../assets/porsche.png'),
+        subaru: require('../../../../../assets/subaru.png'),
+        tesla: require('../../../../../assets/tesla.png'),
+        toyota: require('../../../../../assets/toyota.png'),
+        volkswagen: require('../../../../../assets/volkswagen.png'),
+        volvo: require('../../../../../assets/volvo.png'),
+        default: require('../../../../../assets/bmw.png') // Make sure to add a default logo
+    };
+
+    const getBrandLogo = (brand: string) => {
+        const logoKey = brand.toLowerCase().replace(/\s+/g, '-');
+        return brandLogos[logoKey] || brandLogos.default;
+    };
+
+    const renderModelItem = ({ item: model }: { item: CarModel }) => (
+        <>
+            <Pressable
+                className="flex-1 items-center justify-center py-6"
+                onPress={() => {
+                    console.log(`Selected model: ${model.name}`);
+                    console.log(`selected type id: ${model.id}`);
+                    setVehicleModel(model.name);
+                    setModelID(model.id);
+                    router.push('addVehiclePage');
+                }}
+            >
+                <Text style={styles.modelYear} className="pb-1">
+                    {model.year}
+                </Text>
+                <Text style={styles.modelName}>{model.name}</Text>
+            </Pressable>
+            <View className="border-t mx-4 border-[#CCCCCC]" />
+        </>
+    );
+
+    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 className="flex flex-row items-center space-x-8">
+                        <Image source={getBrandLogo(vehicleBrand)} className="w-20 h-20 " resizeMode="contain" />
+                        <Text className="text-4xl italic tracking-wider">{vehicleBrand}</Text>
+                    </View>
+                </View>
+                <View className="flex-1">
+                    <FlashList
+                        data={parsedCarTypes}
+                        renderItem={renderModelItem}
+                        keyExtractor={(item) => item.name}
+                        estimatedItemSize={30}
+                        numColumns={1}
+                    />
+                </View>
+            </ScrollView>
+        </SafeAreaView>
+    );
+};
+
+const styles = StyleSheet.create({
+    modelItem: {
+        flex: 1,
+        height: 100,
+        justifyContent: 'center',
+        alignItems: 'center',
+        backgroundColor: '#F0F0F0',
+        margin: 5,
+        borderRadius: 10
+    },
+    modelName: {
+        fontSize: 16,
+        fontWeight: 'bold'
+    },
+    modelYear: {
+        fontSize: 14,
+        color: '#666'
+    }
+});
+
+export default SetVehiclesTwo;

app/(public)/test.tsx

@@ -1,35 +1,13 @@
 import React from 'react';
 import { View, Image, Linking, Button, StyleSheet, Text } from 'react-native';
 import { WebView } from 'react-native-webview';
-export default function Test() {
-    const payUrl =
-        'https://globalmapi.alipay.com/gateway.do?body=&payment_inst=ALIPAYHK&secondary_merchant_name=QFPay+UAT+1&_input_charset=UTF-8&sign=36046040fe56413e3def830b7d7ec12b&currency=HKD&notify_url=https%3A%2F%2Ftest-o2-hk.qfapi.com%2Ftrade%2Falipay_hk%2Fv1%2Fnotify&secondary_merchant_id=1000004312&order_valid_time=1800&partner=2088231067382451&product_code=NEW_WAP_OVERSEAS_SELLER&subject=Top+Up%3A+1+HKD&refer_url=&service=create_forex_trade&qrcode_width=200&secondary_merchant_industry=5999&qr_pay_mode=4&total_fee=1.0&sign_type=MD5&out_trade_no=20240823155300020043067251&order_gmt_create=2024-08-23+15%3A46%3A39';
-    const handlePayment = async () => {
-        const supported = await Linking.canOpenURL(payUrl);
-        if (supported) {
-            await Linking.openURL(payUrl);
-        } else {
-            console.error("Don't know how to open URI: " + payUrl);
-        }
-    };
+import SetVehiclePageComponent from '../../component/global/setVehiclePageComponent';
+import SetVehiclesOne from '../(auth)/(tabs)/(home)/(vehicle)/setVehiclesOne';
 
+export default function Test() {
     return (
-        <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
-            <Image source={{ uri: payUrl }} style={styles.image} resizeMode="stretch" className="bg-red-100" />
-            <Text>hi</Text>
-            <Button title="Pay Now" onPress={handlePayment} />
-            {/* <WebView source={{ uri: payurl }} style={{ flex: 1 }} /> */}
+        <View style={{ flex: 1 }}>
+            <SetVehiclesOne />
         </View>
     );
 }
-const styles = StyleSheet.create({
-    container: {
-        flex: 1,
-        justifyContent: 'center',
-        alignItems: 'center'
-    },
-    image: {
-        width: '100%',
-        height: '100%'
-    }
-});

component/accountPages/addVehiclePageComponent.tsx

@@ -1,14 +1,49 @@
 import { router } from 'expo-router';
-import { View, Text, ScrollView, Pressable, Image, Dimensions, StyleSheet, TextInput } from 'react-native';
+import { View, Text, ScrollView, Pressable, Image, Dimensions, StyleSheet, TextInput, Alert } from 'react-native';
 import { SafeAreaView } from 'react-native-safe-area-context';
 import { PreviousPageBlackSvg } from '../global/SVG';
 import NormalButton from '../global/normal_button';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import Checkbox from 'expo-checkbox';
+import useVehicleStore from '../../providers/vehicle_store';
+import { chargeStationService } from '../../service/chargeStationService';
 
 const AddVehiclePageComponent = () => {
     const [isChecked, setChecked] = useState(false);
+    const [isLoading, setIsLoading] = useState(false);
+
     const { height: deviceHeight, width: deviceWidth } = Dimensions.get('window');
+    const {
+        vehicleBrand,
+        vehicleModel,
+        BrandID,
+        ModelID,
+        licensePlate,
+        setVehicleBrand,
+        setVehicleModel,
+        setBrandID,
+        setModelID,
+        setLicensePlate
+    } = useVehicleStore();
+
+    const handleSubmit = async () => {
+        setIsLoading(true);
+        try {
+            const result = await chargeStationService.addCar(licensePlate, BrandID, ModelID, isChecked);
+            if (result) {
+                router.push({
+                    pathname: 'addVehicleSuccessfulPage',
+                    params: { vehicleBrand: vehicleBrand, vehicleModel: vehicleModel }
+                });
+            } else {
+                Alert.alert('新增車輛失敗', '請再試一次');
+            }
+        } catch (error) {
+            console.log(error, 'unexpected');
+        } finally {
+            setIsLoading(false);
+        }
+    };
 
     return (
         <SafeAreaView className="flex-1 bg-white" edges={['top', 'right', 'left']}>
@@ -44,26 +79,25 @@ const AddVehiclePageComponent = () => {
                         gap: 10
                     }}
                 >
-                    <Pressable style={styles.button} onPress={() => router.push('chooseCarPage')}>
-                        <TextInput
-                            style={styles.fakeTextInput}
-                            placeholder="車輛類型"
-                            editable={false}
-                            pointerEvents="none"
-                        ></TextInput>
+                    <Pressable style={styles.button} onPress={() => router.push('setVehiclesOne')}>
                         <TextInput
                             style={styles.fakeTextInput}
-                            placeholder="車輛型號"
+                            placeholder={vehicleBrand ? vehicleBrand : '車輛類型'}
                             editable={false}
                             pointerEvents="none"
                         ></TextInput>
                         <TextInput
                             style={styles.fakeTextInput}
-                            placeholder="車輛牌照號碼"
+                            placeholder={vehicleModel ? vehicleModel : '車輛型號'}
                             editable={false}
                             pointerEvents="none"
                         ></TextInput>
                     </Pressable>
+                    <TextInput
+                        style={styles.fakeTextInput}
+                        onChangeText={(e) => setLicensePlate(e)}
+                        placeholder="點擊輸入車輛牌照號碼"
+                    ></TextInput>
                 </View>
                 <View className="flex-row items-center">
                     <Text className="mt-4 mb-4 text-lg">設置為預設車輛</Text>
@@ -86,7 +120,15 @@ const AddVehiclePageComponent = () => {
                             新增
                         </Text>
                     }
-                    onPress={() => router.push('addVehicleSuccessfulPage')}
+                    onPress={() => {
+                        handleSubmit();
+                        setVehicleBrand('');
+                        setVehicleModel('');
+                        setBrandID('');
+                        setModelID('');
+                        setLicensePlate('');
+                        router.push('addVehicleSuccessfulPage');
+                    }}
                 />
                 <Text> </Text>
             </ScrollView>

component/accountPages/addVehicleSuccessfulPageComponent.tsx

@@ -7,31 +7,25 @@ import { useEffect, useState } from 'react';
 import { chargeStationService } from '../../service/chargeStationService';
 
 const AddVehicleSuccessfulPageComponent = () => {
-    const { height: deviceHeight, width: deviceWidth } = Dimensions.get('window');
-    const params = useLocalSearchParams();
-    const selectedTypeID = params.selectedTypeID;
-    const [vehicleName, setVehicleName] = useState('');
-    const [vehicleImage, setVehicleImage] = useState('');
+    // useEffect(() => {
+    //     const fetchData = async () => {
+    //         try {
+    //             const result = await chargeStationService.fetchCarBrand();
+    //             console.log(result.data);
+    //             const carType = result.data
+    //                 .flatMap((brand) => brand.car_types)
+    //                 .find((type) => type.id === selectedTypeID);
+    //             // console.log(carType);
+    //             setVehicleName(carType.name);
 
-    useEffect(() => {
-        const fetchData = async () => {
-            try {
-                const result = await chargeStationService.fetchCarBrand();
-                console.log(result.data);
-                const carType = result.data
-                    .flatMap((brand) => brand.car_types)
-                    .find((type) => type.id === selectedTypeID);
-                // console.log(carType);
-                setVehicleName(carType.name);
-
-                const getImage = await chargeStationService.getProcessedImageUrl(carType.type_image_url);
-                setVehicleImage(getImage);
-            } catch (error) {
-                console.log(error);
-            }
-        };
-        fetchData();
-    }, []);
+    //             const getImage = await chargeStationService.getProcessedImageUrl(carType.type_image_url);
+    //             setVehicleImage(getImage);
+    //         } catch (error) {
+    //             console.log(error);
+    //         }
+    //     };
+    //     fetchData();
+    // }, []);
 
     return (
         <SafeAreaView className="flex-1 bg-white">
@@ -53,8 +47,8 @@ const AddVehicleSuccessfulPageComponent = () => {
                         <TickLogoSvg />
                         <Text className="text-3xl pl-2">新增完成</Text>
                     </View>
-                    <View className="items-center pt-4 justify-center">
-                        <View className="items-center ">
+                    <View className=" pt-4 ">
+                        {/* <View className="items-center ">
                             <Image
                                 source={{
                                     uri: vehicleImage
@@ -65,10 +59,11 @@ const AddVehicleSuccessfulPageComponent = () => {
                                     height: deviceHeight * 0.25
                                 }}
                             />
-                        </View>
+                        </View> */}
 
-                        <Text className="text-3xl font-light pb-4 text-center">{vehicleName}</Text>
-                        <Text className="text-lg font-light pb-4">已加入我的車輛裡</Text>
+                        <Text className="text-lg font-light pb-4 text-start">
+                            新增車輛完成。 請透過下方按鈕返回首頁。
+                        </Text>
                     </View>
 
                     <NormalButton

component/bookingMenuPage/bookingConfirmationPage.tsx

@@ -11,8 +11,7 @@ const BookingConfirmationPageComponent = () => {
     const params = useLocalSearchParams();
     console.log(params);
 
-    const { setSelectedCouponName, setSelectedCouponRedeemCode } =
-        useCouponStore();
+    const { setSelectedCouponName, setSelectedCouponRedeemCode } = useCouponStore();
 
     useEffect(() => {
         setSelectedCouponName('');
@@ -44,10 +43,7 @@ const BookingConfirmationPageComponent = () => {
     const setBookingInfo = useBookingStore((state) => state.setBookingInfo);
 
     return (
-        <SafeAreaView
-            style={{ flex: 1, backgroundColor: 'white' }}
-            edges={['top', 'left', 'right']}
-        >
+        <SafeAreaView style={{ flex: 1, backgroundColor: 'white' }} edges={['top', 'left', 'right']}>
             <ScrollView className="flex-1" showsVerticalScrollIndicator={false}>
                 <View className="flex-1">
                     <View className="pl-8 pt-8">
@@ -69,45 +65,27 @@ const BookingConfirmationPageComponent = () => {
                     <View className="flex-1 mt-4 mx-[5%]">
                         <View className="flex-1 flex-row items-center pb-3">
                             <View className="flex-1 flex-column">
-                                <Text
-                                    style={styles.grayColor}
-                                    className="text-base"
-                                >
+                                <Text style={styles.grayColor} className="text-base">
                                     日期
                                 </Text>
-                                <Text
-                                    style={styles.greenColor}
-                                    className="text-6xl text-center  pt-2"
-                                >
+                                <Text style={styles.greenColor} className="text-6xl text-center  pt-2">
                                     {convertDate(params.date)}
                                 </Text>
                             </View>
                             <View className="flex-1 flex-column">
-                                <Text
-                                    style={styles.grayColor}
-                                    className="text-base pl-7"
-                                >
+                                <Text style={styles.grayColor} className="text-base pl-7">
                                     時間
                                 </Text>
-                                <Text
-                                    style={styles.greenColor}
-                                    className="text-6xl text-center pt-2"
-                                >
+                                <Text style={styles.greenColor} className="text-6xl text-center pt-2">
                                     {params.bookTime}
                                 </Text>
                             </View>
                         </View>
                         <View className="flex-1 flex-column justify-center space-y-1 pb-3">
-                            <Text
-                                style={styles.grayColor}
-                                className="text-base"
-                            >
+                            <Text style={styles.grayColor} className="text-base">
                                 充電地點
                             </Text>
-                            <Text
-                                style={styles.greenColor}
-                                className="text-3xl "
-                            >
+                            <Text style={styles.greenColor} className="text-3xl ">
                                 {params.chargeStationName}
                             </Text>
                             <Text style={styles.grayColor} className="text-sm">
@@ -116,93 +94,45 @@ const BookingConfirmationPageComponent = () => {
                         </View>
                         <View className="flex-1 flex-row  pb-3  ">
                             <View className="flex-column flex-1">
-                                <Text
-                                    style={styles.grayColor}
-                                    className="text-base"
-                                >
+                                <Text style={styles.grayColor} className="text-base">
                                     方案
                                 </Text>
-                                {params.chargingMethod ===
-                                'chargingBasedOnWatt' ? (
+                                {params.chargingMethod === 'chargingBasedOnWatt' ? (
                                     <>
-                                        <Text
-                                            style={styles.greenColor}
-                                            className="text-lg"
-                                        >
+                                        <Text style={styles.greenColor} className="text-lg">
                                             按每度電結算
                                         </Text>
-                                        <Text
-                                            style={styles.grayColor}
-                                            className="text-sm"
-                                        >
+                                        <Text style={styles.grayColor} className="text-sm">
                                             {params.chargingWatt?.split('~')[0]}
                                         </Text>
                                     </>
                                 ) : (
-                                    <Text
-                                        style={styles.greenColor}
-                                        className="text-lg"
-                                    >
+                                    <Text style={styles.greenColor} className="text-lg">
                                         充滿停機
                                     </Text>
                                 )}
                             </View>
                             <View className="flex-column flex-1">
-                                <Text
-                                    style={styles.grayColor}
-                                    className="text-base"
-                                >
+                                <Text style={styles.grayColor} className="text-base">
                                     車輛
                                 </Text>
-                                <Text
-                                    style={styles.greenColor}
-                                    className="text-lg"
-                                >
+                                <Text style={styles.greenColor} className="text-lg">
                                     {params.carName}
                                 </Text>
                             </View>
                         </View>
                     </View>
-
-
-
-                    
                 </View>
-                <View className="w-full h-1 bg-[#DBE4E8]" />
-                <View className="flex-1 mx-[5%]">
-                    <Text className="text-xl py-4">收費概要</Text>
-                    <View className="flex-row justify-between">
-                        <Text className="text-base">充電費用</Text>
-                        <Text className="text-base">HK$ {paymentFee}</Text>
-                    </View>
-                    {params.chargingMethod === 'chargingBasedOnWatt' ? (
-                        <Text style={styles.grayColor} className="text-base">
-                            按每度電結算: {params.chargingWatt?.split('~')[0]}
-                        </Text>
-                    ) : (
-                        <Text style={styles.grayColor} className="text-base">
-                            充滿停機預估費用
-                        </Text>
-                    )}
 
-                    <View className="h-0.5 my-3 bg-[#f4f4f4]" />
-                    {/* <View className="flex-row justify-between">
-                        <Text className="text-base" style={styles.grayColor}>
-                            小計
-                        </Text>
-                        <Text className="text-base">HK$ </Text>
-                    </View>
-                    <View className="flex-row justify-between">
-                        <Text className="text-base" style={styles.grayColor}>
-                            其他費用
-                        </Text>
-                        <Text className="text-base">HK$ 11</Text>
-                    </View>
-                    <View className="h-0.5 my-3 bg-[#f4f4f4]" /> */}
-                    <View className="flex-row justify-between ">
-                        <Text className="text-xl">總計</Text>
-                        <Text className="text-xl">HK$ {paymentFee}</Text>
-                    </View>
+                <View className="border-t mx-4 border-[#CCCCCC]"></View>
+                <View className="flex-1 mx-[5%] mt-4 space-y-1">
+                    <Text className="text-xs text-[#888888]">
+                        **由於充電站車流眾多，敬請客戶務必於預約時間的十五分鐘內到達充電站。
+                    </Text>
+                    <Text className="text-xs text-[#888888]">
+                        **若客戶逾時超過15分鐘，系統將視作自動放棄預約，客戶需要重新預約一次。
+                    </Text>
+                    <Text className="text-xs text-[#888888]">**本公司有權保留全數費用，恕不退還。</Text>
                     <View className="mt-4">
                         <NormalButton
                             title={
@@ -219,14 +149,10 @@ const BookingConfirmationPageComponent = () => {
                             // onPress={() => router.push('bookingSuccessPage')}
                             onPress={() => {
                                 setBookingInfo({
-                                    bookDateForDisplay: convertDate(
-                                        params.date
-                                    ),
+                                    bookDateForDisplay: convertDate(params.date),
                                     bookTimeForDisplay: params.bookTime,
-                                    chargeStationAddressForDisplay:
-                                        params.chargeStationAddress,
-                                    chargeStationNameForDisplay:
-                                        params.chargeStationName,
+                                    chargeStationAddressForDisplay: params.chargeStationAddress,
+                                    chargeStationNameForDisplay: params.chargeStationName,
                                     carNameForDisplay: params.carName
                                 });
                                 router.push({
@@ -245,7 +171,7 @@ const BookingConfirmationPageComponent = () => {
                                     }
                                 });
                             }}
-                            extendedStyle={{ padding: 24 }}
+                            extendedStyle={{ padding: 24, marginTop: 24 }}
                         />
                     </View>
                 </View>

component/global/setVehiclePageComponent.tsx

@@ -0,0 +1,65 @@
+import { router } from 'expo-router';
+import { View, Text, ScrollView, Pressable, Image, Dimensions, StyleSheet, TextInput, FlatList } from 'react-native';
+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';
+import useVehicleStore from '../../providers/vehicle_store';
+import CarBrandSelector from './testingCar';
+
+const SetVehiclePageComponent = () => {
+    const [isChecked, setChecked] = useState(false);
+
+    const { vehicleBrand, vehicleModel, licensePlate, setVehicleBrand, setVehicleModel, setLicensePlate } =
+        useVehicleStore();
+
+    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="flex-1">
+                    <CarBrandSelector />
+                </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 SetVehiclePageComponent;

component/global/testingCar.tsx

@@ -0,0 +1,201 @@
+// interface CarBrand {
+//     name: string;
+//     logo?: any; // This would be the require() statement for the logo image
+// }
+
+// interface AlphabetSection {
+//     letter: string;
+//     brands: CarBrand[];
+// }
+// const carBrands: AlphabetSection[] = [
+//     {
+//         letter: 'A',
+//         brands: [
+//             { name: 'Audi', logo: require('../../assets/audi.png') },
+//             { name: 'Acura', logo: require('../../assets/acura.png') }
+//         ]
+//     },
+//     {
+//         letter: 'B',
+//         brands: [
+//             { name: 'BMW', logo: require('../../assets/bmw1.png') },
+//             { name: 'BYD', logo: require('../../assets/byd.png') }
+//         ]
+//     },
+//     {
+//         letter: 'C',
+//         brands: [
+//             { name: 'Chevrolet', logo: require('../../assets/chevrolet1.png') },
+//             { name: 'Cadillac', logo: require('../../assets/cadillac1.png') }
+//         ]
+//     },
+//     {
+//         letter: 'F',
+//         brands: [
+//             { name: 'Ford', logo: require('../../assets/ford.png') },
+//             { name: 'Fiat', logo: require('../../assets/fiat.png') }
+//         ]
+//     },
+//     {
+//         letter: 'G',
+//         brands: [{ name: 'Genesis', logo: require('../../assets/genesis.png') }]
+//     },
+//     {
+//         letter: 'H',
+//         brands: [
+//             { name: 'Honda', logo: require('../../assets/honda.png') },
+//             { name: 'Hyundai', logo: require('../../assets/hyundai.png') }
+//         ]
+//     },
+//     {
+//         letter: 'J',
+//         brands: [{ name: 'Jaguar', logo: require('../../assets/jaguar.png') }]
+//     },
+//     {
+//         letter: 'K',
+//         brands: [{ name: 'Kia', logo: require('../../assets/kia.png') }]
+//     },
+
+//     {
+//         letter: 'M',
+//         brands: [
+//             { name: 'Mercedes-Benz', logo: require('../../assets/benz.png') },
+//             { name: 'Mini', logo: require('../../assets/mini.png') },
+//             { name: 'Mazda', logo: require('../../assets/mazda.png') }
+//         ]
+//     },
+//     {
+//         letter: 'N',
+//         brands: [{ name: 'Nissan', logo: require('../../assets/nissan.png') }]
+//     },
+//     {
+//         letter: 'P',
+//         brands: [{ name: 'Porsche', logo: require('../../assets/porsche.png') }]
+//     },
+
+//     {
+//         letter: 'S',
+//         brands: [{ name: 'Subaru', logo: require('../../assets/subaru.png') }]
+//     },
+//     {
+//         letter: 'T',
+//         brands: [
+//             { name: 'Tesla', logo: require('../../assets/tesla.png') },
+//             { name: 'Toyota', logo: require('../../assets/toyota.png') }
+//         ]
+//     },
+//     {
+//         letter: 'V',
+//         brands: [
+//             { name: 'Volkswagen', logo: require('../../assets/volkswagen.png') },
+//             { name: 'Volvo', logo: require('../../assets/volvo.png') }
+//         ]
+//     }
+// ];
+
+// import React, { useEffect } from 'react';
+// import { View, Text, Image, Pressable, StyleSheet, SafeAreaView, ScrollView } from 'react-native';
+// import useVehicleStore from '../../providers/vehicle_store';
+// import { FlashList } from '@shopify/flash-list';
+// import { router } from 'expo-router';
+// import { PreviousPageBlackSvg } from './SVG';
+
+// const CarBrandSelector = () => {
+//     const { vehicleBrand, vehicleModel, licensePlate, setVehicleBrand, setVehicleModel, setLicensePlate } =
+//         useVehicleStore();
+
+//     useEffect(() => {
+//         console.log('vehicleBrand in zustand', vehicleBrand);
+//     }, [vehicleBrand]);
+//     const renderBrandItem = ({ item: brand }: { item: CarBrand }) => (
+//         <Pressable
+//             style={styles.brandItem}
+//             onPress={() => {
+//                 setVehicleBrand(brand.name);
+//                 console.log(brand.name);
+//             }}
+//         >
+//             <Image source={brand.logo} style={styles.logo} resizeMode="contain" />
+//             <Text style={styles.brandName}>{brand.name}</Text>
+//         </Pressable>
+//     );
+
+//     const renderAlphabetSection = ({ item: section }: { item: AlphabetSection }) => (
+//         <View>
+//             <View style={styles.letterHeader} className="h-9">
+//                 <Text style={styles.letterText}>{section.letter}</Text>
+//             </View>
+//             <View style={styles.brandRow}>{section.brands.map((brand) => renderBrandItem({ item: brand }))}</View>
+//         </View>
+//     );
+
+//     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="flex-1">
+//                     <FlashList
+//                         estimatedItemSize={100}
+//                         data={carBrands}
+//                         renderItem={renderAlphabetSection}
+//                         keyExtractor={(item) => item.letter}
+//                     />
+//                 </View>
+//             </ScrollView>
+//         </SafeAreaView>
+//     );
+// };
+
+// const styles = StyleSheet.create({
+//     letterHeader: {
+//         backgroundColor: '#E3F2F8',
+//         padding: 10,
+//         marginVertical: 10
+//     },
+//     letterText: {
+//         color: '#02677D',
+//         fontSize: 14,
+//         fontWeight: 'bold'
+//     },
+//     brandRow: {
+//         flexDirection: 'row',
+//         flexWrap: 'wrap'
+//     },
+//     brandItem: {
+//         width: '33.33%',
+//         alignItems: 'center',
+//         padding: 10
+//     },
+//     logo: {
+//         width: 80,
+//         height: 80
+//     },
+//     brandName: {
+//         marginTop: 5,
+//         textAlign: 'center'
+//     }
+// });
+
+// export default CarBrandSelector;

component/global/testingCar2.tsx

@@ -0,0 +1,144 @@
+// interface CarModel {
+//     name: string;
+//     year: number;
+// }
+
+// interface CarModelSection {
+//     category: string;
+//     models: CarModel[];
+// }
+// const carModels: CarModelSection[] = [
+//     {
+//         category: 'SUV',
+//         models: [
+//             { name: 'X1', year: 2023 },
+//             { name: 'X3', year: 2023 },
+//             { name: 'X5', year: 2023 }
+//         ]
+//     },
+//     {
+//         category: 'Sedan',
+//         models: [
+//             { name: '3 Series', year: 2023 },
+//             { name: '5 Series', year: 2023 },
+//             { name: '7 Series', year: 2023 }
+//         ]
+//     },
+//     {
+//         category: 'Electric',
+//         models: [
+//             { name: 'i3', year: 2023 },
+//             { name: 'i4', year: 2023 },
+//             { name: 'iX', year: 2023 }
+//         ]
+//     }
+// ];
+
+// import React, { useEffect } from 'react';
+// import { View, Text, Image, Pressable, StyleSheet, ScrollView } from 'react-native';
+// import useVehicleStore from '../../providers/vehicle_store';
+// import { FlashList } from '@shopify/flash-list';
+// import { router } from 'expo-router';
+// import { PreviousPageBlackSvg } from './SVG';
+// import { SafeAreaView } from 'react-native-safe-area-context';
+// const CarModelSelector = ({ brandName }: { brandName: string }) => {
+//     const renderModelItem = ({ item: model }: { item: CarModel }) => (
+//         <Pressable style={styles.modelItem} onPress={() => console.log(model.name)}>
+//             <Text style={styles.modelName}>{model.name}</Text>
+//             <Text style={styles.modelYear}>{model.year}</Text>
+//         </Pressable>
+//     );
+
+//     const renderCategorySection = ({ item: section }: { item: CarModelSection }) => (
+//         <View>
+//             <View style={styles.categoryHeader}>
+//                 <Text style={styles.categoryText}>{section.category}</Text>
+//             </View>
+//             <FlashList
+//                 data={section.models}
+//                 renderItem={renderModelItem}
+//                 keyExtractor={(item) => item.name}
+//                 horizontal={true}
+//                 showsHorizontalScrollIndicator={false}
+//             />
+//         </View>
+//     );
+
+//     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="flex-1">
+//                     <FlashList
+//                         data={carModels}
+//                         renderItem={renderCategorySection}
+//                         keyExtractor={(item) => item.category}
+//                     />
+//                 </View>
+//             </ScrollView>
+//         </SafeAreaView>
+//     );
+// };
+
+// const styles = StyleSheet.create({
+//     container: {
+//         flex: 1,
+//         padding: 10
+//     },
+//     brandTitle: {
+//         fontSize: 24,
+//         fontWeight: 'bold',
+//         marginBottom: 20
+//     },
+//     categoryHeader: {
+//         backgroundColor: '#E3F2F8',
+//         padding: 10,
+//         marginVertical: 10
+//     },
+//     categoryText: {
+//         color: '#02677D',
+//         fontSize: 18,
+//         fontWeight: 'bold'
+//     },
+//     modelItem: {
+//         width: 150,
+//         height: 100,
+//         justifyContent: 'center',
+//         alignItems: 'center',
+//         backgroundColor: '#F0F0F0',
+//         margin: 5,
+//         borderRadius: 10
+//     },
+//     modelName: {
+//         fontSize: 16,
+//         fontWeight: 'bold'
+//     },
+//     modelYear: {
+//         fontSize: 14,
+//         color: '#666'
+//     }
+// });
+
+// export default CarModelSelector;

component/registrationMultiStepForm/formComponent/form.tsx

@@ -1,12 +1,5 @@
 import { useState } from 'react';
-import {
-    View,
-    Text,
-    StyleSheet,
-    Pressable,
-    TouchableWithoutFeedback,
-    Keyboard
-} from 'react-native';
+import { View, Text, StyleSheet, Pressable, TouchableWithoutFeedback, Keyboard } from 'react-native';
 import Verification from './formPages/verification';
 import BasicInformation from './formPages/basicInformation';
 import CarInformation from './formPages/carInformation';
@@ -23,23 +16,12 @@ import ForgetPasswordForm from '../../forgetPasswordMultiStepForm/forgetPassword
 type FormProps = {};
 const Form: React.FC<FormProps> = ({}) => {
     const [screen, setScreen] = useState<number>(0);
-    const FormTitle = [
-        '',
-        '註冊 - 電郵驗證',
-        '註冊 - 基本資料',
-        '註冊 - 車輛資料',
-        '註冊 - 設立銀包'
-    ];
+    const FormTitle = ['', '註冊 - 電郵驗證', '註冊 - 基本資料', '註冊 - 車輛資料', '註冊 - 設立銀包'];
 
     const ScreenDisplay = () => {
         switch (screen) {
             case 0:
-                return (
-                    <LoginPage
-                        goToNextPage={goToNextPage}
-                        goToForgetPassWordPage={goToForgetPassWordPage}
-                    />
-                );
+                return <LoginPage goToNextPage={goToNextPage} goToForgetPassWordPage={goToForgetPassWordPage} />;
             case 1:
                 return <Verification setScreen={setScreen} />;
             case 2:
@@ -47,12 +29,7 @@ const Form: React.FC<FormProps> = ({}) => {
             // case 3:
             //     return <UberDriver goToNextPage={goToNextPage} />;
             case 3:
-                return (
-                    <CarInformation
-                        goToNextPage={goToNextPage}
-                        goToChooseCarPage={goToChooseCarBrandPage}
-                    />
-                );
+                return <CarInformation goToNextPage={goToNextPage} goToChooseCarPage={goToChooseCarBrandPage} />;
             case 4:
                 return <CreateWallet goToNextPage={goToNextPage} />;
             case 5:
@@ -143,32 +120,16 @@ const Form: React.FC<FormProps> = ({}) => {
                 {screen == 0 ||
                     (screen < 5 && (
                         //dismiss keyboard when user click outside of the input field to improve user experience
-                        <TouchableWithoutFeedback
-                            onPress={() => Keyboard.dismiss()}
-                        >
+                        <TouchableWithoutFeedback onPress={() => Keyboard.dismiss()}>
                             <View style={styles.topContainer}>
-                                <Text style={styles.text}>
-                                    {FormTitle[screen]}
-                                </Text>
+                                <Text style={styles.text}>{FormTitle[screen]}</Text>
                                 <View style={styles.breakline} />
-                                <View
-                                    style={
-                                        styles.previouspageAndPaginationWrapper
-                                    }
-                                >
+                                <View style={styles.previouspageAndPaginationWrapper}>
                                     <Pressable onPress={goToPreviousPage}>
-                                        <Text
-                                            style={{ color: '#888888' }}
-                                        >{`<  上一步`}</Text>
+                                        <Text style={{ color: '#888888' }}>{`<  上一步`}</Text>
                                     </Pressable>
-                                    <PaginationIndicator
-                                        totalPages={FormTitle.length}
-                                        currentPage={screen}
-                                    />
-                                    <Pressable
-                                        disabled={true}
-                                        onPress={goToNextPage}
-                                    >
+                                    <PaginationIndicator totalPages={FormTitle.length} currentPage={screen} />
+                                    <Pressable disabled={true} onPress={goToNextPage}>
                                         <Text
                                             style={{
                                                 color: '#888888',

providers/vehicle_store.tsx

@@ -0,0 +1,31 @@
+import { create } from 'zustand';
+
+interface VehicleState {
+    vehicleBrand: string;
+    BrandID: string;
+    vehicleModel: string;
+    ModelID: string;
+    licensePlate: string;
+    setVehicleBrand: (brand: string) => void;
+    setBrandID: (id: string) => void;
+    setVehicleModel: (model: string) => void;
+    setModelID: (id: string) => void;
+    setLicensePlate: (plate: string) => void;
+}
+
+// Create the store
+const useVehicleStore = create<VehicleState>((set) => ({
+    vehicleBrand: '',
+    BrandID: '',
+    vehicleModel: '',
+    ModelID: '',
+    licensePlate: '',
+
+    setVehicleBrand: (brand: string) => set({ vehicleBrand: brand }),
+    setBrandID: (id: string) => set({ BrandID: id }),
+    setVehicleModel: (model: string) => set({ vehicleModel: model }),
+    setModelID: (id: string) => set({ ModelID: id }),
+    setLicensePlate: (plate: string) => set({ licensePlate: plate })
+}));
+
+export default useVehicleStore;

service/chargeStationService.tsx

@@ -20,7 +20,6 @@ class ChargeStationService {
             const response = await axios.get(`${this.apiUrl}/public/client/car/brand`);
 
             if (response.status === 200 || response.status === 201) {
-                // console.log(response.data);
                 return response.data;
             } else {
                 console.log('invalid response');
@@ -375,5 +374,21 @@ class ChargeStationService {
             return null;
         }
     }
+
+    async getProcessedCarImageUrl(filename: string) {
+        try {
+            const response = await axios.get(`http://192.168.1.121:12300/cdn/public/file/crazycharge/${filename}`, {
+                headers: {
+                    Authorization: `Bearer ${await SecureStore.getItemAsync('accessToken')}`
+                }
+            });
+            if (response.status === 200 || response.status === 201) {
+                return response.data.detail;
+            }
+        } catch (error) {
+            console.error('Error fetching image URL:', error);
+            return null;
+        }
+    }
 }
 export const chargeStationService = new ChargeStationService();