@shanyucoder/flowgrid 0.1.0

package/templates/project-skeleton/surfaces/common/yaml/navigation/ir/spec.yaml

@@ -0,0 +1,39 @@
+# Generated from common-navigation.bundle.yaml — pnpm spec:split
+id: common-navigation
+title: Common navigation and page header
+status: draft
+owner: portal-team
+summary: Chuẩn sidebar, page title, breadcrumb và route trong admin portal prototype.
+specOrigin: legacy
+grillStatus:
+  bqaFacts: draft
+  bqaOpen: draft
+  dev: draft
+  full: not_required
+sidebar:
+  behavior:
+    - Parent menu click để open/close child.
+    - Active child route mở parent tương ứng.
+    - Prototype chỉ hiển thị feature đã migrate hoặc đang design.
+  routePrefix:
+    legacyAdminPrefix: /admin
+    portalRoute: không dùng `/admin` prefix trong frontend route.
+  testIds:
+    navItem: nav-{id}
+pageHeader:
+  title:
+    source: route meta hoặc component page header.
+    testId: "{module}-page-title"
+  breadcrumb:
+    default: optional trong prototype; nếu dùng phải có testId theo docs/operational/E2E-TESTIDS.md.
+  actions:
+    - Header actions chỉ dùng cho page-level action thật sự.
+    - Nếu legacy/spec yêu cầu group_action trong card/form thì không đưa action lên page header.
+dynamicRoutes:
+  detail: pages/{module}/[id]/index.vue
+  edit: pages/{module}/[id]/edit.vue
+  child: pages/{module}/[id]/{child}.vue
+acceptance:
+  - Sidebar không chứa route chưa làm prototype.
+  - Page title rõ và nhất quán.
+  - Dynamic route không dùng file đóng `{module}/[id].vue`.

package/templates/project-skeleton/surfaces/common/yaml/pagination/common-pagination.bundle.yaml

@@ -0,0 +1,84 @@
+schema: portal-feature-bundle/v1
+id: common-pagination
+title: Common pagination
+status: draft
+owner: portal-team
+summary: Chuẩn pagination dưới table, dùng page numbers + ellipsis thay vì text generic `Page x of y`.
+specOrigin: legacy
+grillStatus:
+  bqaFacts: draft
+  bqaOpen: draft
+  dev: draft
+  full: not_required
+spec:
+  layout:
+    position: below table
+    alignment: center
+    style:
+      - Flat outline buttons, border nhẹ, không shadow.
+      - Active page dùng text/border primary `#4EAAFF` hoặc background primary nhạt.
+      - Disabled previous/next vẫn giữ footprint để layout không nhảy.
+  controls:
+    previous:
+      content: icon + text
+      icon: ChevronLeft
+      text: 前へ
+      ariaLabel: 前のページ
+    next:
+      content: icon + text
+      icon: ChevronRight
+      text: 次へ
+      ariaLabel: 次のページ
+    pageNumbers:
+      window: current page +/- 2
+      firstLast: show first/last when outside window
+      ellipsis: show `...` when gap exists
+  behavior:
+    query:
+      - Pagination phải giữ search params hiện tại.
+      - Page change gọi list service/composable, không lọc local-only nếu API contract có pagination.
+    perPage:
+      - Per-page select và page summary không nằm trong pagination bar dưới table.
+      - Per-page select nằm ở toolbar/header table góc phải theo `common-list-toolbar`, copy giữ `表示 ... 件 / ページ`.
+      - Đổi per-page reset page về 1.
+  testIds:
+    pagination: "{module}-pagination"
+    previous: "{module}-pagination-prev-btn"
+    next: "{module}-pagination-next-btn"
+    pageButton: "{module}-pagination-page-{page}"
+  acceptance:
+    - Không hiển thị copy English kiểu `Page 1 of 4` trong admin UI.
+    - Previous/next dùng icon + text tiếng Nhật `前へ`/`次へ`.
+    - Có thể preview ít nhất 2 page bằng mock data.
+    - Pagination dưới table chỉ gồm previous, page numbers/ellipsis, next; không hiển thị `表示 ... 件 / ページ` hoặc page summary tại đây.
+    - Pagination dưới table, căn giữa, page numbers observable bằng testId.
+legacy:
+  legacyRef:
+    module: common/common
+    function: common-pagination
+    slice: slices.common-pagination
+  behaviors: []
+  fields: []
+  ui: []
+  evidence:
+    - file: mairy-backend/resources/views/paginate/custom_paginate.blade.php
+    - file: mairy-backend/app/Helpers/helpers.php
+  refs: {}
+design:
+  inherits: admin-crud
+  shell:
+    tag: "#shell: DataPage"
+    overrideCommonPattern: false
+  patterns:
+    - "#pattern: CRUD"
+  zones:
+    - id: main
+      label: Nội dung chính
+  behavior: {}
+  actions: []
+review:
+  summary: Chuẩn pagination dưới table, dùng page numbers + ellipsis thay vì text generic `Page x of y`.
+  layoutNotes: []
+_meta:
+  generatedBy: archived-legacy-converter
+  sourceRevision: null

