evnict-kit 0.2.1

package/templates/content/skills/evnict-kit-create-component/SKILL.md

@@ -0,0 +1,263 @@
+---
+name: evnict-kit-create-component
+description: Tạo UI component chuẩn — check reuse → generate → style → test → a11y. Angular + PrimeNG.
+compatibility: Angular 16+, PrimeNG
+---
+
+# evnict-kit-create-component — Tạo UI Component
+
+## Khi nào dùng
+- Tạo component mới cho feature
+- Tạo shared/reusable component
+- Tạo form component complex
+
+## Input Parameters
+- `name` (bắt buộc): Tên component (VD: customer-form, order-table)
+- `type` (optional): page | shared | feature (default: feature)
+- `module` (optional): Module chứa component
+
+---
+
+## Workflow Steps
+
+### Bước 1: Check Reuse — TRƯỚC KHI tạo mới
+1. Tìm trong `shared/components/` → có component tương tự?
+2. Tìm trong PrimeNG → đã có component sẵn?
+3. Tìm trong module hiện tại → có thể extend?
+
+```bash
+# Scan existing components
+find src/app -name "*.component.ts" | grep -i "{keyword}"
+# Check PrimeNG docs nếu cần
+```
+
+Nếu tìm thấy → REUSE hoặc EXTEND, KHÔNG tạo mới.
+
+### Bước 2: Generate Component
+
+#### Xác định vị trí
+| Type | Path |
+|------|------|
+| shared | `src/app/shared/components/{name}/` |
+| feature | `src/app/features/{module}/components/{name}/` |
+| page | `src/app/features/{module}/pages/{name}/` |
+
+#### Tạo files
+```
+{name}/
+├── {name}.component.ts
+├── {name}.component.html
+├── {name}.component.scss
+└── {name}.component.spec.ts
+```
+
+### Bước 3: Component Code
+
+```typescript
+// ✅ Component tiêu chuẩn
+@Component({
+  selector: 'app-{name}',
+  templateUrl: './{name}.component.html',
+  styleUrls: ['./{name}.component.scss']
+})
+export class {Name}Component implements OnInit, OnDestroy {
+  // Input/Output
+  @Input() data: {Type}[];
+  @Output() onAction = new EventEmitter<{Type}>();
+
+  // State
+  loading = false;
+  errorMessage = '';
+
+  // Lifecycle
+  private destroy$ = new Subject<void>();
+
+  constructor(
+    private service: {Module}Service,
+    private messageService: MessageService
+  ) {}
+
+  ngOnInit(): void {
+    this.loadData();
+  }
+
+  ngOnDestroy(): void {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+
+  // Methods
+  loadData(): void {
+    this.loading = true;
+    this.service.getData()
+      .pipe(
+        takeUntil(this.destroy$),
+        finalize(() => this.loading = false)
+      )
+      .subscribe({
+        next: (res) => {
+          if (res.status === 0) {
+            this.data = res.data;
+          } else {
+            this.errorMessage = res.message;
+          }
+        },
+        error: (err) => {
+          this.messageService.add({
+            severity: 'error',
+            summary: 'Lỗi',
+            detail: 'Không thể tải dữ liệu'
+          });
+        }
+      });
+  }
+}
+```
+
+### Bước 4: Template (HTML)
+
+```html
+<!-- ✅ Template chuẩn với PrimeNG -->
+<div class="component-container">
+  <!-- Loading state -->
+  <div *ngIf="loading" class="loading-container">
+    <p-progressSpinner></p-progressSpinner>
+  </div>
+
+  <!-- Error state -->
+  <p-message *ngIf="errorMessage" severity="error" [text]="errorMessage"></p-message>
+
+  <!-- Content -->
+  <ng-container *ngIf="!loading && !errorMessage">
+    <!-- Component content here -->
+  </ng-container>
+</div>
+```
+
+### Bước 5: Styles (SCSS)
+
+```scss
+// ✅ Styles chuẩn
+:host {
+  display: block;
+}
+
+.component-container {
+  padding: 1rem;
+}
+
+.loading-container {
+  display: flex;
+  justify-content: center;
+  padding: 2rem;
+}
+
+// Responsive
+@media (max-width: 768px) {
+  .component-container {
+    padding: 0.5rem;
+  }
+}
+```
+
+### Bước 6: Form Component Pattern (nếu là form)
+
+```typescript
+// ✅ Reactive Form component
+export class CustomerFormComponent implements OnInit {
+  form: FormGroup;
+  isEdit = false;
+
+  constructor(
+    private fb: FormBuilder,
+    private service: CustomerService,
+    private messageService: MessageService
+  ) {}
+
+  ngOnInit(): void {
+    this.initForm();
+  }
+
+  private initForm(): void {
+    this.form = this.fb.group({
+      name: ['', [Validators.required, Validators.maxLength(200)]],
+      phone: ['', [Validators.pattern(/^0[0-9]{9}$/)]],
+      donViId: [null, Validators.required]
+    });
+  }
+
+  onSubmit(): void {
+    if (this.form.invalid) {
+      this.form.markAllAsTouched();
+      return;
+    }
+    const dto = this.form.value;
+    const action$ = this.isEdit
+      ? this.service.update(dto.id, dto)
+      : this.service.create(dto);
+
+    action$.subscribe({
+      next: (res) => {
+        if (res.status === 0) {
+          this.messageService.add({
+            severity: 'success',
+            summary: 'Thành công',
+            detail: this.isEdit ? 'Cập nhật thành công' : 'Tạo mới thành công'
+          });
+        }
+      }
+    });
+  }
+}
+```
+
+### Bước 7: Test
+
+```typescript
+describe('{Name}Component', () => {
+  let component: {Name}Component;
+  let fixture: ComponentFixture<{Name}Component>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [{Name}Component],
+      imports: [/* required modules */],
+      providers: [/* mock services */]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent({Name}Component);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should load data on init', () => { /* ... */ });
+  it('should show loading spinner', () => { /* ... */ });
+  it('should handle error', () => { /* ... */ });
+});
+```
+
+### Bước 8: A11y Check
+- [ ] Tất cả `<img>` có `alt`
+- [ ] Form fields có `<label>` hoặc `aria-label`
+- [ ] Interactive elements có `tabindex`
+- [ ] Color contrast ≥ 4.5:1
+
+### Bước 9: Register Component
+Thêm vào module declarations hoặc shared module exports.
+
+---
+
+## Tiêu chí hoàn thành
+- [ ] Reuse check done — không tạo trùng
+- [ ] Component files tạo đầy đủ (ts, html, scss, spec.ts)
+- [ ] Reactive Forms nếu là form component
+- [ ] Loading/error states handled
+- [ ] RxJS unsubscribe (takeUntil pattern)
+- [ ] Responsive design
+- [ ] A11y check pass
+- [ ] Tests viết và PASS
+- [ ] Registered trong module

