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

Merge branch 'production' of https://git.abbauf.com/Magang-2025/Kasir into production

Browse Source
This commit is contained in:
Baghaztra 2025-10-01 13:42:05 +07:00
commit fdb3ac15c6
6 changed files with 338 additions and 187 deletions
Show Stats Download Patch File Download Diff File 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

206
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 ">
<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>
@ -97,29 +126,41 @@
</div>
</div>
</mainLayout>
</template>
</template>
<script setup>
import { ref, onMounted } from "vue";
import axios from "axios";
import mainLayout from "../layouts/mainLayout.vue";
import CreateSales from "../components/CreateSales.vue";
import ConfirmDeleteModal from "../components/ConfirmDeleteModal.vue";
import EditSales from "../components/EditSales.vue";
<script setup>
import { ref, onMounted } from "vue";
import axios from "axios";
import mainLayout from "../layouts/mainLayout.vue";
import CreateSales from "../components/CreateSales.vue";
import ConfirmDeleteModal from "../components/ConfirmDeleteModal.vue";
import EditSales from "../components/EditSales.vue";
const isAdmin = localStorage.getItem("role") === "owner";
const isAdmin = localStorage.getItem("role") === "owner";
// State
const sales = ref([]);
const loading = ref(false);
const creatingSales = ref(false);
const detail = ref(null);
const editingSales = ref(false);
const confirmDeleteOpen = ref(false);
const salesToDelete = ref(null);
// State
const sales = ref([]);
const loading = ref(false);
const creatingSales = ref(false);
const detail = ref(null);
const editingSales = ref(false);
const confirmDeleteOpen = ref(false);
const salesToDelete = ref(null);
// Fetch data dari API
const fetchSales = async () => {
// 🔹 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;
try {
const response = await axios.get("/api/sales", {
@ -130,30 +171,31 @@ 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;
}
};
};
// Tambah
const tambahSales = () => {
// Tambah
const tambahSales = () => {
detail.value = null;
creatingSales.value = true;
};
};
// Ubah
const ubahSales = (item) => {
// Ubah
const ubahSales = (item) => {
detail.value = item;
editingSales.value = true;
};
};
// Hapus
const hapusSales = (item) => {
// Hapus
const hapusSales = (item) => {
salesToDelete.value = item;
confirmDeleteOpen.value = true;
};
};
const confirmDelete = async () => {
const confirmDelete = async () => {
try {
await axios.delete(`/api/sales/${salesToDelete.value.id}`, {
headers: {
@ -162,29 +204,33 @@ 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.");
}
};
};
const closeDeleteModal = () => {
const closeDeleteModal = () => {
confirmDeleteOpen.value = false;
salesToDelete.value = null;
};
};
// Tutup modal Create/Edit
const closeSales = () => {
// Tutup modal Create/Edit
const closeSales = () => {
creatingSales.value = false;
fetchSales();
};
showAlert("success", "Sales berhasil ditambahkan.");
};
const closeEditSales = () => {
const closeEditSales = () => {
editingSales.value = false;
fetchSales();
};
showAlert("success", "Sales berhasil diperbarui.");
};
// Lifecycle
onMounted(() => {
// Lifecycle
onMounted(() => {
fetchSales();
});
</script>
});
</script>