From d976bc529d6eab98dfbd9f327f807b20cebeeee5 Mon Sep 17 00:00:00 2001
From: chiayin <chiayin.kuo@dsp.im>
Date: Thu, 29 Jun 2023 15:45:34 +0800
Subject: [PATCH] Conformance: Have activity Layout done.

---
 src/assets/components.css                     |   1 +
 .../Conformance/ConformanceResults.vue        | 273 ++++++++++++++++++
 .../Conformance/ConformanceSidebar.vue        |  53 ++++
 .../ConformanceSidebar/ActList.vue            |  23 ++
 .../ConformanceRadioGroup.vue                 |  94 ++++++
 .../ConformanceSelectResult.vue               |  23 ++
 .../ConformanceSidebar/ConformanceShowBar.vue |  31 ++
 .../Discover/Conformance/StatusBar.vue        |  12 +-
 .../Conformance/conformanceResults.vue        |  21 --
 src/components/Discover/Map/SidebarFilter.vue |   2 +-
 src/components/icons/IconNA.vue               |  22 ++
 src/main.js                                   |   4 +
 src/stores/conformance.js                     |  17 ++
 src/views/Discover/Conformance/index.vue      |  15 +-
 src/views/MainContainer.vue                   |   6 +-
 tailwind.config.js                            |   4 +-
 16 files changed, 565 insertions(+), 36 deletions(-)
 create mode 100644 src/components/Discover/Conformance/ConformanceResults.vue
 create mode 100644 src/components/Discover/Conformance/ConformanceSidebar.vue
 create mode 100644 src/components/Discover/Conformance/ConformanceSidebar/ActList.vue
 create mode 100644 src/components/Discover/Conformance/ConformanceSidebar/ConformanceRadioGroup.vue
 create mode 100644 src/components/Discover/Conformance/ConformanceSidebar/ConformanceSelectResult.vue
 create mode 100644 src/components/Discover/Conformance/ConformanceSidebar/ConformanceShowBar.vue
 delete mode 100644 src/components/Discover/Conformance/conformanceResults.vue
 create mode 100644 src/components/icons/IconNA.vue
 create mode 100644 src/stores/conformance.js

diff --git a/src/assets/components.css b/src/assets/components.css
index a58be75..b27d650 100644
--- a/src/assets/components.css
+++ b/src/assets/components.css
@@ -43,6 +43,7 @@
   }
 
   .scrollbar::-webkit-scrollbar-thumb {
+    /* @apply  rounded-full */
     @apply bg-primary rounded-full
   }
 
