Magang-2025/Kasir
11
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: Magang-2025:70c1a7a0bf3f959413ecf9e5357df8eb5579236e
Branches Tags
Magang-2025:main
Magang-2025:development
Magang-2025:jadi
Magang-2025:production
..
compare: Magang-2025:a3e68b8cd0a1200ea3d8eca7fd212f6afd1f5c4d
Branches Tags
Magang-2025:development
Magang-2025:jadi
Magang-2025:production
Magang-2025:main

No commits in common. "70c1a7a0bf3f959413ecf9e5357df8eb5579236e" and "a3e68b8cd0a1200ea3d8eca7fd212f6afd1f5c4d" have entirely different histories.
70c1a7a0bf ... a3e68b8cd0

26 changed files with 355 additions and 914 deletions
Show Stats Expand all files Collapse all files

86
.dockerignore
View File

@ -1,82 +1,10 @@
# ======================================== node_modules
# Docker Ignore File vendor
# ======================================== .env
Dockerfile
# Git docker-compose.yml
.git .git
.gitignore .gitignore
.gitattributes tests
# Documentation
README.md
CHANGELOG.md
Documentation/
*.md
# Tests
tests/
phpunit.xml
.phpunit.cache
.phpunit.result.cache
# IDE & Editors
.vscode/
.idea/
.fleet/
.nova/
.zed/
*.swp
*.swo
*~
.DS_Store
Thumbs.db
.phpactor.json
# Docker files (tidak perlu di-copy ke image)
Dockerfile
docker-compose*.yml
.dockerignore
# Environment files (akan di-set via environment variables)
.env
.env.*
!.env.example
# Dependencies (akan di-install via composer & npm)
/vendor/
/node_modules/
# Build artifacts (akan di-build di stage terpisah)
/public/hot
/public/build
# Storage & Cache (akan di-mount sebagai volume)
/storage/*.key
/storage/logs/*
/storage/framework/cache/*
/storage/framework/sessions/*
/storage/framework/views/*
/storage/pail
# Generated files
/public/storage
/bootstrap/cache/*
# Local development files
Homestead.json
Homestead.yaml
auth.json
.vagrant
.phpstorm.meta.php
_ide_helper.php
# Logs
*.log *.log
npm-debug.log* storage/logs/*
yarn-debug.log*
yarn-error.log*
# OS Files
.DS_Store
Thumbs.db
desktop.ini

86
.env.docker
View File

@ -1,86 +0,0 @@
# ========================================
# Abbauf Kasir - Docker Environment Configuration
# ========================================
# Copy file ini ke .env sebelum deployment
# Ganti semua placeholder dengan nilai yang sesuai
# Application
APP_NAME=Abbauf-Kasir
APP_ENV=production
APP_KEY= # Generate dengan: php artisan key:generate
APP_DEBUG=false
APP_URL=http://localhost # Ganti dengan domain production
APP_LOCALE=id
APP_FALLBACK_LOCALE=en
APP_FAKER_LOCALE=id_ID
APP_MAINTENANCE_DRIVER=file
PHP_CLI_SERVER_WORKERS=4
BCRYPT_ROUNDS=12
# Logging
LOG_CHANNEL=stack
LOG_STACK=daily
LOG_DEPRECATIONS_CHANNEL=null
LOG_LEVEL=error
# Database Configuration
DB_CONNECTION=mysql
DB_HOST=mysql # Nama service di docker-compose
DB_PORT=3306
DB_DATABASE=kasir_db # Nama database
DB_USERNAME=kasir_user # Username database
DB_PASSWORD=strong_password_here # GANTI dengan password kuat!
# MySQL Root Password (untuk docker-compose)
MYSQL_ROOT_PASSWORD=root_strong_password # GANTI dengan password root yang kuat!
# Cache & Session
CACHE_STORE=redis
SESSION_DRIVER=redis
SESSION_LIFETIME=120
SESSION_ENCRYPT=false
SESSION_PATH=/
SESSION_DOMAIN=null
# Redis Configuration
REDIS_CLIENT=phpredis
REDIS_HOST=redis
REDIS_PASSWORD=null
REDIS_PORT=6379
# Queue
QUEUE_CONNECTION=redis
# Broadcasting
BROADCAST_CONNECTION=log
# Filesystem
FILESYSTEM_DISK=local
# Mail Configuration (opsional)
MAIL_MAILER=log
MAIL_SCHEME=null
MAIL_HOST=127.0.0.1
MAIL_PORT=2525
MAIL_USERNAME=null
MAIL_PASSWORD=null
MAIL_FROM_ADDRESS="noreply@abbauf-kasir.local"
MAIL_FROM_NAME="${APP_NAME}"
# AWS (jika menggunakan S3 untuk storage)
AWS_ACCESS_KEY_ID=
AWS_SECRET_ACCESS_KEY=
AWS_DEFAULT_REGION=us-east-1
AWS_BUCKET=
AWS_USE_PATH_STYLE_ENDPOINT=false
# Ports (untuk docker-compose)
APP_PORT=80 # Port untuk akses aplikasi
# DB_PORT=3306 # Uncomment jika ingin expose DB port
# REDIS_PORT=6379 # Uncomment jika ingin expose Redis port
# Vite
VITE_APP_NAME="${APP_NAME}"

6
.env.example
View File

@ -1,8 +1,8 @@
APP_NAME=Abbauf-Kasir APP_NAME=Abbauf-Kasir
APP_ENV=production APP_ENV=local
APP_KEY= APP_KEY=
APP_DEBUG=false APP_DEBUG=true
APP_URL=http://localhost APP_URL=http://localhost:8000
APP_LOCALE=en APP_LOCALE=en
APP_FALLBACK_LOCALE=en APP_FALLBACK_LOCALE=en

5
.gitignore vendored
View File

@ -22,8 +22,3 @@
Homestead.json Homestead.json
Homestead.yaml Homestead.yaml
Thumbs.db Thumbs.db
# Docker - Database Backups (exclude backups from git)
/docker/mysql/backups/*.sql
/docker/mysql/backups/*.sql.gz
!/docker/mysql/backups/README.md

87
Dockerfile
View File

@ -1,91 +1,34 @@
# ======================================== # Stage 1: Build Vue (tetap sama)
# Stage 1: Build Frontend Assets (Vue.js) FROM node:20 as node_builder
# ========================================
FROM node:20-alpine as node_builder
WORKDIR /app WORKDIR /app
# Copy package files untuk caching layer
COPY package*.json ./ COPY package*.json ./
RUN npm install
# Install dependencies
RUN npm ci --legacy-peer-deps
# Copy seluruh source code
COPY . . COPY . .
# Build production assets
RUN npm run build RUN npm run build
# ======================================== # Stage 2: Laravel
# Stage 2: Laravel Application FROM php:8.3-fpm
# ========================================
FROM php:8.3-fpm-alpine
# Install system dependencies dan PHP extensions RUN apt-get update && apt-get install -y \
RUN apk update && apk add --no-cache \ git unzip libzip-dev libpng-dev libonig-dev libxml2-dev curl \
git \ && docker-php-ext-install pdo_mysql zip gd mbstring exif pcntl bcmath \
unzip \ && apt-get clean && rm -rf /var/lib/apt/lists/* # Cleanup untuk ukuran kecil
libzip-dev \
libpng-dev \
oniguruma-dev \
libxml2-dev \
curl \
mysql-client \
autoconf \
g++ \
make \
&& docker-php-ext-install \
pdo_mysql \
zip \
gd \
mbstring \
exif \
pcntl \
bcmath \
&& pecl install redis \
&& docker-php-ext-enable redis \
&& apk del autoconf g++ make \
&& rm -rf /var/cache/apk/* /tmp/*
# Install Composer
COPY --from=composer:2 /usr/bin/composer /usr/bin/composer COPY --from=composer:2 /usr/bin/composer /usr/bin/composer
# Set working directory
WORKDIR /var/www/html WORKDIR /var/www/html
# Copy composer files untuk caching layer # Copy source code
COPY composer.json composer.lock ./
# Install PHP dependencies
RUN composer install --no-dev --no-scripts --no-autoloader --prefer-dist
# Copy application source code
COPY . . COPY . .
# Copy hasil build Vue
# Copy hasil build Vue dari stage 1
COPY --from=node_builder /app/public/build /var/www/html/public/build COPY --from=node_builder /app/public/build /var/www/html/public/build
# Generate autoload files dengan optimasi RUN composer install --no-dev --optimize-autoloader
RUN composer dump-autoload --optimize --classmap-authoritative RUN php artisan config:cache && php artisan route:cache && php artisan view:cache # Optimasi cache untuk performa laporan/transaksi
# Create required directories dan set permissions # Set permission dan user non-root
RUN mkdir -p \ RUN chown -R www-data:www-data /var/www/html
storage/framework/cache \
storage/framework/sessions \
storage/framework/views \
storage/logs \
bootstrap/cache \
&& chown -R www-data:www-data \
/var/www/html/storage \
/var/www/html/bootstrap/cache \
&& chmod -R 775 \
/var/www/html/storage \
/var/www/html/bootstrap/cache
# Switch ke user non-root untuk keamanan
USER www-data USER www-data
EXPOSE 9000 EXPOSE 9000
CMD ["php-fpm"] CMD ["php-fpm"]

186
README.md
View File

@ -1,6 +1,6 @@
# 💎 Aplikasi Kasir Toko Perhiasan # 💎 Aplikasi Kasir Toko Perhiasan
Aplikasi kasir modern berbasis web untuk toko perhiasan dengan sistem manajemen yang lengkap dan antarmuka yang user-friendly. Dibuat khusus sesuai kebutuhan Toko Emas Jakarta Citayam. Aplikasi kasir modern berbasis web untuk toko perhiasan dengan sistem manajemen yang lengkap dan antarmuka yang user-friendly.
## 👥 Tim Development ## 👥 Tim Development
@ -15,7 +15,7 @@ Aplikasi kasir modern berbasis web untuk toko perhiasan dengan sistem manajemen
## 🚀 Tentang Aplikasi ## 🚀 Tentang Aplikasi
Semuah sistem Point of Sale (POS) yang dirancang khusus untuk kebutuhan toko perhiasan dengan fitur manajemen yang komprehensif dan sistem role-based access control. Aplikasi Kasir Toko Perhiasan adalah sistem Point of Sale (POS) yang dirancang khusus untuk kebutuhan toko perhiasan dengan fitur manajemen yang komprehensif dan sistem role-based access control.
### ✨ Fitur Utama ### ✨ Fitur Utama
@ -38,7 +38,7 @@ Semuah sistem Point of Sale (POS) yang dirancang khusus untuk kebutuhan toko per
- **Backend**: Laravel 11.x - **Backend**: Laravel 11.x
- **Frontend**: Vue.js 3 + Vue Router - **Frontend**: Vue.js 3 + Vue Router
- **Database**: MySQL - **Database**: MySQL/PostgreSQL
- **Styling**: Tailwind CSS - **Styling**: Tailwind CSS
- **Build Tool**: Vite - **Build Tool**: Vite
- **Authentication**: Laravel Sanctum - **Authentication**: Laravel Sanctum
@ -48,68 +48,18 @@ Semuah sistem Point of Sale (POS) yang dirancang khusus untuk kebutuhan toko per
## 📋 Prerequisites ## 📋 Prerequisites
### Opsi 1: Docker (Recommended) 🐳 Pastikan sistem Anda sudah memiliki:
- **Docker Desktop** (Windows/Mac) atau **Docker Engine** (Linux) - **PHP** >= 8.1
- **Docker Compose** v2.0+ - **Composer** >= 2.0
- **Git** - **Node.js** >= 16.x
- **NPM** atau **Yarn**
### Opsi 2: Manual Installation - **MySQL** >= 8.0 atau **PostgreSQL** >= 13
- **PHP** 8.2+
- **Composer**
- **Node.js** 18+
- **NPM**
- **MySQL** 8.0+
- **Redis** (optional)
- **Git** - **Git**
--- ---
## <20> Docker Installation (Recommended) ## 🔧 Instalasi
### Quick Start dengan Docker
```bash
# 1. Clone repository
git clone https://git.abbauf.com/Magang-2025/Kasir.git
cd Kasir
# 2. Setup environment
copy .env.docker .env # Windows
# atau
cp .env.docker .env # Linux/Mac
# 3. Edit .env (PENTING: ganti password!)
notepad .env # Windows
nano .env # Linux/Mac
# 4. Deploy dengan satu command
docker-deploy.bat # Windows
# atau
./docker-deploy.sh # Linux/Mac
# 5. Akses aplikasi
# http://localhost
```
**Dokumentasi Docker Lengkap:**
- 📖 Quick Start: [README-DOCKER.md](README-DOCKER.md)
- 📚 Full Guide: [DOCKER-DEPLOYMENT.md](DOCKER-DEPLOYMENT.md)
- 📋 Checklist: [DEPLOYMENT-CHECKLIST.md](DEPLOYMENT-CHECKLIST.md)
- 🎯 Quick Reference: [QUICK-REFERENCE.txt](QUICK-REFERENCE.txt)
**Management Commands:**
```bash
docker-helper.bat status # Cek status containers
docker-helper.bat logs # Lihat logs
docker-helper.bat backup # Backup database
docker-helper.bat restart # Restart containers
```
---
## <20>🔧 Manual Installation
### 1. Clone Repository ### 1. Clone Repository
@ -140,15 +90,15 @@ npm install
### 4. Konfigurasi Database ### 4. Konfigurasi Database
Edit file `.env` sesuai dengan konfigurasi database: Edit file `.env` sesuai dengan konfigurasi database Anda:
```env ```env
DB_CONNECTION=mysql DB_CONNECTION=mysql
DB_HOST=127.0.0.1 DB_HOST=127.0.0.1
DB_PORT=3306 DB_PORT=3306
DB_DATABASE=toko_emas DB_DATABASE=kasir_perhiasan
DB_USERNAME=root DB_USERNAME=your_username
DB_PASSWORD= DB_PASSWORD=your_password
``` ```
--- ---
@ -156,16 +106,17 @@ DB_PASSWORD=
### 5. Setup Database ### 5. Setup Database
```bash ```bash
# Jalankan migrasi
php artisan migrate php artisan migrate
```
```bash # Jalankan seeder (data dummy)
php artisan db:seed php artisan db:seed
``` ```
### 6. Storage Link ### 6. Storage Link
```bash ```bash
# Buat symbolic link untuk storage
php artisan storage:link php artisan storage:link
``` ```
@ -174,9 +125,24 @@ php artisan storage:link
#### Development Mode #### Development Mode
```bash ```bash
# Terminal 1 - Laravel Server
php artisan serve
# Terminal 2 - Vite Dev Server
npm run dev npm run dev
``` ```
#### Production Mode
```bash
# Build untuk production
npm run build
# Jalankan dengan web server (Apache/Nginx)
# atau gunakan PHP built-in server
php artisan serve --host=0.0.0.0 --port=8000
```
--- ---
## 🌐 Akses Aplikasi ## 🌐 Akses Aplikasi
@ -277,10 +243,24 @@ ItemTransaksi -> belongsTo -> Item
## 🛠️ Development ## 🛠️ Development
### Menjalankan Tests
```bash
# PHP Unit Tests
php artisan test
# atau dengan coverage
php artisan test --coverage
```
### Code Quality ### Code Quality
```bash ```bash
npm run dev # PHP CS Fixer
vendor/bin/php-cs-fixer fix
# Laravel Pint
vendor/bin/pint
``` ```
### Database Management ### Database Management
@ -296,77 +276,13 @@ php artisan backup:run
php artisan make:model ProductCategory -m php artisan make:model ProductCategory -m
``` ```
### Production Deployment ### Production
**Dengan Docker (Recommended):** > Pastikan `.env.production` sudah ada.
```bash
# 1. Setup .env untuk production
copy .env.docker .env
# Edit: APP_ENV=production, APP_DEBUG=false, set password kuat
# 2. Deploy ```bash
docker-deploy.bat docker compose --env-file .env.production up --build -d
# 3. Monitor
docker-helper.bat status
docker-helper.bat logs
``` ```
**Manual Deployment:**
```bash
# Build assets
npm run build
# Optimize Laravel
php artisan config:cache
php artisan route:cache
php artisan view:cache
# Set permissions
chmod -R 775 storage bootstrap/cache
```
**Dokumentasi lengkap:** [DOCKER-DEPLOYMENT.md](DOCKER-DEPLOYMENT.md)
---
## 🔄 Update Aplikasi
**Dengan Docker:**
```bash
docker-helper.bat update # Otomatis: pull, rebuild, migrate, cache
```
**Manual:**
```bash
git pull origin main
composer install --no-dev
npm install && npm run build
php artisan migrate --force
php artisan config:cache
```
---
## 💾 Backup & Restore
**Backup Database (Docker):**
```bash
docker-helper.bat backup
# File tersimpan di: docker/mysql/backups/
```
**Restore Database (Docker):**
```bash
docker-helper.bat restore
# Pilih file backup yang tersedia
```
**Manual Backup:**
```bash
mysqldump -u root -p toko_emas > backup.sql
```
--- ---
## 📄 License ## 📄 License

15
app/Http/Controllers/ItemController.php
View File

@ -42,20 +42,9 @@ class ItemController extends Controller
/** /**
* Display the specified resource. * Display the specified resource.
*/ */
public function show(string $kode_item) public function show(int $id)
{ {
$query = Item::with(['produk.foto', 'nampan']); $item = Item::with('produk.foto','nampan')->findOrFail($id);
if (is_numeric($kode_item)) {
$item = $query->where('id', (int)$kode_item)->first();
} else {
$item = $query->where('kode_item', $kode_item)->first();
}
if (!$item) {
return response()->json(['message' => 'Item tidak ditemukan'], 404);
}
return response()->json($item); return response()->json($item);
} }

