Internal Tool / Dashboard

Dashboard Sales Internal

Dashboard internal berbasis web untuk tim sales yang menyatukan pipeline deal, perbandingan target vs realisasi, dan laporan performa mingguan per sales dalam satu tampilan, dengan kontrol akses berbasis peran (Sales Rep & Sales Manager). Tujuannya menggantikan spreadsheet manual yang tersebar dengan satu sumber kebenaran yang selalu terbarui, real-time, dan mudah direview.

Pakai template

Dashboard Sales Internal

Problem

Saat ini tim sales melacak pipeline dan performa lewat spreadsheet manual yang tersebar di banyak file, sulit dikonsolidasi, rawan salah input, dan tidak real-time. Manajer kesulitan melihat posisi target vs realisasi tiap sales dan harus menyusun laporan review mingguan secara manual, sementara sales rep tidak punya gambaran jelas progres target pribadinya. Dibutuhkan dashboard internal terpusat yang menampilkan pipeline deal, target vs realisasi, dan performa mingguan per sales dalam satu tempat.

Goals

Menyediakan satu sumber kebenaran (single source of truth) untuk pipeline deal tim sales yang selalu terbarui.
Memvisualisasikan target vs realisasi per sales dan per tim secara real-time dengan indikator pencapaian yang jelas.
Mengotomatiskan laporan performa mingguan per sales sehingga review manajer jauh lebih cepat daripada spreadsheet manual.
Meningkatkan visibilitas dan akuntabilitas tim sales tanpa perlu maintenance spreadsheet manual.
Menghasilkan MVP yang siap dipakai internal dalam waktu pengembangan singkat (target < 4 minggu).

Non-Goals

Integrasi dua arah dengan CRM eksternal (Salesforce, HubSpot, Pipedrive) — MVP memakai input manual.
Notifikasi otomatis via email/WhatsApp/Slack (reminder follow-up, alert target) — ditunda.
Forecasting atau scoring deal berbasis AI/ML — ditunda ke fase lanjutan.
Aplikasi mobile native (iOS/Android) — MVP web-responsive saja.
Multi-mata uang dan multi-region; MVP fokus satu mata uang (IDR).
Perhitungan komisi/insentif dan integrasi payroll.
Kustomisasi stage pipeline oleh pengguna; MVP memakai stage tetap yang telah ditentukan.
Audit log lengkap dan histori perubahan stage per deal (deal velocity/funnel analytics) — ditunda.
Import massal dari file Excel/CSV — MVP hanya seed + input manual.

Target Users

Sales Rep (Account Executive) — Melihat dan memperbarui deal miliknya di pipeline, mengetahui progres target pribadi bulan ini, dan memahami performanya mingguan tanpa harus mengelola spreadsheet.
Sales Manager — Memantau pipeline dan performa seluruh anggota tim, membandingkan target vs realisasi tiap sales, menetapkan target bulanan, dan menyiapkan review mingguan secara cepat dari data yang terpusat.
Admin/RevOps (peran ringan, digabung ke Manager di MVP) — Mengelola akun pengguna dan data master (user, target), serta memastikan integritas data yang tampil di dashboard.

User Stories

must-have
Sebagai Sales Rep, saya ingin melihat dan memperbarui semua deal saya dalam tampilan pipeline per stage, agar saya bisa memantau deal aktif dan menggerakkannya menuju closing tanpa spreadsheet manual.
must-have
Sebagai Sales Rep, saya ingin melihat perbandingan target vs realisasi pribadi saya bulan ini, agar saya tahu seberapa dekat saya dengan target dan bisa menyesuaikan usaha.
must-have
Sebagai Sales Rep, saya ingin menandai deal sebagai menang atau kalah, agar realisasi saya ter-update otomatis dan pipeline tetap akurat.
must-have
Sebagai Sales Manager, saya ingin melihat laporan performa mingguan per sales dalam satu tabel, agar saya bisa mengevaluasi tim dan meng-coach yang tertinggal saat review mingguan.
must-have
Sebagai Sales Manager, saya ingin melihat total nilai pipeline per stage dan target vs realisasi seluruh tim, agar saya bisa memperkirakan pencapaian dan mengambil keputusan lebih cepat.
must-have
Sebagai Sales Manager, saya ingin menetapkan target bulanan untuk setiap sales, agar dashboard bisa menghitung pencapaian (attainment) secara otomatis.
should-have
Sebagai Sales Manager, saya ingin mengekspor laporan performa mingguan ke CSV, agar saya bisa membagikannya ke pihak lain atau mengarsipkannya.

