``` vue
<script setup>
import ChartJsBarChart from "@/views/charts/chartjs/ChartJsBarChart.vue";
import ChartJsBubbleChart from "@/views/charts/chartjs/ChartJsBubbleChart.vue";
import ChartJsLineChart from "@/views/charts/chartjs/ChartJsLineChart.vue";
import ChartJsPieChart from "@/views/charts/chartjs/ChartJsPieChart.vue";
import ChartJsDouhnutChart from "@/views/charts/chartjs/ChartJsDouhnutChart.vue";
import ChartJsLineAreaChart from "@/views/charts/chartjs/ChartJsLineAreaChart.vue";

import TotalUserCard from "./TotalUserCard.vue";
import ActiveUserCard from "./ActiveUserCard.vue";
import SubNoSubCard from "./SubNoSubCard.vue";
import CarnivalsCard from "./CarnivalsCard.vue";
import TicketCard from "./TicketCard.vue";
import LineChatCard from "./LineChatCard.vue";
import HorizontalBarChatCard from "./HorizontalBarChatCard.vue";
import PieChartCard from "./PieChartCard.vue";
import TransactionOrgCard from "./TransactionOrgCard.vue";
import { defineProps } from "vue";
import axios from "axios";

const chartJsCustomColors = {
    white: "#fff",
    yellow: "#ffe802",
    primary: "#836af9",
    areaChartBlue: "#2c9aff",
    barChartYellow: "#ffcf5c",
    polarChartGrey: "#4f5d70",
    polarChartInfo: "#299aff",
    lineChartYellow: "#d4e157",
    polarChartGreen: "#28dac6",
    lineChartPrimary: "#9e69fd",
    lineChartWarning: "#ff9800",
    horizontalBarInfo: "#26c6da",
    polarChartWarning: "#ff8131",
    scatterChartGreen: "#28c76f",
    warningShade: "#ffbd1f",
    areaChartBlueLight: "#84d0ff",
    areaChartGreyLight: "#edf1f4",
    scatterChartWarning: "#ff9f43",
};
let props = defineProps(["data"]);

// Get tickets
let tickets;
const fetchLatestTickets = async () => {
    try {
        const response = await axios.get('/api/v1/three-tickets', {
        });

        tickets = response.data;

        console.log(tickets);
    } catch (error) {
        console.error('Error fetching tickets:', error);
    }
};

onMounted(() => {
    fetchLatestTickets();
});

const goToTicket = () => {
    console.log("HI");
}

const goToInsights = () => {
    console.log("HI");
}

</script>
<template>
    <v-container fill-height p-0 fluid>
        <div class="title">Dashboard</div>
        <v-row>
            <v-col cols="12" md="6">
                <v-row>
                    <v-col cols="12">
                        <div @click="goToInsights" class="w-100 d-flex justify-space-between">
                            <p style="margin: 0">Insights</p>
                            <img src="/images/right-arrow.svg" />
                        </div>
                    </v-col>
                    <v-col cols="6" class="d-flex w-100">
                        <TotalUserCard :b2b_users="data.total_b2b_users" :b2c_users="data.total_b2c_users" />
                    </v-col>
                    <v-col cols="6" class="d-flex w-100">
                        <ActiveUserCard :active_users="data.total_active_users" />
                    </v-col>
                    <v-col cols="12"></v-col>
                    <v-col cols="6" class="d-flex w-100">
                        <SubNoSubCard :sub_b2b_licenses="data.total_sub_b2b_licenses"
                            :sub_b2c_licenses="data.total_sub_b2c_licenses"
                            :no_sub_licenses="data.total_no_sub_licenses" />
                    </v-col>
                    <v-col cols="6" class="d-flex w-100">
                        <CarnivalsCard :carnivals="data.up_coming_carnivals" :dates="data.up_coming_carnivals_dates" />
                    </v-col>
                </v-row>
            </v-col>


            <v-col cols="12" md="6" v-if="tickets">
                <v-row>
                    <v-col cols="12">
                        <div @click="goToTicket" class="w-100 d-flex justify-space-between">
                            <p style="margin: 0;">Tickets</p>
                            <img src="/images/right-arrow.svg" />
                        </div>
                    </v-col>
                    <v-col cols="12" md="6">
                        <div class="d-flex w-100 flex-column gap-4">
                            <TicketCard v-for="(ticket, index) in tickets" :key="index" :value="ticket"
                                :data="ticket" />
                        </div>
                    </v-col>
                </v-row>
            </v-col>
            <!-- <v-col cols="12" sm="6" md="6" class="d-flex w-100">
                <LineChatCard :data="data" :colors="chartJsCustomColors" />
            </v-col>
            <v-col cols="12" sm="6" md="6" class="d-flex w-100">
                <HorizontalBarChatCard :colors="chartJsCustomColors" :wishlist_items="data.top_wishist_items" />
            </v-col>
            <v-col cols="12" sm="6" md="6" class="d-flex w-100">
                <PieChartCard :colors="chartJsCustomColors" :data="data" />
            </v-col>
            <v-col cols="12" sm="6" md="6" class="d-flex w-100">
                <TransactionOrgCard :colors="chartJsCustomColors" :top_transactions="data.total_top_transaction" />
            </v-col> -->
        </v-row>
        <v-row>
            <v-col cols="12" md="6">
                <v-row>
                    <v-col cols="12">
                        <p>B2B</p>
                    </v-col>
                </v-row>
            </v-col>

            <v-col cols="12" md="6">
                <v-row>
                    <v-col cols="12">
                        <p>B2C</p>
                    </v-col>
                </v-row>
            </v-col>
        </v-row>
    </v-container>
</template>
```
The tickets won't show right away (it's not reactive) when the data for it was fetched. Why? I have to reload the page first or hot reload it through code to make it show up...