AquaSmart AI

Platform Cloud Aquaculture & Manajemen Sewa Lahan berbasis Artificial Intelligence untuk prediksi pertumbuhan, optimasi pakan, dan analisis risiko mortalitas.

---

Tentang AquaSmart AI

AquaSmart AI adalah platform digital yang memungkinkan investor menyewa kolam budidaya ikan air tawar yang dikelola oleh teknisi lapangan berpengalaman dan dipantau oleh kecerdasan buatan — kapan saja, dari mana saja. Platform ini dirancang untuk sektor UMKM perikanan Indonesia, menggabungkan manajemen kolam, prediksi pertumbuhan ikan, optimasi dosis pakan, dan analisis risiko mortalitas dalam satu ekosistem cloud, tanpa memerlukan perangkat IoT tambahan yang mahal.

Sistem menerapkan tiga peran akses (RBAC): Manajer Tambak, Investor/Penyewa, dan Teknisi Lapangan, masing-masing dengan dashboard dan kemampuan yang disesuaikan kebutuhannya.

Catatan: Versi saat ini menggunakan autentikasi & data tersimpan di localStorage untuk kebutuhan prototype/demo. Tidak ada backend — cocok untuk demo & kompetisi, belum untuk produksi.

Fitur Utama

• Landing page publik dengan marketplace kolam & simulasi pembayaran QRIS.
• Akun demo untuk 3 peran (Manajer Tambak, Investor, Teknisi Lapangan) — lihat Demo Accounts.
• Manajer Tambak: manajemen kolam (CRUD), kelola akun Teknisi Lapangan, AI Prakiraan Panen, laporan PDF otomatis, monitoring kualitas air (DO, pH, suhu, salinitas), optimasi jadwal pakan.
• Investor: marketplace 6 kolam ikan aktif, dashboard portofolio real-time, laporan keuangan & estimasi ROI per siklus panen.
• Teknisi Lapangan: input data kualitas air harian, status kolam, dashboard tugas.
• Model AI XGBoost untuk prediksi pertumbuhan berat ikan & estimasi waktu panen, serta Random Forest untuk klasifikasi risiko mortalitas dan rekomendasi keputusan.
• PWA — installable di homescreen HP/desktop dengan dukungan offline dasar.

Struktur Halaman

Route	Keterangan	Akses
/	Landing page publik	Publik
/marketplace	Marketplace kolam ikan	Publik
/marketplace/:id	Detail kolam	Publik
/payment/:id	Simulasi pembayaran QRIS	Publik
/login	Login akun demo/lokal	Publik
/signup	Pendaftaran akun	Publik
/dashboard	Overview & ringkasan operasional	Protected
/dashboard/ponds	Manajemen kolam budidaya	Protected
/dashboard/analytics	AI Analytics & prediksi	Protected
/dashboard/feed	Optimasi pakan	Protected
/dashboard/reports	Laporan & unduhan PDF	Protected
/dashboard/teknisi	Kelola akun Teknisi Lapangan	Protected (Manajer)
/dashboard/settings	Pengaturan akun & aplikasi	Protected

Arsitektur Aplikasi

flowchart TD
    A[Pengguna] --> B[Landing Page]
    B --> C[Marketplace Kolam]
    B --> D{Sudah login?}
    D -->|Tidak| E[Login / Signup]
    D -->|Ya| F[Dashboard Sesuai Role]
    E --> G[RoleContext]
    G --> H[(localStorage)]
    H --> I[Sesi Persisten]
    I --> B

    F --> J{Role?}
    J -->|Manajer Tambak| K[Pond Management]
    J -->|Investor| L[Portfolio & ROI]
    J -->|Teknisi Lapangan| M[Input Kualitas Air]

    K --> N[AI Engine]
    N --> O[XGBoost - Prediksi Pertumbuhan]
    N --> P[Random Forest - Risiko Mortalitas]
    O --> Q[Dashboard Prediksi Panen]
    P --> R[Rekomendasi & Peringatan Dini]
    M --> N

Loading

Alur Autentikasi & RBAC

sequenceDiagram
    participant U as User
    participant F as Auth Form
    participant R as RoleContext
    participant S as localStorage
    participant D as Dashboard

    U->>F: Isi email dan password
    F->>R: login(email, password)
    R->>S: Cocokkan akun demo/lokal
    S-->>R: Kredensial & role ditemukan
    R->>S: Simpan sesi + role aktif
    R-->>F: Login berhasil
    F->>D: Redirect ke dashboard sesuai role
    D->>S: Baca sesi saat hydration
    S-->>D: Role terdeteksi
    D-->>U: Tampilkan menu & fitur sesuai role

