@geoit/ui 0.0.4 → 0.0.6

package/ai/components/geo-alert.md

@@ -37,7 +37,7 @@ Hiển thị banner trạng thái cố định trong layout (form/page). Dùng t
 
 ## Binding
 
-Standalone presentational / container component — drive via Inputs and Outputs (no `ngModel` unless documented).
+Standalone component — drive via Inputs (`input()` / `model()`) and Outputs (`output()`). Banana bindings work for any `model()` fields (e.g. `[(open)]`, `[(pageIndex)]`).
 
 ## Inputs
 
@@ -49,14 +49,14 @@ Every supported Input (do not invent others):
 | `title` | `string` | `''` | — |
 | `message` | `string` | `''` | — |
 | `closable` | `boolean` | `true` | — |
-| `visible` | `boolean` | `true` | — |
+| `visible` | `boolean` | `true` | Two-way `model()` (supports banana binding). |
 | `showIcon` | `boolean` | `true` | — |
 
 ## Outputs
 
 | Output | Payload | Description |
 |--------|---------|-------------|
-| `closed` | `EventEmitter<void>` | — |
+| `closed` | `OutputEmitterRef<void>` | — |
 
 ## Related types
 

package/ai/components/geo-back-button.md

@@ -37,7 +37,7 @@ Nút quay lại trên trang chi tiết/sửa. Mặc định historyBack=true; ho
 
 ## Binding
 
-Standalone presentational / container component — drive via Inputs and Outputs (no `ngModel` unless documented).
+Standalone component — drive via Inputs (`input()` / `model()`) and Outputs (`output()`). Banana bindings work for any `model()` fields (e.g. `[(open)]`, `[(pageIndex)]`).
 
 ## Inputs
 
@@ -54,7 +54,7 @@ Every supported Input (do not invent others):
 
 | Output | Payload | Description |
 |--------|---------|-------------|
-| `clicked` | `EventEmitter<MouseEvent>` | — |
+| `clicked` | `OutputEmitterRef<MouseEvent>` | — |
 
 
 ## Examples

package/ai/components/geo-breadcrumb.md

@@ -37,7 +37,7 @@ Primary navigation / sidebar menus.
 
 ## Binding
 
-Standalone presentational / container component — drive via Inputs and Outputs (no `ngModel` unless documented).
+Standalone component — drive via Inputs (`input()` / `model()`) and Outputs (`output()`). Banana bindings work for any `model()` fields (e.g. `[(open)]`, `[(pageIndex)]`).
 
 ## Inputs
 

package/ai/components/geo-button.md

@@ -37,7 +37,7 @@ CTA chính của GEO UI. appearance primary|secondary|tertiary; color brand|dang
 
 ## Binding
 
-Standalone presentational / container component — drive via Inputs and Outputs (no `ngModel` unless documented).
+Standalone component — drive via Inputs (`input()` / `model()`) and Outputs (`output()`). Banana bindings work for any `model()` fields (e.g. `[(open)]`, `[(pageIndex)]`).
 
 ## Inputs
 
@@ -47,7 +47,7 @@ Every supported Input (do not invent others):
 |-------|------|---------|-------------|
 | `appearance` | `'primary' \| 'secondary' \| 'tertiary'` | `'primary'` | — |
 | `color` | `'brand' \| 'danger' \| 'warning' \| 'success'` | `'brand'` | — |
-| `icon` | `string` | — | — |
+| `icon` | `string \| undefined` | `undefined` | — |
 | `iconTheme` | `'outline' \| 'fill' \| 'twotone'` | `'outline'` | — |
 | `iconPlacement` | `'start' \| 'end'` | `'start'` | Vị trí icon: `start` (trái) hoặc `end` (phải). |
 | `iconOnly` | `boolean` | `false` | — |
@@ -62,7 +62,7 @@ Every supported Input (do not invent others):
 
 | Output | Payload | Description |
 |--------|---------|-------------|
-| `clicked` | `EventEmitter<MouseEvent>` | — |
+| `clicked` | `OutputEmitterRef<MouseEvent>` | — |
 
 ## Related types
 

package/ai/components/geo-chart.md

