changes

app/components/orders/Orders.vue

@@ -35,10 +35,40 @@ const highlights = [
     color: 'purple',
     unit: 'VNĐ'
   },
-]
+];
+
+const viewModes = [
+  { name: 'list', icon: 'material-symbols:format-list-bulleted-rounded' },
+  { name: 'grid', icon: 'material-symbols:grid-view-outline-rounded' }
+];
+const viewMode = ref('list');
 </script>
 <template>
   <div>
+    <div class="content is-flex is-gap-2 is-justify-content-flex-end is-align-items-center">
+      <div class="tabs is-toggle m-0">
+        <ul class="is-flex-grow-0 ml-auto">
+          <li
+            v-for="mode in viewModes"
+            :key="mode.name"
+            :class="[mode.name === viewMode && 'is-active']"
+            @click="viewMode = mode.name"
+          >
+            <a class="px-3 py-1">
+              <span class="icon m-0">
+                <Icon :name="mode.icon" :size="18" />
+              </span>
+            </a>
+          </li>
+        </ul>
+      </div>
+      <button class="button fs-14 is-primary">
+        <span class="icon">
+          <Icon :size="18" name="material-symbols:add-2-rounded" />
+        </span>
+        <span>Tạo đơn hàng</span>
+      </button>
+    </div>
     <div class="fixed-grid has-2-cols-mobile has-5-cols">
       <div class="grid">
         <OrderHighlightCard
@@ -49,6 +79,13 @@ const highlights = [
       </div>
     </div>
     <OrderPipeline />
-    <OrdersTable />
+    <OrdersTable :viewMode="viewMode" />
   </div>
 </template>
+<style scoped>
+.tabs {
+  --bulma-tabs-toggle-link-active-background-color: var(--bulma-link-90);
+  --bulma-tabs-toggle-link-active-border-color: var(--bulma-link-90);
+  --bulma-tabs-toggle-link-active-color: var(--bulma-link-40);
+}
+</style>