gitkwesi/sms-client-portal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added SMS balance and Sent SMS

Browse Source
This commit is contained in:
Kwesi Banson Jnr
2026-04-22 13:46:57 +00:00
parent 431dbc7da6
commit d42764a89d
7 changed files with 172 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

118
resources/views/client-traffic/index-test.blade.php
View File

@@ -5,9 +5,11 @@
@section('page-css')
<!-- <link href="https://unpkg.com/tabulator-tables@6.4.0/dist/css/tabulator.min.css" rel="stylesheet"> -->
<link href="{{ url('public/libs/tabulator-master/dist/css/tabulator_bootstrap5.css') }}" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vanillajs-datepicker@1.1.4/dist/css/datepicker.min.css">
@endsection
@section('content')
<section class="traffic-hero mb-4">
<div class="row g-4 align-items-end">
<div class="col-lg-8">
@@ -17,9 +19,66 @@
Search sent SMS, review delivery outcomes, inspect failed attempts, and give clients a fast audit trail for every campaign.
</p> -->
</div>
<div class="col-lg-4"></div>
<div class="col-lg-4">
<div class="row g-3">
<!-- <div class="col-6">
<div class="rounded-4 p-3 bg-white bg-opacity-10">
<div class="small opacity-75">Campaigns</div>
<div class="h3 mb-0">18</div>
</div>
</div> -->
<div class="col-12">
<div class="rounded-4 p-3 bg-white bg-opacity-10">
<div class="small opacity-75">SMS Account Balance</div>
<div class="h3 mb-0" id="mainSmsBalance">{{ number_format($balance_arr['balance']) }}</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="row g-4 mb-4">
<div class="col-md-6 col-xl-6">
<article class="traffic-card">
<div class="d-flex align-items-start justify-content-between mb-3">
<!-- <div class="icon-wrap"><i class="bi bi-send-check"></i></div> -->
<!-- <span class="small text-success fw-semibold">+12.6%</span> -->
</div>
<div class="muted-label mb-2">
<!-- Messages sent from -->
<span id="reportRange">{{ $sms_units_arr['reportDate'] }}</span> </div>
<div class="row">
<div class="col-md-6">
<input id="startDate" name="start_date" type="text" class="form-control" placeholder="Select Start Date">
</div>
<div class="col-md-6">
<input id="endDate" name="end_date" type="text" class="form-control" placeholder="Select End Date">
</div>
<div id="loadingSpinner" class="spinner-border text-primary" role="status" style="display:none;">
<span class="visually-hidden">Loading...</span>
</div>
</div>
<!-- <div class="h3 mb-2 pt-1" id="smsUnitsValue">SMS Units : {{ $sms_units_arr['smsUnits'] }}</div> -->
<!-- <div class="mini-chart"><span style="width: 52%;"></span></div> -->
</article>
</div>
<div class="col-md-6 col-xl-6">
<article class="traffic-card">
<div class="d-flex align-items-start justify-content-between mb-3">
<div class="icon-wrap"><i class="bi bi-check2-circle"></i></div>
<!-- <span class="small text-success fw-semibold">98.4%</span> -->
</div>
<div class="muted-label mb-2">Sent Messages</div>
<!-- <div class="h3 mb-2">183,372</div> -->
<div class="h3 mb-2 pt-1" id="smsUnitsValue">SMS Units : {{ $sms_units_arr['smsUnits'] }}</div>
<div class="mini-chart"><span style="width: 98%;"></span></div>
</article>
</div>
</section>
<section class="row g-4">
<div class="col-xl-12">
<div class="filter-card mb-4">
@@ -36,8 +95,7 @@
<div class="row g-3">
<div class="col-md-12">
<div class="float-end">
<div class="float-end">
<!-- <label for="search" class="form-label fw-semibold">Search</label> -->
<!-- <input id="search" type="text" class="form-control" placeholder="Phone, sender ID, text"> -->
@@ -47,6 +105,7 @@
</div>
<div class="traffic-table-card">
<h2 class="h4 mb-1">Sent SMS list</h2>
<div class="p-1">
<button id="download-pdf" class="btn btn-danger"><i class="bi bi-file-pdf-fill me-2"></i> Export PDF</button>
<button id="download-xlsx" class="btn btn-success"><i class="bi bi-file-excel-fill me-2"></i> Export Excel</button>
@@ -77,6 +136,8 @@
@endsection
@section('page-js')
<!-- <script src="https://unpkg.com/tabulator-tables@6.4.0/dist/js/tabulator.min.js"></script> -->
<script src="https://cdn.jsdelivr.net/npm/vanillajs-datepicker@1.1.4/dist/js/datepicker.min.js"></script>
<script src="{{ url('public/libs/tabulator-master/dist/js/tabulator.min.js') }}"></script>
<script src="https://unpkg.com/jspdf@latest/dist/jspdf.umd.min.js"></script>
@@ -85,6 +146,51 @@
<script src="{{ url('public/libs/tabulator-master/dist/js/autotable.min.js') }}"></script>
<script>
console.log(base_url);
const token = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
const startDateElement = document.getElementById('startDate');
const endDateElement = document.getElementById('endDate');
const startDatepicker = new Datepicker(startDateElement, {
autohide: true,
format: 'yyyy-mm-dd'
});
const endDatepicker = new Datepicker(endDateElement, {
autohide: true,
format: 'yyyy-mm-dd'
});
function sendDailySmsUnits() {
document.getElementById('loadingSpinner').style.display = 'inline-block';
const endpoint = "{{ route('client.dailysmsunits') }}";
const startDate = startDateElement.value;
const endDate = endDateElement.value;
fetch(endpoint, {
method: 'POST',
headers: { 'Content-Type': 'application/x-www-form-urlencoded', 'X-CSRF-TOKEN': token },
body: 'start_date=' + encodeURIComponent(startDate) + '&end_date=' + encodeURIComponent(endDate)
})
.then(response => response.json())
.then(data => {
console.log('Server response:', data);
console.log(data.smsUnits);
document.getElementById('loadingSpinner').style.display = 'none';
const theReportRange = document.getElementById('reportRange');
const theSmsUnitsValue = document.getElementById('smsUnitsValue');
theReportRange.innerHTML = data.reportDate;
theSmsUnitsValue.innerHTML = "SMS Units : " + data.smsUnits;
})
.catch(error => console.error('Error:', error));
}
//startDateElement.addEventListener('changeDate', sendDailySmsUnits);
endDateElement.addEventListener('changeDate', sendDailySmsUnits);
function statusDesign (cell, formatterParams){
var value = cell.getValue();
// if(value === 'Approved'){
@@ -101,8 +207,8 @@
}
}
}
var table = new Tabulator("#message-table", {
ajaxURL: "https://smsportal.clickmlapps.com/client-traffic-tabulator/",
var table = new Tabulator("#message-table", {
ajaxURL: base_url = "client-traffic-tabulator", // "https://smsportal.clickmlapps.com/client-traffic-tabulator/",
ajaxConfig: {
method: "GET",
headers: {
@@ -140,7 +246,7 @@
invalidPlaceholder: "(invalid date)"
}}
],
});
});
document.getElementById("download-pdf").addEventListener("click", function(){
table.download("pdf", "messages.pdf", {