{/* Section: Warning Table */}
- {warning_examples?.length > 0 ? (
+ {warning_examples?.length > 0 ?? (
- ) : (
-
โ ๏ธ Beberapa nama wilayah perlu diperiksa kembali. @@ -35,19 +35,17 @@ export default function FilePreview({ result }) { variant="warning" />
โ Data 100% valid
)} {/* Section: File Preview */}
- 0 ? 5 : 15}
variant="preview"
/>
@@ -57,10 +55,17 @@ export default function FilePreview({ result }) {
function Table({ title, columns, rows, total, limit = 100, variant = "preview" }) {
const displayedRows = rows.slice(0, limit);
+ const shorten = (text, max = 80) => {
+ if (!text) return "โ";
+ return text.length > max ? text.slice(0, max) + "..." : text;
+ };
+
return (
+
๐ Cuplikan Data
+ {/*๐ Cuplikan Data
*/}
+
+
+ Menampilkan {Math.min(limit, displayedRows.length)} dari {total} baris.
{variant === "preview" && (- Cuplikan sebagian data (maks. {limit} baris) + Cuplikan sebagian data + {/* (maks. {limit} baris) */}
)}
+
+ {/* ๐งฉ Bagian 1 โ Identifikasi Dataset */}
+
+
+
+
+
+
+
+ {/* */}
+
+
+ {/* FIXXXX AUTO */}
+ {/* ๐งญ Bagian 2 โ Referensi Spasial */}
+ {/*
+
+
+ */}
+
+ {/* NANTI WAKTU PUBLIKASI */}
+ {/* ๐ Bagian 3 โ Distribusi / Akses Data */}
+ {/*
+
+
+
+
+ */}
+
+ {/* ๐ค Bagian 4 โ Informasi Penanggung Jawab */}
+
+
+
+
+
+
+
+
+ {/* NANTI WAKTU PUBLIKASI */}
+ {/* ๐งพ Bagian 5 โ Metadata Umum */}
+ {/*
+
+
+
+
+
+ */}
+
+ );
+}
+
+/* ---------------------------------------------------
+ ๐ฆ Subkomponen Reusable untuk Input/Select/Textarea
+--------------------------------------------------- */
+function Section({ title, children }) {
+ return (
+
+
+
+
+
+
+
+
+ );
+}
+
+function Input({ label, name, type = "text", value, onChange, readOnly = false }) {
+ return (
+ {title}
+{children}
+
+
+
+
+ );
+}
+
+function Textarea({ label, name, value, onChange }) {
+ return (
+
+
+
+
+ );
+}
+
+function Select({ label, name, value, onChange, options = [] }) {
+ return (
+
+
+
+
+ );
+}
diff --git a/src/index.css b/src/index.css
index a461c50..7550e24 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1 +1,120 @@
-@import "tailwindcss";
\ No newline at end of file
+@import "tailwindcss";
+@import "tw-animate-css";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+ --radius-sm: calc(var(--radius) - 4px);
+ --radius-md: calc(var(--radius) - 2px);
+ --radius-lg: var(--radius);
+ --radius-xl: calc(var(--radius) + 4px);
+ --color-background: var(--background);
+ --color-foreground: var(--foreground);
+ --color-card: var(--card);
+ --color-card-foreground: var(--card-foreground);
+ --color-popover: var(--popover);
+ --color-popover-foreground: var(--popover-foreground);
+ --color-primary: var(--primary);
+ --color-primary-foreground: var(--primary-foreground);
+ --color-secondary: var(--secondary);
+ --color-secondary-foreground: var(--secondary-foreground);
+ --color-muted: var(--muted);
+ --color-muted-foreground: var(--muted-foreground);
+ --color-accent: var(--accent);
+ --color-accent-foreground: var(--accent-foreground);
+ --color-destructive: var(--destructive);
+ --color-border: var(--border);
+ --color-input: var(--input);
+ --color-ring: var(--ring);
+ --color-chart-1: var(--chart-1);
+ --color-chart-2: var(--chart-2);
+ --color-chart-3: var(--chart-3);
+ --color-chart-4: var(--chart-4);
+ --color-chart-5: var(--chart-5);
+ --color-sidebar: var(--sidebar);
+ --color-sidebar-foreground: var(--sidebar-foreground);
+ --color-sidebar-primary: var(--sidebar-primary);
+ --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+ --color-sidebar-accent: var(--sidebar-accent);
+ --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+ --color-sidebar-border: var(--sidebar-border);
+ --color-sidebar-ring: var(--sidebar-ring);
+}
+
+:root {
+ --radius: 0.625rem;
+ --background: oklch(1 0 0);
+ --foreground: oklch(0.145 0 0);
+ --card: oklch(1 0 0);
+ --card-foreground: oklch(0.145 0 0);
+ --popover: oklch(1 0 0);
+ --popover-foreground: oklch(0.145 0 0);
+ --primary: oklch(0.205 0 0);
+ --primary-foreground: oklch(0.985 0 0);
+ --secondary: oklch(0.97 0 0);
+ --secondary-foreground: oklch(0.205 0 0);
+ --muted: oklch(0.97 0 0);
+ --muted-foreground: oklch(0.556 0 0);
+ --accent: oklch(0.97 0 0);
+ --accent-foreground: oklch(0.205 0 0);
+ --destructive: oklch(0.577 0.245 27.325);
+ --border: oklch(0.922 0 0);
+ --input: oklch(0.922 0 0);
+ --ring: oklch(0.708 0 0);
+ --chart-1: oklch(0.646 0.222 41.116);
+ --chart-2: oklch(0.6 0.118 184.704);
+ --chart-3: oklch(0.398 0.07 227.392);
+ --chart-4: oklch(0.828 0.189 84.429);
+ --chart-5: oklch(0.769 0.188 70.08);
+ --sidebar: oklch(0.985 0 0);
+ --sidebar-foreground: oklch(0.145 0 0);
+ --sidebar-primary: oklch(0.205 0 0);
+ --sidebar-primary-foreground: oklch(0.985 0 0);
+ --sidebar-accent: oklch(0.97 0 0);
+ --sidebar-accent-foreground: oklch(0.205 0 0);
+ --sidebar-border: oklch(0.922 0 0);
+ --sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+ --background: oklch(0.145 0 0);
+ --foreground: oklch(0.985 0 0);
+ --card: oklch(0.205 0 0);
+ --card-foreground: oklch(0.985 0 0);
+ --popover: oklch(0.205 0 0);
+ --popover-foreground: oklch(0.985 0 0);
+ --primary: oklch(0.922 0 0);
+ --primary-foreground: oklch(0.205 0 0);
+ --secondary: oklch(0.269 0 0);
+ --secondary-foreground: oklch(0.985 0 0);
+ --muted: oklch(0.269 0 0);
+ --muted-foreground: oklch(0.708 0 0);
+ --accent: oklch(0.269 0 0);
+ --accent-foreground: oklch(0.985 0 0);
+ --destructive: oklch(0.704 0.191 22.216);
+ --border: oklch(1 0 0 / 10%);
+ --input: oklch(1 0 0 / 15%);
+ --ring: oklch(0.556 0 0);
+ --chart-1: oklch(0.488 0.243 264.376);
+ --chart-2: oklch(0.696 0.17 162.48);
+ --chart-3: oklch(0.769 0.188 70.08);
+ --chart-4: oklch(0.627 0.265 303.9);
+ --chart-5: oklch(0.645 0.246 16.439);
+ --sidebar: oklch(0.205 0 0);
+ --sidebar-foreground: oklch(0.985 0 0);
+ --sidebar-primary: oklch(0.488 0.243 264.376);
+ --sidebar-primary-foreground: oklch(0.985 0 0);
+ --sidebar-accent: oklch(0.269 0 0);
+ --sidebar-accent-foreground: oklch(0.985 0 0);
+ --sidebar-border: oklch(1 0 0 / 10%);
+ --sidebar-ring: oklch(0.556 0 0);
+}
+
+@layer base {
+ * {
+ @apply border-border outline-ring/50;
+ }
+ body {
+ @apply bg-background text-foreground;
+ }
+}
\ No newline at end of file
diff --git a/src/lib/utils.js b/src/lib/utils.js
new file mode 100644
index 0000000..b20bf01
--- /dev/null
+++ b/src/lib/utils.js
@@ -0,0 +1,6 @@
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs) {
+ return twMerge(clsx(inputs));
+}
diff --git a/src/pages/admin/home/controller_admin_home.jsx b/src/pages/admin/home/controller_admin_home.jsx
index e69de29..d378432 100644
--- a/src/pages/admin/home/controller_admin_home.jsx
+++ b/src/pages/admin/home/controller_admin_home.jsx
@@ -0,0 +1,30 @@
+import { useEffect, useState } from "react";
+import { fetchAllDatasets } from "./service_admin_home";
+
+export function useAdminHomeController() {
+ const [datasets, setDatasets] = useState([]);
+ const [loading, setLoading] = useState(false);
+ const [errorMsg, setErrorMsg] = useState("");
+
+ const loadData = async () => {
+ setLoading(true);
+ try {
+ const data = await fetchAllDatasets();
+ setDatasets(data);
+ } catch (err) {
+ setErrorMsg(err?.message || "Terjadi kesalahan saat memuat data.");
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ useEffect(() => {
+ loadData();
+ }, []);
+
+ return {
+ datasets,
+ loading,
+ errorMsg,
+ };
+}
diff --git a/src/pages/admin/home/service_admin_home.jsx b/src/pages/admin/home/service_admin_home.jsx
index e69de29..5346453 100644
--- a/src/pages/admin/home/service_admin_home.jsx
+++ b/src/pages/admin/home/service_admin_home.jsx
@@ -0,0 +1,11 @@
+import api from "../../../services/api";
+
+export async function fetchAllDatasets() {
+ try {
+ const res = await api.get("/dataset/metadata");
+ return res.data?.data || [];
+ } catch (err) {
+ console.error("Fetch datasets error:", err);
+ throw err.response?.data || err;
+ }
+}
diff --git a/src/pages/admin/home/views_admin_home.jsx b/src/pages/admin/home/views_admin_home.jsx
index 0e58ca8..28c1b7d 100644
--- a/src/pages/admin/home/views_admin_home.jsx
+++ b/src/pages/admin/home/views_admin_home.jsx
@@ -1,10 +1,168 @@
-import Sidebar from "../../../components/Sidebar";
+import LoadingOverlay from "../../../components/LoadingOverlay";
+import ErrorNotification from "../../../components/ErrorNotification";
+import { useAdminHomeController } from "./controller_admin_home";
+import {
+ DropdownMenu,
+ DropdownMenuTrigger,
+ DropdownMenuContent,
+ DropdownMenuItem,
+ DropdownMenuSeparator
+} from "../../../components/ui/dropdown-menu";
+import { Link } from "react-router-dom";
export default function ViewsAdminHome() {
+ const { datasets, loading, errorMsg } = useAdminHomeController();
+
return (
-
-
Dashboard Home
-Selamat datang di panel admin upload automation.
+
+
+ {}} />
+
+
);
}
diff --git a/src/pages/admin/upload/controller_admin_upload.jsx b/src/pages/admin/upload/controller_admin_upload.jsx
index d776bfa..7126e10 100644
--- a/src/pages/admin/upload/controller_admin_upload.jsx
+++ b/src/pages/admin/upload/controller_admin_upload.jsx
@@ -19,7 +19,7 @@ export function useUploadController() {
const [loading, setLoading] = useState(false);
const [selectedTable, setSelectedTable] = useState(null);
// const [selectedPages, setSelectedPages] = useState("");
- const [tableTitle, setTableTitle] = useState("");
+ const [tableTitle, setTableTitle] = useState("GTW");
// const [pdfPageCount, setPdfPageCount] = useState(null);
const [selectedSheet, setSelectedSheet] = useState(null);
const [sheetCount, setSheetCount] = useState(null);
@@ -44,19 +44,23 @@ export function useUploadController() {
// } catch (err) {
// console.error("Gagal membaca PDF:", err);
// }
- try {
- const reader = new FileReader();
- reader.onload = async (e) => {
- const typedArray = new Uint8Array(e.target.result);
- const pdf = await pdfjsLib.getDocument({ data: typedArray }).promise;
- dispatch(setPdfPageCount(pdf.numPages));
- console.log(`๐ PDF terdeteksi dengan ${pdf.numPages} halaman`);
- navigate("/admin/upload/pdf"); // ๐ otomatis pindah ke viewer
- };
- reader.readAsArrayBuffer(f);
- } catch (err) {
- console.error("Gagal membaca PDF:", err);
- }
+
+ // try {
+ // const reader = new FileReader();
+ // reader.onload = async (e) => {
+ // const typedArray = new Uint8Array(e.target.result);
+ // const pdf = await pdfjsLib.getDocument({ data: typedArray }).promise;
+ // dispatch(setPdfPageCount(pdf.numPages));
+ // navigate("/admin/upload/pdf");
+ // };
+ // reader.readAsArrayBuffer(f);
+ // } catch (err) {
+ // console.error("Gagal membaca PDF:", err);
+ // }
+
+
+
+ navigate("/admin/upload/pdf");
}
else if (ext === "xlsx" || ext === "xls") {
const data = await f.arrayBuffer();
@@ -104,13 +108,14 @@ export function useUploadController() {
}
};
- const handleConfirmUpload = async () => {
+ const handleConfirmUpload = async (metadata) => {
setLoading(true);
try {
const data = {
- title: tableTitle,
+ title: metadata.title,
columns: result.columns,
rows: result.preview,
+ author: metadata
};
const res = await saveToDatabase(data);
dispatch(setValidatedData(res));
diff --git a/src/pages/admin/upload/pdf_viewer/controller_pdf_viewer.jsx b/src/pages/admin/upload/pdf_viewer/controller_pdf_viewer.jsx
index e7ecfef..18621bd 100644
--- a/src/pages/admin/upload/pdf_viewer/controller_pdf_viewer.jsx
+++ b/src/pages/admin/upload/pdf_viewer/controller_pdf_viewer.jsx
@@ -1,8 +1,8 @@
import { useDispatch, useSelector } from "react-redux";
import { useState } from "react";
import * as pdfjsLib from "pdfjs-dist";
-import { setSelectedPages } from "../../../../store/slices/uploadSlice";
-import { uploadPdf } from "../service_admin_upload";
+import { setSelectedPages, setResult } from "../../../../store/slices/uploadSlice";
+import { uploadFile } from "../service_admin_upload";
import { useNavigate } from "react-router-dom";
pdfjsLib.GlobalWorkerOptions.workerSrc = new URL(
@@ -13,12 +13,15 @@ pdfjsLib.GlobalWorkerOptions.workerSrc = new URL(
export function usePdfViewerController() {
const dispatch = useDispatch();
const navigate = useNavigate();
- const { file } = useSelector((state) => state.upload);
+ const { file, selectedPages } = useSelector((state) => state.upload);
const [pages, setPages] = useState([]);
- const [selectedPages, setSelectedPagesLocal] = useState([]);
+ const [selectedPagesLocal, setSelectedPagesLocal] = useState([]);
const [loading, setLoading] = useState(false);
+
+ const [errorMsg, setErrorMsg] = useState("");
+
// Render PDF menjadi gambar
const loadPdfPages = async (pdfFile) => {
setLoading(true);
@@ -55,7 +58,7 @@ export function usePdfViewerController() {
// Toggle halaman yang dipilih
const toggleSelectPage = (pageNum) => {
- let updated = [...selectedPages];
+ let updated = [...selectedPagesLocal];
if (updated.includes(pageNum)) {
updated = updated.filter((p) => p !== pageNum);
} else {
@@ -67,14 +70,21 @@ export function usePdfViewerController() {
};
const handleProcessPdf = async () => {
- if (selectedPages.length === 0) return;
+ if (selectedPagesLocal.length === 0) return;
try {
setLoading(true);
- const res = await uploadPdf({ pages: selectedPages });
- console.log("PDF processed:", res);
- navigate("/admin/upload/validate");
+ const res = await uploadFile(file, selectedPagesLocal);
+ dispatch(setResult(res));
+
+ if (!res.tables) {
+ navigate("/admin/upload/validate");
+ } else if(!Array.isArray(res.tables)) {
+ setErrorMsg(res.message);
+ } else {
+ navigate("/admin/upload/table-selector");
+ }
} catch (err) {
- console.error(err);
+ setErrorMsg(err);
} finally {
setLoading(false);
}
@@ -84,9 +94,10 @@ export function usePdfViewerController() {
file,
pages,
loading,
- selectedPages,
+ selectedPagesLocal,
loadPdfPages,
toggleSelectPage,
handleProcessPdf,
+ errorMsg, setErrorMsg
};
}
diff --git a/src/pages/admin/upload/pdf_viewer/views_admin_pdf_viewer.jsx b/src/pages/admin/upload/pdf_viewer/views_admin_pdf_viewer.jsx
index 9430d43..4e0ca5c 100644
--- a/src/pages/admin/upload/pdf_viewer/views_admin_pdf_viewer.jsx
+++ b/src/pages/admin/upload/pdf_viewer/views_admin_pdf_viewer.jsx
@@ -2,6 +2,7 @@ import { useEffect, useState } from "react";
import { useNavigate } from "react-router-dom";
import { usePdfViewerController } from "./controller_pdf_viewer";
import LoadingOverlay from "../../../../components/LoadingOverlay";
+import ErrorNotification from "@/components/ErrorNotification";
import { motion } from "framer-motion";
export default function ViewsAdminPdfViewer() {
@@ -9,10 +10,11 @@ export default function ViewsAdminPdfViewer() {
file,
pages,
loading,
- selectedPages,
+ selectedPagesLocal,
toggleSelectPage,
handleProcessPdf,
loadPdfPages,
+ errorMsg, setErrorMsg
} = usePdfViewerController();
const navigate = useNavigate();
@@ -26,68 +28,74 @@ export default function ViewsAdminPdfViewer() {
return (
+
+
+ {/* Empty State */}
+ {datasets.length === 0 && !loading && (
+ ๐ Metadata Dataset
+ + + Upload Baru + ++ Belum ada metadata dataset yang tersimpan. +
+ )} + + {/* CARD LIST */} +
+ {datasets.map((item) => (
+
+
+ ))}
+
+
+
+ + {item.dataset_title} +
+ + {/* STATUS BADGE */} + + {item.dataset_status} + ++ ๐ {new Date(item.created_at).toLocaleString()} +
+ +
+
+
+
+ {/* ACTIONS */}
+ + Nama Tabel:{" "} + {item.table_title} +
+ ++ Kategori:{" "} + {item.topic_category} +
+ ++ Organisasi:{" "} + {item.organization_name} +
+ ++ Kontak:{" "} + {item.contact_person_name} +
+ + {/* GEOM TYPE */} ++ Tipe Geometri: +
+
+ {item.geom_type?.map((g, i) => (
+
+ {g}
+
+ ))}
+
+
+ {/* KEYWORDS */}
+
+
+
+ Kata Kunci:
+
+ {item.keywords
+ .split(",")
+ .map((k, i) => (
+
+ #{k.trim()}
+
+ ))}
+
+
+
+ {/* BUTTON: Buka di QGIS */}
+
+ ๐ Buka di QGIS
+
+
+ {/* MORE MENU */}
+
+
+
+
+
+
+
+
+
+ Lihat Detail
+
+
+
+ console.log("Hapus:", item.id)}
+ className="text-red-600 cursor-pointer"
+ >
+ Hapus
+
+
+
+
+
+
+
- {/* Sidebar kiri */}
-
- setErrorMsg("")}
+ />
-
);
}
diff --git a/src/pages/admin/upload/service_admin_upload.jsx b/src/pages/admin/upload/service_admin_upload.jsx
index 3630672..48687ed 100644
--- a/src/pages/admin/upload/service_admin_upload.jsx
+++ b/src/pages/admin/upload/service_admin_upload.jsx
@@ -38,9 +38,9 @@ export async function uploadFile(file, page = null, sheet = null) {
const response = await api.post("/upload/file", formData, {
headers: { "Content-Type": "multipart/form-data" },
});
- return response.data;
+ return response.data.data;
} catch (error) {
- throw error.response?.data.detail || "Gagal proses file.";
+ throw error.response?.data.detail.message || "Gagal proses file.";
}
}
@@ -49,9 +49,9 @@ export async function uploadPdf(data) {
const response = await api.post("/upload/process-pdf", data, {
headers: { "Content-Type": "application/json" },
});
- return response.data;
+ return response.data.data;
} catch (error) {
- throw error.response?.data.detail || { message: "Gagal proses file." };
+ throw error.response?.data.detail.message || { message: "Gagal proses file." };
}
}
@@ -61,8 +61,8 @@ export async function saveToDatabase(data) {
const response = await api.post("/upload/to-postgis", data, {
headers: { "Content-Type": "application/json" },
});
- return response.data;
+ return response.data.data;
} catch (error) {
- throw error.response?.data.detail || { message: "Gagal upload data." };
+ throw error.response?.data.detail.message || { message: "Gagal upload data." };
}
}
diff --git a/src/pages/admin/upload/table_picker/controller_admin_table_picker.jsx b/src/pages/admin/upload/table_picker/controller_admin_table_picker.jsx
new file mode 100644
index 0000000..c6406da
--- /dev/null
+++ b/src/pages/admin/upload/table_picker/controller_admin_table_picker.jsx
@@ -0,0 +1,41 @@
+import { useState } from "react";
+import { useSelector, useDispatch } from "react-redux";
+import { useNavigate } from "react-router-dom";
+import { setResult } from "../../../../store/slices/uploadSlice";
+import { uploadPdf } from "../service_admin_upload";
+
+export function useTablePickerController() {
+ const dispatch = useDispatch();
+ const navigate = useNavigate();
+ const [loading, setLoading] = useState(false);
+ const { result } = useSelector((state) => state.upload); // result dari BE upload PDF
+ const [selectedTable, setSelectedTableLocal] = useState(
+ result?.tables?.[0] || null
+ );
+
+ const handleSelectTable = (t) => {
+ setSelectedTableLocal(t);
+ // dispatch(setSelectedTable(t));
+ };
+
+ const handleNext = async () => {
+ if (!selectedTable) return;
+ setLoading(true);
+ try {
+ const res = await uploadPdf(selectedTable);
+ dispatch(setResult(res));
+ navigate("/admin/upload/validate");
+ } catch(err){
+ setLoading(false);
+ throw err
+ }
+ };
+
+ return {
+ loading,
+ result,
+ selectedTable,
+ handleSelectTable,
+ handleNext,
+ };
+}
diff --git a/src/pages/admin/upload/table_picker/views_admin_table_picker.jsx b/src/pages/admin/upload/table_picker/views_admin_table_picker.jsx
new file mode 100644
index 0000000..972604e
--- /dev/null
+++ b/src/pages/admin/upload/table_picker/views_admin_table_picker.jsx
@@ -0,0 +1,112 @@
+import { Navigate } from "react-router-dom";
+import { useTablePickerController } from "./controller_admin_table_picker";
+import LoadingOverlay from "../../../../components/LoadingOverlay";
+
+export default function ViewsAdminTablePicker() {
+ const { loading, result, selectedTable, handleSelectTable, handleNext } =
+ useTablePickerController();
+
+ if (!result) {
+ return Daftar Halaman
-
- {pages.map((p) => (
-
- ))}
-
+
+
-
-
- {/* Konten kanan (viewer) */}
- - Dipilih:{" "} - {selectedPages.length > 0 - ? selectedPages.join(", ") - : "Belum ada halaman"} -
-- Maksimal 3 halaman yang dapat dipilih. -
+ {/* Left Sidebar */} +
+
- Daftar Halaman
+
+ {pages.map((p) => (
+
+ ))}
+
-
-
-
- {pages.map((p) => (
-
- 
-
+
+ {/* Konten kanan (viewer) */}
+ - Halaman {p.pageNum} +
+
+ + Dipilih:{" "} + {selectedPagesLocal.length > 0 + ? selectedPagesLocal.join(", ") + : "Belum ada halaman"}
- - ))} ++ Maksimal 3 halaman yang dapat dipilih. +
+ + +
+
-
+ {pages.map((p) => (
+
+
+
+ ))}
+
+ Halaman {p.pageNum} +
+
+
+ );
+}
diff --git a/src/pages/admin/upload/views_admin_success_upload.jsx b/src/pages/admin/upload/views_admin_success_upload.jsx
index 25665c8..d0fc52e 100644
--- a/src/pages/admin/upload/views_admin_success_upload.jsx
+++ b/src/pages/admin/upload/views_admin_success_upload.jsx
@@ -4,23 +4,19 @@ import { Navigate } from "react-router-dom";
export default function ViewsAdminUploadSuccess() {
const { validatedData } = useSelector((state) => state.upload);
-
+ const geomIcons = {
+ Point: "๐",
+ MultiPoint: "๐น",
+ LineString: "๐",
+ MultiLineString: "๐ฃ๏ธ",
+ Polygon: "โฌ",
+ MultiPolygon: "๐พ",
+ GeometryCollection: "๐งฉ",
+ };
if (!validatedData) {
- // return (
- //
+
+
+ {/* Konten kanan (tabel preview) */}
+ Daftar Tabel
+ +
+ {result.tables.map((t, i) => (
+
+ ))}
+
+
+
+
+ + Dipilih:{" "} + {selectedTable ? `Tabel ${selectedTable.title}` : "Belum ada"} +
+ + +
+
+
+ {selectedTable ? (
+
+
+
+ ) : (
+ + ๐ Tabel {selectedTable.title} +
+ +
+
+
+
+
+
+ | + {col} + | + ))} +
|---|
| + {row[colIdx]} + | + ))} +
+ Menampilkan {Math.min(10, selectedTable.rows.length)} dari{" "} + {selectedTable.rows.length} baris. +
+
+ Tidak ada tabel yang dipilih.
+
+ )}
+
- //
- // );
return โ ๏ธ Tidak Ada Data
- //- // Tidak ditemukan hasil upload yang baru. Silakan unggah data terlebih dahulu. - //
- // - // Kembali ke Halaman Upload - // - //
@@ -57,7 +52,6 @@ export default function ViewsAdminUploadSuccess() {
- {/* Detail List */}
{validatedData.table_name && (
@@ -75,6 +69,18 @@ export default function ViewsAdminUploadSuccess() {
)}
+ {validatedData.geometry_type && (
+
+ ๐งญ Jenis Geometry
+
+ {/* {validatedData.geometry_type.join(", ")} */}
+ {validatedData.geometry_type.map(
+ (g) => `${geomIcons[g] || "โ"} ${g}`
+ ).join(", ")}
+
+
+ )}
+
{validatedData.upload_time && (
๐ Waktu Upload
@@ -90,7 +96,8 @@ export default function ViewsAdminUploadSuccess() {
{validatedData.message && (
)}
diff --git a/src/pages/admin/upload/views_admin_validate_upload.jsx b/src/pages/admin/upload/views_admin_validate_upload.jsx
index b7eb585..0437c97 100644
--- a/src/pages/admin/upload/views_admin_validate_upload.jsx
+++ b/src/pages/admin/upload/views_admin_validate_upload.jsx
@@ -1,14 +1,183 @@
-import { useState, useEffect } from "react";
+// import { useState, useEffect } from "react";
+// import { useUploadController } from "./controller_admin_upload";
+// import { useSelector } from "react-redux";
+// import LoadingOverlay from "../../../components/LoadingOverlay";
+// import Notification from "../../../components/Notification";
+// import ErrorNotification from "../../../components/ErrorNotification";
+// import { Navigate } from "react-router-dom";
+// import FilePreview from "../../../components/upload/FilePreview";
+// import MetadataForm from "../../../components/MetaDataForm";
+
+// export default function ViewsAdminUploadValidate() {
+// const { result, file } = useSelector((state) => state.upload);
+// const {
+// loading,
+// tableTitle,
+// setTableTitle,
+// handleConfirmUpload,
+// } = useUploadController();
+
+// const [showAlert, setShowAlert] = useState(false);
+// const [alertMessage, setAlertMessage] = useState("");
+// const [alertType, setAlertType] = useState("info");
+// const [errorMsg, setErrorMsg] = useState("");
+
+// useEffect(() => {
+// const handleBeforeUnload = (e) => {
+// if (result && !loading) {
+// e.preventDefault();
+// e.returnValue =
+// "Data upload Anda belum disimpan. Jika Anda meninggalkan halaman ini, data akan hilang.";
+// return e.returnValue;
+// }
+// };
+
+// window.addEventListener("beforeunload", handleBeforeUnload);
+// return () => window.removeEventListener("beforeunload", handleBeforeUnload);
+// }, [result, loading]);
+
+// useEffect(() => {
+// const handleNavigation = (e) => {
+// if (result && !loading) {
+// const confirmLeave = window.confirm(
+// "Data upload Anda belum disimpan. Jika Anda meninggalkan halaman ini, data akan hilang."
+// );
+// if (!confirmLeave) {
+// e.preventDefault();
+// window.history.pushState(null, "", window.location.href); // tetap di halaman
+// }
+// }
+// };
+
+// window.addEventListener("popstate", handleNavigation);
+// return () => window.removeEventListener("popstate", handleNavigation);
+// }, [result, loading]);
+
+// const handleMetadataChange = (data) => {
+// console.log("Metadata Updated:", data);
+// };
+
+// // if (!result)
+// // return
- {validatedData.message} + {/* {validatedData.message} */} + Datasets berhasil di upload
Data belum diupload.
;
+
+// if (!result) return
+// {showAlert && (
+// setShowAlert(false)}
+// />
+// )}
+
+// setErrorMsg("")}
+// />
+
+//
+// );
+// }
+
+
+
+
+
+
+ // โ Validasi & Konfirmasi Data
+ +//
+//
+// setTableTitle(e.target.value)}
+// placeholder="Masukkan judul tabel..."
+// className={`w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 ${
+// !tableTitle ? "border-red-400" : ""
+// }`}
+// />
+//
+// Judul akan dijadikan nama tabel pada database
+//
+//
+
+// {result &&
+//
+
+//
+//
+//
+ //
+
+
+
+
+import { useEffect, useState } from "react";
import { useUploadController } from "./controller_admin_upload";
import { useSelector } from "react-redux";
+import { Navigate } from "react-router-dom";
+
import LoadingOverlay from "../../../components/LoadingOverlay";
import Notification from "../../../components/Notification";
import ErrorNotification from "../../../components/ErrorNotification";
-import { Navigate } from "react-router-dom";
+import MetadataForm from "../../../components/MetaDataForm";
import FilePreview from "../../../components/upload/FilePreview";
+// shadcn accordion (pastikan path sesuai proyekmu)
+import {
+ Accordion,
+ AccordionItem,
+ AccordionTrigger,
+ AccordionContent,
+} from "../../../components/ui/accordion";
+
export default function ViewsAdminUploadValidate() {
- const { result, file } = useSelector((state) => state.upload);
+ const { result } = useSelector((state) => state.upload);
const {
loading,
tableTitle,
@@ -16,67 +185,58 @@ export default function ViewsAdminUploadValidate() {
handleConfirmUpload,
} = useUploadController();
+ const [errorMsg, setErrorMsg] = useState("");
const [showAlert, setShowAlert] = useState(false);
const [alertMessage, setAlertMessage] = useState("");
const [alertType, setAlertType] = useState("info");
- const [errorMsg, setErrorMsg] = useState("");
- useEffect(() => {
- const handleBeforeUnload = (e) => {
- if (result && !loading) {
- e.preventDefault();
- e.returnValue =
- "Data upload Anda belum disimpan. Jika Anda meninggalkan halaman ini, data akan hilang.";
- return e.returnValue;
- }
- };
+ // Local state: index tabel yg dipilih (default 0)
+ const [selectedIndex, setSelectedIndex] = useState(0);
+ // Metadata form state is emitted via onChange from MetadataForm; simpan jika perlu
+ const [metadata, setMetadata] = useState(null);
- window.addEventListener("beforeunload", handleBeforeUnload);
- return () => window.removeEventListener("beforeunload", handleBeforeUnload);
- }, [result, loading]);
-
- useEffect(() => {
- const handleNavigation = (e) => {
- if (result && !loading) {
- const confirmLeave = window.confirm(
- "Data upload Anda belum disimpan. Jika Anda meninggalkan halaman ini, data akan hilang."
- );
- if (!confirmLeave) {
- e.preventDefault();
- window.history.pushState(null, "", window.location.href); // tetap di halaman
- }
- }
- };
-
- window.addEventListener("popstate", handleNavigation);
- return () => window.removeEventListener("popstate", handleNavigation);
- }, [result, loading]);
-
- // if (!result)
- // return Data belum diupload.
;
-
+ // Guard: jika tidak ada result -> kembalikan ke halaman upload
if (!result) return
+
+ {/* Alerts */}
{showAlert && (
setShowAlert(false)}
/>
)}
-
- setErrorMsg("")}
- />
-
+ setErrorMsg("")} />
+
+
+ ๐ Dataset 1
+
- {result &&
+
+
+
);
}
diff --git a/src/routes/AppRouter.jsx b/src/routes/AppRouter.jsx
index d715afe..dd46e81 100644
--- a/src/routes/AppRouter.jsx
+++ b/src/routes/AppRouter.jsx
@@ -103,6 +103,7 @@ import ViewsAdminHome from "../pages/admin/home/views_admin_home";
import ViewsAdminUploadStep1 from "../pages/admin/upload/views_admin_upload";
import ViewsAdminUploadValidate from "../pages/admin/upload/views_admin_validate_upload";
import ViewsAdminPdfViewer from "../pages/admin/upload/pdf_viewer/views_admin_pdf_viewer";
+import ViewsAdminTablePicker from "../pages/admin/upload/table_picker/views_admin_table_picker";
import ViewsAdminUploadSuccess from "../pages/admin/upload/views_admin_success_upload";
import ViewsAdminPublikasi from "../pages/admin/publikasi/views_admin_publikasi";
import ViewsAdminUploadRules from "../pages/admin/upload/rules/views_admin_rules_upload";
@@ -129,6 +130,7 @@ const router = createBrowserRouter(
{ path: "upload", element: โ Validasi & Konfirmasi Data
-
-
- setTableTitle(e.target.value)}
- placeholder="Masukkan judul tabel..."
- className={`w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 ${
- !tableTitle ? "border-red-400" : ""
- }`}
- />
-
- Judul akan dijadikan nama tabel pada database
-
-
+ {/* SINGLE ACCORDION */}
+
+ {/* LEFT: tabel preview (6 kolom pada layout 12) */}
+
+
+ {/* ACTIONS di bawah accordion content */}
+
+
- ๐งพ Cuplikan Data
+
+
+
+
+
-
+ {/* RIGHT: metadata form (6 kolom) */}
+ setMetadata(data)}/>
+
+
+
+
+ {/* MetadataForm menyimpan hasil ke parent via onChange */}
+ ๐งพ Metadata
- -
+
+
+
+
+ {/* optional: show metadata summary brief */}
+ {metadata && (
+
+
+ Metadata siap โ preview: {metadata.title || "-"}
+
+ )}
+
+
+