<template>
<Head title="Dashboard" />

<Layout>

    <div class="row">
        <div class="col">
            <h1>Latest Sales:</h1>
            <div v-for="sale in latestSales" :key="sale.id">
                <SaleCard class="mb-3" :sale="sale" />
            </div>
        </div>

        <div class="col">
            <AveragesChart />
        </div>
    </div>
</Layout>
</template>

<script setup>
import Layout from '@/layouts/AppLayout.vue';
import SaleCard from '@/components/SaleCard.vue';
import AveragesChart from '@/components/AveragesChart.vue';

const props = defineProps({
    latestSales: {
        type: Array,
        default: [],
    }
});
</script>
