Management Data Old

// import React, { useEffect, useState } from "react";

// import { ContentLayout } from "../../components/organisms/ContentLayout";
// import { deleteData, getAllData } from "../../api/api";
// import {
// ArrowDownOnSquareIcon,
// ArrowUpOnSquareIcon,
// PlusIcon,
// } from "@heroicons/react/24/outline";
// import { Link } from "react-router-dom";
// import { TableDataManagement } from "../../components/organisms/Table";
// import { ExcelUploader } from "../../components/molecules/ExcelUpload";
// import ExcelJS from "exceljs"

// export const ManagementData = () => {

// const [fileData, setFileData] = useState([]);
// const [countData, setCountData] = useState(0);
// const [showImportModal, setShowImportModal] = useState(false);

// const fetchFileDataItems = async () => {

// try {
// const data = await getAllData();
// setFileData(data);
// console.log("data management", data);

// setCountData(data.length);
// } catch (error) {
// console.error("Error Fetch getAllData", error);
// throw error;
// }
// };

// useEffect(() => {
// fetchFileDataItems();
// }, []);

// const handleDelete = async (id) => {

// try {
// const response = await deleteData(id);
// console.log("response delete", response);

// const data = await fetchFileDataItems();

// console.log("refresh data after deleted", data); // Log the fetched data
here

// if (data) {
// setFileData(data);
// } else {
// console.error("Fetched data is undefined or null");
// }
// } catch (error) {
// console.error("Error delete data:", error);
// }
// };

// return (
// <div>
// <ContentLayout>
// <div className="">
// <div className="w-full flex items-center justify-between">
// <div className="w-fit flex flex-col gap-2">
// <div className="w-fit h-fit flex gap-2 items-center justify-
center">
// <h1 className="text-xl md:text-2xl font-bold">Jumlah Data</h1>
// <p className="px-2 md:px-4 py-1 text-red-600 bg-red-100 rounded-
2xl font-semibold md:text-base text-sm">
// {countData}
// </p>
// </div>
// <p className="text-xs md:text-base font-medium text-slate-700">
// Kelola data kamu disini!
// </p>
// </div>
// <div className="w-fit flex md:gap-3 gap-1">
// <button className="w-auto md:w-fit text-slate-700 font-semibold
md:py-3 md:px-5 p-2 hover:bg-slate-100 border border-slate-500 rounded-full flex
gap-3 items-center justify-between">
// <ArrowDownOnSquareIcon className="size-3 md:size-6" />
// <p className="hidden md:block">Download Data</p>
// </button>

// <button
// onClick={() => setShowImportModal(true)}
// className="w-auto md:w-fit text-slate-700 font-semibold md:py-3
md:px-5 p-2 hover:bg-slate-100 border border-slate-500 rounded-full flex gap-3
items-center justify-between"
// >
// <ArrowUpOnSquareIcon className="size-3 md:size-6" />
// <p className="hidden md:block">Import Excel</p>
// </button>

// <Link to={"/management-data/added-data"}>
// <button className="w-auto md:w-fit text-white bg-red-500
hover:bg-red-600 font-semibold md:py-3 md:px-5 p-2 rounded-full flex gap-3 items-
center justify-between cursor-pointer">
// <PlusIcon className="size-3 md:size-6" />
// <p className="hidden md:block">Tambah Data</p>
// </button>
// </Link>
// </div>
// </div>
// <hr className="text-slate-400" />
// <div className="">
// <TableDataManagement
// data={fileData}
// showSearchSet={true}
// showAksi={true}
// showEditBtn={true}
// showDetailBtn={true}
// showDeleteBtn={true}
// onDelete={handleDelete}
// />
// </div>
// </div>
// {showImportModal && (
// <div
// className="fixed inset-0 z-50 flex items-center justify-center"
// style={{ backgroundColor: "rgba(0, 0, 0, 0.5)" }}
// >
// <div className="bg-white p-6 rounded-lg w-full max-w-md shadow-lg
relative">
// <h2 className="text-lg font-bold mb-4">Import Data dari Excel</h2>

// <ExcelUploader
// onUpload={async (file) => {
// try {
// const workbook = new ExcelJS.Workbook();
// const arrayBuffer = await file.arrayBuffer();
// await workbook.xlsx.load(arrayBuffer);

// const worksheet = workbook.getWorksheet(1); // Sheet pertama

// const parsedData = [];

// worksheet.eachRow(
// { includeEmpty: false },
// (row, rowNumber) => {
// const rowData = row.values.slice(1); // index 0 adalah
null
// parsedData.push(rowData);
// }
// );

// console.log("Parsed Excel data:", parsedData);

// // TODO: kirim data ini ke backend atau masukkan ke state
// setShowImportModal(false);
// } catch (err) {
// console.error("Gagal membaca file Excel:", err);
// }
// }}
// />

// <button
// onClick={() => setShowImportModal(false)}
// className="absolute top-2 right-2 text-gray-500 hover:text-gray-
700"
// >
// ✕
// </button>
// </div>
// </div>
// )}
// </ContentLayout>
// </div>
// );
// };