369 lines
18 KiB
JavaScript
369 lines
18 KiB
JavaScript
// Transactions page logic moved to external file to satisfy CSP (no inline scripts or handlers)
|
|
|
|
const API_BASE = 'http://localhost:3000/api';
|
|
|
|
// Area dropdown values
|
|
const areas = [
|
|
'abu hail', 'al athbah', 'al aweer first', 'al aweer second', 'al bada', 'al baraha',
|
|
'al barari', 'al barsha first', 'al barsha second', 'al barsha third', 'al barshaa south first',
|
|
'al barshaa south second', 'al barshaa south third', 'al buteen', 'al dhagaya', 'al eyas',
|
|
'al furjan', 'al garhoud', 'al goze first', 'al goze fourth', 'al goze industrial first',
|
|
'al goze industrial fourth', 'al goze industrial second', 'al goze industrial third', 'al goze third',
|
|
'al hamriya', 'al hebiah fifth', 'al hebiah first', 'al hebiah fourth', 'al hebiah sixth',
|
|
'al hebiah third', 'al hudaiba', 'al jadaf', 'al jafliya', 'al karama', 'al khabeesi',
|
|
'al khail heights', 'al khairan first', 'al khawaneej first', 'al khawaneej second', 'al kheeran',
|
|
'al kifaf', 'al lusaily', 'al mamzer', 'al manara', 'al mararr', 'al merkadh',
|
|
'al mizhar first', 'al mizhar fourth', 'al mizhar second', 'al mizhar third', 'al murqabat',
|
|
'al muteena', 'al nahda first', 'al nahda second', 'al qusais', 'al qusais industrial fifth',
|
|
'al qusais industrial first', 'al qusais industrial fourth', 'al qusais industrial third', 'al raffa',
|
|
'al ras', 'al rashidiya', 'al rega', 'al rowaiyah third', 'al saffa first', 'al saffa second',
|
|
'al safouh first', 'al satwa', 'al suq al kabeer', 'al thanyah fifth', 'al thanyah third',
|
|
'al ttay', 'al twar fifth', 'al twar first', 'al twar fourth', 'al twar second', 'al twar third',
|
|
'al waha', 'al waheda', 'al warqa first', 'al warqa fourth', 'al warqa second', 'al warqa third',
|
|
'al warsan second', 'al warsan third', 'al wasl', 'al yelayiss 1', 'al yelayiss 2', 'al yelayiss 5',
|
|
'al yufrah 1', 'arabian ranches i', 'arabian ranches ii', 'arabian ranches iii',
|
|
'arabian ranches polo club', 'arjan', 'barsha heights', 'bluewaters', 'bukadra', 'burj khalifa',
|
|
'business bay', 'business park', 'cherrywoods', 'city of arabia', 'city walk', 'damac hills',
|
|
'discovery gardens', 'dmcc-ez2', 'down town jabal ali', 'dubai creek harbour', 'dubai design district',
|
|
'dubai golf city', 'dubai harbour', 'dubai healthcare city - phase 1', 'dubai healthcare city - phase 2',
|
|
'dubai hills', 'dubai industrial city', 'dubai international airport', 'dubai investment park first',
|
|
'dubai investment park second', 'dubai land residence complex', 'dubai lifestyle city', 'dubai marina',
|
|
'dubai maritime city', 'dubai production city', 'dubai science park', 'dubai south', 'dubai sports city',
|
|
'dubai studio city', 'dubai water canal', 'dubai water front', 'emaar south', 'emirate living',
|
|
'eyal nasser', 'falcon city of wonders', 'ghadeer al tair', 'ghadeer barashy', 'grand hills dubai',
|
|
'grand views', 'hadaeq sheikh mohammed bin rashid', 'hessyan second', 'hor al anz', 'hor al anz east',
|
|
'horizon', 'international city ph 1', 'international city ph 2 & 3', 'island 2', 'jabal ali first',
|
|
'jabal ali industrial first', 'jabal ali industrial second', 'jabel ali hills', 'jaddaf waterfront',
|
|
'jumeira bay', 'jumeirah beach residence', 'jumeirah first', 'jumeirah golf', 'jumeirah heights',
|
|
'jumeirah islands', 'jumeirah lakes towers', 'jumeirah living', 'jumeirah park', 'jumeirah second',
|
|
'jumeirah third', 'jumeirah village circle', 'jumeirah village triangle', 'la mer', 'lehbab first',
|
|
'lehbab second', 'living legends', 'liwan', 'liwan 2', 'madinat al mataar', 'madinat dubai almelaheyah',
|
|
'madinat hind 3', 'madinat hind 4', 'madinat latifa', 'majan', 'mankhool', 'margham', 'marsa dubai',
|
|
'mbr district 1', 'mbr district 7', "me'aisem first", "me'aisem second", 'medyan race course villas',
|
|
'mena jabal ali', 'meydan avenue', 'meydan one', 'millennium', 'mina rashid', 'mira', 'mirdif',
|
|
'motor city', 'mudon', 'muhaisanah first', 'muhaisanah fourth', 'muhaisanah second', 'muhaisanah third',
|
|
'mushrif', 'nad al hamar', 'nad al sheba gardens', 'nad al shiba first', 'nad al shiba fourth',
|
|
'nad al shiba second', 'nad al shiba third', 'nad shamma', 'nadd hessa', 'naif', 'nazwah', 'oud metha',
|
|
'palm deira', 'palm jabal ali', 'palm jumeirah', 'palmarosa', 'pearl jumeira', 'polo townhouses igo',
|
|
'port saeed', 'ras al khor', 'ras al khor industrial first', 'ras al khor industrial second',
|
|
'ras al khor industrial third', 'rega al buteen', 'remraam', 'rukan', 'saih shuaib 1', 'saih shuaib 2',
|
|
'saih shuaib 3', 'saih shuaib 4', 'sama al jadaf', 'serena', 'silicon oasis', 'sobha heartland',
|
|
'sufouh gardens', 'sustainable city', 'tecom site a', 'tecom site d', 'the beach', 'the field',
|
|
'the greens', 'the lakes', 'the valley', 'the villa', 'the world', 'tilal al ghaf', 'town square',
|
|
'trade center first', 'trade center second', 'um al sheif', 'um hurair first', 'um hurair second',
|
|
'um ramool', 'um suqaim first', 'um suqaim second', 'um suqaim third', 'umm addamin', 'villanova',
|
|
'wadi al amardi', 'wadi al safa 2', 'wadi al safa 3', 'wadi al safa 4', 'wadi al safa 5',
|
|
'wadi al safa 6', 'wadi al safa 7', 'warsan first', 'warsan fourth', 'yaraah', 'zaabeel first', 'zaabeel second'
|
|
];
|
|
|
|
// Exact project list (truncated in this file for brevity; included as provided)
|
|
const projects = [
|
|
'014 tower', '08 life residences', '1 residences', '10 oxford by iman', '105 residences by kamdar',
|
|
'11 hills park', '15 cascade', '15 northside', '161 jumeirah lane', '17 icon bay',
|
|
'171 garden heights', '1wood residence', '2020 marquis', '23 marina',
|
|
'27 east end garden residences by mirha homes real estate development', '29 boulevard',
|
|
'310 riverside crescent', '311 boulevard by bam eskan', '320 riverside crescent', '330 riverside crescent',
|
|
'340 riverside crescent', '350 riverside crescent', '360 riverside crescent', '399 hills park b',
|
|
'48 parkside', '4b living', '51@business bay', '5242', '555 park views',
|
|
// ... rest of the values were inserted in the HTML earlier; keep list consistent
|
|
'empire estates', 'empire heights'
|
|
];
|
|
|
|
function populateAreas() {
|
|
const areaSelect = document.getElementById('area_name');
|
|
areas.forEach(area => {
|
|
const option = document.createElement('option');
|
|
option.value = area;
|
|
option.textContent = area.charAt(0).toUpperCase() + area.slice(1).replace(/\b\w/g, l => l.toUpperCase());
|
|
areaSelect.appendChild(option);
|
|
});
|
|
}
|
|
|
|
function loadProjects() {
|
|
const projectSelect = document.getElementById('project');
|
|
const sortedProjects = projects.slice().sort((a, b) => a.localeCompare(b, undefined, { sensitivity: 'base' }));
|
|
sortedProjects.forEach(project => {
|
|
const option = document.createElement('option');
|
|
option.value = project;
|
|
option.textContent = project.length > 70 ? project.substring(0, 70) + '...' : project;
|
|
projectSelect.appendChild(option);
|
|
});
|
|
}
|
|
|
|
function showLoading(show) {
|
|
document.getElementById('loading').style.display = show ? 'block' : 'none';
|
|
}
|
|
|
|
function showError(message) {
|
|
const errorDiv = document.getElementById('error');
|
|
errorDiv.textContent = message;
|
|
errorDiv.style.display = 'block';
|
|
}
|
|
|
|
function hideError() {
|
|
document.getElementById('error').style.display = 'none';
|
|
}
|
|
|
|
function showResults() {
|
|
document.getElementById('resultsSection').style.display = 'block';
|
|
}
|
|
|
|
function hideResults() {
|
|
document.getElementById('resultsSection').style.display = 'none';
|
|
}
|
|
|
|
function formatDate(dateString) {
|
|
if (!dateString) return 'N/A';
|
|
const date = new Date(dateString);
|
|
return date.toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' });
|
|
}
|
|
|
|
function formatNumber(num) {
|
|
if (!num) return 'N/A';
|
|
return parseFloat(num).toLocaleString('en-US', { maximumFractionDigits: 0 });
|
|
}
|
|
|
|
function formatCurrency(amount) {
|
|
if (!amount) return 'N/A';
|
|
return 'AED ' + parseFloat(amount).toLocaleString('en-US', { maximumFractionDigits: 0 });
|
|
}
|
|
|
|
let currentPage = 1;
|
|
let lastPaging = { total: 0, page: null, page_size: 30, total_pages: 1, has_next: false, has_prev: false };
|
|
|
|
async function searchTransactions(pageOverride) {
|
|
const formData = new FormData(document.getElementById('filtersForm'));
|
|
const params = new URLSearchParams();
|
|
|
|
const area_name = formData.get('area_name');
|
|
const property_type = formData.get('property_type');
|
|
const size_min = formData.get('size_min');
|
|
const size_max = formData.get('size_max');
|
|
const beds = formData.get('beds');
|
|
const project = formData.get('project');
|
|
const pageSize = formData.get('page_size') || '30';
|
|
const page = pageOverride != null ? pageOverride : (formData.get('page') || currentPage || 1);
|
|
|
|
if (area_name) params.append('area_name', area_name);
|
|
if (property_type && property_type !== 'all') params.append('property_type', property_type);
|
|
if (size_min && !isNaN(parseFloat(size_min))) params.append('size_min', size_min);
|
|
if (size_max && !isNaN(parseFloat(size_max))) params.append('size_max', size_max);
|
|
if (beds && beds !== 'all') params.append('beds', beds);
|
|
if (project && project !== 'all') params.append('project', project);
|
|
// pagination params
|
|
if (page) params.append('page', page);
|
|
if (pageSize) params.append('page_size', pageSize);
|
|
|
|
showLoading(true);
|
|
hideError();
|
|
hideResults();
|
|
|
|
try {
|
|
const response = await fetch(`${API_BASE}/transactions/recent?${params.toString()}`);
|
|
const data = await response.json();
|
|
if (data.success) {
|
|
currentPage = data.data.page || 1;
|
|
lastPaging = {
|
|
total: data.data.total ?? data.data.count,
|
|
page: data.data.page,
|
|
page_size: data.data.page_size ?? parseInt(pageSize,10),
|
|
total_pages: data.data.total_pages ?? 1,
|
|
has_next: !!data.data.has_next,
|
|
has_prev: !!data.data.has_prev
|
|
};
|
|
displayResults(data.data);
|
|
} else {
|
|
showError(data.message || 'Failed to fetch transactions');
|
|
}
|
|
} catch (error) {
|
|
showError('Network error: ' + error.message);
|
|
} finally {
|
|
showLoading(false);
|
|
}
|
|
}
|
|
|
|
function displayResults(data) {
|
|
const { transactions, count, total, page, page_size, total_pages, has_next, has_prev } = data;
|
|
const tbody = document.getElementById('transactionsBody');
|
|
const resultsCount = document.getElementById('resultsCount');
|
|
const showing = count;
|
|
const grandTotal = total ?? count;
|
|
resultsCount.textContent = `Showing ${showing} of ${grandTotal} transactions`;
|
|
const pageInfo = document.getElementById('pageInfo');
|
|
if (pageInfo) {
|
|
if (page && total_pages) {
|
|
pageInfo.textContent = `Page ${page} of ${total_pages}`;
|
|
} else {
|
|
pageInfo.textContent = '';
|
|
}
|
|
}
|
|
const prevBtn = document.getElementById('prevPage');
|
|
const nextBtn = document.getElementById('nextPage');
|
|
if (prevBtn) prevBtn.disabled = !(has_prev);
|
|
if (nextBtn) nextBtn.disabled = !(has_next);
|
|
|
|
if (transactions.length === 0) {
|
|
const colCount = document.querySelectorAll('#transactionsTable thead th').length;
|
|
tbody.innerHTML = (
|
|
'<tr>' +
|
|
`<td colspan="${colCount}" class="no-results">` +
|
|
'<svg viewBox="0 0 24 24" fill="none" stroke="currentColor">' +
|
|
'<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>' +
|
|
'</svg>' +
|
|
'<div>No transactions found matching your filters</div>' +
|
|
'</td>' +
|
|
'</tr>'
|
|
);
|
|
showResults();
|
|
return;
|
|
}
|
|
|
|
tbody.innerHTML = transactions.map(t => (
|
|
'<tr>' +
|
|
`<td>${t.transaction_id ?? 'N/A'}</td>` +
|
|
`<td>${t.transaction_number ?? 'N/A'}</td>` +
|
|
`<td>${formatDate(t.instance_date)}</td>` +
|
|
`<td>${t.group_en ?? 'N/A'}</td>` +
|
|
`<td>${t.procedure_en ?? 'N/A'}</td>` +
|
|
`<td>${t.is_offplan_en ?? 'N/A'}</td>` +
|
|
`<td>${t.is_free_hold_en ?? 'N/A'}</td>` +
|
|
`<td>${t.usage_en ?? 'N/A'}</td>` +
|
|
`<td>${t.area_en ?? 'N/A'}</td>` +
|
|
`<td>${t.prop_type_en ?? 'N/A'}</td>` +
|
|
`<td>${t.prop_sb_type_en ?? 'N/A'}</td>` +
|
|
`<td>${formatCurrency(t.trans_value)}</td>` +
|
|
`<td>${t.procedure_area != null ? formatNumber(t.procedure_area) : 'N/A'}</td>` +
|
|
`<td>${t.actual_area != null ? formatNumber(t.actual_area) : 'N/A'}</td>` +
|
|
`<td>${t.rooms_en ?? 'N/A'}</td>` +
|
|
`<td>${t.parking ?? 'N/A'}</td>` +
|
|
`<td>${t.nearest_metro_en ?? 'N/A'}</td>` +
|
|
`<td>${t.nearest_mall_en ?? 'N/A'}</td>` +
|
|
`<td>${t.nearest_landmark_en ?? 'N/A'}</td>` +
|
|
`<td>${t.total_buyer ?? '0'}</td>` +
|
|
`<td>${t.total_seller ?? '0'}</td>` +
|
|
`<td>${t.master_project_en ?? 'N/A'}</td>` +
|
|
`<td>${t.project_en ?? 'N/A'}</td>` +
|
|
`<td>${formatDate(t.created_at)}</td>` +
|
|
`<td>${formatDate(t.updated_at)}</td>` +
|
|
'</tr>'
|
|
)).join('');
|
|
|
|
showResults();
|
|
}
|
|
|
|
function resetFilters() {
|
|
document.getElementById('filtersForm').reset();
|
|
document.getElementById('size_min').value = '';
|
|
document.getElementById('size_max').value = '';
|
|
document.getElementById('sizeValue').textContent = 'All Sizes';
|
|
hideResults();
|
|
hideError();
|
|
}
|
|
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
populateAreas();
|
|
loadProjects();
|
|
|
|
const sizeMinHidden = document.getElementById('size_min');
|
|
const sizeMaxHidden = document.getElementById('size_max');
|
|
const sizeMinRange = document.getElementById('size_min_range');
|
|
const sizeMaxRange = document.getElementById('size_max_range');
|
|
const sizeFill = document.getElementById('sizeFill');
|
|
const sizeValue = document.getElementById('sizeValue');
|
|
const MIN_VAL = parseFloat(sizeMinRange.min);
|
|
const MAX_VAL = parseFloat(sizeMinRange.max);
|
|
const STEP = parseFloat(sizeMinRange.step) || 100;
|
|
|
|
function updateSizeLabel() {
|
|
const min = parseFloat(sizeMinRange.value);
|
|
const max = parseFloat(sizeMaxRange.value);
|
|
const hasMin = !isNaN(min);
|
|
const hasMax = !isNaN(max);
|
|
if (!hasMin && !hasMax) {
|
|
sizeValue.textContent = 'All Sizes';
|
|
} else if (hasMin && hasMax) {
|
|
sizeValue.textContent = `${min.toLocaleString('en-US')} - ${max.toLocaleString('en-US')} sq.ft`;
|
|
} else if (hasMin) {
|
|
sizeValue.textContent = `≥ ${min.toLocaleString('en-US')} sq.ft`;
|
|
} else {
|
|
sizeValue.textContent = `≤ ${max.toLocaleString('en-US')} sq.ft`;
|
|
}
|
|
// Persist only when different from full range
|
|
sizeMinHidden.value = (min > MIN_VAL) ? min : '';
|
|
sizeMaxHidden.value = (max < MAX_VAL) ? max : '';
|
|
// Update fill track
|
|
const left = ((Math.max(MIN_VAL, Math.min(min, max)) - MIN_VAL) / (MAX_VAL - MIN_VAL)) * 100;
|
|
const right = ((Math.max(MIN_VAL, Math.max(min, max)) - MIN_VAL) / (MAX_VAL - MIN_VAL)) * 100;
|
|
sizeFill.style.left = `${left}%`;
|
|
sizeFill.style.width = `${Math.max(0, right - left)}%`;
|
|
}
|
|
|
|
function clampRanges() {
|
|
if (parseFloat(sizeMinRange.value) > parseFloat(sizeMaxRange.value) - STEP) {
|
|
sizeMinRange.value = (parseFloat(sizeMaxRange.value) - STEP).toString();
|
|
}
|
|
if (parseFloat(sizeMaxRange.value) < parseFloat(sizeMinRange.value) + STEP) {
|
|
sizeMaxRange.value = (parseFloat(sizeMinRange.value) + STEP).toString();
|
|
}
|
|
}
|
|
sizeMinRange.addEventListener('input', () => { clampRanges(); updateSizeLabel(); });
|
|
sizeMaxRange.addEventListener('input', () => { clampRanges(); updateSizeLabel(); });
|
|
|
|
// Ensure both handles are draggable when overlapping by toggling z-index on interaction
|
|
function bringMinToFront() {
|
|
sizeMinRange.style.zIndex = '6';
|
|
sizeMaxRange.style.zIndex = '5';
|
|
}
|
|
function bringMaxToFront() {
|
|
sizeMinRange.style.zIndex = '5';
|
|
sizeMaxRange.style.zIndex = '6';
|
|
}
|
|
['mousedown','pointerdown','touchstart'].forEach(evt => {
|
|
sizeMinRange.addEventListener(evt, bringMinToFront, { passive: true });
|
|
sizeMaxRange.addEventListener(evt, bringMaxToFront, { passive: true });
|
|
});
|
|
// Initialize
|
|
sizeMinRange.value = MIN_VAL;
|
|
sizeMaxRange.value = MAX_VAL;
|
|
updateSizeLabel();
|
|
|
|
document.getElementById('filtersForm').addEventListener('submit', async (e) => {
|
|
e.preventDefault();
|
|
currentPage = 1;
|
|
const pageInput = document.getElementById('page');
|
|
if (pageInput) pageInput.value = '1';
|
|
await searchTransactions(1);
|
|
});
|
|
|
|
const resetBtn = document.getElementById('resetBtn');
|
|
if (resetBtn) {
|
|
resetBtn.addEventListener('click', resetFilters);
|
|
}
|
|
|
|
// pagination buttons
|
|
const prevBtn = document.getElementById('prevPage');
|
|
const nextBtn = document.getElementById('nextPage');
|
|
if (prevBtn) {
|
|
prevBtn.addEventListener('click', async () => {
|
|
if (lastPaging.has_prev && currentPage > 1) {
|
|
currentPage -= 1;
|
|
const pageInput2 = document.getElementById('page');
|
|
if (pageInput2) pageInput2.value = String(currentPage);
|
|
await searchTransactions(currentPage);
|
|
}
|
|
});
|
|
}
|
|
if (nextBtn) {
|
|
nextBtn.addEventListener('click', async () => {
|
|
if (lastPaging.has_next) {
|
|
currentPage += 1;
|
|
const pageInput3 = document.getElementById('page');
|
|
if (pageInput3) pageInput3.value = String(currentPage);
|
|
await searchTransactions(currentPage);
|
|
}
|
|
});
|
|
}
|
|
});
|
|
|
|
|