F71 — OPUS46 vs GTP55 Comparison Matrix

Gate 1 review aid. OPUS46 = design-system/full showcase. GTP55 = app-first Command BI/runtime mapping.
26
OPUS46/APP artifacts
26
GTP55 parity artifacts
15
App view/state groups covered
53+
Total F71 design artifacts incl overview/matrix
Review method: chọn từng hàng → mở OPUS và GTP55 cạnh nhau. Dùng OPUS để đánh giá độ đầy đủ component/system; dùng GTP55 để đánh giá độ bám runtime HybReport. Best final direction có thể merge: OPUS polish + GTP55 app contract.
DashboardViewerStudioBI ComponentsTheme/Density
#AreaOPUS46GTP55OPUS lensGTP55 lensStatus
1Token ReferenceF71_token_reference_sheet_OPUS46.htmlF71_token_reference_sheet_GTP55.htmlOpus: system/token bible chi tiếtGTP55: token map vào Dashboard/Studio/Viewer runtime✓ parity
2Buttons & ActionsF71_buttons_actions_OPUS46.htmlF71_buttons_actions_GTP55.htmlOpus: variants/states/sizes/icon groupsGTP55: action hierarchy theo Save/Run/Apply/Delete✓ parity
3Form ControlsF71_form_controls_OPUS46.htmlF71_form_controls_GTP55.htmlOpus: component catalog đầy đủGTP55: form states trong Studio General✓ parity
4Cards & PanelsF71_cards_panels_OPUS46.htmlF71_cards_panels_GTP55.htmlOpus: widget/dashboard/popover/side panel catalogGTP55: runtime card/panel hierarchy✓ parity
5Badges & TagsF71_badges_tags_OPUS46.htmlF71_badges_tags_GTP55.htmlOpus: badge variantsGTP55: trust/status badges for source/dirty/invalid✓ parity
6Tabs & NavigationF71_tabs_navigation_OPUS46.htmlF71_tabs_navigation_GTP55.htmlOpus: tabs/nav patternsGTP55: flat/tree/studio rail/flyout mapping✓ parity
7Modals & OverlaysF71_modals_overlays_OPUS46.htmlF71_modals_overlays_GTP55.htmlOpus: modal typesGTP55: drilldown/right-slide/loading/error runtime✓ parity
8Dropzones & DragF71_dropzones_drag_OPUS46.htmlF71_dropzones_drag_GTP55.htmlOpus: drag statesGTP55: builder zones + committed chips✓ parity
9Data Table / PivotF71_data_table_pivot_OPUS46.htmlF71_data_table_pivot_GTP55.htmlOpus: table spec richGTP55: clickable BI pivot + null/totals/heatmap✓ parity
10Chart ContainerF71_chart_container_OPUS46.htmlF71_chart_container_GTP55.htmlOpus: chart card/tooltip/palette/specGTP55: chart shell + empty/loading/error in viewer✓ parity
11Filter Bar & ChipsF71_filter_bar_chips_OPUS46.htmlF71_filter_bar_chips_GTP55.htmlOpus: chip variantsGTP55: trust-visible filter bar✓ parity
12Metric Field PickerF71_metric_field_picker_OPUS46.htmlF71_metric_field_picker_GTP55.htmlOpus: picker componentGTP55: source graph + selected field workflow✓ parity
13Formula EditorF71_formula_editor_OPUS46.htmlF71_formula_editor_GTP55.htmlOpus: formula editor showcaseGTP55: validation-first formula modal✓ parity
14Studio LayoutF71_studio_layout_OPUS46.htmlF71_studio_layout_GTP55.htmlOpus: polished builder layoutGTP55: rail/canvas/inspector runtime contract✓ parity
15Dashboard LayoutF71_dashboard_layout_OPUS46.htmlF71_dashboard_layout_GTP55.htmlOpus: visual dashboard layoutGTP55: flat/tree/collapsed state coverage✓ parity
16Viewer LayoutF71_viewer_layout_OPUS46.htmlF71_viewer_layout_GTP55.htmlOpus: viewer layout visualGTP55: consumption-first widget states✓ parity
17Dark ModeF71_dark_mode_OPUS46.htmlF71_dark_mode_GTP55.htmlOpus: dark component showcaseGTP55: same semantics, primitive inversion only✓ parity
18Density ModesF71_density_modes_OPUS46.htmlF71_density_modes_GTP55.htmlOpus: comfortable vs compact comparisonGTP55: density changes spacing only, not IA✓ parity
19APP Dashboard CenterF71_APP_01_dashboard_center.htmlF71_APP_01_dashboard_center_GTP55.htmlOpus: APP flow artifactGTP55: flat/tree/collapsed + embedded viewer✓ parity
20APP Report ViewerF71_APP_02_report_viewer.htmlF71_APP_02_report_viewer_GTP55.htmlOpus: APP flow artifactGTP55: canvas/chart/pivot/layout edit/empty✓ parity
21APP Drilldown ModalF71_APP_03_drilldown_modal.htmlF71_APP_03_drilldown_modal_GTP55.htmlOpus: drilldown detailGTP55: context pills + sticky table + footer actions✓ parity
22APP Studio GeneralF71_APP_04_studio_page_general.htmlF71_APP_04_studio_page_general_GTP55.htmlOpus: APP flow artifactGTP55: calm form-first General tab✓ parity
23APP Studio WorkspaceF71_APP_05_studio_workspace.htmlF71_APP_05_studio_workspace_GTP55.htmlOpus: pivot settings sectionsGTP55: builder zones + inspector pivot/heatmap✓ parity
24APP Datasource SelectorF71_APP_06_datasource_selector.htmlF71_APP_06_datasource_selector_GTP55.htmlOpus: Chọn nguồn dữ liệuGTP55: root hub + join graph + ACL cue✓ parity
25APP Chart/Pivot SettingsF71_APP_07_chart_pivot_settings.htmlF71_APP_07_chart_pivot_settings_GTP55.htmlOpus: chart/table settingsGTP55: shared inspector language + immediate preview✓ parity
26APP Popovers/Formula/FieldsF71_APP_08_popovers_formula_fields.htmlF71_APP_08_popovers_formula_fields_GTP55.htmlOpus: popover/formula/field systemGTP55: quick chip edit + validation-first formula✓ parity