Feature: History chats calls implementation

app/(tabs)/articles.tsx

@@ -6,18 +6,7 @@ const Articles = () => {
   return (
  <>
  <Article/>
- </>
-
-
-
-
-    // <Article/>
-    // <SeeAllArticles/>
-    // <ArticlesDetails/>
-    // <BookMarkedArticle/>
-
-
-
+ </>  
   );
 };
 

app/(tabs)/profile.tsx

@@ -90,7 +90,7 @@ const Profile = () => {
         nextTo: "notification",
         leftIcon: icons.notification,
       },
-      { text: t("profile.payment"), nextTo: "payment", leftIcon: icons.wallet },
+      // { text: t("profile.payment"), nextTo: "payment", leftIcon: icons.wallet },
       {
         text: t("profile.security"),
         nextTo: "security",
@@ -101,12 +101,12 @@ const Profile = () => {
         nextTo: "language",
         leftIcon: icons.language,
       },
-      {
-        text: t("profile.dark_mode"),
-        nextTo: "mode",
-        leftIcon: icons.eye,
-        mode: true,
-      },
+      // {
+      //   text: t("profile.dark_mode"),
+      //   nextTo: "mode",
+      //   leftIcon: icons.eye,
+      //   mode: true,
+      // },
       {
         text: t("profile.help_center"),
         nextTo: "help",
@@ -192,9 +192,9 @@ const Profile = () => {
             {t("profile.title")}
           </Text>
         </View>
-        <Touchable>
+        {/* <Touchable>
           <SvgXml xml={moreOutlinedIcon} className="self-end" />
-        </Touchable>
+        </Touchable> */}
       </View>
       <ScrollView
         className="flex-1 p-6"

app/Appointments/voice-call/writeReview.tsx

@@ -264,4 +264,10 @@ const styles = StyleSheet.create({
     width: '100%',
     minHeight: 100,
   },
+  doctorImage: {
+    width: 120,  
+    height: 120, 
+    borderRadius: 60, 
+    marginBottom: 10,
+  },
 });

app/Doctors/searchDoctor.tsx

@@ -8,44 +8,22 @@ import { View, Image,  Animated,
   Easing
 } from "react-native";
 import { SearchInput } from "../../components/searchinput2";
+import { UIActivityIndicator } from "react-native-indicators";
 
 export default function searchDoctor() {
 
   const [selectedCategory, setSelectedCategory] = useState("all");
   const [searchQuery, setSearchQuery] = useState("");
   const [selectedRating, setSelectedRating] = useState(0); 
-  const rotateValue = new Animated.Value(0);
-  const rotate = rotateValue.interpolate({
-    inputRange: [0, 1],
-    outputRange: ["0deg", "360deg"],
-  });
+  const [loading, setLoading]=useState(true);
 
-  const spin = () => {
-    rotateValue.setValue(0);
-    Animated.timing(rotateValue, {
-      toValue: 1,
-      duration: 2500,
-      easing: Easing.linear,
-      useNativeDriver: true,
-    }).start(() => {
-      setTimeout(() => {
-      }, 2000);
-    });
-  };
-  useEffect(() => {
-
-    spin();
-
-  }
-  )
+
 
   return (
     <View className="flex-1 bg-white px-4 py-5">
       <View className="flex-1 justify-center items-center">
         <View>
-          <Animated.View style={{ transform: [{ rotate }] }}>
-            <Image source={require("../../assets/doctors/loading.png")} />
-          </Animated.View>
+      <UIActivityIndicator color={"#246BFD"} size={32} />
         </View>
       </View>
     </View>

app/articles/ArticlesDetails.tsx

@@ -10,7 +10,7 @@ import {
   Share,
 } from "react-native";
 import { supabase } from "../supabase";
-
+import { UIActivityIndicator } from "react-native-indicators";
 interface Article {
   id: string;
   title: string;
@@ -209,11 +209,7 @@ export default function ArticlesDetails() {
   if (loading) {
     return (
       <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
-        <Text
-          style={{ fontSize: 20, fontFamily: "UrbanistBold", color: "#212121" }}
-        >
-          Loading...
-        </Text>
+           <UIActivityIndicator color={"#246BFD"} size={32} />
       </View>
     );
   }

app/articles/ArticlesPage.tsx

@@ -12,7 +12,7 @@ import { router, useLocalSearchParams, useNavigation } from "expo-router";
 import FieldComponent from "@/components/FieldComponent";
 import ArticleCard from "@/components/cards/ArticleCard";
 import { supabase } from "../supabase";
-
+import { UIActivityIndicator } from "react-native-indicators";
 interface Article {
   id: number;
   title: string;
@@ -76,7 +76,7 @@ export default function Article() {
   if (loading) {
     return (
       <View style={styles.loadingContainer}>
-        <Text style={styles.loadingText}>Loading...</Text>
+      <UIActivityIndicator color={"#246BFD"} size={32} />
       </View>
     );
   }

app/articles/BookMarkedArticle.tsx

@@ -10,7 +10,7 @@ import {
   ScrollView,
   TouchableOpacity,
 } from "react-native";
-
+import { UIActivityIndicator } from "react-native-indicators";
 interface Article {
   id: number;
   title: string;
@@ -133,7 +133,7 @@ export default function BookMarkedArticle() {
 
       <ScrollView showsVerticalScrollIndicator={false}>
         {loading ? (
-          <Text>Loading...</Text>
+    <UIActivityIndicator color={"#246BFD"} size={32} />
         ) : (
           bookmarkedArticles.map((article, index) => (
             <ArticleCard key={index} article={article} />

app/articles/SeeAllArticles.tsx

@@ -4,7 +4,6 @@ import { router, useNavigation } from "expo-router";
 import FieldComponent from "@/components/FieldComponent";
 import ArticleCard from "@/components/cards/ArticleCard";
 import { supabase } from "../supabase";
-
 interface Article {
   id: number;
   title: string;

app/chat-history/VideoCall.tsx

@@ -1,70 +1,51 @@
-import React from "react";
-import { View, ScrollView } from "react-native";
-import DoctorVideo from "@/components/cards/DoctorVideo";
-import { useRouter } from "expo-router";
-import { DoctorCard } from "./types"; // Import the types
+// import React, {useState, useEffect} from "react";
+// import { View, ScrollView } from "react-native";
+// import DoctorVideo from "@/components/cards/DoctorVideo";
+// import { useRouter } from "expo-router";
+// import { DoctorCard } from "./types"; 
+// import { supabase } from "../supabase";
+// const VideoCall = () => {
+//   const router = useRouter();
+//   const [appointment, setAppointment]=useState<any[]>([]);
 
-const VideoCall = () => {
-  const router = useRouter();
+//   useEffect(()=>{
+//     const fetchAppointments=async()=>{
+//     const {data, error}=await supabase.auth.getUser();
+//     if(error) throw error;
+//     const userId=data?.user?.id;
+//     const {data:AppointmentData, error:Error}=await supabase.from("appointment").select("*, doctor(name,image)").eq("patient_id", userId).eq("package","Video Call")
+//     if(Error) throw Error
+//     if(AppointmentData){
+//     setAppointment(AppointmentData);
+//     }
+//     }
+//     fetchAppointments();
+//       },[])
+
+//   const handlePress = (appointmentId:any) => {
+//     router.push({
+//       pathname: "/chat-history/VideoRecord",
+//       params: {appointmentId},
+//     });
+//   };
+//   return (
+//     <View style={{ backgroundColor: "white" }}>
+//       <ScrollView style={{ backgroundColor: "#FAFAFA", paddingBottom: 6 }}>
+//         {appointment.map((appointments, index) => (
+//           <DoctorVideo
+//             key={index}
+//             onPress={() => handlePress(appointments.id)}
+//             doctorName={appointments.doctor.name}
+//             doctorImage={appointments.doctor.image}
+//             callType={appointments.package}
+//             callDay={appointments.appointment_date}
+//             callTime={appointments.appointment_time.slice(0,5)}
+//             isVideoCallScreen={false}
+//           />
+//         ))}
+//       </ScrollView>
+//     </View>
+//   );
+// };
 
-  const docCards: DoctorCard[] = [
-    {
-      name: "Dr. Randy Wigham",
-      callDay: "Wednesday",
-      callTime: "1:00 PM",
-      images: require("../../assets/doctors/doc2.png"),
-    },
-    {
-      name: "Dr. Jenny Watson",
-      callDay: "Wednesday",
-      callTime: "1:00 PM",
-      images: require("../../assets/doctors/doc3.png"),
-    },
-    {
-      name: "Dr. Raul Zirkind",
-      callDay: "Wednesday",
-      callTime: "1:00 PM",
-      images: require("../../assets/doctors/doc1.png"),
-    },
-    {
-      name: "Dr. Elijah Baranick",
-      callDay: "Wednesday",
-      callTime: "1:00 PM",
-      images: require("../../assets/doctors/doc2.png"),
-    },
-    {
-      name: "Dr. Stephen Shute",
-      callDay: "Wednesday",
-      callTime: "1:00 PM",
-      images: require("../../assets/doctors/doc5.png"),
-    },
-  ];
-
-  const handlePress = (doctor: DoctorCard) => {
-    router.push({
-      pathname: "/chat-history/VideoRecord",
-      params: { doctor: JSON.stringify(doctor) },
-    });
-  };
-
-  return (
-    <View style={{ backgroundColor: "white" }}>
-      <ScrollView style={{ backgroundColor: "#FAFAFA", paddingBottom: 6 }}>
-        {docCards.map((doctor, index) => (
-          <DoctorVideo
-            key={index}
-            onPress={() => handlePress(doctor)}
-            doctorName={doctor.name}
-            doctorImage={doctor.images}
-            callType="Video Call"
-            callDay={doctor.callDay}
-            callTime={doctor.callTime}
-            isVideoCallScreen={false}
-          />
-        ))}
-      </ScrollView>
-    </View>
-  );
-};
-
-export default VideoCall;
+// export default VideoCall;

app/chat-history/VideoRecord.tsx

@@ -14,20 +14,22 @@ import PlayButton from "@/components/cards/PlayButton";
 import { useRouter, useLocalSearchParams } from "expo-router";
 import { SvgXml } from "react-native-svg";
 import AsyncStorage from "@react-native-async-storage/async-storage";
-
-import { DoctorCard } from "./types";
 import { moreTransparent } from "@/assets/icons/more";
 import { back } from "@/assets/icons/userprofile/icons";
+import { supabase } from "../supabase";
 
 const VideoRecord: React.FC = () => {
   const router = useRouter();
-  const { doctor: doctorString } = useLocalSearchParams();
-  const doctor: DoctorCard = doctorString
-    ? JSON.parse(doctorString as string)
-    : null;
-
+
+
+const {appointmentId}=useLocalSearchParams();
   const [modalVisible, setModalVisible] = useState(false);
   const [videoDuration, setVideoDuration] = useState<number>(0);
+  const[ name, setName]=useState("");
+  const[date, setDate]=useState("");
+  const[time, setTime]=useState("");
+  const[packageType, setPackage]=useState("");
+  const[image, setImage]=useState("");
 
   useEffect(() => {
     const fetchDuration = async () => {
@@ -40,9 +42,7 @@ const VideoRecord: React.FC = () => {
     fetchDuration();
   }, []);
 
-  if (!doctor) {
-    return null;
-  }
+
 
   const handlePress = () => {
     router.push("/chat-history/PlayRecord");
@@ -64,7 +64,7 @@ const VideoRecord: React.FC = () => {
     setModalVisible(false);
   };
 
-  const { name, images, callDay, callTime } = doctor;
+
 
   const formatTime = (timeInSeconds: number) => {
     const hours = Math.floor(timeInSeconds / 3600);
@@ -79,6 +79,21 @@ const VideoRecord: React.FC = () => {
       return `${minutes}:${String(seconds).padStart(2, "0")} minutes`;
     }
   };
+  useEffect(()=>{
+    const fetchAppointments=async()=>{
+    const {data:AppointmentData, error:Error}=await supabase.from("appointment").select("*, doctor(name,image)").eq("id",appointmentId).single();
+    if(Error) throw Error
+    if(AppointmentData){
+   setName(AppointmentData.doctor.name);
+   setPackage(AppointmentData.package);
+   setImage(AppointmentData.doctor.image);
+   setTime(AppointmentData.appointment_time);
+   setDate(AppointmentData.appointment_date);
+
+    }
+    }
+    fetchAppointments();
+      },[appointmentId])
 
   return (
     <SafeAreaView style={areaView}>
@@ -89,12 +104,12 @@ const VideoRecord: React.FC = () => {
             <SvgXml xml={moreTransparent} onPress={handleMorePress} />
           </View>
           <View style={{ rowGap: 28, backgroundColor: "#FAFAFA" }}>
-            <DoctorVideo
+          <DoctorVideo
               doctorName={name}
-              doctorImage={images}
-              callType="Video Call"
-              callDay={callDay}
-              callTime={callTime}
+              doctorImage={image}
+              callType={packageType}
+              callDay={date}
+              callTime={time.slice(0, 5)}
               isVideoCallScreen={true}
             />
             <View