Chemical Details Page - Implementation Plan

Overview

A comprehensive detail view for individual chemical inventory items in the ChemIQ module, displaying product information, SDS data, hazard information, label printing capabilities, and enabling key inventory management actions.

Route: /chemiq/inventory/:chemical_id

Feature Sections

Section 1: Header & Overview Card

Purpose: Quick identification and primary actions

Element	Description
Product Name	Large, prominent display
Manufacturer	Secondary text
Status Badges	SDS status (Missing/Attached/Expiring), Verification status
Quick Actions	Edit, Delete, Print Label dropdown, Download SDS
Breadcrumb	Inventory → [Product Name]
Back Button	Return to inventory list

Visual Layout:

┌─────────────────────────────────────────────────────────────────┐
│ ← Back to Inventory                                             │
│                                                                 │
│ 🧪 Acetone - Industrial Grade                    [Edit] [Delete]│
│    Acme Chemical Co.                                            │
│                                                                 │
│ [SDS Attached ✓]  [Verified]           [🖨️ Print ▼] [⬇️ SDS]   │
└─────────────────────────────────────────────────────────────────┘

Section 2: Product Information Card

Purpose: Display product identification details

Field	Source	Description
Barcode/UPC	company_product_catalog	Scannable identifier
Product Code	company_product_catalog	Manufacturer/internal code
CAS Number	company_product_catalog	Chemical Abstract Service number
Product Category	company_product_catalog	Primary classification
Product Type	company_product_catalog	Sub-classification
Data Source	company_product_catalog	How product was added (user_contributed, label_extracted, api_validated)
Confidence Score	company_product_catalog	Data quality indicator (0.0-1.0) - visual progress bar
Verification Status	company_product_catalog	unverified, verified, needs_review, flagged

Visual Layout:

┌─────────────────────────────────────────────────────────────────┐
│ 📦 Product Information                                          │
├─────────────────────────────────────────────────────────────────┤
│ Barcode/UPC      │ 012345678901                                 │
│ Product Code     │ ACE-IND-001                                  │
│ CAS Number       │ 67-64-1                                      │
│ Category         │ Solvents                                     │
│ Type             │ Ketone                                       │
│ Data Source      │ 📷 Label Extracted                           │
│ Confidence       │ ████████░░ 85%                               │
│ Verification     │ ✓ Verified                                   │
└─────────────────────────────────────────────────────────────────┘

Section 3: Inventory Details Card

Purpose: Display current inventory status and location

Field	Source	Description
Site	chemiq_inventory + sites	Current site location
Location	chemiq_inventory + locations	Specific storage location within site
Quantity	chemiq_inventory	Number of containers
Container Size	chemiq_inventory	Size value
Size Unit	chemiq_inventory	Unit (L, gal, kg, lb, mL, oz, etc.)
Total Volume	Calculated	quantity × container_size
Date Added	chemiq_inventory.created_at	When first added to inventory
Last Updated	chemiq_inventory.updated_at	Most recent change
Added By	users table	User who added the item

Visual Layout:

┌─────────────────────────────────────────────────────────────────┐
│ 📍 Inventory Details                              [Update Qty]  │
├─────────────────────────────────────────────────────────────────┤
│ Site             │ 📍 Main Warehouse - Chicago                  │
│ Location         │ Building A, Shelf 12                         │
│ Quantity         │ 5 containers                                 │
│ Container Size   │ 1 gallon each                                │
│ Total Volume     │ 5 gallons                                    │
│ ─────────────────┼───────────────────────────────────────────── │
│ Date Added       │ Dec 15, 2024                                 │
│ Last Updated     │ Dec 18, 2024                                 │
│ Added By         │ John Smith                                   │
└─────────────────────────────────────────────────────────────────┘

Section 4: SDS Information Card

Purpose: Display Safety Data Sheet status and key hazard information

When SDS is Attached:

