343 lines
20 KiB
PHP
343 lines
20 KiB
PHP
@extends('layout.app')
|
|
|
|
@section('content')
|
|
|
|
<div id="modal" class="modal hidden fixed inset-0 py-32 z-50 overflow-auto bg-gray-500 bg-opacity-50 flex justify-center items-center">
|
|
<div class="modal-content bg-white w-1/2 p-4 rounded-lg">
|
|
<div class="col-span-3 flex justify-between border-b-2 border-[#ee69b1] p-2 mb-2">
|
|
<h2 class="text-xl font-bold">Tambah {{$data['title'] }}</h2>
|
|
<button id="closeModalButton" class="text-red-500 hover:text-red-700">×</button>
|
|
</div>
|
|
<form id="formData" class="grid grid-cols-1 md:grid-cols-3 gap-4">
|
|
<div class="col-span-3 md:col-span-1">
|
|
@csrf
|
|
<div class="mb-6">
|
|
<label for="kode" class="block mb-2 text-sm font-medium text-gray-900">Kode Barang</label>
|
|
<input type="number" id="kode" name="kode" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" placeholder="Scan/Input Manual disini" required />
|
|
<input type="id" id="id" name="id" hidden>
|
|
</div>
|
|
<div class="mb-6">
|
|
<label for="nama" class="block mb-2 text-sm font-medium text-gray-900">Nama Barang</label>
|
|
<input type="text" id="nama" name="nama" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" placeholder="Masukan Nama Barang" required />
|
|
</div>
|
|
<div class="mb-6">
|
|
<label for="id_kategori" class="block mb-2 text-sm font-medium text-gray-900">Kategori</label>
|
|
<select id="id_kategori" name="id_kategori" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" required>
|
|
<option value="" disabled selected>Pilih Kategori Barang</option>
|
|
@foreach ($data['kategori'] as $dt )
|
|
<option value="{{ $dt->id }}">{{ $dt->nama }}</option>
|
|
@endforeach
|
|
</select>
|
|
</div>
|
|
<div class="mb-6">
|
|
<label for="ukuran" class="block mb-2 text-sm font-medium text-gray-900">Ukuran Barang</label>
|
|
<input type="text" id="ukuran" name="ukuran" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" placeholder="Masukan Ukuran Barang" required />
|
|
</div>
|
|
</div>
|
|
<div class="col-span-3 md:col-span-1">
|
|
<div class="mb-6">
|
|
<label for="harga_beli" class="block mb-2 text-sm font-medium text-gray-900">Harga Beli Barang</label>
|
|
<input type="number" id="harga_beli" name="harga_beli" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" placeholder="Masukan Harga Beli Barang" required />
|
|
</div>
|
|
<div class="mb-6">
|
|
<label for="harga_jual" class="block mb-2 text-sm font-medium text-gray-900">Harga Jual Barang</label>
|
|
<input type="number" id="harga_jual" name="harga_jual" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" placeholder="Masukan Harga Jual Barang" required />
|
|
</div>
|
|
<div class="mb-6">
|
|
<label for="demand" class="block mb-2 text-sm font-medium text-gray-900">Demand</label>
|
|
<input type="number" id="demand" name="demand" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" placeholder="Masukan Demand Barrang" required />
|
|
</div>
|
|
<div class="mb-6">
|
|
<label for="gambar" class="block mb-2 text-sm font-medium text-gray-900">Gambar</label>
|
|
<input type="file" id="gambar" name="gambar" accept="image/*" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full" placeholder="Masukan Gambar Barang" required />
|
|
</div>
|
|
</div>
|
|
<div class="col-span-3 md:col-span-1">
|
|
<div class="mb-6">
|
|
<label for="holding_cost" class="block mb-2 text-sm font-medium text-gray-900">Biaya Penyimpanan</label>
|
|
<input type="number" id="holding_cost" name="holding_cost" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" placeholder="Masukan Biaya Penyimpanan" required />
|
|
</div>
|
|
<div class="mb-6">
|
|
<label for="biaya_pemesanan" class="block mb-2 text-sm font-medium text-gray-900">Biaya Pemesanan</label>
|
|
<input type="number" id="biaya_pemesanan" name="biaya_pemesanan" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" placeholder="Masukan Biaya Penyimpanan" required />
|
|
</div>
|
|
<div class="mb-6">
|
|
<label for="lead_time" class="block mb-2 text-sm font-medium text-gray-900">Lead Time</label>
|
|
<input type="number" id="lead_time" name="lead_time" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" placeholder="Masukan Lead Time" required />
|
|
</div>
|
|
<div class="mb-6">
|
|
<label for="lead_time_variance" class="block mb-2 text-sm font-medium text-gray-900">Lead Time Variance</label>
|
|
<input type="number" id="lead_time_variance" name="lead_time_variance" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" placeholder="Masukan Lead Time Variance" required />
|
|
</div>
|
|
</div>
|
|
</form>
|
|
<div class="col-span-3 flex justify-center">
|
|
<button type="button" onclick="saveData()" class="text-white bg-yellow-500 hover:bg-yellow-400 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm w-full sm:w-auto px-5 py-2.5 text-center">Submit</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="w-full h-full bg-white rounded-lg shadow-lg p-5">
|
|
<div class="py-5">
|
|
<div class="pb-4 bg-white flex justify-between">
|
|
<div>
|
|
<button id="openModalButton" class="bg-yellow-500 hover:bg-yellow-400 text-white p-2 rounded-lg">
|
|
Tambah Data
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="overflow-x-auto">
|
|
<table id="datatable" class="w-full">
|
|
<thead class="bg-gray-200">
|
|
<tr class="text-left">
|
|
<th class="p-3">No</th>
|
|
<th class="p-3">Kode Barang</th>
|
|
<th class="p-3">Nama Barang</th>
|
|
<th class="p-3">Kategori</th>
|
|
<th class="p-3">Ukuran</th>
|
|
<th class="p-3">Harga Jual</th>
|
|
<th class="p-3">Stok</th>
|
|
<th class="p-3">Kalkulasi EOQ</th>
|
|
<th class="p-3"></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
|
|
@foreach($data['barang'] as $index => $item)
|
|
@php
|
|
$average = $item->demand / 365;
|
|
if($item->stok_terbaru > $item->rop){
|
|
$bg = 'bg-green-500';
|
|
}else{
|
|
$bg = 'bg-yellow-500';
|
|
}
|
|
if($item->stok_terbaru < $item->safety_stok){
|
|
$bg = 'bg-red-500';
|
|
}
|
|
@endphp
|
|
<tr class="text-left border-b border-gray-200">
|
|
<td class="p-3">{{ $index + 1 }}</td>
|
|
<td class="p-3">{{ $item->kode }}</td>
|
|
<td class="p-3">{{ $item->nama }}</td>
|
|
<td class="p-3">{{ $item->kategori->nama }}</td>
|
|
<td class="p-3">{{ $item->ukuran }}</td>
|
|
<td class="p-3">{{ 'IDR ' . number_format($item->harga_jual, 0, ',', '.') }}</td>
|
|
<td class="p-3">{{ $item->stok_terbaru }} Pcs</td>
|
|
<td class="p-3">
|
|
<button class="{{$bg}} text-white p-2 rounded-lg"
|
|
onclick="openModal('{{ $item->nama }}', '{{ $item->harga_beli }}', '{{ $item->stok_terbaru }}', '{{ $item->holding_cost }}', '{{ $item->biaya_pemesanan}}', '{{ $item->lead_time }}', '{{ $item->eoq_annual }}', '{{ $item->safety_stok}}', '{{ $item->rop }}', '{{ $item->demand }}', '{{ $item->lead_time_variance }}' , '{{ $item->pemesanan }}', '{{ $item->max_sales }}', '{{ $average }}' )">
|
|
EOQ, Safety Stock & ROP
|
|
</button>
|
|
</td>
|
|
<td class="p-3">
|
|
<button class="bg-blue-500 text-white p-2 rounded-lg mr-2" onclick="editData({{ $item->barang_id }})">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10" />
|
|
</svg>
|
|
</button>
|
|
<button class="bg-red-500 text-white p-2 rounded-lg mr-2" onclick="deleteData({{ $item->barang_id }})">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.320c-1.18 0-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0" />
|
|
</svg>
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
@endforeach
|
|
</tbody>
|
|
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Modal -->
|
|
<div id="myModal" class="modal hidden fixed inset-0 py-32 z-50 overflow-auto bg-gray-500 bg-opacity-50 flex justify-center items-center">
|
|
<div class="modal-content bg-white w-full mx-32 p-10 rounded-lg">
|
|
<div class="col-span-3 flex justify-between border-b-2 border-[#ee69b1] py-2 mb-2">
|
|
<h2 class="text-xl font-bold">Detail</h2>
|
|
<button id="closeModalButton" class="close text-red-500 hover:text-red-700">×</button>
|
|
</div>
|
|
<div id="modal-content" class="text-lg font-semibold"></div>
|
|
</div>
|
|
</div>
|
|
|
|
@endsection
|
|
|
|
@section('script')
|
|
<script>
|
|
$(document).ready(function() {
|
|
$('#datatable').DataTable();
|
|
});
|
|
|
|
window.addEventListener('DOMContentLoaded', function() {
|
|
fetchData();
|
|
});
|
|
|
|
function formatToIDR(amount) {
|
|
return 'IDR ' + new Intl.NumberFormat('id-ID').format(amount);
|
|
}
|
|
|
|
function openModal(Nama, Harga, Stok, BiayaSimpan, BiayaPesan, LeadTime, EOQAnnual, safetyStock, ROP, Demand, LongLeadTime, Pemesanan,MAX, average) {
|
|
|
|
let html = `
|
|
<div class="grid grid-cols-2 gap-10">
|
|
<div>
|
|
<div class="flex justify-between items-center mb-5">
|
|
<p class="text-lg font-semibold">Nama Barang </p>
|
|
<span class="font-extralight">${Nama}</span>
|
|
</div>
|
|
<div class="flex justify-between items-center mb-5">
|
|
<p class="text-lg font-semibold">Harga Beli</p>
|
|
<span class="font-extralight">${formatToIDR(Math.round(parseFloat(Harga)))} /Unit</span>
|
|
</div>
|
|
<div class="flex justify-between items-center mb-5">
|
|
<p class="text-lg font-semibold">Stok saat ini </p>
|
|
<span class="font-extralight">${Math.round(parseFloat(Stok))} Unit</span>
|
|
</div>
|
|
<div class="flex justify-between items-center mb-5">
|
|
<p class="text-lg font-semibold">Biaya simpan</p>
|
|
<span class="font-extralight">${formatToIDR(Math.round(parseFloat(BiayaSimpan)))}</span>
|
|
</div>
|
|
<div class="flex justify-between items-center mb-5">
|
|
<p class="text-lg font-semibold">Biaya pesan </p>
|
|
<span class="font-extralight">${formatToIDR(Math.round(parseFloat(BiayaPesan)))}</span>
|
|
</div>
|
|
<div class="flex justify-between items-center mb-5">
|
|
<p class="text-lg font-semibold">Lead Time </p>
|
|
<span class="font-extralight">${Math.round(parseFloat(LeadTime))} Hari</span>
|
|
</div>
|
|
<div class="flex justify-between items-center mb-5">
|
|
<p class="text-lg font-semibold">Long Lead Time </p>
|
|
<span class="font-extralight">${Math.round(parseFloat(LongLeadTime))} Hari</span>
|
|
</div>
|
|
</div>
|
|
<div class="border-l-2 border-gray-300 pl-10">
|
|
<div class="flex justify-between items-center mb-5">
|
|
<p class="text-lg font-semibold">Demand </p>
|
|
<span class="font-extralight">${Math.round(parseFloat(Demand))} Psc</span>
|
|
</div>
|
|
<div class="flex justify-between items-center mb-5">
|
|
<p class="text-lg font-semibold">Safety Stock</p>
|
|
<span class="font-extralight">${Math.round(parseFloat(safetyStock))} Pcs</span>
|
|
</div>
|
|
<div class="flex justify-between items-center mb-5">
|
|
<p class="text-lg font-semibold">EOQ </p>
|
|
<span class="font-extralight">${Math.round(parseFloat(EOQAnnual))} Pcs</span>
|
|
</div>
|
|
<div class="flex justify-between items-center mb-5">
|
|
<p class="text-lg font-semibold">Pemesanan </p>
|
|
<span class="font-extralight">${Math.round(parseFloat(Pemesanan))} Kali</span>
|
|
</div>
|
|
<div class="flex justify-between items-center mb-5">
|
|
<p class="text-lg font-semibold">Reorder Point</p>
|
|
<span class="font-extralight">${Math.round(parseFloat(ROP))} Pcs</span>
|
|
</div>
|
|
<div class="flex justify-between items-center mb-5">
|
|
<p class="text-lg font-semibold">Penjualan Tertinggi</p>
|
|
<span class="font-extralight">${Math.round(parseFloat(MAX))} Pcs</span>
|
|
</div>
|
|
<div class="flex justify-between items-center mb-5">
|
|
<p class="text-lg font-semibold">Rata - Rata</p>
|
|
<span class="font-extralight">${Math.round(parseFloat(average))}/Tahun</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
$("#modal-content").html(html);
|
|
const modal = document.getElementById("myModal");
|
|
const modalContent = document.getElementById("modal-content");
|
|
|
|
modal.classList.remove("hidden");
|
|
}
|
|
|
|
document.querySelector('.close').addEventListener('click', function() {
|
|
const modal = document.getElementById("myModal");
|
|
modal.classList.add("hidden");
|
|
// modal.style.display = "none";
|
|
// location.reload();
|
|
});
|
|
|
|
// window.addEventListener('click', function(event) {
|
|
// const modal = document.getElementById("myModal");
|
|
// if (event.target == modal) {
|
|
// modal.style.display = "none";
|
|
// // location.reload();
|
|
// }
|
|
// });
|
|
|
|
function editData(id) {
|
|
const baseUrl = "{{ route('barang.update', ['id' => '__ID__']) }}";
|
|
$.ajax({
|
|
url: baseUrl.replace('__ID__', id),
|
|
type: 'GET',
|
|
success: function(response) {
|
|
$('#id').val(response.message.id);
|
|
$('#kode').val(response.message.kode);
|
|
$('#nama').val(response.message.nama);
|
|
$('#ukuran').val(response.message.ukuran);
|
|
$('#harga_beli').val(response.message.harga_beli);
|
|
$('#harga_jual').val(response.message.harga_jual);
|
|
$('#stok').val(response.message.stok);
|
|
$('#kadaluarsa').val(response.message.kadaluarsa);
|
|
$('#demand').val(response.message.demand);
|
|
$('#holding_cost').val(response.message.holding_cost);
|
|
$('#biaya_pemesanan').val(response.message.biaya_pemesanan);
|
|
$('#lead_time').val(response.message.lead_time);
|
|
$('#lead_time_variance').val(response.message.lead_time_variance);
|
|
$('#id_kategori').val(response.message.id_kategori);
|
|
toggleModal();
|
|
},
|
|
error: function(error) {
|
|
console.error('Error getting data:', error.responseText);
|
|
}
|
|
});
|
|
}
|
|
|
|
function deleteData(id) {
|
|
const baseUrl = "{{ route('barang.delete', ['id' => '__ID__']) }}";
|
|
if (confirm('Apakah anda yakin ingin menghapus data ini?')) {
|
|
$.ajax({
|
|
url: baseUrl.replace('__ID__', id),
|
|
type: 'GET',
|
|
success: function(response) {
|
|
alert(response.message);
|
|
location.reload();
|
|
},
|
|
error: function(error) {
|
|
console.error('Error getting data:', error.responseText);
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
function saveData() {
|
|
const formData = new FormData(document.getElementById("formData"));
|
|
const baseUrl = "{{ route('barang.update', ['id' => '__ID__']) }}";
|
|
const id = $('#id').val();
|
|
const url = id ? baseUrl.replace('__ID__', id) : '{{ route('barang') }}';
|
|
|
|
const csrfToken = $('meta[name="csrf-token"]').attr('content');
|
|
|
|
const ajaxSettings = {
|
|
url: url,
|
|
type: 'POST',
|
|
data: formData,
|
|
processData: false,
|
|
contentType: false,
|
|
headers: {
|
|
'X-CSRF-TOKEN': csrfToken
|
|
},
|
|
success: function(response) {
|
|
alert(response.message);
|
|
location.reload();
|
|
},
|
|
error: function(error) {
|
|
console.error('Error saving data:', error.responseText);
|
|
}
|
|
};
|
|
|
|
$.ajax(ajaxSettings);
|
|
}
|
|
</script>
|
|
@endsection
|