<template>
    <v-timeline side="end" align="start">
        <v-timeline-item
            dot-color="white"
            :fill-dot="true"
            icon="mdi-check-circle"
            icon-color="primary"
            size="small"
        >
            <div style="min-width: 600px; max-width: 750px;">
                <v-row>
                    <v-col cols="7" align="start">
                        <h4 class="font-weight-medium">Pembuatan barcode oleh system</h4>
                    </v-col>
                    <v-col cols="5" align="end">
                        <h4 class="font-weight-medium">21-08-2024 16:53</h4>
                    </v-col>
                </v-row>
                <div class="bg-primary-lighten rounded-lg pa-2 my-2">
                    <v-row>
                        <v-col cols="4">
                            <h4>Serum Kuning</h4>
                        </v-col>
                        <v-col cols="8" align="end">
                            <p class="font-weight-regular rounded-lg bg-grey-lighten-2 px-2" style="display: inline-block; font-size: 12px;">05600027LSK</p>
                        </v-col>
                    </v-row>
                </div>
            </div>
        </v-timeline-item>
        <v-timeline-item
            dot-color="white"
            :fill-dot="true"
            icon="mdi-check-circle"
            icon-color="primary"
            size="small"
        >
            <div style="min-width: 600px; max-width: 750px;">
                <v-row>
                    <v-col cols="7" align="start">
                        <h4 class="font-weight-medium">Proses oleh admin</h4>
                    </v-col>
                    <v-col cols="5" align="end">
                        <h4 class="font-weight-medium">21-08-2024 20:53</h4>
                    </v-col>
                </v-row>
                <div class="bg-secondary-lighten rounded-lg pa-2 my-2">
                    <v-row>
                        <v-col cols="4">
                            <h4>Serum Kuning</h4>
                        </v-col>
                        <v-col cols="8" align="end">
                            <p class="font-weight-regular rounded-lg bg-grey-lighten-2 px-2" style="display: inline-block; font-size: 12px;">05600027LSK</p>
                        </v-col>
                    </v-row>
                </div>
            </div>
        </v-timeline-item>
        <v-timeline-item
            dot-color="white"
            :fill-dot="true"
            icon="mdi-check-circle"
            icon-color="primary"
            size="small"
        >
            <div style="min-width: 600px; max-width: 750px;">
                <v-row>
                    <v-col cols="7" align="start">
                        <h4 class="font-weight-medium">Pengambilan sample</h4>
                    </v-col>
                    <v-col cols="5" align="end">
                        <h4 class="font-weight-medium">21-08-2024 21:53</h4>
                    </v-col>
                </v-row>
                <div class="bg-success-lighten rounded-lg pa-2 my-2">
                    <v-row>
                        <v-col cols="4">
                            <h4>Serum Kuning</h4>
                        </v-col>
                        <v-col cols="8" align="end">
                            <p class="font-weight-regular rounded-lg bg-grey-lighten-2 px-2" style="display: inline-block; font-size: 12px;">05600027LSK</p>
                        </v-col>
                    </v-row>
                </div>
            </div>
        </v-timeline-item>
    </v-timeline>
</template>

<script>
    export default {
        name: "samplecolldialog",
        components: {},
        mounted() {},
        data() {
            return {};
        },
        computed: {},
    }
</script>