package/templates/project-skeleton/surfaces/common/yaml/pagination/ir/design.yaml

@@ -0,0 +1,13 @@
+# Generated from common-pagination.bundle.yaml — pnpm spec:split
+id: common-pagination
+inherits: admin-crud
+shell:
+  tag: "#shell: DataPage"
+  overrideCommonPattern: false
+patterns:
+  - "#pattern: CRUD"
+zones:
+  - id: main
+    label: Nội dung chính
+behavior: {}
+actions: []

package/templates/project-skeleton/surfaces/common/yaml/pagination/ir/legacy.yaml

@@ -0,0 +1,13 @@
+# Generated from common-pagination.bundle.yaml — pnpm spec:split
+id: common-pagination
+legacyRef:
+  module: common/common
+  function: common-pagination
+  slice: slices.common-pagination
+behaviors: []
+fields: []
+ui: []
+evidence:
+  - file: mairy-backend/resources/views/paginate/custom_paginate.blade.php
+  - file: mairy-backend/app/Helpers/helpers.php
+refs: {}

package/templates/project-skeleton/surfaces/common/yaml/pagination/ir/spec.yaml

@@ -0,0 +1,53 @@
+# Generated from common-pagination.bundle.yaml — pnpm spec:split
+id: common-pagination
+title: Common pagination
+status: draft
+owner: portal-team
+summary: Chuẩn pagination dưới table, dùng page numbers + ellipsis thay vì text generic `Page x of y`.
+specOrigin: legacy
+grillStatus:
+  bqaFacts: draft
+  bqaOpen: draft
+  dev: draft
+  full: not_required
+layout:
+  position: below table
+  alignment: center
+  style:
+    - Flat outline buttons, border nhẹ, không shadow.
+    - Active page dùng text/border primary `#4EAAFF` hoặc background primary nhạt.
+    - Disabled previous/next vẫn giữ footprint để layout không nhảy.
+controls:
+  previous:
+    content: icon + text
+    icon: ChevronLeft
+    text: 前へ
+    ariaLabel: 前のページ
+  next:
+    content: icon + text
+    icon: ChevronRight
+    text: 次へ
+    ariaLabel: 次のページ
+  pageNumbers:
+    window: current page +/- 2
+    firstLast: show first/last when outside window
+    ellipsis: show `...` when gap exists
+behavior:
+  query:
+    - Pagination phải giữ search params hiện tại.
+    - Page change gọi list service/composable, không lọc local-only nếu API contract có pagination.
+  perPage:
+    - Per-page select và page summary không nằm trong pagination bar dưới table.
+    - Per-page select nằm ở toolbar/header table góc phải theo `common-list-toolbar`, copy giữ `表示 ... 件 / ページ`.
+    - Đổi per-page reset page về 1.
+testIds:
+  pagination: "{module}-pagination"
+  previous: "{module}-pagination-prev-btn"
+  next: "{module}-pagination-next-btn"
+  pageButton: "{module}-pagination-page-{page}"
+acceptance:
+  - Không hiển thị copy English kiểu `Page 1 of 4` trong admin UI.
+  - Previous/next dùng icon + text tiếng Nhật `前へ`/`次へ`.
+  - Có thể preview ít nhất 2 page bằng mock data.
+  - Pagination dưới table chỉ gồm previous, page numbers/ellipsis, next; không hiển thị `表示 ... 件 / ページ` hoặc page summary tại đây.
+  - Pagination dưới table, căn giữa, page numbers observable bằng testId.

