From 73e02a3dcc6bf24904121c967ee5122d7918d77a Mon Sep 17 00:00:00 2001 From: os-zhuang Date: Sat, 20 Jun 2026 17:40:47 +0800 Subject: [PATCH] polish(app-showcase): color + sublabels on home & My Work KPI tiles MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The landing KPIs all rendered with the neutral grey icon (object-metric's default colorVariant) and an empty card bottom, which read flat. Opt them into the metric palette and add a one-line sublabel so the tiles are colorful and informative: • Home — Projects (blue), Tasks (purple), Accounts (teal), Open Tasks (amber) • My Work — Open Tasks (blue), In Review (amber), At-Risk (rose) Each gains a description (active & planned / not done / awaiting review / …) that fills the previously-empty space. Pairs with objectui #1817 (tabular-nums on the metric value). Browser-verified on :5181. Co-Authored-By: Claude Opus 4.8 --- examples/app-showcase/src/pages/index.ts | 8 ++++---- examples/app-showcase/src/pages/my-work.page.ts | 6 +++--- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/examples/app-showcase/src/pages/index.ts b/examples/app-showcase/src/pages/index.ts index 5a88ae0269..763270f5da 100644 --- a/examples/app-showcase/src/pages/index.ts +++ b/examples/app-showcase/src/pages/index.ts @@ -63,10 +63,10 @@ export const ComponentGalleryPage: Page = { columns: 4, gap: 4, children: [ - { type: 'object-metric', properties: { objectName: 'showcase_project', label: 'Projects', icon: 'folder-kanban', aggregate: { field: 'id', function: 'count' } } }, - { type: 'object-metric', properties: { objectName: 'showcase_task', label: 'Tasks', icon: 'check-square', aggregate: { field: 'id', function: 'count' } } }, - { type: 'object-metric', properties: { objectName: 'showcase_account', label: 'Accounts', icon: 'building', aggregate: { field: 'id', function: 'count' } } }, - { type: 'object-metric', properties: { objectName: 'showcase_task', label: 'Open Tasks', icon: 'list-checks', aggregate: { field: 'id', function: 'count' }, filter: { status: { $ne: 'done' } } } }, + { type: 'object-metric', properties: { objectName: 'showcase_project', label: 'Projects', icon: 'folder-kanban', colorVariant: 'blue', description: 'active & planned', aggregate: { field: 'id', function: 'count' } } }, + { type: 'object-metric', properties: { objectName: 'showcase_task', label: 'Tasks', icon: 'check-square', colorVariant: 'purple', description: 'all states', aggregate: { field: 'id', function: 'count' } } }, + { type: 'object-metric', properties: { objectName: 'showcase_account', label: 'Accounts', icon: 'building', colorVariant: 'teal', description: 'customers', aggregate: { field: 'id', function: 'count' } } }, + { type: 'object-metric', properties: { objectName: 'showcase_task', label: 'Open Tasks', icon: 'list-checks', colorVariant: 'warning', description: 'not done', aggregate: { field: 'id', function: 'count' }, filter: { status: { $ne: 'done' } } } }, ], }, }, diff --git a/examples/app-showcase/src/pages/my-work.page.ts b/examples/app-showcase/src/pages/my-work.page.ts index 92ce4496e2..3cbf8afea7 100644 --- a/examples/app-showcase/src/pages/my-work.page.ts +++ b/examples/app-showcase/src/pages/my-work.page.ts @@ -36,9 +36,9 @@ export const MyWorkPage: Page = { columns: 3, gap: 4, children: [ - { type: 'object-metric', properties: { objectName: 'showcase_task', label: 'Open Tasks', icon: 'list-checks', aggregate: { field: 'id', function: 'count' }, filter: { status: { $ne: 'done' } } } }, - { type: 'object-metric', properties: { objectName: 'showcase_task', label: 'In Review', icon: 'eye', aggregate: { field: 'id', function: 'count' }, filter: { status: 'in_review' } } }, - { type: 'object-metric', properties: { objectName: 'showcase_project', label: 'At-Risk Projects', icon: 'alert-triangle', aggregate: { field: 'id', function: 'count' }, filter: { health: 'red' } } }, + { type: 'object-metric', properties: { objectName: 'showcase_task', label: 'Open Tasks', icon: 'list-checks', colorVariant: 'blue', description: 'not done', aggregate: { field: 'id', function: 'count' }, filter: { status: { $ne: 'done' } } } }, + { type: 'object-metric', properties: { objectName: 'showcase_task', label: 'In Review', icon: 'eye', colorVariant: 'warning', description: 'awaiting review', aggregate: { field: 'id', function: 'count' }, filter: { status: 'in_review' } } }, + { type: 'object-metric', properties: { objectName: 'showcase_project', label: 'At-Risk Projects', icon: 'alert-triangle', colorVariant: 'danger', description: 'health red', aggregate: { field: 'id', function: 'count' }, filter: { health: 'red' } } }, ], }, },