feat: Upload layout done.

src/views/MainContainer.vue

@@ -3,10 +3,9 @@
       <Header/>
       <Navbar/>
   </header>
-  <main>
+  <main class="w-full">
     <Loading v-if="loadingStore.isLoading" />
-    <router-view>
-    </router-view>
+    <router-view></router-view>
   </main>
 </template>
 

src/views/Upload/index.vue

@@ -0,0 +1,86 @@
+<template>
+  <section class="h-screen-main w-full px-4 flex flex-col justify-between items-start">
+    <!-- Upload Content -->
+    <div class="w-full">
+      <!-- File name -->
+      <p class="font-bold text-base leading-[48px] border-b border-neutral-300">File Name(點擊可以改名字)</p>
+      <!-- Upload notification -->
+      <div class="flex justify-start items-center space-x-2 ml-2 py-2">
+        <span class="material-symbols-outlined text-neutral-700" v-tooltip.right="tooltipUpload">info</span>
+        <span class="w-px h-7 bg-neutral-300"></span>
+        <div class="flex items-center">
+          <span class="material-symbols-outlined text-primary">notifications</span>
+          <span class="material-symbols-outlined material-fill text-danger">warning</span>
+        </div>
+        <!-- Upload text -->
+        <div class="flex justify-start items-center">
+          <p class="text-primary text-sm">
+            Please verify the label for each column before uploading.
+          </p>
+          <p class="text-danger text-sm">
+            Need to select [A], [B], [C].
+          </p>
+          <div class=" space-y-1">
+            <p class="text-danger text-sm">
+              [Case ID] has been assigned.
+            </p>
+            <p class="text-danger text-sm">
+              [Case ID], [Activity] have been assigned.
+            </p>
+          </div>
+        </div>
+      </div>
+      <!-- Upload table -->
+    </div>
+    <!-- Upload button -->
+    <div class="w-full text-right space-x-4 px-8 py-4">
+        <button type="button" class="btn btn-sm btn-neutral" @click="reset">Cancel</button>
+        <button type="button" class="btn btn-sm" @click="submit" :disabled="isDisabled" :class="isDisabled ? 'btn-disable' : 'btn-neutral'">Upload</button>
+      </div>
+  </section>
+</template>
+<script>
+import { storeToRefs } from 'pinia';
+import LoadingStore from '@/stores/loading.js';
+
+export default {
+  setup() {
+    const loadingStore = LoadingStore();
+    const { isLoading } = storeToRefs(loadingStore);
+
+    return { isLoading }
+  },
+  data() {
+    return {
+      isDisabled: true,
+      tooltipUpload: {
+        value: `1. Case ID: A unique identifier for each case.
+          2. Activity: A process step executed by either a system (automated) or humans (manual).
+          3. Activity Instance ID: A unique identifier for a single occurrence of an activity.
+          4. Timestamp: The time of occurrence of a particular event, such as the start or end of an activity.
+          5. Status: Activity status, such as Start or Complete.
+          6. Attribute: A property that can be associated with a case to provide additional information about that case.
+          7. Resource: A resource refers to any entity that is required to carry out a business process. This can include people, equipment, software, or any other type of asset.`,
+       class: '!max-w-[400px] !text-[10px]',
+       autoHide: false,
+      }
+    }
+  },
+  methods: {
+    /**
+     * Cancel Button
+     */
+    reset() {},
+    /**
+     * Upload Button
+     */
+    submit() {},
+  },
+  mounted() {
+    this.isLoading = false;
+  },
+}
+// beforeRouteUpdate(){}
+</script>
+<style scoped>
+</style>