# Pregled komponent v aplikaciji Rezervacije

Ta dokument vsebuje kratek pregled vseh komponent v aplikaciji za rezervacije restavracij, njihovo lokacijo in namen uporabe.

## Osnovne komponente

### 1. NavigationBar
**Lokacija:** `/src/components/NavigationBar.tsx`  
**Namen:** Glavna navigacijska vrstica za domačo stran aplikacije z gumbi za priljubljene, profil in meni.  
**Uporaba:** Uporabite na vrhu domače strani za osnovno navigacijo po aplikaciji.

### 2. Footer
**Lokacija:** `/src/components/Footer.tsx`  
**Namen:** Spodnja navigacijska vrstica z gumbi za domov, iskanje, rezervacije in profil.  
**Uporaba:** Uporabite na dnu domače strani in strani z zgodovino rezervacij za osnovno navigacijo med glavnimi sekcijami aplikacije. Ne uporabljajte na straneh, ki imajo lastne noge (ReservationFooter, CancellationFooter) ali spodnje pripete elemente (ReservationWidget).

### 3. RestaurantCard
**Lokacija:** `/src/components/RestaurantCard.tsx`  
**Namen:** Kartica za prikaz osnovnih podatkov o restavraciji na seznamu.  
**Uporaba:** Uporabite za prikazovanje restavracij na seznamih in straneh za iskanje.

### 4. CategoryItem
**Lokacija:** `/src/components/CategoryItem.tsx`  
**Namen:** Prikaz kategorije restavracije/kuhinje z ikono in besedilom.  
**Uporaba:** Uporabite za prikaz kategorij kuhinj v horizontalnem seznamu.

### 5. QuickFilterButton
**Lokacija:** `/src/components/QuickFilterButton.tsx`  
**Namen:** Gumb za hitro filtriranje restavracij po različnih kriterijih.  
**Uporaba:** Uporabite za omogočanje hitrih filtrov na straneh s seznami restavracij.

### 6. SearchBar
**Lokacija:** `/src/components/SearchBar.tsx`  
**Namen:** Vnosno polje za iskanje restavracij, lokacij ali vrst kuhinj.  
**Uporaba:** Uporabite na domači strani ali strani za iskanje.

### 7. QuickFilterList
**Lokacija:** `/src/components/QuickFilterList.tsx`  
**Namen:** Horizontalni seznam hitrih filtrov za restavracije.  
**Uporaba:** Uporabite pod iskalno vrstico na domači strani.

### 8. MapButton
**Lokacija:** `/src/components/MapButton.tsx`  
**Namen:** Gumb za prikaz restavracij na zemljevidu.  
**Uporaba:** Uporabite na domači strani za preklapljanje na pogled zemljevida.

### 9. CategoriesList
**Lokacija:** `/src/components/CategoriesList.tsx`  
**Namen:** Horizontalni seznam kategorij kuhinj.  
**Uporaba:** Uporabite na domači strani za filtriranje po vrstah kuhinj.

### 10. RestaurantList
**Lokacija:** `/src/components/RestaurantList.tsx`  
**Namen:** Seznam restavracij z naslovom in možnostjo prikaza vseh.  
**Uporaba:** Uporabite na domači strani za prikaz priporočenih restavracij.

## Komponente za podrobnosti restavracije

### 11. RestaurantNavBar
**Lokacija:** `/src/components/RestaurantNavBar.tsx`  
**Namen:** Navigacijska vrstica za stran s podrobnostmi restavracije z gumbi za nazaj, deljenje in priljubljene.  
**Uporaba:** Uporabite na vrhu strani s podrobnostmi restavracije.

### 12. RestaurantGallery
**Lokacija:** `/src/components/RestaurantGallery.tsx`  
**Namen:** Prikaz slike restavracije z gumbi za ogled galerije in 360° pogleda.  
**Uporaba:** Uporabite na vrhu strani s podrobnostmi restavracije za prikaz glavne slike in dostop do več slik.

### 13. RestaurantInfo
**Lokacija:** `/src/components/RestaurantInfo.tsx`  
**Namen:** Prikaz osnovnih informacij o restavraciji - ime, lokacija, ocena in značilnosti.  
**Uporaba:** Uporabite pod galerijo na strani s podrobnostmi restavracije.

### 14. ActionButtons
**Lokacija:** `/src/components/ActionButtons.tsx`  
**Namen:** Trije gumbi za klic, navigacijo in obisk spletne strani restavracije.  
**Uporaba:** Uporabite pod osnovnimi informacijami na strani s podrobnostmi restavracije.

