# MSD Product Inventory Viewer

An interactive, browser-only tool for reviewing and editing MSD product assignments across WPA audiences, therapeutic areas, and pathologies. The viewer pairs with the output generated by `app/app_product_inventory.py` and embraces MSD brand styling.

## Quick Start

1. **Open** `product_inventory_viewer.html` (double-click from Finder/Explorer).
2. **Select** your inventory JSON: click the upload area or drag and drop the file.
3. **Edit** products directly in the matrix and export when finished.

> The viewer runs completely client-side—no server, installs, or configuration required.

## Required Files

```
product inventory/
├── product_inventory_viewer.html   # Main user interface
├── product_inventory_viewer.js     # Application logic
└── product_inventory_*.json        # Inventory data exported from the app
```

Keep all three items together in the same folder. The viewer now asks for the JSON file at runtime, so you no longer have to edit paths in the JavaScript file.

## Core Features

- **Standalone workflow** – Works offline in any modern browser.
- **Drag & drop loader** – Secure file picker avoids CORS issues.
- **Tag-based editing** – Quickly add or remove associations.
- **Change tracking** – Highlights additions/removals with timestamps.
- **Empty-area discovery** – Surface unassigned audiences, therapeutic areas, or pathologies.
- **Exports** – Download updated inventory plus structured and human-readable change reports.
- **Polished MSD UI** – On-brand colors, typography, and iconography.

## Using the Viewer

### Load a JSON file
When the app opens you will see the file selector. Choose a JSON named like `product_inventory_20251009_124043.json`. The matrix renders immediately after the file loads.

### Edit product assignments
- Columns shown: **Products**, **Homes (WPA audiences)**, **Therapeutic Areas**, **Pathologies**.
- Click inside any cell to type and search existing options.
- Press **Enter** to add a tag, or click the × icon to remove it.
- All edits are tracked automatically—no need to save manually.

### Review and track changes
- Click **`View Changes (n)`** to open the change center.
- Additions appear in green, removals in red, each with timestamps.
- Use the counter in the header to monitor total modifications.

### Check empty areas
- Click **`Show Empty Areas`** to list audiences, therapeutic areas, and pathologies that currently have no product assignments.
- Use this list to prioritise updates before exporting.

### Export data
The **`Export Data`** button produces three artifacts:

1. `product_inventory_updated_<timestamp>.json` – full inventory including edits.  
2. `product_inventory_changes_<timestamp>.json` – machine-readable change log.  
3. `product_inventory_changes_report_<timestamp>.txt` – human-readable summary for stakeholders.

### Load another file
- Select **`Load Different File`** to switch datasets.
- ⚠️ **Important:** exporting is the only way to persist edits. Loading a new file or refreshing the page resets the matrix to the freshly loaded JSON.

## Recommended Workflow

1. Open the viewer.  
2. Load the latest inventory JSON.  
3. Review **Empty Areas** to identify gaps.  
4. Update tags across Homes, Therapeutic Areas, and Pathologies.  
5. Review **View Changes** to confirm edits.  
6. Export updated data and change reports.  
7. Share the TXT report with the technical or regulatory teams.

## Troubleshooting

- **File does not load** – Ensure the JSON structure matches the exporter output; try a different browser if the file dialog is blocked.
- **Missing tags** – Confirm the JSON contains the expected arrays; open DevTools (F12) for error details.
- **Exports missing** – Check the browser download bar or history; allow downloads/pop-ups if prompted.
- **Changes lost** – Expected if you refresh without exporting. Export frequently during long editing sessions.

## Tips & Best Practices

- Export after every meaningful batch of edits (around 15–20 changes).
- Retain the original JSON as a backup before sharing updated data.
- Use dropdown suggestions to avoid typos in tag names.
- Combine the JSON change report with the TXT summary for complete audit trails.

## Technical Notes

- Built with HTML5, modern JavaScript (ES6+), Tailwind CSS, Tagify, and Font Awesome.  
- Requires a current browser (Chrome/Edge, Firefox, or Safari recommended).  
- All data stays local; there is no server component.

## Support

If you run into issues:

1. Consult this README.  
2. Validate your JSON file.  
3. Check the browser console (F12) for errors.  
4. Try another supported browser.  

---

**Version**: 2.1 (Unified README)  
**Last Updated**: 2025-10-09