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

Compare commits

base: Magang-2025:420cf47f2095dd759a4d88d2370222cf97ff3ccd
Branches Tags
Magang-2025:main
Magang-2025:production
..
compare: Magang-2025:c28be3706e6b1f07da23fcf395668bf218d88ae9
Branches Tags
Magang-2025:production
Magang-2025:main

No commits in common. "420cf47f2095dd759a4d88d2370222cf97ff3ccd" and "c28be3706e6b1f07da23fcf395668bf218d88ae9" have entirely different histories.
420cf47f20 ... c28be3706e

4 changed files with 218 additions and 290 deletions
Show Stats Expand all files Collapse all files

33
database/migrations/2025_09_03_140242_create_personal_access_tokens_table.php
View File

@ -1,33 +0,0 @@
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
return new class extends Migration
{
/**
* Run the migrations.
*/
public function up(): void
{
Schema::create('personal_access_tokens', function (Blueprint $table) {
$table->id();
$table->morphs('tokenable');
$table->text('name');
$table->string('token', 64)->unique();
$table->text('abilities')->nullable();
$table->timestamp('last_used_at')->nullable();
$table->timestamp('expires_at')->nullable()->index();
$table->timestamps();
});
}
/**
* Reverse the migrations.
*/
public function down(): void
{
Schema::dropIfExists('personal_access_tokens');
}
};

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