### 15. InfoAccordion
**Lokacija:** `/src/components/InfoAccordion.tsx`  
**Namen:** Razširljiv/skrčljiv element za prikaz informacij v sekcijah.  
**Uporaba:** Uporabite za različne sekcije podrobnosti, kot so opis, odpiralni čas in kontakt.

### 16. RestaurantDescription
**Lokacija:** `/src/components/RestaurantDescription.tsx`  
**Namen:** Prikaz opisa restavracije v razširljivem elementu.  
**Uporaba:** Uporabite v sekciji z informacijami na strani s podrobnostmi restavracije.

### 17. OpeningHours
**Lokacija:** `/src/components/OpeningHours.tsx`  
**Namen:** Prikaz odpiralnega časa restavracije v razširljivem elementu.  
**Uporaba:** Uporabite v sekciji z informacijami na strani s podrobnostmi restavracije.

### 18. ContactInfo
**Lokacija:** `/src/components/ContactInfo.tsx`  
**Namen:** Prikaz kontaktnih podatkov restavracije v razširljivem elementu.  
**Uporaba:** Uporabite v sekciji z informacijami na strani s podrobnostmi restavracije.

### 19. MenuSection
**Lokacija:** `/src/components/MenuSection.tsx`  
**Namen:** Prikaz menija restavracije po kategorijah.  
**Uporaba:** Uporabite na strani s podrobnostmi restavracije za prikaz ponudbe jedi.

### 20. Reviews
**Lokacija:** `/src/components/Reviews.tsx`  
**Namen:** Prikaz ocen in mnenj uporabnikov o restavraciji.  
**Uporaba:** Uporabite na strani s podrobnostmi restavracije za prikaz ocen in mnenj.

### 21. ReservationWidget
**Lokacija:** `/src/components/ReservationWidget.tsx`  
**Namen:** Spodnji pritrjeni element za hitro izbiro termina in števila oseb za rezervacijo.  
**Uporaba:** Uporabite na dnu strani s podrobnostmi restavracije za hiter začetek postopka rezervacije.

## Komponente za rezervacijo

### 22. ReservationNavBar
**Lokacija:** `/src/components/ReservationNavBar.tsx`  
**Namen:** Navigacijska vrstica za stran z rezervacijo z gumboma za nazaj in pomoč.  
**Uporaba:** Uporabite na vrhu strani za rezervacijo.

### 23. ReservationRestaurantInfo
**Lokacija:** `/src/components/ReservationRestaurantInfo.tsx`  
**Namen:** Prikaz osnovnih podatkov o restavraciji na strani za rezervacijo.  
**Uporaba:** Uporabite na vrhu strani za rezervacijo, da uporabnik ve, katero restavracijo rezervira.

### 24. DateSelector
**Lokacija:** `/src/components/DateSelector.tsx`  
**Namen:** Izbira datuma rezervacije z vnosnim poljem in gumbi za hitre izbire.  
**Uporaba:** Uporabite na obrazcu za rezervacijo za izbiro datuma.

### 25. TimeSelector
**Lokacija:** `/src/components/TimeSelector.tsx`  
**Namen:** Izbira ure rezervacije, razdeljena po delih dneva (kosilo, večerja).  
**Uporaba:** Uporabite na obrazcu za rezervacijo za izbiro ure.

### 26. GuestCounter
**Lokacija:** `/src/components/GuestCounter.tsx`  
**Namen:** Izbira števila oseb za rezervacijo z gumbi za povečanje in zmanjšanje.  
**Uporaba:** Uporabite na obrazcu za rezervacijo za določitev števila gostov.

### 27. SpecialRequests
**Lokacija:** `/src/components/SpecialRequests.tsx`  
**Namen:** Besedilno polje za vnos posebnih zahtev ob rezervaciji.  
**Uporaba:** Uporabite na obrazcu za rezervacijo za vnos posebnih diet, alergij ali želja.

### 28. ContactForm
**Lokacija:** `/src/components/ContactForm.tsx`  
**Namen:** Obrazec za vnos kontaktnih podatkov za rezervacijo.  
**Uporaba:** Uporabite na obrazcu za rezervacijo za vnos imena, telefona in e-pošte.

### 29. ReservationSummary
**Lokacija:** `/src/components/ReservationSummary.tsx`  
**Namen:** Povzetek podatkov o rezervaciji pred potrditvijo.  
**Uporaba:** Uporabite na obrazcu za rezervacijo za pregled izbranih nastavitev.

