crazycharge-app/app/(auth)/(tabs)/(home)/chargingDetailPage.tsx

// app/(auth)/(tabs)/(home)/chargingDetailPage.tsx
import {
    View,
    Text,
    Pressable,
    Image,
    ScrollView,
    Alert,
    ImageBackground,
    ActivityIndicator,
    Dimensions
} from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import { router, useLocalSearchParams } from 'expo-router';
import { CrossLogoSvg, PreviousPageBlackSvg } from '../../../../component/global/SVG';
import { useEffect, useState } from 'react';

import DisplayedOnlyCouponTabView from '../../../../component/global/displayedOnlyCouponTabView';
import NotificationTabView from '../../../../component/global/notificationTabViewComponent';
import { chargeStationService } from '../../../../service/chargeStationService';
import { formatToChineseDateTime } from '../../../../util/lib';
import { useTranslation } from '../../../../util/hooks/useTranslation';

const ChargingDetailPage = () => {
    const { t } = useTranslation();
    const screenHeight = Dimensions.get('window').height;
    const { promotion } = useLocalSearchParams();
    const promotionObj = JSON.parse(promotion as string);
    const [loading, setLoading] = useState(false);

    return (
        <SafeAreaView className="flex-1 bg-white" edges={['top', 'right', 'left']}>
            <ScrollView>
                {loading ? (
                    <View className="items-center justify-center">
                        <ActivityIndicator />
                    </View>
                ) : (
                    <View style={{ minHeight: screenHeight, flex: 1 }} className="mx-[5%]">
                        <View style={{ marginTop: 25 }}>
                            <Pressable
                                onPress={() => {
                                    if (router.canGoBack()) {
                                        router.back();
                                    } else {
                                        router.replace('/notificationPage');
                                    }
                                }}
                                hitSlop={{ top: 20, bottom: 20, left: 20, right: 20 }}
                            >
                                <CrossLogoSvg />
                            </Pressable>
                            <Text style={{ fontSize: 45, marginVertical: 25 }}>{t('notifications.charging_detail.title')}</Text>
                        </View>
                        <View className="space-y-2 ">
                            <Text className="text-base lg:text-lg">{t('notifications.charging_detail.charging_completed')}</Text>
                            <Text className="text-sm">{t('notifications.charging_detail.charging_completed_message')}</Text>
                            <Text className="text-xs text-gray-500 pt-8 pb-4">
                                {t('notifications.charging_detail.last_updated')}: {formatToChineseDateTime(promotionObj.updatedAt)}
                            </Text>
                        </View>
                    </View>
                )}
            </ScrollView>
        </SafeAreaView>
    );
};

export default ChargingDetailPage;