style: Update dark mode color palette from neutral to zinc.
This commit is contained in:
parent
07e0c4ce90
commit
acfa2977b3
@ -13,10 +13,9 @@
|
|||||||
<div class="mt-6">
|
<div class="mt-6">
|
||||||
<flux:card>
|
<flux:card>
|
||||||
<div class="px-4 sm:px-6 lg:px-8 mx-auto my-4 sm:my-10">
|
<div class="px-4 sm:px-6 lg:px-8 mx-auto my-4 sm:my-10">
|
||||||
<div
|
<div class="mb-5 pb-5 flex justify-between items-center border-b border-gray-200 dark:border-zinc-600">
|
||||||
class="mb-5 pb-5 flex justify-between items-center border-b border-gray-200 dark:border-neutral-700">
|
|
||||||
<div>
|
<div>
|
||||||
<h2 class="text-2xl font-semibold text-gray-800 dark:text-neutral-200">Invoice</h2>
|
<h2 class="text-2xl font-semibold text-gray-800 dark:text-zinc-100">Invoice</h2>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -24,10 +23,10 @@ class="mb-5 pb-5 flex justify-between items-center border-b border-gray-200 dark
|
|||||||
<div class="grid md:grid-cols-2 gap-3">
|
<div class="grid md:grid-cols-2 gap-3">
|
||||||
<div>
|
<div>
|
||||||
<div class="space-y-1 text-sm">
|
<div class="space-y-1 text-sm">
|
||||||
<p class="text-gray-500 dark:text-neutral-500">
|
<p class="text-gray-500 dark:text-zinc-400">
|
||||||
Untuk pelanggan kami yang terhormat,
|
Untuk pelanggan kami yang terhormat,
|
||||||
</p>
|
</p>
|
||||||
<p class="font-medium text-gray-800 dark:text-neutral-200">
|
<p class="font-medium text-gray-800 dark:text-zinc-100">
|
||||||
{{ $orderData['customer'] }}
|
{{ $orderData['customer'] }}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
@ -36,37 +35,37 @@ class="mb-5 pb-5 flex justify-between items-center border-b border-gray-200 dark
|
|||||||
<div>
|
<div>
|
||||||
<div class="grid space-y-3">
|
<div class="grid space-y-3">
|
||||||
<dl class="flex flex-col sm:flex-row gap-x-3 text-sm">
|
<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">
|
<dt class="min-w-36 max-w-50 text-gray-500 dark:text-zinc-400">
|
||||||
Nomor Invoice:
|
Nomor Invoice:
|
||||||
</dt>
|
</dt>
|
||||||
<dd class="font-medium text-gray-800 dark:text-neutral-200">
|
<dd class="font-medium text-gray-800 dark:text-zinc-100">
|
||||||
{{ $orderData['invoice_number'] }}
|
{{ $orderData['invoice_number'] }}
|
||||||
</dd>
|
</dd>
|
||||||
</dl>
|
</dl>
|
||||||
|
|
||||||
<dl class="flex flex-col sm:flex-row gap-x-3 text-sm">
|
<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">
|
<dt class="min-w-36 max-w-50 text-gray-500 dark:text-zinc-400">
|
||||||
Status:
|
Status:
|
||||||
</dt>
|
</dt>
|
||||||
<dd class="font-medium text-gray-800 dark:text-neutral-200">
|
<dd class="font-medium text-gray-800 dark:text-zinc-100">
|
||||||
{{ $orderData['status'] }}
|
{{ $orderData['status'] }}
|
||||||
</dd>
|
</dd>
|
||||||
</dl>
|
</dl>
|
||||||
|
|
||||||
<dl class="flex flex-col sm:flex-row gap-x-3 text-sm">
|
<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">
|
<dt class="min-w-36 max-w-50 text-gray-500 dark:text-zinc-400">
|
||||||
Tanggal:
|
Tanggal:
|
||||||
</dt>
|
</dt>
|
||||||
<dd class="font-medium text-gray-800 dark:text-neutral-200">
|
<dd class="font-medium text-gray-800 dark:text-zinc-100">
|
||||||
{{ $orderData['date'] }}
|
{{ $orderData['date'] }}
|
||||||
</dd>
|
</dd>
|
||||||
</dl>
|
</dl>
|
||||||
|
|
||||||
<dl class="flex flex-col sm:flex-row gap-x-3 text-sm">
|
<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">
|
<dt class="min-w-36 max-w-50 text-gray-500 dark:text-zinc-400">
|
||||||
Order di:
|
Order di:
|
||||||
</dt>
|
</dt>
|
||||||
<dd class="font-medium text-gray-800 dark:text-neutral-200">
|
<dd class="font-medium text-gray-800 dark:text-zinc-100">
|
||||||
{{ $orderData['channel'] }}
|
{{ $orderData['channel'] }}
|
||||||
</dd>
|
</dd>
|
||||||
</dl>
|
</dl>
|
||||||
@ -77,51 +76,51 @@ class="mb-5 pb-5 flex justify-between items-center border-b border-gray-200 dark
|
|||||||
<!-- End Grid -->
|
<!-- End Grid -->
|
||||||
|
|
||||||
<!-- Table -->
|
<!-- Table -->
|
||||||
<div class="mt-6 border border-gray-200 p-4 rounded-lg space-y-4 dark:border-neutral-700">
|
<div class="mt-6 border border-gray-200 p-4 rounded-lg space-y-4 dark:border-zinc-600">
|
||||||
<div class="hidden sm:grid sm:grid-cols-5">
|
<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">
|
<div class="sm:col-span-2 text-xs font-medium text-gray-500 uppercase dark:text-zinc-400">
|
||||||
Item
|
Item
|
||||||
</div>
|
</div>
|
||||||
<div class="text-start text-xs font-medium text-gray-500 uppercase dark:text-neutral-500">
|
<div class="text-start text-xs font-medium text-gray-500 uppercase dark:text-zinc-400">
|
||||||
Kuantitas
|
Kuantitas
|
||||||
</div>
|
</div>
|
||||||
<div class="text-start text-xs font-medium text-gray-500 uppercase dark:text-neutral-500">Harga
|
<div class="text-start text-xs font-medium text-gray-500 uppercase dark:text-zinc-400">Harga
|
||||||
</div>
|
</div>
|
||||||
<div class="text-end text-xs font-medium text-gray-500 uppercase dark:text-neutral-500">Total
|
<div class="text-end text-xs font-medium text-gray-500 uppercase dark:text-zinc-400">Total
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="hidden sm:block border-b border-gray-200 dark:border-neutral-700"></div>
|
<div class="hidden sm:block border-b border-gray-200 dark:border-zinc-600"></div>
|
||||||
|
|
||||||
@foreach ($items as $item)
|
@foreach ($items as $item)
|
||||||
<div class="grid grid-cols-3 sm:grid-cols-5 gap-2" wire:key="item-{{ $item['id'] }}">
|
<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">
|
<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">
|
<h5 class="sm:hidden text-xs font-medium text-gray-500 uppercase dark:text-zinc-400">
|
||||||
Item
|
Item
|
||||||
</h5>
|
</h5>
|
||||||
<p class="font-medium text-gray-800 dark:text-neutral-200">{{ $item['name'] }}</p>
|
<p class="font-medium text-gray-800 dark:text-zinc-100">{{ $item['name'] }}</p>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<h5 class="sm:hidden text-xs font-medium text-gray-500 uppercase dark:text-neutral-500">
|
<h5 class="sm:hidden text-xs font-medium text-gray-500 uppercase dark:text-zinc-400">
|
||||||
Kuantitas
|
Kuantitas
|
||||||
</h5>
|
</h5>
|
||||||
<p class="text-gray-800 dark:text-neutral-200">{{ $item['quantity'] }}</p>
|
<p class="text-gray-800 dark:text-zinc-100">{{ $item['quantity'] }}</p>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<h5 class="sm:hidden text-xs font-medium text-gray-500 uppercase dark:text-neutral-500">
|
<h5 class="sm:hidden text-xs font-medium text-gray-500 uppercase dark:text-zinc-400">
|
||||||
Harga
|
Harga
|
||||||
</h5>
|
</h5>
|
||||||
<p class="text-gray-800 dark:text-neutral-200">{{ $item['unit_price'] }}</p>
|
<p class="text-gray-800 dark:text-zinc-100">{{ $item['unit_price'] }}</p>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<h5 class="sm:hidden text-xs font-medium text-gray-500 uppercase dark:text-neutral-500">
|
<h5 class="sm:hidden text-xs font-medium text-gray-500 uppercase dark:text-zinc-400">
|
||||||
Total
|
Total
|
||||||
</h5>
|
</h5>
|
||||||
<p class="sm:text-end text-gray-800 dark:text-neutral-200">{{ $item['total'] }}</p>
|
<p class="sm:text-end text-gray-800 dark:text-zinc-100">{{ $item['total'] }}</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="sm:hidden border-b border-gray-200 dark:border-neutral-700"></div>
|
<div class="sm:hidden border-b border-gray-200 dark:border-zinc-600"></div>
|
||||||
@endforeach
|
@endforeach
|
||||||
</div>
|
</div>
|
||||||
<!-- End Table -->
|
<!-- End Table -->
|
||||||
@ -132,20 +131,20 @@ class="mb-5 pb-5 flex justify-between items-center border-b border-gray-200 dark
|
|||||||
<!-- Grid -->
|
<!-- Grid -->
|
||||||
<div class="grid grid-cols-2 sm:grid-cols-1 gap-3 sm:gap-2">
|
<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">
|
<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>
|
<dt class="col-span-3 text-gray-500 dark:text-zinc-400">Subotal:</dt>
|
||||||
<dd class="col-span-2 font-medium text-gray-800 dark:text-neutral-200">
|
<dd class="col-span-2 font-medium text-gray-800 dark:text-zinc-100">
|
||||||
{{ $orderData['subtotal'] }}</dd>
|
{{ $orderData['subtotal'] }}</dd>
|
||||||
</dl>
|
</dl>
|
||||||
|
|
||||||
<dl class="grid sm:grid-cols-5 gap-x-3 text-sm">
|
<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>
|
<dt class="col-span-3 text-gray-500 dark:text-zinc-400">Diskon:</dt>
|
||||||
<dd class="col-span-2 font-medium text-gray-800 dark:text-neutral-200">
|
<dd class="col-span-2 font-medium text-gray-800 dark:text-zinc-100">
|
||||||
{{ $orderData['discount'] }}</dd>
|
{{ $orderData['discount'] }}</dd>
|
||||||
</dl>
|
</dl>
|
||||||
|
|
||||||
<dl class="grid sm:grid-cols-5 gap-x-3 text-sm">
|
<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>
|
<dt class="col-span-3 text-gray-500 dark:text-zinc-400">Total:</dt>
|
||||||
<dd class="col-span-2 font-medium text-gray-800 dark:text-neutral-200">
|
<dd class="col-span-2 font-medium text-gray-800 dark:text-zinc-100">
|
||||||
{{ $orderData['total'] }}</dd>
|
{{ $orderData['total'] }}</dd>
|
||||||
</dl>
|
</dl>
|
||||||
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user