@ -1,151 +1,143 @@
<template> <template>
<ConfirmDeleteModal <ConfirmDeleteModal
v-if="showDeleteModal" :isOpen="showDeleteModal"
:isOpen="showDeleteModal" title="Konfirmasi"
title="Konfirmasi" message="Yakin ingin menghapus item ini?"
message="Yakin ingin menghapus item ini?" @confirm="hapusPesanan"
@confirm="hapusPesanan" @cancel="closeDeleteModal"
@cancel="closeDeleteModal" />
/>
<div class="p-2 sm:p-4"> <div>
<!-- Grid Form & Total --> <div class="grid grid-cols-2 h-full gap-4 mb-4">
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4"> <div class="flex flex-col gap-4">
<!-- Input Form --> <div>
<div class="order-2 md:order-1 flex flex-col gap-4"> <label class="block text-sm font-medium text-D"
<!-- Input Kode Item --> >Kode Item *</label
<div> >
<label class="block text-sm font-medium text-D">Kode Item *</label> <div
<div class="flex flex-row justify-between mt-1 w-full rounded-md bg-A shadow-sm sm:text-sm border-B"
class="flex flex-row justify-between mt-1 w-full rounded-md bg-A shadow-sm sm:text-sm border-B" >
> <input
<input type="text"
type="text" v-model="kodeItem"
v-model="kodeItem" @keyup.enter="inputItem"
@keyup.enter="inputItem" placeholder="Scan atau masukkan kode item"
placeholder="Scan atau masukkan kode item" class="bg-A focus:outline-none focus:border-C focus:ring focus:ring-D focus:ring-opacity-50 p-2 w-full rounded-l-md"
class="bg-A focus:outline-none focus:border-C focus:ring focus:ring-D focus:ring-opacity-50 p-2 w-full rounded-l-md" />
/> <button
<button v-if="!loadingItem"
v-if="!loadingItem" @click="inputItem"
@click="inputItem" class="px-3 bg-D hover:bg-D/80 text-A rounded-r-md"
class="px-3 bg-D hover:bg-D/80 text-A rounded-r-md" >
> <i class="fas fa-arrow-right"></i>
<i class="fas fa-arrow-right"></i> </button>
</button> <div
<div v-else class="flex items-center justify-center px-3"> v-else
<div class="flex items-center justify-center px-3"
class="rounded-full h-5 w-5 border-b-2 border-A flex items-center justify-center" >
> <div
<i class="fas fa-spinner"></i> class="rounded-full h-5 w-5 border-b-2 border-A flex items-center justify-center"
</div> >
<i class="fas fa-spinner"></i>
</div>
</div>
</div>
</div>
<div>
<label class="block text-sm font-medium text-D"
>Harga Jual</label
>
<InputField
v-model="hargaJual"
type="number"
placeholder="Masukkan Harga Jual"
/>
</div>
<div class="flex justify-between gap-4">
<button
@click="tambahItem"
class="px-4 py-2 rounded-md bg-C text-D font-medium hover:bg-C/80 transition"
>
Tambah Item
</button>
<button
@click="konfirmasiPenjualan"
class="px-6 py-2 rounded-md bg-D text-A font-semibold hover:bg-D/80 transition"
>
Lanjut
</button>
</div>
</div>
<div class="flex pt-10 justify-center">
<div class="text-start">
<span class="block text-gray-600 font-medium">Total:</span>
<span class="text-3xl font-bold text-D">
Rp{{ total.toLocaleString() }},-
</span>
</div>
</div> </div>
</div>
</div> </div>
<!-- Input Harga Jual --> <div class="mb-4">
<div> <p
<label class="block text-sm font-medium text-D">Harga Jual</label> v-if="error"
<InputField :class="{ 'animate-shake': error }"
v-model="hargaJual" class="text-sm text-red-600 mt-1"
type="number" >
placeholder="Masukkan Harga Jual" {{ error }}
/> </p>
<p v-if="info" class="text-sm text-C mt-1">{{ info }}</p>
</div> </div>
<!-- Tombol Aksi --> <table
<div class="flex flex-col sm:flex-row justify-between gap-2"> class="w-full border border-B text-sm rounded-lg overflow-hidden"
<button >
@click="tambahItem" <thead class="bg-A text-D">
class="w-full sm:w-auto px-4 py-2 rounded-md bg-C text-D font-medium hover:bg-C/80 transition" <tr>
> <th class="border border-B p-2">No</th>
Tambah Item <th class="border border-B p-2">Nam Produk</th>
</button> <th class="border border-B p-2">Posisi</th>
<button <th class="border border-B p-2">Harga</th>
@click="konfirmasiPenjualan" <th class="border border-B p-2"></th>
class="w-full sm:w-auto px-6 py-2 rounded-md bg-D text-A font-semibold hover:bg-D/80 transition" </tr>
> </thead>
Lanjut <tbody>
</button> <tr v-if="pesanan.length == 0" class="text-center text-D/70">
</div> <td colspan="5" class="h-20 border border-B">
</div> Belum ada item dipesan
</td>
<!-- Total --> </tr>
<div class="order-1 md:order-2 flex flex-col md:flex-row md:items-center md:justify-center gap-1"> <tr
<div class="text-left md:text-start"> v-else
<span class="block text-gray-600 font-medium">Total:</span> v-for="(item, index) in pesanan"
<span class="text-2xl sm:text-3xl font-bold text-D"> :key="index"
Rp{{ total.toLocaleString() }},- class="hover:bg-gray-50 text-center"
</span> >
</div> <td class="border border-B p-2">{{ index + 1 }}</td>
</div> <td class="border border-B p-2 text-left">
{{ item.produk.nama }}
</td>
<td class="border border-B p-2">
{{ item.posisi ? item.posisi : "Brankas" }}
</td>
<td class="border border-B p-2">
Rp{{ item.harga_deal.toLocaleString() }}
</td>
<td class="border border-B p-2 text-center">
<button
@click="openDeleteModal(index)"
class="text-red-500 hover:text-red-700"
>
<i class="fas fa-trash"></i>
</button>
</td>
</tr>
</tbody>
</table>
</div> </div>
<!-- Error & Info -->
<div class="mb-4">
<p
v-if="error"
:class="{ 'animate-shake': error }"
class="text-sm text-red-600 mt-1"
>
{{ error }}
</p>
<p v-if="info" class="text-sm text-C mt-1">{{ info }}</p>
</div>
<!-- Table Responsive -->
<div class="overflow-x-auto">
<table
class="w-full border border-B rounded-lg overflow-hidden text-xs sm:text-sm"
>
<thead class="bg-A text-D">
<tr>
<th class="border border-B p-2 w-8">No</th>
<th class="border border-B p-2">Nama Produk</th>
<th class="border border-B p-2">Posisi</th>
<th class="border border-B p-2">Harga</th>
<th class="border border-B p-2 w-10"></th>
</tr>
</thead>
<tbody>
<tr v-if="pesanan.length == 0" class="text-center text-D/70">
<td colspan="5" class="h-16 border border-B text-xs sm:text-sm">
Belum ada item dipesan
</td>
</tr>
<tr
v-else
v-for="(item, index) in pesanan"
:key="index"
class="hover:bg-gray-50 text-center"
>
<td class="border border-B p-2">{{ index + 1 }}</td>
<td class="border border-B p-2 text-left truncate max-w-[120px] sm:max-w-none">
{{ item.produk.nama }}
</td>
<td class="border border-B p-2 truncate max-w-[80px]">
{{ item.posisi ? item.posisi : "Brankas" }}
</td>
<td class="border border-B p-2 whitespace-nowrap">
Rp{{ item.harga_deal.toLocaleString() }}
</td>
<td class="border border-B p-2 text-center">
<button
@click="openDeleteModal(index)"
class="text-red-500 hover:text-red-700"
>
<i class="fas fa-trash"></i>
</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</template> </template>
<script setup> <script setup>
import { ref, computed } from "vue"; import { ref, computed } from "vue";
import InputField from "./InputField.vue"; import InputField from "./InputField.vue";

