{
  "version": "2.6",
  "children": [
    {
      "type": "frame",
      "id": "ReservationScreen",
      "name": "Restaurant/Reservation Management",
      "reusable": true,
      "width": 1440,
      "height": 900,
      "fill": "$bg-page",
      "layout": "vertical",
      "clip": true,
      "children": [
        {"type": "frame", "id": "ResHeader", "width": "fill_container", "height": 64, "fill": "$bg-elevated", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "padding": [0, 24], "justifyContent": "space_between", "alignItems": "center", "children": [
          {"type": "frame", "id": "ResHeaderLeft", "gap": 16, "alignItems": "center", "children": [
            {"type": "frame", "id": "ResBackBtn", "width": 40, "height": 40, "fill": "$bg-interactive", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "ResBackIcon", "width": 20, "height": 20, "iconFontName": "arrow-left", "iconFontFamily": "lucide", "fill": "$text-secondary"}]},
            {"type": "text", "id": "ResTitle", "fill": "$text-primary", "content": "Quản lý Đặt bàn", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "700"}
          ]},
          {"type": "frame", "id": "ResDatePicker", "height": 44, "fill": "$bg-interactive", "cornerRadius": 10, "padding": [0, 16], "gap": 10, "alignItems": "center", "children": [
            {"type": "icon_font", "id": "ResCalIcon", "width": 18, "height": 18, "iconFontName": "calendar", "iconFontFamily": "lucide", "fill": "$text-secondary"},
            {"type": "text", "id": "ResDateText", "fill": "$text-primary", "content": "05/02/2026", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"},
            {"type": "icon_font", "id": "ResDateArrow", "width": 16, "height": 16, "iconFontName": "chevron-down", "iconFontFamily": "lucide", "fill": "$text-tertiary"}
          ]},
          {"type": "frame", "id": "ResAddBtn", "height": 44, "fill": "$orange-primary", "cornerRadius": 10, "padding": [0, 20], "gap": 8, "alignItems": "center", "children": [
            {"type": "icon_font", "id": "ResAddIcon", "width": 18, "height": 18, "iconFontName": "plus", "iconFontFamily": "lucide", "fill": "$text-primary"},
            {"type": "text", "id": "ResAddText", "fill": "$text-primary", "content": "Đặt bàn mới", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}
          ]}
        ]},
        {"type": "frame", "id": "ResBody", "width": "fill_container", "height": "fill_container", "children": [
          {"type": "frame", "id": "ResSidebar", "width": 280, "height": "fill_container", "fill": "$bg-elevated", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["right"]}, "layout": "vertical", "padding": 20, "gap": 20, "children": [
            {"type": "frame", "id": "ResQuickFilters", "width": "fill_container", "layout": "vertical", "gap": 12, "children": [
              {"type": "text", "id": "ResFilterTitle", "fill": "$text-secondary", "content": "Lọc nhanh", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"},
              {"type": "frame", "id": "ResFilterToday", "width": "fill_container", "fill": "$orange-primary", "cornerRadius": 10, "padding": [12, 16], "justifyContent": "space_between", "alignItems": "center", "children": [
                {"type": "frame", "id": "ResFTLeft", "gap": 10, "alignItems": "center", "children": [{"type": "icon_font", "id": "ResFTIcon", "width": 18, "height": 18, "iconFontName": "calendar-check", "iconFontFamily": "lucide", "fill": "$text-primary"}, {"type": "text", "id": "ResFTText", "fill": "$text-primary", "content": "Hôm nay", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}]},
                {"type": "frame", "id": "ResFTBadge", "fill": "#FFFFFF30", "cornerRadius": 6, "padding": [4, 8], "children": [{"type": "text", "id": "ResFTCount", "fill": "$text-primary", "content": "5", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "700"}]}
              ]},
              {"type": "frame", "id": "ResFilterTomorrow", "width": "fill_container", "fill": "$bg-interactive", "cornerRadius": 10, "padding": [12, 16], "justifyContent": "space_between", "alignItems": "center", "children": [
                {"type": "frame", "id": "ResF2Left", "gap": 10, "alignItems": "center", "children": [{"type": "icon_font", "id": "ResF2Icon", "width": 18, "height": 18, "iconFontName": "calendar", "iconFontFamily": "lucide", "fill": "$text-secondary"}, {"type": "text", "id": "ResF2Text", "fill": "$text-secondary", "content": "Ngày mai", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}]},
                {"type": "frame", "id": "ResF2Badge", "fill": "$bg-surface", "cornerRadius": 6, "padding": [4, 8], "children": [{"type": "text", "id": "ResF2Count", "fill": "$text-secondary", "content": "3", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}]}
              ]},
              {"type": "frame", "id": "ResFilterWeek", "width": "fill_container", "fill": "$bg-interactive", "cornerRadius": 10, "padding": [12, 16], "justifyContent": "space_between", "alignItems": "center", "children": [
                {"type": "frame", "id": "ResF3Left", "gap": 10, "alignItems": "center", "children": [{"type": "icon_font", "id": "ResF3Icon", "width": 18, "height": 18, "iconFontName": "calendar-range", "iconFontFamily": "lucide", "fill": "$text-secondary"}, {"type": "text", "id": "ResF3Text", "fill": "$text-secondary", "content": "Tuần này", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}]},
                {"type": "frame", "id": "ResF3Badge", "fill": "$bg-surface", "cornerRadius": 6, "padding": [4, 8], "children": [{"type": "text", "id": "ResF3Count", "fill": "$text-secondary", "content": "12", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}]}
              ]}
            ]},
            {"type": "frame", "id": "ResDivider1", "width": "fill_container", "height": 1, "fill": "$border-subtle"},
            {"type": "frame", "id": "ResStatusFilters", "width": "fill_container", "layout": "vertical", "gap": 12, "children": [
              {"type": "text", "id": "ResStatusTitle", "fill": "$text-secondary", "content": "Trạng thái", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"},
              {"type": "frame", "id": "ResStatusConfirmed", "gap": 10, "alignItems": "center", "children": [{"type": "frame", "id": "ResCheck1", "width": 20, "height": 20, "fill": "#22C55E", "cornerRadius": 4, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "ResCheck1Icon", "width": 12, "height": 12, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "$text-primary"}]}, {"type": "text", "id": "ResStatusC1Text", "fill": "$text-primary", "content": "Đã xác nhận", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "normal"}]},
              {"type": "frame", "id": "ResStatusPending", "gap": 10, "alignItems": "center", "children": [{"type": "frame", "id": "ResCheck2", "width": 20, "height": 20, "fill": "#F59E0B", "cornerRadius": 4, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "ResCheck2Icon", "width": 12, "height": 12, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "$text-primary"}]}, {"type": "text", "id": "ResStatusC2Text", "fill": "$text-primary", "content": "Chờ xác nhận", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "normal"}]},
              {"type": "frame", "id": "ResStatusCancelled", "gap": 10, "alignItems": "center", "children": [{"type": "frame", "id": "ResCheck3", "width": 20, "height": 20, "fill": "$bg-interactive", "cornerRadius": 4, "stroke": {"thickness": 1, "fill": "$border-default"}}, {"type": "text", "id": "ResStatusC3Text", "fill": "$text-tertiary", "content": "Đã hủy", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "normal"}]}
            ]}
          ]},
          {"type": "frame", "id": "ResMainContent", "width": "fill_container", "height": "fill_container", "layout": "vertical", "children": [
            {"type": "frame", "id": "ResTimeline", "width": "fill_container", "fill": "$bg-elevated", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "padding": [16, 24], "gap": 0, "children": [
              {"type": "frame", "id": "ResTimeSlot1", "width": 100, "layout": "vertical", "gap": 8, "alignItems": "center", "children": [{"type": "text", "id": "ResTime1", "fill": "$text-tertiary", "content": "11:00", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}, {"type": "frame", "id": "ResSlot1", "width": 80, "height": 40, "fill": "$bg-interactive", "cornerRadius": 8}]},
              {"type": "frame", "id": "ResTimeSlot2", "width": 100, "layout": "vertical", "gap": 8, "alignItems": "center", "children": [{"type": "text", "id": "ResTime2", "fill": "$text-tertiary", "content": "12:00", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}, {"type": "frame", "id": "ResSlot2", "width": 80, "height": 40, "fill": "#22C55E30", "cornerRadius": 8, "stroke": {"thickness": 1, "fill": "#22C55E"}, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "ResSlot2Text", "fill": "#22C55E", "content": "B03", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}]}]},
              {"type": "frame", "id": "ResTimeSlot3", "width": 100, "layout": "vertical", "gap": 8, "alignItems": "center", "children": [{"type": "text", "id": "ResTime3", "fill": "$text-tertiary", "content": "12:30", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}, {"type": "frame", "id": "ResSlot3", "width": 80, "height": 40, "fill": "#F59E0B30", "cornerRadius": 8, "stroke": {"thickness": 1, "fill": "#F59E0B"}, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "ResSlot3Text", "fill": "#F59E0B", "content": "VIP", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}]}]},
              {"type": "frame", "id": "ResTimeSlot4", "width": 100, "layout": "vertical", "gap": 8, "alignItems": "center", "children": [{"type": "text", "id": "ResTime4", "fill": "$text-tertiary", "content": "18:00", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}, {"type": "frame", "id": "ResSlot4", "width": 80, "height": 40, "fill": "#22C55E30", "cornerRadius": 8, "stroke": {"thickness": 1, "fill": "#22C55E"}, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "ResSlot4Text", "fill": "#22C55E", "content": "B05", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}]}]},
              {"type": "frame", "id": "ResTimeSlot5", "width": 100, "layout": "vertical", "gap": 8, "alignItems": "center", "children": [{"type": "text", "id": "ResTime5", "fill": "$text-tertiary", "content": "19:00", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}, {"type": "frame", "id": "ResSlot5", "width": 80, "height": 40, "fill": "#22C55E30", "cornerRadius": 8, "stroke": {"thickness": 1, "fill": "#22C55E"}, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "ResSlot5Text", "fill": "#22C55E", "content": "B01", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}]}]}
            ]},
            {"type": "frame", "id": "ResListArea", "width": "fill_container", "height": "fill_container", "layout": "vertical", "padding": 24, "gap": 16, "children": [
              {"type": "text", "id": "ResListTitle", "fill": "$text-secondary", "content": "Danh sách đặt bàn hôm nay (5)", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"},
              {"type": "frame", "id": "ResCard1", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 16, "stroke": {"thickness": 1, "fill": "$border-default"}, "padding": 20, "justifyContent": "space_between", "alignItems": "center", "children": [
                {"type": "frame", "id": "ResCard1Left", "gap": 16, "alignItems": "center", "children": [
                  {"type": "frame", "id": "ResCard1Time", "width": 60, "layout": "vertical", "gap": 2, "alignItems": "center", "children": [{"type": "text", "id": "ResCard1Hour", "fill": "$orange-primary", "content": "12:00", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"}, {"type": "text", "id": "ResCard1Date", "fill": "$text-tertiary", "content": "Hôm nay", "fontFamily": "Roboto", "fontSize": 11}]},
                  {"type": "frame", "id": "ResCard1Divider", "width": 1, "height": 40, "fill": "$border-subtle"},
                  {"type": "frame", "id": "ResCard1Info", "layout": "vertical", "gap": 4, "children": [
                    {"type": "frame", "id": "ResCard1Row1", "gap": 8, "alignItems": "center", "children": [{"type": "text", "id": "ResCard1Name", "fill": "$text-primary", "content": "Nguyễn Văn A", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"}, {"type": "frame", "id": "ResCard1Status", "fill": "#22C55E20", "cornerRadius": 4, "padding": [3, 8], "children": [{"type": "text", "id": "ResCard1StatusText", "fill": "#22C55E", "content": "Đã xác nhận", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "600"}]}]},
                    {"type": "frame", "id": "ResCard1Row2", "gap": 16, "children": [{"type": "frame", "id": "ResCard1Table", "gap": 6, "alignItems": "center", "children": [{"type": "icon_font", "id": "ResCard1TIcon", "width": 14, "height": 14, "iconFontName": "armchair", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, {"type": "text", "id": "ResCard1TText", "fill": "$text-secondary", "content": "Bàn 03", "fontFamily": "Roboto", "fontSize": 12}]}, {"type": "frame", "id": "ResCard1Guests", "gap": 6, "alignItems": "center", "children": [{"type": "icon_font", "id": "ResCard1GIcon", "width": 14, "height": 14, "iconFontName": "users", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, {"type": "text", "id": "ResCard1GText", "fill": "$text-secondary", "content": "4 khách", "fontFamily": "Roboto", "fontSize": 12}]}, {"type": "frame", "id": "ResCard1Phone", "gap": 6, "alignItems": "center", "children": [{"type": "icon_font", "id": "ResCard1PIcon", "width": 14, "height": 14, "iconFontName": "phone", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, {"type": "text", "id": "ResCard1PText", "fill": "$text-secondary", "content": "0901 234 567", "fontFamily": "Roboto", "fontSize": 12}]}]}
                  ]}
                ]},
                {"type": "frame", "id": "ResCard1Actions", "gap": 8, "children": [{"type": "frame", "id": "ResCard1Checkin", "height": 36, "fill": "#22C55E", "cornerRadius": 8, "padding": [0, 14], "gap": 6, "alignItems": "center", "children": [{"type": "icon_font", "id": "ResCard1CIIcon", "width": 14, "height": 14, "iconFontName": "log-in", "iconFontFamily": "lucide", "fill": "$text-primary"}, {"type": "text", "id": "ResCard1CIText", "fill": "$text-primary", "content": "Check-in", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}]}, {"type": "frame", "id": "ResCard1Cancel", "height": 36, "fill": "$bg-interactive", "cornerRadius": 8, "padding": [0, 14], "stroke": {"thickness": 1, "fill": "$border-default"}, "children": [{"type": "text", "id": "ResCard1CancelText", "fill": "$text-secondary", "content": "Hủy", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]}]}
              ]},
              {"type": "frame", "id": "ResCard2", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 16, "stroke": {"thickness": 1, "fill": "#F59E0B50"}, "padding": 20, "justifyContent": "space_between", "alignItems": "center", "children": [
                {"type": "frame", "id": "ResCard2Left", "gap": 16, "alignItems": "center", "children": [
                  {"type": "frame", "id": "ResCard2Time", "width": 60, "layout": "vertical", "gap": 2, "alignItems": "center", "children": [{"type": "text", "id": "ResCard2Hour", "fill": "$orange-primary", "content": "12:30", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"}, {"type": "text", "id": "ResCard2Date", "fill": "$text-tertiary", "content": "Hôm nay", "fontFamily": "Roboto", "fontSize": 11}]},
                  {"type": "frame", "id": "ResCard2Divider", "width": 1, "height": 40, "fill": "$border-subtle"},
                  {"type": "frame", "id": "ResCard2Info", "layout": "vertical", "gap": 4, "children": [
                    {"type": "frame", "id": "ResCard2Row1", "gap": 8, "alignItems": "center", "children": [{"type": "text", "id": "ResCard2Name", "fill": "$text-primary", "content": "Công ty ABC", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"}, {"type": "frame", "id": "ResCard2Status", "fill": "#F59E0B20", "cornerRadius": 4, "padding": [3, 8], "children": [{"type": "text", "id": "ResCard2StatusText", "fill": "#F59E0B", "content": "Chờ xác nhận", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "600"}]}]},
                    {"type": "frame", "id": "ResCard2Row2", "gap": 16, "children": [{"type": "frame", "id": "ResCard2Table", "gap": 6, "alignItems": "center", "children": [{"type": "icon_font", "id": "ResCard2TIcon", "width": 14, "height": 14, "iconFontName": "crown", "iconFontFamily": "lucide", "fill": "#F59E0B"}, {"type": "text", "id": "ResCard2TText", "fill": "$text-secondary", "content": "VIP 01", "fontFamily": "Roboto", "fontSize": 12}]}, {"type": "frame", "id": "ResCard2Guests", "gap": 6, "alignItems": "center", "children": [{"type": "icon_font", "id": "ResCard2GIcon", "width": 14, "height": 14, "iconFontName": "users", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, {"type": "text", "id": "ResCard2GText", "fill": "$text-secondary", "content": "10 khách", "fontFamily": "Roboto", "fontSize": 12}]}]}
                  ]}
                ]},
                {"type": "frame", "id": "ResCard2Actions", "gap": 8, "children": [{"type": "frame", "id": "ResCard2Confirm", "height": 36, "fill": "$orange-primary", "cornerRadius": 8, "padding": [0, 14], "gap": 6, "alignItems": "center", "children": [{"type": "icon_font", "id": "ResCard2ConfIcon", "width": 14, "height": 14, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "$text-primary"}, {"type": "text", "id": "ResCard2ConfText", "fill": "$text-primary", "content": "Xác nhận", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}]}, {"type": "frame", "id": "ResCard2Cancel", "height": 36, "fill": "$bg-interactive", "cornerRadius": 8, "padding": [0, 14], "stroke": {"thickness": 1, "fill": "$border-default"}, "children": [{"type": "text", "id": "ResCard2CancelText", "fill": "$text-secondary", "content": "Hủy", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]}]}
              ]}
            ]}
          ]}
        ]}
      ]
    }
  ],
  "variables": {
    "bg-elevated": {"type": "color", "value": "#1A1A1D"},
    "bg-interactive": {"type": "color", "value": "#2A2A2E"},
    "bg-page": {"type": "color", "value": "#0A0A0B"},
    "bg-surface": {"type": "color", "value": "#111113"},
    "border-default": {"type": "color", "value": "#2A2A2E"},
    "border-subtle": {"type": "color", "value": "#1F1F23"},
    "orange-primary": {"type": "color", "value": "#FF5C00"},
    "text-primary": {"type": "color", "value": "#FFFFFF"},
    "text-secondary": {"type": "color", "value": "#ADADB0"},
    "text-tertiary": {"type": "color", "value": "#8B8B90"}
  }
}
