Add Transaction Details screen

app/(tabs)/payments.tsx

@@ -460,6 +460,7 @@ export default function PaymentsTabScreen() {
                   : paymentHistory.slice(0, 3)
                 ).map((payment) => (
                   <PaymentHistoryCard
+                    id={payment.id}
                     key={payment.id}
                     date={formatPaymentDate(payment.payment_date)}
                     amount={formatCurrency(parseFloat(payment.amount))}

app/payments/TransactionDetails.tsx

@@ -17,6 +17,7 @@ import { SafeAreaView } from "react-native-safe-area-context";
 import SuccessIcon from "@/assets/icons/check_circle.svg";
 import FailureIcon from "@/assets/icons/cancel.svg";
 import PendingIcon from "@/assets/icons/pending.svg";
+import Header from "@/components/common/Header";
 
 interface TransactionDetailData {
   id: number;
@@ -56,28 +57,6 @@ export default function TransactionDetailScreen() {
     useState<TransactionDetailData | null>(null);
   const [isLoading, setIsLoading] = useState(true);
 
-  useLayoutEffect(() => {
-    navigation.setOptions({
-      headerStyle: {
-        backgroundColor: "#F3F5F8",
-      },
-      headerTitle: "Transaction Detail",
-      headerTitleStyle: {
-        fontSize: 18,
-        fontWeight: "600",
-        color: "#111827",
-      },
-      headerLeft: () => (
-        <TouchableOpacity
-          onPress={() => router.back()}
-          style={styles.backButton}
-        >
-          <Text style={styles.backText}>‹</Text>
-        </TouchableOpacity>
-      ),
-    });
-  }, [navigation, router]);
-
   useEffect(() => {
     fetchTransactionDetail();
   }, [paymentId]);
@@ -86,7 +65,7 @@ export default function TransactionDetailScreen() {
     try {
       setIsLoading(true);
       const response = await api.get(
-        `${BASE_URL}/api/v1/payment-history?id=${paymentId}`
+        `${BASE_URL}/api/v1/payment-history?page_number=1&page_size=10&id=${paymentId}`
       );
       const result: TransactionResponse = response.data;
 
@@ -140,12 +119,9 @@ export default function TransactionDetailScreen() {
 
   const getStatusText = (status: string) => {
     switch (status.toLowerCase()) {
-      case "success":
-      case "completed":
       case "confirmed":
         return "Payment successful";
       case "failure":
-      case "failed":
         return "Payment failed";
       case "pending":
         return "Payment pending";
@@ -154,50 +130,35 @@ export default function TransactionDetailScreen() {
     }
   };
 
-  if (isLoading) {
   return (
-      <SafeAreaView style={styles.container}>
+    <>
+      <Header title="Transaction Details" showBackButton={true} />
+      {isLoading ? (
         <View style={styles.loadingContainer}>
           <ActivityIndicator size="large" color="#00BE88" />
         </View>
-      </SafeAreaView>
-    );
-  }
-
-  if (!transactionData) {
-    return (
-      <SafeAreaView style={styles.container}>
+      ) : !transactionData ? (
         <View style={styles.errorContainer}>
           <Text style={styles.errorText}>Transaction not found</Text>
         </View>
-      </SafeAreaView>
-    );
-  }
-
-  return (
-    <SafeAreaView style={styles.container}>
+      ) : (
+        <View style={styles.container}>
           <View style={styles.content}>
-        {/* Status Icon */}
             <View style={styles.iconContainer}>
               {getStatusIcon(transactionData.status)}
             </View>
-
-        {/* Amount */}
             <Text style={styles.amount}>
               {formatCurrency(transactionData.amount)}
             </Text>
 
-        {/* Status Text */}
             <Text style={styles.statusText}>
               {getStatusText(transactionData.status)}
             </Text>
-
-        {/* Date Time */}
             <Text style={styles.dateTime}>
               {formatDateTime(transactionData.transaction_date)}
             </Text>
 
-        {/* Transaction Details Card */}
+            <View style={styles.divider} />
             <View style={styles.detailsCard}>
               <Text style={styles.detailsTitle}>Transaction Details</Text>
 
@@ -233,7 +194,9 @@ export default function TransactionDetailScreen() {
               />
             </View>
           </View>
-    </SafeAreaView>
+        </View>
+      )}
+    </>
   );
 }
 
@@ -253,9 +216,15 @@ const DetailRow = ({
 );
 
 const styles = StyleSheet.create({
+  divider: {
+    height: 1,
+    width: "100%",
+    backgroundColor: "#E5E9F0",
+  },
   container: {
     flex: 1,
     backgroundColor: "#F3F5F8",
+    paddingHorizontal: 16,
   },
   loadingContainer: {
     flex: 1,
@@ -272,9 +241,9 @@ const styles = StyleSheet.create({
     color: "#6B7280",
   },
   content: {
-    flex: 1,
     padding: 16,
     alignItems: "center",
+    backgroundColor: "#FCFCFC",
   },
   backButton: {
     paddingLeft: 16,
@@ -351,7 +320,6 @@ const styles = StyleSheet.create({
     justifyContent: "space-between",
     alignItems: "flex-start",
     paddingVertical: 8,
-    borderBottomWidth: 1,
     borderBottomColor: "#E5E9F0",
   },
   detailRowLast: {
@@ -367,6 +335,6 @@ const styles = StyleSheet.create({
     fontWeight: "600",
     color: "#252A34",
     flex: 1,
-    textAlign: "right",
+    textAlign: "left",
   },
 });

components/Payments/PaymentHistoryCard.tsx

@@ -1,4 +1,5 @@
-import { Text, View } from "react-native";
+import { useRouter } from "expo-router";
+import { Text, TouchableOpacity, View } from "react-native";
 
 interface PaymentHistoryCardProps {
   date: string;
@@ -6,9 +7,11 @@ interface PaymentHistoryCardProps {
   time: string;
   method: string;
   status: string;
+  id: number;
 }
 
 export default ({
+  id,
   date,
   amount,
   time,
@@ -16,6 +19,16 @@ export default ({
   status,
 }: PaymentHistoryCardProps) => {
   //failure, confirmed, pending
+
+  const router = useRouter();
+
+  const handlePress = () => {
+    router.push({
+      pathname: "/payments/TransactionDetails",
+      params: { paymentId: id },
+    });
+  };
+
   console.log(status, "payment Status");
   const getStatusStyle = (status: string) => {
     switch (status.toLowerCase()) {
@@ -45,7 +58,8 @@ export default ({
   const statusStyle = getStatusStyle(status);
 
   return (
-    <View style={styles.paymentCard}>
+    // <TouchableOpacity style={styles.paymentCard} onPress={handlePress}>
+    <TouchableOpacity style={styles.paymentCard} onPress={handlePress}>
       <View style={styles.paymentCardTop}>
         <Text style={styles.paymentDate}>{date}</Text>
         <Text style={styles.paymentAmount}>{amount}</Text>
@@ -67,7 +81,8 @@ export default ({
           </View>
         )}
       </View>
-    </View>
+    </TouchableOpacity>
+    // </TouchableOpacity>
   );
 };
 
@@ -83,6 +98,15 @@ const styles = StyleSheet.create({
     paddingHorizontal: 12,
     flexDirection: "column",
     gap: "12",
+
+    shadowColor: "#000",
+    shadowOffset: {
+      width: 0,
+      height: 1,
+    },
+    shadowOpacity: 0.05,
+    shadowRadius: 2,
+    elevation: 1,
   },
   paymentCardTop: {
     height: 20,