NextMik — Sistem Billing & Manajemen Radius MikroTik

Dashboard manajemen billing, hotspot, PPPoE, dan pengguna MikroTik. Dibangun dengan Next.js, Tailwind CSS, Prisma, dan RouterOS API.

Bahasa UI: Indonesia

Fitur

• Dashboard — ringkasan pendapatan, router aktif, pengguna hotspot/PPPoE, grafik
• Manajemen Router — CRUD router (modal form), test koneksi Ping, status online/offline
• Manajemen Hotspot — CRUD pengguna, profil, monitoring pengguna aktif, generator voucher massal
• Manajemen PPPoE — CRUD akun, profil, putuskan koneksi aktif
• Billing & Transaksi — log penjualan voucher, laporan harian/mingguan/bulanan
• Multi-Router — kelola banyak perangkat MikroTik dari satu dashboard
• Otentikasi — NextAuth.js (credentials), middleware proteksi halaman

Tech Stack

Layer	Tech
Framework	Next.js 16 (App Router, TypeScript, Turbopack)
Styling	Tailwind CSS v3 (TailAdmin template)
Database	PostgreSQL + Prisma ORM v5
RouterOS API	@fibercom/routeros-api (koneksi TCP via port API MikroTik)
Auth	NextAuth.js v4 (Credentials Provider) + middleware
State	Zustand v4
Lint	ESLint v9 (flat config)
Audit	audit-ci dengan allowlist

Prasyarat

• Node.js 20+
• PostgreSQL 14+
• Perangkat MikroTik RouterOS v7+ dengan API aktif (port 8728)

Mulai Cepat

# install
npm install

# setup env
cp .env.example .env
# edit DATABASE_URL, NEXTAUTH_SECRET

# database
npx prisma db push
npx prisma db seed

# jalankan
npm run dev

Buka http://localhost:5050.

Login Default

Email	Kata Sandi
admin@nextmik.local	admin

Halaman login di /login. Semua halaman dashboard dilindungi middleware — redirect ke /login jika belum login.

Environment

DATABASE_URL="postgresql://user:password@localhost:5432/nextmik?schema=public"
NEXTAUTH_SECRET="generate-a-random-secret"
NEXTAUTH_URL="http://localhost:5050"
PORT=5050

Scripts

Script	Keterangan
npm run dev	Jalankan dev server (PORT default 5050)
npm run build	Build produksi
npm run start	Jalankan server produksi (default 5050)
npm run lint	ESLint (konfigurasi Next.js)
npm run audit	npm audit dengan allowlist (audit-ci)
npm run db:push	Push skema Prisma ke DB
npm run db:seed	Seed user admin
npm run db:migrate	Jalankan migrasi Prisma
npm run db:studio	Buka Prisma Studio
npm run db:generate	Regenerasi Prisma client

Audit Keamanan

Vulnerabilitas yang tersisa adalah false positive atau tidak bisa diperbaiki, diallowlist di .audit-ci.json:

Advisory	Package	Alasan
GHSA-2p57-rm9w-gvfp	ip (via @fibercom/routeros-api)	SSRF di isPublic() — ip cuma dipakai untuk DHCP CIDR math, bukan klasifikasi IP

npm run audit harus exit 0.

Docker

Docker Compose (disarankan)

docker compose up -d --build

Service	Port	Image
app	5050	Next.js (Node 22)
db	5432	PostgreSQL 16 Alpine

Ganti port host: APP_PORT=3000 docker compose up -d

Perintah

docker compose up -d              # mulai
docker compose down               # berhenti
docker compose logs -f app        # log
docker compose exec app npx prisma db push   # migrasi
docker compose exec app npx prisma db seed   # seed admin
docker compose exec db psql -U postgres -d nextmik  # psql

Build Manual

docker build -t nextmik .
docker run -p 5050:5050 --env-file .env nextmik

Setup Router MikroTik

Aktifkan API di perangkat MikroTik (RouterOS v7+):

/ip service set api address=0.0.0.0/0 port=8728
/ip service set api-ssl address=0.0.0.0/0 port=8729 disabled=no

Tambah router di dashboard dengan IP, port, username, password. Centang SSL jika pakai TLS.

Struktur Proyek

nextmik/
├── middleware.ts                 # Proteksi auth (redirect ke /login)
├── .audit-ci.json               # Allowlist audit
├── .env.example                 # Template environment
├── Dockerfile                   # Multi-stage (Node 22)
├── docker-compose.yml           # App + PostgreSQL
├── eslint.config.mjs            # ESLint flat config (v9)
├── next.config.js               # Konfigurasi Next.js (standalone output)
├── package.json
├── tailwind.config.ts
├── tsconfig.json
│
├── app/
│   ├── layout.tsx               # Root layout
│   ├── globals.css              # Tailwind base
│   ├── login/page.tsx           # Halaman login (tanpa sidebar)
│   ├── (dashboard)/
│   │   ├── layout.tsx           # Pembungkus Sidebar + Header
│   │   ├── page.tsx             # Dashboard utama
│   │   ├── routers/
│   │   │   └── page.tsx         # Daftar router + modal tambah/edit + hapus
│   │   ├── hotspot/
│   │   │   ├── page.tsx         # Pengguna hotspot
│   │   │   ├── profiles/page.tsx
│   │   │   └── active/page.tsx  # Hotspot aktif
│   │   ├── pppoe/
│   │   │   ├── page.tsx         # Akun PPPoE
│   │   │   ├── profiles/page.tsx
│   │   │   └── active/page.tsx  # PPPoE aktif
│   │   └── billing/
│   │       ├── page.tsx         # Transaksi
│   │       └── reports/page.tsx # Laporan
│   └── api/
│       ├── auth/[...nextauth]/route.ts
│       ├── routers/
│       │   ├── route.ts         # GET daftar, POST tambah router
│       │   ├── [id]/route.ts    # PATCH edit, DELETE hapus router
│       │   └── test-connection/route.ts  # POST test koneksi
│       ├── hotspot/active/route.ts
│       └── pppoe/active/route.ts
│
├── components/layout/
│   ├── Sidebar.tsx              # Sidebar collapsible, child expandable (B. Indonesia)
│   └── Header.tsx               # Navbar dengan tombol Keluar
│
├── lib/
│   ├── mikrotik.ts              # Service @fibercom/routeros-api
│   ├── prisma.ts                # Prisma client singleton
│   └── auth.ts                  # Konfigurasi NextAuth credentials
│
├── prisma/
│   ├── schema.prisma            # 10 model
│   └── seed.ts                  # Seed user admin
│
├── store/index.ts               # Zustand (sidebar + dashboard)
├── types/
│   ├── index.ts                 # Tipe data MikroTik
│   └── next-auth.d.ts           # Augmentasi session
│
└── public/

Lisensi

MIT