devskill 2.0.2

package/skills/builderx_spa-design/references/features-feedback-actions.md

@@ -0,0 +1,76 @@
+---
+name: features-feedback-actions
+description: Buttons, feedback states, and alerts from @/components/design
+---
+
+# Actions & Feedback
+
+## 1. Button
+
+The standard button uses custom CSS classes instead of wrapping `<a-button>` completely; it adds loading spinners and Phosphor icons explicitly.
+
+**Core Props:**
+- `type`: `'primary'` (green) | `'secondary'` (outline) | `'info'` (blue) | `'warning'` (orange) | `'danger'` or `'error'` (red) | `'gray'` | `'black'` | `'neutral'`
+- `size`: `'xs'` (24px) | `'sm'` (28px) | `'md'` (32px, default) | `'lg'` (36px)
+- `label`: String (Can also be placed in default slot)
+- `loading`: Boolean (replaces icon with spinner, adds opacity)
+- `ghost`: Boolean (inverts background/border for transparent usage)
+- `danger`: Boolean (forces negative colors)
+
+**Slots:** `#icon` (left), `#suffix` (right).
+
+```vue
+<template>
+  <div class="flex gap-4">
+    <!-- Primary action -->
+    <Button 
+      type="primary" 
+      size="md" 
+      label="Save Configuration" 
+      :loading="isSaving" 
+      @click="save" 
+    />
+
+    <!-- Ghost / Secondary -->
+    <Button type="secondary" ghost>Cancel</Button>
+
+    <!-- Danger with icon -->
+    <Button type="danger">
+      <template #icon><PhTrash /></template>
+      Delete Record
+    </Button>
+
+    <!-- Icon-only button (automatically becomes a square) -->
+    <Button type="warning">
+      <template #icon><PhWarningCircle /></template>
+    </Button>
+  </div>
+</template>
+<script setup>
+import { Button } from '@/components/design'
+import { PhTrash, PhWarningCircle } from '@phosphor-icons/vue'
+</script>
+```
+
+## 2. Empty States
+Always use `<Empty>` instead of `<a-empty>` for consistency in "No Data" screens. Ensure the parent has relative positioning if using inside absolute layouts.
+
+```vue
+<template>
+  <Empty 
+    label="No orders found matching your criteria" 
+    description="Try adjusting your filters"
+  >
+    <!-- Slot below text automatically inserts action buttons -->
+    <Button type="primary" size="sm" @click="reset">Reset Filters</Button>
+  </Empty>
+</template>
+<script setup>
+import { Empty, Button } from '@/components/design'
+</script>
+```
+
+## 3. Alerts and Notifications
+For inline contextual alerts, use standard `<Alert>` components or the specific `<MessageAlert>` if present. Look at `Alert.vue` for details.
+
+For simple Toast-style popups, inspect if the project uses global toast methods, e.g., via `app.config.globalProperties.$toast` or a `toast.js` utility rather than inline components.

package/skills/builderx_spa-design/references/features-forms.md

