Build me an internal orders management app

Create a nextjs app with typescript and tailwind css
It needs to have functionality for multi role user login. Admin can login and enter email id of user to be invited and email will be sent to the user. Upon clicking the invite like, he will have to password reset screen to use the app.

 - [ ] The landing home page needs to show data from a paginated api.
Here are the api details

endpoint : “/orders?status=pending”
headers : x-brand-id : jet token of logged in user

response will look like this
{
 orderId : mongoId,
customer : {
 name : “abcd”,
address:”string addres”
}
status : “PENDING” || “FULFILLED” || “PARTIALLY FULFILLED”,
totalAmount : 500
listItemsCount : 5
listItems : [{
sku : “xxxx”,
variantName : “XXL - pair of 2 - red”,
price : 200
}]
}

 and needs to have 2 tabs on the same screen based on status of order ( Partially fulfilled will come under pending) 1. Pending Orders 2. Fulfilled Orders. For the table I want to use react table by tanstack Also each table row when clicked, should expand and show the order items contained inside that order as well as the status if the order item is fulfilled or not 

On clicking table row, it should navigate to a different page, wherein complete order details will be shown. 

Order details will include 

- order id
- productName
- total price
-customer name
- customer address
- Order items
 - sku
 - variantName
 - price
 - qty
 - status


Against each order item, a button should be visible if status is not fulfilled.
User can decide to fulfill entire order at once ( by clicking fulfill Order btn) or should be able to click on btn against individual order item to fulfil particular order item.

This will open up side bar, and there 2 things will be there, 
1. Text input to enter tracking id
2. Dropdown selection for delivery courier selection

On clicking submit api call to fulfil order item / entire order needs to be made.