Skip to content

I
IPRSv2
Commit 501270e7 authored by Brian Wangora's avatar Brian Wangora
Browse files
Options

Dashboard corrections

parent 654b05a6
Hide whitespace changes
Inline Side-by-side
Showing with 601 additions and 420 deletions
resources/views/home/dashboard.blade.php
View file @ 501270e7
...@@ -22,252 +22,231 @@ ...@@ -22,252 +22,231 @@
</div> </div>
</div> </div>
<!-- TOP ROW: SYSTEM HEALTH WIDGETS --> <!-- Data Synchronization Status -->
<div class="row mt-4"> <div class="mt-4">
<div class="col-md-2"> <div class="card-header">
<x-adminlte-info-box <h3 class="card-title">
title="API Requests (Today)" Data Sourcing
text="42,618" </h3>
icon="fas fa-exchange-alt fa-2x"
theme="gradient-teal"
progress="78"
description="↑12% from yesterday">
<div class="text-xs text-muted">External: 32,145 | Internal: 10,473</div>
</x-adminlte-info-box>
</div>
<div class="col-md-2">
<x-adminlte-info-box
title="Total API Requests"
text="1.42M"
icon="fas fa-exchange-alt fa-2x"
theme="gradient-primary"
progress="12"
description="↑12% from last week">
<div class="text-xs text-muted">24h: 42,618 requests</div>
</x-adminlte-info-box>
</div>
<div class="col-md-2">
<x-adminlte-info-box
title="Avg Response Time"
text="143ms"
icon="fas fa-tachometer-alt fa-2x"
theme="gradient-indigo"
progress="65"
description="Max: 2.4s">
</x-adminlte-info-box>
</div> </div>
<div class="row">
<!-- SUMMARY WIDGETS -->
<div class="col-md-2">
<x-adminlte-info-box
title="Last Successful Sync"
text="2 minutes ago"
icon="fas fa-check-circle fa-2x"
theme="gradient-teal"
progress="100"
description="All systems operational"/>
</div>
<div class="col-md-2"> <div class="col-md-2">
<x-adminlte-info-box <x-adminlte-info-box
title="Failed Requests" title="Sync Success Rate"
text="0.23%" text="98.7%"
icon="fas fa-exclamation-triangle fa-2x" icon="fas fa-sync-alt fa-2x"
theme="gradient-warning" theme="gradient-teal"
progress="0.23" progress="98.7"
description="↓0.05% from yesterday"> description="↑1.2% from last week"/>
<div class="text-xs text-muted">328 failures (24h)</div> </div>
</x-adminlte-info-box>
</div>
<div class="col-md-2"> <div class="col-md-2">
<x-adminlte-info-box <x-adminlte-info-box
title="Error Rate" title="Failed Syncs (24h)"
text="0.23%" text="18"
icon="fas fa-exclamation-triangle fa-2x" icon="fas fa-exclamation-triangle fa-2x"
theme="gradient-orange" theme="gradient-orange"
progress="0.23" progress="0.4"
description="38 failed requests"> description="0.4% error rate"/>
</x-adminlte-info-box> </div>
</div>
<div class="col-md-2">
<div class="col-md-2"> <x-adminlte-info-box
<x-adminlte-info-box title="Unverified Records"
title="Uptime (30d)" text="247"
text="99.97%" icon="fas fa-question-circle fa-2x"
icon="fas fa-heartbeat fa-2x" theme="gradient-indigo"
theme="gradient-green" progress="15"
progress="99.97" description="15% overdue"/>
description="4m 12s downtime"> </div>
</x-adminlte-info-box>
</div>
</div>
<!-- User Activity & Access Logs --> <div class="col-md-2">
<div class="row mt-4"> <x-adminlte-info-box
<div class="col-md-2"> title="Records Processed"
<x-adminlte-info-box text="42,618"
title="Active Users (24h)" icon="fas fa-database fa-2x"
text="142" theme="gradient-info"
icon="fas fa-users fa-2x" progress="92"
theme="gradient-teal" description="↑8% from yesterday">
progress="15" <div class="text-xs text-muted">NRB: 18,245 | CRS: 12,102 | DOI: 12,271</div>
description="↑15% from yesterday"/> </x-adminlte-info-box>
</div> </div>
<div class="col-md-2">
<x-adminlte-info-box
title="Failed Logins (24h)"
text="28"
icon="fas fa-user-lock fa-2x"
theme="gradient-orange"
progress="8"
description="↓3 from yesterday"/>
</div>
<div class="col-md-2">
<x-adminlte-info-box
title="Avg Session Duration"
text="24m 18s"
icon="fas fa-clock fa-2x"
theme="gradient-info"
progress="12"
description="↑12% from last week"/>
</div>
<!-- Performance Monitoring --> <div class="col-md-2">
<div class="col-md-2"> <x-adminlte-info-box
<x-adminlte-info-box title="Duplicate Records (30d)"
title="Avg Query Time" text="1,842"
text="142ms" icon="fas fa-copy fa-2x"
icon="fas fa-database fa-2x" theme="gradient-orange"
theme="gradient-indigo" progress=3.2
progress="85" description="0.32% of total records">
description="Slowest: 2.4s" <div class="text-xs text-muted">NRB: 892 | CRS: 612 | DOI: 338</div>
id="queryTimeWidget"> </x-adminlte-info-box>
</x-adminlte-info-box> </div>
</div>
<div class="col-md-2">
<x-adminlte-info-box
title="Storage Used"
text="2.4TB/5TB"
icon="fas fa-hdd fa-2x"
theme="gradient-teal"
progress="48"
description="48% utilized"
id="storageWidget">
</x-adminlte-info-box>
</div>
<div class="col-md-2">
<x-adminlte-info-box
title="Network Traffic"
text="42GB"
icon="fas fa-network-wired fa-2x"
theme="gradient-primary"
progress="72"
description="72% external"
id="trafficWidget">
</x-adminlte-info-box>
</div> </div>
</div> </div>
<!-- Data Synchronization Status --> <!-- TOP ROW: SYSTEM HEALTH WIDGETS -->
<div class="row mt-4"> <div class="mt-4">
<!-- SUMMARY WIDGETS --> <div class="card-header">
<div class="col-md-2"> <h3 class="card-title">
<x-adminlte-info-box API Management
title="Last Successful Sync" </h3>
text="2 minutes ago" </div>
icon="fas fa-check-circle fa-2x" <div class="row">
theme="gradient-teal" <div class="col-md-2">
progress="100" <x-adminlte-info-box
description="All systems operational"/> title="API Requests (Today)"
</div> text="42,618"
icon="fas fa-exchange-alt fa-2x"
<div class="col-md-2"> theme="gradient-teal"
<x-adminlte-info-box progress="78"
title="Sync Success Rate" description="↑12% from yesterday">
text="98.7%" <div class="text-xs text-muted">External: 32,145 | Internal: 10,473</div>
icon="fas fa-sync-alt fa-2x" </x-adminlte-info-box>
theme="gradient-teal" </div>
progress="98.7"
description="↑1.2% from last week"/>
</div>
<div class="col-md-2"> <div class="col-md-2">
<x-adminlte-info-box <x-adminlte-info-box
title="Failed Syncs (24h)" title="Total API Requests"
text="18" text="1.42M"
icon="fas fa-exclamation-triangle fa-2x" icon="fas fa-exchange-alt fa-2x"
theme="gradient-orange" theme="gradient-primary"
progress="0.4" progress="12"
description="0.4% error rate"/> description="↑12% from last week">
</div> <div class="text-xs text-muted">24h: 42,618 requests</div>
</x-adminlte-info-box>
<div class="col-md-2"> </div>
<x-adminlte-info-box
title="Unverified Records" <div class="col-md-2">
text="247" <x-adminlte-info-box
icon="fas fa-question-circle fa-2x" title="Avg Response Time"
theme="gradient-indigo" text="143ms"
progress="15" icon="fas fa-tachometer-alt fa-2x"
description="15% overdue"/> theme="gradient-indigo"
</div> progress="65"
description="Max: 2.4s">
</x-adminlte-info-box>
</div>
<div class="col-md-2"> <div class="col-md-2">
<x-adminlte-info-box <x-adminlte-info-box
title="Records Processed" title="Failed Requests"
text="42,618" text="0.23%"
icon="fas fa-database fa-2x" icon="fas fa-exclamation-triangle fa-2x"
theme="gradient-info" theme="gradient-warning"
progress="92" progress="0.23"
description="↑8% from yesterday"> description="↓0.05% from yesterday">
<div class="text-xs text-muted">NRB: 18,245 | CRS: 12,102 | DOI: 12,271</div> <div class="text-xs text-muted">328 failures (24h)</div>
</x-adminlte-info-box> </x-adminlte-info-box>
</div> </div>
<div class="col-md-2"> <div class="col-md-2">
<x-adminlte-info-box <x-adminlte-info-box
title="Duplicate Records (30d)" title="Error Rate"
text="1,842" text="0.23%"
icon="fas fa-copy fa-2x" icon="fas fa-exclamation-triangle fa-2x"
theme="gradient-orange" theme="gradient-orange"
progress=3.2 progress="0.23"
description="0.32% of total records"> description="38 failed requests">
<div class="text-xs text-muted">NRB: 892 | CRS: 612 | DOI: 338</div> </x-adminlte-info-box>
</x-adminlte-info-box> </div>
<div class="col-md-2">
<x-adminlte-info-box
title="Uptime (30d)"
text="99.97%"
icon="fas fa-heartbeat fa-2x"
theme="gradient-green"
progress="99.97"
description="4m 12s downtime">
</x-adminlte-info-box>
</div>
</div> </div>
</div> </div>
<!-- Data Integrity & Verification Trends --> <!-- User Activity & Access Logs -->
<!-- <div class="row mt-4"> <div class="mt-4">
<div class="col-md-2"> <div class="card-header">
<x-adminlte-info-box <h3 class="card-title">
title="Verification Success Rate" User Management
text="98.7%" </h3>
icon="fas fa-check-circle fa-2x"
theme="gradient-teal"
progress="98.7"
description="↑1.2% from last week"/>
</div> </div>
<div class="row justify-content-center">
<div class="col-md-2">
<x-adminlte-info-box
title="Existing Contracts"
text="1,387"
icon="fas fa-copy fa-2x"
theme="gradient-teal"
progress=""
description="1,387 Valid Contracts"/>
</div>
<div class="col-md-2"> <div class="col-md-2">
<x-adminlte-info-box <x-adminlte-info-box
title="Pending Updates" title="Expired Contracts"
text="247" text="345"
icon="fas fa-clock fa-2x" icon="fas fa-exclamation-triangle fa-2x"
theme="gradient-indigo" theme="gradient-orange"
progress="15" progress=""
description="15% overdue"/> description="345 Expired Contracts"/>
</div> </div>
<div class="col-md-2">
<x-adminlte-info-box
title="Active Users (24h)"
text="142"
icon="fas fa-users fa-2x"
theme="gradient-teal"
progress="15"
description="↑15% from yesterday"/>
</div>
<div class="col-md-2">
<x-adminlte-info-box
title="Failed Logins (24h)"
text="28"
icon="fas fa-user-lock fa-2x"
theme="gradient-orange"
progress="8"
description="↓3 from yesterday"/>
</div>
<div class="col-md-2">
<x-adminlte-info-box
title="Avg Session Duration"
text="24m 18s"
icon="fas fa-clock fa-2x"
theme="gradient-info"
progress="12"
description="↑12% from last week"/>
</div>
<div class="col-md-2"> <div class="col-md-2">
<x-adminlte-info-box <x-adminlte-info-box
title="Data Compliance Score" title="Avg Query Time"
text="96.5%" text="142ms"
icon="fas fa-shield-alt fa-2x" icon="fas fa-database fa-2x"
theme="gradient-teal" theme="gradient-indigo"
progress="96.5" progress="85"
description="↑2.1% from last quarter"> description="Slowest: 2.4s"
<div class="text-xs text-muted">42 of 45 organizations compliant</div> id="queryTimeWidget"/>
</x-adminlte-info-box> </div>
</div> </div>
</div> --> </div>
<div class="d-flex flex-column flex-lg-row mt-4"> <div class="d-flex flex-column flex-lg-row mt-4">
...@@ -408,6 +387,127 @@ ...@@ -408,6 +387,127 @@
</div> </div>
</div> </div>
<div class="mt-4">
<x-adminlte-card title="Records Received" theme="" icon="" collapsible>
<!-- Month/Year Selector Row -->
<div class="row mb-3">
<div class="col-md-6">
<div class="form-group">
<label>Month</label>
<select class="form-control select2" style="width: 100%;">
@foreach(['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] as $month)
<option value="{{ $month }}" {{ $month == 'May' ? 'selected' : '' }}>{{ $month }}</option>
@endforeach
</select>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Year</label>
<select class="form-control select2" style="width: 100%;">
@foreach(range(date('Y'), date('Y') - 15) as $year)
<option value="{{ $year }}" {{ $year == 2024 ? 'selected' : '' }}>{{ $year }}</option>
@endforeach
</select>
</div>
</div>
</div>
<!-- Info Boxes Grid -->
<div class="row">
<div class="col-md-6">
<x-adminlte-info-box title="National Registration Bureau" text="53,568,898" icon="fas fa-lg fa-users text-success" />
</div>
<div class="col-md-6">
<x-adminlte-info-box title="Civil Registration Department" text="23,984,343" icon="fas fa-lg fa-certificate text-success"/>
</div>
</div>
<div class="row mt-3">
<div class="col-md-6">
<x-adminlte-info-box title="Department of Immigration" text="17,763,238" icon="fas fa-lg fa-flag text-success" />
</div>
<div class="col-md-6">
<x-adminlte-info-box title="Refugee Affairs Department" text="11,821,317" icon="fas fa-lg fa-life-ring text-success" />
</div>
</div>
<div class="row mt-3">
<div class="col-md-12">
<x-adminlte-info-box title="Registrar General" text="17,763,238" icon="fas fa-lg fa-server text-success" />
</div>
</div>
</x-adminlte-card>
</div>
<div class="mt-4">
<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 = [
'Industry',
'Organization Name',
'Data Type',
'Monthly API Calls',
['label' => 'Actions', 'no-export' => true, 'width' => 5],
];
$data = [
['Telco', 'Safaricom', 'ID + Birth', '45,000'],
['Telco', 'Airtel', 'ID Only', '33,500'],
['FBSI', 'Equity Bank', 'All', '64,200'],
['FBSI', 'NCBA', 'ID + Passport', '22,700'],
['Gov', 'NHIF', 'Birth Only', '17,000'],
];
$config = [
'order' => [[0, 'asc']],
'columns' => [null, null, null, null, null, ['orderable' => false]],
];
@endphp
<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">
<i class="fa fa-lg fa-fw fa-eye"></i>
</button>
</a>
</td>
</tr>
@endforeach
</x-adminlte-datatable>
</div>
</x-adminlte-card>
</div>
<div class="mt-4">
<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="chart">
<canvas id="revenueGrowthChart" height="250"></canvas>
</div>
</x-adminlte-card>
</div>
<!-- SYNC LOGS TABLE --> <!-- SYNC LOGS TABLE -->
<div class="mt-4"> <div class="mt-4">
<x-adminlte-card title="Synchronization Logs" theme="" icon="" collapsible> <x-adminlte-card title="Synchronization Logs" theme="" icon="" collapsible>
...@@ -965,78 +1065,6 @@ ...@@ -965,78 +1065,6 @@
</div> </div>
</x-adminlte-card> </x-adminlte-card>
</div> </div>
<div class="row">
<div class="col-md-6">
<x-adminlte-card title="Error Sources" theme="" icon="" collapsible>
<x-slot name="titleSlot">
<h4 class="card-title">Error Sources</h4>
</x-slot>
<div class="card-body">
<canvas id="errorSourcesChart" height="250"></canvas>
<div class="table-responsive">
<table class="table table-sm">
<thead>
<tr>
<th>Source</th>
<th>Errors</th>
<th>Rate</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mobile App</td>
<td>12</td>
<td><span class="badge bg-warning">0.18%</span></td>
</tr>
<tr>
<td>Partner API</td>
<td>8</td>
<td><span class="badge bg-danger">0.31%</span></td>
</tr>
<!-- More rows -->
</tbody>
</table>
</div>
</div>
</x-adminlte-card>
</div>
<div class="col-md-6">
<x-adminlte-card title="Error Causes" theme="" icon="" collapsible>
<x-slot name="titleSlot">
<h4 class="card-title">Error Causes</h4>
</x-slot>
<div class="card-body">
<canvas id="failureReasonsChart" height="250"></canvas>
<div class="mt-3">
<table class="table table-sm">
<tr>
<td><span class="badge bg-danger">Timeout</span></td>
<td>142</td>
<td>43%</td>
</tr>
<tr>
<td><span class="badge bg-warning">Invalid Data</span></td>
<td>89</td>
<td>27%</td>
</tr>
<tr>
<td><span class="badge bg-secondary">Auth Failed</span></td>
<td>62</td>
<td>19%</td>
</tr>
<tr>
<td><span class="badge bg-info">Other</span></td>
<td>35</td>
<td>11%</td>
</tr>
</table>
</div>
</div>
</x-adminlte-card>
</div>
</div>
</div> </div>
<!-- Right Side --> <!-- Right Side -->
...@@ -1087,6 +1115,55 @@ ...@@ -1087,6 +1115,55 @@
</div> </div>
</x-adminlte-card> </x-adminlte-card>
<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 = [
'Organization',
'Industry',
'Total Requests',
'Success Rate (%)',
['label' => 'Actions', 'no-export' => true, 'width' => 5],
];
$data = [
['Safaricom', 'Telco', '1,203,421', '98.2'],
['Airtel', 'Telco', '834,775', '97.5'],
['Equity Bank', 'FBSI', '1,509,342', '96.9'],
['NCBA', 'FBSI', '675,312', '95.3'],
['NHIF', 'Gov', '321,008', '92.6'],
];
$config = [
'order' => [[3, 'desc']],
'columns' => [null, null, null, null, null, ['orderable' => false]],
];
@endphp
<x-adminlte-datatable id="totalApiRequestsProcessed" :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">
<i class="fa fa-lg fa-fw fa-eye"></i>
</button>
</a>
</td>
</tr>
@endforeach
</x-adminlte-datatable>
</div>
</x-adminlte-card>
<x-adminlte-card title="Sync Performance" theme="" icon="" collapsible> <x-adminlte-card title="Sync Performance" theme="" icon="" collapsible>
<x-slot name="titleSlot"> <x-slot name="titleSlot">
<h4 class="card-title">Sync Performance</h4> <h4 class="card-title">Sync Performance</h4>
...@@ -1386,22 +1463,6 @@ ...@@ -1386,22 +1463,6 @@
} }
}); });
// Error Sources Pie Chart
new Chart(document.getElementById('errorSourcesChart'), {
type: 'doughnut',
data: {
labels: ['Mobile App', 'Partner API', 'Web Portal', 'Internal Systems'],
datasets: [{
data: [12, 8, 5, 3],
backgroundColor: [
'#ffc107',
'#dc3545',
'#17a2b8',
'#6610f2'
]
}]
}
});
// Gauge Charts // Gauge Charts
// CPU Gauge // CPU Gauge
...@@ -1688,31 +1749,6 @@ ...@@ -1688,31 +1749,6 @@
} }
}); });
// Failure Reasons Chart
new Chart(document.getElementById('failureReasonsChart'), {
type: 'doughnut',
data: {
labels: ['Timeout', 'Invalid Data', 'Auth Failed', 'Other'],
datasets: [{
data: [142, 89, 62, 35],
backgroundColor: [
'#dc3545',
'#fd7e14',
'#6c757d',
'#0dcaf0'
]
}]
},
options: {
responsive: true,
plugins: {
legend: {
position: 'bottom'
}
}
}
});
// Response Time Trends Chart // Response Time Trends Chart
new Chart(document.getElementById('responseTimeChart'), { new Chart(document.getElementById('responseTimeChart'), {
type: 'line', type: 'line',
...@@ -2011,6 +2047,120 @@ ...@@ -2011,6 +2047,120 @@
} }
} }
}); });
$(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> </script>
@stop @stop
......
resources/views/home/home2.blade.php
View file @ 501270e7
...@@ -86,18 +86,17 @@ ...@@ -86,18 +86,17 @@
$heads = [ $heads = [
'Industry', 'Industry',
'Organization Name', 'Organization Name',
'API Key',
'Data Type', 'Data Type',
'Monthly API Calls', 'Monthly API Calls',
['label' => 'Actions', 'no-export' => true, 'width' => 5], ['label' => 'Actions', 'no-export' => true, 'width' => 5],
]; ];
$data = [ $data = [
['Telco', 'Safaricom', 'API-1243', 'ID + Birth', '45,000'], ['Telco', 'Safaricom', 'ID + Birth', '45,000'],
['Telco', 'Airtel', 'API-9421', 'ID Only', '33,500'], ['Telco', 'Airtel', 'ID Only', '33,500'],
['FBSI', 'Equity Bank', 'API-5521', 'All', '64,200'], ['FBSI', 'Equity Bank', 'All', '64,200'],
['FBSI', 'NCBA', 'API-6211', 'ID + Passport', '22,700'], ['FBSI', 'NCBA', 'ID + Passport', '22,700'],
['Gov', 'NHIF', 'API-7710', 'Birth Only', '17,000'], ['Gov', 'NHIF', 'Birth Only', '17,000'],
]; ];
$config = [ $config = [
...@@ -146,66 +145,62 @@ ...@@ -146,66 +145,62 @@
</div> </div>
<div class="col-lg-5 d-flex flex-column"> <div class="col-lg-5 d-flex flex-column">
<div> <x-adminlte-card title="Total API Requests Processed" theme="" icon="" collapsible>
<div> <x-slot name="titleSlot">
<x-adminlte-card title="Total API Requests Processed" theme="" icon="" collapsible> <h4 class="card-title">Total API Requests Processed</h4>
<x-slot name="titleSlot"> </x-slot>
<h4 class="card-title">Total API Requests Processed</h4> <div class="">
</x-slot> @php
<div class=""> $heads = [
@php 'Organization',
$heads = [ 'Industry',
'Organization', 'Total Requests',
'Industry', 'Success Rate (%)',
'API Key', ['label' => 'Actions', 'no-export' => true, 'width' => 5],
'Total Requests', ];
'Success Rate (%)',
['label' => 'Actions', 'no-export' => true, 'width' => 5], $data = [
]; ['Safaricom', 'Telco', '1,203,421', '98.2'],
['Airtel', 'Telco', '834,775', '97.5'],
$data = [ ['Equity Bank', 'FBSI', '1,509,342', '96.9'],
['Safaricom', 'Telco', 'API-1243', '1,203,421', '98.2'], ['NCBA', 'FBSI', '675,312', '95.3'],
['Airtel', 'Telco', 'API-9421', '834,775', '97.5'], ['NHIF', 'Gov', '321,008', '92.6'],
['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 = [
]; 'order' => [[3, 'desc']],
'columns' => [null, null, null, null, null, ['orderable' => false]],
$config = [ ];
'order' => [[3, 'desc']], @endphp
'columns' => [null, null, null, null, null, ['orderable' => false]],
]; <x-adminlte-datatable id="totalApiRequestsProcessed" :heads="$heads" :config="$config" bordered hoverable striped>
@endphp @foreach($data as $row)
<tr>
<x-adminlte-datatable id="totalApiRequestsProcessed" :heads="$heads" :config="$config" bordered hoverable striped> @foreach($row as $cell)
@foreach($data as $row) <td>{!! $cell !!}</td>
<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">
<i class="fa fa-lg fa-fw fa-eye"></i>
</button>
</a>
</td>
</tr>
@endforeach @endforeach
</x-adminlte-datatable> <td>
</div> <a href="#">
</x-adminlte-card> <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>
<x-adminlte-card title="Data Sources" theme="" icon="" collapsible> <x-adminlte-card title="Data Sources" theme="" icon="" collapsible>
<x-slot name="titleSlot"> <x-slot name="titleSlot">
<h4 class="card-title">Data Sources</h4> <h4 class="card-title">Data Sources</h4>
</x-slot> </x-slot>
<div class="py-4"> <canvas id="dataSource1" height="250"></canvas>
<canvas id="dataSource1"></canvas> <div class="chart-legend text-center mt-3" id="dataSource1-legend"></div>
</div> </x-adminlte-card>
</x-adminlte-card>
</div>
</div> </div>
</div> </div>
</main> </main>
...@@ -220,30 +215,66 @@ ...@@ -220,30 +215,66 @@
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script> <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script> <script>
let chart1;
$(document).ready(() => { $(document).ready(() => {
chart1 = document.getElementById('dataSource1'); const ctx = document.getElementById('dataSource1');
const data = [41.3, 6.9, 13.8, 20.7, 17.2];
new Chart(chart1, { const labels = ['CRD', 'DOI', 'NRB', 'RAD', 'RG'];
const colors = [
'rgb(255,99,132)',
'rgb(54,162,235)',
'rgb(255,205,86)',
'rgb(16,203,23)',
'rgb(159,8,234)'
];
// Calculate total for percentages
const total = data.reduce((sum, value) => sum + value, 0);
const percentages = data.map(value => ((value / total) * 100).toFixed(1) + '%');
const chart = new Chart(ctx, {
type: 'doughnut', type: 'doughnut',
data: { data: {
labels: ['CRD', 'DOI', 'NRB', 'RAD', 'RG'], labels: labels,
datasets: [{ datasets: [{
label: 'Population Dataset', data: data,
data: [300, 50, 100, 150, 125], backgroundColor: colors,
backgroundColor: [
'rgb(255,99,132)',
'rgb(54,162,235)',
'rgb(255,205,86)',
'rgb(16,203,23)',
'rgb(159,8,234)',
],
hoverOffset: 4 hoverOffset: 4
}] }]
},
options: {
responsive: true,
plugins: {
legend: {
position: 'bottom',
labels: {
generateLabels: function(chart) {
const data = chart.data;
return data.labels.map((label, i) => {
const value = data.datasets[0].data[i];
const percentage = ((value / total) * 100).toFixed(1) + '%';
return {
text: `${label}: ${percentage}`,
fillStyle: data.datasets[0].backgroundColor[i],
hidden: false,
index: i
};
});
}
}
},
tooltip: {
callbacks: {
label: function(context) {
const label = context.label || '';
const value = context.raw || 0;
const percentage = ((value / total) * 100).toFixed(1) + '%';
return `${label}: ${value} (${percentage})`;
}
}
}
}
} }
}); });
}); });
$(document).ready(function() { $(document).ready(function() {
......
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