diff --git a/src/components/Discover/Conformance/ConformanceResults.vue b/src/components/Discover/Conformance/ConformanceResults.vue
new file mode 100644
index 0000000..9dec08d
--- /dev/null
+++ b/src/components/Discover/Conformance/ConformanceResults.vue
@@ -0,0 +1,273 @@
+<template>
+<section class="p-4 space-y-2 h-full w-[calc(100vw_-_316px)] overflow-y-auto float-right">
+  <!-- title -->
+  <p class="h2 text-base">Conformance Checking Results<span class="material-symbols-outlined text-base align-middle ml-2" v-tooltip.bottom="tooltip.results" type="text">info</span></p>
+  <!-- total group -->
+  <ul class=" text-neutral-10 text-sm flex gap-2 py-2">
+    <li class=" bg-cfm-primary rounded-full px-4 py-1 space-x-2">
+      <span class="material-symbols-outlined text-base align-middle mr-2">check_circle</span>Conformance<span>3,890</span>
+    </li>
+    <li class=" bg-cfm-secondary rounded-full px-4 py-1 space-x-2">
+      <span class="material-symbols-outlined text-base align-middle mr-2">cancel</span>Non-Conformance<span>27,230</span>
+    </li>
+    <li class=" bg-neutral-700 rounded-full px-4 py-1 space-x-2">
+      <iconNA class="inline-block mr-1"></iconNA>Not Applicable<span>7,780</span>
+    </li>
+  </ul>
+  <!-- chart -->
+  <div class="flex gap-4 w-full">
+    <div class="border rounded border-neutral-300 p-2 bg-neutral-10 basis-1/3">
+      <p class="h2 pl-2 flex justify-between items-center">
+          <span>Conformance Rate<span class="material-symbols-outlined text-sm align-middle ml-2" v-tooltip.bottom="tooltip.rate">info</span></span>
+          <span class="text-2xl">10%</span>
+        </p>
+    </div>
+    <div class="border rounded border-neutral-300 p-2 bg-neutral-10 basis-1/3">
+      <p class="h2 pl-2 flex justify-between items-center">
+          <span>Cases<span class="material-symbols-outlined text-sm align-middle ml-2">info</span></span>
+          <span class="text-2xl"><span class="text-cfm-primary">3.89K</span>/38.9K</span>
+        </p>
+    </div>
+    <div class="border rounded border-neutral-300 p-2 bg-neutral-10 basis-1/3">
+      <p class="h2 pl-2 flex justify-between items-center">
+          <span>Fitness<span class="material-symbols-outlined text-sm align-middle ml-2">info</span></span>
+          <span class="text-2xl">13.5</span>
+        </p>
+    </div>
+  </div>
+  <!-- effect -->
+  <section>
+    <p class="h2 text-base">Effect</p>
+    <div class="flex gap-4 w-full">
+      <div class="border rounded border-neutral-300 p-2 bg-neutral-10 basis-1/2">
+        <p class="h2 pl-2 mb-2">Throughput Time</p>
+        <p class="pl-2 space-x-2">
+          <span class="text-cfm-primary text-2xl font-medium">48</span>
+          <span>vs</span>
+          <span class="text-cfm-secondary text-2xl font-medium">56</span>
+          <span>days,</span>
+          <span class="text-2xl font-medium">-8</span>
+          <span>days of difference.</span>
+        </p>
+      </div>
+      <div class="border rounded border-neutral-300 p-2 bg-neutral-10 basis-1/2">
+        <p class="h2 pl-2 mb-2">Activities per Case</p>
+        <p class="pl-2 space-x-2">
+          <span class="text-cfm-primary text-2xl font-medium">7.0</span>
+          <span>vs</span>
+          <span class="text-cfm-secondary text-2xl font-medium">3.9</span>
+          <span>activities,</span>
+          <span class="text-2xl font-medium">3.1</span>
+          <span>activities of difference.</span>
+        </p>
+      </div>
+    </div>
+  </section>
+  <!-- Issues group -->
+  <section>
+    <p class="h2 text-base">Non-conformance Issues</p>
+    <div class="flex gap-4 w-full">
+      <!-- Issues chart -->
+      <div class="border rounded border-neutral-300 p-2 bg-neutral-10 w-full">
+        <p class="h2 pl-2 flex justify-between items-center">
+          <span>Time Trend<span class="material-symbols-outlined text-sm align-middle ml-2">info</span></span>
+          <span class="text-2xl"><span class="text-cfm-secondary">3.89K</span>/38.9K</span>
+        </p>
+      </div>
+      <!-- Issues list -->
+      <div class="border rounded border-neutral-300 p-2 bg-neutral-10 w-full">
+        <p class="h2 pl-2 mb-2">Issue List</p>
+          <table class="text-sm min-w-full table-fixed">
+            <tbody>
+              <tr v-for="(trace, key) in traceList" :key="key">
+                <td class="p-2 pl-6 truncate max-w-0 w-1/3">
+                    <span class="material-symbols-outlined disc text-sm align-middle mr-1">fiber_manual_record</span>{{ trace.issue }}
+                  </td>
+                <td class="p-2 min-w-[96px] w-2/5">
+                  <div class="h-4 w-full bg-neutral-300 rounded-sm overflow-hidden">
+                    <div class="h-full bg-primary" :style="trace.value"></div>
+                  </div>
+                </td>
+                <td class="p-2 text-right truncate">{{ trace.count }}</td>
+                <td class="p-2 text-center">{{ trace.ratio }}%</td>
+                <td class="p-2 text-center">
+                  <div class="btn btn-sm btn-c-primary cursor-pointer" @click="switchCaseData(trace.id)">More</div>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+      </div>
+    </div>
+  </section>
+  <!-- title -->
+  <p class="h2 text-base">Conformance Checking Results<span class="material-symbols-outlined text-base align-middle ml-2" v-tooltip.bottom="tooltip.results" type="text">info</span></p>
+  <!-- total group -->
+  <ul class=" text-neutral-10 text-sm flex gap-2 py-2">
+    <li class=" bg-cfm-primary rounded-full px-4 py-1 space-x-2">
+      <span class="material-symbols-outlined text-base align-middle mr-2">check_circle</span>Conformance<span>3,890</span>
+    </li>
+    <li class=" bg-cfm-secondary rounded-full px-4 py-1 space-x-2">
+      <span class="material-symbols-outlined text-base align-middle mr-2">cancel</span>Non-Conformance<span>27,230</span>
+    </li>
+    <li class=" bg-neutral-700 rounded-full px-4 py-1 space-x-2">
+      <iconNA class="inline-block mr-1"></iconNA>Not Applicable<span>7,780</span>
+    </li>
+  </ul>
+  <!-- chart -->
+  <div class="flex gap-4 w-full">
+    <div class="border rounded border-neutral-300 p-2 bg-neutral-10 basis-1/3">
+      <p class="h2 pl-2 flex justify-between items-center">
+          <span>Conformance Rate<span class="material-symbols-outlined text-sm align-middle ml-2" v-tooltip.bottom="tooltip.rate">info</span></span>
+          <span class="text-2xl">10%</span>
+        </p>
+    </div>
+    <div class="border rounded border-neutral-300 p-2 bg-neutral-10 basis-1/3">
+      <p class="h2 pl-2 flex justify-between items-center">
+          <span>Cases<span class="material-symbols-outlined text-sm align-middle ml-2">info</span></span>
+          <span class="text-2xl"><span class="text-cfm-primary">3.89K</span>/38.9K</span>
+        </p>
+    </div>
+    <div class="border rounded border-neutral-300 p-2 bg-neutral-10 basis-1/3">
+      <p class="h2 pl-2 flex justify-between items-center">
+          <span>Fitness<span class="material-symbols-outlined text-sm align-middle ml-2">info</span></span>
+          <span class="text-2xl">13.5</span>
+        </p>
+    </div>
+  </div>
+  <!-- effect -->
+  <section>
+    <p class="h2 text-base">Effect</p>
+    <div class="flex gap-4 w-full">
+      <div class="border rounded border-neutral-300 p-2 bg-neutral-10 basis-1/2">
+        <p class="h2 pl-2 mb-2">Throughput Time</p>
+        <p class="pl-2 space-x-2">
+          <span class="text-cfm-primary text-2xl font-medium">48</span>
+          <span>vs</span>
+          <span class="text-cfm-secondary text-2xl font-medium">56</span>
+          <span>days,</span>
+          <span class="text-2xl font-medium">-8</span>
+          <span>days of difference.</span>
+        </p>
+      </div>
+      <div class="border rounded border-neutral-300 p-2 bg-neutral-10 basis-1/2">
+        <p class="h2 pl-2 mb-2">Activities per Case</p>
+        <p class="pl-2 space-x-2">
+          <span class="text-cfm-primary text-2xl font-medium">7.0</span>
+          <span>vs</span>
+          <span class="text-cfm-secondary text-2xl font-medium">3.9</span>
+          <span>activities,</span>
+          <span class="text-2xl font-medium">3.1</span>
+          <span>activities of difference.</span>
+        </p>
+      </div>
+    </div>
+  </section>
+  <!-- Issues group -->
+  <section>
+    <p class="h2 text-base">Non-conformance Issues</p>
+    <div class="flex gap-4 w-full">
+      <!-- Issues chart -->
+      <div class="border rounded border-neutral-300 p-2 bg-neutral-10 w-full">
+        <p class="h2 pl-2 flex justify-between items-center">
+          <span>Time Trend<span class="material-symbols-outlined text-sm align-middle ml-2">info</span></span>
+          <span class="text-2xl"><span class="text-cfm-secondary">3.89K</span>/38.9K</span>
+        </p>
+      </div>
+      <!-- Issues list -->
+      <div class="border rounded border-neutral-300 p-2 bg-neutral-10 w-full">
+        <p class="h2 pl-2 mb-2">Issue List</p>
+          <table class="text-sm min-w-full table-fixed">
+            <tbody>
+              <tr v-for="(trace, key) in traceList" :key="key">
+                <td class="p-2 pl-6 truncate max-w-0 w-1/3">
+                    <span class="material-symbols-outlined disc text-sm align-middle mr-1">fiber_manual_record</span>{{ trace.issue }}
+                  </td>
+                <td class="p-2 min-w-[96px] w-2/5">
+                  <div class="h-4 w-full bg-neutral-300 rounded-sm overflow-hidden">
+                    <div class="h-full bg-primary" :style="trace.value"></div>
+                  </div>
+                </td>
+                <td class="p-2 text-right truncate">{{ trace.count }}</td>
+                <td class="p-2 text-center">{{ trace.ratio }}%</td>
+                <td class="p-2 text-center">
+                  <div class="btn btn-sm btn-c-primary cursor-pointer" @click="switchCaseData(trace.id)">More</div>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+      </div>
+    </div>
+  </section>
+</section>
+</template>
+<script>
+import iconNA from '@/components/icons/IconNA.vue';
+
+export default {
+  data() {
+    return {
+      traceList: [
+        {
+          id: 1,
+          issue: 'Skip',
+          value: this.progressWidth(80),
+          count: '1,234,567,890',
+          ratio: 80,
+        },
+        {
+          id: 2,
+          issue: 'Order Switch',
+          value: this.progressWidth(30),
+          count: '567,890',
+          ratio: 30,
+        },
+        {
+          id: 3,
+          issue: 'Activity不包含到院、出院、出院、出院',
+          value: this.progressWidth(70),
+          count: '4,567,890',
+          ratio: 70,
+        }
+      ],
+      tooltip: {
+        results: {
+          value: 'This page will perform a conformance check based on the filtering results of the map.',
+        },
+        rate: {
+          value: '=(total Non-Conformance/total Conformance)*100%'
+        }
+      }
+    }
+  },
+  components: {
+    iconNA,
+  },
+  methods: {
+    /**
+     * set progress bar width
+     * @param   {number} value
+     * @returns {string}      樣式的寬度設定
+     */
+     progressWidth(value){
+      return `width:${value}%;`
+    },
+    /**
+     * switch case data
+     * @param {number} id
+     */
+    switchCaseData(id) {
+      console.log(id);
+    },
+  }
+}
+</script>
+<style scoped>
+:deep(.disc) {
+  font-variation-settings:
+  'FILL' 1,
+  'wght' 100,
+  'GRAD' 0,
+  'opsz' 20
+}
+
+</style>
diff --git a/src/components/Discover/Conformance/ConformanceSidebar.vue b/src/components/Discover/Conformance/ConformanceSidebar.vue
new file mode 100644
index 0000000..c0db16b
--- /dev/null
+++ b/src/components/Discover/Conformance/ConformanceSidebar.vue
@@ -0,0 +1,53 @@
+<template>
+<section class="h-full shadow-[1px_0px_4px_rgba(0,0,0,0.25)] bg-neutral-100 absolute inset-y-0 left-0 " :class="isShowBar?'w-full':'w-[300px]'">
+  <!-- header -->
+  <div class="bg-neutral-200 px-4">
+    <p class="h2">Rule Settings</p>
+  </div>
+
+  <!-- contanier -->
+  <div class="p-4 h-[calc(100%_-_40px)] flex">
+    <div class="h-full flex flex-col justify-between w-[268px]">
+      <!-- select -->
+      <div class="h-full overflow-y-auto scrollbar">
+        <!-- show and hidden button -->
+        <div class="flex items-center justify-between">
+          <p class="h2">Activity Select</p>
+          <span class="material-symbols-outlined cursor-pointer duration-300 hover:bg-primary/50 hover:rounded " @click="isShowBar = !isShowBar">{{ isShowBar ? 'keyboard_double_arrow_right' : 'keyboard_double_arrow_left' }}</span>
+        </div>
+        <!-- radio group -->
+        <ConformanceRadioGroup></ConformanceRadioGroup>
+        <!-- select result -->
+        <ConformanceSelectResult></ConformanceSelectResult>
+      </div>
+      <!-- button -->
+      <div class="space-x-4 p-4 flex justify-center items-content border-t border-neutral-300">
+        <button type="button"  class="btn btn-sm btn-neutral" @click="reset">Clear</button>
+        <button type="button" class="btn btn-sm btn-neutral" @click="submit">Apply</button>
+      </div>
+    </div>
+    <!-- show bar -->
+    <ConformanceShowBar :class="isShowBar?'':'hidden'"></ConformanceShowBar>
+  </div>
+</section>
+</template>
+
+<script>
+import ConformanceRadioGroup from './ConformanceSidebar/ConformanceRadioGroup.vue';
+import ConformanceShowBar from './ConformanceSidebar/ConformanceShowBar.vue';
+import ConformanceSelectResult from './ConformanceSidebar/ConformanceSelectResult.vue';
+
+export default {
+  data() {
+    return {
+      isShowBar: false,
+      visibleLeft: false,
+    }
+  },
+  components: {
+    ConformanceRadioGroup,
+    ConformanceShowBar,
+    ConformanceSelectResult,
+  }
+}
+</script>
diff --git a/src/components/Discover/Conformance/ConformanceSidebar/ActList.vue b/src/components/Discover/Conformance/ConformanceSidebar/ActList.vue
new file mode 100644
index 0000000..4e2f0a1
--- /dev/null
+++ b/src/components/Discover/Conformance/ConformanceSidebar/ActList.vue
@@ -0,0 +1,23 @@
+<template>
+  <p class="h2 pl-2">Activity list</p>
+  <div class="h-[calc(100%_-_48px)]">
+    <p class="h2 pl-2 border-b mb-3">Activity</p>
+    <div class="flex flex-wrap justify-start content-start gap-4 px-2 overflow-y-auto scrollbar h-[calc(100%_-_52px)]">
+        <div class="flex items-center w-[166px]" v-for="(act, index) in data" :key="index">
+            <Checkbox v-model="actList" :inputId="index" name="actList" :value="act" />
+            <label :for="index" class="ml-2 p-2 whitespace-nowrap break-keep text-ellipsis overflow-hidden">{{ act }}{{ index }}</label>
+        </div>
+    </div>
+  </div>
+
+</template>
+<script>
+export default {
+  data() {
+    return {
+      actList: null,
+      data:['到到到到到到到到到到到到到到到到到到到到到到院', '住住住住住住住住住住住住住住住住住住住住住住住住住住住住住住住住住院', '開開開開開開開開開開開開開開開開開開開開開開刀', '第第第第第第第第第第一次醫囑', 'aaaaaaaaaaaaaaaa', 'bb ccc ddddd eeee', '第二次醫囑', '照會', '繳費', '領藥', '出院', '到院 到院 到院 到院', '住院', '開刀', '第一次醫囑', '第二次醫囑', '照會', '繳費', '領藥', '出院', '到院', '住院', '開刀', '第一次醫囑囑囑囑囑囑囑囑囑囑囑囑囑囑囑囑囑囑囑囑囑', '第二次醫囑', '照會', '繳費', '領藥', '出院', '到院', '住院', '開刀', '第一次醫囑', '第二次醫囑', '照會', '繳費', '領藥', '出院院院院院院院院院院院院院院院院院院院院院院院院院院院', '到院', '住院', '開刀', '第一次醫囑', '第二次醫囑', '照會', '繳費', '領藥', '出院', '到院', '住院', '開刀', '第一次醫囑', '第二次醫囑', '照會', '繳費', '領藥', '出院']
+    }
+  }
+}
+</script>
diff --git a/src/components/Discover/Conformance/ConformanceSidebar/ConformanceRadioGroup.vue b/src/components/Discover/Conformance/ConformanceSidebar/ConformanceRadioGroup.vue
new file mode 100644
index 0000000..59aff86
--- /dev/null
+++ b/src/components/Discover/Conformance/ConformanceSidebar/ConformanceRadioGroup.vue
@@ -0,0 +1,94 @@
+<template>
+  <section class="space-y-2  text-sm">
+    <!-- Rule Type -->
+    <div>
+      <p class="h2">Rule Type</p>
+      <div v-for="rule in ruleType" :key="rule.id" class="ml-4 mb-2">
+        <RadioButton v-model="selectedRuleType" :inputId="rule.id + rule.name" name="ruleType" :value="rule.name" />
+        <label :for="rule.id + rule.name" class="ml-2">{{ rule.name }}</label>
+      </div>
+    </div>
+    <!-- Activity Sequence (2 item) -->
+    <div v-show="selectedRuleType === 'Activity sequence'">
+      <p class="h2">Activity Sequence</p>
+      <div v-for="act in activitySequence" :key="act.id" class="ml-4 mb-2">
+        <RadioButton v-model="selectedActivitySequence" :inputId="act.id + act.name" name="activitySequence" :value="act.name" />
+        <label :for="act.id + act.name" class="ml-2">{{ act.name }}</label>
+      </div>
+    </div>
+    <!-- Mode -->
+    <div v-show="selectedRuleType === 'Activity sequence' && selectedActivitySequence === 'Sequence'">
+      <p class="h2">Mode</p>
+      <div v-for="mode in mode" :key="mode.id" class="ml-4 mb-2">
+        <RadioButton v-model="selectedMode" :inputId="mode.id + mode.name" name="mode" :value="mode.name" />
+        <label :for="mode.id + mode.name" class="ml-2">{{ mode.name }}</label>
+      </div>
+    </div>
+    <!-- Process Scope -->
+    <div v-show="selectedRuleType === 'Processing time'">
+      <p class="h2">Process Scope</p>
+      <div v-for="pro in processScope" :key="pro.id" class="ml-4 mb-2">
+        <RadioButton v-model="selectedProcessScope" :inputId="pro.id + pro.name" name="processScope" :value="pro.name" />
+        <label :for="pro.id + pro.name" class="ml-2">{{ pro.name }}</label>
+      </div>
+    </div>
+    <!-- Activity Sequence (4 item) -->
+    <div v-show="selectedRuleType === 'Processing time' || selectedRuleType === 'Cycle time'">
+      <p class="h2">Activity Sequence</p>
+      <div v-for="act in actSeqMore" :key="act.id" class="ml-4 mb-2">
+        <RadioButton v-model="selectedActSeqMore" :inputId="act.id + act.name" name="activitySequenceMore" :value="act.name" />
+        <label :for="act.id + act.name" class="ml-2">{{ act.name }}</label>
+      </div>
+    </div>
+  </section>
+</template>
+<script>
+import { storeToRefs } from 'pinia';
+import ConformanceStore from '@/stores/conformance.js';
+
+export default {
+  setup() {
+    const conformanceStore = ConformanceStore();
+    const { selectedRuleType, selectedActivitySequence, selectedMode, selectedProcessScope, selectedActSeqMore } = storeToRefs(conformanceStore);
+
+    return { selectedRuleType, selectedActivitySequence, selectedMode, selectedProcessScope, selectedActSeqMore }
+  },
+  data() {
+    return {
+      // selectedRuleType: '',
+      ruleType: [
+        {id: 1, name: 'Have activity'},
+        {id: 2, name: 'Activity sequence'},
+        {id: 3, name: 'Activity duration'},
+        {id: 4, name: 'Processing time'},
+        {id: 5, name: 'Waiting time'},
+        {id: 6, name: 'Cycle time'},
+      ],
+      // selectedActivitySequence: '',
+      activitySequence: [
+        {id: 1, name: 'Start & End'},
+        {id: 2, name: 'Sequence'},
+      ],
+      // selectedMode: '',
+      mode: [
+        {id: 1, name: 'Directly follows'},
+        {id: 2, name: 'Eventually follows'},
+        {id: 3, name: 'Short loop(s)'},
+        {id: 4, name: 'Self loop(s)'},
+      ],
+      // selectedProcessScope: '',
+      processScope: [
+        {id: 1, name: 'End to end'},
+        {id: 2, name: 'Partial'},
+      ],
+      // selectedActSeqMore: '',
+      actSeqMore: [
+        {id: 1, name: 'All'},
+        {id: 2, name: 'Start'},
+        {id: 3, name: 'End'},
+        {id: 4, name: 'Start & End '},
+      ],
+    }
+  }
+}
+</script>
diff --git a/src/components/Discover/Conformance/ConformanceSidebar/ConformanceSelectResult.vue b/src/components/Discover/Conformance/ConformanceSidebar/ConformanceSelectResult.vue
new file mode 100644
index 0000000..a3b095a
--- /dev/null
+++ b/src/components/Discover/Conformance/ConformanceSidebar/ConformanceSelectResult.vue
@@ -0,0 +1,23 @@
+<template>
+<div class="border-t border-neutral-300 p-4 mt-4">
+    <!-- Have activity -->
+    <div class=" space-y-2">
+      <div class="flex justify-start items-center" v-for="(act, index) in data" :key="index">
+        <span class="material-symbols-outlined text-primary mr-2">
+          check_circle
+        </span>
+        <p class="px-2 border border-neutral-500 w-full whitespace-nowrap break-keep text-ellipsis overflow-hidden">{{ act }}</p>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      data: ['到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院', '到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院', '到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院', '到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院', '到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院', '到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院', '到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院', '到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院', '到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院', '到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院', '到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院', '到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院', '到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院', '到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院', '到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院', '到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院', '到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院', '到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院', '到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院', '到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院', '到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院', '到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院', '到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院', '到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院', '到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院', '到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院', '到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院', '到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院', '到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院', '到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院', '到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院', '到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院', '到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院', '到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院', '到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到', '院到院到院到院到院到院到院到院到院到院到院到院到院到院', '到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院', '到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院', '到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院', '到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院', '到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院', '到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院', '到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院', '到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院', '到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院', ]
+    }
+  }
+
+}
+</script>
diff --git a/src/components/Discover/Conformance/ConformanceSidebar/ConformanceShowBar.vue b/src/components/Discover/Conformance/ConformanceSidebar/ConformanceShowBar.vue
new file mode 100644
index 0000000..516ac75
--- /dev/null
+++ b/src/components/Discover/Conformance/ConformanceSidebar/ConformanceShowBar.vue
@@ -0,0 +1,31 @@
+<template>
+  <section class="animate-fadein w-full h-full bg-neutral-10 border border-neutral-300 rounded-xl ml-4 p-2 space-y-2">
+    <!-- {{ selectedRuleType }}
+    {{ selectedActivitySequence }}
+    {{ selectedMode }}
+    {{ selectedProcessScope }}
+    {{ selectedActSeqMore }} -->
+    <ActList v-if="selectedRuleType === 'Have activity'"></ActList>
+
+  </section>
+</template>
+<script>
+import { storeToRefs } from 'pinia';
+import LoadingStore from '@/stores/loading.js';
+import ConformanceStore from '@/stores/conformance.js';
+import ActList from './ActList.vue';
+
+export default {
+  setup() {
+    const loadingStore = LoadingStore();
+    const conformanceStore = ConformanceStore();
+    const { isLoading } = storeToRefs(loadingStore);
+    const { selectedRuleType, selectedActivitySequence, selectedMode, selectedProcessScope, selectedActSeqMore } = storeToRefs(conformanceStore);
+
+    return { isLoading, selectedRuleType, selectedActivitySequence, selectedMode, selectedProcessScope, selectedActSeqMore }
+  },
+  components: {
+    ActList,
+  }
+}
+</script>
diff --git a/src/components/Discover/Conformance/StatusBar.vue b/src/components/Discover/Conformance/StatusBar.vue
index 8c29426..92662c1 100644
--- a/src/components/Discover/Conformance/StatusBar.vue
+++ b/src/components/Discover/Conformance/StatusBar.vue
@@ -1,8 +1,8 @@
 <template>