Loading

Tech Stack

Layer	Teknologi
Framework	React 18 + TypeScript
Routing	React Router v7
Styling	Tailwind CSS v4
UI Components	shadcn/ui (Radix UI)
Grafik	Recharts
Notifikasi	Sonner (Toast)
Build Tool	Vite 6
Package Manager	pnpm
AI/ML (model)	XGBoost, Random Forest
Database (desain)	PostgreSQL via Supabase
Deployment	Vercel
Penyimpanan prototype	Browser localStorage

Demo Accounts

Akun berikut sudah di-seed otomatis ke localStorage saat pertama kali membuka aplikasi:

Role	Email	Password
Manajer Tambak	manajer@aqua.id	manajer123
Manajer Tambak	manajer2@aqua.id	manajer123
Investor	investor@aqua.id	investor123
Investor	investor2@aqua.id	investor123
Teknisi Lapangan	teknisi@aqua.id	teknisi123
Teknisi Lapangan	teknisi2@aqua.id	teknisi123

Persyaratan

• Node.js 18 atau lebih baru
• pnpm
• Browser modern dengan dukungan localStorage

Instalasi

# 1. Clone repo
git clone https://github.com/Maventlabs/AquaSmart.git
cd AquaSmart

# 2. Install dependencies
pnpm install

# 3. Jalankan dev server
npx vite

Buka http://localhost:5173 di browser.

Script

pnpm install     # Install dependencies
npx vite         # Menjalankan development server
pnpm run build   # Membuat production build (output di dist/)

Deploy ke Vercel

Via Vercel Dashboard (direkomendasikan)

1. Push kode ke GitHub.
2. Buka vercel.com → Add New Project → Import repo.
3. Konfigurasi:
   • Framework Preset: Vite
   • Build Command: vite build
   • Output Directory: dist
4. Klik Deploy.

Via Vercel CLI

npm i -g vercel
vercel --prod

File vercel.json sudah disertakan di repo untuk menangani SPA routing — semua URL (misal /login, /dashboard) akan diarahkan ke index.html tanpa error 404.

PWA (Progressive Web App)

Aplikasi ini sudah dikonfigurasi sebagai PWA:

• Offline support — halaman di-cache oleh Service Worker.
• Installable — dapat dipasang di homescreen HP/desktop.

Setelah deploy ke Vercel, buka di Chrome mobile → akan muncul prompt "Tambahkan ke Layar Utama".

Struktur Folder

src/
├── app/
│   ├── components/            # Feature components
│   │   ├── Dashboard.tsx      # Dashboard utama
│   │   ├── Marketplace.tsx    # Marketplace kolam
│   │   ├── LandingPage.tsx    # Landing page publik
│   │   ├── AuthPage.tsx       # Login
│   │   ├── SignUpPage.tsx     # Registrasi
│   │   ├── KelolaSteknisi.tsx # Manajemen teknisi
│   │   └── ui/                # shadcn/ui primitives
│   ├── contexts/
│   │   └── RoleContext.tsx    # Auth + RBAC context
│   ├── routes.tsx             # React Router config
│   └── Root.tsx                # Dashboard layout (sidebar + header)
└── styles/
    ├── index.css               # Entry CSS
    ├── theme.css                # Design tokens (Tailwind @theme)
    ├── fonts.css                 # Google Fonts
    └── tailwind.css               # Custom utilities

Keamanan dan Batasan Prototype

• Password akun tersimpan di browser (localStorage), sehingga tidak cocok untuk produksi.
• localStorage bersifat per-browser dan per-device.
• Menghapus site data/browser storage akan menghapus akun & sesi lokal.
• Sesi tidak memiliki idle timeout dan hanya berakhir saat logout atau storage dihapus.
• Untuk produksi, migrasikan autentikasi ke backend dengan hashing password, session cookie HttpOnly, validasi server, rate limiting, dan database (mis. PostgreSQL/Supabase).
• Jangan menaruh secret/API key di source code.

Kontribusi

1. Buat branch fitur baru.
2. Jalankan pnpm run build untuk memastikan tidak ada error build.
3. Pastikan perubahan tetap responsif dan accessible.
4. Buat pull request dengan ringkasan perubahan dan cara pengujian.

Lisensi

Proyek ini dilisensikan di bawah MIT License.

---

Made with ❤️ for Indonesian aquaculture