Index: phonelux-frontend/src/components/CheaperOffersComponent/CheaperOffersComponent.css
===================================================================
--- phonelux-frontend/src/components/CheaperOffersComponent/CheaperOffersComponent.css	(revision 7e88e4629bb341cb3730a26b5197ab06068ce0db)
+++ phonelux-frontend/src/components/CheaperOffersComponent/CheaperOffersComponent.css	(revision 34950c66561199fd9a1d153e0d90d545949de23c)
@@ -9,4 +9,5 @@
     height: 500px;
     overflow: scroll;
+    border: 1px solid black;
 }
 
Index: phonelux-frontend/src/components/CompareOffersComponent/CompareOffersComponent.css
===================================================================
--- phonelux-frontend/src/components/CompareOffersComponent/CompareOffersComponent.css	(revision 34950c66561199fd9a1d153e0d90d545949de23c)
+++ phonelux-frontend/src/components/CompareOffersComponent/CompareOffersComponent.css	(revision 34950c66561199fd9a1d153e0d90d545949de23c)
@@ -0,0 +1,72 @@
+.compare-offers-header{
+    background-color: #B6E2C8;
+    justify-content: center;
+    align-content: center;
+    margin-top: -30px;
+    width: 100%;
+    display: flex;
+    font-size: 18px;
+}
+.compare-offers-header-text{
+    width: fit-content;
+}
+
+.compare-offers-table{
+    border-collapse: collapse;
+    width: 100%;
+    table-layout: fixed;
+}
+
+
+.compare-offers-table-row:nth-of-type(even){
+    background-color: #eef2f0;
+}
+
+.compare-offers-table-row{
+    border: 1px solid gainsboro;
+    padding: 20px ;
+}
+
+.compare-offers-table td{
+    text-align: center;
+    border: 1px solid gainsboro;
+    word-wrap: break-word;
+}
+
+
+.compare-offers-table-row td a{
+    text-decoration: none;
+}
+
+.compare-offers-table th{
+    background-color: #afd3b4
+}
+
+.no-offers-saved-message{
+    background-color: #afd3b4;
+    padding: 20px;
+    width: 30%;
+    text-align: center;
+    border-radius: 50px;
+    border: 1px solid black;
+    margin-left: auto;
+    margin-right: auto;
+    margin-top: 150px;
+}
+
+.compare-offer-table-headers{
+    width: 200px;
+}
+
+
+.compare-offers-top-headers{
+    background-color: #afd3b4;
+    font-weight: bold;
+}
+.compare-offers-top-headers:hover{
+    cursor: pointer;
+    background-color: rgb(203, 56, 56);
+    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
+    transition: box-shadow 0.5s, background-color 0.5s ;
+}
+
Index: phonelux-frontend/src/components/CompareOffersComponent/CompareOffersComponent.js
===================================================================
--- phonelux-frontend/src/components/CompareOffersComponent/CompareOffersComponent.js	(revision 34950c66561199fd9a1d153e0d90d545949de23c)
+++ phonelux-frontend/src/components/CompareOffersComponent/CompareOffersComponent.js	(revision 34950c66561199fd9a1d153e0d90d545949de23c)
@@ -0,0 +1,173 @@
+import React, { Component } from 'react'
+import HeaderComponent from '../HeaderComponent/HeaderComponent'
+import './CompareOffersComponent.css'
+import CompareIcon from '@mui/icons-material/Compare';
+import RemoveCircleIcon from '@mui/icons-material/RemoveCircle';
+import axios from 'axios';
+import Tippy from '@tippyjs/react';
+
+export class CompareOffersComponent extends Component {
+
+    constructor(props) {
+      super(props)
+    
+      this.state = {
+         offersToCompare: []
+      }
+    }
+    componentDidMount() {
+        if(localStorage.getItem('offersToCompare') && JSON.parse(localStorage.getItem('offersToCompare')).length >0)
+        {
+            let offersToCompareString = JSON.parse(localStorage.getItem('offersToCompare')).join(',')
+
+            var config = {
+                method: 'get',
+                url: '/multipleoffers?offerIds='+offersToCompareString,
+                headers: { }
+            };
+            
+            axios(config)
+            .then(response => {
+                this.setState({
+                    offersToCompare: response.data
+                })
+            })
+            .catch(error => {
+                console.log(error);
+            });
+        }
+    }
+
+    handleRemove = (event) => {
+        let offerToRemove = event.target.getAttribute('offerid')
+        let offers = JSON.parse(localStorage.getItem('offersToCompare'))
+        localStorage.setItem('offersToCompare',JSON.stringify(offers.filter(offer => offer!=offerToRemove)))
+        this.setState({
+            offersToCompare: this.state.offersToCompare.filter(offer => offer.id != offerToRemove)
+        })
+    }
+
+    
+  render() {
+    console.log(this.state)
+    return (
+      <div className='compare-offers-main'>
+        <HeaderComponent/>
+        <div className='compare-offers-header'>
+            <h1 className='compare-offers-header-text'>
+                Спореди понуди
+            </h1>
+        </div>
+        {(() => {
+            if(localStorage.getItem('offersToCompare') && JSON.parse(localStorage.getItem('offersToCompare')).length >0)
+            {
+                return  <table cellPadding={20} className='compare-offers-table'>
+                <tbody>
+                    <tr className='compare-offers-table-row'>
+                        <th className='compare-offer-table-headers'></th>
+                        {
+                            this.state.offersToCompare.map((offer,idx) => 
+                            <Tippy placement='bottom' content='Отстранете ја понудата'>
+                            <td onClick={this.handleRemove} className='compare-offers-top-headers' offerid={offer.id} 
+                            key={idx}>Понуда #{idx+1}</td>
+                            </Tippy>
+                            )
+                        }
+                    </tr>
+                    <tr className='compare-offers-table-row'>
+                        <th className='compare-offer-table-headers'>Име на понуда</th>
+                        {
+                            this.state.offersToCompare.map((offer,idx) => <td key={idx}><a href={offer.offer_url}>{offer.offer_name}</a></td>)
+                        }
+                    </tr>
+                    <tr className='compare-offers-table-row'>
+                        <th className='compare-offer-table-headers'>Продавница</th>
+                        {
+                        this.state.offersToCompare.map((offer,idx) => <td key={idx}><b>{offer.offer_shop}</b></td>)
+                        }
+                    </tr>
+                    <tr className='compare-offers-table-row'>
+                        <th className='compare-offer-table-headers'>Цена</th>
+                        {
+                        this.state.offersToCompare.map((offer,idx) => <td key={idx}>{offer.price}</td>)
+                        }
+                    </tr>
+                    <tr className='compare-offers-table-row'>
+                        <th className='compare-offer-table-headers'>РАМ меморија</th>
+                        {
+                        this.state.offersToCompare.map((offer,idx) => <td key={idx}>{offer.ram_memory == null || 
+                            offer.ram_memory == '' ? '/' : offer.ram_memory}</td>)
+                        }
+                    </tr>
+                    <tr className='compare-offers-table-row'>
+                        <th className='compare-offer-table-headers'>РОМ меморија</th>
+                        {
+                        this.state.offersToCompare.map((offer,idx) => <td key={idx}>{offer.rom_memory == null || 
+                            offer.rom_memory == '' ? '/' : offer.rom_memory}</td>)
+                        }
+                    </tr>
+                    <tr className='compare-offers-table-row'>
+                        <th className='compare-offer-table-headers'>Предна камера</th>
+                        {
+                        this.state.offersToCompare.map((offer,idx) => <td key={idx}>{offer.front_camera == null || 
+                            offer.front_camera == '' ? '/' : offer.front_camera}</td>)
+                        }
+                    </tr>
+                    <tr className='compare-offers-table-row'>
+                        <th className='compare-offer-table-headers'>Задна камера</th>
+                        {
+                        this.state.offersToCompare.map((offer,idx) => <td key={idx}>{offer.back_camera == null || 
+                            offer.back_camera == '' ? '/' : offer.back_camera}</td>)
+                        }
+                    </tr>
+                    <tr className='compare-offers-table-row'>
+                        <th className='compare-offer-table-headers'>Процесор</th>
+                        {
+                        this.state.offersToCompare.map((offer,idx) => <td key={idx}>{offer.cpu == null || 
+                            offer.cpu == '' ? '/' : offer.cpu}</td>)
+                        }
+                    </tr>
+                    <tr className='compare-offers-table-row'>
+                        <th className='compare-offer-table-headers'>Чипсет</th>
+                        {
+                        this.state.offersToCompare.map((offer,idx) => <td key={idx}>{offer.chipset == null || 
+                            offer.chipset == '' ? '/' : offer.chipset}</td>)
+                        }
+                    </tr>
+                    <tr className='compare-offers-table-row'>
+                        <th className='compare-offer-table-headers'>Оперативен систем</th>
+                        {
+                        this.state.offersToCompare.map((offer,idx) => <td key={idx}>{offer.operating_system == null || 
+                            offer.operating_system == '' ? '/' : offer.operating_system}</td>)
+                        }
+                    </tr>
+                    <tr className='compare-offers-table-row'>
+                        <th className='compare-offer-table-headers'>Батерија</th>
+                        {
+                        this.state.offersToCompare.map((offer,idx) => <td key={idx}>{offer.battery == null || 
+                            offer.battery == '' ? '/' : offer.battery}</td>)
+                        }
+                    </tr>
+                    <tr className='compare-offers-table-row'>
+                        <th className='compare-offer-table-headers'>Боја</th>
+                        {
+                        this.state.offersToCompare.map((offer,idx) => <td key={idx}>{offer.color == null || 
+                            offer.color == '' ? '/' : offer.color}</td>)
+                        }
+                    </tr>
+                </tbody>
+                </table>
+            }
+            else{
+                return <h1 className='no-offers-saved-message'>Нема зачувано понуди</h1>
+            }
+            
+      })()}
+       
+      </div>
+    )
+  }
+}
+
+export default CompareOffersComponent
+
Index: phonelux-frontend/src/components/EditOfferComponent/EditOfferComponent.css
===================================================================
--- phonelux-frontend/src/components/EditOfferComponent/EditOfferComponent.css	(revision 7e88e4629bb341cb3730a26b5197ab06068ce0db)
+++ phonelux-frontend/src/components/EditOfferComponent/EditOfferComponent.css	(revision 34950c66561199fd9a1d153e0d90d545949de23c)
@@ -67,3 +67,51 @@
     background-color: rgb(230, 232, 230);
     font-size: 22px;
