diff --git a/index.html b/index.html
index 1701113..341921e 100644
--- a/index.html
+++ b/index.html
@@ -8,6 +8,7 @@
       rel="stylesheet"
       href="https://developer.api.autodesk.com/modelderivative/v2/viewers/7.*/style.min.css"
     />
+
     <script src="https://developer.api.autodesk.com/modelderivative/v2/viewers/7.*/viewer3D.min.js"></script>
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
diff --git a/public/img/building/building_1.jpg b/public/img/building/building_1.jpg
new file mode 100644
index 0000000..332a552
Binary files /dev/null and b/public/img/building/building_1.jpg differ
diff --git a/public/img/building/building_2.jpg b/public/img/building/building_2.jpg
new file mode 100644
index 0000000..b5dbb58
Binary files /dev/null and b/public/img/building/building_2.jpg differ
diff --git a/public/img/building/building_3.jpg b/public/img/building/building_3.jpg
new file mode 100644
index 0000000..044e922
Binary files /dev/null and b/public/img/building/building_3.jpg differ
diff --git a/public/img/building/building_4.jpg b/public/img/building/building_4.jpg
new file mode 100644
index 0000000..09c452d
Binary files /dev/null and b/public/img/building/building_4.jpg differ
diff --git a/public/img/building/building_5.jpg b/public/img/building/building_5.jpg
new file mode 100644
index 0000000..444ba1c
Binary files /dev/null and b/public/img/building/building_5.jpg differ
diff --git a/public/img/building/building_6.jpg b/public/img/building/building_6.jpg
new file mode 100644
index 0000000..7cd0b58
Binary files /dev/null and b/public/img/building/building_6.jpg differ
diff --git a/public/img/building/building_7.jpg b/public/img/building/building_7.jpg
new file mode 100644
index 0000000..bbdc35c
Binary files /dev/null and b/public/img/building/building_7.jpg differ
diff --git a/src/pages/home/ProgressBar.vue b/src/pages/home/ProgressBar.vue
index 46b35e0..58b1ad3 100644
--- a/src/pages/home/ProgressBar.vue
+++ b/src/pages/home/ProgressBar.vue
@@ -20,21 +20,19 @@
     <div class="relative">
       <progress
         v-bind="$attrs"
-        class="progress w-full h-5 bg-brand-gray-lighter text-brand-green-light text-left rounded-none [&::-webkit-progress-bar]:rounded-none [&::-webkit-progress-value]:rounded-none [&::-moz-progress-bar]:rounded-none"
-        :class="heightClass"
-        :value="current"
+        class="progress w-full h-5 bg-brand-gray-lighter text-brand-green-light text-left [&::-webkit-progress-bar]:rounded-none [&::-webkit-progress-value]:rounded-none [&::-moz-progress-bar]:rounded-none"
+        :value="animatedValue"
         :max="total"
         role="progressbar"
-        :aria-valuenow="current"
+        :aria-valuenow="animatedValue"
         aria-valuemin="0"
         :aria-valuemax="total"
       ></progress>
 
       <span
-        class="w-full absolute bottom-0 flex justify-between items-center text-[20px] font-nats pe-5 text-brand-black/80 group-hover:text-brand-purple-dark"
-        :class="textPosClass"
+        class="w-full absolute bottom-0 flex justify-between items-center text-[20px] font-nats pe-5 text-brand-black/80 group-hover:text-brand-purple-dark left-2"
       >
-        {{ currentLocale }} / {{ totalLocale }}
+        {{ animatedValueLocale }} / {{ totalLocale }}
         <span aria-hidden="true">
           <svg
             class="text-brand-gray/50"
@@ -55,7 +53,7 @@
 </template>
 
 <script setup>
