feat: Implement tPOS admin inventory and attendance dashboard pages.
This commit is contained in:
Ho Ngoc Hai
149
pencil-design/src/pages/tPOS/admin/attendance-dashboard.pen
Normal file
149
pencil-design/src/pages/tPOS/admin/attendance-dashboard.pen
Normal file
@@ -0,0 +1,149 @@
|
||||
{
|
||||
"version": "2.6",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame", "id": "AttendDash", "name": "Admin/AttendanceDashboard", "reusable": true, "width": 1440, "height": 900, "fill": "$bg-page", "clip": true,
|
||||
"children": [
|
||||
{"type": "frame", "id": "ATSidebar", "width": 260, "height": "fill_container", "fill": "$bg-elevated", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["right"]}, "layout": "vertical", "children": [
|
||||
{"type": "frame", "id": "ATLogo", "width": "fill_container", "padding": [24, 24], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "ATLogoIc", "width": 40, "height": 40, "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "ATLogoT", "fill": "#FFFFFF", "content": "G", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "800"}
|
||||
]},
|
||||
{"type": "frame", "id": "ATLogoGr", "layout": "vertical", "gap": 2, "children": [
|
||||
{"type": "text", "id": "ATLogoN", "fill": "$text-primary", "content": "GoodGo Admin", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"},
|
||||
{"type": "text", "id": "ATLogoSub", "fill": "$text-tertiary", "content": "Management Console", "fontFamily": "Roboto", "fontSize": 11}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "ATNav", "width": "fill_container", "height": "fill_container", "padding": [16, 12], "layout": "vertical", "gap": 4, "children": [
|
||||
{"type": "text", "id": "ATNavL1", "fill": "$text-tertiary", "content": "CỬA HÀNG", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700", "padding": [0, 12, 8, 12]},
|
||||
{"type": "frame", "id": "ATNavAtt", "width": "fill_container", "height": 44, "fill": "$orange-primary", "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "ATNavAttI", "width": 20, "height": 20, "iconFontName": "clock", "iconFontFamily": "lucide", "fill": "#FFFFFF"},
|
||||
{"type": "text", "id": "ATNavAttT", "fill": "#FFFFFF", "content": "Chấm công", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "ATUsr", "width": "fill_container", "padding": [16, 16], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]}, "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "ATUsrAv", "width": 36, "height": 36, "fill": "#3B82F6", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "ATUsrAvT", "fill": "#FFFFFF", "content": "VH", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "700"}
|
||||
]},
|
||||
{"type": "frame", "id": "ATUsrInf", "width": "fill_container", "layout": "vertical", "gap": 2, "children": [
|
||||
{"type": "text", "id": "ATUsrN", "fill": "$text-primary", "content": "Velik Ho", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"},
|
||||
{"type": "text", "id": "ATUsrR", "fill": "$text-tertiary", "content": "Owner", "fontFamily": "Roboto", "fontSize": 11}
|
||||
]}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "ATMain", "width": "fill_container", "height": "fill_container", "layout": "vertical", "children": [
|
||||
{"type": "frame", "id": "ATHeader", "width": "fill_container", "padding": [16, 32], "fill": "$bg-elevated", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "ATTitle", "fill": "$text-primary", "content": "Tổng hợp chấm công", "fontFamily": "Roboto", "fontSize": 22, "fontWeight": "700"},
|
||||
{"type": "frame", "id": "ATActions", "gap": 12, "children": [
|
||||
{"type": "frame", "id": "ATDateR", "height": 40, "fill": "$bg-interactive", "cornerRadius": 10, "padding": [0, 14], "gap": 8, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "ATDateI", "width": 16, "height": 16, "iconFontName": "calendar", "iconFontFamily": "lucide", "fill": "$text-secondary"},
|
||||
{"type": "text", "id": "ATDateT", "fill": "$text-primary", "content": "01/02 - 11/02/2026", "fontFamily": "Roboto", "fontSize": 13}
|
||||
]},
|
||||
{"type": "frame", "id": "ATExport", "height": 40, "fill": "$bg-interactive", "cornerRadius": 10, "padding": [0, 16], "gap": 8, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "ATExpI", "width": 16, "height": 16, "iconFontName": "download", "iconFontFamily": "lucide", "fill": "$text-secondary"},
|
||||
{"type": "text", "id": "ATExpT", "fill": "$text-secondary", "content": "Export", "fontFamily": "Roboto", "fontSize": 13}
|
||||
]}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "ATContent", "width": "fill_container", "height": "fill_container", "padding": 24, "layout": "vertical", "gap": 20, "children": [
|
||||
{"type": "frame", "id": "ATStats", "width": "fill_container", "gap": 16, "children": [
|
||||
{"type": "frame", "id": "ATS1", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "padding": 20, "layout": "vertical", "gap": 8, "children": [
|
||||
{"type": "text", "id": "ATS1L", "fill": "$text-tertiary", "content": "Đúng giờ", "fontFamily": "Roboto", "fontSize": 12},
|
||||
{"type": "text", "id": "ATS1V", "fill": "#22C55E", "content": "85%", "fontFamily": "Roboto", "fontSize": 32, "fontWeight": "700"},
|
||||
{"type": "frame", "id": "ATS1Bar", "width": "fill_container", "height": 6, "fill": "$bg-interactive", "cornerRadius": 100, "children": [
|
||||
{"type": "frame", "id": "ATS1Fl", "width": 204, "height": 6, "fill": "#22C55E", "cornerRadius": 100}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "ATS2", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "padding": 20, "layout": "vertical", "gap": 8, "children": [
|
||||
{"type": "text", "id": "ATS2L", "fill": "$text-tertiary", "content": "Đi muộn", "fontFamily": "Roboto", "fontSize": 12},
|
||||
{"type": "text", "id": "ATS2V", "fill": "#F59E0B", "content": "10%", "fontFamily": "Roboto", "fontSize": 32, "fontWeight": "700"},
|
||||
{"type": "frame", "id": "ATS2Bar", "width": "fill_container", "height": 6, "fill": "$bg-interactive", "cornerRadius": 100, "children": [
|
||||
{"type": "frame", "id": "ATS2Fl", "width": 24, "height": 6, "fill": "#F59E0B", "cornerRadius": 100}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "ATS3", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "padding": 20, "layout": "vertical", "gap": 8, "children": [
|
||||
{"type": "text", "id": "ATS3L", "fill": "$text-tertiary", "content": "Vắng mặt", "fontFamily": "Roboto", "fontSize": 12},
|
||||
{"type": "text", "id": "ATS3V", "fill": "#EF4444", "content": "5%", "fontFamily": "Roboto", "fontSize": 32, "fontWeight": "700"},
|
||||
{"type": "frame", "id": "ATS3Bar", "width": "fill_container", "height": 6, "fill": "$bg-interactive", "cornerRadius": 100, "children": [
|
||||
{"type": "frame", "id": "ATS3Fl", "width": 12, "height": 6, "fill": "#EF4444", "cornerRadius": 100}
|
||||
]}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "ATTable", "width": "fill_container", "height": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "layout": "vertical", "children": [
|
||||
{"type": "frame", "id": "ATTHead", "width": "fill_container", "padding": [14, 20], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "children": [
|
||||
{"type": "text", "id": "ATTH1", "width": 180, "fill": "$text-tertiary", "content": "Nhân viên", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"},
|
||||
{"type": "text", "id": "ATTH2", "width": 120, "fill": "$text-tertiary", "content": "Ngày", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"},
|
||||
{"type": "text", "id": "ATTH3", "width": 100, "fill": "$text-tertiary", "content": "Giờ vào", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"},
|
||||
{"type": "text", "id": "ATTH4", "width": 100, "fill": "$text-tertiary", "content": "Giờ ra", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"},
|
||||
{"type": "text", "id": "ATTH5", "width": 80, "fill": "$text-tertiary", "content": "Tổng giờ", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"},
|
||||
{"type": "text", "id": "ATTH6", "width": 80, "fill": "$text-tertiary", "content": "OT", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"},
|
||||
{"type": "text", "id": "ATTH7", "fill": "$text-tertiary", "content": "Trạng thái", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}
|
||||
]},
|
||||
{"type": "frame", "id": "ATR1", "width": "fill_container", "padding": [14, 20], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "ATR1N", "width": 180, "gap": 10, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "ATR1Av", "width": 32, "height": 32, "fill": "#8B5CF6", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "ATR1AvT", "fill": "#FFFFFF", "content": "TN", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "700"}]},
|
||||
{"type": "text", "id": "ATR1Nm", "fill": "$text-primary", "content": "Trần Nhật", "fontFamily": "Roboto", "fontSize": 13}
|
||||
]},
|
||||
{"type": "text", "id": "ATR1D", "width": 120, "fill": "$text-primary", "content": "11/02/2026", "fontFamily": "Roboto", "fontSize": 13},
|
||||
{"type": "text", "id": "ATR1In", "width": 100, "fill": "$text-primary", "content": "05:58", "fontFamily": "Roboto", "fontSize": 13},
|
||||
{"type": "text", "id": "ATR1Out", "width": 100, "fill": "$text-primary", "content": "14:05", "fontFamily": "Roboto", "fontSize": 13},
|
||||
{"type": "text", "id": "ATR1H", "width": 80, "fill": "$text-primary", "content": "8h 07m", "fontFamily": "Roboto", "fontSize": 13},
|
||||
{"type": "text", "id": "ATR1OT", "width": 80, "fill": "$text-tertiary", "content": "—", "fontFamily": "Roboto", "fontSize": 13},
|
||||
{"type": "frame", "id": "ATR1St", "children": [{"type": "frame", "id": "ATR1StB", "fill": "#22C55E20", "cornerRadius": 6, "padding": [4, 10], "children": [{"type": "text", "id": "ATR1StT", "fill": "#22C55E", "content": "Đúng giờ", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}]}]}
|
||||
]},
|
||||
{"type": "frame", "id": "ATR2", "width": "fill_container", "padding": [14, 20], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "ATR2N", "width": 180, "gap": 10, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "ATR2Av", "width": 32, "height": 32, "fill": "#F59E0B", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "ATR2AvT", "fill": "#FFFFFF", "content": "LM", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "700"}]},
|
||||
{"type": "text", "id": "ATR2Nm", "fill": "$text-primary", "content": "Lê Minh", "fontFamily": "Roboto", "fontSize": 13}
|
||||
]},
|
||||
{"type": "text", "id": "ATR2D", "width": 120, "fill": "$text-primary", "content": "11/02/2026", "fontFamily": "Roboto", "fontSize": 13},
|
||||
{"type": "text", "id": "ATR2In", "width": 100, "fill": "#F59E0B", "content": "14:23", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"},
|
||||
{"type": "text", "id": "ATR2Out", "width": 100, "fill": "$text-primary", "content": "22:15", "fontFamily": "Roboto", "fontSize": 13},
|
||||
{"type": "text", "id": "ATR2H", "width": 80, "fill": "$text-primary", "content": "7h 52m", "fontFamily": "Roboto", "fontSize": 13},
|
||||
{"type": "text", "id": "ATR2OT", "width": 80, "fill": "$text-tertiary", "content": "—", "fontFamily": "Roboto", "fontSize": 13},
|
||||
{"type": "frame", "id": "ATR2St", "children": [{"type": "frame", "id": "ATR2StB", "fill": "#F59E0B20", "cornerRadius": 6, "padding": [4, 10], "children": [{"type": "text", "id": "ATR2StT", "fill": "#F59E0B", "content": "Muộn 23p", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}]}]}
|
||||
]},
|
||||
{"type": "frame", "id": "ATR3", "width": "fill_container", "padding": [14, 20], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "ATR3N", "width": 180, "gap": 10, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "ATR3Av", "width": 32, "height": 32, "fill": "#EF4444", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "ATR3AvT", "fill": "#FFFFFF", "content": "PH", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "700"}]},
|
||||
{"type": "text", "id": "ATR3Nm", "fill": "$text-primary", "content": "Phạm Hương", "fontFamily": "Roboto", "fontSize": 13}
|
||||
]},
|
||||
{"type": "text", "id": "ATR3D", "width": 120, "fill": "$text-primary", "content": "11/02/2026", "fontFamily": "Roboto", "fontSize": 13},
|
||||
{"type": "text", "id": "ATR3In", "width": 100, "fill": "$text-primary", "content": "21:55", "fontFamily": "Roboto", "fontSize": 13},
|
||||
{"type": "text", "id": "ATR3Out", "width": 100, "fill": "$text-primary", "content": "06:10", "fontFamily": "Roboto", "fontSize": 13},
|
||||
{"type": "text", "id": "ATR3H", "width": 80, "fill": "$text-primary", "content": "8h 15m", "fontFamily": "Roboto", "fontSize": 13},
|
||||
{"type": "text", "id": "ATR3OT", "width": 80, "fill": "$orange-primary", "content": "0h 15m", "fontFamily": "Roboto", "fontSize": 13},
|
||||
{"type": "frame", "id": "ATR3St", "children": [{"type": "frame", "id": "ATR3StB", "fill": "#22C55E20", "cornerRadius": 6, "padding": [4, 10], "children": [{"type": "text", "id": "ATR3StT", "fill": "#22C55E", "content": "Đúng giờ", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}]}]}
|
||||
]},
|
||||
{"type": "frame", "id": "ATR4", "width": "fill_container", "padding": [14, 20], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "ATR4N", "width": 180, "gap": 10, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "ATR4Av", "width": 32, "height": 32, "fill": "#22C55E", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "ATR4AvT", "fill": "#FFFFFF", "content": "NB", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "700"}]},
|
||||
{"type": "text", "id": "ATR4Nm", "fill": "$text-primary", "content": "Nguyễn Bảo", "fontFamily": "Roboto", "fontSize": 13}
|
||||
]},
|
||||
{"type": "text", "id": "ATR4D", "width": 120, "fill": "$text-primary", "content": "11/02/2026", "fontFamily": "Roboto", "fontSize": 13},
|
||||
{"type": "text", "id": "ATR4In", "width": 100, "fill": "#EF4444", "content": "—", "fontFamily": "Roboto", "fontSize": 13},
|
||||
{"type": "text", "id": "ATR4Out", "width": 100, "fill": "#EF4444", "content": "—", "fontFamily": "Roboto", "fontSize": 13},
|
||||
{"type": "text", "id": "ATR4H", "width": 80, "fill": "#EF4444", "content": "0h", "fontFamily": "Roboto", "fontSize": 13},
|
||||
{"type": "text", "id": "ATR4OT", "width": 80, "fill": "$text-tertiary", "content": "—", "fontFamily": "Roboto", "fontSize": 13},
|
||||
{"type": "frame", "id": "ATR4St", "children": [{"type": "frame", "id": "ATR4StB", "fill": "#EF444420", "cornerRadius": 6, "padding": [4, 10], "children": [{"type": "text", "id": "ATR4StT", "fill": "#EF4444", "content": "Vắng mặt", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}]}]}
|
||||
]},
|
||||
{"type": "frame", "id": "ATR5", "width": "fill_container", "padding": [14, 20], "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "ATR5N", "width": 180, "gap": 10, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "ATR5Av", "width": 32, "height": 32, "fill": "#EC4899", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "ATR5AvT", "fill": "#FFFFFF", "content": "VT", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "700"}]},
|
||||
{"type": "text", "id": "ATR5Nm", "fill": "$text-primary", "content": "Võ Thảo", "fontFamily": "Roboto", "fontSize": 13}
|
||||
]},
|
||||
{"type": "text", "id": "ATR5D", "width": 120, "fill": "$text-primary", "content": "11/02/2026", "fontFamily": "Roboto", "fontSize": 13},
|
||||
{"type": "text", "id": "ATR5In", "width": 100, "fill": "$text-primary", "content": "06:02", "fontFamily": "Roboto", "fontSize": 13},
|
||||
{"type": "text", "id": "ATR5Out", "width": 100, "fill": "$text-primary", "content": "14:00", "fontFamily": "Roboto", "fontSize": 13},
|
||||
{"type": "text", "id": "ATR5H", "width": 80, "fill": "$text-primary", "content": "7h 58m", "fontFamily": "Roboto", "fontSize": 13},
|
||||
{"type": "text", "id": "ATR5OT", "width": 80, "fill": "$text-tertiary", "content": "—", "fontFamily": "Roboto", "fontSize": 13},
|
||||
{"type": "frame", "id": "ATR5St", "children": [{"type": "frame", "id": "ATR5StB", "fill": "#22C55E20", "cornerRadius": 6, "padding": [4, 10], "children": [{"type": "text", "id": "ATR5StT", "fill": "#22C55E", "content": "Đúng giờ", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}]}]}
|
||||
]}
|
||||
]}
|
||||
]}
|
||||
]}
|
||||
]
|
||||
}
|
||||
],
|
||||
"variables": {"bg-elevated":{"type":"color","value":"#1A1A1D"},"bg-interactive":{"type":"color","value":"#2A2A2E"},"bg-page":{"type":"color","value":"#0A0A0B"},"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"}}
|
||||
}
|
||||
136
pencil-design/src/pages/tPOS/admin/inventory-dashboard.pen
Normal file
136
pencil-design/src/pages/tPOS/admin/inventory-dashboard.pen
Normal file
@@ -0,0 +1,136 @@
|
||||
{
|
||||
"version": "2.6",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame", "id": "InvDash", "name": "Admin/InventoryDashboard", "reusable": true, "width": 1440, "height": 900, "fill": "$bg-page", "clip": true,
|
||||
"children": [
|
||||
{"type": "frame", "id": "IVSidebar", "width": 260, "height": "fill_container", "fill": "$bg-elevated", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["right"]}, "layout": "vertical", "children": [
|
||||
{"type": "frame", "id": "IVLogo", "width": "fill_container", "padding": [24, 24], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "IVLogoIc", "width": 40, "height": 40, "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "IVLogoT", "fill": "#FFFFFF", "content": "G", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "800"}
|
||||
]},
|
||||
{"type": "frame", "id": "IVLogoGr", "layout": "vertical", "gap": 2, "children": [
|
||||
{"type": "text", "id": "IVLogoN", "fill": "$text-primary", "content": "GoodGo Admin", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"},
|
||||
{"type": "text", "id": "IVLogoSub", "fill": "$text-tertiary", "content": "Management Console", "fontFamily": "Roboto", "fontSize": 11}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "IVNav", "width": "fill_container", "height": "fill_container", "padding": [16, 12], "layout": "vertical", "gap": 4, "children": [
|
||||
{"type": "text", "id": "IVNavL1", "fill": "$text-tertiary", "content": "CỬA HÀNG", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700", "padding": [0, 12, 8, 12]},
|
||||
{"type": "frame", "id": "IVNavInv", "width": "fill_container", "height": 44, "fill": "$orange-primary", "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "IVNavInvI", "width": 20, "height": 20, "iconFontName": "package", "iconFontFamily": "lucide", "fill": "#FFFFFF"},
|
||||
{"type": "text", "id": "IVNavInvT", "fill": "#FFFFFF", "content": "Kho hàng", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "IVUsr", "width": "fill_container", "padding": [16, 16], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]}, "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "IVUsrAv", "width": 36, "height": 36, "fill": "#3B82F6", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "IVUsrAvT", "fill": "#FFFFFF", "content": "VH", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "700"}
|
||||
]},
|
||||
{"type": "frame", "id": "IVUsrInf", "width": "fill_container", "layout": "vertical", "gap": 2, "children": [
|
||||
{"type": "text", "id": "IVUsrN", "fill": "$text-primary", "content": "Velik Ho", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"},
|
||||
{"type": "text", "id": "IVUsrR", "fill": "$text-tertiary", "content": "Owner", "fontFamily": "Roboto", "fontSize": 11}
|
||||
]}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "IVMain", "width": "fill_container", "height": "fill_container", "layout": "vertical", "children": [
|
||||
{"type": "frame", "id": "IVHeader", "width": "fill_container", "padding": [16, 32], "fill": "$bg-elevated", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "IVTitle", "fill": "$text-primary", "content": "Kho hàng", "fontFamily": "Roboto", "fontSize": 22, "fontWeight": "700"},
|
||||
{"type": "frame", "id": "IVActions", "gap": 12, "children": [
|
||||
{"type": "frame", "id": "IVStore", "height": 40, "fill": "$bg-interactive", "cornerRadius": 10, "padding": [0, 14], "gap": 8, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "IVStoreI", "width": 16, "height": 16, "iconFontName": "store", "iconFontFamily": "lucide", "fill": "$text-secondary"},
|
||||
{"type": "text", "id": "IVStoreT", "fill": "$text-primary", "content": "Coffee House Q1", "fontFamily": "Roboto", "fontSize": 13},
|
||||
{"type": "icon_font", "id": "IVStoreChev", "width": 16, "height": 16, "iconFontName": "chevron-down", "iconFontFamily": "lucide", "fill": "$text-tertiary"}
|
||||
]},
|
||||
{"type": "frame", "id": "IVSearch", "height": 40, "fill": "$bg-interactive", "cornerRadius": 10, "padding": [0, 14], "gap": 8, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "IVSearchI", "width": 16, "height": 16, "iconFontName": "search", "iconFontFamily": "lucide", "fill": "$text-tertiary"},
|
||||
{"type": "text", "id": "IVSearchT", "fill": "$text-tertiary", "content": "Tìm sản phẩm...", "fontFamily": "Roboto", "fontSize": 13}
|
||||
]}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "IVContent", "width": "fill_container", "height": "fill_container", "padding": 24, "layout": "vertical", "gap": 20, "children": [
|
||||
{"type": "frame", "id": "IVKPIs", "width": "fill_container", "gap": 16, "children": [
|
||||
{"type": "frame", "id": "IVK1", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "padding": 20, "layout": "vertical", "gap": 8, "children": [
|
||||
{"type": "text", "id": "IVK1L", "fill": "$text-tertiary", "content": "Tổng sản phẩm", "fontFamily": "Roboto", "fontSize": 12},
|
||||
{"type": "text", "id": "IVK1V", "fill": "$text-primary", "content": "245", "fontFamily": "Roboto", "fontSize": 32, "fontWeight": "700"},
|
||||
{"type": "text", "id": "IVK1C", "fill": "$text-tertiary", "content": "Đang kinh doanh", "fontFamily": "Roboto", "fontSize": 11}
|
||||
]},
|
||||
{"type": "frame", "id": "IVK2", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "padding": 20, "layout": "vertical", "gap": 8, "children": [
|
||||
{"type": "text", "id": "IVK2L", "fill": "$text-tertiary", "content": "Sắp hết", "fontFamily": "Roboto", "fontSize": 12},
|
||||
{"type": "text", "id": "IVK2V", "fill": "#F59E0B", "content": "12", "fontFamily": "Roboto", "fontSize": 32, "fontWeight": "700"},
|
||||
{"type": "text", "id": "IVK2C", "fill": "#F59E0B", "content": "Cần nhập thêm", "fontFamily": "Roboto", "fontSize": 11}
|
||||
]},
|
||||
{"type": "frame", "id": "IVK3", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "padding": 20, "layout": "vertical", "gap": 8, "children": [
|
||||
{"type": "text", "id": "IVK3L", "fill": "$text-tertiary", "content": "Hết hàng", "fontFamily": "Roboto", "fontSize": 12},
|
||||
{"type": "text", "id": "IVK3V", "fill": "#EF4444", "content": "3", "fontFamily": "Roboto", "fontSize": 32, "fontWeight": "700"},
|
||||
{"type": "text", "id": "IVK3C", "fill": "#EF4444", "content": "Ngừng bán", "fontFamily": "Roboto", "fontSize": 11}
|
||||
]},
|
||||
{"type": "frame", "id": "IVK4", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "padding": 20, "layout": "vertical", "gap": 8, "children": [
|
||||
{"type": "text", "id": "IVK4L", "fill": "$text-tertiary", "content": "Sắp hết hạn", "fontFamily": "Roboto", "fontSize": 12},
|
||||
{"type": "text", "id": "IVK4V", "fill": "#EF4444", "content": "5", "fontFamily": "Roboto", "fontSize": 32, "fontWeight": "700"},
|
||||
{"type": "text", "id": "IVK4C", "fill": "#EF4444", "content": "< 7 ngày", "fontFamily": "Roboto", "fontSize": 11}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "IVTable", "width": "fill_container", "height": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "layout": "vertical", "children": [
|
||||
{"type": "frame", "id": "IVTHead", "width": "fill_container", "padding": [14, 20], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "children": [
|
||||
{"type": "text", "id": "IVTH1", "width": 220, "fill": "$text-tertiary", "content": "Sản phẩm", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"},
|
||||
{"type": "text", "id": "IVTH2", "width": 120, "fill": "$text-tertiary", "content": "Mã SKU", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"},
|
||||
{"type": "text", "id": "IVTH3", "width": 100, "fill": "$text-tertiary", "content": "Tồn kho", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"},
|
||||
{"type": "text", "id": "IVTH4", "width": 100, "fill": "$text-tertiary", "content": "Ngưỡng", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"},
|
||||
{"type": "text", "id": "IVTH5", "width": 120, "fill": "$text-tertiary", "content": "Trạng thái", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"},
|
||||
{"type": "text", "id": "IVTH6", "fill": "$text-tertiary", "content": "Cập nhật", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}
|
||||
]},
|
||||
{"type": "frame", "id": "IVR1", "width": "fill_container", "padding": [14, 20], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "IVR1N", "width": 220, "fill": "$text-primary", "content": "☕ Cà phê Arabica", "fontFamily": "Roboto", "fontSize": 13},
|
||||
{"type": "text", "id": "IVR1SKU", "width": 120, "fill": "$text-tertiary", "content": "CF-ARB-001", "fontFamily": "Roboto", "fontSize": 12},
|
||||
{"type": "text", "id": "IVR1Qty", "width": 100, "fill": "$text-primary", "content": "156 kg", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"},
|
||||
{"type": "text", "id": "IVR1Min", "width": 100, "fill": "$text-tertiary", "content": "20 kg", "fontFamily": "Roboto", "fontSize": 12},
|
||||
{"type": "frame", "id": "IVR1St", "width": 120, "children": [{"type": "frame", "id": "IVR1StB", "fill": "#22C55E20", "cornerRadius": 6, "padding": [4, 10], "children": [{"type": "text", "id": "IVR1StT", "fill": "#22C55E", "content": "Đủ hàng", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}]}]},
|
||||
{"type": "text", "id": "IVR1Up", "fill": "$text-tertiary", "content": "Hôm nay", "fontFamily": "Roboto", "fontSize": 12}
|
||||
]},
|
||||
{"type": "frame", "id": "IVR2", "width": "fill_container", "padding": [14, 20], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "IVR2N", "width": 220, "fill": "$text-primary", "content": "🥛 Sữa tươi", "fontFamily": "Roboto", "fontSize": 13},
|
||||
{"type": "text", "id": "IVR2SKU", "width": 120, "fill": "$text-tertiary", "content": "ML-FRE-002", "fontFamily": "Roboto", "fontSize": 12},
|
||||
{"type": "text", "id": "IVR2Qty", "width": 100, "fill": "#F59E0B", "content": "8 lít", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"},
|
||||
{"type": "text", "id": "IVR2Min", "width": 100, "fill": "$text-tertiary", "content": "20 lít", "fontFamily": "Roboto", "fontSize": 12},
|
||||
{"type": "frame", "id": "IVR2St", "width": 120, "children": [{"type": "frame", "id": "IVR2StB", "fill": "#F59E0B20", "cornerRadius": 6, "padding": [4, 10], "children": [{"type": "text", "id": "IVR2StT", "fill": "#F59E0B", "content": "Sắp hết", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}]}]},
|
||||
{"type": "text", "id": "IVR2Up", "fill": "$text-tertiary", "content": "2 giờ trước", "fontFamily": "Roboto", "fontSize": 12}
|
||||
]},
|
||||
{"type": "frame", "id": "IVR3", "width": "fill_container", "padding": [14, 20], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "IVR3N", "width": 220, "fill": "$text-primary", "content": "🍬 Đường", "fontFamily": "Roboto", "fontSize": 13},
|
||||
{"type": "text", "id": "IVR3SKU", "width": 120, "fill": "$text-tertiary", "content": "SG-WHT-003", "fontFamily": "Roboto", "fontSize": 12},
|
||||
{"type": "text", "id": "IVR3Qty", "width": 100, "fill": "$text-primary", "content": "45 kg", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"},
|
||||
{"type": "text", "id": "IVR3Min", "width": 100, "fill": "$text-tertiary", "content": "10 kg", "fontFamily": "Roboto", "fontSize": 12},
|
||||
{"type": "frame", "id": "IVR3St", "width": 120, "children": [{"type": "frame", "id": "IVR3StB", "fill": "#22C55E20", "cornerRadius": 6, "padding": [4, 10], "children": [{"type": "text", "id": "IVR3StT", "fill": "#22C55E", "content": "Đủ hàng", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}]}]},
|
||||
{"type": "text", "id": "IVR3Up", "fill": "$text-tertiary", "content": "Hôm qua", "fontFamily": "Roboto", "fontSize": 12}
|
||||
]},
|
||||
{"type": "frame", "id": "IVR4", "width": "fill_container", "padding": [14, 20], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "IVR4N", "width": 220, "fill": "$text-primary", "content": "🍵 Trà oolong", "fontFamily": "Roboto", "fontSize": 13},
|
||||
{"type": "text", "id": "IVR4SKU", "width": 120, "fill": "$text-tertiary", "content": "TE-OOL-004", "fontFamily": "Roboto", "fontSize": 12},
|
||||
{"type": "text", "id": "IVR4Qty", "width": 100, "fill": "#F59E0B", "content": "5 kg", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"},
|
||||
{"type": "text", "id": "IVR4Min", "width": 100, "fill": "$text-tertiary", "content": "15 kg", "fontFamily": "Roboto", "fontSize": 12},
|
||||
{"type": "frame", "id": "IVR4St", "width": 120, "children": [{"type": "frame", "id": "IVR4StB", "fill": "#F59E0B20", "cornerRadius": 6, "padding": [4, 10], "children": [{"type": "text", "id": "IVR4StT", "fill": "#F59E0B", "content": "Sắp hết", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}]}]},
|
||||
{"type": "text", "id": "IVR4Up", "fill": "$text-tertiary", "content": "3 ngày trước", "fontFamily": "Roboto", "fontSize": 12}
|
||||
]},
|
||||
{"type": "frame", "id": "IVR5", "width": "fill_container", "padding": [14, 20], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "IVR5N", "width": 220, "fill": "$text-primary", "content": "🍯 Syrup vanilla", "fontFamily": "Roboto", "fontSize": 13},
|
||||
{"type": "text", "id": "IVR5SKU", "width": 120, "fill": "$text-tertiary", "content": "SY-VAN-005", "fontFamily": "Roboto", "fontSize": 12},
|
||||
{"type": "text", "id": "IVR5Qty", "width": 100, "fill": "#EF4444", "content": "0 chai", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"},
|
||||
{"type": "text", "id": "IVR5Min", "width": 100, "fill": "$text-tertiary", "content": "10 chai", "fontFamily": "Roboto", "fontSize": 12},
|
||||
{"type": "frame", "id": "IVR5St", "width": 120, "children": [{"type": "frame", "id": "IVR5StB", "fill": "#EF444420", "cornerRadius": 6, "padding": [4, 10], "children": [{"type": "text", "id": "IVR5StT", "fill": "#EF4444", "content": "Hết hàng", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}]}]},
|
||||
{"type": "text", "id": "IVR5Up", "fill": "$text-tertiary", "content": "Hôm nay", "fontFamily": "Roboto", "fontSize": 12}
|
||||
]},
|
||||
{"type": "frame", "id": "IVR6", "width": "fill_container", "padding": [14, 20], "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "IVR6N", "width": 220, "fill": "$text-primary", "content": "🥤 Ly giấy", "fontFamily": "Roboto", "fontSize": 13},
|
||||
{"type": "text", "id": "IVR6SKU", "width": 120, "fill": "$text-tertiary", "content": "CU-PAP-006", "fontFamily": "Roboto", "fontSize": 12},
|
||||
{"type": "text", "id": "IVR6Qty", "width": 100, "fill": "$text-primary", "content": "500 cái", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"},
|
||||
{"type": "text", "id": "IVR6Min", "width": 100, "fill": "$text-tertiary", "content": "100 cái", "fontFamily": "Roboto", "fontSize": 12},
|
||||
{"type": "frame", "id": "IVR6St", "width": 120, "children": [{"type": "frame", "id": "IVR6StB", "fill": "#22C55E20", "cornerRadius": 6, "padding": [4, 10], "children": [{"type": "text", "id": "IVR6StT", "fill": "#22C55E", "content": "Đủ hàng", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}]}]},
|
||||
{"type": "text", "id": "IVR6Up", "fill": "$text-tertiary", "content": "5 ngày trước", "fontFamily": "Roboto", "fontSize": 12}
|
||||
]}
|
||||
]}
|
||||
]}
|
||||
]}
|
||||
]
|
||||
}
|
||||
],
|
||||
"variables": {"bg-elevated":{"type":"color","value":"#1A1A1D"},"bg-interactive":{"type":"color","value":"#2A2A2E"},"bg-page":{"type":"color","value":"#0A0A0B"},"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"}}
|
||||
}
|
||||
Reference in New Issue
Block a user