Skip to content

I
IPRSv2
Commit 86deb9f5 authored by Brian Wangora's avatar Brian Wangora
Browse files
Options

Management dashboard complete

parent 7799d340
Show whitespace changes
Inline Side-by-side
Showing with 190 additions and 168 deletions
config/adminlte.php
View file @ 86deb9f5
...@@ -384,7 +384,7 @@ return [ ...@@ -384,7 +384,7 @@ return [
], ],
[ [
'text' => 'Home 2', 'text' => 'Home 2 (Management)',
'url' => 'director', 'url' => 'director',
'icon' => 'fas fa-home', 'icon' => 'fas fa-home',
'can' => 'isClient', 'can' => 'isClient',
......
resources/views/home/home2.blade.php
View file @ 86deb9f5
...@@ -23,8 +23,8 @@ ...@@ -23,8 +23,8 @@
</div> </div>
<div class="d-flex flex-column flex-lg-row"> <div class="d-flex flex-column flex-lg-row">
<div class="col-lg-8"> <div class="col-lg-7">
<x-adminlte-card title="Records Received" theme="" icon="fas fa-calendar-alt" removable collapsible> <x-adminlte-card title="Records Received" theme="" icon="" collapsible>
<!-- Month/Year Selector Row --> <!-- Month/Year Selector Row -->
<div class="row mb-3"> <div class="row mb-3">
<div class="col-md-6"> <div class="col-md-6">
...@@ -76,42 +76,42 @@ ...@@ -76,42 +76,42 @@
</x-adminlte-card> </x-adminlte-card>
<div> <div>
<div class="container-fluid d-flex flex-column p-3 bg-white rounded"> <x-adminlte-card title="Active Integrations by Industry" theme="" icon="" collapsible>
<div class="d-flex flex-column flex-sm-row justify-content-between align-items-center mb-3"> <x-slot name="titleSlot">
<div> <h4 class="card-title">Active Integrations by Industry</h4>
<span class="h4">Data</span> </x-slot>
</div>
</div>
<div class=""> <div class="">
@php @php
$heads = [ $heads = [
'Code', 'Industry',
'Name', 'Organization Name',
'Records', 'API Key',
'API Calls', 'Data Type',
'Monthly API Calls',
['label' => 'Actions', 'no-export' => true, 'width' => 5], ['label' => 'Actions', 'no-export' => true, 'width' => 5],
]; ];
$data = [
['Telco', 'Safaricom', 'API-1243', 'ID + Birth', '45,000'],
['Telco', 'Airtel', 'API-9421', 'ID Only', '33,500'],
['FBSI', 'Equity Bank', 'API-5521', 'All', '64,200'],
['FBSI', 'NCBA', 'API-6211', 'ID + Passport', '22,700'],
['Gov', 'NHIF', 'API-7710', 'Birth Only', '17,000'],
];
$config = [ $config = [
'data' => [ 'order' => [[0, 'asc']],
['NRB', 'National Registration Bureau', '1,208,333', '651,665'], 'columns' => [null, null, null, null, null, ['orderable' => false]],
['CRD', 'Civil Registration Department', '866,820', '530,046'],
['DOI', 'Department of Immigration', '1,453,787', '1,301,165'],
['RAD', 'Refugee Affairs Department', '315,493', '73,081'],
['RG', 'Registrar General', '143,920', '5,313,510'],
],
'order' => [[1, 'asc']],
'columns' => [null, null, null, null, ['orderable' => false]],
]; ];
@endphp @endphp
<x-adminlte-datatable id="populationByCounties" bordered :heads="$heads" hoverable striped> <x-adminlte-datatable id="activeIntegrationsByIndustry" :heads="$heads" :config="$config" bordered hoverable striped>
@foreach($config['data'] as $row) @foreach($data as $row)
<tr> <tr>
@foreach($row as $cell) @foreach($row as $cell)
<td>{!! $cell !!}</td> <td>{!! $cell !!}</td>
@endforeach @endforeach
<td> <td>
<a href="#"> <a href="#">
<button class="btn btn-xs btn-default text-teal mx-1 shadow" title="Details"> <button class="btn btn-xs btn-default text-teal mx-1 shadow" title="Details">
...@@ -123,96 +123,88 @@ ...@@ -123,96 +123,88 @@
@endforeach @endforeach
</x-adminlte-datatable> </x-adminlte-datatable>
</div> </div>
</div> </x-adminlte-card>
</div> </div>
<div class="d-flex justify-content-between mt-3">
<x-adminlte-small-box title="10.8k" text="Remaining Tokens" icon="fas fa-lg fa-coins text-success"
theme="white" url="#" url-text="View details" class="w-50 mr-3"/>
<x-adminlte-small-box title="308" text="Searches Performed" icon="fas fa-lg fa-poll text-danger"
theme="white" url="#" url-text="View details" class="w-50"/>
</div>
<div class="">
<div class="container-fluid d-flex flex-column p-3 bg-white rounded">
<div class="d-flex flex-column flex-sm-row justify-content-between align-items-center mb-3">
<div> <div>
<span class="h4"></span> <x-adminlte-card title="Revenue Growth Rate" theme="" icon="" collapsible>
</div> <x-slot name="titleSlot">
</div> <h4 class="card-title">Revenue Growth Rate</h4>
<div class=""> </x-slot>
<div class="card"> <div class="d-flex justify-content-center mb-3">
<div class="m-2"> <div class="btn-group">
<span class="h5">Input Traffic</span> <button id="showMonthly" class="btn btn-sm btn-success">Monthly</button>
</div> <button id="showYearly" class="btn btn-sm btn-outline-success">Yearly</button>
<div class="px-2 py-4">
<canvas id="dataInput"></canvas>
</div>
</div> </div>
</div> </div>
<div class="chart">
<canvas id="revenueGrowthChart" height="250"></canvas>
</div> </div>
</x-adminlte-card>
</div> </div>
</div> </div>
<div class="col-lg-4 d-flex flex-column"> <div class="col-lg-5 d-flex flex-column">
<div> <div>
<div> <div>
<div class="container-fluid d-flex flex-column mb-3 p-3 bg-white rounded"> <x-adminlte-card title="Total API Requests Processed" theme="" icon="" collapsible>
<div class="d-flex flex-column flex-sm-row justify-content-between align-items-center mb-3"> <x-slot name="titleSlot">
<div> <h4 class="card-title">Total API Requests Processed</h4>
<span class="h4">Client Onboarding Drafts</span> </x-slot>
</div>
</div>
<div class=""> <div class="">
@php @php
$heads = [ $heads = [
'ID', 'Organization',
'Client', 'Industry',
'API Key',
'Total Requests',
'Success Rate (%)',
['label' => 'Actions', 'no-export' => true, 'width' => 5], ['label' => 'Actions', 'no-export' => true, 'width' => 5],
]; ];
$data = [
['Safaricom', 'Telco', 'API-1243', '1,203,421', '98.2'],
['Airtel', 'Telco', 'API-9421', '834,775', '97.5'],
['Equity Bank', 'FBSI', 'API-5521', '1,509,342', '96.9'],
['NCBA', 'FBSI', 'API-6211', '675,312', '95.3'],
['NHIF', 'Gov', 'API-7710', '321,008', '92.6'],
];
$config = [ $config = [
'data' => \App\Models\Onboarding::where(function ($query) { 'order' => [[3, 'desc']],
$query->orWhereNull("client_rid")->orWhereNull("contract_rid")->orWhereNull("user_id"); 'columns' => [null, null, null, null, null, ['orderable' => false]],
})->get(),
'order' => [[1, 'asc']],
'columns' => [null, null, ['orderable' => false]],
]; ];
@endphp @endphp
<x-adminlte-datatable id="onboardingDrafts" bordered :heads="$heads" hoverable striped> <x-adminlte-datatable id="totalApiRequestsProcessed" :heads="$heads" :config="$config" bordered hoverable striped>
@foreach($config['data'] as $row) @foreach($data as $row)
<tr> <tr>
<td>{{ $row->id }}</td> @foreach($row as $cell)
<td>{{ $row->client->name_fl ?? '-' }}</td> <td>{!! $cell !!}</td>
@endforeach
<td> <td>
<div class="d-flex"> <a href="#">
@if($row->client_rid != null) <button class="btn btn-xs btn-default text-teal mx-1 shadow" title="Details">
<a href="{{ route('onboarding.show', $row->id) }}"
class="btn btn-xs btn-default text-teal mx-1 shadow" title="Details">
<i class="fa fa-lg fa-fw fa-eye"></i> <i class="fa fa-lg fa-fw fa-eye"></i>
</button>
</a> </a>
@endif
<a href="{{ route('onboarding.edit', $row->id) }}"
class="btn btn-xs btn-default text-primary mx-1 shadow" title="Edit">
<i class="fa fa-lg fa-fw fa-pen"></i>
</a>
</div>
</td> </td>
</tr> </tr>
@endforeach @endforeach
</x-adminlte-datatable> </x-adminlte-datatable>
</div> </div>
</div> </x-adminlte-card>
</div> </div>
<div class="card"> <x-adminlte-card title="Data Sources" theme="" icon="" collapsible>
<div class="m-2"> <x-slot name="titleSlot">
<span class="h5">Data Source</span> <h4 class="card-title">Data Sources</h4>
</div> </x-slot>
<div class="py-4"> <div class="py-4">
<canvas id="dataSource1"></canvas> <canvas id="dataSource1"></canvas>
</div> </div>
</div> </x-adminlte-card>
</div> </div>
</div> </div>
</div> </div>
...@@ -225,13 +217,13 @@ ...@@ -225,13 +217,13 @@
@section('js') @section('js')
<script src='/vendor/chart.js/Chart.min.js'></script> <script src='/vendor/chart.js/Chart.min.js'></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script> <script>
let chart1; let chart1;
let chart2;
$(document).ready(() => { $(document).ready(() => {
chart1 = document.getElementById('dataSource1'); chart1 = document.getElementById('dataSource1');
chart2 = document.getElementById('dataInput');
new Chart(chart1, { new Chart(chart1, {
type: 'doughnut', type: 'doughnut',
...@@ -252,101 +244,131 @@ ...@@ -252,101 +244,131 @@
} }
}); });
new Chart(chart2, { });
type: 'line',
$(document).ready(function() {
// Initialize Select2 for better dropdown UX
$('.select2').select2({
theme: 'bootstrap4'
});
// You can add change handlers here if needed
$('.select2').on('change', function() {
console.log('Month/Year changed - would reload data here');
// In a real app, you would fetch new data here
});
});
$(document).ready(function() {
// Dummy data - replace with your actual data
const monthlyData = {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
revenue: [65000, 59000, 80000, 81000, 56000, 55000, 40000, 72000, 88000, 94000, 102000, 118000],
growth: [0, -9.2, 35.6, 1.3, -30.9, -1.8, -27.3, 80.0, 22.2, 6.8, 8.5, 15.7]
};
const yearlyData = {
labels: ['2019', '2020', '2021', '2022', '2023', '2024'],
revenue: [850000, 920000, 1050000, 1120000, 1250000, 1420000],
growth: [0, 8.2, 14.1, 6.7, 11.6, 13.6]
};
const ctx = document.getElementById('revenueGrowthChart').getContext('2d');
let chart;
function renderChart(data) {
if (chart) {
chart.destroy();
}
chart = new Chart(ctx, {
type: 'bar',
data: { data: {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'], labels: data.labels,
datasets: [ datasets: [
{ {
label: 'CRD', label: 'Revenue ($)',
data: [196, 176, 144, 160, 170, 140], data: data.revenue,
fill: false, backgroundColor: 'rgba(20, 176, 76, 1)',
borderColor: 'rgb(255,99,132)', borderColor: 'rgba(20, 176, 76, 1)',
backgroundColor: [ borderWidth: 1,
'rgb(255,99,132)', yAxisID: 'y'
'rgb(54,162,235)',
'rgb(255,205,86)',
'rgb(86,255,179)',
'rgb(192,31,68)',
'rgb(16,218,188)',
],
hoverOffset: 4
}, },
{ {
label: 'DOI', label: 'Growth Rate (%)',
data: [132, 178, 114, 189, 151, 123], data: data.growth,
fill: false, type: 'line',
borderColor: 'rgb(54,162,235)', borderColor: 'rgba(230, 57, 70, 1)',
backgroundColor: [ backgroundColor: 'rgba(230, 57, 70, 0.1)',
'rgb(255,99,132)', borderWidth: 2,
'rgb(54,162,235)', pointBackgroundColor: 'rgba(230, 57, 70, 1)',
'rgb(255,205,86)', yAxisID: 'y1'
'rgb(86,255,179)', }
'rgb(192,31,68)', ]
'rgb(16,218,188)',
],
hoverOffset: 4
}, },
{ options: {
label: 'NRB', responsive: true,
data: [108, 192, 147, 173, 102, 111], maintainAspectRatio: false,
fill: false, plugins: {
borderColor: 'rgb(255,205,86)', tooltip: {
backgroundColor: [ callbacks: {
'rgb(255,99,132)', label: function(context) {
'rgb(54,162,235)', let label = context.dataset.label || '';
'rgb(255,205,86)', if (label) {
'rgb(86,255,179)', label += ': ';
'rgb(192,31,68)', }
'rgb(16,218,188)', if (context.datasetIndex === 1) {
], label += context.raw + '%';
hoverOffset: 4 } else {
label += '$' + context.raw.toLocaleString();
}
return label;
}
}
}
}, },
{ scales: {
label: 'RAD', y: {
data: [115, 164, 123, 200, 85, 191], type: 'linear',
fill: false, display: true,
borderColor: 'rgb(225,12,221)', position: 'left',
backgroundColor: [ title: {
'rgb(255,99,132)', display: true,
'rgb(54,162,235)', text: 'Revenue ($)'
'rgb(255,205,86)', }
'rgb(86,255,179)',
'rgb(192,31,68)',
'rgb(16,218,188)',
],
hoverOffset: 4
}, },
{ y1: {
label: 'RG', type: 'linear',
data: [98, 156, 110, 175, 84, 200], display: true,
fill: false, position: 'right',
borderColor: 'rgb(86,236,11)', title: {
backgroundColor: [ display: true,
'rgb(255,99,132)', text: 'Growth Rate (%)'
'rgb(54,162,235)',
'rgb(255,205,86)',
'rgb(86,255,179)',
'rgb(192,31,68)',
'rgb(16,218,188)',
],
hoverOffset: 4
}, },
] grid: {
drawOnChartArea: false
},
min: -50,
max: 100
}
}
} }
}); });
}); }
// Initial render with monthly data
renderChart(monthlyData);
$(document).ready(function() { // Toggle between views
// Initialize Select2 for better dropdown UX $('#showMonthly').click(function() {
$('.select2').select2({ $(this).removeClass('btn-outline-success').addClass('btn-success');
theme: 'bootstrap4' $('#showYearly').removeClass('btn-success').addClass('btn-outline-success');
renderChart(monthlyData);
}); });
// You can add change handlers here if needed $('#showYearly').click(function() {
$('.select2').on('change', function() { $(this).removeClass('btn-outline-success').addClass('btn-success');
console.log('Month/Year changed - would reload data here'); $('#showMonthly').removeClass('btn-success').addClass('btn-outline-success');
// In a real app, you would fetch new data here renderChart(yearlyData);
}); });
}); });
</script> </script>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment