Skip to content

[Task]: Optimasi Responsif Mobile UI Menu Mitra Faskes Panel Admin (apps/web) #33

Open

Description

@Oktavian19

Goal & Scope

  • Problem: Layout menu Mitra Fasilitas Kesehatan pada portal admin (apps/web) saat ini dioptimalkan untuk desktop dengan grid master-detail 5:7 berdampingan, tabs filter 5 kolom yang sempit di mobile, dan panel detail yang menumpuk panjang ke bawah pada viewport ponsel (< 768px).
  • Scope:
    • Menyesuaikan tab navigasi filter status (all, pending, approved, rejected, suspended) agar mendukung horizontal scroll / overflow responsif tanpa pemotongan teks.
    • Mengoptimasi alur master-detail pada layar mobile: navigasi transisi/drawer/modal atau navigasi kembali yang intuitif agar pengguna tidak perlu menggulir jauh ke bawah.
    • Merapikan elemen di PartnerDetailPanel: penyesuaian header mitra, kartu catatan penolakan/revisi, grup tombol aksi verifikasi, serta daftar psikolog naungan faskes agar touch-friendly dan bebas horizontal overflow.
  • Out of Scope:
    • Modifikasi logika backend/API atau kontrak database mock portal.
    • Perubahan di luar menu Mitra Faskes.

Acceptance Criteria

  • Tab filter status mitra dapat di-scroll secara horizontal atau tersusun rapi pada layar sempit (360px–480px) tanpa teks terpotong.
  • Daftar antrean faskes dan detail mitra dapat dinavigasi dengan mudah di mobile tanpa merusak viewport.
  • Tombol aksi persetujuan/penolakan dan dialog alasan penolakan proporsional serta mudah ditekan (touch-friendly).
  • Daftar psikolog di bawah naungan faskes tampil responsif (kartu ringkas atau tabel berkontainer scroll aman).
  • Tidak ada regresi visual pada breakpoint tablet (md) dan desktop (lg, xl).
  • Lulus pengujian build (pnpm build atau npm run build di apps/web) tanpa error TypeScript maupun linting.

Technical Notes & Architecture

  • Menggunakan Tailwind CSS utility breakpoint (sm:, md:, lg:).
  • Mematuhi design tokens Eva UI (warna primary, ink, border #E2E8F0).
  • Komponen target: apps/web/src/components/portal/admin/AdminPartnersModule.tsx dan PartnerDetailPanel.tsx.

Definition of Done

  • Unit / UI verification dijalankan pada simulasi mobile (360px, 390px, 412px, 768px).
  • Branch dibuat mematuhi konvensi {type}/{issue}-{slug} (contoh: feat/{issue}-mobile-responsive-admin-partners).
  • Pull request menyertakan bukti screenshot/evidence tampilan mobile dan desktop.

Activity

  1. self-assigned this
    on Nov 7, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Labels

featNew feature

Type

No type

Projects

No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions