Skip to content

About

Aplikasi Web Point of Sale (POS) kasir & manajemen inventaris multi-gudang dengan chat internal toko real-time, WhatsApp PO supplier, dan analitik penjualan. Dibuat dengan React 18, TypeScript, Tailwind CSS, Prisma ORM, & PostgreSQL.

Topics

Resources

Stars

1 star

Watchers

0 watching

Forks

Repository files navigation

πŸ›’ POS Web Zalde

Live Demo CI Quality Gate TypeScript React Prisma PostgreSQL

🌐 Live Production Demo: https://pos-web-zalde.vercel.app

A modern, fast, and responsive Point of Sale (POS) Terminal, Multi-Warehouse Inventory Management, Real-Time Store & Warehouse Communication Chat, & Sales Analytics Dashboard built with React 18, TypeScript, Tailwind CSS, Node.js Native Serverless API, Prisma ORM, and PostgreSQL (Local & Neon Cloud).


πŸ”„ Workflow Operasional & Hak Akses 3 Role

flowchart LR
    %% Styling Classes
    classDef roleAdmin fill:#1e1b4b,stroke:#8b5cf6,stroke-width:2px,color:#f3e8ff
    classDef roleKasir fill:#064e3b,stroke:#10b981,stroke-width:2px,color:#ecfdf5
    classDef roleGudang fill:#451a03,stroke:#f59e0b,stroke-width:2px,color:#fffbeb
    classDef stepNode fill:#0f172a,stroke:#334155,stroke-width:1.5px,color:#f8fafc
    classDef highlightNode fill:#065f46,stroke:#34d399,stroke-width:2px,color:#ffffff

    %% 1. ROLES DEFINITION
    subgraph ROLES[" πŸ‘₯ 3 ROLE & HAK AKSES HASIL "]
        direction TB
        ADMIN["πŸ‘‘ <b>ADMIN (BOS)</b><br/>β€’ Full Access Semua Halaman<br/>β€’ Dashboard, POS, Produk, Stok, Supplier, Chat, Reports"]:::roleAdmin
        KASIR["πŸ›’ <b>PENJAGA TOKO (KASIR)</b><br/>β€’ POS Kasir (/pos)<br/>β€’ Produk Etalase (/products)<br/>β€’ Riwayat Transaksi (/orders)<br/>β€’ Chat Toko & Gudang"]:::roleKasir
        GUDANG["πŸ“¦ <b>STAFF GUDANG</b><br/>β€’ Produk Etalase (/products)<br/>β€’ Kategori Produk (/categories)<br/>β€’ Stok Gudang (/inventory)<br/>β€’ Chat Toko & Gudang"]:::roleGudang
    end

    %% 2. KASIR WORKFLOW
    subgraph KASIR_FLOW[" πŸ›’ WORKFLOW KASIR (TOKO DEPAN) "]
        direction TB
        K1["1️⃣ Buka Terminal POS Kasir"]:::stepNode --> K2["2️⃣ Layani Transaksi Pembeli"]:::stepNode
        K2 --> K3{"Stok Etalase ≀ 5?"}:::stepNode
        K3 -- Ya --> K4["πŸ“’ Kirim Chat Restok ke Gudang"]:::stepNode
        K2 --> K5["πŸ”” Penutupan Toko (Daily Closing)"]:::stepNode
        K5 --> K6["πŸ“Š Export & Simpan Laporan Excel Harian"]:::highlightNode
    end

    %% 3. GUDANG WORKFLOW
    subgraph GUDANG_FLOW[" πŸ“¦ WORKFLOW STAFF GUDANG "]
        direction TB
        G1["πŸ“© Terima Notifikasi Chat Restok"]:::stepNode --> G2["πŸ” Cek Stok Cadangan Gudang"]:::stepNode
        G2 --> G3["🚚 Transfer Stok Gudang ke Etalase"]:::stepNode
        G3 --> G4["βœ… Konfirmasi Selesai via Chat"]:::stepNode
    end

    %% CONNECTIVITY
    KASIR ==> KASIR_FLOW
    GUDANG ==> GUDANG_FLOW
    ADMIN -. Akses Penuh .-> KASIR_FLOW
    ADMIN -. Akses Penuh .-> GUDANG_FLOW
Loading

πŸ› οΈ Tech Stack & Architecture

