ft(history): add messsaging UI

app/(app)/ActionMenu/Booking/_layout.tsx

@@ -1,3 +1,5 @@
+
+import React from "react";
 import Header from "@/components/UI/Header";
 import Modal from "@/components/UI/Modal";
 import { Stack } from "expo-router";

app/(app)/History/CardComponent.tsx

@@ -0,0 +1,67 @@
+import { Colors } from "@/constants/Colors";
+import Typography from "@/constants/Typography";
+import React, { ReactElement } from "react";
+import { Image, Text, TouchableOpacity } from "react-native";
+import { ImageURISource, View } from "react-native";
+
+interface DoctorComponentProps {
+  imageSource: ImageURISource | number;
+  name: string;
+  iconComponent: ReactElement;
+  method: string;
+  day: string;
+  time: string;
+  handle?: () => void;
+}
+function DoctorComponent({
+  imageSource,
+  name,
+  iconComponent,
+  method,
+  day,
+  time,
+  handle
+}: DoctorComponentProps) {
+  return (
+    <TouchableOpacity
+    onPress={handle}
+      style={{
+        borderRadius: 10,
+        borderColor: "white",
+        flexDirection: "row",
+        alignItems: "center",
+        justifyContent: "space-between",    
+        backgroundColor: Colors.others.white,    
+        padding: 20,
+          shadowColor: "#cfcfcf",
+          shadowOffset: { width: -2, height: 4 },
+          shadowOpacity: 3,
+          shadowRadius: 2,
+          elevation: 10,
+      }}
+    >
+      <View
+        style={{
+          flexDirection: "row",
+          alignItems: "center",
+          gap: 30,
+        }}
+      >
+        <View style={{height: 100, width: 100,borderRadius: 10}}>
+          <Image style={{width: "100%", height: "100%",borderRadius: 10}} source={imageSource} />
+        </View>
+        <View style={{ gap: 10, alignItems: "flex-start" }}>
+          <Text style={[Typography.bold.large]}>{name}</Text>
+          <Text>{method}</Text>
+          <Text>
+            {day} | <Text></Text>
+            {time}
+          </Text>
+        </View>
+      </View>
+      <View>{iconComponent}</View>
+    </TouchableOpacity>
+  );
+}
+
+export default DoctorComponent;

app/(app)/History/HistoryMenu.tsx

@@ -0,0 +1,42 @@
+import React from "react"
+import { BlackDeleteIcon } from "@/components/UI/icons/deleteIcon"
+import { BlackDownloadIcon } from "@/components/UI/icons/downloadIcon"
+import { StyleSheet, Text, TouchableOpacity, View } from "react-native"
+import { SvgXml } from "react-native-svg"
+import {Colors} from "@/constants/Colors"
+
+interface MenuComponentProps {
+  closeMenu: () => void;
+  method: string
+}
+
+const HistoryMenu: React.FC<MenuComponentProps> = ({closeMenu, method})=>{
+
+    return(
+      <View style={{
+        gap: 15,
+      }}>
+         <TouchableOpacity style={styles.iconText}
+        onPress={closeMenu}>
+          <SvgXml xml={BlackDownloadIcon} />
+          <Text>Download {method}</Text>
+        </TouchableOpacity>
+        <View style={{borderColor: "rgba(0, 0, 0,0.2 )", borderWidth: 0.3}}></View>
+        <TouchableOpacity style={styles.iconText}
+        onPress={closeMenu}>
+          <SvgXml xml={BlackDeleteIcon}/>
+          <Text style={{color: Colors.others.red}}>Delete {method}</Text>
+        </TouchableOpacity>
+      </View>
+    )
+  }
+
+  const styles = StyleSheet.create({
+    iconText:{
+        flexDirection: "row", 
+        alignItems: "center",
+        gap: 20
+    }
+  })
+
+  export default HistoryMenu