Initial commit
This commit is contained in:
Kwesi Banson Jnr
0
resources/views/clients/clients_pdf.blade.php
Normal file
0
resources/views/clients/clients_pdf.blade.php
Normal file
285
resources/views/clients/index.blade.php
Normal file
285
resources/views/clients/index.blade.php
Normal file
@@ -0,0 +1,285 @@
|
||||
@extends('layouts.masterbeta')
|
||||
|
||||
@section('title', 'Click ERP - Client Management')
|
||||
|
||||
@push('styles')
|
||||
<style>
|
||||
.avatar-circle { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-weight: bold; font-size: 0.85rem; }
|
||||
</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, services etc.</p>
|
||||
</div>
|
||||
<div class="dropdown">
|
||||
<button class="btn btn-outline-secondary d-flex align-items-center dropdown-toggle" type="button" data-bs-toggle="dropdown" style="border-radius: 8px;">
|
||||
<i class="bi bi-download me-2"></i> Export
|
||||
</button>
|
||||
<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 -->
|
||||
<div class="p-3 border-bottom bg-light bg-opacity-50">
|
||||
<div class="row g-3">
|
||||
<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-3">
|
||||
<select class="form-select bg-white" id="filterService">
|
||||
<option value="">All Service Types</option>
|
||||
<option value="sms">SMS</option>
|
||||
<option value="ussd">USSD</option>
|
||||
<option value="airtime">Airtime</option>
|
||||
<option value="voice">Voice</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<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>
|
||||
</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>Services</th>
|
||||
<th>Billing</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
|
||||
|
||||
<!-- MODAL HTML REMAINS THE SAME AS BEFORE -->
|
||||
@push('modals')
|
||||
@include('clients.partials.create')
|
||||
@endpush
|
||||
|
||||
@push('scripts')
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
let searchTimer;
|
||||
|
||||
// Initialize the table on page load
|
||||
fetchClients();
|
||||
|
||||
// Event Listeners for Search and Filters
|
||||
$('#searchClient').on('keyup', function() {
|
||||
clearTimeout(searchTimer);
|
||||
// Debounce the search so we don't spam the server on every keystroke
|
||||
searchTimer = setTimeout(() => fetchClients(1), 400);
|
||||
});
|
||||
|
||||
$('#filterService, #filterBilling').on('change', function() {
|
||||
fetchClients(1);
|
||||
});
|
||||
|
||||
// Handle Pagination Clicks dynamically
|
||||
$(document).on('click', '.page-link-ajax', function(e) {
|
||||
e.preventDefault();
|
||||
let page = $(this).data('page');
|
||||
if (page) fetchClients(page);
|
||||
});
|
||||
|
||||
// AJAX Fetch Function
|
||||
function fetchClients(page = 1) {
|
||||
const search = $('#searchClient').val();
|
||||
const service = $('#filterService').val();
|
||||
const billing = $('#filterBilling').val();
|
||||
|
||||
// Show loading state
|
||||
$('#clientTableBody').html(`
|
||||
<tr>
|
||||
<td colspan="6" class="text-center py-5">
|
||||
<div class="spinner-border text-primary" role="status" style="color: #5c4df0 !important;"></div>
|
||||
<div class="mt-2 text-secondary" style="font-size: 0.85rem;">Loading clients...</div>
|
||||
</td>
|
||||
</tr>
|
||||
`);
|
||||
|
||||
$.ajax({
|
||||
url: base_url + "/clients/data",
|
||||
type: "GET",
|
||||
data: { page: page, search: search, service: service, billing: billing },
|
||||
success: function(response) {
|
||||
renderTable(response.data);
|
||||
renderPagination(response);
|
||||
},
|
||||
error: function() {
|
||||
$('#clientTableBody').html('<tr><td colspan="6" class="text-center text-danger py-4">Failed to load data. Please try again.</td></tr>');
|
||||
}
|
||||
});
|
||||
}
|
||||
// Handle Export Actions
|
||||
$('.btn-export').on('click', function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
// Get current filter values
|
||||
const search = $('#searchClient').val();
|
||||
const service = $('#filterService').val();
|
||||
const billing = $('#filterBilling').val();
|
||||
const format = $(this).data('format'); // 'csv' or 'pdf'
|
||||
|
||||
// Build the query string
|
||||
const queryParams = $.param({
|
||||
search: search,
|
||||
service: service,
|
||||
billing: billing,
|
||||
format: format
|
||||
});
|
||||
|
||||
// Redirect the browser to trigger the file download
|
||||
window.location.href = "{{ route('clients.export') }}?" + queryParams;
|
||||
});
|
||||
// Render Table Rows
|
||||
function renderTable(clients) {
|
||||
let html = '';
|
||||
|
||||
if (clients.length === 0) {
|
||||
$('#clientTableBody').html('<tr><td colspan="6" class="text-center text-secondary py-4">No clients found matching your criteria.</td></tr>');
|
||||
return;
|
||||
}
|
||||
|
||||
clients.forEach(client => {
|
||||
// Extract initials for the avatar
|
||||
let initials = client.name.substring(0, 2).toUpperCase();
|
||||
|
||||
let servicesHtml = '<span class="text-secondary" style="font-size: 0.8rem;">N/A</span>';
|
||||
if (client.services) {
|
||||
try {
|
||||
let servicesArray = JSON.parse(client.services);
|
||||
|
||||
// 2. Map each service into a Bootstrap badge
|
||||
if (Array.isArray(servicesArray) && servicesArray.length > 0) {
|
||||
servicesHtml = servicesArray.map(service =>
|
||||
`<span class="badge bg-secondary bg-opacity-10 text-secondary border me-1 mb-1" style="font-size: 0.7rem;">${service}</span>`
|
||||
).join('');
|
||||
}
|
||||
} catch (e) {
|
||||
console.error("Could not parse services for client: " + client.name);
|
||||
}
|
||||
}
|
||||
// Status Badge Logic
|
||||
let statusBadge = client.status === 'active'
|
||||
? '<span class="badge bg-success bg-opacity-10 text-success px-2 py-1"><i class="bi bi-check-circle me-1"></i>Active</span>'
|
||||
: '<span class="badge bg-warning bg-opacity-10 text-warning px-2 py-1"><i class="bi bi-clock me-1"></i>' + client.status + '</span>';
|
||||
|
||||
html += `
|
||||
<tr>
|
||||
<td>
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="avatar-circle bg-primary bg-opacity-10 text-primary me-3">${initials}</div>
|
||||
<div>
|
||||
<div class="fw-bold text-dark">${client.name}</div>
|
||||
<div class="text-secondary" style="font-size: 0.8rem;"><i class="bi bi-geo-alt me-1"></i>${client.country || 'N/A'}</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="fw-semibold">${client.contact_person || 'N/A'}</div>
|
||||
<div class="text-secondary" style="font-size: 0.8rem;">${client.email || 'N/A'}</div>
|
||||
</td>
|
||||
<td style="max-width: 200px; white-space: normal;">
|
||||
${servicesHtml}
|
||||
</td>
|
||||
<td><span class="badge bg-info bg-opacity-10 text-info text-uppercase">${client.pay_mode || 'N/A'}</span></td>
|
||||
<td>${statusBadge}</td>
|
||||
<td class="text-end">
|
||||
<button class="btn btn-sm btn-light text-primary me-1 btn-edit-client"
|
||||
data-id="${client.id}">
|
||||
<i class="bi bi-pencil"></i>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
`;
|
||||
});
|
||||
|
||||
$('#clientTableBody').html(html);
|
||||
}
|
||||
|
||||
// Render Pagination Links
|
||||
function renderPagination(response) {
|
||||
// Update "Showing X to Y of Z entries"
|
||||
$('#paginationInfo').text(`Showing ${response.from || 0} to ${response.to || 0} of ${response.total} entries`);
|
||||
|
||||
let paginationHtml = '';
|
||||
|
||||
// Only show pagination if there is more than 1 page
|
||||
if (response.last_page > 1) {
|
||||
// Previous Button
|
||||
let prevDisabled = response.current_page === 1 ? 'disabled' : '';
|
||||
paginationHtml += `<li class="page-item ${prevDisabled}"><a class="page-link page-link-ajax" href="#" data-page="${response.current_page - 1}">Previous</a></li>`;
|
||||
|
||||
// Page Numbers
|
||||
for (let i = 1; i <= response.last_page; i++) {
|
||||
let activeClass = response.current_page === i ? 'active' : '';
|
||||
let style = response.current_page === i ? 'style="background-color: #5c4df0; border-color: #5c4df0;"' : 'class="page-link text-dark"';
|
||||
|
||||
paginationHtml += `<li class="page-item ${activeClass}"><a class="page-link page-link-ajax" href="#" ${style} data-page="${i}">${i}</a></li>`;
|
||||
}
|
||||
|
||||
// Next Button
|
||||
let nextDisabled = response.current_page === response.last_page ? 'disabled' : '';
|
||||
paginationHtml += `<li class="page-item ${nextDisabled}"><a class="page-link page-link-ajax" href="#" data-page="${response.current_page + 1}">Next</a></li>`;
|
||||
}
|
||||
|
||||
$('#paginationLinks').html(paginationHtml);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
@endpush
|
||||
413
resources/views/clients/index_raw.blade.php
Normal file
413
resources/views/clients/index_raw.blade.php
Normal file
@@ -0,0 +1,413 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Nexus ERP - Client Management</title>
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
|
||||
<style>
|
||||
body { background-color: #f8f9fc; }
|
||||
|
||||
/* Sidebar Styling */
|
||||
#sidebar { width: 260px; background-color: #111425; position: fixed; height: 100vh; overflow-y: auto; z-index: 1000; }
|
||||
.sidebar-brand { color: #fff; padding: 1.5rem 1.25rem; font-weight: 700; }
|
||||
.sidebar-brand-icon { background: #5c4df0; padding: 0.5rem; border-radius: 8px; margin-right: 10px; }
|
||||
.sidebar-nav-item { color: #8a90a5; text-decoration: none; padding: 0.75rem 1.25rem; display: block; border-radius: 8px; margin: 0.2rem 1rem; font-size: 0.9rem; }
|
||||
.sidebar-nav-item:hover, .sidebar-nav-item.active { background-color: #5c4df0; color: #fff; }
|
||||
.sidebar-heading { color: #5a617a; font-size: 0.75rem; text-transform: uppercase; padding: 1rem 1.25rem 0.5rem; font-weight: 600; }
|
||||
|
||||
/* Main Layout */
|
||||
#main-content { margin-left: 260px; min-height: 100vh; }
|
||||
.topbar { background: #fff; height: 70px; border-bottom: 1px solid #eaedf1; padding: 0 1.5rem; }
|
||||
|
||||
/* Component Styling */
|
||||
.content-card { background: #fff; border: 1px solid #eaedf1; border-radius: 12px; box-shadow: 0 2px 4px rgba(0,0,0,0.02); }
|
||||
.stat-card { border-left: 4px solid transparent; }
|
||||
.stat-card.primary { border-left-color: #5c4df0; }
|
||||
.stat-card.success { border-left-color: #10b981; }
|
||||
.stat-card.warning { border-left-color: #f59e0b; }
|
||||
|
||||
/* Table Styling */
|
||||
.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; }
|
||||
.avatar-circle { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-weight: bold; font-size: 0.85rem; }
|
||||
|
||||
/* Modal Customization */
|
||||
.modal-content { border-radius: 12px; border: none; box-shadow: 0 10px 30px rgba(0,0,0,0.1); }
|
||||
.modal-header { border-bottom: 1px solid #eaedf1; background-color: #f8f9fc; border-radius: 12px 12px 0 0; }
|
||||
.modal-footer { border-top: 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); }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<aside id="sidebar">
|
||||
<div class="sidebar-brand d-flex align-items-center">
|
||||
<span class="sidebar-brand-icon"><i class="bi bi-buildings"></i></span>
|
||||
<div>
|
||||
<div class="mb-0 fs-6">NEXUS <span class="badge bg-secondary ms-1" style="font-size: 0.6rem;">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>
|
||||
<input type="text" class="form-control bg-dark border-secondary text-light placeholder-secondary" placeholder="Quick search...">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sidebar-heading mt-2">Core Entities</div>
|
||||
<a href="#" class="sidebar-nav-item"><i class="bi bi-person-badge me-2"></i> Staff Directory</a>
|
||||
<a href="#" class="sidebar-nav-item active"><i class="bi bi-people me-2"></i> Clients</a>
|
||||
<a href="#" class="sidebar-nav-item"><i class="bi bi-broadcast-pin me-2"></i> MNO Partners</a>
|
||||
<div class="sidebar-heading mt-2">Resources</div>
|
||||
<a href="#" class="sidebar-nav-item"><i class="bi bi-folder2-open me-2"></i> Document Vault</a>
|
||||
</aside>
|
||||
|
||||
<main id="main-content">
|
||||
<header class="topbar d-flex justify-content-between align-items-center">
|
||||
<div class="d-flex align-items-center">
|
||||
<a href="#" class="text-secondary text-decoration-none hover-primary"><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>
|
||||
<a href="#" class="text-secondary text-decoration-none me-2" style="font-size: 0.95rem;">Entities</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>
|
||||
</div>
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="text-secondary me-4" style="font-size: 0.9rem;">
|
||||
<i class="bi bi-clock me-1"></i> <span id="current-time">--:--:--</span>
|
||||
</div>
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="rounded-circle bg-light d-flex justify-content-center align-items-center me-2 border text-dark fw-bold" style="width: 32px; height: 32px; font-size: 0.8rem;">AU</div>
|
||||
<span class="fw-bold" style="font-size: 0.9rem;">Admin User</span>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="container-fluid p-4">
|
||||
|
||||
<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 corporate accounts, billing types, and service provisions.</p>
|
||||
</div>
|
||||
<div class="d-flex gap-2">
|
||||
<button class="btn btn-outline-secondary d-flex align-items-center" style="border-radius: 8px;">
|
||||
<i class="bi bi-download me-2"></i> Export
|
||||
</button>
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<div class="row g-4 mb-4">
|
||||
<div class="col-md-4">
|
||||
<div class="content-card stat-card primary p-3 h-100 border-0">
|
||||
<div class="text-secondary fw-bold mb-2" style="font-size: 0.75rem; letter-spacing: 0.5px;">TOTAL CLIENTS</div>
|
||||
<h3 class="fw-bold mb-0">24</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="content-card stat-card success p-3 h-100 border-0">
|
||||
<div class="text-secondary fw-bold mb-2" style="font-size: 0.75rem; letter-spacing: 0.5px;">ACTIVE SIP TRUNKS</div>
|
||||
<h3 class="fw-bold mb-0">18</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="content-card stat-card warning p-3 h-100 border-0">
|
||||
<div class="text-secondary fw-bold mb-2" style="font-size: 0.75rem; letter-spacing: 0.5px;">PREPAID ACCOUNTS</div>
|
||||
<h3 class="fw-bold mb-0">12</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-card">
|
||||
<div class="p-3 border-bottom bg-light bg-opacity-50 rounded-top" style="border-top-left-radius: 12px; border-top-right-radius: 12px;">
|
||||
<div class="row g-3">
|
||||
<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" placeholder="Search clients, email, or contact...">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<select class="form-select bg-white">
|
||||
<option value="">All Service Types</option>
|
||||
<option value="voip">PBX / SIP Trunking</option>
|
||||
<option value="gis">GIS Mapping Services</option>
|
||||
<option value="web">Web Infrastructure</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<select class="form-select bg-white">
|
||||
<option value="">Billing: All</option>
|
||||
<option value="prepaid">Prepaid</option>
|
||||
<option value="postpaid">Postpaid</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="table-responsive">
|
||||
<table class="table table-custom table-hover mb-0">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Client Details</th>
|
||||
<th>Primary Contact</th>
|
||||
<th>Services</th>
|
||||
<th>Billing</th>
|
||||
<th>Status</th>
|
||||
<th class="text-end">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="avatar-circle bg-primary bg-opacity-10 text-primary me-3">CT</div>
|
||||
<div>
|
||||
<div class="fw-bold text-dark">Click Tech Team</div>
|
||||
<div class="text-secondary" style="font-size: 0.8rem;"><i class="bi bi-geo-alt me-1"></i>Accra, GH</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="fw-semibold">Admin Desk</div>
|
||||
<div class="text-secondary" style="font-size: 0.8rem;">hello@clicktechteam.com</div>
|
||||
</td>
|
||||
<td><span class="badge bg-secondary bg-opacity-10 text-secondary border">Web Infrastructure</span></td>
|
||||
<td><span class="badge bg-info bg-opacity-10 text-info">Postpaid</span></td>
|
||||
<td><span class="badge bg-success bg-opacity-10 text-success px-2 py-1"><i class="bi bi-check-circle me-1"></i>Active</span></td>
|
||||
<td class="text-end">
|
||||
<button class="btn btn-sm btn-light text-secondary me-1"><i class="bi bi-eye"></i></button>
|
||||
<button class="btn btn-sm btn-light text-primary me-1 btn-edit-client"
|
||||
data-id="1" data-name="Click Tech Team" data-email="hello@clicktechteam.com" data-contact="Admin Desk" data-phone="+233 20 000 0000" data-location="Accra, GH" data-service="web" data-billing="postpaid" data-status="active">
|
||||
<i class="bi bi-pencil"></i>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="avatar-circle bg-success bg-opacity-10 text-success me-3">AT</div>
|
||||
<div>
|
||||
<div class="fw-bold text-dark">Alpha Telecom Services</div>
|
||||
<div class="text-secondary" style="font-size: 0.8rem;"><i class="bi bi-geo-alt me-1"></i>Kumasi, GH</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="fw-semibold">Michael Osei</div>
|
||||
<div class="text-secondary" style="font-size: 0.8rem;">m.osei@alphatel.com.gh</div>
|
||||
</td>
|
||||
<td><span class="badge bg-secondary bg-opacity-10 text-secondary border">SIP Trunking / PBX</span></td>
|
||||
<td><span class="badge bg-warning bg-opacity-10 text-warning text-dark">Prepaid</span></td>
|
||||
<td><span class="badge bg-success bg-opacity-10 text-success px-2 py-1"><i class="bi bi-check-circle me-1"></i>Active</span></td>
|
||||
<td class="text-end">
|
||||
<button class="btn btn-sm btn-light text-secondary me-1"><i class="bi bi-eye"></i></button>
|
||||
<button class="btn btn-sm btn-light text-primary me-1 btn-edit-client"
|
||||
data-id="2" data-name="Alpha Telecom Services" data-email="m.osei@alphatel.com.gh" data-contact="Michael Osei" data-phone="+233 24 000 0000" data-location="Kumasi, GH" data-service="pbx" data-billing="prepaid" data-status="active">
|
||||
<i class="bi bi-pencil"></i>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="avatar-circle bg-warning bg-opacity-10 text-warning me-3">LS</div>
|
||||
<div>
|
||||
<div class="fw-bold text-dark">LiveScores Media ZM</div>
|
||||
<div class="text-secondary" style="font-size: 0.8rem;"><i class="bi bi-geo-alt me-1"></i>Lusaka, ZM</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="fw-semibold">David Phiri</div>
|
||||
<div class="text-secondary" style="font-size: 0.8rem;">david@livescores.co.zm</div>
|
||||
</td>
|
||||
<td><span class="badge bg-secondary bg-opacity-10 text-secondary border">USSD App / API</span></td>
|
||||
<td><span class="badge bg-info bg-opacity-10 text-info">Postpaid</span></td>
|
||||
<td><span class="badge bg-warning bg-opacity-10 text-warning px-2 py-1"><i class="bi bi-clock me-1"></i>Onboarding</span></td>
|
||||
<td class="text-end">
|
||||
<button class="btn btn-sm btn-light text-secondary me-1"><i class="bi bi-eye"></i></button>
|
||||
<button class="btn btn-sm btn-light text-primary me-1 btn-edit-client"
|
||||
data-id="3" data-name="LiveScores Media ZM" data-email="david@livescores.co.zm" data-contact="David Phiri" data-phone="+260 97 000 0000" data-location="Lusaka, ZM" data-service="api" data-billing="postpaid" data-status="onboarding">
|
||||
<i class="bi bi-pencil"></i>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="p-3 d-flex justify-content-between align-items-center">
|
||||
<span class="text-secondary" style="font-size: 0.85rem;">Showing 1 to 3 of 24 entries</span>
|
||||
<nav>
|
||||
<ul class="pagination pagination-sm mb-0">
|
||||
<li class="page-item disabled"><a class="page-link" href="#">Previous</a></li>
|
||||
<li class="page-item active"><a class="page-link" href="#" style="background-color: #5c4df0; border-color: #5c4df0;">1</a></li>
|
||||
<li class="page-item"><a class="page-link text-dark" href="#">2</a></li>
|
||||
<li class="page-item"><a class="page-link text-dark" href="#">Next</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<div class="modal fade" id="clientModal" tabindex="-1" aria-hidden="true">
|
||||
<div class="modal-dialog modal-lg modal-dialog-centered">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title fw-bold" id="clientModalTitle">Add New Client</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
|
||||
<form id="clientForm">
|
||||
<div class="modal-body p-4">
|
||||
<input type="hidden" id="clientId" name="id">
|
||||
|
||||
<h6 class="fw-bold mb-3 text-secondary text-uppercase" style="font-size: 0.75rem;">Company Details</h6>
|
||||
<div class="row g-3 mb-4">
|
||||
<div class="col-md-6">
|
||||
<label class="form-label text-secondary fw-semibold" style="font-size: 0.85rem;">Company Name *</label>
|
||||
<input type="text" class="form-control" id="clientName" name="name" required placeholder="e.g. Acme Corp">
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label class="form-label text-secondary fw-semibold" style="font-size: 0.85rem;">Location / Region</label>
|
||||
<input type="text" class="form-control" id="clientLocation" name="location" placeholder="e.g. Accra, GH">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h6 class="fw-bold mb-3 text-secondary text-uppercase" style="font-size: 0.75rem;">Primary Contact</h6>
|
||||
<div class="row g-3 mb-4">
|
||||
<div class="col-md-4">
|
||||
<label class="form-label text-secondary fw-semibold" style="font-size: 0.85rem;">Full Name</label>
|
||||
<input type="text" class="form-control" id="clientContact" name="contact_name" placeholder="Contact person">
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<label class="form-label text-secondary fw-semibold" style="font-size: 0.85rem;">Email Address *</label>
|
||||
<input type="email" class="form-control" id="clientEmail" name="email" required placeholder="name@company.com">
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<label class="form-label text-secondary fw-semibold" style="font-size: 0.85rem;">Phone Number</label>
|
||||
<input type="text" class="form-control" id="clientPhone" name="phone" placeholder="+233 ...">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h6 class="fw-bold mb-3 text-secondary text-uppercase" style="font-size: 0.75rem;">Service & Billing Configuration</h6>
|
||||
<div class="row g-3">
|
||||
<div class="col-md-4">
|
||||
<label class="form-label text-secondary fw-semibold" style="font-size: 0.85rem;">Primary Service</label>
|
||||
<select class="form-select" id="clientService" name="service_type">
|
||||
<option value="pbx">SIP Trunking / PBX</option>
|
||||
<option value="api">USSD App / API</option>
|
||||
<option value="gis">GIS Data / Mapping</option>
|
||||
<option value="web">Web Infrastructure</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<label class="form-label text-secondary fw-semibold" style="font-size: 0.85rem;">Billing Type</label>
|
||||
<select class="form-select" id="clientBilling" name="billing_type">
|
||||
<option value="postpaid">Postpaid (Invoice)</option>
|
||||
<option value="prepaid">Prepaid (Balance)</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<label class="form-label text-secondary fw-semibold" style="font-size: 0.85rem;">Account Status</label>
|
||||
<select class="form-select" id="clientStatus" name="status">
|
||||
<option value="active">Active</option>
|
||||
<option value="onboarding">Onboarding</option>
|
||||
<option value="suspended">Suspended</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer bg-light">
|
||||
<button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
|
||||
<button type="submit" class="btn text-white fw-bold px-4" style="background-color: #5c4df0;" id="btnSubmitClient">
|
||||
Save Client
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
|
||||
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
// Reusable Clock Update
|
||||
function updateClock() {
|
||||
const now = new Date();
|
||||
$('#current-time').text(now.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: true }));
|
||||
}
|
||||
updateClock();
|
||||
setInterval(updateClock, 1000);
|
||||
|
||||
const clientModal = new bootstrap.Modal(document.getElementById('clientModal'));
|
||||
const $form = $('#clientForm');
|
||||
|
||||
// --- OPEN MODAL FOR CREATE ---
|
||||
$('#btnOpenClientModal').on('click', function() {
|
||||
$form[0].reset();
|
||||
$('#clientId').val('');
|
||||
$('#clientModalTitle').text('Add New Client');
|
||||
$('#btnSubmitClient').html('<i class="bi bi-save me-2"></i>Save Client');
|
||||
clientModal.show();
|
||||
});
|
||||
|
||||
// --- OPEN MODAL FOR EDIT ---
|
||||
$('.btn-edit-client').on('click', function() {
|
||||
// Fetch data attributes from the clicked button
|
||||
const data = $(this).data();
|
||||
|
||||
// Populate the form
|
||||
$('#clientId').val(data.id);
|
||||
$('#clientName').val(data.name);
|
||||
$('#clientLocation').val(data.location);
|
||||
$('#clientContact').val(data.contact);
|
||||
$('#clientEmail').val(data.email);
|
||||
$('#clientPhone').val(data.phone);
|
||||
$('#clientService').val(data.service);
|
||||
$('#clientBilling').val(data.billing);
|
||||
$('#clientStatus').val(data.status);
|
||||
|
||||
// Update UI text
|
||||
$('#clientModalTitle').text('Edit Client: ' + data.name);
|
||||
$('#btnSubmitClient').html('<i class="bi bi-check-circle me-2"></i>Update Client');
|
||||
|
||||
clientModal.show();
|
||||
});
|
||||
|
||||
// --- HANDLE FORM SUBMISSION ---
|
||||
$form.on('submit', function(e) {
|
||||
e.preventDefault();
|
||||
const $btn = $('#btnSubmitClient');
|
||||
const originalText = $btn.html();
|
||||
const isEdit = $('#clientId').val() !== '';
|
||||
|
||||
$btn.html('<span class="spinner-border spinner-border-sm me-2"></span> Processing...');
|
||||
$btn.prop('disabled', true);
|
||||
|
||||
// Simulate AJAX Request to Laravel Backend
|
||||
setTimeout(() => {
|
||||
const formData = $(this).serializeArray();
|
||||
console.log('Submitted Client Data:', formData);
|
||||
|
||||
$btn.html(originalText);
|
||||
$btn.prop('disabled', false);
|
||||
clientModal.hide();
|
||||
|
||||
alert(isEdit ? 'Client updated successfully!' : 'New client created successfully!');
|
||||
// Normally you would reload the datatable here or append the new row
|
||||
}, 800);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
108
resources/views/clients/partials/create.blade.php
Normal file
108
resources/views/clients/partials/create.blade.php
Normal file
@@ -0,0 +1,108 @@
|
||||
<div class="modal fade" id="clientModal" tabindex="-1" aria-hidden="true">
|
||||
<div class="modal-dialog modal-lg modal-dialog-centered">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title fw-bold" id="clientModalTitle">Add New Client</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
|
||||
<form id="clientForm">
|
||||
<div class="modal-body p-4">
|
||||
<input type="hidden" id="clientId" name="id">
|
||||
|
||||
<h6 class="fw-bold mb-3 text-secondary text-uppercase" style="font-size: 0.75rem;">Company Details</h6>
|
||||
<div class="row g-3 mb-4">
|
||||
<div class="col-md-6">
|
||||
<label class="form-label text-secondary fw-semibold" style="font-size: 0.85rem;">Company Name *</label>
|
||||
<input type="text" class="form-control" id="clientName" name="name" required placeholder="e.g. Kasapreko Distilleries">
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label class="form-label text-secondary fw-semibold" style="font-size: 0.85rem;">Location / Country</label>
|
||||
<input type="text" class="form-control" id="country" name="location" placeholder="">
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label class="form-label text-secondary fw-semibold" style="font-size: 0.85rem;">Company Type</label>
|
||||
<select class="form-select" id="companyType" name="company_type">
|
||||
<option value="" selected disabled>--Select--</option>
|
||||
<option value="aggregator">Aggregator/Supplier</option>
|
||||
<option value="enterprise">Enterprice</option>
|
||||
<option value="hybrid">Hybrid</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label class="form-label text-secondary fw-semibold" style="font-size: 0.85rem;">Industry Type</label>
|
||||
<select class="form-select" id="industryType" name="industry_type">
|
||||
<option value="" selected disabled>--Select--</option>
|
||||
<option value="aggregator">Aggregator SMS/USSD/Voice</option>
|
||||
<option value="delivery">Delivery Service</option>
|
||||
<option value="education">Education </option>
|
||||
<option value="financial">Financial Institution</option>
|
||||
<option value="games">Games & Gambling</option>
|
||||
<option value="general">General</option>
|
||||
<option value="government">Government</option>
|
||||
<option value="health">Health</option>
|
||||
<option value="hospitality">Hospitality</option>
|
||||
<option value="mobile_network_operator">Mobile Network Operator</option>
|
||||
<option value="ngo">NGO</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<h6 class="fw-bold mb-3 text-secondary text-uppercase" style="font-size: 0.75rem;">Primary Contact</h6>
|
||||
<div class="row g-3 mb-4">
|
||||
<div class="col-md-4">
|
||||
<label class="form-label text-secondary fw-semibold" style="font-size: 0.85rem;">Full Name</label>
|
||||
<input type="text" class="form-control" id="clientContact" name="contact_name" placeholder="Contact person">
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<label class="form-label text-secondary fw-semibold" style="font-size: 0.85rem;">Email Address *</label>
|
||||
<input type="email" class="form-control" id="clientEmail" name="email" required placeholder="name@company.com">
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<label class="form-label text-secondary fw-semibold" style="font-size: 0.85rem;">Phone Number</label>
|
||||
<input type="text" class="form-control" id="clientPhone" name="phone" placeholder="+233 ...">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h6 class="fw-bold mb-3 text-secondary text-uppercase" style="font-size: 0.75rem;">Service & Billing Configuration</h6>
|
||||
<div class="row g-3">
|
||||
<div class="col-md-4">
|
||||
<label class="form-label text-secondary fw-semibold" style="font-size: 0.85rem;">Primary Service</label>
|
||||
<select class="form-select" id="clientService" name="service_type">
|
||||
<option value="" selected disabled>--Select--</option>
|
||||
<option value="sms">SMS</option>
|
||||
<option value="ussd">USSD</option>
|
||||
<option value="airtime">Airtime</option>
|
||||
<option value="voice">Voice</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<label class="form-label text-secondary fw-semibold" style="font-size: 0.85rem;">Billing Type</label>
|
||||
<select class="form-select" id="clientBilling" name="billing_type">
|
||||
<option value="" selected disabled>--Select--</option>
|
||||
<option value="postpaid">Postpaid (Invoice)</option>
|
||||
<option value="prepaid">Prepaid (Balance)</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<label class="form-label text-secondary fw-semibold" style="font-size: 0.85rem;">Account Status</label>
|
||||
<select class="form-select" id="clientStatus" name="status">
|
||||
<option value="" selected disabled>--Select--</option>
|
||||
<option value="active">Active</option>
|
||||
<option value="onboarding">Prospective</option>
|
||||
<option value="suspended">In Discussion</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer bg-light">
|
||||
<button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
|
||||
<button type="submit" class="btn text-white fw-bold px-4" style="background-color: #5c4df0;" id="btnSubmitClient">
|
||||
Save Client
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
Reference in New Issue
Block a user