320 lines
18 KiB
PHP
320 lines
18 KiB
PHP
@extends('Admin.layouts.master')
|
|
@section('title', 'General Dashboard')
|
|
@section('style')
|
|
<link rel="stylesheet"
|
|
href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.css">
|
|
<style>
|
|
.dataTables_filter {
|
|
display: none;
|
|
}
|
|
|
|
.dt-buttons {
|
|
display: none;
|
|
}
|
|
</style>
|
|
@endsection
|
|
@section('content')
|
|
<div class="app-main flex-column flex-row-fluid" id="kt_app_main">
|
|
<div class="d-flex flex-column flex-column-fluid">
|
|
<div id="kt_app_content_container" class="app-container container-xxl">
|
|
<div class="row max-w-100 mt-10">
|
|
<div class="col-md-3 index-box">
|
|
<a href="{{ route('manage-user-product') }}">
|
|
<div class="card card-flush mb-5 mb-xl-10 mb-3">
|
|
<div class="card-header p-2 ">
|
|
<div class="card-title d-flex justify-content-between w-100">
|
|
<div>
|
|
<span
|
|
class="fs-2x fw-bold text-white me-2 lh-1 ls-n2">{{ $investingUserCount }}</span>
|
|
</div>
|
|
<div class="title_icon_area">
|
|
<span class="svg-icon svg-icon-1">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="#fff"
|
|
xmlns="http://www.w3.org/2000/svg">
|
|
<path
|
|
d="M6.28548 15.0861C7.34369 13.1814 9.35142 12 11.5304 12H12.4696C14.6486 12 16.6563 13.1814 17.7145 15.0861L19.3493 18.0287C20.0899 19.3618 19.1259 21 17.601 21H6.39903C4.87406 21 3.91012 19.3618 4.65071 18.0287L6.28548 15.0861Z"
|
|
fill="#fff" />
|
|
<rect opacity="0.4" x="8" y="3" width="8" height="8"
|
|
rx="4" fill="#fff" />
|
|
</svg>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<span class="text-white opacity-75 pt-1 fw-semibold fs-7">Total Investors <br>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="card-body d-flex align-items-center p-2">
|
|
<div class="d-flex align-items-center flex-column mt-0 w-100">
|
|
<div class="h-8px mx-3 w-100 bg-white rounded bg-opacity-50">
|
|
<div class="bg-white rounded h-8px" role="progressbar" style="width: 72%;"
|
|
aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
<div class="col-md-3 index-box">
|
|
<a href="{{ route('manage_investors') }}">
|
|
<div class="card card-flush mb-5 mb-xl-10">
|
|
<div class="card-header p-2">
|
|
<div class="card-title d-flex justify-content-between w-100">
|
|
<div>
|
|
<span
|
|
class="fs-2x fw-bold text-white me-2 lh-1 ls-n2">{{ $userCount }}</span>
|
|
</div>
|
|
<div class="title_icon_area">
|
|
<span class="svg-icon svg-icon-1">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="#fff"
|
|
xmlns="http://www.w3.org/2000/svg">
|
|
<path
|
|
d="M6.28548 15.0861C7.34369 13.1814 9.35142 12 11.5304 12H12.4696C14.6486 12 16.6563 13.1814 17.7145 15.0861L19.3493 18.0287C20.0899 19.3618 19.1259 21 17.601 21H6.39903C4.87406 21 3.91012 19.3618 4.65071 18.0287L6.28548 15.0861Z"
|
|
fill="#fff" />
|
|
<rect opacity="0.4" x="8" y="3" width="8" height="8"
|
|
rx="4" fill="#fff" />
|
|
</svg>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<span class="text-white opacity-75 pt-1 fw-semibold fs-7">Total Registered Users
|
|
<br> </span>
|
|
</div>
|
|
</div>
|
|
<div class="card-body d-flex align-items-center p-2">
|
|
<div class="d-flex align-items-center flex-column mt-0 w-100">
|
|
<div class="h-8px mx-3 w-100 bg-white bg-opacity-50 rounded">
|
|
<div class="bg-white rounded h-8px" role="progressbar" style="width: 72%;"
|
|
aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
<div class="col-md-3 index-box">
|
|
<a href="{{ route('manage.companies') }}">
|
|
<div class="card card-flush mb-5 mb-xl-10">
|
|
<div class="card-header p-2">
|
|
<div class="card-title d-flex justify-content-between w-100">
|
|
<div>
|
|
<span
|
|
class="fs-2x fw-bold text-white me-2 lh-1 ls-n2">{{ $companyCount }}</span>
|
|
</div>
|
|
<div class="title_icon_area">
|
|
<span class="svg-icon svg-icon-1">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="#fff"
|
|
xmlns="http://www.w3.org/2000/svg">
|
|
<path
|
|
d="M6.28548 15.0861C7.34369 13.1814 9.35142 12 11.5304 12H12.4696C14.6486 12 16.6563 13.1814 17.7145 15.0861L19.3493 18.0287C20.0899 19.3618 19.1259 21 17.601 21H6.39903C4.87406 21 3.91012 19.3618 4.65071 18.0287L6.28548 15.0861Z"
|
|
fill="#fff" />
|
|
<rect opacity="0.4" x="8" y="3" width="8" height="8"
|
|
rx="4" fill="#fff" />
|
|
</svg>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<span class="text-white opacity-75 pt-1 fw-semibold fs-7">Total Manufactures
|
|
(Investment Companies)</span>
|
|
</div>
|
|
</div>
|
|
<div class="card-body d-flex align-items-center p-2">
|
|
<div class="d-flex align-items-center flex-column mt-0 w-100">
|
|
<div class="h-8px mx-3 w-100 bg-white bg-opacity-50 rounded">
|
|
<div class="bg-white rounded h-8px" role="progressbar" style="width: 72%;"
|
|
aria-valuenow="69" aria-valuemin="0" aria-valuemax="100"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
<div class="col-md-3 index-box">
|
|
<a href="{{ route('manage.products') }}">
|
|
<div class="card card-flush mb-5 mb-xl-10">
|
|
<div class="card-header p-2">
|
|
<div class="card-title d-flex justify-content-between w-100">
|
|
<div>
|
|
<span
|
|
class="fs-2x fw-bold text-white me-2 lh-1 ls-n2">{{ $totalProductCount }}</span>
|
|
</div>
|
|
<div class="title_icon_area">
|
|
<span class="svg-icon svg-icon-1">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="#fff"
|
|
xmlns="http://www.w3.org/2000/svg">
|
|
<path
|
|
d="M6.28548 15.0861C7.34369 13.1814 9.35142 12 11.5304 12H12.4696C14.6486 12 16.6563 13.1814 17.7145 15.0861L19.3493 18.0287C20.0899 19.3618 19.1259 21 17.601 21H6.39903C4.87406 21 3.91012 19.3618 4.65071 18.0287L6.28548 15.0861Z"
|
|
fill="#fff" />
|
|
<rect opacity="0.4" x="8" y="3" width="8" height="8"
|
|
rx="4" fill="#fff" />
|
|
</svg>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<span class="text-white opacity-75 pt-1 fw-semibold fs-7">Total Investments
|
|
(Investment Products)</span>
|
|
</div>
|
|
</div>
|
|
<div class="card-body d-flex align-items-center p-2">
|
|
<div class="d-flex align-items-center flex-column mt-0 w-100">
|
|
<div class="h-8px mx-3 w-100 bg-white bg-opacity-50 rounded">
|
|
<div class="bg-white rounded h-8px" role="progressbar" style="width: 72%;"
|
|
aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="row max-w-100 mt-10">
|
|
<div class="col-md-8">
|
|
<div class="card card-flush h-xl-100">
|
|
<p class="fs-3 text-gray me-2 lh-1 p-9 pb-0">Commission earned</p>
|
|
<div class="card-header py-7 pt-0">
|
|
<div class="m-0">
|
|
<div class="d-flex flex-column mb-2">
|
|
<span class="fs-2 fw-bold text-gray-800 me-2 lh-1 ls-n2"
|
|
id="total-gross-commission-sum"> ₹ 0.0</span>
|
|
<span class="fs-7 text-black-400">Gross Earned</span>
|
|
</div>
|
|
</div>
|
|
<div class="m-0">
|
|
<div class="d-flex flex-column mb-2">
|
|
<span class="fs-2 fw-bold text-gray-800 me-2 lh-1 ls-n2"
|
|
id="total-net-commission-sum"> ₹ 0.0</span>
|
|
<span class="fs-7 text-black-400">Net Received</span>
|
|
</div>
|
|
</div>
|
|
<div class="chart d-flex">
|
|
<div class="m-0">
|
|
<div class="d-flex flex-column mb-2">
|
|
<span class="fs-7 text-black-400">From</span>
|
|
<span class=""><input type="date" name="from"
|
|
id="from-date"></span>
|
|
</div>
|
|
</div>
|
|
<div class="m-0">
|
|
<div class="d-flex flex-column mb-2">
|
|
<span class="fs-7 text-black-400">To</span>
|
|
<span class=""><input type="date" name="to"
|
|
id="to-date"></span>
|
|
</div>
|
|
</div>
|
|
<div class="d-flex flex-column">
|
|
<button class="btn btn-primary" style="padding:6px;margin:12px"
|
|
onclick="getData()">Filter</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card-body d-flex align-items-end ps-4 pe-0 pb-4">
|
|
<div>
|
|
<canvas id="myChart" width="600" height="300"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div
|
|
class="right_side_chart d-flex align-items-center justify-content-center card card-flush h-xl-100">
|
|
<div class="top_circle_area">
|
|
<p class='fs-1 mb-0' id="total-investment-sum">₹ 0.0</p>
|
|
</div>
|
|
<p class='fs-5 fw-bold text-center'>Total Investment</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endsection
|
|
@section('scripts')
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.min.js"
|
|
integrity="sha512-L0Shl7nXXzIlBSUUPpxrokqq4ojqgZFQczTYlGjzONGTDAcLremjwaWv5A+EDLnxhQzY5xUZPWLOLqYRkY0Cbw=="
|
|
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.full.min.js">
|
|
</script>
|
|
<script>
|
|
getData();
|
|
|
|
const ctx = document.getElementById('myChart');
|
|
let data = {
|
|
datasets: [{
|
|
label: 'Net Recieved',
|
|
data: [65, 59, 80, 81, 56, 140],
|
|
fill: false,
|
|
borderColor: 'rgb(75, 192, 192)',
|
|
tension: 0.1
|
|
}, {
|
|
label: 'Gross Received',
|
|
data: [50, 59, 10, 90, 56, 55],
|
|
fill: false,
|
|
borderColor: 'rgb(0, 255, 0)',
|
|
tension: 0.1
|
|
}],
|
|
};
|
|
var chart = new Chart(ctx, {
|
|
type: 'line',
|
|
data: data,
|
|
});
|
|
|
|
function addData(chart, label, netRecievedData, grossRecievedData) {
|
|
chart.data.labels = [...label];
|
|
//Net Recieved
|
|
chart.data.datasets[0].data = [...netRecievedData];
|
|
//Gross Recieved
|
|
chart.data.datasets[1].data = [...grossRecievedData];
|
|
chart.update();
|
|
}
|
|
|
|
function removeData(chart) {
|
|
chart.data.labels = [];
|
|
chart.data.datasets.forEach((dataset) => {
|
|
dataset.data.pop();
|
|
});
|
|
chart.update();
|
|
}
|
|
|
|
function getData() {
|
|
$.ajax({
|
|
url: "{{ route('get-commission-data') }}",
|
|
type: "post",
|
|
dataType: "json",
|
|
headers: {
|
|
"X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
|
|
},
|
|
data: {
|
|
from: $('#from-date').val(),
|
|
to: $('#to-date').val()
|
|
},
|
|
success: function(result) {
|
|
console.log(result);
|
|
$('#total-investment-sum').html(result.total_investment);
|
|
$('#total-gross-commission-sum').html(result.gross_commission);
|
|
$('#total-net-commission-sum').html(result.net_commission);
|
|
removeData(chart);
|
|
addData(chart, result.days, result.intervalNet, result.intervalGross);
|
|
},
|
|
});
|
|
}
|
|
</script>
|
|
<script>
|
|
// Get today's date
|
|
var today = new Date();
|
|
var dd = String(today.getDate()).padStart(2, '0');
|
|
var mm = String(today.getMonth() + 1).padStart(2, '0'); // January is 0!
|
|
var yyyy = today.getFullYear();
|
|
|
|
today = yyyy + '-' + mm + '-' + dd;
|
|
|
|
// Set max attribute for both inputs to prevent selecting future dates
|
|
document.getElementById("from-date").setAttribute("max", today);
|
|
document.getElementById("to-date").setAttribute("max", today);
|
|
</script>
|
|
|
|
@endsection
|