Run platform work and support escalations in one clear command center.
ForgeDesk is a Studio Admin workspace for platform owners, super admins, DevOps engineers, and L3 support teams to manage projects, issues, and B2B escalation tickets in one system. It separates internal engineering work from tenant-originated support while reducing terminology confusion, improving triage speed, and making cross-tenant operations easier to audit and resolve.
Rafi, 39, Platform Super Admin - Rafi manages cross-tenant platform stability, roadmap execution, and incident coordination. He needs a single place to see strategic projects, urgent platform issues, and escalation tickets without confusing labels or layouts.
Dina, 32, DevOps Engineer - Dina handles incidents, deployment tasks, and infrastructure tuning. She works quickly across many tickets and needs keyboard-driven triage, compact views, and reliable filtering.
Mika, 28, L3 Support Lead - Mika owns escalations from ISP tenants and coordinates with platform engineers. He needs clear inbox visibility, strong assignment workflow, and notification handling for new tenant-originated issues.
Rafi is the platform owner for FTTH GIS operations. Every morning he opens the old admin portal and spends too much time decoding whether a record is a task, ticket, issue, or project before he can even start triage.
With ForgeDesk, he lands directly in a clean Projects and Issues workspace. B2B escalations are clearly separated from internal platform work, urgent items are highlighted instantly, and he can create, assign, and resolve work with a few keyboard actions. The result is faster response, fewer classification mistakes, and a clearer operating model for the whole platform team.
Over time, the team sees fewer missed escalations, more predictable project progress, and less time lost to navigation and label confusion. ForgeDesk turns the admin portal from a cluttered list into a reliable command center for engineering and support execution.
Team & resourcing - Small cross-functional team - 2 frontend engineers, 2 backend engineers, 1 designer, part-time PM, and shared DevOps support.
Paste this into Cursor, Bolt, Lovable, or v0 to start building.
Build a web app called ForgeDesk for a Studio Admin portal that manages platform Projects, internal Issues, and B2B escalation tickets in one workspace. Use a modern stack: Next.js 14, React, TypeScript, Tailwind, shadcn/ui, PostgreSQL, Prisma, Redis, and Server-Sent Events for live updates. Core requirements: 1. Navigation with Projects, Internal Issues, B2B Escalations, All Issues, Active, Overdue, No Assignee, and saved views. 2. Unified taxonomy only: Project, Issue, scope badges, status, priority, assignee, due date, comments, activity log, attachments. 3. Dense list view with search, filters, bulk actions, compact mode toggle, and keyboard shortcut C to create an issue. 4. Project detail page with issue list and automatic progress rollup from resolved child issues. 5. B2B escalation inbox with unread badge, real-time updates, and notification-ready events. 6. Issue detail drawer/page with description, comments, history, attachments, and status transitions. 7. Audit logging for every create/update/assign/status change. 8. Role-based access control for Platform Owner, Super Admin, DevOps Engineer, and L3 Support Lead. Data model: User, Role, Project, Issue, Comment, Attachment, ActivityEvent, NotificationPreference, SavedView, Tenant, EscalationSource. Project has many Issues. Issue belongs to optional Project, has scope, type, priority, status, assignee, creator, due date, unread flag, and optional tenant source. ActivityEvent stores immutable before/after changes. Attachments upload to object storage. Primary screens: Workspace dashboard with compact stats strip and list/table of issues. Projects index and project detail page. Issue detail page or right-side drawer. B2B Escalations inbox. Settings for density mode, notification preferences, and saved filters. Behavior: Preserve filter state in URL. Virtualize long lists. Show loading, empty, and permission-denied states. Validate required fields inline. Add optimistic updates for status and assignment. Make the UI accessible with keyboard navigation and AA contrast. Implement seed data for sample projects, internal bugs, and tenant escalation tickets. Provide realistic mock API routes or server actions so the app runs end-to-end.
# 🏛️ Analisa & Rekomendasi Strategis: Arsitektur, Logika Operasional, dan UI/UX Task Gateway (Studio-Admin) **Dokumen**: Task & Project Management Gateway — Architectural Review & UX Blueprint **Konteks**: Platform Super Admin Portal (`apps/studio-admin`) **Target Pengguna**: Platform Owner, Super Admin, Core DevOps / Infrastructure Engineers, L3 Escalation Support **Lokasi Berkas**: `/opt/project5/docs/06_Archive_Dev_History/05_Plans_Roadmap/TASK_GATEWAY_ARCHITECTURE_AND_UX_RECOMMENDATION.md` --- ## Executive Summary Modul **Tasks & Tickets** (atau *Task Gateway*) pada portal **Studio Admin (`studio-admin`)** memegang peranan sentral sebagai **Pusat Komando Operasional & Rekayasa Platform FTTH GIS**. Berbeda dengan portal tenant (`studio-tenant`) yang berorientasi pada operasional ISP tingkat akhir (pelanggan, ODP, ONT, billing retail), Studio Admin bertindak sebagai payung tata kelola infrastruktur multi-tenant, roadmap platform, dan resolusi eskalasi B2B. Dokumen ini menyajikan audit menyeluruh dari perspektif **Senior Engineer / Product Architect & UI/UX Designer**, menguraikan kekuatan (*strengths*), kelemahan (*flaws*), benturan taksonomi (*terminology clash*), serta cetak biru (*blueprint*) alur kerja dan rekomendasi desain terbaik untuk jangka panjang. --- ## 1. 🎯 Perbedaan Fundamental: Studio-Admin vs Studio-Tenant Sebelum menata taksonomi dan alur kerja, kita harus menetapkan batas tanggung jawab (*separation of concerns*) yang tegas: | Dimensi | 🏢 Studio-Admin (Portal Utama Platform) | 🌐 Studio-Tenant (Portal ISP Mitra) | | :--- | :--- | :--- | | **Audiens Utama** | Super Admin, Platform Architect, DevOps Engineer, L3 Support K2NET | Owner ISP, Helpdesk ISP, Teknisi Lapangan ISP | | **Skala Data** | Cross-Tenant (Semua Tenant + Platform Internal) | Single-Tenant (Hanya data tenant bersangkutan) | | **Entitas Payung (Project)** | Inisiatif Arsitektur, Refactoring Gateway, Fiber Backbone Rollout, Disaster Recovery Sync | Proyek Penarikan Kabel Feeder Lokal, Pembangunan Cluster Perumahan Baru | | **Unit Tugas (Issue/Ticket)** | Bug Microservice, Insiden Kong Ingress, Rate Limit Tuning, Database Optimization | Gangguan Kabel Putus, ONT Red Light, Pemasangan Baru (PSB), Tiket Pelanggan | | **Eskalasi B2B** | **Penerima Eskalasi** (Menyelesaikan isu infrastruktur dari ISP) | **Pengirim Eskalasi** (Meminta bantuan L3 ke tim K2NET) | --- ## 2. 🔍 Audit Kritis UI/UX & Logika Operasional Saat Ini Berdasarkan tinjauan visual pada antarmuka `/tasks` saat ini: ``` ┌──────────────────────────────────────────────────────────────────────────────────────────────────┐ │ [Logo] FTTH GIS K2NET › Tasks [Search ⌘K] [Ask AI Ctrl+J] [UserNav] │ ├─────────────────┬────────────────────────────────────────────────────────────────────────────────┤ │ Tasks & Tickets │ 📋 All Issues (Internal + B2B Inbox) [+ New Issue C]│ ├─────────────────┤ 1 Active Tasks / 0 Urgent / 0 Resolved Today / 2 Total │ │ WORKSPACE ├────────────────────────────────────────────────────────────────────────────────┤ │ 📁 Projects │ ┌──────────────────────┐ ┌──────────────────────┐ ┌────────────────────────┐ │ │ 📑 Internal Task│ │ ACTIVE TASKS │ │ URGENT │ │ RESOLVED TODAY │ │ │ 🏢 B2B Tickets │ │ 1 │ │ 0 │ │ 0 │ │ │ │ └──────────────────────┘ └──────────────────────┘ └────────────────────────┘ │ │ VIEWS ├────────────────────────────────────────────────────────────────────────────────┤ │ 🗃️ All Issues │ [🔍 Filter by title...] [Status ▾] [Priority ▾] [Scope ▾] [Display] [Refresh] │ │ ⚡ Active ├────────────────────────────────────────────────────────────────────────────────┤ │ ⏰ Overdue │ [ ] Title Scope Type Priority Status Assignee Due │ │ 👤 No Assignee │ [ ] Project 1 PRJ-002 [Internal] PROJECT LOW Todo Admin 25A │ │ │ [ ] Setup S3 Sync [Internal] TICKET HIGH In Prog DevOps 24A │ └─────────────────┴────────────────────────────────────────────────────────────────────────────────┘ ``` ### A. Evaluasi Taksonomi & Penamaan (Terminology Clash) - **Temuan Masalah**: - Modul di sidebar diberi label **`Tasks & Tickets`**. - Header utama di atas tabel tertulis **`All Issues`**. - Tombol CTA tertulis **`+ New issue`** (dengan shortcut `C`). - Kartu KPI di atas bertuliskan **`ACTIVE TASKS`**. - Kolom tabel menampilkan **`Type: PROJECT`** vs **`Type: TICKET`**. - **Dampak UX**: Pengguna mengalami kebingungan mental (*cognitive friction*). Pengguna bertanya-tanya: *"Apakah saya sedang mengelola Task, Ticket, Issue, atau Project?"*. - **Rekomendasi**: Mengadopsi taksonomi standar industri (seperti **Linear** atau **GitHub Enterprise**) yang konsisten di seluruh lapisan UI. --- ### B. Evaluasi Hirarki Navigasi Sidebar Kiri - **Kelebihan (Strengths)**: 1. **Struktur 3-Tier (*Workspace*, *Views*, *Personal*)**: Ini adalah pola UX kelas dunia (mengikuti standar Linear.app) yang mempermudah navigasi cepat berdasarkan konteks kerja. 2. **Pemisahan Scope (*Internal Tasks* vs *B2B Mitra Tickets*)**: Sangat krusial bagi Super Admin untuk membedakan pekerjaan internal platform dari permintaan bantuan mitra ISP. - **Kelemahan & Ambiguitas (Weaknesses)**: 1. **Duplikasi Konteks *All Issues* vs *Internal Tasks***: Mengklik *All Issues* menampilkan gabungan, sementara *Internal Tasks* memfilter `PLATFORM_INTERNAL`. Perlu visual badge yang memperjelas scope tiket (misal badge warna biru `Platform Internal` vs ungu `B2B Escalation`). 2. **Badge Counter Belum Dinamis**: Menu *B2B Mitra Tickets* harus menampilkan badge merah/amber menyala jika ada tiket masuk baru dari tenant ISP yang belum di-respon (*unread/unassigned*). --- ### C. Evaluasi Kepadatan Visual (*Visual Density & Screen Real Estate*) - **Temuan Masalah**: - **KPI Cards Besar (*Active Tasks, Urgent, Resolved*)** memakan tinggi sekitar 140px di bagian atas layar. - Untuk engineer dan DevOps yang bekerja dengan daftar 50+ tiket per hari, area vertikal ini membuat tabel terdorong ke bawah (*below the fold*), mengharuskan engineer melakukan scrolling berulang kali. - **Rekomendasi UX**: - Menyediakan **Mode Compact Stats Strip** (1 baris ringkas 32px di header) atau tombol *Collapse Overview Panel* agar engineer bisa memaksimalkan ruang layar untuk tabel tiket dan kanban board. --- ## 3. 📐 Blueprint Arsitektur & Hirarki Entitas yang Ideal Untuk menciptakan sistem manajemen proyek dan rekayasa platform yang solid, berikut struktur relasi entitas (*Entity-Relationship Model*) yang direkomendasikan: ``` ┌──────────────────────────────────────────────────────────────────────────────────┐ │ LEVEL 1: INITIATIVES & ROADMAPS │ │ (Projects & Plans — /tasks/projects) │ │ - Karakteristik : Payung besar inisiatif strategis platform (Lead, Target Date) │ │ - Dokumen : Spesifikasi Teknis TipTap Markdown (Tech Spec, Arch, SLA) │ │ - Progress : Otomatis terhitung (% akumulasi issue anak yang Resolved) │ └────────────────────────────────────────┬─────────────────────────────────────────┘ │ │ 1-to-Many Relasi (parentTaskId / obsidianRef) ▼ ┌──────────────────────────────────────────────────────────────────────────────────┐ │ LEVEL 2: WORK ITEMS & ISSUES │ │ (Tasks & Issues — /tasks) │ │ │ │ ┌────────────────────────────────────────┐ ┌───────────────────────────────┐ │ │ │ A. PLATFORM INTERNAL ISSUES │ │ B. B2B MITRA ESCALATIONS │ │ │ │ (Scope: PLATFORM_INTERNAL) │ │ (Scope: TENANT_TO_PLATFORM) │ │ │ │ - Bug fixing gateway/core API │ │ - Tiket eskalasi dari ISP │ │ │ │ - Task deployment / migration │ │ - Permintaan routing khusus │ │ │ │ - Optimasi database & query tuning │ │ - Kendala payment / OLT poller│ │ │ └────────────────────────────────────────┘ └───────────────────────────────┘ │ └────────────────────────────────────────┬─────────────────────────────────────────┘ │ │ 1-to-Many ▼ ┌──────────────────────────────────────────────────────────────────────────────────┐ │ LEVEL 3: SUB-ISSUES & CHECKLISTS │ │ (TaskSubIssuesSection / Milestones Checklist) │ │ - Unit eksekusi mikro per engineer (Checklist, PR Review, Docker build test) │ └──────────────────────────────────────────────────────────────────────────────────┘ ``` --- ## 4. 🔄 Alur Operasional Baku (End-to-End Operational Workflows) ### Alur 1: Inisiatif Platform Terencana (Top-Down Engineering) ``` 1. Super Admin / Lead Architect membuka `/tasks/projects`. 2. Klik "+ New Project" -> Pilih Template "Tech Spec" -> Tulis Dokumen Desain di TipTap. 3. Tentukan Target Date (misal: 30 September 2026) dan Engineering Lead. 4. Masuk ke tab "Issues" di dalam Project -> Tambahkan 5-10 Issue teknis terinci. 5. Engineer menerima tiket di menu `/tasks` ("My Issues") -> Mengubah status ke IN_PROGRESS. 6. Saat seluruh Issue selesai (RESOLVED), progress Project otomatis menjadi 100%. ``` ### Alur 2: Penanganan Insiden & Bug Harian (Bottom-Up Incident Response) ``` 1. Engineer menemukan anomali (misal: Redis Cache Spike di Poller Gateway). 2. Tekan shortcut 'C' di mana saja pada `/tasks` -> Buka "New Issue Dialog". 3. Pilih Priority: URGENT / HIGH -> Masukkan deskripsi log insiden. 4. Jika insiden terkait dengan inisiatif yang ada, kaitkan dengan Project terkait (opsional). 5. Tim menyelesaikan perbaikan -> Tandai status RESOLVED -> Resolved Today counter bertambah. ``` ### Alur 3: Penanganan Tiket Eskalasi B2B dari Mitra ISP (Cross-Tenant Support) ``` 1. Admin ISP Mitra mengalami kendala OLT di studio-tenant -> Klik "Eskalasi ke K2NET Support". 2. Backend membuat tiket dengan `scope: TENANT_TO_PLATFORM`. 3. Notifikasi realtime berdering via SSE di Studio Admin -> Badge merah di "B2B Mitra Tickets". 4. L3 Support K2NET membuka tiket -> Berdiskusi di tab Activity/Comments. 5. Masalah teratasi -> Tiket ditutup -> Tenant ISP menerima notifikasi instan. ``` --- ## 5. 💡 Rekomendasi Aksi & Roadmap Penyempurnaan UI/UX ### Rekomendasi 1: Standardisasi Taksonomi (Unified Terminology) - **Nama Modul Utama**: Ganti dari `Tasks & Tickets` menjadi **`Projects & Issues`** (atau **`Engineering Hub`**). - **Entitas Level 1**: **`Projects`** (Platform Initiatives, Roadmaps, Milestones). - **Entitas Level 2**: **`Issues`** (Sub-kategori: *Internal Task*, *Bug*, *B2B Support Ticket*). - **Tombol CTA**: **`+ New Issue`** (Shortcut: `C`) dan **`+ New Project`** (di halaman Projects). ### Rekomendasi 2: Penambahan Toggle Kepadatan Layar (*Density Modes*) - Tambahkan switch pada toolbar tabel: - **Standard View**: Menampilkan KPI cards besar di atas + tabel di bawah. - **Dense / Productivity View**: Menyembunyikan KPI cards besar, hanya menampilkan statistik 1 baris di header, sehingga 20+ baris tiket dapat tampil penuh di layar pertama. ### Rekomendasi 3: Integrasi Otomatisasi Antar-Gateway 1. **Gateway-Audit (`gateway-audit:5009`)**: - Setiap mutasi tiket (perubahan prioritas, assignee, status) otomatis mengalir ke log audit platform (`logGroup: OPERATIONS`). 2. **Gateway-Notification (`notification-gateway:5001`)**: - Kirim alert Telegram / WhatsApp otomatis ke channel DevOps jika ada tiket berstatus `URGENT` atau `At Risk`. 3. **Gateway-Storage & MinIO**: - Dukungan unggah lampiran log file, file Wireshark PCAP, atau tangkapan layar topologi GIS langsung ke bucket S3. --- ## 6. 🏆 Kesimpulan & Dampak bagi K2NET Platform Dengan mengimplementasikan rekomendasi di atas: 1. **Kejelasan Operasional**: Engineer dan Super Admin memiliki batasan kerja yang jelas antara merancang proyek strategis (*Projects*) dan menyelesaikan pekerjaan teknis (*Issues*). 2. **Kecepatan Kerja (Speed & Ergonomics)**: Antarmuka yang bersih, padat, dan bebas benturan terminologi akan mempercepat siklus *triage* bug, penyelesaian insiden, dan penanganan eskalasi tenant. 3. **Standar Kelas Enterprise**: Menjadikan portal K2NET FTTH GIS setara dengan platform SaaS engineering kelas dunia seperti Cloudflare Dashboard, Supabase Studio, dan Linear.
Design by The Resonance | Powered by GPC – The AI Transformation Company