@@ -0,0 +1,115 @@
+# geo-chart
+
+> Complete usage reference for **GeoChartComponent** (`@geoit/ui`)
+>
+> Read this file before using the component. Use **only** the Inputs/Outputs listed here.
+
+## Summary
+Bar / donut chart for dashboard statistics (ApexCharts).
+
+## Import
+
+```ts
+import { GeoChartComponent } from '@geoit/ui';
+```
+
+Add to the consuming standalone component:
+
+```ts
+imports: [GeoChartComponent]
+```
+
+## Selector
+`geo-chart`
+
+## Category
+`data`
+
+## When to use
+KPI breakdowns on dashboard pages.
+
+## Do not use when
+Maps / spatial — use geo-map; single KPI — use geo-stat-card.
+
+## How to use
+
+Biểu đồ bar/donut cho dashboard. [data] = { label, value, color? }[]; (segmentClick) khi click lát.
+
+## Binding
+
+Standalone component — drive via Inputs (`input()` / `model()`) and Outputs (`output()`). Banana bindings work for any `model()` fields (e.g. `[(open)]`, `[(pageIndex)]`).
+
+## Inputs
+
+Every supported Input (do not invent others):
+
+| Input | Type | Default | Description |
+|-------|------|---------|-------------|
+| `type` | `'bar' \| 'donut'` | `'bar'` | — |
+| `title` | `string` | `''` | — |
+| `data` | `GeoChartDatum[]` | `[]` | — |
+| `height` | `number` | `260` | — |
+| `showLegend` | `boolean` | `true` | — |
+| `showSort` | `boolean` | `false` | — |
+| `sort` | `'none' \| 'asc' \| 'desc'` | `'desc'` | Two-way `model()` (supports banana binding). |
+| `emptyText` | `string` | `'Chưa có dữ liệu thống kê.'` | — |
+| `unit` | `string` | `''` | — |
+
+## Outputs
+
+| Output | Payload | Description |
+|--------|---------|-------------|
+| `segmentClick` | `OutputEmitterRef<GeoChartSegmentClick>` | — |
+| `sortChange` | `OutputEmitterRef<'none' \| 'asc' \| 'desc'>` | — |
+
+## Related types
+
+From `figma/geo-chart/geo-chart.types.ts`:
+
+```ts
+export interface GeoChartDatum {
+  id?: string;
+  label: string;
+  value: number;
+  /** Optional CSS color; prefer design tokens when possible. */
+  color?: string;
+}
+
+export interface GeoChartSegmentClick {
+  datum: GeoChartDatum;
+  index: number;
+}
+
+export type GeoChartType = 'bar' | 'donut';
+
+export type GeoChartSort = 'none' | 'asc' | 'desc';
+```
+
+## Examples
+
+### Bar
+
+```html
+<geo-chart type="bar" title="Theo xã" [data]="wardData" [height]="280"></geo-chart>
+```
+
+## Tips
+
+- Màu ưu tiên CSS var(--geo-color-*).
+- KPI đơn → geo-stat-card; ghép sẵn → geo-dashboard.
+## Related components
+
+- [`geo-stat-card`](./geo-stat-card.md)
+- [`geo-dashboard`](./geo-dashboard.md)
+- [`geo-empty-state`](./geo-empty-state.md)
+## Package path
+`node_modules/@geoit/ui/ai/components/geo-chart.md`
+
+## Source
+`projects/geo-ui/src/lib/figma/geo-chart/geo-chart.component.ts`
+
+## Rules for AI / consumers
+- Prefer this component over raw ng-zorro / HTML for the same UI role.
+- Use design tokens (`var(--geo-*)`) — never hardcode brand colors or radius.
+- Match props exactly to the Inputs table; do not invent unsupported inputs.
+- Copy examples and adapt labels/bindings only.

package/ai/components/geo-checkbox.md

@@ -37,10 +37,10 @@ Checkbox có label. Two-way bằng [(checked)] / (checkedChange) — không ph
 
 ## Binding
 
-**Not CVA.** Use two-way `checked`:
+**`model()` two-way** on `checked` (Angular 18):
 
 ```html
-<geo-checkbox [(checked)]="agreed" (checkedChange)="onChange($event)"></geo-checkbox>
+<geo-checkbox [(checked)]="agreed"></geo-checkbox>
 ```
 
 ## Inputs
