KoPKB/E-Vote
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
9684de5071e94b26fec9d84dc172013a33ed344a
E-Vote/resources/assets/js/components/demo/admin/admin/pembiayaan.vue
T
hayatie 9684de5071 add contract-formpage
2025-11-05 15:55:01 +08:00

453 lines
16 KiB
Vue
Raw Blame History

<template>
<div class="pembiayaan-wrapper">
<form @submit.prevent="goNext" class="two-column-form">
<!-- Your content starts here -->
<div class="container">
<div class="row justify-content-center">
<div class="col-md-10 col-lg-8">
<!-- Header -->
<div class="text-center mb-4">
<div class="d-flex align-items-center justify-content-center mb-2">
<img src="/images/KoPKB_Logo.png" alt="KoPKB Logo" class="kopkb-logo me-2" />
<h4 class="mb-0 fw-bold">Koperasi Permodalan Kelantan Berhad (KoPKB)</h4>
</div>
<h5 class="text-primary fw-semibold mt-2">Borang Permohonan Pembiayaan Murabahah</h5>
</div>
</div>
</div>
</div>
</form>
<!-- Maklumat Pemohon -->
<section class="mb-4">
<h5 class="section-title mb-3">Maklumat Pemohon</h5>
<div class="row">
<!-- Nama Penuh -->
<div class="col-md-6 mb-3">
<label for="nama" class="form-label">Nama Penuh:</label>
<input
type="text"
id="nama"
v-model="form.nama"
class="form-control"
placeholder="Masukkan nama penuh"
required
/>
</div>
<!-- No. Kad Pengenalan -->
<div class="col-md-6 mb-3">
<label for="kp" class="form-label">No. Kad Pengenalan:</label>
<input
type="text"
id="kp"
v-model="form.kp"
class="form-control"
placeholder="Masukkan no. kad pengenalan"
required
/>
</div>
<!-- No. Akaun Bank -->
<div class="col-md-6 mb-3">
<label for="akaun" class="form-label">No. Akaun Bank:</label>
<input
type="text"
id="akaun"
v-model="form.akaun"
class="form-control"
placeholder="Masukkan no. akaun bank"
required
/>
</div>
<!-- Tarikh Permohonan -->
<div class="col-md-6 mb-3">
<label for="tarikh" class="form-label">Tarikh Permohonan:</label>
<input
type="date"
id="tarikh"
v-model="form.tarikh"
class="form-control"
required
/>
</div>
</div>
</section>
<hr>
<p> Sukacita dimaklumkan bahawa <b>Koperasi Permodalan Kelantan Berhad </b>(selepas ini disebut sebagai <b>"Koperasi")</b> akan menawarkan kemudahan pembiayaan
<span contenteditable="true" style="border-bottom: 1px solid #000; padding: 2px 40px; display: inline-block;">&nbsp;</span>
kepada tuan/puan tertakluk kepada syarat seperti berikut:
</p>
<!-- Maklumat Pembiayaan -->
<section class="mb-4">
<h5 class="section-title mb-4">Maklumat Pembiayaan</h5>
<div class="row mb-3 align-items-center">
<div class="col-md-4">
<label class="col-form-label">KONSEP SYARIAH:</label>
</div>
<div class="col-md-8">
<p class="form-control-plaintext mb-0">Tawarruq</p>
</div>
</div>
<div class="row mb-3 align-items-center">
<div class="col-md-4">
<label for="jumlah_pembiayaan" class="col-form-label">JUMLAH PEMBIAYAAN (RM):</label>
</div>
<div class="col-md-8">
<p class="form-control-plaintext mb-0"> RM <span contenteditable="true" style="border-bottom: 1px solid #000; padding: 2px 40px; display: inline-block;">&nbsp;</span> (a) </p>
</div>
</div>
<div class="row mb-3 align-items-center">
<div class="col-md-4">
<label for="kadar_keuntungan" class="col-form-label">KADAR KEUNTUNGAN (%):</label>
</div>
<div class="col-md-8">
<p class="form-control-plaintext mb-0"> <span contenteditable="true" style="border-bottom: 1px solid #000; padding: 2px 40px; display: inline-block;">&nbsp;</span> % keuntungan </p>
</div>
</div>
<div class="row mb-3 align-items-center">
<div class="col-md-4">
<label for="jumlah_keuntungan" class="col-form-label">JUMLAH KEUNTUNGAN (RM):</label>
</div>
<div class="col-md-8">
<p class="form-control-plaintext mb-0"> RM <span contenteditable="true" style="border-bottom: 1px solid #000; padding: 2px 40px; display: inline-block;">&nbsp;</span> (b) </p>
</div>
</div>
<div class="row mb-3 align-items-center">
<div class="col-md-4">
<label for="harga_jualan_tangguh" class="col-form-label">HARGA JUALAN TANGGUH(RM):</label>
</div>
<div class="col-md-8">
<p class="form-control-plaintext mb-0"> RM <span contenteditable="true" style="border-bottom: 1px solid #000; padding: 2px 40px; display: inline-block;">&nbsp;</span> (a + b) </p>
</div>
</div>
<div class="row mb-3 align-items-center">
<div class="col-md-4">
<label for="komoditi" class="col-form-label">MAKLUMAT KOMODITI:</label>
</div>
<div class="col-md-8">
<p class="form-control-plaintext mb-0">Crude Palm Oil </p>
</div>
</div>
<div class="row mb-3 align-items-center">
<div class="col-md-4">
<label for="tempoh_perjanjian" class="col-form-label">TEMPOH PERJANJIAN PEMBIAYAN :</label>
</div>
<div class="col-md-8">
<p class="form-control-plaintext mb-0"> <span contenteditable="true" style="border-bottom: 1px solid #000; padding: 2px 40px; display: inline-block;">&nbsp;</span> TAHUN/ <span contenteditable="true" style="border-bottom: 1px solid #000; padding: 2px 40px; display: inline-block;">&nbsp;</span> BULAN </p>
</div>
</div>
<div class="row mb-3 align-items-center">
<div class="col-md-4">
<label for="bayaran_ansuran" class="col-form-label">BAYARAN ANSURAN (RM):</label>
</div>
<div class="col-md-8">
<p class="form-control-plaintext mb-0"> RM <span contenteditable="true" style="border-bottom: 1px solid #000; padding: 2px 40px; display: inline-block;">&nbsp;</span> Sebulan bermula bulan <span contenteditable="true" style="border-bottom: 1px solid #000; padding: 2px 40px; display: inline-block;">&nbsp;</span> Tahun <span contenteditable="true" style="border-bottom: 1px solid #000; padding: 2px 40px; display: inline-block;">&nbsp;</span> sehingga bulan <span contenteditable="true" style="border-bottom: 1px solid #000; padding: 2px 40px; display: inline-block;">&nbsp;</span> tahun <span contenteditable="true" style="border-bottom: 1px solid #000; padding: 2px 40px; display: inline-block;">&nbsp;</span>. Bayaran akhir sebanyak RM <span contenteditable="true" style="border-bottom: 1px solid #000; padding: 2px 40px; display: inline-block;">&nbsp;</span> pada bulan <span contenteditable="true" style="border-bottom: 1px solid #000; padding: 2px 40px; display: inline-block;">&nbsp;</span> tahun <span contenteditable="true" style="border-bottom: 1px solid #000; padding: 2px 40px; display: inline-block;">&nbsp;</span>. </p>
</div>
</div>
<div class="row mb-3 align-items-start">
<div class="col-md-4">
<label class="col-form-label">KAEDAH / CARA BAYARAN:</label>
</div>
<div class="col-md-8">
<div class="form-control-plaintext">
Ansuran bulanan dibayar melalui potongan gaji anggota ATAU Bayaran melalui:
<span contenteditable="true"
style="border-bottom: 1px solid #000; padding: 2px 40px; display: inline-block; min-width: 150px;">
&nbsp;
</span>
</div>
</div>
</div>
</section>
<!-- Penjamin (3 fields) -->
<!-- Penjamin 1 -->
<div class="row mb-3">
<div class="col-md-4">
<label class="col-form-label">PENJAMIN 1:</label>
</div>
<div class="col-md-8">
<div class="mb-2">
<input v-model="form.penjamin1_nama" placeholder="Nama Penjamin" class="form-control form-control-lg" required />
</div>
<div class="mb-2">
<input v-model="form.penjamin1_kp" placeholder="No. Kad Pengenalan" class="form-control form-control-lg" required />
</div>
<div>
<input v-model="form.penjamin1_anggota" placeholder="No. Anggota" class="form-control form-control-lg" required />
</div>
</div>
</div>
<div class="row mb-3">
<div class="col-md-4">
<label class="col-form-label">PENJAMIN 2:</label>
</div>
<div class="col-md-8">
<div class="mb-2">
<input v-model="form.penjamin1_nama" placeholder="Nama Penjamin" class="form-control form-control-lg" required />
</div>
<div class="mb-2">
<input v-model="form.penjamin1_kp" placeholder="No. Kad Pengenalan" class="form-control form-control-lg" required />
</div>
<div>
<input v-model="form.penjamin1_anggota" placeholder="No. Anggota" class="form-control form-control-lg" required />
</div>
</div>
</div>
<div class="row mb-3">
<div class="col-md-4">
<label class="col-form-label">PENJAMIN 3:</label>
</div>
<div class="col-md-8">
<div class="mb-2">
<input v-model="form.penjamin1_nama" placeholder="Nama Penjamin" class="form-control form-control-lg" required />
</div>
<div class="mb-2">
<input v-model="form.penjamin1_kp" placeholder="No. Kad Pengenalan" class="form-control form-control-lg" required />
</div>
<div>
<input v-model="form.penjamin1_anggota" placeholder="No. Anggota" class="form-control form-control-lg" required />
</div>
</div>
</div>
<br>
<!-- Full Width Fields -->
<div class="row mb-3 align-items-start">
<div class="col-md-4">
<label for="penyelesaian_awal" class="col-form-label">PENYELESAIAN PEMBIAYAAN AWAL:</label>
</div>
<div class="col-md-8">
<p class="form-control-plaintext mb-0">Tuan/Puan boleh membuat penyelesaian pembiayaan awal dengan menjelaskan harga jualan sepenuhnya pada bila -bila masa sebelum tempoh perjanjian pembiayaan tamat .dan Koperasi berhak untuk memberikan Ibra' (rehat) kepada Tuan/Puan diatas penjelasan awal tersebut . Formula bagi penyelesaian awal pembiayaan adalah seperti berikut : <br> <b> Jumlah Penyelesaian Awal= Harga Jualan -Jumlah Ansuranyang telah dibayar -Keuntungan Belum Terakru . </b></br></p>
</div>
</div>
<div class="row mb-3 align-items-start">
<div class="col-md-4">
<label for="perlanggaran_perjanjian" class="col-form-label">PERLANGGARAN PERJANJIAN:</label>
</div>
<div class="col-md-8">
<p class="form-control-plaintext mb-0">i) Tuan/Puan dianggap melanggar perjanjian ini sekiranya:</p>
<ul class="form-control-plaintext mb-0" style="list-style-type: lower-alpha; padding-left: 20px;">
<li>Gagal membuat bayaran ansuran lebih dari tiga (3) bulan; atau</li>
<li>Berhenti daripada menjadi anggota / ahli koperasi dalam tempoh perjanjian atau sehingga seluruh Harga Jualan Tangguh diselesaikan sepenuhnya.</li>
</ul>
<p style="text-align: justify;"> ii) Sekiranya Tuan/Puan didapati melakukan perkara diatas, pihak Koperasi berhak untuk menuntut baki Harga Jualan Tangguh dan Yuran,Saham atau Simpanan oleh Tuan/Puan di Koperasi. </p>
<p style="text-align: justify;"> iii) Tuan/Puan membenarkan pihak Koperasi untuk menuntut segala kos , perbelanjaan, bayaran ganti rugi dan sebagainya yang berkaiatn dengan usaha Koperasi untuk mendapatkan hak Harga Jualan Tangguh sekiranya berlaku perlanggaran perjanjian ini.</p>
</div>
</div>
<div class="row mb-3 align-items-start">
<div class="col-md-4">
<label for="penyampaian proses" class="col-form-label">PENYAMPAIAN PROSES PERUNDANGAN:</label>
</div>
<div class="col-md-8">
<p class="form-control-plaintext mb-0" style="text-align: justify;"></p> Penyampaian semua proses undang - undang adalah dianggap telah disampaikan dan diterima sekiranya telah diposkan melalui pos berdaftar yang dialamatkan kepada Tuan/Puan dialamat yang dinyatakan dalam surat tawaran ini atau kepada alamat terakhiryang diberikan oleh Tuan/Puan secara bertulis kepada kami dan proses tersebut sama ada sama tau sebaliknya adalah dianggap telah disampaikan dan diterima selepas tiga (3) hari ia diposkan . </p>
</div>
</div>
<div class="row mb-3 align-items-start">
<div class="col-md-4">
<label for="penyampaian proses" class="col-form-label">SYARAT -SYARAT LAIN :</label>
</div>
<div class="col-md-8">
<p class="form-control-plaintext mb-0" style="text-align: justify;"></p> Koperasi berhak memaklumkan sttaus / kedudukan pembiayaan ini kepada penjamin - penjamin pada bila-bila masa diperlukan sama ada bertulis atau lisan , jika berkenaan.
</div>
</div>
<section>
<br>
<!-- Akuan & Persetujuan -->
<!-- <section class="mb-4">
<h5 class="section-title">Akuan & Persetujuan</h5> -->
<p class="text-secondary"></p>
Tuan/Puan dikehendaki menandatangani kesemua dokumen yang berkaitan dalam tempoh tiga puluh (30) hari dari tarikh yang dinyatakan di Surat Tawaran ini .Segala bayaran guaman dan perbelanjaan yang bersangkutan dengan urusan ini adalah di atas tanggungan Tuan/Puan walaupon Tuan/Puan memutuskan untuk tidak meneruskan urusna dokumentasi ini , selepas menandatangani tawaran ini.
<br>
<p class="text-secondary"></p>Sekiranya pihak kami tiada menerima sebarang maklumbalas daripada pihak Tuan/Puan dalam tempoh yang ditetapkan,maka dengan sendirinya tawaran ini terbatal.
<br>
<p class="text-secondary">Sekian, terima kasih.</p>
<div class="text-left mt-4">
<p>Yang benar,</p>
<!-- Space for signature -->
<div class="my-5" style="height: 50px;"></div>
-------------------------------------
<p><strong>Pengurus Besar</strong></p>
<p>Koperasi Permodalan Kelantan Berhad</p>
</div>
</section>
<!-- Pengakuan -->
<section class="mb-4">
<h5 class="section-title">PENERIMAAN</h5>
<label class="d-flex align-items-center">
<!-- <input type="checkbox" v-model="form.setuju" required class="me-2" /> -->
Saya/Kami bersetuju menerima tawaran ini dengan syarat -syarat seperti di atas . <br>Saya/Kami juga mengaku bahawa semua maklumat yang telah diberikan dalah tepat, dan masih menjadi seorang anggota /ahli Koperasi semasa menerima tawaran ini .
</label>
<form class="two-column-form">
<div class="form-group">
<label for="sign">Sign:</label>
<input id="sign" v-model="form.sign" required />
</div>
<div class="form-group">
<label for="nama">Nama Penuh:</label>
<input id="nama" v-model="form.nama" required />
</div>
<div class="form-group">
<label for="nokp">No K/P:</label>
<input id="nokp" v-model="form.nokp" required />
</div>
<div class="form-group">
<label for="tarikh">Tarikh:</label>
<input type="date" id="tarikh" v-model="form.tarikh" required />
</div>
</form>
<div class="button-container">
<router-link to="/beliankomoditi" class="btn btn-primary px-4">
Seterusnya
</router-link>
</div>
</section>
</div>
<!-- </form> -->
</template>
<script>
export default {
name: 'PembiayaanForm',
data() {
return {
form: {
nama: '',
kp: '',
akaun: '',
jumlah: '',
tujuan: '',
komoditi: '',
setuju: false,
tarikh: '',
tandatangan: '',
}
}
},
methods: {
goToBeliankomoditi() {
// Navigate to the belian komoditi page
this.$router.push('/beliankomoditi');
}
}
}
</script>
<style scoped>
.section-title {
background-color: #f8f9fa;
padding: 6px 10px;
border-left: 4px solid #007bff;
border-radius: 4px;
font-weight: 600;
}
.kopkb-logo {
width: 300px;
height: auto;
}
label {
display: block;
margin-top: 10px;
font-weight: 500;
}
input, textarea {
width: 90%;
padding: 8px;
border: 1px solid #ccc;
border-radius: 6px;
margin-top: 4px;
}
button {
margin-top: 15px;
}
.section-title {
background-color: #f8f9fa;
padding: 6px 10px;
border-left: 4px solid #007bff;
border-radius: 4px;
font-weight: 600;
}
.two-column-form {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px 40px;
max-width: 800px;
margin: 20px auto;
background: #f9f9f9;
padding: 20px 30px;
border-radius: 8px;
border: 1px solid #ddd;
}
.form-group {
display: flex;
flex-direction: column;
}
label {
font-weight: 600;
margin-bottom: 6px;
color: #333;
}
input {
padding: 8px 10px;
border: 1px solid #ccc;
border-radius: 4px;
}
input:focus {
border-color: #007bff;
outline: none;
}
.button-container {
display: flex;
justify-content: flex-end;
margin-top: 20px;
}
</style>
Reference in New Issue View Git Blame Copy Permalink