Features

Autentikasi & Kontrol Akses Peran (RBAC)

must-have

Login internal dengan dua peran: SALES dan MANAGER. Menu, halaman, dan data yang bisa diakses dibatasi sesuai peran. Sales rep hanya melihat/mengubah data miliknya; manager mengakses seluruh tim.

Pengguna yang belum login diarahkan ke halaman /login untuk semua halaman dashboard.
Terdapat tepat 2 peran (SALES dan MANAGER); menu 'Target' dan agregasi tim hanya tampil untuk MANAGER.
SALES hanya dapat melihat dan mengubah deal miliknya sendiri; upaya mengakses deal milik orang lain ditolak di lapisan server (bukan hanya UI).
Sesi login bertahan (persist) antar-navigasi dan tombol Logout mengakhiri sesi sehingga pengguna kembali ke /login.

Manajemen Deal & Pipeline Board

must-have

Papan pipeline berbasis kolom per stage (Prospek, Kualifikasi, Penawaran, Negosiasi, Menang, Kalah). Pengguna dapat menambah, mengedit, menghapus, dan memindahkan stage deal. Manager dapat memfilter berdasarkan sales.

Setiap deal memiliki field: nama deal, nama customer, nilai, stage, owner (sales), dan expected close date.
Pipeline menampilkan satu kolom per stage; header tiap kolom menampilkan jumlah deal dan total nilai kolom.
Pengguna dapat menambah/mengedit/menghapus deal dan mengubah stage; perubahan terlihat tanpa reload halaman penuh (< 1 detik pada data seed).
Nilai deal diformat Rupiah menggunakan Intl.NumberFormat('id-ID').
Saat deal dipindah ke stage MENANG atau KALAH, field closedAt terisi otomatis dengan tanggal saat itu.
MANAGER dapat memfilter papan berdasarkan sales tertentu; SALES hanya melihat deal miliknya.

Target vs Realisasi

must-have

Penetapan target bulanan per sales dan perhitungan realisasi serta pencapaian (attainment) secara otomatis, ditampilkan dalam KPI card, tabel per sales, dan progress bar berwarna.

MANAGER dapat menetapkan target bulanan (format periode YYYY-MM) per sales, dengan batasan satu target unik per sales per bulan.
Realisasi dihitung sebagai jumlah nilai seluruh deal berstatus MENANG dengan closedAt berada dalam periode yang dipilih.
Attainment = realisasi/target ditampilkan dalam persen dan progress bar berwarna (merah < 70%, kuning 70–99%, hijau >= 100%).
Tersedia KPI: total target, total realisasi, %attainment, dan total nilai pipeline aktif; SALES melihat angka pribadi, MANAGER melihat total tim plus rincian per sales.
Mengganti pemilih periode (bulan) memuat ulang seluruh angka sesuai bulan tersebut.

Laporan Performa Mingguan per Sales

must-have

Laporan performa dikelompokkan per minggu (ISO week) untuk tiap sales, dengan metrik kunci dan ekspor CSV. Manager melihat semua sales; sales rep hanya barisnya.

Laporan dikelompokkan per ISO week dengan default menampilkan 8 minggu terakhir dan pemilih rentang minggu.
Metrik per sales per minggu mencakup: jumlah deal menang, nilai deal menang, jumlah deal baru, dan win rate.
MANAGER melihat baris seluruh sales; SALES hanya melihat baris miliknya sendiri.
Tombol 'Ekspor CSV' mengunduh file berisi header kolom dan seluruh baris sesuai filter yang aktif.
Angka pada laporan dapat direkonsiliasi dan konsisten dengan data yang tampil di pipeline dan halaman target vs realisasi.

Dashboard Ringkasan (Home)

