Product Inventory Table

Build a product inventory table in React with TypeScript. The table displays a list of products with columns: name, SKU, quantity, and price. Users can filter by typing in a search box (filters by name) and sort by clicking column headers.

Each row has a "Flag for reorder" button that calls a callback prop in the parent.

Output

Produce TypeScript/TSX files in a src/ directory:

• src/types.ts -- TypeScript type definitions
• src/components/InventoryTable.tsx -- the parent table component with filter input, sort controls, and result count
• src/components/ProductRow.tsx -- component for a single product row with the flag button

Use the following hardcoded data:

const PRODUCTS = [
  { id: "p1", name: "Widget A", sku: "WGT-001", quantity: 150, price: 2499 },
  { id: "p2", name: "Widget B", sku: "WGT-002", quantity: 3,   price: 4999 },
  { id: "p3", name: "Gadget X", sku: "GDG-001", quantity: 42,  price: 7500 },
  { id: "p4", name: "Gadget Y", sku: "GDG-002", quantity: 0,   price: 12000 },
  { id: "p5", name: "Doohickey", sku: "DHK-001", quantity: 87, price: 999 },
  { id: "p6", name: "Thingamajig", sku: "THG-001", quantity: 12, price: 3499 },
  { id: "p7", name: "Whatchamacallit", sku: "WCM-001", quantity: 200, price: 1599 },
  { id: "p8", name: "Contraption", sku: "CNT-001", quantity: 5, price: 8999 },
];

Do not include test files or build configuration.