Add well and customer detail modal

This commit is contained in:
aminhashemi92 2025-09-14 13:44:03 +03:30
parent 4df61c8a01
commit 810c87e2e0
6 changed files with 668 additions and 5 deletions

View file

@ -313,6 +313,153 @@
</div>
</div>
<!-- Customer Details Modal -->
<div class="modal fade" id="customerDetailsModal" tabindex="-1" aria-labelledby="customerDetailsModalLabel" aria-hidden="true">
<div class="modal-dialog modal-xl modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="customerDetailsModalLabel">جزئیات مشترک</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div id="customer-details-loading" class="text-center py-4" style="display:none;">
<div class="spinner-border" role="status"></div>
<div class="mt-2">در حال بارگذاری...</div>
</div>
<div id="customer-details-content" style="display:none;">
<div class="card mb-4">
<div class="card-body">
<h6 class="fw-bold mb-3 text-primary">مشخصات مشترک</h6>
<div class="row">
<div class="col-md-6">
<table class="table table-borderless table-sm mb-0">
<tbody>
<tr>
<td class="text-muted" style="width: 40%;"><i class="bx bx-user me-1"></i>نام کاربری</td>
<td><strong id="cd-username">-</strong></td>
</tr>
<tr>
<td class="text-muted"><i class="bx bx-id-card me-1"></i>نام و نام خانوادگی</td>
<td><strong id="cd-fullname">-</strong></td>
</tr>
<tr>
<td class="text-muted"><i class="bx bx-fingerprint me-1"></i>کد ملی</td>
<td><strong id="cd-national-code">-</strong></td>
</tr>
<tr>
<td class="text-muted"><i class="bx bx-phone me-1"></i>شماره تلفن اول</td>
<td><strong id="cd-phone1">-</strong></td>
</tr>
<tr>
<td class="text-muted"><i class="bx bx-phone me-1"></i>شماره تلفن دوم</td>
<td><strong id="cd-phone2">-</strong></td>
</tr>
<tr>
<td class="text-muted"><i class="bx bx-envelope me-1"></i>ایمیل</td>
<td><strong id="cd-email">-</strong></td>
</tr>
</tbody>
</table>
</div>
<div class="col-md-6">
<table class="table table-borderless table-sm mb-0">
<tbody>
<tr>
<td class="text-muted" style="width: 40%;"><i class="bx bx-credit-card me-1"></i>شماره کارت</td>
<td><strong id="cd-card">-</strong></td>
</tr>
<tr>
<td class="text-muted"><i class="bx bx-wallet me-1"></i>شماره حساب</td>
<td><strong id="cd-account">-</strong></td>
</tr>
<tr>
<td class="text-muted"><i class="bx bx-bank me-1"></i>نام بانک</td>
<td><strong id="cd-bank">-</strong></td>
</tr>
<tr>
<td class="text-muted"><i class="bx bx-map me-1"></i>آدرس</td>
<td><strong id="cd-address">-</strong></td>
</tr>
<tr>
<td class="text-muted"><i class="bx bx-calendar me-1"></i>تاریخ عضویت</td>
<td><strong id="cd-joined">-</strong></td>
</tr>
<tr>
<td class="text-muted"><i class="bx bx-check-circle me-1"></i>وضعیت</td>
<td><span id="cd-status" class="badge">-</span></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<!-- Wells Section -->
<div class="card mb-4">
<div class="card-header d-flex justify-content-between align-items-center">
<h6 class="mb-0 fw-bold">چاه‌های مشترک
<span class="badge bg-label-primary" id="cd-wells-count">0</span>
</h6>
</div>
<div class="card-body p-0">
<div class="table-responsive">
<table class="table table-striped mb-0">
<thead>
<tr>
<th>شماره اشتراک آب</th>
<th>شماره اشتراک برق</th>
<th>سریال کنتور</th>
<th>شرکت سازنده</th>
<th>تاریخ ایجاد</th>
</tr>
</thead>
<tbody id="cd-wells-body">
<tr><td class="text-center py-3" colspan="5"><span class="text-muted">رکوردی یافت نشد</span></td></tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- Requests Section -->
<div class="card">
<div class="card-header d-flex justify-content-between align-items-center">
<h6 class="mb-0 fw-bold">درخواست‌های مشترک
<span class="badge bg-label-primary" id="cd-requests-count">0</span>
</h6>
</div>
<div class="card-body p-0">
<div class="table-responsive">
<table class="table table-striped mb-0">
<thead>
<tr>
<th>کد</th>
<th>فرآیند</th>
<th>چاه</th>
<th>مرحله فعلی</th>
<th>وضعیت</th>
<th>تاریخ ایجاد</th>
<th></th>
</tr>
</thead>
<tbody id="cd-requests-body">
<tr><td class="text-center py-3" colspan="7"><span class="text-muted">رکوردی یافت نشد</span></td></tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">بستن</button>
</div>
</div>
</div>
</div>
<!-- Delete Confirmation Modal -->
<div class="modal fade" id="deleteConfirmModal" tabindex="-1" aria-labelledby="deleteConfirmModalLabel" aria-hidden="true">
<div class="modal-dialog">
@ -436,8 +583,96 @@
// Customer functions
function viewCustomer(id) {
// Implement view functionality
console.log('View customer:', id);
const modalEl = document.getElementById('customerDetailsModal');
const modal = new bootstrap.Modal(modalEl);
// reset content
$('#customer-details-content').hide();
$('#customer-details-loading').show();
$('#cd-wells-body').html('<tr><td class="text-center py-3" colspan="5"><span class="text-muted">در حال بارگذاری...</span></td></tr>');
$('#cd-requests-body').html('<tr><td class="text-center py-3" colspan="7"><span class="text-muted">در حال بارگذاری...</span></td></tr>');
$('#cd-wells-count').text('0');
$('#cd-requests-count').text('0');
modal.show();
// Fetch customer details
$.get('{% url "accounts:get_customer_details" 0 %}'.replace('0', id))
.done(function(resp){
if (!resp.success) { showToast('خطا در دریافت جزئیات مشترک', 'danger'); return; }
const c = resp.customer;
$('#customerDetailsModalLabel').text('جزئیات مشترک ' + (c.user.full_name || c.user.username));
$('#cd-username').text(c.user.username || '-');
$('#cd-fullname').text(c.user.full_name || '-');
$('#cd-national-code').text(c.national_code || '-');
$('#cd-phone1').text(c.phone_number_1 || '-');
$('#cd-phone2').text(c.phone_number_2 || '-');
$('#cd-email').text(c.user.email || '-');
$('#cd-card').text(c.card_number || '-');
$('#cd-account').text(c.account_number || '-');
$('#cd-bank').text(c.bank_name || '-');
$('#cd-address').text(c.address || '-');
$('#cd-joined').text(c.user.date_joined || '-');
// Status badge
if (c.is_completed) {
$('#cd-status').removeClass().addClass('badge bg-success').text('تکمیل شده');
} else {
$('#cd-status').removeClass().addClass('badge bg-warning').text('ناقص');
}
$('#cd-wells-count').text(resp.total_wells || '0');
$('#cd-requests-count').text(resp.total_requests || '0');
$('#customer-details-loading').hide();
$('#customer-details-content').show();
})
.fail(function(){ showToast('خطا در ارتباط با سرور', 'danger'); $('#customer-details-loading').hide(); });
// Fetch wells
$.get('{% url "accounts:get_customer_wells" 0 %}'.replace('0', id))
.done(function(resp){
if (!resp.success) { $('#cd-wells-body').html('<tr><td class="text-center py-3" colspan="5"><span class="text-danger">خطا در بارگذاری چاه‌ها</span></td></tr>'); return; }
const rows = (resp.wells || []).map(function(w){
return '<tr>'+
'<td>'+ (w.water_subscription_number || '-') +'</td>'+
'<td>'+ (w.electricity_subscription_number || '-') +'</td>'+
'<td>'+ (w.water_meter_serial_number || '-') +'</td>'+
'<td>'+ (w.water_meter_manufacturer || '-') +'</td>'+
'<td>'+ (w.created || '-') +'</td>'+
'</tr>';
});
if (!rows.length) {
$('#cd-wells-body').html('<tr><td class="text-center py-3" colspan="5"><span class="text-muted">رکوردی یافت نشد</span></td></tr>');
} else {
$('#cd-wells-body').html(rows.join(''));
}
})
.fail(function(){ $('#cd-wells-body').html('<tr><td class="text-center py-3" colspan="5"><span class="text-danger">خطا در بارگذاری چاه‌ها</span></td></tr>'); });
// Fetch requests
$.get('{% url "accounts:get_customer_requests" 0 %}'.replace('0', id))
.done(function(resp){
if (!resp.success) { $('#cd-requests-body').html('<tr><td class="text-center py-3" colspan="7"><span class="text-danger">خطا در بارگذاری درخواست‌ها</span></td></tr>'); return; }
const rows = (resp.requests || []).map(function(r){
const status = r.status_display || r.status;
const step = r.current_step || '-';
const href = r.url || '#';
const well = r.well_subscription || '-';
return '<tr>'+
'<td>'+ (r.code || '-') +'</td>'+
'<td>'+ (r.process || '-') +'</td>'+
'<td>'+ well +'</td>'+
'<td>'+ step +'</td>'+
'<td>'+ status +'</td>'+
'<td>'+ (r.created || '-') +'</td>'+
'<td><a class="btn btn-sm btn-outline-primary" href="'+ href +'" target="_blank">جزئیات</a></td>'+
'</tr>';
});
if (!rows.length) {
$('#cd-requests-body').html('<tr><td class="text-center py-3" colspan="7"><span class="text-muted">رکوردی یافت نشد</span></td></tr>');
} else {
$('#cd-requests-body').html(rows.join(''));
}
})
.fail(function(){ $('#cd-requests-body').html('<tr><td class="text-center py-3" colspan="7"><span class="text-danger">خطا در بارگذاری درخواست‌ها</span></td></tr>'); });
}
function editCustomer(id) {