Merge branch 'production' of https://git.abbauf.com/Magang-2025/Kasir into production
This commit is contained in:
Timoti313
commit
1a25501579
65
.env.example
Normal file
65
.env.example
Normal file
@ -0,0 +1,65 @@
|
||||
APP_NAME=Laravel
|
||||
APP_ENV=local
|
||||
APP_KEY=
|
||||
APP_DEBUG=true
|
||||
APP_URL=http://localhost
|
||||
|
||||
APP_LOCALE=en
|
||||
APP_FALLBACK_LOCALE=en
|
||||
APP_FAKER_LOCALE=en_US
|
||||
|
||||
APP_MAINTENANCE_DRIVER=file
|
||||
# APP_MAINTENANCE_STORE=database
|
||||
|
||||
PHP_CLI_SERVER_WORKERS=4
|
||||
|
||||
BCRYPT_ROUNDS=12
|
||||
|
||||
LOG_CHANNEL=stack
|
||||
LOG_STACK=single
|
||||
LOG_DEPRECATIONS_CHANNEL=null
|
||||
LOG_LEVEL=debug
|
||||
|
||||
DB_CONNECTION=sqlite
|
||||
# DB_HOST=127.0.0.1
|
||||
# DB_PORT=3306
|
||||
# DB_DATABASE=laravel
|
||||
# DB_USERNAME=root
|
||||
# DB_PASSWORD=
|
||||
|
||||
SESSION_DRIVER=database
|
||||
SESSION_LIFETIME=120
|
||||
SESSION_ENCRYPT=false
|
||||
SESSION_PATH=/
|
||||
SESSION_DOMAIN=null
|
||||
|
||||
BROADCAST_CONNECTION=log
|
||||
FILESYSTEM_DISK=local
|
||||
QUEUE_CONNECTION=database
|
||||
|
||||
CACHE_STORE=database
|
||||
# CACHE_PREFIX=
|
||||
|
||||
MEMCACHED_HOST=127.0.0.1
|
||||
|
||||
REDIS_CLIENT=phpredis
|
||||
REDIS_HOST=127.0.0.1
|
||||
REDIS_PASSWORD=null
|
||||
REDIS_PORT=6379
|
||||
|
||||
MAIL_MAILER=log
|
||||
MAIL_SCHEME=null
|
||||
MAIL_HOST=127.0.0.1
|
||||
MAIL_PORT=2525
|
||||
MAIL_USERNAME=null
|
||||
MAIL_PASSWORD=null
|
||||
MAIL_FROM_ADDRESS="hello@example.com"
|
||||
MAIL_FROM_NAME="${APP_NAME}"
|
||||
|
||||
AWS_ACCESS_KEY_ID=
|
||||
AWS_SECRET_ACCESS_KEY=
|
||||
AWS_DEFAULT_REGION=us-east-1
|
||||
AWS_BUCKET=
|
||||
AWS_USE_PATH_STYLE_ENDPOINT=false
|
||||
|
||||
VITE_APP_NAME="${APP_NAME}"
|
||||
@ -1,48 +0,0 @@
|
||||
<template>
|
||||
<div class="relative inline-block text-left">
|
||||
<!-- Tombol Dropdown -->
|
||||
<button
|
||||
@click="isOpen = !isOpen"
|
||||
class="px-4 py-2 bg-white border rounded-md shadow-sm hover:bg-gray-100"
|
||||
>
|
||||
Manajemen Produk
|
||||
</button>
|
||||
|
||||
<!-- Isi Dropdown -->
|
||||
<div
|
||||
v-if="isOpen"
|
||||
class="absolute left-0 mt-2 w-48 bg-white border rounded-md shadow-lg z-50"
|
||||
>
|
||||
<ul>
|
||||
<li
|
||||
v-for="(item, index) in items"
|
||||
:key="index"
|
||||
@click="goTo(item.route)"
|
||||
class="px-4 py-2 hover:bg-[#DAC0A3] cursor-pointer"
|
||||
>
|
||||
{{ item.label }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
import { useRouter } from "vue-router";
|
||||
|
||||
const isOpen = ref(false);
|
||||
const router = useRouter();
|
||||
|
||||
const items = [
|
||||
{ label: "Brankas", route: "/brankas" },
|
||||
{ label: "Nampan", route: "/nampan" },
|
||||
{ label: "Produk", route: "/produk" },
|
||||
{ label: "Sales", route: "/sales" },
|
||||
];
|
||||
|
||||
const goTo = (route) => {
|
||||
isOpen.value = false;
|
||||
router.push(route);
|
||||
};
|
||||
</script>
|
||||
@ -45,7 +45,7 @@ const toggleDropdown = () => {
|
||||
<li
|
||||
v-for="(sub, index) in subItems"
|
||||
:key="index"
|
||||
class="px-4 py-2 hover:bg-[#DAC0A3] cursor-pointer"
|
||||
class="px-4 py-2 hover:bg-A cursor-pointer"
|
||||
>
|
||||
<router-link :to="sub.route" class="block w-full h-full">
|
||||
{{ sub.label }}
|
||||
|
||||
@ -8,74 +8,37 @@
|
||||
<div class="flex-1">
|
||||
<div class="mb-3">
|
||||
<label class="block text-D mb-1">Nama Produk</label>
|
||||
<InputField
|
||||
v-model="form.nama"
|
||||
type="text"
|
||||
placeholder="Masukkan nama produk"
|
||||
/>
|
||||
<InputField v-model="form.nama" type="text" placeholder="Masukkan nama produk" />
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="block text-D mb-1">Kategori</label>
|
||||
<InputSelect
|
||||
v-model="form.kategori"
|
||||
:options="category"
|
||||
placeholder="Pilih kategori"
|
||||
/>
|
||||
<InputSelect v-model="form.kategori" :options="category" placeholder="Pilih kategori" />
|
||||
</div>
|
||||
|
||||
<div class="mb-3 flex flex-row w-full gap-3">
|
||||
<div class="flex-1">
|
||||
<label class="block text-D mb-1">Berat (g)</label>
|
||||
<InputField
|
||||
v-model="form.berat"
|
||||
type="number"
|
||||
step="0.01"
|
||||
placeholder="Masukkan berat"
|
||||
@input="calculateHargaJual"
|
||||
/>
|
||||
<InputField v-model="form.berat" type="number" step="0.01" placeholder="Masukkan berat"
|
||||
@input="calculateHargaJual" />
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<label class="block text-D mb-1">Kadar (K)</label>
|
||||
<InputField
|
||||
v-model="form.kadar"
|
||||
type="number"
|
||||
placeholder="Masukkan kadar"
|
||||
/>
|
||||
<InputField v-model="form.kadar" type="number" placeholder="Masukkan kadar" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-3 flex flex-row w-full gap-3">
|
||||
<div class="flex-1">
|
||||
<label class="block text-D mb-1">Harga per Gram</label>
|
||||
<InputField
|
||||
v-model="form.harga_per_gram"
|
||||
type="number"
|
||||
step="0.01"
|
||||
placeholder="Masukkan harga per gram"
|
||||
@input="calculateHargaJual"
|
||||
/>
|
||||
<InputField v-model="form.harga_per_gram" type="number" step="0.01" placeholder="Masukkan harga per gram"
|
||||
@input="calculateHargaJual" />
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<label class="block text-D mb-1">Harga Jual</label>
|
||||
<InputField
|
||||
v-model="form.harga_jual"
|
||||
type="number"
|
||||
step="0.01"
|
||||
placeholder="Masukkan harga jual"
|
||||
/>
|
||||
<InputField v-model="form.harga_jual" type="number" step="0.01" placeholder="Masukkan harga jual" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-6">
|
||||
<button
|
||||
@click="submitForm"
|
||||
:disabled="loading || !isFormValid"
|
||||
class="bg-blue-600 text-white px-6 py-2 rounded-md hover:bg-blue-700 disabled:bg-gray-400 disabled:cursor-not-allowed"
|
||||
>
|
||||
{{ loading ? 'Menyimpan...' : 'Simpan Produk' }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Image Upload Section -->
|
||||
@ -85,79 +48,69 @@
|
||||
<!-- Image Grid -->
|
||||
<div class="grid grid-cols-3 gap-3">
|
||||
<!-- Uploaded Images -->
|
||||
<div
|
||||
v-for="(image, index) in uploadedImages"
|
||||
:key="`img-${image.id}`"
|
||||
class="relative group aspect-square"
|
||||
>
|
||||
<div v-for="(image, index) in uploadedImages" :key="`img-${image.id}`" class="relative group aspect-square">
|
||||
<div class="w-full h-full bg-gray-100 rounded-lg border-2 border-gray-200 overflow-hidden">
|
||||
<img
|
||||
:src="image.url"
|
||||
:alt="`Foto ${index + 1}`"
|
||||
class="w-full h-full object-cover"
|
||||
/>
|
||||
<img :src="image.url" :alt="`Foto ${index + 1}`" class="w-full h-full object-cover" />
|
||||
<!-- Delete Button -->
|
||||
<button
|
||||
@click="removeImage(image.id)"
|
||||
:disabled="uploadLoading"
|
||||
class="absolute -top-2 -right-2 bg-red-500 text-white rounded-full w-6 h-6 flex items-center justify-center text-sm font-bold shadow-lg hover:bg-red-600 transition-colors disabled:bg-gray-400"
|
||||
>
|
||||
<button @click="removeImage(image.id)" :disabled="uploadLoading"
|
||||
class="absolute -top-2 -right-2 bg-red-500 text-white rounded-full w-6 h-6 flex items-center justify-center text-sm font-bold shadow-lg hover:bg-red-600 transition-colors disabled:bg-gray-400">
|
||||
×
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Upload Button -->
|
||||
<div
|
||||
v-if="uploadedImages.length < 6"
|
||||
@drop="handleDrop"
|
||||
@dragover.prevent
|
||||
@dragenter.prevent="isDragging = true"
|
||||
@dragleave.prevent="isDragging = false"
|
||||
@click="triggerFileInput"
|
||||
<div v-if="uploadedImages.length < 6" @drop="handleDrop" @dragover.prevent
|
||||
@dragenter.prevent="isDragging = true" @dragleave.prevent="isDragging = false" @click="triggerFileInput"
|
||||
class="aspect-square bg-gray-50 border-2 border-dashed border-gray-300 rounded-lg flex flex-col items-center justify-center cursor-pointer hover:border-blue-400 hover:bg-blue-50 transition-colors group"
|
||||
:class="{
|
||||
'border-blue-400 bg-blue-50': isDragging,
|
||||
'cursor-not-allowed opacity-50': uploadLoading
|
||||
}"
|
||||
>
|
||||
}">
|
||||
<div class="text-center">
|
||||
<!-- Upload Icon or Loading -->
|
||||
<div v-if="!uploadLoading" class="w-12 h-12 bg-blue-600 rounded-lg flex items-center justify-center mx-auto mb-2 group-hover:bg-blue-700 transition-colors">
|
||||
<div v-if="!uploadLoading"
|
||||
class="w-12 h-12 bg-blue-600 rounded-lg flex items-center justify-center mx-auto mb-2 group-hover:bg-blue-700 transition-colors">
|
||||
<svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<div v-else class="w-12 h-12 bg-blue-600 rounded-lg flex items-center justify-center mx-auto mb-2">
|
||||
<svg class="animate-spin w-6 h-6 text-white" fill="none" viewBox="0 0 24 24">
|
||||
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
|
||||
<path class="opacity-75" fill="currentColor" d="m4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
||||
<path class="opacity-75" fill="currentColor"
|
||||
d="m4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z">
|
||||
</path>
|
||||
</svg>
|
||||
</div>
|
||||
<p class="text-xs text-gray-600 font-medium" v-html="uploadLoading ? 'Uploading...' : 'Unggah<br/>Foto'"></p>
|
||||
<p class="text-xs text-gray-600 font-medium"
|
||||
v-html="uploadLoading ? 'Uploading...' : 'Unggah<br/>Foto'"></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Hidden File Input -->
|
||||
<input
|
||||
ref="fileInput"
|
||||
type="file"
|
||||
multiple
|
||||
accept="image/jpeg,image/jpg,image/png"
|
||||
@change="handleFileSelect"
|
||||
class="hidden"
|
||||
/>
|
||||
<input ref="fileInput" type="file" multiple accept="image/jpeg,image/jpg,image/png" @change="handleFileSelect"
|
||||
class="hidden" />
|
||||
|
||||
<!-- Upload Info -->
|
||||
<p class="text-xs text-gray-500 mt-2">Format: JPG, JPEG, PNG (Max: 2MB per file, Max: 6 foto)</p>
|
||||
|
||||
<!-- Error Message -->
|
||||
<div v-if="uploadError" class="mt-2 p-2 bg-red-50 border border-red-200 rounded text-sm text-red-600">
|
||||
{{ uploadError }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-6 flex justify-end flex-row gap-3">
|
||||
<button @click="back" class="px-6 py-2 rounded-md bg-gray-400 hover:bg-gray-500 text-white">Batal</button>
|
||||
<button @click="submitForm(true)" :disabled="loading || !isFormValid"
|
||||
class="bg-C text-D px-6 py-2 rounded-md hover:bg-B disabled:bg-B disabled:text-white disabled:cursor-not-allowed">
|
||||
{{ loading ? 'Menyimpan...' : 'Tambah Item' }}
|
||||
</button>
|
||||
<button @click="submitForm(false)" :disabled="loading || !isFormValid"
|
||||
class="bg-C text-D px-6 py-2 rounded-md hover:bg-B disabled:bg-B disabled:text-white disabled:cursor-not-allowed">
|
||||
{{ loading ? 'Menyimpan...' : 'Simpan' }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</mainLayout>
|
||||
</template>
|
||||
@ -191,7 +144,8 @@ const uploadedImages = ref([]);
|
||||
const isDragging = ref(false);
|
||||
const uploadError = ref('');
|
||||
const fileInput = ref(null);
|
||||
const userId = ref(1); // Sesuaikan dengan user yang login
|
||||
// TODO: Logika autentikasi user
|
||||
const userId = ref(1);
|
||||
|
||||
const isFormValid = computed(() => {
|
||||
return form.value.nama &&
|
||||
@ -199,7 +153,8 @@ const isFormValid = computed(() => {
|
||||
form.value.berat > 0 &&
|
||||
form.value.kadar > 0 &&
|
||||
form.value.harga_per_gram > 0 &&
|
||||
form.value.harga_jual > 0;
|
||||
form.value.harga_jual > 0 &&
|
||||
uploadedImages.value.length > 0;
|
||||
});
|
||||
|
||||
const calculateHargaJual = () => {
|
||||
@ -220,7 +175,6 @@ const loadExistingPhotos = async () => {
|
||||
if (error.response?.status !== 404) {
|
||||
console.error('Error loading existing photos:', error);
|
||||
}
|
||||
// 404 is expected when no photos exist yet
|
||||
}
|
||||
};
|
||||
|
||||
@ -248,16 +202,14 @@ const handleDrop = (event) => {
|
||||
const uploadFiles = async (files) => {
|
||||
uploadError.value = '';
|
||||
|
||||
// Validate file count
|
||||
if (uploadedImages.value.length + files.length > 6) {
|
||||
uploadError.value = 'Maksimal 6 foto yang dapat diupload';
|
||||
return;
|
||||
}
|
||||
|
||||
// Validate file types and sizes
|
||||
const validFiles = files.filter(file => {
|
||||
const isValidType = ['image/jpeg', 'image/jpg', 'image/png'].includes(file.type);
|
||||
const isValidSize = file.size <= 2 * 1024 * 1024; // 2MB
|
||||
const isValidSize = file.size <= 2 * 1024 * 1024;
|
||||
|
||||
if (!isValidType) {
|
||||
uploadError.value = 'Format file harus JPG, JPEG, atau PNG';
|
||||
@ -291,7 +243,6 @@ const uploadFiles = async (files) => {
|
||||
uploadedImages.value.push(response.data);
|
||||
}
|
||||
|
||||
// Clear file input
|
||||
if (fileInput.value) {
|
||||
fileInput.value.value = '';
|
||||
}
|
||||
@ -315,7 +266,7 @@ const removeImage = async (imageId) => {
|
||||
}
|
||||
};
|
||||
|
||||
const submitForm = async () => {
|
||||
const submitForm = async (addItem) => {
|
||||
if (!isFormValid.value) {
|
||||
alert('Mohon lengkapi semua field yang diperlukan');
|
||||
return;
|
||||
@ -329,7 +280,6 @@ const submitForm = async () => {
|
||||
id_user: userId.value
|
||||
});
|
||||
|
||||
// Reset form
|
||||
form.value = {
|
||||
nama: '',
|
||||
kategori: '',
|
||||
@ -346,8 +296,11 @@ const submitForm = async () => {
|
||||
fileInput.value.value = '';
|
||||
}
|
||||
|
||||
alert('Produk berhasil disimpan!');
|
||||
|
||||
if (addItem) {
|
||||
alert('Produk berhasil ditambahkan. Silakan tambahkan produk lainnya.');
|
||||
} else {
|
||||
window.location.href = '/produk?message=Produk berhasil disimpan';
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Submit error:', error);
|
||||
|
||||
@ -371,14 +324,12 @@ const resetPhotos = async () => {
|
||||
}
|
||||
};
|
||||
|
||||
// Load existing photos on component mount
|
||||
const back = () => {
|
||||
resetPhotos();
|
||||
window.history.back();
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
loadExistingPhotos();
|
||||
});
|
||||
|
||||
// Clean up photos if user leaves without saving
|
||||
onUnmounted(() => {
|
||||
// Optional: You might want to clean up temporary photos here
|
||||
// resetPhotos();
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -24,9 +24,9 @@
|
||||
|
||||
<!-- Tombol Tambah Produk -->
|
||||
<div class="mt-3 flex justify-end">
|
||||
<button class="bg-C text-[#0a1a3c] px-4 py-2 rounded-md shadow hover:bg-C transition">
|
||||
<router-link to="/produk/baru" class="bg-C text-[#0a1a3c] px-4 py-2 rounded-md shadow hover:bg-C transition">
|
||||
Tambah Produk
|
||||
</button>
|
||||
</router-link>
|
||||
</div>
|
||||
|
||||
<!-- Grid Produk -->
|
||||
@ -141,7 +141,7 @@ const currentFotoIndex = ref(0);
|
||||
// Fetch data awal
|
||||
onMounted(async () => {
|
||||
try {
|
||||
const res = await axios.get("http://127.0.0.1:8000/api/produk");
|
||||
const res = await axios.get("/api/produk");
|
||||
products.value = res.data;
|
||||
} catch (error) {
|
||||
console.error("Gagal ambil data produk:", error);
|
||||
@ -172,7 +172,7 @@ const filteredProducts = computed(() => {
|
||||
// buka overlay
|
||||
async function openOverlay(id) {
|
||||
try {
|
||||
const res = await axios.get(`http://127.0.0.1:8000/api/produk/${id}`);
|
||||
const res = await axios.get(`/api/produk/${id}`);
|
||||
detail.value = res.data;
|
||||
currentFotoIndex.value = 0; // reset ke foto pertama
|
||||
showOverlay.value = true;
|
||||
|
||||
@ -30,4 +30,4 @@ Route::prefix('api')->group(function () {
|
||||
// Frontend SPA
|
||||
Route::get('/{any}', function () {
|
||||
return view('app');
|
||||
})->where('any', '.*');
|
||||
})->where('any', '^(?!storage|api).*$');
|
||||
Loading…
Reference in New Issue
Block a user