package/templates/project-skeleton/surfaces/common/yaml/search-filter/common-search-filter.bundle.yaml

@@ -0,0 +1,88 @@
+schema: portal-feature-bundle/v1
+id: common-search-filter
+title: Common search filter
+status: draft
+owner: portal-team
+summary: Chuẩn form search/filter cho list page, tách rõ input filter và nút search/clear.
+specOrigin: legacy
+grillStatus:
+  bqaFacts: draft
+  bqaOpen: draft
+  dev: draft
+  full: not_required
+spec:
+  layout:
+    filterRow:
+      position: top of list block
+      behavior:
+        - Các field filter nằm cùng row khi đủ rộng, tự wrap theo nhóm field khi màn nhỏ.
+        - Không đặt button search/clear cùng hàng với action toolbar như create/delete/import.
+        - Date range dùng start + separator `to` + end trong cùng input group.
+    buttonRow:
+      position: below filter row
+      alignment: center
+      buttons:
+        - key: search
+          text: 検索
+          icon: Search
+          variant: outline-primary
+          color: "#4EAAFF"
+          background: "#FFFFFF"
+          minWidth: 170px
+        - key: clear
+          text: クリア
+          icon: RotateCcw
+          variant: outline-secondary
+          color: "#C2C2C2"
+          background: "#FFFFFF"
+          minWidth: 170px
+  behavior:
+    submit:
+      - Submit gọi composable/service-like action.
+      - Query filter phải có thể giữ trên URL ở phase wire để pagination/sort không mất điều kiện.
+    clear:
+      - Clear reset filter về default.
+      - Clear điều hướng hoặc sync về route base của list nếu URL đang có query.
+      - Clear không xoá dữ liệu list bằng local-only state; phải refresh qua service boundary.
+  fieldGuidelines:
+    text: input compact, max width theo domain.
+    select: dùng select/combobox common, label rõ.
+    dateRange: label `期間`, separator `to`, không tách thành hai field rời rạc nếu legacy/domain đang hiểu là một khoảng.
+  testIds:
+    searchForm: "{module}-search-form"
+    submitButton: "{module}-search-btn"
+    clearButton: "{module}-clear-btn"
+    fields: "{module}-{field}-input|select"
+  acceptance:
+    - Nút search và clear luôn căn giữa dưới filter row.
+    - Nút search/clear dùng icon + text theo `common-buttons`; không để text-only.
+    - Clear màu xám/secondary, không dùng primary.
+    - Search/filter không chứa action nghiệp vụ như create/import/delete.
+legacy:
+  legacyRef:
+    module: common/common
+    function: common-search-filter
+    slice: slices.common-search-filter
+  behaviors: []
+  fields: []
+  ui: []
+  evidence: []
+  refs: {}
+design:
+  inherits: admin-crud
+  shell:
+    tag: "#shell: DataPage"
+    overrideCommonPattern: false
+  patterns:
+    - "#pattern: CRUD"
+  zones:
+    - id: main
+      label: Nội dung chính
+  behavior: {}
+  actions: []
+review:
+  summary: Chuẩn form search/filter cho list page, tách rõ input filter và nút search/clear.
+  layoutNotes: []
+_meta:
+  generatedBy: archived-legacy-converter
+  sourceRevision: null

package/templates/project-skeleton/surfaces/common/yaml/search-filter/ir/design.yaml

@@ -0,0 +1,13 @@
+# Generated from common-search-filter.bundle.yaml — pnpm spec:split
+id: common-search-filter
+inherits: admin-crud
+shell:
+  tag: "#shell: DataPage"
+  overrideCommonPattern: false
+patterns:
+  - "#pattern: CRUD"
+zones:
+  - id: main
+    label: Nội dung chính
+behavior: {}
+actions: []

