web-antrean/components/MonitorPasien/ticketCard.vue

<template>
    <v-card 
        class="pa-4 rounded-lg elevation-2 d-flex flex-column ticket-card" 
        color="white" 
        style="border-top: 8px solid #FFB95F;" 
        height="100%" 
    >
        <div class="d-flex align-center justify-center mb-4">
            <v-icon size="36" color="orange-lighten-2" class="mr-2">mdi-hospital-box-outline</v-icon>
            <div class="text-h6 font-weight-bold text-orange-lighten-2">{{ title }}</div>
        </div>

        <v-divider class="mb-4"></v-divider>
        
        <div class="timeline-scroll-container flex-grow-1"> 
            <v-timeline density="compact" align="start" line-inset="12" line-color="#FFB95F">
                <v-timeline-item
                    v-for="(step, index) in steps"
                    :key="index"
                    :dot-color="getStepColor(index)"
                    :icon="getStepIcon(index)"
                    size="small"
                    icon-color="white" 
                >
                    <div class="d-flex flex-column align-start">
                        <span 
                            class="font-weight-bold" 
                            :class="index === currentStepIndex ? 'text-orange-lighten-1' : index < currentStepIndex ? 'text-success' : 'text-grey-darken-1'"
                        >
                            {{ step.label }}
                        </span>
                        <span class="text-caption text-grey-darken-1">
                            {{ step.date !== '-' ? `${step.date}, ${step.time}` : 'Menunggu' }}
                        </span>
                    </div>
                </v-timeline-item>
            </v-timeline>
        </div>
        
        <v-divider class="mt-4 mb-4"></v-divider>

        <v-btn 
            size="large" 
            variant="tonal" 
            color="#FFA532" 
            class="mt-auto font-weight-bold reprint-button" 
            prepend-icon="mdi-printer"
            block
        >
            Cetak Ulang Tiket
        </v-btn>
    </v-card>
</template>

<script setup>
import { computed } from 'vue';

const props = defineProps({
    title: String,
    steps: Array,
    color: String, 
    currentStepLabel: String, 
});

const currentStepIndex = computed(() => {
    return props.steps.findIndex(step => step.label === props.currentStepLabel);
});

const getStepIcon = (index) => {
    if (index < currentStepIndex.value) {
        return 'mdi-check'; 
    } else if (index === currentStepIndex.value) {
        return 'mdi-progress-check'; 
    } else {
        return 'mdi-circle-outline'; 
    }
};

const getStepColor = (index) => {
    if (index < currentStepIndex.value) {
        return 'success'; 
    } else if (index === currentStepIndex.value) {
        return 'orange-lighten-1'; 
    }
    return 'grey-lighten-1'; 
};
</script>

<style scoped>
/* =============================================== */
/* SCROLLABLE TIMELINE STYLES (Menggunakan Tinggi Tetap) */
/* =============================================== */
.timeline-scroll-container {
    /* Flex grow untuk mengisi ruang yang tersedia */
    flex: 1 1 auto;
    min-height: 200px;
    max-height: 400px;
    
    /* Membuat konten scrollable di sumbu Y jika melebihi height */
    overflow-y: auto;
    
    /* Memberi jarak internal di bagian scrollable */
    padding-right: 8px; 
}

/* PENTING: Menghilangkan padding bawah dari V-Timeline bawaan */
.v-timeline {
    padding-bottom: 0 !important; 
    margin-bottom: 0 !important;
}

/* Kustomisasi scrollbar untuk tampilan yang lebih bersih (Opsional) */
.timeline-scroll-container::-webkit-scrollbar {
    width: 6px;
}

.timeline-scroll-container::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
}

/* =============================================== */
/* V-TIMELINE KUSTOMISASI */
/* =============================================== */
.v-timeline-item :deep(.v-timeline-item__body) {
    padding-inline-start: 16px !important;
}

.v-timeline-item :deep(.v-timeline-item__opposite) {
    display: none;
}

/* =============================================== */
/* TICKET CARD - FIXED HEIGHT */
/* =============================================== */
.ticket-card {
    min-height: 550px !important;
    display: flex !important;
    flex-direction: column !important;
}

/* =============================================== */
/* REPRINT BUTTON - FIXED SIZE */
/* =============================================== */
.reprint-button {
    min-height: 48px !important;
    height: 48px !important;
    max-height: 48px !important;
    font-size: 14px !important;
    letter-spacing: 0.5px;
    flex-shrink: 0 !important;
    margin-top: auto !important;
}
</style>