should-have

Halaman beranda yang menampilkan ringkasan KPI dan grafik target vs realisasi (per sales untuk manager, progres pribadi untuk sales) sebagai titik masuk utama.

Halaman /dashboard menampilkan ringkasan KPI periode berjalan dan grafik (Recharts) target vs realisasi per sales untuk MANAGER, atau progres pribadi untuk SALES.
Grafik ter-render dengan benar menggunakan data periode berjalan, tanpa error konsol.
Muatan data awal halaman selesai < 2 detik pada dataset seed.
Tautan cepat menuju Pipeline dan Laporan tersedia dari halaman ini.

Tech Stack

Frontend: Next.js 14 (App Router) + React + TypeScript, Tailwind CSS, shadcn/ui untuk komponen, dan Recharts untuk grafik. Format angka Rupiah via Intl.NumberFormat('id-ID').

Backend: Next.js Route Handlers + Server Actions (monolitik), validasi input dengan Zod, ORM Prisma. Autentikasi memakai Auth.js (NextAuth v5) dengan Prisma Adapter dan proteksi rute via middleware.

Database: PostgreSQL (dikelola lewat Neon atau Supabase). Skema dikelola dengan Prisma Migrate; seed data lewat prisma/seed.ts.

Hosting: Vercel untuk aplikasi Next.js; PostgreSQL terkelola (Neon/Supabase). CI via GitHub Actions.

Package manager pnpm. Testing: Vitest untuk unit test util metrik dan Playwright untuk smoke test end-to-end. State data mengandalkan React Server Components + revalidatePath; hindari over-engineering. Peran (SALES/MANAGER) disimpan di model User dan dibawa ke session Auth.js. Semua aturan RBAC divalidasi di lapisan server, bukan hanya UI.

Tasks (siap kirim ke AI agent)

Inisialisasi proyek & tooling· 0.5 hari

Setup proyek Next.js 14 App Router + TypeScript beserta Tailwind, shadcn/ui, dependensi inti, linting/formatting, dan struktur folder.

Lihat isi perintah

Inisialisasi proyek Next.js 14 (App Router) + TypeScript bernama `dashboard-sales`. Gunakan `pnpm create next-app@latest` dengan opsi: TypeScript, ESLint, Tailwind CSS, App Router, direktori `src/`, import alias `@/*`. Inisialisasi shadcn/ui (`pnpm dlx shadcn@latest init`, base color slate) dan tambahkan komponen dasar: button, card, table, dialog, input, select, badge, dropdown-menu, sonner, progress. Pasang dependensi: `prisma`, `@prisma/client`, `recharts`, `zod`, `react-hook-form`, `@hookform/resolvers`, `date-fns`, `next-auth@beta` (Auth.js v5), `@auth/prisma-adapter`. Tambah Prettier + `eslint-config-prettier`, dan script npm: `dev`, `build`, `format`, `lint`, `typecheck` (tsc --noEmit). Buat struktur folder: `src/app`, `src/components`, `src/lib`, `src/server`. Buat `.env.example` berisi `DATABASE_URL`, `NEXTAUTH_SECRET`, `NEXTAUTH_URL`. Definition of Done: `pnpm dev` berjalan tanpa error, halaman `/` placeholder ter-render, `pnpm typecheck` dan `pnpm lint` bersih, dan README memuat langkah menjalankan proyek.

Skema database Prisma & seed data· 1 hari· Butuh dulu: T1

Definisikan model data (User, Deal, Target, tabel Auth.js) dengan Prisma, jalankan migrasi awal, dan buat seed data realistis untuk pengembangan.

Lihat isi perintah