### 30. CancellationPolicy
**Lokacija:** `/src/components/CancellationPolicy.tsx`  
**Namen:** Prikaz pravil o odpovedi rezervacije.  
**Uporaba:** Uporabite na obrazcu za rezervacijo za seznanitev uporabnika s pogoji odpovedi.

### 31. TermsAgreement
**Lokacija:** `/src/components/TermsAgreement.tsx`  
**Namen:** Potrditveno polje za strinjanje s pogoji uporabe in pravili o zasebnosti.  
**Uporaba:** Uporabite na obrazcu za rezervacijo pred potrditvijo.

### 32. ReservationFooter
**Lokacija:** `/src/components/ReservationFooter.tsx`  
**Namen:** Spodnji pritrjeni element s povzetkom rezervacije in gumbom za potrditev.  
**Uporaba:** Uporabite na dnu strani za rezervacijo za dokončanje postopka.

## Komponente za potrditev rezervacije

### 37. ConfirmationNavBar
**Lokacija:** `/src/components/ConfirmationNavBar.tsx`  
**Namen:** Navigacijska vrstica za stran s potrditvijo rezervacije z gumboma za zapiranje in deljenje.  
**Uporaba:** Uporabite na vrhu strani za potrditev rezervacije.

### 38. ConfirmationSuccess
**Lokacija:** `/src/components/ConfirmationSuccess.tsx`  
**Namen:** Komponenta za prikaz sporočila o uspešni rezervaciji z ikono in besedilom.  
**Uporaba:** Uporabite na vrhu strani za potrditev rezervacije za jasen prikaz uspeha.

### 39. ReservationCard
**Lokacija:** `/src/components/ReservationCard.tsx`  
**Namen:** Kartica za prikaz podrobnosti o potrjeni rezervaciji (restavracija, datum, čas, številka rezervacije, QR koda).  
**Uporaba:** Uporabite na strani za potrditev rezervacije za celovit pregled rezervacije.

### 40. QuickActions
**Lokacija:** `/src/components/QuickActions.tsx`  
**Namen:** Gumbi za hitre akcije (dodaj v koledar, navigacija, uredi) povezane z rezervacijo.  
**Uporaba:** Uporabite na strani za potrditev rezervacije za hitro izvedbo pogostih akcij.

### 41. CancellationInfo
**Lokacija:** `/src/components/CancellationInfo.tsx`  
**Namen:** Prikaz informacij o pravilih in pogojih za odpoved rezervacije z rokom odpovedi.  
**Uporaba:** Uporabite na strani za potrditev rezervacije za informiranje uporabnika o pravilih odpovedi.

### 42. ReservationDetails
**Lokacija:** `/src/components/ReservationDetails.tsx`  
**Namen:** Podrobnejši prikaz podatkov o rezervaciji, vključno s kontaktnimi podatki restavracije in posebnimi zahtevami.  
**Uporaba:** Uporabite na strani za potrditev rezervacije za prikaz dodatnih informacij o rezervaciji.

### 43. CancellationFooter
**Lokacija:** `/src/components/CancellationFooter.tsx`  
**Namen:** Noga s gumbom za odpoved rezervacije.  
**Uporaba:** Uporabite na dnu strani za potrditev rezervacije za omogočanje odpovedi.

## Komponente za zgodovino rezervacij

### 45. ReservationsNavBar
**Lokacija:** `/src/components/ReservationsNavBar.tsx`  
**Namen:** Navigacijska vrstica za stran z zgodovino rezervacij z naslovom in gumbi za filtriranje in pomoč.  
**Uporaba:** Uporabite na vrhu strani z zgodovino rezervacij.

### 46. ReservationsTabs
**Lokacija:** `/src/components/ReservationsTabs.tsx`  
**Namen:** Zavihki za preklapljanje med prihajajočimi in preteklimi rezervacijami.  
**Uporaba:** Uporabite pod navigacijsko vrstico na strani z zgodovino rezervacij.

### 47. ReservationHistoryCard
**Lokacija:** `/src/components/ReservationHistoryCard.tsx`  
**Namen:** Kartica za prikaz podatkov o posamezni rezervaciji z možnostmi za upravljanje.  
**Uporaba:** Uporabite za prikaz posamezne rezervacije v seznamu rezervacij.

### 48. ReservationsList
**Lokacija:** `/src/components/ReservationsList.tsx`  
**Namen:** Seznam rezervacij, ki prikazuje prihajajoče ali pretekle rezervacije po skupinah.  
**Uporaba:** Uporabite na strani z zgodovino rezervacij za prikaz rezervacij.

