myPKP — Sistem Informasi Manajemen Perkantoran

Kementerian Perumahan dan Kawasan Permukiman

Sistem informasi internal terpadu untuk manajemen perkantoran yang mencakup e-Surat, e-Presensi, e-Cuti, e-SPPD, Buku Tamu, IT Support, Reservasi, Kontak, Agenda, e-Filing, dan Panel Admin.

Tech Stack

Layer	Technology	Version
Framework (Web)	Next.js	15
Framework (Mobile)	Expo / React Native	SDK 52
Language	TypeScript	5.x
Database	PostgreSQL	16
ORM	Prisma	6.x
UI (Web)	shadcn/ui + Tailwind CSS	-
UI (Mobile)	React Native Paper	5.x
State	Zustand	4.x
Data Fetching	TanStack Query	5.x
HTTP Client	Axios	1.7+
Auth	Custom JWT	-
Monorepo	Turborepo	2.x

Prerequisites

• Node.js 20+
• PostgreSQL 16+
• npm 10+

Getting Started

1. Clone & Install

git clone <repo-url> mypkp
cd mypkp
npm install

2. Configure Environment

cp .env.example apps/web/.env.local
# Edit apps/web/.env.local with your database credentials and secrets

3. Setup Database

# Push schema to database
npm run db:push

# Seed initial data (roles, permissions, users, sample data)
npm run db:seed

# Or use migrations for production
npm run db:migrate

4. Run Development Server

# Web (port 3000)
npm run dev --workspace=apps/web

# Mobile (Expo dev server)
npm run dev --workspace=apps/mobile

# Or run all with Turborepo
npm run dev

5. Open in Browser

Navigate to http://localhost:3000

Project Structure

mypkp/
├── apps/
│   ├── web/                    # Next.js 15 web application
│   │   ├── prisma/             # Database schema & seed
│   │   ├── middleware/         # Auth & role middleware
│   │   └── src/
│   │       ├── app/            # App Router pages & API routes
│   │       ├── components/     # UI components (shared + module-specific)
│   │       ├── hooks/          # Zustand stores + TanStack Query hooks
│   │       ├── services/       # API service layer (Axios)
│   │       ├── lib/            # Utilities, auth, prisma client
│   │       ├── types/          # TypeScript type definitions
│   │       └── validations/    # Zod validation schemas
│   └── mobile/                 # Expo React Native app
│       ├── app/                # Expo Router screens
│       ├── components/         # React Native components
│       ├── hooks/              # Mobile-specific hooks
│       ├── services/           # API service layer (Axios + SecureStore)
│       └── lib/                # Utilities & constants
├── packages/
│   └── shared/                 # Shared types, schemas, constants
├── docker-compose.yml          # Docker setup
├── turbo.json                  # Turborepo config
└── package.json                # Monorepo root

Default Accounts (from seed)

Role	NIP	Password	Name
Super Admin	199001010001011001	admin123	Super Administrator
Admin	199001010001011002	admin123	Administrator
Pejabat	196501151990011001	pejabat123	Dr. Bambang Sutrisno
Staf	199001152015011001	staf123	Ibnu Subkhan

Modules

E-Surat

• Surat Masuk: Registration, indexing, disposisi chain
• Surat Keluar: Drafting, koreksi workflow, digital signing
• Memo: Internal memos
• Disposisi: Multi-level with tindak lanjut tracking
• Monitoring: Real-time dashboard with overdue alerts
• Arsip: Document archiving

E-Presensi

• Clock-in/out with GPS location
• Mode selection: WFO, WFA, Dinas Luar
• Automatic lateness detection by timezone (WIB/WITA/WIT)
• Monthly history & admin recap

E-Cuti

• Leave request with working day calculation
• Automatic balance deduction on approval
• Approval workflow with notifications

E-SPPD

• Travel order submission and approval
• PDF generation for official documents

Other Modules

• Buku Tamu: Guest registration with host notification
• IT Support: Ticket system with real-time chat
• Reservasi: Vehicle and room booking with availability check
• Kontak: Employee directory with search
• Agenda: Calendar with color-coded events
• E-Filing: Document management with upload
• Notifikasi: Real-time notifications across all modules
• Admin Panel: User management, organizational structure, roles & permissions, master data, audit log

Available Scripts

# Development
npm run dev                           # Start all apps (Turborepo)
npm run dev --workspace=apps/web      # Web only

# Build
npm run build                         # Build all apps
npm run build --workspace=apps/web    # Web only

# Database
npm run db:push                       # Push schema to database
npm run db:migrate                    # Run migrations
npm run db:seed                       # Seed initial data
npm run db:studio                     # Open Prisma Studio

# Lint
npm run lint                          # Lint all apps

Deployment

Vercel (Web)

1. Connect GitHub repo to Vercel
2. Set root directory to apps/web
3. Configure environment variables in dashboard
4. Deploy — auto-deploys on push to main

Docker

# Start web app + PostgreSQL
docker-compose up -d

# Run migrations
docker-compose exec web npx prisma migrate deploy --schema=apps/web/prisma/schema.prisma

# Seed data
docker-compose exec web npx prisma db seed --schema=apps/web/prisma/schema.prisma

EAS Build (Mobile)

# Install EAS CLI
npm install -g eas-cli

# Configure API URL
eas secret:create --name EXPO_PUBLIC_API_URL --value https://your-domain.com/api

# Build
eas build --platform android --profile preview   # APK for testing
eas build --platform all --profile production     # Store submission

API Health Check

GET /api/health

Returns { status: "ok", timestamp, version, db: "connected" }.

Environment Variables

See .env.example for all available configuration options.

Architecture

• Auth: Custom JWT with access token (15min) + refresh token (7 days)
  • Web: refresh token in HttpOnly cookie
  • Mobile: refresh token in SecureStore, body-based refresh endpoint
• RBAC: 5 roles (SUPER_ADMIN, ADMIN, PEJABAT, STAF, TU) with granular permissions
• Database: 27 Prisma models with 18 enums
• API: ~60+ REST endpoints with standardized response format
• State: Zustand for client state, TanStack Query for server state

License

Internal use — Kementerian Perumahan dan Kawasan Permukiman.