-<section class="w-full">
+<section class="w-full top-0">
+<!-- <section class="w-full top-0"> -->
   <!-- status content -->
-  <!-- whitespace-nowrap min-w-[228px] min-w-[164px] min-w-[256px] -->
-  <ul class="bg-neutral-100 flex justify-start shadow-[0px_1px_4px_rgba(0,0,0,0.2)] gap-3 p-3 text-sm overflow-x-auto scrollbar duration-700"  v-show="isPanel">
+  <ul class="bg-neutral-100 flex justify-start shadow-[0px_1px_4px_rgba(0,0,0,0.2)] gap-3 p-3 text-sm overflow-x-auto scrollbar duration-700 " >
     <li class="bg-neutral-10 rounded p-3 w-full">
       <div class="flex justify-between items-center mb-5">
         <p class="font-bold text-sm leading-8">Cases</p>
@@ -76,10 +76,12 @@
       </div>
     </li>
   </ul>
+  <!-- absolute -->
+  <!-- :class="isPanel?'':'hidden'" -->
   <!-- control button -->
-  <div class="bg-neutral-300 rounded-b-full w-20 text-center mx-auto cursor-pointer hover:bg-neutral-500 hover:text-neutral-10 active:ring focus:outline-none focus:border-neutral-500 focus:ring" @click="isPanel = !isPanel">
+  <!-- <div class="bg-neutral-300 rounded-b-full w-20 text-center mx-auto cursor-pointer hover:bg-neutral-500 hover:text-neutral-10 active:ring focus:outline-none focus:border-neutral-500 focus:ring" @click="isPanel = !isPanel">
     <span class="material-symbols-outlined block px-8 text-xs ">{{ isPanel ? 'keyboard_double_arrow_up' : 'keyboard_double_arrow_down' }}</span>
