Yusuf-Sabuwala/real-estate
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
Yusuf Sabuwala
2026-01-11 17:11:43 +00:00
commit 55bf184d53
157 changed files with 20499 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

104
resources/js/Pages/Payments/Index.vue Normal file
View File

@@ -0,0 +1,104 @@
<template>
<AppLayout>
<template #breadcrumb>
<Link href="/" class="hover:text-[#137fec]">Home</Link>
<span class="mx-2">/</span>
<span>Payments</span>
</template>
<div class="space-y-6">
<h1 class="text-2xl font-bold text-slate-900">All Payments</h1>
<div class="bg-white rounded-xl p-4 border border-slate-200">
<div class="flex gap-4">
<select v-model="filters.type" @change="filter" class="px-4 py-2 border border-slate-200 rounded-lg focus:ring-2 focus:ring-[#137fec]">
<option value="">All Types</option>
<option value="cheque">Cheque</option>
<option value="online">Online</option>
<option value="cash">Cash</option>
</select>
<select v-model="filters.status" @change="filter" class="px-4 py-2 border border-slate-200 rounded-lg focus:ring-2 focus:ring-[#137fec]">
<option value="">All Status</option>
<option value="pending">Pending</option>
<option value="collected">Collected</option>
<option value="cleared">Cleared</option>
<option value="bounced">Bounced</option>
</select>
</div>
</div>
<div class="bg-white rounded-xl border border-slate-200 overflow-hidden">
<table class="w-full">
<thead class="bg-slate-50">
<tr>
<th class="px-6 py-3 text-left text-xs font-semibold text-slate-600 uppercase">Contract</th>
<th class="px-6 py-3 text-left text-xs font-semibold text-slate-600 uppercase">Property</th>
<th class="px-6 py-3 text-left text-xs font-semibold text-slate-600 uppercase">Type</th>
<th class="px-6 py-3 text-left text-xs font-semibold text-slate-600 uppercase">Details</th>
<th class="px-6 py-3 text-left text-xs font-semibold text-slate-600 uppercase">Amount</th>
<th class="px-6 py-3 text-left text-xs font-semibold text-slate-600 uppercase">Due Date</th>
<th class="px-6 py-3 text-left text-xs font-semibold text-slate-600 uppercase">Status</th>
</tr>
</thead>
<tbody class="divide-y divide-slate-200">
<tr v-for="payment in payments.data" :key="payment.id" class="hover:bg-slate-50">
<td class="px-6 py-4 text-sm font-medium text-slate-900">{{ payment.contract.contract_number }}</td>
<td class="px-6 py-4 text-sm text-slate-900">{{ payment.contract.unit.building.building_name }} - Unit {{ payment.contract.unit.unit_no }}</td>
<td class="px-6 py-4"><span class="px-2 py-1 text-xs font-bold rounded-md bg-slate-100 text-slate-700">{{ payment.payment_type }}</span></td>
<td class="px-6 py-4 text-sm text-slate-900">
<div v-if="payment.payment_type === 'cheque'">
<p>{{ payment.payment_number }}</p>
<p class="text-xs text-slate-500">{{ payment.bank_name }}</p>
</div>
<span v-else>-</span>
</td>
<td class="px-6 py-4 text-sm font-medium text-slate-900">AED {{ formatMoney(payment.amount) }}</td>
<td class="px-6 py-4 text-sm text-slate-900">{{ formatDate(payment.due_date) }}</td>
<td class="px-6 py-4">
<span
class="px-2 py-1 text-xs font-bold rounded-md"
:class="{
'bg-green-50 text-green-700': payment.status === 'cleared',
'bg-yellow-50 text-yellow-700': payment.status === 'pending',
'bg-blue-50 text-blue-700': payment.status === 'collected',
'bg-red-50 text-red-700': payment.status === 'bounced'
}"
>
{{ payment.status }}
</span>
</td>
</tr>
</tbody>
</table>
</div>
<div v-if="payments.links.length > 3" class="flex justify-center gap-2">
<Link
v-for="link in payments.links"
:key="link.label"
:href="link.url"
v-html="link.label"
class="px-4 py-2 border rounded-lg text-sm"
:class="link.active ? 'bg-[#137fec] text-white border-[#137fec]' : 'border-slate-200 text-slate-600 hover:bg-slate-50'"
/>
</div>
</div>
</AppLayout>
</template>
<script setup>
import { ref } from 'vue'
import { Link, router } from '@inertiajs/vue3'
import AppLayout from '@/Layouts/AppLayout.vue'
defineProps({ payments: Object })
const filters = ref({ type: '', status: '' })
const filter = () => {
router.get(route('payments.index'), filters.value, { preserveState: true })
}
const formatDate = (date) => new Date(date).toLocaleDateString('en-GB')
const formatMoney = (amount) => new Intl.NumberFormat('en-US').format(amount)
</script>