Field	Source	Description
Document Info	sds_documents	Revision date, file size
Download Button	S3 presigned URL	Download PDF
View Button	S3 presigned URL	Open in new tab
Signal Word	sds_hazard_info	DANGER (red) or WARNING (orange)
GHS Pictograms	sds_hazard_info.pictograms	Visual icons (9 possible symbols)
Hazard Statements	sds_hazard_info.hazard_statements	H-codes with descriptions
Precautionary Statements	sds_hazard_info.precautionary_statements	P-codes with descriptions

When SDS is Missing:

Warning message with yellow background
"Search for SDS" button - triggers SDS search modal
"Upload SDS" button - triggers file upload

Visual Layout (SDS Attached):

┌─────────────────────────────────────────────────────────────────┐
│ 📄 Safety Data Sheet                      [⬇️ Download] [👁️ View]│
├─────────────────────────────────────────────────────────────────┤
│ Revision Date: March 15, 2024  │  File: 2.3 MB PDF             │
│                                                                 │
│ ┌─────────────────────────────────────────────────────────────┐ │
│ │  ⚠️ DANGER                                                  │ │
│ │                                                             │ │
│ │  [🔥] [💀] [⚠️]     ← GHS Pictograms                        │ │
│ │                                                             │ │
│ │  Hazard Statements:                                         │ │
│ │  • H225 - Highly flammable liquid and vapor                 │ │
│ │  • H319 - Causes serious eye irritation                     │ │
│ │  • H336 - May cause drowsiness or dizziness                 │ │
│ │                                                             │ │
│ │  Precautionary Statements:                                  │ │
│ │  • P210 - Keep away from heat, sparks, open flames          │ │
│ │  • P233 - Keep container tightly closed                     │ │
│ │  • P240 - Ground and bond container and receiving equipment │ │
│ └─────────────────────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────────────────┘

Visual Layout (SDS Missing):

┌─────────────────────────────────────────────────────────────────┐
│ 📄 Safety Data Sheet                                            │
├─────────────────────────────────────────────────────────────────┤
│ ┌─────────────────────────────────────────────────────────────┐ │
│ │  ⚠️ SDS Document Missing                                    │ │
│ │                                                             │ │
│ │  A Safety Data Sheet is required for OSHA compliance.       │ │
│ │                                                             │ │
│ │        [🔍 Search for SDS]    [📤 Upload SDS]               │ │
│ └─────────────────────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────────────────┘

Section 5: Composition/Ingredients Card

Purpose: Display chemical composition from SDS Section 3

Column	Source	Description
Chemical Name	sds_composition.chemical_name	Ingredient name
CAS Number	sds_composition.cas_number	CAS identifier
Concentration	sds_composition	Range or exact value
Hazardous	sds_composition.is_hazardous	Yes/No indicator
Trade Secret	sds_composition.is_trade_secret	Confidential indicator

Visual Layout:

┌─────────────────────────────────────────────────────────────────┐
│ 🧪 Composition / Ingredients                                    │
├─────────────────────────────────────────────────────────────────┤
│ Chemical Name        │ CAS Number  │ Concentration │ Hazardous │
│ ─────────────────────┼─────────────┼───────────────┼────────── │
│ Acetone              │ 67-64-1     │ 95-100%       │ ⚠️ Yes    │
│ Water                │ 7732-18-5   │ < 5%          │ No        │
│ Methanol             │ 67-56-1     │ < 1%          │ ⚠️ Yes    │
└─────────────────────────────────────────────────────────────────┘

Section 6: Print Labels Card

Purpose: Generate and print GHS labels, NFPA diamonds, and barcodes

GHS Label Printing

GHS-compliant secondary container labels include:

Product name & manufacturer
Signal word (DANGER/WARNING) with appropriate color
GHS pictograms (from SDS hazard data)
Hazard statements (H-codes)
Precautionary statements (P-codes)
Manufacturer contact/emergency phone
Date printed

Label Size Options:

Size	Dimensions	Use Case
Small	2" × 2"	Small containers, vials
Medium	4" × 4"	Standard containers
Large	4" × 6"	Large containers, drums

NFPA 704 Diamond Label

NFPA "fire diamond" with four quadrants:

Health (Blue): 0-4 rating
Flammability (Red): 0-4 rating
Reactivity/Instability (Yellow): 0-4 rating
Special Hazards (White): OX (oxidizer), W̶ (water reactive), SA (simple asphyxiant), etc.

Rating Derivation:

Auto-calculate from GHS hazard classes where possible
Allow manual override for edge cases
Store custom ratings in chemiq_inventory_attributes or separate table

Size Options:

Size	Dimensions	Use Case
Small	2" × 2"	Container labeling
Medium	4" × 4"	Cabinet/shelf labeling
Large	8" × 8"	Wall mounting, room signage

Barcode Label Printing

Generate scannable barcode labels with:

Barcode (Code128 format, or UPC if available)
Product name (truncated if needed)
Optional fields: Container size, location, date added
QR code option (links to chemical detail page)

Label Size Options:

Size	Dimensions	Compatible With
Dymo Small	1" × 2"	Dymo LabelWriter
Dymo Large	2" × 4"	Dymo LabelWriter
Zebra Standard	2" × 1"	Zebra printers
Custom	User-defined	Various

Visual Layout:

┌─────────────────────────────────────────────────────────────────┐
│ 🖨️ Print Labels                                                 │
├─────────────────────────────────────────────────────────────────┤
│                                                                 │
│  ┌───────────┐  ┌───────────┐  ┌───────────┐                   │
│  │    GHS    │  │   NFPA    │  │  Barcode  │                   │
│  │   Label   │  │  Diamond  │  │   Label   │                   │
│  │  [Print]  │  │  [Print]  │  │  [Print]  │                   │
│  └───────────┘  └───────────┘  └───────────┘                   │
│                                                                 │
│  Size: [Medium ▼]     Copies: [1  ]     [ Preview ] [ Print ]  │
│                                                                 │
└─────────────────────────────────────────────────────────────────┘

Section 7: Actions Panel

Purpose: Quick actions for inventory management

Action	Description	Implementation
Update Quantity	Quick +/- adjustment	Modal with quantity input
Change Location	Move to different location	Modal with site/location selector
Attach/Replace SDS	Upload or search for SDS	Existing SDS search/upload flow
Attach EPA Label	For pesticides/FIFRA products	File upload modal
Mark as Inactive	Remove from active inventory	Confirmation dialog
Duplicate Entry	Create copy at different location	Pre-filled add form
View Audit History	See all changes (future)	Activity log modal

Visual Layout:

┌─────────────────────────────────────────────────────────────────┐
│ ⚡ Quick Actions                                                │
├─────────────────────────────────────────────────────────────────┤
│                                                                 │
│  [📦 Update Quantity]    [📍 Change Location]                   │
│                                                                 │
│  [📄 Attach SDS]         [🏷️ Attach EPA Label]                 │
│                                                                 │
│  [📋 Duplicate]          [🗑️ Mark Inactive]                    │
│                                                                 │
└─────────────────────────────────────────────────────────────────┘

Technical Implementation

File Structure

tellus-ehs-hazcom-ui/src/
├── pages/chemiq/inventory/
│   ├── ChemicalDetailsPage.tsx          # Main page component
│   └── components/
│       ├── ProductInfoCard.tsx          # Section 2
│       ├── InventoryDetailsCard.tsx     # Section 3
│       ├── SDSInfoCard.tsx              # Section 4
│       ├── CompositionCard.tsx          # Section 5
│       ├── PrintLabelsCard.tsx          # Section 6
│       ├── ActionsPanel.tsx             # Section 7
│       ├── UpdateQuantityModal.tsx      # Quantity update modal
│       ├── ChangeLocationModal.tsx      # Location change modal
│       └── labels/
│           ├── GHSLabelPreview.tsx      # GHS label generator
│           ├── NFPADiamondPreview.tsx   # NFPA diamond generator
│           ├── BarcodeLabelPreview.tsx  # Barcode label generator
│           └── LabelPrintModal.tsx      # Print dialog
│
├── services/api/
│   └── chemiq.api.ts                    # Add new API methods
│
├── types/
│   └── index.ts                         # Add label-related types
│
└── assets/
    └── ghs-pictograms/                  # GHS pictogram SVGs
        ├── GHS01-explosive.svg
        ├── GHS02-flammable.svg
        ├── GHS03-oxidizer.svg
        ├── GHS04-compressed-gas.svg
        ├── GHS05-corrosive.svg
        ├── GHS06-toxic.svg
        ├── GHS07-irritant.svg
        ├── GHS08-health-hazard.svg
        └── GHS09-environment.svg