package/templates/project-skeleton/surfaces/common/yaml/search-filter/ir/legacy.yaml

@@ -0,0 +1,11 @@
+# Generated from common-search-filter.bundle.yaml — pnpm spec:split
+id: common-search-filter
+legacyRef:
+  module: common/common
+  function: common-search-filter
+  slice: slices.common-search-filter
+behaviors: []
+fields: []
+ui: []
+evidence: []
+refs: {}

package/templates/project-skeleton/surfaces/common/yaml/search-filter/ir/spec.yaml

@@ -0,0 +1,59 @@
+# Generated from common-search-filter.bundle.yaml — pnpm spec:split
+id: common-search-filter
+title: Common search filter
+status: draft
+owner: portal-team
+summary: Chuẩn form search/filter cho list page, tách rõ input filter và nút search/clear.
+specOrigin: legacy
+grillStatus:
+  bqaFacts: draft
+  bqaOpen: draft
+  dev: draft
+  full: not_required
+layout:
+  filterRow:
+    position: top of list block
+    behavior:
+      - Các field filter nằm cùng row khi đủ rộng, tự wrap theo nhóm field khi màn nhỏ.
+      - Không đặt button search/clear cùng hàng với action toolbar như create/delete/import.
+      - Date range dùng start + separator `to` + end trong cùng input group.
+  buttonRow:
+    position: below filter row
+    alignment: center
+    buttons:
+      - key: search
+        text: 検索
+        icon: Search
+        variant: outline-primary
+        color: "#4EAAFF"
+        background: "#FFFFFF"
+        minWidth: 170px
+      - key: clear
+        text: クリア
+        icon: RotateCcw
+        variant: outline-secondary
+        color: "#C2C2C2"
+        background: "#FFFFFF"
+        minWidth: 170px
+behavior:
+  submit:
+    - Submit gọi composable/service-like action.
+    - Query filter phải có thể giữ trên URL ở phase wire để pagination/sort không mất điều kiện.
+  clear:
+    - Clear reset filter về default.
+    - Clear điều hướng hoặc sync về route base của list nếu URL đang có query.
+    - Clear không xoá dữ liệu list bằng local-only state; phải refresh qua service boundary.
+fieldGuidelines:
+  text: input compact, max width theo domain.
+  select: dùng select/combobox common, label rõ.
+  dateRange: label `期間`, separator `to`, không tách thành hai field rời rạc nếu legacy/domain đang hiểu là một khoảng.
+testIds:
+  searchForm: "{module}-search-form"
+  submitButton: "{module}-search-btn"
+  clearButton: "{module}-clear-btn"
+  fields: "{module}-{field}-input|select"
+acceptance:
+  - Nút search và clear luôn căn giữa dưới filter row.
+  - Nút search/clear dùng icon + text theo `common-buttons`; không để text-only.
+  - Clear màu xám/secondary, không dùng primary.
+  - Search/filter không chứa action nghiệp vụ như create/import/delete.

package/templates/project-skeleton/surfaces/common/yaml/status-chip/common-status-chip.bundle.yaml