+    text-align: center;
+    
 }
+
+.edit-offer-submit-button{
+    font-size: 20px;
+    padding: 10px;
+    background-color: #B6E2C8;
+    border-radius: 20px;
+    border: 1px solid black;
+    width: 20%;
+    margin-bottom: 50px;
+    margin-right: 130px;
+}
+
+
+.edit-offer-submit-button:hover{
+    cursor: pointer;
+    background-color: rgb(166, 201, 171);
+    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
+    transition: box-shadow 0.5s, background-color 0.5s ;
+}
+
+.edit-offer-button-wrapper{
+    margin-top: -25px;
+    display: flex;
+    justify-content: end;
+}
+
+.edit-offer-offerimage{
+    width: 40%;
+    height: 40%;
+    display: block;
+}
+
+.edit-offer-imageurl-input{
+    width: 80%;
+    font-size: 22px;
+    background-color: rgb(238, 240, 238);
+    border: 1px solid black;
+    text-align: center;
+    padding: 5px;
+}
+
+.edit-offer-offerimage-wrapper{
+    display: flex;
+    width: 100%;
+    justify-content: center;
+}
Index: phonelux-frontend/src/components/EditOfferComponent/EditOfferComponent.js
===================================================================
--- phonelux-frontend/src/components/EditOfferComponent/EditOfferComponent.js	(revision 7e88e4629bb341cb3730a26b5197ab06068ce0db)
+++ phonelux-frontend/src/components/EditOfferComponent/EditOfferComponent.js	(revision 34950c66561199fd9a1d153e0d90d545949de23c)
@@ -1,4 +1,6 @@
+import { CollectionsOutlined } from '@mui/icons-material'
 import axios from 'axios'
 import React, { Component } from 'react'
+import UserContext from '../../context/UserContext'
 import HeaderComponent from '../HeaderComponent/HeaderComponent'
 import './EditOfferComponent.css'
