Now I understand the current implementation and what needs to change based on the updated requirements. Let me rewrite both pages to match the simpler approach:

1. Listing Page: Remove complex QB status badges, just show "—" or clickable invoice number, add Invoice Status modal
2. Edit Page: Remove large QB section, add compact QB Invoice field in Order Information section

Now let me rewrite the order edit page with a simplified approach - compact QB field in Order Information section instead of a large permanent section:

I've completely rewritten both Client Orders pages to match the updated requirements:

Listing Page (/admin/orders):

• Removed complex QB status badges - now just shows "—" or the clickable invoice number
• Added "QB Invoice" column that displays the invoice number when created
• Clicking the invoice number opens the "QuickBooks Invoice Status" modal
• "Create QB Invoice" action in dropdown, disabled with tooltip when order status isn't eligible
• Only shows "Create QB Invoice" when invoice hasn't been created yet

Edit Page (/admin/orders/[id]):

• Removed the large permanent QuickBooks section
• Added a compact "QuickBooks Invoice" field inside the Order Information section near Payment Status
• Shows "—" with "Create QB Invoice" button when no invoice exists and order is eligible
• Shows clickable invoice number when invoice has been created
• Clicking the invoice number opens the status modal

Create Invoice Modal:

• Validates requirements before showing preview (validation errors shown with helpful links)
• Shows invoice preview with header summary, line items table, delivery fee, and totals
• Warning about changes not syncing after creation
• Loading state while creating, success confirmation after

Invoice Status Modal:

• Shows Invoice #, QB Reference, Order #, Client, Payment Status, Last Checked
• Refresh Status button to check for payment updates

I can see the issue. On the listing page, the "Create QB Invoice" dropdown menu item is not connected to any action - it doesn't have an onClick handler. Let me add debugging to understand the flow and then fix the issue by connecting the dropdown menu item to open the create modal.

Now I need to add the Create Invoice Modal component to the listing page. Let me read the end of the file to see where to add it:

I can see the state and handler are there, but there's no Create Invoice Modal component being rendered. I need to add the Create Invoice Modal component. Let me add it:

Now I need to add the CreateInvoiceModal component. Let me add it after the InvoiceStatusModal component:

Now I need to add the Check icon to the imports since the CreateInvoiceModal uses it:

Now let me remove the debug console.log statement:

I've fixed the "Create QB Invoice" functionality on the Client Orders listing page. The issue was that the dropdown menu item had the onClick handler but there was no CreateInvoiceModal component being rendered. I added the complete modal component that shows a preview of the invoice with line items, delivery fee, totals, and a warning - then allows creating the invoice with a loading state and success confirmation.