File: /var/www/html/owlcrm/resources/views/users/dashboard.blade.php
@extends('adminlte::page')
@section('title', 'OWL CRM Dashboard')
@section('content_header')
<h1>Dashboard</h1>
@stop
@section('content')
<p>Welcome to the OWL CRM admin panel.</p>
<div class="row">
<div class="col-lg-3 col-6">
<div class="small-box bg-info">
<div class="inner">
<h3>{{ $newLeadCount }}</h3>
<p>New Leads</p>
</div>
<div class="icon">
<i class="fas fa-chart-bar"></i>
</div>
<a href="{{ route('leads.index') }}" class="small-box-footer">More info <i
class="fas fa-arrow-circle-right"></i></a>
</div>
</div>
<div class="col-lg-3 col-6">
<div class="small-box bg-danger">
<div class="inner">
<h3>{{ $hotLeadCount }}</h3>
<p>Hot Leads</p>
</div>
<div class="icon">
<i class="fas fa-chart-bar"></i>
</div>
<a href="{{ route('leads.index') }}" class="small-box-footer">More info <i
class="fas fa-arrow-circle-right"></i></a>
</div>
</div>
<div class="col-lg-3 col-6">
<div class="small-box bg-success">
{{-- <div class="inner">
<h3> {{ number_format(($convertedLeadsCount / $leadCount) * 100) }}<sup style="font-size: 20px">%</sup>
</h3>
<p>Conversion Rate {{ $convertedLeadsCount }}/{{ $leadCount }}</p>
</div> --}}
<div class="inner">
@if ($leadCount > 0)
<h3> {{ number_format(($finalLead / $leadCount) * 100) }}<sup
style="font-size: 20px">%</sup></h3>
@else
<h3>0<sup style="font-size: 20px">%</sup></h3>
@endif
<p>Conversion Rate {{ $finalLead }}/{{ $leadCount ?? 0 }}</p>
</div>
<div class="icon">
<i class="fas fa-user-tag"></i>
</div>
<a href="{{ route('leads.index') }}" class="small-box-footer">More info <i
class="fas fa-arrow-circle-right"></i></a>
</div>
</div>
{{--
<div class="col-lg-3 col-6">
<div class="small-box bg-warning">
<div class="inner">
<h3>{{ $projectCount }}</h3>
<p>Projects In Progress</p>
</div>
<div class="icon">
<i class="fas fa-circle-notch"></i>
</div>
<a href="{{ route('project.index') }}" class="small-box-footer">More info <i
class="fas fa-arrow-circle-right"></i></a>
</div>
</div> --}}
</div>
<div class="row">
<div class="col-md-8">
<div class="card card-dark">
<div class="card-header">
<h3 class="card-title">Reminders</h3>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-card-widget="collapse">
<i class="fas fa-minus"></i>
</button>
{{-- <button type="button" class="btn btn-tool" data-card-widget="remove">
<i class="fas fa-times"></i>
</button> --}}
</div>
</div>
<div class="card-body">
<table class="table table-bordered table-striped table-hover w-100">
<thead>
<tr>
<th>Reminder To</th>
<th>Created By</th>
<th>Description</th>
<th>Reminder Date</th>
</tr>
</thead>
<tbody>
@foreach ($reminders as $reminder)
<tr>
<td>{{ $reminder->user ? $reminder->user->first_name . ' ' . $reminder->user->last_name : '' }}</td>
<td>{{ $reminder->created_by_user ? $reminder->created_by_user->first_name . ' ' . $reminder->created_by_user->last_name : '' }}</td>
<td>{{ $reminder->description}}</td>
<td>{{ $reminder->reminder_date}}</td>
</tr>
@endforeach
{{-- <tr>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
</tr>
<tr>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
</tr>
<tr>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
</tr> --}}
</tbody>
</table>
{{-- <ul class="nav flex-column">
<li class="nav-item">
<a href="{{ route('reminder.index') }}" class="nav-link">
Leads <span class="float-right badge bg-primary">{{ $leadReminderCount }}</span>
</a>
</li>
<li class="nav-item">
<a href="{{ route('reminder.index') }}" class="nav-link">
Users <span class="float-right badge bg-info">{{ $userReminderCount }}</span>
</a>
</li>
<li class="nav-item">
<a href="{{ route('reminder.index') }}" class="nav-link">
Company <span class="float-right badge bg-success">{{ $companyReminderCount }}</span>
</a>
</li>
<li class="nav-item">
<a href="{{ route('reminder.index') }}" class="nav-link">
Projects <span class="float-right badge bg-danger">{{ $projectReminderCount }}</span>
</a>
</li>
</ul> --}}
</div>
<div class="card-footer">
<a href="{{ route('reminder.index') }}" class="float-right">View All <i
class="fas fa-arrow-circle-right"></i></a>
</div>
</div>
<div class="card card-dark">
<div class="card-header">
<h3 class="card-title">Tasks</h3>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-card-widget="collapse">
<i class="fas fa-minus"></i>
</button>
{{-- <button type="button" class="btn btn-tool" data-card-widget="remove">
<i class="fas fa-times"></i>
</button> --}}
</div>
</div>
<div class="card-body">
<ul class="nav flex-column">
<li class="nav-item">
<a href="{{ route('task.index') }}" class="nav-link">
Leads <span class="float-right badge bg-primary">{{ $leadTaskCount }}</span>
</a>
</li>
<li class="nav-item">
<a href="{{ route('task.index') }}" class="nav-link">
Users <span class="float-right badge bg-info">{{ $userTaskCount }}</span>
</a>
</li>
{{-- <li class="nav-item">
<a href="{{ route('task.index') }}" class="nav-link">
Company <span class="float-right badge bg-success">{{ $companyTaskCount }}</span>
</a>
</li>
<li class="nav-item">
<a href="{{ route('task.index') }}" class="nav-link">
Projects <span class="float-right badge bg-danger">{{ $projectTaskCount }}</span>
</a>
</li> --}}
</ul>
</div>
<div class="card-footer">
<a href="{{ route('task.index') }}" class="float-right">View All <i
class="fas fa-arrow-circle-right"></i></a>
</div>
</div>
{{-- <div class="card card-dark">
<div class="card-header">
<h3 class="card-title">To Do</h3>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-card-widget="collapse">
<i class="fas fa-minus"></i>
</button>
<button type="button" class="btn btn-tool" data-card-widget="remove">
<i class="fas fa-times"></i>
</button>
</div>
</div>
<div class="card-body">
<ul class="nav flex-column">
<li class="nav-item">
<a href="#" class="nav-link">
Projects
<div class="float-right">
<div class="form-group">
<div
class="custom-control custom-switch custom-switch-off-danger custom-switch-on-success">
<input type="checkbox" class="custom-control-input" id="customSwitch3">
<label class="custom-control-label" for="customSwitch3">Mark Done</label>
</div>
</div>
</div>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
Tasks
<div class="float-right">
<div class="form-group">
<div
class="custom-control custom-switch custom-switch-off-danger custom-switch-on-success">
<input type="checkbox" class="custom-control-input" id="customSwitch3">
<label class="custom-control-label" for="customSwitch3">Mark Done</label>
</div>
</div>
</div>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
Completed Projects
<div class="float-right">
<div class="form-group">
<div
class="custom-control custom-switch custom-switch-off-danger custom-switch-on-success">
<input type="checkbox" class="custom-control-input" id="customSwitch3">
<label class="custom-control-label" for="customSwitch3">Mark Done</label>
</div>
</div>
</div>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
Followers
<div class="float-right">
<div class="form-group">
<div
class="custom-control custom-switch custom-switch-off-danger custom-switch-on-success">
<input type="checkbox" class="custom-control-input" id="customSwitch3">
<label class="custom-control-label" for="customSwitch3">Mark Done</label>
</div>
</div>
</div>
</a>
</li>
</ul>
</div>
<div class="card-footer">
<a href="#" class="float-right">View All <i class="fas fa-arrow-circle-right"></i></a>
</div>
</div> --}}
{{-- <div class="card card-dark">
<div class="card-header">
<h3 class="card-title">Announcements</h3>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-card-widget="collapse">
<i class="fas fa-minus"></i>
</button>
<button type="button" class="btn btn-tool" data-card-widget="remove">
<i class="fas fa-times"></i>
</button>
</div>
</div>
<div class="card-body">
<ul class="nav flex-column">
<li class="nav-item">
<a href="{{ route('project.index') }}" class="nav-link">
Projects <span class="float-right badge bg-primary">{{ $projectCount }}</span>
</a>
</li>
<li class="nav-item">
<a href="{{ route('task.index') }}" class="nav-link">
Tasks <span class="float-right badge bg-success">{{ $taskCount }}</span>
</a>
</li>
<li class="nav-item">
<a href="{{ route('project.index') }}" class="nav-link">
Completed Projects <span class="float-right badge bg-success">{{ $projectCount }}</span>
</a>
</li>
</ul>
</div>
<div class="card-footer">
<a href="#" class="float-right">View All <i class="fas fa-arrow-circle-right"></i></a>
</div>
</div> --}}
</div>
<div class="col-md-4">
<div class="card card-dark">
<div class="card-header">
<h3 class="card-title">Leads Overview</h3>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-card-widget="collapse">
<i class="fas fa-minus"></i>
</button>
{{-- <button type="button" class="btn btn-tool" data-card-widget="remove">
<i class="fas fa-times"></i>
</button> --}}
</div>
</div>
<div class="card-body">
<div class="chartjs-size-monitor">
<div class="chartjs-size-monitor-expand">
<div class=""></div>
</div>
<div class="chartjs-size-monitor-shrink">
<div class=""></div>
</div>
</div>
<canvas id="pieChart"
style="min-height: 250px; height: 250px; max-height: 250px; max-width: 100%; display: block; width: 342px;"
width="427" height="312" class="chartjs-render-monitor"></canvas>
</div>
</div>
<div class="card card-dark">
<div class="card-header">
<h3 class="card-title">Latest Activity</h3>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-card-widget="collapse">
<i class="fas fa-minus"></i>
</button>
{{-- <button type="button" class="btn btn-tool" data-card-widget="remove">
<i class="fas fa-times"></i>
</button> --}}
</div>
</div>
<div class="card-body">
@include('users.partials.activity-timeline')
</div>
</div>
</div>
</div>
@stop
@section('css')
{{-- Add here extra stylesheets --}}
{{-- <link rel="stylesheet" href="/css/admin_custom.css"> --}}
@stop
@section('js')
<script>
console.log("Hi, I'm using the Laravel-AdminLTE package!");
</script>
@stop
@push('js')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
$(function() {
// Prepare data
var data = {
labels: ["New Leads", "Hot Leads", "Cold Leads", "Converted Leads"],
datasets: [{
// data: [12, 44, 80, 30],
data: [{{ $newLeadCount }}, {{ $hotLeadCount }}, {{ $coldLeadCount }},
{{ $convertedLeadsCount }},
],
backgroundColor: ["#36A2EB", "#dc3545", "#adb5bd", "#008000"],
hoverBackgroundColor: ["#36A2EB", "#dc3545", "#adb5bd", "#008000"]
}]
};
// Get context with jQuery - using jQuery's .get() method.
var pieChartCanvas = $("#pieChart").get(0).getContext("2d");
// Create the pie chart
var pieChart = new Chart(pieChartCanvas, {
type: 'pie',
data: data
});
});
</script>
@endpush