@@ -15,4 +17,14 @@
 
     componentDidMount(){
+        // if(!localStorage.getItem('token'))
+        // {
+        //     window.location.href = "/"
+        // }
+
+        // if(this.context.role != 'ADMIN' && this.context.role != 'SUPERADMIN')
+        // {
+        //     window.location.href = "/"
+        // }
+
         var config = {
             method: 'get',
@@ -32,77 +44,191 @@
           
     }
+
+    setInputValue = (e) => {
+        let editedOffer = Object.assign(this.state.offer,{[e.target.name]: e.target.value})
+        this.setState({
+            offer: editedOffer
+        })
+    }
+
+    handleSubmit = () =>{
+        var dataToSend = JSON.stringify(this.state.offer)
+        var config = {
+            method: 'put',
+            url: '/admin/editoffer/'+this.state.offerId,
+            headers: { 
+              'Authorization': 'Bearer '+localStorage.getItem('token'),
+              'Content-Type': 'application/json'
+            },
+            data: {
+                "id" : this.state.offer.id,
+                "offer_shop" : this.state.offer.offer_shop,
+                "offer_name" : this.state.offer.offer_name,
+                "price" : this.state.offer.price,
+                "ram_memory" : this.state.offer.ram_memory,
+                "rom_memory" : this.state.offer.rom_memory,
+                "color" : this.state.offer.color,
+                "front_camera" : this.state.offer.front_camera,
+                "back_camera" : this.state.offer.back_camera,
+                "chipset" : this.state.offer.chipset,
+                "battery" : this.state.offer.battery,
+                "operating_system" : this.state.offer.operating_system,
+                "cpu" : this.state.offer.cpu,
+                "image_url" : this.state.offer.image_url,
+                "offer_url" : this.state.offer.offer_url,
+                "last_updated" : this.state.offer.last_updated,
+                "is_validated" : this.state.offer.is_validated,
+                "offer_description" : this.state.offer.offer_description,
+                "offer_shop_code" : this.state.offer.offer_shop_code
+            }
+          };
+          
+          axios(config)
+          .then(response => {
+            window.location.href="/phoneoffer/"+this.state.offerId
+          })
+          .catch(error => {
+            console.log(error);
+          });
+
+          
+
+    }
     
   render() {
+    console.log(this.state)
     return (
       <div className='edit-offer-component-main'>
         <HeaderComponent/>
         <div className='edit-offer-table-wrapper'>
+
             <table className='edit-offer-table'>
                 <thead>
-                    <tr><th colSpan={2}>Измени детали за понудата</th></tr>
+                    <tr><th colSpan={2}>Понуда</th></tr>
                 </thead>
+
                 <tbody>
                     <tr className='edit-offer-table-row'>
-                        <td>Име на понуда</td>
+                        <td><b>Име на понуда</b></td>
                         <td><a href={this.state.offer == null || this.state.offer.offer_url == null ? 
-              '#' : this.state.offer.offer_url}>{this.state.offer == null || this.state.offer.offer_name == null ? 
-              '/' : this.state.offer.offer_name}</a></td>
-                    </tr>
-                    <tr className='edit-offer-table-row'>
-                        <td>Продавница</td>
+                                '#' : this.state.offer.offer_url}>{this.state.offer == null || this.state.offer.offer_name == null ? 
+                                '/' : this.state.offer.offer_name}</a>
+                        </td>
+                    </tr>
+
+                    <tr className='edit-offer-table-row'>
+                        <td><b>Продавница</b></td>
                         <td>{this.state.offer == null || 
-              this.state.offer.offer_shop == null ? '/' : this.state.offer.offer_shop}</td>
-                    </tr>
-                    <tr className='edit-offer-table-row'>
-                        <td>Цена</td>
+                                this.state.offer.offer_shop == null ? '/' : this.state.offer.offer_shop}
+                        </td>
+                    </tr>
+
+
+                    <tr className='edit-offer-table-row'>
+                        <td><b>Опис за понудата</b></td>
+                        <td>{this.state.offer == null || 
+                                this.state.offer.offer_description == null ? '/' : this.state.offer.offer_description}
+                        </td>
+                    </tr>
+                </tbody>
+
+                <thead>
+                    <tr><th colSpan={2}>Спецификации за понудата</th></tr>
+                </thead>
+
+                <tbody>
+
+                    <tr className='edit-offer-table-row'>
+                        <td><b>Цена</b></td>
                         <td><input value={this.state.offer == null || 
-              this.state.offer.price == null ? '/' : this.state.offer.price} className='edit-offer-price-input'/><span className='edit-offer-price-span'>ден.</span></td>
-                    </tr>
-                    <tr className='edit-offer-table-row'>
-                        <td>Предна камера</td>
-                        <td><textarea className='edit-offer-table-textarea'></textarea></td>
-                    </tr>
-                    <tr className='edit-offer-table-row'>
-                        <td>Задна камера</td>
-                        <td><textarea className='edit-offer-table-textarea'></textarea></td>
-                    </tr>
-                    <tr className='edit-offer-table-row'>
-                        <td>РОМ меморија</td>
-                        <td><textarea className='edit-offer-table-textarea'></textarea></td>
-                    </tr>
-                    <tr className='edit-offer-table-row'>
-                        <td>РАМ меморија</td>
-                        <td><textarea className='edit-offer-table-textarea'></textarea></td>
-                    </tr>
-                    <tr className='edit-offer-table-row'>
-                        <td>Оперативен систем</td>
-                        <td><textarea className='edit-offer-table-textarea'></textarea></td>
-                    </tr>
-                    <tr className='edit-offer-table-row'>
-                        <td>Чипсет</td>
-                        <td><textarea className='edit-offer-table-textarea'></textarea></td>
-                    </tr>
-                    <tr className='edit-offer-table-row'>
-                        <td>Процесор</td>
-                        <td><textarea className='edit-offer-table-textarea'></textarea></td>
-                    </tr>
-                    <tr className='edit-offer-table-row'>
-                        <td>Батерија</td>
-                        <td><textarea className='edit-offer-table-textarea'></textarea></td>
-                    </tr>
-                    <tr className='edit-offer-table-row'>
-                        <td>Боја</td>
-                        <td><textarea className='edit-offer-table-textarea'></textarea></td>
-                    </tr>
-                    <tr className='edit-offer-table-row'>
-                        <td>Опис</td>
-                        <td><textarea className='edit-offer-table-textarea'></textarea></td>
+              this.state.offer.price == null ? '/' : this.state.offer.price} 
+              className='edit-offer-price-input' name='price' 
+              onChange={(e) => this.setInputValue(e)}/><span className='edit-offer-price-span'>ден.</span></td>
+                    </tr>
+
+                    <tr className='edit-offer-table-row'>
+                        <td><b>Предна камера</b></td>
+                        <td><textarea className='edit-offer-table-textarea' name='front_camera' value={this.state.offer == null || 
+              this.state.offer.front_camera == null ? '/' : this.state.offer.front_camera}
+              onChange={(e) => this.setInputValue(e)}></textarea></td>
+                    </tr>
+
+                    <tr className='edit-offer-table-row'>
+                        <td><b>Задна камера</b></td>
+                        <td><textarea className='edit-offer-table-textarea' value={this.state.offer == null || 
+              this.state.offer.back_camera == null ? '/' : this.state.offer.back_camera} 
+              onChange={(e) => this.setInputValue(e)} name='back_camera'></textarea></td>
+                    </tr>
+                    <tr className='edit-offer-table-row'>
+                        <td><b>РОМ меморија</b></td>
+                        <td><textarea className='edit-offer-table-textarea' onChange={(e) => this.setInputValue(e)}
+                         name='rom_memory' value={this.state.offer == null || 
+                            this.state.offer.rom_memory == null ? '/' : this.state.offer.rom_memory}></textarea></td>
+                    </tr>
+
+                    <tr className='edit-offer-table-row'>
+                        <td><b>РАМ меморија</b></td>
+                        <td><textarea className='edit-offer-table-textarea' onChange={(e) => this.setInputValue(e)}
+                         name='ram_memory' value={this.state.offer == null || 
+                            this.state.offer.ram_memory == null ? '/' : this.state.offer.ram_memory}></textarea></td>
+                    </tr>
+
+                    <tr className='edit-offer-table-row'>
+                        <td><b>Оперативен систем</b></td>
+                        <td><textarea className='edit-offer-table-textarea' value={this.state.offer == null || 
+                            this.state.offer.operating_system == null ? '/' : this.state.offer.operating_system} name='operating_system'
+                            onChange={(e) => this.setInputValue(e)}></textarea>
+                        </td>
+                    </tr>
+
+                    <tr className='edit-offer-table-row'>
+                        <td><b>Чипсет</b></td>
+                        <td><textarea className='edit-offer-table-textarea' value={this.state.offer == null || 
+                            this.state.offer.chipset == null ? '/' : this.state.offer.chipset} name='chipset'
+                            onChange={(e) => this.setInputValue(e)}></textarea>
+                        </td>
+                    </tr>
+
+                    <tr className='edit-offer-table-row'>
+                        <td><b>Процесор</b></td>
+                        <td><textarea className='edit-offer-table-textarea' value={this.state.offer == null || 
+                            this.state.offer.cpu == null ? '/' : this.state.offer.cpu} name='cpu'
+                            onChange={(e) => this.setInputValue(e)}></textarea>
+                        </td>
+                    </tr>
+
+                    <tr className='edit-offer-table-row'>
+                        <td><b>Батерија</b></td>
+                        <td><textarea className='edit-offer-table-textarea' value={this.state.offer == null || 
+                            this.state.offer.battery == null ? '/' : this.state.offer.battery} name='battery'
+                            onChange={(e) => this.setInputValue(e)}></textarea></td>
+                    </tr>
+
+                    <tr className='edit-offer-table-row'>
+                        <td><b>Боја</b></td>
+                        <td><textarea className='edit-offer-table-textarea' name='color' value={this.state.offer == null || 
+                            this.state.offer.color == null ? '/' : this.state.offer.color}
+                            onChange={(e) => this.setInputValue(e)}></textarea></td>
+                    </tr>
+
+                    <tr className='edit-offer-table-row'>
+                        <td><b>Линк од слика на мобилниот телефон од понудата</b></td>
+                        <td>
+                            <div className='edit-offer-offerimage-wrapper'>
+                            <img className='edit-offer-offerimage' src={this.state.offer == null || 
+                                this.state.offer.image_url == null ? '#' : this.state.offer.image_url}/>
+                            </div>
+                            <input value={this.state.offer == null || 
+                                this.state.offer.image_url == null ? '/' : this.state.offer.image_url} 
+                                className='edit-offer-imageurl-input' name='image_url' 
+                                onChange={(e) => this.setInputValue(e)}/>
+                        </td>
                     </tr>
                 </tbody>
             </table>
-
         </div>
-
-
+        <div className='edit-offer-button-wrapper'>
+        <button className='edit-offer-submit-button' onClick={this.handleSubmit}><b>Измени</b></button>
+        </div>
       </div>
       
@@ -111,3 +237,5 @@
 }
 
+EditOfferComponent.contextType = UserContext
+
 export default EditOfferComponent
Index: phonelux-frontend/src/components/FiltersComponents/FilterPriceComponent.js
===================================================================
--- phonelux-frontend/src/components/FiltersComponents/FilterPriceComponent.js	(revision 7e88e4629bb341cb3730a26b5197ab06068ce0db)
+++ phonelux-frontend/src/components/FiltersComponents/FilterPriceComponent.js	(revision 34950c66561199fd9a1d153e0d90d545949de23c)
@@ -11,5 +11,6 @@
   
     this.state = {
-      value: [1000,150000],
+      value: localStorage.getItem('priceRange') ? [parseInt(localStorage.getItem('priceRange').split('-')[0]), 
+      parseInt(localStorage.getItem('priceRange').split('-')[1])] : [1000,150000],
       minValue: 0,
       maxValue: 0
@@ -39,4 +40,5 @@
   handleChange = () => {
     this.props.changeHandler({priceRange: this.state.value.join('-')})
+    localStorage.setItem('priceRange',this.state.value.join('-'))
   }
 
Index: phonelux-frontend/src/components/FiltersComponents/FilterSelectComponent.css
===================================================================
--- phonelux-frontend/src/components/FiltersComponents/FilterSelectComponent.css	(revision 7e88e4629bb341cb3730a26b5197ab06068ce0db)
+++ phonelux-frontend/src/components/FiltersComponents/FilterSelectComponent.css	(revision 34950c66561199fd9a1d153e0d90d545949de23c)
@@ -7,2 +7,6 @@
 
 }
