AI and N8N

Zadanie Rekrutacyjne

Zadanie Rekrutacyjne

Komponent React do wyświetlania zamówień

Opis zadania

Twoim zadaniem jest stworzenie komponentu React, który pobierze dane zamówień z API i wyświetli je w czytelny sposób dla klienta.

1. Endpoint API

Komponent powinien pobierać dane z endpointu:

GET https://cal.piecyk.eu/api/orders/

Endpoint zwraca dane w formacie JSON z następującą strukturą:

{
  "orders": [
    {
      "id": "uuid",
      "created_at": "2025-12-12T13:49:18.143141+00:00",
      "name": "Imię klienta",
      "company": "Nazwa firmy",
      "email": "email@example.com",
      "price": 142.74,
      "quantity": 0,
      "completed": false,
      "comment": "Komentarz",
      "enclosures": [
        {
          "id": 4291,
          "enclosure_name": "OBUDOWA POLIESTER (GRP) - (WYM. ZEW. 120 x 120 x 90)",
          "enclosure_code": "HAR-100-100200",
          "enclosure_code3": "HTB1P 121209",
          "quantity": 1,
          "price": 0,
          "terminals": [
            {
              "id": 5482,
              "name": "UT 2,5",
              "size": "2.5",
              "brand": null,
              "quantity": 3.0,
              "rail_number": 1,
              "side": ""
            }
          ],
          "glands": [
            {
              "id": 6611,
              "name": "M12 | GHG 960 1955 R0101",
              "size": "12",
              "material": "polyamide_Ex_i",
              "quantity": 1.0,
              "side": "down"
            }
          ]
        }
      ],
      "enclosures_count": 1
    }
  ],
  "pagination": {
    "current_page": 1,
    "total_pages": 4,
    "total_count": 36,
    "page_size": 10,
    "has_next": true,
    "has_previous": false,
    "next_page": 2,
    "previous_page": null
  }
}

2. Wymagania funkcjonalne

Komponent powinien:

  1. Pobierać dane z API przy pierwszym renderowaniu
  2. Wyświetlać listę zamówień w czytelny sposób
  3. Obsługiwać paginację – wyświetlać przyciski “Poprzednia” / “Następna” oraz informacje o aktualnej stronie
  4. Wyświetlać szczegóły każdego zamówienia:
    • ID zamówienia
    • Data utworzenia (sformatowana w czytelny sposób)
    • Imię i nazwisko klienta
    • Nazwa firmy (jeśli dostępna)
    • Email
    • Cena zamówienia (sformatowana jako waluta PLN)
    • Status (zakończone/niezakończone)
    • Komentarz (jeśli dostępny)
    • Lista obudów z ich szczegółami:
      • Nazwa obudowy
      • Kod obudowy
      • Ilość
      • Cena
      • Lista terminali (nazwa, rozmiar, marka, ilość, numer szyny, strona)
      • Lista dławików (nazwa, rozmiar, materiał, ilość, strona)
  5. Obsługiwać stany ładowania – wyświetlać spinner podczas pobierania danych
  6. Obsługiwać błędy – wyświetlać komunikat błędu w przypadku problemów z API

3. Wymagania techniczne

  • React (wersja 16.8+ z hooks)
  • TypeScript (opcjonalnie, ale zalecane)
  • React Bootstrap lub inna biblioteka UI (opcjonalnie)
  • Fetch API lub Axios do pobierania danych
  • Responsywny design – komponent powinien działać na urządzeniach mobilnych

4. Dodatkowe funkcje (opcjonalne, ale mile widziane)

  • Filtrowanie zamówień po statusie (zakończone/niezakończone)
  • Sortowanie zamówień (po dacie, cenie)
  • Wyszukiwanie zamówień
  • Eksport danych do CSV/Excel
  • Animacje przejść
  • Dark mode

5. Struktura komponentu

Zalecana struktura:

OrderList/
  ├── OrderList.tsx          # Główny komponent
  ├── OrderItem.tsx          # Komponent pojedynczego zamówienia
  ├── EnclosureDetails.tsx  # Komponent szczegółów obudowy
  ├── Pagination.tsx         # Komponent paginacji
  └── types.ts               # Definicje typów TypeScript (jeśli używany)

6. Przykład użycia

import OrderList from './components/OrderList';

function App() {
  return (
    <div className="App">
      <h1>Lista zamówień</h1>
      <OrderList />
    </div>
  );
}

Kryteria oceny

40% Funkcjonalność
  • Czy komponent poprawnie pobiera i wyświetla dane?
  • Czy paginacja działa poprawnie?
  • Czy wszystkie wymagane informacje są wyświetlane?
30% Jakość kodu
  • Czytelność i organizacja kodu
  • Użycie best practices React
  • Obsługa błędów i edge cases
  • TypeScript (jeśli używany)
20% UI/UX
  • Estetyka i czytelność interfejsu
  • Responsywność
  • Użyteczność
10% Dodatkowe funkcje
  • Implementacja opcjonalnych funkcji

Dostarczenie rozwiązania

  1. Stwórz repozytorium Git (GitHub/GitLab/Bitbucket)
  2. Dodaj plik README.md z instrukcjami uruchomienia
  3. Dodaj komentarze w kodzie wyjaśniające kluczowe decyzje
  4. Wyślij link do repozytorium