first commit
This commit is contained in:
146
resources/js/Pages/OwnerContracts/Index.vue
Normal file
146
resources/js/Pages/OwnerContracts/Index.vue
Normal file
@@ -0,0 +1,146 @@
|
||||
<template>
|
||||
<AppLayout>
|
||||
<template #breadcrumb>
|
||||
<Link href="/" class="hover:text-[#137fec]">Home</Link>
|
||||
<span class="mx-2">/</span>
|
||||
<span>Owner Contracts</span>
|
||||
</template>
|
||||
|
||||
<div class="space-y-6">
|
||||
<div class="bg-white rounded-xl p-4 border border-slate-200">
|
||||
<div class="flex gap-4">
|
||||
<input
|
||||
v-model="filters.search"
|
||||
@input="filter"
|
||||
type="text"
|
||||
placeholder="Search by building..."
|
||||
class="flex-1 px-4 py-2 border border-slate-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#137fec]"
|
||||
/>
|
||||
<select
|
||||
v-model="filters.status"
|
||||
@change="filter"
|
||||
class="px-4 py-2 border border-slate-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#137fec]"
|
||||
>
|
||||
<option value="">All Status</option>
|
||||
<option value="active">Active</option>
|
||||
<option value="expired">Expired</option>
|
||||
<option value="terminated">Terminated</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="contracts.data.length" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
<div
|
||||
v-for="contract in contracts.data"
|
||||
:key="contract.id"
|
||||
class="bg-white rounded-xl border border-slate-100 overflow-hidden hover:shadow-md transition-shadow"
|
||||
>
|
||||
<div class="p-6 space-y-4">
|
||||
<div class="flex items-start justify-between">
|
||||
<div class="flex-1">
|
||||
<h3 class="font-bold text-slate-900 text-lg">{{ contract.unit.building.building_name }}</h3>
|
||||
<p class="text-slate-500 text-sm">Unit {{ contract.unit.unit_no }}, {{ contract.unit.building.address }}</p>
|
||||
</div>
|
||||
<span
|
||||
class="px-2 py-1 text-xs font-bold rounded-md"
|
||||
:class="{
|
||||
'bg-green-50 text-green-700': contract.status === 'active',
|
||||
'bg-red-50 text-red-700': contract.status === 'expired',
|
||||
'bg-slate-50 text-slate-700': contract.status === 'terminated'
|
||||
}"
|
||||
>
|
||||
{{ contract.status }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2 text-sm">
|
||||
<div class="flex justify-between">
|
||||
<span class="text-slate-500">Owner:</span>
|
||||
<span class="font-medium text-slate-900">{{ contract.person?.name }}</span>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span class="text-slate-500">Contract #:</span>
|
||||
<span class="font-medium text-slate-900">{{ contract.contract_number }}</span>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span class="text-slate-500">Duration:</span>
|
||||
<span class="font-medium text-slate-900">{{ formatDate(contract.start_date) }} - {{ formatDate(contract.end_date) }}</span>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span class="text-slate-500">Amount:</span>
|
||||
<span class="font-bold text-[#137fec]">AED {{ formatMoney(contract.total_amount) }}</span>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span class="text-slate-500">Payments:</span>
|
||||
<span class="font-medium text-slate-900">{{ contract.payments?.length || 0 }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex gap-2 pt-4 border-t border-slate-100">
|
||||
<Link
|
||||
:href="`/owner-contracts/${contract.id}`"
|
||||
class="flex-1 text-center px-4 py-2 bg-[#137fec] text-white rounded-lg text-sm font-medium hover:bg-[#137fec]/90 transition-colors"
|
||||
>
|
||||
View
|
||||
</Link>
|
||||
<button
|
||||
@click="deleteContract(contract.id)"
|
||||
class="px-4 py-2 border border-red-200 text-red-600 rounded-lg text-sm font-medium hover:bg-red-50 transition-colors"
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else class="text-center py-12 text-slate-500">
|
||||
No contracts found
|
||||
</div>
|
||||
|
||||
<div v-if="contracts.links.length > 3" class="flex justify-center gap-2">
|
||||
<Link
|
||||
v-for="link in contracts.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'
|
||||
|
||||
const props = defineProps({
|
||||
contracts: Object
|
||||
})
|
||||
|
||||
const filters = ref({
|
||||
search: '',
|
||||
status: ''
|
||||
})
|
||||
|
||||
const filter = () => {
|
||||
router.get('/owner-contracts', filters.value, { preserveState: true })
|
||||
}
|
||||
|
||||
const deleteContract = (id) => {
|
||||
if (confirm('Delete this contract?')) {
|
||||
router.delete(`/owner-contracts/${id}`)
|
||||
}
|
||||
}
|
||||
|
||||
const formatDate = (date) => {
|
||||
return new Date(date).toLocaleDateString('en-GB')
|
||||
}
|
||||
|
||||
const formatMoney = (amount) => {
|
||||
return new Intl.NumberFormat('en-US').format(amount)
|
||||
}
|
||||
</script>
|
||||
171
resources/js/Pages/OwnerContracts/Show.vue
Normal file
171
resources/js/Pages/OwnerContracts/Show.vue
Normal file
@@ -0,0 +1,171 @@
|
||||
<template>
|
||||
<AppLayout>
|
||||
<template #breadcrumb>
|
||||
<Link href="/" class="hover:text-[#137fec]">Home</Link>
|
||||
<span class="mx-2">/</span>
|
||||
<Link :href="`/${contract.contract_type}-contracts`" class="hover:text-[#137fec]">
|
||||
{{ contract.contract_type === 'owner' ? 'Owner' : 'Tenant' }} Contracts
|
||||
</Link>
|
||||
<span class="mx-2">/</span>
|
||||
<span>{{ contract.contract_number }}</span>
|
||||
</template>
|
||||
|
||||
<div class="space-y-6">
|
||||
<div class="bg-white rounded-xl border border-slate-200 p-6">
|
||||
<div class="flex items-start justify-between mb-6">
|
||||
<div>
|
||||
<h1 class="text-2xl font-bold text-slate-900">{{ contract.unit.building.building_name }}</h1>
|
||||
<p class="text-slate-500">Unit {{ contract.unit.unit_no }}, {{ contract.unit.building.address }}, {{ contract.unit.building.city }}</p>
|
||||
</div>
|
||||
<span
|
||||
class="px-3 py-1 text-sm font-bold rounded-md"
|
||||
:class="{
|
||||
'bg-green-50 text-green-700': contract.status === 'active',
|
||||
'bg-red-50 text-red-700': contract.status === 'expired',
|
||||
'bg-slate-50 text-slate-700': contract.status === 'terminated'
|
||||
}"
|
||||
>
|
||||
{{ contract.status }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-2 md:grid-cols-3 gap-6">
|
||||
<div>
|
||||
<p class="text-sm text-slate-500 mb-1">Contract Number</p>
|
||||
<p class="font-medium text-slate-900">{{ contract.contract_number }}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-sm text-slate-500 mb-1">Ejari Number</p>
|
||||
<p class="font-medium text-slate-900">{{ contract.ejari_no }}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-sm text-slate-500 mb-1">{{ contract.contract_type === 'owner' ? 'Owner' : 'Tenant' }}</p>
|
||||
<p class="font-medium text-slate-900">{{ contract.person.name }}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-sm text-slate-500 mb-1">Phone</p>
|
||||
<p class="font-medium text-slate-900">{{ contract.person.phone }}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-sm text-slate-500 mb-1">Start Date</p>
|
||||
<p class="font-medium text-slate-900">{{ formatDate(contract.start_date) }}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-sm text-slate-500 mb-1">End Date</p>
|
||||
<p class="font-medium text-slate-900">{{ formatDate(contract.end_date) }}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-sm text-slate-500 mb-1">Duration</p>
|
||||
<p class="font-medium text-slate-900">{{ contract.duration_months }} months</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-sm text-slate-500 mb-1">Total Amount</p>
|
||||
<p class="font-bold text-[#137fec] text-lg">AED {{ formatMoney(contract.total_amount) }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="contract.subunits?.length" class="mt-6 pt-6 border-t border-slate-200">
|
||||
<p class="text-sm text-slate-500 mb-2">Subunits</p>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<span v-for="sub in contract.subunits" :key="sub.id" class="px-3 py-1 bg-slate-100 text-slate-700 rounded-md text-sm">
|
||||
{{ sub.subunit_type }} {{ sub.subunit_no }} ({{ sub.area_sqft }} sqft)
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="contract.unit.assets?.length" class="mt-6 pt-6 border-t border-slate-200">
|
||||
<p class="text-sm text-slate-500 mb-2">Assets</p>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<span v-for="asset in contract.unit.assets" :key="asset" class="px-3 py-1 bg-blue-50 text-blue-700 rounded-md text-sm">
|
||||
{{ asset }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="contract.notes" class="mt-6 pt-6 border-t border-slate-200">
|
||||
<p class="text-sm text-slate-500 mb-2">Notes</p>
|
||||
<p class="text-slate-900">{{ contract.notes }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl border border-slate-200 overflow-hidden">
|
||||
<div class="p-6 border-b border-slate-200">
|
||||
<h2 class="text-lg font-bold text-slate-900">Payments ({{ contract.payments.length }})</h2>
|
||||
</div>
|
||||
|
||||
<div v-if="contract.payments.length" class="overflow-x-auto">
|
||||
<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">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 contract.payments" :key="payment.id" class="hover:bg-slate-50">
|
||||
<td class="px-6 py-4">
|
||||
<span class="px-2 py-1 bg-slate-100 text-slate-700 rounded text-xs font-medium">{{ 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-else class="p-12 text-center text-slate-500">
|
||||
No payments added yet
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex gap-4">
|
||||
<Link
|
||||
:href="`/${contract.contract_type}-contracts`"
|
||||
class="px-6 py-3 border border-slate-200 text-slate-600 rounded-lg font-medium hover:bg-slate-50 transition-colors"
|
||||
>
|
||||
Back
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</AppLayout>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { Link } from '@inertiajs/vue3'
|
||||
import AppLayout from '@/Layouts/AppLayout.vue'
|
||||
|
||||
defineProps({
|
||||
contract: Object
|
||||
})
|
||||
|
||||
const formatDate = (date) => {
|
||||
return new Date(date).toLocaleDateString('en-GB')
|
||||
}
|
||||
|
||||
const formatMoney = (amount) => {
|
||||
return new Intl.NumberFormat('en-US').format(amount)
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user