API Endpoints Required

Endpoint	Method	Description	Status
`/api/v1/chemiq/chemicals/{id}`	GET	Get chemical details	Exists
`/api/v1/chemiq/sds/{id}`	GET	Get full SDS with hazards	Exists
`/api/v1/chemiq/sds/{id}/download-url`	GET	Get presigned S3 URL	Exists
`/api/v1/chemiq/chemicals/{id}`	PUT	Update chemical	Exists
`/api/v1/chemiq/chemicals/{id}/quantity`	PATCH	Quick quantity update	New
`/api/v1/chemiq/chemicals/{id}/location`	PATCH	Change location	New
`/api/v1/chemiq/labels/ghs`	POST	Generate GHS label PDF	New
`/api/v1/chemiq/labels/nfpa`	POST	Generate NFPA label PDF	New
`/api/v1/chemiq/labels/barcode`	POST	Generate barcode label PDF	New

Frontend Dependencies

Package	Purpose	Version
`jspdf`	PDF generation for labels	^2.5.x
`jsbarcode`	Barcode generation	^3.11.x
`qrcode`	QR code generation	^1.5.x
`html2canvas`	Capture label previews	^1.4.x

Database Changes

No new tables required. Optional enhancements:

-- Add NFPA ratings to inventory attributes (optional)
ALTER TABLE chemiq_inventory_attributes
ADD COLUMN nfpa_health INTEGER CHECK (nfpa_health BETWEEN 0 AND 4),
ADD COLUMN nfpa_flammability INTEGER CHECK (nfpa_flammability BETWEEN 0 AND 4),
ADD COLUMN nfpa_reactivity INTEGER CHECK (nfpa_reactivity BETWEEN 0 AND 4),
ADD COLUMN nfpa_special VARCHAR(10);

Implementation Phases

Phase 1: Core Detail View (P0)

Estimated effort: 2-3 days

Create ChemicalDetailsPage.tsx with routing
Implement header with breadcrumb and back navigation
Create ProductInfoCard.tsx component
Create InventoryDetailsCard.tsx component
Create SDSInfoCard.tsx with basic info (no hazards yet)
Add navigation from inventory list to detail page
Loading states and error handling

Phase 2: SDS Hazard Display (P1)

Estimated effort: 2 days

Add GHS pictogram SVG assets
Display signal word with color coding
Display GHS pictograms
Display hazard statements (H-codes)
Display precautionary statements (P-codes)
Handle SDS missing state with action buttons

Phase 3: Quick Actions (P1)

Estimated effort: 2 days

Create UpdateQuantityModal.tsx
Create ChangeLocationModal.tsx
Implement PATCH endpoints for quantity/location
Create ActionsPanel.tsx component
Wire up existing SDS attach flow

Phase 4: Label Printing - GHS & Barcode (P1)

Estimated effort: 3-4 days

Install jspdf, jsbarcode dependencies
Create GHSLabelPreview.tsx component
Create BarcodeLabelPreview.tsx component
Create LabelPrintModal.tsx with size/copies options
Implement PDF generation for GHS labels
Implement PDF generation for barcode labels
Create PrintLabelsCard.tsx component

Phase 5: Composition & NFPA (P2)

Estimated effort: 2-3 days

Create CompositionCard.tsx component
Create NFPADiamondPreview.tsx component
Implement GHS → NFPA rating mapping logic
Add manual NFPA override capability
Implement NFPA label PDF generation

Phase 6: Polish & Future (P3)

Estimated effort: Ongoing

GHS Pictogram Reference