@@ -50,15 +50,13 @@ Every supported Input (do not invent others):
 | Input | Type | Default | Description |
 |-------|------|---------|-------------|
 | `label` | `string` | `''` | — |
-| `checked` | `boolean` | `false` | — |
+| `checked` | `boolean` | `false` | Two-way: `[(checked)]`. — Two-way `model()` (supports banana binding). |
 | `disabled` | `boolean` | `false` | — |
 | `indeterminate` | `boolean` | `false` | — |
 
 ## Outputs
 
-| Output | Payload | Description |
-|--------|---------|-------------|
-| `checkedChange` | `EventEmitter<boolean>` | — |
+_None_
 
 
 ## Examples

package/ai/components/geo-column-picker.md

@@ -37,7 +37,7 @@ Popup ẩn/hiện cột bảng. [items] GeoColumnPickerItem[]; (apply) nhận pa
 
 ## Binding
 
-Standalone presentational / container component — drive via Inputs and Outputs (no `ngModel` unless documented).
+Standalone component — drive via Inputs (`input()` / `model()`) and Outputs (`output()`). Banana bindings work for any `model()` fields (e.g. `[(open)]`, `[(pageIndex)]`).
 
 ## Inputs
 
@@ -48,13 +48,13 @@ Every supported Input (do not invent others):
 | `triggerLabel` | `string` | `'Ẩn hiện cột'` | — |
 | `hint` | `string` | `'Chọn cột hiển thị trên bảng.'` | — |
 | `items` | `GeoColumnPickerItem[]` | `[]` | — |
-| `storageKey` | `string` | — | Lưu trạng thái ẩn/hiện cột theo session khi người dùng áp dụng |
+| `storageKey` | `string \| undefined` | `undefined` | Lưu trạng thái ẩn/hiện cột theo session khi người dùng áp dụng |
 
 ## Outputs
 
 | Output | Payload | Description |
 |--------|---------|-------------|
-| `apply` | `EventEmitter<GeoColumnPickerApplyPayload>` | — |
+| `apply` | `OutputEmitterRef<GeoColumnPickerApplyPayload>` | — |
 
 ## Related types
 

package/ai/components/geo-confirm-modal.md

