Insekta Dashboard

Pendahuluan

Insekta Dashboard adalah aplikasi web berbasis MERN Stack (MongoDB, Express, React, Node.js) yang berfungsi sebagai portal manajemen layanan Pest & Termite Control. Aplikasi ini memfasilitasi komunikasi data antara Admin (PT Insekta Fokustama) dan Client (Perusahaan rekanan).

Live Demo

• Link Website: https://insekta-dashboard-web-app.vercel.app
• Login sebagai admin:
  • Email: unotobio@gmail.com
  • Password: admin12345
• Login sebagai client:
  • Email: juwonoindonesia@gmail.com
  • Password: juwono123

Tech Stack

Backend

• Runtime: Node.js
• Framework: Express.js
• Database: MongoDB (via Mongoose ODM)
• Authentication: JWT (JSON Web Token)
• Image Processing: Multer (Memory Storage) + Sharp (Compression/Resize)
• Storage: Cloudinary (CDN untuk Image & Icons)
• Email Service: Nodemailer (SMTP)

Frontend

• Framework: React.js (Vite)
• Styling: Tailwind CSS + DaisyUI
• State Management: Redux Toolkit (untuk Auth State)
• Routing: React Router DOM v6
• HTTP Client: Axios (dengan Interceptors)
• Icons: React Icons (Feather, Boxicons)
• Notifications: React Hot Toast

Fitur Utama

Role & Authentication

• Dashboard Admin: Memiliki akses penuh (CRUD) ke seluruh data.
• Dashboard Client: Hanya memiliki akses "Read-Only" ke data yang di-assign khusus untuk mereka.
• Keamanan:
  • Proteksi Route (Protected Routes).
  • Auto Logout saat sesi habis (Axios Interceptor).
  • Fitur Reset Password aman dengan token hash & expiry time.

Modul Fitur (Core Features)

• User Management: Admin dapat membuat akun client, menetapkan nama perusahaan, dan reset password.
• Feature Management (Menu Dinamis):
  • Admin dapat membuat menu dashboard custom.
  • Logic Assignment: Menu bisa di-assign ke spesifik client atau grup perusahaan.
  • Mendukung tipe single link atau folder (submenu) dan dapat memuat berbagai jenis link dari mulai spreadsheet, docs, pdf, chart, sampai dengan folder.
• Team Management (Tim Insekta):
  • Daftar teknisi/supervisor.
  • Filter visibilitas: Admin menentukan teknisi mana yang terlihat oleh client tertentu.
• Banner Info & Promo:
  • Slider informasi dengan gambar background dan overlay text.
  • Support link eksternal.
• Kanal Insekta (Web Portal):
  • Menampilkan preview website/dashboard eksternal (via Iframe).
  • Deteksi otomatis website yang memblokir iframe (X-Frame-Options) dengan Fallback UI.
• Data Grafik: Integrasi preview Google Sheet Charts.
• Responsive design di berbagai perangkat (mobile, tablet, desktop)
• Pagination, Lazy Loading, search, filter, sort di beberapa halaman (admin dan client).
• Login dengan role-based authentication.
• Forgot password dan reset password.

Setup Aplikasi

• buat file .env di dalam folder server:

PORT=5000
MONGO_URI=YOUR_MONGODB_URI
JWT_SECRET=YOUR_JWT_SECRET
EMAIL_USER=YOUR_USER_EMAIL
EMAIL_PASS=OUR_APP_PASSWORD_EMAIL
CLIENT_URL=YOUR_CLIENT_URL

CLOUDINARY_CLOUD_NAME=YOUR_CLOUDINARY_NAME
CLOUDINARY_API_KEY=YOUR_CLOUDINARY_API_KEY
CLOUDINARY_API_SECRET=YOUR_CLOUDINARY_API_SECRET

NODE_ENV=development

Screenshot Web App

Halaman Login

Halaman Forgot Password

Halaman Reset Password

Halaman Dashboard Admin (Dashboard)

Halaman Dashboard Admin (Feature Management)

Halaman Dashboard Client

Team Member

• Juwono (https://www.linkedin.com/in/juwono136/)