TIF_NGANJUK_E41212433/screens/AksesAdmin/PengaduanSampahScreenAdmin.js

import React, { useState } from "react";
import {
  View,
  Text,
  TouchableOpacity,
  StyleSheet,
  ScrollView,
} from "react-native";
import { Ionicons, MaterialIcons } from "@expo/vector-icons"; // Importing icons
import { useNavigation } from "@react-navigation/native";

const PengaduanSampahScreenAdmin = () => {
  const [filter, setFilter] = useState("all"); // State to manage the active filter
  const navigation = useNavigation();

  // Function to navigate to the details page
  const goToDetailPage = (status) => {
    navigation.navigate(`Detail${status}`);
  };

  // Sample data for reports
  const reports = [
    {
      title: "Sampah Berantakan",
      location: "Pasar Nganjuk - Jl. Sukomoro Nganjuk",
      status: "Selesai",
      date: "10 April 2025 - 14:30",
    },
    {
      title: "Sampah Pinggir Jalan",
      location: "Pasar Madiun - Jl. Raya Madiun",
      status: "Dalam Proses",
      date: "10 April 2025 - 13:00",
    },
    {
      title: "TPS Liar",
      location: "Pasar Kediri - Jl. Raya Kediri",
      status: "Verifikasi",
      date: "9 April 2025 - 15:20",
    },
    {
      title: "Sampah Depan SMA 1",
      location: "Pasar Surabaya - Jl. Raya Surabaya",
      status: "Ditolak",
      date: "8 April 2025 - 10:45",
    },
  ];

  // Filter reports based on the active filter
  const filteredReports = reports.filter(
    (report) => filter === "all" || report.status === filter
  );

  return (
    <ScrollView style={styles.container}>
      {/* Header with Title and Back Button */}
      <View style={styles.header}>
        <TouchableOpacity
          style={styles.backButton}
          onPress={() => navigation.navigate("AdminScreen")}
        >
          <Ionicons name="arrow-back" size={24} color="#333" />
        </TouchableOpacity>
        <Text style={styles.title}>PENGADUAN SAMPAH</Text>
      </View>

      {/* Filter Buttons */}
      <View style={styles.filterContainer}>
        <TouchableOpacity
          style={[styles.filterButton, filter === "all" && styles.activeFilter]}
          onPress={() => setFilter("all")}
        >
          <Text style={styles.filterButtonText}>Semua</Text>
        </TouchableOpacity>
        <TouchableOpacity
          style={[
            styles.filterButton,
            filter === "Verifikasi" && styles.activeFilter,
          ]}
          onPress={() => setFilter("Verifikasi")}
        >
          <Text style={styles.filterButtonText}>Verifikasi</Text>
        </TouchableOpacity>
        <TouchableOpacity
          style={[
            styles.filterButton,
            filter === "Dalam Proses" && styles.activeFilter,
          ]}
          onPress={() => setFilter("Dalam Proses")}
        >
          <Text style={styles.filterButtonText}>Dalam Proses</Text>
        </TouchableOpacity>
        <TouchableOpacity
          style={[
            styles.filterButton,
            filter === "Selesai" && styles.activeFilter,
          ]}
          onPress={() => setFilter("Selesai")}
        >
          <Text style={styles.filterButtonText}>Selesai</Text>
        </TouchableOpacity>
        <TouchableOpacity
          style={[
            styles.filterButton,
            filter === "Ditolak" && styles.activeFilter,
          ]}
          onPress={() => setFilter("Ditolak")}
        >
          <Text style={styles.filterButtonText}>Ditolak</Text>
        </TouchableOpacity>
      </View>

      {/* Report Content */}
      {filteredReports.map((report, index) => (
        <View style={styles.reportContainer} key={index}>
          <Text style={styles.reportTitle}>{report.title}</Text>
          <Text style={styles.reportLocation}>{report.location}</Text>

          <View style={styles.statusContainer}>
            <TouchableOpacity
              style={[
                styles.statusBox,
                report.status === "Selesai" && styles.statusDone,
                report.status === "Dalam Proses" && styles.statusInProgress,
                report.status === "Verifikasi" && styles.statusOnProcess,
                report.status === "Ditolak" && styles.statusRejected,
              ]}
              onPress={() => goToDetailPage(report.status)}
            >
              <Text style={styles.statusText}>{report.status}</Text>
            </TouchableOpacity>
            <Text style={styles.dateTimeText}>{report.date}</Text>
          </View>
        </View>
      ))}
    </ScrollView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#f9f9f9",
    padding: 20,
  },
  header: {
    marginTop: 40,
    flexDirection: "row",
    alignItems: "center",
    marginBottom: 20,
  },
  backButton: {
    marginRight: 10,
  },
  title: {
    fontSize: 20,
    fontWeight: "bold",
    color: "#333",
  },
  filterContainer: {
    flexDirection: "row",
    justifyContent: "space-between",
    marginBottom: 20,
  },
  filterButton: {
    paddingVertical: 8,
    paddingHorizontal: 12,
    borderRadius: 15,
    backgroundColor: "#fff",
    borderWidth: 0.5,
  },
  filterButtonText: {
    fontSize: 14,
    color: "#333",
  },
  activeFilter: {
    backgroundColor: "#dcdcdc", // Green color for active filter
  },
  reportContainer: {
    backgroundColor: "#fff",
    padding: 15,
    marginBottom: 15,
    borderRadius: 8,
    borderWidth: 1,
    borderColor: "#ddd",
  },
  reportTitle: {
    fontSize: 18,
    fontWeight: "bold",
    color: "#333",
  },
  reportLocation: {
    fontSize: 14,
    color: "#555",
    marginBottom: 10,
  },
  statusContainer: {
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
  },
  statusBox: {
    paddingVertical: 8,
    paddingHorizontal: 12,
    borderRadius: 8,
    justifyContent: "center",
    alignItems: "center",
  },
  statusDone: {
    backgroundColor: "#d1f0d1", // Light Green
  },
  statusInProgress: {
    backgroundColor: "#d1e3f0", // Light Blue
  },
  statusOnProcess: {
    backgroundColor: "#f0e0a1", // Light Yellow
  },
  statusRejected: {
    backgroundColor: "#f0c1c1", // Light Red
  },
  statusText: {
    fontSize: 14,
    color: "#333",
  },
  dateTimeText: {
    fontSize: 12,
    color: "#555",
  },
});

export default PengaduanSampahScreenAdmin;