Mendigitalisasi proses peminjaman ruangan & peralatan kampus
untuk organisasi mahasiswa HIMSI (Himpunan Mahasiswa Sistem Informasi)
Fitur Tech Stack Arsitektur Setup Database Kontribusi
|
|
| Fitur | Deskripsi | |
|---|---|---|
| 🔐 | Auth System | Login/Register dengan Supabase Auth + Role-based access (Mahasiswa & Admin) |
| 📊 | Bento Grid Dashboard | Ringkasan real-time: stat cards, status fasilitas, booking terbaru |
| 📅 | Weekly Calendar | Kalender mingguan interaktif — lihat slot kosong per fasilitas |
| ⚡ | Conflict Detection | Validasi otomatis mencegah jadwal bentrok sebelum submit |
| ✅ | Admin Approval | Workflow persetujuan real-time: approve/reject dengan satu klik |
| 🎫 | Digital Pass | Kartu pinjam digital + QR Code setelah booking disetujui |
| 🔄 | Realtime Updates | Status booking terupdate otomatis via Supabase Realtime |
| 📱 | Responsive | Sempurna di desktop & mobile dengan slide-out navigation |
┌─────────────────────────────────────────────────────────────┐
│ │
│ Frontend Backend Extras │
│ ───────── ────── ────── │
│ ▸ Next.js 16 ▸ Supabase ▸ Framer Motion │
│ ▸ React 19 ▸ PostgreSQL ▸ qrcode.react │
│ ▸ TypeScript 5 ▸ Row Level ▸ date-fns │
│ ▸ Tailwind v4 Security ▸ Lucide Icons │
│ ▸ Realtime │
│ │
│ Design │
│ ────── │
│ ▸ Dark Mode ▸ Glassmorphism ▸ Glow Effects │
│ ▸ Inter + JetBrains Mono ▸ Spring Animations │
│ │
└─────────────────────────────────────────────────────────────┘
src/
├── app/
│ ├── (auth)/ # 🔐 Login & Register
│ │ ├── login/page.tsx
│ │ └── register/page.tsx
│ ├── (dashboard)/ # 📊 User Pages
│ │ ├── dashboard/page.tsx # Bento Grid Dashboard
│ │ ├── booking/ # Booking System
│ │ │ ├── page.tsx # Weekly Calendar
│ │ │ └── new/page.tsx # New Booking Form
│ │ ├── my-bookings/page.tsx # Booking History
│ │ ├── facilities/page.tsx # Facility Catalog
│ │ └── digital-pass/[id]/ # 🎫 QR Digital Pass
│ ├── (admin)/ # 🛡️ Admin Pages
│ │ ├── admin/page.tsx # Admin Dashboard
│ │ ├── admin/approvals/ # Approval Queue
│ │ └── admin/facilities/ # CRUD Facilities
│ ├── globals.css # 🎨 Design System
│ ├── layout.tsx # Root Layout
│ └── template.tsx # Page Transitions
│
├── components/
│ ├── ui/ # 🧱 Primitives (Button, Card, Modal, ...)
│ ├── layout/ # 📐 Sidebar, Topbar, MobileNav
│ ├── dashboard/ # 📊 BentoGrid, StatCard
│ ├── booking/ # 📅 BookingCard, WeeklyCalendar
│ └── digital-pass/ # 🎫 DigitalPassCard + QR
│
├── lib/
│ ├── supabase/ # 🔌 Client & Server instances
│ ├── utils/ # 🔧 conflictCheck, dateHelpers, cn
│ └── types/ # 📝 Database TypeScript types
│
├── hooks/ # 🪝 useAuth, useRealtime
└── middleware.ts # 🛡️ Auth guard + Role check
- Node.js 18+
- npm 9+
- Akun Supabase (gratis)
git clone https://github.com/Afta20/Booking-system.git
cd Booking-system
npm install# Copy environment template
cp .env.local.example .env.localEdit .env.local dengan credentials dari Supabase Dashboard → Settings → API:
NEXT_PUBLIC_SUPABASE_URL=https://your-project.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key-hereBuka Supabase Dashboard → SQL Editor → New Query → paste isi file supabase/schema.sql → Run
Ini akan membuat:
- ✅ Tabel
profiles,facilities,bookings - ✅ Row Level Security policies
- ✅ Auto-profile trigger saat register
- ✅ Conflict check function
- ✅ Realtime subscriptions
- ✅ 8 fasilitas sample (seed data)
npm run devBuka http://localhost:3000 🎉
- Register akun baru di app
- Buka Supabase → Table Editor →
profiles - Ubah
rolekeadmin - Refresh app — menu admin muncul!
erDiagram
profiles ||--o{ bookings : creates
facilities ||--o{ bookings : "booked for"
profiles ||--o{ bookings : approves
profiles {
uuid id PK
text full_name
text npm UK
text role "mahasiswa | admin"
text avatar_url
timestamptz created_at
}
facilities {
uuid id PK
text name
text type "room | tool"
text description
text status "available | in_use | maintenance"
text image_url
text location
int capacity
}
bookings {
uuid id PK
uuid user_id FK
uuid facility_id FK
timestamptz start_time
timestamptz end_time
text status "pending | approved | rejected | cancelled"
text purpose
text notes
text admin_notes
uuid approved_by FK
timestamptz approved_at
}
| Aspek | Implementasi |
|---|---|
| 🌑 | Dark Mode — Near-black backgrounds (#0a0a0f) for reduced eye strain |
| 💎 | Glassmorphism — backdrop-blur + semi-transparent layers + subtle borders |
| ✨ | Glow Effects — Accent-colored box shadows activated on hover |
| 🎯 | Electric Blue #00D4FF — Primary accent for actions & focus states |
| 🟢 | Emerald Green #10B981 — Success states & secondary accent |
| 🔤 | Inter + JetBrains Mono — Modern sans-serif + monospace for data |
| 🎬 | Spring Physics — Framer Motion spring animations on all interactive elements |
graph LR
A[Register] --> B[Login]
B --> C[Dashboard]
C --> D[Pilih Fasilitas]
D --> E[Isi Form Booking]
E --> F{Conflict?}
F -->|Ya| E
F -->|Tidak| G[Submit - Pending]
G --> H[Admin Review]
H -->|Approve| I[✅ Digital Pass + QR]
H -->|Reject| J[❌ Ditolak]
style A fill:#0a0a0f,stroke:#00D4FF,color:#E2E8F0
style B fill:#0a0a0f,stroke:#00D4FF,color:#E2E8F0
style C fill:#0a0a0f,stroke:#00D4FF,color:#E2E8F0
style D fill:#0a0a0f,stroke:#10B981,color:#E2E8F0
style E fill:#0a0a0f,stroke:#10B981,color:#E2E8F0
style F fill:#0a0a0f,stroke:#F59E0B,color:#E2E8F0
style G fill:#0a0a0f,stroke:#F59E0B,color:#E2E8F0
style H fill:#0a0a0f,stroke:#8B5CF6,color:#E2E8F0
style I fill:#0a0a0f,stroke:#10B981,color:#10B981
style J fill:#0a0a0f,stroke:#EF4444,color:#EF4444
- Row Level Security (RLS) — Setiap tabel dilindungi policies
- Server-side validation — Conflict check di database level
- Cookie-based sessions —
@supabase/ssruntuk auth yang aman - Middleware protection — Route guard + admin role check
- Environment variables — Credentials tidak pernah di-commit
Contributions welcome! Silakan fork dan buat pull request.
# Fork → Clone → Branch → Code → Push → PR
git checkout -b feature/fitur-baru
git commit -m "feat: tambah fitur baru"
git push origin feature/fitur-baruDibuat dengan ❤️ untuk HIMSI — Himpunan Mahasiswa Sistem Informasi
⬡ HIMSI Book — Booking fasilitas kampus, tanpa drama jadwal bentrok.
Built with Next.js 16 · React 19 · Tailwind v4 · Supabase · Framer Motion