9
app/Http/Controllers/NampanController.php
View File

@ -27,13 +27,14 @@ class NampanController extends Controller
'nama' => 'required|string|max:10|unique:nampans,nama', 'nama' => 'required|string|max:10|unique:nampans,nama',
], ],
[ [
'nama.max' => 'Nama nampan maksimal 10 karakter.', 'nama.required' => 'Nama nampan harus diisi.',
'nama.unique' => 'Nampan dengan nama yang sama sudah ada.', 'nama.unique' => 'Nampan dengan nama yang sama sudah ada.',
'nama.required' => 'Nama nampan harus diisi.' 'nama.max' => 'Nama nampan maksimal 10 karakter.'
]); ]);
Nampan::create($validated); Nampan::create($validated);
return response()->json([ return response()->json([
'message' => 'Nampan berhasil dibuat' 'message' => 'Nampan berhasil dibuat'
],201); ],201);
@ -58,9 +59,7 @@ class NampanController extends Controller
'nama' => 'required|string|max:10|unique:nampans,nama,'.$id, 'nama' => 'required|string|max:10|unique:nampans,nama,'.$id,
], ],
[ [
'nama.max' => 'Nama nampan maksimal 10 karakter.', 'nama' => 'Nama nampan harus diisi.'
'nama.unique' => 'Nampan dengan nama yang sama sudah ada.',
'nama.required' => 'Nama nampan harus diisi.'
]); ]);
$nampan = Nampan::findOrFail($id); $nampan = Nampan::findOrFail($id);

