Index: phonelux-frontend/src/components/OfferReportsComponent/OfferReportsComponent.css
===================================================================
--- phonelux-frontend/src/components/OfferReportsComponent/OfferReportsComponent.css	(revision 47f4eafa88902f713d8f8cfe5d10306816c61ea3)
+++ phonelux-frontend/src/components/OfferReportsComponent/OfferReportsComponent.css	(revision 47f4eafa88902f713d8f8cfe5d10306816c61ea3)
@@ -0,0 +1,82 @@
+.offerreports-section-header{
+    background-color: #B6E2C8;
+    justify-content: center;
+    align-content: center;
+    margin-top: -30px;
+    width: 100%;
+    display: flex;
+    font-size: 18px;
+}
+.offerreports-section-header-text{
+    width: fit-content;
+}
+
+.offerreports-section-table-row:nth-of-type(even){
+    background-color: #eef2f0;
+}
+
+.offerreports-section-table{
+    border-collapse: collapse;
+    width: 100%;
+    table-layout: fixed;
+}
+
+.offerreports-section-table-row{
+    border: 1px solid gainsboro;
+    padding: 20px ;
+    font-size: 18px;
+}
+
+.offerreports-section-table td{
+    text-align: center;
+    word-wrap: break-word;
+}
+
+.offerreports-section-table-head{
+    background-color: #a6c9ab;
+    font-size: 22px;
+}
+
+.offerreports-section-table-head th{
+    word-wrap: break-word;
+    width: 100%;
+}
+
+.reportoffer-removeall-button{    
+    font-weight: bold;
+    font-size: 15px;
+    width: 80%;
+    border-radius: 20px;
+    border: 2px solid red;
+    background-color: rgb(243, 203, 203);
+}
+
+.reportoffer-removeall-button:hover{
+    cursor: pointer;
+    background-color: rgb(228, 179, 179);
+    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 ;
+}
+
+.no-offerreports-message{
+    text-align: center;
+    background-color: #a6c9ab;
+    padding: 10px;
+    border-radius: 50px;
+    border: 1px solid black;
+    width: fit-content;
+}
+
+.no-offerreports-wrapper{
+    margin-top: 100px;
+    display: flex;
+    justify-content: center;
+    width: 100%;
+}
+
+.offerreports-pagination-wrapper{
+    margin-top: 40px;
+    display: flex;
+    justify-content: center;
+    margin-bottom: 30px;
+}
Index: phonelux-frontend/src/components/OfferReportsComponent/OfferReportsComponent.js
===================================================================
--- phonelux-frontend/src/components/OfferReportsComponent/OfferReportsComponent.js	(revision 47f4eafa88902f713d8f8cfe5d10306816c61ea3)
+++ phonelux-frontend/src/components/OfferReportsComponent/OfferReportsComponent.js	(revision 47f4eafa88902f713d8f8cfe5d10306816c61ea3)
@@ -0,0 +1,149 @@
+import { Pagination } from '@mui/material'
+import axios from 'axios'
+import React, { Component } from 'react'
+import HeaderComponent from '../HeaderComponent/HeaderComponent'
+import './OfferReportsComponent.css'
+import SingleReportComponent from './SingleReportComponent'
+
+export class OfferReportsComponent extends Component {
+
+    constructor(props) {
+      super(props)
+    
+      this.state = {
+         offerReports: [],
+         currentReports: [],
+         reportsPerPage:10,
+         numberOfPages: 0,
+         currentPage: 1,
+      }
+    }
+
+    componentDidMount(){
+       this.getOfferReports()
+    }
+
+    removeOfferReport = (id) => {
+        var config = {
+            method: 'delete',
+            url: '/offerreport/remove/'+id,
+            headers: { 
+              'Authorization': 'Bearer '+localStorage.getItem('token')
+            }
+          };
+          
+          axios(config)
+          .then(response => {
+            this.getOfferReports()
+          })
+          .catch(error => {
+            console.log(error);
+          });
+          
+    }
+
+    removeAllOfferReports = () => {
+        var config = {
+            method: 'delete',
+            url: '/offerreport/removeall',
+            headers: { 
+              'Authorization': 'Bearer '+localStorage.getItem('token')
+            }
+          };
+          
+          axios(config)
+          .then(response => {
+            this.getOfferReports()
+          })
+          .catch(error => {
+            console.log(error);
+          });
+    }
+
+    getOfferReports = () => {
+        var config = {
+            method: 'get',
+            url: '/offerreport/allreports',
+            headers: { 
+                'Authorization': 'Bearer '+localStorage.getItem('token')
+            }
+            };
+    
+            axios(config)
+            .then(response => {
+            this.setState({
+                offerReports: response.data,
+                numberOfPages: Math.ceil(response.data.length / this.state.reportsPerPage)
+            },(e) => this.setNewPage(e,this.state.currentPage))
+            })
+            .catch(error => {
+            console.log(error);
+            });
+    }
+
+    setNewPage = (event,page) => {
+
+        const indexOfLastReport = parseInt(page) * this.state.reportsPerPage;
+        const indexOfFirstReport = indexOfLastReport - this.state.reportsPerPage;
+    
+        const currReports = this.state.offerReports.slice(indexOfFirstReport, indexOfLastReport)
+    
+        this.setState({
+          currentPage: parseInt(page),
+          currentReports: currReports
+        })
+    }
+    
+  render() {
+    console.log(this.state)
+    return (
+        <div className='offerreports-section-main'>
+        <HeaderComponent/>
+        <div className='offerreports-section-header'>
+          <h1 className='offerreports-section-header-text'>
+            Пријавени невалидни понуди
+          </h1>
+        </div>
+
+        {
+            this.state.offerReports.length > 0 ? 
+            <>
+              <div className='offerreports-section'>
+                <table cellPadding={20} className='offerreports-section-table'>
+                <thead className='offerreports-section-table-head'>
+                    <tr>
+                    <th>Име на понуда</th>
+                    <th>Време на пријавување</th>
+                    <th>Последно пријавена од</th>
+                    <th>Вкупно пријави</th>
+                    <th>
+                    <button className='reportoffer-removeall-button' onClick={this.removeAllOfferReports}>Отстрани ги сите пријави</button>
+                    </th>
+                    </tr>
+                </thead>
+                <tbody>
+                    {
+                    this.state.currentReports.map((offer,idx) => <SingleReportComponent key={idx} id={offer.id} 
+                    times_reported={offer.times_reported} reportedAt={offer.reportedAt} phoneOffer={offer.phoneOffer} 
+                    reportedBy={offer.reportedBy} removeOfferReport={this.removeOfferReport}/>)
+                    }
+                </tbody>
+                </table>
+
+                </div>
+                <div className='offerreports-pagination-wrapper'>
+                <Pagination className='offerreports-pagination' onChange={this.setNewPage} page={this.state.currentPage}
+                count={this.state.numberOfPages} color="primary" />
+                </div>      
+            </>
+            :
+            <div className='no-offerreports-wrapper'>
+                <h1 className='no-offerreports-message'>Нема пријавено понуди</h1>
+            </div>
+        }
+      </div>
+    )
+  }
+}
+
+export default OfferReportsComponent
Index: phonelux-frontend/src/components/OfferReportsComponent/SingleReportComponent.css
===================================================================
--- phonelux-frontend/src/components/OfferReportsComponent/SingleReportComponent.css	(revision 47f4eafa88902f713d8f8cfe5d10306816c61ea3)
+++ phonelux-frontend/src/components/OfferReportsComponent/SingleReportComponent.css	(revision 47f4eafa88902f713d8f8cfe5d10306816c61ea3)
@@ -0,0 +1,4 @@
+.offerreport-remove-icon{
+    cursor: pointer;
+}
+
Index: phonelux-frontend/src/components/OfferReportsComponent/SingleReportComponent.js
===================================================================
--- phonelux-frontend/src/components/OfferReportsComponent/SingleReportComponent.js	(revision 47f4eafa88902f713d8f8cfe5d10306816c61ea3)
+++ phonelux-frontend/src/components/OfferReportsComponent/SingleReportComponent.js	(revision 47f4eafa88902f713d8f8cfe5d10306816c61ea3)
@@ -0,0 +1,35 @@
+import React, { Component } from 'react'
+import { Link } from 'react-router-dom'
+import './SingleReportComponent.css'
+import DeleteIcon from '@mui/icons-material/Delete';
+import Tippy from '@tippyjs/react';
+import { Delete } from '@mui/icons-material';
+
+export class SingleReportComponent extends Component {
+    constructor(props) {
+      super(props)
+    
+      this.state = {
+         
+      }
+    }
+    
+  render() {
+    return (
+        <tr className='offerreports-section-table-row'>
+          <td><Link to={"/phoneoffer/"+this.props.phoneOffer.id}>{this.props.phoneOffer.offer_name}</Link></td>
+          <td>{this.props.reportedAt.split('T')[0]}</td>
+          <td>{this.props.reportedBy}</td>
+          <td>{this.props.times_reported}</td>
+          <td>{
+           <Tippy placement='bottom' content='Отстрани пријава'>
+           <Delete className='offerreport-remove-icon' onClick={() => this.props.removeOfferReport(this.props.id)}
+            style={{fontSize: '45px'}}/>
+        </Tippy>
+        }</td>
+        </tr>
+      )
+  }
+}
+
+export default SingleReportComponent
