Inventory Management System
}
< const { useState, useEffect } = React;
// Main App Component
function App() {
const [products, setProducts] = useState([]);
const [transactions, setTransactions] = useState([]);
const [newProduct, setNewProduct] = useState({ name: '', quantity: 0 });
const [balance, setBalance] = useState(0);
useEffect(() => {
// Example to fetch products & transactions
// Replace with your real API endpoint
fetchProducts();
fetchTransactions();
}, []);
const fetchProducts = () => {
// This is placeholder data
const sampleProducts = [
{ id: 1, name: "Product A", quantity: 50 },
{ id: 2, name: "Product B", quantity: 30 }
];
setProducts(sampleProducts);
};
const fetchTransactions = () => {
const sampleTransactions = [
{ id: 1, product: "Product A", type: "debit", amount: 10, date: "2024-01-01" },
{ id: 2, product: "Product B", type: "credit", amount: 20, date: "2024-01-02" }
];
setTransactions(sampleTransactions);
};
const handleAddProduct = (e) => {
e.preventDefault();
setProducts([...products, { ...newProduct, id: products.length + 1 }]);
setNewProduct({ name: '', quantity: 0 });
};
return (
Inventory Management System
);
}
// Product Form Component
function ProductForm({ newProduct, setNewProduct, handleAddProduct }) {
return (
);
}
// Product Table Component
function ProductTable({ products }) {
return (
Products
| ID |
Product Name |
Quantity |
{products.map(product => (
| {product.id} |
{product.name} |
{product.quantity} |
))}
);
}
// Transaction Table Component
function TransactionTable({ transactions }) {
return (
Transactions
| ID |
Product |
Type |
Amount |
Date |
{transactions.map(transaction => (
| {transaction.id} |
{transaction.product} |
{transaction.type} |
{transaction.amount} |
{transaction.date} |
))}
);
}
// Dashboard Component
function Dashboard({ products }) {
const totalProducts = products.reduce((acc, product) => acc + product.quantity, 0);
return (
Total Products
{products.length}
Total Stock
{totalProducts}
Available Balance
$1000
{/* Example balance */}
);
}
ReactDOM.render(
, document.getElementById('root'));
Post a Comment