49
resources/js/components/KasirTransaksiList.vue
View File

@ -1,31 +1,26 @@
<template> <template>
<div class="overflow-x-auto"> <h3 class="text-lg font-semibold mb-4 text-gray-800">Transaksi</h3>
<h3 class="text-lg font-semibold mb-4 text-gray-800">Transaksi</h3> <table class="w-full border border-B rounded-lg text-sm">
<table class="w-full min-w-[500px] border border-B rounded-lg text-sm"> <thead class="bg-A text-D">
<thead class="bg-A text-D"> <tr>
<tr> <th class="border border-B p-2">Tanggal</th>
<th class="border border-B p-2 text-left">Tanggal</th> <th class="border border-B p-2">Kode Transaksi</th>
<th class="border border-B p-2 text-left">Kode Transaksi</th> <th class="border border-B p-2">Pendapatan</th>
<th class="border border-B p-2 text-left">Pendapatan</th> <th class="border border-B p-2">Detail Item</th>
<th class="border border-B p-2 text-center">Detail Item</th> </tr>
</tr> </thead>
</thead> <tbody>
<tbody> <tr v-for="trx in props.transaksi" :key="trx.id" class="hover:bg-A">
<tr v-for="trx in props.transaksi" :key="trx.id" class="hover:bg-A"> <td class="border border-B p-2">{{ trx.tanggal }}</td>
<td class="border border-B p-2">{{ trx.tanggal }}</td> <td class="border border-B p-2">{{ trx.kode }}</td>
<td class="border border-B p-2">{{ trx.kode }}</td> <td class="border border-B p-2">Rp{{ (trx.pendapatan || 0).toLocaleString() }}</td>
<td class="border border-B p-2">Rp{{ (trx.pendapatan || 0).toLocaleString() }}</td> <td class="border border-B p-2 text-center">
<td class="border border-B p-2 text-center"> <button @click="$emit('detail', trx)"
<button class="px-3 py-1 rounded-md bg-D text-A hover:bg-D/80 transition">Detail</button>
@click="$emit('detail', trx)" </td>
class="px-3 py-1 rounded-md bg-D text-A hover:bg-D/80 transition"> </tr>
Detail </tbody>
</button> </table>
</td>
</tr>
</tbody>
</table>
</div>
</template> </template>
<script setup> <script setup>

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

