== Имплементација на случаи на употреба ==

На следната табела се прикажани сработените кориснички сценарија:

|| '''ID''' || '''Use Case''' ||
|| 1 || Регистрација ||
|| 2 || Најава ||
|| 3 || Преглед на почетната страна ||
|| 4 || Филтрирање производи  ||
|| 5 || Пребарување производи  ||
|| 6 || Преглед на панелот на направени нарачки ||
|| 7 || Уреди производ ||
|| 8 || Смени статус на нарачка ||
|| 9 || Додавање во кошничка ||
|| 10 || Поднесување нарачка ||
|| 11 || Преглед на мои нарачки ||
|| 12 || Разгледај продукт ||
|| 13 || Остави оценка (rating, review) ||

[[BR]]



== Нерегистриран Корисник ==

=== Use Case ID: 1 – Регистрација  ===
[[Image(Registracija.png)]] [[BR]]
Корисникот го кликнува копчето за регистрација со што се извршува основна валидација на формата на клиентска страна (ако станува збор за купувач, последната селекција од регистрацијата не треба да биде селектирана). 
[[Image(registracija-osnovna validacija.png)]]
[[BR]]
Потоа аuthContext праќа POST барање до backend (аuth.js/register). По успешен одговор од серверот, аuthContext ја зачувува корисничката информација во својот локален state и ја запишува во localStorage за постојана сесија и побрзо ажурирање.
[[BR]]
[[Image(register authcontext.png)]]
[[BR]]
На серверот се извршува повторна валидација и проверка дали веќе постои корисник со дадените податоци. Ако валидацијата е успешна, backend креира нов запис во табелата users и враќа информации за корисникот. На серверот се валида, проверува дали корисникот постои, хашира лозинка и креира запис во датабазата.
[[BR]]
[[Image(register backend.png)]]

[[Image()]]
[[Image()]]
[[Image()]]
[[Image()]]
[[Image()]]



=== Use Case ID: 2 – Најава  ===
Корисникот притиска „Log in“ копче на страницата. 
[[BR]]
[[Image(Najava.png)]] [[BR]]
[[Image(login code.png)]]
Клиентот повикува login() од аuthContext, која потоа праќа POST барање /api/auth/login до backend. Кај фронтенд, при успех кај серверот, аuthContext ја обновува состојбата (и запишува во localStorage-за повторно вчитување по refresh).
[[BR]]
[[Image(login authcontext.png)]]

Backend контролер ја верификува лозинката, креира JWT и враќа user + token. 
[[Image(login backend.png)]]

== Најавен Корисник ==

=== Use Case ID: 3 – Преглед на почетната страна ===
[[Image(Home page.jpg)]]
[[Image(home.png)]]

=== Use Case ID: 4 – Филтрирање производи ===
Корисникот внесува текст во полето за пребарување и/или избира категорија. 
[[Image(Filtriraj.png)]]

Компонентата го гради објектот со филтри и повикува fetchCategories(filters).
ProductContext праќа HTTP GET до backend.
[[Image(filtriraj.png)]]

Backend враќа филтриран список на производи. Kонтекстот го ажурира products и loading. Home компонентата се ререндерира и прикажува филтрираните резултати.
[[Image()]] 
[[Image(home.png)]]

=== Use Case ID: 5 – Пребарување производи ===
[[Image(Prebaraj.png)]]

Принципот на функционирање е ист како и кај филтрирање, само што наместо fetchCategories() се повикува fetchProduct().
[[Image(prebaraj.png)]]
[[Image(home.png)]]

=== Use Case ID: 6 – Преглед на панелот на направени нарачки ===
Ги прикажува сите нарачки кои кои содржат производи од логираниот продавач. Се прави GET повик кон backend (коментар кажува /orders/admin/all) и се добиваат нарачките. По добивање, може да се применува клиентско филтрирање со помош на функцијата useCallback се филтрира со зависност филтер по статус (all, pending, confirmed, processing, shipped, delivered, cancelled). 
[[Image(seller panel-all orders.png)]]

=== Use Case ID: 7 – Уреди производ ===


=== Use Case ID: 8 – Смени статус на нарачка ===
[[Image()]]
Eve kako izgleda backend-ot za da se smeni statusot.
[[BR]]
[[Image(smeni status.png)]]

=== Use Case ID: 9 – Додавање во кошничка ===
Порака и изглед на кошничката по додавањето продукти.
[[BR]]
[[Image(Dodaden vo koshnicka-kupuvac.jpg)]]
[[Image()]]



=== Use Case ID: 10 – Поднесување нарачка ===
Поднесување на нарачката и приказ на историјата на нарачки.
[[BR]]
[[Image(Place Order-kupuvac.png)]]
[[Image()]]
[[Image()]]

=== Use Case ID: 11 – Преглед на мои нарачки ===
Прво се појавува можност за разгледување нарачката, која е во состојба на чекање (pending).
[[BR]]
[[Image(Moi naracki, prazni-kupuvac.png)]]

=== Use Case ID: 12 – Разгледај продукт ===
[[Image()]]
[[Image()]]

=== Use Case ID: 13 – Остави оценка (rating, review) ===
[[Image()]]
[[Image()]]