Fanrouver
147 lines
3.3 KiB
Vue
147 lines
3.3 KiB
Vue
<template>
|
|
<div class="stats-footer-modern mt-3">
|
|
<v-row dense>
|
|
<v-col cols="4">
|
|
<div class="stat-card-modern">
|
|
<div class="stat-icon-modern">
|
|
<v-icon :color="primaryColor" size="20">mdi-clock-outline</v-icon>
|
|
</div>
|
|
<div class="stat-value">{{ todayCount }}</div>
|
|
<div class="stat-label">Hari Ini</div>
|
|
</div>
|
|
</v-col>
|
|
<v-col cols="4">
|
|
<div class="stat-card-modern">
|
|
<div class="stat-icon-modern">
|
|
<v-icon color="success" size="20">mdi-check-circle</v-icon>
|
|
</div>
|
|
<div class="stat-value">{{ completedCount }}</div>
|
|
<div class="stat-label">Selesai</div>
|
|
</div>
|
|
</v-col>
|
|
<v-col cols="4">
|
|
<div class="stat-card-modern">
|
|
<div class="stat-icon-modern">
|
|
<v-icon :color="secondaryColor" size="20">mdi-account-group</v-icon>
|
|
</div>
|
|
<div class="stat-value">{{ pendingCount }}</div>
|
|
<div class="stat-label">Menunggu</div>
|
|
</div>
|
|
</v-col>
|
|
</v-row>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed } from 'vue'
|
|
import type { CheckInHistoryItem } from '~/types/checkin'
|
|
import { PRIMARY_COLOR, SECONDARY_COLOR } from '~/constants/checkin'
|
|
|
|
interface Props {
|
|
history: CheckInHistoryItem[]
|
|
primaryColor?: string
|
|
secondaryColor?: string
|
|
}
|
|
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
primaryColor: PRIMARY_COLOR,
|
|
secondaryColor: SECONDARY_COLOR,
|
|
})
|
|
|
|
// Computed untuk menghitung stats
|
|
const todayCount = computed(() => {
|
|
const today = new Date().toDateString()
|
|
return props.history.filter(item => {
|
|
const itemDate = new Date(item.checkInDate).toDateString()
|
|
return itemDate === today
|
|
}).length
|
|
})
|
|
|
|
const completedCount = computed(() => {
|
|
return props.history.filter(item =>
|
|
item.status === 'success' || item.status === 'ALLOWED'
|
|
).length
|
|
})
|
|
|
|
const pendingCount = computed(() => {
|
|
return props.history.filter(item =>
|
|
item.status === 'pending' || item.status === 'NOT_ALLOWED'
|
|
).length
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
/* Stats Footer Modern */
|
|
.stats-footer-modern {
|
|
animation: slideUp 0.5s ease-out 0.3s both;
|
|
}
|
|
|
|
@keyframes slideUp {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(10px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
.stat-card-modern {
|
|
background: white;
|
|
border-radius: 12px;
|
|
padding: 16px 12px;
|
|
text-align: center;
|
|
border: 1px solid #e5e7eb;
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.stat-card-modern::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 3px;
|
|
background: linear-gradient(90deg, #1565C0 0%, #0D47A1 100%);
|
|
transform: scaleX(0);
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
.stat-card-modern:hover {
|
|
transform: translateY(-4px);
|
|
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
|
|
border-color: #1565C0;
|
|
}
|
|
|
|
.stat-card-modern:hover::before {
|
|
transform: scaleX(1);
|
|
}
|
|
|
|
.stat-icon-modern {
|
|
margin-bottom: 12px;
|
|
display: inline-flex;
|
|
padding: 8px;
|
|
background: #e3f2fd;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.stat-value {
|
|
font-size: 20px;
|
|
font-weight: 700;
|
|
color: #1a1a1a;
|
|
margin-bottom: 4px;
|
|
letter-spacing: -0.5px;
|
|
}
|
|
|
|
.stat-label {
|
|
font-size: 11px;
|
|
color: #6b7280;
|
|
font-weight: 500;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
</style>
|