71 lines
2.4 KiB
React
71 lines
2.4 KiB
React
|
import { useUploadController } from "./controller_admin_upload";
|
||
|
|
import FileDropzone from "../../../components/FileDropzone";
|
||
|
|
import { Link } from "react-router-dom";
|
||
|
|
|
||
|
|
export default function ViewsAdminUploadStep1() {
|
||
|
|
const {
|
||
|
|
loading,
|
||
|
|
file,
|
||
|
|
result,
|
||
|
|
selectedTable,
|
||
|
|
setSelectedTable,
|
||
|
|
handleFileSelect,
|
||
|
|
handleUpload,
|
||
|
|
handleNextPdf,
|
||
|
|
} = useUploadController();
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="max-w-4xl mx-auto py-10">
|
||
|
|
<div className="mb-6 flex justify-between items-center">
|
||
|
|
<h1 className="text-2xl font-bold text-gray-800">Upload Data</h1>
|
||
|
|
<p className="text-lg text-gray-600">
|
||
|
|
<Link to="/admin/upload/rules" className="text-blue-600 hover:underline">
|
||
|
|
Panduan upload →
|
||
|
|
</Link>
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<FileDropzone onFileSelect={handleFileSelect} />
|
||
|
|
{file && (
|
||
|
|
<div className="mt-3">
|
||
|
|
<p className="text-gray-700 text-sm">File terpilih: {file.name}</p>
|
||
|
|
<button
|
||
|
|
onClick={handleUpload}
|
||
|
|
disabled={loading}
|
||
|
|
className="mt-3 px-5 py-2 rounded-lg bg-blue-600 text-white hover:bg-blue-700 disabled:bg-gray-400"
|
||
|
|
>
|
||
|
|
{loading ? "Mengunggah..." : "Upload"}
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
|
||
|
|
{result && result.file_type === ".pdf" && result.tables?.length > 1 && (
|
||
|
|
<div className="mt-6">
|
||
|
|
<h2 className="text-lg font-semibold mb-2 text-gray-700">Hasil Analisis Backend</h2>
|
||
|
|
<ul className="border rounded-lg divide-y overflow-hidden">
|
||
|
|
{result.tables.map((t, i) => (
|
||
|
|
<li
|
||
|
|
key={i}
|
||
|
|
onClick={() => setSelectedTable(t)}
|
||
|
|
className={`flex items-center gap-2 p-3 cursor-pointer hover:bg-blue-50 transition ${
|
||
|
|
selectedTable?.title === t.title ? "bg-blue-100 font-semibold" : ""
|
||
|
|
}`}
|
||
|
|
>
|
||
|
|
<span className={`text-green-600 ${selectedTable?.title === t.title ? "" : "opacity-0"}`}>✅</span>
|
||
|
|
<span>{t.title}</span>
|
||
|
|
</li>
|
||
|
|
))}
|
||
|
|
</ul>
|
||
|
|
<button
|
||
|
|
onClick={handleNextPdf}
|
||
|
|
disabled={!selectedTable}
|
||
|
|
className="mt-4 px-5 py-2 bg-green-600 text-white rounded hover:bg-green-700 disabled:bg-gray-300"
|
||
|
|
>
|
||
|
|
Lanjut ke Validasi →
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|