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: {
async createAkun() {
try {
await axios.post("api/user", this.form, {
headers: {
Authorization: `Bearer ${localStorage.getItem(
"token"
)}`,
},
});
await axios.post("api/user", this.form);
this.form = { nama: "", password: "", role: "" };
this.$emit("refresh");
this.$emit("close");

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

@ -113,11 +113,7 @@ const selectedNampanName = computed(() => {
// Methods
const loadNampanList = async () => {
try {
const response = await axios.get('/api/nampan', {
headers: {
Authorization: `Bearer ${localStorage.getItem("token")}`,
},
});;
const response = await axios.get('/api/nampan');
nampanList.value = response.data;
positionListOptions.value = [
{ value: '', label: 'Brankas', selected: !selectedNampan.value },
@ -146,11 +142,7 @@ const createItem = async () => {
payload.id_nampan = selectedNampan.value;
}
const response = await axios.post('/api/item', payload, {
headers: {
Authorization: `Bearer ${localStorage.getItem("token")}`,
},
});;
const response = await axios.post('/api/item', payload);
success.value = true;
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 () => {
try {
if (props.product) {
await axios.put(`/api/kategori/${props.product.id}`, form.value, {
headers: {
Authorization: `Bearer ${localStorage.getItem("token")}`,
},
});
await axios.put(`/api/kategori/${props.product.id}`, form.value)
} else {
await axios.post('/api/kategori', form.value, {
headers: {
Authorization: `Bearer ${localStorage.getItem("token")}`,
},
});
await axios.post('/api/kategori', form.value)
}
emit('close') // tutup modal
} catch (err) {

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

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

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

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

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

@ -65,11 +65,7 @@ import InputField from "./InputField.vue";
const handleSubmit = async () => {
try {
await axios.put(`/api/sales/${props.sales.id}`, form.value, {
headers: {
Authorization: `Bearer ${localStorage.getItem("token")}`,
},
});;
await axios.put(`/api/sales/${props.sales.id}`, form.value);
emit("close");
} catch (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
try {
const response = await axios.get(`/api/item/${kodeItem.value}`, {
headers: {
Authorization: `Bearer ${localStorage.getItem("token")}`,
},
});;
const response = await axios.get(`/api/item/${kodeItem.value}`);
item.value = response.data;
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;
pendapatanElements.value = [];
try {
const response = await axios.get(`/api/laporan?filter=${filterRingkasan.value}&page=${page}`, {
headers: {
Authorization: `Bearer ${localStorage.getItem("token")}`,
},
});;
const response = await axios.get(`/api/laporan?filter=${filterRingkasan.value}&page=${page}`);
ringkasanLaporan.value = response.data.data;
pagination.value = {
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;
pendapatanElements.value = [];
try {
const response = await axios.get(`/api/laporan?filter=${filterRingkasan.value}&page=${page}`, {
headers: {
Authorization: `Bearer ${localStorage.getItem("token")}`,
},
});;
const response = await axios.get(`/api/laporan?filter=${filterRingkasan.value}&page=${page}`);
ringkasanLaporan.value = response.data.data;
pagination.value = {
current_page: response.data.current_page,

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

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

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

@ -1,11 +1,7 @@
<template>
<mainLayout>
<!-- Modal Buat Item -->
<CreateItemModal
:isOpen="openItemModal"
:product="editedProduct"
@close="closeItemModal"
/>
<CreateItemModal :isOpen="openItemModal" :product="editedProduct" @close="closeItemModal" />
<div class="p-6">
<p class="font-serif italic text-[25px] text-D">Edit Produk</p>
@ -15,64 +11,35 @@
<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.id_kategori"
:options="category"
placeholder="Pilih kategori"
/>
<InputSelect v-model="form.id_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"
/>
<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" />
</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>
@ -83,133 +50,59 @@
<div class="grid grid-cols-3 gap-3">
<!-- Existing Images -->
<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"
/>
<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 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" />
<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-D hover:bg-blue-50 transition-colors group"
:class="{
'border-blue-400 bg-blue-50': isDragging,
'cursor-not-allowed opacity-50': uploadLoading,
}"
>
:class="{ 'border-blue-400 bg-blue-50': isDragging, 'cursor-not-allowed opacity-50': uploadLoading }">
<div class="text-center">
<div
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"
>
<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>
<div 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">
<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>
</svg>
</div>
<div
v-else
class="w-12 h-12 bg-D 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>
<div v-else class="w-12 h-12 bg-D 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>
</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>
<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" />
<p class="text-xs text-gray-500 mt-2">
Format: JPG, JPEG, PNG (Max: 2MB per file, Max: 6 foto)
</p>
<p class="text-xs text-gray-500 mt-2">Format: JPG, JPEG, PNG (Max: 2MB per file, Max: 6 foto)</p>
<div
v-if="uploadError"
class="mt-2 p-2 bg-red-50 border border-red-200 rounded text-sm text-red-600"
>
<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"
: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 @click="back" class="px-6 py-2 rounded-md bg-gray-400 hover:bg-gray-500 text-white">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>
</div>
</div>
@ -333,7 +226,7 @@ const uploadFiles = async (files) => {
const res = await axios.post("/api/foto/upload", formData, {
headers: {
Authorization: `Bearer ${localStorage.getItem("token")}`,
"Content-Type": "multipart/form-data",
"Content-Type": "multipart/form-data"
},
});
uploadedImages.value.push(res.data);
@ -359,18 +252,10 @@ const removeImage = async (id) => {
const submitForm = async () => {
loading.value = true;
try {
await axios.put(
`/api/produk/${productId}`,
{
await axios.put(`/api/produk/${productId}`, {
...form.value,
id_user: userId.value,
},
{
headers: {
Authorization: `Bearer ${localStorage.getItem("token")}`,
},
}
);
});
alert("Produk berhasil diupdate!");
router.push("/produk");
} catch (err) {

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

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

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

@ -101,11 +101,7 @@ const kategoriToDelete = ref(null);
const fetchKategoris = async () => {
loading.value = true;
try {
const response = await axios.get("/api/kategori", {
headers: {
Authorization: `Bearer ${localStorage.getItem("token")}`,
},
});
const response = await axios.get("/api/kategori");
kategori.value = response.data;
console.log("Data kategori:", response.data);
} catch (error) {
@ -142,11 +138,7 @@ const hapusKategori = (item) => {
// 🔵 Ditambahkan: aksi konfirmasi hapus
const confirmDelete = async () => {
try {
await axios.delete(`/api/kategori/${kategoriToDelete.value.id}`, {
headers: {
Authorization: `Bearer ${localStorage.getItem("token")}`,
},
});
await axios.delete(`/api/kategori/${kategoriToDelete.value.id}`);
console.log("Kategori berhasil dihapus");
fetchKategoris();
} 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>
<!-- Filter -->
<div
class="mt-3 flex flex-col md:flex-row md:items-center md:justify-between gap-3"
>
<div class="mt-3 flex flex-col md:flex-row md:items-center md:justify-between gap-3">
<!-- Dropdown Kategori -->
<InputSelect
v-model="selectedCategory"
:options="kategori"
class="w-full md:w-48"
/>
<InputSelect v-model="selectedCategory" :options="kategori" class="w-full md:w-48" />
<!-- Search -->
<searchbar v-model:search="searchQuery" class="flex-1" />
@ -46,9 +40,7 @@
</div>
<!-- Grid Produk -->
<div
class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4 mt-4"
>
<div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4 mt-4">
<ProductCard
v-for="item in filteredProducts"
:key="item.id"
@ -110,9 +102,7 @@
</p>
<!-- Detail Harga & Info -->
<div
class="grid grid-cols-2 gap-y-2 gap-x-4 text-sm w-full mb-6"
>
<div 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 text-right">
Rp. {{ formatNumber(detail.harga_jual) }}
@ -181,37 +171,29 @@ const kategori = ref([]);
const loadKategori = async () => {
try {
const response = await axios.get("/api/kategori", {
headers: {
Authorization: `Bearer ${localStorage.getItem("token")}`,
},
});
const response = await axios.get('/api/kategori');
if (response.data && Array.isArray(response.data)) {
kategori.value = [
{ value: 0, label: "Semua" },
...response.data.map((cat) => ({
...response.data.map(cat => ({
value: cat.id,
label: cat.nama,
})),
label: cat.nama
}))
];
}
} catch (error) {
console.error("Error loading categories:", error);
console.error('Error loading categories:', error);
}
};
const loadProduk = async () => {
try {
await axios.delete(`/api/produk/${detail.value.id}`, {
headers: {
Authorization: `Bearer ${localStorage.getItem("token")}`,
},
});
const response = await axios.get('/api/produk');
if (response.data && Array.isArray(response.data)) {
products.value = response.data;
}
} catch (error) {
console.error("Error loading products:", error);
console.error('Error loading products:', error);
}
};
@ -225,7 +207,7 @@ const closeItemModal = () => {
// Fetch data awal
onMounted(async () => {
loadKategori();
loadKategori()
loadProduk();
});
@ -234,7 +216,9 @@ const filteredProducts = computed(() => {
let hasil = products.value;
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) {

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

@ -51,7 +51,7 @@
<!-- Table Section -->
<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">
<thead class="">
@ -76,33 +76,35 @@
>
Alamat
</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>
</thead>
<tbody>
<tr
v-for="(item, index) in sales"
: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 }"
>
<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 }}
</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 }}
</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 }}
</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 }}
</td>
@ -184,11 +186,7 @@ const salesToDelete = ref(null);
const fetchSales = async () => {
loading.value = true;
try {
const response = await axios.get("/api/sales", {
headers: {
Authorization: `Bearer ${localStorage.getItem("token")}`,
},
});
const response = await axios.get("/api/sales");
sales.value = response.data;
} catch (error) {
console.error("Error fetching sales:", error);
@ -217,11 +215,7 @@ const hapusSales = (item) => {
const confirmDelete = async () => {
try {
await axios.delete(`/api/sales/${salesToDelete.value.id}`, {
headers: {
Authorization: `Bearer ${localStorage.getItem("token")}`,
},
});
await axios.delete(`/api/sales/${salesToDelete.value.id}`);
fetchSales();
confirmDeleteOpen.value = false;
} catch (error) {

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

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