Adam Pitel
b5e74cebb7
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>
98 lines
4.9 KiB
Markdown
98 lines
4.9 KiB
Markdown
|
||
|
||
This app is built using Appsmith. Turn any datasource into an internal app in minutes. Appsmith lets you drag-and-drop components to build dashboards, write logic with JavaScript objects and connect to any API, database or GraphQL source.
|
||
|
||
|
||
|
||
### [Github](https://github.com/appsmithorg/appsmith) • [Docs](https://docs.appsmith.com/?utm_source=github&utm_medium=social&utm_content=appsmith_docs&utm_campaign=null&utm_term=appsmith_docs) • [Community](https://community.appsmith.com/) • [Tutorials](https://github.com/appsmithorg/appsmith/tree/update/readme#tutorials) • [Youtube](https://www.youtube.com/appsmith) • [Discord](https://discord.gg/rBTTVJp)
|
||
|
||
##### You can visit the application using the below link
|
||
|
||
###### [ ](https://appsmith.mpeapp.com/applications/6947cc068872ae1d129983a0/pages/6947cc068872ae1d129983a3) [](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
|