180 lines
7.8 KiB
PHP
180 lines
7.8 KiB
PHP
@extends('layouts.masterbeta')
|
|
|
|
@section('title', 'Click ERP - Client Management')
|
|
|
|
@push('styles')
|
|
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
|
|
<style>
|
|
/* Custom styling to make Select2 match Bootstrap 5 form controls */
|
|
.select2-container .select2-selection--multiple {
|
|
min-height: 38px;
|
|
border: 1px solid #dee2e6;
|
|
border-radius: 0.375rem;
|
|
}
|
|
.select2-container--default .select2-selection--multiple .select2-selection__choice {
|
|
background-color: #5c4df0;
|
|
border: none;
|
|
color: white;
|
|
border-radius: 4px;
|
|
padding: 2px 8px;
|
|
margin-top: 5px;
|
|
}
|
|
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
|
|
color: white;
|
|
margin-right: 5px;
|
|
}
|
|
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
|
|
color: #ffcccc;
|
|
background: transparent;
|
|
}
|
|
/* Fix for validation red border */
|
|
.is-invalid + .select2-container .select2-selection {
|
|
border-color: #dc3545;
|
|
}
|
|
.avatar-circle { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-weight: bold; font-size: 0.85rem; }
|
|
/* Ensure all Select2 containers expand to fill their grid column width */
|
|
.select2-container {
|
|
width: 100% !important;
|
|
}
|
|
.select2-selection--multiple {
|
|
min-height: 38px !important;
|
|
}
|
|
</style>
|
|
@endpush
|
|
|
|
@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;">Clients</span>
|
|
@endsection
|
|
|
|
@section('content')
|
|
<!-- Page Header -->
|
|
<div class="d-flex justify-content-between align-items-center mb-4">
|
|
<div>
|
|
<h4 class="fw-bold mb-1">Client Management</h4>
|
|
<p class="text-secondary mb-0" style="font-size: 0.9rem;">Manage clients, payment modes, contact person, services etc.</p>
|
|
</div>
|
|
<div class="dropdown">
|
|
|
|
<ul class="dropdown-menu shadow-sm border-0">
|
|
<li>
|
|
<a class="dropdown-item btn-export d-flex align-items-center" href="#" data-format="csv">
|
|
<i class="bi bi-filetype-csv me-2 text-success"></i> Export as CSV (Excel)
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a class="dropdown-item btn-export d-flex align-items-center" href="#" data-format="pdf">
|
|
<i class="bi bi-filetype-pdf me-2 text-danger"></i> Export as PDF
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<button class="btn text-white fw-bold d-flex align-items-center" style="background-color: #5c4df0; border-radius: 8px;" id="btnOpenClientModal">
|
|
<i class="bi bi-plus-lg me-2"></i> Add New Client
|
|
</button>
|
|
|
|
</div>
|
|
|
|
<!-- Data Table Card -->
|
|
<div class="content-card">
|
|
<!-- Filters & Export Header -->
|
|
<div class="p-3 border-bottom bg-light bg-opacity-50">
|
|
<div class="row g-3 align-items-center">
|
|
<div class="col-md-4">
|
|
<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="searchClient" placeholder="Search clients, email, or contact...">
|
|
</div>
|
|
</div>
|
|
<div class="col-md-2">
|
|
<select class="form-select bg-white" id="filterService">
|
|
<option value="">All Service Types</option>
|
|
<option value="a2p">A2P</option>
|
|
<option value="ussd">USSD</option>
|
|
<option value="airtime">Airtime</option>
|
|
<option value="voice">Voice</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-md-2">
|
|
<select class="form-select bg-white" id="filterBilling">
|
|
<option value="">Payment Mode: All</option>
|
|
<option value="postpaid">Postpaid (Invoice)</option>
|
|
<option value="prepaid">Prepaid (Balance)</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-md-2">
|
|
<select class="form-select bg-white" id="filterStatus">
|
|
<option value="">Status: All</option>
|
|
<option value="Live">Live</option>
|
|
<option value="Prospective">Prospective</option>
|
|
<option value="Cancelled">Cancelled</option>
|
|
<option value="Inactive">Inactive</option>
|
|
</select>
|
|
</div>
|
|
<!-- Moved Export Button Here -->
|
|
<div class="col-md-2 text-end">
|
|
<div class="dropdown">
|
|
<button class="btn btn-outline-secondary dropdown-toggle w-100 bg-white" type="button" data-bs-toggle="dropdown">
|
|
<i class="bi bi-download me-1"></i> Export
|
|
</button>
|
|
<ul class="dropdown-menu shadow-sm border-0 w-100">
|
|
<li>
|
|
<a class="dropdown-item btn-export d-flex align-items-center" href="#" data-format="csv">
|
|
<i class="bi bi-filetype-csv me-2 text-success"></i> Export CSV
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a class="dropdown-item btn-export d-flex align-items-center" href="#" data-format="pdf">
|
|
<i class="bi bi-filetype-pdf me-2 text-danger"></i> Export PDF
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Table -->
|
|
<div class="table-responsive">
|
|
<table class="table table-custom table-hover mb-0">
|
|
<thead>
|
|
<tr>
|
|
<th>Client Details</th>
|
|
<th>Primary Contact</th>
|
|
<th>Account Manager</th>
|
|
<th>Services</th>
|
|
<th>Billing</th>
|
|
<th>Date Added</th>
|
|
<th>Status</th>
|
|
<th class="text-end">Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="clientTableBody">
|
|
<!-- Data will be injected here via AJAX -->
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<!-- Pagination Container -->
|
|
<div class="p-3 d-flex justify-content-between align-items-center" id="paginationContainer">
|
|
<span class="text-secondary" style="font-size: 0.85rem;" id="paginationInfo">Showing 0 to 0 of 0 entries</span>
|
|
<nav>
|
|
<ul class="pagination pagination-sm mb-0" id="paginationLinks">
|
|
<!-- Pagination links injected here -->
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
@endsection
|
|
|
|
@push('modals')
|
|
@include('clients.partials.create')
|
|
@include('clients.partials.edit-modal')
|
|
@endpush
|
|
|
|
@push('scripts')
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
|
|
<script src="{{ asset('public/assets/js/client-index.js') }}"></script>
|
|
@endpush |