diff --git a/app/(app)/Appointments/_layout.tsx b/app/(app)/Appointments/_layout.tsx index 7f22be81..ad433d35 100644 --- a/app/(app)/Appointments/_layout.tsx +++ b/app/(app)/Appointments/_layout.tsx @@ -3,6 +3,7 @@ import { Stack } from "expo-router"; export default function Layout() { return ( + diff --git a/app/(app)/Appointments/index.tsx b/app/(app)/Appointments/index.tsx index 38c35f2e..472becb9 100644 --- a/app/(app)/Appointments/index.tsx +++ b/app/(app)/Appointments/index.tsx @@ -1,8 +1,652 @@ -import React from "react"; -import { Text, View } from "react-native"; +import React, { useState, useEffect } from "react"; +import { useNavigation } from "@react-navigation/native"; +import { + View, + Text, + StyleSheet, + TouchableOpacity, + Image, + Dimensions, + ImageBackground, + ScrollView, +} from "react-native"; +import { SvgXml } from "react-native-svg"; +import { SearchIcon } from "@/assets/icons/SearchSvg"; +import { MoreIcon } from "@/assets/icons/MoreCircleSvg"; +import Line from "@/components/Line"; +import Typography from "@/constants/Typography"; +import { StatusBar } from "expo-status-bar"; -const Index = () => { - return index; -}; +export default function UpcomingAppointment() { + const [activeTab, setActiveTab] = useState("Upcoming"); + const [headerWidth, setHeaderWidth] = useState(0); + const [activeIcon, setActiveIcon] = useState("Appointment"); + const [text, setText] = useState(""); + const navigation = useNavigation(); -export default Index; + useEffect(() => { + const updateHeaderWidth = () => { + const screenWidth = Dimensions.get("window").width; + const headerPadding = 20 * 2; + const headerAvailableWidth = screenWidth - headerPadding; + setHeaderWidth(headerAvailableWidth); + }; + + updateHeaderWidth(); + }, []); + + const handleTabPress = (screen: "Upcoming" | "Completed" | "Cancelled") => { + setActiveTab(screen); + + if (screen === "Upcoming") { + navigation.navigate("Appointments/ScheduledAppointments/AppointmentUpcoming" as never); + } else if (screen === "Completed") { + navigation.navigate("Appointments/ScheduledAppointments/AppointmentCompleted" as never); + } else if (screen === "Cancelled") { + navigation.navigate("Appointments/ScheduledAppointments/AppointmentCancelledScreen" as never); + } + }; + + const activeTabLinePosition = { + width: headerWidth / 3, + left: + activeTab === "Upcoming" + ? 0 + : activeTab === "Completed" + ? headerWidth / 3 + : (headerWidth * 2) / 3, + }; + + const renderTab = ( + screen: "Upcoming" | "Completed" | "Cancelled", + label: string + ) => { + const isActive = activeTab === screen; + return ( + handleTabPress(screen)} + > + + {label} + + + ); + }; + + return ( + + + + + + My Appointment + + + + + + + + + handleTabPress("Upcoming")}> + {renderTab("Upcoming", "Upcoming")} + + handleTabPress("Completed")}> + {renderTab("Completed", "Completed")} + + handleTabPress("Cancelled")}> + {renderTab("Cancelled", "Cancelled")} + + + + + + + + {/* 1st Card*/} + + + + + + Dr. Drake Boeson + + + Messaging - + + + Upcoming + + + + + Today | 16:00 PM + + + + + + + Cancel Appointment + + + + + Reschedule + + + + + + {/* 2nd Card*/} + + + + + + Dr. Jenny Watson + + + Voice call - + + + Upcoming + + + + + Today | 14:00 PM + + + + + + + Cancel Appointment + + + + + Reschedule + + + + + + {/* 3rd Card*/} + + + + + + Dr. Maria Foose + + + Messaging - + + + Upcoming + + + + + Today | 10:00 AM + + + + + + + Cancel Appointment + + + + + Reschedule + + + + + + {/* 4th Card*/} + + + + + + Dr. Drake Boeson + + + Messaging - + + + Upcoming + + + + + Today | 16:00 PM + + + + + + + Cancel Appointment + + + + + Reschedule + + + + + + + + ); +} + +const styles = StyleSheet.create({ + container: { + backgroundColor: "#F7F7F7", + padding: 0, + height: "100%", + }, + header: { + padding: 20, + }, + + heading: { + backgroundColor: "transparent", + flexDirection: "row", + width: "100%", + marginBottom: "0%", + marginTop: "5%", + padding: 10, + }, + + headerLogo: { + backgroundColor: "transparent", + }, + headerTitle: { + fontSize: 22, + marginLeft: "3%", + }, + SearchIcon: { + marginLeft: 75, + }, + MoreIcon: { + marginLeft: 25, + }, + + headerNav: { + flexDirection: "row", + justifyContent: "space-around", + alignItems: "center", + borderBottomWidth: 2, + borderBottomColor: "#D3D3D3", + paddingBottom: 10, + position: "relative", + }, + tab: { + paddingVertical: 8, + }, + tabText: { + fontSize: 16, + marginTop: "4%", + color: "#9E9E9E", + }, + activeTab: { + // Define styles for active tab if needed + }, + activeTabText: { + color: "#246BFD", + fontWeight: "bold", + }, + activeTabLine: { + position: "absolute", + bottom: 0, + height: 3, + backgroundColor: "#246BFD", + zIndex: 1, + }, + + Body: { + height: "100%", + width: "100%", + backgroundColor: "#F5F5F5", + }, + + Footer: { + backgroundColor: "#FFFFFF", + height: 90, + width: "100%", + marginTop: "0%", + marginLeft: "0%", + alignItems: "flex-start", + justifyContent: "space-around", + marginBottom: "0%", + flexDirection: "row", + gap: 45, + //position:'absolute' + position: "absolute", + bottom: 0, + left: 0, + right: 0, + padding: 20, + borderTopLeftRadius: 20, + borderTopRightRadius: 20, + }, + icon: { + marginLeft: "0%", + }, + iconText: { + color: "#000000", + fontSize: 12, + marginLeft: "0%", + }, + activeIcon: { + color: "#246BFD", // Example: change color for active icon + }, + activeText: { + color: "#246BFD", // Example: change color for active text + fontWeight: "bold", // Example: apply font weight for active text + }, + iconsBox: { + backgroundColor: "transparent", + justifyContent: "center", + alignItems: "center", + }, + + cardContainer: { + backgroundColor: "#F5F5F5", + width: "100%", + height: "100%", + padding: 5, + }, + card: { + width: "95%", + height: 210, + marginTop: 20, + marginLeft: "2%", + borderRadius: 20, + backgroundColor: "#FFFFFF", + padding: 15, + flexDirection: "column", + }, + cardImage: { + height: 110, + width: "30%", + borderRadius: 20, + //backgroundColor:'black' + }, + + upperSection: { + flexDirection: "row", + }, + + CardButtons: { + flexDirection: "row", + gap: 20, + marginLeft: "1%", + marginTop: "4%", + }, + + DocName: { + color: "#000000", + marginLeft: "3%", + marginRight: "18%", + marginTop: "1%", + fontSize: 20, + padding: 0, + }, + DocDescription: { + flexDirection: "column", + backgroundColor: "transparent", + }, + DocHeart: { + marginTop: "3%", + }, + CardHeader: { + flexDirection: "row", + backgroundColor: "transparent", + }, + Date: { + backgroundColor: "transparent", + color: "#424242", + fontSize: 12, + marginLeft: "5%", + marginTop: "0%", + }, + DocStatus: { + backgroundColor: "transparent", + flexDirection: "row", + marginLeft: "5%", + marginTop: "0%", + justifyContent: "center", + alignItems: "center", + }, +}); diff --git a/app/(app)/index.tsx b/app/(app)/index.tsx index 93120d8e..75ba4877 100644 --- a/app/(app)/index.tsx +++ b/app/(app)/index.tsx @@ -7,7 +7,7 @@ import { router } from "expo-router"; export default function Index() { useEffect(() => { setTimeout(() => { - router.push("onBoarding/FirstScreen"); + router.push("Appointments"); }, 3000); }, []); diff --git a/assets/icons/MoreCircleSvg.ts b/assets/icons/MoreCircleSvg.ts new file mode 100644 index 00000000..aadc124c --- /dev/null +++ b/assets/icons/MoreCircleSvg.ts @@ -0,0 +1,12 @@ +export const MoreIcon =` + + + + + + + + + + +` \ No newline at end of file diff --git a/assets/icons/SearchSvg.ts b/assets/icons/SearchSvg.ts new file mode 100644 index 00000000..30aae051 --- /dev/null +++ b/assets/icons/SearchSvg.ts @@ -0,0 +1,24 @@ +export const SearchIcon = ` + + + + + + + + + + + + + + + + + + + + + + +` \ No newline at end of file diff --git a/assets/images/DefaultLogo.png b/assets/images/DefaultLogo.png new file mode 100644 index 00000000..d96df922 Binary files /dev/null and b/assets/images/DefaultLogo.png differ diff --git a/assets/images/Dr jenny.png b/assets/images/Dr jenny.png new file mode 100644 index 00000000..8c0961f0 Binary files /dev/null and b/assets/images/Dr jenny.png differ diff --git a/assets/images/Dr maria.png b/assets/images/Dr maria.png new file mode 100644 index 00000000..234d458d Binary files /dev/null and b/assets/images/Dr maria.png differ diff --git a/assets/images/Messaging.png b/assets/images/Messaging.png new file mode 100644 index 00000000..eab3d8e0 Binary files /dev/null and b/assets/images/Messaging.png differ