changes

app/components/orders/OrdersKanban.vue

@@ -0,0 +1,48 @@
+<script setup>
+import OrderKanbanCard from '@/components/orders/OrderKanbanCard.vue';
+
+const props = defineProps({
+  orders: Array,
+  statuses: Array,
+});
+
+const emit = defineEmits(['selectOrder', 'unselect']);
+</script>
+
+<template>
+  <div class="p-5 fixed-grid has-4-cols">
+    <div class="grid">
+      <div
+        v-for="status in statuses"
+        :key="status.id"
+        class="card"
+        style="border: none"
+      >
+        <div class="card-content p-0 is-clipped">
+          <div :class="['p-4 is-flex is-justify-content-space-between is-align-items-center', `has-background-${status.color}-90`]">
+            <p class="font-semibold has-text-grey-10">{{ status.name }}</p>
+            <p class="px-2 py-1 font-semibold rounded-lg has-background-white"
+              :style="{ border: `1px solid var(--bulma-${status.color}-60)`}"
+            >
+              {{ orders.filter(o => o.status === status.id).length }}
+            </p>
+          </div>
+          <hr class="m-0 has-background-grey-80" />
+          <div class="has-background-grey-95 p-4">
+            <OrderKanbanCard 
+              v-if="orders.filter(o => o.status === status.id).length > 0"
+              v-for="order in orders.filter(o => o.status === status.id)"
+              :key="order.id"
+              :order="order"
+              @selectOrder="emit('selectOrder', order.id)"
+              @unselect="emit('unselect')"
+            />
+            <p v-else class="fs-13 has-text-centered has-text-grey">
+              Không có đơn hàng
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div> 
+</template>