Updated ERP with new modules and features
This commit is contained in:
Kwesi Banson
@@ -21,13 +21,16 @@
|
||||
<h3 class="fw-bold mb-1">{{ $operator->name }}</h3>
|
||||
<p class="text-secondary mb-0" style="font-size: 0.9rem;">
|
||||
<i class="bi bi-geo-alt me-1"></i> {{ $operator->country }} •
|
||||
<span class="badge {{ $operator->connection_status == 'Online' ? 'bg-success' : 'bg-danger' }} ms-1">
|
||||
{{ $operator->connection_status ?? 'Offline' }}
|
||||
<span class="badge {{ $operator->connection_status == 'Active' ? 'bg-success' : 'bg-danger' }} ms-1">
|
||||
{{ $operator->connection_status ?? 'Inactive' }}
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<button class="btn btn-primary btn-sm fw-bold btn-edit-operator" data-id="{{ $operator->id }}">
|
||||
<i class="bi bi-pencil me-1"></i> Edit MNO
|
||||
</button>
|
||||
<a href="{{ route('mnos.index') }}" class="btn btn-outline-secondary btn-sm fw-bold">
|
||||
<i class="bi bi-arrow-left me-1"></i> Back to List
|
||||
</a>
|
||||
@@ -66,6 +69,7 @@
|
||||
</h5>
|
||||
<hr class="text-muted opacity-25">
|
||||
<div class="row g-3">
|
||||
|
||||
<div class="col-md-6">
|
||||
<span class="text-muted small d-block">Operating Country</span>
|
||||
<strong class="text-dark">{{ $operator->country }}</strong>
|
||||
@@ -84,6 +88,36 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Contract Details -->
|
||||
<div class="content-card p-4 mb-4">
|
||||
<h5 class="fw-bold mb-3 text-secondary" style="font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.5px;">
|
||||
<i class="bi bi-file-earmark-text me-2 text-primary"></i> Contract Details
|
||||
</h5>
|
||||
<hr class="text-muted opacity-25">
|
||||
<div class="row g-3">
|
||||
<div class="col-md-4">
|
||||
<span class="text-muted small d-block">Contract Type</span>
|
||||
<strong class="text-dark">{{ $operator->contract_type ?? 'N/A' }}</strong>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<span class="text-muted small d-block">Contract Validity</span>
|
||||
<strong class="text-dark">{{ $operator->contract_validity ?? 'N/A' }}</strong>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<span class="text-muted small d-block">Auto Renew</span>
|
||||
@if(is_null($operator->contract_auto_renew))
|
||||
<strong class="text-dark">N/A</strong>
|
||||
@elseif($operator->contract_auto_renew)
|
||||
<span class="badge bg-success bg-opacity-10 text-success border border-success">Yes</span>
|
||||
@else
|
||||
<span class="badge bg-danger bg-opacity-10 text-danger border border-danger mb-1">No</span>
|
||||
<div class="text-muted" style="font-size: 0.75rem;">
|
||||
Renewal Date: <strong class="text-dark">{{ $operator->next_renewal_date ? $operator->next_renewal_date->format('d M Y') : 'Not Set' }}</strong>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Provisioned Services Badges -->
|
||||
<div class="content-card p-4">
|
||||
@@ -220,182 +254,70 @@
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Documents Section -->
|
||||
<div class="content-card p-4 mb-4">
|
||||
<div class="d-flex justify-content-between align-items-center mb-3">
|
||||
<h5 class="fw-bold mb-0 text-secondary" style="font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.5px;">
|
||||
<i class="bi bi-folder me-2 text-primary"></i> Operator Documents
|
||||
</h5>
|
||||
<button type="button" class="btn btn-sm text-white fw-bold" style="background-color: #5c4df0;" data-bs-toggle="modal" data-bs-target="#addDocumentModal">
|
||||
<i class="bi bi-cloud-upload me-1"></i> Upload Documents
|
||||
</button>
|
||||
</div>
|
||||
<hr class="text-muted opacity-25">
|
||||
|
||||
<div class="table-responsive">
|
||||
<table class="table table-custom align-middle mb-0">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Document Name</th>
|
||||
<th>File Type</th>
|
||||
<th>Uploaded On</th>
|
||||
<th class="text-end">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@forelse($operator->documents as $doc)
|
||||
<tr>
|
||||
<td class="fw-bold">{{ $doc->name }}</td>
|
||||
<td><span class="badge bg-light text-dark border">{{ strtoupper(pathinfo($doc->file_path, PATHINFO_EXTENSION)) }}</span></td>
|
||||
<td>{{ $doc->created_at->format('d M Y') }}</td>
|
||||
<td class="text-end">
|
||||
<a href="{{ asset('storage/' . $doc->file_path) }}" target="_blank" class="btn btn-sm btn-light text-primary me-2">
|
||||
<i class="bi bi-eye"></i> View
|
||||
</a>
|
||||
<form action="{{ route('mnos.documents.destroy', $doc->id) }}" method="POST" class="d-inline">
|
||||
@csrf
|
||||
@method('DELETE')
|
||||
<button type="submit" class="btn btn-sm btn-light text-danger" onclick="return confirm('Delete this document?')">
|
||||
<i class="bi bi-trash"></i>
|
||||
</button>
|
||||
</form>
|
||||
</td>
|
||||
</tr>
|
||||
@empty
|
||||
<tr>
|
||||
<td colspan="4" class="text-center text-secondary py-4">No documents uploaded yet.</td>
|
||||
</tr>
|
||||
@endforelse
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@endsection
|
||||
@push('modals')
|
||||
|
||||
<!-- Add Connection Modal -->
|
||||
<!-- Add Connection Modal -->
|
||||
<div class="modal fade" id="addConnectionModal" tabindex="-1" aria-hidden="true">
|
||||
<div class="modal-dialog modal-dialog-centered">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header bg-light">
|
||||
<h5 class="modal-title fw-bold">Add Interconnect Detail</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
|
||||
<!-- Added ID to the form -->
|
||||
<form id="addConnectionForm" action="{{ route('mnos.connections.store', $operator->id) }}" method="POST" enctype="multipart/form-data">
|
||||
@csrf
|
||||
<div class="modal-body p-4">
|
||||
<!-- Alert container for AJAX errors -->
|
||||
<div id="connectionModalAlert"></div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label text-secondary fw-semibold small">Connection Mode *</label>
|
||||
<select name="connection_mode" id="connectionModeSelect" class="form-select" required>
|
||||
<option value="Whitelisted IP">Whitelisted IP Address</option>
|
||||
<option value="Domain">Domain / Hostname</option>
|
||||
<option value="VPN Tunnel">VPN Tunnel Endpoint</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="mb-3" id="vpnFormContainer" style="display: none;">
|
||||
<label class="form-label text-secondary fw-semibold small">Upload VPN Form (PDF, DOCX)</label>
|
||||
<input type="file" name="vpn_file" id="vpnFileInput" class="form-control" accept=".pdf,.doc,.docx,.xlsx,.jpg,.png">
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label text-secondary fw-semibold small">Identifier (IP / Domain / VPN Peer) *</label>
|
||||
<input type="text" name="identifier" class="form-control" required placeholder="e.g. 196.200.15.22 or smpp.operator.com">
|
||||
</div>
|
||||
|
||||
<div class="row g-3 mb-3">
|
||||
<div class="col-md-6">
|
||||
<label class="form-label text-secondary fw-semibold small">Port</label>
|
||||
<!-- Added type="number", min, and max -->
|
||||
<input type="number" name="port" class="form-control" placeholder="e.g. 2775" min="1" max="65535">
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label class="form-label text-secondary fw-semibold small">Status</label>
|
||||
<select name="status" class="form-select">
|
||||
<option value="Active">Active</option>
|
||||
<option value="Testing">Testing</option>
|
||||
<option value="Disabled">Disabled</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label text-secondary fw-semibold small">Notes / Description</label>
|
||||
<textarea name="notes" class="form-control" rows="2" placeholder="Optional context or routing details..."></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer bg-light">
|
||||
<button type="button" class="btn btn-outline-secondary btn-sm" data-bs-dismiss="modal">Cancel</button>
|
||||
<button type="submit" id="btnSubmitConnection" class="btn text-white btn-sm fw-bold px-4" style="background-color: #5c4df0;">Save Endpoint</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@include('network_operators.partials.modals')
|
||||
@endpush
|
||||
@push('scripts')
|
||||
<script>
|
||||
|
||||
$(document).ready(function() {
|
||||
console.log('foo bar')
|
||||
$('#connectionModeSelect').on('change', function() {
|
||||
if ($(this).val() === 'VPN Tunnel') {
|
||||
$('#vpnFormContainer').slideDown();
|
||||
} else {
|
||||
$('#vpnFormContainer').slideUp();
|
||||
$('#vpnFileInput').val(''); // Clear the file input if they switch away
|
||||
}
|
||||
});
|
||||
});
|
||||
$(document).ready(function() {
|
||||
// Toggle VPN File input visibility
|
||||
$('#connectionModeSelect').on('change', function() {
|
||||
if ($(this).val() === 'VPN Tunnel') {
|
||||
$('#vpnFormContainer').slideDown();
|
||||
} else {
|
||||
$('#vpnFormContainer').slideUp();
|
||||
$('#vpnFileInput').val('');
|
||||
}
|
||||
});
|
||||
|
||||
// Handle AJAX Form Submission
|
||||
$('#addConnectionForm').on('submit', function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
let $form = $(this);
|
||||
let $submitBtn = $('#btnSubmitConnection');
|
||||
let originalText = $submitBtn.html();
|
||||
let $alertBox = $('#connectionModalAlert');
|
||||
|
||||
// Use FormData to handle the file upload payload
|
||||
let formData = new FormData(this);
|
||||
|
||||
$submitBtn.html('<span class="spinner-border spinner-border-sm me-2"></span>Saving...').prop('disabled', true);
|
||||
$alertBox.html('');
|
||||
$form.find('.is-invalid').removeClass('is-invalid');
|
||||
$form.find('.invalid-feedback').remove();
|
||||
|
||||
$.ajax({
|
||||
url: $form.attr('action'),
|
||||
type: 'POST',
|
||||
data: formData,
|
||||
processData: false, // Prevent jQuery from converting the data into a query string
|
||||
contentType: false, // Prevent jQuery from overriding the multipart header
|
||||
success: function(response) {
|
||||
if (response.success) {
|
||||
$('#addConnectionModal').modal('hide');
|
||||
Swal.fire({
|
||||
icon: 'success',
|
||||
title: 'Success!',
|
||||
text: response.message,
|
||||
confirmButtonColor: '#5c4df0'
|
||||
}).then(() => {
|
||||
// Reload the page to reflect the new connection in the table
|
||||
location.reload();
|
||||
});
|
||||
}
|
||||
},
|
||||
error: function(xhr) {
|
||||
if (xhr.status === 422) {
|
||||
let errors = xhr.responseJSON.errors;
|
||||
|
||||
$alertBox.html(`
|
||||
<div class="alert alert-danger d-flex align-items-center py-2 px-3 small" role="alert">
|
||||
<i class="bi bi-exclamation-triangle-fill me-2"></i>
|
||||
<div>Please check the highlighted fields below.</div>
|
||||
</div>
|
||||
`);
|
||||
|
||||
// Highlight specific fields
|
||||
$.each(errors, function(key, value) {
|
||||
let $input = $form.find('[name="' + key + '"]');
|
||||
if ($input.length) {
|
||||
$input.addClass('is-invalid');
|
||||
$input.parent().append('<div class="invalid-feedback d-block fw-medium small">' + value[0] + '</div>');
|
||||
}
|
||||
});
|
||||
} else {
|
||||
$alertBox.html(`
|
||||
<div class="alert alert-danger d-flex align-items-center py-2 px-3 small" role="alert">
|
||||
<i class="bi bi-x-circle-fill me-2"></i>
|
||||
<div>An error occurred. Please try again.</div>
|
||||
</div>
|
||||
`);
|
||||
}
|
||||
},
|
||||
complete: function() {
|
||||
$submitBtn.html(originalText).prop('disabled', false);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Reset the form when the modal is closed
|
||||
$('#addConnectionModal').on('hidden.bs.modal', function () {
|
||||
$('#addConnectionForm')[0].reset();
|
||||
$('#vpnFormContainer').hide();
|
||||
$('#connectionModalAlert').html('');
|
||||
$('#addConnectionForm').find('.is-invalid').removeClass('is-invalid');
|
||||
$('#addConnectionForm').find('.invalid-feedback').remove();
|
||||
});
|
||||
});
|
||||
const baseUrl = "{{ url('/') }}";
|
||||
const operatorId = "{{ $operator->id }}";
|
||||
</script>
|
||||
<script src="{{ asset('public/assets/js/mno-show.js') }}"></script>
|
||||
|
||||
|
||||
@endpush
|
||||
Reference in New Issue
Block a user