# CupTracker > Daily health trackers. A unit-count cup row, pinned quick-log strip, classified food catalogue, item builder with an entry-completeness ring and a flagged entries disclosure. Source: https://docs.nasaqui.com/components/health-trackers ## Install ```bash npx shadcn@latest add https://docs.nasaqui.com/r/health-trackers.json ``` Five parts for logging and classifying what a person consumes. They show what the server decided and never work out health rules themselves: the number of cups, whether an entry is flagged and whether a log is refused all come from your callbacks. ## When to use - A day of countable units (cups of water): `CupTracker`. - The few items logged every day: `QuickLogStrip`. - Managing the catalogue with verdicts, families and notes: `FoodCatalogue` and `FoodItemBuilder`. - Explaining flagged entries for the day: `FlaggedEntries`. ## When not to use - Timers, streaks and focus state already exist elsewhere: use the pomodoro, focus-status, countdown and gamification parts. ## Import ```tsx import { CupTracker, QuickLogStrip, FoodCatalogue, FoodItemBuilder, FlaggedEntries } from "@fadymondy/nasaq/web"; ``` ## Quick start ```tsx import { CupTracker } from "@fadymondy/nasaq/web"; export function Water({ filled, total }: { filled: number; total: number }) { return { await api.logCup(); }} />; } ``` ## API | Component | Prop | Description | | --- | --- | --- | | `CupTracker` | `filled`, `total`, `onLog`, `disabled`, `waitLabel`, `unitLabel` | Only the next cup is a button. One intent, "log one". Counts are clamped to 60. | | `QuickLogStrip` | `items`, `onLog(item, { override })`, `onUnpin`, `catalogueHref`, `loading`, `title` | `onLog` resolves `{ flagged, message }` (a warning, it was recorded) or `{ error, canOverride }` (refused, offers "Log anyway"). | | `FoodCatalogue` | `items`, `families`, `onPin`, `onEdit`, `onDelete`, `onAdd`, plus `EntityList` options | Table or cards, search, verdict, type and family filters. Delete asks first. Row actions also open from the context menu. | | `FoodItemBuilder` | `initial`, `families`, `onSave`, `onCancel`, `editing` | The ring measures how complete the entry is, not the food. No calorie or portion fields. | | `FlaggedEntries` | `count`, `entries`, `onLoad`, `defaultOpen` | `onLoad` runs the first time it opens, and again on retry. | Every callback that can fail resolves `{ error?: string }`. Every part takes `labels` (`HealthTrackersLabels`). Pure helpers: `cupState`, `cupCounts`, `verdictCounts`, `verdictTone`, `foodDraftCompleteness`, `foodDraftValid`. ## Accessibility - The cup row has one name ("7 of 20 cups logged today") and each state has a shape, not only a colour. - Verdicts always show an icon and a word. Unreviewed is neutral and never looks safe. - Results and errors are announced through polite status regions. ## RTL & i18n Items carry `name` and `nameAr`, and the Arabic name shows when the app is Arabic. Strings are en and ar. ## Styling & tokens `--nq-success`, `--nq-danger`, `--nq-line-strong` and the primary token. Extend with `className`. ## Do / Don't - Do let the server decide flags and refusals. - Do not style an unreviewed item as safe. - Do not add health scoring to the builder ring. ## Related - [EntityList](https://docs.nasaqui.com/components/entity-list) - [TimerRing](https://docs.nasaqui.com/components/timer-ring) - [Text utilities](https://docs.nasaqui.com/components/text-utilities) ## Lab https://docs.nasaqui.com/?path=/docs/components-wellness-health-trackers--docs ## Code ### React ```tsx import { CupTracker } from "@fadymondy/nasaq/web"; export function Water({ filled, total }: { filled: number; total: number }) { return { await api.logCup(); }} />; } ``` ### shadcn ```tsx import { CupTracker } from "@/components/ui/health-trackers"; export function Water({ filled, total }: { filled: number; total: number }) { return { await api.logCup(); }} />; } ``` ### Vue ```vue ``` ### Blade ```blade @php $families = [['id' => 'caffeine', 'name' => 'Caffeine', 'nameAr' => 'الكافيين'], ['id' => 'dairy', 'name' => 'Dairy', 'nameAr' => 'الألبان']]; $items = [ ['id' => 'tea', 'kind' => 'drink', 'name' => 'Green tea', 'nameAr' => 'شاي أخضر', 'verdict' => 'safe', 'verdictSource' => 'you', 'pinned' => true], ['id' => 'coffee', 'kind' => 'drink', 'name' => 'Espresso', 'nameAr' => 'إسبرسو', 'verdict' => 'trigger', 'verdictSource' => 'clinician', 'triggerFamilies' => ['caffeine'], 'note' => 'Not after noon.'], ['id' => 'yogurt', 'kind' => 'food', 'name' => 'Yogurt', 'verdict' => 'unreviewed', 'verdictSource' => 'none'], ]; $pinned = [ ['id' => 'water', 'name' => 'Water', 'nameAr' => 'ماء', 'icon' => 'glass-water'], ['id' => 'coffee', 'name' => 'Espresso', 'nameAr' => 'إسبرسو', 'icon' => 'coffee'], ]; $flagged = [['id' => 'f1', 'at' => '2026-09-29T08:30:00Z', 'label' => 'Espresso', 'reason' => 'Logged after the cut-off time.', 'area' => 'Caffeine']]; @endphp

``` ### HTML + Alpine ```html

7 / 12 250 ml

Quick log

New item

Still to add

Name

Arabic name

Shown when the app is in Arabic.

Verdict

Nobody has judged this yet. It is not the same as safe.

Note

Kept as written, for your own doctor. Nothing adds it up.

```