+
+.list-item-text-filters span{
+    overflow-x: scroll;
+}
Index: phonelux-frontend/src/components/FiltersComponents/FilterSelectComponent.js
===================================================================
--- phonelux-frontend/src/components/FiltersComponents/FilterSelectComponent.js	(revision 7e88e4629bb341cb3730a26b5197ab06068ce0db)
+++ phonelux-frontend/src/components/FiltersComponents/FilterSelectComponent.js	(revision 34950c66561199fd9a1d153e0d90d545949de23c)
@@ -15,7 +15,8 @@
     constructor(props) {
       super(props)
-        
+        const {type} = this.props
+        console.log(type)
       this.state = {
-         pickedItems: [],
+         pickedItems: localStorage.getItem(type) ? localStorage.getItem(type).split(',') : [],
          items: [],
          type: '',
@@ -37,18 +38,87 @@
         }
 
-
         let endpoint 
-        if(this.props.type == 'brands')
-        {
-          endpoint = '/brands'
+        switch (this.props.type) {
+
+          case 'brands':
+            endpoint = '/brands'
           this.setState({
             type: 'Брендови'
           })
-        }
-        else{
-          endpoint = '/shops'
+            break;
+          case 'shops':
+            endpoint = '/shops'
           this.setState({
             type: 'Продавници'
           })
+            break;
+
+          case 'ram':
+            endpoint = '/specifications/ram'
+          this.setState({
+            type: 'РАМ меморија'
+          })
+            break;
+
+          case 'rom':
+            endpoint = '/specifications/rom'
+          this.setState({
+            type: 'РОМ меморија'
+          })
+            break;
+
+           case 'frontcamera':
+            endpoint = '/specifications/frontcamera'
+          this.setState({
+            type: 'Предна камера'
+          })
+            break;
+
+           case 'backcamera':
+            endpoint = '/specifications/backcamera'
+          this.setState({
+            type: 'Задна камера'
+          })
+            break;
+
+             case 'chipset':
+            endpoint = '/specifications/chipset'
+          this.setState({
+            type: 'Чипсет'
+          })
+            break;
+
+           case 'cpu':
+            endpoint = '/specifications/cpu'
+          this.setState({
+            type: 'Процесор'
+          })
+            break;
+
+
+         case 'operatingsystem':
+            endpoint = '/specifications/operatingsystem'
+          this.setState({
+            type: 'Оперативен систем'
+          })
+            break;
+
+
+         case 'color':
+            endpoint = '/specifications/color'
+          this.setState({
+            type: 'Боја'
+          })
+            break;
+
+            case 'battery':
+              endpoint = '/specifications/battery'
+            this.setState({
+              type: 'Батерија'
+            })
+              break;
+
+          default:
+            break;
         }
 
@@ -63,22 +133,82 @@
             pickedItems: typeof value === 'string' ? value.split(',') : value
         }, ()=>{
-          if(this.props.type == 'brands')
-          {
-            this.props.changeHandler({brands: this.state.pickedItems.join(',')})
+
+          switch (this.props.type) {
+            case 'brands':
+              this.props.changeHandler({brands: this.state.pickedItems.join(',')})
+              localStorage.setItem('brands', this.state.pickedItems.join(','))
+              break;
+
+            case 'shops':
+              this.props.changeHandler({shops: this.state.pickedItems.join(',')})
+              localStorage.setItem('shops', this.state.pickedItems.join(','))
+              break;
+
+            case 'ram':
+              this.props.changeHandler({ram: this.state.pickedItems.join(',')})
+              localStorage.setItem('ram', this.state.pickedItems.join(','))
+              break;
+            case 'rom':
+              this.props.changeHandler({rom: this.state.pickedItems.join(',')})
+              localStorage.setItem('rom', this.state.pickedItems.join(','))
+              break;
+            case 'frontcamera':
+              this.props.changeHandler({frontcamera: this.state.pickedItems.join(',')})
+              localStorage.setItem('frontcamera', this.state.pickedItems.join(','))
+              break;
+
+            case 'backcamera':
+              this.props.changeHandler({backcamera: this.state.pickedItems.join(',')})
+              localStorage.setItem('backcamera', this.state.pickedItems.join(','))
+              break;
+
+            case 'chipset':
+              this.props.changeHandler({chipset: this.state.pickedItems.join(',')})
+              localStorage.setItem('chipset', this.state.pickedItems.join(','))
+              break;
+
+            case 'cpu':
+              this.props.changeHandler({cpu: this.state.pickedItems.join(',')})
+              localStorage.setItem('cpu', this.state.pickedItems.join(','))
+              break;
+
+            case 'operatingsystem':
+              this.props.changeHandler({operatingsystem: this.state.pickedItems.join(',')})
+              localStorage.setItem('operatingsystem', this.state.pickedItems.join(','))
+              break;
+
+            case 'color':
+              this.props.changeHandler({color: this.state.pickedItems.join(',')})
+              localStorage.setItem('color', this.state.pickedItems.join(','))
+              break;
+
+            case 'battery':
+              this.props.changeHandler({battery: this.state.pickedItems.join(',')})
+              localStorage.setItem('battery', this.state.pickedItems.join(','))
+              break;
+
+            default:
+              break;
           }
+          // if(this.props.type == 'brands')
+          // {
+          //   this.props.changeHandler({brands: this.state.pickedItems.join(',')})
+          // }
           
-          if(this.props.type == 'shops')
-          {
-            this.props.changeHandler({shops: this.state.pickedItems.join(',')})
-          }
+          // if(this.props.type == 'shops')
+          // {
+          //   this.props.changeHandler({shops: this.state.pickedItems.join(',')})
+          // }
           
         })
+
+
       };