### 49. EmptyReservations
**Lokacija:** `/src/components/EmptyReservations.tsx`  
**Namen:** Prikaz praznega stanja, ko uporabnik nima nobenih rezervacij.  
**Uporaba:** Uporabite na strani z zgodovino rezervacij, ko ni rezervacij.

## Komponente za iskanje in filtriranje

### 50. SearchNavBar
**Lokacija:** `/src/components/SearchNavBar.tsx`  
**Namen:** Navigacijska vrstica za stran z iskanjem, z naslovom in gumbi za ponastavitev filtrov in pomoč.  
**Uporaba:** Uporabite na vrhu strani za iskanje in filtriranje restavracij.

### 51. AdvancedSearchBar
**Lokacija:** `/src/components/AdvancedSearchBar.tsx`  
**Namen:** Napredno iskalno polje z možnostjo čiščenja vnosa.  
**Uporaba:** Uporabite na vrhu strani za iskanje, ko želite omogočiti iskanje po imenih restavracij ali jedi.

### 52. FilterHeader
**Lokacija:** `/src/components/FilterHeader.tsx`  
**Namen:** Glava sekcije filtrov z naslovom in gumbom za ponastavitev.  
**Uporaba:** Uporabite kot uvod v sekcijo filtrov na strani za iskanje.

### 53. LocationFilter
**Lokacija:** `/src/components/LocationFilter.tsx`  
**Namen:** Filter za izbiro lokacije z vnosnim poljem in hitro izbiro priljubljenih lokacij.  
**Uporaba:** Uporabite v sekciji filtrov za filtriranje restavracij po lokaciji.

### 54. CuisineFilterGrid
**Lokacija:** `/src/components/CuisineFilterGrid.tsx`  
**Namen:** Mreža izbirnih polj za filtriranje po vrstah kuhinje.  
**Uporaba:** Uporabite v sekciji filtrov za izbiro željenih vrst kuhinj.

### 55. PriceRangeFilter
**Lokacija:** `/src/components/PriceRangeFilter.tsx`  
**Namen:** Filter za izbiro cenovnih razredov restavracij (od € do €€€€).  
**Uporaba:** Uporabite v sekciji filtrov za filtriranje po cenovnem razredu.

### 56. RatingSlider
**Lokacija:** `/src/components/RatingSlider.tsx`  
**Namen:** Drsnik za filtriranje restavracij po minimalni oceni.  
**Uporaba:** Uporabite v sekciji filtrov za filtriranje restavracij po minimalni oceni.

### 57. AdditionalOptionsFilter
**Lokacija:** `/src/components/AdditionalOptionsFilter.tsx`  
**Namen:** Skupina potrditvenih polj za dodatne možnosti filtriranja (odprto zdaj, parkirišče, ipd.).  
**Uporaba:** Uporabite v sekciji filtrov za bolj natančno filtriranje restavracij.

### 58. SearchResultsHeader
**Lokacija:** `/src/components/SearchResultsHeader.tsx`  
**Namen:** Glava sekcije rezultatov iskanja z naslovom in izbirnikom za razvrščanje.  
**Uporaba:** Uporabite kot uvod v sekcijo rezultatov iskanja.

### 59. ActiveFiltersDisplay
**Lokacija:** `/src/components/ActiveFiltersDisplay.tsx`  
**Namen:** Prikaz aktivnih filtrov in možnost njihove odstranitve.  
**Uporaba:** Uporabite nad rezultati iskanja za prikaz in hitro odstranjevanje aplikaciranih filtrov.

### 60. SearchRestaurantCard
**Lokacija:** `/src/components/SearchRestaurantCard.tsx`  
**Namen:** Razširjena kartica restavracije s podrobnostmi za prikaz v rezultatih iskanja.  
**Uporaba:** Uporabite za prikaz posamezne restavracije v rezultatih iskanja.

### 61. LoadMoreButton
**Lokacija:** `/src/components/LoadMoreButton.tsx`  
**Namen:** Gumb za nalaganje dodatnih rezultatov iskanja.  
**Uporaba:** Uporabite na koncu seznama rezultatov iskanja za prikaz več restavracij.

## Strani aplikacije

### 33. HomePage
**Lokacija:** `/src/pages/HomePage.tsx`  
**Namen:** Glavna stran aplikacije s seznamom priporočenih restavracij, hitrimi filtri in kategorijami.  
**Uporaba:** Uporabite kot začetno stran aplikacije.

