299 lines
8.6 KiB
Vue
Executable File
299 lines
8.6 KiB
Vue
Executable File
<template>
|
|
<div class="flex">
|
|
<div class="w-full px-4 md:px-10 ">
|
|
<!-- Breadcrumbs & Welcome Header -->
|
|
<div class="text-sm breadcrumbs">
|
|
<ul>
|
|
<li><router-link :to="{ name: 'home' }">Home</router-link></li>
|
|
</ul>
|
|
</div>
|
|
<h1 class="text-3xl font-bold mt-4">
|
|
Welcome, {{ employee.employee_first_name }}!
|
|
</h1>
|
|
|
|
<!-- Main Dashboard Grid -->
|
|
<div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-6 my-6">
|
|
|
|
<!-- Card 1: Today's Stats -->
|
|
<div class="bg-neutral rounded-lg p-5 xl:col-span-2">
|
|
<h3 class="text-xl font-bold mb-4">Today's Stats</h3>
|
|
<div class="space-y-4">
|
|
<div>
|
|
<span class="font-semibold">Total Deliveries Today:</span>
|
|
<span class="text-lg ml-2">{{ delivery_count }}</span>
|
|
</div>
|
|
<div>
|
|
<div class="flex justify-between text-sm mb-1">
|
|
<span>Completed</span>
|
|
<span>{{ delivery_count_delivered }} / {{ delivery_count }}</span>
|
|
</div>
|
|
<progress class="progress progress-primary w-full" :value="delivery_count_delivered" :max="delivery_count"></progress>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Card 2: Today's Oil Price -->
|
|
<div class="bg-neutral rounded-lg p-5">
|
|
<h3 class="text-xl font-bold mb-4">Today's Oil Price</h3>
|
|
<div class="space-y-2">
|
|
<div class="flex justify-between">
|
|
<span>Price / Gallon:</span>
|
|
<span class="font-mono">${{ today_oil_price }}</span>
|
|
</div>
|
|
<div class="flex justify-between">
|
|
<span>Same Day Fee:</span>
|
|
<span class="font-mono">${{ price_same_day }}</span>
|
|
</div>
|
|
<div class="flex justify-between">
|
|
<span>Prime Fee:</span>
|
|
<span class="font-mono">${{ price_prime }}</span>
|
|
</div>
|
|
<div class="flex justify-between">
|
|
<span>Emergency Fee:</span>
|
|
<span class="font-mono">${{ price_emergency }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Card 2: Today's Oil Price -->
|
|
<div class="bg-neutral rounded-lg p-5">
|
|
<h3 class="text-xl font-bold mb-4">Service Price</h3>
|
|
<div class="space-y-2">
|
|
<div class="flex justify-between">
|
|
<span>Price / Hour:</span>
|
|
<span class="font-mono">$125</span>
|
|
</div>
|
|
<div class="flex justify-between">
|
|
<span>Price / Emergency:</span>
|
|
<span class="font-mono">$200</span>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<!-- Card 4: This Week's Stats -->
|
|
<div class="bg-neutral rounded-lg p-5 xl:col-span-4">
|
|
<h3 class="text-xl font-bold mb-4">This Week's Stats</h3>
|
|
<div class="stats stats-vertical lg:stats-horizontal shadow bg-base-100 w-full">
|
|
<div class="stat">
|
|
<div class="stat-title">Total Deliveries</div>
|
|
<div class="stat-value">{{ total_deliveries }}</div>
|
|
<div class="stat-desc">In the last 7 days</div>
|
|
</div>
|
|
<div class="stat">
|
|
<div class="stat-title">Total Gallons</div>
|
|
<div class="stat-value">{{ total_gallons_past_week }}</div>
|
|
<div class="stat-desc">Delivered this week</div>
|
|
</div>
|
|
<div class="stat">
|
|
<div class="stat-title">Total Profit</div>
|
|
<div class="stat-value text-success">${{ total_profit_past_week }}</div>
|
|
<div class="stat-desc">Estimated earnings</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<Footer />
|
|
</template>
|
|
<script lang="ts">
|
|
import { defineComponent } from 'vue'
|
|
import axios from 'axios'
|
|
import authHeader from '../services/auth.header'
|
|
import Header from '../layouts/headers/headerauth.vue'
|
|
import SideBar from '../layouts/sidebar/sidebar.vue'
|
|
import Footer from '../layouts/footers/footer.vue'
|
|
|
|
export default defineComponent({
|
|
name: 'Home',
|
|
|
|
components: {
|
|
Header,
|
|
SideBar,
|
|
Footer,
|
|
},
|
|
props: {
|
|
clickCount: Number
|
|
},
|
|
data() {
|
|
return {
|
|
token: null,
|
|
call_count:0,
|
|
delivery_count: 0,
|
|
delivery_count_delivered: 0,
|
|
price_from_supplier: 0,
|
|
today_oil_price: 0,
|
|
price_for_employee: 0,
|
|
price_same_day: 0,
|
|
price_prime: 0,
|
|
price_emergency: 0,
|
|
user: {
|
|
user_id: 0,
|
|
user_name: '',
|
|
},
|
|
employee: {
|
|
id: '',
|
|
user_id: '',
|
|
employee_last_name: "",
|
|
employee_first_name: "",
|
|
employee_town: "",
|
|
employee_address: "",
|
|
employee_apt: "",
|
|
employee_zip: "",
|
|
employee_birthday: "",
|
|
employee_phone_number: "",
|
|
employee_start_date: "",
|
|
employee_end_date: "",
|
|
employee_type: '',
|
|
employee_state: '',
|
|
},
|
|
total_gallons_past_week: 0,
|
|
total_profit_past_week: 0,
|
|
total_deliveries: 0,
|
|
|
|
|
|
loaded: false,
|
|
|
|
}
|
|
},
|
|
|
|
created() {
|
|
this.userStatus()
|
|
this.today_delivery_count()
|
|
this.today_delivery_delivered()
|
|
this.today_price_oil()
|
|
this.totalgallonsweek()
|
|
this.totalprofitweek()
|
|
|
|
|
|
|
|
},
|
|
methods: {
|
|
userStatus() {
|
|
let path = import.meta.env.VITE_BASE_URL + '/auth/whoami';
|
|
axios({
|
|
method: "get",
|
|
url: path,
|
|
withCredentials: true,
|
|
headers: authHeader(),
|
|
})
|
|
.then((response: any) => {
|
|
if (response.data.ok) {
|
|
this.user = response.data.user;
|
|
this.employeeStatus()
|
|
} else {
|
|
|
|
localStorage.removeItem('user');
|
|
this.$router.push('/login');
|
|
}
|
|
})
|
|
|
|
},
|
|
|
|
totalgallonsweek() {
|
|
let path = import.meta.env.VITE_BASE_URL + '/stats/gallons/week';
|
|
axios({
|
|
method: "get",
|
|
url: path,
|
|
withCredentials: true,
|
|
headers: authHeader(),
|
|
})
|
|
.then((response: any) => {
|
|
this.total_gallons_past_week = response.data.total;
|
|
|
|
})
|
|
},
|
|
totalprofitweek() {
|
|
let path = import.meta.env.VITE_BASE_URL + '/money/profit/week';
|
|
axios({
|
|
method: "get",
|
|
url: path,
|
|
withCredentials: true,
|
|
headers: authHeader(),
|
|
})
|
|
.then((response: any) => {
|
|
this.total_profit_past_week = response.data.total_profit;
|
|
this.total_deliveries = response.data.total_deliveries;
|
|
|
|
})
|
|
},
|
|
employeeStatus() {
|
|
let path = import.meta.env.VITE_BASE_URL + '/employee/userid/' + this.user.user_id;
|
|
axios({
|
|
method: "get",
|
|
url: path,
|
|
withCredentials: true,
|
|
headers: authHeader(),
|
|
})
|
|
.then((response: any) => {
|
|
this.employee = response.data;
|
|
this.loaded = true;
|
|
|
|
})
|
|
},
|
|
total_calls() {
|
|
let path = import.meta.env.VITE_BASE_URL + '/stats/call/count/today'
|
|
axios({
|
|
method: "get",
|
|
url: path,
|
|
withCredentials: true,
|
|
headers: authHeader(),
|
|
})
|
|
.then((response: any) => {
|
|
this.call_count = response.data.data;
|
|
})
|
|
},
|
|
today_delivery_count() {
|
|
let path = import.meta.env.VITE_BASE_URL + '/stats/delivery/count/today'
|
|
axios({
|
|
method: "get",
|
|
url: path,
|
|
withCredentials: true,
|
|
headers: authHeader(),
|
|
})
|
|
.then((response: any) => {
|
|
this.delivery_count = response.data.data;
|
|
})
|
|
},
|
|
today_delivery_delivered() {
|
|
let path = import.meta.env.VITE_BASE_URL + '/stats/delivery/count/delivered/today'
|
|
axios({
|
|
method: "get",
|
|
url: path,
|
|
withCredentials: true,
|
|
headers: authHeader(),
|
|
})
|
|
.then((response: any) => {
|
|
console.log(response.data)
|
|
this.delivery_count_delivered = response.data.data;
|
|
})
|
|
},
|
|
today_price_oil() {
|
|
let path = import.meta.env.VITE_BASE_URL + '/info/price/oil'
|
|
axios({
|
|
method: "get",
|
|
url: path,
|
|
withCredentials: true,
|
|
headers: authHeader(),
|
|
})
|
|
.then((response: any) => {
|
|
this.price_from_supplier = response.data.price_from_supplier;
|
|
this.today_oil_price = response.data.price_for_customer;
|
|
this.price_for_employee = response.data.price_for_employee;
|
|
this.price_same_day = response.data.price_same_day;
|
|
this.price_prime = response.data.price_prime;
|
|
this.price_emergency = response.data.price_emergency;
|
|
})
|
|
},
|
|
|
|
},
|
|
})
|
|
</script>
|
|
|
|
<style scoped></style>
|
|
<script setup lang="ts">
|
|
</script> |