package/templates/content/skills/evnict-kit-create-page/SKILL.md

@@ -0,0 +1,247 @@
+---
+name: evnict-kit-create-page
+description: Tạo page mới — module → routing → component → service → loading/error states. Angular lazy-loaded.
+compatibility: Angular 16+, PrimeNG
+---
+
+# evnict-kit-create-page — Tạo Page Mới
+
+## Khi nào dùng
+- Tạo page mới trong feature module
+- Tạo feature module mới với routing
+
+## Input Parameters
+- `name` (bắt buộc): Tên page (VD: customer-list, order-detail)
+- `module` (bắt buộc): Module chứa page
+- `route` (optional): Route path (default: based on name)
+
+---
+
+## Workflow Steps
+
+### Bước 1: Kiểm tra module
+
+#### Module đã tồn tại?
+```bash
+find src/app/features -name "{module}.module.ts"
+```
+
+#### Nếu chưa → Tạo module mới
+```
+src/app/features/{module}/
+├── {module}.module.ts
+├── {module}-routing.module.ts
+├── pages/
+│   └── {page-name}/
+├── components/
+├── services/
+└── models/
+```
+
+```typescript
+// {module}.module.ts
+@NgModule({
+  declarations: [],
+  imports: [
+    CommonModule,
+    {Module}RoutingModule,
+    SharedModule,
+    // PrimeNG modules
+    TableModule,
+    ButtonModule,
+    InputTextModule,
+    DialogModule
+  ]
+})
+export class {Module}Module {}
+```
+
+```typescript
+// {module}-routing.module.ts
+const routes: Routes = [
+  { path: '', component: {PageName}Component }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class {Module}RoutingModule {}
+```
+
+### Bước 2: Thêm lazy loading vào app-routing
+```typescript
+// app-routing.module.ts
+{
+  path: '{module}',
+  loadChildren: () => import('./features/{module}/{module}.module')
+    .then(m => m.{Module}Module),
+  canActivate: [AuthGuard]
+}
+```
+
+### Bước 3: Tạo page component
+Dùng skill `evnict-kit-create-component` với type=page.
+
+#### List Page Pattern
+```typescript
+@Component({
+  selector: 'app-{name}-list',
+  templateUrl: './{name}-list.component.html'
+})
+export class {Name}ListComponent implements OnInit {
+  data: {Type}[] = [];
+  totalRecords = 0;
+  loading = false;
+  keyword = '';
+
+  // Dialog
+  showDialog = false;
+  selectedItem: {Type} | null = null;
+
+  private destroy$ = new Subject<void>();
+
+  constructor(
+    private service: {Module}Service,
+    private messageService: MessageService,
+    private confirmService: ConfirmationService
+  ) {}
+
+  ngOnInit(): void { this.search(); }
+
+  search(event?: any): void {
+    this.loading = true;
+    const page = event ? event.first / event.rows : 0;
+    const size = event ? event.rows : 20;
+
+    this.service.search(this.keyword, page, size)
+      .pipe(takeUntil(this.destroy$), finalize(() => this.loading = false))
+      .subscribe(res => {
+        if (res.status === 0) {
+          this.data = res.data.content;
+          this.totalRecords = res.data.totalElements;
+        }
+      });
+  }
+
+  onCreate(): void {
+    this.selectedItem = null;
+    this.showDialog = true;
+  }
+
+  onEdit(item: {Type}): void {
+    this.selectedItem = { ...item };
+    this.showDialog = true;
+  }
+
+  onDelete(item: {Type}): void {
+    this.confirmService.confirm({
+      message: 'Bạn có chắc chắn muốn xóa?',
+      accept: () => {
+        this.service.delete(item.id)
+          .pipe(takeUntil(this.destroy$))
+          .subscribe(res => {
+            if (res.status === 0) {
+              this.messageService.add({ severity: 'success', detail: 'Xóa thành công' });
+              this.search();
+            }
+          });
+      }
+    });
+  }
+
+  onSaved(): void {
+    this.showDialog = false;
+    this.search();
+  }
+
+  ngOnDestroy(): void {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+}
+```
+
+#### List Page Template
+```html
+<div class="page-container">
+  <div class="page-header">
+    <h2>{{ 'page.{module}.title' | translate }}</h2>
+    <button pButton label="{{ 'button.create' | translate }}" icon="pi pi-plus"
+            (click)="onCreate()"></button>
+  </div>
+
+  <div class="search-bar">
+    <span class="p-input-icon-left">
+      <i class="pi pi-search"></i>
+      <input pInputText [(ngModel)]="keyword" (keyup.enter)="search()"
+             [placeholder]="'placeholder.search' | translate">
+    </span>
+  </div>
+
+  <p-table [value]="data" [lazy]="true" [paginator]="true" [rows]="20"
+           [totalRecords]="totalRecords" [loading]="loading"
+           (onLazyLoad)="search($event)" [responsive]="true" responsiveLayout="scroll">
+    <ng-template pTemplate="header">
+      <tr>
+        <th>{{ 'column.name' | translate }}</th>
+        <th>{{ 'column.status' | translate }}</th>
+        <th style="width: 120px">{{ 'column.action' | translate }}</th>
+      </tr>
+    </ng-template>
+    <ng-template pTemplate="body" let-item>
+      <tr>
+        <td>{{ item.name }}</td>
+        <td>{{ item.status }}</td>
+        <td>
+          <button pButton icon="pi pi-pencil" class="p-button-text" (click)="onEdit(item)"></button>
+          <button pButton icon="pi pi-trash" class="p-button-text p-button-danger" (click)="onDelete(item)"></button>
+        </td>
+      </tr>
+    </ng-template>
+    <ng-template pTemplate="emptymessage">
+      <tr><td colspan="3" class="text-center">{{ 'message.noData' | translate }}</td></tr>
+    </ng-template>
+  </p-table>
+
+  <!-- Form Dialog -->
+  <app-{name}-form *ngIf="showDialog" [visible]="showDialog" [data]="selectedItem"
+                   (onSave)="onSaved()" (onCancel)="showDialog = false">
+  </app-{name}-form>
+</div>
+
+<p-confirmDialog></p-confirmDialog>
+```
+
+### Bước 4: Tạo service (nếu chưa có)
+Dùng pattern từ `04-evnict-kit-frontend-conventions.md`.
+
+### Bước 5: Test page
+```typescript
+describe('{Name}ListComponent', () => {
+  // Test: load data on init
+  // Test: search with keyword
+  // Test: pagination
+  // Test: create dialog opens
+  // Test: delete with confirmation
+});
+```
+
+### Bước 6: Verify
+```bash
+ng test --watch=false
+ng lint
+ng build
+```
+
+---
+
+## Tiêu chí hoàn thành
+- [ ] Module tạo/update đúng
+- [ ] Routing configured (lazy-loaded)
+- [ ] Page component với loading/error states
+- [ ] Service created/reused
+- [ ] i18n keys added
+- [ ] Responsive design
+- [ ] Tests viết và PASS
+- [ ] Build OK