@@ -0,0 +1,91 @@
+---
+name: features-forms
+description: Standard form elements (Input, Select, Checkbox, etc.) from @/components/design
+---
+
+# Form Elements
+
+Use the wrapper components from `@/components/design` instead of raw AntD (`a-input`, `a-select`). Our wrappers add consistent styling, built-in labels, and error messages.
+
+## Common Props Across Form Components
+- `size`: `'xs'` | `'sm'` | `'md'` (default) | `'lg'`
+- `disabled`: `Boolean`
+
+## 1. Input Variants
+
+`Input.vue` supports standard text, numbers, and textareas.
+**Props:** `value` (v-model:value), `label`, `message` (sub-text or error text), `isError` (Boolean), `require` (Boolean - adds asterisk), `allowClear`.
+**Variants built inside Input.vue:** Use `isTextArea="true"` for textarea, `isNumber="true"` for number formatting.
+
+```vue
+<template>
+  <!-- Standard Input with label and error state -->
+  <Input
+    v-model:value="form.email"
+    label="Email Address"
+    require
+    :isError="hasError"
+    message="Please enter a valid email"
+    placeholder="Enter email"
+    size="lg"
+  />
+
+  <!-- Number Input with min/max -->
+  <Input
+    v-model:value="form.qty"
+    isNumber
+    :minNumber="1"
+    :maxNumber="99"
+  />
+
+  <!-- Text Area -->
+  <Input
+    v-model:value="form.notes"
+    isTextArea
+    :rows="4"
+  />
+</template>
+<script setup>
+import { Input } from '@/components/design'
+</script>
+```
+
+*(Note: The codebase also has specific `InputMoney.vue`, `InputTelephone.vue` if you need highly specialized formatting).*
+
+## 2. Select
+
+`Select.vue` wraps `a-select`.
+**Props:** `value` (v-model:value), `options` (Array of objects or strings), `title` (acts as label), `mode` ('single' | 'multiple' | 'tags').
+**Mapping:** Use `sKey` and `sValue` props to tell the component which fields in your objects map to the select's key and label (defaults to 'key' and 'value').
+
+```vue
+<template>
+  <Select
+    v-model:value="form.role"
+    title="User Role"
+    :options="roleOptions"
+    sKey="id"
+    sValue="name"
+    :useNone="true" 
+  />
+  <!-- useNone=true automatically prepends a "None" option -->
+</template>
+```
+
+## 3. Checkbox & Radio
+
+`Checkbox.vue` and `Radio.vue` work individually or within their Group components (if you use AntD groups).
+
+```vue
+<template>
+  <Checkbox
+    v-model:checked="agreement"
+    label="I agree to terms"
+    subLabel="Read the full document below"
+    size="md"
+  />
+</template>
+<script setup>
+import { Checkbox } from '@/components/design'
+</script>
+```

package/skills/builderx_spa-design/references/features-layout-navigation.md

@@ -0,0 +1,121 @@
+---
+name: features-layout-navigation
+description: Layout and data display components from @/components/design
+---
+
+# Layout & Navigation
+
+## 1. Modals & Drawers
+
+`Modal.vue` and `Drawer.vue` provide consistent overlays with standard confirm/cancel footers.
+**Props:** `title`, `visible` (v-model), `confirmLoading`, `okText`, `cancelText`, `hiddenOk`, `hiddenCancel`.
+**Events:** `@ok`, `@cancel`
+
+```vue
+<template>
+  <button @click="showModal = true">Open Modal</button>
+
+  <Modal
+    v-model:visible="showModal"
+    title="Create Item"
+    :confirmLoading="isSaving"
+    okText="Save Changes"
+    cancelText="Discard"
+    @ok="handleSave"
+    @cancel="handleClose"
+  >
+    <!-- Content goes here -->
+    <div class="p-4">My Form Items</div>
+    
+    <!-- Optional: Override the footer entirely -->
+    <!-- <template #footer>Custom Buttons</template> -->
+  </Modal>
+</template>
+<script setup>
+import { Modal, Button } from '@/components/design'
+import { ref } from 'vue'
+
+const showModal = ref(false)
+const isSaving = ref(false)
+
+const handleSave = async () => {
+  isSaving.value = true
+  // ... do save
+  isSaving.value = false
+  showModal.value = false
+}
+const handleClose = () => { /* reset */ }
+</script>
+```
+
+*(Swap `<Modal>` with `<Drawer>` for a side-sheet behavior with identical API).*
+
+## 2. Table Component
+
+`Table.vue` wraps AntD `<a-table>` but adds unified `height`/`minHeight` styling, a centralized `<Pagination>` slot at the bottom, and an empty state.
+
+**Props:**
+- `columns`: standard AntD format.
+- `height` / `minHeight` / `bodyHeight`.
+- `loading`: shows `<LogoSpinning>` internally.
+- `pagination`: automatically mounts the internal Pagination component if provided.
+
+**Slots:** `#bodyCell`, `#headerCell`, `#expandedRowRender`, `#table-bottom-left`, `#table-bottom-right`.
+
+```vue
+<template>
+  <Table
+    :columns="columns"
+    :dataSource="data"
+    :loading="isLoading"
+    :pagination="paginationData"
+    height="calc(100vh - 200px)"
+    @change="onTableChange"
+  >
+    <template #bodyCell="{ column, record }">
+      <template v-if="column.key === 'action'">
+        <Button size="sm" type="secondary" @click="edit(record)">Edit</Button>
+      </template>
+    </template>
+    
+    <template #table-bottom-left>
+      <span class="text-design-body-neutral">Selected {{ selectedRowKeys.length }} items</span>
+    </template>
+  </Table>
+</template>
+<script setup>
+import { Table, Button } from '@/components/design'
+</script>
+```
+
+## 3. Tabs Component
+
+`Tabs.vue` wraps `<a-tabs>`. Use it alongside `Tab.vue`.
+**Props:** `options` (array of items with `sKey`, `sValue`), `size`, `bordered`. Provide icons via the `icon` field mapping to Phosphor icons.
+
+```vue
+<template>
+  <Tabs
+    v-model:activeKey="activeTab"
+    :options="tabOptions"
+    sKey="id"
+    sValue="name"
+    size="md"
+  >
+    <template #tabPane="{ option }">
+      <div v-if="option.id === 'general'">General Settings</div>
+      <div v-if="option.id === 'advanced'">Advanced Config</div>
+    </template>
+  </Tabs>
+</template>
+<script setup>
+import { Tabs } from '@/components/design'
+import { ref } from 'vue'
+
+const activeTab = ref('general')
+const tabOptions = [
+  { id: 'general', name: 'General', icon: 'PhGear' },
+  { id: 'advanced', name: 'Advanced', icon: 'PhWrench' } // Phosphor icon keys
+]
+</script>
+```

