{
const [searchTerm, setSearchTerm] = useState('');
const [inventoryItems, setInventoryItems] = useState([
{ id: 1, name: 'Item 1', address: 'Address 1', contact: '123-456-7890', credit: 100, debit: 50 },
{ id: 2, name: 'Item 2', address: 'Address 2', contact: '098-765-4321', credit: 200, debit: 150 },
]);
const [newItem, setNewItem] = useState({ name: '', address: '', contact: '', credit: 0, debit: 0 });
const [editingId, setEditingId] = useState(null);
const handleSearch = (event) => {
setSearchTerm(event.target.value);
};
const filteredItems = inventoryItems.filter(item =>
item.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
item.address.toLowerCase().includes(searchTerm.toLowerCase()) ||
item.contact.includes(searchTerm)
);
const handleFileUpload = (event) => {
const file = event.target.files[0];
if (file) {
const reader = new FileReader();
reader.onload = (e) => {
try {
const data = JSON.parse(e.target.result);
setInventoryItems(data);
} catch (error) {
console.error('Error parsing file:', error);
alert('Error parsing file. Please make sure it\'s a valid JSON file.');
}
};
reader.readAsText(file);
}
};
const handleExport = () => {
const dataStr = JSON.stringify(inventoryItems, null, 2);
const dataUri = 'data:application/json;charset=utf-8,'+ encodeURIComponent(dataStr);
const exportFileDefaultName = 'inventory_data.json';
const linkElement = document.createElement('a');
linkElement.setAttribute('href', dataUri);
linkElement.setAttribute('download', exportFileDefaultName);
linkElement.click();
};
const handleAddItem = () => {
setInventoryItems([...inventoryItems, { ...newItem, id: inventoryItems.length + 1 }]);
setNewItem({ name: '', address: '', contact: '', credit: 0, debit: 0 });
};
const handleEditItem = (id) => {
setEditingId(id);
const itemToEdit = inventoryItems.find(item => item.id === id);
setNewItem({ ...itemToEdit });
};
const handleUpdateItem = () => {
setInventoryItems(inventoryItems.map(item => item.id === editingId ? { ...newItem, id: editingId } : item));
setEditingId(null);
setNewItem({ name: '', address: '', contact: '', credit: 0, debit: 0 });
};
const handleDeleteItem = (id) => {
setInventoryItems(inventoryItems.filter(item => item.id !== id));
};
return (
);
};
export default Dashboard;
Ledger Inventory Management Dashboard
{editingId ? 'Edit Item' : 'Add New Item'}
setNewItem({...newItem, name: e.target.value})}
className="p-2 border rounded"
/>
setNewItem({...newItem, address: e.target.value})}
className="p-2 border rounded"
/>
setNewItem({...newItem, contact: e.target.value})}
className="p-2 border rounded"
/>
setNewItem({...newItem, credit: parseFloat(e.target.value)})}
className="p-2 border rounded"
/>
setNewItem({...newItem, debit: parseFloat(e.target.value)})}
className="p-2 border rounded"
/>
| ID | Name | Address | Contact | Credit | Debit | Total | Actions |
|---|---|---|---|---|---|---|---|
| {item.id} | {item.name} | {item.address} | {item.contact} | ${item.credit.toFixed(2)} | ${item.debit.toFixed(2)} | ${(item.credit - item.debit).toFixed(2)} |
إرسال تعليق