@ -1,105 +1,79 @@
<template> <template>
<mainLayout> <mainLayout>
<div class="lg:p-2 pt-6"> <div class="lg:p-2 pt-6">
<div <div class="grid grid-cols-1 lg:grid-cols-5 gap-3 sm:gap-2 mx-auto min-h-[75vh]">
class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-3 sm:gap-2 mx-auto min-h-[75vh]" <!-- Left Section - Form Kasir -->
> <div class="lg:col-span-3">
<!-- Left Section - Form Kasir --> <div class="bg-white rounded-xl shadow-lg border border-B overflow-hidden h-full">
<div class="lg:col-span-3"> <div class="p-2 md:p-4 h-full">
<div <KasirForm />
class="bg-white rounded-xl shadow-lg border border-B overflow-hidden h-auto lg:h-full"
>
<div class="p-2 sm:p-3 md:p-4 h-auto lg:h-full">
<KasirForm />
</div>
</div>
</div>
<!-- Right Section - Transaction List -->
<div class="lg:col-span-2">
<div
class="bg-white rounded-xl shadow-lg border border-B overflow-hidden lg:h-fit sticky top-4 max-h-[70vh] overflow-y-auto"
>
<div class="p-3 sm:p-4 md:p-6">
<!-- Loading -->
<div
v-if="loading"
class="flex items-center justify-center py-8"
>
<div
class="animate-spin rounded-full h-8 w-8 border-b-2 border-C"
></div>
<span class="ml-3 text-D/70"
>Memuat transaksi...</span
>
</div>
<!-- Empty -->
<div
v-else-if="!transaksi.length"
class="text-center py-8"
>
<svg
class="w-16 h-16 mx-auto text-B mb-4"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1"
d="M9 5H7a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"
/>
</svg>
<p class="text-[var(--color-D)]/60 text-sm">
Belum ada transaksi
</p>
</div>
<!-- Transaction List -->
<KasirTransaksiList
v-else
:transaksi="transaksi"
@detail="lihatDetail"
/>
</div>
</div>
</div>
</div> </div>
</div>
</div> </div>
</mainLayout>
<!-- Right Section - Transaction List -->
<div class="lg:col-span-2">
<div class="bg-white rounded-xl shadow-lg border border-B overflow-hidden lg:h-fit sticky top-4">
<!-- Transaction List Content -->
<div class="p-4 sm:p-6 overflow-y-auto">
<!-- Loading State -->
<div v-if="loading" class="flex items-center justify-center py-8">
<div class="animate-spin rounded-full h-8 w-8 border-b-2 border-C"></div>
<span class="ml-3 text-D/70">Memuat transaksi...</span>
</div>
<!-- Empty State -->
<div v-else-if="!transaksi.length" class="text-center py-8">
<svg class="w-16 h-16 mx-auto text-B mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1"
d="M9 5H7a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
</svg>
<p class="text-[var(--color-D)]/60 text-sm">Belum ada transaksi</p>
</div>
<!-- Transaction List -->
<KasirTransaksiList
v-else
:transaksi="transaksi"
@detail="lihatDetail"
/>
</div>
</div>
</div>
</div>
</div>
</mainLayout>
</template> </template>
<script setup> <script setup>
import { ref, onMounted } 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'
const transaksi = ref([]); const transaksi = ref([])
const loading = ref(true); const loading = ref(true)
onMounted(async () => { onMounted(async () => {
try { try {
loading.value = true; loading.value = true
const res = await axios.get("/api/transaksi?limit=10", { const res = await axios.get("/api/transaksi?limit=10", {
headers: { headers: {
Authorization: `Bearer ${localStorage.getItem("token")}`, Authorization: `Bearer ${localStorage.getItem("token")}`,
}, },
}); })
transaksi.value = res.data; transaksi.value = res.data
} catch (err) { } catch (err) {
console.error("Gagal fetch transaksi:", err); console.error("Gagal fetch transaksi:", err)
} finally { } finally {
loading.value = false; loading.value = false
} }
}); })
const lihatDetail = (trx) => { const lihatDetail = (trx) => {
alert(`Detail transaksi: ${trx.kode}`); alert(`Detail transaksi: ${trx.kode}`)
}; }
</script> </script>