es-application-template 0.0.8 → 0.0.11

package/dist/index.mjs

@@ -4,7 +4,7 @@ import axios from 'axios';
 import { useQuery, useQueryClient, useMutation } from '@tanstack/react-query';
 import { useNavigate } from 'react-router-dom';
 import { UncontrolledTooltip, Input, FormFeedback, FormText, Label, Button } from 'reactstrap';
-import { Trash2, X, Edit, Info, Copy, Trash, Settings, Mail, Plus, ChevronLeft, ChevronRight, RefreshCw, Save } from 'becoxy-icons';
+import { Trash2, X, Edit, Info, Copy, Trash, Settings, Mail, Plus, ChevronLeft, ChevronRight, Download, RefreshCw, Save } from 'becoxy-icons';
 import toast from 'react-hot-toast';
 import classNames from 'classnames';
 import { Controller } from 'react-hook-form';
@@ -5392,19 +5392,26 @@ const Sidebar = (props) => {
             toggleSidebar();
         }, 400);
     };
-    const sidebar = (jsxs("div", { tabIndex: 0, className: classNames({ 'd-none': !open }), onKeyDown: (e) => {
+    const sidebar = (jsxs("div", { tabIndex: 0, className: classNames('es-application-sidebar-root', {
+            'is-hidden': !open
+        }), onKeyDown: (e) => {
             if ((!keyboard) && e.code === 'Escape' && flag) {
                 handClose();
                 e.stopPropagation();
                 e.preventDefault();
             }
-        }, children: [jsx("div", { className: classNames('offcanvas-backdrop fade', backdropClassName, {
-                    'd-none': !flag || hiddenBackground,
+        }, children: [jsx("div", { className: classNames('es-application-sidebar-backdrop', backdropClassName, {
+                    'is-hidden': !flag || hiddenBackground,
                     show: flag
-                }), style: { zIndex: zIndex - 1 }, onClick: handClose }), jsxs("div", { className: classNames('customizer d-none d-md-block ', `customizer-${width ?? 600}`, panelClassName, {
+                }), style: { zIndex: zIndex - 1 }, onClick: handClose }), jsxs("div", { className: classNames('es-application-sidebar', panelClassName, {
                     open: flag,
                     fullscreen: isFullScreen
-                }), style: { zIndex }, children: [jsxs("div", { style: {
+                }), style: {
+                    '--es-application-sidebar-width': typeof width === 'number'
+                        ? `${width}px`
+                        : width ?? '600px',
+                    zIndex
+                }, children: [jsxs("div", { style: {
                             position: 'fixed',
                             top: '50%',
                             transform: 'translate(-50%, -50%)',
@@ -5566,83 +5573,156 @@ const ConfigTreeJsonDrawer = ({ open, onClose, rows, mode = 'VIEW', onApply, fil
     return (jsx(Sidebar, { open: open, toggleSidebar: onClose, width: 760, keyboard: true, hiddenFullScreenButton: true, zIndex: 1061, children: jsxs("div", { className: 'h-100 bg-white d-flex flex-column', children: [jsx(ModalHeader, { typeModal: 'Detail', handleModal: onClose, title: mode === 'IMPORT' ? 'Nhập JSON thiết lập' : 'Xem / Xuất JSON thiết lập' }), mode === 'VIEW' ? (jsxs(Fragment, { children: [jsxs("div", { className: 'd-flex justify-content-end gap-50 border-bottom p-1', children: [jsx(Button, { type: 'button', color: 'outline-primary', className: 'be-button', disabled: currentPreview.errors.length > 0, onClick: () => { void handleCopy(); }, children: "Sao ch\u00E9p" }), jsx(Button, { type: 'button', color: 'primary', className: 'be-button', disabled: currentPreview.errors.length > 0, onClick: () => downloadJson(currentJson, fileName), children: "T\u1EA3i file JSON" })] }), jsx("div", { className: 'flex-grow-1 overflow-auto', style: { minHeight: 0 }, children: jsx("div", { className: 'p-1', children: currentPreview.errors.length > 0 ? (jsxs("div", { className: 'alert alert-danger py-50 px-1 mb-0', children: [jsx("div", { className: 'fw-bolder mb-25', children: "D\u1EEF li\u1EC7u nh\u00E1p ch\u01B0a h\u1EE3p l\u1EC7:" }), currentPreview.errors.slice(0, 5).map((error, index) => (jsxs("div", { children: ["\u2022 ", error] }, `${index}-${error}`)))] })) : (jsx("pre", { className: 'bg-light border rounded p-1 mb-0', children: currentJson })) }) })] })) : (jsxs(Fragment, { children: [jsxs("div", { className: 'border-bottom p-1', children: [jsxs("div", { className: 'd-flex align-items-end gap-1 flex-wrap', children: [jsxs("div", { style: { width: 190 }, children: [jsx(Label, { className: 'mb-25', children: "Ch\u1EBF \u0111\u1ED9 nh\u1EADp" }), jsxs(Input, { type: 'select', value: importMode, onChange: event => setImportMode(event.target.value), children: [jsx("option", { value: 'MERGE', children: "H\u1EE3p nh\u1EA5t (khuy\u1EBFn ngh\u1ECB)" }), jsx("option", { value: 'REPLACE', children: "Thay th\u1EBF to\u00E0n b\u1ED9" })] })] }), jsxs("div", { children: [jsx("input", { ref: fileInputRef, type: 'file', accept: '.json,application/json', hidden: true, onChange: event => { void handleFileChange(event); } }), jsx(Button, { type: 'button', color: 'outline-primary', className: 'be-button', onClick: () => fileInputRef.current?.click(), children: "Ch\u1ECDn file .json" })] })] }), jsx("div", { className: 'small text-muted mt-50', children: "H\u1EE3p nh\u1EA5t: key m\u1EDBi \u0111\u01B0\u1EE3c th\u00EAm, key tr\u00F9ng \u0111\u01B0\u1EE3c c\u1EADp nh\u1EADt, key kh\u00E1c gi\u1EEF nguy\u00EAn. Thay th\u1EBF: d\u00F9ng JSON import l\u00E0m to\u00E0n b\u1ED9 d\u1EEF li\u1EC7u nh\u00E1p hi\u1EC7n t\u1EA1i." })] }), jsxs("div", { className: 'flex-grow-1 min-h-0 d-flex flex-column p-1', children: [jsx(Label, { for: 'config-json-import', className: 'mb-50', children: "D\u00E1n JSON ho\u1EB7c ch\u1ECDn file" }), jsx(Input, { id: 'config-json-import', type: 'textarea', className: 'font-monospace flex-grow-1', style: { minHeight: 280, resize: 'none' }, value: importText, placeholder: 'D\u00E1n JSON thi\u1EBFt l\u1EADp t\u1EA1i \u0111\u00E2y...', onChange: event => setImportText(event.target.value) }), !importText.trim() ? (jsx("div", { className: 'alert alert-info py-50 px-1 mt-1 mb-0', children: "Ch\u01B0a c\u00F3 d\u1EEF li\u1EC7u import. C\u00F3 th\u1EC3 d\u00F9ng ChatGPT t\u1EA1o file JSON r\u1ED3i d\u00E1n ho\u1EB7c t\u1EA3i file l\u00EAn." })) : importPreview.errors.length > 0 ? (jsxs("div", { className: 'alert alert-danger py-50 px-1 mt-1 mb-0', children: [jsx("div", { className: 'fw-bolder mb-25', children: "JSON ch\u01B0a h\u1EE3p l\u1EC7:" }), importPreview.errors.slice(0, 5).map((error, index) => (jsxs("div", { children: ["\u2022 ", error] }, `${index}-${error}`))), importPreview.errors.length > 5 ? (jsxs("div", { children: ["\u2022 ... v\u00E0 ", importPreview.errors.length - 5, " l\u1ED7i kh\u00E1c"] })) : null] })) : (jsxs("div", { className: 'alert alert-success py-50 px-1 mt-1 mb-0', children: ["JSON h\u1EE3p l\u1EC7. Sau khi \u00E1p d\u1EE5ng, Grid s\u1EBD c\u00F3 ", countConfigNodes(importPreview.rows), " node. D\u1EEF li\u1EC7u ch\u1EC9 l\u00E0 nh\u00E1p cho \u0111\u1EBFn khi b\u1EA5m L\u01B0u \u1EDF m\u00E0n ch\u00EDnh."] }))] }), importMode === 'REPLACE' ? (jsx("div", { className: 'alert alert-warning rounded-0 border-start-0 border-end-0 mb-0 py-50 px-1', children: "Ch\u1EBF \u0111\u1ED9 Thay th\u1EBF s\u1EBD b\u1ECF to\u00E0n b\u1ED9 key hi\u1EC7n c\u00F3 kh\u1ECFi d\u1EEF li\u1EC7u nh\u00E1p tr\u01B0\u1EDBc khi \u00E1p d\u1EE5ng JSON import." })) : null, jsxs("div", { className: 'd-flex justify-content-end gap-50 border-top p-1', children: [jsx(Button, { type: 'button', color: 'secondary', outline: true, className: 'be-button', onClick: onClose, children: "H\u1EE7y" }), jsx(Button, { type: 'button', color: 'primary', className: 'be-button', disabled: !importPreview.ready || !onApply, onClick: handleApply, children: "\u00C1p d\u1EE5ng v\u00E0o Grid" })] })] }))] }) }));
 };
 
-const SELECT_MENU_PORTAL_STYLES = {
-    menuPortal: (base) => ({
-        ...base,
-        zIndex: 1100
-    })
-};
-const UI_KEY_SAMPLES = [
+const UI_RULES = [
+    {
+        id: 'list-grid-visible',
+        section: 'list-grid',
+        category: 'ui-list',
+        pattern: 'ui.list.grid.<field>.visible',
+        type: 'boolean',
+        defaultValue: true,
+        examples: ['ui.list.grid.email.visible'],
+        description: 'Ẩn hoặc hiện một cột trên Grid của danh sách.'
+    },
     {
+        id: 'list-toolbar-visible',
+        section: 'list-grid',
+        category: 'ui-list',
         pattern: 'ui.list.toolbar.<keyCode>.visible',
         type: 'boolean',
-        examples: ['ui.list.toolbar.status.visible']
+        defaultValue: true,
+        examples: ['ui.list.toolbar.status.visible'],
+        description: 'Ẩn hoặc hiện một điều khiển trên toolbar của danh sách.'
     },
     {
+        id: 'list-toolbar-disabled',
+        section: 'list-grid',
+        category: 'ui-list',
         pattern: 'ui.list.toolbar.<keyCode>.disabled',
         type: 'boolean',
-        examples: ['ui.list.toolbar.status.disabled']
+        defaultValue: false,
+        examples: ['ui.list.toolbar.status.disabled'],
+        description: 'Bật hoặc khóa một điều khiển trên toolbar của danh sách.'
     },
     {
+        id: 'list-action-visible',
+        section: 'list-grid',
+        category: 'ui-list',
         pattern: 'ui.list.action.<id>.visible',
         type: 'boolean',
-        examples: ['ui.list.action.DELETE.visible']
+        defaultValue: true,
+        examples: ['ui.list.action.DELETE.visible'],
+        description: 'Ẩn hoặc hiện một action của dòng hay danh sách.'
     },
     {
+        id: 'list-action-disabled',
+        section: 'list-grid',
+        category: 'ui-list',
         pattern: 'ui.list.action.<id>.disabled',
         type: 'boolean',
-        examples: ['ui.list.action.DELETE.disabled']
+        defaultValue: false,
+        examples: ['ui.list.action.DELETE.disabled'],
+        description: 'Bật hoặc khóa một action của dòng hay danh sách.'
     },
     {
+        id: 'form-field-visible',
+        section: 'form-field',
+        category: 'ui-form',
         pattern: 'ui.form.field.<name>.visible',
         type: 'boolean',
-        examples: ['ui.form.field.email.visible']
+        defaultValue: true,
+        examples: ['ui.form.field.email.visible'],
+        description: 'Ẩn hoặc hiện field trên form.'
     },
     {
+        id: 'form-field-required',
+        section: 'form-field',
+        category: 'ui-form',
         pattern: 'ui.form.field.<name>.required',
         type: 'boolean',
-        examples: ['ui.form.field.email.required']
+        defaultValue: false,
+        examples: ['ui.form.field.email.required'],
+        description: 'Quy định field có bắt buộc nhập hay không.'
     },
     {
+        id: 'form-field-disabled',
+        section: 'form-field',
+        category: 'ui-form',
         pattern: 'ui.form.field.<name>.disabled',
         type: 'boolean',
-        examples: ['ui.form.field.email.disabled']
+        defaultValue: false,
+        examples: ['ui.form.field.email.disabled'],
+        description: 'Bật hoặc khóa tương tác với field.'
     },
     {
+        id: 'form-field-readonly',
+        section: 'form-field',
+        category: 'ui-form',
         pattern: 'ui.form.field.<name>.readOnly',
         type: 'boolean',
-        examples: ['ui.form.field.email.readOnly']
+        defaultValue: false,
+        examples: ['ui.form.field.email.readOnly'],
+        description: 'Quy định field chỉ đọc hay có thể chỉnh sửa.'
     },
     {
+        id: 'form-action-visible',
+        section: 'form-action',
+        category: 'ui-form',
         pattern: 'ui.form.action.<id>.visible',
         type: 'boolean',
-        examples: ['ui.form.action.SAVE.visible']
+        defaultValue: true,
+        examples: ['ui.form.action.SAVE.visible'],
+        description: 'Ẩn hoặc hiện một action trên form.'
     },
     {
+        id: 'form-action-disabled',
+        section: 'form-action',
+        category: 'ui-form',
         pattern: 'ui.form.action.<id>.disabled',
         type: 'boolean',
-        examples: ['ui.form.action.SAVE.disabled']
+        defaultValue: false,
+        examples: ['ui.form.action.SAVE.disabled'],
+        description: 'Bật hoặc khóa một action trên form.'
     },
     {
+        id: 'form-tab-visible',
+        section: 'form-structure',
+        category: 'ui-form',
         pattern: 'ui.form.tab.<key>.visible',
         type: 'boolean',
-        examples: ['ui.form.tab.permission.visible']
+        defaultValue: true,
+        examples: ['ui.form.tab.permission.visible'],
+        description: 'Ẩn hoặc hiện tab trên form.'
     },
     {
+        id: 'form-step-visible',
+        section: 'form-structure',
+        category: 'ui-form',
         pattern: 'ui.form.step.<key>.visible',
         type: 'boolean',
-        examples: ['ui.form.step.confirm.visible']
+        defaultValue: true,
+        examples: ['ui.form.step.confirm.visible'],
+        description: 'Ẩn hoặc hiện một bước trong quy trình form.'
     },
     {
+        id: 'form-section-visible',
+        section: 'form-structure',
+        category: 'ui-form',
         pattern: 'ui.form.section.<key>.visible',
         type: 'boolean',
-        examples: ['ui.form.section.security.visible']
+        defaultValue: true,
+        examples: ['ui.form.section.security.visible'],
+        description: 'Ẩn hoặc hiện một khu vực trên form.'
     }
 ];
-const EXPLICIT_KEY_SAMPLES = [
+const NON_UI_RULES = [
     {
+        id: 'behavior-boolean',
+        section: 'other-settings',
+        category: 'behavior',
         pattern: 'behavior.<meaning>',
         type: 'boolean',
+        sampleValue: true,
         examples: [
             'behavior.allowDelete',
             'behavior.allowEdit',
@@ -5652,182 +5732,389 @@ const EXPLICIT_KEY_SAMPLES = [
             'behavior.allowChangeStatus',
             'behavior.allowSort',
             'behavior.autoSubmit'
-        ]
+        ],
+        description: 'Điều khiển một hành vi nghiệp vụ có ý nghĩa ổn định.'
     },
     {
+        id: 'default-number',
+        section: 'other-settings',
+        category: 'default',
         pattern: 'default.<fieldOrMeaning>',
         type: 'number',
-        examples: [
-            'default.status',
-            'default.pageSize'
-        ]
+        sampleValue: 1,
+        examples: ['default.status', 'default.pageSize'],
+        description: 'Giá trị số mặc định cho field hoặc hành vi.'
     },
     {
+        id: 'default-string',
+        section: 'other-settings',
+        category: 'default',
         pattern: 'default.<fieldOrMeaning>',
         type: 'string',
-        examples: [
-            'default.note',
-            'default.currencyCode'
-        ]
+        sampleValue: 'VND',
+        examples: ['default.note', 'default.currencyCode'],
+        description: 'Giá trị chuỗi mặc định cho field hoặc hành vi.'
     },
     {
+        id: 'default-date',
+        section: 'other-settings',
+        category: 'default',
         pattern: 'default.<fieldOrMeaning>',
         type: 'date',
-        examples: ['default.startDate']
+        sampleValue: '2026-01-01',
+        examples: ['default.startDate'],
+        description: 'Giá trị ngày mặc định.'
     },
     {
+        id: 'default-datetime',
+        section: 'other-settings',
+        category: 'default',
         pattern: 'default.<fieldOrMeaning>',
         type: 'datetime',
-        examples: ['default.executeAt']
+        sampleValue: '2026-01-01T08:00:00+07:00',
+        examples: ['default.executeAt'],
+        description: 'Giá trị ngày giờ mặc định.'
     },
     {
+        id: 'default-guid',
+        section: 'other-settings',
+        category: 'default',
         pattern: 'default.<fieldOrMeaning>',
         type: 'guid',
-        examples: [
-            'default.departmentId',
-            'default.warehouseId'
-        ]
+        sampleValue: '00000000-0000-0000-0000-000000000001',
+        examples: ['default.departmentId', 'default.warehouseId'],
+        description: 'Giá trị định danh mặc định.'
     },
     {
+        id: 'option-json',
+        section: 'other-settings',
+        category: 'option',
         pattern: 'option.<meaning>',
         type: 'json',
+        sampleValue: [0, 1],
         examples: [
             'option.allowedStatuses',
             'option.allowedTypes',
             'option.exportFormats'
-        ]
+        ],
+        description: 'Danh sách hoặc cấu trúc tùy chọn có schema rõ ràng.'
     },
     {
+        id: 'custom-domain-boolean',
+        section: 'other-settings',
+        category: 'custom',
         pattern: '<domain>.<meaning>',
         type: 'boolean',
+        sampleValue: true,
         examples: [
             'approval.autoSubmit',
             'approval.requireComment',
             'password.requireChangeOnFirstLogin',
             'confirmation.requireRedeployConfirmation'
-        ]
+        ],
+        description: 'Cờ tùy chỉnh cho một miền nghiệp vụ chưa thuộc pattern chung.'
     },
     {
+        id: 'custom-domain-number',
+        section: 'other-settings',
+        category: 'custom',
         pattern: '<domain>.<meaning>',
         type: 'number',
+        sampleValue: 30,
         examples: [
             'integration.timeoutSeconds',
             'integration.retryCount',
             'calculation.decimalPlaces'
-        ]
+        ],
+        description: 'Giá trị số tùy chỉnh cho một miền nghiệp vụ.'
     },
     {
+        id: 'custom-domain-string',
+        section: 'other-settings',
+        category: 'custom',
         pattern: '<domain>.<meaning>',
         type: 'string',
-        examples: ['calculation.roundingMode']
+        sampleValue: 'HALF_UP',
+        examples: ['calculation.roundingMode'],
+        description: 'Giá trị chuỗi tùy chỉnh cho một miền nghiệp vụ.'
     },
     {
+        id: 'custom-root-number',
+        section: 'other-settings',
+        category: 'custom',
         pattern: '<key>',
         type: 'number',
-        examples: ['maxDetailRows']
+        sampleValue: 100,
+        examples: ['maxDetailRows'],
+        description: 'Key gốc chỉ dùng khi không có namespace phù hợp và ý nghĩa vẫn rõ ràng.'
     }
 ];
-const KEY_SAMPLES = [
-    ...UI_KEY_SAMPLES,
-    ...EXPLICIT_KEY_SAMPLES
+const SETTING_KEY_RULES = [
+    ...UI_RULES,
+    ...NON_UI_RULES
 ];
-const CATEGORY_OPTIONS = [
-    {
-        value: 'ui-list',
-        label: 'UI danh sách'
-    },
-    {
-        value: 'ui-form',
-        label: 'UI biểu mẫu'
-    },
-    {
-        value: 'behavior',
-        label: 'Hành vi'
-    },
-    {
-        value: 'default',
-        label: 'Mặc định'
-    },
-    {
-        value: 'option',
-        label: 'Tùy chọn'
+const SETTING_KEY_CONVENTION = {
+    id: 'becoxy-setting-key-convention',
+    version: 1,
+    title: 'BECoxy Setting Key Convention',
+    objective: [
+        'Các thiết lập UI và behavior phải được đọc qua setting.get(key, fallback).',
+        'Không hard-code cấu hình nếu giá trị cần được quản trị từ Setting.'
+    ],
+    keyStructure: {
+        pattern: '<Resource>.<setting-key>',
+        explanation: [
+            'Resource là mã ổn định của feature hoặc tài nguyên đang được cấu hình.',
+            'Phần setting key phải tuân thủ các pattern bên dưới.',
+            'Không nhúng productCode, userId hoặc scope vào key.'
+        ],
+        examples: [
+            'RESOURCE_CODE.ui.list.toolbar.status.visible',
+            'RESOURCE_CODE.ui.form.field.email.required',
+            'RESOURCE_CODE.ui.form.action.SAVE.disabled'
+        ]
     },
-    {
-        value: 'custom',
-        label: 'Tùy chỉnh'
-    }
-];
-const TYPE_OPTIONS = Array.from(new Set(KEY_SAMPLES.map(row => row.type))).map(value => ({
-    value,
-    label: value
-}));
-const getSampleCategory = (pattern) => {
-    if (pattern.startsWith('ui.list.')) {
-        return 'ui-list';
-    }
-    if (pattern.startsWith('ui.form.')) {
-        return 'ui-form';
-    }
-    if (pattern.startsWith('behavior.')) {
-        return 'behavior';
-    }
-    if (pattern.startsWith('default.')) {
-        return 'default';
+    categories: [
+        { value: 'ui-list', label: 'UI danh sách' },
+        { value: 'ui-form', label: 'UI biểu mẫu' },
+        { value: 'behavior', label: 'Hành vi' },
+        { value: 'default', label: 'Mặc định' },
+        { value: 'option', label: 'Tùy chọn' },
+        { value: 'custom', label: 'Tùy chỉnh' }
+    ],
+    ruleSections: [
+        {
+            id: 'list-grid',
+            title: 'LIST / GRID',
+            description: 'Cấu hình cột Grid, toolbar và action trên màn danh sách.'
+        },
+        {
+            id: 'form-field',
+            title: 'FORM FIELD',
+            description: 'Cấu hình trạng thái hiển thị và tương tác của field.'
+        },
+        {
+            id: 'form-action',
+            title: 'FORM ACTION',
+            description: 'Cấu hình action trên form.'
+        },
+        {
+            id: 'form-structure',
+            title: 'FORM STRUCTURE',
+            description: 'Cấu hình tab, step và section trên form.'
+        },
+        {
+            id: 'other-settings',
+            title: 'BEHAVIOR / DEFAULT / OPTION / CUSTOM',
+            description: 'Các pattern ngoài UI chỉ dùng khi đúng ý nghĩa nghiệp vụ.'
+        }
+    ],
+    rules: SETTING_KEY_RULES,
+    guidance: [
+        {
+            title: 'CÁCH ĐỌC SETTING',
+            paragraphs: ['Chỉ dùng public API của package:'],
+            examples: [
+                'setting.get<T>(key)',
+                'setting.get<T>(key, fallback)',
+                "setting.get('RESOURCE_CODE.ui.form.field.Code.visible', true)",
+                "setting.get('RESOURCE_CODE.ui.form.action.SAVE.disabled', false)"
+            ],
+            items: [
+                'Không tạo useSetting(resource).',
+                'Không tạo useFeatureSetting hoặc useFieldSetting.',
+                'Không tạo getBoolean, getNumber hoặc getJson.',
+                'Không tạo SettingResourceScope.'
+            ]
+        },
+        {
+            title: 'FALLBACK',
+            paragraphs: ['Boolean UI setting phải có fallback rõ ràng khi phù hợp.'],
+            items: [
+                'visible: fallback thường là true.',
+                'disabled: fallback thường là false.',
+                'required: fallback thường là false.',
+                'readOnly: fallback thường là false.'
+            ]
+        },
+        {
+            title: 'NAMING',
+            items: [
+                'Không dùng label hiển thị hoặc nội dung đã dịch làm key.',
+                'ID, action và key phải ổn định khi thay đổi ngôn ngữ.',
+                'Không nhúng productCode, userId hoặc scope vào key.',
+                'Sai: ui.form.field.Tên người dùng.visible.',
+                'Đúng: ui.form.field.username.visible.',
+                'Sai: PRODUCT.RESOURCE_CODE.ui.form.field.Code.visible.',
+                'Đúng: RESOURCE_CODE.ui.form.field.Code.visible.'
+            ]
+        },
+        {
+            title: 'SCOPE / PRECEDENCE',
+            paragraphs: ['Effective Setting được giải quyết theo thứ tự SYSTEM → PRODUCT → USER → setting.get(...).'],
+            items: [
+                'Feature code không tự xử lý precedence.',
+                'Feature code không tự request riêng SYSTEM, PRODUCT và USER.',
+                'Scope, Product và User được runtime quản lý ngoài key.'
+            ]
+        },
+        {
+            title: 'KHI THÊM SETTING MỚI',
+            items: [
+                'Kiểm tra pattern hiện có và ưu tiên reuse convention.',
+                'Chỉ tạo namespace mới khi behavior không thuộc pattern hiện có.',
+                'Xác định type, fallback và description rõ nghĩa.',
+                'Thêm key vào Setting catalog khi cần quản trị.',
+                'Không tạo API wrapper riêng chỉ cho một key.'
+            ]
+        },
+        {
+            title: 'VÍ DỤ ÁP DỤNG',
+            examples: [
+                "const canShowCode = setting.get('RESOURCE_CODE.ui.form.field.Code.visible', true)",
+                "const codeRequired = setting.get('RESOURCE_CODE.ui.form.field.Code.required', false)",
+                "const saveDisabled = setting.get('RESOURCE_CODE.ui.form.action.SAVE.disabled', false)"
+            ]
+        },
+        {
+            title: 'NGUYÊN TẮC CHO AI/CODEX',
+            items: [
+                'Đọc source hiện tại trước khi thay đổi.',
+                'Xác định resource hiện tại.',
+                'Liệt kê component, action và field cần cấu hình.',
+                'Ánh xạ vào convention có sẵn; không tự phát minh key khi pattern đã bao phủ.',
+                'Dùng setting.get(..., fallback).',
+                'Không thêm hook hoặc public Setting API mới.',
+                'Không thay đổi Setting Runtime.',
+                'Không thêm selector Scope, Product hoặc User vào feature.',
+                'Chỉ sửa các file thực sự sử dụng setting.'
+            ]
+        }
+    ]
+};
+const getRuleSampleValue = (rule) => {
+    if (rule.sampleValue !== undefined) {
+        return rule.sampleValue;
     }
-    if (pattern.startsWith('option.')) {
-        return 'option';
+    if (rule.defaultValue !== undefined) {
+        return rule.defaultValue;
     }
-    return 'custom';
+    return null;
+};
+const setNestedLeaf = (target, path, leaf) => {
+    const segments = path.split('.').filter(Boolean);
+    let current = target;
+    segments.forEach((segment, index) => {
+        if (index === segments.length - 1) {
+            current[segment] = leaf;
+            return;
+        }
+        const next = current[segment];
+        if (!next || typeof next !== 'object' || Array.isArray(next)) {
+            current[segment] = {};
+        }
+        current = current[segment];
+    });
+};
+const buildSettingImportExample = (resourceCode = 'RESOURCE_CODE', convention = SETTING_KEY_CONVENTION) => {
+    const resource = resourceCode.trim() || 'RESOURCE_CODE';
+    const settings = {};
+    convention.rules.forEach(rule => {
+        const example = rule.examples[0];
+        if (!example) {
+            return;
+        }
+        setNestedLeaf(settings, example, {
+            type: rule.type,
+            value: getRuleSampleValue(rule),
+            description: rule.description
+        });
+    });
+    return {
+        [resource]: settings
+    };
 };
-const filterSamples = (rows, searchTerm, category, type) => {
+const serializeSettingImportExample = (resourceCode = 'RESOURCE_CODE', convention = SETTING_KEY_CONVENTION) => JSON.stringify(buildSettingImportExample(resourceCode, convention), null, 2);
+const filterSettingKeyRules = (rows, searchTerm, category, type) => {
     const keyword = searchTerm.trim().toLowerCase();
     return rows.filter(row => {
         const matchesKeyword = !keyword || [
             row.pattern,
             row.type,
+            row.description,
             ...row.examples
         ].some(value => value.toLowerCase().includes(keyword));
-        const matchesCategory = !category || getSampleCategory(row.pattern) === category;
+        const matchesCategory = !category || row.category === category;
         const matchesType = !type || row.type === type;
-        return matchesKeyword &&
-            matchesCategory &&
-            matchesType;
+        return matchesKeyword && matchesCategory && matchesType;
     });
 };
+
+const RESOURCE_CODE_PLACEHOLDER = 'RESOURCE_CODE';
+const SELECT_MENU_PORTAL_STYLES = {
+    menuPortal: (base) => ({
+        ...base,
+        zIndex: 1100
+    })
+};
+const TYPE_OPTIONS = Array.from(new Set(SETTING_KEY_CONVENTION.rules.map(row => row.type))).map(value => ({
+    value,
+    label: value
+}));
 const TechnicalText = ({ children }) => (jsx("span", { className: 'config-key-sample-text text-break', children: children }));
 const KeySampleTable = ({ rows, onCopy }) => (jsx("div", { className: 'table-responsive', children: jsxs("table", { className: 'table table-sm table-bordered align-middle mb-0', style: {
             tableLayout: 'fixed',
             minWidth: 930
-        }, children: [jsx("caption", { className: 'visually-hidden', children: "Danh s\u00E1ch m\u1EABu key c\u1EA5u h\u00ECnh" }), jsx("thead", { children: jsxs("tr", { children: [jsx("th", { scope: 'col', style: { width: 360 }, children: "M\u1EABu key \u0111\u1EA7y \u0111\u1EE7" }), jsx("th", { scope: 'col', style: { width: 110 }, children: "Type" }), jsx("th", { scope: 'col', children: "V\u00ED d\u1EE5" })] }) }), jsx("tbody", { children: rows.map(row => (jsxs("tr", { children: [jsx("td", { children: jsx(TechnicalText, { children: row.pattern }) }), jsx("td", { children: row.type }), jsx("td", { children: row.examples.map(example => (jsxs("div", { className: 'config-key-sample-copy-row', children: [jsx(TechnicalText, { children: example }), jsx("button", { type: 'button', className: 'config-key-sample-copy-button', onClick: () => onCopy(example), "aria-label": `Sao chép key ${example}`, "data-tooltip-id": 'tooltip', "data-tooltip-content": 'Sao ch\u00E9p key', children: jsx(Copy, { fontSize: 15 }) })] }, example))) })] }, `${row.pattern}-${row.type}`))) })] }) }));
+        }, children: [jsx("caption", { className: 'visually-hidden', children: "Danh s\u00E1ch m\u1EABu key c\u1EA5u h\u00ECnh" }), jsx("thead", { children: jsxs("tr", { children: [jsx("th", { scope: 'col', style: { width: 360 }, children: "M\u1EABu key \u0111\u1EA7y \u0111\u1EE7" }), jsx("th", { scope: 'col', style: { width: 110 }, children: "Type" }), jsx("th", { scope: 'col', children: "V\u00ED d\u1EE5" })] }) }), jsx("tbody", { children: rows.map(row => (jsxs("tr", { children: [jsx("td", { children: jsx(TechnicalText, { children: `${RESOURCE_CODE_PLACEHOLDER}.${row.pattern}` }) }), jsx("td", { children: row.type }), jsx("td", { children: row.examples.map(example => (jsxs("div", { className: 'config-key-sample-copy-row', children: [jsx(TechnicalText, { children: example }), jsx("button", { type: 'button', className: 'config-key-sample-copy-button', onClick: () => onCopy(`${RESOURCE_CODE_PLACEHOLDER}.${example}`), "aria-label": `Sao chép key ${RESOURCE_CODE_PLACEHOLDER}.${example}`, "data-tooltip-id": 'tooltip', "data-tooltip-content": 'Sao ch\u00E9p key', children: jsx(Copy, { fontSize: 15 }) })] }, example))) })] }, row.id))) })] }) }));
 const ConfigTreeRulesDrawer = ({ open, onClose }) => {
+    const [activeTab, setActiveTab] = useState('samples');
     const [searchTerm, setSearchTerm] = useState('');
     const [categoryFilter, setCategoryFilter] = useState(null);
     const [typeFilter, setTypeFilter] = useState(null);
     useEffect(() => {
         if (!open) {
+            setActiveTab('samples');
             setSearchTerm('');
             setCategoryFilter(null);
             setTypeFilter(null);
         }
     }, [open]);
-    const filteredSamples = useMemo(() => filterSamples(KEY_SAMPLES, searchTerm, categoryFilter?.value, typeFilter?.value), [
-        categoryFilter,
-        searchTerm,
-        typeFilter
-    ]);
-    const copyKey = async (value) => {
+    const filteredSamples = useMemo(() => filterSettingKeyRules(SETTING_KEY_CONVENTION.rules, searchTerm, categoryFilter?.value, typeFilter?.value), [categoryFilter, searchTerm, typeFilter]);
+    const importExampleText = useMemo(() => serializeSettingImportExample(RESOURCE_CODE_PLACEHOLDER), []);
+    const copyText = async (value, successMessage) => {
         try {
             await navigator.clipboard.writeText(value);
-            notificationSuccess('Đã sao chép key');
+            notificationSuccess(successMessage);
+        }
+        catch {
+            notificationError('Không thể sao chép nội dung');
+        }
+    };
+    const downloadImportExample = () => {
+        try {
+            const blob = new Blob([importExampleText], { type: 'application/json;charset=utf-8' });
+            const url = URL.createObjectURL(blob);
+            const link = document.createElement('a');
+            link.href = url;
+            link.download = 'becoxy-setting-resource-example.json';
+            document.body.appendChild(link);
+            link.click();
+            link.remove();
+            URL.revokeObjectURL(url);
+            notificationSuccess('Đã tải JSON mẫu để import');
         }
         catch {
-            notificationError('Không thể sao chép key');
+            notificationError('Không thể tải JSON mẫu');
         }
     };
-    return (jsx(Sidebar, { open: open, toggleSidebar: onClose, width: 1000, keyboard: true, hiddenFullScreenButton: true, zIndex: 1061, panelClassName: 'config-tree-rules-drawer', children: jsxs("div", { className: 'config-key-sample-layout h-100 bg-white d-flex flex-column', children: [jsx(ModalHeader, { typeModal: 'Setting', handleModal: onClose, title: 'M\u1EABu key c\u1EA5u h\u00ECnh' }), jsxs("div", { className: 'config-key-sample-toolbar border-bottom p-1 flex-shrink-0 d-flex align-items-center justify-content-start flex-wrap gap-1', children: [jsx(Input, { type: 'search', bsSize: 'sm', value: searchTerm, onChange: event => setSearchTerm(event.target.value), placeholder: 'T\u00ECm m\u1EABu key...', "aria-label": 'T\u00ECm m\u1EABu key', style: {
+    return (jsx(Sidebar, { open: open, toggleSidebar: onClose, width: 1000, keyboard: true, hiddenFullScreenButton: true, zIndex: 1061, panelClassName: 'config-tree-rules-drawer', children: jsxs("div", { className: 'config-key-sample-layout h-100 bg-white d-flex flex-column', children: [jsx(ModalHeader, { typeModal: 'Setting', handleModal: onClose, title: 'M\u1EABu key c\u1EA5u h\u00ECnh' }), activeTab === 'samples' ? (jsxs("div", { className: 'config-key-sample-toolbar border-bottom p-1 flex-shrink-0 d-flex align-items-center justify-content-start flex-wrap gap-1', children: [jsx(Input, { type: 'search', bsSize: 'sm', value: searchTerm, onChange: event => setSearchTerm(event.target.value), placeholder: 'T\u00ECm m\u1EABu key...', "aria-label": 'T\u00ECm m\u1EABu key', style: {
                                 width: 300,
                                 maxWidth: '100%'
-                            } }), jsx("div", { style: { width: 200 }, children: jsx(Select, { options: CATEGORY_OPTIONS, value: categoryFilter, onChange: (option) => setCategoryFilter(option), isClearable: true, menuPortalTarget: document.body, menuPosition: 'fixed', styles: SELECT_MENU_PORTAL_STYLES, placeholder: 'T\u1EA5t c\u1EA3 nh\u00F3m m\u1EABu', className: 'react-select w-100', classNamePrefix: 'select' }) }), jsx("div", { style: { width: 180 }, children: jsx(Select, { options: TYPE_OPTIONS, value: typeFilter, onChange: (option) => setTypeFilter(option), isClearable: true, menuPortalTarget: document.body, menuPosition: 'fixed', styles: SELECT_MENU_PORTAL_STYLES, placeholder: 'T\u1EA5t c\u1EA3 Type', className: 'react-select w-100', classNamePrefix: 'select' }) })] }), jsxs("div", { className: 'config-key-sample-content p-1 overflow-auto flex-grow-1', children: [filteredSamples.length > 0 ? (jsx(KeySampleTable, { rows: filteredSamples, onCopy: copyKey })) : null, filteredSamples.length === 0 ? (jsx("div", { className: 'config-key-sample-empty text-center py-2', children: "Kh\u00F4ng t\u00ECm th\u1EA5y m\u1EABu key." })) : null] })] }) }));
+                            } }), jsx("div", { style: { width: 200 }, children: jsx(Select, { options: SETTING_KEY_CONVENTION.categories, value: categoryFilter, onChange: (option) => setCategoryFilter(option), isClearable: true, menuPortalTarget: document.body, menuPosition: 'fixed', styles: SELECT_MENU_PORTAL_STYLES, placeholder: 'T\u1EA5t c\u1EA3 nh\u00F3m m\u1EABu', className: 'react-select w-100', classNamePrefix: 'select' }) }), jsx("div", { style: { width: 180 }, children: jsx(Select, { options: TYPE_OPTIONS, value: typeFilter, onChange: (option) => setTypeFilter(option), isClearable: true, menuPortalTarget: document.body, menuPosition: 'fixed', styles: SELECT_MENU_PORTAL_STYLES, placeholder: 'T\u1EA5t c\u1EA3 Type', className: 'react-select w-100', classNamePrefix: 'select' }) })] })) : null, jsxs("div", { className: 'config-key-sample-tabs border-bottom p-1 flex-shrink-0 d-flex align-items-center justify-content-between flex-wrap gap-1', children: [jsxs("div", { className: 'd-flex align-items-center gap-50', role: 'tablist', "aria-label": 'N\u1ED9i dung quy t\u1EAFc Setting', children: [jsx(Button, { type: 'button', size: 'sm', color: 'primary', outline: activeTab !== 'samples', role: 'tab', "aria-selected": activeTab === 'samples', onClick: () => setActiveTab('samples'), children: "M\u1EABu d\u1EA1ng key" }), jsx(Button, { type: 'button', size: 'sm', color: 'primary', outline: activeTab !== 'import-example', role: 'tab', "aria-selected": activeTab === 'import-example', onClick: () => setActiveTab('import-example'), children: "JSON m\u1EABu ho\u00E0n ch\u1EC9nh" })] }), jsx("div", { className: 'd-flex align-items-center gap-50', children: activeTab === 'import-example' ? (jsxs(Fragment, { children: [jsxs(Button, { type: 'button', size: 'sm', color: 'secondary', outline: true, onClick: () => {
+                                            void copyText(importExampleText, 'Đã sao chép JSON mẫu');
+                                        }, children: [jsx(Copy, { fontSize: 15, className: 'me-50' }), "Copy JSON m\u1EABu"] }), jsxs(Button, { type: 'button', size: 'sm', color: 'secondary', outline: true, onClick: downloadImportExample, children: [jsx(Download, { fontSize: 15, className: 'me-50' }), "T\u1EA3i JSON m\u1EABu"] })] })) : null })] }), jsx("div", { className: 'config-key-sample-content p-1 overflow-auto flex-grow-1', role: 'tabpanel', children: activeTab === 'samples' ? (jsxs(Fragment, { children: [filteredSamples.length > 0 ? (jsx(KeySampleTable, { rows: filteredSamples, onCopy: value => {
+                                    void copyText(value, 'Đã sao chép key');
+                                } })) : null, filteredSamples.length === 0 ? (jsx("div", { className: 'config-key-sample-empty text-center py-2', children: "Kh\u00F4ng t\u00ECm th\u1EA5y m\u1EABu key." })) : null] })) : (jsxs(Fragment, { children: [jsxs("div", { className: 'alert alert-warning py-50 px-1 mb-1', children: ["Thay ", jsx("strong", { children: "RESOURCE_CODE" }), " b\u1EB1ng m\u00E3 Resource th\u1EF1c t\u1EBF tr\u01B0\u1EDBc khi import."] }), jsx("pre", { className: 'config-key-convention-text mb-0', children: importExampleText })] })) })] }) }));
 };
 
 const ConfigTreeGridFooter = ({ rows }) => {