-  </div>
+  </div> -->
 </section>
 </template>
 
diff --git a/src/components/Discover/Conformance/conformanceResults.vue b/src/components/Discover/Conformance/conformanceResults.vue
deleted file mode 100644
index 949df35..0000000
--- a/src/components/Discover/Conformance/conformanceResults.vue
+++ /dev/null
@@ -1,21 +0,0 @@
-<template>
-<section>
-  <p class="h2 text-base">Conformance Checking Results&nbsp<span class="material-symbols-outlined text-base align-middle">info</span></p>
-  <ul class=" text-neutral-10">
-    <li class=" bg-primary rounded-full">
-      <span class="material-symbols-outlined">check_circle</span>Conformance<span>3,890</span>
-    </li>
-    <li class=" bg-secondary rounded-full">
-      <span class="material-symbols-outlined">cancel</span>Non-Conformance<span>27,230</span>
-    </li>
-    <li class=" bg-neutral-700 rounded-full">
-      <span class="material-symbols-outlined">flaky</span>Not Applicable<span>7,780</span>
-    </li>
-  </ul>
-</section>
-</template>
-<script>
-export default{
-
-}
-</script>
diff --git a/src/components/Discover/Map/SidebarFilter.vue b/src/components/Discover/Map/SidebarFilter.vue
index e1a3cfe..3bfec02 100644
--- a/src/components/Discover/Map/SidebarFilter.vue
+++ b/src/components/Discover/Map/SidebarFilter.vue
@@ -7,7 +7,7 @@
       </ul>
     </template>
     <!-- header: filter -->
