ui: add protected dashboard CRUD screens and assignment docs

2026-04-29 18:10:31 +07:00 · 2026-04-29 18:10:31 +07:00 · cb0d4d7809
commit cb0d4d7809
parent bf42037619
24 changed files with 2662 additions and 101 deletions
--- a/docs/report-outline.md
+++ b/docs/report-outline.md
@ -0,0 +1,112 @@
+# Report Outline (BAB 1–4)
+
+## BAB 1 - Pendahuluan
+
+### 1.1 Latar Belakang
+
+- Importance of structured server documentation and monitoring
+- Need for a simple admin dashboard for managing private servers and hosted services
+
+### 1.2 Rumusan Masalah
+
+- How to manage server data, services, domains, and internal notes in one web app?
+- How to check whether a domain resolves to the expected server IP automatically?
+
+### 1.3 Batasan Masalah
+
+- CRUD + monitoring dashboard only
+- No SSH, no Docker orchestration, no real deployment automation
+- DNS checking limited to A record / IPv4
+- Single admin login
+
+### 1.4 Tujuan
+
+- Build a web-based dashboard for private server service management
+- Provide simple DNS verification and summary monitoring
+
+### 1.5 Manfaat
+
+- Helps admins manage server and service records
+- Helps students understand CRUD, relationships, and monitoring concepts
+
+## BAB 2 - Tinjauan Pustaka
+
+### 2.1 Web-Based Information Systems
+
+### 2.2 CRUD Concept
+
+### 2.3 Monitoring Dashboard Concept
+
+### 2.4 DNS and A Record Resolution
+
+### 2.5 Technologies Used
+
+- React
+- TanStack Router
+- tRPC
+- PostgreSQL
+- Drizzle ORM
+- better-auth
+- Effect
+
+## BAB 3 - Analisis dan Perancangan Sistem
+
+### 3.1 Analisis Kebutuhan
+
+- Functional requirements
+- Non-functional requirements
+
+### 3.2 Perancangan Sistem
+
+- Use case diagram
+- Class diagram
+- Activity diagram
+- State chart
+- Sequence diagram
+- Collaboration diagram
+
+### 3.3 Perancangan Database
+
+- Server table
+- Service table
+- Domain table
+- Note table
+- Auth tables
+
+### 3.4 Perancangan Antarmuka
+
+- Login page
+- Dashboard page
+- Server list/detail/form
+- Service list/detail/form
+- Domain list/detail/form
+- Note list/detail/form
+
+## BAB 4 - Implementasi dan Pengujian
+
+### 4.1 Implementasi Sistem
+
+- Backend implementation
+- Frontend implementation
+- Authentication implementation
+- DNS check implementation
+
+### 4.2 Pengujian
+
+- Login test
+- CRUD server test
+- CRUD service test
+- CRUD domain test
+- CRUD note test
+- DNS check test
+- Dashboard summary test
+
+### 4.3 Hasil Pengujian
+
+- Tables/screenshots of successful scenarios
+
+### 4.4 Evaluasi
+
+- Strengths of the system
+- Current limitations
+- Suggested future improvements
--- a/docs/run-instructions.md
+++ b/docs/run-instructions.md
@ -0,0 +1,85 @@
+# Run Instructions
+
+## Project Description
+
+Minmon is a student-friendly web dashboard for managing private servers, their hosted services, related domains, and server notes. It focuses on CRUD operations plus simple DNS monitoring, not deployment automation.
+
+## Main Features
+
+- Admin login with better-auth
+- Dashboard summary for servers, services, domains, DNS status, and inactive services
+- Server CRUD
+- Service CRUD
+- Domain CRUD
+- DNS A-record check with match/mismatch/unresolved result
+- Server note/documentation CRUD
+- Sample seed data for demo use
+
+## Local Setup
+
+1. Install dependencies
+
+```bash
+bun install
+```
+
+2. Prepare environment file at `apps/server/.env`
+
+Example values:
+
+```env
+DATABASE_URL=postgresql://postgres:postgres@localhost:5432/minmon
+BETTER_AUTH_SECRET=your-32-char-or-longer-secret-value-here
+BETTER_AUTH_URL=http://localhost:3000
+CORS_ORIGIN=http://localhost:5173
+NODE_ENV=development
+```
+
+3. Start PostgreSQL if needed
+
+```bash
+bun run db:start
+```
+
+4. Apply schema
+
+```bash
+bun run db:push
+```
+
+5. Seed sample data
+
+```bash
+bun run --filter @minmon/db db:seed
+```
+
+Seeded admin login:
+
+- Email: `admin@minmon.local`
+- Password: `admin12345`
+
+6. Run the apps
+
+```bash
+bun run dev
+```
+
+7. Open the app
+
+- Web: `http://localhost:5173`
+- API: `http://localhost:3000`
+
+## Helpful Commands
+
+```bash
+bun run check-types
+bun run db:push
+bun run db:studio
+bun run --filter web check-types
+bun run --filter server check-types
+```
+
+## Notes
+
+- Full workspace typecheck may still fail because of a pre-existing `apps/desktop` typing issue for `three`.
+- The dashboard app itself, server app, DB push, and DB seed are verified.
--- a/docs/uml-guidance.md
+++ b/docs/uml-guidance.md
@ -0,0 +1,146 @@
+# UML Guidance
+
+## 1. Use Case Diagram
+
+### Main Actor
+
+- Admin
+
+### Main Use Cases
+
+- Login
+- View dashboard summary
+- Manage servers
+- Manage services
+- Manage domains
+- Check DNS for domain
+- Manage server notes
+- Logout
+
+## 2. Class Diagram
+
+### Main Classes / Entities
+
+#### Server
+
+- id
+- name
+- primaryIpAddress
+- secondaryIpAddress
+- operatingSystem
+- location
+- provider
+- description
+- status
+- createdAt
+- updatedAt
+
+#### Service
+
+- id
+- serverId
+- name
+- type
+- internalPort
+- externalPort
+- protocol
+- status
+- description
+- createdAt
+- updatedAt
+
+#### Domain
+
+- id
+- serviceId
+- name
+- expectedServerIp
+- lastResolvedIp
+- lastResolvedIps
+- resolutionStatus
+- lastCheckedAt
+- remarks
+- lastCheckMessage
+- createdAt
+- updatedAt
+
+#### Note
+
+- id
+- serverId
+- title
+- content
+- category
+- createdAt
+- updatedAt
+
+### Relationships
+
+- Server 1..\* Service
+- Server 1..\* Note
+- Service 1..\* Domain
+
+## 3. Activity Diagram
+
+Suggested activity: **Check DNS**
+
+Flow:
+
+- Admin opens domain list/detail
+- Admin clicks Check DNS
+- System resolves A record
+- System compares resolved IPs with expected server IP
+- System stores result
+- System shows Match / Mismatch / Unresolved
+
+## 4. State Chart Diagram
+
+Suggested state chart: **Domain DNS Status**
+
+States:
+
+- Unresolved
+- Match
+- Mismatch
+
+Transitions:
+
+- Check DNS success with expected IP found -> Match
+- Check DNS success with expected IP missing -> Mismatch
+- Check DNS failure -> Unresolved
+
+## 5. Sequence Diagram
+
+Suggested sequence: **Create Domain and Check DNS**
+
+Objects:
+
+- Admin
+- Web UI
+- tRPC API
+- Database
+- DNS Resolver
+
+Flow:
+
+- Admin submits domain form
+- UI sends create request
+- API validates and stores domain
+- Admin triggers DNS check
+- UI calls check mutation
+- API resolves DNS
+- API updates database
+- UI displays result
+
+## 6. Collaboration Diagram
+
+Show interaction between:
+
+- Admin
+- Dashboard UI
+- Auth module
+- API router
+- Database
+- DNS lookup module
+
+Focus on how each module collaborates during CRUD and DNS checking.