Skip to content

I
IPRSv2
Commit c67324cd authored by Michael Ngei's avatar Michael Ngei
Browse files
Options

Merge branch 'iprsv2_brian' into 'master' 

Management and Admin Dashboards

See merge request !27
parents 4410c5aa b4bd070a
Show whitespace changes
Inline Side-by-side
Showing with 2423 additions and 204 deletions
app/Http/Controllers/Home2Controller.php 0 → 100644
View file @ c67324cd
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class Home2Controller extends Controller
{
/**
* Create a new controller instance.
*
* @return void
*/
public function __construct()
{
$this->middleware(['auth', 'check.user_status']);
}
/**
* Show the application Director dashboard.
*
* @return \Illuminate\Contracts\Support\Renderable
*/
public function index()
{
return view('home.home2');
}
}
config/adminlte.php
View file @ c67324cd
...@@ -380,7 +380,14 @@ return [ ...@@ -380,7 +380,14 @@ return [
'text' => 'Home', 'text' => 'Home',
'url' => 'home', 'url' => 'home',
'icon' => 'fas fa-home', 'icon' => 'fas fa-home',
'can' => 'isClient' 'can' => 'isClient',
],
[
'text' => 'Home 2 (Management)',
'url' => 'director',
'icon' => 'fas fa-home',
'can' => 'isClient',
], ],
[ [
......
resources/views/home/dashboard.blade.php
View file @ c67324cd
...@@ -22,31 +22,790 @@ ...@@ -22,31 +22,790 @@
</div> </div>
</div> </div>
<div class="d-flex flex-column flex-lg-row"> <!-- TOP ROW: SYSTEM HEALTH WIDGETS -->
<div class="row mt-4">
<div class="col-md-2">
<x-adminlte-info-box
title="API Requests (Today)"
text="42,618"
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 class="col-md-2">
<x-adminlte-info-box
title="Failed Requests"
text="0.23%"
icon="fas fa-exclamation-triangle fa-2x"
theme="gradient-warning"
progress="0.23"
description="↓0.05% from yesterday">
<div class="text-xs text-muted">328 failures (24h)</div>
</x-adminlte-info-box>
</div>
<div class="col-md-2">
<x-adminlte-info-box
title="Error Rate"
text="0.23%"
icon="fas fa-exclamation-triangle fa-2x"
theme="gradient-orange"
progress="0.23"
description="38 failed requests">
</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>
<!-- User Activity & Access Logs -->
<div class="row mt-4">
<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>
<!-- Performance Monitoring -->
<div class="col-md-2">
<x-adminlte-info-box
title="Avg Query Time"
text="142ms"
icon="fas fa-database fa-2x"
theme="gradient-indigo"
progress="85"
description="Slowest: 2.4s"
id="queryTimeWidget">
</x-adminlte-info-box>
</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>
<!-- Data Synchronization Status -->
<div class="row mt-4">
<!-- 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">
<x-adminlte-info-box
title="Sync Success Rate"
text="98.7%"
icon="fas fa-sync-alt fa-2x"
theme="gradient-teal"
progress="98.7"
description="↑1.2% from last week"/>
</div>
<div class="col-md-2">
<x-adminlte-info-box
title="Failed Syncs (24h)"
text="18"
icon="fas fa-exclamation-triangle fa-2x"
theme="gradient-orange"
progress="0.4"
description="0.4% error rate"/>
</div>
<div class="col-md-2">
<x-adminlte-info-box
title="Unverified Records"
text="247"
icon="fas fa-question-circle fa-2x"
theme="gradient-indigo"
progress="15"
description="15% overdue"/>
</div>
<div class="col-md-2">
<x-adminlte-info-box
title="Records Processed"
text="42,618"
icon="fas fa-database fa-2x"
theme="gradient-info"
progress="92"
description="↑8% from yesterday">
<div class="text-xs text-muted">NRB: 18,245 | CRS: 12,102 | DOI: 12,271</div>
</x-adminlte-info-box>
</div>
<div class="col-md-2">
<x-adminlte-info-box
title="Duplicate Records (30d)"
text="1,842"
icon="fas fa-copy fa-2x"
theme="gradient-orange"
progress=3.2
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>
<!-- Data Integrity & Verification Trends -->
<!-- <div class="row mt-4">
<div class="col-md-2">
<x-adminlte-info-box
title="Verification Success Rate"
text="98.7%"
icon="fas fa-check-circle fa-2x"
theme="gradient-teal"
progress="98.7"
description="↑1.2% from last week"/>
</div>
<div class="col-md-2">
<x-adminlte-info-box
title="Pending Updates"
text="247"
icon="fas fa-clock fa-2x"
theme="gradient-indigo"
progress="15"
description="15% overdue"/>
</div>
<div class="col-md-2">
<x-adminlte-info-box
title="Data Compliance Score"
text="96.5%"
icon="fas fa-shield-alt fa-2x"
theme="gradient-teal"
progress="96.5"
description="↑2.1% from last quarter">
<div class="text-xs text-muted">42 of 45 organizations compliant</div>
</x-adminlte-info-box>
</div>
</div> -->
<div class="d-flex flex-column flex-lg-row mt-4">
<!-- Left Side -->
<div class="col-lg-8"> <div class="col-lg-8">
<div>
<div class="d-flex flex-column flex-sm-row justify-content-between"> <!-- System Performance and Health -->
<x-adminlte-info-box title="National Registration Bureau" text="53,568,898" icon="fas fa-lg fa-users text-success" class="mr-3"/> <div class="row">
<x-adminlte-info-box title="Civil Registration Department" text="23,984,343" icon="fas fa-lg fa-certificate text-success"/> <div class="col-md-6">
<x-adminlte-card title="System Load & Capacity" theme="" icon="" collapsible>
<x-slot name="titleSlot">
<h4 class="card-title">System Load & Capacity</h4>
</x-slot>
<div class="row text-center">
<div class="col-4 border-right">
<div class="mb-2">CPU</div>
<canvas id="cpuGauge" width="120" height="120"></canvas>
<small class="text-muted">64% of 32 cores</small>
</div>
<div class="col-4 border-right">
<div class="mb-2">Memory</div>
<canvas id="memoryGauge" width="120" height="120"></canvas>
<small class="text-muted">48GB/64GB</small>
</div>
<div class="col-4">
<div class="mb-2">Storage</div>
<canvas id="storageGauge" width="120" height="120"></canvas>
<small class="text-muted">2.4TB/5TB</small>
</div>
</div>
</x-adminlte-card>
</div> </div>
<div class="d-flex flex-column flex-sm-row justify-content-between"> <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" class="mr-3"/> <x-adminlte-card title="Peak Usage Hours" theme="" icon="" collapsible>
<x-adminlte-info-box title="Refugee Affairs Department" text="11,821,317" icon="fas fa-lg fa-life-ring text-success"/> <x-slot name="titleSlot">
<h4 class="card-title">Peak Usage Hours</h4>
</x-slot>
<table class="table table-sm table-striped">
<thead>
<tr>
<th>Time</th>
<th>Avg Requests</th>
<th>Max RT</th>
<th>Error Rate</th>
</tr>
</thead>
<tbody>
<tr class="bg-danger-light">
<td>09:00-10:00</td>
<td>4,218</td>
<td>1.2s</td>
<td>0.42%</td>
</tr>
<tr class="bg-warning-light">
<td>14:00-15:00</td>
<td>3,845</td>
<td>0.8s</td>
<td>0.31%</td>
</tr>
<!-- More rows -->
</tbody>
</table>
</x-adminlte-card>
</div> </div>
<div class="d-flex flex-column flex-sm-row justify-content-between"> <div class="col-md-6 mt-4">
<x-adminlte-info-box title="Registrar General" text="17,763,238" icon="fas fa-lg fa-server text-success" class=""/> <x-adminlte-card title="Database Query Performance" theme="" icon="" collapsible>
{{-- <x-adminlte-info-box style="opacity: 0;" />--}} <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="chart-container" style="position: relative; height: 300px;">
<canvas id="queryPerformanceChart"></canvas>
</div>
<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>
</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 -->
<div class="mt-4">
<x-adminlte-card title="Synchronization Logs" theme="" icon="" collapsible>
<x-slot name="titleSlot">
<h4 class="card-title">Synchronization Logs</h4>
</x-slot>
<div class="float-right mb-3">
<div class="input-group input-group-sm">
<select class="form-control form-control-sm">
<option>All Systems</option>
<option>NRB</option>
<option>CRS</option>
<option>DOI</option>
</select>
<div class="input-group-append">
<button class="btn btn-primary">
<i class="fas fa-filter"></i> Filter
</button>
</div>
</div>
</div>
<div class="card-body p-0">
<div class="table-responsive">
<table class="table table-hover table-striped">
<thead>
<tr>
<th>System</th>
<th>Last Sync</th>
<th>Status</th>
<th>Records</th>
<th>Duration</th>
<th>Details</th>
</tr>
</thead>
<tbody>
<tr>
<td><span class="badge bg-primary">NRB</span></td>
<td>2023-11-20 14:32:18</td>
<td><span class="badge bg-success">Success</span></td>
<td>+1,842 (↑312)</td>
<td>42s</td>
<td><button class="btn btn-xs btn-info">View</button></td>
</tr>
<tr>
<td><span class="badge bg-teal">CRS</span></td>
<td>2023-11-20 14:30:05</td>
<td><span class="badge bg-warning">Partial</span></td>
<td>+892 (↓104)</td>
<td>1m18s</td>
<td><button class="btn btn-xs btn-info">View</button></td>
</tr>
<tr class="bg-danger-light">
<td><span class="badge bg-purple">DOI</span></td>
<td>2023-11-20 13:45:22</td>
<td><span class="badge bg-danger">Failed</span></td>
<td>0</td>
<td>N/A</td>
<td>
<button class="btn btn-xs btn-danger" data-toggle="popover"
title="Error Details"
data-content="Connection timeout to DOI server (ETIMEDOUT)">
Details
</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>
<!-- Data Integrity & Verification Trends -->
<div class="mt-4">
<x-adminlte-card title="Pending Data Updates" theme="" icon="" collapsible>
<x-slot name="titleSlot">
<h4 class="card-title">Pending Data Updates</h4>
</x-slot>
<div class="float-right mb-3">
<div class="input-group input-group-sm" style="width: 200px;">
<input type="text" name="table_search" class="form-control float-right" placeholder="Search">
<div class="input-group-append">
<button type="submit" class="btn btn-default">
<i class="fas fa-search"></i>
</button>
</div>
</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>Issue Type</th>
<th>Days Pending</th>
<th>Priority</th>
<th>Assigned To</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>NRB-2023-8472</td>
<td><span class="badge bg-primary">NRB</span></td>
<td>Data Conflict</td>
<td>3</td>
<td><span class="badge bg-warning">Medium</span></td>
<td>Team A</td>
<td>
<button class="btn btn-xs btn-info">View</button>
<button class="btn btn-xs btn-success">Resolve</button>
</td>
</tr>
<tr class="bg-danger-light">
<td>CRS-2023-3381</td>
<td><span class="badge bg-teal">CRS</span></td>
<td>Duplicate</td>
<td>12</td>
<td><span class="badge bg-danger">High</span></td>
<td>Team B</td>
<td>
<button class="btn btn-xs btn-info">View</button>
<button class="btn btn-xs btn-success">Resolve</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>
<!-- External Organizations & Data Consumers -->
<div class="mt-4">
<x-adminlte-card title="Data Sharing Compliance" theme="" icon="" collapsible>
<x-slot name="titleSlot">
<h4 class="card-title">Data Sharing Compliance</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 Sectors</option>
<option>Financial</option>
<option>Government</option>
<option>Commercial</option>
</select>
</div>
</div>
<div class="card-body p-0">
<div class="table-responsive">
<table class="table table-hover table-striped">
<thead>
<tr>
<th>Organization</th>
<th>Sector</th>
<th>API Usage</th>
<th>Compliance Score</th>
<th>Last Audit</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>Kenya Commercial Bank</td>
<td><span class="badge bg-primary">Financial</span></td>
<td>1.2M req/mo</td>
<td>
<div class="progress progress-xs">
<div class="progress-bar bg-success" style="width: 98%"></div>
</div>
<small>98%</small>
</td>
<td>2023-11-15</td>
<td><span class="badge bg-success">Compliant</span></td>
</tr>
<tr>
<td>Ministry of Interior</td>
<td><span class="badge bg-success">Government</span></td>
<td>845K req/mo</td>
<td>
<div class="progress progress-xs">
<div class="progress-bar bg-success" style="width: 97%"></div>
</div>
<small>97%</small>
</td>
<td>2023-11-10</td>
<td><span class="badge bg-success">Compliant</span></td>
</tr>
<tr class="bg-warning-light">
<td>MobilePay Ltd</td>
<td><span class="badge bg-primary">Financial</span></td>
<td>620K req/mo</td>
<td>
<div class="progress progress-xs">
<div class="progress-bar bg-warning" style="width: 89%"></div>
</div>
<small>89%</small>
</td>
<td>2023-10-28</td>
<td><span class="badge bg-warning">Review Needed</span></td>
</tr>
<tr class="bg-danger-light">
<td>QuickCredit Inc</td>
<td><span class="badge bg-info">Commercial</span></td>
<td>420K req/mo</td>
<td>
<div class="progress progress-xs">
<div class="progress-bar bg-danger" style="width: 76%"></div>
</div>
<small>76%</small>
</td>
<td>2023-09-15</td>
<td><span class="badge bg-danger">Non-Compliant</span></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>
<!-- User Activity & Access Logs -->
<div class="mt-4">
<x-adminlte-card title="Failed Login Attempts" theme="" icon="" collapsible>
<x-slot name="titleSlot">
<h4 class="card-title">Failed Login Attempts</h4>
</x-slot>
<div class="">
<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 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>
<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>
<!-- 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>
<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>
</div> </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=""> <div class="">
@php @php
$heads = [ $heads = [
...@@ -88,43 +847,204 @@ ...@@ -88,43 +847,204 @@
@endforeach @endforeach
</x-adminlte-datatable> </x-adminlte-datatable>
</div> </div>
</x-adminlte-card>
</div> </div>
<!-- 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="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>
<div class=""> <div class="">
<div class="container-fluid d-flex flex-column p-3 bg-white rounded"> <div class="chart-container" style="position: relative; height: 300px;">
<div class="d-flex flex-column flex-sm-row justify-content-between align-items-center mb-3"> <canvas id="networkTrafficChart"></canvas>
<div> </div>
<span class="h4"></span> <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="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 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>
</div>
</div>
</x-adminlte-card>
</div>
<!-- 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">Response Time Trends</h4>
</x-slot>
<div class=""> <div class="">
<div class="card"> <div class="btn-group">
<div class="m-2"> <button class="btn btn-sm btn-outline-secondary">Hourly</button>
<span class="h5">Input Traffic</span> <button class="btn btn-sm btn-secondary">Daily</button>
<button class="btn btn-sm btn-outline-secondary">Weekly</button>
</div> </div>
<div class="px-2 py-4">
<canvas id="dataInput"></canvas>
</div> </div>
<div class="card-body">
<div class="chart">
<canvas id="responseTimeChart"></canvas>
</div> </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>
</div> </div>
</x-adminlte-card>
</div> </div>
<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">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> </div>
<div class="col-lg-4 d-flex flex-column"> </div>
<div> <div class="card-body">
<div> <div class="position-relative mb-4">
<div class="container-fluid d-flex flex-column mb-3 p-3 bg-white rounded"> <canvas id="apiVolumeChart"></canvas>
<div class="d-flex flex-column flex-sm-row justify-content-between align-items-center mb-3"> </div>
<div> <div class="d-flex flex-row justify-content-between">
<span class="h4">Client Onboarding Drafts</span> <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>
<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>
</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=""> <div class="">
@php @php
$heads = [ $heads = [
...@@ -165,139 +1085,931 @@ ...@@ -165,139 +1085,931 @@
@endforeach @endforeach
</x-adminlte-datatable> </x-adminlte-datatable>
</div> </div>
</x-adminlte-card>
<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>
<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>
<div class="card">
<div class="m-2">
<span class="h5">Data Source</span>
</div> </div>
<div class="py-4"> <!-- Other tabs -->
<canvas id="dataSource1"></canvas>
</div> </div>
</div> </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>
</div> </div>
</div> </div>
<div class="chart">
<canvas id="verificationTrendChart" height="250"></canvas>
</div> </div>
</main> </x-adminlte-card>
@stop
@section('css')
<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>
<span class="badge bg-teal">CRS: 33%</span>
</div>
<div>
<span class="badge bg-purple">DOI: 19%</span>
</div>
</div>
</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>
</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="apiRequestsChart" height="300"></canvas>
</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>
</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>
<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 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>
</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>
</x-adminlte-card>
</div>
</div>
</main>
@stop
@section('css')
<style>
.gauge {
width: 100%;
height: 100px;
}
.bg-danger-light {
background-color: rgba(220,53,69,.1);
}
.bg-warning-light {
background-color: rgba(255,193,7,.1);
}
.card-title {
font-size: 1.25rem;
font-weight: 600;
}
.table-hover tbody tr:hover {
background-color: rgba(0,0,0,.03);
}
.chart {
min-height: 200px;
}
.progress-xs {
height: 0.5rem;
}
.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 @stop
@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 chart2;
$(document).ready(() => { // API Volume Chart (would use real data)
chart1 = document.getElementById('dataSource1'); new Chart(document.getElementById('apiVolumeChart'), {
chart2 = document.getElementById('dataInput'); type: 'bar',
data: {
labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
datasets: [{
label: 'External',
data: [32000, 30100, 41200, 38300, 40400, 21500, 18700],
backgroundColor: '#007bff'
}, {
label: 'Internal',
data: [9800, 10200, 12400, 11500, 9200, 7100, 5300],
backgroundColor: '#20c997'
}, {
label: 'Failed',
data: [120, 85, 64, 92, 115, 42, 28],
backgroundColor: '#6c757d'
}]
},
options: {
responsive: true,
scales: {
x: { stacked: true },
y: { stacked: true }
}
}
});
// 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'
]
}]
}
});
new Chart(chart1, { // Gauge Charts
// CPU Gauge
const cpuCtx = document.getElementById('cpuGauge').getContext('2d');
new Chart(cpuCtx, {
type: 'doughnut', type: 'doughnut',
data: { data: {
labels: ['CRD', 'DOI', 'NRB', 'RAD', 'RG'],
datasets: [{ datasets: [{
label: 'Population Dataset', data: [64, 36],
data: [300, 50, 100, 150, 125],
backgroundColor: [ backgroundColor: [
'rgb(255,99,132)', getColor(64),
'rgb(54,162,235)', '#f0f0f0'
'rgb(255,205,86)',
'rgb(16,203,23)',
'rgb(159,8,234)',
], ],
hoverOffset: 4 borderWidth: 0
}] }]
},
options: {
circumference: 180,
rotation: -90,
cutout: '80%',
plugins: {
legend: { display: false },
tooltip: { enabled: false }
}
} }
}); });
new Chart(chart2, { // Memory Gauge
type: 'line', const memoryCtx = document.getElementById('memoryGauge').getContext('2d');
new Chart(memoryCtx, {
type: 'doughnut',
data: { data: {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'], datasets: [{
datasets: [ data: [75, 25],
{
label: 'CRD',
data: [196, 176, 144, 160, 170, 140],
fill: false,
borderColor: 'rgb(255,99,132)',
backgroundColor: [ backgroundColor: [
'rgb(255,99,132)', getColor(75),
'rgb(54,162,235)', '#f0f0f0'
'rgb(255,205,86)',
'rgb(86,255,179)',
'rgb(192,31,68)',
'rgb(16,218,188)',
], ],
hoverOffset: 4 borderWidth: 0
}]
}, },
{ options: {
label: 'DOI', circumference: 180,
data: [132, 178, 114, 189, 151, 123], rotation: -90,
fill: false, cutout: '80%',
borderColor: 'rgb(54,162,235)', plugins: {
legend: { display: false },
tooltip: { enabled: false }
}
}
});
// Storage Gauge
const storageCtx = document.getElementById('storageGauge').getContext('2d');
new Chart(storageCtx, {
type: 'doughnut',
data: {
datasets: [{
data: [48, 52],
backgroundColor: [ backgroundColor: [
'rgb(255,99,132)', getColor(48),
'rgb(54,162,235)', '#f0f0f0'
'rgb(255,205,86)',
'rgb(86,255,179)',
'rgb(192,31,68)',
'rgb(16,218,188)',
], ],
hoverOffset: 4 borderWidth: 0
}]
}, },
{ options: {
label: 'NRB', circumference: 180,
data: [108, 192, 147, 173, 102, 111], rotation: -90,
fill: false, cutout: '80%',
borderColor: 'rgb(255,205,86)', plugins: {
legend: { display: false },
tooltip: { enabled: false }
}
}
});
function getColor(value) {
if (value < 50) return '#28a745'; // Green
if (value < 75) return '#ffc107'; // Yellow
return '#dc3545'; // Red
}
// Queue Status Chart
new Chart(document.getElementById('queueStatusChart'), {
type: 'doughnut',
data: {
labels: ['Processed', 'Queued', 'Failed'],
datasets: [{
data: [4218, 1842, 18],
backgroundColor: [
'#28a745',
'#17a2b8',
'#dc3545'
]
}]
},
options: {
cutout: '70%',
plugins: {
legend: {
position: 'bottom'
}
}
}
});
// NRB Performance Chart
new Chart(document.getElementById('nrbPerformanceChart'), {
type: 'line',
data: {
labels: Array.from({length: 24}, (_, i) => i + ':00'),
datasets: [{
label: 'Sync Duration (sec)',
data: [28, 25, 22, 18, 20, 25, 30, 35, 42, 38, 35, 32, 30, 28, 25, 30, 35, 40, 45, 42, 38, 35, 30, 28],
borderColor: '#007bff',
backgroundColor: 'rgba(0, 123, 255, 0.1)',
tension: 0.4
}]
},
options: {
responsive: true,
scales: {
y: {
beginAtZero: true
}
}
}
});
// Enable popovers for error details
$(function () {
$('[data-toggle="popover"]').popover()
});
// Verification Trend Chart
new Chart(document.getElementById('verificationTrendChart'), {
type: 'line',
data: {
labels: Array.from({length: 30}, (_, i) => i+1 + ' Nov'),
datasets: [{
label: 'Success Rate (%)',
data: [97.2, 97.5, 97.8, 98.1, 97.9, 98.3, 98.5, 98.7, 98.6, 98.4, 98.5, 98.7, 98.8, 98.6, 98.9, 99.0, 98.8, 98.7, 98.9, 99.0, 98.8, 98.9, 99.0, 99.1, 99.0, 98.9, 98.8, 98.7, 98.8, 98.7],
borderColor: '#20c997',
backgroundColor: 'rgba(32, 201, 151, 0.1)',
borderWidth: 2,
tension: 0.3,
fill: true
}]
},
options: {
responsive: true,
scales: {
y: {
min: 95,
max: 100,
ticks: {
callback: function(value) {
return value + '%';
}
}
}
}
}
});
// Duplicates Chart
new Chart(document.getElementById('duplicatesChart'), {
type: 'bar',
data: {
labels: ['NRB', 'CRS', 'DOI'],
datasets: [{
label: 'Duplicate Records',
data: [892, 612, 338],
backgroundColor: [ backgroundColor: [
'rgb(255,99,132)', 'rgba(13, 110, 253, 0.7)',
'rgb(54,162,235)', 'rgba(32, 201, 151, 0.7)',
'rgb(255,205,86)', 'rgba(111, 66, 193, 0.7)'
'rgb(86,255,179)', ],
'rgb(192,31,68)', borderColor: [
'rgb(16,218,188)', '#0d6efd',
'#20c997',
'#6f42c1'
], ],
hoverOffset: 4 borderWidth: 1
}]
}, },
{ options: {
label: 'RAD', responsive: true,
data: [115, 164, 123, 200, 85, 191], scales: {
fill: false, y: {
borderColor: 'rgb(225,12,221)', beginAtZero: true
}
}
}
});
// Top Organizations Chart
new Chart(document.getElementById('topOrganizationsChart'), {
type: 'bar',
data: {
labels: ['Kenya Commercial Bank', 'Ministry of Interior', 'Equitel', 'Safaricom', 'Co-op Bank'],
datasets: [{
label: 'API Requests (thousands)',
data: [1200, 845, 720, 680, 550],
backgroundColor: 'rgba(58, 115, 240, 0.7)',
borderColor: 'rgba(58, 115, 240, 1)',
borderWidth: 1
}]
},
options: {
responsive: true,
scales: {
y: {
beginAtZero: true,
ticks: {
callback: function(value) {
return value + 'K';
}
}
}
}
}
});
// Usage Pie Chart
new Chart(document.getElementById('usagePieChart'), {
type: 'doughnut',
data: {
labels: ['Financial', 'Government', 'Commercial'],
datasets: [{
data: [42, 31, 27],
backgroundColor: [ backgroundColor: [
'rgb(255,99,132)', 'rgba(13, 110, 253, 0.7)',
'rgb(54,162,235)', 'rgba(40, 167, 69, 0.7)',
'rgb(255,205,86)', 'rgba(23, 162, 184, 0.7)'
'rgb(86,255,179)',
'rgb(192,31,68)',
'rgb(16,218,188)',
], ],
hoverOffset: 4 borderWidth: 1
}]
},
options: {
responsive: true,
plugins: {
legend: {
position: 'bottom'
}
}
}
});
// API Requests by Source Chart
new Chart(document.getElementById('apiRequestsChart'), {
type: 'bar',
data: {
labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
datasets: [
{
label: 'Financial',
data: [42000, 39800, 43200, 45800, 41200, 28500, 22400],
backgroundColor: '#0d6efd'
},
{
label: 'Government',
data: [18500, 17400, 19200, 20100, 21800, 15400, 12100],
backgroundColor: '#198754'
}, },
{ {
label: 'RG', label: 'Telecom',
data: [98, 156, 110, 175, 84, 200], data: [12500, 13200, 14200, 13800, 14600, 9800, 8200],
fill: false, backgroundColor: '#0dcaf0'
borderColor: 'rgb(86,236,11)', },
{
label: 'Other',
data: [6800, 7200, 6500, 7100, 6900, 5200, 4100],
backgroundColor: '#ffc107'
}
]
},
options: {
responsive: true,
scales: {
x: { stacked: true },
y: { stacked: true }
}
}
});
// 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: [ backgroundColor: [
'rgb(255,99,132)', '#dc3545',
'rgb(54,162,235)', '#fd7e14',
'rgb(255,205,86)', '#6c757d',
'rgb(86,255,179)', '#0dcaf0'
'rgb(192,31,68)', ]
'rgb(16,218,188)', }]
],
hoverOffset: 4
}, },
options: {
responsive: true,
plugins: {
legend: {
position: 'bottom'
}
}
}
});
// Response Time Trends Chart
new Chart(document.getElementById('responseTimeChart'), {
type: 'line',
data: {
labels: Array.from({length: 24}, (_, i) => i + ':00'),
datasets: [
{
label: 'Verification',
data: [85, 82, 80, 78, 82, 90, 95, 98, 102, 105, 100, 98, 95, 92, 90, 95, 100, 105, 110, 108, 105, 100, 95, 90],
borderColor: '#0d6efd',
backgroundColor: 'rgba(13, 110, 253, 0.1)',
tension: 0.3
},
{
label: 'Search',
data: [180, 175, 170, 165, 170, 185, 195, 205, 215, 220, 210, 200, 195, 190, 185, 190, 200, 210, 220, 215, 210, 200, 190, 180],
borderColor: '#198754',
backgroundColor: 'rgba(25, 135, 84, 0.1)',
tension: 0.3
},
// Additional datasets...
] ]
},
options: {
responsive: true,
scales: {
y: {
title: {
display: true,
text: 'Response Time (ms)'
}
}
}
} }
}); });
// 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> </script>
@stop @stop
......
resources/views/home/home2.blade.php 0 → 100644
View file @ c67324cd
<!-- ADMIN DASHBOARD -->
@extends('adminlte::page')
@section('title', 'IPRS | Director Dashboard')
@section('content_header')
@stop
@section('content')
<main>
<div class="col d-flex flex-column flex-sm-row align-items-center justify-content-sm-between mb-3">
<div class="d-flex flex-row align-items-center mb-3 mb-sm-0">
<div class="d-flex justify-content-center align-items-center rounded-circle" style="width: 44px; height: 44px; background-color: #F94A7A;">
<span class="h4 mb-0 text-white"><b>{{ Auth::user()->name[0] }}</b></span>
</div>
<div class="d-flex flex-column ml-3">
<p class="text-secondary mb-0">Welcome back!</p>
<h5>{{ Auth::user()->name }} | {{ Auth::user()->contract->client->name_fl }}</h5>
</div>
</div>
</div>
<div class="d-flex flex-column flex-lg-row">
<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">
<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>
<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',
'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 = [
'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>
<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>
</div>
<div class="col-lg-5 d-flex flex-column">
<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 = [
'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 = [
'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>
</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>
</x-adminlte-card>
</div>
</div>
</div>
</main>
@stop
@section('css')
@stop
@section('js')
<script src='/vendor/chart.js/Chart.min.js'></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
let chart1;
$(document).ready(() => {
chart1 = document.getElementById('dataSource1');
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
}]
}
});
});
$(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: {
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
@section('plugins.Datatables', true)
@section('plugins.DatatablesPlugin', true)
resources/views/livewire/search/partials/tabs/birth/document_data.blade.php
View file @ c67324cd
...@@ -6,14 +6,6 @@ ...@@ -6,14 +6,6 @@
<div class="row"> <div class="row">
<div class="col-2"> <div class="col-2">
<div class="row"> <div class="row">
<x-adminlte-card>
@if($modalStatus)
<img class="card-img-top"
src="{{ asset('../images/imgplaceholder.png') }}" alt="Card image cap">
@else
<div class="skeleton skeleton-text short skeleton-img"></div>
@endif
</x-adminlte-card>
<div class="row" style="width: 100%;"> <div class="row" style="width: 100%;">
@if($role->hasPermissionTo("Basic View Birth Details")) @if($role->hasPermissionTo("Basic View Birth Details"))
<div class="col-12 text-center"> <div class="col-12 text-center">
......
resources/views/livewire/search/partials/tabs/id/photo.blade.php
View file @ c67324cd
...@@ -28,7 +28,7 @@ ...@@ -28,7 +28,7 @@
<div class="col-4"> <div class="col-4">
<x-adminlte-card style="width: 55%;margin: auto;"> <x-adminlte-card style="width: 55%;margin: auto;">
<img class="card-img-top" <img class="card-img-top"
src="https://static.vecteezy.com/system/resources/previews/018/765/757/original/user-profile-icon-in-flat-style-member-avatar-illustration-on-isolated-background-human-permission-sign-business-concept-vector.jpg" alt="Card image cap"> src="{{ asset('../images/passport-photo.jpg') }}" alt="Card image cap">
</x-adminlte-card> </x-adminlte-card>
<x-adminlte-card style="width: 70%;margin: 44px auto 0 auto;"> <x-adminlte-card style="width: 70%;margin: 44px auto 0 auto;">
......
resources/views/livewire/search/partials/tabs/passport_tabs/photo.blade.php 0 → 100644
View file @ c67324cd
<p class="text-info" style="text-align: center;">Last updated: 23 jun 2023</p>
<div class="row">
<div class="col-4">
<div class="row">
<div class="col-10">
<div class="left-inner-container"></div>
</div>
<div class="col-2">
<div class="finger-print-container">
<img src="{{ asset('images/fingerprints/th1.jpg') }}" alt=""/>
</div>
<div class="finger-print-container">
<img src="{{ asset('images/fingerprints/th1.jpg') }}" alt=""/>
</div>
<div class="finger-print-container">
<img src="{{ asset('images/fingerprints/th1.jpg') }}" alt=""/>
</div>
<div class="finger-print-container">
<img src="{{ asset('images/fingerprints/th1.jpg') }}" alt=""/>
</div>
<div class="finger-print-container">
<img src="{{ asset('images/fingerprints/th1.jpg') }}" alt=""/>
</div>
</div>
</div>
</div>
<div class="col-4">
<x-adminlte-card style="width: 55%;margin: auto;">
<img class="card-img-top"
src="{{ asset('../images/passport-photo.jpg') }}" alt="Card image cap">
</x-adminlte-card>
<x-adminlte-card style="width: 70%;margin: 44px auto 0 auto;">
</x-adminlte-card>
</div>
<div class="col-4">
<div class="row">
<div class="col-2">
<div class="finger-print-container">
<img src="{{ asset('images/fingerprints/th1.jpg') }}" alt=""/>
</div>
<div class="finger-print-container">
<img src="{{ asset('images/fingerprints/th1.jpg') }}" alt=""/>
</div>
<div class="finger-print-container">
<img src="{{ asset('images/fingerprints/th1.jpg') }}" alt=""/>
</div>
<div class="finger-print-container">
<img src="{{ asset('images/fingerprints/th1.jpg') }}" alt=""/>
</div>
<div class="finger-print-container">
<img src="{{ asset('images/fingerprints/th1.jpg') }}" alt=""/>
</div>
</div>
<div class="col-10">
<div class="right-inner-container"></div>
</div>
</div>
</div>
<style>
.left-inner-container{
background-image: url('{{ asset('images/fingerprints/lefthand.png') }}');
background-size: 100%;
border: 1px solid #524848;
height: 30rem;
background-repeat: no-repeat;
background-position: center;
background-color: #b5b5b5;
border-radius: 10px;
}
.right-inner-container{
background-image: url('{{ asset('images/fingerprints/righthand.png') }}');
background-size: 100%;
border: 1px solid #524848;
height: 30rem;
background-repeat: no-repeat;
background-position: center;
background-color: #b5b5b5;
border-radius: 10px;
}
.finger-print-container{
border: 1px solid black;
height: 18%;
border-radius: 5px;
margin-bottom: 2%;
text-align: center;
}
.finger-print-container > img{
width: 60%;
}
</style>
</div>
resources/views/livewire/search/passport-modal.blade.php
View file @ c67324cd
...@@ -89,7 +89,7 @@ ...@@ -89,7 +89,7 @@
@if($role->hasPermissionTo("Basic View ID Photo and Signature")) @if($role->hasPermissionTo("Basic View ID Photo and Signature"))
<div class="tab-pane fade" id="custom-tabs-four-photo" role="tabpanel" aria-labelledby="custom-tabs-four-photo-tab"> <div class="tab-pane fade" id="custom-tabs-four-photo" role="tabpanel" aria-labelledby="custom-tabs-four-photo-tab">
@include('livewire.search.partials.tabs.passport_tabs.document_header_details') @include('livewire.search.partials.tabs.passport_tabs.document_header_details')
<h4>Photos</h4> @include('livewire.search.partials.tabs.passport_tabs.photo')
</div> </div>
@endif @endif
......
resources/views/livewire/search/searchform.blade.php
View file @ c67324cd
...@@ -38,7 +38,7 @@ ...@@ -38,7 +38,7 @@
<div id="fieldsContainerID" class="{{ $showFields !== 'ID' ? 'd-none' : '' }} d-flex"> <div id="fieldsContainerID" class="{{ $showFields !== 'ID' ? 'd-none' : '' }} d-flex">
@if($role->hasPermissionTo('Basic Search ID with ID number')) @if($role->hasPermissionTo('Basic Search ID with ID number'))
<input type="text" class="form-control search-element no-radius" id="searchInputID" name="docNumber" placeholder="Enter Maisha Number" title="Enter Maisha Number" wire:model="docNumber"> <input type="text" class="form-control search-element no-radius" id="searchInputID" name="docNumber" placeholder="Enter UPI Number" title="Enter UPI Number" wire:model="docNumber">
@endif @endif
@if($role->hasPermissionTo('Basic Search ID with Serial number')) @if($role->hasPermissionTo('Basic Search ID with Serial number'))
<input type="text" class="form-control search-element no-radius" id="searchInputSerial" name="SerialNumber" placeholder="Enter Serial Number" title="Enter Serial Number" wire:model="serialNumber"> <input type="text" class="form-control search-element no-radius" id="searchInputSerial" name="SerialNumber" placeholder="Enter Serial Number" title="Enter Serial Number" wire:model="serialNumber">
...@@ -46,15 +46,17 @@ ...@@ -46,15 +46,17 @@
</div> </div>
<div id="fieldsContainerPassport" class="{{ $showFields !== 'Passport' ? 'd-none' : '' }} d-flex"> <div id="fieldsContainerPassport" class="{{ $showFields !== 'Passport' ? 'd-none' : '' }} d-flex">
@if($role->hasPermissionTo("Basic Search Passport with ID number"))
<input type="text" class="form-control search-element no-radius" id="searchInputPassportId" name="pino" placeholder="Enter UPI Number" title="Enter UPI Number" wire:model="passportIdNum">
@endif
@if($role->hasPermissionTo("Basic Search Passport with Passport number")) @if($role->hasPermissionTo("Basic Search Passport with Passport number"))
<input type="text" class="form-control search-element no-radius" id="searchInputPassportNo" name="pno" placeholder="Enter Passport Number" title="Enter Passport Number" wire:model="passportNum"> <input type="text" class="form-control search-element no-radius" id="searchInputPassportNo" name="pno" placeholder="Enter Passport Number" title="Enter Passport Number" wire:model="passportNum">
@endif @endif
@if($role->hasPermissionTo("Basic Search Passport with ID number"))
<input type="text" class="form-control search-element no-radius" id="searchInputPassportId" name="pino" placeholder="Enter Maisha Number" title="Enter ID Number" wire:model="passportIdNum">
@endif
</div> </div>
<div id="fieldsContainerBirth" class="{{ $showFields !== 'Birth' ? 'd-none' : '' }} d-flex"> <div id="fieldsContainerBirth" class="{{ $showFields !== 'Birth' ? 'd-none' : '' }} d-flex">
<input type="text" class="form-control search-element no-radius" id="searchBirthEntry" name="searchBirthEntryNum" placeholder="Enter UPI Number" title="Enter UPI Number" wire:model="searchBirthEntryNum">
<input type="text" class="form-control search-element no-radius" id="searchBirthEntry" name="searchBirthEntryNum" placeholder="Enter Birth Entry Number" title="Enter Birth Entry Number" wire:model="searchBirthEntryNum"> <input type="text" class="form-control search-element no-radius" id="searchBirthEntry" name="searchBirthEntryNum" placeholder="Enter Birth Entry Number" title="Enter Birth Entry Number" wire:model="searchBirthEntryNum">
</div> </div>
...@@ -114,6 +116,7 @@ ...@@ -114,6 +116,7 @@
height: 50px; height: 50px;
flex: 1; flex: 1;
border: 1px solid #ced4da; border: 1px solid #ced4da;
min-width: 200px;
} }
.no-radius { .no-radius {
border-radius: 0 !important; border-radius: 0 !important;
......
routes/web.php
View file @ c67324cd
...@@ -103,6 +103,8 @@ Route::get('notifications/all', [NotificationController::class, 'all'])->name("n ...@@ -103,6 +103,8 @@ Route::get('notifications/all', [NotificationController::class, 'all'])->name("n
Route::get('/home', [App\Http\Controllers\HomeController::class, 'index'])->name('home'); Route::get('/home', [App\Http\Controllers\HomeController::class, 'index'])->name('home');
Route::get('/director', [App\Http\Controllers\Home2Controller::class, 'index'])->name('home2');
Route::get('/dashboard', [App\Http\Controllers\DashboardController::class, 'index'])->name('dashboard'); Route::get('/dashboard', [App\Http\Controllers\DashboardController::class, 'index'])->name('dashboard');
Route::get('/blocked', BlockedController::class)->name('blocked'); Route::get('/blocked', BlockedController::class)->name('blocked');
......
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