-
+    // sx={{ m: 1, width: 250 }} kaj formcontrol
 
   render() {
     return (
         <div>
-        <FormControl className="form-select-component" sx={{ m: 1, width: 200 }}>
+        <FormControl className="form-select-component" sx={{ m: 1, width: this.props.width}}>
           <InputLabel className="input-select-label">{this.state.type}</InputLabel>
           <Select
@@ -94,7 +224,7 @@
   >
             {this.state.items.map((item) => (
-              <MenuItem key={item} value={item}>
+              <MenuItem key={item} value={item} > 
                 <Checkbox checked={this.state.pickedItems.indexOf(item) > -1} />
-                <ListItemText primary={item} />
+                <ListItemText className='list-item-text-filters' primary={item} />
               </MenuItem>
             ))}
Index: phonelux-frontend/src/components/FiltersComponents/SearchFieldComponent.js
===================================================================
--- phonelux-frontend/src/components/FiltersComponents/SearchFieldComponent.js	(revision 7e88e4629bb341cb3730a26b5197ab06068ce0db)
+++ phonelux-frontend/src/components/FiltersComponents/SearchFieldComponent.js	(revision 34950c66561199fd9a1d153e0d90d545949de23c)
@@ -63,5 +63,5 @@
   
     this.state = {
-       
+
     }
   }
Index: phonelux-frontend/src/components/FiltersComponents/SortByComponent.css
===================================================================
--- phonelux-frontend/src/components/FiltersComponents/SortByComponent.css	(revision 7e88e4629bb341cb3730a26b5197ab06068ce0db)
+++ phonelux-frontend/src/components/FiltersComponents/SortByComponent.css	(revision 34950c66561199fd9a1d153e0d90d545949de23c)
@@ -1,5 +1,5 @@
 .sortby-component-wrapper{
     display: flex;
-    justify-content: end;
+    justify-content: space-between;
     padding: 20px;
     background-color: #DEE4E1
@@ -11,3 +11,11 @@
     background-color: #e6f8ef;
     margin-right: 15px;
+    height: 50%;
+    margin-left: auto;
 }
+
+
+.popover-specification-container{
+    height: 500px;
+    overflow-y: scroll;
+}
Index: phonelux-frontend/src/components/FiltersComponents/SortByComponent.js
===================================================================
--- phonelux-frontend/src/components/FiltersComponents/SortByComponent.js	(revision 7e88e4629bb341cb3730a26b5197ab06068ce0db)
+++ phonelux-frontend/src/components/FiltersComponents/SortByComponent.js	(revision 34950c66561199fd9a1d153e0d90d545949de23c)
@@ -1,4 +1,6 @@
 import React, { Component } from 'react'
+import { Link } from 'react-router-dom'
 import './SortByComponent.css'
+import SpecificationsFilterComponent from './SpecificationsFilterComponent'
 
 export class SortByComponent extends Component {
@@ -8,5 +10,5 @@
     
       this.state = {
-         sortBy: 'mostPopular'
+         sortBy: localStorage.getItem('sortBy') ? localStorage.getItem('sortBy') : 'mostPopular'
       }
     }
@@ -14,4 +16,5 @@
     handleChange = (e) => {
       this.props.changeHandler({sortBy: e.target.value})
+      localStorage.setItem('sortBy',e.target.value)
     }
 
@@ -19,5 +22,6 @@
     return (
         <div className="sortby-component-wrapper">
-        <select defaultValue={'mostPopular'} onChange={this.handleChange} className='sortby-component-select'>
+        {localStorage.getItem('token') ? <SpecificationsFilterComponent changeHandler={this.props.changeHandler}/> : <></>}
+        <select defaultValue={this.state.sortBy} onChange={this.handleChange} className='sortby-component-select'>
           <option value="mostPopular">Најпопуларно</option>
           <option value="ascending">Цена: Ниска {'>'} Висока</option>
Index: phonelux-frontend/src/components/FiltersComponents/SpecificationsFilterComponent.css
===================================================================
--- phonelux-frontend/src/components/FiltersComponents/SpecificationsFilterComponent.css	(revision 34950c66561199fd9a1d153e0d90d545949de23c)
+++ phonelux-frontend/src/components/FiltersComponents/SpecificationsFilterComponent.css	(revision 34950c66561199fd9a1d153e0d90d545949de23c)
@@ -0,0 +1,37 @@
+.specifications-filter-header{
+    background-color: #B6E2C8;
+    border: 1px solid black;
+    width: fit-content;
+    border-radius: 20px;
+    padding: 5px;
+    margin-right: auto;
+    margin-left: 10px;
+    height: fit-content;
+    margin-top: 0px;
+    padding-top: 5px;
+    width: 100%;
+    text-align: center;
+    display: flex;
+    justify-content: center;
+}
+
+.popover-specification-container{
+    overflow-y: scroll;
+    height: 400px;
+}
+
+.popover-specification-container-header{
+    /* color: #B6E2C8; */
+    margin: 30px;
+}
+
+.specifications-filter-header:hover{
+    cursor: pointer;
+    background-color: rgb(166, 201, 171);
+    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
+    transition: box-shadow 0.5s, background-color 0.5s ;
+}
+
+.specifications-filter-popover{
+    text-align: center;
+}
Index: phonelux-frontend/src/components/FiltersComponents/SpecificationsFilterComponent.js
===================================================================
--- phonelux-frontend/src/components/FiltersComponents/SpecificationsFilterComponent.js	(revision 34950c66561199fd9a1d153e0d90d545949de23c)
+++ phonelux-frontend/src/components/FiltersComponents/SpecificationsFilterComponent.js	(revision 34950c66561199fd9a1d153e0d90d545949de23c)
@@ -0,0 +1,72 @@
+import React, { Component } from 'react'
+import './SpecificationsFilterComponent.css'
+import FilterAltIcon from '@mui/icons-material/FilterAlt';
+import Tippy from '@tippyjs/react';
+import Popover from '@mui/material/Popover';
+import Typography from '@mui/material/Typography';
+import Button from '@mui/material/Button';
+import FilterSelectComponent from './FilterSelectComponent';
+import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
+export class SpecificationsFilterComponent extends Component {
+
+    constructor(props) {
+      super(props)
+    
+      this.state = {
+        anchorEl: null
+      }
+    }
+
+    handleClick = (event) => {
+      this.setState({
+        anchorEl: event.currentTarget
+      })
+    };
+
+    handleClose = () => {
+      this.setState({
+        anchorEl: null
+      })
+    };
+
+  render() {
+
+    const open = Boolean(this.state.anchorEl);
+    const id = open ? 'specifications-popover' : undefined;
+
+    return (
+      <div className='specifications-filter-main'>
+        <h4 aria-describedby={id} className='specifications-filter-header' onClick={this.handleClick}>Спецификации
+        <ArrowDropDownIcon style={{marginTop:'-2px'}}/>
+        </h4>
+      <Popover
+        className='specifications-filter-popover'
+        id={id}
+        open={open}
+        anchorEl={this.state.anchorEl}
+        onClose={this.handleClose}
+        anchorOrigin={{
+          vertical: 'center',
+          horizontal: 'right',
+        }}
+      >
+        <div className='popover-specification-container'>
+        <h2 className='popover-specification-container-header'>Филтер за спецификации</h2>
+        <FilterSelectComponent changeHandler={this.props.changeHandler} width={400} type='ram'></FilterSelectComponent>
+        <FilterSelectComponent changeHandler={this.props.changeHandler} width={400} type='rom'></FilterSelectComponent>
+        <FilterSelectComponent changeHandler={this.props.changeHandler} width={400} type='frontcamera'></FilterSelectComponent>
+        <FilterSelectComponent changeHandler={this.props.changeHandler} width={400} type='backcamera'></FilterSelectComponent>
+        <FilterSelectComponent changeHandler={this.props.changeHandler} width={400} type='chipset'></FilterSelectComponent>
+        <FilterSelectComponent changeHandler={this.props.changeHandler} width={400} type='cpu'></FilterSelectComponent>
+        <FilterSelectComponent changeHandler={this.props.changeHandler} width={400} type='operatingsystem'></FilterSelectComponent>
+        <FilterSelectComponent changeHandler={this.props.changeHandler} width={400} type='color'></FilterSelectComponent>
+        <FilterSelectComponent changeHandler={this.props.changeHandler} width={400} type='battery'></FilterSelectComponent>
+        </div>
+      </Popover>
+      </div>
+    )
+  }
+}
+
+export default SpecificationsFilterComponent
+
Index: phonelux-frontend/src/components/GroupedFiltersComponent/GroupedFiltersComponent.js
===================================================================
--- phonelux-frontend/src/components/GroupedFiltersComponent/GroupedFiltersComponent.js	(revision 7e88e4629bb341cb3730a26b5197ab06068ce0db)
+++ phonelux-frontend/src/components/GroupedFiltersComponent/GroupedFiltersComponent.js	(revision 34950c66561199fd9a1d153e0d90d545949de23c)
@@ -29,9 +29,9 @@
 
           <Grid className='filterscomponent-grid-item' item xs={6} sm={4} md={3}>
-            <FilterSelectComponent changeHandler={this.props.passFilters} type='shops'/>
+            <FilterSelectComponent width={200} changeHandler={this.props.passFilters} type='shops'/>
           </Grid>
 
           <Grid className='filterscomponent-grid-item' item xs={6} sm={4} md={3}>
-            <FilterSelectComponent changeHandler={this.props.passFilters} type='brands'/>
+            <FilterSelectComponent width={200} changeHandler={this.props.passFilters} type='brands'/>
           </Grid>
 
Index: phonelux-frontend/src/components/HomepageComponent.js
===================================================================
--- phonelux-frontend/src/components/HomepageComponent.js	(revision 7e88e4629bb341cb3730a26b5197ab06068ce0db)
+++ phonelux-frontend/src/components/HomepageComponent.js	(revision 34950c66561199fd9a1d153e0d90d545949de23c)
@@ -16,5 +16,14 @@
     priceRange: '',
     searchValue: '',
-    sortBy: 'mostPopular'
+    sortBy: 'mostPopular',
+    ram: '',
+    rom: '',
+    frontcamera: '',
+    backcamera: '',
+    chipset: '',
+    cpu: '',
+    operatingsystem: '',
+    color: '',
+    battery: ''
   }
 }
@@ -57,10 +66,161 @@
     })
   }
