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

removed login email placeholder and added datepicker on date filter on sms list

Browse Source
This commit is contained in:
Kwesi Banson Jnr
2026-04-22 19:15:46 +00:00
parent d42764a89d
commit 16f2dbbdb6
2 changed files with 73 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
resources/views/client-auth/login.blade.php
View File

@@ -1,4 +1,5 @@
<!doctype html> <!doctype html>
<!-- -->
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
@@ -80,7 +81,13 @@
@csrf @csrf
<div class="mb-3"> <div class="mb-3">
<label for="companyEmail" class="form-label fw-semibold">Email</label> <label for="companyEmail" class="form-label fw-semibold">Email</label>
<input type="email" name="email" class="form-control" id="companyEmail" placeholder="client@click-mobile.com" value="" autocomplete=""> <div class="input-group">
<span class="input-group-text bg-white border-end-0 rounded-start-4">
<i class="bi bi-envelope-at"></i>
</span>
<input type="email" name="email" class="form-control" id="companyEmail" placeholder="" value="" autocomplete="">
</div>
</div> </div>
<div class="mb-3"> <div class="mb-3">

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

@@ -9,7 +9,14 @@
@endsection @endsection
@section('content') @section('content')
<div id="loadingOverlay"
style="display:none; position:fixed; top:0; left:0; width:100%; height:100%;
background:rgba(255,255,255,0.8); z-index:9999;
align-items:center; justify-content:center;">
<div class="spinner-border text-primary" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
<section class="traffic-hero mb-4"> <section class="traffic-hero mb-4">
<div class="row g-4 align-items-end"> <div class="row g-4 align-items-end">
<div class="col-lg-8"> <div class="col-lg-8">
@@ -55,9 +62,9 @@
<div class="col-md-6"> <div class="col-md-6">
<input id="endDate" name="end_date" type="text" class="form-control" placeholder="Select End Date"> <input id="endDate" name="end_date" type="text" class="form-control" placeholder="Select End Date">
</div> </div>
<div id="loadingSpinner" class="spinner-border text-primary" role="status" style="display:none;"> <!-- <div id="loadingSpinner" class="spinner-border text-primary" role="status" style="display:none;">
<span class="visually-hidden">Loading...</span> <span class="visually-hidden">Loading...</span>
</div> </div> -->
</div> </div>
<!-- <div class="h3 mb-2 pt-1" id="smsUnitsValue">SMS Units : {{ $sms_units_arr['smsUnits'] }}</div> --> <!-- <div class="h3 mb-2 pt-1" id="smsUnitsValue">SMS Units : {{ $sms_units_arr['smsUnits'] }}</div> -->
@@ -144,6 +151,7 @@
<script type="text/javascript" src="https://cdn.sheetjs.com/xlsx-0.20.3/package/dist/xlsx.full.min.js"></script> <script type="text/javascript" src="https://cdn.sheetjs.com/xlsx-0.20.3/package/dist/xlsx.full.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/luxon@2.3.1/build/global/luxon.min.js"></script> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/luxon@2.3.1/build/global/luxon.min.js"></script>
<script src="{{ url('public/libs/tabulator-master/dist/js/autotable.min.js') }}"></script> <script src="{{ url('public/libs/tabulator-master/dist/js/autotable.min.js') }}"></script>
<script src=" https://cdn.jsdelivr.net/npm/luxon@3.7.2/build/global/luxon.min.js "></script>
<script> <script>
console.log(base_url); console.log(base_url);
const token = document.querySelector('meta[name="csrf-token"]').getAttribute('content'); const token = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
@@ -163,7 +171,8 @@
}); });
function sendDailySmsUnits() { function sendDailySmsUnits() {
document.getElementById('loadingSpinner').style.display = 'inline-block'; // document.getElementById('loadingSpinner').style.display = 'inline-block';
document.getElementById('loadingOverlay').style.display = 'flex';
const endpoint = "{{ route('client.dailysmsunits') }}"; const endpoint = "{{ route('client.dailysmsunits') }}";
const startDate = startDateElement.value; const startDate = startDateElement.value;
const endDate = endDateElement.value; const endDate = endDateElement.value;
@@ -174,9 +183,8 @@
}) })
.then(response => response.json()) .then(response => response.json())
.then(data => { .then(data => {
console.log('Server response:', data); // document.getElementById('loadingSpinner').style.display = 'none';
console.log(data.smsUnits); document.getElementById('loadingOverlay').style.display = 'none';
document.getElementById('loadingSpinner').style.display = 'none';
const theReportRange = document.getElementById('reportRange'); const theReportRange = document.getElementById('reportRange');
const theSmsUnitsValue = document.getElementById('smsUnitsValue'); const theSmsUnitsValue = document.getElementById('smsUnitsValue');
theReportRange.innerHTML = data.reportDate; theReportRange.innerHTML = data.reportDate;
@@ -187,8 +195,8 @@
} }
//startDateElement.addEventListener('changeDate', sendDailySmsUnits); //startDateElement.addEventListener('changeDate', sendDailySmsUnits);
endDateElement.addEventListener('changeDate', sendDailySmsUnits); endDateElement.addEventListener('changeDate', sendDailySmsUnits);
function statusDesign (cell, formatterParams){ function statusDesign (cell, formatterParams){
@@ -231,20 +239,55 @@
ajaxResponse: function(url, params, response) { ajaxResponse: function(url, params, response) {
return response.content; return response.content;
}, },
columns: [ // columns: [
{title: "Sender", field: "from", width:150, headerFilter:"input"}, // {title: "Sender", field: "from", width:150, headerFilter:"input"},
{title: "Msisdn", field: "to", width:150, headerFilter:"input"}, // {title: "Msisdn", field: "to", width:150, headerFilter:"input"},
// {title: "Message", field: "message"}, // {title:"Message", field:"message", width:650, formatter:"textarea", headerFilter:"input"},
{title:"Message", field:"message", width:650, formatter:"textarea", headerFilter:"input"}, // {title:"Date Created ", field:"createdAt", width:200, formatter:"datetime", headerFilter:"input", formatterParams:{
// {title: "Status", field: "status"}, // inputFormat: "iso",
// {title: "Delivery Status", field: "deliveryStatus", width:100, headerFilter:"input", formatter: statusDesign}, // outputFormat: "dd-MM-yyyy HH:mm:ss",
// {title: "Created At", field: "createdAt"}, // invalidPlaceholder: "(invalid date)"
{title:"Date Created ", field:"createdAt", width:200, formatter:"datetime", headerFilter:"input", formatterParams:{ // }}
inputFormat: "iso", // ],
outputFormat: "dd-MM-yyyy HH:mm:ss",
invalidPlaceholder: "(invalid date)" columns: [
}} {title: "Sender", field: "from", width:150, headerFilter:"input"},
{title: "Msisdn", field: "to", width:150, headerFilter:"input"},
{title:"Message", field:"message", width:650, formatter:"textarea", headerFilter:"input"},
{
title:"Date Created",
field:"createdAt",
width:200,
formatter:"datetime",
formatterParams:{
inputFormat:"iso",
outputFormat:"yyyy-MM-dd",
invalidPlaceholder:"(invalid date)"
},
headerFilter:function(cell, onRendered, success, cancel){
// Create native date input
var input = document.createElement("input");
input.type = "date";
input.addEventListener("change", function(){
console.log(input.value);
success(input.value); // pass value to Tabulator filter
});
return input;
},
headerFilterFunc:function(headerValue, rowValue){
if(!headerValue){ return true; } // no filter
if(!rowValue){ return false; }
// Extract just the date portion from ISO timestamp
const rowDate = new Date(rowValue);
const formatted = rowDate.toISOString().split("T")[0]; // yyyy-MM-dd
return formatted === headerValue;
}
}
], ],
}); });