109 lines
3.0 KiB
Vue
109 lines
3.0 KiB
Vue
<template>
|
|
<div class="pos-today-stats mb-4">
|
|
<div class="d-flex align-items-center justify-content-between mb-3 mt-1">
|
|
<div class="d-flex align-items-center">
|
|
<div class="icon-avatar me-3 shadow-sm">
|
|
<i class="fas fa-chart-line text-primary"></i>
|
|
</div>
|
|
<div>
|
|
<h5 class="fw_7 mb-0">Today's Performance</h5>
|
|
<span class="text-muted small">Daily sales summary</span>
|
|
</div>
|
|
</div>
|
|
<div v-if="!loading" class="date-badge px-3 py-1 text-primary small fw_6 rounded-pill border">
|
|
Today
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="loading" class="text-center py-4 glass-card p-3 p-md-4 rounded-xl">
|
|
<div class="spinner-border text-primary spinner-border-sm" role="status">
|
|
<span class="sr-only">Loading...</span>
|
|
</div>
|
|
<p class="small text-muted mt-2 mb-0">Fetching stats...</p>
|
|
</div>
|
|
|
|
<div v-else class="glass-card p-3 p-md-4 rounded-xl">
|
|
<div class="row text-center mt-2">
|
|
<div class="col-6 border-right">
|
|
<p class="small text-muted mb-1 text-uppercase ls_1">Transactions</p>
|
|
<h3 class="mb-0 fw_7">{{ todayStats.count || 0 }}</h3>
|
|
</div>
|
|
<div class="col-6">
|
|
<p class="small text-muted mb-1 text-uppercase ls_1">Total Sales</p>
|
|
<h3 class="mb-0 fw_7">₱{{ formatAmount(todayStats.total) }}</h3>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="!loading && todayStats.store_name" class="mt-3 text-center border-top-dashed pt-3">
|
|
<p class="small text-muted italic mb-0">
|
|
Terminal: <span class="fw_6 text-primary">{{ todayStats.store_name }}</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { computed } from 'vue'
|
|
import { usePosStore } from '../../stores/pos'
|
|
|
|
const props = defineProps({
|
|
loading: { type: Boolean, default: false }
|
|
})
|
|
|
|
const posStore = usePosStore()
|
|
const todayStats = computed(() => posStore.todayStats)
|
|
|
|
const formatAmount = (val) => {
|
|
if (!val) return '0.00'
|
|
return parseFloat(val).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.pos-today-stats {
|
|
transition: all 0.3s ease;
|
|
}
|
|
.ls_1 {
|
|
letter-spacing: 1px;
|
|
}
|
|
.border-right {
|
|
border-right: 1px solid var(--border-color);
|
|
}
|
|
.border-top-dashed {
|
|
border-top: 1px dashed var(--border-color);
|
|
}
|
|
.icon-avatar {
|
|
width: 44px;
|
|
height: 44px;
|
|
background: white;
|
|
border-radius: 12px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 1.1rem;
|
|
}
|
|
.date-badge {
|
|
background: rgba(var(--primary-rgb), 0.05) !important;
|
|
}
|
|
|
|
.rounded-xl {
|
|
border-radius: 20px !important;
|
|
}
|
|
|
|
:global(.dark-mode) .icon-avatar {
|
|
background: #2d3138;
|
|
}
|
|
|
|
:global(.dark-mode) .icon-avatar i {
|
|
color: #10b981 !important;
|
|
}
|
|
:global(.dark-mode) .date-badge {
|
|
background: rgba(16, 185, 129, 0.1) !important;
|
|
color: #10b981 !important;
|
|
}
|
|
:global(.dark-mode) .text-primary {
|
|
color: #10b981 !important;
|
|
}
|
|
</style>
|