package/templates/content/skills/evnict-kit-database-migration/SKILL.md

@@ -0,0 +1,164 @@
+---
+name: evnict-kit-database-migration
+description: Tạo migration script chuẩn — naming, UP/DOWN scripts, test, hỗ trợ Oracle + SQL Server.
+compatibility: Oracle 19c, SQL Server 2019+, Flyway/Liquibase
+---
+
+# evnict-kit-database-migration — Database Migration
+
+## Khi nào dùng
+- Thêm/sửa/xóa table, column, index
+- Thay đổi schema database qua migration script
+- Tạo rollback script cho thay đổi DB
+
+## Input Parameters
+- `action` (bắt buộc): create-table | alter-table | add-index | add-column | drop-column | seed-data
+- `description` (bắt buộc): Mô tả thay đổi
+- `database` (optional): oracle | sqlserver (default: từ config)
+
+---
+
+## Workflow Steps
+
+### Bước 1: Xác định thông tin
+Đọc `.evnict/config.yaml` → database type
+Đọc `.agent/rules/05-evnict-kit-project-conventions.md` → RP05 DB conventions
+
+### Bước 2: Tạo migration files
+
+#### Naming convention
+```
+V{YYYYMMDD}_{seq}__{description}.sql          ← UP
+V{YYYYMMDD}_{seq}__{description}_ROLLBACK.sql ← DOWN
+```
+Ví dụ:
+```
+V20260401_001__create_table_customer.sql
+V20260401_001__create_table_customer_ROLLBACK.sql
+```
+
+### Bước 3: Viết UP script
+
+#### Oracle — CREATE TABLE
+```sql
+-- V20260401_001__create_table_customer.sql
+CREATE TABLE CUSTOMER (
+    ID              NUMBER(19) NOT NULL,
+    NAME            NVARCHAR2(200) NOT NULL,
+    PHONE           VARCHAR2(20),
+    EMAIL           VARCHAR2(100),
+    DON_VI_ID       NUMBER(19) NOT NULL,
+    STATUS          VARCHAR2(20) DEFAULT 'ACTIVE' NOT NULL,
+    IS_DELETED      NUMBER(1) DEFAULT 0 NOT NULL,
+    CREATED_BY      VARCHAR2(50),
+    CREATED_DATE    TIMESTAMP DEFAULT SYSTIMESTAMP,
+    UPDATED_BY      VARCHAR2(50),
+    UPDATED_DATE    TIMESTAMP,
+    CONSTRAINT PK_CUSTOMER PRIMARY KEY (ID),
+    CONSTRAINT FK_CUSTOMER_DON_VI FOREIGN KEY (DON_VI_ID) REFERENCES DON_VI(ID)
+);
+
+CREATE SEQUENCE CUSTOMER_SEQ START WITH 1 INCREMENT BY 1;
+
+CREATE INDEX IX_CUSTOMER_DON_VI ON CUSTOMER(DON_VI_ID);
+CREATE INDEX IX_CUSTOMER_STATUS ON CUSTOMER(STATUS);
+
+COMMENT ON TABLE CUSTOMER IS 'Bảng khách hàng';
+COMMENT ON COLUMN CUSTOMER.NAME IS 'Tên khách hàng';
+COMMENT ON COLUMN CUSTOMER.STATUS IS 'Trạng thái: ACTIVE, INACTIVE, SUSPENDED';
+```
+
+#### Oracle — ALTER TABLE
+```sql
+-- V20260402_001__add_customer_address.sql
+ALTER TABLE CUSTOMER ADD (
+    ADDRESS NVARCHAR2(500),
+    DISTRICT_CODE VARCHAR2(10)
+);
+
+CREATE INDEX IX_CUSTOMER_DISTRICT ON CUSTOMER(DISTRICT_CODE);
+
+COMMENT ON COLUMN CUSTOMER.ADDRESS IS 'Địa chỉ khách hàng';
+```
+
+#### SQL Server — CREATE TABLE
+```sql
+-- V20260401_001__create_table_customer.sql
+CREATE TABLE Customer (
+    Id              BIGINT IDENTITY(1,1) NOT NULL,
+    Name            NVARCHAR(200) NOT NULL,
+    Phone           NVARCHAR(20) NULL,
+    Email           NVARCHAR(100) NULL,
+    DonViId         BIGINT NOT NULL,
+    Status          NVARCHAR(20) NOT NULL DEFAULT 'ACTIVE',
+    IsDeleted       BIT NOT NULL DEFAULT 0,
+    CreatedBy       NVARCHAR(50) NULL,
+    CreatedDate     DATETIME2 DEFAULT GETDATE(),
+    UpdatedBy       NVARCHAR(50) NULL,
+    UpdatedDate     DATETIME2 NULL,
+    CONSTRAINT PK_Customer PRIMARY KEY (Id),
+    CONSTRAINT FK_Customer_DonVi FOREIGN KEY (DonViId) REFERENCES DonVi(Id)
+);
+
+CREATE INDEX IX_Customer_DonVi ON Customer(DonViId);
+CREATE INDEX IX_Customer_Status ON Customer(Status);
+```
+
+### Bước 4: Viết ROLLBACK script
+
+#### Oracle
+```sql
+-- V20260401_001__create_table_customer_ROLLBACK.sql
+DROP INDEX IX_CUSTOMER_STATUS;
+DROP INDEX IX_CUSTOMER_DON_VI;
+DROP SEQUENCE CUSTOMER_SEQ;
+DROP TABLE CUSTOMER;
+```
+
+#### SQL Server
+```sql
+-- V20260401_001__create_table_customer_ROLLBACK.sql
+DROP INDEX IX_Customer_Status ON Customer;
+DROP INDEX IX_Customer_DonVi ON Customer;
+DROP TABLE Customer;
+```
+
+### Bước 5: Test migration
+```bash
+# Chạy UP
+flyway migrate
+# hoặc chạy script thủ công trong DB client
+
+# Verify: table/column tồn tại
+# Oracle
+SELECT * FROM USER_TABLES WHERE TABLE_NAME = 'CUSTOMER';
+SELECT * FROM USER_TAB_COLUMNS WHERE TABLE_NAME = 'CUSTOMER';
+
+# Chạy ROLLBACK
+# Verify: table/column đã xóa
+```
+
+### Bước 6: KHÔNG làm
+- ❌ KHÔNG sửa DB trực tiếp (phải qua migration script)
+- ❌ KHÔNG DROP TABLE trong production
+- ❌ KHÔNG ALTER column type nếu có data (phải migrate data trước)
+- ❌ KHÔNG hardcode data trong migration (trừ seed data rõ ràng)
+
+---
+
+## Checklist per migration
+- [ ] UP script chạy thành công
+- [ ] ROLLBACK script chạy thành công
+- [ ] Naming đúng convention: `V{date}_{seq}__{desc}.sql`
+- [ ] Có COMMENT cho table và columns quan trọng
+- [ ] Index cho foreign keys và columns hay query
+- [ ] Audit columns (CREATED_BY, CREATED_DATE, UPDATED_BY, UPDATED_DATE)
+- [ ] Soft delete column nếu cần (IS_DELETED)
+
+---
+
+## Tiêu chí hoàn thành
+- [ ] UP script tạo và test pass
+- [ ] ROLLBACK script tạo và test pass
+- [ ] Naming convention đúng
+- [ ] Comments và indexes đầy đủ