feat: build UI

app/components/inventory/Inventory.vue

@@ -1,5 +1,43 @@
 <script setup>
+import InventoryHighlightCard from '@/components/inventory/InventoryHighlightCard.vue';
+
+const inventoryHighlights = [
+  {
+    name: 'Tổng số SKU',
+    value: 12,
+    icon: 'material-symbols:deployed-code-outline',
+    color: 'blue',
+  },
+  {
+    name: 'Tổng tồn kho',
+    value: '1,120',
+    icon: 'material-symbols:box-outline-rounded',
+    color: 'green',
+    unit: 'đơn vị'
+  },
+  {
+    name: 'Giá trị tồn kho',
+    value: '294.5M',
+    icon: 'material-symbols:attach-money-rounded',
+    color: 'purple',
+  },
+  {
+    name: 'Sắp hết hàng',
+    value: 3,
+    icon: 'material-symbols:warning-outline-rounded',
+    color: 'red',
+    unit: 'sản phẩm'
+  },
+];
 </script>
 <template>
-  Inventory
+  <div class="fixed-grid has-2-cols-mobile has-4-cols">
+    <div class="grid">
+      <InventoryHighlightCard
+        v-for="highlight in inventoryHighlights"
+        :key="highlight.name"
+        v-bind="highlight"
+      />
+    </div>
+  </div>
 </template>

app/components/inventory/InventoryHighlightCard.vue

@@ -0,0 +1,28 @@
+<script setup>
+const props = defineProps({
+  name: String,
+  value: String,
+  unit: String,
+  icon: String,
+  color: String
+})
+</script>
+<template>
+  <div class="cell">
+    <div class="card h-full">
+      <div class="card-content is-flex is-justify-content-space-between is-align-items-start is-gap-1">
+        <div>
+          <p class="fs-14 has-text-grey">{{ name }}</p>
+          <p class="fs-22 font-bold">{{ value }}</p>
+        </div>
+        <div :class="['p-3 rounded-lg is-flex is-justify-content-center is-align-items-center', `has-background-${color}-soft`]">
+          <Icon
+            :name="icon"
+            :class="`has-text-${color}-40`"
+            :size="24"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>