Skip to content

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

Management dashboard complete

parent 7799d340
Hide whitespace changes
Inline Side-by-side
Showing with 190 additions and 168 deletions
config/adminlte.php
View file @ 86deb9f5
......@@ -384,7 +384,7 @@ return [
],
[
'text' => 'Home 2',
'text' => 'Home 2 (Management)',
'url' => 'director',
'icon' => 'fas fa-home',
'can' => 'isClient',
......
resources/views/home/home2.blade.php
View file @ 86deb9f5
......@@ -23,8 +23,8 @@
</div>
<div class="d-flex flex-column flex-lg-row">
<div class="col-lg-8">
<x-adminlte-card title="Records Received" theme="" icon="fas fa-calendar-alt" removable collapsible>
<div class="col-lg-7">
<x-adminlte-card title="Records Received" theme="" icon="" collapsible>
<!-- Month/Year Selector Row -->
<div class="row mb-3">
<div class="col-md-6">
......@@ -76,42 +76,42 @@
</x-adminlte-card>
<div>
<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>
<span class="h4">Data</span>
</div>
</div>
<x-adminlte-card title="Active Integrations by Industry" theme="" icon="" collapsible>
<x-slot name="titleSlot">
<h4 class="card-title">Active Integrations by Industry</h4>
</x-slot>
<div class="">
@php
$heads = [
'Code',
'Name',
'Records',
'API Calls',
'Industry',
'Organization Name',
'API Key',
'Data Type',
'Monthly API Calls',
['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 = [
'data' => [
['NRB', 'National Registration Bureau', '1,208,333', '651,665'],
['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]],
'order' => [[0, 'asc']],
'columns' => [null, null, null, null, null, ['orderable' => false]],
];
@endphp
<x-adminlte-datatable id="populationByCounties" bordered :heads="$heads" hoverable striped>
@foreach($config['data'] as $row)
<x-adminlte-datatable id="activeIntegrationsByIndustry" :heads="$heads" :config="$config" bordered hoverable striped>
@foreach($data as $row)
<tr>
@foreach($row as $cell)
<td>{!! $cell !!}</td>
@endforeach
<td>
<a href="#">
<button class="btn btn-xs btn-default text-teal mx-1 shadow" title="Details">
......@@ -123,96 +123,88 @@
@endforeach
</x-adminlte-datatable>
</div>
</div>
</x-adminlte-card>
</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>
<span class="h4"></span>
<div>
<x-adminlte-card title="Revenue Growth Rate" theme="" icon="" collapsible>
<x-slot name="titleSlot">
<h4 class="card-title">Revenue Growth Rate</h4>
</x-slot>
<div class="d-flex justify-content-center mb-3">
<div class="btn-group">
<button id="showMonthly" class="btn btn-sm btn-success">Monthly</button>
<button id="showYearly" class="btn btn-sm btn-outline-success">Yearly</button>
</div>
</div>
<div class="">
<div class="card">
<div class="m-2">
<span class="h5">Input Traffic</span>
</div>
<div class="px-2 py-4">
<canvas id="dataInput"></canvas>
</div>
</div>
<div class="chart">
<canvas id="revenueGrowthChart" height="250"></canvas>
</div>
</div>
</x-adminlte-card>
</div>
</div>
<div class="col-lg-4 d-flex flex-column">
<div class="col-lg-5 d-flex flex-column">
<div>
<div>
<div class="container-fluid d-flex flex-column mb-3 p-3 bg-white rounded">
<div class="d-flex flex-column flex-sm-row justify-content-between align-items-center mb-3">
<div>
<span class="h4">Client Onboarding Drafts</span>
</div>
</div>
<x-adminlte-card title="Total API Requests Processed" theme="" icon="" collapsible>
<x-slot name="titleSlot">
<h4 class="card-title">Total API Requests Processed</h4>
</x-slot>
<div class="">
@php
$heads = [
'ID',
'Client',
'Organization',
'Industry',
'API Key',
'Total Requests',
'Success Rate (%)',
['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 = [
'data' => \App\Models\Onboarding::where(function ($query) {
$query->orWhereNull("client_rid")->orWhereNull("contract_rid")->orWhereNull("user_id");
})->get(),
'order' => [[1, 'asc']],
'columns' => [null, null, ['orderable' => false]],
'order' => [[3, 'desc']],
'columns' => [null, null, null, null, null, ['orderable' => false]],
];
@endphp
<x-adminlte-datatable id="onboardingDrafts" bordered :heads="$heads" hoverable striped>
@foreach($config['data'] as $row)
<x-adminlte-datatable id="totalApiRequestsProcessed" :heads="$heads" :config="$config" bordered hoverable striped>
@foreach($data as $row)
<tr>
<td>{{ $row->id }}</td>
<td>{{ $row->client->name_fl ?? '-' }}</td>
@foreach($row as $cell)
<td>{!! $cell !!}</td>
@endforeach
<td>
<div class="d-flex">
@if($row->client_rid != null)
<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>
</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>
<a href="#">
<button class="btn btn-xs btn-default text-teal mx-1 shadow" title="Details">
<i class="fa fa-lg fa-fw fa-eye"></i>
</button>
</a>
</td>
</tr>
@endforeach
</x-adminlte-datatable>
</div>
</div>
</x-adminlte-card>
</div>
<div class="card">
<div class="m-2">
<span class="h5">Data Source</span>
</div>
<x-adminlte-card title="Data Sources" theme="" icon="" collapsible>
<x-slot name="titleSlot">
<h4 class="card-title">Data Sources</h4>
</x-slot>
<div class="py-4">
<canvas id="dataSource1"></canvas>
</div>
</div>
</x-adminlte-card>
</div>
</div>
</div>
......@@ -225,13 +217,13 @@
@section('js')
<script src='/vendor/chart.js/Chart.min.js'></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
let chart1;
let chart2;
$(document).ready(() => {
chart1 = document.getElementById('dataSource1');
chart2 = document.getElementById('dataInput');
new Chart(chart1, {
type: 'doughnut',
......@@ -252,89 +244,6 @@
}
});
new Chart(chart2, {
type: 'line',
data: {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
datasets: [
{
label: 'CRD',
data: [196, 176, 144, 160, 170, 140],
fill: false,
borderColor: 'rgb(255,99,132)',
backgroundColor: [
'rgb(255,99,132)',
'rgb(54,162,235)',
'rgb(255,205,86)',
'rgb(86,255,179)',
'rgb(192,31,68)',
'rgb(16,218,188)',
],
hoverOffset: 4
},
{
label: 'DOI',
data: [132, 178, 114, 189, 151, 123],
fill: false,
borderColor: 'rgb(54,162,235)',
backgroundColor: [
'rgb(255,99,132)',
'rgb(54,162,235)',
'rgb(255,205,86)',
'rgb(86,255,179)',
'rgb(192,31,68)',
'rgb(16,218,188)',
],
hoverOffset: 4
},
{
label: 'NRB',
data: [108, 192, 147, 173, 102, 111],
fill: false,
borderColor: 'rgb(255,205,86)',
backgroundColor: [
'rgb(255,99,132)',
'rgb(54,162,235)',
'rgb(255,205,86)',
'rgb(86,255,179)',
'rgb(192,31,68)',
'rgb(16,218,188)',
],
hoverOffset: 4
},
{
label: 'RAD',
data: [115, 164, 123, 200, 85, 191],
fill: false,
borderColor: 'rgb(225,12,221)',
backgroundColor: [
'rgb(255,99,132)',
'rgb(54,162,235)',
'rgb(255,205,86)',
'rgb(86,255,179)',
'rgb(192,31,68)',
'rgb(16,218,188)',
],
hoverOffset: 4
},
{
label: 'RG',
data: [98, 156, 110, 175, 84, 200],
fill: false,
borderColor: 'rgb(86,236,11)',
backgroundColor: [
'rgb(255,99,132)',
'rgb(54,162,235)',
'rgb(255,205,86)',
'rgb(86,255,179)',
'rgb(192,31,68)',
'rgb(16,218,188)',
],
hoverOffset: 4
},
]
}
});
});
$(document).ready(function() {
......@@ -349,6 +258,119 @@
// 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: {
labels: data.labels,
datasets: [
{
label: 'Revenue ($)',
data: data.revenue,
backgroundColor: 'rgba(20, 176, 76, 1)',
borderColor: 'rgba(20, 176, 76, 1)',
borderWidth: 1,
yAxisID: 'y'
},
{
label: 'Growth Rate (%)',
data: data.growth,
type: 'line',
borderColor: 'rgba(230, 57, 70, 1)',
backgroundColor: 'rgba(230, 57, 70, 0.1)',
borderWidth: 2,
pointBackgroundColor: 'rgba(230, 57, 70, 1)',
yAxisID: 'y1'
}
]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
tooltip: {
callbacks: {
label: function(context) {
let label = context.dataset.label || '';
if (label) {
label += ': ';
}
if (context.datasetIndex === 1) {
label += context.raw + '%';
} else {
label += '$' + context.raw.toLocaleString();
}
return label;
}
}
}
},
scales: {
y: {
type: 'linear',
display: true,
position: 'left',
title: {
display: true,
text: 'Revenue ($)'
}
},
y1: {
type: 'linear',
display: true,
position: 'right',
title: {
display: true,
text: 'Growth Rate (%)'
},
grid: {
drawOnChartArea: false
},
min: -50,
max: 100
}
}
}
});
}
// Initial render with monthly data
renderChart(monthlyData);
// Toggle between views
$('#showMonthly').click(function() {
$(this).removeClass('btn-outline-success').addClass('btn-success');
$('#showYearly').removeClass('btn-success').addClass('btn-outline-success');
renderChart(monthlyData);
});
$('#showYearly').click(function() {
$(this).removeClass('btn-outline-success').addClass('btn-success');
$('#showMonthly').removeClass('btn-success').addClass('btn-outline-success');
renderChart(yearlyData);
});
});
</script>
@stop
......
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