appsmith-statistics-app/README.md

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 • Docs • Community • Tutorials • Youtube • Discord

You can visit the application using the below link

---

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