Code	Name	Image	Hazard Types
GHS01	Exploding Bomb	💥	Explosives, self-reactives
GHS02	Flame	🔥	Flammables, pyrophorics
GHS03	Flame Over Circle	⭕	Oxidizers
GHS04	Gas Cylinder	🔵	Compressed gases
GHS05	Corrosion	⚗️	Corrosives
GHS06	Skull and Crossbones	☠️	Acute toxicity
GHS07	Exclamation Mark	⚠️	Irritants, sensitizers
GHS08	Health Hazard	🏥	Carcinogens, mutagens
GHS09	Environment	🌊	Aquatic toxicity

NFPA 704 Rating Reference

Health (Blue) - 0 to 4

Rating	Description
0	No hazard
1	Slightly hazardous
2	Hazardous
3	Extreme danger
4	Deadly

Flammability (Red) - 0 to 4

Rating	Description
0	Will not burn
1	Above 200°F
2	Below 200°F
3	Below 100°F
4	Below 73°F

Reactivity (Yellow) - 0 to 4

Rating	Description
0	Stable
1	Unstable if heated
2	Violent chemical change
3	Shock/heat may detonate
4	May detonate

Special Hazards (White)

Symbol	Meaning
OX	Oxidizer
W̶	Water reactive
SA	Simple asphyxiant
COR	Corrosive
BIO	Biological hazard
RAD	Radioactive
CRYO	Cryogenic

Success Criteria

Functional: All P0/P1 features working correctly
Performance: Page loads in < 2 seconds
Usability: Users can complete common tasks in < 3 clicks
Compliance: GHS labels meet OSHA requirements
Print Quality: Labels print correctly on standard printers
Mobile: Basic functionality works on tablets

Design Decisions

1. Should NFPA ratings be stored per-product or per-inventory item?

Decision: Per-product (in company_product_catalog)

Option	Pros	Cons
Per-product ✓	Single source of truth, no duplication, easier maintenance	Can't have location-specific overrides
Per-inventory item	Location flexibility	Data duplication, inconsistency risk, more storage

Rationale:

NFPA ratings describe the chemical's inherent hazards - they don't change based on storage location
Acetone is always Flammability=3, Health=1, Reactivity=0 whether in Building A or Building B
Keeps data consistent across all inventory items of the same product
Simpler to auto-populate from SDS data once

Implementation:

ALTER TABLE chemiq_company_product_catalog
ADD COLUMN nfpa_health INTEGER CHECK (nfpa_health BETWEEN 0 AND 4),
ADD COLUMN nfpa_flammability INTEGER CHECK (nfpa_flammability BETWEEN 0 AND 4),
ADD COLUMN nfpa_reactivity INTEGER CHECK (nfpa_reactivity BETWEEN 0 AND 4),
ADD COLUMN nfpa_special VARCHAR(10);

2. Should we support custom label templates?

Decision: No - offer pre-built templates only (for now)

Option	Pros	Cons
Custom templates	Ultimate flexibility	Complex template editor, storage, validation, rendering engine needed
Pre-built only ✓	Fast to implement, covers 90% of use cases	Less flexibility

Rationale:

Building a template editor is a significant feature (weeks of work)
SMBs primarily need compliant labels, not custom designs
Pre-built templates ensure OSHA/GHS compliance - custom templates risk non-compliance
Can add custom templates later if demand warrants

Pre-built template options:

Label Type	Sizes
GHS Label	Small (2×2"), Medium (4×4"), Large (4×6")
NFPA Diamond	Small (2×2"), Medium (4×4"), Wall (8×8")
Barcode	Small (1×2"), Standard (2×4")

Multi-label sheet printing (Barcode labels):

Users often need to print multiple barcode labels per sheet for efficiency. Support common Avery-style label sheets:

Template	Labels per Sheet	Label Size	Use Case
Avery 5160	30 labels (3×10)	1" × 2⅝"	Address-size labels
Avery 5163	10 labels (2×5)	2" × 4"	Shipping labels
Avery 5167	80 labels (4×20)	½" × 1¾"	Small asset tags
Avery 22806	12 labels (3×4)	2" × 2"	Square labels

Print options for multi-label sheets:

Select sheet template (e.g., "Avery 5160 - 30 per sheet")
Enter number of copies per chemical (fills sheet left-to-right, top-to-bottom)
Option to print multiple chemicals on same sheet
Starting position selector (skip used labels on partial sheets)

3. Do we need label printing history/audit trail?

Decision: Not at this time

Can be added later if compliance auditing requirements emerge.

4. Should QR codes link to public or authenticated pages?

Decision: Public page (unauthenticated access)

Rationale:

Emergency responders need immediate access without login
Employees scanning labels shouldn't need to authenticate
Public page shows: product name, hazards, SDS download, emergency contacts
Sensitive company data is NOT exposed on public page

5. Do we need to support specific label printer integrations (Dymo SDK, Zebra)?

Decision: Start with standard PDF printing for common SMB printers

Rationale:

Most small/medium businesses use standard inkjet/laser printers
PDF output works universally across all printers
Direct SDK integrations (Dymo, Zebra, Brother) can be added later based on customer demand
Avoids platform-specific complexity initially

Supported approach:

Generate print-ready PDF at standard label sizes
User prints via browser print dialog
Label paper templates (Avery, etc.) can be supported via size presets

Document created: December 2025 Last updated: December 2025

Overview​

Feature Sections​

Section 1: Header & Overview Card​

Section 2: Product Information Card​

Section 3: Inventory Details Card​

Section 4: SDS Information Card​

When SDS is Attached:​

When SDS is Missing:​

Section 5: Composition/Ingredients Card​

Section 6: Print Labels Card​

GHS Label Printing​

NFPA 704 Diamond Label​

Barcode Label Printing​

Section 7: Actions Panel​

Technical Implementation​

File Structure​

API Endpoints Required​

Frontend Dependencies​

Database Changes​

Implementation Phases​

Phase 1: Core Detail View (P0)​

Phase 2: SDS Hazard Display (P1)​

Phase 3: Quick Actions (P1)​

Phase 4: Label Printing - GHS & Barcode (P1)​

Phase 5: Composition & NFPA (P2)​

Phase 6: Polish & Future (P3)​

GHS Pictogram Reference​

NFPA 704 Rating Reference​

Health (Blue) - 0 to 4​

Flammability (Red) - 0 to 4​

Reactivity (Yellow) - 0 to 4​

Special Hazards (White)​

Success Criteria​

Design Decisions​

1. Should NFPA ratings be stored per-product or per-inventory item?​

2. Should we support custom label templates?​

3. Do we need label printing history/audit trail?​

4. Should QR codes link to public or authenticated pages?​

5. Do we need to support specific label printer integrations (Dymo SDK, Zebra)?​

Overview

Feature Sections

Section 1: Header & Overview Card

Section 2: Product Information Card

Section 3: Inventory Details Card

Section 4: SDS Information Card

When SDS is Attached:

When SDS is Missing:

Section 5: Composition/Ingredients Card

Section 6: Print Labels Card

GHS Label Printing

NFPA 704 Diamond Label

Barcode Label Printing

Section 7: Actions Panel

Technical Implementation

File Structure

API Endpoints Required

Frontend Dependencies

Database Changes

Implementation Phases

Phase 1: Core Detail View (P0)

Phase 2: SDS Hazard Display (P1)

Phase 3: Quick Actions (P1)

Phase 4: Label Printing - GHS & Barcode (P1)

Phase 5: Composition & NFPA (P2)

Phase 6: Polish & Future (P3)

GHS Pictogram Reference

NFPA 704 Rating Reference

Health (Blue) - 0 to 4

Flammability (Red) - 0 to 4

Reactivity (Yellow) - 0 to 4

Special Hazards (White)

Success Criteria

Design Decisions

1. Should NFPA ratings be stored per-product or per-inventory item?

2. Should we support custom label templates?

3. Do we need label printing history/audit trail?

4. Should QR codes link to public or authenticated pages?

5. Do we need to support specific label printer integrations (Dymo SDK, Zebra)?