🚀 Web Upload Automation Platform

Sistem Web untuk otomasi unggah file dan publikasi data berbasis React + Vite.

---

📦 Teknologi yang Digunakan

Layer	Stack
Frontend	React + Vite + TailwindCSS + React Router v6
State Management	Redux Toolkit
HTTP Client	Axios (dengan interceptor JWT)
Auth	JWT Token (disimpan di LocalStorage)
Backend	FastAPI (terpisah dari repo ini)
Database	PostgreSQL + PostGIS

---

⚙️ Fitur Utama

🔑 Autentikasi

• Login menggunakan JWT token.
• Token disimpan di localStorage agar tetap login selama belum kadaluarsa.
• Proteksi route admin via ProtectedRoute.

🧩 Upload File (Multi Format)

• Dukungan drag & drop area (FileDropzone).
• Mendukung berbagai format:
  • .zip (Shapefile / Geodatabase)
  • .csv / .xlsx
  • .pdf

🔍 Analisis & Validasi Data

• Backend menganalisis isi file (misalnya memvalidasi koordinat atau ejaan wilayah).
• Hasil analisis ditampilkan sebagai preview data dan warning table:
  • DataPreview.jsx menampilkan:
    • Cuplikan data (max 5 baris)
    • Data dengan ejaan tidak valid (jika ada)

🧾 Validasi & Upload ke Database

• User memberi judul tabel sebelum disimpan ke PostGIS.
• Validasi input:
  • Jika belum mengisi judul → notifikasi Tailwind muncul.
• Konfirmasi sebelum meninggalkan halaman (peringatan bawaan browser).
• Saat disimpan → hasil dari backend ditampilkan di halaman sukses.

🧠 Dashboard Admin

• Navigasi menggunakan AdminLayout dengan navbar di atas.
• Halaman admin:
  • /admin/home – Dashboard utama
  • /admin/upload – Form upload & validasi
  • /admin/publikasi – Manajemen publikasi

---

🧭 Alur Upload File

1️⃣ Upload Step

User mengunggah file (drag & drop atau pilih manual).
→ dikirim ke backend /upload
→ backend mengembalikan result (kolom, preview, warning, dll.)

2️⃣ Validasi Step

User:

• Melihat hasil preview dan warning.
• Mengisi “Judul Tabel”.
• Klik “Upload ke Database”.
  → dikirim ke backend /upload_to_postgis.

3️⃣ Success Step

Response backend disimpan ke Redux (validatedData), lalu:

• Ditampilkan di halaman sukses /admin/upload/success.
• Menampilkan ringkasan hasil:
  • Nama tabel
  • Jumlah baris
  • Waktu upload
  • Pesan backend
  • Metadata tambahan (jika ada)

---

⚡ Instalasi & Menjalankan

1️⃣ Clone Repository

git clone https://github.com/yourusername/upload-automation.git
cd upload-automation

2️⃣ Install Dependencies

npm install

3️⃣ Jalankan Server Development

npx vite

4️⃣ (Opsional) Build untuk Produksi

npm run build

---

🔐 Konfigurasi Lingkungan (.env)

Buat file .env di root proyek dan tambahkan:

VITE_API_URL=http://localhost:8000

Lalu di api.js:

baseURL: import.meta.env.VITE_API_URL

---

🧩 Contoh Respons Backend

/upload (POST)

{
  "file_type": ".pdf",
  "columns": ["id", "nama_desa", "kecamatan", "kabupaten"],
  "preview": [
    { "id": 1, "nama_desa": "Kedungrejo", "kecamatan": "Waru", "kabupaten": "Sidoarjo" }
  ],
  "geometry_valid": 120,
  "geometry_empty": 3,
  "warning_examples": [
    { "nama_desa": "Kedung Rejo", "kecamatan": "waru", "kabupaten": "Sidoarjo" }
  ]
}

/upload_to_postgis (POST)

{
  "table_name": "data_wilayah_valid",
  "total_rows": 123,
  "upload_time": "2025-10-28T10:14:00Z",
  "message": "Data berhasil disimpan ke PostGIS.",
  "metadata": {
    "user": "admin",
    "database": "geosystem",
    "duration": "1.2s"
  }
}

---

🧑‍💻 Pengembang

Nama: Dimas Anhar
Project: Web Upload & Validation Automation Platform Tujuan: Sistem Otomatisasi Unggah dan Validasi Data Geospasial

---

💬 Catatan

• Pastikan backend FastAPI berjalan di localhost:8000.
• File besar (PDF/ZIP > 50MB) sebaiknya diunggah melalui koneksi stabil.

---

🧠 Rencana Pengembangan Selanjutnya

• ✅ Pagination untuk tabel preview
• ✅ Progress bar upload file
• 🔄 Refresh token otomatis JWT
• 🗂️ Manajemen file hasil upload
• 🌐 Publikasi hasil ke GeoServer/GeoNetwork

---

🏁 Lisensi

MIT License © 2025 — Dimas Anhar