aerimagne/MeshiTrack
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Phase 5 cleanup

Browse source
This commit is contained in:
Aerilyn Weber 2026-04-26 18:44:59 +09:00
parent 5536acd67d
commit 76a516a417
136 changed files with 6322 additions and 1985 deletions
Download patch file Download diff file Expand all files Collapse all files

9
.github/copilot-instructions.md vendored
View file

@ -36,6 +36,14 @@ The `docs/instructions/` directory contains best practices and conventions that
- **`docs/instructions/keycloak.md`** — Auth integration, JWT claims, guards, token refresh
- **`docs/instructions/testing.md`** — Vitest unit/integration/E2E test patterns, coverage targets
## Tool Usage Rules
- **Always use `read_file` to read file contents** — never use terminal commands like `Get-Content`, `cat`, `head`, or `tail` to read files. These will be denied.
- **Always use `grep_search` or `file_search` to find files and patterns** — never use `Select-String`, `grep`, `find`, or `rg` in terminal commands.
- **Run scripts only via `npm run <script>`** — never use `npx`, and never add flags like `2>&1`, pipes (`|`), or `Select-Object` to `npm run` commands.
- **Use `execution_subagent` for build/test/lint commands** — it runs `npm run build`, `npm run test`, and `npm run lint` and returns relevant output without piping.
- **Every implementation task must end with**: `npm run build`, `npm run test`, and `npm run lint` all passing.
## Key Rules
1. **All domain types and Zod schemas live in `packages/shared`** — never duplicate types across packages.
@ -47,3 +55,4 @@ The `docs/instructions/` directory contains best practices and conventions that
7. **Cursor-based pagination** — never use `skip()` for large collections.
8. **ESM everywhere** — `"type": "module"`, `.js` extensions on imports, `import type` for type-only imports.
9. **Zod v4** — import from `'zod/v4'`, use `z.enum()` for enums, `z.email()` / `z.url()` as top-level.
10. **No `.js` extensions on `@/` imports in `packages/web`** — Next.js resolves TypeScript files directly; `.js` extensions on `@/` path-alias imports break Turbopack and webpack. Only use `.js` extensions in `packages/api` and `packages/shared` (Node ESM).

10
.vscode/settings.json vendored
View file

@ -1,6 +1,7 @@
{
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"files.eol": "\n",
"editor.codeActionsOnSave": {
"source.fixAll.eslint": "explicit"
},
@ -9,6 +10,13 @@
"eslint.workingDirectories": ["packages/api", "packages/shared", "packages/web"],
"chat.tools.terminal.enableAutoApprove": true,
"chat.tools.terminal.autoApprove": {
"/^npm run \\w+$/": true
"/^npm run \\w+$/": {
"approve": true,
"matchCommandLine": true
},
"Get-Content": false,
"Select-String": false,
"Select-Object": false,
"echo": false
}
}

18
CLAUDE.md
View file

@ -9,6 +9,7 @@ MeshiTrack is a self-hosted medicine & nutrition management platform. It is a Ty
## Commands
### Root (all packages via Turborepo)
```bash
npm run dev # Start all services in dev mode
npm run build # Build all packages (shared → api/web)
@ -22,6 +23,7 @@ npm run seed # Seed the database (delegates to packages/api)
```
### Single package
```bash
npm run test -w packages/api # Run API tests
npm run test:cov -w packages/api # API tests with coverage
@ -30,6 +32,7 @@ npm run dev -w packages/api # API dev server only
```
### API package (packages/api)
```bash
npm run dev # tsx watch src/main.ts
npm run build # tsc
@ -37,6 +40,7 @@ npm run seed # tsx src/scripts/seed.ts
```
### Docker
```bash
docker compose -f docker/docker-compose.yml up -d # Start all services
docker compose -f docker/docker-compose.yml down # Stop all services
@ -45,11 +49,13 @@ docker compose -f docker/docker-compose.yml down # Stop all services
## Architecture
### Monorepo Structure
- **`packages/shared`** — Single source of truth for all domain types, enums, and Zod v4 schemas. Consumed by both `api` and `web`. Must be pure TypeScript with no Node.js, browser, or framework dependencies.
- **`packages/api`** — Fastify 5 backend. ESM-only, TypeScript strict. Uses Awilix for DI, Mongoose 9 for MongoDB, jose 6 for JWT verification.
- **`packages/web`** — Next.js 16 (React 19) frontend. App Router, Tailwind CSS 4.
### API Layer Architecture (Fastify + Awilix)
The API follows a **routes → services → repositories** pattern with Awilix constructor-injection DI:
- Each domain feature lives in `src/modules/<feature>/` with files: `*.routes.ts`, `*.service.ts`, `*.repository.ts`
@ -61,19 +67,23 @@ The API follows a **routes → services → repositories** pattern with Awilix c
Plugin registration order in `main.ts`: security → compression → swagger → DI container → database → auth → household guard → route modules.
### Domain Modules
**Medicine domain** (Phases 1-4): `medicines/`, `medicine-products/`, `cabinet/`, `regimens/`, `organizer/`, `medicine-prices/`, `purchases/`, `refills/`
**Food domain** (Phases 5-9): `products/`, `recipes/`, `pantry/`, `meal-plans/`, `grocery/`
**Shared**: `health/`, `users/`, `households/`, `stores/`, `llm/`
### Multi-tenancy
Every domain document is scoped to a `householdId`. A Fastify `preHandler` hook validates the `householdId` from the URI against the user's `householdIds[]` JWT claim. **Every data query must filter by `householdId`.**
Routes can opt out with `config: { public: true }` (skips auth) or `config: { skipHousehold: true }` (skips household validation).
### Auth
Keycloak is the OIDC provider. The API verifies JWTs via `jose`. The custom Keycloak protocol mapper injects `householdIds[]` into the JWT claims.
### Shared Package Rules
- All domain types and Zod schemas live here — never duplicate types across packages
- Import from `'zod/v4'` (not `'zod'`)
- Use `z.enum()` for enums, `z.email()` / `z.url()` as top-level calls
@ -81,12 +91,15 @@ Keycloak is the OIDC provider. The API verifies JWTs via `jose`. The custom Keyc
- Use `import type` for type-only imports
### Pagination
All list endpoints use cursor-based pagination. **Never use `skip()`** on MongoDB queries. Response shape:
```typescript
{ data: T[], pagination: { cursor: string | null, hasMore: boolean, total?: number } }
```
### Error Handling
Services throw `AppError` subclasses (`NotFoundError`, `ConflictError`, `ForbiddenError`, etc.). The global Fastify error handler maps them to the standard `ApiError` response shape (`statusCode`, `error`, `message`, `timestamp`, `path`).
## Key Rules
@ -99,6 +112,10 @@ Services throw `AppError` subclasses (`NotFoundError`, `ConflictError`, `Forbidd
6. **`householdId` filter** on every domain query — this is the multi-tenancy boundary
7. **No emojis** — never use emoji characters in source code, UI text, console output, or documentation
8. **`npx` is banned** — never run `npx` for any reason. Use `npm run <script>` for all test, lint, build, and tool invocations. No exceptions.
9. **Never pipe or redirect `npm run` commands** — run `npm run <script>` exactly as written; never append `2>&1`, `|`, `Select-Object`, `Select-String`, or any other shell constructs to it.
10. **Never use shell commands to read files** — always use `read_file` tool. Commands like `Get-Content`, `cat`, `head`, `tail` will be denied.
11. **Never use shell commands to search** — always use `grep_search` or `file_search`. Commands like `Select-String`, `grep`, `rg`, `find` will be denied.
12. **Every implementation task must end with `npm run build`, `npm run test`, and `npm run lint` all passing.**
## Testing
@ -113,6 +130,7 @@ Services throw `AppError` subclasses (`NotFoundError`, `ConflictError`, `Forbidd
## Documentation
Before writing code, consult the relevant docs:
- `docs/instructions/` — coding conventions, Fastify patterns, Next.js patterns, MongoDB, Zod/TypeScript, testing, Docker, Keycloak, Turborepo
- `docs/phases/` — per-phase specs with schemas, endpoints, and business logic
- `docs/architecture.md` — ADRs explaining key technology choices

2
docker/docker-compose.yml
View file

@ -36,6 +36,7 @@ services:
KC_HOSTNAME_URL: http://localhost:8080
command: start-dev --import-realm
volumes:
- keycloak-data:/opt/keycloak/data
- ./keycloak/realm-export.json:/opt/keycloak/data/import/realm-export.json:ro
healthcheck:
test:
@ -137,3 +138,4 @@ services:
volumes:
mongo-data:
keycloak-data:

247
docs/frontend-redesign-plan.md Normal file
View file

@ -0,0 +1,247 @@
# Frontend Redesign Plan — Aligning with `docs/design` Mockups
This plan describes how to evolve `packages/web` from the current minimal Tailwind UI to match the editorial, warm-neutral design defined in `docs/design/MeshiTrack.html` and the screenshots under `docs/design/screenshots/`.
The mockups are a React (UMD + Babel) prototype using a CSS-token system. We will port the **visual language and information architecture** into the existing **Next.js App Router + Tailwind v4** project, without dragging the prototype's runtime (React UMD, global `window.*` modules, inline data) into production.
---
## 1. Goals & Non-Goals
### Goals
- Match the visual language of the mockups: typography (Fraunces / Inter Tight / JetBrains Mono), warm-neutral palette, sage brand, generous whitespace, soft shadows, rounded cards.
- Reproduce the **app shell**: persistent left sidebar with grouped navigation + sticky topbar with title/subtitle, search, theme toggle, notifications.
- Reproduce the **page archetypes** shown in the mockups: editorial "hero" header, multi-card grid with consistent `mt-card` style, status pills, supply bars, mini SVG charts.
- Support light/dark themes and an accent switcher (sage / cobalt / terracotta / graphite) via CSS custom properties.
- Keep accessibility, responsive layout, and SSR-friendliness intact.
### Non-Goals
- Do not import the prototype's `data.jsx` mock data into production.
- Do not adopt the prototype's `window.*` global module pattern or Babel-in-browser runtime.
- Do not redesign data flows or API contracts; only the presentation layer changes.
- Do not block on building every page in the mockup; food-domain pages (Phases 5-9) will reuse the system once the medicine pages are migrated.
---
## 2. Gap Analysis
| Area | Current state (`packages/web`) | Target (mockups) |
| ------------------------------------------------------------------------------------------------------ | ------------------------------------------- | ------------------------------------------------------------------------------------------------------------------- | --------------------------------- |
| Theme tokens | Tailwind v4 `@theme` with a green ramp only | Full token set: warm neutrals, brand sage, status, viz palette, radii, shadows, fonts; light + dark |
| Typography | System sans only | Fraunces (display), Inter Tight (UI), JetBrains Mono (numerics/keys), tabular-nums utility |
| Sidebar | Flat list, 3 links, no groups, no badges | Grouped (`Medicines` section), icons, active state, badges, footer with avatar/role |
| TopBar | Household chip + avatar | Breadcrumbs, title + subtitle, search with `⌘K`, notifications, theme toggle |
| Cards | Ad-hoc Tailwind cards | Reusable `Card`, `CardHeader`, `Pill`, `Button` (`primary`/`ghost`), supply bar, ring chart, sparkbar |
| Dashboard | 2 link cards | Hero greeting + ring, Today's schedule, Running low, Spending bars, Days-of-supply, Pending orders, Recent activity |
| Cabinet / Schedule / Regimens / Organizer / Library / Refills / Purchases / Prices / Stores / Activity | Mostly placeholder grids/tables | Editorial layouts with status chips, swatches, supply bars (see screenshots) |
| Theming | None | `data-theme="light | dark"`on`<html>`, accent CSS vars |
| Icons | None defined centrally | Inline SVG icon set (`Icon.jsx` in mockup) |
---
## 3. Target Architecture
### 3.1 Design tokens (Tailwind v4 `@theme` + CSS vars)
- Replace the current `@theme` block in [packages/web/src/styles/globals.css](packages/web/src/styles/globals.css) with the full token set from [docs/design/styles/tokens.css](docs/design/styles/tokens.css):
- Color tokens exposed both as CSS vars (`--bg`, `--ink`, `--brand`, ...) **and** as Tailwind theme colors (`--color-bg`, `--color-ink`, ...) so utilities like `bg-bg`, `text-ink`, `border-border` work.
- Radii (`--r-xs`..`--r-xl`) and shadows (`--shadow-sm/md/lg`).
- Font family vars + load Fraunces / Inter Tight / JetBrains Mono via `next/font/google` in [packages/web/src/app/layout.tsx](packages/web/src/app/layout.tsx) and bind them to the `--font-*` vars.
- Add `[data-theme='dark']` overrides in `globals.css` (copy from tokens.css).
- Add small global utility classes used by the mockup: `.mono`, `.serif`, `.num` (tabular-nums) — keep names so mockup snippets can be lifted with minimal edits.
### 3.2 Theme + accent provider
- New `ThemeProvider` (client component) that:
- Persists `theme` (`light|dark`) and `accent` (`sage|cobalt|terracotta|graphite`) in `localStorage`.
- Sets `data-theme` on `document.documentElement` and writes the accent's `--brand`, `--brand-deep`, `--brand-soft`, `--brand-soft-ink`, `--viz-1` CSS vars (logic ported from `docs/design/MeshiTrack.html` `useEffect`).
- Avoids FOUC by emitting a tiny inline script in `app/layout.tsx` that reads `localStorage` and applies `data-theme` before hydration.
- Expose a `useTheme()` hook for the topbar toggle.
### 3.3 Component library (`packages/web/src/components/ui/`)
Port the mockup's reusable primitives as typed React components:
- `Icon` — single component over an inline SVG map (`dashboard`, `cabinet`, `clock`, `list`, `calendar`, `pill`, `refresh`, `truck`, `tag`, `store`, `trend`, `settings`, `search`, `bell`, `sun`, `moon`, `chev`, `arrow`, `check`, `injection`, `capsule`).
- `Card`, `CardHeader` (title + sub + right-side action slot).
- `Button` with `variant: 'primary' | 'ghost' | 'danger'` and optional `size`.
- `Pill` (status chip) with `tone: 'ok' | 'warn' | 'danger' | 'info' | 'neutral'`.
- `SupplyBar`, `Ring` (SVG progress ring), `SparkBars` (monthly bars), `Sparkline`.
- `Kbd`, `IconButton`, `Avatar`, `SearchInput`, `Breadcrumbs`.
These live in `packages/web/src/components/ui/` and are pure presentational components (no data fetching, no `'use client'` unless they need state — most do not).
### 3.4 App shell
Rewrite the layout primitives:
- [packages/web/src/components/layout/Sidebar.tsx](packages/web/src/components/layout/Sidebar.tsx):
- Brand block (logo + wordmark + household sub-line — `household.name` instead of mock "Red Panda Den").
- Grouped nav from a `NAV` array mirroring the mockup's structure but driven by `next/navigation`'s `usePathname` for active state.
- Footer with `Avatar` + `displayName` + role from `useApi()`.
- Badges (e.g. low-supply count, pending refills) wired to real SWR fetchers (Phase 2 — initially render the slot but optional).
- [packages/web/src/components/layout/TopBar.tsx](packages/web/src/components/layout/TopBar.tsx):
- Accept `title`, `subtitle`, `crumbs`, `actions` props. Provided either via a `<PageHeader>` component each route renders, **or** via a Zustand/Context "page header" store updated from each page (recommended: a server-component `PageHeader` slot rendered above the page body — simpler, no client state).
- Search input (visual only at first; `⌘K` palette is a follow-up).
- Theme toggle wired to `useTheme()`.
- Notifications bell (visual only initially).
- [packages/web/src/app/(dashboard)/layout.tsx](<packages/web/src/app/(dashboard)/layout.tsx>):
- Switch root container to the mockup's grid: `grid-template-columns: 248px 1fr; min-height: 100vh; background: var(--bg)`.
- Inner `<main>` becomes `mt-page` with the mockup's padding (`32px` desktop, responsive down).
### 3.5 Page layout pattern
Each route renders:
```
<PageHeader title="..." subtitle="..." crumbs={[...]} actions={...} />
<PageContent>...cards / grid...</PageContent>
```
`PageHeader` is a server component that renders the topbar's middle area (title block + breadcrumbs). The sticky outer `TopBar` reads `children` via React's `slots` pattern: simplest is to make `TopBar` itself accept `title/subtitle/crumbs` and have pages set them via a thin `PageHeaderContext` (client provider) or via Next's `template.tsx` + parallel routes. Choose the **Context approach** for minimal churn.
---
## 4. Page-by-Page Mapping
For each route, port the layout from the mockup's JSX while replacing mock data with the existing service hooks.
| Route | Current file | Mockup source | Notes |
| ---------------------- | --------------------------------------------------------------------------- | ------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `/dashboard` | [dashboard/page.tsx](<packages/web/src/app/(dashboard)/dashboard/page.tsx>) | [Dashboard.jsx](docs/design/src/Dashboard.jsx) | Hero + Ring, Today's schedule, Running low, Spending, Supply, Pending orders, Activity. Many cards depend on data we don't yet expose; render skeletons / "Coming soon" states for missing endpoints. |
| `/medicines/cabinet` | `medicines/cabinet/` | [Cabinet.jsx](docs/design/src/Cabinet.jsx) | Grid of medicine cards with swatch, supply bar, status pill. |
| `/medicines/regimens` | `medicines/regimens/` | `RegimensPage` in [OtherPages.jsx](docs/design/src/OtherPages.jsx) | Per-regimen rows with schedule chips. |
| `/medicines/organizer` | `medicines/organizer/` | [Schedule.jsx](docs/design/src/Schedule.jsx) `OrganizerPage` | 7-day x slots grid. |
| `/medicines/library` | `medicines/library/` | `LibraryPage` | Filterable medicine table. |
| `/medicines/activity` | `medicines/activity/` | `ActivityPage` | Activity feed + spend summary. |
| `/refills` (new) | — | `RefillsPage` | Add route under `(dashboard)/refills/`. |
| `/purchases` | `purchases/` | `PurchasesPage` | List with status pills. |
| `/medicine-prices` | `medicine-prices/` | `PricesPage` | Per-store price comparison. |
| `/stores` | `stores/` | `StoresPage` | Store cards. |
| `/settings` | `settings/` | `SettingsPage` | Household + account sections. |
Also add a **Schedule & Log** page (`/schedule` or `/medicines/schedule`) per mockup — currently missing.
Update [medicines/page.tsx](<packages/web/src/app/(dashboard)/medicines/page.tsx>) (and [dashboard/page.tsx](<packages/web/src/app/(dashboard)/dashboard/page.tsx>) if kept) to use `Card`/`CardHeader` instead of ad-hoc Tailwind classes.
---
## 5. Phased Rollout
Treat this as 5 PR-sized increments, each independently shippable.
### Phase A — Foundations (no visible page changes yet)
1. Port tokens.css into `globals.css` (CSS vars + Tailwind v4 `@theme` mappings + dark overrides).
2. Wire fonts via `next/font/google` in `app/layout.tsx`; bind to `--font-*` vars.
3. Add `ThemeProvider` + FOUC-safe inline script.
4. Add `Icon` component and the icon set.
5. Add UI primitives: `Card`, `CardHeader`, `Button`, `Pill`, `IconButton`, `Avatar`, `Kbd`, `SearchInput`, `Breadcrumbs`, `Ring`, `SupplyBar`, `SparkBars`.
6. Vitest unit tests + RTL smoke tests for each primitive.
### Phase B — App shell
1. Rewrite `Sidebar` with grouped nav, icons, active-route detection via `usePathname`, footer.
2. Rewrite `TopBar` with title/subtitle/crumbs slots, search, theme toggle, notifications.
3. Add `PageHeaderContext` (or a header slot mechanism) so pages can set the topbar content.
4. Update `(dashboard)/layout.tsx` grid + `<main>` styling.
5. Snapshot/RTL tests for shell.
### Phase C — Dashboard
1. Re-implement `/dashboard` with hero + ring + cards using real data where available, skeletons elsewhere.
2. Wire "Running low" to existing cabinet endpoint; "Pending orders" to purchases; "Activity" to activity endpoint.
3. Tests: render with seeded SWR cache.
### Phase D — Medicine pages
1. Port Cabinet, Library, Regimens, Organizer, Activity, Schedule & Log one at a time.
2. Each PR: lift JSX from the mockup, replace mock data with `services/*` SWR hooks, add tests.
### Phase E — Commerce + settings
1. Port Refills (new route), Purchases, Prices, Stores, Settings.
2. Add accent picker UI in Settings.
---
## 6. Tailwind v4 Token Mapping (concrete snippet)
In [packages/web/src/styles/globals.css](packages/web/src/styles/globals.css):
```css
@import 'tailwindcss';
@theme {
--font-sans: 'Inter Tight', ui-sans-serif, system-ui, sans-serif;
--font-display: 'Fraunces', ui-serif, Georgia, serif;
--font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
--color-bg: var(--bg);
--color-bg-elev: var(--bg-elev);
--color-bg-inset: var(--bg-inset);
--color-border: var(--border);
--color-border-strong: var(--border-strong);
--color-ink: var(--ink);
--color-ink-strong: var(--ink-strong);
--color-ink-muted: var(--ink-muted);
--color-ink-faint: var(--ink-faint);
--color-brand: var(--brand);
--color-brand-deep: var(--brand-deep);
--color-brand-soft: var(--brand-soft);
--color-danger: var(--danger);
--color-warn: var(--warn);
--color-ok: var(--ok);
--color-info: var(--info);
--radius-xs: var(--r-xs);
--radius-sm: var(--r-sm);
--radius-md: var(--r-md);
--radius-lg: var(--r-lg);
--radius-xl: var(--r-xl);
}
:root {
/* paste the :root block from docs/design/styles/tokens.css */
}
[data-theme='dark'] {
/* paste the dark block */
}
```
This lets us write `bg-bg-elev text-ink-strong border-border rounded-lg shadow-md` while still being able to use the raw `var(--brand)` inside inline SVGs (matching the mockup's pattern).
---
## 7. Risks & Mitigations
| Risk | Mitigation |
| --------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- |
| FOUC on theme switch / SSR mismatch | Inline script in `<head>` reads `localStorage` and sets `data-theme` before React hydrates. Mark theme-dependent UI as client-only when needed. |
| Mockup uses inline `style={{...var(--viz-X)...}}` heavily | Keep that pattern in components; tokens are CSS vars so this works fine. |
| Real data shape differs from mock data | For each card, define a small typed view-model and a transformer from API DTO; render skeletons when data is unavailable. |
| Tailwind v4 `@theme` + custom CSS vars interplay | Verified above: declare CSS vars in `:root`/`[data-theme=dark]`, then map them to `--color-*` inside `@theme` so utilities pick them up. |
| Test snapshots churn | Co-locate component tests, prefer RTL queries by role/text over snapshots; use snapshots only for the icon set. |
| Scope creep | Strictly follow the phased rollout; each phase is independently mergeable. |
---
## 8. Out-of-Scope Follow-ups
- `⌘K` command palette (search input is visual-only initially).
- Real notification feed.
- Per-user accent persistence in DB (initially `localStorage` only).
- Mobile drawer for the sidebar (mockup is desktop-first; add a `< 900px` breakpoint that collapses to a top hamburger).
- Animations beyond the existing CSS transitions.
---
## 9. Definition of Done (per phase)
- All new components have unit tests; coverage for `packages/web` does not regress.
- `npm run lint` and `npm run typecheck` pass at the workspace root.
- Visual parity verified against the relevant screenshot in `docs/design/screenshots/`.
- No usage of `any`; all view-models typed; all client-only files marked `'use client'`.
- No regressions in existing E2E tests.

124
docs/phases/phase-5-product-library.md
View file

@ -16,6 +16,12 @@
6. LLM provider interface (`ILlmProvider`) with no-op implementation
7. "Smart Add" endpoint placeholder
## Design Principles
- **Metric-only storage**: Products store nutrition relative to a metric serving (`g`, `ml`) or a discrete unit (`piece`, `slice`). Imperial/volume cooking units (oz, cup, tbsp, tsp) are a recipe-input concern and are normalized to metric in Phase 6 before persistence. This keeps nutrition math density-free at the product level.
- **Per-household catalog**: Every product is owned by exactly one household. There is no cross-household sharing in this phase; a global/public catalog can be added later via an explicit seed dataset.
- **Soft delete**: Deletes set `deletedAt` rather than removing rows, so historical recipes/pantry/grocery references stay resolvable.
---
## Data Model
@ -29,18 +35,19 @@ export interface Product {
householdId: string;
name: string;
brand?: string;
barcode?: string;
barcode?: string; // EAN-13 / UPC-A, digits only
category: ProductCategory;
servingSize: number;
servingUnit: ServingUnit;
nutrition: NutritionInfo;
servingSize: number; // quantity of one serving in `servingUnit`
servingUnit: ServingUnit; // metric or discrete only
densityGPerMl?: number; // optional, used by Phase 6 to convert volume cooking units
nutrition: NutritionInfo; // values are PER serving (size = servingSize servingUnit)
tags: string[];
imageUrl?: string;
isPublic: boolean; // Visible to all households (for shared catalog)
source: ProductSource; // 'manual' | 'barcode_lookup' | 'llm' | 'import'
source: ProductSource;
createdBy: string; // userId
createdAt: Date;
updatedAt: Date;
deletedAt?: Date; // soft delete
}
export interface NutritionInfo {
@ -81,14 +88,14 @@ export enum ProductCategory {
export enum ServingUnit {
GRAMS = 'g',
MILLILITERS = 'ml',
OUNCES = 'oz',
CUPS = 'cup',
TABLESPOONS = 'tbsp',
TEASPOONS = 'tsp',
PIECES = 'piece',
SLICES = 'slice',
}
// Note: imperial/volume cooking units (oz, cup, tbsp, tsp) are intentionally
// excluded. Recipes may receive them as input in Phase 6 and convert to metric
// before persisting. See `phase-6-recipes.md` for the conversion rules.
export enum ProductSource {
MANUAL = 'manual',
BARCODE_LOOKUP = 'barcode_lookup',
@ -104,11 +111,13 @@ export enum ProductSource {
{ name: 'text', brand: 'text', tags: 'text' }
// Compound indexes
{ householdId: 1, category: 1 }
{ householdId: 1, barcode: 1 } // unique within household
{ householdId: 1, deletedAt: 1, category: 1 }
{ householdId: 1, barcode: 1 } // partial index where barcode exists & deletedAt is null; unique within household
{ householdId: 1, name: 1, brand: 1 } // near-unique for dedup
```
All list/search queries filter `deletedAt: { $exists: false }` (or `null`).
---
## API Endpoints
@ -126,15 +135,22 @@ export enum ProductSource {
| POST | `/products/import` | Bulk import from CSV/JSON | admin |
| POST | `/products/smart-add` | LLM-powered add from text/image | member |
Notes:
- `DELETE /products/:id` is a soft delete; the product is hidden from listings but remains resolvable by id for historical references in recipes, pantry, and grocery.
- `POST /products` rejects payloads whose `barcode` collides with an existing non-deleted product in the household (409 `ConflictError`).
### Query Parameters for GET `/products`
```
?q=chicken # Full-text search
?q=chicken # Full-text search (name, brand, tags)
&category=meat # Filter by category
&tags=organic,fresh # Filter by tags (AND)
&cursor=abc123 # Cursor-based pagination
&barcode=0123456789012 # Exact barcode match
&includeDeleted=false # Default false; admins can pass true
&cursor=abc123 # Cursor-based pagination (opaque)
&limit=20 # Page size (max 100)
&sort=name|-updatedAt # Sort field, prefix - for desc
&sort=name|-updatedAt # Sort field, prefix - for desc; default -updatedAt
```
### Response Shape
@ -157,30 +173,40 @@ interface PaginatedResponse<T> {
### 5.1 — Shared Types & Validation
- Add all types above to `packages/shared/src/types/product.ts`
- Add enums to `packages/shared/src/enums/`
- Create Zod schemas:
- `CreateProductSchema` — validates create payload
- `UpdateProductSchema` — partial, validates update payload
- `ProductQuerySchema` — validates query params
- Add enums to `packages/shared/src/enums/product.enums.ts` (`ProductCategory`, `ServingUnit`, `ProductSource`)
- Create Zod schemas in `packages/shared/src/validation/product.validation.ts`:
- `CreateProductSchema` — validates create payload; `servingSize > 0`; `nutrition` macros `>= 0`; `barcode` matches `/^\d{8,14}$/`
- `UpdateProductSchema` — `CreateProductSchema.partial()`
- `ProductQuerySchema` — validates query params; `limit` clamped to `[1, 100]`, default 20
- `ImportProductsSchema` — array of `CreateProductSchema` (for JSON import)
- All schemas imported from `'zod/v4'`; enums use `z.enum(Object.values(...))`.
### 5.2 — Mongoose Schema & Repository
- `packages/api/src/modules/products/schemas/product.schema.ts`
- `packages/api/src/modules/products/schemas/product.schema.ts` — Mongoose schema with `timestamps: true`, `deletedAt` index, partial unique index on `(householdId, barcode)`.
- `ProductRepository` with:
- `findByHousehold(householdId, query)` — supports text search, filters, cursor pagination
- `findByBarcode(householdId, barcode)`
- `findByHousehold(householdId, query)` — text search, filters, cursor pagination, excludes soft-deleted
- `findById(id, householdId)` — also returns soft-deleted (for historical resolution)
- `findByBarcode(householdId, barcode)` — excludes soft-deleted
- `findByIds(householdId, ids[])` — batch fetch for recipe/pantry resolution
- `create(data)`
- `update(id, householdId, data)`
- `softDelete(id, householdId)`
- `bulkCreate(items[])`
- `softDelete(id, householdId)` — sets `deletedAt`
- `bulkCreate(householdId, items[])` — uses `insertMany` with `ordered: false`
- All read queries use `.lean().exec()`.
### 5.3 — Barcode Lookup Service
- `BarcodeService`:
- First check local DB for matching barcode
- If not found, query Open Food Facts API (`https://world.openfoodfacts.org/api/v2/product/{barcode}`)
- Map OFF response to `Product` shape
- Cache results in local DB with `source: 'barcode_lookup'`
- First check local DB for matching barcode (per household)
- If not found, call Open Food Facts API: `https://world.openfoodfacts.org/api/v2/product/{barcode}`
- Map OFF response to `Product` shape:
- `product_name` → `name`; `brands` (first) → `brand`; `categories_tags` → derived `ProductCategory`
- Nutrition normalized to per-serving (`g` or `ml`) using `serving_size` / `serving_quantity` from OFF; fall back to per-100g if absent
- Drop fields with no usable value (do not fabricate zeroes)
- Cache result in local DB with `source: 'barcode_lookup'`, owned by the requesting household
- Failures (network, 404, malformed): return `{ found: false }`; do not throw
- Outbound HTTP via `undici` with a 5s timeout and a configurable User-Agent (`MeshiTrack/<version> (+self-hosted)`)
### 5.4 — LLM Provider Interface
@ -214,38 +240,46 @@ export const LLM_PROVIDER = Symbol('LLM_PROVIDER');
### 5.6 — Import Endpoint
- `POST /products/import` accepts multipart CSV or JSON file
- Validate each row against `CreateProductSchema`
- Return summary: `{ imported: N, skipped: M, errors: [...] }`
- CSV column mapping: `name, brand, barcode, category, servingSize, servingUnit, calories, protein, carbs, fat, ...`
- `POST /products/import` accepts multipart CSV or JSON file (max 5 MB, 5000 rows)
- Validate each row against `CreateProductSchema`; reject rows with imperial `servingUnit` values with a clear error message
- De-dup by `(householdId, barcode)` and `(householdId, name, brand)`; existing matches are reported as `skipped`
- Return summary: `{ imported: N, skipped: M, errors: [{ row, message }] }`
- CSV column mapping: `name, brand, barcode, category, servingSize, servingUnit, densityGPerMl, calories, protein, carbs, fat, fiber, sugar, sodium, saturatedFat, cholesterol, tags`
- `tags` is a `;`-separated list
- `servingUnit` ∈ `{g, ml, piece, slice}`
### 5.7 — Web UI: Product Library
- `/products` page:
- Search bar with debounced full-text search
- `/products` page (Server Component for initial fetch; client island for filters):
- Search bar with debounced full-text search (300ms)
- Category filter dropdown
- Tag filter chips
- Product grid/list view (toggle)
- Each product card shows: name, brand, category icon, calories/serving
- Product grid/list view (toggle, persisted in `localStorage`)
- Each product card shows: name, brand, category icon, calories per serving, serving (`100 g`, `250 ml`, `1 piece`)
- Add/Edit product modal:
- Form fields for all product properties
- Form fields for all product properties; `servingUnit` select limited to `g | ml | piece | slice`
- Nutrition input section with per-serving values
- Barcode field with "Lookup" button
- Optional `densityGPerMl` field (only relevant for liquids/pastes)
- Barcode field with "Lookup" button (calls `/products/barcode/:code`)
- "Smart Add" tab (text input or image upload)
- Import dialog: file upload with preview and error display
- Import dialog: file upload with preview, row count, and error display
---
## Acceptance Criteria
- [ ] Can create, read, update, delete products via API
- [ ] Full-text search returns relevant results
- [ ] Barcode lookup fetches from Open Food Facts when not in local DB
- [ ] Bulk import processes a CSV with 100+ products
- [ ] Can create, read, update, soft-delete products via API
- [ ] Soft-deleted products remain resolvable by id but excluded from listings
- [ ] `ServingUnit` is restricted to `g | ml | piece | slice`; imperial values are rejected at validation
- [ ] Full-text search returns relevant results across name, brand, tags
- [ ] Barcode lookup fetches from Open Food Facts when not in local DB and caches the result
- [ ] Barcode collisions within a household return 409
- [ ] Bulk import processes a CSV with 100+ products and reports per-row errors
- [ ] Web UI allows searching, filtering, adding, and editing products
- [ ] `ILlmProvider` interface is defined and injectable
- [ ] Smart Add endpoint returns graceful "not available" with NoOp provider
- [ ] Smart Add endpoint returns graceful `{ available: false }` with the NoOp provider
- [ ] All product queries are scoped to `householdId`
- [ ] Unit + integration tests meet coverage targets (100% lines/functions/statements, 90% branches)
---

43
docs/phases/phase-6-recipes.md
View file

@ -50,13 +50,21 @@ export interface Recipe {
export interface RecipeIngredient {
productId: string; // Reference to Product
productName: string; // Denormalized for display
quantity: number;
unit: ServingUnit;
quantity: number; // stored in metric (g | ml) or as a discrete count
unit: RecipeUnit; // metric/discrete only after normalization
originalQuantity?: number; // optional, preserved from import (e.g. 1)
originalUnit?: ImperialUnit | RecipeUnit; // optional, preserved from import (e.g. 'cup')
preparation?: string; // e.g., 'diced', 'minced', 'melted'
isOptional: boolean;
nutritionContribution: NutritionInfo; // Per-ingredient computed nutrition
}
// Storage units for recipe ingredients — same set as `ServingUnit` in Phase 5.
export type RecipeUnit = 'g' | 'ml' | 'piece' | 'slice';
// Accepted at input/import only; converted to `RecipeUnit` before persistence.
export type ImperialUnit = 'oz' | 'lb' | 'cup' | 'tbsp' | 'tsp' | 'fl_oz';
export interface RecipeStep {
order: number;
instruction: string;
@ -143,7 +151,7 @@ class NutritionCalculatorService {
/**
* For each ingredient:
* 1. Lookup the product by productId
* 2. Convert ingredient quantity/unit to product's servingUnit
* 2. Convert ingredient quantity/unit to product's servingUnit (already metric)
* 3. Calculate nutrition proportionally: (ingredient_qty / serving_size) * nutrition_per_serving
* 4. Sum across all ingredients → totalNutrition
* 5. Divide by servings → perServingNutrition
@ -160,17 +168,26 @@ class NutritionCalculatorService {
}
```
- Unit conversion helper: handle common conversions (g ↔ oz, ml ↔ cups, etc.)
- Not all conversions are possible (density-dependent) — log warning, use best approximation
- This is explicitly **informative, not clinical-grade accurate**
- Because products are stored in metric (`g | ml | piece | slice`), the calculator only needs to bridge metric ↔ metric and discrete ↔ metric (via `Product.servingSize`).
- Imperial input handling lives in `UnitConversionService` (see 6.2a) and runs **before** the calculator at create/update/import time.
### 6.2a — Unit Conversion Service
- `UnitConversionService.toMetric(quantity, unit, product)` returns `{ quantity, unit: RecipeUnit }`.
- Mass conversions (exact): `oz → g` (× 28.3495), `lb → g` (× 453.592).
- Volume conversions (exact, US customary): `tsp → ml` (× 4.92892), `tbsp → ml` (× 14.7868), `fl_oz → ml` (× 29.5735), `cup → ml` (× 236.588).
- Mass ↔ volume conversions require `product.densityGPerMl`. If absent, the service returns an error tagged `MISSING_DENSITY` and the route returns 422 with the offending ingredient so the user can either supply a density on the product or restate the quantity in the product's native unit.
- Discrete units (`piece`, `slice`) cannot be converted from imperial — reject at validation.
- This service is **input-side only**: ingredients persisted on a recipe are always already in `RecipeUnit`.
### 6.3 — Recipe CRUD with Auto-Calculation
- On `POST /recipes` and `PATCH /recipes/:id`:
1. Validate ingredients exist in product library
2. Call `NutritionCalculatorService.calculateRecipeNutrition()`
3. Call `NutritionCalculatorService.generateWarnings()`
4. Store computed `totalNutrition`, `perServingNutrition`, `warnings` on document
1. Validate ingredients exist in product library (including soft-deleted)
2. Run each ingredient through `UnitConversionService.toMetric()` so persisted `unit` is always `RecipeUnit`; preserve the user's original input as `originalQuantity`/`originalUnit` for display
3. Call `NutritionCalculatorService.calculateRecipeNutrition()`
4. Call `NutritionCalculatorService.generateWarnings()`
5. Store computed `totalNutrition`, `perServingNutrition`, `warnings` on document
- On product nutrition update (Phase 5 edit), trigger background recalculation:
- Find all recipes where `ingredients[].productId == updatedProductId`
- Recalculate each recipe's nutrition
@ -186,9 +203,9 @@ class NutritionCalculatorService {
- `POST /recipes/import-text`:
- Accepts `{ text: string }` (pasted recipe)
- Calls `ILlmProvider.parseRecipe(text)`
- LLM returns structured: `{ name, servings, ingredients[]: { name, quantity, unit }, steps[] }`
- Service attempts to match ingredient names to existing products (fuzzy match by name)
- Returns structured recipe for user review — unmatched ingredients flagged for manual product creation
- LLM returns structured: `{ name, servings, ingredients[]: { name, quantity, unit }, steps[] }` where `unit` may be imperial
- Service runs each ingredient through `UnitConversionService.toMetric()` and matches names to existing products (fuzzy match by name)
- Returns the structured recipe for user review — unmatched ingredients and `MISSING_DENSITY` failures are flagged for manual resolution; nothing is persisted yet
- `POST /recipes/import-url`:
- Calls `ILlmProvider.parseRecipeFromUrl(url)`
- Same flow as text import

36
packages/api/src/modules/cabinet-events/cabinet-events.repository.test.ts
View file

@ -235,9 +235,7 @@ describe(CabinetEventsRepository.name, () => {
];
const byPeriod = [{ _id: '2024-01', totalSpent: 100 }];
mockAggregate
.mockResolvedValueOnce(byMedicine)
.mockResolvedValueOnce(byPeriod);
mockAggregate.mockResolvedValueOnce(byMedicine).mockResolvedValueOnce(byPeriod);
const result = await repo.getSpendingSummary('hh1', { period: 'month' });
@ -256,9 +254,7 @@ describe(CabinetEventsRepository.name, () => {
});
it('returns null currency when no medicine data', async () => {
mockAggregate
.mockResolvedValueOnce([])
.mockResolvedValueOnce([]);
mockAggregate.mockResolvedValueOnce([]).mockResolvedValueOnce([]);
const result = await repo.getSpendingSummary('hh1', { period: 'month' });
@ -269,9 +265,7 @@ describe(CabinetEventsRepository.name, () => {
});
it('filters by medicineId', async () => {
mockAggregate
.mockResolvedValueOnce([])
.mockResolvedValueOnce([]);
mockAggregate.mockResolvedValueOnce([]).mockResolvedValueOnce([]);
await repo.getSpendingSummary('hh1', { period: 'month', medicineId: 'med-1' });
@ -279,9 +273,7 @@ describe(CabinetEventsRepository.name, () => {
});
it('filters by startDate only', async () => {
mockAggregate
.mockResolvedValueOnce([])
.mockResolvedValueOnce([]);
mockAggregate.mockResolvedValueOnce([]).mockResolvedValueOnce([]);
await repo.getSpendingSummary('hh1', {
period: 'month',
@ -292,9 +284,7 @@ describe(CabinetEventsRepository.name, () => {
});
it('filters by endDate only', async () => {
mockAggregate
.mockResolvedValueOnce([])
.mockResolvedValueOnce([]);
mockAggregate.mockResolvedValueOnce([]).mockResolvedValueOnce([]);
await repo.getSpendingSummary('hh1', {
period: 'month',
@ -305,9 +295,7 @@ describe(CabinetEventsRepository.name, () => {
});
it('filters by both startDate and endDate', async () => {
mockAggregate
.mockResolvedValueOnce([])
.mockResolvedValueOnce([]);
mockAggregate.mockResolvedValueOnce([]).mockResolvedValueOnce([]);
await repo.getSpendingSummary('hh1', {
period: 'month',
@ -319,9 +307,7 @@ describe(CabinetEventsRepository.name, () => {
});
it('uses quarter date format', async () => {
mockAggregate
.mockResolvedValueOnce([])
.mockResolvedValueOnce([]);
mockAggregate.mockResolvedValueOnce([]).mockResolvedValueOnce([]);
await repo.getSpendingSummary('hh1', { period: 'quarter' });
@ -329,9 +315,7 @@ describe(CabinetEventsRepository.name, () => {
});
it('uses year date format', async () => {
mockAggregate
.mockResolvedValueOnce([])
.mockResolvedValueOnce([]);
mockAggregate.mockResolvedValueOnce([]).mockResolvedValueOnce([]);
await repo.getSpendingSummary('hh1', { period: 'year' });
@ -350,9 +334,7 @@ describe(CabinetEventsRepository.name, () => {
currency: null,
},
];
mockAggregate
.mockResolvedValueOnce(byMedicine)
.mockResolvedValueOnce([]);
mockAggregate.mockResolvedValueOnce(byMedicine).mockResolvedValueOnce([]);
const result = await repo.getSpendingSummary('hh1', { period: 'month' });

17
packages/api/src/modules/cabinet-events/cabinet-events.repository.ts
View file

@ -130,7 +130,11 @@ export class CabinetEventsRepository {
{
$addFields: {
avgUnitPrice: {
$cond: [{ $gt: ['$totalQuantity', 0] }, { $divide: ['$totalSpent', '$totalQuantity'] }, 0],
$cond: [
{ $gt: ['$totalQuantity', 0] },
{ $divide: ['$totalSpent', '$totalQuantity'] },
0,
],
},
},
},
@ -153,7 +157,7 @@ export class CabinetEventsRepository {
0,
);
const currency =
byMedicine.length > 0 ? (byMedicine[0].currency as string | null) ?? null : null;
byMedicine.length > 0 ? ((byMedicine[0].currency as string | null) ?? null) : null;
return {
totalSpent,
@ -174,7 +178,8 @@ export class CabinetEventsRepository {
}
public async getAvgUnitPriceByMedicine(householdId: string, medicineIds: string[]) {
if (medicineIds.length === 0) return new Map<string, { avgUnitPrice: number; currency: string | null }>();
if (medicineIds.length === 0)
return new Map<string, { avgUnitPrice: number; currency: string | null }>();
const results = await CabinetEventModel.aggregate([
{
@ -196,7 +201,11 @@ export class CabinetEventsRepository {
{
$addFields: {
avgUnitPrice: {
$cond: [{ $gt: ['$totalQuantity', 0] }, { $divide: ['$totalSpent', '$totalQuantity'] }, 0],
$cond: [
{ $gt: ['$totalQuantity', 0] },
{ $divide: ['$totalSpent', '$totalQuantity'] },
0,
],
},
},
},

22
packages/api/src/modules/cabinet-events/cabinet-events.routes.test.ts
View file

@ -234,11 +234,14 @@ describe('cabinet-events.routes', () => {
});
expect(res.statusCode).toBe(200);
expect(mockListEvents).toHaveBeenCalledWith('hh1', expect.objectContaining({
expect(mockListEvents).toHaveBeenCalledWith(
'hh1',
expect.objectContaining({
medicineId: 'med-1',
eventType: 'purchased',
limit: 10,
}));
}),
);
});
});
@ -276,10 +279,14 @@ describe('cabinet-events.routes', () => {
});
expect(res.statusCode).toBe(200);
expect(mockGetEventsByItem).toHaveBeenCalledWith('hh1', 'ci-1', expect.objectContaining({
expect(mockGetEventsByItem).toHaveBeenCalledWith(
'hh1',
'ci-1',
expect.objectContaining({
limit: 5,
cursor: 'abc',
}));
}),
);
});
it('handles ObjectId and Date objects in by-item response', async () => {
@ -356,10 +363,13 @@ describe('cabinet-events.routes', () => {
});
expect(res.statusCode).toBe(200);
expect(mockGetSpendingSummary).toHaveBeenCalledWith('hh1', expect.objectContaining({
expect(mockGetSpendingSummary).toHaveBeenCalledWith(
'hh1',
expect.objectContaining({
period: 'quarter',
medicineId: 'med-1',
}));
}),
);
});
it('returns empty summary with null currency', async () => {

5
packages/api/src/modules/cabinet-events/cabinet-events.routes.ts
View file

@ -142,10 +142,7 @@ export default fp(
},
handler: async (request, reply) => {
const service = fastify.diContainer.resolve('cabinetEventsService');
const summary = await service.getSpendingSummary(
request.params.householdId,
request.query,
);
const summary = await service.getSpendingSummary(request.params.householdId, request.query);
return reply.send(summary);
},
});

4
packages/api/src/modules/cabinet-events/cabinet-events.service.test.ts
View file

@ -136,7 +136,9 @@ describe(CabinetEventsService.name, () => {
const result = await service.getAvgUnitPrices('hh1', ['med-1']);
expect(result).toEqual(expected);
expect(mockCabinetEventsRepo.getAvgUnitPriceByMedicine).toHaveBeenCalledWith('hh1', ['med-1']);
expect(mockCabinetEventsRepo.getAvgUnitPriceByMedicine).toHaveBeenCalledWith('hh1', [
'med-1',
]);
});
});
});

5
packages/api/src/modules/cabinet-events/cabinet-events.service.ts
View file

@ -1,4 +1,7 @@
import type { CabinetEventsRepository, CreateCabinetEventData } from './cabinet-events.repository.js';
import type {
CabinetEventsRepository,
CreateCabinetEventData,
} from './cabinet-events.repository.js';
import type { CabinetEventQueryInput, SpendingSummaryQueryInput } from '@meshitrack/shared';
interface Deps {

6
packages/api/src/modules/cabinet/cabinet.repository.ts
View file

@ -1,5 +1,9 @@
import { CabinetItemModel } from '../../schemas/cabinet-item.schema.js';
import type { CabinetItemStatus, CreateCabinetItemInput, UpdateCabinetItemInput } from '@meshitrack/shared';
import type {
CabinetItemStatus,
CreateCabinetItemInput,
UpdateCabinetItemInput,
} from '@meshitrack/shared';
interface FindByHouseholdQuery {
medicineId?: string;

6
packages/api/src/modules/cabinet/cabinet.routes.ts
View file

@ -249,7 +249,11 @@ export default fp(
},
handler: async (request, reply) => {
const service = fastify.diContainer.resolve('cabinetService');
await service.delete(request.params.id, request.params.householdId, request.user.keycloakId);
await service.delete(
request.params.id,
request.params.householdId,
request.user.keycloakId,
);
return reply.status(204).send();
},
});

92
packages/api/src/modules/cabinet/cabinet.service.test.ts
View file

@ -239,7 +239,12 @@ describe(CabinetService.name, () => {
describe('update', () => {
it('updates and returns item', async () => {
mockCabinetRepo.findById.mockResolvedValue({ _id: 'ci-1', quantity: 30, medicineId: 'med-1', medicineName: 'Test' });
mockCabinetRepo.findById.mockResolvedValue({
_id: 'ci-1',
quantity: 30,
medicineId: 'med-1',
medicineName: 'Test',
});
const updated = { _id: 'ci-1', quantity: 25 };
mockCabinetRepo.update.mockResolvedValue(updated);
@ -249,7 +254,12 @@ describe(CabinetService.name, () => {
});
it('logs ADJUSTED event when quantity changes', async () => {
mockCabinetRepo.findById.mockResolvedValue({ _id: 'ci-1', quantity: 30, medicineId: 'med-1', medicineName: 'Test' });
mockCabinetRepo.findById.mockResolvedValue({
_id: 'ci-1',
quantity: 30,
medicineId: 'med-1',
medicineName: 'Test',
});
mockCabinetRepo.update.mockResolvedValue({ _id: 'ci-1', quantity: 25 });
await service.update('ci-1', 'hh1', { quantity: 25 }, 'user-1');
@ -265,7 +275,12 @@ describe(CabinetService.name, () => {
});
it('does not log event when quantity unchanged', async () => {
mockCabinetRepo.findById.mockResolvedValue({ _id: 'ci-1', quantity: 30, medicineId: 'med-1', medicineName: 'Test' });
mockCabinetRepo.findById.mockResolvedValue({
_id: 'ci-1',
quantity: 30,
medicineId: 'med-1',
medicineName: 'Test',
});
mockCabinetRepo.update.mockResolvedValue({ _id: 'ci-1', quantity: 30 });
await service.update('ci-1', 'hh1', { notes: 'updated' }, 'user-1');
@ -282,7 +297,12 @@ describe(CabinetService.name, () => {
});
it('throws NotFoundError when update returns null', async () => {
mockCabinetRepo.findById.mockResolvedValue({ _id: 'ci-1', quantity: 30, medicineId: 'med-1', medicineName: 'Test' });
mockCabinetRepo.findById.mockResolvedValue({
_id: 'ci-1',
quantity: 30,
medicineId: 'med-1',
medicineName: 'Test',
});
mockCabinetRepo.update.mockResolvedValue(null);
await expect(service.update('ci-1', 'hh1', { quantity: 25 }, 'user-1')).rejects.toThrow(
@ -293,7 +313,12 @@ describe(CabinetService.name, () => {
describe('adjustQuantity', () => {
it('adjusts quantity and returns item', async () => {
mockCabinetRepo.findById.mockResolvedValue({ _id: 'ci-1', quantity: 30, medicineId: 'med-1', medicineName: 'Test' });
mockCabinetRepo.findById.mockResolvedValue({
_id: 'ci-1',
quantity: 30,
medicineId: 'med-1',
medicineName: 'Test',
});
const updated = { _id: 'ci-1', quantity: 27 };
mockCabinetRepo.adjustQuantity.mockResolvedValue(updated);
@ -303,7 +328,12 @@ describe(CabinetService.name, () => {
});
it('logs ADJUSTED event', async () => {
mockCabinetRepo.findById.mockResolvedValue({ _id: 'ci-1', quantity: 30, medicineId: 'med-1', medicineName: 'Test' });
mockCabinetRepo.findById.mockResolvedValue({
_id: 'ci-1',
quantity: 30,
medicineId: 'med-1',
medicineName: 'Test',
});
mockCabinetRepo.adjustQuantity.mockResolvedValue({ _id: 'ci-1', quantity: 27 });
await service.adjustQuantity('ci-1', 'hh1', -3, 'user-1', 'took some');
@ -334,7 +364,12 @@ describe(CabinetService.name, () => {
});
it('throws NotFoundError when adjust returns null', async () => {
mockCabinetRepo.findById.mockResolvedValue({ _id: 'ci-1', quantity: 30, medicineId: 'med-1', medicineName: 'Test' });
mockCabinetRepo.findById.mockResolvedValue({
_id: 'ci-1',
quantity: 30,
medicineId: 'med-1',
medicineName: 'Test',
});
mockCabinetRepo.adjustQuantity.mockResolvedValue(null);
await expect(service.adjustQuantity('ci-1', 'hh1', 5, 'user-1')).rejects.toThrow(
@ -357,7 +392,12 @@ describe(CabinetService.name, () => {
describe('delete', () => {
it('soft deletes item and logs DELETED event', async () => {
mockCabinetRepo.findById.mockResolvedValue({ _id: 'ci-1', quantity: 10, medicineId: 'med-1', medicineName: 'Test' });
mockCabinetRepo.findById.mockResolvedValue({
_id: 'ci-1',
quantity: 10,
medicineId: 'med-1',
medicineName: 'Test',
});
mockCabinetRepo.softDelete.mockResolvedValue({ _id: 'ci-1', isDeleted: true });
const result = await service.delete('ci-1', 'hh1', 'user-1');
@ -376,20 +416,34 @@ describe(CabinetService.name, () => {
it('throws NotFoundError when item does not exist', async () => {
mockCabinetRepo.findById.mockResolvedValue(null);
await expect(service.delete('ci-missing', 'hh1', 'user-1')).rejects.toThrow('Cabinet item not found');
await expect(service.delete('ci-missing', 'hh1', 'user-1')).rejects.toThrow(
'Cabinet item not found',
);
});
it('throws NotFoundError when softDelete returns null', async () => {
mockCabinetRepo.findById.mockResolvedValue({ _id: 'ci-1', quantity: 5, medicineId: 'med-1', medicineName: 'Test' });
mockCabinetRepo.findById.mockResolvedValue({
_id: 'ci-1',
quantity: 5,
medicineId: 'med-1',
medicineName: 'Test',
});
mockCabinetRepo.softDelete.mockResolvedValue(null);
await expect(service.delete('ci-1', 'hh1', 'user-1')).rejects.toThrow('Cabinet item not found');
await expect(service.delete('ci-1', 'hh1', 'user-1')).rejects.toThrow(
'Cabinet item not found',
);
});
});
describe('discard', () => {
it('discards item and logs DISCARDED event', async () => {
mockCabinetRepo.findById.mockResolvedValue({ _id: 'ci-1', quantity: 20, medicineId: 'med-1', medicineName: 'Test' });
mockCabinetRepo.findById.mockResolvedValue({
_id: 'ci-1',
quantity: 20,
medicineId: 'med-1',
medicineName: 'Test',
});
mockCabinetRepo.discard.mockResolvedValue({ _id: 'ci-1', quantity: 0, isDeleted: true });
const result = await service.discard('ci-1', 'hh1', 'user-1', 'expired', 'smelled off');
@ -409,7 +463,12 @@ describe(CabinetService.name, () => {
});
it('throws BadRequestError when quantity is zero', async () => {
mockCabinetRepo.findById.mockResolvedValue({ _id: 'ci-1', quantity: 0, medicineId: 'med-1', medicineName: 'Test' });
mockCabinetRepo.findById.mockResolvedValue({
_id: 'ci-1',
quantity: 0,
medicineId: 'med-1',
medicineName: 'Test',
});
await expect(service.discard('ci-1', 'hh1', 'user-1', 'expired')).rejects.toThrow(
'Cannot discard an item with zero quantity',
@ -425,7 +484,12 @@ describe(CabinetService.name, () => {
});
it('throws NotFoundError when discard returns null', async () => {
mockCabinetRepo.findById.mockResolvedValue({ _id: 'ci-1', quantity: 10, medicineId: 'med-1', medicineName: 'Test' });
mockCabinetRepo.findById.mockResolvedValue({
_id: 'ci-1',
quantity: 10,
medicineId: 'med-1',
medicineName: 'Test',
});
mockCabinetRepo.discard.mockResolvedValue(null);
await expect(service.discard('ci-1', 'hh1', 'user-1', 'expired')).rejects.toThrow(

20
packages/api/src/modules/cabinet/cabinet.service.ts
View file

@ -2,10 +2,7 @@ import type { CabinetRepository } from './cabinet.repository.js';
import type { MedicinesRepository } from '../medicines/medicines.repository.js';
import type { MedicineProductsRepository } from '../medicine-products/medicine-products.repository.js';
import type { CabinetEventsService } from '../cabinet-events/cabinet-events.service.js';
import {
CabinetEventType,
CabinetEventSourceType,
} from '@meshitrack/shared';
import { CabinetEventType, CabinetEventSourceType } from '@meshitrack/shared';
import type {
CreateCabinetItemInput,
UpdateCabinetItemInput,
@ -123,7 +120,12 @@ export class CabinetService {
return item;
}
public async update(id: string, householdId: string, data: UpdateCabinetItemInput, userId: string) {
public async update(
id: string,
householdId: string,
data: UpdateCabinetItemInput,
userId: string,
) {
const existing = await this.getById(id, householdId);
const updated = await this.cabinetRepository.update(id, householdId, data);
if (!updated) throw new NotFoundError('Cabinet item not found');
@ -203,7 +205,13 @@ export class CabinetService {
return deleted;
}
public async discard(id: string, householdId: string, userId: string, reason: string, notes?: string) {
public async discard(
id: string,
householdId: string,
userId: string,
reason: string,
notes?: string,
) {
const existing = await this.getById(id, householdId);
if (existing.quantity === 0) {
throw new BadRequestError('Cannot discard an item with zero quantity');

21
packages/api/src/modules/medicine-prices/medicine-prices.repository.test.ts
View file

@ -23,9 +23,13 @@ vi.mock('../../schemas/medicine-price.schema.js', () => {
class FakeModel {
data: unknown;
constructor(data: unknown) { this.data = data; }
constructor(data: unknown) {
this.data = data;
}
save = mockSave;
toObject() { return this.data; }
toObject() {
return this.data;
}
static find = vi.fn(() => chain());
static findOne = vi.fn(() => findOneChain());
static aggregate = vi.fn(() => aggregateChain());
@ -231,8 +235,17 @@ describe(MedicinePricesRepository.name, () => {
it('handles non-empty analytics results', async () => {
mockAggregate
.mockResolvedValueOnce([{ period: '2026-01', total: 50 }])
.mockResolvedValueOnce([{ medicineId: 'med-1', medicineName: 'Acetaminophen', totalSpent: 50, avgPricePerUnit: 0.1 }])
.mockResolvedValueOnce([{ storeId: 'st-1', storeName: 'Walgreens', totalSpent: 50, purchaseCount: 5 }])
.mockResolvedValueOnce([
{
medicineId: 'med-1',
medicineName: 'Acetaminophen',
totalSpent: 50,
avgPricePerUnit: 0.1,
},
])
.mockResolvedValueOnce([
{ storeId: 'st-1', storeName: 'Walgreens', totalSpent: 50, purchaseCount: 5 },
])
.mockResolvedValueOnce([]);
const result = await repo.getAnalytics('hh1', { period: 'month' });

44
packages/api/src/modules/medicine-prices/medicine-prices.repository.ts
View file

@ -1,5 +1,8 @@
import { MedicinePriceModel } from '../../schemas/medicine-price.schema.js';
import type { MedicinePriceHistoryQueryInput, MedicinePriceAnalyticsQueryInput } from '@meshitrack/shared';
import type {
MedicinePriceHistoryQueryInput,
MedicinePriceAnalyticsQueryInput,
} from '@meshitrack/shared';
export interface CreateMedicinePriceData {
householdId: string;
@ -93,11 +96,7 @@ export class MedicinePricesRepository {
}));
}
public async getLatestForMedicine(
householdId: string,
medicineId: string,
storeId?: string,
) {
public async getLatestForMedicine(householdId: string, medicineId: string, storeId?: string) {
const filter: Record<string, unknown> = { householdId, medicineId };
if (storeId) filter['storeId'] = storeId;
return MedicinePriceModel.findOne(filter).sort({ date: -1 }).lean().exec();
@ -132,7 +131,15 @@ export class MedicinePricesRepository {
},
{ $sort: { totalSpent: -1 } },
{ $limit: 10 },
{ $project: { _id: 0, medicineId: '$_id', medicineName: 1, totalSpent: 1, avgPricePerUnit: 1 } },
{
$project: {
_id: 0,
medicineId: '$_id',
medicineName: 1,
totalSpent: 1,
avgPricePerUnit: 1,
},
},
]).exec(),
MedicinePriceModel.aggregate([
@ -195,9 +202,26 @@ export class MedicinePricesRepository {
return {
spendingOverTime: spendingOverTime as { period: string; total: number }[],
topBySpending: topBySpending as { medicineId: string; medicineName: string; totalSpent: number; avgPricePerUnit: number }[],
spendingByStore: spendingByStore as { storeId: string; storeName: string; totalSpent: number; purchaseCount: number }[],
priceAlerts: priceAlerts as { medicineId: string; medicineName: string; storeName: string; previousPrice: number; currentPrice: number; changePercent: number }[],
topBySpending: topBySpending as {
medicineId: string;
medicineName: string;
totalSpent: number;
avgPricePerUnit: number;
}[],
spendingByStore: spendingByStore as {
storeId: string;
storeName: string;
totalSpent: number;
purchaseCount: number;
}[],
priceAlerts: priceAlerts as {
medicineId: string;
medicineName: string;
storeName: string;
previousPrice: number;
currentPrice: number;
changePercent: number;
}[],
};
}
}

22
packages/api/src/modules/medicine-prices/medicine-prices.routes.test.ts
View file

@ -18,17 +18,14 @@ vi.mock('jose', () => ({
}),
}));
const {
mockRecordPrice,
mockGetPriceHistory,
mockCompareStores,
mockGetAnalytics,
} = vi.hoisted(() => ({
const { mockRecordPrice, mockGetPriceHistory, mockCompareStores, mockGetAnalytics } = vi.hoisted(
() => ({
mockRecordPrice: vi.fn(),
mockGetPriceHistory: vi.fn(),
mockCompareStores: vi.fn(),
mockGetAnalytics: vi.fn(),
}));
}),
);
vi.mock('./medicine-prices.repository.js', () => ({
MedicinePricesRepository: class {
@ -198,11 +195,13 @@ describe('medicine-prices.routes', () => {
});
it('handles Date objects in response', async () => {
mockRecordPrice.mockResolvedValue(makeFakePriceRecord({
mockRecordPrice.mockResolvedValue(
makeFakePriceRecord({
_id: { toString: () => 'pr-obj' },
date: new Date('2026-01-15T00:00:00.000Z'),
createdAt: new Date('2026-01-15T00:00:00.000Z'),
}));
}),
);
const res = await app.inject({
method: 'POST',
@ -238,7 +237,10 @@ describe('medicine-prices.routes', () => {
});
it('passes query params to service', async () => {
mockGetPriceHistory.mockResolvedValue({ data: [], pagination: { cursor: null, hasMore: false } });
mockGetPriceHistory.mockResolvedValue({
data: [],
pagination: { cursor: null, hasMore: false },
});
await app.inject({
method: 'GET',

2
packages/api/src/modules/medicine-prices/medicine-prices.routes.ts
View file

@ -13,8 +13,6 @@ import {
} from '@meshitrack/shared';
import { MedicinePricesRepository } from './medicine-prices.repository.js';
import { MedicinePricesService } from './medicine-prices.service.js';
import { MedicineProductsRepository } from '../medicine-products/medicine-products.repository.js';
import { StoresRepository } from '../stores/stores.repository.js';
type AnyPriceDoc = {
_id: string | { toString: () => string };

27
packages/api/src/modules/medicine-prices/medicine-prices.service.test.ts
View file

@ -40,7 +40,10 @@ describe(MedicinePricesService.name, () => {
};
it('creates price record with computed pricePerUnit', async () => {
mockProductsRepo.findById.mockResolvedValue({ medicineName: 'Acetaminophen', brand: 'Tylenol' });
mockProductsRepo.findById.mockResolvedValue({
medicineName: 'Acetaminophen',
brand: 'Tylenol',
});
mockStoresRepo.findById.mockResolvedValue({ name: 'Walgreens' });
const record = { _id: 'pr-1', pricePerUnit: 0.1 };
mockPricesRepo.create.mockResolvedValue(record);
@ -49,7 +52,11 @@ describe(MedicinePricesService.name, () => {
expect(result).toEqual(record);
expect(mockPricesRepo.create).toHaveBeenCalledWith(
expect.objectContaining({ pricePerUnit: 0.1, medicineName: 'Acetaminophen', storeName: 'Walgreens' }),
expect.objectContaining({
pricePerUnit: 0.1,
medicineName: 'Acetaminophen',
storeName: 'Walgreens',
}),
);
});
@ -66,11 +73,18 @@ describe(MedicinePricesService.name, () => {
});
it('uses provided date when given', async () => {
mockProductsRepo.findById.mockResolvedValue({ medicineName: 'Acetaminophen', brand: 'Tylenol' });
mockProductsRepo.findById.mockResolvedValue({
medicineName: 'Acetaminophen',
brand: 'Tylenol',
});
mockStoresRepo.findById.mockResolvedValue({ name: 'Walgreens' });
mockPricesRepo.create.mockResolvedValue({ _id: 'pr-1' });
await service.recordPrice({ ...validInput, date: '2026-01-15T00:00:00.000Z' }, 'hh1', 'user-1');
await service.recordPrice(
{ ...validInput, date: '2026-01-15T00:00:00.000Z' },
'hh1',
'user-1',
);
expect(mockPricesRepo.create).toHaveBeenCalledWith(
expect.objectContaining({ date: new Date('2026-01-15T00:00:00.000Z') }),
@ -86,7 +100,10 @@ describe(MedicinePricesService.name, () => {
});
it('throws NotFoundError when store not found', async () => {
mockProductsRepo.findById.mockResolvedValue({ medicineName: 'Acetaminophen', brand: 'Tylenol' });
mockProductsRepo.findById.mockResolvedValue({
medicineName: 'Acetaminophen',
brand: 'Tylenol',
});
mockStoresRepo.findById.mockResolvedValue(null);
await expect(service.recordPrice(validInput, 'hh1', 'user-1')).rejects.toThrow(

6
packages/api/src/modules/medicine-prices/medicine-prices.service.ts
View file

@ -19,7 +19,11 @@ export class MedicinePricesService {
private readonly medicineProductsRepository: MedicineProductsRepository;
private readonly storesRepository: StoresRepository;
public constructor({ medicinePricesRepository, medicineProductsRepository, storesRepository }: Deps) {
public constructor({
medicinePricesRepository,
medicineProductsRepository,
storesRepository,
}: Deps) {
this.medicinePricesRepository = medicinePricesRepository;
this.medicineProductsRepository = medicineProductsRepository;
this.storesRepository = storesRepository;

4
packages/api/src/modules/medicine-products/medicine-products.routes.test.ts
View file

@ -179,7 +179,9 @@ describe('medicine-products.routes', () => {
});
it('includes concentration fields in response when present', async () => {
mockFindById.mockResolvedValue(makeFakeProduct({ concentration: 5, concentrationUnit: 'mg/ml' }));
mockFindById.mockResolvedValue(
makeFakeProduct({ concentration: 5, concentrationUnit: 'mg/ml' }),
);
const res = await app.inject({
method: 'GET',

5
packages/api/src/modules/organizer/organizer.repository.test.ts
View file

@ -74,7 +74,10 @@ describe(OrganizerRepository.name, () => {
});
it('sets hasMore when more items exist', async () => {
const items = Array.from({ length: 3 }, (_, i) => ({ _id: `fill-${i}`, regimenName: `R${i}` }));
const items = Array.from({ length: 3 }, (_, i) => ({
_id: `fill-${i}`,
regimenName: `R${i}`,
}));
mockFind.mockResolvedValue(items);
const result = await repo.findByHousehold('hh1', 'user-1', { limit: 2 });

19
packages/api/src/modules/organizer/organizer.routes.test.ts
View file

@ -76,9 +76,7 @@ function makeFakeFill(overrides = {}) {
quantityTaken: 7,
wasShort: false,
shortage: 0,
deductions: [
{ cabinetItemId: 'ci-1', quantityTaken: 7 },
],
deductions: [{ cabinetItemId: 'ci-1', quantityTaken: 7 }],
},
],
status: OrganizerFillStatus.COMPLETED,
@ -182,11 +180,15 @@ describe('organizer.routes', () => {
});
expect(res.statusCode).toBe(200);
expect(mockListFills).toHaveBeenCalledWith('hh1', 'kc-1', expect.objectContaining({
expect(mockListFills).toHaveBeenCalledWith(
'hh1',
'kc-1',
expect.objectContaining({
regimenId: 'reg-1',
status: OrganizerFillStatus.COMPLETED,
limit: 10,
}));
}),
);
});
it('handles ObjectId and Date serialization in fill response', async () => {
@ -439,7 +441,12 @@ describe('organizer.routes', () => {
expect(mockFill).toHaveBeenCalledWith(
'hh1',
'kc-1',
expect.objectContaining({ regimenId: 'reg-1', numberOfDays: 7, allowPartial: false, notes: 'test note' }),
expect.objectContaining({
regimenId: 'reg-1',
numberOfDays: 7,
allowPartial: false,
notes: 'test note',
}),
);
});
});

4
packages/api/src/modules/organizer/organizer.service.test.ts
View file

@ -82,7 +82,9 @@ describe(OrganizerService.name, () => {
const response = await service.listFills('hh1', 'user-1', { limit: 20 });
expect(response).toEqual(result);
expect(mockOrganizerRepo.findByHousehold).toHaveBeenCalledWith('hh1', 'user-1', { limit: 20 });
expect(mockOrganizerRepo.findByHousehold).toHaveBeenCalledWith('hh1', 'user-1', {
limit: 20,
});
});
});

19
packages/api/src/modules/organizer/organizer.service.ts
View file

@ -66,7 +66,12 @@ export class OrganizerService {
return fill;
}
public async preview(householdId: string, userId: string, regimenId: string, numberOfDays: number) {
public async preview(
householdId: string,
userId: string,
regimenId: string,
numberOfDays: number,
) {
const regimen = await this.regimensService.getById(regimenId, householdId, userId);
if (!regimen.isActive) {
throw new BadRequestError('Regimen is not active');
@ -132,7 +137,12 @@ export class OrganizerService {
}
public async fill(householdId: string, userId: string, input: OrganizerFillInput) {
const previewResult = await this.preview(householdId, userId, input.regimenId, input.numberOfDays);
const previewResult = await this.preview(
householdId,
userId,
input.regimenId,
input.numberOfDays,
);
if (!input.allowPartial && previewResult.hasShortages) {
throw new BadRequestError(
@ -243,7 +253,10 @@ export class OrganizerService {
for (const item of fill.items) {
for (const deduction of item.deductions) {
// Get current quantity before restoring
const current = await this.cabinetRepository.findById(deduction.cabinetItemId, householdId);
const current = await this.cabinetRepository.findById(
deduction.cabinetItemId,
householdId,
);
const quantityBefore = current?.quantity ?? 0;
await this.cabinetRepository.adjustQuantity(

22
packages/api/src/modules/purchases/purchases.repository.test.ts
View file

@ -21,9 +21,13 @@ vi.mock('../../schemas/purchase.schema.js', () => {
class FakeModel {
data: unknown;
constructor(data: unknown) { this.data = data; }
constructor(data: unknown) {
this.data = data;
}
save = mockSave;
toObject() { return this.data; }
toObject() {
return this.data;
}
static find = vi.fn(() => findChain());
static findOne = vi.fn(() => findOneChain());
static findOneAndUpdate = vi.fn(() => updateChain());
@ -54,7 +58,15 @@ describe(PurchasesRepository.name, () => {
describe('create', () => {
it('saves and returns plain object', async () => {
const data = { householdId: 'hh1', storeId: 'st-1', storeName: 'CVS', status: 'in_cabinet', items: [makeItem()], purchasedAt: new Date(), createdBy: 'u-1' };
const data = {
householdId: 'hh1',
storeId: 'st-1',
storeName: 'CVS',
status: 'in_cabinet',
items: [makeItem()],
purchasedAt: new Date(),
createdBy: 'u-1',
};
mockSave.mockResolvedValue({ toObject: () => data });
const result = await repo.create(data);
@ -104,9 +116,7 @@ describe(PurchasesRepository.name, () => {
await repo.findByHousehold('hh1', { limit: 20, storeId: 'st-1' });
expect(PurchaseModel.find).toHaveBeenCalledWith(
expect.objectContaining({ storeId: 'st-1' }),
);
expect(PurchaseModel.find).toHaveBeenCalledWith(expect.objectContaining({ storeId: 'st-1' }));
});
it('applies cursor filter when provided', async () => {

4
packages/api/src/modules/purchases/purchases.repository.ts
View file

@ -53,9 +53,7 @@ export class PurchasesRepository {
const hasMore = items.length > limit;
const data = hasMore ? items.slice(0, limit) : items;
const cursor =
data.length > 0
? Buffer.from(data[data.length - 1]._id.toString()).toString('base64')
: null;
data.length > 0 ? Buffer.from(data[data.length - 1]._id.toString()).toString('base64') : null;
return { data, pagination: { cursor: hasMore ? cursor : null, hasMore } };
}

13
packages/api/src/modules/purchases/purchases.routes.test.ts
View file

@ -18,21 +18,16 @@ vi.mock('jose', () => ({
}),
}));
const {
mockList,
mockGetById,
mockCreate,
mockUpdate,
mockReceive,
mockDelete,
} = vi.hoisted(() => ({
const { mockList, mockGetById, mockCreate, mockUpdate, mockReceive, mockDelete } = vi.hoisted(
() => ({
mockList: vi.fn(),
mockGetById: vi.fn(),
mockCreate: vi.fn(),
mockUpdate: vi.fn(),
mockReceive: vi.fn(),
mockDelete: vi.fn(),
}));
}),
);
vi.mock('./purchases.repository.js', () => ({
PurchasesRepository: class {

6
packages/api/src/modules/purchases/purchases.routes.ts
View file

@ -48,11 +48,7 @@ type AnyPurchase = {
function toItemResponse(item: AnyPurchaseItem) {
return {
_id: item._id
? typeof item._id === 'string'
? item._id
: item._id.toString()
: '',
_id: item._id ? (typeof item._id === 'string' ? item._id : item._id.toString()) : '',
...(item.medicineProductId ? { medicineProductId: item.medicineProductId } : {}),
...(item.medicineId ? { medicineId: item.medicineId } : {}),
...(item.foodProductId ? { foodProductId: item.foodProductId } : {}),

20
packages/api/src/modules/purchases/purchases.service.test.ts
View file

@ -38,7 +38,12 @@ describe(PurchasesService.name, () => {
});
const fakeStore = { _id: 'st-1', name: 'CVS' };
const fakeProduct = { _id: 'mp-1', medicineId: 'med-1', medicineName: 'Ibuprofen', brand: 'Advil' };
const fakeProduct = {
_id: 'mp-1',
medicineId: 'med-1',
medicineName: 'Ibuprofen',
brand: 'Advil',
};
describe('create', () => {
const validInput = {
@ -165,7 +170,9 @@ describe(PurchasesService.name, () => {
it('throws NotFoundError when purchase not found', async () => {
mockPurchasesRepo.findById.mockResolvedValue(null);
await expect(service.receive('missing', 'hh1', 'user-1')).rejects.toThrow('Purchase not found');
await expect(service.receive('missing', 'hh1', 'user-1')).rejects.toThrow(
'Purchase not found',
);
});
it('throws BadRequestError when status is not ordered', async () => {
@ -309,7 +316,14 @@ describe(PurchasesService.name, () => {
storeName: 'CVS',
purchasedAt: new Date(),
items: [
{ medicineProductId: 'mp-1', medicineId: 'med-1', name: 'X', quantity: 10, unit: 'tablet', addedToCabinet: true },
{
medicineProductId: 'mp-1',
medicineId: 'med-1',
name: 'X',
quantity: 10,
unit: 'tablet',
addedToCabinet: true,
},
],
};
mockPurchasesRepo.findById.mockResolvedValue(purchase);

12
packages/api/src/modules/purchases/purchases.service.ts
View file

@ -8,7 +8,7 @@ import type {
UpdatePurchaseInput,
PurchaseQueryInput,
} from '@meshitrack/shared';
import { DosageUnit } from '@meshitrack/shared';
import { type DosageUnit } from '@meshitrack/shared';
import { NotFoundError, BadRequestError } from '../../common/errors.js';
interface Deps {
@ -67,7 +67,8 @@ export class PurchasesService {
item.medicineProductId,
householdId,
);
if (!product) throw new NotFoundError(`Medicine product not found: ${item.medicineProductId}`);
if (!product)
throw new NotFoundError(`Medicine product not found: ${item.medicineProductId}`);
if (!resolvedName || resolvedName === item.name) {
resolvedName = product.brand ?? resolvedName;
}
@ -128,7 +129,8 @@ export class PurchasesService {
quantity: item.quantity,
unit: item.unit,
/* v8 ignore next */
pricePerUnit: item.quantity > 0 ? item.actualPrice / item.quantity : item.actualPrice,
pricePerUnit:
item.quantity > 0 ? item.actualPrice / item.quantity : item.actualPrice,
date: purchasedAt,
isInsurancePrice: false,
createdBy: userId,
@ -259,9 +261,7 @@ export class PurchasesService {
return deleted;
}
public async getPendingStockByMedicine(
householdId: string,
): Promise<Map<string, number>> {
public async getPendingStockByMedicine(householdId: string): Promise<Map<string, number>> {
const results = await this.purchasesRepository.getPendingMedicineStock(householdId);
const map = new Map<string, number>();
for (const r of results) {

8
packages/api/src/modules/refills/refills.repository.test.ts
View file

@ -19,9 +19,13 @@ vi.mock('../../schemas/refill-list.schema.js', () => {
class FakeModel {
data: unknown;
constructor(data: unknown) { this.data = data; }
constructor(data: unknown) {
this.data = data;
}
save = mockSave;
toObject() { return this.data; }
toObject() {
return this.data;
}
static find = vi.fn(() => chain());
static findOne = vi.fn(() => findOneChain());
static findOneAndUpdate = vi.fn(() => updateChain());

10
packages/api/src/modules/refills/refills.repository.ts
View file

@ -1,5 +1,9 @@
import { RefillListModel } from '../../schemas/refill-list.schema.js';
import type { RefillListQueryInput, UpdateRefillListInput, UpdateRefillListItemInput } from '@meshitrack/shared';
import type {
RefillListQueryInput,
UpdateRefillListInput,
UpdateRefillListItemInput,
} from '@meshitrack/shared';
export interface CreateRefillListData {
householdId: string;
@ -46,9 +50,7 @@ export class RefillsRepository {
const hasMore = items.length > limit;
const data = hasMore ? items.slice(0, limit) : items;
const cursor =
data.length > 0
? Buffer.from(data[data.length - 1]._id.toString()).toString('base64')
: null;
data.length > 0 ? Buffer.from(data[data.length - 1]._id.toString()).toString('base64') : null;
return { data, pagination: { cursor: hasMore ? cursor : null, hasMore } };
}

28
packages/api/src/modules/refills/refills.routes.test.ts
View file

@ -131,8 +131,20 @@ describe('refills.routes', () => {
dailyConsumption: 2,
currentStock: 6,
suggestedQuantity: 60,
lastKnownPrice: { price: 10, pricePerUnit: 0.1, storeName: 'CVS', storeId: 'st-1', date: new Date('2026-01-01T00:00:00.000Z') },
cheapestOption: { price: 8, pricePerUnit: 0.08, storeName: 'Walmart', storeId: 'st-2', date: new Date('2026-01-02T00:00:00.000Z') },
lastKnownPrice: {
price: 10,
pricePerUnit: 0.1,
storeName: 'CVS',
storeId: 'st-1',
date: new Date('2026-01-01T00:00:00.000Z'),
},
cheapestOption: {
price: 8,
pricePerUnit: 0.08,
storeName: 'Walmart',
storeId: 'st-2',
date: new Date('2026-01-02T00:00:00.000Z'),
},
},
]);
@ -265,7 +277,8 @@ describe('refills.routes', () => {
it('includes optional list fields in response', async () => {
mockList.mockResolvedValue({
data: [makeFakeRefillList({
data: [
makeFakeRefillList({
preferredStoreId: 'st-1',
totalEstimatedCost: 25.5,
items: [
@ -284,7 +297,8 @@ describe('refills.routes', () => {
notes: 'generic brand',
},
],
})],
}),
],
pagination: { cursor: null, hasMore: false },
});
@ -322,7 +336,8 @@ describe('refills.routes', () => {
});
it('handles ObjectId-style _id in list and items', async () => {
mockGetById.mockResolvedValue(makeFakeRefillList({
mockGetById.mockResolvedValue(
makeFakeRefillList({
_id: { toString: () => 'rl-obj' },
createdAt: new Date('2026-01-01T00:00:00.000Z'),
updatedAt: new Date('2026-01-01T00:00:00.000Z'),
@ -337,7 +352,8 @@ describe('refills.routes', () => {
addedToCabinet: false,
},
],
}));
}),
);
const res = await app.inject({
method: 'GET',

150
packages/api/src/modules/refills/refills.service.test.ts
View file

@ -45,7 +45,13 @@ describe(RefillsService.name, () => {
describe('getAlerts', () => {
it('returns empty array when no medicines are running low', async () => {
mockRegimensService.calculateBurnRates.mockResolvedValue([
{ medicineId: 'med-1', medicineName: 'Aspirin', dailyConsumption: 1, totalInCabinet: 100, daysUntilEmpty: 100 },
{
medicineId: 'med-1',
medicineName: 'Aspirin',
dailyConsumption: 1,
totalInCabinet: 100,
daysUntilEmpty: 100,
},
]);
const result = await service.getAlerts('hh1', 'user-1', 7);
@ -55,7 +61,13 @@ describe(RefillsService.name, () => {
it('returns alerts for medicines below threshold', async () => {
mockRegimensService.calculateBurnRates.mockResolvedValue([
{ medicineId: 'med-1', medicineName: 'Aspirin', dailyConsumption: 2, totalInCabinet: 10, daysUntilEmpty: 5 },
{
medicineId: 'med-1',
medicineName: 'Aspirin',
dailyConsumption: 2,
totalInCabinet: 10,
daysUntilEmpty: 5,
},
]);
mockCabinetRepo.getAggregateSummary.mockResolvedValue([
{ _id: 'med-1', medicineStrength: 500, medicineStrengthUnit: 'mg' },
@ -73,7 +85,13 @@ describe(RefillsService.name, () => {
it('attaches lastKnownPrice when available', async () => {
mockRegimensService.calculateBurnRates.mockResolvedValue([
{ medicineId: 'med-1', medicineName: 'Aspirin', dailyConsumption: 2, totalInCabinet: 5, daysUntilEmpty: 2 },
{
medicineId: 'med-1',
medicineName: 'Aspirin',
dailyConsumption: 2,
totalInCabinet: 5,
daysUntilEmpty: 2,
},
]);
mockCabinetRepo.getAggregateSummary.mockResolvedValue([]);
mockPricesRepo.getLatestForMedicine.mockResolvedValue({
@ -93,12 +111,25 @@ describe(RefillsService.name, () => {
it('attaches cheapestOption from compareStores', async () => {
mockRegimensService.calculateBurnRates.mockResolvedValue([
{ medicineId: 'med-1', medicineName: 'Aspirin', dailyConsumption: 2, totalInCabinet: 5, daysUntilEmpty: 2 },
{
medicineId: 'med-1',
medicineName: 'Aspirin',
dailyConsumption: 2,
totalInCabinet: 5,
daysUntilEmpty: 2,
},
]);
mockCabinetRepo.getAggregateSummary.mockResolvedValue([]);
mockPricesRepo.getLatestForMedicine.mockResolvedValue(null);
mockPricesRepo.compareStores.mockResolvedValue([
{ storeId: 'st-1', storeName: 'CVS', latestPrice: 8, latestPricePerUnit: 0.08, currency: 'USD', date: new Date() },
{
storeId: 'st-1',
storeName: 'CVS',
latestPrice: 8,
latestPricePerUnit: 0.08,
currency: 'USD',
date: new Date(),
},
]);
const result = await service.getAlerts('hh1', 'user-1', 7);
@ -109,7 +140,13 @@ describe(RefillsService.name, () => {
it('includes pendingOrderStock and daysUntilEmptyWithOrders from ordered purchases', async () => {
mockRegimensService.calculateBurnRates.mockResolvedValue([
{ medicineId: 'med-1', medicineName: 'Aspirin', dailyConsumption: 2, totalInCabinet: 4, daysUntilEmpty: 2 },
{
medicineId: 'med-1',
medicineName: 'Aspirin',
dailyConsumption: 2,
totalInCabinet: 4,
daysUntilEmpty: 2,
},
]);
mockCabinetRepo.getAggregateSummary.mockResolvedValue([]);
mockPricesRepo.getLatestForMedicine.mockResolvedValue(null);
@ -126,7 +163,13 @@ describe(RefillsService.name, () => {
it('excludes medicines with null daysUntilEmpty', async () => {
mockRegimensService.calculateBurnRates.mockResolvedValue([
{ medicineId: 'med-1', medicineName: 'Aspirin', dailyConsumption: 2, totalInCabinet: 0, daysUntilEmpty: null },
{
medicineId: 'med-1',
medicineName: 'Aspirin',
dailyConsumption: 2,
totalInCabinet: 0,
daysUntilEmpty: null,
},
]);
const result = await service.getAlerts('hh1', 'user-1', 7);
@ -145,7 +188,9 @@ describe(RefillsService.name, () => {
name: 'My List',
fromAlerts: false,
thresholdDays: 7,
items: [{ medicineId: 'med-1', medicineName: 'Aspirin', quantity: 30, unit: 'tablet' as never }],
items: [
{ medicineId: 'med-1', medicineName: 'Aspirin', quantity: 30, unit: 'tablet' as never },
],
},
'hh1',
'user-1',
@ -160,7 +205,11 @@ describe(RefillsService.name, () => {
it('creates list with no items when neither fromAlerts nor items provided', async () => {
mockRepo.create.mockResolvedValue({ _id: 'rl-1', items: [] });
await service.createList({ name: 'Empty List', fromAlerts: false, thresholdDays: 7 }, 'hh1', 'user-1');
await service.createList(
{ name: 'Empty List', fromAlerts: false, thresholdDays: 7 },
'hh1',
'user-1',
);
expect(mockRepo.create).toHaveBeenCalledWith(
expect.objectContaining({ items: [], totalEstimatedCost: undefined }),
@ -176,8 +225,20 @@ describe(RefillsService.name, () => {
fromAlerts: false,
thresholdDays: 7,
items: [
{ medicineId: 'med-1', medicineName: 'Aspirin', quantity: 30, unit: 'tablet' as never, estimatedPrice: 10 },
{ medicineId: 'med-2', medicineName: 'Ibuprofen', quantity: 20, unit: 'tablet' as never, estimatedPrice: 8 },
{
medicineId: 'med-1',
medicineName: 'Aspirin',
quantity: 30,
unit: 'tablet' as never,
estimatedPrice: 10,
},
{
medicineId: 'med-2',
medicineName: 'Ibuprofen',
quantity: 20,
unit: 'tablet' as never,
estimatedPrice: 8,
},
],
},
'hh1',
@ -191,20 +252,28 @@ describe(RefillsService.name, () => {
it('creates list from alerts when fromAlerts is true', async () => {
mockRegimensService.calculateBurnRates.mockResolvedValue([
{ medicineId: 'med-1', medicineName: 'Aspirin', dailyConsumption: 2, totalInCabinet: 5, daysUntilEmpty: 2 },
{
medicineId: 'med-1',
medicineName: 'Aspirin',
dailyConsumption: 2,
totalInCabinet: 5,
daysUntilEmpty: 2,
},
]);
mockCabinetRepo.getAggregateSummary.mockResolvedValue([]);
mockPricesRepo.getLatestForMedicine.mockResolvedValue(null);
mockPricesRepo.compareStores.mockResolvedValue([]);
mockRepo.create.mockResolvedValue({ _id: 'rl-1', items: [] });
await service.createList({ name: 'Auto List', fromAlerts: true, thresholdDays: 7 }, 'hh1', 'user-1');
await service.createList(
{ name: 'Auto List', fromAlerts: true, thresholdDays: 7 },
'hh1',
'user-1',
);
expect(mockRepo.create).toHaveBeenCalledWith(
expect.objectContaining({
items: expect.arrayContaining([
expect.objectContaining({ medicineId: 'med-1' }),
]),
items: expect.arrayContaining([expect.objectContaining({ medicineId: 'med-1' })]),
}),
);
});
@ -251,7 +320,9 @@ describe(RefillsService.name, () => {
it('throws NotFoundError when list not found', async () => {
mockRepo.findById.mockResolvedValue(null);
await expect(service.updateList('missing', 'hh1', {})).rejects.toThrow('Refill list not found');
await expect(service.updateList('missing', 'hh1', {})).rejects.toThrow(
'Refill list not found',
);
});
it('throws NotFoundError when update returns null', async () => {
@ -290,7 +361,9 @@ describe(RefillsService.name, () => {
it('throws NotFoundError when list not found', async () => {
mockRepo.findById.mockResolvedValue(null);
await expect(service.updateItem('missing', 'hh1', 'item-1', {})).rejects.toThrow('Refill list not found');
await expect(service.updateItem('missing', 'hh1', 'item-1', {})).rejects.toThrow(
'Refill list not found',
);
});
it('throws NotFoundError when item not found', async () => {
@ -308,7 +381,15 @@ describe(RefillsService.name, () => {
mockRepo.findById.mockResolvedValue({
_id: 'rl-1',
items: [
{ _id: { toString: () => 'item-1' }, medicineId: 'med-1', medicineName: 'Aspirin', quantity: 30, unit: 'tablet', checked: true, addedToCabinet: false },
{
_id: { toString: () => 'item-1' },
medicineId: 'med-1',
medicineName: 'Aspirin',
quantity: 30,
unit: 'tablet',
checked: true,
addedToCabinet: false,
},
],
});
mockCabinetService.addItem.mockResolvedValue({ _id: 'ci-1' });
@ -324,7 +405,16 @@ describe(RefillsService.name, () => {
mockRepo.findById.mockResolvedValue({
_id: 'rl-1',
items: [
{ _id: { toString: () => 'item-1' }, medicineId: 'med-1', medicineName: 'Aspirin', quantity: 30, unit: 'tablet', actualPrice: 9, checked: true, addedToCabinet: false },
{
_id: { toString: () => 'item-1' },
medicineId: 'med-1',
medicineName: 'Aspirin',
quantity: 30,
unit: 'tablet',
actualPrice: 9,
checked: true,
addedToCabinet: false,
},
],
});
mockCabinetService.addItem.mockResolvedValue({ _id: 'ci-1' });
@ -343,7 +433,15 @@ describe(RefillsService.name, () => {
mockRepo.findById.mockResolvedValue({
_id: 'rl-1',
items: [
{ _id: 'item-1', medicineId: 'med-1', medicineName: 'Aspirin', quantity: 30, unit: 'tablet', checked: false, addedToCabinet: false },
{
_id: 'item-1',
medicineId: 'med-1',
medicineName: 'Aspirin',
quantity: 30,
unit: 'tablet',
checked: false,
addedToCabinet: false,
},
],
});
@ -357,7 +455,15 @@ describe(RefillsService.name, () => {
mockRepo.findById.mockResolvedValue({
_id: 'rl-1',
items: [
{ _id: 'item-1', medicineId: 'med-1', medicineName: 'Aspirin', quantity: 30, unit: 'tablet', checked: true, addedToCabinet: true },
{
_id: 'item-1',
medicineId: 'med-1',
medicineName: 'Aspirin',
quantity: 30,
unit: 'tablet',
checked: true,
addedToCabinet: true,
},
],
});

19
packages/api/src/modules/refills/refills.service.ts
View file

@ -9,7 +9,6 @@ import type {
UpdateRefillListInput,
UpdateRefillListItemInput,
RefillListQueryInput,
RefillAlertQueryInput,
} from '@meshitrack/shared';
import { RefillListStatus } from '@meshitrack/shared';
import { NotFoundError } from '../../common/errors.js';
@ -58,7 +57,10 @@ export class RefillsService {
// Get strength data from cabinet aggregate
const summaries = await this.cabinetRepository.getAggregateSummary(householdId);
const summaryMap = new Map<string, { medicineStrength: number; medicineStrengthUnit: string }>();
const summaryMap = new Map<
string,
{ medicineStrength: number; medicineStrengthUnit: string }
>();
for (const s of summaries) {
summaryMap.set(s._id as string, {
medicineStrength: s.medicineStrength as number,
@ -217,7 +219,8 @@ export class RefillsService {
public async addToCabinet(listId: string, householdId: string, userId: string) {
const list = await this.getById(listId, householdId);
const checkedItems = (list.items as Array<{
const checkedItems = (
list.items as Array<{
_id: { toString: () => string };
medicineId: string;
medicineName: string;
@ -227,7 +230,8 @@ export class RefillsService {
storeId?: string;
checked: boolean;
addedToCabinet: boolean;
}>).filter((item) => item.checked && !item.addedToCabinet);
}>
).filter((item) => item.checked && !item.addedToCabinet);
if (checkedItems.length === 0) {
return { addedCount: 0, priceRecordsCreated: 0 };
@ -242,7 +246,8 @@ export class RefillsService {
medicineId: item.medicineId,
quantity: item.quantity,
unit: item.unit as never,
unitPrice: item.actualPrice !== undefined && item.quantity > 0
unitPrice:
item.actualPrice !== undefined && item.quantity > 0
? item.actualPrice / item.quantity
: undefined,
totalPrice: item.actualPrice,
@ -265,9 +270,7 @@ export class RefillsService {
const list = await this.getById(listId, householdId);
const medicineIds = [
...new Set(
(list.items as Array<{ medicineId: string }>).map((item) => item.medicineId),
),
...new Set((list.items as Array<{ medicineId: string }>).map((item) => item.medicineId)),
];
const comparisons = await Promise.all(

7
packages/api/src/modules/regimens/regimens.repository.ts
View file

@ -68,7 +68,12 @@ export class RegimensRepository {
.exec();
}
public async create(data: CreateRegimenData, householdId: string, userId: string, createdBy: string) {
public async create(
data: CreateRegimenData,
householdId: string,
userId: string,
createdBy: string,
) {
const regimen = new RegimenModel({ ...data, householdId, userId, createdBy });
const saved = await regimen.save();
return saved.toObject();

10
packages/api/src/modules/regimens/regimens.routes.test.ts
View file

@ -19,7 +19,8 @@ vi.mock('jose', () => ({
}),
}));
const { mockList, mockGetById, mockCreate, mockUpdate, mockDelete, mockCalculateBurnRates } = vi.hoisted(() => ({
const { mockList, mockGetById, mockCreate, mockUpdate, mockDelete, mockCalculateBurnRates } =
vi.hoisted(() => ({
mockList: vi.fn(),
mockGetById: vi.fn(),
mockCreate: vi.fn(),
@ -467,7 +468,12 @@ describe('regimens.routes', () => {
payload: { isActive: false },
});
expect(mockUpdate).toHaveBeenCalledWith('reg-1', 'hh1', 'kc-1', expect.objectContaining({ isActive: false }));
expect(mockUpdate).toHaveBeenCalledWith(
'reg-1',
'hh1',
'kc-1',
expect.objectContaining({ isActive: false }),
);
});
});

16
packages/api/src/modules/regimens/regimens.routes.ts
View file

@ -65,7 +65,9 @@ function toRegimenResponse(doc: AnyRegimenDoc) {
dosage: med.dosage,
dosageUnit: med.dosageUnit,
frequency: med.frequency,
...(med.customFrequencyPerDay != null ? { customFrequencyPerDay: med.customFrequencyPerDay } : {}),
...(med.customFrequencyPerDay != null
? { customFrequencyPerDay: med.customFrequencyPerDay }
: {}),
...(med.timeOfDay ? { timeOfDay: med.timeOfDay } : {}),
...(med.instructions ? { instructions: med.instructions } : {}),
})),
@ -143,7 +145,11 @@ export default fp(
},
handler: async (request, reply) => {
const service = fastify.diContainer.resolve('regimensService');
const regimen = await service.getById(request.params.id, request.params.householdId, request.user.keycloakId);
const regimen = await service.getById(
request.params.id,
request.params.householdId,
request.user.keycloakId,
);
return reply.send(toRegimenResponse(regimen));
},
});
@ -199,7 +205,11 @@ export default fp(
},
handler: async (request, reply) => {
const service = fastify.diContainer.resolve('regimensService');
await service.delete(request.params.id, request.params.householdId, request.user.keycloakId);
await service.delete(
request.params.id,
request.params.householdId,
request.user.keycloakId,
);
return reply.status(204).send();
},
});

158
packages/api/src/modules/regimens/regimens.service.test.ts
View file

@ -82,7 +82,9 @@ describe(RegimensService.name, () => {
it('throws NotFoundError when not found', async () => {
mockRegimensRepo.findById.mockResolvedValue(null);
await expect(service.getById('reg-missing', 'hh1', 'user-1')).rejects.toThrow('Regimen not found');
await expect(service.getById('reg-missing', 'hh1', 'user-1')).rejects.toThrow(
'Regimen not found',
);
});
});
@ -108,7 +110,11 @@ describe(RegimensService.name, () => {
strengthUnit: 'mg',
form: 'tablet',
});
const created = { _id: 'reg-1', ...createInput, medications: [{ medicineId: 'med-1', medicineName: 'Metformin' }] };
const created = {
_id: 'reg-1',
...createInput,
medications: [{ medicineId: 'med-1', medicineName: 'Metformin' }],
};
mockRegimensRepo.create.mockResolvedValue(created);
const result = await service.create(createInput, 'hh1', 'user-1');
@ -255,7 +261,9 @@ describe(RegimensService.name, () => {
const result = await service.update('reg-1', 'hh1', 'user-1', { name: 'Evening' });
expect(result).toEqual(updated);
expect(mockRegimensRepo.update).toHaveBeenCalledWith('reg-1', 'hh1', 'user-1', { name: 'Evening' });
expect(mockRegimensRepo.update).toHaveBeenCalledWith('reg-1', 'hh1', 'user-1', {
name: 'Evening',
});
});
it('updates isActive only', async () => {
@ -264,7 +272,9 @@ describe(RegimensService.name, () => {
await service.update('reg-1', 'hh1', 'user-1', { isActive: false });
expect(mockRegimensRepo.update).toHaveBeenCalledWith('reg-1', 'hh1', 'user-1', { isActive: false });
expect(mockRegimensRepo.update).toHaveBeenCalledWith('reg-1', 'hh1', 'user-1', {
isActive: false,
});
});
it('updates medications with denormalization', async () => {
@ -304,9 +314,9 @@ describe(RegimensService.name, () => {
it('throws NotFoundError when regimen not found on initial lookup', async () => {
mockRegimensRepo.findById.mockResolvedValue(null);
await expect(service.update('reg-missing', 'hh1', 'user-1', { name: 'Updated' })).rejects.toThrow(
'Regimen not found',
);
await expect(
service.update('reg-missing', 'hh1', 'user-1', { name: 'Updated' }),
).rejects.toThrow('Regimen not found');
});
it('throws NotFoundError when update returns null', async () => {
@ -360,7 +370,9 @@ describe(RegimensService.name, () => {
it('throws NotFoundError when regimen not found on initial lookup', async () => {
mockRegimensRepo.findById.mockResolvedValue(null);
await expect(service.delete('reg-missing', 'hh1', 'user-1')).rejects.toThrow('Regimen not found');
await expect(service.delete('reg-missing', 'hh1', 'user-1')).rejects.toThrow(
'Regimen not found',
);
});
it('throws NotFoundError when softDelete returns null', async () => {
@ -444,13 +456,23 @@ describe(RegimensService.name, () => {
{
_id: 'reg-1',
medications: [
{ medicineId: 'med-1', medicineName: 'Metformin', dosage: 1, frequency: DosageFrequency.DAILY },
{
medicineId: 'med-1',
medicineName: 'Metformin',
dosage: 1,
frequency: DosageFrequency.DAILY,
},
],
},
{
_id: 'reg-2',
medications: [
{ medicineId: 'med-1', medicineName: 'Metformin', dosage: 1, frequency: DosageFrequency.TWICE_DAILY },
{
medicineId: 'med-1',
medicineName: 'Metformin',
dosage: 1,
frequency: DosageFrequency.TWICE_DAILY,
},
],
},
]);
@ -479,7 +501,12 @@ describe(RegimensService.name, () => {
{
_id: 'reg-1',
medications: [
{ medicineId: 'med-1', medicineName: 'Metformin', dosage: 1, frequency: DosageFrequency.DAILY },
{
medicineId: 'med-1',
medicineName: 'Metformin',
dosage: 1,
frequency: DosageFrequency.DAILY,
},
],
},
]);
@ -498,7 +525,12 @@ describe(RegimensService.name, () => {
{
_id: 'reg-1',
medications: [
{ medicineId: 'med-1', medicineName: 'Ibuprofen', dosage: 1, frequency: DosageFrequency.AS_NEEDED },
{
medicineId: 'med-1',
medicineName: 'Ibuprofen',
dosage: 1,
frequency: DosageFrequency.AS_NEEDED,
},
],
},
]);
@ -562,9 +594,24 @@ describe(RegimensService.name, () => {
{
_id: 'reg-1',
medications: [
{ medicineId: 'med-1', medicineName: 'Med A', dosage: 1, frequency: DosageFrequency.DAILY },
{ medicineId: 'med-2', medicineName: 'Med B', dosage: 1, frequency: DosageFrequency.DAILY },
{ medicineId: 'med-3', medicineName: 'Med C', dosage: 1, frequency: DosageFrequency.AS_NEEDED },
{
medicineId: 'med-1',
medicineName: 'Med A',
dosage: 1,
frequency: DosageFrequency.DAILY,
},
{
medicineId: 'med-2',
medicineName: 'Med B',
dosage: 1,
frequency: DosageFrequency.DAILY,
},
{
medicineId: 'med-3',
medicineName: 'Med C',
dosage: 1,
frequency: DosageFrequency.AS_NEEDED,
},
],
},
]);
@ -590,8 +637,18 @@ describe(RegimensService.name, () => {
{
_id: 'reg-1',
medications: [
{ medicineId: 'med-1', medicineName: 'Med A', dosage: 1, frequency: DosageFrequency.AS_NEEDED },
{ medicineId: 'med-2', medicineName: 'Med B', dosage: 1, frequency: DosageFrequency.AS_NEEDED },
{
medicineId: 'med-1',
medicineName: 'Med A',
dosage: 1,
frequency: DosageFrequency.AS_NEEDED,
},
{
medicineId: 'med-2',
medicineName: 'Med B',
dosage: 1,
frequency: DosageFrequency.AS_NEEDED,
},
],
},
]);
@ -606,9 +663,24 @@ describe(RegimensService.name, () => {
{
_id: 'reg-1',
medications: [
{ medicineId: 'med-1', medicineName: 'Med A', dosage: 1, frequency: DosageFrequency.AS_NEEDED },
{ medicineId: 'med-2', medicineName: 'Med B', dosage: 1, frequency: DosageFrequency.DAILY },
{ medicineId: 'med-3', medicineName: 'Med C', dosage: 1, frequency: DosageFrequency.DAILY },
{
medicineId: 'med-1',
medicineName: 'Med A',
dosage: 1,
frequency: DosageFrequency.AS_NEEDED,
},
{
medicineId: 'med-2',
medicineName: 'Med B',
dosage: 1,
frequency: DosageFrequency.DAILY,
},
{
medicineId: 'med-3',
medicineName: 'Med C',
dosage: 1,
frequency: DosageFrequency.DAILY,
},
],
},
]);
@ -634,7 +706,12 @@ describe(RegimensService.name, () => {
{
_id: 'reg-1',
medications: [
{ medicineId: 'med-1', medicineName: 'Weekly Med', dosage: 1, frequency: DosageFrequency.WEEKLY },
{
medicineId: 'med-1',
medicineName: 'Weekly Med',
dosage: 1,
frequency: DosageFrequency.WEEKLY,
},
],
},
]);
@ -656,7 +733,12 @@ describe(RegimensService.name, () => {
{
_id: 'reg-1',
medications: [
{ medicineId: 'med-1', medicineName: 'EOD Med', dosage: 1, frequency: DosageFrequency.EVERY_OTHER_DAY },
{
medicineId: 'med-1',
medicineName: 'EOD Med',
dosage: 1,
frequency: DosageFrequency.EVERY_OTHER_DAY,
},
],
},
]);
@ -678,7 +760,12 @@ describe(RegimensService.name, () => {
{
_id: 'reg-1',
medications: [
{ medicineId: 'med-1', medicineName: 'TID Med', dosage: 1, frequency: DosageFrequency.THREE_TIMES_DAILY },
{
medicineId: 'med-1',
medicineName: 'TID Med',
dosage: 1,
frequency: DosageFrequency.THREE_TIMES_DAILY,
},
],
},
]);
@ -699,7 +786,12 @@ describe(RegimensService.name, () => {
{
_id: 'reg-1',
medications: [
{ medicineId: 'med-1', medicineName: 'Expensive Med', dosage: 2, frequency: DosageFrequency.DAILY },
{
medicineId: 'med-1',
medicineName: 'Expensive Med',
dosage: 2,
frequency: DosageFrequency.DAILY,
},
],
},
]);
@ -725,8 +817,18 @@ describe(RegimensService.name, () => {
{
_id: 'reg-1',
medications: [
{ medicineId: 'med-1', medicineName: 'Med A', dosage: 1, frequency: DosageFrequency.DAILY },
{ medicineId: 'med-2', medicineName: 'Med B', dosage: 1, frequency: DosageFrequency.TWICE_DAILY },
{
medicineId: 'med-1',
medicineName: 'Med A',
dosage: 1,
frequency: DosageFrequency.DAILY,
},
{
medicineId: 'med-2',
medicineName: 'Med B',
dosage: 1,
frequency: DosageFrequency.TWICE_DAILY,
},
],
},
]);
@ -737,9 +839,7 @@ describe(RegimensService.name, () => {
]);
mockCabinetEventsService.getAvgUnitPrices.mockResolvedValue(
new Map([
['med-1', { avgUnitPrice: 2.0, currency: 'USD' }],
]),
new Map([['med-1', { avgUnitPrice: 2.0, currency: 'USD' }]]),
);
const result = await service.calculateBurnRates('hh1', 'user-1');

10
packages/api/src/modules/regimens/regimens.service.ts
View file

@ -82,10 +82,7 @@ export class RegimensService {
const regimens = await this.regimensRepository.findActiveByUser(householdId, userId);
// Sum daily consumption per medicine across all active regimens
const consumptionMap = new Map<
string,
{ medicineName: string; dailyConsumption: number }
>();
const consumptionMap = new Map<string, { medicineName: string; dailyConsumption: number }>();
for (const regimen of regimens) {
for (const med of regimen.medications) {
@ -115,10 +112,7 @@ export class RegimensService {
// Get cabinet summary for all medicines in regimens
const summaryResults = await this.cabinetRepository.getAggregateSummary(householdId);
const stockMap = new Map<
string,
{ totalQuantity: number; earliestExpiry: Date | null }
>();
const stockMap = new Map<string, { totalQuantity: number; earliestExpiry: Date | null }>();
for (const s of summaryResults) {
stockMap.set(s._id as string, {
totalQuantity: s.totalQuantity as number,

8
packages/api/src/modules/stores/stores.repository.test.ts
View file

@ -19,9 +19,13 @@ vi.mock('../../schemas/store.schema.js', () => {
class FakeModel {
data: unknown;
constructor(data: unknown) { this.data = data; }
constructor(data: unknown) {
this.data = data;
}
save = mockSave;
toObject() { return this.data; }
toObject() {
return this.data;
}
static find = vi.fn(() => chain());
static findOne = vi.fn(() => findOneChain());
static findOneAndUpdate = vi.fn(() => updateChain());

5
packages/api/src/modules/stores/stores.repository.ts
View file

@ -6,7 +6,10 @@ export class StoresRepository {
const filter: Record<string, unknown> = { householdId };
if (query.tags) {
const tagList = query.tags.split(',').map((t) => t.trim()).filter(Boolean);
const tagList = query.tags
.split(',')
.map((t) => t.trim())
.filter(Boolean);
if (tagList.length > 0) filter['tags'] = { $in: tagList };
}

12
packages/api/src/modules/stores/stores.routes.test.ts
View file

@ -140,11 +140,13 @@ describe('stores.routes', () => {
it('handles ObjectId and Date in response', async () => {
mockList.mockResolvedValue({
data: [makeFakeStore({
data: [
makeFakeStore({
_id: { toString: () => 'st-obj' },
createdAt: new Date('2024-01-01T00:00:00.000Z'),
updatedAt: new Date('2024-01-01T00:00:00.000Z'),
})],
}),
],
pagination: { cursor: null, hasMore: false },
});
@ -162,12 +164,14 @@ describe('stores.routes', () => {
it('includes optional fields in response when present', async () => {
mockList.mockResolvedValue({
data: [makeFakeStore({
data: [
makeFakeStore({
address: '123 Main St',
location: { lat: 40.7128, lng: -74.006 },
url: 'https://walgreens.com',
notes: 'Open 24h',
})],
}),
],
pagination: { cursor: null, hasMore: false },
});

6
packages/api/src/modules/stores/stores.service.test.ts
View file

@ -49,7 +49,11 @@ describe(StoresService.name, () => {
const store = { _id: 'st-1', name: 'CVS' };
mockRepo.create.mockResolvedValue(store);
const result = await service.create({ name: 'CVS', tags: [], isActive: true } as never, 'hh1', 'user-1');
const result = await service.create(
{ name: 'CVS', tags: [], isActive: true } as never,
'hh1',
'user-1',
);
expect(result).toEqual(store);
expect(mockRepo.create).toHaveBeenCalledWith(expect.anything(), 'hh1', 'user-1');

8
packages/api/src/scripts/migrate-dosage-units.ts
View file

@ -67,9 +67,7 @@ async function migrate() {
}
}
if (dirty) {
await db
.collection('regimens')
.updateOne({ _id: regimen._id }, { $set: { medications } });
await db.collection('regimens').updateOne({ _id: regimen._id }, { $set: { medications } });
console.log(`regimens: updated medications in regimen ${regimen._id}`);
total++;
}
@ -88,9 +86,7 @@ async function migrate() {
}
}
if (dirty) {
await db
.collection('refillists')
.updateOne({ _id: list._id }, { $set: { items } });
await db.collection('refillists').updateOne({ _id: list._id }, { $set: { items } });
console.log(`refillists: updated items in list ${list._id}`);
total++;
}

9
packages/shared/src/enums/cabinet-event.enums.test.ts
View file

@ -1,8 +1,5 @@
import { describe, it, expect } from 'vitest';
import {
CabinetEventType,
CabinetEventSourceType,
} from './cabinet-event.enums.js';
import { CabinetEventType, CabinetEventSourceType } from './cabinet-event.enums.js';
describe(CabinetEventType.name, () => {
it('has exactly 6 values', () => {
@ -32,8 +29,6 @@ describe(CabinetEventSourceType.name, () => {
['ORGANIZER_UNDO', 'organizer_undo'],
['REFILL_LIST', 'refill_list'],
])('%s = %s', (key, value) => {
expect(
CabinetEventSourceType[key as keyof typeof CabinetEventSourceType],
).toBe(value);
expect(CabinetEventSourceType[key as keyof typeof CabinetEventSourceType]).toBe(value);
});
});

10
packages/shared/src/enums/regimen.enums.test.ts
View file

@ -1,9 +1,5 @@
import { describe, it, expect } from 'vitest';
import {
DosageFrequency,
TimeOfDay,
OrganizerFillStatus,
} from './regimen.enums.js';
import { DosageFrequency, TimeOfDay, OrganizerFillStatus } from './regimen.enums.js';
describe(DosageFrequency.name, () => {
it('has exactly 7 values', () => {
@ -48,8 +44,6 @@ describe(OrganizerFillStatus.name, () => {
['PARTIAL', 'partial'],
['REVERSED', 'reversed'],
])('%s = %s', (key, value) => {
expect(
OrganizerFillStatus[key as keyof typeof OrganizerFillStatus],
).toBe(value);
expect(OrganizerFillStatus[key as keyof typeof OrganizerFillStatus]).toBe(value);
});
});

5
packages/shared/src/types/cabinet-event.ts
View file

@ -1,7 +1,4 @@
import type {
CabinetEventType,
CabinetEventSourceType,
} from '../enums/cabinet-event.enums.js';
import type { CabinetEventType, CabinetEventSourceType } from '../enums/cabinet-event.enums.js';
export interface CabinetEvent {
id: string;

5
packages/shared/src/types/regimen.ts
View file

@ -1,7 +1,4 @@
import type {
DosageFrequency,
TimeOfDay,
} from '../enums/regimen.enums.js';
import type { DosageFrequency, TimeOfDay } from '../enums/regimen.enums.js';
import type { DosageUnit, MedicineForm, StrengthUnit } from '../enums/medicine.enums.js';
export interface Regimen {

5
packages/shared/src/utils/frequency.ts
View file

@ -5,10 +5,7 @@ import { DosageFrequency } from '../enums/regimen.enums.js';
* For example, TWICE_DAILY returns 2, WEEKLY returns 1/7.
* AS_NEEDED returns 0 (excluded from calculations).
*/
export function getFrequencyMultiplier(
frequency: DosageFrequency,
customPerDay?: number,
): number {
export function getFrequencyMultiplier(frequency: DosageFrequency, customPerDay?: number): number {
switch (frequency) {
case DosageFrequency.DAILY:
return 1;

12
packages/shared/src/validation/medicine-price.schemas.test.ts
View file

@ -35,15 +35,21 @@ describe('CreateMedicinePriceRecordSchema', () => {
});
it('rejects non-positive price', () => {
expect(CreateMedicinePriceRecordSchema.safeParse({ ...validInput, price: 0 }).success).toBe(false);
expect(CreateMedicinePriceRecordSchema.safeParse({ ...validInput, price: 0 }).success).toBe(
false,
);
});
it('rejects non-positive quantity', () => {
expect(CreateMedicinePriceRecordSchema.safeParse({ ...validInput, quantity: -1 }).success).toBe(false);
expect(CreateMedicinePriceRecordSchema.safeParse({ ...validInput, quantity: -1 }).success).toBe(
false,
);
});
it('rejects invalid unit', () => {
expect(CreateMedicinePriceRecordSchema.safeParse({ ...validInput, unit: 'spoon' }).success).toBe(false);
expect(
CreateMedicinePriceRecordSchema.safeParse({ ...validInput, unit: 'spoon' }).success,
).toBe(false);
});
});

18
packages/shared/src/validation/medicine-price.schemas.ts
View file

@ -71,26 +71,32 @@ export const StoreComparisonResponseSchema = z.object({
export const MedicineSpendingAnalyticsResponseSchema = z.object({
spendingOverTime: z.array(z.object({ period: z.string(), total: z.number() })),
topBySpending: z.array(z.object({
topBySpending: z.array(
z.object({
medicineId: z.string(),
medicineName: z.string(),
totalSpent: z.number(),
avgPricePerUnit: z.number(),
})),
spendingByStore: z.array(z.object({
}),
),
spendingByStore: z.array(
z.object({
storeId: z.string(),
storeName: z.string(),
totalSpent: z.number(),
purchaseCount: z.number(),
})),
priceAlerts: z.array(z.object({
}),
),
priceAlerts: z.array(
z.object({
medicineId: z.string(),
medicineName: z.string(),
storeName: z.string(),
previousPrice: z.number(),
currentPrice: z.number(),
changePercent: z.number(),
})),
}),
),
});
export type CreateMedicinePriceRecordInput = z.infer<typeof CreateMedicinePriceRecordSchema>;

43
packages/shared/src/validation/purchase.schemas.test.ts
View file

@ -8,7 +8,11 @@ import {
describe('CreatePurchaseItemSchema', () => {
it('accepts minimal valid item', () => {
const result = CreatePurchaseItemSchema.safeParse({ name: 'Tylenol 30ct', quantity: 30, unit: 'tablet' });
const result = CreatePurchaseItemSchema.safeParse({
name: 'Tylenol 30ct',
quantity: 30,
unit: 'tablet',
});
expect(result.success).toBe(true);
if (result.success) expect(result.data.addedToCabinet).toBeUndefined();
});
@ -27,19 +31,29 @@ describe('CreatePurchaseItemSchema', () => {
});
it('rejects empty name', () => {
expect(CreatePurchaseItemSchema.safeParse({ name: '', quantity: 1, unit: 'tablet' }).success).toBe(false);
expect(
CreatePurchaseItemSchema.safeParse({ name: '', quantity: 1, unit: 'tablet' }).success,
).toBe(false);
});
it('rejects non-positive quantity', () => {
expect(CreatePurchaseItemSchema.safeParse({ name: 'X', quantity: 0, unit: 'tablet' }).success).toBe(false);
expect(
CreatePurchaseItemSchema.safeParse({ name: 'X', quantity: 0, unit: 'tablet' }).success,
).toBe(false);
});
it('rejects empty unit', () => {
expect(CreatePurchaseItemSchema.safeParse({ name: 'X', quantity: 1, unit: '' }).success).toBe(false);
expect(CreatePurchaseItemSchema.safeParse({ name: 'X', quantity: 1, unit: '' }).success).toBe(
false,
);
});
it('trims name whitespace', () => {
const result = CreatePurchaseItemSchema.parse({ name: ' Tylenol ', quantity: 1, unit: 'tablet' });
const result = CreatePurchaseItemSchema.parse({
name: ' Tylenol ',
quantity: 1,
unit: 'tablet',
});
expect(result.name).toBe('Tylenol');
});
});
@ -53,7 +67,11 @@ describe('CreatePurchaseSchema', () => {
});
it('accepts ordered status', () => {
const result = CreatePurchaseSchema.safeParse({ storeId: 'st-1', status: 'ordered', items: [validItem] });
const result = CreatePurchaseSchema.safeParse({
storeId: 'st-1',
status: 'ordered',
items: [validItem],
});
expect(result.success).toBe(true);
});
@ -66,7 +84,10 @@ describe('CreatePurchaseSchema', () => {
});
it('rejects invalid status', () => {
expect(CreatePurchaseSchema.safeParse({ storeId: 'st-1', status: 'pending', items: [validItem] }).success).toBe(false);
expect(
CreatePurchaseSchema.safeParse({ storeId: 'st-1', status: 'pending', items: [validItem] })
.success,
).toBe(false);
});
it('accepts optional purchasedAt datetime', () => {
@ -79,7 +100,13 @@ describe('CreatePurchaseSchema', () => {
});
it('rejects invalid purchasedAt', () => {
expect(CreatePurchaseSchema.safeParse({ storeId: 'st-1', items: [validItem], purchasedAt: 'not-a-date' }).success).toBe(false);
expect(
CreatePurchaseSchema.safeParse({
storeId: 'st-1',
items: [validItem],
purchasedAt: 'not-a-date',
}).success,
).toBe(false);
});
});

4
packages/shared/src/validation/refill.schemas.test.ts
View file

@ -81,8 +81,8 @@ describe('UpdateRefillListItemSchema', () => {
});
it('accepts actualPrice', () => {
const result = UpdateRefillListItemSchema.parse({ actualPrice: 12.50 });
expect(result.actualPrice).toBe(12.50);
const result = UpdateRefillListItemSchema.parse({ actualPrice: 12.5 });
expect(result.actualPrice).toBe(12.5);
});
it('rejects negative actualPrice', () => {

5
packages/shared/src/validation/regimen.schemas.test.ts
View file

@ -102,10 +102,7 @@ describe('CreateRegimenSchema', () => {
it('accepts multiple medications', () => {
const result = CreateRegimenSchema.safeParse({
...validRegimen,
medications: [
validMedication,
{ ...validMedication, medicineId: 'med-2', dosage: 2 },
],
medications: [validMedication, { ...validMedication, medicineId: 'med-2', dosage: 2 }],
});
expect(result.success).toBe(true);
});

4
packages/shared/src/validation/regimen.schemas.ts
View file

@ -15,9 +15,7 @@ export const RegimenMedicationInputSchema = z
instructions: z.string().max(500).trim().optional(),
})
.refine(
(data) =>
data.frequency !== DosageFrequency.CUSTOM ||
data.customFrequencyPerDay !== undefined,
(data) => data.frequency !== DosageFrequency.CUSTOM || data.customFrequencyPerDay !== undefined,
{ message: 'customFrequencyPerDay is required when frequency is custom' },
);

12
packages/shared/src/validation/store.schemas.test.ts
View file

@ -29,15 +29,15 @@ describe('CreateStoreSchema', () => {
});
it('rejects invalid location lat', () => {
expect(
CreateStoreSchema.safeParse({ name: 'X', location: { lat: 91, lng: 0 } }).success,
).toBe(false);
expect(CreateStoreSchema.safeParse({ name: 'X', location: { lat: 91, lng: 0 } }).success).toBe(
false,
);
});
it('rejects invalid location lng', () => {
expect(
CreateStoreSchema.safeParse({ name: 'X', location: { lat: 0, lng: 181 } }).success,
).toBe(false);
expect(CreateStoreSchema.safeParse({ name: 'X', location: { lat: 0, lng: 181 } }).success).toBe(
false,
);
});
it('trims name whitespace', () => {

6
packages/web/eslint.config.js
View file

@ -26,6 +26,12 @@ export default tseslint.config(
settings: {
react: { version: 'detect' },
},
languageOptions: {
parserOptions: {
tsconfigRootDir: import.meta.dirname,
project: ['./tsconfig.json'],
},
},
rules: {
'@typescript-eslint/no-explicit-any': 'error',
'@typescript-eslint/explicit-member-accessibility': ['error', { accessibility: 'explicit' }],

4
packages/web/next.config.ts
View file

@ -8,11 +8,11 @@ const nextConfig: NextConfig = {
webpack: (config) => {
// The shared package source uses ESM `.js` extensions on imports (e.g. `./enums/index.js`).
// When Next.js resolves via tsconfig paths to the raw `.ts` source, webpack needs to
// know that `.js` imports inside that directory should resolve to `.ts` files.
// know that `.js` imports inside that directory should resolve to `.ts`/`.tsx` files.
config.resolve = config.resolve ?? {};
config.resolve.extensionAlias = {
...config.resolve.extensionAlias,
'.js': ['.ts', '.js'],
'.js': ['.tsx', '.ts', '.jsx', '.js'],
};
// Ensure the shared source directory is included in the module resolution

6
packages/web/src/app/(dashboard)/__tests__/layout.test.tsx
View file

@ -13,9 +13,11 @@ import DashboardLayout from '../layout';
describe('DashboardLayout', () => {
it('renders sidebar, topbar and children', () => {
render(<DashboardLayout>
render(
<DashboardLayout>
<div data-testid="child">content</div>
</DashboardLayout>);
</DashboardLayout>,
);
expect(screen.getByTestId('sidebar')).toBeInTheDocument();
expect(screen.getByTestId('topbar')).toBeInTheDocument();

2
packages/web/src/app/(dashboard)/__tests__/loading.test.tsx
View file

@ -1,5 +1,5 @@
import { describe, it, expect } from 'vitest';
import { render, container } from '@testing-library/react';
import { render } from '@testing-library/react';
import DashboardLoading from '../loading';

27
packages/web/src/app/(dashboard)/dashboard/__tests__/page.test.tsx
View file

@ -1,6 +1,9 @@
import { describe, it, expect, vi } from 'vitest';
import { describe, it, expect, vi, beforeEach } from 'vitest';
import { render, screen } from '@testing-library/react';
const { mockUseApi } = vi.hoisted(() => ({ mockUseApi: vi.fn() }));
vi.mock('@/lib/useApi', () => ({ useApi: mockUseApi }));
vi.mock('swr', () => ({ default: vi.fn(() => ({ data: undefined })) }));
vi.mock('next/link', () => ({
// eslint-disable-next-line @typescript-eslint/no-explicit-any
default: (props: any) => <a href={props.href}>{props.children}</a>,
@ -8,21 +11,29 @@ vi.mock('next/link', () => ({
import DashboardPage from '../page';
describe('DashboardPage', () => {
beforeEach(() => {
vi.clearAllMocks();
mockUseApi.mockReturnValue({ householdId: null, isLoading: true, profile: undefined });
});
describe(DashboardPage.name, () => {
it('renders heading', () => {
render(<DashboardPage />);
expect(screen.getByText('Dashboard')).toBeInTheDocument();
});
it('renders Medicines card linking to /medicines', () => {
it('shows loading skeleton when session loading', () => {
render(<DashboardPage />);
const link = screen.getByRole('link', { name: /medicines/i });
expect(link).toHaveAttribute('href', '/medicines');
expect(screen.getByText('Dashboard')).toBeInTheDocument();
});
it('renders Settings card linking to /settings', () => {
it('renders page when household loaded', () => {
mockUseApi.mockReturnValue({
householdId: 'hh1',
isLoading: false,
profile: { displayName: 'Alice' },
});
render(<DashboardPage />);
const link = screen.getByRole('link', { name: /settings/i });
expect(link).toHaveAttribute('href', '/settings');
expect(screen.getByText('Dashboard')).toBeInTheDocument();
});
});

499
packages/web/src/app/(dashboard)/dashboard/page.tsx
View file

@ -1,41 +1,488 @@
import Link from 'next/link';
'use client';
import useSWR from 'swr';
import { useApi } from '@/lib/useApi';
import { getCabinetSummary, listCabinetItems } from '@/services/cabinet';
import { listPurchases } from '@/services/purchases';
import { getRefillAlerts } from '@/services/refills';
import { listCabinetEvents } from '@/services/cabinet-events';
import { SetPageHeader } from '@/components/layout/SetPageHeader';
import { Card, CardHeader } from '@/components/ui/Card';
import { Button } from '@/components/ui/Button';
import { Pill } from '@/components/ui/Pill';
import { Icon } from '@/components/ui/Icon';
function now() {
return new Date();
}
function greeting() {
const h = now().getHours();
if (h < 12) return 'Good morning';
if (h < 17) return 'Good afternoon';
return 'Good evening';
}
function formatDate(d: Date) {
return d.toLocaleDateString('en-US', { weekday: 'long', month: 'long', day: 'numeric' });
}
export default function DashboardPage() {
const { householdId, profile, isLoading } = useApi();
const name = profile?.displayName?.split(' ')[0] ?? 'there';
const { data: summary } = useSWR(householdId ? `cabinet-summary-${householdId}` : null, () =>
getCabinetSummary(householdId!),
);
const { data: cabinetItems } = useSWR(householdId ? `cabinet-items-${householdId}` : null, () =>
listCabinetItems(householdId!, { limit: 10 }),
);
const { data: pendingPurchases } = useSWR(
householdId ? `purchases-ordered-${householdId}` : null,
() => listPurchases(householdId!, { status: 'ordered', limit: 5 }),
);
const { data: refillAlerts } = useSWR(householdId ? `refill-alerts-${householdId}` : null, () =>
getRefillAlerts(householdId!, { thresholdDays: 14 }),
);
const { data: recentEvents } = useSWR(householdId ? `cabinet-events-${householdId}` : null, () =>
listCabinetEvents(householdId!, { limit: 5 }),
);
const today = formatDate(now());
if (isLoading) {
return (
<>
<SetPageHeader title="Dashboard" subtitle="Household overview" />
<DashboardSkeleton />
</>
);
}
return (
<>
<SetPageHeader title="Dashboard" subtitle="Household overview" />
<div style={{ padding: '28px 32px 56px', maxWidth: 1400, width: '100%' }}>
{/* Hero */}
<div
style={{
display: 'flex',
justifyContent: 'space-between',
alignItems: 'flex-start',
gap: 24,
paddingBottom: 24,
borderBottom: '1px solid var(--border)',
marginBottom: 20,
}}
>
<div>
<h1 className="text-2xl font-bold mb-4">Dashboard</h1>
<div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
<DashboardCard
title="Medicines"
description="Manage your medicines, products and inventory"
href="/medicines"
<div
style={{
fontSize: 11,
letterSpacing: '0.08em',
textTransform: 'uppercase',
color: 'var(--ink-muted)',
fontWeight: 500,
marginBottom: 6,
}}
>
{today}
</div>
<div
style={{
fontFamily: 'var(--font-display)',
fontSize: 34,
fontWeight: 400,
letterSpacing: '-0.02em',
color: 'var(--ink-strong)',
lineHeight: 1.05,
}}
>
{greeting()}, {name}.
</div>
{summary && (
<div style={{ fontSize: 14, color: 'var(--ink-muted)', marginTop: 8 }}>
{refillAlerts && refillAlerts.data.some((a) => a.daysUntilEmpty <= 7) ? (
<span style={{ color: 'var(--danger)' }}>
Some medicines are critically low — check refills.
</span>
) : (
'Your cabinet is in good shape.'
)}
</div>
)}
</div>
{/* Cabinet stats */}
{summary && (
<div style={{ display: 'flex', gap: 16, flexShrink: 0 }}>
<StatBadge label="Total medicines" value={summary.data.length} />
<StatBadge label="Running low" value={refillAlerts?.data.length ?? 0} tone="warn" />
</div>
)}
</div>
{/* Grid */}
<div
style={{
display: 'grid',
gridTemplateColumns: 'repeat(12, 1fr)',
gap: 16,
}}
>
{/* Days of supply */}
<div style={{ gridColumn: 'span 7' }}>
<Card>
<CardHeader
title="Cabinet — days of supply"
subtitle="At current usage"
action={
<Button variant="ghost" size="sm">
Open cabinet <Icon name="arrow" size={12} />
</Button>
}
/>
<DashboardCard
title="Settings"
description="Manage household and account settings"
href="/settings"
<div
style={{
padding: '4px 18px 16px',
display: 'flex',
flexDirection: 'column',
gap: 6,
}}
>
{cabinetItems?.data.length ? (
cabinetItems.data.slice(0, 8).map((item) => (
<div
key={item._id}
style={{
display: 'grid',
gridTemplateColumns: '140px 1fr',
gap: 12,
alignItems: 'center',
fontSize: 12,
padding: '4px 0',
}}
>
<div
style={{
fontWeight: 500,
color: 'var(--ink)',
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
}}
>
{item.medicineName ?? 'Unknown'}
</div>
<div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
<div
style={{
flex: 1,
height: 6,
background: 'var(--bg-inset)',
borderRadius: 3,
overflow: 'hidden',
}}
>
<div
style={{
height: '100%',
width: `${Math.min(100, (item.quantity / 100) * 100)}%`,
background: 'var(--brand)',
borderRadius: 3,
}}
/>
</div>
<span
className="num"
style={{
fontSize: 12,
fontWeight: 600,
minWidth: 40,
textAlign: 'right',
}}
>
{item.quantity} {item.unit}
</span>
</div>
</div>
))
) : (
<EmptyState message="No cabinet items yet." />
)}
</div>
</Card>
</div>
{/* Running low */}
<div style={{ gridColumn: 'span 5' }}>
<Card>
<CardHeader
title="Running low"
subtitle={`${refillAlerts?.data.length ?? 0} need attention`}
action={
<Button variant="ghost" size="sm">
Refills
</Button>
}
/>
<div
style={{
padding: '4px 18px 16px',
display: 'flex',
flexDirection: 'column',
gap: 4,
}}
>
{refillAlerts?.data.length ? (
refillAlerts.data.slice(0, 5).map((alert) => (
<div
key={alert.medicineId}
style={{
display: 'flex',
gap: 10,
alignItems: 'center',
padding: '8px 0',
borderBottom: '1px dashed var(--border)',
}}
>
<div
style={{
width: 22,
height: 22,
borderRadius: 6,
display: 'grid',
placeItems: 'center',
background: 'var(--brand-soft)',
color: 'var(--brand)',
flexShrink: 0,
}}
>
<Icon name="pill" size={12} />
</div>
<div style={{ flex: 1, minWidth: 0 }}>
<div
style={{
fontSize: 13,
fontWeight: 500,
color: 'var(--ink-strong)',
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
}}
>
{alert.medicineName}
</div>
</div>
<div style={{ textAlign: 'right', flexShrink: 0 }}>
<div
className="num"
style={{
fontSize: 14,
fontWeight: 600,
color: alert.daysUntilEmpty <= 7 ? 'var(--danger)' : 'var(--warn)',
}}
>
{alert.daysUntilEmpty}d
</div>
<div style={{ fontSize: 10, color: 'var(--ink-faint)' }}>left</div>
</div>
</div>
))
) : (
<EmptyState message="No alerts — all stocked." />
)}
</div>
</Card>
</div>
{/* Pending orders */}
<div style={{ gridColumn: 'span 6' }}>
<Card>
<CardHeader
title="Pending orders"
subtitle={`${pendingPurchases?.data.length ?? 0} awaiting arrival`}
action={
<Button variant="ghost" size="sm">
All purchases
</Button>
}
/>
<div
style={{
padding: '4px 18px 16px',
display: 'flex',
flexDirection: 'column',
gap: 4,
}}
>
{pendingPurchases?.data.length ? (
pendingPurchases.data.map((p) => (
<div
key={p._id}
style={{
display: 'flex',
alignItems: 'center',
gap: 12,
padding: '10px 0',
borderBottom: '1px dashed var(--border)',
}}
>
<div
style={{
width: 28,
height: 28,
borderRadius: '50%',
background: 'var(--brand-soft)',
color: 'var(--brand-soft-ink)',
display: 'grid',
placeItems: 'center',
flexShrink: 0,
}}
>
<Icon name="truck" size={14} />
</div>
<div style={{ flex: 1 }}>
<div style={{ fontWeight: 500, fontSize: 13 }}>
{p.storeName ?? 'Unknown store'}
</div>
<div style={{ fontSize: 11, color: 'var(--ink-muted)' }}>
{p.items.length} item{p.items.length > 1 ? 's' : ''}
</div>
</div>
<div style={{ textAlign: 'right', flexShrink: 0 }}>
<Pill tone={p.status === 'ordered' ? 'warn' : 'ok'}>{p.status}</Pill>
</div>
</div>
))
) : (
<EmptyState message="No pending orders." />
)}
</div>
</Card>
</div>
{/* Recent activity */}
<div style={{ gridColumn: 'span 6' }}>
<Card>
<CardHeader
title="Recent activity"
subtitle="Cabinet changes"
action={
<Button variant="ghost" size="sm">
See all
</Button>
}
/>
<div style={{ padding: '4px 18px 16px' }}>
{recentEvents?.data.length ? (
recentEvents.data.slice(0, 5).map((event) => (
<div
key={event._id}
style={{
display: 'flex',
gap: 10,
alignItems: 'center',
padding: '8px 0',
borderBottom: '1px dashed var(--border)',
}}
>
<Pill
tone={
event.eventType === 'consumed'
? 'info'
: event.eventType === 'added'
? 'ok'
: 'warn'
}
style={{ minWidth: 76, justifyContent: 'center' }}
>
{event.eventType}
</Pill>
<span style={{ flex: 1, fontSize: 12 }}>
<strong style={{ fontWeight: 500 }}>{event.medicineName}</strong>
</span>
<span
className="mono"
style={{ fontSize: 10, color: 'var(--ink-faint)', flexShrink: 0 }}
>
{new Date(event.createdAt).toLocaleDateString()}
</span>
</div>
))
) : (
<EmptyState message="No recent activity." />
)}
</div>
</Card>
</div>
</div>
</div>
</>
);
}
function StatBadge({
label,
value,
tone,
}: {
label: string;
value: number;
tone?: 'warn' | 'danger';
}) {
const color =
tone === 'danger' ? 'var(--danger)' : tone === 'warn' ? 'var(--warn)' : 'var(--brand)';
return (
<div
style={{
background: 'var(--bg-elev)',
border: '1px solid var(--border)',
borderRadius: 'var(--r-sm)',
padding: '10px 14px',
textAlign: 'center',
}}
>
<div
className="num"
style={{ fontSize: 24, fontWeight: 600, color, letterSpacing: '-0.02em', lineHeight: 1.15 }}
>
{value}
</div>
<div style={{ fontSize: 11, color: 'var(--ink-muted)', marginTop: 2 }}>{label}</div>
</div>
);
}
function DashboardCard({
title,
description,
href,
}: {
title: string;
description: string;
href: string;
}) {
function EmptyState({ message }: { message: string }) {
return (
<Link
href={href}
className="rounded-xl border bg-white p-6 shadow-sm hover:shadow-md transition-shadow"
<div
style={{ padding: '12px 0', fontSize: 13, color: 'var(--ink-muted)', textAlign: 'center' }}
>
<h2 className="text-lg font-semibold">{title}</h2>
<p className="mt-1 text-sm text-gray-500">{description}</p>
</Link>
{message}
</div>
);
}
function DashboardSkeleton() {
return (
<div style={{ padding: '28px 32px', maxWidth: 1400 }}>
{[1, 2, 3].map((i) => (
<div
key={i}
style={{
height: 80,
borderRadius: 'var(--r-md)',
background: 'var(--bg-inset)',
marginBottom: 16,
animation: 'pulse 1.5s infinite',
}}
/>
))}
</div>
);
}

23
packages/web/src/app/(dashboard)/layout.tsx
View file

@ -1,14 +1,31 @@
import { Sidebar } from '@/components/layout/Sidebar';
import { TopBar } from '@/components/layout/TopBar';
import { PageHeaderProvider } from '@/components/layout/PageHeaderContext';
export default function DashboardLayout({ children }: { children: React.ReactNode }) {
return (
<div className="flex h-screen">
<PageHeaderProvider>
<div
style={{
display: 'grid',
gridTemplateColumns: '248px 1fr',
minHeight: '100vh',
background: 'var(--bg)',
}}
>
<Sidebar />
<div className="flex flex-1 flex-col">
<div style={{ display: 'flex', flexDirection: 'column', minWidth: 0 }}>
<TopBar />
<main className="flex-1 overflow-auto p-6">{children}</main>
<main
style={{
flex: 1,
overflowY: 'auto',
}}
>
{children}
</main>
</div>
</div>
</PageHeaderProvider>
);
}

106
packages/web/src/app/(dashboard)/medicine-prices/__tests__/page.test.tsx
View file

@ -1,6 +1,7 @@
import { describe, it, expect, vi, beforeEach } from 'vitest';
import { render, screen, waitFor, fireEvent } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import type React from 'react';
const { mockUseApi } = vi.hoisted(() => ({ mockUseApi: vi.fn() }));
@ -28,7 +29,9 @@ vi.mock('@/services/medicines', () => ({
listMedicineProducts: mockListMedicineProducts,
}));
vi.mock('@/services/stores', () => ({ listStores: mockListStores }));
vi.mock('next/link', () => ({ default: (props: any) => props.children }));
vi.mock('next/link', () => ({
default: (props: { href?: string; children: React.ReactNode }) => props.children,
}));
import MedicinePricesPage from '../page';
@ -74,7 +77,9 @@ describe('MedicinePricesPage', () => {
it('loads price history when medicine selected', async () => {
mockUseApi.mockReturnValue({ householdId: 'hh1', isLoading: false });
mockListMedicines.mockResolvedValue({
data: [{ _id: 'med-1', name: 'Metformin', strength: 500, strengthUnit: 'mg', form: 'tablet' }],
data: [
{ _id: 'med-1', name: 'Metformin', strength: 500, strengthUnit: 'mg', form: 'tablet' },
],
pagination: { cursor: null, hasMore: false },
});
mockGetPriceHistory.mockResolvedValue({
@ -102,7 +107,9 @@ describe('MedicinePricesPage', () => {
await waitFor(() => screen.getByText('Select a medicine'));
fireEvent.change(screen.getAllByRole('combobox')[0]!, { target: { value: 'med-1' } });
await waitFor(() => expect(mockGetPriceHistory).toHaveBeenCalledWith('hh1', 'med-1', expect.any(Object)));
await waitFor(() =>
expect(mockGetPriceHistory).toHaveBeenCalledWith('hh1', 'med-1', expect.any(Object)),
);
// Wait for price records to render
await waitFor(() => expect(screen.getByText('Walgreens')).toBeInTheDocument());
});
@ -116,13 +123,15 @@ describe('MedicinePricesPage', () => {
await waitFor(() => screen.getByRole('button', { name: 'Record Price', hidden: false }));
// The submit button inside the form also has text 'Record Price'
const submitBtn = screen.getAllByRole('button', { name: 'Record Price' }).find(
(b) => b.getAttribute('type') === 'submit',
);
const submitBtn = screen
.getAllByRole('button', { name: 'Record Price' })
.find((b) => b.getAttribute('type') === 'submit');
if (submitBtn) {
fireEvent.submit(submitBtn.closest('form')!);
await waitFor(() =>
expect(screen.getByText('Please select a medicine, a product, and a store.')).toBeInTheDocument(),
expect(
screen.getByText('Please select a medicine, a product, and a store.'),
).toBeInTheDocument(),
);
}
});
@ -130,7 +139,9 @@ describe('MedicinePricesPage', () => {
it('shows error when price history fails', async () => {
mockUseApi.mockReturnValue({ householdId: 'hh1', isLoading: false });
mockListMedicines.mockResolvedValue({
data: [{ _id: 'med-1', name: 'Metformin', strength: 500, strengthUnit: 'mg', form: 'tablet' }],
data: [
{ _id: 'med-1', name: 'Metformin', strength: 500, strengthUnit: 'mg', form: 'tablet' },
],
pagination: { cursor: null, hasMore: false },
});
mockGetPriceHistory.mockRejectedValue(new Error('History load failed'));
@ -146,11 +157,21 @@ describe('MedicinePricesPage', () => {
it('records a price successfully', async () => {
mockUseApi.mockReturnValue({ householdId: 'hh1', isLoading: false });
mockListMedicines.mockResolvedValue({
data: [{ _id: 'med-1', name: 'Metformin', strength: 500, strengthUnit: 'mg', form: 'tablet' }],
data: [
{ _id: 'med-1', name: 'Metformin', strength: 500, strengthUnit: 'mg', form: 'tablet' },
],
pagination: { cursor: null, hasMore: false },
});
mockListStores.mockResolvedValue({
data: [{ _id: 'st-1', name: 'Walgreens', tags: [], isActive: true, createdAt: '2026-01-01T00:00:00.000Z' }],
data: [
{
_id: 'st-1',
name: 'Walgreens',
tags: [],
isActive: true,
createdAt: '2026-01-01T00:00:00.000Z',
},
],
pagination: { cursor: null, hasMore: false },
});
mockListMedicineProducts.mockResolvedValue({
@ -176,17 +197,28 @@ describe('MedicinePricesPage', () => {
fireEvent.change(screen.getByDisplayValue('Select product'), { target: { value: 'prod-1' } });
// Submit form
fireEvent.submit(screen.getByRole('button', { name: 'Record Price', hidden: true }).closest('form')!);
fireEvent.submit(
screen.getByRole('button', { name: 'Record Price', hidden: true }).closest('form')!,
);
await waitFor(() => expect(mockRecordPrice).toHaveBeenCalledWith('hh1', expect.objectContaining({ medicineId: 'med-1' })));
await waitFor(() =>
expect(mockRecordPrice).toHaveBeenCalledWith(
'hh1',
expect.objectContaining({ medicineId: 'med-1' }),
),
);
// Form should close after success
await waitFor(() => expect(screen.queryByText('Record Price', { selector: 'h2' })).not.toBeInTheDocument());
await waitFor(() =>
expect(screen.queryByText('Record Price', { selector: 'h2' })).not.toBeInTheDocument(),
);
});
it('shows Load more button in price history', async () => {
mockUseApi.mockReturnValue({ householdId: 'hh1', isLoading: false });
mockListMedicines.mockResolvedValue({
data: [{ _id: 'med-1', name: 'Metformin', strength: 500, strengthUnit: 'mg', form: 'tablet' }],
data: [
{ _id: 'med-1', name: 'Metformin', strength: 500, strengthUnit: 'mg', form: 'tablet' },
],
pagination: { cursor: null, hasMore: false },
});
mockGetPriceHistory.mockResolvedValue({
@ -223,11 +255,21 @@ describe('MedicinePricesPage', () => {
it('shows store filter when medicine selected and changes it', async () => {
mockUseApi.mockReturnValue({ householdId: 'hh1', isLoading: false });
mockListMedicines.mockResolvedValue({
data: [{ _id: 'med-1', name: 'Metformin', strength: 500, strengthUnit: 'mg', form: 'tablet' }],
data: [
{ _id: 'med-1', name: 'Metformin', strength: 500, strengthUnit: 'mg', form: 'tablet' },
],
pagination: { cursor: null, hasMore: false },
});
mockListStores.mockResolvedValue({
data: [{ _id: 'st-1', name: 'Walgreens', tags: [], isActive: true, createdAt: '2026-01-01T00:00:00.000Z' }],
data: [
{
_id: 'st-1',
name: 'Walgreens',
tags: [],
isActive: true,
createdAt: '2026-01-01T00:00:00.000Z',
},
],
pagination: { cursor: null, hasMore: false },
});
@ -245,7 +287,9 @@ describe('MedicinePricesPage', () => {
it('dismisses price history error', async () => {
mockUseApi.mockReturnValue({ householdId: 'hh1', isLoading: false });
mockListMedicines.mockResolvedValue({
data: [{ _id: 'med-1', name: 'Metformin', strength: 500, strengthUnit: 'mg', form: 'tablet' }],
data: [
{ _id: 'med-1', name: 'Metformin', strength: 500, strengthUnit: 'mg', form: 'tablet' },
],
pagination: { cursor: null, hasMore: false },
});
mockGetPriceHistory.mockRejectedValue(new Error('History load failed'));
@ -263,13 +307,31 @@ describe('MedicinePricesPage', () => {
it('shows store comparison table', async () => {
mockUseApi.mockReturnValue({ householdId: 'hh1', isLoading: false });
mockListMedicines.mockResolvedValue({
data: [{ _id: 'med-1', name: 'Metformin', strength: 500, strengthUnit: 'mg', form: 'tablet' }],
data: [
{ _id: 'med-1', name: 'Metformin', strength: 500, strengthUnit: 'mg', form: 'tablet' },
],
pagination: { cursor: null, hasMore: false },
});
mockCompareStores.mockResolvedValue({
data: [
{ storeId: 'st-1', storeName: 'Walgreens', latestPrice: 12.99, latestPricePerUnit: 0.14, currency: 'USD', date: '2026-01-01T00:00:00.000Z', isInsurancePrice: false },
{ storeId: 'st-2', storeName: 'CVS', latestPrice: 14.99, latestPricePerUnit: 0.17, currency: 'USD', date: '2026-01-01T00:00:00.000Z', isInsurancePrice: false },
{
storeId: 'st-1',
storeName: 'Walgreens',
latestPrice: 12.99,
latestPricePerUnit: 0.14,
currency: 'USD',
date: '2026-01-01T00:00:00.000Z',
isInsurancePrice: false,
},
{
storeId: 'st-2',
storeName: 'CVS',
latestPrice: 14.99,
latestPricePerUnit: 0.17,
currency: 'USD',
date: '2026-01-01T00:00:00.000Z',
isInsurancePrice: false,
},
],
});
@ -308,7 +370,9 @@ describe('MedicinePricesPage', () => {
await userEvent.click(screen.getByText('Record Price'));
await waitFor(() => screen.getByPlaceholderText('Search medicines...'));
fireEvent.change(screen.getByPlaceholderText('Search medicines...'), { target: { value: 'Met' } });
fireEvent.change(screen.getByPlaceholderText('Search medicines...'), {
target: { value: 'Met' },
});
// Notes field (no placeholder, but maxLength 1000)
const notesInput = document.querySelector('input[maxLength="1000"]') as HTMLElement;

161
packages/web/src/app/(dashboard)/medicine-prices/page.tsx
View file

@ -3,11 +3,8 @@
import { useState, useEffect, useCallback } from 'react';
import Link from 'next/link';
import { useApi } from '@/lib/useApi';
import {
recordPrice,
getPriceHistory,
compareStores,
} from '@/services/medicine-prices';
import { SetPageHeader } from '@/components/layout/SetPageHeader';
import { recordPrice, getPriceHistory, compareStores } from '@/services/medicine-prices';
import { listMedicines, listMedicineProducts } from '@/services/medicines';
import { listStores } from '@/services/stores';
import { DosageUnit } from '@meshitrack/shared';
@ -120,22 +117,18 @@ function RecordPriceForm({
}
return (
<div className="mb-6 rounded-xl border bg-white p-6 shadow-sm">
<div className="mt-card mb-6">
<h2 className="text-lg font-semibold mb-4">Record Price</h2>
{error && (
<div className="mb-4 rounded-lg bg-red-50 border border-red-200 p-3 text-sm text-red-700">
{error}
</div>
)}
{error && <div className="mt-alert mt-alert--danger mb-4">{error}</div>}
<form onSubmit={handleSubmit} className="space-y-4">
<div className="grid grid-cols-1 gap-4 md:grid-cols-2">
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">Store</label>
<label className="mt-field-label">Store</label>
<select
value={storeId}
onChange={(e) => setStoreId(e.target.value)}
required
className="w-full rounded-lg border px-3 py-2 text-sm focus:border-primary-500 focus:ring-1 focus:ring-primary-500 focus:outline-none"
className="mt-field"
>
<option value="">Select store</option>
{stores.map((s) => (
@ -147,7 +140,7 @@ function RecordPriceForm({
{stores.length === 0 && (
<p className="text-xs text-gray-400 mt-1">
No stores yet.{' '}
<Link href="/stores" className="text-primary-600 underline">
<Link href="/stores" className="mt-link">
Add a store first
</Link>
</p>
@ -155,19 +148,19 @@ function RecordPriceForm({
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">Medicine</label>
<label className="mt-field-label">Medicine</label>
<input
type="text"
value={medicineSearch}
onChange={(e) => setMedicineSearch(e.target.value)}
placeholder="Search medicines..."
className="w-full rounded-lg border px-3 py-2 text-sm focus:border-primary-500 focus:ring-1 focus:ring-primary-500 focus:outline-none mb-2"
className="mt-field mb-2"
/>
<select
value={medicineId}
onChange={(e) => handleMedicineChange(e.target.value)}
required
className="w-full rounded-lg border px-3 py-2 text-sm focus:border-primary-500 focus:ring-1 focus:ring-primary-500 focus:outline-none"
className="mt-field"
>
<option value="">Select medicine</option>
{filteredMedicines.map((m) => (
@ -179,7 +172,7 @@ function RecordPriceForm({
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">Product</label>
<label className="mt-field-label">Product</label>
{productsLoading ? (
<div className="animate-pulse h-10 rounded-lg bg-gray-200" />
) : (
@ -188,9 +181,11 @@ function RecordPriceForm({
onChange={(e) => handleProductChange(e.target.value)}
required
disabled={!medicineId}
className="w-full rounded-lg border px-3 py-2 text-sm focus:border-primary-500 focus:ring-1 focus:ring-primary-500 focus:outline-none disabled:bg-gray-50 disabled:text-gray-400"
className="mt-field"
>
<option value="">{medicineId ? 'Select product' : 'Select a medicine first'}</option>
<option value="">
{medicineId ? 'Select product' : 'Select a medicine first'}
</option>
{products.map((p) => (
<option key={p._id} value={p._id}>
{p.brand ?? 'Generic'} — {p.packageSize} {p.packageUnit}
@ -201,7 +196,7 @@ function RecordPriceForm({
{medicineId && !productsLoading && products.length === 0 && (
<p className="text-xs text-gray-400 mt-1">
No products for this medicine.{' '}
<Link href={`/medicines/${medicineId}`} className="text-primary-600 underline">
<Link href={`/medicines/${medicineId}`} className="mt-link">
Add a product first
</Link>
</p>
@ -210,7 +205,7 @@ function RecordPriceForm({
<div className="grid grid-cols-2 gap-3">
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">Price</label>
<label className="mt-field-label">Price</label>
<input
type="number"
required
@ -219,11 +214,11 @@ function RecordPriceForm({
value={price}
onChange={(e) => setPrice(e.target.value)}
placeholder="9.99"
className="w-full rounded-lg border px-3 py-2 text-sm focus:border-primary-500 focus:ring-1 focus:ring-primary-500 focus:outline-none"
className="mt-field"
/>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">Currency</label>
<label className="mt-field-label">Currency</label>
<input
type="text"
required
@ -231,14 +226,14 @@ function RecordPriceForm({
value={currency}
onChange={(e) => setCurrency(e.target.value)}
placeholder="USD"
className="w-full rounded-lg border px-3 py-2 text-sm focus:border-primary-500 focus:ring-1 focus:ring-primary-500 focus:outline-none"
className="mt-field"
/>
</div>
</div>
<div className="grid grid-cols-2 gap-3">
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">Package size</label>
<label className="mt-field-label">Package size</label>
<input
type="number"
required
@ -247,15 +242,15 @@ function RecordPriceForm({
value={quantity}
onChange={(e) => setQuantity(e.target.value)}
placeholder="90"
className="w-full rounded-lg border px-3 py-2 text-sm focus:border-primary-500 focus:ring-1 focus:ring-primary-500 focus:outline-none"
className="mt-field"
/>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">Unit</label>
<label className="mt-field-label">Unit</label>
<select
value={unit}
onChange={(e) => setUnit(e.target.value as DosageUnit)}
className="w-full rounded-lg border px-3 py-2 text-sm focus:border-primary-500 focus:ring-1 focus:ring-primary-500 focus:outline-none"
className="mt-field"
>
{Object.values(DosageUnit).map((u) => (
<option key={u} value={u}>
@ -267,15 +262,13 @@ function RecordPriceForm({
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
Notes (optional)
</label>
<label className="mt-field-label">Notes (optional)</label>
<input
type="text"
maxLength={1000}
value={notes}
onChange={(e) => setNotes(e.target.value)}
className="w-full rounded-lg border px-3 py-2 text-sm focus:border-primary-500 focus:ring-1 focus:ring-primary-500 focus:outline-none"
className="mt-field"
/>
</div>
@ -285,7 +278,7 @@ function RecordPriceForm({
id="isInsurancePrice"
checked={isInsurancePrice}
onChange={(e) => setIsInsurancePrice(e.target.checked)}
className="h-4 w-4 rounded border-gray-300 text-primary-600 focus:ring-primary-500"
className="h-4 w-4 rounded border-gray-300"
/>
<label htmlFor="isInsurancePrice" className="text-sm font-medium text-gray-700">
Insurance price
@ -294,18 +287,10 @@ function RecordPriceForm({
</div>
<div className="flex gap-3 pt-2">
<button
type="submit"
disabled={submitting}
className="rounded-lg bg-primary-600 px-4 py-2 text-sm font-medium text-white hover:bg-primary-700 disabled:opacity-50 transition-colors"
>
<button type="submit" disabled={submitting} className="mt-btn mt-btn--primary">
{submitting ? 'Recording...' : 'Record Price'}
</button>
<button
type="button"
onClick={onCancel}
className="rounded-lg border px-4 py-2 text-sm font-medium hover:bg-gray-50 transition-colors"
>
<button type="button" onClick={onCancel} className="mt-btn mt-btn--ghost">
Cancel
</button>
</div>
@ -371,14 +356,15 @@ function PriceHistory({
}, [householdId, selectedMedicineId, selectedStoreId]);
return (
<div className="rounded-xl border bg-white p-6 shadow-sm">
<div className="mt-card">
<h2 className="text-lg font-semibold mb-4">Price History</h2>
<div className="mb-4 flex flex-wrap items-center gap-3">
<select
value={selectedMedicineId}
onChange={(e) => setSelectedMedicineId(e.target.value)}
className="rounded-lg border px-3 py-2 text-sm focus:border-primary-500 focus:ring-1 focus:ring-primary-500 focus:outline-none"
className="mt-field"
style={{ width: 'auto' }}
>
<option value="">Select a medicine</option>
{medicines.map((m) => (
@ -391,7 +377,8 @@ function PriceHistory({
<select
value={selectedStoreId}
onChange={(e) => setSelectedStoreId(e.target.value)}
className="rounded-lg border px-3 py-2 text-sm focus:border-primary-500 focus:ring-1 focus:ring-primary-500 focus:outline-none"
className="mt-field"
style={{ width: 'auto' }}
>
<option value="">All stores</option>
{stores.map((s) => (
@ -404,7 +391,7 @@ function PriceHistory({
</div>
{error && (
<div className="mb-4 rounded-lg bg-red-50 border border-red-200 p-3 text-sm text-red-700">
<div className="mt-alert mt-alert--danger mb-4">
{error}
<button onClick={() => setError('')} className="ml-2 underline">
Dismiss
@ -439,18 +426,15 @@ function PriceHistory({
</thead>
<tbody className="divide-y divide-gray-100">
{comparison.map((item, i) => (
<tr key={item.storeId} className={i === 0 ? 'text-green-700 font-medium' : ''}>
<tr
key={item.storeId}
className={i === 0 ? 'text-green-700 font-medium' : ''}
>
<td className="py-2">
{item.storeName}
{i === 0 && (
<span className="ml-2 rounded-full bg-green-100 px-2 py-0.5 text-xs">
cheapest
</span>
)}
{i === 0 && <span className="ml-2 mt-pill mt-pill--ok">cheapest</span>}
{item.isInsurancePrice && (
<span className="ml-1 rounded-full bg-blue-100 text-blue-700 px-2 py-0.5 text-xs">
insurance
</span>
<span className="ml-1 mt-pill mt-pill--info">insurance</span>
)}
</td>
<td className="py-2 text-right">
@ -490,9 +474,7 @@ function PriceHistory({
<td className="py-2">
{r.storeName}
{r.isInsurancePrice && (
<span className="ml-1 rounded-full bg-blue-100 text-blue-700 px-2 py-0.5 text-xs">
ins
</span>
<span className="ml-1 mt-pill mt-pill--info">ins</span>
)}
{r.notes && (
<span className="ml-1 text-xs text-gray-400"> — {r.notes}</span>
@ -540,18 +522,18 @@ function MedicinePricesContent({ householdId }: { householdId: string }) {
const [historyKey, setHistoryKey] = useState(0);
useEffect(() => {
listMedicines(householdId, { limit: 100 }).then((r) => setMedicines(r.data)).catch(() => {});
listStores(householdId, { limit: 100 }).then((r) => setStores(r.data)).catch(() => {});
listMedicines(householdId, { limit: 100 })
.then((r) => setMedicines(r.data))
.catch(() => {});
listStores(householdId, { limit: 100 })
.then((r) => setStores(r.data))
.catch(() => {});
}, [householdId]);
return (
<div>
<div className="flex items-center justify-between mb-6">
<h1 className="text-2xl font-bold">Medicine Prices</h1>
<button
onClick={() => setShowForm(!showForm)}
className="rounded-lg bg-primary-600 px-4 py-2 text-sm font-medium text-white hover:bg-primary-700 transition-colors"
>
<button onClick={() => setShowForm(!showForm)} className="mt-btn mt-btn--primary">
{showForm ? 'Cancel' : 'Record Price'}
</button>
</div>
@ -586,33 +568,54 @@ export default function MedicinePricesPage() {
if (sessionLoading) {
return (
<div>
<h1 className="text-2xl font-bold mb-4">Medicine Prices</h1>
<div className="animate-pulse space-y-4">
<div className="h-10 w-48 rounded-lg bg-gray-200" />
<div className="h-40 rounded-xl bg-gray-200" />
<div className="h-40 rounded-xl bg-gray-200" />
<>
<SetPageHeader title="Medicine Prices" subtitle="Track & compare across stores" />
<div style={{ padding: '28px 32px' }}>
<div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
{[1, 2, 3].map((i) => (
<div
key={i}
style={{ height: 64, borderRadius: 'var(--r-md)', background: 'var(--bg-inset)' }}
/>
))}
</div>
</div>
</>
);
}
if (!householdId) {
return (
<div>
<h1 className="text-2xl font-bold mb-4">Medicine Prices</h1>
<div className="rounded-xl border bg-white p-6 shadow-sm">
<p className="text-gray-500">
<>
<SetPageHeader title="Medicine Prices" subtitle="Track & compare across stores" />
<div style={{ padding: '28px 32px' }}>
<div
style={{
background: 'var(--bg-elev)',
border: '1px solid var(--border)',
borderRadius: 'var(--r-md)',
padding: 24,
}}
>
<p style={{ color: 'var(--ink-muted)', fontSize: 14 }}>
You need to{' '}
<Link href="/settings" className="text-primary-600 underline">
<Link href="/settings" style={{ color: 'var(--brand)', textDecoration: 'underline' }}>
create or join a household
</Link>{' '}
before tracking prices.
</p>
</div>
</div>
</>
);
}
return <MedicinePricesContent householdId={householdId} />;
return (
<>
<SetPageHeader title="Medicine Prices" subtitle="Track & compare across stores" />
<div className="mt-page">
<MedicinePricesContent householdId={householdId} />
</div>
</>
);
}

72
packages/web/src/app/(dashboard)/medicines/ActivityTab.tsx
View file

@ -5,10 +5,7 @@ import { listCabinetEvents, getSpendingSummary } from '@/services/cabinet-events
import { listMedicines } from '@/services/medicines';
import { CabinetEventType } from '@meshitrack/shared';
import type { z } from 'zod/v4';
import type {
CabinetEventResponseSchema,
SpendingSummaryResponseSchema,
} from '@meshitrack/shared';
import type { CabinetEventResponseSchema, SpendingSummaryResponseSchema } from '@meshitrack/shared';
type CabinetEvent = z.infer<typeof CabinetEventResponseSchema>;
type SpendingSummary = z.infer<typeof SpendingSummaryResponseSchema>;
@ -27,13 +24,13 @@ const EVENT_TYPE_LABELS: Record<string, string> = {
deleted: 'Deleted',
};
const EVENT_TYPE_COLORS: Record<string, string> = {
purchased: 'bg-green-100 text-green-700',
consumed: 'bg-blue-100 text-blue-700',
adjusted: 'bg-yellow-100 text-yellow-700',
discarded: 'bg-red-100 text-red-700',
restored: 'bg-purple-100 text-purple-700',
deleted: 'bg-gray-100 text-gray-600',
const EVENT_TYPE_PILL: Record<string, string> = {
purchased: 'mt-pill--ok',
consumed: 'mt-pill--info',
adjusted: 'mt-pill--warn',
discarded: 'mt-pill--danger',
restored: 'mt-pill--brand',
deleted: 'mt-pill--ghost',
};
function formatDateTime(dateStr: string): string {
@ -41,7 +38,7 @@ function formatDateTime(dateStr: string): string {
}
/* v8 ignore next 4 */
function formatQuantityChange(event: CabinetEvent): string {
function _formatQuantityChange(event: CabinetEvent): string {
const sign = event.quantity > 0 ? '+' : '';
return `${sign}${event.quantity}`;
}
@ -49,9 +46,7 @@ function formatQuantityChange(event: CabinetEvent): string {
function QuantityBadge({ quantity }: { quantity: number }) {
const isPositive = quantity > 0;
return (
<span
className={`text-sm font-semibold ${isPositive ? 'text-green-600' : 'text-red-600'}`}
>
<span className={`text-sm font-semibold ${isPositive ? 'text-green-600' : 'text-red-600'}`}>
{isPositive ? '+' : ''}
{quantity}
</span>
@ -96,14 +91,15 @@ function SpendingSummaryView({
const PERIOD_LABELS = { month: 'This month', quarter: 'This quarter', year: 'This year' };
return (
<div className="rounded-xl border bg-white p-6 shadow-sm">
<div className="mt-card">
<div className="flex items-center justify-between mb-4 flex-wrap gap-3">
<h2 className="text-lg font-semibold">Spending Summary</h2>
<div className="flex items-center gap-2">
<select
value={period}
onChange={(e) => setPeriod(e.target.value as 'month' | 'quarter' | 'year')}
className="rounded-lg border px-3 py-2 text-sm focus:border-primary-500 focus:ring-1 focus:ring-primary-500 focus:outline-none"
className="mt-field"
style={{ width: 'auto' }}
>
{Object.entries(PERIOD_LABELS).map(([v, label]) => (
<option key={v} value={v}>
@ -114,7 +110,8 @@ function SpendingSummaryView({
<select
value={medicineId}
onChange={(e) => setMedicineId(e.target.value)}
className="rounded-lg border px-3 py-2 text-sm focus:border-primary-500 focus:ring-1 focus:ring-primary-500 focus:outline-none"
className="mt-field"
style={{ width: 'auto' }}
>
<option value="">All medicines</option>
{medicines.map((m) => (
@ -126,11 +123,7 @@ function SpendingSummaryView({
</div>
</div>
{error && (
<div className="mb-4 rounded-lg bg-red-50 border border-red-200 p-3 text-sm text-red-700">
{error}
</div>
)}
{error && <div className="mt-alert mt-alert--danger mb-4">{error}</div>}
{loading ? (
<div className="animate-pulse space-y-2">
@ -155,9 +148,7 @@ function SpendingSummaryView({
className="flex items-center justify-between rounded-lg border p-3"
>
<div>
<span className="text-sm font-medium text-gray-900">
{item.medicineName}
</span>
<span className="text-sm font-medium text-gray-900">{item.medicineName}</span>
<span className="ml-2 text-xs text-gray-500">
{item.purchaseCount} purchase{item.purchaseCount !== 1 ? 's' : ''} &bull;{' '}
avg {summary.currency ? `${summary.currency} ` : ''}
@ -256,14 +247,15 @@ function EventTimeline({
}, [householdId, filterEventType, filterMedicineId, startDate, endDate]);
return (
<div className="rounded-xl border bg-white p-6 shadow-sm">
<div className="mt-card">
<h2 className="text-lg font-semibold mb-4">Cabinet Activity</h2>
<div className="mb-4 flex flex-wrap items-center gap-3">
<select
value={filterEventType}
onChange={(e) => setFilterEventType(e.target.value)}
className="rounded-lg border px-3 py-2 text-sm focus:border-primary-500 focus:ring-1 focus:ring-primary-500 focus:outline-none"
className="mt-field"
style={{ width: 'auto' }}
>
<option value="">All event types</option>
{Object.values(CabinetEventType).map((t) => (
@ -275,7 +267,8 @@ function EventTimeline({
<select
value={filterMedicineId}
onChange={(e) => setFilterMedicineId(e.target.value)}
className="rounded-lg border px-3 py-2 text-sm focus:border-primary-500 focus:ring-1 focus:ring-primary-500 focus:outline-none"
className="mt-field"
style={{ width: 'auto' }}
>
<option value="">All medicines</option>
{medicines.map((m) => (
@ -288,14 +281,16 @@ function EventTimeline({
type="date"
value={startDate}
onChange={(e) => setStartDate(e.target.value)}
className="rounded-lg border px-3 py-2 text-sm focus:border-primary-500 focus:ring-1 focus:ring-primary-500 focus:outline-none"
className="mt-field"
style={{ width: 'auto' }}
title="Start date"
/>
<input
type="date"
value={endDate}
onChange={(e) => setEndDate(e.target.value)}
className="rounded-lg border px-3 py-2 text-sm focus:border-primary-500 focus:ring-1 focus:ring-primary-500 focus:outline-none"
className="mt-field"
style={{ width: 'auto' }}
title="End date"
/>
{(filterEventType || filterMedicineId || startDate || endDate) && (
@ -306,7 +301,7 @@ function EventTimeline({
setStartDate('');
setEndDate('');
}}
className="text-sm text-gray-500 underline"
className="mt-link text-sm"
>
Clear filters
</button>
@ -314,7 +309,7 @@ function EventTimeline({
</div>
{error && (
<div className="mb-4 rounded-lg bg-red-50 border border-red-200 p-3 text-sm text-red-700">
<div className="mt-alert mt-alert--danger mb-4">
{error}
<button onClick={() => setError('')} className="ml-2 underline">
Dismiss
@ -349,7 +344,7 @@ function EventTimeline({
<div className="flex items-start justify-between gap-3 flex-wrap">
<div className="flex items-center gap-2 flex-wrap">
<span
className={`rounded-full px-2 py-0.5 text-xs font-medium ${/* v8 ignore next */ EVENT_TYPE_COLORS[event.eventType] ?? 'bg-gray-100 text-gray-600'}`}
className={`mt-pill ${/* v8 ignore next */ EVENT_TYPE_PILL[event.eventType] ?? 'mt-pill--ghost'}`}
>
{/* v8 ignore next */ EVENT_TYPE_LABELS[event.eventType] ?? event.eventType}
</span>
@ -385,10 +380,7 @@ function EventTimeline({
{hasMore && (
<div className="mt-4 text-center">
<button
onClick={() => fetchEvents(true)}
className="rounded-lg border px-4 py-2 text-sm font-medium hover:bg-gray-50 transition-colors"
>
<button onClick={() => fetchEvents(true)} className="mt-btn mt-btn--ghost">
Load more
</button>
</div>
@ -407,7 +399,9 @@ export function ActivityTab({ householdId }: { householdId: string }) {
useEffect(() => {
listMedicines(householdId, { limit: 100 })
.then((r) =>
setMedicines(r.data.map((m: { _id: string; name: string }) => ({ _id: m._id, name: m.name }))),
setMedicines(
r.data.map((m: { _id: string; name: string }) => ({ _id: m._id, name: m.name })),
),
)
.catch(() => {});
}, [householdId]);

691
packages/web/src/app/(dashboard)/medicines/CabinetTab.tsx
View file

@ -15,6 +15,8 @@ import {
defaultUnitForForm,
} from '@meshitrack/shared';
import type { MedicineForm, CreateCabinetItemInput } from '@meshitrack/shared';
import { Icon } from '@/components/ui/Icon';
import type { IconName } from '@/components/ui/Icon';
type CabinetItem = {
_id: string;
@ -76,21 +78,32 @@ const STATUS_LABELS: Record<string, string> = {
expired: 'Expired',
};
const STATUS_COLORS: Record<string, string> = {
active: 'bg-green-100 text-green-700',
depleted: 'bg-gray-100 text-gray-600',
expired: 'bg-red-100 text-red-700',
};
const VIZ_COLORS = [
'var(--viz-1)',
'var(--viz-2)',
'var(--viz-3)',
'var(--viz-4)',
'var(--viz-5)',
'var(--viz-6)',
];
function getExpiryColor(expirationDate?: string): string {
if (!expirationDate) return '';
const now = new Date();
const expiry = new Date(expirationDate);
const daysUntil = Math.ceil((expiry.getTime() - now.getTime()) / (1000 * 60 * 60 * 24));
if (daysUntil <= 0) return 'text-red-600 font-semibold';
if (daysUntil <= 7) return 'text-red-500';
if (daysUntil <= 30) return 'text-yellow-600';
return 'text-green-600';
function vizColor(index: number): string {
return VIZ_COLORS[index % VIZ_COLORS.length] ?? VIZ_COLORS[0]!;
}
function iconForForm(form: string): IconName {
if (form === 'injection') return 'injection';
if (form === 'capsule') return 'capsule';
if (form === 'liquid') return 'vial';
return 'pill';
}
function getLevel(earliestExpiry: string | null): 'ok' | 'expiring' | 'critical' {
if (!earliestExpiry) return 'ok';
const days = Math.ceil((new Date(earliestExpiry).getTime() - Date.now()) / 86400000);
if (days <= 0) return 'critical';
if (days <= 30) return 'expiring';
return 'ok';
}
function formatDate(dateStr?: string): string {
@ -100,14 +113,99 @@ function formatDate(dateStr?: string): string {
function daysUntilExpiry(dateStr?: string): string {
if (!dateStr) return '';
const now = new Date();
const expiry = new Date(dateStr);
const days = Math.ceil((expiry.getTime() - now.getTime()) / (1000 * 60 * 60 * 24));
const days = Math.ceil((new Date(dateStr).getTime() - Date.now()) / 86400000);
if (days <= 0) return '(expired)';
if (days === 1) return '(1 day)';
return `(${days} days)`;
}
function expiryTextColor(dateStr?: string): string {
if (!dateStr) return 'var(--ink-muted)';
const days = Math.ceil((new Date(dateStr).getTime() - Date.now()) / 86400000);
if (days <= 0) return 'var(--danger)';
if (days <= 30) return 'var(--warn)';
return 'var(--ok)';
}
// ─── ExpiryBar ───────────────────────────────────────────────────────────────
function ExpiryBar({ expirationDate }: { expirationDate: string | null }) {
if (!expirationDate) {
return (
<div className="daysbar">
<div className="daysbar__track" />
<div className="daysbar__label num">
<span className="daysbar__num" style={{ color: 'var(--ink-faint)' }}>
—
</span>
<span className="daysbar__unit">exp</span>
</div>
</div>
);
}
const daysLeft = Math.ceil((new Date(expirationDate).getTime() - Date.now()) / 86400000);
const pct = Math.max(0, Math.min(100, (daysLeft / 365) * 100));
const tone = daysLeft <= 0 ? 'critical' : daysLeft <= 30 ? 'low' : 'ok';
return (
<div className={`daysbar daysbar--${tone}`}>
<div className="daysbar__track">
<div className="daysbar__fill" style={{ width: `${pct}%` }} />
</div>
<div className="daysbar__label num">
<span className="daysbar__num">{Math.max(0, daysLeft)}</span>
<span className="daysbar__unit">days</span>
</div>
</div>
);
}
// ─── StatsStrip ──────────────────────────────────────────────────────────────
function StatsStrip({ items }: { items: SummaryItem[] }) {
const now = Date.now();
const expiringSoon = items.filter((i) => {
if (!i.earliestExpiry) return false;
const d = Math.ceil((new Date(i.earliestExpiry).getTime() - now) / 86400000);
return d > 0 && d <= 30;
}).length;
const expired = items.filter((i) => {
if (!i.earliestExpiry) return false;
return new Date(i.earliestExpiry).getTime() <= now;
}).length;
const totalLots = items.reduce((s, i) => s + i.itemCount, 0);
const stats = [
{ label: 'Medicines', value: items.length, hint: 'distinct medicines', tone: 'ink' },
{
label: 'Expiring <30d',
value: expiringSoon,
hint: 'check dates soon',
tone: expiringSoon > 0 ? 'warn' : 'ink',
},
{
label: 'Expired',
value: expired,
hint: 'need to discard',
tone: expired > 0 ? 'danger' : 'ink',
},
{ label: 'Total lots', value: totalLots, hint: 'individual packages', tone: 'brand' },
];
return (
<div className="cab-summary" style={{ marginBottom: 20 }}>
{stats.map((s) => (
<div key={s.label} className={`cab-summary__item cab-summary__item--${s.tone}`}>
<div className="cab-summary__label">{s.label}</div>
<div className="cab-summary__value num">{s.value}</div>
<div className="cab-summary__hint">{s.hint}</div>
</div>
))}
</div>
);
}
// ─── CabinetTab ──────────────────────────────────────────────────────────────
export function CabinetTab({ householdId }: { householdId: string }) {
const [view, setView] = useState<'summary' | 'detail'>('summary');
const [summaryItems, setSummaryItems] = useState<SummaryItem[]>([]);
@ -203,56 +301,44 @@ export function CabinetTab({ householdId }: { householdId: string }) {
return (
<div>
<div className="flex items-center justify-between mb-4">
<div />
<button
onClick={() => setShowForm(!showForm)}
className="rounded-lg bg-primary-600 px-4 py-2 text-sm font-medium text-white hover:bg-primary-700 transition-colors"
>
{showForm ? 'Cancel' : 'Add to Cabinet'}
</button>
</div>
{error && (
<div className="mb-4 rounded-lg bg-red-50 border border-red-200 p-3 text-sm text-red-700">
{error}
<button onClick={() => setError('')} className="ml-2 underline">
Dismiss
</button>
</div>
{/* Stats strip — only in summary view once loaded */}
{view === 'summary' && !loading && summaryItems.length > 0 && (
<StatsStrip items={summaryItems} />
)}
{showForm && (
<AddToCabinetForm
householdId={householdId}
onCreated={() => {
setShowForm(false);
fetchData();
{/* Toolbar */}
<div
style={{
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
gap: 12,
marginBottom: 16,
flexWrap: 'wrap',
}}
onCancel={() => setShowForm(false)}
/>
)}
<div className="mb-4 flex items-center gap-3">
<div className="flex rounded-lg border overflow-hidden">
>
<div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
<div className="mt-seg">
<button
onClick={() => setView('summary')}
className={`px-4 py-2 text-sm font-medium transition-colors ${view === 'summary' ? 'bg-primary-600 text-white' : 'bg-white text-gray-700 hover:bg-gray-50'}`}
className={view === 'summary' ? 'is-active' : ''}
>
Summary
</button>
<button
onClick={() => setView('detail')}
className={`px-4 py-2 text-sm font-medium transition-colors ${view === 'detail' ? 'bg-primary-600 text-white' : 'bg-white text-gray-700 hover:bg-gray-50'}`}
className={view === 'detail' ? 'is-active' : ''}
>
All Items
</button>
</div>
{view === 'detail' && (
<select
value={filterStatus}
onChange={(e) => setFilterStatus(e.target.value)}
className="rounded-lg border px-3 py-2 text-sm focus:border-primary-500 focus:ring-1 focus:ring-primary-500 focus:outline-none"
className="mt-field"
style={{ width: 'auto', padding: '5px 10px', fontSize: 12 }}
>
<option value="">All Statuses</option>
{Object.values(CabinetItemStatus).map((s) => (
@ -264,10 +350,68 @@ export function CabinetTab({ householdId }: { householdId: string }) {
)}
</div>
<button onClick={() => setShowForm(!showForm)} className="mt-btn mt-btn--primary">
<Icon name="plus" size={14} />
{showForm ? 'Cancel' : 'Add to Cabinet'}
</button>
</div>
{/* Error */}
{error && (
<div
style={{
marginBottom: 16,
background: 'var(--danger-soft)',
border: '1px solid color-mix(in oklab, var(--danger) 25%, var(--danger-soft))',
borderRadius: 'var(--r-sm)',
padding: '10px 14px',
fontSize: 13,
color: 'var(--danger)',
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
gap: 12,
}}
>
<span>{error}</span>
<button
onClick={() => setError('')}
style={{
fontSize: 12,
color: 'var(--danger)',
textDecoration: 'underline',
cursor: 'pointer',
}}
>
Dismiss
</button>
</div>
)}
{/* Add form */}
{showForm && (
<AddToCabinetForm
householdId={householdId}
onCreated={() => {
setShowForm(false);
fetchData();
}}
onCancel={() => setShowForm(false)}
/>
)}
{/* Content */}
{loading ? (
<div className="space-y-3">
<div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
{Array.from({ length: 3 }).map((_, i) => (
<div key={i} className="animate-pulse rounded-xl border bg-white p-4 h-20" />
<div
key={i}
style={{
height: 72,
borderRadius: 'var(--r-md)',
background: 'var(--bg-inset)',
}}
/>
))}
</div>
) : view === 'summary' ? (
@ -287,6 +431,8 @@ export function CabinetTab({ householdId }: { householdId: string }) {
);
}
// ─── SummaryView ─────────────────────────────────────────────────────────────
function SummaryView({
items,
expandedMedicine,
@ -306,78 +452,145 @@ function SummaryView({
}) {
if (items.length === 0) {
return (
<div className="rounded-xl border bg-white p-6 shadow-sm text-center text-gray-500">
<div
style={{
background: 'var(--bg-elev)',
border: '1px solid var(--border)',
borderRadius: 'var(--r-md)',
padding: '48px 24px',
textAlign: 'center',
color: 'var(--ink-muted)',
fontSize: 14,
}}
>
Your cabinet is empty. Add medicines above.
</div>
);
}
return (
<div className="space-y-3">
{items.map((item) => (
<div key={item.medicineId}>
<div className="cab-grid">
{items.map((item, idx) => {
const level = getLevel(item.earliestExpiry);
const color = vizColor(idx);
const isExpanded = expandedMedicine === item.medicineId;
const isWarnExpiry =
item.earliestExpiry !== null &&
Math.ceil((new Date(item.earliestExpiry).getTime() - Date.now()) / 86400000) < 60;
return (
<div key={item.medicineId} style={{ display: 'flex', flexDirection: 'column' }}>
<button
onClick={() => onExpand(item.medicineId)}
className="w-full rounded-xl border bg-white p-4 shadow-sm text-left hover:bg-gray-50 transition-colors"
className={`cab-card cab-card--lvl-${level}`}
style={{ '--c': color } as React.CSSProperties}
>
<div className="flex items-center justify-between">
<div>
<h3 className="font-medium text-gray-900">{item.medicineName}</h3>
<p className="text-sm text-gray-500">
{item.medicineStrength} {item.medicineStrengthUnit}{' '}
<div className="cab-card__top">
<div className="cab-card__swatch">
<Icon name={iconForForm(item.medicineForm)} size={16} />
</div>
<div className="cab-card__meta">
<div className="cab-card__name">{item.medicineName}</div>
<div className="cab-card__strength">
{item.medicineStrength} {item.medicineStrengthUnit}&nbsp;·&nbsp;
{FORM_LABELS[item.medicineForm] ?? item.medicineForm}
</p>
</div>
<div className="flex items-center gap-4">
<div className="text-right">
<p className="text-lg font-semibold text-gray-900">
{item.totalQuantity} {UNIT_LABELS[item.unit] ?? item.unit}
</p>
<p className="text-xs text-gray-500">
{item.itemCount} {item.itemCount === 1 ? 'item' : 'items'}
</p>
</div>
{item.earliestExpiry && (
<div className={`text-right text-sm ${getExpiryColor(item.earliestExpiry)}`}>
<p>Exp: {formatDate(item.earliestExpiry)}</p>
<p className="text-xs">{daysUntilExpiry(item.earliestExpiry)}</p>
</div>
)}
<svg
className={`h-5 w-5 text-gray-400 transition-transform ${expandedMedicine === item.medicineId ? 'rotate-180' : ''}`}
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
{level !== 'ok' && (
<span
className={`mt-pill cab-card__flag ${level === 'critical' ? 'mt-pill--danger' : 'mt-pill--warn'}`}
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M19 9l-7 7-7-7"
/>
</svg>
{level === 'critical' ? 'Expired' : 'Expiring'}
</span>
)}
</div>
<div className="cab-card__qty">
<div className="cab-card__qty-num num">{item.totalQuantity}</div>
<div className="cab-card__qty-unit">{UNIT_LABELS[item.unit] ?? item.unit}</div>
</div>
<ExpiryBar expirationDate={item.earliestExpiry} />
<div className="cab-card__foot">
<div>
<div className="cab-card__foot-label">Expiry</div>
<div
className={`cab-card__foot-value num${isWarnExpiry ? ' cab-card__foot-value--warn' : ''}`}
>
{item.earliestExpiry
? new Date(item.earliestExpiry).toISOString().slice(0, 7)
: '—'}
</div>
</div>
<div>
<div className="cab-card__foot-label">Lots</div>
<div className="cab-card__foot-value num">{item.itemCount}</div>
</div>
<div>
<div className="cab-card__foot-label">Items</div>
<div className="cab-card__foot-value num">
{item.itemCount} {item.itemCount === 1 ? 'item' : 'items'}
</div>
</div>
</div>
<div
aria-hidden="true"
style={{
position: 'absolute',
bottom: 8,
right: 10,
color: 'var(--ink-faint)',
transform: isExpanded ? 'rotate(180deg)' : 'rotate(0deg)',
transition: 'transform 0.2s',
}}
>
<Icon name="chevDown" size={14} />
</div>
</button>
{expandedMedicine === item.medicineId && (
<div className="ml-6 mt-2 space-y-2">
{/* Expanded items */}
{isExpanded && (
<div className="cab-items" style={{ marginTop: 6, marginBottom: 2 }}>
{expandLoading ? (
<div className="animate-pulse rounded-lg border bg-gray-50 p-3 h-14" />
<div style={{ padding: '14px 16px' }}>
<div
style={{
height: 40,
borderRadius: 'var(--r-sm)',
background: 'var(--bg-inset)',
}}
/>
</div>
) : expandedItems.length === 0 ? (
<p className="text-sm text-gray-500 p-2">No active items</p>
<div
style={{
padding: '14px 16px',
fontSize: 13,
color: 'var(--ink-muted)',
}}
>
No active items
</div>
) : (
expandedItems.map((ci) => (
<CabinetItemCard key={ci._id} item={ci} onAdjust={onAdjust} onDelete={onDelete} />
<div key={ci._id} className="cab-items__row">
<CabinetItemCard item={ci} onAdjust={onAdjust} onDelete={onDelete} />
</div>
))
)}
</div>
)}
</div>
))}
);
})}
</div>
);
}
// ─── DetailView ───────────────────────────────────────────────────────────────
function DetailView({
items,
onAdjust,
@ -389,27 +602,35 @@ function DetailView({
}) {
if (items.length === 0) {
return (
<div className="rounded-xl border bg-white p-6 shadow-sm text-center text-gray-500">
<div
style={{
background: 'var(--bg-elev)',
border: '1px solid var(--border)',
borderRadius: 'var(--r-md)',
padding: '48px 24px',
textAlign: 'center',
color: 'var(--ink-muted)',
fontSize: 14,
}}
>
No items match your filter.
</div>
);
}
return (
<div className="space-y-3">
<div className="cab-list">
{items.map((item) => (
<CabinetItemCard
key={item._id}
item={item}
showMedicineName
onAdjust={onAdjust}
onDelete={onDelete}
/>
<div key={item._id} className="cab-list__row">
<CabinetItemCard item={item} showMedicineName onAdjust={onAdjust} onDelete={onDelete} />
</div>
))}
</div>
);
}
// ─── CabinetItemCard ─────────────────────────────────────────────────────────
function CabinetItemCard({
item,
showMedicineName = false,
@ -421,83 +642,155 @@ function CabinetItemCard({
onAdjust: (id: string, delta: number) => void;
onDelete: (id: string) => void;
}) {
const statusStyle =
item.status === 'active'
? { background: 'var(--ok-soft)', color: 'var(--ok)' }
: item.status === 'expired'
? { background: 'var(--danger-soft)', color: 'var(--danger)' }
: { background: 'var(--bg-inset)', color: 'var(--ink-muted)' };
return (
<div className="rounded-lg border bg-white p-3 shadow-sm">
<div className="flex items-center justify-between">
<div className="flex-1 min-w-0">
{showMedicineName && <h4 className="font-medium text-gray-900">{item.medicineName}</h4>}
<div className="flex items-center gap-2 text-sm text-gray-600">
<div
style={{
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
gap: 12,
width: '100%',
minWidth: 0,
}}
>
{/* Left: info */}
<div style={{ flex: 1, minWidth: 0 }}>
{showMedicineName && (
<div
style={{
fontSize: 14,
fontWeight: 500,
color: 'var(--ink-strong)',
marginBottom: 2,
}}
>
{item.medicineName}
</div>
)}
<div
style={{
display: 'flex',
alignItems: 'center',
gap: 8,
fontSize: 13,
color: 'var(--ink-muted)',
flexWrap: 'wrap',
}}
>
{showMedicineName && (
<span>
{item.medicineStrength} {item.medicineStrengthUnit}{' '}
{item.medicineStrength} {item.medicineStrengthUnit}&nbsp;
{FORM_LABELS[item.medicineForm] ?? item.medicineForm}
</span>
)}
{item.medicineProductBrand && (
<span className="text-gray-400">({item.medicineProductBrand})</span>
<span style={{ color: 'var(--ink-faint)' }}>({item.medicineProductBrand})</span>
)}
{item.concentration != null && item.concentrationUnit && (
<span className="text-gray-500">
<span>
{item.concentration} {item.concentrationUnit}
</span>
)}
</div>
<div className="flex items-center gap-3 mt-1 text-sm">
<span className="font-medium">
<div
style={{
display: 'flex',
alignItems: 'center',
gap: 10,
marginTop: 4,
fontSize: 13,
}}
>
<span style={{ fontWeight: 600, color: 'var(--ink-strong)' }}>
{item.quantity} {UNIT_LABELS[item.unit] ?? item.unit}
</span>
{item.expirationDate && (
<span className={getExpiryColor(item.expirationDate)}>
<span style={{ color: expiryTextColor(item.expirationDate) }}>
Exp: {formatDate(item.expirationDate)} {daysUntilExpiry(item.expirationDate)}
</span>
)}
</div>
{item.notes && <p className="text-xs text-gray-400 mt-1">{item.notes}</p>}
{item.notes && (
<div style={{ fontSize: 12, color: 'var(--ink-faint)', marginTop: 2 }}>{item.notes}</div>
)}
</div>
<div className="flex items-center gap-2 ml-3">
<span
className={`rounded-full px-2 py-0.5 text-xs font-medium ${/* v8 ignore next */ STATUS_COLORS[item.status] ?? STATUS_COLORS['active']}`}
>
{/* v8 ignore next */ STATUS_LABELS[item.status] ?? item.status}
{/* Right: status + actions */}
<div style={{ display: 'flex', alignItems: 'center', gap: 8, flexShrink: 0 }}>
<span className="mt-pill" style={statusStyle}>
{/* v8 ignore next */}
{STATUS_LABELS[item.status] ?? item.status}
</span>
{item.status === 'active' && (
<div className="flex items-center gap-1">
<div style={{ display: 'flex', alignItems: 'center', gap: 3 }}>
<button
onClick={() => onAdjust(item._id, -1)}
className="rounded border px-2 py-1 text-xs font-medium text-gray-600 hover:bg-gray-100 transition-colors"
style={{
border: '1px solid var(--border)',
padding: '3px 8px',
borderRadius: 'var(--r-xs)',
fontSize: 12,
fontWeight: 600,
color: 'var(--ink-muted)',
background: 'var(--bg-elev)',
cursor: 'pointer',
lineHeight: 1.5,
}}
title="Take 1"
>
-1
</button>
<button
onClick={() => onAdjust(item._id, 1)}
className="rounded border px-2 py-1 text-xs font-medium text-gray-600 hover:bg-gray-100 transition-colors"
style={{
border: '1px solid var(--border)',
padding: '3px 8px',
borderRadius: 'var(--r-xs)',
fontSize: 12,
fontWeight: 600,
color: 'var(--ink-muted)',
background: 'var(--bg-elev)',
cursor: 'pointer',
lineHeight: 1.5,
}}
title="Add 1"
>
+1
</button>
</div>
)}
<button
onClick={() => onDelete(item._id)}
className="rounded p-1 text-gray-400 hover:text-red-600 hover:bg-red-50 transition-colors"
style={{
padding: 5,
borderRadius: 'var(--r-xs)',
color: 'var(--ink-faint)',
background: 'transparent',
border: 'none',
cursor: 'pointer',
display: 'flex',
alignItems: 'center',
}}
title="Delete"
>
<svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
/>
</svg>
<Icon name="trash" size={15} />
</button>
</div>
</div>
</div>
);
}
// ─── AddToCabinetForm ─────────────────────────────────────────────────────────
function AddToCabinetForm({
householdId,
onCreated,
@ -563,22 +856,80 @@ function AddToCabinetForm({
}
return (
<div className="mb-6 rounded-xl border bg-white p-6 shadow-sm">
<h2 className="text-lg font-semibold mb-4">Add to Cabinet</h2>
<div
style={{
marginBottom: 20,
background: 'var(--bg-elev)',
border: '1px solid var(--border)',
borderRadius: 'var(--r-md)',
overflow: 'hidden',
}}
>
{/* Header */}
<div
style={{
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
padding: '14px 20px',
borderBottom: '1px solid var(--border)',
background: 'var(--bg-inset)',
}}
>
<div
style={{
fontFamily: 'var(--font-display)',
fontSize: 16,
fontWeight: 500,
color: 'var(--ink-strong)',
}}
>
Add to Cabinet
</div>
<button
type="button"
onClick={onCancel}
style={{
color: 'var(--ink-muted)',
padding: 4,
borderRadius: 'var(--r-xs)',
cursor: 'pointer',
}}
aria-label="Close"
>
<Icon name="x" size={16} />
</button>
</div>
{/* Body */}
<div style={{ padding: '20px' }}>
{error && (
<div className="mb-4 rounded-lg bg-red-50 border border-red-200 p-3 text-sm text-red-700">
<div
style={{
marginBottom: 16,
background: 'var(--danger-soft)',
border: '1px solid color-mix(in oklab, var(--danger) 25%, var(--danger-soft))',
borderRadius: 'var(--r-sm)',
padding: '10px 14px',
fontSize: 13,
color: 'var(--danger)',
}}
>
{error}
</div>
)}
<form onSubmit={handleSubmit} className="space-y-4">
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">Medicine</label>
<form onSubmit={handleSubmit}>
{/* Medicine */}
<div style={{ marginBottom: 16 }}>
<label className="mt-field-label">Medicine</label>
<input
type="text"
value={medicineSearch}
onChange={(e) => setMedicineSearch(e.target.value)}
placeholder="Search medicines..."
className="w-full rounded-lg border px-3 py-2 text-sm focus:border-primary-500 focus:ring-1 focus:ring-primary-500 focus:outline-none mb-2"
className="mt-field"
style={{ marginBottom: 8 }}
/>
<select
value={formData.medicineId}
@ -588,30 +939,36 @@ function AddToCabinetForm({
const defUnit = medForm ? defaultUnitForForm(medForm) : DosageUnit.TABLET;
setFormData({ ...formData, medicineId: e.target.value, unit: defUnit });
}}
className="w-full rounded-lg border px-3 py-2 text-sm focus:border-primary-500 focus:ring-1 focus:ring-primary-500 focus:outline-none"
className="mt-field"
required
>
<option value="">Select a medicine</option>
{medicines.map((med) => (
<option key={med._id} value={med._id}>
{med.name} ({med.strength} {med.strengthUnit}, {/* v8 ignore next */ FORM_LABELS[med.form] ?? med.form})
{med.name} ({med.strength} {med.strengthUnit}, {/* v8 ignore next */}
{FORM_LABELS[med.form] ?? med.form})
</option>
))}
</select>
{medicines.length === 0 && (
<p className="text-xs text-gray-400 mt-1">
<p style={{ fontSize: 12, color: 'var(--ink-faint)', marginTop: 6 }}>
No medicines found.{' '}
<Link href="/medicines" className="text-primary-600 underline">
<Link
href="/medicines"
style={{ color: 'var(--brand)', textDecoration: 'underline' }}
>
Add medicines first
</Link>
</p>
)}
</div>
<div className="grid grid-cols-1 gap-4 md:grid-cols-2">
<div className="grid grid-cols-2 gap-3">
{/* Qty + Unit */}
<div
style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12, marginBottom: 16 }}
>
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">Quantity</label>
<label className="mt-field-label">Quantity</label>
<input
type="number"
required
@ -620,15 +977,15 @@ function AddToCabinetForm({
value={formData.quantity || ''}
onChange={(e) => setFormData({ ...formData, quantity: Number(e.target.value) })}
placeholder="30"
className="w-full rounded-lg border px-3 py-2 text-sm focus:border-primary-500 focus:ring-1 focus:ring-primary-500 focus:outline-none"
className="mt-field"
/>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">Unit</label>
<label className="mt-field-label">Unit</label>
<select
value={formData.unit}
onChange={(e) => setFormData({ ...formData, unit: e.target.value as DosageUnit })}
className="w-full rounded-lg border px-3 py-2 text-sm focus:border-primary-500 focus:ring-1 focus:ring-primary-500 focus:outline-none"
className="mt-field"
>
{(() => {
const selectedMed = medicines.find((m) => m._id === formData.medicineId);
@ -637,7 +994,8 @@ function AddToCabinetForm({
: Object.values(DosageUnit);
return units.map((u) => (
<option key={u} value={u}>
{/* v8 ignore next */ UNIT_LABELS[u] ?? u}
{/* v8 ignore next */}
{UNIT_LABELS[u] ?? u}
</option>
));
})()}
@ -645,48 +1003,43 @@ function AddToCabinetForm({
</div>
</div>
{/* Expiry + Notes */}
<div
style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12, marginBottom: 20 }}
>
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
Expiration Date (optional)
</label>
<label className="mt-field-label">Expiration Date (optional)</label>
<input
type="date"
value={expirationDate}
onChange={(e) => setExpirationDate(e.target.value)}
className="w-full rounded-lg border px-3 py-2 text-sm focus:border-primary-500 focus:ring-1 focus:ring-primary-500 focus:outline-none"
className="mt-field"
/>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">Notes (optional)</label>
<label className="mt-field-label">Notes (optional)</label>
<input
type="text"
maxLength={1000}
value={notes}
onChange={(e) => setNotes(e.target.value)}
placeholder="Any notes about this item"
className="w-full rounded-lg border px-3 py-2 text-sm focus:border-primary-500 focus:ring-1 focus:ring-primary-500 focus:outline-none"
className="mt-field"
/>
</div>
</div>
<div className="flex gap-3 pt-2">
<button
type="submit"
disabled={submitting}
className="rounded-lg bg-primary-600 px-4 py-2 text-sm font-medium text-white hover:bg-primary-700 disabled:opacity-50 transition-colors"
>
{/* Submit */}
<div style={{ display: 'flex', gap: 10 }}>
<button type="submit" disabled={submitting} className="mt-btn mt-btn--primary">
{submitting ? 'Adding...' : 'Add to Cabinet'}
</button>
<button
type="button"
onClick={onCancel}
className="rounded-lg border px-4 py-2 text-sm font-medium hover:bg-gray-50 transition-colors"
>
<button type="button" onClick={onCancel} className="mt-btn mt-btn--ghost">
Cancel
</button>
</div>
</form>
</div>
</div>
);
}

73
packages/web/src/app/(dashboard)/medicines/LibraryTab.tsx
View file

@ -29,11 +29,11 @@ const CATEGORY_LABELS: Record<string, string> = {
other: 'Other',
};
const CATEGORY_COLORS: Record<string, string> = {
prescription: 'bg-blue-100 text-blue-700',
otc: 'bg-green-100 text-green-700',
supplement: 'bg-purple-100 text-purple-700',
other: 'bg-gray-100 text-gray-700',
const CATEGORY_PILL: Record<string, string> = {
prescription: 'mt-pill--info',
otc: 'mt-pill--ok',
supplement: 'mt-pill--brand',
other: 'mt-pill--ghost',
};
export function LibraryTab({ householdId }: { householdId: string }) {
@ -83,16 +83,13 @@ export function LibraryTab({ householdId }: { householdId: string }) {
<div>
<div className="flex items-center justify-between mb-4">
<div />
<button
onClick={() => setShowForm(!showForm)}
className="rounded-lg bg-primary-600 px-4 py-2 text-sm font-medium text-white hover:bg-primary-700 transition-colors"
>
<button onClick={() => setShowForm(!showForm)} className="mt-btn mt-btn--primary">
{showForm ? 'Cancel' : 'Add Medicine'}
</button>
</div>
{error && (
<div className="mb-4 rounded-lg bg-red-50 border border-red-200 p-3 text-sm text-red-700">
<div className="mt-alert mt-alert--danger mb-4">
{error}
<button onClick={() => setError('')} className="ml-2 underline">
Dismiss
@ -117,12 +114,13 @@ export function LibraryTab({ householdId }: { householdId: string }) {
value={search}
onChange={(e) => setSearch(e.target.value)}
placeholder="Search medicines..."
className="w-full max-w-md rounded-lg border px-3 py-2 text-sm focus:border-primary-500 focus:ring-1 focus:ring-primary-500 focus:outline-none"
className="mt-field max-w-md"
/>
<select
value={filterCategory}
onChange={(e) => setFilterCategory(e.target.value)}
className="rounded-lg border px-3 py-2 text-sm focus:border-primary-500 focus:ring-1 focus:ring-primary-500 focus:outline-none"
className="mt-field"
style={{ width: 'auto' }}
>
<option value="">All Categories</option>
{Object.values(MedicineCategory).map((c) => (
@ -134,7 +132,8 @@ export function LibraryTab({ householdId }: { householdId: string }) {
<select
value={filterForm}
onChange={(e) => setFilterForm(e.target.value)}
className="rounded-lg border px-3 py-2 text-sm focus:border-primary-500 focus:ring-1 focus:ring-primary-500 focus:outline-none"
className="mt-field"
style={{ width: 'auto' }}
>
<option value="">All Forms</option>
{Object.values(MedicineForm).map((f) => (
@ -176,13 +175,13 @@ export function LibraryTab({ householdId }: { householdId: string }) {
</Link>
<div className="flex items-center gap-3 ml-4">
<span
className={`rounded-full px-2.5 py-0.5 text-xs font-medium ${CATEGORY_COLORS[med.category] ?? CATEGORY_COLORS['other']}`}
className={`mt-pill ${CATEGORY_PILL[med.category] ?? CATEGORY_PILL['other']}`}
>
{CATEGORY_LABELS[med.category] ?? med.category}
</span>
<button
onClick={() => handleDelete(med._id, med.name)}
className="rounded p-1 text-gray-400 hover:text-red-600 hover:bg-red-50 transition-colors"
className="mt-btn mt-btn--danger-icon"
title="Delete"
>
<svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@ -242,17 +241,13 @@ function CreateMedicineForm({
}
return (
<div className="mb-6 rounded-xl border bg-white p-6 shadow-sm">
<div className="mt-card mb-6">
<h2 className="text-lg font-semibold mb-4">Add Medicine</h2>
{error && (
<div className="mb-4 rounded-lg bg-red-50 border border-red-200 p-3 text-sm text-red-700">
{error}
</div>
)}
{error && <div className="mt-alert mt-alert--danger mb-4">{error}</div>}
<form onSubmit={handleSubmit} className="space-y-4">
<div className="grid grid-cols-1 gap-4 md:grid-cols-2">
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">Name</label>
<label className="mt-field-label">Name</label>
<input
type="text"
required
@ -260,15 +255,15 @@ function CreateMedicineForm({
value={formData.name}
onChange={(e) => setFormData({ ...formData, name: e.target.value })}
placeholder="e.g. Metformin"
className="w-full rounded-lg border px-3 py-2 text-sm focus:border-primary-500 focus:ring-1 focus:ring-primary-500 focus:outline-none"
className="mt-field"
/>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">Form</label>
<label className="mt-field-label">Form</label>
<select
value={formData.form}
onChange={(e) => setFormData({ ...formData, form: e.target.value as MedicineForm })}
className="w-full rounded-lg border px-3 py-2 text-sm focus:border-primary-500 focus:ring-1 focus:ring-primary-500 focus:outline-none"
className="mt-field"
>
{Object.values(MedicineForm).map((f) => (
<option key={f} value={f}>
@ -279,7 +274,7 @@ function CreateMedicineForm({
</div>
<div className="grid grid-cols-2 gap-3">
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">Strength</label>
<label className="mt-field-label">Strength</label>
<input
type="number"
required
@ -288,17 +283,17 @@ function CreateMedicineForm({
value={formData.strength || ''}
onChange={(e) => setFormData({ ...formData, strength: Number(e.target.value) })}
placeholder="500"
className="w-full rounded-lg border px-3 py-2 text-sm focus:border-primary-500 focus:ring-1 focus:ring-primary-500 focus:outline-none"
className="mt-field"
/>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">Unit</label>
<label className="mt-field-label">Unit</label>
<select
value={formData.strengthUnit}
onChange={(e) =>
setFormData({ ...formData, strengthUnit: e.target.value as StrengthUnit })
}
className="w-full rounded-lg border px-3 py-2 text-sm focus:border-primary-500 focus:ring-1 focus:ring-primary-500 focus:outline-none"
className="mt-field"
>
{Object.values(StrengthUnit).map((u) => (
<option key={u} value={u}>
@ -309,13 +304,13 @@ function CreateMedicineForm({
</div>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">Category</label>
<label className="mt-field-label">Category</label>
<select
value={formData.category}
onChange={(e) =>
setFormData({ ...formData, category: e.target.value as MedicineCategory })
}
className="w-full rounded-lg border px-3 py-2 text-sm focus:border-primary-500 focus:ring-1 focus:ring-primary-500 focus:outline-none"
className="mt-field"
>
{Object.values(MedicineCategory).map((c) => (
<option key={c} value={c}>
@ -325,30 +320,22 @@ function CreateMedicineForm({
</select>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">Notes (optional)</label>
<label className="mt-field-label">Notes (optional)</label>
<input
type="text"
maxLength={1000}
value={formData.notes ?? ''}
onChange={(e) => setFormData({ ...formData, notes: e.target.value || undefined })}
placeholder="Any additional notes"
className="w-full rounded-lg border px-3 py-2 text-sm focus:border-primary-500 focus:ring-1 focus:ring-primary-500 focus:outline-none"
className="mt-field"
/>
</div>
</div>
<div className="flex gap-3 pt-2">
<button
type="submit"
disabled={submitting}
className="rounded-lg bg-primary-600 px-4 py-2 text-sm font-medium text-white hover:bg-primary-700 disabled:opacity-50 transition-colors"
>
<button type="submit" disabled={submitting} className="mt-btn mt-btn--primary">
{submitting ? 'Creating...' : 'Create Medicine'}
</button>
<button
type="button"
onClick={onCancel}
className="rounded-lg border px-4 py-2 text-sm font-medium hover:bg-gray-50 transition-colors"
>
<button type="button" onClick={onCancel} className="mt-btn mt-btn--ghost">
Cancel
</button>
</div>

113
packages/web/src/app/(dashboard)/medicines/OrganizerTab.tsx
View file

@ -1,12 +1,7 @@
'use client';
import { useState, useEffect, useCallback } from 'react';
import {
listFills,
previewFill,
executeFill,
undoFill,
} from '@/services/organizer';
import { listFills, previewFill, executeFill, undoFill } from '@/services/organizer';
import { listRegimens } from '@/services/regimens';
import { OrganizerFillStatus } from '@meshitrack/shared';
import type { z } from 'zod/v4';
@ -26,12 +21,6 @@ const STATUS_LABELS: Record<string, string> = {
reversed: 'Reversed',
};
const STATUS_COLORS: Record<string, string> = {
completed: 'bg-green-100 text-green-700',
partial: 'bg-yellow-100 text-yellow-700',
reversed: 'bg-gray-100 text-gray-500',
};
function formatDate(dateStr: string): string {
return new Date(dateStr).toLocaleDateString();
}
@ -54,20 +43,16 @@ function PreviewResult({
onTogglePartial: (v: boolean) => void;
}) {
return (
<div className="rounded-xl border bg-white p-6 shadow-sm space-y-5">
<div className="mt-card">
<div className="flex items-center justify-between">
<h3 className="text-base font-semibold">
Preview: {preview.regimenName} &mdash; {preview.numberOfDays} day
{preview.numberOfDays !== 1 ? 's' : ''}
</h3>
{preview.hasShortages ? (
<span className="rounded-full bg-yellow-100 px-3 py-1 text-xs font-medium text-yellow-700">
Shortages detected
</span>
<span className="mt-pill mt-pill--warn">Shortages detected</span>
) : (
<span className="rounded-full bg-green-100 px-3 py-1 text-xs font-medium text-green-700">
Ready to fill
</span>
<span className="mt-pill mt-pill--ok">Ready to fill</span>
)}
</div>
@ -87,9 +72,7 @@ function PreviewResult({
Available: <strong>{item.quantityAvailable}</strong>
</span>
{item.isShort && (
<span className="text-yellow-700 font-semibold">
Short: {item.shortage}
</span>
<span className="text-yellow-700 font-semibold">Short: {item.shortage}</span>
)}
</div>
</div>
@ -98,7 +81,9 @@ function PreviewResult({
{item.cabinetBreakdown.map((b, i) => (
<span key={i} className="rounded bg-blue-50 px-2 py-0.5 text-xs text-blue-700">
{b.quantityToTake} units
{b.expirationDate ? ` (exp ${new Date(b.expirationDate).toLocaleDateString()})` : ''}
{b.expirationDate
? ` (exp ${new Date(b.expirationDate).toLocaleDateString()})`
: ''}
</span>
))}
</div>
@ -114,7 +99,7 @@ function PreviewResult({
id="allowPartial"
checked={allowPartial}
onChange={(e) => onTogglePartial(e.target.checked)}
className="h-4 w-4 rounded border-gray-300 text-primary-600 focus:ring-primary-500"
className="h-4 w-4 rounded border-gray-300"
/>
<label htmlFor="allowPartial" className="text-sm text-gray-700">
Allow partial fill (fill what is available)
@ -126,14 +111,11 @@ function PreviewResult({
<button
onClick={onConfirm}
disabled={submitting || (preview.hasShortages && !allowPartial)}
className="rounded-lg bg-primary-600 px-4 py-2 text-sm font-medium text-white hover:bg-primary-700 disabled:opacity-50 transition-colors"
className="mt-btn mt-btn--primary"
>
{submitting ? 'Filling...' : 'Confirm fill'}
</button>
<button
onClick={onCancel}
className="rounded-lg border px-4 py-2 text-sm font-medium hover:bg-gray-50 transition-colors"
>
<button onClick={onCancel} className="mt-btn mt-btn--ghost">
Back
</button>
</div>
@ -182,7 +164,12 @@ function FillWizard({
setError('');
setFilling(true);
try {
await executeFill(householdId, { regimenId, numberOfDays, allowPartial, notes: notes || undefined });
await executeFill(householdId, {
regimenId,
numberOfDays,
allowPartial,
notes: notes || undefined,
});
setPreview(null);
setRegimenId('');
setNumberOfDays(7);
@ -218,13 +205,9 @@ function FillWizard({
}
return (
<div className="rounded-xl border bg-white p-6 shadow-sm">
<div className="mt-card">
<h2 className="text-lg font-semibold mb-4">Fill Pill Organizer</h2>
{error && (
<div className="mb-4 rounded-lg bg-red-50 border border-red-200 p-3 text-sm text-red-700">
{error}
</div>
)}
{error && <div className="mt-alert mt-alert--danger mb-4">{error}</div>}
{activeRegimens.length === 0 ? (
<p className="text-sm text-gray-500">
No active regimens found. Create and activate a regimen before filling.
@ -233,23 +216,24 @@ function FillWizard({
<form onSubmit={handlePreview} className="space-y-4">
<div className="grid grid-cols-1 gap-4 md:grid-cols-2">
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">Regimen</label>
<label className="mt-field-label">Regimen</label>
<select
required
value={regimenId}
onChange={(e) => setRegimenId(e.target.value)}
className="w-full rounded-lg border px-3 py-2 text-sm focus:border-primary-500 focus:ring-1 focus:ring-primary-500 focus:outline-none"
className="mt-field"
>
<option value="">Select regimen...</option>
{activeRegimens.map((r) => (
<option key={r._id} value={r._id}>
{r.name} ({r.medications.length} medication{r.medications.length !== 1 ? 's' : ''})
{r.name} ({r.medications.length} medication
{r.medications.length !== 1 ? 's' : ''})
</option>
))}
</select>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">Number of days</label>
<label className="mt-field-label">Number of days</label>
<input
type="number"
required
@ -257,28 +241,22 @@ function FillWizard({
max={90}
value={numberOfDays}
onChange={(e) => setNumberOfDays(Number(e.target.value))}
className="w-full rounded-lg border px-3 py-2 text-sm focus:border-primary-500 focus:ring-1 focus:ring-primary-500 focus:outline-none"
className="mt-field"
/>
</div>
<div className="md:col-span-2">
<label className="block text-sm font-medium text-gray-700 mb-1">
Notes (optional)
</label>
<label className="mt-field-label">Notes (optional)</label>
<input
type="text"
maxLength={1000}
value={notes}
onChange={(e) => setNotes(e.target.value)}
placeholder="Any notes for this fill"
className="w-full rounded-lg border px-3 py-2 text-sm focus:border-primary-500 focus:ring-1 focus:ring-primary-500 focus:outline-none"
className="mt-field"
/>
</div>
</div>
<button
type="submit"
disabled={previewing}
className="rounded-lg bg-primary-600 px-4 py-2 text-sm font-medium text-white hover:bg-primary-700 disabled:opacity-50 transition-colors"
>
<button type="submit" disabled={previewing} className="mt-btn mt-btn--primary">
{previewing ? 'Calculating...' : 'Preview fill'}
</button>
</form>
@ -289,13 +267,7 @@ function FillWizard({
// --- Fill history list ---
function FillHistory({
householdId,
refreshKey,
}: {
householdId: string;
refreshKey: number;
}) {
function FillHistory({ householdId, refreshKey }: { householdId: string; refreshKey: number }) {
const [fills, setFills] = useState<OrganizerFill[]>([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState('');
@ -331,13 +303,14 @@ function FillHistory({
}
return (
<div className="rounded-xl border bg-white p-6 shadow-sm">
<div className="mt-card">
<div className="flex items-center justify-between mb-4">
<h2 className="text-lg font-semibold">Fill History</h2>
<select
value={filterStatus}
onChange={(e) => setFilterStatus(e.target.value)}
className="rounded-lg border px-3 py-2 text-sm focus:border-primary-500 focus:ring-1 focus:ring-primary-500 focus:outline-none"
className="mt-field"
style={{ width: 'auto' }}
>
<option value="">All statuses</option>
{Object.values(OrganizerFillStatus).map((s) => (
@ -349,7 +322,7 @@ function FillHistory({
</div>
{error && (
<div className="mb-4 rounded-lg bg-red-50 border border-red-200 p-3 text-sm text-red-700">
<div className="mt-alert mt-alert--danger mb-4">
{error}
<button onClick={() => setError('')} className="ml-2 underline">
Dismiss
@ -374,7 +347,7 @@ function FillHistory({
<div className="flex items-center gap-2 mb-1">
<span className="font-medium text-gray-900">{fill.regimenName}</span>
<span
className={`rounded-full px-2 py-0.5 text-xs font-medium ${STATUS_COLORS[fill.status] ?? STATUS_COLORS['completed']}`}
className={`mt-pill ${fill.status === 'completed' ? 'mt-pill--ok' : fill.status === 'partial' ? 'mt-pill--warn' : 'mt-pill--ghost'}`}
>
{STATUS_LABELS[fill.status] ?? fill.status}
</span>
@ -384,18 +357,12 @@ function FillHistory({
{fill.items.length} medicine{fill.items.length !== 1 ? 's' : ''} &bull;{' '}
{formatDate(fill.fillDate)}
</p>
{fill.notes && (
<p className="text-xs text-gray-400 mt-1">{fill.notes}</p>
)}
{fill.notes && <p className="text-xs text-gray-400 mt-1">{fill.notes}</p>}
<div className="flex flex-wrap gap-1 mt-2">
{fill.items.map((item, i) => (
<span
key={i}
className={`rounded-full px-2 py-0.5 text-xs ${
item.wasShort
? 'bg-yellow-50 text-yellow-700'
: 'bg-blue-50 text-blue-700'
}`}
className={`mt-pill ${item.wasShort ? 'mt-pill--warn' : 'mt-pill--info'}`}
>
{item.medicineName}: {item.quantityTaken}/{item.quantityNeeded}
{item.wasShort ? ' (short)' : ''}
@ -406,7 +373,7 @@ function FillHistory({
{fill.status !== OrganizerFillStatus.REVERSED && (
<button
onClick={() => handleUndo(fill._id)}
className="shrink-0 rounded-lg border border-red-200 px-3 py-1.5 text-xs font-medium text-red-600 hover:bg-red-50 transition-colors"
className="mt-btn mt-btn--danger-ghost"
>
Undo
</button>
@ -443,11 +410,7 @@ export function OrganizerTab({ householdId }: { householdId: string }) {
{regimensLoading ? (
<div className="animate-pulse rounded-xl border bg-white p-6 h-40" />
) : (
<FillWizard
householdId={householdId}
regimens={regimens}
onFilled={handleFilled}
/>
<FillWizard householdId={householdId} regimens={regimens} onFilled={handleFilled} />
)}
<FillHistory householdId={householdId} refreshKey={fillRefreshKey} />
</div>

114
packages/web/src/app/(dashboard)/medicines/RegimensTab.tsx
View file

@ -13,7 +13,7 @@ import {
DosageFrequency,
TimeOfDay,
DosageUnit,
MedicineForm,
type MedicineForm,
allowedUnitsForForm,
defaultUnitForForm,
} from '@meshitrack/shared';
@ -99,23 +99,28 @@ function MedicationRow({
<button
type="button"
onClick={() => onRemove(index)}
className="rounded p-1 text-gray-400 hover:text-red-600 hover:bg-red-50 transition-colors"
className="mt-btn mt-btn--danger-icon"
title="Remove medication"
>
<svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M6 18L18 6M6 6l12 12"
/>
</svg>
</button>
</div>
<div className="grid grid-cols-1 gap-3 md:grid-cols-2">
<div>
<label className="block text-xs font-medium text-gray-700 mb-1">Medicine</label>
<label className="mt-field-label">Medicine</label>
<select
required
value={medication.medicineId}
onChange={(e) => handleMedicineChange(e.target.value)}
className="w-full rounded-lg border px-3 py-2 text-sm focus:border-primary-500 focus:ring-1 focus:ring-primary-500 focus:outline-none"
className="mt-field"
>
<option value="">Select medicine...</option>
{medicines.map((m) => (
@ -128,7 +133,7 @@ function MedicationRow({
<div className="flex gap-2">
<div className="flex-1">
<label className="block text-xs font-medium text-gray-700 mb-1">Dosage</label>
<label className="mt-field-label">Dosage</label>
<input
type="number"
required
@ -136,17 +141,17 @@ function MedicationRow({
step="any"
value={medication.dosage || ''}
onChange={(e) => onChange(index, { ...medication, dosage: Number(e.target.value) })}
className="w-full rounded-lg border px-3 py-2 text-sm focus:border-primary-500 focus:ring-1 focus:ring-primary-500 focus:outline-none"
className="mt-field"
/>
</div>
<div className="flex-1">
<label className="block text-xs font-medium text-gray-700 mb-1">Unit</label>
<label className="mt-field-label">Unit</label>
<select
value={medication.dosageUnit}
onChange={(e) =>
onChange(index, { ...medication, dosageUnit: e.target.value as DosageUnit })
}
className="w-full rounded-lg border px-3 py-2 text-sm focus:border-primary-500 focus:ring-1 focus:ring-primary-500 focus:outline-none"
className="mt-field"
>
{allowedUnits.map((u) => (
<option key={u} value={u}>
@ -158,7 +163,7 @@ function MedicationRow({
</div>
<div>
<label className="block text-xs font-medium text-gray-700 mb-1">Frequency</label>
<label className="mt-field-label">Frequency</label>
<select
value={medication.frequency}
onChange={(e) =>
@ -171,7 +176,7 @@ function MedicationRow({
: undefined,
})
}
className="w-full rounded-lg border px-3 py-2 text-sm focus:border-primary-500 focus:ring-1 focus:ring-primary-500 focus:outline-none"
className="mt-field"
>
{Object.values(DosageFrequency).map((f) => (
<option key={f} value={f}>
@ -183,7 +188,7 @@ function MedicationRow({
{medication.frequency === DosageFrequency.CUSTOM && (
<div>
<label className="block text-xs font-medium text-gray-700 mb-1">Times per day</label>
<label className="mt-field-label">Times per day</label>
<input
type="number"
required
@ -193,15 +198,13 @@ function MedicationRow({
onChange={(e) =>
onChange(index, { ...medication, customFrequencyPerDay: Number(e.target.value) })
}
className="w-full rounded-lg border px-3 py-2 text-sm focus:border-primary-500 focus:ring-1 focus:ring-primary-500 focus:outline-none"
className="mt-field"
/>
</div>
)}
<div>
<label className="block text-xs font-medium text-gray-700 mb-1">
Time of day (optional)
</label>
<label className="mt-field-label">Time of day (optional)</label>
<select
value={medication.timeOfDay ?? ''}
onChange={(e) =>
@ -210,7 +213,7 @@ function MedicationRow({
timeOfDay: e.target.value ? (e.target.value as TimeOfDay) : undefined,
})
}
className="w-full rounded-lg border px-3 py-2 text-sm focus:border-primary-500 focus:ring-1 focus:ring-primary-500 focus:outline-none"
className="mt-field"
>
<option value="">Any time</option>
{Object.values(TimeOfDay).map((t) => (
@ -222,9 +225,7 @@ function MedicationRow({
</div>
<div>
<label className="block text-xs font-medium text-gray-700 mb-1">
Instructions (optional)
</label>
<label className="mt-field-label">Instructions (optional)</label>
<input
type="text"
maxLength={500}
@ -233,7 +234,7 @@ function MedicationRow({
onChange(index, { ...medication, instructions: e.target.value || undefined })
}
placeholder="e.g. Take with food"
className="w-full rounded-lg border px-3 py-2 text-sm focus:border-primary-500 focus:ring-1 focus:ring-primary-500 focus:outline-none"
className="mt-field"
/>
</div>
</div>
@ -317,17 +318,13 @@ function RegimenForm({
}
return (
<div className="mb-6 rounded-xl border bg-white p-6 shadow-sm">
<div className="mt-card mb-6">
<h2 className="text-lg font-semibold mb-4">{initial ? 'Edit Regimen' : 'New Regimen'}</h2>
{error && (
<div className="mb-4 rounded-lg bg-red-50 border border-red-200 p-3 text-sm text-red-700">
{error}
</div>
)}
{error && <div className="mt-alert mt-alert--danger mb-4">{error}</div>}
<form onSubmit={handleSubmit} className="space-y-5">
<div className="grid grid-cols-1 gap-4 md:grid-cols-2">
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">Name</label>
<label className="mt-field-label">Name</label>
<input
type="text"
required
@ -335,7 +332,7 @@ function RegimenForm({
value={name}
onChange={(e) => setName(e.target.value)}
placeholder="e.g. Morning routine"
className="w-full rounded-lg border px-3 py-2 text-sm focus:border-primary-500 focus:ring-1 focus:ring-primary-500 focus:outline-none"
className="mt-field"
/>
</div>
<div className="flex items-center gap-3 pt-6">
@ -344,7 +341,7 @@ function RegimenForm({
id="isActive"
checked={isActive}
onChange={(e) => setIsActive(e.target.checked)}
className="h-4 w-4 rounded border-gray-300 text-primary-600 focus:ring-primary-500"
className="h-4 w-4 rounded border-gray-300"
/>
<label htmlFor="isActive" className="text-sm font-medium text-gray-700">
Active
@ -355,11 +352,7 @@ function RegimenForm({
<div>
<div className="flex items-center justify-between mb-3">
<h3 className="text-sm font-semibold text-gray-800">Medications</h3>
<button
type="button"
onClick={addMedication}
className="rounded-lg border border-primary-600 px-3 py-1.5 text-xs font-medium text-primary-600 hover:bg-primary-50 transition-colors"
>
<button type="button" onClick={addMedication} className="mt-btn mt-btn--ghost">
+ Add medication
</button>
</div>
@ -382,18 +375,10 @@ function RegimenForm({
</div>
<div className="flex gap-3 pt-2">
<button
type="submit"
disabled={submitting}
className="rounded-lg bg-primary-600 px-4 py-2 text-sm font-medium text-white hover:bg-primary-700 disabled:opacity-50 transition-colors"
>
<button type="submit" disabled={submitting} className="mt-btn mt-btn--primary">
{submitting ? 'Saving...' : initial ? 'Save changes' : 'Create regimen'}
</button>
<button
type="button"
onClick={onCancel}
className="rounded-lg border px-4 py-2 text-sm font-medium hover:bg-gray-50 transition-colors"
>
<button type="button" onClick={onCancel} className="mt-btn mt-btn--ghost">
Cancel
</button>
</div>
@ -549,16 +534,14 @@ export function RegimensTab({ householdId }: { householdId: string }) {
<select
value={filterActive}
onChange={(e) => setFilterActive(e.target.value as 'all' | 'active' | 'inactive')}
className="rounded-lg border px-3 py-2 text-sm focus:border-primary-500 focus:ring-1 focus:ring-primary-500 focus:outline-none"
className="mt-field"
style={{ width: 'auto' }}
>
<option value="all">All regimens</option>
<option value="active">Active</option>
<option value="inactive">Inactive</option>
</select>
<button
onClick={handleShowBurnRate}
className="rounded-lg border px-4 py-2 text-sm font-medium hover:bg-gray-50 transition-colors"
>
<button onClick={handleShowBurnRate} className="mt-btn mt-btn--ghost">
{showBurnRate ? 'Hide burn rate' : 'Burn rate'}
</button>
</div>
@ -567,14 +550,14 @@ export function RegimensTab({ householdId }: { householdId: string }) {
setEditingRegimen(null);
setShowForm(!showForm);
}}
className="rounded-lg bg-primary-600 px-4 py-2 text-sm font-medium text-white hover:bg-primary-700 transition-colors"
className="mt-btn mt-btn--primary"
>
{showForm ? 'Cancel' : 'New Regimen'}
</button>
</div>
{error && (
<div className="mb-4 rounded-lg bg-red-50 border border-red-200 p-3 text-sm text-red-700">
<div className="mt-alert mt-alert--danger mb-4">
{error}
<button onClick={() => setError('')} className="ml-2 underline">
Dismiss
@ -583,7 +566,7 @@ export function RegimensTab({ householdId }: { householdId: string }) {
)}
{showBurnRate && (
<div className="mb-6 rounded-xl border bg-white p-6 shadow-sm">
<div className="mb-6 mt-card">
<h2 className="text-lg font-semibold mb-4">Burn Rate &amp; Spending Projections</h2>
{burnRateLoading ? (
<div className="animate-pulse space-y-2">
@ -630,7 +613,7 @@ export function RegimensTab({ householdId }: { householdId: string }) {
))}
</div>
) : regimens.length === 0 ? (
<div className="rounded-xl border bg-white p-6 shadow-sm text-center text-gray-500">
<div className="mt-card text-center" style={{ color: 'var(--ink-muted)' }}>
{filterActive !== 'all'
? `No ${filterActive} regimens found.`
: isFormOpen
@ -640,17 +623,13 @@ export function RegimensTab({ householdId }: { householdId: string }) {
) : (
<div className="space-y-3">
{regimens.map((regimen) => (
<div key={regimen._id} className="rounded-xl border bg-white p-4 shadow-sm">
<div key={regimen._id} className="mt-card">
<div className="flex items-start justify-between gap-4">
<div className="flex-1 min-w-0">
<div className="flex items-center gap-2 mb-1">
<h3 className="font-semibold text-gray-900">{regimen.name}</h3>
<span
className={`rounded-full px-2 py-0.5 text-xs font-medium ${
regimen.isActive
? 'bg-green-100 text-green-700'
: 'bg-gray-100 text-gray-500'
}`}
className={`mt-pill ${regimen.isActive ? 'mt-pill--ok' : 'mt-pill--ghost'}`}
>
{regimen.isActive ? 'Active' : 'Inactive'}
</span>
@ -661,21 +640,20 @@ export function RegimensTab({ householdId }: { householdId: string }) {
</p>
<div className="flex flex-wrap gap-1">
{regimen.medications.map((med, i) => (
<span
key={i}
className="rounded-full bg-blue-50 px-2 py-0.5 text-xs text-blue-700"
>
<span key={i} className="mt-pill mt-pill--info">
{med.medicineName} — {med.dosage} {med.dosageUnit} (
{FREQUENCY_LABELS[med.frequency] ?? med.frequency})
</span>
))}
</div>
<p className="mt-2 text-xs text-gray-400">Created {formatDate(regimen.createdAt)}</p>
<p className="mt-2 text-xs text-gray-400">
Created {formatDate(regimen.createdAt)}
</p>
</div>
<div className="flex items-center gap-2 shrink-0">
<button
onClick={() => handleToggleActive(regimen)}
className="rounded-lg border px-3 py-1.5 text-xs font-medium hover:bg-gray-50 transition-colors"
className="mt-btn mt-btn--ghost"
title={regimen.isActive ? 'Deactivate' : 'Activate'}
>
{regimen.isActive ? 'Deactivate' : 'Activate'}
@ -685,7 +663,7 @@ export function RegimensTab({ householdId }: { householdId: string }) {
setShowForm(false);
setEditingRegimen(regimen);
}}
className="rounded p-1.5 text-gray-400 hover:text-primary-600 hover:bg-primary-50 transition-colors"
className="mt-btn mt-btn--icon"
title="Edit"
>
<svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@ -699,7 +677,7 @@ export function RegimensTab({ householdId }: { householdId: string }) {
</button>
<button
onClick={() => handleDelete(regimen._id, regimen.name)}
className="rounded p-1.5 text-gray-400 hover:text-red-600 hover:bg-red-50 transition-colors"
className="mt-btn mt-btn--danger-icon"
title="Delete"
>
<svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">

89
packages/web/src/app/(dashboard)/medicines/[id]/__tests__/page.test.tsx
View file

@ -1,6 +1,6 @@
import { describe, it, expect, vi, beforeEach } from 'vitest';
import { render, screen, waitFor, fireEvent } from '@testing-library/react';
import type React from 'react';
import userEvent from '@testing-library/user-event';
const { mockUseApi } = vi.hoisted(() => ({ mockUseApi: vi.fn() }));
@ -22,16 +22,21 @@ const {
mockUpdateMedicineProduct: vi.fn(),
}));
const { mockListCabinetItems, mockAdjustCabinetItemQuantity, mockDeleteCabinetItem } =
vi.hoisted(() => ({
const { mockListCabinetItems, mockAdjustCabinetItemQuantity, mockDeleteCabinetItem } = vi.hoisted(
() => ({
mockListCabinetItems: vi.fn(),
mockAdjustCabinetItemQuantity: vi.fn(),
mockDeleteCabinetItem: vi.fn(),
}));
}),
);
vi.mock('@/lib/useApi', () => ({ useApi: mockUseApi }));
vi.mock('next/navigation', () => ({ useParams: mockUseParams }));
vi.mock('next/link', () => ({ default: (props: any) => <a href={props.href}>{props.children}</a> }));
vi.mock('next/link', () => ({
default: (props: { href?: string; children: React.ReactNode }) => (
<a href={props.href}>{props.children}</a>
),
}));
vi.mock('@/services/medicines', () => ({
getMedicine: mockGetMedicine,
@ -109,9 +114,7 @@ describe('MedicineDetailPage', () => {
it('shows empty products state', async () => {
render(<MedicineDetailPage />);
await waitFor(() =>
expect(screen.getByText(/No products yet/)).toBeInTheDocument(),
);
await waitFor(() => expect(screen.getByText(/No products yet/)).toBeInTheDocument());
});
it('toggles Add Product form', async () => {
@ -146,7 +149,9 @@ describe('MedicineDetailPage', () => {
await userEvent.click(screen.getByRole('button', { name: 'Save' }));
await waitFor(() => expect(mockUpdateMedicine).toHaveBeenCalledWith('hh1', 'med-1', expect.any(Object)));
await waitFor(() =>
expect(mockUpdateMedicine).toHaveBeenCalledWith('hh1', 'med-1', expect.any(Object)),
);
});
it('deletes a product after confirmation', async () => {
@ -250,7 +255,9 @@ describe('MedicineDetailPage', () => {
await userEvent.click(screen.getAllByTitle('Edit')[1]!);
await waitFor(() => screen.getByDisplayValue('Glucophage'));
fireEvent.change(screen.getByDisplayValue('Glucophage'), { target: { value: 'Glucophage XR' } });
fireEvent.change(screen.getByDisplayValue('Glucophage'), {
target: { value: 'Glucophage XR' },
});
fireEvent.submit(screen.getByDisplayValue('Glucophage XR').closest('form')!);
await waitFor(() =>
@ -275,9 +282,9 @@ describe('MedicineDetailPage', () => {
await waitFor(() => screen.getByPlaceholderText('e.g. CVS Health'));
// Change package unit to ml to show concentration fields
const unitSelect = screen.getAllByRole('combobox').find(
(s) => (s as HTMLSelectElement).value === 'vial',
) as HTMLSelectElement;
const unitSelect = screen
.getAllByRole('combobox')
.find((s) => (s as HTMLSelectElement).value === 'vial') as HTMLSelectElement;
fireEvent.change(unitSelect!, { target: { value: 'ml' } });
await waitFor(() => expect(screen.getByPlaceholderText('e.g. 100')).toBeInTheDocument());
@ -337,9 +344,9 @@ describe('MedicineDetailPage', () => {
fireEvent.change(screen.getByPlaceholderText('e.g. 100'), { target: { value: '100' } });
// Change concentration unit
const concUnitSelect = screen.getAllByRole('combobox').find(
(s) => (s as HTMLSelectElement).options[0]?.text === '--',
) as HTMLSelectElement;
const concUnitSelect = screen
.getAllByRole('combobox')
.find((s) => (s as HTMLSelectElement).options[0]?.text === '--') as HTMLSelectElement;
if (concUnitSelect) {
fireEvent.change(concUnitSelect, { target: { value: 'mg/ml' } });
}
@ -372,9 +379,9 @@ describe('MedicineDetailPage', () => {
fireEvent.change(screen.getByDisplayValue('60'), { target: { value: '90' } });
// Change package unit
const unitSelect = screen.getAllByRole('combobox').find(
(s) => (s as HTMLSelectElement).value === 'tablet',
) as HTMLSelectElement;
const unitSelect = screen
.getAllByRole('combobox')
.find((s) => (s as HTMLSelectElement).value === 'tablet') as HTMLSelectElement;
fireEvent.change(unitSelect!, { target: { value: 'capsule' } });
expect(screen.getByDisplayValue('Glucophage')).toBeInTheDocument();
@ -398,13 +405,17 @@ describe('MedicineDetailPage', () => {
fireEvent.change(screen.getByPlaceholderText('e.g. Pfizer'), { target: { value: '' } });
// Change notes (truthy) then clear (falsy → undefined)
fireEvent.change(screen.getByPlaceholderText('Any additional notes'), { target: { value: 'Store in fridge' } });
fireEvent.change(screen.getByPlaceholderText('Any additional notes'), { target: { value: '' } });
fireEvent.change(screen.getByPlaceholderText('Any additional notes'), {
target: { value: 'Store in fridge' },
});
fireEvent.change(screen.getByPlaceholderText('Any additional notes'), {
target: { value: '' },
});
// Change unit to ml to show concentration fields
const unitSelect = screen.getAllByRole('combobox').find(
(s) => (s as HTMLSelectElement).value === 'vial',
) as HTMLSelectElement;
const unitSelect = screen
.getAllByRole('combobox')
.find((s) => (s as HTMLSelectElement).value === 'vial') as HTMLSelectElement;
fireEvent.change(unitSelect!, { target: { value: 'ml' } });
await waitFor(() => screen.getByPlaceholderText('e.g. 100'));
@ -413,9 +424,9 @@ describe('MedicineDetailPage', () => {
fireEvent.change(screen.getByPlaceholderText('e.g. 100'), { target: { value: '' } });
// Change concentration unit
const concUnitSelect = screen.getAllByRole('combobox').find(
(s) => (s as HTMLSelectElement).value === '',
) as HTMLSelectElement;
const concUnitSelect = screen
.getAllByRole('combobox')
.find((s) => (s as HTMLSelectElement).value === '') as HTMLSelectElement;
if (concUnitSelect) {
fireEvent.change(concUnitSelect, { target: { value: 'mg/ml' } });
}
@ -544,9 +555,9 @@ describe('MedicineDetailPage', () => {
if (nameInput) fireEvent.change(nameInput, { target: { value: 'Metformin XR' } });
// Change form select
const formSelect = screen.getAllByRole('combobox').find(
(s) => (s as HTMLSelectElement).options[0]?.value === 'tablet',
) as HTMLSelectElement;
const formSelect = screen
.getAllByRole('combobox')
.find((s) => (s as HTMLSelectElement).options[0]?.value === 'tablet') as HTMLSelectElement;
if (formSelect) fireEvent.change(formSelect, { target: { value: 'capsule' } });
// Change strength
@ -554,7 +565,9 @@ describe('MedicineDetailPage', () => {
if (strengthInput) fireEvent.change(strengthInput, { target: { value: '250' } });
// Change category select
const catSelect = screen.getAllByRole('combobox').find(
const catSelect = screen
.getAllByRole('combobox')
.find(
(s) => (s as HTMLSelectElement).options[0]?.value === 'prescription',
) as HTMLSelectElement;
if (catSelect) fireEvent.change(catSelect, { target: { value: 'otc' } });
@ -607,9 +620,9 @@ describe('MedicineDetailPage', () => {
await waitFor(() => screen.getByText('Edit Medicine'));
// Change strength unit select (the one with 'mg' options)
const unitSelect = screen.getAllByRole('combobox').find(
(s) => (s as HTMLSelectElement).value === 'mg',
) as HTMLSelectElement;
const unitSelect = screen
.getAllByRole('combobox')
.find((s) => (s as HTMLSelectElement).value === 'mg') as HTMLSelectElement;
if (unitSelect) fireEvent.change(unitSelect, { target: { value: 'mcg' } });
expect(screen.getByText('Edit Medicine')).toBeInTheDocument();
@ -643,7 +656,9 @@ describe('MedicineDetailPage', () => {
await userEvent.click(screen.getByText('Add Product'));
await waitFor(() => screen.getByPlaceholderText('e.g. CVS Health'));
fireEvent.change(screen.getByPlaceholderText('e.g. CVS Health'), { target: { value: 'Brand X' } });
fireEvent.change(screen.getByPlaceholderText('e.g. CVS Health'), {
target: { value: 'Brand X' },
});
fireEvent.submit(screen.getByPlaceholderText('e.g. CVS Health').closest('form')!);
await waitFor(() => expect(screen.getByText('Failed to create product')).toBeInTheDocument());
@ -772,6 +787,8 @@ describe('MedicineDetailPage', () => {
await waitFor(() => screen.getAllByTitle('Delete'));
await userEvent.click(screen.getAllByTitle('Delete')[0]!);
await waitFor(() => expect(screen.getByText('Failed to delete cabinet item')).toBeInTheDocument());
await waitFor(() =>
expect(screen.getByText('Failed to delete cabinet item')).toBeInTheDocument(),
);
});
});

13
packages/web/src/app/(dashboard)/medicines/[id]/page.tsx
View file

@ -12,11 +12,7 @@ import {
updateMedicine,
updateMedicineProduct,
} from '@/services/medicines';
import {
listCabinetItems,
adjustCabinetItemQuantity,
deleteCabinetItem,
} from '@/services/cabinet';
import { listCabinetItems, adjustCabinetItemQuantity, deleteCabinetItem } from '@/services/cabinet';
import {
DosageUnit,
ConcentrationUnit,
@ -162,7 +158,9 @@ export default function MedicineDetailPage() {
function startEditProduct(product: MedicineProduct) {
setEditingProductId(product._id);
const validUnits = Object.values(DosageUnit) as string[];
const allowedUnits = allowedUnitsForForm((medicine?.form as MedicineForm) ?? MedicineForm.OTHER);
const allowedUnits = allowedUnitsForForm(
(medicine?.form as MedicineForm) ?? MedicineForm.OTHER,
);
const storedUnit = product.packageUnit;
const packageUnit = validUnits.includes(storedUnit)
? (storedUnit as DosageUnit)
@ -650,7 +648,8 @@ export default function MedicineDetailPage() {
className="w-full rounded-lg border px-3 py-2 text-sm focus:border-primary-500 focus:ring-1 focus:ring-primary-500 focus:outline-none"
>
{allowedUnitsForForm(
/* v8 ignore next */ (medicine?.form as MedicineForm) ?? MedicineForm.OTHER,
/* v8 ignore next */ (medicine?.form as MedicineForm) ??
MedicineForm.OTHER,
).map((u) => (
<option key={u} value={u}>
{u}

28
packages/web/src/app/(dashboard)/medicines/__tests__/ActivityTab.test.tsx
View file

@ -45,13 +45,17 @@ describe('ActivityTab', () => {
it('fetches spending summary on mount', async () => {
render(<ActivityTab householdId="hh1" />);
await waitFor(() => expect(mockGetSpendingSummary).toHaveBeenCalledWith('hh1', expect.any(Object)));
await waitFor(() =>
expect(mockGetSpendingSummary).toHaveBeenCalledWith('hh1', expect.any(Object)),
);
});
it('fetches events on mount', async () => {
render(<ActivityTab householdId="hh1" />);
await waitFor(() => expect(mockListCabinetEvents).toHaveBeenCalledWith('hh1', expect.any(Object)));
await waitFor(() =>
expect(mockListCabinetEvents).toHaveBeenCalledWith('hh1', expect.any(Object)),
);
});
it('shows empty state when no events', async () => {
@ -103,20 +107,18 @@ describe('ActivityTab', () => {
it('shows spending summary with data', async () => {
mockGetSpendingSummary.mockResolvedValue({
totalSpent: 125.50,
totalSpent: 125.5,
currency: 'USD',
byMedicine: [
{
medicineId: 'med-1',
medicineName: 'Metformin',
totalSpent: 125.50,
totalSpent: 125.5,
purchaseCount: 2,
avgUnitPrice: 0.69,
},
],
byPeriod: [
{ period: '2026-01', totalSpent: 125.50 },
],
byPeriod: [{ period: '2026-01', totalSpent: 125.5 }],
});
render(<ActivityTab householdId="hh1" />);
@ -138,7 +140,9 @@ describe('ActivityTab', () => {
render(<ActivityTab householdId="hh1" />);
await waitFor(() => expect(mockListCabinetEvents).toHaveBeenCalledTimes(1));
fireEvent.change(screen.getByDisplayValue('All event types'), { target: { value: 'purchased' } });
fireEvent.change(screen.getByDisplayValue('All event types'), {
target: { value: 'purchased' },
});
await waitFor(() => expect(mockListCabinetEvents).toHaveBeenCalledTimes(2));
});
@ -151,7 +155,9 @@ describe('ActivityTab', () => {
render(<ActivityTab householdId="hh1" />);
await waitFor(() => expect(screen.getAllByDisplayValue('All medicines').length).toBeGreaterThan(1));
await waitFor(() =>
expect(screen.getAllByDisplayValue('All medicines').length).toBeGreaterThan(1),
);
const allMedSelects = screen.getAllByDisplayValue('All medicines');
// The last select is the cabinet events medicine filter
fireEvent.change(allMedSelects[allMedSelects.length - 1]!, { target: { value: 'med-1' } });
@ -163,7 +169,9 @@ describe('ActivityTab', () => {
render(<ActivityTab householdId="hh1" />);
await waitFor(() => expect(mockListCabinetEvents).toHaveBeenCalled());
fireEvent.change(screen.getByDisplayValue('All event types'), { target: { value: 'purchased' } });
fireEvent.change(screen.getByDisplayValue('All event types'), {
target: { value: 'purchased' },
});
await waitFor(() => screen.getByText('Clear filters'));
await userEvent.click(screen.getByText('Clear filters'));

28
packages/web/src/app/(dashboard)/medicines/__tests__/CabinetTab.test.tsx
View file

@ -1,6 +1,7 @@
import { describe, it, expect, vi, beforeEach } from 'vitest';
import { render, screen, waitFor, fireEvent } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import type React from 'react';
const {
mockListCabinetItems,
@ -28,7 +29,11 @@ vi.mock('@/services/cabinet', () => ({
vi.mock('@/services/medicines', () => ({ listMedicines: mockListMedicines }));
vi.mock('next/link', () => ({ default: (props: any) => <a href={props.href}>{props.children}</a> }));
vi.mock('next/link', () => ({
default: (props: { href?: string; children: React.ReactNode }) => (
<a href={props.href}>{props.children}</a>
),
}));
import { CabinetTab } from '../CabinetTab';
@ -206,9 +211,7 @@ describe('CabinetTab', () => {
// Submit without selecting a medicine - should show error
fireEvent.submit(screen.getByPlaceholderText('Search medicines...').closest('form')!);
await waitFor(() =>
expect(screen.getByText('Please select a medicine')).toBeInTheDocument(),
);
await waitFor(() => expect(screen.getByText('Please select a medicine')).toBeInTheDocument());
});
it('submits AddToCabinetForm successfully', async () => {
@ -241,7 +244,10 @@ describe('CabinetTab', () => {
fireEvent.submit(screen.getByPlaceholderText('Search medicines...').closest('form')!);
await waitFor(() =>
expect(mockCreateCabinetItem).toHaveBeenCalledWith('hh1', expect.objectContaining({ medicineId: 'med-1' })),
expect(mockCreateCabinetItem).toHaveBeenCalledWith(
'hh1',
expect.objectContaining({ medicineId: 'med-1' }),
),
);
});
@ -590,7 +596,9 @@ describe('CabinetTab', () => {
it('shows create error when medicine is selected and create fails', async () => {
mockListMedicines.mockResolvedValue({
data: [{ _id: 'med-1', name: 'Metformin', form: 'tablet', strength: 500, strengthUnit: 'mg' }],
data: [
{ _id: 'med-1', name: 'Metformin', form: 'tablet', strength: 500, strengthUnit: 'mg' },
],
pagination: { cursor: null, hasMore: false },
});
mockCreateCabinetItem.mockRejectedValue(new Error('Create failed'));
@ -623,7 +631,9 @@ describe('CabinetTab', () => {
it('waits for medicines to load then selects medicine in form', async () => {
mockListMedicines.mockResolvedValue({
data: [{ _id: 'med-1', name: 'Metformin', form: 'tablet', strength: 500, strengthUnit: 'mg' }],
data: [
{ _id: 'med-1', name: 'Metformin', form: 'tablet', strength: 500, strengthUnit: 'mg' },
],
pagination: { cursor: null, hasMore: false },
});
@ -648,7 +658,9 @@ describe('CabinetTab', () => {
it('shows fallback error when non-Error is thrown during create', async () => {
mockListMedicines.mockResolvedValue({
data: [{ _id: 'med-1', name: 'Metformin', form: 'tablet', strength: 500, strengthUnit: 'mg' }],
data: [
{ _id: 'med-1', name: 'Metformin', form: 'tablet', strength: 500, strengthUnit: 'mg' },
],
pagination: { cursor: null, hasMore: false },
});
mockCreateCabinetItem.mockRejectedValue('unexpected');

50
packages/web/src/app/(dashboard)/medicines/__tests__/LibraryTab.test.tsx
View file

@ -1,6 +1,7 @@
import { describe, it, expect, vi, beforeEach } from 'vitest';
import { render, screen, waitFor, fireEvent } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import type React from 'react';
const { mockListMedicines, mockCreateMedicine, mockDeleteMedicine } = vi.hoisted(() => ({
mockListMedicines: vi.fn(),
@ -14,7 +15,11 @@ vi.mock('@/services/medicines', () => ({
deleteMedicine: mockDeleteMedicine,
}));
vi.mock('next/link', () => ({ default: (props: any) => <a href={props.href}>{props.children}</a> }));
vi.mock('next/link', () => ({
default: (props: { href?: string; children: React.ReactNode }) => (
<a href={props.href}>{props.children}</a>
),
}));
import { LibraryTab } from '../LibraryTab';
@ -40,7 +45,10 @@ describe('LibraryTab', () => {
});
it('renders medicine list after load', async () => {
mockListMedicines.mockResolvedValue({ data: [medicine], pagination: { cursor: null, hasMore: false } });
mockListMedicines.mockResolvedValue({
data: [medicine],
pagination: { cursor: null, hasMore: false },
});
render(<LibraryTab householdId="hh1" />);
@ -98,11 +106,19 @@ describe('LibraryTab', () => {
await userEvent.type(screen.getByPlaceholderText('500'), '100');
await userEvent.click(screen.getByRole('button', { name: 'Create Medicine' }));
await waitFor(() => expect(mockCreateMedicine).toHaveBeenCalledWith('hh1', expect.objectContaining({ name: 'Aspirin' })));
await waitFor(() =>
expect(mockCreateMedicine).toHaveBeenCalledWith(
'hh1',
expect.objectContaining({ name: 'Aspirin' }),
),
);
});
it('deletes medicine after confirmation', async () => {
mockListMedicines.mockResolvedValue({ data: [medicine], pagination: { cursor: null, hasMore: false } });
mockListMedicines.mockResolvedValue({
data: [medicine],
pagination: { cursor: null, hasMore: false },
});
mockDeleteMedicine.mockResolvedValue({});
vi.spyOn(window, 'confirm').mockReturnValue(true);
@ -131,9 +147,13 @@ describe('LibraryTab', () => {
// Change category
fireEvent.change(screen.getByDisplayValue('OTC'), { target: { value: 'prescription' } });
// Change notes (covers truthy branch)
fireEvent.change(screen.getByPlaceholderText('Any additional notes'), { target: { value: 'test notes' } });
fireEvent.change(screen.getByPlaceholderText('Any additional notes'), {
target: { value: 'test notes' },
});
// Clear notes (covers falsy branch → undefined)
fireEvent.change(screen.getByPlaceholderText('Any additional notes'), { target: { value: '' } });
fireEvent.change(screen.getByPlaceholderText('Any additional notes'), {
target: { value: '' },
});
// Verify form is still visible
expect(screen.getByPlaceholderText('e.g. Metformin')).toBeInTheDocument();
@ -150,10 +170,14 @@ describe('LibraryTab', () => {
await waitFor(() => screen.getByText('Metformin'));
// Search filter
fireEvent.change(screen.getByPlaceholderText('Search medicines...'), { target: { value: 'met' } });
fireEvent.change(screen.getByPlaceholderText('Search medicines...'), {
target: { value: 'met' },
});
// Category filter
fireEvent.change(screen.getByDisplayValue('All Categories'), { target: { value: 'prescription' } });
fireEvent.change(screen.getByDisplayValue('All Categories'), {
target: { value: 'prescription' },
});
// Form filter
fireEvent.change(screen.getByDisplayValue('All Forms'), { target: { value: 'tablet' } });
@ -162,7 +186,10 @@ describe('LibraryTab', () => {
});
it('shows fallback error when non-Error is thrown on delete', async () => {
mockListMedicines.mockResolvedValue({ data: [medicine], pagination: { cursor: null, hasMore: false } });
mockListMedicines.mockResolvedValue({
data: [medicine],
pagination: { cursor: null, hasMore: false },
});
mockDeleteMedicine.mockRejectedValue('oops');
vi.spyOn(window, 'confirm').mockReturnValue(true);
@ -207,7 +234,10 @@ describe('LibraryTab', () => {
});
it('does not delete medicine if confirmation cancelled', async () => {
mockListMedicines.mockResolvedValue({ data: [medicine], pagination: { cursor: null, hasMore: false } });
mockListMedicines.mockResolvedValue({
data: [medicine],
pagination: { cursor: null, hasMore: false },
});
vi.spyOn(window, 'confirm').mockReturnValue(false);
render(<LibraryTab householdId="hh1" />);

32
packages/web/src/app/(dashboard)/medicines/__tests__/OrganizerTab.test.tsx
View file

@ -50,9 +50,7 @@ describe('OrganizerTab', () => {
it('shows no active regimens message when none exist', async () => {
render(<OrganizerTab householdId="hh1" />);
await waitFor(() =>
expect(screen.getByText(/No active regimens found/)).toBeInTheDocument(),
);
await waitFor(() => expect(screen.getByText(/No active regimens found/)).toBeInTheDocument());
});
it('shows fill form when active regimens exist', async () => {
@ -69,9 +67,7 @@ describe('OrganizerTab', () => {
it('shows empty fill history', async () => {
render(<OrganizerTab householdId="hh1" />);
await waitFor(() =>
expect(screen.getByText('No fills recorded yet.')).toBeInTheDocument(),
);
await waitFor(() => expect(screen.getByText('No fills recorded yet.')).toBeInTheDocument());
});
it('renders fill history entries', async () => {
@ -118,7 +114,10 @@ describe('OrganizerTab', () => {
fireEvent.submit(screen.getByText('Preview fill').closest('form')!);
await waitFor(() =>
expect(mockPreviewFill).toHaveBeenCalledWith('hh1', expect.objectContaining({ regimenId: 'reg-1' })),
expect(mockPreviewFill).toHaveBeenCalledWith(
'hh1',
expect.objectContaining({ regimenId: 'reg-1' }),
),
);
});
@ -159,7 +158,12 @@ describe('OrganizerTab', () => {
await userEvent.click(screen.getByText('Confirm fill'));
await waitFor(() => expect(mockExecuteFill).toHaveBeenCalledWith('hh1', expect.objectContaining({ regimenId: 'reg-1' })));
await waitFor(() =>
expect(mockExecuteFill).toHaveBeenCalledWith(
'hh1',
expect.objectContaining({ regimenId: 'reg-1' }),
),
);
});
it('shows shortage warning in preview', async () => {
@ -291,7 +295,8 @@ describe('OrganizerTab', () => {
status: 'partial',
numberOfDays: 7,
fillDate: '2026-01-01T00:00:00.000Z',
items: [{
items: [
{
medicineId: 'med-1',
medicineName: 'Metformin',
quantityNeeded: 7,
@ -299,7 +304,8 @@ describe('OrganizerTab', () => {
wasShort: true,
shortage: 4,
deductions: [],
}],
},
],
createdAt: '2026-01-01T00:00:00.000Z',
updatedAt: '2026-01-01T00:00:00.000Z',
},
@ -395,7 +401,11 @@ describe('OrganizerTab', () => {
isShort: false,
shortage: 0,
cabinetBreakdown: [
{ cabinetItemId: 'ci-1', quantityToTake: 7, expirationDate: '2027-06-01T00:00:00.000Z' },
{
cabinetItemId: 'ci-1',
quantityToTake: 7,
expirationDate: '2027-06-01T00:00:00.000Z',
},
{ cabinetItemId: 'ci-2', quantityToTake: 3 },
],
},

103
packages/web/src/app/(dashboard)/medicines/__tests__/RegimensTab.test.tsx
View file

@ -2,8 +2,13 @@ import { describe, it, expect, vi, beforeEach } from 'vitest';
import { render, screen, waitFor, fireEvent } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
const { mockListRegimens, mockCreateRegimen, mockUpdateRegimen, mockDeleteRegimen, mockGetBurnRates } =
vi.hoisted(() => ({
const {
mockListRegimens,
mockCreateRegimen,
mockUpdateRegimen,
mockDeleteRegimen,
mockGetBurnRates,
} = vi.hoisted(() => ({
mockListRegimens: vi.fn(),
mockCreateRegimen: vi.fn(),
mockUpdateRegimen: vi.fn(),
@ -62,7 +67,10 @@ describe('RegimensTab', () => {
});
it('renders regimen list', async () => {
mockListRegimens.mockResolvedValue({ data: [regimen], pagination: { cursor: null, hasMore: false } });
mockListRegimens.mockResolvedValue({
data: [regimen],
pagination: { cursor: null, hasMore: false },
});
render(<RegimensTab householdId="hh1" />);
@ -122,7 +130,10 @@ describe('RegimensTab', () => {
});
it('deletes regimen after confirmation', async () => {
mockListRegimens.mockResolvedValue({ data: [regimen], pagination: { cursor: null, hasMore: false } });
mockListRegimens.mockResolvedValue({
data: [regimen],
pagination: { cursor: null, hasMore: false },
});
mockDeleteRegimen.mockResolvedValue({});
vi.spyOn(window, 'confirm').mockReturnValue(true);
@ -142,12 +153,17 @@ describe('RegimensTab', () => {
await waitFor(() => screen.getByText('Burn rate'));
await userEvent.click(screen.getByText('Burn rate'));
await waitFor(() => expect(screen.getByText('Burn Rate & Spending Projections')).toBeInTheDocument());
await waitFor(() =>
expect(screen.getByText('Burn Rate & Spending Projections')).toBeInTheDocument(),
);
expect(mockGetBurnRates).toHaveBeenCalledWith('hh1');
});
it('opens edit form for regimen', async () => {
mockListRegimens.mockResolvedValue({ data: [regimen], pagination: { cursor: null, hasMore: false } });
mockListRegimens.mockResolvedValue({
data: [regimen],
pagination: { cursor: null, hasMore: false },
});
render(<RegimensTab householdId="hh1" />);
@ -158,7 +174,10 @@ describe('RegimensTab', () => {
});
it('saves edited regimen', async () => {
mockListRegimens.mockResolvedValue({ data: [regimen], pagination: { cursor: null, hasMore: false } });
mockListRegimens.mockResolvedValue({
data: [regimen],
pagination: { cursor: null, hasMore: false },
});
mockUpdateRegimen.mockResolvedValue({ ...regimen, name: 'Evening Routine' });
render(<RegimensTab householdId="hh1" />);
@ -167,11 +186,17 @@ describe('RegimensTab', () => {
await userEvent.click(screen.getByTitle('Edit'));
await waitFor(() => screen.getByDisplayValue('Morning Routine'));
fireEvent.change(screen.getByDisplayValue('Morning Routine'), { target: { value: 'Evening Routine' } });
fireEvent.change(screen.getByDisplayValue('Morning Routine'), {
target: { value: 'Evening Routine' },
});
fireEvent.submit(screen.getByDisplayValue('Evening Routine').closest('form')!);
await waitFor(() =>
expect(mockUpdateRegimen).toHaveBeenCalledWith('hh1', 'reg-1', expect.objectContaining({ name: 'Evening Routine' })),
expect(mockUpdateRegimen).toHaveBeenCalledWith(
'hh1',
'reg-1',
expect.objectContaining({ name: 'Evening Routine' }),
),
);
});
@ -196,7 +221,10 @@ describe('RegimensTab', () => {
});
it('shows error when delete fails', async () => {
mockListRegimens.mockResolvedValue({ data: [regimen], pagination: { cursor: null, hasMore: false } });
mockListRegimens.mockResolvedValue({
data: [regimen],
pagination: { cursor: null, hasMore: false },
});
mockDeleteRegimen.mockRejectedValue(new Error('Delete failed'));
vi.spyOn(window, 'confirm').mockReturnValue(true);
@ -237,7 +265,10 @@ describe('RegimensTab', () => {
});
it('cancels edit form and hides it', async () => {
mockListRegimens.mockResolvedValue({ data: [regimen], pagination: { cursor: null, hasMore: false } });
mockListRegimens.mockResolvedValue({
data: [regimen],
pagination: { cursor: null, hasMore: false },
});
render(<RegimensTab householdId="hh1" />);
@ -251,7 +282,10 @@ describe('RegimensTab', () => {
});
it('filters regimens by active status', async () => {
mockListRegimens.mockResolvedValue({ data: [regimen], pagination: { cursor: null, hasMore: false } });
mockListRegimens.mockResolvedValue({
data: [regimen],
pagination: { cursor: null, hasMore: false },
});
render(<RegimensTab householdId="hh1" />);
@ -288,7 +322,9 @@ describe('RegimensTab', () => {
it('changes medicine, dosage, and unit in medication row', async () => {
mockListMedicines.mockResolvedValue({
data: [{ _id: 'med-1', name: 'Metformin', strength: 500, strengthUnit: 'mg', form: 'tablet' }],
data: [
{ _id: 'med-1', name: 'Metformin', strength: 500, strengthUnit: 'mg', form: 'tablet' },
],
pagination: { cursor: null, hasMore: false },
});
@ -300,7 +336,9 @@ describe('RegimensTab', () => {
await waitFor(() => screen.getByText('Select medicine...'));
// Select a medicine in the medication row
const medicineSelect = screen.getAllByRole('combobox').find(
const medicineSelect = screen
.getAllByRole('combobox')
.find(
(s) => (s as HTMLSelectElement).options[0]?.text === 'Select medicine...',
) as HTMLSelectElement;
expect(medicineSelect).toBeDefined();
@ -311,9 +349,9 @@ describe('RegimensTab', () => {
if (dosageInput) fireEvent.change(dosageInput, { target: { value: '2' } });
// Change dosage unit
const unitSelect = screen.getAllByRole('combobox').find(
(s) => (s as HTMLSelectElement).value === 'tablet',
) as HTMLSelectElement;
const unitSelect = screen
.getAllByRole('combobox')
.find((s) => (s as HTMLSelectElement).value === 'tablet') as HTMLSelectElement;
if (unitSelect) fireEvent.change(unitSelect!, { target: { value: 'capsule' } });
expect(screen.getByPlaceholderText('e.g. Morning routine')).toBeInTheDocument();
@ -342,9 +380,9 @@ describe('RegimensTab', () => {
await waitFor(() => screen.getByPlaceholderText('e.g. Morning routine'));
// The frequency select has 'daily' as its first option value
const frequencySelect = screen.getAllByRole('combobox').find(
(s) => (s as HTMLSelectElement).options[0]?.value === 'daily',
) as HTMLSelectElement;
const frequencySelect = screen
.getAllByRole('combobox')
.find((s) => (s as HTMLSelectElement).options[0]?.value === 'daily') as HTMLSelectElement;
expect(frequencySelect).toBeDefined();
fireEvent.change(frequencySelect!, { target: { value: 'custom' } });
@ -368,9 +406,9 @@ describe('RegimensTab', () => {
await waitFor(() => screen.getByPlaceholderText('e.g. Morning routine'));
// The time-of-day select has 'Any time' as its first option text
const timeOfDaySelect = screen.getAllByRole('combobox').find(
(s) => (s as HTMLSelectElement).options[0]?.text === 'Any time',
) as HTMLSelectElement;
const timeOfDaySelect = screen
.getAllByRole('combobox')
.find((s) => (s as HTMLSelectElement).options[0]?.text === 'Any time') as HTMLSelectElement;
expect(timeOfDaySelect).toBeDefined();
fireEvent.change(timeOfDaySelect!, { target: { value: 'morning' } });
@ -389,7 +427,10 @@ describe('RegimensTab', () => {
});
it('shows error when update fails', async () => {
mockListRegimens.mockResolvedValue({ data: [regimen], pagination: { cursor: null, hasMore: false } });
mockListRegimens.mockResolvedValue({
data: [regimen],
pagination: { cursor: null, hasMore: false },
});
mockUpdateRegimen.mockRejectedValue(new Error('Update failed'));
render(<RegimensTab householdId="hh1" />);
@ -401,7 +442,10 @@ describe('RegimensTab', () => {
});
it('toggles active/inactive status', async () => {
mockListRegimens.mockResolvedValue({ data: [regimen], pagination: { cursor: null, hasMore: false } });
mockListRegimens.mockResolvedValue({
data: [regimen],
pagination: { cursor: null, hasMore: false },
});
mockUpdateRegimen.mockResolvedValue({ ...regimen, isActive: false });
render(<RegimensTab householdId="hh1" />);
@ -452,9 +496,7 @@ describe('RegimensTab', () => {
await waitFor(() => screen.getByDisplayValue('All regimens'));
fireEvent.change(screen.getByDisplayValue('All regimens'), { target: { value: 'active' } });
await waitFor(() =>
expect(screen.getByText('No active regimens found.')).toBeInTheDocument(),
);
await waitFor(() => expect(screen.getByText('No active regimens found.')).toBeInTheDocument());
});
it('shows null when form is open and regimens list is empty', async () => {
@ -516,7 +558,10 @@ describe('RegimensTab', () => {
});
it('initializes edit form with existing medications', async () => {
mockListRegimens.mockResolvedValue({ data: [regimen], pagination: { cursor: null, hasMore: false } });
mockListRegimens.mockResolvedValue({
data: [regimen],
pagination: { cursor: null, hasMore: false },
});
render(<RegimensTab householdId="hh1" />);

5
packages/web/src/app/(dashboard)/medicines/activity/__tests__/page.test.tsx
View file

@ -1,10 +1,13 @@
import { describe, it, expect, vi } from 'vitest';
import { render, screen } from '@testing-library/react';
import type React from 'react';
const { mockUseApi } = vi.hoisted(() => ({ mockUseApi: vi.fn() }));
vi.mock('@/lib/useApi', () => ({ useApi: mockUseApi }));
vi.mock('next/link', () => ({ default: (props: any) => props.children }));
vi.mock('next/link', () => ({
default: (props: { href?: string; children: React.ReactNode }) => props.children,
}));
vi.mock('@/app/(dashboard)/medicines/ActivityTab', () => ({
ActivityTab: ({ householdId }: { householdId: string }) => (
<div data-testid="activity-tab">{householdId}</div>

54
packages/web/src/app/(dashboard)/medicines/activity/page.tsx
View file

@ -1,51 +1,49 @@
'use client';
import Link from 'next/link';
import { useApi } from '@/lib/useApi';
import { ActivityTab } from '../ActivityTab';
import { SetPageHeader } from '@/components/layout/SetPageHeader';
import { PageSkeleton, NoHousehold } from '../helpers';
export default function ActivityPage() {
const { householdId, isLoading: sessionLoading } = useApi();
if (sessionLoading) {
return (
<div>
<h1 className="text-2xl font-bold mb-4">Cabinet Activity</h1>
<div className="animate-pulse space-y-3">
<div className="h-40 rounded-xl bg-gray-200" />
<div className="h-40 rounded-xl bg-gray-200" />
</div>
</div>
<>
<SetPageHeader
title="Cabinet Activity"
subtitle="Spending and cabinet changes"
crumbs={['Medicines', 'Activity']}
/>
<PageSkeleton />
</>
);
}
if (!householdId) {
return (
<div>
<h1 className="text-2xl font-bold mb-4">Cabinet Activity</h1>
<div className="rounded-xl border bg-white p-6 shadow-sm">
<p className="text-gray-500">
You need to{' '}
<Link href="/settings" className="text-primary-600 underline">
create or join a household
</Link>{' '}
before viewing cabinet activity.
</p>
</div>
</div>
<>
<SetPageHeader
title="Cabinet Activity"
subtitle="Spending and cabinet changes"
crumbs={['Medicines', 'Activity']}
/>
<NoHousehold />
</>
);
}
return (
<div>
<div className="flex items-center gap-3 mb-6">
<Link href="/medicines" className="text-sm text-gray-500 hover:text-gray-700">
Medicines
</Link>
<span className="text-gray-400">/</span>
<h1 className="text-2xl font-bold">Cabinet Activity</h1>
</div>
<>
<SetPageHeader
title="Cabinet Activity"
subtitle="Spending and cabinet changes"
crumbs={['Medicines', 'Activity']}
/>
<div className="mt-page">
<ActivityTab householdId={householdId} />
</div>
</>
);
}

5
packages/web/src/app/(dashboard)/medicines/cabinet/__tests__/page.test.tsx
View file

@ -1,10 +1,13 @@
import { describe, it, expect, vi } from 'vitest';
import { render, screen } from '@testing-library/react';
import type React from 'react';
const { mockUseApi } = vi.hoisted(() => ({ mockUseApi: vi.fn() }));
vi.mock('@/lib/useApi', () => ({ useApi: mockUseApi }));
vi.mock('next/link', () => ({ default: (props: any) => props.children }));
vi.mock('next/link', () => ({
default: (props: { href?: string; children: React.ReactNode }) => props.children,
}));
vi.mock('@/app/(dashboard)/medicines/CabinetTab', () => ({
CabinetTab: ({ householdId }: { householdId: string }) => (
<div data-testid="cabinet-tab">{householdId}</div>

62
packages/web/src/app/(dashboard)/medicines/cabinet/page.tsx
View file

@ -3,39 +3,77 @@
import Link from 'next/link';
import { useApi } from '@/lib/useApi';
import { CabinetTab } from '../CabinetTab';
import { SetPageHeader } from '@/components/layout/SetPageHeader';
export default function CabinetPage() {
const { householdId, isLoading: sessionLoading } = useApi();
if (sessionLoading) {
return (
<div>
<h1 className="text-2xl font-bold mb-4">Medicine Cabinet</h1>
<div className="animate-pulse space-y-3">
<div className="h-10 w-64 rounded-lg bg-gray-200" />
<div className="h-20 rounded-xl bg-gray-200" />
<div className="h-20 rounded-xl bg-gray-200" />
<>
<SetPageHeader
title="Medicine Cabinet"
subtitle="Everything on hand, with days of supply"
crumbs={['Medicines', 'Cabinet']}
/>
<div style={{ padding: '28px 32px' }}>
<div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
{[1, 2, 3].map((i) => (
<div
key={i}
style={{
height: 64,
borderRadius: 'var(--r-md)',
background: 'var(--bg-inset)',
}}
/>
))}
</div>
</div>
</>
);
}
if (!householdId) {
return (
<div>
<h1 className="text-2xl font-bold mb-4">Medicine Cabinet</h1>
<div className="rounded-xl border bg-white p-6 shadow-sm">
<p className="text-gray-500">
<>
<SetPageHeader
title="Medicine Cabinet"
subtitle="Everything on hand, with days of supply"
crumbs={['Medicines', 'Cabinet']}
/>
<div style={{ padding: '28px 32px' }}>
<div
style={{
background: 'var(--bg-elev)',
border: '1px solid var(--border)',
borderRadius: 'var(--r-md)',
padding: 24,
}}
>
<p style={{ color: 'var(--ink-muted)', fontSize: 14 }}>
You need to{' '}
<Link href="/settings" className="text-primary-600 underline">
<Link href="/settings" style={{ color: 'var(--brand)', textDecoration: 'underline' }}>
create or join a household
</Link>{' '}
before managing medicines.
</p>
</div>
</div>
</>
);
}
return <CabinetTab householdId={householdId} />;
return (
<>
<SetPageHeader
title="Medicine Cabinet"
subtitle="Everything on hand, with days of supply"
crumbs={['Medicines', 'Cabinet']}
/>
<div className="mt-page">
<CabinetTab householdId={householdId} />
</div>
</>
);
}

43
packages/web/src/app/(dashboard)/medicines/helpers.tsx Normal file
View file

@ -0,0 +1,43 @@
import Link from 'next/link';
export function PageSkeleton() {
return (
<div style={{ padding: '28px 32px' }}>
<div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
{[1, 2, 3].map((i) => (
<div
key={i}
style={{
height: 64,
borderRadius: 'var(--r-md)',
background: 'var(--bg-inset)',
}}
/>
))}
</div>
</div>
);
}
export function NoHousehold() {
return (
<div style={{ padding: '28px 32px' }}>
<div
style={{
background: 'var(--bg-elev)',
border: '1px solid var(--border)',
borderRadius: 'var(--r-md)',
padding: 24,
}}
>
<p style={{ color: 'var(--ink-muted)', fontSize: 14 }}>
You need to{' '}
<Link href="/settings" style={{ color: 'var(--brand)', textDecoration: 'underline' }}>
create or join a household
</Link>{' '}
before managing medicines.
</p>
</div>
</div>
);
}

5
packages/web/src/app/(dashboard)/medicines/library/__tests__/page.test.tsx
View file

@ -1,10 +1,13 @@
import { describe, it, expect, vi } from 'vitest';
import { render, screen } from '@testing-library/react';
import type React from 'react';
const { mockUseApi } = vi.hoisted(() => ({ mockUseApi: vi.fn() }));
vi.mock('@/lib/useApi', () => ({ useApi: mockUseApi }));
vi.mock('next/link', () => ({ default: (props: any) => props.children }));
vi.mock('next/link', () => ({
default: (props: { href?: string; children: React.ReactNode }) => props.children,
}));
vi.mock('@/app/(dashboard)/medicines/LibraryTab', () => ({
LibraryTab: ({ householdId }: { householdId: string }) => (
<div data-testid="library-tab">{householdId}</div>

52
packages/web/src/app/(dashboard)/medicines/library/page.tsx
View file

@ -1,41 +1,49 @@
'use client';
import Link from 'next/link';
import { useApi } from '@/lib/useApi';
import { LibraryTab } from '../LibraryTab';
import { SetPageHeader } from '@/components/layout/SetPageHeader';
import { PageSkeleton, NoHousehold } from '../helpers';
export default function LibraryPage() {
const { householdId, isLoading: sessionLoading } = useApi();
if (sessionLoading) {
return (
<div>
<h1 className="text-2xl font-bold mb-4">Medicine Library</h1>
<div className="animate-pulse space-y-3">
<div className="h-10 w-64 rounded-lg bg-gray-200" />
<div className="h-20 rounded-xl bg-gray-200" />
<div className="h-20 rounded-xl bg-gray-200" />
</div>
</div>
<>
<SetPageHeader
title="Medicine Library"
subtitle="All known medicines"
crumbs={['Medicines', 'Library']}
/>
<PageSkeleton />
</>
);
}
if (!householdId) {
return (
<div>
<h1 className="text-2xl font-bold mb-4">Medicine Library</h1>
<div className="rounded-xl border bg-white p-6 shadow-sm">
<p className="text-gray-500">
You need to{' '}
<Link href="/settings" className="text-primary-600 underline">
create or join a household
</Link>{' '}
before managing medicines.
</p>
</div>
</div>
<>
<SetPageHeader
title="Medicine Library"
subtitle="All known medicines"
crumbs={['Medicines', 'Library']}
/>
<NoHousehold />
</>
);
}
return <LibraryTab householdId={householdId} />;
return (
<>
<SetPageHeader
title="Medicine Library"
subtitle="All known medicines"
crumbs={['Medicines', 'Library']}
/>
<div className="mt-page">
<LibraryTab householdId={householdId} />
</div>
</>
);
}

5
packages/web/src/app/(dashboard)/medicines/organizer/__tests__/page.test.tsx
View file

@ -1,10 +1,13 @@
import { describe, it, expect, vi } from 'vitest';
import { render, screen } from '@testing-library/react';
import type React from 'react';
const { mockUseApi } = vi.hoisted(() => ({ mockUseApi: vi.fn() }));
vi.mock('@/lib/useApi', () => ({ useApi: mockUseApi }));
vi.mock('next/link', () => ({ default: (props: any) => props.children }));
vi.mock('next/link', () => ({
default: (props: { href?: string; children: React.ReactNode }) => props.children,
}));
vi.mock('@/app/(dashboard)/medicines/OrganizerTab', () => ({
OrganizerTab: ({ householdId }: { householdId: string }) => (
<div data-testid="organizer-tab">{householdId}</div>

54
packages/web/src/app/(dashboard)/medicines/organizer/page.tsx
View file

@ -1,51 +1,49 @@
'use client';
import Link from 'next/link';
import { useApi } from '@/lib/useApi';
import { OrganizerTab } from '../OrganizerTab';
import { SetPageHeader } from '@/components/layout/SetPageHeader';
import { PageSkeleton, NoHousehold } from '../helpers';
export default function OrganizerPage() {
const { householdId, isLoading: sessionLoading } = useApi();
if (sessionLoading) {
return (
<div>
<h1 className="text-2xl font-bold mb-4">Pill Organizer</h1>
<div className="animate-pulse space-y-3">
<div className="h-40 rounded-xl bg-gray-200" />
<div className="h-40 rounded-xl bg-gray-200" />
</div>
</div>
<>
<SetPageHeader
title="Pill Organizer"
subtitle="Fill a week of pills at once"
crumbs={['Medicines', 'Organizer']}
/>
<PageSkeleton />
</>
);
}
if (!householdId) {
return (
<div>
<h1 className="text-2xl font-bold mb-4">Pill Organizer</h1>
<div className="rounded-xl border bg-white p-6 shadow-sm">
<p className="text-gray-500">
You need to{' '}
<Link href="/settings" className="text-primary-600 underline">
create or join a household
</Link>{' '}
before using the pill organizer.
</p>
</div>
</div>
<>
<SetPageHeader
title="Pill Organizer"
subtitle="Fill a week of pills at once"
crumbs={['Medicines', 'Organizer']}
/>
<NoHousehold />
</>
);
}
return (
<div>
<div className="flex items-center gap-3 mb-6">
<Link href="/medicines" className="text-sm text-gray-500 hover:text-gray-700">
Medicines
</Link>
<span className="text-gray-400">/</span>
<h1 className="text-2xl font-bold">Pill Organizer</h1>
</div>
<>
<SetPageHeader
title="Pill Organizer"
subtitle="Fill a week of pills at once"
crumbs={['Medicines', 'Organizer']}
/>
<div className="mt-page">
<OrganizerTab householdId={householdId} />
</div>
</>
);
}

109
packages/web/src/app/(dashboard)/medicines/page.tsx
View file

@ -2,82 +2,122 @@
import Link from 'next/link';
import { useApi } from '@/lib/useApi';
import { SetPageHeader } from '@/components/layout/SetPageHeader';
import { Icon } from '@/components/ui/Icon';
import type { IconName } from '@/components/ui/Icon';
export default function MedicinesPage() {
const { householdId, isLoading: sessionLoading } = useApi();
if (sessionLoading) {
return <PageSkeleton />;
return (
<>
<SetPageHeader title="Medicines" subtitle="All known medicines" />
<PageSkeleton />
</>
);
}
if (!householdId) {
return (
<div>
<h1 className="text-2xl font-bold mb-4">Medicines</h1>
<div className="rounded-xl border bg-white p-6 shadow-sm">
<p className="text-gray-500">
<>
<SetPageHeader title="Medicines" subtitle="All known medicines" />
<div style={{ padding: '28px 32px' }}>
<div
style={{
background: 'var(--bg-elev)',
border: '1px solid var(--border)',
borderRadius: 'var(--r-md)',
padding: 24,
}}
>
<p style={{ color: 'var(--ink-muted)', fontSize: 14 }}>
You need to{' '}
<Link href="/settings" className="text-primary-600 underline">
<Link href="/settings" style={{ color: 'var(--brand)', textDecoration: 'underline' }}>
create or join a household
</Link>{' '}
before managing medicines.
</p>
</div>
</div>
</>
);
}
return (
<div>
<h1 className="text-2xl font-bold mb-6">Medicines</h1>
<div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
<>
<SetPageHeader title="Medicines" subtitle="All known medicines" />
<div style={{ padding: '28px 32px 56px', maxWidth: 1400 }}>
<div
style={{
display: 'grid',
gridTemplateColumns: 'repeat(auto-fill, minmax(260px, 1fr))',
gap: 14,
}}
>
<SectionCard
title="Library"
description="Manage your medicines and their products"
href="/medicines/library"
icon="pill"
/>
<SectionCard
title="Cabinet"
description="Track your medicine inventory, quantities and expiry dates"
href="/medicines/cabinet"
icon="cabinet"
/>
<SectionCard
title="Schedule"
description="Today's dose log and weekly overview"
href="/medicines/schedule"
icon="clock"
/>
<SectionCard
title="Regimens"
description="Define daily medication schedules and track dosage frequency"
description="Define daily medication schedules"
href="/medicines/regimens"
icon="list"
/>
<SectionCard
title="Organizer"
description="Fill your pill organizer and track cabinet usage"
href="/medicines/organizer"
icon="calendar"
/>
<SectionCard
title="Activity"
description="View cabinet event history and spending summaries"
href="/medicines/activity"
icon="trend"
/>
<SectionCard
title="Stores"
description="Manage pharmacies and stores for price tracking"
href="/stores"
icon="store"
/>
<SectionCard
title="Prices"
description="Track and compare medicine prices across stores"
href="/medicine-prices"
icon="tag"
/>
<SectionCard
title="Refills"
description="Get refill alerts and manage shopping lists"
href="/refills"
icon="refresh"
/>
<SectionCard
title="Purchases"
description="Record medicine purchases and track online orders"
href="/purchases"
icon="truck"
/>
</div>
</div>
</>
);
}
@ -85,29 +125,64 @@ function SectionCard({
title,
description,
href,
icon,
}: {
title: string;
description: string;
href: string;
icon: IconName;
}) {
return (
<Link
href={href}
className="rounded-xl border bg-white p-6 shadow-sm hover:shadow-md transition-shadow"
style={{
display: 'flex',
flexDirection: 'column',
gap: 10,
padding: 18,
background: 'var(--bg-elev)',
border: '1px solid var(--border)',
borderRadius: 'var(--r-md)',
textDecoration: 'none',
transition: 'all 0.15s',
}}
>
<h2 className="text-lg font-semibold">{title}</h2>
<p className="mt-1 text-sm text-gray-500">{description}</p>
<div
style={{
width: 34,
height: 34,
borderRadius: 'var(--r-sm)',
background: 'var(--brand-soft)',
color: 'var(--brand)',
display: 'grid',
placeItems: 'center',
}}
>
<Icon name={icon} size={16} />
</div>
<div>
<div style={{ fontSize: 14, fontWeight: 500, color: 'var(--ink-strong)' }}>{title}</div>
<div style={{ fontSize: 12, color: 'var(--ink-muted)', marginTop: 2 }}>{description}</div>
</div>
</Link>
);
}
function PageSkeleton() {
return (
<div>
<h1 className="text-2xl font-bold mb-6">Medicines</h1>
<div className="animate-pulse grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
<div style={{ padding: '28px 32px' }}>
<div
style={{
display: 'grid',
gridTemplateColumns: 'repeat(auto-fill, minmax(260px, 1fr))',
gap: 14,
}}
>
{Array.from({ length: 9 }).map((_, i) => (
<div key={i} className="h-24 rounded-xl bg-gray-200" />
<div
key={i}
style={{ height: 96, borderRadius: 'var(--r-md)', background: 'var(--bg-inset)' }}
/>
))}
</div>
</div>

5
packages/web/src/app/(dashboard)/medicines/regimens/__tests__/page.test.tsx
View file

@ -1,10 +1,13 @@
import { describe, it, expect, vi } from 'vitest';
import { render, screen } from '@testing-library/react';
import type React from 'react';
const { mockUseApi } = vi.hoisted(() => ({ mockUseApi: vi.fn() }));
vi.mock('@/lib/useApi', () => ({ useApi: mockUseApi }));
vi.mock('next/link', () => ({ default: (props: any) => props.children }));
vi.mock('next/link', () => ({
default: (props: { href?: string; children: React.ReactNode }) => props.children,
}));
vi.mock('@/app/(dashboard)/medicines/RegimensTab', () => ({
RegimensTab: ({ householdId }: { householdId: string }) => (
<div data-testid="regimens-tab">{householdId}</div>

55
packages/web/src/app/(dashboard)/medicines/regimens/page.tsx
View file

@ -1,52 +1,49 @@
'use client';
import Link from 'next/link';
import { useApi } from '@/lib/useApi';
import { RegimensTab } from '../RegimensTab';
import { SetPageHeader } from '@/components/layout/SetPageHeader';
import { PageSkeleton, NoHousehold } from '../helpers';
export default function RegimensPage() {
const { householdId, isLoading: sessionLoading } = useApi();
if (sessionLoading) {
return (
<div>
<h1 className="text-2xl font-bold mb-4">Regimens</h1>
<div className="animate-pulse space-y-3">
<div className="h-10 w-64 rounded-lg bg-gray-200" />
<div className="h-24 rounded-xl bg-gray-200" />
<div className="h-24 rounded-xl bg-gray-200" />
</div>
</div>
<>
<SetPageHeader
title="Regimens"
subtitle="Daily medication schedules"
crumbs={['Medicines', 'Regimens']}
/>
<PageSkeleton />
</>
);
}
if (!householdId) {
return (
<div>
<h1 className="text-2xl font-bold mb-4">Regimens</h1>
<div className="rounded-xl border bg-white p-6 shadow-sm">
<p className="text-gray-500">
You need to{' '}
<Link href="/settings" className="text-primary-600 underline">
create or join a household
</Link>{' '}
before managing regimens.
</p>
</div>
</div>
<>
<SetPageHeader
title="Regimens"
subtitle="Daily medication schedules"
crumbs={['Medicines', 'Regimens']}
/>
<NoHousehold />
</>
);
}
return (
<div>
<div className="flex items-center gap-3 mb-6">
<Link href="/medicines" className="text-sm text-gray-500 hover:text-gray-700">
Medicines
</Link>
<span className="text-gray-400">/</span>
<h1 className="text-2xl font-bold">Regimens</h1>
</div>
<>
<SetPageHeader
title="Regimens"
subtitle="Daily medication schedules"
crumbs={['Medicines', 'Regimens']}
/>
<div className="mt-page">
<RegimensTab householdId={householdId} />
</div>
</>
);
}

297
packages/web/src/app/(dashboard)/medicines/schedule/page.tsx Normal file
View file

@ -0,0 +1,297 @@
'use client';
import { useState, useEffect } from 'react';
import { useApi } from '@/lib/useApi';
import { listRegimens } from '@/services/regimens';
import { SetPageHeader } from '@/components/layout/SetPageHeader';
import { Card, CardHeader } from '@/components/ui/Card';
import { Icon } from '@/components/ui/Icon';
import { PageSkeleton, NoHousehold } from '../helpers';
import Link from 'next/link';
import type { z } from 'zod/v4';
import type { RegimenResponseSchema } from '@meshitrack/shared';
type Regimen = z.infer<typeof RegimenResponseSchema>;
type Medication = Regimen['medications'][number];
const TIME_SLOTS = [
{ key: 'morning', label: 'Morning', icon: 'sun' as const },
{ key: 'afternoon', label: 'Afternoon', icon: 'sun' as const },
{ key: 'evening', label: 'Evening', icon: 'moon' as const },
{ key: 'bedtime', label: 'Bedtime', icon: 'moon' as const },
{ key: 'any', label: 'Any time', icon: 'clock' as const },
] as const;
const FREQUENCY_LABELS: Record<string, string> = {
daily: 'Once daily',
twice_daily: 'Twice daily',
three_times_daily: 'Three times daily',
weekly: 'Weekly',
every_other_day: 'Every other day',
as_needed: 'As needed',
custom: 'Custom',
};
type SlotEntry = { regimen: Regimen; medication: Medication };
function groupByTimeSlot(regimens: Regimen[]): Record<string, SlotEntry[]> {
const groups: Record<string, SlotEntry[]> = {
morning: [],
afternoon: [],
evening: [],
bedtime: [],
any: [],
};
for (const regimen of regimens) {
for (const medication of regimen.medications) {
const slot = medication.timeOfDay ?? 'any';
if (slot in groups) {
groups[slot].push({ regimen, medication });
} else {
groups.any.push({ regimen, medication });
}
}
}
return groups;
}
function MedicationCard({ regimen, medication }: SlotEntry) {
const freqLabel =
medication.frequency === 'custom' && medication.customFrequencyPerDay
? `${medication.customFrequencyPerDay}x daily`
: (FREQUENCY_LABELS[medication.frequency] ?? medication.frequency);
return (
<div
style={{
display: 'flex',
alignItems: 'flex-start',
gap: 12,
padding: '12px 16px',
borderBottom: '1px solid var(--border)',
}}
>
<div
style={{
width: 36,
height: 36,
borderRadius: 'var(--r-sm)',
background: 'var(--brand-soft)',
display: 'grid',
placeItems: 'center',
color: 'var(--brand)',
flexShrink: 0,
}}
>
<Icon name="pill" size={18} />
</div>
<div style={{ flex: 1, minWidth: 0 }}>
<div style={{ fontSize: 14, fontWeight: 500, color: 'var(--ink-strong)' }}>
{medication.medicineName}{' '}
<span style={{ fontWeight: 400, color: 'var(--ink-muted)' }}>
{medication.medicineStrength} {medication.medicineStrengthUnit}
</span>
</div>
<div style={{ fontSize: 13, color: 'var(--ink-muted)', marginTop: 2 }}>
{medication.dosage} {medication.dosageUnit} &mdash; {freqLabel}
</div>
{medication.instructions && (
<div style={{ fontSize: 12, color: 'var(--ink-faint)', marginTop: 2 }}>
{medication.instructions}
</div>
)}
<div style={{ fontSize: 11, color: 'var(--ink-faint)', marginTop: 4 }}>
<span className="mt-pill mt-pill--ghost">{regimen.name}</span>
</div>
</div>
</div>
);
}
function TimeSlotCard({
label,
icon,
entries,
}: {
slotKey: string;
label: string;
icon: 'sun' | 'moon' | 'clock';
entries: SlotEntry[];
}) {
if (entries.length === 0) return null;
return (
<Card style={{ marginBottom: 16 }}>
<CardHeader
title={label}
subtitle={`${entries.length} dose${entries.length !== 1 ? 's' : ''}`}
action={
<div
style={{
width: 32,
height: 32,
borderRadius: 'var(--r-sm)',
background: 'var(--bg-inset)',
display: 'grid',
placeItems: 'center',
color: 'var(--ink-muted)',
}}
>
<Icon name={icon} size={16} />
</div>
}
/>
<div>
{entries.map(({ regimen, medication }, i) => (
<MedicationCard
key={`${regimen._id}-${medication.medicineId}-${i}`}
regimen={regimen}
medication={medication}
/>
))}
</div>
</Card>
);
}
function ScheduleContent({ householdId }: { householdId: string }) {
const [regimens, setRegimens] = useState<Regimen[]>([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState('');
useEffect(() => {
let cancelled = false;
async function load() {
try {
setLoading(true);
const allRegimens: Regimen[] = [];
let cursor: string | null = null;
do {
const res = await listRegimens(householdId, {
isActive: true,
limit: 100,
...(cursor ? { cursor } : {}),
});
allRegimens.push(...res.data);
cursor = res.pagination.cursor;
} while (cursor);
if (!cancelled) setRegimens(allRegimens);
} catch (err) {
if (!cancelled) setError(err instanceof Error ? err.message : 'Failed to load regimens');
} finally {
if (!cancelled) setLoading(false);
}
}
void load();
return () => {
cancelled = true;
};
}, [householdId]);
if (loading) return <PageSkeleton />;
if (error) {
return <div className="mt-alert mt-alert--danger mb-4">{error}</div>;
}
if (regimens.length === 0) {
return (
<Card>
<div
style={{
padding: '48px 24px',
textAlign: 'center',
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
gap: 12,
}}
>
<div
style={{
width: 48,
height: 48,
borderRadius: 'var(--r-md)',
background: 'var(--bg-inset)',
display: 'grid',
placeItems: 'center',
color: 'var(--ink-faint)',
}}
>
<Icon name="clock" size={24} />
</div>
<div style={{ fontSize: 15, color: 'var(--ink-muted)' }}>No active regimens found.</div>
<div style={{ fontSize: 13, color: 'var(--ink-faint)' }}>
<Link href="/medicines/regimens" className="mt-link">
Set up a regimen
</Link>{' '}
to start tracking your daily schedule.
</div>
</div>
</Card>
);
}
const groups = groupByTimeSlot(regimens);
const totalDoses = Object.values(groups).reduce((sum, g) => sum + g.length, 0);
return (
<>
<div style={{ marginBottom: 16, fontSize: 13, color: 'var(--ink-muted)' }}>
{regimens.length} active regimen{regimens.length !== 1 ? 's' : ''} &mdash; {totalDoses} dose
{totalDoses !== 1 ? 's' : ''} per day
</div>
{TIME_SLOTS.map(({ key, label, icon }) => (
<TimeSlotCard
key={key}
slotKey={key}
label={label}
icon={icon}
entries={groups[key] ?? []}
/>
))}
</>
);
}
export default function SchedulePage() {
const { householdId, isLoading: sessionLoading } = useApi();
if (sessionLoading) {
return (
<>
<SetPageHeader
title="Schedule & Log"
subtitle="Today and this week"
crumbs={['Medicines', 'Schedule']}
/>
<PageSkeleton />
</>
);
}
if (!householdId) {
return (
<>
<SetPageHeader
title="Schedule & Log"
subtitle="Today and this week"
crumbs={['Medicines', 'Schedule']}
/>
<NoHousehold />
</>
);
}
return (
<>
<SetPageHeader
title="Schedule & Log"
subtitle="Today and this week"
crumbs={['Medicines', 'Schedule']}
/>
<div style={{ padding: '28px 32px 56px', maxWidth: 900 }}>
<ScheduleContent householdId={householdId} />
</div>
</>
);
}

55
packages/web/src/app/(dashboard)/purchases/__tests__/page.test.tsx
View file

@ -1,6 +1,7 @@
import { describe, it, expect, vi, beforeEach } from 'vitest';
import { render, screen, waitFor, fireEvent } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import type React from 'react';
const { mockUseApi } = vi.hoisted(() => ({ mockUseApi: vi.fn() }));
@ -30,7 +31,9 @@ vi.mock('@/services/medicines', () => ({
listMedicines: mockListMedicines,
listMedicineProducts: mockListMedicineProducts,
}));
vi.mock('next/link', () => ({ default: (props: any) => props.children }));
vi.mock('next/link', () => ({
default: (props: { href?: string; children: React.ReactNode }) => props.children,
}));
import PurchasesPage from '../page';
@ -61,9 +64,7 @@ describe('PurchasesPage', () => {
mockListPurchases.mockResolvedValue(emptyResponse);
render(<PurchasesPage />);
await waitFor(() =>
expect(screen.getByText(/No purchases recorded yet/)).toBeInTheDocument(),
);
await waitFor(() => expect(screen.getByText(/No purchases recorded yet/)).toBeInTheDocument());
});
it('shows Record Purchase button', async () => {
@ -142,7 +143,15 @@ describe('PurchasesPage', () => {
mockUseApi.mockReturnValue({ householdId: 'hh1', isLoading: false });
mockListPurchases.mockResolvedValue(emptyResponse);
mockListStores.mockResolvedValue({
data: [{ _id: 'st-1', name: 'Walgreens', tags: [], isActive: true, createdAt: '2026-01-01T00:00:00.000Z' }],
data: [
{
_id: 'st-1',
name: 'Walgreens',
tags: [],
isActive: true,
createdAt: '2026-01-01T00:00:00.000Z',
},
],
pagination: { cursor: null, hasMore: false },
});
@ -162,7 +171,15 @@ describe('PurchasesPage', () => {
mockUseApi.mockReturnValue({ householdId: 'hh1', isLoading: false });
mockListPurchases.mockResolvedValue(emptyResponse);
mockListStores.mockResolvedValue({
data: [{ _id: 'st-1', name: 'Walgreens', tags: [], isActive: true, createdAt: '2026-01-01T00:00:00.000Z' }],
data: [
{
_id: 'st-1',
name: 'Walgreens',
tags: [],
isActive: true,
createdAt: '2026-01-01T00:00:00.000Z',
},
],
pagination: { cursor: null, hasMore: false },
});
@ -176,7 +193,9 @@ describe('PurchasesPage', () => {
fireEvent.submit(screen.getByRole('button', { name: 'Save Purchase' }).closest('form')!);
await waitFor(() =>
expect(screen.getByText('Add at least one item with a name and quantity.')).toBeInTheDocument(),
expect(
screen.getByText('Add at least one item with a name and quantity.'),
).toBeInTheDocument(),
);
});
@ -293,7 +312,15 @@ describe('PurchasesPage', () => {
mockListPurchases.mockResolvedValue(emptyResponse);
mockListMedicineProducts.mockResolvedValue(emptyResponse);
mockListStores.mockResolvedValue({
data: [{ _id: 'st-1', name: 'Walgreens', tags: [], isActive: true, createdAt: '2026-01-01T00:00:00.000Z' }],
data: [
{
_id: 'st-1',
name: 'Walgreens',
tags: [],
isActive: true,
createdAt: '2026-01-01T00:00:00.000Z',
},
],
pagination: { cursor: null, hasMore: false },
});
mockCreatePurchase.mockResolvedValue({
@ -314,7 +341,9 @@ describe('PurchasesPage', () => {
await waitFor(() => screen.getByText('Save Purchase'));
fireEvent.change(screen.getByDisplayValue('Select store'), { target: { value: 'st-1' } });
fireEvent.change(screen.getByPlaceholderText('Brand / product name'), { target: { value: 'Aspirin' } });
fireEvent.change(screen.getByPlaceholderText('Brand / product name'), {
target: { value: 'Aspirin' },
});
fireEvent.change(screen.getByPlaceholderText('90'), { target: { value: '30' } });
fireEvent.submit(screen.getByRole('button', { name: 'Save Purchase' }).closest('form')!);
@ -457,7 +486,9 @@ describe('PurchasesPage', () => {
await userEvent.click(screen.getByText('Record Purchase'));
await waitFor(() => screen.getByPlaceholderText('Brand / product name'));
fireEvent.change(screen.getByPlaceholderText('Brand / product name'), { target: { value: 'Aspirin' } });
fireEvent.change(screen.getByPlaceholderText('Brand / product name'), {
target: { value: 'Aspirin' },
});
fireEvent.change(screen.getByPlaceholderText('90'), { target: { value: '30' } });
fireEvent.change(screen.getByPlaceholderText('tablet'), { target: { value: 'capsule' } });
@ -472,9 +503,7 @@ describe('PurchasesPage', () => {
pagination: { cursor: null, hasMore: false },
});
mockListMedicineProducts.mockResolvedValue({
data: [
{ _id: 'prod-1', brand: 'Glucophage', packageSize: 60, packageUnit: 'tablet' },
],
data: [{ _id: 'prod-1', brand: 'Glucophage', packageSize: 60, packageUnit: 'tablet' }],
pagination: { cursor: null, hasMore: false },
});

209
packages/web/src/app/(dashboard)/purchases/page.tsx
View file

@ -3,6 +3,7 @@
import { useState, useEffect, useCallback } from 'react';
import Link from 'next/link';
import { useApi } from '@/lib/useApi';
import { SetPageHeader } from '@/components/layout/SetPageHeader';
import {
listPurchases,
createPurchase,
@ -12,10 +13,7 @@ import {
import { listStores } from '@/services/stores';
import { listMedicines, listMedicineProducts } from '@/services/medicines';
import type { z } from 'zod/v4';
import type {
PurchaseResponseSchema,
PurchaseListResponseSchema,
} from '@meshitrack/shared';
import type { PurchaseResponseSchema } from '@meshitrack/shared';
type PurchaseResponse = z.infer<typeof PurchaseResponseSchema>;
@ -75,13 +73,21 @@ function CreatePurchaseForm({
]);
useEffect(() => {
listMedicines(householdId, { limit: 100 }).then((r) => setMedicines(r.data)).catch(() => {});
listMedicines(householdId, { limit: 100 })
.then((r) => setMedicines(r.data))
.catch(() => {});
}, [householdId]);
async function handleMedicineChange(idx: number, medicineId: string) {
const updated = items.map((item, i) =>
i === idx
? { ...item, medicineId, medicineProductId: '', products: [], productsLoading: !!medicineId }
? {
...item,
medicineId,
medicineProductId: '',
products: [],
productsLoading: !!medicineId,
}
: item,
);
setItems(updated);
@ -90,7 +96,9 @@ function CreatePurchaseForm({
const result = await listMedicineProducts(householdId, medicineId, { limit: 50 });
setItems((prev) =>
prev.map((item, i) =>
i === idx ? { ...item, products: result.data as ProductOption[], productsLoading: false } : item,
i === idx
? { ...item, products: result.data as ProductOption[], productsLoading: false }
: item,
),
);
} catch {
@ -109,7 +117,11 @@ function CreatePurchaseForm({
...item,
medicineProductId: productId,
...(product
? { quantity: String(product.packageSize), unit: product.packageUnit, name: product.brand ?? item.name }
? {
quantity: String(product.packageSize),
unit: product.packageUnit,
name: product.brand ?? item.name,
}
: {}),
};
}),
@ -173,22 +185,18 @@ function CreatePurchaseForm({
}
return (
<div className="mb-6 rounded-xl border bg-white p-6 shadow-sm">
<div className="mt-card mb-6">
<h2 className="text-lg font-semibold mb-4">Record Purchase</h2>
{error && (
<div className="mb-4 rounded-lg bg-red-50 border border-red-200 p-3 text-sm text-red-700">
{error}
</div>
)}
{error && <div className="mt-alert mt-alert--danger mb-4">{error}</div>}
<form onSubmit={handleSubmit} className="space-y-5">
<div className="grid grid-cols-1 gap-4 md:grid-cols-2">
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">Store</label>
<label className="mt-field-label">Store</label>
<select
value={storeId}
onChange={(e) => setStoreId(e.target.value)}
required
className="w-full rounded-lg border px-3 py-2 text-sm focus:border-primary-500 focus:ring-1 focus:ring-primary-500 focus:outline-none"
className="mt-field"
>
<option value="">Select store</option>
{stores.map((s) => (
@ -200,7 +208,7 @@ function CreatePurchaseForm({
{stores.length === 0 && (
<p className="text-xs text-gray-400 mt-1">
No stores yet.{' '}
<Link href="/stores" className="text-primary-600 underline">
<Link href="/stores" className="mt-link">
Add a store first
</Link>
</p>
@ -213,7 +221,7 @@ function CreatePurchaseForm({
id="isOnline"
checked={isOnline}
onChange={(e) => setIsOnline(e.target.checked)}
className="h-4 w-4 rounded border-gray-300 text-primary-600 focus:ring-primary-500"
className="h-4 w-4 rounded border-gray-300"
/>
<label htmlFor="isOnline" className="text-sm font-medium text-gray-700">
Online order (pending arrival)
@ -222,26 +230,20 @@ function CreatePurchaseForm({
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
Notes (optional)
</label>
<label className="mt-field-label">Notes (optional)</label>
<input
type="text"
maxLength={1000}
value={notes}
onChange={(e) => setNotes(e.target.value)}
className="w-full rounded-lg border px-3 py-2 text-sm focus:border-primary-500 focus:ring-1 focus:ring-primary-500 focus:outline-none"
className="mt-field"
/>
</div>
<div>
<div className="flex items-center justify-between mb-2">
<h3 className="text-sm font-semibold text-gray-700">Items</h3>
<button
type="button"
onClick={addItem}
className="rounded-lg border px-3 py-1 text-xs font-medium hover:bg-gray-50 transition-colors"
>
<button type="button" onClick={addItem} className="mt-btn mt-btn--ghost">
Add item
</button>
</div>
@ -255,7 +257,7 @@ function CreatePurchaseForm({
<button
type="button"
onClick={() => removeItem(idx)}
className="text-xs text-red-500 hover:text-red-700"
className="mt-link text-xs"
>
Remove
</button>
@ -264,13 +266,11 @@ function CreatePurchaseForm({
<div className="grid grid-cols-1 gap-3 md:grid-cols-2">
<div>
<label className="block text-xs font-medium text-gray-600 mb-1">
Medicine (optional)
</label>
<label className="mt-field-label">Medicine (optional)</label>
<select
value={item.medicineId}
onChange={(e) => handleMedicineChange(idx, e.target.value)}
className="w-full rounded-lg border px-3 py-2 text-sm focus:border-primary-500 focus:ring-1 focus:ring-primary-500 focus:outline-none"
className="mt-field"
>
<option value="">Select medicine</option>
{medicines.map((m) => (
@ -282,9 +282,7 @@ function CreatePurchaseForm({
</div>
<div>
<label className="block text-xs font-medium text-gray-600 mb-1">
Product (optional)
</label>
<label className="mt-field-label">Product (optional)</label>
{item.productsLoading ? (
<div className="animate-pulse h-10 rounded-lg bg-gray-200" />
) : (
@ -292,7 +290,7 @@ function CreatePurchaseForm({
value={item.medicineProductId}
onChange={(e) => handleProductChange(idx, e.target.value)}
disabled={!item.medicineId}
className="w-full rounded-lg border px-3 py-2 text-sm focus:border-primary-500 focus:ring-1 focus:ring-primary-500 focus:outline-none disabled:bg-gray-50 disabled:text-gray-400"
className="mt-field"
>
<option value="">
{item.medicineId ? 'Select product' : 'Select medicine first'}
@ -309,9 +307,7 @@ function CreatePurchaseForm({
<div className="grid grid-cols-1 gap-3 md:grid-cols-4">
<div className="md:col-span-2">
<label className="block text-xs font-medium text-gray-600 mb-1">
Name
</label>
<label className="mt-field-label">Name</label>
<input
type="text"
required
@ -319,20 +315,16 @@ function CreatePurchaseForm({
value={item.name}
onChange={(e) =>
setItems((prev) =>
prev.map((it, i) =>
i === idx ? { ...it, name: e.target.value } : it,
),
prev.map((it, i) => (i === idx ? { ...it, name: e.target.value } : it)),
)
}
placeholder="Brand / product name"
className="w-full rounded-lg border px-3 py-2 text-sm focus:border-primary-500 focus:ring-1 focus:ring-primary-500 focus:outline-none"
className="mt-field"
/>
</div>
<div>
<label className="block text-xs font-medium text-gray-600 mb-1">
Package size
</label>
<label className="mt-field-label">Package size</label>
<input
type="number"
required
@ -347,36 +339,30 @@ function CreatePurchaseForm({
)
}
placeholder="90"
className="w-full rounded-lg border px-3 py-2 text-sm focus:border-primary-500 focus:ring-1 focus:ring-primary-500 focus:outline-none"
className="mt-field"
/>
</div>
<div>
<label className="block text-xs font-medium text-gray-600 mb-1">
Unit
</label>
<label className="mt-field-label">Unit</label>
<input
type="text"
required
value={item.unit}
onChange={(e) =>
setItems((prev) =>
prev.map((it, i) =>
i === idx ? { ...it, unit: e.target.value } : it,
),
prev.map((it, i) => (i === idx ? { ...it, unit: e.target.value } : it)),
)
}
placeholder="tablet"
className="w-full rounded-lg border px-3 py-2 text-sm focus:border-primary-500 focus:ring-1 focus:ring-primary-500 focus:outline-none"
className="mt-field"
/>
</div>
</div>
<div className="grid grid-cols-2 gap-3">
<div>
<label className="block text-xs font-medium text-gray-600 mb-1">
Price (optional)
</label>
<label className="mt-field-label">Price (optional)</label>
<input
type="number"
min={0.01}
@ -390,13 +376,11 @@ function CreatePurchaseForm({
)
}
placeholder="9.99"
className="w-full rounded-lg border px-3 py-2 text-sm focus:border-primary-500 focus:ring-1 focus:ring-primary-500 focus:outline-none"
className="mt-field"
/>
</div>
<div>
<label className="block text-xs font-medium text-gray-600 mb-1">
Currency
</label>
<label className="mt-field-label">Currency</label>
<input
type="text"
maxLength={10}
@ -409,7 +393,7 @@ function CreatePurchaseForm({
)
}
placeholder="USD"
className="w-full rounded-lg border px-3 py-2 text-sm focus:border-primary-500 focus:ring-1 focus:ring-primary-500 focus:outline-none"
className="mt-field"
/>
</div>
</div>
@ -419,18 +403,10 @@ function CreatePurchaseForm({
</div>
<div className="flex gap-3 pt-2">
<button
type="submit"
disabled={submitting}
className="rounded-lg bg-primary-600 px-4 py-2 text-sm font-medium text-white hover:bg-primary-700 disabled:opacity-50 transition-colors"
>
<button type="submit" disabled={submitting} className="mt-btn mt-btn--primary">
{submitting ? 'Saving...' : 'Save Purchase'}
</button>
<button
type="button"
onClick={onCancel}
className="rounded-lg border px-4 py-2 text-sm font-medium hover:bg-gray-50 transition-colors"
>
<button type="button" onClick={onCancel} className="mt-btn mt-btn--ghost">
Cancel
</button>
</div>
@ -453,19 +429,13 @@ function PurchaseCard({
const isOrdered = purchase.status === 'ordered';
return (
<div className="rounded-xl border bg-white p-5 shadow-sm">
<div className={`mt-card ${!isOrdered ? '' : ''}`}>
<div className="flex items-start justify-between gap-3">
<div>
<p className="font-semibold text-gray-900">{purchase.storeName}</p>
<p className="text-xs text-gray-400 mt-0.5">{formatDate(purchase.purchasedAt)}</p>
</div>
<span
className={`rounded-full px-2.5 py-0.5 text-xs font-medium ${
isOrdered
? 'bg-amber-100 text-amber-700'
: 'bg-green-100 text-green-700'
}`}
>
<span className={`mt-pill ${isOrdered ? 'mt-pill--warn' : 'mt-pill--ok'}`}>
{isOrdered ? 'Pending' : 'Received'}
</span>
</div>
@ -476,31 +446,24 @@ function PurchaseCard({
<span className="text-gray-700">{item.name}</span>
<span className="text-gray-500">
{item.quantity} {item.unit}
{item.actualPrice != null && ` — ${item.actualPrice.toFixed(2)} ${item.currency ?? ''}`}
{item.actualPrice != null &&
` — ${item.actualPrice.toFixed(2)} ${item.currency ?? ''}`}
</span>
</div>
))}
</div>
{purchase.notes && (
<p className="mt-2 text-xs text-gray-400 italic">{purchase.notes}</p>
)}
{purchase.notes && <p className="mt-2 text-xs text-gray-400 italic">{purchase.notes}</p>}
{(isOrdered || onDelete) && (
<div className="mt-4 flex gap-2">
{isOrdered && onReceive && (
<button
onClick={() => onReceive(purchase._id)}
className="rounded-lg bg-primary-600 px-3 py-1.5 text-xs font-medium text-white hover:bg-primary-700 transition-colors"
>
<button onClick={() => onReceive(purchase._id)} className="mt-btn mt-btn--primary">
Mark as received
</button>
)}
{isOrdered && onDelete && (
<button
onClick={() => onDelete(purchase._id)}
className="rounded-lg border px-3 py-1.5 text-xs font-medium text-gray-600 hover:bg-gray-50 transition-colors"
>
<button onClick={() => onDelete(purchase._id)} className="mt-btn mt-btn--ghost">
Cancel order
</button>
)}
@ -522,7 +485,9 @@ function PurchasesContent({ householdId }: { householdId: string }) {
const [hasMore, setHasMore] = useState(false);
useEffect(() => {
listStores(householdId, { limit: 100 }).then((r) => setStores(r.data)).catch(() => {});
listStores(householdId, { limit: 100 })
.then((r) => setStores(r.data))
.catch(() => {});
}, [householdId]);
const fetchPurchases = useCallback(
@ -534,9 +499,7 @@ function PurchasesContent({ householdId }: { householdId: string }) {
cursor: append ? (cursor ?? undefined) : undefined,
limit: 20,
});
setPurchases((prev) =>
append ? [...prev, ...result.data] : result.data,
);
setPurchases((prev) => (append ? [...prev, ...result.data] : result.data));
setCursor(result.pagination.cursor);
setHasMore(result.pagination.hasMore);
} catch (err) {
@ -582,10 +545,7 @@ function PurchasesContent({ householdId }: { householdId: string }) {
<div>
<div className="flex items-center justify-between mb-6">
<h1 className="text-2xl font-bold">Purchases</h1>
<button
onClick={() => setShowForm(!showForm)}
className="rounded-lg bg-primary-600 px-4 py-2 text-sm font-medium text-white hover:bg-primary-700 transition-colors"
>
<button onClick={() => setShowForm(!showForm)} className="mt-btn mt-btn--primary">
{showForm ? 'Cancel' : 'Record Purchase'}
</button>
</div>
@ -604,7 +564,7 @@ function PurchasesContent({ householdId }: { householdId: string }) {
)}
{error && (
<div className="mb-4 rounded-lg bg-red-50 border border-red-200 p-3 text-sm text-red-700">
<div className="mt-alert mt-alert--danger mb-4">
{error}
<button onClick={() => setError('')} className="ml-2 underline">
Dismiss
@ -648,7 +608,7 @@ function PurchasesContent({ householdId }: { householdId: string }) {
)}
{purchases.length === 0 && (
<div className="rounded-xl border bg-white p-10 text-center shadow-sm">
<div className="mt-card text-center">
<p className="text-sm text-gray-500">
No purchases recorded yet. Record your first purchase to get started.
</p>
@ -676,33 +636,54 @@ export default function PurchasesPage() {
if (sessionLoading) {
return (
<div>
<h1 className="text-2xl font-bold mb-4">Purchases</h1>
<div className="animate-pulse space-y-4">
<div className="h-10 w-48 rounded-lg bg-gray-200" />
<div className="h-28 rounded-xl bg-gray-200" />
<div className="h-28 rounded-xl bg-gray-200" />
<>
<SetPageHeader title="Purchases" subtitle="Order history and pending arrivals" />
<div style={{ padding: '28px 32px' }}>
<div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
{[1, 2, 3].map((i) => (
<div
key={i}
style={{ height: 64, borderRadius: 'var(--r-md)', background: 'var(--bg-inset)' }}
/>
))}
</div>
</div>
</>
);
}
if (!householdId) {
return (
<div>
<h1 className="text-2xl font-bold mb-4">Purchases</h1>
<div className="rounded-xl border bg-white p-6 shadow-sm">
<p className="text-gray-500">
<>
<SetPageHeader title="Purchases" subtitle="Order history and pending arrivals" />
<div style={{ padding: '28px 32px' }}>
<div
style={{
background: 'var(--bg-elev)',
border: '1px solid var(--border)',
borderRadius: 'var(--r-md)',
padding: 24,
}}
>
<p style={{ color: 'var(--ink-muted)', fontSize: 14 }}>
You need to{' '}
<Link href="/settings" className="text-primary-600 underline">
<Link href="/settings" style={{ color: 'var(--brand)', textDecoration: 'underline' }}>
create or join a household
</Link>{' '}
before recording purchases.
</p>
</div>
</div>
</>
);
}
return <PurchasesContent householdId={householdId} />;
return (
<>
<SetPageHeader title="Purchases" subtitle="Order history and pending arrivals" />
<div className="mt-page">
<PurchasesContent householdId={householdId} />
</div>
</>
);
}

44
packages/web/src/app/(dashboard)/refills/__tests__/page.test.tsx
View file

@ -1,6 +1,7 @@
import { describe, it, expect, vi, beforeEach } from 'vitest';
import { render, screen, waitFor, fireEvent } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import type React from 'react';
const { mockUseApi } = vi.hoisted(() => ({ mockUseApi: vi.fn() }));
@ -29,7 +30,9 @@ vi.mock('@/services/refills', () => ({
updateRefillListItem: mockUpdateRefillListItem,
addToCabinet: mockAddToCabinet,
}));
vi.mock('next/link', () => ({ default: (props: any) => props.children }));
vi.mock('next/link', () => ({
default: (props: { href?: string; children: React.ReactNode }) => props.children,
}));
import RefillsPage from '../page';
@ -65,17 +68,13 @@ describe('RefillsPage', () => {
it('shows empty state for alerts', async () => {
mockUseApi.mockReturnValue({ householdId: 'hh1', isLoading: false });
render(<RefillsPage />);
await waitFor(() =>
expect(screen.getByText(/No medicines running low/)).toBeInTheDocument(),
);
await waitFor(() => expect(screen.getByText(/No medicines running low/)).toBeInTheDocument());
});
it('shows empty state for refill lists', async () => {
mockUseApi.mockReturnValue({ householdId: 'hh1', isLoading: false });
render(<RefillsPage />);
await waitFor(() =>
expect(screen.getByText(/No refill lists yet/)).toBeInTheDocument(),
);
await waitFor(() => expect(screen.getByText(/No refill lists yet/)).toBeInTheDocument());
});
it('shows error when alerts fail', async () => {
@ -116,7 +115,10 @@ describe('RefillsPage', () => {
fireEvent.submit(screen.getByPlaceholderText('List name').closest('form')!);
await waitFor(() =>
expect(mockCreateRefillList).toHaveBeenCalledWith('hh1', expect.objectContaining({ name: 'Test List' })),
expect(mockCreateRefillList).toHaveBeenCalledWith(
'hh1',
expect.objectContaining({ name: 'Test List' }),
),
);
});
@ -274,7 +276,9 @@ describe('RefillsPage', () => {
fireEvent.change(screen.getByPlaceholderText('List name, e.g. Weekly refills'), {
target: { value: 'Auto Refills' },
});
fireEvent.submit(screen.getByPlaceholderText('List name, e.g. Weekly refills').closest('form')!);
fireEvent.submit(
screen.getByPlaceholderText('List name, e.g. Weekly refills').closest('form')!,
);
await waitFor(() =>
expect(mockCreateRefillList).toHaveBeenCalledWith(
@ -293,7 +297,11 @@ describe('RefillsPage', () => {
await userEvent.click(screen.getByText('New List'));
await waitFor(() => screen.getByPlaceholderText('List name'));
await userEvent.click(screen.getAllByRole('button', { name: 'Cancel' })[screen.getAllByRole('button', { name: 'Cancel' }).length - 1]!);
await userEvent.click(
screen.getAllByRole('button', { name: 'Cancel' })[
screen.getAllByRole('button', { name: 'Cancel' }).length - 1
]!,
);
expect(screen.queryByPlaceholderText('List name')).not.toBeInTheDocument();
});
@ -382,7 +390,9 @@ describe('RefillsPage', () => {
fireEvent.change(screen.getByPlaceholderText('List name, e.g. Weekly refills'), {
target: { value: 'Auto Refills' },
});
fireEvent.submit(screen.getByPlaceholderText('List name, e.g. Weekly refills').closest('form')!);
fireEvent.submit(
screen.getByPlaceholderText('List name, e.g. Weekly refills').closest('form')!,
);
await waitFor(() => expect(screen.getByText('Generate failed')).toBeInTheDocument());
});
@ -451,7 +461,9 @@ describe('RefillsPage', () => {
await waitFor(() => screen.getByText('Aspirin'));
await userEvent.click(screen.getByRole('checkbox'));
expect(mockUpdateRefillListItem).toHaveBeenCalledWith('hh1', 'rl-1', 'item-1', { checked: true });
expect(mockUpdateRefillListItem).toHaveBeenCalledWith('hh1', 'rl-1', 'item-1', {
checked: true,
});
});
it('marks a shopping list as complete', async () => {
@ -623,9 +635,7 @@ describe('RefillsPage', () => {
await waitFor(() => screen.getByText('Aspirin'));
await userEvent.click(screen.getAllByRole('checkbox')[0]!);
await waitFor(() =>
expect(screen.getByText('Failed to update item')).toBeInTheDocument(),
);
await waitFor(() => expect(screen.getByText('Failed to update item')).toBeInTheDocument());
});
it('shows fallback error when non-Error thrown on update status', async () => {
@ -653,9 +663,7 @@ describe('RefillsPage', () => {
await waitFor(() => screen.getByText('Start shopping'));
await userEvent.click(screen.getByText('Start shopping'));
await waitFor(() =>
expect(screen.getByText('Failed to update status')).toBeInTheDocument(),
);
await waitFor(() => expect(screen.getByText('Failed to update status')).toBeInTheDocument());
});
it('shows refill alert when present', async () => {

228
packages/web/src/app/(dashboard)/refills/page.tsx
View file

@ -3,6 +3,7 @@
import { useState, useEffect, useCallback } from 'react';
import Link from 'next/link';
import { useApi } from '@/lib/useApi';
import { SetPageHeader } from '@/components/layout/SetPageHeader';
import {
getRefillAlerts,
listRefillLists,
@ -26,11 +27,11 @@ const STATUS_LABELS: Record<string, string> = {
archived: 'Archived',
};
const STATUS_COLORS: Record<string, string> = {
active: 'bg-green-100 text-green-700',
shopping: 'bg-blue-100 text-blue-700',
completed: 'bg-gray-100 text-gray-600',
archived: 'bg-gray-100 text-gray-400',
const STATUS_PILL: Record<string, string> = {
active: 'mt-pill--ok',
shopping: 'mt-pill--info',
completed: 'mt-pill--ghost',
archived: 'mt-pill--ghost',
};
function formatDate(dateStr: string): string {
@ -93,7 +94,7 @@ function AlertsPanel({
}
return (
<div className="rounded-xl border bg-white p-6 shadow-sm">
<div className="mt-card">
<div className="flex items-center justify-between mb-4 flex-wrap gap-3">
<h2 className="text-lg font-semibold">Refill Alerts</h2>
<div className="flex items-center gap-3">
@ -102,7 +103,8 @@ function AlertsPanel({
<select
value={thresholdDays}
onChange={(e) => setThresholdDays(Number(e.target.value))}
className="rounded-lg border px-2 py-1 text-sm focus:border-primary-500 focus:ring-1 focus:ring-primary-500 focus:outline-none"
className="mt-field"
style={{ width: 'auto' }}
>
{[3, 5, 7, 10, 14, 30].map((d) => (
<option key={d} value={d}>
@ -114,7 +116,7 @@ function AlertsPanel({
{alerts.length > 0 && (
<button
onClick={() => setShowGenerateForm(!showGenerateForm)}
className="rounded-lg bg-primary-600 px-3 py-1.5 text-sm font-medium text-white hover:bg-primary-700 transition-colors"
className="mt-btn mt-btn--primary"
>
Generate Refill List
</button>
@ -131,19 +133,15 @@ function AlertsPanel({
value={listName}
onChange={(e) => setListName(e.target.value)}
placeholder="List name, e.g. Weekly refills"
className="flex-1 rounded-lg border px-3 py-2 text-sm focus:border-primary-500 focus:ring-1 focus:ring-primary-500 focus:outline-none"
className="mt-field"
/>
<button
type="submit"
disabled={generating}
className="rounded-lg bg-primary-600 px-4 py-2 text-sm font-medium text-white hover:bg-primary-700 disabled:opacity-50 transition-colors"
>
<button type="submit" disabled={generating} className="mt-btn mt-btn--primary">
{generating ? 'Creating...' : 'Create'}
</button>
<button
type="button"
onClick={() => setShowGenerateForm(false)}
className="rounded-lg border px-3 py-2 text-sm font-medium hover:bg-gray-50 transition-colors"
className="mt-btn mt-btn--ghost"
>
Cancel
</button>
@ -151,7 +149,7 @@ function AlertsPanel({
)}
{error && (
<div className="mb-4 rounded-lg bg-red-50 border border-red-200 p-3 text-sm text-red-700">
<div className="mt-alert mt-alert--danger mb-4">
{error}
<button onClick={() => setError('')} className="ml-2 underline">
Dismiss
@ -169,9 +167,7 @@ function AlertsPanel({
<div className="py-6 text-center text-sm text-gray-500">
No medicines running low within {thresholdDays} days.
{thresholdDays < 30 && (
<span className="block mt-1 text-xs">
Try increasing the threshold to see more.
</span>
<span className="block mt-1 text-xs">Try increasing the threshold to see more.</span>
)}
</div>
) : (
@ -185,10 +181,7 @@ function AlertsPanel({
: 'text-yellow-600';
return (
<div
key={alert.medicineId}
className="rounded-lg border bg-gray-50 p-4"
>
<div key={alert.medicineId} className="rounded-lg border bg-gray-50 p-4">
<div className="flex items-start justify-between gap-4 flex-wrap">
<div>
<h3 className="font-semibold text-gray-900">
@ -201,17 +194,14 @@ function AlertsPanel({
<span className={daysColor}>
{alert.daysUntilEmpty} day{alert.daysUntilEmpty !== 1 ? 's' : ''} left
</span>
<span className="text-gray-500">
{alert.currentStock} in cabinet
</span>
<span className="text-gray-500">
{alert.dailyConsumption.toFixed(2)}/day
</span>
<span className="text-gray-500">{alert.currentStock} in cabinet</span>
<span className="text-gray-500">{alert.dailyConsumption.toFixed(2)}/day</span>
</div>
</div>
<div className="text-right text-sm">
<p className="text-gray-600">
Suggested: <span className="font-medium">{alert.suggestedQuantity} units</span>
Suggested:{' '}
<span className="font-medium">{alert.suggestedQuantity} units</span>
</p>
{alert.cheapestOption && (
<p className="text-green-700 font-medium">
@ -260,9 +250,7 @@ function RefillListDetail({
const updated = await updateRefillListItem(householdId, list._id, item._id, {
checked: !item.checked,
actualPrice:
!item.checked && actualPrices[item._id]
? Number(actualPrices[item._id])
: undefined,
!item.checked && actualPrices[item._id] ? Number(actualPrices[item._id]) : undefined,
});
setItems(updated.items);
} catch (err) {
@ -287,7 +275,10 @@ function RefillListDetail({
setError('No checked items to add to cabinet.');
return;
}
if (!confirm(`Add ${checkedCount} checked item${checkedCount !== 1 ? 's' : ''} to your cabinet?`)) return;
if (
!confirm(`Add ${checkedCount} checked item${checkedCount !== 1 ? 's' : ''} to your cabinet?`)
)
return;
setAdding(true);
setError('');
try {
@ -295,7 +286,9 @@ function RefillListDetail({
onUpdated();
setAdding(false);
if (result.addedCount > 0) {
alert(`Added ${result.addedCount} item${result.addedCount !== 1 ? 's' : ''} to your cabinet.`);
alert(
`Added ${result.addedCount} item${result.addedCount !== 1 ? 's' : ''} to your cabinet.`,
);
}
} catch (err) {
setError(err instanceof Error ? err.message : 'Failed to add to cabinet');
@ -307,12 +300,12 @@ function RefillListDetail({
const totalChecked = items.filter((i) => i.checked).length;
return (
<div className="rounded-xl border bg-white p-6 shadow-sm">
<div className="mt-card">
<div className="flex items-start justify-between gap-4 mb-4">
<div>
<h2 className="text-lg font-semibold text-gray-900">{list.name}</h2>
<div className="flex items-center gap-2 mt-1">
<span className={`rounded-full px-2.5 py-0.5 text-xs font-medium ${STATUS_COLORS[list.status] ?? STATUS_COLORS['active']}`}>
<span className={`mt-pill ${STATUS_PILL[list.status] ?? STATUS_PILL['active']}`}>
{STATUS_LABELS[list.status] ?? list.status}
</span>
<span className="text-xs text-gray-400">
@ -325,21 +318,24 @@ function RefillListDetail({
)}
</div>
</div>
<button
onClick={onClose}
className="rounded p-1 text-gray-400 hover:text-gray-600 transition-colors"
title="Close"
>
<button onClick={onClose} className="mt-btn mt-btn--icon" title="Close">
<svg className="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M6 18L18 6M6 6l12 12"
/>
</svg>
</button>
</div>
{error && (
<div className="mb-4 rounded-lg bg-red-50 border border-red-200 p-3 text-sm text-red-700">
<div className="mt-alert mt-alert--danger mb-4">
{error}
<button onClick={() => setError('')} className="ml-2 underline">Dismiss</button>
<button onClick={() => setError('')} className="ml-2 underline">
Dismiss
</button>
</div>
)}
@ -357,24 +353,24 @@ function RefillListDetail({
checked={item.checked}
onChange={() => handleToggleItem(item)}
disabled={item.addedToCabinet}
className="mt-0.5 h-4 w-4 rounded border-gray-300 text-primary-600 focus:ring-primary-500"
className="h-4 w-4 rounded border-gray-300"
/>
<div className="flex-1 min-w-0">
<div className="flex items-center gap-2 flex-wrap">
<span className={`text-sm font-medium ${item.checked ? 'line-through text-gray-400' : 'text-gray-900'}`}>
<span
className={`text-sm font-medium ${item.checked ? 'line-through text-gray-400' : 'text-gray-900'}`}
>
{item.medicineName}
</span>
<span className="text-xs text-gray-500">
{item.quantity} {item.unit}
</span>
{item.estimatedPrice != null && (
<span className="text-xs text-gray-400">est. {item.estimatedPrice.toFixed(2)}</span>
)}
{item.addedToCabinet && (
<span className="rounded-full bg-green-100 text-green-700 px-2 py-0.5 text-xs">
in cabinet
<span className="text-xs text-gray-400">
est. {item.estimatedPrice.toFixed(2)}
</span>
)}
{item.addedToCabinet && <span className="mt-pill mt-pill--ok">in cabinet</span>}
</div>
{item.notes && <p className="text-xs text-gray-400 mt-0.5">{item.notes}</p>}
</div>
@ -389,7 +385,8 @@ function RefillListDetail({
setActualPrices((prev) => ({ ...prev, [item._id]: e.target.value }))
}
placeholder="Actual price"
className="w-28 rounded-lg border px-2 py-1 text-xs focus:border-primary-500 focus:ring-1 focus:ring-primary-500 focus:outline-none"
className="mt-field"
style={{ width: '7rem', fontSize: '0.75rem' }}
/>
</div>
)}
@ -400,18 +397,14 @@ function RefillListDetail({
<div className="flex flex-wrap items-center gap-3 border-t pt-4">
{checkedNotAdded > 0 && (
<button
onClick={handleAddToCabinet}
disabled={adding}
className="rounded-lg bg-primary-600 px-4 py-2 text-sm font-medium text-white hover:bg-primary-700 disabled:opacity-50 transition-colors"
>
<button onClick={handleAddToCabinet} disabled={adding} className="mt-btn mt-btn--primary">
{adding ? 'Adding...' : `Add ${checkedNotAdded} to Cabinet`}
</button>
)}
{list.status === RefillListStatus.ACTIVE && (
<button
onClick={() => handleUpdateStatus(RefillListStatus.SHOPPING)}
className="rounded-lg border px-3 py-2 text-sm font-medium hover:bg-gray-50 transition-colors"
className="mt-btn mt-btn--ghost"
>
Start shopping
</button>
@ -419,16 +412,15 @@ function RefillListDetail({
{list.status === RefillListStatus.SHOPPING && (
<button
onClick={() => handleUpdateStatus(RefillListStatus.COMPLETED)}
className="rounded-lg border px-3 py-2 text-sm font-medium hover:bg-gray-50 transition-colors"
className="mt-btn mt-btn--ghost"
>
Mark complete
</button>
)}
{(list.status === RefillListStatus.ACTIVE ||
list.status === RefillListStatus.SHOPPING) && (
{(list.status === RefillListStatus.ACTIVE || list.status === RefillListStatus.SHOPPING) && (
<button
onClick={() => handleUpdateStatus(RefillListStatus.ARCHIVED)}
className="rounded-lg border px-3 py-2 text-sm text-gray-500 hover:bg-gray-50 transition-colors"
className="mt-btn mt-btn--ghost"
>
Archive
</button>
@ -458,7 +450,11 @@ function CreateListForm({
setError('');
setSubmitting(true);
try {
await createRefillList(householdId, { name: name.trim(), fromAlerts: false, thresholdDays: 7 });
await createRefillList(householdId, {
name: name.trim(),
fromAlerts: false,
thresholdDays: 7,
});
onCreated();
} catch (err) {
setError(err instanceof Error ? err.message : 'Failed to create list');
@ -468,13 +464,9 @@ function CreateListForm({
}
return (
<div className="mb-4 rounded-xl border bg-white p-6 shadow-sm">
<div className="mt-card mb-4">
<h3 className="text-base font-semibold mb-3">New Refill List</h3>
{error && (
<div className="mb-3 rounded-lg bg-red-50 border border-red-200 p-3 text-sm text-red-700">
{error}
</div>
)}
{error && <div className="mt-alert mt-alert--danger mb-3">{error}</div>}
<form onSubmit={handleSubmit} className="flex items-center gap-3">
<input
type="text"
@ -483,20 +475,12 @@ function CreateListForm({
value={name}
onChange={(e) => setName(e.target.value)}
placeholder="List name"
className="flex-1 rounded-lg border px-3 py-2 text-sm focus:border-primary-500 focus:ring-1 focus:ring-primary-500 focus:outline-none"
className="mt-field"
/>
<button
type="submit"
disabled={submitting}
className="rounded-lg bg-primary-600 px-4 py-2 text-sm font-medium text-white hover:bg-primary-700 disabled:opacity-50 transition-colors"
>
<button type="submit" disabled={submitting} className="mt-btn mt-btn--primary">
{submitting ? 'Creating...' : 'Create'}
</button>
<button
type="button"
onClick={onCancel}
className="rounded-lg border px-3 py-2 text-sm font-medium hover:bg-gray-50 transition-colors"
>
<button type="button" onClick={onCancel} className="mt-btn mt-btn--ghost">
Cancel
</button>
</form>
@ -546,7 +530,8 @@ function RefillListsPanel({ householdId }: { householdId: string }) {
<select
value={filterStatus}
onChange={(e) => setFilterStatus(e.target.value)}
className="rounded-lg border px-3 py-2 text-sm focus:border-primary-500 focus:ring-1 focus:ring-primary-500 focus:outline-none"
className="mt-field"
style={{ width: 'auto' }}
>
<option value="">All statuses</option>
{Object.values(RefillListStatus).map((s) => (
@ -555,10 +540,7 @@ function RefillListsPanel({ householdId }: { householdId: string }) {
</option>
))}
</select>
<button
onClick={() => setShowForm(!showForm)}
className="rounded-lg bg-primary-600 px-3 py-2 text-sm font-medium text-white hover:bg-primary-700 transition-colors"
>
<button onClick={() => setShowForm(!showForm)} className="mt-btn mt-btn--primary">
{showForm ? 'Cancel' : 'New List'}
</button>
</div>
@ -591,9 +573,11 @@ function RefillListsPanel({ householdId }: { householdId: string }) {
)}
{error && (
<div className="mb-4 rounded-lg bg-red-50 border border-red-200 p-3 text-sm text-red-700">
<div className="mt-alert mt-alert--danger mb-4">
{error}
<button onClick={() => setError('')} className="ml-2 underline">Dismiss</button>
<button onClick={() => setError('')} className="ml-2 underline">
Dismiss
</button>
</div>
)}
@ -604,8 +588,10 @@ function RefillListsPanel({ householdId }: { householdId: string }) {
))}
</div>
) : lists.length === 0 ? (
<div className="rounded-xl border bg-white p-6 shadow-sm text-center text-sm text-gray-500">
{filterStatus ? `No ${STATUS_LABELS[filterStatus] ?? filterStatus} lists.` : 'No refill lists yet. Create one above or generate from alerts.'}
<div className="mt-card text-center" style={{ color: 'var(--ink-muted)' }}>
{filterStatus
? `No ${STATUS_LABELS[filterStatus] ?? filterStatus} lists.`
: 'No refill lists yet. Create one above or generate from alerts.'}
</div>
) : (
<div className="space-y-2">
@ -617,18 +603,16 @@ function RefillListsPanel({ householdId }: { householdId: string }) {
<button
key={list._id}
onClick={() => handleSelectList(list)}
className={`w-full rounded-xl border p-4 text-left transition-colors ${
isSelected
? 'bg-primary-50 border-primary-300'
: 'bg-white hover:bg-gray-50'
} shadow-sm`}
className={`w-full mt-card text-left transition-colors ${
isSelected ? 'outline outline-2 outline-[var(--brand)]' : ''
}`}
>
<div className="flex items-center justify-between gap-4">
<div className="flex-1 min-w-0">
<div className="flex items-center gap-2 flex-wrap mb-1">
<span className="font-medium text-gray-900 truncate">{list.name}</span>
<span
className={`rounded-full px-2.5 py-0.5 text-xs font-medium ${STATUS_COLORS[list.status] ?? STATUS_COLORS['active']}`}
className={`mt-pill ${STATUS_PILL[list.status] ?? STATUS_PILL['active']}`}
>
{STATUS_LABELS[list.status] ?? list.status}
</span>
@ -658,13 +642,9 @@ function RefillsContent({ householdId }: { householdId: string }) {
return (
<div>
<h1 className="text-2xl font-bold mb-6">Refills</h1>
<div className="space-y-6">
<AlertsPanel
householdId={householdId}
onGenerateList={() => setListsKey((k) => k + 1)}
/>
<div className="rounded-xl border bg-white p-6 shadow-sm">
<AlertsPanel householdId={householdId} onGenerateList={() => setListsKey((k) => k + 1)} />
<div className="mt-card">
<RefillListsPanel key={listsKey} householdId={householdId} />
</div>
</div>
@ -677,32 +657,54 @@ export default function RefillsPage() {
if (sessionLoading) {
return (
<div>
<h1 className="text-2xl font-bold mb-4">Refills</h1>
<div className="animate-pulse space-y-4">
<div className="h-40 rounded-xl bg-gray-200" />
<div className="h-60 rounded-xl bg-gray-200" />
<>
<SetPageHeader title="Refills" subtitle="Running-low alerts and shopping lists" />
<div style={{ padding: '28px 32px' }}>
<div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
{[1, 2].map((i) => (
<div
key={i}
style={{ height: 96, borderRadius: 'var(--r-md)', background: 'var(--bg-inset)' }}
/>
))}
</div>
</div>
</>
);
}
if (!householdId) {
return (
<div>
<h1 className="text-2xl font-bold mb-4">Refills</h1>
<div className="rounded-xl border bg-white p-6 shadow-sm">
<p className="text-gray-500">
<>
<SetPageHeader title="Refills" subtitle="Running-low alerts and shopping lists" />
<div style={{ padding: '28px 32px' }}>
<div
style={{
background: 'var(--bg-elev)',
border: '1px solid var(--border)',
borderRadius: 'var(--r-md)',
padding: 24,
}}
>
<p style={{ color: 'var(--ink-muted)', fontSize: 14 }}>
You need to{' '}
<Link href="/settings" className="text-primary-600 underline">
<Link href="/settings" style={{ color: 'var(--brand)', textDecoration: 'underline' }}>
create or join a household
</Link>{' '}
before managing refills.
</p>
</div>
</div>
</>
);
}
return <RefillsContent householdId={householdId} />;
return (
<>
<SetPageHeader title="Refills" subtitle="Running-low alerts and shopping lists" />
<div className="mt-page">
<RefillsContent householdId={householdId} />
</div>
</>
);
}

17
packages/web/src/app/(dashboard)/settings/__tests__/page.test.tsx
View file

@ -6,8 +6,13 @@ const { mockUseApi } = vi.hoisted(() => ({
mockUseApi: vi.fn(),
}));
const { mockCreateHousehold, mockJoinHousehold, mockGetHousehold, mockUpdateHousehold, mockGenerateInviteCode } =
vi.hoisted(() => ({
const {
mockCreateHousehold,
mockJoinHousehold,
mockGetHousehold,
mockUpdateHousehold,
mockGenerateInviteCode,
} = vi.hoisted(() => ({
mockCreateHousehold: vi.fn(),
mockJoinHousehold: vi.fn(),
mockGetHousehold: vi.fn(),
@ -137,7 +142,9 @@ describe('SettingsPage', () => {
await userEvent.type(input, 'Updated Home');
await userEvent.click(screen.getByRole('button', { name: 'Save' }));
await waitFor(() => expect(mockUpdateHousehold).toHaveBeenCalledWith('hh1', { name: 'Updated Home' }));
await waitFor(() =>
expect(mockUpdateHousehold).toHaveBeenCalledWith('hh1', { name: 'Updated Home' }),
);
});
it('shows error when name update fails', async () => {
@ -252,7 +259,9 @@ describe('SettingsPage', () => {
await waitFor(() => screen.getByText('My House'));
await userEvent.click(screen.getByRole('button', { name: 'Regenerate' }));
await waitFor(() => expect(screen.getByText('Failed to regenerate invite code')).toBeInTheDocument());
await waitFor(() =>
expect(screen.getByText('Failed to regenerate invite code')).toBeInTheDocument(),
);
});
it('shows validation error when saving empty name', async () => {

Some files were not shown because too many files have changed in this diff Show more