前言：
前兩天分享在使用者版本APP如何從頁面設計到設計資料欄位，已經設計兩頁，發現這挑戰其實沒有很難，期待可以繼續往下一個任務邁進。

訂單追蹤

從以上這個頁面觀察

• 上面類別切換是需要有一個狀態放在每一筆資料內可以控制
• 訂單狀態：這個考量到需要由前台可以瀏覽五種不同訂單狀態，以及餐廳人員可從後台(如果來得及做後台)控制目前切換哪一態

紀錄一下狀態分為這五種Type

type OrdersEnum = "預備中" | "等候中" | "製作中" | "外送中" | "完成訂單";

假設目前欄位設計是

 "Orders": [
    {
      "id": 1,
      "M_Name": "早餐套餐",
      "M_DT": "2023-09-23 10:30:00",
      "M_ImgSrc": "",
      "OrderType": 2,
      "CIdx": 1,
      "Price": 30,
      "Progress": 0.75
    },
    {
      "id": 2,
      "M_Name": "早餐套餐02",
      "M_DT": "2023-09-23 10:30:00",
      "M_ImgSrc": "",
      "OrderType": 2,
      "CIdx": 1,
      "Price": 180,
      "Progress": 1
    },