File Manager

Editing:payments.blade.php

<x-app-layout>
    <x-slot name="header">
        <div class="flex items-center justify-between">
            <h2 class="text-xl font-semibold leading-tight text-white">
                {{ __('Payments') }}
            </h2>
            <button onclick="document.getElementById('add-payment-modal').classList.remove('hidden')" class="inline-flex items-center gap-2 rounded-lg bg-orange px-4 py-2 text-sm font-semibold text-white shadow-sm transition hover:bg-orange-dark">
                <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"/></svg>
                Record Payment
            </button>
        </div>
    </x-slot>

@if (session('success'))
                <div class="rounded-lg border border-green-200 bg-green-50 p-4">
                    <div class="flex items-center">
                        <svg class="h-5 w-5 text-green-500 mr-2" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/></svg>
                        <p class="text-sm font-medium text-green-800">{{ session('success') }}</p>
                    </div>
                </div>
            @endif

<div class="overflow-hidden rounded-lg bg-white shadow-sm ring-1 ring-gray-900/5">
                <div class="border-b border-gray-100 bg-gray-50/50 px-6 py-4">
                    <h3 class="text-base font-semibold text-navy">All Payments</h3>
                </div>
                <div class="overflow-x-auto">
                    @if($payments->count() > 0)
                        <table class="min-w-full divide-y divide-gray-200">
                            <thead>
                                <tr class="bg-gray-50">
                                    <th class="px-6 py-3 text-left text-xs font-semibold uppercase tracking-wider text-gray-500">Date</th>
                                    <th class="px-6 py-3 text-left text-xs font-semibold uppercase tracking-wider text-gray-500">Project</th>
                                    <th class="px-6 py-3 text-left text-xs font-semibold uppercase tracking-wider text-gray-500">Client</th>
                                    <th class="px-6 py-3 text-right text-xs font-semibold uppercase tracking-wider text-gray-500">Amount</th>
                                    <th class="px-6 py-3 text-left text-xs font-semibold uppercase tracking-wider text-gray-500">Method</th>
                                    <th class="px-6 py-3 text-left text-xs font-semibold uppercase tracking-wider text-gray-500">Reference</th>
                                    <th class="px-6 py-3 text-left text-xs font-semibold uppercase tracking-wider text-gray-500">Status</th>
                                    <th class="px-6 py-3 text-left text-xs font-semibold uppercase tracking-wider text-gray-500">Actions</th>
                                </tr>
                            </thead>
                            <tbody class="divide-y divide-gray-100">
                                @foreach($payments as $payment)
                                    <tr class="transition hover:bg-gray-50/50">
                                        <td class="whitespace-nowrap px-6 py-4 text-sm text-gray-600">{{ $payment->paid_at->format('M d, Y') }}</td>
                                        <td class="whitespace-nowrap px-6 py-4 text-sm font-medium text-navy">{{ $payment->project->name ?? '—' }}</td>
                                        <td class="whitespace-nowrap px-6 py-4 text-sm text-gray-600">{{ $payment->client->name ?? '—' }}</td>
                                        <td class="whitespace-nowrap px-6 py-4 text-right text-sm font-semibold text-navy">Rs{{ number_format($payment->amount, 2) }}</td>
                                        <td class="whitespace-nowrap px-6 py-4 text-sm text-gray-600">{{ ucfirst(str_replace('_', ' ', $payment->payment_method ?? 'N/A')) }}</td>
                                        <td class="whitespace-nowrap px-6 py-4 text-sm text-gray-600">{{ $payment->reference_number ?? '—' }}</td>
                                        <td class="whitespace-nowrap px-6 py-4">
                                            @php
                                                $statusColors = [
                                                    'pending' => 'bg-yellow-100 text-yellow-800',
                                                    'confirmed' => 'bg-green-100 text-green-800',
                                                    'rejected' => 'bg-red-100 text-red-800',
                                                ];
                                                $color = $statusColors[$payment->status] ?? 'bg-gray-100 text-gray-800';
                                            @endphp
                                            <span class="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold {{ $color }}">
                                                {{ ucfirst($payment->status) }}
                                            </span>
                                        </td>
                                        <td class="whitespace-nowrap px-6 py-4">
                                            @if($payment->slip_path)
                                                <a href="{{ Storage::url($payment->slip_path) }}" target="_blank" class="text-sm font-medium text-blue-600 hover:text-blue-800 mr-2">View Slip</a>
                                            @endif
                                            @if($payment->status === 'pending')
                                                <form action="{{ route('admin.payment.confirm', $payment) }}" method="POST" class="inline">
                                                    @csrf
                                                    <button type="submit" class="text-sm font-medium text-green-600 hover:text-green-800 mr-2">Confirm</button>
                                                </form>
                                                <form action="{{ route('admin.payment.reject', $payment) }}" method="POST" class="inline">
                                                    @csrf
                                                    <button type="submit" class="text-sm font-medium text-red-600 hover:text-red-800">Reject</button>
                                                </form>
                                            @endif
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    @else
                        <div class="flex flex-col items-center justify-center py-16 text-center">
                            <svg class="h-16 w-16 text-gray-300 mb-4" fill="none" stroke="currentColor" stroke-width="1" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 18.75a60.07 60.07 0 0115.797 2.101c.727.198 1.453-.342 1.453-1.096V18.75M3.75 4.5v.75A.75.75 0 013 6h-.75m0 0v-.375c0-.621.504-1.125 1.125-1.125H20.25M2.25 6v9m18-10.5v.75c0 .414.336.75.75.75h.75m-1.5-1.5h.375c.621 0 1.125.504 1.125 1.125v9.75c0 .621-.504 1.125-1.125 1.125h-.375m1.5-1.5H21a.75.75 0 00-.75.75v.75m0 0H3.75m0 0h-.375a1.125 1.125 0 01-1.125-1.125V15m1.5 1.5v-.75A.75.75 0 003 15h-.75M15 10.5a3 3 0 11-6 0 3 3 0 016 0zm3 0h.008v.008H18V10.5zm-12 0h.008v.008H6V10.5z"/></svg>
                            <h3 class="text-sm font-semibold text-gray-900 mb-1">No payments recorded</h3>
                            <p class="text-sm text-gray-500">Click "Record Payment" to add a payment.</p>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>

