%PDF-
%PDF-
Mini Shell
Mini Shell
<template>
<div class="container-fluid">
<div class="row">
<div class="col">
<h3 class="user"> {{greet}}, {{users.name}}</h3>
</div>
</div>
<div class="row">
<div class="col">
<div class="card border-left-primary h-100 py-2">
<div class="card-body">
<div class="text-xs font-weight-bold text-primary text-uppercase mb-1">Available Properties</div>
<div class="h5 mb-0 font-weight-bold text-gray-800">{{totalcount['total']}}</div>
</div>
</div>
</div>
<div class="col">
<div class="card border-left-primary h-100 py-2">
<div class="card-body">
<div class="text-xs font-weight-bold text-primary text-uppercase mb-1">Wanted Enquires</div>
<div class="h5 mb-0 font-weight-bold text-gray-800">{{totalcount['wanted']}}</div>
</div>
</div>
</div>
<div class="col">
<div class="card border-left-primary h-100 py-2">
<div class="card-body">
<div class="text-xs font-weight-bold text-primary text-uppercase mb-1">Quote Pending</div>
<div class="h5 mb-0 font-weight-bold text-gray-800">12</div>
</div>
</div>
</div>
<div class="col">
<div class="card border-left-primary h-100 py-2">
<div class="card-body">
<div class="text-xs font-weight-bold text-primary text-uppercase mb-1">Tasks Due Today</div>
<div class="h5 mb-0 font-weight-bold text-gray-800">{{tasks.length}}</div>
</div>
</div>
</div>
</div>
<br>
<div class="row">
<div class="col-md-6">
<div class="card tasks">
<div class="card-body">
<h4>Latest Leads</h4>
<div class="table-responsive table-card">
<table class="table table-nowrap table-centered align-middle">
<thead class="bg-light text-muted">
<tr>
<th scope="col">Client Name</th>
<th scope="col">Status</th>
<th scope="col" style="width: 25%;">Created Date</th>
</tr><!-- end tr -->
</thead><!-- thead -->
<tbody>
<tr v-for="lead in leads" :key="lead.id">
<td class="fw-medium"><router-link class="lead-name" v-bind:to="'/viewlead/'+lead.leadid"> {{lead.name}}</router-link></td>
<td><span class="status-style" v-bind:style="{ backgroundColor: lead.color }">{{lead.status_name}}</span></td>
<td class="text-muted">{{lead.created_at|fdate}}</td>
</tr><!-- end tr -->
</tbody><!-- end tbody -->
</table><!-- end table -->
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card tasks">
<div class="card-body">
<h2>Site Visits Today</h2>
<ul class="task-list">
<li v-for="visit in visits" :key="visit.id">{{visit.title}}</li>
</ul>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card card-body">
<h3>Property Addition Pending</h3>
{{pendingproperty}}
</div>
<maintenance_line_sales/>
</div>
</div>
</div>
</template>
<script>
import maintenance_line_sales from './maintenance_line_sales'
import ExampleComponent from './ExampleComponent'
export default {
mounted() {
console.log('Component mounted.')
},
components: {
maintenance_line_sales,
ExampleComponent
},
data(){
return {
users:[],
searchQuery:'',
isTyping: false,
isLoading: false,
totalcount:[],
tasks:[],
leads:[],
sitevisits:[],
visits:[],
pendingproperty:'',
greet:''
}
},
watch: {
searchQuery: _.debounce(function() {
this.isTyping = false;
}, 1000),
isTyping: function(value) {
if (!value) {
this.searchUser(this.searchQuery);
}
}
},
methods:{
searchUser: function(searchQuery) {
this.isLoading = true;
axios.get('leads/searchquery?q=' + searchQuery)
.then(response => {
this.isLoading = false;
this.users = response.data;
});
},
getResults(page = 1) {
axios.get('leads?page=' + page)
.then(response => {
this.users = response.data;
});
},
loadusers(){
axios.get('/dashboard').then(({data})=> (this.users = data));
},
getcount(){
axios.get('/dashboard/totalcount').then(({data})=> (this.totalcount = data));
},
getPosts: function() {
axios.get('/leads').then(function(response){
this.rows = response.data;
}.bind(this));
},
loadtasks(){
axios.get('/dashboard/tasks/') .then(response => {
this.tasks = response.data
})
},
loadproperty(){
axios.get('/dashboard/propertyAddition') .then(response => {
this.pendingproperty = response.data
})
},
loadsitevisits(){
axios.get('/dashboard/sitevisits') .then(response => {
this.sitevisits = response.data
})
}, loadlatestleads(){
axios.get('/dashboard/latestleads') .then(response => {
this.leads = response.data
})
},
loadsitevisitstoday(){
axios.get('/dashboard/sitevisitstoday') .then(response => {
this.visits = response.data
})
},
loadgreeting(){
var myDate = new Date();
var hrs = myDate.getHours();
if (hrs < 12)
this.greet = 'Good Morning';
else if (hrs >= 12 && hrs <= 17)
this.greet = 'Good Afternoon';
else if (hrs >= 17 && hrs <= 24)
this.greet = 'Good Evening';
}
},
created: function(){
this.loadusers(),
this.loadgreeting(),
this.loadlatestleads(),
this.getcount(),
this.loadtasks(),
this.loadsitevisits(),
this.loadsitevisitstoday(),
this.loadproperty()
},
}
</script>
<style scoped>
.user{
font-size: 1.25rem;
font-weight: bold;
font-family: roboto;
}
.task-list{
list-style: none;
padding: 0;
}
.list-item{
display: flex;
margin: 10px;
padding-bottom: 5px;
padding-top: 5px;
border-bottom: 1px solid rgba(0, 0, 0, 0.1)
}
.list-item-content {
margin-left: 20px;
}
li:before {
content: "• ";
color: rgb(192, 26, 62);
padding: 5px;
}
li:before {
content: "\f111"; /* FontAwesome Unicode */
font-family: FontAwesome;
display: inline-block;
margin-left: -1.3em; /* same as padding-left set on li */
width: 1.3em; /* same as padding-left set on li */
}
.tasks h2{
display: block;
font-size: 15px;
font-weight: bold;
color: #a4a2a2;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
padding-bottom: 15px;
}
</style>
Zerion Mini Shell 1.0