Website Sistem Kasir untuk UMKM Alat Tulis ini dirancang untuk membantu digitalisasi proses penjualan dan pengelolaan toko agar lebih efisien dan terorganisir. Sistem ini mendukung dua peran utama, yaitu Admin (pemilik toko) dan Karyawan (kasir), yang masing-masing memiliki hak akses sesuai kebutuhan operasional. Admin dapat mengelola produk, stok barang, laporan penjualan, serta data pengguna, sementara kasir dapat melakukan transaksi penjualan dan mencetak struk. Website ini dibangun dengan antarmuka yang responsif, ramah pengguna, dan dapat diakses melalui perangkat desktop secara lokal. Selain itu, sistem ini juga menyediakan fitur pencarian barang, histori transaksi, serta laporan yang membantu pemilik toko dalam menganalisis performa penjualan. Dengan fitur-fitur tersebut, sistem ini diharapkan dapat menjadi solusi praktis dan terjangkau untuk meningkatkan produktivitas dan akurasi operasional UMKM di bidang alat tulis.
Berikut adalah Url Prodi Pendidikan Teknologi Informasi:
🔗 https://pendidikan-ti.ft.unesa.ac.id/
🔗 https://scriptoria-indol.vercel.app/
U: admin P:admin1234
| No. | Nama | NIM |
|---|---|---|
| 1. | Madhuri Lailatul Hamidah | 23050974057 |
| 2. | Febti Sofia Loren | 23050974058 |
| 3. | Muhammad Alfan Muwaffiqul Ihsan | 23050974072 |
| 4. | Narendra Adi Nugraha | 23050974076 |
- Frontend: Next.js (Pages Router) + TypeScript
- Styling: CSS Modules
- Backend/API: Next.js API Routes (untuk notifikasi)
- Database: Supabase (PostgreSQL)
- Storage: Supabase Storage
- QR Scanner:
html5-qrcode/react-qr-reader - Chart: Recharts
- Realtime: Supabase Realtime Subscriptions
- Deployment: Vercel
| Method | Endpoint | Deskripsi |
|---|---|---|
| GET | /api/notification |
Mengambil daftar notifikasi |
| POST | /api/notification |
Menambahkan notifikasi baru |
Catatan: Data produk, transaksi, dan pengguna dikelola langsung melalui Supabase.
public/ # Aset publik (logo, gambar)
src/
├── components/ # Komponen UI seperti CardProduk, Header, dll.
├── lib/ # Konfigurasi Supabase Client
├── pages/ # Halaman utama (dashboard, kasir, login)
│ └── api/notification # API routes notifikasi
- Login berdasarkan peran (Admin/Karyawan)
- Manajemen Karyawan (khusus Admin)
- Manajemen Produk
- Manajemen Penjualan & Transaksi
- Laporan Keuangan (khusus Admin)
- Komunikasi Internal melalui Catatan
Admin memiliki akses penuh ke seluruh fitur dalam sistem.
- Masuk menggunakan username dan password sebagai pemilik toko.
- Create: Tambah karyawan baru (Nama, Username, Password, Role)
- Read: Lihat daftar karyawan
- Update: Edit data karyawan
- Delete: Hapus karyawan yang sudah keluar
- Create: Tambah produk baru (Nama Produk, Harga, Stok)
- Read: Lihat semua produk
- Update: Ubah nama atau harga produk
- Delete: Hapus produk yang tidak dijual lagi Generate QR code otomatis
- Create: Tambahkan produk ke keranjang
- Read: Lihat daftar produk dalam keranjang
- Update: Ubah jumlah pembelian
- Delete: Hapus produk dari keranjang
- Create: Buat transaksi baru dan nota penjualan
- Read: Lihat detail transaksi
- Update: Koreksi data transaksi
- Delete: Hapus transaksi dengan konfirmasi scan qr
- Read: Lihat laporan penjualan harian dan bulanan otomatis dari transaksi
- Admin dapat mengirimkan pesan, perintah, atau instruksi kerja ke karyawan (satu arah)
- Karyawan dapat memberikan validasi atau tanggapan atas tugas yang diberikan
Karyawan memiliki akses terbatas sesuai kebutuhan operasional kasir.
- Masuk menggunakan akun karyawan dengan hak akses terbatas.
- Create: Tambah produk baru
- Read: Lihat daftar produk
- Update: Ubah harga atau nama produk
- Delete: Hapus produk yang tidak tersedia
- Create: Tambahkan produk ke keranjang
- Read: Lihat daftar produk dalam keranjang
- Update: Ubah jumlah pembelian
- Delete: Hapus produk dari keranjang
- Create: Buat transaksi baru dan cetak nota
- Read: Lihat detail transaksi
- Update: Koreksi data transaksi
- Delete: Hapus transaksi (dengan konfirmasi)
- Karyawan dapat melihat pesan dari Admin dan mengirimkan validasi atau respon atas tugas
- Menggunakan UI/UX sederhana dan responsif
- Role-based access control manual (tanpa Supabase Auth)
- Komunikasi internal berbasis catatan tugas
- Penyimpanan file terintegrasi dengan Supabase Storage
Open Source — bebas digunakan dan dimodifikasi sesuai kebutuhan, dengan tetap mencantumkan atribusi yang sesuai.
- Clone repository
git clone https://github.com/apikapikk/scriptoria.git cd scriptoria
Install dependencies
npm install
yarn install
Buat file konfigurasi .env.local Contoh isi file .env.local (gunakan kredensial dari Supabase kalian):
NEXT_PUBLIC_SUPABASE_URL=your_supabase_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key
buat database di sql editor supabase, masukkan database dengan cara copy dari folder _database
Jalankan di mode development
npm run dev
Aplikasi akan berjalan di: http://localhost:3000