@@ -37,7 +37,7 @@ Dialog xác nhận hành động phá hủy (xóa). Điều khiển bằng [visi
 
 ## Binding
 
-Standalone presentational / container component — drive via Inputs and Outputs (no `ngModel` unless documented).
+Standalone component — drive via Inputs (`input()` / `model()`) and Outputs (`output()`). Banana bindings work for any `model()` fields (e.g. `[(open)]`, `[(pageIndex)]`).
 
 ## Inputs
 
@@ -45,7 +45,7 @@ Every supported Input (do not invent others):
 
 | Input | Type | Default | Description |
 |-------|------|---------|-------------|
-| `visible` | `boolean` | `false` | — |
+| `visible` | `boolean` | `false` | Two-way `model()` (supports banana binding). |
 | `title` | `string` | `'Xác nhận xoá'` | — |
 | `message` | `string` | `''` | — |
 | `highlight` | `string` | `''` | — |
@@ -61,9 +61,8 @@ Every supported Input (do not invent others):
 
 | Output | Payload | Description |
 |--------|---------|-------------|
-| `visibleChange` | `EventEmitter<boolean>` | — |
-| `confirm` | `EventEmitter<void>` | — |
-| `cancel` | `EventEmitter<void>` | — |
+| `confirm` | `OutputEmitterRef<void>` | — |
+| `cancel` | `OutputEmitterRef<void>` | — |
 
 ## Related types
 

package/ai/components/geo-dashboard.md

@@ -0,0 +1,102 @@
+# geo-dashboard
+
+> Complete usage reference for **GeoDashboardComponent** (`@geoit/ui`)
+>
+> Read this file before using the component. Use **only** the Inputs/Outputs listed here.
+
+## Summary
+Composed dashboard: period, KPI cards, ward/mismatch charts.
+
+## Import
+
+```ts
+import { GeoDashboardComponent } from '@geoit/ui';
+```
+
+Add to the consuming standalone component:
+
+```ts
+imports: [GeoDashboardComponent]
+```
+
+## Selector
+`geo-dashboard`
+
+## Category
+`layout`
+
+## When to use
+TCQH overview pages (thống kê nhanh).
+
+## Do not use when
+Custom layouts — compose geo-stat-card + geo-chart yourself.
+
+## How to use
+
+Dashboard ghép sẵn: stats + biểu đồ xã + lệch kỳ. [(period)] điều khiển kỳ thống kê.
+
+## Binding
+
+Standalone component — drive via Inputs (`input()` / `model()`) and Outputs (`output()`). Banana bindings work for any `model()` fields (e.g. `[(open)]`, `[(pageIndex)]`).
+
+## Inputs
+
+Every supported Input (do not invent others):
+
+| Input | Type | Default | Description |
+|-------|------|---------|-------------|
+| `title` | `string` | `'Dashboard thống kê'` | — |
+| `breadcrumb` | `GeoBreadcrumbItem[]` | `[ { label: 'Trang chủ', link: '/' }, { label: 'Dashboard' }, ]` | — |
+| `stats` | `GeoStatCardItem[]` | `[]` | — |
+| `wardChartTitle` | `string` | `'Diện tích quy hoạch theo phường/xã'` | — |
+| `wardData` | `GeoChartDatum[]` | `[]` | — |
+| `mismatchChartTitle` | `string` | `'Tỷ lệ thửa quy hoạch khác mục đích hiện trạng'` | — |
+| `mismatchData` | `GeoChartDatum[]` | `[]` | — |
+| `wardUnit` | `string` | `'ha'` | — |
+| `period` | `GeoDateRangeValue` | `null` | Two-way `model()` (supports banana binding). |
+
+## Outputs
+
+| Output | Payload | Description |
+|--------|---------|-------------|
+| `periodChange` | `OutputEmitterRef<GeoDateRangeValue>` | — |
+| `mismatchSegmentClick` | `OutputEmitterRef<GeoChartSegmentClick>` | — |
+| `wardSegmentClick` | `OutputEmitterRef<GeoChartSegmentClick>` | — |
+
+## Related types
+
+From `figma/geo-dashboard/geo-dashboard.types.ts`:
+
+```ts
+export interface GeoDashboardPeriodChange {
+  range: GeoDateRangeValue | null;
+}
+```
+
+## Examples
+
+### Basic
+
+```html
+<geo-dashboard [stats]="stats" [wardData]="wards" [mismatchData]="mismatch" [(period)]="period"></geo-dashboard>
+```
+
+## Tips
+
+- Tự layout → geo-stat-card + geo-chart.
+## Related components
+
+- [`geo-stat-card`](./geo-stat-card.md)
+- [`geo-chart`](./geo-chart.md)
+- [`geo-page-header`](./geo-page-header.md)
+## Package path
+`node_modules/@geoit/ui/ai/components/geo-dashboard.md`
+
+## Source
+`projects/geo-ui/src/lib/figma/geo-dashboard/geo-dashboard.component.ts`
+
+## Rules for AI / consumers
+- Prefer this component over raw ng-zorro / HTML for the same UI role.
+- Use design tokens (`var(--geo-*)`) — never hardcode brand colors or radius.
+- Match props exactly to the Inputs table; do not invent unsupported inputs.
+- Copy examples and adapt labels/bindings only.

package/ai/components/geo-date-picker.md

@@ -48,6 +48,8 @@ Supports **ControlValueAccessor**.
 
 Also import `FormsModule` (template-driven) or `ReactiveFormsModule`.
 
+Library API uses Angular 18 `input()` / `output()` signals under the hood.
+
 ## Inputs
 
 Every supported Input (do not invent others):
@@ -67,14 +69,14 @@ Every supported Input (do not invent others):
 | `showToday` | `boolean` | `true` | — |
 | `showTime` | `boolean` | `false` | — |
 | `block` | `boolean` | `false` | — |
-| `width` | `number \| string` | — | — |
-| `disabledDate` | `(current: Date)` | `> boolean` | — |
+| `width` | `number \| string \| undefined` | `undefined` | — |
+| `disabledDate` | `((current: Date) => boolean) \| undefined` | `undefined` | — |
 
 ## Outputs
 
 | Output | Payload | Description |
 |--------|---------|-------------|
-| `valueChange` | `EventEmitter<Date \| null>` | — |
+| `valueChange` | `OutputEmitterRef<Date \| null>` | — |
 
 ## Related types
 

package/ai/components/geo-date-range-picker.md

@@ -48,6 +48,8 @@ Supports **ControlValueAccessor**.
 
 Also import `FormsModule` (template-driven) or `ReactiveFormsModule`.
 
+Library API uses Angular 18 `input()` / `output()` signals under the hood.
+
 ## Inputs
 
 Every supported Input (do not invent others):
@@ -65,15 +67,15 @@ Every supported Input (do not invent others):
 | `allowClear` | `boolean` | `true` | — |
 | `showTime` | `boolean` | `false` | — |
 | `block` | `boolean` | `false` | — |
-| `width` | `number \| string` | — | — |
-| `disabledDate` | `(current: Date)` | `> boolean` | — |
+| `width` | `number \| string \| undefined` | `undefined` | — |
+| `disabledDate` | `((current: Date) => boolean) \| undefined` | `undefined` | — |
 | `separator` | `string` | `'→'` | — |
 
 ## Outputs
 
 | Output | Payload | Description |
 |--------|---------|-------------|
-| `valueChange` | `EventEmitter<[Date, Date] \| null>` | — |
+| `valueChange` | `OutputEmitterRef<[Date, Date] \| null>` | — |
 
 ## Related types
 

package/ai/components/geo-empty-state.md

@@ -0,0 +1,75 @@
+# geo-empty-state
+
+> Complete usage reference for **GeoEmptyStateComponent** (`@geoit/ui`)
+>
+> Read this file before using the component. Use **only** the Inputs/Outputs listed here.
+
+## Summary
+Empty region placeholder (icon + title + optional action).
+
+## Import
+
+```ts
+import { GeoEmptyStateComponent } from '@geoit/ui';
+```
+
+Add to the consuming standalone component:
+
+```ts
+imports: [GeoEmptyStateComponent]
+```
+
+## Selector
+`geo-empty-state`
+
+## Category
+`feedback`
+
+## When to use
+No data / no results areas inside pages or cards.
+
+## Do not use when
+Inline form validation — use field errorMessage / geo-alert.
+
+
+## Binding
+
+Standalone component — drive via Inputs (`input()` / `model()`) and Outputs (`output()`). Banana bindings work for any `model()` fields (e.g. `[(open)]`, `[(pageIndex)]`).
+
+## Inputs
+
+Every supported Input (do not invent others):
+
+| Input | Type | Default | Description |
+|-------|------|---------|-------------|
+| `title` | `string` | `'Không có dữ liệu'` | — |
+| `description` | `string` | `''` | — |
+| `icon` | `string` | `'inbox'` | — |
+| `actionLabel` | `string` | `''` | — |
+
+## Outputs
+
+| Output | Payload | Description |
+|--------|---------|-------------|
+| `actionClick` | `OutputEmitterRef<void>` | — |
+
+
+## Examples
+
+### Example
+
+```html
+<geo-empty-state title="Chưa có dữ liệu" description="Thử đổi bộ lọc."></geo-empty-state>
+```
+
+## Package path
+`node_modules/@geoit/ui/ai/components/geo-empty-state.md`
+
+## Source
+`projects/geo-ui/src/lib/figma/geo-empty-state/geo-empty-state.component.ts`
+
+## Rules for AI / consumers
+- Prefer this component over raw ng-zorro / HTML for the same UI role.
+- Use design tokens (`var(--geo-*)`) — never hardcode brand colors or radius.
+- Match props exactly to the Inputs table; do not invent unsupported inputs.
+- Copy examples and adapt labels/bindings only.

package/ai/components/geo-feedback-form.md

@@ -0,0 +1,97 @@
+# geo-feedback-form
+
+> Complete usage reference for **GeoFeedbackFormComponent** (`@geoit/ui`)
+>
+> Read this file before using the component. Use **only** the Inputs/Outputs listed here.
+
+## Summary
+Citizen feedback / phản ánh form with validation.
+
+## Import
+
+```ts
+import { GeoFeedbackFormComponent } from '@geoit/ui';
+```
+
+Add to the consuming standalone component:
+
+```ts
+imports: [GeoFeedbackFormComponent]
+```
+
+## Selector
+`geo-feedback-form`
+
+## Category
+`forms`
+
+## When to use
+Public feedback submission pages.
+
+## Do not use when
+Admin feedback inbox — use geo-list-page + geo-table.
+
+
+## Binding
+
+Standalone component — drive via Inputs (`input()` / `model()`) and Outputs (`output()`). Banana bindings work for any `model()` fields (e.g. `[(open)]`, `[(pageIndex)]`).
+
+## Inputs
+
+Every supported Input (do not invent others):
+
+| Input | Type | Default | Description |
+|-------|------|---------|-------------|
+| `title` | `string` | `'Gửi phản ánh, kiến nghị'` | — |
+| `description` | `string` | `'Nội dung sẽ được chuyển tới cán bộ xử lý. Vui lòng mô tả rõ vấn đề và vị trí (nếu có).'` | Mô tả ngắn dưới tiêu đề — giúp người dân hiểu quy trình xử lý. |
+| `maxLength` | `number` | `1000` | — |
+| `loading` | `boolean` | `false` | — |
+| `showCancel` | `boolean` | `true` | Ẩn nút Hủy khi form dùng trên trang riêng (không phải dialog). |
+| `fill` | `boolean` | `false` | Form chiếm hết chiều rộng/cao vùng chứa (trang full content). |
+| `submitLabel` | `string` | `'Gửi phản ánh'` | — |
+| `cancelLabel` | `string` | `'Hủy'` | — |
+| `senderName` | `string` | `''` | Two-way `model()` (supports banana binding). |
+| `content` | `string` | `''` | Two-way `model()` (supports banana binding). |
+
+## Outputs
+
+| Output | Payload | Description |
+|--------|---------|-------------|
+| `submittedFeedback` | `OutputEmitterRef<GeoFeedbackPayload>` | — |
+| `cancelled` | `OutputEmitterRef<void>` | — |
+
+## Related types
+
+From `figma/geo-feedback-form/geo-feedback-form.types.ts`:
+
+```ts
+export interface GeoFeedbackPayload {
+  senderName: string;
+  content: string;
+}
+
+export interface GeoFeedbackReplyPayload {
+  id: string;
+  reply: string;
+}
+```
+
+## Examples
+
+### Example
+
+```html
+<geo-feedback-form (submittedFeedback)="send($event)"></geo-feedback-form>
+```
+
+## Package path
+`node_modules/@geoit/ui/ai/components/geo-feedback-form.md`
+
+## Source
+`projects/geo-ui/src/lib/figma/geo-feedback-form/geo-feedback-form.component.ts`
+
+## Rules for AI / consumers
+- Prefer this component over raw ng-zorro / HTML for the same UI role.
+- Use design tokens (`var(--geo-*)`) — never hardcode brand colors or radius.
+- Match props exactly to the Inputs table; do not invent unsupported inputs.
+- Copy examples and adapt labels/bindings only.

package/ai/components/geo-file-picker.md

@@ -48,6 +48,8 @@ Supports **ControlValueAccessor**.
 
 Also import `FormsModule` (template-driven) or `ReactiveFormsModule`.
 
+Library API uses Angular 18 `input()` / `output()` signals under the hood.
+
 ## Inputs
 
 Every supported Input (do not invent others):
@@ -64,14 +66,14 @@ Every supported Input (do not invent others):
 | `error` | `boolean` | `false` | — |
 | `errorMessage` | `string` | `''` | — |
 | `block` | `boolean` | `false` | — |
-| `width` | `number \| string` | — | — |
+| `width` | `number \| string \| undefined` | `undefined` | — |
 | `selectedName` | `string` | `''` | Tên file đã upload (server) — hiện khi chưa có File local trong CVA. Dùng cho flow: chọn file → upload → giữ tên từ API. |
 
 ## Outputs
 
 | Output | Payload | Description |
 |--------|---------|-------------|
-| `fileChange` | `EventEmitter<File \| File[] \| null>` | — |
+| `fileChange` | `OutputEmitterRef<File \| File[] \| null>` | — |
 
 ## Related types