-    <div v-if="tab === 'filter'" class="pt-4 flex w-full h-full">
+    <div v-if="tab === 'filter'" class="pt-4 flex w-full h-full text-neutral-900">
       <!-- title: filter silect -->
       <div class="space-y-2 mr-4 w-48 text-sm">
         <div>
diff --git a/src/components/icons/IconNA.vue b/src/components/icons/IconNA.vue
new file mode 100644
index 0000000..f4b5f4a
--- /dev/null
+++ b/src/components/icons/IconNA.vue
@@ -0,0 +1,22 @@
+<template>
+<svg width="16" height="16" viewBox="3 0 20 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_d_4086_5522)">
+<path d="M10.0359 5.48491V10.4086H9.0885L7.18616 7.30519L6.70871 6.43235H6.70125L6.73109 7.23058V10.4086H6V5.48491H6.93998L8.83486 8.58087L9.31977 9.46863H9.32723L9.29739 8.66293V5.48491H10.0359Z" fill="white"/>
+<path d="M13.7426 5L11.5195 10.9308H10.7735L12.9966 5H13.7426Z" fill="white"/>
+<path d="M18 10.4086H17.157L16.687 9.118H14.6206L14.1506 10.4086H13.3299L15.1875 5.48491H16.1424L18 10.4086ZM14.8444 8.46897H16.4632L15.6575 6.17124L14.8444 8.46897Z" fill="white"/>
+<rect x="4" y="0.2" width="16" height="16" rx="8" stroke="white" shape-rendering="geometricPrecision"/>
+</g>
+<defs>
+<filter id="filter0_d_4086_5522" x="0" y="0" width="24" height="24" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="4"/>
+<feGaussianBlur stdDeviation="2"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_4086_5522"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_4086_5522" result="shape"/>
+</filter>
+</defs>
+</svg>
+</template>
diff --git a/src/main.js b/src/main.js
index bc19a15..1229f99 100644
--- a/src/main.js
+++ b/src/main.js
@@ -42,6 +42,8 @@ import InputSwitch from 'primevue/inputswitch';
 import Chart from 'primevue/chart';
 import Slider from 'primevue/slider';
 import Calendar from 'primevue/calendar';