Buat `prisma/schema.prisma` dengan datasource PostgreSQL (`DATABASE_URL`) dan generator client. Model: User (id, name, email unik, role enum {SALES, MANAGER} default SALES, image nullable, createdAt, updatedAt), Deal (id, title, customerName, value Decimal, stage enum {PROSPEK, KUALIFIKASI, PENAWARAN, NEGOSIASI, MENANG, KALAH} default PROSPEK, ownerId relasi ke User, expectedCloseDate DateTime nullable, closedAt DateTime nullable, notes String nullable, createdAt, updatedAt, dengan index [ownerId, stage]), Target (id, userId relasi ke User, period String format 'YYYY-MM', amount Decimal, createdAt, updatedAt, unique [userId, period]). Tambahkan model Account, Session, VerificationToken sesuai kebutuhan `@auth/prisma-adapter`. Buat `src/lib/prisma.ts` sebagai singleton PrismaClient (hindari multiple instance di dev). Buat `prisma/seed.ts` yang membuat: 1 user MANAGER dan 2 user SALES, target bulan berjalan untuk tiap sales, dan 15-20 deal tersebar di semua stage dengan tanggal (createdAt/closedAt) beragam beberapa minggu ke belakang memakai date-fns. Tambah script: `db:migrate` (prisma migrate dev), `db:seed` (tsx prisma/seed.ts), `db:studio`. Definition of Done: `pnpm prisma migrate dev` sukses membuat semua tabel, `pnpm db:seed` mengisi data tanpa error, dan `pnpm prisma studio` menampilkan user, deal, dan target.

Autentikasi, RBAC & app shell· 1.5 hari· Butuh dulu: T1, T2

Konfigurasi Auth.js dengan peran, proteksi rute via middleware, halaman login, helper otorisasi server, dan layout dashboard dengan navigasi sadar-peran.

Lihat isi perintah

Konfigurasi Auth.js (NextAuth v5) di `src/lib/auth.ts` memakai PrismaAdapter dan Credentials provider sederhana (cocokkan email ke User; password memakai satu env `DEMO_PASSWORD` untuk MVP internal). Tambahkan callback `session`/`jwt` untuk membawa `id` dan `role` user ke dalam session. Buat route handler Auth.js di `src/app/api/auth/[...nextauth]/route.ts`. Buat `src/middleware.ts` yang memproteksi semua rute kecuali `/login` dan asset publik: jika tidak ada sesi, redirect ke `/login`. Buat halaman `/login` (form email + password, react-hook-form + zod). Buat helper di `src/server/auth.ts`: `getCurrentUser()` dan `requireRole(role)` yang melempar/redirect bila tidak berwenang. Bangun app shell di `src/app/(dashboard)/layout.tsx`: sidebar navigasi (Dashboard, Pipeline, Target, Laporan) + header berisi nama user dan tombol Logout; menu 'Target' dan agregasi khusus tim hanya tampil untuk peran MANAGER. Definition of Done: pengguna belum login diarahkan ke `/login`; setelah login berhasil masuk ke `/dashboard`; user SALES tidak melihat menu khusus MANAGER; tombol Logout mengakhiri sesi dan kembali ke `/login`.

Lapisan data deal & target + util metrik· 1.5 hari· Butuh dulu: T2, T3

Bangun server actions CRUD untuk deal dan target dengan validasi Zod dan penegakan RBAC, plus util agregasi metrik beserta unit test.

Lihat isi perintah

Buat lapisan data di `src/server/deals.ts` dan `src/server/targets.ts` memakai Prisma + Zod. Fungsi deals: `listDeals({ ownerId?, stage? })`, `createDeal(input)`, `updateDeal(id, input)`, `updateDealStage(id, stage)` (set `closedAt = now()` saat stage MENANG/KALAH, dan reset `closedAt = null` bila dipindah keluar dari status tersebut), `deleteDeal(id)`. Fungsi targets: `getTargets(period)`, `upsertTarget({ userId, period, amount })`. Terapkan RBAC di setiap fungsi: SALES hanya boleh membaca/mengubah deal miliknya (validasi `ownerId === currentUser.id`), MANAGER boleh semua; `upsertTarget` hanya MANAGER. Bungkus sebagai Next.js Server Actions di `src/app/(dashboard)/**/actions.ts` dengan `revalidatePath` pada path terkait. Buat util agregasi murni di `src/lib/metrics.ts`: `realisasi(deals, period)` (sum value deal MENANG dengan closedAt dalam periode), `pipelineByStage(deals)`, `attainment(realisasi, target)`, dan siapkan `weeklyPerformance(deals, weeks)` (akan diperluas di T7). Tulis unit test Vitest untuk `metrics.ts` minimal 3 kasus (realisasi, attainment termasuk target=0, pipelineByStage). Definition of Done: seluruh aksi CRUD berfungsi terhadap DB dev, aturan RBAC memiliki test/penjagaan, dan `pnpm test` hijau.

