feat(order): membuat fitur show order

This commit is contained in:
Yoga Pangestu 2025-11-01 18:21:09 +07:00
parent c8b2b32691
commit 5c5d6c9821
6 changed files with 229 additions and 6 deletions

View File

@ -112,12 +112,12 @@ public function columns(): array
->label(function ($row) {
$actions = '';
// if (auth()->user()->can('update order')) {
// $actions .= view('components.datatables.edit', [
// 'id' => $row->hash,
// 'editRoute' => route('studio.manage.order.edit', $row->hash),
// ])->render();
// }
if (auth()->user()->can('show order')) {
$actions .= view('components.datatables.show', [
'id' => $row->hash,
'showRoute' => route('studio.manage.order.show', $row->hash),
])->render();
}
if (auth()->user()->can('delete order')) {
$actions .= view('components.datatables.delete', [

View File

@ -0,0 +1,57 @@
<?php
namespace App\Livewire\Studio\Manage\Order;
use App\Models\Order;
use App\Models\OrderItem;
use App\Models\Payment;
use Livewire\Attributes\Title;
use Livewire\Component;
#[Title('Detail Order')]
class Show extends Component
{
public array $orderData = [];
public array $items = [];
public array $payments = [];
public function mount(Order $order)
{
$order->load(['items', 'payments']);
$this->orderData = [
'customer' => $order->customer?->name ?? 'Anonim',
'invoice_number' => $order->invoice_number,
'status' => $order->status->label(),
'date' => formatDateTime($order->created_at),
'channel' => $order->channel->label(),
'subtotal' => currency($order->subtotal, 'Rp'),
'discount' => currency($order->discount, 'Rp'),
'total' => currency($order->total, 'Rp'),
];
$this->items = $order->items
->map(fn (OrderItem $item) => [
'id' => $item->hash,
'name' => $item->orderable?->name,
'quantity' => $item->quantity,
'unit_price' => currency($item->unit_price, 'Rp'),
'total' => currency($item->quantity * $item->unit_price, 'Rp'),
])
->toArray();
$this->payments = $order->payments->map(fn (Payment $payment) => [
'id' => $payment->id,
])
->toArray();
}
public function render()
{
return view('livewire.studio.manage.order.show', [
'pageTitle' => 'Detail Order',
]);
}
}

View File

@ -99,6 +99,7 @@ public function run(): void
'create order',
'update order',
'delete order',
'show order',
'view article',
'create article',

View File

@ -0,0 +1,3 @@
<flux:tooltip content="Lihat">
<flux:button href="{{ $showRoute }}" variant="primary" color="blue" icon="eye" size="sm"></flux:button>
</flux:tooltip>

View File

@ -0,0 +1,160 @@
<flux:main>
<div class="flex justify-between items-center">
<div>
<flux:heading size="xl">{{ $pageTitle }}</flux:heading>
</div>
<div>
<flux:button href="{{ route('studio.manage.order.index') }}" wire:navigate.hover class="text-sm">
Kembali
</flux:button>
</div>
</div>
<div class="mt-6">
<flux:card>
<div class="px-4 sm:px-6 lg:px-8 mx-auto my-4 sm:my-10">
<div
class="mb-5 pb-5 flex justify-between items-center border-b border-gray-200 dark:border-neutral-700">
<div>
<h2 class="text-2xl font-semibold text-gray-800 dark:text-neutral-200">Invoice</h2>
</div>
</div>
<!-- Grid -->
<div class="grid md:grid-cols-2 gap-3">
<div>
<div class="space-y-1 text-sm">
<p class="text-gray-500 dark:text-neutral-500">
Untuk pelanggan kami yang terhormat,
</p>
<p class="font-medium text-gray-800 dark:text-neutral-200">
{{ $orderData['customer'] }}
</p>
</div>
</div>
<div>
<div class="grid space-y-3">
<dl class="flex flex-col sm:flex-row gap-x-3 text-sm">
<dt class="min-w-36 max-w-50 text-gray-500 dark:text-neutral-500">
Nomor Invoice:
</dt>
<dd class="font-medium text-gray-800 dark:text-neutral-200">
{{ $orderData['invoice_number'] }}
</dd>
</dl>
<dl class="flex flex-col sm:flex-row gap-x-3 text-sm">
<dt class="min-w-36 max-w-50 text-gray-500 dark:text-neutral-500">
Status:
</dt>
<dd class="font-medium text-gray-800 dark:text-neutral-200">
{{ $orderData['status'] }}
</dd>
</dl>
<dl class="flex flex-col sm:flex-row gap-x-3 text-sm">
<dt class="min-w-36 max-w-50 text-gray-500 dark:text-neutral-500">
Tanggal:
</dt>
<dd class="font-medium text-gray-800 dark:text-neutral-200">
{{ $orderData['date'] }}
</dd>
</dl>
<dl class="flex flex-col sm:flex-row gap-x-3 text-sm">
<dt class="min-w-36 max-w-50 text-gray-500 dark:text-neutral-500">
Order di:
</dt>
<dd class="font-medium text-gray-800 dark:text-neutral-200">
{{ $orderData['channel'] }}
</dd>
</dl>
</div>
</div>
<!-- Col -->
</div>
<!-- End Grid -->
<!-- Table -->
<div class="mt-6 border border-gray-200 p-4 rounded-lg space-y-4 dark:border-neutral-700">
<div class="hidden sm:grid sm:grid-cols-5">
<div class="sm:col-span-2 text-xs font-medium text-gray-500 uppercase dark:text-neutral-500">
Item
</div>
<div class="text-start text-xs font-medium text-gray-500 uppercase dark:text-neutral-500">
Kuantitas
</div>
<div class="text-start text-xs font-medium text-gray-500 uppercase dark:text-neutral-500">Harga
</div>
<div class="text-end text-xs font-medium text-gray-500 uppercase dark:text-neutral-500">Total
</div>
</div>
<div class="hidden sm:block border-b border-gray-200 dark:border-neutral-700"></div>
@foreach ($items as $item)
<div class="grid grid-cols-3 sm:grid-cols-5 gap-2" wire:key="item-{{ $item['id'] }}">
<div class="col-span-full sm:col-span-2">
<h5 class="sm:hidden text-xs font-medium text-gray-500 uppercase dark:text-neutral-500">
Item
</h5>
<p class="font-medium text-gray-800 dark:text-neutral-200">{{ $item['name'] }}</p>
</div>
<div>
<h5 class="sm:hidden text-xs font-medium text-gray-500 uppercase dark:text-neutral-500">
Kuantitas
</h5>
<p class="text-gray-800 dark:text-neutral-200">{{ $item['quantity'] }}</p>
</div>
<div>
<h5 class="sm:hidden text-xs font-medium text-gray-500 uppercase dark:text-neutral-500">
Harga
</h5>
<p class="text-gray-800 dark:text-neutral-200">{{ $item['unit_price'] }}</p>
</div>
<div>
<h5 class="sm:hidden text-xs font-medium text-gray-500 uppercase dark:text-neutral-500">
Total
</h5>
<p class="sm:text-end text-gray-800 dark:text-neutral-200">{{ $item['total'] }}</p>
</div>
</div>
<div class="sm:hidden border-b border-gray-200 dark:border-neutral-700"></div>
@endforeach
</div>
<!-- End Table -->
<!-- Flex -->
<div class="mt-8 flex sm:justify-end">
<div class="w-full max-w-2xl sm:text-end space-y-2">
<!-- Grid -->
<div class="grid grid-cols-2 sm:grid-cols-1 gap-3 sm:gap-2">
<dl class="grid sm:grid-cols-5 gap-x-3 text-sm">
<dt class="col-span-3 text-gray-500 dark:text-neutral-500">Subotal:</dt>
<dd class="col-span-2 font-medium text-gray-800 dark:text-neutral-200">
{{ $orderData['subtotal'] }}</dd>
</dl>
<dl class="grid sm:grid-cols-5 gap-x-3 text-sm">
<dt class="col-span-3 text-gray-500 dark:text-neutral-500">Diskon:</dt>
<dd class="col-span-2 font-medium text-gray-800 dark:text-neutral-200">
{{ $orderData['discount'] }}</dd>
</dl>
<dl class="grid sm:grid-cols-5 gap-x-3 text-sm">
<dt class="col-span-3 text-gray-500 dark:text-neutral-500">Total:</dt>
<dd class="col-span-2 font-medium text-gray-800 dark:text-neutral-200">
{{ $orderData['total'] }}</dd>
</dl>
</div>
<!-- End Grid -->
</div>
</div>
<!-- End Flex -->
</div>
</flux:card>
</div>
</flux:main>

View File

@ -28,6 +28,7 @@
use App\Livewire\Studio\Manage\Article\Index as ArticleIndex;
use App\Livewire\Studio\Manage\Order\Create as OrderCreate;
use App\Livewire\Studio\Manage\Order\Index as OrderIndex;
use App\Livewire\Studio\Manage\Order\Show as OrderShow;
use App\Livewire\Studio\Manage\Purchase\Create as PurchaseCreate;
use App\Livewire\Studio\Manage\Purchase\Index as PurchaseIndex;
use App\Livewire\Studio\Master\Formula as FormulaComponent;
@ -149,6 +150,7 @@
Route::prefix('orders')->name('order.')->group(function () {
Route::get('/', OrderIndex::class)->name('index')->middleware('can:view order');
Route::get('/create', OrderCreate::class)->name('create')->middleware('can:create order');
Route::get('/{order}/show', OrderShow::class)->name('show')->middleware('can:show order');
Route::delete('/{order}/delete', OrderCreate::class)->name('delete')->middleware('can:delete order');
});