-import { computed } from "vue";
+import { ref, watch, computed } from "vue";
 defineOptions({ inheritAttrs: false });
 
 const props = defineProps({
@@ -66,32 +64,56 @@ const props = defineProps({
   chartKey: { type: String, required: true },
   currentLegend: { type: String, required: true },
   totalLegend: { type: String, required: true },
-  height: { type: [Number, String], default: 5 },
+  duration: { type: Number, default: 100 }, 
 });
 
 const emit = defineEmits(["select"]);
 
-const heightClass = computed(() => `h-${props.height}`);
-const textPosClass = computed(() => {
-  switch (props.textAlign) {
-    case "center":
-      return "left-1/2 -translate-x-1/2";
-    case "right":
-      return "right-2";
-    default:
-      return "left-2";
-  }
-});
-
-const currentLocale = computed(() => props.current.toLocaleString());
+const animatedValue = ref(0);
+const animatedValueLocale = computed(() => animatedValue.value.toLocaleString());
 const totalLocale = computed(() => props.total.toLocaleString());
 
+watch(
+  () => props.current,
+  (newVal) => {
+    animateValue(newVal);
+  },
+  { immediate: true }
+);
+
+function animateValue(target) {
+  const start = animatedValue.value;
+  const diff = target - start;
+  const startTime = performance.now();
+
+  function step(now) {
+    const elapsed = now - startTime;
+    const progress = Math.min(elapsed / props.duration, 1);
+    animatedValue.value = Math.round(start + diff * progress);
+    if (progress < 1) {
+      requestAnimationFrame(step);
+    }
+  }
+
+  requestAnimationFrame(step);
+}
+
 function handleSelect() {
-  // 把要顯示在圖表頂部的標題也一併送出
   emit("select", {
     key: props.chartKey,
     legends: [props.currentLegend, props.totalLegend],
-    titleText: `progress ${currentLocale.value} / ${totalLocale.value}`,
+    titleText: `${props.currentLegend} ${animatedValueLocale.value} / ${totalLocale.value}`,
   });
 }
 </script>
+
+<style scoped>
+progress::-webkit-progress-value {
+  transition: width 0.2s ease-out;
+  height: 20px; /* 恢復原本高度 */
+}
+progress::-moz-progress-bar {
+  transition: width 0.2s ease-out;
+  height: 20px; /* 恢復原本高度 */
+}
+</style>
diff --git a/src/pages/home/backup.vue b/src/pages/home/backup.vue
deleted file mode 100644
index d99ba00..0000000
--- a/src/pages/home/backup.vue
+++ /dev/null
@@ -1,75 +0,0 @@
-<template>
-  <div
-    class="absolute top-3 inset-x-0 z-[1000] pointer-events-none flex justify-center"
-  >
-    <div
-      class="pointer-events-auto inline-flex items-center text-sm text-brand-gray-dark bg-white bg-opacity-90 border border-gray-300 rounded-md shadow-md ps-3"
-      role="group"
-      aria-label="顯示資訊切換"
-    >
-      <div class="flex items-center">
-        <p class="py-2 pr-2">顯示資訊｜</p>
-
-        <!-- 不顯示 -->
-        <button class="flex items-center gap-2 px-3 py-2 rounded-md">
-          <span class="" inline-block>
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              width="16"
-              height="16"
-              viewBox="0 0 15 15"
-            >
-              <path
-                fill="currentColor"
-                d="M3.64 2.27L7.5 6.13l3.84-3.84A.92.92 0 0 1 12 2a1 1 0 0 1 1 1a.9.9 0 0 1-.27.66L8.84 7.5l3.89 3.89A.9.9 0 0 1 13 12a1 1 0 0 1-1 1a.92.92 0 0 1-.69-.27L7.5 8.87l-3.85 3.85A.92.92 0 0 1 3 13a1 1 0 0 1-1-1a.9.9 0 0 1 .27-.66L6.16 7.5L2.27 3.61A.9.9 0 0 1 2 3a1 1 0 0 1 1-1c.24.003.47.1.64.27"
-              />
-            </svg>
-          </span>
-          <span>不顯示</span>
-        </button>
-
-        <!-- 住民 -->
-        <button class="flex items-center gap-2 px-3 py-2 rounded-md">
-          <span class="inline-block">
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              width="16"
-              height="16"
-              viewBox="0 0 16 16"
-            >
-              <path
-                fill="currentColor"
-                d="M3 14s-1 0-1-1s1-4 6-4s6 3 6 4s-1 1-1 1zm5-6a3 3 0 1 0 0-6a3 3 0 0 0 0 6"
-              />
-            </svg>
-          </span>
-          <span>入住情況</span>
-        </button>
-
-        <!-- 葷素資訊 -->
-        <button class="flex items-center gap-2 px-3 py-2 rounded-md">
-          <span class="inline-block">
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              width="16"
-              height="16"
-              viewBox="0 0 24 24"
-            >
-              <path
-                fill="currentColor"
-                d="M17.5 2.75a.75.75 0 0 0-1.5 0v4.015c-2.026-1.358-4.867-.881-6.293 1.215L2.353 18.786c-.556.818-.45 1.91.255 2.608a2.1 2.1 0 0 0 2.667.23l10.79-7.469A4.454 4.454 0 0 0 17.24 8h4.009a.75.75 0 0 0 0-1.5h-2.69l3.22-3.22a.75.75 0 0 0-1.06-1.06L17.5 5.439z"
-              />
-            </svg>
-          </span>
-          <span>飲食情況</span>
-        </button>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {};
-</script>
-
-<style lang="scss" scoped></style>
diff --git a/src/pages/home/index.vue b/src/pages/home/index.vue
index 1c94514..1fb23aa 100644
--- a/src/pages/home/index.vue
+++ b/src/pages/home/index.vue
@@ -1,99 +1,178 @@
 <template>
   <section
-    class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-2 lg:h-[calc(100vh-72px-32px)] h-auto justify-center"
+    class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-2 lg:h-[calc(100vh-72px-32px)] h-auto justify-center overflow-anchor:none"
   >
-    <!-- 左側 -->
+    <!-- 左側：照片/說明 + 進度條 + 圖表 + 葷素資料 -->
     <section
       class="grid grid-rows-12 gap-2 order-2 lg:order-1 min-h-0 lg:h-full"
     >
-      <!-- 上半：照片/說明 + 進度條（獨立 section） -->
+      <!-- 上半：照片/說明 + 進度條 -->
       <section
-        class="row-span-5 bg-white/70 rounded-md shadow p-6 grid grid-cols-1 md:grid-cols-2 items-start gap-6 min-h-0"
+        class="relative row-span-5 bg-white/70 rounded-md shadow p-6 grid grid-cols-1 md:grid-cols-2 items-start gap-6 min-h-0"
       >
-        <!-- 照片 + 說明（手機隱藏、平板/桌機顯示） -->
-        <div
-          class="w-full grid grid-rows-12 justify-start items-start gap-6 hidden sm:grid"
-        >
-          <div class="h-[200px] row-span-6">
-            <img
-              src="/img/building/headquarter.png"
-              alt="機構照片"
-              class="w-full h-full rounded-sm object-cover"
-            />
-          </div>
-          <div class="row-span-6">
-            <p
-              class="text-brand-gray bg-white/70 text-sm border rounded-sm px-2 py-3 border-brand-gray-light"
+        <!-- 左上角顯示目前機構名稱 + 返回按鈕 -->
+        <div class="relative">
+          <div
+            class="absolute top-0 left-0 z-30 flex justify-between items-center w-full px-2 py-1 bg-brand-gray-lighter/80"
+          >
+            <div
+              class="w-full h-full flex justify-start items-center gap-3 text-brand-black"
             >
-              崇恩長期照顧集團是國內第一家取得ISO認證的長期照顧機構，集合了醫師群與資深護理群及照顧服務員們，在大南部地區照顧每一位需要我們的長輩。
-            </p>
+              <span
+                ><svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="16"
+                  height="16"
+                  viewBox="0 0 16 24"
+                >
+                  <g fill="none" fill-rule="evenodd">
+                    <path
+                      d="m12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.018-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z"
+                    />
+                    <path
+                      fill="currentColor"
+                      d="M13 3a2 2 0 0 1 1.995 1.85L15 5v14h1V9.5a.5.5 0 0 1 .41-.492L16.5 9H18a2 2 0 0 1 1.995 1.85L20 11v8h1a1 1 0 0 1 .117 1.993L21 21H3a1 1 0 0 1-.117-1.993L3 19h1V5a2 2 0 0 1 1.85-1.995L6 3zm-2 12H8v2h3zm0-4H8v2h3zm0-4H8v2h3z"
+                    />
+                  </g></svg></span
+              ><span class="text-sm tracking-wider">{{
+                facilityDisplayName
+              }}</span>
+            </div>
+
+            <span
+              v-if="selectedFacility !== 'ALL'"
+              class="inline-flex items-center justify-center rounded px-2 py-1 hover:bg-white/80 hover:text-brand-black cursor-pointer select-none"
+              role="button"
+              tabindex="0"
+              @click="resetFacility"
+              @keyup.enter="resetFacility"
+              @keyup.space.prevent="resetFacility"
+              aria-label="返回總部"
+              title="返回"
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="16"
+                height="16"
+                viewBox="0 0 48 48"
+              >
+                <path
+                  fill="currentColor"
+                  fill-rule="evenodd"
+                  stroke="currentColor"
+                  stroke-linejoin="round"
+                  stroke-width="4"
+                  d="M44 40.836q-7.34-8.96-13.036-10.168t-10.846-.365V41L4 23.545L20.118 7v10.167q9.523.075 16.192 6.833q6.668 6.758 7.69 16.836Z"
+                  clip-rule="evenodd"
+                />
+              </svg>
+            </span>
+          </div>
+          <!-- 照片 + 說明（手機隱藏、平板/桌機顯示） -->
+          <div
+            class="w-full grid grid-rows-12 justify-start items-start gap-6 hidden sm:grid"
+          >
+            <div class="h-[200px] row-span-6">
+              <img
+                :src="currentFacility.photo"
+                alt="機構照片"
+                class="w-full h-full rounded-sm object-cover"
+              />
+            </div>
+            <div class="row-span-6">
+              <p
+                class="text-brand-gray bg-white/70 text-sm border rounded-sm px-2 py-3 border-brand-gray-light"
+              >
+                {{ currentFacility.desc }}
+              </p>
+            </div>
           </div>
         </div>
 
         <!-- Progress bars -->
+        <!-- Progress bars（加上 key 以觸發重新掛載；同時傳遞動畫相關 attrs 給子元件 <progress>） -->
         <div class="w-full flex flex-col gap-4">
-          <!-- Residents -->
           <ProgressBar
+            :key="`residents-${selectedFacility}`"
             label="現在住民／全立案床數"
-            :current="240"
-            :total="360"
+            :current="currentFacility.progress.residents.current"
+            :total="currentFacility.progress.residents.total"
             chartKey="residents"
             currentLegend="現在住民"
             totalLegend="全立案床數"
             @select="({ key }) => updateChartByKey(key)"
+            data-animate
+            data-animate-from="0"
+            data-animate-duration="700"
+            class="[&::-webkit-progress-value]:transition-all [&::-webkit-progress-value]:duration-700 [&::-moz-progress-bar]:transition-all [&::-moz-progress-bar]:duration-700"
           />
 
-          <!-- Vacancy -->
           <ProgressBar
+            :key="`vacancy-${selectedFacility}`"
             label="目前空床數／全立案床數"
-            :current="120"
-            :total="360"
+            :current="currentFacility.progress.vacancy.current"
+            :total="currentFacility.progress.vacancy.total"
             chartKey="vacancy"
             currentLegend="目前空床數"
             totalLegend="全立案床數"
             @select="({ key }) => updateChartByKey(key)"
+            data-animate
+            data-animate-from="0"
+            data-animate-duration="700"
+            class="[&::-webkit-progress-value]:transition-all [&::-webkit-progress-value]:duration-700 [&::-moz-progress-bar]:transition-all [&::-moz-progress-bar]:duration-700"
           />
 
-          <!-- Hospitalized -->
           <ProgressBar
+            :key="`hospitalized-${selectedFacility}`"
             label="今日住院／當月累積住院"
-            :current="8"
-            :total="50"
+            :current="currentFacility.progress.hospitalized.current"
+            :total="currentFacility.progress.hospitalized.total"
             chartKey="hospitalized"
             currentLegend="今日住院"
             totalLegend="當月累積住院"
             @select="({ key }) => updateChartByKey(key)"
+            data-animate
+            data-animate-from="0"
+            data-animate-duration="700"
+            class="[&::-webkit-progress-value]:transition-all [&::-webkit-progress-value]:duration-700 [&::-moz-progress-bar]:transition-all [&::-moz-progress-bar]:duration-700"
           />
 
-          <!-- Move-in -->
           <ProgressBar
+            :key="`movein-${selectedFacility}`"
             label="今日新入住／當月累積入住"
-            :current="12"
-            :total="50"
+            :current="currentFacility.progress.movein.current"
+            :total="currentFacility.progress.movein.total"
             chartKey="movein"
             currentLegend="今日入住"
             totalLegend="當月累積入住"
             @select="({ key }) => updateChartByKey(key)"
+            data-animate
+            data-animate-from="0"
+            data-animate-duration="700"
+            class="[&::-webkit-progress-value]:transition-all [&::-webkit-progress-value]:duration-700 [&::-moz-progress-bar]:transition-all [&::-moz-progress-bar]:duration-700"
           />
 
-          <!-- Move-out -->
           <ProgressBar
+            :key="`moveout-${selectedFacility}`"
             label="今日離院／當月累積離院"
-            :current="8"
-            :total="50"
+            :current="currentFacility.progress.moveout.current"
+            :total="currentFacility.progress.moveout.total"
             chartKey="moveout"
             currentLegend="今日離院"
             totalLegend="當月累積離院"
             @select="({ key }) => updateChartByKey(key)"
+            data-animate
+            data-animate-from="0"
+            data-animate-duration="700"
+            class="[&::-webkit-progress-value]:transition-all [&::-webkit-progress-value]:duration-700 [&::-moz-progress-bar]:transition-all [&::-moz-progress-bar]:duration-700"
           />
         </div>
       </section>
 
-      <!-- 下半：圖表（獨立 section，有內距） -->
+      <!-- 下半：圖表 -->
       <section
         class="row-span-4 bg-white/70 rounded-md shadow min-h-0 flex items-stretch"
       >
-        <!-- 這層專門控制圖表外圍留白 -->
         <div
           class="w-full h-full p-3 sm:p-4 md:p-6 min-h-[200px] sm:min-h-[240px] md:min-h-[300px]"
         >
@@ -103,6 +182,7 @@
 
       <!-- 葷／素資料 -->
       <section class="row-span-3 grid grid-cols-2 gap-2">
+        <!-- 葷 -->
         <div class="col-span-1 bg-white/70 rounded-md shadow p-6">
           <div
             class="border border-brand-yellow rounded-md w-full h-full flex flex-col justify-start items-center gap-3 p-3"
@@ -127,16 +207,17 @@
             </div>
             <div class="flex gap-6">
               <div class="flex flex-col justify-center items-start gap-3">
-                <p>總數：100</p>
-                <p>一般：90</p>
+                <p>總數：{{ currentFacility.diet.meat.total }}</p>
+                <p>一般：{{ currentFacility.diet.meat.normal }}</p>
               </div>
               <div class="flex flex-col justify-center items-start gap-3">
-                <p>碎食：5</p>
-                <p>管灌：5</p>
+                <p>碎食：{{ currentFacility.diet.meat.soft }}</p>
+                <p>管灌：{{ currentFacility.diet.meat.tube }}</p>
               </div>
             </div>
           </div>
         </div>
+        <!-- 素 -->
         <div class="col-span-1 bg-white/70 rounded-md shadow p-6">
           <div
             class="border border-brand-yellow rounded-md w-full h-full flex flex-col justify-start items-center gap-3 p-3"
@@ -161,12 +242,12 @@
             </div>
             <div class="flex gap-6">
               <div class="flex flex-col justify-center items-start gap-3">
-                <p>總數：100</p>
-                <p>一般：90</p>
+                <p>總數：{{ currentFacility.diet.veg.total }}</p>
+                <p>一般：{{ currentFacility.diet.veg.normal }}</p>
               </div>
               <div class="flex flex-col justify-center items-start gap-3">
-                <p>碎食：5</p>
-                <p>管灌：5</p>
+                <p>碎食：{{ currentFacility.diet.veg.soft }}</p>
+                <p>管灌：{{ currentFacility.diet.veg.tube }}</p>
               </div>
             </div>
           </div>
@@ -174,13 +255,13 @@
       </section>
     </section>
 
-    <!-- 中間 -->
+    <!-- 中間：地圖-->
     <section
-      class="relative bg-white/70 rounded-md shadow p-3 order-1 lg:order-2"
+      class="relative bg-white/70 rounded-md shadow p-3 order-1 lg:order-2 min-h-0 lg:h-full flex flex-col"
     >
-      <!-- 置頂置中的顯示資訊切換條（寬度對齊地圖） -->
+      <!-- 顯示資訊切換條（置頂置中） -->
       <div
-        class="absolute top-6 inset-x-0 z-[1000] pointer-events-none flex justify-center"
+        class="absolute top-6 inset-x-0 z-[1200] pointer-events-none flex justify-center"
       >
         <div
           class="pointer-events-auto inline-flex items-center text-sm text-brand-gray-dark bg-white bg-opacity-90 border border-gray-300 rounded-md shadow-md ps-3"
@@ -194,7 +275,7 @@
               :class="[
                 'flex items-center gap-2 px-3 py-2 rounded-md hover:bg-brand-gray-lighter',
                 infoMode === 'none' &&
-                  'bg-brand-green text-white hover:bg-brand-green hover:text-white',
+                  'bg-brand-purple-dark text-white hover:bg-brand-purple-dark hover:text-white',
               ]"
               @click="setInfoMode('none')"
               :aria-pressed="infoMode === 'none'"
@@ -219,7 +300,7 @@
               :class="[
                 'flex items-center gap-2 px-3 py-2 rounded-md hover:bg-brand-gray-lighter',
                 infoMode === 'residents' &&
-                  'bg-brand-green text-white hover:bg-brand-green hover:text-white',
+                  'bg-brand-purple-dark text-white hover:bg-brand-purple-dark hover:text-white',
               ]"
               @click="setInfoMode('residents')"
               :aria-pressed="infoMode === 'residents'"
