# Frontend Prompt - Product Batch Expiry Updates Only

Use this prompt with frontend AI/dev to implement only the required updates.

---

You are updating frontend for new backend batch-expiry inventory support.

Implement only the changes below. Do not redesign unrelated pages.

## New backend endpoints

- `POST /api/v1/product-batches/receive`
- `GET /api/v1/product-batches/product/:productId`

## Required frontend updates

1. Replace normal stock-in behavior:
- Do NOT increase stock by editing product directly for new shipments.
- Use `POST /product-batches/receive` for incoming stock.

2. Add Receive Stock Batch form/modal in product details (or inventory page):
- Fields:
  - productId (hidden/current product)
  - batchNumber (optional)
  - expiryDate (required)
  - qty (required, > 0)
  - costPrice (optional)
  - sellingPrice (optional, if changed for new batch)
  - supplierRef (optional)
- On success:
  - refresh product list/details
  - refresh batch list for that product
  - toast: "Batch received successfully"

3. Add Product Batch List UI:
- For selected product call `GET /product-batches/product/:productId`
- Show columns/cards:
  - batchNumber
  - expiryDate
  - qtyAvailable
  - qtyReceived
  - sellingPrice
  - receivedDate
- Sort by expiry ascending (nearest first)

4. Product screen behavior:
- Keep current total stock display from product API (it is now synced from batches).
- If receive payload includes sellingPrice, backend updates product selling price (`sellingprice`) for new sales.
- Add helper text near stock input:
  - "Use Receive Batch for new stock with expiry."

5. Validation and UX:
- Prevent submit if qty <= 0 or expiryDate missing.
- If sellingPrice is provided, ensure sellingPrice >= 0.
- Show backend error messages in toast/alert.
- Disable submit while request is in progress.

6. API typings/contracts:
- Add type for batch receive payload:

```ts
type ReceiveBatchPayload = {
  productId: string;
  batchNumber?: string;
  expiryDate: string;
  qty: number;
  costPrice?: number;
  sellingPrice?: number;
  supplierRef?: string;
  note?: string;
};
```

- Add type for batch response row:

```ts
type ProductBatch = {
  _id: string;
  productId: string;
  batchNumber: string;
  expiryDate: string;
  receivedDate: string;
  qtyReceived: number;
  qtyAvailable: number;
  costPrice: number;
  sellingPrice: number | null;
  supplierRef?: string;
  note?: string;
};
```

## Important notes

- Existing sell flow does not need frontend changes; backend now auto-consumes FEFO.
- Existing refund UI does not need changes for this release.
- Keep backward compatibility with existing product endpoints.

## Acceptance test

1. Product has old stock batch expiring tomorrow.
2. Receive new batch with later expiry.
3. Sell quantity.
4. Verify batch list shows deduction from earliest expiry batch first.

---