293 lines
18 KiB
PHP
293 lines
18 KiB
PHP
@extends('layouts.app')
|
|
|
|
@section('content')
|
|
<div class="max-w-4xl mx-auto space-y-6">
|
|
<!-- Page Header -->
|
|
<div class="flex items-center gap-4">
|
|
<a href="{{ route('expenses.index') }}" class="p-2 text-gray-500 hover:text-gray-900 hover:bg-gray-100 rounded-lg transition-colors">
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"/></svg>
|
|
</a>
|
|
<h1 class="text-2xl font-bold text-gray-900">{{ $expense->title }}</h1>
|
|
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium
|
|
{{ $expense->status === 'approved' ? 'bg-emerald-50 text-emerald-700' :
|
|
($expense->status === 'rejected' ? 'bg-red-50 text-red-700' :
|
|
($expense->status === 'paid' ? 'bg-blue-50 text-blue-700' : 'bg-amber-50 text-amber-700')) }}">
|
|
{{ $expense->status_label }}
|
|
</span>
|
|
<div class="ms-auto flex items-center gap-2">
|
|
<a href="{{ route('expenses.edit', $expense) }}" class="inline-flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium text-teal-700 bg-teal-50 rounded-lg hover:bg-teal-100 transition-colors">
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/></svg>
|
|
{{ __('common.edit') }}
|
|
</a>
|
|
@if($expense->status === 'pending')
|
|
<button onclick="approveExpense({{ $expense->id }})" class="inline-flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium text-white bg-emerald-600 rounded-lg hover:bg-emerald-700 transition-colors">
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
|
|
{{ __('expense.approve') }}
|
|
</button>
|
|
<button onclick="rejectExpense({{ $expense->id }})" class="inline-flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium text-white bg-red-600 rounded-lg hover:bg-red-700 transition-colors">
|
|
<svg class="w-4 h-4" 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>
|
|
{{ __('expense.reject') }}
|
|
</button>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Expense Details -->
|
|
<div class="bg-white rounded-xl border border-gray-200 overflow-hidden">
|
|
<div class="grid grid-cols-1 md:grid-cols-2">
|
|
<!-- Left Column -->
|
|
<div class="p-6 space-y-4 border-e border-gray-100">
|
|
<div>
|
|
<p class="text-xs font-medium text-gray-400 mb-1">{{ __('expense.project') }}</p>
|
|
<p class="text-sm font-medium text-gray-900">{{ $expense->project?->name ?? '-' }}</p>
|
|
</div>
|
|
<div>
|
|
<p class="text-xs font-medium text-gray-400 mb-1">{{ __('expense.category') }}</p>
|
|
<p class="text-sm text-gray-700">{{ __('expense.category_' . $expense->category) }}</p>
|
|
</div>
|
|
<div>
|
|
<p class="text-xs font-medium text-gray-400 mb-1">{{ __('expense.amount') }}</p>
|
|
<p class="text-lg font-bold text-gray-900">{{ format_currency((float)$expense->amount, $expense->currency?->code) }}</p>
|
|
@if($expense->original_amount && $expense->original_amount != $expense->amount)
|
|
<p class="text-xs text-gray-400 mt-0.5">{{ __('expense.original_amount') ?? 'مبلغ اصلی' }}: {{ format_currency((float)$expense->original_amount, $expense->currency?->code) }}</p>
|
|
@endif
|
|
</div>
|
|
<div>
|
|
<p class="text-xs font-medium text-gray-400 mb-1">{{ __('expense.date') }}</p>
|
|
<p class="text-sm text-gray-700">{{ $expense->expense_date ? calendar_date($expense->expense_date) : '-' }}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Right Column -->
|
|
<div class="p-6 space-y-4">
|
|
@if($expense->invoice_number)
|
|
<div>
|
|
<p class="text-xs font-medium text-gray-400 mb-1">{{ __('expense.invoice_number') }}</p>
|
|
<p class="text-sm text-gray-700" dir="ltr">{{ $expense->invoice_number }}</p>
|
|
</div>
|
|
@endif
|
|
<div>
|
|
<p class="text-xs font-medium text-gray-400 mb-1">{{ __('expense.requested_by') ?? 'درخواستکننده' }}</p>
|
|
<p class="text-sm text-gray-700">{{ $expense->requestedBy?->name ?? '-' }}</p>
|
|
</div>
|
|
@if($expense->approvedBy)
|
|
<div>
|
|
<p class="text-xs font-medium text-gray-400 mb-1">{{ __('expense.approved_by') ?? 'تأییدکننده' }}</p>
|
|
<p class="text-sm text-gray-700">{{ $expense->approvedBy?->name }}</p>
|
|
</div>
|
|
@endif
|
|
@if($expense->approval_date)
|
|
<div>
|
|
<p class="text-xs font-medium text-gray-400 mb-1">{{ __('expense.approval_date') ?? 'تاریخ تأیید' }}</p>
|
|
<p class="text-sm text-gray-700">{{ calendar_date($expense->approval_date) }}</p>
|
|
</div>
|
|
@endif
|
|
@if($expense->pettyCash)
|
|
<div>
|
|
<p class="text-xs font-medium text-gray-400 mb-1">{{ __('expense.petty_cash') ?? 'تنخواه' }}</p>
|
|
<a href="{{ route('petty-cashes.show', $expense->pettyCash) }}" class="text-sm text-teal-600 hover:text-teal-800 font-medium">{{ $expense->pettyCash->title ?? '#' . $expense->petty_cash_id }}</a>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Description -->
|
|
@if($expense->description)
|
|
<div class="px-6 py-4 border-t border-gray-100 bg-gray-50/50">
|
|
<p class="text-xs font-medium text-gray-400 mb-1">{{ __('expense.description') }}</p>
|
|
<p class="text-sm text-gray-700 whitespace-pre-line">{{ $expense->description }}</p>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
|
|
<!-- Legacy Receipt -->
|
|
@if($expense->receipt_path)
|
|
<div class="bg-white rounded-xl border border-gray-200 p-6">
|
|
<h3 class="text-sm font-semibold text-gray-900 mb-3 flex items-center gap-2">
|
|
<svg class="w-4 h-4 text-teal-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
|
|
{{ __('expense.receipt') }}
|
|
</h3>
|
|
<div class="flex items-center gap-3 p-3 bg-gray-50 rounded-lg border border-gray-200">
|
|
@if(str_ends_with(strtolower($expense->receipt_path), '.pdf'))
|
|
<div class="w-10 h-10 bg-red-50 rounded-lg flex items-center justify-center flex-shrink-0">
|
|
<svg class="w-5 h-5 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"/></svg>
|
|
</div>
|
|
@else
|
|
<div class="w-16 h-16 rounded-lg overflow-hidden border border-gray-200 flex-shrink-0 cursor-pointer" onclick="previewImage('{{ Storage::url($expense->receipt_path) }}')">
|
|
<img src="{{ Storage::url($expense->receipt_path) }}" alt="Receipt" class="w-full h-full object-cover">
|
|
</div>
|
|
@endif
|
|
<div class="flex-1">
|
|
<p class="text-sm font-medium text-gray-900">{{ basename($expense->receipt_path) }}</p>
|
|
</div>
|
|
<a href="{{ Storage::url($expense->receipt_path) }}" target="_blank" class="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-teal-700 bg-teal-50 rounded-lg hover:bg-teal-100 transition-colors">
|
|
<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
|
|
{{ __('letter.download') }}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
|
|
<!-- Attachments -->
|
|
<div class="bg-white rounded-xl border border-gray-200 overflow-hidden">
|
|
<div class="px-6 py-4 border-b border-gray-200 flex items-center justify-between">
|
|
<h3 class="text-sm font-semibold text-gray-900 flex items-center gap-2">
|
|
<svg class="w-4 h-4 text-teal-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13"/></svg>
|
|
{{ __('attachment.attachments') }}
|
|
@if($expense->attachments->count() > 0)
|
|
<span class="inline-flex items-center justify-center w-5 h-5 text-[10px] font-bold text-white bg-teal-600 rounded-full">{{ $expense->attachments->count() }}</span>
|
|
@endif
|
|
</h3>
|
|
<label class="cursor-pointer inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-teal-700 bg-teal-50 rounded-lg hover:bg-teal-100 transition-colors">
|
|
<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
|
|
{{ __('attachment.add_file') }}
|
|
<input type="file" name="attachment_files[]" multiple accept=".jpg,.jpeg,.png,.pdf,.doc,.docx" class="hidden"
|
|
data-attachable-type="App\Models\Expense" data-attachable-id="{{ $expense->id }}"
|
|
onchange="uploadAttachment(this)">
|
|
</label>
|
|
</div>
|
|
|
|
<!-- Attachment List -->
|
|
<div id="attachmentList">
|
|
@if($expense->attachments->count() > 0)
|
|
<div class="divide-y divide-gray-100">
|
|
@foreach($expense->attachments as $attachment)
|
|
<div class="flex items-center gap-3 px-6 py-3 hover:bg-gray-50 transition-colors" id="attachment-{{ $attachment->id }}">
|
|
@if($attachment->is_image)
|
|
<div class="w-12 h-12 rounded-lg overflow-hidden border border-gray-200 flex-shrink-0 cursor-pointer" onclick="previewImage('{{ $attachment->url }}')">
|
|
<img src="{{ $attachment->url }}" alt="{{ $attachment->file_name }}" class="w-full h-full object-cover">
|
|
</div>
|
|
@elseif($attachment->is_pdf)
|
|
<div class="w-12 h-12 bg-red-50 rounded-lg flex items-center justify-center flex-shrink-0">
|
|
<svg class="w-6 h-6 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"/></svg>
|
|
</div>
|
|
@else
|
|
<div class="w-12 h-12 bg-blue-50 rounded-lg flex items-center justify-center flex-shrink-0">
|
|
<svg class="w-6 h-6 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
|
|
</div>
|
|
@endif
|
|
|
|
<div class="flex-1 min-w-0">
|
|
<a href="{{ route('attachments.download', $attachment) }}" class="text-sm font-medium text-gray-900 hover:text-teal-600 transition-colors">{{ $attachment->file_name }}</a>
|
|
<p class="text-xs text-gray-400 mt-0.5">{{ $attachment->formatted_size }} • {{ $attachment->created_at?->format('Y/m/d H:i') }}</p>
|
|
</div>
|
|
|
|
<div class="flex items-center gap-1">
|
|
<a href="{{ route('attachments.download', $attachment) }}" class="p-1.5 text-gray-400 hover:text-teal-600 hover:bg-teal-50 rounded-lg transition-colors" title="{{ __('attachment.download') }}">
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
|
|
</a>
|
|
@can('delete', $attachment)
|
|
<button type="button" onclick="deleteAttachment({{ $attachment->id }})" class="p-1.5 text-gray-400 hover:text-red-500 hover:bg-red-50 rounded-lg transition-colors" title="{{ __('common.delete') }}">
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
|
|
</button>
|
|
@endcan
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
@else
|
|
<div class="px-6 py-10 text-center">
|
|
<svg class="w-12 h-12 mx-auto text-gray-300 mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13"/></svg>
|
|
<p class="text-sm text-gray-400">{{ __('attachment.no_attachments') }}</p>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Image Preview Modal -->
|
|
<div id="imagePreviewModal" class="hidden fixed inset-0 z-50 flex items-center justify-center bg-black/70" onclick="this.classList.add('hidden')">
|
|
<img id="previewImage" src="" alt="Preview" class="max-w-[90vw] max-h-[90vh] rounded-lg shadow-xl">
|
|
</div>
|
|
</div>
|
|
|
|
@push('scripts')
|
|
<script>
|
|
// Preview image
|
|
function previewImage(src) {
|
|
document.getElementById('previewImage').src = src;
|
|
document.getElementById('imagePreviewModal').classList.remove('hidden');
|
|
}
|
|
|
|
// Upload attachment via AJAX
|
|
async function uploadAttachment(input) {
|
|
const files = input.files;
|
|
if (!files.length) return;
|
|
|
|
const formData = new FormData();
|
|
for (let i = 0; i < files.length; i++) {
|
|
formData.append('files[]', files[i]);
|
|
}
|
|
formData.append('attachable_type', input.dataset.attachableType);
|
|
formData.append('attachable_id', input.dataset.attachableId);
|
|
formData.append('category', 'receipt');
|
|
|
|
try {
|
|
const res = await fetch('{{ route("attachments.store") }}', {
|
|
method: 'POST',
|
|
headers: { 'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content, 'Accept': 'application/json' },
|
|
body: formData
|
|
});
|
|
const data = await res.json();
|
|
if (data.success) {
|
|
location.reload();
|
|
} else {
|
|
alert(data.message || '{{ __("common.error") }}');
|
|
}
|
|
} catch (err) {
|
|
alert('{{ __("attachment.upload_failed") }}');
|
|
}
|
|
input.value = '';
|
|
}
|
|
|
|
// Delete attachment
|
|
async function deleteAttachment(id) {
|
|
if (!confirm('{{ __("common.areYouSure") ?? __("common.confirm_delete") }}')) return;
|
|
try {
|
|
const res = await fetch(`/attachments/${id}`, {
|
|
method: 'DELETE',
|
|
headers: { 'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content, 'Accept': 'application/json' }
|
|
});
|
|
const data = await res.json();
|
|
if (data.success) {
|
|
const el = document.getElementById('attachment-' + id);
|
|
if (el) el.remove();
|
|
// Check if list is now empty
|
|
const list = document.getElementById('attachmentList');
|
|
if (list && list.querySelectorAll('[id^="attachment-"]').length === 0) {
|
|
location.reload();
|
|
}
|
|
}
|
|
} catch (err) {
|
|
alert('{{ __("attachment.delete_failed") }}');
|
|
}
|
|
}
|
|
|
|
// Approve / Reject
|
|
async function approveExpense(id) {
|
|
const res = await fetch(`/expenses/${id}/approve`, {
|
|
method: 'PUT',
|
|
headers: { 'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content, 'Accept': 'application/json' }
|
|
});
|
|
if ((await res.json()).success) location.reload();
|
|
}
|
|
async function rejectExpense(id) {
|
|
if (!confirm('{{ __("expense.confirm_reject") }}')) return;
|
|
const res = await fetch(`/expenses/${id}/reject`, {
|
|
method: 'PUT',
|
|
headers: { 'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content, 'Accept': 'application/json' }
|
|
});
|
|
if ((await res.json()).success) location.reload();
|
|
}
|
|
|
|
// Image preview on click for existing images
|
|
document.querySelectorAll('#attachmentList img').forEach(img => {
|
|
img.style.cursor = 'pointer';
|
|
img.addEventListener('click', (e) => {
|
|
e.stopPropagation();
|
|
previewImage(img.src);
|
|
});
|
|
});
|
|
</script>
|
|
@endpush
|
|
@endsection
|