TIF_NGANJUK_E41212433/screens/AksesAdmin/Laporan.js

import React, { useState } from "react";
import { Ionicons, MaterialIcons } from "@expo/vector-icons"; // I
import {
  View,
  Text,
  StyleSheet,
  Button,
  Modal,
  TouchableOpacity,
  FlatList,
} from "react-native";
import * as Print from "expo-print";
import * as FileSystem from "expo-file-system";
import { useNavigation } from "@react-navigation/native"; // Import useNavigation untuk navigasi

const Laporan = () => {
  const navigation = useNavigation();
  const [bulan, setBulan] = useState("Januari");
  const [modalVisible, setModalVisible] = useState(false);
  const [selectedReport, setSelectedReport] = useState(null);

  const data = {
    tpsData: [
      { tps: "TPS 1", jumlah: 150 },
      { tps: "TPS 2", jumlah: 200 },
      { tps: "TPS 3", jumlah: 180 },
    ],
    pengaduanData: [
      { bulan: "Januari", jumlah: 25 },
      { bulan: "Februari", jumlah: 30 },
      { bulan: "Maret", jumlah: 18 },
    ],
    penukaranKoinData: [
      { bulan: "Januari", jumlah: 1500 },
      { bulan: "Februari", jumlah: 2000 },
      { bulan: "Maret", jumlah: 1200 },
    ],
    donasiData: [
      { bulan: "Januari", jumlah: 100000 },
      { bulan: "Februari", jumlah: 120000 },
      { bulan: "Maret", jumlah: 80000 },
    ],
  };

  const filterDataByMonth = (month) => {
    const filteredData = {
      tpsData: data.tpsData,
      pengaduanData: data.pengaduanData.filter((item) => item.bulan === month),
      penukaranKoinData: data.penukaranKoinData.filter(
        (item) => item.bulan === month
      ),
      donasiData: data.donasiData.filter((item) => item.bulan === month),
    };
    return filteredData;
  };

  const generatePDF = async (reportType) => {
    const filteredData = filterDataByMonth(bulan);

    let htmlContent = "";

    if (reportType === "tps") {
      htmlContent = `
        <h1 style="text-align:center;">Laporan TPS di Nganjuk</h1>
        <table border="1" style="width:100%; text-align:left;">
          <tr>
            <th>TPS</th>
            <th>Jumlah</th>
          </tr>
          ${filteredData.tpsData
            .map(
              (item) => `
            <tr>
              <td>${item.tps}</td>
              <td>${item.jumlah}</td>
            </tr>`
            )
            .join("")}
        </table>
      `;
    } else if (reportType === "pengaduan") {
      htmlContent = `
        <h1 style="text-align:center;">Laporan Pengaduan Sampah - ${bulan}</h1>
        <table border="1" style="width:100%; text-align:left;">
          <tr>
            <th>Bulan</th>
            <th>Jumlah Pengaduan</th>
          </tr>
          ${filteredData.pengaduanData
            .map(
              (item) => `
            <tr>
              <td>${item.bulan}</td>
              <td>${item.jumlah}</td>
            </tr>`
            )
            .join("")}
        </table>
      `;
    } else if (reportType === "penukaran") {
      htmlContent = `
        <h1 style="text-align:center;">Laporan Penukaran Koin - ${bulan}</h1>
        <table border="1" style="width:100%; text-align:left;">
          <tr>
            <th>Bulan</th>
            <th>Jumlah Koin</th>
          </tr>
          ${filteredData.penukaranKoinData
            .map(
              (item) => `
            <tr>
              <td>${item.bulan}</td>
              <td>${item.jumlah}</td>
            </tr>`
            )
            .join("")}
        </table>
      `;
    } else if (reportType === "donasi") {
      htmlContent = `
        <h1 style="text-align:center;">Laporan Donasi - ${bulan}</h1>
        <table border="1" style="width:100%; text-align:left;">
          <tr>
            <th>Bulan</th>
            <th>Jumlah Donasi</th>
          </tr>
          ${filteredData.donasiData
            .map(
              (item) => `
            <tr>
              <td>${item.bulan}</td>
              <td>Rp ${item.jumlah.toLocaleString()}</td>
            </tr>`
            )
            .join("")}
        </table>
      `;
    }

    try {
      const { uri } = await Print.printToFileAsync({ html: htmlContent });
      console.log("PDF berhasil dibuat di:", uri);
      alert(`PDF berhasil dibuat! File disimpan di: ${uri}`);
    } catch (error) {
      console.error("Error saat membuat PDF:", error);
      alert("Gagal membuat PDF.");
    }
  };

  const months = [
    "Januari",
    "Februari",
    "Maret",
    "April",
    "Mei",
    "Juni",
    "Juli",
    "Agustus",
    "September",
    "Oktober",
    "November",
    "Desember",
  ];

  return (
    <View style={styles.container}>
      {/* <Text style={styles.headerTitle}>Laporan Data</Text> */}
      <View style={styles.header}>
        <TouchableOpacity
          style={styles.backButton}
          onPress={() => navigation.navigate("AdminScreen")}
        >
          <Ionicons name="arrow-back" size={24} color="#000" />
        </TouchableOpacity>
        <Text style={styles.title}>LAPORAN</Text>
      </View>
      {/* Tombol untuk Memilih Laporan */}
      <View style={styles.buttonContainer}>
        <TouchableOpacity
          style={styles.reportButton}
          onPress={() => {
            setSelectedReport("tps");
            setModalVisible(true);
          }}
        >
          <Text style={styles.buttonText}>TPS di Nganjuk</Text>
        </TouchableOpacity>
        <TouchableOpacity
          style={styles.reportButton}
          onPress={() => {
            setSelectedReport("pengaduan");
            setModalVisible(true);
          }}
        >
          <Text style={styles.buttonText}>Pengaduan Sampah</Text>
        </TouchableOpacity>
        <TouchableOpacity
          style={styles.reportButton}
          onPress={() => {
            setSelectedReport("penukaran");
            setModalVisible(true);
          }}
        >
          <Text style={styles.buttonText}>Penukaran Koin</Text>
        </TouchableOpacity>
        <TouchableOpacity
          style={styles.reportButton}
          onPress={() => {
            setSelectedReport("donasi");
            setModalVisible(true);
          }}
        >
          <Text style={styles.buttonText}>Donasi</Text>
        </TouchableOpacity>
      </View>

      {/* Modal untuk memilih bulan */}
      <Modal
        visible={modalVisible}
        transparent={true}
        animationType="slide"
        onRequestClose={() => setModalVisible(false)}
      >
        <View style={styles.modalContainer}>
          <View style={styles.modalContent}>
            <Text style={styles.modalTitle}>Pilih Bulan</Text>
            <FlatList
              data={months}
              numColumns={3}
              keyExtractor={(item) => item}
              renderItem={({ item }) => (
                <TouchableOpacity
                  style={styles.monthButton}
                  onPress={() => {
                    setBulan(item);
                    generatePDF(selectedReport);
                    setModalVisible(false);
                  }}
                >
                  <Text style={styles.monthButtonText}>{item}</Text>
                </TouchableOpacity>
              )}
            />
            <TouchableOpacity
              style={styles.closeButton}
              onPress={() => setModalVisible(false)}
            >
              <Text style={styles.closeButtonText}>Tutup</Text>
            </TouchableOpacity>
          </View>
        </View>
      </Modal>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    padding: 16,
  },
  header: {
    marginTop: 40,
    flexDirection: "row",
    alignItems: "center",
    marginBottom: 20,
  },
  backButton: {
    marginRight: 12,
  },
  title: {
    fontSize: 22,
    fontWeight: "bold",
    color: "#000",
  },
  headerTitle: {
    fontSize: 22,
    fontWeight: "bold",
    marginBottom: 20,
    textAlign: "center",
  },
  buttonContainer: {
    marginBottom: 20,
    flexDirection: "row",
    flexWrap: "wrap",
    justifyContent: "space-around",
  },
  reportButton: {
    backgroundColor: "#2D572C",
    padding: 20,
    borderRadius: 8,
    marginBottom: 10,
    width: "100%",
    alignItems: "center",
  },
  buttonText: {
    color: "#fff",
    fontSize: 20,
    textAlign: "center",
  },
  modalContainer: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "rgba(0, 0, 0, 0.5)",
  },
  modalContent: {
    backgroundColor: "#fff",
    padding: 20,
    borderRadius: 10,
    width: 300,
  },
  modalTitle: {
    fontSize: 18,
    fontWeight: "bold",
    marginBottom: 10,
    textAlign: "center",
  },
  monthButton: {
    backgroundColor: "#4CAF50",
    margin: 5,
    padding: 10,
    borderRadius: 5,
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  },
  monthButtonText: {
    color: "#fff",
    fontSize: 14,
  },
  closeButton: {
    backgroundColor: "#ddd",
    padding: 10,
    borderRadius: 5,
    marginTop: 20,
    alignItems: "center",
    borderWidth: 1,
  },
  closeButtonText: {
    color: "#000",
    fontSize: 16,
  },
});

export default Laporan;