package/skills/builderx_spa-permission/SKILL.md

@@ -0,0 +1,38 @@
+---
+name: builderx_spa-permission
+description: Rule-based permission checking in BuilderX SPA using bitwise operations from @/composable/employeePermission. Use this skill when hiding/showing UI or checking user access.
+metadata:
+  author: Vũ Lưu
+  version: "2026.3.23"
+  source: Hand-written based on builderx_spa source code
+---
+
+# BuilderX Permissions
+
+> Always use `hasPermission` and `hasPermissions` to check user roles logically against the bitwise structure.
+
+## Core
+
+| Topic | Description | Reference |
+|-------|-------------|-----------|
+| Checking Access | How to pass the permission bit and the specific permission string | [has-permission](references/has-permission.md) |
+
+## Quick Reference
+
+```javascript
+import { hasPermission } from '@/composable/employeePermission'
+import { useSiteStore } from '@/stores/site'
+
+export default {
+  computed: {
+    canEditProduct() {
+      const siteStore = useSiteStore()
+      const permissionsBit = siteStore.site?.site_permission?.permissions
+      if (!permissionsBit) return false
+      
+      // Checking a specific string action
+      return hasPermission(permissionsBit, 'update_product')
+    }
+  }
+}
+```

package/skills/builderx_spa-permission/references/has-permission.md

@@ -0,0 +1,34 @@
+# Checking Permissions (`@/composable/employeePermission`)
+
+BuilderX stores permission arrays as a single large Integer (bitwise). To check dynamically, we use helper functions that isolate the bits.
+
+## `hasPermission(permissionBit, permissionString)`
+
+Checks if a user has a single specific permission.
+It uses `BigInt` under the hood to prevent precision loss.
+
+```js
+import { hasPermission } from '@/composable/employeePermission'
+
+// Evaluates to a non-zero truthy number if allowed, or 0 if denied
+if (hasPermission(userBit, 'view_dashboard')) {
+  // Allow access
+}
+```
+
+## `hasPermissions(permissionBit, permissionStrings)`
+
+Checks if a user has **ALL** of the specified permissions in an array.
+
+```js
+import { hasPermissions } from '@/composable/employeePermission'
+
+// Evaluates to a truthy value only if they have BOTH permissions
+if (hasPermissions(userBit, ['view_builder', 'export_site'])) {
+  // Allow
+}
+```
+
+## `getPermissionsFromBit(permissionBit)`
+
+Converts the integer back into a readable array of permission strings. Primarily useful for debugging or rendering lists.