Beta Mart POS System

Sistem Point of Sale (POS) modern untuk Beta Mart yang dibangun dengan Next.js, TypeScript, dan Tailwind CSS.

🚀 Fitur Utama

📊 Dashboard

• Overview Penjualan: Total penjualan, jumlah order, dan statistik harian
• Chart Interaktif: Grafik penjualan 7 hari terakhir dan produk terlaris
• Quick Actions: Akses cepat ke fitur POS, manajemen produk, laporan, dan invoice

🛒 Point of Sale (POS)

• Interface Intuitif: Desain yang mudah digunakan untuk kasir
• Search & Filter: Pencarian produk dengan nama atau barcode, filter berdasarkan kategori
• Keranjang Belanja: Kelola item dengan mudah, update quantity, dan hapus item
• Checkout Process: Input data pelanggan opsional dan proses pembayaran
• Invoice Generation: Generate dan download invoice dalam format PDF

📦 Manajemen Produk

• Daftar Produk: View semua produk dengan informasi lengkap
• Stock Management: Update stock dengan tracking riwayat penyesuaian
• Status Monitoring: Alert untuk stock rendah dan habis
• Kategori: Organisasi produk berdasarkan kategori

📋 Invoice Management

• Daftar Invoice: View dan manage semua invoice yang telah dibuat
• Detail Invoice: Informasi lengkap transaksi
• PDF Download: Download invoice dalam format PDF siap print
• Search Function: Cari invoice berdasarkan ID atau nama pelanggan

📈 Laporan & Analytics

• Sales Analytics: Grafik penjualan harian dan trend
• Top Products: Produk terlaris dengan visualisasi
• Category Distribution: Distribusi penjualan per kategori
• Performance Metrics: KPI dan metrics penting

⚙️ Pengaturan

• Store Settings: Konfigurasi informasi toko
• User Management: Pengaturan pengguna dan role
• System Configuration: Pengaturan pajak, mata uang, dan notifikasi

🛠️ Teknologi

• Frontend: Next.js 14 + TypeScript
• Styling: Tailwind CSS
• Icons: Heroicons
• Charts: Recharts
• PDF Generation: jsPDF
• Notifications: React Hot Toast
• Date Handling: date-fns

📦 Instalasi

Prerequisites

• Node.js 18.x atau lebih baru
• npm atau yarn

Langkah Instalasi

1. Clone Repository

   git clone https://github.com/kancralabs/pos_systems.git
   cd pos_systems

2. Install Dependencies

   npm install

3. Jalankan Development Server

   npm run dev

4. Buka Browser Akses http://localhost:3000 untuk melihat aplikasi

🏗️ Struktur Project

src/
├── app/                    # App Router Pages
│   ├── layout.tsx         # Root Layout
│   ├── page.tsx           # Dashboard Page
│   ├── pos/               # POS Page
│   ├── products/          # Products Management
│   ├── invoices/          # Invoice Management
│   ├── reports/           # Reports & Analytics
│   └── settings/          # Settings Page
├── components/            # Reusable Components
│   ├── Header.tsx         # Navigation Header
│   ├── ProductCard.tsx    # Product Display Card
│   └── Cart.tsx           # Shopping Cart Component
├── data/                  # Data & Mock Data
│   └── dummy.ts           # Sample Data
├── types/                 # TypeScript Type Definitions
│   └── index.ts           # Main Types
└── utils/                 # Utility Functions
    └── pdfGenerator.ts    # PDF Generation Utils

🎯 Penggunaan

1. Dashboard

• Lihat overview penjualan dan statistik
• Akses quick actions untuk navigasi cepat
• Monitor performa dengan chart interaktif

2. Point of Sale

• Pilih produk yang ingin dijual
• Atur quantity sesuai kebutuhan
• Masukkan data pelanggan (opsional)
• Proses checkout dan download invoice

3. Manajemen Produk

• View daftar semua produk
• Update stock dengan alasan penyesuaian
• Monitor status stock (Normal/Rendah/Habis)

4. Invoice & Laporan

• View dan download invoice dalam PDF
• Analisis penjualan dengan berbagai chart
• Monitor produk terlaris dan trend

🎨 Fitur UI/UX

• Responsive Design: Optimal di desktop, tablet, dan mobile
• Modern Interface: Clean dan professional design
• Interactive Elements: Hover effects dan smooth transitions
• Toast Notifications: Feedback real-time untuk user actions
• Loading States: Proper loading indicators
• Error Handling: User-friendly error messages

🚧 Development

Available Scripts

# Development
npm run dev          # Start development server

# Build
npm run build        # Build for production
npm run start        # Start production server

# Linting
npm run lint         # Run ESLint

Environment Variables

Buat file .env.local untuk konfigurasi environment:

NEXT_PUBLIC_APP_NAME="Beta Mart POS"
NEXT_PUBLIC_STORE_NAME="Beta Mart"
NEXT_PUBLIC_CURRENCY="IDR"

🔧 Kustomisasi

Menambah Produk Baru

Edit file src/data/dummy.ts untuk menambahkan produk:

{
  id: 'unique-id',
  name: 'Nama Produk',
  price: 10000,
  stock: 50,
  category: 'Kategori',
  image: '/path/to/image',
  barcode: 'barcode-number',
  description: 'Deskripsi produk'
}

🐛 Troubleshooting

Common Issues

1. Chart tidak muncul

   • Pastikan container memiliki height yang defined
   • Check console untuk error Recharts

2. PDF tidak generate

   • Pastikan jsPDF sudah terinstall
   • Check browser compatibility

3. Build error

   • Jalankan npm run lint untuk check errors
   • Pastikan semua dependencies ter-install

🤝 Contributing

1. Fork repository
2. Buat feature branch (git checkout -b feature/AmazingFeature)
3. Commit changes (git commit -m 'Add some AmazingFeature')
4. Push ke branch (git push origin feature/AmazingFeature)
5. Buat Pull Request

📄 License

Distributed under the MIT License.

👥 Team

• Developer: Beta Mart Development Team
• Project: POS System Showcase

📞 Support

Untuk pertanyaan dan support:

• Email: support@betamart.com
• GitHub Issues: Create Issue

🗺️ Roadmap

• v2.0: Database integration (PostgreSQL/MongoDB)
• v2.1: User authentication & authorization
• v2.2: Multi-store support
• v2.3: Advanced reporting & analytics
• v2.4: Mobile app (React Native)
• v2.5: Cloud deployment & scaling

---

Beta Mart POS System - Solusi modern untuk kebutuhan retail Anda ✨