@@ -244,7 +325,7 @@
               :class="[
                 'flex items-center gap-2 px-3 py-2 rounded-md hover:bg-brand-gray-lighter',
                 infoMode === 'diet' &&
-                  'bg-brand-green text-white hover:bg-brand-green hover:text-white',
+                  'bg-brand-purple-dark text-white hover:bg-brand-purple-dark hover:text-white',
               ]"
               @click="setInfoMode('diet')"
               :aria-pressed="infoMode === 'diet'"
@@ -267,22 +348,21 @@
           </div>
         </div>
       </div>
-      <!-- 地圖本體 -->
+
+      <!-- 地圖本體（刻意壓低 z-index） -->
       <div
         ref="mapEl"
-        class="w-full rounded-md overflow-hidden min-h-[240px] sm:min-h-[300px] md:h-[420px] lg:h-full"
-        style="aspect-ratio: 4 / 3"
+        class="relative z-[0] w-full flex-1 rounded-md overflow-hidden min-h-[300px] md:min-h-[360px] lg:min-h-[420px]"
       ></div>
     </section>
 
-    <!-- 右側 -->
+    <!-- 右側：表格（今日活動 / 今日異常事件 / 今日派車總表） -->
     <section class="flex flex-col gap-2 order-4 lg:order-3">
-      <!-- 表格 今日活動 -->
+      <!-- 今日活動 -->
       <section
         class="bg-white/70 rounded-md shadow p-6 flex flex-col min-h-0 gap-3"
       >
         <h3 class="text-2xl font-bold">今日活動</h3>
-        <!-- 可捲動內容區（水平） -->
         <div class="flex flex-col gap-4 mb-6">
           <div class="w-full overflow-x-auto overflow-y-auto">
             <table class="table whitespace-nowrap">
@@ -309,11 +389,10 @@
             </table>
           </div>
         </div>
-        <!-- 分頁 -->
         <div class="mt-3 flex items-center justify-between px-3">
-          <span class="text-sm text-brand-gray">
-            共 {{ total }} 筆，每頁 {{ pageSize }} 筆
-          </span>
+          <span class="text-sm text-brand-gray"
+            >共 {{ total }} 筆，每頁 {{ pageSize }} 筆</span
+          >
           <div class="inline-flex items-center gap-2">
             <button
               class="btn btn-sm btn-outline border-brand-purple-dark text-brand-purple-dark hover:bg-brand-purple hover:text-white hover:border-brand-purple disabled:!opacity-100 disabled:!text-gray-300 disabled:!border-gray-300 disabled:cursor-not-allowed"
@@ -322,11 +401,9 @@
             >
               上一頁
             </button>
-
-            <span class="px-2 text-sm tabular-nums text-brand-purple-dark">
-              {{ currentPage }} / {{ totalPages }}
-            </span>
-
+            <span class="px-2 text-sm tabular-nums text-brand-purple-dark"
+              >{{ currentPage }} / {{ totalPages }}</span
+            >
             <button
               class="btn btn-sm btn-outline border-brand-purple-dark text-brand-purple-dark hover:bg-brand-purple hover:text-white hover:border-brand-purple disabled:!opacity-100 disabled:!text-gray-300 disabled:!border-gray-300 disabled:cursor-not-allowed"
               :disabled="currentPage === totalPages"
@@ -337,12 +414,12 @@
           </div>
         </div>
       </section>
-      <!-- 表格 今日異常事件 -->
+
+      <!-- 今日異常事件 -->
       <section
         class="bg-white/70 rounded-md shadow p-6 flex flex-col min-h-0 gap-3"
       >
         <h3 class="text-2xl font-bold">今日異常事件</h3>
-        <!-- 可捲動內容區（水平） -->
         <div class="flex flex-col gap-4 mb-6">
           <div class="w-full overflow-x-auto overflow-y-auto">
             <table class="table whitespace-nowrap">
@@ -355,7 +432,6 @@
                   <th class="w-[100px]">事件</th>
                 </tr>
               </thead>
-
               <tbody>
                 <tr
                   v-for="row in pagedIncidentRows"
@@ -370,12 +446,10 @@
             </table>
           </div>
         </div>
-
-        <!-- 分頁（固定在底） -->
         <div class="mt-3 flex items-center justify-between">
-          <span class="ml-3 text-sm text-brand-gray">
-            共 {{ incidentTotal }} 筆，每頁 {{ incidentPageSize }} 筆
-          </span>
+          <span class="ml-3 text-sm text-brand-gray"
+            >共 {{ incidentTotal }} 筆，每頁 {{ incidentPageSize }} 筆</span
+          >
           <div class="inline-flex items-center gap-2">
             <button
               class="btn btn-sm btn-outline border-brand-purple-dark text-brand-purple-dark hover:bg-brand-purple hover:text-white hover:border-brand-purple disabled:!opacity-100 disabled:!text-gray-300 disabled:!border-gray-300 disabled:cursor-not-allowed"
@@ -384,11 +458,9 @@
             >
               上一頁
             </button>
-
-            <span class="px-2 text-sm tabular-nums text-brand-purple-dark">
-              {{ incidentPage }} / {{ incidentTotalPages }}
-            </span>
-
+            <span class="px-2 text-sm tabular-nums text-brand-purple-dark"
+              >{{ incidentPage }} / {{ incidentTotalPages }}</span
+            >
             <button
               class="btn btn-sm btn-outline border-brand-purple-dark text-brand-purple-dark hover:bg-brand-purple hover:text-white hover:border-brand-purple disabled:!opacity-100 disabled:!text-gray-300 disabled:!border-gray-300 disabled:cursor-not-allowed"
               :disabled="incidentPage === incidentTotalPages"
@@ -399,13 +471,12 @@
           </div>
         </div>
       </section>
-      <!-- 表格 今日派車總表 -->
+
+      <!-- 今日派車總表 -->
       <section
         class="bg-white/70 rounded-md shadow p-6 flex flex-col min-h-0 gap-3"
       >
         <h3 class="text-2xl font-bold">今日派車總表</h3>
-
-        <!-- 可捲動內容區（水平） -->
         <div class="flex flex-col gap-4 mb-6">
           <div class="w-full overflow-x-auto">
             <table class="table whitespace-nowrap">
@@ -418,7 +489,6 @@
                   <th class="w-[120px]">聯絡人</th>
                 </tr>
               </thead>
-
               <tbody>
                 <tr
                   v-for="row in pagedDispatchRows"
@@ -435,12 +505,10 @@
             </table>
           </div>
         </div>
-
-        <!-- 分頁（固定在底） -->
         <div class="mt-3 flex items-center justify-between">
-          <span class="ml-3 text-sm text-brand-gray">
-            共 {{ dispatchTotal }} 筆，每頁 {{ dispatchPageSize }} 筆
-          </span>
+          <span class="ml-3 text-sm text-brand-gray"
+            >共 {{ dispatchTotal }} 筆，每頁 {{ dispatchPageSize }} 筆</span
+          >
           <div class="inline-flex items-center">
             <button
               class="btn btn-sm btn-outline border-brand-purple-dark text-brand-purple-dark hover:bg-brand-purple hover:text-white hover:border-brand-purple disabled:!opacity-100 disabled:!text-gray-300 disabled:!border-gray-300 disabled:cursor-not-allowed"
@@ -449,13 +517,11 @@
             >
               上一頁
             </button>
-
-            <span class="px-2 text-sm tabular-nums text-brand-purple-dark">
-              {{ dispatchPage }} / {{ dispatchTotalPages }}
-            </span>
-
+            <span class="px-2 text-sm tabular-nums text-brand-purple-dark"
+              >{{ dispatchPage }} / {{ dispatchTotalPages }}</span
+            >
             <button
-              class="btn btn-sm btn-outline border-brand-purple-dark text-brand-purple-dark hover:bg-brand-purple hover:text-white hover:border-brand-purple disabled:!opacity-100 disabled:!text-gray-300 disabled:!border-gray-300 disabled:cursor-not-allowed"
+              class="btn btn-sm btn-outline border-brand-purple-dark text-brand-purple-dark hover:bg-brand-purple hover:text-white hover:border-brand-purple disabled:!opacity-100 disabled:!text-gray-300 disabled:!border-brand-gray-300 disabled:cursor-not-allowed"
               :disabled="dispatchPage === dispatchTotalPages"
               @click="dispatchPage++"
             >
@@ -469,6 +535,7 @@
 </template>
 
 <script setup>
