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

Compare commits

base: Magang-2025:ae225ce5c72f6a4afa4bba56566bc2210f5e83b1
Branches Tags
Magang-2025:main
Magang-2025:production
..
compare: Magang-2025:20c844a98b62d4a4bde455765ba8b259919ace48
Branches Tags
Magang-2025:production
Magang-2025:main

No commits in common. "ae225ce5c72f6a4afa4bba56566bc2210f5e83b1" and "20c844a98b62d4a4bde455765ba8b259919ace48" have entirely different histories.
ae225ce5c7 ... 20c844a98b

17 changed files with 600 additions and 869 deletions
Show Stats Expand all files Collapse all files

8
resources/js/components/CreateAkun.vue
View File

@ -78,13 +78,7 @@ export default {
methods: { methods: {
async createAkun() { async createAkun() {
try { try {
await axios.post("api/user", this.form, { await axios.post("api/user", this.form);
headers: {
Authorization: `Bearer ${localStorage.getItem(
"token"
)}`,
},
});
this.form = { nama: "", password: "", role: "" }; this.form = { nama: "", password: "", role: "" };
this.$emit("refresh"); this.$emit("refresh");
this.$emit("close"); this.$emit("close");

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

@ -113,11 +113,7 @@ const selectedNampanName = computed(() => {
// Methods // Methods
const loadNampanList = async () => { const loadNampanList = async () => {
try { try {
const response = await axios.get('/api/nampan', { const response = await axios.get('/api/nampan');
headers: {
Authorization: `Bearer ${localStorage.getItem("token")}`,
},
});;
nampanList.value = response.data; nampanList.value = response.data;
positionListOptions.value = [ positionListOptions.value = [
{ value: '', label: 'Brankas', selected: !selectedNampan.value }, { value: '', label: 'Brankas', selected: !selectedNampan.value },
@ -146,11 +142,7 @@ const createItem = async () => {
payload.id_nampan = selectedNampan.value; payload.id_nampan = selectedNampan.value;
} }
const response = await axios.post('/api/item', payload, { const response = await axios.post('/api/item', payload);
headers: {
Authorization: `Bearer ${localStorage.getItem("token")}`,
},
});;
success.value = true; success.value = true;
createdItem.value = response.data.data createdItem.value = response.data.data

12
resources/js/components/CreateKategori.vue
View File

@ -61,17 +61,9 @@ import InputField from './InputField.vue'
const saveKategori = async () => { const saveKategori = async () => {
try { try {
if (props.product) { if (props.product) {
await axios.put(`/api/kategori/${props.product.id}`, form.value, { await axios.put(`/api/kategori/${props.product.id}`, form.value)
headers: {
Authorization: `Bearer ${localStorage.getItem("token")}`,
},
});
} else { } else {
await axios.post('/api/kategori', form.value, { await axios.post('/api/kategori', form.value)
headers: {
Authorization: `Bearer ${localStorage.getItem("token")}`,
},
});
} }
emit('close') // tutup modal emit('close') // tutup modal
} catch (err) { } catch (err) {

6
resources/js/components/CreateSales.vue
View File

@ -71,11 +71,7 @@
const handleSubmit = async () => { const handleSubmit = async () => {
try { try {
await axios.post("/api/sales", form.value, { await axios.post("/api/sales", form.value)
headers: {
Authorization: `Bearer ${localStorage.getItem("token")}`,
},
});
resetForm() resetForm()
emit("saved") emit("saved")
emit("close") emit("close")

6
resources/js/components/EditAkun.vue
View File

@ -101,11 +101,7 @@
const payload = { ...this.form }; const payload = { ...this.form };
if (!payload.password) delete payload.password; if (!payload.password) delete payload.password;
await axios.put(`/api/user/${this.akun.id}`, payload, { await axios.put(`/api/user/${this.akun.id}`, payload);
headers: {
Authorization: `Bearer ${localStorage.getItem("token")}`,
},
});;
this.$emit("refresh"); this.$emit("refresh");
this.$emit("close"); this.$emit("close");

6
resources/js/components/EditSales.vue
View File

@ -65,11 +65,7 @@ import InputField from "./InputField.vue";
const handleSubmit = async () => { const handleSubmit = async () => {
try { try {
await axios.put(`/api/sales/${props.sales.id}`, form.value, { await axios.put(`/api/sales/${props.sales.id}`, form.value);
headers: {
Authorization: `Bearer ${localStorage.getItem("token")}`,
},
});;
emit("close"); emit("close");
} catch (error) { } catch (error) {
console.error("Error updating sales:", error); console.error("Error updating sales:", error);

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

@ -97,11 +97,7 @@ const inputItem = async () => {
loadingItem.value = true loadingItem.value = true
try { try {
const response = await axios.get(`/api/item/${kodeItem.value}`, { const response = await axios.get(`/api/item/${kodeItem.value}`);
headers: {
Authorization: `Bearer ${localStorage.getItem("token")}`,
},
});;
item.value = response.data; item.value = response.data;
hargaJual.value = item.value.produk.harga_jual hargaJual.value = item.value.produk.harga_jual

6
resources/js/components/RingkasanLaporanA.vue
View File

@ -187,11 +187,7 @@ const fetchRingkasan = async (page = 1) => {
loading.value = true; loading.value = true;
pendapatanElements.value = []; pendapatanElements.value = [];
try { try {
const response = await axios.get(`/api/laporan?filter=${filterRingkasan.value}&page=${page}`, { const response = await axios.get(`/api/laporan?filter=${filterRingkasan.value}&page=${page}`);
headers: {
Authorization: `Bearer ${localStorage.getItem("token")}`,
},
});;
ringkasanLaporan.value = response.data.data; ringkasanLaporan.value = response.data.data;
pagination.value = { pagination.value = {
current_page: response.data.current_page, current_page: response.data.current_page,

6
resources/js/components/RingkasanLaporanB.vue
View File

@ -185,11 +185,7 @@ const fetchRingkasan = async (page = 1) => {
loading.value = true; loading.value = true;
pendapatanElements.value = []; pendapatanElements.value = [];
try { try {
const response = await axios.get(`/api/laporan?filter=${filterRingkasan.value}&page=${page}`, { const response = await axios.get(`/api/laporan?filter=${filterRingkasan.value}&page=${page}`);
headers: {
Authorization: `Bearer ${localStorage.getItem("token")}`,
},
});;
ringkasanLaporan.value = response.data.data; ringkasanLaporan.value = response.data.data;
pagination.value = { pagination.value = {
current_page: response.data.current_page, current_page: response.data.current_page,

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

@ -138,18 +138,16 @@ const closePopup = () => {
const saveMove = async () => { const saveMove = async () => {
if (!selectedTrayId.value || !selectedItem.value) return; if (!selectedTrayId.value || !selectedItem.value) return;
try { try {
await axios.put(`/api/item/${selectedItem.value.id}`, await axios.put(`/api/item/${selectedItem.value.id}`, {
{ header:{
id_nampan: selectedTrayId.value,
id_produk: selectedItem.value.id_produk,
},
{
headers: {
Authorization: `Bearer ${localStorage.getItem("token")}`, Authorization: `Bearer ${localStorage.getItem("token")}`,
}, },
} body:{
); id_nampan: selectedTrayId.value,
id_produk: selectedItem.value.id_produk,
},
});
await refreshData(); await refreshData();
closePopup(); closePopup();

199
resources/js/pages/EditProduk.vue
View File

@ -1,11 +1,7 @@
<template> <template>
<mainLayout> <mainLayout>
<!-- Modal Buat Item --> <!-- Modal Buat Item -->
<CreateItemModal <CreateItemModal :isOpen="openItemModal" :product="editedProduct" @close="closeItemModal" />
:isOpen="openItemModal"
:product="editedProduct"
@close="closeItemModal"
/>
<div class="p-6"> <div class="p-6">
<p class="font-serif italic text-[25px] text-D">Edit Produk</p> <p class="font-serif italic text-[25px] text-D">Edit Produk</p>
@ -15,64 +11,35 @@
<div class="flex-1"> <div class="flex-1">
<div class="mb-3"> <div class="mb-3">
<label class="block text-D mb-1">Nama Produk</label> <label class="block text-D mb-1">Nama Produk</label>
<InputField <InputField v-model="form.nama" type="text" placeholder="Masukkan nama produk" />
v-model="form.nama"
type="text"
placeholder="Masukkan nama produk"
/>
</div> </div>
<div class="mb-3"> <div class="mb-3">
<label class="block text-D mb-1">Kategori</label> <label class="block text-D mb-1">Kategori</label>
<InputSelect <InputSelect v-model="form.id_kategori" :options="category" placeholder="Pilih kategori" />
v-model="form.id_kategori"
:options="category"
placeholder="Pilih kategori"
/>
</div> </div>
<div class="mb-3 flex flex-row w-full gap-3"> <div class="mb-3 flex flex-row w-full gap-3">
<div class="flex-1"> <div class="flex-1">
<label class="block text-D mb-1">Berat (g)</label> <label class="block text-D mb-1">Berat (g)</label>
<InputField <InputField v-model="form.berat" type="number" step="0.01" placeholder="Masukkan berat"
v-model="form.berat" @input="calculateHargaJual" />
type="number"
step="0.01"
placeholder="Masukkan berat"
@input="calculateHargaJual"
/>
</div> </div>
<div class="flex-1"> <div class="flex-1">
<label class="block text-D mb-1">Kadar (K)</label> <label class="block text-D mb-1">Kadar (K)</label>
<InputField <InputField v-model="form.kadar" type="number" placeholder="Masukkan kadar" />
v-model="form.kadar"
type="number"
placeholder="Masukkan kadar"
/>
</div> </div>
</div> </div>
<div class="mb-3 flex flex-row w-full gap-3"> <div class="mb-3 flex flex-row w-full gap-3">
<div class="flex-1"> <div class="flex-1">
<label class="block text-D mb-1" <label class="block text-D mb-1">Harga per Gram</label>
>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>
<div class="flex-1"> <div class="flex-1">
<label class="block text-D mb-1">Harga Jual</label> <label class="block text-D mb-1">Harga Jual</label>
<InputField <InputField v-model="form.harga_jual" type="number" step="0.01" placeholder="Masukkan harga jual" />
v-model="form.harga_jual"
type="number"
step="0.01"
placeholder="Masukkan harga jual"
/>
</div> </div>
</div> </div>
</div> </div>
@ -83,133 +50,59 @@
<div class="grid grid-cols-3 gap-3"> <div class="grid grid-cols-3 gap-3">
<!-- Existing Images --> <!-- Existing Images -->
<div <div v-for="(image, index) in uploadedImages" :key="`img-${image.id}`" class="relative group aspect-square">
v-for="(image, index) in uploadedImages" <div class="w-full h-full bg-gray-100 rounded-lg border-2 border-gray-200 overflow-hidden">
:key="`img-${image.id}`" <img :src="image.url" :alt="`Foto ${index + 1}`" class="w-full h-full object-cover" />
class="relative group aspect-square" <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">
<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"
/>
<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> </button>
</div> </div>
</div> </div>
<!-- Upload Button --> <!-- Upload Button -->
<div <div v-if="uploadedImages.length < 6" @drop="handleDrop" @dragover.prevent
v-if="uploadedImages.length < 6" @dragenter.prevent="isDragging = true" @dragleave.prevent="isDragging = false" @click="triggerFileInput"
@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-D hover:bg-blue-50 transition-colors group" 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-D hover:bg-blue-50 transition-colors group"
:class="{ :class="{ 'border-blue-400 bg-blue-50': isDragging, 'cursor-not-allowed opacity-50': uploadLoading }">
'border-blue-400 bg-blue-50': isDragging,
'cursor-not-allowed opacity-50': uploadLoading,
}"
>
<div class="text-center"> <div class="text-center">
<div <div v-if="!uploadLoading"
v-if="!uploadLoading" class="w-12 h-12 bg-D rounded-lg flex items-center justify-center mx-auto mb-2 group-hover:bg-D transition-colors">
class="w-12 h-12 bg-D rounded-lg flex items-center justify-center mx-auto mb-2 group-hover:bg-D 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"
<svg d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
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>
</svg> </svg>
</div> </div>
<div <div v-else class="w-12 h-12 bg-D rounded-lg flex items-center justify-center mx-auto mb-2">
v-else <svg class="animate-spin w-6 h-6 text-white" fill="none" viewBox="0 0 24 24">
class="w-12 h-12 bg-D rounded-lg flex items-center justify-center mx-auto mb-2" <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
> <path class="opacity-75" fill="currentColor"
<svg 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">
class="animate-spin w-6 h-6 text-white" </path>
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> </svg>
</div> </div>
<p <p class="text-xs text-gray-600 font-medium"
class="text-xs text-gray-600 font-medium" v-html="uploadLoading ? 'Uploading...' : 'Unggah<br/>Foto'"></p>
v-html="
uploadLoading
? 'Uploading...'
: 'Unggah<br/>Foto'
"
></p>
</div> </div>
</div> </div>
</div> </div>
<input <input ref="fileInput" type="file" multiple accept="image/jpeg,image/jpg,image/png" @change="handleFileSelect"
ref="fileInput" class="hidden" />
type="file"
multiple
accept="image/jpeg,image/jpg,image/png"
@change="handleFileSelect"
class="hidden"
/>
<p class="text-xs text-gray-500 mt-2"> <p class="text-xs text-gray-500 mt-2">Format: JPG, JPEG, PNG (Max: 2MB per file, Max: 6 foto)</p>
Format: JPG, JPEG, PNG (Max: 2MB per file, Max: 6 foto)
</p>
<div <div v-if="uploadError" class="mt-2 p-2 bg-red-50 border border-red-200 rounded text-sm text-red-600">
v-if="uploadError"
class="mt-2 p-2 bg-red-50 border border-red-200 rounded text-sm text-red-600"
>
{{ uploadError }} {{ uploadError }}
</div> </div>
</div> </div>
</div> </div>
<div class="mt-6 flex justify-end flex-row gap-3"> <div class="mt-6 flex justify-end flex-row gap-3">
<button <button @click="back" class="px-6 py-2 rounded-md bg-gray-400 hover:bg-gray-500 text-white">Batal</button>
@click="back" <button @click="submitForm" :disabled="loading || !isFormValid"
class="px-6 py-2 rounded-md bg-gray-400 hover:bg-gray-500 text-white" 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 Perubahan' }}
Batal
</button>
<button
@click="submitForm"
: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 Perubahan" }}
</button> </button>
</div> </div>
</div> </div>
@ -333,7 +226,7 @@ const uploadFiles = async (files) => {
const res = await axios.post("/api/foto/upload", formData, { const res = await axios.post("/api/foto/upload", formData, {
headers: { headers: {
Authorization: `Bearer ${localStorage.getItem("token")}`, Authorization: `Bearer ${localStorage.getItem("token")}`,
"Content-Type": "multipart/form-data", "Content-Type": "multipart/form-data"
}, },
}); });
uploadedImages.value.push(res.data); uploadedImages.value.push(res.data);
@ -359,18 +252,10 @@ const removeImage = async (id) => {
const submitForm = async () => { const submitForm = async () => {
loading.value = true; loading.value = true;
try { try {
await axios.put( await axios.put(`/api/produk/${productId}`, {
`/api/produk/${productId}`,
{
...form.value, ...form.value,
id_user: userId.value, id_user: userId.value,
}, });
{
headers: {
Authorization: `Bearer ${localStorage.getItem("token")}`,
},
}
);
alert("Produk berhasil diupdate!"); alert("Produk berhasil diupdate!");
router.push("/produk"); router.push("/produk");
} catch (err) { } catch (err) {

32
resources/js/pages/InputProduk.vue
View File

@ -146,11 +146,7 @@ const category = ref([]);
const loadKategori = async () => { const loadKategori = async () => {
try { try {
const response = await axios.get('/api/kategori', { const response = await axios.get('/api/kategori');
headers: {
Authorization: `Bearer ${localStorage.getItem("token")}`,
},
});
if (response.data && Array.isArray(response.data)) { if (response.data && Array.isArray(response.data)) {
category.value = response.data.map(cat => ({ category.value = response.data.map(cat => ({
value: cat.id, value: cat.id,
@ -194,11 +190,7 @@ const calculateHargaJual = () => {
const loadExistingPhotos = async () => { const loadExistingPhotos = async () => {
try { try {
const response = await axios.get(`/api/foto/${userId.value}`, { const response = await axios.get(`/api/foto/${userId.value}`);
headers: {
Authorization: `Bearer ${localStorage.getItem("token")}`,
},
});
if (response.data && Array.isArray(response.data)) { if (response.data && Array.isArray(response.data)) {
uploadedImages.value = response.data; uploadedImages.value = response.data;
} }
@ -279,9 +271,7 @@ const uploadFiles = async (files) => {
const response = await axios.post('/api/foto/upload', formData, { const response = await axios.post('/api/foto/upload', formData, {
headers: { headers: {
Authorization: `Bearer ${localStorage.getItem("token")}`,
'Content-Type': 'multipart/form-data', 'Content-Type': 'multipart/form-data',
}, },
}); });
@ -302,12 +292,7 @@ const uploadFiles = async (files) => {
const removeImage = async (imageId) => { const removeImage = async (imageId) => {
try { try {
await axios.delete(`/api/foto/hapus/${imageId}`, { await axios.delete(`/api/foto/hapus/${imageId}`);
headers: {
Authorization: `Bearer ${localStorage.getItem("token")}`,
},
})
;
uploadedImages.value = uploadedImages.value.filter(img => img.id !== imageId); uploadedImages.value = uploadedImages.value.filter(img => img.id !== imageId);
uploadError.value = ''; uploadError.value = '';
} catch (error) { } catch (error) {
@ -327,10 +312,7 @@ const submitForm = async (addItem) => {
try { try {
const response = await axios.post('/api/produk', { const response = await axios.post('/api/produk', {
...form.value, ...form.value,
id_user: userId.value, id_user: userId.value
headers: {
Authorization: `Bearer ${localStorage.getItem("token")}`,
},
}); });
const createdProductData = response.data.data; const createdProductData = response.data.data;
@ -381,11 +363,7 @@ const resetForm = async () => {
harga_jual: 0, harga_jual: 0,
}; };
try { try {
await axios.delete(`/api/foto/reset/${userId.value}`, { await axios.delete(`/api/foto/reset/${userId.value}`);
headers: {
Authorization: `Bearer ${localStorage.getItem("token")}`,
},
});
uploadedImages.value = []; uploadedImages.value = [];
} catch (error) { } catch (error) {
console.error('Error resetting photos:', error); console.error('Error resetting photos:', error);

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

@ -59,11 +59,7 @@ 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: {
Authorization: `Bearer ${localStorage.getItem("token")}`,
},
})
transaksi.value = res.data transaksi.value = res.data
} catch (err) { } catch (err) {

12
resources/js/pages/Kategori.vue
View File

@ -101,11 +101,7 @@ const kategoriToDelete = ref(null);
const fetchKategoris = async () => { const fetchKategoris = async () => {
loading.value = true; loading.value = true;
try { try {
const response = await axios.get("/api/kategori", { const response = await axios.get("/api/kategori");
headers: {
Authorization: `Bearer ${localStorage.getItem("token")}`,
},
});
kategori.value = response.data; kategori.value = response.data;
console.log("Data kategori:", response.data); console.log("Data kategori:", response.data);
} catch (error) { } catch (error) {
@ -142,11 +138,7 @@ const hapusKategori = (item) => {
// 🔵 Ditambahkan: aksi konfirmasi hapus // 🔵 Ditambahkan: aksi konfirmasi hapus
const confirmDelete = async () => { const confirmDelete = async () => {
try { try {
await axios.delete(`/api/kategori/${kategoriToDelete.value.id}`, { await axios.delete(`/api/kategori/${kategoriToDelete.value.id}`);
headers: {
Authorization: `Bearer ${localStorage.getItem("token")}`,
},
});
console.log("Kategori berhasil dihapus"); console.log("Kategori berhasil dihapus");
fetchKategoris(); fetchKategoris();
} catch (error) { } catch (error) {

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

@ -21,15 +21,9 @@
<p class="font-serif italic text-[25px] text-D">PRODUK</p> <p class="font-serif italic text-[25px] text-D">PRODUK</p>
<!-- Filter --> <!-- Filter -->
<div <div class="mt-3 flex flex-col md:flex-row md:items-center md:justify-between gap-3">
class="mt-3 flex flex-col md:flex-row md:items-center md:justify-between gap-3"
>
<!-- Dropdown Kategori --> <!-- Dropdown Kategori -->
<InputSelect <InputSelect v-model="selectedCategory" :options="kategori" class="w-full md:w-48" />
v-model="selectedCategory"
:options="kategori"
class="w-full md:w-48"
/>
<!-- Search --> <!-- Search -->
<searchbar v-model:search="searchQuery" class="flex-1" /> <searchbar v-model:search="searchQuery" class="flex-1" />
@ -46,9 +40,7 @@
</div> </div>
<!-- Grid Produk --> <!-- Grid Produk -->
<div <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4 mt-4">
class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4 mt-4"
>
<ProductCard <ProductCard
v-for="item in filteredProducts" v-for="item in filteredProducts"
:key="item.id" :key="item.id"
@ -110,9 +102,7 @@
</p> </p>
<!-- Detail Harga & Info --> <!-- Detail Harga & Info -->
<div <div class="grid grid-cols-2 gap-y-2 gap-x-4 text-sm w-full mb-6">
class="grid grid-cols-2 gap-y-2 gap-x-4 text-sm w-full mb-6"
>
<p class="col-span-1">Harga Jual :</p> <p class="col-span-1">Harga Jual :</p>
<p class="col-span-1 text-right"> <p class="col-span-1 text-right">
Rp. {{ formatNumber(detail.harga_jual) }} Rp. {{ formatNumber(detail.harga_jual) }}
@ -181,37 +171,29 @@ const kategori = ref([]);
const loadKategori = async () => { const loadKategori = async () => {
try { try {
const response = await axios.get("/api/kategori", { const response = await axios.get('/api/kategori');
headers: {
Authorization: `Bearer ${localStorage.getItem("token")}`,
},
});
if (response.data && Array.isArray(response.data)) { if (response.data && Array.isArray(response.data)) {
kategori.value = [ kategori.value = [
{ value: 0, label: "Semua" }, { value: 0, label: "Semua" },
...response.data.map((cat) => ({ ...response.data.map(cat => ({
value: cat.id, value: cat.id,
label: cat.nama, label: cat.nama
})), }))
]; ];
} }
} catch (error) { } catch (error) {
console.error("Error loading categories:", error); console.error('Error loading categories:', error);
} }
}; };
const loadProduk = async () => { const loadProduk = async () => {
try { try {
await axios.delete(`/api/produk/${detail.value.id}`, { const response = await axios.get('/api/produk');
headers: {
Authorization: `Bearer ${localStorage.getItem("token")}`,
},
});
if (response.data && Array.isArray(response.data)) { if (response.data && Array.isArray(response.data)) {
products.value = response.data; products.value = response.data;
} }
} catch (error) { } catch (error) {
console.error("Error loading products:", error); console.error('Error loading products:', error);
} }
}; };
@ -225,7 +207,7 @@ const closeItemModal = () => {
// Fetch data awal // Fetch data awal
onMounted(async () => { onMounted(async () => {
loadKategori(); loadKategori()
loadProduk(); loadProduk();
}); });
@ -234,7 +216,9 @@ const filteredProducts = computed(() => {
let hasil = products.value; let hasil = products.value;
if (selectedCategory.value != 0) { if (selectedCategory.value != 0) {
hasil = hasil.filter((p) => p.id_kategori == selectedCategory.value); hasil = hasil.filter(
(p) => p.id_kategori == selectedCategory.value
);
} }
if (searchQuery.value) { if (searchQuery.value) {

28
resources/js/pages/Sales.vue
View File

@ -51,7 +51,7 @@
<!-- Table Section --> <!-- Table Section -->
<div <div
class="bg-white rounded-lg shadow-md border border-gray-200\ overflow-hidden" class="bg-white rounded-lg shadow-md border border-C overflow-hidden"
> >
<table class="w-full"> <table class="w-full">
<thead class=""> <thead class="">
@ -76,33 +76,35 @@
> >
Alamat Alamat
</th> </th>
<th class="px-6 py-4 text-center text-D">Aksi</th> <th class="px-6 py-4 text-center text-D">
Aksi
</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr <tr
v-for="(item, index) in sales" v-for="(item, index) in sales"
:key="item.id" :key="item.id"
class="border-b border-gray-200\ hover:bg-gray-50 transition duration-150" class="border-b border-C hover:bg-gray-50 transition duration-150"
:class="{ 'bg-gray-50': index % 2 === 1 }" :class="{ 'bg-gray-50': index % 2 === 1 }"
> >
<td <td
class="px-6 py-4 border-r border-gray-200\ text-center font-medium text-gray-900" class="px-6 py-4 border-r border-C text-center font-medium text-gray-900"
> >
{{ index + 1 }} {{ index + 1 }}
</td> </td>
<td <td
class="px-6 py-4 border-r border-gray-200\ text-D" class="px-6 py-4 border-r border-C text-D"
> >
{{ item.nama }} {{ item.nama }}
</td> </td>
<td <td
class="px-6 py-4 border-r border-gray-200\ text-gray-800" class="px-6 py-4 border-r border-C text-gray-800"
> >
{{ item.no_hp }} {{ item.no_hp }}
</td> </td>
<td <td
class="px-6 py-4 border-r border-gray-200\ text-gray-800" class="px-6 py-4 border-r border-C text-gray-800"
> >
{{ item.alamat }} {{ item.alamat }}
</td> </td>
@ -184,11 +186,7 @@ const salesToDelete = ref(null);
const fetchSales = async () => { const fetchSales = async () => {
loading.value = true; loading.value = true;
try { try {
const response = await axios.get("/api/sales", { const response = await axios.get("/api/sales");
headers: {
Authorization: `Bearer ${localStorage.getItem("token")}`,
},
});
sales.value = response.data; sales.value = response.data;
} catch (error) { } catch (error) {
console.error("Error fetching sales:", error); console.error("Error fetching sales:", error);
@ -217,11 +215,7 @@ const hapusSales = (item) => {
const confirmDelete = async () => { const confirmDelete = async () => {
try { try {
await axios.delete(`/api/sales/${salesToDelete.value.id}`, { await axios.delete(`/api/sales/${salesToDelete.value.id}`);
headers: {
Authorization: `Bearer ${localStorage.getItem("token")}`,
},
});
fetchSales(); fetchSales();
confirmDeleteOpen.value = false; confirmDeleteOpen.value = false;
} catch (error) { } catch (error) {

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

@ -1,15 +1,10 @@
<template> <template>
<mainLayout> <mainLayout>
<!-- Header --> <!-- Header -->
<div class="mb-4"> <div class="mb-4">
<!-- Judul --> <!-- Judul -->
<p <p style="font-family: 'IM FELL Great Primer', serif; font-style: italic; font-size: 25px;">
style="
font-family: 'IM FELL Great Primer', serif;
font-style: italic;
font-size: 25px;
"
>
NAMPAN NAMPAN
</p> </p>
@ -25,24 +20,24 @@
<!-- Tambah Nampan --> <!-- Tambah Nampan -->
<button <button
@click="openModal" @click="openModal"
class="px-4 py-2 hover:bg-B bg-C rounded-md shadow font-semibold" class="px-4 py-2 hover:bg-B bg-C rounded-md shadow font-semibold" >
>
Tambah Nampan Tambah Nampan
</button> </button>
<!-- Kosongkan --> <!-- Kosongkan -->
<button <button
@click="openConfirmModal" @click="openConfirmModal"
class="px-3 py-2 bg-red-500 hover:bg-red-600 text-white rounded-md" class="px-3 py-2 bg-red-500 hover:bg-red-600 text-white rounded-md">
>
Kosongkan Kosongkan
</button> </button>
</div> </div>
</div> </div>
<!-- Search + List --> <!-- Search + List -->
<TrayList :search="searchQuery" @edit="editTray" @delete="deleteTray" /> <TrayList :search="searchQuery" @edit="editTray" @delete="deleteTray"/>
<!-- Modal Tambah/Edit Nampan --> <!-- Modal Tambah/Edit Nampan -->
<div <div
@ -50,15 +45,9 @@
class="fixed inset-0 bg-black/75 flex justify-center items-center z-50" class="fixed inset-0 bg-black/75 flex justify-center items-center z-50"
> >
<div class="bg-white rounded-lg shadow-lg p-6 w-96"> <div class="bg-white rounded-lg shadow-lg p-6 w-96">
<h2 class="text-lg font-semibold mb-4" style="color: #102c57"> <h2 class="text-lg font-semibold mb-4" style="color: #102C57;">Tambah Nampan</h2>
Tambah Nampan
</h2>
<label <label class="block mb-2 text-sm font-medium" style="color: #102C57;">Nama Nampan</label>
class="block mb-2 text-sm font-medium"
style="color: #102c57"
>Nama Nampan</label
>
<input <input
v-model="trayName" v-model="trayName"
type="text" type="text"
@ -69,16 +58,14 @@
<div class="flex justify-end gap-2"> <div class="flex justify-end gap-2">
<button <button
@click="closeModal" @click="closeModal"
class="px-4 py-2 bg-gray-400 hover:bg-gray-500 text-white rounded-md" class="px-4 py-2 bg-gray-400 hover:bg-gray-500 text-white rounded-md">
>
Cancel Cancel
</button> </button>
<button <button
@click="saveTray" @click="saveTray"
class="px-4 py-2 bg-[#DAC0A3] hover:bg-[#C9A77E] rounded-md" class="px-4 py-2 bg-[#DAC0A3] hover:bg-[#C9A77E] rounded-md"
style="color: #102c57" style="color: #102C57;">
>
Save Save
</button> </button>
</div> </div>
@ -91,140 +78,103 @@
class="fixed inset-0 bg-black bg-opacity-40 flex justify-center items-center z-50" class="fixed inset-0 bg-black bg-opacity-40 flex justify-center items-center z-50"
> >
<div class="bg-white rounded-lg shadow-lg p-6 w-96 text-center"> <div class="bg-white rounded-lg shadow-lg p-6 w-96 text-center">
<h2 class="text-xl font-bold mb-3" style="color: #102c57"> <h2 class="text-xl font-bold mb-3" style="color: #102C57;">Kosongkan semua nampan?</h2>
Kosongkan semua nampan?
</h2>
<p class="text-gray-600 mb-6"> <p class="text-gray-600 mb-6">
Semua item akan dimasukkan ke brankas. <br /> Semua item akan dimasukkan ke brankas. <br/>
Masuk ke menu ‘Brankas’ untuk mengembalikan item ke nampan. Masuk ke menu ‘Brankas’ untuk mengembalikan item ke nampan.
</p> </p>
<div class="flex justify-center gap-4"> <div class="flex justify-center gap-4">
<button <button
@click="closeConfirmModal" @click="closeConfirmModal"
class="px-5 py-2 bg-gray-300 hover:bg-gray-400 rounded-md font-semibold" class="px-5 py-2 bg-gray-300 hover:bg-gray-400 rounded-md font-semibold">
>
Batal Batal
</button> </button>
<button <button
@click="confirmEmptyTray" @click="confirmEmptyTray"
class="px-5 py-2 bg-red-500 hover:bg-red-600 text-white rounded-md font-semibold" class="px-5 py-2 bg-red-500 hover:bg-red-600 text-white rounded-md font-semibold">
>
Ya Ya
</button> </button>
</div> </div>
</div> </div>
</div> </div>
</mainLayout> </mainLayout>
</template> </template>
<script setup> <script setup>
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'
const searchQuery = ref(""); const searchQuery = ref("")
const showModal = ref(false); const showModal = ref(false)
const showConfirmModal = ref(false); const showConfirmModal = ref(false)
const trayName = ref(""); const trayName = ref("")
const editingTrayId = ref(null); const editingTrayId = ref(null)
// buka modal tambah/edit // buka modal tambah/edit
const openModal = () => { const openModal = () => { showModal.value = true }
showModal.value = true;
};
const closeModal = () => { const closeModal = () => {
trayName.value = ""; trayName.value = ""
editingTrayId.value = null; editingTrayId.value = null
showModal.value = false; showModal.value = false
}; }
// simpan nampan // simpan nampan
const saveTray = async () => { const saveTray = async () => {
if (!trayName.value.trim()) { if (!trayName.value.trim()) {
alert("Nama Nampan tidak boleh kosong"); alert("Nama Nampan tidak boleh kosong")
return; return
} }
try { try {
if (editingTrayId.value) { if (editingTrayId.value) {
await axios.put( await axios.put(`/api/nampan/${editingTrayId.value}`, { nama: trayName.value })
`/api/nampan/${editingTrayId.value}`, alert("Nampan berhasil diupdate")
{ nama: trayName.value },
{
headers: {
Authorization: `Bearer ${localStorage.getItem(
"token"
)}`,
},
}
);
alert("Nampan berhasil diupdate");
} else { } else {
await axios.post( await axios.post("/api/nampan", { nama: trayName.value })
"/api/nampan", alert("Nampan berhasil ditambahkan")
{ nama: trayName.value },
{
headers: {
Authorization: `Bearer ${localStorage.getItem(
"token"
)}`,
},
} }
); closeModal()
alert("Nampan berhasil ditambahkan"); location.reload()
}
closeModal();
location.reload();
} catch (error) { } catch (error) {
console.error(error); console.error(error)
alert("Gagal menyimpan nampan"); alert("Gagal menyimpan nampan")
} }
}; }
// === Konfirmasi kosongkan nampan === // === Konfirmasi kosongkan nampan ===
const openConfirmModal = () => { const openConfirmModal = () => { showConfirmModal.value = true }
showConfirmModal.value = true; const closeConfirmModal = () => { showConfirmModal.value = false }
};
const closeConfirmModal = () => {
showConfirmModal.value = false;
};
const confirmEmptyTray = async () => { const confirmEmptyTray = async () => {
try { try {
await axios.delete("/api/kosongkan-nampan", { await axios.delete("/api/kosongkan-nampan",)
headers: { alert("Semua item berhasil dipindahkan ke Brankas")
Authorization: `Bearer ${localStorage.getItem("token")}`, closeConfirmModal()
}, location.reload()
});
alert("Semua item berhasil dipindahkan ke Brankas");
closeConfirmModal();
location.reload();
} catch (error) { } catch (error) {
console.error(error); console.error(error)
alert("Gagal mengosongkan nampan"); alert("Gagal mengosongkan nampan")
} }
}; }
const editTray = (tray) => { const editTray = (tray) => {
trayName.value = tray.nama; trayName.value = tray.nama
editingTrayId.value = tray.id; editingTrayId.value = tray.id
showModal.value = true; showModal.value = true
}; }
const deleteTray = async (id) => { const deleteTray = async (id) => {
if (!confirm("Yakin ingin menghapus nampan ini?")) return; if (!confirm("Yakin ingin menghapus nampan ini?")) return
try { try {
await axios.delete(`/api/nampan/${id}`, { await axios.delete(`/api/nampan/${id}`)
headers: { alert("Nampan berhasil dihapus")
Authorization: `Bearer ${localStorage.getItem("token")}`, location.reload()
},
});
alert("Nampan berhasil dihapus");
location.reload();
} catch (error) { } catch (error) {
console.error(error); console.error(error)
alert("Gagal menghapus nampan"); alert("Gagal menghapus nampan")
} }
}; }
</script> </script>