Halaman Pipeline Board· 1.5 hari· Butuh dulu: T4

Bangun UI papan pipeline per stage dengan kartu deal, dialog tambah/edit, perubahan stage, format Rupiah, dan filter sales untuk manager.

Lihat isi perintah

Buat halaman `/pipeline` di `src/app/(dashboard)/pipeline/page.tsx` sebagai papan berkolom, satu kolom per stage (PROSPEK, KUALIFIKASI, PENAWARAN, NEGOSIASI, MENANG, KALAH) memakai komponen Card shadcn. Tiap kartu deal menampilkan nama deal, nama customer, nilai (format Rupiah via `Intl.NumberFormat('id-ID', { style: 'currency', currency: 'IDR' })`), dan nama owner (hanya untuk MANAGER). Sediakan dialog Tambah/Edit Deal (react-hook-form + zod) yang memanggil server action dari T4. Ubah stage lewat dropdown pada kartu (memanggil `updateDealStage`); drag-and-drop opsional dan boleh ditunda. Untuk MANAGER, tambahkan kontrol filter berdasarkan sales; untuk SALES, otomatis hanya deal miliknya. Header tiap kolom menampilkan jumlah deal dan total nilai kolom (terformat Rupiah). Gunakan `revalidatePath`/router refresh agar perubahan tampil tanpa reload penuh. Definition of Done: SALES dapat melihat dan mengelola deal miliknya; MANAGER melihat semua deal dan bisa memfilter per sales; menambah/mengedit/memindahkan stage deal langsung terefleksi (< 1 detik pada data seed); nilai selalu terformat Rupiah; memindah ke MENANG/KALAH mengisi closedAt (terlihat setelah refresh).

Dashboard & Target vs Realisasi· 1.5 hari· Butuh dulu: T4

Bangun halaman beranda dashboard dengan KPI card, tabel per sales, progress bar berwarna, grafik Recharts, dan pemilih periode; termasuk UI penetapan target untuk manager.

Lihat isi perintah

Buat halaman `/dashboard` di `src/app/(dashboard)/dashboard/page.tsx` dan halaman `/target` (khusus MANAGER) untuk menetapkan target. Di dashboard tampilkan KPI card: Total Target periode berjalan, Total Realisasi, %Attainment, dan Total Nilai Pipeline Aktif (deal selain MENANG/KALAH), memakai util `src/lib/metrics.ts`. Untuk SALES: tampilkan angka pribadi dan progress bar targetnya. Untuk MANAGER: tampilkan total tim plus tabel per sales (kolom: nama, target, realisasi, attainment, progress bar) dan bar chart Recharts target vs realisasi per sales. Progress bar diberi warna sesuai attainment (merah < 70%, kuning 70-99%, hijau >= 100%). Tambahkan pemilih periode (bulan, YYYY-MM) yang mengubah seluruh angka. Di `/target`, MANAGER dapat meng-input/meng-update target bulanan per sales via form (react-hook-form + zod) yang memanggil `upsertTarget`. Definition of Done: attainment dihitung benar terhadap data seed (verifikasi manual), progress bar dan warna sesuai ambang, bar chart ter-render tanpa error konsol, mengganti bulan memuat data periode tersebut, dan MANAGER dapat menyimpan target yang langsung memengaruhi perhitungan attainment.

Laporan Performa Mingguan + Ekspor CSV· 1.5 hari· Butuh dulu: T4

Bangun halaman laporan mingguan per sales dengan agregasi ISO week, tabel metrik, pemilih rentang minggu, dan ekspor CSV; termasuk util agregasi beserta test.

Lihat isi perintah

