Site Management

流程 Happy Path

1. 在空狀態點「Create site」，或側欄樹的「+」。

2. 開啟對話框：左側 Name / Location 表單，右側 Google 地圖。
3. 輸入 Name（Location 選填），地圖隨輸入的地址定位。

4. 送出「Create site」→ 進入剛建立的 Site（尚無樓層圖與設備）。

狀態與邊界

驗收條件 QA · Given-When-Then

• Given 在對話框只填 Name 並送出，Then 建立一個無 Location 的 Site。
• Given Name 為空，Then「Create site」為 disabled。
• Given 在地圖搜尋欄輸入地址，Then 地圖 geocode 並置中到該位置。

完整行為情境（網路/伺服器錯誤、地圖 quota、座標驗證等）以 OpenSpec 為準，不在此重列。

元件與 Token 決策

• 對話框：分割式 1116 × 612px（左表單 558 / 右地圖 558）。
• 元件：Input、Button/primary（Create site）、Google Map。

TODO / 未解問題

• Name 長度上限與允許字元，待與 PM 確認（OpenSpec 標為 validation error，但未定義上限）。

沿用 Create Site 對話框，差異只有一個：Area 沒有 Location 與地圖（只有第一層 Site 有 Location）。本頁不重畫，引用 Create Site 的畫面並標出差異；行為規則見 OpenSpec。

術語（已確認）： 正式採用「Add Area」（與 Add Floor plan / Add Device 一致）。OpenSpec 的「Create Area」僅為需求命名，UI 一律用 Add。

流程 Happy Path

1. 選一個 Site 或 Area，點「+ Add」→「Add Area」。
2. 開啟對話框：只有 Name 欄位（無 Location、無地圖）。

3. 輸入 Area 名稱 → 送出 → 新 Area 巢狀出現在所選父層下。

狀態與邊界

驗收條件 QA · Given-When-Then

• Given 開啟 Add Area 對話框，Then 不顯示 Location 欄位或 Google Map。
• Given 選一個 Site 並送出 Area 名稱，Then 在該 Site 下建立 Layer-1 Area。
• Given Area 名稱為空，Then 送出被拒並提示需輸入名稱。

各層級（L1–L4）建立規則與錯誤情境以 OpenSpec 為準：site-configuration · Create Area。

元件與 Token 決策

• 沿用 Create Site 對話框，移除 Location 欄位與地圖（版面收合為單欄表單）。
• 元件：Input、Button/primary。

流程 Happy Path

1. 從導覽列點 Site icon 進入 Site 頁：左側為 Site List（樹狀），右側為 Device Display Area。初始未選取任何 Site，右側顯示「No Site Selected」。

2. 在左側樹點選一個 Site。右側只顯示該 Site 直屬的樓層圖與設備（不含其 Area 底下的設備 —— 要看 Area 的設備須點選該 Area）；若該 Site 無直屬設備，顯示「No Devices Added」。

3. 點選有設備的 Site，右側列出設備（Name、Model、Device type、Status）。可用搜尋框過濾、展開/收合樹節點。

狀態與邊界

驗收條件 QA · Given-When-Then

• Given 選取一個 Site，Then 右側只顯示該 Site 直屬的設備（不含其 Area 底下的設備）。
• Given 選取一個 Area，Then 只顯示該 Area 直屬的設備（不含其子 Area 的設備）。
• Given 在 Site 搜尋框輸入關鍵字，Then 樹只顯示名稱含關鍵字的 Site / Area。

「組織尚無 Site → 顯示首次建立提示、設備操作 disabled」由 US10（首次使用：尚未建立任何 Site）涵蓋，本頁不重列。

載入錯誤、搜尋無結果、被他人刪除等情境以 OpenSpec 為準（site-page-layout Error Handling）。

元件與 Token 決策

• 兩欄版面：左 Site List panel + 右 Device Display Area。
• 元件：Tree View（Site / Area 樹，英數遞增排序）、device 列表表格。
• 顯示模式：List view／List view with thumbnails（Camera 顯示快照、其餘顯示產品圖）。

流程 Happy Path

