💰 Tabungan Siswa

Sistem manajemen tabungan siswa berbasis web yang dikelola oleh guru. Dibangun dengan teknologi modern untuk kemudahan penggunaan di perangkat mobile.

✨ Fitur

• 🔐 Autentikasi Guru — Login aman dengan email & password
• 🏠 Dashboard — Ringkasan total saldo, jumlah siswa, dan transaksi hari ini
• ➕ Input Transaksi — Catat setoran & penarikan dalam satu halaman
• 💰 Quick Amount — Preset nominal (5rb, 10rb, 20rb, 50rb, 100rb) untuk input cepat
• 👥 Manajemen Siswa — Tambah, lihat, dan hapus data siswa
• 📋 Detail Siswa — Lihat saldo dan riwayat transaksi per siswa
• 📜 Riwayat Transaksi — Semua transaksi dikelompokkan per tanggal dengan filter
• 🔢 Saldo Otomatis — Kalkulasi otomatis dari total setoran - penarikan
• ⚠️ Validasi Saldo — Penarikan tidak bisa melebihi saldo tersedia
• 📱 Mobile-First — Tampilan optimal untuk HP seperti aplikasi Android
• 📲 PWA — Bisa di-install di HP (Add to Home Screen)

🛠 Tech Stack

Teknologi	Fungsi
Next.js 16	React framework (App Router)
Supabase	PostgreSQL database + authentication
TypeScript	Type safety
Vercel	Deployment platform
Vanilla CSS	Styling (CSS Modules)

📸 Screenshots

🚀 Getting Started

Prerequisites

• Node.js 18+
• Supabase account & project

1. Clone Repository

git clone https://github.com/thundermalabi-del/tabungan.git
cd tabungan

2. Install Dependencies

npm install

3. Setup Environment

Buat file .env.local di root project:

NEXT_PUBLIC_SUPABASE_URL=your-supabase-project-url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-supabase-anon-key

4. Setup Database

Jalankan SQL di supabase/schema.sql pada Supabase SQL Editor untuk membuat tabel dan fungsi yang diperlukan.

5. Buat Akun Guru

Di Supabase Dashboard → Authentication → Users → Add User (email + password).

6. Jalankan

npm run dev

Buka http://localhost:3000 dan login dengan akun guru.

📁 Project Structure

src/
├── app/
│   ├── globals.css          # Design system
│   ├── layout.tsx           # Root layout + PWA
│   ├── login/               # Login page
│   ├── actions/             # Server actions (CRUD)
│   └── (main)/
│       ├── page.tsx          # Dashboard
│       ├── input/            # Input transaksi
│       ├── students/         # Daftar & detail siswa
│       └── history/          # Riwayat transaksi
├── components/
│   └── BottomNav.tsx         # Bottom navigation
├── lib/
│   ├── supabase/             # Supabase clients
│   └── utils.ts              # Utility functions
└── middleware.ts             # Auth guard

supabase/
└── schema.sql               # Database schema

🗄 Database Schema

Tabel	Deskripsi
tab_profiles	Profil guru (linked to auth.users)
tab_students	Data siswa (nama, kelas, orang tua)
tab_transactions	Transaksi setoran & penarikan

🌐 Deploy ke Vercel

1. Push repository ke GitHub
2. Import project di vercel.com
3. Tambahkan environment variables
4. Deploy ✅

📄 License

MIT License — feel free to use and modify.