Merge branch 'production' of https://git.abbauf.com/Magang-2025/Kasir into production
This commit is contained in:
dhilanradya
commit
87d38dffb8
65
.env.example
Normal file
65
.env.example
Normal file
@ -0,0 +1,65 @@
|
||||
APP_NAME=Laravel
|
||||
APP_ENV=local
|
||||
APP_KEY=
|
||||
APP_DEBUG=true
|
||||
APP_URL=http://localhost
|
||||
|
||||
APP_LOCALE=en
|
||||
APP_FALLBACK_LOCALE=en
|
||||
APP_FAKER_LOCALE=en_US
|
||||
|
||||
APP_MAINTENANCE_DRIVER=file
|
||||
# APP_MAINTENANCE_STORE=database
|
||||
|
||||
PHP_CLI_SERVER_WORKERS=4
|
||||
|
||||
BCRYPT_ROUNDS=12
|
||||
|
||||
LOG_CHANNEL=stack
|
||||
LOG_STACK=single
|
||||
LOG_DEPRECATIONS_CHANNEL=null
|
||||
LOG_LEVEL=debug
|
||||
|
||||
DB_CONNECTION=sqlite
|
||||
# DB_HOST=127.0.0.1
|
||||
# DB_PORT=3306
|
||||
# DB_DATABASE=laravel
|
||||
# DB_USERNAME=root
|
||||
# DB_PASSWORD=
|
||||
|
||||
SESSION_DRIVER=database
|
||||
SESSION_LIFETIME=120
|
||||
SESSION_ENCRYPT=false
|
||||
SESSION_PATH=/
|
||||
SESSION_DOMAIN=null
|
||||
|
||||
BROADCAST_CONNECTION=log
|
||||
FILESYSTEM_DISK=local
|
||||
QUEUE_CONNECTION=database
|
||||
|
||||
CACHE_STORE=database
|
||||
# CACHE_PREFIX=
|
||||
|
||||
MEMCACHED_HOST=127.0.0.1
|
||||
|
||||
REDIS_CLIENT=phpredis
|
||||
REDIS_HOST=127.0.0.1
|
||||
REDIS_PASSWORD=null
|
||||
REDIS_PORT=6379
|
||||
|
||||
MAIL_MAILER=log
|
||||
MAIL_SCHEME=null
|
||||
MAIL_HOST=127.0.0.1
|
||||
MAIL_PORT=2525
|
||||
MAIL_USERNAME=null
|
||||
MAIL_PASSWORD=null
|
||||
MAIL_FROM_ADDRESS="hello@example.com"
|
||||
MAIL_FROM_NAME="${APP_NAME}"
|
||||
|
||||
AWS_ACCESS_KEY_ID=
|
||||
AWS_SECRET_ACCESS_KEY=
|
||||
AWS_DEFAULT_REGION=us-east-1
|
||||
AWS_BUCKET=
|
||||
AWS_USE_PATH_STYLE_ENDPOINT=false
|
||||
|
||||
VITE_APP_NAME="${APP_NAME}"
|
||||
@ -23,11 +23,10 @@ class ItemController extends Controller
|
||||
public function store(Request $request)
|
||||
{
|
||||
$validated = $request->validate([
|
||||
'id_produk' => 'required|in:produks.id',
|
||||
'id_nampan' => 'nullable|in:nampans.id'
|
||||
'id_produk' => 'required',
|
||||
'id_nampan' => 'nullable'
|
||||
],[
|
||||
'id_produk' => 'Id produk tidak valid.',
|
||||
'id_nampan' => 'Id nampan tidak valid'
|
||||
]);
|
||||
|
||||
$item = Item::create($validated);
|
||||
|
||||
@ -5,12 +5,6 @@
|
||||
@source '../**/*.blade.php';
|
||||
@source '../**/*.js';
|
||||
|
||||
@import url('https://fonts.googleapis.com/css2?family=Platypi:wght@400;500;600;700&display=swap');
|
||||
|
||||
html, body {
|
||||
font-family: "Platypi", sans-serif;
|
||||
}
|
||||
|
||||
@theme {
|
||||
--font-sans: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
|
||||
'Segoe UI Symbol', 'Noto Color Emoji';
|
||||
@ -20,5 +14,5 @@ html, body {
|
||||
--color-A: #F8F0E5;
|
||||
--color-B: #EADBC8;
|
||||
--color-C: #DAC0A3;
|
||||
--color-D: #0F2C59;
|
||||
--color-D: #024768;
|
||||
}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div id="app">
|
||||
<div>
|
||||
<router-view />
|
||||
</div>
|
||||
</template>
|
||||
187
resources/js/components/CreateItemModal.vue
Normal file
187
resources/js/components/CreateItemModal.vue
Normal file
@ -0,0 +1,187 @@
|
||||
<template>
|
||||
<Modal :active="isOpen" size="md" @close="handleClose" clickOutside="false">
|
||||
<div class="p-6">
|
||||
<h3 class="text-lg font-semibold text-gray-900 mb-4">Item {{ product?.nama }}</h3>
|
||||
|
||||
<div v-if="!success">
|
||||
<div class="mb-4">
|
||||
<label class="block text-gray-700 mb-2">Pilih Nampan</label>
|
||||
<InputSelect v-model="selectedNampan" :options="positionListOptions" :disabled="loading" />
|
||||
</div>
|
||||
|
||||
<div class="flex justify-end gap-3">
|
||||
<button @click="handleClose" :disabled="loading"
|
||||
class="px-4 py-2 text-white bg-gray-400 hover:bg-gray-500 rounded-lg transition-colors disabled:opacity-50">
|
||||
Batal
|
||||
</button>
|
||||
<button @click="createItem" :disabled="loading"
|
||||
class="px-4 py-2 bg-C hover:bg-B text-D rounded-lg transition-colors disabled:bg-A disabled:cursor-not-allowed flex items-center gap-2">
|
||||
<svg v-if="loading" class="animate-spin w-4 h-4" fill="none" viewBox="0 0 24 24">
|
||||
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4">
|
||||
</circle>
|
||||
<path class="opacity-75" fill="currentColor"
|
||||
d="m4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z">
|
||||
</path>
|
||||
</svg>
|
||||
{{ loading ? 'Membuat...' : 'Buat Item' }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Success State -->
|
||||
<div v-else>
|
||||
<div class="text-center">
|
||||
<div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
<svg class="w-8 h-8 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7">
|
||||
</path>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<h4 class="text-lg font-semibold text-gray-900 mb-2">Item Berhasil Dibuat!</h4>
|
||||
<p class="text-gray-600 mb-2">
|
||||
Item dari produk "<strong>{{ product?.nama }}</strong>" telah ditambahkan ke {{
|
||||
selectedNampanName }}.
|
||||
</p>
|
||||
<p class="text-sm text-gray-500 mb-6">
|
||||
ID Item: <strong>{{ createdItem.id }}</strong>
|
||||
</p>
|
||||
|
||||
<div class="flex flex-row justify-between gap-3">
|
||||
<button @click="handleClose"
|
||||
class="flex-1 px-6 py-2 bg-gray-400 hover:bg-gray-500 text-white rounded-lg transition-colors">
|
||||
Selesai
|
||||
</button>
|
||||
<button @click="printItem"
|
||||
class="flex-1 px-6 py-2 bg-C hover:bg-B text-D rounded-lg transition-colors opacity-50 cursor-not-allowed"
|
||||
disabled>
|
||||
Print
|
||||
</button>
|
||||
<button @click="addNewItem"
|
||||
class="flex-1 px-6 py-2 bg-C hover:bg-B text-D rounded-lg transition-colors">
|
||||
Buat Lagi
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, watch } from 'vue';
|
||||
import axios from 'axios';
|
||||
import Modal from './Modal.vue';
|
||||
import InputSelect from './InputSelect.vue';
|
||||
|
||||
// Props
|
||||
const props = defineProps({
|
||||
isOpen: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
product: {
|
||||
type: Object,
|
||||
default: null
|
||||
}
|
||||
});
|
||||
|
||||
// Emits
|
||||
const emit = defineEmits(['close']);
|
||||
|
||||
// State
|
||||
const selectedNampan = ref('');
|
||||
const nampanList = ref([]);
|
||||
const positionListOptions = ref([
|
||||
{ value: '', label: 'Brankas', selected: true },
|
||||
])
|
||||
const success = ref(false);
|
||||
const loading = ref(false);
|
||||
const createdItem = ref(null);
|
||||
|
||||
// Computed
|
||||
const selectedNampanName = computed(() => {
|
||||
if (!selectedNampan.value) return 'Brankas';
|
||||
|
||||
console.log("Selected nampan ID:", selectedNampan.value);
|
||||
const nampan = nampanList.value.find(n => n.id === Number(selectedNampan.value));
|
||||
console.log("All nampan:", nampanList.value);
|
||||
console.log("Selected nampan:", nampan);
|
||||
return nampan ? nampan.nama : 'Brankas';
|
||||
});
|
||||
|
||||
// Methods
|
||||
const loadNampanList = async () => {
|
||||
try {
|
||||
const response = await axios.get('/api/nampan');
|
||||
nampanList.value = response.data;
|
||||
positionListOptions.value = [
|
||||
{ value: '', label: 'Brankas', selected: !selectedNampan.value },
|
||||
...nampanList.value.map(n => ({
|
||||
value: n.id,
|
||||
label: `${n.nama} (${n.items_count} items)`,
|
||||
selected: n.id === selectedNampan.value
|
||||
}))
|
||||
];
|
||||
} catch (error) {
|
||||
console.error('Error loading nampan list:', error);
|
||||
}
|
||||
};
|
||||
|
||||
const createItem = async () => {
|
||||
if (!props.product) return;
|
||||
|
||||
loading.value = true;
|
||||
|
||||
try {
|
||||
const payload = {
|
||||
id_produk: props.product.id
|
||||
};
|
||||
|
||||
if (selectedNampan.value) {
|
||||
payload.id_nampan = selectedNampan.value;
|
||||
}
|
||||
|
||||
const response = await axios.post('/api/item', payload);
|
||||
|
||||
success.value = true;
|
||||
createdItem.value = response.data.data
|
||||
console.log('Item created:', createdItem);
|
||||
|
||||
} catch (error) {
|
||||
console.error('Error creating item:', error);
|
||||
alert('Gagal membuat item: ' + (error.response?.data?.message || error.message));
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const addNewItem = () => {
|
||||
success.value = false;
|
||||
selectedNampan.value = '';
|
||||
};
|
||||
|
||||
const printItem = () => {
|
||||
alert('Wak waw');
|
||||
};
|
||||
|
||||
const handleClose = () => {
|
||||
// Reset state
|
||||
selectedNampan.value = '';
|
||||
success.value = false;
|
||||
loading.value = false;
|
||||
|
||||
emit('close');
|
||||
};
|
||||
|
||||
// Watchers
|
||||
watch(() => props.isOpen, (newValue) => {
|
||||
if (newValue) {
|
||||
selectedNampan.value = '';
|
||||
success.value = false;
|
||||
loading.value = false;
|
||||
|
||||
loadNampanList();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
@ -1,48 +0,0 @@
|
||||
<template>
|
||||
<div class="relative inline-block text-left">
|
||||
<!-- Tombol Dropdown -->
|
||||
<button
|
||||
@click="isOpen = !isOpen"
|
||||
class="px-4 py-2 bg-white border rounded-md shadow-sm hover:bg-gray-100"
|
||||
>
|
||||
Manajemen Produk
|
||||
</button>
|
||||
|
||||
<!-- Isi Dropdown -->
|
||||
<div
|
||||
v-if="isOpen"
|
||||
class="absolute left-0 mt-2 w-48 bg-white border rounded-md shadow-lg z-50"
|
||||
>
|
||||
<ul>
|
||||
<li
|
||||
v-for="(item, index) in items"
|
||||
:key="index"
|
||||
@click="goTo(item.route)"
|
||||
class="px-4 py-2 hover:bg-[#DAC0A3] cursor-pointer"
|
||||
>
|
||||
{{ item.label }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
import { useRouter } from "vue-router";
|
||||
|
||||
const isOpen = ref(false);
|
||||
const router = useRouter();
|
||||
|
||||
const items = [
|
||||
{ label: "Brankas", route: "/brankas" },
|
||||
{ label: "Nampan", route: "/nampan" },
|
||||
{ label: "Produk", route: "/produk" },
|
||||
{ label: "Sales", route: "/sales" },
|
||||
];
|
||||
|
||||
const goTo = (route) => {
|
||||
isOpen.value = false;
|
||||
router.push(route);
|
||||
};
|
||||
</script>
|
||||
@ -45,7 +45,7 @@ const toggleDropdown = () => {
|
||||
<li
|
||||
v-for="(sub, index) in subItems"
|
||||
:key="index"
|
||||
class="px-4 py-2 hover:bg-[#DAC0A3] cursor-pointer"
|
||||
class="px-4 py-2 hover:bg-A cursor-pointer"
|
||||
>
|
||||
<router-link :to="sub.route" class="block w-full h-full">
|
||||
{{ sub.label }}
|
||||
|
||||
93
resources/js/components/KasirForm.vue
Normal file
93
resources/js/components/KasirForm.vue
Normal file
@ -0,0 +1,93 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- Input Grid -->
|
||||
<div class="grid grid-cols-2 gap-4 mb-4">
|
||||
<div class="flex flex-col gap-4">
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700">Kode Item *</label>
|
||||
<InputField
|
||||
v-model="kodeItem"
|
||||
type="text"
|
||||
placeholder="Masukkan kode item"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700">Harga Jual</label>
|
||||
<InputField
|
||||
v-model="hargaJual"
|
||||
type="number"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-center">
|
||||
<div class="text-center">
|
||||
<span class="block text-gray-600 font-medium">Total:</span>
|
||||
<span class="text-3xl font-bold text-[#0f1d4a]">
|
||||
Rp{{ total.toLocaleString() }},-
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Buttons -->
|
||||
<div class="flex gap-4 mb-6">
|
||||
<button @click="tambahItem"
|
||||
class="px-4 py-2 rounded-md bg-[#f1ede8] text-[#0f1d4a] font-medium hover:bg-[#e4dfd8] transition">
|
||||
Tambah Item
|
||||
</button>
|
||||
<button
|
||||
class="px-6 py-2 rounded-md bg-[#c6a77d] text-[#0f1d4a] font-semibold hover:bg-[#b09065] transition">
|
||||
Lanjut
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Table -->
|
||||
<table class="w-full border-collapse border border-gray-200 text-sm rounded-lg overflow-hidden">
|
||||
<thead class="bg-gray-100 text-[#0f1d4a]">
|
||||
<tr>
|
||||
<th class="border border-gray-200 p-2">No</th>
|
||||
<th class="border border-gray-200 p-2">Item</th>
|
||||
<th class="border border-gray-200 p-2">Jml</th>
|
||||
<th class="border border-gray-200 p-2">Harga</th>
|
||||
<th class="border border-gray-200 p-2">Total</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="(item, index) in pesanan" :key="index" class="hover:bg-gray-50">
|
||||
<td class="border border-gray-200 p-2 text-center">{{ index + 1 }}</td>
|
||||
<td class="border border-gray-200 p-2">{{ item.kode }}</td>
|
||||
<td class="border border-gray-200 p-2 text-center">{{ item.jumlah }}</td>
|
||||
<td class="border border-gray-200 p-2">Rp{{ item.harga.toLocaleString() }}</td>
|
||||
<td class="border border-gray-200 p-2">Rp{{ (item.harga * item.jumlah).toLocaleString() }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
|
||||
|
||||
<script setup>
|
||||
import { ref, computed } from 'vue'
|
||||
import InputField from './InputField.vue'
|
||||
|
||||
const kodeItem = ref('')
|
||||
const hargaJual = ref(0)
|
||||
const pesanan = ref([])
|
||||
|
||||
const tambahItem = () => {
|
||||
if (!kodeItem.value || !hargaJual.value) return
|
||||
pesanan.value.push({
|
||||
kode: kodeItem.value,
|
||||
jumlah: 1,
|
||||
harga: parseFloat(hargaJual.value),
|
||||
})
|
||||
kodeItem.value = ''
|
||||
hargaJual.value = 0
|
||||
}
|
||||
|
||||
const total = computed(() =>
|
||||
pesanan.value.reduce((sum, item) => sum + item.harga * item.jumlah, 0)
|
||||
)
|
||||
</script>
|
||||
42
resources/js/components/KasirTransaksiList.vue
Normal file
42
resources/js/components/KasirTransaksiList.vue
Normal file
@ -0,0 +1,42 @@
|
||||
<template>
|
||||
<h3 class="text-lg font-semibold mb-4 text-gray-800">Transaksi</h3>
|
||||
<table class="w-full border-collapse border border-gray-200 text-sm">
|
||||
<thead class="bg-gray-100">
|
||||
<tr>
|
||||
<th class="border border-gray-200 p-2">Tanggal</th>
|
||||
<th class="border border-gray-200 p-2">Kode Transaksi</th>
|
||||
<th class="border border-gray-200 p-2">Pendapatan</th>
|
||||
<th class="border border-gray-200 p-2">Detail Item</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="trx in props.transaksi" :key="trx.id">
|
||||
<td class="border border-gray-200 p-2">{{ trx.tanggal }}</td>
|
||||
<td class="border border-gray-200 p-2">{{ trx.kode }}</td>
|
||||
<td class="border border-gray-200 p-2">Rp{{ (trx.pendapatan || 0).toLocaleString() }}</td>
|
||||
<td class="border border-gray-200 p-2 text-center">
|
||||
<button @click="$emit('detail', trx)"
|
||||
class="px-3 py-1 rounded-md bg-[#c6a77d] text-white hover:bg-[#b09065] transition">Detail</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from "vue"
|
||||
|
||||
const props = defineProps({
|
||||
transaksi: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
})
|
||||
|
||||
defineEmits(['detail'])
|
||||
|
||||
onMounted(() => {
|
||||
console.log(props.transaksi);
|
||||
|
||||
})
|
||||
</script>
|
||||
96
resources/js/components/Modal.vue
Normal file
96
resources/js/components/Modal.vue
Normal file
@ -0,0 +1,96 @@
|
||||
<template>
|
||||
<Teleport to="body">
|
||||
<Transition name="modal">
|
||||
<div
|
||||
v-if="active"
|
||||
class="fixed inset-0 bg-black/70 flex items-center justify-center z-50 p-4"
|
||||
@click="handleOverlayClick"
|
||||
>
|
||||
<div
|
||||
class="bg-white rounded-lg shadow-2xl max-h-[90vh] overflow-y-auto relative"
|
||||
:class="sizeClass"
|
||||
@click.stop
|
||||
>
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
</Transition>
|
||||
</Teleport>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, watch, onBeforeUnmount } from 'vue'
|
||||
|
||||
const props = defineProps({
|
||||
active: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
size: {
|
||||
type: String,
|
||||
default: 'md',
|
||||
validator: (value) => ['xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', 'full'].includes(value)
|
||||
},
|
||||
clickOutside: {
|
||||
type: [Boolean, String],
|
||||
default: true
|
||||
}
|
||||
})
|
||||
|
||||
const emit = defineEmits(['close'])
|
||||
|
||||
const sizeClass = computed(() => {
|
||||
const sizes = {
|
||||
xs: 'w-full max-w-xs',
|
||||
sm: 'w-full max-w-sm',
|
||||
md: 'w-full max-w-md',
|
||||
lg: 'w-full max-w-lg',
|
||||
xl: 'w-full max-w-xl',
|
||||
'2xl': 'w-full max-w-2xl',
|
||||
'3xl': 'w-full max-w-3xl',
|
||||
'4xl': 'w-full max-w-4xl',
|
||||
full: 'w-[95vw] h-[95vh] max-w-none max-h-none'
|
||||
}
|
||||
return sizes[props.size] || sizes.md
|
||||
})
|
||||
|
||||
const handleOverlayClick = () => {
|
||||
if (clickOutside.value) {
|
||||
emit('close')
|
||||
}
|
||||
}
|
||||
|
||||
watch(() => props.active, (newVal) => {
|
||||
if (newVal) {
|
||||
document.body.style.overflow = 'hidden'
|
||||
} else {
|
||||
document.body.style.overflow = ''
|
||||
}
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
document.body.style.overflow = ''
|
||||
})
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.modal-enter-active,
|
||||
.modal-leave-active {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.modal-enter-from,
|
||||
.modal-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.modal-enter-from .bg-white,
|
||||
.modal-leave-to .bg-white {
|
||||
transform: scale(0.95) translateY(-20px);
|
||||
}
|
||||
|
||||
.modal-enter-active .bg-white,
|
||||
.modal-leave-active .bg-white {
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
</style>
|
||||
@ -1,5 +1,12 @@
|
||||
<template>
|
||||
<mainLayout>
|
||||
<!-- Modal Buat Item - Sekarang menggunakan komponen terpisah -->
|
||||
<CreateItemModal
|
||||
:isOpen="openItemModal"
|
||||
:product="createdProduct"
|
||||
@close="closeItemModal"
|
||||
/>
|
||||
|
||||
<div class="p-6">
|
||||
<p class="font-serif italic text-[25px] text-D">Produk Baru</p>
|
||||
|
||||
@ -8,74 +15,37 @@
|
||||
<div class="flex-1">
|
||||
<div class="mb-3">
|
||||
<label class="block text-D mb-1">Nama Produk</label>
|
||||
<InputField
|
||||
v-model="form.nama"
|
||||
type="text"
|
||||
placeholder="Masukkan nama produk"
|
||||
/>
|
||||
<InputField v-model="form.nama" type="text" placeholder="Masukkan nama produk" />
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="block text-D mb-1">Kategori</label>
|
||||
<InputSelect
|
||||
v-model="form.kategori"
|
||||
:options="category"
|
||||
placeholder="Pilih kategori"
|
||||
/>
|
||||
<InputSelect v-model="form.kategori" :options="category" placeholder="Pilih kategori" />
|
||||
</div>
|
||||
|
||||
<div class="mb-3 flex flex-row w-full gap-3">
|
||||
<div class="flex-1">
|
||||
<label class="block text-D mb-1">Berat (g)</label>
|
||||
<InputField
|
||||
v-model="form.berat"
|
||||
type="number"
|
||||
step="0.01"
|
||||
placeholder="Masukkan berat"
|
||||
@input="calculateHargaJual"
|
||||
/>
|
||||
<InputField v-model="form.berat" type="number" step="0.01" placeholder="Masukkan berat"
|
||||
@input="calculateHargaJual" />
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<label class="block text-D mb-1">Kadar (K)</label>
|
||||
<InputField
|
||||
v-model="form.kadar"
|
||||
type="number"
|
||||
placeholder="Masukkan kadar"
|
||||
/>
|
||||
<InputField v-model="form.kadar" type="number" placeholder="Masukkan kadar" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-3 flex flex-row w-full gap-3">
|
||||
<div class="flex-1">
|
||||
<label class="block text-D mb-1">Harga per Gram</label>
|
||||
<InputField
|
||||
v-model="form.harga_per_gram"
|
||||
type="number"
|
||||
step="0.01"
|
||||
placeholder="Masukkan harga per gram"
|
||||
@input="calculateHargaJual"
|
||||
/>
|
||||
<InputField v-model="form.harga_per_gram" type="number" step="0.01" placeholder="Masukkan harga per gram"
|
||||
@input="calculateHargaJual" />
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<label class="block text-D mb-1">Harga Jual</label>
|
||||
<InputField
|
||||
v-model="form.harga_jual"
|
||||
type="number"
|
||||
step="0.01"
|
||||
placeholder="Masukkan harga jual"
|
||||
/>
|
||||
<InputField v-model="form.harga_jual" type="number" step="0.01" placeholder="Masukkan harga jual" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-6">
|
||||
<button
|
||||
@click="submitForm"
|
||||
:disabled="loading || !isFormValid"
|
||||
class="bg-blue-600 text-white px-6 py-2 rounded-md hover:bg-blue-700 disabled:bg-gray-400 disabled:cursor-not-allowed"
|
||||
>
|
||||
{{ loading ? 'Menyimpan...' : 'Simpan Produk' }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Image Upload Section -->
|
||||
@ -85,89 +55,83 @@
|
||||
<!-- Image Grid -->
|
||||
<div class="grid grid-cols-3 gap-3">
|
||||
<!-- Uploaded Images -->
|
||||
<div
|
||||
v-for="(image, index) in uploadedImages"
|
||||
:key="`img-${image.id}`"
|
||||
class="relative group aspect-square"
|
||||
>
|
||||
<div v-for="(image, index) in uploadedImages" :key="`img-${image.id}`" class="relative group aspect-square">
|
||||
<div class="w-full h-full bg-gray-100 rounded-lg border-2 border-gray-200 overflow-hidden">
|
||||
<img
|
||||
:src="image.url"
|
||||
:alt="`Foto ${index + 1}`"
|
||||
class="w-full h-full object-cover"
|
||||
/>
|
||||
<img :src="image.url" :alt="`Foto ${index + 1}`" class="w-full h-full object-cover" />
|
||||
<!-- Delete Button -->
|
||||
<button
|
||||
@click="removeImage(image.id)"
|
||||
:disabled="uploadLoading"
|
||||
class="absolute -top-2 -right-2 bg-red-500 text-white rounded-full w-6 h-6 flex items-center justify-center text-sm font-bold shadow-lg hover:bg-red-600 transition-colors disabled:bg-gray-400"
|
||||
>
|
||||
<button @click="removeImage(image.id)" :disabled="uploadLoading"
|
||||
class="absolute -top-2 -right-2 bg-red-500 text-white rounded-full w-6 h-6 flex items-center justify-center text-sm font-bold shadow-lg hover:bg-red-600 transition-colors disabled:bg-gray-400">
|
||||
×
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Upload Button -->
|
||||
<div
|
||||
v-if="uploadedImages.length < 6"
|
||||
@drop="handleDrop"
|
||||
@dragover.prevent
|
||||
@dragenter.prevent="isDragging = true"
|
||||
@dragleave.prevent="isDragging = false"
|
||||
@click="triggerFileInput"
|
||||
<div v-if="uploadedImages.length < 6" @drop="handleDrop" @dragover.prevent
|
||||
@dragenter.prevent="isDragging = true" @dragleave.prevent="isDragging = false" @click="triggerFileInput"
|
||||
class="aspect-square bg-gray-50 border-2 border-dashed border-gray-300 rounded-lg flex flex-col items-center justify-center cursor-pointer hover:border-blue-400 hover:bg-blue-50 transition-colors group"
|
||||
:class="{
|
||||
'border-blue-400 bg-blue-50': isDragging,
|
||||
'cursor-not-allowed opacity-50': uploadLoading
|
||||
}"
|
||||
>
|
||||
}">
|
||||
<div class="text-center">
|
||||
<!-- Upload Icon or Loading -->
|
||||
<div v-if="!uploadLoading" class="w-12 h-12 bg-blue-600 rounded-lg flex items-center justify-center mx-auto mb-2 group-hover:bg-blue-700 transition-colors">
|
||||
<div v-if="!uploadLoading"
|
||||
class="w-12 h-12 bg-blue-600 rounded-lg flex items-center justify-center mx-auto mb-2 group-hover:bg-blue-700 transition-colors">
|
||||
<svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<div v-else class="w-12 h-12 bg-blue-600 rounded-lg flex items-center justify-center mx-auto mb-2">
|
||||
<svg class="animate-spin w-6 h-6 text-white" fill="none" viewBox="0 0 24 24">
|
||||
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
|
||||
<path class="opacity-75" fill="currentColor" d="m4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
||||
<path class="opacity-75" fill="currentColor"
|
||||
d="m4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z">
|
||||
</path>
|
||||
</svg>
|
||||
</div>
|
||||
<p class="text-xs text-gray-600 font-medium" v-html="uploadLoading ? 'Uploading...' : 'Unggah<br/>Foto'"></p>
|
||||
<p class="text-xs text-gray-600 font-medium"
|
||||
v-html="uploadLoading ? 'Uploading...' : 'Unggah<br/>Foto'"></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Hidden File Input -->
|
||||
<input
|
||||
ref="fileInput"
|
||||
type="file"
|
||||
multiple
|
||||
accept="image/jpeg,image/jpg,image/png"
|
||||
@change="handleFileSelect"
|
||||
class="hidden"
|
||||
/>
|
||||
<input ref="fileInput" type="file" multiple accept="image/jpeg,image/jpg,image/png" @change="handleFileSelect"
|
||||
class="hidden" />
|
||||
|
||||
<!-- Upload Info -->
|
||||
<p class="text-xs text-gray-500 mt-2">Format: JPG, JPEG, PNG (Max: 2MB per file, Max: 6 foto)</p>
|
||||
|
||||
<!-- Error Message -->
|
||||
<div v-if="uploadError" class="mt-2 p-2 bg-red-50 border border-red-200 rounded text-sm text-red-600">
|
||||
{{ uploadError }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-6 flex justify-end flex-row gap-3">
|
||||
<button @click="back" class="px-6 py-2 rounded-md bg-gray-400 hover:bg-gray-500 text-white">Batal</button>
|
||||
<button @click="submitForm(true)" :disabled="loading || !isFormValid"
|
||||
class="bg-C text-D px-6 py-2 rounded-md hover:bg-B disabled:bg-B disabled:text-white disabled:cursor-not-allowed">
|
||||
{{ loading ? 'Menyimpan...' : 'Tambah Item' }}
|
||||
</button>
|
||||
<button @click="submitForm(false)" :disabled="loading || !isFormValid"
|
||||
class="bg-C text-D px-6 py-2 rounded-md hover:bg-B disabled:bg-B disabled:text-white disabled:cursor-not-allowed">
|
||||
{{ loading ? 'Menyimpan...' : 'Simpan' }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</mainLayout>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, onMounted, onUnmounted } from "vue";
|
||||
import { ref, computed, onMounted } from "vue";
|
||||
import { useRouter } from "vue-router";
|
||||
import axios from "axios";
|
||||
import mainLayout from "../layouts/mainLayout.vue";
|
||||
import InputField from "../components/InputField.vue";
|
||||
import InputSelect from "../components/InputSelect.vue";
|
||||
import CreateItemModal from "../components/CreateItemModal.vue";
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
const form = ref({
|
||||
nama: '',
|
||||
@ -191,7 +155,11 @@ const uploadedImages = ref([]);
|
||||
const isDragging = ref(false);
|
||||
const uploadError = ref('');
|
||||
const fileInput = ref(null);
|
||||
const userId = ref(1); // Sesuaikan dengan user yang login
|
||||
// TODO: Logika autentikasi user
|
||||
const userId = ref(1);
|
||||
|
||||
const openItemModal = ref(false);
|
||||
const createdProduct = ref(null);
|
||||
|
||||
const isFormValid = computed(() => {
|
||||
return form.value.nama &&
|
||||
@ -199,7 +167,8 @@ const isFormValid = computed(() => {
|
||||
form.value.berat > 0 &&
|
||||
form.value.kadar > 0 &&
|
||||
form.value.harga_per_gram > 0 &&
|
||||
form.value.harga_jual > 0;
|
||||
form.value.harga_jual > 0 &&
|
||||
uploadedImages.value.length > 0;
|
||||
});
|
||||
|
||||
const calculateHargaJual = () => {
|
||||
@ -220,10 +189,21 @@ const loadExistingPhotos = async () => {
|
||||
if (error.response?.status !== 404) {
|
||||
console.error('Error loading existing photos:', error);
|
||||
}
|
||||
// 404 is expected when no photos exist yet
|
||||
}
|
||||
};
|
||||
|
||||
const openCreateItemModal = (product) => {
|
||||
createdProduct.value = product;
|
||||
openItemModal.value = true;
|
||||
};
|
||||
|
||||
const closeItemModal = () => {
|
||||
openItemModal.value = false;
|
||||
createdProduct.value = null;
|
||||
resetForm();
|
||||
router.replace('/produk');
|
||||
};
|
||||
|
||||
const triggerFileInput = () => {
|
||||
if (!uploadLoading.value && uploadedImages.value.length < 6) {
|
||||
fileInput.value?.click();
|
||||
@ -248,16 +228,14 @@ const handleDrop = (event) => {
|
||||
const uploadFiles = async (files) => {
|
||||
uploadError.value = '';
|
||||
|
||||
// Validate file count
|
||||
if (uploadedImages.value.length + files.length > 6) {
|
||||
uploadError.value = 'Maksimal 6 foto yang dapat diupload';
|
||||
return;
|
||||
}
|
||||
|
||||
// Validate file types and sizes
|
||||
const validFiles = files.filter(file => {
|
||||
const isValidType = ['image/jpeg', 'image/jpg', 'image/png'].includes(file.type);
|
||||
const isValidSize = file.size <= 2 * 1024 * 1024; // 2MB
|
||||
const isValidSize = file.size <= 2 * 1024 * 1024;
|
||||
|
||||
if (!isValidType) {
|
||||
uploadError.value = 'Format file harus JPG, JPEG, atau PNG';
|
||||
@ -291,7 +269,6 @@ const uploadFiles = async (files) => {
|
||||
uploadedImages.value.push(response.data);
|
||||
}
|
||||
|
||||
// Clear file input
|
||||
if (fileInput.value) {
|
||||
fileInput.value.value = '';
|
||||
}
|
||||
@ -315,7 +292,7 @@ const removeImage = async (imageId) => {
|
||||
}
|
||||
};
|
||||
|
||||
const submitForm = async () => {
|
||||
const submitForm = async (addItem) => {
|
||||
if (!isFormValid.value) {
|
||||
alert('Mohon lengkapi semua field yang diperlukan');
|
||||
return;
|
||||
@ -329,6 +306,8 @@ const submitForm = async () => {
|
||||
id_user: userId.value
|
||||
});
|
||||
|
||||
const createdProductData = response.data.data;
|
||||
|
||||
// Reset form
|
||||
form.value = {
|
||||
nama: '',
|
||||
@ -346,8 +325,11 @@ const submitForm = async () => {
|
||||
fileInput.value.value = '';
|
||||
}
|
||||
|
||||
alert('Produk berhasil disimpan!');
|
||||
|
||||
if (addItem) {
|
||||
openCreateItemModal(createdProductData);
|
||||
} else {
|
||||
window.location.href = '/produk?message=Produk berhasil disimpan';
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Submit error:', error);
|
||||
|
||||
@ -362,23 +344,33 @@ const submitForm = async () => {
|
||||
}
|
||||
};
|
||||
|
||||
const resetPhotos = async () => {
|
||||
const resetForm = async () => {
|
||||
form.value = {
|
||||
nama: '',
|
||||
kategori: '',
|
||||
berat: 0,
|
||||
kadar: 0,
|
||||
harga_per_gram: 0,
|
||||
harga_jual: 0,
|
||||
};
|
||||
try {
|
||||
await axios.delete(`/api/foto/reset/${userId.value}`);
|
||||
uploadedImages.value = [];
|
||||
} catch (error) {
|
||||
console.error('Error resetting photos:', error);
|
||||
}
|
||||
uploadError.value = '';
|
||||
if (fileInput.value) {
|
||||
fileInput.value.value = '';
|
||||
}
|
||||
};
|
||||
|
||||
const back = () => {
|
||||
resetForm();
|
||||
window.history.back();
|
||||
};
|
||||
|
||||
// Load existing photos on component mount
|
||||
onMounted(() => {
|
||||
loadExistingPhotos();
|
||||
});
|
||||
|
||||
// Clean up photos if user leaves without saving
|
||||
onUnmounted(() => {
|
||||
// Optional: You might want to clean up temporary photos here
|
||||
// resetPhotos();
|
||||
});
|
||||
</script>
|
||||
|
||||
40
resources/js/pages/Kasir.vue
Normal file
40
resources/js/pages/Kasir.vue
Normal file
@ -0,0 +1,40 @@
|
||||
<template>
|
||||
<mainLayout>
|
||||
<div class="p-6 grid grid-cols-3 gap-6">
|
||||
<!-- Left Section -->
|
||||
<div class="col-span-2 bg-white p-4 rounded-lg shadow-md border border-gray-200 flex flex-col">
|
||||
<KasirForm />
|
||||
</div>
|
||||
|
||||
<!-- Right Section -->
|
||||
<div class="bg-white p-4 rounded-lg shadow-md border border-gray-200">
|
||||
<KasirTransaksiList :transaksi="transaksi" @detail="lihatDetail" />
|
||||
</div>
|
||||
</div>
|
||||
</mainLayout>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from "vue"
|
||||
import axios from "axios"
|
||||
|
||||
import mainLayout from '../layouts/mainLayout.vue'
|
||||
import KasirForm from '../components/KasirForm.vue'
|
||||
import KasirTransaksiList from '../components/KasirTransaksiList.vue'
|
||||
|
||||
const transaksi = ref([])
|
||||
|
||||
onMounted(async () => {
|
||||
try {
|
||||
const res = await axios.get("/api/transaksi") // GANTI URL SESUAI API
|
||||
|
||||
transaksi.value = res.data
|
||||
} catch (err) {
|
||||
console.error("Gagal fetch transaksi:", err)
|
||||
}
|
||||
})
|
||||
|
||||
const lihatDetail = (trx) => {
|
||||
alert(`Detail transaksi: ${trx.kode}`)
|
||||
}
|
||||
</script>
|
||||
@ -1,5 +1,12 @@
|
||||
<template>
|
||||
<mainLayout>
|
||||
<!-- Modal Buat Item - Sekarang menggunakan komponen terpisah -->
|
||||
<CreateItemModal
|
||||
:isOpen="creatingItem"
|
||||
:product="detail"
|
||||
@close="closeItemModal"
|
||||
/>
|
||||
|
||||
<div class="p-6">
|
||||
<!-- Judul -->
|
||||
<p class="font-serif italic text-[25px] text-D">PRODUK</p>
|
||||
@ -24,9 +31,9 @@
|
||||
|
||||
<!-- Tombol Tambah Produk -->
|
||||
<div class="mt-3 flex justify-end">
|
||||
<button class="bg-C text-[#0a1a3c] px-4 py-2 rounded-md shadow hover:bg-C transition">
|
||||
<router-link to="/produk/baru" class="bg-C text-[#0a1a3c] px-4 py-2 rounded-md shadow hover:bg-C transition">
|
||||
Tambah Produk
|
||||
</button>
|
||||
</router-link>
|
||||
</div>
|
||||
|
||||
<!-- Grid Produk -->
|
||||
@ -41,8 +48,6 @@
|
||||
</div>
|
||||
|
||||
<!-- Overlay Detail Produk -->
|
||||
<!-- Overlay Detail Produk -->
|
||||
<!-- Overlay Detail Produk -->
|
||||
<div
|
||||
v-if="showOverlay"
|
||||
class="fixed inset-0 bg-black/30 flex justify-center items-center z-50"
|
||||
@ -67,6 +72,13 @@
|
||||
{{ detail.items_count }} pcs
|
||||
</div>
|
||||
|
||||
<!-- Nama Produk di bawah -->
|
||||
<div
|
||||
class="absolute bottom-0 w-full bg-black/70 text-white text-center text-sm py-1"
|
||||
>
|
||||
{{ detail.nama }}
|
||||
</div>
|
||||
|
||||
<!-- Tombol Prev -->
|
||||
<button
|
||||
v-if="detail.foto && detail.foto.length > 1"
|
||||
@ -108,7 +120,8 @@
|
||||
<button class="flex-1 bg-yellow-400 text-black py-2 rounded font-bold">
|
||||
Ubah
|
||||
</button>
|
||||
<button class="flex-1 bg-green-400 text-black py-2 rounded font-bold">
|
||||
<button @click="openItemModal" class="bg-green-400 text-black px-4 py-2 rounded font-bold">
|
||||
|
||||
Tambah
|
||||
</button>
|
||||
<button class="flex-1 bg-red-500 text-white py-2 rounded font-bold">
|
||||
@ -128,10 +141,21 @@ import axios from "axios";
|
||||
import mainLayout from "../layouts/mainLayout.vue";
|
||||
import ProductCard from "../components/ProductCard.vue";
|
||||
import searchbar from "../components/searchbar.vue";
|
||||
import CreateItemModal from "../components/CreateItemModal.vue";
|
||||
|
||||
const products = ref([]);
|
||||
const searchQuery = ref("");
|
||||
const selectedCategory = ref("semua");
|
||||
const creatingItem = ref(false);
|
||||
|
||||
const openItemModal = () => {
|
||||
console.log("open item modal", detail.value);
|
||||
|
||||
creatingItem.value = true;
|
||||
};
|
||||
const closeItemModal = () => {
|
||||
creatingItem.value = false;
|
||||
};
|
||||
|
||||
// overlay state
|
||||
const showOverlay = ref(false);
|
||||
@ -182,7 +206,6 @@ function openOverlay(id) {
|
||||
// tutup overlay
|
||||
function closeOverlay() {
|
||||
showOverlay.value = false;
|
||||
detail.value = {};
|
||||
currentFotoIndex.value = 0;
|
||||
}
|
||||
|
||||
|
||||
@ -3,6 +3,7 @@ import Home from '../pages/Home.vue'
|
||||
import Produk from '../pages/Produk.vue'
|
||||
import Brankas from '../pages/Brankas.vue'
|
||||
import Tray from '../pages/Tray.vue'
|
||||
import Kasir from '../pages/Kasir.vue'
|
||||
import InputProduk from '../pages/InputProduk.vue'
|
||||
|
||||
|
||||
@ -32,6 +33,11 @@ const routes = [
|
||||
name: 'Nampan',
|
||||
component: Tray
|
||||
},
|
||||
{
|
||||
path: '/kasir',
|
||||
name: 'Kasir',
|
||||
component: Kasir
|
||||
},
|
||||
]
|
||||
|
||||
|
||||
|
||||
@ -30,4 +30,4 @@ Route::prefix('api')->group(function () {
|
||||
// Frontend SPA
|
||||
Route::get('/{any}', function () {
|
||||
return view('app');
|
||||
})->where('any', '.*');
|
||||
})->where('any', '^(?!storage|api).*$');
|
||||
Loading…
Reference in New Issue
Block a user