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:
dhilanradya 2025-09-18 17:04:13 +07:00
commit 43a9c3a8df
7 changed files with 605 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
app/Http/Controllers/StrukController.php Normal file
View File

@ -0,0 +1,51 @@
<?php
namespace App\Http\Controllers;
use App\Models\Transaksi;
use Barryvdh\DomPDF\Facade\Pdf;
use Carbon\Carbon;
class StrukController extends Controller
{
public function cetak(int $id)
{
try {
$data = Transaksi::with(['itemTransaksi.produk.foto', 'sales'])
->find($id);
if (!$data) {
return response()->json(['error'=>'Transaksi tidak ditemukan'], 404);
}
// Debug: Let's see what data structure we have
// dd([
// 'transaksi' => $data->toArray(),
// 'item_count' => $data->itemTransaksi->count(),
// 'has_sales' => $data->sales ? true : false,
// ]);
// After debugging, uncomment this:
$pdf = Pdf::loadView('exports.struk', $data->toArray())
->setPaper([0, 0, 1224 * 0.75, 528 * 0.75], 'landscape')
->setOptions([
'isHtml5ParserEnabled' => true,
'isRemoteEnabled' => true,
'defaultFont' => 'DejaVu Sans'
]);
$filename = 'Struk_' . $data->kode_transaksi . '.pdf';
return $pdf->download($filename);
} catch (\Exception $e) {
return response()->json([
'error' => 'Debug Error',
'message' => $e->getMessage(),
'line' => $e->getLine(),
'file' => $e->getFile()
], 500);
}
}
}

2
resources/js/components/BrankasList.vue
View File

