JunctionNet · Webpage
A shared map of the webpage so PO, QA and engineering all point to the same spot. Every dashed block below is a named region — use the monospace term shown on it, and write tickets as region → element → state.
This is the layout every page shares: a persistent sidebar on the left, a top bar across the top with the user menu, then the page header and the page content. The Home page's content is shown here.
These pages share one pattern: tabs, an optional filter bar / toolbar, then a data table with sortable column headers, status pills, a row actions menu (the ⋯), and pagination. Name the column and the cell, not "that field."
Pick one term per region and ban the synonyms so a Jira search finds everything. "Where" shows the page the region lives on.
| Ticket term | What it is | Where |
|---|---|---|
| App shell (every page) | ||
| Sidebar | Left navigation column — Home, Directory, Process Invoices, Reports, Payments Sent, Settings. | all pages |
| Sidebar item | One nav link. Name it: "Sidebar → Payments Sent item". | all pages |
| Top bar | The strip across the top with the webpage logo. | all pages |
| User menu | Top-right account control (Hector (Admin) + avatar). Pick this OR "profile menu" — not both. | all pages |
| Avatar | The circle you click to open the user menu. | top bar |
| Page header | The page-title block (title + subtitle) under the top bar. | all pages |
| Help button | The floating "?" bottom-right. | all pages |
| Dashboard (Home) | ||
| Activity section | The block holding the four stat cards and the donut. | Home |
| Stat card | A KPI tile. Name it: "Unknown stat card", "Processed stat card". | Home |
| Donut chart | "Invoices Processed by Source" ring + its legend. | Home |
| Quick actions | The row of round shortcut buttons (Directory / Process Invoices / Reports / IA14). | Home |
| Status banner | The "Automatic invoice upload" strip with its attention pills. | Home |
| Referral bar | The "X/5 Referrals" bar with the copy-link field. | Home |
| Recent Jobs section | The "Recent Jobs" block; each tile is a job card. | Home |
| Job card | One job tile (Job ID + invoice count + date). | Home |
| List pages (Directory, Reports, Payments Sent, Settings ▸ Users) | ||
| Tabs | The row of sub-views (e.g. Key File / Tag File / Companies; Invoice Report / Jobs). | most list pages |
| Filter bar | The row of filter controls (Date Range, Status, Issuer, More…) above a table. | Reports |
| Table toolbar | The strip above the table with Export / Search / count / ⚙. | list pages |
| Data table | The main results grid. | list pages |
| Column header | A table heading; click ↕ to sort. Name it: "Reference column header". | data table |
| Row / cell | Reference a cell as "row's Status cell" or by its column. | data table |
| Status pill | The colored state badge (Processed / open / Completed / Deleted). | data table |
| Row actions | The ⋯ menu at the end of a row. | data table |
| Pagination | The page-number controls under the table. | data table |
| Process Invoices & Settings | ||
| Dropzone | The "Drag and drop your batch" upload area. | Process Invoices |
| Bot list / Bot row | The "Configured Bots" list; each line is a bot row with its state. | Process Invoices |
| Form field | A labeled input (Organization Name, Tax-ID, Language…). Name the field. | Settings |
| Users table | The members grid with Role / Locale / Applications. | Settings |
The single biggest win: write the page & region, then the element, then what's wrong. QA and dev land on the same spot with no guessing.
page · region → element → state
Which page, where on it, what it is, and what it's doing (or should do).
Home · Activity section → Unknown stat card — shows 80, should be 0Reports · filter bar → Status filter — doesn't apply on clickReports · data table → Reference column header — sort ↕ does nothingPayments Sent · data table → Deleted status pill — wrong colorUser menu → Settings item — navigates to wrong pagethe number is wrong — which page? which card?the filter is broken — which of six filters?sorting doesn't work — which column, which table?