# Code Review Checklist — PulseFabric Monitor

Use this checklist after any AI-generated or human code change. Every item must pass before merging.

---

## Implementation Order

- [ ] Data added to `backend/db.json` **before** any frontend code
- [ ] DTO interface added/updated in `core/models/api.models.ts`
- [ ] Service method added in `core/services/dashboard-api.service.ts`
- [ ] UI component consumes data through the service (never directly)

## TypeScript

- [ ] No `any` type — parameters, return types, variables, generics, assertions
- [ ] All data structures have typed interfaces
- [ ] No `console.log`, `console.warn`, or `console.error`
- [ ] No commented-out code blocks
- [ ] Every import is used — no orphan imports
- [ ] One component/service/model group per file
- [ ] Signals used for reactive state (`signal()`, `input()`, `computed()`)
- [ ] `inject()` used instead of constructor injection

## HTML Templates

- [ ] Flat structure — no unnecessary `<div>` wrappers
- [ ] No hardcoded data in templates
- [ ] No logic beyond simple bindings and control flow (`@if`, `@for`)
- [ ] Material components used where appropriate (`mat-card`, `mat-icon`, etc.)

## SCSS Styles

- [ ] All colors use tokens: `--mat-sys-*`, `--pf-*`, or SCSS variables
- [ ] No raw hex values (e.g., `#ff0000`)
- [ ] No raw px/rem values — use spacing tokens (`--pf-spacing-*`)
- [ ] Nesting depth ≤ 3 levels
- [ ] `:host { display: block; }` present on components

## File Organization

- [ ] TS, HTML, SCSS in separate files (no inline templates/styles)
- [ ] Files use `kebab-case` naming
- [ ] Classes use `PascalCase`, variables use `camelCase`
- [ ] Standalone component (no NgModule)

## Component Design

- [ ] Input-driven — data passed via `input()` signals
- [ ] No data fetching inside the component
- [ ] Reuses existing components where possible (KpiCard, ChartWidget, AlertList)
- [ ] Adding a new instance requires only different inputs, not a new file

## Material 3 Compliance

- [ ] Uses Material 3 components from `@angular/material`
- [ ] Follows M3 spacing and typography guidelines
- [ ] Uses system variables for theming (`--mat-sys-*`)
- [ ] Card components use `appearance="outlined"`

## Validation

- [ ] `ng build` passes with zero errors
- [ ] No new budget warnings (echarts warning is pre-existing and acceptable)
- [ ] App loads correctly in browser at `http://localhost:4200`
- [ ] New feature is visible and functional

## Constants & Configuration

- [ ] No magic numbers — all values in named constants or enums
- [ ] Chart colors use `PALETTE` from `chart-config.factory.ts`
- [ ] API base URL comes from `environment.ts` (not hardcoded)