130 lines
3.6 KiB
TypeScript
130 lines
3.6 KiB
TypeScript
import { Pressable, StyleSheet } from "react-native";
|
|
import { useTranslation } from "react-i18next";
|
|
import SemiCircleProgress from "../../components/home/SemiCircleProgress";
|
|
import { Text, View } from "@/components/Themed";
|
|
import { useNavigation } from "expo-router";
|
|
import { useLayoutEffect, useState } from "react";
|
|
import { StatusBar } from "expo-status-bar";
|
|
import Profile from "../../components/home/Profile";
|
|
import CustomerCareIcon from "../../assets/icons/customer-care.svg";
|
|
import ServiceReminderCard from "@/components/home/ServiceReminderCard";
|
|
import MetricCard from "@/components/home/MetricCard";
|
|
import PaymentDueCard from "@/components/home/PaymentDueCard";
|
|
import LocationMap from "@/components/home/LocationMap";
|
|
import BatteryWarrantyCard from "@/components/home/BatteryWarrantyCars";
|
|
import CustomerSupportModal from "@/components/home/CustomerSupportModal";
|
|
|
|
export default function HomeScreen() {
|
|
const { t } = useTranslation();
|
|
const navigation = useNavigation();
|
|
const [isSupportModalVisible, setIsSupportModalVisible] = useState(false);
|
|
|
|
useLayoutEffect(() => {
|
|
navigation.setOptions({
|
|
headerTitle: () => (
|
|
<View style={styles.headerTitleContainer}>
|
|
<Text style={styles.title}>Yatri - NBX 600</Text>
|
|
<Text style={styles.subtitle}>DL253C3602</Text>
|
|
</View>
|
|
),
|
|
headerRight: () => (
|
|
<View style={styles.rightContainer}>
|
|
<Pressable
|
|
style={styles.iconContainer}
|
|
onPress={() => setIsSupportModalVisible(true)}
|
|
>
|
|
<CustomerCareIcon />
|
|
</Pressable>
|
|
<Profile username="Vishal" textSize={16} boxSize={32} />
|
|
</View>
|
|
),
|
|
});
|
|
}, [navigation]);
|
|
|
|
return (
|
|
<>
|
|
<StatusBar style="dark" />
|
|
<View style={styles.container}>
|
|
<ServiceReminderCard
|
|
type="info"
|
|
message="Service will be due in 3 days"
|
|
subMessage="Service Reminder"
|
|
/>
|
|
<View style={styles.iconContainer}>
|
|
<SemiCircleProgress progress={90} status={1} />
|
|
</View>
|
|
<View style={styles.metrics}>
|
|
<MetricCard heading="SoH" value="90%" />
|
|
<MetricCard heading="Total Distance" value="20009 km" />
|
|
</View>
|
|
<PaymentDueCard
|
|
label="Payment Due"
|
|
amount="$2,000"
|
|
onPress={() => {}}
|
|
/>
|
|
{/* <LocationMap latitude={12.9716} longitude={77.5946} /> */}
|
|
<BatteryWarrantyCard
|
|
totalWarrantyYears={8}
|
|
batteryPurchaseEpoch={Math.floor(
|
|
new Date("2023-06-30").getTime() / 1000
|
|
)}
|
|
/>
|
|
</View>
|
|
<CustomerSupportModal
|
|
visible={isSupportModalVisible}
|
|
onClose={() => setIsSupportModalVisible(false)}
|
|
/>
|
|
</>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
metrics: {
|
|
flexDirection: "row",
|
|
justifyContent: "space-between",
|
|
backgroundColor: "#F3F5F8",
|
|
},
|
|
container: {
|
|
flex: 1,
|
|
backgroundColor: "#F3F5F8",
|
|
padding: 16,
|
|
gap: 16,
|
|
},
|
|
iconContainer: {
|
|
backgroundColor: "#fff",
|
|
},
|
|
headerTitleContainer: {
|
|
flexDirection: "column",
|
|
backgroundColor: "#fff",
|
|
},
|
|
title: {
|
|
fontSize: 14,
|
|
color: "#6B7280",
|
|
fontWeight: "500",
|
|
},
|
|
subtitle: {
|
|
fontSize: 18,
|
|
color: "#111827",
|
|
fontWeight: "700",
|
|
},
|
|
rightContainer: {
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
paddingRight: 16,
|
|
gap: 8,
|
|
backgroundColor: "#fff",
|
|
},
|
|
badge: {
|
|
backgroundColor: "#FEE2E2",
|
|
borderRadius: 20,
|
|
width: 30,
|
|
height: 30,
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
},
|
|
badgeText: {
|
|
color: "#DC2626",
|
|
fontWeight: "700",
|
|
},
|
|
});
|