The Dashboard

What This Does

The merchant-facing UI is built with Shopify Polaris (their design system) and Remix (a React framework). There are pages for: a home dashboard showing today's order counts, an orders list with filtering/pagination, a review queue for approving/rejecting corrections, 4 settings tabs (connection, processing, notifications, how-it-works), analytics, and billing.

Why It Matters

This is what merchants see and interact with. Even though the heavy lifting happens in the background pipeline, merchants need to configure their settings, review flagged orders, understand their usage, and troubleshoot issues — all through these UI pages.

How It Works

1. 1.Each page follows Remix conventions: a 'loader' function fetches data from the database, and the React component renders it.
2. 2.All routes are under /app/ which is protected by Shopify's authenticate.admin() — merchants must be logged in.
3. 3.The home dashboard shows: orders processed today, pending review count, recent orders, and a quick setup checklist.
4. 4.The orders page has filtering by status, search by order number, and pagination (25 per page).
5. 5.The review queue shows orders awaiting approval with before/after customs values, discount details, and approve/reject buttons.
6. 6.Settings pages let merchants: connect ShipStation (encrypted credentials), choose AUTO/REVIEW mode, set their domestic country, configure email preferences.
7. 7.The billing page shows current plan, usage, and upgrade options.

Key Decisions

• ●Using Shopify Polaris components ensures the app looks and feels native to the Shopify admin — merchants are already familiar with the UI patterns.
• ●All data queries are scoped to the authenticated shop (WHERE shopId = current_shop) — merchants can never see other merchants' data.
• ●The review queue uses SQS re-enqueue with the 'approved' flag when a merchant approves an order — the same Lambda worker picks it up and runs the push step.

What Could Go Wrong

• ●If the Shopify session expires mid-use, the merchant is redirected to re-authenticate.
• ●If the database is slow, page loads will be slow — all data is fetched in the loader before rendering.