+
+  if(e.hasOwnProperty('ram'))
+  {
+    this.setState({
+      ram: e.ram
+    })
+
+  }
+  
+  if(e.hasOwnProperty('rom'))
+  {
+    this.setState({
+      rom: e.rom
+    })
+  }
+
+  if(e.hasOwnProperty('frontcamera'))
+  {
+    this.setState({
+      frontcamera: e.frontcamera
+    })
+  }
+
+  if(e.hasOwnProperty('backcamera'))
+  {
+    this.setState({
+      backcamera: e.backcamera
+    })
+
+  }
+  
+  if(e.hasOwnProperty('chipset'))
+  {
+    this.setState({
+      chipset: e.chipset
+    })
+  }
+
+  if(e.hasOwnProperty('cpu'))
+  {
+    this.setState({
+      cpu: e.cpu
+    })
+
+  }
+  
+  if(e.hasOwnProperty('operatingsystem'))
+  {
+    this.setState({
+      operatingsystem: e.operatingsystem
+    })
+  }
+
+  if(e.hasOwnProperty('color'))
+  {
+    this.setState({
+      color: e.color
+    })
+
+  }
+  
+  if(e.hasOwnProperty('battery'))
+  {
+    this.setState({
+      battery: e.battery
+    })
+  }
+}
+
+componentDidMount(){
+  if(localStorage.getItem('brands'))
+  {
+    this.setState({
+      brands: localStorage.getItem('brands')
+    })
+  }
+  if(localStorage.getItem('shops'))
+  {
+    this.setState({
+      shops: localStorage.getItem('shops')
+    })
+  }
+  if(localStorage.getItem('priceRange'))
+  {
+    this.setState({
+      priceRange: localStorage.getItem('priceRange')
+    })
+  }
+ 
+  if(localStorage.getItem('sortBy'))
+  {
+    this.setState({
+      sortBy: localStorage.getItem('sortBy')
+    })
+  }
+  if(localStorage.getItem('ram'))
+  {
+    this.setState({
+      ram: localStorage.getItem('ram')
+    })
+  }
+  if(localStorage.getItem('rom'))
+  {
+    this.setState({
+      rom: localStorage.getItem('rom')
+    })
+  }
+  if(localStorage.getItem('frontcamera'))
+  {
+    this.setState({
+      frontcamera: localStorage.getItem('frontcamera')
+    })
+  }
+  if(localStorage.getItem('backcamera'))
+  {
+    this.setState({
+      backcamera: localStorage.getItem('backcamera')
+    })
+  }
+  if(localStorage.getItem('chipset'))
+  {
+    this.setState({
+      chipset: localStorage.getItem('chipset')
+    })
+  }
+  if(localStorage.getItem('cpu'))
+  {
+    this.setState({
+      cpu: localStorage.getItem('cpu')
+    })
+  }
+  if(localStorage.getItem('operatingsystem'))
+  {
+    this.setState({
+      operatingsystem: localStorage.getItem('operatingsystem')
+    })
+  }
+  if(localStorage.getItem('color'))
+  {
+    this.setState({
+      color: localStorage.getItem('color')
+    })
+  }
+  if(localStorage.getItem('battery'))
+  {
+    this.setState({
+      battery: localStorage.getItem('battery')
+    })
+  }
+  console.log(this.state)
 }
 
 
   render() {
-    console.log(this.context)
-    console.log(localStorage.getItem('token'))
+    // console.log(this.context)
+    // console.log(localStorage.getItem('token'))
+    console.log(this.state)
     return (
         <>
Index: phonelux-frontend/src/components/LoginPageComponent.js
===================================================================
--- phonelux-frontend/src/components/LoginPageComponent.js	(revision 7e88e4629bb341cb3730a26b5197ab06068ce0db)
+++ phonelux-frontend/src/components/LoginPageComponent.js	(revision 34950c66561199fd9a1d153e0d90d545949de23c)
@@ -10,4 +10,11 @@
       this.state = {
          
+      }
+    }
+
+    componentDidMount(){
+      if(localStorage.getItem('token'))
+      {
+        window.location.href = "/"
       }
     }
Index: phonelux-frontend/src/components/NavbarComponent/NavbarComponent.css
===================================================================
--- phonelux-frontend/src/components/NavbarComponent/NavbarComponent.css	(revision 7e88e4629bb341cb3730a26b5197ab06068ce0db)
+++ phonelux-frontend/src/components/NavbarComponent/NavbarComponent.css	(revision 34950c66561199fd9a1d153e0d90d545949de23c)
@@ -30,2 +30,6 @@
 }
 
+.navbar-comparephone-icon:hover{
+    cursor: pointer;
+}
+
Index: phonelux-frontend/src/components/NavbarComponent/NavbarComponent.js
===================================================================
--- phonelux-frontend/src/components/NavbarComponent/NavbarComponent.js	(revision 7e88e4629bb341cb3730a26b5197ab06068ce0db)
+++ phonelux-frontend/src/components/NavbarComponent/NavbarComponent.js	(revision 34950c66561199fd9a1d153e0d90d545949de23c)
@@ -11,4 +11,5 @@
 import UserContext from '../../context/UserContext';
 import SupervisorAccountIcon from '@mui/icons-material/SupervisorAccount';
+import PhoneIphoneIcon from '@mui/icons-material/PhoneIphone';
 
 export class NavbarComponent extends Component {
@@ -35,4 +36,12 @@
             <Link style={{color: 'black'}} to={"/management/users"}>
               <SupervisorAccountIcon style={{fontSize: '40px', marginTop: '10px', marginRight: '10px' }} className='navbar-superadmin-icon'/>
+            </Link>
+          </Tippy> : <></>
+        }
+        {
+          localStorage.getItem('token')  ? 
+          <Tippy placement='bottom' content='Споредба на мобилни телефони'>
+            <Link style={{color: 'black'}} to={"/compareoffers"}>
+              <PhoneIphoneIcon style={{fontSize: '40px', marginTop: '10px', marginRight: '10px' }} className='navbar-comparephone-icon'/>
             </Link>
           </Tippy> : <></>
Index: phonelux-frontend/src/components/PhoneCardGridComponent/PhoneCardGridComponent.js
===================================================================
--- phonelux-frontend/src/components/PhoneCardGridComponent/PhoneCardGridComponent.js	(revision 7e88e4629bb341cb3730a26b5197ab06068ce0db)
+++ phonelux-frontend/src/components/PhoneCardGridComponent/PhoneCardGridComponent.js	(revision 34950c66561199fd9a1d153e0d90d545949de23c)
@@ -6,4 +6,5 @@
 import './PhoneCardGridComponent.css'
 import phoneImage from '../../images/phone.png'
+import SortByComponent from '../FiltersComponents/SortByComponent'
 
 export class PhoneCardGridComponent extends Component {
@@ -20,4 +21,30 @@
     }
 
+  }
+
+
+  getQueryString = () => {
+    let filters = '?'
+    if(localStorage.getItem('shops'))
+      {
+        filters += 'shops='+localStorage.getItem('shops')+'&'
+      }
+      if(localStorage.getItem('brands'))
+      {
+        filters += 'brands='+localStorage.getItem('brands')+'&'
+      }
+      if(localStorage.getItem('priceRange'))
+      {
+        filters += 'priceRange='+localStorage.getItem('priceRange')+'&'
+      }
+
+      if(localStorage.getItem('sortBy'))
+      {
+        filters += 'sortBy='+localStorage.getItem('sortBy')+'&'
+      } 
+
+      // dodaj filtri za specifikacija i sredi go sortBy
+
+      return filters
   }
 
@@ -46,5 +73,9 @@
       {
         filters += 'sortBy='+this.props.sortBy+'&'
-      }
+      } 
+
+      // dodaj gi i filtrite za specifikacija
+
+      // izdvoj metod da ti pravi querystring
 
       axios.get('/phones'+filters)