+import Tooltip from 'primevue/tooltip';
+import Checkbox from 'primevue/checkbox';
 
 const emitter = mitt();
 const app = createApp(App);
@@ -90,6 +92,8 @@ app.component('InputSwitch', InputSwitch);
 app.component('Chart', Chart);
 app.component('Slider', Slider);
 app.component('Calendar', Calendar);
+app.component('Checkbox', Checkbox);
 app.component('Draggable', draggable);  // 拖曳
+app.directive('tooltip', Tooltip);
 
 app.mount("#app");
diff --git a/src/stores/conformance.js b/src/stores/conformance.js
new file mode 100644
index 0000000..ae579e1
--- /dev/null
+++ b/src/stores/conformance.js
@@ -0,0 +1,17 @@
+import { defineStore } from "pinia";
+import loadingStore from "./loading";
+import pinia from '@/stores/main.js';
+
+const loading = loadingStore(pinia);
+
+export default defineStore('conformanceStore', {
+  state: () => ({
+    selectedRuleType: 'Have activity',
+    selectedActivitySequence: 'Start & End',
+    selectedMode: 'Directly follows',
+    selectedProcessScope: 'End to end',
+    selectedActSeqMore: 'All',
+  }),
+  getters: {},
+  actions: {},
+})
diff --git a/src/views/Discover/Conformance/index.vue b/src/views/Discover/Conformance/index.vue
index fd39843..506d990 100644
--- a/src/views/Discover/Conformance/index.vue
+++ b/src/views/Discover/Conformance/index.vue
@@ -1,15 +1,19 @@
 <template>
