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

[Update Templete]

Browse Source
This commit is contained in:
Arief Dwi Wicaksono 2025-09-17 13:03:43 +07:00
parent ea5ad05de9
commit 8018f4da58
2 changed files with 198 additions and 122 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
backend/app/Http/Controllers/TemplateController.php
View File

@ -56,6 +56,7 @@ public function store(Request $request)
return redirect()->route('templates.index')->with('success', 'Template berhasil ditambahkan!'); return redirect()->route('templates.index')->with('success', 'Template berhasil ditambahkan!');
} }
public function update(Request $request, Template $template) public function update(Request $request, Template $template)
{ {
$data = $request->validate([ $data = $request->validate([

319
backend/resources/views/admin/dashboard.blade.php
View File

@ -1,157 +1,232 @@
@extends('layouts.app') @extends('layouts.app')
@section('title', 'Manajemen Template') @section('title', 'Halaman Dasbor')
@section('content') @section('content')
<div class="container py-4"> <div class="container mx-auto py-4">
<div class="d-flex justify-content-between align-items-center mb-4"> <!-- Header -->
<h3 class="fw-bold">Manajemen Template</h3> <div class="flex justify-between items-center mb-4">
<button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modalTambah"> <h3 class="text-xl font-bold">Halaman Dasbor</h3>
<i class="bi bi-plus-lg"></i> Tambah Template <div class="flex items-center gap-3">
</button> <div class="bg-blue-100 text-blue-600 px-3 py-2 rounded-lg flex items-center gap-2 text-sm">
<i class="bi bi-clock-history"></i>
{{ $today }}
</div>
</div>
</div> </div>
<!-- Table Template --> <!-- Cards -->
<div class="card shadow-sm"> <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
<div class="card-body"> <div
<table class="table table-bordered"> class="bg-white rounded-lg shadow-md p-4 flex justify-between items-center hover:shadow-lg transition-transform duration-300 transform hover:-translate-y-2">
<thead class="table-light"> <div>
<h5 class="text-gray-500 text-sm">Kategori</h5>
<h3 class="font-bold text-xl">{{ $totalKategori }}</h3>
</div>
<div class="w-12 h-12 bg-blue-100 text-blue-600 rounded-lg flex items-center justify-center text-xl">
<i class="bi bi-diagram-3"></i>
</div>
</div>
<div
class="bg-white rounded-lg shadow-md p-4 flex justify-between items-center hover:shadow-lg transition-transform duration-300 transform hover:-translate-y-2">
<div>
<h5 class="text-gray-500 text-sm">Template</h5>
<h3 class="font-bold text-xl">{{ $totalTemplate }}</h3>
</div>
<div class="w-12 h-12 bg-blue-100 text-blue-600 rounded-lg flex items-center justify-center text-xl">
<i class="bi bi-card-list"></i>
</div>
</div>
<div
class="bg-white rounded-lg shadow-md p-4 flex justify-between items-center hover:shadow-lg transition-transform duration-300 transform hover:-translate-y-2">
<div>
<h5 class="text-gray-500 text-sm">Pelanggan</h5>
<h3 class="font-bold text-xl">{{ $totalPelanggan }}</h3>
</div>
<div class="w-12 h-12 bg-blue-100 text-blue-600 rounded-lg flex items-center justify-center text-xl">
<i class="bi bi-person"></i>
</div>
</div>
</div>
<!-- Recent Pelanggan -->
<div class="bg-white rounded-lg shadow-sm mt-6">
<div class="p-4 overflow-x-auto">
<h4 class="text-lg font-bold mb-3">Pelanggan Terbaru</h4>
<table class="w-full text-left border-collapse border border-gray-300">
<thead class="bg-gray-100">
<tr> <tr>
<th>Nomor</th> <th class="p-2 border border-gray-300 text-center w-16">Nomor</th>
<th>Nama Template</th> <th class="p-2 border border-gray-300 text-center">Nama</th>
<th>Kategori</th> <th class="p-2 border border-gray-300 text-center">Template</th>
<th>Harga</th> <th class="p-2 border border-gray-300 text-center">Kategori</th>
<th>Fitur</th> <th class="p-2 border border-gray-300 text-center">Email</th>
<th>Aksi</th> <th class="p-2 border border-gray-300 text-center">No. Telepon</th>
<th class="p-2 border border-gray-300 text-center">Harga</th>
<th class="p-2 border border-gray-300 text-center">Tanggal Pemesanan</th>
<th class="p-2 border border-gray-300 text-center">Aksi</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
@forelse($templates as $index => $template) @forelse($recentPelanggan as $index => $pelanggan)
<tr> <tr>
<td>{{ $templates->firstItem() + $index }}</td> <td class="p-2 py-4 border border-gray-300 text-center">
<td>{{ $template->nama_template }}</td> {{ $recentPelanggan->firstItem() + $index }}
<td>{{ $template->kategori->nama_kategori ?? '-' }}</td>
<td>Rp {{ number_format($template->harga, 0, ',', '.') }}</td>
<td>
@foreach ($template->fiturs as $fitur)
<span class="badge bg-info text-dark">{{ $fitur->nama_fitur }}</span>
@endforeach
</td> </td>
<td> <td class="p-2 py-4 border border-gray-300 truncate">{{ $pelanggan->nama_pemesan }}</td>
<a href="{{ route('templates.show', $template->id) }}" class="btn btn-sm btn-info"> <td class="p-2 py-4 border border-gray-300 truncate">{{ $pelanggan->nama_template }}</td>
<i class="bi bi-eye"></i> <td class="p-2 py-4 border border-gray-300 truncate">{{ $pelanggan->kategori ?? '-' }}</td>
</a> <td class="p-2 py-4 border border-gray-300 truncate">{{ $pelanggan->email }}</td>
<a href="{{ route('templates.edit', $template->id) }}" class="btn btn-sm btn-warning"> <td class="p-2 py-4 border border-gray-300 truncate">{{ $pelanggan->no_tlpn ?? '-' }}</td>
<i class="bi bi-pencil"></i> <td class="py-3 px-2 border border-gray-300 text-center">
</a> Rp {{ number_format($pelanggan->harga, 0, ',', '.') }}
<form action="{{ route('templates.destroy', $template->id) }}" method="POST" </td>
class="d-inline"> <td class="py-3 px-2 border border-gray-300 text-center">
@csrf {{ \Carbon\Carbon::parse($pelanggan->created_at)->format('d M Y') }}
@method('DELETE') </td>
<button class="btn btn-sm btn-danger" <td class="p-2 border border-gray-300 text-center">
onclick="return confirm('Yakin hapus template ini?')"> <div class="flex justify-center space-x-2">
<i class="bi bi-trash"></i> <a href="{{ route('admin.pelanggan.show', $pelanggan->id) }}"
class="text-blue-600 hover:underline flex items-center">
<i class="bi bi-eye mr-1"></i> Detail
</a>
<button class="text-red-600 hover:underline flex items-center openDeleteModalBtn"
data-id="{{ $pelanggan->id }}">
<i class="bi bi-trash mr-1"></i> Hapus
</button> </button>
</form> </div>
</td> </td>
</tr> </tr>
@empty @empty
<tr> <tr>
<td colspan="6" class="text-center text-muted">Belum ada template</td> <td colspan="9" class="p-2 text-center text-gray-500 border border-gray-300">
Belum ada data pelanggan.
</td>
</tr> </tr>
@endforelse @endforelse
</tbody> </tbody>
</table> </table>
<div class="mt-3"> <!-- Pagination -->
{{ $templates->links() }} <div class="p-4 flex justify-center">
<div class="flex space-x-1">
{{-- Tombol Previous --}}
@if ($recentPelanggan->onFirstPage())
<span class="px-3 py-1 rounded-lg bg-gray-200 text-gray-500 cursor-not-allowed">Prev</span>
@else
<a href="{{ $recentPelanggan->previousPageUrl() }}"
class="px-3 py-1 rounded-lg bg-gray-200 text-gray-700 hover:bg-gray-300">Prev</a>
@endif
@php
$total = $recentPelanggan->lastPage();
$current = $recentPelanggan->currentPage();
@endphp
{{-- Selalu tampilkan halaman pertama --}}
@if ($current > 2)
<a href="{{ $recentPelanggan->url(1) }}"
class="px-3 py-1 rounded-lg bg-gray-200 text-gray-700 hover:bg-blue-100">1</a>
@if ($current > 3)
<span class="px-3 py-1 text-gray-500">...</span>
@endif
@endif
{{-- Hanya tampilkan 3 halaman di tengah (current-1, current, current+1) --}}
@for ($i = max(1, $current - 1); $i <= min($total, $current + 1); $i++)
@if ($i == $current)
<span
class="px-3 py-1 rounded-lg bg-blue-600 text-white font-semibold">{{ $i }}</span>
@else
<a href="{{ $recentPelanggan->url($i) }}"
class="px-3 py-1 rounded-lg bg-gray-200 text-gray-700 hover:bg-blue-100">{{ $i }}</a>
@endif
@endfor
{{-- Selalu tampilkan halaman terakhir --}}
@if ($current < $total - 1)
@if ($current < $total - 2)
<span class="px-3 py-1 text-gray-500">...</span>
@endif
<a href="{{ $recentPelanggan->url($total) }}"
class="px-3 py-1 rounded-lg bg-gray-200 text-gray-700 hover:bg-blue-100">{{ $total }}</a>
@endif
{{-- Tombol Next --}}
@if ($recentPelanggan->hasMorePages())
<a href="{{ $recentPelanggan->nextPageUrl() }}"
class="px-3 py-1 rounded-lg bg-gray-200 text-gray-700 hover:bg-gray-300">Next</a>
@else
<span class="px-3 py-1 rounded-lg bg-gray-200 text-gray-500 cursor-not-allowed">Next</span>
@endif
</div>
</div> </div>
</div> </div>
</div> </div>
</div>
<!-- Modal Tambah Template --> <!-- Modal Hapus Pelanggan -->
<div class="modal fade" id="modalTambah" tabindex="-1" aria-labelledby="modalTambahLabel" aria-hidden="true"> @foreach ($recentPelanggan as $pelanggan)
<div class="modal-dialog modal-lg"> <div id="modalDelete{{ $pelanggan->id }}" class="fixed inset-0 hidden items-center justify-center z-50">
<form action="{{ route('templates.store') }}" method="POST" enctype="multipart/form-data" <div class="absolute inset-0 bg-black opacity-50 closeDeleteOverlay" data-id="{{ $pelanggan->id }}"></div>
class="modal-content"> <div class="bg-white rounded-lg shadow-lg w-full max-w-md z-50 overflow-hidden">
@csrf <div class="p-4 border-b">
<div class="modal-header"> <h5 class="text-lg font-medium">Hapus Pelanggan</h5>
<h5 class="modal-title" id="modalTambahLabel">Tambah Template</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
<!-- Nama -->
<div class="mb-3">
<label class="form-label">Nama Template</label>
<input type="text" name="nama_template" class="form-control" required>
</div> </div>
<div class="p-4">
<!-- Kategori --> <p>Apakah Anda yakin ingin menghapus pelanggan <strong>{{ $pelanggan->nama_pemesan }}</strong>?</p>
<div class="mb-3">
<label class="form-label">Kategori</label>
<select name="kategori_id" class="form-select" required>
<option value="">-- Pilih Kategori --</option>
@foreach ($kategoris as $kategori)
<option value="{{ $kategori->id }}">{{ $kategori->nama_kategori }}</option>
@endforeach
</select>
</div> </div>
<div class="p-4 border-t flex justify-end space-x-2">
<!-- Fitur --> <button type="button" class="bg-gray-300 text-black px-3 py-1 rounded closeDeleteBtn"
<div class="mb-3"> data-id="{{ $pelanggan->id }}">Batal</button>
<label class="form-label">Fitur</label><br> <form action="{{ route('admin.pelanggan.destroy', $pelanggan->id) }}" method="POST"
@foreach ($fiturList as $fitur) class="inline">
<div class="form-check form-check-inline"> @csrf
<input class="form-check-input feature-checkbox" type="checkbox" @method('DELETE')
id="fitur{{ $fitur->id }}" data-harga="{{ $fitur->harga }}"> <button class="bg-red-600 text-white px-3 py-1 rounded">Hapus</button>
<label class="form-check-label" for="fitur{{ $fitur->id }}"> </form>
{{ $fitur->nama_fitur }} - Rp {{ number_format($fitur->harga, 0, ',', '.') }}
</label>
</div>
@endforeach
</div>
<!-- Harga -->
<div class="mb-3">
<label class="form-label">Harga</label>
<input type="text" id="harga" name="harga" class="form-control" value="Rp 0" readonly>
</div>
<!-- Foto -->
<div class="mb-3">
<label class="form-label">Foto</label>
<input type="file" name="foto" class="form-control">
</div> </div>
</div> </div>
<div class="modal-footer"> </div>
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button> @endforeach
<button type="submit" class="btn btn-primary">Simpan</button>
</div>
</form>
</div>
</div>
<script> <script>
document.addEventListener('DOMContentLoaded', () => { document.addEventListener('DOMContentLoaded', () => {
const checkboxes = document.querySelectorAll('.feature-checkbox'); const openDeleteBtns = document.querySelectorAll('.openDeleteModalBtn');
const hargaInput = document.getElementById('harga'); const closeDeleteBtns = document.querySelectorAll('.closeDeleteBtn');
const closeDeleteOverlays = document.querySelectorAll('.closeDeleteOverlay');
function updateHarga() { openDeleteBtns.forEach(btn => {
let total = 0; btn.addEventListener('click', () => {
checkboxes.forEach(cb => { const id = btn.dataset.id;
if (cb.checked) total += parseInt(cb.dataset.harga); const modal = document.getElementById('modalDelete' + id);
if (modal) {
modal.classList.remove('hidden');
modal.classList.add('flex');
}
});
}); });
hargaInput.value = 'Rp ' + total.toLocaleString('id-ID'); closeDeleteBtns.forEach(btn => {
} btn.addEventListener('click', () => {
const id = btn.dataset.id;
const modal = document.getElementById('modalDelete' + id);
if (modal) {
modal.classList.add('hidden');
modal.classList.remove('flex');
}
});
});
// jalan setiap ada perubahan closeDeleteOverlays.forEach(overlay => {
checkboxes.forEach(cb => cb.addEventL istener('change', updateHarga)); overlay.addEventListener('click', () => {
const id = overlay.dataset.id;
// jalan pertama kali biar gak kosong const modal = document.getElementById('modalDelete' + id);
updateHarga(); if (modal) {
}); modal.classList.add('hidden');
</script> modal.classList.remove('flex');
@endsection }
});
});
});
</script>
@endsection