Skip to content

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

Admin dashboard 90%

parent 3ad67b88
Hide whitespace changes
Inline Side-by-side
Showing with 979 additions and 454 deletions
resources/views/home/dashboard.blade.php
View file @ e73e85ad
......@@ -193,29 +193,121 @@
</div>
</div>
<!-- User Activity & Access Logs -->
<div class="row mt-4">
<div class="col-md-4">
<x-adminlte-info-box
title="Active Users (24h)"
text="142"
icon="fas fa-users fa-2x"
theme="gradient-teal"
progress-value="15"
progress-description="↑15% from yesterday"/>
</div>
<div class="col-md-4">
<x-adminlte-info-box
title="Failed Logins (24h)"
text="28"
icon="fas fa-user-lock fa-2x"
theme="gradient-orange"
progress-value="8"
progress-description="↓3 from yesterday"/>
</div>
<div class="col-md-4">
<x-adminlte-info-box
title="Avg Session Duration"
text="24m 18s"
icon="fas fa-clock fa-2x"
theme="gradient-info"
progress-value="12"
progress-description="↑12% from last week"/>
</div>
</div>
<div class="d-flex flex-column flex-lg-row">
<div class="col-lg-8">
<div>
<div class="d-flex flex-column flex-sm-row justify-content-between">
<x-adminlte-info-box title="National Registration Bureau" text="53,568,898" icon="fas fa-lg fa-users text-success" class="mr-3"/>
<x-adminlte-info-box title="Civil Registration Department" text="23,984,343" icon="fas fa-lg fa-certificate text-success"/>
</div>
<!-- Data Quality & Maintenance -->
<div class="row mt-4">
<div class="col-md-4">
<x-adminlte-info-box
title="Duplicate Records"
text="1,842"
icon="fas fa-copy fa-2x"
theme="gradient-orange"
progress-value="3.2"
progress-description="0.32% of total records">
<div class="text-xs text-muted">NRB: 892 | CRS: 612 | DOI: 338</div>
</x-adminlte-info-box>
</div>
<div class="col-md-4">
<x-adminlte-info-box
title="Unverified Records"
text="247"
icon="fas fa-question-circle fa-2x"
theme="gradient-indigo"
progress-value="15"
progress-description="15% overdue"/>
</div>
<div class="col-md-4">
<x-adminlte-info-box
title="Sync Success Rate"
text="98.7%"
icon="fas fa-sync-alt fa-2x"
theme="gradient-teal"
progress-value="98.7"
progress-description="↑1.2% from last week"/>
</div>
</div>
<div class="d-flex flex-column flex-sm-row justify-content-between">
<x-adminlte-info-box title="Department of Immigration" text="17,763,238" icon="fas fa-lg fa-flag text-success" class="mr-3"/>
<x-adminlte-info-box title="Refugee Affairs Department" text="11,821,317" icon="fas fa-lg fa-life-ring text-success"/>
</div>
<!-- Performance Monitoring -->
<div class="row mt-4">
<div class="col-md-4">
<x-adminlte-info-box
title="Avg Query Time"
text="142ms"
icon="fas fa-database fa-2x"
theme="gradient-indigo"
progress-value="85"
progress-description="Slowest: 2.4s"
id="queryTimeWidget">
</x-adminlte-info-box>
</div>
<div class="col-md-4">
<x-adminlte-info-box
title="Storage Used"
text="2.4TB/5TB"
icon="fas fa-hdd fa-2x"
theme="gradient-teal"
progress-value="48"
progress-description="48% utilized"
id="storageWidget">
</x-adminlte-info-box>
</div>
<div class="col-md-4">
<x-adminlte-info-box
title="Network Traffic"
text="42GB"
icon="fas fa-network-wired fa-2x"
theme="gradient-primary"
progress-value="72"
progress-description="72% external"
id="trafficWidget">
</x-adminlte-info-box>
</div>
</div>
<div class="d-flex flex-column flex-sm-row justify-content-between">
<x-adminlte-info-box title="Registrar General" text="17,763,238" icon="fas fa-lg fa-server text-success" class=""/>
{{-- <x-adminlte-info-box style="opacity: 0;" />--}}
</div>
</div>
<!-- New Widgets -->
<div class="d-flex flex-column flex-lg-row mt-4">
<!-- Left Side -->
<div class="col-lg-8">
<!-- System Performance and Health -->
<div class="row mt-4">
<div class="row">
<div class="col-md-6">
<x-adminlte-card title="System Load & Capacity" theme="" icon="" collapsible>
<x-slot name="titleSlot">
......@@ -275,37 +367,76 @@
</table>
</x-adminlte-card>
</div>
</div>
<div class="col-md-12 mt-4">
<x-adminlte-card title="API Request Volume (Last 7 Days)" theme="" icon="" collapsible>
<x-slot name="titleSlot">
<h4 class="card-title">API Request Volume (Last 7 Days)</h4>
</x-slot>
<div class="d-flex justify-content-end mb-3">
<div class="btn-group">
<button class="btn btn-sm btn-outline-secondary">24h</button>
<button class="btn btn-sm btn-secondary">7d</button>
<button class="btn btn-sm btn-outline-secondary">30d</button>
<div class="col-md-6 mt-4">
<x-adminlte-card title="Database Query Performance" theme="" icon="" collapsible>
<x-slot name="titleSlot">
<h4 class="card-title">Database Query Performance</h4>
</x-slot>
<div class="float-right mb-3">
<button class="btn btn-sm btn-outline-primary" id="refreshQueries">
<i class="fas fa-sync-alt"></i> Refresh
</button>
</div>
</div>
<div class="card-body">
<div class="position-relative mb-4">
<canvas id="apiVolumeChart" height="300"></canvas>
<div class="chart-container" style="position: relative; height: 300px;">
<canvas id="queryPerformanceChart"></canvas>
</div>
<div class="d-flex flex-row justify-content-between">
<span class="mr-2">
<i class="fas fa-square text-primary"></i> External
</span>
<span class="mr-2">
<i class="fas fa-square text-teal"></i> Internal
</span>
<span>
<i class="fas fa-square text-gray"></i> Failed
</span>
<div class="mt-3 table-responsive">
<table class="table table-sm table-hover" id="slowQueriesTable">
<thead>
<tr>
<th>Query</th>
<th>Avg Time</th>
<th>Calls</th>
</tr>
</thead>
<tbody>
<tr>
<td>SELECT * FROM users WHERE...</td>
<td>420ms</td>
<td>1,842</td>
</tr>
</tbody>
</table>
</div>
</div>
</x-adminlte-card>
</x-adminlte-card>
</div>
<div class="col-md-6 mt-4">
<x-adminlte-card title="Storage Utilization" theme="" icon="" collapsible>
<x-slot name="titleSlot">
<h4 class="card-title">Storage Utilization</h4>
</x-slot>
<div class="row">
<div class="col-md-6">
<div class="chart-container" style="position: relative; height: 200px;">
<canvas id="storageChart"></canvas>
</div>
</div>
<div class="col-md-6">
<div class="chart-container" style="position: relative; height: 200px;">
<canvas id="storageTrendChart"></canvas>
</div>
</div>
</div>
<div class="mt-3">
<table class="table table-sm">
<tr>
<td>Database</td>
<td>1.2TB</td>
<td><div class="progress progress-xs"><div class="progress-bar bg-primary" style="width: 60%"></div></div></td>
</tr>
<tr>
<td>Backups</td>
<td>0.8TB</td>
<td><div class="progress progress-xs"><div class="progress-bar bg-success" style="width: 40%"></div></div></td>
</tr>
<!-- More rows -->
</table>
</div>
</x-adminlte-card>
</div>
</div>
<!-- SYNC LOGS TABLE -->
......@@ -566,49 +697,146 @@
</div>
<!-- API & System Usage -->
<!-- User Activity & Access Logs -->
<div class="mt-4">
<x-adminlte-card title="Response Time Trends" theme="" icon="" collapsible>
<x-adminlte-card title="Failed Login Attempts" theme="" icon="" collapsible>
<x-slot name="titleSlot">
<h4 class="card-title">Response Time Trends</h4>
<h4 class="card-title">Failed Login Attempts</h4>
</x-slot>
<div class="">
<div class="btn-group">
<button class="btn btn-sm btn-outline-secondary">Hourly</button>
<button class="btn btn-sm btn-secondary">Daily</button>
<button class="btn btn-sm btn-outline-secondary">Weekly</button>
<div class="input-group input-group-sm" style="width: 250px;">
<input type="text" class="form-control" placeholder="Search...">
<div class="input-group-append">
<button class="btn btn-primary">
<i class="fas fa-search"></i>
</button>
</div>
</div>
</div>
<div class="card-body">
<div class="chart">
<canvas id="responseTimeChart" height="300"></canvas>
<div class="card-body p-0">
<div class="table-responsive">
<table class="table table-hover table-striped">
<thead>
<tr>
<th>Timestamp</th>
<th>Username</th>
<th>IP Address</th>
<th>Location</th>
<th>Device</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr class="bg-danger-light">
<td>2023-11-20 14:32:18</td>
<td>admin</td>
<td>192.168.1.45</td>
<td>Nairobi, KE</td>
<td>Chrome (Windows)</td>
<td>
<button class="btn btn-xs btn-danger">Block IP</button>
<button class="btn btn-xs btn-info">Details</button>
</td>
</tr>
<tr>
<td>2023-11-20 14:30:05</td>
<td>jane.smith</td>
<td>41.90.12.34</td>
<td>Mombasa, KE</td>
<td>Firefox (Linux)</td>
<td>
<button class="btn btn-xs btn-warning">Notify User</button>
</td>
</tr>
<!-- More rows -->
</tbody>
</table>
</div>
<div class="d-flex flex-row justify-content-between mt-2">
<span class="mr-2">
<i class="fas fa-circle text-primary"></i> Verification
</span>
<span class="mr-2">
<i class="fas fa-circle text-success"></i> Search
</span>
<span class="mr-2">
<i class="fas fa-circle text-info"></i> Bulk
</span>
<span>
<i class="fas fa-circle text-warning"></i> Admin
</span>
</div>
<div class="card-footer clearfix">
<div class="float-right">
<button class="btn btn-sm btn-outline-primary mr-2">
<i class="fas fa-sync-alt"></i> Refresh
</button>
<button class="btn btn-sm btn-primary">
<i class="fas fa-download"></i> Export
</button>
</div>
</div>
</x-adminlte-card>
</div>
<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>
<!-- Data Quality & Maintenance -->
<div class="mt-4">
<x-adminlte-card title="Unverified Records Pending Review" theme="" icon="" collapsible>
<x-slot name="titleSlot">
<h4 class="card-title">Unverified Records Pending Review</h4>
</x-slot>
<div class="float-right mb-3">
<div class="input-group input-group-sm" style="width: 200px;">
<select class="form-control">
<option>All Sources</option>
<option>NRB</option>
<option>CRS</option>
<option>DOI</option>
</select>
</div>
</div>
<div class="card-body p-0">
<div class="table-responsive">
<table class="table table-hover">
<thead>
<tr>
<th>Record ID</th>
<th>Source</th>
<th>Days Pending</th>
<th>Priority</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr class="bg-danger-light">
<td>NRB-2023-8472</td>
<td><span class="badge bg-primary">NRB</span></td>
<td>12</td>
<td><span class="badge bg-danger">High</span></td>
<td>
<button class="btn btn-xs btn-info">Review</button>
<button class="btn btn-xs btn-success">Verify</button>
</td>
</tr>
<tr>
<td>CRS-2023-3381</td>
<td><span class="badge bg-teal">CRS</span></td>
<td>5</td>
<td><span class="badge bg-warning">Medium</span></td>
<td>
<button class="btn btn-xs btn-info">Review</button>
</td>
</tr>
<!-- More rows -->
</tbody>
</table>
</div>
</div>
<div class="card-footer clearfix">
<div class="float-right">
<button class="btn btn-sm btn-outline-primary mr-2">
<i class="fas fa-sync-alt"></i> Refresh
</button>
<button class="btn btn-sm btn-primary">
<i class="fas fa-download"></i> Export
</button>
</div>
</div>
</x-adminlte-card>
</div>
<div class="mt-4">
<x-adminlte-card title="Number of Requests by Organization" theme="" icon="" collapsible>
<x-slot name="titleSlot">
<h4 class="card-title">Number of Requests by Organization</h4>
</x-slot>
<div class="">
@php
$heads = [
......@@ -650,325 +878,459 @@
@endforeach
</x-adminlte-datatable>
</div>
</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"/>
</x-adminlte-card>
</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>
<!-- Performance Monitoring -->
<div class="mt-4">
<x-adminlte-card title="Network Traffic Analysis" theme="" icon="" collapsible>
<x-slot name="titleSlot">
<h4 class="card-title">Network Traffic Analysis</h4>
</x-slot>
<div class="card-tools">
<div class="btn-group">
<button class="btn btn-sm btn-outline-secondary active">24h</button>
<button class="btn btn-sm btn-outline-secondary">7d</button>
<button class="btn btn-sm btn-outline-secondary">30d</button>
</div>
</div>
<div class="">
<div class="card">
<div class="m-2">
<span class="h5">Input Traffic</span>
<div class="chart-container" style="position: relative; height: 300px;">
<canvas id="networkTrafficChart"></canvas>
</div>
<div class="row mt-3">
<div class="col-md-4">
<div class="info-box bg-light">
<span class="info-box-icon bg-primary"><i class="fas fa-server"></i></span>
<div class="info-box-content">
<span class="info-box-text">Internal Traffic</span>
<span class="info-box-number">12GB</span>
</div>
</div>
</div>
<div class="px-2 py-4">
<canvas id="dataInput"></canvas>
<div class="col-md-4">
<div class="info-box bg-light">
<span class="info-box-icon bg-danger"><i class="fas fa-globe"></i></span>
<div class="info-box-content">
<span class="info-box-text">External Traffic</span>
<span class="info-box-number">30GB</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4 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 class="col-md-4">
<div class="info-box bg-light">
<span class="info-box-icon bg-warning"><i class="fas fa-shield-alt"></i></span>
<div class="info-box-content">
<span class="info-box-text">Blocked Requests</span>
<span class="info-box-number">1.2GB</span>
</div>
</div>
</div>
</div>
<div class="">
@php
$heads = [
'ID',
'Client',
['label' => 'Actions', 'no-export' => true, 'width' => 5],
];
$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]],
];
@endphp
<x-adminlte-datatable id="onboardingDrafts" bordered :heads="$heads" hoverable striped>
@foreach($config['data'] as $row)
<tr>
<td>{{ $row->id }}</td>
<td>{{ $row->client->name_fl ?? '-' }}</td>
<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>
</td>
</tr>
@endforeach
</x-adminlte-datatable>
</div>
</div>
</div>
</x-adminlte-card>
</div>
<x-adminlte-card title="Error Sources" theme="" icon="" collapsible>
<!-- API & System Usage -->
<div class="mt-4">
<x-adminlte-card title="Response Time Trends" theme="" icon="" collapsible>
<x-slot name="titleSlot">
<h4 class="card-title">Error Sources</h4>
<h4 class="card-title">Response Time Trends</h4>
</x-slot>
<div class="">
<div class="btn-group">
<button class="btn btn-sm btn-outline-secondary">Hourly</button>
<button class="btn btn-sm btn-secondary">Daily</button>
<button class="btn btn-sm btn-outline-secondary">Weekly</button>
</div>
</div>
<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 class="chart">
<canvas id="responseTimeChart"></canvas>
</div>
<div class="d-flex flex-row justify-content-between mt-2">
<span class="mr-2">
<i class="fas fa-circle text-primary"></i> Verification
</span>
<span class="mr-2">
<i class="fas fa-circle text-success"></i> Search
</span>
<span class="mr-2">
<i class="fas fa-circle text-info"></i> Bulk
</span>
<span>
<i class="fas fa-circle text-warning"></i> Admin
</span>
</div>
</div>
</x-adminlte-card>
</div>
<!-- QUEUE VISUALIZATION -->
<x-adminlte-card title="Sync Queue Status" theme="" icon="" collapsible>
<div class="mt-4">
<x-adminlte-card title="API Request Volume (Last 7 Days)" theme="" icon="" collapsible>
<x-slot name="titleSlot">
<h4 class="card-title">Sync Queue Status</h4>
<h4 class="card-title">API Request Volume (Last 7 Days)</h4>
</x-slot>
<div>
<div class="d-flex justify-content-end mb-3">
<div class="btn-group">
<button class="btn btn-sm btn-outline-secondary">24h</button>
<button class="btn btn-sm btn-secondary">7d</button>
<button class="btn btn-sm btn-outline-secondary">30d</button>
</div>
</div>
<div class="card-body">
<div class="position-relative mb-4">
<canvas id="queueStatusChart" height="250"></canvas>
<canvas id="apiVolumeChart"></canvas>
</div>
<div class="d-flex justify-content-around text-center">
<div>
<div class="text-lg">1,842</div>
<div class="text-muted">Queued</div>
</div>
<div>
<div class="text-lg">4,218</div>
<div class="text-muted">Processed (24h)</div>
</div>
<div>
<div class="text-lg">18</div>
<div class="text-muted">Failed</div>
</div>
<div class="d-flex flex-row justify-content-between">
<span class="mr-2">
<i class="fas fa-square text-primary"></i> External
</span>
<span class="mr-2">
<i class="fas fa-square text-teal"></i> Internal
</span>
<span>
<i class="fas fa-square text-gray"></i> Failed
</span>
</div>
</div>
</x-adminlte-card>
</div>
<x-adminlte-card title="Sync Performance" theme="" icon="" collapsible>
<x-slot name="titleSlot">
<h4 class="card-title">Sync Performance</h4>
</x-slot>
<div>
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#tab-nrb">NRB</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#tab-crs">CRS</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#tab-doi">DOI</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab-nrb">
<div class="chart">
<canvas id="nrbPerformanceChart" height="200"></canvas>
</div>
<div class="mt-3">
<span class="badge bg-primary">Avg: 32s</span>
<span class="badge bg-success">Success: 99.2%</span>
<span class="badge bg-info">Throughput: 42 rec/s</span>
</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>
<!-- Other tabs -->
</div>
</div>
</x-adminlte-card>
</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>
<!-- Right Side -->
<div class="col-lg-4 d-flex flex-column">
<x-adminlte-card title="Client Onboarding Drafts" theme="" icon="" collapsible>
<x-slot name="titleSlot">
<h4 class="card-title">Client Onboarding Drafts</h4>
</x-slot>
<div class="">
@php
$heads = [
'ID',
'Client',
['label' => 'Actions', 'no-export' => true, 'width' => 5],
];
$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]],
];
@endphp
<x-adminlte-datatable id="onboardingDrafts" bordered :heads="$heads" hoverable striped>
@foreach($config['data'] as $row)
<tr>
<td>{{ $row->id }}</td>
<td>{{ $row->client->name_fl ?? '-' }}</td>
<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>
</td>
</tr>
@endforeach
</x-adminlte-datatable>
</div>
</x-adminlte-card>
<!-- Data Integrity & Verification Trends -->
<x-adminlte-card title="Verification Success Rate Trend" theme="" icon="" collapsible>
<x-slot name="titleSlot">
<h4 class="card-title">Verification Success Rate Trend</h4>
</x-slot>
<div class="float-right mb-3">
<div class="btn-group">
<button class="btn btn-sm btn-outline-secondary active">30d</button>
<button class="btn btn-sm btn-outline-secondary">90d</button>
<button class="btn btn-sm btn-outline-secondary">1y</button>
<x-adminlte-card title="Sync Performance" theme="" icon="" collapsible>
<x-slot name="titleSlot">
<h4 class="card-title">Sync Performance</h4>
</x-slot>
<div>
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#tab-nrb">NRB</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#tab-crs">CRS</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#tab-doi">DOI</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab-nrb">
<div class="chart">
<canvas id="nrbPerformanceChart" height="200"></canvas>
</div>
<div class="mt-3">
<span class="badge bg-primary">Avg: 32s</span>
<span class="badge bg-success">Success: 99.2%</span>
<span class="badge bg-info">Throughput: 42 rec/s</span>
</div>
</div>
<!-- Other tabs -->
</div>
<div class="chart">
<canvas id="verificationTrendChart" height="250"></canvas>
</div>
</x-adminlte-card>
</div>
</x-adminlte-card>
<x-adminlte-card title="Duplicate Records by Source" theme="" icon="" collapsible>
<x-slot name="titleSlot">
<h4 class="card-title">Duplicate Records by Source</h4>
</x-slot>
<div class="card-body">
<div class="chart">
<canvas id="duplicatesChart" height="250"></canvas>
<!-- Data Integrity & Verification Trends -->
<x-adminlte-card title="Verification Success Rate Trend" theme="" icon="" collapsible>
<x-slot name="titleSlot">
<h4 class="card-title">Verification Success Rate Trend</h4>
</x-slot>
<div class="float-right mb-3">
<div class="btn-group">
<button class="btn btn-sm btn-outline-secondary active">30d</button>
<button class="btn btn-sm btn-outline-secondary">90d</button>
<button class="btn btn-sm btn-outline-secondary">1y</button>
</div>
</div>
<div class="chart">
<canvas id="verificationTrendChart" height="250"></canvas>
</div>
</x-adminlte-card>
<x-adminlte-card title="Duplicate Records by Source" theme="" icon="" collapsible>
<x-slot name="titleSlot">
<h4 class="card-title">Duplicate Records by Source</h4>
</x-slot>
<div class="card-body">
<div class="chart">
<canvas id="duplicatesChart" height="250"></canvas>
</div>
<div class="mt-3 d-flex justify-content-around text-center">
<div>
<span class="badge bg-primary">NRB: 48%</span>
</div>
<div class="mt-3 d-flex justify-content-around text-center">
<div>
<span class="badge bg-primary">NRB: 48%</span>
</div>
<div>
<span class="badge bg-teal">CRS: 33%</span>
</div>
<div>
<span class="badge bg-purple">DOI: 19%</span>
</div>
<div>
<span class="badge bg-teal">CRS: 33%</span>
</div>
<div>
<span class="badge bg-purple">DOI: 19%</span>
</div>
</div>
</x-adminlte-card>
</div>
</x-adminlte-card>
<x-adminlte-card title="Duplicate Trend (Last 30 Days)" theme="" icon="" collapsible>
<x-slot name="titleSlot">
<h4 class="card-title">Duplicate Trend (Last 30 Days)</h4>
</x-slot>
<div class="chart">
<canvas id="duplicatesTrendChart" height="250"></canvas>
</div>
</x-adminlte-card>
<!-- External Organizations & Data Consumers -->
<x-adminlte-card title="Top Requesting Organizations (Last 30 Days)" theme="" icon="" collapsible>
<x-slot name="titleSlot">
<h4 class="card-title">Top Requesting Organizations (Last 30 Days)</h4>
</x-slot>
<div class="float-right">
<button class="btn btn-sm btn-outline-primary">View All</button>
<!-- External Organizations & Data Consumers -->
<x-adminlte-card title="Top Requesting Organizations (Last 30 Days)" theme="" icon="" collapsible>
<x-slot name="titleSlot">
<h4 class="card-title">Top Requesting Organizations (Last 30 Days)</h4>
</x-slot>
<div class="float-right">
<button class="btn btn-sm btn-outline-primary">View All</button>
</div>
<div class="chart">
<canvas id="topOrganizationsChart" height="300"></canvas>
</div>
</x-adminlte-card>
<!-- API & System Usage -->
<x-adminlte-card title="API Requests by Source (Last 7 Days)" theme="" icon="" collapsible>
<x-slot name="titleSlot">
<h4 class="card-title">API Requests by Source (Last 7 Days)</h4>
</x-slot>
<div class="float-right mb-3">
<div class="btn-group">
<button class="btn btn-sm btn-outline-secondary">24h</button>
<button class="btn btn-sm btn-secondary">7d</button>
<button class="btn btn-sm btn-outline-secondary">30d</button>
</div>
</div>
<div>
<div class="chart">
<canvas id="topOrganizationsChart" height="300"></canvas>
<canvas id="apiRequestsChart" height="300"></canvas>
</div>
</x-adminlte-card>
<x-adminlte-card title="Usage Distribution" theme="" icon="" collapsible>
<x-slot name="titleSlot">
<h4 class="card-title">Usage Distribution</h4>
</x-slot>
<div>
<canvas id="usagePieChart" height="250"></canvas>
<div class="mt-3 text-center">
<span class="badge bg-primary mr-2">Financial: 42%</span>
<span class="badge bg-success mr-2">Government: 31%</span>
<span class="badge bg-info">Commercial: 27%</span>
</div>
<div class="d-flex flex-row justify-content-between mt-2">
<span class="mr-2">
<i class="fas fa-square text-primary"></i> Financial
</span>
<span class="mr-2">
<i class="fas fa-square text-success"></i> Government
</span>
<span class="mr-2">
<i class="fas fa-square text-info"></i> Telecom
</span>
<span>
<i class="fas fa-square text-warning"></i> Other
</span>
</div>
</x-adminlte-card>
</div>
</x-adminlte-card>
<!-- User Activity & Access Logs -->
<x-adminlte-card title="Most Active Users (Last 7 Days)" theme="" icon="" collapsible>
<x-slot name="titleSlot">
<h4 class="card-title">Most Active Users (Last 7 Days)</h4>
</x-slot>
<div class="float-right">
<button class="btn btn-sm btn-outline-primary">View All</button>
</div>
<div class="card-body">
<div class="chart">
<canvas id="activeUsersChart" height="250"></canvas>
</div>
<div class="mt-3">
<table class="table table-sm">
<tr>
<td>1.</td>
<td>John Doe</td>
<td>Admin</td>
<td>142 sessions</td>
</tr>
<tr>
<td>2.</td>
<td>Jane Smith</td>
<td>Data Analyst</td>
<td>128 sessions</td>
</tr>
<!-- More rows -->
</table>
</div>
</div>
</x-adminlte-card>
<x-adminlte-card title="User Activity Heatmap" theme="" icon="" collapsible>
<x-slot name="titleSlot">
<h4 class="card-title">User Activity Heatmap</h4>
</x-slot>
<canvas id="activityHeatmap" height="250"></canvas>
<div class="mt-2 text-center">
<span class="badge bg-success mr-2">Low</span>
<span class="badge bg-warning mr-2">Medium</span>
<span class="badge bg-danger">High</span>
</div>
</x-adminlte-card>
<!-- API & System Usage -->
<x-adminlte-card title="API Requests by Source (Last 7 Days)" theme="" icon="" collapsible>
<x-slot name="titleSlot">
<h4 class="card-title">API Requests by Source (Last 7 Days)</h4>
</x-slot>
<div class="float-right mb-3">
<div class="btn-group">
<button class="btn btn-sm btn-outline-secondary">24h</button>
<button class="btn btn-sm btn-secondary">7d</button>
<button class="btn btn-sm btn-outline-secondary">30d</button>
</div>
<x-adminlte-card title="Sync Queue Status" theme="" icon="" collapsible>
<x-slot name="titleSlot">
<h4 class="card-title">Sync Queue Status</h4>
</x-slot>
<div>
<div class="position-relative mb-4">
<canvas id="queueStatusChart" height="250"></canvas>
</div>
<div>
<div class="chart">
<canvas id="apiRequestsChart" height="300"></canvas>
<div class="d-flex justify-content-around text-center">
<div>
<div class="text-lg">1,842</div>
<div class="text-muted">Queued</div>
</div>
<div class="d-flex flex-row justify-content-between mt-2">
<span class="mr-2">
<i class="fas fa-square text-primary"></i> Financial
</span>
<span class="mr-2">
<i class="fas fa-square text-success"></i> Government
</span>
<span class="mr-2">
<i class="fas fa-square text-info"></i> Telecom
</span>
<span>
<i class="fas fa-square text-warning"></i> Other
</span>
<div>
<div class="text-lg">4,218</div>
<div class="text-muted">Processed (24h)</div>
</div>
</div>
</x-adminlte-card>
<x-adminlte-card title="Failure Reasons" theme="" icon="" collapsible>
<x-slot name="titleSlot">
<h4 class="card-title">Failure Reasons</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 class="text-lg">18</div>
<div class="text-muted">Failed</div>
</div>
</div>
</x-adminlte-card>
</div>
</x-adminlte-card>
<div class="card">
<div class="m-2">
<span class="h5">Data Source</span>
</div>
<div class="py-4">
<canvas id="dataSource1"></canvas>
<x-adminlte-card title="Usage Distribution" theme="" icon="" collapsible>
<x-slot name="titleSlot">
<h4 class="card-title">Usage Distribution</h4>
</x-slot>
<div>
<canvas id="usagePieChart" height="250"></canvas>
<div class="mt-3 text-center">
<span class="badge bg-primary mr-2">Financial: 42%</span>
<span class="badge bg-success mr-2">Government: 31%</span>
<span class="badge bg-info">Commercial: 27%</span>
</div>
</div>
</div>
</x-adminlte-card>
</div>
</div>
</main>
......@@ -1009,6 +1371,16 @@
.table-sm td {
padding: 0.3rem;
}
.info-box {
cursor: pointer;
transition: all 0.3s ease;
}
.info-box:hover {
transform: translateY(-3px);
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
</style>
@stop
......@@ -1016,116 +1388,6 @@
<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',
data: {
labels: ['CRD', 'DOI', 'NRB', 'RAD', 'RG'],
datasets: [{
label: 'Population Dataset',
data: [300, 50, 100, 150, 125],
backgroundColor: [
'rgb(255,99,132)',
'rgb(54,162,235)',
'rgb(255,205,86)',
'rgb(16,203,23)',
'rgb(159,8,234)',
],
hoverOffset: 4
}]
}
});
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
},
]
}
});
});
// API Volume Chart (would use real data)
new Chart(document.getElementById('apiVolumeChart'), {
......@@ -1517,6 +1779,269 @@
}
}
});
// Active Users Chart
new Chart(document.getElementById('activeUsersChart'), {
type: 'bar',
data: {
labels: ['John Doe', 'Jane Smith', 'Mike Johnson', 'Sarah Williams', 'David Brown'],
datasets: [{
label: 'Active Sessions',
data: [142, 128, 98, 87, 76],
backgroundColor: 'rgba(58, 115, 240, 0.7)',
borderColor: 'rgba(58, 115, 240, 1)',
borderWidth: 1
}]
},
options: {
responsive: true,
scales: {
y: {
beginAtZero: true
}
}
}
});
// Activity Heatmap
// Register the matrix controller
new Chart(document.getElementById('activityHeatmap'), {
type: 'bar',
data: {
labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
datasets: [
{
label: '08:00',
data: [20, 15, 18, 22, 17, 5, 3],
backgroundColor: '#28a745' // Green
},
{
label: '10:00',
data: [35, 40, 32, 38, 42, 12, 8],
backgroundColor: '#ffc107' // Yellow
},
{
label: '12:00',
data: [45, 50, 48, 52, 55, 25, 15],
backgroundColor: '#fd7e14' // Orange
},
{
label: '14:00',
data: [30, 35, 32, 38, 40, 18, 10],
backgroundColor: '#ffc107' // Yellow
},
{
label: '16:00',
data: [32, 38, 35, 40, 42, 20, 12],
backgroundColor: '#fd7e14' // Orange
},
{
label: '18:00',
data: [15, 20, 18, 22, 25, 10, 5],
backgroundColor: '#28a745' // Green
}
]
},
options: {
responsive: true,
scales: {
x: {
stacked: true,
grid: {
display: false
}
},
y: {
stacked: true,
grid: {
display: false
}
}
},
plugins: {
legend: {
position: 'bottom',
labels: {
boxWidth: 12
}
},
tooltip: {
callbacks: {
label: function(context) {
return context.dataset.label + ': ' + context.raw + ' sessions';
}
}
}
}
}
});
// Duplicates Trend Chart
new Chart(document.getElementById('duplicatesTrendChart'), {
type: 'line',
data: {
labels: Array.from({length: 30}, (_, i) => i+1 + ' Nov'),
datasets: [
{
label: 'NRB',
data: [45, 42, 48, 50, 52, 55, 53, 50, 48, 45, 42, 40, 38, 35, 32, 30, 28, 25, 22, 20, 18, 15, 12, 10, 8, 5, 3, 2, 1, 0],
borderColor: '#0d6efd',
backgroundColor: 'rgba(13, 110, 253, 0.1)',
tension: 0.3
},
{
label: 'CRS',
data: [30, 28, 32, 35, 38, 40, 42, 45, 48, 50, 52, 55, 53, 50, 48, 45, 42, 40, 38, 35, 32, 30, 28, 25, 22, 20, 18, 15, 12, 10],
borderColor: '#20c997',
backgroundColor: 'rgba(32, 201, 151, 0.1)',
tension: 0.3
},
{
label: 'DOI',
data: [20, 18, 22, 25, 28, 30, 32, 35, 38, 40, 42, 45, 48, 50, 52, 55, 53, 50, 48, 45, 42, 40, 38, 35, 32, 30, 28, 25, 22, 20],
borderColor: '#6f42c1',
backgroundColor: 'rgba(111, 66, 193, 0.1)',
tension: 0.3
}
]
},
options: {
responsive: true,
interaction: {
mode: 'index',
intersect: false,
},
scales: {
y: {
beginAtZero: true,
title: {
display: true,
text: 'Duplicate Records'
}
}
}
}
});
// Query Performance Chart
new Chart(document.getElementById('queryPerformanceChart'), {
type: 'bar',
data: {
labels: ['User Auth', 'Data Search', 'Reports', 'API Calls', 'Admin'],
datasets: [{
label: 'Query Time (ms)',
data: [142, 210, 320, 185, 95],
backgroundColor: [
'rgba(75, 192, 192, 0.7)',
'rgba(255, 159, 64, 0.7)',
'rgba(255, 99, 132, 0.7)',
'rgba(54, 162, 235, 0.7)',
'rgba(153, 102, 255, 0.7)'
],
borderWidth: 1
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
y: {
beginAtZero: true,
title: {
display: true,
text: 'Milliseconds'
}
}
}
}
});
// Storage Utilization
new Chart(document.getElementById('storageChart'), {
type: 'doughnut',
data: {
labels: ['Used', 'Free'],
datasets: [{
data: [48, 52],
backgroundColor: ['#20c997', '#f8f9fa'],
borderWidth: 1
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
cutout: '70%'
}
});
// Storage Trend
new Chart(document.getElementById('storageTrendChart'), {
type: 'line',
data: {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
datasets: [{
label: 'Storage Used (TB)',
data: [1.2, 1.4, 1.6, 1.8, 2.0, 2.2],
borderColor: '#20c997',
backgroundColor: 'rgba(32, 201, 151, 0.1)',
fill: true,
tension: 0.3
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
y: {
beginAtZero: true
}
}
}
});
// Network Traffic
new Chart(document.getElementById('networkTrafficChart'), {
type: 'line',
data: {
labels: Array.from({length: 24}, (_, i) => i + ':00'),
datasets: [
{
label: 'Internal',
data: [10,12,15,18,20,25,30,35,40,45,50,55,60,55,50,45,40,35,30,25,20,15,10,8],
borderColor: '#0d6efd',
backgroundColor: 'rgba(13, 110, 253, 0.1)',
tension: 0.3,
fill: true
},
{
label: 'External',
data: [20,25,30,35,40,50,60,70,80,90,100,110,120,110,100,90,80,70,60,50,40,30,20,15],
borderColor: '#dc3545',
backgroundColor: 'rgba(220, 53, 69, 0.1)',
tension: 0.3,
fill: true
}
]
},
options: {
responsive: true,
maintainAspectRatio: false,
interaction: {
mode: 'index',
intersect: false
},
scales: {
y: {
beginAtZero: true,
title: {
display: true,
text: 'Traffic (GB)'
}
}
}
}
});
</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