Scribd
Upload
4 views

import { StrictMode, useState, useE

This document contains a React application that utilizes IndexedDB to manage an inventory system. It includes a dashboard with navigation links to different sections such as inventory, sales, customers, reports, and alerts. The Inventory component fetches and displays product data from the IndexedDB database.

Uploaded by

Carlos Muñoz
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
4 views

import { StrictMode, useState, useE

This document contains a React application that utilizes IndexedDB to manage an inventory system. It includes a dashboard with navigation links to different sections such as inventory, sales, customers, reports, and alerts. The Inventory component fetches and displays product data from the IndexedDB database.

Uploaded by

Carlos Muñoz
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 2

import { StrictMode, useState, useEffect } from "react";

import { createRoot } from "react-dom/client";


import "./styles.css";
import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom";

const openDB = () => {


return new Promise((resolve, reject) => {
const request = indexedDB.open("InventoryDB", 1);

request.onupgradeneeded = (event) => {


const db = event.target.result;
if (!db.objectStoreNames.contains("products")) {
db.createObjectStore("products", { keyPath: "id", autoIncrement: true });
}
if (!db.objectStoreNames.contains("sales")) {
db.createObjectStore("sales", { keyPath: "id", autoIncrement: true });
}
if (!db.objectStoreNames.contains("customers")) {
db.createObjectStore("customers", { keyPath: "id", autoIncrement: true });
}
if (!db.objectStoreNames.contains("reports")) {
db.createObjectStore("reports", { keyPath: "id", autoIncrement: true });
}
if (!db.objectStoreNames.contains("alerts")) {
db.createObjectStore("alerts", { keyPath: "id", autoIncrement: true });
}
};

request.onsuccess = () => resolve(request.result);


request.onerror = () => reject(request.error);
});
};

const Dashboard = () => (


<div>
<h1>Dashboard</h1>
<nav>
<Link to="/inventory">Inventario</Link> | <Link to="/sales">Ventas</Link> |
<Link to="/customers">Clientes</Link> | <Link to="/reports">Reportes</Link> |
<Link to="/alerts">Alertas</Link>
</nav>
</div>
);

const Inventory = () => {


const [products, setProducts] = useState([]);

useEffect(() => {
openDB().then((db) => {
const transaction = db.transaction("products", "readonly");
const store = transaction.objectStore("products");
const request = store.getAll();

request.onsuccess = () => setProducts(request.result);


});
}, []);

return (
<div>
<h1>Inventario</h1>
<ul>
{products.map((product) => (
<li key={product.id}>{product.name} - {product.stock}</li>
))}
</ul>
</div>
);
};

const Sales = () => <h1>Ventas</h1>;


const Customers = () => <h1>Clientes</h1>;
const Reports = () => <h1>Reportes</h1>;
const Alerts = () => <h1>Alertas</h1>;

const root = createRoot(document.getElementById("root"));


root.render(
<StrictMode>
<Router>
<Routes>
<Route path="/" element={<Dashboard />} />
<Route path="/inventory" element={<Inventory />} />
<Route path="/sales" element={<Sales />} />
<Route path="/customers" element={<Customers />} />
<Route path="/reports" element={<Reports />} />
<Route path="/alerts" element={<Alerts />} />
</Routes>
</Router>
</StrictMode>
);

export { openDB };

You might also like