### 34. RestaurantDetailPage
**Lokacija:** `/src/pages/RestaurantDetailPage.tsx`  
**Namen:** Stran s podrobnimi informacijami o izbrani restavraciji.  
**Uporaba:** Uporabite za prikaz vseh podatkov o posamezni restavraciji in za začetek rezervacije.

### 35. ReservationPage
**Lokacija:** `/src/pages/ReservationPage.tsx`  
**Namen:** Stran za vnos vseh podatkov, potrebnih za rezervacijo.  
**Uporaba:** Uporabite za dokončanje rezervacije po izbiri restavracije.

### 36. ConfirmationPage
**Lokacija:** `/src/pages/ConfirmationPage.tsx`  
**Namen:** Stran za prikaz potrditve uspešno opravljene rezervacije s podrobnostmi in možnostmi za upravljanje.  
**Uporaba:** Prikaže se po uspešni potrditvi rezervacije in omogoča upravljanje z rezervacijo.

### 37. ReservationsHistoryPage
**Lokacija:** `/src/pages/ReservationsHistoryPage.tsx`  
**Namen:** Stran za prikaz zgodovine rezervacij s funkcijami za upravljanje z rezervacijami.  
**Uporaba:** Omogoča pregled vseh prihajajočih in preteklih rezervacij ter njihovo upravljanje.

### 50. SearchPage
**Lokacija:** `/src/pages/SearchPage.tsx`  
**Namen:** Stran za podrobno iskanje in filtriranje restavracij po različnih kriterijih.  
**Uporaba:** Omogoča uporabnikom naprednejše iskanje restavracij po imenu, lokaciji, vrsti kuhinje, cenovnem razredu, oceni in drugih lastnostih.

## Glavna aplikacija

### 44. App
**Lokacija:** `/src/App.tsx`  
**Namen:** Glavna komponenta aplikacije, ki upravlja navigacijo med stranmi.  
**Uporaba:** Služi kot vstopna točka in vsebuje navigacijski sistem celotne aplikacije.

---

## Uporaba tipov

Aplikacija uporablja tipsko varne komponente z uporabo TypeScript. Vsi tipi so definirani v datoteki `/src/types/index.ts` in vključujejo:

- `Restaurant`: Osnovni podatki o restavraciji
- `RestaurantDetail`: Razširjeni podatki o restavraciji
- `OpeningHour`: Odpiralni čas
- `Feature`: Značilnost restavracije
- `MenuSection`: Sekcija menija
- `Dish`: Jed na meniju
- `Review`: Mnenje uporabnika
- `Category`: Kategorija kuhinje
- `NavItem`: Element navigacije
- `TimeSlot`: Termin za rezervacijo

## Smernice za uporabo

1. **Konsistentnost v dizajnu:** Vse komponente so oblikovane v skladu z enotnim dizajnom, uporabite jih takšne, kot so, za ohranitev konsistentnosti.
2. **Dostopnost:** Komponente vsebujejo ustrezne ARIA atribute za boljšo dostopnost. Pri uporabi jih ohranite.
3. **Odzivnost:** Komponente so prilagojene za mobilne naprave, vendar se prikažejo v fiksni velikosti na večjih zaslonih.
4. **Material ikone:** Komponente uporabljajo Material Icons knjižnico, poskrbite, da je vključena v projekt.
5. **TailwindCSS:** Stiliziranje temelji na TailwindCSS, poskrbite, da je pravilno konfiguriran v projektu.

## Navigacija med stranmi

Aplikacija vsebuje naslednje navigacijske poti:

1. **Domov → Podrobnosti restavracije**: Ob kliku na kartico restavracije
2. **Podrobnosti restavracije → Rezervacija**: Ob kliku na gumb "Rezerviraj" v ReservationWidget komponenti
3. **Rezervacija → Potrditev rezervacije**: Po uspešno izpolnjenem rezervacijskem obrazcu
4. **Potrditev rezervacije → Domov**: Ob kliku na gumb za zapiranje
5. **Domov → Zgodovina rezervacij**: Z navigacijo preko Footer komponente
6. **Zgodovina rezervacij → Podrobnosti rezervacije**: Ob kliku na "Uredi" pri posamezni rezervaciji
7. **Podrobnosti rezervacije → Domov**: Z navigacijo preko gumba za nazaj

Koda za implementacijo navigacije je del `NavigationContext` in se uporablja preko `navigateTo` funkcije v App.tsx. Na primer:

```typescript
const { navigateTo } = useContext(NavigationContext);

const handleButtonClick = () => {
  navigateTo('pageName'); // kjer je pageName ena izmed: 'home', 'detail', 'reservation', 'confirmation', 'reservations'
};
```