@@ -0,0 +1,89 @@
+schema: portal-feature-bundle/v1
+id: common-status-chip
+title: Common status chip
+status: draft
+owner: portal-team
+summary: Chuẩn chip/tag trạng thái cho table, form detail và summary block.
+specOrigin: legacy
+grillStatus:
+  bqaFacts: draft
+  bqaOpen: draft
+  dev: draft
+  full: not_required
+spec:
+  principles:
+    - Status không để text trần nếu cần người dùng nhận biết nhanh.
+    - Màu phải có ý nghĩa trạng thái, không dùng để trang trí.
+    - Chip luôn có text label, không chỉ dùng màu để đảm bảo accessibility.
+  tones:
+    success:
+      useFor:
+        - active
+        - sent
+        - valid
+        - connected
+      color: green
+    danger:
+      useFor:
+        - inactive
+        - failed
+        - error
+        - disconnected
+      color: red
+    warning:
+      useFor:
+        - pending
+        - sending
+        - attention
+      color: amber
+    info:
+      useFor:
+        - draft
+        - system
+        - informational
+      color: blue
+    muted:
+      useFor:
+        - disabled
+        - unknown
+        - none
+      color: gray
+  layout:
+    shape: rounded-full hoặc rounded-md nhỏ, phẳng, border nhẹ.
+    size: compact table chip, không làm row cao.
+    maxTextLength: 12-16 ký tự; text dài dùng truncate-tooltip.
+  testIds:
+    chip: "{module}-{field}-chip"
+    rowChip: "{module}-{field}-{id}-chip"
+  acceptance:
+    - Status trong table dùng chip nếu có trạng thái hữu hạn.
+    - Delete/destructive không dùng chip đỏ nếu không phải trạng thái lỗi/nguy hiểm.
+    - Chip nhiều trong một cell phải wrap có kiểm soát hoặc stack ngang, không làm row dài bất thường.
+legacy:
+  legacyRef:
+    module: common/common
+    function: common-status-chip
+    slice: slices.common-status-chip
+  behaviors: []
+  fields: []
+  ui: []
+  evidence: []
+  refs: {}
+design:
+  inherits: admin-crud
+  shell:
+    tag: "#shell: DataPage"
+    overrideCommonPattern: false
+  patterns:
+    - "#pattern: CRUD"
+  zones:
+    - id: main
+      label: Nội dung chính
+  behavior: {}
+  actions: []
+review:
+  summary: Chuẩn chip/tag trạng thái cho table, form detail và summary block.
+  layoutNotes: []
+_meta:
+  generatedBy: archived-legacy-converter
+  sourceRevision: null

package/templates/project-skeleton/surfaces/common/yaml/status-chip/ir/design.yaml

@@ -0,0 +1,13 @@
+# Generated from common-status-chip.bundle.yaml — pnpm spec:split
+id: common-status-chip
+inherits: admin-crud
+shell:
+  tag: "#shell: DataPage"
+  overrideCommonPattern: false
+patterns:
+  - "#pattern: CRUD"
+zones:
+  - id: main
+    label: Nội dung chính
+behavior: {}
+actions: []

package/templates/project-skeleton/surfaces/common/yaml/status-chip/ir/legacy.yaml

@@ -0,0 +1,11 @@
+# Generated from common-status-chip.bundle.yaml — pnpm spec:split
+id: common-status-chip
+legacyRef:
+  module: common/common
+  function: common-status-chip
+  slice: slices.common-status-chip
+behaviors: []
+fields: []
+ui: []
+evidence: []
+refs: {}

package/templates/project-skeleton/surfaces/common/yaml/status-chip/ir/spec.yaml

@@ -0,0 +1,60 @@
+# Generated from common-status-chip.bundle.yaml — pnpm spec:split
+id: common-status-chip
+title: Common status chip
+status: draft
+owner: portal-team
+summary: Chuẩn chip/tag trạng thái cho table, form detail và summary block.
+specOrigin: legacy
+grillStatus:
+  bqaFacts: draft
+  bqaOpen: draft
+  dev: draft
+  full: not_required
+principles:
+  - Status không để text trần nếu cần người dùng nhận biết nhanh.
+  - Màu phải có ý nghĩa trạng thái, không dùng để trang trí.
+  - Chip luôn có text label, không chỉ dùng màu để đảm bảo accessibility.
+tones:
+  success:
+    useFor:
+      - active
+      - sent
+      - valid
+      - connected
+    color: green
+  danger:
+    useFor:
+      - inactive
+      - failed
+      - error
+      - disconnected
+    color: red
+  warning:
+    useFor:
+      - pending
+      - sending
+      - attention
+    color: amber
+  info:
+    useFor:
+      - draft
+      - system
+      - informational
+    color: blue
+  muted:
+    useFor:
+      - disabled
+      - unknown
+      - none
+    color: gray
+layout:
+  shape: rounded-full hoặc rounded-md nhỏ, phẳng, border nhẹ.
+  size: compact table chip, không làm row cao.
+  maxTextLength: 12-16 ký tự; text dài dùng truncate-tooltip.
+testIds:
+  chip: "{module}-{field}-chip"
+  rowChip: "{module}-{field}-{id}-chip"
+acceptance:
+  - Status trong table dùng chip nếu có trạng thái hữu hạn.
+  - Delete/destructive không dùng chip đỏ nếu không phải trạng thái lỗi/nguy hiểm.
+  - Chip nhiều trong một cell phải wrap có kiểm soát hoặc stack ngang, không làm row dài bất thường.

