# AppDetailHeader

The information header that opens every **detail** page: the resource's name reading as the page
title, its counters collapsed onto ONE right-anchored line, pill tags for what it is / who owns it,
and a muted closing line for identifiers, generated paths and versions. Replaces a bordered
`<Descriptions>` grid, which turns short values (`8` · `0` · `—`) into a spreadsheet of random gaps.

## Install

Copy into your module:

```
src/components/common/AppDetailHeader.tsx
src/components/common/app-detail-header.module.css
```

Requires `antd` (already a dependency in every RVN React MFE). Vue: copy `AppDetailHeader.vue` to
`src/components/common/AppDetailHeader.vue` instead (requires `ant-design-vue`).

## Usage

```tsx
import AppDetailHeader, { type DetailHeaderStat } from '@/components/common/AppDetailHeader';
import { Tag, Tooltip } from 'antd';

const stats: DetailHeaderStat[] = [
  { label: t('template.columns.columns'), value: row.columnCount ?? 0 },
  { label: t('template.columns.errors'), value: row.errorCount ?? 0, tone: (row.errorCount ?? 0) > 0 ? 'warn' : 'ok' },
];

<Card className="w-100" title={...} loading={loading && !row}>
  <AppDetailHeader
    name={row.name}
    description={row.description}
    tags={
      <Tooltip title={t('template.label.service')}>
        <Tag style={TAG_PILL.service}>{row.owner}</Tag>
      </Tooltip>
    }
    stats={stats}
    meta={[{ text: row.code, mono: true }]}
  />

  <Table className="mt-3 w-100" ... />   {/* mt-3, NOT a <Divider> */}
</Card>
```

- If a module's detail pages always show the **same** counters, wrap `AppDetailHeader` once (e.g.
  resource-fe's `ResourceInfoPanel.tsx`) and build the `stats` array there — two pages sharing a
  wrapper can never colour or count the same unit differently.
- Vue: `tags` is a named **slot**, not a prop.
- The component owns layout and typography only — every string arrives already translated and
  already formatted.

## Do / Don't

- **Don't** put domain props (`keyCount`, `missingCount`, …) directly on `AppDetailHeader` — keep
  those in a module-specific wrapper and pass the generic `stats` array instead.
- **Don't** print the fully-qualified key/identifier if the table below already shows it as its
  first column — that's the same string twice.
- **Do** define the tag pill palette once per module (a `TAG_PILL` constant), not inline per page.
- **Do** replace the old `<Divider>` between the header and the table with `mt-3` on the
  table/tabs — the header's own bottom gap is the separation now.

Part of the **RVN Design Kit** — design-kit.raffles.com.vn