Updated ERP with new modules and features
This commit is contained in:
Kwesi Banson
203
resources/views/activity-logs/index.blade.php
Normal file
203
resources/views/activity-logs/index.blade.php
Normal file
@@ -0,0 +1,203 @@
|
||||
@extends('layouts.masterbeta')
|
||||
|
||||
@section('title', 'Click ERP - System Activity Logs')
|
||||
|
||||
@section('breadcrumbs')
|
||||
<a href="{{ url('/') }}" class="text-secondary text-decoration-none"><i class="bi bi-house me-2"></i></a>
|
||||
<i class="bi bi-chevron-right text-secondary me-2" style="font-size: 0.8rem;"></i>
|
||||
<span class="fw-bold" style="font-size: 0.95rem;">Activity Logs</span>
|
||||
@endsection
|
||||
|
||||
@section('content')
|
||||
<div class="d-flex justify-content-between align-items-center mb-4">
|
||||
<div>
|
||||
<h4 class="fw-bold mb-1">System Audit Trail</h4>
|
||||
<p class="text-secondary mb-0" style="font-size: 0.9rem;">Monitor user actions, data modifications, and security events.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-card shadow-sm bg-white rounded-3 overflow-hidden">
|
||||
|
||||
<!-- Filters Section -->
|
||||
<div class="p-3 border-bottom bg-light bg-opacity-50">
|
||||
<form method="GET" action="{{ route('activity-logs.index') }}" class="row g-2 align-items-center">
|
||||
<div class="col-md-4">
|
||||
<div class="input-group input-group-sm">
|
||||
<span class="input-group-text bg-white border-end-0 text-secondary"><i class="bi bi-search"></i></span>
|
||||
<input type="text" class="form-control bg-white border-start-0 ps-0" name="search" value="{{ request('search') }}" placeholder="Search user or entity (e.g. VpnConfig)...">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-2">
|
||||
<select class="form-select form-select-sm" name="action_type">
|
||||
<option value="">All Actions</option>
|
||||
<option value="created" {{ request('action_type') == 'created' ? 'selected' : '' }}>Created</option>
|
||||
<option value="updated" {{ request('action_type') == 'updated' ? 'selected' : '' }}>Updated</option>
|
||||
<option value="deleted" {{ request('action_type') == 'deleted' ? 'selected' : '' }}>Deleted</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-md-2">
|
||||
<input type="date" class="form-control form-control-sm" name="date_from" value="{{ request('date_from') }}" placeholder="From">
|
||||
</div>
|
||||
<div class="col-md-2">
|
||||
<input type="date" class="form-control form-control-sm" name="date_to" value="{{ request('date_to') }}" placeholder="To">
|
||||
</div>
|
||||
<div class="col-md-2 d-flex gap-1">
|
||||
<button type="submit" class="btn btn-sm btn-dark w-100 fw-bold">Filter</button>
|
||||
<a href="{{ route('activity-logs.index') }}" class="btn btn-sm btn-outline-secondary" title="Clear Filters"><i class="bi bi-x-lg"></i></a>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- Data Table -->
|
||||
<div class="table-responsive">
|
||||
<table class="table table-hover align-middle mb-0">
|
||||
<thead class="table-light text-secondary" style="font-size: 0.85rem;">
|
||||
<tr>
|
||||
<th class="ps-4">Timestamp</th>
|
||||
<th>User</th>
|
||||
<th>Action</th>
|
||||
<th>Entity Context</th>
|
||||
<th class="text-end pe-4">Details</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@forelse($logs as $log)
|
||||
<tr>
|
||||
<td class="ps-4">
|
||||
<div class="fw-bold text-dark" style="font-size: 0.9rem;">{{ $log->created_at->format('d M Y') }}</div>
|
||||
<div class="text-secondary small">{{ $log->created_at->format('h:i:s A') }}</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="fw-bold text-dark">{{ $log->user->name ?? 'System/Guest' }}</div>
|
||||
<div class="text-secondary font-monospace" style="font-size: 0.75rem;">{{ $log->ip_address }}</div>
|
||||
</td>
|
||||
<td>
|
||||
@php
|
||||
$badgeColor = match($log->action) {
|
||||
'created' => 'success',
|
||||
'updated' => 'primary',
|
||||
'deleted' => 'danger',
|
||||
default => 'secondary'
|
||||
};
|
||||
@endphp
|
||||
<span class="badge bg-{{ $badgeColor }} bg-opacity-10 text-{{ $badgeColor }} text-uppercase">
|
||||
{{ $log->action }}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<div class="text-dark fw-medium" style="font-size: 0.85rem;">
|
||||
{{ class_basename($log->loggable_type) }} <span class="text-secondary">#{{ $log->loggable_id }}</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="text-end pe-4">
|
||||
@if(!empty($log->old_data) || !empty($log->new_data))
|
||||
<button class="btn btn-sm btn-light text-primary border fw-bold btn-view-changes"
|
||||
data-action="{{ $log->action }}"
|
||||
data-old="{{ json_encode($log->old_data) }}"
|
||||
data-new="{{ json_encode($log->new_data) }}"
|
||||
data-entity="{{ class_basename($log->loggable_type) }} #{{ $log->loggable_id }}">
|
||||
<i class="bi bi-eye me-1"></i> View Data
|
||||
</button>
|
||||
@else
|
||||
<span class="text-muted small">No Context</span>
|
||||
@endif
|
||||
</td>
|
||||
</tr>
|
||||
@empty
|
||||
<tr>
|
||||
<td colspan="5" class="text-center py-5 text-secondary">
|
||||
<i class="bi bi-journal-x fs-1 text-muted mb-2 d-block"></i>
|
||||
No activity records found.
|
||||
</td>
|
||||
</tr>
|
||||
@endforelse
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- Pagination -->
|
||||
@if($logs->hasPages())
|
||||
<div class="card-footer bg-white border-top p-3 d-flex justify-content-center">
|
||||
{{ $logs->links('pagination::bootstrap-5') }}
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
@push('modals')
|
||||
<!-- VIEW CHANGES MODAL -->
|
||||
<div class="modal fade" id="viewChangesModal" tabindex="-1" aria-hidden="true">
|
||||
<div class="modal-dialog modal-dialog-centered modal-lg">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header bg-light border-bottom-0">
|
||||
<h5 class="modal-title fw-bold" id="modalEntityTitle">Data Context</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body p-4 bg-light">
|
||||
<div class="row g-3">
|
||||
<div class="col-md-6" id="oldDataCol">
|
||||
<h6 class="fw-bold text-danger mb-2"><i class="bi bi-dash-circle me-1"></i> Previous State</h6>
|
||||
<div class="card border-danger border-opacity-25 shadow-sm">
|
||||
<div class="card-body p-0">
|
||||
<pre class="m-0 p-3 text-danger" style="font-size: 0.8rem; overflow-x: auto;" id="oldDataContainer"></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6" id="newDataCol">
|
||||
<h6 class="fw-bold text-success mb-2"><i class="bi bi-plus-circle me-1"></i> New State</h6>
|
||||
<div class="card border-success border-opacity-25 shadow-sm">
|
||||
<div class="card-body p-0">
|
||||
<pre class="m-0 p-3 text-success" style="font-size: 0.8rem; overflow-x: auto;" id="newDataContainer"></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endpush
|
||||
|
||||
@push('scripts')
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
$('.btn-view-changes').on('click', function() {
|
||||
let action = $(this).data('action');
|
||||
let entity = $(this).data('entity');
|
||||
|
||||
// Parse the JSON data passed from the Blade attributes
|
||||
let oldData = $(this).data('old');
|
||||
let newData = $(this).data('new');
|
||||
|
||||
$('#modalEntityTitle').text('Context: ' + entity);
|
||||
|
||||
let $oldCol = $('#oldDataCol');
|
||||
let $newCol = $('#newDataCol');
|
||||
let $oldContainer = $('#oldDataContainer');
|
||||
let $newContainer = $('#newDataContainer');
|
||||
|
||||
// Reset layout
|
||||
$oldCol.show().removeClass('col-md-12').addClass('col-md-6');
|
||||
$newCol.show().removeClass('col-md-12').addClass('col-md-6');
|
||||
|
||||
// Format JSON cleanly, checking if null
|
||||
let formattedOld = oldData && oldData !== "null" ? JSON.stringify(oldData, null, 4) : 'No previous data (or field was empty).';
|
||||
let formattedNew = newData && newData !== "null" ? JSON.stringify(newData, null, 4) : 'No new data recorded.';
|
||||
|
||||
$oldContainer.text(formattedOld);
|
||||
$newContainer.text(formattedNew);
|
||||
|
||||
// Adjust layout based on action type to maximize reading space
|
||||
if (action === 'created') {
|
||||
$oldCol.hide();
|
||||
$newCol.removeClass('col-md-6').addClass('col-md-12');
|
||||
} else if (action === 'deleted') {
|
||||
$newCol.hide();
|
||||
$oldCol.removeClass('col-md-6').addClass('col-md-12');
|
||||
}
|
||||
|
||||
$('#viewChangesModal').modal('show');
|
||||
});
|
||||
});
|
||||
</script>
|
||||
@endpush
|
||||
@@ -130,10 +130,10 @@
|
||||
<!-- Left Column: Pending Leaves & Documents -->
|
||||
<div class="col-lg-8">
|
||||
<div class="content-card shadow-sm mb-4">
|
||||
<div class="p-3 border-bottom d-flex justify-content-between align-items-center bg-light bg-opacity-50">
|
||||
<!-- <div class="p-3 border-bottom d-flex justify-content-between align-items-center bg-light bg-opacity-50">
|
||||
<h6 class="fw-bold mb-0"><i class="bi bi-clock-history me-2 text-warning"></i> Pending Leave Approvals</h6>
|
||||
<a href="{{ route('leave.index') }}" class="small text-decoration-none fw-bold" style="color: #5c4df0;">View All</a>
|
||||
</div>
|
||||
</div> -->
|
||||
<div class="table-responsive">
|
||||
<table class="table table-custom mb-0 align-middle">
|
||||
<thead>
|
||||
|
||||
@@ -38,6 +38,13 @@
|
||||
.table-custom th { background-color: #f8f9fc; color: #5a617a; font-weight: 600; font-size: 0.8rem; text-transform: uppercase; border-bottom: 2px solid #eaedf1; padding: 1rem; }
|
||||
.table-custom td { padding: 1rem; vertical-align: middle; font-size: 0.9rem; border-bottom: 1px solid #eaedf1; }
|
||||
.form-control:focus, .form-select:focus { border-color: #5c4df0; box-shadow: 0 0 0 0.25rem rgba(92, 77, 240, 0.25); }
|
||||
|
||||
.sidebar-nav-item .toggle-icon {
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
.sidebar-nav-item.collapsed .toggle-icon {
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
</style>
|
||||
|
||||
@stack('styles')
|
||||
|
||||
@@ -5,7 +5,6 @@
|
||||
<div class="mb-0 fs-6">Click <span class="badge bg-secondary ms-1" style="font-size: 0.8rem;">ERP</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="px-3 mb-3">
|
||||
<div class="input-group input-group-sm">
|
||||
<span class="input-group-text bg-dark border-secondary text-secondary"><i class="bi bi-search"></i></span>
|
||||
@@ -16,6 +15,11 @@
|
||||
<a href="{{ url('/') }}" class="sidebar-nav-item {{ request()->is('/') ? 'active' : '' }}">
|
||||
<i class="bi bi-speedometer2 me-2"></i> Dashboard
|
||||
</a>
|
||||
@if(\Auth::user()->department->name == 'Directors')
|
||||
<a href="{{ url('management') }}" class="sidebar-nav-item {{ request()->is('management') ? 'active' : '' }}">
|
||||
<i class="bi bi-border-center me-2"></i> Management Hub
|
||||
</a>
|
||||
@endif
|
||||
<div class="sidebar-heading mt-2">Core Entities</div>
|
||||
<a href="{{ url('/clients') }}" class="sidebar-nav-item {{ request()->is('clients*') ? 'active' : '' }}">
|
||||
<i class="bi bi-people me-2"></i> Clients
|
||||
@@ -36,16 +40,47 @@
|
||||
<a href="{{ url('/documents') }}" class="sidebar-nav-item {{ request()->is('documents*') ? 'active' : '' }}">
|
||||
<i class="bi bi-folder2-open me-2"></i> Document Vault
|
||||
</a>
|
||||
|
||||
|
||||
@if(\Auth::user()->department->name == 'Technical')
|
||||
<div class="sidebar-heading mt-2">Technical</div>
|
||||
|
||||
<!-- Infrastructure Parent Toggle -->
|
||||
<a href="#infrastructureMenu" data-bs-toggle="collapse"
|
||||
aria-expanded="{{ request()->is('servers*') ? 'true' : 'false' }}"
|
||||
class="sidebar-nav-item d-flex justify-content-between align-items-center {{ request()->is('servers*') ? '' : 'collapsed' }}">
|
||||
<span><i class="bi bi-hdd-network me-2"></i> Infrastructure</span>
|
||||
<i class="bi bi-chevron-down toggle-icon" style="font-size: 0.75rem;"></i>
|
||||
</a>
|
||||
|
||||
<!-- Collapsible Sub-links -->
|
||||
<div class="collapse {{ request()->is('servers*') ? 'show' : '' }}" id="infrastructureMenu">
|
||||
<div class="d-flex flex-column ms-3 mt-1 border-start border-secondary ps-2">
|
||||
<a href="{{ url('/servers') }}" class="sidebar-nav-item py-2 {{ request()->is('servers*') ? 'active' : '' }}" style="font-size: 0.85rem;">
|
||||
<i class="bi bi-server me-2"></i> Servers
|
||||
</a>
|
||||
<a href="{{ url('/vpns') }}" class="sidebar-nav-item py-2 {{ request()->is('vpns*') ? 'active' : '' }}" style="font-size: 0.85rem;">
|
||||
<i class="bi bi-shield-lock me-2"></i> VPN Management
|
||||
</a>
|
||||
<!--
|
||||
<a href="{{ url('/networking') }}" class="sidebar-nav-item py-2" style="font-size: 0.85rem;">
|
||||
<i class="bi bi-router me-2"></i> Networking
|
||||
</a>
|
||||
-->
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
<div class="sidebar-heading mt-2">Others</div>
|
||||
<a href="{{ url('/reports') }}" class="sidebar-nav-item {{ request()->is('reports*') ? 'active' : '' }}">
|
||||
<i class="bi bi-buildings me-2"></i> Reports
|
||||
</a>
|
||||
|
||||
<a href="{{ url('/offices') }}" class="sidebar-nav-item {{ request()->is('offices*') ? 'active' : '' }}">
|
||||
<i class="bi bi-buildings me-2"></i> Office Locations
|
||||
</a>
|
||||
<a href="{{ url('/staff') }}" class="sidebar-nav-item {{ request()->is('staff*') ? 'active' : '' }}">
|
||||
<i class="bi bi-person-badge me-2"></i> Staff Directory
|
||||
</a>
|
||||
<div class="sidebar-heading mt-2">System</div>
|
||||
<a href="{{ url('/activity-logs') }}" class="sidebar-nav-item {{ request()->is('activity-logs*') ? 'active' : '' }}">
|
||||
<i class="bi bi-clock-history me-2"></i> Activity Logs
|
||||
</a>
|
||||
</aside>
|
||||
@@ -40,12 +40,14 @@
|
||||
<div class="content-card p-4 h-100 border-start border-4 border-0" style="border-left-color: #10b981 !important;">
|
||||
<h6 class="text-secondary text-uppercase fw-bold mb-3" style="letter-spacing: 1px; font-size: 0.8rem;">Leave Policy Quick Guide</h6>
|
||||
<ul class="text-secondary mb-0 small" style="line-height: 1.8;">
|
||||
<li><strong>Policy 1</strong></li>
|
||||
<li><strong>Pending Requests:</strong> Can be canceled before HR approval. Once approved, contact HR to amend.</li>
|
||||
<li><strong>Policy 2</strong></li>
|
||||
<li><strong>Policy 3</strong></li>
|
||||
<li><strong><!-- Annual Leave:</strong> Deducted from your balance. Weekends are automatically excluded from the calculation.</li>
|
||||
<li><strong>Policy 4</strong></li>
|
||||
|
||||
<!-- <li><strong>Annual Leave:</strong> Deducted from your balance. Weekends are automatically excluded from the calculation.</li>
|
||||
<li><strong>Sick Leave:</strong> Requires a medical certificate for absences exceeding 2 consecutive days.</li>
|
||||
<li><strong> -->Pending Requests:</strong> Can be canceled before HR approval. Once approved, contact HR to amend.</li>
|
||||
-->
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
200
resources/views/management/index.blade.php
Normal file
200
resources/views/management/index.blade.php
Normal file
@@ -0,0 +1,200 @@
|
||||
@extends('layouts.masterbeta')
|
||||
|
||||
@section('title', 'Click ERP - Management Dashboard')
|
||||
|
||||
@section('breadcrumbs')
|
||||
<a href="{{ url('/') }}" class="text-secondary text-decoration-none"><i class="bi bi-house me-2"></i></a>
|
||||
<i class="bi bi-chevron-right text-secondary me-2" style="font-size: 0.8rem;"></i>
|
||||
<span class="fw-bold" style="font-size: 0.95rem;">Management Dashboard</span>
|
||||
@endsection
|
||||
|
||||
@section('content')
|
||||
<div class="d-flex justify-content-between align-items-center mb-4">
|
||||
<div>
|
||||
<h4 class="fw-bold mb-1">Management Hub</h4>
|
||||
<p class="text-secondary mb-0" style="font-size: 0.9rem;">Centralized oversight for leave and reports</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card border-light-subtle shadow-sm mb-4">
|
||||
<div class="card-header bg-white py-3 border-bottom d-flex flex-column flex-md-row justify-content-between align-items-md-center gap-3">
|
||||
<!-- Tabs Navigation -->
|
||||
<ul class="nav nav-tabs card-header-tabs m-0" id="managementTabs" role="tablist">
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link active fw-bold text-dark" id="leaves-tab" data-bs-toggle="tab" data-bs-target="#leaves-pane" type="button">
|
||||
<i class="bi bi-calendar-event text-primary me-1"></i> Leave Approvals
|
||||
@if($pendingLeaves->count() > 0)
|
||||
<span class="badge bg-danger rounded-pill ms-1">{{ $pendingLeaves->count() }}</span>
|
||||
@endif
|
||||
</button>
|
||||
</li>
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link fw-bold text-dark" id="reports-tab" data-bs-toggle="tab" data-bs-target="#reports-pane" type="button">
|
||||
<i class="bi bi-journal-text text-primary me-1"></i> Staff Reports
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="card-body tab-content bg-light p-4" id="managementTabsContent">
|
||||
|
||||
<!-- TAB 1: LEAVE MANAGEMENT -->
|
||||
<div class="tab-pane fade show active" id="leaves-pane" role="tabpanel">
|
||||
<h6 class="fw-bold mb-3 text-secondary">Pending Requests</h6>
|
||||
<div class="table-responsive bg-white border rounded shadow-sm">
|
||||
<table class="table table-hover align-middle mb-0">
|
||||
<thead class="table-light text-secondary" style="font-size: 0.85rem;">
|
||||
<tr>
|
||||
<th class="ps-3">Staff Member</th>
|
||||
<th>Leave Type</th>
|
||||
<th>Duration</th>
|
||||
<th>Requested On</th>
|
||||
<th class="text-end pe-3">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@forelse($pendingLeaves as $leave)
|
||||
<tr>
|
||||
<td class="ps-3 fw-bold text-dark">{{ $leave->user->name ?? 'N/A' }}</td>
|
||||
<td><span class="badge bg-info bg-opacity-10 text-info">{{ $leave->leave_type ?? 'Annual' }}</span></td>
|
||||
<td class="text-secondary small">
|
||||
{{ \Carbon\Carbon::parse($leave->start_date)->format('d M') }} - {{ \Carbon\Carbon::parse($leave->end_date)->format('d M Y') }}
|
||||
<br><span class="fw-medium text-dark">{{ $leave->total_days }} days</span>
|
||||
</td>
|
||||
<td class="text-secondary small">{{ $leave->created_at->format('d M Y') }}</td>
|
||||
<td class="text-end pe-3">
|
||||
<button class="btn btn-sm btn-success fw-bold px-3 btn-action-leave" data-id="{{ $leave->id }}" data-status="Approved">Approve</button>
|
||||
<button class="btn btn-sm btn-outline-danger fw-bold px-3 ms-1 btn-action-leave" data-id="{{ $leave->id }}" data-status="Rejected">Reject</button>
|
||||
</td>
|
||||
</tr>
|
||||
@empty
|
||||
<tr>
|
||||
<td colspan="5" class="text-center py-5 text-muted small">
|
||||
<i class="bi bi-check2-circle fs-3 d-block mb-2 text-success"></i> All caught up. No pending leave requests.
|
||||
</td>
|
||||
</tr>
|
||||
@endforelse
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- TAB 2: DAILY REPORTS TRACKING -->
|
||||
<div class="tab-pane fade" id="reports-pane" role="tabpanel">
|
||||
<div class="d-flex justify-content-between align-items-center mb-3">
|
||||
<h6 class="fw-bold text-secondary mb-0">Report Submission Metrics</h6>
|
||||
<form class="d-flex gap-2" method="GET" action="{{ route('management.index') }}">
|
||||
<!-- Keeps the tab active on reload -->
|
||||
<input type="hidden" name="active_tab" value="reports-pane">
|
||||
<input type="date" name="start_date" class="form-control form-control-sm" value="{{ $startDate }}" required>
|
||||
<input type="date" name="end_date" class="form-control form-control-sm" value="{{ $endDate }}" required>
|
||||
<button type="submit" class="btn btn-sm btn-primary fw-bold">Filter</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="table-responsive bg-white border rounded shadow-sm">
|
||||
<table class="table table-hover align-middle mb-0">
|
||||
<thead class="table-light text-secondary" style="font-size: 0.85rem;">
|
||||
<tr>
|
||||
<th class="ps-3">Staff Member</th>
|
||||
<th>Designation</th>
|
||||
<th>Reports Submitted</th>
|
||||
<th class="text-end pe-3">Performance (Approx)</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@foreach($staffReports as $staff)
|
||||
@php
|
||||
// Calculate working days assuming 5-day work week roughly (can be refined based on actual business logic)
|
||||
$start = \Carbon\Carbon::parse($startDate);
|
||||
$end = \Carbon\Carbon::parse($endDate);
|
||||
$workDays = max($start->diffInDaysFiltered(function (Carbon\Carbon $date) {
|
||||
return $date->isWeekday();
|
||||
}, $end), 1); // Avoid division by zero
|
||||
|
||||
$completionPercentage = min(round(($staff->daily_reports_count / $workDays) * 100), 100);
|
||||
$barColor = $completionPercentage >= 80 ? 'bg-success' : ($completionPercentage >= 50 ? 'bg-warning' : 'bg-danger');
|
||||
@endphp
|
||||
<tr>
|
||||
<td class="ps-3 fw-bold text-dark">
|
||||
<i class="bi bi-person-circle text-secondary me-2"></i>{{ $staff->name }}
|
||||
</td>
|
||||
<td class="text-secondary small">{{ $staff->designation ?? 'Staff' }}</td>
|
||||
<td>
|
||||
<span class="badge bg-primary rounded-pill px-3">{{ $staff->daily_reports_count }}</span>
|
||||
<span class="text-muted small ms-1">/ ~{{ $workDays }} expected</span>
|
||||
</td>
|
||||
<td class="text-end pe-3" style="width: 25%;">
|
||||
<div class="d-flex align-items-center justify-content-end">
|
||||
<span class="fw-bold me-2" style="font-size: 0.8rem;">{{ $completionPercentage }}%</span>
|
||||
<div class="progress flex-grow-1" style="height: 6px; max-width: 100px;">
|
||||
<div class="progress-bar {{ $barColor }}" role="progressbar" style="width: {{ $completionPercentage }}%"></div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
@endforeach
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
@push('scripts')
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
// Keep active tab on reload if returning from a filter submission
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
const activeTab = urlParams.get('active_tab');
|
||||
if (activeTab) {
|
||||
$('.nav-tabs button[data-bs-target="#' + activeTab + '"]').tab('show');
|
||||
}
|
||||
|
||||
// Handle Leave Approval / Rejection
|
||||
$('.btn-action-leave').on('click', function(e) {
|
||||
e.preventDefault();
|
||||
let leaveId = $(this).data('id');
|
||||
let actionStatus = $(this).data('status');
|
||||
let confirmColor = actionStatus === 'Approved' ? '#198754' : '#dc3545';
|
||||
|
||||
Swal.fire({
|
||||
title: `Mark as ${actionStatus}?`,
|
||||
text: `This will update the staff member's leave request.`,
|
||||
icon: 'warning',
|
||||
showCancelButton: true,
|
||||
confirmButtonColor: confirmColor,
|
||||
confirmButtonText: `Yes, ${actionStatus}`
|
||||
}).then((result) => {
|
||||
if (result.isConfirmed) {
|
||||
$.ajax({
|
||||
url: "{{ url('management/leaves') }}/" + leaveId,
|
||||
type: 'POST',
|
||||
data: {
|
||||
_token: '{{ csrf_token() }}',
|
||||
_method: 'PUT',
|
||||
status: actionStatus
|
||||
},
|
||||
success: function(response) {
|
||||
if (response.success) {
|
||||
Swal.fire({
|
||||
icon: 'success',
|
||||
title: 'Updated',
|
||||
text: response.message,
|
||||
timer: 1500,
|
||||
showConfirmButton: false
|
||||
}).then(() => location.reload());
|
||||
}
|
||||
},
|
||||
error: function() {
|
||||
Swal.fire('Error', 'Could not update the leave status.', 'error');
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
@endpush
|
||||
@@ -66,9 +66,10 @@
|
||||
<div class="col-md-3">
|
||||
<select name="connection_status" class="form-select bg-white" onchange="this.form.submit()">
|
||||
<option value="">Any Status</option>
|
||||
<option value="Active" {{ request('link_type') == 'vpn' ? 'selected' : '' }}>Active</option>
|
||||
<option value="Inactive" {{ request('link_type') == 'direct' ? 'selected' : '' }}>Inactive</option>
|
||||
<option value="Pending" {{ request('link_type') == 'direct' ? 'selected' : '' }}>Pending</option>
|
||||
<option value="Active" {{ request('connection_status') == 'Active' ? 'selected' : '' }}>Active</option>
|
||||
<option value="Inactive" {{ request('connection_status') == 'Inactive' ? 'selected' : '' }}>Inactive</option>
|
||||
<option value="Pending" {{ request('connection_status') == 'Pending' ? 'selected' : '' }}>Pending</option>
|
||||
<option value="Testing" {{ request('connection_status') == 'Testing' ? 'selected' : '' }}>Testing</option>
|
||||
</select>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
258
resources/views/network_operators/partials/modals.blade.php
Normal file
258
resources/views/network_operators/partials/modals.blade.php
Normal file
@@ -0,0 +1,258 @@
|
||||
<!-- 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>
|
||||
<!-- Add Document Modal -->
|
||||
<div class="modal fade" id="addDocumentModal" tabindex="-1" aria-hidden="true">
|
||||
<div class="modal-dialog modal-dialog-centered modal-lg">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header bg-light">
|
||||
<h5 class="modal-title fw-bold">Upload Documents</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
|
||||
<form id="addDocumentForm" action="{{ route('mnos.documents.store', $operator->id) }}" method="POST" enctype="multipart/form-data">
|
||||
@csrf
|
||||
<div class="modal-body p-4">
|
||||
<div id="documentModalAlert"></div>
|
||||
|
||||
<div id="documentRowsContainer">
|
||||
<!-- Initial Row -->
|
||||
<div class="row g-2 mb-3 document-row">
|
||||
<div class="col-md-5">
|
||||
<label class="form-label text-secondary fw-semibold small">Document Name *</label>
|
||||
<input type="text" name="document_names[]" class="form-control" placeholder="e.g. Signed NDA" required>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label class="form-label text-secondary fw-semibold small">File *</label>
|
||||
<input type="file" name="documents[]" class="form-control" required>
|
||||
</div>
|
||||
<div class="col-md-1 d-flex align-items-end">
|
||||
<button type="button" class="btn btn-outline-danger w-100 remove-doc-row" disabled>
|
||||
<i class="bi bi-trash"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button type="button" id="addDocRowBtn" class="btn btn-sm btn-light text-primary border fw-bold mt-2">
|
||||
<i class="bi bi-plus-lg me-1"></i> Add Another File
|
||||
</button>
|
||||
</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="btnSubmitDocuments" class="btn text-white btn-sm fw-bold px-4" style="background-color: #5c4df0;">Upload All</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- EDIT MNO MODAL -->
|
||||
<div class="modal fade" id="editOperatorModal" tabindex="-1" aria-hidden="true">
|
||||
<div class="modal-dialog modal-dialog-centered modal-lg">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header bg-light border-bottom-0">
|
||||
<h5 class="modal-title fw-bold">Edit MNO Partner</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
|
||||
<form id="editOperatorForm" novalidate>
|
||||
@csrf
|
||||
@method('PUT')
|
||||
<input type="hidden" id="edit_mno_id">
|
||||
|
||||
<div class="modal-body p-0">
|
||||
<ul class="nav nav-tabs px-4 pt-3 bg-light" role="tablist">
|
||||
<li class="nav-item"><button class="nav-link active fw-bold" data-bs-toggle="tab" data-bs-target="#edit-tab-basic" type="button">Basic & Tech</button></li>
|
||||
<li class="nav-item"><button class="nav-link fw-bold text-dark" data-bs-toggle="tab" data-bs-target="#edit-tab-contacts" type="button">Contacts</button></li>
|
||||
<li class="nav-item"><button class="nav-link fw-bold text-dark" data-bs-toggle="tab" data-bs-target="#edit-tab-billing" type="button">Billing</button></li>
|
||||
</ul>
|
||||
|
||||
<div class="tab-content p-4">
|
||||
<!-- TAB 1: BASIC INFO -->
|
||||
<div class="tab-pane fade show active" id="edit-tab-basic">
|
||||
<div class="row g-3">
|
||||
<div class="col-md-6">
|
||||
<label class="form-label text-secondary fw-semibold small">Name *</label>
|
||||
<input type="text" class="form-control" name="name" id="edit_name" required>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label class="form-label text-secondary fw-semibold small">Country *</label>
|
||||
<input type="text" class="form-control" name="country" id="edit_country" required>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label class="form-label text-secondary fw-semibold small">Connection Status</label>
|
||||
<select class="form-select" name="connection_status" id="edit_connection_status">
|
||||
<option value="Active">Active</option>
|
||||
<option value="Inactive">Inactive</option>
|
||||
<option value="Testing">Testing</option>
|
||||
<option value="Pending">Pending</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label class="form-label text-secondary fw-semibold small">Connection Type</label>
|
||||
<select class="form-select" name="connection_type" id="edit_connection_type">
|
||||
<option value="DIRECT">Direct</option>
|
||||
<option value="VPN">VPN</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- TAB 2: CONTACTS -->
|
||||
<div class="tab-pane fade" id="edit-tab-contacts">
|
||||
<div class="row g-3">
|
||||
<div class="col-md-6">
|
||||
<label class="form-label text-secondary fw-semibold small">Account Manager</label>
|
||||
<select class="form-select" name="mno_account_manager" id="edit_mno_account_manager">
|
||||
<option value="">Select Account Manager</option>
|
||||
@foreach($staffMembers as $staff)
|
||||
<option value="{{ $staff->name }}">{{ $staff->name }}</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label class="form-label text-secondary fw-semibold small">Technical Support Lead</label>
|
||||
<input type="text" class="form-control" name="technical_support_person" id="edit_technical_support_person">
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<label class="form-label text-secondary fw-semibold small">Contact Person</label>
|
||||
<input type="text" class="form-control" name="contact_person" id="edit_contact_person">
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<label class="form-label text-secondary fw-semibold small">Contact Phone</label>
|
||||
<input type="text" class="form-control" name="contact_person_phone" id="edit_contact_person_phone">
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<label class="form-label text-secondary fw-semibold small">Contact Email</label>
|
||||
<input type="email" class="form-control" name="contact_person_email" id="edit_contact_person_email">
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<label class="form-label text-secondary fw-semibold small">Support MS Teams / Skype</label>
|
||||
<input type="text" class="form-control" name="support_skype" id="edit_support_skype">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- TAB 3: BILLING -->
|
||||
<div class="tab-pane fade" id="edit-tab-billing">
|
||||
<div class="row g-3">
|
||||
<div class="col-12 mt-3 mb-2 border-bottom pb-2">
|
||||
<h6 class="fw-bold text-dark mb-0"><i class="bi bi-file-earmark-text me-2"></i>Contract Details</h6>
|
||||
</div>
|
||||
|
||||
<div class="col-md-4">
|
||||
<label class="form-label text-secondary fw-semibold small">Contract Type</label>
|
||||
<select class="form-select" name="contract_type" id="edit_contract_type">
|
||||
<option value="">Select Type...</option>
|
||||
<option value="Bilateral">Bilateral</option>
|
||||
<option value="Unilateral">Unilateral</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<label class="form-label text-secondary fw-semibold small">Contract Validity</label>
|
||||
<select class="form-select" name="contract_validity" id="edit_contract_validity">
|
||||
<option value="">Select Validity...</option>
|
||||
<option value="Quarterly">Quarterly</option>
|
||||
<option value="Biannual">Biannual</option>
|
||||
<option value="Yearly">Yearly</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<label class="form-label text-secondary fw-semibold small">Auto Renew?</label>
|
||||
<select class="form-select" name="contract_auto_renew" id="edit_contract_auto_renew">
|
||||
<option value="1">Yes</option>
|
||||
<option value="0">No</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-md-4" id="renewal_date_container" style="display: none;">
|
||||
<label class="form-label text-secondary fw-semibold small">Next Renewal Date *</label>
|
||||
<input type="date" class="form-control" name="next_renewal_date" id="edit_next_renewal_date">
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<label class="form-label text-secondary fw-semibold small">Buying Rate</label>
|
||||
<input type="number" step="0.0001" class="form-control" name="buying_rate" id="edit_buying_rate">
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<label class="form-label text-secondary fw-semibold small">Rate Type</label>
|
||||
<input type="text" class="form-control" name="rate_type" id="edit_rate_type" placeholder="e.g. Flat, Tiered">
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<label class="form-label text-secondary fw-semibold small">Payment Terms</label>
|
||||
<input type="text" class="form-control" name="payment_terms" id="edit_payment_terms" placeholder="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer bg-light border-top-0">
|
||||
<button type="button" class="btn btn-outline-secondary btn-sm" data-bs-dismiss="modal">Cancel</button>
|
||||
<button type="submit" id="btnUpdateOperator" class="btn text-white btn-sm fw-bold px-4" style="background-color: #5c4df0;">
|
||||
Update Partner
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -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
|
||||
496
resources/views/servers/index.blade.php
Normal file
496
resources/views/servers/index.blade.php
Normal file
@@ -0,0 +1,496 @@
|
||||
@extends('layouts.masterbeta')
|
||||
|
||||
@section('title', 'Click ERP - Server Infrastructure')
|
||||
|
||||
@section('breadcrumbs')
|
||||
<a href="{{ url('/') }}" class="text-secondary text-decoration-none"><i class="bi bi-house me-2"></i></a>
|
||||
<i class="bi bi-chevron-right text-secondary me-2" style="font-size: 0.8rem;"></i>
|
||||
<span class="fw-bold" style="font-size: 0.95rem;">Servers</span>
|
||||
@endsection
|
||||
|
||||
@section('content')
|
||||
<div class="d-flex justify-content-between align-items-center mb-4">
|
||||
<div>
|
||||
<h4 class="fw-bold mb-1">Infrastructure Management</h4>
|
||||
<p class="text-secondary mb-0" style="font-size: 0.9rem;">Server list</p>
|
||||
</div>
|
||||
<button class="btn text-white fw-bold d-flex align-items-center" style="background-color: #5c4df0; border-radius: 8px;" data-bs-toggle="modal" data-bs-target="#addServerModal">
|
||||
<i class="bi bi-plus-lg me-2"></i> Add Server
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="content-card shadow-sm bg-white rounded-3 overflow-hidden">
|
||||
<!-- Filters Header -->
|
||||
<div class="p-3 border-bottom bg-light bg-opacity-50">
|
||||
<div class="row g-3 align-items-center">
|
||||
<div class="col-md-5">
|
||||
<div class="input-group">
|
||||
<span class="input-group-text bg-white border-end-0 text-secondary"><i class="bi bi-search"></i></span>
|
||||
<input type="text" class="form-control bg-white border-start-0 ps-0" id="searchServer" placeholder="Search by name, IP, or OS ...">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="table-responsive">
|
||||
<table class="table table-hover align-middle mb-0">
|
||||
<thead class="table-light text-secondary" style="font-size: 0.85rem;">
|
||||
<tr>
|
||||
<th class="ps-4">Server / IP</th>
|
||||
<th>OS Version</th>
|
||||
<th>Services</th>
|
||||
<th>Status</th>
|
||||
<th class="text-end pe-4">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@forelse($servers as $server)
|
||||
<tr>
|
||||
<td class="ps-4">
|
||||
<div class="fw-bold text-dark">{{ $server->name }}</div>
|
||||
<div class="text-secondary font-monospace small"><i class="bi bi-hdd-network me-1"></i>{{ $server->ip_address }}</div>
|
||||
</td>
|
||||
<td class="text-secondary small">{{ $server->os_version ?? 'Unknown' }}</td>
|
||||
<td>
|
||||
@if(is_array($server->services))
|
||||
@foreach($server->services as $service)
|
||||
<span class="badge bg-secondary bg-opacity-10 text-secondary border me-1">{{ $service }}</span>
|
||||
@endforeach
|
||||
@else
|
||||
<span class="text-muted small">None</span>
|
||||
@endif
|
||||
</td>
|
||||
<td>
|
||||
<span class="badge {{ $server->status == 'Active' ? 'bg-success' : 'bg-warning' }} bg-opacity-10 text-{{ $server->status == 'Active' ? 'success' : 'warning' }}">
|
||||
{{ $server->status }}
|
||||
</span>
|
||||
</td>
|
||||
<td class="text-end pe-4">
|
||||
<!-- Secure Access Button -->
|
||||
<button class="btn btn-sm btn-danger fw-bold btn-access-credentials me-2" data-id="{{ $server->id }}" data-name="{{ $server->name }}">
|
||||
<i class="bi bi-shield-lock-fill me-1"></i> View Password
|
||||
</button>
|
||||
|
||||
<button class="btn btn-sm btn-light text-primary btn-edit-server" data-id="{{ $server->id }}" title="Edit">
|
||||
<i class="bi bi-pencil"></i>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
@empty
|
||||
<tr>
|
||||
<td colspan="5" class="text-center py-5 text-secondary">
|
||||
<i class="bi bi-server fs-1 text-muted mb-2 d-block"></i>
|
||||
No servers added yet.
|
||||
</td>
|
||||
</tr>
|
||||
@endforelse
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
@push('modals')
|
||||
<!-- OTP VERIFICATION MODAL -->
|
||||
<div class="modal fade" id="otpModal" tabindex="-1" aria-hidden="true" data-bs-backdrop="static">
|
||||
<div class="modal-dialog modal-dialog-centered modal-sm">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header bg-dark text-white border-bottom-0">
|
||||
<h6 class="modal-title fw-bold"><i class="bi bi-shield-lock me-2"></i>Security Check</h6>
|
||||
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
|
||||
<form id="verifyOtpForm">
|
||||
@csrf
|
||||
<div class="modal-body p-4 text-center">
|
||||
<input type="hidden" id="auth_server_id" name="server_id">
|
||||
|
||||
<i class="bi bi-envelope-check text-success" style="font-size: 2.5rem;"></i>
|
||||
<p class="text-secondary small mt-2 mb-3">An authorization code has been sent to your email. Enter it below to access credentials for <strong id="auth_server_name" class="text-dark"></strong>.</p>
|
||||
|
||||
<div class="mb-3">
|
||||
<input type="text" class="form-control form-control-lg text-center fw-bold letter-spacing-3" name="otp" id="otp_input" placeholder="000000" maxlength="6" required autocomplete="off" style="letter-spacing: 5px;">
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer bg-light border-top-0 d-flex justify-content-between">
|
||||
<button type="button" class="btn btn-sm btn-link text-secondary text-decoration-none" data-bs-dismiss="modal">Cancel</button>
|
||||
<button type="submit" id="btnVerifyOtp" class="btn btn-dark btn-sm fw-bold px-4">
|
||||
Unlock
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- ADD SERVER MODAL -->
|
||||
<div class="modal fade" id="addServerModal" tabindex="-1" aria-hidden="true">
|
||||
<div class="modal-dialog modal-dialog-centered modal-lg">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header bg-light border-bottom-0">
|
||||
<h5 class="modal-title fw-bold">Add New Server</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
|
||||
<form id="addServerForm">
|
||||
@csrf
|
||||
<div class="modal-body p-4">
|
||||
<div class="row g-3">
|
||||
<div class="col-md-6">
|
||||
<label class="form-label text-secondary fw-semibold small">Server Name *</label>
|
||||
<input type="text" class="form-control" name="name" required placeholder="e.g. Main PBX Engine">
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label class="form-label text-secondary fw-semibold small">IP Address *</label>
|
||||
<input type="text" class="form-control font-monospace" name="ip_address" required placeholder="192.168.x.x">
|
||||
</div>
|
||||
|
||||
<div class="col-md-6">
|
||||
<label class="form-label text-secondary fw-semibold small">OS Version</label>
|
||||
<input type="text" class="form-control" name="os_version" placeholder="e.g. AlmaLinux 9, Debian 12">
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label class="form-label text-secondary fw-semibold small">Status *</label>
|
||||
<select class="form-select" name="status" required>
|
||||
<option value="Active" selected>Active</option>
|
||||
<option value="Maintenance">Maintenance</option>
|
||||
<option value="Inactive">Inactive</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="col-12 mt-4 mb-2 border-bottom pb-2">
|
||||
<h6 class="fw-bold text-dark mb-0"><i class="bi bi-shield-lock me-2"></i>Access Credentials</h6>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6">
|
||||
<label class="form-label text-secondary fw-semibold small">Username *</label>
|
||||
<input type="text" class="form-control" name="username" required value="root">
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label class="form-label text-secondary fw-semibold small">Password *</label>
|
||||
<input type="password" class="form-control" name="password" required>
|
||||
</div>
|
||||
|
||||
<div class="col-12 mt-3">
|
||||
<label class="form-label text-secondary fw-semibold small">Running Services</label>
|
||||
<select class="form-select select2-services" name="services[]" multiple="multiple" style="width: 100%;">
|
||||
<!-- Services will be entered dynamically as tags -->
|
||||
</select>
|
||||
<div class="form-text text-muted" style="font-size: 0.75rem;">Type a service (e.g., Docker, Asterisk, PostGIS) and press enter.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer bg-light border-top-0">
|
||||
<button type="button" class="btn btn-outline-secondary btn-sm" data-bs-dismiss="modal">Cancel</button>
|
||||
<button type="submit" id="btnSaveServer" class="btn text-white btn-sm fw-bold px-4" style="background-color: #5c4df0;">
|
||||
Save Server
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- EDIT SERVER MODAL -->
|
||||
<div class="modal fade" id="editServerModal" tabindex="-1" aria-hidden="true">
|
||||
<div class="modal-dialog modal-dialog-centered modal-lg">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header bg-light border-bottom-0">
|
||||
<h5 class="modal-title fw-bold">Edit Server Settings</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
|
||||
<form id="editServerForm">
|
||||
@csrf
|
||||
@method('PUT')
|
||||
<input type="hidden" id="edit_server_id">
|
||||
|
||||
<div class="modal-body p-4">
|
||||
<div class="row g-3">
|
||||
<div class="col-md-6">
|
||||
<label class="form-label text-secondary fw-semibold small">Server Name *</label>
|
||||
<input type="text" class="form-control" name="name" id="edit_name" required>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label class="form-label text-secondary fw-semibold small">IP Address *</label>
|
||||
<input type="text" class="form-control font-monospace" name="ip_address" id="edit_ip_address" required>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6">
|
||||
<label class="form-label text-secondary fw-semibold small">OS Version</label>
|
||||
<input type="text" class="form-control" name="os_version" id="edit_os_version">
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label class="form-label text-secondary fw-semibold small">Status *</label>
|
||||
<select class="form-select" name="status" id="edit_status" required>
|
||||
<option value="Active">Active</option>
|
||||
<option value="Maintenance">Maintenance</option>
|
||||
<option value="Inactive">Inactive</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="col-12 mt-4 mb-2 border-bottom pb-2">
|
||||
<h6 class="fw-bold text-dark mb-0"><i class="bi bi-shield-lock me-2"></i>Access Credentials</h6>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6">
|
||||
<label class="form-label text-secondary fw-semibold small">Username *</label>
|
||||
<input type="text" class="form-control" name="username" id="edit_username" required>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label class="form-label text-secondary fw-semibold small">Update Password</label>
|
||||
<input type="password" class="form-control" name="password" placeholder="Leave blank to keep current password">
|
||||
</div>
|
||||
|
||||
<div class="col-12 mt-3">
|
||||
<label class="form-label text-secondary fw-semibold small">Running Services</label>
|
||||
<select class="form-select select2-services" name="services[]" id="edit_services" multiple="multiple" style="width: 100%;"></select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer bg-light border-top-0">
|
||||
<button type="button" class="btn btn-outline-secondary btn-sm" data-bs-dismiss="modal">Cancel</button>
|
||||
<button type="submit" id="btnUpdateServer" class="btn text-white btn-sm fw-bold px-4" style="background-color: #5c4df0;">
|
||||
Update Server
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endpush
|
||||
|
||||
@push('scripts')
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
// 1. Request OTP when clicking "View Password"
|
||||
$('.btn-access-credentials').on('click', function(e) {
|
||||
e.preventDefault();
|
||||
let $btn = $(this);
|
||||
let serverId = $btn.data('id');
|
||||
let serverName = $btn.data('name');
|
||||
let originalHtml = $btn.html();
|
||||
|
||||
// Set loading state on button
|
||||
$btn.html('<span class="spinner-border spinner-border-sm"></span>').prop('disabled', true);
|
||||
|
||||
$.ajax({
|
||||
url: `${base_url}/servers/${serverId}/request-otp`,
|
||||
type: 'POST',
|
||||
data: { _token: '{{ csrf_token() }}' },
|
||||
success: function(response) {
|
||||
if (response.success) {
|
||||
// Setup and show modal
|
||||
$('#auth_server_id').val(serverId);
|
||||
$('#auth_server_name').text(serverName);
|
||||
$('#otp_input').val('');
|
||||
$('#otpModal').modal('show');
|
||||
|
||||
// Auto-focus input after modal opens
|
||||
setTimeout(() => $('#otp_input').focus(), 500);
|
||||
}
|
||||
},
|
||||
error: function() {
|
||||
Swal.fire('Error', 'Failed to send OTP. Please check your email configuration.', 'error');
|
||||
},
|
||||
complete: function() {
|
||||
$btn.html(originalHtml).prop('disabled', false);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// 2. Submit OTP and Display Credentials
|
||||
$('#verifyOtpForm').on('submit', function(e) {
|
||||
e.preventDefault();
|
||||
let $form = $(this);
|
||||
let $btn = $('#btnVerifyOtp');
|
||||
let serverId = $('#auth_server_id').val();
|
||||
let originalText = $btn.html();
|
||||
|
||||
$btn.html('<span class="spinner-border spinner-border-sm me-2"></span>Verifying...').prop('disabled', true);
|
||||
$form.find('.is-invalid').removeClass('is-invalid');
|
||||
|
||||
$.ajax({
|
||||
url: `${base_url}/servers/${serverId}/verify-otp`,
|
||||
type: 'POST',
|
||||
data: $form.serialize(),
|
||||
success: function(response) {
|
||||
if (response.success) {
|
||||
$('#otpModal').modal('hide');
|
||||
|
||||
// Display credentials securely in a SweetAlert
|
||||
Swal.fire({
|
||||
icon: 'success',
|
||||
title: 'Access Granted',
|
||||
html: `
|
||||
<div class="text-start mt-3 p-3 bg-light border rounded">
|
||||
<div class="mb-2"><span class="text-muted small">Username:</span><br> <strong class="fs-5">${response.username}</strong></div>
|
||||
<div><span class="text-muted small">Password:</span><br> <strong class="fs-5 text-primary font-monospace" style="user-select: all;">${response.password}</strong></div>
|
||||
</div>
|
||||
<div class="text-muted small mt-3"><i class="bi bi-info-circle me-1"></i>This event has been logged.</div>
|
||||
`,
|
||||
confirmButtonColor: '#212529',
|
||||
confirmButtonText: 'Close & Clear'
|
||||
});
|
||||
}
|
||||
},
|
||||
error: function(xhr) {
|
||||
if (xhr.status === 422) {
|
||||
$('#otp_input').addClass('is-invalid');
|
||||
// Shake animation for incorrect code
|
||||
$('#otpModal .modal-content').addClass('animate__animated animate__headShake');
|
||||
setTimeout(() => $('#otpModal .modal-content').removeClass('animate__animated animate__headShake'), 500);
|
||||
} else {
|
||||
Swal.fire('Error', 'A server error occurred.', 'error');
|
||||
}
|
||||
},
|
||||
complete: function() {
|
||||
$btn.html(originalText).prop('disabled', false);
|
||||
}
|
||||
});
|
||||
});
|
||||
// Initialize Select2 for dynamic tagging
|
||||
$('.select2-services').select2({
|
||||
theme: 'bootstrap-5',
|
||||
tags: true, // Allows typing custom services
|
||||
tokenSeparators: [',', ' '],
|
||||
dropdownParent: function() {
|
||||
if ($('#addServerModal').hasClass('show')) return $('#addServerModal');
|
||||
if ($('#editServerModal').hasClass('show')) return $('#editServerModal');
|
||||
return $(document.body);
|
||||
}
|
||||
});
|
||||
|
||||
// Handle Add Server Submission
|
||||
$('#addServerForm').on('submit', function(e) {
|
||||
e.preventDefault();
|
||||
let $form = $(this);
|
||||
let $btn = $('#btnSaveServer');
|
||||
let originalText = $btn.html();
|
||||
|
||||
$btn.html('<span class="spinner-border spinner-border-sm me-2"></span>Saving...').prop('disabled', true);
|
||||
$form.find('.is-invalid').removeClass('is-invalid');
|
||||
|
||||
$.ajax({
|
||||
url: "{{ route('servers.store') }}",
|
||||
type: 'POST',
|
||||
data: $form.serialize(),
|
||||
success: function(response) {
|
||||
$('#addServerModal').modal('hide');
|
||||
Swal.fire({
|
||||
icon: 'success',
|
||||
title: 'Added!',
|
||||
text: response.message,
|
||||
timer: 1500,
|
||||
showConfirmButton: false
|
||||
}).then(() => location.reload());
|
||||
},
|
||||
error: function(xhr) {
|
||||
if (xhr.status === 422) {
|
||||
$.each(xhr.responseJSON.errors, function(key, value) {
|
||||
let $input = $form.find('[name="' + key + '"]');
|
||||
if (key === 'services') $input = $form.find('[name="services[]"]');
|
||||
|
||||
if ($input.hasClass('select2-hidden-accessible')) {
|
||||
$input.next('.select2-container').addClass('is-invalid');
|
||||
} else {
|
||||
$input.addClass('is-invalid');
|
||||
}
|
||||
});
|
||||
} else {
|
||||
Swal.fire('Error', 'An unexpected error occurred.', 'error');
|
||||
}
|
||||
},
|
||||
complete: function() {
|
||||
$btn.html(originalText).prop('disabled', false);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Handle Edit Modal Trigger
|
||||
$(document).on('click', '.btn-edit-server', function(e) {
|
||||
e.preventDefault();
|
||||
let serverId = $(this).data('id');
|
||||
|
||||
$.ajax({
|
||||
url: `${base_url}/servers/${serverId}`,
|
||||
type: 'GET',
|
||||
success: function(server) {
|
||||
$('#edit_server_id').val(server.id);
|
||||
$('#edit_name').val(server.name);
|
||||
$('#edit_ip_address').val(server.ip_address);
|
||||
$('#edit_os_version').val(server.os_version);
|
||||
$('#edit_username').val(server.username);
|
||||
$('#edit_status').val(server.status);
|
||||
|
||||
// Populate Select2 tags
|
||||
let $services = $('#edit_services');
|
||||
$services.val(null).trigger('change');
|
||||
if (server.services && Array.isArray(server.services)) {
|
||||
server.services.forEach(function(val) {
|
||||
if ($services.find("option[value='" + val + "']").length === 0) {
|
||||
$services.append(new Option(val, val, true, true));
|
||||
}
|
||||
});
|
||||
$services.val(server.services).trigger('change');
|
||||
}
|
||||
|
||||
$('#editServerModal').modal('show');
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Handle Edit Server Submission
|
||||
$('#editServerForm').on('submit', function(e) {
|
||||
e.preventDefault();
|
||||
let $form = $(this);
|
||||
let serverId = $('#edit_server_id').val();
|
||||
let $btn = $('#btnUpdateServer');
|
||||
let originalText = $btn.html();
|
||||
|
||||
$btn.html('<span class="spinner-border spinner-border-sm me-2"></span>Updating...').prop('disabled', true);
|
||||
$form.find('.is-invalid').removeClass('is-invalid');
|
||||
|
||||
$.ajax({
|
||||
url: `${base_url}/servers/${serverId}`,
|
||||
type: 'POST',
|
||||
data: $form.serialize(),
|
||||
success: function(response) {
|
||||
$('#editServerModal').modal('hide');
|
||||
Swal.fire({
|
||||
icon: 'success',
|
||||
title: 'Updated!',
|
||||
text: response.message,
|
||||
timer: 1500,
|
||||
showConfirmButton: false
|
||||
}).then(() => location.reload());
|
||||
},
|
||||
error: function(xhr) {
|
||||
// Same error handling logic as Add Server
|
||||
if (xhr.status === 422) {
|
||||
$.each(xhr.responseJSON.errors, function(key, value) {
|
||||
let $input = $form.find('[name="' + key + '"]');
|
||||
if (key === 'services') $input = $form.find('[name="services[]"]');
|
||||
|
||||
if ($input.hasClass('select2-hidden-accessible')) {
|
||||
$input.next('.select2-container').addClass('is-invalid');
|
||||
} else {
|
||||
$input.addClass('is-invalid');
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
complete: function() {
|
||||
$btn.html(originalText).prop('disabled', false);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Clean up modals on close
|
||||
$('#addServerModal, #editServerModal').on('hidden.bs.modal', function () {
|
||||
$(this).find('form')[0].reset();
|
||||
$(this).find('.select2-services').val(null).trigger('change');
|
||||
$(this).find('.is-invalid').removeClass('is-invalid');
|
||||
});
|
||||
});
|
||||
</script>
|
||||
@endpush
|
||||
@@ -33,7 +33,7 @@
|
||||
<div class="d-flex justify-content-between align-items-center mb-4">
|
||||
<div>
|
||||
<h4 class="fw-bold mb-1">Short Codes Management</h4>
|
||||
<p class="text-secondary mb-0" style="font-size: 0.9rem;">Manage SMS, USSD, and Voice short codes and validity periods.</p>
|
||||
<p class="text-secondary mb-0" style="font-size: 0.9rem;">Manage SMS, USSD, and Voice short codes and their expiry dates.</p>
|
||||
</div>
|
||||
<button class="btn text-white fw-bold d-flex align-items-center" style="background-color: #5c4df0; border-radius: 8px;" id="btnOpenShortCodeModal">
|
||||
<i class="bi bi-plus-lg me-2"></i> Add Short Code
|
||||
@@ -126,7 +126,7 @@
|
||||
@endif
|
||||
</td>
|
||||
<td>
|
||||
<div class="fw-bold text-dark">${{ number_format($code->monthly_fee, 2) }}</div>
|
||||
<div class="fw-bold text-dark">{{ number_format($code->monthly_fee, 2) }}</div>
|
||||
<div class="text-secondary" style="font-size: 0.75rem;">Monthly Fee</div>
|
||||
</td>
|
||||
<td>
|
||||
|
||||
@@ -329,7 +329,7 @@
|
||||
<th>Full Name</th>
|
||||
<th>Relationship</th>
|
||||
<th>Phone</th>
|
||||
<th>Medical Details</th>
|
||||
<!-- <th>Medical Details</th> -->
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="viewStaffDependentsList">
|
||||
@@ -598,9 +598,8 @@
|
||||
dependentsHtml += `
|
||||
<tr>
|
||||
<td class="fw-bold">${dep.fullname}</td>
|
||||
<td><span class="badge bg-secondary bg-opacity-10 text-dark border">${dep.relationship}</span></td>
|
||||
<td><span class="badge bg-warning bg-opacity-10 text-dark border">${dep.relationship}</span></td>
|
||||
<td>${dep.phone || 'N/A'}</td>
|
||||
<td class="text-secondary">${dep.medical_details || 'None'}</td>
|
||||
</tr>
|
||||
`;
|
||||
});
|
||||
|
||||
491
resources/views/vpns/index.blade copy.php
Normal file
491
resources/views/vpns/index.blade copy.php
Normal file
@@ -0,0 +1,491 @@
|
||||
@extends('layouts.masterbeta')
|
||||
|
||||
@section('title', 'Click ERP - VPN Management')
|
||||
|
||||
@section('breadcrumbs')
|
||||
<a href="{{ url('/') }}" class="text-secondary text-decoration-none"><i class="bi bi-house me-2"></i></a>
|
||||
<i class="bi bi-chevron-right text-secondary me-2" style="font-size: 0.8rem;"></i>
|
||||
<span class="fw-bold" style="font-size: 0.95rem;">VPN Management</span>
|
||||
@endsection
|
||||
|
||||
@section('content')
|
||||
<div class="d-flex justify-content-between align-items-center mb-4">
|
||||
<div>
|
||||
<h4 class="fw-bold mb-1">VPN Management</h4>
|
||||
<p class="text-secondary mb-0" style="font-size: 0.9rem;">Manage IPsec configurations with partners.</p>
|
||||
</div>
|
||||
<div class="d-flex gap-2">
|
||||
<!-- Global Standard Template Export -->
|
||||
<a href="{{ route('vpns.standard-template') }}" class="btn btn-outline-dark fw-bold d-flex align-items-center" style="border-radius: 8px;">
|
||||
<i class="bi bi-file-earmark-arrow-down me-2"></i> Standard Parameters
|
||||
</a>
|
||||
|
||||
<button class="btn text-white fw-bold d-flex align-items-center" style="background-color: #5c4df0; border-radius: 8px;" data-bs-toggle="modal" data-bs-target="#addVpnModal">
|
||||
<i class="bi bi-plus-lg me-2"></i> Add VPN Config
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-card shadow-sm bg-white rounded-3 overflow-hidden">
|
||||
<!-- Filters Header -->
|
||||
<div class="p-3 border-bottom bg-light bg-opacity-50">
|
||||
<div class="row g-3 align-items-center">
|
||||
<div class="col-md-5">
|
||||
<div class="input-group">
|
||||
<span class="input-group-text bg-white border-end-0 text-secondary"><i class="bi bi-search"></i></span>
|
||||
<input type="text" class="form-control bg-white border-start-0 ps-0" id="searchVpn" placeholder="Search by partner name or IP...">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="table-responsive">
|
||||
<table class="table table-hover align-middle mb-0">
|
||||
<thead class="table-light text-secondary" style="font-size: 0.85rem;">
|
||||
<tr>
|
||||
<th class="ps-4">Partner</th>
|
||||
<th>Gateways (Local ➔ Peer)</th>
|
||||
<th>Encryption Domains (Local ➔ Remote)</th>
|
||||
<th>Status</th>
|
||||
<th class="text-end pe-4">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@forelse($vpns as $vpn)
|
||||
<tr>
|
||||
<td class="ps-4 fw-bold text-dark">{{ $vpn->partner_name }}</td>
|
||||
<td>
|
||||
<div class="font-monospace small">
|
||||
<span class="text-primary">{{ $vpn->local_ip }}</span>
|
||||
<i class="bi bi-arrow-right mx-1 text-secondary"></i>
|
||||
<span class="text-danger">{{ $vpn->peer_ip }}</span>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="font-monospace small text-secondary">
|
||||
{{ $vpn->encryption_domain_local ?? 'Any' }}
|
||||
<i class="bi bi-arrow-right mx-1"></i>
|
||||
{{ $vpn->encryption_domain_remote ?? 'Any' }}
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<span class="badge {{ $vpn->status == 'Active' ? 'bg-success' : 'bg-warning' }} bg-opacity-10 text-{{ $vpn->status == 'Active' ? 'success' : 'warning' }}">
|
||||
{{ $vpn->status }}
|
||||
</span>
|
||||
</td>
|
||||
<td class="text-end pe-4">
|
||||
<button class="btn btn-sm btn-outline-dark fw-bold btn-export-vpn me-2" data-id="{{ $vpn->id }}">
|
||||
<i class="bi bi-download me-1"></i> Export
|
||||
</button>
|
||||
<button class="btn btn-sm btn-light text-primary btn-edit-vpn" data-id="{{ $vpn->id }}" title="Edit">
|
||||
<i class="bi bi-pencil"></i>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
@empty
|
||||
<tr>
|
||||
<td colspan="5" class="text-center py-5 text-secondary">
|
||||
<i class="bi bi-shield-slash fs-1 text-muted mb-2 d-block"></i>
|
||||
No VPN configurations added yet.
|
||||
</td>
|
||||
</tr>
|
||||
@endforelse
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
@if($vpns->hasPages())
|
||||
<div class="card-footer bg-white border-top p-3 d-flex justify-content-center">
|
||||
{{ $vpns->links('pagination::bootstrap-5') }}
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
@push('modals')
|
||||
<!-- ADD VPN MODAL -->
|
||||
<div class="modal fade" id="addVpnModal" tabindex="-1" aria-hidden="true">
|
||||
<div class="modal-dialog modal-dialog-centered modal-lg">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header bg-light border-bottom-0">
|
||||
<h5 class="modal-title fw-bold">Add VPN Configuration</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
|
||||
<form id="addVpnForm">
|
||||
@csrf
|
||||
<div class="modal-body p-0">
|
||||
<ul class="nav nav-tabs px-4 pt-3 bg-light" role="tablist">
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link active fw-bold" data-bs-toggle="tab" data-bs-target="#tab-basic" type="button">Basic Info</button>
|
||||
</li>
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link fw-bold text-dark" data-bs-toggle="tab" data-bs-target="#tab-phase1" type="button">Phase 1 (IKE)</button>
|
||||
</li>
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link fw-bold text-dark" data-bs-toggle="tab" data-bs-target="#tab-phase2" type="button">Phase 2 (IPSec)</button>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="tab-content p-4">
|
||||
<!-- TAB 1: BASIC INFO -->
|
||||
<div class="tab-pane fade show active" id="tab-basic">
|
||||
<!-- Place your existing Partner Name, Status, IPs, Subnets, and PSK fields here -->
|
||||
<div class="row g-3">
|
||||
<div class="col-md-6">
|
||||
<label class="form-label text-secondary fw-semibold small">Local Device</label>
|
||||
<input type="text" class="form-control" name="local_device" placeholder="e.g. Cisco Catalyst 8500">
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label class="form-label text-secondary fw-semibold small">Peer Device</label>
|
||||
<input type="text" class="form-control" name="peer_device" placeholder="e.g. FortiGate 61E">
|
||||
</div>
|
||||
<!-- ... existing gateway/subnet inputs ... -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- TAB 2: PHASE 1 (IKE) -->
|
||||
<div class="tab-pane fade" id="tab-phase1">
|
||||
<div class="row g-3">
|
||||
<div class="col-md-4">
|
||||
<label class="form-label text-secondary fw-semibold small">IKE Version *</label>
|
||||
<select class="form-select" name="ike_version">
|
||||
<option value="1">v1</option>
|
||||
<option value="2" selected>v2</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<label class="form-label text-secondary fw-semibold small">Encryption *</label>
|
||||
<select class="form-select" name="phase1_encryption">
|
||||
<option value="AES-128">AES-128</option>
|
||||
<option value="AES-256" selected>AES-256</option>
|
||||
<option value="3DES">3DES</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<label class="form-label text-secondary fw-semibold small">Hash *</label>
|
||||
<select class="form-select" name="phase1_hash">
|
||||
<option value="SHA-1">SHA-1</option>
|
||||
<option value="SHA-256" selected>SHA-256</option>
|
||||
<option value="SHA-512">SHA-512</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label class="form-label text-secondary fw-semibold small">DH Group *</label>
|
||||
<select class="form-select" name="phase1_dh_group">
|
||||
<option value="2">Group 2</option>
|
||||
<option value="14" selected>Group 14</option>
|
||||
<option value="21">Group 21</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label class="form-label text-secondary fw-semibold small">Lifetime (Seconds) *</label>
|
||||
<input type="number" class="form-control" name="phase1_lifetime" value="28800" required>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- TAB 3: PHASE 2 (IPSEC) -->
|
||||
<div class="tab-pane fade" id="tab-phase2">
|
||||
<div class="row g-3">
|
||||
<div class="col-md-6">
|
||||
<label class="form-label text-secondary fw-semibold small">Encryption *</label>
|
||||
<select class="form-select" name="phase2_encryption">
|
||||
<option value="AES-128">AES-128</option>
|
||||
<option value="AES-256" selected>AES-256</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label class="form-label text-secondary fw-semibold small">Hash *</label>
|
||||
<select class="form-select" name="phase2_hash">
|
||||
<option value="SHA-1">SHA-1</option>
|
||||
<option value="SHA-256" selected>SHA-256</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<label class="form-label text-secondary fw-semibold small">DH Group</label>
|
||||
<select class="form-select" name="phase2_dh_group">
|
||||
<option value="">Match Phase 1</option>
|
||||
<option value="14">Group 14</option>
|
||||
<option value="21">Group 21</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<label class="form-label text-secondary fw-semibold small">Lifetime (Secs) *</label>
|
||||
<input type="number" class="form-control" name="phase2_lifetime" value="3600" required>
|
||||
</div>
|
||||
<div class="col-md-4 d-flex align-items-end">
|
||||
<div class="form-check form-switch mb-2">
|
||||
<input class="form-check-input" type="checkbox" name="pfs_enabled" value="1" checked id="pfsSwitch">
|
||||
<label class="form-check-label text-secondary fw-semibold small" for="pfsSwitch">Enable PFS</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer bg-light border-top-0">
|
||||
<button type="button" class="btn btn-outline-secondary btn-sm" data-bs-dismiss="modal">Cancel</button>
|
||||
<button type="submit" id="btnSaveVpn" class="btn text-white btn-sm fw-bold px-4" style="background-color: #5c4df0;">
|
||||
Save Configuration
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- EDIT VPN MODAL -->
|
||||
<div class="modal fade" id="editVpnModal" tabindex="-1" aria-hidden="true">
|
||||
<div class="modal-dialog modal-dialog-centered modal-lg">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header bg-light border-bottom-0">
|
||||
<h5 class="modal-title fw-bold">Edit VPN Configuration</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
|
||||
<form id="editVpnForm">
|
||||
@csrf
|
||||
@method('PUT')
|
||||
<input type="hidden" id="edit_vpn_id">
|
||||
|
||||
<div class="modal-body p-4">
|
||||
<div class="row g-3">
|
||||
<div class="col-md-6">
|
||||
<label class="form-label text-secondary fw-semibold small">Partner Name *</label>
|
||||
<input type="text" class="form-control" name="partner_name" id="edit_partner_name" required>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label class="form-label text-secondary fw-semibold small">Status *</label>
|
||||
<select class="form-select" name="status" id="edit_status" required>
|
||||
<option value="Active">Active</option>
|
||||
<option value="Inactive">Inactive</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="col-12 mt-4 mb-2 border-bottom pb-2">
|
||||
<h6 class="fw-bold text-dark mb-0"><i class="bi bi-router me-2"></i>Gateway IP Addresses</h6>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6">
|
||||
<label class="form-label text-secondary fw-semibold small">Local Gateway IP *</label>
|
||||
<input type="text" class="form-control font-monospace" name="local_ip" id="edit_local_ip" required>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label class="form-label text-secondary fw-semibold small">Peer Gateway IP *</label>
|
||||
<input type="text" class="form-control font-monospace" name="peer_ip" id="edit_peer_ip" required>
|
||||
</div>
|
||||
|
||||
<div class="col-12 mt-4 mb-2 border-bottom pb-2">
|
||||
<h6 class="fw-bold text-dark mb-0"><i class="bi bi-diagram-3 me-2"></i>Encryption Domains (Subnets)</h6>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6">
|
||||
<label class="form-label text-secondary fw-semibold small">Local Encryption Domain</label>
|
||||
<input type="text" class="form-control font-monospace" name="encryption_domain_local" id="edit_encryption_domain_local">
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label class="form-label text-secondary fw-semibold small">Remote Encryption Domain</label>
|
||||
<input type="text" class="form-control font-monospace" name="encryption_domain_remote" id="edit_encryption_domain_remote">
|
||||
</div>
|
||||
|
||||
<div class="col-12 mt-4 mb-2 border-bottom pb-2">
|
||||
<h6 class="fw-bold text-dark mb-0"><i class="bi bi-key me-2"></i>Authentication</h6>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<label class="form-label text-secondary fw-semibold small">Update Pre-Shared Key (PSK)</label>
|
||||
<input type="password" class="form-control font-monospace" name="preshared_key" placeholder="Leave blank to keep current PSK">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer bg-light border-top-0">
|
||||
<button type="button" class="btn btn-outline-secondary btn-sm" data-bs-dismiss="modal">Cancel</button>
|
||||
<button type="submit" id="btnUpdateVpn" class="btn text-white btn-sm fw-bold px-4" style="background-color: #5c4df0;">
|
||||
Update Configuration
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- EXPORT VPN CONFIG MODAL -->
|
||||
<div class="modal fade" id="exportVpnModal" tabindex="-1" aria-hidden="true">
|
||||
<div class="modal-dialog modal-dialog-centered modal-lg">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header bg-dark text-white border-bottom-0">
|
||||
<h5 class="modal-title fw-bold"><i class="bi bi-file-earmark-code me-2"></i>Export Partner Config</h5>
|
||||
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
|
||||
<form action="{{ route('vpns.download') }}" method="POST">
|
||||
@csrf
|
||||
<input type="hidden" name="partner_name" id="export_partner_name">
|
||||
|
||||
<div class="modal-body p-4">
|
||||
<div class="alert alert-info py-2 d-flex align-items-center" style="font-size: 0.85rem;">
|
||||
<i class="bi bi-info-circle-fill me-2 fs-5"></i>
|
||||
<div>You can edit the configuration parameters below before downloading the file to share with the partner.</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<textarea class="form-control font-monospace bg-light" name="config_content" id="export_config_content" rows="15" required style="font-size: 0.85rem; white-space: pre;"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer bg-light border-top-0 d-flex justify-content-between">
|
||||
<button type="button" class="btn btn-outline-secondary btn-sm" data-bs-dismiss="modal">Cancel</button>
|
||||
<button type="submit" class="btn btn-success btn-sm fw-bold px-4">
|
||||
<i class="bi bi-download me-1"></i> Download .txt File
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endpush
|
||||
|
||||
@push('scripts')
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
let baseUrl = "{{ url('/') }}";
|
||||
|
||||
// 1. Add VPN Config
|
||||
$('#addVpnForm').on('submit', function(e) {
|
||||
e.preventDefault();
|
||||
let $form = $(this);
|
||||
let $btn = $('#btnSaveVpn');
|
||||
let originalText = $btn.html();
|
||||
|
||||
$btn.html('<span class="spinner-border spinner-border-sm me-2"></span>Saving...').prop('disabled', true);
|
||||
$form.find('.is-invalid').removeClass('is-invalid');
|
||||
|
||||
$.ajax({
|
||||
url: `${baseUrl}/vpns`,
|
||||
type: 'POST',
|
||||
data: $form.serialize(),
|
||||
success: function(response) {
|
||||
$('#addVpnModal').modal('hide');
|
||||
Swal.fire({
|
||||
icon: 'success',
|
||||
title: 'Added!',
|
||||
text: response.message,
|
||||
timer: 1500,
|
||||
showConfirmButton: false
|
||||
}).then(() => location.reload());
|
||||
},
|
||||
error: function(xhr) {
|
||||
if (xhr.status === 422) {
|
||||
$.each(xhr.responseJSON.errors, function(key, value) {
|
||||
let $input = $form.find('[name="' + key + '"]');
|
||||
$input.addClass('is-invalid');
|
||||
$input.parent().append('<div class="invalid-feedback d-block fw-medium">' + value[0] + '</div>');
|
||||
});
|
||||
} else {
|
||||
Swal.fire('Error', 'An unexpected error occurred.', 'error');
|
||||
}
|
||||
},
|
||||
complete: function() {
|
||||
$btn.html(originalText).prop('disabled', false);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// 2. Fetch Data for Edit Modal
|
||||
$(document).on('click', '.btn-edit-vpn', function(e) {
|
||||
e.preventDefault();
|
||||
let vpnId = $(this).data('id');
|
||||
|
||||
$.ajax({
|
||||
url: `${baseUrl}/vpns/${vpnId}`,
|
||||
type: 'GET',
|
||||
success: function(vpn) {
|
||||
$('#edit_vpn_id').val(vpn.id);
|
||||
$('#edit_partner_name').val(vpn.partner_name);
|
||||
$('#edit_local_ip').val(vpn.local_ip);
|
||||
$('#edit_peer_ip').val(vpn.peer_ip);
|
||||
$('#edit_encryption_domain_local').val(vpn.encryption_domain_local);
|
||||
$('#edit_encryption_domain_remote').val(vpn.encryption_domain_remote);
|
||||
$('#edit_status').val(vpn.status);
|
||||
|
||||
$('#editVpnModal').modal('show');
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// 3. Update VPN Config
|
||||
$('#editVpnForm').on('submit', function(e) {
|
||||
e.preventDefault();
|
||||
let $form = $(this);
|
||||
let vpnId = $('#edit_vpn_id').val();
|
||||
let $btn = $('#btnUpdateVpn');
|
||||
let originalText = $btn.html();
|
||||
|
||||
$btn.html('<span class="spinner-border spinner-border-sm me-2"></span>Updating...').prop('disabled', true);
|
||||
$form.find('.is-invalid').removeClass('is-invalid');
|
||||
$form.find('.invalid-feedback').remove();
|
||||
|
||||
$.ajax({
|
||||
url: `${baseUrl}/vpns/${vpnId}`,
|
||||
type: 'POST',
|
||||
data: $form.serialize(),
|
||||
success: function(response) {
|
||||
$('#editVpnModal').modal('hide');
|
||||
Swal.fire({
|
||||
icon: 'success',
|
||||
title: 'Updated!',
|
||||
text: response.message,
|
||||
timer: 1500,
|
||||
showConfirmButton: false
|
||||
}).then(() => location.reload());
|
||||
},
|
||||
error: function(xhr) {
|
||||
if (xhr.status === 422) {
|
||||
$.each(xhr.responseJSON.errors, function(key, value) {
|
||||
let $input = $form.find('[name="' + key + '"]');
|
||||
$input.addClass('is-invalid');
|
||||
$input.parent().append('<div class="invalid-feedback d-block fw-medium">' + value[0] + '</div>');
|
||||
});
|
||||
}
|
||||
},
|
||||
complete: function() {
|
||||
$btn.html(originalText).prop('disabled', false);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// 4. Export VPN Configuration (Trigger Modal)
|
||||
$(document).on('click', '.btn-export-vpn', function(e) {
|
||||
e.preventDefault();
|
||||
let vpnId = $(this).data('id');
|
||||
let $btn = $(this);
|
||||
let originalHtml = $btn.html();
|
||||
|
||||
$btn.html('<span class="spinner-border spinner-border-sm"></span>').prop('disabled', true);
|
||||
|
||||
$.ajax({
|
||||
url: `${baseUrl}/vpns/${vpnId}/template`,
|
||||
type: 'GET',
|
||||
success: function(response) {
|
||||
$('#export_partner_name').val(response.partner_name);
|
||||
$('#export_config_content').val(response.template);
|
||||
$('#exportVpnModal').modal('show');
|
||||
},
|
||||
error: function() {
|
||||
Swal.fire('Error', 'Failed to generate configuration template.', 'error');
|
||||
},
|
||||
complete: function() {
|
||||
$btn.html(originalHtml).prop('disabled', false);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Clean up modals on close
|
||||
$('#addVpnModal, #editVpnModal, #exportVpnModal').on('hidden.bs.modal', function () {
|
||||
$(this).find('form')[0].reset();
|
||||
$(this).find('.is-invalid').removeClass('is-invalid');
|
||||
$(this).find('.invalid-feedback').remove();
|
||||
});
|
||||
});
|
||||
</script>
|
||||
@endpush
|
||||
505
resources/views/vpns/index.blade.php
Normal file
505
resources/views/vpns/index.blade.php
Normal file
@@ -0,0 +1,505 @@
|
||||
@extends('layouts.masterbeta')
|
||||
|
||||
@section('title', 'Click ERP - VPN Management')
|
||||
|
||||
@section('breadcrumbs')
|
||||
<a href="{{ url('/') }}" class="text-secondary text-decoration-none"><i class="bi bi-house me-2"></i></a>
|
||||
<i class="bi bi-chevron-right text-secondary me-2" style="font-size: 0.8rem;"></i>
|
||||
<span class="fw-bold" style="font-size: 0.95rem;">VPN Management</span>
|
||||
@endsection
|
||||
|
||||
@section('content')
|
||||
<div class="d-flex justify-content-between align-items-center mb-4">
|
||||
<div>
|
||||
<h4 class="fw-bold mb-1">VPN Management</h4>
|
||||
<p class="text-secondary mb-0" style="font-size: 0.9rem;">Manage IPsec configurations with partners.</p>
|
||||
</div>
|
||||
<div class="d-flex gap-2">
|
||||
<!-- Global Standard Template Export -->
|
||||
<a href="{{ route('vpns.standard-template') }}" class="btn btn-outline-dark fw-bold d-flex align-items-center" style="border-radius: 8px;">
|
||||
<i class="bi bi-file-earmark-arrow-down me-2"></i> Standard Parameters
|
||||
</a>
|
||||
|
||||
<button class="btn text-white fw-bold d-flex align-items-center" style="background-color: #5c4df0; border-radius: 8px;" data-bs-toggle="modal" data-bs-target="#addVpnModal">
|
||||
<i class="bi bi-plus-lg me-2"></i> Add VPN Config
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-card shadow-sm bg-white rounded-3 overflow-hidden">
|
||||
<!-- Filters Header -->
|
||||
<div class="p-3 border-bottom bg-light bg-opacity-50">
|
||||
<div class="row g-3 align-items-center">
|
||||
<div class="col-md-5">
|
||||
<div class="input-group">
|
||||
<span class="input-group-text bg-white border-end-0 text-secondary"><i class="bi bi-search"></i></span>
|
||||
<input type="text" class="form-control bg-white border-start-0 ps-0" id="searchVpn" placeholder="Search by partner name or IP...">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="table-responsive">
|
||||
<table class="table table-hover align-middle mb-0">
|
||||
<thead class="table-light text-secondary" style="font-size: 0.85rem;">
|
||||
<tr>
|
||||
<th class="ps-4">Partner</th>
|
||||
<th>Gateways (Local ➔ Peer)</th>
|
||||
<th>Encryption Domains (Local ➔ Remote)</th>
|
||||
<th>Status</th>
|
||||
<th class="text-end pe-4">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@forelse($vpns as $vpn)
|
||||
<tr>
|
||||
<td class="ps-4 fw-bold text-dark">{{ $vpn->partner_name }}</td>
|
||||
<td>
|
||||
<div class="font-monospace small">
|
||||
<span class="text-primary">{{ $vpn->local_ip }}</span>
|
||||
<i class="bi bi-arrow-right mx-1 text-secondary"></i>
|
||||
<span class="text-danger">{{ $vpn->peer_ip }}</span>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="font-monospace small text-secondary">
|
||||
{{ $vpn->encryption_domain_local ?? 'Any' }}
|
||||
<i class="bi bi-arrow-right mx-1"></i>
|
||||
{{ $vpn->encryption_domain_remote ?? 'Any' }}
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<span class="badge {{ $vpn->status == 'Active' ? 'bg-success' : 'bg-warning' }} bg-opacity-10 text-{{ $vpn->status == 'Active' ? 'success' : 'warning' }}">
|
||||
{{ $vpn->status }}
|
||||
</span>
|
||||
</td>
|
||||
<td class="text-end pe-4">
|
||||
<button class="btn btn-sm btn-outline-dark fw-bold btn-export-vpn me-2" data-id="{{ $vpn->id }}">
|
||||
<i class="bi bi-download me-1"></i> Export
|
||||
</button>
|
||||
<button class="btn btn-sm btn-light text-primary btn-edit-vpn" data-id="{{ $vpn->id }}" title="Edit">
|
||||
<i class="bi bi-pencil"></i>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
@empty
|
||||
<tr>
|
||||
<td colspan="5" class="text-center py-5 text-secondary">
|
||||
<i class="bi bi-shield-slash fs-1 text-muted mb-2 d-block"></i>
|
||||
No VPN configurations added yet.
|
||||
</td>
|
||||
</tr>
|
||||
@endforelse
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
@if($vpns->hasPages())
|
||||
<div class="card-footer bg-white border-top p-3 d-flex justify-content-center">
|
||||
{{ $vpns->links('pagination::bootstrap-5') }}
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
@push('modals')
|
||||
<!-- ADD VPN MODAL -->
|
||||
<!-- ADD VPN MODAL -->
|
||||
<div class="modal fade" id="addVpnModal" tabindex="-1" aria-hidden="true">
|
||||
<div class="modal-dialog modal-dialog-centered modal-lg">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header bg-light border-bottom-0">
|
||||
<h5 class="modal-title fw-bold">Add VPN Configuration</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
|
||||
<form id="addVpnForm" novalidate>
|
||||
@csrf
|
||||
<div class="modal-body p-0">
|
||||
<!-- Modal Navigation Tabs -->
|
||||
<ul class="nav nav-tabs px-4 pt-3 bg-light" role="tablist">
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link active fw-bold" data-bs-toggle="tab" data-bs-target="#add-tab-basic" type="button">Basic Info</button>
|
||||
</li>
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link fw-bold text-dark" data-bs-toggle="tab" data-bs-target="#add-tab-phase1" type="button">Phase 1 (IKE)</button>
|
||||
</li>
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link fw-bold text-dark" data-bs-toggle="tab" data-bs-target="#add-tab-phase2" type="button">Phase 2 (IPSec)</button>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="tab-content p-4">
|
||||
<!-- TAB 1: BASIC INFO -->
|
||||
<div class="tab-pane fade show active" id="add-tab-basic">
|
||||
<div class="row g-3">
|
||||
<div class="col-md-6">
|
||||
<label class="form-label text-secondary fw-semibold small">Partner Name *</label>
|
||||
<input type="text" class="form-control" name="partner_name" required>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label class="form-label text-secondary fw-semibold small">Status *</label>
|
||||
<select class="form-select" name="status" required>
|
||||
<option value="Active" selected>Active</option>
|
||||
<option value="Inactive">Inactive</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6">
|
||||
<label class="form-label text-secondary fw-semibold small">Local Device</label>
|
||||
<input type="text" class="form-control" name="local_device" placeholder="e.g. Cisco Catalyst 8500">
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label class="form-label text-secondary fw-semibold small">Peer Device</label>
|
||||
<input type="text" class="form-control" name="peer_device" placeholder="e.g. FortiGate 61E">
|
||||
</div>
|
||||
|
||||
<div class="col-12 mt-4 mb-2 border-bottom pb-2">
|
||||
<h6 class="fw-bold text-dark mb-0"><i class="bi bi-router me-2"></i>Gateway IP Addresses</h6>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6">
|
||||
<label class="form-label text-secondary fw-semibold small">Local Gateway IP *</label>
|
||||
<input type="text" class="form-control font-monospace" name="local_ip" required>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label class="form-label text-secondary fw-semibold small">Peer Gateway IP *</label>
|
||||
<input type="text" class="form-control font-monospace" name="peer_ip" required>
|
||||
</div>
|
||||
|
||||
<div class="col-12 mt-4 mb-2 border-bottom pb-2">
|
||||
<h6 class="fw-bold text-dark mb-0"><i class="bi bi-diagram-3 me-2"></i>Encryption Domains (Subnets)</h6>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6">
|
||||
<label class="form-label text-secondary fw-semibold small">Local Encryption Domain</label>
|
||||
<input type="text" class="form-control font-monospace" name="encryption_domain_local" placeholder="e.g. 10.0.0.0/24">
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label class="form-label text-secondary fw-semibold small">Remote Encryption Domain</label>
|
||||
<input type="text" class="form-control font-monospace" name="encryption_domain_remote">
|
||||
</div>
|
||||
|
||||
<div class="col-12 mt-4 mb-2 border-bottom pb-2">
|
||||
<h6 class="fw-bold text-dark mb-0"><i class="bi bi-key me-2"></i>Authentication</h6>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<label class="form-label text-secondary fw-semibold small">Pre-Shared Key (PSK) *</label>
|
||||
<input type="password" class="form-control font-monospace" name="preshared_key" required>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- TAB 2: PHASE 1 (IKE) -->
|
||||
<div class="tab-pane fade" id="add-tab-phase1">
|
||||
<div class="row g-3">
|
||||
<div class="col-md-4">
|
||||
<label class="form-label text-secondary fw-semibold small">IKE Version *</label>
|
||||
<select class="form-select" name="ike_version">
|
||||
<option value="1">v1</option>
|
||||
<option value="2" selected>v2</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<label class="form-label text-secondary fw-semibold small">Encryption *</label>
|
||||
<select class="form-select" name="phase1_encryption">
|
||||
<option value="AES-128">AES-128</option>
|
||||
<option value="AES-256" selected>AES-256</option>
|
||||
<option value="3DES">3DES</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<label class="form-label text-secondary fw-semibold small">Hash *</label>
|
||||
<select class="form-select" name="phase1_hash">
|
||||
<option value="SHA-1">SHA-1</option>
|
||||
<option value="SHA-256" selected>SHA-256</option>
|
||||
<option value="SHA-512">SHA-512</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label class="form-label text-secondary fw-semibold small">DH Group *</label>
|
||||
<select class="form-select" name="phase1_dh_group">
|
||||
<option value="2">Group 2</option>
|
||||
<option value="14" selected>Group 14</option>
|
||||
<option value="21">Group 21</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label class="form-label text-secondary fw-semibold small">Lifetime (Seconds) *</label>
|
||||
<input type="number" class="form-control" name="phase1_lifetime" value="28800" required>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- TAB 3: PHASE 2 (IPSEC) -->
|
||||
<div class="tab-pane fade" id="add-tab-phase2">
|
||||
<div class="row g-3">
|
||||
<div class="col-md-6">
|
||||
<label class="form-label text-secondary fw-semibold small">Encryption *</label>
|
||||
<select class="form-select" name="phase2_encryption">
|
||||
<option value="AES-128">AES-128</option>
|
||||
<option value="AES-256" selected>AES-256</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label class="form-label text-secondary fw-semibold small">Hash *</label>
|
||||
<select class="form-select" name="phase2_hash">
|
||||
<option value="SHA-1">SHA-1</option>
|
||||
<option value="SHA-256" selected>SHA-256</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<label class="form-label text-secondary fw-semibold small">DH Group</label>
|
||||
<select class="form-select" name="phase2_dh_group">
|
||||
<option value="">Match Phase 1</option>
|
||||
<option value="14">Group 14</option>
|
||||
<option value="21">Group 21</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<label class="form-label text-secondary fw-semibold small">Lifetime (Secs) *</label>
|
||||
<input type="number" class="form-control" name="phase2_lifetime" value="3600" required>
|
||||
</div>
|
||||
<div class="col-md-4 d-flex align-items-end">
|
||||
<div class="form-check form-switch mb-2">
|
||||
<input class="form-check-input" type="checkbox" name="pfs_enabled" value="1" checked id="addPfsSwitch">
|
||||
<label class="form-check-label text-secondary fw-semibold small" for="addPfsSwitch">Enable PFS</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer bg-light border-top-0">
|
||||
<button type="button" class="btn btn-outline-secondary btn-sm" data-bs-dismiss="modal">Cancel</button>
|
||||
<button type="submit" id="btnSaveVpn" class="btn text-white btn-sm fw-bold px-4" style="background-color: #5c4df0;">
|
||||
Save Configuration
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- EDIT VPN MODAL -->
|
||||
<!-- EDIT VPN MODAL -->
|
||||
<div class="modal fade" id="editVpnModal" tabindex="-1" aria-hidden="true">
|
||||
<div class="modal-dialog modal-dialog-centered modal-lg">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header bg-light border-bottom-0">
|
||||
<h5 class="modal-title fw-bold">Edit VPN Configuration</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
|
||||
|
||||
<form id="editVpnForm" novalidate>
|
||||
@csrf
|
||||
@method('PUT')
|
||||
<input type="hidden" id="edit_vpn_id">
|
||||
|
||||
<div class="modal-body p-0">
|
||||
<!-- Modal Navigation Tabs -->
|
||||
<ul class="nav nav-tabs px-4 pt-3 bg-light" role="tablist">
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link active fw-bold" data-bs-toggle="tab" data-bs-target="#edit-tab-basic" type="button">Basic Info</button>
|
||||
</li>
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link fw-bold text-dark" data-bs-toggle="tab" data-bs-target="#edit-tab-phase1" type="button">Phase 1 (IKE)</button>
|
||||
</li>
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link fw-bold text-dark" data-bs-toggle="tab" data-bs-target="#edit-tab-phase2" type="button">Phase 2 (IPSec)</button>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="tab-content p-4">
|
||||
<!-- TAB 1: BASIC INFO -->
|
||||
<div class="tab-pane fade show active" id="edit-tab-basic">
|
||||
<div class="row g-3">
|
||||
<div class="col-md-6">
|
||||
<label class="form-label text-secondary fw-semibold small">Partner Name *</label>
|
||||
<input type="text" class="form-control" name="partner_name" id="edit_partner_name" required>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label class="form-label text-secondary fw-semibold small">Status *</label>
|
||||
<select class="form-select" name="status" id="edit_status" required>
|
||||
<option value="Active">Active</option>
|
||||
<option value="Inactive">Inactive</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6">
|
||||
<label class="form-label text-secondary fw-semibold small">Local Device</label>
|
||||
<input type="text" class="form-control" name="local_device" id="edit_local_device">
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label class="form-label text-secondary fw-semibold small">Peer Device</label>
|
||||
<input type="text" class="form-control" name="peer_device" id="edit_peer_device">
|
||||
</div>
|
||||
|
||||
<div class="col-12 mt-4 mb-2 border-bottom pb-2">
|
||||
<h6 class="fw-bold text-dark mb-0"><i class="bi bi-router me-2"></i>Gateway IP Addresses</h6>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6">
|
||||
<label class="form-label text-secondary fw-semibold small">Local Gateway IP *</label>
|
||||
<input type="text" class="form-control font-monospace" name="local_ip" id="edit_local_ip" required>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label class="form-label text-secondary fw-semibold small">Peer Gateway IP *</label>
|
||||
<input type="text" class="form-control font-monospace" name="peer_ip" id="edit_peer_ip" required>
|
||||
</div>
|
||||
|
||||
<div class="col-12 mt-4 mb-2 border-bottom pb-2">
|
||||
<h6 class="fw-bold text-dark mb-0"><i class="bi bi-diagram-3 me-2"></i>Encryption Domains (Subnets)</h6>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6">
|
||||
<label class="form-label text-secondary fw-semibold small">Local Encryption Domain</label>
|
||||
<input type="text" class="form-control font-monospace" name="encryption_domain_local" id="edit_encryption_domain_local">
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label class="form-label text-secondary fw-semibold small">Remote Encryption Domain</label>
|
||||
<input type="text" class="form-control font-monospace" name="encryption_domain_remote" id="edit_encryption_domain_remote">
|
||||
</div>
|
||||
|
||||
<div class="col-12 mt-4 mb-2 border-bottom pb-2">
|
||||
<h6 class="fw-bold text-dark mb-0"><i class="bi bi-key me-2"></i>Authentication</h6>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<label class="form-label text-secondary fw-semibold small">Update Pre-Shared Key (PSK)</label>
|
||||
<input type="password" class="form-control font-monospace" name="preshared_key" placeholder="Leave blank to keep current PSK">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- TAB 2: PHASE 1 (IKE) -->
|
||||
<div class="tab-pane fade" id="edit-tab-phase1">
|
||||
<div class="row g-3">
|
||||
<div class="col-md-4">
|
||||
<label class="form-label text-secondary fw-semibold small">IKE Version *</label>
|
||||
<select class="form-select" name="ike_version" id="edit_ike_version">
|
||||
<option value="1">v1</option>
|
||||
<option value="2">v2</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<label class="form-label text-secondary fw-semibold small">Encryption *</label>
|
||||
<select class="form-select" name="phase1_encryption" id="edit_phase1_encryption">
|
||||
<option value="AES-128">AES-128</option>
|
||||
<option value="AES-256">AES-256</option>
|
||||
<option value="3DES">3DES</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<label class="form-label text-secondary fw-semibold small">Hash *</label>
|
||||
<select class="form-select" name="phase1_hash" id="edit_phase1_hash">
|
||||
<option value="SHA-1">SHA-1</option>
|
||||
<option value="SHA-256">SHA-256</option>
|
||||
<option value="SHA-512">SHA-512</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label class="form-label text-secondary fw-semibold small">DH Group *</label>
|
||||
<select class="form-select" name="phase1_dh_group" id="edit_phase1_dh_group">
|
||||
<option value="2">Group 2</option>
|
||||
<option value="14">Group 14</option>
|
||||
<option value="21">Group 21</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label class="form-label text-secondary fw-semibold small">Lifetime (Seconds) *</label>
|
||||
<input type="number" class="form-control" name="phase1_lifetime" id="edit_phase1_lifetime" required>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- TAB 3: PHASE 2 (IPSEC) -->
|
||||
<div class="tab-pane fade" id="edit-tab-phase2">
|
||||
<div class="row g-3">
|
||||
<div class="col-md-6">
|
||||
<label class="form-label text-secondary fw-semibold small">Encryption *</label>
|
||||
<select class="form-select" name="phase2_encryption" id="edit_phase2_encryption">
|
||||
<option value="AES-128">AES-128</option>
|
||||
<option value="AES-256">AES-256</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label class="form-label text-secondary fw-semibold small">Hash *</label>
|
||||
<select class="form-select" name="phase2_hash" id="edit_phase2_hash">
|
||||
<option value="SHA-1">SHA-1</option>
|
||||
<option value="SHA-256">SHA-256</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<label class="form-label text-secondary fw-semibold small">DH Group</label>
|
||||
<select class="form-select" name="phase2_dh_group" id="edit_phase2_dh_group">
|
||||
<option value="">Match Phase 1</option>
|
||||
<option value="14">Group 14</option>
|
||||
<option value="21">Group 21</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<label class="form-label text-secondary fw-semibold small">Lifetime (Secs) *</label>
|
||||
<input type="number" class="form-control" name="phase2_lifetime" id="edit_phase2_lifetime" required>
|
||||
</div>
|
||||
<div class="col-md-4 d-flex align-items-end">
|
||||
<div class="form-check form-switch mb-2">
|
||||
<input class="form-check-input" type="checkbox" name="pfs_enabled" value="1" id="edit_pfs_enabled">
|
||||
<label class="form-check-label text-secondary fw-semibold small" for="edit_pfs_enabled">Enable PFS</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer bg-light border-top-0">
|
||||
<button type="button" class="btn btn-outline-secondary btn-sm" data-bs-dismiss="modal">Cancel</button>
|
||||
<button type="submit" id="btnUpdateVpn" class="btn text-white btn-sm fw-bold px-4" style="background-color: #5c4df0;">
|
||||
Update Configuration
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- EXPORT VPN CONFIG MODAL -->
|
||||
<div class="modal fade" id="exportVpnModal" tabindex="-1" aria-hidden="true">
|
||||
<div class="modal-dialog modal-dialog-centered modal-lg">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header bg-dark text-white border-bottom-0">
|
||||
<h5 class="modal-title fw-bold"><i class="bi bi-file-earmark-code me-2"></i>Export Partner Config</h5>
|
||||
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
|
||||
<form action="{{ route('vpns.download') }}" method="POST">
|
||||
@csrf
|
||||
<input type="hidden" name="partner_name" id="export_partner_name">
|
||||
|
||||
<div class="modal-body p-4">
|
||||
<div class="alert alert-info py-2 d-flex align-items-center" style="font-size: 0.85rem;">
|
||||
<i class="bi bi-info-circle-fill me-2 fs-5"></i>
|
||||
<div>You can edit the configuration parameters below before downloading the file to share with the partner.</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<textarea class="form-control font-monospace bg-light" name="config_content" id="export_config_content" rows="15" required style="font-size: 0.85rem; white-space: pre;"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer bg-light border-top-0 d-flex justify-content-between">
|
||||
<button type="button" class="btn btn-outline-secondary btn-sm" data-bs-dismiss="modal">Cancel</button>
|
||||
<button type="submit" class="btn btn-success btn-sm fw-bold px-4">
|
||||
<i class="bi bi-download me-1"></i> Download .txt File
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endpush
|
||||
|
||||
@push('scripts')
|
||||
<script src="{{ asset('public/assets/js/vpn-index.js') }}"></script>
|
||||
@endpush
|
||||
Reference in New Issue
Block a user