{{-- Add Payment Modal --}}
    <div id="add-payment-modal" class="hidden fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50">
        <div class="relative top-10 mx-auto p-5 border w-full max-w-lg shadow-lg rounded-md bg-white">
            <div class="flex items-center justify-between mb-4">
                <h3 class="text-lg font-semibold text-navy">Record Payment</h3>
                <button onclick="document.getElementById('add-payment-modal').classList.add('hidden')" class="text-gray-400 hover:text-gray-600">
                    <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
                </button>
            </div>

<form action="{{ route('admin.payment.store') }}" method="POST" enctype="multipart/form-data" class="space-y-4">
                @csrf
                <div>
                    <label class="block text-sm font-medium text-gray-700">Project</label>
                    <select name="project_id" required class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-orange focus:border-orange">
                        <option value="">Select Project</option>
                        @foreach($projects as $project)
                            <option value="{{ $project->id }}">{{ $project->name }} ({{ $project->client->name ?? 'No Client' }})</option>
                        @endforeach
                    </select>
                </div>

<div class="grid grid-cols-2 gap-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700">Amount (Rs)</label>
                        <input type="number" name="amount" step="0.01" min="0" required class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-orange focus:border-orange">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700">Payment Date</label>
                        <input type="date" name="paid_at" required value="{{ now()->format('Y-m-d') }}" class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-orange focus:border-orange">
                    </div>
                </div>

<div class="grid grid-cols-2 gap-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700">Payment Method</label>
                        <select name="payment_method" class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-orange focus:border-orange">
                            <option value="">Select Method</option>
                            <option value="bank_transfer">Bank Transfer</option>
                            <option value="cash">Cash</option>
                            <option value="card">Card</option>
                            <option value="online">Online</option>
                            <option value="cheque">Cheque</option>
                        </select>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700">Reference Number</label>
                        <input type="text" name="reference_number" class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-orange focus:border-orange" placeholder="Transaction ID, Cheque No, etc.">
                    </div>
                </div>

<div>
                    <label class="block text-sm font-medium text-gray-700">Payment Slip (Optional)</label>
                    <input type="file" name="slip" accept="image/*,.pdf" class="mt-1 block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-md file:border-0 file:text-sm file:font-semibold file:bg-orange file:text-white hover:file:bg-orange-dark">
                </div>

<div>
                    <label class="block text-sm font-medium text-gray-700">Notes</label>
                    <textarea name="notes" rows="2" class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-orange focus:border-orange"></textarea>
                </div>

<div class="flex justify-end gap-3 pt-4 border-t">
                    <button type="button" onclick="document.getElementById('add-payment-modal').classList.add('hidden')" class="px-4 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 hover:bg-gray-50">Cancel</button>
                    <button type="submit" class="px-4 py-2 bg-orange text-white rounded-md text-sm font-medium hover:bg-orange-dark">Record Payment</button>
                </div>
            </form>
        </div>
    </div>
</x-app-layout>

Cancel

🤩 File Manager - Mr.X

Editing:payments.blade.php