27
app/Http/Controllers/TransaksiController.php
View File

@ -39,7 +39,7 @@ class TransaksiController extends Controller
if ($search) { if ($search) {
$query->where(function ($q) use ($search) { $query->where(function ($q) use ($search) {
$q->where('kode_transaksi', 'like', '%' . $search . '%') $q->where('kode_transaksi', 'like', '%' . $search . '%')
->orWhere('nama_pembeli', 'like', '%' . $search . '%'); ->orWhere('nama_pembeli', 'like', '%' . $search . '%');
}); });
} }
@ -51,7 +51,7 @@ class TransaksiController extends Controller
$transaksi->total_items = $transaksi->itemTransaksi->count(); $transaksi->total_items = $transaksi->itemTransaksi->count();
$transaksi->tanggal = $transaksi->created_at->format('d/m/Y H:i'); $transaksi->tanggal = $transaksi->created_at->format('d/m/Y H:i');
$transaksi->pendapatan = $transaksi->total_harga ?? 0; $transaksi->pendapatan = $transaksi->total_harga ?? 0;
return $transaksi; return $transaksi;
}); });
@ -72,8 +72,8 @@ class TransaksiController extends Controller
public function show($id) public function show($id)
{ {
$transaksi = Transaksi::with([ $transaksi = Transaksi::with([
'kasir', 'kasir',
'sales', 'sales',
'itemTransaksi.produk', 'itemTransaksi.produk',
'itemTransaksi' => function ($query) { 'itemTransaksi' => function ($query) {
$query->orderBy('created_at', 'asc'); $query->orderBy('created_at', 'asc');
@ -125,20 +125,13 @@ class TransaksiController extends Controller
]); ]);
foreach ($request->items as $it) { foreach ($request->items as $it) {
$query = Item::with(['produk.foto', 'nampan']); // TODO: ubah saat transaksi pake kode_item
// $item = Item::where('kode_item', $it['kode_item'])->first();
// if (!$item) {
// throw new \Exception("Item dengan kode_item {$it['kode_item']} tidak ditemukan.");
// }
$item = Item::where('id',$it['kode_item'])->with('produk')->first();
if (is_numeric($it['kode_item'])) {
$item = $query->where('id', (int)$it['kode_item'])->first();
} else {
$item = $query->where('kode_item', $it['kode_item'])->first();
}
if (!$item) {
return response()->json(['message' => 'Item tidak ditemukan'], 404);
}
if (!$item) {
throw new \Exception("Item dengan kode_item {$it['kode_item']} tidak ditemukan.");
}
ItemTransaksi::create([ ItemTransaksi::create([
'id_transaksi' => $transaksi->id, 'id_transaksi' => $transaksi->id,
'id_produk' => $item->produk->id, 'id_produk' => $item->produk->id,

2
database/migrations/2025_08_25_071441_create_nampans_table.php
View File

@ -13,7 +13,7 @@ return new class extends Migration
{ {
Schema::create('nampans', function (Blueprint $table) { Schema::create('nampans', function (Blueprint $table) {
$table->id(); $table->id();
$table->string('nama', 10)->unique(); $table->string('nama', 100)->unique();
$table->timestamps(); $table->timestamps();
}); });
} }

62
database/seeders/DataSeeder.php
View File

@ -1,62 +0,0 @@
<?php
namespace Database\Seeders;
use App\Models\Kategori;
use App\Models\Nampan;
use App\Models\Produk;
use Illuminate\Database\Console\Seeds\WithoutModelEvents;
use Illuminate\Database\Seeder;
class DataSeeder extends Seeder
{
/**
* Run the database seeds.
*/
public function run(): void
{
// Nampan
for ($i=0; $i < 30; $i++) {
if ($i != 12) {
Nampan::factory()->create([
'nama' => 'A' . ($i + 1)
]);
}
}
// Kategori
$kategoriList = ['Cincin', 'Gelang Rantai', 'Gelang Bulat', 'Kalung', 'Liontin', 'Anting', 'Giwang'];
foreach ($kategoriList as $kategori) {
Kategori::factory()->create([
'nama' => $kategori
]);
}
// Produk
$produk1 = Produk::factory()->create([
'nama'=>'Gelang serut daun shimmer mp (mas putih)',
'id_kategori'=>Kategori::find(2),
'berat'=>1.4,
'kadar'=>8,
'harga_per_gram'=>900000,
'harga_jual'=>1260000,
]);
$produk1->foto()->create([
'id_produk'=>$produk1->id,
'url'=>'https://i.imgur.com/eGYHzvw.jpeg'
]);
$produk2 = Produk::factory()->create([
'nama'=>'Gelang rantai 5 buah clover merah',
'id_kategori'=>Kategori::find(2),
'berat'=>3.6,
'kadar'=>8,
'harga_per_gram'=>850000,
'harga_jual'=>3060000,
]);
$produk2->foto()->create([
'id_produk'=>$produk2->id,
'url'=>'https://i.imgur.com/UjQzYoE.jpeg'
]);
}
}

102
database/seeders/DatabaseSeeder.php
View File

@ -20,23 +20,109 @@ class DatabaseSeeder extends Seeder
public function run(): void public function run(): void
{ {
User::factory()->create([ User::factory()->create([
'nama' => 'admin', 'nama' => 'andre',
'role' => 'owner', 'role' => 'owner',
'password' => bcrypt('123123'), 'password' => bcrypt('123123'),
]); ]);
User::factory()->create([ User::factory()->create([
'nama' => 'kasir', 'nama' => 'luis',
'role' => 'kasir', 'role' => 'kasir',
'password' => bcrypt('123123'), 'password' => bcrypt('123123'),
]); ]);
Sales::factory()->create([ User::factory(2)->create();
'nama' => 'Umum', Sales::factory(5)->create();
'no_hp' => '-',
'alamat' => '-', for ($i=0; $i < 30; $i++) {
if ($i != 12) {
Nampan::factory()->create([
'nama' => 'A' . ($i + 1)
]);
}
}
$kategoriList = ['Cincin', 'Gelang Rantai', 'Gelang Bulat', 'Kalung', 'Liontin', 'Anting', 'Giwang'];
foreach ($kategoriList as $kategori) {
Kategori::factory()->create([
'nama' => $kategori
]);
}
// Produk::factory(10)->create()->each(function ($produk) {
// // setiap produk punya 1-3 foto
// $jumlah_foto = rand(1, 3);
// $fotoData = [];
// for ($i = 0; $i < $jumlah_foto; $i++) {
// $fotoData[] = [
// // 'url' => 'https://random-image-pepebigotes.vercel.app/api/random-image'
// 'url' => 'https://static.promediateknologi.id/crop/0x0:0x0/0x0/webp/photo/p2/255/2024/12/10/Screenshot_2024-12-10-11-50-18-88_1c337646f29875672b5a61192b9010f9-1-1282380831.jpg'
// ];
// }
// $produk->foto()->createMany($fotoData);
// $jumlah_item = rand(1, 20);
// Item::factory($jumlah_item)->create([
// 'id_produk' => $produk->id,
// ]);
// });
$produk1 = Produk::factory()->create([
'nama'=>'Gelang serut daun shimmer mp (mas putih)',
'id_kategori'=>Kategori::find(2),
'berat'=>1.4,
'kadar'=>8,
'harga_per_gram'=>900000,
'harga_jual'=>1260000,
]);
$produk1->foto()->create([
'id_produk'=>$produk1->id,
'url'=>'https://i.imgur.com/eGYHzvw.jpeg'
]);
$produk2 = Produk::factory()->create([
'nama'=>'Gelang rantai 5 buah clover merah',
'id_kategori'=>Kategori::find(2),
'berat'=>3.6,
'kadar'=>8,
'harga_per_gram'=>850000,
'harga_jual'=>3060000,
]);
$produk2->foto()->create([
'id_produk'=>$produk2->id,
'url'=>'https://i.imgur.com/UjQzYoE.jpeg'
]); ]);
$this->call(DataSeeder::class); Item::factory(500)->create();
// $this->call(DummySeeder::class);
// 75% peluang item masuk nampan, sisanya di brankas
$nampans = Nampan::all()->pluck('id')->toArray();
$jumlahNampan = count($nampans);
$counter = 0;
foreach (Item::all() as $item) {
if (rand(1, 100) <= 75) {
$item->update([
'id_nampan' => $nampans[$counter % $jumlahNampan],
]);
$counter++;
}
}
Transaksi::factory(250)->create()->each(function ($transaksi) {
$jumlah_item = rand(1, 2);
$items = Item::with('produk')->inRandomOrder()->limit($jumlah_item)->get();
if ($items->isEmpty()) return;
$total_harga = $transaksi->total_harga;
foreach ($items as $item) {
$transaksi->itemTransaksi()->create([
'id_produk' => $item->produk->id,
'harga_deal' => $item->produk->harga_jual,
'posisi_asal' => $item->id_nampan ? $item->nampan->nama : 'Brankas',
]);
$item->delete();
$total_harga += $item->produk->harga_jual;
}
$transaksi->update(['total_harga' => $total_harga]);
});
} }
} }

56
database/seeders/DummySeeder.php
View File

@ -1,56 +0,0 @@
<?php
namespace Database\Seeders;
use App\Models\Item;
use App\Models\Nampan;
use App\Models\Sales;
use App\Models\Transaksi;
use App\Models\User;
use Illuminate\Database\Console\Seeds\WithoutModelEvents;
use Illuminate\Database\Seeder;
class DummySeeder extends Seeder
{
/**
* Run the database seeds.
*/
public function run(): void
{
User::factory(2)->create();
Sales::factory(5)->create();
Item::factory(500)->create();
// 75% peluang item masuk nampan, sisanya di brankas
$nampans = Nampan::all()->pluck('id')->toArray();
$jumlahNampan = count($nampans);
$counter = 0;
foreach (Item::all() as $item) {
if (rand(1, 100) <= 75) {
$item->update([
'id_nampan' => $nampans[$counter % $jumlahNampan],
]);
$counter++;
}
}
Transaksi::factory(250)->create()->each(function ($transaksi) {
$jumlah_item = rand(1, 2);
$items = Item::with('produk')->inRandomOrder()->limit($jumlah_item)->get();
if ($items->isEmpty()) return;
$total_harga = $transaksi->total_harga;
foreach ($items as $item) {
$transaksi->itemTransaksi()->create([
'id_produk' => $item->produk->id,
'harga_deal' => $item->produk->harga_jual,
'posisi_asal' => $item->id_nampan ? $item->nampan->nama : 'Brankas',
]);
$item->delete();
$total_harga += $item->produk->harga_jual;
}
$transaksi->update(['total_harga' => $total_harga]);
});
}
}

162
docker-compose.yml
View File

@ -1,176 +1,56 @@
version: '3.8'
services: services:
# ========================================
# Laravel PHP-FPM Application
# ========================================
laravel: laravel:
build: build:
context: . context: .
dockerfile: Dockerfile dockerfile: Dockerfile
container_name: abbauf_kasir_app container_name: laravel_app_prod
restart: unless-stopped
working_dir: /var/www/html
volumes: volumes:
# Mount storage untuk uploads dan logs (persistent)
- ./storage:/var/www/html/storage - ./storage:/var/www/html/storage
# Mount public build assets (read-only) ports:
- ./public/build:/var/www/html/public/build:ro - "9000"
depends_on:
- mysql
environment: environment:
# Application APP_ENV: production
APP_NAME: ${APP_NAME:-Abbauf-Kasir} APP_DEBUG: false
APP_ENV: ${APP_ENV:-production}
APP_KEY: ${APP_KEY} APP_KEY: ${APP_KEY}
APP_DEBUG: ${APP_DEBUG:-false}
APP_URL: ${APP_URL:-http://localhost}
# Database
DB_CONNECTION: mysql DB_CONNECTION: mysql
DB_HOST: mysql DB_HOST: mysql
DB_PORT: 3306 DB_PORT: 3306
DB_DATABASE: ${DB_DATABASE:-kasir_db} DB_DATABASE: ${DB_DATABASE}
DB_USERNAME: ${DB_USERNAME:-kasir_user} DB_USERNAME: ${DB_USERNAME}
DB_PASSWORD: ${DB_PASSWORD} DB_PASSWORD: ${DB_PASSWORD}
# Cache & Session
CACHE_STORE: redis
SESSION_DRIVER: redis
REDIS_HOST: redis
REDIS_PORT: 6379
# Queue
QUEUE_CONNECTION: redis
depends_on:
mysql:
condition: service_healthy
redis:
condition: service_started
networks:
- kasir_network
healthcheck:
test: ["CMD", "php-fpm", "-t"]
interval: 30s
timeout: 10s
retries: 3
# ========================================
# Nginx Web Server
# ========================================
nginx: nginx:
image: nginx:alpine image: nginx:alpine
container_name: abbauf_kasir_nginx container_name: nginx_prod
restart: unless-stopped
ports: ports:
- "${APP_PORT:-80}:80" - "80:80"
volumes: volumes:
# Nginx configuration
- ./nginx.conf:/etc/nginx/conf.d/default.conf:ro - ./nginx.conf:/etc/nginx/conf.d/default.conf:ro
# Laravel public directory (untuk static assets) - ./storage:/var/www/html/storage:ro
- ./public:/var/www/html/public:ro
# Storage symlink untuk file uploads
- ./storage/app/public:/var/www/html/public/storage:ro
depends_on: depends_on:
- laravel - laravel
networks:
- kasir_network
healthcheck:
test: ["CMD", "wget", "--quiet", "--tries=1", "--spider", "http://localhost/"]
interval: 30s
timeout: 10s
retries: 3
# ========================================
# MySQL Database
# ========================================
mysql: mysql:
image: mysql:8.4 image: mysql:8
container_name: abbauf_kasir_db container_name: mysql_db_prod
restart: unless-stopped restart: unless-stopped
environment: environment:
MYSQL_ROOT_PASSWORD: ${MYSQL_ROOT_PASSWORD:-root_secret_password} MYSQL_ROOT_PASSWORD: ${MYSQL_ROOT_PASSWORD}
MYSQL_DATABASE: ${DB_DATABASE:-kasir_db} MYSQL_DATABASE: ${DB_DATABASE}
MYSQL_USER: ${DB_USERNAME:-kasir_user} MYSQL_USER: ${DB_USERNAME}
MYSQL_PASSWORD: ${DB_PASSWORD} MYSQL_PASSWORD: ${DB_PASSWORD}
MYSQL_CHARACTER_SET_SERVER: utf8mb4
MYSQL_COLLATION_SERVER: utf8mb4_unicode_ci
ports: ports:
- "${DB_PORT:-3306}:3306" - "3306:3306"
volumes: volumes:
- mysql_data:/var/lib/mysql - mysql_data:/var/lib/mysql
# Optional: backup folder
- ./docker/mysql/backups:/backups
networks:
- kasir_network
healthcheck:
test: ["CMD", "mysqladmin", "ping", "-h", "localhost", "-u", "root", "-p${MYSQL_ROOT_PASSWORD:-root_secret_password}"]
interval: 10s
timeout: 5s
retries: 5
command: --default-authentication-plugin=mysql_native_password
# ========================================
# Redis Cache & Session Store
# ========================================
redis: redis:
image: redis:7-alpine image: redis:alpine
container_name: abbauf_kasir_redis container_name: redis_prod
restart: unless-stopped
ports: ports:
- "${REDIS_PORT:-6379}:6379" - "6379:6379"
volumes:
- redis_data:/data
networks:
- kasir_network
healthcheck:
test: ["CMD", "redis-cli", "ping"]
interval: 10s
timeout: 5s
retries: 3
command: redis-server --appendonly yes
# ========================================
# Queue Worker (Optional - untuk background jobs)
# ========================================
queue:
build:
context: .
dockerfile: Dockerfile
container_name: abbauf_kasir_queue
restart: unless-stopped
working_dir: /var/www/html
volumes:
- ./storage:/var/www/html/storage
environment:
APP_ENV: ${APP_ENV:-production}
APP_KEY: ${APP_KEY}
DB_CONNECTION: mysql
DB_HOST: mysql
DB_PORT: 3306
DB_DATABASE: ${DB_DATABASE:-kasir_db}
DB_USERNAME: ${DB_USERNAME:-kasir_user}
DB_PASSWORD: ${DB_PASSWORD}
REDIS_HOST: redis
QUEUE_CONNECTION: redis
depends_on:
- laravel
- redis
- mysql
networks:
- kasir_network
command: php artisan queue:work --tries=3 --timeout=90
# ========================================
# Networks
# ========================================
networks:
kasir_network:
driver: bridge
# ========================================
# Persistent Volumes
# ========================================
volumes: volumes:
mysql_data: mysql_data:
driver: local
redis_data:
driver: local

73
nginx.conf
View File

@ -1,43 +1,14 @@
# ========================================
# Abbauf Kasir - Nginx Configuration
# ========================================
server { server {
listen 80; listen 80;
listen [::]:80; index index.php index.html;
server_name localhost; error_log /var/log/nginx/error.log;
root /var/www/html/public;
index index.php index.html index.htm;
# Logging
access_log /var/log/nginx/access.log; access_log /var/log/nginx/access.log;
error_log /var/log/nginx/error.log warn; root /var/www/html/public;
# Security Headers
add_header X-Frame-Options "SAMEORIGIN" always;
add_header X-Content-Type-Options "nosniff" always;
add_header X-XSS-Protection "1; mode=block" always;
# Client body size limit (untuk upload file)
client_max_body_size 20M;
# Gzip compression
gzip on;
gzip_vary on;
gzip_proxied any;
gzip_comp_level 6;
gzip_types text/plain text/css text/xml text/javascript
application/json application/javascript application/xml+rss
application/rss+xml font/truetype font/opentype
application/vnd.ms-fontobject image/svg+xml;
# Main location block
location / { location / {
try_files $uri $uri/ /index.php?$query_string; try_files $uri $uri/ /index.php?$query_string;
} }
# PHP-FPM configuration
location ~ \.php$ { location ~ \.php$ {
try_files $uri =404; try_files $uri =404;
fastcgi_split_path_info ^(.+\.php)(/.+)$; fastcgi_split_path_info ^(.+\.php)(/.+)$;
@ -46,43 +17,5 @@ server {
include fastcgi_params; include fastcgi_params;
fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name; fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
fastcgi_param PATH_INFO $fastcgi_path_info; fastcgi_param PATH_INFO $fastcgi_path_info;
# Buffer settings untuk performa
fastcgi_buffer_size 128k;
fastcgi_buffers 256 16k;
fastcgi_busy_buffers_size 256k;
fastcgi_temp_file_write_size 256k;
# Timeout settings
fastcgi_read_timeout 300;
fastcgi_connect_timeout 300;
}
# Cache static assets
location ~* \.(jpg|jpeg|png|gif|ico|css|js|svg|woff|woff2|ttf|eot)$ {
expires 1y;
add_header Cache-Control "public, immutable";
access_log off;
}
# Deny access to hidden files
location ~ /\. {
deny all;
access_log off;
log_not_found off;
}
# Deny access to sensitive files
location ~ /(?:\.env|\.git|composer\.json|composer\.lock|package\.json|package-lock\.json|README\.md|\.gitignore) {
deny all;
access_log off;
log_not_found off;
}
# Health check endpoint
location /health {
access_log off;
return 200 "healthy\n";
add_header Content-Type text/plain;
} }
} }

47
resources/js/components/BrankasList.vue
View File

@ -69,7 +69,7 @@
<!-- QR Code --> <!-- QR Code -->
<div class="flex justify-center mb-4"> <div class="flex justify-center mb-4">
<div class="p-2 border border-C rounded-lg"> <div class="p-2 border border-C rounded-lg">
<img :src="qrCodeUrl" alt="QR Code" class="w-36 h-36" /> <img :src="qrCodeUrl" alt="QR Code" class="size-36" />
</div> </div>
</div> </div>
@ -333,56 +333,53 @@ const handleConfirmAction = async () => {
// Fungsi utilitas // Fungsi utilitas
const printQR = () => { const printQR = () => {
if (qrCodeUrl.value && selectedItem.value) { if (qrCodeUrl.value) {
const printWindow = window.open('', '_blank'); const printWindow = window.open('', '_blank');
const itemCode = selectedItem.value.kode_item;
printWindow.document.write(` printWindow.document.write(`
<html> <html>
<head> <head>
<title>Print QR Code - ${itemCode}</title> <title>Print QR Code - ${selectedItem.value.kode_item}</title>
<style> <style>
@page {
size: 60mm 50mm;
margin: 1mm;
}
body { body {
font-family: Arial, sans-serif; font-family: Arial, sans-serif;
text-align: center; text-align: center;
padding: 20px; margin: 0;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
} }
.qr-container { .qr-container {
border: 2px solid #ccc; text-align: center;
padding: 20px;
display: inline-block;
margin: 20px;
} }
.qr-img { .qr-img {
width: 200px; width: 40mm;
height: 200px; height: 40mm;
margin-bottom: 2mm;
} }
.item-info { .item-info {
margin-top: 10px; font-size: 14pt;
font-size: 14px; font-weight: bold;
} }
</style> </style>
</head> </head>
<body> <body>
<div class="qr-container"> <div class="qr-container">
<img id="qr-img" class="qr-img" src="${qrCodeUrl.value}" alt="QR Code" /> <img class="qr-img" src="${qrCodeUrl.value}" alt="QR Code"
onload="window.print()" />
<div class="item-info"> <div class="item-info">
<div style="font-weight: bold; margin-bottom: 5px;">${itemCode}</div> ${selectedItem.value.kode_item}
<div>${selectedItem.value.produk?.nama || ''}</div>
<div style="color: #666; margin-top: 5px;">${selectedItem.value.produk?.berat || ''}g</div>
</div> </div>
</div> </div>
</body> </body>
</html> </html>
`); `);
printWindow.document.close(); printWindow.document.close();
const img = printWindow.document.getElementById("qr-img");
img.onload = () => {
printWindow.focus();
printWindow.print();
};
} }
}; };

20
resources/js/components/CreateItemModal.vue
View File

@ -102,14 +102,14 @@ const createdItem = ref(null);
// QR Code generator - berdasarkan logika dari brankas list // QR Code generator - berdasarkan logika dari brankas list
const qrCodeUrl = computed(() => { const qrCodeUrl = computed(() => {
if (createdItem.value && props.product) { if (createdItem.value && props.product) {
const kode_item = createdItem.value.kode_item; const itemId = createdItem.value.id || createdItem.value.kode_item;
const data = kode_item; const productName = props.product.nama.replace(/\s/g, "");
const data = `ITM-${itemId}-${productName}`;
return `https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=${encodeURIComponent(data)}`; return `https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=${encodeURIComponent(data)}`;
} }
return ""; return "";
}); });
// Methods // Methods
const loadNampanList = async () => { const loadNampanList = async () => {
try { try {
@ -196,10 +196,6 @@ const printItem = () => {
display: inline-block; display: inline-block;
margin: 20px; margin: 20px;
} }
.qr-img {
width: 200px;
height: 200px;
}
.item-info { .item-info {
margin-top: 10px; margin-top: 10px;
font-size: 14px; font-size: 14px;
@ -208,7 +204,7 @@ const printItem = () => {
</head> </head>
<body> <body>
<div class="qr-container"> <div class="qr-container">
<img id="qr-img" class="qr-img" src="${qrCodeUrl.value}" alt="QR Code" /> <img src="${qrCodeUrl.value}" alt="QR Code" style="width: 200px; height: 200px;" />
<div class="item-info"> <div class="item-info">
<div style="font-weight: bold; margin-bottom: 5px;">${itemCode}</div> <div style="font-weight: bold; margin-bottom: 5px;">${itemCode}</div>
<div>${props.product.nama}</div> <div>${props.product.nama}</div>
@ -218,14 +214,8 @@ const printItem = () => {
</body> </body>
</html> </html>
`); `);
printWindow.document.close(); printWindow.document.close();
printWindow.print();
const img = printWindow.document.getElementById("qr-img");
img.onload = () => {
printWindow.focus();
printWindow.print();
};
} }
}; };

10
resources/js/components/KasirForm.vue
View File

@ -31,9 +31,9 @@
<!-- Input Harga Jual --> <!-- Input Harga Jual -->
<div> <div>
<label class="block text-sm font-medium text-D">Harga Jual</label> <label class="block text-sm font-medium text-D">Harga Jual</label>
<input <input
type="text" type="text"
v-model="hargaJualFormatted" v-model="hargaJualFormatted"
@input="formatHargaInput" @input="formatHargaInput"
@keypress="onlyNumbers" @keypress="onlyNumbers"
placeholder="Masukkan Harga Jual" placeholder="Masukkan Harga Jual"
@ -158,7 +158,7 @@ const formatHargaInput = (event) => {
const value = event.target.value; const value = event.target.value;
// Hapus semua karakter selain angka // Hapus semua karakter selain angka
const cleanValue = value.replace(/\D/g, ""); const cleanValue = value.replace(/\D/g, "");
if (cleanValue) { if (cleanValue) {
// Format dengan pemisah ribuan // Format dengan pemisah ribuan
const formatted = formatNumber(cleanValue); const formatted = formatNumber(cleanValue);
@ -284,7 +284,7 @@ const konfirmasiPenjualan = () => {
}, 5000); }, 5000);
return; return;
} }
console.log(pesanan.value)
// Tampilkan struk overlay // Tampilkan struk overlay
showStruk.value = true; showStruk.value = true;
}; };

20
resources/js/components/ModalConfirm.vue
View File

@ -1,20 +0,0 @@
<template>
<div class="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
<div class="bg-white rounded-lg p-6 max-w-sm w-full shadow-xl">
<h3 class="text-lg font-semibold mb-4">{{ title }}</h3>
<p class="mb-6">{{ message }}</p>
<div class="flex justify-end gap-2">
<button @click="$emit('cancel')" class="px-4 py-2 bg-gray-300 rounded">Batal</button>
<button @click="$emit('confirm')" class="px-4 py-2 bg-blue-600 text-white rounded">Ya</button>
</div>
</div>
</div>
</template>
<script setup>
defineProps({
title: String,
message: String
});
defineEmits(["confirm", "cancel"]);
</script>

4
resources/js/components/StrukOverlay.vue
View File

@ -281,7 +281,7 @@ const getCurrentDate = () => {
const month = months[now.getMonth()] const month = months[now.getMonth()]
const year = now.getFullYear() const year = now.getFullYear()
return `${dayName}, ${day}-${month}-${year}` return `${dayName}/${day}-${month}-${year}`
} }
const generateTransactionCode = () => { const generateTransactionCode = () => {
@ -355,7 +355,7 @@ const handleSimpan = () => {
} }
const simpanTransaksi = async (dataTransaksi) => { const simpanTransaksi = async (dataTransaksi) => {
// console.log('Data transaksi yang akan disimpan:', dataTransaksi); // console.log('Data transaksi yang akan disimpan:', dataTransaksi);
try { try {
const response = await axios.post('/api/transaksi', dataTransaksi, { const response = await axios.post('/api/transaksi', dataTransaksi, {

56
resources/js/components/TrayList.vue
View File

@ -88,7 +88,7 @@
<div class="bg-white rounded-xl shadow-lg max-w-sm w-full p-6 relative"> <div class="bg-white rounded-xl shadow-lg max-w-sm w-full p-6 relative">
<div class="flex justify-center mb-2"> <div class="flex justify-center mb-2">
<div class="p-2 border rounded-lg"> <div class="p-2 border rounded-lg">
<img :src="qrCodeUrl" alt="QR Code" class="w-36 h-36" /> <img :src="qrCodeUrl" alt="QR Code" class="size-36" />
</div> </div>
</div> </div>
@ -177,51 +177,55 @@ const qrCodeUrl = computed(() => {
}); });
const printQR = () => { const printQR = () => {
if (qrCodeUrl.value && selectedItem.value) { if (qrCodeUrl.value) {
const printWindow = window.open('', '_blank'); const printWindow = window.open('', '_blank');
const itemCode = selectedItem.value.kode_item;
printWindow.document.write(` printWindow.document.write(`
<html> <html>
<head> <head>
<title>Print QR Code - ${itemCode}</title> <title>Print QR Code - ${selectedItem.value.kode_item}</title>
<style> <style>
body { @page {
font-family: Arial, sans-serif; size: 60mm 50mm;
text-align: center; margin: 1mm;
padding: 20px;
} }
.qr-container { * {
border: 2px solid #ccc; margin: 0;
padding: 20px; padding: 0;
display: inline-block; }
margin: 20px; body {
font-family: Arial, sans-serif;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
width: 100vw;
}
.qr-container {
text-align: center;
width: 100%;
} }
.qr-img { .qr-img {
width: 200px; width: 40mm;
height: 200px; height: 40mm;
margin-bottom: 2mm;
} }
.item-info { .kode-item {
margin-top: 10px; font-weight: bold;
font-size: 14px; font-size: 14pt;
} }
</style> </style>
</head> </head>
<body> <body>
<div class="qr-container"> <div class="qr-container">
<img id="qr-img" class="qr-img" src="${qrCodeUrl.value}" alt="QR Code" /> <img id="qr-img" class="qr-img" src="${qrCodeUrl.value}" alt="QR Code" />
<div class="item-info"> <div class="kode-item">${selectedItem.value.kode_item}</div>
<div style="font-weight: bold; margin-bottom: 5px;">${itemCode}</div>
<div>${selectedItem.value.produk?.nama || ''}</div>
<div style="color: #666; margin-top: 5px;">${selectedItem.value.produk?.berat || ''}g</div>
</div>
</div> </div>
</body> </body>
</html> </html>
`); `);
printWindow.document.close(); printWindow.document.close();
const img = printWindow.document.getElementById("qr-img"); const img = printWindow.document.getElementById("qr-img");
img.onload = () => { img.onload = () => {
printWindow.focus(); printWindow.focus();

2
resources/js/pages/Brankas.vue
View File

@ -15,7 +15,7 @@
<script setup> <script setup>
import { ref } from 'vue'; import { ref } from 'vue';
import mainLayout from '../layouts/mainLayout.vue' import mainLayout from '../layouts/mainLayout.vue'
import searchbar from '../components/searchbar.vue'; import searchbar from '../components/Searchbar.vue';
import BrankasList from '../components/BrankasList.vue'; import BrankasList from '../components/BrankasList.vue';
const searchQuery = ref(""); const searchQuery = ref("");
</script> </script>

68
resources/js/pages/Kasir.vue
View File

@ -33,26 +33,16 @@
</div> </div>
</div> </div>
</div> </div>
<!-- ✅ POPUP KONFIRMASI -->
<ModalConfirm
v-if="showConfirm"
title="Konfirmasi"
:message="confirmMessage"
@confirm="handleConfirm"
@cancel="showConfirm = false"
/>
</mainLayout> </mainLayout>
</template> </template>
<script setup> <script setup>
import { ref, onMounted, onUnmounted } from "vue"; import { ref, onMounted } from "vue";
import axios from "axios"; import axios from "axios";
import mainLayout from "../layouts/mainLayout.vue"; import mainLayout from "../layouts/mainLayout.vue";
import KasirForm from "../components/KasirForm.vue"; import KasirForm from "../components/KasirForm.vue";
import KasirTransaksiList from "../components/KasirTransaksiList.vue"; import KasirTransaksiList from "../components/KasirTransaksiList.vue";
import ModalConfirm from "../components/ModalConfirm.vue"; // ✅ Tambah ini
const transaksi = ref({ const transaksi = ref({
data: [], data: [],
@ -62,22 +52,13 @@ const loading = ref(true);
const currentPage = ref(1); const currentPage = ref(1);
const limit = 10; const limit = 10;
const showConfirm = ref(false); // ✅
const confirmMessage = ref("Apakah kamu yakin?"); // ✅
let lastTransaksi = null; // untuk tau data transaksi terakhir
// ✅ Placeholder jika user tekan "Ya"
const handleConfirm = () => {
showConfirm.value = false;
console.log("User konfirmasi, cetak struk di sini...", lastTransaksi);
// TODO: jalankan fungsi cetakStruk(lastTransaksi)
};
// Fetch hanya transaksi hari ini // Fetch hanya transaksi hari ini
const fetchTransaksiHariIni = async (page = 1) => { const fetchTransaksiHariIni = async (page = 1) => {
try { try {
loading.value = true; loading.value = true;
currentPage.value = page; currentPage.value = page;
// Hanya fetch transaksi hari ini
const today = new Date().toISOString().split('T')[0]; const today = new Date().toISOString().split('T')[0];
const params = new URLSearchParams({ const params = new URLSearchParams({
limit: limit, limit: limit,
@ -86,6 +67,8 @@ const fetchTransaksiHariIni = async (page = 1) => {
end_date: today end_date: today
}).toString(); }).toString();
// console.log('Fetching transaksi hari ini:', params);
const res = await axios.get(`/api/transaksi?${params}`, { const res = await axios.get(`/api/transaksi?${params}`, {
headers: { headers: {
Authorization: `Bearer ${localStorage.getItem("token")}`, Authorization: `Bearer ${localStorage.getItem("token")}`,
@ -96,11 +79,23 @@ const fetchTransaksiHariIni = async (page = 1) => {
data: res.data.data || [], data: res.data.data || [],
pagination: res.data.pagination || null pagination: res.data.pagination || null
}; };
// console.log("Transaksi hari ini:", transaksi.value);
} catch (err) { } catch (err) {
console.error("Gagal fetch transaksi hari ini:", err); console.error("Gagal fetch transaksi hari ini:", err);
transaksi.value = { data: [], pagination: null }; transaksi.value = { data: [], pagination: null };
alert("Gagal memuat transaksi hari ini");
let errorMessage = 'Gagal memuat transaksi hari ini';
if (err.response) {
errorMessage += `: ${err.response.status} - ${err.response.data?.message || err.response.statusText}`;
} else if (err.request) {
errorMessage += ': Tidak ada respon dari server';
} else {
errorMessage += `: ${err.message}`;
}
alert(errorMessage);
} finally { } finally {
loading.value = false; loading.value = false;
} }
@ -108,13 +103,18 @@ const fetchTransaksiHariIni = async (page = 1) => {
// Handle pagination // Handle pagination
const handlePageChange = (page) => { const handlePageChange = (page) => {
// console.log('Page changed to:', page);
if (page >= 1 && page <= (transaksi.value.pagination?.last_page || 1)) { if (page >= 1 && page <= (transaksi.value.pagination?.last_page || 1)) {
fetchTransaksiHariIni(page); fetchTransaksiHariIni(page);
} }
}; };
// ✅ Popup setelah transaksi tersimpan // Handle transaksi baru dari KasirForm
const handleTransaksiSaved = async (newTransaksi) => { const handleTransaksiSaved = async (newTransaksi) => {
// console.log("Transaksi baru disimpan:", newTransaksi);
// Karena ini transaksi hari ini, selalu tambahkan ke list
const formattedNewTransaksi = { const formattedNewTransaksi = {
id: newTransaksi.id, id: newTransaksi.id,
kode_transaksi: newTransaksi.kode_transaksi, kode_transaksi: newTransaksi.kode_transaksi,
@ -125,28 +125,31 @@ const handleTransaksiSaved = async (newTransaksi) => {
total_items: newTransaksi.itemTransaksi?.length || 0, total_items: newTransaksi.itemTransaksi?.length || 0,
tanggal: new Date(newTransaksi.created_at).toLocaleDateString('id-ID') tanggal: new Date(newTransaksi.created_at).toLocaleDateString('id-ID')
}; };
// Tambahkan ke awal array
transaksi.value.data.unshift(formattedNewTransaksi); transaksi.value.data.unshift(formattedNewTransaksi);
lastTransaksi = formattedNewTransaksi; // ✅ Simpan untuk cetak
// Update pagination
if (transaksi.value.pagination) { if (transaksi.value.pagination) {
transaksi.value.pagination.total += 1; transaksi.value.pagination.total += 1;
// Jika sudah penuh, hapus item terakhir
if (transaksi.value.data.length > limit) { if (transaksi.value.data.length > limit) {
transaksi.value.data.pop(); transaksi.value.data.pop();
} }
} }
confirmMessage.value = "Transaksi berhasil disimpan. Cetak struk sekarang?"; // console.log("Transaksi baru ditambahkan ke list hari ini");
showConfirm.value = true; // ✅ Munculkan popup
}; };
// Auto-refresh setiap 10 detik untuk update real-time // Auto-refresh setiap 10 detik untuk update real-time
let refreshInterval = null; let refreshInterval = null;
const startAutoRefresh = () => { const startAutoRefresh = () => {
if (refreshInterval) clearInterval(refreshInterval); if (refreshInterval) clearInterval(refreshInterval);
refreshInterval = setInterval(() => { refreshInterval = setInterval(() => {
fetchTransaksiHariIni(currentPage.value); fetchTransaksiHariIni(currentPage.value);
}, 10000); }, 10000); // 10 detik
}; };
const stopAutoRefresh = () => { const stopAutoRefresh = () => {
@ -156,11 +159,14 @@ const stopAutoRefresh = () => {
} }
}; };
// Initialize
onMounted(async () => { onMounted(async () => {
await fetchTransaksiHariIni(); await fetchTransaksiHariIni();
startAutoRefresh(); startAutoRefresh();
}); });
// Cleanup
import { onUnmounted } from 'vue';
onUnmounted(() => { onUnmounted(() => {
stopAutoRefresh(); stopAutoRefresh();
}); });

6
resources/js/pages/Login.vue
View File

@ -77,11 +77,7 @@ const handleLogin = async () => {
window.location.href = data.redirect; window.location.href = data.redirect;
} catch (error) { } catch (error) {
if (error.response?.data?.message) { if (error.response?.data?.message) {
if (error.response.data.message.includes("Nama atau password salah")) { errorMessage.value = error.response.data.message;
errorMessage.value = "Login gagal. Periksa username atau password.";
} else {
errorMessage.value = "Terjadi kesalahan pada server";
}
} else { } else {
errorMessage.value = "Login gagal. Periksa username atau password."; errorMessage.value = "Login gagal. Periksa username atau password.";
} }

57
resources/js/pages/Produk.vue
View File

@ -1,7 +1,13 @@
<template> <template>
<mainLayout> <mainLayout>
<!-- Modal Buat Item --> <!-- Modal Buat Item -->
<CreateItemModal :isOpen="creatingItem" :product="detail" @close="closeItemModal" @itemAdded="handleItemAdded" /> <CreateItemModal
:isOpen="creatingItem"
:product="detail"
@close="closeItemModal"
@itemAdded="handleItemAdded"
/>
<!-- Modal Konfirmasi Hapus Produk --> <!-- Modal Konfirmasi Hapus Produk -->
<ConfirmDeleteModal :isOpen="deleting" @cancel="deleting = false" @confirm="deleteProduk" title="Hapus Produk" <ConfirmDeleteModal :isOpen="deleting" @cancel="deleting = false" @confirm="deleteProduk" title="Hapus Produk"
@ -45,20 +51,26 @@
</div> </div>
</div> </div>
<!-- 🔹 Alert Message --> <!-- 🔹 Alert Message -->
<div class="my-5" v-if="alert"> <div class="my-5" v-if="alert">
<div v-if="alert.error" class="text-[#721c24] bg-[#f8d7da] border-l-4 border-[#dc3545] p-3 mb-5 rounded" <div
role="alert"> v-if="alert.error"
<strong class="font-bold">Error! </strong> class="text-[#721c24] bg-[#f8d7da] border-l-4 border-[#dc3545] p-3 mb-5 rounded"
<span class="block sm:inline">{{ alert.error }}</span> role="alert"
</div> >
<div v-if="alert.success" class="text-[#155724] bg-[#d4edda] border-l-4 border-[#28a745] p-3 mb-5 rounded" <strong class="font-bold">Error! </strong>
role="alert"> <span class="block sm:inline">{{ alert.error }}</span>
<strong class="font-bold">Success! </strong>
<span class="block sm:inline">{{ alert.success }}</span>
</div>
</div> </div>
<!-- 🔹 End Alert --> <div
v-if="alert.success"
class="text-[#155724] bg-[#d4edda] border-l-4 border-[#28a745] p-3 mb-5 rounded"
role="alert"
>
<strong class="font-bold">Success! </strong>
<span class="block sm:inline">{{ alert.success }}</span>
</div>
</div>
<!-- 🔹 End Alert -->
<!-- 🔵 Loading State (sama persis dengan kategori) --> <!-- 🔵 Loading State (sama persis dengan kategori) -->
<div v-if="loading" class="flex justify-center items-center h-screen"> <div v-if="loading" class="flex justify-center items-center h-screen">
@ -156,7 +168,7 @@ import { ref, onMounted, computed } from "vue";
import axios from "axios"; import axios from "axios";
import mainLayout from "../layouts/mainLayout.vue"; import mainLayout from "../layouts/mainLayout.vue";
import ProductCard from "../components/ProductCard.vue"; import ProductCard from "../components/ProductCard.vue";
import searchbar from "../components/searchbar.vue"; import searchbar from "../components/Searchbar.vue";
import CreateItemModal from "../components/CreateItemModal.vue"; import CreateItemModal from "../components/CreateItemModal.vue";
import ConfirmDeleteModal from "../components/ConfirmDeleteModal.vue"; import ConfirmDeleteModal from "../components/ConfirmDeleteModal.vue";
import InputSelect from "../components/InputSelect.vue"; import InputSelect from "../components/InputSelect.vue";
@ -177,12 +189,12 @@ const kategori = ref([]);
const loading = ref(false); const loading = ref(false);
function showAlert(type, message) { function showAlert(type, message) {
alert.value = { [type]: message }; alert.value = { [type]: message };
clearTimeout(timer.value); clearTimeout(timer.value);
timer.value = setTimeout(() => { timer.value = setTimeout(() => {
alert.value = null; alert.value = null;
}, 5000); }, 5000);
} }
// Load kategori // Load kategori
const loadKategori = async () => { const loadKategori = async () => {
@ -307,8 +319,11 @@ function handleItemAdded() {
if (detail.value) { if (detail.value) {
detail.value.items_count++; detail.value.items_count++;
} }
creatingItem.value = false;
} }
// Hapus produk // Hapus produk
async function deleteProduk() { async function deleteProduk() {
try { try {

15
resources/js/pages/Tray.vue
View File

@ -60,7 +60,7 @@
import { ref } from "vue"; import { ref } from "vue";
import axios from "axios"; import axios from "axios";
import mainLayout from "../layouts/mainLayout.vue"; import mainLayout from "../layouts/mainLayout.vue";
import Searchbar from "../components/searchbar.vue"; import Searchbar from "../components/Searchbar.vue";
import TrayList from "../components/TrayList.vue"; import TrayList from "../components/TrayList.vue";
import InputField from "../components/InputField.vue"; import InputField from "../components/InputField.vue";
import ConfirmDeleteModal from "../components/ConfirmDeleteModal.vue"; import ConfirmDeleteModal from "../components/ConfirmDeleteModal.vue";
@ -99,10 +99,7 @@ const saveTray = async () => {
} }
try { try {
const token = localStorage.getItem("token"); const token = localStorage.getItem("token");
const headers = { const headers = { Authorization: `Bearer ${token}` };
Accept: 'application/json',
Authorization: `Bearer ${token}`
};
if (editingTrayId.value) { if (editingTrayId.value) {
await axios.put(`/api/nampan/${editingTrayId.value}`, { nama: trayName.value }, { headers }); await axios.put(`/api/nampan/${editingTrayId.value}`, { nama: trayName.value }, { headers });
alert.value = { success: "Nampan berhasil diperbarui" }; alert.value = { success: "Nampan berhasil diperbarui" };
@ -113,13 +110,11 @@ const saveTray = async () => {
timer.value = setTimeout(() => { alert.value = null; }, 5000); timer.value = setTimeout(() => { alert.value = null; }, 5000);
closeModal(); closeModal();
if (trayList.value) { if (trayList.value) {
await trayList.value.refreshData(); await trayList.value.refreshData(); // Call refreshData on TrayList
} }
} catch (error) { } catch (error) {
const errors = error.response?.data?.errors?.nama || []; console.error(error);
console.log(errors); errorCreate.value = error.response?.data?.message || "Gagal menyimpan nampan.";
errorCreate.value = errors[0] || 'Gagal menyimpan nampan.';
clearTimeout(timer.value); clearTimeout(timer.value);
timer.value = setTimeout(() => { errorCreate.value = ""; }, 3000); timer.value = setTimeout(() => { errorCreate.value = ""; }, 3000);
} }