Frontend Framework & UI

  • React 18 (TypeScript): High-performance Single Page Application (SPA).
  • Vite: Ultra-fast build tool and local development server with chunk splitting (vendor, recharts, icons).
  • Retro-Modern System 7 Mac OS Design System: Custom nostalgic Mac OS Classic theme (window titlebars, traffic light controls, beveled mac-buttons, mac-tables, dan rainbow badge).
  • Modular & Anti-Monolith Architecture: 100% file mematuhi batas SRP (Single Responsibility Principle) & hard ceiling < 200 baris per file.
  • Custom Hooks Separation: Seluruh state management dan interaksi API dipisahkan dari layer view (usePos, useInventory, useSupplierOrders, useDashboard, useChat, dll).
  • Centralized Shared Utilities: Standardisasi helper format (format.ts) dan penanganan error bertipe ketat (error.ts).
  • Recharts: Interactive sales analytics graphs & financial charts.
  • Lucide React: Clean & modern iconography.
  • React Router DOM: SPA client-side routing (/, /pos, /products, /categories, /inventory, /supplier-orders, /suppliers, /orders).
  • Role Context & State Management: Global user role manager (src/context/RoleContext.tsx) for switching between Kasir (Toko Depan), Staff Gudang, and Admin Toko with localStorage persistence.
  • Browser WebP Auto-Compressor: Built-in client-side image processing utility (src/lib/imageCompressor.ts) converting uploaded product images to WebP format (~15 KB – 25 KB) with 95%+ DB payload savings.

Backend & Database Architecture

  • Node.js Native Serverless API: Lightweight, zero-dependency REST API handler located at api/index.ts fully compatible with Vercel Serverless Functions & local Node.js.
  • Prisma ORM: Type-safe ORM for schema management (prisma/schema.prisma).
  • PostgreSQL Database Engine:
    • Local Development: Local PostgreSQL Server (pos_zalde_dev on localhost:5432) for fast, robust local development.
    • Production Deployment: PostgreSQL (Neon Cloud Serverless) for Vercel production hosting.
    • Full DB Models: Category, Product (Dual Stock: Etalase + Gudang), Order, OrderItem, Supplier, and ChatMessage.

