TIF_NGANJUK_E41212433/screens/AksesAdmin/TukarKoin.js

import React, { useState, useEffect } from "react";
import {
  View,
  Text,
  TouchableOpacity,
  StyleSheet,
  Image,
  ScrollView,
} from "react-native";
import { Ionicons } from "@expo/vector-icons";
import { useNavigation } from "@react-navigation/native";
import BottomTabAdmin from "../../Navigation/BottomTabAdmin";

const TukarKoin = () => {
  const navigation = useNavigation();
  const [selectedButton, setSelectedButton] = useState("diproses");
  const [selectedStatus, setSelectedStatus] = useState("diproses");

  const items = [
    {
      id: 1,
      name: "Tas Kertas",
      time: "10 April 2025 - 14:30",
      status: "diproses",
      imageUri: require("../../assets/images/tas2.png"),
      user: {
        profileImage: require("../../assets/images/fotoprofil.jpeg"),
        fullName: "Budi Santoso",
        address: "Jl. Merdeka No.10, Jakarta",
        email: "budi@example.com",
      },
    },
    {
      id: 2,
      name: "Botol",
      time: "11 April 2025 - 15:00",
      status: "dikirim",
      imageUri: require("../../assets/images/botol1.png"),
      user: {
        profileImage: require("../../assets/images/fotoprofil.jpeg"),
        fullName: "Siti Rahma",
        address: "Jl. Sudirman No.5, Bandung",
        email: "siti@example.com",
      },
    },
    {
      id: 3,
      name: "Botol Anak",
      time: "12 April 2025 - 16:30",
      status: "diterima",
      imageUri: require("../../assets/images/botol2.png"),
      user: {
        profileImage: require("../../assets/images/fotoprofil.jpeg"),
        fullName: "Ahmad Rizki",
        address: "Jl. Raya No.7, Surabaya",
        email: "ahmad@example.com",
      },
    },
  ];

  useEffect(() => {
    setSelectedButton("diproses");
    setSelectedStatus("diproses");
  }, []);

  const handleButtonClick = (status) => {
    setSelectedStatus(status);
    setSelectedButton(status);
  };

  const filteredItems = items.filter((item) => item.status === selectedStatus);

  return (
    <View style={styles.container}>
      {/* Header */}
      <View style={styles.header}>
        <Text style={styles.title}>PENUKARAN KOIN</Text>
      </View>

      {/* Status Buttons */}
      <View style={styles.buttonRow}>
        {["diproses", "dikirim", "diterima"].map((status) => (
          <TouchableOpacity
            key={status}
            style={[
              styles.statusButton,
              selectedButton === status && styles.selectedButton,
            ]}
            onPress={() => handleButtonClick(status)}
          >
            <Ionicons
              name={
                status === "diproses"
                  ? "sync"
                  : status === "dikirim"
                  ? "paper-plane"
                  : "checkmark"
              }
              size={20}
              color={selectedButton === status ? "#fff" : "#000"}
            />
            <Text
              style={[
                styles.buttonText,
                selectedButton === status && { color: "#fff" },
              ]}
            >
              {status.charAt(0).toUpperCase() + status.slice(1)}
            </Text>
          </TouchableOpacity>
        ))}
      </View>

      {/* Filtered List of Items */}
      <ScrollView contentContainerStyle={styles.itemList}>
        {filteredItems.length > 0 ? (
          filteredItems.map((item) => (
            <View key={item.id} style={styles.itemRow}>
              <View style={styles.itemInfo}>
                <Image source={item.imageUri} style={styles.itemImage} />
                <View style={styles.itemDetails}>
                  <Text style={styles.itemName}>{item.name}</Text>
                  <Text style={styles.itemTime}>{item.time}</Text>
                </View>
              </View>

              <View style={styles.itemActions}>
                <View style={styles.coinButton}>
                  <Text style={styles.coinButtonText}>500 Koin</Text>
                </View>
                <TouchableOpacity
                  style={styles.detailButton}
                  onPress={() =>
                    navigation.navigate("DetailPengirimanAdmin", { item })
                  }
                >
                  <Text style={styles.detailButtonText}>Lihat Detail</Text>
                </TouchableOpacity>
              </View>

              <View style={styles.userInfo}>
                <Image
                  source={item.user.profileImage}
                  style={styles.profileImage}
                />
                <View style={styles.userDetails}>
                  <Text style={styles.userName}>{item.user.fullName}</Text>
                  <Text style={styles.userAddress}>{item.user.address}</Text>
                  <Text style={styles.userEmail}>{item.user.email}</Text>
                </View>
              </View>
            </View>
          ))
        ) : (
          <Text style={styles.noItemsText}>
            Tidak ada barang dalam status ini.
          </Text>
        )}
      </ScrollView>

      {/* Floating Daftar Barang Button */}
      <TouchableOpacity
        style={styles.floatingButton}
        onPress={() => navigation.navigate("DaftarBarang")}
      >
        <Ionicons name="add-circle-outline" size={24} color="#fff" />
        <Text style={styles.floatingButtonText}>Daftar Barang</Text>
      </TouchableOpacity>

      {/* Bottom Navigation */}
      <View style={styles.bottomNavigation}>
        <BottomTabAdmin />
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#f9f9f9",
    paddingHorizontal: 20,
    paddingTop: 20,
  },
  header: {
    marginTop: 30,
    flexDirection: "row",
    alignItems: "center",
    marginBottom: 20,
  },
  title: {
    fontSize: 24,
    fontWeight: "bold",
    color: "#333",
  },
  buttonRow: {
    flexDirection: "row",
    justifyContent: "space-around",
    marginBottom: 25,
  },
  statusButton: {
    flexDirection: "row",
    alignItems: "center",
    backgroundColor: "#fff",
    borderWidth: 1,
    borderColor: "#2D572C",
    paddingVertical: 12,
    paddingHorizontal: 20,
    borderRadius: 25,
    justifyContent: "center",
    width: "30%",
  },
  selectedButton: {
    backgroundColor: "#2D572C",
  },
  buttonText: {
    marginLeft: 10,
    fontSize: 14,
    color: "#333",
  },
  itemList: {
    paddingBottom: 120,
  },
  itemRow: {
    backgroundColor: "#fff",
    padding: 20,
    marginBottom: 20,
    borderRadius: 15,
    shadowColor: "#000",
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 5,
    elevation: 3,
  },
  itemInfo: {
    flexDirection: "row",
    alignItems: "center",
    marginBottom: 15,
  },
  itemImage: {
    width: 80,
    height: 80,
    backgroundColor: "#fff",
    borderRadius: 10,
  },
  itemDetails: {
    flex: 1,
    marginLeft: 15,
  },
  itemName: {
    fontSize: 18,
    fontWeight: "bold",
    color: "#333",
  },
  itemTime: {
    fontSize: 12,
    color: "#777",
    marginTop: 5,
  },
  itemActions: {
    flexDirection: "row",
    justifyContent: "space-between",
    marginBottom: 15,
  },
  coinButton: {
    backgroundColor: "#2D572C",
    paddingVertical: 10,
    paddingHorizontal: 20,
    borderRadius: 5,
  },
  coinButtonText: {
    fontSize: 14,
    color: "#fff",
  },
  detailButton: {
    backgroundColor: "#ddd",
    paddingVertical: 10,
    paddingHorizontal: 20,
    borderRadius: 25,
  },
  detailButtonText: {
    fontSize: 14,
    color: "#333",
  },
  userInfo: {
    flexDirection: "row",
    alignItems: "center",
    marginTop: 10,
    borderTopWidth: 1,
    borderTopColor: "#ddd",
    paddingTop: 10,
  },
  profileImage: {
    width: 45,
    height: 45,
    borderRadius: 25,
  },
  userDetails: {
    marginLeft: 12,
  },
  userName: {
    fontSize: 14,
    fontWeight: "bold",
    color: "#333",
  },
  userAddress: {
    fontSize: 12,
    color: "#555",
  },
  userEmail: {
    fontSize: 12,
    color: "#555",
  },
  noItemsText: {
    fontSize: 14,
    color: "#888",
    textAlign: "center",
    marginTop: 30,
  },
  floatingButton: {
    position: "absolute",
    bottom: 100,
    right: 20,
    backgroundColor: "#2D572C",
    flexDirection: "row",
    alignItems: "center",
    paddingVertical: 12,
    paddingHorizontal: 20,
    borderRadius: 30,
    elevation: 5,
  },
  floatingButtonText: {
    color: "#fff",
    fontWeight: "bold",
    marginLeft: 6,
  },
  bottomNavigation: {
    position: "absolute",
    bottom: 0,
    left: 0,
    right: 0,
    backgroundColor: "#fff",
    borderTopWidth: 1,
    borderTopColor: "#ddd",
  },
});

export default TukarKoin;