-  <main class="bg-neutral-50 h-screen-main">
-    <StatusBar></StatusBar>
-    <h1>sider</h1>
-    <ConformanceResults></ConformanceResults>
+  <main class="h-screen-main">
+    <!-- <StatusBar></StatusBar> -->
+    <div class="h-full relative bg-neutral-50">
+      <ConformanceSidebar></ConformanceSidebar>
+      <ConformanceResults></ConformanceResults>
+    </div>
+    <!-- <StatusBar></StatusBar> -->
   </main>
 </template>
 <script>
 import { storeToRefs } from 'pinia';
 import LoadingStore from '@/stores/loading.js';
 import StatusBar from '@/components/Discover/Conformance/StatusBar.vue';
-import ConformanceResults from '@/components/Discover/Conformance/conformanceResults.vue';
+import ConformanceResults from '@/components/Discover/Conformance/ConformanceResults.vue';
+import ConformanceSidebar from '@/components/Discover/Conformance/ConformanceSidebar.vue';
 
 export default {
   setup() {
@@ -21,6 +25,7 @@ export default {
   components: {
     StatusBar,
     ConformanceResults,
+    ConformanceSidebar,
   },
   async created() {
     let logId;
diff --git a/src/views/MainContainer.vue b/src/views/MainContainer.vue
index b8119c3..134e3ca 100644
--- a/src/views/MainContainer.vue
+++ b/src/views/MainContainer.vue
@@ -1,7 +1,7 @@
 <template>
-  <header>
-    <Header/>
-    <Navbar/>
+  <header class="sticky inset-x-0 top-0 w-full bg-neutral-10 z-10">
+      <Header/>
+      <Navbar/>
   </header>
   <main>
     <Loading v-if="loadingStore.isLoading" />
diff --git a/tailwind.config.js b/tailwind.config.js
index 1a35f97..cd585bc 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -11,7 +11,9 @@ module.exports = {
       transparent: 'transparent',
       current: 'currentColor',
       'primary': '#0099FF',
-      'secondary': '#FFAA44',
+      // 'secondary': '#FFAA44',
+      'cfm-primary': '#0099FF',
+      'cfm-secondary': '#FFAA44',
       'neutral': {
         10: '#ffffff',
         50: '#f8fafc',