# Daily Summary
> One day at a glance with water, meals by safety, caffeine by kind, focus sessions, shutdown violations, steps, sleep, energy, heart rate and weight, plus a day switcher.
Source: https://docs.nasaqui.com/components/daily-summary
## Install
```bash
npx shadcn@latest add https://docs.nasaqui.com/r/daily-summary.json
```
The rollup for one civil day. Protocol figures (water, meals, caffeine, shutdown violations, focus sessions) come
first, then body and activity (steps, sleep, energy, resting heart rate, weight). A figure the device did not send
reads "Not synced"; it is never shown as zero. Meals and caffeine are split by kind with an icon and a word for each
kind, so colour is never the only signal.
## When to use
- The "today" or "yesterday" screen of a health app.
- Anywhere a person steps through days one at a time.
## When not to use
- Trends over weeks: use [`HealthReport`](https://docs.nasaqui.com/components/health-reports).
- Body readings and targets: use [`Vitals`](https://docs.nasaqui.com/components/vitals).
## Import
```tsx
import { DailySummary } from "@fadymondy/nasaq/web";
// inside this monorepo: "@nasaq/web"
```
## Quick start
```tsx
import { DailySummary } from "@fadymondy/nasaq/web";
export function Today({ summary, load }: { summary: DailySummaryData; load: (date: string) => void }) {
return ;
}
```
## Anatomy
```
DailySummary data-slot="daily-summary" data-date
├─ header previous, date heading, next, source Badge
├─ Protocol water (Meter against your goal), meals, caffeine, shutdown, focus sessions
└─ Body and activity StatCards
```
## API
| Prop | Type | Notes |
| --- | --- | --- |
| `summary` | `DailySummaryData` | One row per day. Every figure is optional. |
| `date` | `string` | The day shown while `summary` is absent. |
| `maxDate` | `string` | The next button stops here. |
| `onDateChange` | `(date: string) => void` | Called with the neighbouring civil date. Omit to hide the switcher. |
| `waterGoalMl` | `number` | The person's own goal. Nothing is drawn without one. |
| `loading`, `error`, `onRetry` | | Skeleton, the server's message, retry. |
| `labels` | `Partial` | Override any string. |
`addCivilDays`, `isCivilDate`, `isAfter`, `minutesToSeconds` and `unclassifiedCount` are exported from the folder for hosts.
## Code
### React
```tsx
import { DailySummary } from "@fadymondy/nasaq/web";
export function Today({ summary, load }: { summary: DailySummaryData; load: (date: string) => void }) {
return ;
}
```
### shadcn
```tsx
import { DailySummary } from "@/components/ui/daily-summary";
export function Today({ summary, load }: { summary: DailySummaryData; load: (date: string) => void }) {
return ;
}
```
### Vue
```vue
```
### Blade
```blade
```
### HTML + Alpine
```html