File Manager
Viewing File: transactions.blade.php
@extends('layouts.bankapp')
@section('title', $title)
@section('content')
<div x-data="{
filterOpen: false,
selectedFilter: 'all',
searchQuery: '',
viewMode: 'list'
}" class="space-y-5">
<!-- Page Header -->
<div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
<div>
<h1 class="text-2xl font-semibold text-[#0D1B23] mb-1">Transaction History</h1>
<p class="text-sm text-[#7A7A7A]">Track and manage all your account activities</p>
</div>
<!-- Action Buttons -->
<div class="flex items-center gap-3">
<!-- Search -->
<div class="relative hidden md:block">
<input
type="text"
x-model="searchQuery"
placeholder="Search transactions..."
class="pl-10 pr-4 py-2.5 bg-white border border-[#E0E5E5] rounded-lg text-sm text-[#0D1B23] placeholder-gray-500 focus:border-primary-500 focus:ring-1 focus:ring-primary-500/20 transition-colors w-64"
>
<i data-lucide="search" class="w-4 h-4 text-[#7A7A7A] absolute left-3 top-1/2 -translate-y-1/2"></i>
</div>
<!-- Filter Toggle -->
<button
@click="filterOpen = !filterOpen"
class="px-4 py-2.5 rounded-lg border border-[#E0E5E5] bg-white hover:bg-[#DFE5E5] transition-colors flex items-center gap-2"
>
<i data-lucide="filter" class="w-4 h-4 text-[#7A7A7A]"></i>
<span class="text-sm font-medium text-[#4A4A4A] hidden sm:inline">Filter</span>
</button>
<!-- View Mode Toggle -->
<button
@click="viewMode = viewMode === 'list' ? 'grid' : 'list'"
class="px-4 py-2.5 rounded-lg border border-[#E0E5E5] bg-white hover:bg-[#DFE5E5] transition-colors hidden lg:block"
>
<i :data-lucide="viewMode === 'list' ? 'grid-3x3' : 'list'" class="w-4 h-4 text-[#7A7A7A]"></i>
</button>
</div>
</div>
<!-- Filter Panel -->
<div
x-show="filterOpen"
x-transition:enter="transition ease-out duration-200"
x-transition:enter-start="opacity-0 -translate-y-4"
x-transition:enter-end="opacity-100 translate-y-0"
class="bg-white border border-[#E0E5E5] rounded-xl p-4"
>
<div class="flex flex-wrap gap-2">
<button
@click="selectedFilter = 'all'"
:class="selectedFilter === 'all' ? 'bg-primary-500 text-white border-primary-500' : 'bg-white text-[#4A4A4A] border-[#C8D1D1] hover:bg-[#DFE5E5]'"
class="px-4 py-2 rounded-lg text-sm font-medium transition-colors border"
>
All Transactions
</button>
<button
@click="selectedFilter = 'credit'"
:class="selectedFilter === 'credit' ? 'bg-emerald-500/15 text-emerald-300 border-emerald-500/40' : 'bg-white text-[#4A4A4A] border-[#C8D1D1] hover:bg-[#DFE5E5]'"
class="px-4 py-2 rounded-lg text-sm font-medium transition-colors border"
>
<i data-lucide="arrow-down-left" class="w-3.5 h-3.5 inline mr-1"></i>
Credits
</button>
<button
@click="selectedFilter = 'debit'"
:class="selectedFilter === 'debit' ? 'bg-red-500/15 text-[#D55672] border-red-500/40' : 'bg-white text-[#4A4A4A] border-[#C8D1D1] hover:bg-[#DFE5E5]'"
class="px-4 py-2 rounded-lg text-sm font-medium transition-colors border"
>
<i data-lucide="arrow-up-right" class="w-3.5 h-3.5 inline mr-1"></i>
Debits
</button>
<button
@click="selectedFilter = 'deposit'"
:class="selectedFilter === 'deposit' ? 'bg-blue-500/15 text-blue-300 border-blue-500/40' : 'bg-white text-[#4A4A4A] border-[#C8D1D1] hover:bg-[#DFE5E5]'"
class="px-4 py-2 rounded-lg text-sm font-medium transition-colors border"
>
<i data-lucide="plus-circle" class="w-3.5 h-3.5 inline mr-1"></i>
Deposits
</button>
<button
@click="selectedFilter = 'pending'"
:class="selectedFilter === 'pending' ? 'bg-amber-500/15 text-amber-300 border-amber-500/40' : 'bg-white text-[#4A4A4A] border-[#C8D1D1] hover:bg-[#DFE5E5]'"
class="px-4 py-2 rounded-lg text-sm font-medium transition-colors border"
>
<i data-lucide="clock" class="w-3.5 h-3.5 inline mr-1"></i>
Pending
</button>
</div>
</div>
<!-- Transactions List -->
<div class="space-y-2" x-show="viewMode === 'list'">
@php
$allTransactions = collect();
foreach ($withdrawals as $withdrawal) {
$allTransactions->push([
'type' => 'withdrawal',
'data' => $withdrawal,
'timestamp' => $withdrawal->created_at ?? now()
]);
}
foreach ($deposits as $deposit) {
$allTransactions->push([
'type' => 'deposit',
'data' => $deposit,
'timestamp' => $deposit->created_at ?? now()
]);
}
$allTransactions = $allTransactions->sortByDesc('timestamp');
@endphp
@forelse($allTransactions as $transaction)
@php
$item = $transaction['data'];
$isCredit = !$isDeposit && $item->type === 'Credit';
$isDebit = !$isDeposit && $item->type === 'Debit';
$isDeposit = $transaction['type'] === 'deposit';
// Determine status
$status = $isDeposit ? $item->status : $item->status;
$isPending = in_array(strtolower($status), ['pending', 'on-hold', 'scheduled', 'under review']);
$isProcessed = in_array(strtolower($status), ['processed', 'approved']);
$isRejected = in_array(strtolower($status), ['rejected', 'failed', 'expired', 'frozen']);
$isCancelled = strtolower($status) === 'cancelled';
$isReversed = in_array(strtolower($status), ['reversed', 'refunded']);
@endphp
<a href="{{ $isDeposit ? route('depositdetails', $item->id) : route('transactiondetails', $item->id) }}"
class="bg-white border border-[#E0E5E5] rounded-lg p-4 md:p-5 hover:bg-[#DFE5E5] hover:border-[#C8D1D1] transition-colors block group">
<div class="flex items-center gap-4">
<!-- Icon -->
<div class="flex-shrink-0 w-10 h-10 rounded-lg flex items-center justify-center
@if($isDeposit || $isCredit)
bg-emerald-500/10 border border-emerald-500/20
@else
bg-[#D55672]/10 border border-red-500/20
@endif
">
@if($isDeposit)
<i data-lucide="plus-circle" class="w-4 h-4 text-emerald-400"></i>
@elseif($isCredit)
<i data-lucide="arrow-down-left" class="w-4 h-4 text-emerald-400"></i>
@else
<i data-lucide="arrow-up-right" class="w-4 h-4 text-[#D55672]"></i>
@endif
</div>
<!-- Transaction Info -->
<div class="flex-1 min-w-0">
<div class="flex items-center gap-2 mb-1 flex-wrap">
<p class="font-medium text-[#0D1B23] text-sm">
@if($isDeposit)
Deposit
@else
{{ $item->payment_mode ?? $item->type }}
@endif
</p>
{{-- Show party bank information for both Credits and Debits with tracking --}}
@if(!empty($item->sender_bank))
<span class="text-xs text-[#7A7A7A]">{{ $isCredit ? 'from' : 'to' }}</span>
<div class="inline-flex items-center gap-1.5 px-2 py-0.5 rounded bg-primary-50 border border-primary-200">
<i data-lucide="landmark" class="w-3 h-3 text-primary-500"></i>
<p class="text-xs font-medium text-primary-500">{{ $item->sender_bank }}</p>
</div>
@if(!empty($item->reference_number))
<span class="inline-flex items-center px-2 py-0.5 rounded text-[10px] font-mono bg-[#DFE5E5] text-[#7A7A7A] border border-[#C8D1D1]">
{{ $item->reference_number }}
</span>
@endif
@elseif(!$isDeposit && $item->accountname)
<span class="text-xs text-[#7A7A7A]">→</span>
<p class="text-sm text-[#7A7A7A] truncate">{{ $item->accountname }}</p>
@endif
<!-- Status Badge -->
@if($isPending)
<span class="inline-flex items-center px-2 py-0.5 rounded-full text-[10px] font-semibold uppercase tracking-wider bg-amber-500/10 text-[#EBBC46] border border-amber-500/20">
<i data-lucide="clock" class="w-3 h-3 mr-1"></i>
{{ $status }}
</span>
@elseif($isProcessed)
<span class="inline-flex items-center px-2 py-0.5 rounded-full text-[10px] font-semibold uppercase tracking-wider bg-emerald-500/10 text-emerald-400 border border-emerald-500/20">
<i data-lucide="check-circle" class="w-3 h-3 mr-1"></i>
{{ $status }}
</span>
@elseif($isRejected)
<span class="inline-flex items-center px-2 py-0.5 rounded-full text-[10px] font-semibold uppercase tracking-wider bg-[#D55672]/10 text-[#D55672] border border-red-500/20">
<i data-lucide="x-circle" class="w-3 h-3 mr-1"></i>
{{ $status }}
</span>
@elseif($isReversed)
<span class="inline-flex items-center px-2 py-0.5 rounded-full text-[10px] font-semibold uppercase tracking-wider bg-blue-500/10 text-blue-400 border border-blue-500/20">
<i data-lucide="rotate-ccw" class="w-3 h-3 mr-1"></i>
{{ $status }}
</span>
@elseif($isCancelled)
<span class="inline-flex items-center px-2 py-0.5 rounded-full text-[10px] font-semibold uppercase tracking-wider bg-gray-500/10 text-[#7A7A7A] border border-gray-500/20">
<i data-lucide="slash" class="w-3 h-3 mr-1"></i>
{{ $status }}
</span>
@else
<span class="inline-flex items-center px-2 py-0.5 rounded-full text-[10px] font-semibold uppercase tracking-wider bg-gray-500/10 text-[#7A7A7A] border border-gray-500/20">
{{ $status }}
</span>
@endif
</div>
<div class="flex items-center gap-2 text-xs text-[#7A7A7A]">
<i data-lucide="calendar" class="w-3 h-3"></i>
<span>{{ $item->created_at ? $item->created_at->format('M d, Y') : 'N/A' }}</span>
<span class="text-gray-700">·</span>
<i data-lucide="clock" class="w-3 h-3"></i>
<span>{{ $item->created_at ? $item->created_at->format('g:i A') : 'N/A' }}</span>
{{-- Show party name for verified transactions (sender for Credits, recipient for Debits) --}}
@if(!empty($item->sender_name))
<span class="text-gray-700 hidden sm:inline">·</span>
<div class="hidden sm:flex items-center gap-1.5">
<i data-lucide="user-check" class="w-3 h-3 text-primary-500"></i>
<span class="text-xs text-primary-500">{{ $item->sender_name }}</span>
</div>
@endif
</div>
{{-- Mobile: Show sender details on separate line --}}
@if($isCredit && !empty($item->sender_name))
<div class="flex sm:hidden items-center gap-1.5 mt-1 text-xs text-primary-500">
<i data-lucide="user-check" class="w-3 h-3"></i>
<span>From: {{ $item->sender_name }}</span>
@if(!empty($item->sender_bank))
<span class="text-[#7A7A7A]">·</span>
<span>{{ $item->sender_bank }}</span>
@endif
</div>
@endif
</div>
<!-- Amount -->
<div class="flex-shrink-0 text-right">
<p class="font-semibold text-lg
@if($isDeposit || $isCredit)
text-emerald-400
@else
text-[#D55672]
@endif
">
@if($isDeposit || $isCredit)
+
@else
-
@endif
{{ Auth::user()->currency }}{{ number_format($item->amount, 2, '.', ',') }}
</p>
<p class="text-xs text-[#7A7A7A] mt-0.5">
@if($isProcessed)
Completed
@elseif($isPending)
Processing
@else
{{ $status }}
@endif
</p>
</div>
<!-- Arrow -->
<div class="flex-shrink-0 hidden md:block">
<i data-lucide="chevron-right" class="w-4 h-4 text-[#7A7A7A] group-hover:text-[#7A7A7A] transition-colors"></i>
</div>
</div>
</a>
@empty
<!-- Empty State -->
<div class="bg-white border border-[#E0E5E5] rounded-xl p-12 text-center">
<div class="w-16 h-16 mx-auto mb-4 rounded-xl bg-primary-50 border border-primary-200 flex items-center justify-center">
<i data-lucide="receipt" class="w-8 h-8 text-primary-500"></i>
</div>
<h3 class="text-lg font-semibold text-[#0D1B23] mb-2">No Transactions Yet</h3>
<p class="text-sm text-[#7A7A7A] max-w-md mx-auto mb-6">Your transaction history will appear here once you make your first deposit or withdrawal.</p>
<a href="{{ route('accounthistory') }}" class="inline-flex items-center gap-2 px-5 py-2.5 bg-primary-500 hover:bg-primary-600 text-white rounded-lg font-medium text-sm transition-colors">
<i data-lucide="plus" class="w-4 h-4"></i>
<span>Get Started</span>
</a>
</div>
@endforelse
</div>
<!-- View All Link -->
@if($allTransactions->count() > 0)
<div class="flex justify-center pt-4">
<a href="{{ route('accounthistory') }}" class="inline-flex items-center gap-2 px-5 py-2.5 border border-[#E0E5E5] bg-white rounded-lg hover:bg-[#DFE5E5] hover:border-[#C8D1D1] transition-colors text-sm font-medium text-[#4A4A4A]">
<span>View Complete History</span>
<i data-lucide="arrow-right" class="w-4 h-4"></i>
</a>
</div>
@endif
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
lucide.createIcons();
});
</script>
@endsection