16. System inwentaryzacji

Cel projektu

Zbudujesz system zarządzania inwentarzem / magazynem — śledzenie produktów, ich ilości, kategorii i dostawców. Alerty gdy zapasy spadają poniżej minimum.

Czego się nauczycie?

Zaawansowany CRUD z wieloma kategoriami pól
Alerty i logika warunkowa oparta na danych
Tabele danych z sortowaniem i filtrowaniem
Obliczenia wartości magazynu
Praca zespołowa — jeden robi listing i filtry, drugi formularze i raporty

Co ma robić aplikacja?

Główne funkcjonalności

Lista produktów — kod, nazwa, kategoria, ilość, minimalna ilość, cena, dostawca
Operacje — przyjęcie towaru (dodanie ilości) i wydanie (odjęcie ilości)
Alerty — wizualne oznaczenie produktów poniżej minimalnego stanu
Wyszukiwarka i filtry — po kategorii, dostawcy, statusie stanu
Raport wartości — łączna wartość magazynu, per kategoria

Struktura danych

{
  "products": [
    {
      "id": "prod-001",
      "code": "ZAW-001",
      "name": "Kabel HDMI 2m",
      "category": "Kable",
      "quantity": 5,
      "minQuantity": 10,
      "price": 29.99,
      "supplier": "TechSupply Sp. z o.o.",
      "location": "Regał A3",
      "lastUpdated": "2025-03-01"
    }
  ]
}

Warianty realizacji

Lista produktów z ilością i kategorią
Dodawanie, edycja i usuwanie produktów
Wizualne oznaczenie niskiego stanu (czerwony)
Wyszukiwarka po nazwie
Zapis w localStorage

Ocena: 3.0

Ocena: 5.0-6.0

Wskazówki implementacyjne

Logika alertów i statusów stanu

export function getStockStatus(product) {
  const { quantity, minQuantity } = product;
  if (quantity === 0) return 'out-of-stock';
  if (quantity <= minQuantity) return 'low';
  if (quantity <= minQuantity * 1.5) return 'warning';
  return 'ok';
}

export function getStatusLabel(status) {
  const labels = {
    'out-of-stock': 'Brak w magazynie',
    low: 'Niski stan',
    warning: 'Uwaga',
    ok: 'OK',
  };
  return labels[status];
}

export function calculateTotalValue(products) {
  return products.reduce((total, p) => total + p.quantity * p.price, 0);
}

// Komponent StatusBadge:
function StockStatusBadge({ product }) {
  const status = getStockStatus(product);
  const colorMap = { 'out-of-stock': 'red', low: 'orange', warning: 'yellow', ok: 'green' };

  return (
    <span className={`stock-badge stock-badge--${status}`} style={{ color: colorMap[status] }}>
      {getStatusLabel(status)}
    </span>
  );
}

Zasoby

Table sorting w React Renderowanie i sortowanie list w React.

Intl.NumberFormat — waluty Formatowanie cen i wartości.

Do dzieła!

Powodzenia!

System inwentaryzacji to projekt bardzo bliski prawdziwym aplikacjom biznesowym używanym w sklepach i magazynach. Panel alertów ze stanem niskim to funkcja, którą zobaczycie w każdym systemie ERP. Skupcie się na czytelności danych w tabeli!