1. 在設備列表勾選一或多台設備，搜尋/篩選列位置改顯示選取動作列：「N Devices selected」、「Move to」、「Delete」。

2. 點「Move to」開啟對話框：「Select a destination for N devices.」下方為目標 Site / Area 樹（radio 單選）。目前所在場域標「Current」且不可選。

3. 可在搜尋框輸入關鍵字即時過濾目標（命中以 highlight）。選定目標後點「Move N devices」→ 移動完成、設備列表更新。

狀態與邊界

驗收條件 QA · Given-When-Then

• Given 選取設備並點「Move to」、選目標 Site，Then 設備移到目標 Site。
• Given 選目標 Area，Then 設備移到該 Area。
• Given 設備位於 Area、目標選母 Site，Then 設備直屬到母 Site。
• Given 整頁全選且有跨頁設備，Then 提示「Select all devices」可全域選取。
• Given 在 Move 對話框，Then 目前所在場域標「Current」且不可選。

各裝置類型適用性、批次/全域選取、錯誤情境以 OpenSpec 為準（site-device-operations）。

元件與 Token 決策

• Selected Action Bar：選取時取代搜尋/篩選列（Move to / Delete / 已選數量 / Select all）。
• Site Picker：階層 radio 選單，含搜尋與關鍵字 highlight、「Current」標記。

流程 Happy Path

1. 在選取動作列（見 US4 批次移動設備）點「Delete」。

2. 開啟「Delete devices」對話框：「Delete N devices? All associated data will be permanently erased.」下方為「Type DELETE to confirm」輸入框與紅色 WARNING。輸入正確「DELETE」前，「Delete N devices」維持 disabled。

3. 在輸入框打「DELETE」→ 按「Delete N devices」→ 刪除完成、設備列表更新。

狀態與邊界

驗收條件 QA · Given-When-Then

• Given 選取設備並點「Delete」，Then 開啟確認對話框並顯示資料抹除警示。
• Given 在確認框輸入「DELETE」並送出，Then 刪除所選設備、其相關資料永久抹除。
• Given 在刪除設備確認框輸入非「DELETE」，Then 刪除被拒、「Delete N devices」維持 disabled。
• Given 選取的是 NVR / VSS 管理的 Camera，Then 提示不可獨立刪除。

批次/全域刪除、混選管理相機等完整情境以 OpenSpec 為準（site-device-operations）。

元件與 Token 決策

• Delete 確認對話框：「Type DELETE to confirm」輸入框 ＋ WARNING alert（error）。
• 進入點：選取動作列的「Delete」按鈕（元件定義見 US4）。

流程 Happy Path

1. 選一個 Site 或 Area，在右側標題列點「Edit」（pencil 圖示）。
2. 開啟「Edit site」對話框：top-level Site 為分割版面（左 Name / Location 表單，右 Google 地圖，預帶現有定位 marker）。
3. 改 Name（必填）／調整 Location（選填，可清空）→ 按「Save changes」。

4. 對 Area 點「Edit」時，沿用同一對話框但移除 Location 與地圖（單欄、只有 Name）——只有第一層 Site 有 Location。VORTEX key-screen 目前只有 Edit site 一張，Edit Area 畫面以此差異描述為準。

狀態與邊界

驗收條件 QA · Given-When-Then

• Given 編輯 Site 名稱並按「Save changes」，Then 系統更新為新名稱。
• Given 編輯 Area 名稱並儲存，Then 系統更新該 Area 名稱。
• Given 名稱清空並送出，Then 拒絕並要求輸入名稱。（同 US1 建立一個 Site / US2 Add Area 的 Name 必填規則）
• Given 編輯 Area，Then 不顯示 Location 欄位或 Google Map。（同 US2 Add Area 規則：只有第一層 Site 有 Location）
• Given top-level Site 已有 Location 並清空，Then 移除該 Site 的 Location。

完整行為情境以 OpenSpec 為準：site-configuration · Rename Site or Area / Edit Site Location。

元件與 Token 決策