@ -204,7 +204,7 @@ const cancelText = ref("Batal");
// QR Code generator
const qrCodeUrl = computed(() => {
if (selectedItem.value) {
const data = `ITM-${selectedItem.value.id}-${selectedItem.value.produk.nama.replace(/\s/g, "")}`;
const data = selectedItem.value.kode_item;
return `https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=${encodeURIComponent(data)}`;
}
return "";

2
resources/js/components/DetailPerProduk.vue
View File

@ -341,7 +341,7 @@ const fetchData = async (page = 1) => {
let queryParams = `tanggal=${tanggalDipilih.value}&page=${page}`;
if (salesDipilih.value != 0 ) queryParams += `&sales_id=${salesDipilih.value}`;
if (nampanDipilih.value != 0) queryParams += `&produk_id=${produkDipilih.value}`;
if (nampanDipilih.value != 0) queryParams += `&nampan_id=${nampanDipilih.value}`;
if (namaPembeli.value) queryParams += `&nama_pembeli=${encodeURIComponent(namaPembeli.value)}`;
try {

4
resources/js/components/NavigationComponent.vue
View File

@ -13,9 +13,9 @@ const baseItems = [
{
label: "Manajemen Produk",
subItems: [
{ label: "Brankas", route: "/brankas" },
{ label: "Nampan", route: "/nampan" },
{ label: "Produk", route: "/produk" },
{ label: "Nampan", route: "/nampan" },
{ label: "Brankas", route: "/brankas" },
{ label: "Kategori", route: "/kategori" },
{ label: "Sales", route: "/sales" },
]

10
resources/js/components/TrayList.vue
View File

@ -54,15 +54,15 @@
class="flex justify-between items-center border border-C rounded-lg p-2 cursor-pointer hover:bg-gray-50"
@click="openMovePopup(item)">
<div class="flex items-center gap-3">
<img v-if="item.produk.foto && item.produk.foto.length > 0" :src="item.produk.foto[0].url"
<img v-if="item.produk?.foto && item.produk?.foto.length > 0" :src="item.produk?.foto[0].url"
alt="foto produk" class="size-12 object-cover rounded" />
<div class="text-D">
<p class="text-sm">{{ item.produk.nama }}</p>
<p class="text-sm">{{ item.produk?.nama }}</p>
<p class="text-sm font-medium">{{ item.kode_item }}</p>
</div>
</div>
<div class="flex items-center gap-2">
<span class="font-medium">{{ item.produk.berat }}g</span>
<span class="font-medium">{{ item.produk?.berat }}g</span>
</div>
</div>
</div>
@ -171,7 +171,7 @@ const selectedTrayId = ref("");
// QR Code generator
const qrCodeUrl = computed(() => {
if (selectedItem.value) {
const data = `ITM-${selectedItem.value.id}-${selectedItem.value.produk.nama.replace(/\s/g, "")}`;
const data = selectedItem.value.kode_item;
return `https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=${encodeURIComponent(data)}`;
}
return "";
@ -296,7 +296,7 @@ const saveMove = async () => {
// Hitung total berat
const totalWeight = (tray) => {
if (!tray.items) return 0;
const total = tray.items.reduce((sum, item) => sum + (item.produk.berat || 0), 0);
const total = tray.items.reduce((sum, item) => sum + (item.produk?.berat || 0), 0);
return total.toFixed(2);
};

542
resources/views/exports/struk.blade.php Normal file
View File

@ -0,0 +1,542 @@
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Struk Transaksi</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
@import url('https://fonts.googleapis.com/css2?family=PT+Serif:ital,wght@0,400;0,700;1,400;1,700&display=swap');
:root {
--color-A: #EBF1F5;
--color-B: #AFE5FF;
--color-C: #77C7EE;
--color-D: #024768;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "PT Serif", serif;
font-weight: 400;
font-style: italic;
color: var(--color-D);
background-color: white;
width: 1224px;
height: 528px;
position: relative;
overflow: hidden;
}
.header-yellow {
background-color: #EAB308;
height: 32px;
width: 100%;
}
.header-dark {
background-color: var(--color-D);
height: 24px;
width: 100%;
}
.main-content {
padding: 24px;
font-size: 14px;
display: flex;
flex-direction: column;
height: 100%;
position: relative;
}
.top-section {
position: relative;
display: flex;
align-items: flex-start;
justify-content: space-between;
padding-bottom: 4px;
margin-bottom: 8px;
}
.contact-info {
display: flex;
flex-direction: column;
gap: 8px;
margin-top: -20px;
}
.contact-item {
display: flex;
align-items: center;
gap: 8px;
}
.contact-item i {
width: 20px;
font-size: 16px;
}
.instagram { color: #E4405F; }
.tiktok { color: #000000; }
.whatsapp { color: #25D366; }
.logo-container {
position: absolute;
left: 50%;
top: -48px;
transform: translateX(-50%);
display: flex;
flex-direction: column;
align-items: center;
}
.logo {
height: 160px;
width: 100px;
background: #ccc;
display: flex;
align-items: center;
justify-content: center;
color: #666;
font-weight: bold;
}
.customer-info {
display: grid;
grid-template-columns: 130px 1fr;
gap: 0;
font-size: 12px;
align-items: center;
margin-top: -20px;
position: relative;
z-index: 10;
}
.customer-info .label {
text-align: right;
font-weight: 600;
padding-right: 12px;
margin-top: 4px;
}
.customer-info .value {
margin-top: 4px;
text-align: left;
padding-left: 8px;
height: 28px;
border-radius: 4px;
background-color: #DBEAFE;
padding: 4px 8px;
font-size: 14px;
display: flex;
align-items: center;
}
.bank-logos {
display: flex;
margin-bottom: 4px;
gap: 179px;
}
.bank-group {
display: flex;
gap: 16px;
}
.bank-logo {
height: 20px;
width: 40px;
background: #ccc;
display: flex;
align-items: center;
justify-content: center;
font-size: 10px;
font-weight: bold;
color: #666;
}
.items-table {
width: 100%;
border: 1px solid var(--color-D);
font-size: 14px;
table-layout: fixed;
border-bottom: 1px solid var(--color-D);
border-collapse: collapse;
}
.items-table th,
.items-table td {
border: 1px solid var(--color-D);
padding: 8px 4px;
}
.items-table th {
font-size: 18px;
border-bottom: 1px solid var(--color-D);
border-top: 1px solid var(--color-D);
text-align: center;
}
.items-table .col-qty { width: 40px; }
.items-table .col-item { width: 360px; }
.items-table .col-position { width: 70px; }
.items-table .col-weight { width: 40px; }
.items-table .col-purity { width: 40px; }
.items-table .col-price { width: 240px; }
.item-row {
text-align: center;
}
.item-detail {
display: flex;
align-items: center;
gap: 8px;
padding: 8px;
text-align: left;
}
.item-image {
width: 48px;
height: 48px;
object-fit: cover;
}
.item-placeholder {
width: 48px;
height: 48px;
background: #f0f0f0;
border-radius: 4px;
}
.bottom-section {
display: flex;
font-size: 14px;
margin-top: 8px;
}
.attention-section {
width: 40%;
padding: 8px;
text-align: left;
}
.attention-title {
font-weight: 600;
}
.attention-list {
margin-left: 16px;
font-size: 12px;
margin-top: 4px;
}
.attention-list li {
margin-bottom: 4px;
}
.attention-list .highlight {
color: #EF4444;
}
.sales-section {
width: 20%;
padding: 8px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.sales-name {
margin-top: 64px;
font-size: 14px;
border-radius: 4px;
background-color: var(--color-B);
width: 160px;
text-align: center;
padding: 4px;
}
.total-section {
margin-left: auto;
width: 25%;
padding: 8px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.cost-item {
display: flex;
align-items: flex-start;
justify-content: space-between;
margin-bottom: 16px;
}
.cost-label {
display: flex;
flex-direction: column;
}
.cost-title {
font-weight: 600;
}
.cost-subtitle {
color: #EF4444;
font-size: 12px;
}
.cost-value {
display: flex;
align-items: center;
width: 160px;
}
.cost-input {
height: 28px;
padding: 0 8px;
font-size: 14px;
border-radius: 4px;
background-color: #DBEAFE;
text-align: left;
width: 100%;
border: none;
}
.total-item {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: -16px;
}
.total-title {
font-weight: 600;
}
.total-value {
padding: 4px 12px 4px 8px;
text-align: left;
font-size: 14px;
width: 100%;
}
.footer-text {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
text-align: left;
font-size: 12px;
background-color: var(--color-D);
color: white;
padding: 32px;
padding-top: 4px;
padding-bottom: 4px;
}
.transaction-code {
font-size: 14px;
}
</style>
</head>
<body>
<div class="header-yellow">
<div class="header-dark"></div>
</div>
<div class="main-content">
<div class="top-section">
<div class="contact-info">
<p class="contact-item">
<i class="fab fa-instagram instagram"></i>
tokomas_Jakartacitayam
</p>
<p class="contact-item">
<i class="fab fa-tiktok tiktok"></i>
tokomas_Jakartacitayam
</p>
<p class="contact-item">
<i class="fab fa-whatsapp whatsapp"></i>
08158851178
</p>
<p class="transaction-code">{{ $kode_transaksi ?? 'N/A' }}</p>
</div>
<div class="logo-container">
<div class="logo">LOGO</div>
</div>
<div class="customer-info">
<div class="label">Tanggal :</div>
<div class="value">
@if(isset($created_at))
@php
$date = \Carbon\Carbon::parse($created_at);
$days = ['Minggu', 'Senin', 'Selasa', 'Rabu', 'Kamis', 'Jumat', 'Sabtu'];
$dayName = $days[$date->dayOfWeek];
$formattedDate = $dayName . '/' . $date->format('d-m-Y');
@endphp
{{ $formattedDate }}
@else
N/A
@endif
</div>
<div class="label">Nama :</div>
<div class="value">{{ $nama_pembeli ?? 'N/A' }}</div>
<div class="label">Alamat :</div>
<div class="value">{{ $alamat ?? 'N/A' }}</div>
<div class="label">No.Hp :</div>
<div class="value">{{ $no_hp ?? 'N/A' }}</div>
</div>
</div>
<div class="bank-logos">
<div class="bank-group">
<div class="bank-logo">BCA</div>
<div class="bank-logo">BRI</div>
<div class="bank-logo">BNI</div>
</div>
<div class="bank-group">
<div class="bank-logo">MC</div>
<div class="bank-logo">VISA</div>
<div class="bank-logo">MANDIRI</div>
</div>
</div>
<table class="items-table">
<thead>
<tr>
<th class="col-qty">Jml</th>
<th class="col-item">Item</th>
<th class="col-position">Posisi</th>
<th class="col-weight">Berat</th>
<th class="col-purity">Kadar</th>
<th class="col-price">Harga</th>
</tr>
</thead>
<tbody>
@if(isset($item_transaksi) && count($item_transaksi) > 0)
@foreach($item_transaksi as $item)
<tr class="item-row">
<td>
@if(isset($item['harga_deal']) && $item['harga_deal'])
1
@endif
</td>
<td>
<div class="item-detail">
@if(isset($item['produk']['foto'][0]['url']))
<img src="{{ $item['produk']['foto'][0]['url'] }}" class="item-image" />
@else
<div class="item-placeholder"></div>
@endif
{{ $item['produk']['nama'] ?? '' }}
</div>
</td>
<td>
@if(isset($item['produk']['nama']) && $item['produk']['nama'])
{{ $item['nampan']['nama'] ?? 'Brankas' }}
@endif
</td>
<td>
@if(isset($item['produk']['berat']) && $item['produk']['berat'])
{{ $item['produk']['berat'] }}g
@endif
</td>
<td>
@if(isset($item['produk']['kadar']) && $item['produk']['kadar'])
{{ $item['produk']['kadar'] }}k
@endif
</td>
<td>
@if(isset($item['harga_deal']) && $item['harga_deal'])
Rp{{ number_format($item['harga_deal'], 0, ',', '.') }}
@endif
</td>
</tr>
@endforeach
@endif
{{-- Add empty rows to ensure minimum 2 rows --}}
@for($i = (isset($item_transaksi) ? count($item_transaksi) : 0); $i < 2; $i++)
<tr class="item-row">
<td></td>
<td>
<div class="item-detail">
<div class="item-placeholder"></div>
</div>
</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
@endfor
</tbody>
</table>
<!-- Bottom Section -->
<div class="bottom-section">
<!-- PERHATIAN -->
<div class="attention-section">
<p class="attention-title">PERHATIAN</p>
<ol class="attention-list">
<li>Berat barang telah ditimbang dan disaksikan oleh pembeli.</li>
<li>Barang yang dikembalikan menurut harga pasaran dan dipotong ongkos bikin, barang rusak lain harga.</li>
<li>Barang yang sudah dibeli berarti sudah diperiksa dan disetujui.</li>
<li class="highlight">Surat ini harap dibawa pada saat menjual kembali.</li>
</ol>
</div>
<!-- SALES -->
<div class="sales-section">
<p><strong>Hormat Kami</strong></p>
<div class="sales-name">{{ $sales['nama'] ?? 'N/A' }}</div>
</div>
<!-- ONGKOS & TOTAL -->
<div class="total-section">
<div>
<!-- Ongkos bikin -->
<div class="cost-item">
<div class="cost-label">
<p class="cost-title">Ongkos bikin</p>
<p class="cost-subtitle">diluar harga jual</p>
</div>
<div class="cost-value">
<p>Rp</p>
<div class="cost-input">{{ number_format($ongkos_bikin ?? 0, 0, ',', '.') }}</div>
</div>
</div>
<!-- Total -->
<div class="total-item">
<p class="total-title">Total Harga</p>
<div class="cost-value">
<p>Rp</p>
<p class="total-value">
{{ number_format($total_harga ?? 0, 0, ',', '.') }},-
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<p class="footer-text">
Terima kasih sudah berbelanja dengan kami
</p>
</body>
</html>

3
routes/web.php
View File

@ -10,6 +10,7 @@ use App\Http\Controllers\SalesController;
use App\Http\Controllers\UserController;
use App\Http\Controllers\TransaksiController;
use App\Http\Controllers\LaporanController;
use App\Http\Controllers\StrukController;
use Illuminate\Support\Facades\Route;
@ -63,6 +64,8 @@ Route::prefix('api')->group(function () {
Route::get('kategori', [KategoriController::class, 'index']);
Route::get('kategori/{id}', [KategoriController::class, 'show']);
Route::get('brankas', [ItemController::class, 'brankasItem']);
Route::get('/cetak-struk/{id}', [StrukController::class, 'cetak']);
});
});