package/templates/project-skeleton/surfaces/common/yaml/table-action-column/common-table-action-column.bundle.yaml

@@ -0,0 +1,81 @@
+schema: portal-feature-bundle/v1
+id: common-table-action-column
+title: Common table action column
+status: draft
+owner: portal-team
+summary: "Chuẩn cột action trong table list: icon-only, fixed width, accessible và không làm row phình."
+specOrigin: legacy
+grillStatus:
+  bqaFacts: draft
+  bqaOpen: draft
+  dev: draft
+  full: not_required
+spec:
+  layout:
+    headerText: アクション hoặc blank nếu table quá hẹp nhưng phải có aria context.
+    width: fixed theo số action, không auto co text.
+    alignment: right hoặc center tùy table; mặc định right cho admin list.
+    overflow: nowrap
+  actions:
+    iconOnly: true
+    requiredAttrs:
+      - data-testid
+      - aria-label
+      - title
+    order:
+      - view/detail
+      - edit/settings
+      - duplicate/copy
+      - delete/destructive
+  variants:
+    view:
+      variant: ghost hoặc outline
+      icon: Eye
+    settings:
+      variant: outline
+      icon: Settings
+    loginAs:
+      variant: info hoặc outline
+      icon: LogIn
+      note: Nếu có nhiều user login-as, dùng pattern riêng thay vì nhồi text dài vào action column.
+    delete:
+      variant: destructive-ghost
+      icon: Trash2
+  permissions:
+    hiddenWhenNotAllowed: true
+    disabledWhenPending: true
+    disabledNeedsTooltip: true nếu người dùng cần biết lý do
+  testIds:
+    actionButton: "{module}-{action}-{id}"
+  acceptance:
+    - Không có text label trong row action button.
+    - Delete icon hiển thị màu đỏ/destructive.
+    - Action column không wrap và không làm tăng row height.
+legacy:
+  legacyRef:
+    module: common/common
+    function: common-table-action-column
+    slice: slices.common-table-action-column
+  behaviors: []
+  fields: []
+  ui: []
+  evidence: []
+  refs: {}
+design:
+  inherits: admin-crud
+  shell:
+    tag: "#shell: DataPage"
+    overrideCommonPattern: false
+  patterns:
+    - "#pattern: CRUD"
+  zones:
+    - id: main
+      label: Nội dung chính
+  behavior: {}
+  actions: []
+review:
+  summary: "Chuẩn cột action trong table list: icon-only, fixed width, accessible và không làm row phình."
+  layoutNotes: []
+_meta:
+  generatedBy: archived-legacy-converter
+  sourceRevision: null

package/templates/project-skeleton/surfaces/common/yaml/table-action-column/ir/design.yaml

@@ -0,0 +1,13 @@
+# Generated from common-table-action-column.bundle.yaml — pnpm spec:split
+id: common-table-action-column
+inherits: admin-crud
+shell:
+  tag: "#shell: DataPage"
+  overrideCommonPattern: false
+patterns:
+  - "#pattern: CRUD"
+zones:
+  - id: main
+    label: Nội dung chính
+behavior: {}
+actions: []

package/templates/project-skeleton/surfaces/common/yaml/table-action-column/ir/legacy.yaml

@@ -0,0 +1,11 @@
+# Generated from common-table-action-column.bundle.yaml — pnpm spec:split
+id: common-table-action-column
+legacyRef:
+  module: common/common
+  function: common-table-action-column
+  slice: slices.common-table-action-column
+behaviors: []
+fields: []
+ui: []
+evidence: []
+refs: {}