• 進入點：Site 標題列「Edit」按鈕（pencil 圖示）。
• Edit site 對話框：沿用 Create site 的分割版面（左表單 / 右地圖），欄位預帶現有值；送出鈕「Save changes」。
• Edit Area：同一對話框移除 Location 與地圖，收合為單欄表單。
• 元件：Input、Button/primary（Save changes）、Google Map（僅 top-level Site）。

TODO / 未解問題

• Edit Area 無 VORTEX key-screen：目前以「Edit site 減去 Location / 地圖」描述，待補 Figma 畫面。
• 是否允許在 Edit 內變更父層（Move）？移動規則以 OpenSpec 為準（site-configuration · Area movement restriction：Area 一旦建立即不可移動）。

流程 Happy Path

1. 選一個 Site 或 Area，在標題列點「Delete」（trash 圖示，danger）。
2. 若該 Site / Area 仍有子 Area、樓層圖或設備 → 開啟「Cannot Delete Site」警示：「"{名稱}" cannot be deleted.」＋「Remove all areas, floor plans, and devices before deleting this site.」，只有「Cancel」。

3. 若已清空（無子 Area、無設備）→ 開啟「Delete site」確認框：「Delete "{名稱}" ? This cannot be undone.」＋「Type DELETE to confirm」輸入框。輸入正確「DELETE」前，「Delete site」維持 disabled。

4. 在輸入框打「DELETE」→ 按「Delete site」→ 刪除完成、導回父層。

狀態與邊界

驗收條件 QA · Given-When-Then

• Given Site / Area 仍有子 Area 或設備並點 Delete，Then 顯示不可刪除警示。
• Given Site / Area 已清空並在確認框輸入「DELETE」送出，Then 刪除該 Site / Area 並導回父層。
• Given 在刪除 Site / Area 確認框輸入非「DELETE」，Then 刪除被拒、「Delete site」維持 disabled。
• Given 關閉對話框未確認，Then 取消刪除。
• Given 刪除某個 Area，Then 父 Site 與同層其他 Area 維持不變。

各層級刪除前置條件（devices / Areas / child Areas 必須先移除或刪除）與隔離規則以 OpenSpec 為準：site-configuration · Delete Site/Area prerequisites、Delete Area isolation。

元件與 Token 決策

• 進入點：標題列「Delete」按鈕（trash 圖示，danger）。
• Cannot Delete 警示：標題「Cannot Delete Site」＋說明，單一「Cancel」。
• Delete 確認框：「Type DELETE to confirm」輸入框 ＋ danger「Delete site」按鈕（輸入正確 DELETE 才 enable）。

TODO / 未解問題

• VORTEX key-screen 標題為「Cannot Delete Site / Delete site」；Area 變體（標題對應 Area）尚無獨立畫面，行為相同、文案待設計確認。
• 不可刪除判斷的文案目前合併為單一句（areas / floor plans / devices）；OpenSpec 另將「仍有 Areas / child Areas」與「仍有 devices」分列不同警示，是否細分待 PM 確認。行為以 OpenSpec 為準。

流程 Happy Path

1. 選一個 Site 或 Area，「Floor plans」區位於 Site 資訊列與設備表之間，只顯示屬於該層的樓層圖。

2. 標題列為 map 圖示 ＋「Floor plans (N/10)」計數。每張卡片：上方地圖縮圖、下方樓層圖名稱 ＋「N Devices」＋ 右側「⋯」選單鈕；卡片以單列水平捲動排列。
3. 點卡片「⋯」→ 開啟選單：「Go to floor plan」「Basic settings」「Delete」（Delete 為 danger）。〔此展開選單在 VORTEX key-screen 無對應畫面，僅文字描述。〕
4. 該層無樓層圖時，區內置中顯示空狀態：「No Floor Plans Added」＋「Add floor plans to this site to view and manage them here.」

狀態與邊界

驗收條件 QA · Given-When-Then

• Given 選取 Site / Area，Then 樓層圖區只顯示屬於該層的樓層圖。
• Given Site 有 3 張、上限 10，Then 標題顯示「Floor plans (3/10)」。
• Given 切換到另一個 Site / Area，Then 樓層圖區換成新選取層的樓層圖。
• Given 點卡片的「⋯」選單鈕，Then 顯示樓層圖動作下拉選單。
• Given 該層 0 張樓層圖，Then 置中顯示「No Floor Plans Added」與說明文字。

