Add Operations - WO Shortages page with MTS/MTO shortage tracking

Automates the production manager's manual workflow of checking xTuple WO
Schedule + Kit Material Shortage for FA department work orders. Two tabs:
WO Shortages (detail per WO + shortage line with customer name, YYYY-MM-DD
dates) and Critical Parts (aggregated parts blocking near-term shipments
with QOH from MPE warehouse). Nav button added to all pages.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

README.md

@@ -8,4 +8,90 @@ This app is built using Appsmith. Turn any datasource into an internal app in mi
 
 ##### You can visit the application using the below link
 
-###### [![](https://assets.appsmith.com/git-sync/Buttons.svg) ](https://appsmith.mpeapp.com/applications/6947cc068872ae1d129983a0/pages/69b7fdef00dc506d32d9eacf) [![](https://assets.appsmith.com/git-sync/Buttons2.svg)](https://appsmith.mpeapp.com/applications/6947cc068872ae1d129983a0/pages/69b7fdef00dc506d32d9eacf/edit)
+###### [![](https://assets.appsmith.com/git-sync/Buttons.svg) ](https://appsmith.mpeapp.com/applications/6947cc068872ae1d129983a0/pages/6947cc068872ae1d129983a3) [![](https://assets.appsmith.com/git-sync/Buttons2.svg)](https://appsmith.mpeapp.com/applications/6947cc068872ae1d129983a0/pages/6947cc068872ae1d129983a3/edit)
+
+---
+
+## Widget Positioning & Spacing
+
+Appsmith uses a **grid-based layout system** for widget positioning.
+
+### Grid Basics
+
+| Property | Description | Default |
+|----------|-------------|---------|
+| `topRow` | Starting row position (0-based) | - |
+| `bottomRow` | Ending row position | - |
+| `leftColumn` | Starting column (0-based) | - |
+| `rightColumn` | Ending column | - |
+| `parentRowSpace` | Pixels per row | 10px |
+| `parentColumnSpace` | Pixels per column | ~25px |
+
+The canvas is **64 columns wide**. Each row is **10 pixels tall**.
+
+### Calculating Size
+
+```
+Height = (bottomRow - topRow) × 10px
+Width  = (rightColumn - leftColumn) × 25px
+```
+
+### Visual Example
+
+```
+Row 0  ┌────────────────────────────────────────┐
+       │     Navigation (topRow: 0)             │
+Row 7  └────────────────────────────────────────┘  ← bottomRow: 7
+Row 8  ┌────────────────────────────────────────┐  ← topRow: 8 (1 row gap = 10px)
+       │     Content Widget                     │
+Row 16 └────────────────────────────────────────┘
+```
+
+### This Project's Standard
+
+| Widget | topRow | bottomRow | Notes |
+|--------|--------|-----------|-------|
+| Navigation | 0 | 7 | 70px tall |
+| First Content | 8 | 16 | 10px gap below nav |
+
+### Dynamic Height
+
+Widgets with `"dynamicHeight": "AUTO_HEIGHT"` adjust height based on content. The `bottomRow` serves as an initial guide, and `originalTopRow`/`originalBottomRow` store the original placement values.
+
+---
+
+## Adding a New Page
+
+New pages are added via AI agent (Cursor). The agent follows the skills in `.cursor/skills/` to clone the template, create the query, wire the table, add navigation buttons to all pages, and register the page in `application.json`.
+
+### What You Need
+
+1. **Page name** — Full display name in the format `<Section> - <Label>` (e.g. `Pending POs - ALx Pending`).
+2. **Section** — Which navigation section the page belongs to (e.g. `Pending POs`, `Sales`). If the section already exists, the button is appended; otherwise a new section is created first.
+3. **SQL query** — The exact query the page's table should run.
+
+### Prompt Format
+
+Tell the agent which section, what name, and what query. One sentence is enough:
+
+> Add a new page under the Pending POs section "Pending POs - ALx Pending" with `select * from mpe.get_prototype_po_dashboard_data(array['25502', '27985']::text[])` query
+
+### What the Agent Does
+
+| Step | Detail |
+|------|--------|
+| Clone template | Copies `Sales - Capacity Planning` page structure (page JSON, widgets, Container1 nav) |
+| Create query | Adds `queries/<query_name>/` with `.txt` (raw SQL) and `metadata.json` |
+| Wire table | Sets `Table1.tableData` to `{{<query_name>.data}}` |
+| Set heading | Updates `Heading.json` text to the page name |
+| Generate gitSyncIds | Creates unique `<24-char-hex>_<uuid>` IDs for the page JSON and query metadata (required for Appsmith git sync) |
+| Register page | Adds entry to `application.json` `pages` array |
+| Add nav button | Creates `Button2Copy<N>.json` on **every** page — highlighted on its own page, white on all others |
+
+### Verifying
+
+After the agent finishes, run `git status` to confirm only the expected files were added/changed:
+
+- `application.json` — one new page entry
+- `pages/<New Page>/` — full page directory (page JSON, query, widgets)
+- `pages/<Every Other Page>/widgets/Container1/Button2Copy<N>.json` — new nav button on each existing page