Initial commit
This commit is contained in:
Ronald Huynen
287
resources/views/livewire/single-transaction-table.blade.php
Normal file
287
resources/views/livewire/single-transaction-table.blade.php
Normal file
@@ -0,0 +1,287 @@
|
||||
<div class="my-6">
|
||||
<!-- Date and Amount section - visible on small/medium screens, hidden on lg+ -->
|
||||
<div class="lg:hidden my-6 grid grid-cols-2 gap-4">
|
||||
<!-- Date column - aligned with From column -->
|
||||
<div>
|
||||
<div class="text-theme-muted text-sm font-normal uppercase mb-2">
|
||||
{{ __('Date') }}
|
||||
</div>
|
||||
<div class="whitespace-no-wrap text-theme-primary font-bold">
|
||||
{{ ucfirst($transaction['datetime']->locale(app()->getLocale())->translatedFormat('l d-m-Y')) }}
|
||||
</div>
|
||||
<div class="whitespace-no-wrap text-theme-primary">
|
||||
{{ str_replace('@TIME@', $transaction['datetime']->locale(app()->getLocale())->translatedFormat('H:i:s'), __('on @TIME@')) }}
|
||||
</div>
|
||||
</div>
|
||||
<!-- Amount column - aligned with To column -->
|
||||
<div>
|
||||
<div class="text-theme-muted text-sm font-normal uppercase mb-2">
|
||||
{{ __('Amount') }}
|
||||
</div>
|
||||
<div class="whitespace-no-wrap text-theme-primary font-bold">
|
||||
{{ tbFormat($transaction['amount']) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--Statement table / grid -->
|
||||
<div class="lg:hidden grid grid-cols-2 gap-4">
|
||||
<!-- From column header -->
|
||||
<div class="text-theme-muted text-sm font-normal uppercase py-4">
|
||||
{{ __('From') }}
|
||||
</div>
|
||||
<!-- To column header -->
|
||||
<div class="text-theme-muted text-sm font-normal uppercase py-4">
|
||||
{{ __('To') }}
|
||||
</div>
|
||||
|
||||
<!-- From profile content -->
|
||||
<div class="align-top text-sm">
|
||||
<div class="flex flex-col sm:flex-row items-start">
|
||||
<div class="flex-shrink-0 mb-2 sm:mb-0">
|
||||
<div class="relative block cursor-pointer"
|
||||
onclick="window.location='{{ url($transaction['from_profile_path']) }}'">
|
||||
<img alt="profile"
|
||||
class="h-10 w-10 md:h-16 md:w-16 rounded-full profile-photo object-cover outline outline-1 outline-offset-1 outline-gray-500"
|
||||
src="{{ Storage::url($transaction['from_profile_photo']) }}" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="sm:ml-3">
|
||||
<div class="whitespace-no-wrap text-theme-primary font-bold mb-2">
|
||||
@if ($transaction['from_profile_full_name'] == $transaction['from_profile_name'])
|
||||
{{ $transaction['from_profile_name'] }}
|
||||
<div class="text-theme-muted text-2xs font-normal">
|
||||
{{ $transaction['from_profile_location'] }} </div>
|
||||
@else
|
||||
{{ $transaction['from_profile_name'] }}
|
||||
<div class="text-theme-muted text-2xs font-normal">
|
||||
{{ Illuminate\Support\Str::limit($transaction['from_profile_name'] . ', ' . $transaction['from_profile_location'], 35) }}
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
<div class="whitespace-no-wrap text-theme-primary">
|
||||
{{ __(ucfirst(strtolower($transaction['from_account']))) }} {{ __('bank account') }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- To profile content -->
|
||||
<div class="align-top text-sm">
|
||||
<div class="flex flex-col sm:flex-row items-start">
|
||||
<div class="flex-shrink-0 mb-2 sm:mb-0">
|
||||
<div class="relative block cursor-pointer"
|
||||
onclick="window.location='{{ url($transaction['to_profile_path']) }}'">
|
||||
<img alt="profile"
|
||||
class="h-10 w-10 md:h-16 md:w-16 rounded-full profile-photo object-cover outline outline-1 outline-offset-1 outline-gray-500"
|
||||
src="{{ Storage::url($transaction['to_profile_photo']) }}" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="sm:ml-3">
|
||||
<div class="whitespace-no-wrap text-theme-primary font-bold mb-2">
|
||||
@if ($transaction['to_profile_full_name'] == $transaction['to_profile_name'])
|
||||
{{ $transaction['to_profile_name'] }}
|
||||
<div class="text-theme-muted text-2xs font-normal">
|
||||
{{ $transaction['to_profile_location'] }} </div>
|
||||
@else
|
||||
{{ $transaction['to_profile_name'] }}
|
||||
<div class="text-theme-muted text-2xs font-normal">
|
||||
{{ Illuminate\Support\Str::limit($transaction['to_profile_full_name'] . ', ' . $transaction['to_profile_location'], 35) }}
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
<div class="whitespace-no-wrap text-theme-primary">
|
||||
{{ __(ucfirst(strtolower($transaction['to_account']))) }} {{ __('bank account') }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Table for large screens -->
|
||||
<table class="hidden lg:table w-full min-w-full text-left leading-normal" id="transaction">
|
||||
<thead class="uppercase">
|
||||
<tr>
|
||||
<th class="pr-4 py-4">
|
||||
<div class="text-theme-muted text-sm font-normal">
|
||||
{{ __('Date') }}
|
||||
</div>
|
||||
</th>
|
||||
<th class="pr-4 py-4">
|
||||
<div class="text-theme-muted text-sm font-normal">
|
||||
{{ __('From') }}
|
||||
</div>
|
||||
</th>
|
||||
<th class="pr-4 py-4">
|
||||
<div class="text-theme-muted text-sm font-normal">
|
||||
{{ __('To') }}
|
||||
</div>
|
||||
</th>
|
||||
<th class="">
|
||||
<div class="text-theme-muted text-sm font-normal">
|
||||
{{ __('Amount') }}
|
||||
</div>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr class="" style="cursor: pointer;">
|
||||
<td class="w-2/20 align-top text-sm">
|
||||
<div class="whitespace-no-wrap text-theme-primary font-bold">
|
||||
{{ ucfirst($transaction['datetime']->locale(app()->getLocale())->translatedFormat('l d-m-Y')) }}
|
||||
</div>
|
||||
<div class="whitespace-no-wrap text-theme-primary">
|
||||
{{ str_replace('@TIME@', $transaction['datetime']->locale(app()->getLocale())->translatedFormat('H:i:s'), __('on @TIME@')) }}
|
||||
</div>
|
||||
</td>
|
||||
<td class="w-8/20 align-top text-sm">
|
||||
<div class="flex items-start">
|
||||
<div class="flex-shrink-0">
|
||||
<div class="relative block cursor-pointer"
|
||||
onclick="window.location='{{ url($transaction['from_profile_path']) }}'">
|
||||
<img alt="profile"
|
||||
class="mx-auto h-10 w-10 md:h-16 md:w-16 rounded-full profile-photo object-cover outline outline-1 outline-offset-1 outline-gray-500"
|
||||
src="{{ Storage::url($transaction['from_profile_photo']) }}" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="ml-3">
|
||||
<div class="whitespace-no-wrap text-theme-primary font-bold mb-2">
|
||||
@if ($transaction['from_profile_full_name'] == $transaction['from_profile_name'])
|
||||
{{ $transaction['from_profile_name'] }}
|
||||
<div class="text-theme-muted text-2xs font-normal">
|
||||
{{ $transaction['from_profile_location'] }} </div>
|
||||
@else
|
||||
{{ $transaction['from_profile_name'] }}
|
||||
<div class="text-theme-muted text-2xs font-normal">
|
||||
{{ Illuminate\Support\Str::limit($transaction['from_profile_name'] . ', ' . $transaction['from_profile_location'], 35) }}
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
<div class="whitespace-no-wrap text-theme-primary">
|
||||
{{ __(ucfirst(strtolower($transaction['from_account']))) }} {{ __('bank account') }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
|
||||
<td class="w-8/20 align-top text-sm">
|
||||
<div class="flex items-start">
|
||||
<div class="flex-shrink-0">
|
||||
<div class="relative block cursor-pointer"
|
||||
onclick="window.location='{{ url($transaction['to_profile_path']) }}'">
|
||||
<img alt="profile"
|
||||
class="mx-auto h-10 w-10 md:h-16 md:w-16 rounded-full profile-photo object-cover outline outline-1 outline-offset-1 outline-gray-500"
|
||||
src="{{ Storage::url($transaction['to_profile_photo']) }}" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="ml-3">
|
||||
<div class="whitespace-no-wrap text-theme-primary font-bold mb-2">
|
||||
@if ($transaction['to_profile_full_name'] == $transaction['to_profile_name'])
|
||||
{{ $transaction['to_profile_name'] }}
|
||||
<div class="text-theme-muted text-2xs font-normal">
|
||||
{{ $transaction['to_profile_location'] }} </div>
|
||||
@else
|
||||
{{ $transaction['to_profile_name'] }}
|
||||
<div class="text-theme-muted text-2xs font-normal">
|
||||
{{ Illuminate\Support\Str::limit($transaction['to_profile_full_name'] . ', ' . $transaction['to_profile_location'], 35) }}
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
<div class="whitespace-no-wrap text-theme-primary">
|
||||
{{ __(ucfirst(strtolower($transaction['to_account']))) }} {{ __('bank account') }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
|
||||
<td class="w-2/20 text-semibold align-top text-sm font-bold">
|
||||
<div class="whitespace-no-wrap text-theme-primary">
|
||||
{{ tbFormat($transaction['amount']) }}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<!-- Description --->
|
||||
<div class="text-theme-muted mb-4 mt-8 px-0 text-sm font-normal uppercase">
|
||||
{{ __('Description') }}
|
||||
</div>
|
||||
<div class="text-theme-primary text-base leading-loose">
|
||||
{{ $transaction['description'] }}
|
||||
</div>
|
||||
|
||||
<!-- Transaction type -->
|
||||
@if (!empty($transaction['type_label']))
|
||||
<div class="text-theme-muted uppercase mt-12 px-0 text-sm font-normal">
|
||||
{{ __('Transaction type') }}
|
||||
</div>
|
||||
<div class="text-theme-primary my-6 text-base leading-loose">
|
||||
<div class="flex flex-col md:flex-row items-start md:items-center">
|
||||
<div class="mb-2 md:mb-0 flex items-center justify-center rounded-full outline outline-1 outline-offset-1 outline-gray-600">
|
||||
<x-icon class="" mini name="{{ $transaction['type_icon'] }}" />
|
||||
</div>
|
||||
<span class="md:ml-3">{{ __(ucfirst(strtolower($transaction['type_label']))) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<div class="text-theme-primary my-6 align-bottom">
|
||||
<!-- Creater user -->
|
||||
@if ($transaction['creator_user'])
|
||||
<div class="text-theme-primary float-left mt-12 px-0 text-sm font-normal">
|
||||
{{ __('Payment executed by') . ' ' }}
|
||||
<a href="{{ url($transaction['creator_user']['path']) }}">
|
||||
{{ $transaction['creator_user']['name'] }}
|
||||
</a>
|
||||
</div>
|
||||
@else
|
||||
<div class="text-theme-muted float-left mt-12 px-0 text-sm font-normal">
|
||||
{{ __('Payment executed by') . ' ' }}
|
||||
{{ config('app.name') . ' ' . __('system administration') }}
|
||||
</div>
|
||||
@endif
|
||||
<span class="float-right mt-6 mb-20 place-items-end" onclick="qrModal()" style="cursor: pointer;"
|
||||
wire:click="$toggle('qrModalVisible')">
|
||||
{{ SimpleSoftwareIO\QrCode\Facades\QrCode::size(60)->errorCorrection('L')->color(17, 24, 39)->generate(route('transaction.show', ['transactionId' => $transactionId])) }}
|
||||
</span>
|
||||
|
||||
</div>
|
||||
|
||||
<!---- QR Modal ---->
|
||||
<x-jetstream.dialog-modal wire:model.live="qrModalVisible">
|
||||
|
||||
<x-slot name="title">
|
||||
{{ __('QR code') }} {{ strtolower(__('Transaction # ')) }} {{ $transaction['trans_id'] }}
|
||||
</x-slot>
|
||||
|
||||
<x-slot name="content">
|
||||
<div class="flex h-full flex-col items-center justify-center">
|
||||
<div class="items-center justify-center py-6">
|
||||
{!! __('messages.payment.qr_statement', [
|
||||
'from_profile' => $transaction['from_profile_name'],
|
||||
'to_profile' => $transaction['to_profile_name'],
|
||||
'app_url' => config('app.url'),
|
||||
]) !!}
|
||||
</div>
|
||||
<!-- Align QR code in center and scale to max width -->
|
||||
<div class="relative mb-4 object-cover" id="qr-container" wire:click="$toggle('qrModalVisible')">
|
||||
{{ SimpleSoftwareIO\QrCode\Facades\QrCode::size(280)->errorCorrection('L')->color(17, 24, 39)->generate(route('transaction.show', ['transactionId' => $transactionId])) }}
|
||||
</div>
|
||||
|
||||
<!-- Route Link -->
|
||||
{{ route('transaction.show', ['transactionId' => $transactionId]) }}
|
||||
<x-jetstream.secondary-button class="mt-6" no-spinner wire:click="$toggle('qrModalVisible')">
|
||||
{{ __('Close') }}
|
||||
</x-jetstream.secondary-button>
|
||||
</div>
|
||||
</x-slot>
|
||||
|
||||
<x-slot name="footer">
|
||||
</x-slot>
|
||||
|
||||
<x-slot name="footer">
|
||||
</x-slot>
|
||||
</x-jetstream.dialog-modal>
|
||||
</div>
|
||||
Reference in New Issue
Block a user