各情境完整行為以 OpenSpec 為準：floor-plan-display。

元件與 Token 決策

• Floor Plans 區：標題（map 圖示 ＋「Floor plans (N/10)」）＋ 水平捲動卡片列。
• 樓層圖卡片：上方縮圖、下方名稱 ＋「N Devices」＋「⋯」context menu（Go to floor plan / Basic settings / Delete，Delete 為 danger）。
• 空狀態：置中標題 ＋ 說明文字。

TODO / 未解問題

• 樓層圖 context menu 展開狀態無 VORTEX key-screen，目前僅文字描述選單項目，待補 Figma 畫面。
• 樓層圖動作（Go to / Basic settings / Delete）與「Add Floor plan」實際流程，待實作後補成獨立 US。

無獨立 VORTEX key-screen：設備列的動作入口已呈現在 US8 的「Site Selected (With Devices)」畫面中（hover 某一列時右側出現的動作圖示），本頁以該畫面與 OpenSpec 描述行為，不另截圖。

流程 Happy Path

1. 在設備列表，hover 某一列時右側出現動作圖示：設定（齒輪）＝ Device Settings 入口、前往（external-link）、刪除（trash）。
2. 點該列的設定齒輪 → 直接導向該設備的 Device Settings 頁。

狀態與邊界

驗收條件 QA · Given-When-Then

• Given 設備顯示於列表，Then 每列都有可進入 Device Settings 的入口（hover 顯示設定圖示）。
• Given 點某列的設定圖示，Then 直接導向該設備的 Device Settings 頁。
• Given 使用者有檢視該設備的權限，Then 入口可點擊且可運作。

導頁目的地（Device Settings 頁）與角色權限規則以 OpenSpec 為準：site-device-operations / site-permissions。

元件與 Token 決策

• 設備列 hover 動作組：設定（齒輪，Device Settings 入口）／前往（external-link）／刪除（trash）。
• 參考畫面：US8「Site Selected (With Devices)」設備列（key-screen 04）。

TODO / 未解問題

• 設備列動作圖示的 hover / tooltip 與實際導頁目的地路由，待設計與實作確認；目前無獨立 VORTEX 截圖。

另一個空狀態（「有 Site 但沒選」）已由 US3 涵蓋（us3-01-no-selection 對應 key-screen 02「No Site Selected」），本頁僅描述「Organization 完全沒有 Site」的首次使用空狀態。

流程 Happy Path

1. 使用者進入 Site 頁，Organization 尚未建立任何 Site。
2. 主區域中央顯示空狀態：地點圖示 ＋「Let's create your first Site」＋ 主要按鈕「Create site」（藍色，含「+」圖示）。
3. 側欄 Site list 區為空（只保留標題「Sites」、「+」、Search sites 搜尋框，沒有任何 Site / Area 列）。

4. 點「Create site」→ 進入 Create site 對話框（見 US1）。

狀態與邊界

驗收條件 QA · Given-When-Then

• Given Organization 無 Site 並進入 Site 頁，Then 主區顯眼處顯示引導使用者建立第一個 Site 的訊息。
• Given 空狀態顯示時，Then 訊息提供明確的建立 Site CTA 按鈕「Create site」。
• Given 處於空狀態時，Then 所有與設備相關的操作維持 disabled，直到至少建立一個 Site。
• Given 點主區「Create site」或側欄「+」，Then 進入 Create site 對話框（行為見 US1）。

完整行為情境以 OpenSpec 為準：site-page-layout · Empty state prompt。

元件與 Token 決策

• 空狀態 illustration：地點圖示（與 US3 us3-01-no-selection 同元件，不同文案）。
• 標題：「Let's create your first Site」。
• CTA：Button/primary「Create site」＋「+」圖示。
• 側欄保留「Sites」標題列、「+」與 Search sites（行為對應 Create site）。

TODO / 未解問題

• 「device-related operations SHALL be disabled until a Site is created」具體 disable 範圍（全站導覽列其他頁面？或僅 Site 頁本身相關 UI？）待與 PM 確認。