<script setup>
import DashboardHighlightCard from "@/components/dashboard/DashboardHighlightCard.vue";
import Delivery from "@/components/dashboard/Delivery.vue";
import OrderStatus from "@/components/dashboard/OrderStatus.vue";
import RevenueChart from "@/components/dashboard/RevenueChart.vue";
import TopCustomers from "@/components/dashboard/TopCustomers.vue";
import TopProducts from "@/components/dashboard/TopProducts.vue";
import Warnings from "@/components/dashboard/Warnings.vue";

const highlights = [
  {
    name: "Doanh thu hôm nay",
    value: "72.5M",
    color: "blue",
    icon: "material-symbols:attach-money-rounded",
    subheader: {
      value: "+12.5%",
      fluctuation: "up",
    },
  },
  {
    name: "Số đơn hàng",
    value: "73",
    color: "purple",
    icon: "material-symbols:shopping-cart-outline-rounded",
    subheader: {
      value: "+8 đơn",
      fluctuation: "up",
    },
  },
  {
    name: "Đơn đang giao",
    value: "8",
    color: "orange",
    icon: "material-symbols:delivery-truck-speed-outline-rounded",
  },
  {
    name: "Đơn hoàn thành",
    value: "38",
    color: "green",
    icon: "material-symbols:check-circle-outline-rounded",
  },
  {
    name: "Công nợ phải thu",
    value: "245M",
    color: "red",
    icon: "material-symbols:universal-currency-alt-outline-rounded",
    subheader: {
      value: "+15M",
      fluctuation: "down",
    },
  },
  {
    name: "Tồn kho",
    value: "1,250",
    color: "cyan",
    icon: "material-symbols:box-outline-rounded",
    subheader: {
      value: "-45 SP",
      fluctuation: "down",
    },
  },
];
</script>
<template>
  <div>
    <div class="fixed-grid has-2-cols has-3-cols-tablet has-6-cols-desktop">
      <div class="grid">
        <DashboardHighlightCard
          v-for="highlight in highlights"
          :key="highlight.name"
          v-bind="highlight"
        />
      </div>
    </div>
    <div class="fixed-grid has-1-cols-mobile has-3-cols">
      <div class="grid">
        <div class="cell is-col-span-2">
          <RevenueChart />
        </div>
        <div class="cell">
          <TopCustomers />
        </div>
      </div>
    </div>
    <TopProducts />
    <OrderStatus />
    <Delivery />
    <Warnings />
  </div>
</template>
