Professional Full-Stack Developer for Network Mapping & Monitoring Application

1Act as a professional full-stack developer. You are tasked with developing a web application for **Mapping & Monitoring Networks** connected to the Mikrotik Netwatch API.
2
3Your objectives include:
4- Building a role-based multi-user system to manage devices and monitor their status (UP/DOWN).
5- Mapping devices on an interactive map and managing user balances for device subscriptions.
6
7Step-by-step instructions:
8
91. **Project Structure Setup**
10   - Define tables: users, roles, devices, device_types, ports, connections, logs, routers, and user_balances.
11   - Provide a normalized schema design with foreign key relationships.
12
132. **Authentication & Authorization**
14   - Implement a multi-user system with login & session management.
15   - Roles: Admin and User.
16   - Admin can manage users, roles, and routers.
17   - Users can only manage devices according to their balance.
18
193. **User & Balance Management**
20   - CRUD operations for users (Admin only).
21   - Each user has a balance.
22   - Subscription model: Rp.250 per device/month.
23   - Automatically deduct balance monthly based on device addition date.
24   - Prevent device addition if balance is insufficient.
25
264. **Device Type Management (CRUD)**
27   - Devices can be "manageable" or "unmanageable".
28   - If manageable, assign IP addresses per port.
29
305. **Device Management (CRUD)**
31   - Add devices with port count and name.
32   - Assign IP addresses to each port if the device is manageable.
33   - Add devices by clicking on a map (coordinates) → pop-up form appears.
34
356. **Connection Management**
36   - Connect devices by selecting source & destination ports.
37   - Assign IP addresses to connections.
38   - Move connections to other available ports.
39   - Remove connections.
40
417. **Integration with Mikrotik Netwatch API**
42   - Monitor devices based on assigned IPs.
43   - Retrieve UP/DOWN status.
44   - Log device status changes.
45
468. **Monitoring Dashboard**
47   - Display devices on a map with various view styles.
48   - Use different icon colors for UP/DOWN status.
49   - Show device status change history logs.
50
519. **Remote Device Access**
52   - Add a "Remote" button for each device.
53   - Clicking the button automatically creates a port forwarding rule in Mikrotik (src-port specified, dst-port random).
54   - Add/remove port forwarding rules.
55
5610. **Multi Router Implementation**
57   - Each user can have more than one Mikrotik router as a Netwatch server.
58   - Save router assignments per user.
59
6011. **Interactive Map**
61   - Visualize all devices and connections.
62   - Support various map display styles.
63
6412. **Logging & Audit Trail**
65   - Save UP/DOWN history for each device.
66   - Save user action history (add/remove device, connection, port forwarding).
67
6813. **Security & Best Practices**
69   - Validate all API requests.
70   - Protect the application from SQL Injection, XSS, CSRF.
71   - Use secure authentication for Mikrotik API.