Testing & Deployment

  • Bun Test Suite: High-speed integration test runner (tests/integration.test.ts) running all 7 test suites against PostgreSQL.
  • TypeScript Typecheck: Strict tsc --noEmit dengan 0 compile error.
  • Vercel Deployment: Serverless Functions hosting (/api/*) + SPA Client static hosting.

πŸ—„οΈ Entity Relationship Diagram (ERD)

Visualisasi relasi antar entitas database PostgreSQL (Prisma ORM):

erDiagram
    Category ||--o{ Product : "contains (1-to-N)"
    Product ||--o{ OrderItem : "ordered_in (1-to-N)"
    Order ||--o{ OrderItem : "includes (1-to-N)"

    Category {
        string id PK
        string name UK
        datetime createdAt
    }

    Product {
        string id PK
        string sku UK
        string name
        float price
        float costPrice
        int stock "Stok Etalase"
        int warehouseStock "Stok Gudang"
        string categoryId FK
        string imageUrl
        datetime createdAt
        datetime updatedAt
    }

    Order {
        string id PK
        string orderNumber UK
        float totalAmount
        float paymentAmount
        float changeAmount
        string paymentMethod
        datetime createdAt
    }

    OrderItem {
        string id PK
        string orderId FK
        string productId FK
        int quantity
        float price
    }

    Supplier {
        string id PK
        string companyName
        string contactPerson
        string phone
        string whatsapp
        string email
        string address
        string categorySupply
        string notes
        datetime createdAt
        datetime updatedAt
    }

    ChatMessage {
        string id PK
        string senderRole "KASIR | GUDANG | ADMIN"
        string senderName
        string message
        boolean isQuickMsg
        datetime createdAt
    }
Loading

πŸ“‚ Code Structure & Modular Architecture

Struktur direktori menerapkan prinsip One-Shot Modular & Colocation:

  • Komponen UI dipisah berdasarkan domain fungsional (pos, inventory, orders, suppliers, supplier-orders, categories, dashboard, chat, auth).
  • State logic dipisahkan ke dedicated Custom Hooks (use*.ts).
  • Semua file berada di bawah batas keras < 200 baris (Pages rata-rata < 85 baris).
pos-web-zalde/
β”œβ”€β”€ api/
β”‚   └── index.ts               # Serverless API Handler (Products, Categories, Orders, Suppliers, Chat, Dashboard)
β”œβ”€β”€ docs/
β”‚   └── PRD_POS_Dashboard.md   # Product Requirement Document (Fitur, UI/UX, & Skema DB)
β”œβ”€β”€ prisma/
β”‚   β”œβ”€β”€ schema.prisma          # Skema Database PostgreSQL (Category, Product, Order, OrderItem, Supplier, ChatMessage)
β”‚   β”œβ”€β”€ syncToCloud.ts         # Skrip penarik & migrasi data lokal PostgreSQL βž” Neon Cloud PostgreSQL
β”‚   β”œβ”€β”€ syncFromCloud.ts       # Skrip penarik & migrasi data live Neon Cloud βž” Local PostgreSQL
β”‚   └── seed.ts                # Script seeding data sampel (Kategori, Produk, Supplier, & Transaksi)
β”œβ”€β”€ src/
β”‚   β”œβ”€β”€ components/
β”‚   β”‚   β”œβ”€β”€ auth/              # System7LoginWindow, System7TopMenuBar, useLogin
β”‚   β”‚   β”œβ”€β”€ categories/        # CategoryCardGrid, CategoryFormModal, useCategories
β”‚   β”‚   β”œβ”€β”€ chat/              # ChatDrawer, useChat (Internal Store & Warehouse Messaging)
β”‚   β”‚   β”œβ”€β”€ common/            # Modal, Toast, Skeleton, ProductImage (Shared Reusable UI)
β”‚   β”‚   β”œβ”€β”€ dashboard/         # DashboardKpiCards, SalesAreaChart, LowStockAlertTable, useDashboard
β”‚   β”‚   β”œβ”€β”€ inventory/         # InventoryTable, InventoryTableRow, InventoryMetricsHeader,
β”‚   β”‚   β”‚                      # ProductDetailModal, ProductFormModal, TransferStockModal,
β”‚   β”‚   β”‚                      # WarehouseRestockModal, DeleteConfirmModal, useInventory,
β”‚   β”‚   β”‚                      # useProductForm, useStockTransfer
β”‚   β”‚   β”œβ”€β”€ layout/            # System7TopMenuBar, Layout wrapper, FAB Chat button
β”‚   β”‚   β”œβ”€β”€ orders/            # OrdersTable, OrderDetailReceiptModal, OrdersKpis, useOrdersHistory
β”‚   β”‚   β”œβ”€β”€ pos/               # CartPanel, ProductCatalogGrid, CheckoutPaymentModal,
β”‚   β”‚   β”‚                      # ReceiptModal, PosHeaderBar, usePos, usePosCheckout, useCart
β”‚   β”‚   β”œβ”€β”€ supplier-orders/   # SupplierOrderTable, SupplierOrderKpis, EditCostPriceModal,
β”‚   β”‚   β”‚                      # useSupplierOrders, useEditCostPrice
β”‚   β”‚   └── suppliers/         # SupplierCardGrid, SupplierFormModal, useSuppliers,
β”‚   β”‚                          # useSupplierModal, useDeleteSupplier
β”‚   β”œβ”€β”€ context/
β”‚   β”‚   └── RoleContext.tsx    # State Management & Role Switcher (Kasir, Staff Gudang, Admin Toko)
β”‚   β”œβ”€β”€ lib/
β”‚   β”‚   β”œβ”€β”€ api.ts             # Client API fetch wrapper dengan error handling & fallback login
β”‚   β”‚   └── imageCompressor.ts # Browser WebP auto-compressor module (Resize + WebP 75%)
β”‚   β”œβ”€β”€ pages/                 # Orchestrator Container tipis (< 85 baris)
β”‚   β”‚   β”œβ”€β”€ DashboardPage.tsx     # Dashboard analytics & grafik omset harian
β”‚   β”‚   β”œβ”€β”€ PosPage.tsx           # Terminal Kasir POS
β”‚   β”‚   β”œβ”€β”€ ProductsPage.tsx      # Katalog Produk Etalase & File Upload WebP
β”‚   β”‚   β”œβ”€β”€ CategoriesPage.tsx    # CRUD Kategori Produk
β”‚   β”‚   β”œβ”€β”€ InventoryPage.tsx     # Stok Gudang & Restock Etalase Kasir
β”‚   β”‚   β”œβ”€β”€ SupplierOrdersPage.tsx# Order Pasokan Supplier (Qty Stepper, Cost Price Modal, WA PO)
β”‚   β”‚   β”œβ”€β”€ SuppliersPage.tsx     # Direktori Kontak Supplier & WhatsApp Quick Chat
β”‚   β”‚   β”œβ”€β”€ OrdersHistoryPage.tsx # Riwayat Transaksi Penjualan, Struk, & Export Excel
β”‚   β”‚   └── LoginPage.tsx         # Classic System 7 Login Page
β”‚   β”œβ”€β”€ types/                 # Interface TypeScript (Product, Category, Order, Supplier, CartItem, ChatMessage)
β”‚   β”œβ”€β”€ utils/
β”‚   β”‚   β”œβ”€β”€ format.ts          # Centralized Formatters (Currency IDR, Date, Time, WhatsApp Sanitizer)
β”‚   β”‚   └── error.ts           # Strict Unknown Error Parser (getErrorMessage)
β”‚   β”œβ”€β”€ App.tsx                # Client Routing (React Router DOM) & RoleProvider Wrapper
β”‚   β”œβ”€β”€ main.tsx               # Entrypoint React Vite
β”‚   └── index.css              # Custom System 7 Retro Theme & Tailwind CSS Design Tokens
β”œβ”€β”€ tests/
β”‚   └── integration.test.ts    # Integration Test Suite (API ↔ Prisma ORM ↔ PostgreSQL - 7 Test Cases)
β”œβ”€β”€ .env                       # Variabel lingkungan lokal (Local Postgres / Neon Cloud)
β”œβ”€β”€ package.json               # Dependensi & NPM Scripts (dev, server, test, lint, db:push, db:sync:to-cloud)
β”œβ”€β”€ tailwind.config.js         # Konfigurasi Tailwind CSS theme
β”œβ”€β”€ vercel.json                # Konfigurasi Vercel deployment & includeFiles Prisma
└── vite.config.ts             # Vite server proxy & rollup manual chunks

🌟 Fitur Utama & Pembaruan Terkini (Recent Updates)

1. Penyempurnaan Arsitektur & Clean Code (Zero-Monolith Refactor)

  • Sentralisasi Format Helpers (src/utils/format.ts):
    • Standarisasi formatCurrency (IDR), formatDate, formatTime, dan cleanWhatsAppNumber.
    • Mengeliminasi deklarasi Intl.NumberFormat berulang di belasan komponen.
  • Sentralisasi Error Handling (src/utils/error.ts):
    • Fungsi getErrorMessage(error: unknown) yang aman dari runtime crash (menangani instance Error, objek API respons, dan fallback string).
    • 100% bebas dari catch (err: any) liar pada seluruh 25 blok catch di frontend hooks & API client.
  • Deduplikasi Komponen Gambar (src/components/common/ProductImage.tsx):
    • Komponen tunggal dengan fallback placeholder aman jika gambar rusak atau tidak tersedia.
    • Dipakai seragam di katalog POS, keranjang, purchase order supplier, etalase produk, dan inventaris gudang.
  • Single Responsibility Principle (SRP):
    • Seluruh file < 200 baris (file halaman rata-rata hanya 50 - 85 baris).
    • Pemisahan total antara rendering UI dan logika bisnis/state.

2. Chat Komunikasi Internal Toko & Gudang (ChatDrawer.tsx)

  • Floating Chat Widget: Akses chat serbaguna dari tombol melayang (Floating Action Button) di sudut kanan bawah setiap halaman tanpa mengganggu transaksi kasir.
  • Deteksi Role & Pemilih Role (Role Switcher): Penjaga toko dapat beralih peran secara instan antara πŸ›’ Penjaga Toko Depan (Kasir), πŸ“¦ Staff Gudang, dan πŸ‘‘ Admin Toko dari header widget chat dengan warna gelembung & badge role yang berbeda.
  • Preset Pesan Cepat (Quick Templates): Kirim permintaan restok etalase dalam 1-klik (πŸ“’ Minta Restok Etalase, βœ… Stok Etalase Diisi, ⚠️ Stok Gudang Menipis).
  • Filter Produk Target Low Stock: Dropdown pemilih produk secara otomatis menyaring dan hanya menampilkan produk yang stok etalasenya menipis (≀ 5 unit).
  • Auto-Sync & Real-Time Polling: Pesan tersinkronisasi otomatis antar tab/peramban setiap 3 detik.

3. Order Pasokan Supplier (/supplier-orders)

  • Tabel Restock Interaktif: Foto/nama produk, supplier tujuan, stok cadangan gudang, harga modal, harga jual etalase, pengatur kuantitas (Qty Stepper + / -), dan kalkulasi otomatis total bayar ke supplier.
  • Interactive Edit Harga Modal: Pengguna dapat memperbarui Harga Modal (Beli) produk secara langsung dari tabel aksi, tersimpan permanen di database PostgreSQL dengan kalkulator margin keuntungan real-time.
  • 1-Click WhatsApp Purchase Order (PO): Generasi otomatis pesan PO terstruktur dengan detail produk, SKU, kuantitas, harga modal, harga jual, dan total tagihan yang langsung membuka WhatsApp Web/Desktop.
  • Filter Status Gudang: Filter instant Semua Produk, ⚠️ Gudang Menipis (≀ 5 unit), dan 🚫 Gudang Kosong.

4. Direktori Kontak Supplier Database Synced (/suppliers)

  • Full Database Sync: Data distributor/supplier tersimpan di database PostgreSQL, sehingga data selalu 100% identik baik di lokal maupun di Vercel Deploy.
  • Dynamic Category Supply: Kategori pasokan supplier terhubung secara dinamis dengan master data Kategori di database.
  • One-Click WhatsApp Chat: Tombol cepat untuk membuka chat WhatsApp langsung ke nomor supplier dengan sanitasi format nomor otomatis (cleanWhatsAppNumber).

5. Stok Gudang & Badges Design UX (/inventory)

  • Restock Etalase Kasir: Fitur pemindahan stok dari cadangan gudang ke etalase kasir secara langsung via modal transfer.
  • Penambahan Pasokan Gudang: Form cepat untuk menambah stok cadangan gudang saat barang baru tiba dari supplier.
  • Ultra-Clean Pill Badges: Visualisasi status stok etalase dan gudang dengan badge horizontal 1-baris yang elegan dan beranimasi (Emerald untuk aman, Amber pulse untuk refill, Indigo untuk gudang, Rose untuk kosong).

6. Terminal Kasir POS & Struk Transaksi (/pos)

  • Katalog & Filter Cepat: Filter kategori instan, pencarian nama/SKU, dan indikator stok habis.
  • Keranjang & Kalkulasi Pajak: Penyesuaian kuantitas fleksibel, validasi batas stok, perhitungan subtotal, dan PPN 11%.
  • Modal Pembayaran & Kembalian: Pilihan metode Cash / QRIS, tombol uang pas dan pecahan cepat (20k, 50k, 100k, 200k), serta kalkulasi kembalian otomatis.
  • Cetak Struk Transaksi: Struk monospaced bergaya retro kasir dengan rincian per item dan tombol cetak struk (window.print()).

7. Laporan & Penutupan Harian (/orders)

  • Daily Closing Summary: Rangkuman transaksi hari berjalan (omset harian, total transaksi, rata-rata transaksi).
  • Export Laporan Excel (CSV): Unduh rekapitulasi penjualan harian lengkap dalam format CSV yang kompatibel dengan Microsoft Excel dan Google Sheets.

8. Auto-Kompresi & Upload Gambar WebP (src/lib/imageCompressor.ts)

  • Upload file foto produk dari perangkat lokal (JPG, PNG, WebP) dengan kompresi WebP otomatis di browser (resize & kompresi hingga 15 KB – 25 KB), menghemat storage database hingga 95%+.

πŸ§ͺ Hasil Pengujian Kualitas & Integrasi (Lint & Testing)

Pengujian kualitas kode dan integrasi dilakukan untuk memverifikasi type-safety TypeScript, kebersihan kode, serta integritas alur komunikasi API Serverless Handler, Prisma ORM, dan Database Engine PostgreSQL.

1. Linting & Type-Safety Check

npm run lint
# atau
npx tsc --noEmit

Hasil Linting:

> pos-web-zalde@1.0.0 lint
> tsc --noEmit

βœ” Type-checking passed with 0 errors across all frontend and backend modules.

2. Integration Testing (Bun Test)

npm test
# atau
bun test

Hasil Eksekusi Pengujian (Test Results):

bun test v1.3.14 (0d9b296a)

tests\integration.test.ts:
(pass) Integration Tests: API / Serverless ↔ Prisma ORM ↔ Database > 1. Health Check Endpoint (/api/health) [7.57ms]
(pass) Integration Tests: API / Serverless ↔ Prisma ORM ↔ Database > 2. Category API & Database Integration [63.16ms]
(pass) Integration Tests: API / Serverless ↔ Prisma ORM ↔ Database > 3. Product API & Database Integration [13.60ms]
(pass) Integration Tests: API / Serverless ↔ Prisma ORM ↔ Database > 4. POS Checkout Transaction & Automatic Stock Deduction [23.54ms]
(pass) Integration Tests: API / Serverless ↔ Prisma ORM ↔ Database > 5. Dashboard Analytics Endpoint (/api/dashboard/stats) [110.86ms]
(pass) Integration Tests: API / Serverless ↔ Prisma ORM ↔ Database > 6. Database & Validation Error Handling [2.26ms]
(pass) Integration Tests: API / Serverless ↔ Prisma ORM ↔ Database > 7. Store & Warehouse Internal Chat API [14.06ms]

 7 pass
 0 fail
 71 expect() calls
Ran 7 tests across 1 file. [411.00ms]

3. Production Bundle Build (Vite)

npx vite build

Hasil Build:

βœ“ 2455 modules transformed.
dist/index.html                     1.10 kB β”‚ gzip:   0.56 kB
dist/assets/index-I8ILNd_M.css     32.71 kB β”‚ gzip:   6.78 kB
dist/assets/icons-agdkO0XV.js      21.59 kB β”‚ gzip:   4.66 kB
dist/assets/index-DV5qnxV_.js     133.35 kB β”‚ gzip:  29.04 kB
dist/assets/vendor-9jdMLHbg.js    163.73 kB β”‚ gzip:  53.42 kB
dist/assets/recharts-BHGE68XP.js  383.11 kB β”‚ gzip: 105.64 kB
βœ“ built in 6.99s

4. SRP & Code Complexity Audit (Hard Ceiling < 200 Baris)

Seluruh berkas kode TypeScript & TSX dipindai secara otomatis:

Get-ChildItem -Path src -Recurse -Include *.ts,*.tsx | ForEach-Object {
  $lines = (Get-Content $_.FullName | Measure-Object -Line).Lines
  if ($lines -gt 200) { "$($_.FullName): $lines lines" }
}

Hasil: 0 files found (100% file mematuhi batas keras < 200 baris, arsitektur anti-monolitik).


πŸ“¦ Cara Memulai (Getting Started)

Prasyarat

  • Node.js (v18+) atau Bun (v1.0+)
  • PostgreSQL Server (Lokal) atau Neon Serverless Cloud PostgreSQL

Langkah Instalasi

  1. Clone repository & masuk ke direktori:

    git clone https://github.com/alberic13/pos-web-zalde.git
    cd pos-web-zalde
  2. Install dependensi:

    npm install
  3. Konfigurasi Environment Variable (.env): Buat file .env di root proyek:

    # Database PostgreSQL (Lokal / Cloud Provider Anda):
    DATABASE_URL="postgresql://postgres:password@localhost:5432/pos_zalde_dev?schema=public"
    PORT=3000
    
    # Kunci Rahasia JWT (Minimal 32 Karakter / 256-Bit):
    JWT_SECRET="your-super-secret-jwt-token-key-256bit"
  4. Sinkronkan skema database & data:

    # Push skema Prisma ke database:
    npx prisma db push
    
    # Seed data produk & akun demo:
    npm run db:seed
  5. Jalankan server pengembangan (Development Server):

    • Terminal 1 (API Server): npx tsx api/index.ts / bun api/index.ts
    • Terminal 2 (Vite Frontend): npm run dev / bun run dev

    Buka http://localhost:5173 di browser Anda.


πŸ›‘οΈ Arsitektur Keamanan & Otorisasi (Security & RBAC)

Aplikasi POS Web Zalde menerapkan standar keamanan berlapis (Defense-in-Depth) untuk menjamin integritas data transaksi:

  1. Password Hashing (bcryptjs):

    • Seluruh password akun tersimpan di tabel User dalam bentuk hash searah menggunakan algoritma Bcrypt (salt rounds = 10).
    • Sistem menolak penyimpanan password dalam bentuk plaintext.
  2. JSON Web Token (JWT) Kriptografis:

    • Setiap sesi login menghasilkan token JWT (HMAC-SHA256) resmi berdurasi 24 jam.
    • Token memuat klaim identitas (id, username, role, name) dan divalidasi pada setiap request mutasi data melalui header Authorization: Bearer <token>.
  3. Role-Based Access Control (RBAC) di Backend:

    • Middleware otorisasi di level serverless API memverifikasi hak akses per role secara ketat:
      • 401 Unauthorized: Menolak request tanpa token atau token kadaluarsa.
      • 403 Forbidden: Menolak request jika role akun tidak berwenang (misal: Kasir mencoba menghapus produk master).
  4. Whitelist Domain CORS & Header Aman:

    • Konfigurasi CORS hanya mengizinkan request dari domain produksi (pos-web-zalde.vercel.app) dan localhost:5173, serta mem-whitelist header Authorization.
  5. SQL Injection Immunity:

    • Semua interaksi basis data menggunakan Prisma ORM dengan parameterized queries otomatis, kebal terhadap manipulasi query SQL mentah.

πŸ”‘ Kredensial Akun Demo (Default Logins)

Untuk mencoba 3 role dengan hak akses berbeda, gunakan akun berikut pada halaman login (/login) atau gunakan tombol 1-Click Demo Login:

Role Username Password Enkripsi Database Hak Akses Utama
Admin Toko admin admin123 Bcrypt Hash Akses penuh (Dashboard KPI, POS, Produk, Stok, Supplier, Chat, Reports)
Kasir (Toko Depan) kasir kasir123 Bcrypt Hash POS Kasir, Produk Etalase, Riwayat Transaksi, Chat Toko & Gudang
Staff Gudang gudang gudang123 Bcrypt Hash Stok Gudang, Transfer Etalase, Kategori, Produk, Chat Toko & Gudang

πŸ”Œ Dokumentasi REST API Serverless (/api/*)

Endpoint Method Autentikasi / Izin Deskripsi
/api/health GET Publik Health check endpoint serverless & status konektivitas DB
/api/auth/login POST Publik Verifikasi kredensial & penerbitan token JWT resmi
/api/auth/me GET Bearer Token Verifikasi validitas token sesi & ambil data profil user
/api/products GET Publik List katalog produk etalase & filter pencarian
/api/products POST ADMIN, GUDANG Tambah data produk baru ke katalog
/api/products/:id PUT ADMIN, GUDANG Update informasi dan harga produk
/api/products/:id DELETE ADMIN Hapus produk dari katalog master
/api/products/:id/transfer-to-display POST ADMIN, GUDANG Transfer kuantitas stok dari gudang ke etalase kasir
/api/categories GET Publik List seluruh kategori produk beserta jumlah item
/api/categories POST, PUT ADMIN, GUDANG Tambah dan perbarui nama kategori produk
/api/categories/:id DELETE ADMIN Hapus kategori produk
/api/orders GET Publik List riwayat transaksi penjualan kasir
/api/orders POST ADMIN, KASIR Checkout transaksi POS & potong stok kasir otomatis
/api/suppliers GET Publik List informasi distributor/supplier mitra toko
/api/suppliers POST, PUT ADMIN, GUDANG Tambah dan update data distributor supplier
/api/suppliers/:id DELETE ADMIN Hapus data supplier
/api/chat/messages GET Publik Ambil riwayat percakapan internal kasir & gudang
/api/chat/messages POST Bearer Token Kirim pesan restok/komunikasi internal antar staff
/api/chat/messages DELETE ADMIN Bersihkan riwayat percakapan toko
/api/dashboard/stats GET Publik Agregasi analitik KPI, tren omset 7 hari, & low stock alert

πŸ“„ Lisensi

MIT License Β© 2026 POS Web Zalde

About

Aplikasi Web Point of Sale (POS) kasir & manajemen inventaris multi-gudang dengan chat internal toko real-time, WhatsApp PO supplier, dan analitik penjualan. Dibuat dengan React 18, TypeScript, Tailwind CSS, Prisma ORM, & PostgreSQL.

Topics

Resources

Stars

1 star

Watchers

0 watching

Forks

Releases

Packages

Contributors

Languages