import React, { useState } from 'react';import './App.css';function App() { // Complete stock data (53 items exactly as provided) const stock = [ { no: 1, brand: "KUMHO", manufacture: "كوريا", model: "2024", size: "175/70R14", qty: 4, price: 15, warranty: "3 y" }, { no: 2, brand: "KUMHO", manufacture: "كوريا", model: "2024", size: "185/70R14", qty: 4, price: 15, warranty: "3 y" }, { no: 3, brand: "KUMHO", manufacture: "كوريا", model: "2024", size: "215/60R16", qty: 8, price: 19, warranty: "3 y" }, { no: 4, brand: "KUMHO", manufacture: "كوريا", model: "2024", size: "285/6OR18", qty: 4, price: 45, warranty: "3 y" }, { no: 5, brand: "KUMHO", manufacture: "كوريا", model: "2024", size: "275/4OR20", qty: 20, price: 35, warranty: "3 y" }, { no: 6, brand: "KUMHO", manufacture: "كوريا", model: "2024", size: "265/70R16", qty: 4, price: 35, warranty: "3 y" }, { no: 7, brand: "FALKEN", manufacture: "يابان", model: "2024", size: "215/55R17", qty: 28, price: 22.5, warranty: "3 y" }, { no: 8, brand: "BRIDGESTONE", manufacture: "يابان", model: "2024", size: "215/55R17", qty: 4, price: 29, warranty: "5Y" }, { no: 9, brand: "BLACKHAWK", manufacture: "صيني", model: "2025", size: "LT285/70R17", qty: 4, price: 45, warranty: "2 y" }, { no: 10, brand: "BLACKHAWK", manufacture: "صيني", model: "2025", size: "205/65R16", qty: 2, price: 16, warranty: "2 y" }, { no: 11, brand: "LANDSAIL", manufacture: "تايليند", model: "2025", size: "235/65R18", qty: 4, price: 30, warranty: "2 y" }, { no: 12, brand: "TOYO", manufacture: "يابان", model: "2025", size: "175/70R14", qty: 4, price: 25, warranty: "3Y" }, { no: 13, brand: "TOYO", manufacture: "يابان", model: "2025", size: "175/65R14", qty: 4, price: 25, warranty: "3Y" }, { no: 14, brand: "TOYO", manufacture: "يابان", model: "2025", size: "265/65R17", qty: 4, price: 55, warranty: "3Y" }, { no: 15, brand: "TOYO", manufacture: "يابان", model: "2025", size: "235/55R19", qty: 4, price: 58, warranty: "3Y" }, { no: 16, brand: "TOYO", manufacture: "يابان", model: "2025", size: "265/70R17", qty: 4, price: 75, warranty: "3Y" }, { no: 17, brand: "TOYO", manufacture: "يابان", model: "2025", size: "265/70R18", qty: 4, price: 68, warranty: "3Y" }, { no: 18, brand: "TOYO", manufacture: "يابان", model: "2025", size: "265/70R17", qty: 4, price: 60, warranty: "3Y" }, { no: 19, brand: "TOYO", manufacture: "يابان", model: "2025", size: "215/60R17", qty: 4, price: 40, warranty: "3Y" }, { no: 20, brand: "KEPSON", manufacture: "صيني", model: "2025", size: "205/55R16", qty: 10, price: 15, warranty: "2 Y" }, { no: 21, brand: "BLACKHAWK", manufacture: "صيني", model: "2025", size: "235/45/R18", qty: 4, price: 20, warranty: "2Y" }, { no: 22, brand: "BLACKHAWK", manufacture: "صيني", model: "2025", size: "225/55R17", qty: 8, price: 20, warranty: "2Y" }, { no: 23, brand: "BLACKHAWK", manufacture: "صيني", model: "2025", size: "265/70R17", qty: 4, price: 28, warranty: "2Y" }, { no: 24, brand: "BLACKHAWK", manufacture: "صيني", model: "2025", size: "235/55R17", qty: 4, price: 22, warranty: "2Y" }, { no: 25, brand: "BLACKHAWK", manufacture: "صيني", model: "2025", size: "195/R15", qty: 8, price: 20, warranty: "2Y" }, { no: 26, brand: "BLACKHAWK", manufacture: "صيني", model: "2025", size: "265/70R16", qty: 4, price: 27, warranty: "2Y" }, { no: 27, brand: "BLACKHAWK", manufacture: "صيني", model: "2025", size: "275/60R20", qty: 4, price: 30, warranty: "2Y" }, { no: 28, brand: "BLACKHAWK", manufacture: "صيني", model: "2025", size: "175/65R14", qty: 4, price: 12, warranty: "2Y" }, { no: 29, brand: "BLACKHAWK", manufacture: "صيني", model: "2025", size: "225/60R18", qty: 4, price: 14, warranty: "2Y" }, { no: 30, brand: "BLACKHAWK", manufacture: "صيني", model: "2025", size: "265/60R18", qty: 8, price: 28, warranty: "2Y" }, { no: 31, brand: "BLACKHAWK", manufacture: "صيني", model: "2025", size: "185/65R15", qty: 4, price: 15, warranty: "2Y" }, { no: 32, brand: "BLACKHAWK", manufacture: "صيني", model: "2025", size: "225/45R17", qty: 4, price: 19, warranty: "2Y" }, { no: 33, brand: "BLACKHAWK", manufacture: "صيني", model: "2025", size: "225/45R18", qty: 8, price: 20, warranty: "2Y" }, { no: 34, brand: "BLACKHAWK", manufacture: "صيني", model: "2025", size: "225/50R17", qty: 4, price: 20, warranty: "2Y" }, { no: 35, brand: "BLACKHAWK", manufacture: "صيني", model: "2025", size: "215/60R16", qty: 4, price: 17, warranty: "2Y" }, { no: 36, brand: "BLACKHAWK", manufacture: "صيني", model: "2025", size: "235/45/18", qty: 4, price: 20, warranty: "2 Y" }, { no: 37, brand: "BLACKHAWK", manufacture: "صيني", model: "2025", size: "215/45/17", qty: 8, price: 16.5, warranty: "2 Y" }, { no: 38, brand: "BLACKHAWK", manufacture: "صيني", model: "2025", size: "275/55/20", qty: 4, price: 30, warranty: "2 Y" }, { no: 39, brand: "BLACKHAWK", manufacture: "صيني", model: "2025", size: "225/45/17", qty: 4, price: 19, warranty: "2 Y" }, { no: 40, brand: "BLACKHAWK", manufacture: "صيني", model: "2025", size: "225/45/18", qty: 4, price: 20, warranty: "2 Y" }, { no: 41, brand: "BLACKHAWK", manufacture: "صيني", model: "2025", size: "185/65/15", qty: 4, price: 14, warranty: "2 Y" }, { no: 42, brand: "BLACKHAWK", manufacture: "صيني", model: "2025", size: "215/55/17", qty: 141, price: 16.5, warranty: "2 Y" }, { no: 43, brand: "BLACKHAWK", manufacture: "صيني", model: "2025", size: "205/16 8PR", qty: 4, price: 22.5, warranty: "2 Y" }, { no: 44, brand: "BLACKHAWK", manufacture: "صيني", model: "2025", size: "265/65/17", qty: 8, price: 30, warranty: "2 Y" }, { no: 45, brand: "BLACKHAWK", manufacture: "صيني", model: "2025", size: "265/65/18", qty: 8, price: 30, warranty: "2 Y" }, { no: 46, brand: "BLACKHAWK", manufacture: "صيني", model: "2025", size: "215/60/16", qty: 8, price: 16.5, warranty: "2 Y" }, { no: 47, brand: "DYNAMO", manufacture: "صيني", model: "2025", size: "245/45/18", qty: 16, price: 20, warranty: "2 Y" }, { no: 48, brand: "KUMHO", manufacture: "كوري", model: "2024", size: "245/45/19", qty: 4, price: 47.5, warranty: "3 Y" }, { no: 49, brand: "BRIDGESTONE", manufacture: "ياباني", model: "2025", size: "215/55/17", qty: 12, price: 37.5, warranty: "5 Y" }, { no: 50, brand: "KUMHO", manufacture: "كوري", model: "2024", size: "195/15 8 PR", qty: 8, price: 25, warranty: "3 Y" }, { no: 51, brand: "KUMHO", manufacture: "كوري", model: "2024", size: "265/65/17", qty: 20, price: 35, warranty: "3 Y" }, { no: 52, brand: "BLACKHAWK", manufacture: "صيني", model: "2025", size: "285/50/20", qty: 4, price: 30, warranty: "2 Y" }, { no: 53, brand: "DOUBLESTAR", manufacture: "صيني", model: "2025", size: "255/55/19", qty: 4, price: 27.5, warranty: "2 Y" } ]; const [searchTerm, setSearchTerm] = useState(""); const filteredStock = stock.filter(item => item.brand.toLowerCase().includes(searchTerm.toLowerCase()) || item.size.toLowerCase().includes(searchTerm.toLowerCase()) || item.warranty.toLowerCase().includes(searchTerm.toLowerCase()) ); const exportToCSV = () => { let csv = "No.,Brand,Manufacture,Model,Size,Qty,Price,Warranty\n"; stock.forEach(item => { csv += ${item.no},${item.brand},${item.manufacture},${item.model},${item.size},${item.qty},${item.price},${item.warranty}\n; }); const blob = new Blob([csv], { type: 'text/csv' }); const url = URL.createObjectURL(blob); const link = document.createElement('a'); link.href = url; link.download = 'BIN_USMAN_TYRES_Stock.csv'; link.click(); }; return ( <div className="App"> <header className="header"> <h1>BIN USMAN TYRES - Complete Stock</h1> </header> <div className="controls"> <input type="text" placeholder="Search by brand, size or warranty..." value={searchTerm} onChange={(e) => setSearchTerm(e.target.value)} /> <button onClick={exportToCSV}>Export to CSV</button> </div> <div className="table-container"> <table> <thead> <tr> <th>No.</th> <th>Brand</th> <th>Manufacture</th> <th>Model</th> <th>Size</th> <th>Qty</th> <th>Price (OMR)</th> <th>Warranty</th> </tr> </thead> <tbody> {filteredStock.map(item => ( <tr key={item.no}> <td>{item.no}</td> <td>{item.brand}</td> <td>{item.manufacture}</td> <td>{item.model}</td> <td>{item.size}</td> <td>{item.qty}</td> <td>{item.price}</td> <td>{item.warranty}</td> </tr> ))} </tbody> </table> </div> </div> );}export default App;body { font-family: 'Arial', sans-serif; margin: 0; padding: 0; background-color: #f5f5f5;}.App { max-width: 1200px; margin: 0 auto; padding: 20px;}.header { background: #d40000; color: white; padding: 20px; text-align: center; border-radius: 5px; margin-bottom: 20px;}.controls { display: flex; gap: 10px; margin-bottom: 20px;}.controls input { flex: 1; padding: 10px; border: 1px solid #ddd; border-radius: 4px;}.controls button { background: #000; color: white; border: none; padding: 10px 20px; border-radius: 4px; cursor: pointer;}.table-container { overflow-x: auto;}table { width: 100%; border-collapse: collapse; background: white; box-shadow: 0 2px 5px rgba(0,0,0,0.1);}th, td { padding: 12px 15px; text-align: left; border-bottom: 1px solid #ddd;}th { background: #000; color: white; position: sticky; top: 0;}tr:hover { background-color: #f9f9f9;}@media (max-width: 768px) { .controls { flex-direction: column; } th, td { padding: 8px; font-size: 14px; }}