+// ===== Imports =====
 import ProgressBar from "./ProgressBar.vue";
 import {
   ref,
@@ -483,217 +550,12 @@ import L from "leaflet";
 import "leaflet/dist/leaflet.css";
 import { brand } from "@/styles/palette";
 
-const activeKey = ref("residents");
+// ===== Constants / Static Config =====
+// 高雄「緊」與「鬆」的地圖邊界
+const KAOHSIUNG_BOUNDS_TIGHT = L.latLngBounds([22.45, 120.15], [22.95, 120.55]);
+const KAOHSIUNG_BOUNDS_LOOSE = L.latLngBounds([22.35, 120.0], [23.05, 120.75]);
 
-// 產生最近 7 天的標籤（M/D）
-function last7DaysLabels() {
-  const labels = [];
-  const now = new Date();
-  for (let i = 6; i >= 0; i--) {
-    const d = new Date(now);
-    d.setDate(now.getDate() - i);
-    labels.push(`${d.getMonth() + 1}/${d.getDate()}`);
-  }
-  return labels;
-}
-
-const chartEl = ref(null);
-let chart;
-
-// 圖表資料（依你的實際資料調整）
-const chartDataMap = {
-  residents: {
-    legends: ["現在住民", "全立案床數"],
-    a: [15, 58, 25, 75, 90, 38, 76],
-    b: [26, 78, 85, 32, 30, 52, 72],
-  },
-  vacancy: {
-    legends: ["目前空床數", "全立案床數"],
-    a: [30, 22, 18, 40, 55, 28, 33],
-    b: Array(7).fill(60),
-  },
-  hospitalized: {
-    legends: ["今日住院", "當月累積住院"],
-    a: [2, 6, 3, 9, 8, 4, 5],
-    b: [5, 12, 18, 22, 28, 36, 42],
-  },
-  movein: {
-    legends: ["今日入住", "當月累積入住"],
-    a: [1, 3, 2, 4, 5, 3, 6],
-    b: [4, 8, 12, 17, 22, 30, 36],
-  },
-  moveout: {
-    legends: ["今日離院", "累積離院"],
-    a: [1, 2, 1, 3, 2, 1, 2],
-    b: [5, 7, 9, 12, 14, 15, 17],
-  },
-};
-
-// ProgressBar 畫面上的 current/total（用來組圖表標題）
-const progressTitleMap = {
-  residents: { current: 240, total: 360 },
-  vacancy: { current: 120, total: 360 },
-  hospitalized: { current: 8, total: 50 },
-  movein: { current: 12, total: 50 },
-  moveout: { current: 8, total: 50 },
-};
-
-// 1) 共用：主標＋副標 helper（可放檔案上方 utilities 區）
-function mkTitle(text, subtext = "", opts = {}) {
-  return {
-    text,
-    subtext,
-    left: "center",
-    top: 6, // 主標距容器頂端
-    itemGap: 6, // 主標與副標的距離
-    textStyle: {
-      color: brand.black,
-      fontSize: 20,
-      fontWeight: 600,
-      fontFamily: '"Noto Sans TC"',
-    },
-    subtextStyle: {
-      color: brand.gray,
-      fontSize: 14,
-      fontWeight: 400,
-      fontFamily: '"Noto Sans TC"',
-      lineHeight: 20,
-    },
-    ...opts,
-  };
-}
-
-// 2) 改造 updateChartByKey：把 legends 當作副標
-function updateChartByKey(key) {
-  activeKey.value = key;
-  const conf = chartDataMap[key];
-
-  const title = `${conf.legends[0]} ／ ${conf.legends[1]}`;
-  const subTitle = "（近 7 天）";
-
-  chart.setOption({
-    color: [brand.green, brand.purple],
-
-    // 主標＋副標
-    title: mkTitle(title, subTitle),
-
-    // 建議加個 grid.top，避免標題區升高後擠到圖身
-    grid: { top: 70, containLabel: true },
-
-    legend: {
-      data: conf.legends,
-      bottom: 8,
-      icon: "circle",
-      itemWidth: 10,
-      itemHeight: 10,
-      itemGap: 24,
-      textStyle: { color: brand.gray },
-    },
-
-    yAxis: {
-      type: "value",
-      name: "數量",
-      nameLocation: "middle",
-      nameGap: 40,
-      axisLine: { show: true },
-      axisTick: { show: true },
-      axisLabel: { color: brand.gray },
-      splitLine: { show: true, lineStyle: { color: brand.grayLight } },
-      splitArea: {
-        show: true,
-        areaStyle: { color: [brand.white, brand.grayLighter] },
-      },
-    },
-
-    series: [
-      {
-        name: conf.legends[0],
-        type: "line",
-        data: conf.a,
-        symbol: "circle",
-        symbolSize: 6,
-        lineStyle: { width: 2 },
-      },
-      {
-        name: conf.legends[1],
-        type: "line",
-        data: conf.b,
-        symbol: "circle",
-        symbolSize: 6,
-        lineStyle: { width: 2 },
-      },
-    ],
-  });
-}
-
-onMounted(() => {
-  if (!chartEl.value) return;
-  chart = echarts.init(chartEl.value);
-
-  chart.setOption({
-    grid: { left: 36, right: 16, top: 44, bottom: 56, containLabel: true },
-    tooltip: { trigger: "axis", axisPointer: { type: "line" }, confine: true },
-    xAxis: {
-      type: "category",
-      boundaryGap: false,
-      data: last7DaysLabels(),
-      axisLine: { lineStyle: { color: brand.gray } },
-      axisTick: { show: false },
-      axisLabel: { color: brand.gray },
-      splitLine: { show: false },
-    },
-    yAxis: { type: "value", name: "數量" },
-    series: [],
-  });
-
-  updateChartByKey("residents");
-
-  // RWD
-  const onResize = () => chart?.resize();
-  window.addEventListener("resize", onResize);
-
-  chart.__onResize = onResize;
-});
-
-onBeforeUnmount(() => {
-  if (chart) {
-    window.removeEventListener("resize", chart.__onResize);
-    chart.dispose();
-    chart = null;
-  }
-});
-
-// 以 BASE_URL 為前綴，避免根目錄／子目錄路徑差異
-const base = import.meta.env.BASE_URL;
-const iconBase = `${base}img/leaflet/`;
-
-const defaultIcon = L.icon({
-  iconUrl: `${iconBase}marker-icon.png`,
-  iconRetinaUrl: `${iconBase}marker-icon-2x.png`,
-  shadowUrl: `${iconBase}marker-shadow.png`,
-  iconSize: [25, 41],
-  iconAnchor: [12, 41],
-  popupAnchor: [1, -34],
-  shadowSize: [41, 41],
-});
-
-L.Marker.prototype.options.icon = defaultIcon;
-
-const mapEl = ref(null);
-let map = null;
-let markers = []; // 供 tooltip 控制使用
-
-// 高雄「緊」與「鬆」的範圍
-const KAOHSIUNG_BOUNDS_TIGHT = L.latLngBounds(
-  [22.45, 120.15], // SW
-  [22.95, 120.55] // NE
-);
-const KAOHSIUNG_BOUNDS_LOOSE = L.latLngBounds(
-  [22.35, 120.0], // SW
-  [23.05, 120.75] // NE
-);
-
-// 六個據點（固定座標，無需再發 fetch）
+// 六個據點（固定座標，無需發 fetch）
 const LOCATIONS = [
   {
     name: "崇恩護理之家",
@@ -733,102 +595,496 @@ const LOCATIONS = [
   },
 ];
 
-// ====== 顯示資訊的模式（按鈕切換）=======
-// 目前選取：'none' | 'residents' | 'diet'
-const infoMode = ref("none"); // 想預設選「入住情況」就改成 'residents'
-function setInfoMode(mode) {
-  infoMode.value = mode;
-}
+// 以 BASE_URL 為前綴，避免根目錄／子目錄路徑差異
+const base = import.meta.env.BASE_URL;
+const iconBase = `${base}img/leaflet/`;
 
-// ========= 假資料 =========
-// 入住情況：三組數值（住民/立案、空床/立案、今日住院/當月累積）
-const RESIDENTS_DATA = {
-  崇恩護理之家: { residents: [36, 49], vacancy: [12, 49], hosp: [1, 20] },
-  育祐護理之家: { residents: [42, 60], vacancy: [8, 60], hosp: [0, 12] },
-  崇祐護理之家: { residents: [50, 70], vacancy: [15, 70], hosp: [2, 25] },
-  崇智護理之家: { residents: [38, 55], vacancy: [10, 55], hosp: [1, 18] },
-  護祐護理之家: { residents: [45, 62], vacancy: [9, 62], hosp: [0, 16] },
-  傳祐長照中心: { residents: [30, 40], vacancy: [6, 40], hosp: [1, 10] },
+// building_1 = 總部，2~7 = 六家機構
+const FACILITY_ASSETS = {
+ALL: `${base}img/building/building_1.jpg`, // 或想用總部圖：`${base}img/building/headquarter.png`
+崇恩護理之家: `${base}img/building/building_2.jpg`,
+育祐護理之家: `${base}img/building/building_3.jpg`,
+崇祐護理之家: `${base}img/building/building_4.jpg`,
+崇智護理之家: `${base}img/building/building_5.jpg`,
+護祐護理之家: `${base}img/building/building_6.jpg`,
+傳祐長照中心: `${base}img/building/building_7.jpg`,
 };
 
-// 飲食情況：葷／素 各四個數值（總數、一般、碎食、管灌）
-const DIET_DATA = {
+// Leaflet 預設圖標
+const defaultIcon = L.icon({
+  iconUrl: `${iconBase}marker-icon.png`,
+  iconRetinaUrl: `${iconBase}marker-icon-2x.png`,
+  shadowUrl: `${iconBase}marker-shadow.png`,
+  iconSize: [25, 41],
+  iconAnchor: [12, 41],
+  popupAnchor: [1, -34],
+  shadowSize: [41, 41],
+});
+L.Marker.prototype.options.icon = defaultIcon;
+
+// ===== Facility Mock Data (單一真實來源) =====
+const FACILITY_DATA = {
+  ALL: {
+    photo: "/img/building/headquarter.png",
+    desc: "崇恩長期照顧集團——大南部在地深耕，整合醫護團隊與專業照護人員，提供高齡照護服務總部。",
+    progress: {
+      residents: { current: 240, total: 360 },
+      vacancy: { current: 120, total: 360 },
+      hospitalized: { current: 8, total: 50 },
+      movein: { current: 12, total: 50 },
+      moveout: { current: 8, total: 50 },
+    },
+    charts: {
+      residents: {
+        legends: ["現在住民", "全立案床數"],
+        a: [15, 58, 25, 75, 90, 38, 76],
+        b: [26, 78, 85, 32, 30, 52, 72],
+      },
+      vacancy: {
+        legends: ["目前空床數", "全立案床數"],
+        a: [30, 22, 18, 40, 55, 28, 33],
+        b: Array(7).fill(60),
+      },
+      hospitalized: {
+        legends: ["今日住院", "當月累積住院"],
+        a: [2, 6, 3, 9, 8, 4, 5],
+        b: [5, 12, 18, 22, 28, 36, 42],
+      },
+      movein: {
+        legends: ["今日入住", "當月累積入住"],
+        a: [1, 3, 2, 4, 5, 3, 6],
+        b: [4, 8, 12, 17, 22, 30, 36],
+      },
+      moveout: {
+        legends: ["今日離院", "當月累積離院"],
+        a: [1, 2, 1, 3, 2, 1, 2],
+        b: [5, 7, 9, 12, 14, 15, 17],
+      },
+    },
+    diet: {
+      meat: { total: 508, normal: 440, soft: 28, tube: 40 },
+      veg: { total: 367, normal: 318, soft: 26, tube: 23 },
+    },
+  },
   崇恩護理之家: {
-    meat: { total: 101, normal: 91, soft: 5, tube: 5 },
-    veg: { total: 82, normal: 72, soft: 5, tube: 5 },
+    photo: "/img/building/chong-en.png",
+    desc: "崇恩護理之家重視跨專業合作，提供 24 小時專業護理與生活照顧服務。",
+    progress: {
+      residents: { current: 36, total: 49 },
+      vacancy: { current: 12, total: 49 },
+      hospitalized: { current: 1, total: 20 },
+      movein: { current: 2, total: 12 },
+      moveout: { current: 1, total: 10 },
+    },
+    charts: {
+      residents: {
+        legends: ["現在住民", "立案床數"],
+        a: [34, 35, 36, 37, 36, 36, 36],
+        b: Array(7).fill(49),
+      },
+      vacancy: {
+        legends: ["空床", "立案床數"],
+        a: [13, 12, 12, 11, 12, 12, 12],
+        b: Array(7).fill(49),
+      },
+      hospitalized: {
+        legends: ["今日住院", "當月累積"],
+        a: [0, 0, 1, 0, 1, 0, 1],
+        b: [5, 7, 10, 12, 14, 17, 20],
+      },
+      movein: {
+        legends: ["今日入住", "當月累積"],
+        a: [0, 1, 0, 2, 0, 1, 2],
+        b: [2, 4, 6, 8, 9, 10, 12],
+      },
+      moveout: {
+        legends: ["今日離院", "累積離院"],
+        a: [0, 1, 0, 1, 0, 1, 0],
+        b: [1, 3, 4, 6, 7, 8, 10],
+      },
+    },
+    diet: {
+      meat: { total: 101, normal: 91, soft: 5, tube: 5 },
+      veg: { total: 82, normal: 72, soft: 5, tube: 5 },
+    },
   },
   育祐護理之家: {
-    meat: { total: 87, normal: 79, soft: 5, tube: 3 },
-    veg: { total: 61, normal: 53, soft: 5, tube: 3 },
+    photo: "/img/building/yu-you.png",
+    desc: "育祐護理之家以長者需求為中心，打造安全舒適的照護環境。",
+    progress: {
+      residents: { current: 42, total: 60 },
+      vacancy: { current: 8, total: 60 },
+      hospitalized: { current: 0, total: 12 },
+      movein: { current: 3, total: 11 },
+      moveout: { current: 1, total: 9 },
+    },
+    charts: {
+      residents: {
+        legends: ["現在住民", "立案床數"],
+        a: [40, 41, 41, 42, 42, 42, 42],
+        b: Array(7).fill(60),
+      },
+      vacancy: {
+        legends: ["空床", "立案床數"],
+        a: [10, 9, 9, 8, 8, 8, 8],
+        b: Array(7).fill(60),
+      },
+      hospitalized: {
+        legends: ["今日住院", "當月累積"],
+        a: [0, 0, 0, 0, 0, 0, 0],
+        b: [1, 2, 4, 5, 7, 9, 12],
+      },
+      movein: {
+        legends: ["今日入住", "當月累積"],
+        a: [0, 1, 0, 2, 0, 1, 3],
+        b: [2, 4, 6, 8, 9, 10, 11],
+      },
+      moveout: {
+        legends: ["今日離院", "累積離院"],
+        a: [0, 1, 0, 0, 0, 0, 1],
+        b: [1, 3, 4, 6, 7, 8, 9],
+      },
+    },
+    diet: {
+      meat: { total: 87, normal: 79, soft: 5, tube: 3 },
+      veg: { total: 61, normal: 53, soft: 5, tube: 3 },
+    },
   },
   崇祐護理之家: {
-    meat: { total: 93, normal: 84, soft: 5, tube: 5 },
-    veg: { total: 71, normal: 62, soft: 5, tube: 4 },
+    photo: "/img/building/chong-you.png",
+    desc: "崇祐護理之家強調復健與社會參與，陪伴長者建立日常節奏。",
+    progress: {
+      residents: { current: 50, total: 70 },
+      vacancy: { current: 15, total: 70 },
+      hospitalized: { current: 2, total: 25 },
+      movein: { current: 2, total: 13 },
+      moveout: { current: 2, total: 11 },
+    },
+    charts: {
+      residents: {
+        legends: ["現在住民", "立案床數"],
+        a: [48, 49, 49, 50, 50, 50, 50],
+        b: Array(7).fill(70),
+      },
+      vacancy: {
+        legends: ["空床", "立案床數"],
+        a: [16, 16, 15, 15, 15, 15, 15],
+        b: Array(7).fill(70),
+      },
+      hospitalized: {
+        legends: ["今日住院", "當月累積"],
+        a: [0, 1, 1, 2, 0, 1, 2],
+        b: [5, 7, 10, 14, 17, 21, 25],
+      },
+      movein: {
+        legends: ["今日入住", "當月累積"],
+        a: [0, 1, 0, 2, 0, 0, 2],
+        b: [3, 5, 7, 9, 10, 11, 13],
+      },
+      moveout: {
+        legends: ["今日離院", "累積離院"],
+        a: [0, 1, 0, 1, 0, 1, 2],
+        b: [2, 4, 6, 7, 9, 10, 11],
+      },
+    },
+    diet: {
+      meat: { total: 93, normal: 84, soft: 5, tube: 5 },
+      veg: { total: 71, normal: 62, soft: 5, tube: 4 },
+    },
   },
   崇智護理之家: {
-    meat: { total: 75, normal: 67, soft: 5, tube: 3 },
-    veg: { total: 51, normal: 44, soft: 3, tube: 5 },
+    photo: "/img/building/chong-zhi.png",
+    desc: "崇智護理之家導入智慧照護設備，提升照護品質與效率。",
+    progress: {
+      residents: { current: 38, total: 55 },
+      vacancy: { current: 10, total: 55 },
+      hospitalized: { current: 1, total: 18 },
+      movein: { current: 3, total: 10 },
+      moveout: { current: 2, total: 9 },
+    },
+    charts: {
+      residents: {
+        legends: ["現在住民", "立案床數"],
+        a: [36, 37, 38, 38, 38, 38, 38],
+        b: Array(7).fill(55),
+      },
+      vacancy: {
+        legends: ["空床", "立案床數"],
+        a: [11, 11, 10, 10, 10, 10, 10],
+        b: Array(7).fill(55),
+      },
+      hospitalized: {
+        legends: ["今日住院", "當月累積"],
+        a: [0, 1, 0, 1, 0, 0, 1],
+        b: [3, 6, 8, 10, 12, 15, 18],
+      },
+      movein: {
+        legends: ["今日入住", "當月累積"],
+        a: [0, 1, 0, 1, 0, 0, 3],
+        b: [2, 4, 6, 7, 8, 9, 10],
+      },
+      moveout: {
+        legends: ["今日離院", "累積離院"],
+        a: [0, 1, 0, 0, 1, 0, 2],
+        b: [1, 3, 4, 6, 7, 8, 9],
+      },
+    },
+    diet: {
+      meat: { total: 75, normal: 67, soft: 5, tube: 3 },
+      veg: { total: 51, normal: 44, soft: 3, tube: 5 },
+    },
   },
   護祐護理之家: {
-    meat: { total: 81, normal: 73, soft: 5, tube: 3 },
-    veg: { total: 57, normal: 49, soft: 5, tube: 3 },
+    photo: "/img/building/hu-you.png",
+    desc: "護祐護理之家著重個別化照護計畫，維護長者尊嚴與生活品質。",
+    progress: {
+      residents: { current: 45, total: 62 },
+      vacancy: { current: 9, total: 62 },
+      hospitalized: { current: 0, total: 16 },
+      movein: { current: 2, total: 10 },
+      moveout: { current: 1, total: 8 },
+    },
+    charts: {
+      residents: {
+        legends: ["現在住民", "立案床數"],
+        a: [44, 44, 45, 45, 45, 45, 45],
+        b: Array(7).fill(62),
+      },
+      vacancy: {
+        legends: ["空床", "立案床數"],
+        a: [10, 10, 9, 9, 9, 9, 9],
+        b: Array(7).fill(62),
+      },
+      hospitalized: {
+        legends: ["今日住院", "當月累積"],
+        a: [0, 0, 0, 0, 0, 0, 0],
+        b: [2, 4, 6, 8, 10, 13, 16],
+      },
+      movein: {
+        legends: ["今日入住", "當月累積"],
+        a: [0, 1, 0, 1, 0, 0, 2],
+        b: [2, 4, 6, 7, 8, 9, 10],
+      },
+      moveout: {
+        legends: ["今日離院", "累積離院"],
+        a: [0, 0, 1, 0, 0, 0, 1],
+        b: [1, 2, 4, 5, 6, 7, 8],
+      },
+    },
+    diet: {
+      meat: { total: 81, normal: 73, soft: 5, tube: 3 },
+      veg: { total: 57, normal: 49, soft: 5, tube: 3 },
+    },
   },
   傳祐長照中心: {
-    meat: { total: 63, normal: 56, soft: 3, tube: 5 },
-    veg: { total: 45, normal: 38, soft: 3, tube: 5 },
+    photo: "/img/building/chuan-you.png",
+    desc: "傳祐長照中心以社區融入為核心，串連日照與居家照護資源。",
+    progress: {
+      residents: { current: 30, total: 40 },
+      vacancy: { current: 6, total: 40 },
+      hospitalized: { current: 1, total: 10 },
+      movein: { current: 1, total: 9 },
+      moveout: { current: 1, total: 7 },
+    },
+    charts: {
+      residents: {
+        legends: ["現在住民", "立案床數"],
+        a: [28, 29, 30, 30, 30, 30, 30],
+        b: Array(7).fill(40),
+      },
+      vacancy: {
+        legends: ["空床", "立案床數"],
+        a: [7, 7, 6, 6, 6, 6, 6],
+        b: Array(7).fill(40),
+      },
+      hospitalized: {
+        legends: ["今日住院", "當月累積"],
+        a: [0, 1, 0, 0, 0, 0, 1],
+        b: [2, 4, 5, 6, 7, 9, 10],
+      },
+      movein: {
+        legends: ["今日入住", "當月累積"],
+        a: [0, 0, 1, 0, 0, 0, 1],
+        b: [1, 3, 4, 5, 6, 8, 9],
+      },
+      moveout: {
+        legends: ["今日離院", "累積離院"],
+        a: [0, 1, 0, 0, 0, 0, 1],
+        b: [1, 2, 3, 4, 5, 6, 7],
+      },
+    },
+    diet: {
+      meat: { total: 63, normal: 56, soft: 3, tube: 5 },
+      veg: { total: 45, normal: 38, soft: 3, tube: 5 },
+    },
   },
 };
 
-// ========== 產生 tooltip HTML ==========
-function getResidentsHtml(name) {
-  const d = RESIDENTS_DATA[name] || {
-    residents: [0, 0],
-    vacancy: [0, 0],
-    hosp: [0, 0],
+// ===== Reactive State =====
+const activeKey = ref("residents"); // 圖表目前指標
+const selectedFacility = ref("ALL"); // 當前顯示之機構
+const infoMode = ref("none"); // 地圖顯示資訊模式：'none' | 'residents' | 'diet'
+
+// ===== Computed =====
+const currentFacility = computed(() => {
+  const data = FACILITY_DATA[selectedFacility.value] || FACILITY_DATA.ALL;
+  const key = selectedFacility.value || "ALL";
+  return {
+    ...data,
+    photo: FACILITY_ASSETS[key] || FACILITY_ASSETS.ALL, 
   };
+});
+
+const facilityDisplayName = computed(() =>
+  selectedFacility.value === "ALL" ? "總部" : selectedFacility.value
+);
+
+// ===== Utilities =====
+function last7DaysLabels() {
+  const labels = [];
+  const now = new Date();
+  for (let i = 6; i >= 0; i--) {
+    const d = new Date(now);
+    d.setDate(now.getDate() - i);
+    labels.push(`${d.getMonth() + 1}/${d.getDate()}`);
+  }
+  return labels;
+}
+
+function mkTitle(text, subtext = "", opts = {}) {
+  return {
+    text,
+    subtext,
+    left: "center",
+    top: 12,
+    itemGap: 8,
+    textStyle: {
+      color: brand.black,
+      fontSize: 20,
+      fontWeight: 600,
+      fontFamily: '"Noto Sans TC"',
+    },
+    subtextStyle: {
+      color: brand.gray,
+      fontSize: 14,
+      fontWeight: 400,
+      fontFamily: '"Noto Sans TC"',
+      lineHeight: 20,
+    },
+    ...opts,
+  };
+}
+
+// ===== Charts (ECharts) =====
+const chartEl = ref(null);
+let chart = null;
+
+function updateChartByKey(key) {
+  activeKey.value = key;
+  const conf = currentFacility.value.charts[key];
+  if (!chart || !conf) return;
+
+  const title = `${conf.legends[0]} ／ ${conf.legends[1]}`;
+  const subTitle = "（近 7 天）";
+
+  chart.setOption({
+    color: [brand.green, brand.purple],
+    title: mkTitle(title, subTitle),
+    grid: { top: 84, left: 36, right: 16, bottom: 56, containLabel: true },
+    tooltip: { trigger: "axis", axisPointer: { type: "line" }, confine: true },
+    xAxis: {
+      type: "category",
+      boundaryGap: false,
+      data: last7DaysLabels(),
+      axisLine: { lineStyle: { color: brand.gray } },
+      axisTick: { show: false },
+      axisLabel: { color: brand.gray },
+      splitLine: { show: false },
+    },
+    legend: {
+      data: conf.legends,
+      bottom: 8,
+      icon: "circle",
+      itemWidth: 10,
+      itemHeight: 10,
+      itemGap: 24,
+      textStyle: { color: brand.gray },
+    },
+    yAxis: {
+      type: "value",
+      name: "數量",
+      nameLocation: "middle",
+      nameGap: 52,
+      nameTextStyle: { padding: [0, 8, 0, 8] },
+      axisLine: { show: true },
+      axisTick: { show: true },
+      axisLabel: { color: brand.gray },
+      splitLine: { show: true, lineStyle: { color: brand.grayLight } },
+      splitArea: {
+        show: true,
+        areaStyle: { color: [brand.white, brand.grayLighter] },
+      },
+    },
+    series: [
+      {
+        name: conf.legends[0],
+        type: "line",
+        data: conf.a,
+        symbol: "circle",
+        symbolSize: 6,
+        lineStyle: { width: 2 },
+      },
+      {
+        name: conf.legends[1],
+        type: "line",
+        data: conf.b,
+        symbol: "circle",
+        symbolSize: 6,
+        lineStyle: { width: 2 },
+      },
+    ],
+  });
+}
+
+// ===== Map (Leaflet) =====
+const mapEl = ref(null);
+let map = null;
+let markers = [];
+
+function getResidentsHtml(name) {
+  const f = FACILITY_DATA[name];
+  const p = f?.progress || {};
+  const residents = p.residents
+    ? [p.residents.current, p.residents.total]
+    : [0, 0];
+  const vacancy = p.vacancy ? [p.vacancy.current, p.vacancy.total] : [0, 0];
+  const hosp = p.hospitalized
+    ? [p.hospitalized.current, p.hospitalized.total]
+    : [0, 0];
   return `
-<div class="tip p-2">
+<div class="tip p-2" style="cursor:pointer" data-facility="${name}">
   <div class="flex flex-col gap-2">
-    <!-- 第一列：icon + 名稱 -->
     <div class="inline-flex justify-between items-center text-brand-purple-dark font-noto">
       <div class="inline-flex justify-start items-center gap-1">
-        <span>
-          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24">
-            <path fill="currentColor" d="M5 19v-8.692q0-.384.172-.727t.474-.565l5.385-4.078q.423-.323.966-.323t.972.323l5.385 4.077q.303.222.474.566q.172.343.172.727V19q0 .402-.299.701T18 20h-3.384q-.344 0-.576-.232q-.232-.233-.232-.576v-4.769q0-.343-.232-.575q-.233-.233-.576-.233h-2q-.343 0-.575.233q-.233.232-.233.575v4.77q0 .343-.232.575T9.385 20H6q-.402 0-.701-.299T5 19"/>
-          </svg>
-        </span>
+        <span><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path fill="currentColor" d="M5 19v-8.692q0-.384.172-.727t.474-.565l5.385-4.078q.423-.323.966-.323t.972.323l5.385 4.077q.303.222.474.566q.172.343.172.727V19q0 .402-.299.701T18 20h-3.384q-.344 0-.576-.232q-.232-.233-.232-.576v-4.769q0-.343-.232-.575q-.233-.233-.576-.233h-2q-.343 0-.575.233q-.233.232-.233.575v4.77q0 .343-.232.575T9.385 20H6q-.402 0-.701-.299T5 19"/></svg></span>
         <strong class="text-[14px]">${name}</strong>
       </div>
-      <div>
-        <span class="text-brand-gray/50">
-          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24">
-            <path fill="currentColor" d="M12 9a3 3 0 0 0-3 3a3 3 0 0 0 3 3a3 3 0 0 0 3-3a3 3 0 0 0-3-3m0 8a5 5 0 0 1-5-5a5 5 0 0 1 5-5a5 5 0 0 1 5 5a5 5 0 0 1-5 5m0-12.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5"/>
-          </svg>
-        </span>
-      </div>
+      <div><span class="text-brand-gray/50"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path fill="currentColor" d="M12 9a3 3 0 0 0-3 3a3 3 0 0 0 3 3a3 3 0 0 0 3-3a3 3 0 0 0-3-3m0 8a5 5 0 0 1-5-5a5 5 0 0 1 5-5a5 5 0 0 1 5 5a5 5 0 0 1-5 5m0-12.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5"/></svg></span></div>
     </div>
-
-    <!-- 第二列：統計卡群 -->
-    <div class="inline-block rounded-md border border-gray-300 overflow-hidden">
+    <div class="inline-block rounded-md border border-brand-gray/30 overflow-hidden">
       <table class="table-fixed min-w-[180px] border-collapse">
-        <thead class="bg-brand-gray-lighter text-brand-black">
+        <thead class="bg-brand-purple-light text-brand-black">
           <tr class="text-center">
-            <th class="text-[14px] p-2 text-center border-r border-gray-300 w-[80px]">住民</th>
-            <th class="text-[14px] p-2 text-center border-r border-gray-300 w-[80px]">空床</th>
+            <th class="text-[14px] p-2 text-center border-r border-brand-gray/30 w-[80px]">住民</th>
+            <th class="text-[14px] p-2 text-center border-r border-brand-gray/30 w-[80px]">空床</th>
             <th class="text-[14px] p-2 text-center w-[80px]">住院</th>
           </tr>
         </thead>
         <tbody>
           <tr class="text-center">
-            <td class="px-3 py-2 border-r border-gray-300 w-[80px]">
-              <span class="font-nats text-xl text-brand-purple-dark">${d.residents[0]} / ${d.residents[1]}</span>
-            </td>
-            <td class="px-3 py-2 border-r border-gray-300 w-[80px]">
-              <span class="font-nats text-xl text-brand-purple-dark">${d.vacancy[0]} / ${d.vacancy[1]}</span>
-            </td>
-            <td class="px-3 py-2 w-[80px]">
-              <span class="font-nats text-xl text-brand-purple-dark">${d.hosp[0]} / ${d.hosp[1]}</span>
-            </td>
+            <td class="px-3 py-2 border-r border-brand-gray/30 w-[80px]"><span class="font-nats text-xl text-brand-purple-dark">${residents[0]} / ${residents[1]}</span></td>
+            <td class="px-3 py-2 border-r border-brand-gray/30 w-[80px]"><span class="font-nats text-xl text-brand-purple-dark">${vacancy[0]} / ${vacancy[1]}</span></td>
+            <td class="px-3 py-2 w-[80px]"><span class="font-nats text-xl text-brand-purple-dark">${hosp[0]} / ${hosp[1]}</span></td>
           </tr>
         </tbody>
       </table>
@@ -838,74 +1094,44 @@ function getResidentsHtml(name) {
 }
 
 function getDietHtml(name) {
-  const d = DIET_DATA[name] || {
+  const d = FACILITY_DATA[name]?.diet || {
     meat: { total: 0, normal: 0, soft: 0, tube: 0 },
     veg: { total: 0, normal: 0, soft: 0, tube: 0 },
   };
   return `
-<div class="tip p-2">
+<div class="tip p-2" style="cursor:pointer" data-facility="${name}">
   <div class="flex flex-col gap-2">
-    <!-- 第一列：icon + 名稱 -->
     <div class="inline-flex justify-between items-center text-brand-purple-dark font-noto">
       <div class="inline-flex justify-start items-center gap-1">
-        <span>
-          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24">
-            <path fill="currentColor" d="M5 19v-8.692q0-.384.172-.727t.474-.565l5.385-4.078q.423-.323.966-.323t.972.323l5.385 4.077q.303.222.474.566q.172.343.172.727V19q0 .402-.299.701T18 20h-3.384q-.344 0-.576-.232q-.232-.233-.232-.576v-4.769q0-.343-.232-.575q-.233-.233-.576-.233h-2q-.343 0-.575.233q-.233.232-.233.575v4.77q0 .343-.232.575T9.385 20H6q-.402 0-.701-.299T5 19"/>
-          </svg>
-        </span>
+        <span><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path fill="currentColor" d="M5 19v-8.692q0-.384.172-.727t.474-.565l5.385-4.078q.423-.323.966-.323t.972.323l5.385 4.077q.303.222.474.566q.172.343.172.727V19q0 .402-.299.701T18 20h-3.384q-.344 0-.576-.232q-.232-.233-.232-.576v-4.769q0-.343-.232-.575q-.233-.233-.576-.233h-2q-.343 0-.575.233q-.233.232-.233.575v4.77q0 .343-.232.575T9.385 20H6q-.402 0-.701-.299T5 19"/></svg></span>
         <strong class="text-[14px]">${name}</strong>
       </div>
-      <div>
-        <span class="text-brand-gray/50">
-          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24">
-            <path fill="currentColor" d="M12 9a3 3 0 0 0-3 3a3 3 0 0 0 3 3a3 3 0 0 0 3-3a3 3 0 0 0-3-3m0 8a5 5 0 0 1-5-5a5 5 0 0 1 5-5a5 5 0 0 1 5 5a5 5 0 0 1-5 5m0-12.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5"/>
-          </svg>
-        </span>
-      </div>
+      <div><span class="text-brand-gray/50"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path fill="currentColor" d="M12 9a3 3 0 0 0-3 3a3 3 0 0 0 3 3a3 3 0 0 0 3-3a3 3 0 0 0-3-3m0 8a5 5 0 0 1-5-5a5 5 0 0 1 5-5a5 5 0 0 1 5 5a5 5 0 0 1-5 5m0-12.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5"/></svg></span></div>
     </div>
-
-    <!-- 葷：四欄 Table -->
-    <div class="inline-block rounded-md border border-brand-yellow overflow-hidden">
+    <div class="inline-block rounded-md border border-brand-gray/30 overflow-hidden">
       <table class="table-fixed w-[240px] min-w-[200px] border-collapse">
-        <thead class="bg-brand-gray-lighter text-brand-black">
+        <thead class="bg-brand-purple-light text-brand-black">
           <tr class="text-center">
-            <th class="px-3 py-2 text-center border-r border-gray-300 w-[60px]">類別</th>
-            <th class="px-3 py-2 text-center border-r border-gray-300 w-[60px]">總數</th>
-            <th class="px-3 py-2 text-center border-r border-gray-300 w-[60px]">一般</th>
-            <th class="px-3 py-2 text-center border-r border-gray-300 w-[60px]">碎食</th>
+            <th class="px-3 py-2 text-center border-r border-brand-gray/30 w-[60px]">類別</th>
+            <th class="px-3 py-2 text-center border-r border-brand-gray/30 w-[60px]">總數</th>
+            <th class="px-3 py-2 text-center border-r border-brand-gray/30 w-[60px]">一般</th>
+            <th class="px-3 py-2 text-center border-r border-brand-gray/30 w-[60px]">碎食</th>
             <th class="px-3 py-2 text-center w-[60px]">管灌</th>
           </tr>
         </thead>
         <tbody>
           <tr class="text-center">
-            <td class="px-3 py-2 border-r border-gray-300 w-[60px]"><span class="text-[14px] font-noto text-brand-purple-dark">葷</span></td>
-            <td class="px-3 py-2 border-r border-gray-300 w-[60px]"><span class="font-nats text-xl text-brand-purple-dark">${d.meat.total}</span></td>
-            <td class="px-3 py-2 border-r border-gray-300 w-[60px]"><span class="font-nats text-xl text-brand-purple-dark">${d.meat.normal}</span></td>
-            <td class="px-3 py-2 border-r border-gray-300 w-[60px]"><span class="font-nats text-xl text-brand-purple-dark">${d.meat.soft}</span></td>
+            <td class="px-3 py-2 border-r border-brand-gray/30 w-[60px]"><span class="text-[14px] font-noto text-brand-dark">葷</span></td>
+            <td class="px-3 py-2 border-r border-brand-gray/30 w-[60px]"><span class="font-nats text-xl text-brand-purple-dark">${d.meat.total}</span></td>
+            <td class="px-3 py-2 border-r border-brand-gray/30 w-[60px]"><span class="font-nats text-xl text-brand-purple-dark">${d.meat.normal}</span></td>
+            <td class="px-3 py-2 border-r border-brand-gray/30 w-[60px]"><span class="font-nats text-xl text-brand-purple-dark">${d.meat.soft}</span></td>
             <td class="px-3 py-2 w-[60px]"><span class="font-nats text-xl text-brand-purple-dark">${d.meat.tube}</span></td>
           </tr>
-        </tbody>
-      </table>
-    </div>
-
-    <!-- 素：四欄 Table -->
-    <div class="inline-block rounded-md border border-brand-yellow overflow-hidden">
-      <table class="table-fixed w-[240px] min-w-[200px] border-collapse">
-        <thead class="bg-brand-gray-lighter text-brand-black">
           <tr class="text-center">
-            <th class="px-3 py-2 text-center border-r border-gray-300 w-[60px]">類別</th>
-            <th class="px-3 py-2 text-center border-r border-gray-300 w-[60px]">總數</th>
-            <th class="px-3 py-2 text-center border-r border-gray-300 w-[60px]">一般</th>
-            <th class="px-3 py-2 text-center border-r border-gray-300 w-[60px]">碎食</th>
-            <th class="px-3 py-2 text-center w-[60px]">管灌</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr class="text-center">
-            <td class="px-3 py-2 border-r border-gray-300 w-[60px]"><span class="text-[14px] font-noto text-brand-purple-dark">素</span></td>
-            <td class="px-3 py-2 border-r border-gray-300 w-[60px]"><span class="font-nats text-xl text-brand-purple-dark">${d.veg.total}</span></td>
-            <td class="px-3 py-2 border-r border-gray-300 w-[60px]"><span class="font-nats text-xl text-brand-purple-dark">${d.veg.normal}</span></td>
-            <td class="px-3 py-2 border-r border-gray-300 w-[60px]"><span class="font-nats text-xl text-brand-purple-dark">${d.veg.soft}</span></td>
+            <td class="px-3 py-2 border-r border-brand-gray/30 w-[60px]"><span class="text-[14px] font-noto text-brand-dark">素</span></td>
+            <td class="px-3 py-2 border-r border-brand-gray/30 w-[60px]"><span class="font-nats text-xl text-brand-purple-dark">${d.veg.total}</span></td>
+            <td class="px-3 py-2 border-r border-brand-gray/30 w-[60px]"><span class="font-nats text-xl text-brand-purple-dark">${d.veg.normal}</span></td>
+            <td class="px-3 py-2 border-r border-brand-gray/30 w-[60px]"><span class="font-nats text-xl text-brand-purple-dark">${d.veg.soft}</span></td>
             <td class="px-3 py-2 w-[60px]"><span class="font-nats text-xl text-brand-purple-dark">${d.veg.tube}</span></td>
           </tr>
         </tbody>
@@ -921,10 +1147,22 @@ function getTooltipHtml(mode, name) {
   return "";
 }
 
+function selectFacility(name) {
+  selectedFacility.value = FACILITY_DATA[name] ? name : "ALL";
+  nextTick(() => updateChartByKey(activeKey.value));
+}
+
 function refreshAllTooltips() {
   if (!markers?.length) return;
-  for (const m of markers)
-    m.getTooltip && m.getTooltip() && m.getTooltip().update();
+  for (const m of markers) m.getTooltip?.()?.update?.();
+}
+
+function resetFacility() {
+  // 回到初始：全部機構 + 保留目前圖表類型
+  selectedFacility.value = "ALL";
+  nextTick(() => {
+    updateChartByKey(activeKey.value);
+  });
 }
 
 function syncTooltips() {
@@ -934,87 +1172,124 @@ function syncTooltips() {
   const offset = [0, -(iconH + 8)];
 
   for (const m of markers) {
-    if (typeof m.unbindTooltip === "function") m.unbindTooltip();
+    const name = m.__name || m.options?.title || "";
 
     if (infoMode.value === "none") {
-      continue; // 不顯示：不綁 tooltip
+      m.unbindTooltip?.();
+      continue;
     }
 
-    const name = m.__name || m.options?.title || "";
     const html = getTooltipHtml(infoMode.value, name);
-    m.bindTooltip(html, {
-      permanent: true,
-      direction: "top",
-      offset,
-      opacity: 0.95,
-    });
+    const cur = m.getTooltip?.();
+    const needsRebind = !cur || cur.getContent?.() !== html;
+
+    if (needsRebind) {
+      m.unbindTooltip?.();
+      m.bindTooltip(html, {
+        permanent: true,
+        direction: "top",
+        offset,
+        opacity: 0.95,
+        interactive: true,
+      });
+    }
+
+    // 掛上 click
+    const t = m.getTooltip?.();
+    if (t && typeof t.getElement === "function") {
+      const el = t.getElement();
+      if (el && !el.__clickBound) {
+        el.__clickBound = true;
+        el.style.cursor = "pointer";
+        el.addEventListener("click", (e) => {
+          const target = e.currentTarget;
+          const facility = target?.getAttribute?.("data-facility") || name;
+          selectFacility(facility);
+        });
+      }
+    }
   }
 
-  // 切換後修正地圖尺寸
-  if (map && typeof map.invalidateSize === "function") map.invalidateSize();
+  if (map?.invalidateSize) {
+    requestAnimationFrame(() => {
+      map.invalidateSize();
+      refreshAllTooltips();
+    });
+  }
 }
 
+// ===== Lifecycle (mount/unmount) =====
 onMounted(() => {
-  if (!mapEl.value) return;
+  // ECharts
+  if (chartEl.value) {
+    chart = echarts.init(chartEl.value);
+    updateChartByKey(activeKey.value);
+  }
 
-  map = L.map(mapEl.value, {
-    center: [22.6273, 120.3014],
-    zoom: 13,
-    minZoom: 12,
-    maxZoom: 20,
-    zoomSnap: 0.25,
-    zoomDelta: 0.25,
-    maxBounds: KAOHSIUNG_BOUNDS_LOOSE,
-    maxBoundsViscosity: 0.8,
-    preferCanvas: true,
-    zoomControl: false, // 關閉左上角 +/-
-  });
+  // Leaflet Map
+  if (mapEl.value) {
+    map = L.map(mapEl.value, {
+      center: [22.6273, 120.3014],
+      zoom: 13,
+      minZoom: 12,
+      maxZoom: 20,
+      zoomSnap: 0.25,
+      zoomDelta: 0.25,
+      maxBounds: KAOHSIUNG_BOUNDS_LOOSE,
+      maxBoundsViscosity: 0.8,
+      preferCanvas: true,
+      zoomControl: false,
+    });
 
-  L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
-    maxZoom: 20,
-    attribution:
-      '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
-  }).addTo(map);
+    L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
+      maxZoom: 20,
+      attribution:
+        '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
+    }).addTo(map);
 
-  // 建立 featureGroup 以便一次調整視野
-  const group = L.featureGroup();
-  markers = []; // 先清空
-  LOCATIONS.forEach((p) => {
-    const m = L.marker([p.lat, p.lng], { title: p.name });
-    m.__name = p.name; // 之後依名稱取假資料
-    m.addTo(group);
-    markers.push(m);
-  });
-  group.addTo(map);
+    const group = L.featureGroup();
+    markers = [];
+    LOCATIONS.forEach((p) => {
+      const m = L.marker([p.lat, p.lng], { title: p.name });
+      m.__name = p.name;
+      m.addTo(group);
+      markers.push(m);
+    });
+    group.addTo(map);
 
-  const bounds = group.getBounds().pad(0.06);
-  map.fitBounds(bounds, {
-    paddingTopLeft: [24, 140],
-    paddingBottomRight: [24, 24],
-    maxZoom: 15,
-  });
+    const bounds = group.getBounds().pad(0.06);
+    map.fitBounds(bounds, {
+      paddingTopLeft: [24, 140],
+      paddingBottomRight: [24, 24],
+      maxZoom: 15,
+    });
 
-  // 初次依當前模式綁定 tooltip（none = 不綁）
-  syncTooltips();
+    // 初次依當前模式綁定 tooltip
+    syncTooltips();
 
-  // 初始化後延遲重算一次尺寸（避免初次渲染壓扁）
-  setTimeout(() => map?.invalidateSize(), 0);
+    // 初始後多次 invalidateSize，避免白屏
+    requestAnimationFrame(() => {
+      map?.invalidateSize?.();
+      requestAnimationFrame(() => {
+        map?.invalidateSize?.();
+        refreshAllTooltips();
+      });
+    });
 
-  // 視窗尺寸改變時也重算（與 ECharts 相同）
-  const onResize = () => {
-    chart?.resize?.();
-    map?.invalidateSize?.();
-    refreshAllTooltips();
-  };
-  window.addEventListener("resize", onResize);
+    // 互動後更新 tooltip 位置
+    map.on("zoomend", refreshAllTooltips);
+    map.on("moveend", refreshAllTooltips);
+    map.on("resize", refreshAllTooltips);
 
-  // 互動後更新 tooltip 位置
-  map.on("zoomend", refreshAllTooltips);
-  map.on("moveend", refreshAllTooltips);
-  map.on("resize", refreshAllTooltips);
-
-  // 存起來以便卸載時移除
-  map.__onResize = onResize;
+    // 視窗尺寸改變
+    const onResize = () => {
+      chart?.resize?.();
+      map?.invalidateSize?.();
+      refreshAllTooltips();
+    };
+    window.addEventListener("resize", onResize);
+    map.__onResize = onResize;
+  }
 });
 
 onBeforeUnmount(() => {
@@ -1028,102 +1303,100 @@ onBeforeUnmount(() => {
     map.remove();
     map = null;
   }
+  if (chart) {
+    chart.dispose();
+    chart = null;
+  }
 });
 
-// 按鈕切換後：依模式顯示/隱藏 tooltip
+// ===== Watches =====
 watch(infoMode, async () => {
   await nextTick();
-  syncTooltips();
+  // 兩次 rAF 確保尺寸穩定
+  requestAnimationFrame(() => {
+    syncTooltips();
+    requestAnimationFrame(() => {
+      map?.invalidateSize?.();
+      refreshAllTooltips();
+    });
+  });
 });
 
-// =======（以下維持你的右欄表格資料與分頁）=======
+watch(selectedFacility, () => {
+  // 切換機構時，更新圖表即可；左欄資料用 computed 自動更新
+  nextTick(() => updateChartByKey(activeKey.value));
+});
+
+// ===== Right Pane Tables (保留原有假資料與分頁) =====
 const rows = ref([
-  {
-    id: 1,
-    time: "10:00",
-    org: "崇祐護理之家",
-    title: "全人評估相關課程",
-  },
-  {
-    id: 2,
-    time: "14:00",
-    org: "崇祐護理之家",
-    title: "CPR教育訓練",
-  },
-  {
-    id: 3,
-    time: "20:00",
-    org: "傳祐長照中心",
-    title: "消防夜間演練",
-  },
+  { id: 1, time: "10:00", org: "崇祐護理之家", title: "全人評估相關課程" },
+  { id: 2, time: "14:00", org: "崇祐護理之家", title: "CPR教育訓練" },
+  { id: 3, time: "20:00", org: "傳祐長照中心", title: "消防夜間演練" },
 ]);
 
-// 分頁參數
 const pageSize = 10;
 const currentPage = ref(1);
 const total = computed(() => rows.value.length);
 const totalPages = computed(() =>
   Math.max(1, Math.ceil(total.value / pageSize))
 );
-
-const pagedRows = computed(() => {
-  const start = (currentPage.value - 1) * pageSize;
-  return rows.value.slice(start, start + pageSize);
-});
-
-function viewDetail(row) {
-  console.log("查看詳情：", row);
-}
+const pagedRows = computed(() =>
+  rows.value.slice(
+    (currentPage.value - 1) * pageSize,
+    (currentPage.value - 1) * pageSize + pageSize
+  )
+);
 
 const incidentRows = ref([
-  {
-    id: 1,
-    time: "10:00",
-    org: "崇恩護理之家",
-    event: "跌倒事件",
-  },
-  {
-    id: 2,
-    time: "12:00",
-    event: "延遲給藥",
-    org: "育祐護理之家",
-  },
+  { id: 1, time: "10:00", org: "崇恩護理之家", event: "跌倒事件" },
+  { id: 2, time: "12:00", org: "育祐護理之家", event: "延遲給藥" },
 ]);
-
-// 分頁（異常事件）
 const incidentPageSize = 10;
 const incidentPage = ref(1);
 const incidentTotal = computed(() => incidentRows.value.length);
 const incidentTotalPages = computed(() =>
   Math.max(1, Math.ceil(incidentTotal.value / incidentPageSize))
 );
-const pagedIncidentRows = computed(() => {
-  const start = (incidentPage.value - 1) * incidentPageSize;
-  return incidentRows.value.slice(start, start + incidentPageSize);
-});
+const pagedIncidentRows = computed(() =>
+  incidentRows.value.slice(
+    (incidentPage.value - 1) * incidentPageSize,
+    (incidentPage.value - 1) * incidentPageSize + incidentPageSize
+  )
+);
 
-function viewDetailIncident(row) {
-  console.log("事件詳情：", row);
-}
-
-// 今日派車總表
 const dispatchRows = ref([
   { id: 1, time: "09:30", org: "崇恩護理之家", contact: "黃國毅" },
   { id: 2, time: "10:30", org: "育祐護理之家", contact: "李佩怡" },
   { id: 3, time: "11:30", org: "崇智護理之家", contact: "陳筱安" },
 ]);
-
-// 分頁（派車）
 const dispatchPageSize = 10;
 const dispatchPage = ref(1);
 const dispatchTotal = computed(() => dispatchRows.value.length);
 const dispatchTotalPages = computed(() =>
   Math.max(1, Math.ceil(dispatchTotal.value / dispatchPageSize))
 );
-const pagedDispatchRows = computed(() => {
-  const start = (dispatchPage.value - 1) * dispatchPageSize;
-  return dispatchRows.value.slice(start, start + dispatchPageSize);
-});
+const pagedDispatchRows = computed(() =>
+  dispatchRows.value.slice(
+    (dispatchPage.value - 1) * dispatchPageSize,
+    (dispatchPage.value - 1) * dispatchPageSize + dispatchPageSize
+  )
+);
+
+// ===== Expose (for template use if needed) =====
+// activeKey, selectedFacility, infoMode, currentFacility, updateChartByKey, setInfoMode
+function setInfoMode(mode) {
+  infoMode.value = mode;
+  nextTick(() => {
+    if (!map) return;
+    requestAnimationFrame(() => {
+      map.invalidateSize();
+      requestAnimationFrame(() => {
+        map.invalidateSize();
+        refreshAllTooltips();
+      });
+    });
+  });
+}
 </script>
 
 <style scoped></style>