Floating Draggable Match Panel for Invoice & Receipt Matching
Design a floating, draggable modal panel for an AP 3-Way Match system, used during payment request processing. The panel replaces the current inline “Match (Amount Incl. Tax)” button. It must be user-friendly and visually distinct.
🧩 Design Requirements: Panel Behavior:
Draggable anywhere within viewport.
Floating above the main content (z-index priority).
Auto-centered on initial open, then remembers last position.
Closeable via “X” button.
Panel Content:
Title: “Match Invoice & Receipt”
Key Info Block (readonly, styled):
PO Number
Receipt Amount (e.g., 900 / 1,000)
Invoice Amount (same format)
Matched Status (e.g., “Pending”, “Fully Matched”, “Reject”)
Editable Input:
Input Field: “Match Amount (Incl. Tax)” → prefilled with invoice value (e.g. SGD 900.00)
Optional: Dropdown or toggle for partial match / full match
CTA Buttons:
✅ “Match” (Primary button)
❌ “Cancel” (Secondary)
Optional tooltips to clarify receipt/invoice breakdown logic
Styling Suggestions:
Card-style container with soft shadows and rounded corners
Responsive (min-width: 480px, max-width: 600px)
Match Shopee / Sea system UI theme: neutral greys, blues for action
Additional Interactions:
On Match → return updated amount to table and update match state
Support keyboard input for the Match amount
Escape key closes panel
Bonus:
Add “+1” or match count badge beside “Match” button like the original, if multiple items are being matched in batch.
Loading...
Design a web UI for a 3-way match payment system with the following layout and interaction behaviors:
💡 UI Requirements:
Split the page into three main parts:
A header titled “AP 3-Way Match: Payment Request Detail”
A top table (Receipt Items) where the user can select only one receipt item via radio buttons.
A bottom table (Invoice List) where the user can select multiple invoices using checkboxes.
Each row includes:
PO Number, Receipt Amount, Company, Supplier Name
Include a radio button for selecting one item.
When a row is selected, trigger the appearance of a floating panel.
Each row includes:
Invoice Number, Invoice Amount, Supplier Name, Billing Address
Include checkboxes to select invoices.
Support multiple selection, but the total selected invoice amount must not exceed the receipt amount selected from the top table.
Once the invoice total amount equals the receipt amount, disable all other checkboxes.
Appears after selecting a receipt item.
Should be draggable, floating, and always visible.
Display the following:
Selected PO Number
Receipt Amount
Currently Selected Invoice Amount
Remaining Amount = Receipt - Selected
A progress bar or ratio indicator (e.g., “SGD 70 / 100”)
Buttons:
Confirm Match (disabled until invoice total equals receipt amount)
Cancel
Clean, modern style with soft shadows.
Tables should be clear and readable.
Use Tailwind or similar neutral UI library.
Ensure responsiveness for screens ≥1024px wide.
Loading...
The code returns the following error:
The file "/app/components/receipt-items-table" cannot be found (imported in "/app/page"). Make sure the file or alias exists in the correct location.
Revise the code to address the error.
I was previewing: /