Lengkapi fungsi `weeklyPerformance(deals, { weeks, from })` di `src/lib/metrics.ts` yang mengagregasi per ISO week (pakai `startOfISOWeek`/`getISOWeek` dari date-fns) menghasilkan per sales per minggu: jumlah deal menang, nilai deal menang, jumlah deal baru (berdasarkan createdAt), dan win rate (menang / (menang+kalah) pada minggu itu). Tulis unit test Vitest untuk fungsi ini (minimal 2 kasus, termasuk minggu tanpa deal). Buat halaman `/laporan` di `src/app/(dashboard)/laporan/page.tsx`: MANAGER melihat seluruh sales, SALES hanya barisnya sendiri (tegakkan di server). Default tampilkan 8 minggu terakhir dengan pemilih rentang minggu. Tabel: baris per sales, kolom per minggu (nilai menang) plus mini bar/sparkline ringkas per sales. Tambahkan tombol 'Ekspor CSV' yang menghasilkan CSV (header + seluruh baris sesuai filter) dan mengunduhnya lewat Blob di sisi klien. Definition of Done: angka mingguan cocok dengan data seed dan konsisten dengan halaman pipeline/target, `pnpm test` hijau, ekspor CSV terunduh berisi header dan baris yang benar, serta SALES hanya melihat baris miliknya.

Deployment, CI & QA rilis· 1 hari· Butuh dulu: T5, T6, T7

Siapkan database produksi, konfigurasi env & build di Vercel, pipeline CI GitHub Actions, smoke test Playwright, dan dokumentasi rilis.

Lihat isi perintah

Siapkan rilis internal. Konfigurasi PostgreSQL produksi (Neon atau Supabase) dan set environment variable di Vercel: `DATABASE_URL`, `NEXTAUTH_SECRET`, `NEXTAUTH_URL`, `DEMO_PASSWORD`. Tambahkan script `vercel-build` yang menjalankan `prisma migrate deploy && next build`. Buat pipeline CI di `.github/workflows/ci.yml` (trigger PR & push): setup pnpm + Node, `pnpm install`, `pnpm typecheck`, `pnpm lint`, `pnpm test`, dan `pnpm prisma validate`. Tulis smoke test Playwright di `e2e/smoke.spec.ts`: login dengan akun seed -> melihat /dashboard -> membuka /pipeline -> menambah satu deal -> memastikan deal muncul. Lengkapi README: gambaran arsitektur, cara setup lokal, cara seed, daftar akun demo (email + role), dan instruksi deploy. Definition of Done: deploy ke Vercel sukses dan bisa login memakai akun seed, CI hijau pada PR, dan smoke test Playwright lulus di lokal.

Risks

Kualitas data bergantung pada disiplin sales mengisi dan memperbarui deal secara rutin; bila tidak, dashboard menjadi menyesatkan.
Definisi 'realisasi' dan kapan sebuah deal dihitung menang bisa berbeda antar tim; perlu kesepakatan bisnis sebelum go-live.
Tanpa integrasi CRM, input manual berpotensi ganda dan menjadi sumber error serta beban tambahan bagi sales.
Query agregasi (target vs realisasi, laporan mingguan) bisa melambat saat jumlah deal membesar; perlu index yang tepat dan kemungkinan materialized view di masa depan.
Autentikasi kredensial sederhana (password demo) memadai untuk MVP internal namun kurang aman untuk jangka panjang; perlu migrasi ke SSO/OAuth.
Perhitungan periode (bulan berjalan vs ISO week) rawan bug zona waktu; perlu penanganan timezone yang konsisten.

Open Questions

Periode target hanya bulanan, atau juga perlu kuartalan/tahunan?
Apakah seluruh nilai deal memakai satu mata uang (IDR) saja, atau ada kemungkinan multi-mata uang?
Bagaimana definisi resmi win rate, dan apakah deal 'kalah' perlu menyimpan alasan (lost reason)?
Siapa yang berwenang menetapkan target — manager saja, atau perlu alur persetujuan?
Apakah histori perubahan stage per deal diperlukan sejak MVP untuk analitik funnel/velocity, atau bisa ditunda?
Apakah SSO (mis. Google Workspace) dibutuhkan sejak awal atau cukup di fase berikutnya?
Apakah manager perlu mengakses lintas-tim/cabang, atau cukup satu tim per manager?