@@ -62,5 +93,5 @@
 
   componentDidMount() {
-    axios.get('/phones')
+    axios.get('/phones'+this.getQueryString())
       .then(response => {
         this.setState({
Index: phonelux-frontend/src/components/PhoneOfferComponent/PhoneOfferComponent.css
===================================================================
--- phonelux-frontend/src/components/PhoneOfferComponent/PhoneOfferComponent.css	(revision 7e88e4629bb341cb3730a26b5197ab06068ce0db)
+++ phonelux-frontend/src/components/PhoneOfferComponent/PhoneOfferComponent.css	(revision 34950c66561199fd9a1d153e0d90d545949de23c)
@@ -35,2 +35,26 @@
     cursor: pointer;
 }
+
+.phone-offer-compare-icon:hover{
+    cursor: pointer;
+}
+
+.phone-offer-remove-favouriteoffer-icon:hover{
+    cursor: pointer;
+}
+
+.phone-offer-remove-favouriteoffer-icon{
+    color: rgb(226, 213, 39);
+}
+
+.phone-offer-compare-selected-icon:hover{
+    cursor: pointer;
+}
+
+.phone-offer-compare-selected-icon{
+    color: rgb(226, 213, 39);
+}
+
+
+
+
Index: phonelux-frontend/src/components/PhoneOfferComponent/PhoneOfferComponent.js
===================================================================
--- phonelux-frontend/src/components/PhoneOfferComponent/PhoneOfferComponent.js	(revision 7e88e4629bb341cb3730a26b5197ab06068ce0db)
+++ phonelux-frontend/src/components/PhoneOfferComponent/PhoneOfferComponent.js	(revision 34950c66561199fd9a1d153e0d90d545949de23c)
@@ -9,4 +9,6 @@
 import VisibilityIcon from '@mui/icons-material/Visibility';
 import CheckIcon from '@mui/icons-material/Check';
+import CompareIcon from '@mui/icons-material/Compare';
+import BookmarkRemoveIcon from '@mui/icons-material/BookmarkRemove';
 
 export class PhoneOfferComponent extends Component {
@@ -16,5 +18,4 @@
     
       this.state = {
-       
       }
     }
@@ -72,4 +73,22 @@
       });
     }
+
+    handleOfferCompare = () => {
+      let offersToCompare = []
+     if(localStorage.getItem('offersToCompare'))
+     {
+      offersToCompare = JSON.parse(localStorage.getItem('offersToCompare'))
+     }
+
+     if(!offersToCompare.includes(this.props.id) && offersToCompare.length<5)
+     {
+      offersToCompare.push(this.props.id)
+     }
+     else{
+      offersToCompare = offersToCompare.filter(offer => offer != this.props.id)
+     }
+     localStorage.setItem('offersToCompare', JSON.stringify(offersToCompare))
+     this.forceUpdate()
+    }
     
     
@@ -81,4 +100,31 @@
       <td>{this.props.price} ден.</td>
       <td>
+
+        {/* if else jsx syntax here to add icon */}
+
+        {(() => {
+          if(!localStorage.getItem('token'))
+          {
+            return <></>
+          }
+
+          if(localStorage.getItem('offersToCompare') && localStorage.getItem('offersToCompare').includes(this.props.id))
+          {
+            return  <Tippy placement='bottom' content='Избриши понуда за споредба'>
+                      <CompareIcon onClick={this.handleOfferCompare} className='phone-offer-compare-selected-icon' style={{fontSize: '40px', marginRight: '10px' }}/>
+                    </Tippy>
+          }
+          else{
+            return  <Tippy placement='bottom' content='Додади понуда за споредба'>
+            <CompareIcon onClick={this.handleOfferCompare} className='phone-offer-compare-icon' style={{fontSize: '40px', marginRight: '10px' }}/>
+          </Tippy>
+          }
+      })()}
+        {/* {
+          localStorage.getItem('token') && !localStorage.getItem('offersToCompare').includes(this.props.id)? 
+          <Tippy placement='bottom' content='Додади понуда за споредба'>
+          <CompareIcon onClick={this.handleOfferCompare} className='phone-offer-compare-icon' style={{fontSize: '40px', marginRight: '10px' }}/>
+        </Tippy> : <></>
+        } */}
         {
           window.location.href.split('/')[5] == 'favouriteoffers' ?   
@@ -98,5 +144,5 @@
           localStorage.getItem('token') && this.props.loggedUserFavouriteOffers.filter(offer => offer.id == this.props.id).length != 0? 
           <Tippy placement='bottom' content='Избриши од омилени понуди'>
-          <StarIcon onClick={this.removeFromFavourite} className='phone-offer-favouriteoffer-icon' style={{fontSize: '40px', marginRight: '10px' }}/>
+          <StarIcon onClick={this.removeFromFavourite} className='phone-offer-remove-favouriteoffer-icon' style={{fontSize: '40px', marginRight: '10px' }}/>
           </Tippy>
           : <></>
@@ -105,5 +151,5 @@
 
         <Link style={{ textDecoration: 'none' }} to={"/phoneoffer/"+this.props.id}>
-          <button className='phone-offer-specifications-button'>Спецификации</button>
+          <button className='phone-offer-specifications-button'><b>Спецификации</b></button>
         </Link>
         </td>
Index: phonelux-frontend/src/components/PhoneOfferDetailsComponent/PhoneOfferDetailsComponent.css
===================================================================
--- phonelux-frontend/src/components/PhoneOfferDetailsComponent/PhoneOfferDetailsComponent.css	(revision 7e88e4629bb341cb3730a26b5197ab06068ce0db)
+++ phonelux-frontend/src/components/PhoneOfferDetailsComponent/PhoneOfferDetailsComponent.css	(revision 34950c66561199fd9a1d153e0d90d545949de23c)
@@ -56,8 +56,8 @@
 .phone-offer-details-last-updated-header{
     width: 25%;
-    margin-left: 20px;
+    margin-left: 5%;
     padding: 10px;
     border: 1px solid rgb(199, 193, 193);
-    background-color: #B6E2C8;
+    background-color: #dadedc;
     border-radius: 50px;
     text-align: center;
@@ -73,5 +73,5 @@
 .phone-offer-details-edit-header{
     width: 100%;
-    margin-left: 20px;
+    margin-left: 5%;
     padding-top: 10px;
     border: 1px solid black;
@@ -96,3 +96,38 @@
 }
 
+.validate-offer-button{
+    font-size: 17px;
+    padding: 10px;
+    background-color:  rgb(170, 211, 240);
+    border-radius: 30px;
+    border: 1px solid black;
+    margin-left: auto;
+    margin-right: 10%;
+    width: 15%;
+    font-weight: bold;
+    font-size: 18px;
+    text-align: center;
+}
 
+.validate-offer-button:hover{
+    cursor: pointer;
+    background-color: rgb(149, 187, 215);
+    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
+    transition: box-shadow 0.5s, background-color 0.5s ;
+}
+
+.offer-valid-header{
+    font-size: 17px;
+    padding: 10px;
+    background-color: #96d5b0;
+    border-radius: 20px;
+    border: 1px solid black;
+    margin-left: auto;
+    margin-right: 10%;
+    text-align: center;
+    width: 15%;
+    font-weight: bold;
+    font-size: 19px;
+}
+
+
Index: phonelux-frontend/src/components/PhoneOfferDetailsComponent/PhoneOfferDetailsComponent.js
===================================================================
--- phonelux-frontend/src/components/PhoneOfferDetailsComponent/PhoneOfferDetailsComponent.js	(revision 7e88e4629bb341cb3730a26b5197ab06068ce0db)
+++ phonelux-frontend/src/components/PhoneOfferDetailsComponent/PhoneOfferDetailsComponent.js	(revision 34950c66561199fd9a1d153e0d90d545949de23c)
@@ -4,5 +4,7 @@
 import HeaderComponent from '../HeaderComponent/HeaderComponent'
 import UserContext from '../../context/UserContext'
+import CheckIcon from '@mui/icons-material/Check';
 import { Link } from 'react-router-dom'
+import Tippy from '@tippyjs/react'
 
 
@@ -19,5 +21,9 @@
 
     componentDidMount(){
-        axios.get('/phoneoffer/'+this.state.offerId)
+        this.getPhoneOffer()
+    }
+
+    getPhoneOffer = () => {
+      axios.get('/phoneoffer/'+this.state.offerId)
         .then(response => {
             this.setState({
@@ -27,5 +33,24 @@
     }
 
+    validateOffer = () => {
+      var config = {
+        method: 'put',
+        url: '/admin/validateoffer/'+this.state.offerId,
+        headers: { 
+          'Authorization': 'Bearer '+localStorage.getItem('token')
+        }
+      };
+      
+      axios(config)
+      .then(response => {
+        this.getPhoneOffer();
+      })
+      .catch(error => {
+        console.log(error);
+      });
+    }
+
   render() {
+    console.log(this.state)
     return (
       <div className='phone-offer-details-main'>
@@ -40,5 +65,23 @@
               </Link> : <></>
           }
+       
+
+          {(() => {
+            if(this.state.offer != null && this.state.offer.is_validated)
+            {
+              return <Tippy placement='bottom'  content='Понудата е валидна'>
+                      <CheckIcon className='offer-valid-check-icon' style={{'fontSize': '60px'}}></CheckIcon>
+                     </Tippy>
+            }
+
+            if(this.state.offer != null && !this.state.offer.is_validated && 
+              (this.context.role == 'ADMIN' || this.context.role == 'SUPERADMIN'))
+            {
+              return <button onClick={this.validateOffer} className='validate-offer-button'>Валидирај понуда</button>
+            }
+
+          })()}
         </div>
+        <div className='phone-offer-details-last-updated-wrapper'></div>
         <div className='phone-offer-details-table-wrapper'>
         <div className='phone-offer-details-table-section'>
Index: phonelux-frontend/src/components/PhonePageComponent.js
===================================================================
--- phonelux-frontend/src/components/PhonePageComponent.js	(revision 7e88e4629bb341cb3730a26b5197ab06068ce0db)
+++ phonelux-frontend/src/components/PhonePageComponent.js	(revision 34950c66561199fd9a1d153e0d90d545949de23c)
@@ -18,4 +18,5 @@
         axios.get('/phones/'+this.state.phoneId)
         .then(response => {
+          console.log(response.data)
             this.setState({
                 phone: response.data
Index: phonelux-frontend/src/components/PhoneWithOffersComponent/PhoneWithOffersComponent.css
===================================================================
--- phonelux-frontend/src/components/PhoneWithOffersComponent/PhoneWithOffersComponent.css	(revision 7e88e4629bb341cb3730a26b5197ab06068ce0db)
+++ phonelux-frontend/src/components/PhoneWithOffersComponent/PhoneWithOffersComponent.css	(revision 34950c66561199fd9a1d153e0d90d545949de23c)
@@ -70,3 +70,2 @@
 }
 
-
Index: phonelux-frontend/src/components/PhoneWithOffersComponent/PhoneWithOffersComponent.js
===================================================================
--- phonelux-frontend/src/components/PhoneWithOffersComponent/PhoneWithOffersComponent.js	(revision 7e88e4629bb341cb3730a26b5197ab06068ce0db)
+++ phonelux-frontend/src/components/PhoneWithOffersComponent/PhoneWithOffersComponent.js	(revision 34950c66561199fd9a1d153e0d90d545949de23c)
@@ -22,4 +22,5 @@
       axios.get('/phones/offers/'+this.props.phoneId)
       .then(response => {
+        console.log(response.data)
           this.setState({
               phone_offers: response.data
Index: phonelux-frontend/src/components/RegisterPageComponent.js
===================================================================
--- phonelux-frontend/src/components/RegisterPageComponent.js	(revision 7e88e4629bb341cb3730a26b5197ab06068ce0db)
+++ phonelux-frontend/src/components/RegisterPageComponent.js	(revision 34950c66561199fd9a1d153e0d90d545949de23c)
@@ -4,4 +4,21 @@
 
 export class RegisterPageComponent extends Component {
+
+  constructor(props) {
+    super(props)
+
+    this.state = {
+      
+    }
+  }
+
+ 
+  componentDidMount(){
+    if(localStorage.getItem('token'))
+    {
+      window.location.href = "/"
+    }
+  }
+
   render() {
     return (
Index: phonelux-frontend/src/components/SuperAdminComponent/SuperAdminComponent.js
===================================================================
--- phonelux-frontend/src/components/SuperAdminComponent/SuperAdminComponent.js	(revision 7e88e4629bb341cb3730a26b5197ab06068ce0db)
+++ phonelux-frontend/src/components/SuperAdminComponent/SuperAdminComponent.js	(revision 34950c66561199fd9a1d153e0d90d545949de23c)
@@ -8,4 +8,5 @@
 import SearchIcon from '@mui/icons-material/Search';
 import InputBase from '@mui/material/InputBase';
+import UserContext from '../../context/UserContext';
 
 
@@ -68,4 +69,13 @@
 
     componentDidMount(){
+      // if(!localStorage.getItem('token'))
+      // {
+      //     window.location.href = "/"
+      // }
+
+      // if(this.context.role != 'SUPERADMIN')
+      // {
+      //     window.location.href = "/"
+      // }
       this.getUsers()
     }
@@ -199,3 +209,5 @@
 }
 
+SuperAdminComponent.contextType = UserContext
+
 export default SuperAdminComponent
Index: phonelux-frontend/src/components/UserFavouriteOffersComponent/UserFavouriteOffersComponent.js
===================================================================
--- phonelux-frontend/src/components/UserFavouriteOffersComponent/UserFavouriteOffersComponent.js	(revision 7e88e4629bb341cb3730a26b5197ab06068ce0db)
+++ phonelux-frontend/src/components/UserFavouriteOffersComponent/UserFavouriteOffersComponent.js	(revision 34950c66561199fd9a1d153e0d90d545949de23c)
@@ -7,4 +7,5 @@
 import PhoneOfferComponent from '../PhoneOfferComponent/PhoneOfferComponent'
 import CheaperOffersComponent from '../CheaperOffersComponent/CheaperOffersComponent'
+import { wait } from '@testing-library/user-event/dist/utils'
 
 export class UserFavouriteOffersComponent extends Component {
@@ -21,4 +22,8 @@
 
     componentDidMount(){
+      if(!localStorage.getItem('token')){
+        window.location.href = "/"
+      }
+
       this.getFavouriteOffersForLoggedUser()
     }
@@ -27,5 +32,5 @@
       var config = {
         method: 'get',
-        url: '/user/'+this.context.userId+'/favouriteoffers',
+        url: '/user/'+window.location.href.split('/')[4]+'/favouriteoffers',
         headers: { 
           'Authorization': 'Bearer '+localStorage.getItem('token')
@@ -59,5 +64,5 @@
     
   render() {
-  
+  // console.log(this.context)
 
     return (
@@ -71,24 +76,34 @@
           <StarIcon style={{fontSize: '50px', marginTop: '20px', marginLeft: '10px'}}/>
           </div>
-          <table cellPadding={20} className='phone-with-offers-table'>
-            <thead className='phone-with-offers-table-head'>
-              <tr>
-              <th>Продавница</th>
-              <th>Име на понуда</th>
-              <th>Цена</th>
-              <th></th>
-              </tr>
-            </thead>
-            <tbody>
-              {
-                this.state.userFavouriteOffers.map((offer,idx) => <PhoneOfferComponent key={idx} id={offer.id}
-                is_validated={offer.is_validated} offer_shop={offer.offer_shop} offer_name={offer.offer_name}
-                price={offer.price} offer_url={offer.offer_url} handleOpen={this.handleOpen} 
-                loggedUserFavouriteOffers={this.state.userFavouriteOffers}
-                getFavouriteOffersForLoggedUser={this.getFavouriteOffersForLoggedUser}
-                />) 
-              }
-            </tbody>
-          </table>
+
+          {(() => {
+            if(this.state.userFavouriteOffers.length != 0){
+              return <table cellPadding={20} className='phone-with-offers-table'>
+              <thead className='phone-with-offers-table-head'>
+                <tr>
+                <th>Продавница</th>
+                <th>Име на понуда</th>
+                <th>Цена</th>
+                <th></th>
+                </tr>
+              </thead>
+              <tbody>
+                {
+                  this.state.userFavouriteOffers.map((offer,idx) => <PhoneOfferComponent key={idx} id={offer.id}
+                  is_validated={offer.is_validated} offer_shop={offer.offer_shop} offer_name={offer.offer_name}
+                  price={offer.price} offer_url={offer.offer_url} handleOpen={this.handleOpen} 
+                  loggedUserFavouriteOffers={this.state.userFavouriteOffers}
+                  getFavouriteOffersForLoggedUser={this.getFavouriteOffersForLoggedUser}
+                  />) 
+                }
+              </tbody>
+            </table>
+            }
+            else{
+              return <h1 className='no-offers-saved-message'>Нема зачувано понуди</h1>
+            }
+        
+          })()}
+          
           <CheaperOffersComponent
            cheaperOffers={this.state.cheaperOffers} 
