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

Compare commits

base: Magang-2025:3052aacb4510f3c020a27a782db39f71a80bb162
Branches Tags
Magang-2025:main
Magang-2025:jadi
Magang-2025:development
Magang-2025:production
..
compare: Magang-2025:f3f8b7fe04b34b8badbf7f31f473d8c5466b5b13
Branches Tags
Magang-2025:jadi
Magang-2025:development
Magang-2025:production
Magang-2025:main

2 Commits
3052aacb45 ... f3f8b7fe04

Author SHA1 Message Date
timotiabbauftech
f3f8b7fe04 Merge branch 'production' of https://git.abbauf.com/Magang-2025/Kasir into production 2025-10-01 10:48:04 +07:00
timotiabbauftech
e84a4bdadb [update] alert respon messae 2025-10-01 10:47:53 +07:00
6 changed files with 338 additions and 187 deletions
Show Stats Expand all files Collapse all files

33
resources/js/pages/Akun.vue
View File

@ -48,7 +48,26 @@
Tambah User
</button>
</div>
<!-- 🔹 Alert Message -->
<div class="px-6" v-if="alert">
<div
v-if="alert.error"
class="text-[#721c24] bg-[#f8d7da] border-l-4 border-[#dc3545] p-3 mb-5 rounded"
role="alert"
>
<strong class="font-bold">Error! </strong>
<span class="block sm:inline">{{ alert.error }}</span>
</div>
<div
v-if="alert.success"
class="text-[#155724] bg-[#d4edda] border-l-4 border-[#28a745] p-3 mb-5 rounded"
role="alert"
>
<strong class="font-bold">Success! </strong>
<span class="block sm:inline">{{ alert.success }}</span>
</div>
</div>
<!-- 🔹 End Alert -->
<!-- Table Section -->
<div
class="bg-white rounded-lg shadow-md overflow-hidden"
@ -146,7 +165,16 @@ const detail = ref(null);
const editingAkun = ref(false);
const confirmDeleteOpen = ref(false);
const akunToDelete = ref(null);
const alert = ref(null);
const timer = ref(null);
function showAlert(type, message) {
alert.value = { [type]: message };
clearTimeout(timer.value);
timer.value = setTimeout(() => {
alert.value = null;
}, 5000);
}
// Fetch data dari API
const fetchAkun = async () => {
loading.value = true;
@ -191,6 +219,7 @@ const confirmDelete = async () => {
});
fetchAkun();
confirmDeleteOpen.value = false;
showAlert("success", "User berhasil dihapus.");
} catch (error) {
console.error("Error deleting akun:", error);
}
@ -205,11 +234,13 @@ const closeDeleteModal = () => {
const closeAkun = () => {
creatingAkun.value = false;
fetchAkun();
showAlert("success", "User berhasil ditambahkan.");
};
const closeEditAkun = () => {
editingAkun.value = false;
fetchAkun();
showAlert("success", "User berhasil diubah.");
};
// Lifecycle

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

@ -415,7 +415,7 @@ const submitForm = async () => {
},
}
);
router.push("/produk");
router.push("/produk?message=Produk berhasil diperbarui");
} catch (err) {
errorMessages.value = err.response?.data?.message || "Gagal menyimpan produk";
console.error(err);

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

@ -174,7 +174,7 @@ import CreateItemModal from "../components/CreateItemModal.vue";
const router = useRouter();
const form = ref({
nama: '', id_kategori: null, berat: 0, kadar: 0, harga_per_gram: 0, harga_jual: 0,
nama: '', id_kategori: null, berat: null, kadar: null, harga_per_gram: null, harga_jual: null,
});
const category = ref([]);
const showUploadMenu = ref(false);

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

@ -16,7 +16,26 @@
Tambah Kategori
</button>
</div>
<!-- 🔹 Alert Message -->
<div class="px-6" v-if="alert">
<div
v-if="alert.error"
class="text-[#721c24] bg-[#f8d7da] border-l-4 border-[#dc3545] p-3 mb-5 rounded"
role="alert"
>
<strong class="font-bold">Error! </strong>
<span class="block sm:inline">{{ alert.error }}</span>
</div>
<div
v-if="alert.success"
class="text-[#155724] bg-[#d4edda] border-l-4 border-[#28a745] p-3 mb-5 rounded"
role="alert"
>
<strong class="font-bold">Success! </strong>
<span class="block sm:inline">{{ alert.success }}</span>
</div>
</div>
<!-- 🔹 End Alert -->
<!-- Table Section -->
<div class="bg-white rounded-lg shadow-md overflow-hidden">
<table class="w-full">
@ -96,9 +115,18 @@ const creatingKategori = ref(false);
const detail = ref(null);
const confirmDeleteOpen = ref(false);
const kategoriToDelete = ref(null);
const alert = ref(null);
const timer = ref(null);
const isAdmin = localStorage.getItem("role") === "owner";
function showAlert(type, message) {
alert.value = { [type]: message };
clearTimeout(timer.value);
timer.value = setTimeout(() => {
alert.value = null;
}, 5000);
}
// Fetch data kategori dari API
const fetchKategoris = async () => {
loading.value = true;
@ -109,7 +137,6 @@ const fetchKategoris = async () => {
},
});
kategori.value = response.data;
// console.log("Data kategori:", response.data);
} catch (error) {
console.error("Error fetching kategori:", error);
} finally {
@ -119,14 +146,19 @@ const fetchKategoris = async () => {
// Tambah kategori - open modal
const tambahKategori = () => {
detail.value = null; // Reset detail untuk mode create
detail.value = null;
creatingKategori.value = true;
};
// Close modal
const closeKategori = () => {
creatingKategori.value = false;
fetchKategoris(); // Refresh data setelah modal ditutup
fetchKategoris();
if (detail.value==null) {
showAlert("success", "Kategori berhasil ditambahkan");
} else
showAlert("success", "Kategori berhasil diubah");
};
// Ubah kategori
@ -139,6 +171,7 @@ const ubahKategori = (item) => {
const hapusKategori = (item) => {
kategoriToDelete.value = item;
confirmDeleteOpen.value = true;
showAlert("success", "Kategori berhasil dihapus");
};
// 🔵 Ditambahkan: aksi konfirmasi hapus

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

@ -51,6 +51,27 @@
</div>
</div>
<!-- 🔹 Alert Message -->
<div class="my-5" v-if="alert">
<div
v-if="alert.error"
class="text-[#721c24] bg-[#f8d7da] border-l-4 border-[#dc3545] p-3 mb-5 rounded"
role="alert"
>
<strong class="font-bold">Error! </strong>
<span class="block sm:inline">{{ alert.error }}</span>
</div>
<div
v-if="alert.success"
class="text-[#155724] bg-[#d4edda] border-l-4 border-[#28a745] p-3 mb-5 rounded"
role="alert"
>
<strong class="font-bold">Success! </strong>
<span class="block sm:inline">{{ alert.success }}</span>
</div>
</div>
<!-- 🔹 End Alert -->
<!-- 🔵 Loading State (sama persis dengan kategori) -->
<div v-if="loading" class="flex justify-center items-center h-screen">
<div class="animate-spin rounded-full h-8 w-8 border-b-2 border-C"></div>
@ -159,13 +180,21 @@ const searchQuery = ref("");
const selectedCategory = ref(0);
const creatingItem = ref(false);
const deleting = ref(false);
const alert = ref(null);
const timer = ref(null);
const detail = ref({});
const showOverlay = ref(false);
const currentFotoIndex = ref(0);
const kategori = ref([]);
const loading = ref(false); // 🔥 Loading persis kategori
const loading = ref(false);
function showAlert(type, message) {
alert.value = { [type]: message };
clearTimeout(timer.value);
timer.value = setTimeout(() => {
alert.value = null;
}, 5000);
}
// Load kategori
const loadKategori = async () => {
@ -221,6 +250,18 @@ const closeItemModal = () => {
onMounted(async () => {
await loadKategori();
await loadProduk();
// 🔹 Cek apakah ada ?message= di URL
const params = new URLSearchParams(window.location.search);
const message = params.get("message");
if (message) {
showAlert("success", message);
// 🔹 Hapus query param biar tidak muncul lagi pas refresh
const newUrl = window.location.pathname;
window.history.replaceState({}, document.title, newUrl);
}
});
// Filter produk

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

@ -6,68 +6,88 @@
<EditSales v-if="editingSales" :isOpen="editingSales" :sales="detail" @close="closeEditSales" />
<!-- Modal Delete -->
<ConfirmDeleteModal :isOpen="confirmDeleteOpen" title="Hapus Sales"
message="Apakah Anda yakin ingin menghapus sales ini?" @confirm="confirmDelete" @cancel="closeDeleteModal" />
<ConfirmDeleteModal
:isOpen="confirmDeleteOpen"
title="Hapus Sales"
message="Apakah Anda yakin ingin menghapus sales ini?"
@confirm="confirmDelete"
@cancel="closeDeleteModal"
/>
<div class="p-6 min-h-[75vh]">
<p class="font-serif italic text-[25px] text-D">SALES</p>
<div class="flex justify-end items-center mb-6">
<button @click="tambahSales"
<button
@click="tambahSales"
v-if="isAdmin"
class="px-4 py-2 bg-C text-D rounded-md hover:bg-C/80 transition duration-200 flex items-center gap-2">
class="px-4 py-2 bg-C text-D rounded-md hover:bg-C/80 transition duration-200 flex items-center gap-2"
>
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
</svg>
Tambah Sales
</button>
</div>
<!-- 🔹 Alert Message -->
<div class="px-6" v-if="alert">
<div
v-if="alert.error"
class="text-[#721c24] bg-[#f8d7da] border-l-4 border-[#dc3545] p-3 mb-5 rounded"
role="alert"
>
<strong class="font-bold">Error! </strong>
<span class="block sm:inline">{{ alert.error }}</span>
</div>
<div
v-if="alert.success"
class="text-[#155724] bg-[#d4edda] border-l-4 border-[#28a745] p-3 mb-5 rounded"
role="alert"
>
<strong class="font-bold">Success! </strong>
<span class="block sm:inline">{{ alert.success }}</span>
</div>
</div>
<!-- 🔹 End Alert -->
<!-- Table Section -->
<div class="bg-white rounded-lg shadow-md overflow-x-auto">
<table class="w-full">
<thead>
<tr class="bg-C text-white border-D border">
<th class="px-6 py-4 text-center border-r border-D text-D">
No
</th>
<th class="px-6 py-4 text-center border-r border-D text-D">
Nama Sales
</th>
<th class="px-6 py-4 text-center border-r border-D text-D">
No HP
</th>
<th class="px-6 py-4 text-center border-r border-D text-D">
Alamat
</th>
<th v-if="isAdmin" class="px-6 py-4 text-center text-D">
Aksi
</th>
<th class="px-6 py-4 text-center border-r border-D text-D">No</th>
<th class="px-6 py-4 text-center border-r border-D text-D">Nama Sales</th>
<th class="px-6 py-4 text-center border-r border-D text-D">No HP</th>
<th class="px-6 py-4 text-center border-r border-D text-D">Alamat</th>
<th v-if="isAdmin" class="px-6 py-4 text-center text-D">Aksi</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, index) in sales" :key="item.id"
<tr
v-for="(item, index) in sales"
:key="item.id"
class="border-b border-C border-t-0 border-x hover:bg-gray-50 transition duration-150"
:class="{ 'bg-gray-50': index % 2 === 1 }">
:class="{ 'bg-gray-50': index % 2 === 1 }"
>
<td 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-C text-D">
{{ item.nama }}
</td>
<td 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-C text-gray-800">
{{ item.alamat }}
</td>
<td class="px-6 py-4 border-r border-C text-D">{{ item.nama }}</td>
<td 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-C text-gray-800">{{ item.alamat }}</td>
<td class="px-6 py-4 text-center" v-if="isAdmin">
<div class="flex justify-center gap-2">
<button @click="ubahSales(item)"
class="px-3 py-1 bg-yellow-500 text-white text-sm rounded hover:bg-yellow-600 transition duration-200">
<button
@click="ubahSales(item)"
class="px-3 py-1 bg-yellow-500 text-white text-sm rounded hover:bg-yellow-600 transition duration-200"
>
Ubah
</button>
<button @click="hapusSales(item)"
class="px-3 py-1 bg-red-500 text-white text-sm rounded hover:bg-red-600 transition duration-200">
<button
@click="hapusSales(item)"
class="px-3 py-1 bg-red-500 text-white text-sm rounded hover:bg-red-600 transition duration-200"
>
Hapus
</button>
</div>
@ -78,9 +98,18 @@
<tr v-if="sales.length === 0 && !loading">
<td colspan="5" class="px-6 py-8 text-center text-gray-500">
<div class="flex flex-col items-center">
<svg class="w-12 h-12 text-gray-400 mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2 2v-5m16 0h-2M4 13h2" />
<svg
class="w-12 h-12 text-gray-400 mb-2"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2 2v-5m16 0h-2M4 13h2"
/>
</svg>
<p>Tidak ada data sales</p>
</div>
@ -118,6 +147,18 @@ const editingSales = ref(false);
const confirmDeleteOpen = ref(false);
const salesToDelete = ref(null);
// 🔹 Alert State
const alert = ref(null);
const timer = ref(null);
function showAlert(type, message) {
alert.value = { [type]: message };
clearTimeout(timer.value);
timer.value = setTimeout(() => {
alert.value = null;
}, 5000);
}
// Fetch data dari API
const fetchSales = async () => {
loading.value = true;
@ -130,6 +171,7 @@ const fetchSales = async () => {
sales.value = response.data;
} catch (error) {
console.error("Error fetching sales:", error);
showAlert("error", "Gagal memuat data sales.");
} finally {
loading.value = false;
}
@ -162,8 +204,10 @@ const confirmDelete = async () => {
});
fetchSales();
confirmDeleteOpen.value = false;
showAlert("success", "Sales berhasil dihapus.");
} catch (error) {
console.error("Error deleting sales:", error);
showAlert("error", "Gagal menghapus sales.");
}
};
@ -176,11 +220,13 @@ const closeDeleteModal = () => {
const closeSales = () => {
creatingSales.value = false;
fetchSales();
showAlert("success", "Sales berhasil ditambahkan.");
};
const closeEditSales = () => {
editingSales.value = false;
fetchSales();
showAlert("success", "Sales berhasil diperbarui.");
};
// Lifecycle